/* mslp.io — Recovery Overview design prototype.
   One aesthetic: a working credit report. White sheet on a gray plane,
   hairline rules, numbered exhibits, tabular figures. Marblegate maroon
   is identity only; teal is the single interactive accent; status colors
   are semantic and never decorative. Light theme only by design. */

:root {
  --ground: #ecebe8;
  --sheet: #ffffff;
  --hover: #faf9f7;

  --ink: #191817;
  --ink-2: #53514d;
  --ink-3: #767471;

  --hairline: #e3e2de;
  --rule: #cfcdc8;
  --rule-strong: #191817;
  --sheet-border: #d8d6d1;

  --brand: #56142c;
  --accent: #1f4d51;
  --accent-soft: #e9f0f0;
  --meter-track: #e7e6e2;

  --good-ink: #056b05;      --good-bg: rgba(12, 163, 12, 0.10);
  --warning-ink: #8a5d00;   --warning-bg: rgba(250, 178, 25, 0.14);
  --serious-ink: #9c4a24;   --serious-bg: rgba(236, 131, 90, 0.16);
  --critical-ink: #a72a2a;  --critical-bg: rgba(208, 59, 59, 0.10);
  --info-ink: #1f4d51;      --info-bg: rgba(31, 77, 81, 0.10);

  /* Single payments series — the sheet's own teal, so no hue competes
     with the semantic status colors. */
  --s-payment: #1f4d51;
  --grid: #e7e6e2;

  --sans: 'Public Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
}

body {
  background: var(--ground);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 13.5px;
}

.mono { font-family: var(--mono); }

/* ---------- masthead ---------- */
.masthead { background: var(--brand); padding: 0 20px; }
.masthead-inner {
  max-width: 1320px;
  margin: 0 auto;
  padding: 13px 0 12px;
  display: flex;
  align-items: baseline;
  gap: 16px;
}
.wordmark { font-size: 16px; font-weight: 700; letter-spacing: -0.01em; }
.masthead-spacer { flex: 1 1 auto; }
.masthead .masthead-meta { font-family: var(--mono); font-size: 11px; }
.masthead-btn {
  font-family: var(--mono);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--on-brand);
  text-decoration: none;
  border: 1px solid var(--on-brand-dim);
  border-radius: 2px;
  padding: 3px 9px;
  margin-right: 14px;
  white-space: nowrap;
}
.masthead-btn:hover { background: rgba(255, 255, 255, 0.14); }
.masthead-btn:focus-visible { outline: 2px solid var(--on-brand); outline-offset: 2px; }
.fixture-pill {
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--brand);
  background: #e8c56a;
  border-radius: 2px;
  padding: 2px 8px 1px;
  align-self: center;
  white-space: nowrap;
  cursor: help;
}

/* ---------- sheet ---------- */
.ground { padding: 26px 20px 0; }
.sheet {
  max-width: 1320px;
  margin: 0 auto;
  background: var(--sheet);
  border: 1px solid var(--sheet-border);
  padding: 0 36px 52px;
}
.colophon {
  max-width: 1320px;
  margin: 10px auto 44px;
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--ink-2);
}

.context-strip {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 13px 0;
  border-bottom: 1px solid var(--hairline);
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-2);
}

/* ---------- summary band ---------- */
.summary-band {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  padding: 22px 0 24px;
  border-bottom: 1px solid var(--hairline);
}
.stat { min-width: 0; padding-right: 20px; }
.stat + .stat { border-left: 1px solid var(--hairline); padding-left: 20px; }
.stat-label {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-3);
}
.stat-value {
  margin-top: 7px;
  font-size: 23px;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.1;
  white-space: nowrap;
}
.stat-value.awaiting { color: var(--ink-3); font-weight: 400; }
.stat-sub { margin-top: 4px; font-size: 11.5px; color: var(--ink-3); }

/* ---------- exhibits ---------- */
.exhibit { margin-top: 46px; overflow-x: auto; }
.ex-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding-bottom: 7px;
  border-bottom: 1px solid var(--rule-strong);
}
.ex-num {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--brand);
}
.ex-title { margin: 0; font-size: 14.5px; font-weight: 700; letter-spacing: -0.01em; }
.ex-note { font-size: 11.5px; color: var(--ink-3); }
.ex-spacer { flex: 1 1 auto; }
.ex-foot {
  margin: 10px 0 0;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--ink-3);
  max-width: 72ch;
}
.sub-title {
  margin: 26px 0 2px;
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ink-3);
}

/* ---------- tables ---------- */
table.dt { width: 100%; border-collapse: collapse; font-size: 13px; }
.dt th {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ink-3);
  padding: 10px 12px 7px;
  border-bottom: 1px solid var(--rule);
  white-space: nowrap;
}
.dt td { padding: 9px 12px; border-bottom: 1px solid var(--hairline); vertical-align: top; }
.dt th:first-child, .dt td:first-child { padding-left: 0; }
.dt th:last-child, .dt td:last-child { padding-right: 0; }
.dt tbody tr:hover { background: var(--hover); }
.dt .txt { text-align: left; }
.dt .num { text-align: right; }
.dt td.num { font-family: var(--mono); font-size: 12.5px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dt td.strong { font-weight: 600; }
.dt tfoot td {
  border-top: 1px solid var(--rule-strong);
  border-bottom: 0;
  font-weight: 600;
  padding-top: 9px;
}
.dt tfoot td.txt { font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--ink-2); }
.dt .wide { min-width: 220px; }
.dt .nowrap { white-space: nowrap; }
.dt .dim { color: var(--ink-2); }
.dt .blank { color: var(--ink-3); }

.loan-cell { white-space: nowrap; }
.dt.mini .loan-cell { white-space: normal; min-width: 200px; max-width: 300px; }
.loan-cell .loan-name { font-weight: 500; }
.loan-cell .loan-id { font-family: var(--mono); font-size: 11px; color: var(--ink-3); margin-left: 5px; }

/* Keep all six payment fields within the sheet instead of inheriting the
   horizontal-scrolling behavior used by the wider portfolio tables. */
.payments-table { table-layout: fixed; }
.payments-table .payment-col-date { width: 12%; }
.payments-table .payment-col-borrower { width: 27%; }
.payments-table .payment-col-status { width: 19%; }
.payments-table .payment-col-number { width: 14%; }
.payments-table th { white-space: normal; line-height: 1.25; }
.payments-table .loan-cell { white-space: normal; }
.payments-table .loan-id { display: block; margin: 2px 0 0; }
.payments-table .pill { max-width: 100%; white-space: normal; line-height: 1.25; }
.payments-table .pill i { flex: 0 0 auto; }

/* sortable headers — a real button inside the th so keyboards can sort */
.th-sort {
  font: inherit;
  color: inherit;
  text-transform: inherit;
  letter-spacing: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.th-sort::after { content: "↕"; margin-left: 5px; color: var(--ink-3); }
.th-sort:hover { color: var(--ink); }
.th-sort:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
th.sortable[aria-sort] { color: var(--ink); }
th.sortable[aria-sort="descending"] .th-sort::after { content: "↓"; color: var(--accent); }
th.sortable[aria-sort="ascending"] .th-sort::after { content: "↑"; color: var(--accent); }

/* ---------- pills, tiers, tags ---------- */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 2px 7px;
  border-radius: 2px;
  white-space: nowrap;
}
.pill i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pill.good { color: var(--good-ink); background: var(--good-bg); }
.pill.warning { color: var(--warning-ink); background: var(--warning-bg); }
.pill.serious { color: var(--serious-ink); background: var(--serious-bg); }
.pill.critical { color: var(--critical-ink); background: var(--critical-bg); }
.pill.info { color: var(--info-ink); background: var(--info-bg); }

.tier {
  display: inline-block;
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 2px;
  border: 1px solid currentColor;
}
.tier.t1 { color: var(--critical-ink); background: var(--critical-bg); }
.tier.t2 { color: var(--warning-ink); background: var(--warning-bg); }

/* ---------- recovery + milestones ---------- */
.rec { display: inline-flex; align-items: center; gap: 6px; }
td.rec-cell .rec { margin-left: 10px; }
.rec-bar { width: 40px; height: 3px; background: var(--meter-track); display: inline-block; border-radius: 2px; overflow: hidden; }
.rec-bar i { display: block; height: 100%; background: var(--accent); }
.rec-pct { font-family: var(--mono); font-size: 11px; color: var(--ink-2); }
.rec-pct.over { color: var(--accent); font-weight: 600; }

/* The nine-column priority table overflowed by a little, giving the panel a
   horizontal scrollbar. The milestone cell was the widest thing on the row at
   86 characters on one line, so it gets a ceiling and wraps instead. The
   date-plus-countdown stays on one line via .ms-when. */
td.ms { min-width: 170px; max-width: 230px; white-space: normal; }
.ms .ms-when { white-space: nowrap; }
.ms .ms-in { font-family: var(--mono); font-size: 10.5px; color: var(--ink-3); margin-left: 4px; }
.ms.urgent, .ms.urgent .ms-in { color: var(--critical-ink); }
.ms.urgent .ms-in { font-weight: 600; }

/* ---------- engagement ---------- */
.eng-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; margin: 16px 0 6px; }
.eng-headline { font-size: 19px; font-weight: 600; letter-spacing: -0.01em; margin-bottom: 8px; }
.eng-headline span { font-size: 12px; font-weight: 400; color: var(--ink-3); letter-spacing: 0; }
.eng-row {
  display: grid;
  grid-template-columns: 168px 1fr 30px 82px;
  gap: 12px;
  align-items: center;
  padding: 6px 0;
  border-bottom: 1px solid var(--hairline);
}
.eng-name { font-size: 12.5px; color: var(--ink-2); }
.eng-meter { height: 3px; background: var(--meter-track); border-radius: 2px; overflow: hidden; }
.eng-meter i { display: block; height: 100%; background: var(--accent); }
.eng-count { font-family: var(--mono); font-size: 12px; text-align: right; font-variant-numeric: tabular-nums; }
.eng-upb { font-family: var(--mono); font-size: 11px; color: var(--ink-2); text-align: right; font-variant-numeric: tabular-nums; }

.log-form {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 14px 0 12px;
  padding: 10px 12px;
  border: 1px solid var(--hairline);
  background: var(--hover);
}
.log-form .dn-label { margin: 0 6px 0 0; }
.log-form .search { width: auto; min-width: 120px; }
.log-form .search.grow { flex: 1 1 180px; }
.log-form select.search { padding: 4px 6px; }
.check-label { font-family: var(--mono); font-size: 10.5px; color: var(--ink-2); display: inline-flex; align-items: center; gap: 4px; }

/* ---------- controls ---------- */
.search {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink);
  background: var(--sheet);
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: 4px 9px;
  width: 210px;
}
.search::placeholder { color: var(--ink-3); }
.search:focus { outline: 2px solid var(--accent); outline-offset: -1px; }

/* ---------- daily payments chart ---------- */
.cf-chart { position: relative; margin-top: 12px; margin-bottom: 8px; }
#cfSvg { display: block; width: 100%; height: 190px; }
#cfSvg .seg-payment { fill: var(--s-payment); }
#cfSvg .gridline { stroke: var(--grid); shape-rendering: crispEdges; }
#cfSvg .baseline { stroke: var(--rule); shape-rendering: crispEdges; }
#cfSvg .tick { font-family: var(--mono); font-size: 10px; fill: var(--ink-3); }
#cfSvg .wash { fill: var(--ink); opacity: 0.045; }

.cf-tip {
  position: absolute;
  pointer-events: none;
  background: var(--sheet);
  border: 1px solid var(--rule);
  box-shadow: 0 2px 10px rgba(25, 24, 23, 0.10);
  padding: 8px 10px;
  font-size: 12px;
  min-width: 170px;
  z-index: 5;
}
.cf-tip .t-wk {
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-3);
  margin-bottom: 5px;
}
.cf-tip .t-row { display: flex; align-items: center; gap: 7px; padding: 1.5px 0; }
.cf-tip .t-name { color: var(--ink-2); }
.cf-tip .t-val { margin-left: auto; font-family: var(--mono); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.cf-tip .t-tot { border-top: 1px solid var(--hairline); margin-top: 4px; padding-top: 4px; font-weight: 600; }

/* ---------- view bar (exhibit toggles; revealed by JS) ---------- */
.view-bar {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px;
  padding: 10px 0;
  border-bottom: 1px solid var(--hairline);
}
.view-label {
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-3);
  margin-right: 6px;
}
.view-chip {
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 3px 8px;
  border: 1px solid var(--rule);
  border-radius: 2px;
  background: var(--sheet);
  color: var(--ink-3);
  cursor: pointer;
}
.view-chip[aria-pressed="true"] { color: var(--accent); background: var(--accent-soft); border-color: var(--accent); }
.view-chip:hover { color: var(--ink); }
.view-chip[aria-pressed="true"]:hover { color: var(--accent); }
.view-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.ex-move { display: inline-flex; gap: 2px; margin-left: 8px; }
.ex-move button {
  border: 0;
  background: none;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-3);
  cursor: pointer;
  padding: 0 3px;
}
.ex-move button:hover { color: var(--accent); }
.ex-move button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* ---------- loan links & detail page ---------- */
.loan-link { color: inherit; text-decoration: none; border-bottom: 1px solid transparent; }
.loan-link:hover { color: var(--accent); border-bottom-color: var(--accent); }
.loan-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
a.back { color: var(--ink-2); text-decoration: none; font-family: var(--mono); }
a.back:hover { color: var(--accent); }

.loan-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; padding-top: 22px; }
.loan-title { margin: 0; font-size: 19px; font-weight: 700; letter-spacing: -0.015em; }
.loan-sub { margin: 6px 0 0; font-size: 12px; color: var(--ink-2); }
.loan-sub.dim-sub { color: var(--ink-3); font-size: 11.5px; }
.summary-band.cols-6 { grid-template-columns: repeat(6, 1fr); margin-top: 14px; border-top: 1px solid var(--hairline); }
/* loan.html has always asked for cols-8 and it has never existed, so the
   eight-stat strip fell back to the five-column default and wrapped three
   onto an unruled second row. */
.summary-band.cols-8 {
  /* Eight across 1320px leaves 159px a column and a figure like $34,077,429
     needs about 170, so the values overflowed their cells. Four across two
     rows fits, and is even, which 5 + 3 never was. */
  grid-template-columns: repeat(4, 1fr);
  row-gap: 22px;
  margin-top: 14px;
  border-top: 1px solid var(--hairline);
}
/* the first cell of each row starts the row, so it carries no divider */
.summary-band.cols-8 > .stat:nth-child(4n+1) { border-left: 0; padding-left: 0; }
.stat-value.date-value { font-size: 17px; padding-top: 4px; }
.loan-notes.standalone { margin-top: 12px; }
.company-overview { margin: 12px 0 4px; font-size: 13px; line-height: 1.6; color: var(--ink-2); max-width: 86ch; }
.fin-table { margin-top: 6px; }
.docket-row.no-loan { grid-template-columns: 105px 55px 1fr 58px; }

/* ---------- situation board ---------- */
.sit-block { padding: 18px 0 10px; }
.sit-block + .sit-block { border-top: 1px solid var(--hairline); }
.sit-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.sit-title { font-size: 14px; font-weight: 600; letter-spacing: -0.005em; }
.sit-venue { font-family: var(--mono); font-size: 10.5px; color: var(--ink-3); }
.sit-cols {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 40px;
  margin-top: 10px;
}
.sit-list { margin: 5px 0 0; padding-left: 16px; }
.sit-list li { font-size: 12.5px; line-height: 1.55; color: var(--ink-2); margin: 4px 0; }
.sit-next {
  margin: 10px 0 0;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-2);
}
.sit-next.urgent { color: var(--critical-ink); font-weight: 500; }
.urgent-sub { color: var(--critical-ink); }

/* ---------- docket ---------- */
.docket { margin-top: 4px; }
.docket-row {
  display: grid;
  grid-template-columns: 105px 55px 130px 1fr 58px;
  gap: 14px;
  align-items: baseline;
  padding: 8px 0;
  border-bottom: 1px solid var(--hairline);
  font-size: 12.5px;
}
.dk-date { font-family: var(--mono); font-size: 11.5px; white-space: nowrap; }
.dk-in { font-family: var(--mono); font-size: 10.5px; color: var(--ink-3); white-space: nowrap; }
.dk-loan { font-weight: 500; }
.dk-what { color: var(--ink-2); }
.dk-kind {
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-3);
  text-align: right;
}
.docket-row.urgent .dk-date, .docket-row.urgent .dk-in { color: var(--critical-ink); }
.docket-row.ws-row { grid-template-columns: 200px 1fr auto; }

/* ---------- mini tables (bank loan detail) ---------- */
table.dt.mini { font-size: 12.5px; }
.dt.mini th { padding: 8px 9px 5px; }
.dt.mini td { padding: 7px 9px; }

/* ---------- elevation bank blocks ---------- */
.bank-block { padding: 18px 0 6px; }
.bank-block + .bank-block { border-top: 1px solid var(--hairline); }
.bank-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.bank-name { font-size: 13.5px; font-weight: 600; }
.bank-count { font-family: var(--mono); font-size: 11px; color: var(--ink-3); }
.bank-sums { font-family: var(--mono); font-size: 11px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.rationale { margin: 5px 0 2px; font-size: 12px; color: var(--ink-2); max-width: 84ch; }
.desk-note {
  margin: 10px 0 8px;
  padding: 8px 12px;
  border-left: 3px solid var(--accent);
  background: var(--hover);
}
.desk-note.editable { padding-bottom: 10px; }
.desk-note.editable:focus-within { background: var(--accent-soft); }
.dn-head { display: flex; align-items: baseline; gap: 8px; }
.note-status { font-family: var(--mono); font-size: 10px; color: var(--ink-3); }
textarea.note-input {
  display: block;
  width: 100%;
  border: 0;
  background: transparent;
  resize: none;
  overflow: hidden;
  font-family: var(--sans);
  font-size: 12px;
  line-height: 1.55;
  color: var(--ink-2);
  padding: 2px 0 0;
}
textarea.note-input:focus { outline: none; color: var(--ink); }
textarea.note-input::placeholder { color: var(--ink-3); }
.loan-desk { margin-top: 16px; }
.dn-label {
  display: block;
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent);
  margin-bottom: 3px;
}
.desk-note p { margin: 0; font-size: 12px; line-height: 1.55; color: var(--ink-2); white-space: pre-line; }

/* ---------- loan annotations ---------- */
.entities {
  font-family: var(--mono);
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-3);
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: 0 4px;
  margin-left: 4px;
  white-space: nowrap;
}
.cat-sub { display: block; font-size: 11px; color: var(--ink-3); margin-top: 2px; white-space: normal; }
td.rank { font-family: var(--mono); font-size: 11px; color: var(--ink-3); }

/* per-loan recovery notes */
.notes-col { width: 26px; }
.note-toggle {
  border: 0;
  background: none;
  cursor: pointer;
  color: var(--ink-3);
  font-size: 11px;
  padding: 2px 4px;
  line-height: 1;
}
.note-toggle:hover { color: var(--accent); }
.note-toggle .disc { display: inline-block; transition: transform 0.12s; }
.note-toggle.open .disc { transform: rotate(90deg); color: var(--accent); }
tr.note-row > td { padding: 0 0 12px 26px; border-bottom: 1px solid var(--hairline); }
.dt tbody tr.note-row:hover { background: transparent; }
.loan-notes {
  border-left: 3px solid var(--accent);
  background: var(--hover);
  padding: 8px 14px 9px;
  max-width: 96ch;
}
.loan-notes ul { margin: 0; padding-left: 16px; }
.loan-notes li { font-size: 12px; line-height: 1.55; color: var(--ink-2); margin: 2px 0; }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------- staging (transcript agent) ---------- */
.pipeline-note { margin: 12px 0 0; font-size: 12.5px; line-height: 1.55; color: var(--ink-2); max-width: 88ch; }
.stage-form { padding: 14px 0 4px; }
.stage-form-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 8px 0; }
.stage-form label { font-family: var(--mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-2); display: inline-flex; align-items: baseline; gap: 8px; }
.stage-form-label { display: block; margin-top: 10px; }
textarea.transcript {
  width: 100%;
  margin-top: 6px;
  border: 1px solid var(--rule);
  border-radius: 2px;
  background: var(--sheet);
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink);
  padding: 10px 12px;
  resize: vertical;
}
textarea.transcript:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.btn-primary, .btn-quiet {
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-radius: 2px;
  padding: 7px 14px;
  cursor: pointer;
}
.btn-primary { background: var(--accent); color: #ffffff; border: 1px solid var(--accent); }
.btn-primary:hover { background: #17393c; }
.btn-quiet { background: var(--sheet); color: var(--ink-2); border: 1px solid var(--rule); }
.btn-quiet:hover { color: var(--critical-ink); border-color: var(--critical-ink); }
.btn-primary:focus-visible, .btn-quiet:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn-link { text-decoration: none; display: inline-block; }
.btn-link:hover { color: var(--accent); border-color: var(--accent); }
.dim-sub { font-size: 10.5px; color: var(--ink-3); }
.form-error {
  margin: 14px 0 0;
  padding: 9px 12px;
  border-left: 3px solid var(--critical-ink);
  background: var(--critical-bg);
  color: var(--critical-ink);
  font-size: 12.5px;
}
.approve-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 16px;
  padding: 10px 14px;
  border: 1px solid var(--rule);
  border-left: 3px solid var(--accent);
  background: var(--hover);
  font-size: 12.5px;
  color: var(--ink-2);
}
.tag-new, .tag-dup, .tag-state {
  font-family: var(--mono);
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-radius: 2px;
  padding: 1px 5px;
  white-space: nowrap;
}
.tag-new { color: var(--good-ink); background: var(--good-bg); }
.tag-dup { color: var(--ink-3); background: var(--meter-track); }
.tag-state { color: var(--info-ink); background: var(--info-bg); }
.flag-list li { color: var(--warning-ink); }
.status-pending_review { color: var(--warning-ink); }
.status-published { color: var(--good-ink); }
.status-discarded { color: var(--ink-3); }
.batch-row { grid-template-columns: 170px 220px 1fr auto; }

.awaiting-page { padding: 60px 0 40px; }
.awaiting-page h2 { font-size: 15px; margin: 0 0 8px; }
.awaiting-page p { font-size: 13px; color: var(--ink-2); max-width: 60ch; }

/* ---------- documents ---------- */
.document-groups { display: grid; gap: 24px; }
.document-group h3 {
  margin: 0 0 8px;
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ink-2);
}
.document-list { border-top: 1px solid var(--rule); }
.document-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 18px;
  padding: 13px 0;
  border-bottom: 1px solid var(--hairline);
}
.folder-row { background: var(--hover); padding-right: 12px; padding-left: 12px; }
.document-copy { min-width: 0; }
.document-copy h4 { margin: 0; font-size: 12.5px; line-height: 1.4; overflow-wrap: anywhere; }
.document-copy > p { margin: 5px 0 0; font-size: 11px; line-height: 1.45; color: var(--ink-2); }
.document-path {
  display: block;
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 600;
  color: var(--ink);
  overflow-wrap: anywhere;
}
.document-meta { display: flex; flex-wrap: wrap; gap: 5px 12px; margin-top: 5px; }
.document-meta span, .document-meta time, .document-loans {
  font-family: var(--mono);
  font-size: 9.5px;
  color: var(--ink-3);
}
.document-loans .loan-link { margin-left: 5px; }
.document-open {
  display: inline-block;
  white-space: nowrap;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}
.document-open:hover { color: var(--brand); }
.documents-awaiting {
  max-width: 72ch;
  margin: 0;
  padding: 18px;
  border: 1px dashed var(--rule);
  background: var(--hover);
  color: var(--ink-2);
  line-height: 1.55;
}

/* ---------- responsive ---------- */
@media (max-width: 1020px) {
  .sheet { padding: 0 24px 40px; }
  .summary-band,
  .summary-band.cols-6,
  .summary-band.cols-8 { grid-template-columns: repeat(3, 1fr); row-gap: 20px; }
  /* the divider belongs on every cell except the one starting a row,
     and the column count has just changed */
  .summary-band > .stat { border-left: 1px solid var(--hairline); padding-left: 20px; }
  .summary-band > .stat:nth-child(3n+1) { border-left: 0; padding-left: 0; }
  .stat:nth-child(3n + 1) { border-left: 0; padding-left: 0; }
  .exhibit table.dt { min-width: 760px; }
  .exhibit table.dt.payments-table { min-width: 0; font-size: 12px; }
  .payments-table th { padding-right: 6px; padding-left: 6px; font-size: 9.5px; letter-spacing: 0.05em; }
  .payments-table td { padding-right: 6px; padding-left: 6px; }
  .payments-table td.num { font-size: 11.5px; }
  .sit-cols { grid-template-columns: 1fr; gap: 16px; }
  .docket-row { grid-template-columns: 105px 55px 1fr; }
  .dk-what { grid-column: 1 / -1; padding-left: 0; }
  .dk-kind { display: none; }
}
@media (max-width: 700px) {
  .payments-exhibit { overflow-x: visible; }
  .exhibit table.dt.payments-table { display: block; min-width: 0; table-layout: auto; }
  .payments-table colgroup { display: none; }
  .payments-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
  .payments-table tbody, .payments-table tfoot { display: block; width: 100%; }
  .payments-table tbody tr {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 16px;
    padding: 12px 0;
    border-bottom: 1px solid var(--hairline);
  }
  .payments-table tbody td {
    display: block;
    min-width: 0;
    padding: 0;
    border: 0;
    text-align: left;
  }
  .payments-table tbody td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 2px;
    font-family: var(--mono);
    font-size: 9px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ink-3);
  }
  .payments-table td.num { text-align: left; font-size: 12px; }
  .payments-table tfoot { border-top: 1px solid var(--rule-strong); }
  .payments-table tfoot tr {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: baseline;
    padding-top: 9px;
  }
  .payments-table tfoot td { display: none; padding: 0; border: 0; }
  .payments-table tfoot td:first-child, .payments-table tfoot td:nth-child(4) { display: block; }
  .payments-table tfoot td:nth-child(4) { text-align: right; }
}
@media (max-width: 640px) {
  .summary-band,
  .summary-band.cols-6,
  .summary-band.cols-8 { grid-template-columns: 1fr 1fr; }
  /* the divider belongs on every cell except the one starting a row,
     and the column count has just changed */
  .summary-band > .stat { border-left: 1px solid var(--hairline); padding-left: 20px; }
  .summary-band > .stat:nth-child(2n+1) { border-left: 0; padding-left: 0; }
  .stat:nth-child(3n + 1) { border-left: 1px solid var(--hairline); padding-left: 20px; }
  .stat:nth-child(2n + 1) { border-left: 0; padding-left: 0; }
  .sheet { padding: 0 16px 32px; }
  .document-row { grid-template-columns: minmax(0, 1fr); gap: 9px; }
  .document-open { justify-self: start; }
}

/* --------------------------------------------------------------------------
   Scorecard variables, added for the 2x2 KPI cards lifted from the prototype.

   Mapped to the app's palette rather than importing the prototype's whole
   variable block, so there is one palette here, not two overlapping ones.

   --font-display deliberately resolves to Public Sans, NOT the prototype's
   Archivo: Archivo is not among the self-hosted woff2 files, and pulling it
   from Google would reintroduce the external request that was removed.
   -------------------------------------------------------------------------- */
:root {
  --font-display: var(--sans);
  --font-mono: var(--mono);
  --brand-ink: var(--brand);
  --brand-rule: var(--brand);
  --brand-soft: #f3e9ec;
  --hero-bg: #214f53;          /* the dark fill behind a hero tile */
  --on-accent: #ffffff;
  --surface-hover: var(--hover);
  --surface-sunk: var(--plane);
  --shadow: 0 1px 2px rgba(26,26,26,.06), 0 1px 8px rgba(26,26,26,.04);
}

/* --------------------------------------------------------------------------
   KPI scorecards: four cards, 2 x 2, each with two tiles and a disclosure
   holding a sortable detail table. Lifted from the prototype so the layout
   matches rather than approximates it.
   -------------------------------------------------------------------------- */
/* The 12-column grid the prototype uses. The app never had one, which is why
   two col-7 / col-5 panels stacked instead of sitting side by side. */
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
        gap: 14px; margin-bottom: 14px; }
.col-3 { grid-column: span 3; }
.col-4 { grid-column: span 4; }
.col-5 { grid-column: span 5; }
.col-6 { grid-column: span 6; }
.col-7 { grid-column: span 7; }
.col-8 { grid-column: span 8; }
@media (max-width: 900px) {
  .col-3, .col-4, .col-5, .col-6, .col-7, .col-8 { grid-column: span 12; }
}

/* .grid stays 12 columns and col-6 does the halving, exactly as the prototype
   does it. Overriding to 2 columns here made col-6 span 6 OF 2, i.e. the whole
   row, which stacked the four cards.
   Deliberately NOT grid-auto-rows: 1fr, which the prototype uses: that ties the
   rows to equal height, so expanding one card's disclosure stretched all four. */
/* The card matches its row-mate's height, and its contents do not grow to
   fill: opening one disclosure makes its neighbour taller, and that extra
   height shows as blank card rather than a stretched hero tile.

   Cards in a row now match height. The earlier note said this was avoided
   because grid-auto-rows: 1fr ties every ROW to the same height, so expanding
   one disclosure stretched all four cards. Stretching within a row does not:
   rows stay independent, and only a card's own row-mate follows it. */
.grid-2x2 { align-items: stretch; }
.kpi-card .tiles { min-height: 100px; }
.tiles-stack .tile { display: flex; flex-direction: column; justify-content: center; }

.kpi-card { background: var(--surface); border: 1px solid var(--sheet-border);
            border-top: 2px solid var(--brand-rule); border-radius: 3px;
            box-shadow: var(--shadow); display: flex; flex-direction: column;
            min-width: 0; }
.kpi-card .panel-head { padding: 11px 16px 9px; border-bottom: 1px solid var(--rule); }
.kpi-card .panel-title { font-family: var(--font-display); font-size: 13px;
                         font-weight: 700; color: var(--brand-ink); margin: 0;
                         letter-spacing: -.01em; text-wrap: balance; }
.kpi-card .panel-body { padding: 0; flex: 1 1 auto; display: flex;
                        flex-direction: column; }

.tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
         border-bottom: 1px solid var(--rule); }
.tiles-stack { grid-template-columns: minmax(0, 1fr); }
.tile { padding: 14px 16px 15px; min-width: 0; }
.tile + .tile { border-left: 1px solid var(--rule); }
.tiles-stack .tile + .tile { border-left: 0; border-top: 1px solid var(--rule); }
.tile.hero { background: var(--hero-bg); }
.tile-label { font-family: var(--font-mono); font-size: 9.5px;
              text-transform: uppercase; letter-spacing: .09em;
              color: var(--ink-3); margin-bottom: 6px; }
.tile.hero .tile-label { color: rgba(255,255,255,.7); }
.tile-value { font-family: var(--font-mono); font-size: 25px; font-weight: 500;
              color: var(--ink); letter-spacing: -.02em; line-height: 1.05;
              font-variant-numeric: tabular-nums; }
.tile-value.long { font-size: 22px; }
.tile.hero .tile-value { color: var(--on-accent); }
.tile-value.tbd { font-size: 17px; color: var(--ink-3); font-weight: 400;
                  letter-spacing: .04em; }

.disclose { width: 100%; display: flex; align-items: center; gap: 8px;
            padding: 9px 16px; background: var(--surface-sunk); border: 0;
            border-top: 1px solid var(--rule); font-family: var(--font-mono);
            font-size: 10.5px; text-transform: uppercase; letter-spacing: .07em;
            color: var(--ink-2); cursor: pointer; text-align: left; }
.disclose:hover { background: var(--surface-hover); color: var(--ink); }
.disclose .disc { display: inline-block; transition: transform .12s ease;
                  font-size: 9px; }
.disclose[aria-expanded="true"] .disc { transform: rotate(90deg); }
.disclose-meta { margin-left: auto; color: var(--ink-3); text-transform: none;
                 letter-spacing: 0; font-size: 10px; }

.kpi-card .tbl-scroll { overflow-x: auto; }
.kpi-card .list-scroll { max-height: 260px; overflow-y: auto; }
/* Engagement activity detail: 50-67 conversations is far too long to expand in
   full, so the panel keeps its height and the list scrolls inside it. */
.panel .list-scroll { max-height: 300px; overflow-y: auto; }
.kpi-card table.dt.mini { width: 100%; border-collapse: collapse; font-size: 11.5px; }
.kpi-card table.dt.mini th { position: sticky; top: 0; background: var(--surface);
    font-family: var(--font-mono); font-size: 9px; text-transform: uppercase;
    letter-spacing: .07em; color: var(--ink-3); font-weight: 500;
    text-align: left; padding: 7px 10px; border-bottom: 1px solid var(--rule-strong);
    white-space: nowrap; }
.kpi-card table.dt.mini th.num, .kpi-card table.dt.mini td.num { text-align: right; }
.kpi-card table.dt.mini th.sortable { cursor: pointer; user-select: none; }
.kpi-card table.dt.mini th.sortable:hover { color: var(--ink); }
.kpi-card table.dt.mini th .arw { opacity: 0; font-size: 7px; margin-left: 3px; }
.kpi-card table.dt.mini th.sorted .arw { opacity: 1; }
.kpi-card table.dt.mini th.sorted.desc .arw { display: inline-block;
                                              transform: rotate(180deg); }
.kpi-card table.dt.mini td { padding: 7px 10px; border-bottom: 1px solid var(--hairline);
    vertical-align: top; }
.kpi-card table.dt.mini td.num { font-family: var(--font-mono);
    font-variant-numeric: tabular-nums; white-space: nowrap; }
.kpi-card table.dt.mini tbody tr:hover td { background: var(--surface-hover); }
.kpi-card table.dt.mini td.awaiting { color: var(--ink-3); font-style: italic;
    text-align: center; padding: 18px 10px; }

.panel-note { margin: 0; padding: 10px 16px 12px; font-size: 10.5px;
              line-height: 1.45; color: var(--ink-3);
              border-top: 1px solid var(--hairline); }
.panel-note .flag { font-family: var(--font-mono); color: var(--ink-2); }

/* an unallocated paydown is an upper bound, not a value */
.est-upb { color: var(--ink-2); }
.est-upb::after { content: " ~"; font-family: var(--font-mono); color: var(--ink-3); }

/* --------------------------------------------------------------------------
   FPS notes: the Dynamo activity log, five most recent on a loan page and the
   full history on its own page.
   -------------------------------------------------------------------------- */
.act-row { padding: 11px 16px 13px; border-bottom: 1px solid var(--hairline); }
.act-row:last-child { border-bottom: 0; }
.act-meta { display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px;
            margin-bottom: 5px; }
.act-date { font-size: 11px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.act-who { font-size: 11.5px; font-weight: 600; color: var(--ink); }
.act-cp, .act-cat { font-family: var(--font-mono); font-size: 9px;
                    text-transform: uppercase; letter-spacing: .07em;
                    color: var(--ink-3); border: 1px solid var(--rule);
                    border-radius: 2px; padding: 1px 5px; }
.act-multi { font-size: 10.5px; color: var(--ink-3); }
.act-body { margin: 0; font-size: 12px; line-height: 1.5; color: var(--ink-2);
            white-space: pre-wrap; }

/* --------------------------------------------------------------------------
   Engagement: two side-by-side panels, bars, each with its own disclosure
   holding the conversations behind the buckets.
   -------------------------------------------------------------------------- */
.panel-sub { font-family: var(--font-mono); font-size: 9.5px; text-transform: uppercase;
             letter-spacing: .07em; color: var(--ink-3); margin-left: 10px; }
.eng-grid { display: grid; }
.eng-item { padding: 11px 16px; border-bottom: 1px solid var(--hairline);
            display: grid; grid-template-columns: 1fr 96px 46px; align-items: center;
            gap: 12px; }
.eng-item:last-child { border-bottom: 0; }
.eng-lab { font-size: 12px; color: var(--ink); }
.eng-track { height: 6px; background: var(--meter-track); border-radius: 3px;
             overflow: hidden; }
.eng-track i { display: block; height: 100%; background: var(--accent); }
.eng-num { font-family: var(--font-mono); font-size: 14px; text-align: right;
           color: var(--ink); font-variant-numeric: tabular-nums; }
.eng-zero .eng-num { color: var(--ink-3); }

/* --------------------------------------------------------------------------
   Potential elevations: one collapsible block per bank.
   -------------------------------------------------------------------------- */
.bank-head { width: 100%; display: flex; align-items: baseline; gap: 10px;
             padding: 10px 16px; background: var(--surface); border: 0;
             border-top: 1px solid var(--rule); cursor: pointer; text-align: left; }
.bank-head:hover { background: var(--surface-hover); }
.bank-head .disc { font-size: 9px; transition: transform .12s ease; }
.bank-head[aria-expanded="true"] .disc { transform: rotate(90deg); }
.bank-name { font-weight: 600; font-size: 12.5px; color: var(--brand-ink); }
.bank-meta { margin-left: auto; font-family: var(--font-mono); font-size: 10px;
             color: var(--ink-3); }
.bank-why { padding: 0 16px 10px 32px; font-size: 11px; color: var(--ink-2); margin: 0; }
.bank-note { padding: 8px 12px; margin: 0 16px 12px 32px; font-size: 11px;
             line-height: 1.5; color: var(--ink-2);
             border-left: 2px solid var(--accent-soft); background: var(--surface-sunk); }

/* --------------------------------------------------------------------------
   Payments received: daily bars stacked by attribution.
   -------------------------------------------------------------------------- */
.pay-chart { padding: 8px 16px 4px; position: relative; }
.pay-legend { display: flex; flex-wrap: wrap; gap: 14px; margin: 0 0 4px;
              font-family: var(--font-mono); font-size: 10px; color: var(--ink-2); }
.pay-legend i { display: inline-block; width: 9px; height: 9px; border-radius: 1px;
                margin-right: 5px; vertical-align: -1px; }
.pay-legend b { font-weight: 500; color: var(--ink); margin-left: 4px; }
.pay-svg { width: 100%; height: auto; display: block; }
.pay-svg .ax { font-family: var(--font-mono); font-size: 9px; fill: var(--ink-3); }

/* day-column hover target and tooltip for the stacked chart */
.pay-svg .hit { fill: transparent; cursor: default; }
/* A whole-column tint at .035 read as a distinct grey block on a white panel.
   .015 still shows which column is active without looking like a UI element. */
.pay-svg .hit:hover { fill: var(--ink); fill-opacity: .015; }
/* position: fixed, not absolute. .exhibit sets overflow-x: auto, and an
   absolutely-positioned child of a scroll container is clipped by it and adds
   to its scroll extent, which produced both the cut-off tooltip and a
   scrollbar. Fixed takes it out of that box entirely. */
.pay-tip { position: fixed; z-index: 40; pointer-events: none; display: none;
           background: var(--surface); border: 1px solid var(--rule);
           box-shadow: 0 2px 6px rgba(26,26,26,.10), 0 8px 24px rgba(26,26,26,.10);
           border-radius: 3px; padding: 8px 10px; font-size: 11px;
           min-width: 176px; max-width: 260px; }
.pay-tip .t-day { font-family: var(--font-mono); font-size: 9.5px;
                  text-transform: uppercase; letter-spacing: .07em;
                  color: var(--ink-3); margin-bottom: 5px; }
.pay-tip .t-row { display: flex; align-items: center; gap: 7px; padding: 1.5px 0; }
.pay-tip .t-row i { width: 8px; height: 8px; border-radius: 1px; flex: 0 0 auto; }
.pay-tip .t-row span { color: var(--ink-2); }
.pay-tip .t-row b { margin-left: auto; font-family: var(--font-mono);
                    font-weight: 500; color: var(--ink);
                    font-variant-numeric: tabular-nums; }
.pay-tip .t-tot { border-top: 1px solid var(--hairline); margin-top: 4px;
                  padding-top: 4px; }

/* a labelled note inside an expanded bank block */
.bank-note .dn-label { display: block; font-family: var(--font-mono);
                       font-size: 9px; text-transform: uppercase;
                       letter-spacing: .07em; color: var(--ink-3);
                       margin-bottom: 4px; }

/* the activity log page keeps the same sheet as every other page */
.act-row .act-body { margin-top: 2px; }
.eng-item.eng-filler { border-bottom-color: transparent; }

/* ==========================================================================
   Lender readout
   Built entirely from the tokens above. The only genuinely new pieces are the
   posture marker, the week picker, the readout blocks and the machine record.
   ========================================================================== */

.masthead-nav { display: flex; gap: 16px; margin-left: 22px; }
.masthead-nav a {
  color: var(--on-brand-dim); text-decoration: none;
  font-size: 12px; letter-spacing: .01em; padding: 2px 0;
  border-bottom: 1px solid transparent;
}
.masthead-nav a:hover { color: var(--on-brand); }
.masthead-nav a.on { color: var(--on-brand); border-bottom-color: var(--on-brand); }


/* A payoff that has slipped its expected week. Warning colours rather than
   serious ones: a date was missed, the money is still expected. */
.summary-band.cols-2 { grid-template-columns: repeat(2, 1fr); }
/* The header rule sits directly above, so the band needs the same air the
   other exhibits have between their rule and their first line. */
.ip-band { padding: 20px 0 4px; border-bottom: 0; }
.stat-value.sm { font-size: 17px; }
.stat-sub { margin-top: 5px; font-size: 12px; color: var(--ink-3); }
.late-badge {
  display: inline-block; margin-left: 6px; vertical-align: 1px;
  font-family: var(--mono); font-size: 9px; font-weight: 500;
  text-transform: uppercase; letter-spacing: .08em;
  color: var(--warning-ink); background: var(--warning-bg);
  border: 1px solid currentColor; border-radius: 2px; padding: 1px 5px;
  white-space: nowrap;
}
.beta-pill {
  font-family: var(--font-mono); font-size: 9px; font-weight: 500;
  text-transform: uppercase; letter-spacing: .09em;
  color: var(--warning-ink); background: var(--warning-bg);
  border: 1px solid currentColor; border-radius: 2px; padding: 1px 5px;
  margin-left: 6px; vertical-align: 1px;
}

.awaiting-block { padding: 60px 0; max-width: 64ch; }
.awaiting-block h2 { margin: 0 0 10px; font-size: 17px; font-weight: 600; }
.awaiting-block p { margin: 0; font-size: 13px; line-height: 1.6; color: var(--ink-2); }
.awaiting-block code {
  font-family: var(--font-mono); font-size: 12px;
  background: var(--surface-sunk); padding: 1px 4px; border-radius: 2px;
}

/* week picker: a segmented control, the newest week last */
.week-row { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; padding: 20px 0 0; }
.week-pick { display: flex; border: 1px solid var(--rule); border-radius: 3px; overflow: hidden; }
.week-pick a, .week-pick span {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .06em;
  padding: 5px 11px; color: var(--ink-2); text-decoration: none;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.week-pick a + a, .week-pick a + span, .week-pick span + a, .week-pick span + span {
  border-left: 1px solid var(--rule);
}
.week-pick a:hover { background: var(--hover); color: var(--ink); }
.week-pick a.on { background: var(--accent); color: var(--surface); font-weight: 600; }
.week-pick a.on:hover { background: var(--accent); color: var(--surface); }
.week-pick .off { color: var(--ink-3); background: var(--surface-sunk); cursor: default; }
.week-state { font-size: 11.5px; color: var(--ink-3); max-width: 62ch; }

/* posture marker: the .tier family, bordered and tinted, never a status pill */
.posture {
  display: inline-block; font-family: var(--font-mono); font-size: 10px;
  font-weight: 500; text-transform: uppercase; letter-spacing: .05em;
  padding: 2px 7px; border-radius: 2px; border: 1px solid currentColor;
  white-space: nowrap;
}
.posture.cooperative { color: var(--good-ink); background: var(--good-bg); }
.posture.mixed { color: var(--warning-ink); background: var(--warning-bg); }
.posture.difficult { color: var(--serious-ink); background: var(--serious-bg); }
.posture.not-enough-to-say { color: var(--ink-3); border-color: var(--rule); background: none; }

.standing-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.standing-window { font-family: var(--font-mono); font-size: 10px; color: var(--ink-3); }
.standing-text { margin: 8px 0 0; font-size: 13px; line-height: 1.62; color: var(--ink); max-width: 78ch; }

/* the generated blocks */
.rd-block { padding: 16px 0 6px; }
.rd-block + .rd-block { border-top: 1px solid var(--hairline); }
.rd-bullets { list-style: none; margin: 6px 0 0; padding: 0; }
.rd-bullets > li { padding: 0 0 14px; max-width: 78ch; }
.rd-bullets > li:last-child { padding-bottom: 4px; }
.rd-text { font-size: 13px; line-height: 1.62; color: var(--ink); }
.rd-none { margin: 6px 0 0; font-size: 12.5px; color: var(--ink-3); }
.prov-note {
  display: inline-block; margin-top: 5px; font-family: var(--font-mono);
  font-size: 9.5px; text-transform: uppercase; letter-spacing: .07em;
  color: var(--ink-3);
}

.rd-items { width: 100%; border-collapse: collapse; margin-top: 6px; }
.rd-items td { padding: 8px 12px 8px 0; border-bottom: 1px solid var(--hairline); vertical-align: top; }
.rd-items tr:last-child td { border-bottom: 0; }
.it-what { font-size: 12.5px; line-height: 1.55; max-width: 62ch; }
.it-owner { font-size: 11.5px; white-space: nowrap; }
.it-owner.unassigned { color: var(--ink-3); }
.it-when {
  font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-3);
  white-space: nowrap; font-variant-numeric: tabular-nums;
}

.next-step { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-top: 6px; }
.ns-date {
  font-family: var(--font-mono); font-size: 12.5px; font-weight: 600;
  color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.ns-what { font-size: 12.5px; color: var(--ink-2); }

/* the machine record, deliberately unlike the prose above it */
.gen-foot {
  margin-top: 18px; padding: 9px 14px;
  background: var(--surface-sunk); border-top: 1px solid var(--rule);
  display: flex; flex-wrap: wrap; gap: 3px 22px;
  font-family: var(--font-mono); font-size: 9.5px; color: var(--ink-3);
}
.gen-foot b {
  font-weight: 500; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-2);
}

/* a week too thin to read out, and a week nobody answered */
.thin-note {
  margin: 14px 0 0; padding: 8px 14px 9px; max-width: 92ch;
  border-left: 3px solid var(--warning-ink); background: var(--warning-bg);
  font-size: 12px; line-height: 1.5; color: var(--warning-ink);
}
.attempt-note {
  margin: 14px 0 0; padding: 8px 14px 9px; max-width: 92ch;
  border-left: 3px solid var(--ink-3); background: var(--surface-sunk);
  font-size: 12px; line-height: 1.5; color: var(--ink-2);
}

.no-contact { padding: 26px 0 6px; max-width: 76ch; }
.no-contact h3 { margin: 0 0 7px; font-size: 14px; font-weight: 700; }
.no-contact p { margin: 0 0 10px; font-size: 12.5px; line-height: 1.55; color: var(--ink-2); }
.nc-weeks { list-style: none; margin: 12px 0 0; padding: 0; }
.nc-weeks li {
  display: flex; align-items: baseline; gap: 12px;
  padding: 8px 0; border-bottom: 1px solid var(--hairline); font-size: 12.5px;
}
.nc-weeks .nc-wk {
  font-family: var(--font-mono); font-size: 11.5px; width: 104px;
  font-variant-numeric: tabular-nums; color: var(--ink);
}
.nc-weeks .nc-state { color: var(--ink-3); font-size: 12px; }

/* the quiet roster on the index */
.nc-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 0 28px; margin-top: 6px;
}
.nc-item {
  display: flex; justify-content: space-between; gap: 12px; align-items: baseline;
  padding: 7px 0; border-bottom: 1px solid var(--hairline); font-size: 12px;
}
.nc-item .nc-when {
  font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-3);
  white-space: nowrap; font-variant-numeric: tabular-nums;
}

.lead-line { font-size: 12px; line-height: 1.55; color: var(--ink-2); max-width: 58ch; }
.dt.mini td.lead-cell { max-width: 460px; }
.theme-row { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.theme-chip {
  font-family: var(--font-mono); font-size: 9px; text-transform: uppercase;
  letter-spacing: .07em; color: var(--ink-3); border: 1px solid var(--rule);
  border-radius: 2px; padding: 1px 5px; white-space: nowrap;
}
.theme-chip b { font-weight: 600; color: var(--ink-2); }

@media (max-width: 900px) {
  .masthead-nav { margin-left: 12px; gap: 12px; }
  .dt.mini td.lead-cell { max-width: none; }
}

/* Explanatory notes, collapsed. They earn their place on the page but not at
   the cost of crowding out what they explain, so they sit behind a summary and
   open only when someone wants them. */
details.note { margin: 10px 0 0; max-width: 78ch; }
details.note > summary {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: 9.5px; text-transform: uppercase;
  letter-spacing: .07em; color: var(--ink-3); cursor: pointer;
  list-style: none; padding: 2px 0;
}
details.note > summary::-webkit-details-marker { display: none; }
details.note > summary::before {
  content: "\25B8"; font-size: 8px; transition: transform .12s ease;
}
details.note[open] > summary::before { transform: rotate(90deg); }
details.note > summary:hover { color: var(--accent); }
details.note > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
details.note[open] > summary { color: var(--accent); }
details.note > summary + * , details.note > :not(summary) {
  margin: 6px 0 0; font-size: 11.5px; line-height: 1.5; color: var(--ink-3);
}
details.note { font-size: 11.5px; line-height: 1.5; color: var(--ink-3); }