/* Office workflow improvements: readable summaries, complete lists and focused detail views. */
.office-ux-metrics { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,11rem),1fr)); gap:.8rem; margin:1rem 0; }
.office-ux-metrics .metric-label { white-space:normal; overflow:visible; text-overflow:clip; }
/* Where the review's status is said. It used to be a fourth metric card, which meant "Awaiting office
   review" was set in the size reserved for a number and wrapped onto three lines next to 95%, 1 and 1.
   A state is a pill; this screen draws them everywhere else. */
.office-ux-status { margin:-.4rem 0 1rem; }
.office-metric-link { border:0; padding:0; border-radius:var(--radius-sm); background:none; color:inherit; font:inherit; text-align:left; cursor:pointer; }
.office-metric-link .metric-card { height:100%; }
.office-metric-link:hover .metric-card { border-color:var(--accent); }
.office-ux-filters { display:flex; flex-wrap:wrap; align-items:end; gap:.75rem; margin:1rem 0; }
.office-ux-filters label { display:grid; gap:.35rem; flex:1 1 11rem; min-width:0; }
.office-ux-filters label > span { font-size:.85rem; font-weight:650; }
.office-ux-filters input,.office-ux-filters select { width:100%; min-width:0; }
.office-ux-pagination { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:.75rem; margin-top:1rem; }
.sales-save-bar { display:flex; align-items:center; flex-wrap:wrap; gap:.75rem; margin:.75rem 0; }
.sales-save-bar p { margin:0; }
.office-review-page .office-review-card { padding:1rem; box-shadow:none; }
.office-review-page .office-review-card h3 { margin:.2rem 0; }
.office-review-page .office-review-card .definition-grid { gap:.5rem; }
.office-review-compare { grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
.office-source-panel { position:sticky; top:6rem; }
.office-source-preview { min-height:14rem; margin-top:1rem; border:1px solid var(--line); border-radius:.6rem; padding:.75rem; background:var(--surface); }
.office-source-preview iframe { display:block; width:100%; height:58vh; border:0; background:white; }
.office-source-preview img { display:block; width:100%; max-height:65vh; object-fit:contain; background:white; }
.office-source-preview h4 { overflow-wrap:anywhere; margin:0 0 .5rem; }
.review-comparison { width:100%; border-collapse:collapse; }
.review-comparison caption { text-align:left; font-size:1.05rem; font-weight:700; margin-bottom:.75rem; }
.review-comparison td,.review-comparison th { text-align:left; vertical-align:top; padding:.65rem; overflow-wrap:anywhere; white-space:normal; }
.review-comparison td small { display:block; font-weight:650; margin-top:.3rem; }
.review-field-changed { background:var(--warn-soft); }
.review-advanced { margin-top:1rem; }
.review-advanced summary { cursor:pointer; padding:.6rem 0; font-weight:650; }
.planner-details-button { display:flex; flex-direction:column; align-items:flex-start; border:0; border-radius:.3rem; padding:.3rem; background:transparent; color:inherit; cursor:pointer; font:inherit; text-align:left; }
.planner-details-button > span { font-size:.75rem; text-decoration:underline; }
.office-fleet-planner .planner-detail-overlay .side-card { position:fixed; inset:0 0 0 auto; margin:0; width:min(100%,29rem); max-width:none; height:100%; max-height:100dvh; overflow:auto; overscroll-behavior:contain; border-radius:1rem 0 0 1rem; box-shadow:-8px 0 30px rgba(0,0,0,.18); }
.planner-detail-overlay .side-card::backdrop { background:rgba(25,32,39,.5); }
.planner-detail-overlay .side-close { min-width:44px; min-height:44px; }
.office-fleet-planner .planner-split.planner-with-details { grid-template-columns:minmax(0,1fr); }
@media (max-width:1000px) {
  .office-review-compare { grid-template-columns:minmax(0,1fr); }
  .office-source-panel { position:static; }
  .office-source-preview iframe,.office-source-preview img { max-height:45vh; }
}

/* Native dialogs keep keyboard focus inside the active Office task. */
dialog.secure-preview-modal, dialog.office-policy-modal { width:100%; height:100%; max-width:none; max-height:100dvh; margin:0; border:0; box-sizing:border-box; color:var(--ink-900); }
dialog.secure-preview-modal:not([open]), dialog.office-policy-modal:not([open]) { display:none; }
dialog.secure-preview-modal::before { content:none; }
dialog.secure-preview-modal::backdrop, dialog.office-policy-modal::backdrop { background:rgba(25,32,39,.65); }
.secure-preview-head { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; }
.secure-preview-head > div { min-width:0; overflow-wrap:anywhere; }
.secure-preview-head .button { flex:none; }
.wcb-day-weekday, .wcb-no-check { display:none; }
.sales-lines [data-label] input, .sales-lines [data-label] select { max-width:100%; }
.m-reports { grid-template-columns:repeat(auto-fit,minmax(min(100%,21rem),1fr)); }

@media screen {
  .phone-layout .office-ux-metrics { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .phone-layout .office-ux-filters label { flex-basis:100%; }
  .phone-layout .mbars li { grid-template-columns:minmax(0,1fr) auto auto; }
  .phone-layout .mbar-label { grid-column:1/-1; white-space:normal; overflow-wrap:anywhere; overflow:visible; }
  /* One editable line stays together; totals keep using the server's numbers. */
  .phone-layout .office-sales-workspace .sales-lines-wrap { overflow:visible; }
  .phone-layout .office-sales-workspace .sales-lines { display:block; min-width:0; width:100%; }
  .phone-layout .sales-lines thead { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
  .phone-layout .sales-lines tbody, .phone-layout .sales-lines tfoot { display:block; }
  .phone-layout .sales-lines tbody tr { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.75rem; padding:1rem 0; border-bottom:1px solid var(--line); }
  .phone-layout .sales-lines tbody td { display:block; min-width:0; padding:0; border:0; text-align:left; white-space:normal; }
  .phone-layout .sales-lines tbody td:first-child, .phone-layout .sales-lines tbody td:last-child:has(button) { grid-column:1/-1; }
  .phone-layout .sales-lines tbody td[data-label]::before { content:attr(data-label); display:block; margin-bottom:.3rem; color:var(--ink-500); font-size:.85rem; font-weight:650; }
  .phone-layout .sales-lines tbody input, .phone-layout .sales-lines tbody select, .phone-layout .sales-lines tbody .narrow { width:100%; min-width:0; min-height:44px; font-size:16px; }
  .phone-layout .sales-lines tfoot tr { display:flex; justify-content:space-between; gap:1rem; }
  .phone-layout .sales-lines tfoot td { display:block; padding:.65rem 0; border:0; }
  .phone-layout .sales-lines tfoot td:empty { display:none; }
  #sales-line-memory { width:100%; max-width:100%; min-width:0; }
  .phone-layout .office-sales-workspace .action-row { flex-wrap:wrap; }
  /* Screen preview reflows, while the renderer and its printed A4 layout stay unchanged. */
  .phone-layout .office-sales-workspace .paper-scroll { overflow:visible; }
  .phone-layout .office-sales-workspace .paper-preview { width:100%; min-height:0; padding:1rem; font-size:14px; line-height:1.5; }
  .phone-layout .office-sales-workspace .paper-preview .pf-head { display:flex; flex-wrap:wrap; gap:.75rem; }
  .phone-layout .office-sales-workspace .paper-preview .pf-brand { width:100%; min-width:0; }
  .phone-layout .office-sales-workspace .paper-preview .pf-ref { margin-left:auto; white-space:normal; }
  .phone-layout .office-sales-workspace .paper-preview .pf-parties, .phone-layout .office-sales-workspace .paper-preview .pf-header { grid-template-columns:minmax(0,1fr); }
  .phone-layout .office-sales-workspace .paper-preview .pf-party, .phone-layout .office-sales-workspace .paper-preview .pf-f { min-width:0; font-size:14px; overflow-wrap:anywhere; }
  .phone-layout .office-sales-workspace .paper-preview .pf-party strong, .phone-layout .office-sales-workspace .paper-preview .pf-f strong { font-size:15px; }
  .phone-layout .office-sales-workspace .paper-preview .pf-party span, .phone-layout .office-sales-workspace .paper-preview .pf-f span, .phone-layout .office-sales-workspace .paper-preview .pf-party-extra, .phone-layout .office-sales-workspace .paper-preview .pf-by, .phone-layout .office-sales-workspace .paper-preview .pf-foot, .phone-layout .office-sales-workspace .paper-preview .pf-payref { font-size:13px; }
  .phone-layout .office-sales-workspace .paper-preview .pf-invoice-lines, .phone-layout .office-sales-workspace .paper-preview .pf-invoice-lines tbody, .phone-layout .office-sales-workspace .paper-preview .pf-invoice-lines tfoot { display:block; width:100%; min-width:0; }
  .phone-layout .office-sales-workspace .paper-preview .pf-invoice-lines thead { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
  .phone-layout .office-sales-workspace .paper-preview .pf-invoice-lines tbody tr { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.5rem; padding:.75rem 0; border-bottom:1px solid #777; }
  .phone-layout .office-sales-workspace .paper-preview .pf-invoice-lines tbody td { display:block; padding:0; border:0; width:auto; font-size:14px; text-align:left; white-space:normal; overflow-wrap:anywhere; }
  .phone-layout .office-sales-workspace .paper-preview .pf-invoice-lines tbody td:nth-child(2) { grid-column:1/-1; grid-row:2; }
  .phone-layout .office-sales-workspace .paper-preview .pf-invoice-lines tbody td::before { display:block; font-size:12px; color:#444; }
  .phone-layout .office-sales-workspace .paper-preview .pf-invoice-lines tbody td:nth-child(1)::before { content:"Line"; }
  .phone-layout .office-sales-workspace .paper-preview .pf-invoice-lines tbody td:nth-child(2)::before { content:"Description"; }
  .phone-layout .office-sales-workspace .paper-preview .pf-invoice-lines tbody td:nth-child(3)::before { content:"Quantity"; }
  .phone-layout .office-sales-workspace .paper-preview .pf-invoice-lines tbody td:nth-child(4)::before { content:"Unit price"; }
  .phone-layout .office-sales-workspace .paper-preview .pf-invoice-lines tbody td:nth-child(5)::before { content:"VAT rate"; }
  .phone-layout .office-sales-workspace .paper-preview .pf-invoice-lines tbody td:nth-child(6)::before { content:"Net"; }
  .phone-layout .office-sales-workspace .paper-preview .pf-invoice-lines tbody td:nth-child(7)::before { content:"VAT"; }
  .phone-layout .office-sales-workspace .paper-preview .pf-invoice-lines tfoot tr { display:flex; justify-content:space-between; }
  .phone-layout .office-sales-workspace .paper-preview .pf-invoice-lines tfoot td, .phone-layout .office-sales-workspace .paper-preview .pf-invoice-lines tfoot th { display:block; width:auto; font-size:14px; border:0; padding:.5rem 0; }

  /* The monthly list retains date, vehicle and outcome, including days with no recorded check. */
  .phone-layout .walkaround-books .wcb-weekdays, .phone-layout .walkaround-books .wcb-day.wcb-outside { display:none; }
  .phone-layout .walkaround-books .wcb-calendar { grid-template-columns:minmax(0,1fr); border:1px solid var(--line); border-radius:.75rem; }
  .phone-layout .walkaround-books .wcb-day { display:grid; grid-template-columns:3rem minmax(0,1fr); gap:.7rem; min-height:0; padding:.7rem; align-items:start; }
  .phone-layout .walkaround-books .wcb-day-number { width:auto; height:auto; min-height:2.8rem; padding:.25rem; font-size:1rem; margin:0; }
  .phone-layout .walkaround-books .wcb-day-weekday { display:block; font-size:.8rem; font-weight:500; }
  .phone-layout .walkaround-books .wcb-no-check { display:block; grid-column:2; color:var(--ink-500); font-size:.85rem; align-self:center; }
  .phone-layout .walkaround-books .wcb-day-checks:empty { display:none; }
  .phone-layout .walkaround-books .wcb-entry { padding:.7rem; min-height:44px; gap:.3rem; }
  .phone-layout .walkaround-books .wcb-entry-vehicle, .phone-layout .walkaround-books .wcb-entry-outcome, .phone-layout .walkaround-books .wcb-entry-time .wcb-status-dot { display:block; }
  .phone-layout .walkaround-books .wcb-entry-vehicle, .phone-layout .walkaround-books .wcb-entry-time { font-size:.95rem; }
  .phone-layout .walkaround-books .wcb-entry-outcome { font-size:.85rem; }
  .phone-layout .walkaround-books .wcb-entry-time { justify-content:flex-start; }
  .phone-layout .walkaround-books .wcb-month-step { width:100%; }
  .phone-layout .walkaround-books .wcb-month-step h3 { min-width:0; flex:1; }
  .phone-layout .walkaround-books .wcb-month-picker { display:flex; flex-wrap:wrap; width:100%; }
  .phone-layout .walkaround-books .wcb-month-picker label { display:block; width:100%; }
  .phone-layout .walkaround-books .wcb-month-picker input { flex:1; min-width:0; width:8rem; }
  .phone-layout .walkaround-books .wcb-export-toolbar .action-row { display:grid; grid-template-columns:minmax(0,1fr); }
  .phone-layout .walkaround-books .wcb-selectable input { min-width:24px; min-height:24px; }

  .phone-layout .office-review-compare { grid-template-columns:minmax(0,1fr); gap:.8rem; }
  .phone-layout .office-source-panel { position:static; }
  .phone-layout .office-source-preview { min-height:8rem; padding:.5rem; }
  .phone-layout .office-source-preview iframe { height:48dvh; max-height:none; }
  .phone-layout .office-review-page .office-review-card { padding:.75rem; }
  .phone-layout .review-comparison { display:block; }
  .phone-layout .review-comparison thead { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
  .phone-layout .review-comparison tbody, .phone-layout .review-comparison tr, .phone-layout .review-comparison th, .phone-layout .review-comparison td { display:block; width:100%; box-sizing:border-box; }
  .phone-layout .review-comparison tr { border-top:1px solid var(--line); padding:.5rem 0; }
  .phone-layout .review-comparison td::before { display:block; color:var(--ink-500); font-size:.8rem; font-weight:600; }
  .phone-layout .review-comparison td:nth-child(2)::before { content:"Extracted value"; }
  .phone-layout .review-comparison td:nth-child(3)::before { content:"Driver-confirmed value"; }

  .phone-layout .office-fleet-planner .planner-detail-overlay .side-card { width:min(100%,29rem); padding:1rem; }
  .phone-layout .office-fleet-planner .planner-details-button { min-height:44px; width:100%; }
  .phone-layout .office-fleet-planner .side-list li { flex-wrap:wrap; gap:.5rem; }
  .phone-layout .office-fleet-planner .side-value { white-space:normal; }
  .phone-layout .office-fleet-planner .side-book, .phone-layout .office-fleet-planner .side-list .button { min-height:44px; }
  .phone-layout .office-fleet-planner .side-form input, .phone-layout .office-fleet-planner .side-form select { min-width:0; max-width:100%; font-size:16px; }
  .phone-layout .ask-turn, .phone-layout .ask-card, .phone-layout .ask-question, .phone-layout .ask-asked-by, .phone-layout .template-card, .phone-layout .doc-card { min-width:0; overflow-wrap:anywhere; }
  .phone-layout .ask-answer, .phone-layout .ask-card { padding:.75rem; }
  .phone-layout .template-card .panel-header, .phone-layout .doc-card .panel-header { align-items:flex-start; flex-wrap:wrap; }
  .phone-layout .omr-lesson-body, .phone-layout .omr-question-body { padding:.7rem; }
  .phone-layout .omr-form-fields, .phone-layout .omr-options { padding-left:1.15rem; }
  .phone-layout dialog.secure-preview-modal, .phone-layout dialog.office-policy-modal { padding:.5rem; }
  .phone-layout .secure-preview-modal .secure-preview-card { min-height:0; max-height:calc(100dvh - 1rem); border-radius:.75rem; padding:.75rem; }
  .phone-layout .secure-preview-modal .secure-preview-frame { min-height:10rem; }
  .phone-layout .secure-preview-modal .secure-preview-frame iframe { height:65dvh; }
  .phone-layout .office-policy-modal .policy-confirm { max-height:calc(100dvh - 1rem); overflow:auto; }
}
@media (max-width:520px) {
  .office-ux-metrics { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .office-ux-metrics .metric-card { padding:.8rem; }
  .office-ux-filters label { flex-basis:100%; }
  .office-fleet-planner .planner-detail-overlay .side-card { border-radius:0; }
}

/* What the office has recorded for a share code, under the code (Driver 360). */
.share-code-checks { display: grid; gap: .2rem; margin-top: .4rem; }
.share-code-check { display: block; max-width: 30rem; font-size: .82rem; line-height: 1.4; color: var(--ink-700); }
.share-code-check-done { color: var(--good); font-weight: 600; }
.share-code-check-expired { color: var(--bad); font-weight: 600; }
.share-code-file { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .6rem; margin-top: .2rem; }

/* Platform admin: what each company owes (0351). */
.billing-table select, .billing-table input[type="date"] { min-width: 12rem; }
.billing-table input[name="note"] { min-width: 14rem; }
.billing-table td { vertical-align: top; }

/* A sentence shown in a status colour. The pill capitalises every word, which is right for "Needs you" and wrong for
   a sentence: the owner's screenshot read "Confirmed And Kept, But The Vehicle's Record Did Not Move". */
.status-pill.status-sentence { display: block; width: auto; text-transform: none; font-weight: 700; font-size: .8rem;
  line-height: 1.45; letter-spacing: 0; padding: .6rem .8rem; border-radius: 12px; }

/* (0465) The provider's rulebook. Its pills carry sentences, not statuses: "An entry somebody
   typed", "15 we cannot name in a letter". The shared .status-pill capitalises every word, which
   turns those into "An Entry Somebody Typed", so this screen opts out the way .lib-chips does.
   Scoped to this screen only: the capitalisation is right everywhere else. */
.provider-rules .status-pill { text-transform: none; }
.provider-rules code { font-size: .78rem; background: var(--surface-alt); padding: .1rem .35rem;
  border-radius: 4px; }
/* The question each group answers, directly under its heading. It is the reason a reader is
   looking at these rows and not the others, so it goes above them, not in a footnote. */
.rules-question { margin: .15rem 0 .75rem; max-width: 62ch; }
/* The reasoning, kept reachable and out of the scan path. Three lines of prose in a cell turned
   thirty-seven rows into a wall nobody read any of. */
.rules-table .table-subtext { display: block; max-width: 52ch; margin-top: .2rem; }
.rules-table tbody td:first-child { box-shadow: inset 3px 0 0 transparent; }
.rules-good tbody td:first-child { box-shadow: inset 3px 0 0 var(--good); }
.rules-warn tbody td:first-child { box-shadow: inset 3px 0 0 var(--warn-line); }

/* ---- the hours board (0459, given its design on 2026-10-20) -------------------------------------
   The board COMPUTED a tone for every row - bad under half an hour left, warn under an hour - put
   it in a class name, and then threw it away: not one of these selectors existed, so a driver with
   twenty-five minutes left and both allowances spent rendered exactly like a driver with nine
   hours. The screen knew who could not be given a job and drew it in the same grey as everybody
   else. */

/* THE THREE NUMBERS AT THE TOP. What a dispatcher acts on, before the table they would have to
   read. A zero is not an alarm, so a zero goes quiet. */
.hours-stats { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .75rem; }
.hours-stat {
  display: flex; align-items: baseline; gap: .45rem;
  padding: .5rem .75rem; border-radius: 10px;
  border: 1px solid var(--line); background: var(--surface);
}
.hours-stat strong { font-size: 1.35rem; line-height: 1; font-variant-numeric: tabular-nums; }
.hours-stat span { font-size: .78rem; color: var(--muted); }
.hours-stat-bad { background: var(--bad-soft); border-color: var(--bad-line); }
.hours-stat-bad strong { color: var(--bad); }
.hours-stat-warn { background: var(--warn-soft); border-color: var(--warn-line); }
.hours-stat-warn strong { color: var(--warn); }
.hours-stat-none strong { color: var(--muted); }

/* A SEVERITY STRIPE, not a tinted row. A whole row washed in red turns the figures inside it into
   decoration; a bar down the left edge is read before the text and does not touch it. */
/* On the FIRST CELL, as an inset shadow. A `border-left` on a `<tr>` is simply not painted by any
   browser under the default `border-collapse`, which is why the first version of this rule looked
   right in the stylesheet and drew nothing at all on the page. */
.hours-table tbody td:first-child { box-shadow: inset 3px 0 0 transparent; }
.hours-row-bad { background: var(--bad-soft); }
.hours-row-bad td:first-child { box-shadow: inset 3px 0 0 var(--bad); }
.hours-row-warn td:first-child { box-shadow: inset 3px 0 0 var(--warn-line); }
/* Declared although it is the default. A state the screen writes into the markup and no stylesheet
   mentions is a state nobody can tell apart from a typo, and this is the row that says "this one
   is fine" on purpose. */
.hours-row-good td:first-child { box-shadow: inset 3px 0 0 transparent; }

/* The figure the whole board is sorted by. It is the answer to the question, so it is the one
   thing on the row that is bigger than body text. */
.hours-table td:nth-child(2) strong {
  font-size: 1.1rem; font-variant-numeric: tabular-nums;
}
.hours-row-bad td:nth-child(2) strong { color: var(--bad); }
.hours-row-warn td:nth-child(2) strong { color: var(--warn); }

/* An allowance with nothing left. Said in the cell rather than left to the reader to work out
   from "3 / 3". */
.hours-spent { color: var(--bad); font-weight: 700; }

/* Figures too old to commit a lorry on. The provider's own screen says its numbers are worked out
   from the last card read, and a card read two days ago is not this afternoon. */
.hours-stale { color: var(--warn); font-weight: 600; }

/* A figure that is counting down right now, from the provider's live endpoint rather than from
   their last calculation. It earns a badge rather than just a colour because the two figures on
   this row come from different places and a reader has to be able to tell which is which: green
   text alone would read as good news about one number instead of a statement about its source. */
.hours-live {
  display: inline-block;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--good);
  background: color-mix(in srgb, var(--good) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--good) 35%, transparent);
  border-radius: 999px;
  padding: .1rem .45rem;
}

@media (max-width: 760px) {
  /* The table collapses to cards here, and a left stripe on a card still reads as a left stripe. */
  .hours-table tbody tr { border-left-width: 4px; }
  .hours-stat { flex: 1 1 8rem; }
}

/* ---- the Tacho tab -------------------------------------------------------------------------------
   Cards, not a table. Each item carries one fact and it is a POSITION IN AN INTERVAL, so the design
   element is a bar: how much of its ninety days is spent. The first version was three stacked
   tables and read as a database dump with good typography.

   Built from the portal's own vocabulary - warm white on cream, hairlines with cream in them, the
   same radii as every other card - so this belongs to the page rather than arriving from somewhere
   else. */

.tacho-question { margin: .15rem 0 .9rem; max-width: 66ch; }

/* THE HEADLINE IS A SENTENCE, not a status. "2 need doing now" is a thing somebody acts on, so it
   sits where a pill would and is allowed to be a phrase. */
.tacho-headline { font-size: .82rem; font-weight: 700; padding: .4rem .7rem; border-radius: 999px;
  border: 1px solid var(--line); background: var(--surface); white-space: nowrap; }
.tacho-headline-bad { color: var(--bad); background: var(--bad-soft); border-color: var(--bad-line); }
.tacho-headline-warn { color: var(--warn); background: var(--warn-soft); border-color: var(--warn-line); }
.tacho-headline-good { color: var(--good); background: var(--good-soft); border-color: var(--line); }

/* Two across on a laptop, one on a phone, three only when there is genuinely room. A card narrower
   than about 19rem puts the registration and the verdict on top of each other. */
/* `start`, not the grid default of `stretch`: a gap card with a note is taller than one without,
   and stretching the short ones leaves a pocket of empty card under the button that reads as
   unfinished. Each card is as tall as what is in it. */
.tacho-grid { display: grid; gap: .7rem; align-items: start;
  grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr)); }

.tacho-card {
  display: flex; flex-direction: column; gap: .55rem;
  padding: .85rem .95rem; border-radius: 14px;
  border: 1px solid var(--line); background: var(--surface);
}
.tacho-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; }
.tacho-who { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.tacho-name { font-size: 1.02rem; letter-spacing: .01em; }
.tacho-sub { font-size: .76rem; color: var(--muted); }

/* The answer, not the working. It is the only thing on the card bigger than its label. */
.tacho-verdict { font-size: .86rem; font-weight: 700; text-align: right; white-space: nowrap;
  padding-top: .1rem; }

/* HOW MUCH OF THE INTERVAL IS GONE. Full means due. The bar is the reason this page can be read at
   arm's length instead of column by column. */
.tacho-meter { height: 8px; border-radius: 999px; background: var(--surface-soft);
  border: 1px solid var(--line); overflow: hidden; }
.tacho-meter-fill { display: block; height: 100%; border-radius: 999px; background: var(--good); }

.tacho-foot { font-size: .74rem; color: var(--muted); margin: 0; }
.tacho-dot { opacity: .5; padding: 0 .15rem; }

.tacho-good .tacho-verdict { color: var(--ink-500); }
.tacho-warn { border-color: var(--warn-line); }
.tacho-warn .tacho-meter-fill { background: var(--warn); }
.tacho-warn .tacho-verdict { color: var(--warn); }
.tacho-bad { border-color: var(--bad-line); background: var(--bad-soft); }
.tacho-bad .tacho-meter-fill { background: var(--bad); }
.tacho-bad .tacho-meter { background: color-mix(in srgb, var(--bad) 12%, var(--surface)); }
.tacho-bad .tacho-verdict { color: var(--bad); }

/* A gap carries a note and a button, so it is taller than a download card and says so by having
   its own rhythm rather than by stretching. */
.tacho-gap { gap: .5rem; }
.tacho-note { margin: 0; font-size: .86rem; padding: .55rem .65rem; border-radius: 10px;
  background: var(--surface-alt); border: 1px solid var(--line); }
.tacho-unexplained { font-style: italic; }
.tacho-note-button { align-self: flex-start; margin-top: .1rem; }

/* Records too old to act on. The provider's list is read on a schedule, and a list read two days
   ago is not a list. */
.tacho-stale { color: var(--warn); font-weight: 600; }

@media (max-width: 560px) {
  .tacho-card-head { flex-direction: column; gap: .3rem; }
  .tacho-verdict { text-align: left; }
  .tacho-headline { white-space: normal; }
}

/* ===================================================================================================
   A ROW WITH A BODY AND AN ACTION
   ===================================================================================================
   The owner, 2026-10-26, on Compliance details: "ce e dezordinea si mizeria asta?????"

   `.rows`, `.row` and `.row-body` were written into three screens and DEFINED NOWHERE. A div is a
   block, a span is inline and a button is inline-block, so each Adopt button flowed into the middle
   of the sentence beside it: "Driver Handbook DRIVER_HANDBOOK - version 1.4 - 106,532 characters
   [Adopt]" wrapping wherever the text happened to end. Three screens, four lists, no layout at all.

   Written to the markup that already exists rather than the markup changed to fit a class that
   does: body on the left, whatever acts on the right, and on a phone the action takes its own line
   at full width so it is a thumb's target and not a word at the end of a paragraph. */
.rows { display: grid; gap: .5rem; }
.row {
  display: flex; align-items: center; justify-content: space-between;
  gap: .9rem 1.2rem; flex-wrap: wrap;
  padding: .8rem .95rem;
  border: 1px solid var(--line); border-radius: 12px;
  background: var(--surface);
}
.row-body { display: grid; gap: .15rem; min-width: 0; flex: 1 1 20rem; }
.row-body small { color: var(--ink-500); font-size: .78rem; line-height: 1.45; }
.row > .button, .row > .muted, .row > .needs-line { flex: 0 0 auto; }

@media (max-width: 760px) {
  .row { align-items: stretch; }
  .row-body { flex: 1 1 100%; }
  .row > .button { width: 100%; }
}