/* The three signals. Tokens only — no hex outside SVG fills, per the house rule.
   Two modes share one stylesheet: .is-mini trims the homepage version down. */

.usp { border:1px solid var(--rule); border-radius:var(--r-xl); background:var(--paper-2);
  box-shadow:var(--shadow-sm); padding:22px; display:flex; flex-direction:column; gap:14px;
  min-width:0; max-width:100% }
.usp > *, .usp-score-body > *, .usp-cal-full > *, .usp-comp, .usp-row { min-width:0 }
.usp-cal-grid { min-width:0 }
.usp-foot { margin-top:auto; display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding-top:12px; border-top:1px solid var(--rule); font:500 11.5px var(--font-mono) }
.usp-foot span { color:var(--emerald-700) }
.usp-foot a { color:var(--fg-3); text-decoration:none }
.usp-foot a:hover { color:var(--ink) }
.usp-fallback { font:400 13px var(--font-sans); color:var(--fg-3) }

.usp-head { display:flex; flex-direction:column; gap:7px }
.usp-num { font:600 10.5px var(--font-mono); letter-spacing:.1em; color:var(--brand-emerald); margin-right:10px }
.usp-name { font:700 17px var(--font-display); color:var(--ink) }
.usp-sub { font:500 14.5px/1.45 var(--font-sans); color:var(--ink) }

/* chips, fields, buttons ------------------------------------------------- */
.usp-presets { display:flex; flex-wrap:wrap; gap:6px; align-items:center }
.usp-presets-label { font:500 10.5px var(--font-mono); color:var(--fg-3); margin-right:4px }
.usp-chip { font:500 11.5px var(--font-sans); color:var(--ink-soft); background:var(--paper);
  border:1px solid var(--rule-strong); border-radius:999px; padding:5px 12px; cursor:pointer;
  transition:border-color .13s, background .13s, color .13s }
.usp-chip:hover { border-color:var(--brand-emerald) }
.usp-chip.is-on { background:var(--emerald-50); border-color:var(--brand-emerald); color:var(--emerald-700); font-weight:600 }

.usp-controls { display:flex; flex-wrap:wrap; gap:10px }
.usp-field { display:flex; flex-direction:column; gap:4px; flex:1; min-width:140px }
.usp-field > span { font:500 10.5px var(--font-mono); color:var(--fg-3) }
.usp-field select, .usp-field input { font:500 13px var(--font-sans); color:var(--ink);
  background:var(--paper); border:1px solid var(--rule-strong); border-radius:8px; padding:8px 10px; width:100% }
.usp-field select:focus, .usp-field input:focus { outline:2px solid var(--focus-ring); outline-offset:1px; border-color:var(--brand-emerald) }

/* 01 score ---------------------------------------------------------------- */
.usp-score-body { display:grid; grid-template-columns:1fr 1fr; gap:20px; align-items:start }
.usp-score-body.is-mini { grid-template-columns:1fr; gap:12px }
.usp-gauge { width:100%; max-width:260px; height:auto; display:block; margin:0 auto 10px }
.usp-gauge-num { font:700 30px var(--font-display) }
.usp-gauge-band { font:600 10px var(--font-mono); fill:var(--ink-mute); letter-spacing:.08em; text-transform:uppercase }
.usp-gauge-end { font:500 9px var(--font-mono); fill:var(--navy-300) }

.usp-comps { display:flex; flex-direction:column; gap:7px }
.usp-comp-top { display:flex; justify-content:space-between; gap:10px;
  font:500 11px var(--font-mono); color:var(--fg-2); margin-bottom:3px }
.usp-comp-val { color:var(--ink); font-variant-numeric:tabular-nums }
.usp-comp-val i { font-style:normal; color:var(--fg-3) }
.usp-comp-bar { height:6px; border-radius:3px; background:var(--navy-100); overflow:hidden }
.usp-comp-bar i { display:block; height:100%; border-radius:3px; transition:width .18s var(--ease-out, ease) }

.usp-lift { margin-top:12px; font:400 12.5px/1.55 var(--font-sans); color:var(--ink-soft);
  border:1px solid var(--rule); border-left:3px solid var(--brand-emerald);
  border-radius:var(--r-md); background:var(--paper); padding:10px 12px }

.usp-sliders-head { font:500 10.5px var(--font-mono); color:var(--fg-3); margin-bottom:8px }
.usp-score-right { position:relative }
.usp-score-right::after { content:''; position:absolute; left:0; right:4px; bottom:0; height:30px;
  background:linear-gradient(to top,var(--paper-2),rgba(250,251,252,0)); pointer-events:none }
.usp-sliders { display:flex; flex-direction:column; gap:9px; max-height:530px; overflow-y:auto;
  padding:0 4px 18px 0; scrollbar-width:thin }
.usp-group { font:600 10px var(--font-mono); letter-spacing:.08em; text-transform:uppercase;
  color:var(--fg-3); margin-top:6px; display:flex; justify-content:space-between }
.usp-group:first-child { margin-top:0 }
.usp-group i { font-style:normal; color:var(--navy-300) }
.usp-slider { display:block }
.usp-slider-top { display:flex; justify-content:space-between; gap:10px;
  font:500 11.5px var(--font-sans); color:var(--fg-2); margin-bottom:2px }
.usp-slider-top output { font:600 11.5px var(--font-mono); color:var(--ink); font-variant-numeric:tabular-nums }

input[type=range].usp-row-input, .usp-slider input[type=range] { -webkit-appearance:none; appearance:none;
  width:100%; height:18px; background:transparent; cursor:pointer; display:block }
.usp-slider input[type=range]::-webkit-slider-runnable-track,
.usp-row-input::-webkit-slider-runnable-track { height:4px; border-radius:2px; background:var(--navy-100) }
.usp-slider input[type=range]::-moz-range-track,
.usp-row-input::-moz-range-track { height:4px; border-radius:2px; background:var(--navy-100) }
.usp-slider input[type=range]::-webkit-slider-thumb,
.usp-row-input::-webkit-slider-thumb { -webkit-appearance:none; appearance:none; width:14px; height:14px;
  margin-top:-5px; border-radius:50%; background:var(--brand-navy); border:2px solid var(--paper);
  box-shadow:0 0 0 1px var(--rule-strong) }
.usp-slider input[type=range]::-moz-range-thumb,
.usp-row-input::-moz-range-thumb { width:14px; height:14px; border-radius:50%; background:var(--brand-navy);
  border:2px solid var(--paper); box-shadow:0 0 0 1px var(--rule-strong) }
.usp-slider input[type=range]:focus-visible,
.usp-row-input:focus-visible { outline:2px solid var(--focus-ring); outline-offset:2px; border-radius:4px }

/* 02 industry -------------------------------------------------------------- */
.usp-model { font:400 12.5px/1.55 var(--font-sans); color:var(--fg-2) }
.usp-model p { margin:0 0 5px }
.usp-model-n { font:500 10.5px var(--font-mono); color:var(--fg-3) }

.usp-rows { display:flex; flex-direction:column; gap:12px }
.usp-row-top { display:flex; justify-content:space-between; gap:12px; align-items:baseline; margin-bottom:5px }
.usp-row-label { font:500 12.5px var(--font-sans); color:var(--ink) }
.usp-row-label i { display:block; font:400 10.5px var(--font-sans); font-style:normal; color:var(--fg-3); margin-top:1px }
.usp-row-me { font:600 12px var(--font-mono); white-space:nowrap; font-variant-numeric:tabular-nums }

.usp-band { position:relative; height:10px; border-radius:5px; background:var(--navy-100) }
.usp-band:focus-within { box-shadow:0 0 0 2px var(--focus-ring) }
.usp-band-fill { position:absolute; top:3px; height:4px; border-radius:2px; background:var(--brand-emerald); opacity:.5 }
.usp-band-med { position:absolute; top:-1px; width:1.5px; height:12px; background:var(--navy-300) }
.usp-band-me { position:absolute; top:-2px; width:14px; height:14px; margin-left:-7px; border-radius:50%;
  border:2px solid var(--paper); box-shadow:0 0 0 1px var(--rule-strong); transition:left .18s ease }

.usp-band .usp-row-input { position:absolute; left:0; right:0; top:-6px; height:22px; margin:0;
  opacity:0; cursor:grab; z-index:2 }
.usp-band .usp-row-input:active { cursor:grabbing }
.usp-band .usp-row-input::-webkit-slider-thumb { width:22px; height:22px }
.usp-band .usp-row-input::-moz-range-thumb { width:22px; height:22px }
.usp-band-me { pointer-events:none }
.usp-row-foot { display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap;
  font:500 10.5px var(--font-mono); color:var(--fg-3); margin-top:5px }
.usp-worth b { color:var(--ink) }

.usp-levers { border-top:1px solid var(--rule); padding-top:14px; display:flex; flex-direction:column; gap:10px }
.usp-levers-head { font:600 11px var(--font-mono); letter-spacing:.06em; text-transform:uppercase; color:var(--fg-3) }
.usp-lever { border:1px solid var(--rule); border-radius:var(--r-md); background:var(--paper); padding:12px 14px }
.usp-lever-top { display:flex; justify-content:space-between; gap:12px; align-items:baseline }
.usp-lever-top span { font:600 14px var(--font-display); color:var(--ink) }
.usp-lever-top b { font:600 14px var(--font-mono); color:var(--emerald-700); font-variant-numeric:tabular-nums }
.usp-lever-what { font:400 11.5px var(--font-sans); color:var(--fg-3); margin-top:2px }
.usp-lever ul { margin:8px 0 0; padding-left:16px; display:flex; flex-direction:column; gap:4px }
.usp-lever li { font:400 12.5px/1.5 var(--font-sans); color:var(--fg-2) }

/* 03 calendar -------------------------------------------------------------- */
.usp-cal-nav { display:flex; align-items:center; gap:8px }
.usp-navbtn { width:28px; height:28px; border-radius:8px; border:1px solid var(--rule-strong);
  background:var(--paper); color:var(--ink); font:600 15px var(--font-sans); cursor:pointer; line-height:1 }
.usp-navbtn:hover { border-color:var(--brand-emerald) }
.usp-cal-title { font:600 14px var(--font-display); color:var(--ink) }
.usp-cal-count { margin-left:auto; font:500 10.5px var(--font-mono); color:var(--fg-3) }

.usp-cal-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:4px }
.usp-dow { font:500 9.5px var(--font-mono); color:var(--navy-300); text-align:center; padding-bottom:2px }
.usp-cal-full { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:14px 18px;
  align-content:start }
.usp-cal-full > .usp-head, .usp-cal-full > .usp-cal-nav, .usp-cal-full > .usp-year { grid-column:1 / -1 }
.usp-cal-full > .usp-cal-grid { grid-column:1; align-self:start }
.usp-cal-full > .usp-ladder { grid-column:2; align-self:start }

.usp-cell { position:relative; height:46px; border:1px solid var(--rule);
  border-radius:7px; background:var(--paper); cursor:default; padding:3px 0 0;
  display:flex; flex-direction:column; align-items:center; gap:2px }
.usp-cell.is-blank { border:0; background:transparent }
.usp-cell-d { font:500 10.5px var(--font-mono); color:var(--fg-3) }
.usp-cell.is-today { box-shadow:inset 0 0 0 1px var(--brand-navy) }
.usp-cell.is-sel { border-color:var(--brand-navy); box-shadow:0 0 0 1px var(--brand-navy) }
.usp-cell-dots { display:flex; gap:2px }

.usp-ladder { border:1px solid var(--rule); border-radius:var(--r-md); background:var(--paper); overflow:hidden }
.usp-ladder-head { font:600 11px var(--font-mono); letter-spacing:.06em; text-transform:uppercase;
  color:var(--fg-3); padding:10px 14px; border-bottom:1px solid var(--rule); background:var(--paper-2) }
.usp-ladder-row { padding:10px 14px; border-top:1px dashed var(--rule) }
.usp-ladder-row:first-of-type { border-top:0 }
.usp-ladder-name { font:600 13px var(--font-sans); color:var(--ink) }
.usp-ladder-name b { font:600 12px var(--font-mono); color:var(--amber-700); margin-right:7px }
.usp-ladder-note { font:400 12px/1.5 var(--font-sans); color:var(--fg-2); margin-top:2px }
.usp-ladder-cost { font:500 11.5px/1.5 var(--font-mono); color:var(--amber-700); margin-top:4px }
.usp-ladder-row.is-compact { padding:7px 14px }
.usp-ladder-foot { padding:9px 14px; font:500 10.5px var(--font-mono); color:var(--fg-3);
  border-top:1px solid var(--rule); background:var(--paper-2) }

.usp-year { border-top:1px solid var(--rule); padding-top:14px }
.usp-year-head { font:600 11px var(--font-mono); letter-spacing:.06em; text-transform:uppercase; color:var(--fg-3); margin-bottom:10px }
.usp-year-grid { display:grid; grid-template-columns:repeat(12,1fr); gap:4px; align-items:end }
.usp-mon { display:flex; flex-direction:column; align-items:center; gap:3px; padding:6px 2px 4px;
  border:1px solid var(--rule); border-radius:7px; background:var(--paper); cursor:pointer; height:64px; justify-content:flex-end }
.usp-mon:hover { border-color:var(--brand-emerald) }
.usp-mon.is-on { border-color:var(--brand-navy); box-shadow:0 0 0 1px var(--brand-navy) }
.usp-mon span { font:500 9px var(--font-mono); color:var(--fg-3); order:3 }
.usp-mon b { font:600 11px var(--font-mono); color:var(--ink); order:1 }
.usp-mon i { display:block; width:34%; min-height:3px; border-radius:2px; background:var(--brand-amber); opacity:.65; order:2 }
.usp-year-foot { font:400 11px/1.5 var(--font-sans); color:var(--fg-3); margin-top:9px }

@media (max-width:900px) {
  .usp-cal-full { grid-template-columns:1fr }
  .usp-cal-full > .usp-cal-grid, .usp-cal-full > .usp-ladder { grid-column:1 }
  .usp-score-body { grid-template-columns:1fr }
  .usp-sliders { max-height:none }
  .usp-year-grid { grid-template-columns:repeat(6,1fr) }
}
@media (max-width:560px) {
  .usp { padding:16px }
  .usp-row-foot { flex-direction:column; gap:3px }
  .usp-cell { height:38px }
  .usp-year-grid { grid-template-columns:repeat(4,1fr) }
}

/* ---- spectrum keys, surplus line, and the in/out/filing calendar ---------- */
.usp-cal-legend { margin-left:auto; display:inline-flex; align-items:center; gap:5px;
  font:500 10.5px var(--font-mono); color:var(--fg-3) }
.usp-cal-legend i { width:8px; height:8px; border-radius:2px; display:inline-block; margin-left:7px }
i.k-in { background:#1B7A4E } i.k-out { background:#B42318 } i.k-file { background:#946200 }
.usp-ladder-name i { width:8px; height:8px; border-radius:2px; display:inline-block; margin-right:8px }

.usp-cell.is-in { background:rgba(27,122,78,.08); border-color:rgba(27,122,78,.35); cursor:pointer }
.usp-cell.is-in .usp-cell-d { color:#1B7A4E; font-weight:600 }
.usp-cell.is-out { background:rgba(180,35,24,.07); border-color:rgba(180,35,24,.32); cursor:pointer }
.usp-cell.is-out .usp-cell-d { color:#B42318; font-weight:600 }
.usp-cell.is-file { background:rgba(148,98,0,.07); border-color:rgba(148,98,0,.3); cursor:pointer }
.usp-cell.is-file .usp-cell-d { color:#946200; font-weight:600 }
.usp-cell-dots i { width:4px; height:4px; border-radius:50%; display:inline-block }

.usp-free { display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:11px 14px; border-top:1px solid var(--rule); background:rgba(27,122,78,.06) }
.usp-free span { font:500 11.5px var(--font-sans); color:var(--fg-2) }
.usp-free b { font:600 12px var(--font-mono); color:#1B7A4E }