/* Theme and deck pages (chunk 10: templates/themes/*, decks/*, search.html, _macros/items.html,
   _macros/deck.html). Loaded after site.css on those pages only. CSP: no inline styles, so every
   dynamic width is a .w-N class and every school colour a .sch-<school> class. */

/* ---------- school colours missing from site.css ---------- */
.sch-focus{--sch:#5aa0a0}.sch-subterfuge{--sch:#5a5a6e}.sch-tactics{--sch:#a0785a}
.sch-taming{--sch:#7a9a4a}.sch-heavy-armor{--sch:#6e7480}.sch-light-armor{--sch:#9a8060}
.sch-shield{--sch:#6f5626}.sch-lunar{--sch:#7a86b8}

/* ---------- browse head + filters ---------- */
.browse-head h1{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 .2em}
.filters{padding:var(--s-2) var(--s-4) var(--s-3)}
.filters>summary{display:flex}
@media (min-width:700px){.filters>summary{display:none}.filters{padding-top:var(--s-3)}}
.filter-form .filter-row{margin-bottom:var(--s-3)}
.filter-row-2{align-items:center;justify-content:space-between}
.js .filter-form [data-js=filter-apply]{display:none}
.school-pick{border:0;margin:0 0 var(--s-2);padding:0;min-width:0}
.school-pick legend{font-weight:600;font-size:.92rem;padding:0;margin-bottom:var(--s-1)}
.school-checks{display:grid;grid-template-columns:repeat(auto-fill,minmax(9.5rem,1fr));gap:0 var(--s-3)}
.filter-form .hint{margin:0;color:var(--ink-soft)}
.active-filters{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2) var(--s-3);margin:0 0 var(--s-4)}
.active-filters .chips{margin:0}
.clear-all{font-size:.88rem}
.empty{background:var(--panel);border:1px dashed var(--line);border-radius:var(--radius);padding:var(--s-6) var(--s-5);text-align:center;margin:var(--s-4) 0}

/* ---------- item cards ---------- */
.item-card{padding-top:0;overflow:hidden}
.item-card .mini-stage{margin:0 -16px .5em;border-radius:5px 5px 0 0;border-bottom:1px solid var(--line)}
.item-card .card-title{margin:0;font-size:1.08rem;font-weight:700;font-family:var(--f-head);overflow-wrap:anywhere;border:0;padding:0}
.item-card .card-title a{color:var(--ink)}
.item-card .card-title a::after{content:"";position:absolute;inset:0;border-radius:var(--radius)}
.item-card:focus-within{outline:2px solid var(--focus);outline-offset:2px}
.item-card .card-title a:focus-visible{outline:none}
.item-card a.over{position:relative;z-index:1}
.item-card .card-chips{margin:.2em 0 0;gap:var(--s-1)}
.item-card .snip{margin:0;font-size:.86rem;color:var(--ink-soft);line-height:1.45}
.item-card .tfoot{margin-top:auto}
mark{background:var(--accent-soft);color:var(--ink);border-radius:2px;padding:0 .1em;box-shadow:inset 0 -2px 0 var(--accent)}
.theme-card .mini-stage{min-height:0}

.deck-band{margin:0 -16px .6em;padding:12px 16px;background:var(--gw-bg);border-bottom:1px solid var(--gw-line);
  display:flex;flex-direction:column;gap:8px;min-height:104px;justify-content:center}
.deck-band .emblems{display:flex;gap:6px;min-height:36px}
.deck-band .emblems img{width:36px;height:36px;filter:drop-shadow(0 1px 2px #000a)}
.deck-band .glyph-row{display:flex;flex-wrap:wrap;gap:4px}
.deck-band .glyph-row img{width:30px;height:30px;border-radius:4px;border:1px solid var(--gw-line);background:#0006}
.deck-facts{margin:0;font-family:var(--f-mono);font-size:.76rem;color:var(--accent-strong);letter-spacing:.03em}
.chip.sch{border-color:var(--sch,var(--line));color:var(--ink)}
.chip.sch::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--sch,var(--line));display:inline-block}

/* ---------- detail layout ---------- */
.item-head{margin:0 0 var(--s-4)}
.item-head h1{margin:.1em 0 .15em;overflow-wrap:anywhere}
.item-head .byline{margin:0;color:var(--ink-soft)}
.head-meta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2) var(--s-4);margin:var(--s-2) 0 0}
.head-meta .tcount{font-family:var(--f-mono);font-size:.76rem;color:var(--ink-soft)}
.detail-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-5);align-items:start}
@media (min-width:900px){.detail-grid{grid-template-columns:minmax(0,1fr) 320px}}
.detail-main>section:first-child>h2.vh+*{margin-top:0}
.detail-rail{display:flex;flex-direction:column;gap:var(--s-4)}
.detail-rail .card{margin:0}
@media (max-width:899px){.detail-rail{display:contents}.detail-rail>.actions{order:-1}.detail-rail>.summary{order:-2}.detail-rail>*{margin:0}}
@media (min-width:900px){.detail-rail{position:sticky;top:var(--s-4)}}
.actions .btn{width:100%}
.cmd-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2);margin:var(--s-2) 0}
.cmd-row code{font-size:.95rem}
.code-box{margin-top:var(--s-2)}
.code-box summary{cursor:pointer;font-size:.9rem;color:var(--link);min-height:32px;display:flex;align-items:center}
.code-area{font-family:var(--f-mono);font-size:.78rem;word-break:break-all;min-height:6em}
dl.kv{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.3em var(--s-3);margin:0;font-size:.9rem}
dl.kv dt{color:var(--ink-soft);font-family:var(--f-mono);font-size:.74rem;letter-spacing:.04em;text-transform:uppercase;padding-top:.2em}
dl.kv dd{margin:0}
.report-link{font-size:.88rem;margin:0;text-align:center}
.report-link a{color:var(--ink-soft)}
.item-desc .prose{font-size:1rem}
.related .tiles{margin-top:var(--s-3)}

/* ---------- swatch tables ---------- */
.tok-group{font-family:var(--f-mono);font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin:var(--s-4) 0 var(--s-1)}
table.swatches td:first-child{width:44px}
table.swatches.compact td{padding:.25em .5em}
.all-colours .table-wrap{margin-bottom:var(--s-2)}
.bg-image .thumb{display:inline-block;padding:0;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);cursor:zoom-in;overflow:hidden;max-width:360px}
.bg-image .thumb img{display:block;width:100%;height:auto}
.bg-image .thumb:hover{border-color:var(--accent)}

/* ---------- lightbox (static/js/lightbox.js) ---------- */
.lightbox{position:fixed;inset:0;z-index:200;background:#000d;display:flex;align-items:center;justify-content:center;padding:40px}
.lightbox[hidden]{display:none!important}
.lightbox .lb-img{max-width:100%;max-height:calc(100vh - 110px);border-radius:4px;box-shadow:0 10px 40px #000a;background:#222}
.lightbox .lb-cap{position:absolute;bottom:14px;left:0;right:0;margin:0;text-align:center;color:#ddd;font-size:.9rem;padding:0 24px}
.lightbox .lb-close{position:absolute;top:10px;right:14px;min-width:44px;min-height:44px;border:0;background:transparent;color:#fff;font-size:2rem;line-height:1;cursor:pointer;border-radius:var(--radius)}
.lightbox .lb-close:hover{background:#fff2}
@media (max-width:560px){.lightbox{padding:16px}}

/* ---------- deck viewer ---------- */
.hand h2{margin-top:0}
.glyphs{margin-top:var(--s-5)}
.hand-strip{list-style:none;margin:0;padding:12px;display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:8px;
  background:var(--gw-bg);border:1px solid var(--gw-line);border-radius:var(--radius);color:var(--gw-ink)}
@media (max-width:560px){.hand-strip{grid-template-columns:repeat(5,minmax(0,1fr))}}
.hslot{position:relative;aspect-ratio:1/1.18;border:1px solid var(--gw-line);border-radius:6px;background:#ffffff08;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:14px 2px 4px;min-width:0;transition:box-shadow .12s ease,border-color .12s ease}
.hkey{position:absolute;top:2px;left:5px;font-family:var(--f-mono);font-size:.68rem;color:#bfb39a}
.hslot-locked{border:2px solid #c7a64d;background:#c7a64d14}
.hslot-locked .lock{position:absolute;top:3px;right:4px;width:12px;height:12px;fill:#c7a64d;stroke:#c7a64d;stroke-width:1.4}
.hslot-locked .lock path{fill:none}
.hslot-assigned{border-color:#7a86b8;background:#7a86b814}
.hicons{display:flex;align-items:center;justify-content:center;max-width:100%}
.hicons img{width:40px;height:40px;border-radius:4px;max-width:100%;height:auto}
.hicons.stack img{width:28px;height:28px;margin-left:-10px;border:1px solid var(--gw-bg)}
.hicons.stack img:first-child{margin-left:0}
.hmore{font-family:var(--f-mono);font-size:.66rem;color:#d9cdb4}
.hcap{font-size:.6rem;line-height:1.1;text-align:center;color:#bfb39a}
.hany{font-family:var(--f-mono);font-size:.72rem;color:#8f836c;letter-spacing:.06em;text-transform:uppercase}
.hslot:focus-visible{outline:2px solid var(--gw-gold);outline-offset:2px}
.hslot.hl{box-shadow:0 0 0 2px var(--gw-gold),0 0 14px #c9a55a88}
.hand-legend{list-style:none;padding:0;margin:var(--s-2) 0 var(--s-4);display:flex;flex-wrap:wrap;gap:var(--s-1) var(--s-4);font-size:.82rem;color:var(--ink-soft)}
.hand-legend li{display:inline-flex;align-items:center;gap:.4em}
.lg{width:14px;height:14px;border-radius:3px;display:inline-block;border:1px solid var(--line)}
.lg-locked{border:2px solid #c7a64d}.lg-assigned{border:2px solid #7a86b8}.lg-empty{border-style:dashed}

.school-group{margin:var(--s-5) 0 0}
.school-h{display:flex;align-items:center;gap:var(--s-2);margin:0 0 var(--s-3);padding-bottom:var(--s-2);border-bottom:2px solid var(--sch,var(--line))}
.school-h img{width:36px;height:36px}
.gtiles{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px}
.gtile{background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--sch,var(--accent));border-radius:var(--radius);padding:10px 12px;
  display:flex;flex-direction:column;gap:6px;min-width:0;transition:box-shadow .12s ease,border-color .12s ease}
.gtile:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.gtile.hl{box-shadow:0 0 0 2px var(--accent);border-color:var(--accent)}
.gtop{display:flex;align-items:center;gap:10px}
.gtop img,.gtop .noicon{width:48px;height:48px;border-radius:6px;flex:0 0 48px;background:var(--gw-bg);border:1px solid var(--gw-line)}
.gname{display:flex;align-items:baseline;justify-content:space-between;gap:.5em;flex:1;min-width:0}
.gn{font-weight:700;font-family:var(--f-head);overflow-wrap:anywhere;line-height:1.25}
.gx{font-family:var(--f-mono);font-size:.9rem;color:var(--accent-strong);white-space:nowrap}
.gtile p{margin:0}
.pips{list-style:none;margin:0;padding:0;display:flex;gap:4px;flex-wrap:wrap}
.pip{width:18px;height:10px;border-radius:5px;border:1px solid var(--sch,var(--accent));background:transparent}
.pip.on{background:var(--sch,var(--accent))}
.pip-mastery{border-style:dashed;width:22px}
.pip-mastery.on{border-style:solid}
.pip-beyond{border-color:var(--bad);background:var(--bad)}
.gchips{margin:0;gap:var(--s-1)}
.gmore summary{cursor:pointer;font-size:.82rem;color:var(--link)}
.gmore p{font-size:.86rem;margin:.4em 0}
.ladder-list{margin:.3em 0 0;padding-left:1.1em;font-size:.82rem;color:var(--ink-soft)}
.ladder-list li.on{color:var(--ink)}
.gtile.retired{opacity:.6;border-left-color:var(--line);filter:grayscale(1)}

.summary .big-count{font-family:var(--f-brand);font-size:1.4rem;margin:0 0 var(--s-2)}
.summary .big-count b{font-size:2rem;color:var(--accent-strong)}
.mix{margin:0 0 var(--s-3)}
.mix-bar{display:flex;height:12px;border-radius:6px;overflow:hidden;background:var(--panel-2);border:1px solid var(--line)}
.mix-bar .seg{display:block;height:100%;background:var(--sch,var(--accent))}
.mix-legend{list-style:none;margin:var(--s-2) 0 0;padding:0;display:flex;flex-wrap:wrap;gap:2px var(--s-3);font-size:.84rem}
.mix-legend li{display:inline-flex;align-items:center;gap:.35em}
.mix-legend .sw{width:10px;height:10px;border-radius:2px;background:var(--sch,var(--accent));display:inline-block}

/* ---------- search ---------- */
.search-big .search{margin:var(--s-2) 0 var(--s-4)}
.search-big .search input{width:min(28rem,100%);min-height:44px;font-size:1rem}
.search-big .search button{min-height:44px}

@media (prefers-reduced-motion:reduce){.hslot,.gtile{transition:none}}