/* Cerveja — same visual language as the rest of the shell (shell.css):
   plain 1px solid borders, translucent white panels, one orange accent.
   Separate document (own iframe), so the accent is just repeated here
   rather than inherited from the parent's CSS variables. */
:root{
  --accent: hsl(30, 80%, 50%);
}

*{box-sizing:border-box;}
html,body{
  margin:0;
  width:100%;
  height:100%;
  overflow:hidden;
  font-family:Arial, sans-serif;
  background:rgba(255,255,255,0.85); /* matches the parent .window panel exactly, so there's no visible seam where the iframe starts */
}

/* ---------- grid ---------- */
#grid{
  height:100%;
  overflow:auto;
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(140px, 1fr));
  gap:10px;
  padding:14px;
  align-content:start;
}

#emptyMessage{
  grid-column:1 / -1;
  text-align:center;
  color:#666;
  font-size:13px;
  padding:30px 10px;
}

.clip-tile{
  appearance:none;
  -webkit-appearance:none;
  position:relative;
  aspect-ratio:1 / 1;
  border:1px solid;
  background:#000;
  padding:0;
  cursor:pointer;
  overflow:hidden;
}
.clip-tile img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  pointer-events:none; /* the tile itself is the click target */
}
.clip-tile:hover{
  border-color:var(--accent);
}

/* ---------- lightbox ---------- */
#clipOverlay{
  position:fixed;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:14px;
  padding:20px;
  background:rgba(0,0,0,0.9);
  z-index:10;
}
#clipOverlay.hidden{display:none;}
#overlayImg{
  max-width:100%;
  max-height:80%;
  border:1px solid #fff;
  background:#000;
  object-fit:contain;
}
#overlayControls{
  display:flex;
  gap:10px;
}
#overlayControls button{
  appearance:none;
  -webkit-appearance:none;
  cursor:pointer;
  padding:8px 16px;
  border:1px solid #fff;
  background:rgba(255,255,255,0.15);
  color:#fff;
  font:13px Arial, sans-serif;
}
#overlayControls button:disabled{
  opacity:0.35;
  cursor:default;
}
#prevBtn, #nextBtn{
  font-size:16px;
  padding:8px 14px;
}