/* ==========================================================================
   Understanding Regression — tool-specific styles

   Ported from Claude_Regression_Tutorials/demo-kit.css. Two structural changes
   were required to merge five standalone pages into one document:

   1. Every kit class is prefixed `ur-`. `.card`, `.controls` and `.hint`
      collide with shared/css/main.css; the rest are prefixed for consistency.
      Nested modifiers (.on/.off/.r/.g/.dim/.ghost/...) are left bare because
      they only ever match under a prefixed parent.
   2. Custom properties are scoped to `.ur-tool`, not `:root`. Names like
      --body and --ink are generic enough that a future main.css addition
      would clash, and a :root block here would win page-wide.

   Semantic colour rule, inherited from the source and still load-bearing:
     --ur-shift = quantities that MOVE when you change the parameterisation
     --ur-hold  = quantities that DON'T
     --ur-alt   = a third series, the baseline/null model
   The three must stay distinguishable. Hue alone does not carry it for
   colour-blind readers, so card top-borders and font weight repeat the
   distinction — keep both if you restyle.
   ========================================================================== */

.ur-tool{
  /* house tokens (shared/css/main.css :root) */
  --ur-paper:#f5f7fb;
  --ur-panel:#ffffff;
  --ur-ink:#1f2a37;
  --ur-muted:#5f6b7a;
  --ur-rule:#d6dfea;

  --ur-shift:#8b5cf6;        /* --chart-secondary */
  --ur-shift-wash:#f3eefe;
  --ur-hold:#2a7de1;         /* --app-accent      */
  --ur-hold-wash:#e7f0fc;
  --ur-alt:#f59e0b;          /* --chart-warning   */
  --ur-alt-wash:#fdf2de;

  --ur-hold-deep:#1a5fb4;    /* --app-accent-dark */
  --ur-hold-line:#c3dbf6;
  --ur-hold-edge:#9dc3ee;
  --ur-hold-ink:#14395f;
  --ur-ink-soft:#3a4756;
  --ur-rule-faint:#e6ecf4;
  --ur-rule-grid:#e9eff6;
  --ur-rule-row:#eef2f8;
  --ur-rule-cell:#cfe0f5;
  --ur-off-ink:#aab6c6;
  --ur-off-faint:#bcc7d5;
  --ur-off-mute:#b3bfcd;
  --ur-surface-sunk:#f8fafc;
  --ur-surface-empty:#f4f7fa;

  --ur-display:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --ur-body:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --ur-data:ui-monospace,Menlo,Consolas,'Courier New',monospace;

  color:var(--ur-ink);
  font-family:var(--ur-body);
  font-size:16px;
  line-height:1.55;
}
.ur-tool *{box-sizing:border-box}

/* ---------- demo selector ---------- */
.ur-picker{margin-bottom:18px}
.ur-panel[hidden]{display:none}
.ur-demo-title{
  font-family:var(--ur-display);font-weight:800;
  font-size:clamp(22px,2.6vw,30px);line-height:1.12;
  letter-spacing:-.02em;margin:0 0 12px;max-width:24ch;
}
.ur-demo-title .b{color:var(--ur-shift)}
.ur-demo-title .a{color:var(--ur-hold)}

/* ---------- header bits ---------- */
.ur-eyebrow{
  font-family:var(--ur-data);font-size:11px;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ur-muted);
  display:flex;gap:10px;align-items:center;margin-bottom:14px;
}
.ur-eyebrow::after{content:"";flex:1;height:1px;background:var(--ur-rule)}
.ur-deck{font-size:17px;max-width:62ch;color:var(--ur-ink-soft);margin:0 0 12px}
.ur-brief{
  font-family:var(--ur-data);font-size:12.5px;line-height:1.7;color:var(--ur-muted);
  border-left:2px solid var(--ur-rule);padding:10px 0 10px 14px;
  max-width:70ch;margin:0 0 28px;
}
.ur-brief b{color:var(--ur-ink);font-weight:700}

/* ---------- controls ---------- */
.ur-controls{
  background:var(--ur-panel);border:1px solid var(--ur-rule);border-radius:8px;
  padding:18px 20px;display:flex;flex-wrap:wrap;gap:26px;margin-bottom:8px;
  align-items:flex-start;
}
.ur-controls.bare{margin:0 0 8px;border:none;padding:0;background:transparent}
.ur-ctrl{min-width:0}
.ur-ctrl-label{
  font-family:var(--ur-data);font-size:10px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ur-muted);margin-bottom:9px;
}
.ur-pills{display:flex;flex-wrap:wrap;gap:6px}
button.ur-pill{
  font-family:var(--ur-data);font-size:12.5px;font-weight:500;
  padding:7px 13px;border:1px solid var(--ur-rule);background:transparent;
  color:var(--ur-ink);border-radius:6px;cursor:pointer;transition:all .16s ease;
}
button.ur-pill:hover{border-color:var(--ur-ink)}
button.ur-pill[aria-pressed="true"]{background:var(--ur-ink);color:#fff;border-color:var(--ur-ink)}
button.ur-pill:focus-visible{outline:2px solid var(--ur-shift);outline-offset:2px}

.ur-slider{display:flex;flex-direction:column;gap:6px;min-width:230px}
.ur-slider input[type=range]{width:100%;accent-color:var(--ur-shift);cursor:pointer}
.ur-slider .ur-readout{
  font-family:var(--ur-data);font-size:12.5px;font-weight:700;color:var(--ur-shift);
  font-variant-numeric:tabular-nums;
}
.ur-hint{font-size:14px;color:var(--ur-muted);margin:10px 0 26px;max-width:72ch}
.ur-hint b{color:var(--ur-ink);font-weight:600}

/* ---------- figure ---------- */
.ur-figure{
  background:var(--ur-panel);border:1px solid var(--ur-rule);border-radius:8px;
  padding:22px 8px 10px;margin-bottom:10px;overflow:hidden;
}
.ur-figcap{
  font-family:var(--ur-data);font-size:11px;color:var(--ur-muted);
  padding:0 20px 16px;letter-spacing:.02em;line-height:1.7;
}
.ur-tool svg{display:block;width:100%;height:auto;font-family:var(--ur-data)}
.ur-tool .ur-axis{stroke:var(--ur-rule);stroke-width:1}
.ur-tool .ur-grid{stroke:var(--ur-rule-grid);stroke-width:1}
/* Chart text is sized for a projector at the back of a lecture room, not for
   a desk. Keep these well above the surrounding UI sizes. */
.ur-tool .ur-tick{font-size:14px;fill:var(--ur-muted)}
.ur-tool .ur-axlabel{
  font-size:14px;fill:var(--ur-muted);font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;
}

/* ---------- cards ---------- */
.ur-cols{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:30px}
.ur-cols3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:30px}
.ur-card{background:var(--ur-panel);border:1px solid var(--ur-rule);border-radius:8px;padding:20px}
.ur-card.ur-shift{border-top:3px solid var(--ur-shift)}
.ur-card.ur-hold{border-top:3px solid var(--ur-hold)}
.ur-card.ur-alt{border-top:3px solid var(--ur-alt)}
.ur-card h3{font-family:var(--ur-display);font-size:15px;font-weight:700;letter-spacing:-.01em;margin:0 0 3px}
.ur-card.ur-shift h3{color:var(--ur-shift)}
.ur-card.ur-hold h3{color:var(--ur-hold)}
.ur-card.ur-alt h3{color:var(--ur-alt)}
.ur-card .ur-sub{font-size:13.5px;color:var(--ur-muted);margin:0 0 16px}

/* ---------- tables ---------- */
.ur-tool table{width:100%;border-collapse:collapse;font-family:var(--ur-data);font-size:12.5px}
.ur-tool th{
  text-align:right;font-weight:700;font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ur-muted);padding:0 0 7px;
  border-bottom:1px solid var(--ur-rule);
}
.ur-tool th:first-child,.ur-tool td:first-child{text-align:left}
.ur-tool td{
  padding:7px 0;border-bottom:1px solid var(--ur-rule-row);
  text-align:right;font-variant-numeric:tabular-nums;
}
.ur-tool tr:last-child td{border-bottom:none}
.ur-term{color:var(--ur-ink);font-weight:500}
.ur-num.ur-shift-num{color:var(--ur-shift);font-weight:700}
.ur-num.ur-hold-num{color:var(--ur-hold);font-weight:700}
.ur-num.ur-alt-num{color:var(--ur-alt);font-weight:700}
.ur-flash{animation:ur-flash .55s ease}
@keyframes ur-flash{0%{background:var(--ur-shift-wash)}100%{background:transparent}}
.ur-steady{animation:ur-steady .55s ease}
@keyframes ur-steady{0%{background:var(--ur-hold-wash)}100%{background:transparent}}

.ur-eq{
  font-family:var(--ur-data);font-size:12.5px;line-height:2.1;
  background:var(--ur-surface-sunk);border-left:2px solid var(--ur-rule);
  padding:12px 14px 12px 30px;margin-top:16px;
  white-space:normal;overflow:visible;text-indent:-16px;
}
.ur-eq br + *{text-indent:-16px}
.ur-eq .r{color:var(--ur-shift);font-weight:700}
.ur-eq .g{color:var(--ur-hold);font-weight:700}
.ur-eq .o{color:var(--ur-alt);font-weight:700}
.ur-eq .dim{color:var(--ur-muted)}

/* ---------- live model specification ---------- */
.ur-speccard{
  background:var(--ur-panel);border:1px solid var(--ur-rule);border-radius:8px;
  padding:18px 22px 16px;margin-bottom:10px;
}
.ur-spec-row{display:flex;gap:16px;align-items:baseline;padding:7px 0}
.ur-spec-row + .ur-spec-row{border-top:1px dashed var(--ur-rule-faint)}
.ur-spec-label{
  font-family:var(--ur-data);font-size:9.5px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ur-muted);flex:none;width:96px;text-align:right;
  padding-top:3px;
}
.ur-spec-eq{
  font-family:var(--ur-data);font-size:13.5px;line-height:2.3;
  flex:1;min-width:0;padding-bottom:2px;
  /* wrap instead of scroll: hanging indent keeps continuation lines clear of
     the "y =", and each operator+term is glued together so terms never split */
  white-space:normal;overflow:visible;
  padding-left:2.5em;text-indent:-2.5em;
}
.ur-grp{display:inline-block;white-space:nowrap;text-indent:0}
.ur-tok{
  display:inline-block;padding:2px 4px;border-radius:2px;
  transition:color .25s ease, opacity .25s ease;
}
.ur-tok.op{color:var(--ur-muted);padding:2px 2px}
.ur-tok.on{color:var(--ur-ink);font-weight:500}
.ur-tok.num{color:var(--ur-shift);font-weight:700}
.ur-tok.off{
  color:var(--ur-off-ink);text-decoration:line-through;
  text-decoration-thickness:1.5px;opacity:.75;font-weight:400;
}
.ur-tok.changed{animation:ur-tokflash .75s ease}
@keyframes ur-tokflash{
  0%{background:var(--ur-shift-wash);color:var(--ur-shift)}
  70%{background:var(--ur-shift-wash)}
  100%{background:transparent}
}
.ur-tok.toggled{animation:ur-tokpop .8s ease}
@keyframes ur-tokpop{
  0%{background:var(--ur-hold-wash);transform:translateY(-2px)}
  70%{background:var(--ur-hold-wash)}
  100%{background:transparent;transform:none}
}
.ur-spec-legend{
  font-family:var(--ur-data);font-size:10.5px;color:var(--ur-muted);
  margin:10px 0 0 112px;line-height:1.8;max-width:78ch;
}
.ur-spec-legend s{color:var(--ur-off-ink);text-decoration-thickness:1.5px}
.ur-spec-legend .chg{color:var(--ur-shift)}
@media (max-width:860px){
  .ur-spec-row{flex-direction:column;gap:2px}
  .ur-spec-label{width:auto;text-align:left}
  .ur-spec-legend{margin-left:0}
}

/* ---------- commit card ---------- */
.ur-commit{
  margin-top:10px;background:var(--ur-panel);border:1px solid var(--ur-rule);
  border-radius:8px;padding:22px 24px;
}
.ur-commit h3{font-family:var(--ur-display);font-size:15px;font-weight:700;margin:0 0 3px}
.ur-commit .ur-sub{font-size:13.5px;color:var(--ur-muted);margin:0 0 16px}
.ur-checks{display:grid;grid-template-columns:1fr 1fr;gap:8px 24px;margin-bottom:16px}
label.ur-chk{
  display:flex;gap:10px;align-items:flex-start;cursor:pointer;
  font-family:var(--ur-data);font-size:12.5px;padding:8px 10px;
  border:1px solid var(--ur-rule);border-radius:6px;transition:border-color .15s;
}
label.ur-chk:hover{border-color:var(--ur-muted)}
label.ur-chk input{margin:2px 0 0;accent-color:var(--ur-ink);flex:none}
label.ur-chk .mark{margin-left:auto;font-weight:700;font-size:10px;letter-spacing:.06em}
label.ur-chk.right{border-color:var(--ur-hold);background:var(--ur-hold-wash)}
label.ur-chk.wrong{border-color:var(--ur-shift);background:var(--ur-shift-wash)}
label.ur-chk.right .mark{color:var(--ur-hold)}
label.ur-chk.wrong .mark{color:var(--ur-shift)}
.ur-commit-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
button.ur-act{
  font-family:var(--ur-data);font-size:12.5px;font-weight:700;letter-spacing:.04em;
  padding:9px 18px;border-radius:6px;cursor:pointer;border:1px solid var(--ur-ink);
  background:var(--ur-ink);color:#fff;transition:opacity .15s;
}
button.ur-act.ghost{background:transparent;color:var(--ur-ink)}
button.ur-act:hover{opacity:.82}
button.ur-act:focus-visible{outline:2px solid var(--ur-shift);outline-offset:2px}
.ur-verdict{font-size:14px;color:var(--ur-muted)}
.ur-verdict b{color:var(--ur-ink);font-weight:600}

/* ---------- small utilities ---------- */
.ur-tight{margin-top:10px;margin-bottom:10px}
.ur-spaced{margin-top:22px}
.ur-stacked{margin-top:18px}
.ur-scroll-x{overflow-x:auto}
.ur-soft{color:var(--ur-muted);font-weight:400;opacity:.75}
.ur-micro{font-size:11.5px;letter-spacing:.08em}
.ur-reg{font-weight:400}
.ur-faded{color:var(--ur-off-faint)}
.ur-tool td.ur-term.ur-faded{color:var(--ur-off-mute)}
.ur-tool td.ur-term.note{text-align:left;color:var(--ur-muted);font-size:11px;padding-top:10px}
.ur-tool text.ur-soft{fill:var(--ur-muted);opacity:.75}

/* ---------- SVG tone classes ----------
   Charts colour themselves through these, never through hex in JS. Redefining
   the tokens above restyles every chart automatically. */
.ur-tool .tone-shift{fill:var(--ur-shift);stroke:var(--ur-shift)}
.ur-tool .tone-hold{fill:var(--ur-hold);stroke:var(--ur-hold)}
.ur-tool .tone-alt{fill:var(--ur-alt);stroke:var(--ur-alt)}
.ur-tool .tone-ink{fill:var(--ur-ink);stroke:var(--ur-ink)}
.ur-tool .tone-muted{fill:var(--ur-muted);stroke:var(--ur-muted)}
.ur-tool .stroke-only{fill:none}

/* ---------- predict-first gate ----------
   Scoped to the panel, not <body>: five demos share this document and a
   body-level lock would disable all of them at once. */
.ur-gate-banner{
  display:flex;gap:14px;align-items:center;flex-wrap:wrap;
  background:var(--ur-hold-wash);border:1px solid var(--ur-hold-line);
  border-left:3px solid var(--ur-hold);
  border-radius:8px;padding:12px 16px;margin-bottom:10px;
  font-family:var(--ur-data);font-size:12px;color:var(--ur-hold-deep);
}
.ur-gate-skip{
  margin-left:auto;font-family:var(--ur-data);font-size:10.5px;font-weight:700;
  letter-spacing:.06em;padding:6px 12px;border:1px solid var(--ur-hold-edge);
  border-radius:6px;background:transparent;color:var(--ur-hold-deep);cursor:pointer;
}
.ur-gate-skip:hover{background:#fff}
.ur-gate-skip:focus-visible{outline:2px solid var(--ur-hold);outline-offset:2px}
.ur-panel.ur-locked .ur-controls .ur-pill,
.ur-panel.ur-locked .ur-controls input[type=range]{
  pointer-events:none;opacity:.42;filter:grayscale(1);
}
.ur-panel.ur-locked .ur-controls{position:relative}
.ur-lock-note{
  font-family:var(--ur-data);font-size:10.5px;letter-spacing:.06em;color:var(--ur-hold);
  margin:8px 0 0;font-weight:700;
}
.ur-panel:not(.ur-locked) .ur-lock-note{display:none}

/* ---------- takeaway ---------- */
.ur-takeaway{
  margin-top:30px;background:var(--ur-hold-wash);border:1px solid var(--ur-hold-line);
  border-left:3px solid var(--ur-hold);border-radius:8px;padding:18px 22px;
}
.ur-takeaway .lab{
  font-family:var(--ur-data);font-size:9.5px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ur-hold-deep);margin:0 0 6px;
}
.ur-takeaway p{margin:0;font-size:17px;line-height:1.5;color:var(--ur-hold-ink);max-width:60ch}

/* ---------- raw data drawer ---------- */
.ur-rawdata{
  margin-top:10px;background:var(--ur-panel);border:1px solid var(--ur-rule);
  border-radius:8px;padding:0;
}
.ur-rawdata summary{
  font-family:var(--ur-data);font-size:11px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ur-muted);padding:14px 20px;cursor:pointer;
  list-style:none;display:flex;align-items:center;gap:10px;
}
.ur-rawdata summary::-webkit-details-marker{display:none}
.ur-rawdata summary::before{content:"\25B8";font-size:13px;transition:transform .2s}
.ur-rawdata[open] summary::before{transform:rotate(90deg)}
.ur-rawdata summary:hover{color:var(--ur-ink)}
.ur-rawdata .body{padding:0 20px 18px;max-height:340px;overflow:auto}
.ur-rawdata table{font-size:11.5px}
.ur-rawdata td,.ur-rawdata th{padding:4px 12px 4px 0}
.ur-rawdata .cap{font-size:12.5px;color:var(--ur-muted);margin:0 0 12px;font-family:var(--ur-body)}

/* ---------- per-demo footnote ---------- */
.ur-footer{
  margin-top:38px;padding-top:20px;border-top:1px solid var(--ur-rule);
  font-size:13.5px;color:var(--ur-muted);max-width:72ch;
}
.ur-footer b{color:var(--ur-ink);font-weight:600}

@media (max-width:860px){
  .ur-cols,.ur-cols3{grid-template-columns:1fr}
  .ur-checks{grid-template-columns:1fr}
  .ur-controls{gap:18px}
}
@media (prefers-reduced-motion:reduce){
  .ur-tool *{animation:none!important;transition:none!important}
}

/* ==========================================================================
   Per-demo styles.

   Each block is scoped to its panel because the source pages defined the same
   generic class names differently — `.fitline`, `.dot`, `.legend` and `.pt`
   each meant two different things across the five pages.
   ========================================================================== */

/* ---------- 1. R² from scratch ---------- */
#ur-panel-rsquared .step{margin:0 0 10px}
#ur-panel-rsquared .step-head{display:flex;gap:14px;align-items:baseline;margin:34px 0 10px}
#ur-panel-rsquared .step-num{
  font-family:var(--ur-data);font-size:11px;font-weight:700;letter-spacing:.14em;
  color:var(--ur-muted);flex:none;width:64px;padding-top:4px;
}
#ur-panel-rsquared .step-head h3{
  font-family:var(--ur-display);font-size:21px;font-weight:700;letter-spacing:-.015em;
  margin:0;line-height:1.2;
}
#ur-panel-rsquared .step-body{margin:0 0 14px 78px;max-width:64ch;font-size:16.5px}
#ur-panel-rsquared .step-body p{margin:0 0 10px}
#ur-panel-rsquared .step-body em{color:var(--ur-ink);font-style:normal;font-weight:600}
#ur-panel-rsquared .stepbox{
  background:var(--ur-panel);border:1px solid var(--ur-rule);border-radius:8px;
  padding:16px 10px 8px;
}
#ur-panel-rsquared .stepbox.live{border-color:var(--ur-hold-edge);box-shadow:0 0 0 3px var(--ur-hold-wash)}
#ur-panel-rsquared .livetag{
  font-family:var(--ur-data);font-size:11.5px;font-weight:700;letter-spacing:.14em;
  color:var(--ur-hold);text-transform:uppercase;padding:0 0 8px 12px;
}
#ur-panel-rsquared .caption{
  font-family:var(--ur-data);font-size:13px;color:var(--ur-muted);
  padding:8px 14px 4px;line-height:1.75;
}
#ur-panel-rsquared .livebar{
  display:flex;gap:14px;align-items:center;flex-wrap:wrap;
  padding:10px 14px 4px;font-family:var(--ur-data);font-size:13.5px;
}
#ur-panel-rsquared .livebar .score{font-weight:700;color:var(--ur-shift);font-variant-numeric:tabular-nums}
#ur-panel-rsquared .livebar .best{color:var(--ur-hold);font-weight:700}
#ur-panel-rsquared .dot{stroke:#fff;stroke-width:1}
#ur-panel-rsquared .dottrail{stroke:var(--ur-ink);stroke-width:1;opacity:.22}
#ur-panel-rsquared .meanline{stroke:var(--ur-alt);stroke-width:2}
#ur-panel-rsquared .meanline.ghost{stroke-dasharray:5 4;opacity:.4;stroke-width:1.4}
#ur-panel-rsquared .fitline{stroke:var(--ur-shift);stroke-width:2.4}
#ur-panel-rsquared .grouplineA{stroke:var(--ur-hold);stroke-width:2.2}
#ur-panel-rsquared .grouplineB{stroke:var(--ur-alt);stroke-width:2.2}
#ur-panel-rsquared .sq{stroke-width:1}
#ur-panel-rsquared .drop{stroke-width:1;opacity:.5}
#ur-panel-rsquared .pileframe{fill:none;stroke:var(--ur-rule);stroke-width:1;stroke-dasharray:4 4}
#ur-panel-rsquared .pileprev{fill:none;stroke:var(--ur-shift);stroke-width:1.5;stroke-dasharray:5 4;opacity:.85}
#ur-panel-rsquared .pilelab{font-size:13px;fill:var(--ur-muted);font-weight:700;letter-spacing:.06em}
#ur-panel-rsquared .pileval{font-size:15px;font-weight:700;font-variant-numeric:tabular-nums}
#ur-panel-rsquared .handle{fill:#fff;stroke:var(--ur-shift);stroke-width:2.5;cursor:ns-resize;touch-action:none}
#ur-panel-rsquared .handle:hover{fill:var(--ur-shift-wash)}
#ur-panel-rsquared .handlehint{font-size:13px;fill:var(--ur-shift);font-weight:700}

/* the R² arithmetic, colour-matched to the shapes it is counting */
#ur-panel-rsquared .calcbox{
  margin:8px 14px 0;padding:14px 18px;background:var(--ur-surface-sunk);
  border:1px solid var(--ur-rule);border-left:3px solid var(--ur-shift);border-radius:6px;
  font-family:var(--ur-data);line-height:1.7;
}
#ur-panel-rsquared .calcrow{
  display:flex;gap:16px;align-items:baseline;justify-content:space-between;
  padding:3px 0;
}
#ur-panel-rsquared .calcrow .lab{color:var(--ur-muted);font-size:13px}
#ur-panel-rsquared .calcrow .val{font-size:16px;font-weight:700;font-variant-numeric:tabular-nums}
#ur-panel-rsquared .calcbox .hold{color:var(--ur-hold)}
#ur-panel-rsquared .calcbox .alt{color:var(--ur-alt)}
#ur-panel-rsquared .calcbox .rem{color:var(--ur-shift)}
#ur-panel-rsquared .calcwork{
  margin-top:10px;padding-top:10px;border-top:1px dashed var(--ur-rule-faint);
  font-size:16px;font-variant-numeric:tabular-nums;color:var(--ur-ink);
}
#ur-panel-rsquared .calcwork .pad{padding-left:2.6em;display:inline-block}
#ur-panel-rsquared .calcnote{
  margin:10px 0 0;font-family:var(--ur-body);font-size:14px;
  color:var(--ur-muted);line-height:1.6;
}
#ur-panel-rsquared .calcnote b{color:var(--ur-ink)}
@media (max-width:860px){
  #ur-panel-rsquared .calcrow{flex-direction:column;gap:0}
}

/* ---------- 2. Correlation is regression ---------- */
#ur-panel-correlation .pt{fill:var(--ur-ink);opacity:.5}
#ur-panel-correlation .line-yx{stroke:var(--ur-shift);stroke-width:2.2;fill:none}
#ur-panel-correlation .line-xy{stroke:var(--ur-alt);stroke-width:2.2;fill:none;stroke-dasharray:6 4}
#ur-panel-correlation .drop{stroke:var(--ur-shift);stroke-width:1;opacity:.28}
#ur-panel-correlation .drop-h{stroke:var(--ur-alt);stroke-width:1;opacity:.28}
#ur-panel-correlation .centroid{fill:none;stroke:var(--ur-hold);stroke-width:1.6}
#ur-panel-correlation .legend{font-size:14.5px;font-weight:600}

/* ---------- 3. Reference category ---------- */
#ur-panel-reference .dot{fill:var(--ur-hold)}
#ur-panel-reference .dot-ring{fill:none;stroke:var(--ur-hold);stroke-width:1.5;opacity:0}
#ur-panel-reference .glabel{font-size:14.5px;fill:var(--ur-ink);font-weight:600}
#ur-panel-reference .gval{font-size:14.5px;fill:var(--ur-hold);font-weight:700}
#ur-panel-reference .arrow{stroke:var(--ur-shift);stroke-width:1.6;fill:none}
#ur-panel-reference .blabel{font-size:14.5px;fill:var(--ur-shift);font-weight:700}
#ur-panel-reference .anchor-line{stroke:var(--ur-ink);stroke-width:1.4}
#ur-panel-reference .anchor-txt{font-size:14px;fill:var(--ur-ink);font-weight:700}

/* ---------- 4. Interaction toggle ---------- */
#ur-panel-interaction .pt{opacity:.55}
#ur-panel-interaction .fitline{stroke-width:2.4;fill:none}
#ur-panel-interaction .fitline.ghost{stroke-width:1.4;stroke-dasharray:5 4;opacity:.35}
#ur-panel-interaction .lock{font-size:14px;font-weight:700;fill:var(--ur-muted)}
#ur-panel-interaction .legend{font-size:14.5px;font-weight:600}
#ur-panel-interaction .refmark{stroke:var(--ur-ink);stroke-width:1.2;stroke-dasharray:3 3;opacity:.55}
#ur-panel-interaction .zeromark{stroke:var(--ur-shift);stroke-width:1.2;stroke-dasharray:2 3;opacity:.7}
#ur-panel-interaction .ur-tag{
  display:inline-block;font-family:var(--ur-data);font-size:10px;font-weight:700;
  letter-spacing:.1em;padding:3px 8px;border-radius:6px;margin-left:8px;vertical-align:2px;
}
#ur-panel-interaction .ur-tag.on{background:var(--ur-shift-wash);color:var(--ur-shift)}
#ur-panel-interaction .ur-tag.off{background:var(--ur-hold-wash);color:var(--ur-hold)}

/* ---------- 5. ANOVA is regression ---------- */
#ur-panel-anova .rosetta{width:100%;border-collapse:collapse;font-family:var(--ur-data);font-size:13px}
#ur-panel-anova .rosetta th{
  font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  padding:0 0 10px;border-bottom:1px solid var(--ur-rule);
}
#ur-panel-anova .rosetta th.left{text-align:right;color:var(--ur-alt)}
#ur-panel-anova .rosetta th.mid{text-align:center;color:var(--ur-hold)}
#ur-panel-anova .rosetta th.right{text-align:left;color:var(--ur-shift)}
#ur-panel-anova .rosetta td{padding:10px 0;border-bottom:1px solid var(--ur-rule-row);vertical-align:middle}
#ur-panel-anova .rosetta tr:last-child td{border-bottom:none}
#ur-panel-anova .rosetta td.left{text-align:right;color:var(--ur-alt);width:34%;padding-right:20px}
#ur-panel-anova .rosetta td.right{text-align:left;color:var(--ur-shift);width:34%;padding-left:20px}
#ur-panel-anova .rosetta td.mid{
  text-align:center;width:32%;font-weight:700;color:var(--ur-hold);
  font-variant-numeric:tabular-nums;background:var(--ur-hold-wash);
  border-left:1px solid var(--ur-rule-cell);border-right:1px solid var(--ur-rule-cell);
}
#ur-panel-anova .rosetta tr:hover td.left,
#ur-panel-anova .rosetta tr:hover td.right{color:var(--ur-ink)}
#ur-panel-anova .rosetta .note{display:block;font-size:10.5px;color:var(--ur-muted);font-weight:400;margin-top:2px}
#ur-panel-anova .rosetta tr.gap td{background:transparent;border:none;height:6px;padding:0}

#ur-panel-anova .matrix{border-collapse:collapse;font-family:var(--ur-data);font-size:12px;margin:0 auto;width:auto}
#ur-panel-anova .matrix th{
  font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--ur-muted);
  padding:6px 10px;border:none;text-align:center;font-weight:700;
}
#ur-panel-anova .matrix th.rowhead{text-align:right;padding-right:14px}
#ur-panel-anova .matrix td{
  border:1px solid var(--ur-rule);padding:7px 10px;text-align:center;min-width:104px;
  font-variant-numeric:tabular-nums;transition:background .3s ease;
}
#ur-panel-anova .matrix td.empty{background:var(--ur-surface-empty);color:var(--ur-off-faint)}
#ur-panel-anova .matrix td.diag{background:transparent;border:none}
#ur-panel-anova .matrix td.filled{background:#fff}
#ur-panel-anova .matrix td.just-filled{animation:ur-pop .6s ease}
@keyframes ur-pop{0%{background:var(--ur-shift-wash);transform:scale(1.04)}100%{background:#fff;transform:scale(1)}}
#ur-panel-anova .matrix .d{display:block;font-weight:700;color:var(--ur-ink)}
#ur-panel-anova .matrix .p{display:block;font-size:10.5px;margin-top:2px}
#ur-panel-anova .matrix .p.sig{color:var(--ur-shift);font-weight:700}
#ur-panel-anova .matrix .p.ns{color:var(--ur-muted)}
#ur-panel-anova .counter{
  font-family:var(--ur-data);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ur-muted);text-align:center;margin:16px 0 4px;
}
#ur-panel-anova .counter b{color:var(--ur-hold);font-size:14px;letter-spacing:0}
#ur-panel-anova .bar{height:3px;background:var(--ur-rule-grid);max-width:320px;margin:8px auto 0;border-radius:2px;overflow:hidden}
#ur-panel-anova .bar span{display:block;height:100%;width:0;background:var(--ur-hold);transition:width .4s ease}
#ur-panel-anova .flip{font-size:10.5px;color:var(--ur-alt);font-weight:700}

/* ---------- 6. Same stats, different pictures ---------- */
#ur-panel-shapes .pt{fill:var(--ur-shift);fill-opacity:.75;stroke:#fff;stroke-width:1.5}
#ur-panel-shapes .fitline{stroke:var(--ur-hold);stroke-width:3;fill:none}
#ur-panel-shapes .zeroline{stroke:var(--ur-hold);stroke-width:2;stroke-dasharray:6 4}
#ur-panel-shapes .resid-stem{stroke:var(--ur-shift);stroke-width:1.5;opacity:.45}
#ur-panel-shapes .ur-tag{
  display:inline-block;font-family:var(--ur-data);font-size:10px;font-weight:700;
  letter-spacing:.1em;padding:3px 8px;border-radius:6px;margin-left:8px;vertical-align:2px;
  background:var(--ur-hold-wash);color:var(--ur-hold-deep);
}
#ur-panel-shapes .ur-tag.pulse{animation:ur-frozen 1s ease}
@keyframes ur-frozen{
  0%{background:var(--ur-hold);color:#fff;transform:scale(1.08)}
  100%{background:var(--ur-hold-wash);color:var(--ur-hold-deep);transform:none}
}
#ur-panel-shapes .ur-figure{padding-bottom:4px}

/* ---------- 7. The variable you left out ---------- */
#ur-panel-confound .pt{stroke:#fff;stroke-width:1.2;fill-opacity:.8}
#ur-panel-confound .aggline{stroke:var(--ur-ink);stroke-width:3.5;fill:none}
#ur-panel-confound .tierline{stroke-width:3;fill:none;stroke-linecap:round}
#ur-panel-confound .leg{font-family:var(--ur-data);font-size:13.5px;font-weight:700}
#ur-panel-confound .ur-coef{
  font-family:var(--ur-data);font-size:44px;font-weight:800;line-height:1;
  letter-spacing:-.02em;margin:2px 0 10px;
}
#ur-panel-confound .ur-coef.pos{color:var(--ur-hold-deep)}
#ur-panel-confound .ur-coef.neg{color:var(--ur-alt)}
#ur-panel-confound .r2row th,
#ur-panel-confound .r2row td{border-top:2px solid var(--ur-rule);font-weight:700}
#ur-panel-confound .ur-decide{
  margin-top:16px;padding:14px 16px;border-radius:10px;
  background:var(--ur-surface-sunk);border:1px solid var(--ur-rule);
}
#ur-panel-confound .ur-decide .q{
  font-family:var(--ur-data);font-size:11px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ur-muted);margin-bottom:6px;
}
#ur-panel-confound .ur-decide .ans{font-size:20px;font-weight:800;letter-spacing:-.01em}
#ur-panel-confound .ur-decide .ans.yes{color:var(--ur-hold-deep)}
#ur-panel-confound .ur-decide .ans.no{color:var(--ur-alt)}
#ur-panel-confound .ur-decide .why{font-size:13px;color:var(--ur-muted);margin:6px 0 0}

/* ---------- 8. Significant vs big enough ---------- */
#ur-panel-signif .zeroline{stroke:var(--ur-ink);stroke-width:2.5}
#ur-panel-signif .worthline{stroke:var(--ur-alt);stroke-width:2.5;stroke-dasharray:7 5}
#ur-panel-signif .zlab,
#ur-panel-signif .wlab{font-family:var(--ur-data);font-size:12.5px;font-weight:700}
#ur-panel-signif .zlab{fill:var(--ur-ink)}
#ur-panel-signif .wlab{fill:var(--ur-alt)}
#ur-panel-signif .ci{stroke-width:9;stroke-linecap:butt;opacity:.4}
#ur-panel-signif .cap{stroke-width:3}
#ur-panel-signif .ci.sig,#ur-panel-signif .cap.sig{stroke:var(--ur-hold)}
#ur-panel-signif .ci.ns, #ur-panel-signif .cap.ns{stroke:var(--ur-muted)}
#ur-panel-signif .est{fill:var(--ur-shift);stroke:#fff;stroke-width:2}
#ur-panel-signif .estlab{font-family:var(--ur-data);font-size:13.5px;font-weight:700;fill:var(--ur-shift)}
#ur-panel-signif .cilab{font-family:var(--ur-data);font-size:13px;fill:var(--ur-muted)}
#ur-panel-signif .verdict{font-family:var(--ur-data);font-size:13px;font-weight:700}
#ur-panel-signif .verdict.sig{fill:var(--ur-hold-deep)}
#ur-panel-signif .verdict.ns{fill:var(--ur-muted)}
#ur-panel-signif .ur-pval{
  font-family:var(--ur-data);font-size:38px;font-weight:800;line-height:1;
  letter-spacing:-.02em;margin:2px 0 14px;
}
#ur-panel-signif .ur-pval.sig{color:var(--ur-hold-deep)}
#ur-panel-signif .ur-pval.ns{color:var(--ur-muted)}
#ur-panel-signif .ur-verdicts{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px}
#ur-panel-signif .vcard{padding:11px 13px;border-radius:10px;border:1px solid var(--ur-rule);
  background:var(--ur-surface-sunk)}
#ur-panel-signif .vcard .vq{
  font-family:var(--ur-data);font-size:10.5px;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;color:var(--ur-muted);
}
#ur-panel-signif .vcard .va{font-size:19px;font-weight:800;margin-top:3px}
#ur-panel-signif .vcard.yes .va{color:var(--ur-hold-deep)}
#ur-panel-signif .vcard.no  .va{color:var(--ur-alt)}
#ur-panel-signif .vcard .vw{font-size:12.5px;color:var(--ur-muted);margin:5px 0 0;line-height:1.45}
#ur-panel-signif .ur-call{
  margin-top:14px;padding:14px 16px;border-radius:10px;
  background:var(--ur-hold-wash);border:1px solid var(--ur-rule);
}
#ur-panel-signif .ur-call .q{
  font-family:var(--ur-data);font-size:11px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ur-hold-deep);margin-bottom:6px;
}
#ur-panel-signif .ur-call p{font-size:13.5px;color:var(--ur-ink);margin:0;line-height:1.5}
#ur-panel-signif .ur-refs{
  margin:18px 14px 0;padding:18px 22px;border-radius:12px;
  background:var(--ur-surface-sunk);border:1px solid var(--ur-rule);
}
#ur-panel-signif .ur-refs h3{
  font-family:var(--ur-data);font-size:11px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ur-muted);margin:0 0 10px;
}
#ur-panel-signif .ur-refs p{font-size:14px;color:var(--ur-ink);line-height:1.65;margin:0 0 12px}
#ur-panel-signif .ur-refs sup{font-weight:700;color:var(--ur-hold-deep);padding-left:1px}
#ur-panel-signif .ur-refs ol{margin:14px 0 0;padding-left:22px}
#ur-panel-signif .ur-refs li{font-size:12.5px;color:var(--ur-muted);line-height:1.55;margin-bottom:8px}
#ur-panel-signif .ur-refs a{color:var(--ur-hold-deep);text-decoration:underline}
#ur-panel-signif .ur-refs a:hover{color:var(--ur-ink)}

/* ---------- 9. Why your worst stores "improve" ---------- */
#ur-panel-revert .dot{stroke:#fff;stroke-width:1.4}
#ur-panel-revert .dot.m{fill:var(--ur-off-faint,#b8c4d2);fill-opacity:.75}
#ur-panel-revert .dot.w{fill:var(--ur-alt)}
#ur-panel-revert .dot.b{fill:var(--ur-hold)}
#ur-panel-revert .dot.first{fill-opacity:.5}
#ur-panel-revert .link{stroke-width:1.6;fill:none;opacity:.5}
#ur-panel-revert .link.m{stroke:#b8c4d2;opacity:.3}
#ur-panel-revert .link.w{stroke:var(--ur-alt)}
#ur-panel-revert .link.b{stroke:var(--ur-hold)}
#ur-panel-revert .truth{stroke:var(--ur-shift);stroke-width:2;opacity:.65}
#ur-panel-revert .gmean{stroke-width:4;stroke-linecap:round}
#ur-panel-revert .gmean.w{stroke:var(--ur-alt)}
#ur-panel-revert .gmean.b{stroke:var(--ur-hold)}
#ur-panel-revert .gmlab{font-family:var(--ur-data);font-size:12.5px;font-weight:700}
#ur-panel-revert .gmlab.w{fill:var(--ur-alt)}
#ur-panel-revert .gmlab.b{fill:var(--ur-hold-deep)}
#ur-panel-revert .collab{font-family:var(--ur-data);font-size:13.5px;font-weight:700;fill:var(--ur-ink)}
#ur-panel-revert .collab.off{fill:var(--ur-muted);opacity:.5}
#ur-panel-revert .ur-lift{
  font-family:var(--ur-data);font-size:40px;font-weight:800;line-height:1;
  letter-spacing:-.02em;margin:2px 0 8px;color:var(--ur-muted);
}
#ur-panel-revert .ur-lift.live{color:var(--ur-alt)}
#ur-panel-revert td.up{color:var(--ur-alt);font-weight:700}
#ur-panel-revert td.down{color:var(--ur-hold-deep);font-weight:700}
#ur-panel-revert td.flat{color:var(--ur-muted);font-weight:700}
#ur-panel-revert td.pend{color:var(--ur-off-faint,#b8c4d2)}
#ur-panel-revert .ur-verdict-box{
  margin-top:16px;padding:14px 16px;border-radius:10px;
  background:var(--ur-surface-sunk);border:1px solid var(--ur-rule);
}
#ur-panel-revert .ur-verdict-box .q{
  font-family:var(--ur-data);font-size:11px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ur-muted);margin-bottom:5px;
}
#ur-panel-revert .ur-verdict-box .ans{font-size:19px;font-weight:800;color:var(--ur-alt)}
#ur-panel-revert .ur-verdict-box p{font-size:13px;color:var(--ur-ink);margin:8px 0 0;line-height:1.5}
#ur-panel-revert .ur-verdict-box .tell,
#ur-panel-revert .ur-verdict-box .pred{color:var(--ur-muted)}
#ur-panel-revert .ur-verdict-box .wait{color:var(--ur-muted);margin:0}

/* ---------- 10. When two predictors are twins ---------- */
#ur-panel-collin .truth{stroke:var(--ur-ink);stroke-width:2.5}
#ur-panel-collin .tlab{font-family:var(--ur-data);font-size:12px;font-weight:700;fill:var(--ur-ink)}
#ur-panel-collin .ci{stroke-width:9;opacity:.35}
#ur-panel-collin .cap{stroke-width:3}
#ur-panel-collin .ci.part,#ur-panel-collin .cap.part{stroke:var(--ur-shift)}
#ur-panel-collin .ci.sum, #ur-panel-collin .cap.sum{stroke:var(--ur-hold)}
#ur-panel-collin .est{stroke:#fff;stroke-width:2}
#ur-panel-collin .est.part{fill:var(--ur-shift)}
#ur-panel-collin .est.sum{fill:var(--ur-hold)}
#ur-panel-collin .blab{font-family:var(--ur-data);font-size:13px;font-weight:700}
#ur-panel-collin .blab.part{fill:var(--ur-shift)}
#ur-panel-collin .blab.sum{fill:var(--ur-hold-deep)}
#ur-panel-collin .bval{font-family:var(--ur-data);font-size:13px;font-weight:700}
#ur-panel-collin .bval.part{fill:var(--ur-shift)}
#ur-panel-collin .bval.sum{fill:var(--ur-hold-deep)}
#ur-panel-collin .ur-diag{
  display:flex;flex-wrap:wrap;gap:14px;margin:2px 0 14px;padding:10px 12px;border-radius:9px;
  background:var(--ur-surface-sunk);border:1px solid var(--ur-rule);
  font-family:var(--ur-data);font-size:12.5px;color:var(--ur-muted);
}
#ur-panel-collin .ur-diag b{color:var(--ur-ink)}
#ur-panel-collin .sumrow th,
#ur-panel-collin .sumrow td{border-top:2px solid var(--ur-rule);color:var(--ur-hold-deep);font-weight:700}
#ur-panel-collin .ur-verdict-box{
  margin-top:16px;padding:14px 16px;border-radius:10px;
  background:var(--ur-surface-sunk);border:1px solid var(--ur-rule);
}
#ur-panel-collin .ur-verdict-box .q{
  font-family:var(--ur-data);font-size:11px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ur-muted);margin-bottom:5px;
}
#ur-panel-collin .ur-verdict-box .ans{font-size:19px;font-weight:800}
#ur-panel-collin .ur-verdict-box .ans.yes{color:var(--ur-hold-deep)}
#ur-panel-collin .ur-verdict-box .ans.no{color:var(--ur-alt)}
#ur-panel-collin .ur-verdict-box p{font-size:13px;color:var(--ur-ink);margin:8px 0 0;line-height:1.5}
#ur-panel-collin .ur-verdict-box .keep{color:var(--ur-muted)}