/* CAVAA-RGS clinician dashboard — triage board + guided consult.
   Principles: NHS-style plain language & one primary action per screen;
   EHR-style persistent patient banner; calm clinical tokens; hairlines
   over shadows; series colors (motor/cognitive) CVD-validated. */

:root {
  /* RGS clinician-portal palette */
  --accent: #26a9b6; --accent-dark: #1d8e99; --accent-soft: #e3f4f6;
  --bg: #e9e9e9; --surface: #fff; --surface-alt: #f5f5f5;
  --ink: #333; --muted: #7a7a7a;
  --line: #e6e6e6; --line-strong: #cfcfcf;
  --ok: #43a047; --warn: #b45309; --danger: #e53935;
  --motor: #43a047; --motor-soft: #e5f3e6; --motor-text: #2e7d32;
  --cognitive: #ff7043; --cognitive-soft: #ffe6dc; --cognitive-text: #d84315;
  --chart: #4fc3f7;
  --r: 10px;
  --font: "Montserrat", system-ui, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { font-family: var(--font); font-size: 15px; line-height: 1.5; color: var(--ink); background: var(--bg); }

/* app bar */
.appbar {
  height: 58px; background: var(--surface); border-bottom: none; box-shadow: 0 5px 15px rgba(16, 42, 47, .12);
  display: flex; align-items: center; gap: 16px; padding: 0 22px;
}
.brand { display: flex; flex-direction: column; line-height: 1.05; }
.brand .word { font-weight: 800; font-size: 25px; color: var(--accent); letter-spacing: .5px; }
.brand .word span { color: var(--ink); }
.brand .sub { font-size: 10.5px; color: var(--muted); margin-top: 3px; }
.crumb { flex: 1; min-width: 0; font-weight: 600; color: var(--muted); font-size: .9rem;
         white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crumb b { color: var(--ink); }
.actions { display: flex; gap: 8px; margin-left: auto; }
.ghost {
  display: inline-flex; align-items: center; gap: 6px; text-decoration: none;
  color: var(--accent); font-weight: 600; font-size: .82rem;
  padding: 6px 10px; border-radius: 7px;
}
.ghost:hover { background: var(--accent-soft); color: var(--accent-dark); }

.page { max-width: 1440px; margin: 0 auto; padding: 20px 22px 96px; }

/* panels */
.panel { background: var(--surface); border: none; border-radius: var(--r);
         box-shadow: 0 1px 4px rgba(0,0,0,.08); padding: 16px 20px; margin-bottom: 16px; }
.panel h2 { margin: 0 0 4px; font-size: 1.02rem; }
.panel h3 { margin: 0 0 12px; font-size: .95rem; font-weight: 700; color: var(--ink); }
.lede { color: var(--muted); font-size: .88rem; margin: 0 0 12px; }
.muted { color: var(--muted); }
.small { font-size: .8rem; }

/* section head (RGS "PATIENT DATA" style) */
.sechead {
  font-size: 1.05rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: #8a8a8a; border-bottom: 2px solid #cfcfcf; padding-bottom: 6px; margin: 2px 0 16px;
}

/* buttons */
.btn {
  font-family: inherit; font-size: .9rem; font-weight: 600; cursor: pointer;
  border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink);
  border-radius: 8px; padding: 9px 16px; display: inline-flex; align-items: center; gap: 8px;
}
.btn:hover { border-color: var(--accent); color: var(--accent-dark); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; padding: 11px 22px; }
.btn.primary:hover { background: var(--accent-dark); color: #fff; }
.btn:disabled { opacity: .5; cursor: default; }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* board */
.stats { display: flex; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.stat { background: var(--surface); border: none; border-radius: var(--r);
        box-shadow: 0 1px 4px rgba(0,0,0,.08); padding: 14px 20px; min-width: 150px; text-align: center; }
.stat b { display: block; font-size: 1.6rem; font-weight: 700; }
.stat span { font-size: .68rem; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; font-weight: 600; }
.stat.accent b { color: var(--accent-dark); }
.stat.accent span { color: var(--accent-dark); }

table.board { width: 100%; border-collapse: collapse; }
.board th { text-align: left; font-size: .68rem; text-transform: uppercase; letter-spacing: .06em;
            color: #8a8a8a; font-weight: 700; padding: 9px 10px; background: #f1f1f1; }
.board td { padding: 12px 10px; border-bottom: 1px solid var(--surface-alt); vertical-align: middle; }
.board tr.row { cursor: pointer; }
.board tr.row:hover td { background: var(--accent-soft); }
.board tr.done td { color: var(--muted); }
.board .pt { font-weight: 700; white-space: nowrap; }
.board .pt .grp { font-weight: 500; color: var(--muted); font-size: .76rem; }
.flagline { display: flex; flex-direction: column; gap: 2px; }
.flag { display: inline-flex; align-items: center; gap: 7px; font-size: .86rem; }
.flag::before { content: ""; width: 8px; height: 8px; border-radius: 50%; flex: none; }
.flag.warn::before { background: var(--warn); }
.flag.verify::before { background: var(--cognitive); }
.flag.review::before { background: var(--accent); }
.flag.new::before { background: var(--ok); }
.confcell { font-variant-numeric: tabular-nums; color: var(--muted); white-space: nowrap; }
.dots { letter-spacing: 2px; color: var(--accent); }

.spark { display: inline-block; vertical-align: middle; }
.spark polyline { fill: none; stroke: var(--chart); stroke-width: 1.8; }
.spark .low { stroke: var(--warn); }

/* patient banner (consult) */
.ptbanner {
  display: flex; align-items: center; gap: 16px;
  background: var(--surface); border: none; border-radius: var(--r);
  box-shadow: 0 1px 4px rgba(0,0,0,.08);
  padding: 10px 18px; margin-bottom: 14px;
}
.ptbanner .avatar {
  width: 38px; height: 38px; border-radius: 50%; background: var(--accent-soft);
  color: var(--accent-dark); font-weight: 800; display: flex; align-items: center; justify-content: center;
}
.ptbanner .who b { display: block; }
.ptbanner .who span { font-size: .78rem; color: var(--muted); }
.ptbanner .spacer { flex: 1; }
.badge { font-size: .72rem; font-weight: 600; padding: 2px 10px; border-radius: 999px;
         background: var(--accent-soft); color: var(--accent-dark); white-space: nowrap; }

/* stepper */
.wizsteps { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.wstep { display: inline-flex; align-items: center; gap: 8px; font-size: .84rem; font-weight: 600;
        color: var(--muted); padding: 6px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); }
.wstep.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.wstep.done { color: var(--accent-dark); border-color: var(--accent); cursor: pointer; }
.wstep .n { width: 18px; height: 18px; border-radius: 50%; background: currentColor; position: relative; }
.wstep .n::after { content: attr(data-n); position: absolute; inset: 0; display: flex; align-items: center;
                  justify-content: center; font-size: .68rem; color: var(--surface); filter: invert(0); }
.wstep.on .n::after { color: var(--accent); }
.wsteparrow { color: var(--line-strong); }

/* consult content */
.grid2 { display: grid; grid-template-columns: 1.2fr 1fr; gap: 14px; align-items: start; }
@media (max-width: 900px) { .grid2 { grid-template-columns: 1fr; } }
.finding { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px;
           border: 1px solid var(--line); border-left: 4px solid var(--warn);
           border-radius: 8px; margin-bottom: 8px; background: var(--surface); }
.finding.verify { border-left-color: var(--cognitive); }
.finding.review { border-left-color: var(--accent); }
.finding.new { border-left-color: var(--ok); }
.finding b { font-size: .9rem; }
.finding p { margin: 2px 0 0; font-size: .82rem; color: var(--muted); }

.lastweek { display: flex; flex-wrap: wrap; gap: 6px; }
.lwday { border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; font-size: .78rem; background: var(--surface-alt); }
.lwday b { display: block; font-size: .68rem; color: var(--muted); text-transform: uppercase; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  font-family: inherit; font-size: .86rem; font-weight: 600; cursor: pointer;
  border: 1.5px solid var(--line-strong); background: var(--surface); color: var(--ink);
  border-radius: 999px; padding: 7px 16px;
}
.chip:hover { border-color: var(--accent); }
.chip.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.chip.m.on { background: var(--motor); border-color: var(--motor); }
.chip.c.on { background: var(--cognitive); border-color: var(--cognitive); }
.qrow { margin-bottom: 16px; }
.qrow > b { display: block; margin-bottom: 8px; font-size: .92rem; }
.qrow .hint { font-size: .78rem; color: var(--muted); margin-top: 6px; }

/* candidate plans */
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; align-items: stretch; }
@media (max-width: 1000px) { .plans { grid-template-columns: 1fr; } }
.plan { border: 1.5px solid var(--line); border-radius: var(--r); background: var(--surface);
        box-shadow: 0 1px 4px rgba(0,0,0,.06);
        padding: 14px 16px; cursor: pointer; display: flex; flex-direction: column; gap: 10px; }
.plan:hover { border-color: var(--line-strong); }
.plan.sel { border-color: var(--accent); box-shadow: 0 0 0 1.5px var(--accent), 0 1px 4px rgba(0,0,0,.06); }
.plan h4 { margin: 0; font-size: .95rem; }
.plan .basis { font-size: .76rem; color: var(--muted); }
.plan table { width: 100%; border-collapse: collapse; font-size: .72rem; }
.plan td, .plan th { border: 1px solid var(--surface-alt); padding: 3px 6px; text-align: left; }
.plan th { background: var(--surface-alt); font-size: .64rem; text-transform: uppercase; color: var(--muted); }
.plan .radar { align-self: center; }
.tradeoffs { margin: 0; padding: 0; list-style: none; font-size: .8rem; }
.tradeoffs li { padding-left: 16px; position: relative; margin: 3px 0; }
.tradeoffs li.plus::before { content: "+"; position: absolute; left: 2px; color: var(--ok); font-weight: 700; }
.tradeoffs li.minus::before { content: "−"; position: absolute; left: 2px; color: var(--danger); font-weight: 700; }
.plan .pick { margin-top: auto; }

.radar polygon.grid { fill: none; stroke: var(--line); stroke-width: .6; }
.radar line.ax { stroke: var(--line); stroke-width: .6; }
.radar polygon.def { fill: none; stroke: var(--warn); stroke-width: 1.4; }
.radar polygon.cov { fill: rgba(14,127,140,.22); stroke: var(--accent); stroke-width: 1.5; }
.radar text { font-size: 7.5px; fill: var(--muted); font-family: var(--font); }
.radar text.m { fill: var(--motor); } .radar text.c { fill: var(--cognitive); }

/* prescribe */
.rxsummary { border: 1px solid var(--line); border-left: 4px solid var(--accent);
             border-radius: 8px; padding: 12px 16px; font-size: .95rem; background: var(--surface-alt); margin-bottom: 12px; }
.rxweek { width: 100%; border-collapse: collapse; font-size: .82rem; margin-bottom: 8px; }
.rxweek th, .rxweek td { border: 1px solid var(--line); padding: 6px 9px; text-align: left; }
.rxweek th { background: var(--surface-alt); font-size: .68rem; text-transform: uppercase; color: var(--muted); }

/* persistent action bar: same position on every step, primary always at the
   right edge, back always at the left edge */
.footactions {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  display: flex; gap: 10px; align-items: center;
  background: var(--surface); border-top: 1px solid var(--line);
  box-shadow: 0 -2px 8px rgba(0,0,0,.07);
  padding: 10px max(22px, calc((100% - 1396px) / 2));
}
.footactions .left { margin-right: auto; }
.footactions .btn.primary { margin-left: auto; }
.footactions .btn.primary:first-child { margin-left: auto; }

/* toast */
.toast {
  position: fixed; bottom: 78px; left: 50%; transform: translateX(-50%);
  background: var(--ink); color: #fff; padding: 10px 22px; border-radius: 8px;
  font-size: .88rem; opacity: 0; transition: opacity .2s; pointer-events: none; z-index: 50;
}
.toast.on { opacity: 1; }

.empty { text-align: center; padding: 44px 20px; color: var(--muted); }
.empty b { display: block; font-size: 1.1rem; color: var(--ink); margin-bottom: 6px; }
.hidden { display: none !important; }

/* ================= components added after v1, in the soft idiom ========= */

/* hGraph pair (motor + cognitive) */
.hg { overflow: visible; }
.hg .band { fill: none; stroke: var(--accent); opacity: .16; }
.hg .spoke { stroke: var(--line); stroke-width: .6; }
.hg .dot.ok { fill: var(--accent); }
.hg .dot.under { fill: var(--danger); }
.hg .dot.over { fill: #1e88e5; }
.hg .dot.none { fill: var(--line-strong); }
.hg text { font-size: 7.5px; fill: var(--muted); font-family: var(--font); }
.hg text.m { fill: var(--motor); } .hg text.c { fill: var(--cognitive); }
.hg .score { font-size: 14.5px; font-weight: 800; fill: var(--ink); }
.hg .scorelab { font-size: 6.5px; fill: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.hgrow { display: flex; justify-content: center; gap: 22px; align-self: center; flex-wrap: wrap; padding: 6px 10px 2px; }
.hgfig { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.hgfig figcaption { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; }
.hgfig figcaption.m { color: var(--motor); } .hgfig figcaption.c { color: var(--cognitive); }

/* compressed week view (mix chips) */
.doseline { font-size: .78rem; color: var(--muted); margin-bottom: 8px; }
.mix { display: flex; flex-wrap: wrap; gap: 6px; }
.mixchip {
  font-size: .76rem; padding: 2px 10px; border-radius: 999px;
  background: var(--surface-alt); border: 1px solid var(--line); color: var(--muted);
  white-space: nowrap;
}
.mixchip b { font-weight: 700; }
.mixchip.m { background: var(--motor-soft); border-color: transparent; color: var(--motor-text); }
.mixchip.c { background: var(--cognitive-soft); border-color: transparent; color: var(--cognitive-text); }
.rxweek { margin-top: 8px; }

/* mini activity table (RGS PATIENT FIT style) */
table.wk { width: 100%; border-collapse: collapse; font-size: .78rem; }
.wk td { padding: 3px 4px; border-bottom: 1px solid var(--surface-alt); vertical-align: middle; }
.wk tr:last-child td { border-bottom: none; }
.wk .ico { width: 30px; }
.wk .ico img { width: 26px; height: 26px; border-radius: 6px; object-fit: cover; display: block; }
.wk .nm { font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden;
          text-overflow: ellipsis; max-width: 110px; }
.wk .dps { white-space: nowrap; }
.wk .dp {
  display: inline-flex; align-items: center; justify-content: center;
  width: 17px; height: 17px; border-radius: 5px; margin-right: 2px;
  font-size: .62rem; font-weight: 700; background: #ededed; color: #b5b5b5;
}
.wk .dp.on { background: var(--motor); color: #fff; }
.wk .dp.on.c { background: var(--cognitive); }
.wk .rep { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; width: 30px; }

/* fine-tune / accordion sections */
.finetune { border-top: 1px solid var(--line); margin-top: 6px; }
.finetune summary { cursor: pointer; font-weight: 600; color: var(--muted); font-size: .88rem; padding: 12px 0; }
.finetune summary:hover { color: var(--accent-dark); }
.finetune .badge { margin-left: 8px; }

/* dial grid (11 training dials) */
.dialgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 36px; }
@media (max-width: 800px) { .dialgrid { grid-template-columns: 1fr; } }
.dialcol { display: flex; flex-direction: column; gap: 14px; }
.subhead { display: block; font-size: .76rem; color: var(--muted); margin: 16px 0 6px; }
.dialtitle { display: block; font-size: .74rem; text-transform: uppercase; letter-spacing: .06em;
             color: var(--muted); margin-bottom: 10px; }
.dialtitle.m { color: var(--motor); } .dialtitle.c { color: var(--cognitive); }
.dial { display: grid; grid-template-columns: 96px 1fr 30px; gap: 12px; align-items: center;
        font-size: .8rem; margin-bottom: 6px; }
.dial b { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.dial input[type="range"] { -webkit-appearance: none; appearance: none; height: 16px; background: transparent; cursor: pointer; }
.dial input[type="range"]::-webkit-slider-runnable-track { height: 5px; border-radius: 3px; background: var(--line); }
.dial.m input[type="range"]::-webkit-slider-runnable-track { background: var(--motor-soft); }
.dial.c input[type="range"]::-webkit-slider-runnable-track { background: var(--cognitive-soft); }
.dial input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px;
  border-radius: 50%; margin-top: -4.5px; background: #fff; border: 2.5px solid var(--accent); }
.dial.m input[type="range"]::-webkit-slider-thumb { border-color: var(--motor); }
.dial.c input[type="range"]::-webkit-slider-thumb { border-color: var(--cognitive); }
.dial input[type="range"]::-moz-range-track { height: 5px; border-radius: 3px; background: var(--line); }
.dial.m input[type="range"]::-moz-range-track { background: var(--motor-soft); }
.dial.c input[type="range"]::-moz-range-track { background: var(--cognitive-soft); }
.dial input[type="range"]::-moz-range-thumb { width: 11px; height: 11px; border-radius: 50%;
  background: #fff; border: 2.5px solid var(--accent); }
.dial.m input[type="range"]::-moz-range-thumb { border-color: var(--motor); }
.dial.c input[type="range"]::-moz-range-thumb { border-color: var(--cognitive); }

/* session-option fields */
.numrow { display: flex; gap: 22px; flex-wrap: wrap; margin-bottom: 4px; }
.fieldlabel { display: block; font-size: .76rem; color: var(--muted); margin-bottom: 6px; }
.fieldlabel b { float: right; font-variant-numeric: tabular-nums; color: var(--ink); }
.numstep { display: inline-flex; align-items: stretch; border: 1px solid var(--line-strong);
           border-radius: 8px; background: var(--surface); overflow: hidden; }
.numstep b { width: 46px; display: flex; align-items: center; justify-content: center;
             font-variant-numeric: tabular-nums; font-size: .95rem;
             border-left: 1px solid var(--line); border-right: 1px solid var(--line); }
.numstep button { width: 38px; height: 38px; border: none; background: transparent; cursor: pointer;
                  font-size: 1.05rem; color: var(--ink); font-family: inherit; }
.numstep button:hover { background: var(--accent-soft); color: var(--accent-dark); }
.advgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px; max-width: 900px; }
@media (max-width: 800px) { .advgrid { grid-template-columns: 1fr; } }
.rangefield { margin: 14px 0 4px; max-width: 380px; }
.rangefield input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 16px;
                                  background: transparent; cursor: pointer; display: block; }
.rangefield input[type="range"]::-webkit-slider-runnable-track { height: 5px; border-radius: 3px; background: var(--line); }
.rangefield input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px;
  border-radius: 50%; margin-top: -4.5px; background: #fff; border: 2.5px solid var(--accent); }
.rangefield input[type="range"]::-moz-range-track { height: 5px; border-radius: 3px; background: var(--line); }
.rangefield input[type="range"]::-moz-range-thumb { width: 11px; height: 11px; border-radius: 50%;
  background: #fff; border: 2.5px solid var(--accent); }
.rangefield input[type="range"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.rangeends { display: flex; justify-content: space-between; font-size: .72rem; color: var(--muted); margin-top: 2px; }

/* stepper markup is now label-only pills; keep old pill look */
.wstep { cursor: default; }
.wstep.done::before { content: "✓ "; color: var(--accent-dark); font-weight: 700; }


/* ======================================================================
   Legacy research-console components, ported verbatim from style.css.
   Token bridge: legacy var names -> dashboard palette. */
:root {
  --brand: var(--accent); --brand-dark: var(--accent-dark); --brand-soft: var(--accent-soft);
  --border: var(--line); --border-strong: var(--line-strong);
  --text: var(--ink);
  --motor-track: var(--motor-soft); --cog-track: var(--cognitive-soft);
  --radius: 8px; --radius-lg: 12px;
}
body.modal-open { overflow: hidden; }
/* ---- badges ---- */
.badge { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: .72em; font-weight: 600; white-space: nowrap; }
.badge--brand  { background: var(--brand-soft); color: var(--brand-dark); }
.badge--muted  { background: #edeff0; color: var(--muted); }
.badge--motor  { background: #f7ead9; color: #9c5613; }
.badge--cog    { background: #e4e7f7; color: #47549c; }
/* !important so it also wins over display:flex/grid component rules */
.hidden { display: none !important; }
/* ---- meter bars (memory inspector + reactive explanation) ---- */
.bars { display: flex; flex-direction: column; gap: 6px; }
.bar-row {
  display: grid; grid-template-columns: 88px 1fr 44px;
  align-items: center; gap: 10px; font-size: .78rem;
}
.bar-track {
  display: block; height: 10px; border-radius: 5px; overflow: hidden;
  background: var(--surface-alt); border: 1px solid var(--border);
}
.bar-row.motor     .bar-track { background: var(--motor-track); border-color: transparent; }
.bar-row.cognitive .bar-track { background: var(--cog-track);  border-color: transparent; }
.bar-fill {
  display: block; height: 100%;
  border-radius: 0 4px 4px 0;             /* rounded data-end, square baseline */
  transition: width .45s cubic-bezier(.2,.7,.3,1);
}
.bar-row.motor     .bar-fill { background: var(--motor); }
.bar-row.cognitive .bar-fill { background: var(--cognitive); }
.bar-val { text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; font-size: .74rem; }
.bar-val b { color: var(--text); font-weight: 600; }
/* ---- merged capacity + target rows ----
   One track per dimension: fill = capacity (deficit = remainder of the
   track), draggable handle = this week's training target. */
.target-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 2px 0 12px; font-size: .72rem; color: var(--muted); }
.target-legend .lg { display: inline-flex; align-items: center; gap: 6px; }
.target-legend .sw.score {
  font-size: .64rem; color: var(--muted); background: var(--surface-alt);
  border-radius: 999px; padding: 0 6px; font-variant-numeric: tabular-nums;
}
.target-legend .sw.score b { color: var(--text); }
.target-legend .sw.handle {
  width: 11px; height: 11px; border-radius: 50%; display: inline-block;
  background: #fff; border: 2.5px solid var(--border-strong);
  box-shadow: 0 1px 3px rgba(0,0,0,.25);
}
.target-legend .sw.notch {
  width: 0; height: 0; display: inline-block;
  border-left: 5px solid transparent; border-right: 5px solid transparent;
  border-bottom: 7px solid var(--border-strong);
}

/* plan: targets card (row 1) + full-width session options + generate */
.zone--input .card { margin-bottom: 0; height: 100%; }
.plan-col--session .session-row { margin-top: 0; padding-top: 0; border-top: 0; }
.plan-col--session .advanced:first-of-type { margin-top: 14px; }
.zone--session .card { margin-bottom: 0; }
.zone--session > .btn--block { margin-top: 14px; }
.zone--session > .draft-summary { margin: 12px 2px 0; }

.dim-groups { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 34px; margin-top: 4px; }
@media (max-width: 900px) { .dim-groups { grid-template-columns: 1fr; } }
.dim-group h4 { display: flex; align-items: center; gap: 7px; color: var(--text); margin-top: 6px; }
.dim-group h4 .src { color: var(--muted); font-weight: 500; letter-spacing: .02em; }
.dim-group h4 .group-score {
  margin-left: auto; font-size: .72rem; color: var(--muted);
  background: var(--surface-alt); border-radius: 999px; padding: 1px 8px;
  font-variant-numeric: tabular-nums; letter-spacing: 0; text-transform: none;
}
.dim-group h4 .group-score b { color: var(--text); font-weight: 700; }
.dot { width: 9px; height: 9px; border-radius: 3px; display: inline-block; }
.dot.motor { background: var(--motor); }
.dot.cognitive { background: var(--cognitive); }

.dim-row {
  display: grid; grid-template-columns: 82px 46px 1fr 40px;
  align-items: center; gap: 10px; font-size: .78rem; margin-bottom: 11px;
}
.dim-row.motor     { --c: var(--motor);     --ct: var(--motor-track); }
.dim-row.cognitive { --c: var(--cognitive); --ct: var(--cog-track); }
/* measured subscale score — the patient's state, next to the control */
.dim-score {
  font-size: .7rem; color: var(--muted); text-align: center;
  background: var(--ct); border-radius: 999px; padding: 1px 6px;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.dim-score b { color: var(--text); font-weight: 700; }
/* clearly deficient subscale (deficit ≥ 50%) — warm tone: focus here */
.dim-row.dim-hi .dim-score { background: #f9e3e0; color: var(--danger); }
.dim-row.dim-hi .dim-score b { color: var(--danger); }
.dim-row.dim-hi .dim-label { font-weight: 700; }
.dim-slider { position: relative; }
.dim-notch {
  position: absolute; bottom: -3px; transform: translateX(-50%);
  width: 0; height: 0; pointer-events: none;
  border-left: 4px solid transparent; border-right: 4px solid transparent;
  border-bottom: 6px solid var(--border-strong);
  transition: left .45s cubic-bezier(.2,.7,.3,1);
}
/* per-group endpoint captions, aligned with the track column */
.dim-ends { display: grid; grid-template-columns: 82px 46px 1fr 40px; gap: 10px; margin-top: -3px; }
.dim-ends .ends { display: flex; justify-content: space-between; font-size: .68rem; color: var(--muted); }
.dim-val {
  font-weight: 700; font-variant-numeric: tabular-nums; font-size: .74rem;
  background: var(--surface-alt); border-radius: 999px; padding: 0 8px; text-align: center;
}

/* fill tone scales with the value: pale = train little, full = train hard */
input[type="range"] {
  -webkit-appearance: none; appearance: none; width: 100%; height: 18px;
  background: transparent; cursor: pointer; margin: 0;
  --fill: color-mix(in srgb, var(--c, var(--brand)) var(--tone, 100%), var(--ct, var(--surface-alt)));
}
input[type="range"]::-webkit-slider-runnable-track {
  height: 6px; border-radius: 3px;
  background: linear-gradient(to right, var(--fill) var(--p, 0%), var(--ct, var(--surface-alt)) var(--p, 0%));
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%; margin-top: -5px;
  background: #fff; border: 2.5px solid var(--fill);
  box-shadow: 0 1px 3px rgba(0,0,0,.25);
  transition: transform .12s ease;
}
input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.15); }
input[type="range"]::-moz-range-track {
  height: 6px; border-radius: 3px;
  background: linear-gradient(to right, var(--fill) var(--p, 0%), var(--ct, var(--surface-alt)) var(--p, 0%));
}
input[type="range"]::-moz-range-thumb {
  width: 13px; height: 13px; border-radius: 50%;
  background: #fff; border: 2.5px solid var(--fill);
  box-shadow: 0 1px 3px rgba(0,0,0,.25);
}
input[type="range"]:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: 4px; }
/* ---- session config: steppers + segmented ---- */
.session-row {
  display: flex; gap: 22px; flex-wrap: wrap; align-items: flex-start;
  margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--surface-alt);
}
.field { display: flex; flex-direction: column; gap: 6px; }
.field--wide { flex: 1; min-width: 230px; }
.field-label { font-size: .72rem; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }

.stepper { display: inline-flex; align-items: stretch; border: 1px solid var(--border-strong); border-radius: var(--radius); overflow: hidden; background: var(--surface); }
.stepper button {
  width: 34px; border: 0; background: var(--surface-alt); color: var(--text);
  font-size: 1.05rem; font-family: inherit; cursor: pointer; transition: background .12s;
}
.stepper button:hover { background: var(--brand-soft); color: var(--brand-dark); }
.stepper input {
  width: 52px; border: 0; text-align: center; font-family: inherit; font-weight: 700;
  font-size: .95rem; color: var(--text); -moz-appearance: textfield; appearance: textfield;
}
.stepper input::-webkit-outer-spin-button, .stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.stepper input:focus, .stepper button:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }

.seg { display: inline-flex; align-self: flex-start; background: var(--surface-alt); border: 1px solid var(--border); border-radius: 999px; padding: 3px; }
.seg button {
  border: 0; background: transparent; font-family: inherit; font-size: .78rem; font-weight: 600;
  color: var(--muted); padding: 6px 14px; border-radius: 999px; cursor: pointer;
  transition: background .15s, color .15s, box-shadow .15s;
}
.seg button:hover { color: var(--text); }
.seg button.on { background: var(--surface); color: var(--brand-dark); box-shadow: 0 1px 3px rgba(0,0,0,.14); }
.seg button:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
/* ---- reward priority presets ---- */
.preset-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
@media (max-width: 720px) { .preset-grid { grid-template-columns: 1fr; } }
.pcard {
  text-align: left; cursor: pointer;
  background: var(--surface); border: 1.5px solid var(--border); border-radius: 8px;
  padding: 10px 12px; display: flex; flex-direction: column; gap: 4px;
  transition: border-color .12s, box-shadow .12s;
}
.pcard:hover { border-color: var(--border-strong); }
.pcard.on { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand); }
.pcard:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.pcard .p-name { font-size: .8rem; font-weight: 700; color: var(--text); }
.pcard .p-ratio {
  font-size: .68rem; font-weight: 700; color: var(--brand-dark);
  background: var(--brand-soft); border-radius: 999px; padding: 1px 8px;
}
.pcard .p-mults { font-size: .68rem; color: var(--muted); display: flex; align-items: center; gap: 4px; flex-wrap: wrap; margin-top: 2px; }
.pcard .p-mults button {
  font-family: inherit; font-size: .68rem; font-weight: 700; cursor: pointer;
  background: var(--surface-alt); color: var(--muted);
  border: 1px solid var(--border); border-radius: 999px; padding: 1px 8px;
  transition: background .12s, color .12s, border-color .12s;
}
.pcard .p-mults button:hover { border-color: var(--brand); color: var(--text); }
.pcard .p-mults button.sel { background: var(--brand); border-color: var(--brand); color: #fff; }
.pcard .p-mults button:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
/* ---- advanced + generate ---- */
select, input[type="number"] {
  background: var(--surface); border: 1px solid var(--border-strong);
  color: var(--text); border-radius: var(--radius); padding: 8px 10px;
  font-family: inherit; font-size: .9rem; width: 100%;
}
select:focus-visible, input[type="number"]:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }

.config-row { display: flex; gap: 22px; flex-wrap: wrap; align-items: flex-end; margin-top: 12px; }
.config-row label { font-size: .74rem; color: var(--muted); display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 160px; }
.config-row .adv-name { display: flex; justify-content: space-between; align-items: baseline; font-weight: 600; color: var(--text); }
.config-row .range-ends { display: flex; justify-content: space-between; font-size: .68rem; color: var(--muted); }
.config-row input.w { max-width: 70px; }
.rangeval { color: var(--brand-dark); font-weight: 600; font-size: .78rem; }
.adv-hint { font-size: .72rem; color: var(--muted); margin: 10px 0 0; }
.advanced { margin-top: 16px; border-top: 1px solid var(--surface-alt); padding-top: 10px; }
.advanced summary {
  cursor: pointer; color: var(--muted); font-size: .8rem; user-select: none;
  display: inline-flex; align-items: center; gap: 6px;
}
.advanced summary:hover { color: var(--text); }

.btn--ghost { background: transparent; border: 0; color: var(--brand); padding: 6px 10px; font-size: .78em; height: auto; }
.btn--ghost:hover { background: var(--brand-soft); color: var(--brand-dark); border: 0; }
.btn--icon { font-size: 1.15rem; line-height: 1; padding: 4px 9px; }
/* ---- need-coverage radar ---- */
#coverageArea { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--surface-alt); }
#coverageArea h4 { margin: 0 0 4px; }
.cov-wrap { display: flex; gap: 28px; align-items: center; flex-wrap: wrap; }
.cov-svg { width: 320px; max-width: 100%; flex: none; }
.cov-grid { fill: none; stroke: var(--border); stroke-width: .7; opacity: .6; }
.cov-axis { stroke: var(--border); stroke-width: .7; opacity: .6; }
.cov-lab { font-size: 9px; font-weight: 600; font-family: var(--font); fill: var(--muted); }
.cov-lab.m { fill: var(--motor); }
.cov-lab.c { fill: var(--cognitive); }
.cov-max  { fill: none; stroke: var(--border-strong); stroke-width: 1.3; stroke-dasharray: 2 3; }
.cov-poly { fill: var(--brand); fill-opacity: .3; stroke: var(--brand); stroke-width: 1.6; }
.cov-def  { fill: none; stroke: var(--warn); stroke-width: 1.5; opacity: .85; }
.cov-need { fill: none; stroke: var(--text); stroke-width: 1.5; stroke-dasharray: 5 4; opacity: .75; }
/* hovered-similar overlay in the inspector radar */
.cov-alt { fill: rgba(91,108,196,.14); stroke: var(--cognitive); stroke-width: 1.7; stroke-dasharray: 5 3; }
.cov-legend .cl.alt { background: rgba(91,108,196,.25); border: 1.5px dashed var(--cognitive); }
.cov-side { flex: 1; min-width: 240px; }
.cov-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: .72rem; color: var(--muted); margin-bottom: 10px; }
.cov-legend .lg { display: inline-flex; align-items: center; gap: 6px; }
.cov-legend .cl { display: inline-block; width: 16px; height: 10px; border-radius: 2px; }
.cov-legend .cl.def { background: none; border-top: 2px solid var(--warn); height: 0; opacity: .85; }
.cov-legend .cl.max { background: none; border-top: 2px dotted var(--border-strong); height: 0; }
.cov-legend .cl.need { background: none; border-top: 2px dashed var(--text); height: 0; opacity: .75; }
.cov-legend .cl.cov { background: var(--brand); opacity: .45; border: 1.5px solid var(--brand); }
.cov-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.cov-chip {
  font-family: inherit; font-size: .74rem; font-weight: 600; cursor: pointer;
  background: var(--brand-soft); color: var(--brand-dark);
  border: 1.5px solid transparent; border-radius: 999px; padding: 4px 12px;
  transition: background .12s, color .12s, opacity .12s;
}
.cov-chip span { font-weight: 400; opacity: .75; }
.cov-chip:hover { border-color: var(--brand); }
.cov-chip.off { background: var(--surface-alt); color: var(--muted); text-decoration: line-through; opacity: .7; }
.cov-note { font-size: .7rem; color: var(--muted); margin: 10px 0 0; }

.hs-svg { width: 100%; height: auto; display: block; }
.hs-grid { stroke: var(--border); stroke-width: .6; opacity: .6; }
.hs-vgrid { opacity: .35; }
.hs-tick { font-size: 10px; fill: var(--muted); font-family: var(--font); }
.hs-wk { font-size: 8.5px; opacity: .75; }
.hs-axis { font-size: 10.5px; font-weight: 600; fill: var(--muted); font-family: var(--font); }
.hs-line { fill: none; stroke-width: 2; }
.hs-line.hs-adh { stroke: var(--brand); }
.hs-line.hs-dm { stroke: var(--cognitive); }
.hs-dot { stroke: var(--surface); stroke-width: 1.4; }
.hs-dot.hs-adh { fill: var(--brand); }
.hs-dot.hs-dm { fill: var(--cognitive); }
.hs-legend { margin-top: 2px; }
.hs-legend .cl.hs-c-adh { background: var(--brand); height: 3px; border-radius: 2px; }
.hs-legend .cl.hs-c-dm { background: var(--cognitive); height: 3px; border-radius: 2px; }
/* ---- game library modal (draft-style ban / promote) ---- */
.title-actions { display: flex; gap: 4px; }
.ic { flex: none; vertical-align: -1.5px; }
.mode-seg button, .btn--ghost { display: inline-flex; align-items: center; gap: 6px; }
.draft-summary {
  display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center;
  margin-top: 14px; font-size: .74rem; color: var(--muted);
}
.draft-summary .tag {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 9px; border-radius: 999px; font-weight: 600; font-size: .7rem;
}
.draft-summary .tag.ban { background: #f9e3e0; color: var(--danger); }
.draft-summary .tag.pro { background: #fdf3d8; color: #9a7208; }

.modal {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(26, 42, 48, .38);
  backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center; padding: 26px;
}
.modal.hidden { display: none; }
.modal-panel {
  --gold: #b8860b; --gold-soft: #fdf3d8;
  --ban-red: #c0392b; --ban-soft: #f9e3e0;
  width: min(1180px, 100%); max-height: 92vh;
  position: relative;
  display: flex; flex-direction: column;
  background: var(--surface); color: var(--text);
  border-radius: 14px;
  box-shadow: 0 24px 70px rgba(16, 42, 47, .35);
  overflow: hidden;
  animation: modalIn .22s cubic-bezier(.2,.9,.3,1);
}
@keyframes modalIn { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; } }

.modal-head {
  display: flex; align-items: center; gap: 16px;
  padding: 18px 22px; border-bottom: 1px solid var(--border);
}
.mh-title { flex: 1; min-width: 0; }
.modal-head h2 { margin: 0; font-size: 1.05rem; letter-spacing: .02em; }
.modal-head p { margin: 3px 0 0; font-size: .74rem; color: var(--muted); }
.modal-head input[type="search"] {
  width: 200px; background: var(--surface-alt); border: 1px solid var(--border);
  color: var(--text); border-radius: 999px; padding: 8px 14px;
  font-family: inherit; font-size: .82rem;
}
.modal-head input[type="search"]::placeholder { color: var(--muted); }
.modal-head input[type="search"]:focus-visible { outline: 2px solid var(--brand); }

.mode-seg { display: inline-flex; background: var(--surface-alt); border: 1px solid var(--border); border-radius: 999px; padding: 3px; }
.mode-seg button {
  border: 0; background: transparent; font-family: inherit; font-size: .78rem; font-weight: 700;
  color: var(--muted); padding: 7px 16px; border-radius: 999px; cursor: pointer;
  transition: background .15s, color .15s;
}
.mode-seg button.mode-ban.on { background: var(--ban-red); color: #fff; }
.mode-seg button.mode-pro.on { background: var(--gold); color: #fff; }
.mode-seg button:not(.on):hover { color: var(--text); }

.draft-strips { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-bottom: 1px solid var(--border); background: var(--surface-alt); }
.strip { display: flex; align-items: center; gap: 10px; padding: 10px 22px; min-height: 46px; }
.strip--ban { border-right: 1px solid var(--border); }
.strip-label { font-size: .64rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; flex: none; }
.strip--ban .strip-label { color: var(--ban-red); }
.strip--pro .strip-label { color: var(--gold); }
.strip-items { display: flex; flex-wrap: wrap; gap: 5px; }
.strip-empty { font-size: .72rem; color: var(--muted); opacity: .7; }
.strip-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .7rem; font-weight: 600; padding: 3px 10px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--border); cursor: pointer;
  transition: border-color .12s;
}
.strip--ban .strip-chip { border-color: rgba(192,57,43,.45); color: var(--ban-red); }
.strip--pro .strip-chip { border-color: rgba(184,134,11,.45); color: var(--gold); }
.strip-chip:hover { border-color: currentColor; }
.strip-chip .x { opacity: .6; }

/* subskill filter chips */
.lib-dims {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 10px 22px; border-bottom: 1px solid var(--border); background: var(--surface);
}
.lib-dim {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: inherit; font-size: .72rem; font-weight: 600; cursor: pointer;
  background: var(--surface); color: var(--muted);
  border: 1.5px solid var(--border); border-radius: 999px; padding: 4px 11px;
  transition: border-color .12s, color .12s, background .12s;
}
.lib-dim:hover { border-color: var(--border-strong); color: var(--text); }
.lib-dim.m.on { background: #f7ead9; border-color: var(--motor); color: #9c5613; }
.lib-dim.c.on { background: #e4e7f7; border-color: var(--cognitive); color: #47549c; }

.lib-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  gap: 10px; padding: 18px 22px; overflow-y: auto; flex: 1;
  background: var(--bg);
}
.lib-tile {
  position: relative; text-align: left; font-family: inherit;
  background: var(--surface); color: var(--text);
  border: 1.5px solid var(--border); border-radius: 10px;
  padding: 12px 12px 10px; cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease, filter .15s ease;
}
.lib-tile:hover { transform: translateY(-2px); border-color: var(--brand); box-shadow: var(--shadow-hover); }
.lib-tile { display: flex; flex-direction: column; }
.lib-tile .thead { display: flex; gap: 10px; align-items: center; flex: 1; }
/* rectangular activity thumbnail (RGS style, ~4:3 landscape) */
.ticon {
  position: relative; width: 58px; height: 42px; border-radius: 7px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .78rem; font-weight: 800; letter-spacing: .02em; overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(16,42,47,.06);
}
.ticon img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lib-tile .tname { font-size: .8rem; font-weight: 700; line-height: 1.25; }
/* one aligned meta row: id left, trained-dimension dots right (names on hover) */
.lib-tile .tmeta { display: flex; align-items: center; justify-content: space-between; margin-top: 6px; }
.lib-tile .tid { font-size: .64rem; color: var(--muted); }
.lib-tile .tdots { display: inline-flex; gap: 3px; }
.dim-mini { width: 7px; height: 7px; border-radius: 2px; display: inline-block; }
.dim-mini.m { background: var(--motor); }
.dim-mini.c { background: var(--cognitive); }
.lib-tile .tstats {
  display: flex; align-items: baseline; gap: 8px; margin-top: 7px;
  padding-top: 7px; border-top: 1px solid var(--surface-alt);
  font-size: .68rem; color: var(--muted); font-variant-numeric: tabular-nums;
}
.lib-tile .ts-adh { margin-left: auto; }
.lib-tile .ts-plays { font-weight: 700; color: var(--text); }
.lib-tile .ts-trend { font-weight: 700; }
.lib-tile .ts-trend.up { color: var(--ok); }
.lib-tile .ts-trend.down { color: var(--danger); }
.lib-tile .ts-trend.flat { color: var(--muted); }
.lib-tile .ts-never { font-style: italic; opacity: .8; }
.lib-tile .state-badge {
  position: absolute; top: 8px; right: 8px;
  font-size: .72rem; font-weight: 800; display: none;
}
/* banned: washed out + red strike */
.lib-tile.banned { filter: grayscale(.9); opacity: .75; background: var(--ban-soft); border-color: var(--ban-red); }
.lib-tile.banned::after {
  content: ""; position: absolute; inset: 0; border-radius: 8px;
  background:
    linear-gradient(45deg, transparent calc(50% - 1px), var(--ban-red) calc(50% - 1px), var(--ban-red) calc(50% + 1px), transparent calc(50% + 1px));
  pointer-events: none; opacity: .55;
}
.lib-tile.banned .state-badge { display: block; color: var(--ban-red); }
/* promoted: gold ring + star */
.lib-tile.promoted { background: var(--gold-soft); border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold), 0 4px 14px rgba(184,134,11,.22); }
.lib-tile.promoted .state-badge { display: block; color: var(--gold); }
.lib-tile.dimmed { opacity: .25; pointer-events: none; }

/* activity inspector (right-click) — overlays the library grid */
.inspector {
  position: absolute; inset: 0; z-index: 5; overflow-y: auto;
  background: var(--surface); padding: 16px 22px;
  animation: modalIn .18s cubic-bezier(.2,.9,.3,1);
}
.insp-head {
  display: flex; align-items: center; gap: 16px; margin-bottom: 12px;
  padding-bottom: 10px; border-bottom: 1px solid var(--surface-alt);
}
.insp-head .ticon { width: 86px; height: 62px; border-radius: 9px; font-size: 1rem; }
.insp-head h2 { margin: 0 0 4px; font-size: 1.05rem; }
.insp-head .pid { color: var(--muted); font-weight: 400; font-size: .78rem; }
.insp-head > button { margin-left: auto; }
.insp-grid {
  display: grid; gap: 12px; align-items: stretch;
  grid-template-columns: 1.1fr 1fr 1fr;
  grid-template-areas: "trains match stats" "history history sims";
}
@media (max-width: 1000px) {
  .insp-grid { grid-template-columns: 1fr 1fr; grid-template-areas: "trains match" "history history" "stats sims"; }
}
@media (max-width: 640px) {
  .insp-grid { grid-template-columns: 1fr; grid-template-areas: "trains" "match" "history" "stats" "sims"; }
  .inspector { padding: 14px 16px; }
}
/* session history chart */
.hs-svg { width: 100%; height: auto; display: block; }
.hs-grid { stroke: var(--border); stroke-width: .6; opacity: .6; }
.hs-vgrid { opacity: .35; }
.hs-tick { font-size: 10px; fill: var(--muted); font-family: var(--font); }
.hs-wk { font-size: 8.5px; opacity: .75; }
.hs-axis { font-size: 10.5px; font-weight: 600; fill: var(--muted); font-family: var(--font); }
.hs-line { fill: none; stroke-width: 2; }
.hs-line.hs-adh { stroke: var(--brand); }
.hs-line.hs-dm { stroke: var(--cognitive); }
.hs-dot { stroke: var(--surface); stroke-width: 1.4; }
.hs-dot.hs-adh { fill: var(--brand); }
.hs-dot.hs-dm { fill: var(--cognitive); }
.hs-legend { margin-top: 2px; }
.hs-legend .cl.hs-c-adh { background: var(--brand); height: 3px; border-radius: 2px; }
.hs-legend .cl.hs-c-dm { background: var(--cognitive); height: 3px; border-radius: 2px; }
.insp-card { background: var(--surface-alt); border-radius: 10px; padding: 12px 14px; min-width: 0; }
.insp-card .bars { gap: 4px; }
.insp-card h4 { margin: 0 0 10px; }
.insp-card .bar-row { font-size: .76rem; }
.bar-zero { opacity: .4; }
/* hovered-similar ghost bar + value in the Trains panel */
.bar-track { position: relative; }
.bar-gain {
  position: absolute; top: 0; bottom: 0;
  border-radius: 0 4px 4px 0; outline-offset: -1px;
}
.bar-row.motor .bar-gain {
  background: rgba(201, 113, 29, .45); outline: 1px dashed var(--motor);
}
.bar-row.cognitive .bar-gain {
  background: rgba(91, 108, 196, .45); outline: 1px dashed var(--cognitive);
}
.bar-loss {
  position: absolute; top: 0; bottom: 0;
  background: repeating-linear-gradient(45deg, rgba(255,255,255,.85) 0 3px, transparent 3px 6px);
}
.bar-delta { font-style: normal; font-weight: 700; margin-left: 5px; font-size: .7rem; }
.bar-row.motor .bar-delta.pos { color: var(--motor); }
.bar-row.cognitive .bar-delta.pos { color: var(--cognitive); }
.bar-delta.neg { color: var(--muted); }
.insp-match { display: flex; flex-direction: column; align-items: center; }
.insp-match h4 { align-self: flex-start; }
.insp-match .cov-svg { max-width: 300px; }
.insp-match .cov-legend { justify-content: center; margin-top: 4px; }
.insp-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.insp-kpi {
  background: var(--surface); border-radius: 8px; padding: 8px 11px;
  display: flex; flex-direction: column; gap: 2px;
}
.insp-kpi b { font-size: 1rem; font-variant-numeric: tabular-nums; }
.insp-kpi span { font-size: .68rem; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.insp-never { font-size: .8rem; color: var(--muted); grid-column: 1 / -1; }
.insp-sims { display: flex; flex-direction: column; gap: 6px; }
.insp-sim {
  display: flex; align-items: center; gap: 10px; text-align: left; cursor: pointer;
  font-family: inherit; font-size: .8rem; font-weight: 600; color: var(--text);
  background: var(--surface); border: 1.5px solid transparent; border-radius: 8px; padding: 6px 10px;
}
.insp-sim:hover { border-color: var(--brand); }
.insp-sim .ticon { width: 40px; height: 29px; border-radius: 5px; font-size: .6rem; }
.insp-sim .is-name { flex: 1; }
.insp-sim .is-pct { color: var(--brand-dark); font-weight: 700; font-size: .74rem; }
.inspector .cov-svg { max-width: 300px; }

.modal-foot {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 22px; border-top: 1px solid var(--border);
}
.lib-count { font-size: .74rem; color: var(--muted); }

/* star marker on schedule cards for promoted games */
.proto-card .pname .star { color: #b8860b; font-size: .72rem; }


.spinner { width: 14px; height: 14px; border: 2px solid rgba(255,255,255,.5); border-top-color: #fff; border-radius: 50%; animation: spin .7s linear infinite; display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }

/* legacy card title row inside dashboard panels */
.card__title { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.card__title h2 { margin: 0; }
.title-actions { display: flex; align-items: center; gap: 6px; }

/* ---- step progress bar: thin, top of viewport, animates per step ---- */
#pbar { position: sticky; top: 0; height: 3px; z-index: 60; pointer-events: none; }
#pbar span { display: block; height: 100%; width: 0; background: var(--accent);
             transition: width .5s cubic-bezier(.4,0,.2,1), opacity .3s; opacity: 0; }
#pbar span.on { opacity: 1; }

/* intent: targets + session side by side so opening Advanced never grows the page */
.intent2 { grid-template-columns: 1.5fr 1fr; align-items: start; }
@media (max-width: 1000px) { .intent2 { grid-template-columns: 1fr; } }
.intent2 .dim-groups { gap: 12px 26px; }
.intent2 .session-row { margin-top: 4px; padding-top: 0; border-top: none; gap: 16px 22px; }
.intent2 .config-row label { min-width: 140px; }
/* compact preset cards so Advanced fits without scrolling */
.intent2 .preset-grid { grid-template-columns: repeat(3, 1fr); gap: 6px; }
.intent2 .pcard { padding: 8px 10px; gap: 2px; }
.intent2 .pcard .p-name { font-size: .72rem; }
.intent2 .pcard .p-mults { font-size: .62rem; gap: 3px; }
.intent2 .pcard .p-mults button { font-size: .62rem; padding: 0 6px; }
.intent2 .advanced { margin-top: 12px; }

/* ---- axis charts (portal-style) ---- */
.ax-svg { width: 100%; height: auto; display: block; }
.ax-grid { stroke: var(--line); stroke-width: .7; opacity: .7; }
.ax-zero { stroke: var(--line-strong); stroke-width: 1; }
.ax-tick { font-size: 9px; fill: var(--muted); font-family: var(--font); }
.ax-lab { font-size: 9.5px; font-weight: 600; fill: var(--muted); font-family: var(--font); }
.ax-line { fill: none; stroke-width: 2; }
.ax-dot { stroke: #fff; stroke-width: 1.2; }

/* ---- review: global metrics ---- */
.gm { display: flex; flex-direction: column; gap: 14px; }
.gmtiles { display: flex; gap: 12px; flex-wrap: wrap; }
.gmtiles .stat { min-width: 118px; padding: 10px 14px; background: var(--surface-alt); box-shadow: none; }
.gmtiles .stat b { font-size: 1.25rem; }
.gmcharts { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
@media (max-width: 900px) { .gmcharts { grid-template-columns: 1fr; } }
.gmfig { margin: 0; }
.gmfig figcaption { font-size: .78rem; font-weight: 700; margin-bottom: 4px; }

/* ---- review: protocol session viewer ---- */
.pchips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.pchip {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  font-family: inherit; font-size: .78rem; font-weight: 600; color: var(--ink);
  background: var(--surface); border: 1.5px solid var(--line); border-radius: 999px;
  padding: 4px 12px 4px 5px; transition: border-color .12s, background .12s;
}
.pchip .ticon { width: 30px; height: 22px; border-radius: 5px; font-size: .58rem; }
.pchip b { color: var(--muted); font-weight: 600; }
.pchip:hover { border-color: var(--line-strong); }
.pchip.on { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-dark); }
.pchip.on b { color: var(--accent-dark); }
.psplit { display: grid; grid-template-columns: 1.3fr 1fr; gap: 22px; align-items: start; }
@media (max-width: 900px) { .psplit { grid-template-columns: 1fr; } }
.pstats .ph th { text-align: left; font-size: .66rem; text-transform: uppercase; letter-spacing: .05em;
                 color: #8a8a8a; padding: 4px; border-bottom: 1px solid var(--line); }
.pstats td { font-variant-numeric: tabular-nums; }
.swdot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; }
.adhcell b { font-size: .92rem; }
.confcell .neg { color: var(--danger); }
.ts-trend.up { color: var(--ok); } .ts-trend.down { color: var(--danger); } .ts-trend.flat { color: var(--muted); }

/* button icon rhythm */
.btn .ic { flex: none; }
.btn.primary .ic { margin: 0 -2px; }
.ghost .ic, .ptbanner .ghost .ic { vertical-align: -2px; margin-right: 2px; }

/* icon-only actions */
.btn.iconic { width: 46px; padding: 0; justify-content: center; }
.btn.iconic .ic { width: 16px; height: 16px; }
.footactions .btn.iconic { height: 44px; }
.plan .pick.iconic { width: 100%; height: 36px; }
.board .btn.iconic { width: 38px; height: 32px; }

/* MIMS-style board controls + avatars */
.boardctl { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.boardctl select {
  font-family: inherit; font-size: .82rem; color: var(--ink);
  background: var(--surface-alt); border: 1px solid var(--line); border-radius: 6px;
  padding: 0 10px; width: 200px; height: 32px;
}
.searchbox {
  margin-left: auto; display: inline-flex; align-items: center; gap: 7px;
  border: 1px solid var(--line-strong); border-radius: 8px; background: var(--surface);
  padding: 0 12px; color: var(--muted);
}
.searchbox input { border: 0; outline: none; font-family: inherit; font-size: .85rem;
                   padding: 8px 0; width: 180px; background: transparent; color: var(--ink); }
.board th.sortable { cursor: pointer; user-select: none; }
.board th.sortable:hover { color: var(--accent-dark); }
.board .ta { width: 52px; }
.infocell { color: var(--muted); font-size: .85rem; white-space: nowrap; }

/* legacy footer */
.foot { text-align: center; color: var(--muted); font-size: .74rem; padding: 14px 16px 20px; }

.profcell { width: 46px; }
.profbtn { border: 0; background: transparent; color: var(--accent); cursor: pointer; padding: 6px; border-radius: 6px; }
.profbtn:hover { background: var(--accent-soft); color: var(--accent-dark); }

/* ---- MIMS top nav ---- */
.topnav { display: flex; gap: 8px; }
.npill {
  display: inline-flex; align-items: center; gap: 8px; text-decoration: none;
  background: var(--accent); color: #fff; font-weight: 600; font-size: .85rem;
  padding: 8px 16px; border-radius: 8px;
}
.npill:hover { background: var(--accent-dark); }
.appbar .who { display: flex; flex-direction: column; line-height: 1.15; padding-left: 14px; border-left: 1px solid var(--line); }
.appbar .who .org { font-weight: 600; font-size: .9rem; color: var(--ink); text-decoration: none; }
.appbar .who .org:hover { color: var(--accent-dark); }
.appbar .who .user { color: var(--muted); font-size: .75rem; }
.appbar .spacer { flex: 1; }
.appbar .meta { color: var(--muted); font-size: .8rem; }

/* ---- home: gutter logo + non-card list ---- */
.homegrid { display: grid; grid-template-columns: 175px minmax(0, 1fr); gap: 22px; }
@media (max-width: 1000px) { .homegrid { grid-template-columns: 1fr; } .homelogo { display: none; } }
.homelogo { display: flex; flex-direction: column; align-items: center; text-align: center; padding-top: 4px; text-decoration: none; }
.homelogo .word { font-weight: 800; font-size: 30px; color: var(--accent); letter-spacing: .5px; line-height: 1; }
.homelogo .word span { color: var(--ink); }
.homelogo .sub { color: var(--muted); font-size: 11px; margin-top: 6px; }

.boardctl { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.hchip {
  display: inline-block; font-style: normal; background: #e2e2e2; color: #6f6f6f;
  font-size: .7rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  padding: 2px 9px; border-radius: 4px;
}
table.board { border-collapse: separate; border-spacing: 0; }
.board thead th { background: transparent; padding: 6px 8px; border: 0; }
.board tbody td { background: var(--surface); border-bottom: 3px solid var(--bg); padding: 7px 10px; }
.board tbody tr td.ta { width: 60px; padding: 6px 8px 6px 6px; }
.board tr.row:hover td { background: var(--accent-soft); }
.profcell { border-left: 1px solid var(--line); border-right: 1px solid var(--line); text-align: center; }
.apps { border-left: 1px solid var(--line); width: 56px; text-align: center; }
.appbtn {
  width: 34px; height: 30px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent); color: #fff; border: 0; border-radius: 8px; cursor: pointer;
}
.appbtn:hover { background: var(--accent-dark); }

/* silhouette avatar, shoulders carry the triage colour */
.pavatar {
  position: relative; width: 46px; height: 46px; border-radius: 50%;
  background: #e3e3e3; display: inline-flex; align-items: flex-end; justify-content: center;
  overflow: hidden; border: 2px solid #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25);
}
.pavatar svg { display: block; width: 34px; height: 34px; margin-bottom: -5px; }
.pavatar .hd { fill: #a9a9a9; }
.pavatar .sh { fill: #a9a9a9; }
.pavatar.sev-warn .sh { fill: var(--danger); }
.pavatar.sev-verify .sh { fill: #47549c; }
.pavatar.sev-review .sh { fill: var(--accent); }
.pavatar.sev-new .sh, .pavatar.sev-auto .sh, .pavatar.sev-done .sh { fill: var(--ok); }

/* MIMS column metrics + row anatomy (rebalanced so Why-flagged keeps room) */
.board .ta { width: 60px; }
.usercell { width: 195px; }
.profcell { width: 64px; }
.infocell { width: 165px; white-space: normal; font-size: .82rem; }
.apps { width: 148px; text-align: left; border-left: 1px solid var(--line); white-space: nowrap; }
.board td:nth-child(5) { min-width: 230px; }
.ucwrap { display: inline-flex; flex-direction: column; vertical-align: middle; }
.uid { font-weight: 700; font-size: .95rem; color: var(--ink); }
.uinfo { font-size: .76rem; color: var(--muted); }
.rowarrow { float: right; color: #9a9a9a; padding-top: 8px; }
.pavatar { width: 44px; height: 44px; }
.pavatar svg { width: 33px; height: 33px; margin-bottom: -5px; }
.board .ta { padding-right: 2px; }
.appico { border: 0; background: transparent; color: var(--accent); cursor: pointer; padding: 4px 6px; border-radius: 6px; vertical-align: middle; }
.appico:hover { background: var(--accent-soft); color: var(--accent-dark); }
.apps .appbtn { vertical-align: middle; margin-left: 4px; }


/* ================= MIMS header + footer, consolidated overrides ========= */
.headwrap { background: var(--surface); box-shadow: 0 5px 15px rgba(16,42,47,.12); position: relative; z-index: 20; }
.headwrap .appbar {
  height: 52px; background: transparent; box-shadow: none; border-bottom: 0;
  display: flex; align-items: center; gap: 16px;
  padding: 0 max(22px, calc((100% - 1396px) / 2));
}
.topnav { display: flex; align-items: center; gap: 8px; height: 100%; }
.npill {
  display: inline-flex; align-items: center; gap: 8px; text-decoration: none;
  background: var(--accent); color: #fff; font-weight: 600; font-size: .85rem;
  height: 36px; padding: 0 16px; border-radius: 8px; align-self: center;
}
.npill:hover { background: var(--accent-dark); }
.topnav .who { margin-left: 8px; padding-left: 14px; border-left: 1px solid var(--line); line-height: 1.2; align-self: center; }
.topnav .who p { margin: 0; }
.topnav .who .org { font-weight: 600; font-size: .88rem; color: var(--ink); }
.topnav .who .user { color: var(--muted); font-size: .75rem; }
.appbar .spacer { flex: 1; }
.langwrap { display: flex; align-items: center; gap: 14px; align-self: center; }
.langbtn { border: 1px solid var(--line); border-radius: 4px; background: transparent; font-family: inherit;
           font-size: .8rem; color: var(--muted); display: inline-flex; align-items: center; gap: 5px;
           padding: 2px 8px; cursor: pointer; }
.logout { color: var(--accent); font-weight: 600; font-size: .88rem; text-decoration: none; }
.logout:hover { color: var(--accent-dark); }
.verline { text-align: right; padding: 0 max(22px, calc((100% - 1396px) / 2)) 5px;
           font-size: .72rem; color: var(--muted); background: transparent; }

.mimsfoot {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  background: var(--surface); box-shadow: 0 -2px 8px rgba(0,0,0,.07);
  padding: 8px max(22px, calc((100% - 1396px) / 2)); display: flex;
}

/* MIMS avatar effect: circle floats on the background, biting into the row */
.board tbody tr td.ta { background: transparent; border-bottom-color: transparent; padding: 0 0 0 2px; }
.board tr.row:hover td.ta { background: transparent; }
.pavatar { position: relative; left: 14px; z-index: 2; }
.usercell { padding-left: 26px; }

/* MIMS bar/footer metrics polish */
.headwrap .appbar { height: 57px; }
.appbar .meta { color: var(--muted); font-size: .8rem; margin-left: 18px; }
.logout { border-left: 1px solid var(--line); padding-left: 14px; }
.mimsfoot { padding-top: 12px; padding-bottom: 12px; }

/* row strips: subtle depth like MIMS, softer separation */
.pavatar { width: 48px; height: 48px; border-width: 3px; left: 10px; }
.pavatar svg { width: 36px; height: 36px; margin-bottom: -5px; }

/* pills + footer button align with the table column (logo gutter offset) */
.topnav { margin-left: 197px; }
.mimsfoot .npill { margin-left: 197px; }
@media (max-width: 1000px) { .topnav, .mimsfoot .npill { margin-left: 0; } }

/* row effect cleanup: flat strips, MIMS-proportion avatars, app dividers */
.board tbody td { box-shadow: none; border-bottom: 3px solid var(--bg); }
.pavatar { width: 50px; height: 50px; border: 2px solid #fff; background: #d9d9d9;
           box-shadow: 0 1px 2.5px rgba(0,0,0,.2); left: 10px; }
.pavatar svg { width: 44px; height: 44px; margin-bottom: -4px; }
.pavatar .hd, .pavatar .sh { fill: #909090; }
.apps { padding: 0; }
.apps button { margin: 0; }
.apps .appico { padding: 6px 12px; border-radius: 0; }
.apps .appico + .appico { border-left: 1px solid var(--line); }
.apps .appbtn { margin-left: 10px; margin-right: 8px; }
.apps { display: table-cell; }

.apps .appbtn { position: relative; margin-left: 18px; }
.apps .appbtn::before { content: ""; position: absolute; left: -10px; top: -4px; bottom: -4px;
                        width: 1px; background: var(--line); }

/* avatar geometry: diameter = row height, circle centre on the row's left edge */
.board tbody td { height: 60px; padding-top: 4px; padding-bottom: 4px; }
.board tbody tr td.ta { width: 36px; min-width: 36px; padding: 0; position: relative; }
.pavatar { position: absolute; left: 6px; top: 50%; transform: translateY(-50%);
           width: 60px; height: 60px; margin: 0; }
.pavatar svg { width: 52px; height: 52px; margin-bottom: -5px; }
.usercell { padding-left: 44px; }

/* the T.A. header cell was still forcing the column to 60px, pushing the
   white edge to the circle's right side; pin the whole column to 36px so
   the rectangle's left edge sits on the circle's midline */
.board th.ta, .board .ta { width: 36px; min-width: 36px; max-width: 36px; }

.usercell { padding-left: 58px; width: 230px; }
.infocell { border-left: 1px solid var(--line); }

/* specificity fix: .board tbody td was beating the .usercell padding */
.board tbody td.usercell { padding-left: 44px; }
/* rounded right end of each row strip */
.board tbody tr td:last-child { border-radius: 0 12px 12px 0; }

/* column rebalance after dropping profile/applications:
   the old nth-child(5) min-width now hit Adherence, not Why-flagged */
.board td:nth-child(5), .board th:nth-child(5) { min-width: 0; width: 190px; }
.board td:nth-child(4) { min-width: 260px; }
.board td.infocell { width: 200px; white-space: nowrap; }

/* real MIMS assets */
.pavatar img { width: 100%; height: 100%; display: block; border-radius: 50%; }
.sortarrow { width: 10px; vertical-align: middle; margin-left: 2px; }
.sortarrow.up { transform: rotate(180deg); }
.rowarrow img { width: 12px; opacity: .55; }
.npill .ic { width: 16px; height: 16px; }

/* circle exactly equals the visible strip (60 cell - 3 gap = 57) and is
   flush with it: the cell's transparent border shrinks the abs-positioning
   box, so anchor to top 0 instead of the 50% transform */
.pavatar { width: 57px; height: 57px; top: 0; transform: none; left: 7.5px; }

/* header: USER chip aligns with the name text, clear of T.A. */
.board th.sortable { padding-left: 44px; }

/* row-entry arrow at the right end of the adherence cell */
.board td.adhcell { position: relative; padding-right: 34px; }
.gorow { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); }
.gorow img { width: 11px; display: block; transform: rotate(180deg); opacity: .45; }
.board tr.row:hover .gorow img { opacity: .9; }

/* MIMS PATIENTS title: darker ink, tighter heavier rule */
.sechead {
  font-size: 19px; font-weight: 700; text-transform: uppercase; letter-spacing: .02em;
  color: #4d4d4d; border-bottom: 2px solid #9a9a9a; padding-bottom: 4px; margin: 2px 0 18px;
}

.sechead { padding-bottom: 1px; margin-bottom: 16px; }

/* week split into its own column; positional widths retargeted */
.board td.weekcell { width: 64px; font-variant-numeric: tabular-nums; color: var(--muted); }
.board td:nth-child(4), .board th:nth-child(4) { min-width: 0; }
.board td:nth-child(5), .board th:nth-child(5) { width: auto; min-width: 260px; }
.board td:nth-child(6), .board th:nth-child(6) { width: 190px; }
.board td.adhcell { text-align: left; }
.adhcell .spark { display: block; margin: 0 0 1px; }

/* tighten flag->adherence: flag fixed, slack moves into Information */
.board td:nth-child(5), .board th:nth-child(5) { width: 380px; min-width: 0; }
.board td.infocell { width: auto; }

/* review: compact attention lines instead of notification boxes */
.attn { margin: 2px 0 12px; }
.attn .flag { font-weight: 600; }
.attn p { margin: 2px 0 0 16px; font-size: .8rem; color: var(--muted); }

/* last-week rows as session filters */
.wk tr.wksel { cursor: pointer; }
.wk tr.wksel:hover td { background: var(--accent-soft); }
.wk tr.wksel.on td { background: var(--accent-soft); }
.wk tr.wksel.on .nm { color: var(--accent-dark); }