@import url("/assets/css/rp-base.css"); /* UI-VOCAB-01 §1.2: the ONE shared base sheet (tokens + scrollbars) — rules live there, never here */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* ★★★ RPR-WIZ-30-K (Michael, 2026-09-16 17:50) — §1: the section-header row's own horizontal padding, so a trailing
     [+ Add …] button clears the card's right edge by the same gap the title has on the left. §2: prose fields (Description,
     Recommended For, Notes, Custom Display Name and the wizard equivalents) span 75% of the section content width — short
     scalar inputs (rates, amounts, sort order) are unchanged. One token each, one rule each. */
  --card-header-pad-x: 18px;
  --field-prose-width: 75%;
  --brand: #0284c7;
  --brand-hover: #0369a1;
  --brand-ring: rgba(2,132,199,.22);   /* scope accent focus ring (blue); platform.css overrides to purple */
  --sidebar-bg: #0f172a;
  --sidebar-text: #94a3b8;
  --sidebar-hover: #1e293b;
  --sidebar-active-color: #38bdf8;
  --sidebar-active-bg: rgba(56,189,248,.1);
  --body-bg: #f1f5f9;
  --card-bg: #fff;
  --border: #e2e8f0;
  /* ★ FORM CONTROL BOUNDARY (ruled T, 2026-08-17) — the unchecked ring of a UI CONTROL, never a
     card edge. WCAG 1.4.11 asks 3:1 of a component boundary; --border is the DECORATIVE hairline
     (1.23:1 on the white card) and darkening it would repaint ~121 admin outlines, so the control
     gets its own token — the same ruling the portal recorded at resident-theme.css:50-58. The
     value is ADOPTED from the portal's --rp-control-line, measured not chosen by eye:
     4.76:1 vs the #fff card · 4.28:1 vs the selected tint #eef3fd · 4.34:1 vs the #f1f5f9 body. */
  --form-control-line: #64748b;
  /* ★ UI-TABS-01 §1.4 (Michael, 2026-09-10) — ONE GAP VALUE FOR EVERY TAB ROW, as a token rather than a
     pixel literal per row, so the main strip and the sub-strip beneath it stay one system (§1.3). */
  /* UI-TABS-03 s2.3: 8px BETWEEN tabs, on top of each tab's own padding — the padding does most of the
     spacing work, which is what makes the spacing read the same at four tabs and at ten. (UI-TABS-01's
     22px→18px was tuned to keep rows on one line while they still wrapped; s4.2 scrolls now, so the gap
     is free to be the design value.) */
  /* ★ UI-TABS-06 §1.2/§1.3 — A SEGMENTED STRIP. The tabs are segments of one continuous surface separated
     by 1px hairlines, so there is no per-tab border AND no gap: "chip → gap → line → gap → chip" is two
     separators where one is wanted (§1.1). It also recovers far more width than trimming padding, which is
     the reason for tightening at all. UI-TABS-01's "equal gaps" rule survives as a uniform ZERO. */
  --stn-gap: 0px;
  --stn-divider: 1px;
  /* ★ UI-TABS-07 §1.2/§1.3 — THE OPTICAL SHIFT, DERIVED RATHER THAN HARDCODED. The tab's container is
     flush with the content column but its LABEL starts inside its own left padding, so the row reads as
     misaligned even though it measures flush. Shifting both rows by exactly that padding puts the first
     tab's TEXT on the content column's edge. It is one token applied to both rows — never two values that
     can drift — and it follows UI-TABS-06's padding automatically if that changes. */
  --stn-tab-pad-x: 14px;
  /* ★★ UI-TABS-07-B §2 (2026-09-11): the two nav rows move RIGHT of the page by THIS ONE TOKEN and nothing else moves.
     UI-TABS-07 §1.2's derived value (= the tab pad, aimed at aligning the label with the content column) is
     WITHDRAWN by 07-B — and it never took effect anyway: the rows' own `padding` shorthand, fourteen declarations
     later in the same rule, reset padding-left to the 4px strip inset. MEASURED before this change (park@1280):
     main row box 252 (+0 from the content column), sub-row box 256 (+4), both rows' computed padding-left 4px.
     The shorthand now carries the token as its left value, so the next reader cannot repeat the override.
     ★★ AND THE ROWS ARE SCROLL-SNAP CONTAINERS: measured after the token landed, every row that overflowed was found at
     scrollLeft 12 on load — the first tab's `scroll-snap-align:start` snaps to the scrollport edge, so the padding is
     scrolled away and the shift is invisible exactly where the row overflows (the park main row at every width).
     `scroll-padding-left` carries the same token, so the snap edge sits inside the padding and scrollLeft 0 is the rest. */
  --stn-shift: 12px;
  /* ★ CORP-GO-02 §1.2/§1.3 — THE STRIP'S OWN TOKENS. UI-TABS-03 §6.1 ruled that a value with no token is
     the finding, so the five colours the connected strip needs are declared here rather than written into
     the rules: the shared ground behind the row, the inactive tab's ground and hairline, and the pair the
     hover lifts to. The active tab uses --brand, which already exists. */
  --stn-strip: #eef2f7;
  --stn-tab: #ffffff;
  --stn-tab-bd: #dbe3ec;
  --stn-tab-hover: #f8fafc;
  --stn-tab-bd-hover: #c7d3e0;
  --text: #1e293b;
  --muted: #64748b;
  /* UI-TABS-03 s5.4/s6.1 — THE FINDING: no token existed for a muted label that PASSES. `--muted` (#64748b)
     measures 4.34:1 on the page ground (#f1f5f9) and 4.76:1 on white — below the 4.5:1 floor exactly where
     the strip sits, and the inactive tab label used it before this redesign too, so this is an existing
     accessibility defect the measurement found rather than one the restyle introduced. #475569 is the next
     step on the same slate ramp (not a new palette) and measures 6.92:1 there. Reported, then closed with a
     NAMED token rather than a hex inside the rule. */
  --muted-strong: #475569;
  /* UI-TABS-03 s6.1, A SECOND MISSING TOKEN THE MEASUREMENT FOUND: `.stnav-wrap` has painted itself with
     `var(--bg)` since the strip was built, and admin.css never defined `--bg` — only platform.css (#f3f4f6)
     and site.css (#ffffff) do. On park and corp the strip therefore had NO ground of its own, and s4.3's edge
     fades, which mask with the same token, would have masked with transparent. Defined here as the page ground
     it was always meant to be, so every plane's strip and fades resolve. */
  --bg: var(--body-bg, #f1f5f9);
  --danger: #dc2626;
  --success: #16a34a;
  /* --warning moved to rp-base.css (PLATFORM-STARTER-08 §2: ONE definition) */
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* Range sliders + checkboxes inherit the per-scope accent (--brand): Park blue,
   Platform/Corp purple. accent-color covers track/thumb/checkmark cross-browser.
   (Checkboxes added in the Voice Cache polish pass — the flatten pass had missed them.) */
input[type=range], input[type=checkbox] { accent-color: var(--brand); }

/* Content links inherit the per-scope accent (--brand): Park blue, Corp/Platform purple,
   including :visited so they never fall back to the UA default purple. Scoped to CLASSLESS
   anchors only (a:not([class])) so the rule never bleeds into class-based component anchors
   — .btn/.btn-primary, .act-drop-item, .stn-sub, .sb-nav a, etc. (those keep their own color).
   This matters for :hover/:visited, whose specificity (0,1,1) would otherwise beat
   .btn-primary's color (0,1,0) and paint a button's label in --brand on its --brand fill. */
a:not([class])         { color: var(--brand); }
a:not([class]):visited { color: var(--brand); }
a:not([class]):hover   { color: var(--brand-hover, var(--brand)); }

body { font-family: var(--font); font-size: 14px; color: var(--text); background: var(--body-bg); }

/* ── Sidebar ────────────────────────────────────────────────────────── */
.sidebar {
  position: fixed; top: 0; left: 0;
  width: 220px; height: 100vh;
  background: var(--sidebar-bg);
  display: flex; flex-direction: column;
  overflow-y: auto; overflow-x: hidden; z-index: var(--z-sticky-header, 100);
  transition: width .2s ease;
}
.sb-brand {
  padding: 20px 20px 16px;
  border-bottom: 1px solid rgba(255,255,255,.07);
  text-decoration: none; display: block;
}
.sb-brand .logo   { font-size: 17px; font-weight: 700; color: var(--brand); }
.sb-brand .tenant { font-size: 11px; color: var(--sidebar-text); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-logo-panel { background:#fff; border-radius:10px; padding:8px 12px; margin-bottom:8px; box-shadow:0 2px 6px rgba(0,0,0,.30); }
.sb-logo-panel .logo-full    { display:block; max-width:100%; height:auto; }
.sb-logo-panel .logo-compact { display:none; }
.sb-nav   { padding: 8px 0; flex: 1; }
.sb-nav a {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 20px;
  color: rgba(255,255,255,.72); font-size: 13.5px;
  text-decoration: none; transition: background .12s, color .12s;
}
.sb-nav a:hover         { background: var(--sidebar-hover); color: #e2e8f0; }
.sb-nav a.active        { color: var(--sidebar-active-color); background: var(--sidebar-active-bg); font-weight: 500; }
.sb-nav a svg           { flex-shrink: 0; opacity: .6; transition: opacity .12s; }
.sb-nav a:hover svg,
.sb-nav a.active svg    { opacity: 1; }
.nav-label              { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-nav .sb-divider     { height: 1px; background: rgba(255,255,255,.06); margin: 4px 0; }

/* ── Grouped collapsible nav ──────────────────────────────────────── */
/* Hierarchy: group headers are flush-left anchors (chevron on the left); their
   sub-items indent further right. The chevron uses the portal's own accent token
   (--sidebar-active-color) — color is portal-supplied, never hardcoded here, so
   each portal keeps its own color (Platform purple, Park its blue, etc.). */
.sb-group { margin-top: 4px; }
.sb-group-toggle {
  display: flex; align-items: center; justify-content: flex-start; gap: 7px;
  width: 100%; background: none; border: none; padding: 7px 16px 5px;
  color: rgba(255,255,255,.4); font: 600 10.5px/1 var(--font);
  letter-spacing: .09em; text-transform: uppercase; cursor: pointer;
  text-align: left;   /* override <button> default center so headers sit flush-left */
}
.sb-group-toggle .nav-label { flex: 0 1 auto; }  /* don't stretch; keep label by the chevron */
.sb-group-toggle:hover { color: rgba(255,255,255,.6); }
.sb-group-toggle:hover .sb-group-chevron { opacity: 1; }
/* Chevron: flush-left disclosure, clear ▸ collapsed / ▾ expanded, accent-colored. */
.sb-group-chevron {
  order: -1; flex: 0 0 auto; display: inline-block; width: 10px;
  font-size: 9px; line-height: 1; text-align: center;
  color: var(--sidebar-active-color); opacity: .85;
}
.sb-group-chevron::before { content: '\25B8'; }            /* ▸ collapsed */
.sb-group.open .sb-group-chevron::before { content: '\25BE'; }  /* ▾ expanded */
.sb-group-items { max-height: 0; overflow: hidden; transition: max-height .22s ease; }
.sb-group.open .sb-group-items { max-height: 400px; }
.sb-group-items a { padding-left: 36px; }   /* indent sub-items right, under the header */

.sb-footer {
  padding: 14px 20px;
  border-top: 1px solid rgba(255,255,255,.07);
  font-size: 12px; color: var(--sidebar-text);
}
.sb-footer a { color: inherit; text-decoration: none; }
.sb-footer a:hover { color: #e2e8f0; }
.sb-footer .sb-user { font-weight: 500; color: #cbd5e1; margin-bottom: 6px; }

/* ── Main ───────────────────────────────────────────────────────────── */
.main { margin-left: 220px; padding: 28px 32px; margin-top: 52px; min-height: 100vh; transition: margin-left .2s ease; }

.page-hd { margin-bottom: 24px; }
.page-hd h1 { font-size: 21px; font-weight: 600; }
.page-hd p  { color: var(--muted); font-size: 13px; margin-top: 3px; }

/* ── Cards ──────────────────────────────────────────────────────────── */
.card { background: var(--card-bg); border: 1px solid var(--border); border-top: 3px solid var(--brand); border-radius: 8px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0,0,0,.04); }
.card.card-danger  { border-top-color: var(--danger); }
.card.card-success { border-top-color: var(--success); }
.card.card-neutral { border-top-color: var(--border); }
.card-hd {
  padding: 14px 20px; border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
}
.card-hd h2 { font-size: 14px; font-weight: 600; }
.card-body  { padding: 20px; }
/* ★★★ RPR-WIZ-30-K §1 (Michael, 2026-09-16 17:50) — the list-section header row had NO padding, so the trailing
   [+ Add …] button sat flush against the card's right edge (and the title flush left). ONE token, symmetric — fleet-wide
   (every `.card-header`: rent, internet, service, deposit, fee, site type, new site, corp). Padding only; the inline
   flex on the rows that have a button is left as-is. */
.card-header { padding: 12px var(--card-header-pad-x); }
/* ★★★ RPR-WIZ-30-K §2 (Michael, 2026-09-16 17:50) — PROSE fields at 75% of the section content width, via ONE token on
   ONE class (never six inline widths). The label stays above and the helper below at full width (they are siblings, not
   the field). Short scalar inputs are never given this class. */
/* display:block is load-bearing: `.form-label` is display:inline, so an inline-block field narrower than the line sits
   BESIDE the label (at 100% it was too wide and wrapped below — the stacked look). block forces the field onto its own
   line under the label, per §2.3 (label above, helper below at full width). */
.rp-field-prose { display: block; width: var(--field-prose-width); box-sizing: border-box; margin-top: 4px; }
textarea.rp-field-prose { resize: vertical; }
/* ★★★ RPR-WIZ-30-K §2.3 + 18:40 item 5 (Michael, 2026-09-16) — in a Co-Pilot walk form the LABEL sits on its own line
   ABOVE the field. `.form-label` is display:inline by default, so a narrow inline-block input (Plan Name at 420px) sat
   BESIDE its label — and the walk's OPTIONAL/REQUIRED badge, anchored to the label's right edge, then landed ON the input,
   over the value. Block labels stack the field below, so the badge clears the field. Scoped to walk forms only (the badge
   appears nowhere else), so non-walk admin layouts are untouched. */
[data-cp-form] .form-label { display: block; margin-bottom: 3px; }

/* ── Tables ─────────────────────────────────────────────────────────── */
.tbl-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
thead th {
  text-align: left; padding: 9px 14px;
  background: #f8fafc; border-bottom: 2px solid var(--border);
  font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .05em; color: var(--muted); white-space: nowrap;
}
tbody tr { border-bottom: 1px solid #f1f5f9; }
tbody tr:last-child { border-bottom: none; }
tbody tr:hover { background: #f8fafc; }
tbody td { padding: 10px 14px; font-size: 13px; vertical-align: middle; }

/* Camp Store Catalog & Inventory / corp Default Products: contain a long grouped product list to a
   scrollable area (its own scrollbar) so the page doesn't grow unbounded as the catalog fills up.
   The column header row stays visible (sticky thead), and category group headers stick just beneath
   it as you scroll through a category. Collapsible sections + per-row controls work unchanged.
   box-shadow (not border) draws the sticky separators — border-collapse drops sticky borders. */
.cs-catalog-scroll { max-height: 68vh; overflow: auto; }
.cs-catalog-scroll thead th { position: sticky; top: 0; z-index: 3; background: var(--card-bg); box-shadow: inset 0 -2px 0 var(--border); }
.cs-catalog-scroll tr.cs-sec-hd td { position: sticky; top: 34px; z-index: 2; background: var(--card-bg); box-shadow: inset 0 -1px 0 var(--border); }
@media (max-width: 760px) { .cs-catalog-scroll { max-height: none; overflow-y: visible; overflow-x: auto; } }

/* Searchable resident combobox (shared — resident_picker.php). A typeahead whose matches render into
   a fixed-height scrolling menu; scales to large parks (only capped matches hit the DOM). */
.rp-combo { position: relative; max-width: 100%; }
.rp-combo-input { width: 100%; }
.rp-combo-menu { position: absolute; z-index: var(--z-dropdown, 10000); left: 0; right: 0; top: calc(100% + 3px); max-height: 300px; overflow-y: auto; background: var(--card-bg, #fff); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 10px 28px rgba(15,23,42,.14); }
.rp-combo-opt { padding: 8px 12px; font-size: 13px; line-height: 1.2; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rp-combo-opt:hover { background: #f1f5f9; }
.rp-combo-all { font-weight: 600; color: var(--brand); border-bottom: 1px solid var(--border); }
.rp-combo-more { padding: 7px 12px; font-size: 11px; color: var(--muted); }
.empty-row td { text-align: center; padding: 40px; color: var(--muted); }

/* ── Forms ──────────────────────────────────────────────────────────── */
.form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px,1fr)); gap: 16px; }
.form-full  { grid-column: 1 / -1; }
.fg { display: flex; flex-direction: column; gap: 5px; }
.fg label { font-size: 11px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.fg input, .fg select, .fg textarea {
  padding: 8px 11px; border: 1px solid var(--border); border-radius: 6px;
  font-size: 13px; font-family: inherit; color: var(--text); background: #fff;
  transition: border-color .12s;
}
.fg input:focus, .fg select:focus, .fg textarea:focus,
.vr-field input:focus, .vr-field select:focus {   /* ADD-P: openVerifyField's ring = the form's own focus style */
  outline: none; border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(2,132,199,.1);
}
.fg textarea { resize: vertical; min-height: 72px; }
.fg .hint { font-size: 11px; color: var(--muted); }
/* LAYOUT PASS (RPR-REG-01, 2026-09-25): a helper line that sits in a card body OUTSIDE a field (e.g. "Billing Cadence auto-sets Departure…")
   is still a hint — one size and colour for every helper, never body-size */
.sp-body .hint { font-size: 11px; color: var(--muted); line-height: 1.45; }
.sp-body > .hint { display: block; margin-top: 6px; }
.form-actions { margin-top: 20px; display: flex; gap: 10px; align-items: center; }

/* Registration auto-applied deposits (editable defaults): a "required by plan" tag, an inline Waive
   control, and an optional reason field that appears when the amount is reduced/waived. */
/* .dep-req-tag retired — UI-06 §1.4 (.rp-badge--warn) */
.dep-row { display: flex; gap: 8px; align-items: stretch; }
.dep-row input { flex: 1 1 auto; min-width: 0; }
.dep-waive { flex: 0 0 auto; padding: 0 12px; font-size: 12px; font-weight: 600; cursor: pointer;
  color: var(--brand); background: #fff; border: 1px solid var(--border); border-radius: 6px; }
.dep-waive:hover { border-color: var(--brand); }
.fg input.dep-reason { font-size: 12px; }

/* Single-stay cadence: segmented pill radios (Daily/Weekly/Monthly) + quantity that auto-set departure. */
.stay-cad-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.seg-cad { display: inline-flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; background: #fff; }
.seg-cad label { display: inline-flex; margin: 0; cursor: pointer; }
.seg-cad input { position: absolute; opacity: 0; width: 0; height: 0; }
.seg-cad span { display: inline-block; padding: 7px 16px; font-size: 13px; font-weight: 600; color: var(--text);
  text-transform: none; letter-spacing: 0; border-right: 1px solid var(--border); transition: background .12s, color .12s; }
.seg-cad label:last-child span { border-right: none; }
.seg-cad input:checked + span { background: var(--brand); color: #fff; }
.seg-cad input:focus-visible + span { box-shadow: inset 0 0 0 2px rgba(2,132,199,.4); }
.stay-qty { display: inline-flex; align-items: center; gap: 6px; }
.stay-qty input { width: 72px; }
.stay-qty-unit { font-size: 12px; color: var(--muted); }

/* New Registration form — card-section layout + sticky cost-preview panel (matches Product form / POS). */
.reg-page-hd { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.reg-page-hd h2 { margin: 0; font-size: 18px; }
.reg-layout { display: grid; grid-template-columns: minmax(0,1fr) 320px; gap: 20px; align-items: start; }
.reg-main { min-width: 0; }
.reg-side { position: sticky; top: 14px; }
@media (max-width: 900px) { .reg-layout { grid-template-columns: 1fr; } .reg-side { position: static; } }
.reg-subsection { margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--border); }
.reg-subhd { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin: 0 0 12px; }
.reg-empty-hint { font-size: 12px; color: var(--muted); margin: 6px 0 0; }
.reg-quote { border: 1px solid var(--border); border-radius: 14px; background: var(--card-bg,#fff); overflow: hidden; box-shadow: 0 1px 2px rgba(15,23,42,.04); }
.reg-quote-hd { background: var(--brand); color: #fff; padding: 14px 20px; font-size: 15px; font-weight: 800; }
.reg-quote-body { padding: 20px; font-size: 13px; }
/* Create Registration cell (per Michael 2026-07-13): the button's OWN container — separated
   from the Attention panel by a top border, centered both axes with balanced vertical
   padding. Button width/style/label unchanged (width comes from the button rule below). */
.reg-quote-foot { display: flex; align-items: center; justify-content: center;
  padding: 18px 20px; margin-top: 12px; border-top: 1px solid var(--border); }
.reg-create { width: 100%; display: block; background: #16a34a; color: #fff; border: 0; border-radius: 10px; padding: 14px 16px; font-size: 15px; font-weight: 700; cursor: pointer; }
.reg-create:hover { background: #15803d; }
/* The wizard nav buttons toggle visibility via the `hidden` attribute, but .btn/.reg-create set an
   explicit `display`, which overrides the low-specificity UA [hidden] rule — so `hidden` didn't hide
   them (Back showed on step 1). Make [hidden] win for these controls. */
.wz-navbar-nav [hidden], .reg-create[hidden] { display: none !important; }

/* Standalone form-group row rhythm. (.form-group lives in platform.css, which Park's
   admin.css-only pages don't load; the global reset zeroes margins → cramped rows.
   Defining it here gives Park the same row spacing as Corp/Platform.) Grid forms use
   .cfg-form-grid `gap`; this matches the platform.css value so all three portals agree. */
.form-group { margin-bottom: 14px; }
/* Checkbox/label rows: keep the styled 18px checkbox optically centered with its label. */
.form-group label { line-height: 1.3; }

/* ── Native <select>: UI-SELECT-01 §2 (2026-08-30) — THE rule lives in /assets/css/rp-base.css
   (@imported at the top of this file), one place for all six surfaces; platform.css overrides only
   the chevron color. No select appearance/padding/glyph rules here, ever. ── */

/* ── Styled checkbox (shared: admin.css loaded by Platform / Corp / Park) ──
   CSS-only restyle of native checkboxes: rounded-square box; unchecked = white
   with a soft neutral border; checked = scope-accent fill (var(--brand)) + white
   SVG check + subtle shadow; scope-accent focus ring. No JS / markup change —
   real <input type="checkbox"> keeps keyboard (space), screen-reader, label-click
   and mobile behaviour and submits the same value. Accent follows --brand (blue on
   Park, purple on Corp/Platform).
   TOGGLE SWITCHES ARE UNTOUCHED: .toggle-switch input[type="checkbox"] (below)
   has higher specificity (0,2,1) and keeps the toggle's checkbox 0x0/opacity:0,
   so only the sliding switch shows — this rule never affects it. */
input[type="checkbox"] {
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  width: 18px; height: 18px; margin: 0; flex-shrink: 0;
  /* Unchecked ring bound to the control-boundary token (ruled T, 2026-08-17). The old #cbd5e1
     measured 1.48:1 on white — under half the 3:1 floor. Checked state below is UNTOUCHED. */
  border: 1.5px solid var(--form-control-line);
  border-radius: 5px;
  background-color: #fff;
  background-position: center; background-repeat: no-repeat; background-size: 12px 12px;
  cursor: pointer; vertical-align: middle;
  transition: background-color .15s, border-color .15s, box-shadow .15s;
}
/* Hover keeps the bound ring: the old #94a3b8 hover (2.56:1) would now LIGHTEN the ring below the
   3:1 floor exactly while the user is interacting with it. Focus ring + cursor carry the affordance. */
input[type="checkbox"]:hover { border-color: var(--form-control-line); }
input[type="checkbox"]:focus,
input[type="checkbox"]:focus-visible {
  outline: none; border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-ring);
}
input[type="checkbox"]:checked {
  background-color: var(--brand); border-color: var(--brand);
  box-shadow: 0 1px 2px var(--brand-ring);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}
input[type="checkbox"]:disabled {
  background-color: #f3f4f6; border-color: #e2e8f0;
  cursor: not-allowed; opacity: .7;
}
/* A DISABLED box that is CHECKED must still read as checked (Q5, 2026-07-25). The :disabled rule
   above repaints the background, and the tick is a white background-image — on a near-white fill
   it was invisible, so a read-only view looked unchecked. Muted slate fill keeps the white tick
   legible while still reading as "not editable". Specificity beats :disabled by ordering. */
input[type="checkbox"]:checked:disabled {
  background-color: #94a3b8; border-color: #94a3b8; opacity: .85;
}
/* Z4b (2026-07-25): RADIOS carry the same defect and the same fix. A checked radio's dot is drawn
   the same way — as paint, not as DOM state — so on a disabled, near-white fill the SELECTED option
   read as unselected. Any read-only view of a radio group (a stay's cadence, a plan's frequency)
   showed no answer at all. Same muted slate fill, same reasoning as the checkbox rule above. */
input[type="radio"]:checked:disabled {
  background-color: #94a3b8; border-color: #94a3b8; opacity: .85;
}

/* ── Text inputs + textareas (shared: admin.css loaded by Platform / Corp / Park) ──
   CSS-only restyle completing the form-control family (matches the select +
   checkbox styles: same radius / soft neutral border / scope-accent focus ring).
   No JS / markup change. Currency ($-prefix) inputs keep their behaviour — only
   the box is restyled; .input-dollar .form-control (higher specificity) preserves
   the left padding for the $ prefix. The attribute / .form-control selectors raise
   specificity above the .form-control base so the style actually applies. Focus
   accent follows --brand (blue on Park, purple on Corp/Platform). */
input[type="text"], input[type="email"], input[type="number"], input[type="search"],
input[type="tel"], input[type="url"], input[type="password"], input[type="date"],
textarea, textarea.form-control {
  -webkit-appearance: none; appearance: none;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background-color: #fff;
  font-family: inherit; font-size: 13px; line-height: 1.4;
  color: var(--text, #1e293b);
  box-shadow: 0 1px 2px rgba(16,24,40,.04);
  transition: border-color .15s, box-shadow .15s;
}
input[type="text"]:hover, input[type="email"]:hover, input[type="number"]:hover,
input[type="search"]:hover, input[type="tel"]:hover, input[type="url"]:hover,
input[type="password"]:hover, input[type="date"]:hover, textarea:hover { border-color: #cbd5e1; }
input[type="text"]:focus, input[type="email"]:focus, input[type="number"]:focus,
input[type="search"]:focus, input[type="tel"]:focus, input[type="url"]:focus,
input[type="password"]:focus, input[type="date"]:focus,
textarea:focus, textarea.form-control:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-ring);
}
input[type="text"]:disabled, input[type="email"]:disabled, input[type="number"]:disabled,
input[type="search"]:disabled, input[type="tel"]:disabled, input[type="url"]:disabled,
input[type="password"]:disabled, input[type="date"]:disabled, textarea:disabled {
  background-color: #f3f4f6; color: var(--muted, #64748b); cursor: not-allowed; opacity: .8;
}
input::placeholder, textarea::placeholder { color: var(--muted, #9aa3b2); opacity: 1; }

/* ── Buttons ────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 8px 16px; border: none; border-radius: var(--rp-radius-sm, 6px);   /* UI-05 §7: ONE radius token, shared with .rp-badge (rp-base.css) */
  font-size: 13px; font-weight: 500; font-family: inherit;
  cursor: pointer; text-decoration: none; transition: filter .12s;
}
.btn:hover    { filter: brightness(.9); }
.btn-primary  { background: var(--brand); color: #fff; }
.btn-danger   { background: var(--danger); color: #fff; }
.btn-ghost    { background: transparent; color: var(--muted); border: 1px solid var(--border); }
.btn-sm       { padding: 5px 10px; font-size: 12px; }

/* ── Badges ─────────────────────────────────────────────────────────── */
/* UI-06 §1.4 (2026-09-03): the legacy .badge family is GONE — every status label is .rp-badge + a tone (assets/css/rp-base.css; rp_badge_tone() in helpers.php). Nothing left to copy from here. */

/* ── Alerts ─────────────────────────────────────────────────────────── */
.alert { padding: 12px 16px; border-radius: 6px; margin-bottom: 20px; font-size: 13px; }
.alert-success { background: #f0fdf4; border: 1px solid #bbf7d0; color: #15803d; }
.alert-error   { background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; }
.alert-info    { background: #eff6ff; border: 1px solid #bfdbfe; color: #1e40af; }

/* ── Stats grid ─────────────────────────────────────────────────────── */
.stats-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px,1fr)); gap: 16px; margin-bottom: 24px; }
.stat {
  background: var(--card-bg); border: 1px solid var(--border);
  border-radius: 8px; padding: 18px 20px;
}
.stat .lbl { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.stat .val { font-size: 30px; font-weight: 700; color: var(--text); margin-top: 4px; }
.stat .sub { font-size: 11px; color: var(--muted); margin-top: 2px; }

/* ── Login ──────────────────────────────────────────────────────────── */
.login-wrap { display:flex; align-items:center; justify-content:center; min-height:100vh; background: var(--sidebar-bg); }
.login-box  { background: var(--card-bg); border-radius: 12px; padding: 40px; width: 380px; }
.login-box h1 { font-size: 20px; font-weight: 700; }
.login-box .sub { color: var(--muted); font-size: 13px; margin: 4px 0 28px; }

/* ── Misc ───────────────────────────────────────────────────────────── */
.text-muted { color: var(--muted); }
.text-sm    { font-size: 12px; }
.mt-3       { margin-top: 12px; }
.mt-4       { margin-top: 16px; }
.flex       { display: flex; }
.gap-2      { gap: 8px; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }

/* Recurring toggle */
.recurring-section { display: none; }

/* ── Toggle switches ──────────────────────────────────────────────── */
/* Bordered toggle card — the "Offer Seasonal" card style, extracted to ONE class so every
   feature toggle (Offer Seasonal, Guest-bookable, …) matches without per-page CSS drift.
   grid-column is inert outside a grid container, so the class is safe in any form layout. */
.toggle-card {
  grid-column: 1 / -1;
  margin: 6px 0;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
}
.toggle-switch {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  margin: 0;
  user-select: none;
}
.toggle-switch input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.toggle-slider {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
  flex-shrink: 0;
  background: #cbd5e1;
  border-radius: 12px;
  transition: background 0.2s;
}
.toggle-slider::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.2s;
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
.toggle-switch input:checked + .toggle-slider {
  background: var(--brand, #0284c7);
}
.toggle-switch input:checked + .toggle-slider::after {
  transform: translateX(20px);
}
.toggle-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--text, #1e293b);
}
.settings-tab-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  border-bottom: 2px solid var(--border);
  margin-bottom: 20px;
}
.settings-tab-nav a {
  padding: 8px 14px;
  font-size: 13px;
  color: var(--muted);
  text-decoration: none;
  border-radius: 4px 4px 0 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: color 0.15s;
  white-space: nowrap;
}
.settings-tab-nav a:hover { color: var(--text); }
.settings-tab-nav a.active {
  color: var(--brand);
  border-bottom-color: var(--brand);
  font-weight: 600;
}

/* ── Top bar ──────────────────────────────────────────────────────────────── */
.topbar {
  position: fixed; top: 0; left: 220px; right: 0; height: 52px;
  background: #fff; border-bottom: 1px solid var(--border);
  display: flex; align-items: center; padding: 0 20px 0 20px; z-index: var(--z-sticky-header, 100); gap: 12px;
  /* ★★ P4.7 (RPR-PRIORITY-01) — THE SEARCH DROPDOWN RENDERED BEHIND THE SETTINGS TAB STRIP.
     `.topbar` is position:fixed WITH a z-index, so it CREATES A STACKING CONTEXT: the dropdown's
     own `z-index: 200` is resolved INSIDE it and the whole topbar painted at 90. `.stnav-wrap`
     is sticky at the SAME 90 and comes later in the document, so it won on DOM order and clipped
     the dropdown's second result. Raising the topbar to 100 lifts the context, not the child —
     bumping the dropdown itself could never have worked.
     ★ Deliberately still BELOW the modal layer (.ng-modal 200, .rpm-overlay 320) and far below
       the Co-Pilot panel (9998+), so a dialog still covers the topbar as it should. */
  transition: left .2s ease;
}
/* ★ RPR-REG-01 ADDENDUM D (2026-09-24): a route that opens a registration LANDS ON its header (#rr-reg-N — registration_href), and a new
   registration / a draft resume / a duplicate on the wizard's (#new-registration-top). The .topbar is position:fixed at 52px, so a
   fragment jump would tuck the "Registration #N" line UNDER it — the target clears the bar with a margin to spare. */
[id^="rr-reg-"], [id^="rr-open-"], #new-registration-top { scroll-margin-top: 64px; }

.topbar-hamburger {
  background: none; border: none; padding: 6px; cursor: pointer;
  color: var(--muted); line-height: 0; flex-shrink: 0;
}
.topbar-hamburger:hover { color: var(--text); }
.topbar-hamburger svg { display: block; }

/* Search bar */
.topbar-search {
  flex: 1; max-width: 420px; position: relative;
  display: flex; align-items: center; gap: 8px;
  background: #f1f5f9; border-radius: 7px; padding: 0 12px;
  border: 1px solid var(--border);
}
.topbar-search-icon { color: var(--muted); flex-shrink: 0; line-height: 0; }
.topbar-search input {
  flex: 1; border: none; background: transparent; font-size: 13px;
  padding: 9px 0; color: var(--text); outline: none; font-family: inherit;
}
.topbar-search input::placeholder { color: var(--muted); }
.topbar-search-results {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0;
  background: #fff; border: 1px solid var(--border); border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0,0,0,.12); z-index: var(--z-dropdown, 10000); overflow: hidden;
}
.topbar-search-results a {
  display: block; padding: 9px 14px; font-size: 13px;
  color: var(--text); text-decoration: none;
}
.topbar-search-results a:hover { background: #f8fafc; }
.topbar-search-results .sr-cat {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--muted); padding: 8px 14px 3px;
  background: #f8fafc; border-bottom: 1px solid var(--border);
}
/* RPR-COPILOT-02 REV 2 §13.3 — the visible submit control, the explicit no-results line, gated results with the ruled copy */
.topbar-search-go {
  flex-shrink: 0; border: none; border-radius: 5px; padding: 5px 10px; margin: 4px 0;
  background: #1e293b; color: #fff; font-size: 12px; font-weight: 600; font-family: inherit;
  cursor: pointer; line-height: 1;
}
.topbar-search-go:hover { background: #0f172a; }
.topbar-search-results .sr-none { padding: 10px 14px; font-size: 13px; color: var(--muted); }
.topbar-search-results .sr-gated { display: block; padding: 9px 14px; font-size: 13px; color: var(--text); opacity: .85; }
.topbar-search-results .sr-gated .sr-gate { display: block; font-size: 11.5px; color: #b45309; margin-top: 2px; }

/* Topbar right */
.topbar-right { margin-left: auto; display: flex; gap: 10px; align-items: center; }
.topbar-context { font-size: 12px; color: var(--muted); white-space: nowrap; }
.topbar-avatar {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--brand, #2563eb); color: #fff;
  font-size: 11px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase;
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  user-select: none;
}
.btn-topbar-help {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 13px; border-radius: 6px;
  background: #1e293b; color: #fff !important;
  font-size: 12.5px; font-weight: 500; text-decoration: none !important;
  transition: background .12s; white-space: nowrap; line-height: 1;
  border: none; cursor: pointer; font-family: inherit;
}
.btn-topbar-help:hover { background: #0f172a; }
.btn-topbar-help svg { opacity: .85; }

/* ── help-icon-btn (blue circle ⓘ context buttons) ──────────────────── */
.help-icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 17px; height: 17px; flex-shrink: 0;
  background: var(--brand, #2563eb); border: none;
  color: #fff; cursor: pointer;
  font-size: 10px; font-weight: 700; line-height: 1;
  vertical-align: middle;
  margin-left: 5px; border-radius: 50%;
  transition: background .1s; padding: 0;
  font-style: normal; font-family: inherit;
}
.help-icon-btn:hover { background: #1d4ed8; }

/* ── Co-Pilot launcher FAB (corner bubble) ─────────────────────────────── */
.rp-cp-launcher {
  position: fixed; bottom: 24px; right: 24px;
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--brand, #2563eb); color: #fff;
  border: none; cursor: pointer; z-index: var(--z-assistant, 200);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 16px rgba(0,0,0,.22);
  transition: background .15s, box-shadow .15s;
}
.rp-cp-launcher:hover { background: #1d4ed8; box-shadow: 0 6px 20px rgba(0,0,0,.28); }
/* ── Co-Pilot overlay ──────────────────────────────────────────────────── */
.rp-copilot {
  position: fixed; bottom: 24px; right: 24px;
  width: 380px; height: 520px; max-height: calc(100vh - 48px);
  background: #fff; border: 1px solid var(--border);
  border-radius: 12px; box-shadow: 0 8px 32px rgba(0,0,0,.18);
  display: flex; flex-direction: column; z-index: calc(var(--z-assistant, 200) + 1);
  overflow: hidden;
}
/* Default = CLOSED. The HTML `hidden` attribute alone is defeated by the
   author `display:flex` above (equal specificity, author origin wins over the
   UA [hidden] rule). This guarantees hidden actually hides — on first load and
   after minimize — with zero JS. Re-open only via a trigger (button / ⓘ key). */
.rp-copilot[hidden] { display: none !important; }
/* rp-cp-minimized kept for compat but no longer used by default collapse flow */
.rp-copilot.rp-cp-minimized { height: auto; min-height: 0; }
.rp-copilot.rp-cp-minimized .rp-cp-body { display: none; }
.rp-cp-hd {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px;
  background: var(--brand, #2563eb); color: #fff;
  cursor: move; user-select: none;
  border-radius: 11px 11px 0 0; flex-shrink: 0;
}
.rp-copilot.rp-cp-minimized .rp-cp-hd { border-radius: 11px; cursor: default; }
.rp-cp-title { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; }
.rp-cp-hd-btns { display: flex; gap: 4px; }
.rp-cp-hd-btn {
  background: rgba(255,255,255,.2); border: none; color: #fff;
  cursor: pointer; padding: 4px 7px; border-radius: 4px;
  line-height: 1; font-family: inherit; display: flex; align-items: center;
  position: relative;
}
.rp-cp-hd-btn:hover { background: rgba(255,255,255,.35); }
/* CB-02 REV 4: 44px hit targets */
/* ── CB-02 REV 4 §3: the header buttons meet CD-05's 44px standard via an invisible
   ::before hit area (::after is the tooltip's) — the VISUAL pill does not move (padding
   would repaint it). Scoped per button with half-gap horizontal insets so neighbouring
   hit areas meet at the 4px gap's midline instead of overlapping; the drag-guard's
   closest('.rp-cp-hd-btn') still resolves (a pseudo-element reports its host as target).
   Same pattern as the CD-05 gateway chevrons. ── */
.rp-cp-hd-btn::before { content:""; position:absolute; left:-9px; right:-9px; top:-12px; bottom:-12px; }
/* Adjacent 27px pills at a 4px gap cannot BOTH own exclusive 44px widths (88px over a
   58px span) — the boxes overlap by design and the LATER sibling wins the shared strip
   (paint order), so each button's exclusive reach is ~38-40px wide × 46px tall with a
   44px formal box. The only way to full exclusive 44s is spacing the buttons out — a
   visual change, reported for Michael, not made. */

/* ── Co-Pilot options menu (⋮) ─────────────────────────────────────────── */
.rp-cp-menu-wrap { position: relative; display: flex; }
.rp-cp-menu {
  position: absolute; top: calc(100% + 6px); right: 0;
  min-width: 210px; background: #fff; color: var(--text, #0f172a);
  border: 1px solid var(--border, #e5e7eb); border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,.16);
  padding: 5px; z-index: calc(var(--z-assistant, 200) + 4); cursor: default;
}
.rp-cp-menu[hidden] { display: none; }
.rp-cp-menu-item {
  display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 8px 10px; border: none; background: none; border-radius: 6px;
  font: inherit; font-size: 13px; color: var(--text, #0f172a);
  text-align: left; cursor: pointer;
}
.rp-cp-menu-item svg { color: var(--brand, #2563eb); flex-shrink: 0; }
.rp-cp-menu-item:hover { background: color-mix(in srgb, var(--brand, #2563eb) 10%, transparent); }
.rp-cp-menu-toggle { cursor: pointer; }
.rp-cp-menu-toggle span:first-of-type { flex: 1; }
.rp-cp-menu-switch { accent-color: var(--brand, #2563eb); width: 15px; height: 15px; cursor: pointer; }
/* Dismiss tooltip */
.rp-cp-hd-btn[data-tip]:hover::after {
  content: attr(data-tip);
  position: absolute; bottom: calc(100% + 6px); right: 0;
  background: #0f172a; color: #fff;
  font-size: 11px; font-weight: 500; white-space: nowrap;
  padding: 4px 8px; border-radius: 4px; pointer-events: none;
  z-index: calc(var(--z-assistant, 200) + 3);
}
.rp-cp-body { display: flex; flex-direction: column; flex: 1; overflow: hidden; }
.rp-cp-msgs {
  flex: 1; overflow-y: auto; padding: 12px;
  display: flex; flex-direction: column; gap: 8px;
  scroll-behavior: smooth;
}
.rp-cp-msg {
  font-size: 13px; line-height: 1.55; padding: 9px 12px;
  border-radius: 8px; max-width: 94%; word-wrap: break-word;
}
.rp-cp-msg-user    { background: var(--brand,#2563eb); color:#fff; align-self:flex-end; border-bottom-right-radius:2px }
.rp-cp-msg-bot     { background: #f1f5f9; color:var(--text); align-self:flex-start; border-bottom-left-radius:2px }
.rp-cp-msg-system  { background:#fef3c7; color:#92400e; font-size:11px; align-self:center; padding:4px 10px; border-radius:20px; max-width:80% }
.rp-cp-msg-typing  { color:#94a3b8; font-style:italic }
.rp-cp-msg-err     { background:#fee2e2; color:#b91c1c }
.rp-cp-input-row {
  display: flex; gap: 6px; padding: 10px 12px;
  border-top: 1px solid var(--border); flex-shrink: 0;
}
.rp-cp-input-row input {
  flex: 1; padding: 7px 10px;
  border: 1px solid var(--border); border-radius: 6px;
  font-size: 13px; outline: none; font-family: inherit;
}
.rp-cp-input-row input:focus { border-color: var(--brand,#2563eb); box-shadow: 0 0 0 2px rgba(37,99,235,.15); }
.rp-cp-send {
  padding: 7px 12px; background: var(--brand,#2563eb); color: #fff;
  border: none; border-radius: 6px; cursor: pointer;
  display: flex; align-items: center; transition: opacity .1s;
}
.rp-cp-send:hover { opacity: .88; }
.rp-cp-footer-note {
  padding: 5px 12px; font-size: 11px; color: var(--muted);
  border-top: 1px solid var(--border); text-align: center;
  flex-shrink: 0; background: #fafafa; line-height: 1.4;
}
.btn-topbar-logout {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 13px; border-radius: 6px;
  color: var(--muted) !important; font-size: 12.5px; font-weight: 500;
  text-decoration: none !important;
  border: 1px solid var(--border); transition: color .12s, border-color .12s;
  white-space: nowrap; line-height: 1;
}
.btn-topbar-logout:hover { color: var(--text) !important; border-color: #94a3b8; }

/* ── Sidebar collapse ────────────────────────────────────────────────────── */
body.sb-collapsed .sidebar { width: 56px; overflow: hidden; }
body.sb-collapsed .sidebar .nav-label { display: none; }
body.sb-collapsed .sidebar .sb-group-chevron { display: none; }
body.sb-collapsed .sidebar .tenant { display: none; }
body.sb-collapsed .sidebar .sb-logo-panel { padding: 8px; display:flex; justify-content:center; align-items:center; }
body.sb-collapsed .sidebar .sb-logo-panel .logo-full    { display: none; }
body.sb-collapsed .sidebar .sb-logo-panel .logo-compact { display: block; width: 32px; height: 32px; object-fit: contain; }
body.sb-collapsed .sidebar .sb-footer { display: none; }
body.sb-collapsed .sidebar .sb-group-toggle { justify-content: center; padding: 8px 0; }
body.sb-collapsed .sidebar .sb-nav a { justify-content: center; padding: 10px 0; }
body.sb-collapsed .sidebar .sb-nav a svg { opacity: .75; }
body.sb-collapsed .main { margin-left: 56px; }
body.sb-collapsed .topbar { left: 56px; }

/* ── Page header ──────────────────────────────────────────────────────────── */
.ph { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 24px; gap: 16px; flex-wrap: wrap; }
.ph-left h1 { font-size: 22px; font-weight: 700; margin: 0; line-height: 1.2; }
.ph-left .ph-sub { font-size: 13px; color: var(--muted); margin: 4px 0 0; }
.ph-right { display: flex; gap: 8px; align-items: center; }

/* ── KPI stat cards ──────────────────────────────────────────────────────── */
.kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 20px; }
.col-2    { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 20px; }
/* * UTIL-LAYOUT-01 2.6 (Michael, 2026-09-09): "balanced at 1280 and broken at 390 is not balanced". .col-2 carried no narrow rule at
   all, so a two-up grid stayed two-up on a phone on every page that uses it - measured on Utilities, where [Site Meter Configuration]
   and [Recent Daily Readings] sat side by side at 390px. Same breakpoint the page's own rate pair already uses. */
@media (max-width: 880px) { .col-2 { grid-template-columns: 1fr; } }
.kpi-card {
  background: var(--card-bg); border: 1px solid var(--border); border-top: 3px solid var(--brand);
  border-radius: 8px; padding: 20px; text-align: center; box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
.kpi-card.danger { border-top-color: var(--danger); }
.kpi-card .kpi-lbl { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin-bottom: 6px; }
.kpi-card .kpi-val { font-size: 32px; font-weight: 700; line-height: 1; }
.kpi-card .kpi-sub { font-size: 12px; color: var(--muted); margin-top: 6px; }
.kpi-card .kpi-link { display: block; font-size: 12px; color: var(--muted); margin-top: 4px; text-decoration: none; }
.kpi-card .kpi-link:hover { color: var(--brand); }

/* ── Card sub-header (title row inside a card, with optional action) ─────── */
.card-sh { padding: 12px 18px; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; }
.card-sh strong { font-size: 13px; font-weight: 600; }
.card-sh.danger strong { color: var(--danger); }

/* ── Progress bar ────────────────────────────────────────────────────────── */
.progress-bar-wrap { background: var(--border); border-radius: 999px; height: 8px; overflow: hidden; margin-bottom: 4px; }
.progress-bar-fill { height: 100%; border-radius: 999px; background: var(--brand); transition: width .4s; }
.progress-bar-fill.success { background: var(--success); }

/* ── Section divider ─────────────────────────────────────────────────────── */
.section-divider { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin: 24px 0 10px; padding-bottom: 6px; border-bottom: 1px solid var(--border); }

/* ── Text colour utilities ───────────────────────────────────────────────── */
.text-danger  { color: var(--danger); }
.text-success { color: var(--success); }

/* ── Wizard step cards ───────────────────────────────────────────────────── */
.wiz-step { display: grid; grid-template-columns: 52px 1fr; border: 1px solid var(--border); border-radius: 10px; background: #fff; margin-bottom: 12px; overflow: hidden; transition: box-shadow .15s; }
.wiz-step:hover { box-shadow: 0 2px 10px rgba(0,0,0,.07); }
.wiz-step.done    { border-color: #bbf7d0; }
.wiz-step.skipped { opacity: .75; }
.wiz-step.locked  { opacity: .5; pointer-events: none; }
.wiz-num { display: flex; align-items: center; justify-content: center; font-size: 17px; font-weight: 800; background: #f8faff; border-right: 1px solid var(--border); color: #94a3b8; }
.wiz-step.done .wiz-num      { background: #f0fdf4; color: #15803d; border-right-color: #bbf7d0; }
.wiz-step.is-golive .wiz-num { background: #fff7ed; color: #ea580c; border-right-color: #fed7aa; }
.wiz-body    { padding: 16px 20px; }
.wiz-top     { display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.wiz-title   { font-weight: 700; font-size: 14px; flex: 1; min-width: 200px; }
.wiz-badges  { display: flex; gap: 6px; align-items: center; flex-shrink: 0; }
/* .badge-done/-skip/-req/-lock retired — UI-06 §1.4 (the setup checklist's states are .rp-badge tones) */
.wiz-desc    { font-size: 13px; color: var(--muted); margin-top: 6px; line-height: 1.55; }
.wiz-hints   { margin: 10px 0 0; padding: 10px 14px; background: #f0f7ff; border-left: 3px solid var(--brand); border-radius: 0 6px 6px 0; font-size: 12px; color: #1e40af; display: none; }
.wiz-hints.open { display: block; }
.wiz-hints ul{ margin: 4px 0 0 16px; padding: 0; list-style: disc; }
.wiz-hints li{ margin-bottom: 3px; }
.wiz-actions { display: flex; gap: 8px; align-items: center; margin-top: 12px; flex-wrap: wrap; }
.wiz-stat    { font-size: 12px; color: var(--muted); background: #f1f5f9; padding: 2px 10px; border-radius: 20px; }
.test-result-mini     { display: none; font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 6px; }
.test-result-mini.ok  { background: #dcfce7; color: #15803d; display: inline-block; }
.test-result-mini.err { background: #fee2e2; color: #b91c1c; display: inline-block; }

/* ── Dollar input component ── */
.input-dollar { position:relative; display:inline-flex; align-items:center; }
.input-dollar-prefix { position:absolute; left:10px; color:var(--muted,#6b7280); font-size:14px; pointer-events:none; user-select:none; line-height:1; }
.input-dollar .form-control { padding-left:22px; }

/* ── Co-Pilot nudges ──────────────────────────────────────────────────────── */
.rp-cp-nudges {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 4px 0 6px;
}
.rp-cp-nudge {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 8px;
  padding: 7px 10px;
  font-size: 12px;
  color: #1e40af;
  cursor: pointer;
  line-height: 1.4;
  transition: background .15s;
}
.rp-cp-nudge:hover { background: #dbeafe; }
.rp-cp-nudge span  { flex: 1; }
.rp-cp-nudge-x {
  background: none;
  border: none;
  cursor: pointer;
  color: #93c5fd;
  font-size: 15px;
  line-height: 1;
  padding: 0 2px;
  flex-shrink: 0;
}
.rp-cp-nudge-x:hover { color: #1e40af; }

/* ── Shared icon-card select (render_icon_select / icon-select.js) ───────────── */
.iccard-select{position:relative;display:inline-block;min-width:240px;max-width:100%}
.iccard-trigger{display:flex;align-items:center;gap:8px;width:100%;padding:8px 12px;border:1px solid var(--border,#d1d5db);border-radius:8px;background:#fff;cursor:pointer;font-size:14px;text-align:left}
.iccard-trigger .iccard-ico{font-size:18px;line-height:1}
.iccard-trigger .iccard-lbl{flex:1}
.iccard-trigger .iccard-caret{color:#9ca3af}
.iccard-panel{position:absolute;z-index:var(--z-dropdown,10000);top:100%;left:0;right:0;margin-top:4px;background:#fff;border:1px solid var(--border,#d1d5db);border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.12);padding:6px;display:grid;gap:4px;max-height:340px;overflow:auto}
.iccard-opt{display:flex;align-items:center;gap:10px;padding:9px 11px;border:1px solid transparent;border-radius:8px;background:none;cursor:pointer;font-size:13.5px;text-align:left;width:100%}
.iccard-opt:hover{background:#f3f4f6}
.iccard-opt.sel{border-color:#bfdbfe;background:#eff6ff}
.iccard-opt .iccard-ico{font-size:18px;line-height:1}

/* ── Co-Pilot gradient CTA pill (🧭 Continue; reusable — the 🗺️ Health action button may
   adopt it later, deliberately NOT restyled in this pass). Blue→purple ramp with purple as
   the right-hand stop on every scope (per spec); focus ring rides the scope accent var. ── */
.cp-btn-gradient {
  display: inline-flex; align-items: center; gap: 8px;
  height: 36px; padding: 0 8px 0 18px;
  border: none; border-radius: 999px;
  background: linear-gradient(90deg, #4A90D9 0%, #7B6FD4 55%, #9B6FD4 100%);
  color: #fff; font-family: var(--font);
  font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  cursor: pointer; text-decoration: none; user-select: none;
}
.cp-btn-gradient:hover  { filter: brightness(1.06); box-shadow: 0 3px 10px rgba(123,111,212,.35); }
.cp-btn-gradient:active { filter: brightness(.96); }
.cp-btn-gradient:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.cp-btn-gradient .cp-btn-chev {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%;
  background: rgba(255,255,255,.25);
  font-size: 14px; font-weight: 700; line-height: 1;
}

/* ── Mobile: off-canvas sidebar drawer (shared by ALL FOUR portals) ─────────────
   Below 820px the fixed 220px sidebar steals ~60% of a phone screen, so it becomes
   an off-canvas drawer toggled by the topbar hamburger (shared layout JS toggles
   body.sb-open), dimmed by .sb-backdrop; main content + topbar go full width. The
   desktop 56px collapse (body.sb-collapsed) is a SEPARATE concept and is stripped on
   mobile by the shared JS — the defensive overrides below keep the layout correct even
   in the pre-JS paint if a persisted collapse lingers. */
.sb-backdrop {
  position: fixed; inset: 0; z-index: calc(var(--z-sticky, 90) + 5);
  background: rgba(15, 23, 42, .45);
  opacity: 0; visibility: hidden; transition: opacity .22s ease;
}
@media (max-width: 820px) {
  .sidebar {
    transform: translateX(-100%);
    transition: transform .22s ease;
    box-shadow: 4px 0 40px rgba(0, 0, 0, .35);
    width: 250px;
  }
  body.sb-open .sidebar   { transform: none; }
  body.sb-open .sb-backdrop { opacity: 1; visibility: visible; }
  .main   { margin-left: 0; padding: 20px 16px; }
  .topbar { left: 0; }
  .topbar-context { display: none; }   /* declutter the cramped mobile topbar */
  /* Defensive: neutralize a lingering desktop-collapse class on mobile. */
  body.sb-collapsed .sidebar { width: 250px; }
  body.sb-collapsed .main    { margin-left: 0; }
  body.sb-collapsed .topbar  { left: 0; }
  /* Wide data tables scroll inside their own region instead of blowing out the page. */
  .table, .data-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; }
}

/* ═══ Camp Store product form (shared park + corp; reference-mockup styling) ═══════ */
.sp-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:20px;flex-wrap:wrap}
.sp-head .l{display:flex;gap:12px;align-items:flex-start;min-width:0}
.sp-head .back{color:var(--brand);text-decoration:none;font-size:20px;line-height:1;margin-top:4px}
.sp-head h1{margin:0;font-size:24px;font-weight:800;color:var(--text);line-height:1.15}
.sp-head .sub{margin:3px 0 0;font-size:13px;color:var(--muted)}
.sp-head .actions{display:flex;gap:10px;flex:0 0 auto}

/* Row-paired grid: cards are direct grid items in interleaved row order; align-items:stretch makes
   each row's shorter card grow to its taller partner's height so the column bottoms line up (no dead
   gutter). gap handles both axes, so zero the card's own margin-bottom for direct grid children. */
.sp-grid{display:grid;grid-template-columns:minmax(0,1.75fr) minmax(320px,1fr);gap:20px;align-items:stretch}
.sp-grid>.sp-card{margin-bottom:0}
@media(max-width:980px){.sp-grid{grid-template-columns:1fr}}
.sp-card{border:1px solid var(--border);border-radius:14px;background:var(--card-bg,#fff);margin-bottom:20px;box-shadow:0 1px 2px rgba(15,23,42,.04)}
.sp-card-hd{display:flex;align-items:center;gap:10px;padding:18px 22px 2px}
.sp-card-hd svg{width:22px;height:22px;color:var(--brand);flex:0 0 auto}
.sp-card-hd h3{margin:0;font-size:16px;font-weight:700;color:var(--brand)}
.sp-body{padding:16px 22px 22px}
.sp-row{display:grid;gap:18px 20px}
.sp-row.c2{grid-template-columns:1fr 1fr}
.sp-row.c4{grid-template-columns:repeat(4,minmax(0,1fr))}
.sp-row + .sp-row{margin-top:18px}
@media(max-width:1240px){.sp-row.c4{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.sp-row.c2,.sp-row.c4{grid-template-columns:1fr}}
.sp-field{display:flex;flex-direction:column;min-width:0}
.sp-field label,.sp-lbl{font-size:13px;font-weight:700;color:var(--text);margin-bottom:6px;display:flex;align-items:center;gap:5px}
.sp-lbl .req{color:var(--danger)}
.sp-field .form-control,.sp-field select.form-control{height:42px}
.sp-field textarea.form-control{height:auto;min-height:120px;resize:vertical}
.sp-hint{font-size:12px;color:var(--muted);font-weight:400;margin-top:6px;line-height:1.4}
.sp-info{width:15px;height:15px;color:#94a3b8;flex:0 0 auto}

/* money field with $ prefix + read-only margin */
.sp-money{display:flex;align-items:stretch}
.sp-money .pfx{display:flex;align-items:center;padding:0 12px;background:#f8fafc;border:1px solid var(--border);border-right:0;border-radius:9px 0 0 9px;color:var(--muted);font-weight:600;font-size:14px}
.sp-money .form-control{border-radius:0 9px 9px 0}
.sp-readonly{background:#f1f5f9;color:var(--muted);cursor:default}

/* UPC field with barcode glyph */
.sp-upc{position:relative}

/* toggle field (Taxable / Track Inventory) */
.sp-toggle-field .toggle-switch{margin-top:2px}

/* choices: status radios + option checkboxes with descriptions */
.sp-choice{display:flex;gap:11px;align-items:flex-start;padding:11px 0;cursor:pointer;margin:0}
.sp-choice + .sp-choice{border-top:1px solid #f1f5f9}
.sp-choice > input{margin-top:2px;accent-color:var(--brand);width:17px;height:17px;flex:0 0 auto}
.sp-choice .t{font-size:14px;font-weight:600;color:var(--text)}
.sp-choice > input:checked ~ .m .t{color:var(--brand)}
.sp-choice .d{font-size:12px;color:var(--muted);margin-top:2px}

/* image dropzone */
.sp-drop{position:relative;border:2px dashed #cbd5e1;border-radius:12px;padding:26px 16px;text-align:center;transition:border-color .15s,background .15s;cursor:pointer}
.sp-drop:hover,.sp-drop.drag{border-color:var(--brand);background:var(--sidebar-active-bg,#eff6ff)}
.sp-drop input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer}
.sp-drop svg{width:42px;height:42px;color:#94a3b8;margin-bottom:8px}
.sp-drop .d1{font-size:14px;color:var(--text);font-weight:500}
.sp-drop .or{font-size:12px;color:var(--muted);margin:5px 0}
.sp-drop .browse{display:inline-block;padding:7px 16px;border:1px solid var(--brand);color:var(--brand);border-radius:8px;font-size:13px;font-weight:600;background:#fff;position:relative;z-index:1;pointer-events:none}
.sp-drop .fmt{font-size:12px;color:var(--muted);margin-top:12px;line-height:1.5}
.sp-preview{display:flex;gap:12px;align-items:center;margin-top:14px}
.sp-preview img{width:64px;height:64px;object-fit:contain;border:1px solid var(--border);border-radius:8px;background:#f8fafc;flex:0 0 auto}
.sp-preview .pv-txt{font-size:13px;color:var(--muted)}

/* footer required note */
.sp-foot{display:flex;align-items:center;gap:9px;background:#f8fafc;border:1px solid var(--border);border-radius:10px;padding:12px 16px;font-size:13px;color:var(--muted);margin-top:6px}
.sp-foot svg{width:16px;height:16px;color:var(--brand);flex:0 0 auto}
.sp-foot .req{color:var(--danger)}

/* corp-lineage note */
.sp-lineage{font-size:12px;color:var(--brand-hover);background:#f0f9ff;border:1px solid #bae6fd;border-radius:8px;padding:9px 12px;margin:0 0 16px}

/* ═══ Camp Store — New Sale (POS) — reference-mockup styling ══════════════════════ */
.pos-sold{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;border:1px solid #bbf7d0;background:#f0fdf4;border-radius:12px;padding:12px 16px;margin-bottom:16px}
.pos-sold strong{color:#166534}.pos-sold span{color:var(--muted);font-size:13px}
.pos-wrap{display:grid;grid-template-columns:minmax(0,1.62fr) minmax(340px,1fr);gap:18px;align-items:start}
@media(max-width:1080px){.pos-wrap{grid-template-columns:1fr}}
.pos-card{border:1px solid var(--border);border-radius:14px;background:#fff;box-shadow:0 1px 2px rgba(15,23,42,.04);overflow:hidden}
.pos-card-hd{padding:16px 18px 0}
.pos-hd-l{font-size:17px;font-weight:800;color:var(--text)}
.pos-card-body{padding:16px 18px 18px}
.pos-right{display:flex;flex-direction:column;gap:18px}

/* segmented scan/categories */
.pos-seg{display:flex;gap:10px;margin-bottom:14px}
.pos-seg-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;padding:10px 14px;border:1px solid var(--border);border-radius:9px;background:#fff;color:var(--text);font-size:14px;font-weight:600;cursor:pointer}
.pos-seg-btn.active{background:var(--brand);border-color:var(--brand);color:#fff}
/* scan row */
.pos-scanrow{display:flex;gap:12px;align-items:flex-end}
.pos-scan-wrap{flex:1;display:flex;align-items:center;gap:10px;border:1px solid var(--border);border-radius:10px;padding:0 14px;background:#fff;height:52px}
.pos-scan-wrap:focus-within{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-ring)}
.pos-scan-ico{color:var(--brand);font-size:15px;letter-spacing:-2px}
.pos-scan-wrap input{flex:1;border:0;outline:0;font-size:15px;background:transparent;height:100%}
.pos-qty label{display:block;font-size:12px;color:var(--muted);font-weight:600;margin-bottom:3px}
.pos-stepper{display:flex;align-items:center;border:1px solid var(--border);border-radius:9px;height:52px;width:72px}
.pos-stepper input{width:100%;border:0;outline:0;text-align:center;font-size:15px;-moz-appearance:textfield}
.pos-scanmsg{font-size:12px;min-height:16px;margin-top:6px}
/* filters */
.pos-filters{display:flex;gap:10px;align-items:center;margin-top:14px}
.pos-filters .form-control{height:42px}
.pos-filters #posCatSelect{max-width:190px}
.pos-viewtoggle{display:flex;border:1px solid var(--border);border-radius:9px;overflow:hidden;flex:0 0 auto}
.pos-viewtoggle button{width:42px;height:42px;border:0;background:#fff;cursor:pointer;font-size:16px;color:var(--muted)}
.pos-viewtoggle button.active{background:var(--brand);color:#fff}
/* browse: sidebar + grid */
.pos-browse{display:grid;grid-template-columns:186px 1fr;gap:16px;margin-top:16px}
@media(max-width:720px){.pos-browse{grid-template-columns:1fr}.pos-sidebar{display:none}}
.pos-side-h{font-size:14px;font-weight:800;color:var(--text);margin-bottom:8px}
.pos-cat{display:flex;align-items:center;gap:9px;width:100%;text-align:left;border:0;background:none;padding:8px 10px;border-radius:8px;font-size:13px;color:var(--text);cursor:pointer}
.pos-cat:hover{background:#f1f5f9}
.pos-cat.active{background:var(--sidebar-active-bg,#e0f2fe);color:var(--brand);font-weight:600}
.pos-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
@media(max-width:1320px){.pos-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:640px){.pos-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.pos-grid.list{grid-template-columns:1fr}
.pos-grid.list .pos-tile{flex-direction:row;align-items:center;text-align:left}
.pos-grid.list .pos-tile img{width:52px;height:52px;margin:0 12px 0 0}
.pos-grid.list .pos-tile-add{position:absolute;right:12px;bottom:auto;width:auto;padding:6px 14px}
.pos-tile{position:relative;display:flex;flex-direction:column;border:1px solid var(--border);border-radius:11px;background:#fff;padding:12px;cursor:pointer;text-align:center;transition:border-color .12s,box-shadow .12s}
.pos-tile:hover{border-color:var(--brand);box-shadow:0 2px 8px rgba(2,132,199,.12)}
.pos-tile img{width:100%;aspect-ratio:1;object-fit:contain;background:#fff;border-radius:8px;margin-bottom:8px}
/* "Popular"/Featured pill — top-left overlay on the product image (reference); never under the star. */
.pos-badge{position:absolute;top:10px;left:10px;z-index:2;background:var(--brand);color:#fff;font-size:11px;font-weight:700;line-height:1.4;padding:2px 9px;border-radius:999px;box-shadow:0 1px 3px rgba(2,132,199,.35);pointer-events:none}
.pos-grid.list .pos-badge{top:8px;left:8px}
.pos-tile-nm{font-weight:700;font-size:13px;line-height:1.25;color:var(--text)}
.pos-tile-pr{font-size:12px;color:var(--muted);margin-top:3px}
.pos-tile-st{font-size:12px;margin-top:2px}
.pos-tile-st .ok{color:#16a34a}.pos-tile-st .muted{color:var(--muted)}
.pos-tile-add{margin-top:9px;width:100%;background:#eff6ff;color:var(--brand);border:0;border-radius:8px;padding:8px 0;font-size:13px;font-weight:600}
.pos-tile:hover .pos-tile-add{background:#dbeafe}
.pos-pagefoot{display:flex;justify-content:space-between;align-items:center;margin-top:14px;font-size:13px;color:var(--muted)}
.pos-pager{display:flex;gap:5px}
.pos-pager button{min-width:32px;height:32px;border:1px solid var(--border);background:#fff;border-radius:7px;cursor:pointer;font-size:13px;color:var(--text)}
.pos-pager button.act{background:var(--brand);border-color:var(--brand);color:#fff}
.pos-pager button:disabled{opacity:.4;cursor:default}

/* Current Sale card */
.pos-sale .pos-sale-hd{display:flex;justify-content:space-between;align-items:center;background:var(--brand);color:#fff;padding:14px 18px;font-size:17px;font-weight:800}
.pos-sale .pos-sale-hd .btn{background:#fff;color:var(--brand);border:0}
.pos-carttbl{width:100%;border-collapse:collapse;font-size:13px}
.pos-carttbl thead th{text-align:left;color:var(--muted);font-weight:600;font-size:12px;padding:0 0 8px;border-bottom:1px solid var(--border)}
.pos-carttbl td{padding:10px 0;border-bottom:1px solid #f1f5f9;vertical-align:middle}
.pos-cart-item{display:flex;gap:10px;align-items:center}
.pos-cart-img{width:36px;height:36px;object-fit:contain;border:1px solid var(--border);border-radius:7px;background:#fff;flex:0 0 auto;display:flex;align-items:center;justify-content:center;font-size:16px}
.pos-cart-item .muted{color:var(--muted);font-size:11px}
.pos-cart-qty{white-space:nowrap;text-align:center}
.pos-cart-qty .qbtn{width:26px;height:26px}
.pos-cart-qty span{display:inline-block;min-width:26px;text-align:center;font-weight:600}
.qbtn{border:1px solid var(--border);background:#fff;border-radius:6px;cursor:pointer;font-size:14px;line-height:1}
.qbtn.del{border:0;background:none;color:#dc2626;font-size:15px}
.pos-ovr{color:#b45309;font-size:10px}
.pos-noteadd{width:100%;text-align:left;margin-top:10px;background:#f0f9ff;border:1px solid #e0f2fe;color:var(--brand);border-radius:9px;padding:10px 14px;font-size:13px;font-weight:600;cursor:pointer}
.pos-totals{margin-top:14px;border-top:1px solid var(--border);padding-top:12px}
.pos-trow{display:flex;justify-content:space-between;font-size:14px;color:var(--text);padding:3px 0}
.pos-trow span:first-child{color:var(--muted)}
.pos-total{border-top:2px solid var(--text);margin-top:8px;padding-top:10px;font-weight:800;font-size:20px}
.pos-total span:first-child{color:var(--text)}
.pos-pay{margin-top:16px}
.pos-pay-h{font-weight:800;font-size:15px;margin-bottom:8px}
.pos-radio{display:flex;align-items:center;gap:9px;padding:5px 0;font-size:14px;cursor:pointer}
.pos-radio input{accent-color:var(--brand);width:16px;height:16px}
.pos-radio-off{cursor:not-allowed;opacity:.55}
.pos-radio-off input{cursor:not-allowed}
.pos-radio-off:hover input{cursor:not-allowed}
.pos-radio-why{display:block;font-style:normal;font-size:12px;color:#b45309;font-weight:600;margin-top:1px}
/* §3i CASH-DRAWER RECOMMENDATION (FILED 83 Stage 1, 2026-07-29) — an ADVISORY on an ENABLED
   tender, not a disabled-reason: muted, never the amber warning colour, so it reads as guidance
   rather than a fault. */
.rp-drawer-reco{color:var(--muted,#6b7280);font-weight:400}
/* ★ REVEAL ON HOVER **AND** TAP/FOCUS. A hover-only tooltip is unreachable on a touchscreen
   register — the exact device class this copy is about — so :focus and :focus-within are first
   class here, reached by tap (tabindex=0) and by keyboard alike. */
.rp-reco-more{display:inline-block;margin-left:6px;text-decoration:underline dotted;cursor:pointer;
  color:var(--link,#0284c7);font-weight:600;position:relative;outline-offset:2px}
/* ★ ABSOLUTELY POSITIONED, so revealing it CANNOT SHIFT LAYOUT under a cashier's finger.
   visibility (not display) keeps the box measurable and avoids a reflow on reveal. */
.rp-reco-pop{position:absolute;left:0;top:calc(100% + 6px);z-index:var(--z-dropdown,10000);width:290px;
  visibility:hidden;opacity:0;transition:opacity .12s ease;
  background:#111827;color:#f9fafb;font-weight:400;font-size:12px;line-height:1.45;
  padding:9px 11px;border-radius:8px;box-shadow:0 6px 18px rgba(0,0,0,.28);pointer-events:none}
.rp-reco-more:hover .rp-reco-pop,
.rp-reco-more:focus .rp-reco-pop,
.rp-reco-more:focus-within .rp-reco-pop,
.rp-reco-more.is-open .rp-reco-pop{visibility:visible;opacity:1}
@media (max-width:640px){.rp-reco-pop{width:min(290px,78vw)}}
.pos-cash-lbl{display:block;font-size:13px;font-weight:600;margin-bottom:4px}
.pos-change{margin-top:6px;font-size:14px;color:#065f46}
.pos-change strong{font-size:16px}
.pos-complete{width:100%;margin-top:14px;display:flex;justify-content:space-between;align-items:center;background:#16a34a;color:#fff;border:0;border-radius:10px;padding:14px 18px;font-size:16px;font-weight:700;cursor:pointer}
.pos-complete:hover:not(:disabled){background:#15803d}
.pos-complete:disabled{opacity:.5;cursor:default}
.pos-saleactions{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px}
.pos-saleactions .btn{width:100%;justify-content:center}
/* ARMED after-sale actions (2026-07-29). The selected state is a FILLED BACKGROUND, not just a
   tick: a clerk glancing at this row must be able to tell armed from not-armed without reading. */
.pos-saleactions .btn.pos-armed{background:var(--brand,#1a3c34);border-color:var(--brand,#1a3c34);color:#fff;font-weight:650}
.pos-saleactions .btn.pos-armed:hover{filter:brightness(1.08)}
.pos-armed-sub{display:block;font-size:10.5px;font-weight:500;opacity:.85;line-height:1.15}
/* Quick Actions */
.pos-qa-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;padding:4px 18px 18px}
@media(max-width:520px){.pos-qa-grid{grid-template-columns:repeat(3,1fr)}}
.pos-qa-btn{display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px 6px;border:0;border-radius:11px;font-size:12px;font-weight:600;cursor:pointer;color:var(--text)}
.pos-qa-btn span{font-size:18px}
.pos-qa-btn:disabled{opacity:.5;cursor:default}
.pos-qa-btn.on{outline:2px solid currentColor;outline-offset:-2px}
.qa-blue{background:#eff6ff;color:#1d4ed8}.qa-green{background:#f0fdf4;color:#15803d}.qa-yellow{background:#fefce8;color:#a16207}.qa-purple{background:#faf5ff;color:#7e22ce}.qa-teal{background:#f0fdfa;color:#0f766e}
/* held sales strip */
.pos-held{border:1px solid #fde68a;background:#fffbeb;border-radius:12px;padding:12px 16px;margin-bottom:16px}
.pos-held h4{margin:0 0 8px;font-size:13px;color:#92400e}
.pos-held-item{display:flex;justify-content:space-between;align-items:center;gap:10px;background:#fff;border:1px solid var(--border);border-radius:8px;padding:8px 12px;margin-bottom:6px;font-size:13px}
.pos-held-item .meta{color:var(--muted);font-size:12px}
/* modal */
.pos-modal{display:none;position:fixed;inset:0;background:rgba(15,23,42,.45);z-index:var(--z-modal-scrim,320);align-items:center;justify-content:center;padding:16px}
.pos-modal.open{display:flex}
.pos-modal-box{background:#fff;border-radius:14px;padding:20px;width:100%;max-width:400px;box-shadow:0 20px 50px rgba(0,0,0,.25)}
.pos-modal-box h3{margin:0 0 12px;font-size:16px}
.pos-modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:16px}

/* ═══ Camp Store — page header + tab pills (reference) ════════════════════════════ */
.cs-page-hd{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:16px}
.cs-page-hd .l{display:flex;gap:13px;align-items:center;min-width:0}
.cs-hd-ico{display:flex;align-items:center;justify-content:center;width:46px;height:46px;border:1px solid var(--border);border-radius:12px;background:#fff;font-size:20px;flex:0 0 auto}
.cs-page-hd h1{margin:0;font-size:24px;font-weight:800;color:var(--text);line-height:1.15}
.cs-page-hd .sub{margin:2px 0 0;color:var(--muted);font-size:13px}
.cs-scanbtn{background:#fff;border:1px solid var(--border);font-weight:600;letter-spacing:0}
.cs-tabs{display:flex;gap:6px;margin-bottom:18px;flex-wrap:wrap}
.cs-tab{display:inline-flex;align-items:center;gap:7px;padding:10px 16px;border-radius:10px;border:1px solid transparent;font-size:13.5px;font-weight:600;color:var(--muted);text-decoration:none;background:transparent}
.cs-tab:hover{background:#fff;border-color:var(--border)}
.cs-tab.active{background:#fff;border-color:var(--brand);color:var(--brand);box-shadow:0 1px 2px rgba(2,132,199,.10)}
.cs-tab-badge{background:#dc2626;color:#fff;border-radius:9px;padding:1px 7px;font-size:11px;font-weight:700}
/* sticky cart panel + tile star (featured toggle) */
.pos-right{position:sticky;top:12px}
@media(max-width:1080px){.pos-right{position:static}}
.pos-star{position:absolute;top:8px;right:8px;z-index:1;font-size:15px;line-height:1;color:#cbd5e1;cursor:pointer}
.pos-star.on{color:#f59e0b}
.pos-star:hover{color:#f59e0b}

/* ═══ POS punch list: park-blue theming, icon polish, even column bottoms ══════════ */
/* Source fix: a bare <a class="btn"> had no color → browser visited-link PURPLE. */
a.btn, a.btn:visited { color: inherit; }
a.cs-scanbtn, a.cs-scanbtn:visited { color: var(--brand); border-color: #bae6fd; }
.cs-scanbtn svg { flex: 0 0 auto; }
.pos-sidebar a.btn, .pos-sidebar a.btn:visited { color: var(--brand); border: 1px solid var(--brand); background: #fff; justify-content: center; }
.pos-scan-ico { display: flex; color: var(--brand); letter-spacing: 0; }
.pos-seg-btn svg { flex: 0 0 auto; }
.pos-viewtoggle button { display: flex; align-items: center; justify-content: center; }

/* Even/mirrored bottoms: the row stretches to the taller column; the left card fills it and pins
   its "Showing…"/pagination footer to the bottom edge. The right column keeps content height
   (align-self:start) so its sticky behavior survives. */
.pos-wrap { align-items: stretch; }
.pos-right { align-self: start; }
.pos-wrap > .pos-card { display: flex; flex-direction: column; }
.pos-wrap > .pos-card > .pos-card-body { flex: 1; display: flex; flex-direction: column; }
.pos-browse { flex: 1; }
.pos-gridwrap { display: flex; flex-direction: column; min-width: 0; }
/* UI-05 §5 (2026-09-02), cause (a) MEASURED: `flex: 1` stretched the grid to the rail's height inside the stretched .pos-browse row, pinning the pager
   at the bottom of that box (248 px below a full page, 755 px below two cards at 1280). The grid now takes its content height; the pager follows the
   cards at the rows' own gap; the rail's height shows as whitespace below, which is its own. */
.pos-gridwrap .pos-grid { flex: 0 0 auto; align-content: start; }
.pos-gridwrap { justify-content: flex-start; align-self: start; }   /* UI-05 §5 cause (a), one level up: .pos-browse (flex:1 in the card's column) stretched the grid row's children to the rail's height; the wrap now takes its own */
.pos-gridwrap .pos-pagefoot { margin-top: 12px; }   /* the same 12 px the card rows have between each other */
.pos-gridwrap .pos-pagefoot { margin-top: auto; padding-top: 14px; }

/* POS modal internals: fields must fill (and never exceed) their column. A number input's intrinsic
   width (~180px) otherwise overflows a fixed-width column — the Manual Item Qty bleed. */
.pos-modal-box { box-sizing: border-box; }
.pos-modal-box .form-control { width: 100%; min-width: 0; box-sizing: border-box; display: block; }
.pos-modal-row { display: flex; gap: 10px; margin-top: 8px; }
.pos-modal-row .grow { flex: 1 1 0; min-width: 0; }
.pos-modal-row .fix90 { flex: 0 0 90px; min-width: 0; }
@media (max-width: 420px) { .pos-modal-row { flex-wrap: wrap; } .pos-modal-row .fix90 { flex: 1 1 100%; } }

/* ═══ Camp Store Settings — two-column cards at full page width ═══════════════════ */
/* CSS columns: DOM order preserved, height auto-balanced, cards never split. */
.cs-settings-cols { columns: 2; column-gap: 16px; }
.cs-settings-cols > .card { break-inside: avoid; -webkit-column-break-inside: avoid; }
@media (max-width: 900px) { .cs-settings-cols { columns: 1; } }

/* ── CAMP STORE SETTINGS: FIELD SIZING (2026-07-29, presentation only) ──────────────────────
   ★ ROOT CAUSE OF BOTH NAMED DEFECTS, AND THEY ARE ONE DEFECT: admin.css defines NO base
   `.form-control` rule at all. Every input on this surface therefore fell back to the BROWSER
   DEFAULT width (`size` ~20 characters) regardless of its container or its content — which is
   why the propane hint (a ~55-character sentence) was cut off mid-word, and why a 2-digit
   number field and a long text field appeared the same size "for no reason". They were the
   same size. That was the reason.
   ★ SCOPED TO THIS GRID ON PURPOSE. A base `.form-control { width:100% }` in admin.css would
   re-flow every form on every admin page — a redesign, not the named fix. */
.cs-settings-cols .form-control { width: 100%; box-sizing: border-box; display: block; margin-top: 4px; }
/* A width scale keyed to EXPECTED CONTENT LENGTH, which is the thing 2b says was missing.
   short  = a currency amount or a 1-2 digit count   ·  full = a sentence a resident will read */
.cs-settings-cols .fld-short .form-control { max-width: 8.5rem; }
.cs-settings-cols .fld-med   .form-control { max-width: 18rem; }
.cs-settings-cols .fld-full  .form-control { max-width: 100%; }
/* Pairs sized to their content rather than a reflexive 1fr 1fr. */
.cs-settings-cols .fld-pair { display: grid; grid-template-columns: minmax(0, 9rem) minmax(0, 1fr); gap: 12px; }
@media (max-width: 560px) { .cs-settings-cols .fld-pair { grid-template-columns: 1fr; } }

/* ── SAVE BAR ───────────────────────────────────────────────────────────────────────────────
   2c ANSWERED FROM THE MARKUP, not assumed: the button DOES save every card — all of them sit
   in ONE <form>, and `.cs-settings-cols` is a CSS MULTI-COLUMN FLOW, so there is no left/right
   column in the DOM to be "below". The button was already below both columns; it merely READ as
   left-placed because it is a left-aligned block. Fixed presentationally by making it span. */
/* ★ The bar lives INSIDE .cs-settings-cols and must span both columns. `column-span: all` is
   the only thing that does that in a multi-column flow — without it the bar becomes a column
   item and tucks under one column. */
.cs-settings-cols .cs-save-bar { -webkit-column-span: all; column-span: all; }
/* ★ The separator is a border-BOTTOM: the button renders ABOVE the rule, and the rule divides
   this form from the Store Branding card that follows (which carries its own Save Branding). */
.cs-save-bar { display: flex; align-items: center; gap: 12px; margin: 2px 0 16px;
  padding-bottom: 14px; border-bottom: 1px solid var(--line, #e5e7eb); }
.cs-save-bar .cs-save-hint { font-size: 12px; color: var(--muted, #6b7280); }
/* ── the drawer card's status row ── */
.cs-drawer-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cs-drawer-reco { margin-top: 12px; padding: 10px 12px; border: 1px solid var(--line, #e5e7eb);
  border-radius: 8px; background: #f9fafb; }

/* ═══ Product form: label/description spacing fix + UPC scan + Quill description ═══ */
/* .sp-choice title (.t) and helper (.d) were inline spans → ran together
   ("ActiveProduct is available for sale"). Stack them; .d already has margin-top. */
.sp-choice .m { display: flex; flex-direction: column; min-width: 0; }
.sp-choice .t, .sp-choice .d { display: block; }
/* UPC field: input + Scan Barcode button on one row */
.sp-upc-row { display: flex; gap: 8px; align-items: stretch; }
.sp-upc-row .sp-upc { flex: 1 1 auto; }
.sp-scanbtn, .sp-scanbtn:visited { flex: 0 0 auto; white-space: nowrap; background: #fff; border: 1px solid var(--brand); color: var(--brand); font-weight: 600; }
.sp-scanbtn svg { flex: 0 0 auto; }
@media (max-width: 560px) { .sp-upc-row { flex-wrap: wrap; } .sp-scanbtn { width: 100%; justify-content: center; } }
/* Quill description editor sizing within the card */
#sp-desc-toolbar { border: 1px solid var(--border); border-bottom: 0; border-radius: 9px 9px 0 0; background: #fafafa; }
#sp-desc-editor { border: 1px solid var(--border); border-radius: 0 0 9px 9px; min-height: 140px; background: #fff; }
#sp-desc-editor .ql-editor { min-height: 140px; font-size: 13px; }
/* Rendered rich description (storefront/POS/admin catalog) — Quill indent hooks + tidy blocks */
.store-desc p { margin: 0 0 4px; }
.store-desc ol, .store-desc ul { margin: 2px 0 4px 18px; }
.store-desc .ql-indent-1 { padding-left: 2em; } .store-desc .ql-indent-2 { padding-left: 4em; }
.store-desc .ql-indent-3 { padding-left: 6em; } .store-desc .ql-indent-4 { padding-left: 8em; }

/* ═══ Premium Starter Catalog — bundle picker ════════════════════════════════════ */
.cs-starter summary::-webkit-details-marker { display: none; }
.cs-bundle-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 640px) { .cs-bundle-grid { grid-template-columns: 1fr; } }
.cs-bundle { display: flex; gap: 11px; align-items: flex-start; border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; cursor: pointer; margin: 0; }
.cs-bundle:hover { border-color: var(--brand); }
.cs-bundle > input { margin-top: 2px; accent-color: var(--brand); width: 17px; height: 17px; flex: 0 0 auto; }
.cs-bundle .m { display: flex; flex-direction: column; min-width: 0; }
.cs-bundle .t { font-size: 14px; font-weight: 700; color: var(--text); }
.cs-bundle .d { font-size: 12px; color: var(--muted); margin-top: 2px; }
.cs-bundle-n { font-size: 11px; font-weight: 600; color: var(--brand); background: #eff6ff; border-radius: 999px; padding: 1px 8px; margin-left: 4px; }

/* ═══════════ New Registration — 4-step wizard (reference redesign) ═══════════ */
/* ═══ NAV BAR (directive 2026-07-20, nav_bar.png) — three zones, one row ═══ */
.rrnav-bar { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 28px;
  padding: 18px 24px; margin-bottom: 20px; border: 1px solid var(--border); border-radius: 14px;
  background: var(--card-bg,#fff); box-shadow: 0 1px 2px rgba(15,23,42,.04); }
/* Anchor-jump focus (2026-07-13, per Michael): programmatic/mouse focus on the wizard topbar
   or its heading draws NO ring — replaced by the soft flash below. Keyboard focus KEEPS a
   visible ring via :focus-visible (never blanket-remove outlines). */
#new-registration-top:focus:not(:focus-visible),
#new-registration-top .rrnav-titles h2:focus:not(:focus-visible) { outline: none; }
#new-registration-top:focus-visible,
#new-registration-top .rrnav-titles h2:focus-visible { outline: 2px solid var(--brand, #0284c7); outline-offset: 2px; }
/* Chromium marks SCRIPT focus on the topbar as :focus-visible (no preceding pointer modality
   on load), which would re-draw a ring on every jump. wzFlashTop() stamps .prog-focus for the
   duration of its programmatic focus (removed on blur) — real keyboard focus never carries the
   class, so the :focus-visible ring above still applies to it. */
#new-registration-top.prog-focus:focus { outline: none; }
/* Soft highlight sweep on the SECTION wrapper. Michael's keyframe ended at transparent; the
   topbar is a white card, so ending transparent would flash the grey page behind it — end at
   the card color instead (reads as the same soft yellow→normal sweep). */
.rrnav-bar.flash { animation: flashSection 1.2s ease; }
@keyframes flashSection { 0% { background: #fffbe8; } 100% { background: var(--card-bg, #fff); } }
/* Step-anchor guarantee (2026-07-13): reserve a viewport of height below the topbar so every
   step can land at the anchor (64px = the fixed-topbar scroll-margin). Create-mode scoped. */
/* ADDENDUM M-1: the reservation moved from the wizard grid (where it opened a gap of its own between the footer row and the Drafts card) to the
   tab panel that holds both — a step still lands at the anchor, and the Drafts card starts one card gap below the wizard's bottom */
[data-rr-panel="new"] { min-height: calc(100vh - 64px); }
/* LEFT zone: icon tile + stacked title/subtitle */
.rrnav-left { display: flex; align-items: center; gap: 16px; }
.rrnav-ico { width: 56px; height: 56px; border-radius: 14px; background: #e8f0fe; color: var(--rr-primary, #2563eb);
  display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.rrnav-ico svg { width: 30px; height: 30px; }
.rrnav-titles h2 { margin: 0; font-size: 25px; font-weight: 800; letter-spacing: -.01em; }
.rrnav-titles p { margin: 3px 0 0; font-size: 14px; color: var(--muted); max-width: 240px; }
/* CENTER: labels-below stepper. The vertical pip stack is what buys 1366px no-wrap. */
.rrnav-stepper { display: flex; align-items: flex-start; justify-content: center;
  list-style: none; margin: 0; padding: 0; }
/* EQUAL-WIDTH pips: center-to-center distance is constant, so the connector segment geometry
   is exact. MEASURED (2026-07-20, R-S3-LABEL rename): the admin content area caps the bar at
   ~1316px on EVERY viewport ≥1366, so one geometry serves all desktop widths — 128px cells +
   13px labels put the widest label ("Guests & RV Specs", 138px) at ~2px clearance from its
   neighbor: tight but collision-free, one row, zero horizontal scroll (reported per the
   directive rather than silently shrinking further). */
.rrnav-pip { position: relative; display: flex; flex-direction: column; align-items: center;
  gap: 9px; cursor: pointer; width: 132px; padding: 0; }
.rrnav-pip-num { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center;
  justify-content: center; font-size: 16px; font-weight: 700; background: #eef2f6; color: #64748b;
  border: 1px solid #e2e8f0; position: relative; z-index: 1; transition: background .15s, color .15s; }
.rrnav-pip-label { font-size: 13px; font-weight: 600; color: #64748b; white-space: nowrap; text-align: center; }
/* connector segment: prev circle edge → this circle edge, at circle mid-height (gap 4px each side) */
.rrnav-pip + .rrnav-pip::before { content: ""; position: absolute; top: 21px;
  right: calc(50% + 26px); width: 80px; height: 2px; background: #e2e8f0; }
/* progressive fill: a segment is solid once its RIGHT pip is reached (done or active) */
.rrnav-pip.is-done::before, .rrnav-pip.is-active::before { background: var(--rr-primary, #2563eb); }
/* PENDING is the base state above; COMPLETED = soft-blue (mockup pip-2); ACTIVE = solid blue + underline */
.rrnav-pip.is-done .rrnav-pip-num { background: var(--rr-primary-soft, #dbeafe); border-color: var(--rr-primary-border, #bfdbfe); color: var(--rr-primary, #2563eb); }
.rrnav-pip.is-done .rrnav-pip-label { color: #334155; }
.rrnav-pip.is-active .rrnav-pip-num { background: var(--rr-primary, #2563eb); border-color: var(--rr-primary, #2563eb); color: #fff; }
.rrnav-pip.is-active .rrnav-pip-label { color: var(--rr-primary, #2563eb); font-weight: 700; }
.rrnav-pip.is-active .rrnav-pip-label::after { content: ""; display: block; margin: 5px auto 0;
  width: 100%; max-width: 88px; height: 3px; border-radius: 2px; background: var(--rr-primary, #2563eb); }
.rrnav-pip:focus-visible { outline: 2px solid var(--rr-primary, #2563eb); outline-offset: 2px; border-radius: 10px; }
/* R-NEXT v3: forward pips beyond the first incomplete step gate like the Next button —
   muted + not-allowed; a click anchors the gaps (no route around the gate). Backward free. */
.rrnav-pip.rrnav-pip-off { opacity: .45; cursor: not-allowed; }

/* ── R-WF1-SUBSTEPS — the Step-1 3-beat mini-wizard indicator ─────────────────────────────
   Deliberately SUBORDINATE to the page stepper: chip-height text buttons with small filled
   DOTS and short dash separators (no circles-with-connector-lines at stepper weight); the
   stepper's state language at half volume (active primary / done soft-blue / pending gray).
   Backward beats are clickable; forward beats mute per the cumulative law. */
.rr-substeps { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; }
.rr-substep { display: inline-flex; align-items: center; gap: 6px; border: 0; background: none;
  padding: 3px 6px; border-radius: 8px; font-size: 12px; font-weight: 600; color: #94a3b8; cursor: default; }
.rr-substep-dot { width: 18px; height: 18px; border-radius: 50%; display: inline-flex; align-items: center;
  justify-content: center; font-size: 10.5px; font-weight: 700; background: #eef2f6; color: #94a3b8; }
.rr-substep-sep { width: 14px; height: 2px; border-radius: 1px; background: #e2e8f0; }
.rr-substep.is-active { color: var(--rr-primary, #2563eb); }
.rr-substep.is-active .rr-substep-dot { background: var(--rr-primary, #2563eb); color: #fff; }
.rr-substep.is-done { color: #475569; cursor: pointer; }
.rr-substep.is-done:hover { background: var(--rr-primary-soft, #eff6ff); }
.rr-substep.is-done .rr-substep-dot { background: var(--rr-primary-soft, #dbeafe); color: var(--rr-primary, #2563eb); }
.rr-substep.is-off { opacity: .55; cursor: not-allowed; }
/* RIGHT: divider · test chip top-right · 2×2 action grid */
.rrnav-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 8px;
  border-left: 1px solid var(--border); padding-left: 24px; align-self: stretch; justify-content: center; }
.rrnav-actions-top { display: flex; align-items: center; gap: 8px; min-height: 0; }
.rrnav-actions-top:empty { display: none; }
.rrnav-grid { display: grid; grid-template-columns: repeat(2, max-content); gap: 8px; justify-content: end; }
.rrnav-grid .rr-hdr-quote-group { display: contents; }   /* its two chips become grid cells */
.rrnav-grid .rr-chip { justify-content: center; white-space: nowrap; }
.wz-step[hidden] { display: none; }

/* Guest step: split main + snapshot */
.wz-guest-split { display: grid; grid-template-columns: minmax(0,1fr) 260px; gap: 18px; align-items: start; }
.wz-find-row { display: flex; gap: 8px; align-items: center; }
.wz-find-row select { flex: 1 1 auto; min-width: 0; }
/* New Guest button — blue text + blue outline (IMG-B), shared tokens */
.wz-newguest { flex: 0 0 auto; white-space: nowrap; cursor: pointer; font-family: inherit;
  font-size: 13px; font-weight: 600; padding: 8px 14px; border-radius: 8px;
  color: var(--brand); background: #fff; border: 1.5px solid var(--brand); }
.wz-newguest:hover { background: #eff6ff; }

/* New Guest AJAX modal */
.ng-modal { position: fixed; inset: 0; z-index: var(--z-modal-scrim, 320); display: flex; align-items: flex-start; justify-content: center; padding: 40px 16px; overflow-y: auto; }
.ng-modal[hidden] { display: none; }
.ng-modal-backdrop { position: fixed; inset: 0; background: rgba(15,23,42,.55); }
.ng-modal-card { position: relative; z-index: 1; width: 100%; max-width: 640px; background: var(--card-bg,#fff); border-radius: 14px; box-shadow: 0 20px 60px rgba(15,23,42,.3); overflow: hidden; }
.ng-modal-hd { display: flex; align-items: center; justify-content: space-between; padding: 16px 22px; border-bottom: 1px solid var(--border); }
.ng-modal-hd h3 { margin: 0; font-size: 17px; color: var(--brand); }
.ng-modal-x { background: none; border: 0; font-size: 26px; line-height: 1; color: var(--muted); cursor: pointer; padding: 0 4px; }
.ng-modal-x:hover { color: var(--text); }
.ng-modal-body { padding: 20px 22px 22px; }
.ng-form-errors { background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c; border-radius: 8px; padding: 10px 14px; margin-bottom: 14px; font-size: 13px; }
.ng-form-errors[hidden] { display: none; }
.wz-snapshot { border: 1px solid var(--border); border-radius: 12px; background: #f8fafc; padding: 14px 16px; }
.wz-snapshot-hd { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--brand); margin-bottom: 10px; }
.wz-snapshot-hd svg { width: 18px; height: 18px; }
.wz-snapshot-rows { margin: 0; }
.wz-snapshot-rows > div { display: flex; justify-content: space-between; gap: 10px; padding: 5px 0; font-size: 12.5px; }
.wz-snapshot-rows dt { color: var(--muted); margin: 0; }
.wz-snapshot-rows dd { margin: 0; font-weight: 600; color: var(--text); }
.wz-snapshot-note { font-size: 10.5px; color: var(--muted); margin: 10px 0 0; line-height: 1.5; }

/* Communication Preferences */
.wz-commprefs { margin-top: 16px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px; background: #f8fafc; }
.wz-commprefs-row { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.wz-commprefs-lbl { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 700; color: var(--text); }
.wz-commprefs-lbl svg { width: 16px; height: 16px; color: var(--brand); }
.wz-chk { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; cursor: pointer; }
.wz-commprefs-more { margin-left: auto; background: none; border: 0; color: var(--brand); font-size: 12px; font-weight: 600; cursor: pointer; }
.wz-commprefs-disclosure { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--border); font-size: 11.5px; color: var(--muted); line-height: 1.55; }
.wz-commprefs-disclosure p { margin: 0 0 6px; }
.wz-commprefs-disclosure[hidden] { display: none; }

/* Reservation Type pills */
.res-type-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; max-width: 520px; }
.res-type { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 8px; cursor: pointer;
  border: 1.5px solid var(--border); border-radius: 12px; background: #fff; font-size: 13px; font-weight: 600; color: var(--text); transition: border-color .12s, background .12s; }
.res-type:hover { border-color: var(--brand); }
.res-type-ic { color: var(--muted); }
.res-type-ic svg { width: 22px; height: 22px; }
.res-type.is-active { border-color: var(--brand); background: #eff6ff; color: var(--brand); box-shadow: 0 0 0 1px var(--brand) inset; }
.res-type.is-active .res-type-ic { color: var(--brand); }
/* Phase C — wrapper is the grid cell so its title tooltip fires over a disabled pill. */
.res-type-wrap { display: block; }
.res-type-wrap .res-type { width: 100%; box-sizing: border-box; }
.res-type:disabled, .res-type.is-disabled { opacity: .45; cursor: not-allowed; pointer-events: none; background: #f8fafc; color: var(--muted); }
.res-type:disabled:hover, .res-type.is-disabled:hover { border-color: var(--border); }

/* Site Assignment */
/* REG-01 Part 2 (2026-08-08, measured before fixed): the RPR shell fixes the wizard's center
   column at 480px, where the old wide 3-track grid (1fr 1fr auto) COLLAPSED — computed
   48.5px/48.5px/309px, selects unusable — and align-items:end bottom-aligned the short TYPE
   cell against the tall SITE cell (its label measured 122px BELOW the Site label; its select
   beside the "Why these requirements?" tail). Single-column stack: no cross-column baseline
   to disagree, full-width controls; the ≤1463px media rule already used this same shape. */
.wz-site-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
/* Long option labels (e.g. the kept-selection suffix) must not blow the grid track wide:
   grid children default min-width:auto → a select's intrinsic width can stretch the page.
   Pin the cells + let the closed select clip its text instead (2026-07-13). */
.wz-site-grid .fg { min-width: 0; }
.wz-site-grid select { width: 100%; max-width: 100%; }
.wz-autoassign { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border: 1.5px solid var(--brand);
  border-radius: 10px; background: #eff6ff; text-align: left; cursor: pointer; transition: background .12s; }
.wz-autoassign:hover { background: #dbeafe; }
.wz-autoassign:disabled { border-style: dashed; border-color: var(--border); background: #f8fafc; cursor: not-allowed; opacity: .7; }
.wz-autoassign strong { color: var(--brand); }
.wz-autoassign-ic { font-size: 18px; }
.wz-autoassign strong { display: block; font-size: 12.5px; color: var(--text); }
.wz-autoassign small { display: block; font-size: 10.5px; color: var(--muted); }

/* Stay dates + Total Nights */
.wz-dates-grid { display: grid; grid-template-columns: 1fr 1fr auto; gap: 14px; align-items: start; }
.wz-nights { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-width: 96px; padding: 8px 14px; border: 1px solid var(--border); border-radius: 10px; background: #f8fafc; align-self: stretch; }
.wz-nights-lbl { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.wz-nights-val { font-size: 15px; font-weight: 800; color: var(--text); }
.wz-optional { font-size: 12px; font-weight: 500; color: var(--muted); }

/* Review step */
.wz-review-dl { margin: 0; }
.wz-review-dl > div { display: flex; justify-content: space-between; gap: 16px; padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
.wz-review-dl dt { color: var(--muted); margin: 0; flex: 0 0 40%; }
.wz-review-dl dd { margin: 0; font-weight: 600; color: var(--text); text-align: right; }

/* Wizard nav bar */
.wz-navbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  margin-top: 4px; padding: 14px 0 4px; }
.wz-navbar-defer { display: flex; gap: 6px; flex-wrap: wrap; }
.wz-navbar-nav { display: flex; gap: 8px; align-items: center; }
.reg-create-inline { width: auto; display: inline-block; padding: 10px 20px; font-size: 14px; }

/* Reservation Summary (sticky) */
.reg-quote-hd svg { width: 18px; height: 18px; vertical-align: -3px; margin-right: 4px; }
.wz-sum-facts { margin: 0 0 12px; }
.wz-sum-facts > div { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; font-size: 12.5px; border-bottom: 1px solid var(--border); }
.wz-sum-facts dt { color: var(--muted); margin: 0; }
.wz-sum-facts dd { margin: 0; font-weight: 600; color: var(--text); text-align: right; }
.wz-sum-sec-hd { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin: 12px 0 4px; }
.wz-sum-tbl { width: 100%; border-collapse: collapse; }
.wz-sum-tbl td { padding: 4px 0; font-size: 12.5px; }
.wz-sum-tbl td:last-child { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.wz-sum-totals { margin-top: 6px; border-top: 1px solid var(--border); }
.wz-sum-totals td { padding: 6px 0; }
.wz-sum-sub td { font-weight: 700; }
.wz-sum-dep { color: #b45309; }
.wz-sum-dep td { font-weight: 700; border-top: 1px dashed var(--border); }
.wz-sum-bal { color: var(--brand); }
.wz-sum-bal td { font-weight: 800; font-size: 13.5px; }
.wz-sum-rem td { color: var(--muted); }
.wz-sum-notes { font-size: 11px; color: var(--muted); margin: 10px 0 0; line-height: 1.5; }
.wz-sum-send { font-size: 12px; margin: 10px 0 0; padding-top: 8px; border-top: 1px dashed var(--border); }

/* Responsive */
@media (max-width: 760px) {
  .wz-guest-split { grid-template-columns: minmax(0, 1fr); }
  .wz-site-grid, .wz-dates-grid { grid-template-columns: 1fr; }
  .res-type-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ── Reservation Summary: itemized charges + due-today boxes + Attention Required ── */
.wz-sum-sec-hd { display: flex; align-items: center; justify-content: space-between; }
.wz-sum-edit { font-size: 11px; font-weight: 600; color: var(--brand); text-decoration: none; text-transform: none; letter-spacing: 0; }
.wz-sum-edit:hover { text-decoration: underline; }
.wz-info { display: inline-flex; width: 14px; height: 14px; align-items: center; justify-content: center;
  font-size: 11px; color: var(--muted); cursor: help; border-radius: 50%; vertical-align: middle; }
.wz-info:hover, .wz-info:focus { color: var(--brand); outline: none; }
/* Due-today highlighted boxes */
.wz-duebox { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-top: 8px; padding: 10px 12px; border-radius: 10px; font-size: 13px; }
.wz-duebox span { font-weight: 600; }
.wz-duebox strong { font-size: 15px; font-variant-numeric: tabular-nums; }
.wz-duebox-dep { background: #fffbeb; border: 1px solid #fcd34d; color: #b45309; }
.wz-duebox-bal { background: #eff6ff; border: 1px solid var(--brand); color: var(--brand); }
.wz-sum-remaining { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-top: 8px; padding: 4px 2px; font-size: 12.5px; color: var(--muted); }
.wz-sum-remaining strong { font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }

/* ── Estimated Charges — mockup chrome (2026-07-25). Presentation only: every figure is the
   Quote Engine's; icons are decorative (aria-hidden) and keyed on the row's kind. ── */
.rr-ec-hd td { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted); padding: 0 0 6px; border-bottom: 1px solid var(--border); }
.rr-ec-row td { padding: 7px 0; border-bottom: 1px solid color-mix(in srgb, var(--border) 55%, transparent); }
.rr-ec-lbl { display: inline-flex; align-items: center; gap: 8px; }
.rr-ec-ico { display: inline-flex; width: 22px; height: 22px; border-radius: 6px; flex: none;
  align-items: center; justify-content: center; }
.rr-ec-ico svg { width: 13px; height: 13px; }
.rr-ec-ico-rent      { background: #dbeafe; color: #2563eb; }
.rr-ec-ico-electric  { background: #fef3c7; color: #d97706; }
.rr-ec-ico-fees      { background: #dcfce7; color: #16a34a; }
.rr-ec-ico-tax       { background: #ede9fe; color: #7c3aed; }
.rr-ec-ico-addons    { background: #e0e7ff; color: #4f46e5; }
.rr-ec-ico-discount  { background: #ccfbf1; color: #0f766e; }
.rr-ec-ico-surcharge { background: #f1f5f9; color: #475569; }
.rr-esttotal td { padding: 10px 0 8px; font-size: 14px; }
.rr-esttotal td:last-child { color: var(--brand); font-size: 16px; font-weight: 800; }
/* Collapsible deposits disclosure (shared component — rail, Payment card, Review) */
.rr-dep-disc { margin-top: 8px; border-radius: 10px; background: #eff6ff; overflow: hidden; }
.rr-dep-hd { display: flex; align-items: center; gap: 8px; width: 100%; border: 0; background: none;
  padding: 9px 12px; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--text);
  cursor: pointer; text-align: left; }
.rr-dep-hd strong { margin-left: auto; font-variant-numeric: tabular-nums; }
.rr-dep-chev { display: inline-flex; transition: transform .15s ease; color: var(--brand); }
.rr-dep-disc.is-closed .rr-dep-chev { transform: rotate(-90deg); }
.rr-dep-body { padding: 0 12px 10px 32px; }
.rr-dep-disc.is-closed .rr-dep-body { display: none; }
.rr-dep-item { display: flex; justify-content: space-between; gap: 10px; padding: 2px 0;
  font-size: 12.5px; }
.rr-dep-item span:last-child { font-variant-numeric: tabular-nums; }
.rr-dep-refnote { margin-top: 6px; font-size: 11.5px; font-style: italic; color: var(--muted); line-height: 1.45; }
/* Engine notes as blue-dot bullets */
.rr-ec-note { display: flex; align-items: flex-start; gap: 8px; margin-top: 8px; font-size: 12px;
  color: var(--text); line-height: 1.45; }
.rr-ec-dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--brand); margin-top: 5px; }
/* ★ RPR-REG-01 §1.4 — the meter lines: the sentence, then its billing-readiness badge (+ [Resolve]) under it. The rail is
   ~290px, so a long red reason WRAPS inside the badge rather than clip its ends (REV 1 "ends unclipped" — the one place a
   .rp-badge may take a second line; reversal: a one-line "Billing error" badge with the reason as sub-text). */
.rr-meter-body { flex: 1; min-width: 0; }
.rr-meter-badges { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 6px; margin-top: 5px; }
.rr-meter-line .rp-badge.rr-meter-badge { white-space: normal; max-width: 100%; text-align: left; }
.rr-meter-resolve { text-decoration: none; }
a.rr-meter-resolve:hover { filter: brightness(.92); }
.rr-meter-sub { margin-top: 4px; font-size: 11.5px; color: var(--muted); line-height: 1.4; }
/* Footer: dashed divider · mail badge · delivery line · vary caption */
.rr-ec-foot { display: flex; align-items: flex-start; gap: 10px; margin-top: 12px; padding-top: 12px;
  border-top: 1px dashed var(--border); }
.rr-ec-mail { display: inline-flex; width: 30px; height: 30px; flex: none; border-radius: 50%;
  background: #eff6ff; color: var(--brand); align-items: center; justify-content: center; }
.rr-ec-mail svg { width: 15px; height: 15px; }
.rr-ec-sendmsg { font-size: 12.5px; font-weight: 600; }
.rr-ec-vary { font-size: 11.5px; color: var(--muted); margin-top: 2px; }
/* Review recap: Estimated Total line above the shared due-today component */
.rr-recap-esttotal { display: flex; justify-content: space-between; gap: 10px; padding: 4px 0 6px;
  font-size: 13px; font-weight: 700; }
.rr-recap-esttotal strong { color: var(--brand); font-variant-numeric: tabular-nums; }
/* Attention Required panel (amber) */
.wz-attention { margin: 14px 16px 0; padding: 12px 14px; border-radius: 10px;
  background: #fffbeb; border: 1px solid #fcd34d; }
.wz-attention[hidden] { display: none; }
.wz-attention-hd { display: flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 700; color: #92400e; margin-bottom: 8px; }
.wz-attention-hd span { color: #d97706; font-size: 14px; }
.wz-attention ul { margin: 0; padding: 0; list-style: none; }
.wz-attention li { position: relative; padding: 3px 0 3px 16px; font-size: 12px; color: #b45309; }
.wz-attention li::before { content: "•"; position: absolute; left: 4px; color: #d97706; font-weight: 700; }

/* ── Site-Matching Engine: Co-Pilot recs banner + Best-Match cards ── */
.wz-copilot { display: flex; align-items: center; gap: 10px; margin-top: 14px; padding: 10px 14px;
  border: 1px solid #c7d2fe; border-radius: 10px; background: #eef2ff; }
.wz-copilot[hidden] { display: none; }
.wz-copilot-ic { font-size: 18px; }
.wz-copilot-txt { font-size: 13px; color: #3730a3; }
.wz-copilot-txt strong { color: #4338ca; }
.wz-copilot-view { margin-left: auto; background: #fff; border: 1px solid #c7d2fe; color: #4338ca;
  font-size: 12px; font-weight: 600; padding: 6px 12px; border-radius: 8px; cursor: pointer; }
.wz-copilot-view:hover { background: #e0e7ff; }
.wz-match-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-top: 12px; }
.wz-match-cards:empty { margin-top: 0; }
.wz-mc { border: 1.5px solid var(--border); border-radius: 12px; padding: 12px; background: #fff; display: flex; flex-direction: column; gap: 8px; }
.wz-mc.is-best { border-color: #16a34a; box-shadow: 0 0 0 1px #16a34a inset; }
.wz-mc.is-selected { border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand) inset; }
.wz-mc-hd { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.wz-mc-num { font-size: 15px; font-weight: 800; color: var(--text); }
.wz-mc-num small { font-size: 11px; font-weight: 500; color: var(--muted); }
.wz-mc-badge { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
  color: #166534; background: #dcfce7; border-radius: 999px; padding: 2px 8px; white-space: nowrap; }
.wz-mc-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.wz-mc-chip { font-size: 10.5px; font-weight: 600; color: var(--muted); background: #f1f5f9; border-radius: 6px; padding: 2px 7px; }
.wz-mc-why { font-size: 11px; color: var(--muted); line-height: 1.4; }
/* ★ RPR-REG-01 ADDENDUM L.2 — EXTENSION HEADROOM: one line under the badges (how long the site stays free past the departure). Amber when
   short (1–6 nights) or tight (booked again the day the guest leaves); TIGHT sits beside BEST MATCH. Tokens: the warning text/ground. */
/* ★ ADDENDUM L-1.3: a card's name NEVER truncates — the header wraps: the name wraps under the code, and two badges drop to their own row
   rather than squeeze the name to an ellipsis (it read "A-7 Lak…" beside BEST MATCH + TIGHT) */
.wz-mc-hd { flex-wrap: wrap; align-items: flex-start; row-gap: 6px; }
.wz-mc-badges { display: inline-flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; margin-left: auto; }
.wz-mc-hd .wz-mc-num { min-width: 0; overflow: visible; white-space: normal; overflow-wrap: anywhere; }
.wz-mc-tight { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
  color: var(--warning-text, #92400e); background: var(--warning-bg, #fef3c7); border-radius: 999px; padding: 2px 8px; white-space: nowrap; }
.wz-mc-room { font-size: 11.5px; font-weight: 600; line-height: 1.4; color: var(--muted); }
.wz-mc-room[data-room="short"], .wz-mc-room[data-room="tight"] { color: var(--warning-text, #92400e); }
.wz-mc-room[data-room="open"], .wz-mc-room[data-room="roomy"] { color: #166534; }
/* the [Select site] confirm (rpModal content) */
.rr-hr-body p { margin: 0 0 10px; line-height: 1.5; }
.rr-hr-alts { display: flex; flex-direction: column; gap: 8px; margin: 4px 0 14px; }
/* ★ ADDENDUM L-1.1: the alternatives are GREEN-TINTED suggestion tiles, derived from THE ok token the green meter badge uses (--rp-tone-ok —
   ★ AGENT-RULED; reversal: a new token): a light ground (10% of the token), the token as the text, a 45% border; hover a shade darker. Full
   width, a ✓ at the left, never clipped. [Keep] stays the blue primary, [Cancel] neutral. */
.rr-hr-alt--ok { display: flex; align-items: flex-start; gap: 10px; width: 100%; text-align: left; cursor: pointer; font: inherit;
  padding: 10px 12px; border-radius: 10px; border: 1px solid color-mix(in srgb, var(--rp-tone-ok, #15803d) 45%, #fff);
  background: color-mix(in srgb, var(--rp-tone-ok, #15803d) 10%, #fff); color: var(--rp-tone-ok, #15803d); transition: background .12s, border-color .12s; }
.rr-hr-alt--ok:hover, .rr-hr-alt--ok:focus-visible { background: color-mix(in srgb, var(--rp-tone-ok, #15803d) 18%, #fff); border-color: color-mix(in srgb, var(--rp-tone-ok, #15803d) 65%, #fff); }
.rr-hr-alt--ok:focus-visible { outline: 2px solid var(--rp-tone-ok, #15803d); outline-offset: 2px; }
.rr-hr-alt-ic { flex: 0 0 auto; font-weight: 800; line-height: 1.35; }
.rr-hr-alt-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rr-hr-alt-hd { font-size: 13.5px; font-weight: 700; }
.rr-hr-alt-name { font-weight: 500; opacity: .85; }
.rr-hr-alt-line { font-size: 12.5px; font-weight: 600; overflow-wrap: anywhere; }
.rr-hr-alt-info { font-size: 12.5px; color: var(--muted); }
.rr-hr-foot { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
.rr-headroom-note { display: inline-block; font-size: 12px; font-weight: 600; color: var(--warning-text, #92400e); background: var(--warning-bg, #fef3c7); border-radius: 8px; padding: 3px 8px; }
.wz-mc-btn { margin-top: auto; width: 100%; border: 1px solid var(--brand); background: #fff; color: var(--brand);
  font-size: 12px; font-weight: 700; padding: 7px 10px; border-radius: 8px; cursor: pointer; }
.wz-mc-btn:hover { background: #eff6ff; }
.wz-mc-btn.is-selected { background: var(--brand); color: #fff; }

/* Resident-combobox option with an email/phone sub-line (registration Find-Existing-Guest) */
.rp-combo-opt { white-space: normal; }
.rp-combo-opt-lbl { display: block; }
.rp-combo-sub { display: block; font-size: 11px; color: var(--muted); margin-top: 1px; }
.wz-find-row .rp-combo { flex: 1 1 auto; min-width: 0; }

/* Read-only display field (Primary Guest = "Name — Role") — looks like an input, not editable */
.wz-readonly { display: flex; align-items: center; min-height: 38px; padding: 8px 12px; font-size: 13px;
  color: var(--text); background: #f8fafc; border: 1px solid var(--border); border-radius: 8px; }
.wz-readonly.is-empty { color: var(--muted); }
.wz-guest-chip { display: flex; align-items: center; gap: 8px; }
.wz-guest-chip .wz-readonly { flex: 1 1 auto; min-width: 0; }
.wz-addcli-chip { flex: 0 0 auto; white-space: nowrap; cursor: pointer; font-family: inherit;
  font-size: 11px; font-weight: 600; color: var(--primary, #2563eb); background: #fff;
  border: 1px solid var(--border); border-radius: 8px; padding: 8px 12px; min-height: 38px; }
.wz-addcli-chip:hover { background: #eff6ff; border-color: var(--primary, #2563eb); }

/* Client-grain grouped picker (registration "Find Guest or Account") */
.rp-cc-hdr { display: flex; align-items: center; gap: 8px; padding: 6px 12px 3px; font-size: 10.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; color: var(--muted); background: #f8fafc; border-top: 1px solid var(--border); position: sticky; top: 0; }
.rp-cc-hdr-lbl { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rp-cc-addcli { flex: 0 0 auto; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
  color: var(--primary, #2563eb); background: transparent; border: 1px solid var(--border); border-radius: 999px;
  padding: 1px 8px; cursor: pointer; line-height: 1.5; }
.rp-cc-addcli:hover { background: #eff6ff; border-color: var(--primary, #2563eb); }
.rp-cc-menu .rp-cc-hdr:first-child { border-top: 0; }
.rp-cc-opt { padding-left: 20px; }
.rp-cc-optrow { display: flex; align-items: center; gap: 8px; }
.rp-cc-opt.is-active { background: #eff6ff; }
/* .rp-cc-badge retired — UI-06 §1.4 (.rp-badge--info) */
.wz-snapshot-scope { margin-left: auto; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); background: #f1f5f9; border-radius: 999px; padding: 1px 7px; }

/* Email Quote test-mode recipient-guard notice (registration wizard action bar) */
.wz-emailq-note { flex-basis: 100%; font-size: 11px; color: #b45309; margin-top: 4px; }

/* ── Settings navigation (shared: settings.php + sites.php via settings_nav.php) ──
   Moved out of settings.php's inline <style> so sites.php renders the identical strip. */
/* UI-TABS-03 (Michael, 2026-09-10) — THE STRIP IS NAVIGATION, NOT A WIDGET.
   s1.1 the card frame is gone: no rounded box, no per-row border, no white ground. What is left is the page and
   ONE 1px bottom rule running the full content width, which the active indicator interrupts.
   s1.2 ONE CONTAINER, TWO ROWS: the rule lives here, on the wrap, so the sub-row cannot grow a second one.
   s1.3 both rows LEFT-ALIGNED — this REPLACES UI-TABS-01 s1.2's centring, which floated four sub-tabs in the
   middle of a wide strip and disconnected them from the row above. Equal gaps are kept; the row starts where
   every other page element starts. */
/* ══ CORP-GO-02 §1 (Michael, 2026-09-10, with a mockup) — TABS WITH PRESENCE ═══════════════════════
   ★ §1.1 WITHDRAWS UI-TABS-03 §1.1's "drop the card frame, single bottom rule". That spec was mine and it
   produced the flat result: restrained works for four tabs and disappears across ten. The flat version is
   NOT a regression being fixed — it is a spec that changed, and the report says so.
   ★ §1.3 THE CHIP TREATMENT IS EXPLICITLY EXCLUDED. These are a CONNECTED STRIP, not detached pills: one
   shared ground behind the row, uniform gaps (UI-TABS-01's token stands), a square-ish radius on the strip
   and a gentler one on the tabs, no shadow on any individual tab and nothing floating. */
/* ★ UI-SCROLL-01 (2026-10-10, measured Chrome + Firefox): sticky at top:0 the tab row slid UNDER the fixed 52 px .topbar (z 100 > 90) — scrolled, its group tabs sat behind the search box (elementFromPoint at a tab = #rpSearch). It sticks BELOW the topbar now, so it stays visible while scrolling. */
.stnav-wrap{position:sticky;top:52px;z-index:var(--z-sticky,90);margin:0 -32px;padding:8px 32px 0;background:var(--bg);border-bottom:1px solid var(--border)}
@media (max-width: 820px) { .stnav-wrap { margin: 0 -16px; padding: 8px 16px 0; } }   /* B-38 (2026-10-15): .main drops to 16px side padding at this width (line 972) — the -32px bleed pushed the whole page 16px sideways at 390 on EVERY settings page */
/* ★★ UI-TABS-01 §1.1/§1.2 (2026-09-10) — EQUAL GAPS, NOT EQUAL WIDTHS. Each tab is sized to its own label
   (`.stn-group` no longer carries `flex:1`), the space between adjacent tabs is ONE token, and the row no
   longer stretches to fill the container — it is CENTRED. ★ What produced the old effect was `flex:1` on the
   tab, not `space-between` on the row: every tab was stretched to an equal share, so adjacent tabs touched
   (measured gap 0px everywhere) and the only visible whitespace was each tab's own padding, which varies with
   label length — near-even centres, uneven air. ★ `safe center` so an overflowing row stays scrollable to its
   first item: plain `center` overflows in both directions and the left end becomes unreachable.
   ★ THE WRAP ON r1 IS RULED (2026-08-04, RPR-01 relocation) — every main tab fully visible at every width, no
   shrink, no truncate, no scroll — and it is KEPT; UI-TABS-01 §3.2's alternative is tabled for Michael. */
/* s4.2 HORIZONTAL SCROLL, never wrap: wrapping doubles the strip's height and pushes the page down, and at ten
   tabs it did. s4.3 the EDGE FADES carry no JavaScript — two background layers are `local` (they scroll with
   the content and so disappear at each end) and two are `scroll` (they stay), which shows a fade exactly while
   there is content past that edge. s4.4 snap proximity so a tab never rests half-visible; the scrollbar is
   hidden while wheel and touch scrolling stay. */
.stnav-r1{padding-left:var(--stn-shift);display:flex;flex-wrap:nowrap;align-items:stretch;justify-content:flex-start;gap:0 var(--stn-gap);overflow-x:auto;overflow-y:hidden;scroll-snap-type:x proximity;scroll-padding-left:var(--stn-shift);scrollbar-width:none;-ms-overflow-style:none;background-color:var(--stn-strip);border:0;border-radius:8px 8px 0 0;padding:4px 4px 0 var(--stn-shift);background-image:linear-gradient(to right,var(--stn-strip),rgba(238,242,247,0)),linear-gradient(to left,var(--stn-strip),rgba(238,242,247,0)),linear-gradient(to right,rgba(15,23,42,.16),rgba(15,23,42,0)),linear-gradient(to left,rgba(15,23,42,.16),rgba(15,23,42,0));background-position:left center,right center,left center,right center;background-repeat:no-repeat;background-size:18px 100%,18px 100%,18px 100%,18px 100%;background-attachment:local,local,scroll,scroll} /* wrap RULED 2026-08-04 (RPR-01 relocation): every tab fully visible at every width — no shrink/truncate/scroll on the MAIN row (r2 keeps its thin scrollbar). Wrapped tabs keep the identical treatment; flex:1 re-stretches each line. */
.stnav-r2{padding-left:var(--stn-shift);display:flex;flex-wrap:nowrap;align-items:stretch;justify-content:flex-start;gap:0 var(--stn-gap);overflow-x:auto;overflow-y:hidden;scroll-snap-type:x proximity;scroll-padding-left:var(--stn-shift);scrollbar-width:none;-ms-overflow-style:none;background-color:var(--stn-strip);border:0;border-radius:0;padding:2px 4px 4px var(--stn-shift);background-image:linear-gradient(to right,var(--stn-strip),rgba(238,242,247,0)),linear-gradient(to left,var(--stn-strip),rgba(238,242,247,0)),linear-gradient(to right,rgba(15,23,42,.16),rgba(15,23,42,0)),linear-gradient(to left,rgba(15,23,42,.16),rgba(15,23,42,0));background-position:left center,right center,left center,right center;background-repeat:no-repeat;background-size:18px 100%,18px 100%,18px 100%,18px 100%;background-attachment:local,local,scroll,scroll}
/* ★ UI-TABS-01 §3.2 (2026-09-10) — THE SUB-ROW WRAPS, which is Michael's own read and what the measurement
   supports: at 1280 the eight Park Configuration sub-tabs need 1,147px against 994px of container, so with a
   real gap they no longer fit on one line and the scrolling row simply HID the last two ("AMENITIES",
   "POLICIES" were off the right edge). Wrapping shows every one at every width. `overflow-x:auto` stays as a
   belt for a single item too wide to break. §1.3: the same gap token as the row above. */
.stnav-sep{height:0;margin-bottom:20px}   /* s1.2/s3.4: the container's single bottom rule IS the separation; this only holds the gap to the content */
/* s2.1/s2.3 the main row: 14px/500, active 600 in the PRIMARY text token; padding does the spacing work and the
   gap token does the rest, which is what makes equal spacing hold at four tabs and at ten. */
/* ★★ UI-TABS-04 §1/§2 (Michael, 2026-09-10 19:02) — NO CHIPS. §1.1 is his own correction: CORP-GO-02 §1.2
   asked for "a light surface ground and a hairline border" on inactive tabs while §1.3 said do not make
   them chips — and a ground plus a border plus a radius IS a chip. Unsatisfiable as written, so §1.2's
   ground-and-border is WITHDRAWN.
   ★ §2.2 an inactive tab has NO border, NO background and NO radius. It is icon-plus-label on the strip.
   ★ §2.3 the active tab is THE ONLY TAB WITH A SHAPE — which is exactly what makes the selected one read
   instantly across ten of them. §2.4 the icons stay: they cost no borders and they are what make the row
   scannable. */
.stn-group{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:7px;flex:0 0 auto;scroll-snap-align:start;padding:10px var(--stn-tab-pad-x);text-decoration:none;font-size:13.5px;font-weight:500;white-space:nowrap;color:var(--muted-strong,var(--muted));background:none;border:0;border-radius:6px;transition:background-color .12s ease-out,color .12s ease-out}
.stn-group svg{flex:0 0 auto;opacity:.8}
/* ★ §2.1/§2.2 THE DIVIDER — 1px from the existing rule token at reduced alpha, and VERTICALLY INSET to
   about 60% of the tab height: a full-height rule reads as a table grid, an inset one reads as a divide. */
.stn-group + .stn-group::before,.stn-sub + .stn-sub::before,.stn-area + .stn-area::before{content:'';position:absolute;left:0;top:20%;height:60%;width:var(--stn-divider);background:var(--border);opacity:.55}
.stn-sub + .stn-sub::before,.stn-area + .stn-area::before{top:26%;height:48%;opacity:.4}   /* §3.1 lighter on the sub-row */
/* ★ §2.3/§2.5 SUPPRESS THE DIVIDERS EITHER SIDE of a segment that takes a ground — the fill provides its
   own edge, and a hairline running into it looks careless. §2.4: `+` gives no divider before the first. */
.stn-group.active::before,.stn-group.active + .stn-group::before,
.stn-group:hover::before,.stn-group:hover + .stn-group::before,
.stn-sub.active::before,.stn-sub.active + .stn-sub::before,
.stn-area.active::before,.stn-area.active + .stn-area::before{display:none}
/* ★ §2.5 hover is a TRANSIENT ground on that tab alone, lighter than the active fill — not a surface the
   tab keeps. §1.6 still holds: colour only, so there is no layout shift. */
.stn-group:hover{color:var(--text);background:var(--stn-tab-hover)}
.stn-group:hover svg{opacity:1}
.stn-group.active,.stn-group.active:hover{color:#fff;background:var(--brand);font-weight:500;text-shadow:.3px 0 0 currentColor,-.3px 0 0 currentColor}   /* ★ 2026-10-06 R.8 (Addendum J): the active tab no longer changes WIDTH — font-weight 600 widened "Platform Configuration" 204→225 px and tipped the strip 2 px over at 1366 (Payments); a hairline faux-bold keeps the emphasis at the same advance width */
.stn-group.active svg{opacity:1}
/* s2.2 THE INDICATOR: a 2px accent bar inset to the LABEL's width, sitting ON the container's rule — no fill, no
   box, no border. s2.4 its height is reserved whether shown or not, so hover cannot shift the layout.
   s5.1 it transitions on COLOUR and OPACITY only, never position: a sliding indicator fights the scroll container. */
/* ★ §1.4 THE SUB-ROW STAYS SUBORDINATE — no fill on its active tab, an accent UNDERLINE and an accent
   label instead. If both rows carried a filled active tab, nothing would tell the operator which level he
   is on. The underline is therefore the SUB-row's signal only; the main row's signal is the fill. */
.stn-sub::after,.stn-area::after{content:'';position:absolute;left:12px;right:12px;bottom:2px;height:2px;background:var(--brand);border-radius:1px;opacity:0;transition:opacity .12s ease-out}
.stn-sub:hover::after,.stn-area:hover::after{opacity:.3}
.stn-sub.active::after,.stn-area.active::after{opacity:1}
/* s2.5 the focus ring is on the TAB, not on the bar */
.stn-group:focus-visible,.stn-sub:focus-visible,.stn-area:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:4px}
@media (prefers-reduced-motion:reduce){.stn-group,.stn-sub,.stn-area,.stn-sub::after,.stn-area::after{transition:none}}   /* s5.2 */
/* s3.1 UPPERCASE STAYS — it is the hierarchy signal that stops the two rows competing — but at 11.5px/600 with
   0.6px tracking: uppercase at a small size with tight tracking is what made it hard to read. s3.3 the lighter
   padding is half the hierarchy. s3.4 no second rule: the container's own carries both rows. */
.stn-sub{position:relative;display:inline-flex;align-items:center;flex:0 0 auto;scroll-snap-align:start;padding:9px 12px;text-decoration:none;font-size:11.5px;font-weight:600;letter-spacing:.6px;text-transform:uppercase;white-space:nowrap;color:var(--muted-strong,var(--muted));border:0;transition:color .12s ease-out}
.stn-sub:hover{color:var(--text)}
.stn-sub.active{color:var(--brand);font-weight:700}
.stnav-r2.stnav-secondary{padding-left:calc(var(--stn-shift) + var(--stn-tab-pad-x))}   /* ★ PLAT-NAV-01 §7 REV (2026-09-12 20:45): the reference is the top row's first chip CONTENT edge — the General icon at --stn-shift + --stn-tab-pad-x. A secondary chip uses the SAME chip as the top row, so its FILL/border box lands ON that line (its icon then nests one chip-padding right). §7.4 one rule: lower row padding = top padding + top chip inner padding. The sub-tab row (.stnav-r3, stn-sub3 pad-x = the same --stn-tab-pad-x) keeps only --stn-shift, so its TEXT lands on the same line by construction. */
/* ★ PLAT-NAV-01 §7 (2026-09-12): ONE LEFT EDGE. .stnav-r3 (park's Park Configuration area row AND platform's sub-tab row) lacked the --stn-shift that .stnav-r1/.stnav-r2 carry, so it sat 12px left of the main row's first chip. This one shared-CSS rule aligns every third row on every plane to the top row's first-chip visible edge. The markup is still forked per plane (finding: platform + corp render their own stnav-wrap; only park uses the render_settings_* partials) — the drift is a symptom of that fork. */
.stnav-r3{padding-left:var(--stn-shift);scroll-padding-left:var(--stn-shift);display:flex;flex-wrap:nowrap;align-items:stretch;justify-content:flex-start;gap:0 var(--stn-gap);overflow-x:auto;overflow-y:hidden;scroll-snap-type:x proximity;scrollbar-width:none;-ms-overflow-style:none;background-color:transparent;border:0;border-radius:0;background-image:linear-gradient(to right,var(--stn-strip),rgba(238,242,247,0)),linear-gradient(to left,var(--stn-strip),rgba(238,242,247,0)),linear-gradient(to right,rgba(15,23,42,.16),rgba(15,23,42,0)),linear-gradient(to left,rgba(15,23,42,.16),rgba(15,23,42,0));background-position:left center,right center,left center,right center;background-repeat:no-repeat;background-size:18px 100%,18px 100%,18px 100%,18px 100%;background-attachment:local,local,scroll,scroll}
.stnav-r1::-webkit-scrollbar,.stnav-r2::-webkit-scrollbar,.stnav-r3::-webkit-scrollbar{display:none}   /* s4.4 */   /* the third row is a tab row too — one token and one wrap rule, or it stops being a system */
.stn-area{position:relative;display:inline-flex;align-items:center;flex:0 0 auto;scroll-snap-align:start;padding:9px 12px;text-decoration:none;font-size:11.5px;font-weight:600;letter-spacing:.6px;text-transform:uppercase;white-space:nowrap;color:var(--muted-strong,var(--muted));border:0;transition:color .12s ease-out}
.stn-area:hover{color:var(--text)}
.stn-area.active{color:var(--brand);font-weight:700}
.stn-sub3{font-size:12px;padding:7px 14px}
/* All Sites listing (sites.php): scrolling body with a pinned header — scoped to this table only. */
#all-sites-wrap thead th{position:sticky;top:0;background:#f8fafc;z-index:1;box-shadow:0 1px 0 var(--border)}
/* ── Listing-card component (shared; Rent Plans first) ── */
.lc-list{border-top:1px solid var(--border)}
.lc-row{display:flex;gap:18px;align-items:flex-start;padding:14px 16px;border-bottom:1px solid var(--border);flex-wrap:wrap}
.lc-main{flex:1 1 260px;min-width:220px}
.lc-title{font-size:14px}
.lc-subtitle{font-size:11px;color:var(--muted);margin-top:2px}
.lc-chips{margin-top:5px;display:flex;gap:4px;flex-wrap:wrap;align-items:center}
.lc-values{flex:0 0 190px;display:flex;flex-direction:column;gap:2px;padding-top:2px}
.lc-vrow{display:flex;justify-content:space-between;gap:14px;font-size:13px}
.lc-vlabel{color:var(--muted)}
.lc-vval{font-weight:600;white-space:nowrap;text-align:right}
.lc-status{flex:0 0 auto;align-self:center;min-width:70px;text-align:center}
.lc-actions{flex:0 0 auto;align-self:center;display:flex;gap:6px;align-items:center}
/* RPR-SORT-01: the inline SORT column (rent plans) — between status and actions; inert arrows are visibly inert */
.lc-sort{flex:0 0 auto;align-self:center;min-width:92px;text-align:center}
.lc-sort-ctl{display:inline-flex;align-items:center;gap:4px}
.lc-sort-btn{border:1px solid var(--border);background:var(--surface,#fff);border-radius:6px;width:26px;height:24px;line-height:1;cursor:pointer;font-size:11px;color:var(--text)}
.lc-sort-btn:disabled{opacity:.3;cursor:default}
.lc-sort-val{min-width:28px;font-variant-numeric:tabular-nums;font-weight:600;font-size:12.5px}
.lc-sort-msg{display:block;font-size:11px;color:var(--danger,#b91c1c);min-height:0}
.lc-sort-msg:empty{display:none}
.lc-pencil{font-size:14px;line-height:1;text-decoration:none;padding:5px 8px;border:1px solid var(--border);border-radius:6px;color:var(--brand);background:#fff}
.lc-pencil:hover{background:#f5f3ff}
/* .lc-kebab retired 2026-09-02 (SCHED-04): the kebab is the fleet tier .rp-kebab in rp-base */
/* Listing-card DESCRIPTION column + header row (reference match, 2026-07-10). House tokens only. */
.lc-desc{flex:1 1 260px;min-width:200px;font-size:13px;line-height:1.5;padding-top:2px}
.lc-desc-sub{font-size:12px;color:var(--muted);margin-top:3px}
.lc-head{background:var(--surface-2,rgba(0,0,0,.02));padding:9px 16px;font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.lc-head .lc-values,.lc-head .lc-status,.lc-head .lc-sort,.lc-head .lc-actions{display:block}
.lc-head .lc-sort{min-width:92px}
.lc-head .lc-status{min-width:70px}
/* Listing-card per-plan glyph (reference match Phase 2): colored ring + inline stroke SVG,
   color set inline from existing app hues; derived from utility data, no icon column. */
.lc-icon{flex:0 0 auto;align-self:center}
.lc-icon-ring{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border:1.5px solid currentColor;border-radius:50%;background:#fff}
.lc-icon-ring svg{width:20px;height:20px}
.lc-head .lc-icon{width:40px}

/* ── rp-scrollpanel — SHARED scroll panel (2026-07-19): registrations list, wizard Services,
   wizard Miscellaneous Fees. ONE component; the JS half lives in admin_footer(). Existing theme
   tokens only. When content FITS the panel is invisible (no bar, no buttons — layout unchanged). */
/* M1 (2026-07-27): #reg-list-wrap sits ABOVE the wizard's fragment anchor and is height-capped
   only when the JS adopts it — 1348px at parse → 432px at DOMContentLoaded on a long list, which
   moved the anchor ~900px after the browser had already scrolled to it (the residual retreat once
   the step markup was fixed). Pre-apply the SAME cap at parse so adoption is layout-neutral. */
/* RES-PAGE-01 §6 (2026-09-03): #reg-list-wrap's parse-time cap is gone — the registrations list pages (the shared pager) and grows in flow. */
.rp-scrollpanel {
  max-height: clamp(280px, 48vh, 680px);   /* breathes on large monitors, usable at 1366px */
  overflow-y: auto;
  scroll-behavior: smooth;
  /* scrollbar COLORS now come from the site-wide hover-reveal skin (end of this file);
     the panel keeps only its sizing + the auto-sizing grabbability rule below. */
}
/* (UI-VOCAB-01 §1.2: the long-panel 12px widening rule is gone — every scrollbar is the base sheet's width now, ONE place.) */
.rp-scrollwrap { position: relative; }
/* AD2 (2026-07-25): the buttons were pinned to the wrap's top-right with NO gutter, so on a table
   they painted ON TOP of the rightmost column — the sticky header's "Actions" label and row 1's
   per-row "•••" control, both occluded by a white chip. Rendered on admin/sites.php: the ▼ landed
   at x=1527,y=602, inside row 1's Actions cell, reading as a stray glyph dropped into the table.
   The gutter is reserved on the WRAP (not the panel) and ONLY when the content actually scrolls,
   so a panel whose content fits is byte-identical to before — the component's standing promise.
   36px vs the button's 26px+5px offset leaves the chip entirely inside the reserved band. */
.rp-scrollwrap[data-fits="0"] { padding-right: 36px; }
.rp-scrollbtns {
  position: absolute; top: 6px; right: 5px; display: flex; flex-direction: column; gap: 4px; z-index: 5;
  /* hover-reveal (scroll-system directive 1b): hidden at rest, fade in on panel hover /
     active scroll / keyboard focus; fits-hidden + disabled-at-ends rules unchanged. */
  opacity: 0; pointer-events: none; transition: opacity .25s ease;
}
.rp-scrollwrap:hover .rp-scrollbtns,
.rp-scrollwrap:focus-within .rp-scrollbtns,
.rp-scrollwrap:has(.is-scrolling) .rp-scrollbtns { opacity: 1; pointer-events: auto; }
.rp-scrollwrap[data-fits="1"] .rp-scrollbtns { display: none; }   /* fits → identical to today */
.rp-scrollbtn {
  width: 26px; height: 22px; display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--border); border-radius: 6px; background: #fff; color: var(--muted);
  cursor: pointer; font-size: 10px; line-height: 1; padding: 0;
}
.rp-scrollbtn:hover:not(:disabled) { color: #0f172a; border-color: var(--muted); }
.rp-scrollbtn:focus-visible { outline: 2px solid var(--muted); outline-offset: 1px; }
.rp-scrollbtn:disabled { opacity: .35; cursor: default; }

/* ── rr — registration redesign shell (P1, 2026-07-19) ─────────────────────────────────────
   NEW TOKENS (reported in p1_report.md): the reference's primary-blue family + pill greens/gold.
   Everything else maps to existing tokens (--border/--muted/surfaces). Inter with full fallback
   stack — no webfont file is shipped; system fallbacks render until one is (P7 call). */
:root {
  --rr-primary: #2563eb;
  --rr-primary-soft: #eff6ff;
  --rr-primary-border: #bfdbfe;
  --rr-pill-green-bg: #dcfce7;  --rr-pill-green-fg: #166534;
  --rr-pill-gold-bg:  #fef9c3;  --rr-pill-gold-fg:  #854d0e;
  /* Header-chip directive 2026-07-20 — NEW pairs (violet/rose had no tokens; green border added): */
  --rr-pill-green-border: #bbf7d0;
  --rr-violet-bg: #f5f3ff; --rr-violet-fg: #6d28d9; --rr-violet-border: #ddd6fe;
  --rr-rose-bg:   #fff1f2; --rr-rose-fg:   #be123c; --rr-rose-border:   #fecdd3;
}
.rr-shell { font-family: 'Inter', -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; }

/* Three-column reference grid: left rail / center / right rail. Overrides .reg-layout's 2-col. */
.reg-layout.rr-shell {
  display: grid;
  grid-template-columns: 270px minmax(0, 1fr) 330px;
  gap: 18px;
  align-items: start;
  align-content: start;   /* ADDENDUM M-1: the grid's bottom is the LONGEST column + the footer row — never stretched rows */
  margin-bottom: 20px;    /* ADDENDUM M-1: the page's card gap (.sp-card's margin-bottom) before the Drafts card */
}
/* ★ ADDENDUM M-1: THE footer row — the wizard grid's second row, spanning main + rail (below the longest column); one baseline:
   left [← Back], right [⏸ Park] [Next →]. Stacked (≤ 1200px) it spans the full width after the rail. */
/* ★ ADDENDUM M-1: the create wizard's rail is not itself sticky — it FILLS its grid row (no background: nothing is faked by the stretch) and its
   cards stick inside it, so a stuck rail stops at the columns' row and never covers the footer row (measured: it covered Park + Next) */
.reg-layout.rr-shell > .reg-side.rr-right { position: static; align-self: stretch; display: block; }
.rr-rail-stick { position: sticky; top: 14px; display: flex; flex-direction: column; gap: 14px; }
@media (max-width: 1200px) { .rr-rail-stick { position: static; } }
.rr-foot { grid-column: 2 / -1; display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.rr-foot-right { display: flex; align-items: center; gap: 10px; margin-left: auto; flex-wrap: wrap; justify-content: flex-end; }
.rr-foot .btn[hidden], .rr-foot-park:empty { display: none; }
/* ONE baseline: the three controls share one height (they measured 33 · 36 · 31 px — centred, their tops sat up to 3 px apart) */
.rr-foot .rr-step-back, .rr-foot .rr-step-next, .rr-foot #rr-park-btn { height: 38px; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; padding-top: 0; padding-bottom: 0; }
.rr-foot #rr-park-btn { width: auto; padding-left: 16px; padding-right: 16px; font-size: 13.5px; }
.rr-foot .rr-step-next { gap: 0; white-space: pre; }   /* "Next" and its step-name span are flex items — no gap between them ("Next : …") */
.rr-foot .rr-step-back[hidden], .rr-foot .rr-step-next[hidden] { display: none; }
@media (max-width: 640px) { .rr-foot { flex-wrap: nowrap; } .rr-foot-right { flex-wrap: nowrap; } .rr-next-name { display: none; } }
@media (max-width: 1200px) { .rr-foot { grid-column: 1 / -1; } }
.rr-left { position: sticky; top: 14px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.rr-right { display: flex; flex-direction: column; gap: 14px; }
.rr-card { margin: 0; }
.rr-mount-note { font-size: 12px; color: var(--muted); }
.rr-charges-caption { font-size: 11.5px; color: var(--muted); margin: 6px 14px 10px; }
.rr-qa-btn { justify-content: flex-start; text-align: left; }
.rr-qa-btn:disabled { opacity: .55; cursor: default; }

/* (2026-07-20: the old inline rr-stepper skin retired — the labels-below nav-bar stepper
   at .rrnav-* is the ONE stepper. Retired classes: wz-topbar/wz-title/wz-title-ico/
   wz-topbar-actions/wz-stepper/wz-step-pip/wz-pip-num/wz-pip-label/rr-stepper.) */

/* B4 RESPONSIVE (proposal, screenshot in the P1 report): below 1200px the three columns stack —
   left rail first (lookup before content), then the step content, then the summary rail. */
@media (max-width: 1200px) {
  .reg-layout.rr-shell { grid-template-columns: 1fr; }
  .rr-left, .reg-side.rr-right { position: static; }
}

/* P2 (redesign): One-Time Related Guest mode — the permissions grid hides entirely (R-C1);
   the disabled grid otherwise renders per R-C3. */
#ac-modal[data-onetime] [data-perms-grid] { display: none; }

/* ── P2.5 — registration redesign REFERENCE-FIDELITY pass (2026-07-20) ─────────────────────
   Chrome only: card structure, typography, pills, buttons per registration_form_new_nn.png.
   All data flows unchanged. Scoped to the wizard shell (.rr-shell) + its rail cards. */

/* Reference cards: white headers (bold dark title), soft borders — overrides the blue bar
   INSIDE the shell only; every other .reg-quote user keeps today's look. */
.rr-shell .reg-quote { border-radius: 12px; box-shadow: 0 1px 3px rgba(15,23,42,.06); }
.rr-shell .reg-quote-hd {
  background: #fff; color: #0f172a; font-size: 14.5px; font-weight: 700;
  padding: 14px 16px 10px; display: flex; align-items: center; gap: 8px;
}
.rr-shell .reg-quote-hd svg { display: none; }              /* reference headers are text-only */
.rr-shell .reg-quote-body { padding: 4px 16px 14px; }
.rr-shell .reg-quote-hd .wz-sum-edit { margin-left: auto; font-size: 12px; font-weight: 600; }

/* Small labels ("Search By" / "Search") */
.rr-mini-label { display: block; font-size: 12px; font-weight: 600; color: #334155; margin-bottom: 5px; }
.rr-find-body { display: flex; flex-direction: column; gap: 10px; }

/* L1 — wheel picker (iPhone-menu look; 3 rows visible, center highlighted) */
.rr-wheel { position: relative; outline: none; cursor: grab; user-select: none; touch-action: none; }
.rr-wheel:focus-visible .rr-wheel-viewport { outline: 2px solid var(--rr-primary); outline-offset: 1px; }
.rr-wheel-viewport {
  position: relative; height: 102px; overflow: hidden;
  border: 1px solid var(--border); border-radius: 10px;
  background: linear-gradient(180deg, #f8fafc 0%, #fff 30%, #fff 70%, #f8fafc 100%);
}
.rr-wheel-list { list-style: none; margin: 0; padding: 0; will-change: transform; }
.rr-wheel-opt {
  height: 34px; display: flex; align-items: center; justify-content: center;
  font-size: 12.5px; color: var(--muted); white-space: nowrap;
  transition: opacity .15s, transform .15s, color .15s, font-size .15s;
}
.rr-wheel-opt.is-center { color: #0f172a; font-weight: 700; font-size: 13.5px; }
.rr-wheel-opt.is-near { opacity: .55; transform: scale(.92); }
.rr-wheel-opt.is-far  { opacity: .25; transform: scale(.85); }
.rr-wheel-band {
  position: absolute; left: 6px; right: 6px; top: 34px; height: 34px; pointer-events: none;
  border-radius: 8px; background: var(--rr-primary-soft); border: 1px solid var(--rr-primary-border);
  mix-blend-mode: multiply;
}

/* Find Account: Search button + OR divider + outline New Account */
.rr-search-btn { width: 100%; background: var(--rr-primary); border-color: var(--rr-primary); }
.rr-or-divider { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 11px; font-weight: 600; }
.rr-or-divider::before, .rr-or-divider::after { content: ""; flex: 1; border-top: 1px solid var(--border); }
.rr-btn-outline {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border: 1px solid var(--rr-primary-border); border-radius: 8px; background: #fff;
  color: var(--rr-primary); font-size: 12.5px; font-weight: 700; padding: 8px 12px;
  cursor: pointer; text-decoration: none; line-height: 1.2;
}
.rr-btn-outline:hover { background: var(--rr-primary-soft); }

/* L2 — Search Results card */
.rr-results-hd .rr-count-badge {
  margin-left: auto; min-width: 22px; height: 20px; padding: 0 7px; border-radius: 10px;
  background: var(--surface-2, #f1f5f9); color: #334155; font-size: 11.5px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
}
.rr-results-body { display: flex; flex-direction: column; gap: 8px; position: relative; min-height: 46px; }
#rr-search-results.is-loading .rr-results-body > * { opacity: .35; }
#rr-search-results.is-loading .rr-results-body::after {
  content: "Searching…"; position: absolute; inset: 0; display: flex; align-items: center;
  justify-content: center; font-size: 12px; color: var(--muted); font-weight: 600;
}
.rr-res-row {
  display: flex; align-items: center; gap: 9px; padding: 8px 9px;
  border: 1px solid var(--border); border-radius: 10px; background: #fff; cursor: pointer;
}
.rr-res-row:hover { border-color: var(--rr-primary-border); background: var(--rr-primary-soft); }
.rr-res-row.is-picked { border-color: var(--rr-primary); background: var(--rr-primary-soft); }
.rr-res-row.is-active { outline: 2px solid var(--rr-primary); outline-offset: -1px; }
.rr-avatar {
  flex: none; width: 34px; height: 34px; border-radius: 50%; overflow: hidden;
  background: var(--rr-primary-soft); color: var(--rr-primary);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12.5px; font-weight: 700; letter-spacing: .3px;
}
.rr-avatar-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rr-avatar-lg { width: 44px; height: 44px; font-size: 15px; }
.rr-res-main { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.rr-res-name { font-size: 12.5px; font-weight: 700; color: #0f172a; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rr-res-sub { font-size: 11px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rr-res-select {
  flex: none; border: 0; border-radius: 7px; background: var(--rr-primary); color: #fff;
  font-size: 11.5px; font-weight: 700; padding: 5px 11px; cursor: pointer;
}
.rr-res-select:hover { filter: brightness(1.08); }
.rr-res-empty { font-size: 12px; color: var(--muted); display: flex; flex-direction: column; gap: 8px; padding: 6px 2px; }
.rr-results-pager {
  display: flex; align-items: center; justify-content: flex-end; gap: 8px;
  padding: 8px 14px 12px; font-size: 11.5px; color: var(--muted);
}
.rr-page-btn {
  width: 24px; height: 24px; border: 1px solid var(--border); border-radius: 7px; background: #fff;
  color: #334155; font-size: 14px; line-height: 1; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.rr-page-btn:hover:not(:disabled) { border-color: var(--rr-primary-border); color: var(--rr-primary); }
.rr-page-btn:disabled { opacity: .35; cursor: default; }
.rr-page-lbl { font-weight: 600; }

/* Shared pills */
/* .rr-pill family retired — UI-06 §1.4: .rp-badge tones */

/* L3 — Selected Account card */
.rr-sel-top { display: flex; gap: 11px; align-items: flex-start; }
.rr-sel-id { min-width: 0; }
.rr-sel-name { font-size: 13.5px; font-weight: 700; color: #0f172a; margin-bottom: 2px; }
.rr-sel-line { font-size: 12px; color: var(--muted); margin: 2px 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rr-sel-pills { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 9px; }
.rr-sel-actions { display: flex; gap: 7px; margin-top: 11px; }
.rr-sel-actions .rr-btn-outline { flex: 1; padding: 7px 6px; font-size: 11.5px; }

/* C1 — the fork card (the step-1 sp-card header retires inside the shell; the fork title IS
   the reference card title) */
.rr-shell .rr-step1-card > .sp-card-hd { display: none; }
.rr-fork-title { font-size: 17px; font-weight: 800; color: #0f172a; margin: 0 0 2px; }
.rr-fork-sub { font-size: 12.5px; color: var(--muted); margin: 0 0 12px; }
.rr-fork-rows { display: flex; flex-direction: column; gap: 4px; }
.rr-fork-row {
  display: flex; align-items: center; gap: 10px; margin: 0; padding: 7px 10px;
  border-radius: 9px; font-weight: 400; cursor: pointer;
}
.rr-fork-row:hover { background: var(--surface-2, #f8fafc); }
.rr-fork-row:has(input:checked) { background: var(--rr-primary-soft); }
.rr-fork-row input[type=radio] { accent-color: var(--rr-primary); width: 15px; height: 15px; margin: 0; flex: none; }
.rr-fork-lbl { font-size: 13px; color: #0f172a; font-weight: 600; }
.rr-fork-hint { display: block; font-size: 11.5px; color: var(--muted); font-weight: 400; margin-top: 1px; }

/* Center panel states */
.rr-center-panel { margin: 14px 0 4px; }
.rr-panel-idle p, .rr-panel-loading {
  font-size: 12.5px; color: var(--muted); background: var(--surface-2, #f8fafc);
  border: 1px dashed var(--border); border-radius: 10px; padding: 14px 16px; margin: 0;
}
.rr-verified { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.rr-vstrip { padding: 10px 14px; font-size: 12.5px; font-weight: 700; }
.rr-vstrip-ok { background: var(--rr-pill-green-bg); color: var(--rr-pill-green-fg); }
.rr-vstrip-warn { background: #fef3c7; color: #92400e; }
.rr-vfacts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 18px; margin: 0; padding: 12px 14px; }
.rr-vfact dt { font-size: 10.5px; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); font-weight: 700; }
.rr-vfact dd { font-size: 12.5px; color: #0f172a; margin: 1px 0 0; font-weight: 600; }
.rr-vrec { padding: 0 14px 10px; display: flex; gap: 6px; flex-wrap: wrap; }
.rr-vactions { padding: 0 14px 12px; }
.rr-chooser { display: flex; flex-direction: column; gap: 8px; }
.rr-chooser-hd { font-size: 13px; font-weight: 700; color: #0f172a; margin: 0 0 2px; }

/* C4/C5 — the shared center form component */
.rr-cform { border: 1px solid var(--rr-primary-border); border-radius: 12px; padding: 16px 16px 14px; background: #fff; }
.rr-cform-errors { background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c; font-size: 12.5px; border-radius: 8px; padding: 8px 12px; margin-bottom: 12px; }
.rr-cform-perms { margin-top: 14px; }
.rr-cform-perms-hd { font-size: 13px; font-weight: 700; color: #0f172a; margin: 0; }
.rr-cform-perms-sub { font-size: 11.5px; color: var(--muted); margin: 1px 0 8px; }
.rr-cform-perms-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 7px 16px;
  border: 1px solid var(--border); border-radius: 9px; padding: 11px 13px; opacity: .6; cursor: not-allowed;
}
.rr-cform-perms-grid label { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 400; margin: 0; cursor: not-allowed; }
.rr-cform-perms-grid input { accent-color: var(--rr-primary); }
.rr-cform-banner {
  display: flex; gap: 9px; margin-top: 14px; padding: 10px 13px; border-radius: 9px;
  background: var(--rr-primary-soft); border: 1px solid var(--rr-primary-border);
  color: #1e40af; font-size: 12px; line-height: 1.45;
}
.rr-cform-banner::before {
  content: "i"; flex: none; width: 15px; height: 15px; border-radius: 50%;
  background: var(--rr-primary); color: #fff; font-size: 10px; font-weight: 800;
  display: inline-flex; align-items: center; justify-content: center; margin-top: 1px;
  font-style: normal;
}
.rr-cform-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }

/* R1 — Registration Summary rows + Estimated Charges reference styling */
.rr-sumrows { display: flex; flex-direction: column; }
.rr-sumrow { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; font-size: 12.5px; }
.rr-sumrow-k { color: var(--muted); }
.rr-sumrow-v { color: #0f172a; font-weight: 600; text-align: right; }
/* ★ RPR-REG-01 ADDENDUM G.1 (Michael, 2026-09-24): the selected Rent Plan NEVER WRAPS. AGENT-RULED (b) — the Rent Plan row STACKS (label on its
   own line, the value beneath at the rail's full width, ONE line, "…" + title= when longer) — because (a)'s fixed-narrow label column leaves the
   value ~180px at the 296px rail, which truncates even "Full Hook-Up — Metered Electric & Water" (290px); stacked, that name shows WHOLE.
   Reversal: (a). ONE modifier for both rails (the create wizard's .rr-sumrow and the VIEW's $e2row) — it sets no font size, so each rail keeps
   its own (12.5px / 13px: never shrink the font). Other rows are unchanged. */
.rr-sumrow--stack { display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 2px; }
.rr-sumrow--stack > .rr-sumrow-v { text-align: left; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rr-viewfull { display: inline-block; margin-top: 7px; font-size: 12px; font-weight: 700; color: var(--rr-primary); text-decoration: none; }
.rr-viewfull:hover { text-decoration: underline; }
.rr-shell .wz-sum-tbl td { font-size: 12.5px; padding: 4px 0; }
.rr-shell .wz-sum-tbl tr.rr-esttotal td {
  font-size: 13.5px; padding-top: 9px; border-top: 1px solid var(--border);
}
.rr-shell .wz-sum-tbl tr.rr-esttotal td:last-child { color: var(--rr-primary); font-size: 15px; }

/* R1 — Quick Actions icon+label rows */
.rr-qa-body { display: flex; flex-direction: column; gap: 7px; }
.rr-qa-btn {
  display: flex; align-items: center; gap: 9px; width: 100%;
  border: 1px solid var(--border); border-radius: 9px; background: #fff;
  color: #334155; font-size: 12.5px; font-weight: 600; padding: 9px 12px; cursor: pointer; text-align: left;
}
.rr-qa-btn .rr-qa-ic { width: 18px; text-align: center; color: var(--rr-primary); font-size: 14px; }
.rr-qa-btn:hover:not(:disabled) { border-color: var(--rr-primary-border); background: var(--rr-primary-soft); }
.rr-qa-btn:disabled { opacity: .55; cursor: default; }

/* R2 — Attention Required strip, restyled to sit in the reference composition */
.rr-shell .wz-attention {
  margin: 4px 14px 12px; border: 1px solid #fcd34d; background: #fffbeb;
  border-radius: 10px; padding: 10px 12px; font-size: 12px;
}

/* P2.5 fidelity fixes (first render pass): the theme uppercases form labels — the reference
   fork rows, panel form and rail rows are normal-case. */
.rr-fork-row, .rr-fork-lbl, .rr-fork-hint { text-transform: none; letter-spacing: 0; }
.rr-cform .fg label { text-transform: none; letter-spacing: 0; font-size: 12.5px; font-weight: 600; color: #334155; }
.rr-mini-label { text-transform: none; letter-spacing: 0; }
/* Tighter result rows so "Last, First" + RP-xxxxx + email fit the 270px rail */
.rr-res-row { gap: 7px; padding: 7px 8px; }
.rr-avatar { width: 30px; height: 30px; font-size: 11.5px; }
.rr-avatar-lg { width: 44px; height: 44px; font-size: 15px; }
.rr-res-select { padding: 4px 9px; font-size: 11px; }
.rr-res-name { font-size: 12px; }
.rr-res-sub { font-size: 10.5px; }
/* Reference CTA is the primary blue */
.rr-shell .reg-create { background: var(--rr-primary); border-color: var(--rr-primary); }
.rr-shell .reg-create:hover { filter: brightness(1.06); }
/* Guest split: when the snapshot aside is hidden (no account yet) the main column spans full */
/* RPR-REG-01 ADD-P: minmax(0,1fr), never 1fr — a 1fr track is minmax(auto,1fr) and grew to its content's minimum (the Verify Account
   cards' 677px in a 474px column), pushing the checklist UNDER the rail: its rows looked pressable and the rail's box took the press. */
.wz-guest-split:has(.wz-snapshot[hidden]) { grid-template-columns: minmax(0, 1fr); }
/* [hidden] must win over the theme’s .fg display rules — the mode/fix-it wrapper toggle relies on it */
.rr-cform [data-rrf-wrap][hidden], .rr-center-panel [hidden] { display: none !important; }
/* P2.5: the Guest Snapshot aside stacks BELOW the center panel inside the shell — side-by-side
   it squeezed the reference form to ~380px. Same data, full-width panel (reference layout). */
.rr-shell .wz-guest-split { grid-template-columns: minmax(0, 1fr); }

/* ── P2.5 REVISED — Workflow 1 (WF1-Guest-Selection-Workflow.md) ─────────────────────────── */
.rr-wf1-hd { font-size: 17px; font-weight: 800; color: #0f172a; margin: 0 0 2px; }
/* A-1 chooser: Add New Guest / One-Time as outlined rows (selected state = B-1) */
.rr-addguest-row {
  display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%;
  margin-top: 10px; padding: 11px 12px; border: 1px solid var(--rr-primary-border);
  border-radius: 10px; background: #fff; color: var(--rr-primary);
  font-size: 13px; font-weight: 700; cursor: pointer;
}
.rr-addguest-row:hover { background: var(--rr-primary-soft); }
.rr-addguest-row.is-selected { background: var(--rr-primary-soft); border-color: var(--rr-primary); }
.rr-onetime-row { margin-top: 7px; font-weight: 600; color: #334155; border-style: dashed; }
.rr-onetime-row .rr-fork-hint { color: var(--muted); }
.wf1-guest-row.is-current { background: var(--rr-primary-soft); border: 1px solid var(--rr-primary-border); }
#wf1-choose .rr-cform-banner { margin-top: 12px; }
/* A-2 / A-3 / B-4 shared card pieces */
.rr-a2-strip { border-radius: 10px; text-align: center; font-size: 14px; }
.rr-a2-card { border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; margin-top: 12px; background: #fff; }
.rr-a2-name { font-size: 16px; font-weight: 800; color: #0f172a; }
.rr-a2-cols { display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px; margin-top: 14px; }
@media (max-width: 1350px) { .rr-a2-cols { grid-template-columns: 1fr; } }
.rr-a2-facts { display: flex; flex-direction: column; gap: 9px; margin: 0; }
.rr-a2-fact dt { font-size: 10.5px; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); font-weight: 700; }
.rr-a2-fact dd { font-size: 13px; color: #0f172a; margin: 1px 0 0; font-weight: 600; overflow-wrap: anywhere; }   /* ADD-Q: a long email wraps inside the card at 390 (was clipped) */
.rr-a2-fixit dd input, .rr-a2-fixit dd select { width: 100%; }
.rr-a2-saveline { display: flex; align-items: center; gap: 10px; margin-top: 4px; }
.rr-a2-saveerr { font-size: 12px; color: #b91c1c; }
.rr-a2-permpanel {
  border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px;
  background: var(--surface-2, #f8fafc); opacity: .65; cursor: not-allowed; align-self: start;
}
.rr-a2-perm { font-size: 12.5px; color: #334155; padding: 4px 0; border-bottom: 1px dashed var(--border); }
.rr-a2-perm:last-of-type { border-bottom: 0; }
.rr-a2-actions { justify-content: space-between; }
/* A-3 What's next */
.rr-a3-next { border: 1px solid var(--border); border-radius: 12px; padding: 12px 16px; margin-top: 12px; background: #fff; }
.rr-a3-check { display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: #334155; padding: 5px 0; }
.rr-a3-tick { color: #16a34a; font-weight: 800; }
/* B-3 */
.rr-b3-perms, .rr-b3-extra { border: 1px solid var(--border); border-radius: 12px; padding: 12px 16px; margin-top: 12px; background: #fff; }
.rr-b3-perms-list { grid-template-columns: 1fr; gap: 8px; border: 0; padding: 4px 0 0; }
/* B-4 */
.rr-b4-perms { border: 1px solid var(--border); border-radius: 12px; padding: 12px 16px; margin-top: 12px; background: var(--surface-2, #f8fafc); }
.rr-btn-green { background: #16a34a; border-color: #16a34a; color: #fff; font-weight: 700; }
.rr-btn-green:hover:not(:disabled) { filter: brightness(1.06); }

/* ── rp-accordion — shared accordion primitive (2026-07-20; JS half: assets/js/rp-accordion.js).
   First mount: WF1 A-1 guest chooser. Height animation = grid-rows 0fr→1fr (no JS measuring). */
.rpacc { display: flex; flex-direction: column; gap: 8px; }
.rpacc-row { border: 1px solid var(--border); border-radius: 11px; background: #fff; overflow: hidden; }
.rpacc-head {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px; cursor: pointer;
  user-select: none;
}
.rpacc-head:hover { background: var(--surface-2, #f8fafc); }
.rpacc-head:focus-visible { outline: 2px solid var(--rr-primary); outline-offset: -2px; border-radius: 10px; }
.rpacc-name { font-size: 13px; font-weight: 700; color: #0f172a; }
.rpacc-chev { margin-left: auto; color: var(--muted); font-size: 13px; transition: transform .22s ease; }
.rpacc-row.is-open .rpacc-chev { transform: rotate(180deg); }
.rpacc-panelwrap {
  display: grid; grid-template-rows: 0fr;
  /* collapsed panels leave the tab order + a11y tree; visibility flips INSTANTLY on open
     (focus can land in the panel) and only after the collapse animation on close */
  visibility: hidden;
  transition: grid-template-rows .25s ease, visibility 0s .25s;
}
.rpacc-row.is-open .rpacc-panelwrap {
  grid-template-rows: 1fr; visibility: visible;
  transition: grid-template-rows .25s ease, visibility 0s;
}
.rpacc-panel { min-height: 0; overflow: hidden; outline: none; }
.rpacc-panel-inner { padding: 2px 14px 12px 56px; }

/* WF1 A-1 accordion specifics */
.wf1-guest-row.is-marked { border-color: var(--rr-primary); background: var(--rr-primary-soft); }
.wf1-guest-row.is-marked .rpacc-head:hover { background: var(--rr-primary-soft); }
.wf1-marked-pill { margin-left: 2px; }
.wf1-preview { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 18px; margin: 6px 0 0; }
.wf1-preview-perms {
  margin-top: 10px; padding: 7px 10px; border: 1px dashed var(--border); border-radius: 8px;
  background: var(--surface-2, #f8fafc); color: var(--muted); font-size: 11.5px; opacity: .75;
  cursor: not-allowed;
}
.wf1-select-btn { margin-top: 10px; justify-content: center; gap: 6px; }   /* ADD-Q: intrinsic width, label centred (was min-width 110 + flex-start) */
/* selected = the green .rp-badge family TINTED (L-1's derivation from --rp-tone-ok: 10% tint, 45% border, the token as dark green text) */
.wf1-select-btn.is-selected, .wf1-select-btn.is-selected:hover { background: color-mix(in srgb, var(--rp-tone-ok, #15803d) 10%, #fff);
  color: var(--rp-tone-ok, #15803d); border: 1px solid color-mix(in srgb, var(--rp-tone-ok, #15803d) 45%, #fff); cursor: default; filter: none; box-shadow: none; }

/* ── Scrollbars: UI-VOCAB-01 §1 (2026-08-30) — the site-wide skin lives in /assets/css/rp-base.css (@imported at the top of this file),
   ONE place. The hover-reveal overlay skin that stood here (2026-07-20: thumb transparent at rest, 8px, neutral on hover) was the
   "cannot be found / cannot be hit" complaint itself and is REMOVED; assets/js/rp-scroll-reveal.js's .is-scrolling class now styles nothing. */

/* Sticky table headers inside adopted scroll panels (the SaaS table pattern — Phase 2/3). */
.rp-scrollpanel table thead th {
  position: sticky; top: 0; z-index: 3;
  background: var(--card-bg, #fff);
  box-shadow: 0 1px 0 var(--border);
}

/* Phase 2: the Drafts card is a compact panel (~4 rows); All Registrations keeps the
   component's viewport-relative clamp. */
/* M1 (2026-07-27): cap applies AT PARSE, not only post-adoption — this card also sits above
   the wizard anchor, and its 662→232 adoption collapse was the second half of the residual
   retreat (same mechanism as #reg-list-wrap above). */
#reg-drafts-wrap { max-height: 232px; overflow-y: auto; }

/* Print: scroll containers must never clip content on paper (P5). */
@media print {
  .rp-scrollpanel, .tbl-wrap { max-height: none !important; overflow: visible !important; }
  .rp-scrollbtns { display: none !important; }
}

/* ── Wizard footer bar + Quick Actions panel (directive 2026-07-20) ─────────────────────── */
/* Quick Actions: compact (~5 rows) on short viewports; on taller viewports the clamp exceeds
   all six rows and the component's fits rule hides every scroll affordance. */
#rr-qa-body.rp-scrollpanel { max-height: clamp(230px, 26vh, 320px); }

/* ── rp-modal — shared modal primitive (P2.6 M1; JS: assets/js/rp-modal.js) ─────────────── */
/* .rpm-* (the shared modal) moved to /assets/css/rp-modal.css on 2026-09-02 (SCHED-02 §2) — linked from admin/_layout.php */

/* P2.6 N2 — anchored sections never hide under sticky chrome */
.rr-card, .rr-center-panel > div, .wz-step { scroll-margin-top: 66px; }
.rr-res-idle { text-align: center; padding: 14px 6px; }

/* Test-mode chip (relocated to the HEADER with the footer removal) */
/* .rr-testmode-chip retired — UI-06 §1.4 (.rp-badge--warn) */
/* R-NEXT-CONTEXTUAL v2 (2026-07-21, supersedes the fade/hide era — Michael hunted for the
   hidden button twice): the Next button ALWAYS renders in place; readiness swaps the
   DISABLED-VISIBLE state (muted primary, not-allowed cursor). The class-based off-state
   keeps clicks firing so a disabled click can anchor the first unmet field (teach, don't
   dead-end). The enable swap reuses the transition; the hide-era opacity-0/translate +
   rr-next-in fade machinery is RETIRED. */
.rr-step-next, .reg-create { transition: opacity .2s ease, filter .2s ease; }
.rr-gate-off { opacity: .55; filter: saturate(.45); cursor: not-allowed !important; }
@media (prefers-reduced-motion: reduce) { .rr-step-next, .reg-create { transition: none; } }
/* In-flow step navigation (reference bottom pattern): right-aligned row at each step's end */
.rr-step-nav { display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px; }
/* Header actions: nav-bar 2×2 grid holds all four at desktop (the grid is what retired the
   old 1440px single-row squeeze); below 1100px the established ⋯ pattern takes the quote pair. */
.rr-hdr-quote-group { display: inline-flex; gap: 6px; }
.rr-hdr-ellipsis { display: none; font-size: 17px; padding: 4px 9px; }
/* NAV-BAR COLLAPSE (proposal per directive §3, applied + MEASURED): the 220px admin sidebar
   + page margins leave the bar 1082px at a 1366 viewport, while the labeled three-zone row
   needs ~1264px min (left 243 · stepper 640 · actions 309 · gaps/padding 72) — so labels-below
   CANNOT hold at 1366 inside the admin chrome (reported, not font-shrunk; the mockup's canvas
   is a full-width 1663px). Labels render whenever they fit: viewport ≥1560 (bar ≥ ~1270).
   Below: pips-only, each pip keeping its title tooltip + aria-label — one row, zero scroll.
   ≤1100px the bar stacks and the quote pair re-homes into the ⋯ popover (established rule). */
@media (max-width: 1579px) {
  .rrnav-bar { gap: 18px; padding: 16px 18px; }
  .rrnav-titles p { max-width: 200px; }
  .rrnav-pip { width: 64px; }
  .rrnav-pip-label { display: none; }
  .rrnav-pip + .rrnav-pip::before { width: 12px; }
}
@media (max-width: 1100px) {
  .rrnav-bar { grid-template-columns: 1fr; gap: 14px; }
  .rrnav-stepper { justify-content: flex-start; }
  .rrnav-actions { border-left: 0; padding-left: 0; align-items: flex-start; flex-direction: row; align-self: auto; }
  .rrnav-actions-top { order: 2; }
  .rr-hdr-ellipsis { display: inline-flex; }
  #rr-header-actions { position: relative; }
  #rr-header-actions .rr-hdr-quote-group { display: none; }
  #rr-header-actions.menu-open .rr-hdr-quote-group {
    display: flex; flex-direction: column; position: absolute; top: calc(100% + 6px); right: 0;
    background: #fff; border: 1px solid var(--border); border-radius: 10px; padding: 8px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, .14); z-index: var(--z-dropdown, 10000);
  }
  .rrnav-grid { display: flex; gap: 8px; }
}

/* ── Header action CHIPS (directive 2026-07-20): soft-tint pills + currentColor glyphs ──── */
.rr-chip {
  display: inline-flex; align-items: center; gap: 6px;
  height: 30px; padding: 0 12px; border-radius: 8px;
  font-size: 12px; font-weight: 700; cursor: pointer; text-decoration: none;
  border: 1px solid; transition: background-color .15s ease, border-color .15s ease;
}
.rr-chip svg { flex: none; }
.rr-chip-blue   { background: var(--rr-primary-soft);   color: var(--rr-primary);      border-color: var(--rr-primary-border); }
.rr-chip-violet { background: var(--rr-violet-bg);      color: var(--rr-violet-fg);    border-color: var(--rr-violet-border); }
.rr-chip-green  { background: var(--rr-pill-green-bg);  color: var(--rr-pill-green-fg); border-color: var(--rr-pill-green-border); }
.rr-chip-rose   { background: var(--rr-rose-bg);        color: var(--rr-rose-fg);      border-color: var(--rr-rose-border); }
/* hover = slightly deepened tint (per-hue) */
.rr-chip-blue:hover   { background: #dbeafe; border-color: #93c5fd; }
.rr-chip-violet:hover { background: #ede9fe; border-color: #c4b5fd; }
.rr-chip-green:hover  { background: #bbf7d0; border-color: #86efac; }
.rr-chip-rose:hover   { background: #ffe4e6; border-color: #fda4af; }
/* focus ring in the chip's own hue */
.rr-chip:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
/* disabled = color drains to the existing muted treatment */
.rr-chip:disabled { background: var(--surface-2, #f1f5f9); color: var(--muted); border-color: var(--border); cursor: default; }
/* collapsed ⋯ menu rows keep glyph + label (same nodes re-homed); left-align inside the popover */
#rr-header-actions.menu-open .rr-hdr-quote-group .rr-chip { justify-content: flex-start; }

/* ── P5 — S5 Review assembly (recap sections · payment placeholder) ──────────────────── */
.rr-recap-sec { padding: 12px 0; border-bottom: 1px solid var(--border); }
.rr-recap-sec:first-child { padding-top: 0; }
.rr-recap-sec:last-child { border-bottom: 0; padding-bottom: 0; }
.rr-recap-hd { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.rr-recap-hd > span { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.rr-payrow { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px;
  border: 1px solid #fcd34d; background: #fffbeb; border-radius: 8px; margin-bottom: 8px; font-size: 13.5px; }
.rr-payrow strong { font-size: 15px; }
.rr-payrow-bal { border-color: var(--rr-primary-border, #bfdbfe); background: var(--rr-primary-soft, #eff6ff); }
.rr-pay-slot { display: flex; gap: 8px; align-items: flex-start; padding: 12px 14px; margin-top: 4px;
  border: 1px dashed var(--border); border-radius: 8px; background: var(--surface-2, #f8fafc);
  color: var(--muted); font-size: 12.5px; line-height: 1.5; }

/* Registration Summary PROGRESSIVE REVEAL (directive 2026-07-20) */
@keyframes rr-row-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.rr-sumrow.rr-row-in { animation: rr-row-in .15s ease-out; }
@media (prefers-reduced-motion: reduce) { .rr-sumrow.rr-row-in { animation: none; } }
.rr-sumrow-muted .rr-sumrow-v { color: var(--muted); font-weight: 400; }

/* Quick Actions collapsible card (shared accordion-card option; directive 2026-07-20) */
.rpacc-card > .rpacc-head { display: flex; align-items: center; cursor: pointer; user-select: none; }
.rpacc-card > .rpacc-head:hover { background: var(--surface-2, #f8fafc); }
.rpacc-card > .rpacc-head:focus-visible { outline: 2px solid var(--rr-primary); outline-offset: -2px; border-radius: 10px; }
.rr-qa-chev { margin-left: auto; color: var(--rr-primary); display: inline-flex; }
/* the card reuses the accordion's chevron rotation + panel machinery (same classes, same system) */
.rpacc-card.is-open .rpacc-chev { transform: rotate(180deg); }
.rpacc-card .rpacc-chev { transition: transform .22s ease; }
.rpacc-card > .rpacc-panelwrap {
  display: grid; grid-template-rows: 0fr; visibility: hidden;
  transition: grid-template-rows .2s ease, visibility 0s .2s;
}
.rpacc-card.is-open > .rpacc-panelwrap {
  grid-template-rows: 1fr; visibility: visible;
  transition: grid-template-rows .2s ease, visibility 0s;
}
@media (prefers-reduced-motion: reduce) {
  .rpacc-card > .rpacc-panelwrap, .rpacc-panelwrap, .rpacc-chev, .rpacc-card .rpacc-chev { transition: none; }
}

/* Scan-ID input addon (ONE decorator: rrScanAttach; directive 2026-07-20) */
.rr-scangroup { display: flex; align-items: stretch; width: 100%; }
.rr-scangroup > input { flex: 1; min-width: 0; border-top-right-radius: 0; border-bottom-right-radius: 0; border-right: 0; }
.rr-scanbtn {
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  padding: 0 11px; border: 1px solid var(--rr-primary-border); border-radius: 0 8px 8px 0;
  background: var(--rr-primary-soft); color: var(--rr-primary);
  font-size: 12px; font-weight: 700; cursor: pointer;
}
.rr-scanbtn:hover { background: #dbeafe; }
.rr-scanbtn:focus-visible { outline: 2px solid var(--rr-primary); outline-offset: 1px; }
@media (max-width: 1439px) { .rr-scanbtn-lbl { display: none; } }   /* glyph-only + tooltip at narrow widths */
/* (R-NEXT v2: the Create fade-on-appear retired with the hide era — disabled-visible now.) */
/* QA available-only view: the shared toggle link sits at the body bottom */
#rr-qa-body .rr-viewfull { margin-top: 3px; align-self: flex-start; }
.rr-qa-btn.rr-row-in { animation: rr-row-in .15s ease-out; }
@media (prefers-reduced-motion: reduce) { .rr-qa-btn.rr-row-in { animation: none; } }
/* Comm Preferences condensed toggle (third rrToggleLink mount; directive 2026-07-20) */
.wz-commprefs-row .rr-viewfull { margin-left: auto; white-space: nowrap; }
.wz-commprefs-disclosure.rr-row-in { animation: rr-row-in .15s ease-out; }
@media (prefers-reduced-motion: reduce) { .wz-commprefs-disclosure.rr-row-in { animation: none; } }
/* COMPLIANCE GUARD: any print of this page shows the paragraph in full; the toggle is screen-only */
@media print {
  .wz-commprefs-disclosure, #commprefs-disclosure[hidden] { display: block !important; }
  #commprefs-toggle { display: none !important; }
}

/* Pre-selection WELCOME panel (legacy-center retirement directive, 2026-07-20) */
.rr-welcome { text-align: center; padding: 34px 22px; }
.rr-welcome-ic { color: var(--rr-primary); opacity: .75; margin-bottom: 8px; }
/* RPR-REG-01 ADD-O (2026-09-26): the heading and helper are the SAME cell width — the full inner width of the panel. The helper carried
   max-width:400px, and `.rr-panel-idle p { margin:0 }` (0,1,1) out-specified these (0,1,0) rules, so its `margin:0 auto` and both
   cells' spacing were lost: a capped cell hugging the left edge. Scoped under .rr-welcome so the spacing holds. The button row ends on
   the cell's right edge (AGENT-RULED; reversal: justify-content:center). */
.rr-welcome .rr-welcome-hd { font-size: 16px; font-weight: 800; color: #0f172a; margin: 0 0 8px; }
.rr-welcome .rr-welcome-sub { font-size: 12.5px; color: var(--muted); margin: 0 0 14px; }
.rr-welcome-actions { display: flex; gap: 10px; justify-content: flex-end; }
#rr-legacy-carriers[hidden] { display: none !important; }
/* Step-progressive Attention strip: new lines stream in (shared motion + reduced-motion rule) */
.wz-attention li.rr-row-in { animation: rr-row-in .15s ease-out; }
@media (prefers-reduced-motion: reduce) { .wz-attention li.rr-row-in { animation: none; } }

/* Rail bound-state (2026-07-21): the Change-account ghost sits beneath the Selected Account card */
.rr-change-acct { width: 100%; margin-top: 8px; justify-content: center; }

/* Guest-chooser sublabels + shared info popover (directive 2026-07-21) */
.rr-addguest-row { display: flex; flex-direction: column; align-items: center; gap: 3px; text-align: center; }
.rr-addguest-main { display: inline-flex; align-items: center; gap: 6px; }
.rr-addguest-sub { font-size: 11.5px; font-weight: 400; color: var(--muted); line-height: 1.35;
  white-space: normal; }   /* wraps at narrow widths — never truncates */
.rr-addguest-info { font-size: 13px; color: var(--muted); cursor: pointer; line-height: 1; }
.rr-addguest-info:hover, .rr-addguest-info:focus-visible { color: var(--rr-primary, #2563eb); }
.rr-guestinfo-pop { margin: 6px 0; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px;
  background: #fff; box-shadow: 0 8px 24px rgba(15,23,42,.14); font-size: 12.5px; line-height: 1.5; color: #334155; }

/* ── C-UI: the S5 payment chooser (radio option cards) ─────────────────────────────── */
.rr-payopt { display: block; border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px;
  margin-top: 10px; cursor: pointer; transition: border-color .15s, background .15s; }
.rr-payopt.is-selected { border-color: var(--rr-primary, #2563eb); background: var(--rr-primary-soft, #eff6ff); }
.rr-payopt.is-off { opacity: .6; cursor: not-allowed; }
.rr-payopt-hd { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13.5px; }
.rr-payopt-sub { flex-basis: 100%; margin-left: 24px; font-size: 12px; color: var(--muted); }
.rr-payopt-body { margin: 10px 0 2px 24px; }
.rr-payopt-body[hidden] { display: none; }
/* ★ RPR-REG-01 ADDENDUM M REV 2 — [Payment & Delivery] owns the payment controls on Review:
   the device cell under Collect Payment Now (aligned with the option's text), then the card FOOTER — the ONE create button and Park,
   right-aligned. M.4: the footer is sticky at the wide width (the clerk never scrolls to find the button — Addendum I's Close lesson);
   at the narrow width it is a normal footer. */
.rr-pd-device { padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px; background: #fff; }
.rr-pd-device .rp-device-strip-btn { margin-top: 6px; }
.rr-dev-reset { display: inline-block; }
.rr-pd-foot { display: flex; justify-content: flex-end; align-items: stretch; gap: 10px; margin: 18px -22px -22px; padding: 14px 22px;
  border-top: 1px solid var(--border); background: var(--card-bg, #fff); border-radius: 0 0 14px 14px; }
.rr-pd-foot .reg-create { width: auto; flex: 0 1 auto; min-width: 240px; padding: 12px 22px; }
.rr-pd-park-slot:empty { display: none; }
.rr-pd-park-slot #rr-park-btn { height: 100%; padding: 10px 16px; font-size: 13.5px; }
@media (min-width: 901px) { .rr-pd-foot { position: sticky; bottom: 0; z-index: 5; box-shadow: 0 -6px 14px -10px rgba(15, 23, 42, .25); } }
@media (max-width: 900px) { .rr-pd-foot { flex-wrap: wrap; } .rr-pd-foot .reg-create { flex: 1 1 100%; min-width: 0; } .rr-pd-park-slot, .rr-pd-park-slot #rr-park-btn { flex: 1 1 100%; width: 100%; } }
/* (ADDENDUM M-1: the rail's Park slot retired — Park is THE footer row's on Steps 1–4, the Payment & Delivery card's on Review) */
.rr-payopt-decline { padding: 10px 12px; border: 1px solid #fca5a5; border-radius: 8px; background: #fef2f2;
  color: #991b1b; font-size: 12.5px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.rr-payopt-decline[hidden] { display: none; }   /* author display:flex must not defeat the hidden attr */

/* ═══════════════════════════════════════════════════════════════════════════
   VERIFICATION SURFACE (A-0 / A-2) — rebuilt to the approved mockup 2026-07-22.
   ONE component, two modes; these rules serve both. Site tokens only — no
   one-off hex where a variable exists.
   ═══════════════════════════════════════════════════════════════════════════ */
.vr-ic { width: 18px; height: 18px; flex: 0 0 18px; }

/* ── header band ── */
/* NB the wizard's centre column is ~597px, not the mockup's ~1180 — this band must
   wrap by default, not only at a phone breakpoint. Without min-width the title flexed
   to ZERO and wrapped to three lines while the progress block took 520px. */
.vr-head { display: flex; align-items: center; gap: 16px 18px; flex-wrap: wrap; background: var(--card, #fff);
           border: 1px solid var(--border); border-radius: 12px; padding: 18px 20px; margin-bottom: 14px; }
.vr-head-ic { width: 44px; height: 44px; flex: 0 0 44px; border-radius: 12px; background: var(--brand-light, #eff6ff);
              color: var(--brand, #1d4ed8); display: flex; align-items: center; justify-content: center; }
.vr-head-ic .vr-ic { width: 24px; height: 24px; }
.vr-head-txt { flex: 1 1 240px; min-width: 240px; }
.vr-head-txt h3 { font-size: 17px; font-weight: 800; margin: 0 0 3px; letter-spacing: -.01em; }
.vr-head-txt p { font-size: 12.5px; color: var(--muted); margin: 0; }
.vr-head-prog { display: flex; align-items: center; gap: 14px; flex: 1 1 auto; }
/* below the mockup's width the progress block takes its own row rather than
   crushing the title — the gate label must never be the thing that gets squeezed */
@media (max-width: 820px) { .vr-head-prog { flex: 1 1 100%; padding-top: 14px; border-top: 1px solid var(--border); } }

/* progress ring — shared utility; NEVER a gate, so it is deliberately quiet */
.vr-ring { width: 64px; height: 64px; transform: rotate(-90deg); }
.vr-ring-bg { fill: none; stroke: var(--border); stroke-width: 6; }
.vr-ring-fg { fill: none; stroke: var(--brand, #1d4ed8); stroke-width: 6; stroke-linecap: round;
              transition: stroke-dashoffset .45s ease; }
.vr-ring-pct { margin-left: -52px; margin-right: 22px; font-size: 13px; font-weight: 800;
               color: var(--brand, #1d4ed8); }
.vr-prog-txt { min-width: 0; flex: 1 1 auto; }
/* gate state OUTRANKS the percentage — bigger, bolder, first in reading order */
.vr-gate { font-size: 14px; font-weight: 800; display: flex; align-items: center; gap: 6px; }
.vr-gate-ok { color: #15803d; }
.vr-gate-off { color: #b45309; }
.vr-prog-sub { font-size: 11.5px; color: var(--muted); margin-top: 3px; line-height: 1.45; }

/* ── the two cards ── */
.vr-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 14px; }   /* ADD-P: two cards when they fit, else stacked — never wider than the column */
@media (max-width: 760px) { .vr-grid { grid-template-columns: 1fr; } }
.vr-card { background: var(--card, #fff); border: 1px solid var(--border); border-radius: 12px; padding: 16px 18px; }
.vr-card-hd { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
/* ADD-P: a grid card never outgrows its track — at 390 the rows' minimum (label 108px + a nowrap value) widened the cards past the column */
.vr-grid > .vr-card { min-width: 0; }
.vr-srow-val { min-width: 0; overflow-wrap: anywhere; }
.vr-card-hd h4 { font-size: 15px; font-weight: 800; margin: 0; display: flex; align-items: center; gap: 7px; }

.vr-ident { display: flex; align-items: center; gap: 12px; padding-bottom: 12px; }
.vr-name { font-size: 16px; font-weight: 800; }
.vr-pill-wrap { margin-top: 3px; }
.vr-since { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); margin-top: 6px; }

/* summary rows */
.vr-srows { border-top: 1px solid var(--border); }
.vr-srow { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
.vr-srow-ic { color: var(--muted); display: flex; }
.vr-srow-lbl { color: var(--text); flex: 0 0 108px; }
.vr-srow-val { margin-left: auto; text-align: right; color: var(--text); }
.vr-srow-val.is-missing { color: #b45309; font-weight: 600; }

/* status glyphs — one vocabulary across summary rows and the checklist */
.vr-glyph { width: 20px; height: 20px; flex: 0 0 20px; border-radius: 50%; display: inline-flex;
            align-items: center; justify-content: center; font-size: 12px; font-weight: 900; color: #fff; }
.g-ok   { background: #16a34a; }
.g-warn { background: #f97316; }   /* attention — REQUIRED and missing */
.g-info { background: #94a3b8; }   /* neutral   — RECOMMENDED and missing: not blocking */

/* banner (R2 — three real states) */
.vr-banner { display: flex; gap: 10px; align-items: flex-start; border-radius: 10px; padding: 12px 14px;
             margin-top: 14px; font-size: 12.5px; line-height: 1.5; }
.vr-banner-ok   { background: #f0fdf4; color: #166534; border: 1px solid #bbf7d0; }
.vr-banner-info { background: var(--brand-light, #eff6ff); color: #1e40af; border: 1px solid #bfdbfe; }
.vr-banner-warn { background: #fffbeb; color: #92400e; border: 1px solid #fcd34d; }

/* ── checklist ── */
.vr-chklist { display: flex; flex-direction: column; }
.vr-chk { display: flex; align-items: center; gap: 11px; width: 100%; text-align: left; background: none;
          border: 0; border-bottom: 1px solid var(--border); padding: 11px 2px; cursor: pointer; font: inherit; }
.vr-chk:last-of-type { border-bottom: 0; }
.vr-chk:hover { background: var(--bg, #f9fafb); }
.vr-chk.is-done { cursor: default; }
.vr-chk-body { flex: 1 1 auto; min-width: 0; }
.vr-chk-lbl { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; }
.vr-chk-sub { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; }
.vr-chk.is-req .vr-chk-sub { color: #b45309; font-weight: 600; }
.vr-chev { color: var(--muted); font-size: 18px; flex: 0 0 auto; }
.vr-chk.is-done .vr-chev { opacity: .3; }
/* ★ RPR-REG-01 ADD-P — every flagged thing is a link to its field (openVerifyField): a row with a field behind it is a <button>, whole-row
   hover + a visible focus ring; a row with nothing to open (a satisfied REQUIRED rule — edited through [Edit Account]) is a plain row: no
   chevron, no pointer, not in the tab order. */
.vr-chk[data-vr-open] { cursor: pointer; }
.vr-chk.is-done[data-vr-open] .vr-chev { opacity: 1; }
.vr-chk[data-vr-open]:focus-visible, .vr-srow[data-vr-open]:focus-visible, .vr-strip-link:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; border-radius: 8px; }
.vr-chk.is-static { cursor: default; }
.vr-chk.is-static:hover { background: none; }
.vr-srow[data-vr-open] { cursor: pointer; border-radius: 6px; }
.vr-srow[data-vr-open]:hover { background: var(--bg, #f9fafb); }
.vr-srow[data-vr-open] .vr-srow-val { text-decoration: underline; text-underline-offset: 2px; }
.vr-strip-link { color: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
/* the section's collapsed header IS the Communication Preferences card (.wz-commprefs / -row / -lbl + rrToggleLink); the count sits right,
   the link after it */
.vr-reqinfo .wz-commprefs-lbl svg { flex: 0 0 16px; }   /* .vr-ic's flex-basis 18px would beat the prefs label's 16px icon */
.vr-reqinfo .wz-commprefs-row { row-gap: 0; }
.vr-reqinfo-count { margin-left: auto; font-size: 12px; color: var(--muted); white-space: nowrap; }
.vr-reqinfo .wz-commprefs-row::after { content: ''; flex: 0 0 100%; order: 1; }   /* the link on its own line, right-aligned, under the count (Michael's mock) */
.vr-reqinfo .wz-commprefs-row .rr-viewfull { order: 2; margin-left: auto; }
.vr-reqinfo-body { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--border); }
.vr-reqinfo-body[hidden] { display: none; }
.vr-reqinfo-body .vr-lock { margin: 0 0 14px; }
/* badges carry the LEVEL, sourced from the rule — recommended must not read as blocking */
/* .vr-badge family retired — UI-06 §1.4: .rp-badge tones */

.vr-strip { display: flex; gap: 10px; align-items: flex-start; border-radius: 10px; padding: 12px 14px;
            margin-top: 12px; font-size: 12.5px; line-height: 1.5; }
.vr-strip-go { background: var(--brand-light, #eff6ff); color: #1e40af; }
.vr-strip-ok { background: #f0fdf4; color: #166534; }
.vr-strip-ic { font-size: 15px; }

/* ── lower card: one column per INCOMPLETE rule (completed ones collapse out) ── */
.vr-lower { margin-top: 14px; }
.vr-lock { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--muted); margin: -6px 0 14px; }
.vr-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; }
.vr-col { border: 1px solid var(--border); border-radius: 10px; padding: 14px; }
.vr-col-hd { font-size: 13px; font-weight: 800; margin-bottom: 10px; }
.vr-req-star { color: var(--danger, #dc2626); }
.vr-col-hint { font-size: 11px; color: var(--muted); margin: 8px 0 0; }
.vr-field { display: block; margin-bottom: 10px; }
.vr-field:last-child { margin-bottom: 0; }
.vr-field-lbl { display: block; font-size: 12px; font-weight: 600; margin-bottom: 4px; }
.vr-field input, .vr-field select { width: 100%; padding: 8px 10px; border: 1px solid var(--border);
                                    border-radius: 8px; font-size: 13px; font-family: inherit; }
.vr-saveline { display: flex; align-items: center; gap: 10px; margin-top: 14px; }

/* ── footer actions ── */
.vr-actions { display: flex; align-items: center; justify-content: flex-end; gap: 16px; margin-top: 16px; flex-wrap: wrap; }
.vr-draft { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; margin-right: auto; }
.vr-draft-cap { font-size: 11px; color: var(--muted); }
@media (max-width: 640px) {
  .vr-head { flex-wrap: wrap; }
  .vr-head-prog { width: 100%; justify-content: flex-start; }
  .vr-actions { flex-direction: column-reverse; align-items: stretch; }
  .vr-draft { margin-right: 0; align-items: center; }
}

/* AT3 (2026-07-28): an unsellable POS tile looks unsellable and says why. aria-disabled
   rather than [disabled] on purpose — the Featured star lives INSIDE the tile button and
   must keep working for the owner. Muted, not hidden: a product that is out of stock or
   unpriced still needs to be findable so it can be fixed. */
.pos-tile.is-blocked{opacity:.55;cursor:not-allowed;background:#fafafa}
.pos-tile.is-blocked:hover{border-color:var(--border);box-shadow:none}
.pos-tile-add.is-blocked{background:#f1f5f9;color:#64748b;font-weight:600}

/* RPR-COPILOT-03 §1/§2B (2026-08-26) — the global help & settings search: ⌘K hint, result rows with their actions,
   "Possibly:" (weak) rows, the Ask Co-Pilot row (primary when nothing is confident), the transfer landing flash on the
   Co-Pilot input, and the Open Setting arrival highlight. */
.topbar-search-kbd { flex-shrink: 0; font: 600 10.5px/1 system-ui, sans-serif; color: var(--muted); border: 1px solid var(--border); border-radius: 4px; padding: 3px 5px; background: #fff; }
.topbar-search-results .sr-item { padding: 7px 14px 8px; border-bottom: 1px solid #f1f5f9; }
.topbar-search-results .sr-item:hover { background: #f8fafc; }
.topbar-search-results a.sr-main { display: block; padding: 0; font-size: 13px; color: var(--text); text-decoration: none; }
.topbar-search-results a.sr-main:hover { background: transparent; text-decoration: underline; }
.topbar-search-results .sr-crumb { color: var(--muted); font-size: 11.5px; }
.topbar-search-results .sr-title { font-weight: 600; }
.topbar-search-results .sr-actions { display: flex; gap: 6px; margin-top: 4px; flex-wrap: wrap; }
.topbar-search-results a.sr-act { display: inline-block; padding: 2px 8px; font-size: 11px; border-radius: 10px; border: 1px solid var(--border); color: #1e293b; background: #fff; text-decoration: none; line-height: 1.5; }
.topbar-search-results a.sr-act:hover { background: #f1f5f9; }
.topbar-search-results a.sr-act-show_me_how { border-color: #c4b5fd; color: #5b21b6; background: #f5f3ff; }
.topbar-search-results .sr-item[data-rp-search-weak] { opacity: .72; }
.topbar-search-results .sr-possibly { color: #b45309; background: #fffbeb; border-bottom-color: #fde68a; }
.topbar-search-results .sr-ask { display: block; width: 100%; text-align: left; padding: 9px 14px; font-size: 13px; border: 0; border-top: 1px solid var(--border); background: #faf5ff; color: #5b21b6; cursor: pointer; font-family: inherit; font-weight: 600; }
.topbar-search-results .sr-ask:hover { background: #f3e8ff; }
.topbar-search-results .sr-ask-primary { border-top: 0; border-bottom: 1px solid var(--border); background: #ede9fe; }
.topbar-search-results .sr-ask-lead { color: #6d28d9; font-weight: 500; }
.rp-cp-input-row input.rp-cp-input-flash { animation: rpCpInputFlash 1.2s ease-out; }
@keyframes rpCpInputFlash { 0% { box-shadow: 0 0 0 5px rgba(124,58,237,.55); background: #f5f3ff; } 100% { box-shadow: 0 0 0 0 rgba(124,58,237,0); background: #fff; } }
[data-rp-assist-hl] { outline: 3px solid #7c3aed !important; outline-offset: 2px; transition: outline-color .3s; }
@media (prefers-reduced-motion: reduce) {
  .rp-cp-input-row input.rp-cp-input-flash { animation: none; box-shadow: 0 0 0 3px rgba(124,58,237,.5); }
  [data-rp-assist-hl] { transition: none; }
}

/* ══ UTIL-MONITOR-UI-01 §2/§4 — THE DETECTOR CARDS ══════════════════════════════════════════════════
   §2.4: collapsed by default, showing name, state and a one-line summary of the setting in force.
   Nine collapsed rows is the answer to "thirty fields at once".
   §4.3: ONE alignment rule — label above, field below — held by every field on the panel, so label
   length can no longer decide whether an input sits beside its label or under it. */
.ud-cards { display: flex; flex-direction: column; gap: 6px; }
.ud-card { border: 1px solid var(--border); border-radius: 8px; background: var(--surface, #fff); overflow: hidden; }
.ud-card[open] { border-color: var(--brand); }
.ud-card-hd { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  padding: 9px 12px; cursor: pointer; list-style: none; font-size: 12.5px; }
.ud-card-hd::-webkit-details-marker { display: none; }
.ud-card-hd::before { content: "▸"; color: var(--muted); font-size: 10px; line-height: 1; flex: 0 0 auto; }
.ud-card[open] > .ud-card-hd::before { content: "▾"; }
.ud-card-hd:hover { background: var(--bg); }
.ud-card-name { font-weight: 600; color: var(--text); }
.ud-card-utils { font-size: 10.5px; font-weight: 600; letter-spacing: .4px; text-transform: uppercase; color: var(--muted); }
.ud-card-state { font-size: 11px; font-weight: 600; color: var(--brand); }
.ud-card-state.is-off { color: var(--muted); }
/* the summary takes the rest of the row and drops to its own line when the row runs out */
.ud-card-sum { flex: 1 1 240px; min-width: 0; font-size: 11.5px; color: var(--muted-strong); }
.ud-card-bd { padding: 4px 12px 14px; border-top: 1px solid var(--border);
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px 18px; }

.ud-f { min-width: 0; }
.ud-f-label { display: block; font-size: 11.5px; font-weight: 600; color: var(--text); margin: 8px 0 4px; }
.ud-f-row { display: flex; align-items: center; gap: 6px; }
.ud-f-input { max-width: 96px; }
.ud-f-unit { font-size: 11px; color: var(--muted); }
.ud-f-help { font-size: 10.5px; color: var(--muted); margin-top: 4px; line-height: 1.45; }
.ud-reset { border: 1px solid var(--border); background: none; border-radius: 5px; cursor: pointer;
  font: inherit; font-size: 10.5px; color: var(--muted-strong); padding: 2px 7px; }
.ud-reset:hover { border-color: var(--brand); color: var(--brand); }
.ud-f.is-override .ud-f-input { font-weight: 600; }
.ud-f-derived .ud-f-label { color: var(--muted-strong); }

.ud-advanced { margin-top: 10px; }
.ud-worked { grid-column: 1 / -1; margin: 10px 0 4px; font-size: 12px; color: var(--muted-strong); max-width: 70ch; }
.ud-adv-group { grid-column: 1 / -1; }
.ud-adv-name { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px;
  color: var(--muted-strong); margin: 10px 0 2px; }
.ud-f-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px 18px; }

/* §6.5 — usable at 390: one column, and the summary always gets its own line */
@media (max-width: 620px) {
  .ud-card-bd, .ud-f-grid { grid-template-columns: 1fr; }
  .ud-card-sum { flex-basis: 100%; }
}

/* ══ RPR-WIZ-22-A §4.2 — THE CO-PILOT GUIDED HIGHLIGHT ══════════════════════════════════════════════
   It is the engine's OWN ring (#rp-guide-ring), restyled — not a second highlight system that could
   disagree with the first about what is current (§4.1/§4.2). The class is applied only while the
   section-identification gesture owns it; the ring's ordinary control treatment is untouched. */
#rp-guide-ring.rp-guided-highlight {
  border-color: transparent !important;
  border-radius: 8px;
  background: linear-gradient(96deg, rgba(124,58,237,.14), rgba(14,165,233,.14));
  box-shadow: 0 0 0 1.5px rgba(124,58,237,.45), 0 0 18px 2px rgba(14,165,233,.22);
  transition: opacity .22s ease, box-shadow .22s ease;
}
@media (prefers-reduced-motion: reduce) {
  #rp-guide-ring.rp-guided-highlight { transition: none; }
}

/* ★ RPR-REG-01 ADDENDUM H.2 — THE CONFIRMATION at the head of the registration's VIEW (after a successful payment) */
/* ★ ADDENDUM I.2: the card is the HEAD of the registration tab. HEADER ROW = a darker green band, one line, full width: ✓ the title · paid ·
   receipt · the method, and [Close ✕] at the right — the only control, full size, outlined. STICKY under the fixed 52px top bar: when the card is
   taller than the viewport, the row (and Close) stays on screen while any of the card does — never below the fold. (overflow stays visible on
   the card: a clipped ancestor would switch sticky off.) BODY: H's two columns. FOOTER: the documents, left-aligned. */
.rr-confirm { border: 1px solid #86efac; background: #f0fdf4; border-radius: 12px; padding: 0 18px 14px; margin: 0 0 14px; }
.rr-confirm-hd { position: sticky; top: 52px; z-index: 5; display: flex; flex-wrap: nowrap; align-items: center; gap: 12px 16px; margin: 0 -18px 12px; padding: 10px 18px;
  background: #dcfce7; border-bottom: 1px solid #86efac; border-radius: 11px 11px 0 0; }
.rr-confirm-hd-info { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; min-width: 0; flex: 1 1 auto; }
.rr-confirm-check { font-size: 18px; font-weight: 800; color: #15803d; line-height: 1; }
.rr-confirm-title { font-size: 18px; font-weight: 800; color: #14532d; }
.rr-confirm-sub { font-size: 13.5px; color: #166534; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.rr-confirm-close { flex: 0 0 auto; margin-left: auto; background: #fff; color: #14532d; border: 1.5px solid #15803d; font-weight: 600; }
.rr-confirm-close:hover { background: #f0fdf4; filter: none; }
.rr-open-head { scroll-margin-top: 64px; }
/* ★ I.3: the read-only registration under the confirmation — ONE disclosure, closed */
.rr-details { margin: 0 0 16px; }
.rr-details-sum { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--card-bg, #fff); font-weight: 600; font-size: 13.5px; color: var(--text); margin-bottom: 12px; }
.rr-details-sum::-webkit-details-marker { display: none; }
.rr-details-sum::after { content: '\25B8'; color: var(--muted); transition: transform .12s ease-out; }
.rr-details[open] > .rr-details-sum::after { transform: rotate(90deg); }
/* ★ I.1: the third tab — the registration's label + its × (a Close) */
.rr-regtab { position: relative; display: inline-flex; align-items: center; flex: 0 0 auto; }
.rr-regtab::before { content: ''; position: absolute; left: 0; top: 26%; height: 48%; width: var(--stn-divider, 1px); background: var(--border); opacity: .4; }
.rr-regtab .stn-sub { gap: 6px; padding-right: 4px; }
.rr-regtab-x { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; margin-right: 6px; border-radius: 6px; color: var(--muted); text-decoration: none; font-size: 12px; }
.rr-regtab-x:hover { background: #e2e8f0; color: var(--text); }
.rr-regtab-x:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
/* ★ I (measured at 1024 — the rendered proof): the header row held on ONE line (title 16px, the paid line 12.5px, no wrap) and the three tabs
   inside the strip without its sideways scroll (740px of content): this page's tab labels tighten, the lifecycle badge shows only when it is not
   the everyday "active" (the word badge — Registered / Pending payment — always shows), and in Edit the label is "Registration #N · editing"
   alone (the edit header right below carries both badges). AGENT-RULED — reversal: both badges at every width, the strip scrolling at 1024. */
@media (max-width: 1279px) {
  .rr-confirm-hd { gap: 6px 12px; padding: 8px 14px; }
  .rr-confirm-hd-info { gap: 2px 8px; flex-wrap: nowrap; }
  .rr-confirm-check { font-size: 16px; }
  .rr-confirm-title { font-size: 16px; white-space: nowrap; }
  .rr-confirm-sub { font-size: 12.5px; flex-wrap: nowrap; white-space: nowrap; gap: 5px; }
  .rr-confirm-close { padding: 7px 12px; }
  .rr-tabs .stn-sub { letter-spacing: 0; padding-left: 8px; padding-right: 8px; }
  .rr-regtab .stn-sub { gap: 4px; padding-right: 2px; }
  .rr-regtab-x { margin-right: 2px; }
}
.rr-confirm-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 10px 22px; }
@media (max-width: 900px) { .rr-confirm-body { grid-template-columns: minmax(0, 1fr); } }
.rr-confirm-sum, .rr-confirm-lines { width: 100%; border-collapse: collapse; font-size: 13px; table-layout: fixed; }
.rr-confirm-sum th { text-align: left; color: var(--muted); font-weight: 500; width: 34%; padding: 4px 8px 4px 0; vertical-align: top; }
.rr-confirm-sum td { font-weight: 600; padding: 4px 0; }
.rr-confirm-plan td { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }   /* G.1: the plan on ONE line, the full name on hover */
.rr-confirm-lines th { text-align: left; font-size: 11.5px; letter-spacing: .03em; color: var(--muted); border-bottom: 1px solid #bbf7d0; padding: 4px 0; }
.rr-confirm-lines th span { display: block; font-weight: 400; text-transform: none; letter-spacing: 0; }   /* the note on its own line — at 1024 it ran into AMOUNT */
.rr-confirm-lines th { vertical-align: bottom; }
.rr-confirm-lines th:last-child, .rr-confirm-lines td:last-child { text-align: right; width: 110px; }
.rr-confirm-lines td { padding: 4px 0; border-bottom: 1px solid #dcfce7; }
.rr-confirm-dep { font-size: 11px; color: #6b7280; }
.rr-confirm-totals { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px 26px; font-size: 13.5px; padding-top: 4px; }
.rr-confirm-totals > div > span:first-child { color: var(--muted); margin-right: 6px; }   /* the LABEL only — the PAID badge keeps its own colours */
.rr-confirm-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid #bbf7d0; }
.rr-confirm-msg { font-size: 12.5px; color: var(--text); }
/* ADDENDUM H.2 — the registration's ROW, landed on from the confirmation's [Close]: highlighted until the next landing */
tr.rr-row-landed > td { background: #fef9c3 !important; }
tr.rr-row-landed > td:first-child { box-shadow: inset 4px 0 0 #eab308; }

/* ═══ LAYOUT PASS (RPR-REG-01, Michael 2026-09-25 21:2x — "realign all the steps' columns and cells … perfectly aligned") ═══
   MEASURED by tests/rprreg01_layout_census_drive.js (edges · rows · type · containment · gutters). At a phone width three rows forced the page
   to scroll sideways (123 px at 390): */
/* 1. the wizard header — one column below 1100px, but a `1fr` track keeps its content's MIN width (the five-pip stepper + the action grid,
      478px) → minmax(0,1fr), and at a phone width the pips pack tighter and the action grid wraps */
@media (max-width: 1100px) { .rrnav-bar { grid-template-columns: minmax(0, 1fr); } .rrnav-bar > * { min-width: 0; } }
@media (max-width: 640px) {
  .rrnav-bar { padding: 14px 14px; }
  .rrnav-left { gap: 12px; }
  .rrnav-ico { width: 44px; height: 44px; }
  .rrnav-titles h2 { font-size: 20px; }
  .rrnav-stepper { justify-content: space-between; }
  .rrnav-pip { width: 44px; }
  .rrnav-pip + .rrnav-pip::before { width: 8px; right: calc(50% + 24px); }
  .rrnav-actions, .rrnav-grid { flex-wrap: wrap; grid-template-columns: repeat(2, minmax(0, 1fr)); justify-content: stretch; width: 100%; }
}
/* 2. the registrations tab strip scrolls INSIDE itself (the site's r2 rule), never the page */
.rr-tabs.stnav-r2 { max-width: 100%; min-width: 0; overflow-x: auto; }
/* 3. the shared topbar at a phone width: the park · user · role line (the avatar keeps the initials) yields, and the search box shrinks */
@media (max-width: 640px) {
  .topbar { padding: 0 10px; gap: 8px; }
  .topbar-context { display: none; }
  .topbar-search { min-width: 0; }
  .topbar-right { gap: 6px; flex-shrink: 0; }
}
/* 4. the Billing Cadence tiles — the wrapper is the grid cell, so the tile fills it: one height across the row even when a label wraps
      ("⚡ Smart Stay") */
.res-type-wrap { display: flex; }
.res-type-wrap .res-type { height: 100%; justify-content: center; }
/* 5. a helper line that ends a field group gets air BELOW it before the next label (it sat 4px above "BILLING CADENCE") — bottom-only, so a
      side-by-side row (Arrival · Departure) keeps one top edge (a margin-top here once dropped Departure 12px below Arrival) */
.sp-body .fg:has(> .hint:last-child) { padding-bottom: 8px; }
/* 6. the shared topbar at a phone width (continued): the search keeps its input only; Co-Pilot and Logout become icon buttons (their labels
      are bare text — font-size 0, the icon sized explicitly) */
@media (max-width: 640px) {
  .topbar-search-kbd, .topbar-search-go { display: none; }
  .btn-topbar-help, .btn-topbar-logout { font-size: 0; gap: 0; padding: 7px 9px; }
  .btn-topbar-help svg, .btn-topbar-logout svg { width: 16px; height: 16px; }
}