/* custom.css - Layout B (bento). Load AFTER bootstrap.min.css.
 * Fonts: add to inc_header.php
 *   <link rel="preconnect" href="https://fonts.googleapis.com">
 *   <link href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:wght@600;800&family=Nunito+Sans:wght@400;600;700;800&display=swap" rel="stylesheet">
 * Dark mode: set data-bs-theme="dark" on <html>.
 */
:root{
  --bs-body-font-family:"Nunito Sans",system-ui,sans-serif;
  --bs-body-bg:#f2f4f7; --bs-body-color:#1f2328;
  --ink:#23272e; --accent:#2563ff; --accent-soft:rgba(37,99,255,.10);
  --card-bg:#fff; --card-edge:#e1e5ea; --muted:#6b7480; --track:#e9edf2;
}
[data-bs-theme="dark"]{
  --bs-body-bg:#14161a; --bs-body-color:#e6e8ec;
  --ink:#23272e; --accent:#6e9bff; --accent-soft:rgba(110,155,255,.16);
  --card-bg:#1d2026; --card-edge:#2d323b; --muted:#9aa3af; --track:#2a2f37;
}
body{background:var(--bs-body-bg);color:var(--bs-body-color);}
h1,h2,h3,.display-font{font-family:"Bricolage Grotesque","Nunito Sans",sans-serif;letter-spacing:-.015em;}

.page-title{font-weight:800;font-size:clamp(1.7rem,3.2vw,2.4rem);margin:0;}
.page-sub{color:var(--muted);margin:0;}

/* Tiles */
.tile{background:var(--card-bg);border:1px solid var(--card-edge);border-radius:1.5rem;padding:1.5rem;height:100%;}
.tile-title{font-size:1.05rem;font-weight:700;margin:0 0 1rem;display:flex;align-items:center;gap:.5rem;}
.tile-title .bi{color:var(--accent);}
.tile-scroll{max-height:19rem;overflow-y:auto;margin:0 -.25rem;padding:0 .25rem;}

/* Hero tile */
.hero{background:var(--ink);color:#fff;border-color:transparent;display:flex;flex-direction:column;justify-content:space-between;gap:1.5rem;}
.hero-nums{display:flex;gap:2rem;flex-wrap:wrap;}
.hero-num{font-family:"Bricolage Grotesque",sans-serif;font-weight:800;font-size:clamp(3.2rem,6vw,4.6rem);line-height:.95;}
.hero-cap{color:#aab2bd;font-weight:600;margin-top:.35rem;}
.hero-chips{display:flex;gap:.5rem;flex-wrap:wrap;}
.chip{display:inline-flex;align-items:center;gap:.4rem;border:1px solid rgba(255,255,255,.18);border-radius:999px;padding:.3rem .8rem;font-size:.88rem;font-weight:600;color:#e6e8ec;text-decoration:none;background:transparent;}
.chip b{color:#fff;}
.chip:hover{border-color:var(--accent);color:#fff;}

/* Pills */
.nav-pills{gap:.35rem;margin-bottom:1rem;}
.nav-pills .nav-link{border-radius:999px;padding:.3rem .95rem;font-weight:700;font-size:.88rem;color:var(--muted);background:var(--bs-body-bg);}
.nav-pills .nav-link.active{background:var(--accent);color:#fff;}
.nav-pills .nav-link .n{opacity:.7;margin-left:.3rem;font-weight:600;}

/* Row lists */
.rows{list-style:none;margin:0;padding:0;}
.rows li{display:flex;align-items:center;gap:.9rem;padding:.6rem 0;border-bottom:1px solid var(--card-edge);}
.rows li:last-child{border-bottom:0;}
.rows .name{flex:1;min-width:0;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.rows .name a{color:inherit;text-decoration:none;}
.rows .name a:hover{color:var(--accent);text-decoration:underline;}
.rows .meta{color:var(--muted);font-size:.85rem;white-space:nowrap;}
.rank{width:1.7rem;height:1.7rem;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:.8rem;background:var(--accent-soft);color:var(--accent);flex:none;}
.rating{font-weight:800;display:inline-flex;align-items:center;gap:.3rem;}
.rating .bi{color:var(--accent);font-size:.85rem;}

/* Bars */
.bars{list-style:none;margin:0;padding:0;display:grid;gap:.85rem;}
.bar-top{display:flex;justify-content:space-between;font-weight:700;font-size:.92rem;margin-bottom:.3rem;}
.bar-top span:last-child{color:var(--muted);font-variant-numeric:tabular-nums;}
.track{height:.55rem;border-radius:999px;background:var(--track);overflow:hidden;}
.fill{height:100%;border-radius:999px;background:var(--accent);}

.empty{color:var(--muted);margin:0;padding:.5rem 0;}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px;}
@media (prefers-reduced-motion:reduce){*{transition:none!important;}}

/* Buttons styled as chips need font reset */
button.chip{font:inherit;font-weight:600;font-size:.88rem;cursor:pointer;}