/* Counsellor League — shared tokens and components.
   Layout: a narrow column, stage cards stacked, one accent per state. */
:root{
  --paper:#eef1f6; --card:#ffffff; --ink:#111926; --ink-soft:#4e5a6e; --rule:#cdd5e2;
  --blue:#1f4fd8; --blue-wash:#e3e9fb;
  --amber:#c9741a; --amber-wash:#fbeedd;
  --red:#b32b35; --red-wash:#fae7e8;
  --green:#1d6f52; --green-wash:#e2f1ea;
  --f-disp:"Archivo","Helvetica Neue",Arial,sans-serif;
  --f-body:"Source Sans 3","Segoe UI",system-ui,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,monospace;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root{
  --paper:#0d1118; --card:#161d28; --ink:#e9eef6; --ink-soft:#9eabbf; --rule:#2b3545;
  --blue:#7e9dff; --blue-wash:#1b2740; --amber:#e0a35c; --amber-wash:#2e2317;
  --red:#f08b92; --red-wash:#361d20; --green:#5ec79b; --green-wash:#15291f; color-scheme:dark;
}}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--f-body);font-size:16px;line-height:1.5}
.wrap{max-width:900px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:30px 60px}
h1,h2,h3{font-family:var(--f-disp);margin:0;text-wrap:balance}
h1{font-size:clamp(30px,5.5vw,48px);font-weight:900;letter-spacing:-.03em;line-height:.97}
h2{font-size:clamp(19px,3vw,25px);font-weight:800;letter-spacing:-.02em}
h3{font-size:18px;font-weight:800;letter-spacing:-.015em}
p{margin:0 0 12px}
.eyebrow{font-family:var(--f-mono);font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);margin:0}
.lede{color:var(--ink-soft);max-width:60ch;margin-top:12px}
.tiny{font-size:13px;color:var(--ink-soft);margin:8px 0 0}
.card{background:var(--card);border:1px solid var(--rule);border-radius:8px;padding:18px 20px}
hr.sep{height:1px;background:var(--rule);border:0;margin:30px 0}

label.fld{display:block;margin-bottom:14px}
label.fld span{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);display:block;margin-bottom:5px}
input,select,textarea{width:100%;font:inherit;font-size:16px;padding:10px 12px;border:1px solid var(--rule);border-radius:5px;background:var(--paper);color:var(--ink)}
textarea{font-family:var(--f-mono);font-size:12.5px;min-height:90px;resize:vertical}
input:focus-visible,select:focus-visible,textarea:focus-visible,button:focus-visible,a:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
button{font-family:var(--f-disp);font-weight:700;font-size:14.5px;padding:10px 18px;border:0;border-radius:5px;background:var(--blue);color:#fff;cursor:pointer}
button.ghost{background:transparent;color:var(--ink);border:1px solid var(--rule)}
button.sm{font-size:12.5px;padding:6px 12px}
button:disabled{opacity:.45;cursor:not-allowed}
button:hover:not(:disabled){filter:brightness(1.08)}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:14px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:480px){.two{grid-template-columns:1fr}}
.err{color:var(--red);font-size:14px;min-height:20px;margin:4px 0 0}
.okmsg{color:var(--green);font-size:14px;min-height:20px;margin:4px 0 0}

/* top bar */
.topbar{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;border-bottom:1px solid var(--rule);padding-bottom:14px;margin-bottom:22px}
.topbar a{color:var(--blue);text-decoration:none;font-family:var(--f-mono);font-size:11px;font-weight:600;letter-spacing:.09em;text-transform:uppercase}
.topbar a:hover{text-decoration:underline}
.who{font-family:var(--f-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft)}

/* stage cards */
.stage{background:var(--card);border:1px solid var(--rule);border-radius:8px;border-left:4px solid var(--rule);padding:16px 18px;margin-bottom:11px;display:block;text-decoration:none;color:inherit}
.stage.open{border-left-color:var(--blue)}
.stage.done{border-left-color:var(--green)}
.stage.offline{border-left-color:var(--amber)}
.stage.locked{opacity:.55}
a.stage:hover{border-color:var(--blue);background:var(--blue-wash)}
.stage-top{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.stage-top .n{font-family:var(--f-disp);font-weight:900;font-size:17px;color:var(--ink-soft);letter-spacing:-.03em}
.stage.open .n{color:var(--blue)} .stage.done .n{color:var(--green)} .stage.offline .n{color:var(--amber)}
.stage-top h3{flex:1 1 auto;min-width:0}
.st{font-family:var(--f-mono);font-size:9.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;padding:3px 7px;border-radius:3px;white-space:nowrap}
.st.done{background:var(--green-wash);color:var(--green)}
.st.open{background:var(--blue-wash);color:var(--blue)}
.st.offline{background:var(--amber-wash);color:var(--amber)}
.st.shut{background:var(--paper);color:var(--ink-soft);border:1px solid var(--rule)}
.stage p.d{color:var(--ink-soft);font-size:14.5px;margin:7px 0 0}
.scoreline{font-family:var(--f-mono);font-size:13px;margin-top:10px;font-variant-numeric:tabular-nums}
.scoreline b{color:var(--green)}

/* strands */
.strand{margin-bottom:11px}
.strand .t{display:flex;justify-content:space-between;gap:10px;font-size:14.5px;margin-bottom:4px}
.strand .t b{font-family:var(--f-mono);font-weight:600;font-variant-numeric:tabular-nums}
.sbar{height:9px;background:var(--rule);border-radius:5px;overflow:hidden}
.sbar i{display:block;height:100%;border-radius:5px}

/* case card */
.pcard{background:var(--card);border:1px solid var(--rule);border-radius:8px;overflow:hidden;margin-bottom:14px}
.pcard header{background:var(--blue-wash);border-bottom:1px solid var(--rule);padding:13px 18px}
.pcard header .k{font-family:var(--f-mono);font-size:10px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;color:var(--blue)}
.pcard header h3{margin-top:3px;font-size:20px}
.pcard .body{padding:16px 18px}
.pcard h4{font-family:var(--f-mono);font-size:10px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-soft);margin:0 0 7px}
.pcard .sec{margin-bottom:16px}
.pcard .sec:last-child{margin-bottom:0}
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:7px 18px}
.facts div{display:flex;justify-content:space-between;gap:10px;font-size:14.5px;border-bottom:1px dotted var(--rule);padding-bottom:3px}
.facts span{color:var(--ink-soft)}
.facts b{font-weight:600;text-align:right}
.quotes{margin:0;padding:0;list-style:none}
.quotes li{border-left:2px solid var(--amber);padding:2px 0 2px 12px;margin-bottom:9px;font-size:15px;font-style:italic;color:var(--ink)}
.tasks{margin:0;padding:0;list-style:none;counter-reset:tk}
.tasks li{counter-increment:tk;display:grid;grid-template-columns:26px 1fr;gap:10px;padding:9px 0;border-top:1px solid var(--rule);font-size:14.5px}
.tasks li:first-child{border-top:0}
.tasks li::before{content:counter(tk);font-family:var(--f-mono);font-size:11px;font-weight:600;color:var(--blue);padding-top:3px}
.tasks b{display:block}
.tasks em{font-style:normal;color:var(--ink-soft)}

/* misc */
.pill{display:inline-block;font-family:var(--f-mono);font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;padding:3px 8px;border-radius:3px;background:var(--amber-wash);color:var(--amber)}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:12px}
.note{border:1px solid var(--rule);border-left:4px solid var(--amber);background:var(--card);border-radius:7px;padding:14px 17px;margin-bottom:16px}
.code{font-family:var(--f-mono);font-size:12.5px;word-break:break-all;background:var(--paper);border:1px dashed var(--rule);border-radius:5px;padding:11px 13px;margin-top:10px;line-height:1.55}
table{width:100%;border-collapse:collapse;font-size:14px}
th,td{text-align:left;padding:7px 8px;border-bottom:1px solid var(--rule)}
th{font-family:var(--f-mono);font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-soft);font-weight:600}
.scroll{overflow-x:auto}

/* scoring rows — used by the trainer's rating panel */
.obs-row{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;padding:10px 0;border-top:1px solid var(--rule);font-size:14.5px}
.obs-row:first-of-type{border-top:0}
.ticks{display:flex;gap:5px}
.ticks button{min-width:34px;padding:5px 0;font-family:var(--f-mono);font-size:12px;background:transparent;border:1px solid var(--rule);color:var(--ink)}
.ticks button[aria-pressed="true"]{background:var(--green);border-color:var(--green);color:#fff}
.tickbox{min-width:76px;font-family:var(--f-mono);font-size:11px;letter-spacing:.07em;text-transform:uppercase;background:transparent;border:1px solid var(--rule);color:var(--ink-soft);padding:6px 10px}
.tickbox[aria-pressed="true"]{background:var(--green);border-color:var(--green);color:#fff}

.foot{margin-top:40px;padding-top:16px;border-top:1px solid var(--rule);font-family:var(--f-mono);font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-soft)}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}