/* /classes: builds on the site.css tokens. Element colours match the character planner. */
.el-earth{--el:#c9a26b}.el-fire{--el:#ee8a4f}.el-water{--el:#6cb6e8}.el-air{--el:#86cf7a}.el-neutral{--el:#b5b5aa}.el-best{--el:var(--accent-soft)}
#freshness.error{color:var(--danger)}
#freshness time{color:var(--text-soft);font-weight:600}

/* Class picker: 12 crests */
nav.class-picker{display:block;margin:var(--space-5) 0 var(--space-6)}
.class-picker ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--space-3)}
.class-card{display:flex;flex-direction:column;align-items:center;gap:4px;height:100%;padding:var(--space-4) var(--space-2) var(--space-3);border:1px solid var(--border);border-radius:var(--radius-lg);background:linear-gradient(180deg,var(--surface-raised),var(--surface-2));text-align:center;transition:border-color .15s,background .15s,transform .15s,box-shadow .15s}
.class-card:hover{border-color:var(--border-highlight);transform:translateY(-2px);box-shadow:var(--shadow)}
.class-card[aria-current]{border-color:var(--accent);background:linear-gradient(180deg,#2b3a24,var(--surface-2));box-shadow:0 0 0 1px var(--accent),0 8px 24px #f1b53d22}
.class-card img{width:64px;height:64px;filter:drop-shadow(0 4px 8px #000a);transition:transform .2s}
.class-card:hover img,.class-card[aria-current] img{transform:scale(1.06)}
.class-card-name{margin-top:4px;font:700 17px/1.2 var(--font-heading);color:var(--text)}
.class-card[aria-current] .class-card-name{color:var(--accent)}
.class-card-role{font-size:12.5px;color:var(--muted)}
.crest-fallback{display:grid;place-items:center;width:64px;height:64px;border-radius:50%;background:var(--surface-3);border:2px solid var(--border-highlight);color:var(--accent);font:700 26px var(--font-heading)}

/* Class overview */
.class-hero{display:grid;grid-template-columns:minmax(220px,320px) minmax(0,1fr);gap:var(--space-6);padding:var(--space-6);border:1px solid var(--border);border-radius:var(--radius-lg);background:radial-gradient(ellipse 60% 70% at 18% 40%,#f1b53d1c,transparent 70%),linear-gradient(180deg,var(--surface-raised),var(--surface));box-shadow:var(--shadow);scroll-margin-top:calc(var(--header-height) + 12px)}
.class-art{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:var(--space-3);min-height:320px}
.class-art img{display:block;width:auto;max-width:100%;height:420px;object-fit:contain;filter:drop-shadow(0 18px 26px #000c)}
.class-title{display:flex;align-items:center;gap:var(--space-4)}
.class-crest{flex:none;width:72px;height:72px;filter:drop-shadow(0 4px 10px #000a)}
.class-role{margin:0;font:700 12px/1.4 var(--font-body);letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.class-title h2{margin:2px 0 0;font-size:var(--fs-2xl)}
.class-subtitle{margin:2px 0 0;color:var(--muted);font-style:italic}
.chips{display:flex;flex-wrap:wrap;gap:var(--space-2);list-style:none;margin:var(--space-4) 0 0;padding:0}
.chip{display:inline-flex;align-items:center;gap:7px;padding:4px 12px;border:1px solid color-mix(in srgb,var(--el,var(--border-strong)) 55%,transparent);border-radius:var(--radius-pill);background:color-mix(in srgb,var(--el,var(--surface-3)) 14%,transparent);color:var(--text-soft);font-size:13.5px;font-weight:600}
.chip .dot{width:9px;height:9px;border-radius:50%;background:var(--el)}
.chip.tag{--el:var(--stone);font-weight:500}
.class-summary{margin:var(--space-4) 0 0;font-size:var(--fs-md);line-height:1.6;color:var(--text)}
.passive{position:relative;margin-top:var(--space-5);padding:var(--space-4) var(--space-5);border:1px solid var(--border-highlight);border-radius:var(--radius);background:linear-gradient(180deg,#2a2714,#1a231a);overflow:hidden}
.passive:before{content:'';position:absolute;inset:0 auto 0 0;width:3px;background:var(--accent-gradient)}
.passive-kicker{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2);margin:0;font:700 11.5px/1.4 var(--font-body);letter-spacing:.16em;text-transform:uppercase;color:var(--accent-soft)}
.passive h3{margin:4px 0 6px;font-size:var(--fs-lg);color:var(--accent)}
.passive p:last-child{margin:0;color:var(--text-soft)}
details.lore{margin-top:var(--space-4)}
details.lore p{color:var(--text-soft);font-style:italic}
.sex-toggle.segmented{display:inline-flex}

/* Segmented radio controls (artwork, rank) */
.segmented{display:inline-flex;flex-wrap:wrap;gap:2px;padding:3px;background:var(--input-bg);border:1px solid var(--border-strong);border-radius:var(--radius-sm)}
.segmented label{position:relative;margin:0;cursor:pointer}
.segmented input{position:absolute;inset:0;width:1px;height:1px;margin:0;opacity:0;pointer-events:none}
.segmented span{display:block;min-width:38px;padding:7px 12px;border-radius:5px;color:var(--text-soft);font-size:14px;font-weight:650;text-align:center;transition:background .15s,color .15s}
.segmented label:hover span{background:var(--surface-hover);color:var(--text)}
.segmented input:checked+span{background:var(--accent-gradient);color:var(--accent-ink);box-shadow:inset 0 1px 0 #fff6}
.segmented input:focus-visible+span{outline:2px solid var(--focus);outline-offset:2px}

/* Toolbar */
.spell-toolbar{position:sticky;top:calc(var(--header-height) + 0px);z-index:20;display:grid;grid-template-columns:minmax(0,1fr) 190px auto;align-items:end;gap:var(--space-4);margin:var(--space-6) 0 0;padding:var(--space-4) var(--space-5);background:color-mix(in srgb,var(--surface) 94%,transparent);backdrop-filter:blur(6px);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-sm)}
.spell-toolbar label{margin:0}
.rank-field{margin:0;padding:0;border:0;min-width:0}
.rank-field legend{padding:0;margin-bottom:6px;font-weight:600;font-size:14.5px;color:var(--text-soft)}
.count{margin:var(--space-4) 0 var(--space-2);color:var(--muted);font-size:var(--fs-sm)}
.elsewhere{margin:0 0 var(--space-3);color:var(--muted);font-size:var(--fs-sm)}
.elsewhere a{color:var(--accent-soft);text-decoration:underline;text-underline-offset:3px}

/* Spell cards */
.spell-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-4);align-items:start}
.spell-card{display:flex;flex-direction:column;gap:var(--space-3);min-width:0;padding:var(--space-4) var(--space-5);border:1px solid var(--border);border-radius:var(--radius-lg);background:linear-gradient(180deg,var(--surface-raised),var(--surface));box-shadow:var(--shadow-sm);scroll-margin-top:calc(var(--header-height) + 150px);transition:border-color .2s,box-shadow .2s}
.spell-card:hover{border-color:var(--border-strong)}
.spell-card.is-open{grid-column:1/-1;border-color:var(--border-highlight)}
.spell-card.is-special{background:linear-gradient(180deg,#26301f,var(--surface))}
.spell-card.flash{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent),var(--shadow)}
.spell-head{display:flex;align-items:center;gap:var(--space-3)}
.spell-icon{flex:none;width:48px;height:48px;border-radius:8px;box-shadow:0 0 0 1px #0008,0 3px 8px #0007}
.spell-icon-fallback{display:grid;place-items:center;background:var(--surface-3);border:1px solid var(--border-highlight);color:var(--accent);font:700 22px var(--font-heading)}
.spell-heading{min-width:0}
.spell-heading h3{margin:0;font-size:19px;line-height:1.25}
.spell-link{color:var(--text)}
.spell-link:hover{color:var(--accent-hover)}
.spell-meta{display:flex;flex-wrap:wrap;gap:6px;margin:5px 0 0}
.badge{display:inline-flex;align-items:center;padding:2px 9px;border-radius:var(--radius-pill);border:1px solid var(--border-strong);background:var(--surface-2);color:var(--text-soft);font-size:12px;font-weight:700;letter-spacing:.02em}
.badge.level{border-color:#5d7a52;color:var(--success)}
.badge.special{border-color:var(--border-highlight);background:#3a2f15;color:#f7e2ae}
.badge.muted{color:var(--muted)}
.badge.soon{border-color:#6b4f8a;background:#2b2138;color:#d9c6f2}
.class-card .badge.soon{margin-top:4px;font-size:10.5px;padding:1px 7px}
#class-soon{margin-left:var(--space-2);vertical-align:middle}
.mechanics{margin-top:var(--space-4);padding:var(--space-4) var(--space-5);border:1px solid var(--border-strong);border-radius:var(--radius);background:var(--surface-2)}
.mechanics-toggle{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);width:100%;min-height:36px;margin:0;padding:4px 0;border:0;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer}
.mechanics-toggle:hover .passive-kicker{color:var(--accent)}
.mechanics-chevron{flex:none;width:9px;height:9px;margin-right:4px;border-right:2px solid var(--accent-soft);border-bottom:2px solid var(--accent-soft);transform:rotate(45deg) translate(-2px,-2px);transition:transform .2s ease}
.mechanics.is-open .mechanics-chevron{transform:rotate(-135deg) translate(-2px,-2px)}
.mechanics-body{display:grid;grid-template-rows:0fr;visibility:hidden;transition:grid-template-rows .22s ease,visibility 0s linear .22s}
.mechanics.is-open .mechanics-body{grid-template-rows:1fr;visibility:visible;transition:grid-template-rows .22s ease,visibility 0s}
.mechanics-inner{min-height:0;overflow:hidden}
.mechanics dl{margin:var(--space-2) 0 0}
.mechanics dt{margin-top:var(--space-3);font-weight:700;color:var(--accent)}
.mechanics dd{margin:2px 0 0;color:var(--text-soft)}
.mechanics .note{margin:4px 0 0;color:var(--muted);font-size:13px}
.badge.off{border-color:#7a3b2c;background:#3a1d15;color:var(--danger)}
.quick{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:0;padding:0}
.quick li{padding:3px 10px;border-radius:var(--radius-sm);background:var(--surface-2);border:1px solid var(--border-soft);color:var(--muted);font-size:13px}
.quick strong{color:var(--text);font-weight:700;font-variant-numeric:tabular-nums}
.quick .q-ap strong{color:var(--sky-soft)}
.spell-desc{margin:0;color:var(--text-soft);font-size:14.5px;line-height:1.55}
.effects{list-style:none;margin:0;padding:0;display:grid;gap:5px}
.effects li{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;padding:6px 10px 6px 12px;border-left:3px solid var(--el,var(--border-strong));border-radius:0 var(--radius-sm) var(--radius-sm) 0;background:color-mix(in srgb,var(--el,var(--surface-3)) 9%,var(--surface-2));font-size:14px}
.effect-text{color:var(--text);font-variant-numeric:tabular-nums}
.effect-area{font-size:12px;color:var(--muted)}
.effect-area:before{content:'◇ ';color:var(--accent-deep)}
.spell-toggle{align-self:flex-start;display:inline-flex;align-items:center;gap:7px;min-height:36px;padding:6px 12px;border:1px solid var(--border-strong);border-radius:var(--radius-sm);background:var(--secondary);color:var(--secondary-ink);font:600 14px var(--font-body);cursor:pointer}
.spell-toggle:hover{background:var(--secondary-hover)}
.spell-toggle:after{content:'';width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid currentColor;transition:transform .15s}
.spell-toggle[aria-expanded=true]:after{transform:rotate(180deg)}
.spell-detail{display:grid;gap:var(--space-3);padding-top:var(--space-3);border-top:1px solid var(--border-soft)}
.spell-detail h4{margin:0;font:700 12px/1.4 var(--font-body);letter-spacing:.14em;text-transform:uppercase;color:var(--accent-soft)}
.sheet{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:6px;margin:0}
.stat{padding:7px 10px;border-radius:var(--radius-sm);background:var(--surface-2);border:1px solid var(--border-soft)}
.stat dt{font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--faint)}
.stat dd{margin:1px 0 0;color:var(--text);font-weight:600;font-size:14px}
.crit-block{display:grid;gap:6px}
.effects.crit li{border-left-color:var(--accent)}
table.ranks{font-size:13.5px;min-width:560px}
table.ranks tr.is-current{background:#f1b53d14}
table.ranks tr.is-current th{color:var(--accent)}
table.ranks td,table.ranks th{padding:7px 9px}
.rank-effects{color:var(--text-soft)}

/* Responsive */
@media(max-width:1080px){.class-picker ul{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:900px){
 .class-hero{grid-template-columns:1fr;gap:var(--space-4)}
 .class-art{min-height:0;flex-direction:row;justify-content:center;align-items:flex-end}
 .class-art img{height:280px}
 .spell-list{grid-template-columns:1fr}
 .spell-toolbar{grid-template-columns:minmax(0,1fr) 170px}
 .rank-field{grid-column:1/-1}
}
@media(max-width:560px){
 .class-picker ul{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-2)}
 .class-card{padding:var(--space-3) 4px}
 .class-card img,.crest-fallback{width:52px;height:52px}
 .class-card-name{font-size:15px}
 .class-card-role{font-size:11.5px}
 .class-hero{padding:var(--space-4)}
 .class-art{flex-direction:column;align-items:center}
 .class-art img{height:220px}
 .class-title h2{font-size:var(--fs-xl)}
 .class-crest{width:56px;height:56px}
 .spell-toolbar{position:static;grid-template-columns:1fr;padding:var(--space-4)}
 .spell-card{padding:var(--space-4)}
 .segmented span{min-width:0;padding:7px 11px}
 .sheet{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media print{.spell-toolbar{position:static}.spell-toggle{display:none}.mechanics-body{grid-template-rows:1fr;visibility:visible}.mechanics-chevron{display:none}}
/* Content links in site.css are underlined; cards and the picker are links styled as tiles. */
.class-picker a.class-card,.spell-card a.spell-link{text-decoration:none}
.spell-card a.spell-link{color:var(--text)}
.spell-card a.spell-link:hover{color:var(--accent-hover)}
/* Teaser classes (announced, no spells yet) */
.class-horizon{margin:var(--space-3) 0 0;padding:var(--space-3) var(--space-4);border:1px dashed #6b4f8a;border-radius:var(--radius);background:#211a2b;color:#d9c6f2;font-weight:600}
.class-card.is-teaser .class-crest-img{opacity:.85}