/* Character Finder (/character-finder, cf.js). Builds on styles.css tokens + shows.css (chips, panels, tips, lead). Mobile first;
   space reserved while loading (low CLS). Colors use theme tokens so dark mode works; explicit dark tweaks at the bottom. */
.cf-load{min-height:820px}
.cf-must [hidden],.cf-tool [hidden],#cfJump[hidden]{display:none!important}
.cf-tool{display:grid;gap:18px;margin:0 0 24px}
.cf-ctrl h2,.cf-must h2{margin:0 0 10px;font-size:20px}
.cf-search{display:grid;gap:6px;font-weight:700}
.cf-search input{font:inherit;font-size:17px;min-height:48px;width:100%;box-sizing:border-box;padding:8px 14px;border:2px solid var(--ink);border-radius:12px;background:var(--card);color:var(--ink)}
.cf-search input:focus-visible{outline:3px solid var(--sun,#ffc629);outline-offset:2px}
.cf-pop{max-height:188px;overflow:auto;padding:2px}
.cf-sort{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:12px 0 0;font-size:14px}
.cf-sort select{font:inherit;font-size:16px;min-height:40px;padding:4px 8px;border:1px solid var(--rule);border-radius:8px;background:var(--card);color:var(--ink);max-width:100%}
.cf-main{min-width:0}
.cf-res{list-style:none;margin:0;padding:0;display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr))}
.cf-card{background:var(--card);border:1px solid var(--rule);border-left:6px solid #498500;border-radius:14px;padding:12px 14px;min-width:0;display:flex;flex-direction:column;gap:6px}
.cf-card.s-done,.cf-card.s-off{border-left-color:var(--muted);opacity:.9}
.cf-card.s-next{border-left-color:#a86b00}
.cf-card h3{margin:0;font-size:18px;line-height:1.25;overflow-wrap:anywhere}
.cf-card h3 small{display:block;font:500 13px/1.4 var(--text);color:var(--muted);margin-top:2px}
.cf-st{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:0;font-size:14px}
.cf-b{font-weight:700;border-radius:999px;padding:3px 10px;background:var(--rule-2);color:var(--ink);white-space:nowrap}
.cf-b.now{background:#dff3c4;color:#1f4a00}
.cf-b.next{background:#ffefc2;color:#5a3a00}
.cf-w{font-weight:700;border:2px solid var(--ink);border-radius:999px;padding:1px 9px;white-space:nowrap;font-variant-numeric:tabular-nums}
.cf-w.none{border-style:dashed;font-weight:500;color:var(--muted);border-color:var(--rule)}
.cf-ts{margin:0;font-size:13px;color:var(--muted);overflow-wrap:anywhere}
.cf-ts b{color:var(--ink)}
.cf-tag{font-style:normal;font-size:12px;font-weight:700;border-radius:999px;padding:2px 8px;background:#f3ecfe;color:#3b2a8f;display:inline-block}
.cf-who{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto;padding-top:4px}
.cf-star{font:inherit;font-size:14px;min-height:40px;padding:6px 12px;border:1px solid var(--rule);border-radius:999px;background:var(--card);color:var(--ink);cursor:pointer}
.cf-star[aria-pressed=true]{background:var(--sun,#ffc629);border-color:var(--ink);color:#043629;font-weight:700}
.cf-star:focus-visible,.cf-ml button:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.cf-empty{background:var(--card);border:1px dashed var(--rule);border-radius:14px;padding:14px;font-size:15px}
.cf-must h2 span{display:inline-grid;place-items:center;min-width:24px;height:24px;border-radius:999px;background:var(--ink);color:var(--paper);font-size:13px;margin-left:4px;vertical-align:middle}
.cf-prog{margin:0 0 10px}
.cf-bar{height:10px;border-radius:999px;background:var(--rule-2);overflow:hidden;border:1px solid var(--rule)}
.cf-bar i{display:block;height:100%;width:0;background:var(--spectrum);transition:width .4s ease}
.cf-prog p{margin:4px 0 0}
.cf-ml{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.cf-mi{display:grid;grid-template-columns:auto 1fr auto;gap:2px 10px;align-items:center;background:var(--card);border:1px solid var(--rule);border-radius:12px;padding:8px 10px;font-size:14px;min-width:0}
.cf-mi input{width:22px;height:22px;margin:0;accent-color:#498500}
.cf-mi label{font-weight:700;min-width:0;overflow-wrap:anywhere}
.cf-mi small{grid-column:2;color:var(--muted);overflow-wrap:anywhere}
.cf-mi.met label{text-decoration:line-through;text-decoration-thickness:2px}
.cf-mi .st-x{grid-row:1/span 2;grid-column:3}
.cf-dir{margin:24px 0}
.cf-dl{list-style:none;margin:0;padding:0;display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr))}
.cf-d{background:var(--card);border:1px solid var(--rule);border-radius:14px;padding:10px 14px;min-width:0}
.cf-d h3{margin:0 0 4px;font-size:17px}
.cf-d ul{margin:0;padding-left:18px;font-size:14px}
.cf-d li{overflow-wrap:anywhere}
.cf-d small{color:var(--muted)}
.cf-seen{display:block}
.cf-d:target{outline:3px solid var(--sun,#ffc629)}
@media (max-width:959px){
 .cf-scroll{flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;scrollbar-width:thin;padding-bottom:6px;max-height:none}
 .cf-scroll button{flex:none;white-space:nowrap}
}
@media (min-width:960px){
 .cf-tool{grid-template-columns:270px minmax(0,1fr) 290px;align-items:start}
 .cf-ctrl,.cf-must{position:sticky;top:12px}
 .cf-res{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
 #cfJump{display:none}
}
[data-theme=dark] .cf-b.now{background:#22401a;color:#d8f5bf}
[data-theme=dark] .cf-b.next{background:#3e3012;color:#ffe6a6}
[data-theme=dark] .cf-tag{background:#2c2350;color:#ddd0ff}
[data-theme=dark] .cf-card{border-left-color:#8fd14a}
[data-theme=dark] .cf-card.s-next{border-left-color:#e0a63a}
[data-theme=dark] .cf-card.s-done,[data-theme=dark] .cf-card.s-off{border-left-color:var(--muted)}
[data-theme=dark] .cf-w{border-color:var(--ink)}
[data-theme=dark] .cf-w.none{border-color:var(--rule-2)}
/* print = autograph checklist */
@media print{
 body.cf-printing *{visibility:hidden}
 body.cf-printing #cfMustBox,body.cf-printing #cfMustBox *{visibility:visible}
 body.cf-printing #cfMustBox{position:absolute;left:0;top:0;width:100%;border:0;box-shadow:none;background:#fff;color:#000}
 body.cf-printing #cfMustAct,body.cf-printing #cfMsg,body.cf-printing .st-x,body.cf-printing .cf-prog{display:none!important}
 body.cf-printing .cf-mi{border:1px solid #000;padding:14px;min-height:90px;align-items:start;background:#fff;color:#000;break-inside:avoid}
 body.cf-printing .cf-mi small{color:#333}
}