:root {
    --navy: #384a61;        /* deep navy — header, primary text accents */
    --navy-dark: #242b42;   /* darker navy for hovers */
    --gold: #c09267;        /* warm gold accent */
    --gold-dark: #8c6145;   /* gold hover */
    --ink: #1a1a1a;
    --muted: #707373;
    --line: #e7dfcf;        /* fetch-145 (audit №2): ONE hairline — the brand-warm one wins */
    --bg: #f0e8e0;          /* warm off-white background */
    /* ---- fetch-145: token layer from Brutal Audit №2 §3. New code references these;
       old literals get swept opportunistically per screen touched. ---- */
    /* fetch-794: the separator below was a COMMA until v5.394, which made this ONE declaration —
       --t-mid took the value "13px , --t-sub: 12px" (not a valid length) and --t-sub was never
       defined at all. 216 rules across portal.css/index.html/timesheets.html/staff.html asked for
       var(--t-sub) and silently inherited their parent's size for 44 builds. Regression from
       fetch-704, which added --t-mid; before that this line was correct. Keep each declaration
       semicolon-terminated and keep comments OUT of the middle of one. */
    --t-display: 27px; --t-title: 22px; --t-section: 17px; --t-body: 14px;
    --t-mid: 13px; /* fetch-704 (Amanda #2): the half-step where a 12px label and a 14px option meet */
    --t-sub: 12px; --t-label: 11px; /* floor: 10.5px */
    --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px;
    --r-s: 6px; --r-m: 10px; --r-l: 14px;
    --hair: #f0ece4; --wash: #faf8f4;
    --paper: #ffffff;       /* fetch-644: the one white. Panels that must read as "a form" sitting on a --wash card. */
    --pipe-orange: #d97706; /* fetch-400 (Amanda): Hold=orange on calendar/pipeline (hex moved from .st-hold border — ratchet-neutral) */
    --ok-bg: #dcfce7; --ok-fg: #166534; --warn-bg: #fef3c7; --warn-fg: #92400e;
    --bad-bg: #fee2e2; --bad-fg: #991b1b; --info-bg: #dbeafe; --info-fg: #1e40af;
    --mute-bg: #eef1f5; --mute-fg: #475569;
    --w-narrow: 1100px; --w-mid: 1440px; --w-wide: 1900px;
    /* ---- fetch-284 (UI audit Phase 1): brand-semantic aliases over the raw tokens above.
       Additive — nothing is restyled; new/migrated code references these names so intent is
       legible and a future palette change happens in one place. Raw --navy/--gold stay valid. ---- */
    --brand-blue-traditional: #384a61; --brand-blue-deep: #242b42;
    --brand-gold-light: #f5c48a; --brand-gold-dark: #8c6145; --brand-gold-mid: #c09267;
    --brand-pink: #f0e8e0; --brand-stone: #707373;
    --pipe-blue: #2563eb; --pipe-purple: #7c3aed; /* fetch-425: pipeline stage colors tokenized (match cal-chip Tentative/Definite) */
    --surface-nav: var(--brand-blue-traditional); --surface-nav-strong: var(--brand-blue-deep);
    --text-heading: var(--brand-blue-deep); --action-primary: var(--brand-blue-traditional);
    --focus-ring: #b57943; /* gold-forward, meets contrast on both pink page + white cards */
  --to-taken: var(--brand-blue-traditional); --to-booked: var(--muted); --to-left: var(--hair);
  /* fetch-673: time-off lifecycle. Built from existing tokens on purpose — a new
     hex here is a new literal to sweep later. Deliberately NOT the ok/warn/bad ramp:
     taken/booked/left are lifecycle, not status. */
    /* fetch-496: --surface-card was REFERENCED 13 times and never DEFINED — every one of
       those rules has silently been running on its fallback since fetch-284, so a palette
       change would have missed all 13 card surfaces. Defining it costs one raw colour,
       and the stray fallback on .client-card below is dropped in the same change, so the
       debt ratchet nets zero. (The ratchet counts comment text too — it counted the
       example that used to sit in this sentence, which is how I found that out.) */
    --surface-card: #fff;
    --control-height-sm: 32px; --control-height-md: 40px; --control-height-touch: 44px;
  }
  /* ---- fetch-284: GLOBAL KEYBOARD FOCUS (audit's most urgent a11y gap — the app had no
     :focus-visible system; only mouse users were served). :focus-visible fires for keyboard/AT
     navigation but NOT mouse clicks, so it adds a clear ring for keyboard users without putting
     outlines on every clicked button. Covers real controls + the many clickable containers. ---- */
  :focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; border-radius: 3px; }
  a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible, [data-workspace]:focus-visible, [data-tab]:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
  .cmd-input:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -2px; } /* command palette input: inset so the ring stays inside the modal edge */
  /* ---- fetch-284: opt-in primitives — the common inline recipes as named classes.
     Pages adopt them as they're touched; nothing legacy is forced to change. ---- */
  .notice { display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; border-radius: var(--r-m); font-size: 13px; border-left: 3px solid var(--mute-fg); background: var(--wash); }
  .notice--ok { background: var(--ok-bg); color: var(--ok-fg); border-left-color: var(--ok-fg); }
  .notice--warn { background: var(--warn-bg); color: var(--warn-fg); border-left-color: var(--warn-fg); }
  .notice--bad { background: var(--bad-bg); color: var(--bad-fg); border-left-color: var(--bad-fg); }
  .notice--info { background: var(--info-bg); color: var(--info-fg); border-left-color: var(--info-fg); }

  /* ---- fetch-673: THE TIME-OFF BALANCE STRIP. One primitive, used wherever a
     time-off decision is made. Taken / booked / left are LIFECYCLE states, not
     status, so they get their own three colours and never the ok/warn/bad ramp —
     and every one is paired with a number, so the bar is a summary and never the
     record. `--` means NOT TRACKED, which is not zero: vacation is tracked for a
     list of people, and an allowance row is what puts someone on it. ---- */
  .tob { margin-top: var(--s-2); padding-top: var(--s-2); border-top: 1px solid var(--hair); }
  .tob-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-2); margin-bottom: var(--s-1); }
  .tob-head b { font-size: var(--t-label); letter-spacing: .05em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
  .tob-head em { font-style: normal; font-size: var(--t-sub); font-weight: 650; color: var(--navy); }
  .tob-bar { display: flex; height: 7px; border-radius: 4px; overflow: hidden; background: var(--to-left); }
  .tob-bar i { display: block; height: 100%; }
  .tob-bar .t { background: var(--to-taken); }
  .tob-bar .b { background: var(--to-booked); }
  .tob-key { display: flex; gap: var(--s-3); margin-top: var(--s-1); flex-wrap: wrap; }
  .tob-key span { display: flex; align-items: center; gap: var(--s-1); font-size: var(--t-sub); color: var(--navy); }
  .tob-key i { width: 9px; height: 9px; border-radius: 3px; flex: none; }
  .tob-key .t { background: var(--to-taken); }
  .tob-key .b { background: var(--to-booked); }
  .tob-key .l { background: var(--to-left); border: 1px solid var(--line); }
  .tob-after { margin: var(--s-1) 0 0; font-size: var(--t-sub); line-height: 1.45; color: var(--navy); }
  /* ---- fetch-675 · the allowance screen. Same three-colour vocabulary as .tob
     above, deliberately: this is the screen where the number is SET and that is
     the screen where the number is READ, and two palettes for one fact would
     teach people the wrong thing. ---- */
  .toa-t { width: 100%; border-collapse: collapse; }
  .toa-t th { text-align: left; font-size: var(--t-label); letter-spacing: .05em; text-transform: uppercase; color: var(--muted); font-weight: 700; padding: var(--s-1) var(--s-2); border-bottom: 1px solid var(--line); white-space: nowrap; }
  .toa-t td { padding: var(--s-2); border-bottom: 1px solid var(--hair); font-size: var(--t-sub); color: var(--navy); vertical-align: middle; }
  .toa-t tr:last-child td { border-bottom: 0; }
  .toa-nm { font-weight: 650; }
  .toa-sub { display: block; color: var(--muted); font-size: var(--t-sub); overflow-wrap: anywhere; }
  .toa-n { font-variant-numeric: tabular-nums; font-weight: 650; white-space: nowrap; }
  .toa-left-ok { color: var(--ok-fg); }
  .toa-left-warn { color: var(--warn-fg); }
  .toa-left-bad { color: var(--bad-fg); }
  .toa-unset { color: var(--warn-fg); font-weight: 650; }
  .toa-mini { display: flex; height: 6px; width: 92px; border-radius: 3px; overflow: hidden; background: var(--to-left); }
  .toa-mini i { display: block; height: 100%; }
  .toa-mini .t { background: var(--to-taken); }
  .toa-mini .b { background: var(--to-booked); }
  .toa-empty { padding: var(--s-4) var(--s-2); text-align: center; color: var(--muted); font-size: var(--t-sub); line-height: 1.6; }
  .toa-form { display: flex; gap: var(--s-2); flex-wrap: wrap; align-items: flex-end; }
  .toa-f { display: flex; flex-direction: column; gap: var(--s-1); min-width: 128px; }
  .toa-f label { font-size: var(--t-sub); color: var(--muted); font-weight: 700; }
  .toa-wrap { overflow-x: auto; }
  /* ---- fetch-676 · SEVEN COLUMNS DO NOT FIT A PHONE.
     Measured at 390px on v5.326: the name cell ran to 85px (three lines), and BOTH the
     "Left" number and the Edit button sat off the right edge. .toa-wrap does scroll — but
     nothing says so, so the number people open this screen FOR reads as missing rather than
     as scrolled. Under 640px the table stops being a table: one stacked card per person,
     the four numbers as labelled pairs, then the bar, then Edit. Nothing off-screen, and
     the page still never scrolls sideways.
     The <thead> is visually hidden, NOT display:none — screen readers keep the column names.
     The edit row keeps its own rule below, because a colspan means nothing once cells are
     display:block and without it Save/Cancel would land in the wrong place. ---- */
  @media (max-width: 640px) {
    .toa-wrap { overflow-x: visible; }
    .toa-t, .toa-t tbody, .toa-t tr, .toa-t td { display: block; width: 100%; }
    .toa-t thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .toa-t tr { padding: var(--s-3) 0; border-bottom: 1px solid var(--hair); }
    .toa-t tr:last-child { border-bottom: 0; }
    .toa-t td { border-bottom: 0; padding: 0; }
    .toa-t td[data-toal] { display: inline-flex; align-items: baseline; gap: var(--s-1); width: auto; margin: var(--s-2) var(--s-3) 0 0; }
    .toa-t td[data-toal]::before { content: attr(data-toal); font-size: var(--t-label); letter-spacing: .05em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
    .toa-nm { font-size: var(--t-body); }
    .toa-mini { width: 100%; margin-top: var(--s-2); }
    .toa-t td:last-child { margin-top: var(--s-2); }
    .toa-t td:last-child .btn { width: 100%; }
    .toa-t td[colspan] { margin-top: var(--s-2); }   /* the edit row: already a block, just space it */
    .toa-t td:empty { display: none; }                /* the spacer cell the edit row emits */
  }
  /* fetch-994: guidance gets its own row; controls cannot squeeze it into a phone column. */
  .toa-head-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "intro intro intro" "year search add"; align-items: end; gap: var(--s-3); margin-bottom: var(--s-3); }
  .toa-intro { grid-area: intro; min-width: 0; }
  .toa-year { grid-area: year; }
  .toa-search { grid-area: search; }
  .toa-head-row > .btn { grid-area: add; }
  .toa-head-row .toa-f { min-width: 0; }
  .toa-head-row .sel { width: 100%; min-width: 0; }
  .toa-head-row :is(.sel, .btn) { min-height: var(--control-height-touch); }
  .toa-hint { font-size: var(--t-sub); line-height: 1.5; }
  .toa-note { margin: var(--s-2) 0 0; font-size: var(--t-sub); }
  #toaUnset { min-height: var(--control-height-touch); margin-top: var(--s-2); }
  .toa-f-wide { flex: 1; min-width: 220px; }
  .toa-f-mid { flex: 1; min-width: 180px; }
  .toa-f-wider { flex: 2; min-width: 200px; }
  @media (max-width: 640px) {
    .toa-head-row { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "intro intro" "year search" "add add"; }
    .card .toa-t td { max-width: none; white-space: normal; }
    .card .toa-t td[data-toal] { white-space: nowrap; }
    .toa-t .btn { min-height: var(--control-height-touch); }
    .toa-nm { overflow-wrap: anywhere; }
    .toa-form { display: grid; grid-template-columns: minmax(0, 1fr); width: 100%; }
    .toa-form .toa-f { min-width: 0; }
    .toa-form :is(.sel, .btn) { width: 100%; min-width: 0; min-height: var(--control-height-touch); }
  }
  .tob-after b { font-weight: 650; }
  .tob-over { color: var(--bad-fg); font-weight: 700; }
  .tob .notice { margin: 0; }  /* fetch-673: so the strip needs no inline margin */
  .empty-state { text-align: center; padding: 34px 20px; max-width: 460px; margin: 0 auto; color: var(--muted); }
  .empty-state .es-emoji { font-size: 32px; margin-bottom: 8px; }
  .empty-state .es-title { font-size: 16px; font-weight: 600; color: var(--text-heading); margin-bottom: 5px; }
  .tnum { font-variant-numeric: tabular-nums; } /* money/time/counts — audit typography rec */
  /* ---- fetch-285 (UI audit Phase 2): the shared page header. One place for every list/board
     page's title, context, and primary action — the audit's headline fix ("Calendar has almost
     no page-level identity"; "Insights stacks controls before the main heading"). Rendered in
     the shell so it lands on every eligible page at once; pages with their own hero (Home) or
     record title (details) opt out via the render gate. ---- */
  .page-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin: 2px 0 14px; padding-bottom: 10px; border-bottom: 1px solid var(--hair); }
  .page-header .ph-titles { min-width: 0; }
  .page-header .ph-title { font-size: 22px; font-weight: 700; color: var(--text-heading); line-height: 1.15; letter-spacing: -0.01em; margin: 0; } /* fetch-441: now an <h1> — reset the UA margin */
  .page-header .ph-context { font-size: 12.5px; color: var(--text-secondary, #5f6872); margin-top: 3px; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
  .page-header .ph-context .ph-dot { color: var(--line); }
  .page-header .ph-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
  @media (max-width: 640px) { .page-header .ph-title { font-size: 19px; } .page-header { margin-bottom: 11px; } }
  /* ---- fetch-288: Clients / CRM view ---- */
  .client-list { display: flex; flex-direction: column; gap: 8px; }
  .client-card { display: flex; gap: 12px; align-items: center; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-card); cursor: pointer; transition: .12s; }
  .client-card:hover { border-color: var(--brand-blue-traditional); box-shadow: 0 4px 14px rgba(36,43,66,.07); }
  .cl-avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--surface-nav); color: #fff; font-weight: 700; font-size: 17px; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; font-family: 'Cormorant Garamond', Georgia, serif; }
  .cl-name { font-weight: 700; font-size: var(--t-body); color: var(--text-heading); overflow-wrap: anywhere; }
  .cl-detail-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
  #clientTitle { margin: 0; }
  .cl-choice { width: 100%; text-align: left; font: inherit; }
  .cl-choice .cl-line2, .cl-choice .cl-line3 { display: block; }
  /* fetch-1010: explain a contact-only Directory match without adding another card action. */
  .cl-contact-match { display: grid; gap: var(--s-1); min-width: 0; margin-top: var(--s-2); padding-top: var(--s-2); border-top: 1px solid var(--hair); overflow-wrap: anywhere; white-space: normal; font-size: var(--t-sub); line-height: 1.5; }
  .cl-contact-match-value { color: var(--text-heading); font-weight: 600; }
  .cl-contact-match-source { color: var(--muted); }
  @media (max-width: 640px) {
    .client-card { display: grid; grid-template-columns: max-content minmax(0, 1fr); align-items: start; }
    .client-card.cl-choice { grid-template-columns: minmax(0, 1fr); }
    .client-card .cl-main { overflow-wrap: anywhere; }
    .client-card .cl-right { grid-column: 2; text-align: left; white-space: normal; }
  }
  .cl-event-row { display: flex; width: 100%; min-height: var(--control-height-touch); align-items: center; gap: var(--s-3); padding: var(--s-2) 0; border: 0; border-bottom: 1px solid var(--hair); background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
  .cl-event-row:hover { background: var(--wash); }
  .cl-event-date { flex: 0 0 92px; font-size: var(--t-sub); }
  .cl-event-main { flex: 1; min-width: 0; overflow-wrap: anywhere; }
  .cl-event-meta { display: block; font-size: var(--t-sub); }
  .cl-event-quote { font-size: var(--t-sub); white-space: nowrap; }
  @media (max-width: 640px) {
    .btn[data-clientback], .btn.cl-tl-ev, #clientClearFilters { min-height: var(--control-height-touch); }
    .cl-event-row { flex-wrap: wrap; column-gap: var(--s-2); }
    .cl-event-date { flex-basis: 100%; }
    .cl-event-main { flex-basis: calc(100% - 6rem); }
    .cl-event-quote { margin-left: auto; }
  }
  .card .cl-kpis { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
  /* fetch-915: the client profile - the timeline takes the width, What we know sits beside it; one column under 900px */
  .cl-profile-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(15rem, 19rem); gap: var(--s-3); align-items: start; margin-top: var(--s-3); }
  @media (max-width: 900px) { .cl-profile-grid { grid-template-columns: minmax(0, 1fr); } }
  .cl-tl-item { padding: var(--s-2) 0; border-top: 1px solid var(--hair); }
  .card-kicker + .cl-tl-item { border-top: 0; }
  .cl-tl-ev { margin-left: auto; }
  .cl-kpi { flex: 1 1 90px; min-width: 90px; background: var(--wash); border: 1px solid var(--hair); border-radius: 10px; padding: 10px 12px; text-align: center; }
  .cl-kpi-v { font-size: 19px; font-weight: 700; color: var(--text-heading); }
  .cl-kpi-l { font-size: 11px; color: var(--text-secondary, #5f6872); text-transform: uppercase; letter-spacing: .04em; margin-top: 2px; }
  /* fetch-1002: relationship profile — upcoming work first, contacts beside events,
     then a readable communication history. Record scope keeps the list and sales dock intact. */
  .cl-record { min-width: 0; }
  .cl-record .cl-record-header { align-items: flex-start; gap: var(--s-3); margin: 0 0 var(--s-3); padding-bottom: var(--s-3); }
  .cl-record-header .ph-titles { flex: 1 1 18rem; }
  .cl-record .cl-record-header .ph-title { font-size: var(--t-title); line-height: 1.25; overflow-wrap: anywhere; }
  .cl-record .cl-record-header .ph-context { font-size: var(--t-sub); line-height: 1.5; overflow-wrap: anywhere; }
  .cl-record .btn { min-height: var(--control-height-touch); min-width: var(--control-height-touch); max-width: 100%; white-space: normal; font-size: var(--t-sub); line-height: 1.4; }
  .cl-record .cl-section-nav { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-3); margin-bottom: var(--s-4); padding-bottom: var(--s-2); border-bottom: 1px solid var(--line); }
  .cl-record .cl-section-nav button { min-height: var(--control-height-touch); padding: var(--s-2) var(--s-1); border: 0; border-radius: var(--r-s); background: transparent; color: var(--navy); font: inherit; font-size: var(--t-sub); font-weight: 600; cursor: pointer; }
  .cl-record .cl-section-nav button:hover { background: var(--wash); }
  .cl-record .cl-next-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); margin-bottom: var(--s-4); }
  .cl-record .cl-next-card { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-2); min-width: 0; margin: 0; padding: var(--s-4); }
  .cl-record .cl-next-card p { margin: 0; font-size: var(--t-body); line-height: 1.5; overflow-wrap: anywhere; }
  .cl-record .cl-next-card .btn { margin-top: auto; }
  .cl-record .cl-next-card .cl-next-title { color: var(--text-heading); font-size: var(--t-section); font-weight: 650; line-height: 1.4; overflow-wrap: anywhere; }
  .cl-record .cl-next-card .cl-next-meta { color: var(--muted); font-size: var(--t-sub); line-height: 1.5; font-variant-numeric: tabular-nums; }
  .cl-record .cl-record-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(18rem, 22rem); grid-template-areas: "events contacts" "activity facts"; gap: var(--s-4); align-items: start; }
  .cl-record-layout > .card { min-width: 0; margin: 0; padding: var(--s-5); }
  .cl-record .cl-events { grid-area: events; }
  .cl-record .cl-contacts { grid-area: contacts; }
  .cl-record .cl-timeline { grid-area: activity; }
  .cl-record .cl-facts { grid-area: facts; }
  .cl-record section[id] { scroll-margin-top: var(--s-5); }
  .cl-record .cl-section-title { margin: 0; color: var(--text-heading); font: 650 var(--t-section)/1.35 Inter, sans-serif; text-transform: none; letter-spacing: normal; overflow-wrap: anywhere; }
  .cl-record .cl-section-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--s-1) var(--s-3); margin-bottom: var(--s-3); }
  .cl-record .cl-section-head > :not(h2) { color: var(--muted); font-size: var(--t-sub); line-height: 1.5; font-variant-numeric: tabular-nums; }
  .cl-record .cl-event-group + .cl-event-group { margin-top: var(--s-5); }
  .cl-record .cl-event-group h3 { margin: 0 0 var(--s-2); color: var(--text-heading); font: 600 var(--t-body)/1.5 Inter, sans-serif; }
  .cl-record .cl-event-row { padding: var(--s-3) var(--s-1); border-radius: var(--r-s); font-size: var(--t-body); line-height: 1.5; }
  .cl-record .cl-event-row:last-child { border-bottom: 0; }
  .cl-record .cl-event-date, .cl-record .cl-event-quote { font-variant-numeric: tabular-nums; }
  .cl-record .cl-event-meta { margin-top: var(--s-1); line-height: 1.5; }
  .cl-record .cl-quote-note { display: block; margin: var(--s-3) 0 0; color: var(--muted); font-size: var(--t-sub); line-height: 1.5; }
  .cl-record .cl-detail-grid { gap: 0; }
  .cl-record .cl-contact { min-width: 0; padding: var(--s-4) 0; border-top: 1px solid var(--hair); overflow-wrap: anywhere; }
  .cl-record .cl-contact:last-child { padding-bottom: 0; }
  .cl-record .cl-contact > strong { display: block; color: var(--text-heading); font-size: var(--t-body); line-height: 1.5; }
  .cl-record .cl-contact-lines { display: grid; gap: var(--s-1); margin-top: var(--s-1); color: var(--muted); font-size: var(--t-sub); line-height: 1.6; }
  .cl-record .cl-contact-lines p { margin: 0; }
  .cl-record .cl-contact-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-3); }
  .cl-record .cl-contact-actions a { display: inline-flex; justify-content: center; align-items: center; text-decoration: none; }
  .cl-record .cl-contact-source { display: block; margin-top: var(--s-2); text-align: left; overflow-wrap: anywhere; }
  .cl-record .cl-activity-filters { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr)); gap: var(--s-3); align-items: end; margin-bottom: var(--s-4); }
  .cl-record .cl-filter-field { display: flex; flex-direction: column; gap: var(--s-1); min-width: 0; color: var(--text-heading); font-size: var(--t-sub); font-weight: 600; line-height: 1.5; }
  .cl-record .cl-filter-field :is(input, select) { width: 100%; min-width: 0; min-height: var(--control-height-touch); height: auto; padding: var(--s-2); border: 1px solid var(--line); border-radius: var(--r-s); background: var(--surface-card); color: var(--ink); font: inherit; font-size: var(--t-body); font-weight: 400; }
  .cl-record .cl-tl-item { padding: var(--s-4) 0; }
  .cl-record .cl-tl-item .row { flex-wrap: wrap; align-items: flex-start; gap: var(--s-2); }
  .cl-record .cl-sum { font-size: var(--t-body); line-height: 1.6; overflow-wrap: anywhere; }
  .cl-record .cl-activity-meta { display: block; margin: var(--s-1) 0 0; color: var(--muted); font-size: var(--t-sub); line-height: 1.5; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
  .cl-record .cl-activity-notes { margin: var(--s-2) 0 0; font-size: var(--t-body); line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }
  /* fetch-1008: capture outreach beside its relationship history. */
  .cl-record #clientOutreachOpen { color: var(--action-primary); }
  .cl-record .cl-outreach-form { margin: var(--s-3) 0 var(--s-4); padding: var(--s-4); border: 1px solid var(--line); border-radius: var(--r-m); background: var(--wash); }
  .cl-record .cl-outreach-fields { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-3); }
  .cl-record .cl-outreach-fields:has(#clientOutreachDate) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cl-record .cl-outreach-note { grid-column: 1 / -1; }
  .cl-record .cl-outreach-form textarea { width: 100%; min-width: 0; min-height: 7rem; padding: var(--s-2); border: 1px solid var(--line); border-radius: var(--r-s); background: var(--surface-card); color: var(--ink); font: inherit; font-size: var(--t-body); font-weight: 400; line-height: 1.5; resize: vertical; }
  .cl-record #clientOutreachEffect { margin: var(--s-3) 0; line-height: 1.6; overflow-wrap: anywhere; }
  .cl-record #clientOutreachError { margin: var(--s-3) 0; overflow-wrap: anywhere; }
  .cl-record .cl-outreach-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; }
  .cl-record .cl-tl-ev { flex: 0 1 auto; overflow-wrap: anywhere; }
  .cl-record .cl-section-footer { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin-top: var(--s-3); padding-top: var(--s-3); border-top: 1px solid var(--hair); }
  /* fetch-1096: the Customer portal card on a client profile - the client record, its event links and its logins */
  .cl-record .cl-portal { margin: 0 0 var(--s-4); padding: var(--s-5); }
  .cl-portal-record + .cl-portal-record { margin-top: var(--s-4); padding-top: var(--s-4); border-top: 1px solid var(--line); }
  .cl-portal-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--s-1) var(--s-3); }
  .cl-portal-head strong { display: block; color: var(--text-heading); font-size: var(--t-body); line-height: 1.5; }
  .cl-portal-h { margin: var(--s-4) 0 var(--s-2); color: var(--text-heading); font-size: var(--t-sub); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
  .cl-portal-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); padding: var(--s-2) 0; border-top: 1px solid var(--hair); }
  .cl-portal-main { display: grid; flex: 1 1 14rem; gap: var(--s-1); min-width: 0; overflow-wrap: anywhere; }
  .cl-portal-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); }
  .cl-portal .btn { min-height: var(--control-height-touch); }
  .cl-portal-link, .cl-portal-invite, .cl-portal-close { display: grid; gap: var(--s-3); margin-top: var(--s-3); padding: var(--s-3); border: 1px solid var(--line); border-radius: var(--r-m); background: var(--wash); }
  .cl-portal-close { flex-basis: 100%; }
  .cl-portal-consequence { margin: 0; color: var(--ink); font-size: var(--t-body); line-height: 1.5; }
  .cl-portal-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: var(--s-3); }
  @media (max-width: 640px) {
    .cl-record .cl-portal { padding: var(--s-4); }
    .cl-portal-fields { grid-template-columns: minmax(0, 1fr); }
    .cl-portal-actions .btn, .cl-portal-row > .btn, .cl-portal .cl-outreach-actions .btn { flex: 1 1 8rem; }
    .cl-docs .cl-portal-actions:has(.btn + .btn) { flex-basis: 100%; }   /* fetch-1154: two presses take their own line, side by side, instead of stacking in the sliver beside the badge */
  }
  @media print {
    .cl-record .cl-portal-link, .cl-record .cl-portal-invite, .cl-record .cl-portal-close, .cl-record .cl-portal .btn { display: none !important; }
  }
  .cl-record .pdx-prop { padding: var(--s-3) 0; }
  .cl-record .pdx-prop-l { font-size: var(--t-sub); line-height: 1.5; text-transform: none; letter-spacing: normal; }
  .cl-record .pdx-prop-v { margin-top: var(--s-1); font-size: var(--t-body); line-height: 1.5; font-variant-numeric: tabular-nums; }
  .cl-record .empty-state { width: 100%; padding: var(--s-4) var(--s-2); font-size: var(--t-sub); line-height: 1.6; }
  .cl-record .empty-state .es-title { font-size: var(--t-body); }
  @media (max-width: 1024px) {
    .cl-record .cl-record-layout { grid-template-columns: minmax(0, 1fr); grid-template-areas: "events" "contacts" "activity" "facts"; }
  }
  @media (max-width: 640px) {
    .cl-record .cl-record-header { flex-direction: column; }
    .cl-record-header .ph-titles { flex-basis: auto; width: 100%; }
    .cl-record .cl-section-nav { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-1); }
    .cl-record .cl-section-nav button { text-align: left; }
    .cl-record .cl-next-grid { grid-template-columns: minmax(0, 1fr); }
    .cl-record-layout > .card { padding: var(--s-4); }
    .cl-record .cl-activity-filters { grid-template-columns: minmax(0, 1fr); }
    .cl-record .cl-filter-field :is(input, select) { font-size: max(var(--t-body), 1rem); }
    .cl-record .cl-outreach-fields:has(#clientOutreachDate) { grid-template-columns: minmax(0, 1fr); }
    .cl-record .cl-outreach-form textarea { font-size: max(var(--t-body), 1rem); }
    .cl-record .cl-outreach-actions .btn { flex: 1 1 7rem; }
    .cl-record .cl-tl-ev { margin-left: 0; }
    .cl-record .cl-contact-actions .btn { flex: 1 1 5rem; }
    .cl-record .cl-event-main { flex-basis: 100%; }
    .cl-record .cl-event-quote { margin-left: 0; }
    .cl-record .cl-section-footer .btn { flex: 1 1 10rem; }
  }
  @media print {
    .cl-record .cl-section-nav, .cl-record .cl-activity-filters, .cl-record .cl-section-footer, .cl-record-header .ph-actions, .cl-record .cl-contact-actions { display: none !important; }
    .cl-record .cl-outreach-form, .cl-record #clientOutreachOpen, .cl-record #clientOutreachState button { display: none !important; }
    .cl-record .cl-next-grid, .cl-record .cl-record-layout { display: block; }
    .cl-record .cl-next-card, .cl-record-layout > .card { margin-bottom: var(--s-4); padding: var(--s-3); box-shadow: none; }
    .cl-record .cl-next-card, .cl-record .cl-contact, .cl-record .cl-tl-item, .cl-record .cl-event-row, .cl-record .pdx-prop { break-inside: avoid; }
    .cl-record .cl-section-title, .cl-record .cl-event-group h3 { break-after: avoid; }
  }
  * { box-sizing: border-box; }
  body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; margin: 0; background: var(--bg); color: var(--ink); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } /* fetch-454 (Jacki's phone screenshot): iOS Safari font-boosting inflated table text into overlapping chaos — q.html already had this guard, the portal didn't */
  /* fetch-818 (page-header Phase 1): form controls do not inherit font-family — that is the UA
     stylesheet, not a bug here — and .btn never set one, so every button, input, select and
     textarea in the portal rendered in the browser's default UI font while the body text beside
     it was Inter. Eighteen individual controls in this file already carry `font-family: inherit`
     as one-off hand-fixes; this is the reset that made all of them unnecessary. Element-level
     specificity, declared early, so every existing class rule still wins. */
  button, input, select, textarea, optgroup { font-family: inherit; }

  .wrap { max-width: none; margin: 0 auto; padding: 0 22px 60px; } /* fetch-139: full-screen like Reserve — was capped at 900px */
  @media (min-width: 2000px) { .wrap { max-width: var(--w-wide); } } /* don't go silly on ultrawides */
  .wrap.w-narrow { max-width: var(--w-narrow); } /* fetch-140: reading/form pages keep a comfortable centered column */
  .wrap.w-mid { max-width: var(--w-mid); } /* fetch-145 (audit fix №3): documents-with-chrome — event detail, BEO editor, prep, invoices */
  .brandbar { background: #242b42; margin: 0 -22px 0; padding: 8px 20px; display: flex; align-items: center; gap: 12px; border-bottom: 3px solid transparent; border-image: linear-gradient(90deg, #f5c48a, #8c6145) 1; }
  .brandlogo { height: 34px; width: auto; display: block; } /* fetch-200: real logo in the brandbar · fetch-491: 42→34, the bar earns its height by carrying the workspace now */
  /* fetch-491 (Jack): "the Crystal brand Bar is taking up too much space by itself -
     the department drop down tab has room to live in there as well". Measured at 390px:
     the bar was 72.7px carrying a 42px logo and a logout button, and its content already
     ran 356px wide in a 350px box — so the chip only fits if the mark gives up room. */
  .ws-slot { display: flex; align-items: center; min-width: 0; }
  .wordmark { display: flex; flex-direction: column; line-height: 1; }
  .wm-crystal { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 500; font-size: 27px; letter-spacing: 7px; background: linear-gradient(100deg, #f5c48a 10%, #8c6145 90%); -webkit-background-clip: text; background-clip: text; color: transparent; }
  .wm-sub { font-size: 8.5px; letter-spacing: 4.2px; color: #fff; margin: 3px 0 0 2px; font-weight: 600; }
  /* fetch-514 — THE ACCOUNT MENU (brand bar). Gold as jewelry, not paint.
     Signature Gold (mid) as a FILL on the deep-blue bar reads brown — mid-gold and deep blue sit
     too close in luminance. The bar's own bottom border already solves this: it runs Signature
     Gold light → dark. So the account control uses the LIGHT end as a hairline + text, which is
     unmistakably gold on navy, and keeps Log out from being the loudest thing in the header. */
  .acct { position: relative; display: inline-flex; }
  .brandbar .acct-btn { background: transparent; border: 1px solid var(--brand-gold-mid); color: var(--brand-gold-light); font-weight: 700; letter-spacing: .04em; display: inline-flex; align-items: center; gap: 6px; min-height: var(--control-height-sm); }
  .brandbar .acct-btn:hover { background: rgba(245,196,138,.12); border-color: var(--brand-gold-light); color: var(--brand-gold-light); }
  .brandbar .acct-btn[aria-expanded="true"] { background: rgba(245,196,138,.16); border-color: var(--brand-gold-light); }
  .acct-caret { font-size: var(--t-sub); opacity: .75; }
  .acct-menu { position: absolute; top: calc(100% + 8px); right: 0; z-index: 60; min-width: 232px; background: var(--surface-card, White); border: 1px solid var(--line); border-radius: var(--r-m); box-shadow: 0 10px 28px rgba(36,43,66,.22); padding: var(--s-1); }
  .acct-who { padding: 8px 10px 6px; font-size: var(--t-sub); color: var(--muted); overflow-wrap: anywhere; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
  .acct-item { display: block; width: 100%; text-align: left; background: none; border: 0; padding: 10px; border-radius: 8px; font: inherit; color: var(--ink); cursor: pointer; min-height: var(--control-height-md); }
  .acct-item:hover { background: var(--wash); }
  .acct-sep { height: 1px; background: var(--line); margin: 4px 2px; }
  .acct-out { color: var(--bad-fg); font-weight: 600; }
  /* fetch-515 — PHONE: the tab row folds into the menu; the chip becomes ☰.
     Both glyphs are always in the DOM and CSS picks one, so rotating the phone needs no
     re-render. Desktop is untouched: tab row visible, chip shows initials, and the menu's
     tab section is hidden (it is still rendered, just not shown). */
  /* fetch-516 (Jack): "my desktop view still has the initials as the drop down tab - i want the
     3 lines there". ☰ everywhere — one control, one meaning, on every screen size. */
  .acct-burger { display: inline-block; font-size: var(--t-section); line-height: 1; }
  .acct-init { display: none; }
  .acct-sec { padding: 6px 10px 4px; font-size: var(--t-sub); font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
  .acct-tab { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); }
  .acct-tab.on { font-weight: 700; background: var(--wash); }
  .acct-check { color: var(--brand-gold-dark); font-weight: 700; }
  #acctTabs { display: none; }
  @media (max-width: 640px) {
    #tabSlot { display: none; }          /* the row folds away — 44px back on every screen */
    #acctTabs { display: block; }
    .acct-menu { min-width: 244px; max-height: 74vh; overflow-y: auto; }
  }
  @media (min-width: 641px) and (max-width: 900px) { .acct { display: none; } } /* fetch-936: in the tablet band the tab row is on screen and the bottom bar holds the account rows, so the ☰ would open an empty card */
  .brandbar .titles .tagline { color: #c8d4e4; font-size: 10px; letter-spacing: 2.6px; text-transform: uppercase; margin-left: 6px; }
  .brandbar .titles .wm-diamond { background: linear-gradient(100deg, #f5c48a, #8c6145); -webkit-background-clip: text; background-clip: text; color: transparent; font-size: 9px; }
  @media (max-width: 560px) { .brandbar .titles { display: none; } }
  /* v1.8 (Jack): loans on the phone — rows wrap instead of jamming, buttons get real tap targets */
  @media (max-width: 640px) {
    .loan-card .row { flex-wrap: wrap; }
    .loan-card .row > div:last-child { justify-content: flex-start; width: 100%; }
    .loan-card .btn { padding: 8px 12px; }
  }
  /* ---- v1.9 (Jack): PHONE HARDENING PASS -----------------------------------------------
     Global net against unwrapped text + sideways scroll on small screens. Desktop untouched
     (everything lives behind the max-width guard). The page-by-page polish list is in the
     PHONE TARGETS project doc — Jack walks each page on his phone, we fix what the net misses. */
  @media (max-width: 640px) {
    html, body { overflow-x: hidden; }
    .row { flex-wrap: wrap; }
    .row > div, .grid > div, .brief-card > *, .attn-row > div { min-width: 0; }
    .card, .brief-card, .attn-block, .brief-item { overflow-wrap: break-word; word-break: break-word; }
    .bi-title, .bi-sub, .be-name, .be-meta, .attn-row strong { overflow-wrap: anywhere; }
    /* v2.0 (Jack's phone screenshots): tables SCROLL SIDEWAYS with readable cells — the v1.9
       word-break was crushing columns into one-letter-per-line stacks and splitting dollar
       amounts mid-number. Cells never break words; the whole table pans instead. */
    .card table, .beo2 table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .card table th, .card table td, .beo2 table th, .beo2 table td { word-break: normal; overflow-wrap: normal; white-space: nowrap; }
    .card table td { max-width: 260px; }
    .rpt-tbl-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .rpt-tbl th, .rpt-tbl td { word-break: normal; overflow-wrap: normal; white-space: nowrap; }
    input, select, textarea { font-size: 16px; } /* stops the iOS zoom-on-focus jump */
    /* fetch-614 (Jack: "Can we eliminate being able to pinch and zoom (or the reason we need to)
       on the phone? It bugs me on almost every page").
       THE RULE ABOVE HAS BEEN LOSING. iOS Safari zooms the page whenever you focus a control
       whose computed font-size is under 16px, and `input` alone is specificity (0,0,1) — every
       component rule that sets its own size beats it. Sixteen of them did, including .field
       input/select/textarea, which is the form primitive used on nearly every screen. So the
       fix was there and it was overridden almost everywhere: tap a field, the page jumps, pinch
       back out. That is the "almost every page" part, and it is not a per-screen bug.
       Three :not()s carry this to (0,3,1), which outranks every class-level rule in the file.
       #pSearch is named because an id beats any number of them. Checkboxes and radios are
       excluded — they have no text and iOS never zooms for them.
       NOT doing user-scalable=no: iOS has ignored it since iOS 10, and taking zoom away from
       someone who needs it is a WCAG failure. Remove the reason, keep the ability.
       tests/phone-zoom.mjs is the gate that keeps this from rotting a seventeenth time. */
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
    select:not([multiple]):not([size]):not([hidden]),
    textarea:not([hidden]):not([disabled]):not([aria-hidden="true"]),
    input#pSearch { font-size: 16px; }
    .grid { grid-template-columns: 1fr; }
    .brief-cols { grid-template-columns: 1fr; }
    .attn-grid { grid-template-columns: 1fr; }
    .spend-cols { grid-template-columns: 1fr; }
    .btn { padding: 8px 12px; } /* real tap targets everywhere */
    img, canvas, svg { max-width: 100%; height: auto; } /* v2.1: asset QR / photos never widen the page */
  }
  /* Cormorant renders lighter/smaller than Georgia — compensate on display elements */
  .brief-hello { font-size: 26px; font-weight: 600; }
  .dash-section-title { font-weight: 700; }
  .qv-title, .wiki-card-title, .be-title { font-weight: 700; }
  .headwrap { padding-top: 18px; }
  h1 { font-size: 20px; margin: 0 0 2px; }
  h1, h2, .empty-state .es-title { text-wrap: balance; } /* fetch-431 (Taste polish): no orphaned words in headings; harmless where nowrap governs */
  .sub { color: var(--muted); font-size: 13px; margin-bottom: 18px; }
  .tabbar { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 16px; flex-wrap: wrap; }
  .tabbtn { padding: 8px 14px; font-size: 14px; border: none; background: transparent; color: var(--muted); cursor: pointer; border-bottom: 2px solid transparent; }
  .tabbtn.active { color: var(--navy); border-bottom-color: var(--gold); font-weight: 600; }
  /* fetch-497 — the tab row moves into the brand bar and SCROLLS instead of wrapping.
     The wrap was a real bug, not just a preference: between 721px and ~900px the row broke
     onto two lines and a TABLET carried more chrome (160px) than a phone did. nowrap +
     overflow-x kills that at every width, which is why this rule is not inside a query. */
  .tabslot { flex: 1 1 auto; min-width: 0;
    /* a scrolling strip with a hard edge reads as a truncated word, not as "there is more
       this way". The fade is the only affordance a scroller gets on a trackpad, where no
       scrollbar ever appears. Keywords not literals — the debt ratchet counts raw colours. */
    -webkit-mask-image: linear-gradient(to right, Black calc(100% - 22px), transparent);
    mask-image: linear-gradient(to right, Black calc(100% - 22px), transparent); }
  .tabslot .tabbar { border-bottom: 0; margin: 0; gap: 2px;
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .tabslot .tabbar::-webkit-scrollbar { display: none; }
  .tabslot .tabbtn { flex: 0 0 auto; white-space: nowrap; color: var(--brand-pink);
    padding: 7px 12px; border-bottom: 2px solid transparent; border-radius: var(--r-s) var(--r-s) 0 0; }
  .tabslot .tabbtn:hover { color: White; background: rgba(255, 255, 255, .07); }
  .tabslot .tabbtn.active { color: White; border-bottom-color: var(--brand-gold-light); font-weight: 600; } /* keyword, not a literal — the debt ratchet counts raw colours and this screen adds none */
  /* phone: the bar wraps and the strip takes its own full-width line — same two rows as
     before, but both navy, and the pink toolbar row above the content is gone. Squeezing
     tabs beside the chip on a 390px screen would leave them ~80px of runway, which is worse
     than the full-width scroller they have today. */
  @media (max-width: 720px) {
    .brandbar { flex-wrap: wrap; row-gap: 2px; padding-bottom: 0; }
    .tabslot { order: 3; flex-basis: 100%; margin: 0 -20px; padding: 0 20px; }
    .tabslot .tabbtn { padding: 12px 14px; min-height: 44px; }
  }
  /* ---- Workspace nav (fetch-68) ---- */
  .wsbar { display: flex; gap: 3px; flex-wrap: wrap; margin: 4px 0 12px; background: var(--navy); border-radius: 11px; padding: 5px; }
  /* fetch-490: the workspace row collapses into a chip on the tab row.
     Measured at a true 390px with the mobile rules live: brandbar 72.7 + wsbar 54
     (+16 margins) + tabbar 45.1 (+16) = 221.8px of chrome above content, 26% of an
     844px phone. The wsbar row is the 70px that leaves. */
  /* fetch-1067: department identity is plain text. Navigation lives in the rail and bottom bar. */
  .wschip { display: inline-flex; align-items: center; min-height: var(--control-height-touch);
    color: var(--brand-pink); font-size: var(--t-section); font-weight: 600; line-height: 1.2;
    white-space: nowrap; }
  .ws-slot { gap: var(--s-2); }
  /* Contextual history remains available on phones and installed apps without a browser Back. */
  .af-backrow { max-width: 640px; margin: 10px auto 0; } /* fetch-550: the recap/QR page's Back-to-portal row (logged-in devices only) */
  .wsback { display: none; flex: 0 0 auto; align-items: center; justify-content: center; gap: var(--s-1);
    min-width: var(--control-height-touch); height: var(--control-height-touch); padding: 0 var(--s-1);
    border: 0; border-radius: var(--r-s); background: transparent;
    color: var(--brand-gold-light); font-family: inherit; cursor: pointer; }
  .wsback:hover, .wsback:active { background: rgba(245, 196, 138, .12); }
  .wsback .wsback-a { font-size: var(--t-section); line-height: 1; }
  .wsback .wsback-t { font-size: var(--t-sub); font-weight: 600; }
  @media (max-width: 359px) { .wsback .wsback-t { display: none; } }
  @media (max-width: 640px) { .wsback { display: inline-flex; } }
  /* fetch-526 — THE INSTALLED APP, AT ANY WIDTH. manifest.json is display:"standalone", so a
     portal added to a home screen or installed on a desktop runs in a window with NO browser
     back button. fetch-526 retires the in-page "← Back to …" buttons at every width on the
     strength of the browser's own control — which is precisely the control a standalone window
     does not have. Hiding them there and showing nothing would strand somebody on a detail page,
     so the chip appears instead. Measured, not assumed: manifest.json line 7. */
  @media (display-mode: standalone) { .wsback { display: inline-flex; } }
  /* ...and the same answer as a CLASS, because the media query alone is not testable here.
     Playwright in this sandbox cannot emulate display-mode (CDP reports false, and headless
     Chromium ignores --app), so a rule that only exists inside that media query can be read
     but never PROVEN. body.is-standalone is set from the same signal in render(), plus
     navigator.standalone for an iOS home-screen portal, and probe526c asserts the chip
     actually appears at 1440px with the class on. Belt and braces, one of which has a gate. */
  body.is-standalone .wsback { display: inline-flex; }
  /* fetch-879 — THE CRYSTAL RAIL (Direction A, ruled 09-01: "A now + B later"). Desktop-only:
     every rule lives behind ≥901px, so phone and tablet pay no inset and keep today's chrome.
     Spec: docs/sidebar-nav/BUILD-TICKET.md · ratified look: docs/sidebar-nav/mockup-A-the-rail.html.
     Grammar: fill/edge-bar = place (this rail), underline = view (the tab row) — never traded. */
  /* fetch-932 — DIRECTION B, THE PHONE/TABLET BOTTOM BAR (Jack's 09-01 "A now + B later", built
     09-04 when retiring Crystal Core made it a blocker: below 901px there was NO department
     switcher except the Crystal chip → Core, measured at zero visible workspace controls across
     six access tiers and every width from 360 to 900px).

     Same markup, two orientations. railHTML() has no width guard, so these buttons already
     shipped to the phone DOM and were hidden by `display:none` alone — this reveals them
     horizontally instead of drawing a second component.

     SEVEN slots is the ceiling: at 320px seven are 45.7px against the 44px touch minimum, eight
     would be 40px, and the desktop's nine would be 43px — already broken. So the three utility
     slots stay hidden here and fold into the .rail-more overflow. */
  .cse-rail { display: none; }
  @media (max-width: 900px) {
    /* GRID, not flex. With `flex: 1 1 0` on all seven the overflow still came out 8px narrower
       than the six departments (measured 38.9 vs 46.9 at 320px) — flex was resolving their
       content differently. `grid-auto-columns: 1fr` makes every track identical no matter how
       many slots the viewer's permissions produce, which is the property that matters here. */
    .cse-rail { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
      display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; align-items: stretch;
      gap: 0; padding: 0; background: var(--brand-blue-deep);
      border-top: 1px solid rgba(245, 196, 138, .14);
      padding-bottom: env(safe-area-inset-bottom, 0px); } /* the iOS home indicator sits under the bar, not over the last row of it */
    /* the vertical rail's furniture has no meaning on a horizontal bar */
    .cse-rail .rail-sep, .cse-rail .rail-gap, .cse-rail .rail-tip { display: none; }
    /* .rail-slot, NOT bare [data-workspace]: the overflow's menu items carry data-workspace too
       (so the rail's one binder wires them), and a bare attribute selector hid them as well —
       the menu measured 14px tall with nothing in it. */
    .cse-rail .rail-slot[data-workspace="wiki"], .cse-rail .rail-slot[data-workspace="admin"], .cse-rail .rail-slot[data-workspace="notes"] { display: none; } /* they ride the overflow here */
    /* every rule below restates what the ≥901px block declares, because that block does not
       apply here and a <button> with none of it renders as the browser's grey outset default */
    .cse-rail .rail-slot { position: relative; flex: 1 1 0; min-width: 0; width: auto; height: auto;
      min-height: calc(var(--control-height-touch) + var(--s-3)); padding: var(--s-2) 2px calc(var(--s-2) + 2px); /* fetch-936.1 (Jack, from his phone): a ~58px bar (this is the 56 floor; the 24 + 3 + 12 stack and the paddings set it) - the icon and its word were touching at 44 */
      border: 0; border-radius: 0; appearance: none; -webkit-appearance: none; cursor: pointer;
      background: transparent; color: var(--brand-gold-mid); font: inherit;
      display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; opacity: .72; }
    .cse-rail .rail-slot .ci { width: 24px; height: 24px; } /* fetch-936.1: the glyph grows with the bar (the markup says 22 for the desktop rail) */
    .cse-rail .rail-slot.is-here { opacity: 1; color: var(--brand-gold-light); background: transparent; } /* the edge bar carries "here" — a fill would fight the label */
    .cse-rail .rail-slot.is-here::before { content: ""; position: absolute; background: var(--brand-gold-light);
      left: 22%; right: 22%; top: 0; bottom: auto; width: auto; height: 3px;
      border-radius: 0 0 2px 2px; } /* the place marker rotates with the bar: it hugs the viewport edge, which is now the top of the bar */
    .cse-rail .rail-slot:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -2px; } /* inset — the bar is flush with the viewport edge, an outset ring would clip */
    .cse-rail .rail-lbl { display: block; font-size: var(--t-label); line-height: 1.1;
      max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .cse-rail .rail-dot { position: absolute; top: 4px; right: calc(50% - 16px); width: 8px; height: 8px; border-radius: 999px;
      background: var(--bad-fg); border: 2px solid var(--brand-blue-deep); } /* status red, never gold — gold means "here" */
    body.has-rail { padding-bottom: calc(var(--control-height-touch) + var(--s-3) + var(--s-4) + env(safe-area-inset-bottom, 0px)); } /* the last row of any page must clear the bar */
    /* the .ver-pill lift lives AFTER the base .ver-pill rule below, not here: probe534 locates the
       pill's z-index by the first occurrence of the selector followed by its opening brace, so a
       has-rail override ahead of the base rule reads as "no z-index" and reddens it. (This comment
       deliberately avoids spelling that exact substring — the first draft of it tripped the probe.) */
    /* the overflow's menu opens UPWARD: .hddm is written for a control with room beneath it,
       and this one has none. Modifier, not a second primitive. */
    .rail-more { position: relative; display: flex; flex: 1 1 0; min-width: 0; }
    .rail-more .rail-slot { flex: 1 1 auto; }
    /* scoped to .rail-more deliberately: the base .hddm sets `top: calc(100% + 4px)` and lives
       LATER in this file, so an equal-specificity .hddm--up would lose on source order. Two
       classes beat one at any position. */
    .rail-more .hddm--up { top: auto; bottom: calc(100% + 4px); right: var(--s-2); left: auto;
      width: min(20rem, calc(100vw - var(--s-4))); max-height: min(72vh, calc(100dvh - var(--phone-nav-height, 80px) - 92px)); overflow: hidden; }
    /* The [hidden] attribute is the menu's closed state, and the browser's own `[hidden] {
       display: none }` is a UA rule that ANY author `display` overrides — .hddm's `display: flex`
       was winning, so the menu rendered open with hidden=true (measured: 148px, visible, on a
       fresh boot). The app has no global [hidden] reset, and adding one to a 2.9 MB file with
       unknown reliance on today's behaviour is not this ticket. Three classes beat one. */
    .rail-more .hddm--up[hidden] { display: none; }
    /* fetch-1070: one bottom Menu, with Notifications beside search in the top bar. */
    #brandActions .bellwrap { display: inline-block; }
    #brandActions .acct { display: none; }
    #brandActions #hdrSearchBtn { min-width: var(--control-height-touch); min-height: var(--control-height-touch); }
    .acct-menu > .acct-who, .acct-menu > #acctSettings, .acct-menu > .acct-sep, .acct-menu > .acct-out, #acctTabs > .acct-sep:last-child { display: none; }
    .acct.acct--empty { display: none; }
    .rail-more .hddm-i { min-height: var(--control-height-touch); display: flex; align-items: center; gap: var(--s-2); color: var(--ink); } /* fetch-936.1: glyph + word (flex, or the gap is inert), and ink - iOS painted every row in its system blue */
    .rail-more .hddm-i.acct-out { color: var(--bad-fg); } /* Log out keeps its red - the ink rule above would out-specify .acct-out */
    .rail-more .hddm { padding: var(--s-1); gap: 2px; min-width: 232px; }
    .rail-more .acct-who { border: 0; margin: 0; padding: var(--s-2) var(--s-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; overflow-wrap: normal; }
    #railMenuMain { display: flex; flex-direction: column; min-height: 0; }
    #railMenuMain[hidden], #railAccountPanel[hidden] { display: none; }
    .rail-menu-heading { flex: none; padding: var(--s-3); }
    #railPages { overflow-y: auto; overscroll-behavior: contain; min-height: 0; padding: 0 var(--s-1); scrollbar-width: thin; scrollbar-color: var(--muted) var(--wash); }
    #railPages::-webkit-scrollbar { width: 6px; }
    #railPages::-webkit-scrollbar-track { background: var(--wash); }
    #railPages::-webkit-scrollbar-thumb { background: var(--muted); border-radius: var(--r-s); }
    #railPages .acct-item { min-height: var(--control-height-touch); padding: var(--s-2); font-size: var(--t-body); }
    #railPages .acct-item > span:first-child { flex: 1; }
    .rail-menu-tools { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); align-items: center;
      flex: none; border-top: 1px solid var(--line); margin-top: var(--s-2); padding: var(--s-2) var(--s-1); gap: var(--s-1); }
    .rail-more .rail-menu-tools .hddm-i { flex-direction: column; justify-content: center; gap: var(--s-1); padding: var(--s-2) var(--s-1); font-size: var(--t-sub); }
    .rail-more .rail-menu-tools .hddm-i .ci { width: 22px; height: 22px; }
    .rail-menu-account { display: flex; justify-content: center; padding: var(--s-1); }
    .rail-more .rail-account-btn { width: var(--control-height-touch); height: var(--control-height-touch); min-height: var(--control-height-touch);
      display: inline-flex; align-items: center; justify-content: center; padding: 0; background: var(--brand-gold-light);
      border: 1px solid var(--brand-gold-mid); border-radius: 50%; color: var(--brand-blue-deep); }
    .rail-more .rail-account-btn:hover { background: var(--brand-gold-mid); }
    .rail-more .rail-account-btn .ci { width: 22px; height: 22px; }
    #railAccountPanel { overflow-y: auto; }
    #railAccountPanel .hddm-i { width: 100%; font-size: var(--t-body); }
    .rail-more .rail-account-back { display: flex; align-items: center; gap: var(--s-2); min-height: var(--control-height-touch); font-size: var(--t-body); }
    .rail-account-back > span { font-size: var(--t-title); }
    .cse-rail .rail-dot { width: 10px; height: 10px; } /* 8px minus the 2px navy border was a 4px core under a thumb; the desktop slot keeps 8px */
  }
  /* fetch-1070: a short phone scrolls the whole Menu, so fixed tools cannot squeeze pages away. */
  @media (max-width: 900px) and (max-height: 600px) {
    .rail-more .hddm--up { overflow-y: auto; }
    #railMenuMain { display: block; }
    #railPages { overflow: visible; }
  }
  @media (min-width: 901px) {
    .rail-more { display: none; } /* desktop lists the utilities as their own slots */
    .cse-rail .rail-lbl { display: none; } /* the tooltip is the label here */
    body.has-rail { padding-left: 60px; } /* body padding, not a .wrap margin — auto-centering and every fixed overlay keep their own math */
    .cse-rail { position: fixed; top: 0; left: 0; bottom: 0; width: 60px; z-index: 30;
      display: flex; flex-direction: column; align-items: center; gap: var(--s-1);
      padding: var(--s-2) 0; background: var(--brand-blue-deep);
      border-right: 1px solid rgba(245, 196, 138, .14); }
    .rail-sep { width: 28px; height: 1px; background: rgba(240, 232, 224, .12); margin: var(--s-1) 0; flex: none; }
    .rail-gap { flex: 1 1 auto; }
    .rail-slot { position: relative; width: 44px; height: 44px; border: 0; border-radius: var(--r-s); flex: none;
      background: transparent; color: var(--brand-gold-mid); opacity: .72; cursor: pointer;
      display: flex; align-items: center; justify-content: center; }
    .rail-slot:hover { opacity: 1; background: rgba(240, 232, 224, .09); }
    .rail-slot.is-here { opacity: 1; color: var(--brand-gold-light); background: rgba(192, 146, 103, .18); }
    .rail-slot.is-here::before { content: ""; position: absolute; left: -8px; top: 12px; bottom: 12px; width: 3px;
      border-radius: 0 2px 2px 0; background: var(--brand-gold-light); } /* the edge bar hugs the viewport edge — place, never an underline */
    .rail-slot:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
    .rail-dot { position: absolute; top: 7px; right: 7px; width: 8px; height: 8px; border-radius: 999px;
      background: var(--bad-fg); border: 2px solid var(--brand-blue-deep); } /* status red, never gold — gold means "here" */
    .rail-tip { position: absolute; left: calc(100% + 10px); top: 50%; transform: translateY(-50%);
      background: var(--brand-blue-deep); color: var(--brand-pink); border: 1px solid rgba(245, 196, 138, .25);
      border-radius: var(--r-s); padding: 6px 10px; font-size: var(--t-sub); line-height: 1.4;
      white-space: nowrap; text-align: left; font-variant-numeric: tabular-nums;
      opacity: 0; pointer-events: none; transition: opacity .12s ease; z-index: 320; }
    .rail-tip b { display: block; font-weight: 600; }
    .rail-tip span { color: rgba(240, 232, 224, .72); }
    .rail-slot:hover .rail-tip, .rail-slot:focus-visible .rail-tip { opacity: 1; }
  }
  /* fetch-529: the update pill, moved off inline styles so the ratchet counts down not up */
  .ver-pill { position: fixed; left: 50%; transform: translateX(-50%); bottom: 18px; z-index: 600;
    background: var(--navy); color: var(--wash); border: 1px solid var(--gold); border-radius: 999px;
    padding: 10px 18px; font-size: var(--t-sub); cursor: pointer; box-shadow: 0 8px 24px rgba(36, 43, 66, .35); }
  /* fetch-932: below 901px the phone bar owns the bottom edge, and the pill sat at 18px directly
     under it. Placed after the base rule on purpose (see the note in the rail's phone block);
     `body.has-rail .ver-pill` outranks `.ver-pill` on specificity wherever it sits. */
  @media (max-width: 900px) { body.has-rail .ver-pill { bottom: calc(var(--control-height-touch) + var(--s-3) + var(--s-3) + env(safe-area-inset-bottom, 0px)); } }
  /* fetch-1069: desktop department identity leads the full-width header; the icons start below it.
     The existing observer measures this bar at every width. Reserve its height in the body so
     reading/form width limits stay on .wrap; absolute positioning still scrolls away normally. */
  @media screen and (min-width: 901px) {
    body.has-rail { --desktop-nav-height: max(calc(var(--control-height-touch) + var(--s-4) + 3px), var(--phone-nav-height, 0px));
      padding-top: var(--desktop-nav-height); }
    body.has-rail .brandbar { position: absolute; inset: 0 0 auto; z-index: 40;
      margin: 0; padding-left: var(--s-4); padding-right: var(--s-4); }
    body.has-rail .ws-slot { flex: 0 0 auto; margin-right: var(--s-3); }
    body.has-rail .wschip { order: -1; color: var(--brand-gold-light); font-size: var(--t-title); }
    body.has-rail .wsback { color: var(--brand-pink); }
    body.has-rail .cse-rail { padding-top: calc(var(--desktop-nav-height) + var(--s-2)); }
  }
  /* Short desktop windows scroll the full rail with the page, keeping its utility buttons
     reachable without clipping the labels that extend to the right of the icons. */
  @media screen and (min-width: 901px) and (max-height: 500px) {
    body.has-rail .cse-rail { position: absolute; bottom: auto; min-height: 100dvh; }
  }
  /* fetch-534: WHAT'S-NEW RELEASE RECEIPT — non-blocking sheet shown once per release per login
     (data + trigger live next to BUILD_CACHE_TAG). No scrim, no focus trap: the page behind
     stays fully usable. Sits UNDER the ver-pill's z-index on purpose — a live newer build
     outranks reading about this one. */
  /* fetch-619 (Jack: "Can the (what's new banner) be a full page that pops up? The small box makes
     it difficult to read when scrolling and will make people click out before reading contents").
     It was a bottom sheet over a live, scrollable dashboard — so it competed with the page behind
     it and read as something to dismiss. A release receipt is read ONCE per deploy; it can afford
     the whole screen for those ten seconds, and taking the screen is what makes it get read.
     Phone: full page. Desktop: a centred dialog on a dimmed backdrop, same idea, not silly-wide.
     The list scrolls INSIDE the page so the header and the Got-it button never leave. */
  .wn-scrim { position: fixed; inset: 0; z-index: 589; background: rgba(20, 33, 61, .46); }
  /* fetch-624: the payroll-only update block. Deliberately NOT dismissable — the one button is
     the only way out, because "remind me later" on a payroll screen is how a punch gets edited
     on a build that cannot close it. */
  .ver-block { position: fixed; inset: 0; z-index: 700; background: rgba(20, 33, 61, .58); display: grid; place-items: center; padding: var(--s-4); }
  .ver-block-card { background: var(--surface-card); border-radius: var(--r-l); border: 1px solid var(--line); max-width: 420px; padding: var(--s-5); text-align: center; box-shadow: 0 18px 48px rgba(36, 43, 66, .3); }
  .ver-block-t { font-size: var(--t-section); font-weight: 700; color: var(--text-heading); }
  .ver-block-p { font-size: var(--t-body); color: var(--muted); margin: var(--s-2) 0 var(--s-4); line-height: 1.5; }
  .ver-block-btn { width: 100%; min-height: var(--control-height-touch); border: 0; border-radius: var(--r-m); background: var(--action-primary); color: var(--surface-card); font: inherit; font-size: var(--t-body); font-weight: 700; cursor: pointer; }
  .ver-block-btn:disabled { opacity: .7; }
  .wn-sheet { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 590;
    width: min(620px, calc(100vw - 20px)); max-height: min(86vh, 780px); display: flex; flex-direction: column;
    background: var(--surface-card); border: 1px solid var(--line);
    border-radius: var(--r-l); box-shadow: 0 18px 48px rgba(36, 43, 66, .28); overflow: hidden; }
  .wn-head { flex: 0 0 auto; display: flex; align-items: baseline; gap: var(--s-2); padding: var(--s-4) var(--s-4) var(--s-3); border-bottom: 1px solid var(--hair); }
  .wn-kicker { font-size: var(--t-label); font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--gold-dark); }
  .wn-title { font-size: var(--t-section); font-weight: 700; color: var(--text-heading); }
  .wn-date { margin-left: auto; font-size: var(--t-sub); color: var(--muted); }
  .wn-list { flex: 1; min-height: 0; overflow: auto; padding: 0 var(--s-4); -webkit-overflow-scrolling: touch; }
  .wn-item { padding: var(--s-3) 0; border-bottom: 1px solid var(--hair); }
  .wn-item:last-child { border-bottom: 0; }
  /* Jack's redline on the first build: pill chips of varying width threw the titles out of
     alignment. The tag is now a small colored LABEL stacked above the title — one text column,
     everything left-aligns. The word itself is the signal, so color is never the only carrier. */
  .wn-tag { display: inline-block; font-size: var(--t-label); font-weight: 700; letter-spacing: .09em; text-transform: uppercase; margin-bottom: 2px; }
  .wn-tag--new { color: var(--ok-fg); }
  .wn-tag--improved { color: var(--info-fg); }
  .wn-tag--fixed { color: var(--mute-fg); }
  .wn-name { font-size: var(--t-body); font-weight: 600; color: var(--ink); }
  .wn-copy { font-size: var(--t-sub); color: var(--muted); line-height: 1.45; margin-top: 2px; }
  .wn-foot { flex: 0 0 auto; display: flex; align-items: center; padding: var(--s-3) var(--s-4); border-top: 1px solid var(--hair); background: var(--wash); }
  .wn-count { font-size: var(--t-sub); color: var(--muted); }
  .wn-done { margin-left: auto; border: 0; border-radius: var(--r-m); min-height: var(--control-height-sm);
    background: var(--action-primary); color: var(--surface-card); font-family: inherit; font-size: var(--t-sub); font-weight: 700;
    padding: 0 var(--s-4); cursor: pointer; }
  .wn-done:hover { background: var(--navy-dark); }
  @media (max-width: 640px) { /* fetch-619: on a phone it IS the page — edge to edge, safe-area aware, nothing behind it to compete with */
    .wn-sheet { left: 0; top: 0; transform: none; width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; border: 0; border-radius: 0; }
    .wn-head { padding-top: max(var(--s-4), env(safe-area-inset-top)); }
    .wn-foot { padding-bottom: max(var(--s-3), env(safe-area-inset-bottom)); }
    .wn-done { min-height: var(--control-height-touch); font-size: var(--t-body); }
  }
  /* fetch-1067: shared authentication backdrop; department navigation no longer uses a chooser. */
  .core-skybg { position: fixed; inset: 0; background: radial-gradient(circle at 50% 42%, rgba(192,146,103,.16) 0%, rgba(56,74,97,.18) 36%, rgba(0,0,0,0) 68%), var(--brand-blue-deep); z-index: 0; }
  .auth-loading { position: fixed; inset: 0; z-index: 700; background: var(--brand-blue-deep);
    display: grid; place-items: center; color: var(--brand-pink); }
  .auth-loading .core-skybg { position: absolute; }
  .auth-loading-content { position: relative; text-align: center; padding: var(--s-4); }
  .auth-loading-label { margin-top: var(--s-3); font-size: var(--t-body); }
  .core-loginwrap { position: fixed; inset: 0; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: var(--s-4); transition: opacity .45s ease, transform .45s ease; }
  .core-auth-out { opacity: 0; transform: scale(.96); pointer-events: none; }
  .core-login { width: min(92vw, 340px); box-sizing: border-box; background: rgba(240,232,224,.05); border: 1px solid rgba(240,232,224,.16); border-radius: var(--r-l); padding: var(--s-5); text-align: center; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
  .core-login-mark { color: var(--gold); width: 54px; height: 54px; margin: 0 auto; }
  .core-login-mark svg { width: 100%; height: 100%; display: block; }
  .core-login-word { font-family: 'Cormorant Garamond', Georgia, serif; font-size: var(--t-display); font-weight: 700; letter-spacing: .3em; color: var(--brand-pink); margin-top: var(--s-2); }
  .core-login-sub { font-size: var(--t-label); letter-spacing: .3em; color: rgba(240,232,224,.55); margin-bottom: var(--s-4); }
  .core-login .field { text-align: left; }
  .core-login .field label { color: rgba(240,232,224,.65); }
  .core-login input { width: 100%; box-sizing: border-box; background: rgba(240,232,224,.07); border: 1px solid rgba(240,232,224,.22); color: var(--brand-pink); border-radius: var(--r-s); padding: 10px 12px; font-size: var(--t-body); font-family: inherit; }
  .core-login input:focus { outline: 2px solid var(--focus-ring); outline-offset: 1px; border-color: var(--brand-gold-mid); }
  /* Three classes keep generic button hover/mobile rules from repainting the auth action brown. */
  .btn.btn-gold.core-login-btn { width: 100%; min-height: var(--control-height-touch); margin-top: var(--s-4);
    font-size: var(--t-body); background: var(--brand-gold-light); border-color: var(--brand-gold-light);
    color: var(--brand-blue-deep); opacity: 1; }
  .btn.btn-gold.core-login-btn:hover:not(:disabled) { background: var(--brand-gold-mid); border-color: var(--brand-gold-mid); color: var(--brand-blue-deep); }
  .btn.btn-gold.core-login-btn:disabled { cursor: wait; }
  .btn.btn-gold.core-login-btn:focus-visible { outline-color: var(--brand-gold-light); outline-offset: var(--s-1); }

  .core-login-back { width: 100%; margin-top: var(--s-2); background: rgba(240,232,224,.07); color: var(--brand-pink); border-color: rgba(240,232,224,.25); }
  .core-login .err { background: rgba(0,0,0,.25); color: var(--brand-gold-light); border: 1px solid rgba(192,146,103,.5); border-radius: var(--r-s); padding: 8px 10px; margin-bottom: var(--s-3); }
  .core-login--err { animation: coreShake .35s ease; }
  @keyframes coreShake { 0%, 100% { transform: none; } 25% { transform: translateX(-7px); } 55% { transform: translateX(6px); } 80% { transform: translateX(-3px); } }
  .core-login-hint { margin-top: var(--s-4); color: rgba(240,232,224,.45); font-size: var(--t-sub); text-align: center; max-width: 340px; }
  .core-login-forgot { display: block; width: 100%; margin-top: var(--s-3); background: none; border: none; color: rgba(240,232,224,.55); font-size: var(--t-sub); text-align: center; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; } /* fetch-531 */
  .core-login-forgot:hover { color: var(--brand-gold-light); }
  .core-login-note { background: rgba(22,163,74,.14); border: 1px solid rgba(22,163,74,.4); color: rgb(187,247,208); border-radius: 8px; padding: 8px 10px; font-size: var(--t-sub); margin-bottom: var(--s-3); } /* fetch-531 */
  .core-login-para { margin: 6px 0 12px; text-align: center; } /* fetch-531 */
  @media (prefers-reduced-motion: reduce) { .core-loginwrap { transition: none; } .core-login--err { animation: none; } }
  .wsbtn { padding: 9px 17px; font-size: 14px; font-weight: 600; border: none; background: transparent; color: #c8d4e4; cursor: pointer; border-radius: 8px; letter-spacing: .2px; transition: .12s; }
  .wsbtn:hover { color: #fff; background: rgba(255,255,255,.09); }
  .wsbtn.active { color: var(--navy); background: #fff; }
  /* ---- Home briefing ---- */
  .brief-hero { background: linear-gradient(135deg, var(--navy), #4a5f7d); color: #fff; border-radius: 14px; padding: 18px 20px; margin-bottom: 14px; }
  .brief-hello { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 22px; font-weight: 700; margin: 0; }
  .brief-date { color: #c8d4e4; font-size: 13px; margin-top: 2px; }
  .brief-headline { margin-top: 12px; font-size: 15px; line-height: 1.5; color: #eef2f8; }
  .brief-headline .num { color: var(--gold); font-weight: 700; }
  .lens-badge { background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.28); border-radius: var(--r-s); padding: 6px 10px; font-size: var(--t-sub); color: #c8d4e4; } /* fetch-503 */
  .brief-role { margin-left: auto; }
  .brief-role select { background: rgba(255,255,255,.14); color: #fff; border: 1px solid rgba(255,255,255,.28); border-radius: 8px; padding: 6px 9px; font-size: 12.5px; font-family: inherit; cursor: pointer; }
  .brief-role select option { color: #1a1a1a; }
  .brief-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 12px; margin-bottom: 14px; }
  .home-tiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; margin-bottom: 14px; align-items: start; } /* fetch-417: the time layer */
  .home-tier > h2 { font-size: var(--t-label); letter-spacing: .6px; text-transform: uppercase; color: var(--brand-gold-dark); margin: 0 0 8px 2px; height: 18px; line-height: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* fixed height — columns align (Jack) */
  .home-tier > h2 .ht-sub { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--muted); font-size: var(--t-sub); margin-left: 8px; }
  .home-tier .brief-card { margin-bottom: 12px; }
  .home-attn-filter { display: flex; align-items: center; gap: var(--s-2); margin: calc(-1 * var(--s-1)) 0 var(--s-2); }
  .home-attn-filter label { color: var(--muted); font-size: var(--t-sub); font-weight: 600; }
  .home-attn-filter .sel { min-width: 0; flex: 1; }
  /* ---- fetch-538: My Workspace Phase 1a (read-only Operations foundation) ---- */
  .myws-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-3); margin-bottom: var(--s-4); }
  .myws-title { margin: 0; color: var(--text-heading); font-family: 'Cormorant Garamond', Georgia, serif; font-size: var(--t-title); }
  .myws-sub { margin-top: var(--s-1); color: var(--muted); font-size: var(--t-sub); }
  .myws-chip { flex: 0 0 auto; padding: var(--s-1) var(--s-2); border-radius: var(--r-s); background: var(--mute-bg); color: var(--mute-fg); font-size: var(--t-label); font-weight: 700; }
  /* fetch-620: one compact control where a status pill and a full-size button used to sit. The
     dot is the whole status: gold = this layout is yours, absent = you are on the role default.
     Sized to the small control token so it reads as a tool, not as a call to action — nothing on
     a dashboard should compete with the work for attention. */
  /* .btn.myws-edit-btn, not .myws-edit-btn — .btn is defined LATER in this stylesheet and at the
     same specificity, so the plain class lost the source-order tiebreak and the button kept .btn's
     padding. The whole point of this rule is the size. */
  .btn.myws-edit-btn { flex: 0 0 auto; display: inline-flex; align-items: center; gap: var(--s-1);
    min-height: var(--control-height-sm); padding: 0 var(--s-3); font-size: var(--t-sub); line-height: 1; }
  .myws-edit-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--gold); margin-left: var(--s-1); }
  .myws-board { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); align-items: start; }
  .myws-lane { min-width: 0; }
  .myws-lane-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-2); min-height: var(--s-5); margin: 0 0 var(--s-2) var(--s-1); }
  .myws-lane-name { color: var(--brand-gold-dark); font-size: var(--t-label); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
  .myws-lane-hint { color: var(--muted); font-size: var(--t-label); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* fetch-620 — WHAT A PHONE READS BEFORE THE FIRST FACT. Counting Jack's screenshot: "My
     Workspace", "Operations · L1", "Saved layout", "Customize", "ACT NOW", "today's exceptions",
     "My Work", "Required", "1 NOW · 8 THIS WEEK" — nine pieces of chrome above one line of work.
     A dashboard is a control surface; on 390px the labels have to earn their line.
     Kept: the lane name (it groups), the workspace/level (it tells you whose queue this is), the
     urgency split (it IS information). Dropped on the phone only: the page title, which repeats
     the workspace chip in the app bar directly above it, and the lane subtitle, which explains a
     heading that is already three plain words. Both stay on the desk, where they cost nothing. */
  @media (max-width: 720px) {
    .myws-head { align-items: center; margin-bottom: var(--s-3); }
    .myws-title { display: none; }
    .myws-sub { margin-top: 0; font-size: var(--t-body); font-weight: 600; color: var(--navy); }
    .myws-lane-hint { display: none; }
    .myws-lane-head { min-height: 0; margin-bottom: var(--s-1); }
    /* a phone still needs a 44px target — smaller is not the goal, QUIETER is: it should read as
       a tool sitting beside the heading, not as the page's call to action */
    .btn.myws-edit-btn { min-height: var(--control-height-touch); }
  }
  .myws-stack { display: flex; flex-direction: column; gap: var(--s-3); }
  .myws-tile { min-width: 0; overflow: hidden; padding: var(--s-3) var(--s-4); border: 1px solid var(--line); border-radius: var(--r-m); background: var(--surface-card); }
  .myws-tile[data-size="compact"] { padding-bottom: var(--s-3); }
  .myws-tile-head { display: flex; align-items: center; gap: var(--s-2); margin-bottom: var(--s-2); }
  .myws-tile-icon { display: inline-flex; align-items: center; justify-content: center; width: var(--s-5); height: var(--s-5); border-radius: var(--r-s); background: var(--wash); font-size: var(--t-body); }
  .myws-tile-name { min-width: 0; color: var(--text-heading); font-size: var(--t-body); font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .myws-required { margin-left: auto; color: var(--muted); font-size: var(--t-label); }
  /* fetch-1056 (D2) - ONE LINE PER ROW, on every tile on all six dashboards (Jack's rulings 3 and 4: no long text in
     tiles, phone-first at 390px, nothing past the edge at 320px). The title is the only column allowed to shrink, and it
     clips with an ellipsis (min-width: 0 spells out the zero minimum overflow: hidden already gives it). The meta never shrinks - every builder in
     operationsDashboardData keeps it short enough to sit beside a 4.5rem title at 320px - and its max-width is a fence
     for a string no builder should produce: a runaway meta ellipsizes instead of blanking the title or shoving a quick
     action off the card. That matters because .myws-tile clips its overflow and html/body hide sideways overflow on a
     phone, so a row that is too wide scrolls nothing and is simply invisible - no page-width check can see it.
     A tile whose rows carry quick actions reserves the same slot on every row it shows (mywsRows counts it from the rows,
     never the DOM), so the meta column ends at one edge. At 320px the fence leaves a meta 162 / 118 / 82 px with 0 / 1 / 2
     buttons; at 390px 232 / 188 / 152. */
  .myws-row { --myws-title-min: 4.5rem; --myws-acts-w: 0rem; display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); padding: var(--s-2) 0; border-top: 1px solid var(--hair); }
  .myws-row:first-child { border-top: 0; }
  .myws-row-main { flex: 1 1 auto; min-width: 0; color: var(--ink); font-size: var(--t-sub); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .myws-row-meta { flex: 0 0 auto; max-width: calc(100% - var(--myws-title-min) - var(--s-2) - var(--myws-acts-w)); color: var(--muted); font-size: var(--t-label); text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .myws-row-meta[data-tone="bad"] { color: var(--bad-fg); }
  .myws-row-meta[data-tone="warn"] { color: var(--warn-fg); }
  .myws-row-meta[data-tone="ok"] { color: var(--ok-fg); }
  .myws-row-meta[data-tone="info"] { color: var(--info-fg); }
  .myws-row--jump { cursor: pointer; margin: 0 calc(-1 * var(--s-2)); padding-left: var(--s-2); padding-right: var(--s-2); border-radius: var(--r-s); } /* fetch-542: deep-link rows */
  .myws-row--jump:hover, .myws-row--jump:focus-visible { background: var(--wash); }
  .myws-row--jump .myws-row-main { color: var(--navy); }
  .myws-row-ico { flex: 0 0 auto; display: inline-flex; align-items: center; color: var(--brand-gold-dark); } /* fetch-543 */
  .myws-row-acts { flex: 0 0 auto; display: inline-flex; justify-content: flex-end; gap: var(--s-1); margin-left: var(--s-1); }
  .myws-row--acts1 { --myws-acts-w: calc(var(--control-height-sm) + var(--s-1) + var(--s-2)); }
  .myws-row--acts2 { --myws-acts-w: calc(2 * var(--control-height-sm) + 2 * var(--s-1) + var(--s-2)); }
  .myws-row--acts1 .myws-row-acts { flex-basis: var(--control-height-sm); }
  .myws-row--acts2 .myws-row-acts { flex-basis: calc(2 * var(--control-height-sm) + var(--s-1)); }
  .myws-act { display: inline-flex; align-items: center; justify-content: center; min-width: var(--control-height-sm); min-height: var(--control-height-sm); border: 1px solid var(--line); border-radius: var(--r-s); background: var(--surface-card); color: var(--navy); cursor: pointer; }
  .myws-act:hover, .myws-act:focus-visible { background: var(--wash); border-color: var(--gold); }
  /* fetch-544: tile skeleton — loading must never look like a real zero */
  .myws-skel-row { display: flex; justify-content: space-between; gap: var(--s-2); padding: var(--s-2) 0; border-top: 1px solid var(--hair); }
  .myws-skel-row:first-child { border-top: 0; }
  .myws-skel-bar { display: inline-block; height: var(--s-3); flex: 1 1 60%; border-radius: var(--r-s); background: var(--hair); animation: mywsPulse 1.4s ease-in-out infinite; }
  .myws-skel-bar--s { flex: 0 0 20%; animation-delay: .2s; }
  .myws-skel-label { margin-top: var(--s-1); color: var(--muted); font-size: var(--t-label); }
  .myws-err { color: var(--warn-fg); }
  @keyframes mywsPulse { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
  .myws-metric { padding: var(--s-1) 0; }
  .myws-metric-big { color: var(--text-heading); font-family: 'Cormorant Garamond', Georgia, serif; font-size: var(--t-title); font-weight: 700; line-height: 1; }
  .myws-metric-label, .myws-empty { margin-top: var(--s-1); color: var(--muted); font-size: var(--t-sub); }
  /* fetch-714: praise picker rows on the anon forms */
  .af-pr { grid-column: 1/-1; }
  .af-pr-row { display: flex; gap: var(--s-2); margin-bottom: 6px; }
  .af-pr-row input { flex: 1; }
  .af-pr-note { font-weight: 400; text-transform: none; letter-spacing: 0; }
  .fb-counted { color: var(--ok); }
  .af-warn { margin-top: 10px; text-align: left; }
  /* fetch-1064 (D4): THE ONE DOOR OF A TILE, in its header (mywsDoorHTML). It replaced the .myws-foot footer, which drew only
     when a tile had rows. A 44px target whose negative block margins hand back what it adds past the 24px tile icon, so the
     header is no taller than it was; it reaches into the card right padding the same way. The ring is inset because the
     tile clips its overflow and the top edge of the button sits only 2px inside the card.
     fetch-1058: the old footer ring and the .myws-line one below read var(--focus), which :root never defined (it is
     --focus-ring); an undefined custom property made the outline invalid and keyboard focus drew no ring at all. */
  .myws-door { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: var(--control-height-touch); height: var(--control-height-touch); margin: calc((var(--s-5) - var(--control-height-touch)) / 2) calc(-1 * var(--s-2)) calc((var(--s-5) - var(--control-height-touch)) / 2) auto; padding: 0; border: 0; border-radius: var(--r-s); background: none; color: var(--navy); font-size: var(--t-title); line-height: 1; cursor: pointer; }
  .myws-door:hover { background: var(--wash); color: var(--gold-dark); }
  .myws-door:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -2px; }
  .myws-split { display: flex; gap: var(--s-1); align-items: baseline; font-size: var(--t-label); font-weight: 700; color: var(--muted); margin-bottom: var(--s-2); letter-spacing: .04em; text-transform: uppercase; }
  .myws-split-now { color: var(--bad-fg); }
  .myws-split-dot { opacity: .5; }
  /* fetch-1055 (D1) — the Action items card groups by urgency rank. The group header REUSES
     .myws-split, the tile's own uppercase micro-label, so the card gains a reading layer without
     gaining a second visual vocabulary; all it adds is the right-aligned count. Scoped to
     .myws-work throughout, so none of this reaches the other 22 tiles that share .myws-row. */
  .myws-grp { justify-content: space-between; margin-top: var(--s-3); }
  .myws-split + .myws-grp { margin-top: 0; } /* the first group sits under the head count, not away from it */
  /* NO LONG TEXT IN A TILE (Jack's ruling 3). The row's prose `sub` is replaced by the kind word, and the kind holds a
     constant 4.5rem column so titles clip against the same edge on every row (Hotjar). fetch-1056 (D2) moved the one-line
     row itself - the clipping title, the meta that never wraps - onto .myws-row for every tile, so the fixed kind column
     is all this card still adds; probe1055 proves it constant. The row jumps to the record, which is where the untruncated
     title lives; the one row class that cannot be opened keeps its own sub instead (below). */
  .myws-work .myws-row-meta { flex: 0 0 4.5rem; }
  /* THE DATE STAYS WHOLE AND THE TITLE CLIPS FIRST (Asana, Todoist) — but only on the row that has
     no door, where the meta is the one place that row's date exists. Clipping it to "duty · due
     to..." would throw away the very fact the row kept its sub for. Every other row's meta is a
     single kind word that fits the column, so this changes nothing for them. */
  .myws-work .myws-row:not(.myws-row--jump) .myws-row-meta { flex: 0 0 auto; max-width: 60%; }
  /* a remainder line: a statement of account, and a 44px door when every item in it opens the
     same place (fetch-710). Never .myws-foot — that class is walked by probe710's nth=0 and this
     tile renders first in the lane, so borrowing it would silently move what that probe clicks. */
  .myws-line { padding: var(--s-2) 0; border-top: 1px solid var(--hair); color: var(--muted); font-size: var(--t-sub); font-variant-numeric: tabular-nums; }
  /* fetch-1066 (D5): Recaps owed's quiet state - the filed count follows the empty sentence as a second statement. The rule a
     remainder line draws above itself sat flush under the sentence and read as an underline, i.e. a link that is not one, so
     after .myws-empty the line drops its rule and its bottom padding and sits one step below. */
  .myws-empty + .myws-line { border-top: 0; padding: var(--s-1) 0 0; }
  .myws-line[data-myws-jump] { display: flex; align-items: center; min-height: var(--control-height-touch); color: var(--navy); font-weight: 600; cursor: pointer; }
  .myws-line[data-myws-jump]:hover { color: var(--gold-dark); text-decoration: underline; }
  .myws-line[data-myws-jump]:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
  /* fetch-540: My Workspace 1b — customize chrome (tokens only, ratchet-neutral) */
  .myws-actions { display: flex; align-items: center; gap: var(--s-2); flex: 0 0 auto; }
  .myws-editnote { color: var(--muted); font-size: var(--t-label); margin: calc(-1 * var(--s-2)) 0 var(--s-3); }
  .myws-tile.is-editable { border-style: dashed; background: var(--wash); }
  .myws-tile-tools { display: flex; align-items: center; gap: var(--s-1); margin-left: auto; }
  .myws-tool--size { gap: var(--s-1); padding: 0 var(--s-2); }
  /* fetch-628: the count that came with Requests when it stopped being a segment */
  .tab-badge { display: inline-block; margin-left: var(--s-1); min-width: 18px; padding: 0 5px; border-radius: 999px;
    background: var(--warn-bg); color: var(--warn-fg); font-size: var(--t-label); font-weight: 700;
    font-variant-numeric: tabular-nums; line-height: 18px; text-align: center; }
  .myws-size { font-size: var(--t-label); font-weight: 700; letter-spacing: .03em; }
  /* fetch-627 (Jack: "A little bit of wrapping problems here"). At 390px the edit header put a
     three-line title beside three buttons and pushed "Save layout" off the right edge, and every
     tile row spent 176px on four 44px controls — so the NAME truncated to "Open mainte…" while
     the buttons had room to spare. The name is the only part that tells you which tile you are
     moving. On a phone the actions get their own full-width row, under the thing they act on. */
  @media (max-width: 720px) {
    .myws-head { flex-direction: column; align-items: stretch; gap: var(--s-2); }
    .myws-actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2); }
    .myws-actions .btn { width: 100%; min-height: var(--control-height-touch); }
    .myws-actions .btn-primary { grid-column: 1 / -1; }   /* Save layout gets the full width */
    .myws-tile.is-editable .myws-tile-head { flex-wrap: wrap; }
    /* the icon and the name stay together on the first line — pushing the name to its own row
       left the icon stranded above it, which reads as a rendering fault rather than a layout */
    .myws-tile.is-editable .myws-tile-name { flex: 1 1 auto; white-space: normal; overflow: visible; }
    .myws-tile-tools { flex: 1 1 100%; margin-left: 0; gap: var(--s-2); }
    .myws-tile-tools .myws-tool { flex: 1 1 0; }
    .myws-tile-tools .myws-required { margin-left: auto; align-self: center; }
  }
  .myws-tool { display: inline-flex; align-items: center; justify-content: center; min-width: var(--control-height-touch); min-height: var(--control-height-touch); border: 1px solid var(--line); border-radius: var(--r-s); background: var(--surface-card); color: var(--navy); font-size: var(--t-body); cursor: pointer; }
  .myws-tool:disabled { opacity: .35; cursor: default; }
  .myws-tool[data-danger] { color: var(--bad-fg); }
  .myws-addtile { width: 100%; min-height: var(--control-height-touch); border: 1px dashed var(--gold); border-radius: var(--r-m); background: var(--wash); color: var(--gold-dark); font-size: var(--t-sub); font-weight: 700; cursor: pointer; }
  .myws-addtile:disabled { opacity: .5; cursor: default; border-style: solid; }
  .myws-drawer { margin-top: var(--s-2); border: 1px solid var(--line); border-radius: var(--r-m); background: var(--surface-card); padding: var(--s-2) var(--s-3); }
  .myws-drawer-cat { color: var(--muted); font-size: var(--t-label); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; margin: var(--s-2) 0 var(--s-1); }
  .myws-drawer-item { display: flex; align-items: center; gap: var(--s-2); width: 100%; min-height: var(--control-height-touch); padding: var(--s-1) var(--s-1); border: 0; border-top: 1px solid var(--hair); background: none; text-align: left; cursor: pointer; color: var(--ink); font-size: var(--t-sub); }
  .myws-drawer-empty { color: var(--muted); font-size: var(--t-sub); padding: var(--s-2) 0; }
  @media (max-width: 900px) { .myws-board { grid-template-columns: 1fr; } .myws-lane { max-width: none; } }
  .bi-snooze { display: none; border: none; background: var(--hair); color: var(--muted); width: 18px; height: 18px; border-radius: 50%; font-size: var(--t-label); line-height: 1; cursor: pointer; flex-shrink: 0; margin-top: 2px; }
  .brief-item:hover .bi-snooze { display: inline-flex; align-items: center; justify-content: center; }
  .bi-snooze:hover { background: var(--bad-bg); color: var(--bad-fg); }
  .attn-more { padding: 8px 2px 0; font-size: var(--t-sub); font-weight: 600; color: var(--muted); cursor: pointer; }
  .be-crew { margin-top: 2px; }
  .brief-card { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; }
  .brief-card h3 { margin: 0 0 10px; font-family: 'Cormorant Garamond', Georgia, serif; font-size: 15px; color: var(--navy); display: flex; align-items: center; gap: 8px; }
  .brief-card h3 .cnt { margin-left: auto; font-size: 12px; font-weight: 700; color: var(--gold-dark); background: #f3efe8; border-radius: 20px; padding: 1px 9px; }
  .brief-item { display: flex; gap: 10px; padding: 8px 0; border-bottom: 1px solid #f2f1ee; cursor: pointer; }
  .brief-item:last-child { border-bottom: none; }
  .brief-item:hover { background: #faf9f6; }
  .brief-sev { width: 8px; height: 8px; border-radius: 50%; margin-top: 5px; flex: 0 0 auto; }
  .brief-item .bi-title { font-weight: 600; font-size: 13.5px; color: var(--ink); }
  /* fetch-878: .mw-ico retired with the My Work page (fetch-451.2) */
  .brief-item .bi-sub { font-size: 12px; color: var(--muted); margin-top: 1px; }
  .brief-empty { color: #9aa3af; font-size: 13px; padding: 6px 0; }
  .brief-evt { border-left: 3px solid var(--vc, var(--gold)); padding: 8px 10px; background: #fcfbf8; border-radius: 6px; margin-bottom: 8px; cursor: pointer; }
  .brief-evt:last-child { margin-bottom: 0; }
  .brief-evt:hover { background: #f7f4ee; }
  .brief-evt .be-name { font-weight: 700; color: var(--navy); font-size: 14px; }
  .brief-evt .be-meta { font-size: 12px; color: var(--muted); margin-top: 1px; }
  .brief-evt .be-flag { font-size: 12px; color: #b91c1c; margin-top: 5px; font-weight: 600; }
  .brief-evt .be-ok { font-size: 12px; color: #166534; margin-top: 5px; font-weight: 600; }
  .rep-actions { display: flex; gap: 10px; flex-wrap: wrap; }
  /* ---- Crystal Wiki (fetch-81) ---- */
  .wiki-top { display: flex; gap: 8px; align-items: center; margin-bottom: 6px; }
  .wiki-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
  .wiki-card { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 15px 16px; cursor: pointer; border-top: 3px solid var(--gold); transition: .12s; }
  .wiki-card:hover { border-color: var(--navy); box-shadow: 0 3px 10px rgba(56,74,97,.08); transform: translateY(-1px); }
  /* fetch-668 (Jack): "a calm (+) sign in the empty space next to (sales) to let people know you can
     add a new category". Deliberately the QUIET twin of .wiki-card — dashed, no gold top rule, muted
     until hovered — because it is an invitation, not a sixth destination competing with the real ones. */
  .wiki-card--new { background: transparent; border: 1px dashed var(--line); border-top: 1px dashed var(--line); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; color: var(--muted); min-height: var(--control-height-touch); }
  .wiki-card--new:hover { background: var(--wash); border-color: var(--navy); border-style: dashed; color: var(--text-heading); box-shadow: none; transform: none; }
  .wiki-newcat-plus { font-size: var(--t-title); line-height: 1; }
  .wiki-newcat-lbl { font-size: var(--t-sub); font-weight: 600; margin-top: var(--s-1); }
  .wiki-card-title { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 16px; font-weight: 700; color: var(--navy); }
  .wiki-card-blurb { font-size: 12.5px; color: var(--muted); margin-top: 4px; line-height: 1.45; }
  .wiki-card-count { font-size: 11.5px; font-weight: 700; color: var(--gold-dark); margin-top: 10px; }
  /* fetch-641: wiki attachments. A picture reads as a picture and a video plays where the
     article is, rather than being a link called IMG_4471.HEIC. */
  .wiki-att-none { font-size: var(--t-sub); }
  .wiki-f { margin-bottom: var(--s-3); }
  .wiki-f--sec { max-width: 340px; }
  .wiki-f--pri { max-width: 260px; }
  .wiki-f--att { margin-top: var(--s-3); }
  .wiki-secnew { margin-top: var(--s-2); }
  .wiki-uprow { margin-top: var(--s-2); align-items: center; gap: var(--s-2); flex-wrap: wrap; }
  .wiki-upmsg, .wiki-att-go { font-size: var(--t-sub); }
  .wiki-atts { display: flex; flex-direction: column; gap: var(--s-1); }
  .wiki-att { display: flex; align-items: center; gap: var(--s-2); border: 1px solid var(--line); border-radius: var(--r-s); padding: var(--s-1) var(--s-2); background: var(--paper); font-size: var(--t-sub); }
  .wiki-att--link { text-decoration: none; color: inherit; }
  .wiki-att--link:hover { border-color: var(--gold); }
  .wiki-att-i { flex: 0 0 auto; }
  .wiki-att-n { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .wiki-attview { margin-top: var(--s-4); border-top: 1px solid var(--line); padding-top: var(--s-3); }
  .wiki-att-h { font-size: var(--t-label); letter-spacing: .07em; text-transform: uppercase; color: var(--muted); margin-bottom: var(--s-2); }
  .wiki-media { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--s-2); margin-bottom: var(--s-2); }
  .wiki-media img, .wiki-media video { width: 100%; height: auto; max-height: 320px; object-fit: cover; border-radius: var(--r-s); border: 1px solid var(--line); display: block; background: var(--wash); }
  .wiki-crumbs { font-size: 12.5px; color: var(--muted); margin-bottom: 10px; }
  .wiki-crumbs a { color: var(--navy); text-decoration: none; font-weight: 600; }
  .wiki-crumbs a:hover { text-decoration: underline; }
  /* fetch-616: the owner type-ahead. position:fixed and parented to <body> on purpose — it is
     used inside the Action Items drawer, and a dropdown that lives inside a scrolling panel
     gets clipped by it. Sizes come from tokens; the option is a 44px touch target. */
  .own-ta { position: fixed; z-index: 200; background: var(--surface-card); border: 1px solid var(--line); border-radius: var(--r-m); box-shadow: 0 10px 28px rgba(36,43,66,.18); overflow: hidden; max-height: 46vh; overflow-y: auto; }
  .own-ta-o { display: flex; flex-direction: column; gap: 1px; width: 100%; text-align: left; border: none; border-bottom: 1px solid var(--hair); background: none; padding: var(--s-2) var(--s-3); min-height: var(--control-height-touch); cursor: pointer; font: inherit; }
  .own-ta-o:last-child { border-bottom: none; }
  .own-ta-o:hover { background: var(--wash); }
  .own-ta-n { font-size: var(--t-body); font-weight: 600; color: var(--ink); }
  .own-ta-s { font-size: var(--t-label); color: var(--muted); }
  .wiki-art, .wiki-hit { padding: 10px 4px; border-bottom: 1px solid #f2f1ee; cursor: pointer; }
  .wiki-art:last-child, .wiki-hit:last-child { border-bottom: none; }
  .wiki-art:hover, .wiki-hit:hover { background: #faf9f6; }
  .wiki-art-title, .wiki-hit-title { font-weight: 600; font-size: 14px; color: var(--navy); }
  .wiki-art-sub, .wiki-hit-sub { font-size: 12px; color: var(--muted); margin-top: 2px; }
  .wiki-body { font-size: 14px; line-height: 1.6; color: var(--ink); }
  .wiki-body li { margin-bottom: 3px; }
  /* ===== fetch-480: notification rule builder. Jack, on the old form: "i dont understand
     the add new notification function you created at all ... if im creating a custom rule
     shouldnt i be able to set (cadence/to whom/how)". It was three unlabelled selects and
     two fields marked (optional) — the only words on screen described the least important
     inputs. Rebuilt as a sentence you can read. Tokens only, classes not inline styles. ===== */
  .nrb { border: 1px solid var(--line); border-radius: var(--r-m); background: var(--wash); padding: var(--s-4); }
  .nrb-legend { font-weight: 700; font-size: var(--t-body); margin-bottom: var(--s-3); }
  .nrb-line { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; margin-bottom: var(--s-2); }
  .nrb-word { font-size: var(--t-body); color: var(--muted); min-width: 54px; }
  .nrb-line .sel { max-width: 100%; min-width: 0; }
  .nrb-hint { font-size: var(--t-sub); color: var(--muted); margin: 0 0 var(--s-3) 62px; }
  .nrb-hint--flush { margin-left: 0; }
  .nrb-prev { border: 1px dashed var(--line); border-radius: var(--r-s); padding: var(--s-3); margin: var(--s-3) 0; }
  .nrb-prow { display: flex; gap: var(--s-2); align-items: flex-start; font-size: var(--t-sub); line-height: 1.5; padding: 2px 0; }
  .nrb-prow b { font-weight: 600; }
  .nrb-pgrow { flex: 1; }
  .nrb-picon { flex: 0 0 auto; width: 18px; text-align: center; }
  .nrb-msg { font-size: var(--t-sub); background: var(--hair); border-left: 3px solid var(--gold); padding: var(--s-2) var(--s-3); border-radius: 0 var(--r-s) var(--r-s) 0; margin-top: var(--s-1); }
  .nrb-fine { font-size: var(--t-sub); margin-top: var(--s-1); color: var(--muted); }
  .nrb-note { font-size: var(--t-sub); }
  .nrb-chip { display: inline-block; font-size: var(--t-label); font-weight: 700; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
  .nrb-chip--instant { background: var(--ok-bg); color: var(--ok-fg); }
  .nrb-chip--hourly, .nrb-chip--daily { background: var(--info-bg); color: var(--info-fg); }
  .nrb-chip--weekly { background: var(--mute-bg); color: var(--mute-fg); }
  .nrb-chip--pending { background: var(--warn-bg); color: var(--warn-fg); }
  .nrb-more { margin: var(--s-3) 0; }
  .nrb-more summary { font-size: var(--t-sub); color: var(--muted); cursor: pointer; }
  .nrb-acts { display: flex; gap: var(--s-2); flex-wrap: wrap; align-items: center; margin-top: var(--s-3); }
  .nrb-acts .muted { font-size: var(--t-sub); }
  .nrb-modal { max-width: 560px; text-align: left; }
  .nrb-mhead { flex: 1; font-weight: 700; }
  .nrb-line.nrb-hide, .nrb-more.nrb-hide { display: none; } /* fetch-1104: "how often" and the wording box follow the rule's event */
  .recap-linked { box-shadow: 0 0 0 2px var(--gold); } /* fetch-1104: the recap a recap email's button opened */
  /* the saved list, grouped by event */
  .nrl-grp { border-top: 1px solid var(--hair); padding: var(--s-3) 0 var(--s-2); }
  .nrl-grp:first-of-type { border-top: 0; }
  /* fetch-508 (Jack's phone tier-walk, Action Items): the goal/action button strip was an
     inline nowrap flex — plan ▾ + S.M.A.R.T. + Check-in + Hit + Missed + × is wider than a
     phone, so the tail clipped off-screen (✕ Missed unreachable). Hoisted to a class
     (inline ▼) and allowed to WRAP on phones. Same fetch-501/507 defect class. */
  .goal-acts { white-space: nowrap; display: flex; gap: 5px; align-items: flex-start; }
  @media (max-width: 640px) { .goal-acts { white-space: normal; flex-wrap: wrap; } }
  /* fetch-532: the SHARED primitive for card-header button groups — the BEO header and the
     trainee Capture-links header were both inline nowrap flexes, so their tail buttons
     ("View / Print BEO →", "↻ Regenerate") clipped off-screen at phone widths. Same
     fetch-501/507/508 defect class; one class so every future header inherits the fix. */
  .card-acts { display: flex; gap: 6px; align-items: flex-start; }
  @media (max-width: 640px) { .card-acts { flex-wrap: wrap; justify-content: flex-end; } }
  /* fetch-509: the survey row's merged ⋯ menu (Share items + Edit/Delete). Hoisted from inline
     so phones can pin it INSIDE the viewport — the old Share menu anchored right:0 on whatever
     side of the screen its button wrapped to, and opened half off-screen (Jack's screenshot). */
  .hddm { position: absolute; right: 0; top: calc(100% + 4px); background: var(--surface-card, White); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 10px 28px rgba(0, 0, 0, .16); padding: 6px; z-index: 300; min-width: 190px; display: flex; flex-direction: column; gap: 4px; }
  .hddm-sep { border-top: 1px solid var(--hair); margin: 2px 0; }
  @media (max-width: 640px) { .svy-row .hddm, .cse-modal .hddm { position: fixed; left: var(--s-3); right: var(--s-3); top: auto; margin-top: 4px; } } /* fetch-874: the groups modal's per-group ⋯ needs the same phone pin — .cse-modal is overflow:auto and would clip an absolute menu */
  .nrl-head { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; margin-bottom: var(--s-1); }
  .nrl-name { font-weight: 700; font-size: var(--t-body); }
  .nrl-when { font-size: var(--t-sub); color: var(--muted); margin-bottom: var(--s-2); }
  .nrl-row { display: flex; align-items: center; gap: var(--s-2); padding: var(--s-2); border-radius: var(--r-s); border: 1px solid var(--hair); margin-bottom: var(--s-1); }
  .nrl-row.is-off { opacity: .55; }
  .nrl-row.is-new { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(192, 146, 103, .22); }
  .nrl-what { flex: 1; min-width: 0; font-size: var(--t-sub); }
  .nrl-says { color: var(--muted); }
  /* fetch-507 (Jack's phone screenshot, HR → Onboarding): the fetch-501 crush class again —
     .nrl-row is a no-wrap flex line whose buttons can't shrink, so on a phone the name column
     collapsed to one character per line. On phones the text takes the full first line and the
     actions wrap beneath it. Fixes the notification-rules list the same way for free. */
  @media (max-width: 640px) {
    .nrl-row { flex-wrap: wrap; }
    .nrl-row > .nrl-what { flex: 1 1 100%; }
    .nrl-row .nh-idin { flex: 1 1 90px; min-width: 90px; }
  }
  /* fetch-481: New Hires card bits */
  .nh-toprow { align-items: center; gap: var(--s-2); }
  .nh-head { flex: 1; }
  .nh-sub { font-size: var(--t-sub); }
  .nh-empty { padding: var(--s-1) 0; font-size: var(--t-sub); }
  .nh-dates { width: 100%; font-family: inherit; }
  .nh-idin { width: 90px; flex: none; }
  /* fetch-485: system-populated formal-serve training options */
  .nh-fnwrap { max-height: 300px; overflow-y: auto; border: 1px solid var(--hair); border-radius: var(--r-s); padding: var(--s-2); margin-top: var(--s-1); }
  .nh-fngrp { font-size: var(--t-sub); color: var(--muted); font-weight: 700; margin: var(--s-3) 0 var(--s-1); }
  .nh-fngrp:first-child { margin-top: 0; }
  .nh-fn { display: block; width: 100%; text-align: left; margin-bottom: var(--s-1); font-size: var(--t-sub); }
  .nh-fn.is-on { border-color: var(--gold); background: rgba(192, 146, 103, .16); font-weight: 600; }
  .nh-fnnote { color: var(--muted); font-weight: 400; }
  .nh-fnnone { font-size: var(--t-sub); color: var(--muted); padding: var(--s-1) 0; }
  .nh-count { font-size: var(--t-sub); color: var(--muted); margin-left: var(--s-2); }
  .nh-fnchips { display: flex; flex-wrap: wrap; gap: var(--s-1); margin-top: var(--s-1); align-items: center; }
  .nh-days { display: flex; flex-wrap: wrap; gap: var(--s-1); margin-top: var(--s-1); }
  .nh-day { display: inline-flex; align-items: center; gap: var(--s-1); font-size: var(--t-sub); border: 1px solid var(--hair); border-radius: var(--r-pill); padding: 1px var(--s-2); }
  .nh-dayok { color: var(--muted); }
  .nh-shiftmodal { max-width: 460px; }
  .nh-tplrow { display: flex; flex-wrap: wrap; gap: var(--s-1); margin-top: var(--s-1); }
  .nh-vchip { font-size: var(--t-sub); padding: 2px var(--s-2); border-radius: var(--r-pill); border: 1px solid var(--hair); background: transparent; cursor: pointer; color: inherit; font-family: inherit; }
  .nh-vchip.is-on { border-color: var(--gold); background: rgba(192, 146, 103, .18); font-weight: 700; }
  .nh-vchip b { font-weight: 700; }
  .nh-vchip .nh-vn { color: var(--muted); margin-left: 3px; }
  .nh-vchip.is-on .nh-vn { color: inherit; }
  /* fetch-484: roster archive */
  .ros-archmeta { font-size: var(--t-sub); color: var(--muted); margin-top: var(--s-1); display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }
  @media (max-width: 640px) {
    .nrb-word { min-width: 0; }
    .nrb-hint { margin-left: 0; }
    .nrb-line .sel { flex: 1 1 100%; }
  }
  /* ---- Calendar quick-view (fetch-81) ---- */
  .qv-backdrop { position: fixed; inset: 0; background: rgba(20,33,61,.35); z-index: 200; display: flex; align-items: center; justify-content: center; padding: 16px; }
  .qv-card { background: #fff; border-radius: 14px; max-width: 380px; width: 100%; box-shadow: 0 18px 50px rgba(0,0,0,.3); border-top: 4px solid var(--gold); overflow: hidden; }
  .ros-modal { max-width: 900px; width: 100%; max-height: 88vh; overflow-y: auto; border-radius: 14px; } /* fetch-455 (Jack): roster edit opens OVER the list (calendar quick-view pattern) — no more scroll-to-top; the form's own cards paint the surface · fetch-868: a little wider for the left rail */
  /* fetch-868 — the WIW-shaped left rail (Jack's Roster-UX card). Gold is the one active
     indicator (jewelry); on a phone the rail becomes a horizontal chip row. */
  .ros-shell { display: flex; gap: var(--s-4); align-items: flex-start; }
  .ros-nav { flex: 0 0 168px; display: flex; flex-direction: column; gap: 2px; position: sticky; top: 0; }
  .ros-nav-btn { text-align: left; border: none; background: none; padding: var(--s-2) var(--s-3); border-radius: var(--r-s); font-size: var(--t-body); font-family: inherit; color: var(--muted); cursor: pointer; border-left: 2px solid transparent; min-height: 44px; }
  .ros-nav-btn:hover { background: var(--wash); }
  .ros-nav-btn.on { color: var(--ink); background: var(--wash); border-left-color: var(--gold); font-weight: 600; }
  .ros-panes { flex: 1; min-width: 0; }
  .ros-panes .form-sec.fm-first, .ros-panes .form-sec { margin-top: 0; }
  .ros-pane--off { display: none; }
  .ros-to-row { display: flex; gap: var(--s-3); padding: var(--s-1) 0; border-top: 1px solid var(--hair); font-size: var(--t-sub); align-items: baseline; flex-wrap: wrap; }
  .ros-to-row:first-of-type { border-top: none; }
  /* fetch-867: the ADP position-codes screen */
  .apc-acts { display: flex; gap: var(--s-2); align-items: center; flex-wrap: wrap; }
  .apc-acts .sel { max-width: 340px; }
  .apc-title { margin-top: var(--s-3); }
  @media (max-width: 640px) {
    .ros-shell { flex-direction: column; }
    .ros-nav { position: static; flex-direction: row; flex-wrap: wrap; width: 100%; border-bottom: 1px solid var(--line); padding-bottom: var(--s-2); }
    .ros-nav-btn { border-left: none; border-bottom: 2px solid transparent; }
    .ros-nav-btn.on { border-bottom-color: var(--gold); }
  }
  /* fetch-546: Sync-from-WIW preview rows */
  .wiws-sub { font-size: var(--t-sub); margin: var(--s-1) 0 var(--s-2); }
  .wiws-row { display: flex; align-items: baseline; gap: var(--s-2); padding: var(--s-1) var(--s-1); border-bottom: 1px solid var(--line); cursor: pointer; }
  .wiws-row:last-child { border-bottom: none; }
  .wiws-row input { flex: 0 0 auto; transform: translateY(2px); }
  .wiws-row--info { cursor: default; opacity: .85; }
  .wiws-meta { display: block; color: var(--muted); font-size: var(--t-sub); }
  .wiws-empty { font-size: var(--t-sub); padding: var(--s-1) 0; }
  .qv-head { padding: 14px 16px 10px; }
  .qv-title { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 18px; font-weight: 700; color: var(--navy); margin: 0; }
  .qv-meta { font-size: 12.5px; color: var(--muted); margin-top: 3px; }
  .qv-rows { padding: 4px 16px 12px; }
  .qv-row { display: flex; gap: 10px; padding: 5px 0; font-size: 13px; border-bottom: 1px solid #f4f3f0; }
  .qv-row:last-child { border-bottom: none; }
  .qv-row .k { color: var(--muted); min-width: 84px; flex: 0 0 auto; }
  .qv-row .v { color: var(--ink); font-weight: 600; }
  .qv-foot { display: flex; gap: 8px; padding: 12px 16px; background: #fbfaf8; border-top: 1px solid var(--line); }
  .qv-hint { font-size: 11px; color: var(--muted); text-align: center; padding: 0 16px 12px; margin-top: -4px; }
  /* ---- fetch-84: hospitality skin ---- */
  body { background: #f0e8e0; }
  .card { border-radius: 14px; box-shadow: 0 1px 5px rgba(56,74,97,.06); border-color: #e7dfcf; }
  .dash-section-title { font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif; letter-spacing: .2px; }
  .brief-card h3, .qv-title, .wiki-card-title { letter-spacing: .2px; }
  .btn { border-radius: 9px; }
  .fin-table thead th { background: #faf6ee; }
  .brief-hero.h-morning { background: linear-gradient(135deg, #384a61 0%, #8c6145 100%); }
  .brief-hero.h-afternoon { background: linear-gradient(135deg, #384a61 0%, #4a5f7d 100%); }
  .brief-hero.h-evening { background: linear-gradient(135deg, #242b42 0%, #43305e 100%); }
  /* ---- fetch-84: venue color identity ---- */
  .vchip { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; color: var(--vc); background: color-mix(in srgb, var(--vc) 11%, #fff); border: 1px solid color-mix(in srgb, var(--vc) 32%, #fff); border-radius: 20px; padding: 1px 9px; white-space: normal; max-width: 100%; flex-wrap: wrap; } /* fetch-139: long venue·room chips wrap inside their cell instead of overrunning the next column */
  .vchip .vdot, .cal-vdot { width: 7px; height: 7px; border-radius: 50%; background: var(--vc); flex: 0 0 auto; display: inline-block; }
  .cal-vdot { margin-right: 3px; vertical-align: middle; }
  .cal-chip-venue { font-weight: 700; }
  /* ---- fetch-84: friendlier team cards ---- */
  .user-card { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; margin-bottom: 10px; background: #fdfcf9; }
  .user-head { display: flex; gap: 10px; align-items: center; margin-bottom: 10px; }
  summary.user-head { cursor: pointer; list-style: none; margin-bottom: 0; }
  summary.user-head::-webkit-details-marker { display: none; }
  details.user-card:not([open]) { padding-top: 9px; padding-bottom: 9px; }
  details.user-card[open] summary.user-head { margin-bottom: 10px; }
  details.user-card[open] .uc-caret { transform: rotate(180deg); display: inline-block; }
  .user-avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--navy); color: #fff; font-weight: 700; font-size: 16px; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; font-family: 'Cormorant Garamond', Georgia, serif; }
  .user-selects { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
  .user-sel-lbl { font-size: 11px; color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: .4px; display: flex; flex-direction: column; gap: 3px; }
  .user-sel-lbl .sel { min-width: 160px; }
  .cap-pills { display: flex; gap: 6px; flex-wrap: wrap; }
  .cappill { border: 1px solid var(--line); background: #fff; color: var(--muted); border-radius: 20px; padding: 4px 12px; font-size: 12px; cursor: pointer; font-weight: 600; transition: .12s; }
  .cappill:hover { border-color: var(--navy); color: var(--navy); }
  .cappill.on { background: #eaf3ea; color: #166534; border-color: #a7d3ae; }
  /* ---- fetch-286 (UI audit Phase 3, Admin → Users): capability source distinction ----
     inherited = on from tier/dept default (quiet green); granted = explicit per-person add
     (gold, stands out); revoked = explicit per-person removal of a default (struck through). */
  .cappill--granted { background: #fbf3e2; color: #8a5a1a; border-color: var(--brand-gold-mid); }
  .cappill--granted::after { content: " ★"; }
  /* fetch-346: staffing feature adopts tokens (ratchet sweep) */
  .stf-row { padding: 5px 0; border-bottom: 1px solid var(--hair); }
  /* fetch-630: coverage badges — one per role, so an over-covered bar never rides inside a red "short" */
  .stf-cov { display: flex; gap: var(--s-1); flex-wrap: wrap; justify-content: flex-end; }
  .stf-sub { font-size: var(--t-sub); }
  /* fetch-451: To-review card (training review loop, staff app) */
  .rv-item { padding: 10px 0; border-top: 1px solid var(--hair); }
  .rv-done { opacity: .6; }
  .rv-head { display: flex; gap: var(--s-2); align-items: center; }
  .rv-name { flex: 1; min-width: 0; }
  .rv-blurb { font-size: var(--t-body); margin-top: var(--s-1); }
  .rv-ack { padding: 7px 14px; }
  .stf-lab { font-size: var(--t-label); }
  .lock-note { display: block; margin-top: var(--s-1); } /* fetch-398: own-row access lock caption */
  .stf-flex { display: flex; gap: 12px; flex-wrap: wrap; }
  .stf-note { font-size: var(--t-sub); margin: 10px 0 4px; }
  .stf-barsel { font-size: var(--t-label); padding: 1px 4px; margin-left: 6px; vertical-align: middle; }
  .rowlink { cursor: pointer; }
  .stf-total { border-top: 2px solid var(--line); font-weight: 700; }
  .stf-head { flex-wrap: wrap; gap: 8px; }
  .x-scroll { overflow-x: auto; }
  /* fetch-350: calm staffing page — settings accordion + card roll-ups */
  .acc { border: 1px solid var(--hair); border-radius: var(--r-m); margin-bottom: var(--s-2); background: var(--wash); }
  .acc[open] { background: transparent; border-color: var(--line); }
  .acc > summary { cursor: pointer; padding: var(--s-2) var(--s-3); display: flex; gap: var(--s-2); align-items: baseline; flex-wrap: wrap; list-style: none; border-radius: var(--r-m); }
  .acc > summary::-webkit-details-marker { display: none; }
  .acc > summary::before { content: "▸"; color: var(--brand-gold-mid); font-size: var(--t-sub); }
  .acc[open] > summary::before { content: "▾"; }
  .acc > summary .acc-t { font-weight: 600; font-size: var(--t-body); color: var(--text-heading); }
  .acc > summary .acc-v { color: var(--muted); font-size: var(--t-sub); }
  .acc-body { padding: 0 var(--s-3) var(--s-3); }
  .roll-sum { display: flex; gap: var(--s-2); align-items: center; flex-wrap: wrap; font-size: var(--t-sub); color: var(--muted); margin-top: var(--s-1); }
  .roll-btn { border: 1px solid var(--line); background: transparent; color: var(--muted); border-radius: var(--r-s); font-size: var(--t-sub); padding: 4px 10px; cursor: pointer; font-weight: 600; white-space: nowrap; }
  .roll-btn:hover { border-color: var(--brand-gold-mid); color: var(--text-heading); }
  .stf-field { min-width: 110px; }
  .stf-field--w { min-width: 150px; }
  .stf-kw { flex: 1; min-width: 240px; }
  .stf-kw textarea { width: 100%; box-sizing: border-box; }
  .stf-pair { display: flex; gap: var(--s-1); }
  .stf-ctl { display: flex; gap: var(--s-2); align-items: center; flex-wrap: wrap; }
  /* fetch-692: one truthful doorway across the three schedule engines. This is navigation,
     not a fake shared filter: Manager + Event staff are native portal grids, while Culinary
     remains Matt's separately authenticated app. Options render only when jumpWs says the
     current login can actually enter that destination. */
  .schedule-family { display: flex; align-items: center; gap: var(--s-3); margin-bottom: var(--s-3);
    padding: var(--s-2) var(--s-3); border: 1px solid var(--line); border-radius: var(--r-m);
    background: var(--surface-card, White); }
  .schedule-family__label { color: var(--text-heading); font-size: var(--t-sub); font-weight: 700; white-space: nowrap; }
  .schedule-family__tabs { display: flex; gap: var(--s-1); min-width: 0; padding: var(--s-1);
    border-radius: var(--r-s); background: var(--wash); overflow-x: auto; scrollbar-width: none; }
  .schedule-family__tabs::-webkit-scrollbar { display: none; }
  .schedule-family__tab { min-height: var(--control-height-sm); padding: var(--s-1) var(--s-3);
    border: 1px solid transparent; border-radius: var(--r-s); background: transparent; color: var(--muted);
    font: inherit; font-size: var(--t-sub); font-weight: 700; white-space: nowrap; cursor: pointer; }
  .schedule-family__tab:hover { color: var(--text-heading); background: var(--surface-card, White); }
  .schedule-family__tab--on { color: White; background: var(--action-primary, var(--navy)); }
  .schedule-family__tab--on:hover { color: White; background: var(--action-primary, var(--navy)); }
  .schedule-family__context { margin-left: auto; color: var(--muted); font-size: var(--t-sub); text-align: right; }
  .stf-tblwrap { overflow-x: auto; max-width: 1560px; }
  .card--gold { border-left: 3px solid var(--brand-gold-mid); }
  .mb-2 { margin-bottom: var(--s-2); }
  .t-bad { color: var(--bad-fg); } /* fetch-444: bad-state text utility */
  .mt-3 { margin-top: var(--s-3); }
  .self-c { align-self: center; }
  .ta-l { text-align: left; }
  .ta-c { text-align: center; }
  /* fetch-356: Timesheets (WIW-shape rollup on the Time Clock segment) */
  .stf-grow { flex: 1; min-width: 220px; }
  .tc-title { color: var(--text-heading); }
  .tc-wkpick { display: inline-flex; gap: var(--s-1); align-items: center; }
  .tc-wkbtn { padding: 2px 10px; font-size: var(--t-body); }
  .tc-wkbtn:disabled { opacity: .4; cursor: default; }
  .tc-wklabel { font-size: var(--t-sub); color: var(--muted); min-width: 150px; text-align: center; }
  .tc-sheethead { display: flex; justify-content: flex-end; align-items: center; min-height: 42px; margin-bottom: var(--s-2); padding: 0 var(--s-1) var(--s-2); border-bottom: 1px solid var(--hair); }
  .tc-sheethead .stf-ctl { justify-content: flex-end; }
  /* fetch-581: the week bar — the pay week is the page identity, stated once, ‹ › + actions on
     one line, venue chips beneath. Replaces the old right-aligned control strip + venue select. */
  .tc-wkbar { justify-content: center; gap: var(--s-1); border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
  .tc-wkmain { flex: 0 1 auto; min-width: 0; text-align: center; padding: 0 var(--s-2); }
  .tc-wkmain strong { display: block; font-size: var(--t-body); letter-spacing: -.01em; }
  .tc-wksub { display: block; font-size: var(--t-label); color: var(--muted); margin-top: 1px; }
  .tc-wkbar .tc-wkbtn { min-width: var(--control-height-sm, 32px); min-height: var(--control-height-sm, 32px); }
  .tc-chips { display: flex; gap: var(--s-1); overflow-x: auto; padding: var(--s-2) var(--s-1); margin-bottom: var(--s-2); border-bottom: 1px solid var(--hair); scrollbar-width: none; }
  .tc-chips::-webkit-scrollbar { display: none; }
  .tc-chip { border-radius: 999px; font-size: var(--t-sub); font-weight: 600; padding: var(--s-1) var(--s-3); white-space: nowrap; flex: 0 0 auto; min-height: var(--control-height-sm, 32px); }
  .btn.tc-chip--on { background: var(--action-primary, var(--navy)); color: White; border-color: var(--action-primary, var(--navy)); } /* fetch-846: was .tc-chip--on alone — the later .btn rule (background:#fff, no color) beat its background at equal specificity, so the ACTIVE chip rendered white-on-white on Timesheets since the chips shipped (visible as the blank first chip in Jack's 08-30 screenshot). .btn.tc-chip--on outranks .btn regardless of file order. */
  .tc-notex { border-color: transparent; background: none; color: inherit; padding: 0 var(--s-1); min-height: 0; margin-left: auto; flex: 0 0 auto; font-weight: 700; opacity: .6; }
  .tc-notex:hover { opacity: 1; }
  /* fetch-585 (Jack): the BEO prints in RESERVE'S layout — "our BEO looks nothing like what
     reserve generates - this is an almost instant turn-off for my sales girls". Same doc, two
     copies: priced (Qty/Price/Total + CHARGES) and staff (identical minus the money). B2 print
     family exception; colors are CSS named colors and sizes are pt on purpose — a print
     document, and the UI-debt ratchet counts hex + px, not these. */
  .bR { font-family: Arial, Helvetica, sans-serif; color: black; page: beoDoc; }
  /* fetch-588 geometry (spec TABLE 3): the PAGE is the authority, not the viewport. Letter,
     33pt margins (36 bottom), tables inset 12pt each side => the canonical 522pt table width
     the column percentages are defined against. Named page so no other print surface moves. */
  @page beoDoc { size: letter; margin: 33pt 33pt 36pt; }
  .bR table { border-collapse: collapse; width: calc(100% - 24pt); margin-left: 12pt; margin-right: 12pt; font-size: 9pt; margin-bottom: 10pt;
    table-layout: fixed; } /* fetch-587: auto layout treats width:100% as a MINIMUM — one
    unbreakable row inflates the whole table past the printed page. Fixed layout makes
    overflow impossible; column widths come from the <colgroup> each table now carries,
    because the band rows are colspans and would otherwise flatten the widths. */
  .bR td { overflow-wrap: anywhere; }
  .bR-chg { break-inside: avoid; page-break-inside: avoid; } /* Balance Due never strands on its own page */
  .bR tr { break-inside: avoid; page-break-inside: avoid; } /* a row never splits across printed pages */
  .bR .bR-cQ { width: 10%; } .bR .bR-cP { width: 13%; } .bR .bR-cT { width: 15%; }
  .bR table.bR-nom .bR-cQ { width: 15%; } /* money=false: Menu 85 / Qty 15 (spec TABLE 5) */
  .bR .bR-cLab { width: 22%; } .bR .bR-cN { width: 15%; } .bR .bR-cW { width: 16%; }
  .bR .bR-cXL { width: 30%; } .bR .bR-cXN { width: 20%; } /* tax-exempt charges: 30/20/20/30 */
  .bR .bR-c8 { width: 8%; } .bR .bR-c15 { width: 15%; } .bR .bR-c16 { width: 16%; }
  .bR .bR-c24 { width: 24%; } .bR .bR-c28 { width: 28%; } .bR .bR-c33 { width: 33.3%; }
  .bR .bR-c36 { width: 36%; }
  /* fetch-588 pagination (spec TABLE 10) — all CSS-native; no JS paginator in v1 */
  @media print {
    .bR thead { display: table-header-group; }
    .bR tr { break-inside: avoid; page-break-inside: avoid; }
    .bR .bR-band, .bR .bR-sub, .bR .beo-course { break-after: avoid; page-break-after: avoid; }
    .bR tbody.beo-group { break-inside: avoid; page-break-inside: avoid; }
    .bR .bR-chg { break-inside: avoid; page-break-inside: avoid; }
    .bR .bR-pay { break-before: avoid; page-break-before: avoid; }
  }
  .bR th, .bR td { border: 0.75pt solid black; padding: 2pt 5pt; vertical-align: top; }
  .bR th { background: Gainsboro; font-weight: 700; text-align: center; }
  .bR .bR-band { background: Gainsboro; font-weight: 700; text-align: center; font-size: 10pt; }
  .bR th { font-size: 10pt; }
  .bR .bR-sub { font-size: 10pt; }
  /* parsed note block (spec primitives noteGroup/noteLabel/noteLine) */
  /* fetch-756: A LABELLED NOTE IS STILL A MENU LINE.
     This was text-align:left at 9.5pt against a table centred at 9pt, so any
     line carrying a "LABEL:" -- MADE TO ORDER:, MEATS:, SAUCES:, TOPPINGS: --
     came out left-aligned, half a point larger and indented, while everything
     around it stayed centred. Two alignments and two sizes inside one column,
     which is what Matt saw on Eight Eleven 25466-1.

     Reserve makes no such distinction: in its Stir Fry block "MADE TO ORDER:
     Steamed Rice (GF,DF,V) or Yakisoba Noodles" wraps to a CENTRED second line
     at the same size as "Sesame Tofu (GF, Vegan)" beside it. The label is
     content, not a change of register.

     Inherits now rather than overriding. The bold on the label itself
     (bR-nlab) stays -- it aids scanning and is applied consistently. */
  .bR .bR-note { text-align: center; }
  .bR .bR-nseg { margin: 1pt 0; }
  .bR .bR-nlab { font-weight: 700; }
  .bR .bR-nline { margin-top: 1pt; }   /* fetch-756: no hanging indent under centred text */
  .bR .bR-nbul { }   /* fetch-756: was a 12pt hang, which pulls a centred line off centre */
  .bR .bR-ngap { height: 2pt; }
  .bR .bR-sub { background: WhiteSmoke; font-weight: 700; text-align: center; }
  .bR .bR-item { text-align: center; }
  .bR .bR-d { font-weight: 400; font-size: 7.5pt; }
  .bR .bR-svc { font-weight: 600; font-size: 7.5pt; color: DimGray; }
  .bR td.bR-n { text-align: center; white-space: nowrap; }
  .bR .bR-schedule td.bR-n { white-space: normal; overflow-wrap: anywhere; }
  .bR td.bR-r { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
  .bR .bR-wm { text-align: center; margin: 0 0 14pt; }
  .bR .bR-wm1 { font-family: Georgia, 'Times New Roman', serif; font-size: 14pt; letter-spacing: .35em; font-weight: 600; }
  .bR .bR-wm2 { font-size: 6pt; letter-spacing: .3em; margin-top: 2pt; color: DimGray; }
  .bR .bR-hdr { display: flex; justify-content: space-between; font-size: 8.5pt; line-height: 1.5; margin-bottom: 10pt; }
  .bR .bR-hdr .r { text-align: right; }
  .bR .bR-pay { font-size: 8pt; font-style: italic; margin-top: 8pt; line-height: 1.5; }
  .bR .bR-lab { font-weight: 700; }
  .bR td.bR-nob { border: 0; }
  /* fetch-1080: Food follows the reference's continuous columns and quiet item text.
     Other BEO sections retain their existing table treatment. */
  .bR table.bR-food { font-size: 10.5pt; line-height: 1.15; }
  .bR .bR-food .bR-cQ { width: 9%; }
  .bR .bR-food .bR-cP, .bR .bR-food .bR-cT { width: 13%; }
  .bR .bR-food.bR-nom .bR-cQ { width: 15%; }
  .bR .bR-food th, .bR .bR-food td { border-top: 0; border-bottom: 0; padding: 2pt 5pt; }
  .bR .bR-food th { background: var(--hair); font-size: inherit; border-top: 0.75pt solid black; border-bottom: 0.75pt solid black; padding: 3pt 5pt; }
  .bR .bR-food td { font-weight: 400; }
  .bR .bR-food .bR-food-title, .bR .bR-food td.bR-n, .bR .bR-food td.bR-r { text-align: center; }
  .bR .bR-food tbody > tr:last-child > td { border-bottom: 0.75pt solid black; }
  .bR .bR-food .beo-course > td { padding-top: 3pt; padding-bottom: 5pt; }
  .bR .bR-food .bR-d { font-size: inherit; }
  .bR .bR-beverage .bR-d, .bR .bR-setup .bR-d { color: inherit; }
  /* fetch-1082: Reserve separates courses, while dishes share a continuous grid. */
  .bR .bR-food-source .beo-course > td { border-top: 0.75pt solid black; }
  .bR .bR-food-source .bR-food-menu { font-weight: 700; }
  .bR .bR-food-source td.bR-band { border-bottom: 0.75pt solid black; font-weight: 700; }
  /* fetch-1086: venue identity and three readable levels within the source grid.
     Weight and spacing retain the hierarchy in monochrome printouts. */
  .beo2 .beo-brand { text-align: center; margin-bottom: 10pt; }
  .beo2 .beo-brand-logo { display: inline-block; width: auto; height: auto; max-width: min(160pt, 100%); max-height: 54pt; object-fit: contain; }
  .beo2 .beo-brand-name { font-size: 11pt; font-weight: 700; margin-top: 5pt; color: var(--text-heading); }
  .beo2 .beo-doc-meta { font-size: 10.5pt; line-height: 1.4; letter-spacing: .1em; color: var(--muted); margin-top: 5pt; }
  .beo2 .beo-doc-dateline { font-size: 11pt; color: var(--muted); text-align: center; }
  .beo2 .beo-client-masthead { padding-bottom: 14pt; margin-bottom: 12pt; border-bottom: 1pt solid var(--brand-gold-dark); text-align: center; }
  .bR .bR-wm { padding-bottom: 12pt; border-bottom: 1pt solid var(--brand-gold-dark); }
  .bR table { font-size: 10.5pt; line-height: 1.25; }
  .bR th, .bR .bR-food th { font-size: 10.5pt; background: var(--wash); }
  .bR td.bR-band, .bR .bR-food td.bR-band { font-size: 12pt; letter-spacing: .035em; padding-top: 5pt; padding-bottom: 5pt; background: var(--hair); color: var(--text-heading); }
  .bR .bR-sub, .bR .bR-food .bR-food-title { font-size: 10.5pt; font-weight: 700; background: var(--wash); }
  .bR .bR-food-source .bR-food-menu { font-size: 10.5pt; font-weight: 400; margin-top: 2pt; }
  .bR .beo-course > td { font-size: 11pt; }
  .bR .bR-d, .bR .bR-svc { font-size: 10.5pt; line-height: 1.25; }
  /* fetch-1078: a phone BEO is a reading document. Its labeled fields keep all
     values visible without panning each section; the Reserve print matrices stay intact. */
  @media print {
    .beo2 table { display: table; overflow: visible; }
    .beo2 table th, .beo2 table td { white-space: normal; }
  }
  @media screen {
    .beo2 .bR-chg td.bR-lab { white-space: normal; overflow-wrap: normal; }
  }
  @media screen and (max-width: 640px) {
    .beo2 { padding: var(--s-3) !important; overflow-wrap: anywhere; }
    .beo2 [style*="white-space:nowrap"] { white-space: normal !important; }
    .beo2 [style*="display:flex"] { flex-wrap: wrap; }
    .beo2 [style*="display:flex"] > * { min-width: 0; max-width: 100%; }
    .beo2 img { max-width: 100%; }
    .beo2 .bR-hdr { display: block; overflow-wrap: anywhere; }
    .beo2 .bR-hdr > div { margin-bottom: var(--s-3); }
    .beo2 .bR-hdr .r { text-align: left; }
    .beo2 .bR-wm1 { font-size: var(--t-title); letter-spacing: .08em; overflow-wrap: anywhere; }
    .beo2 .bR-wm2, .beo2 .bR-hdr, .beo2 .bR-pay,
    .beo2 .bR-d, .beo2 .bR-svc { font-size: var(--t-sub); }
    .beo2 [style*="grid-template-columns"] { grid-template-columns: minmax(0, 1fr) !important; }
    .beo2 > div:last-child { flex-wrap: wrap; gap: var(--s-2); }
    .beo2 .beo-readable-table { display: block; overflow: visible; width: 100%; margin: var(--s-3) 0; border: 0; table-layout: auto; }
    .beo2 .beo-readable-table colgroup { display: none; }
    .beo2 .beo-readable-table thead, .beo2 .beo-readable-table tbody { display: block; }
    .beo2 .beo-readable-table tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2) var(--s-3); padding: var(--s-3) 0; border-bottom: 1px solid var(--line); }
    .beo2 .beo-readable-table [data-beo-head], .beo2 .beo-readable-table [data-beo-empty], .beo2 .beo-readable-table [data-beo-summary-label] { display: none; }
    .beo2 .beo-readable-table th, .beo2 .beo-readable-table td { display: block; min-width: 0; width: auto !important; max-width: none; padding: 0 !important; border: 0 !important; font-size: var(--t-body) !important; text-align: left !important; white-space: normal !important; overflow-wrap: anywhere; word-break: normal; }
    .beo2 .beo-readable-table [data-beo-wide], .beo2 .beo-readable-table [data-beo-band] > td { grid-column: 1 / -1; }
    .beo2 .beo-readable-table [data-beo-band] { grid-template-columns: minmax(0, 1fr); background: var(--wash); padding: var(--s-3); }
    .beo2 .beo-readable-table [data-beo-band] > td { background: transparent !important; font-weight: 700; }
    .beo2 .beo-readable-table td[data-beo-label]::before { content: attr(data-beo-label); display: block; margin-bottom: var(--s-1); color: var(--muted); font-size: var(--t-sub); font-weight: 600; }
    .beo2 .bR-food [data-beo-band] > th { grid-column: 1 / -1; background: transparent; }
    .beo2 .bR-food .beo-course { background: transparent; }
  }
  .tc-sheet { min-width: 640px; margin-top: var(--s-2); width: 100%; }
  .tc-caret { color: var(--brand-gold-mid); font-size: var(--t-sub); }
  /* fetch-456: the per-person timesheet workbench (read-only half) */
  .tcp-name { font-family: 'Cormorant Garamond', Georgia, serif; font-size: var(--t-title); color: var(--text-heading); margin-left: var(--s-2); }
  .tcp-sum { display: flex; gap: var(--s-5); flex-wrap: wrap; padding: var(--s-2) 2px var(--s-3); font-size: var(--t-body); align-items: baseline; }
  .tcp-sum strong { font-size: var(--t-section); }
  .tcp-lab { color: var(--muted); margin-right: var(--s-1); font-size: var(--t-sub); }
  /* fetch-841: the person's inline Timeline feed — the Employee Timeline page, transferred */
  .tcp-timeline { margin: var(--s-2) 0 var(--s-3); padding: var(--s-3); border: 1px solid var(--line); border-radius: var(--r-m); background: var(--wash); }
  .tcp-tl-day { margin-top: var(--s-3); padding-top: var(--s-2); border-top: 1px solid var(--hair); }
  .tcp-tlbtn--on { border-color: var(--gold); color: var(--gold-dark); }
  .tcp-table { min-width: 880px; width: 100%; }
  .tcp-table td { vertical-align: middle; }
  .tcp-chip { display: inline-block; border: 1px solid var(--line); background: var(--surface-card, White); border-radius: 8px; padding: 2px 9px; font-size: var(--t-sub); }
  .tcp-ic { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; border-radius: 6px; font-size: var(--t-sub); font-weight: 700; vertical-align: middle; }
  .tcp-ic-warn { background: var(--warn-bg); color: var(--warn-fg); }
  .tcp-ic-bad { background: var(--bad-bg); color: var(--bad-fg); }
  .tcp-bad { color: var(--bad-fg); }
  .tcp-warn { color: var(--warn-fg); }
  .tcp-dash { color: var(--muted); }
  .tcp-flagged td { background: var(--warn-bg); }
  .tcp-empty td { color: var(--muted); }
  .tcp-editbtn { padding: 3px 10px; font-size: var(--t-sub); }
  .tcp-actcell { white-space: nowrap; } .tcp-actcell .tcp-editbtn + .tcp-editbtn { margin-left: 4px; } /* fetch-459: Edit + ✂ side by side */
  .tcp-tags { display: flex; flex-wrap: wrap; gap: var(--s-1); align-items: center; margin-top: var(--s-2); } /* fetch-462: position chips + quick-add on the person pane */
  .tcp-tagin { max-width: 220px; padding: 4px 8px; font-size: var(--t-sub); }
  .grp-hint { margin-left: var(--s-2); } /* fetch-467: untouched-rule hint */
  .svy-wide { grid-column: 1/-1; } /* fetch-465: full-width field, tokenized (the anon shell's inline habit stops here) */
  .svy-mulbl { display: flex; gap: 9px; align-items: center; font-weight: 400; text-transform: none; letter-spacing: 0; font-size: var(--t-body); padding: 3px 0; cursor: pointer; } /* fetch-465: multi-checkbox question rows */
  .svy-mulbl input { width: 17px; height: 17px; flex-shrink: 0; accent-color: var(--gold); }
  .tcp-schednote { font-size: var(--t-sub); }
  .tcp-sortable { cursor: pointer; user-select: none; }
  .tcp-sortable:hover { color: var(--gold-dark); }
  /* fetch-457: Timesheets two-pane — WIW's one-page model (rail of people + person pane) */
  .tcw { display: flex; gap: var(--s-3); align-items: flex-start; }
  .tcw-rail { width: 280px; /* fetch-937: was 232 - the All row carries the four lenses and the pill now */ flex-shrink: 0; background: var(--surface-card, White); border: 1px solid var(--line); border-radius: 14px; padding: var(--s-2); position: sticky; top: var(--s-2); display: flex; flex-direction: column; max-height: 82vh; }
  .tcw-search { width: 100%; margin-bottom: var(--s-2); }
  .tcw-list { overflow-y: auto; flex: 1; }
  .tcw-item { appearance: none; width: 100%; font: inherit; text-align: left; color: var(--ink); background: transparent; border: 0; display: flex; align-items: center; gap: var(--s-2); padding: 8px 10px; border-radius: 9px; cursor: pointer; font-size: var(--t-body); border-left: 3px solid transparent; }
  .tcw-item:hover { background: var(--wash); }
  .tcw-item.on { background: var(--wash); border-left-color: var(--gold); font-weight: 600; }
  .tcw-item .tcw-nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .tcw-flag { color: var(--warn-fg); }
  .tcw-all { border-bottom: 1px solid var(--hair); border-radius: 9px 9px 0 0; margin-bottom: var(--s-1); }
  .tcw-main { flex: 1; min-width: 0; }
  .tcw-nrbanner { border-left: 3px solid var(--warn-fg); }
  .tcw-nrhead { align-items: center; cursor: pointer; gap: var(--s-2); }
  .tcw-nrcaret { color: var(--muted); }
  .tcw-nrrow { padding: 8px 0; border-bottom: 1px solid var(--hair); align-items: center; gap: var(--s-2); }
  .tcw-nrsub { font-size: var(--t-body); margin-top: var(--s-1); }
  .tcw-nrbody { margin-top: var(--s-2); }
  /* fetch-937: the rail lenses - three icon buttons between All people and the count pill. Not .btn: the rail
     is compact, so this is its own reset with the colour SET (a bare <button> paints iOS system blue). */
  .tcw-lens { appearance: none; display: inline-flex; align-items: center; gap: var(--s-2); width: 100%; min-height: var(--control-height-touch, 44px); padding: var(--s-2); border: 1px solid transparent; border-radius: var(--r-m); background: transparent; color: var(--muted); font: inherit; font-size: var(--t-sub); font-weight: 600; line-height: 1.3; text-align: left; cursor: pointer; }
  .tcw-lens-label { flex: 1; min-width: 0; }
  .tcw-lens .tnum { flex-shrink: 0; }
  .tcw-lens .ci { width: 14px; height: 14px; flex-shrink: 0; }
  .tcw-lens:hover { background: var(--wash); color: var(--ink); }
  .tcw-lens--review { color: var(--warn-fg); }
  .tcw-lens--live:not(.tcw-lens--zero) { color: var(--ok-fg); }
  .tcw-lens.on { border-color: var(--gold); background: var(--surface-card, White); color: var(--text-heading); }
  .tcw-all { gap: var(--s-1); flex-wrap: wrap; } .tcw-all .tcw-nm { flex: 1 0 auto; } /* the label never truncates: when the lens group does not fit beside it, the group wraps under it, right-aligned */
  .tcw-lenses { display: grid; gap: var(--s-1); padding-bottom: var(--s-2); margin-bottom: var(--s-1); border-bottom: 1px solid var(--hair); }
  .tcw-lenshead { align-items: center; gap: var(--s-2); }
  .tcw-lenshead .ci { width: 16px; height: 16px; vertical-align: -3px; }
  .tcw-lenspane--inset { padding: 0; }
  .tcm-lens { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2); margin: 0 0 var(--s-3); }
  .tcm-lens .tcw-lens.on { border-color: var(--gold); background: var(--wash); } /* (0,3,0): the strip's own --line border used to win over .tcw-lens.on, so the armed lens looked like the other three */
  .tcm-lens .tcw-lens { flex: 1; justify-content: center; gap: var(--s-1); min-height: var(--control-height-touch, 44px); border-color: var(--line); border-radius: var(--r-m); font-size: var(--t-sub); }
  .tc-sheet tbody tr.rowlink:hover td, .tcp-table tbody tr:hover td { background: var(--wash); } /* fetch-457 (Jack): the Manager-Schedule hover feel — you can see where your cursor is */
  .tcp-flagged:hover td { background: var(--warn-bg); }
  .tcp-editrow td { background: var(--wash); border-bottom: 2px solid var(--gold); }
  .tcp-editcard { padding: var(--s-2) var(--s-1); }
  .tcp-voidbtn { color: var(--bad-fg); border-color: var(--bad-bg); }
  @media (max-width: 900px) { .tcw { display: block; } .tcw-rail { width: auto; position: static; max-height: 200px; margin-bottom: var(--s-3); } }
  /* fetch-513 — THE PHONE TIMESHEET STACK (roster → person → entry → edit).
     Only rendered at ≤640px, where timeclock.js swaps the two-pane for tcmHTML().
     Row heights are deliberately thumb-sized: WIW's rows are ~64px and that is why
     they are usable one-handed mid-shift. */
  .tcm-card { padding: var(--s-3) var(--s-3) var(--s-4); }
  .tcm-top { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); margin-bottom: var(--s-3); }
  .tcm-title { font-size: var(--t-section); }
  .tcm-wk { color: var(--muted); font-size: var(--t-sub); }
  .tcm-back { padding: 6px 12px; font-weight: 600; }
  /* .notice is display:flex, which turns an inline <strong> into a flex item and wraps it one
     character per line at 390px ("4 3 . 5 0 h" — caught in probe shot 02). These read as prose. */
  .tcm-note { display: block; margin: 0 0 var(--s-3); font-size: var(--t-sub); line-height: 1.45; }
  .tcm-note strong, .tcp-noclock strong { white-space: nowrap; }
  .tcm-search { width: 100%; margin-bottom: var(--s-2); }
  .tcm-list { display: flex; flex-direction: column; }
  .tcm-item { appearance: none; width: 100%; font: inherit; text-align: left; color: var(--ink); background: transparent; border: 0; }
  .tcm-item, .tcm-entry { display: flex; align-items: center; gap: var(--s-2); padding: var(--s-3) 2px; border-top: 1px solid var(--hair); cursor: pointer; min-height: 56px; }
  .tcm-item:first-child { border-top: 0; }
  .tcm-item:active, .tcm-entry:active { background: var(--wash); }
  .tcm-item-main, .tcm-entry-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
  .tcm-nm, .tcm-times { font-weight: 600; font-size: var(--t-body); overflow-wrap: anywhere; }
  .tcm-sub { font-size: var(--t-sub); overflow-wrap: anywhere; }
  .tcm-hrs { font-weight: 700; font-size: var(--t-body); }
  .tcm-chev { color: var(--muted); font-size: var(--t-section); flex-shrink: 0; }
  .tcm-flag { color: var(--warn-fg); font-weight: 600; }
  .tcm-bad { color: var(--bad-fg); font-weight: 600; }
  .tcm-personhead { margin-bottom: var(--s-2); display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }
  .tcm-sum { display: flex; gap: var(--s-4); flex-wrap: wrap; padding: 0 2px var(--s-3); align-items: baseline; }
  .tcm-sum strong { font-size: var(--t-body); display: block; }
  .tcm-days { margin-top: var(--s-2); }
  .tcm-dayhead { display: flex; justify-content: space-between; gap: var(--s-2); padding: var(--s-2) 2px; margin-top: var(--s-2); background: var(--wash); border-radius: 8px; font-size: var(--t-sub); font-weight: 700; letter-spacing: .02em; }
  .tcm-blank { padding: var(--s-2) 2px; font-size: var(--t-sub); color: var(--muted); border-top: 1px solid var(--hair); overflow-wrap: anywhere; }
  .tcm-blank--bad { color: var(--bad-fg); }
  /* fetch-580 (Jack, "edit the right fields from this page w/out having to click into another"):
     THE ROW IS THE EDITOR. Tapping a punch opens it in place instead of navigating to the entry
     screen and then to a second edit screen. Four fields — times, venue, position, break — cover
     every correction a manager actually makes on a phone; void / split / date-change / full audit
     stay on the entry screen behind "Full entry", so nothing is removed, only shortened.
     This is a DISCLOSURE, not a dialog: aria-expanded + Escape + focus return, no focus trap.
     That is why it can ship ahead of the shared modal contract (fetch-579) without borrowing it. */
  .tcr { border-top: 2px solid var(--navy); background: var(--wash); padding: var(--s-3) var(--s-2) var(--s-3); }
  .tcr-hd { display: flex; align-items: center; justify-content: flex-end; gap: var(--s-2); margin-bottom: var(--s-2); }
  .tcr-hd strong { font-size: var(--t-label); text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
  .tcr-f { margin-bottom: var(--s-2); }
  .tcr-f label { display: block; font-size: var(--t-label); color: var(--muted); font-weight: 600; margin-bottom: var(--s-1); }
  .tcr-in { width: 100%; border: 1px solid var(--line); border-radius: 8px; padding: 10px; font: inherit;
    font-weight: 600; background: var(--surface-card, White); min-height: var(--control-height-touch, 44px); }
  .tcr-two { display: flex; gap: var(--s-2); }
  .tcr-two .tcr-f { flex: 1; min-width: 0; }
  .tcr-prev { background: var(--info-bg); color: var(--info-fg); border-radius: 8px; padding: var(--s-2);
    font-size: var(--t-sub); font-weight: 600; margin-bottom: var(--s-2); line-height: 1.45; }
  .tcr-prev--bad { background: var(--bad-bg); color: var(--bad-fg); }
  .tcr-sugs { display: flex; gap: var(--s-1); flex-wrap: wrap; margin-bottom: var(--s-2); }
  .tcr-sug { border: 1px dashed var(--gold-dark); background: var(--surface-card, White); color: var(--gold-dark);
    border-radius: 999px; padding: var(--s-1) var(--s-3); font-size: var(--t-sub); font-weight: 600; min-height: 34px; }
  .tcr-acts { display: flex; gap: var(--s-2); }
  .tcr-acts .btn { min-height: var(--control-height-touch, 44px); }
  .tcr-acts .tcr-save { flex: 1; }
  .tcm-pend { color: var(--gold-dark); }
  .tcm-pend s { color: var(--muted); font-weight: 500; margin-right: var(--s-1); }
  .tcm-kvs { display: flex; flex-direction: column; }
  .tcm-kv { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: var(--s-3) 2px; border-top: 1px solid var(--hair); min-height: 52px; }
  .tcm-kv:first-child { border-top: 0; }
  .tcm-k { color: var(--muted); font-size: var(--t-sub); flex-shrink: 0; }
  .tcm-v { text-align: right; overflow-wrap: anywhere; }
  .tcm-form .tcm-kv { cursor: pointer; }
  .tcm-in { flex: 1; max-width: 62%; text-align: right; border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; font: inherit; background: var(--surface-card, White); }
  /* fetch-559 (Jack): "i want the (+) button to appear next to the dates that dont have punches
     (small and calm) but it only appears when your cursor is hovered over the area - the same
     applies for the scissors icon". Quiet by default, revealed on the row you're pointing at.
     Guarded by @media (hover: hover) because a phone has no hover — on touch they stay visible,
     and :focus-visible keeps them reachable by keyboard either way. */
  .tcp-addbtn, .tcp-splitbtn { border-color: transparent; background: none; color: var(--muted);
    padding: 2px var(--s-2); min-height: 0; line-height: 1.4; }
  .tcp-addbtn:hover, .tcp-splitbtn:hover { color: var(--ink); background: var(--wash); border-color: var(--line); }
  @media (hover: hover) {
    .tcp-table tbody tr .tcp-addbtn, .tcp-table tbody tr .tcp-splitbtn { opacity: 0; transition: opacity .12s ease; }
    .tcp-table tbody tr:hover .tcp-addbtn, .tcp-table tbody tr:hover .tcp-splitbtn,
    .tcp-table tbody tr .tcp-addbtn:focus-visible, .tcp-table tbody tr .tcp-splitbtn:focus-visible { opacity: 1; }
  }
  /* fetch-559: the plain-English time preview is its own line under the fields, never a grid cell. */
  .tcf-span { grid-column: 1 / -1; }
  /* fetch-553/567: the embedded kitchen schedule. It is a whole app, not a
     widget, so it gets the space below the tab bar rather than sitting in a
     card inside it -- no border, no radius, no shadow. The viewport cap stays:
     the frame must scroll INTERNALLY rather than growing the page, or his
     sticky week header scrolls away and the grid stops being readable. */
  /* fetch-629: the three new embeds (Kitchen Inventory counts, Venue Menus,
     Recipe Box) are the same kind of thing -- a whole app given the space
     below the tab bar. They JOIN these selectors rather than copying the
     numbers, so the viewport cap stays a single decision. */
  .ksched-wrap, .cse-embed-wrap { padding: 0; overflow: hidden; border: 0; border-radius: 0;
    background: none; box-shadow: none; }
  .ksched-frame, .cse-embed-frame { display: block; width: 100%; height: calc(100vh - 120px); min-height: 420px; border: 0; }
  .ksched-actions, .cse-embed-actions { justify-content: center; }
  /* A segment bar above a frame eats into that height. These two are only the
     PRE-MEASUREMENT fallback: bindCseAppEmbed measures the frame's own top and
     sizes it to the viewport, because fetch-578 measured this exact constant
     32px out on a phone. A constant here is a starting point, not the answer. */
  .cse-embed-wrap--segged .cse-embed-frame { height: calc(100vh - 166px); }

  /* fetch-629: THE EMBED REACHES THE TAB'S OWN EDGES. Matt on the live tab,
     about the Kitchen Schedule: "can it be more seemless where the app butts
     right up against the headers?" These are whole apps, not pages, so the
     page's own inset is a border around somebody else's window.

     THE SIDES NEED A NEGATIVE MARGIN, NOT padding:0. .brandbar lives inside
     .wrap and already breaks out with its own margin: 0 -22px. Zero .wrap's
     padding and the bar's -22px has nothing left to cancel — it hangs off both
     edges and the whole page gains a horizontal scrollbar. Matching the bar's
     trick also keeps the two agreeing on ultrawides, where .wrap caps at
     --w-wide.

     THE BOTTOM NEEDS THE OPPOSITE. The obvious symmetry, margin: 0 -22px -60px,
     is wrong: what sits under the frame is not .wrap's padding, it is the
     VERSION FOOTER, .headwrap's next sibling. A negative margin hauls the
     footer up and prints it across the middle of the embedded app — every
     measurement stays green and only a screenshot shows it. So the bottom
     zeroes the padding instead.

     TWO CLASSES, because the tabs are not the same shape. w-bleed is a bare
     frame (Venue Menus, Recipe Box) and drops the top gap too. w-bleed-x is
     Kitchen Inventory, which has a segment bar above the frame -- a normal page
     element that keeps its inset, so only the sides and the bottom give way.

     kitchenSched IS here now (fetch-650). fetch-629 left it out because the
     fetch-578 PR was going to do it and Jack said he would rebase that himself.
     Two days on it had not landed, and it had gone 50 builds stale carrying
     v5.249 -- and by then this machinery existed, so its hardcoded
     calc(100vh - 56px) would have been a step backwards. .ksched-wrap simply
     joins these selectors, exactly as the old comment predicted.
     (Named "fetch-578" rather than by its PR number with a hash in front: the
     UI-debt ratchet counts /#[0-9a-fA-F]{3,8}/ as a raw hex colour, so a bare
     PR reference in a COMMENT fails the build. It caught this one.) */
  .wrap.w-bleed .headwrap { padding-top: 0; }
  .wrap.w-bleed, .wrap.w-bleed-x { padding-bottom: 0; }
  .wrap.w-bleed .toolbar, .wrap.w-bleed-x .toolbar { margin-bottom: 0; }
  .wrap.w-bleed .cse-embed-wrap, .wrap.w-bleed-x .cse-embed-wrap,
  .wrap.w-bleed .ksched-wrap { margin: 0 -22px; }
  /* On paper the negative margin would hang off the sheet. */
  @media print { .wrap.w-bleed .cse-embed-wrap, .wrap.w-bleed-x .cse-embed-wrap,
                 .wrap.w-bleed .ksched-wrap { margin: 0; } }
  /* The phone override is GONE, not forgotten. It existed because the header
     row wrapped to two lines on a narrow screen and pushed the frame down
     further than on desktop -- measured at 273px vs 168px. With the row
     removed the frame starts at 88px on both, so a second number would only
     be a phone-shaped hole at the bottom of the page. */
  /* fetch-557 (Jack): a pick-or-type field has to LOOK like a dropdown. The caret sits over the
     input's right edge (sibling, not wrapper — wrapping would break .field/.grid layouts). */
  .combo-in { padding-right: var(--s-5); }
  .combo-caret { position: absolute; margin-left: calc(var(--s-5) * -1); width: var(--s-5);
    border: 0; background: none; color: var(--muted); cursor: pointer; line-height: 1;
    padding: var(--s-1) 0; font-size: var(--t-sub); }
  .combo-caret:hover { color: var(--ink); }
  /* fetch-556 (Jack): the timesheet edits in place — the WIW model. A time cell IS the edit
     control, an empty day IS the add button, and each day carries a ＋. Affordances are quiet
     (a dotted underline, a hover wash) so a payroll sheet still reads as a sheet. */
  .tcp-cell--edit { cursor: pointer; border-bottom: 1px dashed var(--line); }
  .tcp-cell--edit:hover { background: var(--wash); }
  .tcp-addable { cursor: pointer; }
  .tcp-addable:hover { background: var(--wash); }
  .tcp-addbtn { padding: 2px var(--s-2); min-height: 0; line-height: 1.4; }
  .tc-minihead { padding: var(--s-2) 0; }
  .tc-minihead .tc-wklabel { font-size: var(--t-sub); }
  .tcm-span { padding: var(--s-2) 2px; font-size: var(--t-sub); color: var(--muted); }
  .tcm-span--bad { color: var(--bad-fg); font-weight: 600; }
  .tcm-aud { margin-top: var(--s-3); padding: var(--s-3); background: var(--wash); border-radius: 10px; font-size: var(--t-sub); line-height: 1.5; }
  .tcm-audh { font-weight: 700; margin-bottom: 4px; }
  .tcm-actions { margin-top: var(--s-3); display: flex; gap: var(--s-2); flex-wrap: wrap; }
  .tcm-actions .btn { flex: 1; min-width: 140px; padding: 11px 14px; }
  .tcp-noclock { display: block; margin: 0 0 var(--s-3); font-size: var(--t-sub); line-height: 1.45; }
  .tc-detail > td { background: var(--wash); border-bottom: 1px solid var(--line); }
  .tc-posline { padding: 6px 4px 2px; }
  .tc-punch { display: flex; gap: var(--s-3); align-items: center; flex-wrap: wrap; padding: 6px 4px; border-top: 1px solid var(--hair); font-size: var(--t-sub); }
  .tc-pwhen { min-width: 86px; font-weight: 600; }
  .tc-punch .tc-editbtn { margin-left: auto; padding: 2px 9px; font-size: var(--t-sub); }
  .tc-foot { margin-top: var(--s-2); }
  /* fetch-364: staff app v2 (My Events + praise + drop requests) — token-clean utilities */
  .mt-1 { margin-top: var(--s-1); }
  .mt-2 { margin-top: var(--s-2); }
  .sa-line { display: flex; gap: var(--s-2); align-items: center; }
  .sa-main { flex: 1; min-width: 0; }
  .sa-right { text-align: right; flex-shrink: 0; }
  .sa-drop { padding: 6px 10px; font-size: var(--t-sub); color: var(--bad-fg); flex-shrink: 0; }
  .sa-keep { padding: 4px 8px; font-size: var(--t-label); margin-top: 3px; }
  .sa-in { width: 100%; font-size: var(--t-body); padding: 9px; box-sizing: border-box; margin-top: var(--s-2); }
  .sa-wide { flex: 1; padding: 10px; }
  .sa-read-notice { display: block; }
  .sa-read-notice .actions { flex-wrap: wrap; }
  .sa-read-notice .btn { min-height: var(--control-height-touch); white-space: normal; }
  .sa-grow { flex: 1; min-width: 180px; }
  .sa-menuhead { margin-top: var(--s-2); letter-spacing: .5px; }
  /* fetch-365: staff BEO view (food / bev / timeline only) */
  .sb-title { font-weight: 700; font-size: var(--t-section); color: var(--text-heading); }
  .sb-row { display: flex; gap: var(--s-2); padding: 6px 0; border-bottom: 1px solid var(--hair); align-items: baseline; }
  .sb-t { min-width: 70px; font-weight: 600; white-space: nowrap; }
  .sb-qty { color: var(--muted); white-space: nowrap; font-weight: 600; }
  .sb-svc { font-size: var(--t-label); color: var(--gold-dark); }
  .sb-fn { margin-top: var(--s-2); font-weight: 700; color: var(--navy); font-size: var(--t-sub); letter-spacing: .5px; }
  .sb-note { font-size: var(--t-sub); color: var(--muted); font-style: italic; }
  .sb-nm { font-weight: 500; } /* fetch-367: every BEO line reads the same — no more bold-items-vs-italic-notes */
  /* fetch-368: birthday rows on the Home Team card */
  .bsev-gold { background: var(--gold); }
  .bsev-stone { background: var(--brand-stone); }
  .brief-note { color: var(--brand-stone); font-size: var(--t-label); padding: var(--s-1) 0 var(--s-2); } /* fetch-519: the "already handled above" line — a class, not an inline style */
  .bsev-red { background: var(--bad-fg); }   /* fetch-440: urgency family (fetch-413) on brief rows */
  .bsev-amber { background: var(--warn-fg); }
  .rcp-btns { display: flex; gap: var(--s-1); flex-wrap: wrap; flex-shrink: 0; }
  .bi-main { flex: 1; min-width: 0; }
  .bi-venue { color: var(--muted); font-weight: 400; }
  .sb-openbtn { padding: 11px; }
  .sb-course { margin-top: var(--s-2); font-weight: 700; font-size: var(--t-sub); color: var(--gold-dark); letter-spacing: .04em; text-align: center; }
  /* fetch-366: service-pass extras */
  .svc-h { font-weight: 700; }
  .svc-in { width: 100%; padding: 5px 6px; font-size: var(--t-sub); box-sizing: border-box; }
  .tc-err { border-left: 3px solid var(--bad-fg); color: var(--bad-fg); }
  /* fetch-357: Staff Schedule grid (WIW-shape) */
  .sg-grid { min-width: 980px; }
  .sg-scroll { max-height: 72vh; overflow: auto; border: 1px solid var(--hair); border-radius: var(--r-s); }
  .sg-row { display: grid; grid-template-columns: 170px repeat(7, minmax(104px, 1fr)); border-bottom: 1px solid var(--hair); }
  .sg-head { border-bottom: 2px solid var(--line); position: sticky; top: 0; background: var(--surface-card, White); z-index: 3; }
  .sg-name { padding: 6px 8px; font-weight: 600; font-size: var(--t-sub); border-right: 1px solid var(--line); position: sticky; left: 0; background: var(--surface-card, White); z-index: 1; }
  .sg-head .sg-name { z-index: 4; }
  .sg-cell { border-right: 1px solid var(--hair); padding: 3px; min-height: 40px; position: relative; }
  .sg-cell:not(:has(.sg-form)):hover { background: var(--wash); cursor: pointer; }
  .sg-today { background: var(--brand-pink); }
  .sg-paint { outline: 1px dashed var(--brand-gold-mid); outline-offset: -2px; cursor: copy; }
  .sg-chip { border: 1px solid var(--line); border-left: 3px solid var(--vc, var(--muted)); border-radius: var(--r-s); padding: 2px 5px; margin-bottom: 2px; font-size: var(--t-label); background: var(--surface-card, White); display: flex; gap: 4px; align-items: center; flex-wrap: wrap; cursor: pointer; }
  .sg-chip .sg-t { font-weight: 700; }
  .sg-chip .sg-r { color: var(--muted); }
  .sg-draft { background: repeating-linear-gradient(45deg, var(--wash), var(--wash) 5px, var(--hair) 5px, var(--hair) 10px); }
  .sg-copybtn { margin-left: auto; border: 1px solid var(--line); background: var(--surface-card, White); border-radius: 4px; cursor: pointer; font-size: var(--t-label); padding: 0 4px; color: var(--muted); }
  .sg-copybtn:hover { border-color: var(--brand-gold-mid); color: var(--text-heading); }
  .sg-form { padding: 4px; background: var(--wash); border-radius: var(--r-s); }
  /* fetch-560: compact live-state and stale-editor conflict UI; state lives in SG/cseLive. */
  .sg-live-state { display: inline-flex; align-items: center; gap: var(--s-1); margin-left: var(--s-1); }
  .sg-live-conflict { display: flex; flex-direction: column; gap: var(--s-1); margin-bottom: var(--s-2); }
  .sg-live-actions { display: flex; flex-wrap: wrap; gap: var(--s-1); }
  .sg-trlab { display: flex; align-items: center; gap: 5px; font-size: var(--t-sub); cursor: pointer; user-select: none; } /* fetch-533 */
  .sg-trbadge { font-size: var(--t-sub); } /* fetch-533 */
  .sg-form input, .sg-form select { width: 100%; box-sizing: border-box; font-size: var(--t-sub); padding: 3px 5px; margin-top: 3px; }
  .sg-sugg { display: flex; flex-direction: column; gap: 2px; }
  .sg-suggbtn { border: 1px solid var(--line); background: var(--surface-card, White); border-radius: 4px; font-size: var(--t-label); padding: 2px 5px; cursor: pointer; text-align: left; }
  .sg-suggbtn:hover { border-color: var(--brand-gold-mid); background: var(--wash); }
  .sg-formbtns { display: flex; gap: 3px; margin-top: 4px; }
  .sg-formbtns .btn { padding: 2px 8px; font-size: var(--t-label); flex: 1; }
  .sg-paintbar { margin-bottom: var(--s-2); align-items: center; }
  .sg-osrow .sg-cell, .sg-osrow .sg-name { background: color-mix(in srgb, var(--pipe-orange) 20%, var(--surface-card)); }
  .sg-osrow .sg-name { color: var(--warn-fg); font-weight: 700; }
  .sg-oscell { cursor: pointer; }
  .sg-oscell:hover { outline: 1px dashed var(--pipe-orange); outline-offset: -2px; }
  .sg-backrow { margin-bottom: var(--s-2); }
  .sg-lens { display: inline-flex; gap: 0; }
  .sg-lensbtn { border-radius: 0; }
  .sg-lens .sg-lensbtn:first-child { border-radius: var(--r-s) 0 0 var(--r-s); }
  .sg-lens .sg-lensbtn:last-child { border-radius: 0 var(--r-s) var(--r-s) 0; margin-left: -1px; }
  .sg-lens .sg-lensbtn--on { background: var(--navy); color: White; border-color: var(--navy); }
  .sg-chip--away { opacity: .55; border-style: dashed; }
  .sg-awayv { color: var(--muted); font-size: var(--t-label); }
  /* fetch-692: saved Staff Schedule views replace the wall of venue / lens / position /
     roster controls. The week and publish action remain visible; view scope stays readable
     as chips; the complete editor uses the existing render-driven modal primitive. */
  .sg-viewbar { display: flex; align-items: flex-end; gap: var(--s-2); flex-wrap: wrap; margin-top: var(--s-3); }
  .sg-viewfield { display: flex; flex-direction: column; gap: var(--s-1); flex: 1 1 220px; min-width: 180px; }
  .sg-viewlabel { color: var(--muted); font-size: var(--t-sub); font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
  .sg-viewfield .sel { width: 100%; min-height: var(--control-height-md); }
  .sg-view-actions { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }
  .sg-view-edit { min-height: var(--control-height-md); }
  .sg-view-summary { display: flex; align-items: center; gap: var(--s-1); flex-wrap: wrap; margin-top: var(--s-2); min-height: var(--control-height-sm); }
  .sg-view-chip { display: inline-flex; align-items: center; gap: var(--s-1); min-height: var(--control-height-sm);
    padding: var(--s-1) var(--s-2); border: 1px solid var(--line); border-radius: 999px;
    background: var(--wash); color: var(--text-heading); font: inherit; font-size: var(--t-sub); cursor: pointer; }
  .sg-view-chip:hover { border-color: var(--brand-gold-mid); background: var(--surface-card, White); }
  .sg-view-chip--quiet { cursor: default; color: var(--muted); }
  .sg-view-chip--quiet:hover { border-color: var(--line); background: var(--wash); }
  .sg-view-x { color: var(--muted); font-weight: 700; }
  /* fetch-844: saved views activate from a chip row inside the Edit-filters dialog */
  .sg-view-chips { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin-bottom: var(--s-3); }
  .sg-view-chip--on { border-color: var(--gold); color: var(--gold-dark); font-weight: 600; }
  .sg-view-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); }
  .sg-view-field { display: flex; flex-direction: column; gap: var(--s-1); min-width: 0; }
  .sg-view-field--wide { grid-column: 1 / -1; }
  .sg-view-field label, .sg-view-field legend { color: var(--text-heading); font-size: var(--t-sub); font-weight: 700; }
  .sg-view-field .sel { width: 100%; min-height: var(--control-height-md); box-sizing: border-box; }
  .sg-view-fieldset { margin: 0; padding: 0; border: 0; }
  .sg-view-fieldset .sg-lens { margin-top: var(--s-1); }
  .sg-view-check { display: flex; align-items: flex-start; gap: var(--s-2); min-height: var(--control-height-md); cursor: pointer; }
  .sg-view-check input { margin-top: var(--s-1); }
  .sg-view-check > span, .sg-view-check .sg-view-help { display: block; }
  .sg-view-check .sg-view-help { margin-top: var(--s-1); }
  .sg-view-help { color: var(--muted); font-size: var(--t-sub); line-height: 1.45; }
  .sg-loadnotice { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); flex-wrap: wrap; margin: var(--s-2) 0; }
  .sg-loadnotice .btn { margin-left: auto; }
  .sg-view-save { margin-top: var(--s-4); padding-top: var(--s-3); border-top: 1px solid var(--hair); }
  .sg-view-save-row { display: flex; align-items: flex-end; gap: var(--s-2); flex-wrap: wrap; }
  .sg-view-save-row .sg-viewfield { min-width: 220px; }
  .sg-view-dialog-actions { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; margin-top: var(--s-4); }
  .sg-view-dialog-actions .sg-view-apply { margin-left: auto; }
  .sg-manager-viewbar { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); align-items: end; gap: var(--s-4); }
  .sg-manager-viewcopy { display: flex; flex-direction: column; gap: var(--s-1); padding-bottom: var(--s-1); color: var(--muted); font-size: var(--t-sub); line-height: 1.45; }
  .sg-manager-viewcopy strong { color: var(--text-heading); font-size: var(--t-body); }
  .sg-statusline { display: flex; align-items: center; gap: var(--s-1); flex-wrap: wrap; }
  .sg-statuscopy { margin-top: var(--s-1); }
  /* fetch-968: one desktop control header, with the roster as its own work surface. */
  .sg-desktop-header .pgh { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2) var(--s-4); border: 0; background: none; padding: 0; margin: 0; box-shadow: none; }
  .sg-desktop-header .pgh-top { flex: 1 1 16rem; }
  .sg-desktop-header .pgh-row { margin: 0; min-width: 0; }
  .sg-desktop-header .pgh-seg { flex-wrap: wrap; width: auto; overflow: visible; mask-image: none; -webkit-mask-image: none; }
  .sg-desktop-header .pgh.pgh--compact .pgh-nav { display: flex; flex-wrap: wrap; align-items: center; margin: 0; gap: var(--s-1); }
  .sg-desktop-header .pgh .pgh-navlabel { flex: 0 1 auto; font-family: Inter, sans-serif; font-size: var(--t-sub); line-height: 1.35; font-variant-numeric: tabular-nums; }
  .sg-desktop-header .pgh-nav .btn, .sg-desktop-header .sg-view-chip, .sg-desktop-header .sg-live-state .btn { min-height: var(--control-height-touch); min-width: var(--control-height-touch); }
  /* fetch-970: live status shares the steering row; only active filters earn a summary row. */
  .sg-desktop-header { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: var(--s-2); }
  .sg-desktop-header > .sg-live-state { margin: 0; max-width: 10rem; justify-content: flex-end; flex-wrap: wrap; }
  .sg-desktop-header > .sg-view-summary, .sg-desktop-header > .notice { grid-column: 1 / -1; }
  .sg-desktop-header .sg-view-chip--quiet { border: 0; border-radius: 0; background: none; padding: 0; min-height: 0; }
  .sg-desktop-header .sg-live-state .badge { border-radius: 0; padding: 0; background: none; }
  /* fetch-666: venue identity on the staff band, matching the Manager Schedule (fetch-84).
     --vc is set on the row in scheduling.js; the tint is derived from it so one constant
     (VENUE_COLORS) stays the single source of truth for venue colour portal-wide. */
  .sg-eventrow .sg-name, .sg-eventrow .sg-cell { background: color-mix(in srgb, var(--vc, var(--muted)) 13%, var(--surface-card)); }
  .sg-eventrow .sg-name { color: var(--vc, var(--text-heading)); font-weight: 700; border-left: 3px solid var(--vc, transparent); }
  /* fetch-667: the band pins under the sticky date header when the lens is on ONE venue.
     z-index sits below .sg-head (3) so the header always wins, and above .sg-name (1) so the
     pinned row draws over the people scrolling beneath it. */
  .sg-eventrow--pin { position: sticky; top: var(--sg-head-h, 34px); z-index: 2; }
  .sg-eventrow--pin .sg-name { z-index: 3; }
  .sgp-event-venue { color: var(--vc, var(--muted)); }
  .sg-eventcell { display: flex; flex-direction: column; gap: var(--s-1); min-height: 54px; }
  .sg-event-chip { border: 1px solid var(--line); border-left: 3px solid var(--vc, var(--muted)); border-radius: var(--r-s); padding: var(--s-1) var(--s-2); background: var(--surface-card, White); cursor: pointer; min-height: var(--control-height-touch); }
  .sg-event-chip:hover, .sg-event-chip:focus-visible { border-color: var(--brand-gold-mid); outline: 2px solid var(--focus-ring); outline-offset: 1px; }
  .sg-event-chip--on { background: var(--brand-pink); border-color: var(--brand-gold-mid); }
  .sg-event-chip--loadin { border-left-style: dashed; opacity: .85; } /* fetch-973 */
  .sg-event-title { display: block; font-size: var(--t-sub); font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
  .sg-event-meta { display: block; color: var(--muted); font-size: var(--t-sub); line-height: 1.35; }
  /* fetch-968: coverage is quiet type; venue and staffing status keep separate meanings. */
  .sg-event-cov { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: var(--s-1); row-gap: 0; margin-top: var(--s-1); font-size: var(--t-sub); line-height: 1.35; }
  .sg-event-count { color: var(--mute-fg); }
  .sg-event-count strong { font-weight: 600; }
  .sg-event-count--short { color: var(--bad-fg); }
  .sg-event-count--short strong { font-weight: 700; }
  .sg-event-sep { color: var(--muted); }
  .sg-shortpost { padding: 1px 5px; font-size: var(--t-label); }
  .sg-event-unknown { color: var(--muted); font-size: var(--t-sub); line-height: 1.35; }
  .sg-setup-short { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--s-1); border-left: 2px dashed var(--vc, var(--muted)); padding: var(--s-1) var(--s-2); font-size: var(--t-sub); line-height: 1.3; overflow-wrap: anywhere; }
  .sg-setup-label { color: var(--mute-fg); font-weight: 600; }
  .sg-setup-title { order: 1; flex-basis: 100%; color: var(--text-heading); }
  .sg-setup-count { color: var(--bad-fg); margin-inline-start: auto; }
  .sg-focus-note { margin: var(--s-2) 0 0; }
  .sgp-events { margin-top: var(--s-2); padding-top: var(--s-2); border-top: 1px solid var(--line); }
  .sgp-event-venue { font-size: var(--t-label); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; margin: var(--s-1) 0; }
  /* fetch-359: the shared MODAL primitive (WIW-style: new box, old frame dimmed behind).
     Render-driven — a state var decides it exists; Esc / ✕ / backdrop click close it. */
  .cse-modal-bg { position: fixed; inset: 0; background: rgba(26, 26, 26, 0.45); z-index: 600; display: flex; align-items: flex-start; justify-content: center; padding: 7vh var(--s-4) var(--s-4); }
  .cse-modal { background: var(--surface-card, White); border-radius: var(--r-l); box-shadow: 0 24px 64px rgba(0, 0, 0, 0.3); max-width: 660px; width: 100%; max-height: 84vh; overflow: auto; padding: var(--s-4) var(--s-5); }
  .cse-modal-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); margin-bottom: var(--s-3); font-size: var(--t-section); }
  .cse-modal-head h2 { margin: 0; font: inherit; font-weight: 700; }
  .sg-sugg--modal { flex-direction: row; flex-wrap: wrap; }
  .sg-sugg--modal .sg-suggbtn { flex: 1 1 45%; font-size: var(--t-sub); padding: 6px 8px; }
  .cse-modal--wide { max-width: 720px; }
  .sg-tplsaved { display: inline-flex; align-items: center; gap: 4px; padding: 0; border: none; background: none; }
  .sg-tplsaved .sg-tpluse { flex: 1; border: 1px solid var(--brand-gold-mid); background: var(--wash); border-radius: 4px; font-size: var(--t-sub); padding: 6px 8px; cursor: pointer; text-align: left; }
  .sg-tplsaved .sg-tpluse:hover { background: var(--surface-card, White); }
  .sg-tplsaved .sg-tpldel { border: 1px solid var(--line); background: var(--surface-card, White); border-radius: 4px; cursor: pointer; color: var(--muted); font-size: var(--t-label); padding: 4px 6px; }
  /* fetch-504: THE PHONE STAFF SCHEDULE — WIW-shaped day list (scheduling.js sgPhoneHTML).
     Rendered ONLY at ≤640px (JS gate isPhoneVp). Tokens only — the ratchet counts this file.
     The phone full-screen rule for .cse-modal rides the shared 640 media block below. */
  .sgp-ctl { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; margin-top: var(--s-2); }
  .sgp-ctl .sel { flex: 1; min-width: 0; }
  .sgp-strip { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; margin-top: var(--s-2); }
  .sgp-day { border: 1px solid var(--line); border-radius: var(--r-s); background: var(--surface-card, White); padding: 5px 2px; display: flex; flex-direction: column; align-items: center; gap: 1px; cursor: pointer; font-family: inherit; }
  .sgp-day .sgp-dow { font-size: var(--t-label); color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
  .sgp-day .sgp-dom { font-size: var(--t-body); font-weight: 700; color: var(--text-heading); }
  .sgp-day .sgp-n { font-size: var(--t-label); font-weight: 700; color: var(--gold-dark); }
  .sgp-day .sgp-n--zero { color: var(--muted); font-weight: 400; }
  .sgp-day--today { background: var(--brand-pink); }
  .sgp-day--on { border-color: var(--brand-gold-mid); outline: 1px solid var(--brand-gold-mid); background: var(--wash); }
  .sgp-group { margin-bottom: var(--s-3); }
  .sgp-gh { display: flex; align-items: center; gap: var(--s-2); font-weight: 700; font-size: var(--t-sub); color: var(--text-heading); text-transform: uppercase; letter-spacing: .05em; padding: 4px 0; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
  .sgp-group--open .sgp-gh { color: var(--ok-fg); }
  .sgp-gh .sgp-post { margin-left: auto; }
  .sgp-row { display: flex; align-items: center; gap: var(--s-2); border: 1px solid var(--hair); border-radius: var(--r-s); padding: 8px 10px; margin-bottom: 4px; background: var(--surface-card, White); cursor: pointer; min-height: 30px; }
  .sgp-row:active { background: var(--wash); }
  .sgp-t { font-weight: 700; font-size: var(--t-sub); white-space: nowrap; }
  .sgp-who { flex: 1; min-width: 0; font-size: var(--t-sub); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .sgp-who .sgp-sub { display: block; font-weight: 400; font-size: var(--t-label); overflow: hidden; text-overflow: ellipsis; }
  .sgp-add { width: 100%; margin-top: var(--s-2); }
  .sgp-sheet { position: fixed; inset: 0; z-index: 650; background: var(--surface-card, White); overflow: auto; padding: var(--s-4); }
  .sgp-sheet .sg-form input, .sgp-sheet .sg-form select { font-size: var(--t-body); padding: 9px 10px; }
  .sgp-sheet .sg-formbtns .btn { padding: 10px 8px; font-size: var(--t-sub); }
  .sgp-sheet .sg-sugg { flex-direction: row; flex-wrap: wrap; }
  .sgp-sheet .sg-suggbtn { flex: 1 1 45%; font-size: var(--t-sub); padding: 8px; }
  .sgp-pickq { width: 100%; box-sizing: border-box; margin: var(--s-2) 0; }
  .sgp-picklist .sgp-row { min-height: 40px; }
  /* fetch-948: phone agenda controls stay usable; names and times have their own space. */
  .sgp-context { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-2); margin: var(--s-2) 0; font-size: var(--t-sub); }
  .sgp-identity { font-weight: 700; color: var(--text-heading); }
  .sgp-scope { color: var(--muted); }
  .sgp-context .sg-live-state:has(.b-green) { display: none; }
  :is(#sgPhoneDays, #schedAgendaDays) { width: calc(100vw - var(--s-2)); max-width: none; margin-inline: calc((100% - (100vw - var(--s-2))) / 2); }
  :is(#sgPhoneDays, #schedAgendaDays) .sgp-strip { grid-template-columns: repeat(auto-fit, minmax(max(var(--control-height-touch), 3.2em), 1fr)); font-size: var(--t-label); gap: 0; margin-top: 0; }
  :is(#sgPhoneDays, #schedAgendaDays) .sgp-day > span { max-width: 100%; overflow-wrap: anywhere; }
  :is(#sgPhoneDays, #schedAgendaDays) .sgp-day { min-width: 0; min-height: var(--control-height-touch); border-radius: 0; border-inline-end-width: 0; padding-block: var(--s-2); }
  :is(#sgPhoneDays, #schedAgendaDays) .sgp-day:last-child { border-inline-end-width: 1px; }
  :is(#sgPhoneDays, #schedAgendaDays) .sgp-day--on { outline-offset: -2px; }
  .sgp-count-key { padding: var(--s-1) var(--s-2); font-size: var(--t-label); color: var(--muted); }
  #sgPhoneList { padding: var(--s-3); }
  .sgp-listhead { position: relative; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--s-2); margin-bottom: var(--s-2); }
  .sgp-listhead h2 { margin: 0; font: inherit; font-size: var(--t-body); font-weight: 700; }
  /* fetch-951: two creation paths share one phone control; the choices overlay the list. */
  .sgp-addmenu { max-width: 100%; }
  .sgp-addmenu > summary { display: flex; align-items: center; gap: var(--s-2); list-style: none; min-height: var(--control-height-touch); cursor: pointer; }
  .sgp-addmenu > summary::-webkit-details-marker { display: none; }
  .sgp-addmenu-options { position: absolute; top: calc(100% + var(--s-1)); right: 0; z-index: 30; display: grid; gap: var(--s-1); width: 100%; min-width: 0; max-width: 100%; padding: var(--s-1); box-sizing: border-box; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-m); box-shadow: 0 6px 20px color-mix(in srgb, var(--navy-dark) 16%, transparent); }
  .sgp-addmenu-options .btn { width: 100%; min-height: var(--control-height-touch); white-space: normal; text-align: left; font-size: var(--t-body); padding: var(--s-2) var(--s-3); }
  .sgp-addmenu :is(summary,button):focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
  #sgPhoneList .btn, .sgp-context .btn, .sgp-sheet .btn, .sgp-sheet .sg-suggbtn { min-height: var(--control-height-touch); min-width: var(--control-height-touch); }
  .sgp-coverage { margin-bottom: var(--s-3); border-block: 1px solid var(--line); }
  .sgp-coverage > summary { min-height: var(--control-height-touch); padding-block: var(--s-2); box-sizing: border-box; cursor: pointer; font-size: var(--t-sub); }
  .sgp-coverage > summary > span { margin-inline-end: var(--s-2); }
  .sgp-coverage-warn { color: var(--warn-fg); font-weight: 600; }
  .sgp-coverage .sgp-events { margin: 0; padding: 0 0 var(--s-2); border: 0; }
  .sgp-coverage .sgp-events > strong { display: none; }
  .sgp-coverage .sg-event-title { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
  .sgp-focus { display: flex; align-items: center; gap: var(--s-2); margin-bottom: var(--s-2); font-size: var(--t-sub); }
  .sgp-focus > span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
  .sgp-focus .btn { flex-shrink: 0; }
  .sgp-row { width: 100%; box-sizing: border-box; font: inherit; color: var(--text); text-align: left; min-height: var(--control-height-touch); }
  .sgp-row[data-sgedit], .sgp-row[data-sgos] { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "who badge" "time badge"; gap: var(--s-1) var(--s-2); padding: var(--s-3); }
  .sgp-row .sgp-who { grid-area: who; white-space: normal; overflow: visible; overflow-wrap: anywhere; font-size: var(--t-body); }
  .sgp-row .sgp-t { grid-area: time; white-space: normal; font-size: var(--t-sub); color: var(--muted); }
  .sgp-row > .badge { grid-area: badge; justify-self: end; }
  .sgp-row .sgp-sub { white-space: normal; overflow: visible; font-size: var(--t-sub); }
  .sgp-help { font-size: var(--t-sub); line-height: 1.4; }
  dialog.sgp-sheet { margin: 0; border: 0; box-sizing: border-box; width: 100vw; max-width: 100vw; height: 100vh; height: 100dvh; max-height: none; color: var(--text); padding-bottom: max(var(--s-4), env(safe-area-inset-bottom)); }
  .sgp-sheet .cse-modal-head { gap: var(--s-2); }
  .sgp-sheet .cse-modal-head > strong { min-width: 0; overflow-wrap: anywhere; }
  .sgp-sheet .cse-modal-head .btn { flex-shrink: 0; }
  #eventStaffStrip .pgh-navlabel { font-family: Inter, sans-serif; }
  .sgp-draft-summary { font-size: var(--t-sub); color: var(--text-heading); }
  .sgp-sheet .sg-trlab { display: flex; align-items: center; justify-content: flex-start; gap: var(--s-2); }
  .sgp-sheet .sg-form .sg-trlab input[type="checkbox"] { width: auto; min-width: 0; flex: 0 0 auto; margin: 0; }
  .sgp-fieldlabel { display: block; margin-top: var(--s-3); margin-bottom: var(--s-1); font-size: var(--t-sub); font-weight: 600; }
  .sgp-sheet .sg-form input:not([type="checkbox"]), .sgp-sheet .sg-form select, .sgp-sheet .sgp-pickq { min-height: var(--control-height-touch); font-size: max(1rem, var(--t-body)); width: 100%; box-sizing: border-box; }
  .sgp-sheet .sg-trlab { min-height: var(--control-height-touch); font-size: var(--t-sub); }
  .sgp-sheet .sg-formbtns { display: flex; flex-wrap: wrap; gap: var(--s-2); }
  .sgp-sheet .sg-formbtns .btn { flex: 1 1 auto; }
  :is(:is(#sgPhoneDays, #schedAgendaDays), #sgPhoneList, .sgp-sheet) :is(button, summary, input, select):focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
  @media (max-width: 640px) {
    /* fetch-504: the shared modal primitive becomes a FULL-SCREEN SHEET on phones — this was
       the standing "open-shift modal renders half off-screen" bug on the grid, and it fixes
       the templates manager and recipe modal the same way for free. */
    .cse-modal-bg { padding: 0; align-items: stretch; }
    .cse-modal { max-width: none; max-height: none; border-radius: 0; width: 100%; }
    .cse-modal .stf-flex { flex-direction: column; }
    .cse-modal .stf-field, .cse-modal .stf-field--w { width: 100%; }
    .schedule-family { align-items: stretch; flex-direction: column; gap: var(--s-2); }
    .schedule-family__tabs { width: 100%; box-sizing: border-box; }
    .schedule-family__tab { flex: 1 0 auto; min-height: var(--control-height-touch); }
    .schedule-family__context { margin-left: 0; text-align: left; }
    .sg-viewbar { align-items: stretch; }
    .sg-viewfield { flex-basis: 100%; min-width: 0; }
    .sg-view-edit { min-height: var(--control-height-touch); }
    .sg-viewfield .sel, .sg-view-field .sel, .sg-view-chip, .sg-view-check, .sg-lensbtn, #sgViewClose, .empty-state .btn[data-sgemptyedit], .empty-state .btn[data-sgemptyreset] { min-height: var(--control-height-touch); }
    #sgViewClose { min-width: var(--control-height-touch); }
    .sg-loadnotice .btn { min-height: var(--control-height-touch); }
    .sg-view-grid { grid-template-columns: 1fr; }
    .sg-view-field--wide { grid-column: auto; }
    .sg-view-dialog-actions .btn, .sg-view-save-row .btn { min-height: var(--control-height-touch); }
    .sg-view-dialog-actions .sg-view-apply { margin-left: 0; }
    .sg-manager-viewbar { grid-template-columns: 1fr; gap: var(--s-2); }
    .sg-manager-viewbar .sel { min-height: var(--control-height-touch); }
    /* fetch-697: the duty-grid date owns a full row on phones; actions stay large enough
       to tap and wrap below it instead of squeezing the week into a four-line column. */
    .cal-controls.schd-controls .cal-title { order: -1; flex: 1 0 100%; margin: 0 0 var(--s-1); text-align: left; }
    .schd-controls .btn { min-height: var(--control-height-touch); }
  }
  .cappill--revoked { background: #fff; color: #b0a9a0; border-color: #ece7dd; text-decoration: line-through; }
  /* fetch-525: the filter-bar clear button used to carry its padding and size inline.
     Moving it to a class is why this change lands ratchet-NEGATIVE instead of neutral. */
  .uf-clear { padding: 1px var(--s-2); font-size: var(--t-sub); }
  /* fetch-530: deactivate controls — classes, not inline (the standing ratchet rule) */
  .ulock-btn { margin-top: var(--s-2); font-size: var(--t-sub); color: var(--bad-fg); border-color: var(--bad-fg); }
  .ulock-row { display: flex; gap: var(--s-2); align-items: center; padding-top: var(--s-1); flex-wrap: wrap; }
  .cap-group { margin-top: 10px; }
  .cap-group-lbl { font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-secondary, #5f6872); margin-bottom: 5px; display: flex; align-items: center; gap: 6px; }
  .cap-group-lbl.risk-high { color: var(--bad-fg); }
  .user-filterbar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; }
  .user-filterbar input, .user-filterbar select { font-size: 13px; }
  .user-filterbar .uf-count { margin-left: auto; font-size: 12px; color: var(--text-secondary, #5f6872); }
  /* ---- fetch-87: managers schedule grid ---- */
  /* fetch-846: .schd becomes its own scroller (the .sg-scroll precedent). The old overflow-x:auto
     made .schd the scroll container for BOTH axes while vertical scroll stayed on the window —
     which is why the .schd-head sticky rule below had been dead since fetch-87. min-width rows
     still need horizontal scroll, so the internal scroller is the only shape that works. */
  .schd { border: 1px solid var(--line); border-radius: 10px; overflow: auto; max-height: 72vh; background: #fff; }
  .schd-band { position: sticky; top: var(--schd-head-h, 34px); z-index: 2; } /* fetch-846: ONE wrapper — stacked sticky rows at one offset would overlap; offset is measured in bindSchedule */
  .schd-row { display: grid; grid-template-columns: 150px repeat(7, minmax(96px, 1fr)); border-bottom: 1px solid #f1efe9; min-width: 860px; }
  .schd-row:last-child { border-bottom: 0; }
  .schd-head { background: #242b42; color: #fff; position: sticky; top: 0; z-index: 3; } /* fetch-846: z above the band — mirrors the staff grid's 3/2/1 ladder */
  .schd-head .schd-name { color: #fff; }
  .schd-head .muted { color: #b9c2d0; }
  .schd-name { padding: 6px 9px; font-weight: 600; font-size: 12.5px; border-right: 1px solid var(--line); display: flex; align-items: center; gap: 5px; color: var(--vc, inherit); }
  /* fetch-942 (Jack: "like a blank tile under someones name with a +"): adding a manager is the
     grid's last row, where the next name would go — not a button in the banner. Dashed so it reads
     as a placeholder rather than a person; the day cells beside it stay empty for the same reason. */
  .schd-addrow .schd-name { padding: var(--s-1) var(--s-2); }
  .schd-addtile { width: 100%; min-height: var(--control-height-touch); border: 1px dashed var(--line);
                  border-radius: var(--r-s); background: none; cursor: pointer; color: var(--muted);
                  font-family: inherit; font-size: var(--t-section); line-height: 1; padding: 0; }
  .schd-addtile:hover { border-color: var(--brand-gold-mid); color: var(--text-heading); background: var(--wash); }
  .schd-cell { padding: 4px 6px; border-right: 1px solid #f6f4ef; min-height: 34px; font-size: 12px; position: relative; }
  .schd-cell:last-child { border-right: 0; }
  .schd-today { background: #fdf9ef; }
  .schd-click { cursor: pointer; }
  .schd-click:hover { background: #f4efe5; box-shadow: inset 0 0 0 1px var(--gold, #c09267); border-radius: 4px; }
  .schd-evrow { background: #faf8f4; }
  .schd-evrow .schd-cell { min-height: 26px; }
  .schd-ev { font-size: 10.5px; font-weight: 600; line-height: 1.25; cursor: pointer; margin-bottom: 2px; }
  .schd-ev:hover { text-decoration: underline; }
  .schd-crewhead { background: #f0ece4; }
  .schd-crewhead .schd-name { font-size: 10.5px; letter-spacing: .06em; color: #707373; }
  .schd-crewhead .schd-cell { min-height: 18px; }
  .schd-time { font-weight: 700; font-size: 12px; }
  .schd-code { font-size: 10.5px; font-weight: 700; }
  .schd-state { font-weight: 700; font-size: 11px; color: #9aa3af; }
  .schd-state.schd-v { color: #0891b2; }
  .schd-state.schd-ro { color: #d97706; }
  .schd-state.schd-tbd { color: #b45309; }
  .schd-blank { color: #d8d4cb; }
  .schd-ro { color: #d97706; font-weight: 700; font-size: 10.5px; }
  .schd-rocell { background: #fff7ea; }
  .schd-editing { background: #fffdf7; box-shadow: inset 0 0 0 2px var(--gold, #c09267); border-radius: 4px; z-index: 3; min-width: 130px; }
  .schd-form { padding: 2px 0; }
  .schd-qbtn { border: 1px solid var(--line); background: #fff; border-radius: 5px; font-size: 10.5px; padding: 2px 5px; cursor: pointer; font-weight: 700; color: #707373; }
  .schd-qbtn:hover { background: #f0ece4; }
  .schd-pedit { border: 0; background: none; cursor: pointer; font-size: 10px; color: #c8c2b6; padding: 0 2px; }
  .schd-pedit:hover { color: var(--gold, #c09267); }
  /* ---- fetch-88: schedule + ops timelines polish ---- */
  .schd-wrap { position: relative; }
  .schd-wrap::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 26px; border-radius: 0 10px 10px 0; background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.92)); pointer-events: none; opacity: 0; z-index: 4; }
  .schd .schd-name { position: sticky; left: 0; z-index: 1; background: #fff; }
  .schd .schd-head .schd-name { background: #242b42; z-index: 4; } /* fetch-846: corner cell tops the ladder */
  .schd .schd-crewhead { background: #ece6da; border-top: 2px solid #ddd5c5; }
  .schd .schd-crewhead .schd-name { background: #ece6da; color: #5c5346; letter-spacing: .08em; }
  .schd .schd-evrow { background: #faf8f4; background: color-mix(in srgb, var(--vc, #8a8577) 7%, #fff); }
  .schd .schd-evrow .schd-name { background: #faf8f4; background: color-mix(in srgb, var(--vc, #8a8577) 10%, #fff); }
  .schd .schd-cell.schd-today { background-image: linear-gradient(rgba(192,146,103,.11), rgba(192,146,103,.11)); }
  .schd .schd-head .schd-cell.schd-today { background: rgba(192,146,103,.30); box-shadow: inset 0 -3px 0 var(--gold, #c09267); }
  .schd .schd-warn { display: inline-flex; align-items: center; gap: 3px; margin-top: 2px; font-size: 10.5px; font-weight: 700; color: #8f2d3c; background: rgba(143,45,60,.08); border: 1px solid rgba(143,45,60,.22); border-radius: 20px; padding: 1px 7px; letter-spacing: .02em; }
  .schd .schd-form input:focus { outline: 2px solid rgba(192,146,103,.45); outline-offset: -1px; border-color: var(--gold, #c09267); }
  .schd .schd-qbtn { min-height: 24px; }
  .card.myw { background: linear-gradient(135deg, #fdfbf6 0%, #f6eee2 100%); border-left: 4px solid var(--gold, #c09267); }
  .myw .myw-head { display: flex; align-items: baseline; gap: 9px; margin-bottom: 8px; }
  .myw .myw-title { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 20px; font-weight: 700; color: var(--navy, #384a61); }
  .myw .myw-name { font-size: 11px; color: #8c6145; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
  .myw .myw-days { display: flex; gap: 6px; flex-wrap: wrap; }
  .myw .myw-chip { flex: 1; min-width: 88px; background: #fff; border: 1px solid var(--line); border-radius: 9px; padding: 7px 9px; }
  .myw .myw-dow { font-size: 10.5px; color: #707373; letter-spacing: .05em; text-transform: uppercase; font-weight: 700; }
  .myw .myw-val { font-size: 13px; font-weight: 700; color: var(--navy, #384a61); margin-top: 1px; }
  .myw .myw-code { font-size: 11px; font-weight: 700; }
  .myw .myw-chip.myw-off .myw-val { color: #b9b2a5; }
  .myw .myw-chip.myw-today { border-color: var(--gold, #c09267); background: #fffdf7; box-shadow: 0 0 0 1px var(--gold, #c09267) inset, 0 3px 10px rgba(192,146,103,.20); }
  .myw .myw-chip.myw-today .myw-dow { color: #8c6145; }
  .card .opstl-hero-title { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 21px; font-weight: 700; color: var(--navy, #384a61); margin-bottom: 2px; }
  .card .opstl-hero-title .opstl-hero-sub { font-size: 15px; color: #8c6145; font-style: italic; font-weight: 600; }
  .card .opstl-row { padding: 9px 0; border-bottom: 1px solid #f1f2f4; align-items: baseline; }
  .card .opstl-time { min-width: 80px; font-weight: 700; color: var(--navy, #384a61); font-size: 16px; font-variant-numeric: tabular-nums; }
  .card .opstl-form { background: #faf8f4; border: 1px solid var(--line); border-radius: 10px; padding: 12px; margin: 8px 0; box-shadow: 0 4px 14px rgba(20,33,61,.07); }
  .card #opsTlPullBeo, .card #opsTlSaveTpl { border-color: var(--gold, #c09267); color: #8c6145; font-weight: 700; }
  .card #opsTlPullBeo:hover, .card #opsTlSaveTpl:hover { background: #f6eee2; }
  .calw .calw-venue { box-shadow: inset 3px 0 0 var(--vc, transparent); }
  .calw .calw-row:hover .calw-cell { background-color: #fcfaf5; }
  .calw .calw-cell.cal-today { background-image: linear-gradient(rgba(192,146,103,.10), rgba(192,146,103,.10)); }
  @media (max-width: 720px) {
    .schd-wrap::after { opacity: 1; }
    .schd .schd-row:not(.schd-crewhead):not(.schd-head) .schd-cell { min-height: 44px; padding: 8px; }
    .schd .schd-row:not(.schd-crewhead):not(.schd-head) .schd-name { min-height: 44px; }
    .card .opstl-row { padding: 11px 0; }
  }
  /* ---- fetch-86: week calendar board ---- */
  .calw { border: 1px solid var(--line); border-radius: 10px; overflow-x: auto; background: #fff; }
  .calw-row { display: grid; grid-template-columns: 130px repeat(7, minmax(110px, 1fr)); border-bottom: 1px solid var(--line); min-width: 900px; }
  .calw-row:last-child { border-bottom: 0; }
  .calw-head { background: #faf8f4; position: sticky; top: 0; }
  .calw-venue { padding: 8px 10px; font-weight: 700; font-size: 12.5px; display: flex; align-items: center; gap: 6px; border-right: 1px solid var(--line); color: var(--vc, #384a61); }
  .calw-cell { padding: 5px 6px; border-right: 1px solid #f1efe9; min-height: 40px; }
  .calw-cell:last-child { border-right: 0; }
  .calw-cell.cal-today { background: #fdf9ef; }
  /* ---- fetch-84: Build an Event hero ---- */
  .build-evt { background: linear-gradient(135deg, var(--navy) 0%, #2c4a7c 100%); border-radius: 14px; padding: 16px 18px; margin-bottom: 14px; border-bottom: 3px solid var(--gold); }
  .build-evt .be-title { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 18px; font-weight: 700; color: #fff; }
  .build-evt .be-sub { color: #c8d4e4; font-size: 12.5px; margin: 2px 0 10px; }
  .build-evt .be-row { display: flex; gap: 8px; flex-wrap: wrap; }
  .build-evt input, .build-evt select { border: none; border-radius: 8px; padding: 9px 11px; font-size: 14px; font-family: inherit; }
  .build-evt input#beTitle { flex: 2; min-width: 180px; }
  .build-evt input#beDate { min-width: 140px; }
  .build-evt select#beVenue { min-width: 130px; }
  .build-evt .btn-gold { font-size: 14.5px; font-weight: 700; padding: 9px 20px; }
  /* ---- fetch-84: wiki back buttons ---- */
  .wiki-back { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 600; color: var(--navy); background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 6px 12px; cursor: pointer; margin-bottom: 10px; }
  .wiki-back:hover { border-color: var(--gold); }
  /* ---- Button loading state (fetch-82) ---- */
  button.is-loading { position: relative; color: transparent !important; pointer-events: none; }
  button.is-loading::after { content: ""; position: absolute; top: 50%; left: 50%; width: 13px; height: 13px; margin: -7px 0 0 -7px; border: 2px solid rgba(56,74,97,.25); border-top-color: var(--navy); border-radius: 50%; animation: btnspin .6s linear infinite; }
  .btn-primary.is-loading::after, .btn-gold.is-loading::after { border-color: rgba(255,255,255,.35); border-top-color: #fff; }
  @keyframes btnspin { to { transform: rotate(360deg); } }
  body.app-busy button:not(.is-loading) { opacity: .65; pointer-events: none; }
  /* ---- Sales pipeline (fetch-71) ---- */
  .pipe-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; }
  .pipe-col { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 12px 13px; border-top: 3px solid var(--pipe-accent, var(--gold)); }
  .pipe-head { display: flex; align-items: center; gap: 7px; font-size: 14px; color: var(--navy); }
  .pipe-hint { font-size: 11.5px; color: var(--muted); margin: 3px 0 8px; }
  .pipe-def { cursor: help; border-bottom: 1px dotted var(--muted); }
  .pipe-actrow { display: flex; gap: 4px; align-items: center; margin-top: 3px; }
  .pipe-row { padding: 7px 8px; border: 1px solid #f0f0ee; border-radius: 8px; margin-bottom: 6px; cursor: pointer; background: #fcfcfb; }
  .pipe-row:hover { background: #f5f3ee; border-color: var(--gold); }
  .pipe-title { font-weight: 600; font-size: 13px; color: var(--ink); }
  .pipe-sub { font-size: 11.5px; color: var(--muted); margin-top: 1px; }
  .pipe-val { font-size: 12.5px; font-weight: 700; color: var(--gold-dark); margin-top: 2px; }
  /* fetch-898: The Queue - unassigned inquiries above the Pipeline board. Tokens only. The pq- prefix is also worn
     by the orphaned fetch-102 phone quick-action island further down (.pq-grid / .pq-tile / .pq-ic; nothing emits
     them) - those three names are not reused here, and a sweep of that island must leave these four alone. */
  .pq-sub { font-size: var(--t-sub); color: var(--muted); margin-top: 1px; }
  /* ---- Venue P&L (fetch-73) ---- */
  .fin-table { width: 100%; border-collapse: collapse; }
  .fin-table thead th { font-size: 11px; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); font-weight: 700; padding: 8px 12px; border-bottom: 1px solid var(--line); text-align: right; background: #fcfcfb; }
  .fin-table thead th:first-child { text-align: left; }
  .fin-table tbody td { padding: 9px 12px; border-bottom: 1px solid #f0f0ee; font-size: 14px; }
  .fin-table tbody tr:last-child td { border-bottom: none; }
  .fin-table tbody tr:hover { background: #fafaf8; }
  .fin-num { text-align: right; font-variant-numeric: tabular-nums; }
  .fin-editable { cursor: pointer; }
  .fin-editable:hover { background: #eef4ff; box-shadow: inset 0 0 0 2px #bfdbfe; border-radius: 4px; }
  /* ---- Asset picker (fetch-77 clean-up) ---- */
  .pbox { border: 1px solid var(--line); border-radius: 10px; background: #fcfcfb; padding: 10px; }
  .pbox-top { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
  .pbox-top input#pSearch { flex: 1; min-width: 150px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px; font-size: 13px; background: #fff; }
  .pbox-chips { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 8px; }
  .pchip { border: 1px solid var(--line); background: #fff; color: var(--muted); border-radius: 20px; padding: 3px 11px; font-size: 12px; cursor: pointer; font-weight: 600; }
  .pchip:hover { border-color: var(--navy); color: var(--navy); }
  .pchip.on { background: var(--navy); color: #fff; border-color: var(--navy); }
  /* fetch-425 (One Portal Wave 3): Sales dashboard styles hoisted out of salesDashHTML's private <style> — tokenized, byte-identical rendering */
  .sd-controls { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; }
  .sd-kpis { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; margin-bottom: 14px; }
  .sd-kpi { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; }
  .sd-kpi-l { font-size: var(--t-label); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
  .sd-kpi-v { font-size: 24px; font-weight: 700; margin-top: 4px; font-variant-numeric: tabular-nums; }
  .sd-kpi-s { font-size: var(--t-sub); color: var(--muted); margin-top: 2px; }
  .sd-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
  .sd-card { padding: 12px 14px; }
  .sd-card-h { font-weight: 700; font-size: 13px; margin-bottom: 10px; }
  .sd-row { display: grid; grid-template-columns: 120px 1fr auto; gap: 10px; align-items: center; margin: 6px 0; font-size: 12.5px; }
  .sd-row-l { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .sd-row-v { white-space: nowrap; color: var(--muted); font-variant-numeric: tabular-nums; }
  .sd-months { display: flex; align-items: flex-end; gap: 6px; height: 120px; padding-top: 6px; }
  .sd-mo { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; }
  .sd-mo-bar { width: 100%; max-width: 26px; background: var(--brand-blue-traditional); border-radius: 4px 4px 0 0; min-height: 2px; }
  .sd-mo-l { font-size: 10px; color: var(--muted); }
  .sdlb-row { display: grid; grid-template-columns: minmax(84px,120px) 1fr 92px 52px 62px 76px; gap: 10px; align-items: center; margin: 7px 0; font-size: var(--t-body); }
  .sdlb-head { font-size: var(--t-label); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--hair); padding-bottom: 4px; margin: 0 0 4px; font-weight: 600; }
  .sdlb-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
  .sdlb-r { text-align: right; white-space: nowrap; }
  .sdlb-money { font-weight: 600; }
  .sdlb-ahead { color: var(--gold-dark); font-weight: 600; }
  .sdlb-note { font-size: var(--t-sub); color: var(--muted); margin-top: 10px; border-top: 1px solid var(--hair); padding-top: 8px; line-height: 1.5; }
  @media (max-width: 900px) { .sd-kpis { grid-template-columns: repeat(2,1fr); } .sd-grid { grid-template-columns: 1fr; } .sd-row { grid-template-columns: 90px 1fr auto; } .sdlb-row { grid-template-columns: minmax(72px,1fr) 96px 58px 72px; } .sdlb-row > :nth-child(2), .sdlb-row > :nth-child(4) { display: none; } }
  /* fetch-425 (One Portal Wave 3): calls-queue styles hoisted out of whoToCallHTML's private <style> — tokenized, byte-identical rendering */
  .wtc-intro { margin: 0 0 var(--s-3); color: var(--muted); font-size: var(--t-sub); line-height: 1.5; }
  .pgh:has(#wtcMine) { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--s-3); }
  .pgh:has(#wtcMine) .pgh-top { grid-column: 1; grid-row: 1; align-self: center; }
  .pgh:has(#wtcMine) .pgh-scope { grid-column: 2; grid-row: 1; margin-top: 0; }
  .pgh:has(#wtcMine) .pgh-scope-choices { flex: 0 0 auto; border: 0; overflow: visible; }
  .pgh:has(#wtcMine) .pgh-tabs, .pgh:has(#wtcMine) .pgh-meta { grid-column: 1/-1; }
  .pgh .pgh-scope-choice[data-wtcmine] { min-height: var(--control-height-touch); padding: var(--s-2); background: transparent; font-size: var(--t-sub); }
  .wtc-card { padding: 12px 14px; margin-bottom: 14px; }
  .wtc-hd { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-2); margin-bottom: var(--s-2); }
  .wtc-hd h3 { margin: 0; font-size: var(--t-section); flex-shrink: 0; }
  .wtc-hd .wtc-tot { margin-left: auto; font-size: var(--t-sub); color: var(--muted); font-variant-numeric: tabular-nums; }
  .wtc-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-3); align-items: center; padding: var(--s-3) 0; border-top: 1px solid var(--line); }
  .wtc-record { display: grid; grid-template-columns: minmax(0, 1fr) minmax(11rem, .65fr) auto; align-items: center; gap: var(--s-5); min-width: 0; min-height: var(--control-height-touch); width: 100%; padding: var(--s-2); border: 0; border-radius: var(--r-s); background: transparent; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
  .wtc-record:hover { background: var(--wash); }
  .wtc-record:hover .wtc-name { color: var(--action-primary); text-decoration: underline; text-underline-offset: .2em; }
  .wtc-main, .wtc-history, .wtc-contact { display: grid; min-width: 0; gap: var(--s-1); overflow-wrap: anywhere; }
  .wtc-name { font-weight: 600; font-size: var(--t-body); color: var(--text-heading); }
  .wtc-contact, .wtc-owner, .wtc-history { font-size: var(--t-sub); line-height: 1.5; color: var(--muted); }
  .wtc-contact:empty { display: none; }
  .wtc-reason { color: var(--text-heading); font-weight: 600; }
  .wtc-val { text-align: right; font-weight: 700; font-size: var(--t-body); font-variant-numeric: tabular-nums; white-space: nowrap; }
  .wtc-vall { display: block; font-weight: 400; font-size: var(--t-sub); color: var(--muted); }
  .wtc-acts { display: flex; gap: var(--s-1); justify-content: flex-end; }
  .wtc-action { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 var(--control-height-touch); width: var(--control-height-touch); min-height: var(--control-height-touch); padding: 0; border: 0; border-radius: var(--r-s); background: transparent; color: var(--action-primary); cursor: pointer; }
  .wtc-action > span { display: flex; }
  .wtc-action:hover, .wtc-action[aria-expanded="true"] { background: var(--wash); }
  .wtc-action:disabled { opacity: .5; cursor: wait; }
  .wtc-also { font-weight: 600; color: var(--brand-blue-traditional); }
  .wtc-nn-reason { display: grid; gap: var(--s-1); flex: 1 1 200px; min-width: 0; font-size: var(--t-sub); }
  .wtc-nn-reason .wtc-nn-r { width: 100%; min-width: 0; }
  @media (max-width: 640px) {
    .wtc-hd > .muted, .wtc-hd .wtc-tot { flex-basis: 100%; margin-left: 0; }
    .wtc-row { grid-template-columns: minmax(0, 1fr); gap: var(--s-1); }
    .wtc-record { grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-3); padding: var(--s-1) 0; }
    .wtc-main { grid-column: 1/-1; }
    .wtc-val { align-self: end; }
    .wtc-nn .btn, .wtc-nn input { min-height: var(--control-height-touch); }
    .wtc-nn-reason { flex-basis: 100%; }
  }
  .wtc-nn { grid-column: 1/-1; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; background: var(--wash); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; margin: 2px 0 6px; }
  .wtc-nn-r { flex: 1; min-width: 200px; font-size: var(--t-sub); padding: 5px 8px; }
  .wtc-nn-l { display: flex; gap: 6px; align-items: center; font-size: var(--t-sub); color: var(--muted); white-space: nowrap; }
  .wtc-nn-l input { font-size: var(--t-sub); padding: 4px 6px; }
  .wtc-nn .btn { padding: 3px 12px; font-size: var(--t-sub); }
  .wtc-nn-hint { flex-basis: 100%; font-size: var(--t-sub); color: var(--muted); }
  @media (min-width: 641px) and (max-width: 1024px) {
    .wtc-record { grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-3); }
    .wtc-history { grid-column: 1; }
    .wtc-val { grid-column: 2; grid-row: 1/3; }
  }
  /* fetch-426 (One Portal Wave 3 batch 2): Clients list (the Sales Tasks queue half retired with its tab, fetch-876) — inline styles to classes, byte-identical values */
  /* fetch-876: the Sales Tasks page island retired; event-level next steps use the shared evt-task-* rows below. */
  .cl-main { flex: 1; min-width: 0; overflow-wrap: anywhere; }
  .muted.cl-org { font-weight: 400; font-size: 12.5px; }
  .muted.cl-line2 { font-size: var(--t-sub); margin-top: 2px; }
  .muted.cl-line3 { font-size: var(--t-sub); margin-top: 3px; }
  .cl-right { text-align: right; white-space: nowrap; }
  .cl-count { font-weight: 700; font-size: 15px; }
  .muted.cl-life { font-size: 12.5px; }
  .muted.cl-hero { font-size: 12.5px; margin-bottom: 10px; }

  .pbox-note { font-size: 12px; color: var(--gold-dark); font-weight: 600; margin-bottom: 6px; }
  .pbox-list { max-height: 240px; overflow-y: auto; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
  .pbox label.prow { display: flex; align-items: center; gap: 9px; padding: 7px 10px; font-size: 13.5px; cursor: pointer; border-bottom: 1px solid #f4f3f0; color: var(--ink); margin: 0; }
  .pbox label.prow:last-child { border-bottom: none; }
  .pbox label.prow:hover { background: #f7f6f2; }
  .pbox label.prow input { width: 15px; height: 15px; accent-color: var(--navy); flex: 0 0 auto; margin: 0; }
  .pbox .prow-name { font-weight: 600; color: var(--ink); flex: 1 1 auto; min-width: 0; font-size: 13.5px; }
  .pbox .prow-meta { font-size: 11.5px; color: var(--muted); margin-left: auto; text-align: right; white-space: nowrap; flex: 0 0 auto; }
  .pbox-foot { font-size: 11.5px; color: var(--muted); margin-top: 6px; }
  /* ---- Kitchen (fetch-78) ---- */
  .kit-day { margin-bottom: 16px; }
  .kit-day-head { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 15px; font-weight: 700; color: #0f5c50; border-bottom: 2px solid #0f5c50; padding-bottom: 4px; margin-bottom: 8px; display: flex; align-items: center; }
  .kit-card { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; margin-bottom: 8px; cursor: pointer; }
  .kit-card:hover { border-color: #0f5c50; }
  .kit-card.kit-tasting { border-left: 4px solid #0d9488; }
  .kit-head { display: flex; align-items: flex-start; gap: 10px; justify-content: space-between; }
  .kit-title { font-weight: 700; font-size: 15.5px; color: var(--navy); }
  .kit-plan { text-align: right; white-space: nowrap; color: var(--muted); font-size: 11px; }
  .kit-plan-num { font-size: 22px; font-weight: 800; color: #0f5c50; }
  .kit-meta { font-size: 12.5px; color: var(--muted); margin: 2px 0 8px; }
  .kit-fn { display: flex; gap: 10px; align-items: baseline; padding: 4px 8px; background: #f6faf9; border-radius: 6px; margin-bottom: 3px; font-size: 13px; }
  .kit-fn-time { font-weight: 700; color: #0f5c50; font-size: 12px; min-width: 118px; white-space: nowrap; }
  .kit-fn-name { font-weight: 600; color: var(--ink); flex: 1; }
  .kit-fn-att { color: var(--muted); font-size: 12px; white-space: nowrap; }
  .kit-notes { margin-top: 8px; padding: 7px 9px; background: #fdf9ee; border-left: 3px solid var(--gold); border-radius: 5px; font-size: 12.5px; white-space: pre-wrap; }
  .kit-low { background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; border-radius: 10px; padding: 10px 14px; font-size: 13.5px; margin-bottom: 12px; cursor: pointer; }
  .kit-low:hover { background: #fee8e8; }
  .btn.btn-gold { background: var(--gold); color: #fff; border-color: var(--gold); font-weight: 600; }
  .btn.btn-gold:hover { background: var(--gold-dark); border-color: var(--gold-dark); color: #fff; }
  /* ---- Events calendar (R2) ---- */
  .cal-legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--muted); margin-bottom: 10px; align-items: center; }
  .cal-legend > span { display: inline-flex; align-items: center; gap: 5px; }
  .cal-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
  .cal-controls { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
  /* fetch-939: .cal-venuebar / .cal-vchip retired — the venue chips are .pgh-chips inside the header card */
  .cal-title { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 18px; font-weight: 700; color: var(--navy); margin: 0 6px; background: none; border: 0; padding: 0; cursor: pointer; } /* fetch-501: the date IS the Today button */
  .cal-title:hover { color: var(--gold-dark); }
  .cal-grid-head { display: grid; grid-template-columns: repeat(7, 1fr); }
  .cal-dow { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); text-align: center; padding: 6px 0; }
  .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: #fff; }
  .cal-cell { min-height: 96px; border-right: 1px solid #f0f0ee; border-bottom: 1px solid #f0f0ee; padding: 4px; background: #fff; }
  .cal-cell:nth-child(7n) { border-right: none; }
  .cal-empty { background: #fafaf8; }
  .cal-today { background: #f5f9ff; box-shadow: inset 0 0 0 2px var(--gold); }
  .cal-daynum { font-size: 12px; font-weight: 700; color: var(--muted); margin-bottom: 3px; }
  .cal-today .cal-daynum { color: var(--gold-dark); }
  /* fetch-93: today is unmissable on every calendar mode */
  .cal-grid .cal-cell.cal-today { background: #fdf8ef; box-shadow: inset 0 0 0 2px var(--gold); }
  .cal-grid .cal-cell.cal-sel { background: #f4f6fb; box-shadow: inset 0 0 0 2px var(--navy); cursor: pointer; } /* fetch-254: clicked-day anchor */
  .cal-grid .cal-cell:not(.cal-empty) { cursor: pointer; }
  .cal-grid .cal-cell.cal-today .cal-daynum::after { content: "TODAY"; margin-left: 6px; font-size: 10px; letter-spacing: .08em; background: var(--gold); color: #fff; padding: 1px 6px; border-radius: 999px; vertical-align: 1px; }
  .calw .calw-cell.cal-today { background: #fdf8ef; box-shadow: inset 2px 0 0 var(--gold), inset -2px 0 0 var(--gold); }
  .calw .calw-head .calw-cell.cal-today { color: var(--gold-dark); box-shadow: inset 2px 0 0 var(--gold), inset -2px 0 0 var(--gold), inset 0 3px 0 var(--gold); }
  .cal-chip { font-size: 11px; line-height: 1.25; border-radius: 5px; padding: 2px 5px; margin-bottom: 3px; cursor: pointer; overflow: hidden; }
  .cal-chip:hover { filter: brightness(0.94); }
  .cal-chip.is-loadin { opacity: .78; outline: 1px dashed currentColor; outline-offset: -2px; } /* fetch-973: the load-in day of a multi-day event */
  .cal-chip-venue { display: block; font-size: 10.5px; opacity: 1; }
  .cal-chip.st-tasting { background: #d2f0e8; color: #0f5c50; border-left: 3px solid #0d9488; }
  .cal-chip.st-inquiry { background: var(--mute-bg); color: var(--mute-fg); border-left: 3px solid var(--brand-stone); } /* fetch-400 (Amanda): Inquiry=gray */
  .cal-chip.st-lead { background: var(--ok-bg); color: var(--ok-fg); border: 1px dashed var(--ok-fg); } /* fetch-400 (Amanda): Lead=green (was gray-dashed) */
  .cal-chip.st-hold { background: #fef3c7; color: #92400e; border-left: 3px solid var(--pipe-orange); }
  .cal-chip.st-tentative { background: #2563eb; color: #fff; }
  .cal-chip.st-definite { background: #7c3aed; color: #fff; }
  .cal-chip.st-complete { background: #ece9f8; color: #5b21b6; }
  .cal-chip.st-cancelled { background: #f3f4f6; color: #9ca3af; text-decoration: line-through; }
  .cal-chip.is-closed, .cal-chip.is-closed[style*="--vc"] { background: var(--ink); color: var(--surface-card); border-left: 3px solid var(--ink); } /* fetch-911: closed out (events.planning.closed) - black like Reserve's calendar; the CLOSED prefix carries the meaning, the color repeats it */
  /* fetch-145 (audit fix №2): venue-colored chips = tint + dark text + color bar. AA everywhere; the grid goes quiet. */
  .cal-chip[style*="--vc"] { background: color-mix(in srgb, var(--vc) 13%, #fff); color: color-mix(in srgb, var(--vc) 72%, #000); border-left: 3px solid var(--vc); }
  .cal-chip[style*="--vc"] .cal-chip-venue { opacity: .8; }
  /* fetch-145 (audit fix №4): BEO editor line items get real columns; actions on hover (always-on under 720px) */
  .beo-line { display: grid; grid-template-columns: minmax(0,1fr) 56px 86px 92px 92px; gap: 12px; align-items: baseline; padding: 7px 0; border-bottom: 1px solid var(--hair); }
  .beo-line .qty, .beo-line .price, .beo-line .amt { text-align: right; font-variant-numeric: tabular-nums; }
  .beo-line .qty, .beo-line .price { font-size: var(--t-sub); color: var(--muted); }
  .beo-line .amt { font-weight: 600; }
  .beo-line .acts { visibility: hidden; text-align: right; }
  .beo-line:hover .acts { visibility: visible; }
  /* fetch-421 (Amanda): BEO revenue-center section bands + column header row; centered Date/Time on Functions */
  .beo-sec { margin-top: 16px; border-top: 2px solid var(--line); }
  .beo-sec-h { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 8px 0 2px; flex-wrap: wrap; }
  .beo-sec-nm { font-family: 'Cormorant Garamond', Georgia, serif; font-size: var(--t-section); font-weight: 700; color: var(--navy); }
  .beo-sec-nm::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 2px; background: var(--gold); margin-right: 8px; vertical-align: 1px; }
  .beo-sec-sub { font-size: var(--t-sub); color: var(--muted); }
  .beo-sec-sub strong { color: var(--text-heading); font-variant-numeric: tabular-nums; }
  .beo-cols { display: grid; grid-template-columns: minmax(0,1fr) 56px 86px 92px 92px; gap: 12px; padding: 5px 0 4px; border-bottom: 1px solid var(--line); font-size: var(--t-label); text-transform: uppercase; letter-spacing: .4px; color: var(--muted); font-weight: 700; }
  .beo-cols .r { text-align: right; }
  .fin-table th.ta-c, .fin-table td.ta-c { text-align: center; }

  /* ── fetch-520: THE phoneStack PRIMITIVE ────────────────────────────────────────────────
     Jack, on the Menu Catalog at 390px: "Found another wrap bug - we can clean that list up".
     It is not a wrap bug — it is the sideways-scroll problem he named on the timesheet ("our
     data list is sideways scroll with not very good functionality"). A 5-column table in a
     390px window scrolls RIGHT, and the first thing to leave the screen is the item NAME, so
     you are reading prices attached to nothing.

     This is the third phone table (after fetch-513 timesheet and fetch-504 staff schedule), and
     the fetch-518 backlog said: build the shared primitive BEFORE the third hand-conversion.
     So: add class="pstack" to any .fin-table and it becomes a stacked card list on phones.
     Desktop is untouched — every rule lives inside the 640px block.

     Contract, deliberately tiny so it is cheap to adopt:
       <table class="fin-table pstack">
       <tr class="pstack-sec"><td colspan=N>       → a section heading
       <td data-l="Price">                          → becomes "Price $12.00" on its own chip
       <td class="pstack-title">                    → the row's headline, always first, never cut
       <td class="pstack-act">                      → actions, pinned to the row's top-right
     Cells with no marker stack as plain lines. Nothing is hidden — the fetch-513 lesson was that
     a phone view which DROPS columns makes people distrust the number. */
  @media (max-width: 640px) {
    table.pstack, table.pstack tbody, table.pstack tr, table.pstack td { display: block; width: 100%; }
    table.pstack { border-collapse: separate; }
    table.pstack thead { display: none; } /* the labels move onto the cells */
    /* the action gutter is RESERVED on the whole row, not just the title. First build only padded
       .pstack-title, so the labelled chips on line 2 ran underneath the absolutely-positioned
       button — "PAR 6" rendered with the 6 hidden behind the ×. Caught in a screenshot; probe-520
       now asserts geometric non-overlap between every chip and the action button. */
    table.pstack tbody tr { position: relative; padding: var(--s-3) 46px var(--s-3) 0;
      border-bottom: 1px solid var(--line); }
    table.pstack tbody tr:hover { background: transparent; } /* no hover state on a touch screen */
    /* .card table td sets white-space:nowrap globally (0,1,2). A stacked row MUST wrap, so this
       needs to out-specify it — hence .card table.pstack td (0,2,2) rather than !important.
       Diagnosed, not guessed: the first build left menu descriptions running 214px off the edge
       and under the Recipe button. A screenshot showed it; scrollWidth confirmed it. */
    .card table.pstack td, table.pstack tbody td { border: 0; padding: 0; font-size: var(--t-body);
      white-space: normal; overflow-wrap: anywhere; word-break: normal; min-width: 0; }
    table.pstack .pstack-title { font-weight: 700; color: var(--navy); line-height: 1.3; } /* gutter now lives on the row */
    table.pstack .pstack-title .muted { font-weight: 400; }
    .card table.pstack td[data-l], table.pstack td[data-l] { display: inline-block; width: auto;
      margin: var(--s-2) var(--s-3) 0 0; font-size: var(--t-sub); color: var(--ink);
      text-align: left; white-space: nowrap; } /* a number must never break mid-figure */
    table.pstack td[data-l]::before { content: attr(data-l) " "; color: var(--brand-stone);
      text-transform: uppercase; letter-spacing: .3px; font-size: var(--t-label); }
    table.pstack .pstack-act { position: absolute; top: var(--s-3); right: 0; width: auto; text-align: right; }
    table.pstack tr.pstack-sec { padding-right: 0; } /* section headings have no action to dodge */

    table.pstack .pstack-note:not(:empty) { display: block; margin-top: var(--s-2);
      font-size: var(--t-sub); color: var(--brand-stone); } /* free text gets its own full line */
    table.pstack .pstack-note:empty { display: none; }      /* ...and no blank gap when there is none */
    table.pstack tr.pstack-sec { padding: var(--s-4) 0 var(--s-1); border-bottom: 0; }
    table.pstack tr.pstack-sec td { font-size: var(--t-label); text-transform: uppercase;
      letter-spacing: .6px; color: var(--brand-stone); font-weight: 700; }
  }

  /* ── fetch-521 → fetch-526: the per-page "← Back to …" buttons retire EVERYWHERE ──────────────────────
     Jack: "why would we not use that function around the entire site rather than using more
     screen space for buttons like (back to trainees)?" — the chip now covers all of these,
     because it drives the same history that already tracks viewTrainee / viewEvent / viewAsset
     / viewVendor / wikiArticle / the print documents.

     THE GUARD THAT MATTERS: this only applies under body.has-navback, i.e. only when there IS
     an in-app history entry to go back to. A deep link — ?event=ID from a text message, a
     shared ?timeline= run sheet — lands at depth 0 with nothing behind it. Those pages keep
     their own button, because a hidden back with no chip is a person stranded on a detail page.

     ── fetch-526 (Jack): "if the back button works on browser why do we still have these (back
     to events) buttons — we need to do a sweep and get rid of those types". Right, and the
     fetch-521 note that "desktop keeps every one of them" was the timid half of a finished idea.
     The 640px wrapper is GONE: the same fourteen controls now retire at every width.

     What replaces them at each width, so nothing is removed without a successor:
       phone, in a browser      → the ‹ chip (revealed ≤640px) AND the OS/browser back gesture
       desktop, in a browser    → the browser's own back button, which drives the same fetch-84
                                  history the chip does — identical behaviour, by construction
       installed app, any width → the ‹ chip, revealed by @media (display-mode: standalone) above,
                                  because a standalone window has no browser back button at all
       depth 0 (a deep link)    → the page keeps its own button. body.has-navback is never set.

     KNOWN, ACCEPTED: #opsTlBack reads "All timelines" (no arrow) when you arrived from an event
     — in that branch it is a lateral link, not a back, and it now hides on desktop as it has
     hidden on phones since fetch-521. The Timelines tab is one click away. Logged, not fixed.

     WHERE THIS RULE LIVES, AND WHY THAT IS THE WHOLE FIX. fetch-521 wrote this as a media query
     NESTED INSIDE fetch-520's `@media (max-width: 640px)` pstack block. Nested @media is legal
     and it worked, so nothing complained. But deleting the inner wrapper did NOT free the rule:
     it just left it inside the OUTER phone block, still phone-only, and the first probe run
     measured `inpage: true` at 1440px with `has-navback` set. The rule had to MOVE, past the
     pstack block's closing brace, to top level. Assertion caught it; reading the diff would not
     have. If a future edit ever drags this back inside a media query, probe526 fails at 1440.

     Nothing is DELETED — wrapping this list in `@media (max-width: 640px)` restores fetch-521. */
  body.has-navback [data-backvendor],
  body.has-navback [data-backevent],
  body.has-navback [data-trainback],
  body.has-navback [data-back],
  body.has-navback .wiki-back,
  body.has-navback #svcBack,
  body.has-navback #pkDocBack,
  body.has-navback #pullDocBack,
  body.has-navback #beoDocBack,
  body.has-navback #invDocBack,
  body.has-navback #evtSheetBack,
  body.has-navback #ctrDocBack,
  body.has-navback #opsTlBack,
  body.has-navback #opsTlBackEv { display: none; }
  @media (max-width: 720px) { .beo-line, .beo-cols { grid-template-columns: minmax(0,1fr) 34px 60px 70px; } .beo-line .acts { visibility: visible; grid-column: 2 / -1; } .beo-cols .r:last-child { display: none; } }
  /* fetch-399: function-first menu panel (Reserve "Function Services" parity) — token-only, no inline styles */
  .ta-r { text-align: right; white-space: nowrap; }
  .fnm-panel { margin-top: 10px; border: 1px solid var(--line); border-radius: 8px; padding: 12px; background: var(--wash); }
  /* fetch-427: projected-F&B estimate strip (dashed = estimate, replaced by real lines) */
  .beo-proj { font-size: var(--t-sub); color: var(--muted); border: 1px dashed var(--line); border-radius: var(--r-s); padding: var(--s-2) var(--s-3); margin-top: var(--s-2); background: var(--wash); }
  .beo-proj strong { color: var(--text-heading); }
  /* fetch-427: House-rules card headings/grid onto classes (were inline — ratchet down) */
  .setrule-h { font-weight: 700; margin: var(--s-4) 0 var(--s-2); }
  .setrule-h:first-child { margin-top: 0; }
  .setrule-sub { margin-bottom: var(--s-3); }
  .grid--settings { max-width: 700px; }
  .fnm-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; }
  .fnm-cgrp { margin-top: 12px; padding-top: 8px; border-top: 1px solid var(--line); }
  .fnm-ctitle, .fnm-sub { font-weight: 700; color: var(--navy); }
  .fnm-secname { font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .3px; font-size: var(--t-label); margin-top: 6px; }
  .fnm-desc, .fnm-rownote { font-size: var(--t-sub); }
  .fnm-rownote { color: var(--muted); white-space: nowrap; }
  .fnm-line { display: grid; grid-template-columns: minmax(0,1fr) 128px 84px 52px 34px; gap: 10px; align-items: baseline; padding: 5px 0; border-bottom: 1px solid var(--hair); }
  .fnm-line .fnm-r { text-align: right; font-variant-numeric: tabular-nums; }
  .fnm-xbtn { padding: 2px 7px; font-size: var(--t-sub); }
  .fnm-add { margin-top: 8px; }
  /* fetch-1113: desktop function/menu composition with a persistent item library. */
  .fn-editor h4, .fnm-panel h4, .fnm-panel h5 { margin: 0; color: var(--navy-dark); font-family: inherit; }
  .fn-editor h4, .fnm-panel h4 { font-size: var(--t-section); }
  .fnm-panel h5 { font-size: var(--t-body); }
  .fn-wide { grid-column: 1 / -1; }
  .fnm-panel .fnm-desc { white-space: pre-wrap; overflow-wrap: anywhere; }
  .fnm-menu-card { margin-top: var(--s-3); padding: var(--s-3); border: 1px solid var(--hair); background: var(--surface-card); border-radius: var(--r-s); }
  .fnm-menu-card .fnm-head { margin-bottom: var(--s-2); }
  .fnm-add-actions { display: flex; align-items: end; gap: var(--s-2); flex-wrap: wrap; margin-block: var(--s-3); }
  .fnm-add-actions .field { min-width: 12rem; }
  .fnm-builder { margin-block: var(--s-3); border: 1px solid var(--line); border-radius: var(--r-m); background: var(--surface-card); overflow: hidden; }
  .fnm-builder-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--s-2); padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--hair); }
  .fnm-draft-fields { border: 0; padding: 0; margin: 0; min-width: 0; }
  .fn-recovery { display: block; font-size: var(--t-sub); margin-bottom: var(--s-3); }
  .fn-recovery .actions { flex-wrap: wrap; margin-top: var(--s-2); }
  .fn-recovery .actions > span { flex-basis: 100%; overflow-wrap: anywhere; }
  .fn-recovery .btn { min-height: var(--control-height-touch); }
  .fnm-menu-details { display: grid; grid-template-columns: 3fr 2fr; gap: var(--s-3); padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--hair); }
  .fnm-workbench { display: grid; grid-template-columns: minmax(15rem, 0.85fr) minmax(0, 2fr); }
  .fnm-library { padding: var(--s-3); background: var(--wash); border-right: 1px solid var(--hair); min-width: 0; }
  .fnm-library > .field { margin-block: var(--s-2); }
  .fnm-library-filters { display: grid; grid-template-columns: 1fr; gap: var(--s-2); }
  .fnm-results { max-height: 38rem; overflow-y: auto; overscroll-behavior: contain; padding-right: var(--s-1); }
  .fnm-results-count { font-size: var(--t-sub); margin-block: var(--s-2); }
  .fnm-choice { display: flex; flex-direction: column; gap: var(--s-1); width: 100%; padding: var(--s-3); margin-bottom: var(--s-2); text-align: left; border: 1px solid var(--hair); background: var(--surface-card); color: var(--ink); border-radius: var(--r-s); cursor: pointer; font: inherit; }
  .fnm-choice:hover { border-color: var(--navy); }
  .fnm-choice:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
  .fnm-choice-title { font-size: var(--t-sub); font-weight: 650; }
  .fnm-choice-meta, .fnm-choice-desc { font-size: var(--t-sub); color: var(--muted); overflow-wrap: anywhere; }
  .fnm-choice-desc { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .fnm-choice-price { display: flex; justify-content: space-between; gap: var(--s-2); font-size: var(--t-sub); font-variant-numeric: tabular-nums; }
  .fnm-composition { padding: var(--s-3); min-width: 0; }
  .fnm-draft-row { padding: var(--s-3); border: 1px solid var(--hair); border-radius: var(--r-s); margin-bottom: var(--s-3); }
  .fnm-draft-heading { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); margin-bottom: var(--s-2); font-size: var(--t-sub); }
  .fnm-draft-heading .actions { margin: 0; }
  .fnm-row-main { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1.6fr) minmax(0, .8fr) minmax(0, 1fr); gap: var(--s-2); }
  .fnm-row-detail { display: grid; grid-template-columns: 3fr 2fr; gap: var(--s-2); margin-top: var(--s-2); }
  .fnm-builder .field { min-width: 0; }
  .fnm-builder .field > span { display: block; margin-bottom: var(--s-1); font-size: var(--t-sub); color: var(--muted); }
  .fnm-builder input, .fnm-builder textarea, .fnm-builder select { width: 100%; max-width: 100%; min-width: 0; font-size: var(--t-sub); }
  .fnm-builder input[type=checkbox] { width: auto; }
  .fnm-builder textarea { resize: vertical; }
  .fnm-draft-row > .muted { font-size: var(--t-sub); margin-block: var(--s-2); }
  .fnm-row-options { margin-top: var(--s-2); font-size: var(--t-sub); }
  .fnm-row-options summary { cursor: pointer; color: var(--navy); padding-block: var(--s-2); }
  .fnm-flags { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-2); }
  .fnm-flags label { display: flex; gap: var(--s-1); align-items: center; }
  .fnm-savebar { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); flex-wrap: wrap; padding: var(--s-3) var(--s-4); border-top: 1px solid var(--line); background: var(--wash); font-size: var(--t-sub); }
  .fnm-savebar .actions { margin: 0; }
  .fnm-builder > .notice { margin: var(--s-3); }
  @media (max-width: 1100px) { .fnm-row-main { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (max-width: 720px) {
    .fnm-workbench, .fnm-menu-details, .fnm-row-detail { grid-template-columns: minmax(0, 1fr); }
    .fnm-library { border-right: 0; border-bottom: 1px solid var(--hair); }
    .fnm-results { max-height: 20rem; }
    .fnm-menu-details, .fnm-builder-head, .fnm-savebar { padding: var(--s-3); }
    .fnm-draft-heading { align-items: start; flex-wrap: wrap; }
    .fnm-panel .btn, .fnm-builder input, .fnm-builder select { min-height: var(--control-height-touch); }
    .fnm-menu-card .fnm-line { display: flex; flex-wrap: wrap; gap: var(--s-2); }
    .fnm-menu-card .fnm-line > :first-child { flex-basis: 100%; }
  }
  .fnm-item { display: grid; grid-template-columns: minmax(0,1fr) 92px 92px; gap: 8px; align-items: center; margin-top: 6px; }
  /* fetch-401: inquiry details page (token-only — no inline styles, no px fonts, no raw hex) */
  .mb-3x { margin-bottom: var(--s-3); }
  .mt-1x { margin-top: var(--s-1); } .mt-2x { margin-top: var(--s-2); } .mt-3x { margin-top: var(--s-3); } .mt-4x { margin-top: var(--s-4); }
  .mb-1x { margin-bottom: var(--s-1); }
  .ml-autox { margin-left: auto; }
  .card-goldtop { border-top: 3px solid var(--gold); }
  .row-wrapc { flex-wrap: wrap; align-items: center; }
  .btnrow { display: flex; gap: 6px; flex-wrap: wrap; }
  .inq-main { flex: 1 1 260px; min-width: 200px; }
  .inq-title { font-size: var(--t-section); }
  .inq-sub { font-size: var(--t-sub); margin: 2px 0 var(--s-2); }
  .inq-contact { font-size: var(--t-sub); margin-top: 2px; }
  .inq-h { font-size: var(--t-body); }
  .inq-notes { font-size: var(--t-sub); }
  .inq-decline { border-left: 3px solid var(--bad-fg); margin-top: var(--s-3); }
  .inq-chiprow { margin-top: var(--s-2); justify-content: flex-start; gap: 6px; flex-wrap: wrap; }
  .t-subx { font-size: var(--t-sub); }
  .btn.btn-on { background: var(--navy); color: #fff; border-color: var(--navy); }
  /* fetch-496 — THE SWITCH. Jack: "I like how the iPhone does the on/off switch being a
     clickable sliding dot." The deeper reason to build it: .btn-on currently carries TWO
     unrelated meanings that render identically — "this rule is ON" (notification rules) and
     "this is the view you're looking at" (Action Items Table/Boards, Documents, Vendors,
     Team). A filled pill cannot say state and selection at once. A switch says state; .btn-on
     goes back to meaning selection only.
     A <button role="switch"> and NOT a checkbox: portal state lives in DATA and render()
     redraws wholesale, so a checkbox's DOM state would desync on the next paint.
     Honest by construction — the binder writes to Supabase on click, so there is no save
     step for the switch position to lie about. */
  .sw { position: relative; display: inline-flex; align-items: center; flex: none;
    width: 44px; height: 26px; border-radius: 99px; border: 1px solid var(--line);
    background: var(--mute-bg); cursor: pointer; padding: 0;
    transition: background .18s ease, border-color .18s ease; }
  .sw::after { content: ""; position: absolute; left: 2px; width: 20px; height: 20px;
    border-radius: 50%; background: var(--surface-card); box-shadow: 0 1px 3px rgba(20, 33, 61, .28);
    transition: transform .18s cubic-bezier(.3, .9, .4, 1); }
  .sw[aria-checked="true"] { background: var(--brand-blue-traditional); border-color: var(--brand-blue-traditional); }
  .sw[aria-checked="true"]::after { transform: translateX(18px); }
  /* 44x26 visual, 44x44 hit area — clears the touch floor without looking chunky */
  .sw::before { content: ""; position: absolute; left: 0; right: 0; top: -9px; bottom: -9px; }
  @media (min-width: 721px) { /* pointer guaranteed — the touch floor no longer applies */
    .sw { width: 38px; height: 22px; }
    .sw::after { width: 16px; height: 16px; }
    .sw[aria-checked="true"]::after { transform: translateX(16px); }
    .sw::before { top: 0; bottom: 0; }
  }
  @media (prefers-reduced-motion: reduce) { .sw, .sw::after { transition: none; } }
  /* fetch-402: planning tab */
  .pln-head { cursor: pointer; }
  .pln-caret { color: var(--muted); font-size: var(--t-sub); }
  .pln-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--s-4); }
  .pln-sec { font-weight: 700; color: var(--navy); font-size: var(--t-sub); text-transform: uppercase; letter-spacing: .4px; margin-bottom: var(--s-1); }
  .pln-item { display: flex; justify-content: space-between; align-items: center; gap: var(--s-2); padding: 6px 0; border-bottom: 1px solid var(--hair); cursor: pointer; }
  .pln-l { font-size: var(--t-body); min-width: 0; }
  .pln-item--auto { cursor: default; }
  .pln-evidence { display: block; margin-top: var(--s-1); color: var(--muted); font-size: var(--t-sub); line-height: 1.5; overflow-wrap: anywhere; }
  .pdx-planning [data-planrefresh] { min-height: var(--control-height-touch); }
  .pln-appointment { padding: var(--s-3) 0; border-bottom: 1px solid var(--hair); min-width: 0; }
  .pln-appointment-head { display: flex; justify-content: space-between; align-items: start; gap: var(--s-2); }
  .pln-appointment-head > div { min-width: 0; }
  .pln-appointment-head strong { font-size: var(--t-body); font-weight: 600; }
  .pln-appointment-actions { flex-wrap: wrap; margin-top: var(--s-2); }
  .pln-appointment-actions .btn, .pln-appointment-form .actions .btn, .pdx-planning [data-appointment-refresh] { min-height: var(--control-height-touch); }
  .pln-appointment-prep { font-size: var(--t-sub); line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; margin: var(--s-2) 0; }
  .pln-appointment-form { margin: var(--s-3) 0 0; padding: var(--s-3); border: 1px solid var(--line); border-radius: var(--r-s); min-width: 0; }
  .pln-appointment-form legend { font-size: var(--t-sub); font-weight: 600; padding: 0 var(--s-1); }
  .pln-appointment-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); }
  .pln-appointment-fields .field { min-width: 0; }
  .pln-appointment-fields input, .pln-appointment-fields select, .pln-appointment-fields textarea { box-sizing: border-box; width: 100%; min-width: 0; max-width: 100%; font: inherit; min-height: var(--control-height-touch); }
  .pln-appointment-fields input[type="date"], .pln-appointment-fields input[type="time"] { appearance: none; }
  .pln-appointment-wide { grid-column: 1 / -1; }
  .pln-appointment-share { display: flex; align-items: center; gap: var(--s-2); min-height: var(--control-height-touch); margin-top: var(--s-2); }
  /* fetch-1161: appointment entry keeps dates whole and AM/PM controls readable. */
  .pln-appointment-form .pln-appointment-fields { grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
  .pln-appointment-time { min-width: 0; }
  .pln-appointment-time-toggle { display: flex; align-items: center; gap: var(--s-2); min-height: var(--control-height-touch); font-size: var(--t-body); cursor: pointer; }
  .pln-appointment-time-toggle input { width: auto; min-height: 0; flex: none; }
  .pln-appointment-time-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); gap: var(--s-3); margin-top: var(--s-2); }
  .pln-appointment-time-grid[hidden] { display: none; }
  .pln-appointment-time-entry { display: grid; grid-template-columns: minmax(0, 1fr) 6.5rem; gap: var(--s-2); }
  .pln-appointment-time-entry input { font-variant-numeric: tabular-nums; }
  .pln-appointment-time > p { margin: var(--s-2) 0 0; }
  .pln-appointment-contact-help p { margin: 0 0 var(--s-2); }
  .pln-appointment-contact-help .btn { min-height: var(--control-height-touch); }
  @media (max-width: 640px) { .pdx-planning .pln-grid, .pln-appointment-fields { grid-template-columns: minmax(0, 1fr); } }
  .pln-date { padding: 4px 6px; border: 1px solid var(--line); border-radius: var(--r-s); font-size: var(--t-sub); font-family: inherit; }
  .pln-past { border-left: 3px solid var(--warn-fg); }
  .pln-closehead { margin: var(--s-5) 0 var(--s-3); padding-top: var(--s-3); border-top: 2px solid var(--line); justify-content: flex-start; gap: var(--s-2); align-items: center; } /* fetch-403: section divider, NOT a card — cards are events here */
  .inq-task { padding: 5px 0; border-bottom: 1px solid var(--hair); align-items: center; }
  .inq-task-n { font-size: var(--t-body); font-weight: 600; min-width: 0; }
  .inq-task-r { white-space: nowrap; display: flex; gap: 6px; align-items: center; }
  /* fetch-1023: event playbook rows survived the Sales Tasks tab, so they own a small shared primitive. */
  .evt-task-row { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-3); padding: var(--s-2) 0; border-bottom: 1px solid var(--hair); }
  .evt-task-row.inq-task { align-items: flex-start; padding: var(--s-2) 0; }
  .evt-task-main { flex: 1 1 auto; min-width: 0; }
  .evt-task-name { display: block; color: var(--text-heading); font-size: var(--t-body); font-weight: 700; line-height: 1.35; overflow-wrap: anywhere; }
  .evt-task-meta { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-1); margin-top: var(--s-1); }
  .evt-task-actions { display: flex; align-items: center; justify-content: flex-end; flex: 0 0 auto; gap: var(--s-1); }
  .btn.evt-task-action { display: inline-flex; align-items: center; justify-content: center; width: var(--control-height-sm); min-width: var(--control-height-sm); height: var(--control-height-sm); min-height: var(--control-height-sm); padding: 0; border-radius: var(--r-s); }
  .evt-task-action .ci { display: block; }
  .evt-task-row--done { color: var(--muted); font-size: var(--t-sub); }
  .evt-task-done-name { min-width: 0; overflow-wrap: anywhere; }
  .evt-task-details { margin-top: var(--s-2); }
  .evt-task-done-summary { cursor: pointer; padding: var(--s-2) 0; font-size: var(--t-sub); }
  .inq-check { display: flex; gap: 8px; align-items: center; font-size: var(--t-body); padding: 4px 0; cursor: pointer; }
  .inq-ro { font-size: var(--t-body); padding: 7px 0; }
  .inq-lostnote { margin-top: 6px; font-size: var(--t-sub); color: var(--bad-fg); background: var(--bad-bg); border-radius: var(--r-s); padding: 6px 10px; display: inline-block; }
  .fnm-itemhead { margin-top: 8px; }
  @media (max-width: 720px) { .fnm-line { grid-template-columns: minmax(0,1fr) 64px 56px 44px 30px; } .fnm-item { grid-template-columns: minmax(0,1fr) 64px 64px; } }
  .cal-more { font-size: 10.5px; color: var(--muted); padding: 1px 5px; }
  @media (max-width: 720px) {
    .cal-cell { min-height: 64px; padding: 2px; }
    .cal-chip { font-size: 9.5px; padding: 1px 3px; }
    .cal-chip-venue { display: none; }
  }
  .brief-fin { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 10px; margin-top: 14px; }
  .finstat { background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.16); border-radius: 10px; padding: 10px 12px; }
  .finstat .fl { font-size: 10.5px; color: #c8d4e4; text-transform: uppercase; letter-spacing: .4px; }
  .finstat .fv { font-size: 19px; font-weight: 700; color: #fff; margin-top: 3px; }
  .finstat .fsub { font-size: 11px; color: #aebdd2; margin-top: 1px; }
  .tabmore-wrap { position: relative; display: inline-block; }
  .tabmore-menu { position: absolute; top: 100%; left: 0; z-index: 50; background: #fff; border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 6px 20px rgba(20,33,61,0.12); padding: 4px; min-width: 180px; margin-top: 2px; }
  .tabmore-item { display: block; width: 100%; text-align: left; padding: 8px 12px; font-size: 14px; border: none; background: transparent; color: var(--muted); cursor: pointer; border-radius: 6px; }
  .tabmore-item:hover { background: var(--bg); color: var(--navy); }
  .tabmore-item.active { color: var(--navy); font-weight: 600; background: var(--bg); }
  .toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; gap: 8px; flex-wrap: wrap; }
  .btn { padding: 8px 14px; border: 1px solid #d1d5db; background: #fff; border-radius: 8px; cursor: pointer; font-size: 14px; }
  :where(.btn) { color: var(--ink); } /* fetch-936.1: .btn never set a colour, so iOS Safari painted every one in its system blue (Jack's phone: Customize, the More rows) while Chromium's buttontext read black. ZERO specificity on purpose: an author declaration still beats the UA sheet, but this loses to every class rule in the file whatever its position - the review found a plain `.btn { color }` here would have out-ordered .tcp-voidbtn (Void punch), .t-bad, .sa-drop, .ulock-btn and .tc-notex and turned four destructive reds to ink. Plain a.btn links go from UA blue to ink everywhere too. */
  a.btn { text-decoration: none; display: inline-block; } /* fetch-389: link-styled-as-button primitive (trainer card) — color comes from .btn-primary etc. */
  .pre-line { white-space: pre-line; } /* fetch-390: manager-entered multi-line text (trainee orientation) */
  .sum-link { cursor: pointer; font-weight: 600; color: var(--navy); } /* fetch-390: tappable <summary> (orientation disclosure) */
  .btn-block { display: block; width: 100%; box-sizing: border-box; } /* fetch-391: full-width stacked button/link (trainer's trainee list) */
  .btn:hover { background: #f3f4f6; }
  .btn-primary { background: var(--navy); color: #fff; border-color: var(--navy); }
  .btn-primary:hover { background: var(--navy-dark); }
  .btn-danger { color: #b91c1c; border-color: #fca5a5; }
  .sel { padding: 7px 8px; border: 1px solid #d1d5db; border-radius: 6px; font-size: 14px; background: #fff; }
  .card { background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; padding: 14px 16px; margin-bottom: 10px; }
  /* ---- Dashboard facelift ---- */
  .dash-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(158px, 1fr)); gap: 10px; margin-bottom: 18px; }
  /* fetch-91: command palette */
  .cmd-backdrop { position: fixed; inset: 0; background: rgba(20,24,36,.5); backdrop-filter: blur(2px); z-index: 600 /* fetch-431: top-layer tier (scale: 1-4 card, 30 sticky, 300-320 menus, 500 modals, 600 top overlays) */; display: flex; align-items: flex-start; justify-content: center; padding-top: 12vh; animation: cmdFade .12s ease; }
  @keyframes cmdFade { from { opacity: 0; } to { opacity: 1; } }
  .cmd-box { width: min(640px, 92vw); background: #fff; border-radius: 14px; box-shadow: 0 24px 60px rgba(20,24,36,.35); overflow: hidden; border: 1px solid var(--line); }
  .cmd-input { width: 100%; border: 0; border-bottom: 1px solid var(--line); padding: 16px 18px; font-size: 16px; font-family: inherit; outline: none; color: var(--navy); }
  .cmd-list { max-height: 52vh; overflow-y: auto; padding: 6px; }
  .cmd-row { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 8px; cursor: pointer; }
  .cmd-row:hover { background: #f4efe5; }
  .cmd-row.cmd-sel { background: var(--navy); }
  .cmd-row.cmd-sel .cmd-label { color: #fff; }
  .cmd-row.cmd-sel .cmd-sub { color: #c8d4e4; }
  .cmd-label { font-size: 14px; font-weight: 600; color: var(--navy); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .cmd-sub { font-size: 12px; color: #707373; }
  .cmd-empty { padding: 26px 16px; text-align: center; color: #9aa3af; font-size: 13.5px; }
  .cmd-foot { display: flex; justify-content: space-between; padding: 8px 14px; border-top: 1px solid var(--line); font-size: 11px; color: #9aa3af; background: #faf8f4; }
  .badge.b-gold { background: #f3e4cf; color: #8c6145; }
  /* fetch-92: arrive-glow — the card you navigated to identifies itself */
  #content .cse-arrive { position: relative; z-index: 1; animation: cseArrivePulse 2.2s ease-out; border-radius: 10px; }
  @keyframes cseArrivePulse {
    0% { box-shadow: 0 0 0 3px rgba(192,146,103,.95), 0 6px 26px rgba(192,146,103,.35); background-color: #f7efe3; }
    65% { box-shadow: 0 0 0 3px rgba(192,146,103,.4), 0 3px 12px rgba(192,146,103,.14); background-color: #fbf7f0; }
    100% { box-shadow: 0 0 0 0 rgba(192,146,103,0); }
  }
  @media (prefers-reduced-motion: reduce) {
    #content .cse-arrive { animation: none; box-shadow: 0 0 0 3px rgba(192,146,103,.6); }
  }
  /* fetch-97: change control rows */
  .chg-row { display: flex; gap: 10px; align-items: flex-start; padding: 9px 0; border-bottom: 1px solid #f2ece3; }
  .chg-row:last-child { border-bottom: none; }
  .chg-main { flex: 1; min-width: 0; font-size: 13.5px; }
  .chg-old { color: #9a8a7a; text-decoration: line-through; }
  .chg-new { color: var(--navy); font-weight: 700; }
  .chg-res { font-size: 12px; color: #166534; margin-top: 3px; }
  .chg-actions { flex: 0 0 auto; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
  /* fetch-95: drag & drop */
  .pipe-col.drop-hot, .cal-cell.drop-hot, .calw-cell.drop-hot, .schd-cell.drop-hot { outline: 2px dashed var(--gold); outline-offset: -2px; background: #fdf8ef; }
  .card.drop-hot, .toolbar.drop-hot { outline: 2px dashed var(--gold); outline-offset: 2px; background: #fdf8ef; }
  .pipe-row[draggable="true"], .cal-chip[draggable="true"], .schd-cell[draggable="true"] { cursor: grab; }
  .pipe-row.cse-dragging, .cal-chip.cse-dragging, .schd-cell.cse-dragging, [data-svyqrow].cse-dragging { opacity: .45; } /* fetch-420 */
  /* fetch-94: collapsible asset groups */
  #content .card.grp-head { cursor: pointer; padding: 11px 14px; margin: 8px 0 6px; user-select: none; }
  #content .card.grp-head:hover { background: #faf7f2; }
  #content .card.grp-head .grp-chev { display: inline-block; transition: transform .15s ease; color: var(--gold-dark); }
  #content .grp-body { margin-left: 6px; border-left: 2px solid #eee5d8; padding-left: 8px; }
  .stat-tile { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; position: relative; overflow: hidden; transition: transform .12s ease, box-shadow .12s ease; }
  .stat-tile::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--tile-accent, var(--gold)); }
  .stat-tile .stat-label { color: var(--muted); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .4px; margin-bottom: 6px; }
  .stat-tile .stat-value { font-size: 27px; font-weight: 700; line-height: 1; }
  .stat-tile .stat-sub { font-size: 12px; color: var(--muted); font-weight: 500; }

  .dash-section-title { font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif; font-size: 17px; color: var(--navy); font-weight: 700; }
  .attn-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(256px, 1fr)); gap: 12px; }
  .attn-block { border: 1px solid var(--line); border-radius: 10px; padding: 12px 13px; background: #fcfcfb; position: relative; }
  .attn-block.has-items { border-left: 3px solid var(--block-accent, var(--gold)); }
  .attn-head { display: flex; align-items: center; gap: 7px; margin-bottom: 8px; }
  .attn-head .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--block-accent, var(--gold)); flex: 0 0 auto; }
  .attn-head .attn-name { font-weight: 700; font-size: 13px; color: var(--ink); letter-spacing: .2px; }
  .attn-head .attn-count { margin-left: auto; font-size: 12px; font-weight: 700; color: var(--block-accent, var(--gold)); background: var(--block-accent-bg, #f3efe8); border-radius: 20px; padding: 1px 9px; }
  .attn-row { display: flex; padding: 7px 0; border-bottom: 1px solid #f0f0ee; }
  .attn-row:last-child { border-bottom: none; }
  .attn-row[data-attnjump] { cursor: pointer; margin: 0 -6px; padding: 7px 6px; border-radius: 6px; }
  .attn-row[data-attnjump]:hover { background: #f3f2ef; }
  .attn-empty { color: #9ca3af; font-size: 13px; padding: 4px 0 2px; }

  .spend-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
  .spend-col { border: 1px solid var(--line); border-radius: 10px; padding: 12px 13px; background: #fcfcfb; }
  .spend-col h4 { margin: 0 0 8px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--gold-dark); }
  .spend-line { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid #f0f0ee; font-size: 14px; }
  .spend-line:last-child { border-bottom: none; }
  .spend-total-pill { margin-left: auto; font-size: 13px; color: var(--muted); }
  .spend-total-pill strong { color: var(--navy); font-size: 15px; }
  /* ---- Inventory (spreadsheet layout) ---- */
  .inv-toolbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
  /* (bubble jump bar replaced by the Jump-to dropdown in the toolbar) */
  .inv-cat { margin-bottom: 8px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
  .inv-cat-head { border-radius: 10px 10px 0 0; }
  .inv-cat.collapsed .inv-cat-head { border-radius: 10px; }
  .inv-cat-head { display: flex; align-items: center; gap: 10px; padding: 11px 14px; cursor: pointer; background: #fbfaf8; border-bottom: 1px solid var(--line); user-select: none; position: sticky; top: 0; z-index: 20; }
  .inv-cat-head:hover { background: #f5f3ee; }
  .inv-chev { transition: transform .15s; color: var(--gold-dark); font-size: 13px; width: 14px; }
  .inv-cat.collapsed .inv-chev { transform: rotate(-90deg); }
  .inv-cat.collapsed .inv-cat-body { display: none; }
  .inv-cat.collapsed .inv-cat-head { border-bottom: none; }
  .inv-cat-name { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 15px; font-weight: 700; color: var(--navy); }
  .inv-cat-count { font-size: 11px; font-weight: 700; color: var(--gold-dark); background: #f3efe8; border-radius: 20px; padding: 1px 8px; }
  .inv-cat-sub { margin-left: auto; font-size: 12px; color: var(--muted); }
  .inv-table { width: 100%; border-collapse: collapse; }
  .inv-table thead th { font-size: 11px; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); font-weight: 700; text-align: center; padding: 7px 4px; border-bottom: 1px solid var(--line); background: #fcfcfb; }
  .inv-table thead th.inv-item-col { text-align: left; padding-left: 14px; }
  .inv-table tbody td { padding: 0; border-bottom: 1px solid #f0f0ee; font-size: 14px; height: 40px; vertical-align: middle; line-height: 1.2; }
  .inv-table tbody tr:last-child td { border-bottom: none; }
  .inv-table tbody tr:hover { background: #f9f8f5; }
  .inv-item-cell { padding: 4px 14px; cursor: pointer; }
  .inv-item-cell:hover .inv-name { color: var(--navy); text-decoration: underline; }
  .inv-name { font-weight: 600; line-height: 1.2; }
  .inv-sub { font-size: 11px; color: var(--muted); line-height: 1.1; }
  .inv-cnt { text-align: center; width: 72px; cursor: pointer; }
  .inv-cnt-val { display: block; padding: 4px; font-weight: 600; color: var(--navy); }
  .inv-cnt-val.empty { color: #cbd5e1; font-weight: 400; }
  .inv-cnt.na { background: #fafafa; cursor: default; }
  .inv-cnt.na .inv-cnt-val { color: #e5e7eb; }
  .inv-cnt:not(.na):hover { background: #eef4ff; box-shadow: inset 0 0 0 2px #bfdbfe; }
  .inv-cnt-input { width: 100%; border: 2px solid var(--navy); border-radius: 4px; padding: 4px 2px; text-align: center; font-size: 14px; font-weight: 600; }
  .inv-tot { text-align: center; width: 64px; background: #fbfaf8; }
  .inv-tot-val { display: block; padding: 4px; font-weight: 700; color: var(--navy); }
  .inv-pick-venue { text-align: center; padding: 36px 20px; max-width: 420px; margin: 0 auto; }
  .inv-venue-btns { display: flex; flex-direction: column; gap: 8px; }
  @media (max-width: 640px) {
    .inv-table thead th { font-size: 10px; }
    .inv-cnt { width: 60px; }
    .inv-item-cell { padding: 9px 8px; }
    .inv-cat-sub { display: none; }
  }
  .inv-count-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px; }
  /* ---- Training ---- */
  .train-card { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: #fff; margin-bottom: 8px; cursor: pointer; }
  .train-card:hover { background: #f9f8f5; border-color: var(--gold); }
  .train-name { font-weight: 700; font-size: 15px; color: var(--navy); }
  .train-sub { font-size: 12px; color: var(--muted); margin-top: 2px; }
  .train-progress { text-align: right; flex: 0 0 auto; }
  .train-dots { display: flex; gap: 4px; justify-content: flex-end; }
  .train-dot, .train-dot-done, .train-dot-current { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }
  .train-dot { background: #e5e7eb; }
  .train-dot-done { background: var(--gold); }
  .train-dot-current { background: #fff; border: 2px solid var(--gold); box-sizing: border-box; }
  .train-stage { font-size: 11px; color: var(--muted); margin-top: 4px; }
  .train-day-summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 10px; }
  .train-day-chip { border: 1px solid var(--line); border-radius: 10px; padding: 10px; text-align: center; background: #fff; }
  .train-day-chip.signed { border-color: var(--gold); background: #faf7f1; }
  .train-day-name { font-size: 12px; font-weight: 700; color: var(--navy); }
  .train-day-count { font-size: 18px; font-weight: 700; color: var(--gold-dark); margin-top: 2px; }
  .train-day-badge { font-size: 10px; color: var(--gold-dark); font-weight: 700; margin-top: 2px; }
  .train-signoffs { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 8px; }
  .train-signoff-item { }
  .train-signbtn { width: 100%; font-size: 13px; }
  .train-signed { font-size: 13px; color: #166534; background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 8px; padding: 8px 10px; }
  .train-unsign { color: var(--muted); font-size: 11px; margin-left: 6px; }
  /* fetch-448: trainer score chips in the master checklist — colour carries state, per the icon rule */
  .tr-score { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 24px; padding: 0 var(--s-1); border-radius: 7px; font-size: var(--t-sub); font-weight: 700; font-variant-numeric: tabular-nums; }
  .tr-r0 { background: var(--bad-bg); color: var(--bad-fg); }
  .tr-r1 { background: var(--warn-bg); color: var(--warn-fg); }
  .tr-r2 { background: var(--warn-bg); color: var(--warn-fg); }
  .tr-r3 { background: var(--ok-bg); color: var(--ok-fg); }
  .tr-r4 { background: var(--ok-bg); color: var(--ok-fg); font-weight: 800; }
  .tr-na { background: var(--mute-bg); color: var(--mute-fg); font-weight: 600; }
  .tr-none { color: var(--muted); font-size: var(--t-body); }
  .tr-last { font-size: var(--t-label); }
  /* fetch-450: needs-attention card — latest rating ≤2 flags the competency */
  .tr-low { --card-accent: var(--warn-fg); }
  .tr-low-head { margin-bottom: var(--s-1); }
  .tr-low-chips { display: flex; gap: var(--s-2); flex-wrap: wrap; }
  .train-day-poss { font-weight: 500; color: var(--muted); font-size: 0.8em; }
  .train-day-sub { font-size: var(--t-label); color: var(--muted); letter-spacing: .05em; text-transform: uppercase; }
  .train-latest { border-left: 2px solid var(--line); }
  th.train-latest { font-weight: 700; color: var(--navy); }
  .train-grid-section { margin-bottom: 14px; }
  .train-grid-sec-head { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 14px; font-weight: 700; color: var(--navy); padding-bottom: 4px; border-bottom: 2px solid var(--gold); margin-bottom: 4px; }
  .train-grid { width: 100%; border-collapse: collapse; }
  .train-grid thead th { font-size: 11px; text-transform: uppercase; letter-spacing: .3px; color: var(--muted); font-weight: 700; padding: 5px 4px; text-align: center; border-bottom: 1px solid var(--line); }
  .train-grid thead th.train-item-label { text-align: left; }
  .train-grid td { padding: 5px 4px; border-bottom: 1px solid #f3f2ef; font-size: 13px; }
  .train-item-label { text-align: left; color: var(--ink); min-width: 140px; }
  .train-cell { text-align: center; width: 56px; }
  .train-check { display: inline-flex; cursor: pointer; }
  .train-check input { width: 18px; height: 18px; cursor: pointer; accent-color: var(--gold-dark); }
  @media (max-width: 640px) {
    .train-day-summary { grid-template-columns: repeat(2, 1fr); }
    .train-item-label { min-width: 100px; font-size: 12px; }
    .train-cell { width: 40px; }
  }
  /* ---- Roster (employee list + 6-bubble stage) ---- */
  .ros-row { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-bottom: 1px solid var(--hair); }
  .ros-row:last-child { border-bottom: none; }
  .ros-row:hover { background: var(--wash); }
  .ros-id { flex: 1 1 auto; min-width: 0; }
  .ros-name { font-weight: 600; color: var(--navy); }
  .ros-sub { font-size: 12px; color: var(--muted); margin-top: 1px; }
  .ros-stages { display: flex; gap: 5px; align-items: flex-start; flex: 0 0 auto; }
  .ros-bub { display: flex; flex-direction: column; align-items: center; gap: 3px; cursor: pointer; width: 58px; background: none; border: none; padding: 0; }
  .ros-dot { width: 20px; height: 20px; border-radius: 50%; border: 2px solid #d8dbe1; background: #fff; display: flex; align-items: center; justify-content: center; transition: .12s; }
  .ros-bub:hover .ros-dot { border-color: var(--navy); }
  .ros-dot.done { background: var(--gold); border-color: var(--gold); }
  .ros-dot.current { background: var(--navy); border-color: var(--navy); }
  .ros-dot svg { width: 11px; height: 11px; opacity: 0; }
  .ros-dot.current svg, .ros-dot.done svg { opacity: 1; }
  .ros-blabel { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; } /* fetch-145: 8px was below any legibility floor */
  .ros-bub.on .ros-blabel { color: var(--navy); font-weight: 700; }
  .ros-actions { flex: 0 0 auto; }
  @media (max-width: 720px) {
    .ros-blabel { display: none; }
    .ros-bub { width: 28px; }
    .ros-sub { display: none; }
  }
  .inv-count-input { display: flex; align-items: center; gap: 8px; padding: 6px 8px; background: #fcfcfb; border: 1px solid var(--line); border-radius: 8px; }
  .inv-carry-label { display: flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 600; min-width: 96px; cursor: pointer; }
  .inv-diff-neg { color: #dc2626; font-weight: 600; }
  .inv-diff-pos { color: #16a34a; font-weight: 600; }
  .row { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
  .muted { color: #707373; font-size: 13px; margin-top: 2px; }
  .badge { font-size: 11px; padding: 3px 9px; border-radius: 20px; font-weight: 600; white-space: nowrap; }
  .b-green { background: #dcfce7; color: #166534; }
  .b-red { background: #fee2e2; color: #991b1b; }
  .b-amber { background: #fef3c7; color: #92400e; }
  .b-blue { background: #dbeafe; color: #1e40af; }
  .b-gray { background: #eef1f5; color: #475569; }
  .b-purple { background: #f1eafe; color: #6b21a8; }
  .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
  .field label { display: block; font-size: 12px; color: #707373; margin-bottom: 3px; }
  /* fetch-863: radios join the checkbox exemption. fetch-644 exempted checkboxes only — no radio
     ever sat inside a .field until the fetch-860 Teams editor, where this width:100% stretched
     the radio itself to 525px (measured) and shoved its label text to the far edge of the card. */
  .field input:not([type="checkbox"]):not([type="radio"]), .field select, .field textarea { width: 100%; padding: 7px 8px; border: 1px solid #d1d5db; border-radius: 6px; font-size: 14px; font-family: inherit; }
  .field input[type="checkbox"], .field input[type="radio"] { width: 16px; height: 16px; margin: 0; padding: 0; }
  .empty { padding: 40px; text-align: center; color: #9ca3af; font-size: 14px; }
  .err { background: #fee2e2; color: #991b1b; padding: 10px 12px; border-radius: 8px; margin-bottom: 12px; font-size: 13px; }
  .ok { background: #dcfce7; color: #166534; padding: 10px 12px; border-radius: 8px; margin-bottom: 12px; font-size: 13px; }
  /* fetch-354: the top-level ok/err banners FLOAT — they were plain top-of-page divs,
     invisible whenever the user was scrolled down ("nothing happens"). */
  .flash-wrap { position: fixed; top: 10px; left: 50%; transform: translateX(-50%); z-index: 500; width: min(92vw, 560px); pointer-events: none; }
  .flash-wrap .ok, .flash-wrap .err { box-shadow: 0 10px 28px rgba(0,0,0,.18); pointer-events: auto; }
  .actions { margin-top: 12px; display: flex; gap: 8px; }
  .pfx-chip { font-size: 10px; letter-spacing: .05em; background: #eef0f3; color: #5b6472; border-radius: 4px; padding: 1px 6px; font-weight: 700; vertical-align: 1px; } /* fetch-158 */
  /* fetch-154: Reserve staleness banner */
  .rsync-banner { display: block; padding: 11px 16px; border-radius: 10px; margin-bottom: 14px; font-size: 13.5px; line-height: 1.45; border: 1px solid; }
  .rsync-banner strong { font-weight: 700; }
  .rsync-amber { background: #fef6e7; border-color: #f0d9a8; color: #8a5a00; }
  .rsync-red { background: #fdeeee; border-color: #f2c4c4; color: #9f1d1d; }
  .footer { margin-top: 30px; text-align: center; color: #c3c7cc; font-size: 11px; }
  /* ---- BEO (fetch-79) ---- */
  .beo-doc { background: #fff; color: #1a1a1a; }
  .beo-doc table { width: 100%; border-collapse: collapse; }
  .beo-doc td, .beo-doc th { border: 1px solid #cfd2d6; padding: 5px 8px; font-size: 12.5px; vertical-align: top; text-align: left; }
  .beo-doc td.n, .beo-doc th.n { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
  .beo-doc .beo-cat-band { background: #8a8f98; color: #fff; font-weight: 700; text-align: center; letter-spacing: 1px; text-transform: uppercase; font-size: 11.5px; }
  .beo-doc .beo-fn-band { background: #eceae2; font-weight: 700; text-align: center; font-size: 12.5px; }
  .beo-doc .beo-plain, .beo-doc .beo-plain td { border: none; }
  .beo-sec { page-break-inside: avoid; margin-bottom: 10px; }
  @media print {
    .brandbar, .wsbar, .toolbar, .footer, .flash-wrap, .noprint, #brandActions, .headwrap .sub, .cse-rail { display: none !important; }
    body.has-rail { padding-left: 0 !important; } /* fetch-879: the rail's desktop inset must never indent a printed BEO */
    .beo2 { border: none !important; border-radius: 0 !important; padding: 0 !important; max-width: none !important; } /* fetch-135 */
    .wrap { max-width: none !important; padding: 0 !important; }
    html, body, #app { background: #fff !important; } /* fetch-156.1: no warm app wash bleeding into printed docs */
    .beo2, .beo2 * { -webkit-print-color-adjust: exact; print-color-adjust: exact; } /* brand golds/creams print true */
    .card { border: none !important; margin: 0 !important; padding: 0 !important; }
  }

  /* ================================================================
     fetch-85: motion & polish pass (additive only).
     No ids / data-* renamed; no data, auth, or permission code touched.
     ================================================================ */
  /* -- structural polish (motion-independent) -- */
  .tabbar, .wsbar { position: relative; }
  .brief-hero { position: relative; overflow: hidden; }
  .brief-hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(120% 100% at 88% -12%, rgba(176,141,87,.30), transparent 55%), radial-gradient(80% 110% at 6% 112%, rgba(255,255,255,.08), transparent 60%); }
  .brief-hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5; background-image: repeating-linear-gradient(115deg, rgba(255,255,255,.03) 0 2px, transparent 2px 7px); }
  .brief-hero > * { position: relative; z-index: 1; }
  /* -- friendlier empty states (typographic, on-brand) -- */
  .empty:not(.inv-cnt-val) { font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif; font-style: italic; font-size: 14.5px; color: #a89f8d; }
  .empty:not(.inv-cnt-val)::before { content: "\2726"; display: block; font-style: normal; font-size: 15px; color: var(--gold); letter-spacing: 4px; margin-bottom: 9px; opacity: .85; }
  .brief-empty { font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif; font-style: italic; }
  /* -- initial-load skeleton (extends the fetch-82 busy system) -- */
  .skel-wrap { padding-top: 4px; }
  .skel { position: relative; overflow: hidden; background: #eae2d2; border-radius: 10px; }
  .skel-hero { height: 96px; border-radius: 14px; margin-bottom: 12px; }
  .skel-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin-bottom: 12px; }
  .skel-tile { height: 72px; border-radius: 12px; }
  .skel-card { height: 110px; border-radius: 12px; margin-bottom: 10px; }
  .skel-note { text-align: center; color: #a89f8d; font-size: 12.5px; font-style: italic; font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif; padding-top: 10px; }
  /* -- global busy: thin gold sweep along the top (extends body.app-busy) -- */
  body.app-busy::after { content: ""; position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 400; pointer-events: none; background: linear-gradient(90deg, transparent, var(--gold) 35%, var(--gold) 65%, transparent); background-size: 45% 100%; background-repeat: no-repeat; background-position: 0 0; }
  /* -- Definite celebration layer -- */
  .celebrate-layer { position: fixed; inset: 0; z-index: 500; pointer-events: none; overflow: hidden; }
  .celebrate-piece { position: absolute; top: -14px; left: var(--cx, 50%); width: 7px; height: 13px; border-radius: 2px; background: var(--cc, var(--gold)); opacity: 0; }
  .celebrate-toast { position: absolute; left: 50%; top: 34%; transform: translate(-50%,-50%); background: var(--navy); color: #fff; border: 1px solid var(--gold); border-radius: 40px; padding: 12px 26px; font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif; font-size: 17px; letter-spacing: .4px; white-space: nowrap; max-width: 92vw; overflow: hidden; text-overflow: ellipsis; box-shadow: 0 14px 40px rgba(20,33,61,.35); }
  .celebrate-toast .gold { color: var(--gold); }
  @media (max-width: 480px) { .celebrate-toast { font-size: 14.5px; padding: 10px 18px; } }
  /* -- mobile tab ergonomics: one-row scroll, >=44px touch targets -- */
  @media (max-width: 720px) {
    .tabbar { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
    .tabbar::-webkit-scrollbar { display: none; }
    .tabbtn { flex: 0 0 auto; white-space: nowrap; padding: 13px 15px; min-height: 44px; }
    /* the chip's 44px touch target sets the bar's height, so the padding is all that's
       left to give — 8px top/bottom keeps the strip honest without cramping it */
    .brandbar { gap: var(--s-2); padding: var(--s-1) var(--s-3); }
    /* fetch-492: the wordmark leaving the bar gave back ~100px, so the ⌘K search button
       returns to the header on phones. It stays in the sheet too — two doors, one palette. */
  }
  @media (max-width: 400px) {
    /* measured: at 360px the row ran 11px past the bar. The mark yields — it is the one
       element whose job survives being smaller. */
    .brandbar { padding-left: var(--s-2); padding-right: var(--s-2); gap: var(--s-1); }
    .wsbar { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
    .wsbar::-webkit-scrollbar { display: none; }
    .wsbtn { flex: 0 0 auto; white-space: nowrap; min-height: 44px; padding: 11px 16px; }
  }
  /* fetch-1059: keep the existing manager phone bar in the document flow.
     clip contains horizontal overflow without making body a sticky scroll container.
     Page anchors sit below the measured bar; dialogs (200+) remain above it. */
  @media (max-width: 640px) {
    html:has(body.has-rail), body.has-rail { overflow-x: clip; }
    body.has-rail .brandbar {
      position: sticky; top: 0; z-index: 60;
      padding-top: calc(var(--s-1) + env(safe-area-inset-top, 0px));
      padding-left: max(var(--s-2), env(safe-area-inset-left, 0px));
      padding-right: max(var(--s-2), env(safe-area-inset-right, 0px));
    }
    body.has-rail .acct-menu { max-height: calc(100dvh - var(--phone-nav-height, 55px) - 100px - env(safe-area-inset-bottom, 0px)); }
    body.has-rail .evt-anchors { top: var(--phone-nav-height, 55px); }
    body.has-rail .evt-section-nav, body.has-rail .inv-cat-head { top: calc(var(--phone-nav-height, 55px) + var(--s-2)); }
    body.has-rail .evt-section { scroll-margin-top: calc(7rem + var(--phone-nav-height, 55px) + var(--s-2)); }
    body.has-rail .asset-detail-section-head { scroll-margin-top: calc(var(--phone-nav-height, 55px) + var(--s-5)); }
  }
  /* -- all motion lives behind prefers-reduced-motion -- */
  @media (prefers-reduced-motion: no-preference) {
    @keyframes viewIn { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }
    @keyframes cardIn { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } }
    #content.view-anim { animation: viewIn .25s cubic-bezier(.22,.9,.35,1) both; }
    #content.view-anim :is(.card, .stat-tile, .brief-card, .wiki-card, .pipe-col, .attn-block, .user-card, .brief-evt) { animation: cardIn .32s cubic-bezier(.22,.9,.35,1) both; }
    #content.view-anim :is(.card, .stat-tile, .brief-card, .wiki-card, .pipe-col, .attn-block, .user-card, .brief-evt):nth-child(2) { animation-delay: .04s; }
    #content.view-anim :is(.card, .stat-tile, .brief-card, .wiki-card, .pipe-col, .attn-block, .user-card, .brief-evt):nth-child(3) { animation-delay: .08s; }
    #content.view-anim :is(.card, .stat-tile, .brief-card, .wiki-card, .pipe-col, .attn-block, .user-card, .brief-evt):nth-child(4) { animation-delay: .12s; }
    #content.view-anim :is(.card, .stat-tile, .brief-card, .wiki-card, .pipe-col, .attn-block, .user-card, .brief-evt):nth-child(5) { animation-delay: .16s; }
    #content.view-anim :is(.card, .stat-tile, .brief-card, .wiki-card, .pipe-col, .attn-block, .user-card, .brief-evt):nth-child(6) { animation-delay: .2s; }
    #content.view-anim :is(.card, .stat-tile, .brief-card, .wiki-card, .pipe-col, .attn-block, .user-card, .brief-evt):nth-child(7) { animation-delay: .24s; }
    #content.view-anim :is(.card, .stat-tile, .brief-card, .wiki-card, .pipe-col, .attn-block, .user-card, .brief-evt):nth-child(n+8) { animation-delay: .28s; }
    .btn { transition: background .15s ease, border-color .15s ease, box-shadow .18s ease, transform .1s ease; }
    .btn:active { transform: scale(.965); }
    .btn-primary:hover, .btn-gold:hover { box-shadow: 0 3px 12px rgba(56,74,97,.20); }
    .tabbtn { transition: color .15s ease, border-bottom-color .15s ease; }
    .wsbtn:active, .tabbtn:active { transform: scale(.94); }
    .cal-chip { transition: transform .12s ease, box-shadow .12s ease; }
    .cal-chip:hover { transform: translateY(-1px); box-shadow: 0 2px 6px rgba(20,33,61,.22); }
    .cappill { transition: background .15s ease, color .15s ease, border-color .15s ease, transform .1s ease; }
    .cappill:active { transform: scale(.92); }
    .ros-bub:active .ros-dot { transform: scale(.85); }
    .pipe-row { transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease, background .14s ease; }
    .pipe-row:hover { transform: translateY(-1px); box-shadow: 0 3px 10px rgba(20,33,61,.10); }
    .card[data-gsopen] { transition: transform .14s ease, box-shadow .14s ease; }
    .card[data-gsopen]:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(20,33,61,.10); }
    .brief-evt { transition: transform .14s ease, background .14s ease; }
    .brief-evt:hover { transform: translateX(2px); }
    .brief-item { transition: background .14s ease; }
    .wiki-card { transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease; }
    @keyframes qvIn { from { opacity: 0; transform: translateY(10px) scale(.97); } to { opacity: 1; transform: none; } }
    @keyframes cseFadeIn { from { opacity: 0; } to { opacity: 1; } }
    .qv-backdrop { animation: cseFadeIn .16s ease both; }
    .qv-card { animation: qvIn .22s cubic-bezier(.22,.9,.35,1) both; }
    .ok, .err { animation: viewIn .25s ease both; }
    .brief-hero { background-size: 165% 165%; animation: heroDrift 24s ease-in-out infinite alternate; }
    @keyframes heroDrift { from { background-position: 0% 0%; } to { background-position: 100% 100%; } }
    .skel::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent); animation: skShimmer 1.5s ease infinite; }
    @keyframes skShimmer { to { transform: translateX(100%); } }
    body.app-busy::after { animation: busySweep 1.15s ease-in-out infinite; }
    @keyframes busySweep { from { background-position: -50% 0; } to { background-position: 150% 0; } }
    .celebrate-piece { animation: confettiFall var(--cd, 1.8s) var(--cdel, 0s) cubic-bezier(.25,.4,.6,1) forwards; }
    @keyframes confettiFall { 0% { opacity: 0; transform: translate3d(0,-16px,0) rotate(0deg); } 10% { opacity: 1; } 100% { opacity: 0; transform: translate3d(var(--cxs, 0px), 76vh, 0) rotate(var(--cr, 540deg)); } }
    .celebrate-toast { animation: toastIn 2.4s ease both; }
    @keyframes toastIn { 0% { opacity: 0; transform: translate(-50%,-46%) scale(.9); } 12%, 82% { opacity: 1; transform: translate(-50%,-50%) scale(1); } 100% { opacity: 0; transform: translate(-50%,-56%) scale(.98); } }
    /* fetch-88: schedule + ops timelines motion */
    @keyframes editPop { from { opacity: 0; transform: translateY(3px) scale(.98); } to { opacity: 1; transform: none; } }
    .schd .schd-editing { animation: editPop .16s cubic-bezier(.22,.9,.35,1) both; }
    .card .opstl-form { animation: editPop .18s cubic-bezier(.22,.9,.35,1) both; }
    @keyframes schdSavedPulse { 0% { box-shadow: inset 0 0 0 2px var(--gold, #c09267); background-color: #f8ecd8; } 100% { box-shadow: inset 0 0 0 2px rgba(192,146,103,0); } }
    .schd .schd-cell.schd-saved { animation: schdSavedPulse .9s ease both; border-radius: 4px; }
    .schd .schd-click { transition: background .12s ease, box-shadow .12s ease, transform .08s ease; }
    .schd .schd-click:active { transform: scale(.985); background: #efe6d6; }
    .card[data-opstlopen] { transition: transform .14s ease, box-shadow .14s ease; }
    .card[data-opstlopen]:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(20,33,61,.10); }
    .card[data-opstlopen]:active { transform: translateY(0) scale(.995); }
    .card .opstl-row { transition: background .14s ease; animation: cardIn .3s cubic-bezier(.22,.9,.35,1) both; }
    .card .opstl-row:hover { background: #faf8f3; }
    .card .opstl-row:nth-child(2) { animation-delay: .03s; }
    .card .opstl-row:nth-child(3) { animation-delay: .06s; }
    .card .opstl-row:nth-child(4) { animation-delay: .09s; }
    .card .opstl-row:nth-child(5) { animation-delay: .12s; }
    .card .opstl-row:nth-child(6) { animation-delay: .15s; }
    .card .opstl-row:nth-child(n+7) { animation-delay: .18s; }
    .calw .calw-row .calw-cell { transition: background-color .14s ease; }
    .myw .myw-chip { transition: transform .14s ease, box-shadow .14s ease; }
    .myw .myw-chip:hover { transform: translateY(-1px); }
  }
  /* -- keep print pristine: no animation, no overlays, no masks -- */
  @media print {
    *, *::before, *::after { animation: none !important; transition: none !important; }
    .celebrate-layer, .skel-wrap { display: none !important; }
    body.app-busy::after { display: none !important; }
    .tabbar, .wsbar { mask-image: none !important; -webkit-mask-image: none !important; }
    .brief-hero::before, .brief-hero::after { display: none !important; }
    .schd-wrap::before, .schd-wrap::after { display: none !important; }
  }
  /* ---- fetch-99: Reports module ---- */
  .rpt-wrap { display:grid; grid-template-columns: 262px 1fr; gap:16px; align-items:start; }
  @media (max-width: 820px){ .rpt-wrap { grid-template-columns:1fr; } }
  .rpt-cat { position:sticky; top:8px; }
  /* fetch-200: compact chip picker replaces the tall rail — table gets the full width */
  .rpt-pickbar { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:8px; }
  .rpt-pickbar2 { margin-bottom:14px; padding-bottom:12px; border-bottom:1px solid var(--line); }
  .rpt-gchip { padding:6px 15px; font-size:12.5px; font-weight:700; border:1px solid #e7e3db; background:#fff; border-radius:999px; cursor:pointer; letter-spacing:.02em; }
  .rpt-gchip:hover { border-color:var(--gold); }
  .rpt-gchip.active { background:var(--navy); color:#fff; border-color:var(--navy); }
  .rpt-rchip { padding:5px 12px; font-size:12.5px; border:1px solid #e7e3db; background:#fff; border-radius:999px; cursor:pointer; }
  .rpt-rchip:hover { border-color:var(--gold); background:#fffdf8; }
  .rpt-rchip.active { background:#f2e7cf; border-color:var(--gold); font-weight:600; }
  .rpt-group-h { font-size:11px; letter-spacing:.6px; text-transform:uppercase; color:#8a94a3; margin:14px 4px 6px; font-weight:700; }
  .rpt-item { display:block; width:100%; text-align:left; padding:9px 11px; border:1px solid #e7e3db; background:#fff; border-radius:9px; margin-bottom:6px; cursor:pointer; transition:.12s; }
  .rpt-item:hover { border-color:var(--gold); background:#fffdf8; }
  .rpt-item.active { border-color:var(--navy); background:var(--navy); color:#fff; }
  .rpt-item .rpt-nm { font-weight:600; font-size:13.5px; }
  .rpt-item .rpt-ds { font-size:11.5px; color:#8a94a3; margin-top:2px; line-height:1.3; }
  .rpt-item.active .rpt-ds { color:#c8d4e4; }
  .rpt-scope { font-size:12px; color:#6b7480; background:#f4f1ea; border:1px solid #e7e3db; border-radius:8px; padding:7px 11px; margin-bottom:12px; }
  .rpt-filters { display:flex; gap:10px; flex-wrap:wrap; align-items:flex-end; margin:12px 0; }
  .rpt-filters .field { margin:0; }
  .rpt-presets { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:12px; }
  .rpt-actions { margin-left: auto; display: flex; gap: 8px; } /* fetch-510: hoisted from inline so the phone rule can reach it */
  .rpt-chip { padding:4px 10px; font-size:12px; border:1px solid #e7e3db; background:#fff; border-radius:999px; cursor:pointer; }
  .rpt-chip:hover { border-color:var(--gold); }
  .rpt-tbl-wrap { overflow:auto; border:1px solid #e7e3db; border-radius:10px; background:#fff; max-height:70vh; }
  table.rpt-tbl { border-collapse:collapse; width:100%; font-size:13px; }
  table.rpt-tbl th { position:sticky; top:0; background:#f4f1ea; text-align:left; padding:8px 11px; font-size:11px; letter-spacing:.4px; text-transform:uppercase; color:#6b7480; border-bottom:1px solid #e7e3db; white-space:nowrap; z-index:1; }
  table.rpt-tbl td { padding:7px 11px; border-bottom:1px solid #f3f2ef; }
  table.rpt-tbl td.rpt-num, table.rpt-tbl th.rpt-num { text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
  table.rpt-tbl tr:hover td { background:#fffdf8; }
  table.rpt-tbl tfoot td { position:sticky; bottom:0; background:#efeae0; font-weight:700; border-top:2px solid #d9d3c7; }
  .rpt-empty { padding:26px; text-align:center; color:#8a94a3; }
  .rpt-count { font-size:12.5px; color:#6b7480; margin:2px 0 10px; }
  @media print { .rpt-cat, .rpt-pickbar, .rpt-filters, .rpt-presets, .rpt-actions { display:none !important; } .rpt-wrap { display:block !important; } .rpt-tbl-wrap { max-height:none; border:none; overflow:visible; } }
  /* ---- fetch-100: pipeline compaction ---- */
  .pipe-grid.pipe-fit { align-items: start; }
  .pipe-grid .pipe-scroll { max-height: 54vh; overflow-y: auto; overscroll-behavior: contain; margin: 0 -4px; padding: 0 4px; }
  .pipe-grid .pipe-scroll::-webkit-scrollbar { width: 7px; }
  .pipe-grid .pipe-scroll::-webkit-scrollbar-thumb { background: #ddd6c9; border-radius: 4px; }
  .pipe-grid .pipe-col.pipe-slim { padding: 9px 13px; opacity: .62; }
  .pipe-grid .pipe-col.pipe-slim .pipe-hint { margin-bottom: 0; }
  /* fetch-192: while a card is being dragged, every column (even empty/slim ones like Lead) lights up as an obvious drop target */
  .pipe-grid.pipe-dragmode .pipe-col { outline: 2px dashed var(--pipe-accent); outline-offset: 3px; }
  .pipe-grid.pipe-dragmode .pipe-col.pipe-slim { opacity: 1; min-height: 120px; }
  .pipe-grid.pipe-dragmode .pipe-col.pipe-slim::after { content: "⬇ drop here to move"; display: block; margin-top: 14px; font-size: 11.5px; color: #707373; text-align: center; }
  .pipe-grid .pipe-col.drop-hot { outline: 3px solid var(--pipe-accent); outline-offset: 3px; background: #fbfaf6; }
  /* ---- fetch-100: sales action strip ---- */
  .sas-wrap { background: #fff; border: 1px solid var(--line); border-left: 3px solid var(--gold); border-radius: 12px; padding: 10px 13px; margin-bottom: 12px; }
  /* fetch-125: GM venue dot-switcher */
  .gmv-switch { display: inline-flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; }
  .gmv-dot { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: #707373; background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 5px 12px; cursor: pointer; transition: all .12s; }
  .gmv-dot:hover { border-color: var(--navy); color: var(--navy); }
  .gmv-dot.on { background: var(--navy); color: #fff; border-color: var(--navy); }
  .gmv-swatch { width: 11px; height: 11px; border-radius: 50%; flex: none; box-shadow: 0 0 0 1.5px rgba(255,255,255,.6) inset; }
  .sas-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
  .sas-lbl { font-size: 11px; letter-spacing: .6px; text-transform: uppercase; color: #8a94a3; font-weight: 700; margin-right: 2px; }
  .sas-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border: 1px solid var(--line); border-radius: 999px; background: #faf8f4; cursor: pointer; font-size: 12.5px; font-weight: 600; color: var(--navy); transition: .12s; }
  .sas-chip:hover { border-color: var(--gold); background: #fffdf8; }
  .sas-chip.on { background: var(--navy); color: #fff; border-color: var(--navy); }
  .sas-chip .n { background: #b3261e; color: #fff; border-radius: 999px; font-size: 11px; padding: 1px 7px; }
  .sas-chip.ok-zero { opacity: .55; cursor: default; }
  .sas-chip.ok-zero .n { background: #16a34a; }
  .sas-list { margin-top: 9px; border-top: 1px solid #f1ede4; padding-top: 4px; }
  .sas-item { display: flex; gap: 10px; align-items: center; padding: 6px 2px; border-bottom: 1px solid #f6f3ec; cursor: pointer; }
  .sas-item:hover { background: #fffdf8; }
  .sas-item .t { font-weight: 600; font-size: 13px; }
  .sas-item .s { font-size: 11.5px; color: #8a94a3; }
  /* ---- fetch-101: design-review P0 pass ---- */
  /* P0-3 — buttons never wrap; rows wrap instead */
  .btn { white-space: nowrap; }
  .row, .toolbar { min-width: 0; }
  table.rpt-tbl td:first-child { white-space: nowrap; }
  /* P0-5 — AA-passing gold CTAs (white on #8c6145 ≈ 4.8:1); light gold becomes the hover */
  .btn.btn-gold { background: var(--gold-dark); border-color: var(--gold-dark); }
  .btn.btn-gold:hover { background: var(--gold); border-color: var(--gold); }
  /* P0-2 — event detail sticky anchor bar */
  .evt-anchors { position: sticky; top: 0; z-index: 30; display: flex; gap: 4px; align-items: center; overflow-x: auto; scrollbar-width: none; background: rgba(240,232,224,.92); padding: 8px 4px; margin: 0 -4px 10px; border-bottom: 1px solid #e7dfcf; backdrop-filter: blur(6px); }
  .evt-anchors::-webkit-scrollbar { display: none; }
  .evt-anchors a { white-space: nowrap; font-size: 12.5px; font-weight: 600; color: var(--navy); text-decoration: none; padding: 7px 13px; border-radius: 20px; }
  .evt-anchors a:hover { background: #fff; box-shadow: 0 1px 4px rgba(56,74,97,.14); }
  .evt-anchors .bal { margin-left: auto; font-weight: 700; color: var(--gold-dark); padding: 7px 4px; white-space: nowrap; font-size: 12.5px; }
  .evt-mark { scroll-margin-top: 54px; }
  /* fetch-702: Event Notes is record memory, not another workspace or nested scrolling area. */
  @media (max-width: 640px) {
  }
  /* fetch-891: the docked one-line composer at the top of a record's Communication log. Tokens only. */
  .cl-dock { background: var(--wash); border: 1px solid var(--line); border-radius: var(--r-s); padding: var(--s-2); margin-bottom: var(--s-3); }
  .cl-dock .cl-dock-in { width: 100%; min-height: var(--control-height-touch); font-size: var(--t-body); } /* two classes: outranks input.sel's 36px; the fetch-614 phone rule at (0,3,1) still wins its 16px, so no iOS zoom regression */
  .cl-dock-row { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; margin-top: var(--s-2); }
  .btn.cl-dock-send { margin-left: auto; min-height: var(--control-height-touch); } /* two-class selector on purpose: portal.css sets .btn min-height (36px, and 42px under 720px) later in the file at equal specificity, which would win over a bare .cl-dock-send; the .tc-chip rows inherit that 720px lift, and that is fine */
  .btn.cl-dock-send:disabled { opacity: .45; cursor: default; } /* .btn-primary's explicit background beats the UA's disabled greying, so an empty dock showed a full-navy button that ignored taps — the #content .skl-btn:disabled shape, scoped to the dock */
  .cl-dock-row .btn.tc-chip { border-radius: 999px; font-size: var(--t-sub); padding: var(--s-1) var(--s-3); } /* (0,3,0): .tc-chip's pill shape, type and padding all lose to the later .btn rule at equal specificity (the fetch-846 order bug, which rescued only --on's background) — without this the selectors were the same shape and weight as Save touch. min-height is left to .btn so the 720px 42px tap height holds */
  .cl-dock .cl-dock-date { min-height: var(--control-height-touch); } /* the same two-class lift .cl-dock-in gets — on a phone input.sel's 36px would win over a bare class */
  .cl-sum { flex: 1 1 14rem; min-width: 0; } /* a Communication-log row's summary: a real flex-basis, so the phone's .row { flex-wrap: wrap } drops "Mark follow-up done" beneath the text instead of crushing it into a 90px column; on desktop grow:1 fills exactly as the old inline flex:1 did. Replaces that inline style (one fewer style=) */
  .cl-row { align-items: flex-start; padding: var(--s-2) 0; border-bottom: 1px solid var(--hair); }
  .cl-row-meta { font-size: var(--t-sub); }
  .cl-row-detail { margin-top: var(--s-1); white-space: pre-wrap; }
  .cl-row-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: var(--s-1); }
  .btn.cl-row-act { display: inline-flex; align-items: center; justify-content: center; width: var(--control-height-sm); min-width: var(--control-height-sm); height: var(--control-height-sm); min-height: var(--control-height-sm); padding: 0; border-radius: var(--r-s); }
  .cl-row-act .ci { display: block; }
  .cl-row-empty { padding: var(--s-2) 0; }
  .cl-dock-hint { font-size: var(--t-sub); color: var(--muted); margin-top: var(--s-1); }
  .cl-dock-row--line { flex-wrap: nowrap; } /* fetch-908: r2's dock - the line and Save on one row */
  .cl-dock-row--line .cl-dock-in { flex: 1 1 auto; width: auto; min-width: 0; }
  .cl-dock-row--touch, .cl-dock-hint { display: none; } /* fetch-908: the next-touch chips and the hint wait until the composer has focus or a line */
  .cl-dock--on .cl-dock-row--touch { display: flex; } /* fetch-910: the class is state (opened on focus, closed after a pause) - never :focus-within, which shifted the layout under a click */
  .cl-dock--on .cl-dock-hint { display: block; }
  /* /fetch-891 */
  /* P0-1 — Home: everything beyond the main queue folds into one "All signals" section */
  details.home-more { margin-bottom: 18px; }
  details.home-more > summary { list-style: none; cursor: pointer; font-size: 13px; font-weight: 700; color: var(--navy); padding: 13px 16px; background: #fff; border: 1px solid #e7dfcf; border-radius: 12px; }
  details.home-more > summary::-webkit-details-marker { display: none; }
  details.home-more > summary .sig-hint { color: #8a94a3; font-weight: 500; font-size: 12px; }
  details.home-more[open] > summary { border-radius: 12px 12px 0 0; margin-bottom: 12px; }
  .rd-list { padding: var(--s-3) 0; border-bottom: 1px solid var(--hair); }
  .rd-list:last-child { border-bottom: 0; }
  .rd-list-head { display: flex; gap: var(--s-2); align-items: center; flex-wrap: wrap; }
  .rd-list-name { flex: 1; min-width: 12rem; }
  .rd-items { margin-top: var(--s-2); padding-left: var(--s-3); }
  .rd-item { display: flex; gap: var(--s-2); align-items: center; padding: var(--s-2) 0; border-top: 1px solid var(--hair); }
  .rd-item-copy { flex: 1; min-width: 0; }
  .rd-manager-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(12rem,1fr)); gap: var(--s-3); margin-top: var(--s-3); }
  .rd-manager-grid .rd-wide { grid-column: 1 / -1; }
  .rd-manager-actions { display: flex; gap: var(--s-2); flex-wrap: wrap; align-items: end; }
  .rd-subtitle { margin-top: var(--s-4); }
  .rd-coverage { display: flex; gap: var(--s-2); align-items: baseline; flex-wrap: wrap; margin-top: var(--s-3); padding: var(--s-3); background: var(--wash); border: 1px solid var(--hair); border-radius: var(--r-m); }
  .rd-master-menu { max-height: 32rem; overflow: auto; margin-top: var(--s-3); border: 1px solid var(--hair); border-radius: var(--r-m); }
  .rd-master-section { padding: var(--s-3); border-bottom: 1px solid var(--hair); }
  .rd-master-section:last-child { border-bottom: 0; }
  .rd-master-section-title { display: block; margin-bottom: var(--s-2); }
  /* fetch-664: ONE rule. A second .rd-master-row block below re-declared align-items and won
     the cascade, so the checkbox nudge below was aiming at an alignment that no longer applied. */
  .rd-master-row { display: flex; gap: var(--s-2); align-items: center; min-height: var(--control-height-touch); padding: var(--s-2) 0; border-top: 1px solid var(--hair); }
  .rd-master-row:first-of-type { border-top: 0; }
  .rd-master-row input { flex: 0 0 auto; }
  .rd-master-copy { flex: 1; min-width: 0; }
  .rd-master-cadence { display: block; color: var(--muted); font-size: var(--t-sub); }
  .rd-person { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:var(--s-3); }
  .rd-person-lbl { font-size:var(--t-label); font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); }
  .rd-person-in { min-width:240px; }
  .rd-person-hint { font-size:var(--t-sub); } /* --t-label is chips and badges; this is a sentence */
  .rd-head { display:flex; align-items:baseline; gap:var(--s-2); flex-wrap:wrap; margin-bottom:var(--s-3); }
  .rd-h { font-size:var(--t-section); margin:0; }
  .rd-count { font-size:var(--t-sub); font-weight:700; color:var(--muted); }
  .rd-headnote { font-size:var(--t-sub); }
  .rd-empty { margin:var(--s-3) 0; }
  .rd-grp { display:flex; align-items:baseline; gap:var(--s-2); margin:var(--s-3) 0 var(--s-1); padding-top:var(--s-2); border-top:2px solid var(--line); }
  .rd-grp:first-child { border-top:0; padding-top:0; margin-top:0; }
  .rd-grp-lbl { font-size:var(--t-label); font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--text-heading); }
  .rd-grp-n { font-size:var(--t-label); color:var(--muted); margin-left:auto; }
  .rd-master-who { margin-left:auto; flex:none; align-self:center; }
  .rd-off-note { font-size:var(--t-sub); margin-top:var(--s-1); }
  /* fetch-855 — the routines/checklists styles, HOISTED from actionTableHTML's per-screen
     <style> block: since fetch-852 the fold renders on the Checklists tab, which that block
     never reaches (the fold arrived unstyled — caught by probe855's 44px measurement). Global
     now, serving both the Checklists tab and the pointer card on Action Items. Tokens only. */
  .rt-line{display:flex;gap:var(--s-3);align-items:center;flex-wrap:wrap;padding:var(--s-2) 0;border-bottom:1px solid var(--line)}
  .rt-line:last-child{border-bottom:none}
  .rt-copy{flex:1;min-width:200px}
  .rt-sub{font-size:var(--t-sub);color:var(--muted)}
  .rt-mini{margin:var(--s-2) 0 var(--s-3);padding:var(--s-3);border:1px solid var(--line);border-radius:var(--r-s);background:var(--wash);display:flex;gap:var(--s-3);flex-wrap:wrap;align-items:flex-end}
  .rt-mini .field{min-width:150px;flex:0 1 auto}
  .rt-step{font-size:var(--t-sub);color:var(--muted);margin:var(--s-3) 0 var(--s-2);font-weight:600}
  .rt-paused{opacity:.55}
  .rt-paused .rt-copy strong{text-decoration:line-through}
  .rt-fold{margin-top:10px}
  .rt-sum{cursor:pointer;font-size:var(--t-sub)}
  .rt-card{margin-top:6px;padding:var(--s-3) var(--s-4)}
  .rt-intro{margin-bottom:4px}
  .rt-none{padding:var(--s-3) 0}
  .ck-pointer-btn{min-height:var(--control-height-touch)}
  /* fetch-917.1 — one calm hierarchy for three intentionally separate checklist systems.
     State keys and binders remain unchanged; these wrappers only explain what each system does. */
  .ck-page-body{display:grid;gap:var(--s-4);max-width:var(--w-narrow);min-width:0}
  .ck-page-section{min-width:0}
  .ck-page-body>.ck-run-overview{margin-bottom:0}
  .ck-page-section+.ck-page-section{padding-top:var(--s-5);border-top:1px solid var(--line)}
  .ck-eyebrow{display:block;margin-bottom:var(--s-1);color:var(--brand-gold-dark);font-size:var(--t-label);font-weight:700;letter-spacing:.08em;text-transform:uppercase}
  .ck-section-intro{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s-4);align-items:center;padding:var(--s-4);border:1px solid var(--line);border-radius:var(--r-l);background:var(--wash)}
  .ck-section-intro h2{margin:0;color:var(--text-heading);font-size:var(--t-title);line-height:1.15}
  .ck-section-intro p{max-width:50rem;margin:var(--s-2) 0 0;color:var(--muted);font-size:var(--t-body);line-height:1.5}
  .ck-intro-facts{display:flex;gap:var(--s-2);flex-wrap:wrap;justify-content:flex-end;font-size:var(--t-sub);font-variant-numeric:tabular-nums}
  .ck-intro-facts span{display:grid;gap:var(--s-1);min-width:6rem;padding:var(--s-2) var(--s-3);border:1px solid var(--line);border-radius:var(--r-m);background:var(--paper);color:var(--muted);text-align:center}
  .ck-intro-facts strong{color:var(--text-heading);font-size:var(--t-section)}
  .ck-recurring-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(18rem,100%),1fr));gap:var(--s-3);margin-top:var(--s-3)}
  .ck-v3-routine-history>.ck-card{margin-top:var(--s-3)}
  .ck-legacy-rules{padding-bottom:var(--s-4)}
  .ck917-uncertain-refresh{align-items:center;justify-content:space-between;gap:var(--s-3);margin-top:var(--s-3)}
  .ck917-uncertain-refresh .btn{flex:none}
  /* the Library (Checklists v1 T2): cards now share the Playbook reading measure */
  .ck-cov{display:flex;gap:var(--s-3);align-items:center;flex-wrap:wrap;padding:var(--s-3) var(--s-4);margin:var(--s-3) 0;background:var(--surface-card);border:1px solid var(--line);border-radius:var(--r-m);font-size:var(--t-sub);font-variant-numeric:tabular-nums}
  .ck-gap{color:var(--bad-fg);font-weight:600}
  .ck-cover-btn{min-height:var(--control-height-touch);margin-left:auto}
  .ck-card{min-width:0;margin:0;padding:var(--s-3) var(--s-4)}
  .ck-head{display:flex;gap:var(--s-2);align-items:center;flex-wrap:wrap}
  .ck-list-heading{margin:0;color:var(--text-heading);font-size:var(--t-body);font-weight:700;overflow-wrap:anywhere}
  .ck-chips{display:flex;gap:var(--s-2);flex-wrap:wrap;margin-top:var(--s-1)}
  .ck-chip{font-size:var(--t-label);color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:1px var(--s-2);white-space:nowrap}
  .ck-aud{display:flex;gap:var(--s-2);align-items:center;margin-top:var(--s-2);font-size:var(--t-sub)}
  .ck-init{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;background:var(--wash);border:1px solid var(--line);font-size:var(--t-label);font-weight:600;color:var(--muted)}
  .ck-items{margin-top:var(--s-2)}
  .ck-list-footer{display:flex;justify-content:flex-end;margin-top:var(--s-3);padding-top:var(--s-3);border-top:1px solid var(--hair)}
  .btn.ck-list-delete-trigger,.ck-list-delete-actions .btn{min-height:var(--control-height-touch)}
  .ck-list-delete-panel h4{margin:0 0 var(--s-2);color:var(--bad-fg);font-size:var(--t-body);overflow-wrap:anywhere}
  .ck-list-delete-panel,.ck-list-delete-panel .notice{min-width:0;overflow-wrap:anywhere}
  .ck-list-delete-panel .notice{margin-top:var(--s-3)}
  .ck-items > summary{cursor:pointer;font-size:var(--t-sub);color:var(--muted);min-height:var(--control-height-touch);display:flex;align-items:center}
  .ck-item{align-items:flex-start}
  .ck-more{position:relative}
  .ck-more > summary{min-height:var(--control-height-touch);min-width:var(--control-height-touch);display:inline-flex;align-items:center;justify-content:center}
  .ck-more .hddm .btn{justify-content:flex-start;text-align:left;border:none;width:100%}
  .ck-grow{flex:1;min-width:220px} /* fetch-858: compose wide fields */
  .ck-init--team{border-style:dashed} /* fetch-860: a team audience wears a dashed ring */
  /* fetch-863 — Checklists' own copies of the action form's af-* helpers. Compose and the Teams
     editor had borrowed af-wide/af-chips/af-fhint/af-blk/af-echo, which live in the ACTION
     screen's per-screen style block and resolve to NOTHING on the Checklists tab (the T1
     styles-don't-follow-markup trap, second occurrence — that emptiness was Jack's screenshot).
     ck-wide is a FLEX filler, not a grid span: these fields live inside flex .rt-mini rows. */
  .ck-wide{flex:1 1 100%;min-width:0}
  .ck-chips{display:flex;gap:var(--s-1) var(--s-2);flex-wrap:wrap;align-items:center}
  .ck-fhint{font-size:var(--t-sub);margin-top:2px}
  .ck-blk{display:block;margin-top:4px}
  .ck-echo{flex:1 1 100%;margin-top:var(--s-2);padding:var(--s-2) var(--s-3);border:1px solid var(--line);border-radius:var(--r-s);background:var(--wash);font-size:var(--t-body);color:var(--ink)}
  .ck-pickbar{margin-bottom:var(--s-1)} /* fetch-864: the quick-sort row hugs the menu it filters */
  .ck-pickbar .ck-pickcount{flex:1 1 auto;text-align:right;align-self:center;min-width:160px}
  .ckc-fam{font-size:var(--t-label);letter-spacing:.08em;text-transform:uppercase;color:var(--gold-dark)} /* fetch-861: family shelf headers — gold as jewelry, one accent */
  /* fetch-857 — History (the completion ledger's first reader) */
  .ck-pulse{margin-top:var(--s-1);font-size:var(--t-sub);color:var(--muted);font-variant-numeric:tabular-nums}
  .ckh-chips{display:flex;gap:var(--s-2);flex-wrap:wrap;margin-bottom:var(--s-2)}
  .ckh-step{display:flex;gap:var(--s-2);align-items:center;margin-bottom:var(--s-2)}
  .ckh-range{font-size:var(--t-sub);color:var(--muted);font-variant-numeric:tabular-nums}
  .ckh-day{margin-top:var(--s-3)}
  .ckh-dh{font-size:var(--t-label);font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);padding-bottom:var(--s-1);border-bottom:1px solid var(--line)}
  .ckh-row{display:flex;gap:var(--s-2);align-items:flex-start;padding:var(--s-2) 0;border-bottom:1px solid var(--hair);font-size:var(--t-body)}
  .ckh-row:last-child{border-bottom:none}
  .ckh-mark{flex:0 0 auto;width:18px;text-align:center;font-weight:700}
  .ckh-copy{flex:1;min-width:0}
  .ckh-t{font-variant-numeric:tabular-nums}
  .ckh-note{display:block;font-size:var(--t-sub);color:var(--muted);white-space:pre-wrap}
  .ckh-done .ckh-mark{color:var(--ok-fg)}
  .ckh-late .ckh-mark{color:var(--warn-fg)}
  .ckh-late .ckh-copy{color:var(--ink)}
  .ckh-skip .ckh-mark,.ckh-skip .ckh-copy strong{color:var(--warn-fg)}
  .ckh-miss .ckh-mark,.ckh-miss .ckh-copy strong{color:var(--bad-fg)}
  .ckh-foot{margin-top:var(--s-3);padding-top:var(--s-2);border-top:1px solid var(--hair)}
  /* fetch-902 — V3 Playbook Library + contextual Import Review. The review intentionally
     exceeds .ck-card's reading measure; source and normalized proposal need equal room. */
  .ck-v3-shell{max-width:var(--w-narrow)}
  .ck-v3-template-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));gap:var(--s-3);margin-top:var(--s-3)}
  /* fetch-1132: Library and Today as rows - one list, one row per checklist, the venue as the portal chip */
  .ck-group-head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s-3);flex-wrap:wrap;padding-bottom:var(--s-2);border-bottom:1px solid var(--line)}
  .ck-group-head h2{margin:0;color:var(--text-heading);font-size:var(--t-section)}
  .ck-group-count{font-size:var(--t-sub);color:var(--muted);font-variant-numeric:tabular-nums}
  .ck-group-count strong{color:var(--text-heading)}
  .ck-cov.ck-group-count{display:inline-flex;gap:var(--s-2);align-items:center;flex-wrap:wrap;padding:0;margin:0;background:none;border:0;border-radius:0}
  .ck1036-links{margin-left:auto;display:flex;gap:var(--s-2);align-items:center;flex-wrap:wrap}
  .ck-v3-template-grid{grid-template-columns:1fr;gap:0;margin-top:var(--s-2);border:1px solid var(--line);border-radius:var(--r-m);background:var(--surface-card);overflow:hidden}
  .ck-v3-template-card--row{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr) auto auto;gap:var(--s-3);align-items:center;padding:var(--s-2) var(--s-3);border:0;border-top:1px solid var(--hair);border-radius:0;box-shadow:none;min-height:var(--control-height-touch)}
  .ck-v3-template-grid .ck-v3-template-card--row:first-child{border-top:0}
  .ck-v3-template-card--row .ck-v3-title{font-size:var(--t-body)}
  .ck-v3-template-card--row .ck-v3-copy{margin:var(--s-1) 0 0;font-size:var(--t-sub);color:var(--muted)}
  .ck-row-main{min-width:0}
  .ck-row-venue{min-width:0}
  .ck-row-actions{display:flex;gap:var(--s-1);justify-content:flex-end;align-items:center;flex-wrap:wrap}
  .ck-row-dialog{grid-column:1/-1}
  /* fetch-1133: the one-form New checklist */
  .cse-modal.cku{max-width:40rem}
  .cku .field{margin-top:var(--s-3)}
  .cku-label{display:block;font-size:var(--t-sub);margin-bottom:var(--s-1)}
  .cku-venues{display:flex;gap:var(--s-2);flex-wrap:wrap}
  .cku-venue{cursor:pointer;min-height:var(--control-height-touch);padding:0 var(--s-3);font-family:inherit}
  .cku-venue.is-on{background:var(--vc);color:var(--surface-card);border-color:var(--vc)}
  .cku-venue.is-on .vdot{background:var(--surface-card)}
  .cku #ckuTasks{width:100%;min-height:8rem;font:inherit}
  .ck-run-list{grid-template-columns:1fr;gap:0;border:1px solid var(--line);border-radius:var(--r-m);overflow:hidden;background:var(--surface-card)}
  .ck-run-list .ck-run-card{border:0;border-top:1px solid var(--hair);border-radius:0;padding:var(--s-2) var(--s-3)}
  .ck-run-list .ck-run-card:first-child{border-top:0}
  .ck-run-list .ck-run-card[aria-current="true"]{box-shadow:inset 3px 0 0 var(--brand-gold-dark)}
  @media (max-width:640px){.ck-v3-template-card--row{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"main state" "venue venue" "actions actions"}.ck-v3-template-card--row .ck-row-main{grid-area:main}.ck-row-venue{grid-area:venue}.ck-row-state{grid-area:state}.ck-row-actions{grid-area:actions;justify-content:flex-start}.ck-row-actions .btn{min-height:var(--control-height-touch)}.ck1036-links{margin-left:0}}
  .ck-v3-template-card{min-width:0;margin:0;padding:var(--s-3) var(--s-4)}
  .ck-v3-head,.ck-v3-review-head,.ck-v3-section-head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s-2);flex-wrap:wrap}
  .ck-v3-title,.ck-v3-review-head h2,.ck-v3-section-head h2,.ck-v3-section-head h3{margin:0;color:var(--text-heading);font-size:var(--t-section);overflow-wrap:anywhere}
  .ck-v3-meta,.ck-v3-live{color:var(--muted);font-size:var(--t-sub);line-height:1.45;overflow-wrap:anywhere}
  .ck-v3-copy{font-size:var(--t-body);line-height:1.5;margin:var(--s-2) 0 0;white-space:pre-wrap;overflow-wrap:anywhere}
  .ck-v3-facts{display:flex;gap:var(--s-2);flex-wrap:wrap;margin-top:var(--s-2)}
  .ck-v3-section,.ck-v3-routine-history{margin-top:var(--s-5)}
  .ck-v3-stage,.ck-v3-review{max-width:var(--w-narrow);padding:var(--s-4)}
  .ck-v3-file{margin-top:var(--s-3)}
  .ck-v3-package{margin-top:var(--s-3);padding:var(--s-3);border:1px solid var(--line);border-radius:var(--r-m);background:var(--wash)}
  .ck-v3-package strong,.ck-v3-batch strong{overflow-wrap:anywhere}
  .ck-v3-batches{margin-top:var(--s-2);border:1px solid var(--line);border-radius:var(--r-m);overflow:hidden;background:var(--paper)}
  .ck-v3-batch{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);width:100%;min-height:var(--control-height-touch);padding:var(--s-2) var(--s-3);border:0;border-bottom:1px solid var(--hair);background:var(--paper);color:var(--ink);font:inherit;text-align:left;cursor:pointer}
  .ck-v3-batch:last-child{border-bottom:0}
  .ck-v3-batch:hover{background:var(--wash)}
  .ck-v3-batch:focus-visible,.ck-v3-candidate:focus-visible{outline-offset:-2px}
  .ck-v3-batch span:first-child{min-width:0}
  .ck-v3-batch small,.ck-v3-candidate small{display:block;color:var(--muted);font-size:var(--t-sub);font-weight:400;overflow-wrap:anywhere}
  .ck-v3-receipt{margin-top:var(--s-3)}
  .ck-v3-review-head{padding-bottom:var(--s-3);border-bottom:1px solid var(--hair)}
  .ck-v3-progress{display:flex;justify-content:space-between;gap:var(--s-2);flex-wrap:wrap;margin:var(--s-3) 0;font-size:var(--t-sub);font-variant-numeric:tabular-nums}
  .ck-v3-workbench{display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1.75fr);gap:var(--s-4);align-items:start;margin-top:var(--s-3)}
  .ck-v3-queue,.ck-v3-detail{min-width:0}
  .ck-v3-queue{position:sticky;top:var(--s-3);max-height:70vh;overflow:auto;border:1px solid var(--line);border-radius:var(--r-m);background:var(--paper)}
  .ck-v3-candidate{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s-2);align-items:center;width:100%;min-height:var(--control-height-touch);padding:var(--s-2) var(--s-3);border:0;border-bottom:1px solid var(--hair);background:var(--paper);color:var(--ink);font:inherit;text-align:left;cursor:pointer}
  .ck-v3-candidate:last-child{border-bottom:0}
  .ck-v3-candidate[aria-current="true"]{background:var(--wash);box-shadow:inset var(--s-1) 0 0 var(--brand-gold-mid);font-weight:600}
  .ck-v3-candidate-copy{min-width:0;overflow-wrap:anywhere}
  .ck-v3-row-badges{display:flex;justify-content:flex-end;gap:var(--s-1);flex-wrap:wrap;min-width:0}
  .ck-v3-back{display:none;margin-bottom:var(--s-2)}
  .ck-v3-detail-nav{display:none}
  .ck-v3-compare{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:var(--s-3);margin-top:var(--s-3)}
  .ck-v3-panel{min-width:0;padding:var(--s-3);border:1px solid var(--line);border-radius:var(--r-m);background:var(--paper)}
  .ck-v3-panel--source{background:var(--wash)}
  .ck-v3-panel-title,.ck-v3-decision h4{margin:0 0 var(--s-2);color:var(--text-heading);font-size:var(--t-body)}
  .ck-v3-source{white-space:pre-wrap;overflow-wrap:anywhere;font-size:var(--t-body);line-height:1.5}
  .ck-v3-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-3)}
  .ck-v3-wide{grid-column:1/-1}
  .ck-v3-fieldset{min-inline-size:0;margin:0;border:0;padding:0}
  .ck-v3-fieldset legend{font-size:var(--t-sub);font-weight:600;color:var(--ink);padding:0}
  .ck-v3-checks{display:flex;gap:var(--s-3);flex-wrap:wrap;min-height:var(--control-height-md);align-items:center}
  .ck-v3-attest{display:block;margin-top:var(--s-2);font-weight:600}
  .ck-v3-live{min-height:1.45em;margin-top:var(--s-2)}
  .ck-v3-live--ok{color:var(--ok-fg)}
  .ck-v3-live--warn{color:var(--warn-fg);font-weight:600}
  .ck-v3-live--bad{color:var(--bad-fg);font-weight:600}
  .ck-v3-decision{margin-top:var(--s-3);padding:var(--s-3);border:1px solid var(--line);border-radius:var(--r-m);background:var(--wash)}
  .ck-v3-decisions,.ck-v3-footer{display:flex;gap:var(--s-2);align-items:center;flex-wrap:wrap;margin-top:var(--s-3)}
  .ck-v3-footer{padding-top:var(--s-3);border-top:1px solid var(--hair)}
  .ck-v3-blockers{flex:1;min-width:14rem;font-size:var(--t-sub)}
  .ck-v3-blockers ul{margin:var(--s-1) 0 0;padding-left:var(--s-4)}
  .ck-v3-commit{align-items:flex-end}
  .ck-v3-empty{padding:var(--s-3);color:var(--muted);font-size:var(--t-sub)}
  /* fetch-906 — activation is a contextual workbench, then Today/History become the calm
     oversight surfaces. Every layout is one column at phone width; no execution controls live
     here because staff completion belongs to the shared task surface in the next slice. */
  .ck-run-shell,.ck-run-overview{max-width:var(--w-narrow);min-width:0}
  .ck-run-overview{margin-bottom:var(--s-5)}
  .ck-run-step{margin-top:var(--s-4);padding:var(--s-4);border:1px solid var(--line);border-radius:var(--r-l);background:var(--paper)}
  .ck-run-step-head{display:flex;align-items:flex-start;gap:var(--s-3);margin-bottom:var(--s-3)}
  .ck-run-step-head h3,.ck-run-submit h3,.ck-run-receipt h3,.ck-run-detail h3{margin:0;color:var(--text-heading);font-size:var(--t-section)}
  .ck-run-step-head p,.ck-run-submit p,.ck-run-receipt p{margin:var(--s-1) 0 0;color:var(--muted);font-size:var(--t-sub);line-height:1.45}
  .ck-run-step-no{display:flex;align-items:center;justify-content:center;flex:0 0 var(--control-height-sm);height:var(--control-height-sm);border-radius:50%;background:var(--surface-nav);color:var(--paper);font-size:var(--t-sub);font-weight:700;font-variant-numeric:tabular-nums}
  .ck-run-mode-grid,.ck-run-scenarios{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s-2)}
  .ck-run-scenarios{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:var(--s-2)}
  .ck-run-mode,.ck-run-scenario{display:flex;align-items:flex-start;gap:var(--s-2);min-width:0;min-height:var(--control-height-touch);padding:var(--s-3);border:1px solid var(--line);border-radius:var(--r-m);background:var(--paper);cursor:pointer}
  .ck-run-mode.is-on,.ck-run-scenario.is-on{border-color:var(--brand-gold-dark);background:var(--wash);box-shadow:inset 0 0 0 1px var(--brand-gold-light)}
  .ck-run-mode.is-disabled{cursor:not-allowed;opacity:.62}
  .ck-run-mode input,.ck-run-scenario input{margin-top:var(--s-1);flex:none}
  .ck-run-mode span,.ck-run-scenario span{min-width:0;overflow-wrap:anywhere}
  .ck-run-mode strong,.ck-run-scenario strong{display:block;color:var(--text-heading);font-size:var(--t-body)}
  .ck-run-mode small,.ck-run-scenario small{display:block;margin-top:var(--s-1);color:var(--muted);font-size:var(--t-sub);line-height:1.4}
  .ck-run-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-3);margin-top:var(--s-3)}
  .ck-run-wide{grid-column:1/-1}
  .ck-run-fact{align-self:end;padding:var(--s-3);border:1px solid var(--hair);border-radius:var(--r-m);background:var(--wash)}
  .ck-run-fact span{display:block;color:var(--muted);font-size:var(--t-label);text-transform:uppercase;letter-spacing:.04em}
  .ck-run-confirm{display:flex;align-items:flex-start;gap:var(--s-2);margin-top:var(--s-3);padding:var(--s-3);border-radius:var(--r-m);background:var(--info-bg);color:var(--info-fg);font-size:var(--t-body);line-height:1.45}
  .ck-run-confirm input{margin-top:var(--s-1);flex:none}
  .ck-run-confirm>span{flex:1;min-width:0}
  .ck-run-subhead{margin:var(--s-4) 0 var(--s-2);color:var(--text-heading);font-size:var(--t-body)}
  .ck-run-anchor-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-3)}
  .ck-run-anchor{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:var(--s-2);padding:var(--s-3);border:1px solid var(--hair);border-radius:var(--r-m);background:var(--wash)}
  .ck-run-freeze{display:grid;gap:var(--s-1);margin-top:var(--s-3);padding:var(--s-3);border-left:3px solid var(--brand-gold-mid);border-radius:var(--r-m);background:var(--wash);overflow-wrap:anywhere}
  .ck-run-freeze strong{color:var(--text-heading);font-size:var(--t-body)}
  .ck-run-freeze span{font-size:var(--t-body);line-height:1.45}
  .ck-run-freeze small{color:var(--muted);font-size:var(--t-sub);line-height:1.45}
  .ck-run-preview{display:grid;gap:var(--s-3)}
  .ck-run-preview-section{min-width:0}
  .ck-run-preview-section h4{margin:0;padding-bottom:var(--s-2);border-bottom:1px solid var(--line);color:var(--text-heading);font-size:var(--t-body)}
  .ck-run-preview-section ol,.ck-run-detail-group ol{margin:0;padding:0;list-style:none}
  .ck-run-preview-section li,.ck-run-detail-group li{padding:var(--s-3) 0;border-bottom:1px solid var(--hair)}
  .ck-run-preview-section li:last-child,.ck-run-detail-group li:last-child{border-bottom:0}
  .ck-run-item-head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s-2)}
  .ck-run-preview-section p,.ck-run-detail-group p{margin:var(--s-1) 0;color:var(--ink);font-size:var(--t-body);line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere}
  .ck-run-response{display:grid;gap:var(--s-1);margin-top:var(--s-2);padding:var(--s-2);border-radius:var(--r-m);background:var(--wash);color:var(--ink);font-size:var(--t-sub);line-height:1.45;overflow-wrap:anywhere}
  .ck-run-response-exception{color:var(--bad-fg);font-weight:600}
  .ck-run-item-meta,.ck-run-detail-facts,.ck-run-receipt-facts{display:flex;gap:var(--s-2);flex-wrap:wrap;margin-top:var(--s-2);color:var(--muted);font-size:var(--t-sub)}
  .ck-run-item-meta span,.ck-run-detail-facts>span,.ck-run-receipt-facts span{padding:var(--s-1) var(--s-2);border-radius:var(--r-s);background:var(--wash)}
  .ck-run-submit,.ck-run-receipt,.ck-run-detail{max-width:var(--w-narrow);margin-top:var(--s-4);padding:var(--s-4)}
  .ck-run-filters{display:flex;gap:var(--s-2);flex-wrap:wrap;margin-top:var(--s-3)}
  .ck-run-filters .is-on{border-color:var(--brand-gold-dark);background:var(--wash);color:var(--text-heading);font-weight:700}
  .ck-run-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-2);margin-top:var(--s-3)}
  .ck-run-card{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s-2);width:100%;min-width:0;padding:var(--s-3);border:1px solid var(--line);border-radius:var(--r-m);background:var(--paper);color:var(--ink);font:inherit;text-align:left;cursor:pointer}
  .ck-run-card:hover,.ck-run-card[aria-current="true"]{border-color:var(--brand-gold-dark);background:var(--wash)}
  .ck-run-card-main,.ck-run-card-side{display:flex;flex-direction:column;gap:var(--s-1);min-width:0}
  .ck-run-card-side{align-items:flex-end}
  .ck-run-card-title{color:var(--text-heading);font-weight:700;overflow-wrap:anywhere}
  .ck-run-card-meta{color:var(--muted);font-size:var(--t-sub);line-height:1.4;overflow-wrap:anywhere}
  .ck-run-count{font-size:var(--t-sub);font-variant-numeric:tabular-nums}
  .ck-run-card progress{grid-column:1/-1;width:100%;height:var(--s-1);accent-color:var(--action-primary)}
  .ck-run-detail-section{margin-top:var(--s-4);padding-top:var(--s-3);border-top:1px solid var(--hair)}
  .ck-run-detail-section h4,.ck-run-detail-group h5{margin:0 0 var(--s-2);color:var(--text-heading);font-size:var(--t-body)}
  /* fetch-1131: the housekeeping evaluation strip on Checklists > Today - one row per venue, venue chips, one verb */
  .hki-strip{margin-bottom:var(--s-4)}
  .hki-strip .ck-v3-section-head{margin-bottom:var(--s-2)}
  .hki-actions{display:flex;gap:var(--s-2);align-items:center;flex-wrap:wrap}
  .hki-rows{display:flex;flex-direction:column}
  .hki-row{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1.6fr) auto auto;gap:var(--s-3);align-items:center;min-height:var(--control-height-touch);padding:var(--s-2) 0;border-top:1px solid var(--hair)}
  .hki-row:first-child{border-top:0}
  .hki-venue{min-width:0}
  .hki-meta{color:var(--muted);font-size:var(--t-sub);overflow-wrap:anywhere}
  .hki-notice{margin:0 0 var(--s-2);color:var(--muted);font-size:var(--t-sub)}
  @media (max-width:640px){.hki-row{grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"venue badge btn" "meta meta btn";row-gap:var(--s-1)}.hki-row .hki-venue{grid-area:venue}.hki-row .badge{grid-area:badge;justify-self:start}.hki-row .hki-meta{grid-area:meta}.hki-row .btn{grid-area:btn}}
  .ck-run-detail-group{margin-top:var(--s-3)}
  .ck-run-assignment-list,.ck-run-activity{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-2)}
  .ck-run-assignment-list>span,.ck-run-activity>span{display:grid;gap:var(--s-1);padding:var(--s-2);border:1px solid var(--hair);border-radius:var(--r-m);background:var(--wash);font-size:var(--t-sub);overflow-wrap:anywhere}
  .ck-run-assignment-list small,.ck-run-activity small,.ck-run-detail-group small{color:var(--muted);font-size:var(--t-sub);line-height:1.4}
  .ck-run-schedules{margin-top:var(--s-5);padding-top:var(--s-4);border-top:1px solid var(--line)}
  .ck-run-schedule-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-3);margin-top:var(--s-3)}
  .ck-run-schedule-card{min-width:0;margin:0;padding:var(--s-3)}
  .ck-run-schedule-card h4{margin:0;color:var(--text-heading);font-size:var(--t-body);overflow-wrap:anywhere}
  .ck-run-schedule-facts{display:flex;gap:var(--s-2);flex-wrap:wrap;margin-top:var(--s-2);color:var(--muted);font-size:var(--t-sub);font-variant-numeric:tabular-nums}
  .ck-run-schedule-facts span{padding:var(--s-1) var(--s-2);border-radius:var(--r-s);background:var(--wash);overflow-wrap:anywhere}
  .ck-run-schedule-confirm{margin-top:var(--s-3);padding:var(--s-3);border:1px solid var(--bad-fg);border-radius:var(--r-m);background:var(--bad-bg)}
  .ck-run-schedule-confirm p{margin:0;color:var(--bad-fg);font-size:var(--t-sub);line-height:1.45}
  @media (max-width: 640px) {
    .ck-list-delete-actions{align-items:stretch}
    .ck-list-delete-actions .btn,.ck-list-delete-actions .ck-v3-live{width:100%}
  }
  @media (max-width: 900px) {
    .ck-v3-compare,.ck-v3-fields,.ck-run-mode-grid,.ck-run-list,.ck-run-schedule-list{grid-template-columns:repeat(2,minmax(0,1fr))}
  }
  /* fetch-184: phone tap-target + control hygiene (390px audit of all 37 views: 42 tiny ×
     on Pickups, 46 on Schedule, 148 small controls in Admin, linen control sprawl). */
  .rowdel { border: 1px solid var(--line); background: #fff; color: #9a3d3d; border-radius: 8px; min-width: 26px; cursor: pointer; font-size: 14px; line-height: 1.4; }
  .rowdel:hover { border-color: #c66; background: #fff5f5; }
  @media (max-width: 640px) {
    .ck-page .pgh-seg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));overflow:visible;mask-image:none;-webkit-mask-image:none}
    .ck-page .pgh-seg button{min-height:var(--control-height-touch);padding:var(--s-2);white-space:normal}
    .ck-section-intro{grid-template-columns:1fr;padding:var(--s-3)}
    .ck-intro-facts{justify-content:flex-start}
    .ck-intro-facts span{flex:1 1 40%}
    .ck917-uncertain-refresh{align-items:stretch}
    .ck917-uncertain-refresh .btn{width:100%}
    .ck-v3-template-grid,.ck-v3-workbench,.ck-v3-compare,.ck-v3-fields,.ck-run-mode-grid,.ck-run-scenarios,.ck-run-fields,.ck-run-anchor-grid,.ck-run-anchor,.ck-run-list,.ck-run-assignment-list,.ck-run-activity,.ck-run-schedule-list{grid-template-columns:1fr}
    .ck-v3-queue{position:static;max-height:none;overflow:visible}
    .ck-v3-workbench--detail .ck-v3-queue{display:none}
    .ck-v3-workbench--detail .ck-v3-back{display:inline-flex}
    .ck-v3-detail-nav{display:flex;gap:var(--s-2);align-items:center;justify-content:space-between;flex-wrap:wrap;margin-top:var(--s-3);padding-top:var(--s-3);border-top:1px solid var(--hair)}
    .ck-v3-detail-nav .btn{flex:1 1 40%}
    .ck-v3-candidate,.ck-v3-back,.ck-v3-detail-nav .btn,.ck-v3-decisions .btn,.ck-v3-footer .btn,.ck-v3-stage .btn,.ck-v3-stage input,.ck-v3-detail input,.ck-v3-detail select,.ck-v3-detail textarea,.ck-run-shell .btn,.ck-run-shell input,.ck-run-shell select,.ck-run-overview .btn,.ck-run-schedules .btn,.ck-run-card{min-height:var(--control-height-touch)}
    .ck-v3-decisions .btn{flex:1 1 40%}
    .ck-v3-footer .btn{flex:1 1 auto}
    .ck-v3-stage,.ck-v3-review{padding:var(--s-3)}
    .ck-run-step,.ck-run-submit,.ck-run-receipt,.ck-run-detail{padding:var(--s-3)}
    .ck-run-item-head{align-items:flex-start;flex-direction:column}
    .rowdel { min-width: 34px; min-height: 32px; font-size: 16px; }
    .btn { min-height: 36px; }
    .sel, select.sel, input.sel { max-width: 100%; min-height: 36px; }
    .cappill { padding: 7px 13px; }
  }
  /* ---- fetch-110: server assignment cards ---- */
  .svc-sheet { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
  .svc-card { border: 2px dashed #b8b0a2; border-radius: 12px; padding: 12px 14px; background: #fff; break-inside: avoid; }
  .svc-top { display: flex; justify-content: space-between; gap: 8px; font-size: 11px; color: var(--muted); border-bottom: 2px solid var(--gold); padding-bottom: 5px; margin-bottom: 7px; }
  .svc-name { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 26px; font-weight: 700; color: var(--navy); line-height: 1.1; }
  .svc-grid { display: flex; gap: 22px; margin-top: 6px; }
  .svc-l { font-size: 9.5px; letter-spacing: 1.2px; color: #8a94a3; font-weight: 700; }
  .svc-v { font-size: 15px; font-weight: 700; }
  .svc-big { font-size: 21px; letter-spacing: 1px; }
  .svc-diet { margin-top: 7px; background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; border-radius: 8px; padding: 5px 8px; font-size: 11.5px; font-weight: 600; }
  .svc-foot { margin-top: 8px; font-size: 9px; color: #b8b0a2; text-align: right; }
  /* fetch-630 — courses, timeline and role on the printable card */
  .svc-mt { margin-top: 6px; }
  .svc-role { font-size: var(--t-sub); color: var(--muted); }
  .svc-course { font-size: var(--t-label); line-height: 1.35; }
  .svc-ck { font-weight: 700; }
  /* fetch-636 — Amanda's survey type spec (2026-08-20) and the spacing she asked for */
  .svy-full { grid-column: 1 / -1; }
  /* fetch-704 (Amanda #3): "make the title font larger than the subheader font". Nominally
     22px > 17px already — but Cormorant's small x-height renders 22px visually SMALLER than
     Inter bold at 17px, so on the live form the subheader out-shouted the heading. Display
     size (27px) wins by eye, not just by number. Verified against svy-h2 in the browser. */
  /* fetch-826 (Jack, from a phone screenshot): ONE field on the client survey rendered as a
     grey filled capsule while every other field was a white bordered box. It is not a text box
     and it is not leaking — it is a <select>.

     portal.css:2261 styles .field input/select/textarea together and chromium honours it on all
     three: rendered at 390px, all thirteen SVY_TYPES come back white, bordered, zero overflow
     (box-sizing is border-box globally, so width:100% + padding cannot overrun). What that
     render DOES report is `appearance: auto` on the select-backed types. On iOS Safari that
     means the control keeps the NATIVE rendering — a grey capsule with its own metrics — and the
     author's background and border are not honoured the way chromium honours them. Every other
     field is an input or textarea, whose native appearance is already flat. That is why exactly
     one box on the page looks unlike all the others.

     SCOPED TO THE NO-LOGIN FORM. `select` appears across 163 surfaces; restyling every dropdown
     in the portal to fix one client-facing form is the blast radius fetch-819 refused. This also
     picks up the Venue select on the same screen, which has the identical defect.

     CANNOT BE PROVEN ON THIS MACHINE: chromium does not reproduce iOS Safari's native select at
     any viewport or device emulation. The probe asserts the MECHANISM — computed appearance is
     none, the chevron exists, and the control still measures identically to the inputs beside
     it. The visual confirmation is a real phone. */
  .af-form .field select { appearance: none; -webkit-appearance: none; -moz-appearance: none;
    background-image: none; padding-right: var(--s-6); }
  /* fetch-826, CORRECTED after Jack tested the live form: the field he reported is an
     input[type=date], not a select. His laptop shows it as mm/dd/yyyy with a calendar
     indicator, and an EMPTY date input is precisely what iOS draws as a grey box with no text.
     date / time / number are the other controls iOS dresses in its own chrome. text and
     textarea are LEFT ALONE ON PURPOSE — their native appearance is already flat, which is
     exactly why every other box on that form looked correct. */
  .af-form .field input[type="date"], .af-form .field input[type="time"],
  .af-form .field input[type="number"] { appearance: none; -webkit-appearance: none; }
  /* Safari hides the picker indicator with the native appearance; put it back so a date field
     still announces itself as one. */
  .af-form .field input[type="date"]::-webkit-calendar-picker-indicator { opacity: 1; }
  .af-form .field input[type="number"]::-webkit-inner-spin-button,
  .af-form .field input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
  /* Removing the native appearance also removes the native arrow, and a dropdown that looks
     exactly like a text box is a worse bug than the one being fixed. The chevron is a ::after on
     the field — no markup change, and :has() is already load-bearing in this stylesheet
     (.card:has(details.hdd[open])), so it is not a new dependency. A character, NOT an inline
     SVG: an SVG data URI needs a literal colour and the UI-debt ratchet counts hex. */
  /* fetch-826 (Jack): "these boxes / text are also off center". In a two-column row where one
     question wraps to two lines and its neighbour does not, the two controls sat 19px apart —
     measured identically at 640, 760, 900, 1100 and 1280px, so it is the label height and not a
     breakpoint. The control is pushed to the BOTTOM of its cell, so every control in a row
     shares a baseline however long its question is. Scoped to the survey question grid, which
     is the only place a wrapping question sits beside a short one. */
  .svy-qs .field { display: flex; flex-direction: column; }
  .svy-qs .field > label { flex: 0 0 auto; }
  .svy-qs .field > input, .svy-qs .field > select, .svy-qs .field > textarea,
  .svy-qs .field > .svy-dollar { margin-top: auto; }
  .af-form .field:has(select) { position: relative; }
  .af-form .field:has(select)::after { content: "\25BE"; position: absolute; right: var(--s-3);
    bottom: 10px; pointer-events: none; color: var(--muted); font-size: var(--t-body); line-height: 1; }
  .svy-h1 { font-family: 'Cormorant Garamond', serif; font-size: var(--t-display); line-height: 1.2; margin: 14px 0 2px; }
  /* fetch-637 — Sales: "a bold sub header that allows us to create sections of things to be
     able to separate the surveys out a little bit more". Bold alone was not doing that: it
     read as a slightly louder question. A rule above it and real space around it is what
     makes it a SECTION BREAK rather than emphasis. */
  /* fetch-826 (Jack): "make the gold lines that divide the sections a little thicker to
     differentiate the sections of questions further". It was 1px var(--line) — #e7dfcf, the warm
     cream hairline, which is why it reads as gold. Merely doubling that was rejected: 2px of
     #e7dfcf on white is still almost invisible and would not differentiate anything, which is the
     thing actually asked for. 2px var(--gold) is literally the gold line, thicker — and a section
     divider is the ONE use of gold the brand rule names outright: "focus rings, a selected metric,
     FINE DIVIDERS". */
  /* fetch-873 (Amanda #9): the gold section rule moves UNDER the header it belongs to —
     "put the horizontal line that comes with adding a header underneath the header instead
     of above it." Same 2px var(--gold) divider fetch-826 chose; only its side changes, so
     a header now reads as titling the section below its line rather than closing the one
     above. The fetch-793-era first-child exception dies with the top rule — a line under
     the very first header is exactly what's wanted. */
  .svy-h2 { font-family: Inter, system-ui, sans-serif; font-weight: 700; font-size: var(--t-section);
            margin: 22px 0 10px; padding-bottom: 8px; border-bottom: 2px solid var(--gold); }
  .svy-full:first-child .svy-h2 { margin-top: 4px; }
  .svy-body { font-family: Inter, system-ui, sans-serif; font-weight: 400; font-size: var(--t-body); line-height: 1.5; margin: 4px 0; }
  /* fetch-873 (Amanda #6): the five named text styles a builder can pick for any text block.
     Sizes are Amanda's spec in points (26/16/14/11pt — client-facing editorial, matching the
     Word-export sizes); colors ride the tokens. "All Caps" styles transform; "lowercase" in
     her spec reads as as-typed (the contrast is with All Caps), so no transform there.
     Title/HEADER carry the gold section rule BELOW them (per #9); SUB HEADER a hairline. */
  .svy-t-title { font-family: 'Cormorant Garamond', serif; font-weight: 700; font-size: 26pt; line-height: 1.15; color: var(--navy); margin: 14px 0 6px; }
  .svy-t-header { font-family: Inter, system-ui, sans-serif; font-weight: 700; font-size: 16pt; line-height: 1.25; color: var(--navy); text-transform: uppercase; letter-spacing: .04em; margin: 22px 0 10px; padding-bottom: 8px; border-bottom: 2px solid var(--gold); }
  .svy-t-subheader { font-family: Inter, system-ui, sans-serif; font-weight: 700; font-size: 14pt; line-height: 1.3; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin: 16px 0 6px; padding-bottom: 6px; border-bottom: 1px solid var(--line); }
  .svy-t-bodybold { font-family: Inter, system-ui, sans-serif; font-weight: 700; font-size: 11pt; line-height: 1.5; color: var(--ink); margin: 4px 0; }
  .svy-t-body { font-family: Inter, system-ui, sans-serif; font-weight: 400; font-size: 11pt; line-height: 1.5; color: var(--ink); margin: 4px 0; }
  .svy-full:first-child .svy-t-header, .svy-full:first-child .svy-t-title { margin-top: 4px; }
  /* fetch-887 — FONT FREEDOM. Four axes that compose on top of the five presets above, each
     optional, each declared AFTER the presets so equal specificity resolves to the override.
     Jack ruled the boundary: our two brand faces, not a font library. Colours are brand tokens
     only, so no combination can leave the palette.
     SIZES ARE pt, deliberately: they extend the preset ladder above (26/16/14/11pt), which was
     matched to the Word-export sizes. The UI-debt ratchet counts px font-sizes only and will
     not see these — the same gap fetch-883's census flagged. Named here rather than widened
     quietly; converting the whole family to tokens is its own ticket and would move what
     already ships. */
  .svy-f-cormorant { font-family: 'Cormorant Garamond', Georgia, serif; }
  .svy-f-inter { font-family: Inter, system-ui, sans-serif; }
  .svy-s-xs { font-size: 9pt; } .svy-s-sm { font-size: 11pt; } .svy-s-md { font-size: 14pt; }
  .svy-s-lg { font-size: 18pt; } .svy-s-xl { font-size: 22pt; } .svy-s-xxl { font-size: 30pt; }
  .svy-c-navy { color: var(--brand-blue-deep); } .svy-c-blue { color: var(--brand-blue-traditional); }
  .svy-c-gold { color: var(--brand-gold-dark); } .svy-c-stone { color: var(--brand-stone); }
  .svy-c-ink { color: var(--ink); }
  .svy-a-left { text-align: left; } .svy-a-center { text-align: center; display: block; }
  .svy-w-bold { font-weight: 700; }
  .svy-u-caps { text-transform: uppercase; letter-spacing: .04em; }
  /* fetch-873 (Amanda #1): the attachment answer — file input + the picked-files list */
  .svy-filewrap { display: flex; flex-direction: column; gap: 6px; }
  .svy-fileinp { font: inherit; }
  .svy-filenote { color: var(--muted); font-size: var(--t-sub); }
  /* the response browser's attachment buttons */
  .svy-filebtn { display: inline-flex; align-items: center; gap: 6px; margin: 2px 6px 2px 0; }
  /* ── fetch-874: the closing polish pass — hoisted + new classes ─────────────────────────
     Everything here replaces inline styles deleted from index.html (counted debt DOWN) or
     dresses the two header-⋯ modals and the new affordances. Tokens only. */
  /* the auto-survey log modal */
  .svy-snd-intro { font-size: var(--t-sub); margin-bottom: var(--s-2); }
  .svy-snd-note { font-size: var(--t-sub); margin-top: var(--s-2); }
  .svy-sndrow { border-top: 1px solid var(--line); margin-top: 6px; padding-top: 6px; align-items: center; gap: 8px; flex-wrap: wrap; }
  .svy-snd-ev { font-size: var(--t-mid); min-width: 140px; }
  .svy-snd-meta { font-size: var(--t-sub); }
  .svy-snd-sp { flex: 1; }
  /* the recipient-groups modal */
  .svy-grp-intro { align-items: center; margin-bottom: var(--s-2); }
  .svy-grp-introtext { flex: 1; min-width: 220px; font-size: var(--t-sub); }
  .svy-grprow { border-top: 1px solid var(--line); margin-top: 6px; padding-top: 6px; align-items: center; gap: 6px; flex-wrap: wrap; }
  .svy-grp-id { flex: 1; min-width: 180px; }
  .svy-grp-name { font-size: var(--t-mid); }
  .svy-grp-rule { font-size: var(--t-label); }
  .svy-grp-hdd { position: relative; }
  /* the QR takeaway (download + caption) */
  .svy-qrwrap { margin-top: var(--s-3); display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
  .svy-qrcap { font-size: var(--t-sub); font-weight: 600; }
  .svy-qracts { align-items: center; gap: var(--s-2); flex-wrap: wrap; }
  .svy-qrurl { font-size: var(--t-sub); word-break: break-all; }
  /* the client form's expectation line */
  .svy-expect { font-size: var(--t-sub); margin: -8px 0 12px; }
  /* the items table, un-inlined (renders in the live form, the preview, and the gallery) */
  .svy-items { border-collapse: collapse; width: 100%; }
  .svy-items th { text-align: left; padding: 4px 6px 4px 0; font-size: var(--t-label); letter-spacing: .04em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
  .svy-items td { padding: 2px 4px; }
  .svy-items td:first-child { padding-left: 0; }
  /* the base rule `.field input:not(...):not(...)` is (0,3,1) — these tie it and win by
     order, so the numeric cells keep the old inline widths (the hoist's parity promise) */
  .field .svy-items input.svy-it-item { width: 100%; min-width: 120px; }
  .field .svy-items input.svy-it-num { width: 74px; }
  .field .svy-items input.svy-it-cons { width: 84px; }
  .svy-it-del { padding: 2px 8px; }
  .svy-it-add { margin-top: 6px; padding: 3px 10px; font-size: var(--t-sub); }
  .svy-it-note { font-size: var(--t-label); margin-top: 3px; }
  /* the editor's question rows, un-inlined */
  .svy-qrow { padding: 6px 0; border-top: 1px solid var(--line); align-items: center; gap: 6px; }
  .svy-qrow-label { flex: 1; font-size: var(--t-mid); min-width: 160px; }
  .svy-qrow-meta { font-size: var(--t-label); }
  /* the survey list rows, un-inlined */
  .svy-lrow { padding: 10px 0; border-top: 1px solid var(--line); }
  /* fetch-950 - DIRECTION A. The class names .svy-lrow and .svy-row are KEPT, not replaced:
     .svy-row .hddm carries the fetch-509 phone pin that keeps the row menu inside the viewport,
     and renaming the row would have opened that menu off the left edge at 390px again. Every
     value below is a token, so the UI-debt ratchet stays flat. */
  .svy-lrow2 { align-items: center; gap: var(--s-3); flex-wrap: nowrap; }
  .svy-lrow--off .svy-lname, .svy-lrow--off .svy-lmeta { opacity: .62; }
  .svy-lmain { flex: 1; min-width: 0; }
  .svy-lname strong { font-weight: 600; }
  .svy-lmeta { color: var(--muted); font-size: var(--t-sub); margin-top: 2px; font-variant-numeric: tabular-nums; }
  .svy-mark { margin-left: var(--s-1); vertical-align: 1px; }
  /* the count IS the door to responses - the number was previously printed twice per row, once
     in the sub-line and once on a button beside it. 44px tall, so it holds the touch floor. */
  .svy-lcount { display: flex; flex-direction: column; align-items: flex-end; justify-content: center;
    min-width: 62px; min-height: var(--control-height-touch); padding: 0 var(--s-1);
    border-radius: 8px; text-decoration: none; color: var(--text-heading); }
  .svy-lcount:hover { background: var(--wash); }
  .svy-lcount-n { font-size: var(--t-section); font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
  .svy-lcount-u { font-size: var(--t-label); color: var(--muted); }
  .svy-lcount--zero { pointer-events: none; }
  .svy-lcount--zero .svy-lcount-n { font-weight: 500; color: var(--muted); }
  /* the band heading: structure, not chrome. No explanatory sentence under it - that is the copy
     fetch-939 batch 3 deleted off six screens. */
  .svy-band { display: flex; justify-content: space-between; align-items: baseline;
    font-size: var(--t-label); text-transform: uppercase; letter-spacing: .09em; font-weight: 700;
    color: var(--text-heading); background: var(--wash); padding: var(--s-2) var(--s-3);
    margin: 0 calc(-1 * var(--s-4)); border-top: 1px solid var(--line); }
  .svy-lrow + .svy-band { margin-top: var(--s-2); }
  .svy-band-n { font-weight: 500; color: var(--muted); font-variant-numeric: tabular-nums; }
  /* fetch-874.1: the recap-history notice on a recap template's responses page */
  .svy-recnote { margin-bottom: var(--s-3); }
  .svy-recnote .btn { vertical-align: baseline; }
  /* the public form's sent card — the raw #16a34a border went with the hoist; --ok-fg is the status green */
  .af-sentcard { max-width: 560px; margin: 24px auto; text-align: center; border-left: 4px solid var(--ok-fg); }
  /* fetch-873 (Amanda #11): a page-header title that is also the way home. Opt-in via
     pageHeaderHTML's titleId — renders as a button that inherits the .pgh-h look. */
  .pgh-h--link { background: none; border: 0; padding: 0; margin: 0; text-align: left;
    font: inherit; color: inherit; cursor: pointer; }
  .pgh-h--link:hover { color: var(--gold-dark); }
  /* fetch-873 (Amanda #2): the summary rides below the rows in an open fold */
  .svy-sumfold { margin-top: var(--s-3); }
  .svy-sumfold > summary { cursor: pointer; font-weight: 600; font-size: var(--t-mid); color: var(--muted); padding: 6px 0; }
  /* fetch-637: Amanda's banners are 1584x396 (4:1). Height-capping them left white space
     either side of a full-bleed graphic, so they span the card edge to edge instead —
     the negative inline margin cancels the card's 16px horizontal padding, and the
     rounded corners are inherited so the banner does not overhang the card. */
  /* fetch-822: max-width is NOT decoration here. The global `img, canvas, svg { max-width: 100% }`
     at the top of this file outranks the width below and pins the banner to the card's CONTENT
     width, so the +32px is discarded while the -16px margin still shifts it left — flush on the
     left, 33px short on the right at 390px. Measured, not reasoned about: the fetch-637 comment
     above has claimed edge-to-edge since the day it was written. */
  .svy-logo, .svy-footimg { display: block; width: calc(100% + 32px); max-width: none; margin-left: -16px; margin-right: -16px; height: auto; }
  .svy-logo { margin-top: -14px; margin-bottom: 14px; border-radius: 12px 12px 0 0; }
  .svy-footimg { margin-top: 18px; margin-bottom: -14px; border-radius: 0 0 12px 12px; }
  /* fetch-638 (Amanda #7, second attempt) — THE FIRST FIX NEVER APPLIED.
     `.field label { display: block; font-size: 12px }` has specificity 0-1-1 and beats a
     bare `.svy-mulbl` at 0-1-0. So these labels were display:BLOCK the whole time — which
     means `gap` and `align-items` did nothing at all, because they only affect a flex
     container. That is why the box and its text sat jammed together with the text riding
     low, and why a wrapped option tucked itself under the checkbox instead of lining up.
     It has been that way since the multi type was built; Amanda is the first to say so.
     `.field label.svy-mulbl` is 0-2-1 and wins outright. Measured in the browser after,
     not assumed — the assumption is what produced the first attempt. */
  /* fetch-704 (Amanda #2): the question label above a checkbox list was 12px and the option
     text next to the boxes was 14px — "two different sizes … a size that's in between".
     Both meet at 13px: the question label steps up, the option labels step down. Scoped to
     the survey checkbox question (.svy-wide) so the portal-wide 12px field label is untouched. */
  .field.svy-wide > label { font-size: var(--t-mid); }
  .field label.svy-mulbl {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 7px 0; margin-bottom: 0;
    font-size: var(--t-mid); line-height: 1.45; color: inherit; cursor: pointer;
  }
  .field label.svy-mulbl input[type="checkbox"] {
    flex: 0 0 auto; width: 17px; height: 17px; margin: 0; accent-color: var(--gold);
    /* nudge the box onto the optical centre of the FIRST line of text, so a two-line
       option still lines up with its own first line rather than drifting up */
    margin-top: calc((1.45em - 17px) / 2);
  }
  /* #8: the question box was a one-line input — you could not see what you had typed */
  .svy-qbox { width: 100%; min-height: 72px; resize: vertical; font: inherit; }
  /* fetch-704 (Amanda #1): the CHOICES box had the same disease — a one-line input that cut
     off long text while she typed it. Same cure as the question box, slightly shorter. */
  /* fetch-873 (Amanda #8): "make the choices box able to be expanded to the right as well
     as down." resize:both — max-width keeps a dragged-wide box inside its card. */
  /* fetch-883 (Amanda, still asking after 873): resize:both DID ship — and did nothing, because
     width:100% already fills the cell and max-width:100% forbade growing past it, so the drag
     had nowhere to go. Two changes make the ask real: the field now spans the whole builder
     grid (.svy-full on its wrapper, so it starts ~3x wider), and max-width is released so a
     drag right actually widens it. The wrapper scrolls instead of the card breaking. */
  .svy-optbox { width: 100%; min-height: 54px; resize: both; max-width: none; font: inherit; }
  #svyQOptsWrap { overflow-x: auto; }
  /* fetch-883 (Jack + Miranda): the confirmation screen's icon links. Navy discs with the
     glyph reversed out, matching the row on the CSE sites. 44px targets — this is the last
     thing a client touches, usually on a phone. */
  .svy-linkrow { margin-bottom: var(--s-1); }
  .svy-linkadd { margin-top: var(--s-1); }
  .svy-linkhelp { margin: 0; }
  /* fetch-892: the confirmation links are WORDS now, not icon discs  three website links
     rendered as three identical globes said nothing about where each one went (Jack's
     screenshot). Read as links: gold, underlined, 44px tall so a thumb still lands cleanly. */
  .svy-links { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--s-2) var(--s-4); margin-top: var(--s-4); }
  .svy-link { display: inline-flex; align-items: center; min-height: var(--control-height-touch);
    color: var(--brand-gold-dark); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
  .svy-link:hover { color: var(--brand-blue-deep); }
  .svy-link:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
  /* fetch-704 (Amanda #5): dollar questions — the $ lives in the field, the person types
     only the number. inputmode=decimal brings up the number pad on phones. */
  /* fetch-819 (Amanda #6: "make the questions in the survey the same size fonts and the answers").
     .field label is var(--t-sub) 12px and .field input/select/textarea are 14px, so on the form a
     CLIENT fills in, the question read as subordinate to the box asking it. Backwards: the
     question is the content, the input is the container.
     SCOPED, NOT GLOBAL. .field appears 331 times across the portal — roster, events, settings,
     timesheets — and none of those were asked about. .svy-qs .field label is 0-2-1 against the
     base rule's 0-1-1, so it wins here and changes nothing anywhere else.
     var(--t-body) IS 14px: the label lands exactly on the answer size, and using the token
     instead of the literal keeps the UI-debt ratchet flat.
     Colour is deliberately unchanged — she asked about size, and recolouring the label is her
     call to make, not one to slip in alongside. */
  .svy-qs .field label { font-size: var(--t-body); }

  /* fetch-820 (Amanda #2): a response opens on its own and exports on its own.
     Everything here is classed rather than inline-styled on purpose — the UI-debt ratchet fails
     the build when inline styles RISE, and the surrounding survey code is dense with them.
     No focus outline declared: portal.css:57-58 already gives every [tabindex]:focus-visible the
     brand focus ring, and the card carries tabindex="0". */
  .svy-rcard { cursor: pointer; transition: border-color .12s ease; }
  .svy-rcard:hover, .svy-rcard:focus-visible { border-color: var(--muted); }

  .svy-r1-bar { margin-bottom: var(--s-3); align-items: center; gap: var(--s-2); flex-wrap: wrap; }
  .svy-r1-spacer { flex: 1; }
  .svy-r1-del { padding: var(--s-1) var(--s-2); }
  /* fetch-823: the responses list — one line per response instead of one screen per response. */
  .svy-rlist { padding: 0; }
  .svy-rrow { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr) auto auto auto;
    align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-4);
    border-bottom: 1px solid var(--line); cursor: pointer; }
  /* The header row is not a row of data: it names the columns so each cell is readable on its
     own rather than being guessed at from its neighbours. */
  .svy-rhead { cursor: default; font-size: var(--t-label); color: var(--muted);
    text-transform: uppercase; letter-spacing: .04em; padding-top: var(--s-2); padding-bottom: var(--s-2); }
  .svy-rhead:hover { background: none; }
  .svy-rrow:last-child { border-bottom: 0; }
  .svy-rrow:hover, .svy-rrow:focus-visible { background: var(--wash); }
  .svy-rr-who { font-size: var(--t-body); font-weight: 600; color: var(--text-heading);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .svy-rr-ev, .svy-rr-venue { font-size: var(--t-sub); color: var(--muted);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .svy-rr-when { font-size: var(--t-sub); color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
  /* Completeness is the one fact the old card could not show: it drew only ANSWERED questions,
     so a half-finished response looked exactly like a complete one until you opened it. */
  .svy-rr-done { font-size: var(--t-label); color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
  .svy-rr-done.is-partial { font-weight: 600; }
  .svy-rr-acts { display: inline-flex; justify-content: flex-end; }
  /* fetch-823 (Jack): one control, not two loose buttons per row. Same shape as the header's
     ⋯ overflow, so the two menus in this screen behave identically. */
  .svy-rmenu { position: relative; }
  .svy-rmenu-btn { list-style: none; cursor: pointer; width: 28px; height: 28px; border-radius: var(--r-s);
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--muted); border: 1px solid transparent; }
  .svy-rmenu-btn::-webkit-details-marker { display: none; }
  .svy-rmenu-btn:hover { color: var(--ink); border-color: var(--line); background: var(--paper); }
  .svy-rmenu[open] .svy-rmenu-list { display: flex; }
  .svy-rmenu-list { display: none; position: absolute; right: 0; top: calc(100% + var(--s-1)); z-index: 40;
    flex-direction: column; gap: var(--s-1); padding: var(--s-2); min-width: 168px;
    background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-m);
    box-shadow: 0 6px 20px rgba(20, 33, 61, .12); }
  .svy-rmenu-list .btn { justify-content: flex-start; text-align: left; }
  @media (max-width: 640px) {
    /* A five-column grid at 390px is five unreadable slivers. The row becomes two lines: who and
       when on top, context and the actions under it. */
    .svy-rrow { grid-template-columns: minmax(0, 1fr) auto auto; gap: var(--s-1) var(--s-2); }
    /* Column HEADINGS need columns to head. At 390px there are none, so the header row is
       hidden rather than shown lying about a layout that is not there. */
    .svy-rhead { display: none; }
    .svy-rr-who { grid-column: 1; grid-row: 1; }
    .svy-rr-ev { grid-column: 1; grid-row: 2; }
    .svy-rr-venue { grid-column: 2; grid-row: 2; text-align: right; }
    .svy-rr-when { grid-column: 2; grid-row: 1; text-align: right; }
    .svy-rr-done { grid-column: 3; grid-row: 1; text-align: right; }
    .svy-rr-acts { grid-column: 3; grid-row: 2; justify-content: flex-end; }
  }
  /* fetch-823: the header primitive's own bits that the inert fetch-801 block did not carry. */
  .pgh-back { margin-bottom: var(--s-2); }
  .pgh-moremenu { position: relative; }
  .pgh-moremenu[open] .pgh-morelist { display: flex; }
  .pgh-morelist { display: none; position: absolute; right: 0; top: calc(100% + var(--s-1)); z-index: 40;
    flex-direction: column; gap: var(--s-1); padding: var(--s-2);
    background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-m);
    box-shadow: 0 6px 20px rgba(20, 33, 61, .12); }
  .svy-r1-meta { font-size: var(--t-sub); color: var(--muted); }
  .svy-r1-q { margin-top: var(--s-2); }
  /* fetch-822 (Jack): on a desktop this reader was ~90% empty — every question/answer pair took
     a full row, so "Buffet" occupied one line of a 1900px screen and a 25-question questionnaire
     was 25 near-empty rows to scroll. */
  .svy-r1-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--s-3) var(--s-4); margin-top: var(--s-3); }
  .svy-r1-grid .svy-r1-q { margin-top: 0; }
  /* A paragraph answer squeezed into a 260px track is worse than the empty space this fixes,
     so anything long takes the full width and only the short answers pack. */
  .svy-r1-grid .svy-r1-q.is-long { grid-column: 1 / -1; }
  .svy-r1-lbl { display: block; font-size: var(--t-label); color: var(--muted); }
  /* pre-wrap: a long answer was typed with its own line breaks and they are part of the answer */
  .svy-r1-a { font-size: var(--t-body); white-space: pre-wrap; }
  .svy-r1-a.is-blank { color: var(--muted); }
  .svy-r1-blanks { font-size: var(--t-label); color: var(--muted); margin-top: var(--s-4); }

  .svy-dollar { position: relative; }
  .svy-dollar .svy-dpfx { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; font-size: var(--t-body); }
  /* fetch-892 (Jack, 09-01, with the screenshot: the $ sitting on top of the first digit —
     "$0,000" where the 5 of 50,000 was hidden underneath it). The rule below WAS
     `.svy-dollar input`, specificity (0,1,1) — and it lost to the base field rule at
     portal.css:2331, `.field input:not([type="checkbox"]):not([type="radio"])`, which is
     (0,3,1) because :not() takes its argument's specificity, and which sets the padding
     SHORTHAND. So padding-left never applied and the input kept its 8px.
     The fix is to match that (0,3,1) exactly — the same lesson fetch-874 recorded for the
     items table. Reaching for !important here would have hidden the cause. */
  .svy-dollar input:not([type="checkbox"]):not([type="radio"]) { padding-left: 24px; width: 100%; }
  /* fetch-704 (Amanda #8): the survey's name opens its editor in a new tab — the list stays put. */
  .svy-title-a { color: inherit; text-decoration: none; }
  .svy-title-a:hover strong { text-decoration: underline; text-underline-offset: 2px; }
  .svy-addrow { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--line); }
  /* fetch-644 — WHY THE BOXES DID NOT LINE UP.
     `.fs-hint` is an inline span INSIDE the label, and `.field label` is display:block.
     A hint long enough to wrap (Venue's ran to three lines) therefore grows the LABEL,
     and every control in that grid row starts at a different y. Nothing is misaligned in
     the CSS — the label is just taller than its neighbours. Hints move BELOW the control
     instead: labels stay one line, so the controls of a row all start together.
     `.fs-hint` itself is untouched — 10 other screens use it. */
  .f-help { display: block; font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--muted); font-size: var(--t-sub); line-height: 1.4; margin-top: var(--s-1); }
  /* fetch-644 — ONE checkbox style for the whole survey card. Active and Counts-as-recap
     carried a hand-written inline flex; Standalone carried .svy-mulbl, which fetch-638 had
     just moved to --t-body/17px. Same row, two type sizes, two box sizes, two baselines.
     .svy-chk is the single answer; the inline copies are deleted. */
  .field label.svy-chk {
    display: flex; align-items: flex-start; gap: var(--s-2);
    font-size: var(--t-sub); line-height: 1.45; font-weight: 400; text-transform: none; letter-spacing: 0;
    color: var(--muted); cursor: pointer; margin-bottom: 0; padding: var(--s-1) 0;
  }
  .field label.svy-chk input[type="checkbox"], .field label.svy-chk input[type="radio"] { flex: 0 0 auto; margin: 0; accent-color: var(--gold); margin-top: calc((1.45em - 13px) / 2); } /* fetch-863: radios too — the Teams/compose audience radios wear .svy-chk */
  /* the three switches share one full-width row instead of each taking a grid cell beside a
     labelled control — a checkbox has no label above it, so it never lined up with one */
  .svy-chkrow { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-5); }
  /* fetch-644 — the answer-type preview. Sales asked for Tave's hover thumbnail; this
     renders the REAL control instead, from the choices they have actually typed, and it
     is always visible rather than hover-only (hover does not exist on their phones).
     pointer-events:none makes the whole panel a picture — nothing here is submittable. */
  .svy-prev { border: 1px solid var(--line); border-radius: var(--r-s); background: var(--paper); padding: var(--s-2) var(--s-3) var(--s-3); }
  .svy-qform { background: var(--wash); border-radius: var(--r-s); padding: var(--s-3); margin-top: var(--s-1); }
  .svy-prev-h { font-size: var(--t-label); letter-spacing: .04em; text-transform: uppercase; color: var(--muted); margin-bottom: var(--s-1); }
  .svy-prev-body { pointer-events: none; user-select: none; }
  .svy-prev-body .field { margin: 0; }
  .svy-prev-note { font-size: var(--t-sub); color: var(--muted); margin-top: var(--s-2); line-height: 1.4; }
  .svy-gal { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: var(--s-3); margin-top: var(--s-2); }
  .svy-gal .svy-prev { padding: var(--s-2); display: flex; flex-direction: column; }
  .svy-gal-pick { margin-top: auto; padding-top: var(--s-2); } /* tiles are unequal heights; the button still lands on one line */
  /* fetch-862 (Mobbin audit) — the row menu's item style, hoisted from six inline copies */
  .hddm .hddm-i { justify-content: flex-start; text-align: left; border: none; width: 100%; }
  /* U2 — the editor's settings fold: questions are the work, settings are the fold */
  .svy-setfold { border: 1px solid var(--line); border-radius: var(--r-s); padding: var(--s-2) var(--s-3); margin-top: var(--s-3); background: var(--paper); }
  .svy-setfold > summary { cursor: pointer; font-weight: 600; font-size: var(--t-body); color: var(--navy); }
  .svy-setfold > summary .muted { font-weight: 400; font-size: var(--t-sub); }
  .svy-setfold .svy-setgrid { margin-top: var(--s-2); }
  .svy-qsec { margin-top: var(--s-3); border-top: 1px solid var(--line); padding-top: var(--s-2); }
  .svy-qsec-head strong { font-size: var(--t-body); }
  .svy-qsec-empty { font-size: var(--t-sub); margin-top: var(--s-1); }
  /* U1 — the results summary: bars carry their counts in TEXT; the fill is emphasis, never
     the message (color-alone rule). Track is a quiet wash; gold stays jewelry. */
  .svy-sum-strip { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); font-size: var(--t-sub); color: var(--muted); padding-bottom: var(--s-2); border-bottom: 1px solid var(--line); }
  .svy-sum-strip strong { color: var(--ink); font-variant-numeric: tabular-nums; }
  .svy-sum-card { padding: var(--s-3) 0; border-bottom: 1px solid var(--line); }
  .svy-sum-card:last-child { border-bottom: none; padding-bottom: var(--s-1); }
  .svy-sum-q { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-1) var(--s-3); margin-bottom: var(--s-2); }
  .svy-sum-q strong { font-size: var(--t-body); }
  .svy-sum-base { font-size: var(--t-label); color: var(--muted); font-variant-numeric: tabular-nums; }
  .svy-sum-row { display: flex; align-items: center; gap: var(--s-2); padding: 2px 0; }
  .svy-sum-lbl { flex: 0 1 34%; min-width: 90px; font-size: var(--t-sub); overflow-wrap: anywhere; }
  .svy-sum-track { flex: 1 1 auto; height: 10px; background: var(--wash); border-radius: 999px; overflow: hidden; }
  .svy-sum-fill { display: block; height: 100%; width: var(--sw, 0%); background: var(--navy); border-radius: 999px; }
  .svy-sum-n { flex: 0 0 auto; min-width: 64px; text-align: right; font-size: var(--t-sub); font-variant-numeric: tabular-nums; color: var(--ink); }
  .svy-sum-stat { font-size: var(--t-sub); }
  .svy-sum-stat strong { font-variant-numeric: tabular-nums; }
  .svy-sum-quote { font-size: var(--t-sub); border-left: 2px solid var(--line); padding: 2px 0 2px var(--s-2); margin: var(--s-1) 0; white-space: pre-wrap; }
  .svy-sum-none { font-size: var(--t-sub); }
  .svc-duty { font-size: var(--t-sub); }
  .svc-tl { display: flex; flex-direction: column; gap: 1px; font-size: var(--t-label); line-height: 1.3; }
  @media print { .svc-sheet { grid-template-columns: 1fr 1fr; gap: 10px; } .svc-card { border-color: #999; } }
  /* Menu Catalog still uses the shared prep-line item anatomy. */
  .prep-line { display: flex; gap: 9px; padding: 4px 8px; border-bottom: 1px solid #f6f3ec; align-items: baseline; }
  .prep-qty { min-width: 42px; text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
  .prep-item { flex: 1; min-width: 0; font-size: 13px; }
  .prep-roll { margin-top: 8px; padding: 8px 10px; background: #fffdf6; border: 1px dashed var(--gold); border-radius: 8px; font-size: 12.5px; }
  .prep-unit { font-weight: 400; font-size: var(--t-label); color: var(--muted); }
  .prep-vessel { display: inline-block; font-size: 10.5px; border: 1px solid var(--line); border-radius: 999px; padding: 0 7px; margin-left: 6px; color: var(--muted); background: #fff; }
  .mi-spec-yes { color: var(--ok-fg); font-size: var(--t-sub); white-space: nowrap; }
  .mi-spec-no { color: var(--muted); font-size: var(--t-sub); white-space: nowrap; }
  tr[data-miopen] { cursor: pointer; }
  tr[data-miopen]:hover td { background: var(--wash); }
  /* fetch-134: planning packet */
  .pk-sec { border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; margin-bottom: 8px; background: #fff; }
  .pk-sec summary { cursor: pointer; font-weight: 600; font-size: 13.5px; color: var(--navy); }
  .pk-chip { display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--line); border-radius: 20px; padding: 4px 10px; font-size: 12.5px; cursor: pointer; background: #fff; }
  .pk-chip:has(input:checked) { background: #f3efe2; border-color: var(--gold); }
  .pk-chip input { accent-color: var(--gold-dark, #a8853a); margin: 0; }
  .pk-upg { display: flex; align-items: center; gap: 8px; font-size: 13px; padding: 2px 0; }
  .pk-upg input { width: 60px; padding: 4px 6px; }
  /* fetch-136: long titles wrap instead of blowing out tiles (events page + calendar quick-view) */
  /* fetch-138.1: 'anywhere' shrank flex min-content to ONE CHARACTER, so greedy siblings
     (event header button row) crushed titles into a 4-char column. break-word wraps the
     same overflow cases WITHOUT changing intrinsic width. */
  .qv-title { overflow-wrap: anywhere; }
  .qv-row .v { overflow-wrap: anywhere; min-width: 0; flex: 1; }
  .card .row strong { overflow-wrap: break-word; }
  .card .row > div[style*="flex:1"] { min-width: 0; }
  .card .muted { overflow-wrap: break-word; }
  .evt-anchors a { overflow-wrap: anywhere; }
  /* ---- fetch-104: linen order print ---- */
  @media print { .linen-doc { border: none; box-shadow: none; } .linen-doc input.linen-qty { border: none; font-size: 15px; } }
  /* fetch-476: venue asset QR sheet (labels = Avery 5163-class 4in x 2in, cards = cut-apart) */
  .aqr-head { display: flex; gap: 8px; margin-bottom: 12px; align-items: center; flex-wrap: wrap; }
  .aqr-hint { font-size: 12px; }
  .aqr-sheet { background: #fff; }
  .aqr-sheet.aqr-labels { display: grid; grid-template-columns: 4in 4in; grid-auto-rows: 2in; column-gap: 0.16in; justify-content: center; }
  .aqr-label { width: 4in; height: 2in; padding: 0.14in; box-sizing: border-box; display: flex; gap: 0.14in; align-items: center; overflow: hidden; break-inside: avoid; border: 1px dashed var(--line); }
  .aqr-label .aqr-qr { flex: 0 0 auto; }
  .aqr-nm { font-weight: 700; font-size: 13px; }
  .aqr-nm--lg { font-size: 15px; }
  .aqr-sub { font-size: 10.5px; color: var(--muted); margin-top: 2px; }
  .aqr-scan { font-size: 8.5px; letter-spacing: .08em; color: var(--muted); margin-top: 5px; }
  .aqr-sheet.aqr-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: 10px; }
  .aqr-card { border: 1px solid var(--line); border-radius: 10px; padding: 12px; text-align: center; break-inside: avoid; }
  .aqr-qr--center { display: flex; justify-content: center; margin: 8px 0; }
  @media print { .aqr-label { border: none; } .aqr-sheet.aqr-labels { column-gap: 0.16in; } .aqr-card { border-color: #999; } }
  /* fetch-477: action-item paste box */
  .stf-kw-ta { width: 100%; box-sizing: border-box; font-family: inherit; }
  /* ---- fetch-103: notification bell + panel ---- */
  /* fetch-283: .eq-seg base styles hoisted out of the phone media block (they were phone-only,
     leaving the Assets segmented control unstyled on desktop; the nested desktop rule was dead) */
  .eq-seg { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
  .rcp-ib { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface-card, White); color: var(--navy); text-decoration: none; transition: .12s; } /* fetch-445: recap dept icon buttons */
  .rcp-ib:hover, .rcp-ib:focus-visible { border-color: var(--brand-blue-traditional); box-shadow: 0 2px 8px rgba(0,0,0,.08); }
  .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* fetch-444: screen-reader-only page titles */
  .page-header--actions { justify-content: flex-end; margin: 0 0 8px; } /* fetch-444: actions slot without the strip */
  .ci-sprite { display: none; } /* fetch-443: the inlined symbol sprite */
  .ci { display: inline-block; vertical-align: -2px; flex: none; } /* fetch-443: Crystal icon glyphs (sprite <use>) */
  .eq-segbtn { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px; padding: 9px 15px; border: 1px solid #e7dfcf; background: #fff; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--navy); cursor: pointer; white-space: nowrap; }
  .eq-segbtn.on { background: var(--navy); color: #fff; border-color: var(--navy); }
  .bellwrap { position: relative; display: inline-block; }
  .brandbar .shell-bell { display: inline-flex; align-items: center; justify-content: center; position: relative;
    width: var(--control-height-touch); min-height: var(--control-height-touch); padding: var(--s-2);
    background: transparent; color: var(--brand-pink); border-color: var(--brand-gold-mid); }
  .brandbar .shell-bell:hover { color: var(--brand-gold-light); }
  .brandbar .shell-bell .ci { width: 22px; height: 22px; }
  .bell-n { position: absolute; top: -6px; right: -7px; background: #b3261e; color: #fff; border-radius: 999px; font-size: 10.5px; font-weight: 700; padding: 1px 6px; border: 2px solid var(--navy-dark); }
  .bell-panel { position: absolute; right: 0; top: 46px; width: min(370px, 92vw); max-height: 66vh; overflow-y: auto; background: #fff; border: 1px solid #e7dfcf; border-radius: 13px; box-shadow: 0 14px 40px rgba(36,43,66,.24); z-index: 90; text-align: left; }
  .bell-head { display: flex; justify-content: space-between; align-items: center; padding: 11px 14px; border-bottom: 1px solid #f1ede4; color: var(--navy); }
  .bell-item { padding: 10px 14px; border-bottom: 1px solid #f6f3ec; cursor: pointer; }
  .bell-item:hover { background: #fffdf8; }
  .bell-item .bi-t { font-size: 13px; color: var(--ink); }
  .bell-item.un .bi-t { font-weight: 700; }
  .bell-item.un { border-left: 3px solid var(--gold); }
  .bell-item .bi-s { font-size: 11px; color: #8a94a3; margin-top: 2px; }
  /* fetch-936: the same panel hosted in the phone's Notifications sheet - the anchored geometry comes off, the
     sheet's head carries the title, the panel's own head keeps Mark all read */
  .cse-modal .bell-panel { position: static; top: auto; right: auto; width: auto; max-height: none; border: 0; box-shadow: none; border-radius: 0; }
  .cse-modal .bell-head > strong { display: none; }
  .cse-modal .bell-head { justify-content: flex-end; } /* the title is gone from this head, so Mark all read keeps the right edge instead of drifting left */
  .cse-modal .bell-head:not(:has(#bellReadAll)) { display: none; } /* with nothing unread the head would be an empty band under the sheet's own title */
  /* fetch-102 — phone quick actions (Home) + phone declutter */
  .pq-grid { display: none; }
  @media (max-width: 640px) {
    .pq-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 14px; }
    /* fetch-213 (Jack): Assets segmented control — one tidy scrollable row on phone (base styles
       moved global in fetch-283; the old nested min-width rule could never fire inside this block) */
    .eq-seg { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 3px; scrollbar-width: none; }
    .eq-seg::-webkit-scrollbar { display: none; }
    /* fetch-522 (Jack): "have a little translucence ... i dont love the stark white chips".
       They were PURE WHITE on the --bg Neutral Pink page — not merely bright, but COLD against
       warm, and the only pure-white surface on the whole screen. A 55% white now resolves to a
       warm off-white over the page: still clearly a raised surface, but in the same family as
       everything around it, and it FOLLOWS the page if --bg ever changes instead of stranding.
       NO backdrop-filter: what sits behind these is a flat colour, so a blur would cost GPU on
       every phone and change nothing visible. Translucence without the theatre.
       Shadow matches .card so the tiles read as part of the card family rather than their own.
       Three raw colour literals removed here — and note the ratchet counts literals in COMMENTS
       too, which is why this one names tokens in prose (the fetch-517 lesson, relearned). */
    .pq-tile { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 6px; background: rgba(255, 255, 255, .55); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 1px 5px rgba(56, 74, 97, .06); font-size: 12.5px; font-weight: 700; color: var(--navy); cursor: pointer; }
    .pq-tile:active { background: rgba(255, 255, 255, .92); border-color: var(--brand-gold-mid); } /* presses toward solid — glass firming under the thumb */
    .pq-tile .pq-ic { font-size: 20px; }
  }
  @media (max-width: 640px) { .be-launch { display: none; } } /* fetch-105.1: booking starts from the Home tile on phones */
  @media (max-width: 560px) {
    #importBtn, #exportBtn { display: none; }   /* desktop jobs — off the phone */
    .cal-legend { display: none; }              /* reference, not reading */
    .build-evt .be-sub { display: none; }
  }
  /* ---- fetch-111: branded letterhead print (Crystal Wiki) + new sections ---- */
  .lhdoc { display: none; }
  .lh-head { background: #242b42; color: #fff; padding: 26px 34px 20px; text-align: center; }
  .lh-word { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 40px; letter-spacing: 11px; font-weight: 600; color: #c09267; }
  .lh-word span { background: linear-gradient(115deg, #8c6145, #c09267 42%, #ecd0af 58%, #c09267 74%, #8c6145); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
  .lh-sub { font-size: 10.5px; letter-spacing: 6.5px; color: #e9e2d4; margin-top: 5px; }
  .lh-rule { height: 4px; background: linear-gradient(90deg, #8c6145, #c09267, #8c6145); }
  .lh-titlebar { padding: 26px 44px 4px; }
  .lh-doc-title { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 27px; color: #242b42; font-weight: 700; line-height: 1.15; }
  .lh-doc-meta { font-size: 10.5px; letter-spacing: 1.8px; text-transform: uppercase; color: #8c6145; margin-top: 4px; }
  .lh-body { padding: 14px 44px 74px; font-size: 12.5px; line-height: 1.55; color: #1a1a1a; }
  .lh-foot { position: fixed; bottom: 0; left: 0; right: 0; text-align: center; font-size: 9.5px; letter-spacing: 2.6px; color: #8c6145; border-top: 1px solid #d8cebc; padding: 7px 0 3px; background: #fff; }
  @media print {
    body.lh-print > :not(.lhdoc) { display: none !important; }
    body.lh-print .lhdoc { display: block !important; }
    .lhdoc, .lhdoc * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  }
  .wiki-card[data-wikisec="emergency"] { border-left: 3px solid #b3423a; }
  /* P1-4 seeds — phone ergonomics that ride along free */
  @media (max-width: 720px) { .btn { min-height: 42px; } }
  /* ── fetch-501: SUMMIT PHONE BATCH — five shared primitives (Jack's screenshot batch 2026-08-15).
     Desktop is untouched; every rule below lives behind the phone breakpoint except the two
     display defaults. ── */
  .pipe-venue { max-width: 260px; margin: 0; } /* fetch-900: the Pipeline's page-level venue select; fetch-908: a cell of the filter row */
  /* ── fetch-903: DISPATCH — scope cards, the two-pane list + record, search (docs/sales-v2 r2); fetch-908: one filter row, Recent gone. ── */
  .pdx-filters { display: flex; gap: var(--s-2); flex-wrap: wrap; align-items: center; margin-bottom: var(--s-2); } /* the venue chips (a desktop) or the venue select (a phone), and the salesperson select */
  .pdx-venues { display: flex; gap: var(--s-1); flex-wrap: wrap; align-items: center; }
  /* fetch-914: the venue pills wear the calendar's venue color (--vc set by bindPipeline from venueColor): tinted at rest, filled when selected; All venues keeps the navy */
  .btn.pdx-vchip--venue { color: var(--vc); border-color: color-mix(in srgb, var(--vc) 45%, var(--surface-card)); background: color-mix(in srgb, var(--vc) 11%, var(--surface-card)); }
  .btn.pdx-vchip--venue.btn-primary { background: var(--vc); border-color: var(--vc); color: var(--surface-card); }
  .pdx-filters .pipe-owner-sel { display: block; margin: 0 0 0 auto; max-width: 15rem; }
  .pdx-scopes { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: var(--s-2); margin-bottom: var(--s-3); }
  .pdx-scope { --pipe-accent: var(--brand-stone); display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-height: 84px; padding: var(--s-2) var(--s-3); background: var(--surface-card); border: 1px solid var(--hair); border-top: 3px solid var(--pipe-accent); border-radius: var(--r-m); text-align: left; cursor: pointer; font: inherit; color: var(--ink); }
  .pdx-scope.on { box-shadow: 0 0 0 2px var(--gold); border-color: var(--gold); }
  .pdx-scope.drop-hot { box-shadow: 0 0 0 2px var(--pipe-accent); }
  .pdx-scope-name { font-weight: 700; }
  .pdx-scope-n { font-size: 1.4em; font-weight: 800; line-height: 1.1; }
  .pdx-scope-sub { font-size: var(--t-sub); color: var(--muted); }
  .pdx-scope-def { font-size: var(--t-label); color: var(--muted); }
  .pdx-scope[data-pipescope="queue"], .pdx-scope[data-pipescope="attn"] { --pipe-accent: var(--gold-dark); }
  .pdx-scope[data-pipescope="Lead"] { --pipe-accent: var(--ok-fg); }
  .pdx-scope[data-pipescope="Hold"] { --pipe-accent: var(--pipe-orange); }
  .pdx-scope[data-pipescope="Tentative"] { --pipe-accent: var(--pipe-blue); }
  .pdx-scope[data-pipescope="Definite"] { --pipe-accent: var(--pipe-purple); }
  .pdx-scope--lost { --pipe-accent: var(--bad-fg); border-style: dashed; cursor: default; display: none; } /* fetch-908: Lost is a drop target, drawn only while a row is in the air */
  .pdx-scopes.is-dragging .pdx-scope--lost { display: flex; }
  .pdx-grid { display: grid; grid-template-columns: minmax(17rem, 31%) minmax(0, 1fr); gap: var(--s-3); align-items: start; } /* fetch-1023: the list is a compact index; the opened record owns the working width */
  .pdx-list, .pdx-record { min-width: 0; }
  /* ── fetch-904: THE RECORD PAGE — r2's three columns (rail · log · rail) inside the Pipeline's pane; below 1480px the page takes the width. ── */
  .pdx-rec-head { display: flex; gap: var(--s-3); align-items: flex-start; margin-bottom: var(--s-3); }
  .pdx-rec-back { flex: 0 0 auto; }
  .pdx-rec-title { flex: 1; min-width: 0; }
  .pdx-rec-badges { display: flex; gap: var(--s-1); flex-wrap: wrap; align-items: center; }
  .pdx-rec-h { margin: 2px 0; font-size: var(--t-title); line-height: 1.2; }
  .pdx-rec-sub { font-size: var(--t-sub); }
  .pdx-rec-acts { flex: 0 0 auto; justify-content: flex-end; }
  /* ── fetch-916: THE RECORD CARD — the tabs, the head and the level's body in one card (r2's record-head); the head's hair line only when something follows it. ── */
  .pdx-rec-card { padding: var(--s-3) var(--s-4) var(--s-4); } /* fetch-1009: no level tabs - the head is the card's first row on every width */
  .pdx-rec-card > .pdx-rec-head { margin: 0 0 var(--s-3); padding-bottom: var(--s-3); border-bottom: 1px solid var(--hair); }
  .pdx-rec-card > .pdx-rec-head:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; }
  .pdx-rec-card .pdx-details { margin: 0; }
  .pdx-rec-card .pdx-move, .pdx-rec-card .inq-decline { margin: 0 0 var(--s-3); }
  /* fetch-1153: the Customer portal panel on the Pipeline record. It borrows the Clients page's portal rows and invite form (the same
     class names, the same doors behind them); the field and action-row rules there are scoped to .cl-record, so they are restated
     here for this one panel - tokens only. Inputs hold 1rem so a phone never zooms into them; every press is a touch target. */
  .pdx-rec-card .pdx-portal { margin: 0 0 var(--s-3); }
  .pdx-portal p { margin: var(--s-2) 0 0; line-height: 1.5; }
  .pdx-portal .cl-portal-row:first-of-type { margin-top: var(--s-2); }
  .pdx-portal .cl-filter-field { display: flex; flex-direction: column; gap: var(--s-1); min-width: 0; color: var(--text-heading); font-size: var(--t-sub); font-weight: 600; line-height: 1.5; }
  .pdx-portal .cl-filter-field input { width: 100%; min-width: 0; min-height: var(--control-height-touch); padding: var(--s-2); border: 1px solid var(--line); border-radius: var(--r-s); background: var(--surface-card); color: var(--ink); font: inherit; font-size: max(var(--t-body), 1rem); font-weight: 400; }
  .pdx-portal .cl-outreach-actions, .pdx-portal .actions { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; } /* .actions does not wrap by default: on a phone "Open <client> on Clients" pushed Close off the card's edge (seen in the first phone shot) */
  .pdx-portal .btn { min-height: var(--control-height-touch); }
  .pdx-rec-grid { display: grid; grid-template-columns: minmax(15rem, 18rem) minmax(0, 1fr) minmax(15rem, 18rem); gap: var(--s-3); align-items: start; }
  .pdx-rec-grid--log { grid-template-columns: minmax(0, 1fr) minmax(15rem, 18rem); } /* fetch-910: the left rail retired - the timeline and the right rail */
  /* fetch-1023: Inquiry/Lead records are one card. Their task/log/related regions are flat sections, not nested cards or a second rail. */
  .pdx-rec-card > .pdx-rec-grid--integrated { display: block; margin-top: var(--s-4); padding-top: var(--s-4); border-top: 1px solid var(--hair); }
  .pdx-rec-grid--integrated .pdx-rec-main, .pdx-rec-grid--integrated .pdx-rail--right { display: block; }
  .pdx-section { min-width: 0; margin: 0; padding: 0; background: transparent; border: 0; border-radius: 0; box-shadow: none; }
  .pdx-section + .pdx-section, .pdx-rec-grid--integrated .pdx-rail--right > .pdx-section { margin-top: var(--s-4); padding-top: var(--s-4); border-top: 1px solid var(--hair); }
  .pdx-section-head { align-items: flex-start; margin-bottom: var(--s-2); }
  .pdx-related-empty { display: none; }
  .pdx-rail .pln-grid { grid-template-columns: minmax(0, 1fr); } /* fetch-1009: a booked record's Planning checklist stacks in the rail */
  @media (max-width: 1199px) { .pdx-record .pdx-rec-grid--log { grid-template-columns: minmax(0, 1fr); } .pdx-record .pdx-rail--right { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); align-items: start; } .pdx-record .pdx-rail--right .card { margin-bottom: 0; } } /* fetch-1009: beside the list the pane is narrow below 1200 - the rail drops under the log as two columns of cards */
  .evt-tabs { margin-bottom: var(--s-3); }
  .pdx-rail, .pdx-rec-main { min-width: 0; }
  .pdx-prop { padding: var(--s-1) 0; border-top: 1px solid var(--hair); }
  .card-kicker + .pdx-prop { border-top: 0; }
  .pdx-prop-l { display: block; font-size: var(--t-label); text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
  .pdx-prop-v { display: block; margin-top: 2px; font-weight: 600; overflow-wrap: anywhere; }
  .pdx-log-tools { display: flex; gap: var(--s-1); flex-wrap: wrap; align-items: center; margin-bottom: var(--s-2); }
  .pdx-log-q { flex: 1 1 160px; min-width: 0; min-height: 36px; padding: 0 var(--s-2); border: 1px solid var(--hair); border-radius: var(--r-s); font: inherit; background: var(--surface-card); color: var(--ink); }
  .pdx-rel { display: block; width: 100%; padding: var(--s-1) 0; border: 0; border-top: 1px solid var(--hair); background: transparent; text-align: left; font: inherit; color: var(--ink); cursor: pointer; }
  .card-kicker + .pdx-rel { border-top: 0; }
  .pdx-rel-sub { display: block; }
  /* ── fetch-905: THE PHONE SHEET + THE QUICK-ACTION RAIL — a sticky bar and three segments on a phone; the rail above Sales status on a desktop. ── */
  .pdx-sheet-bar { display: none; align-items: center; gap: var(--s-2); min-height: 44px; margin-bottom: var(--s-2); } /* fetch-908: the phone's; a desktop has no back button. fetch-1009: the two level tabs are gone too - the record is one page */
  .pdx-sheet-title { display: none; }
  .pdx-segs { display: none; }
  /* ── fetch-908: r2's facts grid and the More fold; fetch-1009: the pane keeps its place beside the list and the log sits under the head, beside the rail. ── */
  .pdx-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-3) var(--s-4); }
  .pdx-fact { min-width: 0; }
  .pdx-fact-l { font-size: var(--t-label); font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); margin-bottom: 2px; }
  .pdx-fact-v { font-weight: 600; overflow-wrap: anywhere; }
  .pdx-fact-v.is-empty { color: var(--muted); font-weight: 500; }
  .pdx-more { margin-top: var(--s-3); border-top: 1px solid var(--hair); padding-top: var(--s-2); }
  .pdx-more summary { cursor: pointer; color: var(--navy); font-weight: 600; }
  .pdx-facts--more { margin-top: var(--s-2); }
  .pdx-facts-h { margin-bottom: var(--s-2); }
  .pdx-edit .pdx-fact-v input:not([type="checkbox"]), .pdx-edit .pdx-fact-v select { width: 100%; box-sizing: border-box; min-height: 36px; font: inherit; }
  .pdx-edit .inq-check { display: block; margin-top: var(--s-1); font-weight: 500; }
  .cl-dock { display: flex; flex-direction: column; } /* fetch-910: ONE line until focus, everywhere - the kinds, the next-touch chips and the More fold follow the line */
  .cl-dock > .cl-dock-row:first-child { display: none; order: 2; }
  .cl-dock--on > .cl-dock-row:first-child { display: flex; }
  .cl-dock-row--line { margin-top: 0; order: 1; }
  .cl-dock-row--touch { order: 3; }
  .cl-dock-row--more { order: 4; display: none; }
  .cl-dock--on .cl-dock-row--more { display: flex; }
  .cl-dock-more { order: 5; display: grid; gap: var(--s-2); margin-top: var(--s-2); }
  .cl-dock .cl-dock-details { width: 100%; box-sizing: border-box; min-height: 4.5rem; padding: var(--s-2); font: inherit; resize: vertical; }
  .cl-dock-row--meta { margin-top: 0; }
  .cl-dock-meta { display: grid; gap: 2px; }
  .cl-dock-meta--by { flex: 1 1 12rem; }
  .cl-dock-hint { order: 6; }
  .pdx-search { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; margin-bottom: var(--s-2); } /* fetch-921 (Jack: "can the oldest/hottest move to beside the queue search bar"): the search and the Queue's sort share one bar; a narrow phone wraps the pair under the input */
  .pdx-search-in { flex: 1 1 9rem; min-width: 0; box-sizing: border-box; min-height: var(--control-height-sm); padding: 0 var(--s-2); border: 1px solid var(--hair); border-radius: var(--r-m); font: inherit; background: var(--surface-card); color: var(--ink); }
  .pdx-search .pdx-list-tools .btn { min-height: var(--control-height-sm); padding-top: 0; padding-bottom: 0; } /* fetch-1023: the pair stands as tall as the compact input, so the bar reads as one control */
  .pdx-list-h { display: flex; align-items: center; gap: var(--s-2); flex-wrap: nowrap; min-height: 32px; margin: var(--s-2) 0 var(--s-1); color: var(--ink); font-size: var(--t-body); } /* fetch-919: the scope, its count and the sort on ONE line; fetch-921: the sort moved into the search bar - the header is the title and its count */
  .pdx-list-t { white-space: nowrap; }
  .pdx-list-n, .pdx-list-x { color: var(--muted); font-weight: 600; white-space: nowrap; }
  .pdx-list-tools { margin-left: auto; display: inline-flex; gap: 0; flex: 0 0 auto; } /* fetch-914: the Queue's sort - Oldest first / Hottest first; fetch-919: a segmented pair; fetch-921: at the right end of the search bar */
  .pdx-list-tools .btn { border-radius: 0; white-space: nowrap; }
  .pdx-list-tools .btn:first-child { border-radius: var(--r-s) 0 0 var(--r-s); }
  .pdx-list-tools .btn + .btn { margin-left: -1px; border-radius: 0 var(--r-s) var(--r-s) 0; } /* fetch-914: the Queue's sort - Oldest first / Hottest first */
  @media (min-width: 641px) { .pdx-list { position: sticky; top: var(--s-3); } .pdx-list-body { max-height: min(calc(var(--pdx-list-rows, 10) * var(--pdx-row-h, 4.2rem)), calc(100vh - 12rem)); overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; } } /* fetch-913 (Jack: "a box of 10 or so inquiries in view and you can scroll within the box"): the list is a box of about ten rows that scrolls inside itself and stays in view beside the record - the page no longer grows with the list. Below 641px the list is the page (the record replaces it). */
  .pdx-row { position: relative; display: flex; align-items: center; gap: var(--s-2); padding: var(--s-1) var(--s-2); border: 1px solid var(--hair); border-radius: var(--r-m); background: var(--surface-card); margin-bottom: var(--s-1); cursor: pointer; }
  .pdx-row.on { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold); }
  .pdx-row:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
  .pdx-row-main { flex: 1; min-width: 0; }
  .pdx-row-title { font-weight: 700; }
  .pdx-list-body .pdx-row-title { font-size: var(--t-body); } /* fetch-919 took the title a step up; fetch-921 (Jack: "the Queue tiles got a little bit too large") brings it back to body size - the sub line keeps 919's --t-mid, so the row lands a half step between 5.498 and 5.499 */
  @media (min-width: 641px) {.pdx-list-body .pdx-row-title, .pdx-list-body .pq-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } } /* fetch-1023: the narrower desktop navigation tile stays one title + one sub-line; phones keep wrapping requested venues, the open record carries the full facts, and aria-describedby keeps the complete line for assistive tech */
  .pdx-list-body .pq-sub { font-size: var(--t-mid); }
  /* fetch-913: the strength as a flame in the row's corner (leadFlame); cold = Unqualified: no flame. The label rides the title and a screen-reader span.
     fetch-1011 (Jack, 09-09: "Color coded for each venue (Red/yellow/blue/green) - Flames: 3 fills (Full/shaded/no fill) - each venue has its own color flame filled in according to the strength"):
     the COLOUR is the venue's - leadFlame sets the svg's color attribute from VENUE_COLORS, the calendar's (Roof red, Crane Bay yellow, Heirloom green, Off Premise blue; stone for no venue) -
     and the FILL is the strength: Strong full (with the glow and the slow flicker), Medium a lighter tint of the venue colour (Jack: "lighter tint"), Weak the outline only. Every rule reads
     currentColor, so no hex lives here. fetch-921's three-golds heat rail on the row's edge and the lit core are retired: the flame carries both facts, the venue chip beside the date names
     the venue in words, and the title, the sr-only text and the record head's badge keep the score - colour never carries the meaning alone. data-heat stays on the row as the hook. */
  .pdx-flame { position: absolute; top: var(--s-2); right: var(--s-2); line-height: 0; }
  .pdx-row--acts .pdx-flame { top: calc(var(--s-2) + 3px); } /* fetch-921: centred on the rail's line (24px) rather than hung from the row's top */
  .pdx-flame svg { display: block; width: 18px; height: 18px; overflow: visible; transform-origin: 50% 100%; }
  .pdx-flame-body { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; } /* warm (Weak): the outline in the venue's colour */
  .pdx-flame-multi-body { stroke-width: 1.6; stroke-linejoin: round; }
  .pdx-row[data-heat="hot"] .pdx-flame-body { fill: color-mix(in srgb, currentColor 42%, white); } /* hot (Medium): a lighter tint of the venue's colour */
  .pdx-row[data-heat="blazing"] .pdx-flame-body { fill: currentColor; } /* blazing (Strong): the full venue colour, a soft glow and a slow flicker */
  .pdx-row[data-heat="blazing"] .pdx-flame svg { filter: drop-shadow(0 0 3px color-mix(in srgb, currentColor 55%, transparent)); animation: pdxBlaze 1.9s ease-in-out infinite alternate; }
  .pdx-row[data-heat="blazing"] .pdx-flame--multi svg { filter: drop-shadow(0 0 3px color-mix(in srgb, var(--muted) 30%, transparent)); }
  @keyframes pdxBlaze { from { transform: scale(1); opacity: .86; } to { transform: scale(1.07); opacity: 1; } }
  @media (prefers-reduced-motion: reduce) { .pdx-row[data-heat="blazing"] .pdx-flame svg { animation: none; } }
  .pdx-row[data-heat] .pdx-row-title { padding-right: 28px; } /* the 18px flame and its 8px inset */
  /* fetch-916 pass two: the Queue row's quick actions — three icon doorways at the row's right; the flame keeps its corner (the rail leaves it a column). */
  .pdx-row-acts { display: flex; align-self: center; justify-content: center; flex: 0 0 auto; gap: var(--s-1); margin: 0 var(--s-6) 0 var(--s-1); } /* fetch-1023: a dedicated rail centers the quick actions vertically on the tile; the trailing space belongs to the flame */
  .pdx-qa { display: inline-flex; align-items: center; justify-content: center; width: 1.5rem; min-height: 1.5rem; padding: 0; color: var(--navy); } /* fetch-921 (Jack: "the quick action icons in the queue are not centered within their boxes"): the buttons no longer wear .btn--xs, whose 4px 10px padding out-ranked this padding: 0 and pushed every icon 10px to the right; a half step smaller too */
  .pdx-row--acts .pdx-row-title { line-height: 1.5rem; } /* the title line is as tall as the rail beside it, so the sub line runs the full width beneath and the row stays one title + one line; fetch-921: the Queue row fits the box's 4.2rem default again, so the :has() override of fetch-918 is gone */
  .pdx-qa .ci { display: block; }
  .pdx-list > .pdx-stage { margin: 0 0 var(--s-2); } /* fetch-1005: the stage-move confirm sits at the head of the list, above the scroll box, so the row you tapped stays in view */
  .pdx-rec-acts .btn { min-height: var(--control-height-sm); } /* fetch-916 pass two: the head's toolbar is compact — the Queue rows carry the verbs */
  .pdx-menu { position: relative; } /* fetch-919: the head's Actions menu - .hddm anchors to it */
  .pdx-menu-trigger { display: inline-flex; align-items: center; justify-content: center; width: var(--control-height-sm); min-width: var(--control-height-sm); height: var(--control-height-sm); padding: 0; list-style: none; }
  .pdx-menu-trigger::-webkit-details-marker { display: none; }
  .pdx-action-sheet { margin: 0 0 var(--s-3); } .pdx-action-sheet > .card { margin-bottom: 0; } /* fetch-919: the Action Items composer in place under the head */
  .vchip--plain { background: transparent; border-color: transparent; padding: 0; } /* fetch-913: the venue as a dot and a name inside a row - the pill was one of four */
  /* fetch-1016, Jack's review: each requested venue uses the familiar colored dot and name. */
  .pdx-requested-venues { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s-3); max-width: 100%; vertical-align: middle; }
  .pdx-requested-venues > [data-requested-venue] { min-width: 0; }
  .pdx-requested-venues .vchip { flex-wrap: nowrap; }
  .pdx-requested-unknown { min-width: 0; overflow-wrap: anywhere; color: var(--muted); font-size: var(--t-sub); }
  .pdx-group-h { display: flex; align-items: center; gap: var(--s-1); margin: var(--s-2) 0 var(--s-1); font-weight: 700; }
  .pdx-group-h .cal-dot { background: var(--brand-stone); }
  .pdx-group-h .cal-dot[data-stage="Lead"] { background: var(--ok-fg); }
  .pdx-group-h .cal-dot[data-stage="Hold"] { background: var(--pipe-orange); }
  .pdx-group-h .cal-dot[data-stage="Tentative"] { background: var(--pipe-blue); }
  .pdx-group-h .cal-dot[data-stage="Definite"] { background: var(--pipe-purple); }
  .pdx-group-h .cal-dot[data-stage="queue"] { background: var(--gold-dark); } /* fetch-1037: The Queue's search group */
  @media (min-width: 641px) { .pipe-venue { display: none; } }
  @media (max-width: 640px) {
    .pdx-venues { display: none; }
    .pdx-scopes { display: flex; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: var(--s-1); }
    .pdx-scope { flex: 0 0 136px; }
    .pdx-grid { display: block; }
    .pdx-grid.pdx-open .pdx-list { display: none; }
    .pdx-grid:not(.pdx-open) .pdx-record { display: none; }
  }
  @media (max-width: 1099px) { .pdx-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pdx-rec-grid { grid-template-columns: minmax(14rem, 16rem) minmax(0, 1fr); } .pdx-rail--right { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-3); align-items: start; } .pdx-rail--right .card { margin-bottom: 0; } } /* fetch-904: r2's mid width - two columns, the right rail below as three cards */
  @media (max-width: 1099px) { .pdx-rec-grid--log { grid-template-columns: minmax(0, 1fr); } }
  @media (max-width: 1199px) { .pdx-record .pdx-rec-grid--integrated .pdx-rail--right { display: block; } } /* fetch-1023: the inquiry's final Related section stays full-width; only booked/event rails become card grids */
  @media (max-width: 640px) { .pdx-rec-head { flex-direction: column; align-items: stretch; } .pdx-rec-acts { justify-content: flex-start; } .pdx-rec-grid { display: block; } .pdx-rail--right, .pdx-record .pdx-rail--right { display: block; } .pdx-rail--right .card, .pdx-record .pdx-rail--right .card { margin-bottom: 10px; } } /* fetch-904: a phone stacks the columns; ticket 3 makes the sheet */
  @media (max-width: 640px) {
    .pdx-sheet-bar { position: sticky; top: 0; z-index: 6; display: flex; background: var(--bg); border-bottom: 1px solid var(--hair); margin-bottom: 0; }
    .pdx-sheet-title { display: block; flex: 1; min-width: 0; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .pdx-segs { display: flex; position: sticky; top: 44px; z-index: 6; gap: var(--s-1); padding: var(--s-1) 0 var(--s-2); margin-bottom: var(--s-3); background: var(--bg); }
    .pdx-seg { flex: 1; min-height: 40px; border: 1px solid var(--hair); border-radius: var(--r-m); background: var(--surface-card); font: inherit; font-weight: 700; color: var(--ink); cursor: pointer; }
    .pdx-seg.on { background: var(--navy); color: var(--surface-card); border-color: var(--navy); }
    .pdx-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pdx-menu .hddm { left: 0; right: auto; } /* fetch-919: the head menu opens under its left-aligned summary on a phone */
    .pdx-row--acts { flex-wrap: wrap; } .pdx-row-main { display: flex; flex-direction: column; flex-basis: 100%; } .pdx-row-acts { order: 9; justify-content: center; width: 100%; margin: var(--s-1) 0 0; } .pdx-qa { width: var(--control-height-touch); min-height: var(--control-height-touch); } .pdx-rec-acts .btn { min-height: var(--control-height-touch); } .pdx-menu-trigger { width: var(--control-height-touch); min-width: var(--control-height-touch); height: var(--control-height-touch); } /* fetch-1023: phone actions center beneath the tile copy and every target stays 44px */
    .pdx-record[data-seg="activity"] .pdx-rec-card > .pdx-rec-head, .pdx-record[data-seg="related"] .pdx-rec-card > .pdx-rec-head { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; } /* fetch-916: the summary body under the head is hidden on these segments */
    .pdx-record .pdx-rail--left { display: none; }
    .pdx-record[data-seg="summary"] .pdx-summary { display: block; }
    .pdx-record[data-seg="summary"] .pdx-rec-grid { display: none; }
    .pdx-record[data-seg="activity"] .pdx-summary, .pdx-record[data-seg="activity"] .pdx-rail--right { display: none; }
    .pdx-record[data-seg="activity"] .pdx-rec-grid { display: block; }
    .pdx-record[data-seg="related"] .pdx-summary, .pdx-record[data-seg="related"] .pdx-rec-main { display: none; }
    .pdx-record[data-seg="related"] .pdx-rec-grid { display: block; }
    .pdx-record[data-seg="related"] .pdx-rec-grid--integrated .pdx-rail--right > .pdx-section { margin-top: 0; padding-top: 0; border-top: 0; }
    .pdx-record[data-seg="related"] .pdx-related-empty { display: block; }
    .btn.evt-task-action, .btn.cl-row-act { width: var(--control-height-touch); min-width: var(--control-height-touch); height: var(--control-height-touch); min-height: var(--control-height-touch); }
    .evt-task-row { flex-direction: column; }
    .evt-task-actions { width: 100%; }
  } /* fetch-905: r2's sheet - the bar and the segments stick, one region shows at a time, Back returns the list where it was */
  .cal-agday { margin-bottom: var(--s-2); }
  .cal-agday .cal-chip { display: block; margin: var(--s-1) 0; }
  .cal-agday-h { align-items: baseline; margin-bottom: var(--s-1); }
  .svy-offrow { justify-content: center; margin-top: 8px; }
  @media (max-width: 640px) {
    /* 1 · card headers: the title takes its own line, controls wrap below. Fixes the
       one-character-per-line crush (Labor actuals): .row > div { min-width:0 } out-specifies
       .stf-grow's min-width, so the title column collapsed instead of wrapping. */
    .stf-head > :first-child { flex-basis: 100%; min-width: 0; }
    /* 2 · wide tables: one-line rows, names truncate instead of colliding with the next
       column, sideways scroll keeps the numbers reachable. */
    .x-scroll .fin-table td, .x-scroll .fin-table th { white-space: nowrap; }
    .x-scroll .fin-table td strong { display: inline-block; max-width: 44vw; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; }
    /* 3 · chip rows: one scrolling line instead of a three-row stack. fetch-939 moved this pair
       into the page-header's own phone block below — the base .pgh-chips rule is declared AFTER
       this media query, so an override here loses the cascade and the chips wrapped to 104px. */
    /* 4 · calendar controls: the standalone Today button and the Day/Week/Month selector hide
       (phone is Week, always); the rest of the period bar is styled with the header, below. */
    .cal-todaybtn, #calModeSel { display: none; }
    /* fetch-1046 (Jack): dates are context, event names are the work. The old 16px date over a
       9.5px event inverted that hierarchy on both Sales and Ops; event rows also missed the
       portal's phone touch-target floor. This shared agenda rule fixes both routes. */
    .cal-agday { padding: var(--s-3); }
    .cal-agday-h { margin-bottom: var(--s-2); }
    .cal-agday-h strong { color: var(--muted); font-size: var(--t-sub); font-weight: 600; line-height: 1.35; }
    .cal-agday .cal-chip { box-sizing: border-box; font-size: var(--t-body); line-height: 1.35;
      min-height: var(--control-height-touch); padding: var(--s-2) var(--s-3); overflow-wrap: anywhere; }
    .cal-agday .cal-chip-venue { display: block; margin-top: var(--s-1); font-size: var(--t-sub); }
    /* fetch-510 (Jack: "Multi bubble problem can be solved on this page + the wrapping
       issues") · Reports: the 13-report chip stack becomes the #3 primitive — each pickbar
       row is ONE scrolling line — the presets row too, and the actions row (Pace/CSV/Print)
       drops below the title and WRAPS instead of clipping Print off the right edge. */
    .rpt-pickbar { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: var(--s-1); }
    .rpt-pickbar .rpt-gchip, .rpt-pickbar .rpt-rchip { flex: 0 0 auto; white-space: nowrap; }
    .rpt-presets { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: var(--s-1); }
    .rpt-presets .rpt-chip { flex: 0 0 auto; white-space: nowrap; }
    .row:has(> .rpt-actions) { flex-wrap: wrap; } /* .row is no-wrap by default; :has is already load-bearing elsewhere (fetch-357) */
    .rpt-actions { margin-left: 0; flex-basis: 100%; flex-wrap: wrap; margin-top: var(--s-2); }
    /* 5 · summary tiles slim down; salesperson chips give way to a select. */
    .brief-hero { padding: var(--s-3) var(--s-4); border-radius: var(--r-m); }
    .brief-headline { font-size: var(--t-body); margin-top: var(--s-2); }
    .svy-row .btn-lbl { display: none; }
  }
  @media (max-width: 560px) {
    .dash-stats { grid-template-columns: repeat(2, 1fr); }
    .wsbar { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
    .wsbar::-webkit-scrollbar { display: none; }
  }

/* fetch-150: post-login boot splash — the wordmark fades in while loadAll runs */
#bootSplash{position:fixed;inset:0;z-index:600;background:radial-gradient(1200px 600px at 50% 38%, #1d2b45 0%, #152238 55%, #0e1726 100%);display:flex;align-items:center;justify-content:center;opacity:1;transition:opacity .6s ease}
#bootSplash.bs-out{opacity:0;pointer-events:none}
#bootSplash .bs-inner{text-align:center}
#bootSplash .bs-word{font-family:'Cormorant Garamond',Georgia,serif;font-size:44px;font-weight:700;color:#f4efe4;letter-spacing:14px;margin-left:14px}
#bootSplash .bs-word span{opacity:0;display:inline-block;animation:bsIn .9s cubic-bezier(.2,.7,.3,1) forwards}
#bootSplash .bs-sub{font-size:12px;letter-spacing:6px;color:#c9a227;font-weight:600;margin-top:6px;margin-left:6px;opacity:0;animation:bsIn 1s ease .75s forwards}
#bootSplash .bs-load{width:120px;height:2px;margin:26px auto 0;background:rgba(255,255,255,.12);border-radius:2px;overflow:hidden;position:relative}
#bootSplash .bs-load::after{content:"";position:absolute;left:-40%;top:0;bottom:0;width:40%;background:#c9a227;border-radius:2px;animation:bsSweep 1.1s ease-in-out infinite}
@keyframes bsIn{from{opacity:0;transform:translateY(10px) scale(.96)}to{opacity:1;transform:none}}
@keyframes bsSweep{0%{left:-40%}60%{left:100%}100%{left:100%}}
@media (prefers-reduced-motion: reduce){#bootSplash .bs-word span,#bootSplash .bs-sub{animation-duration:.01s;animation-delay:0s}}

/* fetch-224 (+225 fix): header dropdown menus (Documents / ⋯). The event sub-tab
   strip (.evt-anchors) is position:sticky with z-index:30 and was painting OVER the
   open menu — the panel's z-index was trapped inside the header card's stacking
   context. Elevating the whole card while a menu is open puts the panel on top. */
details.hdd>summary{list-style:none;cursor:pointer}
details.hdd>summary::-webkit-details-marker{display:none}
details.hdd[open]>summary{box-shadow:0 0 0 2px var(--gold,#c09267) inset}
details.hdd[open]{z-index:300}
.card:has(details.hdd[open]){position:relative;z-index:300}
/* fetch-226: stage-aware suggested section chip in the event anchors bar */
.evt-anchors a.sugg{background:var(--gold,#c09267);color:#fff;box-shadow:0 1px 4px rgba(56,74,97,.22)}
.evt-anchors a.sugg:hover{background:var(--gold-dark,#a87b52);color:#fff}
  /* ===== fetch-405: One Portal Wave 1 skeleton primitives (pilot: Roster). Shared — every screen adopts as touched. ===== */
  .hero-facts { display: flex; gap: 26px; flex-wrap: wrap; align-items: baseline; margin: 2px 0 14px; padding: var(--s-3) var(--s-4); background: var(--wash); border: 1px solid var(--hair); border-radius: var(--r-m); }
  .hf { text-align: center; } /* numbers center over their labels (Jack, 2026-08-05) */
  .hf-val { font-size: 21px; font-weight: 700; color: var(--text-heading); font-variant-numeric: tabular-nums; line-height: 1.1; }
  .hf-val .hf-of { font-size: 13px; font-weight: 600; color: var(--muted); }
  .hf-gold .hf-val { color: var(--brand-gold-dark); } /* gold like jewelry: max ONE per band */
  .hf-label { font-size: var(--t-sub); color: var(--muted); font-weight: 600; margin-top: 1px; }
  .ctx-row { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin: 0 0 var(--s-3); }
  .ctx-lead { font-size: var(--t-sub); font-weight: 600; color: var(--muted); }
  .ctx-chip { display: inline-flex; align-items: center; gap: 7px; font-size: var(--t-sub); font-weight: 600; color: var(--navy); background: #fff; border: 1px solid var(--line); border-radius: 99px; padding: 4px 6px 4px 11px; }
  .ctx-chip--scope { background: var(--wash); border-style: dashed; padding-right: 11px; }
  .ctx-x { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; background: var(--hair); color: var(--muted); font-size: 11px; line-height: 1; cursor: pointer; border: none; padding: 0; }
  .ctx-x:hover { background: var(--bad-bg); color: var(--bad-fg); }
  .card.card--action { border-left: 3px solid var(--gold); }      /* asks for work */
  .card.card--status { border-left: 3px solid var(--card-accent, var(--navy)); } /* being monitored */
  .card.card--flush { padding: 0; }
  .card-kicker { font-size: var(--t-label); font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
  .card.card--action .card-kicker { color: var(--brand-gold-dark); }
  .empty-state .es-body { color: var(--muted); line-height: 1.5; margin-bottom: 14px; }
  .empty-state--inline { margin: var(--s-3) auto; padding: 18px 12px; }
  .empty-state--inline .es-emoji { font-size: 24px; margin-bottom: 4px; }
  .empty-state--inline .es-title { font-size: var(--t-body); }
  .badge.badge--trainer { background: #fbf3e2; color: var(--brand-gold-dark); border: 1px solid var(--brand-gold-mid); font-size: 10.5px; margin-left: 6px; vertical-align: 1px; }
  .badge.badge--training { background: var(--warn-bg); color: var(--warn-fg); border: 1px solid var(--warn-fg); font-size: 10.5px; margin-left: 6px; vertical-align: 1px; }
  .btn.btn--xs { padding: 4px 10px; font-size: var(--t-sub); }
  .bday-shout { margin-left: auto; align-self: center; flex-shrink: 0; } /* fetch-435/436: birthday shout-out button OR "shouted out" badge sits at the row's end */
  .form-sec { margin-bottom: var(--s-4); padding-bottom: var(--s-4); border-bottom: 1px solid var(--hair); }
  .form-sec:last-of-type { border-bottom: none; margin-bottom: 0; }
  .fs-title { font-size: var(--t-label); font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--brand-gold-dark); margin-bottom: 10px; }
  .fs-hint { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--muted); font-size: var(--t-sub); margin-left: 8px; }
  .chip-ck { position: relative; display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); border-radius: 99px; padding: 5px 12px; font-size: 12.5px; font-weight: 600; color: var(--muted); cursor: pointer; background: #fff; user-select: none; }
  .chip-ck input { position: absolute; opacity: 0; pointer-events: none; }
  .chip-ck.on { border-color: var(--navy); color: var(--navy); background: var(--wash); }
  .chip-ck.on::before { content: "\2713"; font-weight: 700; font-size: 11px; }
  .chip-ck:focus-within { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
  .chip-wrap { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
  .pos-panel { border: 1px solid var(--hair); border-radius: var(--r-m); background: var(--wash); padding: 10px; max-height: 132px; overflow: auto; display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
  .form-actions { display: flex; gap: 8px; align-items: center; margin-top: var(--s-4); padding-top: 14px; border-top: 1px solid var(--hair); flex-wrap: wrap; }
  .form-danger { margin-left: auto; display: flex; align-items: center; gap: 10px; }
  .form-danger .fd-note { font-size: var(--t-sub); color: var(--muted); }
  .fm-title { font-size: var(--t-section); font-weight: 700; }
  .fm-first { margin-top: var(--s-3); }
  .fm-bday { display: flex; gap: 6px; }
  .fm-addpos { margin-top: 6px; }
  .fm-w280 { max-width: 280px; }
  .qrow-tools { display: flex; gap: 6px; opacity: .4; transition: opacity .12s ease; } /* fetch-419: attention budget — row tools whisper until you're on the row (still tappable on touch) */
  .row:hover .qrow-tools, .qrow-tools:focus-within { opacity: 1; }
  .qdrag { cursor: grab; color: var(--muted); padding: 2px 6px; border-radius: 6px; user-select: none; flex-shrink: 0; } /* fetch-420 (Jack): drag handle replaces the arrows */
  .qdrag:hover, .qdrag:focus-visible { background: var(--hair); color: var(--navy); }
  .qrow-over { background: var(--wash); box-shadow: inset 0 2px 0 var(--gold); }
  .rd-today { background: #fffaf3; box-shadow: inset 3px 0 0 var(--gold); } /* fetch-413: day-of event row (div rows) */
  tr.rd-today { background: none; box-shadow: none; } /* fetch-416 (Jack: highlight "didn't turn out right") — tables paint per-cell */
  tr.rd-today > td { background: #fffaf3; }
  tr.rd-today > td:first-child { box-shadow: inset 3px 0 0 var(--gold); }
  .rd-today--tint { background: #fffaf3; } /* day-of tint for elements carrying their own left accent (bar cards) */
  .tl-row { border-radius: 6px; }
  .tl-row:hover { background: var(--wash); } /* fetch-416 (Jack: "save that UX") — list rows hover like the Readiness table */
  .tl-row.rd-today:hover { background: #fdf3e3; }
  .rd-detail { display: block; font-size: var(--t-label); color: var(--bad-fg); opacity: .85; margin-top: 1px; white-space: nowrap; }
  .rd-detail--warn { color: var(--warn-fg); }

  /* fetch-517 — THE PHONE ZOOM. Jack: "we have zoom issue when i click the notifications button
     in phone view."
     It is not the bell. iOS Safari zooms the whole page whenever you focus a form control whose
     computed font-size is under 16px — that is the zoom. Swept every workspace and tab at 390px:
     48 controls were under 16px (homeRole 12.5, dashRange/dashTrade 13, the admin filters 13,
     and ~40 more at 14 across My Work, staffing, linen, recaps, menu, invoices, scheduling).
     One media query beats 48 edits. The `body` prefix is deliberate: .acted input (12.5px) is
     declared in a per-render <style> INSIDE the Action Items table, which lands after this
     block in document order, so equal specificity would lose. Desktop is untouched.
     RATCHET: this raises px-font by design — a deliberate adjust, noted in ui-debt.json. */
  @media (max-width: 640px) {
    body input:not([type="checkbox"]):not([type="radio"]),
    body select,
    body textarea,
    body .sel,
    /* fetch-1038: this arm carried ONE :not() and was (0,2,2). The base form primitive,
       `.field input:not([type="checkbox"]):not([type="radio"])`, is (0,3,1) and sets 14px
       with no media query — three classes beat two, so the 16px above lost on every .field
       control in the portal, which is nearly every form. Adding the second :not() makes this
       (0,3,2) and it wins. Same (0,3,1) trap fetch-874 and fetch-892 recorded for padding;
       this is the font-size instance of it. Selector-only edit: no new px declaration, so the
       UI-debt ratchet is unmoved. */
    body .field input:not([type="checkbox"]):not([type="radio"]),
    body .field select,
    body .field textarea,
    body .brief-role select,
    body .user-filterbar input,
    body .user-filterbar select,
    body .build-evt input,
    body .build-evt select,
    body .pbox-top input#pSearch,
    /* fetch-1038: `#rptCustom select, #rptCustom input` is (1,0,1) and sets --t-body (14px)
       with no media query — an id outranks every class-level rule here, the same reason
       #pSearch above is named explicitly. Found by the gate once it was taught to read
       portal.css; the custom report builder zoomed on focus like everything else. */
    body #rptCustom input,
    body #rptCustom select,
    body .inv-cnt-input,
    body .linen-doc input.linen-qty,
    body .acted input,
    body .cmd-input,
    body .tcm-in { font-size: 16px; }
  }
  /* fetch-604: Notes rebuild. Classes rather than inline styles so the UI-debt
     ratchet falls instead of rising; every value is a token. */
  .note-segs { display: flex; gap: var(--s-1); margin-top: var(--s-2); flex-wrap: wrap; }
  .note-head { display: flex; align-items: flex-start; gap: var(--s-2); }
  .note-head-main { flex: 1; min-width: 0; }
  .note-acts { display: flex; gap: var(--s-1); flex-shrink: 0; }
  .note-acts .btn { padding: var(--s-1) var(--s-2); }
  .note-meta { color: var(--muted); font-size: var(--t-sub); }
  .note-sub { color: var(--muted); font-size: var(--t-sub); }
  .note-body { margin-top: var(--s-1); font-size: var(--t-body); white-space: pre-wrap; }
  .note-shots { margin-top: var(--s-2); display: flex; gap: var(--s-1); flex-wrap: wrap; }
  .note-shots img { max-height: 88px; border-radius: var(--r-s); }
  .note-attr { color: var(--muted); font-size: var(--t-sub); margin-top: var(--s-2); }
  .note-field { margin-top: var(--s-2); }
  .note-actions { margin-top: var(--s-3); }
  .note-pinned { border-left: 3px solid var(--gold); }
  /* The icon names the object; colour names the state. */
  .note-st-request     { color: var(--info-fg); }
  .note-st-in_progress { color: var(--warn-fg); }
  .note-st-completed   { color: var(--ok-fg); }
  .note-st-declined    { color: var(--bad-fg); }
  /* fetch-869: the .wk-* island (fetch-695..701 Work workspace) deleted with its page - Phase 6 one-surface; nothing outside the Work renderers ever emitted a wk- class */


  /* ==========================================================================================
     fetch-801 — THE PAGE-HEADER PATTERN. Extracted from Codex’s Action Items reshape.
     Spec + the seven rules + migration order: docs/page-header-pattern.md
     INERT ON ARRIVAL: no surface calls these classes yet, so this changes nothing on screen.
     ========================================================================================== */
/* ==========================================================================================
   THE PAGE-HEADER PATTERN — extracted from Codex's Action Items reshape so it stops being a
   one-off and becomes the house rule.

   The rules it encodes, which are the actual answer to "we have no set way of doing buttons
   and dropdown filters":
     1. ONE card holds the header. Not three floating ones with gaps between them.
     2. A real title + ONE line of context. No instructional prose in a header.
     3. ONE solid primary action, right-aligned. Everything else goes behind an overflow.
     4. Scope = tabs with counts. Active gets a GOLD underline — gold is jewelry, and a
        selected scope is exactly the "restrained active indicator" the brand rule names.
     5. Quick filters = ONE connected segmented control with counts inline. Not five loose
        pills that read as five unrelated buttons.
     6. Everything else lives behind a single "Filters" button. Native selects leave the
        header — that is what made the old strip look like a form.
     7. A muted meta line states what is currently shown.

   Built from existing tokens only. .btn / .btn-primary keep their current look so this sits
   beside unmigrated screens without a seam.
   ========================================================================================== */


.pgh { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-l);
      padding: var(--s-5); margin-bottom: var(--s-4); }

.pgh-top { display: flex; align-items: flex-start; gap: var(--s-4); flex-wrap: wrap; }
.pgh-titles { flex: 1 1 260px; min-width: 0; }
.pgh-h { font-size: var(--t-title); font-weight: 700; color: var(--text-heading); margin: 0; }
.pgh-sub { font-size: var(--t-sub); color: var(--muted); margin-top: var(--s-1); }
.pgh-acts { display: flex; align-items: center; gap: var(--s-2); flex-shrink: 0; }

/* the overflow control — square, quiet, never competes with the primary */
.pgh-more { width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center;
           background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-s);
           color: var(--muted); cursor: pointer; font-size: var(--t-title); line-height: 1;
           padding: 0 0 var(--s-1); }
.pgh-more:hover { border-color: var(--muted); color: var(--ink); }

/* SCOPE TABS — count sits beside the label, muted, so the label stays the thing you read */
.pgh-tabs { display: flex; gap: var(--s-5); margin-top: var(--s-4);
           border-bottom: 1px solid var(--line); overflow-x: auto; }
.pgh-tab { appearance: none; background: none; border: 0; cursor: pointer; white-space: nowrap;
          padding: var(--s-2) 0 var(--s-3); font-size: var(--t-body); color: var(--muted);
          border-bottom: 2px solid transparent; margin-bottom: -1px; }
.pgh-tab:hover { color: var(--ink); }
.pgh-tab[aria-selected="true"] { color: var(--text-heading); font-weight: 600;
                                border-bottom-color: var(--brand-gold-mid); }
.pgh-tab .n { color: var(--muted); font-weight: 400; margin-left: var(--s-1); }

/* CONTROL ROW — search grows, the rest keep their size */
.pgh-row { display: flex; align-items: center; gap: var(--s-2); margin-top: var(--s-4); flex-wrap: wrap; }
.pgh-search { flex: 1 1 260px; display: flex; align-items: center; gap: var(--s-2);
             background: var(--wash); border: 1px solid var(--line); border-radius: var(--r-m);
             padding: var(--s-2) var(--s-3); min-width: 0; }
.pgh-search input { flex: 1; border: 0; background: none; outline: none; min-width: 0;
                   font-size: var(--t-body); color: var(--ink); }
.pgh-search svg { flex-shrink: 0; color: var(--muted); }

/* SEGMENTED — one container, so five filters read as one control */
.pgh-seg { display: inline-flex; background: var(--wash); border: 1px solid var(--line);
          border-radius: var(--r-m); padding: 3px; gap: 2px; }
.pgh-seg button { appearance: none; border: 0; background: none; cursor: pointer; white-space: nowrap;
                 padding: var(--s-1) var(--s-3); border-radius: var(--r-s);
                 font-size: var(--t-sub); color: var(--muted); }
.pgh-seg button .n { margin-left: var(--s-1); }
.pgh-seg button[aria-pressed="true"] { background: var(--paper); color: var(--text-heading);
                                      font-weight: 600; box-shadow: 0 1px 2px rgba(36,43,66,.10); }
.pgh-seg button.bad[aria-pressed="true"] { color: var(--bad-fg); }

.pgh-filters { display: inline-flex; align-items: center; gap: var(--s-2); white-space: nowrap; }
/* fetch-829: the door shows when something non-default is applied behind it (rule 6 + rule 7) */
/* fetch-939 · ONE HEADER PER PAGE (Jack): the period bar and the filter chips are ROWS OF THIS CARD
   now, not loose rows under it. On a 390px phone those two rows cost 110px before the content began.
   .pgh-chip is the calendar's filter chip promoted to the primitive (fetch-129's look, on tokens): the
   dot is the portal's .vdot and its colour is whatever --vc the caller set - venueColor(), always. */
.pgh-nav { display: flex; align-items: center; gap: var(--s-2); margin-top: var(--s-4); flex-wrap: wrap; }
.pgh-navlabel { font-family: 'Cormorant Garamond', Georgia, serif; font-size: var(--t-section); font-weight: 700;
                color: var(--navy); background: none; border: 0; margin: 0; padding: 0 var(--s-1); cursor: pointer; }
.pgh-navlabel:hover { color: var(--gold-dark); }
.pgh-chips { display: flex; gap: var(--s-2); margin-top: var(--s-2); flex-wrap: wrap; }
.pgh-chip { display: inline-flex; align-items: center; gap: var(--s-1); padding: 5px 12px; border: 1.5px solid var(--line);
            border-radius: 999px; background: var(--paper); font-family: inherit; font-size: var(--t-sub); font-weight: 600;
            color: var(--ink); cursor: pointer; transition: border-color .12s, transform .12s; }
/* fetch-942: --vc is OPTIONAL. A chip with no venue dot - the Managers view Request-offs
   toggle - still needs hover and selected states, so both fall back to the action colour. */
.pgh-chip:hover { border-color: var(--vc, var(--action-primary)); transform: translateY(-1px); }
/* fetch-939 (review): the SELECTED chip's text is --vc-ink, which the builder sets per chip from the
   fill's own luminance - white where white clears 4.5:1, --ink where it does not. Crane Bay's
   #d9a800 carried white at 2.20:1 on origin/main's .cal-vchip and this ticket was about to make
   that the portal's ONE chip. The venue colours themselves do not move (Jack: "the same colors as
   whats on the calendar"); only the text on top of them does. --paper stays the default so a
   caller that sets no ink behaves exactly as before. */
.pgh-chip.on { background: var(--vc, var(--action-primary)); border-color: var(--vc, var(--action-primary)); color: var(--vc-ink, var(--paper)); }
.pgh-chip .vdot { width: 7px; height: 7px; border-radius: 50%; background: var(--vc); flex: 0 0 auto; display: inline-block; }
.pgh-chip.on .vdot { background: var(--vc-ink, var(--paper)); }
/* fetch-939 (review): the pipeline switch is not a filter, and it used to say so with 6px of air
   (an inline margin the declarative chips slot had nowhere to put). The gap is a token now. */
.pgh-chip--sep { margin-left: var(--s-2); }
.pgh-filters--on { border-color: var(--brand-gold-mid); color: var(--text-heading); font-weight: 600; }
.pgh-search-x { border: 0; background: none; cursor: pointer; color: var(--muted);
               font-size: var(--t-section); line-height: 1; padding: 0 var(--s-1); flex-shrink: 0; }
.pgh-meta { margin-top: var(--s-3); font-size: var(--t-sub); color: var(--muted); }
.pgh-meta strong { color: var(--ink); font-weight: 600; }

@media (max-width: 640px) {
  .pgh { padding: var(--s-4); }
  .pgh-acts { width: 100%; }
  .pgh-acts .btn-primary { flex: 1; min-height: var(--control-height-touch); } /* the one action is thumb-width on a phone */
  .pgh-more { width: var(--control-height-touch); height: var(--control-height-touch); }
  .pgh-search { min-height: var(--control-height-touch); box-sizing: border-box; }
  .pgh-search-x { width: var(--control-height-touch); min-height: var(--control-height-touch); }
  /* Tabs WRAP on a phone rather than scroll: four scope tabs cut mid-word ("St…") read as
     broken, and two horizontally-scrolling rows stacked is one too many. Wrapping hides nothing. */
  /* fetch-939 · the period bar and the chip row on a phone. These MUST live here, after the base
     .pgh-nav / .pgh-chips rules — the calendar's old overrides sat in an earlier media block and
     lost the cascade, which wrapped the chips onto three rows and made the card TALLER than the
     loose rows it replaced. The chips scroll as one line; the period label takes the middle and
     the arrows pin to the edges (fetch-501: the date itself is the Today button on a phone). */
  /* fetch-939 (review): the chip row scrolls, so it earns the SAME fade edge .pgh-seg gets below -
     at 390px the fifth venue is clipped mid-word and read as "chopped off", not "there is more".
     Same mask, same 24px, and the scrollbar hides the way every other phone scroller in this file
     hides it (.tabslot .tabbar, .tc-chips, .wsbar, .evt-anchors). black = fully opaque to a mask,
     not a design colour. */
  .pgh-chips { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: var(--s-1);
              scrollbar-width: none;
              mask-image: linear-gradient(to right, black calc(100% - 24px), transparent);
              -webkit-mask-image: linear-gradient(to right, black calc(100% - 24px), transparent); }
  .pgh-chips::-webkit-scrollbar { display: none; }
  .pgh-chips .pgh-chip { flex: 0 0 auto; white-space: nowrap; }
  .pgh-nav { flex-wrap: nowrap; margin-top: var(--s-3); }
  /* fetch-942: the period arrows are a THUMB TARGET. .schd-controls .btn guaranteed 44px on a phone
     (fetch-697) and moving the Manager week controls into this slot silently dropped them to 42 —
     probe697 caught it. The floor belongs on the slot, not on one screen's old class. */
  .pgh-nav .btn { min-height: var(--control-height-touch); min-width: var(--control-height-touch); }
  .pgh-nav .pgh-navlabel { order: 0; flex: 1; text-align: center; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .pgh-nav [data-calnav="-1"] { order: -1; }
  .pgh-nav [data-calnav="1"] { order: 1; }
  .pgh-tabs { flex-wrap: wrap; gap: var(--s-2) var(--s-4); } /* fetch-938: row-gap tightened - with three tabs the wrapped row sat 16px under the selected tab's gold bar */
  /* black here is not a design colour: a mask only reads ALPHA, and black means "fully opaque".
     Using the keyword rather than a hex keeps the ratchet flat without gaming it.
     The segmented control keeps its single scroller, but earns a fade edge so a clipped item
     reads as "there is more" instead of "this is chopped off". */
  .pgh-seg { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch;
            mask-image: linear-gradient(to right, black calc(100% - 24px), transparent);
            -webkit-mask-image: linear-gradient(to right, black calc(100% - 24px), transparent); }
  .pgh-filters { flex: 1 1 auto; justify-content: center; min-height: var(--control-height-touch); }
}


/* fetch-943 · A+ Calendar. Opt-in compact layout; existing consumers keep their geometry. */
.pgh--compact { padding: var(--s-3); }
.pgh--compact .pgh-top { align-items: center; gap: var(--s-2); }
.pgh--compact .pgh-titles { flex: 1 1 100px; min-width: 0; }
.pgh--compact .pgh-h { font-family: Inter, sans-serif; font-size: var(--t-title); line-height: 1.2; }
.pgh--compact .pgh-meta { margin-top: var(--s-1); line-height: 1.35; }
.pgh--compact .pgh-acts { width: auto; flex: 0 1 auto; }
.pgh--compact .pgh-acts:empty { display: none; }
.pgh--compact .pgh-acts .btn-primary { flex: 0 1 auto; padding-inline: var(--s-3); }
.pgh--compact button, .pgh--compact select, .pgh--compact summary {
  min-height: var(--control-height-touch); min-width: var(--control-height-touch); box-sizing: border-box; }
.pgh--compact .pgh-nav { display: grid; grid-template-columns: var(--control-height-touch) minmax(0, 1fr) var(--control-height-touch) auto auto;
  gap: var(--s-1); margin-top: var(--s-2); }
.pgh--compact .pgh-nav > * { order: 0; min-width: 0; }
.pgh--compact .pgh-nav .btn { padding-inline: var(--s-2); }
.pgh--compact .pgh-nav .cal-todaybtn, .pgh--compact #calModeSel { display: block; }
.pgh--compact #calModeSel { width: auto; padding-inline: var(--s-2); font-size: var(--t-body); }
.pgh--compact .pgh-navlabel { font-family: Inter, sans-serif; font-size: var(--t-sub); line-height: 1.35;
  color: var(--text-heading); cursor: default; text-align: center; white-space: normal;
  overflow: visible; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.pgh-scope { display: flex; align-items: stretch; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-2); }
.pgh-picker { position: relative; flex: 1 1 100px; min-width: 0; }
.pgh-picker-trigger { display: flex; align-items: center; gap: var(--s-2); padding: var(--s-2) var(--s-3);
  border: 1px solid var(--line); border-radius: var(--r-s); background: var(--paper); color: var(--navy-dark);
  font-size: var(--t-sub); font-weight: 600; line-height: 1.35; cursor: pointer; list-style: none; }
.pgh-picker-trigger::-webkit-details-marker { display: none; }
.pgh-picker-trigger .vdot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--vc); flex: 0 0 auto; }
.pgh-picker-value { min-width: 0; overflow-wrap: anywhere; }
.pgh-picker-arrow { margin-left: auto; flex: 0 0 auto; }
.pgh-picker[open] .pgh-picker-trigger { border-color: var(--navy); }
.pgh-picker-list { position: absolute; top: calc(100% + var(--s-1)); left: 0; z-index: 20;
  width: max-content; min-width: 100%; max-width: min(260px, calc(100vw - var(--s-6) * 2));
  display: grid; gap: var(--s-1); padding: var(--s-2); background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r-m); box-shadow: 0 6px 20px rgba(36,43,66,.16); box-sizing: border-box; }
.pgh-picker-list .pgh-chip { width: 100%; justify-content: flex-start; border-radius: var(--r-s); white-space: normal;
  text-align: left; overflow-wrap: anywhere; }
.pgh-picker-list .pgh-chip:hover { transform: none; }
.pgh-picker-list .pgh-chip.on { background: var(--wash); color: var(--navy-dark); border-color: var(--vc); }
.pgh-picker-list .pgh-chip.on .vdot { background: var(--vc); }
.pgh-picker-list .pgh-chip.on::after { content: '✓'; margin-left: auto; }
.pgh-scope-choices { display: flex; flex: 1 1 136px; border: 1px solid var(--line); border-radius: var(--r-s); overflow: hidden; }
.pgh-scope-choice { flex: 1 1 0; background: var(--paper); color: var(--muted); border: 0; border-radius: 0;
  padding: var(--s-2); font: inherit; font-size: var(--t-sub); line-height: 1.35; cursor: pointer; }
.pgh-scope-choice + .pgh-scope-choice { border-left: 1px solid var(--line); }
.pgh-scope-choice[aria-pressed="true"] { background: var(--wash); color: var(--navy-dark); font-weight: 700;
  box-shadow: inset 0 -2px var(--brand-gold-mid); }
.pgh--compact .pgh-chips { flex-wrap: wrap; overflow: visible; mask-image: none; -webkit-mask-image: none; }
.pgh--compact .pgh-chip { white-space: normal; }
.pgh--compact :is(button, select, summary):focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
@media (min-width: 641px) {
  .pgh--compact { display: grid; grid-template-columns: minmax(300px, 1fr) minmax(260px, 1fr); gap: 0 var(--s-4); }
  .pgh--compact .pgh-top { grid-column: 1 / -1; }
  .pgh--compact .pgh-chips { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .pgh--compact #calModeSel { font-size: max(var(--t-body), 1rem); }
}
@media (max-width: 359px) {
  .pgh--compact .pgh-nav { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .pgh--compact .pgh-navlabel { grid-column: 2 / 4; }
  .pgh--compact .pgh-nav .cal-todaybtn { grid-column: 1 / 3; }
  .pgh--compact #calModeSel { grid-column: 3 / -1; }
}

/* fetch-944: an opt-in SINGLE control strip. Only the outer card scrolls on narrow screens. */
.pgh--strip { display: flex; align-items: center; flex-wrap: nowrap; gap: var(--s-2);
  min-width: 0; max-width: 100%; box-sizing: border-box; padding: var(--s-2);
  overflow-x: auto; scrollbar-width: thin; scrollbar-color: var(--muted) var(--wash);
  --pgh-left-shadow: transparent; --pgh-right-shadow: transparent;
  box-shadow: inset 12px 0 12px -10px var(--pgh-left-shadow), inset -12px 0 12px -10px var(--pgh-right-shadow); }
.pgh--strip.pgh--scroll-left { --pgh-left-shadow: var(--muted); }
.pgh--strip.pgh--scroll-right { --pgh-right-shadow: var(--muted); }
.pgh--strip::-webkit-scrollbar { height: var(--s-2); }
.pgh--strip::-webkit-scrollbar-thumb { background: var(--muted); border-radius: var(--r-s); }
.pgh--strip > .pgh-row, .pgh--strip > .pgh-nav, .pgh--strip > .pgh-chips {
  flex: 0 0 auto; flex-wrap: nowrap; width: auto; margin: 0; padding: 0;
  overflow: visible; mask-image: none; -webkit-mask-image: none; }
.pgh--strip .pgh-chips { gap: var(--s-1); }
.pgh--strip .pgh-seg button, .pgh--strip .pgh-chip { padding-inline: var(--s-2); }
.pgh--strip .pgh-seg { width: auto; overflow: visible; mask-image: none; -webkit-mask-image: none; }
.pgh--strip :is(button, select, summary) { flex: 0 0 auto; box-sizing: border-box;
  min-height: var(--control-height-touch); min-width: var(--control-height-touch); white-space: nowrap; }
.pgh--strip .pgh-nav .pgh-navlabel { flex: 0 0 auto; min-width: var(--control-height-touch);
  font-family: inherit; font-size: var(--t-sub); line-height: 1.4; font-variant-numeric: tabular-nums;
  overflow: visible; white-space: nowrap; padding-inline: var(--s-1); }
.pgh--strip :is(button, select, summary):focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

/* fetch-944: phones compare the complete manager week. Desktop keeps its existing grid.
   With no column gaps, a 320px viewport leaves seven 44px targets inside the border. */
.schd-phone-events, .schd-phone-only, .schd-phone-editing-day,
.schd-phone-form-title, .schd-phone-label { display: none; }
@media (max-width: 640px) {
  /* hidden would create a non-scrolling body scrollport and strand the sticky weekday row. */
  body:has(#managerScheduleStrip) { overflow-x: clip; }
  .schd-wrap { width: calc(100vw - var(--s-2)); max-width: none;
    margin-inline: calc((100% - (100vw - var(--s-2))) / 2); }
  .schd-wrap::after { display: none; }
  .schd { width: 100%; max-height: none; overflow: visible; }
  .schd .schd-row { min-width: 0; grid-template-columns: repeat(7, minmax(0, 1fr)); }
  .schd .schd-head { position: sticky; top: 0; z-index: 4; border-radius: var(--r-s) var(--r-s) 0 0; }
  .schd .schd-head > .schd-name, .schd .schd-band { display: none; }
  .schd .schd-cell { min-width: 0; text-align: center; white-space: normal; overflow-wrap: anywhere;
    font-size: var(--t-sub); line-height: 1.35; font-variant-numeric: tabular-nums; }
  .schd .schd-head > .schd-cell { padding: var(--s-2) 2px; font-size: var(--t-sub) !important; }
  .schd .schd-cell .muted { font-size: var(--t-sub) !important; }
  .schd .schd-personrow > .schd-name { grid-column: 1 / -1; grid-row: 1; position: static;
    border-right: 0; border-bottom: 1px solid var(--hair); padding: 0 var(--s-2);
    font-size: var(--t-sub); overflow-wrap: anywhere; }
  .schd .schd-personrow > .schd-cell:not(.schd-editing) { grid-row: 2; }
  .schd .schd-row:not(.schd-crewhead):not(.schd-head) .schd-cell {
    min-height: var(--control-height-touch); padding: var(--s-1) 2px; }
  .schd .schd-personrow > .schd-name .schd-pedit { flex: 0 0 var(--control-height-touch);
    min-width: var(--control-height-touch); min-height: var(--control-height-touch); margin-left: auto;
    padding: var(--s-2); color: var(--muted); }
  .schd .schd-crewhead > .schd-name, .schd .schd-addrow > .schd-name {
    grid-column: 1 / -1; position: static; min-width: 0; border-right: 0; font-size: var(--t-sub); }
  .schd .schd-crewhead > .schd-name { padding: var(--s-2); }
  .schd .schd-crewhead > .schd-cell, .schd .schd-addrow > .schd-cell { display: none; }
  .schd :is(.schd-time, .schd-code, .schd-state, .schd-ro, .schd-blank) {
    font-size: var(--t-sub); white-space: normal; overflow-wrap: anywhere; }
  .schd .schd-blank { color: var(--muted); }
  .schd .schd-phone-editing-day { display: flex; align-items: center; justify-content: center;
    background: var(--wash); color: var(--text-heading); box-shadow: inset 0 -2px var(--brand-gold-mid); }
  .schd .schd-row.schd-personrow > .schd-cell.schd-editing { grid-column: 1 / -1; grid-row: 3;
    width: 100%; min-width: 0; padding: var(--s-3); text-align: left; border-right: 0; }
  .schd .schd-phone-form-title { display: block; margin-bottom: var(--s-2);
    font-size: var(--t-body); font-weight: 700; color: var(--text-heading); }
  :is(.schd, .sched-agenda-editor) .schd-phone-label { display: block; margin: var(--s-2) 0 var(--s-1);
    font-size: var(--t-sub); font-weight: 600; }
  :is(.schd, .sched-agenda-editor) .schd-form { padding: 0; }
  :is(.schd, .sched-agenda-editor) .schd-form input { width: 100%; min-width: 0; min-height: var(--control-height-touch);
    font-size: max(var(--t-body), 1rem) !important; padding: var(--s-2) !important; }
  :is(.schd, .sched-agenda-editor) .schd-form .combo-in { margin-top: 0 !important;
    padding-right: calc(var(--control-height-touch) + var(--s-2)) !important; }
  :is(.schd, .sched-agenda-editor) .schd-form .combo-caret { width: var(--control-height-touch);
    margin-left: calc(var(--control-height-touch) * -1); }
  :is(.schd, .sched-agenda-editor) .schd-form > div { gap: var(--s-1) !important; margin-top: var(--s-2) !important; flex-wrap: wrap; }
  :is(.schd, .sched-agenda-editor) .schd-form button { min-width: var(--control-height-touch); min-height: var(--control-height-touch);
    font-size: var(--t-sub) !important; padding: var(--s-2) !important; white-space: normal; }
  .schd-phone-only { display: block; }
  .schd .schd-phone-events { display: block; border-bottom: 1px solid var(--line); background: var(--paper); }
  .schd-phone-events-title { display: flex; align-items: baseline; justify-content: space-between;
    flex-wrap: wrap; gap: var(--s-1) var(--s-2); padding: var(--s-2);
    font-size: var(--t-sub); font-weight: 700; color: var(--text-heading); }
  .schd-phone-events-title > span { font-weight: 400; color: var(--warn-fg); }
  .schd-phone-event-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
  .schd-phone-event-day { min-width: 0; min-height: var(--control-height-touch); padding: var(--s-1) 2px;
    border: 0; border-top: 1px solid var(--hair); border-right: 1px solid var(--hair); border-radius: 0;
    background: transparent; color: var(--ink); font: inherit; font-size: var(--t-sub); line-height: 1.35;
    font-variant-numeric: tabular-nums; white-space: normal; overflow-wrap: anywhere; cursor: pointer; }
  .schd-phone-event-day:last-child { border-right: 0; }
  .schd-phone-event-day > span { display: block; }
  .schd-phone-event-day > span:first-child { font-weight: 700; }
  .schd-phone-event-day[aria-expanded="true"] { background: var(--wash); box-shadow: inset 0 -2px var(--brand-gold-mid); }
  .schd-phone-gap { color: var(--warn-fg); font-size: var(--t-sub); font-weight: 600;
    white-space: normal; overflow-wrap: anywhere; }
  .schd-phone-event-details { min-width: 0; padding: var(--s-3); border-top: 1px solid var(--line);
    font-size: var(--t-sub); overflow-wrap: anywhere; }
  .schd-phone-event-group { margin-top: var(--s-3); }
  .schd-phone-event-group h4 { margin: 0 0 var(--s-1); font-size: var(--t-sub); color: var(--text-heading); }
  .schd-phone-event-link { display: block; width: 100%; min-width: 0; min-height: var(--control-height-touch);
    margin-top: var(--s-1); padding: var(--s-2); border: 1px solid var(--line); border-radius: var(--r-s);
    background: var(--surface-card); color: var(--ink); font: inherit; font-size: var(--t-sub); line-height: 1.45;
    text-align: left; white-space: normal; overflow-wrap: anywhere; cursor: pointer; }
  .schd-phone-event-link > span { display: block; }
  .schd-phone-event-link > span:first-child { font-weight: 600; }
  .schd-phone-event-link > span + span { color: var(--muted); font-variant-numeric: tabular-nums; }
  .schd :is([data-schedcell], button):focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -2px; }
  #managerScheduleStrip ~ .myw { padding: var(--s-2); }
  #managerScheduleStrip ~ .myw .myw-head { display: grid; grid-template-columns: minmax(0, 1fr) auto;
    align-items: center; gap: var(--s-1) var(--s-2); margin-bottom: 0; }
  #managerScheduleStrip ~ .myw .myw-title { grid-column: 1; grid-row: 1;
    font-family: inherit; font-size: var(--t-body); }
  #managerScheduleStrip ~ .myw .myw-name { grid-column: 1; grid-row: 2; font-size: var(--t-sub);
    font-weight: 400; text-transform: none; letter-spacing: 0; overflow-wrap: anywhere; }
  #managerScheduleStrip ~ .myw #schedMyWeekToggle { grid-column: 2; grid-row: 1 / 3;
    min-width: var(--control-height-touch); min-height: var(--control-height-touch); padding: var(--s-2);
    border: 1px solid var(--line); border-radius: var(--r-s); background: var(--surface-card);
    color: var(--ink); font: inherit; font-size: var(--t-sub); cursor: pointer; }
  #managerScheduleStrip ~ .myw #schedMyWeekToggle:focus-visible {
    outline: 2px solid var(--focus-ring); outline-offset: 2px; }
  #managerScheduleStrip ~ .myw .myw-days { display: none; }
  #managerScheduleStrip ~ .myw.myw--expanded .myw-days { display: grid;
    grid-template-columns: minmax(0, 1fr); gap: var(--s-1); margin-top: var(--s-2); }
  #managerScheduleStrip ~ .myw .myw-chip { display: grid; grid-template-columns: minmax(0, 5rem) minmax(0, 1fr);
    min-width: 0; min-height: var(--control-height-touch); padding: var(--s-2);
    border-radius: var(--r-s); text-align: left; white-space: normal; overflow-wrap: anywhere; }
  #managerScheduleStrip ~ .myw .myw-dow { grid-column: 1; grid-row: 1 / 3; }
  #managerScheduleStrip ~ .myw .myw-val { grid-column: 2; grid-row: 1; margin-top: 0; }
  #managerScheduleStrip ~ .myw .myw-code { grid-column: 2; grid-row: 2; }
  #managerScheduleStrip ~ .myw :is(.myw-dow, .myw-val, .myw-code) {
    font-size: var(--t-sub); letter-spacing: 0; line-height: 1.35; font-variant-numeric: tabular-nums; }
}

/* ── fetch-922 · NATIVE CULINARY SCHEDULER (culinary-schedule.js) ─────────────
   The scan rule is borrowed deliberately from Matt's app, where it is already
   load-bearing: WORKING shifts are SATURATED with white text, ABSENCES are
   LIGHT with dark text. A reader tells the two apart by weight before they read
   a single word. Do not break that to make something shout. */
  .culsch-bar { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap;
    margin-bottom: var(--s-3); padding: var(--s-2) var(--s-3);
    border: 1px solid var(--line); border-radius: var(--r-m); background: var(--surface-card, White); }
  .culsch-nav { display: flex; gap: var(--s-1); }
  .culsch-weeklabel { font-weight: 700; color: var(--text-heading); }
  .culsch-bar__right { margin-left: auto; }
  .culsch-note { margin: 0 0 var(--s-3); color: var(--muted); font-size: var(--t-sub); }
  .culsch-error__detail { margin: var(--s-2) 0; color: var(--muted); font-size: var(--t-sub);
    word-break: break-word; }

  .culsch-venue { margin-bottom: var(--s-4); }
  .culsch-venue__head { display: flex; align-items: center; gap: var(--s-2);
    margin: 0 0 var(--s-2); padding-left: var(--s-2); border-left: 3px solid var(--vc, var(--line));
    font-size: var(--t-mid); color: var(--text-heading); }
  .culsch-venue__code { color: var(--muted); font-size: var(--t-sub); font-weight: 400; }
  /* The venues with no home in staff_shifts (issue #83). Stated on the block, not
     buried in a tooltip, because it changes what publishing will be able to do. */
  .culsch-venue__warn { margin-left: auto; padding: 2px var(--s-2); border-radius: var(--r-s);
    background: var(--warn-bg); color: var(--warn-fg); font-size: var(--t-label); font-weight: 700; }

  /* The grid scrolls INSIDE its own box. A week is seven columns plus a name and
     will not fit a phone; the page itself must never scroll sideways. */
  .culsch-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch;
    border: 1px solid var(--line); border-radius: var(--r-m); background: var(--surface-card, White); }
  /* FIXED LAYOUT, AND IT IS NOT COSMETIC. Each venue is its own <table>, so with auto
     layout every block sized its columns to its own content and Monday landed at a
     different x in each one — the first screenshot had The Roof's Monday three times the
     width of Crane Bay's. A week grid whose days do not line up between blocks cannot be
     read across, which is the only reason to draw it as a grid. */
  .culsch-grid { border-collapse: collapse; width: 100%; min-width: 760px; table-layout: fixed; }
  .culsch-corner, .culsch-person { width: 150px; }
  .culsch-dayhead, .culsch-td { width: calc((100% - 150px) / 7); }
  .culsch-dayhead { padding: var(--s-1) var(--s-2); border-bottom: 1px solid var(--line);
    font-size: var(--t-label); color: var(--muted); text-align: center; font-weight: 700; }
  .culsch-dayhead__n { display: block; color: var(--text-heading); font-size: var(--t-sub); }
  .culsch-person { width: 150px; padding: var(--s-1) var(--s-2); border-bottom: 1px solid var(--hair);
    text-align: left; vertical-align: middle; }
  .culsch-person__name { display: block; font-size: var(--t-sub); font-weight: 700; color: var(--text-heading); }
  .culsch-person__role { display: block; font-size: var(--t-label); color: var(--muted); }
  .culsch-person--open { color: var(--muted); font-style: italic; }
  .culsch-td { padding: 2px; border-bottom: 1px solid var(--hair); vertical-align: top; }

  .culsch-cell { display: block; width: 100%; min-height: 34px; padding: var(--s-1);
    border: 1px solid transparent; border-radius: var(--r-s); background: transparent;
    font: inherit; font-size: var(--t-label); text-align: center; cursor: pointer; }
  /* An empty day is quiet until you go looking for it: the + only appears on
     hover or focus, so an unscheduled week is not seven columns of plus signs. */
  .culsch-cell--empty { color: transparent; border-style: dashed; border-color: var(--hair); }
  .culsch-cell--empty:hover, .culsch-cell--empty:focus-visible { color: var(--muted); border-color: var(--line); }
  .culsch-tile { color: White; font-weight: 700; background: var(--vc, var(--navy)); }
  .culsch-tile--off { background: var(--hair); color: var(--ink); font-weight: 400; }
  .culsch-tile--open { background: var(--bad-bg); color: var(--bad-fg); font-weight: 700; }
  .culsch-tile__tag { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .culsch-tile__time { display: block; font-size: var(--t-label); font-weight: 400; opacity: .9; }
  .culsch-tile__note { display: inline-block; margin-left: 3px; font-size: .65em; vertical-align: super; opacity: .85; }
  /* Darkening by a quarter rather than a ring: an inset shadow paints over the
     background and UNDER the text, so a white label stays white and the hue is
     unchanged -- a Roof cell cannot start reading as another kitchen. */
  @media (hover: hover) and (pointer: fine) {
    .culsch-tile:hover { box-shadow: inset 0 0 0 100px rgba(0, 0, 0, .25); }
  }

  .culsch-sheet-back { position: fixed; inset: 0; background: rgba(0, 0, 0, .35); z-index: 60; }
  .culsch-sheet { position: fixed; z-index: 61; left: 50%; top: 50%; transform: translate(-50%, -50%);
    width: min(440px, calc(100vw - 32px)); max-height: calc(100vh - 48px); overflow-y: auto;
    border: 1px solid var(--line); border-radius: var(--r-l); background: var(--surface-card, White);
    box-shadow: 0 18px 48px rgba(0, 0, 0, .25); }
  .culsch-sheet__head { display: flex; align-items: center; gap: var(--s-2);
    padding: var(--s-3); border-bottom: 1px solid var(--hair); }
  .culsch-sheet__date { color: var(--muted); font-size: var(--t-sub); }
  .culsch-sheet__head .btn { margin-left: auto; }
  .culsch-sheet__body { padding: var(--s-3); display: grid; gap: var(--s-2); }
  .culsch-sheet__foot { display: flex; align-items: center; gap: var(--s-2);
    padding: var(--s-3); border-top: 1px solid var(--hair); }
  .culsch-spacer { flex: 1 1 auto; }
  .culsch-field { display: grid; gap: 4px; }
  .culsch-field > span { font-size: var(--t-label); font-weight: 700; color: var(--muted); }
  .culsch-times { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2); }
  .culsch-hint { margin: 0; color: var(--muted); font-size: var(--t-label); }
  /* fetch-983: the Check-sync plan. Same hairline rows as .culsch-money; the number
     column is right-aligned and tabular so nine counts read as a column, not a paragraph. */
  .culsch-syncprobe__table { border-collapse: collapse; margin: var(--s-2) 0; }
  .culsch-syncprobe__table th, .culsch-syncprobe__table td {
    padding: var(--s-1) var(--s-2); border-bottom: 1px solid var(--hair); text-align: left; font-size: var(--t-sub); }
  .culsch-syncprobe__table td:nth-child(2) { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }

/* ── fetch-928 · DAY VIEW + PRINTED WEEK ──────────────────────────
   The day card keeps the week grid's scan rule: a WORKING chip is saturated with
   white text, an ABSENCE is light with dark text, so the two are told apart by
   weight before a word is read. */
  .culsch-daycard { margin-bottom: var(--s-4); }
  .culsch-daycard__tally { margin-left: auto; color: var(--muted); font-size: var(--t-sub); font-weight: 400; }
  .culsch-daycard__tally strong { color: var(--bad-fg); }
  .culsch-daybody { border: 1px solid var(--line); border-radius: var(--r-m);
    background: var(--surface-card, White); overflow: hidden; }
  /* A row is a button when you may edit and a div when you may not — same box
     either way, so read-only does not read as a broken layout. */
  /* FLEX-WRAP IS LOAD-BEARING, and a screenshot is the only thing that found that out.
     The note below is flex: 0 0 100% so it takes its own line. Without wrap it cannot
     GET its own line, so it stays on the first one, refuses to shrink (flex-shrink 0)
     and squeezes .culsch-dayrow__name — which is flex: 1 1 auto — down to zero width.
     Every shift carrying a note rendered with NO PERSON'S NAME. The text was still in
     the DOM the whole time, so no textContent assertion could ever have seen it; the
     probe now measures the rendered width instead. */
  .culsch-dayrow { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-2);
    width: 100%; padding: var(--s-2) var(--s-3); border: 0; border-top: 1px solid var(--hair);
    background: none; font: inherit; color: var(--ink); text-align: left; }
  .culsch-daybody > .culsch-dayrow:first-child { border-top: 0; }
  button.culsch-dayrow { cursor: pointer; }
  button.culsch-dayrow:hover, button.culsch-dayrow:focus-visible { background: var(--wash); }
  .culsch-dayrow__name { flex: 1 1 auto; font-weight: 700; color: var(--text-heading);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .culsch-dayrow--off .culsch-dayrow__name { font-weight: 400; color: var(--muted); }
  .culsch-dayrow__warn { padding: 1px var(--s-1); border-radius: var(--r-s);
    background: var(--warn-bg); color: var(--warn-fg); font-size: var(--t-label); font-weight: 700; }
  .culsch-dayrow__tag { flex: 0 0 auto; padding: 2px var(--s-2); border-radius: var(--r-s);
    background: var(--vc, var(--navy)); color: White; font-size: var(--t-label); font-weight: 700; }
  .culsch-dayrow__tag--off { background: var(--hair); color: var(--ink); font-weight: 400; }
  .culsch-dayrow__time { flex: 0 0 auto; color: var(--muted); font-size: var(--t-sub);
    font-variant-numeric: tabular-nums; }
  .culsch-dayrow__note { flex: 0 0 100%; color: var(--muted); font-size: var(--t-label); font-style: italic; }
  .culsch-dayempty { padding: var(--s-3); color: var(--muted); font-style: italic; font-size: var(--t-sub); }
  .culsch-dayadd { display: block; width: 100%; padding: var(--s-2) var(--s-3);
    border: 0; border-top: 1px dashed var(--line); background: none; font: inherit;
    color: var(--muted); text-align: left; cursor: pointer; font-size: var(--t-sub); }
  .culsch-dayadd:hover, .culsch-dayadd:focus-visible { color: var(--ink); }
  .culsch-printscope { display: inline-block; }
  .culsch-printscope .sel { min-width: 9.5rem; }

  /* fetch-935 . ONE KITCHEN SCHEDULE TAB, TWO VIEWS
     The chooser sits ABOVE both views and is drawn only for somebody who may see
     the portal build. "in progress" rides on the segment itself rather than in a
     note underneath, because the label is what somebody reads before clicking --
     a caveat below the fold is a caveat nobody sees in time. */
  .ksched-seg { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap;
    margin-bottom: var(--s-3); }
  .ksched-seg__sub { font-weight: 400; font-size: var(--t-label); opacity: .75; }

  /* ── fetch-931 · THE BENCH ─────────────────────────────────
     A phone list, not a second roster. It sits BELOW the grid and folded shut,
     because the whole point is that these people are not part of the week until
     somebody rings them. Tokens only. */
  .culsch-bench { margin-top: var(--s-4); }
  .culsch-bench > summary { cursor: pointer; font-weight: 700; color: var(--text-heading);
    padding: var(--s-2) 0; }
  .culsch-benchlist { list-style: none; margin: var(--s-2) 0 0; padding: 0;
    border: 1px solid var(--line); border-radius: var(--r-m);
    background: var(--surface-card, White); overflow: hidden; }
  .culsch-benchrow { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-2);
    padding: var(--s-2) var(--s-3); border-top: 1px solid var(--hair); }
  .culsch-benchlist > .culsch-benchrow:first-child { border-top: 0; }
  .culsch-benchrow__name { flex: 1 1 12rem; font-weight: 700; color: var(--text-heading); }
  .culsch-benchrow__role { font-weight: 400; color: var(--muted); font-size: var(--t-label); }
  /* The one thing that would otherwise confuse: a name here AND in the grid. */
  .culsch-benchrow__on { padding: 1px var(--s-1); border-radius: var(--r-s);
    background: var(--ok-bg, var(--hair)); color: var(--ok-fg, var(--ink));
    font-size: var(--t-label); font-weight: 700; }
  /* fetch-934: the two states a bench row can be in besides "on the grid".
     NOT ON THE ROSTER IS THE ORDINARY CASE — most of the bench gets a check
     rather than payroll — so it is stated quietly, in muted text, and does NOT
     take the warning colour. OFF ROSTER is different: it means the row points at
     an employee who is no longer there, which is a thing to fix. */
  .culsch-benchrow__off { color: var(--muted); font-size: var(--t-label); font-weight: 400; }
  .culsch-benchrow__warn { padding: 1px var(--s-1); border-radius: var(--r-s);
    background: var(--warn-bg); color: var(--warn-fg); font-size: var(--t-label); font-weight: 700; }
  .culsch-benchadd .culsch-field { flex: 1 1 9rem; }
  .culsch-benchrow__note { flex: 1 1 100%; color: var(--muted); font-size: var(--t-sub);
    font-style: italic; }
  .culsch-benchrow__actions { display: flex; align-items: center; gap: var(--s-1);
    margin-left: auto; flex-wrap: wrap; }
  .culsch-benchadd { display: flex; align-items: flex-end; gap: var(--s-2); flex-wrap: wrap;
    margin-top: var(--s-3); }
  .culsch-benchadd .culsch-field { flex: 1 1 12rem; }

  /* ── fetch-929 · BUDGET + THE HOLIDAY BANK ───────────────────────
     Tokens only. The one colour decision here is that OVER BUDGET uses --bad-fg and
     is also written in the word "over" beside the number — a colour on its own is not
     a signal everybody can read, which is the rule the app's own bar follows. */
  .culsch-money__grain { display: flex; align-items: center; gap: var(--s-2); margin-bottom: var(--s-3); }
  .culsch-money__span { color: var(--muted); font-size: var(--t-sub); }
  .culsch-money { border-collapse: collapse; width: 100%; min-width: 720px; }
  .culsch-money th, .culsch-money td { padding: var(--s-2); border-bottom: 1px solid var(--hair);
    text-align: left; font-size: var(--t-sub); vertical-align: middle; }
  .culsch-money thead th { border-bottom: 1px solid var(--line); color: var(--muted);
    font-size: var(--t-label); text-transform: uppercase; letter-spacing: .04em; }
  .culsch-money tbody th { font-weight: 700; color: var(--text-heading); }
  /* Tabular numerals so a column of money lines up on its digits and can be scanned
     down rather than read row by row. */
  .culsch-money .n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
  .culsch-money__var--over { color: var(--bad-fg); font-weight: 700; }
  .culsch-money__warn { border-left: 3px solid var(--warn-fg); margin-bottom: var(--s-3); }
  .culsch-money__warn p { margin: var(--s-2) 0 0; color: var(--muted); font-size: var(--t-sub); }

  /* A BULLET, NOT A PAIR OF BARS. The mark is what the period cost; the notch behind it
     is what its bookings allowed. One measure, one axis — they are the same unit, so
     they belong on the same scale, and the scale is shared by every row so the rows
     compare. Widths come from a generated stylesheet keyed on data-w (see
     bulletPaletteHTML): a bar's length is DATA and cannot be a literal in this file,
     and writing it inline is the debt fetch-928 cleared out of this feature. */
  .culsch-bullet { width: 30%; min-width: 120px; }
  .culsch-bullet__track { position: relative; display: block; height: 14px;
    background: var(--hair); border-radius: var(--r-s); overflow: hidden; }
  .culsch-bullet__notch { position: absolute; left: 0; top: 0; height: 100%;
    background: var(--line); }
  .culsch-bullet__mark { position: absolute; left: 0; top: 3px; height: 8px;
    background: var(--navy); border-radius: var(--r-s); }
  .culsch-bullet__mark--over { background: var(--bad-fg); }
  .culsch-bullet__none { color: var(--muted); font-size: var(--t-label); font-style: italic; }

  .culsch-wages { margin-top: var(--s-4); }
  .culsch-wages > summary { cursor: pointer; font-weight: 700; color: var(--text-heading);
    padding: var(--s-2) 0; }
  .culsch-wageinp { width: 6.5rem; text-align: right; font-variant-numeric: tabular-nums; }
  .culsch-holcal { margin-bottom: var(--s-3); }
  .culsch-holcal ul { margin: var(--s-2) 0 0; padding-left: var(--s-4); }
  .culsch-holcal li { font-size: var(--t-sub); }
  .culsch-holcal p { margin: var(--s-2) 0 0; color: var(--muted); font-size: var(--t-sub); }

  /* THE PAPER HALF. Always in the DOM and hidden on screen, so Print is the
     browser's own Print — no popup to be blocked, and no second render path that
     can drift from the one on screen. Same shape the rest of the portal uses. */
  .culsch-doc { display: none; }
  @media print {
    .culsch-live { display: none !important; }
    .culsch-doc { display: block !important; }
    .culsch-doc__head { margin: 0 0 2pt; font-size: 14pt; }
    .culsch-doc__sub { margin: 0 0 10pt; font-size: 9.5pt; color: var(--muted); }
    .culsch-doc__foot { margin-top: 8pt; font-size: 8.5pt; color: var(--muted); }
    .culsch-docsec { margin-bottom: 12pt; break-inside: avoid; page-break-inside: avoid; }
    .culsch-docsec h3 { margin: 0 0 3pt; font-size: 11pt; }
    .culsch-docempty { margin: 0; font-size: 9pt; color: var(--muted); font-style: italic; }
    .culsch-doctbl { width: 100%; border-collapse: collapse; table-layout: fixed; }
    .culsch-doctbl thead { display: table-header-group; }
    .culsch-doctbl th, .culsch-doctbl td { border: 0.75pt solid var(--ink); padding: 2pt 4pt;
      font-size: 8.5pt; vertical-align: top; text-align: left; word-break: break-word; }
    .culsch-doctbl thead th { background: Gainsboro; text-align: center; }
    .culsch-doctbl tbody th { width: 15%; }
    .culsch-doctbl tr { break-inside: avoid; page-break-inside: avoid; }
    /* An OPEN row is the one thing on the sheet that means "this is not covered", so it
       is the only row that looks different — a hole must not read as a status somebody
       is in, the same reason the app draws it dashed.

       A HEAVIER BORDER ALONE WAS NOT ENOUGH, and the first printed proof is what said
       so: every name cell is already bold, so at 0.75pt against 1.25pt the open rows
       were indistinguishable from the crew at arm's length — which is the distance a
       sheet on a wall is read from. It takes a fill and the caps as well.
       print-color-adjust because a background a printer drops is not a signal. */
    .culsch-docopen th, .culsch-docopen td { border-width: 1.25pt; font-weight: 700;
      background: var(--hair); -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .culsch-docopen th { text-transform: uppercase; letter-spacing: .5pt; }
    .culsch-doccell__head { display: block; font-weight: 700; }
    .culsch-doccell__t { display: block; font-size: 7.5pt; color: var(--muted); }
  }

/* fetch-949 · Open Shifts: fit the phone, retain readable people and explicit actions. */
.os-header { padding: var(--s-3); }
#openShiftsHeader .pgh { margin: 0; padding: 0; border: 0; box-shadow: none; background: none; display: block; }
#openShiftsHeader .pgh-nav { display: flex; flex-wrap: wrap; }
#openShiftsHeader #schedVenue { flex: 1 1 8em; width: auto; }
#openShiftsHeader .pgh-top { flex-wrap: wrap; }
#openShiftsHeader .pgh-h { font-size: var(--t-section); }
#openShiftsHeader .pgh-titles { flex: 1 0 auto; max-width: 100%; overflow-wrap: anywhere; }
#openShiftsHeader .pgh-acts { flex: 0 0 auto; }
#openShiftsHeader #schedPast { min-width: var(--control-height-touch); }
#openShiftsHeader #schedPast[aria-pressed="true"] { background: var(--navy); color: var(--paper); border-color: var(--navy); }
#osNotifications { margin-top: var(--s-2); border-top: 1px solid var(--line); font-size: var(--t-sub); }
#osNotifications > summary { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); min-height: var(--control-height-touch); cursor: pointer; }
#osNotifications > summary::after { content: "⌄"; }
#osNotifications[open] > summary::after { content: "⌃"; }
#osNotifications > summary > .muted { margin-left: auto; }
.os-notify-state { font-weight: 600; }
.os-notify-on { color: var(--ok-fg); }
.os-notify-off { color: var(--warn-fg); }
.os-notify-body { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; padding: 0 0 var(--s-2); }
.os-notify-body > span { flex: 1 1 16rem; }
.os-date { font: inherit; font-size: var(--t-sub); font-weight: 700; color: var(--navy); margin: var(--s-4) var(--s-1) var(--s-2); }
.os-card { min-width: 0; padding: var(--s-4); overflow-wrap: anywhere; }
.os-card--cancelled { opacity: .65; }
.os-cancelled-label { text-decoration: line-through; }
.os-card-head { display: flex; gap: var(--s-3); align-items: flex-start; justify-content: space-between; }
.os-card-head > :first-child { flex: 1; min-width: 0; }
.os-position { font-size: var(--t-body); color: var(--text-heading); }
.os-venue, .os-person-status { display: block; font-size: var(--t-sub); color: var(--muted); margin-top: var(--s-1); }
.os-fill { display: flex; align-items: flex-end; flex-direction: column; flex: 0 1 auto; gap: var(--s-1); font-variant-numeric: tabular-nums; }
.os-fill > strong { font-size: var(--t-section); color: var(--navy); }
.os-fill .badge { white-space: normal; text-align: right; }
.os-time { margin-top: var(--s-2); font-size: var(--t-body); font-variant-numeric: tabular-nums; }
.os-notes { margin-top: var(--s-1); font-size: var(--t-sub); }
.os-people { margin-top: var(--s-3); }
.os-person { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-2); border-top: 1px solid var(--line); padding: var(--s-2) 0; }
.os-person > div:first-child { flex: 1 1 9rem; min-width: 0; font-size: var(--t-body); }
.os-person--drop .os-person-status { color: var(--warn-fg); font-weight: 600; }
.os-person-actions, .os-card-actions { display: flex; gap: var(--s-2); flex-wrap: wrap; }
.os-card-actions { margin-top: var(--s-3); padding-top: var(--s-3); border-top: 1px solid var(--line); }
.os-card-actions .btn { flex: 0 1 auto; }
.os-card :is(button, select), #osFormCard :is(button, select), #osNotifications button { min-height: var(--control-height-touch); min-width: var(--control-height-touch); max-width: 100%; box-sizing: border-box; }
.os-card button, #osFormCard button { font-size: var(--t-sub); white-space: normal; }
.os-assign { display: grid; min-width: 0; gap: var(--s-2); padding: var(--s-3); margin-top: var(--s-2); background: var(--wash); border: 1px solid var(--line); border-radius: var(--r-m); }
.os-assign > label { font-weight: 600; font-size: var(--t-sub); }
#osAssignSel { width: 100%; min-width: 0; }
#osFormCard { min-width: 0; }
.os-form-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); }
.os-form-head strong { font-size: var(--t-section); }
#osFormError { margin-top: var(--s-2); font-size: var(--t-body); color: var(--bad-fg); background: var(--bad-bg); overflow-wrap: anywhere; }
.os-form-grid { margin-top: var(--s-3); }
#osFormCard .field { min-width: 0; }
#osFormCard .field input:not([type="checkbox"]):not([type="radio"]), #osFormCard .field select, #osAssignSel, #openShiftsHeader #schedVenue {
  font-family: Inter, sans-serif; font-size: max(1rem, var(--t-body)); min-width: 0; max-width: 100%; min-height: var(--control-height-touch); box-sizing: border-box; }
#osFormCard .combo-in { padding-right: calc(var(--control-height-touch) + var(--s-2)); }
#osFormCard .combo-caret { width: var(--control-height-touch); margin-left: calc(var(--control-height-touch) * -1); }
.os-publish, #osFormCard .sg-trlab { display: flex; align-items: center; gap: var(--s-2); min-height: var(--control-height-touch); font-size: var(--t-sub); line-height: 1.5; }
.os-publish { margin-top: var(--s-2); }
.os-form-actions { margin-top: var(--s-3); }
.os-override-note { font-size: var(--t-sub); margin-top: var(--s-2); }
#osPhoneDialog { box-sizing: border-box; width: calc(100% - var(--s-4)); max-width: 38rem; max-height: calc(100dvh - var(--s-4)); padding: 0; border: 1px solid var(--line); border-radius: var(--r-l); background: var(--paper); color: var(--ink); overflow: auto; overscroll-behavior: contain; }
#osPhoneDialog::backdrop { background: var(--modal-backdrop, rgba(0,0,0,.5)); }
#osPhoneDialog #osFormCard { margin: 0; padding: var(--s-3); border: 0; box-shadow: none; }
#osPhoneDialog .os-form-head { position: sticky; top: calc(-1 * var(--s-3)); z-index: 1; background: var(--paper); padding-block: var(--s-2); }
#openShiftsHeader :is(button,select,summary):focus-visible, #openShiftsBoard :is(button,select):focus-visible, #osFormCard :is(button,input,select):focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
@media (max-width: 640px) {
  .os-card { padding: var(--s-3); }
  #osFormCard .os-form-grid { grid-template-columns: minmax(0, 1fr); }
  .os-card-actions .btn { flex: 1 1 5rem; }
  #openShiftsHeader .pgh-morelist { right: 0; max-width: calc(100vw - var(--s-6)); }
}
@media (min-width: 900px) {
  #openShiftsHeader .pgh { display: flex; align-items: center; gap: var(--s-5); }
  #openShiftsHeader .pgh-top { flex: 1; }
  #openShiftsHeader .pgh-nav { flex: 0 1 30rem; margin-top: 0; }
}

/* fetch-957: phone-first manual Playbook draft editor */
.ck957-editor{display:grid;gap:var(--s-3)}
.ck957-editor h2,.ck957-editor h3{margin:0;color:var(--text-heading);font-size:var(--t-section)}
.ck957-editor .form-group{min-width:0;margin:0}
.ck957-editor input:not([type="checkbox"]),.ck957-editor select,.ck957-editor textarea{box-sizing:border-box;width:100%;min-width:0;min-height:var(--control-height-touch);font-size:var(--t-body)}
.ck957-editor textarea{resize:vertical}
.ck957-editor label{display:block;font-size:var(--t-sub);font-weight:600}
.ck957-editor .btn,.ck957-import .btn{min-height:var(--control-height-touch)}
.ck957-panel,.ck957-job-editor{padding:var(--s-4);margin:0 0 var(--s-3)}
.ck957-panel>.ck-v3-fields,.ck957-job-editor>.ck-v3-fields{margin-top:var(--s-3)}
.ck957-actions,.ck957-scenarios{display:flex;align-items:center;flex-wrap:wrap;gap:var(--s-2)}
.ck957-scenarios{margin:var(--s-3) 0}
.ck957-import{margin-bottom:var(--s-3)}
.ck957-section{border-top:1px solid var(--line);padding-top:var(--s-3);margin-top:var(--s-3)}
.ck957-section-name{flex:1;min-width:0}
.ck957-jobs{list-style:none;margin:var(--s-2) 0;padding:0;display:grid;gap:var(--s-2)}
.ck957-jobs li{display:flex;align-items:stretch;gap:var(--s-2);min-width:0}
.ck957-job{display:flex;gap:var(--s-2);align-items:center;flex:1;min-width:0;min-height:var(--control-height-touch);text-align:left;padding:var(--s-2);border:1px solid var(--line);border-radius:var(--r-s);background:var(--surface-card);color:var(--ink);font:inherit;font-size:var(--t-body);overflow-wrap:anywhere;cursor:pointer}
.ck957-job.is-selected{border-color:var(--focus-ring);box-shadow:inset 3px 0 0 var(--focus-ring)}
.ck957-order{display:flex;align-items:center;gap:var(--s-1)}
.ck957-picker,.ck957-move{display:grid;gap:var(--s-2);margin-top:var(--s-3);padding-top:var(--s-3);border-top:1px solid var(--line)}
.ck957-details{margin-top:var(--s-3);border-top:1px solid var(--line)}
.ck957-details summary{min-height:var(--control-height-touch);padding:var(--s-3) 0;cursor:pointer;font-size:var(--t-body);font-weight:600}
.ck957-details>.ck-v3-fields{padding-bottom:var(--s-3)}
.ck957-instructions{white-space:pre-wrap;overflow-wrap:anywhere;font-size:var(--t-body)}
.ck957-check{display:flex;align-items:center;justify-content:space-between;min-height:var(--control-height-touch);gap:var(--s-2)}
.ck957-check label{display:flex;align-items:center;flex:1;min-height:var(--control-height-touch)}
.ck957-check input{width:1.25rem;height:1.25rem}
@media(max-width:600px){.ck957-editor .ck-v3-fields{grid-template-columns:minmax(0,1fr)}.ck957-panel,.ck957-job-editor{padding:var(--s-3)}.ck957-jobs li{flex-wrap:wrap}.ck957-job{flex-basis:100%}.ck957-order{justify-content:flex-end;width:100%}.ck957-editor>.ck-v3-head>.ck957-actions{width:100%}.ck957-editor>.ck-v3-head>.ck957-actions .btn{flex:1}}

.ck-page #ckNewPlaybookBtn,.ck-page [data-ck957edit],.ck-page [data-ck957revision]{min-height:var(--control-height-touch)}

.ck957-editor input:not([type="checkbox"]),.ck957-editor select,.ck957-editor textarea{padding:var(--s-2) var(--s-3);border:1px solid var(--line);border-radius:var(--r-s);background:var(--surface-card);color:var(--ink)}
.ck957-editor input:disabled,.ck957-editor select:disabled,.ck957-editor textarea:disabled{background:var(--wash);color:var(--muted)}
.ck957-footer{padding:var(--s-3) 0;border-top:1px solid var(--line)}
.ck957-footer .ck957-actions{justify-content:flex-end}
@media(max-width:600px){.ck957-footer .ck957-actions .btn{flex:1}}

/* fetch-958: Training owns its page controls; desktop and phone share the same task order. */
.training-page .pgh { display: grid; grid-template-columns: minmax(8rem, 1fr) minmax(18rem, 2fr) auto; align-items: center; gap: var(--s-2) var(--s-4); padding: var(--s-2) var(--s-3); }
.training-page .pgh-top { display: contents; }
.training-page .pgh-titles { grid-column: 1; grid-row: 1; }
.training-page .pgh-acts { grid-column: 3; grid-row: 1; justify-self: end; }
.training-page .pgh-tabs { grid-column: 2; grid-row: 1; display: grid; grid-template-columns: 1fr 1.6fr 1fr; gap: var(--s-2); margin: 0; width: 100%; overflow: visible; }
.training-page .pgh-tab { min-width: var(--control-height-touch); min-height: var(--control-height-touch); padding: var(--s-2) var(--s-1); white-space: normal; font-size: var(--t-body); line-height: 1.4; }
.training-page .pgh-nav, .training-page .pgh-row { grid-column: 1 / -1; display: flex; margin: 0; }
.training-page .pgh-nav .sel { width: auto; min-width: 10rem; max-width: 100%; }
.training-page .pgh-search { min-height: var(--control-height-touch); box-sizing: border-box; padding-block: 0; }
.training-page .pgh-search input { min-height: var(--control-height-touch); }
.training-page .pgh-search-x { flex: 0 0 var(--control-height-touch); }
.training-page .pgh-morelist .btn { white-space: normal; min-height: var(--control-height-touch); }
.training-page .train-card { width: 100%; font: inherit; text-align: left; color: var(--ink); box-sizing: border-box; }
.training-page .training-list-main { flex: 1; min-width: 0; }
.training-page .train-name, .training-page .train-sub, .training-page .train-stage, .training-page .train-progress { display: block; }
.training-page .train-stage { font-size: var(--t-sub); }
.training-page .train-card:focus-visible, .training-stage-open:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.training-library-files { list-style: none; margin: 0; padding: 0; }
.training-library-file { display: flex; align-items: center; gap: var(--s-3); padding-block: var(--s-3); }
.training-library-file + .training-library-file { border-top: 1px solid var(--line); }
.training-library-file a { flex: 1; min-width: 0; color: var(--navy); font-size: var(--t-body); font-weight: 600; overflow-wrap: anywhere; }
.training-library-file .btn { min-width: var(--control-height-touch); min-height: var(--control-height-touch); }
.training-library-intro { margin: 0 0 var(--s-3); color: var(--muted); font-size: var(--t-sub); line-height: 1.5; }
@media (max-width: 800px) {
  .training-page .pgh { grid-template-columns: minmax(0, 1fr); gap: var(--s-2); }
  .training-page .pgh-top { display: flex; grid-column: 1; gap: var(--s-2); }
  .training-page .pgh-titles { flex: 1 1 4rem; }
  .training-page .pgh-h { font-size: var(--t-section); }
  .training-page .pgh-acts { flex: 0 1 auto; }
  .training-page .pgh-tabs { grid-column: 1; grid-row: auto; }
  .training-page .pgh-tab { font-size: var(--t-sub); }
  .training-page .pgh-nav, .training-page .pgh-row { grid-column: 1; }
}

/* fetch-958: trainee stage, sign-offs and evaluation evidence in one responsive row. */
.training-stage-board { background: var(--surface-card); border: 1px solid var(--line); border-radius: var(--r-m); }
.training-stage-columns, .training-stage-row { display: grid; grid-template-columns: minmax(12rem, 1.15fr) minmax(24rem, 2fr) minmax(12rem, 1fr); gap: var(--s-4); padding: var(--s-4); }
.training-stage-columns { background: var(--wash); border-radius: var(--r-m) var(--r-m) 0 0; color: var(--muted); font-size: var(--t-sub); font-weight: 650; }
.training-stage-row + .training-stage-row { border-top: 1px solid var(--line); }
.training-stage-person, .training-stage-completion { min-width: 0; }
.training-stage-open { display: block; min-height: var(--control-height-touch); max-width: 100%; padding: 0; border: 0; background: transparent; color: var(--navy-dark); font: inherit; font-size: var(--t-body); font-weight: 700; text-align: left; cursor: pointer; overflow-wrap: anywhere; }
.training-stage-open:hover { text-decoration: underline; text-underline-offset: .2em; }
.training-stage-context, .training-stage-position, .training-stage-requirements { margin: var(--s-1) 0 0; color: var(--muted); font-size: var(--t-sub); line-height: 1.5; overflow-wrap: anywhere; }
.training-stage-position { color: var(--ink); }
.training-stage-position--unknown { color: var(--warn-fg); }
.training-stage-days { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-2); list-style: none; padding: 0; margin: 0; min-width: 0; }
.training-stage-day { display: flex; flex-direction: column; align-items: flex-start; padding: var(--s-2); border: 1px solid var(--line); border-radius: var(--r-s); font-size: var(--t-sub); color: var(--muted); }
.training-stage-day--current { border-color: var(--brand-gold-mid); }
.training-stage-day-label { display: flex; flex-direction: column; gap: var(--s-1); color: var(--ink); }
.training-stage-day-label span { color: var(--muted); font-variant-numeric: tabular-nums; }
.training-stage-day-current { min-height: 1.5em; color: var(--navy-dark); line-height: 1.5; }
.training-stage-evidence, .training-stage-evaluation { display: block; line-height: 1.5; overflow-wrap: anywhere; }
.training-stage-day--signed .training-stage-evidence { color: var(--ok-fg); font-weight: 650; }
.training-stage-evaluation { font-variant-numeric: tabular-nums; }
.training-stage-completion { padding-top: var(--s-2); }
.training-stage-mobile-label { display: none; }
@media (max-width: 1100px) {
  .training-stage-columns { display: none; }
  .training-stage-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .training-stage-person { grid-column: 1; }
  .training-stage-completion { grid-column: 2; grid-row: 1; }
  .training-stage-days { grid-column: 1 / -1; }
  .training-stage-mobile-label { display: block; margin-bottom: var(--s-2); color: var(--muted); font-size: var(--t-sub); }
}
@media (max-width: 540px) {
  .training-stage-row { grid-template-columns: minmax(0, 1fr); gap: var(--s-3); }
  .training-stage-completion { grid-column: 1; grid-row: auto; padding-top: 0; }
  .training-stage-days { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* fetch-969: Reports owns its category, catalog and refinements in one compact card. */
#reportsHeader .pgh { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-2); font-size: var(--t-sub); }
#reportsHeader .pgh-top { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: var(--s-1) var(--s-2); }
#reportsHeader .pgh-titles { display: contents; }
#reportsHeader .pgh-acts { grid-column: 2; grid-row: 1; }
#reportsHeader .pgh-h { overflow-wrap: anywhere; }
#reportsHeader .pgh-sub, #reportsHeader .pgh-meta { grid-column: 1 / -1; margin: 0; line-height: 1.35; }
#reportsHeader .pgh-meta { color: var(--muted); font-size: var(--t-sub); }
#reportsHeader .pgh-tabs { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 6em), 1fr)); margin: 0; gap: var(--s-1); overflow: visible; }
#reportsHeader .pgh-tab { white-space: normal; font-size: var(--t-sub); line-height: 1.3; padding: var(--s-1); }
#reportsHeader .pgh-nav { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 10em), 1fr)); align-items: end; gap: var(--s-2); margin: 0; }
#reportsHeader .pgh-navfield { position: relative; display: block; min-width: 0; }
#reportsHeader .pgh-navfield > span { position: absolute; top: var(--s-1); left: var(--s-2); font-size: var(--t-sub); line-height: 1; pointer-events: none; }
#reportsHeader .pgh-navfield :is(select, input) { min-height: var(--control-height-touch); height: auto; padding: calc(1em + var(--s-2)) var(--s-5) var(--s-1) var(--s-2); font-size: var(--t-sub); line-height: 1.3; }
#reportsHeader .pgh-navfield:has(#rptReport) { grid-column: 1 / -1; }
#reportsHeader .pgh-navfield:has(#rptPreset) { order: 1; }
#reportsHeader #rptClearDates { order: 2; }
#reportsHeader .pgh-navfield:has(#rptFrom) { order: 3; }
#reportsHeader .pgh-navfield:has(#rptTo) { order: 4; }
#reportsHeader .pgh-navfield:has(#rptStatus) { order: 5; }
#reportsHeader .pgh-scope { margin: 0; }
#reportsHeader .pgh-scope-choices:empty { display: none; }
#reportsHeader .pgh-morelist { min-width: 12rem; width: min(19rem, calc(100vw - var(--s-6) * 2)); }
#reportsHeader .pgh-morelist .btn { white-space: normal; text-align: left; justify-content: flex-start; }
#reportsHeader :is(button, select, input, summary) { min-height: var(--control-height-touch); min-width: var(--control-height-touch); box-sizing: border-box; }
#reportsHeader .pgh-more { width: var(--control-height-touch); }
#reportsHeader .pgh-nav > button { white-space: normal; font-size: var(--t-sub); }
#reportsHeader.rpt-header-insights .pgh-nav { grid-template-columns: repeat(auto-fit, minmax(min(100%, 10em), 1fr)); }
#reportsHeader.rpt-header-insights .pgh-h { font-size: var(--t-section); }
#reportsHeader.rpt-header-insights .pgh { padding-block: var(--s-2); gap: var(--s-1); margin-bottom: var(--s-2); }
.reports-page #rptPanel:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
@media (min-width: 800px) {
  #reportsHeader .pgh { grid-template-columns: minmax(0, 1fr) minmax(14rem, 1fr); }
  #reportsHeader .pgh-tabs { grid-column: 1; max-width: 30rem; }
  #reportsHeader .pgh-nav { grid-column: 1 / -1; grid-template-columns: repeat(auto-fit, minmax(min(100%, 10em), 1fr)); }
  #reportsHeader .pgh-scope { grid-column: 2; grid-row: 2; justify-self: end; min-width: 12rem; }
  #reportsHeader.rpt-header-insights .pgh-nav { grid-template-columns: repeat(auto-fit, minmax(min(100%, 10em), 1fr)); }
  #reportsHeader.rpt-header-insights .pgh-navfield:has(#rptReport) { grid-column: auto; }
}
@media print {
  #reportsHeader .pgh { display: block; padding: 0; border: 0; box-shadow: none; }
  #reportsHeader :is(.pgh-tabs, .pgh-nav, .pgh-scope, .pgh-acts) { display: none !important; }
  #reportsHeader .pgh-h, #reportsHeader .pgh-sub, #reportsHeader .pgh-meta { display: block; }
  .reports-page .rpt-tbl-wrap { max-height: none; overflow: visible; }
}
/* fetch-960: labeled native period controls opt in; existing nav callers keep their markup. */
.pgh-navfield { display: flex; flex-direction: column; gap: var(--s-1); min-width: 0; font-size: var(--t-sub); font-weight: 600; color: var(--text-heading); }
.pgh-navfield :is(input, select) { width: 100%; min-width: 0; min-height: var(--control-height-touch); box-sizing: border-box; font-weight: 400; }

/* Linen workbench: quantities first, event evidence beside them, one shared page header. */
.linen-page { max-width: var(--w-mid); margin-inline: auto; }
.linen-page .notice { flex-wrap: wrap; gap: var(--s-3); }
.linen-page .notice > div { flex: 1 1 16rem; min-width: 0; }
.linen-page .notice > button { flex: 0 0 auto; max-width: 100%; white-space: normal; }
#linenHeader .pgh { display: block; }
#linenHeader .pgh-nav { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 9em), 1fr)); align-items: end; }
#linenHeader .pgh-morelist { width: min(19rem, calc(100vw - var(--s-6))); }
#linenHeader .pgh-morelist .btn { white-space: normal; text-align: left; justify-content: flex-start; }
.linen-page :is(button, summary, input, select) { min-height: var(--control-height-touch); }
.linen-page :is(button, summary) { min-width: var(--control-height-touch); }
.linen-doc { padding: var(--s-5); }
.linen-doc-head { display: flex; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap; border-bottom: 1px solid var(--brand-gold-mid); padding-bottom: var(--s-4); margin-bottom: var(--s-5); }
.linen-doc-head h2 { font-family: Inter, sans-serif; font-size: var(--t-section); line-height: 1.35; margin: 0 0 var(--s-2); color: var(--text-heading); }
.linen-print-context { display: none; }
.linen-supplier, .linen-deadline, .linen-delivery { font-size: var(--t-sub); line-height: 1.65; }
.linen-supplier { color: var(--muted); overflow-wrap: anywhere; }
.linen-deadline { margin-top: var(--s-1); font-weight: 600; }
.linen-delivery { text-align: right; font-variant-numeric: tabular-nums; }
.linen-order-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-6); align-items: start; }
.linen-section-head { margin-bottom: var(--s-3); }
.linen-section-head h3, .linen-events-print h3 { font-family: Inter, sans-serif; font-size: var(--t-body); color: var(--text-heading); margin: 0; }
.linen-section-head p, .linen-catalog-help { font-size: var(--t-sub); color: var(--muted); line-height: 1.5; margin: var(--s-1) 0 0; }
.linen-item-row { display: grid; grid-template-columns: minmax(0, 1fr) 6rem; align-items: center; gap: var(--s-3); padding: var(--s-3) 0; border-bottom: 1px solid var(--hair); }
.linen-item-label { display: block; font-size: var(--t-body); font-weight: 600; line-height: 1.4; overflow-wrap: anywhere; }
.linen-item-note, .linen-item-edited { font-size: var(--t-sub); line-height: 1.4; color: var(--muted); margin-top: var(--s-1); }
.linen-item-edited { color: var(--info-fg); }
.linen-page input { border: 1px solid var(--line); border-radius: var(--r-s); background: var(--paper); color: var(--ink); padding: var(--s-2); box-sizing: border-box; min-width: 0; width: 100%; font-size: var(--t-body); }
.linen-page .linen-qty, .linen-extra-qty input { text-align: right; font-weight: 700; }
.linen-extra-row { display: grid; grid-template-columns: minmax(0, 1fr) 6rem var(--control-height-touch); align-items: end; gap: var(--s-2); padding: var(--s-3) 0; border-bottom: 1px solid var(--hair); }
.linen-extra-row label { display: block; font-size: var(--t-sub); margin-bottom: var(--s-1); }
.linen-remove { padding: 0; font-size: var(--t-section); }
#linExtraAdd { margin-top: var(--s-3); }
.linen-event { border: 1px solid var(--line); border-radius: var(--r-m); margin-top: var(--s-2); background: var(--paper); }
.linen-event summary { display: flex; align-items: center; gap: var(--s-2); padding: var(--s-3); cursor: pointer; list-style: none; }
.linen-event summary::-webkit-details-marker, .linen-catalog summary::-webkit-details-marker { display: none; }
.linen-event-heading { flex: 1; min-width: 0; }
.linen-event-heading strong { display: block; font-size: var(--t-body); line-height: 1.4; overflow-wrap: anywhere; }
.linen-event-meta { display: block; margin-top: var(--s-1); font-size: var(--t-sub); color: var(--muted); line-height: 1.4; }
.linen-event-guests { display: flex; flex-direction: column; align-items: flex-end; gap: var(--s-1); font-size: var(--t-sub); white-space: nowrap; }
.linen-event-chevron { flex-shrink: 0; color: var(--muted); }
.linen-event[open] > summary .linen-event-chevron, .linen-catalog[open] > summary .linen-event-chevron { transform: rotate(180deg); }
.linen-event-quantities { margin: 0; padding: 0 var(--s-3) var(--s-3); }
.linen-event-quantities > div { display: flex; justify-content: space-between; gap: var(--s-3); padding-block: var(--s-2); border-top: 1px solid var(--hair); font-size: var(--t-sub); line-height: 1.4; }
.linen-event-quantities dt { overflow-wrap: anywhere; }
.linen-event-quantities dd { margin: 0; font-weight: 600; }
.linen-events-print { display: none; }
.linen-catalog { margin-top: var(--s-4); border: 1px solid var(--line); border-radius: var(--r-l); background: var(--paper); }
.linen-catalog > summary { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: var(--s-4); cursor: pointer; list-style: none; font-size: var(--t-body); }
.linen-catalog-summary { display: block; color: var(--muted); font-size: var(--t-sub); margin-top: var(--s-1); line-height: 1.4; }
.linen-catalog-body { padding: 0 var(--s-4) var(--s-4); }
.linen-catalog-row { display: grid; grid-template-columns: minmax(10rem, 2fr) minmax(8rem, 1.4fr) repeat(3, minmax(5rem, .7fr)) var(--control-height-touch); gap: var(--s-3); align-items: end; padding-block: var(--s-4); border-bottom: 1px solid var(--hair); }
.linen-catalog-row .field { margin: 0; min-width: 0; }
.linen-catalog-row label { font-size: var(--t-sub); }
.linen-catalog-actions { margin-top: var(--s-4); }
@media (min-width: 1025px) {
  #linenHeader .pgh { display: grid; grid-template-columns: minmax(10rem, 1fr) minmax(18rem, 1.4fr) auto; gap: var(--s-4); align-items: center; }
  #linenHeader .pgh-top { display: contents; }
  #linenHeader .pgh-titles { grid-column: 1; grid-row: 1; }
  #linenHeader .pgh-acts { grid-column: 3; grid-row: 1; }
  #linenHeader .pgh-nav { grid-column: 2; grid-row: 1; margin-top: 0; }
}
@media (max-width: 1024px) {
  .linen-catalog-row { grid-template-columns: repeat(3, minmax(0, 1fr)) var(--control-height-touch); }
  .linen-catalog-name, .linen-catalog-unit { grid-column: span 2; }
}
@media (max-width: 760px) {
  .linen-order-grid { grid-template-columns: minmax(0, 1fr); gap: var(--s-5); }
}
@media (max-width: 640px) {
  .linen-doc { padding: var(--s-4); }
  .linen-doc-head { gap: var(--s-3); margin-bottom: var(--s-4); }
  .linen-delivery { text-align: left; width: 100%; }
  .linen-page :is(input, select) { font-size: max(var(--t-body), 1rem); }
  .linen-catalog-row { grid-template-columns: repeat(auto-fit, minmax(min(100%, 6em), 1fr)); }
  .linen-catalog-name, .linen-catalog-unit { grid-column: 1 / -1; }
  .linen-catalog-row .linen-remove { grid-column: -2 / -1; justify-self: end; width: var(--control-height-touch); }
  .linen-extra-row { grid-template-columns: minmax(0, 1fr) 5rem var(--control-height-touch); }
  .linen-event summary { flex-wrap: wrap; }
  .linen-event-heading { flex-basis: 60%; }
}
@media print {
  .linen-page .no-print, .linen-page #linenHeader { display: none !important; }
  .linen-print-context { display: block; }
  .linen-order-grid { display: block; }
  .linen-events-print { display: block; margin-top: var(--s-5); }
  .linen-events-print table { width: 100%; table-layout: fixed; }
  .linen-events-print table.rpt-tbl th, .linen-events-print table.rpt-tbl td { overflow-wrap: anywhere; white-space: normal; }
  .linen-item-row { grid-template-columns: minmax(0, 1fr) 6rem; padding-block: var(--s-1); break-inside: avoid; }
  .linen-page input { border: 0; min-height: 0; padding: 0; }
  .linen-page .linen-doc input.linen-qty { font-size: var(--t-body); }
  .linen-extra-row { grid-template-columns: minmax(0, 1fr) 6rem; break-inside: avoid; }
  .linen-doc-head { flex-wrap: nowrap; }
  .linen-delivery { width: auto; text-align: right; }
}

/* fetch-962: an event is a working document with a persistent index. */
.evt-record-head { padding: 0; }
.evt-record-main { display: flex; align-items: flex-start; gap: var(--s-4); padding: var(--s-4); }
.evt-record-identity { flex: 1 1 28rem; min-width: 0; }
.evt-record-kicker { display: none; }
/* fetch-1110: a quiet label and first-function guidance for the Sales planning workspace. */
.evt-record-kicker--planning { display: block; margin-bottom: var(--s-1); color: var(--muted); font-size: var(--t-sub); font-weight: 600; }
.evt-planning-start { max-width: 42rem; padding-block: var(--s-2); }
.evt-planning-start h4 { margin: 0 0 var(--s-2); font-family: inherit; font-size: var(--t-body); color: var(--ink); }
.evt-planning-start p { margin: 0; color: var(--muted); font-size: var(--t-mid); line-height: 1.6; }
.evt-record-identity h2 { margin: 0; font: 700 var(--t-section)/1.3 Inter, sans-serif; color: var(--text-heading); overflow-wrap: anywhere; }
.evt-record-context { font-size: var(--t-sub); line-height: 1.5; margin-top: var(--s-1); }
.evt-record-actions { display: flex; flex: 0 1 33rem; gap: var(--s-1); align-items: center; justify-content: flex-end; flex-wrap: wrap; }
.evt-record-actions .btn { min-height: var(--control-height-sm); font-size: var(--t-sub); }
/* fetch-1014 (Jack, 09-09): the readiness line in the header - label, segment meter, count, then the failing checks as a sentence;
   the button opens the full checklist under the line. Tone rides data-tone from the strip's own grammar; the words carry the meaning. */
.evt-readiness { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--s-2); margin-top: var(--s-1); font-size: var(--t-sub); line-height: 1.5; color: var(--navy); }
.evt-readiness-summary { display: inline-flex; align-items: center; gap: var(--s-2); min-height: var(--control-height-sm); margin-left: calc(-1 * var(--s-2)); padding: 0 var(--s-2); border: 0; border-radius: var(--r-s); background: transparent; color: var(--text-heading); font: 600 var(--t-sub)/1.5 Inter, sans-serif; cursor: pointer; }
.evt-readiness-summary:hover { background: var(--wash); }
.evt-readiness-line { display: inline-block; white-space: nowrap; } /* one inline run inside the flex button, so the words read "Readiness n/m" as text (the flex items would read as lines) */
.evt-readiness-meter { display: inline-block; vertical-align: middle; line-height: 0; margin: 0 var(--s-2) 2px 1px; } /* inline-block, not inline-flex: Chrome breaks innerText around a flex box, and the words must read "Readiness n/m" */
.evt-readiness-meter i { display: inline-block; width: 14px; height: 7px; border-radius: 2px; background: var(--line); }
.evt-readiness-meter i + i { margin-left: 3px; }
.evt-readiness-meter i.on { background: var(--vc, var(--muted)); } /* fetch-1017 (Jack): the fill is the venue's colour (--vc from the binder, the calendar's token), not the tone - the tone stays on data-tone for the checklist's marks and the words carry the state */
.evt-readiness-chev { display: inline-block; margin-left: var(--s-1); vertical-align: middle; font-size: var(--t-body); line-height: 1; color: var(--muted); transform: rotate(0); transition: transform .15s; }
.evt-readiness-summary[aria-expanded="true"] .evt-readiness-chev { transform: rotate(90deg); }
.evt-readiness-needs { min-width: 0; overflow-wrap: anywhere; }
.evt-readiness-detail { color: var(--muted); font-weight: 400; }
.evt-readiness-list { flex-basis: 100%; list-style: none; margin: var(--s-1) 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: var(--s-1) var(--s-3); }
.evt-readiness-list li { display: flex; gap: var(--s-2); align-items: baseline; min-width: 0; overflow-wrap: anywhere; }
.evt-readiness-list li[data-state="na"] { color: var(--muted); }
.evt-readiness-mark { flex: 0 0 auto; font-weight: 700; }
.evt-readiness-list li[data-state="ready"] .evt-readiness-mark { color: var(--ok-fg); }
.evt-readiness-list li[data-state="missing"] .evt-readiness-mark { color: var(--warn-fg); }
.evt-readiness[data-tone="bad"] .evt-readiness-list li[data-state="missing"] .evt-readiness-mark { color: var(--bad-fg); }
.evt-action-menu { position: relative; }
.evt-action-menu-list { position: absolute; right: 0; top: calc(100% + var(--s-1)); min-width: 15rem; max-width: calc(100vw - var(--s-6)); padding: var(--s-2); z-index: 300; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-m); box-shadow: 0 var(--s-2) var(--s-5) color-mix(in srgb, var(--navy-dark) 18%, transparent); display: flex; flex-direction: column; gap: var(--s-1); }
.evt-action-menu-list .btn { width: 100%; justify-content: flex-start; text-align: left; border: 0; white-space: normal; }
.evt-workspace { display: grid; grid-template-columns: 10rem minmax(0, 1fr); align-items: start; gap: var(--s-4); margin-top: var(--s-4); }
.evt-document { min-width: 0; font-family: Inter, sans-serif; }
.evt-log-heading { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); flex-wrap: wrap; margin-bottom: var(--s-3); }
.evt-log-heading h2 { margin: 0; font: 650 var(--t-section)/1.4 Inter, sans-serif; color: var(--text-heading); }
.evt-section-nav { position: sticky; top: var(--s-4); max-height: calc(100dvh - var(--s-6)); overflow-y: auto; padding-bottom: var(--s-3); color: var(--navy-dark); }
.evt-section-nav-title { font-size: var(--t-sub); font-weight: 700; padding: var(--s-2) var(--s-3); }
.evt-section-links { display: flex; flex-direction: column; gap: var(--s-1); }
.evt-section-links a { display: flex; align-items: center; min-height: var(--control-height-sm); padding: var(--s-1) var(--s-2); border-left: 3px solid transparent; border-radius: var(--r-s); color: var(--navy); font-size: var(--t-sub); line-height: 1.3; text-decoration: none; }
.evt-section-links a:hover { background: var(--wash); }
.evt-section-links a[aria-current="location"] { border-left-color: var(--gold-dark); background: var(--paper); color: var(--navy-dark); font-weight: 700; }
.evt-section-bulk { display: flex; flex-wrap: wrap; gap: var(--s-1); border-top: 1px solid var(--line); margin-top: var(--s-3); padding-top: var(--s-3); }
.evt-section-bulk .btn { padding-inline: var(--s-2); min-height: var(--control-height-sm); font-size: var(--t-sub); }
.evt-section-balance { border-top: 1px solid var(--line); margin-top: var(--s-3); padding: var(--s-3); font-size: var(--t-sub); line-height: 1.7; color: var(--navy); font-variant-numeric: tabular-nums; }
.evt-section-mobile { display: none; }
.evt-section { min-width: 0; margin-bottom: var(--s-4); background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-l); scroll-margin-top: var(--s-4); }
.evt-section-heading { margin: 0; font-family: Inter, sans-serif; }
.evt-section-toggle { display: flex; align-items: center; gap: var(--s-2); width: 100%; min-height: 3.25rem; padding: var(--s-3) var(--s-4); background: transparent; border: 0; border-radius: var(--r-l); color: var(--text-heading); font: 650 var(--t-section)/1.4 Inter, sans-serif; text-align: left; cursor: pointer; }
.evt-section-toggle:hover { background: var(--wash); }
.evt-section-chevron { display: inline-block; font-size: var(--t-title); line-height: 1; transform: rotate(90deg); }
.evt-section-toggle[aria-expanded="false"] .evt-section-chevron { transform: rotate(0); }
.evt-section-body { min-width: 0; padding: 0 var(--s-4) var(--s-4); }
.evt-section-body[hidden] { display: none; }
.evt-section-body > .card { padding: 0; margin: 0; border: 0; box-shadow: none; border-radius: 0; }
.evt-section-body > .card > .row:first-child { flex-wrap: wrap; }
.evt-section[data-evt-section="evt-functions"] .evt-section-body > .card > .row:first-child > strong,
.evt-section[data-evt-section="evt-staffing"] .evt-section-body > .card > .row:first-child > strong,
.evt-section[data-evt-section="evt-servers"] .evt-section-body > .card > .row:first-child > strong,
.evt-section[data-evt-section="evt-beo"] .evt-section-body > .card > .row:first-child > strong,
.evt-section[data-evt-section="evt-pull"] .evt-section-body > .card > .row:first-child > strong,
.evt-section[data-evt-section="evt-payments"] .evt-section-body > .card > .row:first-child > strong,
.evt-section[data-evt-section="evt-deposits"] .evt-section-body > .card > .row:first-child > strong,
.evt-section[data-evt-section="evt-recaps"] .evt-section-body > .card > .row:first-child > strong,
.evt-section[data-evt-section="evt-tasks"] #evtTasksTitle { display: none; }
.evt-section[data-evt-section="evt-beo"] .evt-section-body > .card { border-top: 0 !important; }
.evt-section[data-evt-section="evt-beo"] #beoOpenBtn { background: var(--navy); color: var(--paper); }
.evt-section-body > .evt-mark { scroll-margin-top: var(--s-4); }
.evt-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4) var(--s-6); margin: 0; }
.evt-fact-group { min-width: 0; margin: 0; display: flex; flex-direction: column; gap: var(--s-2); }
.evt-detail-fact { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: var(--s-2); align-items: baseline; }
.evt-facts dt { font-size: var(--t-sub); color: var(--muted); line-height: 1.5; margin: 0; }
.evt-facts dd { font-size: var(--t-body); font-weight: 600; line-height: 1.5; margin: 0; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.evt-fact-unset { color: var(--muted); font-weight: 400; }
.evt-section[data-evt-section="evt-info"] > .evt-section-heading { display: flex; align-items: center; gap: var(--s-2); padding-right: var(--s-4); }
.evt-section[data-evt-section="evt-info"] > .evt-section-heading .evt-section-toggle { flex: 1; min-width: 0; width: auto; }
.evt-details-actions { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: var(--s-2); }
[data-event-name-editor] .btn { min-height: var(--control-height-touch); }
.evt-details-actions .btn { white-space: nowrap; font-size: var(--t-sub); min-height: var(--control-height-sm); }
.evt-detail-fields { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-3); }
.evt-detail-field { min-width: 0; margin: 0; }
.evt-detail-field-wide { grid-column: span 2; }
.evt-detail-field-full { grid-column: 1 / -1; }
.evt-detail-field label { display: block; font-size: var(--t-sub); margin-bottom: var(--s-1); }
.evt-detail-field input, .evt-detail-field select, .evt-detail-field textarea { width: 100%; min-width: 0; min-height: var(--control-height-touch); font: inherit; font-size: var(--t-body); }
.evt-detail-field input[type="number"] { font-variant-numeric: tabular-nums; }
.evt-detail-field [aria-invalid="true"] { border-color: var(--bad-fg); }
.evt-detail-field-error { display: block; margin-top: var(--s-1); font-size: var(--t-sub); color: var(--bad-fg); }
.evt-details-error { margin-top: var(--s-3); }
.evt-special-requests { margin-top: var(--s-4); padding-top: var(--s-4); border-top: 1px solid var(--hair); font-size: var(--t-body); line-height: 1.6; overflow-wrap: anywhere; }
.evt-special-requests h3 { margin: 0 0 var(--s-2); color: var(--muted); font: 600 var(--t-sub)/1.5 Inter, sans-serif; }
.evt-functions-scroll { max-width: 100%; overflow-x: auto; overscroll-behavior-inline: contain; }
.evt-functions-table { margin-top: var(--s-1); }
.evt-functions-table th, .evt-functions-table td { vertical-align: top; }
.evt-functions-table th { white-space: nowrap; }
.evt-functions-table td:nth-child(3) { white-space: nowrap; }
.evt-functions-table td:nth-child(2) { min-width: 12rem; }
.evt-functions-table td:last-child { min-width: 10rem; }
.evt-functions-table .muted { font-size: var(--t-sub) !important; line-height: 1.5; }
.evt-document .beo-line:focus-within .acts { visibility: visible; }
.evt-document .beo-sec-nm { font-family: Inter, sans-serif; }
body.has-navback #beoDocBack.evt-quick-beo-back { display: inline-flex; }
.qv-foot:has(#qvBeo) { flex-wrap: wrap; }
.qv-open-event { flex: 1; }
.qv-foot:has(#qvBeo) #qvOpen { flex: 1 0 100%; }
.qv-foot:has(#qvBeo) .btn { min-height: var(--control-height-touch); }
.qv-foot #qvBeo { flex: 1; }
.evt-document .beo-line > div { min-width: 0; }
.evt-document .beo-line > div:first-child { overflow-wrap: anywhere; }
.evt-document .beo-line .qty, .evt-document .beo-line .price, .evt-document .beo-line .amt { white-space: nowrap; overflow-wrap: normal; }
.evt-document .beo-line .acts { display: flex; justify-content: flex-end; gap: var(--s-1); }
.evt-document .pln-item { min-height: var(--control-height-touch); }
@media (max-width: 1280px) { .evt-detail-fact { grid-template-columns: 5.5rem minmax(0, 1fr); } }
@media (max-width: 1100px) {
  .evt-record-main { flex-wrap: wrap; }
  .evt-record-actions { flex-basis: 100%; justify-content: flex-start; }
  .evt-workspace { grid-template-columns: 10rem minmax(0, 1fr); gap: var(--s-4); }
  .evt-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .evt-detail-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 800px) {
  .evt-workspace { display: block; margin-top: var(--s-3); }
  .evt-section-nav { z-index: 35; top: 0; max-height: none; overflow: visible; margin-bottom: var(--s-3); padding: var(--s-2) 0; background: var(--bg); }
  .evt-section-links, .evt-section-nav-title, .evt-section-balance { display: none; }
  .evt-section-mobile { display: flex; align-items: center; gap: var(--s-2); font-size: var(--t-sub); font-weight: 600; }
  .evt-section-mobile .sel { flex: 1; min-width: 0; min-height: var(--control-height-touch); font-size: var(--t-body); }
  .evt-section-bulk { padding-top: var(--s-1); margin-top: var(--s-1); border: 0; }
  .evt-section { scroll-margin-top: 7rem; }
  .evt-record-main { padding: var(--s-4); gap: var(--s-3); }
  .evt-record-actions .btn, .evt-section-bulk .btn { min-height: var(--control-height-touch); }
  .evt-readiness-summary { min-height: var(--control-height-touch); } /* fetch-1014: a thumb target; on a phone the sentence is hidden and this tap opens the checklist */
  .evt-readiness-needs { display: none; }
  .evt-details-actions .btn { min-height: var(--control-height-touch); }
}
@media (max-width: 480px) {
  .evt-facts { grid-template-columns: minmax(0, 1fr); gap: var(--s-3); }
  .evt-detail-fact { grid-template-columns: 7rem minmax(0, 1fr); }
  .evt-fact-group + .evt-fact-group { padding-top: var(--s-3); border-top: 1px solid var(--hair); }
  .evt-detail-fields { grid-template-columns: minmax(0, 1fr); }
  .evt-detail-field-wide { grid-column: auto; }
  .evt-section[data-evt-section="evt-info"] > .evt-section-heading { flex-wrap: wrap; padding-right: var(--s-3); }
  .evt-details-actions { margin-left: auto; padding-block: var(--s-1); }
  .evt-record-actions { gap: var(--s-1); }
  .evt-record-actions > .btn-primary { flex-basis: 100%; }
  .evt-section-body { padding-inline: var(--s-3); }
  .evt-document .beo-line, .evt-document .beo-cols { column-gap: var(--s-1); }
  .evt-document .beo-line, .evt-document .beo-cols { grid-template-columns: minmax(0, 1fr) 2rem 3.75rem 5.5rem; }
}
@media print {
  .evt-section-nav, .evt-section-toggle .evt-section-chevron { display: none !important; }
  .evt-workspace { display: block; }
  .evt-section-body[hidden] { display: block; }
  .evt-section { break-inside: auto; }
}
/* fetch-974: saved Reports analysis reads as a summary, priorities and supporting evidence. */
.rpt-reading { max-width: var(--w-narrow); margin-inline: auto; display: grid; gap: var(--s-3); overflow-wrap: anywhere; }
.rpt-reading .rpt-reading-section { margin: 0; min-width: 0; padding: var(--s-4); }
.rpt-reading .rpt-reading-heading { display: flex; align-items: baseline; gap: var(--s-2); margin-bottom: var(--s-2); }
.rpt-reading h2 { margin: 0; font-size: var(--t-section); line-height: 1.3; }
.rpt-reading h3 { margin: 0; font-size: var(--t-body); line-height: 1.45; font-weight: 600; }
.rpt-reading p { margin: var(--s-1) 0 0; font-size: var(--t-body); line-height: 1.55; white-space: pre-wrap; }
.rpt-reading .rpt-reading-count, .rpt-reading .rpt-reading-meta { color: var(--muted); font-size: var(--t-sub); line-height: 1.5; font-variant-numeric: tabular-nums; }
.rpt-reading .rpt-reading-list { list-style: none; margin: 0; padding: 0; }
.rpt-reading .rpt-reading-item { padding-block: var(--s-3); }
.rpt-reading .rpt-reading-item + .rpt-reading-item { border-top: 1px solid var(--line); }
.rpt-reading .rpt-reading-item:first-child { padding-top: var(--s-1); }
.rpt-reading .rpt-reading-item:last-child { padding-bottom: 0; }
.rpt-reading .rpt-reading-item > p { color: var(--muted); }
.rpt-reading .rpt-reading-support { display: grid; gap: var(--s-3); }
.rpt-reading .rpt-reading-severity { font-weight: 600; }
.rpt-reading .rpt-reading-severity--high { color: var(--bad-fg); }
.rpt-reading .rpt-reading-severity--medium { color: var(--warn-fg); }
.rpt-reading .rpt-reading-severity--low { color: var(--info-fg); }
.rpt-reading .rpt-reading-fold { margin-top: var(--s-2); }
.rpt-reading .rpt-reading-fold > summary { cursor: pointer; min-height: var(--control-height-touch); min-width: var(--control-height-touch); box-sizing: border-box; padding: var(--s-3) var(--s-2); font-size: var(--t-sub); line-height: 1.5; color: var(--text-heading); border-radius: var(--r-s); }
.rpt-reading .rpt-reading-fold > summary:hover { background: var(--wash); }
.rpt-reading .rpt-reading-fold-body { padding: var(--s-1) var(--s-2) var(--s-2); }
.rpt-reading .rpt-reading-fold-body blockquote { margin: var(--s-2) 0; padding-left: var(--s-3); border-left: 2px solid var(--line); font-size: var(--t-sub); line-height: 1.55; white-space: pre-wrap; color: var(--muted); }
.rpt-reading .rpt-reading-section:has(> .rpt-reading-full-summary[open]) > .rpt-reading-summary-preview { display: none; }
.rpt-reading .rpt-reading-sentiment { margin-top: var(--s-3); padding-top: var(--s-3); border-top: 1px solid var(--line); }
.rpt-reading .rpt-reading-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); gap: var(--s-4); margin: var(--s-3) 0 0; }
.rpt-reading .rpt-reading-metrics dt { color: var(--muted); font-size: var(--t-sub); }
.rpt-reading .rpt-reading-metrics dd { margin: var(--s-1) 0 0; font-size: var(--t-section); font-weight: 600; font-variant-numeric: tabular-nums; }
.rpt-reading .rpt-reading-metrics .rpt-reading-metric-note { font-size: var(--t-sub); line-height: 1.45; font-weight: 400; color: var(--muted); }
.rpt-reading .rpt-reading-signal { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--s-1) var(--s-3); }
@media (min-width: 900px) {
  .rpt-reading .rpt-reading-support { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .rpt-reading .rpt-reading-support > .rpt-reading-section:first-child:nth-last-child(3) { grid-row: span 2; }
}
@media print {
  .rpt-reading { display: block; max-width: none; }
  .rpt-reading .rpt-reading-section { border: 0; box-shadow: none; padding: var(--s-3) 0; break-inside: auto; }
  .rpt-reading .rpt-reading-support { display: block; }
  .rpt-reading .rpt-reading-item { break-inside: avoid; }
  .rpt-reading .rpt-reading-fold > summary { display: none; }
  .rpt-reading .rpt-reading-fold::details-content { display: block; content-visibility: visible; }
  .rpt-reading .rpt-reading-fold > .rpt-reading-fold-body { display: block !important; }
  .rpt-reading .rpt-reading-section:has(> .rpt-reading-full-summary) > .rpt-reading-summary-preview { display: none; }
}

/* fetch-974: questions, visible definitions and paged report results. */
.reports-page .rpt-question, .reports-page .rpt-report-definition { padding: var(--s-5); margin-block: var(--s-4); }
.rpt-question-heading { display: flex; align-items: start; justify-content: space-between; gap: var(--s-5); }
.rpt-question-heading h2 { font-size: var(--t-section); color: var(--navy-dark); margin: 0 0 var(--s-2); }
.rpt-question-heading p { margin: 0 0 var(--s-4); color: var(--muted); font-size: var(--t-body); line-height: 1.5; }
.rpt-question-heading > .field { min-width: 15rem; max-width: 24rem; }
.rpt-question textarea { width: 100%; box-sizing: border-box; padding: var(--s-3); font: inherit; font-size: var(--t-body); line-height: 1.5; border: 1px solid var(--line); border-radius: var(--r-s); resize: vertical; min-height: 5rem; }
.rpt-question-actions, .rpt-save-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.rpt-question-actions { margin-block: var(--s-3); }
#rptCustom .btn, #rptCustom select, #rptCustom input, .rpt-pagination .btn { min-height: var(--control-height-touch); font-size: var(--t-body); }
#rptCustom .field label { font-size: var(--t-sub); }
.rpt-question .rpt-load { margin-bottom: var(--s-3); }
.rpt-message { font-size: var(--t-body); line-height: 1.5; margin-block: var(--s-3); }
.rpt-message-error { color: var(--bad-fg); }
/* fetch-1039: the reader's question sits above the box it is answered in, with its choices as 44px buttons; Undo
   follows the status line; an empty result is a centred card, never a table of zeros. */
#rptCustom .rpt-pending { margin-bottom: var(--s-3); }
#rptCustom .rpt-pending p { margin: 0; font-size: var(--t-body); line-height: 1.5; }
#rptCustom .rpt-choices { margin: var(--s-2) 0 0; }
#rptCustom .rpt-question-ready > form > .rpt-pending { grid-column: 1 / -1; margin: 0; }
#rptCustom .rpt-undo { margin-left: var(--s-2); }
#rptCustom .rpt-empty-result .rpt-choices { justify-content: center; margin-bottom: var(--s-3); }
.rpt-definition { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); margin: var(--s-3) 0 var(--s-5); }
.rpt-definition dt, .rpt-totals dt { color: var(--muted); font-size: var(--t-sub); margin-bottom: var(--s-1); }
.rpt-definition dd { margin: 0; font-size: var(--t-body); line-height: 1.5; overflow-wrap: anywhere; }
.rpt-save-row { border-top: 1px solid var(--line); padding-top: var(--s-4); align-items: end; }
.rpt-save-row .field { flex: 1; min-width: 14rem; max-width: 30rem; }
.rpt-totals { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-4); padding: var(--s-4) var(--s-5); margin: var(--s-4) 0; background: var(--surface-card); border: 1px solid var(--line); border-radius: var(--r-m); }
.rpt-totals dd { margin: 0; color: var(--navy-dark); font-size: var(--t-title); font-weight: 650; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.rpt-report-notes { color: var(--muted); font-size: var(--t-sub); line-height: 1.5; margin-block: var(--s-3); }
.rpt-report-notes p { margin: var(--s-1) 0; }
.rpt-table-report { min-width: 0; }
.rpt-table-report .rpt-tbl-wrap { max-height: 34rem; overflow: auto; border: 1px solid var(--line); border-radius: var(--r-m); background: var(--surface-card); }
.rpt-table-report .rpt-tbl { width: 100%; }
.rpt-table-report .rpt-tbl th { position: sticky; top: 0; background: var(--wash); z-index: 1; }
.rpt-table-report .rpt-tbl td, .rpt-table-report .rpt-tbl th { font-size: var(--t-sub); text-align: left; }
.rpt-table-report .rpt-tbl .rpt-num { text-align: right; font-variant-numeric: tabular-nums; }
.rpt-pagination, .rpt-pagination > div { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--s-2); }
.rpt-pagination { padding-block: var(--s-3); font-size: var(--t-sub); color: var(--muted); }
@media (max-width: 700px) {
  .reports-page .rpt-question, .reports-page .rpt-report-definition { padding: var(--s-4); }
  .rpt-question-heading { flex-direction: column; gap: var(--s-2); }
  .rpt-question-heading > .field { min-width: 0; width: 100%; max-width: none; }
  .rpt-definition { grid-template-columns: minmax(0, 1fr); gap: var(--s-3); }
  .rpt-totals { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: var(--s-4); }
  .rpt-save-row .field { min-width: 0; flex-basis: 100%; }
  .rpt-pagination { align-items: start; }
  .rpt-pagination > div { width: 100%; }
  #rptCustom .btn { white-space: normal; }
}
@media print {
  #rptCustom button, #rptCustom .rpt-question, #rptCustom .rpt-save-row, #rptCustom .rpt-question-actions, .rpt-pagination { display: none !important; }
  .rpt-table-report .rpt-tbl-wrap { max-height: none; overflow: visible; border: 0; }
  .rpt-table-report .rpt-tbl th { position: static; }
  .rpt-table-report .rpt-tbl { table-layout: auto; }
  .rpt-table-report .rpt-tbl td, .rpt-table-report .rpt-tbl th { white-space: normal; overflow-wrap: anywhere; }
  .rpt-totals { break-inside: avoid; }
}
/* fetch-974: ready reports keep the follow-up and current scope visible above the result. */
#rptCustom .rpt-question-ready { display: grid; grid-template-columns: minmax(0, 1fr) 15rem; gap: var(--s-2) var(--s-4); align-items: end; padding: var(--s-4); }
#rptCustom .rpt-question-ready > .rpt-question-heading { grid-column: 2; grid-row: 1; }
#rptCustom .rpt-question-ready .rpt-question-heading > .field { min-width: 0; width: 100%; margin: 0; }
#rptCustom .rpt-question-ready > form { grid-column: 1; grid-row: 1; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: var(--s-2); }
#rptCustom .rpt-question-ready textarea { min-height: var(--control-height-touch); height: var(--control-height-touch); }
#rptCustom .rpt-question-ready .rpt-question-actions { margin: 0; }
#rptCustom .rpt-question-ready > .rpt-message, #rptCustom .rpt-question-ready > .rpt-load { grid-column: 1 / -1; margin: 0; }
#rptCustom .rpt-report-ready { padding: var(--s-4); }
#rptCustom .rpt-report-ready > .rpt-question-heading { align-items: center; gap: var(--s-3); }
#rptCustom .rpt-report-ready .rpt-ready-scope { margin: 0; font-size: var(--t-sub); }
#rptCustom .rpt-report-ready .rpt-question-actions { margin: 0; flex: 0 0 auto; }
#rptCustom .rpt-ready-folds { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2); margin-top: var(--s-2); }
#rptCustom .rpt-custom-fold { min-width: 0; }
#rptCustom .rpt-ready-folds > .rpt-custom-fold[open] { grid-column: 1 / -1; }
#rptCustom .rpt-custom-fold > summary { box-sizing: border-box; min-height: var(--control-height-touch); min-width: var(--control-height-touch); padding: var(--s-3) var(--s-2); cursor: pointer; color: var(--text-heading); font-size: var(--t-sub); line-height: 1.5; border-radius: var(--r-s); }
#rptCustom .rpt-custom-fold > summary:hover { background: var(--wash); }
#rptCustom .rpt-custom-fold-body { padding: var(--s-2); }
#rptCustom .rpt-custom-fold .rpt-definition { margin: 0; }
/* fetch-1043: Report details is edited by tapping. Checkboxes, not chip buttons - the print rules hide
   #rptCustom button, so a chip would print blank while a checkbox prints with its state. */
#rptCustom .rpt-definition-edit { grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); align-items: start; }
#rptCustom .rpt-edit-group { display: flex; flex-direction: column; gap: 0; }
#rptCustom .rpt-edit-group label {
  display: flex; align-items: center; gap: var(--s-2); min-height: var(--control-height-touch);
  font-size: var(--t-body); line-height: 1.4; color: var(--ink); cursor: pointer; overflow-wrap: anywhere;
}
#rptCustom .rpt-edit-group label:hover { background: var(--wash); border-radius: var(--r-s); }
#rptCustom .rpt-edit-group input[type="checkbox"] { flex: 0 0 auto; width: 1rem; height: 1rem; margin: 0; accent-color: var(--gold); }
#rptCustom .rpt-edit-group input:disabled + *, #rptCustom .rpt-edit-group input:disabled { cursor: not-allowed; }
#rptCustom .rpt-edit-group label:has(input:disabled) { color: var(--muted); cursor: not-allowed; }
#rptCustom .rpt-edit-hint { margin: var(--s-1) 0 0; font-size: var(--t-sub); color: var(--muted); line-height: 1.4; }
#rptCustom .rpt-edit-dates { display: flex; flex-wrap: wrap; gap: var(--s-2); }
#rptCustom .rpt-edit-dates input[type="date"] {
  flex: 1 1 9rem; min-width: 0; box-sizing: border-box; min-height: var(--control-height-touch);
  padding: var(--s-2); border: 1px solid var(--line); border-radius: var(--r-s);
  font-family: inherit; font-size: max(1rem, var(--t-body)); color: var(--ink); background: var(--surface-card);
}
#rptCustom .rpt-custom-fold .rpt-save-row { border: 0; padding: 0; }
@media (max-width: 1000px) {
  #rptCustom .rpt-question-ready > form { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 700px) {
  #rptCustom .rpt-question-ready { grid-template-columns: minmax(0, 1fr); }
  #rptCustom .rpt-question-ready > .rpt-question-heading { grid-column: 1; grid-row: 2; }
  #rptCustom .rpt-report-ready > .rpt-question-heading { align-items: start; }
}
@media print {
  #rptCustom .rpt-ready-folds { display: block; }
  #rptCustom .rpt-custom-save, #rptCustom .rpt-custom-fold > summary { display: none !important; }
  #rptCustom .rpt-custom-fold::details-content { display: block; content-visibility: visible; }
  #rptCustom .rpt-custom-fold-body { display: block !important; padding: 0; }
}

  /* fetch-985: Timesheets review controls; keep the portal and standalone shell aligned. */
  .tcw-item { min-height: var(--control-height-touch, 44px); }
  .tcm-hours { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex-shrink: 0; }
  .tcm-status { font-size: var(--t-sub); font-weight: 600; }
  .tc-status-live { color: var(--ok-fg); }
  .tcw-nrrow .stf-grow { min-width: 0; flex-basis: 180px; overflow-wrap: anywhere; }
  .tcw-nrrow .tcp-editbtn { min-height: var(--control-height-touch, 44px); }
  .tc-wksub { font-size: var(--t-sub); }
  @media (min-width: 641px) and (max-width: 900px) {
    .tcw-rail { max-height: 360px; }
    .tcw-lenses { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  @media (max-width: 640px) {
    .tc-wkbar .tc-wkbtn, .tc-minihead .btn, .tc-chips .tc-chip { min-height: var(--control-height-touch, 44px); min-width: var(--control-height-touch, 44px); }
    .tc-wkbar { padding-inline: 0; }
    .tc-wkbar .tc-wkbtn { padding-inline: var(--s-2); flex-shrink: 0; }
    .tc-wkmain { padding-inline: 0; }
    .tc-minihead > .row { width: 100%; flex-wrap: wrap; }
  }

  .tc-export-dialog { border: 0; margin: 7vh auto auto; color: var(--ink); width: calc(100% - var(--s-5) * 2); }
  .tc-export-dialog::backdrop { background: color-mix(in srgb, var(--navy-dark) 45%, transparent); }
  .tc-export-dialog .stf-field, .tc-export-dialog .stf-field--w { min-width: 0; flex: 1 1 180px; }
  .tc-export-dialog input, .tc-export-dialog select, .tc-export-dialog .btn { min-height: var(--control-height-touch, 44px); }
  .tc-export-dialog input[type="checkbox"] { min-height: 0; }
  .tc-export-dialog label.stf-sub { display: flex; align-items: center; gap: var(--s-2); min-height: var(--control-height-touch, 44px); }
  @media (max-width: 640px) {
    .tc-export-dialog { margin: 0; width: 100%; max-width: 100%; height: 100%; max-height: 100dvh; border-radius: 0; padding: var(--s-4); }
    .tc-export-dialog .stf-field, .tc-export-dialog .stf-field--w { flex: 1 1 auto; }
  }

  /* fetch-986: one compact owner for the pay week, page actions and venue scope. */
  .tc-page-header { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--s-3); padding: var(--s-1); margin-bottom: var(--s-2); }
  .tc-page-header .tc-sheethead { flex: 1 1 auto; min-width: 0; margin: 0; padding: 0; border: 0; }
  .tc-page-header .tc-wkbar { justify-content: center; gap: var(--s-1); }
  .tc-page-header .tc-wkmain { flex: 0 1 auto; min-width: 0; text-align: center; padding: 0; }
  .tc-page-header .tc-wkmain strong { display: block; font-size: var(--t-body); }
  .tc-page-header .tc-wksub { display: block; font-size: var(--t-sub); color: var(--muted); }
  .tc-page-header .tc-chips { display: flex; gap: var(--s-1); overflow-x: auto; scrollbar-width: none; flex: 1 1 420px; min-width: 0; margin: 0; padding: calc(var(--s-1) / 2) var(--s-1); border: 0; }
  .tc-page-header .tc-chip { flex: 0 0 auto; white-space: nowrap; }
  .tc-page-header .tc-wkbtn, .tc-page-header .tc-chip { min-height: var(--control-height-touch, 44px); min-width: var(--control-height-touch, 44px); }

  /* fetch-986: thin gold rules separate time entry, context and day totals. */
  .tcp-table, .tc-sheet { --tc-grid: color-mix(in srgb, var(--gold) 60%, var(--line)); border-collapse: collapse; }
  .tcp-table th, .tcp-table td, .tc-sheet th, .tc-sheet td { border-bottom: 1px solid var(--tc-grid); padding: var(--s-2); }
  .tcp-table :is(th, td):nth-child(1), .tcp-table :is(th, td):nth-child(5), .tcp-table :is(th, td):nth-child(6), .tcp-table :is(th, td):nth-child(9),
  .tc-sheet :is(th, td):nth-child(1), .tc-sheet :is(th, td):nth-child(4) { border-right: 1px solid var(--tc-grid); }
  .tcp-table .stf-total td, .tc-sheet .stf-total td { border-top: 1px solid var(--gold); }
  /* fetch-992: edit in the existing columns; nearby actions stay visible in the workbench. */
  .tcp-table td.tcp-editable { padding: 0; }
  .tcp-cellbtn { display: block; width: 100%; min-height: var(--control-height-touch, 44px); padding: var(--s-2); border: 0; border-radius: var(--r-s); background: transparent; color: inherit; font: inherit; text-align: inherit; white-space: nowrap; cursor: pointer; }
  .tcp-cellbtn:hover { background: var(--wash); text-decoration: underline; text-decoration-color: var(--gold-dark); text-underline-offset: var(--s-1); }
  .tcp-table .tcp-cellinput { box-sizing: border-box; width: 6.6em; min-width: 0; min-height: var(--control-height-touch, 44px); padding: var(--s-1) var(--s-2); border: 1px solid var(--gold); border-radius: var(--r-s); background: var(--surface-card, White); color: var(--ink); font: inherit; font-size: var(--t-body); font-variant-numeric: tabular-nums; }
  .tcp-table .tcp-cellinput[type="number"] { width: 4.5em; text-align: right; }
  .tcp-cellactions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1); margin-top: var(--s-2); }
  .tcp-cellactions .btn, #tcCellFull, #tcCellDiscard { min-height: var(--control-height-touch, 44px); min-width: var(--control-height-touch, 44px); padding: var(--s-1) var(--s-2); font-size: var(--t-sub); }
  .tcp-cellstatus { max-width: 25em; margin-top: var(--s-1); font-size: var(--t-sub); white-space: normal; }
  .tcp-cellinput[aria-invalid="true"] { border-color: var(--bad-fg); }
  .tcp-cellediting td > .tcp-chip { padding: 0; border: 0; border-radius: 0; background: transparent; }
  .tcp-cellediting td > .tcp-chip:first-child::after { content: ' ·'; }
  .tcm-dayhead { border-bottom: 1px solid var(--gold); }
  .tcm-sum > span + span { border-left: 1px solid color-mix(in srgb, var(--gold) 60%, var(--line)); padding-left: var(--s-3); }

  /* fetch-986: selected-person actions, with a contact choice before native composing. */
  .tc-quick-actions { position: relative; display: flex; align-items: flex-start; gap: var(--s-2); flex-wrap: wrap; margin: var(--s-2) 0 var(--s-3); }
  .tc-quick-actions .btn { min-height: var(--control-height-touch, 44px); text-decoration: none; }
  .tc-task-sheet { margin: 0 0 var(--s-4); }
  .tc-task-sheet > .card { margin-top: var(--s-2); }
  .tc-task-sheet .btn { min-height: var(--control-height-touch, 44px); }
  .tc-message-menu { position: relative; }
  .tc-message-menu > summary { display: flex; align-items: center; cursor: pointer; list-style: none; }
  .tc-message-menu > summary::-webkit-details-marker { display: none; }
  .tc-message-choices { position: absolute; top: calc(100% + var(--s-1)); left: 0; z-index: 10; width: 260px; max-width: calc(100vw - var(--s-5) * 2); padding: var(--s-3); border: 1px solid var(--line); border-radius: var(--r-m); background: var(--surface-card); box-shadow: 0 6px 18px color-mix(in srgb, var(--navy-dark) 15%, transparent); }
  .tc-contact { display: flex; flex-direction: column; justify-content: center; min-height: var(--control-height-touch, 44px); padding: var(--s-2) 0; color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--hair); overflow-wrap: anywhere; }
  .tc-contact small { font-size: var(--t-sub); color: var(--muted); }
  a.tc-contact:hover { background: var(--wash); }
  @media (max-width: 640px) { .tc-message-menu { position: static; } .tc-message-choices { left: 0; right: auto; max-width: 100%; } }

  /* fetch-986.1: reuse the shared chip emitter inside the Timesheets period card. */
  .tc-chips > .pgh { flex: 0 0 auto; margin: 0; padding: 0; border: 0; background: transparent; box-shadow: none; }
  .tc-chips .pgh-chips { display: flex; flex-wrap: nowrap; gap: var(--s-1); margin: 0; padding: 0; border: 0; overflow: visible; mask-image: none; -webkit-mask-image: none; }
  @media (max-width: 640px) {
    .tc-page-header .tc-chip { position: relative; isolation: isolate; padding-inline: var(--s-2); font-size: var(--t-label); border-color: transparent; background: transparent; }
    .tc-page-header .tc-chip::before { content: ""; position: absolute; inset: 5px 0; z-index: -1; border: 1px solid var(--line); border-radius: inherit; background: var(--paper); }
    .tc-page-header .tc-chip.on::before { background: var(--vc, var(--action-primary)); border-color: var(--vc, var(--action-primary)); }
    .tc-page-header .tc-chip:hover::before { border-color: var(--vc, var(--action-primary)); }
  }

/* fetch-986.1: every schedule lens reserves the same period and family positions. */
.pgh--strip.pgh--schedule { --schedule-period-width: calc(var(--control-height-touch) * 2 + 13em); font-size: var(--t-body); justify-content: flex-start; flex-wrap: nowrap; gap: var(--s-1); margin: 0 0 var(--s-3); padding: var(--s-2); border: 1px solid var(--line); background: var(--paper); }
.pgh--strip.pgh--schedule > .pgh-nav:not(.pgh-nav--tail) { display: grid; grid-template-columns: var(--control-height-touch) minmax(0, 1fr) var(--control-height-touch); gap: var(--s-1); width: var(--schedule-period-width); flex: 0 0 var(--schedule-period-width); }
.pgh--strip.pgh--schedule > .pgh-nav:not(.pgh-nav--tail) > :only-child { grid-column: 1 / -1; }
.pgh--strip.pgh--schedule > .pgh-nav:not(.pgh-nav--tail) .pgh-navlabel { width: 100%; min-width: 0; text-align: center; white-space: normal; }
.pgh--strip.pgh--schedule .pgh-navfield { flex-direction: row; align-items: center; gap: var(--s-2); min-height: var(--control-height-touch); }
.pgh--strip.pgh--schedule .pgh-navfield > span { flex: 0 0 auto; }
.pgh--strip.pgh--schedule .pgh-navfield > .sel { flex: 1; width: auto; }
.pgh--strip.pgh--schedule .pgh-seg { flex-wrap: nowrap; }
.pgh--strip.pgh--schedule .pgh-seg button { padding-inline: var(--s-1); }
.pgh--strip.pgh--schedule .pgh-chip { padding-inline: var(--s-1); }
.pgh--strip.pgh--schedule > .pgh-nav--tail { gap: var(--s-1); }
.pgh--strip.pgh--schedule > .pgh-nav--tail .btn { padding-inline: var(--s-2); }
.sched-agenda-days { margin-block: var(--s-3); }
.sched-agenda h2 { font-size: var(--t-section); margin: 0 0 var(--s-2); }
.sched-agenda-crew h3 { font-size: var(--t-body); margin: var(--s-4) 0 var(--s-1); color: var(--muted); }
.sched-agenda-row { display: flex; align-items: center; border-bottom: 1px solid var(--hair); }
.sched-agenda-duty { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-2); align-items: center; min-height: var(--control-height-touch); padding: var(--s-2) 0; flex: 1; min-width: 0; background: none; border: 0; color: var(--ink); text-align: left; font: inherit; font-size: var(--t-body); }
.sched-agenda-duty span { text-align: right; color: var(--muted); font-size: var(--t-sub); font-variant-numeric: tabular-nums; }
.sched-agenda-duty > * { overflow-wrap: anywhere; }
.sched-agenda-note { display: block; font-size: var(--t-sub); margin-top: var(--s-1); }
.sched-agenda-row .schd-pedit { flex: 0 0 var(--control-height-touch); min-width: var(--control-height-touch); min-height: var(--control-height-touch); margin-left: var(--s-1); color: var(--muted); }
.sched-agenda-events { border-block: 1px solid var(--line); padding-block: var(--s-2); }
.sched-agenda-events summary { min-height: var(--control-height-touch); align-content: center; font-size: var(--t-sub); }
.sched-agenda-editor { padding: var(--s-3); background: var(--wash); }
.sched-agenda-editor .schd-form { min-width: 0; }
.sched-filters::backdrop { background: var(--surface-overlay, rgb(0 0 0 / 40%)); }
/* fetch-1050: phone schedule controls fit the viewport; venue scope lives in Filters. */
@media (max-width: 640px) {
  .pgh.pgh--schedule { flex-wrap: wrap; overflow: visible; box-shadow: none; gap: var(--s-2); }
  .pgh.pgh--schedule > .pgh-nav:not(.pgh-nav--tail) { flex: 1 0 100%; width: 100%; }
  .pgh.pgh--schedule > .pgh-row { flex: 1 0 100%; width: 100%; }
  .pgh.pgh--schedule .pgh-seg { display: flex; width: 100%; }
  .pgh--schedule .pgh-schedule-select { padding: 0; border: 0; background: none; }
  .pgh--schedule .pgh-schedule-select .sel { width: 100%; flex: 1; min-width: 0; min-height: var(--control-height-touch); }
  .pgh.pgh--schedule .pgh-seg button { white-space: normal; }
  .pgh.pgh--schedule > .pgh-nav--tail { flex: 1 0 100%; flex-wrap: wrap; width: 100%; }
  .pgh.pgh--schedule > .pgh-nav--tail > button { flex: 1 1 auto; white-space: normal; }
  #sgViewBg { padding: 0; align-items: stretch; }
  #sgViewDialog { width: 100%; max-width: none; height: 100dvh; max-height: 100dvh; border-radius: 0; box-sizing: border-box; overflow-y: auto; padding: var(--s-4); }
  #sgViewDialog .cse-modal-head { position: sticky; top: calc(-1 * var(--s-4)); background: var(--surface-card); z-index: 1; padding-block: var(--s-3); }
  #sgViewDialog .sg-view-dialog-actions { position: sticky; bottom: calc(-1 * var(--s-4)); background: var(--surface-card); padding-block: var(--s-3); border-top: 1px solid var(--line); }
  #sgViewDialog .sg-view-apply { flex: 1 0 100%; }
  .sched-filters { margin: 0; width: 100%; max-width: none; height: 100dvh; max-height: 100dvh; border: 0; border-radius: 0; padding: var(--s-4); box-sizing: border-box; }
  .sched-filters .actions { margin-top: var(--s-5); }
  .sgp-group[data-sgvenue-group] > .sgp-gh { color: color-mix(in srgb, var(--vc) 62%, var(--ink)); font-size: var(--t-section); text-transform: none; letter-spacing: normal; border-bottom: 2px solid var(--vc); padding-block: var(--s-2); margin-block: var(--s-3) var(--s-2); }
}
/* fetch-1051: one compact picker/icon row; the date strip owns phone week gestures. */
.schedule-panel-section { margin-top: var(--s-4); padding-top: var(--s-3); border-top: 1px solid var(--line); }
.schedule-panel-section h3 { font-size: var(--t-body); margin: 0 0 var(--s-2); }
/* fetch-1053: native touch/trackpad scrolling with one whole week per snap. */
.schedule-week-scroller { display: flex; position: relative; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; touch-action: pan-x pan-y pinch-zoom; -webkit-overflow-scrolling: touch; scrollbar-width: thin; direction: ltr; }
.schedule-week-page { flex: 0 0 100%; min-width: 0; scroll-snap-align: start; scroll-snap-stop: always; }
.schedule-week-page > .sgp-strip { height: 100%; }
@media (max-width: 640px) {
  :is(#eventStaffStrip, #managerScheduleStrip).pgh.pgh--schedule { display: grid; grid-template-columns: minmax(0, 1fr) var(--control-height-touch); align-items: center; padding: var(--s-2); }
  :is(#eventStaffStrip, #managerScheduleStrip).pgh.pgh--schedule > .pgh-row { grid-column: 1; grid-row: 1; min-width: 0; }
  :is(#eventStaffStrip, #managerScheduleStrip).pgh.pgh--schedule > .pgh-nav--tail { display: contents; }
  :is(#eventStaffStrip, #managerScheduleStrip) :is(#sgViewBtn, #schedFiltersBtn) { grid-column: 2; grid-row: 1; display: inline-flex; align-items: center; justify-content: center; position: relative; min-width: var(--control-height-touch); width: var(--control-height-touch); height: var(--control-height-touch); padding: 0; background: transparent; border-color: transparent; color: var(--text-heading); }
  :is(#eventStaffStrip, #managerScheduleStrip) :is(#sgViewBtn, #schedFiltersBtn):hover { background: var(--wash); }
  .schedule-filter-glyph { display: block; flex: 0 0 auto; }
  .pgh-icon-count { position: absolute; top: 0; right: 0; min-width: var(--s-3); border-radius: var(--r-m); padding: 0 var(--s-1); background: var(--ink); color: var(--paper); font-size: var(--t-label); line-height: 1.4; }
  #eventStaffStrip #sgPublish { grid-column: 1 / -1; min-height: var(--control-height-touch); }
  .sgp-context:has(.sg-live-state .b-green):not(:has(.sgp-draft-summary)) { margin: 0; min-height: 0; }
}
@media (max-width: 360px) { .pgh--strip.pgh--schedule { --schedule-period-width: calc(var(--control-height-touch) * 2 + 12em); } }
.sg-desktop-header { display: block; margin-bottom: var(--s-3); }
.sg-desktop-header > .pgh--schedule { margin-bottom: var(--s-1); }
.sg-desktop-header > .sg-live-state { max-width: none; justify-content: flex-end; }

/* The embedded Culinary frame drops its old top gap; its family controls share the portal origin. */
.wrap.w-bleed:has(#culinaryScheduleStrip) .headwrap { padding-top: var(--s-6); }

/* fetch-1019: the manager asset record. Public QR records and shared issue markup stay intact. */
.asset-detail { min-width: 0; overflow-wrap: anywhere; }
.asset-detail .asset-detail-back { margin-bottom: var(--s-3); }
.asset-detail .asset-detail-overview { padding: var(--s-5); margin-bottom: var(--s-4); }
.asset-detail .asset-detail-heading { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--s-3); }
.asset-detail .asset-detail-heading > div { flex: 1 1 18rem; min-width: 0; }
.asset-detail h2 { margin: 0; font: 650 var(--t-title)/1.3 Inter, sans-serif; color: var(--text-heading); }
.asset-detail .asset-detail-context { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); align-items: center; margin-top: var(--s-2); font-size: var(--t-body); color: var(--muted); }
.asset-detail .asset-detail-location { margin: var(--s-1) 0 0; font-size: var(--t-sub); line-height: 1.5; }
.asset-detail .asset-detail-specs { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: var(--s-3) var(--s-5); margin: var(--s-4) 0 0; padding-top: var(--s-4); border-top: 1px solid var(--hair); }
.asset-detail .asset-detail-specs > div { min-width: 0; }
.asset-detail .asset-detail-specs dt { font-size: var(--t-sub); color: var(--muted); margin-bottom: var(--s-1); }
.asset-detail .asset-detail-specs dd { margin: 0; font-size: var(--t-body); font-variant-numeric: tabular-nums; }
.asset-detail .asset-detail-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-4); }
.asset-detail .btn { min-height: var(--control-height-touch); max-width: 100%; white-space: normal; font-size: var(--t-sub); }
.asset-detail .asset-detail-action { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); padding: var(--s-2) var(--s-3); border-color: transparent; background: transparent; color: var(--action-primary); }
.asset-detail .asset-detail-action:hover { background: var(--wash); }
.asset-detail .asset-detail-action > span { display: inline-flex; flex: 0 0 auto; }
.asset-detail .asset-detail-qr { display: grid; justify-items: start; gap: var(--s-2); padding-top: var(--s-4); }
.asset-detail .asset-detail-qr p { margin: 0; font-size: var(--t-sub); line-height: 1.5; }
.asset-detail .asset-detail-sections { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); align-items: start; margin-bottom: var(--s-4); }
.asset-detail .asset-detail-section { min-width: 0; margin: 0; padding: var(--s-4); }
.asset-detail .asset-detail-section-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2) var(--s-3); margin-bottom: var(--s-3); scroll-margin-top: var(--s-5); }
.asset-detail h3 { margin: 0; font: 650 var(--t-section)/1.35 Inter, sans-serif; color: var(--text-heading); }
.asset-detail .asset-detail-empty { margin: 0; font-size: var(--t-sub); line-height: 1.5; }
.asset-detail .asset-detail-row { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-3); align-items: baseline; justify-content: space-between; padding: var(--s-3) 0; border-bottom: 1px solid var(--hair); font-size: var(--t-body); }
.asset-detail .asset-detail-row > :first-child { flex: 1 1 12rem; min-width: 0; }
.asset-detail .asset-detail-row:last-child { border-bottom: 0; }
.asset-detail .asset-detail-log { padding-bottom: var(--s-3); border-bottom: 1px solid var(--hair); }
.asset-detail .asset-detail-log:last-child { padding-bottom: 0; border-bottom: 0; }
.asset-detail .asset-detail-log .asset-detail-row { padding-bottom: var(--s-1); border-bottom: 0; }
.asset-detail .asset-detail-meta { margin-top: var(--s-1); font-size: var(--t-sub); line-height: 1.5; }
.asset-detail .asset-detail-amount { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--s-2); font-variant-numeric: tabular-nums; }
.asset-detail .asset-detail-total { font-size: var(--t-body); font-variant-numeric: tabular-nums; }
.asset-detail .asset-detail-work { display: flex; gap: var(--s-2); align-items: flex-start; font-size: var(--t-sub); line-height: 1.5; }
.asset-detail .asset-detail-work > :first-child { flex: 0 0 auto; }
.asset-detail .asset-detail-issues .row { flex-wrap: wrap; gap: var(--s-2) var(--s-3); }
.asset-detail .asset-detail-issues .row > div { min-width: 0; }
.asset-detail .asset-detail-issues .row > div:last-child { flex-wrap: wrap; }
.asset-detail .asset-detail-issues .field { min-width: 0; }
.asset-detail .asset-detail-issues input, .asset-detail .asset-detail-issues select { min-height: var(--control-height-touch); }
.asset-detail .asset-detail-maps { grid-column: 1/-1; }
.asset-detail .asset-detail-maps figure { margin: 0 0 var(--s-4); }
.asset-detail .asset-detail-maps figure:last-child { margin-bottom: 0; }
.asset-detail .asset-detail-maps figcaption { margin-bottom: var(--s-2); font-size: var(--t-sub); }
.asset-detail .asset-detail-map { max-width: 100%; height: auto; border-radius: var(--r-s); border: 1px solid var(--line); }
@media (max-width: 820px) {
  .asset-detail .asset-detail-sections { grid-template-columns: minmax(0, 1fr); }
  .asset-detail .asset-detail-overview { padding: var(--s-4); }
}

/* fetch-1019: Equipment identity leads; condition and actions have their own space. */
.toolbar:has(#assetQrSheetBtn) :is(.btn, .sel) { min-height: var(--control-height-touch); }
#content .asset-card { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: var(--s-2) var(--s-4); align-items: start; padding: var(--s-4); cursor: pointer; }
.asset-card:hover { border-color: var(--muted); }
.asset-identity { min-width: 0; }
.asset-name { display: block; border: 0; background: none; color: var(--ink); font: inherit; font-size: var(--t-section); font-weight: 650; line-height: 1.4; text-align: left; padding: 0; min-height: var(--control-height-touch); cursor: pointer; overflow-wrap: anywhere; max-width: 100%; }
.asset-name:hover { color: var(--navy); text-decoration: underline; text-underline-offset: .2em; }
.asset-place { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-3); align-items: baseline; font-size: var(--t-body); line-height: 1.5; overflow-wrap: anywhere; }
.asset-place .vchip { white-space: normal; }
.asset-category { margin-top: var(--s-1); color: var(--muted); font-size: var(--t-sub); line-height: 1.5; overflow-wrap: anywhere; }
.asset-condition { display: flex; align-items: center; min-height: var(--control-height-touch); }
.asset-actions { display: flex; align-items: center; gap: var(--s-1); }
.asset-action { display: inline-flex; align-items: center; justify-content: center; width: var(--control-height-touch); height: var(--control-height-touch); flex: none; padding: 0; border: 0; border-radius: var(--r-s); background: none; color: var(--navy); font: inherit; font-size: var(--t-section); cursor: pointer; }
.asset-action:hover:not(:disabled) { background: var(--wash); }
.asset-action:disabled { opacity: .3; cursor: default; }
.asset-action .ci { display: block; }
.asset-signals { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s-4); padding-top: var(--s-2); border-top: 1px solid var(--hair); }
.asset-signal { display: inline-flex; align-items: center; gap: var(--s-1); font: inherit; font-size: var(--t-sub); line-height: 1.5; text-align: left; overflow-wrap: anywhere; min-width: 0; }
button.asset-signal { background: none; border: 0; padding: 0; min-height: var(--control-height-touch); cursor: pointer; }
button.asset-signal:hover { text-decoration: underline; text-underline-offset: .2em; }
.asset-signal--urgent { color: var(--bad-fg); }
.asset-signal--warn { color: var(--warn-fg); }
.asset-signal--info { color: var(--navy); }
#content .asset-group { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--s-2); width: 100%; min-height: var(--control-height-touch); text-align: left; font: inherit; }
.asset-group-name { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-2); min-width: 0; overflow-wrap: anywhere; }
.asset-group-count { color: var(--muted); font-size: var(--t-sub); }
.asset-group[aria-expanded="true"] .grp-chev { transform: rotate(90deg); }
@media (max-width: 640px) {
  #content .asset-card { grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-2); }
  .asset-identity { grid-column: 1 / -1; }
  .asset-condition { grid-column: 1; }
  .asset-actions { grid-column: 2; justify-content: flex-end; }
  .asset-name { font-size: var(--t-body); }
  .asset-signals { gap: var(--s-2) var(--s-3); }
}
@media print {
  .asset-actions { display: none; }
  button.asset-signal { min-height: 0; }
  .asset-name { color: var(--ink); }
}

/* ---- fetch-1022: THE HOUSE RULES EDITOR for the three things a proposal prices from - the
   revenue-center matrix behind app_settings.pricing_rules (inside House rules), and the
   venue_rates sheet + the proposal_fees catalog (the Proposal rules section beneath it).
   Compact settings tables: every colour a token, every size a step on the type scale, no
   inline styles, so the debt ratchet stays flat. Phone: the tables scroll inside .pr-scroll. ---- */
.pr-bar { display: flex; gap: var(--s-2); align-items: center; flex-wrap: wrap; margin: var(--s-3) 0 var(--s-2); }
.pr-bar select { max-width: 16rem; }
.pr-bar .pr-check { display: inline-flex; gap: var(--s-1); align-items: center; font-size: var(--t-sub); color: var(--muted); }
.pr-scroll { overflow-x: auto; }
.pr-tbl { width: 100%; min-width: 60rem; border-collapse: collapse; font-size: var(--t-mid); } /* the floor keeps eight to eleven columns legible: past it the table scrolls inside .pr-scroll instead of squeezing every input to nothing (probe1022 B10 caught the squeeze at 390px) */
.pr-tbl th { text-align: left; font-size: var(--t-label); letter-spacing: .05em; text-transform: uppercase; color: var(--muted); font-weight: 600; padding: var(--s-1) var(--s-2); border-bottom: 1px solid var(--line); white-space: nowrap; }
.pr-tbl td { padding: var(--s-1) var(--s-2); border-bottom: 1px solid var(--hair); vertical-align: middle; }
.pr-tbl tr:last-child td { border-bottom: none; }
.pr-tbl input, .pr-tbl select { width: 100%; min-width: 0; font-size: var(--t-sub); padding: var(--s-1) var(--s-2); }
.pr-tbl .pr-num, .pr-tbl .pr-num input { text-align: right; font-variant-numeric: tabular-nums; }
.pr-w-money input { max-width: 6.5rem; }
.pr-w-cap input { max-width: 4.5rem; }
.pr-w-price input { max-width: 5.5rem; }
.pr-w-name input { min-width: 11rem; }
.pr-sec td { background: var(--wash); font-size: var(--t-label); letter-spacing: .06em; text-transform: uppercase; font-weight: 700; color: var(--navy-dark); }
.pr-row--off td { opacity: .55; }
.pr-row--off .pr-w-name input { text-decoration: line-through; }
.pr-matrix { border-collapse: collapse; font-size: var(--t-sub); max-width: 36rem; }
.pr-matrix th { font-size: var(--t-label); letter-spacing: .04em; text-transform: uppercase; color: var(--muted); font-weight: 600; padding: var(--s-1) var(--s-2); border-bottom: 1px solid var(--line); text-align: center; }
.pr-matrix th:first-child { text-align: left; }
.pr-matrix td { padding: var(--s-1) var(--s-2); border-bottom: 1px solid var(--hair); text-align: center; }
.pr-matrix td:first-child { text-align: left; font-weight: 500; white-space: nowrap; }
.pr-matrix tr:last-child td { border-bottom: none; }
.pr-matrix input[type="checkbox"] { accent-color: var(--navy); cursor: pointer; }
.pr-hint { font-size: var(--t-sub); color: var(--muted); margin-top: var(--s-1); }
.pr-dirty { outline: 2px solid var(--gold); outline-offset: 1px; }

/* ---- fetch-1024: THE PROPOSAL BUILDER on the Pipeline record - one panel in the summary chain (beside Move venue and
   Decline), the rate strip, the fact grid, the line table and the totals. Every colour a token, every size a step on
   the type scale, no inline styles; phone: the line table scrolls inside .pp-scroll, the page never does. ---- */
.pdx-proposal { display: flex; flex-direction: column; gap: var(--s-3); }
.pp-strip { display: flex; flex-wrap: wrap; background: var(--wash); border: 1px solid var(--line); border-radius: var(--r-m); overflow: hidden; }
.pp-cell { flex: 1 1 7.5rem; min-width: 0; padding: var(--s-2) var(--s-3); border-right: 1px solid var(--line); }
.pp-cell:last-child { border-right: none; }
.pp-l { font-size: var(--t-label); letter-spacing: .05em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.pp-v { font-size: var(--t-mid); font-weight: 600; font-variant-numeric: tabular-nums; margin-top: 2px; }
.pp-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: var(--s-3); padding-top: var(--s-3); border-top: 1px solid var(--hair); }
.pp-fact .pp-v { font-weight: 500; }
.pp-inputs { align-items: end; }
.pp-scroll { overflow-x: auto; }
.pp-tbl { width: 100%; min-width: 34rem; border-collapse: collapse; font-size: var(--t-mid); }
.pp-tbl th { text-align: left; font-size: var(--t-label); letter-spacing: .05em; text-transform: uppercase; color: var(--muted); font-weight: 600; padding: var(--s-1) var(--s-2); border-bottom: 1px solid var(--line); white-space: nowrap; }
.pp-tbl td { padding: var(--s-1) var(--s-2); border-bottom: 1px solid var(--hair); vertical-align: top; }
.pp-tbl tr:last-child td { border-bottom: none; }
.pp-tbl input { width: 100%; min-width: 0; font-size: var(--t-sub); padding: var(--s-1) var(--s-2); }
.pp-tbl .pp-num, .pp-tbl .pp-num input { text-align: right; font-variant-numeric: tabular-nums; }
.pp-w-name input { min-width: 13rem; }
.pp-w-price input { min-width: 5.5rem; max-width: 7rem; }
.pp-w-qty input { min-width: 4.75rem; max-width: 5.5rem; } /* room for three digits beside the spinner: "75" clipped to "7:" at 4.5rem (shot1024) */
.pp-w-total { white-space: nowrap; padding-top: calc(var(--s-1) + 6px); }
.pp-sec td { background: var(--navy); color: var(--paper); font-size: var(--t-label); letter-spacing: .08em; text-transform: uppercase; font-weight: 700; border-bottom: none; }
.pp-sec-note { font-weight: 400; letter-spacing: 0; text-transform: none; opacity: .85; }
.pp-section-add .btn { min-height: var(--control-height-touch); font-size: var(--t-sub); }
.pp-off td { opacity: .6; }
.pp-over .pp-w-name input, .pp-over .pp-w-price input { outline: 2px solid var(--gold); outline-offset: 1px; } /* an override on this proposal only - visible, as the design note asks */
.pp-totals { margin-left: auto; max-width: 28rem; border-top: 2px solid var(--navy); padding-top: var(--s-2); display: flex; flex-direction: column; gap: var(--s-1); }
.pp-trow { display: flex; justify-content: space-between; gap: var(--s-4); font-size: var(--t-mid); font-variant-numeric: tabular-nums; }
.pp-trow--sub { font-weight: 600; }
.pp-trow--grand { font-size: var(--t-section); font-weight: 700; color: var(--navy-dark); border-top: 1px solid var(--line); padding-top: var(--s-2); margin-top: var(--s-1); }
.pp-foot { margin-top: var(--s-2); }
@media (max-width: 640px) {
  .pp-totals { max-width: none; }
}

/* fetch-1097: one catalog browser keeps filters and batch actions visible while its results scroll. */
.pp-menu-entry { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--s-3); padding: var(--s-3) 0; border-block: 1px solid var(--line); }
.pp-menu-entry strong { font-size: var(--t-body); color: var(--text-heading); }
.pp-menu-entry .btn { min-height: var(--control-height-touch); }
.pp-menu-dialog { width: min(64rem, calc(100vw - var(--s-6))); height: min(54rem, calc(100dvh - var(--s-6))); max-width: none; max-height: none; padding: 0; margin: auto; border: 1px solid var(--line); border-radius: var(--r-l); background: var(--surface-card); color: var(--ink); overflow: hidden; box-sizing: border-box; }
.pp-menu-dialog[open] { display: flex; flex-direction: column; }
.pp-menu-dialog::backdrop { background: color-mix(in srgb, var(--navy-dark) 48%, transparent); }
.pp-menu-dialog * { box-sizing: border-box; }
.pp-menu-dialog .btn { min-height: var(--control-height-touch); font-size: var(--t-sub); white-space: normal; }
.pp-menu-head { flex: none; padding: var(--s-4) var(--s-5) 0; border-bottom: 1px solid var(--line); }
.pp-menu-title { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-3); margin-bottom: var(--s-3); }
.pp-menu-title h2 { margin: 0; font: 650 var(--t-title)/1.3 Inter, sans-serif; color: var(--text-heading); }
.pp-menu-title p { margin: var(--s-1) 0 0; font-size: var(--t-sub); line-height: 1.5; color: var(--muted); }
.pp-menu-filters { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-2) var(--s-3); }
.pp-menu-field { display: flex; flex-direction: column; gap: var(--s-1); min-width: 0; font-size: var(--t-sub); line-height: 1.4; font-weight: 600; color: var(--navy-dark); }
.pp-menu-search { grid-column: span 2; }
.pp-menu-field input, .pp-menu-field select { width: 100%; min-width: 0; height: var(--control-height-touch); padding: var(--s-2); border: 1px solid var(--line); border-radius: var(--r-s); background: var(--surface-card); color: var(--ink); font: 400 var(--t-body)/1.4 Inter, sans-serif; }
.pp-menu-tools { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-2); padding: var(--s-2) 0; font-size: var(--t-sub); font-variant-numeric: tabular-nums; }
.pp-menu-tools #ppMenuCount { margin-right: auto; }
.pp-menu-tools [aria-pressed="true"] { background: var(--navy); color: var(--paper); border-color: var(--navy); }
.pp-menu-warning { margin: 0 0 var(--s-2); padding: var(--s-2); font-size: var(--t-sub); line-height: 1.4; color: var(--warn-fg); background: var(--warn-bg); border-radius: var(--r-s); }
.pp-menu-results { flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; padding: var(--s-2) var(--s-5); scrollbar-gutter: stable; }
.pp-menu-item { display: grid; grid-template-columns: 1.25rem minmax(0, 1fr) auto; gap: var(--s-3); align-items: start; min-height: var(--control-height-touch); margin: 0; padding: var(--s-3); border-bottom: 1px solid var(--line); border-radius: var(--r-s); cursor: pointer; }
.pp-menu-item:hover { background: var(--wash); }
.pp-menu-item--selected { background: var(--wash); box-shadow: inset 3px 0 var(--navy); }
.pp-menu-item--unavailable { color: var(--warn-fg); }
.pp-menu-item input[type="checkbox"] { width: 1.15rem; height: 1.15rem; min-width: 0; min-height: 0; margin: var(--s-1) 0 0; accent-color: var(--navy); cursor: pointer; }
.pp-menu-copy { display: flex; flex-direction: column; gap: var(--s-1); min-width: 0; overflow-wrap: anywhere; }
.pp-menu-copy strong { font-size: var(--t-body); line-height: 1.5; color: var(--text-heading); }
.pp-menu-meta { font-size: var(--t-sub); line-height: 1.5; color: var(--muted); }
.pp-menu-description { font-size: var(--t-sub); line-height: 1.6; white-space: pre-wrap; }
.pp-menu-price { max-width: 7rem; padding-top: var(--s-1); font-size: var(--t-body); line-height: 1.5; font-weight: 600; color: var(--navy); font-variant-numeric: tabular-nums; text-align: right; }
.pp-menu-footer { flex: none; display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-5); border-top: 1px solid var(--line); background: var(--wash); }
.pp-menu-footer > div { flex: 1; min-width: 0; }
.pp-menu-footer strong { display: block; font-size: var(--t-body); font-variant-numeric: tabular-nums; }
.pp-menu-footer span { display: block; margin-top: var(--s-1); color: var(--muted); font-size: var(--t-sub); line-height: 1.4; }
@media (max-width: 640px) {
  .pp-menu-dialog { width: 100vw; height: 100dvh; border: 0; border-radius: 0; }
  .pp-menu-head { padding: var(--s-3) var(--s-3) 0; }
  .pp-menu-title { margin-bottom: var(--s-2); }
  .pp-menu-title h2 { font-size: var(--t-section); }
  .pp-menu-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2); }
  .pp-menu-field input, .pp-menu-field select { font-size: 1rem; }
  .pp-menu-tools { gap: var(--s-1); }
  .pp-menu-results { padding: 0 var(--s-2); }
  .pp-menu-item { grid-template-columns: 1.15rem minmax(0, 1fr) auto; gap: var(--s-2); padding: var(--s-3) var(--s-2); }
  .pp-menu-price { max-width: 4.75rem; font-size: var(--t-sub); }
  .pp-menu-footer { flex-wrap: wrap; gap: var(--s-2); padding: var(--s-2) var(--s-3) max(var(--s-2), env(safe-area-inset-bottom)); }
  .pp-menu-footer > div { flex-basis: calc(100% - 9rem); }
  .pp-menu-footer span { display: none; }
  .pp-menu-footer #ppMenuAdd { flex: 1 0 100%; }
}

/* ---- fetch-1025: THE PROPOSAL DOCUMENT and the saved versions on the record. The document is one sheet:
   the venue's mark, "designed exclusively for", the title in Cormorant Garamond (the one editorial moment - AGENTS.md
   reserves the face for it), the fact grid, the itemized table by section, the totals, the footnote, the confidential
   footer. Every colour a token, no inline styles; @media print hides the bar and lets the paper carry the colour. ---- */
.pdx-proposals .pp-versions { display: flex; flex-direction: column; gap: var(--s-1); margin-top: var(--s-2); }
.pp-version { display: flex; align-items: center; gap: var(--s-3); font-size: var(--t-mid); flex-wrap: wrap; }
.pp-version-v { font-weight: 700; color: var(--navy-dark); min-width: 2.2rem; font-variant-numeric: tabular-nums; }
.pp-version .btn { margin-left: auto; }

.pdoc-wrap { max-width: 52rem; margin: 0 auto; }
.pdoc-bar { display: flex; align-items: center; gap: var(--s-3); justify-content: space-between; margin-bottom: var(--s-4); flex-wrap: wrap; }
.pdoc { background: var(--paper); color: var(--ink); padding: var(--s-6); border: 1px solid var(--line); border-radius: var(--r-s); font-family: Inter, Arial, sans-serif; font-size: var(--t-body); line-height: 1.55; overflow-wrap: anywhere; }
/* fetch-1087: approved Design A. One quiet masthead, complete saved menu, then the itemized estimate. */
.pdoc-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-5); padding-bottom: var(--s-5); border-bottom: 1px solid var(--gold); }
.pdoc-mark { max-width: 52%; max-height: 5rem; height: auto; width: 13rem; object-fit: contain; object-position: left center; display: block; margin: 0; }
.pdoc-mark-text { font-family: 'Cormorant Garamond', Georgia, serif; font-size: var(--t-title); color: var(--navy-dark); }
.pdoc-doc-label { display: flex; flex-direction: column; gap: var(--s-1); text-align: right; font-size: var(--t-sub); color: var(--navy); }
.pdoc-doc-label strong { color: var(--navy-dark); letter-spacing: .12em; text-transform: uppercase; font-weight: 600; }
.pdoc-event { padding: var(--s-5) 0; border-bottom: 1px solid var(--line); }
.pdoc-title { font-family: Inter, Arial, sans-serif; font-weight: 600; font-size: var(--t-title); color: var(--navy-dark); margin: 0; line-height: 1.3; }
.pdoc-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); gap: var(--s-3) var(--s-5); margin-top: var(--s-4); }
.pdoc-fact-l { font-size: var(--t-sub); color: var(--navy); font-weight: 400; margin-bottom: var(--s-1); }
.pdoc-fact-v { font-weight: 500; font-variant-numeric: tabular-nums; }
.pdoc-menu { padding-top: var(--s-5); }
.pdoc h2 { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 600; font-size: var(--t-display); color: var(--navy-dark); margin: 0 0 var(--s-4); line-height: 1.2; }
.pdoc-menu-section { margin: 0 0 var(--s-5); padding-bottom: var(--s-5); border-bottom: 1px solid var(--line); }
.pdoc-menu-section:last-child { margin-bottom: 0; }
.pdoc h3.pdoc-menu-section-title { margin: 0 0 var(--s-3); font: 600 var(--t-sub)/1.5 Inter, Arial, sans-serif; color: var(--navy); text-transform: uppercase; letter-spacing: .09em; }
.pdoc-menu-item + .pdoc-menu-item { margin-top: var(--s-4); }
.pdoc-menu-copy { min-width: 0; }
.pdoc-menu-copy h4 { font: 600 var(--t-body)/1.4 Inter, Arial, sans-serif; color: var(--navy-dark); margin: 0 0 var(--s-2); }
.pdoc-menu-detail { font-size: var(--t-body); color: var(--ink); white-space: pre-line; overflow-wrap: anywhere; }
.pdoc-estimate { margin-top: var(--s-5); }
.pdoc-tbl { width: 100%; border-collapse: collapse; font-size: var(--t-sub); }
.pdoc-tbl th { background: transparent; color: var(--navy); font-size: var(--t-sub); font-weight: 500; padding: var(--s-2); border-bottom: 1px solid var(--line); text-align: left; }
.pdoc-tbl td { padding: var(--s-3) var(--s-2); border-bottom: 1px solid var(--hair); vertical-align: top; }
.pdoc-tbl th:first-child, .pdoc-tbl td:first-child { padding-left: 0; }
.pdoc-tbl th:last-child, .pdoc-tbl td:last-child { padding-right: 0; }
.pdoc-tbl .pdoc-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pdoc-detail { color: var(--navy); font-size: var(--t-sub); margin-top: var(--s-1); white-space: pre-line; }
.pdoc-sec td { background: transparent; font-weight: 600; font-size: var(--t-sub); letter-spacing: .06em; text-transform: uppercase; color: var(--navy-dark); padding-top: var(--s-4); border-bottom: 1px solid var(--line); }
.pdoc-sub td { font-weight: 600; border-bottom: 1px solid var(--line); }
.pdoc-grand td { font-weight: 600; border-top: 2px solid var(--navy); padding-top: var(--s-2); }
.pdoc-total td { font-weight: 600; font-size: var(--t-section); color: var(--navy-dark); border-top: 2px solid var(--navy); border-bottom: none; }
.pdoc-minimums, .pdoc-contact { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); gap: var(--s-3) var(--s-5); margin-top: var(--s-4); }
.pdoc-foot { margin: var(--s-4) 0 0; font-size: var(--t-sub); color: var(--navy); line-height: 1.6; white-space: pre-line; }
.pdoc-next { margin-top: var(--s-5); padding-top: var(--s-4); border-top: 1px solid var(--gold); }
.pdoc-next h2 { font-size: var(--t-title); }
.pdoc-conf { display: flex; justify-content: space-between; gap: var(--s-3); flex-wrap: wrap; margin-top: var(--s-5); padding-top: var(--s-3); border-top: 1px solid var(--line); font-size: var(--t-sub); color: var(--navy); }
.pp-description-label { display: block; margin-top: var(--s-2); font-size: var(--t-sub); color: var(--navy); }
.pp-tbl textarea.pp-description { display: block; width: 100%; min-width: 13rem; min-height: var(--control-height-touch); resize: vertical; font: var(--t-body)/1.5 Inter, Arial, sans-serif; margin-top: var(--s-1); }
/* fetch-1094: source-assigned photos stay beside their dish, with optional omission in the draft. */
.pp-photo { display: flex; align-items: flex-start; gap: var(--s-3); padding: var(--s-3) 0; }
.pp-photo-image { display: block; flex: 0 0 5rem; width: 5rem; height: 4rem; object-fit: contain; background: var(--wash); border-radius: var(--r-s); }
.pp-photo--omitted .pp-photo-image { opacity: .45; }
.pp-photo-copy { min-width: 0; }
.pp-photo-status { font-size: var(--t-sub); color: var(--navy); }
.pp-photo-actions { display: flex; gap: var(--s-2); flex-wrap: wrap; margin-top: var(--s-1); }
.pp-photo-actions .btn, .pp-photo-choice { min-height: var(--control-height-touch); }
.pp-photo-choice { display: inline-flex; align-items: center; gap: var(--s-2); cursor: pointer; font-size: var(--t-sub); }
.pp-tbl .pp-photo-choice input { width: 1.1rem; height: 1.1rem; min-width: 1.1rem; accent-color: var(--navy); }
.pdoc-menu-item--photo { display: grid; grid-template-columns: minmax(0, 1fr) 12rem; gap: var(--s-5); align-items: start; }
.pdoc-photo-frame { margin: 0; min-width: 0; }
.pdoc-photo { display: block; width: 100%; max-height: 10rem; object-fit: contain; object-position: center top; }
.pdoc-photo-error { display: none; padding: var(--s-3); color: var(--warn-fg); background: var(--warn-bg); font-size: var(--t-sub); }
.pdoc-photo-frame--error .pdoc-photo { display: none; }
.pdoc-photo-frame--error .pdoc-photo-error { display: block; }
.pdoc-bar-acts { display: flex; gap: var(--s-2); flex-wrap: wrap; } /* fetch-1029: Send beside Print */
.pdoc-send { max-width: 40rem; margin: 0 auto var(--s-4); }
.pdoc-send-subject { padding: var(--s-2) 0; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.pdoc-send .actions .btn-gold { margin-left: auto; }
.pdoc-share { max-width: 40rem; margin: 0 auto var(--s-4); } /* fetch-1140: the Client portal panel, in the Send panel's frame */
.pdoc-share .actions .btn-primary { margin-left: auto; }
.pp-portal { display: inline-flex; align-items: center; gap: var(--s-1); font-size: var(--t-label); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--navy); border: 1px solid var(--line); border-radius: 999px; padding: 2px var(--s-2); white-space: nowrap; } /* fetch-1140: On client portal / Accepted beside a saved version */
.pp-portal--accepted { color: var(--ok-fg); border-color: var(--ok-fg); }
.ctr-envelope { margin-top: var(--s-3); padding-top: var(--s-3); border-top: 1px solid var(--hair); } /* fetch-1142: the signature card on the event's Contract section */
.ctr-envelope .pdoc-facts { margin-top: var(--s-2); }
.ctr-envelope .actions { margin-top: var(--s-3); }
.ctr-envelope .pp-portal { white-space: normal; border-radius: var(--r-m); } /* fetch-1150: "Signed by the client - awaiting countersignature" is wider than a 390px card, and the chip ran off its edge; on this card it wraps (a wrapped pill reads as a tag, so the radius steps down). The section is on the event page by default now, so the phone meets it */
.ctr-sign-frame { margin-top: var(--s-3); }
.ctr-sign-frame iframe { display: block; width: 100%; min-height: 40rem; border: 1px solid var(--line); border-radius: var(--r-s); background: var(--paper); }
.ctr-head { margin-bottom: var(--s-4); } /* fetch-1142: the contract's letterhead in the proposal document's language (.pdoc-head: the venue's mark left, a gold hairline under) - the signed PDF carries the same one */
.ctr-head-facts { min-width: 0; text-align: right; }
.ctr-head-kicker { color: var(--gold-dark); font-size: var(--t-sub); font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.ctr-head-title { margin-top: var(--s-1); color: var(--navy-dark); font-size: var(--t-title); font-weight: 700; line-height: 1.2; }
.ctr-head-sub { margin-top: var(--s-1); color: var(--muted); font-size: var(--t-sub); }
/* fetch-1144: a readable screen contract, with a form that fits Safari's native date input. */
.ctr-doc { width: 100%; min-width: 0; padding: var(--s-5); border: 1px solid var(--line); border-radius: var(--r-m); }
.ctr-controls { margin-bottom: var(--s-5); padding-bottom: var(--s-4); border-bottom: 1px solid var(--hair); }
.ctr-toolbar, .ctr-actions { display: flex; gap: var(--s-2); flex-wrap: wrap; align-items: center; }
.ctr-toolbar { justify-content: space-between; margin-bottom: var(--s-4); }
.ctr-actions { min-width: 0; }
.ctr-doc .btn { max-width: 100%; min-height: var(--control-height-touch); white-space: normal; }
.ctr-fields.grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-3); }
.ctr-fields .field { min-width: 0; }
.ctr-fields label { display: block; margin-bottom: var(--s-1); font-size: var(--t-sub); }
.ctr-fields input { display: block; width: 100%; min-width: 0; max-width: 100%; min-height: var(--control-height-touch); font-size: 1rem; box-sizing: border-box; }
.ctr-fields input[type="date"] { appearance: none; -webkit-appearance: none; }
.ctr-fields input[type="date"]::-webkit-date-and-time-value { min-height: 1.4em; text-align: left; }
.ctr-template { margin-top: var(--s-3); font-size: var(--t-sub); overflow-wrap: anywhere; }
.ctr-body { font-size: 1rem; line-height: 1.7; overflow-wrap: anywhere; }
.ctr-clause { margin: 0 0 var(--s-4); text-align: left; }
.ctr-heading { margin: var(--s-5) 0 var(--s-2); font-weight: 700; break-after: avoid; }
.ctr-signatures { margin-top: var(--s-6); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5); font-size: var(--t-sub); }
.ctr-signatures > div { border-top: 1px solid var(--ink); padding-top: var(--s-2); }
.ctr-head-title, .ctr-head-sub { overflow-wrap: anywhere; }
@media screen and (max-width: 900px) {
  .ctr-fields.grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media screen and (max-width: 640px) {
  .ctr-doc { padding: var(--s-3); }
  .ctr-toolbar { align-items: stretch; }
  .ctr-actions { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr); }
  .ctr-fields.grid { grid-template-columns: minmax(0, 1fr); }
  .ctr-head { flex-direction: column; align-items: flex-start; }
  .ctr-head .pdoc-mark { width: auto; max-width: 100%; max-height: 4rem; }
  .ctr-head-facts { text-align: left; }
  .ctr-head-title { font-size: var(--t-section); }
  .ctr-signatures { grid-template-columns: minmax(0, 1fr); gap: var(--s-6); }
}
@media print {
  .ctr-doc { padding: 0; border: 0; border-radius: 0; }
  .ctr-controls { display: none !important; }
  .ctr-body { font-size: 10pt; line-height: 1.5; }
  .ctr-clause { margin-bottom: var(--s-2); orphans: 3; widows: 3; }
  .ctr-signatures { break-inside: avoid; }
}
@media screen and (max-width: 640px) {
  .pdoc { padding: var(--s-4); }
  .pdoc-head { gap: var(--s-3); }
  .pdoc-bar .btn { min-height: var(--control-height-touch); }
  .pdoc-tbl thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .pdoc-tbl, .pdoc-tbl tbody { display: block; }
  .pdoc-tbl tr { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-3); }
  .pdoc-tbl td { min-width: 0; }
  .pdoc-tbl .pdoc-sec td { flex: 1; }
  .pdoc-tbl .pdoc-item-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-1) var(--s-3); padding: var(--s-3) 0; border-bottom: 1px solid var(--hair); }
  .pdoc-item-row td { padding: 0; border: 0; }
  .pdoc-item-row td:first-child { grid-column: 1; grid-row: 1; font-weight: 500; }
  .pdoc-item-row td:nth-child(2) { grid-column: 1; grid-row: 3; text-align: left; color: var(--navy); }
  .pdoc-item-row td:nth-child(3) { grid-column: 1; grid-row: 2; text-align: left; color: var(--navy); }
  .pdoc-item-row td:nth-child(2)::before, .pdoc-item-row td:nth-child(3)::before { content: attr(data-label) " "; }
  .pdoc-item-row td:last-child { grid-column: 2; grid-row: 1 / 4; align-self: center; font-weight: 500; }
  .pp-tbl textarea.pp-description { font-size: 1rem; }
  .pdoc-menu-item--photo { grid-template-columns: minmax(0, 1fr); gap: var(--s-3); }
  .pdoc-photo-frame { width: 100%; max-width: 16rem; }
  .pdoc-photo { max-height: 12rem; }
}
@page proposal { size: Letter; margin: 15mm; }
@media print {
  body:has(#proposalDoc) { page: proposal; padding: 0; }
  .pdoc-wrap { max-width: none; margin: 0; }
  .pdoc { border: none; border-radius: 0; padding: 0; font-size: var(--t-sub); }
  .pdoc, .pdoc * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .pdoc-tbl tr, .pdoc-fact { break-inside: avoid; }
  .pdoc-tbl td { padding-top: var(--s-1); padding-bottom: var(--s-1); }
  .pdoc-sec td { break-after: avoid; padding-top: var(--s-2); }
  .pdoc-head { padding-bottom: var(--s-4); }
  .pdoc-event { padding: var(--s-4) 0; }
  .pdoc-menu { padding-top: var(--s-4); }
  .pdoc-menu-section { margin-bottom: var(--s-4); padding-bottom: var(--s-4); }
  .pdoc-menu-detail, .pdoc-menu-copy h4 { font-size: var(--t-sub); }
  .pdoc-menu-section-title, .pdoc h2, .pdoc-menu-copy h4 { break-after: avoid; }
  .pdoc-menu-detail { orphans: 3; widows: 3; }
  .pdoc-menu-item, .pdoc-summary { break-inside: avoid; }
  .pdoc-menu-item--photo { grid-template-columns: minmax(0, 1fr) 1.7in; gap: var(--s-4); }
  .pdoc-photo { max-height: 1.25in; }
  .pdoc-estimate--after-menu { break-before: page; margin-top: 0; }
  .pdoc-next, .pdoc-minimums { break-inside: avoid; }
  .pdoc-minimums, .pdoc-contact, .pdoc-foot { margin-top: var(--s-2); }
  .pdoc-next { margin-top: var(--s-2); padding-top: var(--s-1); }
  .pdoc-next h2 { font-size: var(--t-section); margin-bottom: var(--s-1); }
  .pdoc-conf { margin-top: var(--s-1); padding-top: var(--s-1); }
}
.loan-workbench { max-width: 860px; margin-inline: auto; }
.card.loan-workbench.loan-quick { max-width: 680px; padding: var(--s-5); }
.loan-workbench .page-header { margin-bottom: var(--s-5); }
.loan-quick .page-header { align-items: flex-start; margin-bottom: 0; padding-bottom: var(--s-4); }
.loan-account { display: block; color: var(--muted); font-size: var(--t-sub); line-height: 1.5; margin-top: var(--s-1); overflow-wrap: anywhere; }
.loan-fields { min-width: 0; border: 0; padding: 0; margin: 0; }
.loan-workbench h2, .loan-return h2, .loan-ledger h2 { font-size: var(--t-section); color: var(--navy-dark); margin: 0 0 var(--s-3); }
.loan-workbench .field, .loan-return .field { min-width: 0; }
.loan-workbench .field label, .loan-return .field label, .loan-field-label { display: block; font-size: var(--t-sub); font-weight: 600; color: var(--navy-dark); margin-bottom: var(--s-2); }
.loan-workbench input:not([type="hidden"]), .loan-workbench select, .loan-return input:not([type="hidden"]), .loan-return select { min-height: var(--control-height-touch); width: 100%; font-size: 1rem; }
.loan-workbench .btn, .loan-return .btn, .loan-ledger .btn { min-height: var(--control-height-touch); }
.loan-help { color: var(--mute-fg); font-size: var(--t-sub); line-height: 1.5; margin: var(--s-2) 0; }
.loan-quick-step { padding-block: var(--s-4); border-top: 1px solid var(--line); }
.loan-quick-step:first-child { padding-top: 0; border-top: 0; }
.loan-quick-step > h2 { margin-bottom: var(--s-1); }
.loan-quick-item { min-width: 0; }
.loan-quick-item + .loan-quick-item { margin-top: var(--s-4); padding-top: var(--s-4); border-top: 1px solid var(--hair); }
.loan-item-inputs { display: grid; grid-template-columns: minmax(0, 1fr) 88px; gap: var(--s-3); align-items: end; }
.loan-item-inputs > * { min-width: 0; }
.loan-item-inputs input { box-sizing: border-box; }
.loan-quick .loan-item-choice { margin: var(--s-2) 0 0; padding: 0; border: 0; }
.loan-quick .loan-suggestions { margin-bottom: 0; }
.loan-quick .loan-add-item { width: auto; margin: var(--s-2) 0 0; padding-inline: 0; border: 0; background: transparent; color: var(--navy); }
.loan-quick-item > [data-lexdel] { margin: var(--s-3) 0 0; }
.loan-quick-photos { display: grid; gap: var(--s-3); }
.loan-quick-photos .loan-photo-field { padding: 0; border: 0; background: transparent; }
.loan-quick-photos .loan-photo-field + .loan-photo-field { padding-top: var(--s-4); border-top: 1px solid var(--hair); }
.loan-quick-photos .loan-photo-preview { align-items: flex-start; }
.loan-quick .loan-photo-preview img { width: 96px; height: 80px; }
.loan-photo-change { flex: 1 1 8rem; min-width: 0; max-width: 100%; }
.loan-photo-change .actions { display: grid; grid-template-columns: minmax(0, 1fr); margin-top: var(--s-2); }
.loan-photo-change .actions .btn { width: 100%; }
.loan-section-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--s-3); margin-bottom: var(--s-3); }
.loan-section-head h2 { margin: 0; }
.loan-item-row, .loan-trip, .loan-signature-section { padding-block: var(--s-4); border-top: 1px solid var(--line); }
.loan-item-choice { display: flex; align-items: center; gap: var(--s-3); margin-block: var(--s-3); }
.loan-item-details { display: grid; grid-template-columns: 120px minmax(0,1fr); align-items: start; gap: var(--s-5); margin-top: var(--s-4); }
.loan-catalog-photo { display: block; width: 72px; height: 72px; object-fit: cover; border: 1px solid var(--line); border-radius: var(--r-s); }
.loan-photo-field { min-width: 0; }
.loan-photo-preview { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-3); margin-block: var(--s-3); }
.loan-photo-preview img { width: 120px; height: 100px; object-fit: cover; border-radius: var(--r-s); border: 1px solid var(--line); }
.loan-photo-link { display: inline-flex; flex-shrink: 0; align-items: center; gap: var(--s-2); font-size: var(--t-sub); white-space: nowrap; }
.loan-add-item { width: 100%; margin-bottom: var(--s-5); border-style: dashed; }
.loan-suggestions { display: grid; gap: var(--s-2); margin-block: var(--s-3); }
/* fetch-1040: borrowing something the catalog does not know yet. The offer only appears when
   the search genuinely matched nothing, so the ordinary type-and-match path is untouched.
   Tokens only — the UI-debt ratchet fails the build on a raw hex or a px font-size. */
/* fetch-1041: the borrow-or-return chooser a scanned poster lands on. Two targets, each a real
   tap size on a phone, because the person reading this is holding equipment. Tokens only — the
   UI-debt ratchet sweeps this file and fails the build on a raw hex or a px font-size. */
.loan-choice { display: grid; gap: var(--s-3); margin: var(--s-4) auto; max-width: 30rem; }
.loan-choice-arm { display: block; width: 100%; min-height: calc(var(--control-height-touch) * 2); padding: var(--s-4); text-align: left; font: inherit; }
.loan-choice-title { display: block; font-size: var(--t-section); font-weight: 700; }
.loan-choice-sub { display: block; margin-top: var(--s-1); font-size: var(--t-sub); opacity: .85; }
.loan-out-filter { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin: 0 0 var(--s-3); }
.loan-unlisted-offer { display: grid; gap: var(--s-2); margin-top: var(--s-2); padding-top: var(--s-2); border-top: 1px solid var(--line); }
.loan-item-choice--unlisted { align-items: flex-start; justify-content: space-between; gap: var(--s-3); padding: var(--s-3); border: 1px solid var(--line); border-radius: var(--r-s); background: var(--wash); }
.loan-item-choice--unlisted .loan-help { margin: var(--s-1) 0 var(--s-2); }
.loan-suggestion { display: flex; align-items: center; gap: var(--s-3); text-align: left; justify-content: flex-start; white-space: normal; }
.loan-suggestion .loan-help { display: block; }
.loan-signature-pad { display: block; width: 100%; max-width: 560px; height: auto; border: 1px dashed var(--muted); border-radius: var(--r-s); background: var(--surface-card); touch-action: none; margin-block: var(--s-3); }
.loan-saved-signature { display: block; max-width: 100%; width: 200px; height: 60px; object-fit: contain; object-position: left; }
.loan-submit { margin-top: var(--s-5); padding-top: var(--s-4); border-top: 1px solid var(--line); }
.loan-quick .loan-submit { margin-top: 0; }
.loan-submit .btn-primary { min-width: 180px; }
.loan-trip details { margin-top: var(--s-4); }
.loan-workbench summary, .loan-ledger summary { cursor: pointer; min-height: var(--control-height-touch); padding-block: var(--s-2); font-size: var(--t-body); }
.loan-list-item, .loan-receipt-item { display: flex; justify-content: space-between; align-items: center; gap: var(--s-4); padding-block: var(--s-3); border-top: 1px solid var(--hair); }
.loan-list-item > .actions { justify-content: flex-end; align-items: center; flex-wrap: wrap; }
.loan-item-description { flex: 1; min-width: 0; }
.loan-proof summary { font-size: var(--t-sub); }
.loan-return-item { padding-block: var(--s-3); border-top: 1px solid var(--line); }
.loan-return-item > strong { display: block; margin-bottom: var(--s-3); }
.loan-return .grid { margin-top: var(--s-3); }
.loan-wide { grid-column: 1 / -1; }
.loan-fields [hidden] { display: none !important; }
.equipment-loan-header { margin-bottom: var(--s-4); }
#app:has(#equipmentLoanHeader, #equipmentLoanPanel, #loanWorkbench, #loanQrBack) > .toolbar { display: none; }
.equipment-loan-header .pgh { margin-bottom: 0; }
.equipment-loan-header .pgh-top { align-items: center; }
.equipment-loan-header .pgh-acts { margin-left: auto; }
.equipment-loan-header .pgh-acts > .btn { min-height: var(--control-height-touch); }
.equipment-loan-header .pgh-more { width: var(--control-height-touch); height: var(--control-height-touch); }
.equipment-loan-header .pgh-morelist .btn { min-height: var(--control-height-touch); width: 100%; justify-content: flex-start; text-align: left; }
/* fetch-1034: Equipment's five views share one compact header. Keep this opt-in:
   other pgh consumers retain their layout and scroll treatment. */
.equipment-header { margin-bottom: var(--s-4); min-width: 0; }
.equipment-header .pgh { display: flex; flex-wrap: wrap; gap: 0 var(--s-3); margin-bottom: 0; }
.equipment-header .pgh-top, .equipment-header .pgh-tabs { flex: 1 1 100%; min-width: 0; }
.equipment-header .pgh-top { flex-wrap: nowrap; }
.equipment-header .pgh-titles { flex: 1 1 auto; }
.equipment-header .pgh-h { line-height: 1.25; }
.equipment-header .pgh-acts { margin-left: auto; flex: 0 0 auto; }
.equipment-header .pgh-tabs { overflow: visible; flex-wrap: wrap; gap: 0 var(--s-5); margin-top: var(--s-2); }
.equipment-header .pgh-tab { margin-bottom: 0; min-height: var(--control-height-touch); min-width: var(--control-height-touch); font-size: var(--t-body); font-family: inherit; }
.equipment-header .pgh-tab .n { font-variant-numeric: tabular-nums; }
.equipment-header .pgh-nav { display: flex; flex: 1 1 auto; flex-wrap: wrap; gap: var(--s-2); min-width: 0; margin-top: var(--s-2); }
.equipment-header .pgh-nav .sel { width: auto; max-width: 100%; font-size: var(--t-body); }
.equipment-header .pgh-row { flex: 1 1 auto; min-width: 0; margin-top: var(--s-2); }
.equipment-header .pgh-search { flex: 1 1 auto; padding-block: 0; min-height: var(--control-height-touch); }
.equipment-header .pgh-search input { min-height: var(--control-height-touch); }
.equipment-header .pgh-seg { width: auto; padding: 1px; gap: 1px; overflow: visible; mask-image: none; -webkit-mask-image: none; }
.equipment-header .pgh-more { width: var(--control-height-touch); height: var(--control-height-touch); }
.equipment-header .pgh-morelist .btn { width: 100%; min-height: var(--control-height-touch); text-align: left; justify-content: flex-start; }
.equipment-header .pgh-morelist { min-width: 12rem; max-width: calc(100vw - var(--s-6)); }
.equipment-header #importBtn { display: inline-flex; } /* The old phone-wide CSV hide must not leave More empty. */
.equipment-header--inventory .pgh-row:has(.pgh-search) { order: 1; flex: 1 1 12rem; }
.equipment-header--inventory .pgh-row:has(.pgh-seg) { order: 2; flex: 0 0 auto; }
.equipment-header--inventory .pgh-nav { order: 3; flex-basis: 100%; }
@media (max-width: 640px) {
  .equipment-header .pgh-tabs { gap: 0 var(--s-2); }
  .equipment-header .pgh-tab { flex: 1 1 calc(33.333% - var(--s-2)); padding-inline: var(--s-1); text-align: center; }
  .equipment-header .pgh-nav .sel { flex: 1 1 8rem; min-width: 0; }
  .equipment-header--inventory .pgh-row:has(.pgh-seg) { flex: 1 1 auto; }
  .equipment-header--inventory .pgh-seg { flex: 1; }
  .equipment-header--inventory .pgh-seg button { flex: 1; padding-inline: var(--s-2); }
}
@media (max-width: 360px) {
  .equipment-header .pgh-top { flex-wrap: wrap; }
  .equipment-header .pgh-acts { margin-left: 0; }
  .equipment-header .pgh-titles { flex-basis: 100%; }
}
.loan-ledger { display: grid; gap: var(--s-4); }
.loan-ledger > .card { margin-bottom: 0; }
.loan-out-section { min-width: 0; }
.loan-out-section > .loan-section-head { padding-bottom: var(--s-3); border-bottom: 1px solid var(--line); }
.loan-runs { display: grid; gap: var(--s-3); }
.loan-run { min-width: 0; padding-top: var(--s-3); border-top: 1px solid var(--line); }
.loan-run:first-child { padding-top: 0; border-top: 0; }
.loan-run > .loan-section-head { margin-bottom: 0; }
.loan-run h3 { margin: 0; color: var(--navy-dark); font-size: var(--t-body); line-height: 1.4; }
.loan-run .loan-list-item:first-of-type { border-top: 0; }
.loan-run .loan-list-item { min-width: 0; }
.loan-run .loan-photo-link { white-space: normal; }
.loan-secondary > details + details { border-top: 1px solid var(--line); margin-top: var(--s-2); padding-top: var(--s-2); }
@media print { .loan-qr-controls { display: none !important; } }
@media (max-width: 640px) {
  .loan-workbench, .card.loan-workbench.loan-quick { padding: var(--s-4); }
  .loan-workbench .grid, .loan-return .grid, .loan-item-details { grid-template-columns: minmax(0,1fr); }
  .loan-item-details > .field { max-width: 140px; }
  .loan-quick-step { padding-block: var(--s-4); }
  .loan-quick-step:first-child { padding-top: 0; }
  .loan-item-inputs { grid-template-columns: minmax(0, 1fr) 88px; gap: var(--s-2); }
  .loan-list-item { align-items: stretch; flex-direction: column; }
  .loan-list-item > .actions { justify-content: flex-start; }
  .loan-photo-field .actions .btn { flex: 1; }
  .loan-submit { display: grid; grid-template-columns: minmax(0, 1fr) auto; width: 100%; }
  .loan-submit .btn-primary { min-width: 0; }
  .loan-submit .loan-help { grid-column: 1 / -1; }
  .loan-return { padding: var(--s-4); }
  .equipment-loan-header .pgh-top { flex-wrap: nowrap; }
  .equipment-loan-header .pgh-titles { flex: 1 1 auto; }
  .equipment-loan-header .pgh-acts { width: auto; }
  .equipment-loan-header .pgh-tabs { column-gap: var(--s-2); }
  .equipment-loan-header .pgh-tab { flex: 1 1 calc(33.333% - var(--s-2)); min-height: var(--control-height-touch); padding-inline: var(--s-1); text-align: center; }
  .loan-out-section, .loan-secondary { padding: var(--s-4); }
  .loan-run .loan-list-item > .actions .btn { flex: 1 1 auto; }
}
@media (max-width: 360px) {
  .card.loan-workbench.loan-quick { padding-block: var(--s-3); }
  .loan-quick-step { padding-block: var(--s-3); }
  .loan-quick-step:first-child { padding-top: 0; }
  .loan-item-inputs { grid-template-columns: minmax(0, 1fr); }
  .loan-submit { grid-template-columns: minmax(0, 1fr); }
  .loan-submit .btn { width: 100%; }
  .equipment-loan-header .pgh-top { flex-wrap: wrap; }
  .equipment-loan-header .pgh-titles, .equipment-loan-header .pgh-acts { width: 100%; }
}
/* fetch-1036: the checklist library uses the shared type, spacing and touch tokens. */
.ck1036-tools { display: flex; flex-wrap: wrap; align-items: end; gap: var(--s-3); margin-bottom: var(--s-5); }
.ck1036-tools .field { flex: 1 1 12rem; min-width: 0; max-width: 20rem; }
.ck1036-tools label { display: block; font-size: var(--t-sub); margin-bottom: var(--s-1); }
.ck1036-tools select { width: 100%; min-height: var(--control-height-touch); font: inherit; }
.ck1036-tools .hdd { margin-left: auto; }
.ck-page .ck1036-tools .btn, #ck1036New, #ck1036Close, #ck1036Continue, #ck1036Cancel { min-height: var(--control-height-touch); }
.ck-page .ck957-picker { margin-top: var(--s-3); }
.ck-page .ck-card p { overflow-wrap: anywhere; }
#ck1036SavedTasks { margin-top: var(--s-4); }
@media (max-width: 600px) {
  .ck1036-tools { gap: var(--s-2); }
  .ck1036-tools .field { flex-basis: calc(50% - var(--s-2)); }
  .ck1036-tools .hdd { margin-left: 0; }
}
/* fetch-1079: PDF preparation and delivery stay usable on a phone. */
.beo-email-panel .btn, .beo-pdf-toolbar .btn {
  min-height: var(--control-height-touch);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: normal;
  text-align: center;
}
.beo-email-panel .grid, .beo-email-panel .field { min-width: 0; }
.beo-email-panel input { min-width: 0; width: 100%; min-height: var(--control-height-touch); }
.beo-email-panel .actions { flex-wrap: wrap; gap: var(--s-2); }
.beo-pdf-panel { margin-top: var(--s-3); padding-top: var(--s-3); border-top: 1px solid var(--line); }
.beo-pdf-status { font-size: var(--t-body); margin: var(--s-2) 0; }
.beo-pdf-detail { font-size: var(--t-sub); overflow-wrap: anywhere; margin: var(--s-2) 0; }
/* fetch-1092: direct timeline entry, a quiet draft workbench, and the staff reader. */
.tlw-nav { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-bottom: var(--s-3); }
.tlw-header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--s-4); }
.tlw-header h2 { font: 650 var(--t-title)/1.3 Inter, Arial, sans-serif; margin: var(--s-1) 0 var(--s-2); color: var(--navy-dark); overflow-wrap: anywhere; }
.tlw-header .muted { font-size: var(--t-sub); }
.tlw-kicker { font-size: var(--t-sub); font-weight: 650; color: var(--navy); }
.tlw-header .actions, .tlw-save-actions .actions { margin: 0; flex-wrap: wrap; }
.tlw-layout { display: grid; grid-template-columns: minmax(240px, .8fr) minmax(0, 1.2fr); align-items: start; gap: var(--s-4); }
.tlw-layout > .card { min-width: 0; margin: 0; }
.tlw-layout h3, .tlw-conflict h3 { font: 650 var(--t-section)/1.4 Inter, Arial, sans-serif; color: var(--navy-dark); margin: 0 0 var(--s-3); }
.tlw-compose .field, .tlw-quick .field, .tlw-detail .field { display: grid; gap: var(--s-1); margin: 0 0 var(--s-3); min-width: 0; }
.tlw-compose .field > span, .tlw-quick .field > span, .tlw-detail .field > span { font-size: var(--t-sub); font-weight: 550; color: var(--navy); }
.tlw-compose .field textarea, .tlw-detail .field textarea, .tlw-quick .field input:not([type="checkbox"]):not([type="radio"]), .tlw-editrow input { min-width: 0; width: 100%; min-height: var(--control-height-touch); font-family: Inter, Arial, sans-serif; font-size: var(--t-body); color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-s); padding: var(--s-2); }
.tlw-compose textarea { line-height: 1.8; resize: vertical; }
.tlw-hint { font-size: var(--t-sub); line-height: 1.5; color: var(--navy); margin: var(--s-2) 0 var(--s-3); }
.tlw-reuse, .tlw-parsed { border-top: 1px solid var(--line); margin-top: var(--s-5); padding-top: var(--s-4); }
.tlw-reuse .actions { flex-wrap: wrap; }
.tlw-editor-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); }
.tlw-editor-head .muted { font-size: var(--t-sub); }
.tlw-step { padding: var(--s-3) 0; border-bottom: 1px solid var(--line); }
.tlw-editrow { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr) var(--control-height-touch); gap: var(--s-2); align-items: center; }
.tlw-editrow input[type="time"], .tlw-quick input[type="time"] { font-variant-numeric: tabular-nums; }
.tlw-editrow input[data-opstl-field="task"] { font-weight: 550; }
.tlw-more { min-width: 0; padding: var(--s-1); min-height: var(--control-height-touch); font-size: var(--t-section); }
.tlw-detail { margin-top: var(--s-3); }
.tlw-detail-preview { font-size: var(--t-sub); line-height: 1.5; color: var(--navy); white-space: pre-wrap; overflow-wrap: anywhere; margin-top: var(--s-1); }
.tlw-quick { padding-top: var(--s-4); }
.tlw-quick-fields { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: var(--s-2); }
.tlw-quick .btn { width: 100%; }
.tlw-savebar { padding: var(--s-4) 0; }
.tlw-savebar .notice { margin-bottom: var(--s-3); }
.tlw-save-actions { display: flex; gap: var(--s-3); align-items: center; justify-content: space-between; flex-wrap: wrap; }
#opsTlDraftStatus { font-size: var(--t-sub); color: var(--navy); }
.tlw-readrow { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: var(--s-3); padding: var(--s-3) 0; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
.tlw-readrow > :first-child { font-variant-numeric: tabular-nums; }
.tlw-conflict p { font-size: var(--t-body); }
.tlw-layout .btn, .tlw-savebar .btn, .tlw-header .btn, .tlw-nav .btn { min-height: var(--control-height-touch); }
.sa-ros-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); }
[data-sa-ros], [data-sa-ros-back] { min-height: var(--control-height-touch); }
.sa-ros-list { list-style: none; padding: 0; margin: 0; }
.sa-ros-time { min-width: 5rem; flex-shrink: 0; font-variant-numeric: tabular-nums; }
.sa-ros-task { overflow-wrap: anywhere; }
.sa-ros-detail { white-space: pre-wrap; overflow-wrap: anywhere; }
@media (max-width: 760px) {
  .tlw-layout { grid-template-columns: 1fr; }
  .tlw-compose .field textarea, .tlw-detail .field textarea, .tlw-quick .field input:not([type="checkbox"]):not([type="radio"]), .tlw-editrow input { font-size: 1rem; }
  .tlw-editor { order: -1; }
  .tlw-editrow { grid-template-columns: 8.5rem minmax(0, 1fr) var(--control-height-touch); }
  .tlw-quick-fields { grid-template-columns: 8.5rem minmax(0, 1fr); }
  .tlw-save-actions > .actions { width: 100%; }
  .tlw-save-actions .btn { flex: 1 1 auto; }
}
@media (max-width: 420px) {
  .tlw-editrow { grid-template-columns: minmax(0, 1fr) var(--control-height-touch); }
  .tlw-editrow input[data-opstl-field="task"] { grid-row: 2; grid-column: 1 / -1; }
  .tlw-editrow .tlw-more { grid-column: 2; grid-row: 1; }
}
@media (max-width: 600px) {
  .beo-email-panel .grid { grid-template-columns: 1fr; }
  .beo-pdf-panel .actions > .btn { flex: 1 1 auto; }
}

/* fetch-1100: browse company-owned venue photos and freeze them into proposals. */
.pp-rooms { margin: var(--s-5) 0; padding: var(--s-4) 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.pp-rooms-heading { display: flex; align-items: start; justify-content: space-between; gap: var(--s-4); }
.pp-rooms-heading h2, .pp-rooms-heading h3 { margin: 0 0 var(--s-2); color: var(--navy-dark); font-size: var(--t-section); }
.pp-rooms-heading p { margin: 0 0 var(--s-2); font-size: var(--t-sub); }
.pp-rooms .btn, .pp-rooms-dialog .btn { min-height: var(--control-height-touch); }
.pp-rooms-dialog { width: min(64rem, calc(100vw - 2rem)); max-height: calc(100dvh - 2rem); padding: var(--s-5); border: 1px solid var(--line); border-radius: var(--r-m); color: var(--ink); background: var(--paper); }
.pp-rooms-dialog[open] { display: flex; flex-direction: column; gap: var(--s-4); }
.pp-rooms-dialog::backdrop { background: color-mix(in srgb, var(--navy-dark) 55%, transparent); }
.pp-rooms-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-3); }
.pp-rooms-toolbar select { min-height: var(--control-height-touch); min-width: 10rem; max-width: 100%; font-size: var(--t-body); }
.pp-rooms-toolbar [role="status"] { margin-left: auto; font-size: var(--t-sub); }
.pp-room-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: max-content; align-content: start; gap: var(--s-4); overflow-y: auto; min-height: 0; overscroll-behavior: contain; }
.pp-room-option { border: 1px solid var(--line); border-radius: var(--r-s); overflow: hidden; cursor: pointer; }
.pp-room-option:has(input:checked) { border-color: var(--navy); box-shadow: inset 0 0 0 1px var(--navy); }
.pp-room-option > img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.pp-room-option > span { display: flex; gap: var(--s-2); padding: var(--s-3); align-items: start; min-height: var(--control-height-touch); }
.pp-room-option input { width: 1.2rem; height: 1.2rem; flex-shrink: 0; }
.pp-room-option strong, .pp-room-option small { display: block; font-size: var(--t-sub); overflow-wrap: anywhere; }
.pp-room-option small { color: var(--muted); margin-top: var(--s-1); }
.pp-rooms-footer { display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); font-size: var(--t-sub); }
.pp-room-chosen-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); margin-top: var(--s-4); }
.pp-room-chosen { display: flex; align-items: start; gap: var(--s-3); padding: var(--s-3); border: 1px solid var(--line); border-radius: var(--r-s); font-size: var(--t-sub); min-width: 0; overflow-wrap: anywhere; }
.pp-room-chosen > img { width: 7rem; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--r-s); }
.pp-room-chosen .actions { gap: var(--s-2); flex-wrap: wrap; }
.pdoc-venue { margin: var(--s-6) 0; }
.pdoc-venue h2 { color: var(--navy-dark); font-size: var(--t-title); margin: 0 0 var(--s-4); }
.pdoc-venue-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); }
.pdoc-venue-item { break-inside: avoid; min-width: 0; }
.pdoc-venue .pdoc-photo-frame { width: 100%; margin: 0; }
.pdoc-venue .pdoc-photo { width: 100%; height: auto; max-height: 18rem; object-fit: contain; }
.pdoc-venue-item > p { font-size: var(--t-sub); color: var(--muted); margin: var(--s-2) 0 0; }
@media (max-width: 760px) {
  .pp-rooms-heading { flex-wrap: wrap; }
  .pp-rooms-dialog { width: 100vw; height: 100dvh; max-width: 100vw; max-height: 100dvh; margin: 0; border-radius: 0; padding: var(--s-4); }
  .pp-room-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pp-rooms-toolbar select { font-size: 1rem; }
  .pp-room-chosen-list { grid-template-columns: 1fr; }
  .pp-rooms-footer > span { max-width: 45%; }
}
@media (max-width: 440px) {
  .pp-room-grid { grid-template-columns: 1fr; }
  .pdoc-venue-grid { grid-template-columns: 1fr; }
}
@media print {
  .pdoc-venue-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pdoc-venue .pdoc-photo { max-height: 2.6in; }
}

/* fetch-1101: menu photo preview retains the list beneath its modal. */
.pp-menu-camera { white-space: nowrap; padding-inline: var(--s-2); margin-left: auto; display: flex; align-items: center; justify-content: center; gap: var(--s-1); min-height: var(--control-height-touch); margin-top: var(--s-2); font-size: var(--t-sub); }
.pp-menu-photo-dialog { width: min(48rem, calc(100vw - var(--s-4))); max-height: calc(100dvh - var(--s-4)); padding: var(--s-4); border: 1px solid var(--line); border-radius: var(--r-m); background: var(--paper); color: var(--ink); overflow: auto; }
.pp-menu-photo-dialog::backdrop { background: var(--navy-dark); opacity: .65; }
.pp-menu-photo-dialog h2 { font-size: var(--t-section); margin: 0; overflow-wrap: anywhere; }
.pp-menu-photo-dialog .btn { min-height: var(--control-height-touch); flex-shrink: 0; }
.pp-menu-photo-dialog img { display: block; width: 100%; max-height: 65dvh; object-fit: contain; margin-top: var(--s-3); }
.pp-menu-copy { margin: 0; cursor: pointer; }

/* fetch-1102: venue-led proposal identity and a gallery that uses its available space. */
.pdoc { border-top: .3rem solid var(--navy-dark); }
.pdoc-brand { min-width: 0; }
.pdoc-brand .pdoc-mark { width: 15rem; max-width: 100%; max-height: 5rem; }
.pdoc-brand-name { margin-top: var(--s-3); color: var(--gold-dark); font-size: var(--t-sub); letter-spacing: .1em; text-transform: uppercase; }
.pdoc-eyebrow { color: var(--navy); font-size: var(--t-sub); margin: 0 0 var(--s-2); }
.pdoc .pdoc-title { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 2.4rem; }
.pdoc-venue-grid:has(> :only-child) { grid-template-columns: 1fr; }
.pdoc-venue .pdoc-photo { width: 100%; height: auto; max-height: none; object-fit: contain; }
.pdoc-venue-item:only-child .pdoc-photo-frame { width: 100%; }
@media print { .pdoc-venue .pdoc-photo { max-height: 4.2in; } }

.pp-days { margin: var(--s-4) 0; padding: var(--s-4) 0; border-block: 1px solid var(--line); }
.pp-days-heading, .pp-day-label { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
.pp-days-heading p { margin: var(--s-1) 0; }
.pp-days-list { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.pp-day-label { margin-top: var(--s-3); }
.pp-day-label input { display: block; max-width: 13rem; }
.pp-days .btn { min-height: var(--control-height-touch); }
.pp-day-cell { min-width: 6rem; }

.pdoc-send textarea { width: 100%; min-height: 12rem; resize: vertical; }
.pdoc-attachment { padding: var(--s-4); margin-top: var(--s-4); border: 1px solid var(--line); border-radius: var(--r-s); }
.pdoc-attachment .actions { flex-wrap: wrap; }
.pdoc-send .btn { min-height: var(--control-height-touch); }
@media (max-width: 640px) { .pdoc-send input, .pdoc-send textarea, .pp-day-label input { font-size: 1rem; } }

.pdoc-day-table { margin-bottom: var(--s-5); }
.pdoc-day-table caption { text-align: left; color: var(--navy); font-weight: 600; padding-bottom: var(--s-2); }
.pdoc-day-table .pdoc-num { white-space: normal; }

.pdoc-venue .pdoc-photo { aspect-ratio: 16 / 9; object-fit: cover; }
.pdoc-venue-item:last-child:nth-child(odd) { grid-column: 1 / -1; }

/* fetch-1103: a bounded, grouped photo library with full-photo previews. */
.pp-rooms-toolbar > label { display: flex; flex-direction: column; gap: var(--s-1); min-width: 0; flex: 1 1 12rem; font-size: var(--t-sub); }
.pp-rooms-toolbar input { min-height: var(--control-height-touch); width: 100%; font-size: var(--t-body); }
.pp-room-option > label { display: flex; gap: var(--s-2); padding: var(--s-3); align-items: start; min-height: var(--control-height-touch); cursor: pointer; }
.pp-room-preview-open { display: block; padding: 0; width: 100%; border: 0; background: var(--wash); color: var(--navy); cursor: pointer; }
.pp-room-preview-open img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.pp-room-preview-open span { display: block; padding: var(--s-2); font-size: var(--t-sub); }
.pp-room-page { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); font-size: var(--t-sub); }
.pp-room-detail { overflow-y: auto; min-height: 0; }
.pp-room-detail > img { display: block; width: 100%; max-height: 55dvh; object-fit: contain; }
.pp-room-detail-choice { display: flex; align-items: center; gap: var(--s-2); min-height: var(--control-height-touch); }
.pp-room-detail-choice input { width: 1.2rem; height: 1.2rem; }
@media (max-width: 640px) {
  .pp-rooms-toolbar input { font-size: 1rem; }
  .pp-rooms-toolbar > label { flex-basis: 8rem; }
  .pp-rooms-dialog .pp-rooms-heading p { margin-bottom: 0; }
  .pp-room-page { flex-wrap: wrap; }
}

/* fetch-1107: the shared Outlook signature, using approved CSE assets and personal details. */
.cse-email-signature { max-width: 32rem; padding: var(--s-3) 0; background: var(--surface-card); color: var(--navy-dark); font-family: Inter, Arial, sans-serif; font-size: var(--t-sub); line-height: 1.5; overflow-wrap: anywhere; }
.cse-email-signature p { margin: 0 0 var(--s-1); padding: 0; }
.cse-email-signature a { color: var(--navy-dark); text-decoration: underline; }
.cse-email-signature .cse-sig-name { font-family: "Times New Roman", Georgia, serif; font-size: var(--t-display); font-style: italic; line-height: 1.15; }
.cse-email-signature .cse-sig-links { font-size: var(--t-sub); }
.cse-email-signature .cse-sig-venues { margin-top: var(--s-5); font-family: "Times New Roman", Georgia, serif; font-size: var(--t-section); font-style: italic; }
.cse-email-signature .cse-sig-diamond { color: var(--gold); padding: 0 var(--s-1); }
.cse-email-signature img { display: block; max-width: 100%; height: auto; border: 0; }
.cse-email-signature .cse-sig-wordmark { width: 22.5rem; margin: var(--s-3) 0; }
.cse-email-signature .cse-sig-tagline { width: 26.25rem; margin-top: var(--s-3); }
#emailSignatureSettings { margin-top: var(--s-4); }
#emailSignatureSettings .btn { min-height: var(--control-height-touch); }
#emailSignatureSettings .field, #ppSendSignature { min-width: 0; }
#sigPreview, #ppSendSignature { border-top: 1px solid var(--line); margin-top: var(--s-4); padding-top: var(--s-3); }
#emailSignatureSettings > .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 640px) {
  #emailSignatureSettings > .grid { grid-template-columns: minmax(0, 1fr); }
  #emailSignatureSettings input { font-size: 1rem; }
}
/* fetch-1148: deposit facts and Finance payment matches. */
.payment-progress { margin-top: var(--s-4); padding-top: var(--s-3); border-top: 1px solid var(--line); min-width: 0; }
.payment-row-head, .payment-actions { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--s-2); }
.payment-row-head strong { min-width: 0; overflow-wrap: anywhere; }
.payment-row { padding: var(--s-3) 0; border-bottom: 1px solid var(--line); }
.payment-row p { margin: var(--s-1) 0; font-variant-numeric: tabular-nums; }
.payment-detail, .payment-empty { color: var(--muted); font-size: var(--t-sub); line-height: 1.5; }
.payment-state { font-size: var(--t-sub); color: var(--navy); font-weight: 600; }
.payment-state[data-payment-state="received"] { color: var(--ok-fg); }
.payment-review { padding: var(--s-3); background: var(--warn-bg); color: var(--warn-fg); font-size: var(--t-sub); line-height: 1.5; }
.payment-editor { padding-top: var(--s-3); font-size: var(--t-sub); line-height: 1.5; }
.payment-editor h4 { font-size: var(--t-body); margin: 0; }
.payment-mapping { margin: var(--s-3) 0; }
.payment-mapping label, .payment-match label { display: flex; flex-direction: column; gap: var(--s-1); min-width: 0; }
.payment-mapping select, .payment-match select, .payment-match input { width: 100%; max-width: 100%; min-width: 0; min-height: var(--control-height-touch); font-size: var(--t-body); }
.payment-match { min-width: 0; margin: var(--s-3) 0; border: 1px solid var(--line); border-radius: var(--r-s); padding: var(--s-3); }
.payment-match-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-2); margin-bottom: var(--s-2); }
.payment-progress .btn { min-height: var(--control-height-touch); }
.payment-actions { justify-content: flex-start; }
@media (max-width:640px) { .payment-mapping select, .payment-match select, .payment-match input { font-size: 1rem; } }
.payment-confirm { display: flex; align-items: center; gap: var(--s-2); min-height: var(--control-height-touch); margin: var(--s-3) 0; }
.payment-confirm input { flex: 0 0 auto; }