@font-face {
  font-family: "Schibsted Grotesk";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("/fonts/schibsted-grotesk-latin-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Schibsted Grotesk";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("/fonts/schibsted-grotesk-latin-ext-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/ibm-plex-mono-latin-ext-400-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/ibm-plex-mono-latin-ext-500-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Matchwright demo: a month-end close for finance people.
   Concept: a reconciliation statement. The page answers "does September tie out?" and shows the
   bridge from sales to bank, line by line. Ink is structure and money, marker means it ties,
   correction red means an open difference. Brand tokens from rmak.id.lv. */
:root {
  color-scheme: light;
  --paper: #EEF3F7;
  --sheet: #FFFFFF;
  --fg: #13284A;
  --ink: #1C3D6E;
  --ink-hover: #14305A;
  --fg-2: #4A5D75;
  --fg-3: #5D7188;           /* only on white */
  --rule: #C5D2DE;
  --rule-soft: #DDE5ED;
  --row: #F5F8FB;
  --ink-tint: #E2E9F1;
  --track: #EEF2F7;
  --marker: #F2C230;
  --marker-wash: #FBE7A6;
  --bad: #B8392A;
  --bad-ink: #962C20;
  --bad-wash: #F8E3DF;
  --deduct: #6F87A8;
  --pending: #A9BCD3;
  --focus: #2E6BC6;
  --scrim: rgba(16, 33, 61, 0.36);

  --font: "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --night: #10213D;
  --gutter: clamp(16px, 0.5rem + 2.4vw, 40px);
  /* radius scale: sharp actions (brand), soft containers */
  --r-btn: 0;
  --r-tag: 4px;
  --r-ctl: 8px;
  --r-sheet: 16px;
  /* layered, ink-tinted shadows */
  --shadow-sm: 0 1px 2px rgba(19, 40, 74, 0.05), 0 1px 3px rgba(19, 40, 74, 0.06);
  --shadow-md: 0 4px 8px rgba(19, 40, 74, 0.06), 0 2px 4px rgba(19, 40, 74, 0.05);
  --shadow-lg: 0 24px 48px -24px rgba(19, 40, 74, 0.28), 0 2px 6px rgba(19, 40, 74, 0.04);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-ui: cubic-bezier(0.25, 1, 0.5, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 130px; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--fg);
  font: 400 15px/1.5 var(--font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, p, ul, ol, dl, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button { font: inherit; color: inherit; }
a { color: var(--ink); }
code { font-family: var(--mono); font-size: 0.86em; background: var(--ink-tint); padding: 0.05em 0.35em; border-radius: 3px; }
.mono { font-family: var(--mono); font-size: 13px; letter-spacing: 0; }
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
th.num, .num .sub { font-variant-numeric: normal; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 3px; }
[hidden] { display: none !important; }

.wrap { max-width: 1240px; margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.skip { position: absolute; left: 12px; top: -48px; z-index: 50; background: var(--ink); color: #fff; padding: 8px 12px; text-decoration: none; }
.skip:focus { top: 12px; }

/* ---------- header ---------- */
.top { position: sticky; top: 0; z-index: 20; background: rgba(238, 243, 247, 0.94); border-bottom: 1px solid var(--rule); }
@supports (backdrop-filter: blur(8px)) { .top { background: rgba(238, 243, 247, 0.82); backdrop-filter: saturate(1.4) blur(10px); } }
.top-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-top: 14px; padding-bottom: 10px; }
.brand { display: flex; align-items: center; gap: 18px; min-width: 0; }
.brand-link { display: flex; color: inherit; text-decoration: none; }
.brand-logo { height: 26px; width: auto; display: block; }
.mw-band { fill: var(--marker); }
.mw-line { fill: none; stroke: var(--ink); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }
.mw-text { fill: var(--ink); }
.ws { display: flex; flex-direction: column; line-height: 1.25; padding-left: 18px; border-left: 1px solid var(--rule); min-width: 0; }
.ws-name { font-weight: 650; font-size: 14.5px; }
.ws-sub { font-size: 13px; color: var(--fg-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.top-meta { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.period { font-size: 13.5px; color: var(--fg-2); text-align: right; line-height: 1.3; }
.period b { color: var(--fg); font-weight: 650; display: block; font-size: 14.5px; }
.demo-chip { font-size: 12.5px; font-weight: 600; color: var(--ink); background: var(--marker-wash); padding: 3px 9px; border-radius: 99px; white-space: nowrap; }

.tabs { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; margin-bottom: -1px; }
.tabs::-webkit-scrollbar { display: none; }
.tab {
  appearance: none; border: 0; background: none; cursor: pointer; white-space: nowrap;
  padding: 10px 14px 12px; font-size: 15px; font-weight: 500; color: var(--fg-2);
  border-bottom: 2.5px solid transparent; display: inline-flex; align-items: center; gap: 8px;
}
.tab:hover { color: var(--fg); }
.tab[aria-selected="true"] { color: var(--fg); font-weight: 650; border-bottom-color: var(--ink); }
.count { min-width: 22px; padding: 1px 7px; border-radius: 99px; background: var(--bad); color: #fff; font-size: 12px; font-weight: 650; text-align: center; font-variant-numeric: tabular-nums; }

/* ---------- buttons & controls ---------- */
.btn {
  appearance: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 40px; padding: 8px 16px; border-radius: var(--r-btn); border: 1.5px solid transparent;
  font-size: 14.5px; font-weight: 650; text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: transform 200ms var(--ease-ui), box-shadow 200ms var(--ease-ui), background-color 200ms var(--ease-ui);
}
.btn:active { transform: translateY(0) scale(0.98); transition-duration: 100ms; }
.btn-primary { background: var(--ink); color: #fff; }
.btn-primary:hover { background: var(--ink-hover); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn-quiet { background: transparent; color: var(--ink); border-color: var(--rule); }
.btn-quiet:hover { background: var(--ink-tint); border-color: var(--ink-tint); }
.btn-cta { min-height: 36px; padding: 6px 14px; font-size: 14px; }
.linkbtn { appearance: none; background: none; border: 0; padding: 0; cursor: pointer; color: var(--ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.linkbtn:hover { text-decoration-thickness: 2px; }

.filters { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-bottom: 16px; }
.seg { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; background: var(--sheet); border: 1px solid var(--rule-soft); border-radius: var(--r-ctl); box-shadow: var(--shadow-sm); }
.seg button { appearance: none; border: 0; background: none; cursor: pointer; padding: 6px 12px; min-height: 32px; border-radius: var(--r-tag); transition: background-color 150ms var(--ease-ui); font-size: 14px; font-weight: 500; color: var(--fg-2); white-space: nowrap; }
.seg button:hover { color: var(--fg); background: var(--row); }
.seg button[aria-pressed="true"] { background: var(--ink); color: #fff; font-weight: 600; }
.seg button .n { font-variant-numeric: tabular-nums; opacity: 0.8; margin-left: 4px; font-weight: 500; }
.check { display: inline-flex; align-items: center; gap: 9px; font-size: 14px; color: var(--fg-2); cursor: pointer; min-height: 40px; }
.check input { width: 18px; height: 18px; margin: 0; accent-color: var(--ink); }

/* ---------- layout ---------- */
main { padding-top: 32px; padding-bottom: 64px; }
.view:focus { outline: none; }
.view-head { margin-bottom: 24px; max-width: 760px; }
.view-head h1 { font-size: clamp(28px, 1.2vw + 20px, 40px); line-height: 1.1; font-weight: 800; letter-spacing: -0.035em; }
.view-head .lede { margin-top: 10px; }
.lede { font-size: 16.5px; line-height: 1.55; color: var(--fg-2); max-width: 64ch; }

.sheet { background: var(--sheet); border: 1px solid var(--rule-soft); border-radius: var(--r-sheet); padding: 32px; margin-bottom: 24px; box-shadow: var(--shadow-sm); }
.sheet.flush { padding: 0; overflow: hidden; }
.sec-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 16px; flex-wrap: wrap; }
.sec-head.pad { padding: 24px 32px 0; margin-bottom: 16px; }
.sec-head h2, .bridge-head h2 { font-size: 20px; font-weight: 750; letter-spacing: -0.01em; line-height: 1.3; }
.sec-head p, .bridge-head p { color: var(--fg-3); font-size: 14px; margin-top: 3px; max-width: 70ch; }
.scroll { overflow-x: auto; }

/* ---------- hero: the answer + sign-off ---------- */
.hero { padding: 48px 48px 32px; box-shadow: var(--shadow-lg); }
.hero-top { display: grid; grid-template-columns: minmax(0, 1fr) 336px; gap: 48px; align-items: start; padding-bottom: 40px; border-bottom: 1px solid var(--rule-soft); }
.hero h1 { font-size: clamp(32px, 2.6vw + 12px, 52px); line-height: 1.04; font-weight: 800; letter-spacing: -0.042em; max-width: 16ch; text-wrap: balance; }
.hero .lede { margin-top: 16px; }
.lede .fig { color: var(--fg); font-weight: 650; white-space: nowrap; }

.signoff { background: var(--night); color: #fff; border-radius: 12px; padding: 24px; }
.so-state { display: flex; align-items: center; gap: 10px; font-weight: 650; font-size: 14.5px; color: #DCE5F0; }
.so-amt { margin-top: 16px; font-size: 40px; font-weight: 800; letter-spacing: -0.04em; line-height: 1; }
.so-sub { margin-top: 8px; font-size: 14px; color: #B9C7D8; }
.signoff .btn { margin-top: 24px; width: 100%; background: #fff; color: var(--night); }
.signoff .btn:hover { background: var(--marker); box-shadow: none; }
.signoff.done { background: var(--marker); color: var(--night); }
.signoff.done .so-state { color: var(--night); }
.signoff.done .so-amt { font-size: 28px; letter-spacing: -0.03em; }
.signoff.done .so-sub { color: var(--night); }
.signoff.done .btn { background: var(--night); color: #fff; }
.signoff.done .btn:hover { background: var(--ink-hover); }

/* status marks */
.mk { flex: none; display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 4px; }
.mk svg { width: 12px; height: 12px; display: block; }
.mk-ok { background: var(--marker); color: var(--ink); }
.mk-bad { background: var(--bad); color: #fff; border-radius: 50%; }
.mk-wait { background: var(--ink-tint); color: var(--fg-2); border-radius: 50%; }

/* ---------- the bridge ---------- */
.bridge-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px 24px; flex-wrap: wrap; padding-top: 32px; margin-bottom: 8px; }
.bridge { width: 100%; border-collapse: collapse; }
.bridge th, .bridge td { padding: 12px 0; vertical-align: middle; text-align: left; font-weight: 400; }
.bridge tbody tr + tr > * { border-top: 1px solid var(--rule-soft); }
.bridge .lbl { width: 34%; padding-right: 20px; }
.bridge .lbl b { display: block; font-weight: 650; font-size: 15.5px; line-height: 1.3; }
.bridge .lbl > span { display: block; font-size: 13.5px; color: var(--fg-3); line-height: 1.4; margin-top: 2px; }
.bridge .amt { width: 13%; text-align: right; font-variant-numeric: tabular-nums; font-size: 17px; font-weight: 500; white-space: nowrap; padding-right: 28px; }
.bridge .amt .v { display: inline-block; padding: 2px 0; }
.bridge .barc { width: 35%; }
.bridge .st { width: 18%; padding-left: 24px; font-size: 14px; }
.bridge .st .stl { display: flex; align-items: center; gap: 8px; font-weight: 550; white-space: nowrap; }
.bridge .st .sts { display: block; color: var(--fg-3); font-size: 13px; margin-top: 2px; padding-left: 26px; white-space: nowrap; }
.bridge .st .linkbtn { color: var(--bad-ink); }
.bridge tr.child .lbl { padding-left: 22px; }
.bridge tr.sub .lbl b, .bridge tr.sub .amt, .bridge tr.total .lbl b, .bridge tr.total .amt { font-weight: 700; }
.bridge tr.sub .amt .v { border-top: 1.5px solid var(--fg); }
.bridge tr.total .amt .v { border-top: 1.5px solid var(--fg); border-bottom: 4px double var(--fg); }
.bridge tr.sub > *, .bridge tr.total > * { border-top-color: var(--rule) !important; }
.bridge tr.bad .amt { color: var(--bad-ink); }
.bridge tr.wait .amt { color: var(--fg-2); }

.track { position: relative; height: 16px; background: var(--track); border-radius: 3px; }
.seg-bar { position: absolute; top: 0; bottom: 0; border-radius: 3px; background: var(--ink); transform-origin: left center; }
.seg-bar.deduct { background: var(--deduct); }
.seg-bar.wait { background: var(--pending); }
.seg-bar.bad { background: var(--bad); }
.seg-bar.thin { min-width: 2px; }
.bridge.play .seg-bar { animation: grow 480ms var(--ease-out) both; }
@keyframes grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ---------- tables ---------- */
.tbl { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.tbl th { text-align: left; font-weight: 650; font-size: 13px; color: var(--fg-2); padding: 10px 14px; border-bottom: 1px solid var(--rule); white-space: nowrap; background: var(--sheet); }
.tbl td { padding: 12px 14px; border-bottom: 1px solid var(--rule-soft); vertical-align: top; }
.tbl tbody tr:last-child td { border-bottom: 0; }
.tbl th.num, .tbl td.num { text-align: right; }
.tbl th:first-child, .tbl td:first-child { padding-left: 32px; }
.tbl th:last-child, .tbl td:last-child { padding-right: 32px; }
.sheet:not(.flush) .tbl th:first-child, .sheet:not(.flush) .tbl td:first-child { padding-left: 0; }
.sheet:not(.flush) .tbl th:last-child, .sheet:not(.flush) .tbl td:last-child { padding-right: 0; }
.tbl tr.click { cursor: pointer; }
.tbl tr.click:hover td { background: var(--row); }
.tbl tr.click:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.tbl .strong { font-weight: 650; display: block; }
.tbl .sub { display: block; color: var(--fg-3); font-size: 13px; margin-top: 2px; }
.tbl .dim { color: var(--fg-3); }
.tbl td.bad, .tbl .bad { color: var(--bad-ink); }
.tbl tfoot td { border-top: 1.5px solid var(--fg); border-bottom: 0; font-weight: 700; padding-top: 12px; }
.tbl tfoot td.num > span:not(.sep) { border-bottom: 4px double var(--fg); padding-bottom: 1px; }
.tbl.items td { vertical-align: middle; }
.tbl.items .what { min-width: 280px; }
.tbl.items .amt { font-size: 15.5px; font-weight: 600; }

.pill { display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px 2px 7px; border-radius: 99px; font-size: 13px; font-weight: 600; white-space: nowrap; }
.pill .mk { width: 14px; height: 14px; }
.pill .mk svg { width: 10px; height: 10px; }
.pill.open { background: var(--bad-wash); color: var(--bad-ink); }
.pill.ok { background: var(--marker-wash); color: var(--ink); }
.pill.wait { background: var(--ink-tint); color: var(--fg-2); }

/* provider table */
.prov td { vertical-align: top; }
.prov .salesbar { display: block; height: 4px; margin-top: 7px; border-radius: 2px; background: var(--ink); margin-left: auto; }
.prov .tag { display: inline-block; margin-left: 6px; font-size: 12px; font-weight: 600; color: var(--fg-2); background: var(--ink-tint); padding: 0 6px; border-radius: var(--r-tag); vertical-align: 1px; }

/* empty states */
.empty { padding: 26px 24px; color: var(--fg-2); }
.empty b { color: var(--fg); }

/* ---------- payouts chart ---------- */
.legend { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13.5px; color: var(--fg-2); align-items: center; }
.legend li { display: inline-flex; align-items: center; gap: 7px; }
.legend .sw { width: 12px; height: 12px; border-radius: 3px; background: var(--ink); }
.legend .sw.wait { background: var(--pending); }
.legend .sw.bad { background: var(--bad); }
.chart { position: relative; }
.chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.chart .grid line { stroke: var(--rule-soft); stroke-width: 1; }
.chart .baseline { stroke: var(--rule); stroke-width: 1; }
.chart text { font-family: var(--font); font-size: 12px; fill: var(--fg-3); }
.chart .bar { fill: var(--ink); }
.chart .bar.wait { fill: var(--pending); }
.chart .bar.bad { fill: var(--bad); }
.chart .slot { outline: none; cursor: default; }
.chart .slot .hit { fill: transparent; }
.chart .slot:hover .hit, .chart .slot:focus .hit { fill: var(--row); }
.chart .slot:focus-visible .hit { stroke: var(--focus); stroke-width: 2; }
.chart .dim .bar { opacity: 0.18; }
.tip { position: absolute; z-index: 5; pointer-events: none; min-width: 240px; max-width: 320px; background: var(--night); color: #fff; border-radius: var(--r-ctl); padding: 10px 12px; font-size: 13px; line-height: 1.45; box-shadow: 0 12px 32px -12px rgba(16, 33, 61, 0.5); }
.tip b { display: block; font-size: 13.5px; margin-bottom: 4px; }
.tip .tr { display: grid; grid-template-columns: 12px 1fr auto; gap: 8px; align-items: center; }
.tip .tr .k { width: 10px; height: 3px; border-radius: 2px; background: #fff; }
.tip .tr .k.wait { background: var(--pending); }
.tip .tr .k.bad { background: #F08C7E; }
.tip .tr .v { font-variant-numeric: tabular-nums; font-weight: 650; }
.tip .tr .n { color: #C9D5E3; }
.tip .tot { border-top: 1px solid rgba(255, 255, 255, 0.22); margin-top: 6px; padding-top: 6px; }

/* payouts table */
.payouts td { vertical-align: middle; }
.payouts tr.detail td { background: var(--row); padding-top: 4px; padding-bottom: 16px; }
.payouts tr[aria-expanded="true"] td { background: var(--row); border-bottom-color: transparent; }
.detail-grid { display: flex; flex-wrap: wrap; gap: 6px 28px; font-size: 14px; color: var(--fg-2); }
.detail-grid b { color: var(--fg); font-weight: 600; }
.chev { display: inline-block; width: 8px; height: 8px; border-right: 1.5px solid var(--fg-3); border-bottom: 1.5px solid var(--fg-3); transform: rotate(-45deg); margin-right: 10px; transition: transform 160ms; }
tr[aria-expanded="true"] .chev { transform: rotate(45deg); }

/* ---------- source files ---------- */
.file-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 28px; }
.file-meta { display: grid; grid-template-columns: max-content 1fr; gap: 6px 18px; font-size: 14.5px; }
.file-meta dt { color: var(--fg-2); }
.file-meta dd { margin: 0; font-weight: 500; }
.file-note { margin-top: 14px; font-size: 13.5px; color: var(--fg-3); }
.howto h3 { font-size: 15px; font-weight: 650; margin-bottom: 8px; }
.howto ol { list-style: decimal; padding-left: 20px; font-size: 14px; color: var(--fg-2); }
.howto li + li { margin-top: 5px; }
.howto li::marker { color: var(--fg-3); }
.notice { display: flex; gap: 16px; align-items: flex-start; margin-top: 24px; padding: 16px; background: var(--marker-wash); border-radius: var(--r-ctl); }
.notice p { font-size: 14.5px; }
.notice .linkbtn { margin-top: 6px; display: inline-block; }
.pager { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--fg-2); }
.pager button { appearance: none; width: 36px; height: 36px; border-radius: var(--r-ctl); border: 1px solid var(--rule); background: var(--sheet); cursor: pointer; display: grid; place-items: center; color: var(--ink); }
.pager button:hover:not(:disabled) { background: var(--ink-tint); }
.pager button:disabled { opacity: 0.4; cursor: default; }
.pager svg { width: 14px; height: 14px; }
.tbl.raw { font-family: var(--mono); font-size: 12.5px; }
.tbl.raw th { font-family: var(--mono); font-size: 12px; font-weight: 500; }
.tbl.raw td, .tbl.raw th { padding: 7px 12px; white-space: nowrap; }
.tbl.raw th.new { background: var(--marker-wash); color: var(--ink); }
.tbl.raw .ln { color: var(--fg-3); text-align: right; }
.tbl.raw tr.layout-break td { font-family: var(--font); font-size: 13.5px; background: var(--marker-wash); color: var(--fg); white-space: normal; padding: 10px 24px; }
.tbl.recs td { white-space: nowrap; vertical-align: middle; line-height: 1.4; }
.tbl tr.linked td { background: var(--ink-tint) !important; }
.flow { display: flex; align-items: center; gap: 12px; padding: 14px 24px 0; color: var(--fg-3); font-size: 13px; }
.flow::before, .flow::after { content: ""; flex: 1; height: 1px; background: var(--rule); }

/* ---------- drawer ---------- */
.scrim { position: fixed; inset: 0; background: var(--scrim); z-index: 40; }
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 41; width: min(620px, 100%);
  background: var(--sheet); display: flex; flex-direction: column; box-shadow: -24px 0 60px -30px rgba(16, 33, 61, 0.5);
}
.drawer-head { padding: 22px 28px 18px; border-bottom: 1px solid var(--rule-soft); }
.drawer-head .row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.drawer-head .id { font-family: var(--mono); font-size: 13px; color: var(--fg-3); }
.drawer-head h2 { margin-top: 6px; font-size: 22px; line-height: 1.2; font-weight: 700; letter-spacing: -0.02em; }
.drawer-head .meta { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; margin-top: 10px; font-size: 14px; color: var(--fg-2); }
.xbtn { appearance: none; width: 40px; height: 40px; border-radius: var(--r-ctl); border: 0; background: none; cursor: pointer; display: grid; place-items: center; color: var(--fg-2); }
.xbtn:hover { background: var(--ink-tint); color: var(--fg); }
.xbtn svg { width: 16px; height: 16px; }
.drawer-body { flex: 1; overflow-y: auto; padding: 22px 28px 28px; }
.drawer-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 28px; border-top: 1px solid var(--rule-soft); }
.dr-amt { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 14px 16px; border-radius: 8px; background: var(--row); }
.dr-amt span { color: var(--fg-2); font-size: 14px; }
.dr-amt b { font-size: 24px; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.dr-amt.open b { color: var(--bad-ink); }
.dsec { margin-top: 22px; }
.dsec h3 { font-size: 14.5px; font-weight: 650; margin-bottom: 8px; }
.dsec p { color: var(--fg-2); }
.next { padding: 12px 14px; border-left: 3px solid var(--ink); background: var(--row); border-radius: 0 6px 6px 0; color: var(--fg); }
.compare { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.side { border: 1px solid var(--rule-soft); border-radius: 8px; padding: 12px 14px; }
.side h4 { margin: 0 0 6px; font-size: 13px; font-weight: 600; color: var(--fg-2); }
.side .big { font-size: 20px; font-weight: 650; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.side .big.none { color: var(--fg-3); font-size: 16px; font-weight: 500; }
.side .sm { font-size: 13px; color: var(--fg-3); margin-top: 2px; }
.drawer .tbl th:first-child, .drawer .tbl td:first-child { padding-left: 0; }
.drawer .tbl th:last-child, .drawer .tbl td:last-child { padding-right: 0; }
.drawer .tbl td, .drawer .tbl th { padding: 8px 10px; font-size: 13.5px; }
.evidence { border: 1px solid var(--rule-soft); border-radius: 8px; overflow: hidden; }
.evidence + .evidence { margin-top: 12px; }
.ev-head { display: flex; justify-content: space-between; gap: 12px; padding: 9px 14px; background: var(--row); font-size: 13px; color: var(--fg-2); border-bottom: 1px solid var(--rule-soft); }
.ev-head b { color: var(--fg); font-weight: 600; }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: 3px 16px; padding: 10px 14px; font-size: 12.5px; }
.kv dt { color: var(--fg-3); font-family: var(--mono); }
.kv dd { margin: 0; font-family: var(--mono); word-break: break-all; }
.ev-arrow { padding: 6px 14px; font-size: 12.5px; color: var(--fg-3); border-top: 1px dashed var(--rule); border-bottom: 1px solid var(--rule-soft); background: var(--sheet); }
.kv.rec { background: #FBFCFE; }

/* ---------- footer ---------- */
.foot { border-top: 1px solid var(--rule); padding: 24px 0 40px; font-size: 13.5px; color: var(--fg-2); }
.foot .wrap { display: flex; justify-content: space-between; gap: 12px 40px; flex-wrap: wrap; }
.foot p:first-child { max-width: 82ch; }

/* ---------- responsive ---------- */
@media (max-width: 1080px) {
  .hero-top { grid-template-columns: 1fr; gap: 24px; }
  .signoff { max-width: 460px; }
  .bridge .lbl { width: 38%; }
  .bridge .barc { width: 28%; }
  .bridge .st { width: 22%; padding-left: 18px; }
  .file-card { grid-template-columns: 1fr; gap: 20px; }
}
@media (max-width: 820px) {
  .ws { display: none; }
  .period { display: none; }
  .bridge, .bridge tbody { display: block; }
  .bridge tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "lbl amt" "bar bar" "st st"; gap: 6px 12px; padding: 14px 0; }
  .bridge tbody tr + tr { border-top: 1px solid var(--rule-soft); }
  .bridge tbody tr + tr > * { border-top: 0; }
  .bridge th, .bridge td { padding: 0; width: auto !important; }
  .bridge .lbl { grid-area: lbl; padding-right: 0; }
  .bridge .amt { grid-area: amt; padding-right: 0; align-self: start; }
  .bridge .barc { grid-area: bar; }
  .bridge .st { grid-area: st; padding-left: 0; }
  .bridge .st .stl, .bridge .st .sts { display: inline-flex; padding-left: 0; }
  .bridge .st .sts { margin-left: 10px; }
  .bridge tr.child { padding-left: 16px; }
  .bridge tr.child .lbl { padding-left: 0; }
  .track { height: 10px; }
}
@media (max-width: 600px) {
  body { font-size: 14.5px; }
  .top-row { padding-top: 10px; padding-bottom: 6px; gap: 10px; }
  .top-meta { gap: 8px; }
  .t-long { display: none; }
  .t-short { display: inline; }
  .tab { padding-left: 10px; padding-right: 10px; }
  .brand-logo { height: 22px; }
  .btn-cta { padding: 6px 10px; font-size: 13.5px; }
  .sheet { padding: 24px 16px; border-radius: 12px; }
  .hero { padding: 32px 16px 16px; }
  .hero-top { padding-bottom: 24px; }
  .so-amt { font-size: 34px; }
  .signoff { max-width: none; }
  .sec-head.pad { padding: 24px 16px 0; }
  .tbl th:first-child, .tbl td:first-child { padding-left: 16px; }
  .tbl th:last-child, .tbl td:last-child { padding-right: 16px; }
  .compare { grid-template-columns: 1fr; }
  .drawer-head, .drawer-body, .drawer-foot { padding-left: 18px; padding-right: 18px; }
  .bridge .st .sts { display: none; }
  .flow { padding-left: 16px; padding-right: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .bridge.play .seg-bar { animation: none; }
  .chev, .btn, .seg button { transition: none; }
  .btn-primary:hover { transform: none; }
}
@media print {
  .top { position: static; backdrop-filter: none; }
  .tabs, .btn, .filters, .foot a { display: none !important; }
  .sheet { break-inside: avoid; box-shadow: none; }
}

/* ---------- additions ---------- */
.tbl tbody th, .tbl tfoot th { text-align: left; font-weight: 400; color: var(--fg); font-size: 14.5px; padding: 12px 14px; border-bottom: 1px solid var(--rule-soft); vertical-align: top; background: none; white-space: normal; }
.tbl tfoot th { border-top: 1.5px solid var(--fg); border-bottom: 0; font-weight: 700; }
.sheet:not(.flush) .tbl tbody th:first-child, .sheet:not(.flush) .tbl tfoot th:first-child { padding-left: 0; }
.tbl tbody tr:last-child th { border-bottom: 0; }
.tbl .strongnum { font-weight: 650; }
.tbl.mini { font-size: 14px; max-width: 360px; }
.tbl.mini td { padding: 6px 0; }
.tbl.mini td:first-child { padding-left: 0; color: var(--fg-2); }
.tbl.mini td:last-child { padding-right: 0; }
.tbl.mini tfoot td { color: var(--fg); padding-top: 8px; }
.drawer .tbl.mini td { padding: 6px 0; }
.note-row td { background: var(--row); padding-top: 10px !important; padding-bottom: 10px !important; }
.filter-note { font-size: 14px; color: var(--fg-2); }
.filter-note b { color: var(--fg); }
.filter-note .linkbtn { margin-left: 8px; }
#sf-head .sheet { margin-bottom: 24px; }
.prov .salesbar { max-width: 120px; }
.prov td .sub { white-space: nowrap; }
.prov td .sub.contract { white-space: normal; max-width: 172px; margin-left: auto; }
.prov tbody th { min-width: 120px; }
.prov tbody th .sub { white-space: nowrap; }
.tbl td.mono { white-space: nowrap; }
.tbl .zero { color: var(--fg-3); }
.poid { display: inline-block; max-width: 15ch; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; }
.payouts th, .payouts td { padding-left: 12px; padding-right: 12px; }
.payouts th { white-space: normal; vertical-align: bottom; line-height: 1.3; }
.payouts th.num { max-width: 110px; }
.prov th, .prov td { padding-left: 12px; padding-right: 12px; }
.prov thead th { white-space: normal; vertical-align: bottom; line-height: 1.3; }
.prov thead th.num { max-width: 120px; }
.prov tbody td:nth-child(8), .prov thead th:nth-child(8) { min-width: 172px; }
.dr-amt b { white-space: nowrap; }
@media (max-width: 600px) { .dr-amt b { font-size: 20px; } }

/* ---------- review fixes ---------- */
.sep { font-variant-numeric: normal; }
.nowrap { white-space: nowrap; }
.t-short { display: none; }
.asof-m { display: none; font-size: 13.5px; color: var(--fg-2); margin-bottom: 10px; }
.rowbtn { appearance: none; background: none; border: 0; padding: 0; margin: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.rowbtn:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.tbl .what .rowbtn { display: block; font-weight: 650; }
.datebtn { display: inline-flex; align-items: center; font-variant-numeric: tabular-nums; }
.rowbtn.mono { font-family: var(--mono); font-size: 13px; }
.tbl.raw .rowbtn { color: var(--fg-3); font-family: var(--mono); }
.rowbtn[aria-pressed="true"] { font-weight: 650; color: var(--ink); }
.datebtn[aria-expanded="true"] .chev { transform: rotate(45deg); }
.bankdate { color: var(--fg-2); }
.seg-badge { margin-left: 8px; font-size: 11.5px; font-weight: 600; padding: 1px 6px; border-radius: var(--r-tag); background: var(--marker-wash); color: var(--ink); }
.seg button[aria-pressed="true"] .seg-badge { background: var(--marker); color: var(--night); }
.linkbtn.small { display: block; margin-top: 6px; font-size: 13px; font-weight: 600; text-align: left; }
.notice.first { margin-top: 0; margin-bottom: 24px; }
.dr-hint { margin-top: 6px; font-size: 13px; color: var(--fg-3); }
.so-sub + .so-sub { margin-top: 4px; }
/* scroll hint: a soft shadow appears on the edge that still has content */
.scroll {
  background:
    linear-gradient(to right, var(--sheet) 30%, rgba(255, 255, 255, 0)) left center / 40px 100% no-repeat local,
    linear-gradient(to left, var(--sheet) 30%, rgba(255, 255, 255, 0)) right center / 40px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgba(19, 40, 74, 0.2), rgba(19, 40, 74, 0)) left center / 14px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(19, 40, 74, 0.2), rgba(19, 40, 74, 0)) right center / 14px 100% no-repeat scroll;
}
@media (max-width: 820px) {
  .asof-m { display: block; }
}
@media (max-width: 600px) {
  .t-long { display: none; }
  .t-short { display: inline; }
  .demo-chip { font-size: 12px; padding: 2px 7px; }
  /* open items read as stacked rows on phones */
  .tbl.items thead { display: none; }
  .tbl.items, .tbl.items tbody { display: block; }
  .tbl.items tr { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding: 14px 16px; border-bottom: 1px solid var(--rule-soft); }
  .tbl.items tbody tr:last-child { border-bottom: 0; }
  .tbl.items td { display: block; padding: 0 !important; border: 0; }
  .tbl.items td.what { flex-basis: 100%; min-width: 0; }
  .tbl.items td.c-line, .tbl.items td.c-prov, .tbl.items td.c-ref { font-size: 13px; color: var(--fg-2); }
  .tbl.items td.c-opened { display: none; }
  .tbl.items td.amt { margin-left: auto; }
  .tbl.items td.c-status { flex-basis: 100%; }
  .sheet:not(.flush) .tbl.items tr { padding-left: 0; padding-right: 0; }
  .tbl.items .note-row td, .tbl.items tr:has(.empty) td { flex-basis: 100%; }
}
.prov .linkbtn.small { white-space: nowrap; }
.prov td.ratecell { white-space: normal; }
.howto li::marker { font-variant-numeric: proportional-nums; }

/* ======================================================================
   Live: what is added on top of the demo's design system
   ====================================================================== */

/* setup hero */
.setup .hero-top { padding-bottom: 32px; }
.signoff.sample .so-state { color: #fff; font-size: 16px; }
.signoff.sample .so-sub { margin-top: 10px; line-height: 1.5; }
.signoff.sample .btn { margin-top: 20px; }

/* drop zone */
.drop {
  position: relative; margin-top: 32px; padding: 28px 24px; text-align: center;
  border: 1.5px dashed var(--rule); border-radius: 12px; background: var(--row);
  transition: background-color 150ms var(--ease-ui), border-color 150ms var(--ease-ui);
}
.drop.over { background: var(--marker-wash); border-color: var(--ink); }
.drop input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.drop-main { font-size: 16.5px; }
.drop-main b { font-weight: 700; }
.drop-main label { font-size: inherit; }
.drop-sub { margin-top: 4px; font-size: 13.5px; color: var(--fg-3); }
body.dragging .drop { background: var(--marker-wash); border-color: var(--ink); }

/* three sources */
.sources { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 16px; }
.src { border: 1px solid var(--rule-soft); border-radius: 12px; padding: 18px 18px 16px; display: flex; flex-direction: column; min-width: 0; }
.src h2 { display: flex; align-items: center; gap: 10px; font-size: 16.5px; font-weight: 750; letter-spacing: -0.01em; }
.src > p { margin-top: 6px; font-size: 13.5px; color: var(--fg-3); line-height: 1.45; }
.src em { font-style: normal; color: var(--fg-2); font-weight: 600; }
.step { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--ink-tint); color: var(--ink); font-size: 13px; font-weight: 750; flex: none; }
.src.has .step { background: var(--marker); }
.src-btn { margin-top: auto; align-self: flex-start; }
.chips { display: flex; flex-direction: column; gap: 8px; margin: 12px 0; }
.chips:empty { display: none; }
.chips.unknown { margin-top: 16px; }
.chip { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 8px; align-items: start; padding: 9px 6px 9px 12px; border-radius: 8px; background: var(--row); border: 1px solid var(--rule-soft); }
.chip.bad { background: var(--bad-wash); border-color: transparent; }
.chip-name { font-weight: 600; font-size: 14px; overflow-wrap: anywhere; line-height: 1.35; }
.chip-meta { grid-column: 1; font-size: 12.5px; color: var(--fg-2); line-height: 1.4; }
.chip.bad .chip-meta { color: var(--bad-ink); }
.chip-x { grid-column: 2; grid-row: 1 / span 3; appearance: none; width: 32px; height: 32px; border: 0; border-radius: var(--r-ctl); background: none; color: var(--fg-3); cursor: pointer; display: grid; place-items: center; }
.chip-x:hover { background: var(--ink-tint); color: var(--fg); }
.chip-x svg { width: 12px; height: 12px; }
.chip-role { grid-column: 1; margin-top: 4px; font-size: 12.5px; color: var(--fg-2); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.chip-role select { font: inherit; font-size: 12.5px; padding: 2px 4px; border: 1px solid var(--rule); border-radius: var(--r-tag); background: var(--sheet); color: var(--fg); }

/* settings */
.settings { display: flex; flex-wrap: wrap; gap: 16px 32px; align-items: flex-end; margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--rule-soft); }
.field { display: flex; flex-direction: column; gap: 6px; border: 0; padding: 0; margin: 0; min-width: 0; }
.field-l { font-size: 13px; font-weight: 600; color: var(--fg-2); padding: 0; }
.field select, .field input, .fform input, .fform select {
  font: inherit; font-size: 14.5px; color: var(--fg); background: var(--sheet); min-height: 40px;
  border: 1px solid var(--rule); border-radius: var(--r-ctl); padding: 7px 10px; max-width: 100%;
}
.field select { min-width: 220px; }
.field select:focus-visible, .field input:focus-visible, .fform input:focus-visible, .fform select:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; border-color: var(--focus); }
.contract-in { display: inline-flex; align-items: center; gap: 8px; font-size: 14.5px; color: var(--fg-2); }
.contract-in input { width: 72px; text-align: right; font-variant-numeric: tabular-nums; }
.run-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 24px; }
.btn-run { min-height: 48px; padding: 10px 28px; font-size: 16px; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none !important; box-shadow: none !important; }
.run-hint { font-size: 14px; color: var(--fg-2); }
.run-hint.bad { color: var(--bad-ink); }

/* how it works */
.how-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.how h2 { font-size: 16.5px; font-weight: 750; letter-spacing: -0.01em; }
.how p { margin-top: 6px; font-size: 14px; color: var(--fg-2); }

/* overview additions */
.coverage { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 20px; font-size: 14px; color: var(--fg-2); }
.coverage li { display: inline-flex; align-items: center; gap: 8px; }
.coverage b { color: var(--fg); font-weight: 650; }
.bridge-head + .bridge + .bridge-head { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--rule-soft); }
.notice ul { display: flex; flex-direction: column; gap: 6px; font-size: 14.5px; }
.notice ul li { padding-left: 14px; position: relative; }
.notice ul li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 5px; height: 5px; border-radius: 50%; background: var(--ink); }
.fees-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; }
.mini-h { font-size: 14.5px; font-weight: 650; margin-bottom: 4px; }

/* three-way trace */
.trace td { vertical-align: middle; white-space: nowrap; }
.hop { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.trace td.order { font-weight: 600; }
.trace .arrow { color: var(--fg-3); }

/* fetch form */
.fform { display: flex; flex-direction: column; gap: 16px; }
.fform label { display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; font-weight: 600; color: var(--fg-2); }
.fform .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.fform .help { font-size: 13px; font-weight: 400; color: var(--fg-3); }
.fform input[type="password"], .fform input.key { font-family: var(--mono); font-size: 13.5px; }
.progress { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.progress li { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.progress li b { font-weight: 600; min-width: 132px; }
.progress li span { color: var(--fg-2); }
.spin { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--ink-tint); border-top-color: var(--ink); animation: spin 0.8s linear infinite; flex: none; }
@keyframes spin { to { transform: rotate(360deg); } }
.form-err { padding: 12px 14px; border-radius: var(--r-ctl); background: var(--bad-wash); color: var(--bad-ink); font-size: 14px; }
.form-ok { padding: 12px 14px; border-radius: var(--r-ctl); background: var(--marker-wash); font-size: 14px; }

/* toast */
.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 60; background: var(--night); color: #fff; padding: 10px 16px; border-radius: var(--r-ctl); font-size: 14px; box-shadow: var(--shadow-lg); max-width: calc(100% - 32px); }

/* raw file rows */
.tbl.raw tr.hl td { background: var(--marker-wash); }
.tbl.raw tr.rowerr td { background: var(--bad-wash); }
.file-errs { margin-top: 12px; font-size: 13.5px; color: var(--bad-ink); display: flex; flex-direction: column; gap: 3px; }
.file-warns { margin-top: 12px; font-size: 13.5px; color: var(--fg-2); display: flex; flex-direction: column; gap: 3px; }

@media (max-width: 1080px) {
  .signoff.sample { max-width: none; }
}
@media (max-width: 900px) {
  .sources, .how-grid { grid-template-columns: 1fr; }
  .how-grid { gap: 20px; }
  .fees-grid { grid-template-columns: 1fr; gap: 24px; }
}
@media (max-width: 600px) {
  .drop { padding: 22px 14px; }
  .settings { gap: 16px; }
  .field, .field select { width: 100%; min-width: 0; }
  .fform .row2 { grid-template-columns: 1fr; }
  .btn-run { width: 100%; }
}
@media (max-width: 600px) {
  /* the trace reads as one card per order on phones */
  .tbl.trace thead { display: none; }
  .tbl.trace, .tbl.trace tbody { display: block; }
  .tbl.trace tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; padding: 14px 16px; border-bottom: 1px solid var(--rule-soft); }
  .tbl.trace tbody tr:last-child { border-bottom: 0; }
  .tbl.trace td { display: block; padding: 0 !important; border: 0; white-space: normal; text-align: left; }
  .tbl.trace td.order { grid-column: 1; }
  .tbl.trace td.c-status { grid-column: 2; grid-row: 1; justify-self: end; }
  .tbl.trace td.c-led { grid-column: 1 / -1; }
  .tbl.trace td.c-hop { grid-column: 1 / -1; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
  .tbl.trace td[data-label]::before { content: attr(data-label); flex: none; width: 64px; font-size: 12.5px; color: var(--fg-3); }
  .tbl.trace td.c-led::before { display: inline-block; }
  .tbl.trace td .sub { display: inline; margin-left: 6px; }
  .tbl.trace td.order .sub { display: block; margin-left: 0; }
}
@media (max-width: 480px) {
  .top .demo-chip { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .spin { animation-duration: 2.4s; }
}