/* All sizes are %, vw, em or rem (no px). Breakpoints use em (75em = 1200px at default font size). */
:root {
  color-scheme: light dark;
  --bg:#f6f6f8; --fg:#111; --card:#fff; --muted:#6b6b76; --accent:#3b6cf6; --row-color:#3b6cf6;
  --shadow:0 .15vw .7vw rgba(0,0,0,.14);
  --gap:1.3vw;
}
@media (prefers-color-scheme: dark) {
  :root { --bg:#0f0f12; --fg:#eee; --card:#1b1b21; --muted:#9a9aa6; --shadow:0 .15vw .8vw rgba(0,0,0,.55); }
}
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--fg); font:100%/1.4 system-ui, sans-serif; }
a { color:var(--accent); }
.page { width:100%; padding:2% 2.5% 4%; }

/* ---- icon bar (always visible) ---- */
#tabs {
  position:sticky; top:0; z-index:10;
  display:flex; justify-content:center; flex-wrap:wrap; gap:.4%;
  padding:1.2% 2.5%;
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:blur(.8vw);
  border-bottom:.1vw solid color-mix(in srgb, var(--fg) 10%, transparent);
}
/* 13 icons per row: 13 x 6.9% + 12 x 0.4% = 94.5% of the bar's content width */
.tab {
  --c:#3b6cf6;
  position:relative; flex:0 0 6.9%; aspect-ratio:1 / 1; padding:0;
  border:0; border-radius:22%; background:var(--c); color:#fff;
  cursor:pointer; overflow:hidden; box-shadow:var(--shadow);
  container-type:inline-size;
  transition:transform .15s, box-shadow .15s, opacity .15s;
  opacity:.78;
}
.tab:hover { transform:translateY(-3%); opacity:1; }
.tab.active { opacity:1; transform:translateY(-3%); box-shadow:0 0 0 .2vw var(--bg), 0 0 0 .4vw var(--c), var(--shadow); }
.tab img { position:absolute; left:10%; top:8%; width:80%; height:68%; object-fit:contain; }
.tab .label {
  position:absolute; left:0; right:0; bottom:0; padding:3% 4%;
  font-size:11cqw; font-weight:700; text-align:center; letter-spacing:.02em;
  background:rgba(0,0,0,.28); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.tab { align-self:flex-start; min-height:0; }
/* text fallback (e.g. ★ for Favourites): sits in a span so cqw refers to the tab itself */
.tab .glyph { position:absolute; left:0; right:0; top:0; bottom:18%; display:flex; align-items:center; justify-content:center; font-size:38cqw; font-weight:800; line-height:1; }

/* ---- header / status ---- */
header { display:flex; flex-wrap:wrap; gap:1%; align-items:center; justify-content:space-between; margin:.5em 0 .4em; }
h1 { margin:0; font-size:clamp(1.4rem, 1.8vw, 2.4rem); }
.controls { display:flex; gap:1.2vw; align-items:center; }
button.small { padding:.45em 1em; border:0; border-radius:.5em; background:var(--row-color); color:#fff; cursor:pointer; font-size:100%; }
button.small:disabled { opacity:.4; cursor:default; }
#status { color:var(--muted); min-height:1.4em; margin:0 0 1em; }
#status.error { color:#d33; }

/* ---- video grid: 5 per row, 2 rows ---- */
#grid { display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); gap:var(--gap); }
.card { background:var(--card); border-radius:.8vw; overflow:hidden; color:inherit; text-decoration:none; box-shadow:var(--shadow); display:flex; flex-direction:column; }
.thumb { aspect-ratio:16 / 9; background:#000; }
.thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.thumb.nothumb { display:flex; align-items:center; justify-content:center; color:#888; }
.thumb.nothumb::after { content:"No preview"; font-size:.85rem; }
.meta { flex:1 1 auto; padding:.8em .9em .9em; background:var(--card); transition:background-color .15s, color .15s; }
.name { font-weight:600; font-size:clamp(.95rem, .95vw, 1.3rem); word-break:break-word; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.info { color:var(--muted); font-size:clamp(.8rem, .8vw, 1.05rem); margin-top:.3em; transition:color .15s; }
/* hover: the area under the thumbnail takes the colour of the selected row */
.card:hover .meta, .card:focus-visible .meta { background:var(--row-color); color:#fff; }
.card:hover .info, .card:focus-visible .info { color:rgba(255,255,255,.85); }

/* ---- favourites ---- */
#favForm { display:flex; flex-wrap:wrap; gap:.6em; margin:0 0 .8em; }
#favForm[hidden] { display:none; }
#favForm input { flex:1 1 12em; min-width:0; padding:.5em .7em; font:inherit; color:var(--fg); background:var(--card); border:.1em solid color-mix(in srgb, var(--fg) 20%, transparent); border-radius:.5em; }
#favForm input:focus { outline:.15em solid var(--row-color); outline-offset:.05em; }
.favhead { grid-column:1 / -1; margin:.4em 0 0; font-size:1.1rem; color:var(--row-color); }
.favempty { grid-column:1 / -1; margin:0; color:var(--muted); }

/* "(...more)" toggle: phones only */
#tabs .more { display:none; flex:0 0 100%; border:0; background:none; color:var(--muted); font:inherit; cursor:pointer; padding:.3em; }
#tabs .more[hidden] { display:none !important; }

#pager { display:flex; gap:1.2vw; align-items:center; justify-content:center; margin-top:2em; color:var(--muted); }

@media (max-width:75em) { #grid { grid-template-columns:repeat(4, minmax(0, 1fr)); } }
@media (max-width:56em) { #grid { grid-template-columns:repeat(3, minmax(0, 1fr)); } .tab { flex-basis:12%; } #tabs { gap:2%; } }
@media (max-width:37em) {
  #grid { grid-template-columns:repeat(2, minmax(0, 1fr)); --gap:3vw; }
  /* 4 icons per row; collapsed = first 2 rows (8 icons), "(...more)" reveals the rest */
  #tabs { position:static; gap:3%; padding:3%; backdrop-filter:none; }
  .tab { flex-basis:22%; }
  #tabs.collapsed .tab:nth-child(n+9) { display:none; }
  #tabs .more { display:block; }
  .tab:hover { transform:none; }
  .card { border-radius:2vw; }
  .page { padding:3% 3% 6%; }
  .name { font-size:.9rem; }
  .info { font-size:.75rem; }
  header { margin-top:.2em; }
  h1 { font-size:1.4rem; }
  .controls { gap:3vw; font-size:.9rem; }
  button.small, #favForm input { min-height:2.6em; } /* comfortable tap targets */
  #pager { gap:4vw; }
}