/* Shared theme for the ml-pokedex collection. */
:root { color-scheme: dark; --bg:#0e1117; --panel:#161b26; --line:#252c3b;
        --text:#e6ebf5; --dim:#8b97ad; --pick:#f6c945; --node:#5b8cf7; --mint:#7ee0a6; }
* { box-sizing: border-box; }
body { margin:0; font:15px/1.5 ui-sans-serif, system-ui, sans-serif;
       background:var(--bg); color:var(--text); }
a { color:var(--node); }

/* top bar shared by every page */
.top { padding:14px 22px; border-bottom:1px solid var(--line); display:flex;
       align-items:center; gap:14px; flex-wrap:wrap; }
.top .home { font-weight:700; text-decoration:none; color:var(--text); letter-spacing:.2px;
             display:flex; align-items:center; gap:8px; }
.top .home .dot { width:10px; height:10px; border-radius:3px; background:var(--pick); }
.top .crumb { color:var(--dim); font-size:13px; }
.top .spacer { flex:1; }
.top nav { display:flex; gap:6px; flex-wrap:wrap; }
.top nav a { font-size:13px; text-decoration:none; color:var(--dim); border:1px solid var(--line);
             padding:5px 11px; border-radius:999px; white-space:nowrap; }
.top nav a:hover { border-color:var(--node); color:var(--text); }
.top nav a.here { background:var(--panel); color:var(--text); border-color:var(--node); }

/* generic buttons / inputs */
button { padding:7px 16px; border-radius:8px; border:0; background:var(--node);
         color:#fff; font-weight:600; cursor:pointer; }
button:disabled { opacity:.35; cursor:default; }
button.ghost { background:transparent; color:var(--pick); border:1px solid var(--pick); }
input, select { padding:8px 10px; border-radius:8px; border:1px solid var(--line);
                background:#0b0e14; color:var(--text); }
label.sw { color:var(--dim); font-size:13px; display:flex; align-items:center; gap:6px; }

/* demo shell: left rail + right stage */
.demo { display:grid; grid-template-columns: 320px 1fr; gap:0; height:calc(100vh - 58px); }
.demo.narrow { grid-template-columns: 300px 1fr; }
#left { border-right:1px solid var(--line); overflow-y:auto; padding:14px; }
#right { display:flex; flex-direction:column; min-width:0; }
#bar { padding:12px 18px; border-bottom:1px solid var(--line); display:flex;
       align-items:center; gap:12px; flex-wrap:wrap; }
#status { padding:8px 18px; color:var(--dim); font-size:13px; border-bottom:1px solid var(--line);
          font-variant-numeric:tabular-nums; }
#stage { position:relative; flex:1; min-height:0; }
#cv { position:absolute; inset:0; width:100%; height:100%; }
#empty { position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
         padding:0 40px; pointer-events:none; }
#empty .msg { max-width:560px; text-align:center; color:var(--dim); font-size:14px; line-height:1.6; }
#ttl { margin:0; padding:12px 18px; border-top:1px solid var(--line); background:#0b0e14;
       color:#93a4c4; font:12px/1.45 ui-monospace, monospace; max-height:26vh;
       overflow:auto; white-space:pre-wrap; }
#hint { color:var(--dim); font-size:12px; }

/* model loader overlay */
.loader { position:absolute; inset:0; z-index:5; display:flex; flex-direction:column;
          align-items:center; justify-content:center; gap:15px; text-align:center; padding:0 30px;
          background:rgba(14,17,23,.94); transition:opacity .45s ease; }
.loader.done { opacity:0; }
.loader .ltitle { font-size:15px; font-weight:600; color:var(--text); }
.loader .lbar { width:min(340px,72%); height:8px; border-radius:999px; background:#0b0e14;
                border:1px solid var(--line); overflow:hidden; }
.loader .lbar-fill { height:100%; width:0; border-radius:999px;
                     background:linear-gradient(90deg,#5b8cf7,#7ee0a6); transition:width .18s ease; }
.loader.prepping .lbar-fill { width:100%;
                     background:linear-gradient(90deg,#7ee0a6,#5b8cf7,#7ee0a6); background-size:200% 100%;
                     animation:lshimmer 1s linear infinite; }
@keyframes lshimmer { to { background-position:-200% 0; } }
.loader .lpct { font:12px/1.4 ui-monospace, monospace; color:var(--dim); font-variant-numeric:tabular-nums; }
.loader .lsub { font-size:12px; color:var(--dim); max-width:360px; line-height:1.5; }
.loader.error .pokeball { animation:none; filter:grayscale(1) brightness(.7); }
.loader.error .lpct { color:#ff9a9a; }

/* spinning Pokéball */
.pokeball { width:52px; height:52px; border-radius:50%; border:3px solid #10141c; box-sizing:border-box;
            background:linear-gradient(#ef5350 0 50%, #f7f7f7 50% 100%); position:relative;
            animation:pspin 1s linear infinite; box-shadow:0 3px 14px rgba(0,0,0,.45); }
.pokeball::before { content:""; position:absolute; left:-3px; right:-3px; top:calc(50% - 3px);
                    height:6px; background:#10141c; }
.pokeball::after { content:""; position:absolute; top:calc(50% - 9px); left:calc(50% - 9px);
                   width:18px; height:18px; border-radius:50%; background:#f7f7f7;
                   border:3px solid #10141c; box-sizing:border-box; }
@keyframes pspin { to { transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .pokeball, .loader.prepping .lbar-fill { animation:none; } }

/* catalogue chips */
.cat h3 { font-size:12px; text-transform:uppercase; letter-spacing:.08em; color:var(--dim);
          margin:14px 0 6px; font-weight:600; }
.cat h3 em { font-style:normal; opacity:.55; }
.chips { display:flex; flex-wrap:wrap; gap:5px; }
.chip { padding:3px 9px; border-radius:999px; border:1px solid var(--line);
        background:var(--panel); cursor:pointer; font-size:13px; user-select:none; }
.chip:hover { border-color:var(--node); }
.chip.pick { background:var(--pick); color:#1a1500; border-color:var(--pick); font-weight:600; }
#bucket { display:flex; gap:6px; flex-wrap:wrap; min-height:26px; flex:1; }

/* prose pages (landing + about) */
.prose { max-width:820px; margin:0 auto; padding:34px 22px 90px; }
.prose h2 { font-size:22px; margin:42px 0 6px; letter-spacing:.2px; }
.prose h2:first-of-type { margin-top:8px; }
.prose .lede { font-size:19px; line-height:1.55; color:#eef2fa; margin:0 0 8px; }
.prose p { color:#d3dbea; }
.prose .dim { color:var(--dim); }
.prose code { font:13px/1.5 ui-monospace, monospace; background:#0b0e14; border:1px solid var(--line);
              border-radius:5px; padding:1px 5px; }
.prose pre { background:#0b0e14; border:1px solid var(--line); border-radius:8px; padding:12px 14px;
             overflow:auto; font:13px/1.5 ui-monospace, monospace; color:#93a4c4; }
.prose table { border-collapse:collapse; width:100%; margin:10px 0; font-size:14px; }
.prose th, .prose td { text-align:left; padding:7px 10px; border-bottom:1px solid var(--line); }
.prose th { color:var(--dim); font-weight:600; }
.prose td.n { font-variant-numeric:tabular-nums; }
.prose blockquote { margin:16px 0; padding:10px 16px; border-left:3px solid var(--pick);
                    background:#15130a; color:#e9e2c6; border-radius:0 8px 8px 0; }
.prose ul { padding-left:22px; }
.prose li { margin:5px 0; color:#d3dbea; }
.card { background:var(--panel); border:1px solid var(--line); border-radius:12px;
        padding:16px 18px; margin:18px 0; }
.prose hr { border:0; border-top:1px solid var(--line); margin:40px 0; }
.prose footer { color:var(--dim); font-size:14px; }

/* collection index cards */
.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:16px; margin:22px 0; }
.xcard { display:block; text-decoration:none; color:inherit; background:var(--panel);
         border:1px solid var(--line); border-radius:14px; padding:18px 18px 16px; transition:border-color .15s; }
.xcard:hover { border-color:var(--node); }
.xcard .tag { font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--dim); }
.xcard h3 { margin:6px 0 6px; font-size:18px; }
.xcard p { margin:0; color:#c3ccdd; font-size:14px; line-height:1.5; }
.xcard .meta { margin-top:12px; font-size:12px; color:var(--dim); font-variant-numeric:tabular-nums; }
.xcard.soon { opacity:.72; }
.badge { display:inline-block; font-size:11px; padding:2px 8px; border-radius:999px;
         border:1px solid var(--line); color:var(--dim); }
.badge.live { color:var(--mint); border-color:#2b5a42; background:#0f1a15; }