/* ===========================================================================
   compare-records.css — page-scoped styles for Tool 06 only.

   Loads AFTER /assets/v4.css and /assets/tool-chassis.css. Everything the
   chassis already owns (fields, chips, blanks, buttons, status, live region,
   reduced motion, forced colours) is used as-is and is NOT re-declared here.
   This file adds three things the chassis has no opinion about:

     1. the p12 backplate stage and its measured 34.5% left-clear column,
     2. the comparison table itself,
     3. a corrected focus ring for the page chrome OUTSIDE .tc-tool.

   COLOUR RULE: no hex literal appears in this file. Every colour resolves
   through a canon token declared in assets/v4.css and mirrored in
   assets/tool-chassis.css. Keep it that way.

   THINGS DELIBERATELY ABSENT — do not add them:
     no rule that highlights, tints, ranks, orders or otherwise distinguishes
     one company column from another. Every column has identical width,
     identical padding, identical type and identical ground. A "winner" style
     is one CSS rule away and that rule must never be written.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   1. FOCUS RING FOR THE PAGE CHROME
   v4.css ships `:focus-visible { outline: 3px solid var(--aqua) }`. Aqua 400
   on Foam 50 is 1.61:1 and fails the 3:1 non-text contrast minimum. This
   restates the chassis ring (Pacific 900 carries the contrast, Aqua is the
   halo) at the same specificity, and wins on load order. Inside .tc-tool the
   chassis rule is (0,2,0) and still wins — same ring either way.
   --------------------------------------------------------------------------- */
:focus-visible {
  outline: 3px solid var(--pacific-900);
  outline-offset: 2px;
  box-shadow: 0 0 0 8px var(--aqua-400);
  border-radius: 8px;
}

:focus:not(:focus-visible) {
  outline: none;
}

/* ---------------------------------------------------------------------------
   2. PAGE FRAME
   --------------------------------------------------------------------------- */

.cr-page {
  display: grid;
  gap: clamp(16px, 2.2vw, 26px);
  padding-block: clamp(24px, 4vw, 52px);
}

.cr-crumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--pacific-700);
}

.cr-crumb a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: 2px;
  color: var(--pacific-900);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.cr-crumb [aria-current="page"] {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 700;
  color: var(--pacific-900);
}

.cr-h1 {
  margin: 0;
  max-width: 20ch;
  font-size: clamp(30px, 4.6vw, 54px);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -.02em;
  color: var(--pacific-900);
  text-wrap: balance;
}

.cr-lede {
  margin: 0;
  max-width: 68ch;
  font-size: clamp(16px, 1.5vw, 19px);
  color: var(--pacific-700);
  text-wrap: pretty;
}

/* ---------------------------------------------------------------------------
   3. THE p12 BACKPLATE STAGE

   The p12-compare-stack master reserves a measured 34.5% left-clear column
   (first content column x=1323 of 3840) for exactly this HTML — see
   assets/coastal-pro/DERIVATIVES.md. That contract is a PERCENTAGE and
   survives every derivative width, so this is positioned in percentages and
   never in pixels tuned to one breakpoint.

   The clear column was sampled before this was written: every pixel in the
   left 33.5% of p12-compare-stack-1440.webp is rgb(240,246,251), so Pacific
   900 text sits on it at 10.92:1. That is why the panel can be transparent
   and let the drawing show through instead of covering it with a card.

   WHAT GOES IN THE CLEAR COLUMN, AND WHY IT IS NOT THE WHOLE TOOL.
   The reserved column is 34.5% of a stage that can never exceed the 1320px
   shell, so its widest possible measure is about 433px. The comparison table
   is 25 columns wide and the record picker is three labelled selects; neither
   fits there at a readable size. Worse, forcing them in makes the panel taller
   than the art, and the art has only 8.33% of clear space on its RIGHT edge
   (measured: content bbox x 493..1319 of 1440), so a taller panel crops the
   drawing. So the clear column carries the head — title, one-sentence purpose,
   method disclosure, field summary — and the picker and table sit below the
   stage at full width. That is the arrangement in which nothing is clipped and
   nothing is squeezed.

   object-position is pinned to 0% so that if the panel ever does grow taller
   than the art, `cover` crops from the RIGHT. The clear column survives and
   the drawing degrades — never the other way round.
   --------------------------------------------------------------------------- */

.cr-stage {
  display: grid;
  border: 1px solid var(--sky-400);
  border-radius: var(--tc-radius-lg);
  background: var(--foam-50);
  overflow: hidden;
}

.cr-stage__art {
  display: block;
  min-width: 0;
}

.cr-stage__art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 0% 50%;
}

.cr-stage__panel {
  display: grid;
  gap: 18px;
  align-content: start;
  padding: clamp(18px, 2.6vw, 28px);
  background: var(--tc-white);
}

/* Below the overlay breakpoint the art is a strip above the panel: the clear
   column is too narrow to hold a labelled form at phone widths, and squeezing
   it there would be the one thing DERIVATIVES.md warns against. */
@media (min-width: 1180px) {
  .cr-stage > * {
    grid-area: 1 / 1;
  }

  .cr-stage__panel {
    width: 34.5%;
    min-width: 0;
    align-content: center;
    background: transparent;
    padding: clamp(20px, 1.8vw, 30px) clamp(18px, 1.5vw, 26px);
  }
}

/* The stamped head sits inside the clear column; keep its measure honest. */
.cr-stage__panel .tc-tool__purpose {
  max-width: 46ch;
}

.cr-stage__fields {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--pacific-700);
  text-wrap: pretty;
}

.cr-picker {
  background: var(--foam-100);
}

/* ---------------------------------------------------------------------------
   4. THE COMPARISON TABLE
   --------------------------------------------------------------------------- */

.cr-result {
  gap: 14px;
}

.cr-result__meta {
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
}

/* Wide content scrolls inside its own container. The page body never scrolls
   horizontally. tabindex="0" + role="region" in the HTML makes this reachable
   and scrollable from the keyboard, which an overflow container is not by
   default. */
.cr-scroll {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--ocean-600);
  border-radius: var(--tc-radius-md);
  background: var(--tc-white);
}

.cr-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

.cr-table th,
.cr-table td {
  vertical-align: top;
  text-align: start;
  padding: 14px 16px;
  border-block-start: 1px solid var(--sky-400);
  border-inline-start: 1px solid var(--sky-400);
}

.cr-table thead th {
  border-block-start: 0;
}

.cr-table th:first-child,
.cr-table td:first-child {
  border-inline-start: 0;
}

/* --- row headers: the field name, its caveat, its source chip -------------- */

.cr-rowhead,
.cr-corner {
  position: sticky;
  inset-inline-start: 0;
  z-index: 2;
  width: 264px;
  min-width: 264px;
  background: var(--foam-50);
  /* The sticky column has to keep its own right edge once it overlaps a cell. */
  box-shadow: 1px 0 0 0 var(--ocean-600);
}

.cr-corner {
  z-index: 3;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--pacific-700);
  background: var(--foam-100);
}

.cr-rowhead {
  display: table-cell;
  font-weight: 400;
}

.cr-rowhead__label {
  display: block;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--pacific-900);
}

/* The workers' compensation sentence is mandatory and verbatim. It lives in
   the row header, which every cell in that row is bound to by scope="row", so
   it is announced with each cell rather than sitting somewhere a reader can
   skip past. Full-contrast ink: this is not fine print. */
.cr-rowhead__caption {
  display: block;
  margin-top: 6px;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.45;
  color: var(--pacific-900);
  border-inline-start: 4px solid var(--sun-300);
  padding-inline-start: 9px;
}

.cr-rowhead__note {
  display: block;
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--pacific-700);
  text-wrap: pretty;
}

/* WHERE TO CHECK — an action, so it gets a real target.
   These used to be links buried mid-sentence: a 17px tap area and easy to read
   straight past. As their own block they clear 44px, they are the obvious next
   move out of a blank row, and a keyboard user tabs onto something with edges.
   Styled as a quiet outlined control, never as a call to action: this page is
   not selling the click. */
.cr-check {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  margin-top: 8px;
  padding: 8px 13px;
  border: 1px solid var(--ocean-600);
  border-radius: var(--tc-radius-sm);
  background: var(--tc-white);
  color: var(--pacific-900);
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.35;
  text-decoration: none;
  text-wrap: pretty;
}

.cr-check:hover {
  background: var(--foam-100);
}

.cr-check::before {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ocean-600);
}

.cr-rowhead .tc-chip {
  margin-top: 9px;
}

/* --- column headers: identical for every company, no exceptions ------------ */

.cr-col {
  width: 250px;
  min-width: 250px;
  background: var(--foam-100);
  font-weight: 400;
}

.cr-col__name {
  display: block;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--pacific-900);
  text-wrap: pretty;
}

.cr-col__city {
  display: block;
  margin-top: 3px;
  font-size: 13px;
  color: var(--pacific-700);
}

.cr-col .tc-chip {
  margin-top: 9px;
}

/* aria-current marks the columns the reader chose. It is a "you picked this"
   marker, not a verdict: a hairline, no fill, no colour that reads as good. */
.cr-col[aria-current="true"] {
  box-shadow: inset 0 3px 0 0 var(--ocean-600);
}

/* --- cells ---------------------------------------------------------------- */

.cr-cell {
  background: var(--tc-white);
}

/* A populated value and an honest blank share ONE declaration, exactly as the
   chassis does it for .tc-field__value / .tc-field__state. Same size, same
   weight, same ink. Splitting them is how a blank quietly becomes a greyed-out
   apology. Do not split them. */
.cr-val,
.cr-state {
  display: block;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--pacific-900);
  font-variant-numeric: tabular-nums;
}

/* Differentiated by a sand edge, not by being quieter. No opacity, no grey,
   no italics, no smaller type. It is a result, not an apology. */
.cr-cell--blank {
  border-inline-start: 6px solid var(--sand-200);
}

.cr-where {
  display: block;
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--pacific-700);
  text-wrap: pretty;
}

.cr-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 17px;
  font-weight: 600;
  color: var(--pacific-900);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 2px;
  overflow-wrap: anywhere;
}

.cr-readnote {
  margin: 0;
  max-width: 78ch;
  font-size: 14px;
  color: var(--pacific-700);
  text-wrap: pretty;
}

.cr-foot-note {
  margin: 6px 0 0;
  max-width: 82ch;
  font-size: 14px;
  color: var(--pacific-900);
  text-wrap: pretty;
}

.cr-foot-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 4px 0 0;
}

/* ---------------------------------------------------------------------------
   5. NEXT-STEP RAIL
   --------------------------------------------------------------------------- */

.cr-next {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: clamp(18px, 2.4vw, 26px);
  border: 1px solid var(--sky-400);
  border-radius: var(--tc-radius-lg);
  background: var(--foam-100);
}

.cr-next h2 {
  margin: 0 0 6px;
  font-size: 20px;
  font-weight: 700;
  color: var(--pacific-900);
}

.cr-next p {
  margin: 0;
  max-width: 62ch;
  color: var(--pacific-700);
  text-wrap: pretty;
}

/* .tc-btn is a chassis class; used here on a link outside .tc-tool, so it
   needs the chassis's own ink and edge restated from canon tokens. */
.cr-next .tc-btn {
  min-height: 44px;
  text-decoration: none;
  color: var(--pacific-900);
  border-color: var(--ocean-600);
  background: var(--tc-white);
}

/* ---------------------------------------------------------------------------
   6. NARROW VIEWPORTS
   --------------------------------------------------------------------------- */

@media (max-width: 720px) {
  .cr-rowhead,
  .cr-corner {
    width: 200px;
    min-width: 200px;
  }

  .cr-col {
    width: 220px;
    min-width: 220px;
  }

  .cr-next {
    flex-direction: column;
    align-items: stretch;
  }

  .cr-next .tc-btn {
    justify-content: center;
  }
}

/* ---------------------------------------------------------------------------
   7. REDUCED MOTION
   Nothing on this page animates or depends on movement: narrowing the table
   is an instant state change and the visible status line states it in words.
   This block exists so that stays true if someone adds a transition later.
   --------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .cr-page *,
  .cr-page *::before,
  .cr-page *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------------------------------------------------------------------------
   8. FORCED COLOURS
   --------------------------------------------------------------------------- */

@media (forced-colors: active) {
  .cr-scroll,
  .cr-stage,
  .cr-next {
    border: 1px solid CanvasText;
  }

  .cr-cell--blank {
    border-inline-start: 6px solid CanvasText;
    forced-color-adjust: none;
  }

  .cr-rowhead,
  .cr-corner {
    background: Canvas;
    box-shadow: 1px 0 0 0 CanvasText;
  }

  .cr-col[aria-current="true"] {
    box-shadow: inset 0 3px 0 0 Highlight;
  }
}