/* ════════════════════════════════════════════════════════════════════
   Reelax — Editorial Chrome  ·  /apps/css/editorial-chrome.css

   Shared in-tool editor chrome originally introduced for the Crew List
   redesign (handoff: design_handoff_crew_list_editor) and now reused by
   every tool that wants the editorial look:

       Crew List   (tools/crew-list/crew-list.html)
       Flight Grid (tools/flight-grid/grid.html)
       …future tools

   What lives here:
     · --cl-* design tokens (light + dark themes), font stacks
     · .cl-brand-bar    — true-black brand band at the top of the page
     · .cl-topbar       — sticky tool bar below it (project title + actions)
     · .cl-pill         — small mono uppercase pill ("ALL TOOLS", filters)
     · .cl-tbtn         — squared mono uppercase action button
     · .cl-saved        — sync status with green/amber/red dot
     · .cl-menu-wrap    — dropdown menu styling (Files / Downloads etc.)

   Per-tool CSS is responsible for everything BELOW the topbar (sidebar,
   stats, table, modals, etc.) — those usually need tool-specific rules.

   Crew List currently still ships its own copy of these tokens + chrome
   inside its tools/crew-list/css/crew-list.css. They define the same
   values so the duplication is functionally fine; can be removed in a
   follow-up cleanup once Flight Grid is also stable on this file.
   ════════════════════════════════════════════════════════════════════ */


/* ── Tokens (light + dark) ────────────────────────────────────── */
[data-theme="light"]{
  /* Impersonation write-session banner. NOT --cl-err: that means "something
     went wrong". A write session is live, sanctioned and dangerous — a page
     carrying a real error chip must not read as two errors. */
  --cl-imp-write:    #8E2A20;
  --cl-imp-write-fg: #FFFFFF;
  /* Tell Safari (and any colour-managing UA) that this is intentionally
   * a light page — without this declaration, Safari on a macOS device
   * in dark mode applies a system tint that shifts warm cream
   * (#F7F4EC) toward a muddy reddish-gray. With it, cream renders
   * faithfully across browsers. Same logic for [data-theme="dark"]. */
  color-scheme: light;
  --cl-bg:          #F2EFE6;
  --cl-surface:     #FFFFFF;
  --cl-card:        #FFFFFF;
  --cl-card-alt:    #F7F4EC;
  --cl-card-alt-hover: #EFEBDF;
  --cl-card-deep:   #EFEBDF;
  --cl-border:      #D8D2C4;
  --cl-border-soft: #E6E0D2;
  --cl-rule:        #E6E0D2;
  --cl-text:        #1A1612;
  --cl-text2:       #3D3833;
  --cl-text-muted:  #6E665B;
  --cl-text3:       #9A9286;
  --cl-brand-bg:    #0E0E0E;
  --cl-brand-fg:    #FFFFFF;
  --cl-brand-fg-dim:#878B8B;
  /* Accent — follows the project / org accent set by
     pdf-brand-bootstrap.js (via documentElement.style.--accent).
     Falls back to the platform-default orange #FF6C00 when no
     project/org accent is configured. Plum (#FF6C00) was retired
     2026-05-25 — see Style Guide §11.10 + decision log. */
  --cl-accent:      var(--accent, #FF6C00);
  --cl-ok:          #2E7A5C;
  --cl-warn:        #8A5A0C;
  --cl-err:         #A8362C;
  /* Status surface tokens — bg + border tints for chips, notice strips and
     accent/OCR flags (added 2026-08-10 per Style Guide §1: needed by tools,
     was missing). Light values from the approved Expense Report palette. */
  --cl-ok-bg:       #E2F1EA;  --cl-ok-bd:   #B3D9C5;
  --cl-warn-bg:     #FAF1DD;  --cl-warn-bd: #E8D29A;
  --cl-err-bg:      #F8E8E5;  --cl-err-bd:  #E3BDB6;
  --cl-acc-bg:      #FBEBDD;  --cl-acc-bd:  #EFCBA6;  /* accent surfaces + OCR review flags */
  --cl-ocr-ink:     #B4500A;                          /* OCR badge text on --cl-acc-bg */
  /* Kind-badge palette — six tokens × {text/bg/border} per Style
     Guide §1 Kind badges + §7.0.2.1. Only sanctioned colors for
     .cl-dept-badge. Adding a 7th kind requires a Style Guide
     change. The old per-department palette (camera/art/hmu/
     wardrobe/drone/stills as separate hues) collapsed into `tech`
     and `creative` on 2026-05-29 to fit inside the token budget
     and to retire the plum tint that lingered in production-dark. */
  --cl-kind-production:        #C24F0F;
  --cl-kind-production-bg:     #F8E8D5;
  --cl-kind-production-border: #E8C7A5;
  --cl-kind-agency:            #8A5A0C;
  --cl-kind-agency-bg:         #FAF1DD;
  --cl-kind-agency-border:     #E8D29A;
  --cl-kind-client:            #2E7A5C;
  --cl-kind-client-bg:         #E2F1EA;
  --cl-kind-client-border:     #B3D9C5;
  --cl-kind-tech:              #1E5C82;
  --cl-kind-tech-bg:           #E0EDF5;
  --cl-kind-tech-border:       #A8C8DD;
  --cl-kind-creative:          #9C2E5A;
  --cl-kind-creative-bg:       #F8E5EC;
  --cl-kind-creative-border:   #E0BACB;
  --cl-kind-default:           #4A4A4A;
  --cl-kind-default-bg:        #F0EDE5;
  --cl-kind-default-border:    #D8D2C4;
}
[data-theme="dark"]{
  /* Lifted for the dark canvas — same role, same contrast against --cl-bg. */
  --cl-imp-write:    #B23A2C;
  --cl-imp-write-fg: #FFFFFF;
  color-scheme: dark;
  --cl-bg:          #0A0A0A;
  --cl-surface:     #131313;
  --cl-card:        #161616;
  --cl-card-alt:    #1C1C1C;
  --cl-card-alt-hover: #232323;
  --cl-card-deep:   #0F0F0F;
  --cl-border:      #262626;
  --cl-border-soft: #1F1F1F;
  --cl-rule:        #1F1F1F;
  --cl-text:        #FFFFFF;
  --cl-text2:       #D4D4D4;
  --cl-text-muted:  #878B8B;
  --cl-text3:       #5A5A5A;
  --cl-brand-bg:    #0E0E0E;
  --cl-brand-fg:    #FFFFFF;
  --cl-brand-fg-dim:#878B8B;
  /* Dark-mode accent — same project-accent inheritance as light. */
  --cl-accent:      var(--accent, #FF6C00);
  --cl-ok:          #5DD4A0;
  --cl-warn:        #F0B66B;
  --cl-err:         #D04A3F;
  /* Status surface tokens — dark variants (match the kind-badge dark tint
     treatment: dark tinted bg + mid border). */
  --cl-ok-bg:       #0E2620;  --cl-ok-bd:   #15493A;
  --cl-warn-bg:     #2A1F0E;  --cl-warn-bd: #5C4216;
  --cl-err-bg:      #2E1414;  --cl-err-bd:  #5C2A24;
  --cl-acc-bg:      #2A1B0E;  --cl-acc-bd:  #5C3A1A;
  --cl-ocr-ink:     #FF8C2A;
  /* Kind-badge palette dark variants — see light block above. */
  --cl-kind-production:        #FF8C2A;
  --cl-kind-production-bg:     #2A1B0E;
  --cl-kind-production-border: #5C3A1A;
  --cl-kind-agency:            #F0B66B;
  --cl-kind-agency-bg:         #2A1F0E;
  --cl-kind-agency-border:     #5C4216;
  --cl-kind-client:            #5DD4A0;
  --cl-kind-client-bg:         #0E2620;
  --cl-kind-client-border:     #15493A;
  --cl-kind-tech:              #7BC4E8;
  --cl-kind-tech-bg:           #0E222E;
  --cl-kind-tech-border:       #1E4561;
  --cl-kind-creative:          #E89BB8;
  --cl-kind-creative-bg:       #2E1620;
  --cl-kind-creative-border:   #5A2D40;
  --cl-kind-default:           #B8B8B8;
  --cl-kind-default-bg:        #1A1A1A;
  --cl-kind-default-border:    #2E2E2E;
}
:root{
  --cl-font-head: 'Instrument Serif', 'DM Serif Display', Georgia, 'Times New Roman', serif;
  --cl-font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --cl-font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
}


/* ── Brand bar ────────────────────────────────────────────────── */
.cl-brand-bar {
  background: var(--cl-brand-bg);
  padding: 24px 32px;
  display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid var(--cl-brand-bg);
  position: sticky; top: 0; z-index: 100;
}
.cl-brand-bar-left { display: flex; align-items: center; }
.cl-brand-bar-mark,
.cl-brand-bar-tool {
  font-family: var(--cl-font-mono);
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
}
.cl-brand-bar-mark { font-weight: 600; color: var(--cl-brand-fg); }
.cl-brand-bar-tool { font-weight: 500; color: var(--cl-brand-fg-dim); }
/* `margin-left: auto` forces right-justification even if hidden legacy
 * sibling nodes are still participating in flex layout (e.g. Crew List
 * keeps #lhLogo / #lhLogoPlaceholder / #allToolsLink as hidden no-op
 * children of .cl-brand-bar for back-compat). justify-content alone
 * isn't enough when extra siblings exist. */
.cl-brand-bar-right {
  display: flex; align-items: center; gap: 18px;
  margin-left: auto;
}
.cl-brand-bar-meta {
  font-family: var(--cl-font-mono);
  font-size: 9.5px; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--cl-brand-fg-dim);
}
/* Org name / logo placeholder — populated on init by the tool's
 * clBrandBarInit() (or equivalent). Renders either an <img> or a
 * mono uppercase wordmark, then a thin "/" separator before the
 * tool name (CREW LIST / FLIGHT GRID / …). */
.cl-brand-bar-org {
  display: inline-flex; align-items: center; gap: 8px;
}
.cl-brand-bar-org-img {
  height: 28px; width: auto; max-width: 110px; object-fit: contain;
  display: block;
}
/* When no org logo is set the <img> keeps its `hidden` attribute; the
   display:block above would otherwise override UA hidden and paint a
   broken-image icon. Restore hiding so the text mark shows instead. */
.cl-brand-bar-org-img[hidden] { display: none; }
.cl-brand-bar-sep {
  margin: 0 8px;
  font-family: var(--cl-font-mono); font-size: 10px;
  color: var(--cl-brand-fg-dim);
}


/* ── Topbar ────────────────────────────────────────────────────── */
.cl-topbar {
  background: var(--cl-surface);
  padding: 12px 24px;
  border-bottom: 1px solid var(--cl-border);
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  /* Sticky offset = .cl-brand-bar's resting height: 24+24 padding +
     ~28px org-img = ~76px. Re-tuned 2026-05-25 when the org-img
     grew 18px → 28px. Keep this in sync any time `.cl-brand-bar`
     padding or `.cl-brand-bar-org-img` height changes. */
  position: sticky; top: 77px; z-index: 90;
  /* The mono face arrives with display=swap, so the topbar's buttons are laid
     out in the fallback and then RE-laid-out when JetBrains Mono lands. A
     sticky element is composited, and that second layout left the buttons' 1px
     border painted at the first layout's geometry — visibly offset until a
     hover fired the border-color transition and forced a repaint.

     Declaring the transform up front means the layer exists from the first
     paint instead of being promoted midway, so the reflow repaints it. `0 0 0`
     is deliberately an identity transform: it creates the layer without moving
     anything or introducing the blurry-text artifact `will-change` can cause on
     some GPUs. preconnect on the font hosts shortens the swap window; this
     removes the artifact when it happens anyway. */
  transform: translate3d(0, 0, 0);
}
.cl-topbar-left  { display: flex; align-items: center; gap: 18px; min-width: 0; flex: 1 1 auto; }
.cl-topbar-right { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; flex-wrap: wrap; }
.cl-topbar-div {
  width: 1px; height: 22px; background: var(--cl-border); margin: 0 6px;
}

/* "ALL TOOLS" / nav pill — same 30px height as .cl-tbtn so any topbar
 * that mixes both (e.g. Flight Grid: ALL TOOLS pill + theme toggle pill
 * + EXPORT CSV / EXPORT PDF / ADD FLIGHT action buttons) renders all
 * controls on a single visual baseline. line-height:1 keeps text
 * vertically centered without dropping below the border. */
.cl-pill {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 6px;
  height: 30px; padding: 0 11px;
  line-height: 1;
  font-family: var(--cl-font-mono); font-size: 10px; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--cl-text-muted);
  border: 1px solid var(--cl-border);
  border-radius: 0;          /* hard rule per Style Guide §6.2 */
  text-decoration: none;
  transition: color .12s, border-color .12s, background .12s;
  background: transparent;
  cursor: pointer;
}
.cl-pill:hover { color: var(--cl-text); border-color: var(--cl-text-muted); }
/* "ALL TOOLS" back-link — INVERT to FILL on hover, both themes. This is the
   mirror of .cl-tbtn--primary (which starts filled and inverts to transparent
   on hover). --cl-text / --cl-bg are theme-aware, so the fill reads correctly
   in light (dark fill / light text) and dark (light fill / dark text). The
   dark arm's specificity (0,6,0) beats the dark topbar outline override
   `[data-theme="dark"] .cl-topbar .cl-pill:not(.is-active):hover` (0,5,0). */
.cl-pill.back-link:hover {
  background: var(--cl-text); color: var(--cl-bg); border-color: var(--cl-text);
}
[data-theme="dark"] .cl-topbar .cl-pill.back-link:not(.is-active):hover {
  background: var(--cl-text); color: var(--cl-bg); border-color: var(--cl-text);
}
.cl-pill-dot {
  width: 5px; height: 5px; border-radius: 3px;
  background: var(--cl-text3);
}

/* Project title — Instrument Serif italic. Style Guide §3.2.
   Refactor 2026-05-18 (Brand Fonts removal): Brand Fonts per-org overrides removed; typography
   is now fixed at the platform level via --cl-font-head. */
.cl-topbar-project {
  font-family: var(--cl-font-head);
  font-style: italic;
  font-size: 22px; font-weight: 400;
  letter-spacing: -.005em; line-height: 1;
  color: var(--cl-text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  min-width: 0;
}

/* SAVED status — green dot + mono label, animates while saving */
.cl-saved {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--cl-font-mono); font-size: 10px; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--cl-text-muted);
  flex-shrink: 0;
}
.cl-saved-dot {
  width: 6px; height: 6px; border-radius: 3px;
  background: currentColor;
}
.cl-saved[data-state="saved"]  { color: var(--cl-ok); }
.cl-saved[data-state="saving"] { color: var(--cl-warn); }
.cl-saved[data-state="saving"] .cl-saved-dot { animation: cl-saving-pulse .8s ease-in-out infinite; }
.cl-saved[data-state="error"]  { color: var(--cl-err); }
@keyframes cl-saving-pulse { 0%,100% { opacity: 1; } 50% { opacity: .4; } }


/* ── Topbar action buttons ────────────────────────────────────── */
.cl-tbtn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; height: 30px;
  background: transparent; border: 1px solid var(--cl-border);
  font-family: var(--cl-font-mono); font-size: 10px; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--cl-text2);
  cursor: pointer;
  transition: border-color .12s, color .12s, background .12s;
  border-radius: 0;
}
.cl-tbtn:hover { border-color: var(--cl-text2); color: var(--cl-text); }
/* Dark mode — Style Guide §3.4: OUTLINED topbar controls only.
   Filled variants (.cl-tbtn--primary, .cl-tbtn.active, .cl-tbtn.is-active)
   keep their inverted bg+text via their own rules; this override would
   collide with them and render white-on-white text.
   Both .active (GT / legacy) and .is-active (casting-sessions / modern)
   are excluded — §4.1 convention.
   The .cl-pill arm is scoped to `.cl-topbar` — without it, the rule
   leaked onto in-tool body pills (e.g. casting-sessions filter pills,
   .rg-pill-clear) and forced their muted text to full white, fighting
   the tool's intended hierarchy. Scoping matches this comment's own
   "topbar controls only" intent. */
[data-theme="dark"] .cl-tbtn:not(.cl-tbtn--primary):not(.active):not(.is-active),
[data-theme="dark"] .cl-topbar .cl-pill:not(.is-active) {
  border-color: var(--cl-text);
  color: var(--cl-text);
}
[data-theme="dark"] .cl-tbtn:not(.cl-tbtn--primary):not(.active):not(.is-active):hover,
[data-theme="dark"] .cl-topbar .cl-pill:not(.is-active):hover {
  border-color: var(--cl-text);
  color: var(--cl-text);
  background: rgba(255, 255, 255, .06);
}
.cl-tbtn[disabled],
.cl-tbtn:disabled { opacity: .5; cursor: not-allowed; }
.cl-tbtn svg { width: 12px; height: 12px; flex-shrink: 0; }

.cl-tbtn--primary {
  font-weight: 700;
  padding: 7px 14px;
  background: var(--cl-text);
  color: var(--cl-bg);
  border-color: var(--cl-text);
}
/* Primary trigger (EXPORT PDF) — INVERT to TRANSPARENT/outline on hover, both
   themes. Mirror of .cl-pill.back-link (outline→fill). Primary is excluded
   from the dark topbar override above, so this one rule covers both themes;
   --cl-text is theme-aware so text+border stay legible in light and dark. */
.cl-tbtn--primary:hover { background: transparent; color: var(--cl-text); border-color: var(--cl-text); opacity: 1; }


/* ── Dropdown menu chrome (.menu-wrap / .menu-dropdown) ──────── */
/* When a tool wraps a legacy .menu-wrap with .cl-menu-wrap, the
 * dropdown panel inside it picks up editorial card styling. */
.cl-menu-wrap { position: relative; }
.cl-menu-wrap .menu-dropdown {
  background: var(--cl-card);
  border: 1px solid var(--cl-border);
  box-shadow: 0 12px 40px rgba(0,0,0,.18);
  border-radius: 0;
}
[data-theme="dark"] .cl-menu-wrap .menu-dropdown { box-shadow: 0 12px 40px rgba(0,0,0,.45); }
.cl-menu-wrap .menu-section-label {
  font-family: var(--cl-font-mono); font-size: 9px;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--cl-text-muted);
}
.cl-menu-wrap .menu-item { color: var(--cl-text); }
.cl-menu-wrap .menu-item:hover { background: var(--cl-card-alt); }


/* ════════════════════════════════════════════════════════════════════
   Phase 2 — Stats row / Toolbar / Section headers / Project logos
   ════════════════════════════════════════════════════════════════════
   These rules layer ON TOP of Flight Grid's existing legacy classes
   (.statsrow / .stat / .stat-n / .stat-l, .toolbar / .chip / .filter-label,
   .section-header / .section-title / .section-bar / .section-count, and
   .client-logo / .client-logo-placeholder). The legacy classes stay on
   the elements so any JS that targets them keeps working — we just
   restyle. Status / direction color coding is retained because it's
   functional information (active filter state, flight direction).
   ════════════════════════════════════════════════════════════════════ */


/* ── Stats row ────────────────────────────────────────────────── */
.cl-topbar ~ .statsrow,
body .statsrow {
  background: var(--cl-card-alt);
  border-bottom: 1px solid var(--cl-border);
  padding: 0;
}
body .statsrow .stat {
  border-right: 1px solid var(--cl-border-soft);
  padding: 16px 20px;
}
body .statsrow .stat:last-child { border-right: none; }
body .statsrow .stat-n {
  font-family: var(--cl-font-mono);
  font-size: 26px; font-weight: 500;
  letter-spacing: -.01em; line-height: 1;
  color: var(--cl-text);
}
body .statsrow .stat-l {
  font-family: var(--cl-font-mono);
  font-size: 9.5px; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--cl-text-muted);
  margin-top: 8px;
}
/* Keep functional color coding on the numerals — In = green, Out =
 * purple, etc. The mono-uppercase label stays muted so it reads as
 * structural metadata, not as the colored thing. */
body .statsrow .stat-n.n-in,
body .statsrow .stat-n.n-arr  { color: var(--cl-ok); }
body .statsrow .stat-n.n-out,
body .statsrow .stat-n.n-dep  { color: #7F77DD; /* purple — outbound */ }
body .statsrow .stat-n.n-conf { color: #1E5C82; }
body .statsrow .stat-n.n-pend { color: var(--cl-warn); }


/* ── Toolbar (filters + search) ──────────────────────────────── */
body .toolbar {
  background: var(--cl-surface);
  border-bottom: 1px solid var(--cl-border);
  padding: 10px 24px;
  gap: 10px;
}
body .filter-label {
  font-family: var(--cl-font-mono);
  font-size: 9px; font-weight: 600;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--cl-text-muted);
}
/* Squared, mono uppercase chips — base state is outlined-only.
 * Functional status colors retained on the active classes below. */
body .toolbar .chip {
  font-family: var(--cl-font-mono);
  font-size: 9.5px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  padding: 5px 10px; height: 26px;
  border: 1px solid var(--cl-border);
  border-radius: 0 !important;
  background: transparent;
  color: var(--cl-text-muted);
  display: inline-flex; align-items: center;
}
body .toolbar .chip:hover {
  border-color: var(--cl-text2);
  color: var(--cl-text);
}
body .toolbar .chip.on-all {
  background: var(--cl-text);
  border-color: var(--cl-text);
  color: var(--cl-bg);
}
/* Active status chips keep their semantic colors but pick up squared
 * corners + mono treatment from the base rule above. */
body .toolbar .chip.on-in   { border-color: var(--cl-ok);  color: var(--cl-ok);  background: transparent; }
body .toolbar .chip.on-out  { border-color: #7F77DD; color: #7F77DD; background: transparent; }
body .toolbar .chip.on-conf { border-color: #2E7DD1; color: #2E7DD1; background: transparent; }
body .toolbar .chip.on-pend { border-color: var(--cl-warn); color: var(--cl-warn); background: transparent; }
body .toolbar .chip.on-arr  { border-color: var(--cl-ok); color: var(--cl-ok); background: transparent; }
body .toolbar .chip.on-cancel { border-color: var(--cl-err); color: var(--cl-err); background: transparent; }

body .toolbar .tdivider {
  width: 1px; height: 18px;
  background: var(--cl-border); margin: 0 4px;
}

/* Search wrap — squared, hairline border, mono input */
body .toolbar .search-wrap {
  margin-left: auto;
  border: 1px solid var(--cl-border);
  background: var(--cl-surface);
  border-radius: 0;
  padding: 4px 10px;
  height: 28px;
}
body .toolbar .search-wrap:focus-within { border-color: var(--cl-text2); }
body .toolbar .search-wrap input {
  font-family: var(--cl-font-body);
  font-size: 12px; color: var(--cl-text);
  background: transparent;
}
body .toolbar .search-wrap input::placeholder { color: var(--cl-text3); }


/* ── Section headers (Inbound / Outbound / Inactive) ─────────── */
body .grid-body .section-header,
body .grid-body .section-header-inactive {
  margin-top: 28px;
  padding: 0;
  gap: 10px;
}
body .grid-body .section-header:first-child { margin-top: 8px; }
body .grid-body .section-title {
  font-family: var(--cl-font-mono);
  font-size: 10px; font-weight: 700;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--cl-text);
}
/* Direction-specific tints kept — In=green, Out=purple, Inactive=muted. */
body .grid-body .section-title.in       { color: var(--cl-ok); }
body .grid-body .section-title.out      { color: #7F77DD; }
body .grid-body .section-title.inactive { color: var(--cl-text-muted); }
body .grid-body .section-bar {
  height: 1px; background: var(--cl-border);
}
body .grid-body .section-count {
  font-family: var(--cl-font-mono);
  font-size: 9px; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--cl-text-muted);
  background: transparent;
  border: 1px solid var(--cl-border);
  border-radius: 0;
  padding: 3px 8px;
}
body .grid-body .inactive-chevron { color: var(--cl-text-muted); }


/* ── Project logo slots (Client / Agency / Prod Co.) ─────────── */
/* These render inside the brand bar's right cluster. Squared,
 * mono uppercase, hairline dashed border for empty state to match
 * the editorial language. */
.cl-fg-brand-slots {
  display: inline-flex; align-items: center; gap: 24px;
}
.cl-brand-bar .client-logo-placeholder {
  height: 26px; padding: 0 10px;
  border: 1px dashed rgba(255, 255, 255, .22);
  border-radius: 0;
  display: inline-flex; align-items: center;
  font-family: var(--cl-font-mono);
  font-size: 9.5px; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--cl-brand-fg-dim);
  background: transparent;
  cursor: pointer;
  transition: border-color .12s, color .12s;
}
.cl-brand-bar .client-logo-placeholder:hover {
  border-color: rgba(255, 255, 255, .55);
  color: var(--cl-brand-fg);
}
.cl-brand-bar .client-logo {
  height: 22px; max-width: 110px;
  object-fit: contain;
  border-radius: 0;
  display: inline-block;
  vertical-align: middle;
}


/* ════════════════════════════════════════════════════════════════════
   Phase 3 — Modal reskin (Add Flight, Custom Pickup, Export PDF,
              Driver PDF, Share, Twilio)
   ════════════════════════════════════════════════════════════════════
   Flight Grid has FOUR different modal markup patterns:
     · .fg-modal-backdrop + .fg-modal-card       (Add Flight, Custom Pickup)
     · .pdf-modal         + .pdf-modal-box       (Export PDF, Driver PDF)
     · .share-modal       + .share-modal-box     (Share)
     · #twilioModal       inline-styled          (Driver Setup)

   Reskinning all four to a consistent editorial look without changing
   markup. Each pattern picks up:
     · Squared card (border-radius: 0)
     · --cl-surface background, --cl-border hairline
     · --cl-card-alt head/foot bands
     · Italic Instrument Serif titles (via fg-modal-head-left, h2, etc.)
     · Mono uppercase eyebrows
     · cl-tbtn-style action buttons
     · Squared form inputs with --cl-text2 focus

   JS hooks (open/close handlers, form validation, submission) untouched.
   ════════════════════════════════════════════════════════════════════ */


/* ── Backdrop (shared scrim) ───────────────────────────────────── */
.fg-modal-backdrop,
.pdf-modal,
.share-modal {
  background: rgba(0, 0, 0, .72) !important;
  backdrop-filter: blur(3px);
  z-index: 3000;
}


/* ── .fg-modal-card (Add Flight, Custom Pickup) ────────────────── */
.fg-modal-card {
  background: var(--cl-surface) !important;
  border: 1px solid var(--cl-border) !important;
  border-radius: 0 !important;
  box-shadow: 0 24px 80px rgba(0, 0, 0, .55) !important;
  overflow: hidden;
}
.fg-modal-card .fg-modal-head {
  background: var(--cl-card-alt) !important;
  border-bottom: 1px solid var(--cl-border) !important;
  padding: 18px 22px !important;
}
.fg-modal-card .fg-modal-head-left {
  font-family: var(--cl-font-head) !important;
  font-style: italic;
  font-weight: 400 !important;
  font-size: 22px !important;
  letter-spacing: 0 !important;
  color: var(--cl-text) !important;
  gap: 10px;
}
.fg-modal-card .fg-modal-head-left svg { color: var(--cl-text-muted); }
.fg-modal-card .fg-modal-close {
  color: var(--cl-text-muted) !important;
  font-size: 20px;
}
.fg-modal-card .fg-modal-close:hover { color: var(--cl-text) !important; }

/* Card body forms: squared inputs, mono uppercase labels */
.fg-modal-card .form-section-title {
  font-family: var(--cl-font-mono) !important;
  font-size: 9px !important; font-weight: 600 !important;
  letter-spacing: .22em !important;
  text-transform: uppercase !important;
  color: var(--cl-text-muted) !important;
  padding-bottom: 6px !important;
  border-bottom: 1px solid var(--cl-border-soft);
  margin-bottom: 10px !important;
}
.fg-modal-card .form-label {
  font-family: var(--cl-font-mono) !important;
  font-size: 9px !important; font-weight: 600 !important;
  letter-spacing: .18em !important;
  text-transform: uppercase !important;
  color: var(--cl-text-muted) !important;
}
.fg-modal-card .form-input,
.fg-modal-card input[type="text"],
.fg-modal-card input[type="tel"],
.fg-modal-card input[type="email"],
.fg-modal-card input[type="datetime-local"],
.fg-modal-card input[type="date"],
.fg-modal-card input[type="time"],
.fg-modal-card input[type="number"],
.fg-modal-card select,
.fg-modal-card textarea {
  border-radius: 0 !important;
  border: 1px solid var(--cl-border) !important;
  background: var(--cl-surface) !important;
  color: var(--cl-text) !important;
  font-family: var(--cl-font-body);
  font-size: 13px;
  transition: border-color .15s;
}
.fg-modal-card .form-input:focus,
.fg-modal-card input:focus,
.fg-modal-card select:focus,
.fg-modal-card textarea:focus {
  border-color: var(--cl-text2) !important;
  outline: none !important;
}

/* Footer / action row at the bottom — pickup-modal-foot pattern */
.fg-modal-card .pickup-modal-foot {
  background: var(--cl-card-alt) !important;
  border-top: 1px solid var(--cl-border) !important;
  padding: 14px 22px !important;
  gap: 8px !important;
}


/* ── .pdf-modal + .pdf-modal-box (Export PDF, Driver PDF) ─────── */
/* The Export/Driver PDF modals are flat-sibling DOM (close-button +
 * eyebrow div + h2 + description div/p + .pdf-field × N + .pdf-actions)
 * with no head/body/foot wrappers. Composing a cream "head band" from
 * such markup produces misaligned borders + uneven padding, so we use
 * a uniform inset on the box itself and let .pdf-actions break out as
 * a full-bleed foot band via negative margins. The result reads as
 * "single white card, italic serif title, mono uppercase eyebrow,
 * gray description, stacked fields, cream foot band with actions". */
.pdf-modal-box {
  background: var(--cl-surface) !important;
  border: 1px solid var(--cl-border) !important;
  border-radius: 0 !important;
  padding: 26px 26px 0 !important;
  box-shadow: 0 24px 80px rgba(0, 0, 0, .55) !important;
  position: relative;  /* anchor for the absolute close button */
  /* `overflow: hidden` would clip the foot band's full-bleed
   * negative margins. Drop it — the box has no overflowing
   * children that need clipping. */
}
/* Eyebrow ("Export") — first <div> direct child after the close
 * button. The legacy markup uses inline styles for this; we override
 * them all explicitly to land in the editorial type system. */
.pdf-modal-box > div:not(.pdf-field):not(.pdf-actions):first-of-type {
  margin: 0 0 4px 0 !important;
  padding: 0 !important;
  background: transparent !important;
  font-family: var(--cl-font-mono) !important;
  font-size: 9.5px !important; font-weight: 600 !important;
  letter-spacing: .22em !important;
  text-transform: uppercase !important;
  color: var(--cl-text-muted) !important;
}
/* Title — italic Instrument Serif on white. */
.pdf-modal-box > h2 {
  margin: 0 0 6px 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  font-family: var(--cl-font-head) !important;
  font-style: italic !important;
  font-weight: 400 !important;
  font-size: 22px !important;
  letter-spacing: 0 !important;
  line-height: 1.15 !important;
  color: var(--cl-text) !important;
}
/* Description (sits after h2 — div for Export PDF, p for Driver PDF). */
.pdf-modal-box > h2 + div:not(.pdf-field):not(.pdf-actions),
.pdf-modal-box > h2 + p {
  margin: 0 0 18px 0 !important;
  padding: 0 !important;
  background: transparent !important;
  font-family: var(--cl-font-body) !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--cl-text-muted) !important;
  line-height: 1.5 !important;
}
/* Field rows — consistent vertical rhythm between fields. */
.pdf-modal-box > .pdf-field {
  margin: 0 0 14px 0 !important;
  padding: 0 !important;
}
.pdf-modal-box > .pdf-field:last-of-type { margin-bottom: 18px !important; }
/* Foot band — actions row breaks out of the box's padding to render
 * full-bleed against the card's left/right edges, with a cream
 * background + hairline top border. The negative L/R margins cancel
 * out the box padding (26px) so the band extends edge-to-edge. */
.pdf-modal-box > .pdf-actions {
  background: var(--cl-card-alt) !important;
  border-top: 1px solid var(--cl-border) !important;
  padding: 14px 26px !important;
  margin: 0 -26px !important;
  gap: 8px !important;
}
/* PDF action buttons */
.pdf-btn {
  font-family: var(--cl-font-mono) !important;
  font-size: 10px !important; font-weight: 600 !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
  height: 32px;
  padding: 0 14px !important;
  border-radius: 0 !important;
  border: 1px solid var(--cl-border) !important;
  background: transparent !important;
  color: var(--cl-text2) !important;
  transition: border-color .15s, color .15s, background .15s;
}
.pdf-btn:hover {
  border-color: var(--cl-text2) !important;
  color: var(--cl-text) !important;
}
.pdf-btn.primary {
  font-weight: 700 !important;
  background: var(--cl-text) !important;
  border-color: var(--cl-text) !important;
  color: var(--cl-bg) !important;
}
.pdf-btn.primary:hover {
  background: var(--cl-text2) !important;
  border-color: var(--cl-text2) !important;
  color: var(--cl-bg) !important;
}
/* Scope filter chips inside PDF modal — match toolbar chip style */
.pdf-scope-btn {
  font-family: var(--cl-font-mono) !important;
  font-size: 9.5px !important; font-weight: 600 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  border-radius: 0 !important;
  border: 1px solid var(--cl-border) !important;
  background: transparent !important;
  color: var(--cl-text-muted) !important;
}
.pdf-scope-btn:hover {
  border-color: var(--cl-text2) !important;
  color: var(--cl-text) !important;
}
.pdf-scope-btn.on {
  background: var(--cl-text) !important;
  border-color: var(--cl-text) !important;
  color: var(--cl-bg) !important;
}
/* Inputs inside PDF modal */
.pdf-modal-box input,
.pdf-modal-box select,
.pdf-modal-box textarea {
  border-radius: 0 !important;
  border: 1px solid var(--cl-border) !important;
  background: var(--cl-surface) !important;
  color: var(--cl-text) !important;
  font-family: var(--cl-font-body);
}
.pdf-modal-box input:focus,
.pdf-modal-box select:focus,
.pdf-modal-box textarea:focus {
  border-color: var(--cl-text2) !important;
  outline: none !important;
}
/* Close (×) button */
.pdf-modal-box > button[onclick*="display='none'"]:first-of-type {
  color: var(--cl-text-muted) !important;
  background: transparent !important;
}


/* ── .share-modal + .share-modal-box ─────────────────────────── */
/* Same flat-sibling structure as .pdf-modal-box. Same fix: uniform
 * inset on the box, mono eyebrow, italic serif title, gray
 * description, content below. Share modal usually doesn't have
 * a foot-band action row (the Copy button sits inline with the URL
 * field), so no cream foot band needed. */
.share-modal-box {
  background: var(--cl-surface) !important;
  border: 1px solid var(--cl-border) !important;
  border-radius: 0 !important;
  padding: 26px !important;
  box-shadow: 0 24px 80px rgba(0, 0, 0, .55) !important;
  position: relative;
}
.share-modal-box > div:not(.pdf-field):not(.pdf-actions):first-of-type {
  margin: 0 0 4px 0 !important;
  padding: 0 !important;
  background: transparent !important;
  font-family: var(--cl-font-mono) !important;
  font-size: 9.5px !important; font-weight: 600 !important;
  letter-spacing: .22em !important;
  text-transform: uppercase !important;
  color: var(--cl-text-muted) !important;
}
.share-modal-box > h2 {
  margin: 0 0 6px 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  font-family: var(--cl-font-head) !important;
  font-style: italic !important;
  font-weight: 400 !important;
  font-size: 22px !important;
  letter-spacing: 0 !important;
  line-height: 1.15 !important;
  color: var(--cl-text) !important;
}
.share-modal-box > h2 + div:not(.pdf-field):not(.pdf-actions),
.share-modal-box > h2 + p {
  margin: 0 0 18px 0 !important;
  padding: 0 !important;
  background: transparent !important;
  font-family: var(--cl-font-body) !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--cl-text-muted) !important;
  line-height: 1.5 !important;
}
.share-modal-box input,
.share-modal-box textarea {
  border-radius: 0 !important;
  border: 1px solid var(--cl-border) !important;
  background: var(--cl-surface) !important;
  color: var(--cl-text) !important;
  font-family: var(--cl-font-mono);
}
.share-modal-box input:focus { border-color: var(--cl-text2) !important; outline: none !important; }


/* ── Twilio modal (inline-styled, ID-targeted) ────────────────── */
#twilioModal {
  background: rgba(0, 0, 0, .72) !important;
  backdrop-filter: blur(3px);
  z-index: 3000;
}
#twilioModal > div {
  background: var(--cl-surface) !important;
  border: 1px solid var(--cl-border) !important;
  border-radius: 0 !important;
  box-shadow: 0 24px 80px rgba(0, 0, 0, .55) !important;
}
#twilioModal h2 {
  font-family: var(--cl-font-head) !important;
  font-style: italic !important;
  font-weight: 400 !important;
  font-size: 22px !important;
  color: var(--cl-text) !important;
}
#twilioModal h3,
#twilioModal h4,
/* The Driver Setup eyebrow. It used to carry its own inline styles, so this
 * block never needed to cover it; once those were replaced by a class the
 * eyebrow fell through to body copy — DM Sans 14px — while the other five
 * Flight Grid modals were mono 9.5px. Same values as .pdf-modal-box's
 * eyebrow so all six read as one family. */
#twilioModal .fg-eyebrow {
  font-family: var(--cl-font-mono) !important;
  font-size: 9.5px !important;
  font-weight: 600 !important;
  letter-spacing: .22em !important;
  text-transform: uppercase !important;
  color: var(--cl-text-muted) !important;
}
/* The generic colour rule below must not re-colour it. */
#twilioModal p,
#twilioModal li,
#twilioModal div { color: var(--cl-text2); }
#twilioModal a { color: var(--cl-accent); }
#twilioModal code,
#twilioModal pre {
  font-family: var(--cl-font-mono);
  background: var(--cl-card-alt) !important;
  border: 1px solid var(--cl-border-soft);
  border-radius: 0 !important;
  color: var(--cl-text) !important;
}
/* The (×) close button in the corner */
#twilioModal > div > button[onclick*="display='none'"] {
  color: var(--cl-text-muted) !important;
}


/* ════════════════════════════════════════════════════════════════════
   Phase 4 — Table refinement (Flight Grid)
   ════════════════════════════════════════════════════════════════════
   Final pass on the main flights table — column headers, row styling,
   status pills, inline cell content (passenger / route / time / flight
   link). Functional state colors (sr-inflight, sr-delayed, s-landed,
   etc.) are retained because they communicate flight status; the
   editorial treatment is about the chrome around them, not the colors.
   ════════════════════════════════════════════════════════════════════ */


/* ── Table container ─────────────────────────────────────────── */
body .grid-body .table-wrap {
  border: 1px solid var(--cl-border) !important;
  border-radius: 0 !important;
  background: var(--cl-surface);
  overflow-x: auto;
}
body .grid-body .table-wrap table {
  background: var(--cl-surface);
  width: 100%;
  border-collapse: collapse;
}


/* ── Column headers (thead th) ──────────────────────────────── */
body .grid-body .table-wrap thead th {
  background: var(--cl-card-alt) !important;
  border-bottom: 1px solid var(--cl-border) !important;
  font-family: var(--cl-font-mono) !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: .22em !important;
  text-transform: uppercase !important;
  color: var(--cl-text-muted) !important;
  padding: 12px 14px !important;
  text-align: left;
}
body .grid-body .table-wrap thead th.th-status { text-align: center; }
body .grid-body .table-wrap thead th .pickup-col-header {
  font-family: var(--cl-font-mono);
  font-size: 9px;
  letter-spacing: .22em;
  color: var(--cl-text-muted);
}


/* ── Row body cells ──────────────────────────────────────────── */
body .grid-body .table-wrap tbody td {
  border-bottom: 1px solid var(--cl-border-soft) !important;
  padding: 12px 14px !important;
  vertical-align: middle;
  font-family: var(--cl-font-body);
  font-size: 13px;
  color: var(--cl-text);
}
body .grid-body .table-wrap tbody tr:last-child td {
  border-bottom: 0 !important;
}
body .grid-body .table-wrap tbody tr.data-row { transition: background .12s; }
body .grid-body .table-wrap tbody tr.data-row:hover {
  background: var(--cl-card-alt);
}
body .grid-body .table-wrap tbody tr.inactive-row td {
  color: var(--cl-text-muted) !important;
}


/* ── Functional row accents (left-border for status states) ── */
/* The legacy CSS uses tr.sr-inflight td:first-child { border-left: 3px
 * solid var(--purple) } etc. Re-emit those rules in the cl-* token
 * space so they pick up theme-consistent colors. */
body .grid-body .table-wrap tr.sr-inflight  td:first-child { border-left: 3px solid #7F77DD !important; }
body .grid-body .table-wrap tr.sr-delayed   td:first-child { border-left: 3px solid var(--cl-warn) !important; }
body .grid-body .table-wrap tr.sr-landed    td:first-child { border-left: 3px solid var(--cl-ok) !important; }
body .grid-body .table-wrap tr.sr-cancelled td:first-child { border-left: 3px solid var(--cl-err) !important; }
body .grid-body .table-wrap tr.sr-diverted  td:first-child { border-left: 3px solid #D85A30 !important; }


/* ── Cell content classes ────────────────────────────────────── */
body .grid-body .pax-name {
  font-family: var(--cl-font-body);
  font-size: 13px;
  font-weight: 500;
  color: var(--cl-text);
}
body .grid-body .pax-role {
  font-family: var(--cl-font-mono);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cl-text-muted);
  margin-top: 3px;
}
body .grid-body .route {
  font-family: var(--cl-font-mono);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--cl-text);
  gap: 6px;
}
body .grid-body .route-arrow {
  color: var(--cl-text3);
  font-size: 10px;
}
body .grid-body .time-main {
  font-family: var(--cl-font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .02em;
  color: var(--cl-text);
}
body .grid-body .time-date {
  font-family: var(--cl-font-mono);
  font-size: 9px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cl-text-muted);
  margin-top: 2px;
}
body .grid-body .flight-link {
  font-family: var(--cl-font-mono);
  font-size: 12px;
  font-weight: 500;
  color: var(--cl-text) !important;
  text-decoration: none;
  border-bottom: 1px solid var(--cl-border) !important;
  transition: border-color .15s, color .15s;
}
body .grid-body .flight-link:hover {
  color: var(--cl-text) !important;
  border-bottom-color: var(--cl-text2) !important;
}


/* ── Status pills (squared, mono uppercase) ─────────────────── */
/* The .s-* modifier classes already encode the right hue tint via the
 * legacy --green-dim / --amber-dim / etc. tokens. Override the SHAPE +
 * typography to match the editorial language while keeping the
 * functional color coding intact. */
body .grid-body .status-pill {
  font-family: var(--cl-font-mono) !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: .18em !important;
  text-transform: uppercase !important;
  padding: 5px 10px !important;
  border-radius: 0 !important;
  border: 1px solid currentColor !important;
  background: transparent !important;
  min-width: 100px;
  text-align: center;
  cursor: pointer;
  transition: opacity .15s;
}
body .grid-body .status-pill:hover { opacity: .75; }

/* Each status keeps its semantic color but renders as a squared
 * outlined chip instead of a filled rounded pill. */
body .grid-body .s-pending   { color: var(--cl-warn) !important; }
body .grid-body .s-scheduled { color: #2E7DD1 !important; }
body .grid-body .s-confirmed { color: var(--cl-ok)  !important; }
body .grid-body .s-boarding  { color: #17A2B8 !important; }
body .grid-body .s-inflight,
body .grid-body .s-departed  { color: #7F77DD !important; }
body .grid-body .s-landed    { color: var(--cl-ok)  !important; }
body .grid-body .s-delayed   { color: var(--cl-warn) !important; }
body .grid-body .s-cancelled { color: var(--cl-err) !important; }
body .grid-body .s-diverted  { color: #D85A30 !important; }


/* ── Pickup cell controls ────────────────────────────────────── */
body .grid-body .pickup-time {
  font-family: var(--cl-font-mono);
  color: var(--cl-text);
}
body .grid-body .pickup-time.is-empty { color: var(--cl-text3); }
body .grid-body .pickup-select {
  font-family: var(--cl-font-mono) !important;
  font-size: 9.5px !important;
  font-weight: 500 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  border: 1px solid var(--cl-border) !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--cl-text-muted) !important;
}
body .grid-body .pickup-select:hover {
  border-color: var(--cl-text2) !important;
  color: var(--cl-text) !important;
}
body .grid-body .pickup-select:focus {
  border-color: var(--cl-text2) !important;
  outline: none !important;
}
body .grid-body .pickup-select.is-set    { color: var(--cl-text) !important; border-color: var(--cl-border) !important; }
body .grid-body .pickup-select.is-custom { color: var(--cl-warn) !important; border-color: var(--cl-warn) !important; }


/* ── Empty state / loading ──────────────────────────────────── */
body .grid-body .empty-state {
  padding: 60px 20px;
  text-align: center;
  color: var(--cl-text-muted);
  font-family: var(--cl-font-body);
}
body .grid-body .empty-state svg { width: 32px; height: 32px; margin-bottom: 12px; opacity: .5; }
body .grid-body .empty-state p {
  font-family: var(--cl-font-head);
  font-style: italic;
  font-size: 18px;
  margin: 0 0 6px;
  color: var(--cl-text);
}
body .grid-body .empty-state small {
  font-family: var(--cl-font-mono);
  font-size: 9.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--cl-text-muted);
}
body .grid-body .loading-state {
  padding: 60px 20px;
  display: flex; align-items: center; justify-content: center; gap: 12px;
  color: var(--cl-text-muted);
  font-family: var(--cl-font-mono);
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
}


/* ════════════════════════════════════════════════════════════════════
   Phase 4b — Expanded-row + Add Flight form + nested section headers
   ════════════════════════════════════════════════════════════════════
   Layered on top of the existing legacy classes (.exp-* in expanded
   table rows; .form-* in the Add Flight / Custom Pickup modals).
   ════════════════════════════════════════════════════════════════════ */


/* ── Expanded row (clicking a flight row reveals editor controls) ── */
body .grid-body tr.expanded-row td {
  background: var(--cl-card-alt) !important;
  border-bottom: 1px solid var(--cl-border) !important;
  padding: 16px 18px !important;
}
body .exp-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 14px;
}
body .exp-label {
  font-family: var(--cl-font-mono) !important;
  font-size: 9px !important;
  font-weight: 600 !important;
  letter-spacing: .22em !important;
  text-transform: uppercase !important;
  color: var(--cl-text-muted) !important;
  margin-bottom: 5px;
}
body .exp-input,
body .exp-notes textarea {
  width: 100%;
  background: var(--cl-surface) !important;
  border: 1px solid var(--cl-border) !important;
  border-radius: 0 !important;
  padding: 8px 10px !important;
  color: var(--cl-text) !important;
  font-family: var(--cl-font-body) !important;
  font-size: 13px !important;
  outline: none;
  transition: border-color .15s;
}
body .exp-input.mono-input { font-family: var(--cl-font-mono) !important; }
body .exp-input:focus,
body .exp-notes textarea:focus {
  border-color: var(--cl-text2) !important;
}
body .exp-select {
  width: 100%;
  background: var(--cl-surface) !important;
  border: 1px solid var(--cl-border) !important;
  border-radius: 0 !important;
  padding: 8px 30px 8px 10px !important;
  color: var(--cl-text) !important;
  font-family: var(--cl-font-body) !important;
  font-size: 13px !important;
  outline: none;
  cursor: pointer;
  /* Custom chevron — same pattern as Crew List section-type select. */
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%236E665B' stroke-width='1.4' stroke-linecap='square'><path d='M1 1.5 L6 6.5 L11 1.5'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 10px 7px;
}
[data-theme="dark"] body .exp-select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23878B8B' stroke-width='1.4' stroke-linecap='square'><path d='M1 1.5 L6 6.5 L11 1.5'/></svg>");
}
body .exp-select:focus {
  border-color: var(--cl-text2) !important;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%231A1612' stroke-width='1.6' stroke-linecap='square'><path d='M1 1.5 L6 6.5 L11 1.5'/></svg>");
}
[data-theme="dark"] body .exp-select:focus {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23FFFFFF' stroke-width='1.6' stroke-linecap='square'><path d='M1 1.5 L6 6.5 L11 1.5'/></svg>");
}
body .exp-select option {
  background: var(--cl-surface);
  color: var(--cl-text);
  font-family: var(--cl-font-body);
}

/* Action buttons at the bottom of an expanded row */
body .exp-actions {
  display: flex; align-items: center; gap: 8px;
  padding-top: 14px;
  border-top: 1px solid var(--cl-border) !important;
  margin-top: 4px;
}
body .exp-btn {
  font-family: var(--cl-font-mono) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
  padding: 7px 14px !important;
  border-radius: 0 !important;
  border: 1px solid var(--cl-border) !important;
  background: transparent !important;
  color: var(--cl-text2) !important;
  cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
}
body .exp-btn:hover {
  border-color: var(--cl-text2) !important;
  color: var(--cl-text) !important;
}
body .exp-btn.save {
  font-weight: 700 !important;
  background: var(--cl-text) !important;
  border-color: var(--cl-text) !important;
  color: var(--cl-bg) !important;
}
body .exp-btn.save:hover {
  background: var(--cl-text2) !important;
  border-color: var(--cl-text2) !important;
}
body .exp-btn.del {
  color: var(--cl-err) !important;
  border-color: var(--cl-border) !important;
}
body .exp-btn.del:hover {
  border-color: var(--cl-err) !important;
  background: transparent !important;
}
body .exp-notes { margin-bottom: 14px; }


/* ── Add Flight / Custom Pickup form (.form-* in fg-modal-card) ── */
.fg-modal-card .form-grid    { display: grid; grid-template-columns: 1fr 1fr;     gap: 12px; margin-bottom: 12px; }
.fg-modal-card .form-grid-3  { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.fg-modal-card .form-label {
  font-family: var(--cl-font-mono) !important;
  font-size: 9px !important;
  font-weight: 600 !important;
  letter-spacing: .22em !important;
  text-transform: uppercase !important;
  color: var(--cl-text-muted) !important;
  margin-bottom: 6px;
}
.fg-modal-card .form-input {
  width: 100%;
  background: var(--cl-surface) !important;
  border: 1px solid var(--cl-border) !important;
  border-radius: 0 !important;
  padding: 8px 10px !important;
  color: var(--cl-text) !important;
  font-family: var(--cl-font-body) !important;
  font-size: 13px !important;
  outline: none;
  transition: border-color .15s;
}
.fg-modal-card .form-input:focus { border-color: var(--cl-text2) !important; }

.fg-modal-card .form-select {
  width: 100%;
  background: var(--cl-surface) !important;
  border: 1px solid var(--cl-border) !important;
  border-radius: 0 !important;
  padding: 8px 30px 8px 10px !important;
  color: var(--cl-text) !important;
  font-family: var(--cl-font-body) !important;
  font-size: 13px !important;
  outline: none;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%236E665B' stroke-width='1.4' stroke-linecap='square'><path d='M1 1.5 L6 6.5 L11 1.5'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 10px 7px;
}
[data-theme="dark"] .fg-modal-card .form-select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23878B8B' stroke-width='1.4' stroke-linecap='square'><path d='M1 1.5 L6 6.5 L11 1.5'/></svg>");
}
.fg-modal-card .form-select:focus {
  border-color: var(--cl-text2) !important;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%231A1612' stroke-width='1.6' stroke-linecap='square'><path d='M1 1.5 L6 6.5 L11 1.5'/></svg>");
}
[data-theme="dark"] .fg-modal-card .form-select:focus {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23FFFFFF' stroke-width='1.6' stroke-linecap='square'><path d='M1 1.5 L6 6.5 L11 1.5'/></svg>");
}
.fg-modal-card .form-select option {
  background: var(--cl-surface);
  color: var(--cl-text);
  font-family: var(--cl-font-body);
}

/* Form section card (groups Passenger / Flight / Driver fields) */
.fg-modal-card .form-section {
  background: var(--cl-surface) !important;
  border: 1px solid var(--cl-border) !important;
  border-radius: 0 !important;
  padding: 16px !important;
  margin-bottom: 14px !important;
}
.fg-modal-card .form-section-title {
  /* Already styled in Phase 3 — re-emit for specificity in case the
   * Phase 3 selector loses to legacy rules in dark theme. */
  font-family: var(--cl-font-mono) !important;
  font-size: 9px !important;
  font-weight: 600 !important;
  letter-spacing: .22em !important;
  text-transform: uppercase !important;
  color: var(--cl-text-muted) !important;
  margin-bottom: 12px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--cl-border-soft);
}


/* ── Nested section headers inside the Inactive band ─────────── */
/* When the inactive section splits into per-direction subsections,
 * the inner section-headers should sit tighter than the top-level
 * ones (which have margin-top: 28px). Override the top margin so the
 * first nested header butts up against the inactive band toggle. */
body .grid-body .section-header.section-header--nested {
  margin-top: 18px;
}
body .grid-body .section-header.section-header--nested:first-child {
  margin-top: 8px;
}


/* ════════════════════════════════════════════════════════════════════
   Flight Grid PDF export — variant rules (Path A · Migration 018)
   ════════════════════════════════════════════════════════════════════
   The Flight Grid PDF export pipeline (exportPDF + exportDriverPDF in
   tools/flight-grid/grid.html) builds an HTML string with inline
   styles, then renderPageToCanvas() strips the iframe's <head> +
   <body> wrapper and injects the inner content into a host <div> in
   THIS document. The host div carries data-pdf-style="X" + the
   --client-color CSS var. html2canvas captures the host with the
   parent CSS rules applied — so the variant overrides below land in
   the captured PDF page.

   Class hooks (added to the JS string-builders):
     .fg-pdf-header           — top brand band
     .fg-pdf-header-project   — project name (right side)
     .fg-pdf-header-date      — date / page count (below project)
     .fg-pdf-header-logos     — divider+logos cluster on the left
     .fg-pdf-contacts         — coordinator/manager strip
     .fg-pdf-section-bar      — section divider title
     .fg-pdf-status-pill      — per-row status pill

   Editorial = no overrides (the inline-styled markup IS the Editorial
   look). Each variant uses !important to win against inline styles.
   ════════════════════════════════════════════════════════════════════ */


/* ── Classic × Flight Grid PDF ───────────────────────────────── */
[data-pdf-style="editorial"] .fg-pdf-header {
  background: #FFFFFF !important;
  border-top: 4px solid var(--client-color, #FF6C00) !important;
  border-bottom: 1px solid #E5E7EB !important;
  color: #1A1612 !important;
}
[data-pdf-style="editorial"] .fg-pdf-header-project {
  color: #0E0E0E !important;
  font-family: 'Instrument Serif', Georgia, serif !important;
  font-style: italic !important;
  font-weight: 400 !important;
  font-size: 18px !important;
  letter-spacing: 0 !important;
}
[data-pdf-style="editorial"] .fg-pdf-header-date {
  color: #6B7280 !important;
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-size: 9.5px !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
}
[data-pdf-style="editorial"] .fg-pdf-header-logos {
  border-left: 1px solid rgba(0, 0, 0, .14) !important;
}
[data-pdf-style="editorial"] .fg-pdf-contacts {
  background: #FAFAF7 !important;
  border-bottom: 1px solid #E5E7EB !important;
}
[data-pdf-style="editorial"] .fg-pdf-contacts span:first-child {
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  letter-spacing: .14em !important;
}
[data-pdf-style="editorial"] .fg-pdf-section-bar {
  background: transparent !important;
  border-bottom: 1px solid #E5E7EB !important;
}
[data-pdf-style="editorial"] .fg-pdf-section-bar > span {
  color: #0E0E0E !important;
  font-family: 'Instrument Serif', Georgia, serif !important;
  font-style: italic !important;
  font-weight: 400 !important;
  font-size: 18px !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
[data-pdf-style="editorial"] .fg-pdf-status-pill {
  background: transparent !important;
  border: 1px solid currentColor !important;
  border-radius: 0 !important;
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-weight: 700 !important;
  letter-spacing: .18em !important;
}


/* ── Modern × Flight Grid PDF ────────────────────────────────── */
[data-pdf-style="modern"] .fg-pdf-header {
  background: #FAFAF7 !important;
  border-left: 12px solid var(--client-color, #FF6C00) !important;
  border-bottom: 0 !important;
  color: #1A1612 !important;
}
[data-pdf-style="modern"] .fg-pdf-header-project {
  color: #0E0E0E !important;
  font-family: 'DM Sans', sans-serif !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  text-transform: uppercase !important;
  letter-spacing: -.02em !important;
}
[data-pdf-style="modern"] .fg-pdf-header-date {
  color: #1A1612 !important;
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-weight: 700 !important;
  font-size: 9.5px !important;
  letter-spacing: .22em !important;
  text-transform: uppercase !important;
}
[data-pdf-style="modern"] .fg-pdf-header-logos {
  border-left: 1px solid rgba(0, 0, 0, .14) !important;
}
[data-pdf-style="modern"] .fg-pdf-contacts {
  background: #FFFFFF !important;
  border-bottom: 1px solid #E5E7EB !important;
}
[data-pdf-style="modern"] .fg-pdf-contacts span:first-child {
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  letter-spacing: .14em !important;
}
[data-pdf-style="modern"] .fg-pdf-section-bar {
  background: var(--client-color, #FF6C00) !important;
  border-bottom: 0 !important;
  padding: 8px 28px !important;
}
[data-pdf-style="modern"] .fg-pdf-section-bar > span {
  color: #FFFFFF !important;
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-weight: 700 !important;
  font-size: 11px !important;
  letter-spacing: .22em !important;
  text-transform: uppercase !important;
}
[data-pdf-style="modern"] .fg-pdf-status-pill {
  background: transparent !important;
  border: 1px solid currentColor !important;
  border-radius: 0 !important;
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-weight: 700 !important;
  letter-spacing: .2em !important;
}

/* ── PDF export isolation ─────────────────────────────────────── */
/* While html2canvas is capturing the off-screen host div, hide every
   other top-level element on the page. Without this, html2canvas's
   document-clone pipeline picks up live elements that sit at left:0
   (brand bar wordmark image, topbar project title) and bakes them
   into the canvas alongside the host content — producing the stray
   "reelax." + project-name text seen at the left edge of every PDF.
   The host opts in by adding the `.fg-pdf-host` class.
   EXCEPTION: the shared rm-pdf-progress overlay (#rmxPdfOverlay) is kept
   visible. This class is toggled once per page, and hiding the overlay each
   time made the progress modal flash away during multi-page exports. The
   overlay must stay up (covering the viewport) for the whole run; it is never
   a descendant of .fg-pdf-host, so html2canvas — which targets the host
   directly — never captures it into the PDF. */
body.fg-pdf-rendering > *:not(.fg-pdf-host):not(#rmxPdfOverlay) {
  visibility: hidden !important;
}

/* ── PDF brand-style variants (Migration 018) ──────────────────
 *
 * Applies the platform's three brand styles (Editorial / Classic /
 * Modern) to every tool that uses a `.pdf-page` element as its render
 * surface. pdf-brand-bootstrap.js sets `body[data-pdf-style]` on page
 * load, and these rules cascade down to the .pdf-page descendants of
 * the tools that ship a generic page (rooming-tool, tech-package,
 * weather-report, welcome-package, hotel-exploration, gt-tool).
 *
 * Editorial = current look (no overrides). Classic and Modern restyle
 * surfaces, accent stripe placement, and headline typography. Each
 * tool's per-page header / table / footer keeps its own structure;
 * we only retint the framing pieces here so the same template reads
 * differently across the three brand vocabularies.
 *
 * Tools that need finer-grained control can layer their own
 * body[data-pdf-style="X"] .my-tool-pdf-* rules in their per-tool CSS;
 * the `!important` on these rules is intentional so they beat the
 * tool-specific defaults. */

/* Shared accent default — overridable per-org via --client-color. */
body[data-pdf-style] .pdf-page {
  --pdf-accent: var(--client-color, #FF6C00);
}

/* ── Variant: CLASSIC ─────────────────────────────────────────── */
body[data-pdf-style="editorial"] .pdf-page {
  background: #FFFFFF !important;
  color: #0E0E0E !important;
  border-top: 3px solid var(--pdf-accent) !important;
}
body[data-pdf-style="editorial"] .pdf-page .page-title,
body[data-pdf-style="editorial"] .pdf-page h1,
body[data-pdf-style="editorial"] .pdf-page .doc-title {
  font-family: 'Instrument Serif', Georgia, serif !important;
  font-style: italic !important;
  font-weight: 400 !important;
  letter-spacing: -.005em !important;
}
body[data-pdf-style="editorial"] .pdf-page .page-header,
body[data-pdf-style="editorial"] .pdf-page .pdf-header {
  border-bottom: 1px solid #E5E7EB !important;
}
body[data-pdf-style="editorial"] .pdf-page .page-footer,
body[data-pdf-style="editorial"] .pdf-page .pdf-footer {
  border-top: 1px solid var(--pdf-accent) !important;
  background: #FFFFFF !important;
  color: #6B7280 !important;
}

/* ── Variant: MODERN ──────────────────────────────────────────── */
body[data-pdf-style="modern"] .pdf-page {
  background: #FAFAF7 !important;
  color: #0E0E0E !important;
  border-left: 6px solid var(--pdf-accent) !important;
}
body[data-pdf-style="modern"] .pdf-page .page-title,
body[data-pdf-style="modern"] .pdf-page h1,
body[data-pdf-style="modern"] .pdf-page .doc-title {
  font-family: 'DM Sans', system-ui, sans-serif !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: -.02em !important;
}
body[data-pdf-style="modern"] .pdf-page .page-header,
body[data-pdf-style="modern"] .pdf-page .pdf-header {
  background: #FAFAF7 !important;
  border-bottom: 1px solid var(--pdf-accent) !important;
}
body[data-pdf-style="modern"] .pdf-page .page-footer,
body[data-pdf-style="modern"] .pdf-page .pdf-footer {
  background: #FAFAF7 !important;
  border-top: 1px solid #1A1612 !important;
  color: #1A1612 !important;
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  text-transform: uppercase !important;
  letter-spacing: .18em !important;
  font-size: .8em !important;
}


/* ────────────────────────────────────────────────────────────────────
   Canonical delete button — borderless red ✕
   (Style Guide §6.0 — platform-wide standard for every delete site)

   Pattern: `<button class="btn btn-danger btn-sm">✕</button>`
   26 × 26 borderless button, red ✕ glyph at rest, fills red with a
   white ✕ on hover. Sized to sit cleanly inside icon-strip rows
   (vehicle-toolbar, movement-actions, section-card heads) without
   adding visual weight. The hover red-fill is the destructive
   confirmation cue.

   The 0,3,0 specificity (three classes) intentionally beats any
   single-class .btn-sm or .btn-danger rule a per-tool CSS may
   already define, so adoption is just a markup change — no per-tool
   CSS needed.

   Migration history:
     2026-05-08  v1: 30×30 outlined red square (boxed)
     2026-05-08  v2: 26×26 borderless (current)

   See Style Guide §6.0 for usage rules + anti-patterns.
   ──────────────────────────────────────────────────────────────────── */
.btn.btn-danger.btn-sm {
  height: 22px;
  min-width: 22px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  color: var(--cl-err, #B83A3A);
  border-radius: 0;
  font-family: var(--cl-font-mono, 'JetBrains Mono', ui-monospace, monospace);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  transition: background .12s, color .12s;
}
.btn.btn-danger.btn-sm:hover {
  background: var(--cl-err, #B83A3A);
  color: #fff;
}


/* ────────────────────────────────────────────────────────────────────
   Section accordion — collapse mechanic (Migration 037, 2026-05-09)

   Promoted to canonical because the rules below were byte-identical
   across GT, Crew List, and Hotel (verified at promotion). The
   following selectors are the COLLAPSE MECHANIC ONLY — they handle
   the show/hide of the body and the chevron rotation. They do NOT
   include `.cl-section-eyebrow` (the heading container) or its
   numbered/+ADD inner spans, because those drifted in spec across
   tools (Crew List 10px/500/.2em vs GT-Hotel 10.5px/600/.22em). The
   eyebrow heading rules are deferred to Phase 1.5 reconciliation.

   See Style Guide §7.0, §7.0.1, §7.1.
   ──────────────────────────────────────────────────────────────────── */

/* Eyebrow click affordance — when the whole row carries the toggle,
   the cursor becomes a pointer to telegraph clickability. */
.cl-section-eyebrow[onclick] { cursor: pointer; }

/* Collapsed-eyebrow margin reset — when the section collapses, the
   eyebrow is the only thing left, so it shouldn't have a margin
   below it pushing space toward an invisible body. */
.collapsible-section.collapsed .cl-section-eyebrow {
  margin-bottom: 0;
}

/* +ADD-variant title span — flex:1 pushes the title to fill space
   between the eyebrow's left edge and the +ADD/chevron buttons. */
.cl-section-eyebrow-title {
  flex: 1;
  cursor: pointer;
  user-select: none;
}

/* Chevron toggle button — borderless, transparent, muted color
   that sharpens on hover. The .collapse-icon SVG inside rotates
   -90° when the section collapses (see below). */
.cl-section-eyebrow-toggle {
  background: transparent;
  border: 0;
  padding: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--cl-text-muted);
  cursor: pointer;
  transition: color .12s;
}
.cl-section-eyebrow-toggle:hover { color: var(--cl-text); }
.cl-section-eyebrow-toggle .collapse-icon {
  width: 11px;
  height: 11px;
  transition: transform .15s ease;
}

/* Collapsible body — base "shown" state, switched to "hidden" by
   the .collapsed modifier on the parent .collapsible-section. */
.collapsible-body { display: block; }
.collapsible-section.collapsed .collapsible-body { display: none; }

/* Chevron rotation — collapsed section's chevron points right (▶);
   open section's chevron points down (▼) at 0deg. See §7.0.1. */
.collapsible-section.collapsed .cl-section-eyebrow .collapse-icon {
  transform: rotate(-90deg);
}

/* Preview pane zoom-control separator — the "·" between FIT / 100% /
   200% buttons. Always muted with low opacity. */
.cl-preview-zoom-sep { color: var(--cl-text3); opacity: .6; }


/* ────────────────────────────────────────────────────────────────────
   Section eyebrow heading family — full spec  (Migration 037, Phase 1.5)

   Promoted from per-tool CSS to canonical. Spec source: Crew List
   (the user picked Crew List's baseline). GT and Hotel previously
   used 10.5px / 600 / .22em / center-aligned; they will now match
   Crew List's 10px / 500 / .2em / baseline-aligned. Visual shift is
   subtle but real — the eyebrow row gets slightly lighter and
   slightly shorter.

   See Style Guide §7.0.2 (numbered title format) + §7.1.
   ──────────────────────────────────────────────────────────────────── */

/* The eyebrow row itself. baseline-aligned so the small mono number
   sits on the same baseline as the larger uppercase title text. */
.cl-section-eyebrow {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 12px;
  font-family: var(--cl-font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--cl-text-muted);
  user-select: none;
}

/* The numbered prefix (`01`, `02`, …). Slightly smaller and lighter
   color than the title so the number reads as editorial chrome, not
   a heading. No margin-right — the inline space character between
   the number span and the title text is sufficient separation. */
.cl-section-eyebrow-num {
  font-family: var(--cl-font-mono);
  font-size: 9px;
  color: var(--cl-text3);
}

/* The "+ ADD" inline action button. Project-accent first (so a
   project's customized accent color reaches the button), falling
   back to the platform accent. */
.cl-section-eyebrow-add {
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  font-family: var(--cl-font-mono);
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  /* Platform default is the brand orange (#FF6C00). Org-level accent
     overrides via --accent (set by admin dashboard). --cl-accent (plum)
     is intentionally NOT the fallback here — it's reserved for modal
     accent dots and brand-identity elements (Style Guide §11.10). */
  color: var(--accent, #FF6C00);
}
.cl-section-eyebrow-add:hover { opacity: .85; }


/* ────────────────────────────────────────────────────────────────────
   Section icon strip — `.cl-section-icon-btn`  (Migration 037, Phase 1.5)

   Promoted from per-tool CSS to canonical. Spec source: Crew List
   (22×22). GT previously used 26×26; the GT vehicle-toolbar / movement-
   actions buttons will shrink slightly. Hover behavior unchanged.

   See Style Guide §6.1.
   ──────────────────────────────────────────────────────────────────── */
.cl-section-icon-btn {
  width: 22px;
  height: 22px;
  padding: 0;
  background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
  color: var(--cl-text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color .12s, background .12s;
}
.cl-section-icon-btn:hover {
  color: var(--cl-text);
  background: var(--cl-card-alt);
}
.cl-section-icon-btn[disabled] {
  opacity: .35;
  cursor: not-allowed;
}
.cl-section-icon-btn[disabled]:hover {
  color: var(--cl-text-muted);
  background: transparent;
}


/* ────────────────────────────────────────────────────────────────────
   Repeatable item cards — canonical `.cl-item`  (Migration 039)

   The SINGLE pattern for any editor list of repeatable objects a user
   adds N of (locations, hotels, rooms, vehicles, crew, days). One
   grammar at every altitude — [grip] [nn] [name] [icons] [✕] [chevron] —
   with depth encoded by containment + indent, NEVER by a new button
   language or a darker shade. Promoted from tech-package `.loc-item` +
   hotel-exploration `.hotel-item` (near-identical at promotion).

   ALTITUDES:
   - L0 section  → `.cl-section-eyebrow` (transparent, baseline — above).
   - L1 item     → `.cl-item` + `.cl-item__header` (shaded card).
   - L2 sub-item → also `.cl-item--nested` (indent + left rule). Stop here.

   Header REUSES the eyebrow inner spans (`.cl-section-eyebrow-num`,
   `-toggle`, `-add`), the §6.1 `.cl-section-icon-btn` strip, and the
   §6.0 `.btn.btn-danger.btn-sm` ✕. Body REUSES the §7.0 collapse
   mechanic — the card carries `.collapsible-section`, the body is
   `.collapsible-body`. The ONE thing the item header changes vs the
   section eyebrow is `align-items: center` (a row with a grip + icon
   buttons, not a baseline text label) plus the cream card shade.

   See Style Guide §7.8.
   ──────────────────────────────────────────────────────────────────── */

/* List wrapper — vertical stack, 8px rhythm between cards. */
.cl-item-list { display: flex; flex-direction: column; gap: 8px; }

/* The card. Full border, squared (§6.2), clips the shaded header. */
.cl-item {
  border: 1px solid var(--cl-rule);
  border-radius: 0;
  overflow: hidden;
  background: var(--cl-card);
}

/* Header row — center-aligned shaded card row. */
.cl-item__header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  background: var(--cl-card-alt);
  cursor: pointer;
  user-select: none;
  font-family: var(--cl-font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cl-text-muted);
  transition: background .15s;
}
.cl-item__header:hover { background: var(--cl-card-alt-hover); }

/* Item name — fills the row; sentence-case, heavier than the eyebrow
   number so it reads as the object's identity, not chrome. */
.cl-item__name {
  flex: 1;
  min-width: 0;
  font-family: var(--cl-font-body);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  color: var(--cl-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Body — reuses .collapsible-body (collapse mechanic §7.0); the item
   adds its own padding + divider. */
.cl-item > .collapsible-body {
  padding: 14px;
  border-top: 1px solid var(--cl-rule);
}

/* Chevron rotation in the item-header context (the §7.0 rule targets
   `.cl-section-eyebrow .collapse-icon`; the item header is its own row). */
.cl-item.collapsed > .cl-item__header .collapse-icon,
.collapsible-section.collapsed > .cl-item__header .collapse-icon {
  transform: rotate(-90deg);
}

/* L2 — nested sub-item. Indent + a 2px left rule signal depth; shade +
   grammar stay identical so it reads as the same kind of object, just
   contained. No L3 in a ~300px sidebar. */
.cl-item--nested { margin-left: 12px; border-left: 2px solid var(--cl-rule); }

/* Canonical drag handle (§7.7) — supersedes per-tool `.wp-drag-handle` /
   `.hotel-drag-handle` / `.drag-handle`. Lives left of the number. */
.cl-drag-handle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 22px;
  margin-right: 2px;
  flex-shrink: 0;
  background: transparent;
  border: 0;
  padding: 0;
  color: var(--cl-text3);
  cursor: grab;
  user-select: none;
  transition: color .15s;
}
.cl-drag-handle:hover  { color: var(--cl-text); }
.cl-drag-handle:active { cursor: grabbing; }

/* Drag feedback (§7.7) — source dims; drop target shows a 2px accent
   rule at top (`drop-above`) or bottom (`drop-below`). */
.cl-item.is-dragging { opacity: .45; }
.cl-item.drop-above  { box-shadow: 0 -2px 0 0 var(--cl-accent) inset; }
.cl-item.drop-below  { box-shadow: 0  2px 0 0 var(--cl-accent) inset; }


/* ────────────────────────────────────────────────────────────────────
   Editorial dropdown menu — DM Sans  (Migration 037, Phase 1.5)

   Promoted from per-tool CSS to canonical. Font-family is DM Sans
   (`--cl-font-body`) per user choice — Hotel previously used
   Instrument Serif italic but the rest of the platform uses DM Sans
   for menu items. Hotel will revert to DM Sans here.

   See Style Guide §3.2 (menu pattern).
   ──────────────────────────────────────────────────────────────────── */
.menu-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  background: var(--cl-card);
  border: 1px solid var(--cl-border);
  border-radius: 0;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .18);
  z-index: 500;
  min-width: 200px;
  padding: 4px;
  display: none;
  flex-direction: column;
  gap: 1px;
}
[data-theme="dark"] .menu-dropdown { box-shadow: 0 12px 40px rgba(0, 0, 0, .45); }
.menu-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 11px;
  border-radius: 0;
  font-family: var(--cl-font-body);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--cl-text);
  cursor: pointer;
  transition: background .12s, color .12s;
  white-space: nowrap;
  background: none;
  border: none;
  width: 100%;
  text-align: left;
}
.menu-item:hover { background: var(--cl-card-alt); color: var(--cl-text); }
.menu-item svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  color: var(--cl-text-muted);
}
.menu-item label {
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  margin: 0;
  padding: 0;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--cl-text);
}
.menu-item label svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  color: var(--cl-text-muted);
}
.menu-divider { height: 1px; background: var(--cl-rule); margin: 3px 4px; }
.menu-section-label {
  font-family: var(--cl-font-mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--cl-text-muted);
  padding: 6px 11px 2px;
}


/* ────────────────────────────────────────────────────────────────────
   Resize handle — editor / preview split  (Migration 037)

   Canonical 6px hit target between .panel and .cl-preview-wrap.
   Transparent at rest, tints muted on hover/drag. Behavior + key-
   naming + 50/50 default per Style Guide §3.8. Visual treatment
   per Hotel + Crew List pattern (the clean minimal version — GT's
   visible-gray-with-orange-grip variant was deprecated for parity).

   Also targets `.gt-resize-handle` for GT's existing markup so the
   GT JS doesn't need a class-name change to inherit the canonical
   look.
   ──────────────────────────────────────────────────────────────────── */
.resize-handle,
.gt-resize-handle {
  width: 6px;
  flex-shrink: 0;
  cursor: col-resize;
  background: transparent;
  transition: background .15s;
  z-index: 2;
  /* Reset inherited box (GT's old rule had height:100%, no longer needed
     in a flex row — flex stretches by default). */
  height: auto;
  position: static;
}
.resize-handle:hover,
.resize-handle.dragging,
.gt-resize-handle:hover,
.gt-resize-handle.is-dragging {
  background: var(--cl-text-muted);
}
/* Strip the legacy grip-notch ::before so GT matches Hotel/Crew List
   visually. The 1×32 px center line was a GT-only flourish that
   produced asymmetric visual weight in a row of icon-strip buttons
   directly to its left. */
.gt-resize-handle::before { content: none; }


/* ────────────────────────────────────────────────────────────────────
   Editor-panel collapse — canonical (promoted from Casting Sessions /
   Production Calendar, 2026-06). Lets the operator collapse the editor
   `.panel` to hand the full width to the live preview, then re-expand
   from a mirror button in the preview bar. Behaviour + persistence in
   /apps/lib/js/rm-sidebar.js (delegated on [data-sidebar-toggle]).

   Markup contract:
     .panel  ▸  .cl-panel-header  ▸  button.cl-panel-collapse[data-sidebar-toggle]
     .cl-preview-bar ▸ button.cl-panel-expand[data-sidebar-toggle]  (first child)
   ──────────────────────────────────────────────────────────────────── */
.cl-panel-header {
  padding: 8px 10px 4px;
  display: flex; align-items: center; justify-content: flex-end;
  flex-shrink: 0;
}
.cl-panel-collapse {
  /* appearance:none — strip the native button chrome (gray rounded
     pill on WebKit) so the transparent bg + squared border show. The
     rest of the platform's bespoke buttons (.cl-preview-zoom etc.) do
     the same; the canonical rule must too. */
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; padding: 0;
  background: transparent;
  border: 1px solid var(--cl-border);
  border-radius: 0;                 /* §6.2 squared editor control */
  color: var(--cl-text-muted);
  cursor: pointer;
  transition: border-color .12s, color .12s;
  flex-shrink: 0;
}
.cl-panel-collapse:hover { border-color: var(--cl-text); color: var(--cl-text); }
.cl-panel-collapse .collapse-icon {
  width: 11px; height: 11px;
  transform: rotate(90deg);         /* chevron points LEFT = collapse */
  transition: transform .15s ease;
}
/* Mirror "EDITOR" button in the preview bar — hidden until collapsed. */
.cl-panel-expand {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  display: none;
  align-items: center; gap: 6px;
  height: 26px; padding: 0 10px;
  background: transparent;
  border: 1px solid var(--cl-border);
  border-radius: 0;
  color: var(--cl-text-muted);
  font-family: var(--cl-font-mono);
  font-size: 9.5px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  cursor: pointer;
  transition: border-color .12s, color .12s;
  flex-shrink: 0;
  margin-right: 8px;
}
.cl-panel-expand:hover { border-color: var(--cl-text); color: var(--cl-text); }

/* Collapsed state — hide editor + resize handle, reveal the expander. */
body.sidebar-collapsed .panel         { display: none; }
body.sidebar-collapsed .resize-handle,
body.sidebar-collapsed .gt-resize-handle { display: none; }
body.sidebar-collapsed .cl-panel-expand  { display: inline-flex; }


/* ────────────────────────────────────────────────────────────────────
   Editorial modal — canonical chrome for confirm + generic dialogs
   (Migration 038, 2026-05-09)

   Promoted from crew-list.css so every tool can render confirm
   modals in the platform style. Uses the cream/black header strip
   recipe established by Crew List: --cl-card-alt frame around a
   --cl-surface body. Style-Guide accent dot anchors the title.

   Markup pattern:
     <div class="cl-modal-backdrop show"></div>
     <div class="cl-modal show" role="dialog" aria-labelledby="…">
       <div class="cl-modal-eyebrow">Eyebrow</div>
       <div class="cl-modal-title">Title</div>
       <div class="cl-modal-body">…</div>
       <div class="cl-modal-actions">…buttons…</div>
     </div>

   Keep crew-list.css's local copy in sync until Phase 1.5 removal. */
.cl-modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, .55);
  z-index: 9000;
  display: none;
}
.cl-modal-backdrop.show { display: block; }
.cl-modal {
  position: fixed;
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 92vw; max-width: 480px;
  max-height: calc(100vh - 80px); max-height: calc(100dvh - 80px);
  background: var(--cl-surface);
  border: 1px solid var(--cl-border);
  border-radius: 0;
  box-shadow: 0 24px 80px rgba(0, 0, 0, .35);
  z-index: 9001;
  display: none;
  flex-direction: column;
  padding: 22px;
}
.cl-modal.show { display: flex; }
.cl-modal-eyebrow {
  font-family: var(--cl-font-mono);
  font-size: 9px; font-weight: 700;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--cl-text3);
  background: var(--cl-card-alt);
  margin: -22px -22px 0;
  padding: 18px 22px 6px;
  flex-shrink: 0;
}
.cl-modal-title {
  font-family: var(--cl-font-head);
  font-style: italic;
  font-size: 26px; font-weight: 400;
  line-height: 1;
  letter-spacing: -.015em;
  color: var(--cl-text);
  background: var(--cl-card-alt);
  margin: 0 -22px 12px;
  padding: 0 22px 16px;
  border-bottom: 1px solid var(--cl-border);
  flex-shrink: 0;
}
.cl-modal-title::after { content: '.'; color: var(--cl-accent); }
.cl-modal-body {
  flex: 1 1 auto;
  overflow-y: auto;
  margin-top: 6px;
  padding-right: 2px;
  font-family: var(--cl-font-body);
  font-size: 14px;
  line-height: 1.5;
  color: var(--cl-text);
}
/* Inline highlight for destructive consequences (photo counts, etc.) */
.cl-modal-body .cl-modal-emphasis {
  font-family: var(--cl-font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--cl-err);
}
/* Single text field inside a modal (rmPrompt). Kept here rather than in a tool
   stylesheet because rmPrompt is a shared helper — every tool that calls it
   must get the same field without shipping its own copy. */
.cl-modal-field { margin-top: 14px; }
.cl-modal-field label {
  display: block;
  margin-bottom: 6px;
  font-family: var(--cl-font-mono);
  font-size: 9px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--cl-text3);
}
.cl-modal-field input {
  width: 100%;
  box-sizing: border-box;
  height: 36px;
  padding: 0 12px;
  font-family: var(--cl-font-body);
  font-size: 14px;
  color: var(--cl-text);
  background: var(--cl-card-alt);
  border: 1px solid var(--cl-border);
  border-radius: 0;
  outline: none;
}
.cl-modal-field input:focus { border-color: var(--cl-accent); }
/* A disabled confirm is the empty-value guard — make it legible as disabled
   rather than leaving a live-looking button that silently does nothing. */
.cl-modal-btn[disabled] { opacity: .45; cursor: default; pointer-events: none; }

/* The actions row is pinned to the modal's bottom edge, so if the modal is ever
   taller than the visible screen this is what goes out of reach. Hence the dvh
   max-height above, and the home-indicator inset here. */
.cl-modal-actions {
  display: flex; align-items: center; justify-content: flex-end;
  gap: 10px;
  padding: 14px 22px calc(18px + env(safe-area-inset-bottom, 0px));
  margin: 18px -22px -22px;
  background: var(--cl-card-alt);
  border-top: 1px solid var(--cl-border);
  flex-shrink: 0;
}

/* Confirm-modal action buttons — squared, mono, uppercase. The
   destructive variant flips text + border to --cl-err so it reads
   as the dangerous choice without becoming a red filled button
   (which would clash with the editorial palette). */
.cl-modal-actions .cl-modal-btn {
  height: 32px; padding: 0 14px;
  background: transparent;
  border: 1px solid var(--cl-border);
  border-radius: 0;
  font-family: var(--cl-font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cl-text);
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.cl-modal-actions .cl-modal-btn:hover {
  background: var(--cl-card-alt);
  border-color: var(--cl-text);
}
.cl-modal-actions .cl-modal-btn.is-danger {
  border-color: var(--cl-err);
  color: var(--cl-err);
}
.cl-modal-actions .cl-modal-btn.is-danger:hover {
  background: var(--cl-err);
  color: var(--cl-surface);
  border-color: var(--cl-err);
}
.cl-modal-actions .cl-modal-btn.is-primary {
  border-color: var(--cl-text);
  color: var(--cl-surface);
  background: var(--cl-text);
}
.cl-modal-actions .cl-modal-btn.is-primary:hover {
  background: var(--cl-accent);
  border-color: var(--cl-accent);
  color: var(--cl-surface);
}
/* Restorative / constructive variant — green. Mirror of .is-danger
   but with --cl-ok instead of --cl-err. Used for Unwrap project,
   Recover Organization, and similar undo-of-destructive actions. */
.cl-modal-actions .cl-modal-btn.is-ok {
  border-color: var(--cl-ok);
  color: var(--cl-ok);
}
.cl-modal-actions .cl-modal-btn.is-ok:hover {
  background: var(--cl-ok);
  color: var(--cl-surface);
  border-color: var(--cl-ok);
}


/* ────────────────────────────────────────────────────────────────────
   Undo toast — fired by rm-undo-toast.js after a destructive action
   that leaves a session-scoped trash entry. Bottom-center, squared,
   editorial. The button is mono uppercase to match section-icon-btn
   labels. (Migration 038)
   ──────────────────────────────────────────────────────────────────── */
.cl-undo-toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%) translateY(20px);
  display: flex; align-items: center; gap: 14px;
  padding: 12px 16px;
  background: var(--cl-text);
  color: var(--cl-surface);
  border: 1px solid var(--cl-text);
  border-radius: 0;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .4);
  font-family: var(--cl-font-body);
  font-size: 13px;
  z-index: 9100;
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s, transform .18s;
}
.cl-undo-toast.show {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.cl-undo-toast .cl-undo-msg { white-space: nowrap; }
.cl-undo-toast .cl-undo-btn {
  background: transparent;
  border: 1px solid var(--cl-surface);
  color: var(--cl-surface);
  height: 26px; padding: 0 12px;
  font-family: var(--cl-font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.cl-undo-toast .cl-undo-btn:hover {
  background: var(--cl-surface);
  color: var(--cl-text);
}


/* ════════════════════════════════════════════════════════════════════
   Migration 039 — Promote .btn family + .cl-preview-* family
   (2026-05-10). Hotel + Welcome had identical local copies of these
   rules; promoting here so future tools (Tech Pack, Rooming, Weather)
   inherit for free, and a single edit propagates everywhere. Per
   Style Guide §6.2 (squared editor chrome) and §7.6 (preview pane).
   ════════════════════════════════════════════════════════════════════ */

/* ── .btn family — token-driven, outlined, mono uppercase ───────
   Editor chrome (squared per §6.2). Three intent variants:
     .btn-primary   — filled with --cl-text on --cl-bg
     .btn-secondary — transparent, --cl-text2 / --cl-border
     .btn-danger    — outlined --cl-err; fills on hover
   .btn-sm sized for tight spaces (item-card actions, inline ✕). */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--cl-border);
  background: var(--cl-card-alt);
  color: var(--cl-text);
  border-radius: 0;
  height: 36px; padding: 0 14px;
  font-family: var(--cl-font-mono);
  font-size: 11px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  cursor: pointer;
  transition: border-color .12s, color .12s, background .12s;
}
.btn:hover { border-color: var(--cl-text-muted); color: var(--cl-text); }
.btn-primary {
  background: var(--cl-text);
  color: var(--cl-bg);
  border-color: var(--cl-text);
}
/* Re-assert the filled button's text colour on hover. `.btn:hover` sets
   `color: var(--cl-text)`, which would otherwise win (higher specificity than
   the `.btn-primary` base colour) and paint the label in the SAME colour as
   the `--cl-text` background — an invisible label. Platform value: keep it
   here, never patch per-tool. */
.btn-primary:hover { color: var(--cl-bg); opacity: .92; border-color: var(--cl-text); }
.btn-secondary {
  background: transparent;
  color: var(--cl-text2);
  border: 1px solid var(--cl-border);
}
.btn-danger {
  background: transparent;
  color: var(--cl-err);
  border: 1px solid var(--cl-err);
}
.btn-danger:hover { background: var(--cl-err); color: #fff; }
.btn-sm { height: 30px; padding: 0 12px; font-size: 10px; border-radius: 0; }

/* Control ink — the ONE knob a surface may turn, shared by the radio (§5.6)
   and the checkbox (§5.7). Neither component names a colour directly, so a
   backend with its own ink ramp (SuperAdmin's warm --sa-ink) re-points the
   token instead of re-declaring the control. That is the only sanctioned way
   to vary either one: no second .cl-radio and no second checkbox anywhere. */
:root {
  --cl-control-ink:      var(--cl-text);
  --cl-control-ink-idle: var(--cl-text-muted);
}

/* ── Canonical radio (Style Guide §5.6) ─────────────────────────
   The platform's default radio look — a 14×14 hairline circle that
   fills with a centered 7×7 dot when its parent (or itself) carries
   .is-selected. Promoted from SuperAdmin's .sa-plan-radio (Change
   Plan modal) so every form across editor / admin / SA shares one
   visual. JS owns selection state; CSS just paints.

   Usage — wrap option in a clickable container that toggles the
   state class:

     <div class="cl-radio-option is-selected">
       <span class="cl-radio"></span>
       <div class="cl-radio-label">Plan name</div>
     </div>

   Or attach the state class directly when there's no wrapping row:
     <span class="cl-radio is-selected"></span>

   Reference implementation: SuperAdmin → Change Plan modal, which was
   MIGRATED onto this component 2026-08-24 (saRenderPlanList); its old
   .sa-plan-option / .sa-plan-radio pair — the original source of these
   metrics — was deleted from superadmin.css in the same change, so this
   block is now the only place on the platform that paints a radio.
   Sub-parts: .cl-radio-body (text column), .cl-radio-label (name),
   .cl-radio-help (a sentence of explanation), .cl-radio-meta (a mono
   datum), .cl-radio-aside (right-aligned price/count column), and
   .cl-radio-row / .cl-radio-row-group for the borderless flavor-1 row. */
.cl-radio {
  width: 14px; height: 14px;
  border: 1px solid var(--cl-control-ink-idle);
  border-radius: 50%;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: border-color .12s;
}
.cl-radio.is-selected,
.cl-radio-option.is-selected > .cl-radio,
.cl-radio-option.is-selected .cl-radio {
  border-color: var(--cl-control-ink);
}
.cl-radio.is-selected::after,
.cl-radio-option.is-selected > .cl-radio::after,
.cl-radio-option.is-selected .cl-radio::after {
  content: '';
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--cl-control-ink);
}
.cl-radio-option {
  cursor: pointer;
  transition: border-color .12s, background-color .12s;
  /* Layout completed 2026-08-24. The rule carried only cursor + transition,
     so the radio and its label stacked instead of sitting on one line — the
     class had never been consumed by anything, so the gap was invisible.
     align-items:flex-start (not center) because an option may carry a
     .cl-radio-meta sub-line, and the dot belongs beside the LABEL, not
     centred against the whole block. */
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--cl-border);
  background: var(--cl-surface);
  /* Declared here, not inherited: not every page that loads this file ships a
     `*{box-sizing:border-box}` reset, and without it the mobile 44px
     min-height below is a CONTENT min-height — the row silently comes out at
     70px instead of 44px. The component owns its own box model. */
  box-sizing: border-box;
}
.cl-radio-option + .cl-radio-option { margin-top: 6px; }
.cl-radio-option:hover        { border-color: var(--cl-control-ink-idle); }
.cl-radio-option.is-selected  { border-color: var(--cl-control-ink); background: var(--cl-card-alt); }
/* The dot is 14px and the label's first line is ~20px, so nudge it onto the
   optical baseline rather than the box top. Both flavors of the control get
   the same nudge: the div-based .cl-radio and a native <input type="radio">
   used inside the option row (the accessible flavor — §5.6 flavor 1 — which
   admin's plan / auth / merge cards use so the whole row stays a <label>). */
.cl-radio-option > .cl-radio,
.cl-radio-option > input[type="radio"] { margin-top: 3px; flex: 0 0 auto; }
/* Native flavor: the input carries the checked state, so paint the row from
   :has() instead of a JS-toggled .is-selected. Same delta as .is-selected —
   one rule, not a second look. */
.cl-radio-option:has(> input[type="radio"]:checked) {
  border-color: var(--cl-control-ink); background: var(--cl-card-alt);
}
.cl-radio-label               { display: block; font-size: 13.5px; line-height: 1.45; color: var(--cl-text); }
/* Body-copy sub-line. Distinct from .cl-radio-meta (mono/uppercase/9.5px —
   for a datum like a price or a cap): .cl-radio-help carries a full sentence
   of explanation, so it stays sentence-case body type. Promoted from admin's
   .auth-intent-help, which was the only place a radio card explained itself
   in prose. */
.cl-radio-help {
  display: block; margin-top: 3px;
  font-size: 12px; line-height: 1.4; color: var(--cl-text-muted);
}
/* The option's text column. Without it a .cl-radio-label + .cl-radio-help
   pair becomes two flex children and sits beside the dot in a row. */
.cl-radio-body { display: block; flex: 1 1 auto; min-width: 0; }
/* Trailing column — a price, a seat count, anything right-aligned opposite
   the label (SuperAdmin's plan cards). Pushes itself to the far edge so the
   option row needs no grid of its own. */
.cl-radio-aside { margin-left: auto; text-align: right; flex: 0 0 auto; }
/* Disabled / read-only. Matches input[type="radio"]:disabled below so a
   greyed-out native radio and a greyed-out card row read as one state. */
.cl-radio-option.is-disabled,
.cl-radio-option:has(> input[type="radio"]:disabled) {
  opacity: .5; cursor: not-allowed;
}
.cl-radio-option.is-disabled:hover,
.cl-radio-option:has(> input[type="radio"]:disabled):hover {
  border-color: var(--cl-border);
}

/* Plain "pick one" row — §5.6 flavor 1's layout. A borderless label that
   sits a native radio next to a short body-copy caption. This is the OTHER
   half of the canonical: .cl-radio-option is the bordered card, .cl-radio-row
   is the bare row, and between them no surface needs its own inline
   flex/gap/font-size. Declaring the font here also stops a page-level
   `.field label` (mono 9px uppercase) from swallowing the caption, which is
   what the inline `font-size:12px;font-weight:400` overrides in admin.php
   were fighting. */
.cl-radio-row {
  display: flex; align-items: center; gap: 8px;
  box-sizing: border-box;
  cursor: pointer;
  font-family: var(--cl-font-body); font-size: 13px; font-weight: 400;
  letter-spacing: 0; text-transform: none;
  color: var(--cl-text);
}
.cl-radio-row + .cl-radio-row { margin-top: 6px; }
.cl-radio-row-group { display: flex; flex-direction: column; }
/* Side-by-side variant (billing cycle: MONTHLY | ANNUAL) — one hairline box
   split by a rule, the rows sitting inside it. */
.cl-radio-row-group--inline {
  flex-direction: row; width: fit-content;
  border: 1px solid var(--cl-border);
}
/* Mono eyebrow type inside the inline group — a compact two-state toggle
   reads as chrome, not as body copy, matching .cl-pill / .cl-tbtn. */
.cl-radio-row-group--inline > .cl-radio-row {
  margin-top: 0; padding: 8px 16px;
  font-family: var(--cl-font-mono); font-size: 11px;
  letter-spacing: .12em; text-transform: uppercase;
}
.cl-radio-row-group--inline > .cl-radio-row + .cl-radio-row {
  border-left: 1px solid var(--cl-border);
}

/* Native `<input type="radio">` — restyled to match the canonical
   .cl-radio look so every radio on the platform reads the same,
   without forcing every form to migrate to the div-based pattern.
   The two flavors render identically; the native version is
   preferred for accessibility (keyboard / screen-reader) when the
   surrounding markup doesn't need a richer clickable container.
   Style Guide §5.6. */
input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 14px; height: 14px;
  border: 1px solid var(--cl-control-ink-idle);
  border-radius: 50%;
  margin: 0;
  padding: 0;
  display: inline-grid;
  place-content: center;
  vertical-align: middle;
  cursor: pointer;
  background: transparent;
  transition: border-color .12s;
  flex-shrink: 0;
}
input[type="radio"]:checked { border-color: var(--cl-control-ink); }
input[type="radio"]:checked::before {
  content: '';
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--cl-control-ink);
}
input[type="radio"]:focus-visible {
  outline: 2px solid var(--cl-accent, #FF6C00);
  outline-offset: 2px;
}
input[type="radio"]:disabled { opacity: .5; cursor: not-allowed; }

/* ── Canonical checkbox (Style Guide §5.7) ──────────────────────────────
   The radio's squared twin: same 14×14 hairline box, same ink-on-paper
   resting state, same 7×7 ink fill when checked — but SQUARED per §6.2
   (editor inputs are squared platform-wide; only verdict pills and colour
   swatches carve out). Promoted 2026-08-24 from Welcome Package's
   .wp-section-hide-row rule, which had already written exactly this and
   documented itself as "matches the canonical .cl-radio pattern but
   SQUARED" — it was the right control living in the wrong file.

   The square/round split is load-bearing, not decorative: square means
   "pick any number", round means "pick exactly one". A merge into one
   shared shape was tried and reverted 2026-08-24 — a multi-select column
   (SuperAdmin → Licenses, CSV import) stops announcing itself as
   multi-select when the control goes round.

   Before this block the platform had NO canonical checkbox and 26 tool-local
   declarations filled the vacuum: four sizes (13/14/15/16px) and seven
   accent-colors, plus two `border-radius: 0 !important` reverts fighting the
   native rounded corner that `appearance: none` removes for free. All of
   them were deleted in the same change.

   Like the radio, this needs no class — a bare <input type="checkbox">
   renders correctly. Rows keep their own layout (and their own baseline
   nudge, which depends on the row's font size); the CONTROL is ours. */
input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 14px; height: 14px;
  border: 1px solid var(--cl-control-ink-idle);
  border-radius: 0;              /* squared per §6.2 */
  margin: 0;
  padding: 0;
  display: inline-grid;
  place-content: center;
  vertical-align: middle;
  cursor: pointer;
  background: transparent;
  transition: border-color .12s;
  flex-shrink: 0;
}
input[type="checkbox"]:hover   { border-color: var(--cl-control-ink); }
input[type="checkbox"]:checked { border-color: var(--cl-control-ink); }
input[type="checkbox"]:checked::before {
  content: '';
  width: 7px; height: 7px;
  background: var(--cl-control-ink);
}
input[type="checkbox"]:indeterminate { border-color: var(--cl-control-ink); }
/* A "some selected" header box reads as a bar, never as a filled box. Real
   consumer: admin-app.js:7611 sets .indeterminate on the CSV-import
   select-all. `appearance: none` removes the native dash, so without this
   rule that box would be indistinguishable from unchecked. */
input[type="checkbox"]:indeterminate::before {
  content: '';
  width: 8px; height: 2px;
  background: var(--cl-control-ink);
}
input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--cl-accent, #FF6C00);
  outline-offset: 2px;
}
input[type="checkbox"]:disabled { opacity: .5; cursor: not-allowed; }
input[type="checkbox"]:disabled:hover { border-color: var(--cl-control-ink-idle); }

/* ── Controls · print ───────────────────────────────────────────────────
   Both controls draw their mark as a ::before BACKGROUND, and browsers drop
   backgrounds when printing unless told otherwise — so a checked box printed
   from the browser came out empty, indistinguishable from unchecked. This
   does not affect PDF export (html2canvas rasterises to a canvas and paints
   normally); it is the Cmd+P path off an editor screen. Same
   print-color-adjust:exact that pdf-styles.css already uses for the export
   surfaces. The property inherits, so declaring it on the control also
   covers its pseudo-element. */
@media print {
  input[type="radio"],
  input[type="checkbox"],
  .cl-radio,
  .cl-check {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}

/* ── Controls · forced colors (Windows High Contrast) ───────────────────
   In forced-colors mode the OS throws away author colours. An
   `appearance: none` control has no native widget left to fall back to, so
   without this block both controls render as an invisible 14px gap and a
   user cannot tell checked from unchecked at all.

   The fix works WITH forced colors rather than opting out (no
   forced-color-adjust:none): every value here is a system colour keyword, so
   it adapts to whichever high-contrast theme the user picked.

   `opacity: 1` on :disabled is not a revert of the rule above — opacity is
   one of the few things forced-colors preserves, and dimming a mark that is
   already GrayText makes it harder to see rather than clearer. GrayText IS
   the platform-native disabled signal in this mode. */
@media (forced-colors: active) {
  input[type="radio"],
  input[type="checkbox"],
  .cl-radio,
  .cl-check {
    border-color: ButtonBorder;
  }
  input[type="radio"]:checked,
  input[type="checkbox"]:checked,
  input[type="checkbox"]:indeterminate,
  .cl-radio.is-selected,
  .cl-check.is-selected,
  .cl-radio-option.is-selected .cl-radio,
  .cl-radio-option.is-selected .cl-check {
    border-color: CanvasText;
  }
  input[type="radio"]:checked::before,
  input[type="checkbox"]:checked::before,
  input[type="checkbox"]:indeterminate::before,
  .cl-radio.is-selected::after,
  .cl-check.is-selected::after,
  .cl-radio-option.is-selected .cl-radio::after,
  .cl-radio-option.is-selected .cl-check::after {
    background: CanvasText;
  }
  input[type="radio"]:disabled,
  input[type="checkbox"]:disabled {
    border-color: GrayText;
    opacity: 1;
  }
  input[type="radio"]:disabled::before,
  input[type="checkbox"]:disabled::before {
    background: GrayText;
  }
  input[type="radio"]:focus-visible,
  input[type="checkbox"]:focus-visible {
    outline-color: Highlight;
  }
  /* The option card signals selection with a --cl-card-alt fill, which
     forced-colors flattens to Canvas — every card would look identical.
     Move the signal onto the border, which survives. */
  .cl-radio-option.is-selected,
  .cl-radio-option:has(> input[type="radio"]:checked) {
    border-color: Highlight;
  }
}

/* Borderless "toggle one thing" row — the checkbox twin of .cl-radio-row,
   for a control sitting next to a short caption with no card around it. */
.cl-check-row {
  display: flex; align-items: center; gap: 8px;
  box-sizing: border-box;
  cursor: pointer; user-select: none;
  font-family: var(--cl-font-body); font-size: 13px; font-weight: 400;
  letter-spacing: 0; text-transform: none;
  color: var(--cl-text);
}
.cl-check-row + .cl-check-row { margin-top: 6px; }
/* Multi-line caption: the box belongs beside the FIRST line, not centred
   against the block. Rows opt in rather than each tool re-nudging by hand. */
.cl-check-row--top { align-items: flex-start; }
.cl-check-row--top > input[type="checkbox"] { margin-top: 3px; }

/* ── .cl-check — div flavor of the canonical checkbox ───────────────────
   The square twin of .cl-radio, and the piece that was missing: the radio
   shipped with both a native and a div flavor, the checkbox only had the
   native one. So every surface that needed a NON-input tick box — a row
   whose whole <div> is the click target, a read-only status cell — rolled
   its own. Three did, and all three drifted: 15/16/18px, 1px and 2px
   borders, `border-radius: 4px`, hardcoded #111827/#f0f0f0 fills, and an
   inline SVG tick whose stroke had to be recoloured per theme in JS on
   every toggle.

   Same contract as .cl-radio: JS owns the state, CSS just paints, and the
   state class goes on the element itself or on a .cl-radio-option parent.
   The ink fill replaces the tick glyph — no SVG, nothing to recolour. */
.cl-check {
  width: 14px; height: 14px;
  border: 1px solid var(--cl-control-ink-idle);
  border-radius: 0;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  transition: border-color .12s;
}
.cl-check.is-selected,
.cl-radio-option.is-selected .cl-check { border-color: var(--cl-control-ink); }
.cl-check.is-selected::after,
.cl-radio-option.is-selected .cl-check::after {
  content: '';
  width: 7px; height: 7px;
  background: var(--cl-control-ink);
}


/* ── Preview pane chrome (§7.6) ──────────────────────────────────
   Used by every tool that renders a live PDF preview alongside the
   editor (Hotel, Welcome, Tech Pack, GT). Bar = mono uppercase
   eyebrow on the left + zoom switcher on the right. .preview-area
   itself uses --cl-bg + flex:1 so it fills .cl-preview-wrap. */
.cl-preview-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  padding: 12px 24px;
  background: var(--cl-surface);
  border-bottom: 1px solid var(--cl-border);
  flex-shrink: 0;
}
.cl-preview-eyebrow {
  font-family: var(--cl-font-mono);
  font-size: 9.5px; font-weight: 500;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--cl-text-muted);
}
.cl-preview-zooms {
  display: inline-flex; align-items: center; gap: 14px;
  font-family: var(--cl-font-mono);
  font-size: 10px;
  letter-spacing: .12em; text-transform: uppercase;
}
.cl-preview-zoom {
  appearance: none;
  background: transparent; border: 0;
  padding: 0; margin: 0;
  font: inherit; letter-spacing: inherit; text-transform: inherit;
  color: var(--cl-text3);
  cursor: pointer;
  transition: color .12s;
}
.cl-preview-zoom:hover    { color: var(--cl-text2); }
.cl-preview-zoom.is-active { color: var(--cl-text); font-weight: 600; }

.preview-area {
  background: var(--cl-bg);
  flex: 1 1 0; min-height: 0;
  overflow-y: auto; overflow-x: auto;
  padding: 32px 24px;
  display: flex; flex-direction: column; align-items: center; gap: 20px;
}
/* Trailing spacer — a flex/grid scroll container DROPS its padding-bottom at the
   scroll end (Chromium), so the last page sits flush against the pane bottom.
   A real flex item (::after) is included in the scrollable content and restores
   the bottom gap. Height matches the declared padding-bottom. */
.preview-area::after { content: ''; flex: 0 0 auto; height: 32px; }
.preview-label {
  color: var(--cl-text-muted);
  font-family: var(--cl-font-mono);
  font-size: 9.5px;
  letter-spacing: .22em; text-transform: uppercase;
  align-self: flex-start;
}
.cl-preview-wrap {
  display: flex; flex-direction: column;
  flex: 1 1 0;
  min-width: 0; min-height: 0;
  height: 100%;
  background: var(--cl-bg);
  overflow: hidden;
}
/* Scaling wrapper injected by _applyPreviewScale() / _wrApplyPreviewScale().
   transform-origin MUST be top-center so scaled-down pages anchor at the
   top-left of the pane rather than shrinking toward the vertical midpoint.
   No transition — avoids the "size pump" animation on every debounced
   re-render when pages are rebuilt from scratch on each keystroke. */
.pdf-page-scale { transform-origin: top center; }

/* Centering wrapper placed around each .pdf-page (or .pdf-page-scale) in
   the live-preview area. Margin-bottom is set inline by JS to absorb the
   layout gap left by transform: scale(). */
.preview-page-wrap {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-bottom: 35px;
}

/* Dark-mode lighter gray for the preview surface — separates the
   preview pane from the near-black page bg (`--cl-bg: #0A0A0A`) so
   PDF pages, calendar grids, and other rendered documents read with
   more contrast against the surrounding chrome. Light mode keeps the
   cream `--cl-bg` because there's already plenty of contrast against
   the white `.pdf-page` / `.pc-month` surfaces. */
[data-theme="dark"] .preview-area,
[data-theme="dark"] .cl-preview-wrap {
  background: #1F1F1F;
}

/* ------------------------------------------------------------------ *
 * Project-wrap read-only banner
 * Rendered by rm-sql-save.js _rmRenderWrapBanner when a project is
 * wrapped. Sticky at the top of every tool, amber-on-cream so it
 * reads as a state announcement (not an error). Strong-text contrast
 * for the headline; rest of the line carries the dates + recovery
 * path. .rm-wrap-allow-edit (set on toolbar/export controls) opts a
 * subtree out of the disable sweep done by the same renderer.
 * ------------------------------------------------------------------ */
.rm-wrap-banner {
  position: sticky;
  top: 0;
  z-index: 9999;
  background: #FFF4DA;
  color: #4A3208;
  border-bottom: 1px solid #E0B655;
  padding: 12px 22px;
  font: 13px/1.5 var(--cl-sans, "Inter", system-ui, sans-serif);
  letter-spacing: .005em;
  box-shadow: 0 2px 6px rgba(74, 50, 8, 0.10);
}
.rm-wrap-banner strong {
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  font-size: 11.5px;
  margin-right: 8px;
}
body.cl-theme-dark .rm-wrap-banner,
[data-theme="dark"] .rm-wrap-banner {
  background: #3a2a0d;
  color: #F0D9A8;
  border-bottom-color: #8A5A0C;
}
/* Urgent variant — purge is imminent (within ~7 days). Red, not amber,
   so the end user can't miss that deletion is final and close. */
.rm-wrap-banner.is-urgent {
  background: #FBE4E1;
  color: #7A241B;
  border-bottom-color: #D04A3F;
  box-shadow: 0 2px 6px rgba(122, 36, 27, 0.14);
}
body.cl-theme-dark .rm-wrap-banner.is-urgent,
[data-theme="dark"] .rm-wrap-banner.is-urgent {
  background: #3a1512;
  color: #F2C7C0;
  border-bottom-color: #A8362C;
}

/* ────────────────────────────────────────────────────────────────────
   Kind badges — canonical .cl-dept-badge per Style Guide §7.0.2.1
   ────────────────────────────────────────────────────────────────────
   Tools that surface typed sections (Crew List sections, future
   Casting roles) render the section head as a 3-element eyebrow:
     <span class="cl-section-eyebrow-num">01</span>
     <span class="cl-dept-badge" data-kind="…">
       <span class="cl-dept-dot"></span>LABEL
     </span>
     <span class="cl-section-title-inline">Data</span>

   data-kind ∈ { production · agency · client · tech · creative · default }
   Adding a 7th kind requires a Style Guide change (§1 Kind badges).
   Per-tool color palettes are forbidden — pull colors from
   --cl-kind-* tokens only.
   ──────────────────────────────────────────────────────────────────── */
.cl-dept-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px 4px;
  font-family: var(--cl-font-mono);
  font-size: 10px; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase;
  border: 1px solid;
  white-space: nowrap; flex-shrink: 0;
  color: var(--cl-kind-default);
  background: var(--cl-kind-default-bg);
  border-color: var(--cl-kind-default-border);
}
.cl-dept-dot {
  width: 5px; height: 5px;
  background: currentColor; flex-shrink: 0;
}
.cl-dept-badge[data-kind="production"]{ color:var(--cl-kind-production); background:var(--cl-kind-production-bg); border-color:var(--cl-kind-production-border); }
.cl-dept-badge[data-kind="agency"]    { color:var(--cl-kind-agency);     background:var(--cl-kind-agency-bg);     border-color:var(--cl-kind-agency-border); }
.cl-dept-badge[data-kind="client"]    { color:var(--cl-kind-client);     background:var(--cl-kind-client-bg);     border-color:var(--cl-kind-client-border); }
.cl-dept-badge[data-kind="tech"]      { color:var(--cl-kind-tech);       background:var(--cl-kind-tech-bg);       border-color:var(--cl-kind-tech-border); }
.cl-dept-badge[data-kind="creative"]  { color:var(--cl-kind-creative);   background:var(--cl-kind-creative-bg);   border-color:var(--cl-kind-creative-border); }
.cl-dept-badge[data-kind="default"]   { color:var(--cl-kind-default);    background:var(--cl-kind-default-bg);    border-color:var(--cl-kind-default-border); }

/* ────────────────────────────────────────────────────────────────────
   Transient message — fired by lib/js/rm-toast.js. Same editorial
   language as .cl-undo-toast above (bottom-centre, squared, inverted
   surface); `kind` tints only the leading rule, never the text, so the
   message stays legible without relying on colour.
   ──────────────────────────────────────────────────────────────────── */
.cl-toast {
  position: fixed; left: 50%; bottom: 24px;
  transform: translateX(-50%) translateY(20px);
  max-width: min(560px, calc(100vw - 32px));
  padding: 12px 16px; border-left: 3px solid var(--cl-surface);
  background: var(--cl-text); color: var(--cl-surface);
  border-radius: 0; box-shadow: 0 12px 32px rgba(0,0,0,.4);
  font-family: var(--cl-font-body); font-size: 13px; line-height: 1.45;
  z-index: 9100; opacity: 0; pointer-events: none;
  transition: opacity .18s, transform .18s;
}
.cl-toast.show { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0); }
.cl-toast--success { border-left-color: var(--cl-ok, #1d9e75); }
.cl-toast--warn    { border-left-color: var(--cl-warn, #c4761a); }
.cl-toast--error   { border-left-color: var(--cl-danger, #a8362c); }

/* ═══════════════════════════════════════════════════════════════════════
   IMPERSONATION — consent surfaces
   ═══════════════════════════════════════════════════════════════════════
   Platform chrome: the session banner renders on every page of the dashboard
   and all 16 tools, so it lives here and not in any tool stylesheet. Backend
   is migration 070 — none of this grants or limits access, it only makes the
   decision legible.

   Build spec: "Impersonation Consent — Build Handoff", ch. 01–05.
   ─────────────────────────────────────────────────────────────────────── */

/* ── Session banner ─────────────────────────────────────────────────────
   FIRST chrome row, inserted before .cl-brand-bar. Occupies real space and
   is never position:fixed — a dense tool at laptop height cannot afford an
   overlay sitting on top of its controls. */
.imp-bar {
  display: flex; align-items: center; gap: 12px;
  min-height: 34px; padding: 0 14px;
  background: var(--cl-brand-bg); color: var(--cl-brand-fg);
  border-bottom: 1px solid rgba(255,255,255,.16);
  font-family: var(--cl-font-body);
  flex-shrink: 0;                /* never squeezed by the tool below */
}
/* Hatched hazard flag — full-bleed to the left edge. Texture, so read-only
   vs read+write survives peripheral vision without reading the label. */
.imp-bar__flag {
  align-self: stretch; flex: 0 0 22px; width: 22px;
  margin: 0 2px 0 -14px;
  background: repeating-linear-gradient(135deg, #fff 0 4px, transparent 4px 8px);
  opacity: .28;
}
.imp-bar__mode {
  font-family: var(--cl-font-mono); font-size: 9px; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase;
  padding: 3px 7px; border: 1px solid rgba(255,255,255,.4); border-radius: 0;
  white-space: nowrap;
}
.imp-bar__who      { font-size: 12.5px; line-height: 1.2; }
.imp-bar__who b    { font-weight: 600; }
.imp-bar__who span { color: rgba(255,255,255,.6); }
.imp-bar__clock {
  margin-left: auto;
  font-family: var(--cl-font-mono); font-size: 10px; font-weight: 600;
  letter-spacing: .14em; font-variant-numeric: tabular-nums;
  color: rgba(255,255,255,.75); white-space: nowrap;
}
.imp-bar__clock.is-soon { color: var(--cl-warn); }
.imp-bar__exit {
  height: 24px; padding: 0 10px; border-radius: 0; cursor: pointer;
  border: 1px solid rgba(255,255,255,.55);
  background: transparent; color: var(--cl-brand-fg);
  font-family: var(--cl-font-mono); font-size: 9px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; white-space: nowrap;
}
.imp-bar__exit:hover { background: rgba(255,255,255,.12); }

/* read + write: colour AND texture */
.imp-bar--write { background: var(--cl-imp-write); color: var(--cl-imp-write-fg); }
.imp-bar--write .imp-bar__mode { background: #fff; color: var(--cl-imp-write); border-color: #fff; }
/* Already as loud as it gets — the clock does not also turn warn here. */
.imp-bar--write .imp-bar__clock.is-soon { color: rgba(255,255,255,.75); }

/* Customer-visible twin. Required, not optional: an email is a one-time
   event, a live session is a state. Without this the org's own admins still
   cannot tell at a glance that someone is inside. Reports, doesn't warn. */
.imp-bar--host {
  background: var(--cl-card-deep); color: var(--cl-text);
  border-bottom: 1px solid var(--cl-border);
}
.imp-bar--host .imp-bar__mode  { border-color: var(--cl-border); color: var(--cl-text-muted); }
.imp-bar--host .imp-bar__who span,
.imp-bar--host .imp-bar__clock { color: var(--cl-text-muted); }
.imp-bar--host .imp-bar__exit  { border-color: var(--cl-text); color: var(--cl-text); }
.imp-bar--host .imp-bar__exit:hover { background: var(--cl-text); color: var(--cl-bg); }
.imp-bar--host .imp-bar__flag {
  background: repeating-linear-gradient(135deg, var(--cl-text3) 0 4px, transparent 4px 8px);
  opacity: .5;
}

/* Grant revoked or expired mid-task. */
.imp-bar--ended { background: var(--cl-text2); }

/* Height math. Read a variable that is 0 with no session, so the same rule
   in a tool is correct in both cases and nobody hardcodes 34. */
:root                     { --imp-bar-h: 0px; }
body.imp-session          { --imp-bar-h: 34px; }

@media (max-width: 768px) {
  /* Sentence drops to line 2; clock and Exit stay on line 1. */
  .imp-bar         { flex-wrap: wrap; padding: 8px 12px; row-gap: 4px; }
  .imp-bar__flag   { margin-left: -12px; }
  .imp-bar__who    { flex: 1 0 100%; font-size: 11.5px; }
  .imp-bar__clock  { margin-left: 0; }
  .imp-bar__exit   { min-height: 44px; }   /* thumb target */
  body.imp-session { --imp-bar-h: 58px; }  /* wrapped: two lines */
}

/* ── .cl-radio-meta ─────────────────────────────────────────────────────
   Canonical extension, not impersonation-specific: .cl-radio-option had a
   label and no sub-line. The duration picker needs one so "8 hours" can
   carry "Maximum · a whole shoot day" in --cl-err — that colour on the meta
   line is the only thing stopping 8h and 15min reading as interchangeable
   list items. */
.cl-radio-meta {
  display: block; margin-top: 3px;
  font-family: var(--cl-font-mono); font-size: 9.5px;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--cl-text-muted);
}
.cl-radio-meta.is-max { color: var(--cl-err); }

/* ── Surface 1 · request access (SuperAdmin) ─────────────────────────────
   The reason field stops being a field. An org admin reads it verbatim and
   decides on it, so it is presented as a short letter to two named people —
   addressed, counted, quoted back. The 10-char server minimum stays a floor;
   the interface's job is to make "support" feel obviously insufficient to
   have written to Ana and Marco. */
.imp-letter { border: 1px solid var(--cl-text); background: var(--cl-surface); }
.imp-letter__head {
  display: flex; align-items: center; gap: 10px; padding: 9px 13px;
  background: var(--cl-card-alt); border-bottom: 1px solid var(--cl-border-soft);
}
.imp-letter__head .k {
  font-family: var(--cl-font-mono); font-size: 9px; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--cl-text-muted);
}
.imp-letter__count {
  margin-left: auto; font-family: var(--cl-font-mono); font-size: 9px;
  letter-spacing: .14em; color: var(--cl-text3); font-variant-numeric: tabular-nums;
}
.imp-letter__count.is-short { color: var(--cl-warn); }
.imp-letter__count.is-ok    { color: var(--cl-ok); }
/* Keeps §5 form rules but loses its own border — the letter frame owns it —
   and takes reading-size type, because someone is going to read it. */
.imp-letter textarea {
  border: 0; background: var(--cl-surface);
  min-height: 96px; font-size: 14.5px; line-height: 1.55;
  width: 100%; resize: vertical;
}
.imp-letter textarea:focus { outline: none; }

/* Who will read it — quiet, left-ruled. */
.imp-readers {
  display: flex; align-items: flex-start; gap: 9px; padding: 12px 13px;
  background: var(--cl-card-alt);
  border: 1px solid var(--cl-border-soft);
  border-left: 2px solid var(--cl-text);
}
.imp-readers .g    { font-family: var(--cl-font-mono); font-size: 10px; font-weight: 700; color: var(--cl-text); line-height: 1.3; }
.imp-readers .tx   { font-size: 12.5px; line-height: 1.5; color: var(--cl-text2); }
.imp-readers .tx b { color: var(--cl-text); font-weight: 600; }

/* Nudge — floor cleared, sentence not written. Friction, never a gate:
   a real emergency must still get through in one click. */
.imp-nudge {
  display: flex; gap: 9px; margin-top: 10px; padding: 11px 13px;
  background: var(--cl-warn-bg);
  border: 1px solid var(--cl-warn); border-left: 3px solid var(--cl-warn);
}
.imp-nudge[hidden] { display: none; }
.imp-nudge .g    { font-family: var(--cl-font-mono); font-size: 10px; font-weight: 700; color: var(--cl-warn); }
.imp-nudge .tx   { font-size: 12.5px; line-height: 1.5; color: var(--cl-text2); }
.imp-nudge .tx b { color: var(--cl-text); font-weight: 600; }

/* ── Surface 2 · review a request (Org admin) ────────────────────────────
   Built to resist a reflex click. Three structural decisions carry it and
   they ARE the design: no primary button, approval always grants read-only,
   and a live session is a different species of row from a pending ask. */

/* Dashboard interrupt. A consent request sitting politely in Settings can go
   unread for days while a customer is blocked — so a pending grant also
   paints a band under .cl-topbar. Not dismissible, and it CANNOT approve:
   its only action is "Read it →". Attention without buying a reflex click. */
.imp-interrupt {
  display: flex; align-items: center; gap: 14px; padding: 14px 18px;
  background: var(--cl-text); color: var(--cl-bg);
}
.imp-interrupt .k {
  font-family: var(--cl-font-mono); font-size: 9px; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase;
  padding: 3px 7px; border: 1px solid currentColor;
}
.imp-interrupt .tx   { font-size: 13.5px; line-height: 1.35; }
.imp-interrupt .tx b { font-weight: 600; }
.imp-interrupt .rt   { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.imp-interrupt .go {
  height: 28px; padding: 0 12px; border-radius: 0; cursor: pointer;
  border: 1px solid currentColor; background: transparent; color: inherit;
  font-family: var(--cl-font-mono); font-size: 9px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
}
.imp-interrupt .go:hover { background: var(--cl-bg); color: var(--cl-text); }

/* Bordered in --cl-text, not --cl-border: it is the one thing on the page
   that needs deciding. */
.imp-consent { border: 1px solid var(--cl-text); background: var(--cl-surface); }
.imp-consent__head { padding: 20px 24px; border-bottom: 1px solid var(--cl-border); }
.imp-consent__who  { display: flex; align-items: baseline; gap: 12px; margin-top: 11px; }
.imp-consent__who .nm {
  font-family: var(--cl-font-head); font-style: italic; font-weight: 400;
  font-size: 31px; line-height: 1;
}
.imp-consent__who .em { font-family: var(--cl-font-mono); font-size: 10px; letter-spacing: .1em; color: var(--cl-text-muted); }
.imp-consent__who .ag { margin-left: auto; font-family: var(--cl-font-mono); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--cl-text3); }

/* The reason is CONTENT, not metadata: display type at 24px. */
.imp-quote { padding: 24px; background: var(--cl-card-alt); border-bottom: 1px solid var(--cl-border); }
.imp-quote .k { font-family: var(--cl-font-mono); font-size: 9px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--cl-text3); }
.imp-quote blockquote {
  margin: 12px 0 0; max-width: 52ch;
  font-family: var(--cl-font-head); font-size: 24px; line-height: 1.34;
  color: var(--cl-text); text-wrap: pretty;
}

/* The argument that actually decides it. */
.imp-nb { display: flex; gap: 10px; padding: 14px 24px; background: var(--cl-surface); border-bottom: 1px solid var(--cl-border); }
.imp-nb .g    { font-family: var(--cl-font-mono); font-size: 10px; font-weight: 700; letter-spacing: .14em; color: var(--cl-text); }
.imp-nb .tx   { font-size: 13px; line-height: 1.55; color: var(--cl-text2); max-width: 74ch; text-wrap: pretty; }
.imp-nb .tx b { color: var(--cl-text); font-weight: 600; }

/* Two equal columns — deny LEFT, allow RIGHT, hairline between. There is no
   primary button on this screen by design. */
.imp-decide { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--cl-border); }
/* Each column is a column-flex so the button can be pushed to the bottom.
   Without this the two decisions sit at different heights — the duration
   radios make the right column taller — and a decision screen whose two
   equal-weight actions are not on the same line stops reading as a pair. */
.imp-decide > div       { padding: 22px 24px; display: flex; flex-direction: column; }
.imp-decide .imp-bigbtn { margin-top: auto; }
.imp-decide > div + div { border-left: 1px solid var(--cl-border); }
.imp-decide h4 { margin: 0 0 4px; font-family: var(--cl-font-mono); font-size: 10px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--cl-text-muted); }
.imp-decide p  { margin: 0 0 16px; max-width: 38ch; font-size: 12.5px; line-height: 1.5; color: var(--cl-text-muted); }

.imp-bigbtn {
  width: 100%; height: 46px; border-radius: 0; cursor: pointer;
  border: 1px solid var(--cl-text); background: transparent; color: var(--cl-text);
  font-family: var(--cl-font-mono); font-size: 11px; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase;
}
.imp-bigbtn:hover       { background: var(--cl-text); color: var(--cl-bg); }
.imp-bigbtn--deny       { border-color: var(--cl-err); color: var(--cl-err); }
.imp-bigbtn--deny:hover { background: var(--cl-err); color: #fff; }

/* Live session — a different species of row. Dark in BOTH themes. */
.imp-live {
  display: grid; grid-template-columns: 1fr auto; gap: 18px; align-items: center;
  padding: 18px 22px;
  background: var(--cl-brand-bg); color: var(--cl-brand-fg);
}
.imp-live .k {
  display: flex; align-items: center; gap: 7px;
  font-family: var(--cl-font-mono); font-size: 9px; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase; color: var(--cl-warn);
}
.imp-live .k i  { width: 7px; height: 7px; background: currentColor; }
.imp-live h3    { margin: 9px 0 0; font-family: var(--cl-font-head); font-style: italic; font-weight: 400; font-size: 27px; line-height: 1.1; }
.imp-live .meta     { display: flex; gap: 22px; margin-top: 12px; flex-wrap: wrap; }
.imp-live .meta div { font-family: var(--cl-font-mono); font-size: 9px; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.5); }
.imp-live .meta b   { display: block; margin-top: 5px; font-size: 12px; font-weight: 600; letter-spacing: .08em; color: #fff; font-variant-numeric: tabular-nums; }

/* The only filled-red button in the product. Do not reuse this treatment. */
.imp-endnow {
  height: 38px; padding: 0 18px; border-radius: 0; cursor: pointer;
  border: 1px solid var(--cl-err); background: var(--cl-err); color: #fff;
  font-family: var(--cl-font-mono); font-size: 10px; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase; white-space: nowrap;
}

/* ── Surface 4 · session-over takeover ───────────────────────────────────
   Replaces a raw error toast. A toast saying imp_read_only that disappears
   leaves the SuperAdmin clicking Save again — the exact behaviour the server
   is refusing. Neither refusal may auto-dismiss. */
.imp-ended { padding: 64px 48px 72px; background: var(--cl-bg); }
.imp-ended h2 {
  margin: 14px 0 0; max-width: 22ch;
  font-family: var(--cl-font-head); font-style: italic; font-weight: 400;
  font-size: 52px; line-height: 1.02; color: var(--cl-text);
}
.imp-ended p {
  margin-top: 16px; max-width: 60ch; font-size: 14px; line-height: 1.55;
  color: var(--cl-text-muted); text-wrap: pretty;
}
.imp-ended .acts { display: flex; gap: 10px; margin-top: 26px; flex-wrap: wrap; }

@media (max-width: 768px) {
  .imp-decide    { grid-template-columns: 1fr; }
  .imp-decide > div + div { border-left: 0; border-top: 1px solid var(--cl-border); }
  .imp-live      { grid-template-columns: 1fr; }
  .imp-ended     { padding: 40px 20px 48px; }
  .imp-ended h2  { font-size: 34px; }
  .imp-quote blockquote { font-size: 20px; }
  .imp-consent__who .nm { font-size: 26px; }
}