/* COHERENCE · the outside doors in the Next design (STANDARDS §2, §9, §9.1 — "the vendor and order pages a partner opens on a
   phone"): the subhauler's portal, a customer's or an agency's view of its work, and the sign-in page, in the office's
   premium language — a lit stone-and-sage field, one floating glass bar (the company's name, Español, Sign out), places as a
   pill row, an editorial heading with the accent full stop, figures as glass cards, the work on quiet glass, one graphite
   primary, sheets from the bottom on a phone. Self-contained: Geist from the door's own font allow-list (/lib/fonts/), no new
   external load, no widened surface. EVERY rule is scoped to html.nx-on (the per-browser preview switch, ?next=1). */
@font-face { font-family: "Geist"; src: url("/lib/fonts/geist-variable.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("/lib/fonts/geist-mono-variable.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

html.nx-on {
  --px-f: "Geist", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif; --px-fm: "Geist Mono", ui-monospace, Menlo, monospace;
  --px-acc: var(--k-signal, var(--k-brand, #81e59d)); --px-sage: color-mix(in srgb, var(--px-acc) 38%, #c3d3ca); --px-sage-d: color-mix(in srgb, var(--px-acc) 30%, #33463c);
  --px-bg: #e3e8e5; --px-ink: #18201d; --px-ink2: #3c4742; --px-sub: #5f6c66; --px-line: rgba(24, 40, 32, .09); --px-wash: rgba(24, 40, 32, .04);
  --px-glass: rgba(255, 255, 255, .55); --px-glass-hi: rgba(255, 255, 255, .84); --px-solid: rgba(246, 248, 247, .98); --px-edge: rgba(255, 255, 255, .9);
  --px-gr: #1e2425; --px-gr2: #273031; --px-on-gr: #eef2ef; --px-on-gr2: #93a19b;
  --px-ok: #3f8a58; --px-warn: #9a6a14; --px-bad: #b8492f;
  --px-shg: inset 0 1px 0 var(--px-edge), inset 0 0 0 1px rgba(255, 255, 255, .55), 0 1px 1px rgba(20, 36, 28, .03), 0 20px 44px -28px rgba(20, 40, 30, .34);
  --px-ease: cubic-bezier(.22, .8, .24, 1);
  /* the door's own tokens, re-pointed (statuses keep their meaning; the company accent stays the company's) */
  --k-paper: var(--px-bg); --k-surface: var(--px-glass-hi); --k-surface-hi: rgba(255, 255, 255, .7); --k-sunk: rgba(24, 40, 32, .05); --k-ink: var(--px-ink); --k-ink-2: var(--px-ink2); --k-sub: var(--px-sub); --k-line: rgba(24, 40, 32, .12); --k-line-2: var(--px-line);
  --k-ok: var(--px-ok); --k-warn: var(--px-warn); --k-bad: var(--px-bad);
  --ui: var(--px-f); --disp: var(--px-f); --mono: var(--px-f); --brandf: var(--px-f);
  --dxk-ink: var(--px-ink); --dxk-ink-2: var(--px-ink2); --dxk-line: rgba(24, 40, 32, .1); --dxk-ok: var(--px-ok);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) { html.nx-on:not([data-theme="light"]) {
  --px-bg: #0b0e0d; --px-ink: #eef2ef; --px-ink2: #c3cdc8; --px-sub: #93a19b; --px-line: rgba(255, 255, 255, .08); --px-wash: rgba(255, 255, 255, .045);
  --px-glass: rgba(30, 37, 35, .58); --px-glass-hi: rgba(40, 48, 45, .86); --px-solid: rgba(22, 28, 26, .98); --px-edge: rgba(255, 255, 255, .09);
  --px-gr: #eef2ef; --px-gr2: #dce4df; --px-on-gr: #0e1211; --px-on-gr2: #3c4742;
  --px-sage: color-mix(in srgb, var(--px-acc) 26%, #25302b); --px-sage-d: color-mix(in srgb, var(--px-acc) 22%, #18201d);
  --px-ok: #6fc28d; --px-warn: #dcaa4a; --px-bad: #e27a5f;
  --px-shg: inset 0 1px 0 rgba(255, 255, 255, .085), inset 0 0 0 1px rgba(255, 255, 255, .035), 0 1px 0 rgba(0, 0, 0, .45), 0 26px 52px -26px rgba(0, 0, 0, .8);
  --k-surface-hi: rgba(255, 255, 255, .06); --k-sunk: rgba(255, 255, 255, .04); --k-line: rgba(255, 255, 255, .12);
  --dxk-line: rgba(255, 255, 255, .1); color-scheme: dark; } }

/* the field: light from the upper left, sage from the right */
html.nx-on { min-height: 100%; } html.nx-on body { background: transparent !important; }
html.nx-on { background: radial-gradient(55% 45% at 8% 0%, rgba(255, 255, 255, .85), transparent 70%), radial-gradient(50% 55% at 92% 14%, color-mix(in srgb, var(--px-sage) 70%, transparent), transparent 72%), linear-gradient(180deg, #e6ebe8, var(--px-bg) 60%) !important; }
@media (prefers-color-scheme: dark) { html.nx-on:not([data-theme="light"]) { background: radial-gradient(60% 45% at 6% 0%, rgba(255, 255, 255, .05), transparent 70%), radial-gradient(50% 55% at 94% 14%, color-mix(in srgb, var(--px-acc) 12%, transparent), transparent 72%), linear-gradient(180deg, #101513, var(--px-bg) 60%) !important; } }
html.nx-on body { font: 400 14.5px/1.5 var(--px-f) !important; color: var(--px-ink); -webkit-font-smoothing: antialiased; }

/* one floating glass bar */
html.nx-on body > header.top { position: sticky; top: 10px; z-index: 40; margin: 12px 16px 0; padding: 10px 10px 10px 20px !important; min-height: 64px; border: 0 !important; border-radius: 24px; background: var(--px-glass); backdrop-filter: blur(22px) saturate(1.35); -webkit-backdrop-filter: blur(22px) saturate(1.35); box-shadow: var(--px-shg); }
html.nx-on body > header.top .word { font: 650 13px/1.1 var(--px-f) !important; letter-spacing: .14em !important; color: var(--px-ink) !important; }
html.nx-on body > header.top .word small { font: 500 10.5px/1.3 var(--px-fm) !important; letter-spacing: .12em !important; color: var(--px-sub) !important; margin-top: 4px !important; }
html.nx-on body > header.top .who { color: var(--px-sub); font: 500 12.5px var(--px-f); }
html.nx-on body > header.top :is(button, select) { min-height: 44px !important; padding: 0 16px !important; border-radius: 999px !important; border: 0 !important; background: var(--px-glass-hi) !important; box-shadow: inset 0 0 0 1px var(--px-line) !important; color: var(--px-ink) !important; font: 500 13px var(--px-f) !important; }
/* places: a pill row */
html.nx-on body > nav.places { margin: 12px 16px 0; padding: 4px !important; gap: 2px !important; border: 0 !important; border-radius: 999px; background: var(--px-glass); backdrop-filter: blur(16px); box-shadow: var(--px-shg); width: max-content; max-width: calc(100% - 32px); }
html.nx-on body > nav.places a { min-height: 40px; display: inline-flex; align-items: center; padding: 0 16px !important; border: 0 !important; border-radius: 999px; font: 500 13.5px var(--px-f) !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--px-ink2) !important; }
html.nx-on body > nav.places a:hover { background: var(--px-wash); }
html.nx-on body > nav.places a.on { background: var(--px-ink); color: var(--px-bg) !important; }
html.nx-on #test.banner, html.nx-on body > .banner { margin: 10px 20px 0 !important; padding: 0 !important; border: 0 !important; background: none !important; font: 500 12px var(--px-f); color: var(--px-sub) !important; }

/* the stage: kicker · heading with the accent full stop · one line */
html.nx-on .stage, html.nx-on main.narrow { padding-top: 34px !important; }
html.nx-on .eyebrow, html.nx-on .r10-head .eyebrow { font: 500 11px/1.4 var(--px-fm) !important; letter-spacing: .16em !important; color: var(--px-sub) !important; display: flex; align-items: center; gap: 10px; }
html.nx-on .eyebrow::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--px-acc); box-shadow: 0 0 0 3px color-mix(in srgb, var(--px-acc) 25%, transparent); }
html.nx-on :is(h1, .r10-h1) { font: 400 clamp(40px, 4.4vw, 64px)/1.02 var(--px-f) !important; letter-spacing: -.045em !important; color: var(--px-ink) !important; text-wrap: balance; }
html.nx-on :is(h1, .r10-h1) em { font-style: normal !important; color: inherit !important; }
html.nx-on .px-stop { color: var(--px-ok); }
html.nx-on h2 { font: 450 20px/1.2 var(--px-f) !important; letter-spacing: -.02em !important; color: var(--px-ink); }
html.nx-on :is(.sub, .r10-one, .r10-lede) { font: 400 16px/1.5 var(--px-f) !important; color: var(--px-ink2) !important; }
html.nx-on .help, html.nx-on .quiet { color: var(--px-sub) !important; }
html.nx-on .mono, html.nx-on .num { font-family: var(--px-f) !important; font-variant-numeric: tabular-nums; }

/* figures as glass cards */
html.nx-on .r10-sums { gap: 12px !important; border: 0 !important; padding: 0 !important; margin-top: 26px !important; background: none !important; box-shadow: none !important; backdrop-filter: none !important; border-radius: 0 !important; }
html.nx-on .r10-sums .fig, html.nx-on .figures .fig { padding: 18px 18px 16px; border-radius: 24px; background: var(--px-glass); backdrop-filter: blur(22px) saturate(1.35); box-shadow: var(--px-shg); display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 12px; min-height: 120px; }
html.nx-on :is(.r10-sums, .figures) .fig .n { font: 300 44px/1 var(--px-f) !important; letter-spacing: -.04em !important; color: var(--px-ink) !important; margin-top: auto; }
html.nx-on :is(.r10-sums, .figures) .fig .l { font: 500 13px/1.35 var(--px-f) !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--px-ink2) !important; margin: 0 !important; }
html.nx-on .r10-sums .fig.warn .l::before, html.nx-on .r10-sums .fig.bad .l::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--px-warn); margin-right: 8px; vertical-align: 1px; }
html.nx-on .r10-sums .fig.bad .l::before { background: var(--px-bad); }
html.nx-on .r10-sums .fig.warn .n, html.nx-on .r10-sums .fig.bad .n { color: var(--px-ink) !important; }

/* the work on quiet glass */
html.nx-on :is(.card, .dx-todo, .v10-card, .r10-panel > section) { background: var(--px-glass) !important; backdrop-filter: blur(22px) saturate(1.35); border: 0 !important; border-radius: 26px !important; box-shadow: var(--px-shg) !important; padding: 20px 22px !important; }
html.nx-on .card .hd h2, html.nx-on .todo h2.job { font: 500 10.5px/1.3 var(--px-fm) !important; letter-spacing: .14em !important; text-transform: uppercase; color: var(--px-sub) !important; }
html.nx-on .todo { margin-top: 26px; } html.nx-on .todo h2.job { margin: 26px 0 8px !important; }
html.nx-on :is(.item, .req, .stmt .line, table td, table th, .r10-panel .row) { border-color: var(--px-line) !important; }
html.nx-on .item { padding: 14px 4px !important; } html.nx-on .item .t { font-weight: 550 !important; letter-spacing: -.01em; }
html.nx-on .item .reason { border-left-color: var(--px-warn) !important; color: var(--px-warn) !important; }
html.nx-on table th { font: 500 10.5px var(--px-fm) !important; letter-spacing: .12em !important; color: var(--px-sub) !important; }
html.nx-on .st { border-radius: 999px !important; padding: 3px 9px !important; font: 600 11.5px var(--px-f) !important; }
html.nx-on .st.bad { color: var(--px-warn) !important; background: color-mix(in srgb, var(--px-warn) 12%, transparent) !important; }   /* "needed" is waiting work, not an error: warm, never red (audit: repeated red "needed") */
html.nx-on .r10-strip { border-radius: 18px !important; background: color-mix(in srgb, var(--px-warn) 11%, var(--px-glass)) !important; padding: 14px 16px !important; }
html.nx-on .r10-tabs { border: 0 !important; gap: 2px !important; padding: 4px; border-radius: 999px; background: var(--px-glass); box-shadow: var(--px-shg); width: max-content; max-width: 100%; flex-wrap: nowrap !important; overflow-x: auto; scrollbar-width: none; }
html.nx-on .r10-tabs button { border: 0 !important; border-radius: 999px !important; padding: 0 16px !important; min-height: 40px !important; font: 500 13.5px var(--px-f) !important; color: var(--px-ink2) !important; }
html.nx-on .r10-tabs button[aria-selected="true"] { background: var(--px-ink) !important; color: var(--px-bg) !important; }
html.nx-on .r10-tabs .c { font-family: var(--px-f) !important; }

/* the to-do drawn: ring and sheets in the language (the type of the drawing follows the page) */
html.nx-on .dxk-ring text { font-family: var(--px-f) !important; font-weight: 300 !important; } html.nx-on .dxk-ring .say { font: 400 24px/1.15 var(--px-f) !important; letter-spacing: -.02em; }
html.nx-on .dx-sheets small { font: 500 10.5px var(--px-fm) !important; letter-spacing: .1em !important; }
html.nx-on .dx-sheets button { border-radius: 18px !important; }
html.nx-on .dx-sheets button:hover { background: var(--px-glass-hi) !important; border-color: transparent !important; }

/* one graphite primary; secondary actions as quiet pills */
html.nx-on :is(button, a.btn).primary, html.nx-on .card button.primary, html.nx-on #side button.primary, html.nx-on .req button.primary, html.nx-on form.inline button.primary, html.nx-on table button.primary { min-height: 46px !important; padding: 0 22px !important; border-radius: 999px !important; border: 0 !important; background: var(--px-gr) !important; color: var(--px-on-gr) !important; font: 600 14px var(--px-f) !important; box-shadow: 0 12px 26px -14px rgba(0, 0, 0, .6) !important; }
html.nx-on :is(button, a.btn):not(.primary):not([role="tab"]):not(.r10-link):not(.linkish) { border-radius: 999px !important; font-family: var(--px-f) !important; }
html.nx-on main :is(button, a.btn):not(.primary):not([role="tab"]):not(.r10-link):not(.linkish):not(.dx-sheets button) { min-height: 40px; padding: 0 16px; background: var(--px-glass-hi); border: 0 !important; box-shadow: inset 0 0 0 1px var(--px-line); color: var(--px-ink); }
html.nx-on .dx-sheets button { background: transparent !important; box-shadow: none !important; min-height: 128px; }
html.nx-on :is(input, select, textarea) { font-family: var(--px-f) !important; border-radius: 14px !important; border: 0 !important; background: var(--px-glass-hi) !important; box-shadow: inset 0 0 0 1px var(--k-line) !important; color: var(--px-ink) !important; min-height: 46px; }
html.nx-on :is(input, select, textarea):focus { box-shadow: inset 0 0 0 1.5px var(--px-ok) !important; outline: none; }
html.nx-on label.f, html.nx-on form.inline label, html.nx-on .sheet label { font: 500 12.5px/1.4 var(--px-f) !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--px-ink2) !important; }

/* sheets: solid, a grab handle on the phone, from the bottom */
html.nx-on .sheet { background: rgba(16, 24, 20, .34) !important; backdrop-filter: blur(6px); }
html.nx-on .sheet > div, html.nx-on .drawer, html.nx-on .dlg { background: var(--px-solid) !important; border: 0 !important; border-radius: 28px !important; box-shadow: inset 0 1px 0 var(--px-edge), 0 40px 100px -30px rgba(10, 24, 18, .55) !important; padding: 22px 22px 20px !important; color: var(--px-ink); }
html.nx-on .sheet h2 { font: 400 26px/1.15 var(--px-f) !important; letter-spacing: -.025em !important; }

/* sign-in */
html.nx-on main.narrow { max-width: 520px; margin: 0 auto; padding: 48px 20px 60px !important; }
html.nx-on main.narrow form { margin-top: 22px; padding: 22px; border-radius: 26px; background: var(--px-glass); backdrop-filter: blur(22px) saturate(1.35); box-shadow: var(--px-shg); display: grid; gap: 14px; }
html.nx-on main.narrow #langBtn { background: var(--px-glass-hi) !important; border: 0 !important; box-shadow: inset 0 0 0 1px var(--px-line) !important; font-family: var(--px-f) !important; }

@media (prefers-reduced-motion: no-preference) { html.nx-on .stage > .col > *, html.nx-on main.narrow > * { animation: px-rise .5s var(--px-ease) backwards; } @keyframes px-rise { from { opacity: 0; transform: translateY(10px); } } }
@media (prefers-reduced-motion: reduce) { html.nx-on * { animation: none !important; transition: none !important; } }

/* the phone (§9.1): one hand, big targets, the next action in the thumb zone, sheets from the bottom */
@media (max-width: 760px) {
  html.nx-on body > header.top { margin: 10px 10px 0; padding: 8px 8px 8px 16px !important; border-radius: 22px; gap: 8px; }
  html.nx-on body > header.top .word { font-size: 12px !important; letter-spacing: .1em !important; }
  html.nx-on body > header.top .word { min-width: 0; flex: 1 1 auto; white-space: normal !important; overflow-wrap: anywhere; line-height: 1.25 !important; } html.nx-on body > header.top .grow { display: none; } html.nx-on body > header.top :is(#langBtn, #lo) { flex: none; padding: 0 13px !important; }   /* V36-ONB: at 390 the company's name wrapped under Español — it now takes the room left and wraps inside it */
  html.nx-on body > nav.places { margin: 10px 10px 0; max-width: calc(100% - 20px); display: flex; flex-wrap: nowrap; overflow-x: auto; }
  html.nx-on body > nav.places a { min-height: 44px; flex: none; }
  html.nx-on .stage { padding: 22px 14px 120px !important; }
  html.nx-on :is(h1, .r10-h1) { font-size: 38px !important; letter-spacing: -.04em !important; }
  html.nx-on .eyebrow { font-size: 10px !important; flex-wrap: wrap; }
  html.nx-on .r10-sums { display: flex !important; overflow-x: auto; scroll-snap-type: x mandatory; margin: 22px -14px 0 !important; padding: 2px 14px 12px !important; scrollbar-width: none; }
  html.nx-on .r10-sums .fig { flex: 0 0 44%; scroll-snap-align: start; min-height: 112px; }
  html.nx-on :is(.card, .dx-todo, .v10-card) { padding: 16px 14px !important; border-radius: 24px !important; }
  html.nx-on main :is(button, a.btn) { min-height: 48px !important; }
  html.nx-on .sheet { align-items: flex-end !important; padding: 0 !important; }
  html.nx-on .sheet > div { width: 100% !important; max-height: 92vh; overflow-y: auto; border-radius: 28px 28px 0 0 !important; padding: 26px 18px calc(20px + env(safe-area-inset-bottom)) !important; position: relative; }
  html.nx-on .sheet > div::before { content: ""; position: absolute; top: 9px; left: 50%; width: 40px; height: 5px; margin-left: -20px; border-radius: 3px; background: var(--k-line); }
}

html.nx-on body > header.top::after { display: none !important; }   /* the company's colour lives in the accent (the kicker's light, the full stop), not a bar */
html.nx-on .eyebrow, html.nx-on .r10-head .eyebrow { display: flex !important; flex-wrap: wrap; column-gap: 10px; row-gap: 2px; }
html.nx-on .drawer { border-radius: 28px 0 0 28px !important; }
html.nx-on .drawer .dh { border-bottom-color: var(--px-line) !important; } html.nx-on .drawer .decision { border-top-color: var(--px-line) !important; }
@media (max-width: 699px) { html.nx-on .drawer { border-radius: 28px 28px 0 0 !important; max-height: 92vh !important; } html.nx-on :is(.act .primary, .pinned, .v10-acts .primary) { min-height: 56px !important; box-shadow: 0 18px 36px -14px rgba(0, 0, 0, .55) !important; } }
/* the trucks: the approved 0.111 drawings at a legible size (STANDARDS §3, decision 69a: ≥ 100 px in a list) */
html.nx-on .dxk-fleet li { min-width: 150px !important; padding: 12px 10px 10px !important; border-radius: 18px !important; background: var(--px-glass-hi); box-shadow: inset 0 0 0 1px var(--px-line) !important; font: 650 12px/1.2 var(--px-f) !important; letter-spacing: .02em !important; color: var(--px-ink) !important; }
html.nx-on .dxk-fleet li .eqart svg { width: 128px !important; }
html.nx-on .dxk-fleet li.mine { box-shadow: inset 0 0 0 2px var(--px-ok) !important; }
html.nx-on .dxk-fleet li.taken { background: var(--px-wash) !important; }
html.nx-on main.narrow { background: none !important; box-shadow: none !important; border: 0 !important; }

/* Shared viewer hidden panes must stay hidden despite the portal’s section layout rules. */
html.nx-on .tk-viewer [hidden], html.nx-on .tk-layer [hidden] { display: none !important; }

/* v3.6 V36-PORT2 (text-wall rows 45–47) — the customer portal draws the office's own components: the Dispatch calendar
   (calendar-a.css + dl-calendar.css, loaded by TCCKit.calendar), the drawer ladder (nx-workspace.css .tw-ladder, scoped to .px-tw)
   and Today's date bar and timeline (nx.css .pm-period, .pm-tl2). Those sheets read the office tokens; here the office token names
   point at the portal's OWN tokens above (the same values, light and dark) — no new colour, no new surface. */
html.nx-on :is(.px-tw, .px-cal, .px-calday, .px-periods) {
  --pm-f: var(--px-f); --pm-fd: var(--px-f); --pm-fm: var(--px-fm); --pm-ink: var(--px-ink); --pm-ink2: var(--px-ink2); --pm-sub: var(--px-sub);
  --pm-line: var(--px-line); --pm-wash: var(--px-wash); --pm-glass: var(--px-glass); --pm-glass-hi: var(--px-glass-hi); --pm-solid: var(--px-solid); --pm-solid-2: var(--px-solid);
  --pm-edge: var(--px-edge); --pm-ok: var(--px-ok); --pm-warn: var(--px-warn); --pm-bad: var(--px-bad); --pm-bad-s: color-mix(in srgb, var(--px-bad) 12%, transparent);
  --pm-acc: var(--px-acc); --pm-sage: var(--px-sage); --pm-ease: var(--px-ease); --pm-shg: var(--px-shg);
  --monof: var(--px-f); --dl-ui: var(--px-f); --dl-mono: var(--px-f); --dl-r-lg: 22px; --k-slate: var(--px-sub); --k-signal: var(--px-acc);
}
/* the Dispatch week on the job's Days: the board's day heads on the lane's own glass (no second card), hairlines between days,
   today ringed as on /calendar, the picked day the phone strip's mark; the week's arrows as the board's tools */
html.nx-on .px-cal .cal-a { max-width: none; }
html.nx-on .px-cal .cal-tabs.px-calnav { border-bottom: 0; margin: 0 0 10px; gap: 6px 14px; }
html.nx-on .px-cal .px-calnav .rng { font: 500 15px var(--px-f); color: var(--px-ink); padding: 0; }
html.nx-on .px-cal .px-calnav .px-calw { font: 400 13px var(--px-f); color: var(--px-sub); }
html.nx-on .px-cal .px-calnav .tools button { min-height: 40px !important; min-width: 40px; padding: 0 14px !important; justify-content: center; }
html.nx-on .px-cal .px-calnav .tools button[disabled] { opacity: .45; cursor: default; }
html.nx-on .px-cal .cal-a.tk-cal .cal-board { border: 0; border-radius: 18px; overflow: hidden; background: var(--px-wash); box-shadow: inset 0 0 0 1px var(--px-line); }
html.nx-on .px-cal .cal-a.tk-cal .cb-day { background: transparent; border-bottom: 0; border-left: 1px solid var(--px-line); padding: 12px 10px 12px; min-height: 104px; }
html.nx-on .px-cal .cal-a.tk-cal .cb-day:first-child { border-left: 0; }
html.nx-on .px-cal .cal-a.tk-cal .cb-day:hover { background: var(--px-glass-hi); }
html.nx-on .px-cal .cal-a.tk-cal .cb-day .dlb { font: 500 11px/1.2 var(--px-fm); letter-spacing: .12em; color: var(--px-sub); }
html.nx-on .px-cal .cal-a.tk-cal .cb-day .dfig b { font: 300 30px/1 var(--px-f); letter-spacing: -.03em; color: var(--px-ink); }
html.nx-on .px-cal .cal-a.tk-cal .cb-day .dfig b.none { color: var(--px-sub); }
html.nx-on .px-cal .cal-a.tk-cal :is(.cb-day .dfig span, .cb-day .dst) { color: var(--px-ink2); }
html.nx-on .px-cal .cal-a.tk-cal .cb-day.today { background: color-mix(in srgb, var(--px-sub) 8%, transparent); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--px-sub) 40%, transparent); }
html.nx-on .px-cal .cal-a.tk-cal .cb-day.today .dlb { color: var(--px-ink); font-weight: 600; }
html.nx-on .px-cal .cal-a.tk-cal :is(.cb-day, .sd).tk-sel { background: var(--px-glass-hi); box-shadow: inset 0 -2px 0 var(--px-acc), inset 0 0 0 1px var(--px-line); }
html.nx-on .px-cal .cal-a.tk-cal :is(.cb-day, .sd).past { opacity: 1; } html.nx-on .px-cal .cal-a.tk-cal :is(.cb-day, .sd).past :is(.dfig b, b) { color: var(--px-ink2); }   /* a past day is quieter by its figure, never by fading its words under AA */
html.nx-on .px-cal .cal-a.tk-cal .cbar { height: 6px; background: var(--px-line); }
html.nx-on .px-cal .cal-a.tk-cal .cbar .s-ours { background: var(--px-ink2); } html.nx-on .px-cal .cal-a.tk-cal .cbar .s-ven { background: var(--px-ok); } html.nx-on .px-cal .cal-a.tk-cal .cbar .s-ask { box-shadow: inset 0 0 0 1px var(--px-sub); }
html.nx-on .px-cal .cal-a.tk-cal .cal-strip { gap: 4px; padding: 6px; border-radius: 18px; background: var(--px-wash); box-shadow: inset 0 0 0 1px var(--px-line); }
html.nx-on .px-cal .cal-a.tk-cal .sd { min-height: 76px; border-radius: 12px; }
html.nx-on .px-cal .cal-a.tk-cal .sd :is(.w, small) { color: var(--px-sub); } html.nx-on .px-cal .cal-a.tk-cal .sd b { font: 300 22px/1 var(--px-f); color: var(--px-ink); } html.nx-on .px-cal .cal-a.tk-cal .sd .n { color: var(--px-ink2); font-family: var(--px-f); }
/* the picked day: the board's haul lines (.ln) as quiet glass rows; a truck's unit as the plate */
html.nx-on .px-calday { margin-top: 14px; }
html.nx-on .px-calday .px-calh { margin: 0 0 8px; font: 400 15px var(--px-f); color: var(--px-ink); }
html.nx-on .px-calday .px-lns { display: grid; gap: 8px; }
html.nx-on .px-calday .ln { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px 14px; padding: 12px 14px; border-radius: 16px; background: var(--px-glass-hi); box-shadow: inset 0 0 0 1px var(--px-line); }
html.nx-on .px-calday .ln.draft { background: transparent; box-shadow: inset 0 0 0 1px var(--px-line); }
html.nx-on .px-calday .ln .lm { display: grid !important; grid-template-columns: auto minmax(0, 1fr); gap: 2px 14px; align-items: baseline; min-height: 44px; align-content: center; }
html.nx-on .px-calday .ln button.lm { width: 100%; border-radius: 10px; }
html.nx-on .px-calday .ln button.lm:focus-visible { outline: 2px solid var(--k-focus); outline-offset: 4px; }
html.nx-on .px-calday .ln .lm .t { font: 500 14px var(--px-f); color: var(--px-ink); font-variant-numeric: tabular-nums; }
html.nx-on .px-calday .ln .lm .q { font: 500 14px var(--px-f); color: var(--px-ink); }
html.nx-on .px-calday .ln .lm .cm { grid-column: 1 / -1; font: 400 13px/1.4 var(--px-f); color: var(--px-ink2); }
html.nx-on .px-calday .ln .lf { display: flex; align-items: center; gap: 10px; }
html.nx-on .px-calday .px-open { font: 500 13px var(--px-f); color: var(--px-ink2); }
html.nx-on :is(.px-calday, .drawer) .px-plate { display: inline-block; font: 600 12px/1 var(--px-f); font-variant-numeric: tabular-nums; padding: 4px 8px; border-radius: 7px; background: var(--px-gr); color: var(--px-on-gr); }
html.nx-on .drawer .px-dayweek { margin: 2px 0 6px; }
html.nx-on .drawer .px-dayweek .cal-a.tk-cal .cb-day { min-height: 92px; padding: 10px 6px; } html.nx-on .drawer .px-dayweek .cal-a.tk-cal .cb-day .dfig b { font-size: 24px; } html.nx-on .drawer .px-dayweek .cal-a.tk-cal .cb-day .dfig span { display: none; }
/* the item drawer: the ladder's quiet line under each step; the versions on one scale; the timeline on the drawer's surface */
html.nx-on .px-tw .tw-ladder.px-ladder { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin: 4px 0 0; }
html.nx-on .px-tw .tw-st .tw-fine { margin: 2px 0 0; font-size: 12px; overflow-wrap: anywhere; }
html.nx-on .px-periods { display: grid; gap: 10px; }
html.nx-on .px-periods .px-pvh { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font: 400 13px var(--px-f); }
html.nx-on .px-periods .px-pvh b { font-weight: 550; color: var(--px-ink); }
html.nx-on .px-tw .pm-tl2 time { font-size: 11.5px; } html.nx-on .px-tw .pm-tl2 b { font-weight: 500; color: var(--px-ink); } html.nx-on .px-tw .pm-tl2 small { font-size: 12.5px; color: var(--px-ink2); }
/* Material you bought: the lines and the tickets as kit evidence tiles in the lane */
@media (max-width: 760px) {
  html.nx-on .px-calday .ln { grid-template-columns: minmax(0, 1fr); }
  html.nx-on .px-tw .tw-ladder.px-ladder { grid-template-columns: 1fr 1fr; }
}
/* V36-PORT2 · graphite parity for the outside job views (GC, broker, agency, customer): the DAYLIGHT drawings (outside.html dx:jobs —
   the job tiles and "Days on this job") were drawn as bordered boxes on --k-surface; in the Next design they sit on the portal's
   own glass like every other card, the day columns are plain marks (never pill buttons), and a count inside the selected tab reads
   in the tab's own ink */
html.nx-on :is(.dxj-days, .dxj-tile) { background: var(--px-glass) !important; backdrop-filter: blur(22px) saturate(1.35); -webkit-backdrop-filter: blur(22px) saturate(1.35); border: 0 !important; border-radius: 26px !important; box-shadow: var(--px-shg) !important; }
html.nx-on .dxj-tile:hover { background: var(--px-glass-hi) !important; }
html.nx-on .dxj-tile b { font: 550 18px/1.2 var(--px-f) !important; letter-spacing: -.012em; } html.nx-on .dxj-tile .num { font: 500 12px var(--px-f) !important; color: var(--px-sub) !important; }
html.nx-on .dxj-tile .site { background: var(--px-gr) !important; color: var(--px-on-gr) !important; border-radius: 16px; }
html.nx-on .dxj-tile .meta { color: var(--px-ink2) !important; }
html.nx-on .dxj-m { background: var(--px-wash) !important; color: var(--px-ink2) !important; font-family: var(--px-f) !important; }
html.nx-on .dxj-m.bad { background: color-mix(in srgb, var(--px-bad) 12%, transparent) !important; color: var(--px-bad) !important; }
html.nx-on .dxj-days .dxk-over { font-family: var(--px-fm) !important; color: var(--px-sub) !important; }
html.nx-on main .dxj-cols button { background: none !important; box-shadow: none !important; border-radius: 12px !important; padding: 0 !important; min-height: 44px !important; color: var(--px-ink) !important; }
html.nx-on main .dxj-cols button:hover { background: var(--px-wash) !important; } html.nx-on main .dxj-cols button:focus-visible { outline: 2px solid var(--k-focus); outline-offset: 2px; }
html.nx-on .dxj-cols :is(.n, .d) { font-family: var(--px-f) !important; color: var(--px-ink2) !important; } html.nx-on .dxj-cols .n { color: var(--px-ink) !important; font-variant-numeric: tabular-nums; }
html.nx-on .dxj-cols .bar { background: var(--px-ink2) !important; } html.nx-on .dxj-cols .plan .bar { background: transparent !important; box-shadow: inset 0 0 0 2px var(--px-line) !important; }
html.nx-on .dxj-key { color: var(--px-ink2) !important; } html.nx-on .dxj-key i.w { background: var(--px-ink2) !important; } html.nx-on .dxj-key i.p { box-shadow: inset 0 0 0 2px var(--px-sub) !important; }
html.nx-on .r10-tabs button[aria-selected="true"] .c { color: inherit !important; opacity: .8; }
/* graphite: the cards carry live Today's night sheen over the smoked glass (nx-system.css --pm-sheen, the same value), so the work
   areas lift off the deep field as live graphite Today does — never a flat panel */
@media (prefers-color-scheme: dark) { html.nx-on:not([data-theme="light"]) :is(.r10-sums .fig, .figures .fig, .r10-panel > section, .card, .dxj-days, .dxj-tile, .r10-tabs, body > nav.places, body > header.top) {
  background: linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, 0) 46%), var(--px-glass) !important; } }
/* V36-PORT2 · text at AA in daylight as in graphite (STANDARDS §10): the quiet ink takes live Today's WS-13 value (#57645e — AA on the
   field, the glass and white); a status WORD (not its dot or tint) is set in its colour deepened toward the ink, so "ready",
   "accepted" and "Needs your review" read at AA on their tinted chips. Graphite keeps its own lifted colours. */
html.nx-on { --px-sub: #57645e; --px-ok-t: color-mix(in srgb, var(--px-ok) 62%, #18201d); --px-warn-t: color-mix(in srgb, var(--px-warn) 76%, #18201d); --px-info-t: var(--px-ink2); }
@media (prefers-color-scheme: dark) { html.nx-on:not([data-theme="light"]) { --px-sub: #93a19b; --px-ok-t: var(--px-ok); --px-warn-t: var(--px-warn); --px-info-t: var(--px-ink2); } }
html.nx-on .w.ok { color: var(--px-ok-t); } html.nx-on :is(.w.warn, .r10-need) { color: var(--px-warn-t); } html.nx-on .w.info { color: var(--px-info-t); }
html.nx-on :is(#stage, .drawer, .tk-layer) { --tk-ok: var(--px-ok-t); --tk-warn: var(--px-warn-t); }
/* the Report drawer (kit drawer): the record card, two figures side by side, each section's figures as label · value rows and its
   entries as one table that scrolls inside itself on a phone */
.tk-drawer .px-rfigs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 14px 0 6px; }
html.nx-on .tk-drawer .px-rfigs .fig { min-height: 96px; }
.tk-drawer .px-rsec { margin-top: 12px; }
.tk-drawer .px-rsec > summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font: 550 14px var(--px-f, inherit); color: var(--px-ink, inherit); }
.tk-drawer .px-rdl { margin: 4px 0 10px; display: grid; } .tk-drawer .px-rdl > div { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-top: 1px solid var(--px-line, rgba(0,0,0,.08)); }
.tk-drawer .px-rdl dt { color: var(--px-ink2, inherit); text-transform: capitalize; } .tk-drawer .px-rdl dd { margin: 0; font-variant-numeric: tabular-nums; color: var(--px-ink, inherit); text-align: right; }
.tk-drawer .px-rtw { overflow-x: auto; margin: 4px 0 6px; }
.tk-drawer .px-rtab { width: 100%; border-collapse: collapse; font: 400 13.5px/1.4 var(--px-f, inherit); font-variant-numeric: tabular-nums; }
.tk-drawer .px-rtab th { text-align: left; font: 500 11px var(--px-fm, inherit); letter-spacing: .12em; text-transform: uppercase; color: var(--px-sub, inherit); padding: 6px 10px 8px 0; border-bottom: 1px solid var(--px-line, rgba(0,0,0,.08)); white-space: nowrap; }
.tk-drawer .px-rtab td { padding: 9px 10px 9px 0; border-bottom: 1px solid var(--px-line, rgba(0,0,0,.08)); color: var(--px-ink, inherit); vertical-align: top; }
html.nx-on .px-cal .cal-a.tk-cal :is(.cb-day.tk-sel .dlb, .sd.tk-sel .w, .cb-day.today .dlb, .sd.today .w) { color: var(--px-ink); }
/* the calendar's day heads are the board's own cells, never the portal's pill buttons */
html.nx-on .px-cal .cal-a.tk-cal :is(button.cb-day, button.sd) { background: transparent !important; box-shadow: none !important; border-radius: 0 !important; min-height: 44px !important; padding: 12px 10px !important; font-family: var(--px-f) !important; color: var(--px-ink) !important; }
html.nx-on .px-cal .cal-a.tk-cal button.sd { border-radius: 12px !important; padding: 8px 2px 9px !important; }
html.nx-on .px-cal .cal-a.tk-cal :is(button.cb-day, button.sd):hover { background: var(--px-glass-hi) !important; }
html.nx-on .px-cal .cal-a.tk-cal :is(button.cb-day, button.sd).today { background: color-mix(in srgb, var(--px-sub) 8%, transparent) !important; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--px-sub) 40%, transparent) !important; }
html.nx-on .px-cal .cal-a.tk-cal :is(button.cb-day, button.sd).tk-sel { background: var(--px-glass-hi) !important; box-shadow: inset 0 -2px 0 var(--px-acc), inset 0 0 0 1px var(--px-line) !important; }
html.nx-on .px-cal .cal-a.tk-cal :is(button.cb-day, button.sd):focus-visible { outline: 2px solid var(--k-focus) !important; outline-offset: -2px; }
html.nx-on .px-calday .ln button.lm { background: transparent !important; box-shadow: none !important; border-radius: 10px !important; padding: 0 !important; min-height: 44px !important; color: var(--px-ink) !important; text-align: left; font-family: var(--px-f) !important; }
/* the Day drawer: a line's end words wrap inside the drawer instead of running past its edge; the week strip keeps its figures */
html.nx-on .drawer .line > * { min-width: 0; }
html.nx-on .drawer .line .end { min-width: 0; flex-wrap: wrap; justify-content: flex-end; text-align: right; white-space: normal; }
html.nx-on .drawer .line .end .w { white-space: normal; }
html.nx-on .drawer .px-dayweek .cal-a.tk-cal .cb-day .dst { display: none; }
html.nx-on .drawer .px-dayweek .cal-a.tk-cal .cb-day { min-height: 76px; }
/* the kit's papers are the kit's own objects: the portal's pill-button look never reaches a paper tile */
html.nx-on :is(main, .drawer) button.tk-ev { background: none !important; box-shadow: none !important; border-radius: 0 !important; padding: 0 !important; min-height: 0 !important; color: inherit !important; font-family: var(--px-f) !important; }
html.nx-on #pvMat.tk-folders { margin-top: 8px; }
/* the phone week's "free" under an empty day is the dispatcher's word (a truck free to book); a customer's empty day says nothing */
html.nx-on .px-cal .cal-a.tk-cal .sd:not(.tk-has) small { visibility: hidden; }
/* lead (11 Oct): a day on the portal week is a board column, never a pill — the picked or ringed day keeps square edges inside the board (its corners come from the board) */
html.nx-on body .px-cal .cal-a.tk-cal .cb-day.cb-day.cb-day { border-radius: 0 !important; }   /* out-ranks the portal's button-pill rule (line 100) */

/* V0 · retained portal records: the existing glass, readable history and clear sticky-header landings. */
html.nx-on :is(#pvQ, #pvPanel, #daysLane, #billUpCard, #cmPortalCard) { scroll-margin-top: 100px; }
html.nx-on .drawer .x { min-width: 44px; min-height: 44px; display: grid; place-items: center; }
html.nx-on .px-tw .pm-tl2 time { font-size: 12px; color: var(--px-ink2); }
html.nx-on .px-tw .tw-st .tw-fine { line-height: 1.55; color: var(--px-ink2); }
html.nx-on .tk-drawer .px-rdl { font-size: 14px; line-height: 1.55; }
html.nx-on :is(.bu-day, .bu-clock, #cmPortalCard .help) { font-size: 13px; line-height: 1.55; color: var(--px-ink2); }
html.nx-on .bu-day { border: 0; background: var(--px-glass-hi); box-shadow: var(--px-shg); }
html.nx-on .bu-job h3 { font-size: 18px; line-height: 1.35; }
@media (max-width: 760px) {
 html.nx-on :is(#pvQ, #pvPanel, #daysLane, #billUpCard, #cmPortalCard) { scroll-margin-top: 116px; }
 html.nx-on .drawer :is(.px-tw, .px-calday) { font-size: 14px; line-height: 1.55; }
}

@media(max-width:760px) {
 /* Keep the actual material action fully visible beside the existing overflow choice. */
 html.nx-on #pvPanel .lane:has([data-mat-add]) .hd { flex-wrap: wrap; row-gap: 12px; }
 html.nx-on #pvPanel .lane:has([data-mat-add]) .hd > .eyebrow { flex: 1 0 100%; }
 html.nx-on #pvPanel .lane:has([data-mat-add]) .hd > .grow { display: none; }
 html.nx-on #pvPanel [data-mat-add] { flex: 1; min-width: 0; }
 html.nx-on #pvPanel [data-mat-add] { white-space: normal; text-align: center; padding: 10px 18px !important; max-width: 100%; }
}