/* The results table and its drawer — shared by the dashboard (app.html) and
   the public sample page (sample.html), which render rows with the same
   script, web/js/results.js. Loaded after tokens.css and site.css; every
   value here is a token. */

.meta {
  font-family: var(--font-body);
  font-size: var(--size-caption);
  font-weight: var(--weight-regular);
  letter-spacing: 0;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}
.nofile { font-style: italic; color: var(--text-muted); }

/* ---- the results table ----
   Four things per row by default — score, company, signal, the eldest
   controller's age band — behind a toggle column. Everything else is in the
   drawer under the row (web/js/results.js). The company column takes the
   spare width, so the row reads on a phone as well as a laptop. */
.results th { white-space: normal; vertical-align: bottom; }
.results th, .results td { padding-left: 10px; padding-right: 10px; }
.results td { vertical-align: middle; }
.results th:nth-child(3), .results td:nth-child(3) { width: 100%; min-width: 200px; }
.results td:nth-child(4), .results td:nth-child(5) { white-space: nowrap; }
@media (max-width: 1366px) {
  .results th, .results td { padding-left: 8px; padding-right: 8px; }
}
th.sortable { cursor: pointer; user-select: none; }
th.sortable:hover, th.sorted { color: var(--text-heading); }
th.sortable::after { content: attr(data-arrow); margin-left: 4px; color: var(--text-heading); }
th.num, td.num { text-align: right; }
.co { font-weight: var(--weight-semibold); color: var(--text-heading); }
.row-links { display: flex; flex-wrap: wrap; gap: 2px var(--space-3); margin-top: 6px; }
.row-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
/* A long pill ("invoice finance anniversary 18d") may wrap rather than set the
   company column's width; wrapped, it takes the card radius. */
.row-pills .badge { white-space: normal; border-radius: var(--radius-md); }
.detailrow > td, .table tbody tr.detailrow:hover > td { background: var(--surface-raised); }
.detailbox { padding: var(--space-3) var(--space-1) var(--space-4); }

/* A button that reads as a link — the row actions. */
.linkbtn {
  display: inline;
  padding: 0;
  font-weight: var(--weight-regular);
  color: var(--text-link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  background: none;
  border: 0;
  cursor: pointer;
}
.linkbtn:hover { color: var(--text-link-hover); }
/* Every td is tabular (tokens.css), and Inter's tabular set widens the hyphen
   too — right for a date column, wrong inside "follow-up" or a company name.
   Words get the proportional forms back. */
.linkbtn, .co, .badge, .lu-match .co { font-variant-numeric: normal; font-feature-settings: normal; }
.linkbtn:disabled { color: var(--text-muted); cursor: not-allowed; }
.watchbtn.on { font-weight: var(--weight-semibold); color: var(--text-heading); }

/* The score. A band is a border weight and the number's own ink, never a
   colour: a high score is a triage order, not a succession signal. */
.scorebox {
  width: 72px;
  padding: 6px 4px;
  text-align: center;
  cursor: pointer;
  background: var(--surface-page);
  border: var(--border-width) solid var(--border-default);
  border-radius: var(--radius-md);
}
.scorebox:hover { border-color: var(--border-strong); background: var(--surface-hover); }
.scorebox .sc {
  font-size: var(--size-lead);
  font-weight: var(--weight-semibold);
  line-height: 1.1;
  color: var(--text-heading);
  font-variant-numeric: tabular-nums;
}
.scorebox .cov { margin-top: 2px; font-size: var(--size-caption); line-height: var(--leading-caption); color: var(--text-muted); white-space: nowrap; }
.scorebox.hi { border: 2px solid var(--border-strong); padding: 5px 3px; }
.scorebox.lo .sc { font-weight: var(--weight-regular); color: var(--text-muted); }
/* Stacked under the score: "do not write", "subsidiary", "gazette notice".
   The width of the score box and allowed to wrap, so a two-word flag cannot
   widen the whole column. A wrapped pill reads badly, so these take the
   card radius instead. */
.cell-flag {
  display: flex;
  justify-content: center;
  width: 72px;
  margin-top: 6px;
  padding: 2px 4px;
  text-align: center;
  white-space: normal;
  border-radius: var(--radius-md);
}

.conf { display: block; width: fit-content; margin-top: 6px; font-size: var(--size-caption); line-height: var(--leading-caption); color: var(--text-muted); }
.conf.estimated { padding: 0 8px; border: var(--border-width) dashed var(--border-default); border-radius: var(--radius-pill); }
/* The date an exact holding is stated as at — a source attribution, so the
   caption size is allowed (brand rule 4). */
.asat { display: block; margin-top: 4px; font-size: var(--size-caption); line-height: var(--leading-caption); color: var(--text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.people { line-height: var(--leading-lead); }
.people b { font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums; }
.pct { white-space: nowrap; font-variant-numeric: tabular-nums; }

.fin { line-height: var(--leading-lead); white-space: nowrap; font-variant-numeric: tabular-nums; }
.fin .lbl { font-size: var(--size-caption); letter-spacing: var(--tracking-eyebrow); color: var(--text-muted); }
.fin .val { color: var(--text-body); }
/* Direction is the arrow or the sign, not a colour (see the note above). */
.up, .down { color: inherit; }

.ostat { width: auto; max-width: 150px; padding: 6px 8px; }
.ostat.letter_sent, .ostat.called, .ostat.emailed { border-color: var(--border-strong); }
.ostat.responded, .ostat.meeting, .ostat.progressing { border-color: var(--border-strong); font-weight: var(--weight-semibold); }
.ostat.declined { color: var(--text-muted); }
.ostat.do_not_contact { border-color: var(--border-strong); color: var(--text-muted); }
.fu { display: block; margin-top: 4px; }
.fu.overdue { font-weight: var(--weight-semibold); color: var(--text-heading); }
.fu.soon { font-weight: var(--weight-medium); }

/* ---- the expanded detail row ---- */
.fgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-3); }
.fitem { padding-left: var(--space-3); border-left: 2px solid var(--border-default); }
.fitem .fl {
  margin-bottom: 2px;
  font-size: var(--size-caption);
  font-weight: var(--weight-medium);
  line-height: var(--leading-caption);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-muted);
}
.fitem .fv { font-weight: var(--weight-medium); color: var(--text-body); font-variant-numeric: tabular-nums; }
.fv__unit { font-size: var(--size-caption); font-weight: var(--weight-regular); color: var(--text-muted); }
.fnote { max-width: 80ch; margin-top: var(--space-3); font-size: var(--size-caption); line-height: var(--leading-lead); color: var(--text-muted); }
.fnote strong { color: var(--text-body); }
.fnote--rule { margin-top: var(--space-4); padding-left: var(--space-3); border-left: 3px solid var(--border-strong); }
code {
  padding: 0 4px;
  background: var(--surface-raised);
  border: var(--border-width) solid var(--border-default);
  border-radius: var(--radius-sm);
}
.url-code { word-break: break-all; user-select: all; }
.subhead {
  margin: var(--space-5) 0 var(--space-2);
  padding-bottom: var(--space-1);
  font-size: var(--size-caption);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-muted);
  border-bottom: var(--border-width) solid var(--border-default);
}
.steps { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); margin-top: var(--space-1); font-variant-numeric: tabular-nums; }
.steps b { font-weight: var(--weight-semibold); }
.steps span { color: var(--text-muted); }
/* Percentile marker. Deliberately a position on a line rather than a big
   number: the peer group is whatever has been loaded, so the shape of the
   answer should look approximate. Namespaced .pctbar so it can never collide
   with a layout class of the same short name. */
.pctbar { position: relative; max-width: 320px; height: 6px; margin: 8px 0 6px; background: var(--surface-selected); border-radius: var(--radius-sm); }
.pctbar i { position: absolute; top: -3px; width: 2px; height: 12px; background: var(--chart-1); }
.pctbar u { position: absolute; top: 0; left: 50%; width: 1px; height: 6px; background: var(--chart-2); }
.chargerow {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2) var(--space-3);
  padding: var(--space-2) 0;
  border-bottom: var(--border-width) solid var(--border-default);
}
.chargerow .when { min-width: 96px; font-size: var(--size-caption); color: var(--text-muted); font-variant-numeric: tabular-nums; }
.chargerow .who { color: var(--text-body); }


/* ---- the drawer ---- */
.drawer-toggle { width: 1%; padding-right: 0; }
.drawer-btn {
  min-width: 32px;
  min-height: 32px;
  padding: 0;
  color: var(--text-heading);
  background: var(--surface-page);
  border: var(--border-width) solid var(--border-default);
  border-radius: var(--radius-md);
  cursor: pointer;
}
.drawer-btn:hover { border-color: var(--border-strong); background: var(--surface-hover); }
.drawer-btn[aria-expanded="true"] { border-color: var(--border-strong); }
.summary-row .scorebox { cursor: pointer; }
.drawer-flags { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-3); }
.drawer-flags p { margin: 0; }
.drawer-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: var(--border-width) solid var(--border-default);
}
.drawer-actions .ostat-wrap { display: flex; align-items: center; gap: var(--space-2); }
.drawer-lead { margin: 0 0 var(--space-2); }
.drawer-callout { margin-top: var(--space-4); }
.detailbox .subhead:first-child { margin-top: 0; }
.working td { padding: var(--space-2) 6px; vertical-align: top; }
.working .dt { font-size: var(--size-caption); line-height: var(--leading-lead); color: var(--text-muted); }
ul.people { margin: 0; padding-left: var(--space-4); }
.results-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-2) var(--space-4);
  margin-bottom: var(--space-3);
}
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* A phone: the four cells must fit without a sideways scroll, so the
   company column gives up its floor, labels may wrap, and each factor of the
   working stacks its detail line under its numbers. */
@media (max-width: 640px) {
  .results th, .results td { padding-left: 4px; padding-right: 4px; }
  .results th:nth-child(3), .results td:nth-child(3) { min-width: 0; }
  .results td:nth-child(4), .results td:nth-child(5) { white-space: normal; }
  .results td:nth-child(3) { overflow-wrap: anywhere; }
  .results .scorebox { width: 52px; padding-left: 2px; padding-right: 2px; }
  .results .badge { white-space: normal; }
  .results th { letter-spacing: 0; }
  /* The arrow column goes; the score box is the toggle (role=button). */
  .results .drawer-toggle { display: none; }
  .working tr { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; }
  .working td.dt { grid-column: 1 / -1; padding-top: 0; }
  .detailbox { padding-left: 0; padding-right: 0; }
}

/* ---- the drafted letter, printed (app.html "Print or save as PDF") ----
   Only the sheet prints while body.printing-letter is set: every dialog and
   the dashboard are hidden. Body size and ink come from tokens.css's print
   block, which is what keeps it legible on a mono laser printer. */
.print-letter { display: none; }
@media print {
  body.printing-letter > *:not(#print-letter) { display: none !important; }
  body.printing-letter #print-letter { display: block; }
  .print-letter .pl-sender { margin-left: auto; max-width: 60%; text-align: right;
    white-space: pre-line; margin-bottom: var(--space-7); line-height: var(--leading-lead); }
  .print-letter .pl-body { white-space: pre-wrap; line-height: var(--leading-lead); }
  .print-letter .pl-footer { margin-top: var(--space-7); padding-top: var(--space-2);
    border-top: var(--border-width) solid var(--border-default);
    font-size: var(--size-caption); line-height: var(--leading-caption);
    white-space: pre-line; break-inside: avoid; }
}
@page { size: A4; margin: 20mm; }