/* Apex's own looks (3.0, rebuild plan Phase 1): the Jobs screen and the quote's Build tab. Every one built from
   tokens.css; the shared pieces (glass, seg, chip, status, table.t, select-wrap, qe, src, flags) come from components.css.
   Every class here starts with ax- so nothing on another screen can pick it up. */

.ax { display: grid; gap: var(--gap); min-width: 0; }
.ax-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ax-views { justify-self: start; }
.ax-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
.ax-note { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; padding: 12px 16px; }
.ax-nowrap { white-space: nowrap; }
.ax-pre { white-space: pre-wrap; }

/* ---- the filter bar: search first and widest, then the pickers, all one height */
.ax-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 14px; }
.ax-filters .input { flex: 1 1 240px; max-width: 360px; }
.ax-filters .select-wrap { flex: 0 1 176px; min-width: 0; }
.ax-filters .select-wrap .select { width: 100%; }
.ax-filters .view-ctl { margin-left: auto; }
.ax-hist-hint { flex: 1 1 auto; }
.ax-hist-sort { display: none; }   /* the headings sort on a wide screen; a phone's card list has none, so it gets this picker */

/* ---- the list: a glass card whose table shows the glass through */
.ax-card { overflow: hidden; }
.ax-card table.t:not(.stack) th:first-child, .ax-card table.t:not(.stack) td:first-child { padding-left: 16px; }   /* not a phone card: the kit insets its rows (bare .glass rule) */
.ax-card table.t:not(.stack) th:last-child, .ax-card table.t:not(.stack) td:last-child { padding-right: 16px; }
.ax-sort button { all: unset; display: inline-flex; align-items: center; vertical-align: middle; gap: 6px; cursor: pointer; color: inherit; font: inherit; }
.ax-sort button:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 4px; }
.ax-sort.r button { flex-direction: row-reverse; }
.ax-sort.on { color: var(--ink); }
.ax-sort-i { display: inline-flex; flex-direction: column; font-size: 7px; line-height: 8px; color: var(--faint); }
/* the Estimator and BDM columns: as narrow as their faces (w10retire: was styles.css th.col-faces) */
th.ax-col-faces { width: 1%; }
th.ax-col-grow { width: 30%; }   /* the job's name takes the slack (was styles.css th.col-grow) */
/* the jobs list's who · stage line: only on a phone, where the columns it repeats are cards (was styles.css #jobsTable .jr-phone) */
.ax-jr-phone { display: none; }
@media (max-width: 700px) { .ax-jr-phone { display: block; margin-top: 4px; } }
/* the job page's number beside its name, a pill (was styles.css .job-no) */
.ax-jobno { white-space: nowrap; font-size: 14px; font-weight: 650; color: var(--accent-ink); background: color-mix(in srgb, var(--accent) 12%, var(--surface));
  border-radius: 8px; padding: 3px 10px; vertical-align: 3px; letter-spacing: .02em; }
.ax-sort-i i { font-style: normal; }
.ax-sort-i i.off { opacity: .25; }
.ax-tgcol { width: 64px; }
.ax-tg { all: unset; box-sizing: border-box; display: inline-flex; align-items: center; gap: 4px; height: 30px; padding: 0 8px; border-radius: 8px;
  border: 1px solid var(--hair-2); background: var(--glass-b); color: var(--ink-2); font-size: 12px; font-weight: var(--fw-bold); cursor: pointer; }
.ax-tg:hover { background: var(--glass-hi); }
.ax-tg:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.ax-tg .ax-caret { width: 12px; height: 12px; transition: transform var(--t-std); }
.ax-tg.open .ax-caret { transform: rotate(90deg); }
.ax-quotes > td { background: var(--well); padding-top: 6px; padding-bottom: 12px; }
.ax-q { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; padding: 7px 0; border-bottom: 1px solid var(--hair); }
.ax-q .chip { margin-left: 4px; }
.ax-newq { margin-top: 10px; }

/* ---- a tick box's statement fills the row beside the box. A class, not style="flex:1 1 0": styles.css hides any
   .row > span[style*="flex:1"] on a phone as a spacer, and took the badging label with it (design review 10/22) */
.cbrow > .cb-text { flex: 1 1 0; min-width: 0; }

/* ---- Requests: the field link above the list it feeds */
.ax-link { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; padding: 14px 16px; }
.ax-link .hint { margin: 2px 0 0; }

/* ---- the quote's bid schedule: each line's Master Items price beside the one on the bid */
.ax-book { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; margin-top: 4px; font-size: 11.5px; }
.ax-book .was { color: var(--muted); text-decoration: line-through; }
.ax-book .off { color: var(--ink-2); font-weight: var(--fw-bold); }
.ax-book .off.bad { color: var(--bad); }   /* below the book by more than the variance: the one that asks for approval */
.ax-book .src { margin: 0; }
.ax-book .btn.sm { height: 24px; padding: 0 8px; font-size: 11.5px; }
.ax-ql td.ax-part { padding-left: 28px; }   /* a bundle's part, set in under its bundle */

/* search + seven pickers: two even rows of four, the saved-view link under them — at every width, not only a touch
   one: on a desk the free-flowing bar ran 5 then 3 (design review 10/22) */
.ax-filters:has(#jobSearch) { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ax-filters:has(#jobSearch) .input { max-width: none; }
.ax-filters:has(#jobSearch) .view-ctl { grid-column: 1 / -1; justify-self: end; }
@media (max-width: 1180px), (pointer: coarse) {   /* a finger's 44 for the sort headers, the quote toggles and the saved-view link (design review 10/22) */
  .ax-sort button { min-height: var(--tap); }
  .ax-tg { min-height: var(--tap); min-width: var(--tap); justify-content: center; }
  .ax-filters .view-ctl a { min-height: var(--tap); display: inline-flex; align-items: center; }
}
/* phone-tables.js turns the lists into cards below 700px and shows a heading row only when it holds a control: the sort
   buttons would read as one, so the row stays hidden as it did in 2.x */
@media (max-width: 700px) {
  .ax-card .table-wrap > table.stack tr.stack-head.has-ctl { display: none; }
  .ax-hist-sort { display: block; flex: 1 1 100%; }
  .ax-hist-hint { display: none; }
}
.ax-narrow { display: none; }   /* the phone's shorter word, beside .ax-wide (Apex › Jobs: "History" for "Quote History") */
@media (max-width: 360px) { .ax-actions .seg button { padding: 0 8px; font-size: 12px; } }   /* a contract's jobs: Abiertos · Completados · Todos whole at 320 (w25es) */
@media (max-width: 640px) {
  .ax-wide { display: none; }
  .ax-narrow { display: inline; }
  .ax-filters:has(#jobSearch) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ax-filters:has(#jobSearch) .input { grid-column: 1 / -1; }
  .ax-filters:has(#jobSearch) .view-ctl { grid-column: auto; justify-self: center; }   /* beside the seventh picker, not under it */
  .ax-filters .input { flex: 1 1 100%; max-width: none; }
  .ax-filters .select-wrap { flex: 1 1 calc(50% - 4px); }
  .ax-filters .view-ctl { margin-left: 0; }
  .ax-actions { width: 100%; }
  .ax-actions > .btn { flex: 1 1 0; justify-content: center; min-width: max-content; max-width: 100%; }   /* share the row, but never narrower than the words: a long one wraps to its own row */
  .ax-views { justify-self: stretch; display: grid; grid-template-columns: repeat(var(--views, 4), minmax(min-content, 1fr)); }   /* never narrower than its words: "Solicitudes 2" ran 11px into Historial at 320 (w25es design review) */
  .ax-views button { padding: 0 4px; min-width: 0; }
}

/* ---- the job page's header: type and status chips, then the branch and who opened it */
.ax-jobmeta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 6px; }

/* ---- the quote's header (3.0): the job's name, the number, the status, who owns it, where it has got to, why it asks,
   then the tabs. Every tab of the quote shares it (scope.js quoteChrome). */
.ax-qhead { gap: 14px; }
.ax-qhead > .page-head { align-items: flex-start; }
.ax-qmain { display: grid; gap: 6px; min-width: 0; flex: 1 1 420px; }
.ax-qtitle { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
.ax-qtitle h1.title { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.ax-qtitle h1.title a { color: inherit; }
.ax-qtitle .select-wrap, .ax-qtitle .chip { flex: none; }   /* a chip never narrower than its words ("No Credit", "Standard" spilled 8px past the pill at 820/375 — K9) */
.ax-qtitle .chip .i { width: 13px; height: 13px; }
a.chip:hover { text-decoration: none; filter: brightness(.97); }
.ax-qmeta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px; font-size: 13px; color: var(--ink-2); }
.ax-qmeta > span { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; min-width: 0; }
.ax-qmeta .src { margin: 0; }
.ax-qcust b { color: var(--ink); }
.ax-who { color: inherit; } .ax-who:hover { text-decoration: none; } .ax-who:hover .who > span:last-child { text-decoration: underline; }
.ax-qside { display: grid; justify-items: end; gap: 10px; flex: 0 1 auto; min-width: 0; margin-left: auto; }   /* wrapped under the title, it keeps to the right edge */
.ax-qtotal { display: grid; justify-items: end; }
.ax-qacts { justify-content: flex-end; }
.ax-qacts .chip { height: var(--ctl); padding: 0 12px; }
/* the branch filter in the quote's head (w11design K1). The subtotal held the head's top right corner, so frame.js found no
   room and the island sat alone in a band above the title. With the island in that corner (frame.js adds .tn-has-top while
   it measures) the subtotal steps down beside the buttons, one line at the head's foot, and the head grows ~11px, not 55. */
.ax-qhead > .page-head.tn-has-top > .ax-qside { grid-auto-flow: column; align-items: end; align-self: flex-end; }
.ax-n { font-style: normal; font-weight: var(--fw-semi); opacity: .75; }
.ax-qsteps { padding: 2px 0; }
/* on a phone the four steps stay ONE row (dot over its word) instead of the kit's four stacked lines, which pushed the quote's
   tabs below the first screen (w30a, 185–190); the sub-line of every step but the current one is dropped, the step list is not the place to read it */
@media (max-width: 640px) {
  .ax-qsteps { grid-auto-flow: column; row-gap: 0; }
  .ax-qsteps > li { grid-template-rows: 26px auto; grid-template-columns: none; row-gap: 6px; column-gap: 0; padding-right: 6px; align-items: start; }
  .ax-qsteps > li::before { top: 12px; bottom: auto; left: 34px; right: 4px; width: auto; height: 2px; }
  .ax-qsteps > li:last-child::before { display: none; }
  .ax-qsteps .stepper-txt { flex-direction: column; flex-wrap: nowrap; gap: 1px; }
  .ax-qsteps .stepper-txt b { font-size: 12px; }
  .ax-qsteps > li:not([aria-current]) .stepper-txt .hint { display: none; }
  .ax-qsteps > li[aria-current] .stepper-txt .hint { font-size: 11px; }
}
/* why it asks, while the bid waits on an approval */
.ax-why { display: grid; gap: 10px; padding: 14px 16px; border-left: 3px solid var(--warn); }
.ax-why-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 10px 16px; }
.ax-why-head .hint { margin: 2px 0 0; }
.ax-why-note { margin: 6px 0 0; font-size: 13px; color: var(--ink-2); }
.ax-notready li { background: var(--warn-bg); }
/* accepted by the customer */
.ax-signed { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 12px 16px; border-left: 3px solid var(--ok); }
.ax-signed-tick { width: 30px; height: 30px; border-radius: 50%; background: var(--ok-bg); color: var(--ok); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.ax-signed-txt { display: grid; flex: 1 1 240px; min-width: 0; }
/* Revisions */
.ax-revs { padding: 14px 16px; display: grid; gap: 10px; }
.ax-revs h2 { margin: 0; font-size: var(--fs-l); }
.ax-revs .ax-row .hint { margin: 0; }
.ax-rev-list { list-style: none; margin: 0; padding: 0; display: grid; }
.ax-rev { padding: 10px 0; border-top: 1px solid var(--hair); }
.ax-rev:first-child { border-top: 0; padding-top: 0; }
.ax-rev-changes { margin: 6px 0 0; padding-left: 18px; font-size: 13px; color: var(--ink-2); }
.ax-revs > .btn { justify-self: start; }
@media (max-width: 1180px), (pointer: coarse) {
  .ax-qmeta .qe-btn { position: relative; }
}
/* a finger at any width (w22touch, 10/27): a link in a head's line of facts that is not a record's name ("Q-0027" on a
   contract) had no reach of its own — 46×20 — and gets a door's 44 */
@media (pointer: coarse) {
  .ax-qmeta a:not(.src, .btn, .chip, .qe-btn, [data-i18n-skip]) { position: relative; }
  .ax-qmeta a:not(.src, .btn, .chip, .qe-btn, [data-i18n-skip])::after { content: ""; position: absolute; inset: calc(50% - var(--tap) / 2) min(-4px, calc(50% - var(--tap) / 2)); }
  /* a quote's "Jobs" crumb sat 14px over the title's reach (37 tall): the title row steps 12px down (8 at first; on a phone a
     title on two lines reaches only 4px above itself, and a PFS's "Jobs" reached 42, w23touch) */
  .ax-qmain > .crumb { margin-bottom: 12px; }
}
@media (max-width: 760px) {
  .ax-qside { justify-items: stretch; width: 100%; }
  .ax-qtotal { justify-items: start; grid-auto-flow: column; justify-content: space-between; align-items: baseline; }
  .ax-qacts { justify-content: stretch; }
}
@media (max-width: 640px) {
  .ax-qacts { flex-wrap: wrap; }   /* the next step's button takes the row; the rest share the one under it, ⋯ at its end */
  .ax-qacts > .btn, .ax-qacts > .chip { flex: 1 1 100%; justify-content: center; min-width: 0; white-space: normal; text-align: center; line-height: 1.2; }
  .ax-qacts > :is(.btn, .chip):has(+ .anchor) { flex-basis: 0; }   /* the last one shares its row with ⋯ */
  .ax-qacts > .anchor { flex: none; }
  .ax-qacts > .anchor > .btn.icon { width: var(--tap); }
  .ax-qmeta { gap: 4px 12px; }
  .ax-why-head .ax-actions { width: 100%; }
  .ax-why-head .ax-actions > .btn { flex: 1 1 0; justify-content: center; }
}
/* a finger at any width (w23touch, 10/27): a head's line of facts wraps on a phone, and its doors stood 4px apart — the
   customer over "None — set it on the customer" (a PFS), "Tri Dal" over the owner's button (a contract), an MSA's customer
   over its owner. Wrapped lines stand a fingertip apart, centre to centre; on one line (a computer's width) nothing moves.
   A head's text button ("nobody yet — pick one") is a line of words like the rest, its 44 its reach (.ax-linkbtn::after),
   so a contract's lines sit as far apart as a PFS's (design review: 57 apart beside 47) */
@media (pointer: coarse) { .ax-qmeta { row-gap: calc(var(--tap) - 19px); } .ax-qmeta .ax-linkbtn { min-height: 0; } }
/* the Build tab's Approval card: the whole chain, its colour on the edge */
.ax-appr { display: grid; gap: 8px; align-content: start; border-left: 3px solid var(--hair-2); }
.ax-appr.ok { border-left-color: var(--ok); } .ax-appr.warn { border-left-color: var(--warn); } .ax-appr.bad { border-left-color: var(--bad); }
.ax-appr > .hint, .ax-appr p { margin: 0; }
.ax-appr > .src { justify-self: start; margin: 0; }
.ax-end { justify-content: flex-end; }
.ax-ap-why { display: grid; gap: 8px; }
.ax-ap-why.ax-ap-top { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--hair-2); }   /* under the approval chain, a rule above the reasons (was styles.css .ap-why) */
.ax-apsteps { list-style: none; margin: 0; padding: 0; display: grid; }
.ax-apstep { display: grid; grid-template-columns: 74px minmax(0, 1fr) auto; align-items: center; gap: 4px 10px; padding: 7px 0; border-top: 1px solid var(--hair); }
.ax-apstep .chip { justify-self: start; }
.ax-apstep-who { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; }
.ax-apstep-note { grid-column: 2 / -1; }
.ax-appr .ap-covered { margin: 0; }
.ax-aprounds { display: grid; gap: 6px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--hair-2); }   /* earlier rounds of approval (w51a): the same step rows, one block per round */
.ax-around { display: grid; gap: 2px; }
.ax-around > .hint { margin: 0; }
.ax-appr .q-lock-bar { margin: 0; }
@media (max-width: 640px) {
  .ax-apstep { grid-template-columns: 74px minmax(0, 1fr); }
  .ax-apstep > .hint:not(.ax-apstep-note) { grid-column: 2; }
}
/* the PFS (w46b, 2026-11-02): the five steps and the Summary, the quick PFS on Build, the earlier-PFS read-only page. Looks only from
   the kit's tokens and components; the step rail itself is the kit's .step-rail. */
.pfs { display: grid; gap: var(--gap); min-width: 0; }
.pfs > *, .pfs-body > * { min-width: 0; }
.pfs-body { display: grid; gap: var(--gap); }
.pfs h2 { margin: 0; font-size: var(--fs-l); }
.pfs-head { align-items: flex-start; }
.pfs-titles { display: grid; gap: 6px; min-width: 0; }
.pfs-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.pfs-std { margin: 0; }
.pfs-std .chip, .pfs-std .btn { margin-inline: 4px; }
.pfs-saved { margin: 0; }
.pfs-rail { padding: 0; }
.pfs-start { display: grid; gap: 16px; padding: 20px 22px; }
.pfs-start-copy { display: grid; gap: 8px; max-width: 72ch; }
.pfs-start h2, .pfs-start .hint { margin: 0; }
.pfs-carry { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.pfs-carry li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; align-items: start; }
.pfs-carry .i { width: 16px; height: 16px; margin-top: 2px; color: var(--ok); }
.pfs-seed { display: grid; gap: 8px; padding: 14px 18px; border-color: var(--info-line); }
.pfs-seed-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pfs-seed h3 { margin: 0; font-size: 15px; display: flex; align-items: center; gap: 8px; }
.pfs-seed .hint, .pfs-seed .flags { margin: 0; }
.pfs-card { display: grid; gap: 12px; padding: var(--pad); min-width: 0; align-content: start; }
.pfs > :empty { display: none; }
.pfs-card > h3, .pfs-card > .ax-row > h3 { margin: 0; font-size: 15px; font-weight: var(--fw-bold); }
.pfs-card .hint { margin: 0; }
.pfs-card .ax-row { gap: 8px 12px; }
.pfs-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); align-items: stretch; }
@media (max-width: 1100px) { .pfs-grid { grid-template-columns: minmax(0, 1fr); } }
.pfs-stack { display: grid; gap: var(--gap); align-content: start; min-width: 0; }
.pfs-src { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.pfs-src li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; padding: 9px 0; border-bottom: 1px solid var(--hair); }
.pfs-src li:last-child { border-bottom: 0; padding-bottom: 0; }
.pfs-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; align-content: start; }
.pfs-fields > .wide { grid-column: 1 / -1; }
/* (w60a) three across: a service line's days for Year 1, 2 and 3 — never two and an orphan */
.pfs-fields.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pfs-fields.three > .wide { grid-column: 1 / -1; }
.pfs-adj td { background: var(--surface-2, transparent); }
.pfs-modepick { max-width: 640px; }
@media (max-width: 560px) { .pfs-fields, .pfs-fields.three { grid-template-columns: minmax(0, 1fr); } }
.pfs-derived-v { margin: 0; }
.pfs-lock { display: flex; align-items: center; gap: 8px; margin: 0; }
.pfs-lock .i { width: 16px; height: 16px; flex: none; }
.pfs-flags { margin: 0; }
/* an open check: the flag, what is wrong (bold) and what to do (under it), and, on the Summary, the button that goes there. A phone puts the
   button under the words, lined up with them, so the words keep the row (they had 147 of 317px beside it). */
.pfs-flags > li { grid-template-columns: 18px minmax(0, 1fr) auto; align-items: center; }
.pfs-flag-t { display: grid; gap: 2px; min-width: 0; }
.pfs-flag-s { color: var(--muted); font-size: 12.5px; line-height: 1.4; }
@media (max-width: 700px) {
  .pfs-flags > li { grid-template-columns: 18px minmax(0, 1fr); align-items: start; }
  .pfs-flags > li > .btn { grid-column: 2; justify-self: start; }
}
.pfs-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; }
.pfs-bar { margin: 0; }
.pfs-unit { display: inline-flex; align-items: center; gap: 6px; }
.pfs-unit .hint { margin: 0; min-width: 4ch; }   /* "%", "hrs" and "days" take one width, so every "This job" box starts and ends in the same place */
.pfs-ass .pfs-unit .input { width: 11ch; }
.pfs-refill { align-items: center; }
/* the row tables: boxes sized to what goes in them, one height in every row */
.pfs-t .input, .pfs-t .select { height: 34px; }
.pfs-t td { vertical-align: middle; }
.pfs-t td .input.n { width: 100%; min-width: 7ch; max-width: 12ch; text-align: right; }
.pfs-t td > .input:not(.n) { width: 100%; min-width: 12ch; }
.pfs-t td .select-wrap { width: 100%; }
.pfs-t td .select { min-width: 9ch; }
.pfs-t td .hint { margin: 2px 0 0; }
.pfs-cat .pfs-unit .input { width: 9ch; }
.pfs-eq .pfs-unit .input, .pfs-cat .pfs-unit .input { max-width: none; }
.pfs-t tr.pfs-total td { border-top: 1px solid var(--hair-2); background: var(--well); font-weight: var(--fw-semi); }
.pfs-t tr.pfs-sub td { color: var(--muted); font-size: 12.5px; }
.pfs-t tr.pfs-band td { padding: 8px 12px 4px; font-size: 11px; font-weight: var(--fw-bold); letter-spacing: .04em; text-transform: uppercase; color: var(--faint); border-bottom: 0; background: transparent; }
.pfs-chk { white-space: nowrap; }
.pfs-card .ax-actions > .btn.btn, .pfs-nav > .btn.btn { flex-shrink: 0; min-width: max-content; }   /* a step's buttons keep the width of their words: the kit's .btn.sm:has(> svg:only-child) 44px floor counts an icon plus words as an icon alone, and had them 111px for 122 of words (doubled class: it outweighs that) */
.pfs-nav { flex-wrap: wrap; }
@media (max-width: 480px) { .pfs-nav > .btn { flex: 1 1 auto; } }
/* a tablet: the cells give back their padding and the derived columns step aside so the Cost, the check and the remove button stay on the card */
@media (max-width: 1180px) {
  .pfs-t th, .pfs-t td { padding-left: 6px; padding-right: 6px; }
  .pfs-t .pfs-md { display: none; }
  table.t.pfs-t th { white-space: normal; vertical-align: bottom; line-height: 1.2; }
  .chip.sm.pfs-chk { white-space: normal; height: auto; padding-block: 3px; line-height: 1.2; text-align: left; }   /* .chip.sm's 18px would beat a bare .pfs-chk */
}
@media (max-width: 640px) { .pfs-pnl .pfs-lg { display: none; } }
.pfs-pnl td:first-child { min-width: 14ch; }
.pfs-ok { display: inline-flex; color: var(--ok); }
.pfs-ok .i { width: 16px; height: 16px; }
.pfs-vs.over { color: var(--warn); font-weight: var(--fw-semi); }
.pfs-vs.under, .pfs-vs.good { color: var(--ok); }
.pfs-vs.low { color: var(--warn); font-weight: var(--fw-semi); }
/* the Summary */
.pfs-open { border-color: var(--warn-line); }
.pfs-clear { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--ok); font-weight: var(--fw-semi); }
.pfs-clear .i { width: 16px; height: 16px; }
.pfs-headline .value { font-size: var(--fs-num); }
.pfs-headline .value.bad { color: var(--bad); }
.pfs-thresholds { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 980px) { .pfs-thresholds { grid-template-columns: minmax(0, 1fr); } }
.pfs-thr { height: auto; min-height: 0; white-space: normal; display: flex; align-items: flex-start; justify-content: flex-start; gap: 8px; padding: 10px 12px; border-radius: var(--r-m); text-align: left; line-height: 1.35; }
.pfs-thr > span:nth-child(2) { flex: 1 1 auto; min-width: 0; }
.pfs-thr .src { flex: none; }
.pfs-banner { margin: 0; padding: 10px 12px; border-radius: var(--r-m); border: 1px solid var(--hair); background: var(--well); }
.pfs-banner.ok { border-color: var(--ok-line); background: var(--ok-bg); color: var(--ok); }
.pfs-banner.warn { border-color: var(--warn-line); background: var(--warn-bg); color: var(--warn); }
.pfs-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 20px; margin: 0; }
.pfs-facts > div { min-width: 0; display: grid; gap: 2px; align-content: start; }
.pfs-facts dt { font-size: 11.5px; font-weight: var(--fw-semi); color: var(--muted); }
.pfs-facts dd { margin: 0; font-weight: var(--fw-semi); overflow-wrap: anywhere; }
@media (max-width: 760px) { .pfs-facts { grid-template-columns: minmax(0, 1fr); } }
.pfs-notes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }   /* four notes: 2 x 2, then 1 (never 3 + 1) */
@media (max-width: 640px) { .pfs-notes { grid-template-columns: minmax(0, 1fr); } }
/* Type of work (w50b): chips on the Summary's first line, in the peek, and beside the picker */
.pfs-wtline { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.pfs-wtline .label { font-size: 12px; font-weight: var(--fw-semi); color: var(--ink-2); }
.pfs-wt-chips { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.pfs-wt .ax-chipset { margin: 2px 0; }
.pfs-notes .textarea { field-sizing: content; min-height: 112px; resize: none; }   /* w51a: grows with its note at every width, no inner scroll (a phone cut a long note off at four rows) */
.pfs-approve-acts { justify-content: flex-end; }
.pfs-approve-acts > .pfs-del { margin-right: auto; }   /* Delete PFS keeps to the far side, away from Approve */
@media (max-width: 700px) {
  .pfs-approve-acts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pfs-approve-acts > .pfs-del { margin-right: 0; }
  .pfs-approve-acts > .btn:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
/* a phone's total row (the kit's stack-sum: the label, the figure) has no empty cell left over to read as a dash */
@media (max-width: 700px) { table.pfs-edit tr.stack-sum > td:empty { display: none; } }
/* the assumptions fold (Project): a heading you can press, how many differ from the standard beside it */
.pfs-ass-fold > summary { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; cursor: pointer; list-style: none; }
.pfs-ass-fold > summary::-webkit-details-marker { display: none; }
.pfs-ass-fold > summary h3 { margin: 0; }
.pfs-ass-fold > summary .hint { margin: 0; }
.pfs-ass-fold > summary::after { content: ''; margin-left: auto; width: 8px; height: 8px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg) translateY(-2px); transition: transform var(--t-quick); }
.pfs-ass-fold[open] > summary::after { transform: rotate(-135deg); }
.pfs-ass-fold[open] > summary { margin-bottom: 12px; }
.pfs-ass-body { display: grid; gap: 12px; }
.pfs-ass-body .hint { margin: 0; }
@media (min-width: 701px) { .pfs-ass-fold > summary { cursor: default; } .pfs-ass-fold > summary::after { display: none; } }
.pfs-peek-words { display: grid; gap: 12px; }
.pfs-peek-cm { display: grid; gap: 2px; }
.pfs-peek-cm p { margin: 0; white-space: pre-wrap; }
/* an earlier PFS: read-only, frozen */
.pfs-earlier { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 12px; padding: 16px 18px; border-color: var(--warn-line); }
.pfs-earlier h3 { margin: 0 0 4px; font-size: 15px; }
.pfs-earlier .hint { margin: 0 0 8px; }
.pfs-earlier > :first-child { color: var(--warn); }
/* the quick PFS on Build */
.pfs-quick-head { gap: 8px 12px; }
.pfs-quick-slot { display: grid; gap: 12px; }
.pfs-quick-empty { margin: 0; padding: 14px 4px; }
.pfs-quick-note { margin: 0; }
/* who a submitted PFS asks and why (3.0 pfs-notify) */
.ax-pfs-ask { display: grid; gap: 8px; padding: 10px 12px; border: 1px solid var(--hair); border-radius: var(--r-m); background: var(--well); }
.ax-pfs-ask p { margin: 0; }
.ax-pfs-ask h4 { margin: 0; font-size: 13px; font-weight: var(--fw-bold); }
.ax-pfs-ask .flags { margin: 0; }
table.t tr.ax-total td { border-top: 1px solid var(--hair-2); }
table.t tr.ax-total.strong td { border-top: 2px solid var(--ink); }
table.t td.ax-indent { padding-left: 24px; }
.ax-margin.ok { color: var(--ok); } .ax-margin.warn { color: var(--warn); } .ax-margin.bad { color: var(--bad); }

/* ---- the job page's body (3.0): the four figures, the details beside the people and papers, the quotes, then what
   was learned about the competition. Sections are glass panels with one heading style. */
.ax-sec { display: grid; gap: 12px; padding: 14px 16px; min-width: 0; align-content: start; }
.ax-sec h2 { margin: 0; font-size: var(--fs-l); display: inline-flex; align-items: center; gap: 8px; }
.ax-sec h2 .hint { font-weight: var(--fw-med); }
.ax-sec > .hint, .ax-sec p { margin: 0; }
.ax-h3 { margin: 4px 0 0; font-size: 13.5px; font-weight: var(--fw-bold); }
/* The two columns always end level (Jordan, 11/3: "they should both always be equal on both sides"): each column is a flex
   stack whose LAST card takes whatever height is left, so the shorter column's last card grows to the row's bottom edge and
   no gap floats under it. What goes in each column is balanced on purpose (the bid folder and bid site links sit in
   Documents, the estimators in Customers), so the stretch is a few pixels, not a hole. */
.ax-jobgrid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--gap); align-items: stretch; }
.ax-jobside, .ax-jobmain { display: flex; flex-direction: column; gap: var(--gap); min-width: 0; }
.ax-jobside > :last-child, .ax-jobmain > :last-child { flex: 1 1 auto; }
.ax-details .field { min-width: 0; }
/* an empty list in the card that takes up the difference sits in the middle of what is left, not under a hole */
.ax-sec:has(> .ax-fillhint) { grid-template-rows: auto minmax(0, 1fr); }
.ax-fillhint { align-self: center; justify-self: center; text-align: center; max-width: 52ch; }
.ax-jnotes { grid-template-rows: auto minmax(0, 1fr); }   /* the heading, then the box takes every pixel that is left */
.ax-jnotes .field { display: flex; flex-direction: column; min-height: 0; }
.ax-jnotes .textarea { flex: 1 1 auto; min-height: 84px; }
.ax-details .hint { min-height: 1.4em; }   /* every field keeps its hint line, so no row has a short column */
.ax .input.bad, .ax .select.bad, .ax .drf-in.bad-input { border-color: var(--bad); }
.ax .hint.bad, .ax-due.bad { color: var(--bad); }
.ax-pickbtn { justify-content: flex-start; width: 100%; overflow: hidden; }
.ax-linkbtn { all: unset; color: var(--accent-ink); font-weight: var(--fw-semi); cursor: pointer; }
.ax-linkbtn:hover { text-decoration: underline; }
.ax-linkbtn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 4px; }
.ax-budgetary, .ax-award { display: grid; gap: 10px; padding: 12px 14px; border-radius: var(--r-l); background: var(--well); border-left: 3px solid var(--warn); }
.ax-award .award-head { margin: 0; }
.ax-strip-in { border-radius: var(--r-m); box-shadow: inset 0 0 0 1px var(--hair); }
/* customers on the job */
.ax-custs, .ax-docs, .ax-visits, .ax-signed-list, .ax-dupe-list { list-style: none; margin: 0; padding: 0; display: grid; }
.ax-cust { display: grid; gap: 6px; padding: 10px 0; border-top: 1px solid var(--hair); }
.ax-cust:first-child { border-top: 0; padding-top: 0; }
.ax-cust-name { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
.ax-cust-name b { color: var(--ink); }
.ax-kv { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 6px 10px; margin: 0; font-size: 13px; }
.ax-kv dt { color: var(--muted); font-size: 12px; font-weight: var(--fw-semi); padding-top: 2px; }
.ax-kv dd { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-width: 0; }
.ax-kv .src { margin: 0; }
.ax-kv .btn.sm { height: 26px; padding: 0 8px; }
.ax-kv-foot { padding-top: 10px; border-top: 1px solid var(--hair); }
.ax-contact { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; min-width: 0; overflow-wrap: anywhere; }
/* a finger at any width (w22touch, 10/27): a job's customer — its name, then BDM, Contact and Visits — sat 25 to 36px apart,
   so each door's 44px reach met the next one's (the name reached 26, a contact's e-mail under its phone 37): on touch the
   name's row is a fingertip tall and each line of words gets 12px above and below (a line with a button is already 44),
   its label level with the first line */
@media (pointer: coarse) {
  .ax-cust > .ax-row { min-height: var(--tap); }
  .ax-cust > .ax-kv > dd:not(:has(> .btn)) { padding-block: 12px; }
  .ax-cust > .ax-kv > dt { padding-top: 14px; }
}
/* documents */
.ax-docs li { display: grid; grid-template-columns: 18px 110px minmax(0, 1fr); align-items: center; gap: 8px; padding: 7px 0; border-top: 1px solid var(--hair); font-size: 13px; }
.ax-docs li:first-child { border-top: 0; padding-top: 0; }
.ax-docs li > :is(span, label) { color: var(--muted); font-weight: var(--fw-semi); font-size: 12px; }
/* the two links you type into (the bid folder, the bid site) sit in the list as rows: the box, then Open once there is a link */
.ax-docs li.ax-doc-in { align-items: start; }
.ax-docs li.ax-doc-in > :is(.i, label) { margin-top: 9px; }
.ax-doc-field { display: grid; gap: 4px; min-width: 0; }
.ax-doc-row { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ax-doc-row .input { flex: 1 1 auto; min-width: 0; }
.ax-doc-row .btn { flex: none; }
.ax-doc-field .hint { margin: 0; }
.ax-docs a, .ax-docs .ax-linkbtn { justify-self: start; display: inline-flex; align-items: center; gap: 4px; }
.ax-docs .i, .ax-docs a .i { width: 14px; height: 14px; }
.ax-signed-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px 12px; padding: 8px 0; border-top: 1px solid var(--hair); }   /* the View button keeps one column, however long the line */
.ax-signed-list li .hint { overflow-wrap: anywhere; }
.ax-docs-all { justify-self: start; }   /* the job page's "Show all N documents" sits under the list, its own width */
/* visits on the job */
.ax-visits li { display: grid; gap: 4px; padding: 9px 0; border-top: 1px solid var(--hair); }
.ax-visits li:first-child { border-top: 0; padding-top: 0; }
.ax-visits .ax-row > span:first-child { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ax-clamp { margin: 0; font-size: 13px; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
/* the quotes table */
.ax-quotes { padding: 0; gap: 0; }
.ax-pad { padding: 14px 16px 6px; }
.ax-chipbtn { border: 0; cursor: pointer; font: inherit; font-size: 11.5px; font-weight: var(--fw-semi); }
.ax-quotes table.t .chip .i, .ax-quotes table.t a.open .i { width: 12px; height: 12px; }
.ax-quotes table.t a.open { display: inline-flex; align-items: center; gap: 4px; }
/* duplicates, bidders, competitors */
.ax-dupes { border-left: 3px solid var(--warn); }
.ax-dupes h2 .i { color: var(--warn); }
.ax-dupe-list li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; padding: 8px 0; border-top: 1px solid var(--hair); }
.ax-dupe-why { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ax-block { display: block; }
.ax-bidin { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.ax-paste { display: flex; gap: 8px; align-items: flex-start; }
.ax-paste .textarea { flex: 1 1 auto; min-height: 44px; }
.ax-paste > .btn { flex-shrink: 0; }   /* the textarea gives way, never the button's words (Read list lost 2px at 1440) */
.ax-bidbase { min-width: 260px; }
.ax-w30 { width: 30px; } .ax-w80 { width: 80px; }
.ax-delta.bad { color: var(--bad); } .ax-delta.ok { color: var(--ok); }
@media (max-width: 1180px) {
  /* One grid of the four sections (the two column wrappers step aside): the details across the width, the customers beside
     the visits at one height (review 10/22), the documents under the pair. Above 1180 the visits sit in the main column. */
  .ax-jobgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "details details" "notes notes" "people visits" "docs docs"; align-items: stretch; }
  .ax-jobmain, .ax-jobside { display: contents; }
  .ax-jobgrid .ax-details { grid-area: details; }
  .ax-jobgrid .ax-jnotes { grid-area: notes; }
  .ax-jobgrid .ax-jpeople { grid-area: people; }
  .ax-jobgrid .ax-jvisits { grid-area: visits; }
  .ax-jobgrid .ax-jdocs { grid-area: docs; }
}
@media (max-width: 1180px), (pointer: coarse) {
  .ax-docs li > a { min-height: var(--tap); display: inline-flex; align-items: center; }
  .ax-linkbtn { min-height: var(--tap); display: inline-flex; align-items: center; }
  .ax-kv .btn.sm { height: var(--tap); }
}
@media (max-width: 760px) {
  .ax-jobgrid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "details" "notes" "people" "visits" "docs"; }
}
@media (max-width: 640px) {
  .ax-docs li { grid-template-columns: 18px minmax(0, 1fr); }
  .ax-docs li > a, .ax-docs li > .ax-linkbtn, .ax-docs li > .ax-doc-field { grid-column: 2; }
  .ax-docs li.ax-doc-in > label { margin-top: 0; }
  .ax-paste { flex-direction: column; align-items: stretch; }
  .ax-bidbase { min-width: 0; width: 100%; }
}
.ax-details .field > .select-wrap:has(> .status) { align-self: flex-start; max-width: 100%; }   /* the pill keeps its own width; the arrow stays inside it */
@media (min-width: 641px) and (max-width: 980px) {   /* mid-width: the details keep their rows (the kit stacks grid-2/3 here) */
  .ax-details .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ax-details .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {   /* the job's header buttons wrap instead of squeezing five into a row: New quote takes the first */
  .ax-jobhead .ax-actions { flex-wrap: wrap; }
  .ax-jobhead .ax-actions > .btn { flex: 1 1 40%; min-width: 0; }
  .ax-jobhead .ax-actions > .btn.primary { flex-basis: 100%; }
  .ax-jobhead .ax-actions > .anchor { flex: none; }
  .ax-jobhead .ax-actions > .anchor > .btn.icon { width: var(--tap); }
}
/* ‹ n of N › through the list the job was opened from */
.ax-jobnav { display: inline-flex; align-items: center; gap: 6px; margin-right: 4px; }
.ax-jobnav [aria-disabled="true"] { opacity: .4; pointer-events: none; }
@media (max-width: 640px) { .ax-jobhead .ax-actions > .ax-jobnav { flex-basis: 100%; justify-content: center; margin: 0; } }

/* ================================================================ pop-ups (3.0): kit fields inside the shared modal()
   Every Apex sheet rebuilt after the quote (My Desk, Bid Calendar, Territory, Customers, Contracts & MSAs) uses these. */
.ax-modal { gap: 12px; }
.ax-modal h2 { margin: 0; font-size: var(--fs-xl); }
.ax-modal > .hint, .ax-modal > p { margin: 0; }
.ax-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; }
.ax-form.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ax-form .wide { grid-column: 1 / -1; }
.ax-form .field .hint { margin: 0; }
.ax-modalacts { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; }
.ax-modalacts > .btn.ghost:first-child, .ax-modalacts > .ax-left { margin-right: auto; }
.ax-hits { display: grid; max-height: 260px; overflow-y: auto; margin-top: 6px; border: 1px solid var(--hair); border-radius: var(--r-m); background: var(--glass-a); }
.ax-hits > .hint { margin: 0; padding: 9px 12px; }
.ax-hit { all: unset; box-sizing: border-box; display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 9px 12px; cursor: pointer; border-top: 1px solid var(--hair); font-size: 13px; }
.ax-hit:first-child { border-top: 0; }
.ax-hit:hover, .ax-hit:focus-visible { background: var(--well); }
.ax-hn-chosen { margin-top: 8px; }
.ax-bad { color: var(--bad); }
@media (max-width: 640px) { .ax-form, .ax-form.three { grid-template-columns: minmax(0, 1fr); } }

/* ================================================================ My Desk (3.0, apex-desk.js): Desk, Open Quotes, Sales, Hunt */
.ax-dk-view { display: inline-flex; align-items: center; gap: 8px; }
.ax-dk-view > label { font-size: 12px; font-weight: var(--fw-semi); color: var(--muted); }
.ax-dk-view .select { min-width: 190px; }
.ax-sr-range { justify-content: flex-start; }   /* the picked-dates Awarded section (3.0.3): From and To sit together on the left */
.ax-sr-range .input { width: auto; }
.ax-sr-range .hint.bad:empty { display: none; }
@media screen and (max-width: 700px) { .ax-sr-rgtable > .table-wrap:has(> table.stack) { padding-inline: 14px; } }   /* the kit's bare-panel inset (components.css:772) needs a direct child; the range table sits one div deeper */
.ax-dk-h2 { margin: 6px 0 -6px; font-size: var(--fs-l); }   /* 22 above, 10 below inside the 16px stack */
.ax > .field { margin-bottom: 0; }   /* a box between blocks: the stack's gap is the rhythm (the form foot made it 26, and 32 to a heading — K4) */
.ax > p.hint { margin: 0; }          /* a summary line between blocks keeps the 16px rhythm, as Momentum's do (it was 22.5 / 28.5) */
.ax-dk > div:empty { display: none; }   /* a slot not filled yet (the sales report's #srGapRow) leaves no second gap: 38 above "Touches" */
.ax-dk-h2 .hint { font-weight: var(--fw-med); }
.ax-dk-grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--gap); align-items: start; }
.ax-dk-main, .ax-dk-side { display: grid; gap: var(--gap); min-width: 0; align-content: start; }
.ax-fu-all { justify-self: start; }
.ax-dk-fus, .ax-dk-list, .ax-hunt-list { list-style: none; margin: 0; padding: 0; display: grid; }
.ax-dk-fu { display: grid; gap: 6px; padding: 12px 0; border-top: 1px solid var(--hair); }
.ax-dk-fu:first-child { border-top: 0; padding-top: 0; }
.ax-dk-fu p { margin: 0; }
.ax-dk-fu-when { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.ax-dk-rank { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--well); font-size: 11.5px; }
.ax-dk-fu-what { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; font-size: 13px; }
.ax-dk-crm { padding: 12px 14px; border-radius: var(--r-l); background: var(--well); }
.ax-dk-crm-in { display: grid; gap: 8px; }
.ax-dk-crm-in p { margin: 0; font-size: 13px; }
.ax-dk-crm-in .ax-h3 { margin-top: 4px; }
.ax-dk-contacts { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 13px; }
.ax-dk-contacts li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.ax-dk-list > li { display: grid; gap: 4px; padding: 10px 0; border-top: 1px solid var(--hair); }
.ax-dk-list > li:first-child { border-top: 0; padding-top: 0; }
.ax-dk-list p { margin: 0; }
.ax-dk-list .src { margin: 0; }
.ax-dk-list .ax-actions { margin-top: 2px; }
.ax-dk-li-name { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
.ax-dk-flag { display: grid; gap: 2px; padding: 10px 12px; border-radius: var(--r-m); background: var(--bad-bg); border-left: 3px solid var(--bad); }
.ax-dk-pv td { vertical-align: top; }
.ax-dk-note { gap: 6px; }
.ax-dk-note .textarea { field-sizing: content; min-height: 76px; max-height: 520px; }   /* grows with what is in it, no script */
#srSaved.bad { color: var(--bad); font-weight: var(--fw-semi); }
.ax-dk-chart { gap: 6px; }
.ax-dk-chart .ax-strip-in { margin-top: 6px; }
table.t.ax-dk-mini td.r { white-space: nowrap; }   /* a dollar figure never breaks across lines (w50a) */
.ax-dk-srcitem { margin-right: 12px; }   /* the sources in a chart's hint run on as words, a space apart (w50a) */
.ax-dk-recnote { display: block; }   /* the plain-words note under a line of the awarded-dollars table (w50a) */
table.t.ax-dk-mini th, table.t.ax-dk-mini td { padding: 6px 8px; }
.ax-dk-scroll { max-height: 340px; overflow: auto; }
.ax-dk-goals .input { width: 130px; height: 32px; }
.ax-dk-goals .input.ax-w80 { width: 90px; }
.ax-dk-goals tr.ax-now td { font-weight: var(--fw-bold); }
.ax-dk-switch { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: var(--fw-semi); }
.ax-dk-ai { border-left: 3px solid var(--info); }
.ax-dk-ai h2 { display: inline-flex; align-items: center; gap: 8px; }
.ax-sr .strip .pipe { margin: 6px 0 2px; }
/* the hunt: the list, and the Trophy Room's door above it (the door's art is the lodge layer, th-door — further down this sheet) */
.ax-hunt { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap); align-items: start; }   /* one column at every width, the door first: a banner across the card above the hunts (IGNITE-BUGS #46, 2.x 1.21.2; a 320px side column again in 3.0 — W15B-M1) */
.ax-hunt-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 8px 14px; padding: 12px 0; border-top: 1px solid var(--hair); }
.ax-hunt-row:first-child { border-top: 0; padding-top: 0; }
.ax-hunt-main { display: grid; gap: 4px; flex: 1 1 320px; min-width: 0; }
.ax-hunt-main .ax-row { justify-content: flex-start; }
.ax-hunt-note { margin: 2px 0 0; font-size: 13px; color: var(--ink-2); }
.ax-hunt-side { display: grid; gap: 10px; order: -1; }
.ax-hunt-side .hint { margin: 0; }
.ax-hunt .th-door { margin: 0; border-radius: var(--r-xl); overflow: hidden; }
.ax-hunt .th-door-mounts i { background-image: var(--img); }   /* the mount's picture rides as data: data-vars="--img:url(…)" */
@media (max-width: 1180px) {
  .ax-dk-grid { grid-template-columns: minmax(0, 1fr); }
  .ax-dk-side { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }   /* call cycles beside recent visits */
}
@media (max-width: 760px) {
  .ax-dk-side { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .ax-dk-view { width: 100%; }
  .ax-dk-view .select-wrap { flex: 1 1 auto; }
  .ax-dk-view .select { min-width: 0; width: 100%; }
  .ax-sr-range .ax-dk-view > label { min-width: 36px; }
  .ax-sr-range .input { flex: 1 1 auto; }
  .ax-note > .ax-actions { width: 100%; }
}

/* ================================================================ Bid Calendar (3.0, apex-desk.js) */
.ax-cal-step { display: inline-flex; gap: 6px; }
.ax-cal-filters { display: grid; gap: 8px; padding: 12px 14px; }
.ax-cal-frow { display: grid; grid-template-columns: 76px minmax(0, 1fr); align-items: start; gap: 8px; }
.ax-cal-frow .label { padding-top: 4px; }
.ax-cal-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ax-cal-f { border: 1px solid var(--hair-2); cursor: pointer; height: 26px; font: inherit; font-size: 12px; font-weight: var(--fw-semi); }
.ax-cal-f[aria-pressed="true"] { background: var(--glass-hi); color: var(--ink); }
.ax-cal-f[aria-pressed="true"]::before { content: "✓"; font-weight: var(--fw-bold); color: var(--accent-ink); }
.ax-cal-f[aria-pressed="false"] { background: transparent; color: var(--faint); text-decoration: line-through; }
.ax-cal-month { overflow: hidden; }
.ax-cal-dow, .ax-cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.ax-cal-dow { border-bottom: 1px solid var(--hair); }
.ax-cal-dow span { padding: 8px 10px; font-size: 11.5px; font-weight: var(--fw-semi); color: var(--muted); }
.ax-cal-cell { min-height: 120px; padding: 6px 6px 8px; display: flex; flex-direction: column; gap: 4px; min-width: 0; box-shadow: 1px 0 0 var(--hair), 0 1px 0 var(--hair); }
.ax-cal-cell.out { background: rgba(16, 24, 40, .03); }
.ax-cal-cell.out .ax-cal-dh a { color: var(--faint); }
.ax-cal-cell.today { box-shadow: inset 0 0 0 2px var(--accent); border-radius: 4px; }
.ax-cal-dh { display: flex; justify-content: space-between; align-items: baseline; gap: 4px; padding: 0 2px; min-width: 0; }
.ax-cal-dh a { font-weight: var(--fw-bold); color: var(--ink); font-size: 13px; }
.ax-cal-dh .hint { font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ax-cal-bid { display: grid; padding: 4px 7px; border-radius: 7px; border-left: 3px solid var(--info); background: var(--info-bg); color: var(--ink); min-width: 0; font-size: 11.5px; line-height: 1.3; }
.ax-cal-bid:hover { text-decoration: none; filter: brightness(.97); }
.ax-cal-bid.bad { border-left-color: var(--bad); background: var(--bad-bg); }
.ax-cal-bid.warn { border-left-color: var(--warn); background: var(--warn-bg); }
.ax-cal-bid.done { border-left-color: var(--hair-2); background: var(--well); color: var(--muted); }
.ax-cal-bid b { font-weight: var(--fw-bold); }
.ax-cal-bid small { font-weight: var(--fw-semi); color: var(--muted); }
.ax-cal-n, .ax-cal-m { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ax-cal-m { color: var(--muted); font-size: 11px; }
.ax-cal-more { font-size: 11.5px; padding-left: 4px; }
.ax-cal-agenda, .ax-cal-list { display: grid; gap: var(--gap); }
.ax-cal-agenda { display: none; }
.ax-cal-day h2 { margin: 0; font-size: var(--fs-l); display: inline-flex; align-items: center; gap: 8px; }
.ax-cal-day.today { border-left: 3px solid var(--accent); }
.ax-cal-daybids { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.ax-cal-daybids .ax-cal-bid { font-size: 12.5px; padding: 8px 10px; }
@media (max-width: 1180px), (pointer: coarse) { .ax-cal-f { min-height: var(--tap); } .ax-cal-dh a { min-height: 28px; } }
@media (max-width: 640px) {
  .ax-cal-month { display: none; }
  .ax-cal-agenda { display: grid; }   /* a phone reads the month as the days that have bids */
  .ax-cal-frow { grid-template-columns: minmax(0, 1fr); }
  .ax-cal .page-head .ax-actions { width: 100%; justify-content: space-between; }
}
.ax-sec.ax-card:not(.ax-quotes) { padding: 0 0 6px; gap: 0; }   /* a list panel: its heading row and footer carry .ax-pad, the table runs edge to edge */
.ax-sec.ax-card > .ax-pad + .ax-pad { padding-top: 0; }
.ax-dk-chart .strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* the Sales Report's win/loss figures: each takes three of the strip's rows (subgrid) — its label, its value, its hint — so
   the two figures in a row share those lines however many lines a label takes. A two-line "Tasa de éxito por cantidad
   12 meses" beside a one-line "Mayor victoria" put the two values 8px apart at 1024 and 18px at 320; the kit's 36px
   label slot holds two lines, not three (w26fix; w25es's design review) */
.ax-dk-chart .strip > * { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 6px; align-content: start; }
.ax-dk-chart .strip .top { align-items: flex-start; }   /* a one-line label sits on its neighbour's first line, not in the middle of two */
/* a phone: one across, as every strip (4 → 2 → 1). Two across at 320 left a 97px content box, 3-line labels and "$12,450,000"
   13px into its tile's padding (w26fix's design review); this rule outweighed the kit's ≤560 one, so it says so itself */
@media (max-width: 560px) { .ax-dk-chart .strip { grid-template-columns: minmax(0, 1fr); } }
.ax-dk-view .select-wrap .select { min-width: 150px; }

/* ================================================================ Customers (3.0, apex-customers.js): the book and one customer */
.ax-cu-filters { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ax-cu-filters .input { max-width: none; }   /* the search is one of six even cells: 3 + 3, then 2 + 2 + 2, then 1 */
.ax-cu-filters .select-wrap .select { width: 100%; }
.ax-cu-fend { grid-column: 1 / -1; }
.ax-cu-fend .view-ctl { margin-left: 0; }
.ax-cu-name { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; min-width: 0; }
table.t.ax-cu-t td { vertical-align: top; }
table.t.ax-cu-t .switch { margin-top: 2px; }
@media (min-width: 1181px) and (pointer: fine) { table.t.ax-cu-t .switch { transform: scale(.85); transform-origin: left center; } }   /* smaller in a computer's table only: scaled on touch its 44px reach shrank to 39 */
.ax-cu-head .ax-qtitle .chip { height: 26px; }
.ax-cu-grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--gap); align-items: start; }
.ax-cu-kv { grid-template-columns: 92px minmax(0, 1fr); }
.ax-cu-kv dd > .hint { font-size: 12px; }
/* a company's sites (w17-multisite): one row each — the site, what it carries, its fence — the list the dd's full width;
   on a phone the Sites row takes the card's width under its label rather than squeezing beside it */
@media (max-width: 640px) { .ax-cu-kv dt:has(+ dd .ax-cu-sites), .ax-cu-kv dd:has(> .ax-cu-sites) { grid-column: 1 / -1; } }
.ax-cu-sites { display: grid; flex: 1 1 100%; width: 100%; }
.ax-cu-site { display: grid; gap: 2px; padding: 7px 0; border-top: 1px solid var(--hair); }
.ax-cu-site:first-child { border-top: 0; }
.ax-cu-site .hint { font-size: 12px; }
.ax-cu-flag { padding: 10px 12px; border-radius: var(--r-m); font-size: 13px; border-left: 3px solid var(--bad); background: var(--bad-bg); }
.ax-cu-flag.warn { border-left-color: var(--warn); background: var(--warn-bg); }
.ax-cu-paper:empty { display: none; }
.ax-cu-paper .table-wrap { margin: 0; }
.ax-cu-add { display: grid; gap: 8px; border-top: 1px solid var(--hair); padding-top: 12px; }
.ax-cu-addrow { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)) auto auto; gap: 8px; align-items: center; }
.ax-cu-price { width: 120px; height: 32px; margin-left: auto; }
.ax-cu-search { max-width: 360px; }
.ax-cu-warnnote { border-left: 3px solid var(--warn); }
.ax-cu-refs { margin: 0; padding-left: 18px; font-size: 13px; }
.ax-copy { display: flex; gap: 8px; align-items: center; }
.ax-copy .input { flex: 1 1 auto; min-width: 0; }
.ax-pair { display: flex; gap: 8px; align-items: center; }
.ax-pair .input { width: 110px; flex: none; }
.ax-pair .select-wrap { flex: 0 0 140px; }
.ax-flabel { font-size: 12px; font-weight: var(--fw-semi); color: var(--ink-2); }
.ax-switchrow { display: inline-flex; align-items: center; gap: 10px; min-height: var(--ctl); }
.ax-cbrow { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: var(--fw-semi); min-height: var(--ctl); cursor: pointer; }
.ax-cbrow input { width: 18px; height: 18px; margin: 0; flex: none; }
.ax-chipset { display: flex; flex-wrap: wrap; gap: 6px; }
.ax-tog { border: 1px solid var(--hair-2); cursor: pointer; height: 28px; font: inherit; font-size: 12px; font-weight: var(--fw-semi); }
.ax-tog[aria-pressed="true"] { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
.ax-tog[aria-pressed="false"] { background: transparent; color: var(--ink-2); }
.btn.ax-danger { color: var(--bad); }
.btn.ax-danger:hover { background: var(--bad-bg); }
.ax-modal .hint.wide { grid-column: 1 / -1; }
@media (max-width: 980px) {
  .ax-cu-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 1180px) {
  .ax-cu-addrow { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1180px), (pointer: coarse) {
  .ax-tog, .ax-cbrow { min-height: var(--tap); }
  .ax-cu-price { height: var(--tap); }
}
@media (max-width: 980px) { .ax-cu-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .ax-cu-filters { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) {
  .ax-cu-addrow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ax-cu-addrow > .btn { grid-column: 1 / -1; justify-content: center; }
  .ax-cu-kv { grid-template-columns: 80px minmax(0, 1fr); }
  .ax-copy { flex-wrap: wrap; }
  .ax-copy .input { flex-basis: 100%; }
  .ax-cu-head .ax-actions { width: 100%; }
  .ax-cu-head .ax-actions > .btn { flex: 1 1 0; justify-content: center; min-width: 0; }
  .ax-cu-head .ax-actions > .anchor { flex: none; }
}
.ax-cu-health > :is(.card, .ax-chx) { margin: 0; height: 100%; }   /* w30a (044): the health card is a .ax-chx, so it never took the row's height and stood 120px short of the Account card */
.ax-cu-grid > * { align-self: stretch; }
/* Credit: status, payment health (3.0, B34), limit and the application across the row; the notes under them. 2 + 2 + the
   notes at tablet width, one column on a phone — never a field alone on a row. */
.ax-cu-credit { grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 2fr); }
.ax-cu-credit .field.wide { grid-column: auto; }
.ax-cu-credit .field:last-child { grid-column: 1 / -1; }
@media (max-width: 1180px) { .ax-cu-credit { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .ax-cu-credit { grid-template-columns: minmax(0, 1fr); } }

/* ================================================================ Territory (3.0, territory.js): map left, the panel right;
   stacks to the map over the panel on phones and touch iPads. Leaflet draws the pins; their colours ride as data (--c). */
.ax-terr-tools .input { width: 260px; }
.ax-terr-tools .btn[aria-pressed="true"] { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
.ax-terr-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: var(--gap); align-items: start; }
.ax-terr-mapcol { display: grid; gap: var(--gap); min-width: 0; }
/* isolation keeps Leaflet's panes (z-index up to 1000) inside this box, so they never paint over pop-ups and toasts */
.ax-terr-map { height: calc(100vh - 300px); min-height: 400px; overflow: hidden; padding: 0; z-index: 0; isolation: isolate; }
.ax-terr-map.drawing, .ax-terr-map.drawing .leaflet-container { cursor: crosshair; }
.ax-terr-map .leaflet-container, .leaflet-container { font: inherit; }
.ax-terr-legend { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; padding: 10px 12px; }
.ax-terr-legitems { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ax-terr-leg { all: unset; box-sizing: border-box; display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px 0 8px; border-radius: var(--r-pill);
  font-size: 12px; font-weight: var(--fw-semi); color: var(--ink-2); cursor: pointer; border: 1px solid transparent; }
.ax-terr-leg:hover { background: var(--well); }
.ax-terr-leg:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.ax-terr-leg[aria-pressed="false"] { opacity: .45; text-decoration: line-through; }
.ax-terr-leg b { color: var(--ink); font-weight: var(--fw-bold); }
.ax-terr-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; flex: none; background: var(--c, #8899aa); }
.ax-terr-dot.sq { border-radius: 3px; background: var(--c, #E5484D); }
.ax-terr-pinjob { width: 15px; height: 15px; background: #E5484D; border: 2px solid #fff; border-radius: 3px; box-shadow: 0 1px 3px rgba(0, 0, 0, .35); }
.ax-terr-pinnum { width: 26px; height: 26px; border: 2px solid #fff; border-radius: 50% 50% 50% 6px; transform: rotate(-45deg); background: #2fbf71; color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: var(--fw-x); box-shadow: 0 1px 4px rgba(0, 0, 0, .4); }
.ax-terr-pinnum span { transform: rotate(45deg); }
.ax-terr-pop { display: grid; gap: 4px; font-size: 13px; }
/* the panel: tabs, a head that stays, the body that scrolls, the route's buttons that never scroll away */
.ax-terr-panel { height: calc(100vh - 230px); min-height: 470px;   /* the map plus the legend under it */ display: flex; flex-direction: column; overflow: hidden; padding: 0; }
.ax-terr-tabs { padding: 12px 14px 0; }
.ax-terr-tabs .seg { display: flex; }
.ax-terr-tabs .seg button { flex: 1 1 0; }
.ax-terr-head { display: grid; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--hair); }
.ax-terr-head:empty { display: none; }
.ax-terr-head p, .ax-terr-body p { margin: 0; }
.ax-terr-body { flex: 1 1 auto; overflow-y: auto; display: grid; gap: 12px; align-content: start; padding: 12px 14px 0; }
.ax-terr-rform { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 8px; }
.ax-terr-rform .ax-terr-rname { grid-column: 1 / -1; }
.ax-terr-callout { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; border-radius: var(--r-m); background: var(--info-bg); font-size: 13px; }
.ax-terr-body .field .select-wrap { margin-top: 6px; }
.ax-terr-stops { display: grid; }
.ax-terr-nostops { padding: 14px; border-radius: var(--r-m); background: var(--well); text-align: center; }
.ax-terr-stop { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px; padding: 9px 0; border-bottom: 1px solid var(--hair); }
.ax-terr-stop.locked { background: var(--warn-bg); border-radius: var(--r-s); padding-left: 6px; padding-right: 6px; }
.ax-terr-stop.dragging { opacity: .4; }
.ax-terr-stop.drop-into { box-shadow: inset 0 2px 0 var(--accent); }
.ax-terr-grab { cursor: grab; color: var(--muted); font-size: 15px; line-height: 1; padding-top: 3px; user-select: none; }
.ax-terr-stop.locked .ax-terr-grab { cursor: not-allowed; }
.ax-terr-idx { width: 22px; height: 22px; flex: 0 0 22px; border-radius: 50%; background: #2fbf71; color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 11.5px; font-weight: var(--fw-x); }
.ax-terr-idx.done { background: var(--muted); }
.ax-terr-stopmain { flex: 1 1 150px; min-width: 150px; display: grid; gap: 1px; }
.ax-terr-stopmain b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ax-terr-stopctl { display: flex; align-items: center; gap: 6px; margin-left: auto; flex: 0 0 auto; }
.ax-terr-stopctl .input { width: 108px; height: 32px; padding: 0 6px; font-size: 12px; }
.ax-terr-stopctl .select { height: 32px; font-size: 12px; padding-left: 8px; min-width: 70px; }
.ax-terr-legline { font-size: 11.5px; color: var(--muted); padding: 3px 0 3px 30px; }
.ax-terr-stats { display: grid; gap: 6px; padding: 10px 12px; border-radius: var(--r-m); background: var(--well); }
.ax-terr-stats .hint { display: inline-flex; align-items: center; gap: 5px; }
.ax-terr-bar { height: 8px; border-radius: var(--r-pill); background: #e05260; overflow: hidden; }
.ax-terr-bar > i { display: block; height: 100%; width: var(--pct, 0%); background: #4a8cf5; }
.ax-terr-acts { position: sticky; bottom: 0; z-index: 2; display: flex; flex-wrap: wrap; gap: 6px; margin: 4px -14px 0; padding: 10px 14px 14px;
  background: linear-gradient(180deg, transparent, var(--glass-b) 14px); }
.ax-terr-acts .btn { flex: 1 1 auto; justify-content: center; }
.ax-terr-filters { display: grid; gap: 14px; padding-bottom: 14px; }
.ax-terr-fg { display: grid; gap: 6px; }
.ax-terr-fg .ax-tog { gap: 6px; }
.ax-terr-list { list-style: none; margin: 0; padding: 0; display: grid; }
.ax-terr-list > li { display: grid; gap: 2px; padding: 8px 0; border-top: 1px solid var(--hair); font-size: 13px; }
.ax-terr-list > li:first-child { border-top: 0; padding-top: 0; }
.ax-terr-sel { grid-template-columns: 10px minmax(0, 1fr) auto; align-items: start; gap: 8px; }
.ax-terr-sel > .ax-terr-dot { margin-top: 5px; }
.ax-terr-selmain { all: unset; box-sizing: border-box; display: grid; gap: 1px; cursor: pointer; min-width: 0; }
.ax-terr-selmain:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 4px; }
.ax-terr-selmain b, .ax-terr-selmain .hint { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ax-terr-qrow { grid-template-columns: minmax(0, 1fr) auto; align-items: start; }
.ax-terr-qrow > span:first-child { display: grid; gap: 1px; min-width: 0; }
.ax-terr-qr { display: grid; justify-items: end; gap: 4px; }
.ax-terr-bname { display: grid; gap: 2px; min-width: 0; }
.ax-terr-brief { margin: 0; }
.ax-terr-brief > div { padding: 8px 10px; }
.ax-terr-card { display: grid; gap: 4px; padding: 10px 12px; border-radius: var(--r-m); background: var(--well); font-size: 13px; }
.ax-terr-mu { display: grid; grid-template-columns: 200px minmax(0, 1fr); align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--hair); }
.ax-terr-muctl { opacity: .45; transition: opacity var(--t-quick); }
.ax-terr-muctl.on { opacity: 1; }
@media (max-width: 1180px), (pointer: coarse) {
  .ax-terr-stopctl .input, .ax-terr-stopctl .select, .ax-terr-leg { min-height: var(--tap); }
}
@media (max-width: 1000px) {
  .ax-terr-wrap { grid-template-columns: minmax(0, 1fr); }
  .ax-terr-map { height: 52vh; min-height: 300px; }
  .ax-terr-panel { height: auto; min-height: 0; overflow: visible; scroll-margin-top: 90px; }
  .ax-terr-body { overflow: visible; }
}
@media (max-width: 640px) {
  .ax-terr-tools { width: 100%; }
  .ax-terr-tools .input { width: auto; flex: 1 1 100%; }
  .ax-terr-tools .btn { flex: 1 1 0; justify-content: center; }
  .ax-terr-mu { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .ax-terr-stopctl { margin-left: 30px; }
}
/* the Trophy Room's firelight flicker (scope.js trFireLoop) rides as data: --glow */
.tr-glow { opacity: var(--glow, .6); }

/* ---- wave-4 design review (10/22), the job page and the quote --------------------------------------------------- */
/* the quote's and the job's header links reach 44px on touch without moving anything (Sentry's pattern) */
@media (max-width: 1180px), (pointer: coarse) {
  .ax-qtitle a.chip, .ax-qwho a.ax-who, .ax-qcust a, .ax-qbids .ax-bt-chip { position: relative; }
  .ax-qtitle a.chip::after, .ax-qwho a.ax-who::after, .ax-qcust a::after, .ax-qbids .ax-bt-chip::after { content: ""; position: absolute; inset: -13px -8px; }
}
/* Mobilization: its body starts on the 16px stack like every other tab; "Include in quote" is a real box beside its words */
.ax-mob > h2:first-child { margin-top: 0; }
.ax-mob .co-check { display: inline-flex; align-items: center; gap: 8px; min-height: var(--ctl); margin: 0 0 8px; font-size: 13px; font-weight: var(--fw-semi); cursor: pointer; }
.ax-mob .co-check input { width: 18px; height: 18px; margin: 0; flex: none; }
@media (max-width: 1180px), (pointer: coarse) { .ax-mob .co-check { min-height: var(--tap); } .ax-mob .co-check input { width: 22px; height: 22px; } }

/* ================================================================ Contracts & MSAs (3.0, contracts.js) */
.ax-ct-filter { justify-self: start; }
.ax-ct-filter button em { font-style: normal; margin-left: 5px; opacity: .65; }
tr.ax-ct-expired td { opacity: .55; }
.ax-ct-doc { display: flex; align-items: center; gap: 4px; white-space: nowrap; }
.ax-ct-grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--gap); align-items: start; }
.ax-ct-main, .ax-ct-side { display: grid; gap: var(--gap); min-width: 0; align-content: start; }
.ax-ct-flag { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; padding: 10px 12px; border-radius: var(--r-m); font-size: 13px; border-left: 3px solid var(--warn); background: var(--warn-bg); }
.ax-ct-flag.bad { border-left-color: var(--bad); background: var(--bad-bg); }
.ax-ct-flag > span:not(.ax-actions) { flex: 1 1 100%; }
.ax-ct-note { display: grid; gap: 6px; }
.ax-ct-note label { font-size: 12px; font-weight: var(--fw-semi); color: var(--ink-2); }
.ax-ct-links { display: grid; gap: 6px; }
.ax-ct-linkrow { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) auto; gap: 8px; align-items: center; }
.ax-ct-no { width: 70px; height: 32px; }
.ax-ct-rate { width: 110px; height: 32px; margin-left: auto; }
.ax-ct-rates td .input:not(.ax-ct-no):not(.ax-ct-rate), .ax-ct-mins td .input:not(.ax-ct-rate) { height: 32px; min-width: 160px; }
.ax-ct-rates .select, .ax-ct-mins .select { height: 32px; min-width: 76px; }
@media (max-width: 1180px) {
  .ax-ct-grid { grid-template-columns: minmax(0, 1fr); }
  .ax-ct-side { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; }
}
@media (max-width: 1180px), (pointer: coarse) {
  .ax-ct-rate, .ax-ct-no, .ax-ct-rates .select, .ax-ct-mins .select { height: var(--tap); }
  .ax-ct-rates td .input:not(.ax-ct-no):not(.ax-ct-rate), .ax-ct-mins td .input:not(.ax-ct-rate) { height: var(--tap); }
}
@media (max-width: 760px) { .ax-ct-side { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) {
  .ax-ct-linkrow { grid-template-columns: minmax(0, 1fr) auto; }
  .ax-ct-linkrow > .input:nth-child(2) { grid-column: 1; }
  .ax-ct-filter { justify-self: stretch; }
}
/* a panel's one column never grows past the panel: a wide table inside (a 2.x list, the paperwork log) scrolls in its own wrap */
.ax-sec { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 640px) {
  .ax-sr > .ax-note .ax-actions { flex-wrap: wrap; }
  .ax-sr > .ax-note .ax-actions > .btn { flex: 1 1 auto; justify-content: center; }
  .ax-sr > .ax-note .ax-dk-view { flex: 1 1 100%; }
}

/* ---- Match typed customer names: Apex › Customers › Match typed names (decision mp-noacct, 2026-10-22). One row per
   signed job with only a typed customer name: the job on the left, the suggestion, its score and why, and the three ways
   to settle it on the right. Two columns on a computer, one from 900. */
.ax-cm-list { list-style: none; margin: 0; padding: 0; display: grid; }
.ax-cm-row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 12px 28px; align-items: start; padding: 16px 0; border-top: 1px solid var(--hair); }
.ax-cm-row:first-child { border-top: 0; padding-top: 2px; }
.ax-cm-job { display: grid; gap: 4px; min-width: 0; }
.ax-cm-name { font-weight: var(--fw-bold); color: var(--ink); text-decoration: none; overflow-wrap: anywhere; }
.ax-cm-name:hover { text-decoration: underline; }
.ax-cm-job .hint { margin: 0; }
.ax-cm-typed { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; font-size: 13.5px; overflow-wrap: anywhere; }
.ax-cm-side { display: grid; gap: 10px; min-width: 0; }
.ax-cm-sugg, .ax-cm-also, .ax-cm-picked { display: grid; gap: 4px; min-width: 0; }
.ax-cm-sugg > .hint, .ax-cm-also > .hint, .ax-cm-picked > .hint { margin: 0; font-size: 12px; font-weight: var(--fw-semi); }
.ax-cm-acct { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-weight: var(--fw-semi); min-width: 0; overflow-wrap: anywhere; }
.ax-cm-why { font-size: 13px; color: var(--ink-2); }
.ax-cm-also ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ax-cm-also li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.ax-cm-also li .ax-cm-why { flex: 1 1 220px; }
.ax-cm-dup { display: grid; gap: 8px; padding: 10px 12px; border-radius: var(--r-m); border-left: 3px solid var(--warn); background: var(--warn-bg); font-size: 13.5px; }
.ax-cm-picked { padding: 10px 12px; border-radius: var(--r-m); background: var(--well); }
.ax-cm-picked .ax-actions { margin-top: 4px; }
.ax-cm-acts { justify-content: flex-start; }
.ax-cm-picker { display: grid; gap: 6px; }
.ax-cm-picker label { font-size: 13px; font-weight: var(--fw-semi); }
.ax-cm-out { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.ax-cm-out .hint { flex: 1 1 100%; margin: 0; }
.ax-cm-row.done .ax-cm-name { color: var(--ink-2); }
@media (max-width: 900px) { .ax-cm-row { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) { .ax-cm-acts > .btn { flex: 1 1 100%; justify-content: center; } }

/* ================================================================ w9apex (3.0): the pop-ups and fields opened from the screens
   already rebuilt — Send / Copy, Mark won, PFS peek, approvals, New / Edit job, the award block, Requests, the date range,
   the bidders list, competitors. Kit pieces inside the shared modal(); these place them. */
/* sizes for a pop-up — never a number in the markup (scope.js axModal: s · m · (640) · l · xl) */
.modal.ax-m-s { max-width: 440px; }
.modal.ax-m-m { max-width: 560px; }
.modal.ax-m-l { max-width: 780px; }
.modal.ax-m-xl { max-width: 1040px; }
.ax-modal h3 { margin: 0; font-size: 13.5px; font-weight: var(--fw-bold); }
.ax-modal code { font-size: 12px; padding: 1px 5px; border-radius: 5px; background: var(--well); }
.ax-step { display: grid; gap: 8px; }
.ax-lbl { font-size: 12px; font-weight: var(--fw-semi); color: var(--ink-2); }
.ax-lblrow { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.ax-lblrow label:first-child { font-size: 12px; font-weight: var(--fw-semi); color: var(--ink-2); }
.ax-val-s { font-size: 15px; font-weight: var(--fw-bold); line-height: 1.3; overflow-wrap: anywhere; }
.ax-ok { color: var(--ok); } .ax-warn { color: var(--warn); }
.ax-scroll { max-height: 42vh; overflow: auto; }
.ax-w-s { width: 9ch; } .ax-w-m { width: 12ch; } .ax-w-l { width: 22ch; } .ax-w-xl { width: 32ch; max-width: 100%; }
/* a tick box and its words: the box beside the statement, the statement filling the row */
.ax-tick { display: inline-flex; align-items: flex-start; gap: 8px; font-size: 13px; font-weight: var(--fw-semi); color: var(--ink); cursor: pointer; }
.ax-tick input { margin: 2px 0 0; flex: none; width: 16px; height: 16px; accent-color: var(--ink); }
.ax-ticks { display: flex; flex-wrap: wrap; gap: 8px 18px; }
/* a list of rows in a pop-up: what it is on the left, its button on the right */
.ax-list, .ax-dupelist { list-style: none; margin: 0; padding: 0; display: grid; }
.ax-list > li, .ax-dupelist > li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; padding: 10px 0; border-top: 1px solid var(--hair); }
.ax-list > li:first-child, .ax-dupelist > li:first-child { border-top: 0; }
.ax-list > li > span, .ax-dupelist > li > span { display: grid; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.ax-tko-h { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }   /* a take-off's name and its chips, one line */
.ax-tko-h > .chip { flex: none; }
.ax-tko-list > li { flex-wrap: nowrap; }            /* Open stays beside its take-off; the words wrap instead */
.ax-tko-list > li > span { flex: 1 1 auto; }
.ax-tko-list > li > .btn { flex: none; }
.ax-pf-list { margin: 0; padding-left: 18px; display: grid; gap: 4px; font-size: 13px; }
/* a read-only link with its Copy button: the box gives way, the button keeps its words */
.ax-copybox { display: flex; gap: 8px; align-items: center; }
.ax-copybox .input { flex: 1 1 auto; min-width: 0; font-size: 12px; color: var(--muted); }
.ax-copybox .btn { flex: none; }
/* a fold inside a pop-up (Copy quote: a new customer) */
.ax-fold { padding: 0; overflow: hidden; }
.ax-fold > summary { list-style: none; display: flex; align-items: center; gap: 8px; padding: 12px 14px; cursor: pointer; font-size: 13px; font-weight: var(--fw-semi); }
.ax-fold > summary::-webkit-details-marker { display: none; }
.ax-fold > summary .ax-caret { width: 12px; height: 12px; transition: transform var(--t-std); }
.ax-fold[open] > summary .ax-caret { transform: rotate(90deg); }
.ax-fold > :not(summary) { margin: 0 14px 12px; }
/* a box the person must fill, still empty (markBad), and an award answer that came from somewhere else */
.ax .bad-input, .ax-modal .bad-input { border-color: var(--bad) !important; }
.ax .input.is-unknown, .ax-modal .input.is-unknown { font-style: italic; color: var(--muted); background: var(--well); }
.ax .input.is-derived, .ax-modal .input.is-derived { background: var(--well); cursor: default; }
/* the estimators: a name lights when it is ticked (no handler — :has) */
/* in equal columns (scope.js estimatorPicker sets --ax-est-cols: 3 or 2, whichever leaves the shortest last row — K7) */
.ax-est { display: grid; grid-template-columns: repeat(var(--ax-est-cols, 3), minmax(0, 1fr)); gap: 6px; }
.ax-est-opt { display: flex; align-items: center; gap: 6px; min-height: 32px; padding: 4px 12px 4px 10px; line-height: 1.25; min-width: 0; border-radius: var(--r-pill); border: 1px solid var(--hair-2);
  background: var(--glass-a); font-size: 12.5px; font-weight: var(--fw-semi); cursor: pointer; transition: background var(--t-std), color var(--t-std), border-color var(--t-std); }
.ax-est-opt:hover { border-color: var(--ink); }
.ax-est-opt:has(input:checked) { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }
.ax-est-opt input { margin: 0; accent-color: var(--on-ink); }
@media (max-width: 1180px), (pointer: coarse) { .ax-est-opt { min-height: var(--tap); } }
@media (max-width: 640px) {   /* a phone: two across, and an odd last name takes the row (the kit's phone row) */
  .ax-est { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ax-est-opt:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
/* a customer picked from the book: the box, and the ranked list under it */
.ax-cpick { position: relative; }
.ax-hits-pop { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 40; margin-top: 0; background: var(--surface); box-shadow: var(--shadow-pop); }
.ax-hit-add { border-top: 1px solid var(--hair-2); font-weight: var(--fw-semi); }
.ax-hit > * { min-width: 0; overflow-wrap: anywhere; }
/* "Which <company> site?" (w17-multisite): the question over a company's sites in the same list; a site's name over its
   address, so a narrow phone never breaks the name mid-word, and every row in the list a full tap tall on a touch screen */
.ax-hits > .ax-hit-head { margin: 0; padding: 9px 12px 5px; font-size: 12.5px; }
.ax-hit.ax-hit-site { flex-direction: column; align-items: flex-start; gap: 2px; }
@media (max-width: 1180px), (pointer: coarse) {
  .ax-hit { min-height: var(--tap); align-items: center; }
  .ax-hit.ax-hit-site { align-items: flex-start; justify-content: center; }
}
/* Quote History's "vs budgetary" (w17-budgetary): on a tablet the table is a column too wide for its box, so the column
   steps out there — the Sort by picker still sorts by it, and the phone cards and the desktop table carry it */
@media (min-width: 700px) and (max-width: 900px) { #histTable :is(th, td):nth-child(6) { display: none; } }
/* the sheet-total note under the Bid schedule, and the revenue split under it: one gap, not two paddings */
.ax-qlines > .hint.pad + .hint.pad { padding-top: 0; }
/* the quote line's "Request a price" (pr-*): its icon the size of the row's link icons */
.ax-book .btn.sm .i { width: 12px; height: 12px; }
/* a price request's own page (pr-*, master-items.js request()): its four figures in one row, two on a tablet and a phone */
[data-prq-page] .mi-kv4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 980px) { [data-prq-page] .mi-kv4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* the award block (Edit job, the job page): Unknown sits at the right of its label */
.ax-award-head { margin: 0; font-size: 13px; }
.ax-unk { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: var(--fw-med); color: var(--muted); cursor: pointer; white-space: nowrap; }
.ax-unk input { margin: 0; }
.ax-unk:has(input:disabled) { opacity: .5; cursor: default; }
.ax-award .ax-form > .field[hidden] { display: none; }
@keyframes ax-shake { 0%, 100% { transform: none; } 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
.ax-award.shake { animation: ax-shake .45s; }
@media (prefers-reduced-motion: reduce) { .ax-award.shake { animation: none; outline: 2px solid var(--bad); } }
/* the estimated-date range: one box that takes typing, with the calendar button inside its right edge */
.ax-drf { position: relative; display: flex; align-items: stretch; }
.ax-drf > .ax-drf-in { flex: 1 1 auto; min-width: 0; padding-right: 40px; font-variant-numeric: tabular-nums; }
.ax-drf-btn { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; border: 0; border-radius: 8px; background: transparent;
  color: var(--muted); display: inline-grid; place-items: center; cursor: pointer; }
.ax-drf-btn:hover { background: var(--well); color: var(--ink); }
@media (max-width: 1180px), (pointer: coarse) { .ax-drf-btn::after { content: ""; position: absolute; inset: -7px; } }   /* a 44px reach around the 30px button (w11design K3) */
/* its calendar: fixed to the screen (a modal's scroll box never clips it); where it sits is data (--drf-x, --drf-y) */
.ax-drf-pop { position: fixed; left: var(--drf-x, 8px); top: var(--drf-y, 8px); z-index: 1500; width: 296px; padding: 12px; background: var(--surface); }
.ax-drf-pop.two { width: 584px; }
.ax-drf-pop.sheet { left: 0; right: 0; bottom: 0; top: auto; width: auto; border-radius: var(--r-xl) var(--r-xl) 0 0; padding-bottom: max(14px, env(safe-area-inset-bottom)); }
.ax-drf-head, .ax-drf-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ax-drf-foot { margin-top: 8px; flex-wrap: wrap; }
.ax-drf-say { font-size: 13px; color: var(--muted); flex: 1 1 auto; min-width: 0; }
.ax-drf-nav { display: flex; flex: none; gap: 4px; }
.ax-drf-months { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 6px; }
.ax-drf-pop.two .ax-drf-months { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ax-drf-mname { font-weight: var(--fw-bold); text-align: center; margin: 2px 0 6px; font-size: 13px; }
.ax-drf-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px 0; }
.ax-drf-grid b { font-size: 11px; color: var(--muted); text-align: center; font-weight: var(--fw-semi); padding: 2px 0; }
.ax-drf-grid button { border: 0; background: none; color: var(--ink); height: 36px; border-radius: 8px; cursor: pointer; font: inherit; font-size: 13px; font-variant-numeric: tabular-nums; }
.ax-drf-pop.sheet .ax-drf-grid button { height: var(--tap); font-size: 15px; }
.ax-drf-grid button:hover { background: var(--well); }
.ax-drf-grid button.today { box-shadow: inset 0 0 0 1px var(--hair-2); }
.ax-drf-grid button.in { background: color-mix(in srgb, var(--accent) 16%, transparent); border-radius: 0; }
.ax-drf-grid button.on { background: var(--ink); color: var(--on-ink); font-weight: var(--fw-bold); }
.ax-drf-grid button.on.lo { border-radius: 8px 0 0 8px; }
.ax-drf-grid button.on.hi { border-radius: 0 8px 8px 0; }
.ax-drf-grid button.on.lo.hi { border-radius: 8px; }
/* City requirements, under the city on the quote: a fold that keeps its open state per browser */
.ax-req { padding: 0; overflow: hidden; }
.ax-req-sum { list-style: none; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; padding: 14px 16px; cursor: pointer; }
.ax-req-sum::-webkit-details-marker { display: none; }
.ax-req-sum .ax-caret { width: 12px; height: 12px; align-self: center; transition: transform var(--t-std); }
.ax-req[open] .ax-req-sum .ax-caret { transform: rotate(90deg); }
.ax-req-title { font-size: var(--fs-l); font-weight: var(--fw-bold); }
.ax-req-peek { margin-left: auto; }
.ax-req-body { display: grid; gap: 10px; padding: 0 16px 16px; }
.ax-req-body p { margin: 0; }
.ax-req-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 18px; margin: 0; }
.ax-req-grid dt { font-size: 12px; font-weight: var(--fw-semi); color: var(--muted); }
.ax-req-grid dd { margin: 2px 0 0; font-size: 13px; overflow-wrap: anywhere; }
@media (max-width: 640px) { .ax-req-grid { grid-template-columns: minmax(0, 1fr); } .ax-req-peek { margin-left: 0; flex-basis: 100%; } }
/* the bidders list's rows: the account it is, the contact to confirm */
.ax-bid-resolve { max-width: 260px; width: 100%; }
.ax-bid-resolve .select { width: 100%; }
.ax-bid-poc { display: flex; flex-wrap: wrap; gap: 4px; }
.ax-bid-poc .input { height: 32px; padding: 0 8px; font-size: 12.5px; }
.ax-bid-name { min-width: 200px; }
.ax-bid-new { display: grid; gap: 6px; margin-top: 8px; padding: 10px 12px; border-radius: var(--r-m); background: var(--warn-bg); border-left: 3px solid var(--warn); }
.ax-bid-new p { margin: 0; }
/* Track a competitor: what their number works out to */
.ax-cq-preview { margin: 0; padding: 10px 12px; border-radius: var(--r-m); background: var(--well); font-size: 13.5px; }
@media (max-width: 640px) {
  .ax-modalacts > .btn, .ax-modalacts > a.btn { flex: 1 1 auto; justify-content: center; }
  .ax-drf-pop.two { width: auto; }
  .ax-bid-poc .input { width: 100%; }
}
/* a field's hint sits right under its box (a <p> brings its own margins), and a segmented control keeps its own width */
:is(.ax, .ax-modal) .field > p.hint { margin: 0; }
:is(.ax, .ax-modal) .field > .seg { align-self: flex-start; }
/* the Mark won walk and the quote's Paperwork tab (handoff.js, 3.0 w9apex) */
.ax-ho-steps { margin: 2px 0 4px; }
.ax-ho-walk { display: grid; gap: 12px; min-width: 0; }
.ax-ho-walk > p { margin: 0; }
.ax-ho-head > span:first-child { display: grid; gap: 2px; }
.ax-ho-pw { list-style: none; margin: 0; padding: 0; display: grid; }
.ax-ho-pw > li { display: grid; grid-template-columns: minmax(0, 1fr) 190px auto; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--hair); }
.ax-ho-pw > li:last-child { border-bottom: 0; }
.ax-ho-pw-name { display: grid; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.ax-ho-st { width: 100%; }
.ax-ho-st .status { width: 100%; field-sizing: fixed; }
.ax-ho-pw-add { display: flex; gap: 8px; margin-top: 10px; }
.ax-ho-pw-add .input { flex: 1 1 auto; min-width: 0; max-width: 360px; }
.ax-ho-pw-add > .btn, .ax-noterow > .btn { flex: none; }   /* the box gives way, never the button */
.ax-ho-from { font-size: 13px; padding: 6px 0; }
.ax-ho-sum { display: grid; gap: 8px; margin: 0; }
.ax-ho-sum > div { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 10px; }
.ax-ho-sum dt { font-weight: var(--fw-bold); font-size: 13px; }
.ax-ho-sum dd { margin: 0; font-size: 13px; }
.ho-day3 li { grid-template-columns: 18px minmax(0, 1fr) auto; align-items: center; }
@media (max-width: 760px) {
  .ax-ho-pw > li { grid-template-columns: minmax(0, 1fr) auto; }
  .ax-ho-pw .ax-ho-pw-name { grid-column: 1 / -1; }
  .ho-day3 li { grid-template-columns: 18px minmax(0, 1fr); }
  .ho-day3 li .ax-actions { grid-column: 2; }
}
@media (max-width: 1180px), (pointer: coarse) { .ax-ho-st .status { height: var(--tap); } }
/* ================================================================ Apex › Overview (3.0 w9apex): the dashboard pattern — head, the kit
   strip with a drill on each figure, the stale flags, then Recent bids and Recent customer visits */
.ax-ov-h { margin: 0; font-size: var(--fs-l); font-weight: var(--fw-bold); }
.ax-ov-flags { display: grid; gap: 10px; }
.ax-ov-list { display: grid; gap: 2px; margin-top: 4px; font-size: 12.5px; }
.ax-ov-card { display: grid; gap: 6px; }
.ax-ov-visits { list-style: none; margin: 0; padding: 0; display: grid; }
.ax-ov-visits > li { display: grid; gap: 4px; padding: 10px 0; border-top: 1px solid var(--hair); }
.ax-ov-visits > li:first-child { border-top: 0; padding-top: 2px; }
.ax-ov-visits p { margin: 0; }
@media (max-width: 640px) { .ax-ov .page-head .ax-actions { width: 100%; } .ax-ov .page-head .ax-actions .btn { flex: 1 1 0; justify-content: center; } }
.ax-ov table.t th:first-child, .ax-ov table.t td:first-child { padding-left: 18px; }   /* level with the panel's heading (--pad is 16px 18px) */
.ax-ov table.t th:last-child, .ax-ov table.t td:last-child { padding-right: 18px; }
/* the Mobilization tab and the road-miles box (3.0 w9apex): glass panels, the kit's fields, strip and tables */
.ax-mob { display: grid; gap: var(--gap); min-width: 0; }
.ax-mob > p.hint { margin: 0; }
.ax-mob .ax-tick { min-height: var(--ctl); align-items: center; }
@media (max-width: 1180px), (pointer: coarse) { .ax-mob .ax-tick { min-height: var(--tap); } }
.ax-mob-total td { border-top: 1px solid var(--hair-2); }
.ax-mile-sum { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; font-size: 13px; }
.ax-mile-go { margin-left: auto; }
.ax-mile-in .input.n { text-align: right; }
.ax-mile-split { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ax-mile-split .hint { overflow-wrap: anywhere; }
@media (max-width: 700px) { .ax-mile-split { grid-template-columns: minmax(0, 1fr); } }

/* ================================================================ the Build tab (3.0 w9apex, scope.js quoteEditor)
   The top 2 × 2: Project & tier · Tasks & messages, then Safety & compliance · Approval — each pair one height (the grid's
   rows stretch), the thread scrolling inside its panel. One column under 900, in reading order. */
.ax-build { gap: var(--gap); }
.ax-build .ax-sec h2 .hint { font-weight: var(--fw-med); }
.ax-btop { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--gap); align-items: stretch; }
.ax-btop > * { min-width: 0; margin: 0; }
.ax-bproj .ax-form { align-items: start; }
.ax-discuss { position: relative; min-height: 340px; padding: 0; }
.ax-discuss-in { position: absolute; inset: 0; overflow: auto; padding: 16px 18px; display: grid; gap: 12px; align-content: start; }
.ax-discuss-in > #quoteTasks:empty { display: none; }
/* B07 (wave 17, w11design S5): the panel's title sits at the top like its neighbours' (it took the page heading's 22px), and the
   composer is the panel's own glass, not a solid white sheet on the green: transparent while the thread lies in the page
   (one column), frosted glass while it sticks to the foot of a thread that scrolls inside the panel (two columns) */
.ax-discuss-in > .ax-row h2 { margin: 0; }
.ax-discuss-in .thread-compose { position: sticky; bottom: -16px; padding: 8px 0 16px;
  background: linear-gradient(to bottom, transparent, var(--glass-a) 10px); -webkit-backdrop-filter: blur(var(--glass-blur)); backdrop-filter: blur(var(--glass-blur)); }
@media (max-width: 900px) {
  .ax-btop { grid-template-columns: minmax(0, 1fr); }
  .ax-btop > .ax-bproj { order: 1; } .ax-btop > .ax-bsafety { order: 2; } .ax-btop > .ax-discuss { order: 3; } .ax-btop > #qApproval { order: 4; }
  .ax-discuss { min-height: 0; }
  .ax-discuss-in { position: static; }
  .ax-discuss-in .thread-compose { position: static; padding-bottom: 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
}
.ax-tick-block { display: flex; }
.ax-tick-block > span { display: grid; gap: 2px; }
.ax-tick-block .hint { font-weight: var(--fw-med); }
/* a site condition's answer: the thumb turns amber while it is Unknown */
.seg.ax-seg-unk .thumb { background: var(--warn); }
.ax-conds { align-items: start; }
.ax-conds .seg { max-width: 100%; }
@media (max-width: 1180px), (pointer: coarse) { .ax-conds .seg button { min-height: var(--tap); } }
/* Minimum charges beside Hourly terms — the wider side left; one column under 900 */
.ax-bpair { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--gap); align-items: stretch; }
.ax-bpair > * { min-width: 0; margin: 0; }
.ax-bcell { display: grid; gap: var(--gap); min-width: 0; align-content: start; }
@media (max-width: 900px) { .ax-bpair { grid-template-columns: minmax(0, 1fr); } }
/* the quote notes */
.ax-notes { display: grid; gap: 6px; }
.ax-noterow { display: flex; gap: 6px; align-items: center; }
.ax-noterow .input { flex: 1 1 auto; min-width: 0; }
/* ---- the bid schedule: a kit table on a computer; on a phone each line is a card (labels from the column, positional) */
.ax-qlines { overflow: visible; }
.ax-ql th:first-child, .ax-ql td:first-child { padding-left: 16px; }
.ax-ql th:last-child, .ax-ql td:last-child { padding-right: 16px; }
table.t.ax-ql td { vertical-align: top; }
table.t.ax-ql td.ax-ql-total, table.t.ax-ql td.ax-ql-excl { padding-top: 17px; }
table.t.ax-ql td.ax-ql-del { padding-top: 11px; }   /* level with the boxes on the line */
.ax-ql .input { height: 34px; padding: 0 8px; }
.ax-ql .input.n { text-align: right; }
.ax-ql .input:disabled { background: var(--well); color: var(--muted); cursor: not-allowed; }
.ax-ql input[data-zero] { background: color-mix(in srgb, var(--warn) 18%, var(--surface)); border-color: var(--warn-line); }   /* prints $0.00: look before sending */
.ax-ql-h1 { width: 74px; }
.ax-ql-pick { display: flex; align-items: center; gap: 2px; }
.ax-ql-n { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: var(--fw-semi); color: var(--muted); cursor: pointer; font-variant-numeric: tabular-nums; }
.ax-ql-n input { margin: 0; width: 15px; height: 15px; accent-color: var(--ink); }
.ax-ql-excl-w { display: none; }
.ax-ql-desc { display: flex; gap: 6px; }
.ax-ql-desc > .input:not(.ax-ql-no) { flex: 1 1 0; min-width: 0; }
.ax-ql-no { flex: 0 0 74px; width: 74px; }
.ax-ql tr:not(.ax-ql-sum) > td:nth-child(2) { min-width: 240px; }   /* not the subtotal row, whose second cell is the total */
.ax-ql .ax-cl, .ax-min-t .ax-cl { display: none; }   /* a cell's own label: shown only as cards (axCellLabel) */
.ax-ql-qty { width: 150px; }
.ax-ql-qtycell { display: flex; align-items: center; gap: 6px; }
.ax-ql-qtycell > .input, .ax-ql-qtycell > .ax-ql-tbd { flex: 1 1 auto; min-width: 64px; }
.ax-ql-tbd { height: 34px; display: grid; place-items: center; border-radius: var(--r-m); background: var(--well); font-size: 12px; font-weight: var(--fw-bold); color: var(--muted); }
.ax-ql-tbdtick { flex: none; display: inline-flex; align-items: center; gap: 3px; font-size: 10.5px; font-weight: var(--fw-bold); color: var(--muted); cursor: pointer; }
.ax-ql-tbdtick input { margin: 0; }
.ax-ql-unit { width: 80px; }
.ax-ql-price { width: 112px; }
.ax-ql-adj { width: 84px; }
.ax-ql-total { white-space: nowrap; }
.ax-ql-del { width: 44px; }
.ax-ql-sum td { border-top: 1px solid var(--hair-2); }
.ax-ql tr.ax-ql-bundle > td { background: color-mix(in srgb, var(--ink) 3%, transparent); }
.ax-ql-rb { display: flex; align-items: center; gap: 6px; margin-top: 6px; }
.ax-ql-rb .select-wrap { flex: 1 1 0; min-width: 0; }
.ax-ql-rb .select { width: 100%; height: 30px; font-size: 12.5px; }
.ax-ql .line-excluded td { opacity: .45; }
.ax-ql .line-excluded td :is(input:not([type=checkbox]), .ax-ql-desc) { text-decoration: line-through; }
/* dragging a line (scope.js qlDrag) */
.ax-ql .ql-grip, .ax-trad .ql-grip { border: 0; background: none; color: var(--muted); cursor: grab; touch-action: none; padding: 0; width: 24px; height: 32px; border-radius: 6px; display: inline-grid; place-items: center; }
.ax-ql .ql-grip:hover, .ax-ql .ql-grip:focus-visible, .ax-trad .ql-grip:hover, .ax-trad .ql-grip:focus-visible { color: var(--ink); background: var(--well); }
table.t.ax-ql tbody tr.ql-dragging, table.t.ax-trad tbody tr.ql-dragging { position: relative; z-index: 2; background: var(--surface); box-shadow: var(--shadow-pop); }
.ax-ql tr.ql-dragging .ql-grip, .ax-trad tr.ql-dragging .ql-grip { cursor: grabbing; }
/* a line its customer's price list has no number for (#29): red — the bid cannot be sent until it is on their list or off */
.ax-ql tr.ax-pb-miss > td { background: color-mix(in srgb, var(--bad) 7%, transparent); }
.ax-ql tr.ax-pb-miss > td:first-child { box-shadow: inset 3px 0 0 var(--bad); }
.ax-ql tr.ax-pb-miss input[id^="ql_price_"], .ax-ql tr.ax-pb-miss input[id^="ql_pprice_"] { border-color: var(--bad); }
.ax-pb-why { margin-top: 4px; font-size: 12.5px; color: var(--bad); line-height: 1.35; }
.ax-pb-why a { color: inherit; text-decoration: underline; }
@media (min-width: 901px) and (max-width: 1279px) {
  .ax-ql th, .ax-ql td { padding-left: 6px; padding-right: 6px; }
  .ax-ql tr:not(.ax-ql-sum) > td:nth-child(2) { min-width: 168px; }
  .ax-ql-no { flex-basis: 60px; width: 60px; }
  .ax-ql-qty { width: 1%; }
  .ax-ql-unit { width: 80px; } .ax-ql-price { width: 92px; } .ax-ql-adj { width: 68px; }
}
@media (min-width: 901px) and (max-width: 1099px) { .ax-ql-desc { flex-direction: column; } .ax-ql-no { flex: 0 0 auto; width: 100%; } }
/* 900 and under (a touch iPad, a phone): one card per line — nine columns no longer fit a table without clipping the boxes */
@media (max-width: 900px) {
  .ax-qlines .table-wrap, .ax-ql, .ax-ql > tbody { display: block; width: 100%; }
  .ax-ql > thead { display: none; }
  .ax-ql tr { display: grid; grid-template-columns: auto minmax(0, 1fr) calc(50% - 6px); gap: 8px 12px; padding: 12px 14px; border-bottom: 1px solid var(--hair); }
  .ax-qlines > .ax-row > .ax-actions { flex: 1 1 100%; }
  .ax-qlines > .ax-row > .ax-actions > .btn { flex: 1 1 auto; justify-content: center; }
  table.t.ax-ql td { display: block; border: 0; padding: 0 !important; width: auto; min-width: 0 !important; }
  .ax-ql td:nth-child(1) { grid-column: 1; align-self: center; }
  .ax-ql td:nth-child(2) { grid-column: 2 / -1; }
  .ax-ql td:nth-child(3) { grid-column: 1 / 3; }
  .ax-ql td:nth-child(4) { grid-column: 3; }
  .ax-ql td:nth-child(5) { grid-column: 1 / 3; }
  .ax-ql td:nth-child(6) { grid-column: 3; }
  .ax-ql td:nth-child(7) { grid-column: 1 / -1; text-align: right; font-weight: var(--fw-bold); }
  .ax-ql td:nth-child(8) { grid-column: 1 / 3; align-self: center; }
  .ax-ql td:nth-child(9) { grid-column: 3; justify-self: end; }
  .ax-ql .ax-cl { display: block; margin-bottom: 3px; font-size: 11.5px; font-weight: var(--fw-semi); color: var(--muted); text-align: left; }
  .ax-ql td.ax-ql-total > .ax-cl { float: left; margin: 0; line-height: inherit; }   /* "Total" on the left, the figure on the right, one line */
  .ax-ql-excl-w { display: inline; font-size: 13px; color: var(--ink); }
  .ax-ql .ax-ql-part td:nth-child(8), .ax-ql .ax-ql-part td:nth-child(9) { display: none; }
  .ax-ql td.ax-part { padding-left: 0 !important; }
  .ax-ql .ql-grip, .ax-trad .ql-grip { width: 44px; height: 44px; }
  .ax-ql .input { height: var(--tap); }
  .ax-ql tr.ax-pb-miss { box-shadow: inset 3px 0 0 var(--bad); background: color-mix(in srgb, var(--bad) 7%, transparent); }
  .ax-ql tr.ax-pb-miss > td { background: none; }
  .ax-ql tr.ax-pb-miss > td:first-child { box-shadow: none; }
  .ax-ql tr.ax-ql-sum { display: flex; justify-content: space-between; align-items: center; }
  .ax-ql tr.ax-ql-sum td:empty { display: none; }
  .ax-ql tr > td.empty { grid-column: 1 / -1; }
}
@media (max-width: 560px) { .ax-ql-desc { flex-direction: column; } .ax-ql-no { flex: 0 0 auto; width: 100%; } }   /* the description gets the whole width */
@media (min-width: 561px) and (max-width: 900px) {   /* wide enough for the four figures on one row under the description */
  .ax-ql tr { grid-template-columns: auto repeat(4, minmax(0, 1fr)); }
  .ax-ql td:nth-child(3) { grid-column: 2; } .ax-ql td:nth-child(4) { grid-column: 3; }
  .ax-ql td:nth-child(5) { grid-column: 4; } .ax-ql td:nth-child(6) { grid-column: 5; }
  .ax-ql td:nth-child(7) { grid-column: 2 / -1; }
  .ax-ql td:nth-child(8) { grid-column: 2 / 5; } .ax-ql td:nth-child(9) { grid-column: 5; }
}
/* ---- the Crew & cost estimate (3.0 w9apex, costEstimateEditor): the kit strip, kit tables, cost cells five across */
.ax-ce h2 .chip { margin-left: 4px; }
.ax-ce-head { margin-top: 6px; }
.ax-ce-head .ax-actions { margin-left: auto; flex-wrap: wrap; }   /* w46b: the presets wrap on a phone instead of running off the card */
@media (max-width: 640px) { .ax-ce-head .ax-actions { margin-left: 0; width: 100%; } }
.ax-ce-crew td, .ax-ce-exp td { vertical-align: top; }
.ax-ce-crew .input.n { width: 72px; }
.ax-ce-crew td:first-child .select-wrap { min-width: 160px; max-width: 260px; }
.ax-ce-crew td:nth-child(2) .select-wrap { min-width: 140px; }
.ax-ce-exp .input.n { width: 120px; }
.ax-ce-kitcell { min-width: 280px; }
.ax-ce-kchips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.ax-ce-kmeta { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; margin-top: 6px; font-size: 12.5px; }
.ax-ce-hist { display: grid; gap: 1px; margin-top: 4px; font-size: 11.5px; color: var(--muted); line-height: 1.35; text-align: right; }
.ax-ce-hist > span { white-space: nowrap; }
.ax-ce-hist .ax-linkbtn { font-size: 11.5px; }
.ax-ce-rates { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.ax-ce-rate { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: var(--fw-semi); }
.ax-ce-rate .input { width: 80px; }
.ax-ce-rates > .hint { flex: 1 1 220px; min-width: 0; margin: 0; }
.ax-ce-costs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.ax-ce-cost { display: grid; gap: 6px; align-content: start; padding: 10px; border-radius: var(--r-l); border: 1px solid var(--hair); background: var(--glass-a); min-width: 0; }
.ax-ce-cost.off { background: var(--well); }
.ax-ce-cost-h { display: flex; justify-content: space-between; align-items: center; gap: 6px; min-height: 30px; font-size: 12.5px; font-weight: var(--fw-semi); }
.ax-ce-cost-in { display: flex; gap: 6px; align-items: center; }
.ax-ce-cost-in .input { flex: 1 1 0; min-width: 0; }
.ax-ce-cost-in > .seg { flex: none; }   /* the %/$ pair keeps both halves; the box gives way */
.ax-ce-cost p.hint { margin: 0; }
.ax-ce-seg button { height: 24px; padding: 0 9px; }   /* a cost's No | Yes, alone on its head line */
.ax-ce-cost-in > .ax-ce-seg button { height: 30px; }   /* % | $ beside the 36px box: the switch is 36 outside too, one height on the line (K2; it was 30 beside 36) */
@media (max-width: 1279px) { .ax-ce-costs { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 980px) { .ax-ce-costs { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ax-ce-kitcell { min-width: 220px; } }
@media (max-width: 520px) { .ax-ce-costs { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 1180px), (pointer: coarse) { .ax-ce-seg button, .ax-ce-cost-in > .ax-ce-seg button { height: var(--tap); min-width: var(--tap); } }   /* touch: the kit's 44 (the seg drops its padding there), level with the 44px box beside it — 36 was the one K2 regression f1's sweep left */
/* the bid-only kit editor */
.ax-cek .input.n { width: 88px; }
.ax-cek-add { flex-wrap: nowrap; }
.ax-cek-add .select-wrap { flex: 1 1 auto; min-width: 0; }
.ax-cek-add .select { width: 100%; }
/* ---- Minimum charges and the fuel surcharge row under them */
.ax-min-t td { vertical-align: top; }
.ax-min-t .input.n { width: 96px; }
.ax-min-t td:nth-child(5) .input { min-width: 220px; }
.ax-min { container-type: inline-size; }
@container (max-width: 860px) {   /* the panel, not the window: beside Hourly terms it is narrow on a 1280 laptop too */
  .ax-min .table-wrap, .ax-min-t, .ax-min-t > tbody { display: block; width: 100%; overflow: visible; }
  .ax-min-t > thead { display: none; }
  .ax-min-t tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; gap: 8px 10px; padding: 12px 0; border-bottom: 1px solid var(--hair); }
  table.t.ax-min-t td { display: block; border: 0; padding: 0 !important; text-align: left; min-width: 0; }
  .ax-min-t td:nth-child(4), .ax-min-t td:nth-child(5) { grid-column: 1 / -1; }
  .ax-min-t td:nth-child(6) { grid-column: 4; grid-row: 1; align-self: end; }
  .ax-min-t .ax-cl { display: block; margin-bottom: 3px; font-size: 11.5px; font-weight: var(--fw-semi); color: var(--muted); }
  .ax-min-t .input.n, .ax-min-t .select-wrap, .ax-min-t .select { width: 100%; }
  .ax-min-t td:nth-child(5) .input { min-width: 0; width: 100%; }
  .ax-min-t .ax-minitems { min-width: 0; }
  .ax-min-t td.r > .hint { display: block; padding-top: 8px; }
}
.ax-minitems { min-width: 220px; }
.ax-minitems > summary, .ax-fuel-items > summary { padding: 8px 10px; }
.ax-minitems-list { display: grid; gap: 6px; max-height: 220px; overflow: auto; }
.ax-minitems-list .ax-tick.off { opacity: .45; cursor: not-allowed; }
.ax-min-presets .btn { flex: 0 0 auto; }
@media (max-width: 700px) { .ax-min-presets > .btn { flex: 1 1 calc(50% - 6px); justify-content: center; } }
.ax-fuel { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding-top: 12px; border-top: 1px dashed var(--hair-2); }
.ax-fuel-name { font-weight: var(--fw-bold); font-size: 13px; }
.ax-fuel-in { display: inline-flex; gap: 4px; align-items: center; font-size: 13px; }
.ax-fuel-in .input { width: 76px; }
.ax-fuel-items { position: relative; }
.ax-fuel-items[open] > .ax-minitems-list { position: absolute; z-index: 5; left: 0; top: calc(100% + 4px); width: min(460px, 80vw); padding: 10px 12px; margin: 0;
  border-radius: var(--r-m); background: var(--surface); box-shadow: var(--shadow-pop); }
.ax-fuel-branch { margin-left: auto; }
.ax-fuel-says { margin: 0; font-size: 13px; color: var(--muted); font-style: italic; }
@media (max-width: 760px) {
  .ax-fuel-branch { margin-left: 0; flex-basis: 100%; }
  .ax-fuel-items { position: static; }
  .ax-fuel-items[open] > .ax-minitems-list { left: 0; right: 0; width: auto; }
}
@media (max-width: 1180px), (pointer: coarse) { .ax-fuel .seg button { min-height: var(--tap); min-width: 44px; } }
/* ---- Traditional (industrial) estimator (3.0 w9apex, tradEstimator): the shift model, the rate-book picker, the resources */
.ax-trad-shift { align-items: start; }
.ax-trad-says { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.ax-rb { display: grid; gap: 10px; }
.ax-rb-bar { padding: 0; }
.ax-rb-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ax-rb-chip { height: auto; min-height: 32px; padding: 4px 10px; white-space: normal; text-align: left; }
.ax-rb-chip .hint { font-weight: var(--fw-med); }
.ax-rb-sec { display: grid; gap: 6px; }
.ax-rb-sec-h { all: unset; box-sizing: border-box; display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--r-m);
  cursor: pointer; font-size: 13px; font-weight: var(--fw-semi); border: 1px solid var(--hair); background: var(--glass-a); }
.ax-rb-sec-h:hover, .ax-rb-sec-h.on { border-color: var(--hair-2); background: var(--well); }
.ax-rb-sec-h:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.ax-rb-sec-h > span:first-child { display: inline-flex; align-items: center; gap: 6px; }
.ax-trad td { vertical-align: top; }
/* B06 (wave 17): ten columns that fit a desktop and an iPad on its side without a sideways scroll (Jordan: "Fix so you don't
   have to scroll") — narrower number boxes and cell padding, TBD under the quantity, OT and premium stacked in one column.
   The item's name keeps room to read in two lines, not five. A phone still scrolls the table (wave 9's call). */
.t.ax-trad :is(th, td) { padding-left: 6px; padding-right: 6px; }
.t.ax-trad :is(th, td):first-child { padding-left: 14px; min-width: 176px; }
.ax-trad .input.n { width: 66px; }
.ax-trad-name { min-width: 150px; }
.ax-w-kind { width: 136px; }
.ax-trad td:nth-child(2) .select-wrap { min-width: 124px; }   /* "Per shift" / "Equipment" stay readable when the table is tight */
.ax-trad-tbdtick { display: flex; justify-content: flex-end; margin-top: 4px; }
.ax-trad-otpt { display: inline-grid; grid-template-columns: auto auto; align-items: center; gap: 4px 6px; }
.ax-trad-mini { font-size: 11px; font-weight: var(--fw-semi); color: var(--muted); }
/* wave 17 (SWI's template): a line's name on the proposal, and a material's units/pkg × pkg/shift */
.ax-trad-printas { display: grid; gap: 2px; margin-top: 6px; font-size: 11px; font-weight: var(--fw-semi); color: var(--muted); }
.ax-trad-printas .input { height: 30px; font-size: 12.5px; font-weight: var(--fw-med); color: var(--ink); }
.ax-trad-printbtn, .ax-trad-pkgbtn { display: block; margin-top: 4px; font-size: 11px; color: var(--muted); }
@media (pointer: coarse) { .ax-trad-printbtn, .ax-trad-pkgbtn { margin-top: 12px; } }   /* a finger (w22touch): its 44 no longer covers the "rate book" link above it (37) */
.ax-trad-printbtn:hover, .ax-trad-pkgbtn:hover { color: var(--accent-ink); }
.ax-trad-pkgbtn { margin-left: auto; }
/* units/pkg over × pkg/shift, one box wide, so the grid keeps its width (B06) */
.ax-trad-pkg { display: inline-grid; grid-template-columns: auto auto; align-items: center; gap: 4px; }
.ax-trad-pkg > .input:first-child { grid-column: 2; }
.ax-trad-pkg > .hint { grid-column: 1 / -1; text-align: right; }
@media (max-width: 1180px) { .ax-trad .input.n { width: 60px; } }
.ax-trad-sec > td { background: var(--well); font-weight: var(--fw-bold); cursor: grab; }
.ax-trad-sec .btn.icon { width: 30px; height: 30px; }
.ax-trad-grip { display: inline-grid; place-items: center; color: var(--muted); vertical-align: middle; }
.ax-trad-tbd > td { background: color-mix(in srgb, var(--warn) 6%, transparent); }
.ax-trad-sum td { border-top: 1px solid var(--hair-2); }
@media (max-width: 1180px), (pointer: coarse) { .ax-rb-sec-h { min-height: var(--tap); } .ax-trad-sec .btn.icon { width: var(--tap); height: var(--tap); } }
/* ---- AGST tank estimator (agstEstimator): the bid headline with its margin ladder, the services, the mobilization, the summary */
.ax-agst-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 12px; padding: 12px 14px; border-radius: var(--r-l); background: var(--well); }
.ax-agst-head > div:first-child { display: grid; gap: 2px; }
.ax-agst-margins button { height: auto; min-height: 30px; padding: 4px 10px; }
.ax-agst-margins button em { display: block; font-size: 11px; margin: 0; }
.ax-agst-svch { padding: 0 2px; }
.ax-agst-in:empty { display: none; }
.ax-agst-calc { display: grid; gap: 10px; padding: 12px; border-radius: var(--r-m); background: var(--well); }
p.ax-agst-calc { margin: 0; }
.ax-agst-items td { vertical-align: top; }
.ax-agst-items .input.n { width: 90px; }
.ax-agst-items .ax-cl { display: none; }
.table-wrap:has(> .ax-agst-items) { container-type: inline-size; }
@container (max-width: 940px) {   /* one card per cost item wherever the eight columns no longer fit (an 820 iPad, a phone) */
  .table-wrap:has(> .ax-agst-items) { overflow: visible; }
  .ax-agst-items, .ax-agst-items > tbody { display: block; width: 100%; }
  .ax-agst-items > thead { display: none; }
  .ax-agst-items tr { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) auto; gap: 8px 10px; padding: 12px 16px; border-bottom: 1px solid var(--hair); }
  table.t.ax-agst-items td { display: block; border: 0; padding: 0 !important; text-align: left; min-width: 0; }
  .ax-agst-items td:nth-child(1) { grid-column: 1 / 5; }
  .ax-agst-items td:nth-child(8) { grid-column: 5; grid-row: 1; align-self: end; }
  .ax-agst-items td:nth-child(2), .ax-agst-items td:nth-child(6) { grid-column: 1; }
  .ax-agst-items td:nth-child(3), .ax-agst-items td:nth-child(7) { grid-column: 2; }
  .ax-agst-items td:nth-child(4) { grid-column: 3; } .ax-agst-items td:nth-child(5) { grid-column: 4; }
  table.t.ax-agst-items td:nth-child(5) { display: grid; grid-template-rows: auto 1fr; align-items: center; font-weight: var(--fw-bold); }   /* the figure level with the boxes beside it */
  .ax-agst-items td.empty { grid-column: 1 / -1; }
  .ax-agst-items .ax-cl { display: block; margin-bottom: 3px; font-size: 11.5px; line-height: 1.3; font-weight: var(--fw-semi); color: var(--muted); }
  table.t.ax-agst-items .input { width: 100%; }
}
@container (max-width: 480px) {
  .ax-agst-items tr { grid-template-columns: repeat(2, minmax(0, 1fr)) auto; }
  .ax-agst-items td:nth-child(1) { grid-column: 1 / 3; }
  .ax-agst-items td:nth-child(8) { grid-column: 3; }
  .ax-agst-items td:nth-child(4) { grid-column: 1; } .ax-agst-items td:nth-child(5) { grid-column: 2; }
}
.ax-agst-label { min-width: 220px; }
.ax-agst-unit .input { width: 80px; }
.ax-agst-pct { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
.ax-agst-pct .input { width: 80px; }
.ax-agst-sum { gap: 6px; }
.ax-agst-line { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 13.5px; min-height: 30px; }
.ax-agst-total { border-top: 1px solid var(--hair-2); margin-top: 6px; padding-top: 10px; font-size: 15px; }
/* the line's history chip (histChip): what this item really did on finished jobs; its tone on its left edge */
.ax-hist { all: unset; box-sizing: border-box; display: block; width: 100%; max-width: 100%; margin-top: 4px; padding: 1px 0 1px 7px; border-left: 2px solid var(--hair-2);
  font-size: 11.5px; color: var(--muted); cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; contain: inline-size; }
.ax-hist:hover { color: var(--ink); }
.ax-hist:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 3px; }
.ax-hist b { font-weight: var(--fw-bold); }
.ax-hist.ok { border-left-color: var(--ok); } .ax-hist.ok b { color: var(--ok); }
.ax-hist.warn { border-left-color: var(--warn); } .ax-hist.warn b { color: var(--warn); }
.ax-hist.bad { border-left-color: var(--bad); } .ax-hist.bad b { color: var(--bad); }
@media (max-width: 720px) { .ax-hist { white-space: normal; } }
@media print { .ax-hist { display: none !important; } }
.ax-hist-dl { display: grid; margin: 0; }
.ax-hist-dl > div { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--hair); font-size: 13px; }
.ax-hist-dl dt { min-width: 0; }
.ax-hist-dl dd { margin: 0; font-weight: var(--fw-bold); white-space: nowrap; }
.ax-muted { color: var(--muted); }
/* dragging a line: the rows slide by --ql-dy while the table is sorting */
.ax-ql.ql-sorting tr, .ax-trad.ql-sorting tr { transform: translateY(var(--ql-dy, 0px)); transition: transform .18s cubic-bezier(.32, .72, 0, 1); }
.ax-ql.ql-sorting tr.ql-dragging, .ax-trad.ql-sorting tr.ql-dragging { transition: none; }
@media (prefers-reduced-motion: reduce) { .ax-ql.ql-sorting tr, .ax-trad.ql-sorting tr { transition: none; } }
/* ---- the line tools above the bid schedule (3.0 w9apex): Takeoff import and the Bid item matcher fold open; the Master Items
   picker; the manhole schedule and the bid templates in their pop-ups */
.ax-tool > summary { flex-wrap: wrap; padding: 14px 16px; }
.ax-tool > summary b { font-size: 14px; }
.ax-tool-body { display: grid; gap: 10px; margin: 0 16px 16px; }
.ax-tool-body > p { margin: 0; }
.ax-code { font-size: 12px; padding: 1px 5px; border-radius: 5px; background: var(--well); color: var(--ink-2); }
.ax-tko-row { display: grid; gap: 4px; padding: 10px 0 4px; border-top: 1px solid var(--hair); }
.ax-tko-row > p { margin: 0; }
.ax-tko-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; }
.ax-tko-prop, .ax-tko-add, .ax-tko-rule { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; padding: 4px 0 4px 22px; }
.ax-tko-prop > input[type=checkbox] { margin: 0; width: 16px; height: 16px; accent-color: var(--ink); }
.ax-tko-add .input { max-width: 300px; }
.ax-tko-teach { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 4px 0 6px 22px; padding: 10px 12px; border-radius: var(--r-m); background: var(--info-bg); font-size: 13px; }
.ax-bim-map { display: grid; gap: 8px; padding: 12px; border-radius: var(--r-m); background: var(--well); }
.ax-bim-inline { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
.ax-bim-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
@media (max-width: 1100px) { .ax-bim-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .ax-bim-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ax-bim-sum .ax-bim-total { margin-left: auto; }
.ax-bim td { vertical-align: top; }
.ax-bim-no { width: 60px; }
.ax-bim-ours { width: 260px; }
.ax-bim-sec > td { background: var(--well); font-weight: var(--fw-bold); }
.ax-bim-off > td { opacity: .55; }
.ax-bim-nobid > td { background: color-mix(in srgb, var(--ink) 3%, transparent); }
.ax-bim-low > td { background: var(--warn-bg); }
.ax-bim-pickrow { display: flex; gap: 4px; align-items: center; margin-bottom: 4px; }
.ax-bim-pickrow .select-wrap { flex: 1 1 auto; min-width: 0; }
.ax-bim-searchrow > td { padding-top: 0 !important; }
.ax-bim-search { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; padding: 0 0 6px 22px; }
.ax-bim-search .input { max-width: 300px; }
.ax-bim-parts { display: grid; gap: 4px; margin-top: 6px; }
.ax-bim-parts > p { margin: 0; }
.ax-bim-part { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
/* the Master Items picker */
.ax-cp-bar { padding: 0; }
.ax-cp-chips, .ax-cp-axes { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ax-cp-axes { flex-direction: column; align-items: stretch; gap: 8px; }
.ax-cp-axis { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ax-cp-axname { font-size: 12px; font-weight: var(--fw-semi); color: var(--muted); min-width: 64px; }
.ax-cp-chip .i { margin-left: -2px; }
.ax-cp-crumb em { font-style: normal; font-weight: var(--fw-med); opacity: .8; margin-left: 4px; }
.ax-cp-range { display: flex; flex: 1 1 100%; flex-wrap: wrap; align-items: center; gap: 6px; }
.ax-cp-results { max-height: 340px; overflow: auto; border-radius: var(--r-m); box-shadow: inset 0 0 0 1px var(--hair); }
.ax-cp-addcol { width: 340px; }
.ax-cp-adds { display: flex; flex-wrap: wrap; gap: 4px; }
@media (max-width: 720px) { .ax-cp-addcol { width: auto; } }
/* the manhole schedule */
.ax-ms { gap: 12px; }
.ax-ms-row { display: grid; gap: 10px; }
.ax-ms-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; }
.ax-ms-label { flex: 1 1 260px; max-width: 420px; }
.ax-ms-money { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13px; font-variant-numeric: tabular-nums; }
.ax-ms-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px 10px; }
@media (max-width: 1100px) { .ax-ms-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .ax-ms-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ax-ms-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.ax-ms-acts { margin-left: auto; }
.ax-ms-paste[open] { flex: 1 1 100%; }
.ax-ms-paste > :not(summary) { display: block; margin: 0 14px 10px; }
/* bid templates */
.ax-btq { gap: 12px; }
.ax-btq-list { display: grid; gap: 6px; max-height: 260px; overflow: auto; }
.ax-btq-item { all: unset; box-sizing: border-box; display: grid; gap: 2px; padding: 10px 12px; border-radius: var(--r-m); border: 1px solid var(--hair-2); background: var(--glass-a); cursor: pointer; }
.ax-btq-item:hover { border-color: var(--ink); }
.ax-btq-item.on { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.ax-btq-item:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.ax-btq-name { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.ax-btq-prev { display: grid; gap: 8px; }
.ax-btq-prev > p { margin: 0; }
.ax-btq-tbd > td { color: var(--muted); }
.ax-btqs-lines { list-style: none; margin: 0; padding: 0; display: grid; }
.ax-btqs-lines > li { display: grid; grid-template-columns: minmax(0, 1fr) 96px auto; gap: 8px 12px; align-items: center; padding: 8px 0; border-top: 1px solid var(--hair); }
.ax-btqs-name { display: grid; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 640px) { .ax-btqs-lines > li { grid-template-columns: minmax(0, 1fr) 96px; } .ax-btqs-lines .ax-ticks { grid-column: 1 / -1; } }
.ax-bpair.solo { grid-template-columns: minmax(0, 1fr); }

/* ================================================================ the Trophy Room and the Hunt door (3.0 w9apex)
   Moved here from 2.x's styles.css with the screen (it is Apex's alone; styles.css was deleted in w10retire): the lodge is an
   illustration, its brass and walnut its own in light and dark, so the rules come across as they were. What changed is
   only how the scene is driven: the fire's box, the zoom and the hero's fade ride as data (--fx … --hero-o) set by scope.js
   trFireLoop, and every control is wired in code. */

/* ---- Trophy Hunting (My Desk) and the Trophy Room (Apex, 1.21.0) ---------------------------------------
   The room is an illustration, not a themed screen: its brass and walnut are its own and read the same
   in light and dark, so they live as tokens on .tr-room rather than on :root. */
/* Heading, then the Trophy Room door as a banner the full width of the card, then the hunts — also full
   width. A door column beside the hunts squeezed their text (Jordan, 2026-09-23). */
.th-card { padding: 16px 18px; }
.th-head { margin-bottom: 10px; }
.th-list { min-width: 0; }
/* The door into the Trophy Room: door.jpg zoomed to the two oak leaves, firelight breathing at the seam,
   a brass sign above and the three best mounts in brass rings below. It is art, so it keeps its own walnut
   and brass in light and dark alike. */
.th-door { --brass-1: #a8772d; --brass-2: #f1d48a; --brass-3: #b8893b; position: relative; width: 100%; height: clamp(150px, 15vw, 200px); margin-bottom: 4px;
  border-radius: 14px; overflow: hidden; display: block; text-decoration: none; color: #f3e6cf; isolation: isolate;
  box-shadow: 0 10px 26px rgba(20, 12, 6, .35), inset 0 0 0 1px rgba(241, 212, 138, .35); }
.th-door-art { position: absolute; inset: 0; z-index: -2; background: #2a1a0c url('/trophy/door.jpg') 50% 58% / max(150%, 480px) auto no-repeat;
  transition: transform .5s cubic-bezier(.2, .7, .2, 1), filter .5s ease; }
.th-door::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(20, 12, 6, .55) 0%, rgba(20, 12, 6, .05) 38%, rgba(20, 12, 6, .1) 55%, rgba(20, 12, 6, .88) 100%); }
.th-door-seam { position: absolute; left: 50%; top: 22%; bottom: 20%; width: 3px; margin-left: -1.5px; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(255, 176, 80, .95) 30%, rgba(255, 206, 110, 1) 80%, transparent);
  box-shadow: 0 0 14px 4px rgba(255, 140, 50, .55); mix-blend-mode: screen; animation: th-flicker 1.8s ease-in-out infinite; }
@keyframes th-flicker { 0%, 100% { opacity: .55; } 35% { opacity: 1; } 62% { opacity: .7; } }
.th-door-sign { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); padding: 5px 16px 4px; border-radius: 6px; white-space: nowrap;
  font-family: Georgia, 'Times New Roman', serif; font-weight: 700; font-size: 15px; letter-spacing: .08em; text-transform: uppercase; color: #2a1a08; text-align: center;
  background: linear-gradient(135deg, var(--brass-1), var(--brass-2) 48%, var(--brass-3));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), inset 0 -2px 0 rgba(0, 0, 0, .25), 0 6px 14px rgba(0, 0, 0, .55); }
.th-door-sign small { display: block; font-size: 8.5px; letter-spacing: .45em; line-height: 1.1; }
.th-door-foot { position: absolute; left: 12px; right: 12px; bottom: 10px; display: flex; align-items: center; gap: 10px; }
.th-door-mounts { display: flex; flex: 0 0 auto; }
/* Each ring is zoomed onto the animal itself — the mount pictures are mostly wall around a centred head. */
.th-door-mounts i { width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--brass-2); background: #2a1a0c 50% 44% / 190% no-repeat;
  box-shadow: 0 3px 8px rgba(0, 0, 0, .6); }
.th-door-mounts i + i { margin-left: -10px; }
.th-door-count { flex: 1 1 auto; min-width: 0; font-family: Georgia, serif; font-size: 13px; line-height: 1.2; text-shadow: 0 1px 3px #000; }
.th-door-count b { color: var(--brass-2); font-size: 16px; }
.th-door-count i { display: block; font-size: 11.5px; opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.th-door-go { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px; min-height: 32px; padding: 0 12px; border-radius: 999px;
  font-size: 12.5px; font-weight: 700; color: #2a1a08; background: linear-gradient(135deg, var(--brass-1), var(--brass-2) 50%, var(--brass-3));
  box-shadow: 0 3px 8px rgba(0, 0, 0, .5); }
.th-door-go span { font-size: 16px; line-height: 1; transition: transform .25s ease; }
.th-door:hover .th-door-art, .th-door:focus-visible .th-door-art { transform: scale(1.06); filter: brightness(1.1); }
.th-door:hover .th-door-seam { animation-duration: .9s; width: 5px; margin-left: -2.5px; }
.th-door:hover .th-door-go span { transform: translateX(3px); }
.th-door:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .th-door-seam { animation: none; opacity: .8; } .th-door-art { transition: none; } }
.th-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 12px 0; border-top: 1px solid var(--hair-2); }
.th-list > .th-row:first-child { margin-top: 6px; }
.th-main { min-width: 0; }
.th-note { margin-top: 4px; }
.th-date { font-weight: 700; color: var(--accent); margin-right: 4px; }
.th-acts { display: flex; gap: 6px; flex: 0 0 auto; flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 640px) { .th-row { flex-direction: column; } .th-acts { justify-content: flex-start; } }
/* On a phone the touch targets grow. */
@media (max-width: 640px) {
  .th-door-go { min-height: 44px; }
}

/* The Trophy Room takes the whole screen — sidebar, topbar and page chrome all sit underneath it. It is a
   fixed scroller of its own; the painted room is pinned behind and the two walls of trophies scroll past
   the fire. Its palette is the room's, in light and dark alike, so it lives as tokens on .tr-room. */
html.tr-open, html.tr-open body { overflow: hidden; }
.tr-room { --tr-brass-1: #a8772d; --tr-brass-2: #f1d48a; --tr-brass-3: #b8893b; --tr-ink: #2a1a08; --tr-cream: #f3e6cf; --tr-night: #140c06;
  position: fixed; inset: 0; z-index: 1100; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; color: var(--tr-cream); background: var(--tr-night); }
#app > .tr-room { margin: 0; }   /* #app > * spaces page blocks; a fixed room is not one — it would stop 16px short */
.tr-scene { position: fixed; inset: 0; overflow: hidden; background: var(--tr-night); transition: transform 1.4s cubic-bezier(.2, .7, .2, 1), filter 1.4s ease; }
.tr-zoom { position: absolute; inset: 0; background: url('/trophy/room.jpg') center / cover no-repeat; will-change: transform; }
/* Inside the zoom, under the live fire: the shade that keeps the sign readable, deepening (--dim, 0 → 1,
   set on scroll) so the whole wall reads over the close-up — while the flames on the canvas stay bright. */
.tr-zoom::before { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(rgba(20, 12, 6, calc(var(--dim, 0) * .55)), rgba(20, 12, 6, calc(var(--dim, 0) * .55))),
    linear-gradient(180deg, rgba(20, 12, 6, .78) 0%, rgba(20, 12, 6, .3) 30%, rgba(20, 12, 6, .08) 52%, rgba(20, 12, 6, .2) 78%, rgba(20, 12, 6, .7) 100%); }
.tr-scene canvas { position: absolute; pointer-events: none; }
.tr-glow { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen; opacity: .6;
  background: radial-gradient(circle var(--gr, 600px) at var(--gx, 50%) var(--gy, 70%), rgba(255, 150, 60, .34), rgba(255, 120, 40, .1) 45%, transparent 72%); }
.tr-content { position: relative; z-index: 1; padding: 64px 28px 60px; transition: transform 1.4s cubic-bezier(.2, .7, .2, 1), opacity 1s ease; }
.tr-back { position: fixed; top: 8px; left: 12px; z-index: 6; display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px; font-size: 15px;
  background: rgba(20, 12, 6, .6); color: var(--tr-cream); text-decoration: none; font-weight: 600; opacity: .9; text-shadow: 0 1px 4px #000; }
.tr-back:hover { opacity: 1; }
.tr-sound { position: fixed; top: 12px; right: 18px; z-index: 3; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(241, 212, 138, .4);
  background: rgba(20, 12, 6, .6); color: var(--tr-cream); font-size: 18px; cursor: pointer; }
.tr-sound:hover { background: rgba(20, 12, 6, .85); }
.tr-top { text-align: center; }
.tr-sign { display: inline-block; margin: 0 auto 4px; padding: 12px 34px 10px; border-radius: 10px; font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(28px, 5vw, 50px); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--tr-ink);
  background: linear-gradient(135deg, var(--tr-brass-1), var(--tr-brass-2) 45%, var(--tr-brass-3));
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .45), inset 0 -3px 0 rgba(0, 0, 0, .25), 0 10px 28px rgba(0, 0, 0, .55);
  text-shadow: 0 1px 0 rgba(255, 255, 255, .4); }
.tr-sign span { display: block; font-size: .36em; letter-spacing: .5em; }
.tr-owner { font-family: Georgia, serif; font-size: 18px; font-style: italic; margin-bottom: 14px; text-shadow: 0 2px 6px #000; }
.tr-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; max-width: 720px; margin: 0 auto; }
.tr-stats > div { padding: 10px 12px; border-radius: 10px; background: rgba(20, 12, 6, .62); border: 1px solid rgba(241, 212, 138, .35); backdrop-filter: blur(2px); }
.tr-stats b { display: block; font-family: Georgia, serif; font-size: 20px; color: var(--tr-brass-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tr-stats span { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; opacity: .85; }
/* Two walls and the hearth between them: trophy 1 left of the fire, 2 right, 3 left… The gap is as wide as
   the fireplace, so the fire is never hung over. */
.tr-hall { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 34vw) minmax(0, 1fr); gap: 0 18px; margin-top: 30px; }
.tr-wing { display: flex; flex-wrap: wrap; justify-content: center; align-content: flex-start; gap: 30px 22px; }
.tr-hero-phone { display: none; }
/* Act one fills the first screen; the whole wall starts below it. */
.tr-hero { min-height: calc(100vh - 124px); display: flex; flex-direction: column; will-change: opacity; }
.tr-more { align-self: center; margin-top: auto; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; position: sticky; bottom: 12px; z-index: 2; padding: 10px 22px; border-radius: 999px; background: rgba(20, 12, 6, .7);
  border: 1px solid rgba(241, 212, 138, .4); color: var(--tr-cream); font-family: Georgia, serif; text-decoration: none; }
.tr-more span { display: inline-block; animation: tr-nudge 1.8s ease-in-out infinite; }
@keyframes tr-nudge { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } }
.tr-more:hover { background: rgba(20, 12, 6, .9); }
/* Act two: every trophy, six across, over the fire. Rows centre, so a short last row never hangs left. */
.tr-wall { max-width: 1360px; margin: 70px auto 0; }
.tr-wall-head { text-align: center; margin-bottom: 22px; }
.tr-wall-head h2 { margin: 0 0 4px; font-family: Georgia, serif; font-size: 28px; color: var(--tr-brass-2); text-shadow: 0 2px 8px #000; }
.tr-wall-head span { font-size: 13px; opacity: .85; text-shadow: 0 1px 4px #000; }
.tr-grid { --gap: 18px; display: flex; flex-wrap: wrap; justify-content: center; gap: 28px var(--gap); }
.tr-trophy.sm { width: calc((100% - 5 * var(--gap)) / 6); }
.tr-trophy.sm .tr-mount img { width: 150px; height: 150px; }
.tr-trophy.sm .tr-plaque { padding: 8px 15px 9px; }
@media (min-width: 901px) { .tr-trophy.sm .tr-plaque { min-height: 118px; } }
.tr-trophy.sm .tr-plaque b { font-size: 13.5px; }
@media (max-width: 1199px) { .tr-trophy.sm { width: calc((100% - 3 * var(--gap)) / 4); } }
@media (max-width: 899px) { .tr-trophy.sm { width: calc((100% - 2 * var(--gap)) / 3); } }
@media (max-width: 599px) { .tr-grid { --gap: 12px; } .tr-trophy.sm { width: calc((100% - var(--gap)) / 2); } .tr-trophy.sm .tr-mount img { width: 130px; height: 130px; } }
/* ☆ / ★ — the Top 4 tag, on the mount's shoulder. */
.tr-mount { position: relative; }
.tr-star { position: absolute; top: 4px; right: 4px; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid rgba(241, 212, 138, .55); background: rgba(20, 12, 6, .7); color: var(--tr-brass-2); font-size: 18px; line-height: 1; cursor: pointer; }
button.tr-star:hover { background: rgba(20, 12, 6, .92); }
.tr-star.on { background: linear-gradient(135deg, var(--tr-brass-1), var(--tr-brass-2) 50%, var(--tr-brass-3)); color: var(--tr-ink); border-color: transparent; }
@media (max-width: 900px), (pointer: coarse) { .tr-star { width: 44px; height: 44px; } }
.tr-trophy { margin: 0; width: 200px; display: flex; flex-direction: column; align-items: center; gap: 10px; transition: transform .2s ease; }
.tr-trophy:hover { transform: translateY(-4px); }
.tr-mount img { width: 176px; height: 176px; object-fit: cover; display: block; filter: drop-shadow(0 18px 18px rgba(0, 0, 0, .7));
  -webkit-mask-image: radial-gradient(circle at 50% 48%, #000 55%, transparent 71%); mask-image: radial-gradient(circle at 50% 48%, #000 55%, transparent 71%); }
.tr-plaque { position: relative; width: 100%; padding: 9px 16px 10px; border-radius: 6px; text-align: center; color: var(--tr-ink);
  font-family: Georgia, serif; background: linear-gradient(135deg, var(--tr-brass-1), var(--tr-brass-2) 48%, var(--tr-brass-3));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), inset 0 -2px 0 rgba(0, 0, 0, .25), 0 8px 18px rgba(0, 0, 0, .6); }
.tr-plaque::before, .tr-plaque::after { content: ''; position: absolute; top: 50%; width: 6px; height: 6px; border-radius: 50%; margin-top: -3px;
  background: radial-gradient(circle at 35% 35%, #fff6d8, #6e4d18); }
.tr-plaque::before { left: 6px; } .tr-plaque::after { right: 6px; }
.tr-plaque a { color: var(--tr-ink); text-decoration: none; }
.tr-plaque b { display: block; font-size: 14.5px; line-height: 1.25; }
.tr-meta { display: block; font-size: 12px; margin-top: 3px; opacity: .85; }
.tr-why { display: block; font-size: 12.5px; font-style: italic; margin-top: 5px; line-height: 1.35; }
/* Every plaque the same height on a desktop wall, so the rows either side of the fire line up; a long
   title or "why" is clamped, and the full text is on hover. */
.tr-plaque { flex: 1 1 auto; }
@media (min-width: 901px) {
  .tr-plaque { min-height: 146px; }
  .tr-plaque b, .tr-why { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
  .tr-plaque b { -webkit-line-clamp: 2; }
  .tr-why { -webkit-line-clamp: 3; }
}
.tr-empty { text-align: center; font-family: Georgia, serif; font-size: 26px; padding: 40px 10px; text-shadow: 0 2px 8px #000; }
.tr-empty span { display: block; font-size: 15px; font-style: italic; margin-top: 8px; opacity: .9; }
.tr-waiting { max-width: 1180px; margin: 44px auto 0; padding: 14px 18px; border-radius: 12px; background: rgba(20, 12, 6, .8); border: 1px solid rgba(241, 212, 138, .3); }
.tr-waiting h3 { margin: 0 0 8px; font-family: Georgia, serif; color: var(--tr-brass-2); }
.tr-waiting h3 span { font-family: inherit; font-size: 13px; font-weight: 400; color: var(--tr-cream); opacity: .8; }
.tr-wait-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid rgba(241, 212, 138, .18); }

/* The way in: an oak double door in a stone arch (door.jpg). The picture is laid out like background
   "cover" on .tr-stage, so everything on it is placed in the picture's own percentages. Only the two
   leaves swing — the arch, the lanterns and the antler shield are .tr-frame, the same picture with the
   doorway cut out, sitting over them. Knock twice and they open inward as you walk into the room. */
.tr-door { position: fixed; inset: 0; z-index: 5; overflow: hidden; cursor: pointer; outline: none; }
.tr-door.opening { pointer-events: none; }
.tr-stage { position: absolute; left: 50%; top: 50%; width: max(100vw, 176.47vh); height: max(100vh, 56.667vw); transform: translate(-50%, -50%);
  perspective: 2000px; container-type: inline-size; }
.tr-frame { position: absolute; inset: 0; background: url('/trophy/door.jpg') 0 0 / 100% 100% no-repeat; clip-path: polygon(evenodd, 0 0, 100% 0, 100% 100%, 0 100%, 0 0, 26.82% 87.13%, 26.82% 36.76%, 29.17% 31.71%, 32.29% 28.03%, 36.46% 25.28%, 41.67% 23.44%, 45.57% 22.98%, 45.73% 30.33%, 50.00% 36.58%, 54.27% 30.33%, 54.43% 22.98%, 58.33% 23.44%, 63.54% 25.28%, 67.71% 28.03%, 70.83% 31.71%, 73.18% 36.76%, 73.18% 87.13%, 26.82% 87.13%);
  transform-origin: 50% 58%; transition: transform 1.3s cubic-bezier(.5, 0, .3, 1) .45s, opacity .8s ease .9s; }
.tr-leaf { position: absolute; top: 22.06%; height: 65.07%; width: 23.18%; overflow: hidden;
  transition: transform 1.25s cubic-bezier(.55, .05, .3, 1), filter 1.25s ease; }
.tr-leaf > div { position: absolute; top: -33.90%; width: 431.46%; height: 153.67%; background: url('/trophy/door.jpg') 0 0 / 100% 100% no-repeat; }
.tr-leaf.l { left: 26.82%; transform-origin: left center; }
.tr-leaf.l > div { left: -115.73%; }
.tr-leaf.r { left: 50%; transform-origin: right center; }
.tr-leaf.r > div { left: -215.73%; }
.tr-door.opening .tr-leaf.l { transform: rotateY(96deg); filter: brightness(.35); }
.tr-door.opening .tr-leaf.r { transform: rotateY(-96deg); filter: brightness(.35); }
.tr-door.opening .tr-frame { transform: scale(1.7); opacity: 0; }
/* Firelight through the crack between the doors — alive while you wait, flaring as they part. */
.tr-stage::after { content: ''; position: absolute; left: 50%; top: 36.58%; bottom: 12.87%; width: .5%; transform: translateX(-50%); pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(255, 170, 70, .8) 25%, rgba(255, 200, 100, .95) 85%, rgba(255, 150, 60, .5));
  mix-blend-mode: screen; filter: blur(3px); animation: tr-crack 1.7s ease-in-out infinite; }
.tr-door.opening .tr-stage::after { animation: none; opacity: 0; transition: opacity .4s ease; }
@keyframes tr-crack { 0%, 100% { opacity: .45; } 35% { opacity: .9; } 60% { opacity: .6; } }
.tr-door.knock .tr-leaf { animation: tr-knock .32s ease; }
@keyframes tr-knock { 0%, 100% { transform: none; } 20% { transform: translateZ(-8px) rotateY(.8deg); } 45% { transform: none; } 65% { transform: translateZ(-8px) rotateY(-.8deg); } }
/* The name, lettered onto the blank board over the arch. */
.tr-door-sign { position: absolute; left: 50.1%; top: 8.4%; transform: translate(-50%, -50%); width: 14%; text-align: center; pointer-events: none;
  font-family: Georgia, serif; font-weight: 700; font-size: 1.55cqw; line-height: 1.05; letter-spacing: .05em; text-transform: uppercase;
  color: #f1d48a; text-shadow: 0 1px 0 #5a3a10, 0 2px 3px rgba(0, 0, 0, .8); transition: opacity .3s ease; }
.tr-door-sign span { display: block; font-size: .5em; letter-spacing: .45em; }
.tr-door-hint { position: absolute; bottom: 7%; left: 0; right: 0; margin: 0 auto; width: fit-content; max-width: calc(100% - 32px); text-align: center; z-index: 1; padding: 10px 22px; border-radius: 999px; white-space: nowrap;
  background: rgba(20, 12, 6, .8); border: 1px solid rgba(241, 212, 138, .45); color: var(--tr-cream); font-family: Georgia, serif; font-size: 17px;
  box-shadow: 0 6px 22px rgba(0, 0, 0, .6); animation: tr-beckon 2s ease-in-out infinite; }
.tr-door-hint b { color: var(--tr-brass-2); }
@keyframes tr-beckon { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.04); } }
.tr-door.opening .tr-door-sign, .tr-door.opening .tr-door-hint { opacity: 0; transition: opacity .3s ease; }
/* Walking in: the room starts close and dim behind the doors and settles as they open. */
.tr-outside .tr-scene { transform: scale(1.12); filter: brightness(.35); }
.tr-outside .tr-content { transform: scale(1.08); opacity: 0; }
.tr-outside .tr-trophy, .tr-entering .tr-trophy { opacity: 0; }
.tr-outside .tr-sound, .tr-entering .tr-sound { opacity: 0; pointer-events: none; }
.tr-in .tr-trophy { animation: tr-hang .7s cubic-bezier(.3, 1.4, .5, 1) backwards; animation-delay: calc(var(--i, 0) * 90ms); }
@keyframes tr-hang { from { opacity: 0; transform: translateY(-26px) rotate(-3deg); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .tr-in .tr-trophy { animation: none; } .tr-scene, .tr-content { transition: none; } }

/* Laptops and iPad landscape: a narrower hearth gap and smaller mounts, so each wing holds its two Top 4
   side by side and the first screen still fits (the pill on screen from 1000×800 up). */
@media (min-width: 901px) and (max-width: 1439px) {
  .tr-hall { grid-template-columns: minmax(0, 1fr) minmax(220px, 24vw) minmax(0, 1fr); gap: 0 12px; }
  .tr-wing { gap: 24px 14px; }
  .tr-wing .tr-trophy { width: calc((100% - 14px) / 2); max-width: 200px; }
  .tr-wing .tr-mount img { width: 140px; height: 140px; }
  .tr-wing .tr-plaque { padding: 8px 12px 9px; min-height: 150px; }
}
/* iPad portrait: the Top 4 in one row of four; phones: a true 2×2. Never 3 + 1. */
@media (max-width: 900px) {
  .tr-hall { display: block; }
  .tr-wing, .tr-hearth-gap { display: none; }
  .tr-hero-phone { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px 12px; }
  .tr-hero-phone .tr-trophy { width: auto; }
  .tr-hero-phone .tr-mount img { width: min(146px, 100%); height: auto; aspect-ratio: 1; }
  .tr-mount { align-self: stretch; display: flex; justify-content: center; }
  .tr-star { top: -4px; right: -2px; }
}
@media (max-width: 640px) {
  .tr-content { padding: 60px 14px 36px; }
  .tr-hero-phone { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tr-hero-phone .tr-mount img { width: min(120px, 100%); }
  .tr-hero-phone .tr-why { display: none; }            /* the wall below shows it */
  .tr-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .tr-stats > div { padding: 8px 6px; }
  .tr-stats b { font-size: 15px; }
  .tr-stats span { font-size: 10px; letter-spacing: .04em; }
  .tr-sign { padding: 10px 16px 8px; }
  .tr-owner { margin-bottom: 10px; }
  .tr-trophy { width: 160px; }
  .tr-mount img { width: 146px; height: 146px; }
  .tr-wait-row { flex-direction: column; align-items: flex-start; }
  .tr-door-hint { font-size: 15px; white-space: normal; border-radius: 22px; line-height: 1.35; padding: 10px 18px; text-wrap: balance; }
  .tr-back { top: 4px; padding: 0 12px; font-size: 14px; }   /* a pill that wraps is a rounded box, not a lozenge (w29d 365/366) */
}
/* Hunt outcomes and the lost-hunt ledger in the Trophy Room. */
.tr-hunt-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 8px; }
.tr-hunt-actions select, .th-acts select { max-width: 100%; min-height: 36px; }
.tr-plaque .tr-hunt-actions select { width: 100%; font-size: 12px; }
.tr-loss-reason { white-space: pre-wrap; overflow-wrap: anywhere; margin: 8px 0; }
.tr-lost a { color: var(--tr-brass-2); }
.tr-lost .tr-wait-row > div { min-width: 0; }
.tr-trophy, .tr-plaque, .tr-hunt-actions { min-width: 0; }
.tr-plaque .tr-hunt-actions { max-width: 100%; }
.tr-plaque .tr-hunt-actions select { min-width: 0; }
/* a plaque's status dropdown sits in the kit's .select-wrap, which kept the words' width ("Completed — mounted", ~250px): two
   plaques across a phone are ~168px, so it ran 85px past the room's edge and was cut off (overflow-x: hidden; W15B-M2) */
.tr-plaque .tr-hunt-actions .select-wrap { flex: 1 1 100%; min-width: 0; max-width: 100%; }
html.tr-open .modal-back { z-index: 1200; }

.tr-lost-link { display: inline-block; margin-bottom: 14px; color: var(--tr-brass-2); }
.tr-lost { scroll-margin-top: 65px; }
/* the scene's moving parts, as data (trFireLoop) */
.tr-scene canvas#trFire { left: var(--fx, 0px); top: var(--fy, 0px); width: var(--fw, 0px); height: var(--fh, 0px); }
.tr-zoom { transform-origin: var(--zo, 50% 50%); transform: scale(var(--zs, 1)); }
.tr-hero { opacity: var(--hero-o, 1); }
.tr-sound { display: inline-grid; place-items: center; }
.tr-plaque .tr-hunt-actions .btn, .tr-wait-row .btn { height: 32px; }
/* ---- the Customer health card on a customer's page (3.0 w9apex, customer-health.js — its injected <style> retired): the score
   in a ring of its band's colour, the band chip, the trend, and the arithmetic behind it in kit pipes */
.ax-chx { --chx-c: var(--muted); }
.ax-chx.ok { --chx-c: var(--ok); } .ax-chx.info { --chx-c: var(--info); } .ax-chx.warn { --chx-c: var(--warn); } .ax-chx.bad { --chx-c: var(--bad); }
.ax-chx-head { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.ax-chx-dial { width: 64px; height: 64px; flex: none; border-radius: 50%; display: grid; place-items: center; font-size: 24px; font-weight: 800; letter-spacing: -.02em;
  border: 5px solid var(--chx-c); color: var(--chx-c); font-variant-numeric: tabular-nums; }
.ax-chx-dial.none { font-size: 22px; font-weight: var(--fw-bold); }
.ax-chx-main { flex: 1 1 0; min-width: 200px; display: grid; gap: 4px; }
.ax-chx-main p { margin: 0; }
.ax-chx-title { display: flex; align-items: center; gap: 8px 10px; flex-wrap: wrap; }
.ax-chx-title h3 { margin: 0; font-size: var(--fs-l); }
.ax-chx-more { flex: none; }
.ax-chx-trend { font-size: 12.5px; font-weight: var(--fw-bold); white-space: nowrap; color: var(--muted); }
.ax-chx-trend.up { color: var(--ok); } .ax-chx-trend.down { color: var(--bad); }
.ax-chx-foot { display: flex; align-items: center; gap: 8px 14px; flex-wrap: wrap; padding-top: 12px; border-top: 1px solid var(--hair); }
.ax-chx-lab { font-size: 13px; font-weight: var(--fw-semi); color: var(--ink-2); }   /* Payment health, read-only (3.0, B34) */
.ax-chx-pay { font-size: 13.5px; }
.ax-chx-body { display: grid; gap: 4px; }
.ax-chx-body > p { margin: 6px 0 0; }
.ax-chx-part { display: grid; grid-template-columns: 200px minmax(0, 1fr) 76px; gap: 4px 12px; align-items: center; padding: 8px 0; border-top: 1px solid var(--hair); }
.ax-chx-nm { font-weight: var(--fw-semi); font-size: 13px; }
.ax-chx-pts { text-align: right; font-weight: var(--fw-semi); }
.ax-chx-why { grid-column: 1 / -1; margin: 0; }
@media (max-width: 560px) {
  .ax-chx-main { min-width: 0; }
  .ax-chx-more { flex: 1 1 100%; justify-content: center; }
  .ax-chx-part { grid-template-columns: minmax(0, 1fr) 70px; }
  .ax-chx-part .pipe { grid-column: 1 / -1; order: 3; }
  .ax-chx-why { order: 4; }
}
/* My Desk › Sales report › Schedule gaps (3.0 w9apex, gaps-ui.js mountDesk): the kit strip inside its glass panel */
.ax-gapdesk { overflow: hidden; }
.ax-gapdesk-strip { border-top: 1px solid var(--hair); }
.ax-gapdesk-open { display: grid; gap: 8px; }
.ax-gap-up { color: var(--ok); } .ax-gap-down { color: var(--bad); } .ax-gap-flat { color: var(--muted); }

/* ================================================================ the printed proposal (Preview › Print / PDF)
   The paper is print.css's (the 3.0 paper, one look everywhere): these are only the inline looks that were in quoteDoc, tradDoc,
   agstDoc and minimumsDocHTML, and the two rules scope.html's own <style> carried, moved here unchanged. The paper's
   other rules (q-sheet, bid-table, q-lbl …) are print.css's, the documents' own sheet (w9shell). */
.q-terms { padding-left: 20px; }
.q-terms li { margin-bottom: 5px; font-size: 13px; }
.line-excluded td { opacity: .45; text-decoration: line-through; }
.q-lbl.ax-doc-mt6 { margin-top: 6px; }
.q-tbd-note.ax-doc-mt4 { margin-top: 4px; }
.bid-table th.ax-dw-38 { width: 38px; } .bid-table th.ax-dw-56 { width: 56px; } .bid-table th.ax-dw-70 { width: 70px; }
.bid-table th.ax-dw-78 { width: 78px; } .bid-table th.ax-dw-96 { width: 96px; } .bid-table th.ax-dw-104 { width: 104px; }
.bid-table th.ax-dw-110 { width: 110px; } .bid-table th.ax-dw-120 { width: 120px; }
/* touch reach (w15polish K3): a text button ("use it", "Below") is 44 across, and a panel head's "Every open quote →" 44
   tall — their words stay where they are */
@media (max-width: 1180px), (pointer: coarse) {
  .ax-linkbtn, .ax-row > a.hint { position: relative; }
  .ax-linkbtn::after, .ax-row > a.hint::after { content: ""; position: absolute; inset: min(0px, calc(50% - var(--tap) / 2)) min(-4px, calc(50% - var(--tap) / 2)); }
  .ax-sort > button { min-width: var(--tap); justify-content: center; }   /* a heading's sort (its all: unset undoes the kit's th > button): 31 across */
}
/* wave 17: the way from a proposal's Preview to what its branch prints (licences, banner, number) — never printed */
.ax-prophead-src { margin: 6px 0 0; text-align: right; font-size: 12px; }

/* wave 17 (w17apex): touch reach, Apex's own leftovers — measured as an iPhone at 375 and an iPad at 820 (touch), every Apex
   screen. A finger gets 44: the rows these sit in grow to it, nothing overlaps the control beside it. The kit's own kinds
   (the crumb, the head's chips, a source link in a cell, Master Items' size buttons) are the kit's, not here. */
@media (max-width: 1180px), (pointer: coarse) {
  .ax-ov-card { gap: 2px; }
  .ax-ov-card > .ax-row > a.name, .ax-ov-card > div:not(.ax-row) > a { display: inline-flex; align-items: center; min-height: var(--tap); }   /* the quote number and the job: 27 and 24 tall, 6px apart */
  .ax-cal-dh { align-items: center; }
  .ax-cal-dh a { display: inline-flex; align-items: center; min-width: var(--tap); min-height: var(--tap); }   /* a day’s number opens that day: 16 × 28; it stays under its weekday */
  .ax-cal-bid, .ax-cal-more { min-height: var(--tap); align-content: center; }
  .ax-cal-more { display: inline-flex; align-items: center; }
  /* the line's history chip: 19 tall on an iPad. Its tone moves to a short bar so a 44px line does not draw a 44px stripe */
  .ax-hist { position: relative; border-left: 0; padding: 12px 0 12px 9px; line-height: 20px; }
  .ax-hist::before { content: ""; position: absolute; left: 0; top: 12px; width: 2px; height: 20px; background: var(--hair-2); }
  .ax-hist.ok::before { background: var(--ok); } .ax-hist.warn::before { background: var(--warn); } .ax-hist.bad::before { background: var(--bad); }
  .ax-minitems > summary, .ax-fuel-items > summary { min-height: var(--tap); }   /* "every item": 36 */
  .ax-ct-doc { min-height: var(--tap); }   /* a contract's documents, stacked 20px apart */
  .ax-sheetlink { display: inline-flex; align-items: center; min-height: var(--tap); }
  /* the quote head's chips reach 13px past their pill (above): when they wrap under the 44px status, and above the customer
     line's links (which reach 13px up), the rows leave room for both — the chips were 28–30 tall where they met */
  .ax-qtitle { row-gap: 14px; margin-bottom: 16px; }
}
/* wave 18 (w18apex, from w18platform's touch sweep): the BDM desk's names — a follow-up's customer and bid number (20 tall)
   and a call cycle's or a visit's customer (23) — reach 44 on touch from an ::after, so the list keeps its rhythm */
@media (max-width: 1180px), (pointer: coarse) {
  .ax-dk-fu-what > a, .ax-dk-li-name > a.name { position: relative; }
  .ax-dk-fu-what > a::after, .ax-dk-li-name > a.name::after { content: ""; position: absolute;
    inset: min(0px, calc(50% - var(--tap) / 2)) min(-4px, calc(50% - var(--tap) / 2)); }
  /* a call cycle's facts under the name carry a source link ("every 4 weeks"), and the kit's .src reaches 13px up from it:
     the name's reach takes the row's padding above it instead, and the facts step down so the two meet, not overlap
     (measured: "Belt Construction" kept 23 of its 44 where the source link sat under its middle) */
  .ax-dk-list > li > .ax-row > .ax-dk-li-name > a.name::after { top: -20px; }
  .ax-dk-list > li > .ax-row + .hint:has(> .src) { margin-top: 13px; }
}
/* a finger at any width (w22touch, 10/27): the call cycle's "every 2 months" over Log visit and Follow-up (44 tall on touch)
   reached 41 — the buttons step 4px down */
@media (pointer: coarse) { .ax-dk-list > li > .hint:has(> .src) + .ax-actions { margin-top: 6px; } }

/* My Desk › Proposed visits (031, 351, 355): the row's three actions are one block — Log visit across the top, Follow-up and the × side
   by side under it — not a button and two loose words wrapping against each other at 820 */
@media (min-width: 641px) {
  .ax-dk-pv td > .ax-actions.ax-end { display: grid; grid-template-columns: auto auto; justify-content: end; justify-items: stretch; gap: 6px; }
  .ax-dk-pv td > .ax-actions.ax-end > [data-action="visit-log"] { grid-column: 1 / -1; justify-content: center; }
}

/* Jobs › Requests (217): every cell of a request starts at the top of its row, whatever the Project cell's scope notes make of its height */
table.t.ax-reqt > tbody > tr > td { vertical-align: top; }

/* w45-2/3 (W43 design review): Jobs › Requests' actions cell. Its buttons used to sit on one nowrap line (293px, 407px on a
   row already made a call-in), which pushed the table to 1105–1259 wide at 820 and cut "Make it a call-in" and the ✕ off until
   swiped. They now wrap inside the cell, right-aligned, and the table takes the panel's width. A request that is already a
   call-in leads with its chip, then Open the call-in, then the ✕ (it no longer offers Make it a job). */
.ax-reqacts { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px; }

/* w45-15 (W43 design review): on a touch iPad the first column of a list that scrolls sideways sticks (the kit's .tw-scroll), and its
   data cells get a solid face but its head cell did not, so "Asked" sat over "From" with both printed through each other. The
   Requests head takes the same face. (The kit rule is reported for every list; this keeps Requests right until it lands.) */
@media (min-width: 701px) and (max-width: 1180px) and (pointer: coarse) {
  :root .table-wrap.tw-scroll > table.ax-reqt > thead > tr > th:first-child:not([colspan]) { background: var(--surface); }
}

/* w45-2 (continued): with the actions wrapped, Requests' narrowest possible layout is still 823px with a few long names in it, and a
   table wider than its card is given a floor on every column of words (phone-tables.js tableMins, 15em each), which takes it to
   1031 and scrolls it. On the iPad widths the cells close up from 12px to 8px a side (7 columns: 56px), so 786 holds it with the
   buttons on view. (Money › Pay Apps does the same at its own widths, project.css "ig-ipad-tables".) */
@media (min-width: 701px) and (max-width: 1180px) {
  table.t.ax-reqt > :is(thead, tbody) > tr > :is(th, td) { padding-left: 8px; padding-right: 8px; }
}

/* a tablet (701–1180): each row of a PFS step is a small card of six columns — its boxes keep a size you can type in, and the Cost, the
   check and the remove button stay on the page. The headings go (every cell names itself); phones (≤700) get the kit's own cards. */
@media (min-width: 701px) and (max-width: 1180px) {
  table.pfs-edit, table.pfs-edit > tbody { display: block; width: 100%; }
  table.pfs-edit > thead { display: none; }
  table.pfs-edit tr:not(.pfs-total) { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px 12px; align-items: end; padding: 12px 4px; border-bottom: 1px solid var(--hair); }
  table.pfs-edit tr:not(.pfs-total):last-child { border-bottom: 0; }
  table.pfs-edit tr:not(.pfs-total) > td { display: block; padding: 0; border: 0; min-width: 0; text-align: left; }
  table.pfs-edit tr:not(.pfs-total) > td::before { content: attr(data-label); display: block; margin-bottom: 3px; font-size: 11px; font-weight: var(--fw-semi); color: var(--muted); }
  table.pfs-edit tr:not(.pfs-total) > td:not([data-label])::before, table.pfs-edit tr:not(.pfs-total) > td[data-label=""]::before { display: none; }
  table.pfs-edit tr:not(.pfs-total) > td:last-child { justify-self: end; }
  table.pfs-edit tr:not(.pfs-total) > td .input.n { max-width: none; }
  table.pfs-edit tr.pfs-total { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px 20px; padding: 10px 12px; }
  table.pfs-edit tr.pfs-total > td { display: block; padding: 0; border: 0; background: none; width: auto; }
  table.pfs-edit tr.pfs-total > td:empty { display: none; }
  .pfs-rev td[data-label="Pay item"] { grid-column: span 3; }
  .pfs-rev td[data-label="Done by"] { grid-column: span 2; }
  .pfs-lab td[data-label="Crew"], .pfs-lab td[data-label="Role"] { grid-column: span 2; }
  .pfs-jc td[data-label="Category"], .pfs-jc td[data-label="What"], .pfs-jc td[data-label="Vendor"], .pfs-jc td[data-label="Check"] { grid-column: span 2; }
  .pfs-eq td[data-label="Asset"], .pfs-eq td[data-label="Check"] { grid-column: span 2; }
  table.pfs-edit tr > td.pfs-md, table.pfs-edit tr > th.pfs-md { display: none; }
  table.pfs-edit tr:not(.pfs-total) > td:has(> .btn.icon)::before { display: none; }
  table.pfs-edit tr > td.pfs-na { display: none; }
  .pfs-edit td .hint { display: none; }
  .pfs-edit td.empty { grid-column: 1 / -1; }
  /* (11/4 review) October Labor: the classification takes two columns so a row is 2+1+1+1+1 = all six; its ST and OT are inputs and stay */
  .pfs-lab td[data-label="Job classification"] { grid-column: span 2; }
  /* October Job Costs › Cost categories: the category (with its Add a cost button) has the row to itself, the five figures share the next */
  table.pfs-edit.pfs-cat tr:not(.pfs-total) { grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: start; }
  table.pfs-edit.pfs-cat tr:not(.pfs-total) > td[data-label="Category"] { grid-column: 1 / -1; }   /* scoped to the October table: the 10.29 "every category" table is a real table */
  table.pfs-edit.pfs-cat tr:not(.pfs-total) > td:last-child { justify-self: stretch; }
  /* Pay items: the remove button ends the row; Total starts level with its neighbours */
  .pfs-rev td:last-child { grid-column: -2 / -1; }
  .pfs-rev td[data-label="Total"], .pfs-rev td[data-label="Check"] { align-self: start; }   /* 10.29 puts Check beside Total: both start level */
  table.pfs-edit.pfs-lab tr:not(.pfs-total) > td[data-label="Job classification"] { align-self: start; display: grid; grid-template-rows: auto var(--tap); align-items: center; }
  table.pfs-edit.pfs-cat tr:not(.pfs-total) > td:not([data-label="Category"]):not([data-label="Your %"]) { display: grid; grid-template-rows: auto var(--tap); align-items: center; }   /* plain figures centred on the "Your %" box beside them */   /* its label level with the inputs' labels, the name centred on them */
}

/* w51b: the customer's MSA rates beside the quote (read-only; collapsed unless the quote prices something on the sheet) */
.ax-msa summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; cursor: pointer; }
.ax-msa[open] > summary { margin-bottom: 8px; }

/* ---- two columns that always end level (Jordan, 11/3, w55): My Desk and a contract's page use the job page's pattern, so they follow
   its rule: each column is a flex stack and its LAST card takes whatever height is left, so the shorter column reaches the row's bottom
   and nothing floats under it. Where the side column is itself two cards across (1180 and under), the pair ends level too. */
@media (min-width: 1181px) {
  .ax-dk-grid, .ax-ct-grid { align-items: stretch; }
  .ax-dk-main, .ax-dk-side, .ax-ct-main, .ax-ct-side { display: flex; flex-direction: column; }
  .ax-dk-main > :last-child, .ax-dk-side > :last-child, .ax-ct-main > :last-child, .ax-ct-side > :last-child { flex: 1 1 auto; }
}
@media (max-width: 1180px) { .ax-dk-side { align-items: stretch; } }

/* The Bid type box on the PFS (w60b): where each automatic pick came from, one line per type, the items beside it. */
.pfs-wt-src { list-style: none; margin: 4px 0 2px; padding: 0; display: grid; gap: 4px; }
.pfs-wt-src li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
/* the quote's bid type chips are buttons that open the items behind them (w60b): a chip's look, not the browser's button border */
/* the quote's bid types sit on their own line under the meta row, so they never push the title row onto two lines (11/4) */
.ax-qbids { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: -2px; font-size: 13px; color: var(--ink-2); }
.ax-qbids-label { margin-right: 2px; }
@media (pointer: coarse) { .ax-qbids { margin-top: calc(var(--tap) - 19px - 6px); } }   /* the same step as the people row's lines on touch (11/4 review) */
/* the PFS's Bid type chips on a phone: two by two, never one left alone on its row (11/4 review) */
@media (max-width: 700px) {
  .pfs-wt .ax-chipset { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pfs-wt .ax-chipset > .chip { justify-content: center; text-align: center; white-space: normal; }
}
/* a service line's lone remove button keeps its size on a phone instead of stretching across the card (11/4 review) */
.pfs-card > .ax-row > .ax-actions:has(> .btn.icon:only-child) { width: auto; }
.pfs-card > .ax-row > .ax-actions > .btn.icon { flex: none; }
.pfs-body > .field { margin-bottom: 0; }   /* the Revenue picker keeps the page's 16px rhythm, not the field's own 10px foot on top of it */
.ax-bt-chip { border: 0; cursor: pointer; font: inherit; font-size: 11.5px; font-weight: var(--fw-semi); }
.ax-bt-chip:hover { background: color-mix(in srgb, var(--info) 20%, var(--surface)); }

/* ---- w63a: moving a Traditional line - the grip (drag, arrow keys) and, for a thumb, Up / Down */
.ax-trad-mv { display: flex; width: max-content; align-items: center; gap: 2px; margin: 0 0 4px -4px; }   /* its own line at every width, so the item column has one left edge */
.ax-trad-mv .btn.icon { width: 28px; height: 28px; }
@media (max-width: 1180px), (pointer: coarse) { .ax-trad-mv .btn.icon, .ax-trad .ql-grip { width: var(--tap); height: var(--tap); } }
/* (11/4 review) money boxes on a Traditional line hold a two-decimal figure (1850.00, 129.54) without cutting it off */
.t.ax-trad .input.n:is([aria-label="Rate"], [aria-label="Cost"], [aria-label="Overtime rate"], [aria-label="Premium rate"]) { width: 84px; padding-inline: 8px; }   /* 84, not more: at 1024 touch the table just fits its card */
.ax-trad-cp { white-space: nowrap; }