/* ==========================================================================
   DESK.CSS: THE RAIL LAYOUT, 48rem AND UP
   ==========================================================================
   The desktop and tablet design, from the Claude Design file "Scope Desktop &
   Tablet". Everything in here sits behind a min-width query, so a phone loads
   a sheet of no rules and keeps the layout it already had. This sheet loads
   LAST, after the page's own sheet (scope.css on /new), because its job is to
   re-lay-out what the earlier sheets draw; nothing in it adds or removes a
   control, and every selector below is one the templates already carry.

   THE THREE POSTURES.
     48rem to 79.999rem  the ICON RAIL: 4.5rem wide, a mark, the orange +,
                         the four sections as glyph over word, the meter,
                         the account square. Tablets, portrait and landscape.
     64rem and up        TWO COLUMNS: the estimate flow gets its aside (the
                         action bar as a card beside the step) and the yard
                         gets its recent list in a right-hand column.
     80rem and up        the WIDE RAIL: 12.5rem, the wordmark, words beside
                         the glyphs, the meter as a card, the account row.

   COLOUR RULES THIS SHEET KEEPS. Orange (--orange-500) carries text ONLY on
   the navy field, where it measures 7.1:1 against --ink and 9.1:1 against
   --bezel; on the canvas it is 1.85:1 and appears only as a fill under
   --on-brand. Muted text on the canvas is --muted (5.48:1) and never lighter.
   Every ring is navy on light and white on navy.
   -------------------------------------------------------------------------- */

/* ---- 1. the layout's own values -------------------------------------- */
@media (min-width: 48rem) {
  :root {
    --rail-w: 5rem;            /* the icon rail; the wide rail widens it below */
    /* The flow's aside and the yard's right column. Capped at 30vw: at 200%
       text 17rem is 544px, which on a 1280px screen left the step 336px and
       ran the stepper under the card. At 100% the cap never bites. */
    --aside-w: min(17rem, 30vw);
    --flowbar-h: var(--tap);   /* Back / Cancel and the stepper, one row */
  }
}
@media (min-width: 80rem) {
  :root { --rail-w: 12.5rem; }
}

/* ---- 2. the rail ------------------------------------------------------- */
@media (min-width: 48rem) {
  /* A GRID, not a flex column. The account row wants the sign out beside it
     and the meter wants to sit above them both at the foot, and a column of
     `order` values cannot put two items on one line. Four rows: the mark,
     the nav (which fills whatever is left), the account, and nothing else.
     `1fr` on the nav row is what pushes the foot to the floor. */
  .topbar:has(.nav) .topbar-in {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto minmax(0, 1fr) auto;
    align-content: start; align-items: start;
    gap: var(--s4) var(--s2);
    padding: var(--s5) var(--s3) var(--s4);
    height: 100%;
  }
  .topbar:has(.nav) .lockup { grid-area: 1 / 1 / 2 / 3; margin: 0; justify-self: start; }
  .topbar:has(.nav) .nav    { grid-area: 2 / 1 / 3 / 3; align-self: stretch; height: auto; }
  .topbar:has(.nav) .acct   { grid-area: 3 / 1 / 4 / 2; margin: 0; align-self: center; min-width: 0; }
  .topbar:has(.nav) .rail-signout { grid-area: 3 / 2 / 4 / 3; align-self: center; }
  .topbar:has(.nav) .nav-toggle, .topbar:has(.nav) .chip-credits { display: none; }

  /* The nav fills its row so the meter can sit at its foot. */
  .topbar .nav { display: flex; flex-direction: column; }
  .topbar .nav-credits { margin-top: auto; }
  /* The drawer's worded Sign out gives way to the icon beside the account
     row. One control in the tree at any width; both are the same POST. */
  .topbar .nav .nav-signout, .topbar .nav .linklike { display: none; }

  /* The glyphs: one stroke, one cap, currentColor, so the current-page ink
     and forced colours both reach them. */
  .nav-ico {
    display: block; width: 20px; height: 20px; flex: none;
    fill: none; stroke: currentColor;
    stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round;
  }
  .topbar .nav a { display: flex; align-items: center; gap: var(--s3); }
  .topbar .nav .nav-chev { display: none; }

  /* THE METER. One sentence ("22 credits left of 30.") and a bar that is
     decoration, aria-hidden in the markup. Orange is a fill here, on navy. */
  .topbar .nav-credits {
    display: grid; gap: var(--s2);
    padding: var(--s3);
    border-radius: var(--r);
    background: rgba(255, 255, 255, .05);
  }
  .nav-credits-line {
    margin: 0;
    display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline;
    gap: 0 var(--s2);
    font-size: var(--fs-tiny); line-height: var(--lh-snug);
    color: var(--on-bezel);                                  /* 18.31:1 */
  }
  .nav-credits-line strong { font-size: var(--fs-meta); font-weight: 700; }
  .nav-credits-of { color: var(--on-bezel-muted); font-size: var(--fs-micro); }   /* 8.74:1 */
  .nav-meter {
    display: block; height: 4px; border-radius: var(--r-pill);
    background: rgba(255, 255, 255, .14); overflow: hidden;
  }
  .nav-meter-fill { display: block; height: 100%; border-radius: inherit; background: var(--orange-500); }
  .nav-credits-note {
    margin: 0;
    font-size: var(--fs-tiny); line-height: var(--lh-snug);
    color: var(--on-bezel-muted);                            /* 8.74:1 */
  }
  .topbar .nav-credits .link { color: var(--on-bezel); }

  /* THE ACCOUNT ROW: the square, the company, the person under it. */
  .topbar .acct {
    display: grid; grid-template-columns: 2rem minmax(0, 1fr);
    grid-template-rows: auto auto; column-gap: var(--s3); align-items: center;
    width: 100%; height: auto; min-height: var(--tap);
    padding: var(--s2);
    border: 0; border-radius: var(--r);
    background: rgba(255, 255, 255, .05);
  }
  .topbar .acct-mark { grid-row: 1 / span 2; }
  .topbar .acct-name:not(:empty) {
    grid-column: 2;
    font-size: var(--fs-tiny); line-height: var(--lh-snug);
    /* Two lines, then an ellipsis: "Ridgeline Roofing" is 17 characters and
       one line of this column is 13. */
    white-space: normal; overflow-wrap: anywhere;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
    overflow: hidden;
  }
  .acct-person {
    display: block; grid-column: 2; min-width: 0;
    font-size: var(--fs-tiny); font-weight: 400; line-height: var(--lh-snug);
    letter-spacing: normal; text-transform: none;
    color: var(--on-bezel-muted);                            /* 8.74:1 */
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .topbar .acct[aria-current="page"] { box-shadow: inset 0 0 0 var(--bw-strong) var(--on-bezel-muted); text-decoration: none; }
  .topbar .acct[aria-current="page"] .acct-name { text-decoration: underline; text-decoration-thickness: var(--bw-strong); text-underline-offset: 3px; }

  /* THE RAIL'S SIGN OUT: an icon button whose name is the hidden word. */
  .rail-signout { display: block; }
  .rail-signout-btn {
    display: grid; place-items: center;
    width: var(--tap); height: var(--tap); padding: 0;
    border: 0; border-radius: var(--r-sm);
    background: none; color: var(--on-bezel-muted);          /* 8.74:1 */
    cursor: pointer;
  }
  .rail-signout-btn svg {
    width: 22px; height: 22px;
    fill: none; stroke: currentColor; stroke-width: 1.9;
    stroke-linecap: round; stroke-linejoin: round;
  }
  @media (hover: hover) {
    .rail-signout-btn:hover { background: var(--bezel-raised); color: var(--on-bezel); }
  }
  .rail-signout-btn:focus-visible {
    outline: var(--bw-strong) solid var(--on-bezel); outline-offset: 2px;
    box-shadow: 0 0 0 4px var(--ring-halo);
  }
}
/* below the rail the icon form does not exist on screen; the drawer's word does */
@media (max-width: 47.999rem) {
  .rail-signout, .nav-ico { display: none; }
  .acct-person { display: none; }
}

/* ---- 2b. the icon rail, 48rem to 79.999rem ------------------------------ */
@media (min-width: 48rem) and (max-width: 79.999rem) {
  .topbar:has(.nav) .topbar-in {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr) auto auto;
    justify-items: center;
    padding: var(--s4) var(--s1) var(--s3);
    gap: var(--s3);
  }
  .topbar:has(.nav) .lockup { grid-area: 1 / 1 / 2 / 2; justify-self: center; }
  .topbar:has(.nav) .nav    { grid-area: 2 / 1 / 3 / 2; width: 100%; }
  .topbar:has(.nav) .acct   { grid-area: 3 / 1 / 4 / 2; }
  .topbar:has(.nav) .rail-signout { grid-area: 4 / 1 / 5 / 2; }
  /* The mark alone: the wordmark is 101px of letterforms in a 72px column.
     apple-touch-icon.png is the ring and the arrow on a navy square, and the
     square is the rail's own navy, so only the mark shows. */
  .topbar:has(.nav) .lockup-logo { content: url("apple-touch-icon.png"); width: 40px; height: 40px; border-radius: 10px; }

  /* Glyph over word, centred, and the words are still the names. */
  /* "estimates" is the longest word and it is 52px at this size: the column
     holds 68, so the word never breaks at 100% and at 200% the rail doubles
     with it. `anywhere` stays as the break of last resort only. */
  .topbar .nav a {
    flex-direction: column; justify-content: center; gap: var(--s1);
    min-height: 3.5rem; padding: var(--s2) 2px;
    font-size: 0.6875rem; line-height: 1.15; text-align: center;
    overflow-wrap: anywhere; hyphens: manual;
  }
  .nav-ico { width: 22px; height: 22px; }
  /* The + is a 48px orange square and its words are clipped, not removed:
     the accessible name stays "New estimate". */
  .topbar .nav a.nav-new {
    width: var(--tap); height: var(--tap); min-height: 0;
    margin: 0 auto var(--s2); padding: 0;
    border-radius: var(--r-sm);
  }
  .topbar .nav a.nav-new svg { width: 22px; height: 22px; }
  .nav-new .nav-lbl {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
  /* The meter as a tile: the figure, then the words under it. The note has
     no room here and is display:none; the wide rail and the drawer keep it. */
  .topbar .nav-credits { padding: var(--s2) var(--s1); text-align: center; gap: var(--s1); }
  .nav-credits-line { flex-direction: column; align-items: center; gap: 0; font-size: var(--fs-micro); }
  .nav-credits-line strong { font-size: var(--fs-tiny); line-height: 1.15; }
  .nav-credits-note { display: none; }
  /* The account square, as it is on a phone; the name leaves the name too. */
  .topbar .acct {
    display: inline-flex; justify-content: center;
    width: var(--tap); height: var(--tap); padding: 0;
    border: var(--bw-strong) solid var(--on-bezel-muted); border-radius: var(--r);
    background: var(--bezel-raised);
  }
  /* app.css sets the name to display:block at (0,3,0); this matches it. */
  .topbar .acct-name:not(:empty), .acct-person { display: none; }
  .topbar .acct-mark { border: 0; background: none; width: auto; height: auto; }
}

/* ---- 3. the canvas: heroes, the foot ------------------------------------ */
@media (min-width: 48rem) {
  /* The heroes are cards on the canvas rather than bands bleeding to its
     edges: all four corners, a margin, the same field. */
  body:has(.topbar .nav) .home-hero,
  body:has(.topbar .nav) .step-hero {
    margin: 0 0 var(--s6);
    padding: var(--s6) var(--s7);
    border-radius: var(--r-lg);
  }
  body:has(.topbar .nav) .home-hero.is-alone { padding-bottom: var(--s6); }
  /* The eyebrow, in the brand's own colour, on the field only: 7.1:1 against
     --ink, the lightest stop of the gradient. */
  body:has(.topbar .nav) .home-greet,
  body:has(.topbar .nav) .step-hero .step-of { color: var(--orange-500); }

  /* The yard's hero: the words on the left, the action on the right. */
  body:has(.topbar .nav) .home-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "greet greet" "h1 cta" "lede cta" "note note";
    align-items: center; column-gap: var(--s6);
  }
  body:has(.topbar .nav) .home-greet { grid-area: greet; }
  body:has(.topbar .nav) .home-hero h1 { grid-area: h1; margin: 0 0 var(--s2); }
  body:has(.topbar .nav) .home-hero .lede { grid-area: lede; margin: 0; }
  body:has(.topbar .nav) .home-hero-note { grid-area: note; }
  body:has(.topbar .nav) .home-start {
    grid-area: cta; align-self: center;
    width: auto; min-height: var(--tap-lg); padding: 0 var(--s6);
    background: var(--orange-500); border-color: var(--orange-500);
    color: var(--on-brand);                                  /* 7.53:1 */
    border-radius: var(--r);
  }
  @media (hover: hover) {
    body:has(.topbar .nav) .home-start:hover { background: var(--brand-press); border-color: var(--brand-press); }
  }
  /* The job list no longer hangs off the hero's edge; the hero is a card. */
  body:has(.topbar .nav) .jobpick { margin-top: 0; }
  .jobpick-trade-h {
    font-size: var(--fs-micro); font-weight: 700;
    letter-spacing: var(--track-caps); text-transform: uppercase;
    color: var(--muted);                                     /* 5.48:1 */
  }
  /* The text block takes the row and lays the rate at its right, beside the
     chevron, with the name and the second line stacked at the left. */
  .jobpick-text {
    flex: 1 1 auto;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "name rate" "sub rate";
    align-items: center; column-gap: var(--s4);
  }
  .jobpick-name { grid-area: name; }
  .jobpick-sub  { grid-area: sub; }
  .jobpick-rate { grid-area: rate; white-space: nowrap; }

  /* The foot: one quiet line, left-aligned under the content. */
  body:has(.topbar .nav) .sitefoot {
    display: flex; flex-wrap: wrap; align-items: baseline;
    gap: var(--s1) var(--s4);
    text-align: left;
  }
  body:has(.topbar .nav) .sitefoot p { margin: 0; font-size: var(--fs-tiny); color: var(--muted); }
  body:has(.topbar .nav) .sitefoot .link { font-size: var(--fs-tiny); }
}

/* ---- 4. the yard in two columns, 64rem and up --------------------------- */
@media (min-width: 64rem) {
  body.page-home:has(.topbar .nav) main:has(.jobpick) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--aside-w);
    grid-template-rows: auto auto auto minmax(0, 1fr);
    column-gap: var(--s6); row-gap: 0;
    align-items: start;
  }
  .page-home main:has(.jobpick) > .home-hero { grid-column: 1 / -1; grid-row: 1; }
  .page-home main:has(.jobpick) > .jobpick   { grid-column: 1; grid-row: 2 / 5; }
  .page-home main:has(.jobpick) > .band      { grid-column: 2; grid-row: 2; margin: 0 0 var(--s3); }
  .page-home main:has(.jobpick) > .stats     { grid-column: 2; grid-row: 3; }
  /* THE MONTH AS ROWS, not tiles: three tiles in a 17rem column gave each
     130px and "£27,523" at 28px is 139, so the figure painted past its box
     (the reflow harness caught it). One card, three lines, the word at the
     left and the figure at the right; the DOM order (figure, then word) is
     unchanged and is what a screen reader hears. */
  .page-home main:has(.jobpick) > .stats {
    grid-template-columns: minmax(0, 1fr); gap: 0;
    background: var(--readout);
    border: var(--bw) solid var(--rule-soft); border-radius: var(--r-lg);
    box-shadow: var(--shadow-1); overflow: hidden;
  }
  .page-home main:has(.jobpick) > .stats .stat {
    flex-direction: row-reverse; justify-content: space-between; align-items: baseline;
    gap: var(--s3);
    padding: var(--s3) var(--s4);
    border: 0; border-radius: 0;
  }
  .page-home main:has(.jobpick) > .stats .stat + .stat { border-top: var(--bw) solid var(--hair); }
  .page-home main:has(.jobpick) > .stats .stat-fig { font-size: 1.25rem; min-width: 0; }
  .page-home main:has(.jobpick) > .section   { grid-column: 2; grid-row: 4; margin-top: 0; }
  .page-home main:has(.jobpick) > .empty-state { grid-column: 1 / -1; }

  /* The job list as one card of rows, the design's device. */
  .page-home .jobpick-list {
    display: block;
    background: var(--readout); border-radius: var(--r-lg);
    border: var(--bw) solid var(--rule-soft);
    box-shadow: var(--shadow-1); overflow: hidden;
  }
  .page-home .jobpick-list > li + li { border-top: var(--bw) solid var(--hair); }
  .page-home .jobpick-list > li > .jobpick-card {
    border: 0; border-radius: 0; box-shadow: none;
  }
  .page-home .jobpick-types { margin: 0 0 var(--s3) calc(var(--tap) + var(--s4) * 2); }
  .page-home .jobpick-type { border-radius: var(--r); }

  /* The recent list as one card in the right column: the rows stack their
     price under the address, the same restack the phone rule makes. */
  .page-home .section .joblist {
    display: block;
    background: var(--readout); border-radius: var(--r-lg);
    border: var(--bw) solid var(--rule-soft);
    box-shadow: var(--shadow-1); overflow: hidden;
  }
  .page-home .section .job {
    grid-template-columns: minmax(0, 1fr) auto;
    border-radius: 0; box-shadow: none;
  }
  .page-home .section .job + .job { border-top: var(--bw) solid var(--hair); }
  /* The address takes the whole width; the price and the badge share the
     line under it. An Ordnance Survey address is five lines in half a column. */
  .page-home .section .job-main { grid-column: 1 / -1; grid-row: 1; }
  .page-home .section .job-price { grid-column: 1; grid-row: 2; justify-self: start; min-width: 0; min-height: 0; font-size: var(--fs-body); }
  .page-home .section .job > .pill { grid-column: 2; grid-row: 2; justify-self: end; align-self: center; margin-top: 0; }
  .page-home .card-head h2 { font-size: var(--fs-h2); }
}

/* ---- 5. the estimate flow: the bar, the stepper, the heroes ------------- */
@media (min-width: 48rem) {
  /* The flow's head sits on the canvas: Back or Cancel at the left in navy,
     the stepper at the right. It was a navy band that ran on from the bar;
     the bar is a rail now and there is nothing to run on from. */
  body:has(.topbar .nav) .flowbar {
    margin: 0 0 var(--s4); padding: 0;
    min-height: var(--flowbar-h);
    background: none; color: var(--ink);
  }
  body:has(.topbar .nav) .flow-back,
  body:has(.topbar .nav) .flow-cancel {
    color: var(--navy); background: none; border-color: transparent;
  }
  @media (hover: hover) {
    body:has(.topbar .nav) .flowbar .flow-back:hover,
    body:has(.topbar .nav) .flowbar .flow-cancel:hover { background: var(--well); border-color: transparent; }
  }
  body:has(.topbar .nav) .flowbar a:focus-visible,
  body:has(.topbar .nav) .flowbar button:focus-visible {
    outline: var(--bw-strong) solid var(--navy); outline-offset: 2px;
    box-shadow: none;
  }
  /* Cancel stands in for Back on step 1, where Back is hidden. Its resting
     display:none is outside every media query, at the foot of this sheet,
     so a phone never draws it. */
  body:has(.topbar .nav) #back[hidden] + .flow-cancel {
    display: inline-flex; align-items: center; gap: var(--s2);
    min-height: var(--tap); padding: 0 var(--s3);
    border-radius: var(--r);
    font-weight: 600; text-decoration: none;
  }
  .flow-cancel svg { width: 18px; height: 18px; flex: none; }

  /* THE STEPPER: numbered circles joined by rules, the words beside them.
     Done is orange under a navy tick (7.53:1) with an amber ring (3.06:1 on
     the canvas); current is navy with a white number; to come is a grey ring
     with a grey number, both at or above 3:1. The current step never carries
     --c-brand, as tokens.css requires and the contract test checks. */
  /* The stepper may wrap and may shrink: at 200% text it is 658px wide, and
     a column that cannot hold it on one line must hold it on two rather
     than let it run on under the aside. */
  .progress { flex: 0 1 auto; min-width: 0; }
  .progress ol { counter-reset: step; flex-wrap: wrap; justify-content: flex-end; gap: var(--s2) 0; }
  .progress li { counter-increment: step; display: flex; align-items: center; gap: var(--s2); }
  .progress li + li::before {
    content: ""; flex: none;
    width: var(--s6); height: var(--bw);
    margin: 0 var(--s2);
    background: var(--rule-soft);
  }
  .progress .dot {
    width: 1.5rem; height: 1.5rem; border-radius: 50%;
    display: grid; place-items: center;
    background: var(--readout);
    border: var(--bw-strong) solid var(--rule-soft);        /* 3.29:1 */
    color: var(--muted);                                     /* 5.99:1 */
    font-size: var(--fs-micro); font-weight: 700; line-height: 1;
    transition: none;
  }
  .progress .dot::before { content: counter(step); }
  .progress li[aria-current="step"] .dot {
    width: 1.5rem;
    background: var(--navy); border-color: var(--navy);
    color: var(--readout);                                   /* 11.17:1 */
  }
  .progress li[data-done] .dot {
    background: var(--orange-500) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3L12.5 5' fill='none' stroke='%23062A4A' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat;
    border-color: var(--amber);
  }
  .progress li[data-done] .dot::before { content: ""; }
  .progress .lbl {
    position: static; width: auto; height: auto; margin: 0; padding: 0;
    clip-path: none; overflow: visible; white-space: nowrap;
    font-size: var(--fs-tiny); font-weight: 600;
    color: var(--muted);                                     /* 5.48:1 */
  }
  .progress li[aria-current="step"] .lbl,
  .progress li[data-done] .lbl { color: var(--ink); }
  .progress li[aria-current="step"] .lbl { font-weight: 700; }
  @media (forced-colors: active) {
    .progress li[aria-current="step"] .dot { border-width: 4px; }
    .progress li[data-done] .dot { background-color: Highlight; }
  }

  /* Step 1: a card that carries types spans the row, so its fieldset is not
     squeezed into half of it. */
  body:has(.topbar .nav) #step-1 .card-opt.has-variants { grid-column: 1 / -1; }

  /* Step 2: the address and the customer's name in one card. */
  .addr-card {
    display: block;
    padding: var(--s5);
    background: var(--readout);
    border: var(--bw) solid var(--rule-soft);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-1);
  }
  body:has(.topbar .nav) .addr-float { margin-top: 0; z-index: auto; }
  .addr-label {
    display: block; margin: 0 0 var(--s2);
    font-weight: 700; color: var(--ink);
  }
  body:has(.topbar .nav) .addr-float .combobox-wrapper > input {
    height: var(--tap-lg);
    border: var(--bw) solid var(--rule-soft); border-radius: var(--r);
    box-shadow: none;
    padding-left: 2.75rem;
    font-size: var(--fs-body);
    background: var(--readout) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235A6473' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='M20 20l-4.2-4.2'/%3E%3C/svg%3E") no-repeat var(--s3) center / 20px;
  }
  body:has(.topbar .nav) .addr-float .combobox-wrapper > input:focus-visible {
    outline: var(--bw-strong) solid var(--navy); outline-offset: 0;
    border-color: var(--navy);
  }
  .addr-card .client-field { margin-top: var(--s5); }

  /* Step 3 while it measures: a card, not a screen. */
  body:has(.topbar .nav) .locator {
    margin: 0; border-radius: var(--r-lg);
    min-height: 30rem;
    padding: var(--s8);
  }
}
@media (max-width: 47.999rem) {
  .addr-card { display: contents; }
  /* The label is read before typing and never drawn: on a phone the input
     hangs off the hero's edge and a word above it would sit on the navy. */
  .addr-label {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
}

/* ---- 6. the estimate flow in two columns, 64rem and up ------------------ */
@media (min-width: 64rem) {
  /* THE ASIDE IS THE ACTION BAR. The body grid grows a third column and the
     bar moves into it: sticky under the flow's head, a card, the summary
     above the one primary button. Nothing was added to the tree to do this
     -- #next, #share and #back-to-editing are the same three controls
     paintActions() has always driven, in the same element. The fourth
     column is the slack on a wide monitor, so main and the aside stay
     together at the rail rather than drifting to opposite edges. */
  body.page-new:has(.topbar .nav) {
    grid-template-columns:
      var(--rail-w)
      minmax(0, calc(var(--page-measure) + 2 * var(--s7)))
      var(--aside-w)
      minmax(0, 1fr);
  }
  body.page-new:has(.topbar .nav) main { grid-column: 2; grid-row: 2; }
  body.page-new:has(.topbar .nav) .setup-banner,
  body.page-new:has(.topbar .nav) .sitefoot { grid-column: 2 / 4; }
  body.page-new:has(.topbar .nav) .actionbar {
    grid-column: 3; grid-row: 2;
    position: sticky; top: var(--s6); bottom: auto; left: auto; right: auto;
    align-self: start;
    /* main's top gap, the flow's head, and the head's margin: the aside's
       top lines up with the hero's. */
    margin: calc(var(--s4) + var(--flowbar-h) + var(--s4)) 0 0;
    max-height: calc(100dvh - 2 * var(--s6)); overflow-y: auto;
    padding: var(--s5);
    display: grid; gap: var(--s4);
    background: var(--readout);
    border: var(--bw) solid var(--rule-soft);                /* 3.29:1 */
    border-top: var(--bw) solid var(--rule-soft);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-1);
    backdrop-filter: none;
    z-index: 1;
  }
  /* While the locator holds the screen the bar is hidden, and the column
     it lived in closes so the measuring card takes the width. */
  body.page-new:has(.topbar .nav):has(.actionbar[hidden]) {
    grid-template-columns: var(--rail-w) minmax(0, calc(var(--page-measure) + 2 * var(--s7))) minmax(0, 1fr);
  }
  body.page-new:has(.topbar .nav):has(.actionbar[hidden]) .sitefoot { grid-column: 2 / 3; }
  body.page-new:has(.topbar .nav) .actionbar .actions {
    display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s2);
    justify-content: stretch; justify-items: stretch;
    margin: 0; padding: 0; width: auto; max-width: none;
  }
  body.page-new:has(.topbar .nav) .actionbar .actions button {
    flex: none; width: 100%; min-width: 0;
  }
  body.page-new:has(.topbar .nav) .actionbar button.primary { box-shadow: none; }
  body.page-new:has(.topbar .nav) .actionbar button.secondary {
    min-height: var(--tap-lg); border-radius: var(--r);
    background: var(--readout); color: var(--navy);
    border: var(--bw-strong) solid var(--rule-soft);
    font-size: var(--fs-body); font-weight: 700;
  }
  @media (hover: hover) {
    body.page-new:has(.topbar .nav) .actionbar button.secondary:hover { background: var(--well); border-color: var(--navy); }
  }

  /* The summary blocks. display:none below this width as well as `hidden`,
     so a phone never lays them out. */
  .aside-sum { display: grid; gap: var(--s4); }
  .aside-eyebrow {
    margin: 0;
    font-size: var(--fs-micro); font-weight: 700;
    letter-spacing: var(--track-caps); text-transform: uppercase;
    color: var(--muted);                                     /* 5.99:1 */
  }
  .aside-kv { margin: 0; display: grid; gap: var(--s3); }
  .aside-row dt { margin: 0 0 2px; font-size: var(--fs-tiny); color: var(--muted); }
  .aside-row dd { margin: 0; font-size: var(--fs-body); font-weight: 700; color: var(--ink); overflow-wrap: anywhere; }
  .aside-row dd.is-muted, .aside-row dd .is-muted { font-weight: 400; color: var(--muted); }
  .aside-rate { display: block; font-size: var(--fs-meta); font-weight: 700; color: var(--amber-ink); }   /* 5.02:1 */
  .aside-match {
    margin: 0; padding: var(--s3);
    border-radius: var(--r);
    background: var(--ok-wash); color: var(--ok-ink);        /* 7.74:1 */
    border: var(--bw) solid var(--ok-ink);
    font-size: var(--fs-meta); font-weight: 600; line-height: var(--lh-snug);
  }
  .aside-match.uncertain { background: var(--amber-wash); color: var(--amber-ink); border-color: var(--amber); }
  .aside-facts { gap: 0; }
  .aside-facts .aside-row {
    display: flex; justify-content: space-between; gap: var(--s3);
    padding: var(--s2) 0;
    border-top: var(--bw) solid var(--hair);
  }
  .aside-facts .aside-row dt { margin: 0; font-size: var(--fs-meta); }
  .aside-facts .aside-row dd { font-size: var(--fs-meta); text-align: right; }
  .aside-conf { display: grid; gap: var(--s2); }
  .aside-conf-line { margin: 0; font-size: var(--fs-body); color: var(--ok-ink); }
  .aside-conf[data-level="mid"] .aside-conf-line { color: var(--amber-ink); }
  .aside-conf[data-level="low"] .aside-conf-line { color: var(--error); }
  .aside-conf-bar { display: block; height: 6px; border-radius: var(--r-pill); background: var(--well); overflow: hidden; }
  .aside-conf-fill { display: block; height: 100%; border-radius: inherit; background: var(--ok-ink); }
  .aside-conf[data-level="mid"] .aside-conf-fill { background: var(--amber); }
  .aside-conf[data-level="low"] .aside-conf-fill { background: var(--error); }
  .aside-conf-note { margin: 0; font-size: var(--fs-tiny); line-height: var(--lh-snug); color: var(--muted); }
  .aside-hint { margin: 0; font-size: var(--fs-tiny); line-height: var(--lh-snug); color: var(--muted); }

  /* What the aside restates leaves the column, so nothing is said twice. */
  body.page-new:has(.topbar .nav) #match-method,
  body.page-new:has(.topbar .nav) #confidence-block { display: none; }

  /* Step 1: the cards in two columns; a card with types spans both. */
  body.page-new:has(.topbar .nav) #step-1 .cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s4);
  }
  body.page-new:has(.topbar .nav) #step-1 .card-opt.has-variants { grid-column: 1 / -1; }
  body.page-new:has(.topbar .nav) .card-opt label::after { top: var(--s5); margin-top: 0; }

  /* Step 3 while it measures: the words on the left, the map on the right. */
  /* Two flexible rows bracket the three the words sit in, so the map's
     height (it spans all five) goes to the brackets and the words stay
     together, centred beside it. Span the words' rows alone and the map's
     height is shared out among them, and the title drifts a screen from the
     list it heads. */
  body.page-new:has(.topbar .nav) .locator {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 22rem);
    grid-template-rows: minmax(0, 1fr) auto auto auto minmax(0, 1fr);
    column-gap: var(--s7);
    align-items: center; align-content: center;
    text-align: left;
  }
  body.page-new:has(.topbar .nav) .locator-map { grid-area: 1 / 2 / 6 / 3; width: 100%; max-width: 22rem; justify-self: center; }
  body.page-new:has(.topbar .nav) .locator-title { grid-area: 2 / 1; text-align: left; }
  body.page-new:has(.topbar .nav) .locator-sub { grid-area: 3 / 1; text-align: left; }
  body.page-new:has(.topbar .nav) .locator-stages { grid-area: 4 / 1; margin: 0; width: 100%; }
}
@media (max-width: 63.999rem) {
  .aside-sum, .aside-hint, #aside-wrong { display: none; }
}

/* ---- 7. resting states that hold at every width -------------------------- */
/* Cancel exists for the rail layout's step 1 and is shown by the rule in
   section 5; anywhere else it is not drawn. Outside the queries on purpose:
   a phone met it as a bare link when this sat inside the 48rem block. */
.flow-cancel { display: none; }