/* NVR Staff dashboard. FareHarbor-like compact look with NVR branding (decisions D21, D22; master §17 "Staff visual
   design"): a compact NVR-blue navigation bar, white content surfaces, restrained pale-blue actions, subtle 1 px gray
   separators, aligned rows with tabular numbers. Mobile first: cards on phones, tables from 761px. 44px touch targets,
   visible focus, text beside every status colour. Scoped to the staff app only (served as /staff/assets/styles.css;
   the public website has its own stylesheet and never loads this one). */

/* Roboto, the first family of --font, is NVR's self-hosted copy (fonts/, SIL OFL), loaded by app.mjs with the asset
   version (PERF-5) — this stylesheet declares no font files. */

:root {
  /* Brand (the public site's palette, assets/site.css). */
  --navy: #0B2545; --navy-2: #122F5A; --blue: #0066CC; --blue-d: #0052A8; --cta: #1273E6; --cta-d: #0B5FC4;
  --sky: #EAF3FC; --sky-2: #D6E6F7; --hi: #8CC8FF; --accent: #F5A524;

  /* Surfaces and lines. */
  --bar: #0066CC; --bar-2: #0052A8; --bar-3: #004A99; --bar-ink: #FFFFFF;   /* the NVR-blue top navigation bar */
  --ink: #16202B; --muted: #5C6B7A; --bg: #FFFFFF; --panel: #FFFFFF; --subtle: #F6F8FB;
  --tint: #FAFCFE;          /* tiles and previews, a hair off white */
  --warn-tint: #FFFCF7;     /* a pending band in a list, a hair off white */
  --ink-inverse: #FFFFFF;
  /* Owner-approved staff status colours (handoff v3 §11A, 2026-09-29; sampled from the FareHarbor reference images):
     solid red for Due / Cancelled, solid green for Paid / Confirmed, white text. One token set for every staff surface. */
  --status-red: #C02C2C; --status-green: #1D8759; --status-orange: #F27F24; --status-on: #FFFFFF;
  /* Owner v3 batch (2026-10-05): tags, attention list, fleet feed, report chart and table heads. */
  --tag-bg: #E8F0FB; --tag-ink: #1A56A8; --attn-bg: #FFFBF2; --attn-bd: #F3D9A8; --attn-line: #F6E6C5; --attn-ink: #92400E; --attn-num: #B45309;
  --comment-bg: #FFFBE6; --transfer-bg: #F4F8FD; --soft-bg: #F8FAFC; --head-bg: #F3F5F8; --late-bg: #FDF2F2; --status-red-d: #A32424;
  --chart-line: #1565C0; --chart-area: #B3CEF0; --chart-grid: #E3E8EF; --chart-axis: #5C6B7A; --menu-shadow: 0 6px 18px rgba(11, 37, 69, .14);   /* text on a strong fill (navy, info) */
  /* Separators are decorative (--line, --line-2); a form field's border identifies the control, so --input-bd keeps at
     least 3:1 against white and --subtle (WCAG 2.2 SC 1.4.11 — test/pass2-shell-gaps.test.mjs checks every pair). */
  --line: #E1E7EF; --line-2: #C9D3DF; --input-bd: #768396;
  --action-bg: #EAF3FC; --action-bg-h: #D6E6F7; --action-ink: #0052A8;      /* pale-blue actions: blue text on very light blue */
  /* Review checkout rail (2026-09-30, FareHarbor-style layout in NVR's own tokens): light-gray rail, white groups, pale-blue selection */
  --cr-bg: #F4F6F8; --cr-bd: #D5DBE1; --cr-sel: #E6F0FA; --cr-sel-ink: #1565C0; --cr-ink: #1F2933; --cr-muted: #5F6B76; --cr-blue: #1572D3; --cr-blue-d: #0F5FB3;
  --cr-star: #E2541B; --cr-star-bg: #EEF1F4; --cr-green: #2E7D4F; --cr-btn2: #DCE1E6; --cr-div: #E7EBEF; --cr-off: #9AA5B1; --cr-card-bd: #B8C2CC; --cr-field: #FAFBFC; --cr-focus: rgba(21, 114, 211, .2);
  --drw-shadow: -8px 0 24px rgba(11, 37, 69, .14);                         /* booking action drawers (right-side panel) */
  --comment-bg: #FFF8DB; --comment-bd: #E3C04B;                             /* a staff comment row: pale yellow (final master prompt §30) */

  /* Status tones: text / background / border. Every pair is at least 4.5:1. Neutral routine, green confirmed / paid /
     completed, amber pending (dashed) and needs-action, red real outstanding / overdue / failed. */
  --ok: #146C2E; --ok-bg: #E7F6EC; --ok-bd: #9FD4AF;
  --warn: #8A4B08; --warn-bg: #FFF4E5; --warn-bd: #F2C27B;
  --danger: #A3190F; --danger-bg: #FDECEA; --danger-bd: #F1A9A2;
  --info: #0B4A8B; --info-bg: #EAF3FC; --info-bd: #A9CBEE;
  --pending: #7A4A00; --pending-bg: #FFF8E6; --pending-bd: #E2B24A;
  --neutral: #344054; --neutral-bg: #F2F4F7; --neutral-bd: #C9D0DA;
  --muted-t: #475467; --muted-bg: #F9FAFB; --muted-bd: #D0D5DD;
  --sim: #5B1A8F; --sim-bg: #F3E8FF; --sim-bd: #C9A2EE;
  /* Security Hold at the top of a booking (owner rule 2026-10-05): white text on green (held) / red ($0). */
  --hold-held: #1D8759; --hold-none: #C02C2C;

  /* Typography (D22): FareHarbor's verified stack. Roboto is not self-hosted (no font download): it renders where it is
     installed (Android, many desktops); elsewhere the same system fallbacks FareHarbor uses apply. The TEST MODE panel
     names the face this device actually renders (app.mjs FONT_STACK — keep it equal to this list). */
  --font: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --fw-regular: 400; --fw-medium: 500; --fw-bold: 700;
  --fs-body: 1rem;        /* 16 px mobile body text (15 px from 761 px) */
  --fs-data: .875rem;     /* 14 px desktop data rows */
  --fs-input: 1rem;       /* 16 px form inputs everywhere (no zoom on phones) */
  --fs-small: .8125rem;   /* 13 px secondary text */
  --fs-title: 1.25rem;    /* 20 px primary titles on phones, 22 px from 761 px */
  --fs-h2: 1.0625rem;

  --r: 8px; --r-sm: 6px;
  --shadow: 0 1px 2px rgba(16, 24, 40, .05);
  --shadow-pop: 0 12px 32px rgba(11, 37, 69, .22);
  --shadow-float: 0 6px 20px rgba(11, 37, 69, .3);   /* a bar floating over the page (phone price bar) */
  --tap: 44px;
  --topbar-h: 56px;
  --bottomnav-h: 60px;
  --page-max: 1560px;
  color-scheme: light;
}
@media (min-width: 761px) {
  :root { --fs-body: .9375rem; --fs-title: 1.375rem; --fs-h2: 1.125rem; }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.5 var(--font); font-weight: var(--fw-regular); -webkit-font-smoothing: antialiased; }
@media (min-width: 761px) { body { font-size: var(--fs-body); } }
[hidden] { display: none !important; }
a { color: var(--blue); text-underline-offset: 2px; }
a:hover { color: var(--blue-d); }
h1, h2, h3 { color: var(--navy); line-height: 1.25; margin: 0 0 .5rem; }
h1 { font-size: var(--fs-title); font-weight: var(--fw-bold); }
h2 { font-size: var(--fs-h2); font-weight: var(--fw-medium); }
h3 { font-size: 1rem; font-weight: var(--fw-medium); margin-top: 1rem; }
p { margin: 0 0 .75rem; }
strong, b { font-weight: var(--fw-bold); }
code, pre { font-family: var(--mono); font-size: .875rem; }
button, input, select, textarea { font: inherit; color: inherit; }
img, svg { flex-shrink: 0; }
.icon { display: inline-block; vertical-align: middle; }
.muted { color: var(--muted); }
.small { font-size: var(--fs-small); }
.num { font-variant-numeric: tabular-nums; text-align: right; }
.tnum { font-variant-numeric: tabular-nums; }
.stack { display: flex; flex-direction: column; gap: 2px; }
.stack-lg { display: flex; flex-direction: column; gap: 16px; }
.vh { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Focus: always visible, 3px, on light and dark surfaces. */
:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.topbar :focus-visible { outline-color: #fff; }
.topbar .menu :focus-visible, .topbar .envpanel :focus-visible, .topbar .locswitch :focus-visible, .topbar .gsearch :focus-visible { outline-color: var(--blue); }
:focus:not(:focus-visible) { outline: none; }
h1[tabindex="-1"]:focus, h2[tabindex="-1"]:focus, main:focus { outline: none; }

.skip-link { position: absolute; left: 8px; top: -60px; z-index: 100; background: #fff; color: var(--navy); padding: 10px 16px; border-radius: var(--r-sm); font-weight: var(--fw-bold); }
.skip-link:focus { top: 8px; }

/* ─── Boot / sign-in (no shell) ───────────────────────────────────────────────────────────────── */
.boot, .bare-root { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; background: var(--subtle); }
.boot { color: var(--muted); text-align: center; }
.noscript { max-width: 520px; margin: 40px auto; padding: 16px; background: var(--warn-bg); color: var(--warn); border: 1px solid var(--warn-bd); border-radius: var(--r); }
.wordmark-static { font-weight: var(--fw-bold); font-size: 1.4rem; color: var(--navy); letter-spacing: .02em; margin-bottom: 1rem; }
.wordmark-static .wm-nvr { color: var(--blue); }
.signin-card { width: 100%; max-width: 460px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-pop); padding: 28px 24px; }
.signin-card h1 { font-size: 1.5rem; }
.signin-card .btn-block { margin: 8px 0 16px; }
.signin-card .notice { margin-bottom: 16px; }
.signin-card .hint + .hint { margin-top: 8px; }

/* ─── Top bar (NVR blue): wordmark · navigation · TEST MODE · location · search · account ─────── */
/* It never makes the page scroll sideways: the row wraps instead of overflowing, the location and search may shrink,
   and below 1100px the search collapses into an icon button whose field opens on its own row (see the media rules).
   Up to 1599px the navigation is the bar's second row; from 1600px everything shares one row. */
.topbar { position: sticky; top: 0; z-index: 40; background: var(--bar); color: var(--bar-ink); box-shadow: 0 1px 0 rgba(0, 0, 0, .12); }
.topbar-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; min-height: var(--topbar-h); padding: 6px 16px 0; padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); max-width: var(--page-max); margin: 0 auto; }
.topbar-row > .wordmark, .topbar-row > .envbadge, .topbar-row > .usermenu, .topbar-row > .search-toggle { flex-shrink: 0; }
/* Visual order (single-class selectors, so the width rules below can change it). */
.wordmark { order: 0; }
.envbadge { order: 1; }
.locswitch { order: 2; }
.search-toggle { order: 3; }
.gsearch { order: 4; }
.usermenu { order: 5; }
.mainnav { order: 10; }
.wordmark { display: inline-flex; align-items: center; gap: 6px; color: #fff; text-decoration: none; font-weight: var(--fw-bold); font-size: 1.15rem; letter-spacing: .02em; min-height: var(--tap); white-space: nowrap; }
.wordmark:hover { color: #fff; }
.wm-nvr { color: #fff; }
.wm-staff { font-weight: var(--fw-regular); opacity: .92; }

.envbadge { position: relative; }
.envbadge > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; min-height: var(--tap); padding: 4px 12px; border-radius: 999px; background: var(--accent); color: #1F1300; font-weight: var(--fw-bold); font-size: .75rem; letter-spacing: .04em; white-space: nowrap; }
.envbadge > summary::-webkit-details-marker { display: none; }
.env-short { display: none; }
.envpanel { position: absolute; left: 0; top: calc(100% + 8px); z-index: 60; width: min(340px, calc(100vw - 32px)); background: #fff; color: var(--ink); border-radius: var(--r); box-shadow: var(--shadow-pop); padding: 14px 16px; font-size: .9rem; }
.envpanel ul { margin: 0 0 .75rem; padding-left: 1.2rem; }
.envpanel-sub { font-weight: var(--fw-bold); margin-bottom: .25rem; }

/* The active location stays visible on every screen and width. */
.locswitch { display: inline-flex; align-items: center; gap: 6px; background: #fff; color: var(--navy); border-radius: 999px; padding: 0 6px 0 12px; min-height: var(--tap); min-width: 0; max-width: 100%; }
.locswitch-label { font-size: .6875rem; font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.loc-select { border: 0; background: transparent; font-weight: var(--fw-bold); color: var(--navy); min-height: var(--tap); padding: 0 28px 0 4px; max-width: 220px; min-width: 0; text-overflow: ellipsis; cursor: pointer; appearance: none; -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--navy) 50%), linear-gradient(135deg, var(--navy) 50%, transparent 50%);
  background-position: calc(100% - 14px) 55%, calc(100% - 9px) 55%; background-size: 5px 5px; background-repeat: no-repeat; }
.locswitch.single { padding-right: 14px; }
.loc-name { font-weight: var(--fw-bold); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.gsearch { flex: 1 1 200px; display: flex; align-items: center; gap: 8px; position: relative; min-width: 0; max-width: 520px; margin-left: auto; }
.gsearch > .icon { position: absolute; left: 12px; color: var(--muted); pointer-events: none; }
.gsearch .search-input { padding-left: 40px; border-color: transparent; min-width: 0; }
.gsearch-go { flex-shrink: 0; }
.search-toggle { display: none; }
/* Owner corrections (2026-10-04, FareHarbor pattern): a compact "Search bookings" box with the Recent bookings button
   right beside it (36px on desktop; phones keep 44px targets). */
.gsearch { gap: 6px; max-width: 380px; min-height: var(--tap); }   /* the 36px box sits centred in a 44px row slot */
.gsearch .search-input { min-height: 36px; height: 36px; padding: 0 10px 0 36px; border-radius: 4px; font-size: 14px; }
.gsearch .search-input::placeholder { color: var(--muted); }
.gsearch > .icon { left: 11px; }
.recent-btn { flex: none; display: inline-grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 1px solid var(--line-2); border-radius: 4px; background: var(--subtle); color: var(--ink); cursor: pointer; }
.recent-btn:hover, .recent-btn[aria-expanded="true"] { background: var(--bg); }
.recent-panel { position: absolute; top: calc(100% + 8px); right: 0; z-index: 90; width: 360px; max-width: calc(100vw - 16px); max-height: min(72vh, 680px); overflow-y: auto;
  border: 1px solid var(--cr-bd); border-radius: 6px; background: var(--bg); color: var(--cr-ink); box-shadow: var(--shadow-pop); font-size: 14px; line-height: 20px; }
.recent-panel[hidden] { display: none; }
.rb-head { position: sticky; top: 0; margin: 0; padding: 10px 16px; border-bottom: 1px solid var(--cr-div); background: var(--bg); color: var(--cr-muted); font-size: 12px; font-weight: var(--fw-medium); letter-spacing: .04em; text-transform: uppercase; }
.rb-empty { margin: 0; padding: 14px 16px; color: var(--cr-muted); }
.rb-item { display: flex; flex-direction: column; gap: 2px; padding: 12px 16px; border-bottom: 1px solid var(--cr-div); color: var(--cr-ink); text-decoration: none; }
.rb-item:hover, .rb-item:focus-visible { background: var(--cr-sel); outline: none; }
.rb-item.is-ended .rb-name { color: var(--cr-muted); }
.rb-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.rb-name { font-size: 16px; line-height: 22px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rb-line { color: var(--cr-muted); font-size: 13px; }
.rb-when { display: inline-block; padding: 0 4px; border: 1px solid var(--line-2); border-radius: 3px; font-size: 12px; line-height: 16px; }
.rb-when.is-past { border-color: var(--warn-bd); color: var(--warn); }
.rb-when.is-today { border-color: var(--info-bd); color: var(--info); }
.rb-when.is-next { border-color: var(--ok-bd); color: var(--ok); }
.rb-src { display: inline-flex; align-items: center; gap: 4px; color: var(--cr-muted); font-size: 12px; font-weight: var(--fw-medium); }
.rb-meta { color: var(--cr-muted); font-size: 12px; }
.rb-more { display: block; margin: 8px 16px 12px; padding: 4px 0; border: 0; background: none; color: var(--cr-blue); font: inherit; font-size: 14px; text-decoration: underline; cursor: pointer; }
.rb-more:disabled { color: var(--cr-muted); cursor: progress; }
@media (max-width: 760px) {
  .gsearch .search-input { min-height: var(--tap); height: var(--tap); font-size: 16px; }
  .recent-btn { width: var(--tap); height: var(--tap); }
}

.usermenu { position: relative; min-width: 0; }
.usermenu > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; min-height: var(--tap); padding: 4px 8px; border-radius: 999px; color: #fff; max-width: 100%; }
.usermenu > summary::-webkit-details-marker { display: none; }
.usermenu > summary:hover { background: var(--bar-2); }
.usermenu-name { max-width: 160px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: var(--fw-medium); }

/* Medium widths (tablets, small laptops): the search becomes an icon button that opens a full-width field, the
   environment badge uses its short label and the name is shortened (then hidden: the menu shows it in full). */
@media (max-width: 1100px) {
  .env-long { display: none; }
  .env-short { display: inline; }
  .usermenu-name { max-width: 110px; }
  .search-toggle { order: 3; margin-left: auto; display: inline-grid; place-items: center; width: var(--tap); height: var(--tap); border: 0; border-radius: 50%; background: var(--bar-2); color: #fff; cursor: pointer; }
  .search-toggle:hover { background: var(--bar-3); }
  .usermenu { order: 4; }
  .gsearch { order: 7; display: none; flex: 1 0 100%; max-width: none; margin: 0 0 4px; }
  .topbar.search-open .gsearch { display: flex; }
}
@media (max-width: 900px) {
  .usermenu-name { display: none; }
}
.avatar { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: #fff; color: var(--blue-d); font-weight: var(--fw-bold); font-size: .8rem; }
.menu { position: absolute; right: 0; top: calc(100% + 8px); z-index: 60; min-width: 250px; background: #fff; color: var(--ink); border-radius: var(--r); box-shadow: var(--shadow-pop); padding: 8px; }
.menu-id { display: flex; flex-direction: column; padding: 8px 10px 10px; border-bottom: 1px solid var(--line); margin-bottom: 6px; font-size: .9rem; word-break: break-word; }
.menu-item { display: flex; align-items: center; gap: 10px; width: 100%; min-height: var(--tap); padding: 0 10px; border: 0; background: none; border-radius: var(--r-sm); color: var(--ink); text-decoration: none; cursor: pointer; text-align: left; font-size: var(--fs-body); }
.menu-item:hover { background: var(--sky); color: var(--navy); }
.menu-item[aria-current="page"] { background: var(--sky); color: var(--blue-d); font-weight: var(--fw-medium); }
.menu-sep { border: 0; border-top: 1px solid var(--line); margin: 6px 0; }

/* Main navigation: inside the blue bar on desktop (its second row up to 1599px, the same row from 1600px); a bottom tab
   bar with a "More" menu on phones. */
.mainnav { flex: 1 0 100%; min-width: 0; margin: 0 -8px; }
.mainnav ul { display: flex; gap: 2px; list-style: none; margin: 0; padding: 0; overflow-x: auto; scrollbar-width: none; }
.mainnav ul::-webkit-scrollbar { display: none; }
.nav-link { display: inline-flex; align-items: center; gap: 8px; min-height: var(--tap); padding: 0 12px; color: #fff; text-decoration: none; font-weight: var(--fw-medium); font-size: .875rem; letter-spacing: .01em; border-bottom: 3px solid transparent; white-space: nowrap; }
.nav-link:hover { color: #fff; background: var(--bar-2); }
.nav-link[aria-current="page"] { color: #fff; background: var(--bar-3); border-bottom-color: #fff; }
/* Nav add-on (2026-09-29): a small white line icon beside each label on the desktop bar (the phone bar sizes it below). */
.nav-link > .icon { width: 18px; height: 18px; flex: none; }
.mainnav .nav-secondary, .mainnav .nav-more { display: none; }
/* The focus ring sits inside each link: the list scrolls sideways (overflow-x: auto), which clips a ring drawn outside. */
@media (min-width: 761px) { .mainnav .nav-link:focus-visible { outline-offset: -3px; } }
@media (min-width: 1600px) {
  .topbar-row { padding-bottom: 0; max-width: 1880px; }
  .topbar-row > .mainnav { order: 1; flex: 0 1 auto; margin: 0; align-self: stretch; }
  .mainnav ul { height: 100%; align-items: stretch; }
  .nav-link { height: 100%; }
  .topbar-row > .envbadge { order: 2; margin-left: auto; }
  .gsearch { margin-left: 0; max-width: 380px; flex: 1 1 180px; }
  .env-long { display: none; }
  .env-short { display: inline; }
  .usermenu-name { max-width: 110px; }
  /* Nav add-on: with the icons the bar must still be one row from 1600 px (never taller) — compact link spacing,
     16 px icons, a narrower location picker. */
  .nav-link { padding: 0 9px; gap: 6px; }
  .nav-link > .icon { width: 16px; height: 16px; }
  .locswitch { max-width: 250px; }
}

.route-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 80; pointer-events: none; opacity: 0; background: linear-gradient(90deg, var(--hi), #fff, var(--hi)); background-size: 200% 100%; transition: opacity .15s; }
.route-progress.active { opacity: 1; animation: progress 1.1s linear infinite; }
@keyframes progress { from { background-position: 200% 0; } to { background-position: 0 0; } }

/* ─── Page layout ─────────────────────────────────────────────────────────────────────────────── */
.main { max-width: var(--page-max); margin: 0 auto; padding: 16px 24px 48px; padding-left: max(24px, env(safe-area-inset-left)); padding-right: max(24px, env(safe-area-inset-right)); }
.page-head { margin-bottom: 12px; }
.page-head-row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 8px 12px; }
.page-head-text p { margin: 0; }
.page-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.back-link { display: inline-flex; align-items: center; gap: 4px; min-height: var(--tap); font-weight: var(--fw-medium); text-decoration: none; margin-bottom: 2px; }

.subnav { margin: -4px 0 12px; border-bottom: 1px solid var(--line); }
.subnav ul { display: flex; gap: 4px; list-style: none; margin: 0; padding: 0; overflow-x: auto; scrollbar-width: thin; }
.subnav-link { display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 14px; border-bottom: 3px solid transparent; color: var(--ink); text-decoration: none; font-weight: var(--fw-medium); white-space: nowrap; }
.subnav-link:hover { color: var(--blue-d); background: var(--sky); }
.subnav-link[aria-current="page"] { color: var(--blue-d); border-bottom-color: var(--blue); }

.panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); padding: 14px 16px; margin-bottom: 16px; }
.stack-lg > .panel { margin-bottom: 0; }
.panel-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin-bottom: 10px; }
.panel-head h2 { margin: 0; }
.panel-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 12px; }
.actions, .form-actions, .filter-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }

/* ─── Buttons ─────────────────────────────────────────────────────────────────────────────────── */
/* Primary: solid NVR blue for the one main action. Secondary: restrained pale blue (blue text on very light blue). */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--tap); padding: 0 16px; border-radius: var(--r-sm); border: 1px solid transparent; font-weight: var(--fw-medium); font-size: .9375rem; line-height: 1.1; text-decoration: none; cursor: pointer; white-space: nowrap; transition: background-color .12s, border-color .12s; }
.btn:active { transform: translateY(1px); }
.btn[disabled], .btn[aria-busy="true"] { opacity: .6; cursor: not-allowed; transform: none; }
.btn-primary { background: var(--cta); color: #fff; }
.btn-primary:hover { background: var(--cta-d); color: #fff; }
.btn-secondary { background: var(--action-bg); color: var(--action-ink); border-color: transparent; }
.btn-secondary:hover { background: var(--action-bg-h); color: var(--action-ink); }
.btn-danger { background: var(--danger); color: #fff; }
.btn-danger:hover { background: #7F140C; color: #fff; }
.btn-danger-outline { background: #fff; color: var(--danger); border-color: var(--danger-bd); }
.btn-danger-outline:hover { background: var(--danger-bg); }
.btn-link, .btn.btn-link { background: none; border: 0; padding: 0 4px; min-height: 32px; color: var(--blue); font-weight: var(--fw-medium); text-decoration: underline; cursor: pointer; }
.btn-sm { min-height: 36px; padding: 0 12px; font-size: .875rem; }
.btn-lg { min-height: 52px; font-size: 1.05rem; }
.btn-block { display: flex; width: 100%; white-space: normal; text-align: center; }
.btn-icon { padding: 0; width: var(--tap); }
@media (pointer: coarse) { .btn-sm, .btn-link, .btn.btn-link { min-height: var(--tap); } }

/* ─── Badges and notices (status colour always comes with a text label) ────────────────────────── */
.badge { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border-radius: 999px; border: 1px solid; font-size: .75rem; font-weight: var(--fw-medium); line-height: 1.5; white-space: nowrap; vertical-align: middle; }
.tone-ok { color: var(--ok); background: var(--ok-bg); border-color: var(--ok-bd); }
.tone-warn { color: var(--warn); background: var(--warn-bg); border-color: var(--warn-bd); }
.tone-danger { color: var(--danger); background: var(--danger-bg); border-color: var(--danger-bd); }
.tone-info { color: var(--info); background: var(--info-bg); border-color: var(--info-bd); }
.tone-pending { color: var(--pending); background: var(--pending-bg); border-color: var(--pending-bd); border-style: dashed; }
.tone-neutral { color: var(--neutral); background: var(--neutral-bg); border-color: var(--neutral-bd); }
.tone-muted { color: var(--muted-t); background: var(--muted-bg); border-color: var(--muted-bd); }
/* Due / Cancelled (red) and Paid / Confirmed (green): solid, full opacity, white text, always with the word. */
.badge.tone-red { color: var(--status-on); background: var(--status-red); border-color: var(--status-red); font-weight: var(--fw-bold); }
.badge.tone-green { color: var(--status-on); background: var(--status-green); border-color: var(--status-green); font-weight: var(--fw-bold); }
/* Overpaid $X (owner v3 §7, FareHarbor orange): solid #F27F24 with white text — never "Paid" when money is owed back. */
.badge.tone-orange { color: var(--status-on); background: var(--status-orange); border-color: var(--status-orange); font-weight: var(--fw-bold); }
/* The secondary badge beside a status (e.g. Paid beside Cancelled): smaller by spacing, never by unreadable text. */
.badge.is-secondary { padding: 0 6px; line-height: 1.35; }
.badges-pair { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.tone-sim { color: var(--sim); background: var(--sim-bg); border-color: var(--sim-bd); }
.sim-badge, .awaiting-badge { letter-spacing: .03em; }
.notice { border: 1px solid; border-left-width: 4px; border-radius: var(--r-sm); padding: 10px 14px; margin: 0 0 12px; }
.notice p:last-child, .notice ul:last-child { margin-bottom: 0; }
.notice ul { margin: .25rem 0 0; padding-left: 1.2rem; }
.notice .badge { margin-right: 4px; }

.save-ind { display: inline-flex; align-items: center; gap: 6px; font-weight: var(--fw-bold); font-size: .9rem; min-height: 24px; }
.save-ind.tone-ok, .save-ind.tone-danger, .save-ind.tone-pending { background: none; border: 0; }
.save-ind:empty { display: none; }

.spinner { display: inline-block; width: 16px; height: 16px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: spin .8s linear infinite; vertical-align: middle; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Toasts sit above the reservation workspace dialog (z-index 70) and everything else except native modal dialogs. */
.toast-region { position: fixed; z-index: 90; left: 50%; transform: translateX(-50%); bottom: 20px; width: min(520px, calc(100vw - 32px)); display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
.toast { pointer-events: auto; display: flex; align-items: center; gap: 12px; padding: 12px 12px 12px 16px; border-radius: var(--r); border: 1px solid; box-shadow: 0 8px 24px rgba(11, 37, 69, .2); font-weight: var(--fw-medium); }
.toast-msg { flex: 1; }
.toast-close { border: 0; background: none; color: inherit; min-width: var(--tap); min-height: var(--tap); display: grid; place-items: center; cursor: pointer; border-radius: var(--r-sm); }

/* ─── States ──────────────────────────────────────────────────────────────────────────────────── */
.state { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; padding: 28px 16px; color: var(--muted); background: var(--panel); border: 1px dashed var(--line-2); border-radius: var(--r); }
.state h1 { color: var(--navy); }
.state p { margin: 0; max-width: 560px; }
.state-loading { flex-direction: row; border-style: solid; border-color: transparent; background: none; }
.state-error { color: var(--danger); border-color: var(--danger-bd); background: var(--danger-bg); }
.state-error h1 { color: var(--danger); }
.state .btn, .state .actions { margin-top: 8px; }

/* ─── Responsive list: table ≥ 761px, cards below ─────────────────────────────────────────────── */
/* position: relative makes the scrolling wrapper the containing block of the badges' visually-hidden labels
   (.vh is absolutely positioned), so they cannot escape the sideways scroll and widen the page. */
.rtable-wrap { position: relative; overflow-x: auto; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); }
.rtable { width: 100%; border-collapse: collapse; font-size: var(--fs-data); }
.rtable th, .rtable td { padding: 8px 12px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.rtable thead th { position: sticky; top: 0; background: var(--subtle); color: var(--muted); font-size: .8125rem; font-weight: var(--fw-medium); white-space: nowrap; }
.rtable tbody th { font-weight: var(--fw-regular); }
.rtable tbody tr:last-child > * { border-bottom: 0; }
.rtable tr.clickable { cursor: pointer; }
.rtable tr.clickable:hover > * { background: var(--sky); }
.rtable .num { text-align: right; font-variant-numeric: tabular-nums; }
.row-link { display: inline; padding: 0; border: 0; background: none; color: var(--blue-d); font: inherit; font-weight: var(--fw-medium); text-align: left; cursor: pointer; text-decoration: none; }
.row-link:hover { text-decoration: underline; }
.row-link .stack strong, .stretch .stack strong { color: var(--blue-d); }
.rcards { display: none; list-style: none; margin: 0; padding: 0; gap: 8px; }
.rcard { position: relative; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 12px 14px; }
.rcard-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; margin-bottom: 6px; }
.rcard-title { font-weight: var(--fw-bold); min-width: 0; overflow-wrap: anywhere; }
.rcard-badges { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; }
.rcard-body { margin: 0; display: grid; gap: 4px; }
.rcard-row { display: grid; grid-template-columns: minmax(96px, 38%) 1fr; gap: 8px; font-size: .92rem; }
.rcard-row dt { color: var(--muted); }
.rcard-row dd { margin: 0; overflow-wrap: anywhere; }
.stretch { display: inline; padding: 0; border: 0; background: none; color: var(--blue-d); font: inherit; font-weight: var(--fw-bold); text-align: left; cursor: pointer; text-decoration: none; }
.stretch::after { content: ""; position: absolute; inset: 0; border-radius: var(--r); }
.rcard.clickable:hover { border-color: var(--blue); }
.rcard .btn, .rcard a:not(.stretch), .rcard input, .rcard select, .rcard summary { position: relative; z-index: 2; }

.pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-top: 12px; }
.pager-info { color: var(--muted); font-size: .9rem; margin: 8px 0 0; }
.pager .pager-info { margin: 0; }

/* ─── Controls ────────────────────────────────────────────────────────────────────────────────── */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line-2); background: #fff; color: var(--ink); font-weight: var(--fw-medium); cursor: pointer; }
.chip:hover { border-color: var(--blue); }
.chip[aria-pressed="true"] { background: var(--blue-d); border-color: var(--blue-d); color: #fff; }
.chip-count { font-size: .8rem; padding: 0 7px; border-radius: 999px; background: var(--neutral-bg); color: var(--neutral); font-variant-numeric: tabular-nums; }
.chip[aria-pressed="true"] .chip-count { background: var(--bar-3); color: #fff; }
@media (pointer: coarse) { .chip { min-height: var(--tap); } }

.datenav { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.datenav .input { width: auto; }

/* Employee picker (ui.personPicker): "Me" / "No one" shortcuts, a search box for longer lists, a native select. */
.picker { gap: 6px; }
.picker-quick { display: flex; flex-wrap: wrap; gap: 8px; }
.picker-quick:empty { display: none; }
.picker-quick .chip { min-height: 40px; }
.picker-count { margin: 0; }
.picker-count:empty { display: none; }
@media (pointer: coarse) { .picker-quick .chip { min-height: var(--tap); } }

/* ─── Forms ───────────────────────────────────────────────────────────────────────────────────── */
.form { display: flex; flex-direction: column; gap: 14px; }
.field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.field > label, .fieldset > legend { font-weight: var(--fw-medium); color: var(--ink); }
.req { font-weight: var(--fw-regular); color: var(--muted); font-size: .875rem; }
.hint { color: var(--muted); font-size: .875rem; margin: 0; }
.field-error { color: var(--danger); font-weight: var(--fw-bold); font-size: .9rem; margin: 0; }
.input { width: 100%; min-height: var(--tap); padding: 8px 12px; border: 1px solid var(--input-bd); border-radius: var(--r-sm); background: #fff; color: var(--ink); font-size: var(--fs-input); }
textarea.input { min-height: 88px; resize: vertical; }
select.input { padding-right: 32px; }
.input:hover { border-color: var(--muted); }
.input:focus-visible { outline: 3px solid var(--blue); outline-offset: 0; border-color: var(--blue); }
.input[aria-invalid="true"] { border-color: var(--danger); box-shadow: inset 0 0 0 1px var(--danger); }
.input[disabled], .input[readonly] { background: var(--neutral-bg); color: var(--muted); }
.fieldset { border: 1px solid var(--line); border-radius: var(--r-sm); padding: 10px 12px 12px; margin: 0; }
.fieldset.is-disabled .check-grid { opacity: .55; }
.check-label { display: flex; align-items: flex-start; gap: 10px; min-height: var(--tap); padding: 10px 0; cursor: pointer; font-weight: var(--fw-regular); }
.field-check > .hint { margin-left: 34px; }
.checkbox { width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--cta); flex-shrink: 0; }
.switch { appearance: none; -webkit-appearance: none; flex-shrink: 0; width: 46px; height: 26px; border-radius: 999px; background: var(--line-2); position: relative; cursor: pointer; margin: 0; transition: background-color .15s; border: 1px solid var(--muted); }
.switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .3); transition: left .15s; }
.switch:checked { background: var(--ok); border-color: var(--ok); }
.switch:checked::after { left: 22px; }
.switch[disabled] { opacity: .5; cursor: not-allowed; }
.check-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 0 16px; max-height: 280px; overflow-y: auto; }
.filters { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px 16px; align-items: end; }
.filters .field-check { align-self: end; }
.filters-panel .chips { margin-top: 12px; }
.inline-form { max-width: 520px; }
.form-error { margin-bottom: 0; }
.form-error p { margin: 0; }

/* ─── Dialogs ─────────────────────────────────────────────────────────────────────────────────── */
/* Native <dialog> (top layer): always above the reservation workspace dialog below. */
.dlg { width: min(560px, calc(100vw - 24px)); max-height: calc(100vh - 32px); padding: 0; border: 0; border-radius: 12px; box-shadow: 0 24px 64px rgba(11, 37, 69, .35); color: var(--ink); }
.dlg-wide { width: min(760px, calc(100vw - 24px)); }
.dlg::backdrop { background: rgba(11, 37, 69, .5); }
.dlg-fallback { position: fixed; inset: 16px; margin: auto; z-index: 95; height: fit-content; }
.dlg-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px 8px; position: sticky; top: 0; background: #fff; z-index: 1; }
.dlg-head h2 { margin: 0; font-size: 1.2rem; overflow-wrap: anywhere; }
.dlg-close { border: 0; background: none; min-width: var(--tap); min-height: var(--tap); display: grid; place-items: center; border-radius: var(--r-sm); color: var(--muted); cursor: pointer; }
.dlg-close:hover { background: var(--neutral-bg); color: var(--ink); }
.dlg-body { padding: 4px 18px 12px; overflow-wrap: anywhere; }
.dlg-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; padding: 12px 18px 16px; border-top: 1px solid var(--line); position: sticky; bottom: 0; background: #fff; }

/* ─── Booking action drawers (owner FINAL v3, 2026-10-04; FareHarbor reference rendered in NVR tokens) ────────────
   A narrow white panel from the right (the booking stays visible behind a light veil); a full-width sheet on phones.
   Crisp: whole-pixel sizes, 1px borders, no transforms or zoom. Title 19px, controls 14px (16px inputs on phones),
   section labels 12px, one compact full-width primary button. */
dialog.drw { position: fixed; inset: 0 0 0 auto; margin: 0; padding: 0; width: 440px; max-width: 100vw; height: 100%; max-height: 100%;
  border: 0; border-left: 1px solid var(--cr-bd); border-radius: 0; box-shadow: var(--drw-shadow); background: var(--bg); color: var(--cr-ink);
  font-size: 14px; line-height: 20px; overflow: hidden; }
dialog.drw[open] { display: flex; flex-direction: column; }
dialog.drw::backdrop { background: rgba(22, 32, 43, .12); }
.drw-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 20px 20px 10px; flex-shrink: 0; }
.drw-title { margin: 0; font-size: 18px; line-height: 24px; font-weight: var(--fw-regular); color: var(--cr-ink); letter-spacing: 0; }
.drw-close { flex: none; display: grid; place-items: center; width: 32px; height: 32px; margin: -3px -6px 0 0; padding: 0; border: 0; border-radius: 4px; background: none; color: var(--cr-ink); cursor: pointer; }
.drw-close:hover { background: var(--cr-bg); }
.drw-close:focus-visible { outline: 2px solid var(--cr-blue); outline-offset: 1px; }
.drw-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 20px 16px; display: flex; flex-direction: column; gap: 12px; }
.drw-foot { flex-shrink: 0; padding: 12px 20px 20px; border-top: 1px solid var(--cr-div); background: var(--bg); display: flex; flex-direction: column; gap: 8px; }
.drw-foot:empty { display: none; }
.drw-stack { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.drw-stack > [hidden] { display: none; }
.drw-help { margin: -6px 0 0; font-size: 13px; line-height: 18px; }
.drw-help a, .drw-help button { color: var(--cr-blue-d); }
.drw-lead { margin: 0; color: var(--cr-muted); font-size: 14px; }
.drw-sect { margin: 4px 0 -6px; font-size: 12px; line-height: 16px; font-weight: var(--fw-medium); letter-spacing: .04em; text-transform: uppercase; color: var(--cr-muted); }
.drw-note { margin: 0; font-size: 13px; line-height: 18px; color: var(--cr-muted); }
.drw-link { align-self: flex-start; padding: 0; border: 0; background: none; font: inherit; font-size: 13px; color: var(--cr-muted); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.drw-link:hover { color: var(--cr-ink); }
.hc-select { margin: -4px 0 0; color: var(--cr-muted); }
.hc-select .drw-link { font-size: 13px; }
.drw-check { display: flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; }
.drw-check input { width: 16px; height: 16px; margin: 0; accent-color: var(--cr-blue); }
.drw-box { border: 1px solid var(--cr-bd); border-radius: 4px; padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }
.drw-cardbox { border: 1px solid var(--cr-card-bd); border-radius: 4px; padding: 12px; }
.drw-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.drw .field { margin: 0; }
.drw .field > label, .drw .field-label { font-size: 14px; font-weight: var(--fw-regular); color: var(--cr-ink); margin-bottom: 4px; }
.drw input[type=text], .drw input:not([type]), .drw input[inputmode], .drw select, .drw textarea { font-size: 14px; border: 1px solid var(--cr-bd); border-radius: 4px; background: var(--bg); color: var(--cr-ink); }
.drw input[type=text], .drw input:not([type]), .drw input[inputmode], .drw select { height: 36px; padding: 0 10px; }
.drw textarea { padding: 8px 10px; min-height: 64px; }
.drw input:focus, .drw select:focus, .drw textarea:focus { outline: none; border-color: var(--cr-blue); box-shadow: 0 0 0 3px var(--cr-focus); }
.drw-money { display: flex; align-items: center; width: 132px; height: 36px; border: 1px solid var(--cr-bd); border-radius: 4px; background: var(--bg); }
.drw-money:focus-within { border-color: var(--cr-blue); box-shadow: 0 0 0 3px var(--cr-focus); }
.drw-money span { padding: 0 6px 0 10px; color: var(--cr-muted); }
.drw .drw-money input { flex: 1 1 auto; min-width: 0; height: 34px; border: 0; padding: 0 10px 0 0; text-align: right; box-shadow: none; font-variant-numeric: tabular-nums; }
.drw-primary { width: 100%; height: 40px; padding: 0 16px; border: 1px solid var(--cr-blue); border-radius: 4px; background: var(--cr-blue); color: var(--status-on);
  font: inherit; font-size: 14px; font-weight: var(--fw-bold); cursor: pointer; }
.drw-primary:hover:not(:disabled) { background: var(--cr-blue-d); border-color: var(--cr-blue-d); }
.drw-primary.is-green { background: var(--status-green); border-color: var(--status-green); }
.drw-primary.is-green:hover:not(:disabled) { background: var(--ok); border-color: var(--ok); }
.drw-primary:disabled { background: var(--bg); border-color: var(--cr-div); color: var(--cr-off); cursor: default; }
.drw-primary:focus-visible { outline: 2px solid var(--cr-blue); outline-offset: 2px; }
.drw-result:empty { display: none; }
.drw .notice { margin: 0; font-size: 13px; }
/* Radio rows: one bordered group, pale-blue selected row, optional header row ("Pay $514.00 with:"). */
.rr { margin: 0; padding: 0; border: 1px solid var(--cr-bd); border-radius: 4px; min-width: 0; overflow: hidden; }
.rr-head { padding: 8px 12px; border-bottom: 1px solid var(--cr-bd); color: var(--cr-green); font-weight: var(--fw-medium); background: var(--bg); }
.rr-row { display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 7px 12px; cursor: pointer; background: var(--bg); }
.rr-row + .rr-row { border-top: 1px solid var(--cr-div); }
.rr-row.is-on { background: var(--cr-sel); }
.rr-row.is-on .rr-label { color: var(--cr-sel-ink); font-weight: var(--fw-medium); }
.rr-row.is-off { cursor: default; }
.rr-row.is-off .rr-label { color: var(--cr-off); }
.rr-row input { flex: none; width: 16px; height: 16px; margin: 0; accent-color: var(--cr-blue); }
.rr-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.rr-label { color: var(--cr-ink); }
.rr-sub { font-size: 12px; line-height: 16px; color: var(--cr-muted); }
.rr-aside { flex: none; display: inline-flex; align-items: center; gap: 6px; color: var(--cr-off); font-size: 12px; }
/* Release or capture holds: one compact card per authorization with its action choice. */
.hc { border: 1px solid var(--cr-card-bd); border-radius: 4px; overflow: hidden; }
.hc-top { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 10px 12px; }
.hc-top p { margin: 0; color: var(--cr-muted); font-size: 13px; line-height: 18px; }
.hc-top p strong { color: var(--cr-ink); font-weight: var(--fw-medium); }
.hc-amt { text-align: right; font-weight: var(--fw-medium); color: var(--cr-ink); font-variant-numeric: tabular-nums; }
.hc-details { justify-self: end; padding: 0; border: 0; background: none; font: inherit; font-size: 13px; color: var(--cr-blue-d); text-decoration: underline; cursor: pointer; }
.hc-facts { margin: 0; padding: 8px 12px; border-top: 1px solid var(--cr-div); background: var(--cr-bg); display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; font-size: 13px; }
.hc-facts dt { color: var(--cr-muted); } .hc-facts dd { margin: 0; color: var(--cr-ink); overflow-wrap: anywhere; }
/* Capture figures (owner rule 2026-10-05): held, available, balance due, maximum — amounts right-aligned. */
.hc-capfig { margin: 0 0 4px; display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; font-size: 14px; }
.hc-capfig dt { color: var(--cr-muted); } .hc-capfig dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; color: var(--cr-ink); }
.hc-capblocked { margin: 4px 12px 8px; }
.hc-total { margin: 0; font-size: 14px; color: var(--cr-ink); }
/* Send email drawer: the server-rendered preview framed inside the drawer (owner final handoff 2026-10-05). */
.se .se-input { width: 100%; min-height: 38px; padding: 6px 12px; font: inherit; font-size: 14px; color: var(--cr-ink); background: var(--panel); border: 1px solid var(--input-bd); border-radius: 4px; }
.se .se-input[hidden] { display: none; }
.se-msgbox { border: 1px solid var(--input-bd); border-radius: 4px; background: var(--panel); }
.se-msg { display: block; width: 100%; min-height: 112px; padding: 8px 12px; font: inherit; font-size: 14px; color: var(--cr-ink); border: 0; border-bottom: 1px solid var(--cr-div); border-radius: 4px 4px 0 0; resize: vertical; background: transparent; }
.se-msg.is-off { background: var(--subtle); }
.se-msgbar { display: flex; justify-content: flex-end; padding: 6px 10px; }
.se-preview { font-size: 13px; color: var(--cr-ink); text-decoration: none; }
.se-preview:hover, .se-preview:focus-visible { text-decoration: underline; }
.hc-acts { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--cr-div); }
.hc-act { position: relative; height: 34px; padding: 0 6px; border: 0; background: var(--bg); font: inherit; font-size: 14px; color: var(--cr-ink); cursor: pointer; }
.hc-act[aria-pressed="true"] { color: var(--cr-blue-d); font-weight: var(--fw-medium); }
.hc-act[aria-pressed="true"]::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 0; height: 3px; border-radius: 2px 2px 0 0; background: var(--cr-blue); }
.hc-act:disabled { color: var(--cr-off); cursor: default; }
.hc-act:focus-visible { outline: 2px solid var(--cr-blue); outline-offset: -2px; }
.hc-form { padding: 10px 12px 12px; border-top: 1px solid var(--cr-div); display: flex; flex-direction: column; gap: 10px; }
/* Refund payments (owner correction 2026-10-04): a selected payment card gets the green border; the amount is green. */
.rf.is-on { border-color: var(--status-green); box-shadow: 0 0 0 1px var(--status-green); }
.rf .hc-act[aria-pressed="true"] { color: var(--status-green); }
.rf .hc-act[aria-pressed="true"]::after { background: var(--status-green); }
.rf.is-off .hc-top p strong { color: var(--cr-muted); }
.hc-amt.is-money { color: var(--status-green); }
.rf-left { grid-column: 1 / -1; color: var(--cr-muted); font-size: 12px; }
.rf-error { padding: 8px 12px; border-top: 1px solid var(--cr-div); font-size: 13px; }
.rf-error[hidden] { display: none; }
.rf-amount { display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: 4px 10px; }
.rf-amount > label { margin: 0; }
.rf-amount > .field-error { grid-column: 1 / -1; }
.hc-form:empty { display: none; }
.rf-list { display: flex; flex-direction: column; gap: 12px; }
/* Cancel booking (owner v3 §1–4, FareHarbor drawer): one policy line, an optional outcome choice, the refund selector
   only when chosen, an optional internal note, the email box and one red button. Policy details stay one click away. */
.drw-primary.is-danger { background: var(--status-red); border-color: var(--status-red); }
.drw-primary.is-danger:hover:not(:disabled) { background: var(--status-red-d); border-color: var(--status-red-d); }
.cx-links { margin: 0; font-size: 13px; color: var(--cr-muted); }
.cx-links .drw-link { color: var(--cr-blue-d); }
.cx-details, .cx-requests { padding: 10px 12px; border: 1px solid var(--cr-div); border-radius: 4px; background: var(--cr-bg); font-size: 13px; }
.cx-details[hidden], .cx-requests[hidden] { display: none; }
.cx-details .ops-preview, .cx-requests .fieldset { margin: 0; padding: 0; border: 0; background: none; }
.cx-outcome p { margin: 0; font-size: 14px; line-height: 20px; color: var(--cr-ink); }
.cx-outcome[aria-busy="true"] { opacity: .6; }
.cx-label { color: var(--cr-muted); }
.cx-effect { color: var(--cr-muted) !important; font-size: 13px !important; }
.cx-alerts:empty { display: none; }
.cx-alerts { display: flex; flex-direction: column; gap: 8px; }
.cx-choice:empty, .cx-refund:empty { display: none; }
.cx-refund { display: flex; flex-direction: column; gap: 10px; }
.cx-sub { margin: 0; font-size: 13px; line-height: 18px; color: var(--cr-muted); }
.cx-scope { display: flex; flex-direction: column; gap: 8px; }
.cx-vans { margin: 0; padding: 0; border: 0; display: flex; flex-direction: column; gap: 4px; }
.cx-vans[hidden] { display: none; }
.drw textarea.cx-note { width: 100%; min-height: 72px; resize: vertical; }
@media (max-width: 760px) {
  dialog.drw { width: 100vw; border-left: 0; }
  .drw input[type=text], .drw input:not([type]), .drw input[inputmode], .drw select, .drw textarea { font-size: 16px; }   /* no zoom on phones */
  .drw-row2 { grid-template-columns: 1fr; }
}

/* ─── Reservation workspace dialog (the shell's overlay route) ───────────────────────────────────── */
/* A wide dialog over the still-mounted list (desktop), the whole screen on phones. role="dialog" + aria-modal; the
   page behind is inert and does not scroll; native dialogs, confirmations and toasts open above it. */
html.ovl-open { overflow: hidden; }
.ovl { position: fixed; inset: 0; z-index: 70; display: flex; justify-content: center; align-items: stretch; padding: 20px 24px; }
.ovl-backdrop { position: absolute; inset: 0; background: rgba(11, 37, 69, .5); }
.ovl-panel { position: relative; display: flex; flex-direction: column; width: min(1280px, 100%); min-height: 0; background: var(--bg); border-radius: 12px; box-shadow: 0 24px 64px rgba(11, 37, 69, .35); overflow: hidden; }
.ovl-head { display: flex; align-items: center; gap: 4px 8px; min-height: 52px; padding: 4px 8px 4px 20px; border-bottom: 1px solid var(--line); background: var(--panel); flex-shrink: 0; }
.ovl-title { flex: 1 1 auto; min-width: 0; margin: 0; font-size: 1rem; font-weight: var(--fw-medium); color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ovl-full { display: inline-flex; align-items: center; gap: 6px; min-height: var(--tap); padding: 0 10px; border-radius: var(--r-sm); font-weight: var(--fw-medium); font-size: .875rem; text-decoration: none; white-space: nowrap; }
.ovl-full:hover { background: var(--sky); }
.ovl-close, .ovl-back { display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-width: var(--tap); min-height: var(--tap); padding: 0 8px; border: 0; border-radius: var(--r-sm); background: none; color: var(--ink); font: inherit; font-weight: var(--fw-medium); cursor: pointer; }
.ovl-close:hover, .ovl-back:hover { background: var(--neutral-bg); }
.ovl-back { display: none; color: var(--blue-d); }
.ovl-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 16px 20px 32px; -webkit-overflow-scrolling: touch; }
.ovl-scroll:focus { outline: none; }
/* The screen's own "back to the list" link is the dialog's Close here. */
.ovl .screen-root > .back-link { display: none; }

/* ─── Data displays ───────────────────────────────────────────────────────────────────────────── */
.kv { display: grid; gap: 6px; margin: 0 0 12px; }
.kv-row { display: grid; grid-template-columns: minmax(120px, 34%) 1fr; gap: 12px; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; overflow-wrap: anywhere; }
.stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.stat { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--subtle); }
.stat-num { font-size: 1.35rem; font-weight: var(--fw-bold); color: var(--navy); font-variant-numeric: tabular-nums; }
.stat-label { color: var(--muted); font-size: .875rem; }
.stat-warn { border-color: var(--warn-bd); background: var(--warn-bg); }
.stat-warn .stat-num, .stat-warn .stat-label { color: var(--warn); }
.int-list { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); }
.int { border: 1px solid var(--line); border-radius: var(--r-sm); padding: 12px 14px; background: var(--subtle); }
.int-simulated { border-color: var(--sim-bd); background: var(--sim-bg); }
.int-awaiting { border-color: var(--warn-bd); background: var(--warn-bg); }
.int-problem { border-color: var(--danger-bd); background: var(--danger-bg); }
.int-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px; align-items: center; margin-bottom: 6px; }
/* A long state ("AWAITING INTEGRATION — PRICED MANUALLY ON APPROVAL") wraps inside the card on phones instead of
   widening the page. */
.int-head > * { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
.int-head .badge { white-space: normal; text-align: left; }
.int p { margin: 0 0 4px; }
.chain { margin-bottom: 8px; }
.message-body, .json { white-space: pre-wrap; overflow-wrap: anywhere; background: var(--subtle); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 12px; max-height: 50vh; overflow: auto; margin: 0 0 8px; }
.diff { width: 100%; border-collapse: collapse; margin: 8px 0; font-size: .9rem; }
.diff th, .diff td { border: 1px solid var(--line); padding: 6px 8px; text-align: left; vertical-align: top; overflow-wrap: anywhere; }
.diff thead th { background: var(--subtle); }

.timeline { display: flex; flex-direction: column; }
.tl-day { font-size: .875rem; margin: 16px 0 8px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.tl { list-style: none; margin: 0; padding: 0; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); }
.tl-item { display: grid; grid-template-columns: 88px 1fr; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.tl-item:last-child { border-bottom: 0; }
.tl-time { color: var(--muted); font-variant-numeric: tabular-nums; font-size: .875rem; padding-top: 2px; }
.tl-summary { margin: 0 0 4px; }
.tl-meta { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; margin: 0 0 4px; }
.tl-details > summary { cursor: pointer; color: var(--blue); font-weight: var(--fw-medium); min-height: var(--tap); display: inline-flex; align-items: center; }
.tl-details[open] > summary { margin-bottom: 8px; }

.tax-rules { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.tax-rule { border: 1px solid var(--line); border-radius: var(--r-sm); padding: 12px 14px; }
.tax-rule ul { margin: 0 0 8px; padding-left: 1.2rem; }
.tax-lines { display: flex; flex-direction: column; gap: 12px; }
.tax-line { display: flex; flex-direction: column; gap: 10px; }

.cardfields { display: flex; flex-direction: column; gap: 8px; }
.cardfields-note { margin: 0; font-size: .9rem; }
.cardfields-frame { width: 100%; height: 220px; border: 1px solid var(--line-2); border-radius: var(--r-sm); background: #fff; }
.cardfields-host { min-height: 90px; }
.cardfields.is-grid { gap: 4px; }
.cardfields.is-grid .cardfields-frame { height: 236px; border: 0; border-radius: 0; background: var(--bg); }
.cardfields-status { margin: 0; color: var(--muted); font-size: .9rem; }
.cardfields-status:empty { display: none; }
.cardfields-status.tone-danger { background: none; border: 0; color: var(--danger); font-weight: var(--fw-bold); }

.print-only { display: none; }

/* ─── Phones (≤ 760px): compact top bar, bottom tab bar with More, cards instead of tables ────────── */
@media (max-width: 760px) {
  :root { --topbar-h: 56px; }
  body { padding-bottom: calc(var(--bottomnav-h) + env(safe-area-inset-bottom)); }
  .topbar-row { flex-wrap: wrap; gap: 8px; padding: 6px 12px; padding-left: max(12px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right)); }
  .wordmark { font-size: 1.05rem; }
  .wordmark .wm-staff { display: none; }
  .env-long { display: none; }
  .env-short { display: inline; }
  .envbadge > summary { padding: 4px 8px; font-size: .7rem; }
  /* The badge's panel opens below the bar at the full phone width instead of running off the right edge. */
  .envpanel { position: fixed; left: 8px; right: 8px; top: calc(var(--topbar-h) + 4px); width: auto; max-height: calc(100vh - var(--topbar-h) - 16px); overflow: auto; }
  .menu { max-width: calc(100vw - 16px); }
  /* The active location gets its own full-width row so its name is never cut off. */
  .locswitch { order: 6; flex: 1 0 100%; min-width: 0; padding-left: 12px; margin-bottom: 4px; }
  .loc-select { flex: 1; max-width: none; min-width: 0; text-overflow: ellipsis; }
  .search-toggle { order: 3; margin-left: auto; display: inline-grid; place-items: center; width: var(--tap); height: var(--tap); border: 0; border-radius: 50%; background: var(--bar-2); color: #fff; cursor: pointer; }
  .usermenu { order: 4; }
  .usermenu-name, .usermenu > summary > .icon { display: none; }
  .usermenu > summary { padding: 4px; min-width: var(--tap); justify-content: center; }
  .gsearch { order: 7; display: none; flex-basis: 100%; max-width: none; margin: 0 0 4px; }
  .topbar.search-open .gsearch { display: flex; }
  .gsearch-go { display: none; }

  /* Bottom bar: the four most used areas and "More" (the rest, Settings and Sign out). */
  .mainnav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; margin: 0; background: #fff; border-top: 1px solid var(--line); border-bottom: 0; box-shadow: 0 -2px 12px rgba(11, 37, 69, .08); padding-bottom: env(safe-area-inset-bottom); }
  .mainnav ul { padding: 0; gap: 0; overflow: visible; }
  .mainnav li { flex: 1; min-width: 0; }
  .mainnav .nav-secondary, .mainnav .nav-phone-more { display: none; }
  .mainnav .nav-more { display: block; position: relative; }
  .nav-link, .navmore > summary { flex-direction: column; justify-content: center; gap: 2px; width: 100%; min-height: var(--bottomnav-h); padding: 4px 2px; font-size: .72rem; color: var(--ink); background: none; border-bottom: 0; border-top: 3px solid transparent; }
  .nav-link > .icon { display: inline-block; }
  .nav-link:hover { color: var(--blue-d); background: var(--sky); }
  .nav-link[aria-current="page"], .navmore.is-current > summary { color: var(--blue-d); border-top-color: var(--blue); border-bottom: 0; background: var(--sky); }
  /* The bottom bar is white: a blue ring (not the top bar's white one), inside the item. */
  .mainnav .nav-link:focus-visible, .mainnav .navmore > summary:focus-visible { outline-color: var(--blue); outline-offset: -3px; }
  .navmore > summary { list-style: none; display: flex; align-items: center; cursor: pointer; font-weight: var(--fw-medium); letter-spacing: .01em; }
  .navmore > summary::-webkit-details-marker { display: none; }
  .navmore-menu { position: fixed; top: auto; left: auto; right: 8px; bottom: calc(var(--bottomnav-h) + 8px + env(safe-area-inset-bottom)); min-width: 240px; max-height: calc(100vh - var(--bottomnav-h) - 80px); overflow: auto; }
  .nav-label { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  .main { padding: 12px 16px 32px; padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); }
  .panel { padding: 12px; }
  .rtable-wrap { display: none; }
  .rcards { display: grid; }
  .page-actions { width: 100%; }
  .page-actions .btn { flex: 1; }
  .tl-item { grid-template-columns: 1fr; gap: 2px; }
  .kv-row { grid-template-columns: 1fr; gap: 0; }
  .kv dt { font-size: .85rem; }
  .dlg { max-height: calc(100vh - 16px); width: calc(100vw - 16px); }
  .dlg-actions .btn { flex: 1; }
  .toast-region { bottom: calc(var(--bottomnav-h) + 12px + env(safe-area-inset-bottom)); }
  .filters { grid-template-columns: 1fr 1fr; }
  .filters .field:first-child, .filters .filter-actions { grid-column: 1 / -1; }

  /* The workspace fills the screen with a clear Back control. */
  .ovl { padding: 0; }
  .ovl-panel { width: 100%; border-radius: 0; box-shadow: none; }
  .ovl-head { padding: 4px 8px; padding-top: max(4px, env(safe-area-inset-top)); }
  .ovl-back { display: inline-flex; }
  .ovl-close { display: none; }
  .ovl-full-text { display: none; }
  .ovl-scroll { padding: 12px 16px 24px; padding-bottom: max(24px, env(safe-area-inset-bottom)); }
  html.ovl-open .toast-region { bottom: calc(12px + env(safe-area-inset-bottom)); }
}
@media (max-width: 380px) {
  .filters { grid-template-columns: 1fr; }
}
/* Short viewports — a phone held sideways, or a desktop window zoomed to 200–400 % (WCAG 2.2 SC 1.4.10 reflow: a
   1280 px window at 400 % is 320 × 256 CSS px): the top bar scrolls away with the page instead of staying on screen,
   so the content keeps most of the height (a sticky bar plus the phone bottom bar left a third of it). Screens' own
   sticky bars then stick to the very top (trackTopbar reads the bar's position). */
@media (max-height: 480px) {
  .topbar { position: static; }
}

/* Windows high contrast / forced colours: keep badges and focus distinguishable. */
@media (forced-colors: active) {
  .badge, .chip, .btn, .notice { border: 1px solid CanvasText; }
  .chip[aria-pressed="true"], .nav-link[aria-current="page"], .subnav-link[aria-current="page"] { outline: 2px solid Highlight; }
  .ovl-panel { border: 2px solid CanvasText; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .route-progress.active { animation: none; }
}

/* Print (manifest and lists): no navigation or controls, tables not cards, black on white. */
@media print {
  @page { margin: 12mm; }
  body { background: #fff; color: #000; padding: 0; font-size: 11pt; }
  .topbar, .mainnav, .subnav-slot, .route-progress, .toast-region, .skip-link, .page-actions, .pager, .filters-panel, .toolbar, .no-print, .btn, dialog, .back-link, .ovl { display: none !important; }
  html.ovl-open { overflow: visible; }
  .print-only { display: block; }
  .main { max-width: none; padding: 0; }
  .panel, .rtable-wrap, .rcard, .tl { box-shadow: none; border-color: #999; }
  .rtable-wrap { display: block !important; overflow: visible; }
  .rcards { display: none !important; }
  .rtable thead th { position: static; background: #eee; color: #000; }
  .rtable tr { break-inside: avoid; }
  .badge { border-color: #000; color: #000; background: #fff; }
  a { color: #000; text-decoration: none; }
}

/* Staff New Booking (screens/reservation-new.mjs): the header scrolls away on this page, so it never sits over the booking steps, the forms or the price panel. */
html.nbk-page .topbar { position: static; }

/* ─── Employee profile + activity (owner v3 §50–60) ───────────────────────────────────────────────────────── */
.ep-top { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px; margin: 6px 0 16px; }
.ep-id h1 { margin: 0; font-size: 24px; line-height: 30px; }
.ep-line { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; margin: 4px 0 0; font-size: 14px; color: var(--ink); }
.ep-line > span:not(.badge)::after { content: "·"; margin: 0 8px; color: var(--muted); }
.ep-sub { margin: 4px 0 0; font-size: 13px; color: var(--muted); }
.ep-act { border-top: 1px solid var(--line); padding-top: 12px; }
.ep-act-head h2 { margin: 0 0 10px; font-size: 18px; }
.ep-summary { display: flex; flex-wrap: wrap; margin: 0 0 12px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); }
.ep-stat { flex: 1 1 140px; padding: 8px 14px; border-right: 1px solid var(--line); }
.ep-stat:last-child { border-right: 0; }
.ep-stat dt { font-size: 12px; color: var(--muted); }
.ep-stat dd { margin: 2px 0 0; font-size: 20px; line-height: 26px; font-weight: var(--fw-medium); font-variant-numeric: tabular-nums; }
.ep-stat-sub { font-size: 11px; color: var(--muted); }
.ep-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 8px; }
.ep-sel, .ep-search { height: 34px; padding: 0 8px; border: 1px solid var(--line-2); border-radius: 4px; background: var(--panel); font: inherit; font-size: 13px; color: var(--ink); }
.ep-search { flex: 1 1 200px; min-width: 160px; }
.ep-export { margin-left: auto; font-size: 13px; color: var(--blue); }
.ep-list { margin: 0; padding: 0; list-style: none; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); }
.ep-list:empty { display: none; }
.ep-item { display: grid; grid-template-columns: 150px 1fr 120px 150px; gap: 10px; align-items: baseline; padding: 7px 12px; border-bottom: 1px solid var(--line); font-size: 13px; }
.ep-item:last-child { border-bottom: 0; }
.ep-cat .badge { font-size: 11px; }
.ep-text a { color: var(--blue); white-space: nowrap; }
.ep-loc, .ep-when { color: var(--muted); font-size: 12px; }
.ep-when { text-align: right; white-space: nowrap; }
.ep-more { display: block; margin: 8px 0; padding: 0; border: 0; background: none; color: var(--blue); font: inherit; font-size: 13px; text-decoration: underline; cursor: pointer; }
.ep-empty { margin: 8px 0; color: var(--muted); font-size: 13px; }
.ep-note { margin: 12px 0 0; font-size: 12px; color: var(--muted); }
@media (max-width: 760px) { .ep-item { grid-template-columns: 1fr; gap: 2px; } .ep-when { text-align: left; } .ep-export { margin-left: 0; } }