/*
 * Compliance (#254): the Carrier Check screens. Every class is .cmpl-*; colours come from the
 * --arl-* tokens (with literal fallbacks), never another module's variables. The header band is
 * styles.css's `main .module-band`: rules here add no clipping, isolation or z-index to it
 * (module-band.client.test.js forbids them there, and they would cut its light frame).
 */

/* ── The page and its header band ── */
.cmpl-page { display: block; }
.cmpl-band {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}
.cmpl-band-sub {
  margin-top: 6px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.72);
}
.cmpl-band-actions { display: flex; gap: 8px; align-items: center; }
.cmpl-body { display: block; }

/* ── Text ── */
.cmpl-muted { color: var(--arl-text-muted, #6b7280); }
.cmpl-small { font-size: 12px; }
.cmpl-strong { font-weight: 600; }
.cmpl-right { text-align: right; }
/* Dark amber, not --arl-warning: #D97706 is 3.19:1 on white, under the 4.5:1 small text needs. */
.cmpl-warn-text { color: #93370d; font-weight: 600; }
/* #666: "To answer" must be readable (the muted #999 is 2.85:1). */
.cmpl-secondary { color: var(--arl-text-secondary, #666666); }
.cmpl-link {
  background: none;
  border: 0;
  padding: 0;
  color: var(--arl-primary, #1d4ed8);
  font: inherit;
  cursor: pointer;
  text-decoration: underline;
}
.cmpl-access-note { margin: 0 0 12px; color: var(--arl-text-secondary, #4b5563); }

/* ── Banners ── */
.cmpl-banner {
  margin: 0 0 12px;
  padding: 10px 14px;
  border-radius: var(--arl-radius, 6px);
  border: 1px solid var(--arl-border, #e2e5ea);
  background: var(--arl-surface-light, #f8fafc);
  font-size: 14px;
}
.cmpl-banner-practice,
.cmpl-banner-info { background: #eef4ff; border-color: #c7d7fe; }
.cmpl-banner-ok { background: var(--arl-success-light, #ecfdf3); border-color: #abefc6; }
.cmpl-banner-warn { background: var(--arl-warning-light, #fffaeb); border-color: #fedf89; }
/* Text in the dark red (--arl-accent-dark): --arl-error #E11A22 on its light fill is under 4.5:1. */
.cmpl-banner-error { background: var(--arl-error-light, #fef3f2); border-color: #fecdca; color: var(--arl-accent-dark, #BD0E0E); }

/* ── Chips ── */
.cmpl-chip {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 12px;
  line-height: 18px;
  white-space: nowrap;
  border: 1px solid transparent;
}
.cmpl-chip-warn { background: var(--arl-warning-light, #fffaeb); color: #93370d; border-color: #fedf89; }
.cmpl-chip-info { background: #eef4ff; color: #1d3a8a; border-color: #c7d7fe; }
.cmpl-chip-good { background: var(--arl-success-light, #ecfdf3); color: #05603a; border-color: #abefc6; }
.cmpl-chip-muted { background: var(--arl-surface-alt, #f2f4f7); color: var(--arl-text-secondary, #475467); border-color: var(--arl-border, #e4e7ec); }
/* A Concern: the only red chip. */
.cmpl-chip-bad { background: var(--arl-error-light, #FEE2E2); color: var(--arl-accent-dark, #BD0E0E); border-color: #fecaca; }
.cmpl-x { background: none; border: 0; padding: 0 0 0 4px; cursor: pointer; font-size: 13px; color: inherit; }
/* A chip that is a link (a Done row's "FORGE practice review"): reads as a chip, not underlined text. */
a.cmpl-chip { text-decoration: none; }
a.cmpl-chip:hover { text-decoration: underline; }

/* ── Cards, fields, tables ── */
.cmpl-card {
  margin: 0 0 16px;
  padding: 16px;
  background: var(--arl-white, #fff);
  border: 1px solid var(--arl-border, #e2e5ea);
  border-radius: var(--arl-radius-lg, 10px);
  box-shadow: var(--arl-shadow, 0 1px 2px rgba(16, 24, 40, 0.06));
}
.cmpl-card h3 { margin: 0 0 12px; font-size: 16px; }
.cmpl-card h4 { margin: 16px 0 8px; font-size: 14px; }
.cmpl-fields { margin: 0; }
.cmpl-field-row { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 8px; padding: 4px 0; }
.cmpl-field-row dt { color: var(--arl-text-muted, #6b7280); font-size: 13px; }
.cmpl-field-row dd { margin: 0; overflow-wrap: anywhere; }
/* A wide table scrolls inside its own box on a phone, never the page. */
.cmpl-table-wrap { overflow-x: auto; }
/* The list's box is a size container: a review open under its row is as wide as the part of the box
   on screen (100cqi), not as wide as the table (strip chips can widen it past the box), so its layout
   follows what a reviewer can see and nothing of it is off the side. */
.cmpl-table-wrap:has(> .cmpl-list-table) { container: cmpl-list / inline-size; }
.cmpl-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.cmpl-table th {
  text-align: left;
  font-size: 12px;
  font-weight: 600;
  color: var(--arl-text-muted, #6b7280);
  padding: 8px;
  border-bottom: 1px solid var(--arl-border, #e2e5ea);
}
.cmpl-table td { padding: 8px; border-bottom: 1px solid var(--arl-border, #eef0f3); vertical-align: top; }
.cmpl-row { cursor: pointer; }
.cmpl-row:hover td { background: var(--arl-surface-light, #f8fafc); }
.cmpl-list { margin: 0; padding-left: 18px; }
.cmpl-list li { margin: 4px 0; }

/* ── Forms ── */
.cmpl-input, .cmpl-select, .cmpl-textarea {
  font: inherit;
  font-size: 14px;
  padding: 6px 8px;
  border: 1px solid var(--arl-border, #d0d5dd);
  border-radius: var(--arl-radius, 6px);
  background: var(--arl-white, #fff);
  color: var(--arl-text, #101828);
}
.cmpl-textarea { width: 100%; box-sizing: border-box; resize: vertical; min-height: 72px; }
.cmpl-field { display: inline-flex; gap: 6px; align-items: center; font-size: 13px; color: var(--arl-text-secondary, #475467); }
.cmpl-check-filter { display: inline-flex; gap: 6px; align-items: center; font-size: 13px; }
.cmpl-inline-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 12px; }
.cmpl-radio { display: block; margin: 4px 0; }
.cmpl-done fieldset { border: 0; margin: 0 0 8px; padding: 0; }
.cmpl-done legend { font-weight: 600; margin-bottom: 4px; }
.cmpl-dismiss { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--arl-border, #eef0f3); }

/* ── Hub ── */
.cmpl-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 0 0 16px; }
.cmpl-tile {
  display: block;
  padding: 16px;
  border-radius: var(--arl-radius-lg, 10px);
  border: 1px solid var(--arl-border, #e2e5ea);
  background: var(--arl-white, #fff);
  color: inherit;
  text-decoration: none;
}
.cmpl-tile-main:hover { border-color: var(--arl-primary, #1d4ed8); }
.cmpl-tile-soon { background: var(--arl-surface-light, #f8fafc); }
.cmpl-tile-title { font-weight: 700; margin-bottom: 8px; }
.cmpl-tile-big { font-size: 32px; font-weight: 700; line-height: 1.1; margin-bottom: 6px; }
.cmpl-tile-big span { font-size: 14px; font-weight: 500; color: var(--arl-text-muted, #6b7280); }
.cmpl-tile-line { font-size: 13px; margin-top: 4px; }

/* ── The list ── */
.cmpl-strip { margin: 0 0 8px; font-size: 13px; }
.cmpl-tabs { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 12px; border-bottom: 1px solid var(--arl-border, #e2e5ea); }
.cmpl-tab {
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  padding: 8px 12px;
  font: inherit;
  font-size: 14px;
  color: var(--arl-text-secondary, #475467);
  cursor: pointer;
}
.cmpl-tab.is-on { color: var(--arl-text, #101828); border-bottom-color: var(--arl-primary, #1d4ed8); font-weight: 600; }
.cmpl-count {
  display: inline-block;
  min-width: 18px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--arl-surface-alt, #f2f4f7);
  font-size: 12px;
  text-align: center;
}
.cmpl-filters { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; margin: 0 0 12px; }
/* #342: the search leads the filter row, wide enough for a carrier's name. */
.cmpl-search .cmpl-input { width: 17rem; max-width: 100%; }
/* #342: on the review open in place, the load's other reviews in one line under its heading. */
.cmpl-also-load { margin: 2px 0 8px; font-size: var(--fk-type-xs); color: var(--fk-ink-2); }
.cmpl-also-load a { color: var(--fk-link); }
.cmpl-pager { display: flex; gap: 8px; align-items: center; justify-content: flex-end; margin-top: 12px; }

/* ── One review ── */
.cmpl-review-top { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 12px; }
.cmpl-review-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 380px); gap: 16px; align-items: start; }
/* Each check's line: a 4px left edge in its colour (data-state, from checkState in compliance.js). */
.cmpl-check {
  padding: 10px 10px 10px 12px;
  margin: 0 0 8px;
  border: 1px solid transparent;
  border-left: 4px solid var(--arl-border, #E0E0E0);
  border-radius: 0 var(--arl-radius, 6px) var(--arl-radius, 6px) 0;
}
.cmpl-check:last-child { margin-bottom: 0; }
.cmpl-check[data-state="good"] { border-left-color: var(--arl-success, #16A34A); }
.cmpl-check[data-state="warn"] { border-left-color: var(--arl-warning, #D97706); }
.cmpl-check[data-state="bad"] { border-left-color: var(--arl-error, #E11A22); }
/* Done still waits for it: a red dashed outline, no fill, until it is answered. */
.cmpl-check[data-state="needed"] { border-color: var(--arl-error, #E11A22); border-style: dashed; border-left-style: solid; }
.cmpl-check-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin-bottom: 4px; }
.cmpl-check-tags { display: inline-flex; flex-wrap: wrap; gap: 6px; margin-left: auto; }
.cmpl-check-label { font-weight: 600; }
.cmpl-check-suggest { font-size: 13px; margin-bottom: 6px; }
.cmpl-check-hint { font-size: 13px; margin-bottom: 6px; color: var(--arl-text-muted, #6b7280); font-style: italic; }
.cmpl-check-value { font-size: 14px; margin-bottom: 2px; }
.cmpl-answers { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0; }
.cmpl-answer {
  font: inherit;
  font-size: 13px;
  padding: 4px 12px;
  border: 1px solid var(--arl-border, #d0d5dd);
  border-radius: 999px;
  background: var(--arl-white, #fff);
  cursor: pointer;
}
.cmpl-answer.is-suggested { border-style: dashed; border-color: var(--arl-primary, #1d4ed8); }
.cmpl-answer.is-on { background: var(--arl-primary, #1d4ed8); border-color: var(--arl-primary, #1d4ed8); border-style: solid; color: #fff; }
.cmpl-answer:disabled { opacity: 0.55; cursor: default; }

/* ── Colour: what an answer means (TONES in compliance.js) ──
   Light fills with dark text; the bright tokens only as edges and borders (#16A34A is 3.30:1 and
   #D97706 3.19:1 on white, under the 4.5:1 small text needs). The meaning is always an icon and a
   word in the markup (.cmpl-ico is real text), never in ::before/::after. A chosen answer with no
   data-tone keeps the blue .is-on above. FORGE's suggestion (.is-suggested) never takes a tone. */
/* The shapes first, so a tone below sets their colours (and the dashed border of a to-do). */
.cmpl-state,
.cmpl-pill {
  display: inline-block;
  padding: 1px 8px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 12px;
  line-height: 18px;
  white-space: nowrap;
}
.cmpl-pill { font-size: 13px; }
/* The line above Mark Done: missing (red), a Clear over a red answer (yellow), ready (green). */
.cmpl-done-state { margin: 4px 0 10px; padding: 6px 10px; border: 1px solid transparent; border-radius: var(--arl-radius, 6px); font-size: 13px; font-weight: 600; }
.cmpl-tone-good { background: var(--arl-success-light, #DCFCE7); color: #05603a; border-color: var(--arl-success, #16A34A); }
.cmpl-tone-warn { background: var(--arl-warning-light, #FEF3C7); color: #93370d; border-color: var(--arl-warning, #D97706); }
.cmpl-tone-bad { background: var(--arl-error-light, #FEE2E2); color: var(--arl-accent-dark, #BD0E0E); border-color: var(--arl-error, #E11A22); }
.cmpl-tone-neutral { background: var(--arl-white, #FFFFFF); color: var(--arl-text, #333333); border-color: var(--arl-border, #E0E0E0); }
.cmpl-tone-todo,
.cmpl-tone-optional { background: var(--arl-white, #FFFFFF); color: var(--arl-text-secondary, #666666); border-color: var(--arl-border, #E0E0E0); border-style: dashed; }
/* "Needed for Done": red words on white, no fill and no pill. */
.cmpl-tone-needed { background: var(--arl-white, #FFFFFF); color: var(--arl-accent-dark, #BD0E0E); border-color: transparent; font-weight: 600; }
.cmpl-state.cmpl-tone-needed { padding-left: 0; padding-right: 0; }
.cmpl-answer.is-on[data-tone] { border-style: solid; font-weight: 600; }
.cmpl-answer.is-on[data-tone="good"] { background: var(--arl-success-light, #DCFCE7); color: #05603a; border-color: var(--arl-success, #16A34A); }
.cmpl-answer.is-on[data-tone="warn"] { background: var(--arl-warning-light, #FEF3C7); color: #93370d; border-color: var(--arl-warning, #D97706); }
.cmpl-answer.is-on[data-tone="bad"] { background: var(--arl-error-light, #FEE2E2); color: var(--arl-accent-dark, #BD0E0E); border-color: var(--arl-error, #E11A22); }
.cmpl-answer.is-on[data-tone="neutral"] { background: var(--arl-surface, #EEEEEE); color: var(--arl-text, #333333); border-color: var(--arl-text-secondary, #666666); }
.cmpl-ico { font-weight: 700; }
/* Text alone in a tone (no fill): only the dark shades, readable as small text on white. */
.cmpl-tone-text-good { color: #05603a; }
.cmpl-tone-text-warn { color: #93370d; }
.cmpl-tone-text-bad { color: var(--arl-accent-dark, #BD0E0E); }
.cmpl-tone-text-neutral { color: var(--arl-text, #333333); }
.cmpl-gap { font-weight: 600; }
/* The outcome on the Done tab: Cleared green text, the facts grey (a Concern is .cmpl-chip-bad). */
.cmpl-outcome-good { color: #05603a; font-weight: 600; }
.cmpl-outcome-muted { color: var(--arl-text-secondary, #666666); }
/* A wait past WAIT_WARN_MIN: words in TONES.longWait's .cmpl-tone-text-* colour (dark amber today), no
   fill. No colour here, or it would override the tone and a TONES flip would change nothing. */
.cmpl-wait-long { font-weight: 600; }
/* Read by a screen reader, not drawn: the page frame's live region (sayDoneWarning). */
.cmpl-sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

/* ── The list's check strip and the review open in place (PR B) ──
   One cell per check in Monday's order: a solid fill is an answer, dashed is FORGE's suggestion
   (blue "Yes?") or a gap in TAI (yellow), "—" is to do. The meaning is the icon and the word in the
   markup (and the cell's aria-label); the fills are the tones above. Never a row fill. */
/* Read by a screen reader, not drawn. */
.cmpl-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.cmpl-list-table td { vertical-align: middle; }
/* The list's headers in #666: the muted #999 is 2.85:1, too light for words this small (the kit's smallest size). */
.cmpl-list-table th { color: var(--arl-text-secondary, #666666); }
.cmpl-list-table .cmpl-cell-head { text-align: center; text-transform: uppercase; font-size: var(--fk-type-xs); letter-spacing: 0.02em; padding-left: 4px; padding-right: 4px; }
.cmpl-list-table .cmpl-cell { text-align: center; padding-left: 3px; padding-right: 3px; min-width: 64px; }
.cmpl-cell-pill {
  display: inline-block;
  min-height: 22px;
  padding: 0 7px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 12px;
  line-height: 20px;
  white-space: nowrap;
  box-sizing: border-box;
}
/* A gap in TAI, not answered: the tone's words and border on white, dashed. */
.cmpl-cell-pill.cmpl-cell-dashed { background: var(--arl-white, #FFFFFF); border-style: dashed; }
/* FORGE suggests it, nobody confirmed it: never a meaning colour (it would read as answered). */
.cmpl-tone-suggested { background: var(--arl-white, #FFFFFF); color: var(--arl-text-secondary, #666666); border-color: var(--fk-blue-600); border-style: dashed; }
.cmpl-strip-count { margin-top: 2px; font-size: 12px; white-space: nowrap; }
.cmpl-load-cell .cmpl-row-chips { margin-top: 4px; display: flex; flex-wrap: wrap; gap: 4px; }
/* The MC under the carrier (#314): read on every row to pick a carrier out, so the kit's second ink
   and semibold, never the muted #999 (2.85:1 on white); figures that line up down the list. */
.cmpl-carrier-id { color: var(--fk-ink-2); font-weight: 600; font-variant-numeric: tabular-nums; }
/* The toggle column, and the red edge: a real problem only (never green, never for a wait). */
.cmpl-list-table .cmpl-toggle-head, .cmpl-list-table .cmpl-toggle-cell { width: 32px; padding-left: 6px; padding-right: 2px; }
.cmpl-edge-bad { box-shadow: inset 4px 0 0 var(--arl-error, #E11A22); }
.cmpl-row-toggle {
  width: 26px;
  height: 26px;
  padding: 0;
  border: 1px solid var(--arl-border, #E0E0E0);
  border-radius: var(--arl-radius, 6px);
  background: var(--arl-white, #FFFFFF);
  color: var(--arl-text, #333333);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
}
.cmpl-row-toggle:hover { border-color: var(--fk-blue-600); }
.cmpl-row-toggle:focus-visible, .cmpl-inline-title:focus { outline: 2px solid var(--fk-blue-600); outline-offset: 2px; }
/* The open row and its review: a light blue-grey, so the pair reads as one. */
.cmpl-row:has(.cmpl-row-toggle[aria-expanded="true"]) td { background: var(--fk-blue-50); }
.cmpl-row-detail > td { padding: 0 8px 8px; background: var(--fk-blue-50); }
.cmpl-row-detail:hover td { background: var(--fk-blue-50); }
/* A size container: the compact layouts below follow the panel's own width, not the window's (the
   sidebar leaves a 1101-1250px window only about 850-1000px of panel). */
.cmpl-inline {
  padding: 8px 12px;
  background: var(--arl-white, #FFFFFF);
  border: 1px solid var(--arl-border, #E0E0E0);
  border-radius: var(--arl-radius-lg, 8px);
  cursor: default;
  container: cmpl-review / inline-size;
}
/* No wider than the list's box on screen less its cell's 8px each side, and held at its left edge
   while the table scrolls sideways under it. */
.cmpl-list-table .cmpl-inline { position: sticky; left: 8px; box-sizing: border-box; max-width: calc(100cqi - 16px); }
/* One line: the heading, its status, an earlier Concern, where the rest is, the full review. */
.cmpl-inline-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; min-height: 24px; margin: 0 0 2px; }
.cmpl-inline-title { margin: 0; font-size: var(--fk-type-md); }
.cmpl-link-out { margin-left: auto; font-size: 13px; color: var(--fk-blue-600); }
.cmpl-inline-head .cmpl-concerns { display: inline-flex; flex-wrap: wrap; gap: 0 8px; margin: 0; padding: 0 8px; line-height: 22px; font-size: var(--fk-type-xs); }
.cmpl-inline-head .cmpl-concerns > div { display: inline; }
/* In the open review the sections lose their card frames: one panel, not cards in a card. */
.cmpl-inline .cmpl-card { margin: 0 0 12px; padding: 0; border: 0; box-shadow: none; background: transparent; }
.cmpl-inline .cmpl-card h3 { font-size: 14px; margin-bottom: 8px; }
.cmpl-check-fact { margin-top: 4px; font-size: 12px; color: var(--arl-text-secondary, #666666); overflow-wrap: anywhere; }
.cmpl-check-error { margin: 4px 0 0; font-size: 13px; font-weight: 600; }
.cmpl-saving { align-self: center; font-size: 12px; color: var(--arl-text-secondary, #666666); }
/* An answer being saved: still focusable (aria-disabled), so focus is not lost when it comes back. */
.cmpl-answer[aria-disabled="true"] { opacity: 0.55; cursor: progress; }
/* Mark Done, Dismiss, Reopen and Undo while their write runs on the list: the disabled look, still focusable. */
.cmpl-inline .btn[aria-disabled="true"], .cmpl-toast .cmpl-link[aria-disabled="true"] { opacity: 0.5; cursor: progress; }
/* The Undo right after the next review's heading: out of sight until focus reaches it (one Tab). */
.cmpl-undo-skip:not(:focus) { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.cmpl-concerns { margin: 0 0 12px; padding: 8px 10px; border: 1px solid transparent; border-radius: var(--arl-radius, 6px); font-size: 13px; font-weight: 600; }
.cmpl-concerns a { color: inherit; }
.cmpl-inline-more { margin: 0; }

/* ── The open review, compact (Keith 2026-10-24: "speed and accuracy are the key to this role") ──
   One line per check: the check | its status in words | what TAI has | FORGE's suggestion or hint |
   the answers. The answer column has one width on every line, so "Yes" never moves; Highway's five
   answers fit it on one line (one of them chosen, with its icon), from 940px of panel. The status
   column fits its longest words ("✕ Doesn’t match Highway") on one line, so an answer landing never
   makes its line taller; FORGE's column fits "Yes? TAI has the driver's name and cell" from 1366px.
   In every layout the cells are drawn in the order they are in the page (label, status, TAI, FORGE,
   answers), so Tab never goes back up a line. Under the lines, one bar holds the close. */
.cmpl-compact {
  --cc-label: 112px;
  --cc-state: 152px;
  --cc-answer: 316px;
  --cc-gap: 12px;
  --cc-cols: var(--cc-label) var(--cc-state) minmax(150px, 1fr) minmax(140px, 1.08fr) var(--cc-answer);
}
.cmpl-inline .cmpl-card.cmpl-compact { margin: 0; }
.cmpl-check-cols {
  display: grid;
  grid-template-columns: var(--cc-cols);
  column-gap: var(--cc-gap);
  align-items: end;
  min-height: 18px;
  padding: 0 8px 0 12px;
  border-bottom: 1px solid var(--fk-line);
  color: var(--fk-ink-2);
  font-size: var(--fk-type-xs);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.cmpl-compact .cmpl-check {
  display: grid;
  grid-template-columns: var(--cc-cols);
  grid-template-areas: "label state fact forge answer" "err err err err err";
  column-gap: var(--cc-gap);
  align-items: center;
  position: relative;
  box-sizing: border-box;
  min-height: 28px;
  margin: 0;
  padding: 2px 8px;
  border-top: 0;
  border-right: 0;
  border-bottom: 1px solid var(--fk-gray-150);
  border-radius: 0;
}
/* Still needed for Done: a dashed red edge and nothing else (a real problem's edge is solid, and its words a filled pill). */
.cmpl-compact .cmpl-check[data-state="needed"] { border-color: var(--fk-gray-150); border-style: solid; border-top: 0; border-right: 0; border-left: 4px dashed var(--fk-red-600); }
.cmpl-compact .cmpl-check-head { display: contents; }
/* "may stay empty at Done": heard, not drawn (the status says Optional), so it takes no cell. */
.cmpl-compact .cmpl-check-head > .cmpl-muted { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.cmpl-compact .cmpl-check-label { grid-area: label; font-size: var(--fk-type-sm); font-weight: 600; overflow-wrap: anywhere; }
.cmpl-compact .cmpl-check-tags,
.cmpl-compact .cmpl-check-how { grid-area: state; display: flex; flex-wrap: wrap; gap: 4px; margin: 0; font-size: var(--fk-type-xs); }
.cmpl-compact .cmpl-check-how { color: var(--fk-ink-2); }
.cmpl-compact .cmpl-state { white-space: normal; }
.cmpl-compact .cmpl-check-fact { grid-area: fact; margin: 0; font-size: var(--fk-type-xs); color: var(--fk-ink); overflow-wrap: anywhere; }
.cmpl-compact .cmpl-check-suggest,
.cmpl-compact .cmpl-check-hint { grid-area: forge; margin: 0; font-size: var(--fk-type-xs); overflow-wrap: anywhere; }
.cmpl-compact .cmpl-check-hint { color: var(--fk-ink-2); }
.cmpl-compact .cmpl-answers,
.cmpl-compact .cmpl-check-value { grid-area: answer; margin: 0; }
.cmpl-compact .cmpl-check-value { font-size: var(--fk-type-xs); }
.cmpl-compact .cmpl-check-error { grid-area: err; margin: 2px 0 0; font-size: var(--fk-type-xs); }
/* FORGE's suggestion: a dashed blue "Yes?" (.cmpl-tone-suggested), never filled, never an answer. */
.cmpl-sug-chip { display: inline-block; padding: 0 6px; border-width: 1px; border-radius: var(--fk-radius-pill); line-height: 18px; font-weight: 600; }
/* The answers as one segmented group, 24px tall. */
.cmpl-compact .cmpl-answers { display: inline-flex; flex-wrap: nowrap; gap: 0; justify-self: start; }
.cmpl-compact .cmpl-answer {
  position: relative;
  box-sizing: border-box;
  height: 24px;
  margin: 0 0 0 -1px;
  padding: 0 8px;
  border: 1px solid var(--fk-gray-400);
  border-radius: 0;
  font-size: var(--fk-type-xs);
  line-height: 22px;
  white-space: nowrap;
}
.cmpl-compact .cmpl-answer:first-of-type { margin-left: 0; border-radius: var(--fk-radius-sm) 0 0 var(--fk-radius-sm); }
.cmpl-compact .cmpl-answer:last-of-type { border-radius: 0 var(--fk-radius-sm) var(--fk-radius-sm) 0; }
.cmpl-compact .cmpl-answer.is-suggested:not(.is-on) { z-index: 1; border-style: dashed; border-color: var(--fk-blue-600); }
.cmpl-compact .cmpl-answer.is-on { z-index: 1; }
.cmpl-compact .cmpl-answer:focus-visible { z-index: 2; outline: 2px solid var(--fk-blue-600); outline-offset: 1px; }
/* Said by a screen reader (role=status); the eye reads "Saving Fail…" in the status cell. */
.cmpl-compact .cmpl-saving { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
/* Copy MC, DOT, the dispatcher's email or phone: 24px, ✓ for a moment once copied. */
.cmpl-copy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 24px;
  height: 24px;
  margin: 0 0 0 4px;
  padding: 0;
  border: 1px solid var(--fk-line);
  border-radius: var(--fk-radius-sm);
  background: var(--fk-surface);
  color: var(--fk-ink-2);
  vertical-align: middle;
  cursor: pointer;
}
.cmpl-copy:hover { border-color: var(--fk-blue-600); color: var(--fk-blue-600); }
.cmpl-copy:focus-visible { outline: 2px solid var(--fk-blue-600); outline-offset: 1px; }
.cmpl-copy.is-copied { color: var(--fk-done); border-color: var(--fk-done); }
.cmpl-copy-ico { display: inline-flex; font-size: var(--fk-type-xs); font-weight: 700; line-height: 1; }
/* The close bar: the outcome as one segmented group (native radios, the dot kept), what is still
   missing, Mark Done, "Dismiss…" (its form only when asked for), and Skip to next at the end. */
.cmpl-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-top: 4px; padding-top: 6px; border-top: 1px solid var(--fk-line); }
/* The close takes the bar's width but Skip to next's, so Skip to next ends its last line, never a line of its own. */
.cmpl-inline .cmpl-bar .cmpl-actions { display: flex; flex: 1 1 0; min-width: 0; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 0; }
.cmpl-bar .cmpl-actions h3 { margin: 0; font-size: var(--fk-type-sm); }
.cmpl-bar .cmpl-done { display: contents; }
.cmpl-bar .cmpl-done fieldset { display: inline-flex; flex-wrap: wrap; align-items: center; margin: 0; padding: 0; border: 0; }
.cmpl-bar .cmpl-done legend { float: left; margin: 0 8px 0 0; padding: 0; font-size: var(--fk-type-sm); font-weight: 600; }
.cmpl-bar .cmpl-radio {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  box-sizing: border-box;
  height: 28px;
  margin: 0 0 0 -1px;
  padding: 0 10px;
  border: 1px solid var(--fk-gray-400);
  font-size: var(--fk-type-sm);
  white-space: nowrap;
  cursor: pointer;
}
.cmpl-bar .cmpl-radio:first-of-type { margin-left: 0; border-radius: var(--fk-radius-sm) 0 0 var(--fk-radius-sm); }
.cmpl-bar .cmpl-radio:last-of-type { border-radius: 0 var(--fk-radius-sm) var(--fk-radius-sm) 0; }
.cmpl-bar .cmpl-radio:has(input:checked) { position: relative; z-index: 1; background: var(--fk-blue-50); border-color: var(--fk-blue-600); font-weight: 600; }
.cmpl-bar .cmpl-radio:has(:focus-visible) { position: relative; z-index: 2; outline: 2px solid var(--fk-blue-600); outline-offset: 1px; }
.cmpl-needs-note { margin-left: 2px; font-weight: 400; }
/* The bar's quiet words ("(needs a note)", "Choose an outcome.", a reader's "Only the compliance
   team…") at 4.5:1 on white and on a chosen outcome's blue, not the muted #999 (2.85:1). */
.cmpl-bar .cmpl-muted { color: var(--fk-ink-2); }
.cmpl-bar .cmpl-done-state { margin: 0; padding: 2px 8px; font-size: var(--fk-type-xs); }
.cmpl-goto { color: inherit; font-weight: 600; }
.cmpl-goto:focus-visible, .cmpl-bar .cmpl-link:focus-visible { outline: 2px solid var(--fk-blue-600); outline-offset: 1px; }
.cmpl-bar .btn { padding: 4px 14px; font-size: var(--fk-type-sm); line-height: 18px; }
.cmpl-bar .btn:focus-visible { outline: 2px solid var(--fk-blue-600); outline-offset: 1px; }
/* "Open full review", the Dismiss reason and its note: the same ring as every other control here. */
.cmpl-inline .cmpl-link-out:focus-visible, .cmpl-bar .cmpl-select:focus-visible, .cmpl-bar .cmpl-input:focus-visible { outline: 2px solid var(--fk-blue-600); outline-offset: 1px; }
.cmpl-bar p { margin: 0; }
.cmpl-bar .cmpl-dismiss { flex-basis: 100%; margin: 0; padding: 0; border-top: 0; }
/* .cmpl-dismiss is display:flex: without this its `hidden` would still draw it. */
.cmpl-dismiss[hidden] { display: none; }
.cmpl-bar-end { align-self: flex-end; margin-left: auto; line-height: 28px; white-space: nowrap; }
/* Under 940px of panel: two lines per check, the answers still in one column at the end of the
   second (after TAI on the first and FORGE on the second, the order Tab takes). */
@container cmpl-review (max-width: 939px) {
  .cmpl-check-cols { display: none; }
  .cmpl-compact .cmpl-check {
    grid-template-columns: var(--cc-label) var(--cc-state) minmax(0, 1fr) var(--cc-answer);
    grid-template-areas: "label state fact fact" ". forge forge answer" "err err err err";
    row-gap: 2px;
  }
}
/* Under 700px: stacked, and Highway's answers may wrap inside their own line. */
@container cmpl-review (max-width: 699px) {
  .cmpl-compact .cmpl-check {
    grid-template-columns: var(--cc-label) minmax(0, 1fr);
    grid-template-areas: "label state" "fact fact" "forge forge" "answer answer" "err err";
  }
  .cmpl-compact .cmpl-answers { flex-wrap: wrap; gap: 4px; }
  .cmpl-compact .cmpl-answer,
  .cmpl-compact .cmpl-answer:first-of-type,
  .cmpl-compact .cmpl-answer:last-of-type { margin-left: 0; border-radius: var(--fk-radius-sm); }
}
/* "✓ Done: Cleared, load N · Undo": white, a tone edge, bottom right (clear of the next review's Finish). */
.cmpl-toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 60;
  max-width: calc(100vw - 32px);
  box-sizing: border-box;
  padding: 10px 14px;
  background: var(--arl-white, #FFFFFF);
  border: 1px solid var(--arl-border, #E0E0E0);
  border-left: 4px solid var(--arl-border, #E0E0E0);
  border-radius: var(--arl-radius, 6px);
  box-shadow: var(--arl-shadow-lg, 0 4px 16px rgba(0, 0, 0, 0.15));
  color: var(--arl-text, #333333);
  font-size: 14px;
}
.cmpl-toast-good { border-left-color: var(--arl-success, #16A34A); }
.cmpl-toast-bad { border-left-color: var(--arl-error, #E11A22); }
.cmpl-toast-info { border-left-color: var(--fk-blue-600); }
.cmpl-toast .cmpl-ico { color: #05603a; }
.cmpl-toast-bad .cmpl-ico { color: var(--arl-accent-dark, #BD0E0E); }
.cmpl-stops { margin: 12px 0 0; padding-left: 18px; font-size: 13px; }

/* ── Notes ── */
.cmpl-note { padding: 10px 0; border-bottom: 1px solid var(--arl-border, #eef0f3); }
.cmpl-note-question { background: #f5f8ff; padding: 10px; border-radius: var(--arl-radius, 6px); }
.cmpl-note-head { font-size: 13px; margin-bottom: 4px; }
.cmpl-note-body { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14px; }
.cmpl-replies { margin: 0 0 0 20px; padding-left: 12px; border-left: 2px solid var(--arl-border, #e2e5ea); }
.cmpl-compose { margin-top: 12px; }
.cmpl-compose-wrap { position: relative; }
.cmpl-mention-pop { left: 0; right: 0; top: 100%; }
.cmpl-mentions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.cmpl-compose-actions { display: flex; gap: 8px; margin-top: 8px; }
/* A question to agent support (#319): the box itself, tinted as the question is in the thread. */
.cmpl-compose-question { background: var(--fk-moving-bg); border: 1px solid var(--fk-moving-line); border-radius: var(--fk-radius-sm); padding: 10px; }
.cmpl-compose-ask { margin: 0 0 8px; color: var(--fk-ink); }
.cmpl-timeline { margin: 0; padding-left: 18px; font-size: 13px; }
.cmpl-timeline li { margin: 6px 0; }

@media (max-width: 1100px) {
  .cmpl-review-grid { grid-template-columns: minmax(0, 1fr); }
  .cmpl-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .cmpl-tiles { grid-template-columns: minmax(0, 1fr); }
  .cmpl-field-row { grid-template-columns: minmax(0, 1fr); }
  /* A row opens the full page here; an open review left from a wider window stays in view. */
  .cmpl-inline { position: sticky; left: 0; max-width: calc(100vw - 48px); box-sizing: border-box; }
  .cmpl-toast { bottom: 16px; left: 16px; right: 16px; }
}

/* #343: reviewing several loads of one carrier together. The tick sits beside the row's toggle. */
.cmpl-list-table .cmpl-toggle-cell { white-space: nowrap; }
.cmpl-pick { width: 16px; height: 16px; margin: 0 6px 0 0; vertical-align: middle; accent-color: var(--fk-blue-600); cursor: pointer; }
.cmpl-pick:disabled { cursor: not-allowed; opacity: 0.4; }
.cmpl-pickbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 0 0 10px; padding: 8px 12px;
  border: 1px solid var(--fk-moving-line); border-radius: var(--fk-radius-md); background: var(--fk-moving-bg); color: var(--fk-ink); font-size: var(--fk-type-sm); }
.cmpl-pickbar .btn-primary { margin-left: auto; }
.fk-modal.cmpl-batch { width: min(900px, 100%); }
.cmpl-batch-carrier { margin: 0 0 4px; color: var(--fk-ink); }
.cmpl-batch-h { margin: 16px 0 6px; font-size: var(--fk-type-sm); font-weight: 600; color: var(--fk-ink); }
.cmpl-batch-loads { width: 100%; margin: 8px 0 4px; font-size: var(--fk-type-sm); }
.cmpl-batch-row { display: grid; grid-template-columns: minmax(150px, 220px) minmax(0, 1fr) auto; gap: 6px 12px; align-items: center;
  padding: 6px 0; border-bottom: 1px solid var(--fk-line); font-size: var(--fk-type-sm); }
.cmpl-batch-label { font-weight: 600; color: var(--fk-ink); }
.cmpl-batch-fact { color: var(--fk-ink-2); overflow-wrap: anywhere; }
.cmpl-batch-check { display: block; margin: 14px 0 0; font-size: var(--fk-type-sm); }
.cmpl-batch-outcome { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 14px 0 0; padding: 0; border: 0; font-size: var(--fk-type-sm); }
.cmpl-batch-outcome legend { width: 100%; margin-bottom: 4px; font-weight: 600; color: var(--fk-ink); }
.cmpl-batch-note { display: block; margin: 12px 0 0; font-size: var(--fk-type-sm); color: var(--fk-ink-2); }
.cmpl-batch-note textarea { display: block; width: 100%; margin-top: 4px; box-sizing: border-box; }
.cmpl-batch-changes { margin: 12px 0 0; color: var(--fk-ink-2); }
.cmpl-batch-problems { margin: 12px 0 0; padding: 8px 10px; border-radius: var(--fk-radius-md); font-size: var(--fk-type-sm); }
.cmpl-batch-problems ul { margin: 6px 0 0; padding-left: 18px; }
.cmpl-batch .fk-modal-foot { align-items: center; }
.cmpl-batch-state { margin-right: auto; font-size: var(--fk-type-sm); }
@media (max-width: 640px) {
  .cmpl-batch-row { grid-template-columns: minmax(0, 1fr); }
}