/* ===========================================================================
   Multiwire Cutting Analytics

   ONE TYPEFACE. Public Sans at four weights does everything — headings, body,
   labels and figures. Numerals are aligned with tabular-nums rather than by
   switching to a monospaced face, so columns line up without the type changing
   character halfway down the page.

   FLAT. No shadows, one border weight, one radius. Structure comes from rules
   and spacing rather than from stacked surfaces.

   LIGHT ONLY. The page paints its own background and every colour explicitly,
   so it looks the same on every device whatever the system theme.

   Machine identity is the only colour in the interface: DT-2200 copper,
   DT-2300 teal, checked for colourblind separation against this background.
   Green, amber and crimson are reserved for status and never used as a series
   colour.
   =========================================================================== */

:root{
  color-scheme: light;

  --ground:#F2F4F6;
  --surface:#FFFFFF;
  --surface-2:#F7F9FA;
  --surface-sunk:#EDF0F2;

  --ink:#12171C;
  --ink-2:#4A545D;
  --ink-3:#79838C;
  --hairline:#E3E7EB;
  --hairline-2:#CDD4DA;

  --m22:#B4652F;  --m22-soft:#F6EBE3;
  --m23:#0A6E92;  --m23-soft:#E4F0F5;

  --good:#2C7049; --good-soft:#E4EFE8;
  --warn:#8A6410; --warn-soft:#F5EDDC;
  --bad:#9C3341;  --bad-soft:#F7E6E8;

  --focus:#0A6E92;

  --r:8px;
  --r-sm:4px;

  --font:"Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* one spacing scale, used everywhere */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;touch-action:manipulation}
body{
  margin:0;
  background:var(--ground);
  color:var(--ink);
  font-family:var(--font);
  font-size:14px;
  line-height:1.5;
  touch-action:manipulation;
  overscroll-behavior-y:contain;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{margin:0;font-weight:600;letter-spacing:-.015em;text-wrap:balance}
p{margin:0}
img{max-width:100%}
[hidden]{display:none!important}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:2px}

/* Figures line up wherever they appear. */
.num,td.n,.k-val,.c-v,.dv,.f-val{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}

.spacer{margin-left:auto}
.vis-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ----------------------------------------------------------- the shell -- */
.wrap{max-width:1180px;margin:0 auto;padding-inline:var(--s4)}

.masthead{background:var(--surface);border-bottom:1px solid var(--hairline);padding-top:env(safe-area-inset-top)}
.mast-in{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;padding-block:var(--s3)}
.brand{display:flex;align-items:baseline;gap:var(--s2);margin-right:auto;min-width:0}
.brand h1{font-size:15px;font-weight:700;letter-spacing:-.02em;white-space:nowrap}
.brand .sub{display:none;font-size:11.5px;color:var(--ink-3);white-space:nowrap}
.mast-tools{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap}

.storepill{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:500;color:var(--ink-2);border:1px solid var(--hairline);border-radius:99px;padding:3px 10px;white-space:nowrap}
.storepill .dot{width:6px;height:6px;border-radius:50%;background:var(--good);flex:none}
.storepill[data-state="local"] .dot,
.storepill[data-state="offline"] .dot,
.storepill[data-state="queued"] .dot{background:var(--warn)}
.storepill[data-state="preview"] .dot{background:var(--m22)}
.storepill[data-state="sync"] .dot{background:var(--m23)}

nav.tabs{background:var(--surface);border-bottom:1px solid var(--hairline);overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
nav.tabs::-webkit-scrollbar{display:none}
nav.tabs .wrapt{display:flex;gap:2px;max-width:1180px;margin:0 auto;padding-inline:var(--s4);width:max-content;min-width:100%}
.tab{appearance:none;background:none;border:0;border-bottom:2px solid transparent;margin-bottom:-1px;padding:11px 12px;font-size:13px;font-weight:600;color:var(--ink-3);cursor:pointer;white-space:nowrap}
.tab:hover{color:var(--ink-2)}
.tab[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--ink)}

main{padding-block:var(--s4) 64px;padding-bottom:calc(64px + env(safe-area-inset-bottom))}

/* ----------------------------------------------------------- controls --- */
.fld{display:flex;flex-direction:column;gap:var(--s1);min-width:0}
.fld.span2{grid-column:span 2}
.fld > label,.lbl{font-size:11px;font-weight:600;color:var(--ink-3);letter-spacing:.01em}

/* 16px keeps iOS from zooming the page when a field takes focus. */
.ctl{
  width:100%;
  background:var(--surface);
  border:1px solid var(--hairline-2);
  border-radius:var(--r-sm);
  padding:8px 10px;
  font-size:16px;
  min-width:0;
}
.ctl:hover{border-color:var(--ink-3)}
.ctl:focus{border-color:var(--focus)}
input.ctl,select.ctl{height:38px}
textarea.ctl{min-height:56px;resize:vertical}
/* Anything the app filled in rather than something you typed. */
.ctl.autofill{background:var(--m23-soft);border-color:#B4D4E0}
.ctl.autofill:focus{background:var(--surface)}

.seg{display:inline-flex;border:1px solid var(--hairline-2);border-radius:var(--r-sm);overflow:hidden;background:var(--surface)}
.seg button{appearance:none;background:none;border:0;padding:8px 14px;font-size:13px;font-weight:600;color:var(--ink-2);cursor:pointer;white-space:nowrap}
.seg button + button{border-left:1px solid var(--hairline-2)}
.seg button[aria-pressed="true"]{background:var(--ink);color:var(--surface)}
.seg.mach button[aria-pressed="true"][data-m="DT-2200"]{background:var(--m22);color:#fff}
.seg.mach button[aria-pressed="true"][data-m="DT-2300"]{background:var(--m23);color:#fff}

.btn{appearance:none;background:var(--surface);border:1px solid var(--hairline-2);border-radius:var(--r-sm);padding:9px 14px;font-size:13px;font-weight:600;color:var(--ink);cursor:pointer;min-height:38px}
.btn:hover{border-color:var(--ink-3)}
.btn-primary{background:var(--ink);border-color:var(--ink);color:var(--surface)}
.btn-primary:hover{background:#000}
.btn-danger{color:var(--bad);border-color:var(--bad)}
.btn-sm{padding:5px 10px;font-size:12.5px;min-height:30px}
.btn:disabled{opacity:.45;cursor:not-allowed}
.linkbtn{appearance:none;background:none;border:0;padding:3px 0 0;font:inherit;font-size:11.5px;font-weight:600;color:var(--focus);cursor:pointer;text-align:left;text-decoration:underline}
.linkbtn:hover{color:var(--ink)}

.filterbar{display:flex;gap:var(--s3);align-items:flex-end;flex-wrap:wrap;background:var(--surface);border:1px solid var(--hairline);border-radius:var(--r);padding:var(--s3);margin-bottom:var(--s4)}

/* ------------------------------------------------------------ banners --- */
.banner{display:flex;gap:var(--s3);align-items:flex-start;flex-wrap:wrap;border:1px solid;border-radius:var(--r);padding:11px var(--s3);margin-bottom:var(--s3);font-size:13px;line-height:1.5}
.banner strong{font-weight:700}
.banner.preview{background:var(--m22-soft);border-color:#DCC3AE;color:var(--ink)}
.banner.warn{background:var(--warn-soft);border-color:#DFCB9E;color:var(--ink)}
.banner.install{background:var(--m23-soft);border-color:#B4D4E0;color:var(--ink)}

/* -------------------------------------------------- month-to-date strip -- */
/* A running tally, not a filtered figure — set apart from everything below. */
.counters{background:var(--surface);border:1px solid var(--hairline-2);border-radius:var(--r);padding:var(--s3) var(--s4) var(--s4);margin-bottom:var(--s4)}
.c-head{display:flex;align-items:baseline;gap:var(--s2);flex-wrap:wrap;margin-bottom:var(--s3);padding-bottom:var(--s2);border-bottom:1px solid var(--hairline)}
.c-dot{width:7px;height:7px;border-radius:50%;background:var(--good);flex:none;align-self:center}
.c-month{font-size:14px;font-weight:700;letter-spacing:-.02em}
.c-day{font-size:11.5px;color:var(--ink-3)}
.c-sync{font-size:11px;color:var(--ink-3)}
.c-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s4) var(--s3)}
.c-item{min-width:0;padding-left:var(--s3);border-left:2px solid var(--hairline)}
.c-item:first-child{border-left-color:var(--m23)}
.c-l{font-size:11px;font-weight:600;color:var(--ink-3)}
.c-v{font-size:27px;font-weight:700;letter-spacing:-.035em;line-height:1.2}
.c-v i{font-style:normal;font-size:13px;font-weight:600;color:var(--ink-2);margin-left:3px;letter-spacing:0}
.c-s{font-size:11.5px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* -------------------------------------------------------------- cards --- */
.card{background:var(--surface);border:1px solid var(--hairline);border-radius:var(--r);padding:var(--s4)}
.card-head{display:flex;align-items:baseline;gap:var(--s3);flex-wrap:wrap;margin-bottom:var(--s3)}
.card-head h2{font-size:15px;font-weight:700}
.card-head h3{font-size:13.5px;font-weight:700}
.card-note{font-size:12.5px;color:var(--ink-3);margin:-4px 0 var(--s3);max-width:78ch;line-height:1.5}
section + section{margin-top:var(--s3)}

.grid{display:grid;gap:var(--s3)}
.g-kpi{grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}
.g-2{grid-template-columns:1fr}
.g-cards{grid-template-columns:1fr}

.kpi{background:var(--surface);border:1px solid var(--hairline);border-radius:var(--r);padding:var(--s3) var(--s4);display:flex;flex-direction:column;min-width:0}
.k-lbl{font-size:11px;font-weight:600;color:var(--ink-3)}
.k-val{font-size:25px;font-weight:700;letter-spacing:-.035em;line-height:1.25;margin-top:1px}
.k-unit{font-size:12.5px;font-weight:600;color:var(--ink-2);margin-left:3px;letter-spacing:0}
.k-sub{font-size:11.5px;color:var(--ink-3);margin-top:2px}

/* ------------------------------------------- the machine comparison ----- */
/* Stacked on a phone; a centre rail once there is width for it. */
.spine{display:grid;grid-template-columns:1fr;gap:0}
.spine-head{display:none}
.swatch{width:9px;height:9px;border-radius:2px;flex:none}
.s-row{display:block;padding:10px 0;border-bottom:1px solid var(--hairline)}
.s-row:last-child{border-bottom:0}
.s-lbl{display:flex;gap:var(--s2);align-items:baseline;flex-wrap:wrap;font-size:12.5px;font-weight:600;color:var(--ink-2);margin-bottom:6px;text-align:left}
.s-lbl .u{font-size:11px;font-weight:500;color:var(--ink-3)}
.s-bar{display:flex;align-items:center;gap:var(--s2);height:22px;min-width:0}
.s-bar.left{justify-content:flex-start;flex-direction:row-reverse}
.s-bar .fill{height:14px;flex:none;min-width:2px;border-radius:2px}
.s-bar .v{font-size:12.5px;font-weight:700;white-space:nowrap;font-variant-numeric:tabular-nums}
.s-win{display:inline-block;font-size:10.5px;font-weight:700;padding:1px 6px;border-radius:3px}

/* -------------------------------------------------------------- tables -- */
.tbl-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-inline:calc(var(--s4) * -1);padding-inline:var(--s4);touch-action:pan-x pan-y}
table{width:100%;border-collapse:collapse;font-size:13px}
th{
  font-size:11px;font-weight:600;color:var(--ink-3);
  text-align:right;padding:6px 10px;vertical-align:bottom;line-height:1.35;
  white-space:normal;min-width:54px;
  border-bottom:1px solid var(--hairline-2);
}
th:first-child{text-align:left;padding-left:0}
td{padding:8px 10px;text-align:right;white-space:nowrap;border-bottom:1px solid var(--hairline)}
td:first-child{text-align:left;padding-left:0}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:var(--surface-2)}
tfoot td{font-weight:700;border-top:1px solid var(--hairline-2);border-bottom:0;padding-top:9px;font-variant-numeric:tabular-nums}
th.sortable{cursor:pointer;user-select:none}
th.sortable:hover{color:var(--ink)}
th[aria-sort]{color:var(--ink)}
td.rem{white-space:normal;min-width:170px;max-width:300px;font-size:12.5px;color:var(--ink-2)}

.mtag{display:inline-flex;align-items:center;gap:6px;font-weight:600;white-space:nowrap}
.pill{display:inline-block;font-size:11px;font-weight:700;padding:2px 8px;border-radius:99px;white-space:nowrap;font-variant-numeric:tabular-nums}
.pill.good{background:var(--good-soft);color:var(--good)}
.pill.warn{background:var(--warn-soft);color:var(--warn)}
.pill.bad{background:var(--bad-soft);color:var(--bad)}
.pill.mute{background:var(--surface-sunk);color:var(--ink-3)}
.lowN{font-size:11px;font-weight:500;color:var(--ink-3)}

/* -------------------------------------------------------------- charts -- */
.chart{position:relative;width:100%;touch-action:pan-x pan-y}
.chart svg{display:block;width:100%;height:auto}
.chart .ax-line{stroke:var(--hairline-2);stroke-width:1;fill:none}
.chart .grid-line{stroke:var(--hairline);stroke-width:1;fill:none}
.chart .ax-txt{fill:var(--ink-3);font-family:var(--font);font-size:10.5px}
.chart .ax-txt.mid{text-anchor:middle}
.chart .ax-txt.end{text-anchor:end}
.chart .dl-txt{fill:var(--ink-2);font-family:var(--font);font-size:10.5px;font-weight:700;font-variant-numeric:tabular-nums}
.chart .cross{stroke:var(--ink-3);stroke-width:1;stroke-dasharray:3 3}

.tip{position:absolute;pointer-events:none;opacity:0;transition:opacity .09s;z-index:20;
  background:var(--surface);border:1px solid var(--hairline-2);border-radius:var(--r-sm);
  padding:8px 10px;font-size:12px;min-width:134px;transform:translate(-50%,-100%)}
.tip .t-t{font-size:11px;font-weight:700;color:var(--ink-3);margin-bottom:4px}
.tip .t-r{display:flex;align-items:center;gap:var(--s3);justify-content:space-between}
.tip .t-r + .t-r{margin-top:3px}
.tip .t-r .lft{display:flex;align-items:center;gap:6px;color:var(--ink-2)}
.tip .t-r .val{font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}

.legend{display:flex;gap:var(--s4);flex-wrap:wrap;align-items:center;margin-bottom:var(--s3)}
.legend .li{display:flex;align-items:center;gap:6px;font-size:12.5px;font-weight:500;color:var(--ink-2)}
.empty-chart{display:flex;align-items:center;justify-content:center;min-height:100px;padding:var(--s4);text-align:center;
  font-size:12.5px;color:var(--ink-3);border:1px dashed var(--hairline-2);border-radius:var(--r-sm)}

/* ------------------------------------------------------------ findings -- */
.ins{display:flex;gap:var(--s3);align-items:stretch;padding:var(--s3) 0;border-bottom:1px solid var(--hairline)}
.ins:first-child{padding-top:0}
.ins:last-child{padding-bottom:0;border-bottom:0}
.ins .rail{width:3px;border-radius:2px;flex:none;background:var(--hairline-2)}
.ins.pos .rail{background:var(--good)}
.ins.neg .rail{background:var(--bad)}
.ins.neu .rail{background:var(--ink-3)}
.ins .body{flex:1;min-width:0}
.ins .h{font-size:13.5px;font-weight:700;margin-bottom:3px;letter-spacing:-.01em}
.ins .d{font-size:12.5px;color:var(--ink-2);max-width:80ch;line-height:1.55}
.ins .d b{font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}

/* ------------------------------------------------- running time panel --- */
.factor{padding:10px 0;border-bottom:1px solid var(--hairline)}
.factor .f-top{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s3)}
.factor .f-val{font-size:15px;font-weight:700}
.factor .f-track{height:5px;background:var(--surface-sunk);border-radius:3px;margin:6px 0 5px;overflow:hidden}
.factor .f-fill{height:100%;border-radius:3px}
.f-foot{display:flex;gap:var(--s5);flex-wrap:wrap;padding-top:var(--s3)}
.f-foot .num{font-size:14px;font-weight:600}

/* ---------------------------------------------------------------- form -- */
.formgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(136px,1fr));gap:var(--s3)}
.blockcard{border:1px solid var(--hairline-2);border-radius:var(--r-sm);padding:var(--s3);background:var(--surface-2)}
.blockcard + .blockcard{margin-top:var(--s2)}
.bc-head{display:flex;align-items:center;gap:var(--s2);margin-bottom:var(--s3)}
.bc-head .n{font-size:11.5px;font-weight:700;color:var(--ink-2);letter-spacing:.02em}

.dtrow,.wirerow{display:grid;grid-template-columns:1fr 1fr;gap:var(--s2);align-items:end}
.dtrow + .dtrow,.wirerow + .wirerow{margin-top:var(--s3);padding-top:var(--s3);border-top:1px dashed var(--hairline-2)}
.dtrow .fld:nth-child(3){grid-column:span 2}
.wirerow .fld:first-child{grid-column:span 2}

/* The live totals under the form. */
.derived{display:grid;grid-template-columns:repeat(auto-fit,minmax(116px,1fr));gap:0 var(--s5);
  background:var(--surface-sunk);border-radius:var(--r-sm);padding:var(--s2) var(--s3) var(--s3);margin-top:var(--s4)}
.derived .d-i{padding:6px 0;border-bottom:1px solid var(--hairline)}
.derived .dl{font-size:10.5px;font-weight:600;color:var(--ink-3)}
.derived .dv{font-size:15px;font-weight:700;letter-spacing:-.02em}
.derived .dv small{font-size:11px;font-weight:500;color:var(--ink-2)}
.derived .d-i.bad .dv{color:var(--bad)}

.form-actions{display:flex;gap:var(--s2);align-items:center;flex-wrap:wrap;margin-top:var(--s4);padding-top:var(--s3);border-top:1px solid var(--hairline)}
.form-msg{font-size:12.5px;color:var(--ink-3)}
.form-msg.err{color:var(--bad)}
.form-msg.ok{color:var(--good)}
.hint{font-size:11.5px;color:var(--ink-3);margin-top:2px}
.warnlist{display:flex;flex-direction:column;gap:6px;margin-top:var(--s3)}
.warnlist .w{display:flex;gap:var(--s2);align-items:flex-start;font-size:12.5px;line-height:1.5}
.warnlist .w .pill{margin-top:1px;flex:none}

/* ---------------------------------------------------------- roller sets -- */
.rocard{display:flex;flex-direction:column;gap:6px;border:1px solid var(--hairline-2);border-radius:var(--r);padding:var(--s3);background:var(--surface-2)}
.rocard.done{background:var(--surface-sunk)}
.ro-top{display:flex;align-items:center;gap:var(--s2)}
.ro-id{font-size:14px;font-weight:700;letter-spacing:-.01em}
.ro-top .pill{margin-left:auto}
.ro-sub{font-size:11.5px;color:var(--ink-3);margin-top:-4px}
.ro-meter{font-size:11.5px;color:var(--ink-2)}
.track{height:6px;border-radius:3px;background:var(--hairline);overflow:hidden}
.track .fill{height:100%;border-radius:3px}
.ro-facts{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;padding-top:var(--s2);border-top:1px solid var(--hairline)}
.ro-facts div{font-size:10px;font-weight:600;color:var(--ink-3);line-height:1.35}
.ro-facts b{display:block;font-size:15px;font-weight:700;color:var(--ink);letter-spacing:-.025em;font-variant-numeric:tabular-nums}
.ro-dates{font-size:11.5px;color:var(--ink-3)}
.ro-rem{font-size:12px;color:var(--ink-2);padding-left:var(--s2);border-left:2px solid var(--hairline-2);line-height:1.5}
.rocard .btn{align-self:flex-start;margin-top:2px}

/* --------------------------------------------------------------- login -- */
.loginwrap{display:flex;justify-content:center;padding-block:8vh var(--s5)}
.loginbox{width:100%;max-width:360px}
.loginbox h2{font-size:17px;font-weight:700}

/* -------------------------------------------------------- empty states -- */
.emptystate{text-align:center;padding:var(--s6) var(--s4);color:var(--ink-2)}
.emptystate h3{font-size:15px;font-weight:700;margin-bottom:6px}
.emptystate p{font-size:13px;color:var(--ink-3);max-width:52ch;margin:0 auto var(--s4)}
.specrow{display:flex;gap:var(--s4);flex-wrap:wrap;font-size:11.5px;color:var(--ink-3);margin-top:2px}

/* ====================== wider screens opt in ============================ */
@media (min-width:620px){
  .c-grid{grid-template-columns:repeat(4,1fr)}
  .g-cards{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
}

@media (min-width:760px){
  .wrap,nav.tabs .wrapt{padding-inline:var(--s5)}
  .brand h1{font-size:16px}
  .brand .sub{display:inline}
  .card{padding:var(--s5)}
  .tbl-scroll{margin-inline:calc(var(--s5) * -1);padding-inline:var(--s5)}
  .g-2{grid-template-columns:repeat(auto-fit,minmax(330px,1fr))}

  /* the comparison folds out across a centre rail */
  .spine{grid-template-columns:1fr 168px 1fr;align-items:center;gap:4px var(--s3)}
  .spine-head{display:contents}
  .spine-head .mh{display:flex;align-items:center;gap:var(--s2);padding-bottom:var(--s2);margin-bottom:var(--s1);border-bottom:1px solid var(--hairline)}
  .spine-head .mh.left{justify-content:flex-end;text-align:right}
  .spine-head .mh .nm{font-size:14px;font-weight:700;letter-spacing:-.02em}
  .spine-head .mh .sp{font-size:11px;color:var(--ink-3)}
  .spine-head .mid{padding-bottom:var(--s2);margin-bottom:var(--s1);border-bottom:1px solid var(--hairline)}
  .s-row{display:contents}
  .s-lbl{display:block;text-align:center;font-size:11.5px;margin-bottom:0;padding-inline:2px}
  .s-lbl .u{display:block;font-size:10.5px}
  .s-bar{height:26px}
  .s-bar.left{justify-content:flex-end;flex-direction:row}
  .s-bar .fill{height:15px}

  .dtrow{grid-template-columns:150px 96px 1fr auto}
  .dtrow .fld:nth-child(3){grid-column:auto}
  .wirerow{grid-template-columns:1.2fr 1fr 1fr 1fr auto}
  .wirerow .fld:first-child{grid-column:auto}
  .wirerow + .wirerow{border-top:0;padding-top:0;margin-top:var(--s2)}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* ===========================================================================
   MOBILE
   Measured at 375px and fixed against what was actually wrong there.
   =========================================================================== */

/* --- tabs ---------------------------------------------------------------
   Nine tabs run well past a phone screen, so they carry a short label at
   narrow widths and the bar sticks to the top: a 3,000px form should not mean
   scrolling all the way back up to change tab. */
.tab .t-short{display:inline}
.tab .t-long{display:none}
nav.tabs{position:sticky;top:0;z-index:30}

/* --- tables -------------------------------------------------------------
   The widest table here is fourteen columns, near three screens across. The
   first column is pinned so the row you are reading stays identified while
   the rest scrolls under it. */
.tbl-scroll{position:relative;scroll-padding-left:0}
.tbl-scroll th:first-child,
.tbl-scroll td:first-child{
  position:sticky;left:0;z-index:2;
  background:var(--surface);
  padding-right:12px;
  box-shadow:1px 0 0 var(--hairline);
}
.tbl-scroll tbody tr:hover td:first-child{background:var(--surface-2)}
.tbl-scroll tfoot td:first-child{background:var(--surface)}
/* Card interiors are not white, so the pinned cell has to match them. */
.card .tbl-scroll th:first-child,
.card .tbl-scroll td:first-child{background:var(--surface)}

/* --- touch targets ------------------------------------------------------
   A finger needs more than a mouse pointer. Only applied where the pointer
   really is coarse, so desktop density is untouched. */
@media (pointer:coarse){
  .btn{min-height:44px;padding:11px 16px}
  .btn-sm{min-height:36px;padding:8px 12px}
  .tab{padding:13px 14px}
  .seg button{padding:11px 16px}
  input.ctl,select.ctl{height:44px}
  .linkbtn{padding:8px 0}
  td .btn-sm{min-height:34px}
}

/* --- charts -------------------------------------------------------------
   Charts now draw at their container's true pixel width, so this only needs
   to give them room to breathe. */
.chart{margin-inline:-2px}
.legend{gap:var(--s3);font-size:12px}

@media (min-width:760px){
  .tab .t-short{display:none}
  .tab .t-long{display:inline}
}

/* The masthead scrolls away; the tabs stay. */
@media (min-width:760px){
  nav.tabs{position:static}
}