/* ============================================================
   LatePaid — "Desk"

   A market where distressed paper gets priced and placed. Cream
   ground, deep green ink, every figure in mono.

   Shape follows a soft modern SaaS language: nothing carries a border,
   depth comes from a hairline shadow ring plus two soft offset layers,
   corners are generous, controls are capsules.

   The logo is the colour system. "late" is red and "paid" is green, and
   those are exactly the two meanings a receivables market reads without
   thinking: red is money at risk, green is money in. So the brand does
   not sit beside the meaning colours, it IS them. The green tile carries
   identity and primary actions, because every primary action here moves
   a debt from late towards paid. Red is never a brand fill; it only
   ever marks trouble, the way it does in the wordmark.

   Type follows the logo too: Unbounded (the wordmark's face) for h1/h2
   and display lines, Plus Jakarta Sans for reading, DM Mono for figures.
   ============================================================ */

/* Fonts are self-hosted: /fonts/fonts.css, linked from each page's <head>
   with the two most-used files preloaded. Nothing calls a third party to
   draw text — which matters most on the debtor portal. */

:root {
  /* ---------------- GROUND ----------------
     Warm cream paper, ink pulled from the tile's green. */
  --void:      #FFFFFF;   /* inputs and anything that should sit forward */
  --paper:     #F6F4EE;
  --paper-2:   #EDEAE1;
  --paper-3:   #E2DED3;
  --card:      #FFFEFA;
  --raised:    #EDEAE1;

  /* Type ramp — green-black down to a sage grey */
  --ink:       #10251B;
  --ink-2:     #3E5247;
  --ink-3:     #56675E;   /* 5.4:1 on paper, 4.9:1 on paper-2 — small print stays readable */
  --ink-4:     #7F8E86;   /* 3.1:1 — labels, placeholders, never body copy */

  /* Structure */
  --rule:      #D7D3C7;
  --rule-soft: #E7E3D9;
  --rule-hot:  #C3BCAD;

  /* ------------------------------------------------------------------
     BRAND = MEANING, ON PURPOSE.

     --accent is the logo tile: identity, primary buttons, selection.
     --pos is the same green, because "paid" and "money in" are one idea.
     --neg is the wordmark's "late" red: at risk, broken, lapsed.
     Amber (waiting) and blue (in flight) stay as they were — they are
     states the logo does not speak to, so they stay out of the brand.
     ------------------------------------------------------------------ */

  /* 1. Brand — the tile */
  --accent:       #177245;
  --accent-hover: #115B37;
  --accent-dim:   rgba(23,114,69,.08);
  --on-accent:    #FFFFFF;
  --mint:         #4CC38A;   /* the tile's letters; highlights on green and dark */
  --mint-dim:     rgba(76,195,138,.18);

  /* 2. Meaning */
  --pos:        #177245;   /* recovered · paid · met · kept · verified */
  --pos-dim:    rgba(23,114,69,.09);
  --neg:        #C8401F;   /* disputed · breached · broken · recalled · lapsed */
  --neg-dim:    rgba(200,64,31,.08);
  --warn:       #7D5D08;   /* pending · awaiting · listed · expiring — 5.3:1 on paper */
  --warn-dim:   rgba(125,93,8,.10);
  --info:       #2B62A8;   /* placed · in progress · neutral state */
  --info-dim:   rgba(43,98,168,.09);

  /* Aging ramp. Fresh paper is paid-green, old paper is late-red — the
     wordmark read left to right, backwards. */
  --age-0:   #177245;
  --age-90:  #5E7A1A;
  --age-180: #7D5D08;
  --age-365: #A34C0B;
  --age-730: #C8401F;

  /* Legacy names, kept so existing markup keeps working. --signal was the
     old navy accent and is used for "needs attention" text, which must not
     turn green now that the accent has — so it stays with the ink. */
  --signal:     var(--ink);
  --signal-dim: rgba(16,37,27,.07);
  --forest:     var(--pos);
  --forest-dim: var(--pos-dim);
  --slate:      var(--info);
  --slate-dim:  var(--info-dim);
  --gold:       var(--warn);
  --gold-dim:   var(--warn-dim);
  --danger:     var(--neg);
  --danger-dim: var(--neg-dim);

  --display: 'Unbounded', 'Plus Jakarta Sans', 'Helvetica Neue', sans-serif;
  --ui:      'Plus Jakarta Sans', 'Helvetica Neue', sans-serif;
  --mono:    'DM Mono', ui-monospace, Menlo, monospace;

  --late: #C8401F;
  --paid: #177245;
  --cardinal: var(--late);

  /* ---------------- FORM ----------------
     Nothing has a border. Depth comes from a hairline shadow ring plus two
     soft offset layers, and corners are generous. Edges are for terminals;
     this is meant to feel handled rather than printed. */
  --r:   10px;   /* chips, small controls */
  --r2:  16px;   /* inputs, list rows */
  --r3:  24px;   /* cards, panels */
  --r4:  32px;   /* large surfaces, modals */
  --pill: 999px;

  --ring:  0 0 0 1px rgba(16,37,27,.09);
  --lift:  0 0 0 1px rgba(16,37,27,.08),
           0 6px 6px -3px rgba(16,37,27,.045),
           0 12px 12px -6px rgba(16,37,27,.04);
  --lift-2:0 0 0 1px rgba(16,37,27,.09),
           0 10px 10px -5px rgba(16,37,27,.055),
           0 22px 22px -10px rgba(16,37,27,.055);
  --lift-3:0 0 0 1px rgba(16,37,27,.1),
           0 18px 18px -8px rgba(16,37,27,.07),
           0 40px 40px -18px rgba(16,37,27,.09);
  --shadow: var(--lift);
}

* { box-sizing: border-box; }

/* Keyboard users land on this first and can jump past the navigation.
   Invisible until focused, then a plain pill at the top-left. */
.skip {
  position: absolute; left: 16px; top: -60px; z-index: 300;
  background: var(--ink); color: #fff; padding: 10px 18px; border-radius: var(--pill);
  font-size: 13px; font-weight: 600; text-decoration: none;
  transition: top .15s ease;
}
.skip:focus { top: 12px; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  color: var(--ink);
  font-family: var(--ui);
  font-size: 14.5px;
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: -.004em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  background-color: var(--paper);
}

/* One soft wash in the corners: the tile's green and its mint at almost
   nothing, so the cream has depth without any texture doing the work. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(56rem 44rem at 4% -8%,  rgba(23,114,69,.06), transparent 62%),
    radial-gradient(44rem 36rem at 98% 4%,  rgba(76,195,138,.07), transparent 60%);
}

h1, h2, h3, h4 {
  font-family: var(--ui);
  font-weight: 700;
  letter-spacing: -.028em;
  line-height: 1.12;
  margin: 0;
  text-wrap: balance;
}
/* The wordmark's face for the two top levels. Unbounded runs about a fifth
   wider than Jakarta, so it sets a touch smaller and tighter than the sizes
   written for the old face; the scale-down lives here, once. */
h1, h2 {
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: -.035em;
  line-height: 1.14;
}
p { margin: 0 0 1em; }
a { color: inherit; }

::selection { background: var(--accent); color: var(--on-accent); }

/* Every figure lines up. */
.num, .money, td.num, th.num {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
  letter-spacing: -.03em;
}

/* ---------- Eyebrow ---------- */
.eyebrow {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* ---------- Buttons ---------- */
.btn {
  font-family: var(--ui);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -.008em;
  padding: 10px 20px;
  border: none;
  border-radius: var(--pill);
  background: var(--paper-2);
  color: var(--ink);
  cursor: pointer;
  box-shadow: var(--ring);
  transition: background .16s ease, color .16s ease, transform .12s ease, box-shadow .16s ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  white-space: nowrap;
  position: relative;
}
.btn:hover { background: var(--paper-3); transform: translateY(-1px); box-shadow: var(--lift); }
.btn:active { transform: translateY(0); box-shadow: var(--ring); }
.btn:disabled { opacity: .4; cursor: not-allowed; transform: none; box-shadow: var(--ring); }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.btn-signal {
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 600;
  box-shadow: none;
}
.btn-signal:hover { background: var(--accent-hover); box-shadow: 0 8px 18px -8px rgba(23,114,69,.55); }

.btn-ghost { background: transparent; box-shadow: var(--ring); }
.btn-ghost:hover { background: var(--paper-2); }

.btn-quiet {
  background: transparent;
  color: var(--ink-2);
  font-weight: 500;
  box-shadow: var(--ring);
}
.btn-quiet:hover { color: var(--ink); background: var(--paper-2); }

.btn-sm { padding: 6px 14px; font-size: 12.5px; }

.btn-danger { background: transparent; color: var(--neg); box-shadow: 0 0 0 1px color-mix(in srgb, var(--neg) 30%, transparent); }
.btn-danger:hover { background: var(--neg-dim); box-shadow: 0 0 0 1px color-mix(in srgb, var(--neg) 45%, transparent); }

/* ---------- Forms ---------- */
label.field { display: block; margin-bottom: 15px; }
label.field > span {
  display: block;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0;
  text-transform: none;
  font-weight: 600;
  color: var(--ink-2);
  margin-bottom: 7px;
}
input[type=text], input[type=email], input[type=password], input[type=number],
input[type=date], input[type=search], input[type=file], select, textarea {
  width: 100%;
  font-family: var(--ui);
  font-size: 14px;
  color: var(--ink);
  background: var(--paper-2);
  border: none;
  border-radius: var(--r2);
  padding: 11px 16px;
  transition: box-shadow .16s ease, background .16s ease;
}
input[type=number], input[type=date] {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}
input::placeholder, textarea::placeholder { color: var(--ink-4); }
input:focus, select:focus, textarea:focus {
  outline: none;
  background: var(--card);
  box-shadow: 0 0 0 1px var(--accent), 0 0 0 4px var(--accent-dim);
}
input[type=file] { padding: 10px 14px; font-size: 13px; color: var(--ink-2); }
textarea { resize: vertical; min-height: 78px; line-height: 1.55; }
select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%2356675E' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 15px center;
  padding-right: 38px;
}
.check {
  display: flex; align-items: flex-start; gap: 10px; margin-bottom: 10px;
  font-size: 13.5px; cursor: pointer; color: var(--ink-2);
}
.check input {
  margin: 2px 0 0; accent-color: var(--accent);
  width: 15px; height: 15px; flex: none;
}
.check:hover { color: var(--ink); }

.row { display: grid; gap: 0 14px; }
.row-2 { grid-template-columns: 1fr 1fr; }
.row-3 { grid-template-columns: 1fr 1fr 1fr; }
.hint {
  font-size: 12.5px; color: var(--ink-3); margin: -9px 0 15px; line-height: 1.5;
}

/* ---------- Status pills ---------- */
.pill {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--ui); font-size: 11px; font-weight: 600;
  letter-spacing: .01em; text-transform: capitalize;
  padding: 4px 10px; border-radius: var(--pill); white-space: nowrap;
  border: none;
}
.pill::before { content: ''; width: 4px; height: 4px; border-radius: 50%; background: currentColor; }
.pill-listed { background: var(--gold-dim); color: var(--gold); }
.pill-placed { background: var(--slate-dim); color: var(--slate); }
.pill-recovered { background: var(--forest-dim); color: var(--forest); }
.pill-draft     { background: var(--paper-3);    color: var(--ink-3); }
.pill-withdrawn,
.pill-closed    { background: var(--paper-3);    color: var(--ink-3); }
.pill-pending { background: var(--gold-dim); color: var(--gold); }
.pill-approved { background: var(--forest-dim); color: var(--forest); }
.pill-declined { background: var(--danger-dim); color: var(--danger); }
/* A warning, not an action. Amber is reserved for things you click. */
.pill-flag { background: var(--danger-dim); color: var(--danger); }
.pill-flag::before { display: none; }

/* ---------- Tables ---------- */
.table-wrap { overflow-x: auto; margin: 0 -2px; }
table.ledger { width: 100%; border-collapse: collapse; font-size: 13px; }
table.ledger th {
  font-family: var(--ui); font-size: 11px; font-weight: 600;
  letter-spacing: .01em; text-transform: none; color: var(--ink-3);
  text-align: left; padding: 0 14px 10px; border-bottom: 1px solid var(--rule);
  white-space: nowrap;
}
table.ledger th.right, table.ledger td.right { text-align: right; }
/* A reference or an amount broken across two lines reads as two values. */
table.ledger td.num { white-space: nowrap; }
table.ledger td {
  padding: 14px 14px; border-bottom: 1px solid var(--rule-soft); vertical-align: middle;
}
table.ledger tbody tr { transition: background .1s ease; position: relative; }
table.ledger tbody tr:hover { background: var(--paper-2); }
table.ledger tbody tr.clickable { cursor: pointer; }
/* A hot left edge on hover, the way a selected row reads on a terminal. */
table.ledger tbody tr.clickable td:first-child { box-shadow: inset 2px 0 0 transparent; transition: box-shadow .12s ease; }
table.ledger tbody tr.clickable:hover td:first-child { box-shadow: inset 3px 0 0 var(--accent); }

.t-strong { font-weight: 600; color: var(--ink); }
.t-dim { color: var(--ink-3); }
.t-xs { font-size: 11.5px; }

/* ---------- Panels ---------- */
.panel {
  background: var(--card);
  border: none;
  border-radius: var(--r3);
  padding: 26px 28px;
  box-shadow: var(--lift);
}
.panel-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; margin-bottom: 18px; flex-wrap: wrap;
}
.panel-head h2 { font-size: 16px; font-weight: 700; letter-spacing: -.03em; }

/* ---------- Stat strip ---------- */
.stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
  border: none; border-radius: var(--r3);
  background: var(--card); overflow: hidden; box-shadow: var(--lift);
}
.stat { padding: 18px 20px 19px; border-right: 1px solid var(--rule-soft); }
.stat:last-child { border-right: none; }
.stat .k {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-4);
}
.stat .v {
  font-family: var(--mono); font-size: 25px; font-weight: 400;
  font-variant-numeric: tabular-nums; letter-spacing: -.05em;
  margin-top: 5px; line-height: 1;
}
.stat .v.pos, .stat .v.grn { color: var(--pos); }
.stat .v.neg { color: var(--neg); }
.stat .v.warn, .stat .v.sig { color: var(--warn); }

/* Aging. Applied to any figure or chip that expresses how old a debt is. */
.age-0   { color: var(--age-0); }
.age-90  { color: var(--age-90); }
.age-180 { color: var(--age-180); }
.age-365 { color: var(--age-365); }
.age-730 { color: var(--age-730); }

.chip.age-0   { color: var(--age-0);   border-color: color-mix(in srgb, var(--age-0) 30%, transparent);   background: color-mix(in srgb, var(--age-0) 10%, transparent); }
.chip.age-90  { color: var(--age-90);  border-color: color-mix(in srgb, var(--age-90) 30%, transparent);  background: color-mix(in srgb, var(--age-90) 10%, transparent); }
.chip.age-180 { color: var(--age-180); border-color: color-mix(in srgb, var(--age-180) 30%, transparent); background: color-mix(in srgb, var(--age-180) 10%, transparent); }
.chip.age-365 { color: var(--age-365); border-color: color-mix(in srgb, var(--age-365) 32%, transparent); background: color-mix(in srgb, var(--age-365) 11%, transparent); }
.chip.age-730 { color: var(--age-730); border-color: color-mix(in srgb, var(--age-730) 32%, transparent); background: color-mix(in srgb, var(--age-730) 11%, transparent); }
.stat .sub { font-size: 11.5px; color: var(--ink-3); margin-top: 5px; }

/* ---------- Toast ---------- */
#toast {
  position: fixed; bottom: 24px; left: 50%; transform: translate(-50%, 150%);
  background: var(--ink); color: #FFFDF8;
  border: none;
  padding: 14px 22px; border-radius: var(--pill); font-size: 13.5px; font-weight: 500;
  z-index: 200; transition: transform .3s cubic-bezier(.2,.9,.3,1.15);
  max-width: min(540px, 90vw); box-shadow: 0 24px 50px -22px rgba(16,37,27,.5);
}
#toast.show { transform: translate(-50%, 0); }
/* Parked off-screen it still peeked above the fold on short screens, and an
   empty one read as a stray pill. Hidden until shown. */
#toast:not(.show) { visibility: hidden; transition: transform .3s cubic-bezier(.2,.9,.3,1.15), visibility 0s .3s; }
#toast.err { background: var(--neg); }

/* ---------- Modal ---------- */
.modal-back {
  position: fixed; inset: 0; background: rgba(16,37,27,.3);
  backdrop-filter: blur(3px); z-index: 150;
  display: flex; align-items: flex-start; justify-content: center;
  padding: 5vh 18px; overflow-y: auto;
  animation: fade .16s ease;
}
.modal {
  background: var(--card); border: none; border-radius: var(--r4);
  width: 100%; max-width: 620px;
  box-shadow: var(--lift-3);
  animation: rise .28s cubic-bezier(.2,.9,.3,1.02);
}
.modal.wide { max-width: 900px; }
.modal-head {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 24px 30px 18px; border-bottom: 1px solid var(--rule-soft);
}
.modal-head h2 { font-size: 19px; font-weight: 700; letter-spacing: -.03em; }
.modal-body { padding: 24px 30px; }
.modal-foot {
  padding: 18px 30px; border-top: 1px solid var(--rule-soft);
  display: flex; justify-content: flex-end; gap: 10px; background: var(--paper-2);
  border-radius: 0 0 var(--r4) var(--r4);
}
.x {
  background: none; border: none; font-size: 20px; line-height: 1;
  color: var(--ink-4); cursor: pointer; padding: 3px 7px; border-radius: 3px;
}
.x { border-radius: var(--pill); }
.x:hover { color: var(--ink); background: var(--paper-2); }

@keyframes fade { from { opacity: 0 } }
@keyframes rise { from { opacity: 0; transform: translateY(12px) } }
@keyframes riseIn { from { opacity: 0; transform: translateY(20px) } to { opacity: 1; transform: none } }

/* ---------- Empty ---------- */
.empty { text-align: center; padding: 56px 20px; color: var(--ink-3); }
.empty h3 {
  font-family: var(--display);
  font-size: 18px; font-weight: 600; color: var(--ink-2);
  margin-bottom: 10px; letter-spacing: -.022em;
}
.empty p { font-size: 13.5px; max-width: 400px; margin: 0 auto 20px; line-height: 1.6; }

/* ---------- Notices ---------- */
.notice {
  border: none;
  background: var(--neg-dim);
  box-shadow: inset 3px 0 0 var(--neg);
  padding: 14px 18px; font-size: 13px; line-height: 1.6; color: var(--ink-2);
  border-radius: var(--r2); margin-bottom: 18px;
}
.notice strong { color: var(--ink); font-weight: 600; }
.notice.calm {
  background: var(--paper-2);
  box-shadow: inset 3px 0 0 var(--info);
}

/* Locked contact: the blur is the product promise made visible. */
.locked {
  filter: blur(5px); user-select: none; pointer-events: none;
  color: var(--ink-3); opacity: .85;
}
.lock-note {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: 10px; letter-spacing: .13em;
  text-transform: uppercase; color: var(--ink-4);
}

/* ---------- Scrollbars, since this is a dark dense product ---------- */
* { scrollbar-width: thin; scrollbar-color: var(--rule-hot) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--rule-hot); border-radius: var(--pill); border: 3px solid var(--paper); }
*::-webkit-scrollbar-thumb:hover { background: var(--ink-4); }

@media (max-width: 720px) {
  .row-2, .row-3 { grid-template-columns: 1fr; }
}

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

/* ============================================================
   LEDGER PRIMITIVES

   Three things were true on every screen and expressed on none of
   them consistently: a rate that steps with age, a figure that
   matters more than the figures around it, and a page a stranger
   reads. These are those three.
   ============================================================ */

/* ---------- The rate ramp ----------
   A tiered contingency IS an aging curve, and the palette already
   has colours for aging. Rendering the schedule as a ramp instead
   of "22% to 90d · 28% to 180d · 35% to 365d · 42% beyond" turns
   three wrapped lines of prose into one object the eye reads at a
   glance: steeper ramp, older paper, more expensive to work. */
.ramp {
  display: inline-flex; align-items: stretch; gap: 2px;
  vertical-align: middle;
}
.ramp-band {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 3px 7px 4px; border-radius: 6px; min-width: 40px;
  background: color-mix(in srgb, var(--bc) 11%, transparent);
}
.ramp-band .p {
  font-family: var(--mono); font-size: 11px; font-weight: 500;
  letter-spacing: -.04em; color: var(--bc); line-height: 1;
  font-variant-numeric: tabular-nums;
}
.ramp-band .d {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .02em;
  color: var(--ink-3); line-height: 1; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.ramp-band.b0 { --bc: var(--age-0); }
.ramp-band.b1 { --bc: var(--age-90); }
.ramp-band.b2 { --bc: var(--age-180); }
.ramp-band.b3 { --bc: var(--age-365); }
.ramp-band.b4 { --bc: var(--age-730); }

/* A flat rate is not a ramp. It gets one band, in ink, so the
   difference between "flat" and "tiered" is visible before reading. */
.ramp-flat {
  display: inline-flex; align-items: baseline; gap: 5px;
  font-family: var(--mono); font-variant-numeric: tabular-nums;
}
.ramp-flat .p { font-size: 13px; font-weight: 500; letter-spacing: -.04em; color: var(--ink); }
.ramp-flat .l { font-size: 9px; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-4); }

/* The minimum fee is a floor, not a rate. It sits under the ramp
   and never competes with it. */
.ramp-min {
  display: block; margin-top: 4px;
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .06em;
  color: var(--ink-4); font-variant-numeric: tabular-nums;
}

/* In a table cell the ramp is the content, so it sets its own
   alignment rather than inheriting the column's right-align. */
td .ramp, td .ramp-flat { justify-content: flex-end; }
td .ramp-min { text-align: right; }

/* ---------- Lead figure ----------
   A strip of five identically-weighted tiles makes the reader do the
   ranking. One figure leads; the rest support it. */
.lead {
  display: grid; grid-template-columns: minmax(280px, .9fr) minmax(0, 2fr);
  gap: 0; background: var(--card); border-radius: var(--r3);
  box-shadow: var(--lift); overflow: hidden; margin-bottom: 22px;
}
.lead-main {
  container-type: inline-size;   /* the figure sizes to its own column, below */
  padding: 26px 30px 28px;
  border-right: 1px solid var(--rule-soft);
  background: linear-gradient(160deg, var(--accent-dim), transparent 70%);
}
.lead-main .k {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-3);
}
/* Sized to the column, not the window: a viewport clamp let "$21,775.60"
   run out of its box and over the next tile on a 1280 screen. 17cqi fits
   ten mono characters with room to spare; nowrap keeps it one figure. */
.lead-main .v {
  font-family: var(--mono); font-size: clamp(28px, 17cqi, 54px); font-weight: 400;
  font-variant-numeric: tabular-nums; letter-spacing: -.062em; white-space: nowrap;
  line-height: .95; margin-top: 10px; color: var(--ink);
}
.lead-main .v.pos { color: var(--pos); }
.lead-main .sub { font-size: 12.5px; color: var(--ink-3); margin-top: 9px; line-height: 1.5; }

.lead-rest { display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); }
.lead-rest .stat { border-right: 1px solid var(--rule-soft); border-bottom: none; }
.lead-rest .stat:last-child { border-right: none; }

@media (max-width: 900px) {
  .lead { grid-template-columns: minmax(0, 1fr); }
  .lead-main { border-right: none; border-bottom: 1px solid var(--rule-soft); }
  .lead-rest { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lead-rest .stat { box-shadow: inset 0 -1px 0 var(--rule-soft); }
}

/* ---------- Best bid ----------
   Two bids, four percentages, and nothing saying which one is cheaper.
   The decision this screen exists to support was the one thing it
   left the reader to compute. */
.bid.best { box-shadow: 0 0 0 1px color-mix(in srgb, var(--pos) 38%, transparent), var(--lift); }
.bid.best .bid-rate .p { color: var(--pos); }
.bid-best-tag {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--mono); font-size: 9px; letter-spacing: .14em;
  text-transform: uppercase; font-weight: 500;
  color: var(--pos); background: var(--pos-dim);
  padding: 3px 9px; border-radius: var(--pill); margin-bottom: 9px;
}
.bid-delta {
  font-family: var(--mono); font-size: 10px; letter-spacing: .04em;
  color: var(--ink-4); margin-top: 3px; font-variant-numeric: tabular-nums;
  font-weight: 400;
}

/* ---------- Rail identity ----------
   The workspace dropped the mark the landing page introduces, so the
   product a user signs into looks like it belongs to nobody. */
.rail-mark .brand { display: flex; align-items: center; gap: 8px; }
.rail-mark .brand img { height: 22px; width: auto; flex: none; display: block; }
.rail-role {
  display: inline-block; margin-top: 7px;
  font-family: var(--mono); font-size: 8.5px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--ink-3);
  background: var(--paper-3); padding: 3px 9px; border-radius: var(--pill);
}

/* ---------- Signal meter ----------
   .score / .score-bar are defined in the workspace shell; these are the parts
   the shared meter adds, so the same figure reads the same way on a market
   card and on the file itself. */
.score-n {
  font-family: var(--mono); font-size: 11px; font-variant-numeric: tabular-nums;
  letter-spacing: -.03em; color: var(--ink-2);
}
.score-w {
  font-family: var(--ui); font-size: 11px; font-weight: 600;
  letter-spacing: -.005em; color: var(--pos);
}
.score-w.mid { color: var(--warn); }
.score-w.low { color: var(--neg); }
.score-wide .score-bar { width: 96px; height: 5px; }

/* ---------- Loading skeleton ----------
   A calm opacity pulse rather than a sweeping highlight: the sweep is a louder
   gesture than anything else in this system makes, and a page that is merely
   fetching should not be the most animated thing on screen. */
.vh {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skel { animation: skelIn .18s ease both; }
@keyframes skelIn { from { opacity: 0 } }

.sk {
  background: var(--paper-3);
  border-radius: var(--r);
  animation: skelPulse 1.5s ease-in-out infinite;
}
@keyframes skelPulse { 0%, 100% { opacity: .55 } 50% { opacity: .9 } }

.skel-head { margin-bottom: 26px; }
.sk-title { height: 30px; width: min(320px, 52%); border-radius: var(--r); }
.sk-sub   { height: 13px; width: min(440px, 72%); margin-top: 12px; }

.skel-stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
  gap: 1px; margin-bottom: 22px;
  background: var(--card); border-radius: var(--r3);
  box-shadow: var(--lift); overflow: hidden; padding: 1px;
}
.sk-stat { height: 76px; border-radius: 0; }

.skel-panel {
  background: var(--card); border-radius: var(--r3);
  box-shadow: var(--lift); padding: 26px 28px;
}
.sk-row { height: 15px; margin-bottom: 20px; }
.sk-row:nth-child(1) { width: 92%; }
.sk-row:nth-child(2) { width: 78%; }
.sk-row:nth-child(3) { width: 85%; }
.sk-row:nth-child(4) { width: 70%; }
.sk-row:nth-child(5) { width: 88%; }
.sk-row:last-child   { width: 64%; margin-bottom: 0; }

/* Each block starts a beat after the one above it, so the strip reads as one
   object settling rather than eight lights blinking in lockstep. */
.sk-stat:nth-child(2), .sk-row:nth-child(2) { animation-delay: .08s; }
.sk-stat:nth-child(3), .sk-row:nth-child(3) { animation-delay: .16s; }
.sk-stat:nth-child(4), .sk-row:nth-child(4) { animation-delay: .24s; }
.sk-row:nth-child(5) { animation-delay: .32s; }
.sk-row:nth-child(6) { animation-delay: .40s; }

/* ---------- Focus ----------
   Only .btn and the portal's .choice carried a focus ring, which left the
   workspace rail - the primary navigation of the whole product - along with
   every tab bar, segmented control and facet with nothing visible under the
   keyboard. :where() keeps this at zero specificity so any component that
   wants its own treatment still wins.

   The ring sits outside the element, on the page ground, so it stays visible
   on the green "on" states as well as the cream ones. */
:where(a, button, select, summary, [tabindex]:not([tabindex="-1"])):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* A focused row should read as the row, not as a rectangle around the table's
   full width with a corner somewhere off screen. */
table.ledger tbody tr:focus-visible {
  outline: none;
  background: var(--accent-dim);
  box-shadow: inset 3px 0 0 var(--accent);
}
table.ledger tbody tr:focus-visible td:first-child { box-shadow: none; }

/* The market and lot cards already lift on hover; under focus they take the
   same lift plus the ring, so pointer and keyboard land in the same place. */
.lot:focus-visible { transform: translateY(-3px); box-shadow: var(--lift-2); }