/* toolkit.css: the Fulfillment Toolkit shell, shared by base.html and
   the Process Guides shell (guides/_base.html). PG4.1 moved these
   sections here from base.html's <style> block without an edit; the
   rules for signed-in pages only stay in base.html. */

  /* === Axia by Qcells brand tokens ===
     Per Qcells Sub-Brand Guide 2026.02 (Axia).

     - Primary 1 (Infinity Navy)    #001C77
     - Primary 2 (Tahoe Green)      #00C6C1  (max 10% as highlight)
     - Primary 3 (Mont Blanc White) #FFFFFF
     - Secondary 1 (orange, warn)   #F75C03  (max 10%)
     - Secondary 2 (yellow)         #FFDA00  (max 10%)
     - Gradient stops: #A1E2B7 -> #00C6C1 -> #0095D6 -> #0228A0

     Typography: Noto Sans (general media), JetBrains Mono for code.
     Proxima Nova is the Adobe/design counterpart; not used on web. */
  :root {
    /* brand */
    --navy: #001C77;
    --navy-deep: #000F4D;
    --teal: #00C6C1;
    --teal-soft: #BFF1EF;
    /* UX2: the brand teal is a fill and accent colour (2.1:1 on white). Text
       set in teal, such as the section numbers, uses this darker step of the
       same hue: 5.18:1 on --paper, 4.79:1 on --bg. */
    --teal-text: #007A78;
    --green: #A1E2B7;
    --blue-mid: #0095D6;
    --blue-deep: #0228A0;

    /* surfaces */
    --paper: #FFFFFF;
    --bg: #F4F6FA;
    --field-bg: #FAFBFD;
    --field-bg-focus: #FFFFFF;

    /* ink */
    --ink: #0E1428;
    --ink-2: #455168;
    /* UX2: #8590A6 was 3.2:1 on white; #667085 is 4.97:1 on --paper and
       4.60:1 on --bg, the same blue-grey hue, so 10 to 12.5 px muted text
       passes WCAG AA. tests/test_toolkit_contrast.py holds the ratio. */
    --ink-3: #667085;
    --line: #E1E5EE;
    --line-2: #CDD3E0;

    /* status: uses Axia secondary colors */
    --ok: #0E9F6E;
    --ok-bg: #E6F8F0;
    --warn: #F75C03;
    --warn-bg: #FFF1E6;
    /* UX5: the warn colour for TEXT. --warn is a fill and border colour
       (3.24:1 on white); text in the warn family wears this darker orange,
       5.57:1 on --paper, 5.04:1 on --warn-bg and 5.15:1 on --bg. The same
       rule as --teal-text. --ok-text is the green for text on --ok-bg
       (6.45:1 on --paper, 5.85:1 on --ok-bg), where --ok measures 3.39:1;
       --err already passes (5.67:1 on --paper, 4.97:1 on --err-bg). */
    --warn-text: #B54300;
    --ok-text: #0B6B57;
    --err: #CE092F;
    --err-bg: #FDECEF;

    /* provenance accents */
    --csv: #001C77;
    --aurora: #6d28d9;
    --ahj: #0E9F6E;
    --heuristic: #F75C03;
    --engineer: #0095D6;
    --unresolved: #CE092F;
    /* UX11: the provenance colours for TEXT on their own 12 % tint, as
       --warn-text and --ok-text are. --ahj and --engineer measure 2.95:1
       and 2.91:1 there; these measure 5.62:1 and 5.30:1. The fills keep
       the accents. */
    --ahj-text: #0B6B57;
    --engineer-text: #00689A;

    /* legacy aliases */
    --accent: var(--navy);
    --accent-soft: var(--teal-soft);
    --panel: var(--paper);

    --radius: 8px;
    --radius-lg: 14px;
    --shadow-1: 0 1px 2px rgba(0, 28, 119, .04), 0 2px 4px rgba(0, 28, 119, .04);
    --shadow-2: 0 8px 24px rgba(0, 28, 119, .08), 0 2px 4px rgba(0, 28, 119, .04);
  }

  * { box-sizing: border-box; }
  html, body {
    margin: 0; padding: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: 'Noto Sans', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 14px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  a { color: var(--navy); text-decoration: none; }
  a:hover { text-decoration: underline; }
  /* UX11: a link inside a sentence is underlined, so it is not told apart
     by colour alone (axe link-in-text-block). Running text is a p, an li,
     a .lede or a .muted inside <main>. Zero specificity beyond the `a`
     itself, so a link a page styles by class (a button, a tab, a tile,
     the sub-navigation, the back link) keeps its own look. */
  :where(main) :where(p, li, .lede, .muted) a:where(:not(.button, .back-link, .subnav a, nav a, [role="tab"])) {
    text-decoration: underline;
    text-underline-offset: 2px;
  }

  /* === Topbar === */
  header.topbar {
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    position: sticky; top: 0; z-index: 50;
    box-shadow: 0 1px 0 rgba(0, 28, 119, .03);
  }
  .topbar-inner {
    max-width: 1400px; margin: 0 auto;
    padding: 14px 28px;
    display: flex; align-items: center; gap: 24px;
  }
  .brand { display: flex; align-items: center; gap: 14px; min-width: 0; }
  .brand img { height: 40px; width: auto; display: block; }
  .brand-divider { width: 1px; height: 28px; background: var(--line); }
  .brand-tag {
    font-weight: 600; color: var(--navy);
    font-size: 14px; letter-spacing: .005em;
    line-height: 1.2; white-space: nowrap;
  }
  .brand-tag .sub {
    display: block; font-weight: 500; color: var(--ink-3);
    font-size: 11px; letter-spacing: .06em;
    text-transform: uppercase; margin-top: 2px;
  }
  /* === The Menu dropdown (R22) ===

     A <details>/<summary> pair and NO JAVASCRIPT. <summary> is focusable and
     toggles on both Enter and Space without a line of script, and the menu
     keeps working if a script fails to load. A CSS :focus-within menu would
     have closed the moment focus moved into the page.

     MEASURED IN CHROMIUM, not assumed -- the numbers are in the R22 report:
     the summary takes focus, Enter and Space each toggle it BOTH ways, Tab
     from the open summary lands on the first link in the panel, and opening
     it moves <main> down by 406px rather than covering it.

     ESCAPE DOES NOT CLOSE IT, and that is written down because the first
     draft of this comment claimed it did. A plain <details> has no Escape
     behaviour -- that belongs to <dialog> and to popover -- so it is closed
     by pressing Enter or Space again on the still-focused summary, by
     clicking it, or by choosing a link, which navigates and reloads the page
     with the element back at its default closed state. Adding Escape would
     mean adding JavaScript for it.

     THE PANEL DOES NOT OVERLAP THE PAGE. It is a flex child of the bar with
     `flex-basis: 100%`, so opening it WRAPS it onto a second row of the
     header and pushes <main> down, rather than floating over the content the
     reader was looking at. `display: contents` on the <details> is what lets
     its two children take part in the bar's flex layout; the disclosure
     behaviour is untouched by it, which was verified in a real browser
     (screenshots in the R22 report) rather than assumed. */
  /* THE MENU IS ITS OWN ROW, under the brand row. Both rows live in the
     sticky header.

     WHY A SECOND ROW RATHER THAN A FLOATING PANEL. The panel has to open
     WITHOUT covering the page, and the only way a block does that is by being
     in normal flow -- so it needs a full-width parent, and <details> has to be
     that parent because the panel must stay inside it for the browser's own
     disclosure behaviour to show and hide it. Putting <details> in the brand
     row and letting it claim a full row when open works, but the Menu button
     then jumps out from under the cursor as the row reflows; both states were
     built and photographed before this one was chosen.

     The alternative was `:has()` with the panel as a sibling of the bar. It
     looks identical and needs no second row, but it moves the show/hide from
     the browser's <details> implementation, which every browser has, to a
     selector Firefox only shipped in December 2023 -- and when `:has()` is
     missing the menu is not degraded, it is GONE. A slightly taller header is
     the cheaper failure. */
  /* A BLOCK, not a flex row: <details> has to be full width so the panel
     inside it is too, and a flex row would size it to its button. The page
     name therefore stays up in the brand row rather than sitting beside the
     button here. */
  .topbar-menu {
    max-width: 1400px; margin: 0 auto;
    padding: 0 28px 12px;
  }
  .navmenu-toggle {
    list-style: none;
    cursor: pointer;
    padding: 7px 14px;
    border-radius: 6px;
    border: 1px solid var(--line-2);
    background: var(--paper);
    color: var(--ink-2);
    font-weight: 600; font-size: 13.5px;
    display: inline-flex; align-items: center; gap: 8px;
    transition: background .12s ease, color .12s ease,
                border-color .12s ease;
  }
  /* Safari draws its own triangle through a pseudo-element that the standard
     `list-style: none` above does not reach. */
  .navmenu-toggle::-webkit-details-marker { display: none; }
  .navmenu-toggle:hover {
    background: var(--bg); color: var(--navy); border-color: var(--navy);
  }
  /* The focus ring is the whole keyboard story, so it is stated rather than
     left to a UA default that `list-style: none` can suppress. */
  .navmenu-toggle:focus-visible {
    outline: 2px solid var(--navy); outline-offset: 2px;
  }
  .navmenu[open] > .navmenu-toggle {
    background: var(--navy); color: var(--paper); border-color: var(--navy);
  }
  /* The caret, drawn in CSS so there is no image and no icon font. */
  .navmenu-toggle .caret {
    display: inline-block; width: 0; height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid currentColor;
  }
  .navmenu[open] > .navmenu-toggle .caret {
    border-top: none; border-bottom: 5px solid currentColor;
  }
  .navmenu-panel {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 2px 10px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--line);
  }
  .navmenu-panel a {
    padding: 8px 12px; border-radius: 6px;
    color: var(--ink-2); font-weight: 500; font-size: 13.5px;
    transition: background .12s ease, color .12s ease;
  }
  .navmenu-panel a:hover {
    background: var(--bg); color: var(--navy); text-decoration: none;
  }
  .navmenu-panel a[aria-current="page"] {
    background: var(--teal-soft); color: var(--navy); font-weight: 600;
  }
  /* The current feature's name, as plain text beside the Menu. Not a link:
     it is where you already are, and a link to the current page is a control
     that does nothing. */
  .topbar-page {
    font-size: 13.5px; font-weight: 600; color: var(--navy);
    white-space: nowrap;
  }
  .topbar-spacer { flex: 1; }
  .topbar-meta {
    font-size: 12px; color: var(--ink-3);
    letter-spacing: .04em; text-transform: uppercase;
  }

  /* === Portal tiles (R22) ===
     Same chrome as every other card in the app -- panel border, radius and
     shadow from the same variables -- so the landing page reads as part of
     the tool rather than as a different product. */
  .portal-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 14px;
  }
  .portal-tile {
    display: flex; flex-direction: column; gap: 6px;
    padding: 16px 18px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--paper);
    box-shadow: var(--shadow-1);
    transition: border-color .12s ease, box-shadow .12s ease,
                transform .12s ease;
  }
  .portal-tile:hover {
    border-color: var(--navy);
    box-shadow: var(--shadow-2);
    text-decoration: none;
    transform: translateY(-1px);
  }
  .portal-tile:focus-visible {
    outline: 2px solid var(--navy); outline-offset: 2px;
  }
  .portal-tile .pt-name {
    font-size: 15px; font-weight: 700; color: var(--navy);
    letter-spacing: -.005em;
  }
  .portal-tile .pt-desc {
    font-size: 12.5px; color: var(--ink-2); line-height: 1.45;
  }

  /* === Page layout === */
  main { max-width: 1400px; margin: 0 auto; padding: 28px; }

  /* === Panels === */
  .panel {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 20px;
    margin-bottom: 16px;
    box-shadow: var(--shadow-1);
  }

  /* === Typography === */
  h1 {
    font-size: 30px; font-weight: 700;
    margin: 0 0 6px 0; letter-spacing: -.015em;
    color: var(--navy);
  }
  /* Subdued context paragraph below an h1 (project address line, page
     description). Reads as supporting prose, not a heading. */
  .lede {
    margin: 0;
    color: var(--ink-2);
    font-size: 15px;
    line-height: 1.5;
    max-width: 720px;
  }
  h2 {
    font-size: 13px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--ink-2);
    margin: 0 0 14px 0; padding-bottom: 10px;
    border-bottom: 1px solid var(--line);
  }
  h3 {
    font-size: 13px; font-weight: 600;
    margin: 16px 0 6px 0; color: var(--ink-2);
  }
  .muted { color: var(--ink-3); font-size: 12.5px; }

  /* === Numbered section pattern ===
     Used inside .panel for major form sections. The number is in
     JetBrains Mono teal, tiny but distinctive. The title is the
     real heading: navy, 16px, weight 700. Together they read as
     "02 Equipment & Topology" without taking visual weight from
     the form fields below. */
  .section-head {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin: 0 0 18px 0;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--line);
  }
  .section-num {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: var(--teal-text);
    font-weight: 500;
    letter-spacing: .08em;
  }
  .section-title {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: var(--navy);
    letter-spacing: -.005em;
    text-transform: none;  /* override global h2 uppercase */
    border: none;          /* override global h2 underline */
    padding: 0;
  }
  .section-hint {
    font-size: 12.5px;
    color: var(--ink-3);
    margin: -10px 0 14px 0;
    max-width: 560px;
    line-height: 1.45;
  }

  /* === Tables === */
  table { width: 100%; border-collapse: collapse; font-size: 13px; }
  th, td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--line); }
  th {
    font-weight: 600; color: var(--ink-2);
    font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.05em;
    background: var(--bg);
  }
  tr:hover td { background: var(--field-bg); }
  td.num { text-align: right; font-variant-numeric: tabular-nums; }
  /* center: for tables where numeric values look better centered under
     their headers (e.g. Aurora roof-face tables, DXF inspection).
     Apply to BOTH th and td so the column is visually aligned. */
  th.center, td.center { text-align: center; font-variant-numeric: tabular-nums; }

  /* === Sticky column (UX2) ===
     A column that stays put while a bounded table (.table-scroll, in
     base.html) scrolls sideways. On a th or td: the first column by
     default, the last with .sticky-col.last. Opaque, so the scrolled cells
     pass under it. The page rounds apply it to the partner console's email
     column (H-15) and the permissions roles table (H-14). */
  .table-scroll .sticky-col {
    position: sticky; left: 0; z-index: 1;
    background: var(--paper);
    box-shadow: inset -1px 0 0 var(--line);
  }
  .table-scroll .sticky-col.last {
    left: auto; right: 0;
    box-shadow: inset 1px 0 0 var(--line);
  }
  .table-scroll thead th.sticky-col { z-index: 3; background: var(--bg); }

  /* === Badges (provenance) === */
  .badge {
    display: inline-block;
    font-size: 10px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.05em;
    padding: 2px 7px; border-radius: 999px;
    background: var(--line); color: var(--ink-2);
  }
  /* Salesforce brand blue (#00A1E0), as a light tint with dark ink -- white
     on the full-saturation blue fails contrast at 10px/700 badge size.
     .18 rather than the .12 the other tinted badges use, and that is
     deliberate: --engineer is #0095D6, essentially the same hue, and at .12
     the two pills were 3/255 apart and read as the same badge. Since this PR
     exists precisely to make "Salesforce" and "engineer" different things,
     leaving them indistinguishable would have defeated it. At .18 the pills
     are ~20 apart and the ink contrast is 6.27:1 (engineer's own is 2.91:1),
     without restyling a badge designers already know. */
  .badge-csv         { background: rgba(0, 161, 224, .18); color: #075A7C; }
  /* NOT a provenance badge. The panel schedule uses this to mean "this
     number came from the project record", which has nothing to do with
     Salesforce -- it had been borrowing .badge-csv, so recolouring that
     class for Salesforce would have recoloured it too. Keeps the navy
     tint .badge-csv used to have. */
  .badge-from-project { background: rgba(0, 28, 119, .10); color: var(--navy); }
  .badge-aurora      { background: #ede9fe; color: var(--aurora); }
  .badge-ahj_default { background: rgba(14, 159, 110, .12); color: var(--ahj-text); }
  .badge-heuristic   { background: var(--warn-bg); color: var(--warn-text); }
  .badge-engineer    { background: rgba(0, 149, 214, .12); color: var(--engineer-text); }
  .badge-ai_suggested { background: #f3e8ff; color: #7c3aed; }
  /* R92: the Parcel & meter fill. Amber and teal, so neither reads as the
     blue ENGINEER pill or the light blue Salesforce one. */
  .badge-utility_bill  { background: #fef3c7; color: #92400e; }
  .badge-county_record { background: #ccfbf1; color: #115e59; }
  .badge-unresolved  { background: var(--err-bg); color: var(--err); }
  /* THE SAME WORD, TWO SEVERITIES. `unresolved` means "no value yet" on every
     field; only the handful the ATTIN gate actually refuses on are red. The
     rest are blank-but-harmless and get the neutral pill, so red keeps meaning
     "this is what is stopping the export". Which fields are which is decided
     in _field_head.html from prepopulate.export_blocking_field_names(); this
     is only the colour.

     ADDITIVE. .badge-unresolved above is untouched -- the projects list, the
     getting-started legend and the admin pages all use it, and recolouring it
     here would have quietly restyled every one of them. Same geometry as the
     other badges (they all inherit .badge), grey on grey rather than a third
     hue, because a new colour would need its own legend entry to mean
     anything. */
  .badge-unresolved-soft { background: var(--line); color: var(--ink-2); }

  /* === Buttons === */
  /* UX2: ONE HEIGHT. UX1 measured the two house buttons at 36, 38 and
     40 px. Two causes: the primary had no border while the secondary has a
     1 px one (36 against 38), and an <a> inherits the body's line-height of
     1.5 where a <button> gets the UA's "normal" (38 against 40). An explicit
     line-height and a transparent 1 px border on every variant make a
     <button>, an <a> and a button inside a form measure 38 px. The padding
     and the type size did not change. */
  .button {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 9px 16px;
    background: var(--navy);
    color: var(--paper);
    border-radius: 6px;
    border: 1px solid transparent;
    font-size: 13.5px; font-weight: 600; line-height: 1.35;
    cursor: pointer; font-family: inherit;
    transition: background .12s ease, transform .12s ease;
  }
  .button:hover { background: var(--navy-deep); }
  .button:active { transform: translateY(1px); }
  .button.secondary {
    background: var(--paper);
    color: var(--navy);
    border: 1px solid var(--line-2);
  }
  .button.secondary:hover {
    background: var(--field-bg);
    border-color: var(--navy);
  }
  /* UX2: the destructive variant. The secondary's metrics in the warn
     colour: white fill, --warn-text text (UX5; --warn is 3.24:1 on white)
     and a --warn border, --warn-bg on hover. There is no filled danger
     style. The page rounds apply it to Reset, Delete, Remove and Hide. */
  .button.danger {
    background: var(--paper);
    color: var(--warn-text);
    border: 1px solid var(--warn);
  }
  .button.danger:hover {
    background: var(--warn-bg);
    border-color: var(--warn);
  }

  /* UX4: the small button, for a control that sits in a table row or beside
     running text (a row's Remove, the survey photo buttons, the roof bid's
     row buttons). The variants above apply unchanged; only the metrics
     shrink, so one class replaces the inline padding each page carried. */
  .button.small { padding: 4px 10px; font-size: 12.5px; }

  /* UX4: the two-step confirmation in plain HTML, as _export_control.html
     draws it. The summary is the button; the body opens under it, names
     what is lost and holds the real control; closing the details is the
     cancel. No script is needed for it to work. */
  .confirm { display: inline-block; position: relative; }
  .confirm > summary { list-style: none; cursor: pointer; }
  .confirm > summary::-webkit-details-marker { display: none; }
  .confirm-body {
    position: absolute; right: 0; top: 100%; margin-top: 4px; z-index: 31;
    width: 320px; max-width: 80vw;
    background: var(--panel, #fff); color: var(--ink);
    border: 1px solid var(--line); border-radius: 8px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .18);
    padding: 10px 12px; font-size: 12.5px; font-weight: 400;
    line-height: 1.45; text-align: left; text-transform: none;
  }
  .confirm.left .confirm-body { right: auto; left: 0; }
  .confirm-body p { margin: 0 0 8px; }
  .confirm-actions { display: flex; gap: 8px; align-items: center; margin: 0; }

  /* UX4: the back link, first in a page's header panel: a text link, not a
     button (the navigation rule on the conventions page). */
  .back-link { display: inline-block; font-size: 13px; color: var(--ink-2); margin-bottom: 8px; }
  .back-link:hover { color: var(--navy); }
  .button:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

  /* === Flash === */
  .flash {
    padding: 12px 16px;
    border-radius: var(--radius);
    margin-bottom: 16px;
    font-size: 13px;
    border: 1px solid transparent;
  }
  .flash.ok    { background: var(--ok-bg);  color: var(--ok-text);  border-color: rgba(14, 159, 110, .25); }
  .flash.error { background: var(--err-bg); color: var(--err); border-color: rgba(206, 9, 47, .20); }

  /* UX11: the one required-field marker. An asterisk after the label's
     text, `<span class="req" aria-hidden="true">*</span>` (the input's own
     `required` attribute is what a screen reader hears), and one line
     `<p class="req-note">` reading "* required" on each form that uses it. */
  .req { color: var(--err); font-weight: 700; margin-left: 2px; }
  .req-note { margin: 0 0 8px; font-size: 12px; color: var(--ink-3); }

  /* === Fields ===
     The labelled input, select and textarea of every form. SV4 moved
     these rules here from base.html's Form section without an edit, so
     the Site Survey Booker, which does not extend base.html, reads the
     same ones. The needs-review and is-blocking states stay there. */
  .field {
    display: flex; flex-direction: column;
    gap: 5px; margin-bottom: 14px;
    position: relative;
  }
  .field label {
    font-size: 12.5px; font-weight: 600;
    color: var(--ink-2);
    display: flex; align-items: center; gap: 8px;
  }
  .field input:not([type="checkbox"]):not([type="radio"]), .field select {
    padding: 10px 12px;
    border: 1px solid var(--line-2);
    border-radius: 6px;
    font-size: 14px;
    background: var(--field-bg);
    color: var(--ink);
    font-family: inherit;
    transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
  }
  .field input:not([type="checkbox"]):not([type="radio"]):hover, .field select:hover {
    border-color: var(--ink-3);
    background: var(--field-bg-focus);
  }
  .field input:not([type="checkbox"]):not([type="radio"]):focus, .field select:focus {
    outline: none;
    border-color: var(--navy);
    background: var(--field-bg-focus);
    box-shadow: 0 0 0 3px rgba(0, 28, 119, .12);
  }
  .field input::placeholder { color: var(--ink-3); }
  /* Custom select chevron: the browser default arrow looks dated.
     Replaced with a clean SVG chevron in --ink-3. */
  .field select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='none' stroke='%238590A6' stroke-width='1.6' stroke-linecap='round' d='M1 1.5l5 5 5-5'/></svg>");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 34px;
  }
  .field .note { font-size: 11.5px; color: var(--ink-3); }

  /* Textareas share the field input look (used by the Change Order form). */
  .field textarea {
    padding: 10px 12px;
    border: 1px solid var(--line-2);
    border-radius: 6px;
    font-size: 14px;
    background: var(--field-bg);
    color: var(--ink);
    font-family: inherit;
    width: 100%;
    resize: vertical;
    transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
  }
  .field textarea:hover { border-color: var(--ink-3); background: var(--field-bg-focus); }
  .field textarea:focus {
    outline: none; border-color: var(--navy);
    background: var(--field-bg-focus); box-shadow: 0 0 0 3px rgba(0, 28, 119, .12);
  }
  .field textarea::placeholder { color: var(--ink-3); }

  /* UX2: A BASE STYLE FOR PLAIN CONTROLS. UX1 counted 2,005 inputs, selects
     and textareas outside .field at the browser default: 13.33 px type and
     a 2 px grey border, beside .field controls that wear the house look.
     One rule, in the toolkit shell's <main> only (the Partner Tools and
     Process Guides shells keep their own), with ZERO SPECIFICITY from
     :where(), so any page rule, however small, still wins: .wf-in,
     .ps-label and the rest keep their sizes. The padding is compact so a
     dense table input keeps its height; the larger rules of the labelled
     field above stay as they are. Checkbox, radio, file, hidden and range
     are left alone. */
  body:not(.partner-tools):not(.guides) > main
    :where(input:not([type="checkbox"], [type="radio"], [type="file"],
                     [type="hidden"], [type="range"], [type="submit"],
                     [type="button"], [type="reset"]),
           select, textarea):where(:not(.field *)) {
    font: inherit;
    font-size: 13px;
    color: var(--ink);
    background: var(--paper);
    border: 1px solid var(--line-2);
    border-radius: 5px;
    padding: 4px 8px;
  }
  body:not(.partner-tools):not(.guides) > main
    :where(input, select, textarea):where(:not(.field *)):focus-visible {
    outline: none;
    border-color: var(--navy);
    box-shadow: 0 0 0 3px rgba(0, 28, 119, .12);
  }

  /* === Metric card === */
  .metric {
    display: inline-flex; flex-direction: column; gap: 2px;
    padding: 10px 16px;
    background: var(--bg);
    border-radius: 6px;
    margin: 4px 6px 4px 0;
    min-width: 100px;
  }
  .metric .label {
    font-size: 10px;
    text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--ink-3); font-weight: 600;
  }
  .metric .value {
    font-size: 17px; font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--navy);
  }

  /* === Code === */
  code {
    background: var(--bg);
    padding: 1px 5px; border-radius: 3px;
    font-size: 12px;
    font-family: 'JetBrains Mono', ui-monospace, "Cascadia Mono", monospace;
    color: var(--navy);
  }
  pre {
    background: var(--bg);
    padding: 12px; border-radius: 6px;
    font-size: 12px; overflow: auto;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    border: 1px solid var(--line);
  }