/* Hide all scrollbars globally */
* { scrollbar-width: none !important; -ms-overflow-style: none !important; }
*::-webkit-scrollbar { display: none !important; }

/* ── Thin styled scrollbars on key panels (Windows visibility) ── */
#itin-rows,
.srch-sel-dd {
  scrollbar-width: thin !important;
  scrollbar-color: var(--gold-border) transparent !important;
  -ms-overflow-style: auto !important;
}
#itin-rows::-webkit-scrollbar,
.srch-sel-dd::-webkit-scrollbar {
  display: block !important;
  width: 4px !important;
}
#itin-rows::-webkit-scrollbar-track,
.srch-sel-dd::-webkit-scrollbar-track { background: transparent !important; }
#itin-rows::-webkit-scrollbar-thumb,
.srch-sel-dd::-webkit-scrollbar-thumb {
  background: var(--gold-border) !important;
  border-radius: 4px !important;
}
#itin-rows::-webkit-scrollbar-thumb:hover,
.srch-sel-dd::-webkit-scrollbar-thumb:hover {
  background: var(--gold-mid) !important;
}

/* Focus rings suppressed — staff tool, mouse-driven */
:focus { outline: none !important; box-shadow: none !important; }
:focus-visible { outline: none !important; }

/* ═══════════════════════════════════════════════════════════════
   FONTS
═══════════════════════════════════════════════════════════════ */
/* The @import that lived here is now a single non-blocking <link> in <head>
   covering all three families — see the note beside it. */

/*
  Helvetica Neue condensed family — mapped to 'HelveticaNeueLT Pro 47 LtCn'
  (the existing --doc-font variable). Weight ranges:
    300        → Light Condensed (LtCn)
    400–599    → Condensed / Roman
    600–799    → Heavy Condensed
    800–899    → Black Condensed
    900+       → Extra Black Condensed
*/

/* ── 300 Light Condensed ── */
/* ../fonts, not fonts. This stylesheet lives at /css/desk.css, so a relative
   url('fonts/…') resolved to /css/fonts/… while the files sit at /fonts/… —
   every face 404'd and the whole desk, letters and PDFs included, has been
   rendering in the fallback rather than the licensed face. It was invisible
   because the fallback is close in colour and the desk never asked for a
   weight the fallback could not fake: measured, 100 through 500 all rendered
   identical ink, and only 600 differed. */
@font-face {
  font-family: 'HelveticaNeueLT Pro 47 LtCn';
  src: url('../fonts/HelveticaNeueLTPro-LtCn.woff2') format('woff2'),
       url('../fonts/HelveticaNeueLTPro-LtCn.otf') format('opentype'),
       url('../fonts/HelveticaNeueLTPro-LtCn.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'HelveticaNeueLT Pro 47 LtCn';
  src: url('../fonts/HelveticaNeueLTPro-LtCnO.otf') format('opentype'),
       url('../fonts/HelveticaNeueLightCondObl.otf') format('opentype');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}

/* ── 400–599 Condensed (roman weight) ── */
@font-face {
  font-family: 'HelveticaNeueLT Pro 47 LtCn';
  src: url('../fonts/HelveticaNeueCondensed.otf') format('opentype');
  font-weight: 400 599;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'HelveticaNeueLT Pro 47 LtCn';
  src: url('../fonts/HelveticaNeueCondensedObl.otf') format('opentype');
  font-weight: 400 599;
  font-style: italic;
  font-display: swap;
}

/* ── 600–799 Heavy Condensed ── */
@font-face {
  font-family: 'HelveticaNeueLT Pro 47 LtCn';
  src: url('../fonts/HelveticaNeueHeavyCond.otf') format('opentype');
  font-weight: 600 799;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'HelveticaNeueLT Pro 47 LtCn';
  src: url('../fonts/HelveticaNeueHeavyCondObl.otf') format('opentype');
  font-weight: 600 799;
  font-style: italic;
  font-display: swap;
}

/* ── 800–899 Black Condensed ── */
@font-face {
  font-family: 'HelveticaNeueLT Pro 47 LtCn';
  src: url('../fonts/HelveticaNeueBlackCond.otf') format('opentype');
  font-weight: 800 899;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'HelveticaNeueLT Pro 47 LtCn';
  src: url('../fonts/HelveticaNeueBlackCondObl.otf') format('opentype');
  font-weight: 800 899;
  font-style: italic;
  font-display: swap;
}

/* ── 900 Extra Black Condensed ── */
@font-face {
  font-family: 'HelveticaNeueLT Pro 47 LtCn';
  src: url('../fonts/HelveticaNeueExtBlackCond.otf') format('opentype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'HelveticaNeueLT Pro 47 LtCn';
  src: url('../fonts/HelveticaNeueExtBlackCondObl.otf') format('opentype');
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}

/* ── Non-condensed / extended families (available for specific use) ── */
@font-face {
  font-family: 'HelveticaNeueLT Pro 45 Lt';
  src: url('../fonts/HelveticaNeueLTPro-Lt.otf') format('opentype'),
       url('../fonts/HelveticaNeueLight.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'HelveticaNeueLT Pro 45 Lt';
  src: url('../fonts/HelveticaNeueLTPro-It.otf') format('opentype'),
       url('../fonts/HelveticaNeueLTPro-LtIt.ttf') format('truetype');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'HelveticaNeueLT Pro LtEx';
  src: url('../fonts/HelveticaNeueLTPro-LtEx.otf') format('opentype'),
       url('../fonts/HelveticaNeueLightExt.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

/* ═══════════════════════════════════════════════════════════════
   DESIGN TOKENS
═══════════════════════════════════════════════════════════════ */
:root {
  --gold:         #8F6D55;
  /* Gold as text. --gold measured 4.46:1 on the card and --gold-mid 2.89:1 —
     both under the 4.5 minimum for the small caps they are used in. Darkening
     the tokens themselves would drag every gold rule, border and fill down
     with them, so small text takes this instead and the brand colour is left
     where it works. */
  --gold-ink:     #7A5C42;
  --gold-mid:     #A68A74;
  --gold-light:   #BAAAA0;
  --gold-pale:    #EEEDEA;
  --gold-border:  #C8C4C0;
  --charcoal:     #20201E;
  --text:         #2E2C2A;
  --muted:        #6E6C69;  /* darkened from #8A8886 for AA contrast on the warm bg */
  --white:        #FFFFFF;
  /* One ground for the whole window. The grouped-inset cards need a ground
     a step darker than they are, but painting only the form column left a
     visible seam down the middle of the desk against the lighter body — so
     the page takes the same value rather than the column taking a different
     one. --panel-bg is deliberately not moved: the list panels that use it
     are surfaces on this ground, not the ground itself. */
  --bg:           #F9F8F6;
  /* The ground the workspace cards sit on. It was a fixed near-white that no
     colour scheme ever touched, so on any scheme with colour in it the two
     halves of the desk came out different: the form column near-white, the
     preview beside it the scheme's own. Derived now, so it follows. */
  --grouped-bg:   var(--panel-bg);
  /* The workspace ground, shared by the form column and the preview beside it.
     These were three separate hardcoded near-blacks in dark mode, which is how
     they drifted apart into a visible seam down the middle of the desk. */
  --surface:      #FAFAF9;
  --border:       #C8C4C0;
  --radius:       0px;
  --shadow:       0 2px 16px rgba(0,0,0,0.10);
  --shadow-lg:    0 6px 32px rgba(0,0,0,0.14);

  /* ── Unified card & border system ─────────────────────────────────
     One card primitive shared by the form cards (.tf-card), the Home
     dashboard widgets (.dd-card), the AI-window zones, modals and
     popovers, so every panelled surface reads as one family. Per-theme
     overrides live in the dark-mode block below. */
  /* Grouped-inset cards, the way iOS builds them: the card is a *fill* that
     stands off the page, not a shape drawn with an outline. A tinted 1px
     border round every block is the single most un-Apple thing on the screen
     — Apple separates a card from its ground with lightness and a soft
     shadow, and keeps borders for controls you can act on.

     So the fill goes opaque white against the #FAFAF9 page, the shadow does
     the separating, and the border drops to a neutral hairline kept only so
     the edge survives on a white-on-white display and under forced colours.
     Radius 16px is framework7's iOS inset-list value. */
  --label-empty:        #7B5B43;
  /* The card is the step above the workspace ground, and it was pure white —
     which on a warm or tinted scheme is the one colour in the room that
     belongs to no scheme at all. Mixed from the panel instead, so it stays
     lighter than what it sits on but keeps the hue. The flat value is the
     fallback for anything without color-mix. */
  --card-bg:            #FFFFFF;
  --card-bg:            color-mix(in srgb, var(--panel-bg) 45%, #FFFFFF);
  --card-border:        rgba(60,50,40,0.07);
  --card-border-strong: rgba(184,147,79,0.48);
  --card-radius:        16px;
  --card-radius-sm:     9px;
  --card-shadow:        0 1px 2px rgba(60,50,40,0.05), 0 8px 22px -14px rgba(60,50,40,0.16);
  --card-shadow-focus:  0 4px 16px rgba(184,147,79,0.14);
  --hairline:           rgba(0,0,0,0.10);
  --field-bg:           rgba(255,255,255,0.60);
  --field-border:       rgba(0,0,0,0.16);
  --field-radius:       9px;

  /* Document font stack — HelveticaNeueLT Pro 47 LtCn is used when the font
     file is available locally; Barlow Condensed is the web fallback */
  --doc-font: 'HelveticaNeueLT Pro 47 LtCn', 'Barlow Condensed', 'Arial Narrow', 'Helvetica Neue', Arial, sans-serif;
  --doc-size: 10pt;
  --ui-font:  'DM Sans', sans-serif;
  --panel-bg: #FAFAF9;
  --bg-tertiary: #E3E2E0;

  /* ── Liquid-glass tokens (dark-mode defaults) ──────────────────────
     Used by the side panel, its sheen pseudo-elements, the dim backdrop,
     and the .lg-scroll scrollbar styling. Light-mode overrides live in
     the html:not(.dark-mode) block below. */
  --lg-blur: blur(28px) saturate(180%);
  --lg-bg: linear-gradient(135deg, rgba(28,26,22,0.55) 0%, rgba(20,20,15,0.42) 100%);
  --lg-border: 1px solid rgba(255,255,255,0.12);
  --lg-shadow: -16px 0 48px rgba(0,0,0,0.45), inset 1px 0 0 rgba(255,255,255,0.06);
  --lg-sheen:
    radial-gradient(120% 60% at 100% 0%, rgba(201,169,110,0.18), transparent 55%),
    radial-gradient(80% 50% at 0% 100%, rgba(255,255,255,0.08), transparent 60%);
  --lg-top-highlight: linear-gradient(90deg, transparent, rgba(255,255,255,0.18), transparent);
  --lg-backdrop: rgba(0,0,0,0.45);

  --lg-scroll-track: rgba(201,169,110,0.35);
  --lg-scroll-thumb: linear-gradient(180deg, rgba(255,255,255,0.18), rgba(201,169,110,0.32));
  --lg-scroll-thumb-hover: linear-gradient(180deg, rgba(255,255,255,0.28), rgba(201,169,110,0.55));
  --lg-scroll-thumb-shadow: inset 0 0 0 1px rgba(255,255,255,0.08);
}

/* ── P3 wide-gamut colour overrides (macOS only — no effect on Windows) */
@media (color-gamut: p3) {
  :root {
    --gold:        color(display-p3 0.42 0.35 0.25);
    --gold-mid:    color(display-p3 0.55 0.45 0.34);
    --gold-light:  color(display-p3 0.68 0.58 0.50);
    --gold-pale:   color(display-p3 0.90 0.89 0.87);
    --gold-border: color(display-p3 0.76 0.74 0.72);
    --charcoal:    color(display-p3 0.09 0.09 0.08);
    --text:        color(display-p3 0.15 0.14 0.13);
  }
  html.dark-mode {
    --gold:        color(display-p3 0.58 0.48 0.34);
    --gold-mid:    color(display-p3 0.72 0.62 0.48);
    --gold-light:  color(display-p3 0.82 0.74 0.64);
    --charcoal:    color(display-p3 0.82 0.79 0.74);
    --text:        color(display-p3 0.87 0.84 0.80);
  }
}

/* ── Enhanced Glassmorphism (macOS P3 displays only — zero Windows impact)
   Gate: @media (color-gamut: p3) never matches standard Windows sRGB monitors.
   All elements below already have solid/opaque fallbacks above this block. */
@media (color-gamut: p3) {

  /* ── Glass token upgrades ── */
  :root {
    /* Deeper blur + stronger saturation on macOS */
    --lg-blur: blur(40px) saturate(200%);
    /* Richer sheen gradients */
    --lg-sheen:
      radial-gradient(130% 65% at 100% 0%, rgba(201,169,110,0.28), transparent 52%),
      radial-gradient(90% 55% at 0% 100%, rgba(255,255,255,0.10), transparent 58%),
      radial-gradient(60% 40% at 50% 50%, rgba(201,169,110,0.06), transparent 70%);
    --lg-top-highlight: linear-gradient(90deg, transparent 5%, rgba(255,255,255,0.20) 50%, transparent 95%);
    --lg-border: 1px solid rgba(255,255,255,0.18);
    --lg-shadow: -16px 0 56px rgba(0,0,0,0.50), inset 1px 0 0 rgba(255,255,255,0.10), inset 0 1px 0 rgba(255,255,255,0.06);
  }
  html:not(.dark-mode) {
    --lg-blur: blur(40px) saturate(160%);
    --lg-bg: linear-gradient(160deg, rgba(46,40,32,0.82) 0%, rgba(30,26,20,0.88) 100%);
    --lg-sheen:
      radial-gradient(130% 65% at 100% 0%, rgba(201,169,110,0.26), transparent 52%),
      radial-gradient(90% 55% at 0% 100%, rgba(255,255,255,0.07), transparent 58%);
    --lg-top-highlight: linear-gradient(90deg, transparent 5%, rgba(255,255,255,0.18) 50%, transparent 95%);
    --lg-border: 1px solid rgba(255,255,255,0.14);
    --lg-shadow: -16px 0 56px rgba(0,0,0,0.42), inset 1px 0 0 rgba(255,255,255,0.08);
  }

  /* ── Floating hamburger button ── */
  .floating-menu-btn {
    backdrop-filter: blur(24px) saturate(200%);
    -webkit-backdrop-filter: blur(24px) saturate(200%);
    background: rgba(12,12,10,0.72);
    border-color: rgba(201,169,110,0.60);
    box-shadow: 0 4px 20px rgba(0,0,0,0.48), 0 1px 4px rgba(0,0,0,0.28),
                inset 0 1px 0 rgba(255,255,255,0.08);
  }

  /* ── Search/select dropdown ── */
  .srch-sel-dd {
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    border: 1px solid rgba(255,255,255,0.82);
    box-shadow: 0 12px 48px rgba(0,0,0,0.16), 0 2px 10px rgba(0,0,0,0.08),
                inset 0 1px 0 rgba(255,255,255,0.95);
  }
  html.dark-mode .srch-sel-dd {
    backdrop-filter: blur(24px) saturate(160%);
    -webkit-backdrop-filter: blur(24px) saturate(160%);
    border-color: rgba(255,255,255,0.14);
    box-shadow: 0 12px 48px rgba(0,0,0,0.65), inset 0 1px 0 rgba(255,255,255,0.08);
  }

  /* ── Guest popover ── */
  .guest-popover {
    backdrop-filter: blur(40px) saturate(180%);
    -webkit-backdrop-filter: blur(40px) saturate(180%);
    background: rgba(15,11,8,0.72);
    border: 1px solid rgba(255,255,255,0.16);
    box-shadow: 0 16px 56px rgba(0,0,0,0.52), inset 0 1px 0 rgba(255,255,255,0.09);
  }

  /* ── Sub-bar mode dropdown ── */
  .cat-bar-mode-row {
    backdrop-filter: blur(32px) saturate(180%);
    -webkit-backdrop-filter: blur(32px) saturate(180%);
    border: 1px solid rgba(255,255,255,0.10);
    box-shadow: 0 12px 32px rgba(0,0,0,0.30);
  }
}

/* ── Liquid-glass tokens: light-mode overrides ──────────────────────── */
html:not(.dark-mode) {
  --lg-blur: blur(28px) saturate(140%);
  --lg-bg: linear-gradient(160deg, rgba(46,40,32,0.90) 0%, rgba(30,26,20,0.93) 100%);
  --lg-border: 1px solid rgba(255,255,255,0.10);
  --lg-shadow: -16px 0 48px rgba(0,0,0,0.35), inset 1px 0 0 rgba(255,255,255,0.06);
  --lg-sheen:
    radial-gradient(120% 60% at 100% 0%, rgba(201,169,110,0.18), transparent 55%),
    radial-gradient(80% 50% at 0% 100%, rgba(255,255,255,0.05), transparent 60%);
  --lg-top-highlight: linear-gradient(90deg, transparent, rgba(255,255,255,0.12), transparent);
  --lg-backdrop: rgba(20,18,16,0.38);

  --lg-scroll-track: rgba(143,109,85,0.4);
  --lg-scroll-thumb: linear-gradient(180deg, rgba(143,109,85,0.35), rgba(201,169,110,0.5));
  --lg-scroll-thumb-hover: linear-gradient(180deg, rgba(143,109,85,0.55), rgba(201,169,110,0.75));
  --lg-scroll-thumb-shadow: inset 0 0 0 1px rgba(255,255,255,0.6);
}

/* ── Brightness boost levels (light mode only, 1–4 above standard) ── */
/* Neutral, monotonic luminance ramp — matches the neutral white document
   paper on the preview side, so both sides brighten to the same tone with
   no warm/cool colour shift. */
/* --grouped-bg as well as --bg. The workspace column is painted by an
   id-level selector (#cat-transfers .form-col et al) using --grouped-bg, so
   while --bg climbed with every level the whole left half of the desk stayed
   pinned at its base tone. Measured: with boost 0 against boost 4 in light
   mode, 93% of the preview side's pixels changed and 1.5% of the form side's.
   Dark mode escaped this only because its form-col rule carries !important
   and paints from --surface, which is already on the ramp.

   As the ground climbs toward the card white, the tonal step that lets a
   grouped-inset card read without an outline closes up — so --card-border
   takes over the job in the same measure, and the cards keep their edge at
   full brightness. */
html:not([data-scheme]):not(.dark-mode)[data-boost="1"] {
  --bg: #FBFAF9; --grouped-bg: #FBFAF9; --panel-bg: #FFFFFF; --text: #1C1A18;
  --card-border: rgba(60,50,40,0.10);
}
html:not([data-scheme]):not(.dark-mode)[data-boost="2"] {
  --bg: #FCFCFB; --grouped-bg: #FCFCFB; --panel-bg: #FFFFFF; --text: #0E0C0A;
  --border: rgba(0,0,0,0.16); --muted: #5A5855; --bg-tertiary: #F2F2F2;
  --card-border: rgba(60,50,40,0.14);
}
html:not([data-scheme]):not(.dark-mode)[data-boost="3"] {
  --bg: #FDFDFD; --grouped-bg: #FDFDFD; --panel-bg: #FFFFFF; --text: #050505;
  --border: rgba(0,0,0,0.20); --muted: #484644; --bg-tertiary: #F6F6F6;
  --card-border: rgba(60,50,40,0.18);
}
html:not([data-scheme]):not(.dark-mode)[data-boost="4"] {
  --bg: #FEFEFE; --grouped-bg: #FEFEFE; --panel-bg: #FFFFFF; --text: #000000;
  --border: rgba(0,0,0,0.25); --muted: #3A3838; --bg-tertiary: #FAFAFA;
  --card-border: rgba(60,50,40,0.23);
}
/* Max boost used to add `filter: brightness() contrast()` here. A filter makes
   its element the containing block for every position:fixed descendant, and
   .action-row is one — so at full brightness the docked row stopped measuring
   from the viewport and jumped 160px up the screen, measured, in both themes.
   The boost is carried by the tokens above instead, which is how levels 1-3
   already did it. */

/* The :not([data-scheme]) guard: a colour scheme writes --bg, --panel-bg,
   --bg-tertiary, --text, --muted and --border as inline styles on <html>, and
   an inline style outranks any stylesheet rule. So under a scheme these blocks
   only ever reached the tokens the scheme does NOT set — --grouped-bg and
   --surface. Measured on Rosewood: dragging the slider 0 -> 4 left both panes
   at rgb(248,233,228) and moved nothing but the strip between them, which went
   to rgb(254,254,254); on Claret the same drag turned that strip from
   rgb(10,9,7) to rgb(85,81,78). The boost brightened only the seams. Under a
   scheme the ramp is computed from the scheme's own colours in _boostScheme()
   instead, lifting lightness so the hue survives; here it stays the plain
   token ramp for the two built-in themes. */

/* ── Brightness boost levels (dark mode) ───────────────────────────────
   This used to lift --bg/--panel-bg/--surface toward grey — the same mistake
   the theme itself made before the ground was taken back to crisp black: a
   large surface lifted off black is not brightness, it is the exact haze that
   was just taken out. Dragging the slider used to put it straight back, one
   level at a time, on top of a page that no longer had it anywhere else.

   The ground is not one of the tokens set here now — --bg, --surface,
   --panel-bg and --grouped-bg stay at the crisp black they already are, at
   every level. What brightness actually means against a background that
   isn't moving is the things standing on it standing out more: the card,
   field and chip lifts step up together, the hairline that closes a card's
   shape strengthens with them, and the ink brightens. Solved against the
   ground rather than picked, the way the base card step was: card contrast
   runs 1.40 → 1.55 → 1.75 → 2.00 → 2.35 across the five levels. */
/* No :not([data-scheme]) guard on these four — deliberately, unlike the block
   below. A scheme never sets --card-bg, --card-border, --hairline, --field-*
   or --chip-*, so nothing here is ever masked by an inline style the way
   --bg or --border would be; the same four rules make the objects stand out
   more whether or not a colour scheme is active. Measured: under Espresso,
   card contrast used to sit flat at 1.30 across every boost level because the
   old rule carried the same guard needlessly and never matched. */
html.dark-mode[data-boost="1"] {
  --card-bg: rgba(255,255,255,0.165); --card-border: rgba(255,255,255,0.180);
  --hairline: rgba(255,255,255,0.142);
  --field-bg: rgba(255,255,255,0.097); --field-border: rgba(255,255,255,0.335);
  --chip-fill: rgba(255,255,255,0.129); --chip-fill-hover: rgba(255,255,255,0.219);
}
html.dark-mode[data-boost="2"] {
  --card-bg: rgba(255,255,255,0.198); --card-border: rgba(255,255,255,0.217);
  --hairline: rgba(255,255,255,0.170);
  --field-bg: rgba(255,255,255,0.116); --field-border: rgba(255,255,255,0.402);
  --chip-fill: rgba(255,255,255,0.155); --chip-fill-hover: rgba(255,255,255,0.263);
}
html.dark-mode[data-boost="3"] {
  --card-bg: rgba(255,255,255,0.232); --card-border: rgba(255,255,255,0.254);
  --hairline: rgba(255,255,255,0.199);
  --field-bg: rgba(255,255,255,0.136); --field-border: rgba(255,255,255,0.471);
  --chip-fill: rgba(255,255,255,0.181); --chip-fill-hover: rgba(255,255,255,0.308);
}
/* The workspace column paints from --surface, which none of this touches —
   deliberately: that surface is the ground, and the ground is the one thing
   brightness does not move, scheme or none. What used to read as "the boost
   isn't reaching the part of the screen you're looking at" was the surface
   staying still while --bg climbed past it; here nothing climbs, so there is
   no seam to chase. Level 4 also takes the card and field edges near their
   ceiling — past this the lift stops reading as a card and starts reading as
   its own fill. */
html.dark-mode[data-boost="4"] {
  --card-bg: rgba(255,255,255,0.276); --card-border: rgba(255,255,255,0.302);
  --hairline: rgba(255,255,255,0.237);
  --field-bg: rgba(255,255,255,0.162); --field-border: rgba(255,255,255,0.50);
  --chip-fill: rgba(255,255,255,0.216); --chip-fill-hover: rgba(255,255,255,0.367);
}
/* --border, --muted and --text ARE scheme-owned — applyColorScheme writes
   them inline, and inline beats any selector no matter how specific — so a
   CSS rule can only ever reach them here, with no scheme active. Under a
   scheme the equivalent ramp is computed in _boostScheme/_paintScheme instead
   and written inline alongside the scheme's own colours. */
html:not([data-scheme]).dark-mode[data-boost="1"] { --border: rgba(255,255,255,0.237); }
html:not([data-scheme]).dark-mode[data-boost="2"] { --border: rgba(255,255,255,0.285); --muted: #A5A5A4; }
html:not([data-scheme]).dark-mode[data-boost="3"] { --border: rgba(255,255,255,0.334); --muted: #B9B9B8; }
html:not([data-scheme]).dark-mode[data-boost="4"] {
  --border: rgba(255,255,255,0.397); --muted: #CECECD; --text: #FFFFFF;
}

/* ── Glass field contrast at high brightness (light mode) ─────────────
   Fields stay white but the inset ring gets progressively stronger so
   field boundaries remain clearly visible on bright screens. */
html:not(.dark-mode)[data-boost="2"] .cat-section.active > .panel.form-col .field::after { background: rgba(0,0,0,0.22); }
html:not(.dark-mode)[data-boost="3"] .cat-section.active > .panel.form-col .field::after { background: rgba(0,0,0,0.28); }
html:not(.dark-mode)[data-boost="4"] .cat-section.active > .panel.form-col .field::after { background: rgba(0,0,0,0.36); }


/* ═══════════════════════════════════════════════════════════════
   RESET
═══════════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 15px; background: var(--bg); }
body { font-family: 'DM Sans', system-ui, sans-serif; background: var(--bg); color: var(--text); min-height: 100vh; min-height: 100dvh; font-weight: 300; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-tap-highlight-color: transparent; overscroll-behavior-y: none; animation: pageLoad 0.22s ease both; transition: background-color 0.20s ease, color 0.20s ease; }

button { cursor: pointer; font-family: inherit; -webkit-tap-highlight-color: transparent; }
input, select, textarea { font-family: inherit; }

/* ── Mobile / installable web app polish ── */
@supports (padding: max(0px)) {
  body { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
}
/* Prevent iOS auto-zoom on focused inputs (font-size must be ≥16px) */
@media (max-width: 640px) {
  input, select, textarea { font-size: 16px !important; }
  /* Comfortable tap targets */
  button, .btn, .sp-btn, .header-action-btn, .cat-tab,
  .mode-sub-btn, .rec-toolbar-btn { min-height: 40px; }
  /* Smoother scrolling on iOS */
  body, .panel, .history-body, .history-results, .sp-body, .modal-body { -webkit-overflow-scrolling: touch; }
  /* Avoid horizontal page scroll caused by accidental wide elements */
  html, body { overflow-x: hidden; max-width: 100vw; }
  /* Position hamburger aligned with the bottom of the tab bar */
  .floating-menu-btn {
    top: calc(env(safe-area-inset-top) + 64px);
    right: 16px;
  }
}
/* Standalone (installed home-screen) tweaks */
@media (display-mode: standalone) {
  body { padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); }
  .floating-menu-btn { top: calc(18px + env(safe-area-inset-top)); }
}
@media (display-mode: standalone) and (max-width: 640px) {
  .floating-menu-btn { top: calc(env(safe-area-inset-top) + 64px); right: 16px; }
}
textarea { text-align: justify; line-height: 1.4; }
select { -webkit-appearance: none; appearance: none; }

/* ═══════════════════════════════════════════════════════════════
   HEADER
═══════════════════════════════════════════════════════════════ */
/* ── Dissolve-gradient chrome ── the header settles from solid at the top to a
   softer edge, and melts into the content through a single luminous gold
   hairline. No card surfaces — content sits directly on the header. */
/* ── Surfaces ────────────────────────────────────────────────────────────
   Three ideas borrowed from how Apple actually specifies a control, adapted
   to CSS. None of the toolkit's machinery applies here — it reads Figma and
   emits SwiftUI — but the reasoning behind the numbers does.

   1. A translucent surface is a STACK, not a colour. Apple's button is four
      fills over each other: base density, lift, plate, sheen. Average them
      into one rgba and the surface stops responding to what sits behind it —
      it goes dead against a moving background, which is exactly what our
      aurora is. Hence --glass being layered gradients rather than one fill.

   2. TWO shadows, never one. A tight contact shadow says the panel is resting
      on something; a wide faint one says how far it floats above it. A single
      heavy blur says neither and reads as a grey smudge — fine on a dark
      ground, filthy on a light one. Both scale down in light mode.

   3. A plate has a specular edge top AND bottom. The bottom counter-light is
      the one everybody forgets, and without it the surface reads as paper
      rather than glass. Specular highlights stay literally white in both
      themes: they are physical, not semantic. */
:root {
  --lift-1: 0 1px 2px rgba(0,0,0,0.20), 0 3px 10px -5px rgba(0,0,0,0.24);
  --lift-2: 0 1px 3px rgba(0,0,0,0.24), 0 10px 28px -12px rgba(0,0,0,0.38);
  --lift-3: 0 2px 5px rgba(0,0,0,0.26), 0 22px 56px -18px rgba(0,0,0,0.50);
  --spec:   inset 0 1px 0 rgba(255,255,255,0.13),
            inset 0 -1px 0 rgba(255,255,255,0.045);
  --glass:
    linear-gradient(180deg, rgba(255,255,255,0.085), rgba(255,255,255,0.022) 42%, rgba(255,255,255,0.05)),
    linear-gradient(180deg, rgba(20,17,13,0.30), rgba(12,10,8,0.42));
  --glass-edge: rgba(255,255,255,0.10);
  /* Tools are not identity. The gold had been doing both jobs in the side
     panel — the mark, the signet, the primary action AND the nine tool icons
     — so nine utilities read as loudly as the one thing that names the desk.
     They get a cool platinum instead: metal, so it still belongs on a warm
     near-black ground, but a different metal, so the hierarchy is legible at
     a glance. Gold keeps identity and the primary action; platinum takes the
     tools. Deliberately neutral rather than a colour, because the category
     palette already spends blue on transfers and orange on dining. */
  --tool:        #C4CDD6;
  --tool-bright: #DEE6EE;
  --tool-tint:   199, 207, 216;
}
/* On a pale ground the same shadows are far too heavy — the kit scales them
   down rather than swapping them out, so the elevation order survives. */
html:not(.dark-mode) {
  --lift-1: 0 1px 2px rgba(60,48,32,0.09), 0 3px 10px -5px rgba(60,48,32,0.10);
  --lift-2: 0 1px 3px rgba(60,48,32,0.10), 0 10px 28px -12px rgba(60,48,32,0.16);
  --lift-3: 0 2px 5px rgba(60,48,32,0.12), 0 22px 56px -18px rgba(60,48,32,0.22);
  --spec:   inset 0 1px 0 rgba(255,255,255,0.65),
            inset 0 -1px 0 rgba(255,255,255,0.20);
  --glass:
    linear-gradient(180deg, rgba(255,255,255,0.70), rgba(255,255,255,0.42) 45%, rgba(255,255,255,0.58)),
    linear-gradient(180deg, rgba(255,252,247,0.55), rgba(246,241,233,0.62));
  --glass-edge: rgba(60,48,32,0.12);
}
/* Increase Contrast asks for the same thing Reduce Transparency does — an
   opaque surface — and then some, so the two share this. */
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  :root { --glass: linear-gradient(180deg, rgba(18,15,12,0.94), rgba(12,10,8,0.96)); }
}
/* The desk honours prefers-reduced-motion in 28 places and had nothing at all
   for prefers-contrast, so someone running with Increase Contrast on got the
   full glass-and-hairline stack. This is the tier for them: every edge that
   was a whisper becomes a line, secondary ink moves to primary, and the
   backdrop blurs stop — a blurred backdrop is exactly the low-contrast
   surface the setting is asking us to drop. Nothing here applies to anyone
   who has not asked their OS for it. */
/* forced-colors as well as prefers-contrast. Windows High Contrast sets
   forced-colors: active and, measured in Chromium, does NOT also set
   prefers-contrast: more — so this tier never fired for the people it was
   written for. The browser substitutes its own colours there, which makes most
   of the palette below moot, but not the backdrop blurs: 56 elements still
   carried one, and a blurred backdrop is the low-contrast surface the setting
   exists to remove. */
@media (prefers-contrast: more), (forced-colors: active) {
  html:not(.dark-mode) {
    --border:             rgba(0,0,0,0.42);
    --hairline:           rgba(0,0,0,0.34);
    --card-border:        rgba(0,0,0,0.34);
    --card-border-strong: rgba(0,0,0,0.62);
    --field-border:       rgba(0,0,0,0.46);
    --muted:              #43413E;
    --chip-fill:          rgba(60,50,40,0.12);
    --chip-fill-hover:    rgba(60,50,40,0.20);
    --chip-fill-on:       rgba(184,147,79,0.30);
    --label-empty:        #5F452F;
  }
  html.dark-mode {
    --border:             rgba(255,255,255,0.42);
    --hairline:           rgba(255,255,255,0.34);
    --card-border:        rgba(255,255,255,0.34);
    --card-border-strong: rgba(255,255,255,0.62);
    --field-border:       rgba(255,255,255,0.46);
    --muted:              #D6D2CC;
    --chip-fill:          rgba(255,255,255,0.16);
    --chip-fill-hover:    rgba(255,255,255,0.24);
    --chip-fill-on:       rgba(201,169,110,0.34);
  }
  /* A blurred backdrop is a low-contrast surface by construction, so the
     filters come off. Two surfaces were leaning on the blur for legibility
     rather than decorating with it — measured, the side panel in dark mode is
     only 42-55% opaque and the mode dropdown 85% — so they are made solid
     here rather than left see-through. Everything else already carried a
     background at 92% or more. */
  html.dark-mode {
    --lg-bg: linear-gradient(135deg, rgba(22,20,17,0.985) 0%, rgba(15,15,11,0.99) 100%);
    --lg-border: 1px solid rgba(255,255,255,0.42);
  }
  html:not(.dark-mode) {
    --lg-bg: linear-gradient(160deg, rgba(38,33,26,0.985) 0%, rgba(24,21,16,0.99) 100%);
    --lg-border: 1px solid rgba(255,255,255,0.34);
  }
  .cat-bar-mode-row { background: var(--tab-bar-bg, #0F0E0C) !important; }
  * { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
}

.app-header {
  background:
    linear-gradient(180deg, rgba(0,0,0,0.10) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,0.14) 100%),
    var(--header-bg, #0F0E0C);
  border-bottom: none;
  padding: 5px 24px 7px;
  padding-top: calc(env(safe-area-inset-top) + 5px);
  display: flex;
  flex-direction: column;
  box-shadow: 0 6px 26px rgba(0,0,0,0.32);
  position: relative;
  z-index: 61;
}
/* Aurora. Two blooms drifting across the top of the bar — warm light at the
   left, cool shade at the right — kept whisper-subtle so the header still
   reads calm.

   Both lobes matter, and that is the point. A wash that only adds light works
   on Noir and dies on Bronze: measured, a fixed wash was 47% of the ground on
   Noir and 16% on Bronze, because the overlay is barely brighter than a pale
   header to begin with. Pairing a light lobe with a dark one means there is
   always room to move in one direction or the other, whatever the ground —
   and the alphas are solved per colour in JS (_hdrAuroraVars) so each lobe
   aims at the same share of the bar it sits on. */
/* Dark mode does not get this pseudo-element at all — asked for by name.
   Light mode keeps it; JS still computes --hdr-aur-l/-d for every header
   colour regardless of theme, but in dark mode nothing reads them any more. */
html:not(.dark-mode) .app-header::before {
  content: ""; position: absolute; inset: -30% -12% auto -12%; height: 190%;
  z-index: 0; pointer-events: none;
  background:
    radial-gradient(560px 220px at 14% 12%, rgba(255,236,205,var(--hdr-aur-l, 0.05)), transparent 62%),
    radial-gradient(520px 220px at 86% 18%, rgba(8,14,26,var(--hdr-aur-d, 0.10)), transparent 62%),
    radial-gradient(460px 200px at 52% 96%, rgba(255,236,205,calc(var(--hdr-aur-l, 0.05) * 0.55)), transparent 60%);
  will-change: transform;
  animation: hdrAurora 30s ease-in-out infinite alternate;
}
/* Slow enough to be noticed only if you look for it. */
@keyframes hdrAurora {
  from { transform: translate3d(-2.2%, -1.5%, 0) scale(1); }
  to   { transform: translate3d(2.2%,  1.5%, 0) scale(1.07); }
}
/* Same bargain the dashboard aurora makes: it stops while the page moves. */
html.is-scrolling .app-header::before { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .app-header::before { animation: none; }
}
/* The header clips the blooms' overhang. */
.app-header { overflow: hidden; }
/* The melt: a luminous gold hairline at the bottom edge that glows downward
   into the content. */
.app-header::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; z-index: 3; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(201,169,110,0.55), transparent);
  box-shadow: 0 0 18px 1px rgba(201,169,110,0.32);
}
/* No card surfaces — the rows sit directly on the header gradient. */
.header-main-row, .cat-bar-main-row {
  position: relative; z-index: 1;
  background: transparent;
  border-radius: 0;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  box-shadow: none;
}
.header-main-row { padding: 0; }
.cat-bar { border-bottom: none !important; position: relative; z-index: 61; }
.floating-menu-btn {
  position: fixed;
  top: calc(12px + env(safe-area-inset-top));
  right: 14px;
  z-index: 10350;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgba(15,15,13,0.82);
  backdrop-filter: blur(12px) saturate(150%);
  -webkit-backdrop-filter: blur(12px) saturate(150%);
  border: 1px solid rgba(180,155,115,0.50);
  color: rgba(255,255,255,0.90);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(0,0,0,0.42), 0 1px 4px rgba(0,0,0,0.25);
  transition: background 0.15s, color 0.15s, transform 0.18s cubic-bezier(0.34,1.56,0.64,1);
  -webkit-tap-highlight-color: transparent;
}
.floating-menu-btn:hover { background: rgba(40,40,32,0.92); color: #fff; transform: scale(1.06); }
.floating-menu-btn:active { transform: scale(0.92) !important; transition-duration: 0.08s !important; }
/* Inside the header card (tablet/desktop): blend into the gold button trio and
   sit centred with AI Draft / Home instead of floating as a dark circle. */
@media (min-width: 641px) {
  .floating-menu-btn {
    top: calc(17px + env(safe-area-inset-top));
    background: rgba(212,168,83,0.10);
    border-color: rgba(212,168,83,0.34);
    color: rgba(233,201,127,0.95);
    backdrop-filter: none; -webkit-backdrop-filter: none;
    box-shadow: none;
  }
  .floating-menu-btn:hover { background: rgba(212,168,83,0.18); border-color: rgba(212,168,83,0.55); color: #f0d89a; transform: scale(1.06); }
}
/* Keep hamburger dark in bright mode to match the always-dark header */
html.light-mode .floating-menu-btn {
  background: rgba(15,15,13,0.82);
  border-color: rgba(180,155,115,0.45);
  color: rgba(255,255,255,0.85);
}
html.light-mode .floating-menu-btn:hover { background: rgba(40,40,32,0.95); color: #fff; }
/* Header is always dark by default; text/logo CSS vars handle any custom override */
/* Hide the floating hamburger whenever a modal is open so it never overlaps the close × */
html.modal-open .floating-menu-btn { display: none !important; }
.header-main-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 62px;
}
.header-left {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0;
  /* Equal-weight side anchor so the clocks + pills sit centred between the
     logo (left) and the action buttons (right). Never shrinks below the logo. */
  flex: 1 1 auto;
}
.header-logo-area {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 18px;
  /* Sits flush on the header — no panel, blends with the background. */
  background: transparent;
  border-radius: 14px;
  /* Generous vertical padding, because this block is the reload — the target
     should be the height of the row it sits in, not the height of the mark. */
  padding: 12px 18px 12px 14px;
  align-self: stretch;
  transition: background .18s ease;
}
.header-logo-area:hover { background: rgba(255,255,255,0.06); }
.header-logo-area:active { background: rgba(255,255,255,0.10); }
/* The row centres its children, so the left group has to be told to fill the
   height before the block inside it can. */
.header-left { align-self: stretch; }
/* ── Masthead ────────────────────────────────────────────────────────────
   The crest is gone and the name carries the corner on its own, set as a mark
   rather than a line of text: a serif monogram, a hairline, and the name in
   small letterspaced caps beside it. Caps are what keep it short — the whole
   lockup is narrower than the words it replaced, which is width the widget
   strip gets back. The block is the reload, which is what the crest was. */
.header-mark {
  display: flex; border: none; background: transparent; cursor: pointer;
  font-family: 'Cormorant Garamond', Georgia, serif;
  color: var(--header-text, #F5F0EC);
  gap: 10px; align-items: center; text-align: left;
  -webkit-font-smoothing: antialiased;
}
.header-mark:focus-visible { outline: 2px solid rgba(201,169,110,0.6); outline-offset: 2px; }
/* The monogram. Sized so its box matches the stacked pair beside it rather
   than a line of its own — the tight line-height is what lets one row of caps
   stand as tall as two without the header growing to accommodate leading. */
.hm-pa {
  font-size: 50px; font-weight: 400; line-height: 0.8;
  letter-spacing: 0.5px; flex: 0 0 auto;
  color: var(--header-text, #F5F0EC);
}
/* The two periods are the widest cheap thing in a four-glyph monogram, so
   they are set small and pulled tight on both sides. They still read as
   "P.A." — they just stop costing 30px of header. */
.hm-pa i {
  font-style: normal; font-size: 0.44em;
  margin: 0 0.03em 0 -0.05em; vertical-align: 0.06em;
  opacity: 0.72;
}
/* A hairline between the monogram and the name — the join that makes the two
   halves one mark instead of a big word next to a small one. */
.hm-rule {
  flex: 0 0 auto; width: 1px; height: 42px; align-self: center;
  background: linear-gradient(
    to bottom,
    transparent,
    var(--header-accent, rgba(210,185,160,0.9)) 22%,
    var(--header-accent, rgba(210,185,160,0.9)) 78%,
    transparent);
  opacity: 0.5;
}
.hm-words { display: flex; flex-direction: column; justify-content: center; gap: 3px; min-width: 0; }
/* Letterspaced caps at the monogram's own weight — the name should read as
   the same voice, not as a caption under it. Big caps need proportionally
   less tracking than small ones, and so does a bolder cut of the same size —
   which is where the width for both came from. Setting Concierge at 600
   without retracking had pushed the lockup to 268px, past the 264px of the
   treatment it replaced; at 1.4px it reads better and fits. The negative right
   margin cancels the tracking that would otherwise hang off the last letter
   as dead width. */
.hm-line {
  display: block; white-space: nowrap; line-height: 1;
  text-transform: uppercase; font-weight: 400;
  margin-right: -0.2em;
}
/* The name proper carries the weight; Services stays at the monogram's own
   400 so the two lines read as a name and its qualifier rather than as one
   two-word phrase broken over two lines. */
.hm-line-1 { font-size: 20px; font-weight: 600; letter-spacing: 1.4px; }
/* A shade smaller than the line above but the same ink as the monogram —
   the hierarchy is carried by size and tracking, not by dimming the word.
   The extra tracking is what makes the shorter word set to the same width. */
.hm-line-2 {
  font-size: 17px; letter-spacing: 3.2px; font-weight: 400;
  color: var(--header-text, #F5F0EC);
}
/* Stacked variant for the sign-in card, which has height to spare and no
   width to spare. Same parts, turned through ninety degrees: the hairline
   becomes the rule under the monogram. */
.hm-stack {
  flex-direction: column; align-items: center; gap: 9px;
  cursor: default; color: #ffffff;
}
.hm-stack .hm-pa { font-size: 62px; color: var(--login-ink, #ffffff); }
.hm-stack .hm-rule {
  width: 62px; height: 1px;
  background: linear-gradient(
    to right,
    transparent,
    var(--login-accent, rgba(212,168,83,0.85)) 20%,
    var(--login-accent, rgba(212,168,83,0.85)) 80%,
    transparent);
  opacity: 1;
}
.hm-stack .hm-words { align-items: center; gap: 5px; }
.hm-stack .hm-line { margin-right: 0; text-indent: 0.2em; }
.hm-stack .hm-line-1 { font-size: 16px; font-weight: 600; letter-spacing: 4.7px; color: var(--login-ink, #ffffff); }
/* Same ink as the line above and the monogram — one mark, one colour rule,
   whichever surface it is on. The gold stays on the rule, not the word. */
.hm-stack .hm-line-2 {
  font-size: 14px; letter-spacing: 6.9px;
  color: var(--login-ink, #ffffff); opacity: 1;
}
/* ── Mark styles ─────────────────────────────────────────────────────────
   Four ways to set the same three pieces of text, chosen in Settings. Only
   the default is the lockup the desk shipped with; the other three exist
   because a house name is not always a monogram plus two words.

   Nothing here changes what is in the mark — the parts and their text are
   identical in all four — so switching is a class swap, not a rebuild.

   The style classes are prefixed hm-s- rather than named after the style
   directly: .hm-line is already the class on each line of text, and a style
   class of the same name landed that rule's display:block on the mark
   itself, which turned the flex row into stacked blocks. */
/* Caps only: the name alone. The monogram is hidden rather than cleared, so
   what was typed into the field comes back if the style is switched again —
   choosing a way to set the name should not throw the name away. The module
   reaches the same state from the other direction, by hiding an empty
   monogram field in every style. */
.header-mark.hm-s-caps { gap: 0; }
.header-mark.hm-s-caps .hm-pa,
.header-mark.hm-s-caps .hm-rule { display: none !important; }
/* One line. The two words sit side by side instead of stacked, which is what
   a single-word name wants — "Belldesk" stacked over nothing reads as a
   layout accident. The second word keeps its lighter setting so a two-word
   name still has a name and a qualifier. .hm-line hangs a negative right
   margin off the last letter to cancel its tracking; between two words on one
   line that is a gap eater, so the first line takes its own margin back.
   Both words come down to the size of the smaller of the two stacked lines:
   at 21px the lockup measured 384px against the 261px of the mark it
   replaces, which is width the widget strip pays for. */
.header-mark.hm-s-line .hm-words { flex-direction: row; align-items: baseline; gap: 0.34em; }
.header-mark.hm-s-line .hm-line-1 { font-size: 19px; letter-spacing: 1.2px; margin-right: 0; }
.header-mark.hm-s-line .hm-line-2 { font-size: 19px; letter-spacing: 1.2px; opacity: 0.66; }
/* The monogram is sized to stand as tall as two stacked lines. Beside one it
   is simply oversized, and on the widest of the four styles that is width
   nothing is buying: at 50px the lockup ran to 333px against the 261px of the
   mark it replaces. The hairline comes down with it. */
.header-mark.hm-s-line .hm-pa { font-size: 30px; }
.header-mark.hm-s-line .hm-rule { height: 26px; }
/* Quiet serif. Title case rather than caps, tracked back to nearly nothing —
   the same face reading as a name rather than as a mark. Set at 22/17 rather
   than 25/20: title case carries ascenders and descenders that caps do not,
   and at 25px the mark stood 72px tall in a 66px row, which grows the header
   rather than filling it. */
.header-mark.hm-s-serif .hm-line { text-transform: none; }
.header-mark.hm-s-serif .hm-line-1 { font-size: 22px; letter-spacing: 0.2px; font-weight: 500; }
.header-mark.hm-s-serif .hm-line-2 { font-size: 17px; letter-spacing: 0.6px; opacity: 0.74; }
.header-mark.hm-s-serif .hm-pa { font-size: 44px; }
/* The stacked sign-in mark keeps its own proportions in every style — it has
   height and no width, which is the opposite of the header's problem. */
.hm-stack.hm-s-line .hm-words { flex-direction: row; gap: 0.5em; }
.hm-stack.hm-s-line .hm-line-1,
.hm-stack.hm-s-line .hm-line-2 { font-size: 15px; letter-spacing: 4px; }
.hm-stack.hm-s-serif .hm-line-1 { font-size: 22px; letter-spacing: 1.2px; }
.hm-stack.hm-s-serif .hm-line-2 { font-size: 17px; letter-spacing: 2px; }
/* A hidden part must take no space and leave no gap behind it — the mark is
   a flex row, so display:none is the only thing that removes the gap too. */
.header-mark [hidden] { display: none !important; }
/* The mark is drawn from aria-hidden parts, so the name is carried here. */
.hm-sr {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.header-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 38px;
  font-weight: 400;
  color: var(--header-text, #F5F0EC);
  letter-spacing: 0.5px;
  line-height: 1;
}

/* ── World clocks strip (between title and hamburger) ────────── */
.header-clocks {
  flex: 0 1 auto;
  display: flex;
  align-items: center;
  margin: 0 22px 0 0;
  padding: 0 8px;
  height: 44px;
  position: relative;
  overflow: hidden;
}
.header-clocks-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  gap: clamp(12px, 1.5vw, 24px);
}
.hc-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  flex: 0 0 auto;
  min-width: 0;
  padding: 0;
  cursor: default;
}
.hc-item.hc-local .hc-city { color: var(--header-accent, rgba(210,185,160,1)); }
.hc-item.hc-local .hc-time { color: var(--header-text, #F5F0EC); text-shadow: 0 0 12px rgba(201,169,110,0.18); }
/* The clocks moved onto the mark's face along with the rest of the strip —
   serif caps for the city, serif figures for the time. */
.hc-city {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 9.5px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--header-accent, rgba(210,185,160,0.5));
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}
.hc-time {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 16px;
  font-weight: 400;
  color: var(--header-text, #F5F0EC);
  letter-spacing: 0.4px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* World-clock overflow: a quiet "…" that reveals the remaining cities in a
   panel (rendered on <body> so the strip's overflow:hidden never clips it). */
.hc-more { display: flex; align-items: center; flex: 0 0 auto; }
.hc-more-btn {
  font-family: ui-monospace,'SF Mono',Menlo,monospace; font-size: 16px; line-height: 1;
  letter-spacing: 1px; color: var(--header-accent, rgba(210,185,160,0.75));
  background: none; border: none; cursor: pointer; padding: 6px 4px 10px;
  transition: color .15s;
}
.hc-more-btn:hover, .hc-more.open .hc-more-btn { color: var(--header-text, #F5F0EC); }
.hc-more-pop {
  position: fixed; display: none; z-index: 400;
  grid-template-columns: repeat(2, auto); gap: 11px 22px;
  background: #14120F;   /* solid fallback first — older Edge lacks color-mix */
  background: color-mix(in srgb, var(--tab-bar-bg, #0F0E0C) 90%, transparent);
  -webkit-backdrop-filter: blur(20px) saturate(1.4); backdrop-filter: blur(20px) saturate(1.4);
  border: 1px solid rgba(255,255,255,0.08); border-radius: 12px;
  padding: 15px 18px; box-shadow: 0 14px 38px rgba(0,0,0,0.42);
}
.hc-more-pop.open { display: grid; }
.hc-more-pop .hc-item { flex-direction: row; align-items: baseline; gap: 10px; cursor: default; }
.hc-more-pop .hc-city { text-align: left; min-width: 84px; letter-spacing: 1.5px; }
/* Header is always dark — no light-mode clock override needed */

/* Hide on smaller screens — header would be too crammed */
@media (max-width: 1100px) { .header-clocks { display: none; } }

/* ── Quick guest search bar ── */
.header-guest-search {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0;
  border-radius: 20px;
  height: 32px;
  flex-shrink: 0;
  /* collapsed: icon only */
  width: 32px;
  overflow: visible;
  transition: width 0.25s cubic-bezier(.4,0,.2,1);
}
.header-guest-search.hgs-open {
  width: 210px;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(201,169,110,0.35);
}
.hgs-icon-btn {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.50);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s, border-radius 0.25s;
  position: relative;
  z-index: 1;
}
.header-guest-search.hgs-open .hgs-icon-btn {
  border: none;
  background: none;
  border-radius: 0;
  color: rgba(255,255,255,0.45);
  cursor: default;
}
.hgs-icon-btn:hover { background: rgba(255,255,255,0.12); color: rgba(255,255,255,0.85); border-color: rgba(255,255,255,0.18); }
.header-guest-search.hgs-open .hgs-icon-btn:hover { background: none; color: rgba(255,255,255,0.45); }
.hgs-input {
  background: none;
  border: none;
  outline: none;
  color: rgba(255,255,255,0.88);
  font-family: 'DM Sans', sans-serif;
  font-size: 11px;
  width: 0;
  min-width: 0;
  padding: 0;
  transition: width 0.25s cubic-bezier(.4,0,.2,1), padding 0.25s;
  overflow: hidden;
}
.header-guest-search.hgs-open .hgs-input {
  width: 140px;
  padding: 0 10px 0 0;
}
.hgs-input::placeholder { color: rgba(255,255,255,0.28); }
/* Guest search relocated into the side panel — always open, full width, panel colours */
/* Match the panel's pill controls (.sp-btn / .sp-select) — dark panel, white-alpha tokens */
.side-panel .header-guest-search.sp-search {
  display: none !important;   /* redundant with the launcher's Search tile; kept for JS wiring only */
  width: 100% !important;
  height: auto;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 999px;
  transition: border-color 0.18s;
}
.side-panel .header-guest-search.sp-search:hover { border-color: rgba(180,155,115,0.45); }
.side-panel .header-guest-search.sp-search:focus-within { border-color: rgba(180,155,115,0.7); }
.side-panel .sp-search .hgs-icon-btn {
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
  color: rgba(255,255,255,0.5);
  cursor: text;
  width: 42px;
  height: 40px;
}
.side-panel .sp-search .hgs-input {
  width: 100% !important;
  flex: 1 1 auto;
  opacity: 1;
  padding: 11px 14px 11px 0;
  color: rgba(255,255,255,0.88);
  font-family: inherit;
  font-size: 12px;
  font-weight: 300;
  letter-spacing: 0.01em;
}
.side-panel .sp-search .hgs-input::placeholder { color: rgba(255,255,255,0.4); }
.side-panel .sp-search .hgs-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  width: auto;
}
.hgs-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  left: auto;
  width: 260px;
  background: #1C1A17;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 10px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.60);
  z-index: 2000;
  overflow: hidden;
  max-height: 320px;
  overflow-y: auto;
}
.hgs-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 12px;
  cursor: pointer;
  transition: background 0.1s;
}
.hgs-item:hover, .hgs-item.active { background: rgba(255,255,255,0.07); }
.hgs-item-icon { flex-shrink: 0; color: var(--gold); opacity: 0.8; }
.hgs-item-name {
  font-family: 'DM Sans', sans-serif;
  font-size: 11.5px;
  color: rgba(255,255,255,0.88);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}
.hgs-item-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.hgs-item-cat {
  font-size: 9px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.30);
  font-family: 'DM Sans', sans-serif;
}
.hgs-item-age {
  font-size: 9px;
  color: rgba(255,255,255,0.25);
  font-family: 'DM Sans', sans-serif;
}
.hgs-empty {
  padding: 14px 12px;
  font-family: 'DM Sans', sans-serif;
  font-size: 11px;
  color: rgba(255,255,255,0.30);
  text-align: center;
}
.hgs-footer {
  border-top: 1px solid rgba(255,255,255,0.08);
  padding: 7px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.hgs-footer-hint {
  font-size: 9.5px;
  color: rgba(255,255,255,0.25);
  font-family: 'DM Sans', sans-serif;
}
.hgs-footer-link {
  font-size: 9.5px;
  color: var(--gold);
  font-family: 'DM Sans', sans-serif;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  opacity: 0.75;
}
.hgs-footer-link:hover { opacity: 1; }
@media (max-width: 1100px) { .header-guest-search { width: 32px !important; } }
@media (max-width: 480px) { .header-guest-search { display: none; } }

/* ── Header right group: search + guest as one cluster ── */
.header-right-group {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-right: 52px;
  /* Matching side anchor to .header-left so the middle group stays centred. */
  flex: 1 1 auto;
}
.header-right-sep {
  width: 1px;
  height: 16px;
  background: rgba(255,255,255,0.10);
  flex-shrink: 0;
}

/* ── Real-time update toast ── */
.rt-toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background: #1C1A17;
  border: 1px solid rgba(201,169,110,0.35);
  border-radius: 10px;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 6px 28px rgba(0,0,0,0.55);
  cursor: pointer;
  z-index: 9000;
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  color: rgba(255,255,255,0.82);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.25s, transform 0.25s;
  pointer-events: none;
}
.rt-toast.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.rt-toast-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gold);
  flex-shrink: 0;
}

.header-toggle-btn {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: rgba(255,255,255,0.45);
  flex-shrink: 0;
  transition: background 0.15s, color 0.15s;
}
.header-toggle-btn:hover { background: rgba(255,255,255,0.12); color: rgba(255,255,255,0.9); }
.header-toggle-btn svg { transition: transform 0.24s ease; }
.app-header.controls-open .header-toggle-btn svg,
html.header-open .header-toggle-btn svg { transform: rotate(180deg); }
/* Anti-flash: on phones keep the editor action row hidden until Home has made
   its landing decision (html.mh-decided). Must live in <head> so it applies
   before the action row ever paints on reload. */
@media (max-width: 600px) { html:not(.mh-decided) .action-row { display: none !important; } }
/* ── Keyboard shortcuts help button + modal ── */
.kbd-help-btn {
  flex-shrink: 0;
  width: 26px; height: 26px;
  border-radius: 50%;
  border: 1px solid var(--border, rgba(180,155,115,0.30));
  background: transparent;
  color: var(--gold, #b89b6e);
  font-family: 'DM Sans', sans-serif;
  font-size: 14px; font-weight: 500;
  cursor: pointer; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.kbd-help-btn:hover { background: var(--gold-pale, rgba(184,155,110,0.12)); border-color: var(--gold, #b89b6e); }

/* Header launcher buttons (defined here in the head CSS so they never flash
   unstyled on reload). AI Draft = primary gold card; Today = outline pill. */
.ai-launch-btn {
  display: inline-flex; align-items: center; gap: 7px;
  height: 26px; padding: 0 14px; flex-shrink: 0; margin-right: 10px;
  background: linear-gradient(180deg, rgba(224,184,104,0.26), rgba(198,158,82,0.20));
  border: 1px solid rgba(224,184,104,0.60); border-radius: 999px;
  color: #f3dca4; cursor: pointer; white-space: nowrap;
  font-family: 'DM Sans', sans-serif; font-size: 12px; font-weight: 500;
  letter-spacing: 1.6px; text-transform: uppercase;
  box-shadow: 0 0 0 1px rgba(212,168,83,0.10), 0 2px 10px -4px rgba(212,168,83,0.45);
  transition: background .18s, border-color .18s, color .18s, box-shadow .18s;
}
.ai-launch-btn:hover {
  background: linear-gradient(180deg, rgba(228,190,112,0.40), rgba(202,162,86,0.32));
  border-color: rgba(232,196,120,0.85); color: #fcecc4;
  box-shadow: 0 0 0 1px rgba(212,168,83,0.18), 0 4px 16px -4px rgba(212,168,83,0.60);
}
.ai-launch-btn svg { flex-shrink: 0; }
.today-tab-btn {
  display: inline-flex; align-items: center; gap: 6px;
  height: 26px; padding: 0 12px; margin: 0 8px 0 2px;
  background: rgba(212,168,83,0.10); border: 1px solid rgba(212,168,83,0.34);
  border-radius: 999px; color: rgba(233,201,127,0.95);
  font-family: 'DM Sans', sans-serif; font-size: 12px; font-weight: 400;
  letter-spacing: 1.3px; text-transform: uppercase;
  cursor: pointer; white-space: nowrap; flex-shrink: 0;
  transition: background .18s, border-color .18s, color .18s;
}
.today-tab-btn:hover { background: rgba(212,168,83,0.18); border-color: rgba(212,168,83,0.55); color: #f0d89a; }
.today-tab-btn svg { flex-shrink: 0; }
/* Collapse to round icon buttons — matched to the hamburger — when the header
   is tight (split window / landscape phone). */
@media (max-width: 1180px) {
  .today-tab-label, .ai-launch-label { display: none; }
  .ai-launch-btn, .today-tab-btn {
    width: 38px; height: 38px; padding: 0; margin: 0 5px; gap: 0;
    border-radius: 50%; justify-content: center; flex-shrink: 0;
  }
  .ai-launch-btn svg, .today-tab-btn svg { width: 17px; height: 17px; }
}
/* In the icon-circle range, drop the hamburger to the row centre so the three
   round buttons (AI Draft, Home, hamburger) sit on one line. */
@media (min-width: 641px) and (max-width: 1180px) {
  .floating-menu-btn { top: calc(20px + env(safe-area-inset-top)); }
}
@media (max-width: 600px) { .today-tab-btn, .ai-launch-btn { display: none; } }

/* ── Follow-up bell ──────────────────────────────────────────────────
   It lived in the header beside AI Draft and Home, where it held about a
   hundred pixels open to report a count that is zero most of the day. It is
   the same button — same id, so the painter, the ring and Alt+R all still
   find it — moved into the side panel's launcher and wearing that row's
   clothes: the tile geometry comes from .sp-tile, and these rules only place
   the badge and carry the two states. */
.rem-bell-tile { position: relative; }
/* The badge rides the corner. In the header it sat in a row of text; on a
   tile there is no row, and the corner is where a count belongs. */
.rem-bell-tile .rem-bell-badge {
  position: absolute; top: 4px; right: 5px;
  box-shadow: 0 0 0 2px rgba(20,19,17,0.92);
}
/* Three states. Quiet is the tile's own default; due lifts the edge and the
   icon in amethyst, late reddens the badge only — it never shouts. The accent
   is deliberately not the desk's gold, so a follow-up never reads as one of
   the gold booking actions. */
.rem-bell-tile.is-due {
  border-color: var(--rl-accent-hdr-edge-strong);
  background: linear-gradient(180deg, rgba(154,134,184,0.17), rgba(154,134,184,0.05));
}
.rem-bell-tile.is-due .sp-tile-ic { color: var(--rl-accent-hdr-ink-hover); }
.rem-bell-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px;
  background: var(--rl-accent-hdr-fill); color: var(--rl-accent-hdr-on);
  font-family: ui-monospace, Menlo, monospace; font-size: 9.5px; font-weight: 500;
  letter-spacing: 0; line-height: 1; font-variant-numeric: tabular-nums;
}
.rem-bell-tile.is-late .rem-bell-badge,
.rem-bell-fab.is-late .rem-bell-badge { background: #B4553D; color: #FFF3EE; }
/* The state is only known once the stored reminders are read, so the first
   paint changed colour and popped a badge — a grey-to-accent fade on every
   reload. Transitions are suppressed until that first paint lands. */
.rem-bell-tile.rem-boot, .rem-bell-tile.rem-boot * { transition: none !important; animation: none !important; }
.rem-bell-tile:focus-visible { outline: 2px solid var(--rl-accent-hdr-edge-strong); outline-offset: 2px; }
/* paint() sets badge.hidden when nothing is due, but an author display rule
   beats the UA's [hidden]{display:none} at any specificity — so the badge sat
   there reading "0" on a desk with no follow-ups, which is the one state it
   exists to not report. The attribute needs saying out loud. */
.rem-bell-badge[hidden] { display: none !important; }
/* One short swing when a reminder comes due — enough to catch the eye at a
   busy desk, over before it becomes a distraction. */
@keyframes remBellRing {
  0%,100% { transform: rotate(0); }
  12% { transform: rotate(13deg); }  28% { transform: rotate(-11deg); }
  44% { transform: rotate(8deg); }   60% { transform: rotate(-6deg); }
  76% { transform: rotate(3deg); }
}
.rem-bell-tile.is-ringing svg, .rem-bell-fab.is-ringing svg {
  animation: remBellRing 1s cubic-bezier(0.36,0.07,0.19,0.97) 2;
  transform-origin: 50% 12%;
}
@media (prefers-reduced-motion: reduce) {
  .rem-bell-tile.is-ringing svg, .rem-bell-fab.is-ringing svg { animation: none; }
}
.rem-alerts-btn {
  background: none; border: none; padding: 0; cursor: pointer; color: inherit;
  font-family: inherit; font-size: 9.5px; letter-spacing: 1.3px; text-transform: uppercase;
  text-decoration: underline; text-underline-offset: 3px; opacity: 0.75;
}
.rem-alerts-btn:hover { opacity: 1; color: var(--rl-accent-hdr-ink); }
/* The narrow-header rules that collapsed the bell to a circle, and the phone
   rule that hid it with the header, went with the move: a tile in the side
   panel is the same size at every width, and the panel opens on a phone too.
   The floating twin below is still the phone's quick route to the rail. */
.rem-bell-fab {
  display: none;
  position: fixed; top: calc(12px + env(safe-area-inset-top)); right: 68px;
  z-index: 10350; width: 44px; height: 44px; border-radius: 50%;
  background: rgba(15,15,13,0.82);
  backdrop-filter: blur(12px) saturate(150%); -webkit-backdrop-filter: blur(12px) saturate(150%);
  border: 1px solid var(--rl-accent-hdr-edge); color: rgba(255,255,255,0.90);
  align-items: center; justify-content: center; cursor: pointer; padding: 0;
  box-shadow: 0 4px 16px rgba(0,0,0,0.42), 0 1px 4px rgba(0,0,0,0.25);
  transition: background .15s, color .15s, border-color .15s;
  -webkit-tap-highlight-color: transparent;
}
.rem-bell-fab.rem-boot, .rem-bell-fab.rem-boot * { transition: none !important; }
.rem-bell-fab.is-due { border-color: var(--rl-accent-hdr-edge-strong); color: var(--rl-accent-hdr-ink); }
.rem-bell-fab .rem-bell-badge { position: absolute; top: -2px; right: -2px; box-shadow: 0 0 0 2px rgba(15,15,13,0.9); }
html.modal-open .rem-bell-fab { display: none !important; }
@media (max-width: 600px) { .rem-bell-fab { display: flex; top: calc(16px + env(safe-area-inset-top)); } }

.kbd-modal-overlay {
  position: fixed; inset: 0; z-index: 10600;
  background: rgba(0,0,0,0.45);
  display: flex; align-items: center; justify-content: center;
  padding: 20px; font-family: 'DM Sans', sans-serif;
}
.kbd-modal {
  background: var(--panel-bg, #1a1814);
  border: 1px solid var(--border, rgba(180,155,115,0.30));
  border-radius: 14px;
  width: 100%; max-width: 380px;
  box-shadow: 0 18px 50px rgba(0,0,0,0.5);
  overflow: hidden;
}
.kbd-modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 18px 14px;
  border-bottom: 1px solid var(--border, rgba(180,155,115,0.20));
}
.kbd-modal-title {
  font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--charcoal, #e8e2d6); font-weight: 500;
}
.kbd-modal-close {
  background: none; border: none; color: var(--muted, #8a8378);
  font-size: 16px; cursor: pointer; line-height: 1; padding: 4px;
}
.kbd-modal-close:hover { color: var(--gold, #b89b6e); }
.kbd-modal-body { padding: 10px 18px 16px; }
.kbd-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px 0; border-bottom: 1px solid rgba(180,155,115,0.10);
}
.kbd-row:last-child { border-bottom: none; }
.kbd-desc { font-size: 13px; color: var(--charcoal, #e8e2d6); }
.kbd-keys { display: flex; align-items: center; gap: 4px; color: var(--muted, #8a8378); font-size: 12px; }
.kbd-keys kbd {
  background: rgba(180,155,115,0.10);
  border: 1px solid var(--border, rgba(180,155,115,0.30));
  border-radius: 5px;
  padding: 2px 7px;
  font-family: 'DM Sans', sans-serif;
  font-size: 11px; color: var(--gold, #b89b6e);
  min-width: 18px; text-align: center;
}
.header-field {
  display: flex;
  align-items: center;
}
.header-field label {
  display: none;
}

.header-action-btn {
  font-family: 'DM Sans', sans-serif;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
  background: none;
  border: none;
  border-bottom: 2.5px solid transparent;
  padding: 9px 16px 7px;
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.header-action-btn:hover {
  color: var(--white);
  border-bottom-color: rgba(255,255,255,0.25);
  background: none;
  box-shadow: none;
}
.header-action-btn:active {
  transform: translateY(1px);
}
.header-action-btn.history-btn {
  background: none;
  color: rgba(255,255,255,0.6);
  border: none;
  border-bottom: 2.5px solid transparent;
  position: relative;
}
.header-action-btn.history-btn:hover {
  background: none;
  color: var(--white);
  border-bottom-color: rgba(255,255,255,0.25);
}
.header-action-btn.history-btn .hist-count-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  background: var(--gold);
  color: #fff;
  font-size: 8px;
  font-weight: 700;
  min-width: 16px;
  height: 16px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 0;
  padding: 0 4px;
  line-height: 1;
}
/* ── Draft status indicator + Recent menu ── */
.draft-status {
  font-size: 11px;
  color: rgba(255,255,255,0.55);
  letter-spacing: 0.02em;
  padding: 0 8px;
  white-space: nowrap;
  transition: color .2s ease, opacity .2s ease;
  min-width: 0;
}
.draft-status.saving { color: rgba(255,255,255,0.45); }
.draft-status.saved  { color: rgba(255,255,255,0.7); }
.draft-status.error  { color: #f0a3a3; }
.mode-btn { display: none; }

/* ═══════════════════════════════════════════════════════════════
   POLISH: Skeletons, soft validation
═══════════════════════════════════════════════════════════════ */

/* Skeleton loader — replaces "Loading…" text */
@keyframes skeleton-pulse {
  0%   { background-position: -200px 0; }
  100% { background-position: calc(200px + 100%) 0; }
}
.skeleton {
  display: block;
  background: linear-gradient(90deg, rgba(0,0,0,0.06) 0px, rgba(0,0,0,0.12) 60px, rgba(0,0,0,0.06) 120px);
  background-size: 200px 100%;
  background-repeat: no-repeat;
  border-radius: 3px;
  height: 12px;
  width: 100%;
  margin: 6px 0;
  animation: skeleton-pulse 1.2s ease-in-out infinite;
}
.skeleton.sk-line-sm { height: 10px; width: 70%; }
.skeleton.sk-line-md { height: 12px; width: 90%; }
.skeleton.sk-line-lg { height: 14px; width: 100%; }
.skeleton-group { display: flex; flex-direction: column; gap: 6px; padding: 6px 0; }
/* The shimmer above is built from rgba(0,0,0,…) and is effectively invisible on
   the dark theme — light-on-dark is needed there or the placeholder just reads
   as empty space. */
html.dark-mode .skeleton {
  background: linear-gradient(90deg, rgba(255,255,255,0.05) 0px, rgba(255,255,255,0.11) 60px, rgba(255,255,255,0.05) 120px);
  background-size: 200px 100%;
  background-repeat: no-repeat;
}
@media (prefers-reduced-motion: reduce) {
  .skeleton { animation: none; }
}
/* A row-shaped placeholder for lists of arrangements: a category dot and two
   lines of differing length, so the load reads as the real cards settling in
   rather than as generic grey bars. */
.sk-row { display: flex; align-items: center; gap: 10px; padding: 9px 2px; }
.sk-row .sk-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; margin: 0; }
.sk-row .sk-lines { flex: 1; display: flex; flex-direction: column; gap: 5px; }

/* ── Failure state ────────────────────────────────────────────────
   Distinct from the empty state on purpose. "Nothing found" and "the
   request broke" were previously rendered with the same class, so a
   failure was indistinguishable from a genuinely empty result. */
.cd-error {
  text-align: center;
  padding: 34px 20px;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.6;
  font-family: var(--ui-font, 'Jost', sans-serif);
}
.cd-error .cd-error-mark {
  display: block;
  font-size: 15px;
  color: #B4796B;
  margin-bottom: 8px;
  line-height: 1;
}
html.dark-mode .cd-error .cd-error-mark { color: #C98E7E; }
.cd-error .cd-error-msg { color: var(--text); font-size: 13px; }
.cd-error .cd-error-hint { display: block; margin-top: 5px; font-size: 11.5px; opacity: 0.75; }
.cd-error .cd-error-retry {
  margin-top: 13px;
  background: transparent;
  border: 1px solid var(--gold-border);
  color: var(--gold-mid);
  font-family: var(--ui-font, 'DM Sans', sans-serif);
  font-size: 10px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  padding: 6px 15px;
  border-radius: 999px;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.cd-error .cd-error-retry:hover { background: rgba(201,169,110,0.12); }

/* Premium shimmer skeletons for the mobile home lists — a card-shaped placeholder
   (dot + two lines) that mirrors the real arrangement cards, so the load reads as
   an app settling in rather than a page fetching. Theme-aware. */
@keyframes mhShimmer { 0% { background-position: -340px 0; } 100% { background-position: 340px 0; } }
.mh-skel-card {
  display: flex; align-items: center; gap: 13px;
  padding: 15px 16px; border-radius: 16px; margin-bottom: 10px;
  background: rgba(0,0,0,0.025); border: 1px solid rgba(0,0,0,0.05);
}
.mh-skel-lines { flex: 1; display: flex; flex-direction: column; gap: 9px; min-width: 0; }
.mh-skel-dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
.mh-skel-bar { height: 11px; border-radius: 6px; }
.mh-skel-dot, .mh-skel-bar {
  background: linear-gradient(90deg, rgba(0,0,0,0.05) 0, rgba(0,0,0,0.10) 60px, rgba(0,0,0,0.05) 120px);
  background-size: 340px 100%; background-repeat: no-repeat;
  animation: mhShimmer 1.35s ease-in-out infinite;
}
.mh-skel-bar.w1 { width: 52%; } .mh-skel-bar.w2 { width: 82%; }
.mh-skel-card:nth-child(2) .mh-skel-bar { animation-delay: 0.12s; }
.mh-skel-card:nth-child(3) .mh-skel-bar { animation-delay: 0.24s; }
html.dark-mode .mh-skel-card { background: rgba(255,255,255,0.028); border-color: rgba(255,255,255,0.055); }
html.dark-mode .mh-skel-dot, html.dark-mode .mh-skel-bar {
  background: linear-gradient(90deg, rgba(255,255,255,0.05) 0, rgba(255,255,255,0.12) 60px, rgba(255,255,255,0.05) 120px);
  background-size: 340px 100%;
}

/* Soft validation: subtle warning ring on missing recommended fields */
.field-warn {
  box-shadow: inset 0 -2px 0 0 var(--gold) !important;
  background-color: rgba(212,168,83,0.06) !important;
  transition: box-shadow .2s ease, background-color .2s ease;
}
.field-warn:focus { box-shadow: inset 0 -2px 0 0 var(--gold-mid) !important; }

/* ── Mode sub-bar — now merged into cat-bar ── */
.cat-tabs-group {
  display: flex;
  align-items: stretch;
  justify-content: flex-start;
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
  padding-left: 204px;
}
.cat-tabs-group::-webkit-scrollbar { display: none; }
/* AI Draft tab: only shown on phone, where it replaces the Flow tab. */
.cat-tab-ai { display: none; color: var(--gold, #b89b6e); }
.cat-tab-ai .tab-icon { color: var(--gold, #b89b6e); }
.cat-tab-ai:hover { color: var(--gold-light, #d4b877); }
@media (max-width: 600px) {
  #tab-tools { display: none; }
  .cat-tab-ai { display: inline-flex; }
}
.mode-sub-bar {
  background: transparent;
  border-bottom: none;
  padding: 4px 0 8px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  box-shadow: none;
  min-width: 0;
}
.mode-sub-group {
  display: none;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding-left: 0;
  margin-left: 0;
  border-left: none;
}
.mode-sub-group[style*="display: flex"],
.mode-sub-group[style*="display:flex"] {
  display: flex !important;
  flex-direction: column !important;
}
.mode-sub-btn {
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  background: none;
  border: none;
  padding: 11px 20px 11px 20px;
  cursor: pointer;
  font-family: 'Cormorant Garamond', serif;
  transition: color 0.15s;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  text-align: left;
  width: 100%;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
/* Left accent bar */
.mode-sub-btn::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1.5px;
  height: 0;
  background: transparent;
  transition: height 0.15s, background 0.15s;
}
/* Right arrow */
.mode-sub-btn::after {
  content: '›';
  font-size: 16px;
  font-weight: 300;
  line-height: 1;
  opacity: 0.25;
  transition: opacity 0.15s, transform 0.15s;
  flex-shrink: 0;
  margin-left: 12px;
}
.mode-sub-btn:hover { color: rgba(255,255,255,0.85); }
.mode-sub-btn:hover::before { height: 14px; background: rgba(255,255,255,0.3); }
.mode-sub-btn:hover::after { opacity: 0.6; transform: translateX(2px); }
.mode-sub-btn.active { color: rgba(255,255,255,0.95); }
.mode-sub-btn.active::before { height: 16px; background: #D4A853; }
.mode-sub-btn.active::after { opacity: 0.7; }

/* ── Cat-bar entrance & section transition keyframes ── */
@keyframes catBarIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes catTabIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* Smooth tab switch — a soft, slightly longer cross-fade. Opacity only (no
   transform) so the panel never shifts and the fixed action-row stays put; the
   gentle ease-in-out just makes it glide in rather than snap. */
@keyframes catSectionIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.cat-section.sec-enter {
  animation: catSectionIn 0.3s cubic-bezier(0.33, 0, 0.2, 1) both;
  will-change: opacity;
}
@keyframes modeGroupIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes pageLoad {
  from { opacity: 0; }
  to   { opacity: 1; }
}
/* ── Toast notifications ── */
@keyframes _toastIn  { from { opacity:0; transform:translateY(10px) scale(0.96); } to { opacity:1; transform:none; } }
@keyframes _toastOut { from { opacity:1; transform:none; } to { opacity:0; transform:translateY(10px); } }
@keyframes _toastProgress { from { transform:scaleX(1); } to { transform:scaleX(0); } }
/* ── Combobox dropdown entrance ── */
@keyframes srchDdIn {
  from { opacity: 0; transform: translateY(-5px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── Flow panel toggle bar ── */
@keyframes flowBtnSlide {
  from { opacity: 0; transform: translateX(12px); }
  to   { opacity: 1; transform: translateX(0); }
}
#flow-panel-bar {
  display: none;
  align-items: stretch;
  gap: 0;
  padding: 0 0 0 20px;
  flex: 1;
}
.flow-panel-btn {
  font-family: 'DM Sans', sans-serif; font-size: 9px; font-weight: 500;
  letter-spacing: 1.5px; text-transform: uppercase;
  background: none; border: none; border-bottom: 1.5px solid transparent;
  color: var(--muted); padding: 0 14px;
  cursor: pointer; transition: color 0.2s, border-color 0.2s, opacity 0.2s;
  display: flex; align-items: center; white-space: nowrap;
  -webkit-tap-highlight-color: transparent; animation: none;
}
#flow-panel-bar.anim .flow-panel-btn:nth-child(1) { animation: flowBtnSlide 0.28s cubic-bezier(0.25,0.46,0.45,0.94) 0.04s both; }
#flow-panel-bar.anim .flow-panel-btn:nth-child(2) { animation: flowBtnSlide 0.28s cubic-bezier(0.25,0.46,0.45,0.94) 0.10s both; }
#flow-panel-bar.anim .flow-panel-btn:nth-child(3) { animation: flowBtnSlide 0.28s cubic-bezier(0.25,0.46,0.45,0.94) 0.16s both; }
#flow-panel-bar.anim .flow-panel-btn:nth-child(4) { animation: flowBtnSlide 0.28s cubic-bezier(0.25,0.46,0.45,0.94) 0.22s both; }
.mode-sub-group.anim { animation: modeGroupIn 0.22s ease both; }
.mode-sub-group.anim .mode-sub-btn:nth-child(1) { animation: flowBtnSlide 0.26s cubic-bezier(0.25,0.46,0.45,0.94) 0.06s both; }
.mode-sub-group.anim .mode-sub-btn:nth-child(2) { animation: flowBtnSlide 0.26s cubic-bezier(0.25,0.46,0.45,0.94) 0.13s both; }
.mode-sub-group.anim .mode-sub-btn:nth-child(3) { animation: flowBtnSlide 0.26s cubic-bezier(0.25,0.46,0.45,0.94) 0.20s both; }
.flow-panel-btn.panel-open { color: rgba(255,255,255,0.9); border-bottom-color: var(--gold); }
.flow-panel-btn:not(.panel-open) { opacity: 0.38; }
.flow-panel-btn:hover { color: var(--gold); opacity: 1; border-bottom-color: var(--gold-light); }

/* ── Searchable airport combobox ──────────────────────────────── */
.srch-sel-wrap { position: relative; }
/* .field .srch-sel-input specificity (0,2,0) beats .field input (0,1,1) */
.srch-sel-input,
.field .srch-sel-input {
  width: 100%;
  box-sizing: border-box;
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 300;
  color: var(--text);
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 9px 6px 8px 0;
  outline: none;
  box-shadow: none;
  transition: none;
  cursor: pointer;
}
.srch-sel-input:focus,
.field .srch-sel-input:focus { box-shadow: none; }
.srch-sel-input::placeholder { color: var(--muted); opacity: 0.7; }
.srch-sel-dd {
  display: none;
  position: fixed;
  width: max-content;
  max-width: 340px;
  background: rgba(252,250,247,0.97);
  backdrop-filter: blur(12px) saturate(1.4);
  -webkit-backdrop-filter: blur(12px) saturate(1.4);
  border: 1px solid rgba(255,255,255,0.72);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.13), 0 2px 8px rgba(0,0,0,0.07), inset 0 1px 0 rgba(255,255,255,0.9);
  max-height: min(80vh, 720px);
  overflow-y: auto;
  z-index: 10500;
  overflow: hidden;
}
.srch-sel-dd.open { display: block; animation: srchDdIn 0.15s cubic-bezier(0.25,0.46,0.45,0.94) both; }
/* allow scroll inside the rounded glass container */
.srch-sel-dd > * { overflow: visible; }
.srch-sel-dd { overflow-y: auto; }
.srch-sel-item {
  padding: 8px 14px;
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  font-weight: 400;
  color: #2E2A26;
  cursor: pointer;
  white-space: nowrap;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  transition: background 0.12s;
}
.srch-sel-item:hover { background: rgba(201,169,110,0.20); }
.srch-sel-item.sel-active { background: rgba(201,169,110,0.26); color: var(--gold); font-weight: 500; }
.srch-sel-add-new {
  padding: 9px 14px;
  font-family: 'DM Sans', sans-serif;
  font-size: 11px;
  font-weight: 400;
  color: var(--gold-mid, #b8924a);
  cursor: pointer;
  border-top: 1px solid rgba(0,0,0,0.07);
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 5px;
  transition: background 0.12s;
}
.srch-sel-add-new:hover { background: rgba(201,169,110,0.16); }
.srch-sel-group {
  padding: 5px 14px 3px;
  font-family: 'DM Sans', sans-serif;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--muted);
  border-top: 1px solid rgba(0,0,0,0.07);
  margin-top: 2px;
}
.srch-sel-group:first-child { border-top: none; margin-top: 0; }
.srch-sel-cat {
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--muted);
  opacity: 0.75;
  white-space: nowrap;
  flex-shrink: 0;
}
/* scrollbar inside glass dropdown */
.srch-sel-dd::-webkit-scrollbar { width: 4px; }
.srch-sel-dd::-webkit-scrollbar-track { background: transparent; }
.srch-sel-dd::-webkit-scrollbar-thumb { background: rgba(201,169,110,0.35); border-radius: 4px; }
.iq-sel-dd { scrollbar-width: none; }
.iq-sel-dd::-webkit-scrollbar { display: none; }
html.dark-mode .srch-sel-dd {
  background: rgba(16,13,10,0.92);
  backdrop-filter: blur(12px) saturate(1.3);
  -webkit-backdrop-filter: blur(12px) saturate(1.3);
  border-color: rgba(255,255,255,0.10);
  box-shadow: 0 8px 32px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.05);
}
html.dark-mode .srch-sel-item { color: rgba(255,255,255,0.88); }
html.dark-mode .srch-sel-item:hover { background: rgba(201,169,110,0.15); }
html.dark-mode .srch-sel-item.sel-active { background: rgba(201,169,110,0.20); }
html.dark-mode .srch-sel-group { border-color: rgba(255,255,255,0.07); }
html.dark-mode .srch-sel-add-new { border-top-color: rgba(255,255,255,0.07); }

/* ── Global Guest Bar ─────────────────────────────────────────── */
/* Old guest bar row — hidden, replaced by header chip */
.cat-bar-guest-row { display: none !important; }

/* ── Guest chip in header ─────────────────────────────────────── */
.guest-chip {
  display: flex;
  align-items: center;
  gap: 7px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 20px;
  padding: 5px 13px 5px 10px;
  cursor: pointer;
  transition: background 0.18s, border-color 0.18s;
  flex-shrink: 0;
  /* margin-right handled by .header-right-group which has its own right margin */
}
.guest-chip:hover { background: rgba(255,255,255,0.14); border-color: rgba(255,255,255,0.22); }
.guest-chip.has-guest { background: rgba(201,169,110,0.12); border-color: rgba(201,169,110,0.30); }
.guest-chip.has-guest:hover { background: rgba(201,169,110,0.20); }
.guest-chip-name {
  font-family: 'DM Sans', sans-serif;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.6px;
  color: rgba(255,255,255,0.55);
  white-space: nowrap;
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.guest-chip.has-guest .guest-chip-name { color: rgba(255,255,255,0.88); }

/* ── Guest popover panel ─────────────────────────────────────── */
.guest-popover {
  display: none;
  position: fixed;
  top: 68px;
  right: 52px;
  z-index: 8500;
  background: rgba(18,14,10,0.82);
  backdrop-filter: blur(28px) saturate(1.5);
  -webkit-backdrop-filter: blur(28px) saturate(1.5);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 14px;
  padding: 14px 16px 12px;
  min-width: 340px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.06);
}
.gg-search-row {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 10px;
  padding: 8px 12px;
  margin-bottom: 10px;
  transition: border-color 0.15s, background 0.15s;
}
.gg-search-row:focus-within { border-color: rgba(212,168,83,0.55); background: rgba(255,255,255,0.11); }
.gg-search-icon { color: rgba(255,255,255,0.32); flex-shrink: 0; }
.gg-search-input {
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  font-weight: 300;
  color: rgba(255,255,255,0.90);
  background: none;
  border: none;
  outline: none;
  width: 100%;
}
.gg-search-input::placeholder { color: rgba(255,255,255,0.28); }
.gg-divider {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 12px 0 10px;
}
.gg-divider::before, .gg-divider::after { content: ''; flex: 1; height: 1px; background: rgba(255,255,255,0.09); }
.gg-divider span {
  font-family: 'DM Sans', sans-serif;
  font-size: 8.5px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.22);
  white-space: nowrap;
}
.guest-popover.open { display: block; animation: gpop-in 0.18s cubic-bezier(0.25,0.46,0.45,0.94) both; }
@keyframes gpop-in {
  from { opacity: 0; transform: translateY(-6px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.guest-popover-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 10px;
}
.guest-popover-label {
  font-family: 'DM Sans', sans-serif;
  font-size: 8px;
  font-weight: 500;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.35);
}
.gg-input {
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 300;
  color: rgba(255,255,255,0.90);
  background: rgba(255,255,255,0.07);
  border: none;
  border-bottom: 1px solid rgba(255,255,255,0.18);
  border-radius: 6px 6px 0 0;
  padding: 7px 10px;
  outline: none;
  width: 100%;
  box-sizing: border-box;
  transition: border-color 0.15s, background 0.15s;
}
.gg-input::placeholder { color: rgba(255,255,255,0.25); }
.gg-input:focus { border-bottom-color: var(--gold, #c9a96e); background: rgba(255,255,255,0.11); }
/* Guest profile suggestions */
.gg-suggestions {
  margin: 4px 0 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
/* ── Protel auto-suggest chip below guest name fields ── */
.gg-protel-suggest {
  display: inline-block;
  margin: 4px 0 2px;
  font-size: 10px;
  color: var(--gold, #b89b6e);
  cursor: pointer;
  letter-spacing: 0.02em;
  border: 1px solid var(--border, rgba(180,155,115,0.30));
  border-radius: 5px;
  padding: 2px 7px;
  background: var(--gold-pale, rgba(184,155,110,0.10));
  transition: background 0.12s, border-color 0.12s;
}
.gg-protel-suggest:hover { background: rgba(184,155,110,0.20); border-color: var(--gold, #b89b6e); }
/* When it belongs to the guest line, sit it neatly just below the line as a hint. */
.cd-guest-line > .gg-protel-suggest { margin: 9px 0 0; }
.gg-suggestion-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 12px;
  background: rgba(255,255,255,0.06);
  border: none;
  border-radius: 7px;
  cursor: pointer;
  width: 100%;
  text-align: left;
  transition: background 0.12s;
}
.gg-suggestion-item:hover { background: rgba(201,169,110,0.18); }
.gg-sug-name { font-size: 13px; color: rgba(255,255,255,0.85); font-family: 'DM Sans', sans-serif; font-weight: 300; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gg-sug-cat { font-size: 10px; font-family: 'DM Sans', sans-serif; font-weight: 400; letter-spacing: 0.6px; text-transform: uppercase; color: rgba(255,255,255,0.30); flex-shrink: 0; padding: 0 8px; }
.gg-sug-protel { font-size: 10.5px; color: rgba(201,169,110,0.70); letter-spacing: 0.4px; font-family: 'DM Sans', sans-serif; flex-shrink: 0; }
.gg-suggestions-label { font-size: 8px; letter-spacing: 1.5px; text-transform: uppercase; color: rgba(255,255,255,0.25); padding: 0 2px; margin-bottom: 2px; font-family: 'DM Sans', sans-serif; }

.gg-clear-btn {
  font-family: 'DM Sans', sans-serif;
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.30);
  background: none;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 6px;
  cursor: pointer;
  padding: 5px 12px;
  width: 100%;
  margin-top: 4px;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.gg-clear-btn:hover { color: #e07070; border-color: rgba(224,112,112,0.35); background: rgba(224,112,112,0.08); }

/* ═══════════════════════════════════════════════════════════════
   CATEGORY TABS
═══════════════════════════════════════════════════════════════ */
.cat-bar {
  background: var(--tab-bar-bg, #0A0908);
  border-bottom: 1px solid rgba(255,255,255,0.07);
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  overflow: visible;
  position: sticky;
  top: 0;
  z-index: 100;
  animation: catBarIn 0.4s cubic-bezier(0.25,0.46,0.45,0.94) both;
}
.cat-bar-main-row {
  display: flex;
  align-items: center;
  padding: 6px 34px 6px 10px;
  min-height: 0;
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
  position: relative;
}
/* ── Workspace guest sidebar — vertical column right of preview ── */
#ws-sidebar {
  display: none;
  position: fixed;
  right: 0;
  top: 130px;
  bottom: 0;
  width: 64px;
  z-index: 100;
  background: transparent;
  padding: 12px 8px 12px 6px;
  align-items: flex-start;
  pointer-events: none;
}
body.ws-open #ws-sidebar { display: flex; }
.ws-tabs {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 100%;
  pointer-events: all;
}
/* Preview panels step left when sidebar is open */
body.ws-open .preview-panel,
body.ws-open .cat-section.active.split-overlay > .panel:not(.form-col) {
  margin-right: 64px;
}
@keyframes ws-slide-in {
  from { opacity: 0; transform: translateX(14px); }
  to   { opacity: 1; transform: translateX(0); }
}
.ws-tab.ws-tab-new { animation: ws-slide-in 0.22s cubic-bezier(0.25,0.46,0.45,0.94) both; }
@media (max-width: 640px) { #ws-sidebar { display: none !important; } }
.ws-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 48px;
  min-height: 52px;
  padding: 7px 4px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(22,17,12,0.90);
  color: rgba(255,255,255,0.55);
  cursor: pointer;
  font-family: 'DM Sans', sans-serif;
  position: relative;
  box-shadow: 0 2px 14px rgba(0,0,0,0.40), inset 0 1px 0 rgba(255,255,255,0.06);
  /* animation only applied when .ws-tab-new class is present (first appearance) */
  transition: background 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s;
}
.ws-tab:hover {
  background: rgba(32,24,16,0.95);
  border-color: rgba(255,255,255,0.18);
  color: rgba(255,255,255,0.85);
  box-shadow: 0 4px 18px rgba(0,0,0,0.50), inset 0 1px 0 rgba(255,255,255,0.08);
}
.ws-tab.ws-active {
  background: rgba(30,22,14,0.95);
  border-color: rgba(201,169,110,0.45);
  color: rgba(248,242,234,0.95);
  box-shadow: 0 4px 16px rgba(0,0,0,0.45), 0 0 0 1px rgba(201,169,110,0.18), inset 0 1px 0 rgba(255,255,255,0.08);
}
.ws-tab-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(201,169,110,0.16);
  border: 1px solid rgba(201,169,110,0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.8px;
  text-indent: 0.8px;
  color: rgba(201,169,110,0.95);
  font-family: 'Cormorant Garamond', Georgia, serif;
  flex-shrink: 0;
}
.ws-tab-name {
  font-size: 8.5px;
  font-weight: 400;
  max-width: 38px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
  line-height: 1.2;
}
.ws-tab-close {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: rgba(30,20,14,0.90);
  border: 1px solid rgba(255,255,255,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.12s;
  z-index: 1;
}
.ws-tab:hover .ws-tab-close { opacity: 1; }
.ws-tab-add {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 32px;
  border-radius: 10px;
  border: 1px dashed rgba(255,255,255,0.18);
  background: rgba(22,17,12,0.75);
  color: rgba(255,255,255,0.32);
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  font-family: 'DM Sans', sans-serif;
  transition: background 0.14s, border-color 0.14s, color 0.14s;
}
.ws-tab-add:hover { background: rgba(255,255,255,0.09); border-color: rgba(255,255,255,0.32); color: rgba(255,255,255,0.75); }
/* ── Add-workspace button — right of guest card ── */
.ws-add-tab-btn {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  border-radius: 5px;
  border: 1px solid rgba(255,255,255,0.12);
  background: transparent;
  color: rgba(255,255,255,0.30);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'DM Sans', sans-serif;
  transition: background 0.13s, color 0.13s, border-color 0.13s;
  z-index: 2;
}
.ws-add-tab-btn:hover { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.75); border-color: rgba(255,255,255,0.22); }
@media (max-width: 640px) { .ws-add-tab-btn { display: none; } }
/* ── Tab bar guest card — absolutely positioned so tabs never shift ── */
.tab-guest-card {
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 10px;
  width: 180px;
  cursor: pointer;
  padding: 6px 11px 6px 7px;
  border-radius: 10px;
  border: none;
  /* Merged into the bar — no floating-chip surface; a divider joins it to the tabs. */
  background: transparent;
  transition: background 0.18s;
  z-index: 2;
}
.tab-guest-card::after {
  content: "";
  position: absolute;
  right: -9px;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 28px;
  background: rgba(255,255,255,0.13);
}
.tab-guest-card:hover { background: rgba(255,255,255,0.06); }
.tab-guest-card.open { background: rgba(180,155,115,0.10); }
.tab-guest-avatar { display: none; }
.tab-guest-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.tab-guest-name {
  font-family: 'Cormorant Garamond', serif; font-size: 18px; font-weight: 500;
  color: rgba(248,242,234,0.95); white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; max-width: 152px; letter-spacing: 0.2px; line-height: 1.1;
}
.tab-guest-sub {
  font-family: 'DM Sans', sans-serif; font-size: 11px; font-weight: 300;
  color: rgba(180,155,115,0.72); white-space: nowrap; letter-spacing: 0.3px;
}
.tab-guest-chevron { color: rgba(212,168,83,0.65); flex-shrink: 0; margin-left: auto; transition: transform 0.18s; }
.tab-guest-card.open .tab-guest-chevron { transform: rotate(180deg); color: rgba(212,168,83,0.95); }
.tab-guest-card.no-guest {
  border: none;
}
.tab-guest-card.no-guest .tab-guest-avatar {
  background: rgba(155,125,85,0.22);
  border: 1.5px solid rgba(180,155,115,0.35);
}
.tab-guest-card.no-guest .tab-guest-name {
  color: rgba(248,242,234,0.50);
  font-style: italic;
}
.tab-guest-card.no-guest .tab-guest-sub {
  color: rgba(212,168,83,0.70);
  letter-spacing: 0.5px;
}
@media (max-width: 640px) { .tab-guest-card { display: none !important; } .cat-tabs-group { padding-left: 0 !important; padding-right: 0 !important; } }
/* Tab golden chevron */
.tab-arrow {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  color: rgba(212,168,83,0.40);
  pointer-events: auto;
  cursor: pointer;
  padding: 4px 2px 4px 4px;
  margin: -4px -2px -4px -4px;
  border-radius: 4px;
  transition: color 0.18s, background 0.15s;
}
.tab-arrow:hover { color: rgba(212,168,83,1) !important; background: rgba(212,168,83,0.12); }
.tab-arrow svg { display: block; transition: transform 0.22s cubic-bezier(0.25,0.46,0.45,0.94); }
.cat-tab.active .tab-arrow { color: rgba(212,168,83,0.85); }
.cat-tab:hover .tab-arrow { color: rgba(212,168,83,0.65); }
/* Rotate chevron up when dropdown is open */
.cat-tab.tcd-open .tab-arrow svg,
.cat-tab.menu-open .tab-arrow svg { transform: rotate(180deg); }
/* Status dot hidden — chevron replaces it as the interactive affordance */
.cat-tab .status-dot { display: none !important; }

/* Transfer type buttons moved into tab dropdown — hide from tab bar */
#ctx-transfers { display: none !important; }
/* Quick fill panel hidden — transfer type set via tab dropdown */
#tf-quick-panel { display: none !important; }

/* ── Tab Combo Dropdown ── */
#tab-combo-dropdown {
  position: fixed;
  z-index: 9500;
  min-width: 200px;
  /* Liquid glass: charcoal base + strong blur + brightened for daylight */
  background: var(--tab-bar-bg, rgb(52,52,52));
  background: color-mix(in srgb, var(--tab-bar-bg, rgb(52,52,52)) 82%, transparent);
  backdrop-filter: blur(36px) saturate(1.4) brightness(1.22);
  -webkit-backdrop-filter: blur(36px) saturate(1.4) brightness(1.22);
  border: 1px solid rgba(212,168,83,0.20);
  border-top: 1px solid rgba(212,168,83,0.36);
  border-radius: 0 0 12px 12px;
  padding: 8px 0 10px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.55), 0 4px 16px rgba(0,0,0,0.28), inset 0 1px 0 rgba(212,168,83,0.14);
  visibility: hidden;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
  pointer-events: none;
}
#tab-combo-dropdown.open {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0s;
}
.tcd-section-label {
  font-family: 'DM Sans', sans-serif;
  font-size: 9px;
  font-weight: 300;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.35);
  padding: 12px 16px 5px;
}
.tcd-item {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 11px 16px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: 'DM Sans', sans-serif;
  font-size: 15px;
  font-weight: 300;
  letter-spacing: 0.2px;
  color: rgba(255,255,255,0.82);
  text-align: left;
  transition: background 0.12s, color 0.12s;
}
.tcd-item:hover { background: rgba(255,255,255,0.08); color: rgba(255,255,255,1); }
.tcd-item.active { color: rgba(212,168,83,1); }
.tcd-item-check {
  width: 14px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(212,168,83,0.85);
}
.tcd-item:not(.active) .tcd-item-check { visibility: hidden; }
.tcd-item-icon {
  width: 16px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  color: rgba(212,168,83,0.50);
  filter: drop-shadow(0 0 3px rgba(212,168,83,0.30));
  transition: color 0.14s, filter 0.14s;
}
.tcd-item:hover .tcd-item-icon { color: rgba(212,168,83,0.90); filter: drop-shadow(0 0 6px rgba(212,168,83,0.65)); }
.tcd-item.active .tcd-item-icon { color: rgba(212,168,83,1); filter: drop-shadow(0 0 8px rgba(212,168,83,0.80)); }
/* ───────────────────────────────────────────────── */
.cat-bar-mode-row {
  position: absolute;
  top: 44px;
  left: 0;
  width: max-content;
  min-width: 240px;
  display: flex;
  align-items: stretch;
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: max-height 0.24s cubic-bezier(0.25,0.46,0.45,0.94),
              opacity 0.2s ease,
              transform 0.2s ease;
  will-change: opacity, transform;
  background: var(--tab-bar-bg, #0F0E0C);
  background: color-mix(in srgb, var(--tab-bar-bg, #0F0E0C) 85%, transparent);
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  border: 1px solid rgba(255,255,255,0.06);
  border-top: none;
  border-radius: 0 0 10px 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.22);
  z-index: 110;
}
.cat-bar-mode-row.open {
  max-height: 220px;
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.cat-bar-mode-row .mode-sub-bar {
  flex: 1;
  padding: 8px 0 12px;
  background: transparent;
}
.cat-bar-ctx {
  display: flex;
  align-items: stretch;
  flex: 1;
  margin-left: 0;
}
.ctx-pane {
  display: none;
  flex: 1;
  align-items: stretch;
  justify-content: center;
  gap: 0;
}
.ctx-pane.active { display: flex; }
.ctx-type-btn {
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 300;
  letter-spacing: 0.5px;
  text-transform: none;
  color: rgba(255,255,255,0.55);
  background: none;
  border: none;
  border-bottom: 1.5px solid transparent;
  padding: 6px 14px;
  border-radius: 20px;
  cursor: pointer;
  white-space: nowrap;
  display: flex;
  align-items: center;
  position: relative;
  transition: color 0.2s;
  -webkit-tap-highlight-color: transparent;
}
.ctx-type-btn::after { display: none; }
.ctx-type-btn:hover { color: rgba(255,255,255,0.82); background: none; }
.ctx-type-btn.active {
  color: #E8CC80;
  background: none;
  box-shadow: none;
}
/* Sticky type chip inside the transfer form body */
.tf-sticky-type {
  display: none;
  position: sticky;
  top: 0;
  z-index: 5;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  margin: -12px -12px 10px;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: #E8CC80;
  background: rgba(212,168,83,0.13);
  border-bottom: none;
  cursor: pointer;
  backdrop-filter: blur(10px) saturate(1.3);
  -webkit-backdrop-filter: blur(10px) saturate(1.3);
  animation: chipFadeIn 0.18s ease both;
}
/* The dissolve. This bar is the one place in the desk where content really
   does pass underneath something — the panel body scrolls under it — and it
   used to end on a 1px hairline, so the form visibly terminated at a line.

   iOS ramps the blur out instead: strongest at the bar's edge, gone a few
   pixels below it, so content fades under rather than being cut off. In CSS
   that is a backdrop-filter on a strip below the bar with a gradient mask,
   which is the same graduated-blur idea the Flutter library implements with
   a two-pass separable gaussian — here the compositor does it for free.

   Under prefers-contrast: more the tier above drops every backdrop-filter,
   including this one; the strip has no background of its own, so it simply
   stops existing rather than leaving a smear. */
.tf-sticky-type::after {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 100%;
  height: 14px;
  pointer-events: none;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, transparent 100%);
}
.tf-sticky-type.visible {
  display: flex;
}
@keyframes chipFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
html.dark-mode .tf-sticky-type {
  background: rgba(212,168,83,0.10);
}
.ctx-itin-btn {
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  font-weight: 300;
  letter-spacing: 0.3px;
  text-transform: none;
  color: rgba(255,255,255,0.50);
  background: none;
  border: none;
  padding: 6px 13px;
  border-radius: 9px;
  cursor: pointer;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 6px;
  position: relative;
  transition: color 0.18s ease, background 0.18s ease;
  -webkit-tap-highlight-color: transparent;
}
.ctx-itin-btn::after { display: none; }
.ctx-itin-btn:hover { color: rgba(255,255,255,0.78); background: rgba(255,255,255,0.05); }
.ctx-itin-btn:active { opacity: 0.85; }
.ctx-itin-btn.iq-active { color: #E8CC80; background: rgba(201,169,110,0.14); }

/* ── Itinerary context: full row vs compact "+ Add" ── */
.ctx-itin-full-row { display: flex; align-items: stretch; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; -ms-overflow-style: none; }
.ctx-itin-full-row::-webkit-scrollbar { display: none; }
.ctx-itin-compact  { display: none; align-items: center; padding: 0 10px; position: relative; }

/* Compact toggle button */
.ctx-itin-add-btn {
  font-family: 'DM Sans', sans-serif;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.72);
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 4px;
  padding: 5px 12px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
}
.ctx-itin-add-btn:hover { background: rgba(255,255,255,0.13); color: rgba(255,255,255,0.92); }

/* Dropdown popover */
.ctx-itin-add-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  background: #1e1c1b;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.45);
  z-index: 1200;
  min-width: 140px;
  padding: 4px 0;
  animation: itinMenuIn 0.12s ease both;
}
@keyframes itinMenuIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.ctx-itin-add-menu button {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  font-family: 'DM Sans', sans-serif;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.68);
  padding: 9px 16px;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.ctx-itin-add-menu button:hover { background: rgba(255,255,255,0.07); color: rgba(255,255,255,0.92); }

/* Itinerary add row: always a scrollable sub-bar, never a dropdown */
#ctx-itinerary .ctx-itin-full-row {
  display: flex !important;
  overflow-x: auto;
  flex-wrap: nowrap;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 0 2px;
}
/* Full-screen (wide): itinerary sub-tab shows TEXT labels, no icons. */
.ctx-itin-btn svg, .ctx-type-btn svg { display: none; }
.ctx-itin-btn .ctx-btn-label,
.ctx-type-btn .ctx-btn-label { display: inline; font-size: inherit; }
/* Split / narrower window (641px–1180px): itinerary sub-tab collapses to
   ICON-ONLY so the main tabs stay visible; tooltips (title=) convey each. */
@media (min-width: 641px) and (max-width: 1180px) {
  /* Main tabs: slightly tighter so all four fit comfortably beside the guest card */
  .cat-tab { padding: 8px 14px; font-size: 15.5px; letter-spacing: 0.2px; }
  /* Itinerary sub-tab: icons only, as a neat cluster */
  #ctx-itinerary .ctx-itin-btn svg { display: block; flex-shrink: 0; opacity: 0.7; }
  #ctx-itinerary .ctx-itin-btn .ctx-btn-label { display: none; }
  #ctx-itinerary .ctx-itin-btn { padding: 6px 8px; gap: 0; }
  #ctx-itinerary .ctx-itin-btn:hover svg { opacity: 1; }
  #ctx-itinerary .ctx-itin-full-row { gap: 1px; margin-left: 4px; }
  /* Transfers type bar keeps its label, with the icon to the right */
  .ctx-type-btn svg { display: block; flex-shrink: 0; opacity: 0.65; }
  .ctx-type-btn { flex-direction: row-reverse; gap: 7px; padding: 6px 16px; }
  /* Slightly smaller guest card to free space for tabs */
  .tab-guest-card { width: 200px; }
  .cat-tabs-group { padding-left: 204px; }
}
#ctx-itinerary .ctx-itin-full-row::-webkit-scrollbar { display: none; }
#ctx-itinerary .ctx-itin-compact { display: none !important; }

/* Switch to compact below 780px — transfer type bar stays visible as scrollable row */
@media (max-width: 780px) {
  .ctx-itin-full-row { display: none; }
  .ctx-itin-compact  { display: flex; }
  /* Transfer type bar: scrollable pill row instead of dropdown */
  #ctx-transfers .ctx-itin-full-row {
    display: flex;
    overflow-x: auto;
    white-space: nowrap;
    scrollbar-width: none;
    -ms-overflow-style: none;
    flex-wrap: nowrap;
    padding: 0 4px;
  }
  #ctx-transfers .ctx-itin-full-row::-webkit-scrollbar { display: none; }
  #ctx-transfers .ctx-itin-compact { display: none; }
}
/* On phone portrait: replace scrollable row with the dropdown */
@media (max-width: 540px) {
  #ctx-transfers .ctx-itin-full-row { display: none !important; }
  #ctx-transfers .ctx-itin-compact  { display: flex !important; }
  /* Card title becomes a tap target to open the type switcher */
  #tf-journey-title { cursor: pointer; }
  #tf-journey-title::after { content: ' ▾'; font-size: 9px; opacity: .5; }
}
/* Matches the itinerary sub-nav (.ctx-itin-btn) so the whole contextual zone
   speaks one language: light, title-case, same hover pill. */
.ctx-type-select {
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  font-weight: 300;
  letter-spacing: 0.3px;
  text-transform: none;
  color: rgba(255,255,255,0.50);
  background: none;
  border: none;
  padding: 6px 13px;
  border-radius: 9px;
  cursor: pointer;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  white-space: nowrap;
  transition: color 0.18s ease, background 0.18s ease;
}
.ctx-type-select:hover, .ctx-type-select:focus { color: rgba(255,255,255,0.78); background: rgba(255,255,255,0.05); }
.ctx-type-select option { background: #2a2a2a; color: #fff; }

#itin-add-wrap { display: none !important; }
.cat-tab {
  flex: 0 0 auto;
  position: relative;
  justify-content: center;
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'DM Sans', sans-serif;
  font-size: 17px;
  font-weight: 300;
  letter-spacing: 0.3px;
  text-transform: none;
  color: var(--tab-bar-text-dim, rgba(255,255,255,0.5));
  text-shadow: none;
  background: none;
  border: none;
  border-bottom: none;
  padding: 8px 26px;
  border-radius: 6px;
  transition: color 0.18s ease, background 0.18s ease;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.cat-tab::after { display: none; }
.cat-tab:hover:not(.active) { color: rgba(255,255,255,0.75); background: none; }

/* ── Sliding active-tab indicator (sits at very bottom of .cat-bar) ── */
.cat-tabs-group { position: relative; }
.cat-bar { position: sticky; }
.cat-tab-indicator {
  display: none;
}
/* Tab icons — hidden on desktop, shown on mobile bottom nav */
.tab-icon { display: none; flex-shrink: 0; }
/* Chevron affordance on active/hovered tab — replaced by .tab-arrow span */
.tab-chevron-active::before {
  display: none;
  content: '';
  position: absolute;
  bottom: 5px;
  left: 50%;
  margin-left: -4px;
  width: 7px;
  height: 7px;
  border-right: 1.5px solid rgba(212,168,83,0.70);
  border-bottom: 1.5px solid rgba(212,168,83,0.70);
  transform: rotate(45deg);
  transition: transform 0.2s ease, border-color 0.2s ease;
  pointer-events: none;
}
.cat-bar.dropdown-open .tab-chevron-active::before {
  transform: rotate(-135deg) translateY(2px);
  border-color: rgba(212,168,83,0.95);
}
/* Stagger category tabs on initial load */
.cat-tab:nth-child(1) { animation: catTabIn 0.32s cubic-bezier(0.25,0.46,0.45,0.94) 0.08s both; }
.cat-tab:nth-child(2) { animation: catTabIn 0.32s cubic-bezier(0.25,0.46,0.45,0.94) 0.14s both; }
.cat-tab:nth-child(3) { animation: catTabIn 0.32s cubic-bezier(0.25,0.46,0.45,0.94) 0.20s both; }
.cat-tab:nth-child(4) { animation: catTabIn 0.32s cubic-bezier(0.25,0.46,0.45,0.94) 0.26s both; }
.cat-tab:nth-child(5) { animation: catTabIn 0.32s cubic-bezier(0.25,0.46,0.45,0.94) 0.32s both; }
.cat-tab:nth-child(6) { animation: catTabIn 0.32s cubic-bezier(0.25,0.46,0.45,0.94) 0.38s both; }
.cat-tab .status-dot {
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: transparent;
  transition: background 0.3s ease, box-shadow 0.3s ease;
  margin-left: 2px;
}
.cat-tab.has-data .status-dot {
  background: var(--gold);
  box-shadow: 0 0 6px rgba(143,109,85,0.35);
}
.cat-tab:not(.has-data) .status-dot {
  display: none;
}
.cat-tab { color: var(--tab-bar-text-dim, rgba(255,255,255,0.5)); text-shadow: none; }
.cat-tab:hover { color: var(--tab-bar-text, rgba(255,255,255,0.75)); }
.cat-tab.active {
  color: #E8CC80;
  text-shadow: none;
  background: none;
  box-shadow: none;
  border-bottom: 2px solid rgba(212,168,83,0.7);
}
.cat-tab[data-category="itinerary"].active::after  { background: var(--tab-accent-itinerary,  var(--tab-active-border, #D4A853)); }

/* Compact icon-only tab bar for narrow/split-window scenarios */
@media (max-width: 900px) {
  .cat-tab { padding: 10px 14px; gap: 0; }
  .cat-tabs-group { padding-left: 215px; padding-right: 12px; }
  .tab-icon { display: flex !important; }
  .tab-label { display: none; }
  .tab-arrow { display: none; }
  .cat-tab:hover { color: var(--tab-bar-text, rgba(255,255,255,0.75)); }
  .cat-tab.active {
    border-bottom-width: 3px;
  }
  /* Itinerary sub-tabs: icon-only on narrow screens */
  .ctx-itin-btn svg, .ctx-type-btn svg { display: flex !important; opacity: 0.7; }
  .ctx-itin-btn .ctx-btn-label, .ctx-type-btn .ctx-btn-label { display: none !important; }
  .ctx-itin-btn, .ctx-type-btn { padding: 10px 12px; gap: 0; }
}

@media (max-width: 600px) {
  .cat-tab { padding: 10px 10px; }
  .tab-icon { width: 18px !important; height: 18px !important; }
  .ws-add-tab-btn { padding: 8px 8px; font-size: 18px; }
  .cat-tabs-group { padding-left: 210px; padding-right: 8px; }
  .ctx-itin-btn, .ctx-type-btn { padding: 10px 8px; }
  .ctx-itin-btn svg, .ctx-type-btn svg { width: 16px !important; height: 16px !important; }
}

/* ── Custom checkboxes & radio buttons ──────────────────────────────────
   Fully replaces native appearance with a brand-consistent design:
   unchecked = white/translucent with neutral border
   checked   = gold fill, white tick (checkbox) / white inner dot (radio)
   ─────────────────────────────────────────────────────────────────── */
input[type="checkbox"],
input[type="radio"] {
  -webkit-appearance: none;
  appearance: none;
  display: inline-block;
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  border: 1.5px solid var(--border);
  background: rgba(255,255,255,0.72);
  cursor: pointer;
  vertical-align: middle;
  position: relative;
  margin: 0;
  transition: border-color 0.14s, background 0.14s, box-shadow 0.14s;
}
input[type="radio"]    { border-radius: 50%; }
input[type="checkbox"] { border-radius: 2px; }

/* Checked states */
input[type="checkbox"]:checked {
  background: #8A8886;
  border-color: #8A8886;
}
input[type="checkbox"]:checked::after {
  content: '';
  display: block;
  position: absolute;
  left: 4px;
  top: 1px;
  width: 5px;
  height: 8px;
  border-right: 1.5px solid #fff;
  border-bottom: 1.5px solid #fff;
  transform: rotate(42deg);
}
input[type="radio"]:checked {
  background: #8A8886;
  border-color: #8A8886;
  box-shadow: inset 0 0 0 4px #fff;
}

/* Hover */
input[type="checkbox"]:not(:checked):hover,
input[type="radio"]:not(:checked):hover {
  border-color: var(--gold-mid);
  background: rgba(255,255,255,0.92);
}

/* Focus ring */
input[type="checkbox"]:focus-visible,
input[type="radio"]:focus-visible {
  outline: 1.5px solid var(--gold);
  outline-offset: 2px;
}

/* Option label — wraps a single checkbox/radio + text */
.opt-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.2px;
  cursor: pointer;
  color: var(--text);
  user-select: none;
  white-space: nowrap;
}
.opt-label input {
  flex-shrink: 0;
}

/* ── P2P From/To "Preset" chip — subtle toggle that blends into the card ── */
.p2p-preset-toggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 8px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--muted);
  cursor: pointer;
  user-select: none;
  padding: 3px 9px 3px 7px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: transparent;
  transition: color .18s ease, border-color .18s ease, background .18s ease;
  white-space: nowrap;
}
.p2p-preset-toggle input { position: absolute; opacity: 0; pointer-events: none; width: 0; height: 0; margin: 0; }
.p2p-preset-toggle::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: .35;
  transition: opacity .18s ease, transform .18s ease;
}
.p2p-preset-toggle:hover { color: var(--gold-mid); border-color: var(--gold-border); }
.p2p-preset-toggle:has(input:checked) {
  color: var(--gold);
  border-color: var(--gold-border);
  background: var(--gold-pale);
}
.p2p-preset-toggle:has(input:checked)::before { opacity: 1; transform: scale(1.1); }

/* ── iOS-style pill toggle for all .opt-label checkboxes ─────────── */
.opt-label input[type="checkbox"] {
  width: 34px;
  height: 20px;
  border-radius: 10px;
  background: rgba(155,145,135,0.55);
  border: none;
  box-shadow: none;
  transition: background 0.22s ease;
  vertical-align: middle;
}
.opt-label input[type="checkbox"]::after {
  content: '';
  display: block;
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  top: 2px;
  left: 2px;
  transform: translateX(0);
  transition: transform 0.2s ease;
  box-shadow: 0 1px 4px rgba(0,0,0,0.35);
  border: none;
}
.opt-label input[type="checkbox"]:checked {
  background: var(--gold);
  border-color: transparent;
}
.opt-label input[type="checkbox"]:checked::after {
  transform: translateX(14px);
  border: none;
}
.opt-label input[type="checkbox"]:not(:checked):hover {
  background: rgba(143,109,85,0.28);
  border-color: transparent;
}
.opt-label input[type="checkbox"]:focus-visible {
  outline: 1.5px solid var(--gold);
  outline-offset: 2px;
}

/* Compact option chips (outline + check): a whole option in one pill that turns
   gold with a checkmark when on. Replaces label + toggle + "Yes" on option rows. */
/* Chips share the full block width (grow to fill), with a fluid gap. They size to
   their label and wrap to the next line rather than ever truncating — the same
   readable behaviour on every tab and at every width. */
.opt-chip-row { display: flex; flex-wrap: wrap; gap: clamp(6px, 1.1vw, 16px); align-items: center; }
/* Capsules, filled rather than outlined. An outlined pill is a Material
   chip; iOS fills them from systemFill and reserves the outline for nothing
   at all — selection is shown by tinting the fill with the accent, not by
   drawing a ring. The border stays in the box at transparent so the capsule
   keeps its exact size through every state and forced-colour modes still
   have an edge to paint. */
.opt-chip {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  flex: 1 1 auto; min-width: max-content; overflow: visible;
  padding: 7px 14px; border-radius: 999px;
  border: 1px solid transparent;
  background: var(--chip-fill, rgba(60,50,40,0.055));
  /* Primary label ink, not the secondary --muted this used when it was a bare
     outline on the card. A fill lifts the ground under the text, so keeping
     the lighter ink took the capsule from 5.0:1 to 4.3:1 — under AA. iOS uses
     the primary label colour on a filled capsule for the same reason. */
  color: var(--chip-ink, var(--text));
  font-family: inherit; font-size: 12.5px; letter-spacing: 0.3px; font-weight: 400;
  cursor: pointer; user-select: none; white-space: nowrap;
  transition: background-color .15s ease, color .15s ease, transform .1s ease;
  -webkit-tap-highlight-color: transparent;
}
.opt-chip > span { overflow: visible; }
@media (max-width: 640px) {
  .opt-chip { flex: 0 1 auto; }
}
.opt-chip:hover { background: var(--chip-fill-hover, rgba(60,50,40,0.095)); }
/* Pressed. Filling these capsules made them read as tappable; without an
   :active they looked more pressable than before and answered less. The
   scale matches what the rest of the desk's controls already use, and
   .r-qa-chip beside them has had it all along. */
.opt-chip:active { transform: scale(0.96); }
@media (prefers-reduced-motion: reduce) {
  .opt-chip:active, .r-qa-chip:active { transform: none; background: var(--chip-fill-on, rgba(184,147,79,0.15)); }
}
.opt-chip input { position: absolute; opacity: 0; width: 0; height: 0; margin: 0; pointer-events: none; }
.opt-chip .opt-chip-check { width: 13px; height: 13px; flex-shrink: 0; display: none; }
.opt-chip:has(input:checked) { color: var(--chip-ink-on, #74553F); background: var(--chip-fill-on, rgba(184,147,79,0.15)); }
.opt-chip:has(input:checked) .opt-chip-check { display: inline-flex; }
/* Fallback for engines without :has — a checked class toggled in JS (belt & braces). */
.opt-chip.is-on { color: var(--chip-ink-on, #74553F); background: var(--chip-fill-on, rgba(184,147,79,0.15)); }
.opt-chip.is-on .opt-chip-check { display: inline-flex; }
/* compact variant — for secondary, in-line choices like the cancellation Wording toggle.
   flex:0 0 auto so it hugs its own text instead of stretching to fill the row (the
   default .opt-chip flex-grow is meant for a full row of options, not a lone pair). */
.opt-chip-sm { flex: 0 0 auto; padding: 4px 10px; font-size: 11px; gap: 4px; }
.opt-chip-sm .opt-chip-check { width: 10px; height: 10px; }

/* ═══════════════════════════════════════════════════════════════
   LAYOUT — main grid  ·  INERT, and must stay that way
   This banner had lost its opening delimiter, so the parser met a bare
   comment-close at top level, took it together with `main` as one selector,
   and dropped the rule below along with it. The main element has been
   unstyled — and unpainted — for as long as that has been true.

   Repairing the banner switched the rule back on, and that broke the desk on
   phones: measured at 390px wide, main went from 390x844 to 0x844 and took
   .cat-section.active and .panel.form-col to zero width with it, so the whole
   workspace vanished. Every layout built since the rule died was tuned
   against main being a plain block, and .cat-section.active's
   `grid-column: 1 / -1` has been inert for just as long. So the rule stays
   off. It is kept here, inside the comment, as the record of what the grid
   was once meant to be — re-enabling it means re-doing the mobile layout,
   not flipping a switch.

   main {
     max-width: 100%;
     margin: 0 auto;
     padding: 0;
     display: grid;
     grid-template-columns: 1fr;
     gap: 0;
     align-items: start;
     background: var(--bg);
   }
═══════════════════════════════════════════════════════════════ */

/* ── Form and preview columns (default desktop) ────────────────────── */
.form-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-right: 14px;
  border-right: 1px solid var(--border);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Unified panel background — same across all tabs */
#cat-transfers .form-col,
#cat-restaurants .form-col,
#cat-massages .form-col,
#cat-tours .form-col,
#cat-itinerary .form-col,
#cat-tools {
  /* The ground the cards sit on. iOS pairs systemGroupedBackground with a
     lighter secondarySystemGroupedBackground for the cards themselves, and
     the step between the two is what lets a grouped-inset card read without
     an outline round it. This is that step — kept warm, and kept to the
     workspace column so --panel-bg is unchanged everywhere else. */
  background: var(--grouped-bg, var(--panel-bg));
}

.preview-col {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-left: 16px;
  position: sticky;
  top: 56px;
  align-self: start;
  max-height: calc(100vh - 56px);
  overflow-y: auto;
}

/* ── Narrow split-screen responsive (Outlook side-by-side) ────────── */
@media (max-width: 1200px) {
  main {
    padding: 10px 18px 60px;
  }
  .form-col {
    gap: 10px;
    padding-right: 10px;
  }
  .preview-col {
    gap: 14px;
    padding-left: 10px;
    top: 20px;
  }
  .app-header { padding: 0 16px; }
  .header-main-row { min-height: 56px; }
  .header-field { min-width: 0; }
  .header-action-btn { padding: 8px 12px; font-size: 11px; }
  /* Tab bar: compact guest card + scrollable tabs so nothing clips */
  .cat-bar-main-row { padding: 0 8px; overflow: visible; }
  .cat-bar-mode-row .mode-sub-bar { padding: 0 8px; }
  /* Shrink guest card to icon + name only, reduce its reserved width */
  .tab-guest-card { width: 150px; left: 10px; padding: 5px 8px 5px 6px; gap: 7px; }
  .tab-guest-sub { display: none; }
  .ws-add-tab-btn { display: none; }
  /* Tabs group: use remaining space, scroll if still too many */
  .cat-tabs-group { padding-left: 165px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -ms-overflow-style: none; }
  .cat-tabs-group::-webkit-scrollbar { display: none; }
  .cat-tab { padding: 7px 14px; font-size: 12px; letter-spacing: 0.2px; white-space: nowrap; }
  .panel-header { padding: 8px 16px 7px; }
  .panel-title { font-size: 7.5px; }
  .panel-body { padding: 16px 16px 120px; }
  .field { margin-bottom: 10px; }
  .field label { font-size: 10px; }
  .field input, .field textarea { font-size: 13px; padding: 8px 10px; }
  .field select { font-size: 13px; padding: 8px 34px 8px 10px; }
  .field-row { gap: 10px; }
  .field-row .field { margin-bottom: 0; }
  .panel-badge { font-size: 10px; padding: 4px 8px; }
  .tf-grid-2 { grid-template-columns: 1fr 1fr; }
  /* Calendar preview: hide mini-month at split-screen width, show today's agenda only */
  .cal-left { display: none !important; }
  .cal-right { flex: 1; border-left: none; }
  .cal-agenda-date { font-size: 18px; padding: 16px 20px 12px; }
}


/* ── Guest List toolbar buttons ─────────────────────────────── */
/* ── Cuisine pills ───────────────────────────────────────────── */
.cuisine-pill {
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-family: 'DM Sans', sans-serif;
  color: var(--muted);
  background: none;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 4px 10px;
  cursor: pointer;
  white-space: nowrap;
  transition: all .15s ease;
  line-height: 1;
}
.cuisine-pill.active {
  color: var(--white);
  background: var(--gold);
  border-color: var(--gold);
}
/* ── Recommendations panel – redesigned ─────────────────────── */
.rec-toolbar-btn {
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--muted);
  background: none;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 5px 12px;
  cursor: pointer;
  font-family: 'DM Sans', sans-serif;
  transition: all .18s ease;
  white-space: nowrap;
  line-height: 1;
}
.rec-toolbar-btn:hover {
  color: var(--gold);
  border-color: var(--gold);
  background: none;
}
.rec-toolbar-btn.rec-btn-primary {
  color: var(--white);
  background: var(--gold);
  border-color: var(--gold);
  border-radius: 999px;
  padding: 6px 16px;
  font-weight: 600;
  letter-spacing: 1.4px;
}
.rec-toolbar-btn.rec-btn-primary:hover {
  background: #7A5D49;
  border-color: #7A5D49;
}
.rec-toolbar-btn.rec-btn-gold {
  color: var(--gold);
  border-color: var(--gold);
  background: var(--gold-pale);
}
.rec-toolbar-btn.rec-btn-gold:hover {
  background: var(--gold);
  color: var(--white);
}
.rec-toolbar-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}
.rec-toolbar {
  display: flex;
  gap: 2px;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 8px;
}

/* ── Restaurant card grid ───────────────────────────────────── */
.rec-card {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0;
  background: var(--panel-bg);
  cursor: pointer;
  transition: box-shadow 0.18s, border-color 0.18s, transform 0.12s;
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
  overflow: hidden;
}
.rec-card::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: transparent;
  transition: background 0.18s;
  border-radius: 8px 0 0 8px;
}
.rec-card:hover {
  border-color: var(--gold-mid);
  box-shadow: 0 2px 12px rgba(143,109,85,0.10);
  transform: translateY(-1px);
}
.rec-card.is-selected {
  background: var(--gold-pale);
  border-color: var(--gold);
  box-shadow: 0 2px 16px rgba(143,109,85,0.14);
}
.rec-card.is-selected::before {
  background: var(--gold);
}
.rec-card-inner {
  padding: 11px 12px 11px 13px;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 9px;
  flex: 1;
}
.rec-card-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}
.rec-card-check {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin-top: 1px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  border-radius: 5px;
  border: 1.5px solid rgba(143,109,85,0.38);
  background: transparent;
  position: relative;
  transition: border-color 0.15s, background 0.15s;
}
.rec-card-check:hover { border-color: rgba(201,169,110,0.70); }
.rec-card-check:checked {
  background: var(--gold, #C9A96E);
  border-color: var(--gold, #C9A96E);
}
.rec-card-check:checked::after {
  content: '';
  position: absolute;
  left: 4px;
  top: 1px;
  width: 5px;
  height: 9px;
  border: 1.75px solid #fff;
  border-top: none;
  border-left: none;
  transform: rotate(45deg);
}
/* Cuisine — a refined gold eyebrow above the name (no pill) */
.rec-card-cuisine {
  font-size: 8px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--gold-mid);
  font-weight: 500;
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.rec-card-name {
  font-weight: 400;
  color: var(--charcoal);
  font-size: 13px;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.rec-card-desc {
  font-size: 10.5px;
  color: var(--muted);
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 1px;
}
.rec-card-addr {
  font-size: 9.5px;
  color: var(--muted);
  opacity: 0.85;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 2px;
}
html.dark-mode .rec-card-addr,
html.dark-mode .rec-card-addr a {
  color: var(--text);
  opacity: 0.7;
}
.rec-card-actions {
  position: absolute;
  right: 6px;
  bottom: 5px;
  display: flex;
  align-items: center;
  gap: 1px;
  flex-shrink: 0;
  padding: 1px;
  border-radius: 6px;
  background: var(--panel-bg);
  box-shadow: 0 1px 6px rgba(0,0,0,0.10);
  opacity: 0;
  transform: translateY(2px);
  transition: opacity 0.15s, transform 0.15s;
  pointer-events: none;
}
.rec-card:hover .rec-card-actions {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.rec-card.is-selected .rec-card-actions { background: var(--gold-pale); }
.rec-card-action {
  background: none;
  border: none;
  cursor: pointer;
  padding: 3px;
  opacity: 0.55;
  transition: opacity 0.15s, color 0.15s, background 0.15s;
  color: var(--muted);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 4px;
}
.rec-card-action:hover { opacity: 1 !important; background: var(--gold-pale); color: var(--gold); }
.rec-card-fav {
  flex-shrink: 0;
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  opacity: 0.3;
  transition: opacity 0.15s, color 0.15s;
  border-radius: 4px;
}
.rec-card:hover .rec-card-fav { opacity: 0.6; }
.rec-card-fav:hover,
.rec-card-fav.is-fav { opacity: 1 !important; color: var(--gold); }
.rec-card-drag {
  flex-shrink: 0;
  color: var(--muted);
  font-size: 12px;
  cursor: grab;
  padding: 2px 3px;
  user-select: none;
  line-height: 1;
  opacity: 0.45;
  transition: opacity 0.15s;
  border-radius: 3px;
}
.rec-card-drag:hover { opacity: 0.85 !important; }

/* Desktop: show both rows as a single merged bar */
@media (min-width: 641px) {
  #rec-search-bar-wrap { display: flex; align-items: center; }
  #rec-search-bar-wrap > div:first-child { flex: 1; border-bottom: none !important; }
  #rec-search-bar-wrap > div:first-child input { flex: 1; }
  #rec-search-bar-wrap > div:first-child #rec-sb-clear-btn { display: none; }
  #rec-filter-row2 { flex-shrink: 0; border-left: 1px solid var(--border); }
  #rec-filter-row2 select { padding: 9px 10px; }
  /* Add clear ✕ after sort on desktop via the already-present button */
}

@media (max-width: 640px) {
  /* Row 2 (cuisine + sort) always visible below search */
  #rec-filter-row2 { border-top: none; }
  #rec-filter-row2 select { font-size: 11px; padding: 9px 10px; }

  /* Selection toolbar: buttons wrap, count+undo+add stay right */
  #rec-sel-toolbar { flex-wrap: wrap; gap: 5px; }
  #rec-sel-toolbar .rec-toolbar-btn { padding: 7px 12px; font-size: 8.5px; }
  #rec-sel-toolbar .rec-tb-spacer { display: none; }
  #rec-sel-toolbar #rec-result-count { order: 10; font-size: 9px; }
  #rec-sel-toolbar #undo-btn,
  #rec-sel-toolbar #redo-btn { order: 11; }
  #rec-sel-toolbar .rec-btn-primary { order: 12; margin-left: auto; }

  /* Cards: single column, compact */
  #recommendations-list {
    grid-template-columns: 1fr !important;
    max-height: min(60vh, 520px) !important;
    gap: 6px !important;
  }
  .rec-card-inner { padding: 11px 11px 11px 12px; gap: 9px; }
  .rec-card-name { font-size: 13.5px; }
  .rec-card-cuisine { font-size: 8px; }
  .rec-card-desc { font-size: 10px; }
  .rec-card-check { width: 18px !important; height: 18px !important; }
  /* Always show the action toolbar on touch (no hover state) */
  .rec-card-actions { opacity: 1 !important; transform: none !important; pointer-events: auto !important; }
  .rec-card-action { opacity: 0.6 !important; width: 28px; height: 28px; }
  .rec-card-fav { opacity: 0.5 !important; width: 28px; height: 28px; }
  .rec-card-drag { opacity: 0.4 !important; }
  .rec-card-addr { font-size: 9.5px; }
}

/* Restaurant modals */
.rec-modal-inner {
  background: var(--panel-bg);
  color: var(--text);
  border-radius: 4px;
  box-shadow: 0 6px 36px rgba(0,0,0,0.25);
  width: 90%;
  max-height: 80vh;
  overflow-y: auto;
  padding: 24px;
}
.rec-modal-inner input,
.rec-modal-inner textarea,
.rec-modal-inner select {
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 0;
  width: 100%;
  padding: 8px 12px;
  font-size: 12px;
  box-sizing: border-box;
  font-family: inherit;
}
.rec-modal-inner input:focus,
.rec-modal-inner textarea:focus,
.rec-modal-inner select:focus {
  outline: none;
  border-color: var(--gold);
}
.rec-modal-label {
  display: block;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--gold-mid);
  margin-bottom: 4px;
}
.rec-modal-field { margin-bottom: 12px; }
.rec-modal-field:last-of-type { margin-bottom: 16px; }
.rec-modal-title {
  margin: 0 0 16px;
  font-size: 16px;
  font-weight: 400;
  color: var(--charcoal);
  font-family: 'DM Sans', sans-serif;
  letter-spacing: 0.02em;
}
.rec-modal-footer { display: flex; gap: 8px; justify-content: flex-end; }
.rec-modal-error {
  display: none;
  background: rgba(192,57,43,0.12);
  border: 1px solid rgba(192,57,43,0.35);
  color: #e57373;
  padding: 8px 12px;
  border-radius: 4px;
  margin-bottom: 12px;
  font-size: 12px;
}
html.dark-mode .rec-modal-inner { border: 1px solid rgba(180,155,115,0.2); }

/* ── Ultra-narrow / Split-screen Outlook optimization ────────── */
@media (max-width: 1000px) {
  main {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 16px 16px 60px;
  }
  .form-col {
    padding-right: 0;
    border-right: none;
  }
  .preview-col {
    padding-left: 0;
    position: static !important;
  }
  .panel-body { padding: 16px 12px 120px; }
  .panel-header { padding: 8px 12px 7px; }
  .field { margin-bottom: 10px; }
  .field input, .field textarea { font-size: 11px; padding: 7px 10px; }
  .field select { font-size: 11px; padding: 7px 34px 7px 10px; }
  .panel-title { font-size: 7.5px; }
  .app-header { padding: 8px 16px; min-height: auto; }
  .cat-bar-main-row { padding: 4px 8px; }
  .cat-bar-mode-row .mode-sub-bar { padding: 0 8px; }
  .cat-tab { padding: 7px 12px; font-size: 13px; white-space: nowrap; }
  .mode-sub-bar { padding: 0; }
  .mode-sub-btn { padding: 6px 12px; font-size: 9px; }
  .rec-toolbar { gap: 4px; }
  .rec-toolbar-btn { padding: 6px 10px; font-size: 8.5px; }
  #recommendations-list { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)) !important; }
  /* ── Mobile: dock the action-row pill at the bottom, centered ── */
  .action-row {
    position: fixed;
    left: 0;
    right: 0;
    bottom: calc(12px + env(safe-area-inset-bottom));
    margin: 0 auto !important;
    z-index: 1100;
    padding: 0;
    gap: 0;
    flex-wrap: nowrap;
    display: flex;
    width: max-content;
    max-width: calc(100vw - 24px);
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    box-shadow: 0 12px 40px -8px rgba(0,0,0,0.52), 0 4px 12px -4px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.4);
  }
  .action-row::-webkit-scrollbar { display: none; }
  .preview-footer { padding: 8px 10px; gap: 6px; }
  .preview-footer .btn { font-size: 9px; padding: 6px 8px; flex: none; }
}

/* ── Stacked layout: form above, guest window below ──────────── */
@media (max-width: 768px) {
  /* Full-width in-flow strip on touch devices — liquid glass, vertical layout */
  .cat-bar-mode-row {
    position: relative;
    top: auto !important;
    left: auto !important;
    width: 100%;
    min-width: 0;
    border-radius: 0 0 16px 16px;
    background: rgba(8, 6, 4, 0.72);
    backdrop-filter: blur(28px) saturate(1.5);
    -webkit-backdrop-filter: blur(28px) saturate(1.5);
    border: 1px solid rgba(255,255,255,0.13);
    border-top: none;
    box-shadow: 0 12px 32px rgba(0,0,0,0.35), inset 0 -1px 0 rgba(255,255,255,0.05);
  }
  .cat-bar-mode-row.open {
    max-height: 180px;
  }
  .cat-bar-mode-row .mode-sub-bar {
    padding: 6px 0 10px;
    background: transparent;
  }
}
@media (max-width: 768px) {
  .cat-section.active {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    min-height: 0 !important;
    gap: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    overflow: hidden !important;
  }
  .split-resizer { display: none !important; }
  .cat-section.active > .panel.form-col {
    order: 1;
    width: 100% !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: 100% !important;
    max-height: none !important;
    overflow: hidden !important;
    overflow-y: hidden !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    border-right: none !important;
    transform: none !important;
    will-change: auto !important;
  }
  .cat-section.active > .panel.form-col .panel-body {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    min-height: 0 !important;
    flex: 1 1 auto !important;
    gap: 8px !important;
    /* clearance for fixed action-row (69px) + bottom gap (12px) + safe area */
    padding-bottom: calc(84px + env(safe-area-inset-bottom)) !important;
  }
  .cat-section.active > .panel:not(.form-col) {
    display: none !important;
  }
}

/* ── Mobile responsive ────────────────────────────── */
@media (max-width: 600px) {
  body {
    background: #F7F6F4;
    /* Lock page to viewport — form content scrolls internally via panel-body */
    height: 100dvh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }
  /* Header and tabbar shrink to natural height, main fills the rest */
  header.app-header { flex-shrink: 0; }
  .cat-bar { flex-shrink: 0; }
  /* Remove the desktop viewport-height floor — cat-section fills main */
  .cat-section.active { min-height: 0; }
  main {
    grid-template-columns: 1fr;
    padding: 0;
    gap: 0;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
  }

  /* ── Header: compact logo row + slide panel ── */
  .app-header {
    padding: 0 16px;
    padding-top: env(safe-area-inset-top);
    padding-right: 68px; /* leave room for fixed hamburger (40px btn + 16px right + 12px gap) */
    align-items: stretch;
    min-height: auto;
    box-shadow: 0 1px 0 rgba(255,255,255,0.04), 0 4px 24px rgba(0,0,0,0.35);
  }
  .header-main-row {
    min-height: 52px;
    padding: 6px 0;
  }
  .header-left {
    padding: 2px 0 0;
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .header-logo-area { gap: clamp(8px, 2.5vw, 14px); align-items: center; flex: 1; min-width: 0; }
  .header-title { font-size: clamp(22px, 6.5vw, 30px); letter-spacing: 0.3px; line-height: 1; }
  .header-field { min-width: 0; flex-shrink: 0; }
  /* Weather strip on mobile */
  .weather-strip { gap: 6px; flex-shrink: 0; margin: 0 2px; }
  .weather-strip img, .weather-strip svg { width: 14px; height: 14px; }

  /* Action buttons: pill style on mobile */
  .header-action-btn {
    padding: 5px 12px;
    font-size: 7.5px;
    letter-spacing: 1.2px;
    margin-left: 0;
    flex-shrink: 0;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 999px;
    color: rgba(255,255,255,0.78);
    background: rgba(255,255,255,0.04);
  }
  .header-action-btn:hover { background: rgba(255,255,255,0.08); color: #fff; }

  /* ── Category tabs: cleaner ── */
  .cat-bar {
    padding: 0;
    background: #1A1918;
    border-bottom: 1px solid rgba(255,255,255,0.05);
  }
  .cat-bar-main-row { padding: 0 8px; }
  .cat-bar-ctx { display: none; }
  /* Itinerary add buttons: scrollable horizontal strip on mobile */
  #itin-add-wrap {
    display: flex !important;
    flex-direction: column;
    border-bottom: none;
    background: transparent !important;
    margin-bottom: 12px;
    padding-bottom: 0;
  }
  .itin-add-trigger-row { display: none !important; }
  .itin-add-panel {
    display: grid !important;
    grid-template-columns: repeat(7, 1fr) !important;   /* all shortcuts on ONE row */
    gap: 6px !important;
    overflow: visible !important;
    max-height: none !important;
    opacity: 1 !important;
    padding: 10px !important;
    scrollbar-width: none;
    -ms-overflow-style: none;
    /* Liquid glass */
    background: rgba(255,255,255,0.72) !important;
    backdrop-filter: blur(16px) saturate(160%) !important;
    -webkit-backdrop-filter: blur(16px) saturate(160%) !important;
    border: 1px solid rgba(143,109,85,0.28) !important;
    border-radius: 14px !important;
    box-shadow: 0 4px 20px -4px rgba(0,0,0,0.14), 0 2px 6px -2px rgba(0,0,0,0.08), inset 0 1px 0 rgba(255,255,255,0.55) !important;
    margin: 0 !important;
  }
  .itin-add-panel::-webkit-scrollbar { display: none; }
  /* Icon-only cards so seven fit comfortably on a single row (labels drop via
     font-size:0; the SVG icons keep their explicit width/height). */
  .itin-type-btn {
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0 !important;
    min-width: 0 !important;
    min-height: 44px !important;
    white-space: nowrap !important;
    padding: 10px 2px !important;
    font-size: 0 !important;
    border-radius: 11px !important;
    text-align: center !important;
  }
  .itin-type-ico { display: block !important; width: 19px !important; height: 19px !important; line-height: 1 !important; }
  .cat-tabs-group {
    flex: 1 1 auto;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .cat-tabs-group::-webkit-scrollbar { display: none; }
  .cat-tab {
    padding: 8px 12px 7px;
    font-size: 9.5px;
    letter-spacing: 1.2px;
    white-space: nowrap;
    color: var(--tab-bar-text, rgba(255,255,255,0.75));
  }
  .cat-tab.active { color: var(--tab-bar-text, #FFFFFF); }
  .cat-tab .cat-icon { display: none; }

  .mode-sub-bar {
    min-width: 0;
    background: transparent;
  }
  .mode-sub-group {
    margin-left: 0;
    padding-left: 0;
    border-left: none;
    width: 100%;
    gap: 0;
  }
  .mode-sub-btn {
    flex: none;
    width: 100%;
    justify-content: flex-start;
    padding: 9px 20px 9px 22px;
    font-size: 9px;
    letter-spacing: 1.3px;
    border-radius: 0;
    background: transparent !important;
    border-bottom: none;
    color: rgba(255,255,255,0.5);
  }
  .mode-sub-btn.active {
    background: transparent !important;
    color: #F5F0EC;
  }

  /* ── Form panels: card-like with soft shadow ── */
  /* Flatten outer form-col wrapper on mobile so white cards sit directly
     on the page background (removes "card inside card" nesting) */
  .cat-section.active > .panel.form-col {
    background: #F7F6F4 !important;
    box-shadow: none !important;
    padding: 0 !important;
  }
  main { background: #FDFDFC !important; }
  .panel {
    background: #FDFDFC;
    border-radius: 0 !important;
    border: none !important;
    box-shadow: none !important;
    margin-bottom: 0;
    overflow: hidden;
  }
  .panel-header {
    padding: 0;
    border-bottom: none;
    display: none;
  }
  .panel-title { display: none; }
  .panel-body { padding: 14px 16px 16px; }

  .field { margin-bottom: 28px; }
  .field label {
    font-size: 8px;
    letter-spacing: 1.6px;
    margin-bottom: 2px;
    color: var(--muted);
  }
  /* Larger tap targets: min-height 44px (Apple HIG / WCAG 2.5.5) */
  .field input:not([type="checkbox"]):not([type="radio"]), .field textarea {
    font-size: 16px !important;
    padding: 12px 8px 10px !important;
    min-height: 46px;
    border-radius: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    transition: background 0.2s ease !important;
  }
  .field textarea { min-height: 72px; line-height: 1.45; }
  .field input:focus, .field textarea:focus {
    outline: none;
    background: transparent !important;
    box-shadow: none !important;
  }
  .field select {
    font-size: 16px !important;
    padding: 12px 32px 10px 8px !important;
    min-height: 46px;
    border-radius: 0 !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    transition: background 0.2s ease !important;
  }
  .field select:focus { outline: none; background-color: transparent !important; box-shadow: none !important; }
  .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .field-row .field { width: auto !important; margin-bottom: 0; }
  .cat-tab { min-height: 44px; }
  .mode-sub-btn { min-height: 40px; }
  .mode-sub-btn::after { bottom: 0; }
  .header-action-btn { min-height: 32px; }
  .rec-toolbar-btn { min-height: 36px; }
  /* Comfortable scroll padding so focused fields aren't hidden by sticky bars */
  .panel-body { scroll-padding-top: 80px; scroll-padding-bottom: 80px; }

  .mobile-preview-toggle { display: none !important; }

  /* Restaurant recommendation cards */
  #recommendations-list { grid-template-columns: 1fr !important; gap: 10px !important; }
  .rec-toolbar { gap: 6px; }
  .rec-toolbar-btn { padding: 7px 11px; font-size: 8px; border-radius: 999px; }

  /* Itinerary table scroll */
  .itin-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 6px; }

  /* tf-card: consistent padding and section dividers on mobile */
  .tf-card { padding: 14px 0 8px; margin-bottom: 0; border-bottom: 0.5px solid rgba(180,155,115,0.14); }
  .tf-card:last-child { border-bottom: none; }
  .tf-card-title:not([data-keep-title]) { display: none; }
  .tf-card[data-keep-title] .tf-card-title { margin-bottom: 10px; }
  .tf-grid { gap: 12px 10px; }
  .itin-table { min-width: 500px; }
}

/* ── iPhone SE / very small screens ────────────────── */
@media (max-width: 420px) {
  .app-header { padding: 8px 12px 6px; padding-top: calc(8px + env(safe-area-inset-top)); }
  .header-action-btn { padding: 5px 10px; font-size: 7.5px; }
  .cat-tab { padding: 6px 10px; font-size: 9px; letter-spacing: 1.2px; }
  .mode-sub-btn { padding: 6px 11px; font-size: 8px; }
  .panel-body { padding: 24px 16px 20px !important; }
  .field { margin-bottom: 18px !important; }
  .field-row { grid-template-columns: 1fr; }
  main { padding: 0; }
}


/* ══════════════════════════════════════════════════════
   BOTTOM NAVIGATION (phone, ≤600px)
   Hides the desktop header and moves the tab bar to
   the bottom of the screen, iOS-app style.
══════════════════════════════════════════════════════ */
@media (max-width: 600px) {
  /* Hide desktop header — hamburger stays for side panel */
  .app-header { display: none !important; }

  /* Bottom nav bar — frosted glass */
  .cat-bar {
    position: fixed !important;
    bottom: 0 !important;
    top: auto !important;
    left: 0;
    right: 0;
    z-index: 1000;
    border-top: 1px solid rgba(255,255,255,0.06) !important;
    border-bottom: none !important;
    padding-bottom: env(safe-area-inset-bottom);
    background: var(--tab-bar-bg, #0A0908) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: 0 -1px 0 rgba(255,255,255,0.06) !important;
  }

  /* Tabs as icon + label columns spread evenly */
  .cat-bar-main-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
    padding: 13px 6px 11px !important;
    gap: 0;
  }
  .cat-tabs-group {
    display: flex;
    flex: 1;
    justify-content: space-around;
  }
  .cat-tab {
    flex: 1;
    flex-direction: column !important;
    align-items: center;
    gap: 3px !important;
    padding: 14px 6px 12px !important;
    font-size: 11px !important;
    letter-spacing: 0.3px !important;
    border-radius: 14px !important;
    border: 1px solid transparent !important;
    transition: color 0.18s cubic-bezier(0.34,1.56,0.64,1), background 0.18s ease, border-color 0.18s ease, transform 0.18s cubic-bezier(0.34,1.56,0.64,1) !important;
    color: var(--tab-bar-text-dim, rgba(0,0,0,0.42)) !important;
    will-change: transform;
  }
  /* Active tab: pill + gold tint, adapts to light/dark tab bar */
  .cat-tab.active {
    color: var(--tab-bar-text, var(--gold, #9A6E1A)) !important;
    background: rgba(201,169,110,0.14) !important;
    border-color: rgba(201,169,110,0.18) !important;
  }
  /* Press feedback: immediate scale-down on touch */
  .cat-tab:active {
    transform: scale(0.92) !important;
    transition-duration: 0.08s !important;
  }
  /* Light tab bar adaptation */
  html.light-tab-bar .cat-tab {
    color: rgba(14,13,12,0.40) !important;
  }
  html.light-tab-bar .cat-tab.active {
    color: var(--gold, #7A5220) !important;
    background: rgba(0,0,0,0.07) !important;
    border-color: rgba(0,0,0,0.08) !important;
  }

  .tab-icon {
    display: block !important;
    width: 22px !important;
    height: 22px !important;
    opacity: 0.45;
    transition: opacity 0.18s ease, transform 0.22s cubic-bezier(0.34,1.56,0.64,1) !important;
  }
  .cat-tab.active .tab-icon {
    opacity: 1 !important;
    transform: scale(1.14) !important;
  }
  .cat-tab:active .tab-icon {
    transform: scale(0.95) !important;
  }

  /* Hide the inline transfer-type context buttons — mode row handles this on mobile */
  .cat-bar-ctx { display: none !important; }

  /* Mode row — hidden on mobile, replaced by floating tab menus */
  .cat-bar-mode-row { display: none !important; }

  /* Mode row — modern segmented pill control above tab bar */
  .cat-bar-mode-row {
    order: -1;
    background: var(--tab-bar-bg, #0F0E0C) !important;
    background: color-mix(in srgb, var(--tab-bar-bg, #0F0E0C) 72%, transparent) !important;
    backdrop-filter: blur(40px) saturate(1.6) !important;
    -webkit-backdrop-filter: blur(40px) saturate(1.6) !important;
    border-top: 1px solid rgba(255,255,255,0.07) !important;
    border-bottom: none !important;
    border-radius: 0 !important;
    box-shadow: 0 -6px 24px rgba(0,0,0,0.32) !important;
  }
  .cat-bar-mode-row .mode-sub-bar {
    padding: 8px 14px 10px !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 0 !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* Segmented pill track */
    background: rgba(255,255,255,0.07) !important;
    border-radius: 12px !important;
    margin: 0 14px !important;
    padding: 3px !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    width: calc(100% - 28px) !important;
  }
  .cat-bar-mode-row .mode-sub-bar::-webkit-scrollbar { display: none; }
  .mode-sub-btn {
    flex: 1 1 0 !important;
    text-align: center !important;
    white-space: nowrap !important;
    min-width: 0 !important;
    min-height: 34px !important;
    padding: 9px 10px 8px !important;
    font-size: 9.5px !important;
    letter-spacing: 0.9px !important;
    border-radius: 10px !important;
    color: rgba(255,255,255,0.45) !important;
    background: transparent !important;
    border: none !important;
    transition: color 0.16s ease, background 0.16s ease, transform 0.16s cubic-bezier(0.34,1.56,0.64,1) !important;
    position: relative !important;
  }
  .mode-sub-btn:active { transform: scale(0.93) !important; transition-duration: 0.08s !important; }
  .mode-sub-btn::before { display: none !important; }
  .mode-sub-btn.active {
    color: rgba(255,255,255,0.96) !important;
    background: rgba(255,255,255,0.16) !important;
    box-shadow: 0 1px 8px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.14) !important;
  }
  /* Adapt pill colours on light tab-bar backgrounds */
  html.light-tab-bar .cat-bar-mode-row .mode-sub-bar {
    background: rgba(0,0,0,0.07) !important;
    border-color: rgba(0,0,0,0.08) !important;
  }
  html.light-tab-bar .mode-sub-btn { color: rgba(0,0,0,0.40) !important; }
  html.light-tab-bar .mode-sub-btn.active {
    color: rgba(0,0,0,0.88) !important;
    background: rgba(255,255,255,0.65) !important;
    box-shadow: 0 1px 6px rgba(0,0,0,0.14), inset 0 1px 0 rgba(255,255,255,0.9) !important;
  }

  /* Content area clears bottom nav + action row */
  main {
    padding-bottom: calc(160px + env(safe-area-inset-bottom)) !important;
  }

  /* No chevron on mobile — active pill is the indicator */
  .tab-chevron-active::before { display: none !important; }

  /* Action row: glass pill floating above the bottom nav */
  .action-row {
    bottom: calc(var(--mobile-nav-h, 100px) + 10px) !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    border-radius: 999px !important;
    padding: 7px 14px !important;
    gap: 0 !important;
    /* Size to the display and spread the icons evenly across the pill */
    width: calc(100vw - 36px) !important;
    max-width: calc(100vw - 36px) !important;
    justify-content: space-between !important;
    box-shadow: 0 8px 28px rgba(0,0,0,0.28), 0 2px 8px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.12) !important;
  }
  /* Icon + tiny caption so every action reads clearly — no more cryptic icons.
     iOS tab-bar style: label sits under the glyph. */
  .action-row .btn,
  .action-row .ar-status { flex-direction: column !important; gap: 3px !important; padding: 8px 3px !important; }
  .action-row .btn-label {
    display: block !important; font-size: 8px !important; font-weight: 400 !important;
    letter-spacing: 0.2px !important; line-height: 1 !important; text-transform: uppercase !important;
    opacity: 0.72; white-space: nowrap !important;
  }
  /* The booking-status is a state, not an action — its pulsing dot carries it,
     and its label ("Guest Req." etc.) is too long for the slot. */
  /* Status: colour-coded dot + a short TYPE caption in the same font as the other
     labels. The dynamic full label is too long/varied, so drive a compact one from
     the data-status. The dot gets vertical margin so its box matches the icon
     height and the caption lines up with the other captions. */
  .action-row .ar-status .btn-label { display: none !important; }
  .action-row .ar-status .ar-status-dot { margin: 4px 0 !important; }
  .action-row .ar-status::after {
    font-size: 8px; font-weight: 400; letter-spacing: 0.2px; line-height: 1;
    text-transform: uppercase; opacity: 0.72; content: "Req";
  }
  .action-row .ar-status[data-status="guest-request"]::after   { content: "GL Req"; }
  .action-row .ar-status[data-status="request"]::after         { content: "Req"; }
  .action-row .ar-status[data-status="confirmation"]::after    { content: "Conf"; }
  .action-row .ar-status[data-status="quotation"]::after       { content: "Quot"; }
  .action-row .ar-status[data-status="recommendations"]::after { content: "Rec"; }
  /* ••• sits centred in the pill, not floating at the top of its slot. */
  .action-row .more-menu { display: flex; align-items: center; align-self: center; }
  .action-row .more-menu .btn-more { align-self: center; }
  /* Slim the pill to the desk's real primaries on phone: Home · status ·
     WhatsApp · Calendar · Save · •••. Document-output buttons (Preview / New /
     Copy / Mail / PDF) are demoted off the pill; WhatsApp + Add-to-Calendar are
     injected as the phone primaries (see the enhance() script). */
  .action-row .ar-demote { display: none !important; }
  .action-row .btn.ar-mobile-extra { display: inline-flex !important; }
  .action-row .more-menu { order: 1 !important; }   /* keep ••• at the trailing end */
  .more-menu-pop .more-item-dupe { display: none !important; }
  /* Only Home is gold on phone — neutralise the Save button's gold fill */
  .action-row .btn[onclick*="saveManually"] { background: none !important; color: var(--gold-mid, #b8934f) !important; }
  .action-row .btn[onclick*="saveManually"]::after { display: none !important; }

  /* ── Cooler action row: jewel Home, tactile icons, pulsing status ── */
  .action-row .ar-home {
    background: linear-gradient(145deg, #c9a76a, #9a793f) !important;
    box-shadow: 0 3px 10px rgba(143,109,85,0.42), inset 0 1px 0 rgba(255,255,255,0.38), inset 0 -2px 3px rgba(0,0,0,0.16) !important;
  }
  .action-row .ar-home:active { transform: scale(0.92) !important; filter: brightness(1.05); }
  /* Icons: unified size, soft press highlight instead of a harsh shrink */
  .action-row .btn { border-radius: 999px !important; transition: background .18s ease, transform .1s ease !important; }
  .action-row .btn .btn-icon { width: 17px !important; height: 17px !important; opacity: 0.9; }
  .action-row .btn:active { background: rgba(184,147,79,0.15) !important; transform: scale(0.93) !important; opacity: 1 !important; }
  /* Gentle life in the booking-status dot */
  .action-row .ar-status .ar-status-dot { animation: arDotPulse 2.6s ease-in-out infinite; }
  @keyframes arDotPulse { 0%,100% { transform: scale(1); opacity: 0.88; } 50% { transform: scale(1.18); opacity: 1; } }
  /* Touch press on action row buttons */
  .action-row .btn:active { transform: scale(0.90) !important; opacity: 0.8 !important; transition: transform 0.08s ease, opacity 0.08s ease !important; }
  /* Hide action row when mode sub-bar is open so it doesn't block the options */
  body.mode-row-open .action-row { display: none !important; }

  /* ── Home button inside the action row ─────────────────────────
     Home is the leading item of the row itself, so there's no separate
     floating FAB to collide with. Distinct gold accent so it reads as
     Home, not another action. ── */
  #mh-fab { display: none !important; }   /* retire the separate floating FAB */
  .action-row .ar-home {
    display: flex !important; align-items: center; justify-content: center;
    order: -2;
    flex: 0 0 auto; width: 46px; align-self: stretch;
    background: var(--gold, #b8934f); color: #fff;
    border: none; padding: 0 !important; margin-right: 4px;
    border-radius: 999px;
  }
  .action-row .ar-home:active { transform: scale(0.90) !important; opacity: 0.85 !important; }

  /* ── On phone the Flow tab is replaced by the AI Draft tab (Flow stays
       reachable via the header menu). ── */
  #tab-tools { display: none !important; }
  .cat-tab-ai { display: inline-flex !important; }
  /* On mobile cat-tools is full-height single-panel view */
  #cat-tools.active {
    flex-direction: column !important;
    height: auto !important;
    min-height: calc(100vh - 200px);
    padding: 0 0 calc(110px + env(safe-area-inset-bottom)) !important;
    gap: 0 !important;
    overflow-y: auto;
  }
  /* All flow cols fill width */
  .flow-col, #flow-right-col {
    min-width: 0 !important;
    width: 100% !important;
    height: auto !important;
    min-height: calc(100vh - 220px) !important;
    flex: 1 1 auto !important;
  }
  #flow-right-col { flex-direction: column; gap: 0; }
  .flow-resizer { display: none !important; }
  #flow-panel-bar { display: none !important; }
  /* Hide action row on Flow tab */
  body:has(#cat-tools.active) .action-row { display: none !important; }

  /* ── Flow panels — mobile overrides ── */

  /* Back header bar */
  #flow-mobile-back {
    display: flex !important;
    align-items: center;
    gap: 10px;
    padding: 16px 18px 14px;
    font-family: 'DM Sans', sans-serif;
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: var(--tab-bar-text-dim, rgba(255,255,255,0.45));
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    border-bottom: 1px solid rgba(255,255,255,0.07);
    background: var(--tab-bar-bg, #0F0E0C);
    background: color-mix(in srgb, var(--tab-bar-bg, #0F0E0C) 60%, transparent);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    -webkit-tap-highlight-color: transparent;
    position: sticky;
    top: 0;
    z-index: 10;
  }
  #flow-mobile-back svg { opacity: 0.45; flex-shrink: 0; }

  /* Panels fill the screen, clean edges */
  #cat-tools.active .panel {
    border-radius: 0 !important;
    border-left: none !important;
    border-right: none !important;
    box-shadow: none !important;
  }

  /* Panel header — bigger, more breathing room */
  #cat-tools.active .panel-header {
    padding: 18px 20px 16px !important;
    min-height: 58px !important;
  }
  #cat-tools.active .panel-header::after { display: none; }
  #cat-tools.active .panel-badge {
    font-size: 10px !important;
    letter-spacing: 2px !important;
    padding: 3px 10px !important;
  }

  /* Panel body — comfortable padding */
  #cat-tools.active .panel-body {
    padding: 14px 18px !important;
  }

  /* To-Do: bigger input row, easier to tap */
  #cat-tools.active .todo-add {
    padding: 14px 18px !important;
    gap: 8px !important;
    flex-wrap: nowrap;
  }
  #cat-tools.active .todo-priority-select {
    font-size: 13px !important;
    padding: 12px 10px !important;
    min-width: 80px !important;
    height: 48px;
  }
  #cat-tools.active .todo-add input {
    font-size: 16px !important;
    padding: 12px 14px !important;
    height: 48px;
  }
  #cat-tools.active .todo-add-btn {
    font-size: 10px !important;
    padding: 12px 18px !important;
    height: 48px;
    white-space: nowrap;
  }

  /* To-Do items — big tap targets */
  #cat-tools.active .todo-item {
    padding: 14px 0 !important;
    gap: 14px !important;
    min-height: 52px;
  }
  #cat-tools.active .todo-item input[type=checkbox] {
    width: 22px !important;
    height: 22px !important;
  }
  #cat-tools.active .todo-label {
    font-size: 15px !important;
    font-weight: 300 !important;
    line-height: 1.5 !important;
  }
  #cat-tools.active .todo-priority-dot {
    width: 9px !important;
    height: 9px !important;
  }
  #cat-tools.active .todo-del {
    font-size: 20px !important;
    padding: 8px 10px !important;
  }
  #cat-tools.active .todo-footer {
    padding: 14px 18px !important;
    min-height: 52px;
  }
  #cat-tools.active .todo-count { font-size: 11px !important; }
  #cat-tools.active .todo-clear-btn {
    font-size: 10px !important;
    padding: 8px 16px !important;
  }

  /* Handover: bigger textarea, easier to read/type */
  #cat-tools.active .handover-textarea {
    font-size: 16px !important;
    line-height: 1.8 !important;
    padding: 4px 0 !important;
    min-height: 260px !important;
  }
  #cat-tools.active .handover-clear-btn {
    font-size: 10px !important;
    padding: 8px 16px !important;
  }

  /* Contacts: bigger rows, easier to tap */
  #cat-tools.active .contact-search-input {
    font-size: 16px !important;
    padding: 12px 14px !important;
  }
  #cat-tools.active .contact-search-wrap {
    padding: 12px 18px !important;
  }
  #cat-tools.active .contact-item {
    padding: 14px 0 !important;
    min-height: 56px;
    gap: 14px !important;
  }
  #cat-tools.active .contact-name {
    font-size: 16px !important;
    font-weight: 400 !important;
  }
  #cat-tools.active .contact-phone {
    font-size: 13px !important;
  }
  #cat-tools.active .contact-note {
    font-size: 12px !important;
  }
  #cat-tools.active .contact-del {
    font-size: 20px !important;
    padding: 8px 10px !important;
  }
  #cat-tools.active .contacts-add {
    padding: 16px 18px !important;
    gap: 10px !important;
  }
  #cat-tools.active .contacts-add input,
  #cat-tools.active .contacts-add select {
    font-size: 16px !important;
    padding: 12px 14px !important;
  }
  #cat-tools.active .contacts-add-btn {
    font-size: 11px !important;
    padding: 14px !important;
  }
  #cat-tools.active .flow-add-toggle {
    font-size: 10px !important;
    padding: 7px 14px !important;
  }

  /* ── Flow service menu popup ── */
  .flow-mobile-menu {
    display: none;
    position: fixed;
    bottom: calc(var(--mobile-nav-h, 100px) + 8px);
    left: 12px;
    right: 12px;
    z-index: 9000;
    flex-direction: row;
    justify-content: space-around;
    gap: 0;
    padding: 8px 4px;
    background: var(--tab-bar-bg, #0F0E0C);
    background: color-mix(in srgb, var(--tab-bar-bg, #0F0E0C) 92%, transparent);
    backdrop-filter: blur(24px) saturate(1.6);
    -webkit-backdrop-filter: blur(24px) saturate(1.6);
    border: 1px solid rgba(255,255,255,0.12);
    border: 1px solid color-mix(in srgb, var(--tab-bar-text, #ffffff) 12%, transparent);
    border-radius: 20px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.55), 0 2px 8px rgba(0,0,0,0.35);
  }
  .flow-mobile-menu.open { display: flex !important; }
  .fmm-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 8px 6px;
    flex: 1;
    background: none;
    border: none;
    border-radius: 14px;
    color: var(--tab-bar-text-dim, rgba(255,255,255,0.50));
    font-family: 'DM Sans', sans-serif;
    font-size: 8.5px;
    font-weight: 400;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    cursor: pointer;
    transition: color 0.15s, background 0.15s;
    -webkit-tap-highlight-color: transparent;
  }
  .fmm-btn:active { background: rgba(255,255,255,0.10); background: color-mix(in srgb, var(--tab-bar-text, #fff) 10%, transparent); color: var(--tab-accent-tools, var(--tab-active-border, #E8CC80)); transform: scale(0.94); }
  .fmm-btn svg { opacity: 0.7; }
  .fmm-btn:active svg { opacity: 1; }

  /* ── Generic mobile tab quick-action menu ── */
  #mobile-tab-menu {
    position: fixed;
    bottom: calc(var(--mobile-nav-h, 100px) + 8px);
    left: 12px;
    right: 12px;
    z-index: 9001;
    display: none;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-around;
    gap: 0;
    padding: 8px 4px;
    background: var(--tab-bar-bg, #0F0E0C);
    background: color-mix(in srgb, var(--tab-bar-bg, #0F0E0C) 92%, transparent);
    backdrop-filter: blur(24px) saturate(1.6);
    -webkit-backdrop-filter: blur(24px) saturate(1.6);
    border: 1px solid rgba(255,255,255,0.12);
    border: 1px solid color-mix(in srgb, var(--tab-bar-text, #ffffff) 12%, transparent);
    border-radius: 20px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.55), 0 2px 8px rgba(0,0,0,0.35);
  }
  #mobile-tab-menu.open { display: flex !important; }
  .mtm-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 8px 6px;
    flex: 1;
    background: none;
    border: none;
    border-radius: 14px;
    color: var(--tab-bar-text-dim, rgba(255,255,255,0.50));
    font-family: 'DM Sans', sans-serif;
    font-size: 8.5px;
    font-weight: 400;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    cursor: pointer;
    transition: color 0.15s, background 0.15s;
    -webkit-tap-highlight-color: transparent;
  }
  .mtm-btn:active { background: rgba(255,255,255,0.10); background: color-mix(in srgb, var(--tab-bar-text, #fff) 10%, transparent); transform: scale(0.94); color: var(--mtm-accent, var(--tab-active-border, #E8CC80)); }
  .mtm-btn svg { opacity: 0.7; flex-shrink: 0; }
  .mtm-btn:active svg { opacity: 1; }
  .mtm-divider {
    width: 100%;
    height: 1px;
    background: rgba(255,255,255,0.08); background: color-mix(in srgb, var(--tab-bar-text, #fff) 8%, transparent);
    margin: 4px 0;
    flex-shrink: 0;
  }
  /* Tab-switch: fade only the scrolling content, never the section itself.
     An animating ancestor with will-change/opacity<1 becomes the containing
     block for the fixed action row, dragging it through the transition (the
     "jump"). Keeping the section at opacity:1 leaves the row viewport-anchored
     and sticky while the panels below fade in. */
  @keyframes catSectionInMobile {
    from { opacity: 0; }
    to   { opacity: 1; }
  }
  .cat-section.sec-enter {
    animation: none !important;
    will-change: auto !important;
  }
  .cat-section.sec-enter > .panel.form-col .panel-body,
  .cat-section.sec-enter > .panel:not(.form-col) {
    animation: catSectionInMobile 0.3s cubic-bezier(0.33, 0, 0.2, 1) both;
  }

  /* Hamburger stays top-right */
  .floating-menu-btn {
    top: calc(16px + env(safe-area-inset-top));
  }
}

/* ══════════════════════════════════════════════════════
   MOBILE APP-LIKE STABILITY (touch only, ≤768px)
   - Disable double-tap zoom on interactive elements
   - Remove iOS tap-flash highlight
   - Lock horizontal scroll & overscroll bounce
   - Prevent UI chrome text selection (form inputs still selectable)
══════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  html, body {
    overflow-x: hidden;
    overscroll-behavior-y: contain;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }
  body {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    touch-action: pan-y;
  }
  /* Allow normal text selection inside editable / preview content */
  input, textarea, select, [contenteditable="true"],
  .preview-panel, .preview-panel *, .hist-preview-table, .hist-preview-table * {
    -webkit-user-select: text;
    user-select: text;
    -webkit-touch-callout: default;
  }
  /* Prevent iOS Safari from auto-zooming on focus: any focusable input must be >=16px */
  input, textarea, select {
    font-size: 16px !important;
  }
  /* Disable selection + double-tap zoom on chrome / buttons / tabs */
  button, .btn, .header-action-btn, .cat-tab, .mode-sub-btn, .rec-toolbar-btn, .panel-header, .app-header, .cat-bar,
  label, a {
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }
  /* Stop iOS from auto-zooming select dropdowns */
  select, input, textarea { font-size: 16px; }
  /* Lock the app shell so it doesn't drift sideways */
  main, .cat-section, .panel { max-width: 100%; }
}

.panel {
  background: var(--bg);
  border: none;
  border-radius: 0;
  box-shadow: none;
  will-change: auto;
}
.panel:hover {
  box-shadow: none;
}
.preview-panel.panel {
  border: none;
  box-shadow: none;
  /* The same ground as the form column beside it. This was var(--bg), one step
     below the --grouped-bg the workspace sits on, so the two halves of the
     desk were different colours. Invisible on the shipped near-black; on any
     scheme with colour in it, it read as two rooms rather than one. */
  background: var(--grouped-bg, var(--panel-bg));
}
.panel-header {
  padding: 12px 26px 11px;
  border-bottom: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: transparent;
  min-height: 36px;
}
.panel-title {
  font-family: 'DM Sans', sans-serif;
  font-size: 7px;
  font-weight: 500;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--gold);
  display: flex;
  align-items: center;
  gap: 9px;
}
.panel-title .icon { font-size: 13px; }
.panel-badge {
  font-size: 8.5px;
  font-weight: 500;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--white);
  background: var(--gold);
  border-radius: 0px;
  padding: 3px 10px;
  display: none;
}
.panel-body { padding: 26px 26px 120px 26px; }
.preview-panel .panel-body { padding: 0; }
/* Top-card spacing is driven entirely by the unified card system (guest card
   min-height + margin-bottom, every tf-card margin-top:0). No per-tab margin
   hacks — that keeps the first bordered card at the same Y on every tab. */

/* ── Itinerary add trigger + slide panel ── */
:root {
  --itin-add-bg: rgba(255,255,255,0.55);
  --itin-add-blur: blur(14px) saturate(160%);
  --itin-add-border: rgba(143,109,85,0.22);
  --itin-type-bg: rgba(255,255,255,0.38);
  --itin-type-border: rgba(143,109,85,0.25);
  --itin-focus-ring: 0 0 0 2px rgba(143,109,85,0.45);
}
html.dark-mode {
  --itin-add-bg: rgba(10,9,7,0.85);
  --itin-add-border: rgba(180,155,115,0.22);
  --itin-type-bg: rgba(255,255,255,0.06);
  --itin-type-border: rgba(180,155,115,0.22);
  --itin-focus-ring: 0 0 0 2px rgba(201,169,110,0.55);
}
/* Unified card & border system — dark theme overrides. */
html.dark-mode {
  /* Same rule in the dark: the fill lifts off the ground, the border stops
     drawing the shape. Apple's secondarySystemGroupedBackground is a step
     lighter than the page rather than an outline on it. */
  /* Solved against the crisp black the desk now sits on: 1.40:1, the same
     kind of step the calendar blocks stand at, which is the look this is
     copying. On a lifted panel it would have been too much; on black it is
     what makes a card a card. */
  --card-bg:            rgba(255,255,255,0.128);
  --card-border:        rgba(255,255,255,0.14);
  --card-border-strong: rgba(201,169,110,0.44);
  --card-shadow:        0 1px 2px rgba(0,0,0,0.26), 0 10px 26px -16px rgba(0,0,0,0.55);
  --card-shadow-focus:  0 4px 18px rgba(0,0,0,0.34);
  --hairline:           rgba(255,255,255,0.13);
  --field-bg:           rgba(255,255,255,0.075);
  --field-border:       rgba(255,255,255,0.26);
  --chip-fill:          rgba(255,255,255,0.10);
  --chip-fill-hover:    rgba(255,255,255,0.17);
  --chip-fill-on:       rgba(201,169,110,0.20);
  --chip-ink:           rgba(255,255,255,0.90);
  --chip-ink-on:        #EBD3A4;
  --label-empty:        #D8BC8A;
}
.itin-add-wrap {
  position: sticky;
  top: 0;
  z-index: 6;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: none;
  margin: 0 0 12px;
}
/* Gap fix: edge-to-edge width for sticky add bar — but never the guest header.
   Every tab opens with the same block, name over Protel ref and phone, and it
   has to sit at the same height on all of them or switching tabs makes it
   jump. On a phone the itinerary's guest card is the panel's first child (the
   other tabs carry a hidden sticky type-bar ahead of theirs, so :first-child
   misses them), and the id here outranks the margin reset every other tab
   gets. Measured at 390: the header sat at y78 on the itinerary against y68
   on the other three. */
#cat-itinerary.active .panel-body > .tf-card:first-child:not(.tf-guest-card) { margin-top: 10px; }
#cat-itinerary.active .panel-body > .itin-add-wrap {
  margin-left: -16px;
  margin-right: -14px;
  padding-left: 16px;
  padding-right: 14px;
}
.itin-add-trigger-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}
.itin-add-trigger {
  font-family: 'DM Sans', sans-serif;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--gold);
  background: none;
  border: none;
  padding: 4px 6px;
  margin: -4px -6px;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: opacity 0.12s, box-shadow 0.12s;
}
.itin-add-trigger:hover { opacity: 0.7; }
.itin-add-trigger:focus-visible,
.itin-type-btn:focus-visible{
  outline: none;
  box-shadow: var(--itin-focus-ring);
}
.itin-add-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 12px;
  flex-shrink: 0;
  position: relative;
}
.itin-add-icon span {
  display: block;
  position: absolute;
  left: 0; right: 0;
  height: 1.5px;
  background: var(--gold);
  border-radius: 1px;
  transition: transform 0.22s ease, opacity 0.18s ease, top 0.22s ease;
}
.itin-add-icon span:nth-child(1) { top: 0; }
.itin-add-icon span:nth-child(2) { top: 50%; transform: translateY(-50%); }
.itin-add-icon span:nth-child(3) { bottom: 0; top: auto; }
.itin-add-wrap.panel-open .itin-add-icon span:nth-child(1) { top: 50%; transform: translateY(-50%) rotate(45deg); }
.itin-add-wrap.panel-open .itin-add-icon span:nth-child(2) { opacity: 0; }
.itin-add-wrap.panel-open .itin-add-icon span:nth-child(3) { top: 50%; bottom: auto; transform: translateY(-50%) rotate(-45deg); }
.itin-add-trigger-row { display: none; }
.itin-add-panel {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
  overflow: hidden;
  max-height: none;
  opacity: 1;
  padding: 10px 0;
}
.itin-type-btn {
  font-family: 'DM Sans', sans-serif;
  font-size: 8.5px;
  font-weight: 500;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  color: var(--gold);
  background: var(--itin-type-bg);
  border: 1px solid var(--itin-type-border);
  border-radius: 12px;
  padding: 12px 5px;
  min-height: 58px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  white-space: normal;
  text-align: center;
  line-height: 1.15;
  transition: background 0.16s ease, border-color 0.16s ease, transform 0.1s ease, box-shadow 0.16s ease;
  -webkit-tap-highlight-color: transparent;
}
.itin-type-btn:hover {
  background: var(--gold-pale, rgba(143,109,85,0.12));
  border-color: var(--gold-border);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px -6px rgba(143,109,85,0.4);
}
.itin-type-btn:active { transform: scale(0.97); }
.itin-type-btn.iq-active { background: var(--gold-pale); border-color: var(--gold); color: var(--gold); }
.itin-type-btn .itin-type-ico { display: block; font-size: 18px; line-height: 1; }

/* ── Itinerary Quick-Add Panel — liquid glass matching action-row ── */
#itin-quick-panel, #tf-quick-panel {
  position: fixed;
  z-index: 10200;
  display: none;
  width: 340px;
  max-width: calc(100vw - 24px);
  background: var(--tab-bar-bg, rgb(52,52,52)) !important;
  background: color-mix(in srgb, var(--tab-bar-bg, rgb(52,52,52)) 82%, transparent) !important;
  backdrop-filter: blur(36px) saturate(1.4) brightness(1.22);
  -webkit-backdrop-filter: blur(36px) saturate(1.4) brightness(1.22);
  border: 1px solid rgba(212,168,83,0.20);
  border-top: 1px solid rgba(212,168,83,0.36);
  border-radius: 0 0 12px 12px;
  box-shadow: 0 12px 40px -6px rgba(0,0,0,0.28), 0 4px 12px -4px rgba(0,0,0,0.14), inset 0 1px 0 rgba(255,255,255,0.55);
  flex-direction: column;
  overflow: hidden;
  animation: iqIn 0.15s cubic-bezier(0.25,0.46,0.45,0.94) forwards;
}
#itin-quick-panel.iq-open, #tf-quick-panel.iq-open { display: flex; }
@keyframes iqIn {
  from { opacity: 1; transform: translateY(-3px) scale(0.99); }
  to   { opacity: 1; transform: none; }
}
/* Bottom-sheet on mobile — transfers quick panel only. The itinerary quick
   panel is anchored directly below the tapped service button (see openQuickAdd),
   so it is NOT forced to the bottom of the screen where the fixed nav hides it. */
@media (max-width: 480px) {
  #tf-quick-panel.iq-open {
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 18px 18px 0 0;
    max-height: 82vh;
    overflow-y: auto;
    animation: iqBottomIn 0.22s cubic-bezier(0.25,0.46,0.45,0.94) both;
  }
  #tf-quick-panel::before {
    content: '';
    display: block;
    width: 36px;
    height: 4px;
    background: rgba(143,109,85,0.35);
    border-radius: 2px;
    margin: 10px auto 2px;
    flex-shrink: 0;
  }
  /* Itinerary quick panel stays a compact anchored popover, scrollable if tall */
  #itin-quick-panel.iq-open { max-height: 60vh; overflow-y: auto; }
}
/* The itinerary drops float below the tapped button on phone, so round all four
   corners (they no longer attach to a bar) for a proper floating-card look. */
@media (max-width: 600px) {
  #itin-quick-panel, .svc-picker-dd, .itin-tpl-panel, .itin-ov-panel {
    border-radius: 16px !important;
    border-top-color: rgba(212,168,83,0.28) !important;
  }
}
@keyframes iqBottomIn {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}
/* ── Unified drop header — shared by every itinerary drop (quick-panel,
   service picker, templates, overview) so all 7 look identical ── */
.iq-head, .svc-picker-head {
  padding: 13px 16px 11px !important;
  border-bottom: 1px solid rgba(212,168,83,0.15) !important;
  flex-shrink: 0;
}
.iq-title, .svc-picker-title {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 1.8px !important;
  text-transform: uppercase !important;
  color: var(--gold-mid) !important;
  margin: 0 !important;
}
.iq-body {
  padding: 14px 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.iq-row {
  display: grid;
  gap: 12px;
}
.iq-row-1 { grid-template-columns: 1fr; }
.iq-row-2 { grid-template-columns: 1fr 1fr; }
.iq-row-3 { grid-template-columns: 1fr 1fr 1fr; }
.iq-field label {
  display: block;
  font-size: 9px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 5px;
  font-weight: 500;
}
.iq-field input,
.iq-field select {
  width: 100%;
  font-family: inherit;
  font-size: 14px;
  color: var(--text);
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(143,109,85,0.22);
  padding: 4px 0 5px;
  outline: none;
  transition: border-color 0.15s;
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
}
.iq-field select {
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%238F6D55'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 2px center;
  padding-right: 16px;
}
.iq-field input:focus,
.iq-field select:focus { border-bottom-color: var(--gold); }
.iq-footer {
  padding: 8px 12px;
  border-top: 1px solid rgba(143,109,85,0.18);
  background: rgba(0,0,0,0.04);
  display: flex;
  gap: 6px;
  align-items: center;
  flex-shrink: 0;
}
.iq-cancel-btn {
  flex-shrink: 0;
  padding: 7px 12px;
  font-size: 11.5px;
  background: rgba(255,255,255,0.5);
  border: 1px solid rgba(143,109,85,0.25);
  border-radius: 6px;
  cursor: pointer;
  color: var(--muted);
  font-family: inherit;
  transition: color 0.12s, background 0.12s;
}
.iq-cancel-btn:hover { color: var(--text); background: rgba(255,255,255,0.7); }
.iq-add-btn {
  flex: 1;
  padding: 8px 10px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--gold);
  border: none;
  border-radius: 6px;
  cursor: pointer;
  color: #fff;
  font-family: inherit;
  transition: background 0.15s;
  box-shadow: 0 2px 8px rgba(143,109,85,0.35);
}
.iq-add-btn:hover { background: var(--gold-mid); }
.iq-add-btn:active { opacity: 0.85; }
/* Flash animation when a block is newly added */
@keyframes itinBlockFlash {
  0%   { outline: 2px solid var(--gold); outline-offset: 2px; box-shadow: 0 0 0 4px rgba(143,109,85,0.18); }
  70%  { outline: 2px solid var(--gold); outline-offset: 2px; box-shadow: 0 0 0 4px rgba(143,109,85,0.18); }
  100% { outline: 2px solid transparent; outline-offset: 2px; box-shadow: none; }
}
.itin-block-new-flash { animation: itinBlockFlash 1.2s ease forwards; border-radius: 4px; }
html.dark-mode #itin-quick-panel, html.dark-mode #tf-quick-panel {
  border-color: rgba(212,168,83,0.18);
}
/* Force dark glass for quick panels — matches tab-combo-dropdown style */
.iq-title { color: var(--gold-mid) !important; font-family: 'DM Sans',sans-serif !important; font-size: 11px !important; font-weight: 600 !important; letter-spacing: 1.8px !important; text-transform: uppercase !important; }
.iq-head { border-bottom-color: rgba(212,168,83,0.15) !important; }
.iq-field label { color: rgba(255,255,255,0.40) !important; font-family: 'DM Sans',sans-serif !important; font-size: 10px !important; font-weight: 400 !important; letter-spacing: 1.2px !important; }
.iq-field input, .iq-field select { color: rgba(255,255,255,0.90) !important; border-bottom-color: rgba(255,255,255,0.15) !important; font-family: 'DM Sans',sans-serif !important; font-size: 14px !important; font-weight: 300 !important; }
.iq-field input:focus, .iq-field select:focus { border-bottom-color: rgba(212,168,83,0.60) !important; }
.iq-footer { background: rgba(0,0,0,0.20) !important; border-top-color: rgba(212,168,83,0.15) !important; }
.iq-cancel-btn { background: transparent !important; border-color: rgba(212,168,83,0.20) !important; color: rgba(240,232,220,0.55) !important; font-family: 'DM Sans',sans-serif !important; font-size: 12px !important; font-weight: 300 !important; letter-spacing: 0.8px !important; }
.iq-cancel-btn:hover { background: rgba(255,255,255,0.10) !important; color: rgba(240,232,220,0.88) !important; }
.iq-add-btn { font-family: 'DM Sans',sans-serif !important; font-size: 12px !important; font-weight: 400 !important; letter-spacing: 1.2px !important; }
@media (max-width: 640px) {
  html.dark-mode .itin-add-panel {
    background: rgba(28,24,20,0.78) !important;
    border-color: rgba(201,169,110,0.22) !important;
    box-shadow: 0 4px 20px -4px rgba(0,0,0,0.5), 0 2px 6px -2px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.07) !important;
  }
}

/* Itinerary empty state */
.itin-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 24px 16px 20px;
  border: none;
  border-radius: var(--radius);
  color: rgba(130,110,90,0.80);
  font-family: 'DM Sans', sans-serif;
  font-size: 11px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  text-align: center;
}
.itin-empty-icon { opacity: 0.42; margin-bottom: 6px; color: rgba(155,125,85,0.75); }
.itin-empty .itin-empty-hint {
  font-size: 10.5px;
  letter-spacing: 0.3px;
  text-transform: none;
  opacity: 0.72;
  max-width: 220px;
  line-height: 1.6;
}

/* ═══════════════════════════════════════════════════════════════
   FORM ELEMENTS
═══════════════════════════════════════════════════════════════ */
.field {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-bottom: 32px;
  position: relative;
}
/* Single underline: neutral at rest, gold sweep on focus */
.field::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--hairline);
  pointer-events: none;
  transition: background 0.25s ease;
}
.field:focus-within::after {
  background: var(--gold);
  height: 1.5px;
}
.field:last-child { margin-bottom: 0; }
/* No underline on toggle-only fields */
.field:has(.opt-label):not(:has(input[type="text"], input[type="date"], input[type="time"], input[type="number"], input[type="email"], input[type="tel"], select, textarea))::after { display: none; }
.field label {
  font-size: 9.5px;
  letter-spacing: 2px;
  text-transform: uppercase;
  /* The ink, not the ink at half strength. This was var(--text) at opacity 0.5,
     which put every field label at 3.4:1 on the card it sits on — under the 4.5
     minimum, and unmovable by any colour scheme, since the scheme only changes
     what is being faded. --muted is the app's quiet ink and is held to 4.5:1
     against that same card by _mutedFor(), so the label is quiet by colour
     rather than by transparency, and stays legible in every scheme. */
  color: var(--muted);
  font-weight: 500;
  opacity: 1;
  /* Never wrap. A label that wraps takes its required-field dot onto a second
     line and shoves the input below its neighbours, which is how a row that
     looked like one line was actually broken — and it hides from any check
     based on scrollWidth, because wrapping is not overflow. Clipping is the
     honest failure here: it is visible, and it is measurable. */
  white-space: nowrap;
  transition: color 0.2s ease, opacity 0.2s ease;
}
.field:focus-within label { color: var(--gold-mid); opacity: 1; }
.field input:not([type="checkbox"]):not([type="radio"]) {
  font-size: 13px;
  font-weight: 300;
  color: var(--text);
  background: transparent;
  background-image: none;
  border: none;
  border-radius: 0;
  padding: 9px 8px 8px;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  transition: background 0.2s;
  box-shadow: none;
}
.field input:not([type="checkbox"]):not([type="radio"]):focus {
  background: transparent;
  box-shadow: none;
  outline: none;
}
.field textarea {
  font-size: 13px;
  font-weight: 300;
  color: var(--text);
  background: transparent;
  background-image: none;
  border: none;
  border-radius: 0;
  padding: 9px 8px 8px;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  transition: background 0.2s;
  box-shadow: none;
}
.field textarea:focus {
  background: transparent;
  box-shadow: none;
  outline: none;
}
.field select {
  font-size: 13px;
  font-weight: 300;
  color: var(--text);
  background-color: transparent !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7'%3E%3Cpath d='M1 1l4.5 5 4.5-5' stroke='%238F6D55' stroke-width='1.3' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: 11px 7px;
  background-position: right 8px center;
  background-repeat: no-repeat;
  border: none;
  border-radius: 0;
  padding: 9px 28px 8px 8px;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  cursor: pointer;
  transition: background 0.2s;
  box-shadow: none;
}
.field select:focus {
  background-color: transparent !important;
  box-shadow: none;
  outline: none;
}
/* Suppress browser picker icons on date/time inputs */
.field input[type="date"]::-webkit-calendar-picker-indicator,
.field input[type="time"]::-webkit-calendar-picker-indicator,
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator {
  display: none;
  -webkit-appearance: none;
}
/* ── Custom Time Picker Dropdown ── */
.tp-dd {
  position: fixed;
  z-index: 9600;
  background: rgb(16,12,7);
  background: linear-gradient(160deg, rgba(26,19,11,0.97) 0%, rgba(13,10,6,0.99) 100%);
  backdrop-filter: blur(28px) saturate(1.6);
  -webkit-backdrop-filter: blur(28px) saturate(1.6);
  border: 1px solid rgba(212,168,83,0.22);
  border-top: 1px solid rgba(212,168,83,0.32);
  border-radius: 10px;
  padding: 10px 8px;
  box-shadow: 0 20px 56px rgba(0,0,0,0.65), 0 4px 16px rgba(0,0,0,0.35);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 3px;
  visibility: hidden;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s;
  pointer-events: none;
  min-width: 260px;
}
.tp-dd.open {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0s;
}
.tp-slot {
  font-family: 'DM Sans', sans-serif;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0.5px;
  color: rgba(240,232,220,0.80);
  background: none;
  border: none;
  border-radius: 6px;
  padding: 10px 6px;
  cursor: pointer;
  text-align: center;
  transition: background 0.12s, color 0.12s;
  white-space: nowrap;
}
.tp-slot:hover { background: rgba(212,168,83,0.14); color: rgba(255,248,238,1); }
.tp-slot.tp-active { color: rgba(212,168,83,1); background: rgba(212,168,83,0.10); }

/* Number picker — the time grid, holding counts: passengers, and how many
   cars of a model. A count is one or two digits against a time's five, so the
   panel needs far less width; four columns are kept so all three read as the
   same control. */
.px-dd { min-width: 176px; }
.px-dd .tp-slot { font-size: 15px; padding: 9px 4px; }
/* The clear slot takes the full first line, so it reads as "none of these"
   rather than as a value sitting among the numbers. */
.px-dd .px-clear {
  grid-column: 1 / -1;
  font-size: 13px;
  color: rgba(240,232,220,0.55);
  padding: 6px 4px;
  margin-bottom: 2px;
  border-bottom: 1px solid rgba(212,168,83,0.16);
  border-radius: 6px 6px 0 0;
}
/* Nothing to type into, so no caret sitting in the box. The chevron beside it
   is a real element: as a background image it kept being wiped by `background:`
   shorthands from the control base rules, which reset background-image. */
.px-input { cursor: pointer; caret-color: transparent; padding-right: 11px; }
.px-wrap { position: relative; }
.px-caret {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-58%);
  font-size: 11px;
  line-height: 1;
  color: var(--gold, #8F6D55);
  opacity: 0.75;
  pointer-events: none;
}
html.dark-mode .px-caret { color: var(--gold-ink, #C9A98A); }

/* The Vehicle cell holds two lists, so its label carries a word for each —
   the count had none of its own and read as a stray number in the row. */
.tf-veh-lbl { display: flex; align-items: baseline; gap: 6px; }
/* The icon points at the count box under it, so it has to end where that box
   ends whatever else is in the label. An empty field adds its "still needed"
   dot as a third item here — and because that dot is the label's ::after it
   lands last, after the icon, shunting it inboard by the 6px gap plus the
   dot's own 6px margin and 5px width. Exactly 17px, measured at 1500 and
   again at 1280, and it snapped back the moment a car was chosen.
   The icon claims the end of the line for itself now: the word no longer
   grows into the space, the icon takes it as margin, and the dot sits after
   the word where it sits on every other label. */
.tf-veh-lbl > span:first-child { flex: 0 1 auto; min-width: 0; }
.tf-veh-lbl > .tf-veh-qty-lbl { order: 1; margin-left: auto; }
/* The count and its icon live behind the Multi-vehicle tick box, and hidden is
   the default: one car is the ordinary booking, and a count on every row is a
   second thing to read for the sake of the booking that is not.
   Only the off state is written here. Every rule that sizes and places the
   count when it is on — the 38px slot, the stacking under 720, the icon over
   the digit — is left exactly as it was, so turning the box on restores the
   layout that was already measured rather than a second version of it.
   The bare select is named alongside the wrapper because the grid picker adds
   .tf-veh-qty-wrap only once it has attached, and a row built a moment ago has
   not been attached yet. */
body:not(.mv-on) .tf-veh-qty,
body:not(.mv-on) .tf-veh-qty-wrap,
body:not(.mv-on) .tf-veh-qty-lbl { display: none !important; }

/* The icon was never the thing out of place — the digit was. The count
   computed text-align left with 8px of padding, because #cat-transfers .field
   input sets left alignment with an id in the selector and outranks the class
   rule that meant to centre it. So the digit painted hard against the left of
   a 38px box while the icon sat in the middle of it: 7.4px apart, measured.
   Centre the digit and the two agree, with the icon left exactly as it was. */
.tf-veh-qty-lbl {
  flex: 0 0 38px;
  width: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.7;
}
/* The id is here to beat an id, not for its own sake. */
#cat-transfers .tf-veh-qty-wrap .px-input { text-align: center; }
.tf-veh-qty-lbl svg { display: block; }
/* The count stacks under the model here, so a heading beside it would point
   at nothing. A container query, matching the rule that does the stacking —
   this was a viewport one at the same 720px, and the two disagree exactly
   where it matters: at a 1280 window the panel is 632px, so the count stacked
   while the icon stayed up beside the model, 45px from the box it names. */
@container form-panel (max-width: 720px) {
  .tf-veh-qty-lbl { display: none; }
}
/* In the vehicle line the count keeps its narrow slot: the wrapper the picker
   inserts would otherwise take the width the bare select had. */
/* The count is read-only and shows one or two digits, so it needs less room
   than the typed box it replaced. */
.tf-veh-line .px-wrap { flex: 0 0 38px; width: 38px; }
/* The model takes the room; the count keeps a fixed narrow box. */
.tf-veh-item .px-wrap { flex: 1 1 auto; min-width: 0; }
.tf-veh-item .tf-veh-qty-wrap { flex: 0 0 38px; width: 38px; }
.tf-veh-line .tf-veh-qty-wrap .px-input { text-align: center; }
.tf-veh-line .px-wrap .px-input { width: 100%; }
/* The model's own combobox wrapper needs sizing for the same reason. The rule
   above it targets the <select>, which the combobox hides inside a wrapper —
   so the model had no flex basis at all, lost the row to the fixed-width count
   beside it, and rendered as "S". */
.tf-veh-item .srch-sel-wrap:not(.px-wrap) { flex: 1 1 auto; min-width: 0; }
.tf-veh-item .srch-sel-wrap:not(.px-wrap) .srch-sel-input { width: 100%; }

.field input[type="date"],
.field input[type="time"] {
  -webkit-appearance: none;
  appearance: none;
  height: auto;
  min-height: 0;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 9px 8px 8px !important;
}
.field input:not([type="checkbox"]):not([type="radio"]):focus,
.field textarea:focus,
.field select:focus {
  box-shadow: none;
  outline: none;
}
.field input::placeholder {
  font-family: 'DM Sans', sans-serif;
  font-style: italic;
  font-size: 13px;
  color: rgba(120,110,100,0.45);
}
/* Every <select> here is replaced by a text input a few frames into the load.
   The input shows its prompt as a placeholder — italic, soft, no chevron — but
   until it exists the raw <select> is on screen showing the same word as an
   ordinary selected option: full-strength near-black, with a chevron beside
   it. That is the flash. Dress the select as its own replacement so there is
   nothing left to change when the swap happens. A select carrying a real value
   is left alone, because the input shows a real value the same way.
   :has() is doing the "is the placeholder option the selected one" test; where
   it is unsupported the field simply behaves as it did before. */
.field select:not([data-no-combo]) { background-image: none; }
.field select:not([data-no-combo]):has(option[value=""]:checked) {
  font-style: italic;
  color: rgba(120,110,100,0.45);
}
html.dark-mode .field select:not([data-no-combo]):has(option[value=""]:checked) {
  color: rgba(230,225,218,0.30);
}
.field textarea::placeholder {
  font-family: 'DM Sans', sans-serif;
  font-style: italic;
  font-size: 13px;
  color: rgba(120,110,100,0.45);
}
.field textarea { resize: vertical; min-height: 80px; line-height: 1.5; text-align: justify; }
#itin-act-desc-* { text-align: justify; line-height: 1.4; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.field-row .field { margin-bottom: 0; }

/* Transfer card-based form sections */
#tf-type-body {
  transition: opacity 0.15s ease;
}
#tf-type-body.tf-fade {
  opacity: 0;
  pointer-events: none;
}
.tf-card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--card-radius);
  padding: 14px 16px 13px;
  margin-bottom: 14px;
  box-shadow: var(--card-shadow);
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
@media (min-width: 1100px) {
  .tf-card { padding: 16px 18px 15px; margin-bottom: 18px; }
  .tf-grid { gap: 16px 14px; }
}
/* Gentle lift + a gold left-edge when a field inside is focused, so the card
   you're editing is unmistakable at a glance. The inset bar avoids any layout
   shift and is clipped to the card's rounded corners. */
.tf-card:focus-within {
  border-color: var(--card-border-strong);
  box-shadow: inset 3px 0 0 0 var(--gold), var(--card-shadow-focus);
}
/* Empty required field — a quiet "still to fill" cue (gold label + small dot),
   turning the form into a live checklist without ever looking like an error. */
/* A label the input below already says — "Note" over a field reading "Add a
   note…" — is hidden. The static fields carry the attribute in their markup and
   a JS pass sets it on rows added later; this rule has to be in the head
   stylesheet either way, or the label is painted before the rule reaches it. */
.field[data-placeholder-only] > label { display: none; }

/* The "still empty, still needed" label. --gold-mid at 0.92 read 3.1:1 on
   the old translucent card and 2.9:1 on the opaque one — under AA either way.
   The full --gold at full opacity carries the same signal and passes. */
.field.is-empty > label { color: var(--label-empty, var(--gold)); opacity: 1; }
.field.is-empty > label::after {
  content: ''; display: inline-block; width: 5px; height: 5px;
  margin-left: 6px; border-radius: 50%; background: var(--gold);
  opacity: 0.8; vertical-align: middle;
}

/* Unified "+ Add" affordance — one quiet gold-text button, identical on every
   tab. No border, no empty-state labels; the goal is a clean, consistent look. */
.btn-add-row, .itin-cancel-add-btn{
  font-family: 'DM Sans', sans-serif;
  font-size: 10px; font-weight: 500; letter-spacing: 1px; text-transform: uppercase;
  color: var(--gold-mid, #b8934f);
  background: none; border: none;
  border-radius: var(--card-radius-sm);
  padding: 8px 14px; margin-top: 6px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  transition: color .15s ease, background .15s ease;
}
.btn-add-row:hover, .itin-cancel-add-btn:hover{
  color: var(--gold, #8F6D55); background: rgba(184,147,79,0.06);
}
.tf-card-title {
  font-size: 9px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--gold-ink);
  font-weight: 500;
  margin-bottom: 6px;
  padding-left: 8px;
  border-left: 1.5px solid var(--gold);
}
.tf-card-title[data-keep-title] {
  display: block;
  width: fit-content;
  font-size: 9px;
  letter-spacing: 2.6px;
  text-transform: uppercase;
  /* The heading reads as gold, but --gold is tuned as a fill and a rule, not as
     9px letterspaced caps: it measured 4.35:1 on the light card and 3.07:1 on
     the dark one, where it stayed the light gold. --gold-ink is the same colour
     held to a readable contrast on both. */
  color: var(--gold-ink, #8F6D55);
  font-weight: 600;
  background: none;
  border-left: none;
  border-bottom: none;
  border-radius: 0;
  padding: 0 0 9px 0;
  margin: 0 0 12px 0;
  opacity: 1;
}
/* Section titles — consistent across all pages */
.tf-card-title:not([data-keep-title]) {
  display: block;
  font-size: 8px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
  margin-bottom: 8px;
  padding-left: 0;
  border-left: none;
  opacity: 0.7;
}
/* Hide generic panel section titles (GUEST, SERVICES, PREFERENCES, …) globally.
   Cards already provide visual separation; field labels carry the meaning. */
.cat-section.active > .panel.form-col .panel > .panel-header,
.cat-section.active > .panel.form-col .panel > .panel-header .panel-title { display: none; }
.cat-section.active > .panel.form-col .panel > .panel-body { padding-top: 8px; }
.tf-grid {
  display: grid;
  gap: 14px 12px;
}
.tf-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* Arrival + Departure: identical 7-column layout — Date Time Flight Airport Pax Vehicle Price */
/* Vehicle carries two controls now — the model and how many of it — so it
   needs more of the row than a single select did. At 1.2fr it came out 82px
   against a 61px model plus the count beside it, and the model rendered as
   "S". The width comes off Time, Flight and Airport, which measured 20-30px
   of slack each; Date keeps enough for a full mm/dd/yyyy. */
.tf-arr-grid,
/* Reweighted once the Car cell took a count beside the model and the headings
   lost their long words. Measured at 1500 with the row filled: a date needs
   ~92px, a time ~68, a flight ~48, an airport ~118, a pax count and its caret
   ~40, the model and count together ~124, a price ~40. Airport and Car were
   the two clipping — "Zurich Airport ZRH" to "ZRI" and "V-Class" to "V-C". */
/* minmax(0, …) on every track. A grid track defaults to minmax(auto, 1fr),
   and auto floors at min-content — the native date and time inputs claim
   129px and 89px there and never yield, so at 1280 they held their full width
   while Airport, Car, Flight and the price all clipped around them. */
/* Airport and Flight changed places in the row and the weights stayed where
   they were, so Airport inherited the track cut for a flight number — 59px at
   a 1500 viewport, enough for "Zurich Airp" — while "LX 8253" sat in the 142px
   meant for an airport name.
   Re-derived from the content rather than swapped, so the row no longer
   depends on the order of its fields. Measured with every cell filled: a date
   needs 92px, a time 53, an airport name 124 ("Zurich Airport ZRH"), a flight
   number 69, a pax count and its caret 36, the model and its count 124, a
   price 41 — 539 of the 590 the row has at 1500. Equal sevenths would be 84px
   each, which Date, Airport and Car all miss, so the 51px of slack is shared
   out instead, with the larger share going to Flight: it needs the least, and
   putting the surplus there brings the two fields the desk reads together to
   132 and 89 rather than the 59 and 142 they were. */
.tf-dep-grid {
  grid-template-columns:
    minmax(0, 0.99fr) minmax(0, 0.58fr) minmax(0, 1.32fr) minmax(0, 0.89fr)
    minmax(0, 0.4fr) minmax(0, 1.29fr) minmax(0, 0.43fr);
  margin-top: 20px;
}
/* On a narrow panel the labels tighten before the row gives up. Measured with
   labels held to one line, the seven-column transfer row starts clipping
   Airport and Vehicle below a 620px panel — and a 1280 viewport puts the panel
   at 632, which is a 12px margin and far too thin to trust across a font
   change. Dropping a little tracking and half a point of size buys the room
   the row needs, and only where it is needed. */
@container form-panel (max-width: 720px) {
  /* Every table tightens together. Listing only the transfer and restaurant
     grids here left the massage labels at 10px/2px while those two dropped to
     9px/1.1px — the same label, two sizes, one tab apart, on any panel under
     720px. Naming grids kept missing one (the Therapist/Notes card is neither
     a massage row nor a transfer grid), so this takes every field label in the
     form column: whatever the tables do at a width, they do as a set. */
  .cat-section.active > .panel.form-col .field label { font-size: 9px; letter-spacing: 1.1px; }
  .tf-arr-grid, .tf-dep-grid, .rr-grid, .massage-row { column-gap: 9px; }
  /* The count drops under the model rather than sharing the cell with it.
     Below this width the seven-column row has no room for both side by side —
     at a 1280 viewport the cell is 91px against a 61px model and a count
     beside it, and the model rendered as "V-Cla". Stacking keeps the model
     whole and costs one row of height on a panel that is already scrolling. */
  /* The wrap has to happen inside the item — the model and its count are both
     children of that, not of the line. */
  .tf-veh-line, .tf-veh-item { flex-wrap: wrap; row-gap: 6px; align-items: flex-start; }
  .tf-veh-item { flex: 1 1 100%; }
  /* The model used to be the only wrapper here that was not a grid box, so
     :not(.px-wrap) found it. It is a grid box itself now — a three-option list
     is exactly what the grid is for — and the selector stopped matching, which
     quietly un-stacked the cell: at a 1280 viewport the model was back beside
     the count at 74px and clipping again. The count is the one to name. */
  .tf-veh-item .px-wrap:not(.tf-veh-qty-wrap),
  .tf-veh-item .srch-sel-wrap:not(.px-wrap) { flex: 1 1 100%; }
  /* The cell is taller than its neighbours once it stacks, so the row hangs
     its cells from the top and every label stays on one line. */
  .tf-arr-grid, .tf-dep-grid { align-items: start; }
  /* And it no longer needs width for a count beside the model, so the surplus
     goes where the row was short: measured at 1280, Date fell 10px shy of its
     own value and Flight and Airport 2px each while Car sat on 57px of slack. */
  .tf-arr-grid, .tf-dep-grid {
    grid-template-columns:
      minmax(0, 0.94fr) minmax(0, 0.54fr) minmax(0, 1.26fr) minmax(0, 0.79fr)
      minmax(0, 0.36fr) minmax(0, 0.62fr) minmax(0, 0.41fr);
  }
}
/* 540, not 680. Measured by forcing the seven-column layout and narrowing the
   panel: nothing clips until 520, where Airport and Vehicle lose their labels.
   680 was restacking a row that still had 140px of room in it — and because
   this is a container query on the form panel, the panel is 632px at a 1280
   viewport and 675px at 1366, so both of those landed under the old threshold.
   A 1920 Windows laptop at 150% scaling is exactly 1280, which is how a full
   desk ended up showing the narrow layout. */
/* 616, not 540. The old threshold was measured against the old weights, where
   Airport held the flight-number track and clipped from the first pixel, so
   "nothing clips until 520" was measuring a row that was already broken.
   Weighted from the content, the seven columns need 476px of fields and 54 of
   gaps; the panel is 70px wider than the grid inside it, so the row runs out
   at a 616px panel — and at a 1200 viewport the panel is 578 and the row was
   nine pixels short, taken out of Date, Time, Airport and Car at once. It
   folds to the three-column card at 616 instead, where every field is proven.
   A 1280 viewport is a 636px panel and still gets the row, which is the case
   the old comment was protecting: a 1920 Windows laptop at 150% scaling. */
@container form-panel (max-width: 616px) {
  /* minmax(0, …), not a bare 1fr. A bare 1fr is minmax(auto, 1fr) and auto
     floors at min-content, which the native date and time inputs set at 152px
     and 103px and never give up — so the three "equal" columns measured
     152/103/39 on a 390 phone, and the car model was left 39px to render
     "V-Class" in. The item needs min-width:0 too, or it overflows the track
     the same way. */
  /* Not equal thirds: the three columns carry different jobs. Column one holds
     Date, whose empty mm/dd/yyyy wants 117px — the widest thing in the card,
     and wider empty than filled. Column two holds Time at 63, column three
     Flight at 72, Pax at 32 and CHF at 47. Equal thirds gave Date 98 and it
     clipped mid-placeholder while Time sat on 35px of slack. */
  .tf-arr-grid,
  .tf-dep-grid {
    grid-template-columns: minmax(0, 1.45fr) minmax(0, 0.85fr) minmax(0, 1fr);
  }
  .tf-arr-grid > .field,
  .tf-dep-grid > .field { min-width: 0; }
  /* Seven fields into three columns leaves one over, and it was CHF: alone on
     a fourth row with two empty cells beside it. Airport and Car take two
     thirds each, so the rows fill instead — Date/Time/Flight, Airport/Pax,
     Car/CHF. Airport (3) and Car (6) are the cells whose contents are long,
     "Zurich Airport ZRH" and "Mercedes V-Class". */
  .tf-arr-grid > .field:nth-child(3),
  .tf-dep-grid > .field:nth-child(3),
  .tf-arr-grid > .field:nth-child(6),
  .tf-dep-grid > .field:nth-child(6) { grid-column: span 2; }
  /* Flight rides on the first row here, ahead of Airport, though the desk
     reads Airport first everywhere else. Not a preference — arithmetic. Seven
     fields and two double-width cells are nine column-units, which fills three
     rows of three exactly, but only while the third cell is a narrow one: a
     double-width cell cannot begin in the last column, so Airport placed third
     wraps and leaves the gap that puts CHF alone on a fourth row. On a phone
     the two are on separate rows in any case, so the order costs nothing that
     the fourth row did not cost more. */
  .tf-arr-grid > .field:nth-child(1), .tf-dep-grid > .field:nth-child(1) { order: 1; }
  .tf-arr-grid > .field:nth-child(2), .tf-dep-grid > .field:nth-child(2) { order: 2; }
  .tf-arr-grid > .field:nth-child(4), .tf-dep-grid > .field:nth-child(4) { order: 3; }
  .tf-arr-grid > .field:nth-child(3), .tf-dep-grid > .field:nth-child(3) { order: 4; }
  .tf-arr-grid > .field:nth-child(5), .tf-dep-grid > .field:nth-child(5) { order: 5; }
  .tf-arr-grid > .field:nth-child(6), .tf-dep-grid > .field:nth-child(6) { order: 6; }
  .tf-arr-grid > .field:nth-child(7), .tf-dep-grid > .field:nth-child(7) { order: 7; }
  /* With two thirds to itself the vehicle cell fits the model and the count
     side by side again — about 105px of content in roughly 208 — so it stops
     stacking, the row stops being ragged, and the icon has a count to sit
     over again. These outrank the 720px rules by one class each. */
  .tf-arr-grid .tf-veh-item,
  .tf-dep-grid .tf-veh-item { flex: 1 1 auto; }
  .tf-arr-grid .tf-veh-item .px-wrap:not(.tf-veh-qty-wrap),
  .tf-dep-grid .tf-veh-item .px-wrap:not(.tf-veh-qty-wrap),
  .tf-arr-grid .tf-veh-item .srch-sel-wrap:not(.px-wrap),
  .tf-dep-grid .tf-veh-item .srch-sel-wrap:not(.px-wrap) { flex: 1 1 auto; }
  .tf-arr-grid .tf-veh-qty-lbl,
  .tf-dep-grid .tf-veh-qty-lbl { display: flex; }
}
.tf-card .field { margin-bottom: 0; }
/* tf-note-field: box style — no underline, clearly visible input/textarea/select */
.tf-note-field::after { display: none; }
.tf-note-field input,
.tf-note-field textarea,
.tf-note-field select {
  background: var(--field-bg) !important;
  border: 1px solid var(--field-border) !important;
  border-radius: var(--field-radius) !important;
  padding: 9px 12px !important;
  width: 100%;
  box-sizing: border-box;
  color: var(--text) !important;
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  resize: vertical;
}
.tf-note-field select { padding-right: 32px !important; -webkit-appearance: auto; appearance: auto; }
.tf-note-field:focus-within input,
.tf-note-field:focus-within textarea,
.tf-note-field:focus-within select { background: #fff !important; border-color: var(--gold) !important; outline: none; }
.dark-mode .tf-note-field:focus-within input,
.dark-mode .tf-note-field:focus-within textarea,
.dark-mode .tf-note-field:focus-within select { background: rgba(255,255,255,0.12) !important; }
/* More breathing room between the separator/previous card and the card title */
.tf-card { margin-top: 8px; }
/* Dense mode: compact vertical rhythm when form overflows (multiple services) */
.form-dense .field { margin-bottom: 8px; }
.form-dense .field input:not([type="checkbox"]):not([type="radio"]),
.form-dense .field textarea,
.form-dense .field select { padding: 7px 10px !important; }
.form-dense .field select { padding: 7px 30px 7px 10px !important; }
.form-dense .field input[type="date"],
.form-dense .field input[type="time"] { padding: 7px 10px !important; }
.form-dense .tf-grid { gap: 8px 10px; }
#cat-transfers .field label { text-align: left; }
#cat-transfers .field input,
#cat-transfers .field select,
#cat-transfers .field textarea { text-align: left; }

/* ── Liquid glass form panel ──────────────────────────────────────────── */
/* The form-col panel-body is a flex column — stop any child from shrinking
   below its content height (which would let cards collapse and overlap the
   card above when the form grows). Content should scroll, never shrink. */
.cat-section.active > .panel.form-col .panel-body > * {
  flex-shrink: 0 !important;
}
/* Unified card system — every tab's tf-cards share the same subtle
   bordered container, so Transfers · Restaurants · Massages · Itinerary
   all read as one coherent system. */
.cat-section.active > .panel.form-col .tf-card {
  /* The card tokens, not a second gradient of its own. This rule was painting
     a translucent white over the ground and calling it a card, so --card-bg
     never actually reached the form column: the cards read as a tint of the
     page rather than as the colour the token says they are, which is the
     off-colour that shows up worst on a phone. Both themes resolve through
     the same two tokens now. */
  background: var(--card-bg) !important;
  box-shadow: var(--card-shadow) !important;
  /* --card-border, not --border: the cold grey UI line made the form cards the
     only ones in the app outside the warm card system the dashboard uses.
     Both themes redefine the token, so this follows dark automatically. */
  border: 1px solid var(--card-border) !important;
  border-radius: var(--card-radius) !important;
  padding: 17px 19px 17px !important;
  margin-top: 0 !important;
  margin-bottom: 14px !important;
  position: relative;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
/* Active card accent — a gold gradient line gently sweeps in along the bottom
   border when a field inside the card gains focus. Subtle, not distracting. */
.cat-section.active > .panel.form-col .tf-card::after {
  content: '';
  position: absolute;
  left: 16px; right: 16px; bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  transform: scaleX(0);
  transform-origin: center;
  opacity: 0;
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.35s ease;
  pointer-events: none;
}
.cat-section.active > .panel.form-col .tf-card:focus-within {
  border-color: var(--card-border-strong) !important;
  box-shadow: 0 2px 4px rgba(35,25,12,0.04), 0 16px 36px rgba(143,109,85,0.13), 0 0 0 1px rgba(201,169,110,0.10) !important;
}
.cat-section.active > .panel.form-col .tf-card:focus-within::after {
  transform: scaleX(1);
  opacity: 0.85;
}
/* Guest and empty vehicles cards are borderless — no accent line */
.cat-section.active > .panel.form-col .tf-card.tf-guest-card::after,
.cat-section.active > .panel.form-col #tf-vehicles-card::after { display: none; }
/* Guest field row (Name / Protel / Phone) stays borderless & flush at the top.
   Fixed min-height so the first bordered card sits at the SAME Y on every tab —
   no jump when switching between Transfers · Restaurants · Massages · Itinerary. */
.cat-section.active > .panel.form-col .tf-card.tf-guest-card,
.cat-section.active > .panel.form-col #tf-vehicles-card {
  background: transparent !important;
  box-shadow: none !important;
}
.cat-section.active > .panel.form-col .tf-card.tf-guest-card {
  border: none !important;
  padding: 0 18px 4px !important;
  margin-bottom: 20px !important;
  min-height: 0 !important;
  box-sizing: border-box !important;
}
/* ── Guest line — one unified identity line you type straight into (name · Protel
   ref · phone). The search icon opens the saved-guest picker. Same on every tab.
   Uses the app's own theme vars so light/dark are handled automatically. */
.cd-guest-line { display: block; padding: 18px 0 0; }
.cd-guest-fields { display: flex; align-items: center; flex-wrap: nowrap; gap: 0 2px; border-bottom: 1px solid var(--border); padding-bottom: 11px; transition: border-color .15s ease; }
.cd-guest-fields:focus-within { border-bottom-color: var(--gold-mid); }
.cd-gf { border: none; background: transparent; font-family: inherit; color: var(--text); padding: 2px 0; outline: none; min-width: 0; field-sizing: content; }
.cd-gf::placeholder { color: var(--text); opacity: 0.34; }
/* Stable left cluster — each field hugs its content and never grows, so name /
   Protel / phone hold a FIXED position whether or not the history appears. They
   shrink (never wrap) so a narrow split still holds one row. */
.cd-gf-name   { font-size: 15px; flex: 0 1 auto; min-width: 40px; }
.cd-gf-protel { font-size: 15px; opacity: 0.8; flex: 0 3 auto; font-variant-numeric: tabular-nums; }
.cd-gf-phone  { font-size: 15px; opacity: 0.8; flex: 0 3 auto; font-variant-numeric: tabular-nums; }
.cd-gf-protel:focus, .cd-gf-phone:focus { opacity: 1; }
.cd-gf-sep { flex: 0 0 auto; opacity: 0.4; font-size: 11px; padding: 0 13px; color: var(--text); user-select: none; }
.cd-guest-search { flex: 0 0 auto; margin-left: 12px; background: none; border: none; color: var(--gold-mid); opacity: 0.7; cursor: pointer; padding: 3px 4px; display: inline-flex; align-items: center; }
.cd-guest-search:hover { opacity: 1; }
.cd-guest-search:focus-visible { outline: 2px solid var(--gold-mid); outline-offset: 2px; border-radius: 4px; }
@media (max-width: 640px) { .cd-guest-fields { flex-wrap: wrap; } .cd-gf-protel, .cd-gf-phone { flex: 1 1 auto; } }
/* Make the guest card a query container so the line responds to the COLUMN width
   (not the viewport) — in a narrow split window it shrinks the type a touch so the
   whole line still fits on one row instead of clipping the phone. */
.cat-section.active > .panel.form-col .tf-card.tf-guest-card { container: guestcard / inline-size; }
@container guestcard (max-width: 480px) {
  .cd-gf-name, .cd-gf-protel, .cd-gf-phone { font-size: 13.5px; }
  .cd-gf-sep { padding: 0 5px; }
}
@container guestcard (max-width: 370px) {
  .cd-gf-name, .cd-gf-protel, .cd-gf-phone { font-size: 12.5px; }
  .cd-gf-sep { padding: 0 4px; }
}
/* Guest history — a reserved area pinned to the far right. It is ALWAYS present
   (blank until a returning guest is found), so the identity fields to its left
   never move when it appears. It hugs the right edge with a divider, ellipsises if
   tight, and is hidden entirely in a split window. */
.cd-guest-memory {
  flex: 0 6 auto; min-width: 0; margin-left: auto;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 12px; font-style: italic; color: #2E2E30; opacity: 0.92;
  font-variant-numeric: tabular-nums;
}
html.dark-mode .cd-guest-memory { color: #C7C2BB; }
/* What is already arranged for the visit in front of you — a quiet line under
   the guest fields, not another chip competing with them. */
.cd-stay-line {
  margin: 9px 0 0; font-size: 11.5px; letter-spacing: 0.2px;
  color: var(--gold-mid, #8F6D55); opacity: 0.92; cursor: pointer;
  display: inline-block; max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cd-stay-line:hover { opacity: 1; text-decoration: underline; text-underline-offset: 3px; }
.cd-stay-line:focus-visible { outline: 2px solid var(--gold-mid); outline-offset: 2px; border-radius: 3px; }
html.dark-mode .cd-stay-line { color: #C9A96E; }
@media (max-width: 600px) { .cd-stay-line { white-space: normal; } }
/* Divider + tappable affordance appear only once there's history text. */
.cd-guest-fields.has-memory .cd-guest-memory { padding-left: 16px; border-left: 1px solid var(--border); cursor: pointer; }
.cd-guest-fields.has-memory .cd-guest-memory:hover { text-decoration: underline; text-underline-offset: 3px; opacity: 1; }
.cd-guest-fields.has-memory .cd-guest-memory:focus-visible { outline: 2px solid var(--gold-mid); outline-offset: 2px; border-radius: 3px; }
/* The note used to be hidden below 600px to stop it eating the identity
   fields it shared a line with. It has its own line now, so it can stay —
   as a full line down to 430px, and as a count badge below that. */
/* Guest now lives in the in-form guest line, so the tab-bar guest card is hidden.
   Collapse the space the (absolutely-positioned) card reserved so the tabs slide
   left. The multi-guest "+" workspace button (far right) is unaffected. */
.tab-guest-card { display: none !important; }
.cat-tabs-group { padding-left: 16px !important; }
/* Shared vehicles container is empty unless multi-car is on — no empty box */
.cat-section.active > .panel.form-col #tf-vehicles-card {
  border: none !important;
  padding: 0 !important;
  margin-bottom: 0 !important;
}
/* Transfers journey lives in this wrapper — zero its stray sibling margin so the
   first bordered card sits at the same gap below the guest row as every other tab */
.cat-section.active > .panel.form-col #tf-type-body {
  margin-top: 0 !important;
}
/* Visible section titles (ROUND TRIP, DEPARTURE) get breathing room above */
.cat-section.active > .panel.form-col .tf-card-title[data-keep-title] {
  padding-top: 8px;
  margin-bottom: 6px;
}
#itin-rows > [id^="itin-block-"] {
  background: transparent !important;
  border: none !important;
}
.itin-block-header {
  background: rgba(143,109,85,0.05) !important;
}
/* Active panel: inherit base field styles, just ensure no regressions */
.cat-section.active > .panel.form-col .field input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.cat-section.active > .panel.form-col .field textarea {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 9px 8px 8px !important;
}
.cat-section.active > .panel.form-col .field select {
  background-color: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 9px 28px 8px 8px !important;
}
.cat-section.active > .panel.form-col .field input[type="date"],
.cat-section.active > .panel.form-col .field input[type="time"] {
  -webkit-appearance: none;
  appearance: none;
  height: auto;
  min-height: 0;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 9px 8px 8px !important;
}
.cat-section.active > .panel.form-col .field input:focus,
.cat-section.active > .panel.form-col .field textarea:focus,
.cat-section.active > .panel.form-col .field select:focus {
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
}

@media (max-width: 1200px) {
}

/* ── Massage row: card layout on mobile ── */
@media (max-width: 600px) {

  .massage-row {
    display: grid;
    grid-template-columns: minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);
    grid-template-rows: auto auto;
    gap: 10px 12px;
    margin-bottom: 0;
    /* A row, not a card. This carried its own --panel-bg, border and radius
       from when the massage rows had no card around them; the .tf-card above
       is that card now, and in dark mode --panel-bg is a near-black, which is
       the black box that showed up behind the table. Neither the transfer nor
       the restaurant rows nest a card inside a card, and these should not
       either. The top padding stays as the strip the absolute × sits in,
       minus the card padding it used to include. */
    padding: 12px 0;
    background: transparent;
    border: none;
    border-radius: 0;
    position: relative;
    width: 100%;
    box-sizing: border-box;
  }

  /* Service: spans first 2 cols, row 1 */
  .massage-row > .field:nth-child(1) { grid-column: 1 / span 2; grid-row: 1; min-width: 0; }
  /* Date: col 1, row 2 */
  .massage-row > .field:nth-child(2) { grid-column: 1; grid-row: 2; min-width: 0; }
  /* Time: col 2, row 2 */
  .massage-row > .field:nth-child(3) { grid-column: 2; grid-row: 2; min-width: 0; }
  /* Duration: col 3, row 1 — sits beside Service */
  .massage-row > .field:nth-child(4) { grid-column: 3; grid-row: 1; min-width: 0; }
  /* Price: col 3, row 2 */
  .massage-row > .field:nth-child(5) { grid-column: 3; grid-row: 2; min-width: 0; }

  /* × remove button. It used to sit in a 38px strip reserved above the fields,
     which only existed because the row was drawn as a card. With the card gone
     the strip is dead space, so the button moves into a right-hand gutter and
     centres against the row — no vertical cost, and nothing to overlap.
     The gutter is set through #massage-rows so it outranks the
     .massage-row:first-of-type rule that zeroes padding on the first row. */
  #massage-rows .massage-row { padding-right: 34px; }
  .massage-row > .btn-remove-row {
    position: absolute;
    top: 50%; right: 0;
    transform: translateY(-50%);
    width: 28px; height: 28px;
    min-width: 28px;
  }

  /* Taller inputs in the card */
  .massage-row input,
  .massage-row select {
    height: 42px;
    min-height: 42px;
    font-size: 14px !important;
    width: 100%;
    box-sizing: border-box;
  }

  /* The ::before labels that used to live here are gone. They existed because
     the massage row had no labels of its own and the column header was hidden
     on a phone; the fields carry real <label>s now, so these drew every one of
     them twice. */
}

.form-section-sep {
  height: 1px;
  background: var(--border);
  margin: 6px 0;
}

/* ── Draggable itinerary blocks ── */
/* The fill, border-left and radius that used to be declared here never
   rendered: the rule further up sets background and border to none with
   !important, so measured, a block is transparent with no border in both
   themes. Dropping them leaves what actually applies, rather than four
   declarations that describe a card this has not been for some time. */
#itin-rows > [id^="itin-block-"] {
  transition: opacity 0.2s, background-color 0.2s, border-left-color 0.35s ease;
  position: relative;
  border-bottom: 0.5px solid rgba(180,155,115,0.07);
  margin-bottom: 8px;
  overflow: hidden;
}
#itin-rows > [id^="itin-block-"]:last-child { border-bottom: none; }
/* Itinerary entries */
#itin-rows > [id^="itin-block-"] .field { gap: 5px; margin-bottom: 12px; }
/* The shared label ramp: every other tab draws a field label at 10px / 2px /
   weight 500 through .field label, and these were the one set still at 9px and
   weight 400 in a hardcoded grey — visibly lighter than the same label one tab
   over. Only the layout bits stay local. */
#itin-rows > [id^="itin-block-"] .field label {
  display: block;
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: visible;
}
#itin-rows > [id^="itin-block-"] > div[style*="padding"] { padding: 8px 10px !important; }
/* Responsive grid for itin block fields — auto-fill adapts to panel width */
/* ── Itin block field overrides — tighter than global .field ── */
.itin-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px 12px; }
.itin-grid .field { margin-bottom: 0; gap: 2px; }
.itin-grid .field label {
  font-size: 8px;
  letter-spacing: 2px;
  color: var(--muted);
  opacity: 0.7;
}
.itin-grid .field:focus-within label { opacity: 1; color: var(--gold-mid); }
.itin-full { grid-column: 1 / -1; }
/* ── itin block inner padding ───────────────── */
.itin-block-body { padding: 8px 12px 10px; }
/* ── Activity 4-col row ──────────────────────── */
.itin-act-row { display: grid; grid-template-columns: 1.9fr 0.9fr 0.9fr 1fr 1fr; gap: 8px 12px; align-items: end; }
/* A transfer block has no name cell to carry the wide first column, and it now
   has a flight number that must not wrap: five even-ish columns instead of one
   wide one and four narrow. */
.itin-act-row-tf { grid-template-columns: 0.85fr 1.15fr 1.1fr 0.6fr 0.9fr; }
.itin-act-row .itin-act-name-cell { min-width: 0; }
.itin-act-row .field { margin-bottom: 0; gap: 2px; }
.itin-act-row .field label { font-size: 8px; letter-spacing: 2px; color: var(--muted); opacity: 0.7; }
.itin-act-row .field:focus-within label { opacity: 1; color: var(--gold-mid); }
/* ── More toggle row ─────────────────────────── */
.itin-more-row { margin-top: 6px; display: flex; justify-content: flex-end; }
/* ── More expanded fields grid ───────────────── */
.itin-more-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; margin-top: 8px; border-top: 1px solid var(--border); padding-top: 8px; }
.itin-more-grid .field { margin-bottom: 0; gap: 2px; }
.itin-more-grid .field label { font-size: 8px; letter-spacing: 2px; color: var(--muted); opacity: 0.7; }
.itin-more-grid .field:focus-within label { opacity: 1; color: var(--gold-mid); }
.itin-more-grid .itin-full { grid-column: 1 / -1; }
/* ── Reflow on form-panel width (split / vertical / dragged-narrow) ── */
@container form-panel (max-width: 680px) {
  .itin-act-row { grid-template-columns: 1fr 1fr; }
  .itin-act-row .itin-act-name-cell { grid-column: 1 / -1; }  /* Service on its own line */
}
@container form-panel (max-width: 420px) {
  .itin-act-row { grid-template-columns: 1fr; }
  .itin-act-row .itin-act-name-cell { grid-column: 1; }
  .itin-more-grid { grid-template-columns: 1fr; }
}
@supports not (container-type: inline-size) {
  @media (max-width: 680px) {
    .itin-act-row { grid-template-columns: 1fr 1fr; }
    .itin-act-row .itin-act-name-cell { grid-column: 1 / -1; }
  }
  @media (max-width: 420px) { .itin-act-row, .itin-more-grid { grid-template-columns: 1fr; } }
}
/* Service picker modal (bottom-sheet multi-select) */
/* ── Service picker dropdown (anchored to tab button) ── */
.svc-picker-dd {
  position:fixed;z-index:10300;display:none;
  /* Matches the app header/tab bar: warm near-black glass, champagne-gold accent, cream labels */
  --sp-accent:201,169,110; --sp-accent-bright:232,204,128; --sp-text:248,244,240; --sp-ink:20,18,15;
  --sp-font:'Jost','DM Sans',sans-serif;
  width:660px;max-width:calc(100vw - 24px);
  max-height:calc(100vh - 88px);
  background: var(--header-bg, #0F0E0C);
  background:
    linear-gradient(180deg, rgba(0,0,0,0.12) 0%, rgba(0,0,0,0) 32%, rgba(0,0,0,0.16) 100%),
    color-mix(in srgb, var(--header-bg, #0F0E0C) 95%, transparent);
  backdrop-filter: blur(26px) saturate(1.25);
  -webkit-backdrop-filter: blur(26px) saturate(1.25);
  border:1px solid rgba(201,169,110,0.18);
  border-top:1px solid rgba(201,169,110,0.45);
  border-radius:0 0 16px 16px;
  box-shadow:0 24px 70px rgba(0,0,0,0.60),0 6px 20px rgba(0,0,0,0.30),0 0 18px rgba(201,169,110,0.10),inset 0 1px 0 rgba(232,204,128,0.16);
  flex-direction:column;overflow:hidden;
}
.svc-picker-head {
  padding:11px 16px 11px;border-bottom:1px solid rgba(255,255,255,0.08);flex-shrink:0;
}
.svc-picker-title {
  padding:13px 16px 10px;flex-shrink:0;
  border-bottom:1px solid rgba(255,255,255,0.08);
  font-size:11.5px;font-weight:400;letter-spacing:1.6px;text-transform:uppercase;
  color:rgba(var(--sp-text),0.62);margin:0;
}
.svc-picker-search {
  width:100%;box-sizing:border-box;padding:9px 12px;font-size:14px;font-weight:300;
  border:1px solid rgba(255,255,255,0.12);border-radius:9px;
  background:rgba(255,255,255,0.05);color:rgba(var(--sp-text),0.92);font-family:inherit;outline:none;
  transition:border-color 0.15s, background 0.15s;
}
.svc-picker-search:focus { border-color:rgba(var(--sp-accent-bright),0.55);background:rgba(255,255,255,0.08); }
/* Two-pane body: category rail (left) + activity list (right) */
.svc-picker-body { display:flex; flex:1; min-height:0; overflow:hidden; }
.svc-picker-right { flex:1; min-width:0; display:flex; flex-direction:column; min-height:0; overflow:hidden; }
/* Category rail — every category always visible down the left, no scrolling off-screen */
.svc-picker-cats { display:none; flex:0 0 216px; flex-direction:column; gap:2px; overflow-y:auto; padding:9px 9px 9px 11px; border-right:1px solid rgba(255,255,255,0.08); background:rgba(0,0,0,0.12); scrollbar-width:thin; scrollbar-color:rgba(255,255,255,0.18) transparent; }
.svc-picker-cats::-webkit-scrollbar { width:5px; }
.svc-picker-cats::-webkit-scrollbar-thumb { background:rgba(255,255,255,0.16); border-radius:3px; }
.svc-picker-cat-head { font-family:'DM Sans',sans-serif; font-size:10px; font-weight:400; letter-spacing:1.1px; text-transform:uppercase; color:rgba(var(--sp-text),0.38); padding:9px 10px 4px; }
.svc-picker-cat-head:first-child { padding-top:2px; }
.svc-picker-cat { display:flex; align-items:center; justify-content:space-between; gap:7px; width:100%; box-sizing:border-box; text-align:left; font-family:'DM Sans',sans-serif; font-size:12.5px; font-weight:300; letter-spacing:0.2px; color:rgba(var(--sp-text),0.72); background:transparent; border:1px solid transparent; border-radius:9px; padding:7px 10px; cursor:pointer; white-space:nowrap; line-height:1.3; transition:color .15s, background .15s, border-color .15s; }
.svc-picker-cat-lbl { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.svc-picker-cat:hover { color:#fff; background:rgba(255,255,255,0.06); }
.svc-picker-cat.active { color:rgb(var(--sp-text)); background:rgba(var(--sp-accent),0.18); border-color:rgba(var(--sp-accent-bright),0.6); font-weight:400; box-shadow:0 0 12px rgba(201,169,110,0.20),inset 0 1px 0 rgba(255,255,255,0.08); }
.svc-picker-cat .n { flex:0 0 auto; opacity:0.55; font-size:11px; font-variant-numeric:tabular-nums; }
.svc-picker-cat.active .n { opacity:0.9; }
.svc-picker-list { flex:1;min-width:0;overflow-y:auto;padding:3px 0 4px;min-height:80px; }
@media (max-width:600px){ .svc-picker-cats { flex-basis:150px; } }
.svc-picker-custom-btn {
  display:flex;align-items:center;gap:5px;
  padding:9px 16px 10px;cursor:pointer;
  font-size:11.5px;font-weight:300;font-style:italic;
  color:rgba(var(--sp-text),0.72);letter-spacing:0.01em;
  border-bottom:1px solid rgba(255,255,255,0.07);
  transition:color 0.12s,background 0.1s;
}
.svc-picker-custom-btn:hover { color:#fff;background:rgba(255,255,255,0.05); }
.svc-picker-add-svc { color:rgba(var(--sp-text),0.9) !important; border-bottom:none; border-top:1px solid rgba(255,255,255,0.07); font-style:normal; }
.svc-picker-add-svc em { font-style:italic; font-weight:400; }
.svc-picker-group {
  padding:9px 16px 3px;font-size:9.5px;letter-spacing:1.6px;
  text-transform:uppercase;color:rgba(var(--sp-text),0.82);font-weight:400;
}
.svc-picker-item {
  display:flex;align-items:center;gap:10px;padding:7px 16px;cursor:pointer;
  transition:background 0.1s;
}
.svc-picker-item:hover { background:rgba(255,255,255,0.06); }
.svc-picker-item:has(input:checked) { background:rgba(var(--sp-accent),0.12); }
.svc-picker-item input[type="checkbox"] {
  accent-color:#C9A96E;width:16px;height:16px;flex-shrink:0;cursor:pointer;margin:0;
}
.svc-picker-item-label { flex:1;min-width:0; }
.svc-picker-item-name { display:block;font-size:12px;color:rgba(var(--sp-text),0.82);line-height:1.3;font-weight:300; }
.svc-picker-item-season { display:inline-block; margin-left:7px; font-size:9px; font-weight:400; letter-spacing:0.7px; text-transform:uppercase; line-height:1.5; padding:0 5px; border-radius:5px; vertical-align:1px; border:1px solid transparent; }
.svc-picker-item-season.is-winter { color:rgba(150,196,228,0.92); background:rgba(120,176,214,0.14); border-color:rgba(120,176,214,0.30); }
.svc-picker-item-season.is-summer { color:rgba(224,188,124,0.92); background:rgba(201,169,110,0.14); border-color:rgba(201,169,110,0.32); }
.svc-picker-item-season.is-shoulder { color:rgba(var(--sp-text),0.50); background:rgba(255,255,255,0.05); border-color:rgba(255,255,255,0.12); }
.svc-picker-item-season.is-year-round { color:rgba(var(--sp-text),0.42); background:transparent; border-color:rgba(255,255,255,0.10); }
.svc-picker-item-sub {
  display:block;font-size:10.5px;color:rgba(var(--sp-text),0.42);margin-top:2px;font-weight:300;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.svc-picker-item-added {
  font-size:9.5px;letter-spacing:0.8px;text-transform:uppercase;color:rgba(var(--sp-text),0.7);
  opacity:0.85;flex-shrink:0;font-weight:400;
}
.svc-picker-item--used { opacity:0.42; }
.svc-picker-item--used .svc-picker-item-name { text-decoration:line-through; }
.svc-picker-footer {
  padding:10px 14px;border-top:1px solid rgba(255,255,255,0.08);
  background:rgba(0,0,0,0.18);display:flex;gap:8px;align-items:center;flex-shrink:0;
}
.svc-picker-cancel {
  flex-shrink:0;padding:9px 14px;font-size:11px;font-weight:400;letter-spacing:0.6px;
  background:transparent;border:1px solid rgba(255,255,255,0.14);border-radius:8px;
  cursor:pointer;color:rgba(var(--sp-text),0.5);font-family:'DM Sans',sans-serif;transition:color 0.12s,border-color 0.12s;
}
.svc-picker-cancel:hover { color:rgba(var(--sp-text),0.85);border-color:rgba(255,255,255,0.24); }
.svc-picker-count {
  flex-shrink:0;font-family:'DM Sans',sans-serif;font-size:12px;font-weight:400;
  letter-spacing:0.4px;color:rgba(var(--sp-text),0.86);white-space:nowrap;padding:0 2px;
  min-width:0;font-variant-numeric:tabular-nums;
}
.svc-picker-confirm {
  flex:1;padding:10px 12px;font-size:11px;font-weight:400;letter-spacing:1.4px;
  text-transform:uppercase;background:rgba(var(--sp-accent),0.30);border:1px solid rgba(var(--sp-accent-bright),0.6);border-radius:8px;
  cursor:pointer;color:rgb(var(--sp-text));font-family:var(--sp-font);transition:background 0.15s,border-color 0.15s,opacity 0.15s;box-shadow:0 0 16px rgba(201,169,110,0.16),inset 0 1px 0 rgba(255,255,255,0.14);
}
.svc-picker-confirm:hover:not(:disabled) { background:rgba(var(--sp-accent),0.48);border-color:rgba(var(--sp-accent-bright),0.82); }
.svc-picker-confirm:disabled { opacity:0.32;cursor:default; }
.svc-picker-empty { padding:24px 14px;text-align:center;font-size:12.5px;color:rgba(var(--sp-text),0.35);font-style:italic; }
/* Force liquid-glass styling regardless of light/dark mode — white labels, weight <= 400 */
.svc-picker-title { color: rgba(var(--sp-text),0.62) !important; font-family: 'DM Sans',sans-serif !important; font-size: 11.5px !important; font-weight: 400 !important; letter-spacing: 1.6px !important; text-transform: uppercase !important; margin: 0 !important; }
.svc-picker-search { background: rgba(255,255,255,0.05) !important; border-color: rgba(255,255,255,0.12) !important; color: rgba(var(--sp-text),0.92) !important; font-family: 'DM Sans',sans-serif !important; font-weight: 300 !important; }
.svc-picker-search::placeholder { color: rgba(255,255,255,0.32) !important; }
.svc-picker-search:focus { border-color: rgba(var(--sp-accent-bright),0.55) !important; background: rgba(255,255,255,0.08) !important; }
.svc-picker-group { color: rgba(var(--sp-text),0.82) !important; font-family: 'DM Sans',sans-serif !important; font-size: 9.5px !important; font-weight: 400 !important; letter-spacing: 1.6px !important; }
.svc-picker-item { padding: 10px 16px !important; }
.svc-picker-item-name { color: rgba(var(--sp-text),0.85) !important; font-family: 'DM Sans',sans-serif !important; font-size: 12px !important; font-weight: 300 !important; }
.svc-picker-item-sub { color: rgba(var(--sp-text),0.42) !important; font-family: 'DM Sans',sans-serif !important; font-size: 10.5px !important; font-weight: 300 !important; }
.svc-picker-item:hover { background: rgba(255,255,255,0.06) !important; }
.svc-picker-item:hover .svc-picker-item-name { color: #fff !important; }
.svc-picker-item:has(input:checked) { background: rgba(var(--sp-accent),0.12) !important; }
.svc-picker-item:has(input:checked) .svc-picker-item-name { color: #fff !important; }
.svc-picker-footer { background: rgba(0,0,0,0.18) !important; border-top-color: rgba(255,255,255,0.08) !important; }
.svc-picker-cancel { color: rgba(var(--sp-text),0.5) !important; border-color: rgba(255,255,255,0.14) !important; font-family: 'DM Sans',sans-serif !important; font-size: 11px !important; font-weight: 400 !important; letter-spacing: 0.6px !important; }
.svc-picker-cancel:hover { color: rgba(var(--sp-text),0.85) !important; }
.svc-picker-confirm { font-family: 'DM Sans',sans-serif !important; font-size: 11px !important; font-weight: 400 !important; letter-spacing: 1.4px !important; }
.svc-picker-empty { color: rgba(var(--sp-text),0.35) !important; }
html.dark-mode .svc-picker-dd { border-color:rgba(255,255,255,0.13); }
/* Condensed editorial face across the whole picker (overrides the per-rule DM Sans) */
#svc-picker-dd, #svc-picker-dd * { font-family: var(--sp-font) !important; }
@media (max-width:360px) { }
.itin-cancel-row { display: flex; gap: 6px; align-items: center; margin-bottom: 5px; }
.itin-cancel-row input[type="text"] { flex: 2; min-width: 0; }
.itin-cancel-row input[type="number"] { flex: 1; min-width: 0; }
.itin-cancel-row .icr-notice { display: flex; gap: 4px; flex: 1.4; min-width: 0; }
.itin-cancel-row .icr-notice input[type="number"] { flex: 1; }
.itin-cancel-row .icr-notice select { flex: 0 0 auto; font-size: 12px; min-width: 0; }
.itin-cancel-row input.icr-pct { flex: 1; }
.itin-cancel-row .icr-del { flex: none; padding: 4px 8px; background: transparent; border: 1px solid var(--border); border-radius: 4px; color: var(--muted); cursor: pointer; font-size: 14px; line-height: 1; }
.itin-cancel-row .icr-del:hover { background: var(--bg-tertiary); color: var(--text); }
#itin-cancel-rows-header { display: grid; grid-template-columns: 2fr 1.4fr 1fr 28px; gap: 6px; font-size: 10px; color: var(--muted); letter-spacing: 0.5px; text-transform: uppercase; margin-bottom: 2px; }
.itin-cancel-add-btn { font-size: 11px; color: var(--gold); background: transparent; border: 1px dashed var(--gold); border-radius: 4px; padding: 4px 10px; cursor: pointer; margin-top: 2px; }
.itin-cancel-add-btn:hover { background: var(--gold-pale); }
.exp-inc-row { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.exp-inc-input { flex: 1; min-width: 0; padding: 5px 10px; border: 1px solid var(--border); border-radius: 6px; font-size: 12px; color: var(--text); background: transparent; font-family: inherit; outline: none; }
.exp-inc-input:focus { border-color: var(--gold); }
.exp-inc-del { flex: none; padding: 4px 8px; background: transparent; border: 1px solid var(--border); border-radius: 4px; color: var(--muted); cursor: pointer; font-size: 14px; line-height: 1; }
.exp-inc-del:hover { color: var(--text); background: var(--bg-tertiary); }
.exp-inc-add-btn { font-size: 11px; color: var(--gold); background: transparent; border: 1px dashed var(--gold); border-radius: 4px; padding: 4px 10px; cursor: pointer; margin-top: 2px; }
.exp-inc-add-btn:hover { background: var(--gold-pale); }
.exp-opt-card { border:1px solid var(--border); border-radius:6px; overflow:hidden; margin-top:10px; }
.exp-opt-card-header { background:var(--gold-pale); padding:5px 10px; border-bottom:1px solid var(--border); display:flex; align-items:center; gap:8px; }
.exp-opt-card-header-label { font-size:9px; letter-spacing:1.5px; text-transform:uppercase; font-weight:500; color:var(--gold-mid); }
.exp-opt-card-body { padding:8px 10px; display:flex; flex-direction:column; gap:8px; }
.exp-opt-card-body .field { margin-bottom:0 !important; }
.exp-opt-remove-btn { margin-left:auto; background:transparent; border:none; color:var(--muted); cursor:pointer; font-size:16px; line-height:1; padding:0 4px; }
.exp-opt-remove-btn:hover { color:var(--text); }
.exp-inc-section { margin-top:8px; }
.exp-inc-section-header { font-size:9px; letter-spacing:1.8px; text-transform:uppercase; color:var(--muted); padding-bottom:5px; border-bottom:1px solid var(--border); margin-bottom:6px; }
.am-type-toggle { display:flex; gap:4px; }
.am-type-btn { flex:1; padding:6px 8px; font-size:10px; letter-spacing:1.5px; text-transform:uppercase; border:1px solid var(--border); border-radius:4px; background:transparent; color:var(--muted); cursor:pointer; font-family:inherit; transition:border-color 0.15s,color 0.15s,background 0.15s; }
.am-type-btn.active { border-color:var(--gold); color:var(--gold); background:var(--gold-pale); }
.am-act-fields { display:grid; grid-template-columns:1fr 1fr; gap:14px 18px; align-items:start; }
.am-grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:14px 18px; align-items:start; }
.am-col-full { grid-column:1 / -1; }
.am-cancel-header { display:grid; grid-template-columns:1.5fr 1fr 30px; gap:8px; font-size:9px; letter-spacing:1.2px; text-transform:uppercase; color:var(--muted); margin-bottom:5px; }
.am-cancel-row { display:grid; grid-template-columns:1.5fr 1fr 30px; gap:8px; align-items:center; margin-bottom:6px; }
.am-cancel-notice { display:flex; gap:6px; min-width:0; }
.am-cancel-notice .am-cancel-hours { flex:1; min-width:0; }
.am-cancel-notice .am-cancel-unit { flex:0 0 auto; width:auto; }
/* The unit select is swapped for a searchable combobox at runtime, which wraps
   it in .srch-sel-wrap. The rule above then sizes a hidden select while the
   wrapper took its natural width and squeezed the notice field down to a
   couple of characters, so the hours a guest gets were the one number on this
   row you could not read. Size the wrapper instead, and keep a floor under the
   input so it always shows its own value. */
.am-cancel-notice .srch-sel-wrap { flex:0 0 auto; width:auto; min-width:92px; max-width:124px; }
.am-cancel-notice .am-cancel-hours { min-width:62px; }
.am-cancel-del { padding:6px 9px; background:transparent; border:1px solid var(--border); border-radius:6px; color:var(--muted); cursor:pointer; font-size:14px; line-height:1; }
.am-cancel-del:hover { background:var(--bg-tertiary); color:var(--text); }
@media (max-width:720px){ .am-act-fields, .am-grid-2 { grid-template-columns:1fr; } }
.am-exp-fields { display:flex; flex-direction:column; gap:10px; }
#am-form-container[data-am-type="activity"] .am-exp-fields { display:none; }
#am-form-container[data-am-type="experience"] .am-act-fields { display:none; }
.am-exp-badge { font-size:9px; letter-spacing:1px; background:var(--gold-pale); color:var(--gold-mid); padding:1px 5px; border-radius:2px; text-transform:uppercase; margin-left:4px; vertical-align:middle; }
#itin-rows:not(:empty) {
  margin-bottom: 12px;
  padding-bottom: 8px;
}

#cat-itinerary.active .panel-body > .tf-card,
#cat-itinerary.active .panel-body > .itin-add-wrap,
#cat-itinerary.active .panel-body > #itin-rows,
#cat-itinerary.active .panel-body > #itin-cancel-terms-field {
  flex: 0 0 auto;
}

#itin-rows > [id^="itin-block-"].dragging {
  opacity: 0.5;
  background-color: var(--gold-pale);
}

#itin-rows > [id^="itin-block-"].drag-over {
  border-top: 3px solid var(--gold) !important;
  padding-top: 8px;
}

.itin-block-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: rgba(0,0,0,0.02);
  border-radius: 0;
  cursor: grab;
  user-select: none;
}

.itin-block-header:active {
  cursor: grabbing;
}

.itin-drag-handle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--gold);
  font-weight: 500;
  flex: 1;
  font-size: 9px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

.itin-drag-handle::before {
  content: "⠿";
  font-size: 14px;
  color: var(--gold-mid);
  cursor: grab;
}

.itin-block-delete {
  background: transparent;
  border: none;
  color: var(--muted);
  cursor: pointer;
  font-size: 14px;
  padding: 4px 8px;
  transition: color 0.2s;
}
.itin-block-collapse {
  background: transparent;
  border: none;
  color: var(--muted);
  cursor: pointer;
  font-size: 13px;
  padding: 2px 6px;
  line-height: 1;
  transition: color 0.15s, transform 0.2s;
}
.itin-block-copy {
  background: transparent;
  border: none;
  color: var(--muted);
  cursor: pointer;
  font-size: 13px;
  padding: 2px 6px;
  line-height: 1;
  transition: color 0.15s;
}
.itin-block-copy:hover { color: var(--gold); }
.itin-block-collapse:hover { color: var(--gold); }
.itin-block-dupe {
  background: transparent;
  border: none;
  color: var(--muted);
  cursor: pointer;
  font-size: 13px;
  padding: 2px 6px;
  line-height: 1;
  transition: color 0.15s;
}
.itin-block-dupe:hover { color: var(--gold); }
.itin-block-header-actions { display:flex; align-items:center; gap:0; }
/* ── Block type accent stripe ───────────────── */
[id^="itin-block-"][data-block-type] { border-left: 3px solid transparent; border-radius: 4px; transition: border-left-color 0.2s; }
[id^="itin-block-"][data-block-type="transfer"]   { border-left-color: rgba(91,155,213,0.60); }
[id^="itin-block-"][data-block-type="restaurant"] { border-left-color: rgba(148,110,85,0.65); }
[id^="itin-block-"][data-block-type="massage"]    { border-left-color: rgba(91,173,140,0.65); }
[id^="itin-block-"][data-block-type="activity"]   { border-left-color: rgba(160,128,192,0.60); }
[id^="itin-block-"][data-block-type="freetext"]   { border-left-color: rgba(138,136,134,0.40); }
[id^="itin-block-"][data-block-type="experience"] { border-left-color: rgba(212,168,83,0.75); }
/* ── Transfer swap button ────────────────────── */
.itin-swap-btn { background:none; border:1px solid var(--border); border-radius:4px; color:var(--muted); cursor:pointer; font-size:13px; padding:3px 6px; align-self:flex-end; margin-bottom:1px; transition:color 0.15s, border-color 0.15s; flex-shrink:0; }
.itin-swap-btn:hover { color:var(--gold); border-color:var(--gold); }
/* ── More / secondary fields toggle ─────────── */
.itin-more-toggle { background:none; border:none; color:var(--muted); cursor:pointer; font-size:9px; letter-spacing:1.2px; text-transform:uppercase; padding:2px 4px; font-family:inherit; transition:color 0.15s; }
.itin-more-toggle:hover { color:var(--gold); }
/* ── Itinerary Progress Bar ─────────────────── */
#itin-progress-wrap {
  display: none;
  padding: 6px 2px 4px;
}
#itin-progress-track {
  height: 3px;
  background: var(--border);
  border-radius: 2px;
  overflow: hidden;
}
#itin-progress-fill {
  height: 100%;
  background: var(--gold);
  border-radius: 2px;
  transition: width 0.4s ease;
  width: 0%;
}
#itin-progress-label {
  font-size: 9px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 3px;
  display: flex;
  justify-content: space-between;
}
/* ── Jump-to Outline ────────────────────────── */
#itin-outline-btn {
  display: none;
  background: none;
  color: var(--muted);
  border: 1px solid rgba(143,109,85,0.22);
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 9px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  cursor: pointer;
  font-family: inherit;
  flex-shrink: 0;
  transition: color 0.18s, border-color 0.18s;
}
#itin-outline-btn:hover { color: var(--gold); border-color: var(--gold); }
@media (max-width: 519px) { #itin-outline-btn { display: none !important; } }
html.dark-mode #itin-outline-btn {
  background: rgba(26,24,20,0.78);
  border-color: rgba(212,175,143,0.28);
  box-shadow: 0 2px 10px -2px rgba(0,0,0,0.38), inset 0 1px 0 rgba(255,255,255,0.06);
}
.itin-outline-pop {
  position: fixed;
  z-index: 9990;
  background: rgba(255,255,255,0.72);
  border: 1px solid rgba(143,109,85,0.22);
  border-radius: 14px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.16), inset 0 1px 0 rgba(255,255,255,0.6);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  min-width: 200px;
  max-width: 280px;
  max-height: 60vh;
  overflow-y: auto;
  padding: 5px 0;
}
html.dark-mode .itin-outline-pop {
  background: rgba(22,20,17,0.82);
  border-color: rgba(212,175,143,0.22);
  box-shadow: 0 8px 32px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.06);
}
.itin-outline-item {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 10px;
  cursor: pointer;
  transition: background 0.12s;
  border-radius: 8px;
  margin: 0 4px;
}
.itin-outline-item:hover { background: rgba(148,110,85,0.10); }
.itin-outline-item-badge {
  font-size: 11px;
  white-space: nowrap;
  color: var(--gold);
  flex-shrink: 0;
}
.itin-outline-item-label {
  font-size: 11px;
  color: var(--charcoal);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.itin-outline-date-sep {
  padding: 4px 10px 2px;
  font-size: 9px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--gold);
  border-top: 1px solid var(--border);
  margin-top: 2px;
}
.itin-outline-date-sep:first-child { border-top: none; margin-top: 0; }
/* ── Itinerary Templates ───────────────────── */
.itin-tpl-overlay { position:fixed; inset:0; z-index:9998; }
.itin-tpl-panel {
  position:fixed;
  background: var(--tab-bar-bg, rgb(52,52,52));
  background: color-mix(in srgb, var(--tab-bar-bg, rgb(52,52,52)) 82%, transparent);
  backdrop-filter: blur(36px) saturate(1.4) brightness(1.22);
  -webkit-backdrop-filter: blur(36px) saturate(1.4) brightness(1.22);
  border:1px solid rgba(212,168,83,0.20);border-top:1px solid rgba(212,168,83,0.36);
  border-radius:0 0 12px 12px;
  box-shadow:0 20px 60px rgba(0,0,0,0.55),0 4px 16px rgba(0,0,0,0.28),inset 0 1px 0 rgba(212,168,83,0.14);
  padding:8px; min-width:280px; max-width:92vw; z-index:9999; max-height:82vh; overflow-y:auto;
}
.itin-tpl-section-label { font-family:'DM Sans',sans-serif; font-size:9.5px; font-weight:600; letter-spacing:1.8px; text-transform:uppercase; color:var(--gold-mid); opacity:0.8; padding:10px 14px 5px; }
.itin-tpl-sep { border:none; border-top:1px solid rgba(212,168,83,0.12); margin:5px 4px; }
.itin-tpl-item { display:flex; align-items:center; gap:8px; padding:9px 12px; border-radius:5px; cursor:pointer; font-family:'DM Sans',sans-serif; font-size:13px; font-weight:300; letter-spacing:0.4px; color:rgba(255,255,255,0.82); transition:background 0.14s,color 0.14s; }
.itin-tpl-item:hover { background:rgba(255,255,255,0.08); color:rgba(255,255,255,1); }
.itin-tpl-custom { align-items:flex-start; gap:6px; }
.itin-pack-pill { pointer-events:none; display:inline-flex; align-items:center; gap:4px; }
.itin-tpl-new-btn { background:none; border:1px solid rgba(212,168,83,0.35); border-radius:99px; color:rgba(212,168,83,0.85); font-size:9px; letter-spacing:1px; padding:2px 8px; cursor:pointer; font-family:inherit; transition:background 0.14s,color 0.14s; }
.itin-tpl-new-btn:hover { background:rgba(212,168,83,0.14); color:rgba(212,168,83,1); }
.itin-tpl-edit-btn { background:none; border:none; color:rgba(180,155,115,0.50); font-size:13px; cursor:pointer; padding:2px 4px; border-radius:4px; flex-shrink:0; line-height:1; }
.itin-tpl-edit-btn:hover { color:rgba(212,168,83,1); }
/* Force pill/strip colours readable on dark template panel */
.itin-tpl-panel .itin-day-strip-btn { background:rgba(212,168,83,0.12) !important; border-color:rgba(212,168,83,0.30) !important; color:rgba(212,168,83,0.88) !important; }
.itin-tpl-panel .itin-day-strip-btn svg { stroke:rgba(212,168,83,0.88) !important; }
.itin-tpl-panel [style*="color:var(--text)"], .itin-tpl-panel [style*="color: var(--text)"] { color:rgba(240,232,220,0.88) !important; }
.itin-tpl-panel [style*="color:var(--gold)"], .itin-tpl-panel [style*="color: var(--gold)"] { color:rgba(212,168,83,0.85) !important; }
.itin-tpl-panel [style*="font-size:11px"] { color:rgba(240,232,220,0.88) !important; }
.itin-tpl-panel [style*="color:var(--muted)"], .itin-tpl-panel [style*="color: var(--muted)"] { color:rgba(180,155,115,0.60) !important; }
/* ── Pack Editor Modal ──────────────────────── */
.peb-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.32); z-index:10100; pointer-events:none; }
.peb-modal { position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); background:var(--bg); border:1px solid var(--card-border); border-radius:var(--card-radius); width:min(640px,96vw); max-height:88vh; display:flex; flex-direction:column; box-shadow:0 12px 56px rgba(0,0,0,0.28); pointer-events:all; user-select:none; }
.peb-modal.peb-dragging { box-shadow:0 24px 72px rgba(0,0,0,0.38); transform:none; }
.peb-header { display:flex; align-items:center; justify-content:space-between; padding:16px 16px 0; cursor:grab; }
.peb-header.peb-dragging { cursor:grabbing; }
.peb-title { font-size:13px; letter-spacing:1.5px; text-transform:uppercase; color:var(--muted); font-weight:500; }
.peb-close { background:none; border:none; color:var(--muted); font-size:16px; cursor:pointer; padding:4px 6px; }
.peb-body { flex:1; overflow-y:auto; padding:12px 16px; }
.peb-section-label { font-size:8px; letter-spacing:2px; text-transform:uppercase; color:var(--muted); opacity:0.7; margin-bottom:6px; }
.peb-block-list { display:flex; flex-direction:column; gap:6px; margin-bottom:4px; }
.peb-row { display:flex; align-items:center; gap:8px; background:rgba(0,0,0,0.03); border:1px solid var(--border); border-radius:8px; padding:7px 10px; cursor:default; transition:opacity 0.15s, box-shadow 0.15s; }
.peb-row.peb-drag-over { box-shadow:0 0 0 2px var(--gold); }
.peb-row.peb-dragging-row { opacity:0.4; }
.peb-row-handle { font-size:11px; color:var(--muted); opacity:0.45; cursor:grab; user-select:none; flex-shrink:0; line-height:1; padding:0 2px; }
.peb-row-handle:active { cursor:grabbing; }
html.dark-mode .peb-row { background:rgba(255,255,255,0.04); }
.peb-ico { font-size:14px; flex-shrink:0; }
.peb-fields { display:flex; align-items:center; gap:6px; flex:1; min-width:0; }
.peb-fields select, .peb-fields input[type="text"] { flex:1; min-width:0; font-family:inherit; color:var(--text); background:transparent; border:none; border-bottom:1px solid var(--border); padding:4px 0; outline:none; }
.peb-fields select:focus, .peb-fields input[type="text"]:focus { border-bottom-color:var(--gold); }
.peb-del { background:none; border:none; color:var(--muted); font-size:12px; cursor:pointer; padding:2px 4px; border-radius:3px; flex-shrink:0; }
.peb-del:hover { color:#c0392b; }
.peb-footer { display:flex; align-items:center; justify-content:space-between; padding:12px 16px; border-top:1px solid var(--border); gap:8px; }
.peb-save-btn { background:var(--gold); color:#fff; border:none; border-radius:6px; padding:8px 18px; font-family:inherit; font-size:11px; letter-spacing:1px; text-transform:uppercase; cursor:pointer; }
.peb-save-btn:hover { opacity:0.88; }
.peb-cancel-btn { background:none; border:1px solid var(--border); border-radius:6px; padding:8px 14px; font-family:inherit; font-size:11px; letter-spacing:1px; text-transform:uppercase; cursor:pointer; color:var(--muted); }
.peb-delete-btn { background:none; border:none; color:var(--muted); font-size:11px; letter-spacing:1px; text-transform:uppercase; cursor:pointer; padding:4px; }
.peb-delete-btn:hover { color:#c0392b; }
/* Day checkboxes in pack editor */
.peb-days-row { display:flex; flex-wrap:wrap; gap:6px; }
.peb-day-lbl { display:flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:50%; border:1px solid var(--border); cursor:pointer; font-size:11px; letter-spacing:0.5px; color:var(--muted); user-select:none; transition:background 0.15s,color 0.15s,border-color 0.15s; }
.peb-day-lbl input { position:absolute; opacity:0; width:0; height:0; }
.peb-day-lbl.peb-day-on { background:var(--gold); color:#fff; border-color:var(--gold); }
.peb-day-lbl:not(.peb-day-on):hover { border-color:var(--gold); color:var(--gold); }
/* ── Inline Day Strip ───────────────────────── */
.itin-day-strip { display:flex; flex-wrap:wrap; gap:5px; align-items:center; position:relative; }
.itin-icon-btn { display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:50%; border:1px solid rgba(143,109,85,0.25); background:rgba(212,175,83,0.07); color:var(--gold); cursor:pointer; transition:background 0.15s, border-color 0.15s; flex-shrink:0; padding:0; }
.itin-icon-btn:hover { background:rgba(212,175,83,0.22); border-color:rgba(143,109,85,0.45); }
html.dark-mode .itin-icon-btn { background:rgba(212,175,83,0.06); border-color:rgba(212,175,143,0.25); }
.itin-day-strip-btn { display:inline-flex; align-items:center; gap:4px; background:rgba(212,175,83,0.08); border:1px solid rgba(143,109,85,0.22); border-radius:999px; color:var(--gold); font-size:10px; font-family:inherit; letter-spacing:0.5px; padding:4px 10px; cursor:pointer; transition:background 0.15s, color 0.15s; white-space:nowrap; }
.itin-day-strip-btn:hover { background:rgba(212,175,83,0.22); }
html.dark-mode .itin-day-strip-btn { background:rgba(212,175,83,0.05); border-color:rgba(212,175,143,0.25); }
/* Single "+ Add" trigger + dropdown menu */
.itin-add-wrap { position:relative; display:inline-block; }
.itin-add-trigger { display:inline-flex; align-items:center; gap:5px; background:rgba(212,175,83,0.10); border:1px solid rgba(143,109,85,0.28); border-radius:999px; color:var(--gold); font-size:10px; font-family:inherit; letter-spacing:1px; text-transform:uppercase; font-weight:500; padding:5px 12px; cursor:pointer; transition:background 0.15s, border-color 0.15s; white-space:nowrap; }
.itin-add-trigger:hover { background:rgba(212,175,83,0.22); border-color:rgba(143,109,85,0.45); }
.itin-add-trigger .caret { font-size:8px; opacity:0.7; }
.itin-add-menu { position:fixed; z-index:9200; background:var(--cream, #fdfaf3); border:1px solid var(--card-border); border-radius:var(--card-radius-sm); box-shadow:0 12px 40px rgba(50,40,30,0.18); padding:8px; min-width:220px; display:none; flex-direction:column; gap:2px; }
.itin-add-menu.open { display:flex; }
.itin-add-menu button { display:flex; align-items:center; gap:10px; background:none; border:none; color:var(--charcoal); font-family:inherit; font-size:12px; letter-spacing:0.3px; text-align:left; padding:9px 12px; border-radius:7px; cursor:pointer; white-space:nowrap; transition:background 0.12s, color 0.12s; }
.itin-add-menu button:hover { background:rgba(212,175,83,0.15); color:var(--gold); }
.itin-add-menu button svg { width:15px; height:15px; flex-shrink:0; color:var(--gold); opacity:0.85; }
.itin-add-menu hr { border:none; border-top:1px solid var(--border); margin:4px 0; }
html.dark-mode .itin-add-menu { background:#2a2520; border-color:rgba(212,175,143,0.25); }
html.dark-mode .itin-add-menu button { color:rgba(255,255,255,0.88); }
.itin-day-badge { font-size:9px; letter-spacing:1.2px; text-transform:uppercase; font-weight:600; color:var(--gold); background:rgba(212,175,83,0.13); border:1px solid rgba(212,175,83,0.3); border-radius:999px; padding:2px 9px; white-space:nowrap; }
/* ── Itinerary Overview Modal ───────────────── */
.itin-ov-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.45); z-index:9998; }
.itin-ov-panel { position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); z-index:9999; background:var(--tab-bar-bg, rgb(52,52,52)); background:color-mix(in srgb, var(--tab-bar-bg, rgb(52,52,52)) 82%, transparent); backdrop-filter:blur(36px) saturate(1.4) brightness(1.22); -webkit-backdrop-filter:blur(36px) saturate(1.4) brightness(1.22); border:1px solid rgba(212,168,83,0.20); border-top:1px solid rgba(212,168,83,0.36); border-radius:16px; width:min(460px,94vw); max-height:82vh; display:flex; flex-direction:column; box-shadow:0 20px 60px rgba(0,0,0,0.5),0 4px 16px rgba(0,0,0,0.28),inset 0 1px 0 rgba(212,168,83,0.12); overflow:hidden; }
.itin-ov-header { padding:13px 16px 11px; border-bottom:1px solid rgba(212,168,83,0.15); display:flex; align-items:center; justify-content:space-between; flex-shrink:0; }
.itin-ov-title { font-family:'DM Sans',sans-serif; font-size:11px; letter-spacing:1.8px; text-transform:uppercase; color:var(--gold-mid); font-weight:600; }
.itin-ov-list { flex:1; overflow-y:auto; padding:8px; }
.itin-ov-row { display:flex; align-items:center; gap:8px; padding:8px 10px; border-radius:6px; border:1px solid rgba(212,168,83,0.14); margin-bottom:5px; background:rgba(255,255,255,0.03); transition:border-color 0.15s; }
.itin-ov-row.ov-dragging { opacity:0.35; }
.itin-ov-row.ov-drag-over { border-color:var(--gold); background:var(--gold-pale); }
.itin-ov-handle { color:rgba(255,255,255,0.35); cursor:grab; font-size:14px; user-select:none; flex-shrink:0; }
.itin-ov-badge { font-size:8px; letter-spacing:1.2px; text-transform:uppercase; padding:2px 7px; border-radius:3px; flex-shrink:0; background:var(--gold-pale); color:var(--gold-mid); }
.itin-ov-badge-date { background:transparent; color:rgba(255,255,255,0.45); border:1px solid rgba(212,168,83,0.20); padding:1px 6px; }
.itin-ov-text { flex:1; font-size:11px; color:rgba(240,232,220,0.90); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }
.itin-ov-arrows { display:flex; gap:2px; flex-shrink:0; }
.itin-ov-arrow-btn { background:transparent; border:1px solid rgba(212,168,83,0.20); border-radius:3px; color:rgba(255,255,255,0.45); cursor:pointer; font-size:11px; width:22px; height:22px; display:flex; align-items:center; justify-content:center; line-height:1; transition:color 0.15s,border-color 0.15s; }
.itin-ov-arrow-btn:hover { color:var(--gold); border-color:var(--gold); }
.itin-ov-close { background:transparent; border:none; color:rgba(255,255,255,0.45); cursor:pointer; font-size:16px; padding:2px 6px; }
.itin-ov-close:hover { color:rgba(255,255,255,0.9); }
.itin-ov-action-btn { background:transparent; border:1px solid rgba(212,168,83,0.20); border-radius:4px; color:rgba(255,255,255,0.55); cursor:pointer; font-size:9px; letter-spacing:1px; text-transform:uppercase; padding:4px 9px; font-family:inherit; transition:color 0.15s,border-color 0.15s; }
.itin-ov-action-btn:hover { color:var(--gold); border-color:var(--gold); }
.itin-ov-toggle-btn { background:transparent; border:1px solid var(--border); border-radius:3px; color:var(--muted); cursor:pointer; font-size:11px; padding:1px 6px; flex-shrink:0; transition:color 0.15s; }
.itin-ov-toggle-btn:hover { color:var(--gold); }
#itin-rows > [id^="itin-block-"].itin-collapsed > div:not(.itin-block-header) { display:none; }
#itin-rows > [id^="itin-block-"].itin-collapsed .itin-block-collapse { transform: rotate(-90deg); }
.itin-collapsed .itin-block-summary { display: inline !important; }
.itin-block-summary {
  display: none;
  font-size: 10px;
  color: var(--muted);
  font-weight: 300;
  letter-spacing: 0;
  text-transform: none;
  margin-left: 6px;
  vertical-align: middle;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.itin-block-delete:hover {
  color: #C0392B;
}

/* Massage rows — wider columns for Duration and Price */
.massage-row {
  display: grid;
  grid-template-columns: 2.4fr 1.3fr 0.9fr 1.1fr 1.1fr 28px;
  gap: 12px;
  align-items: end;
  margin-bottom: 0;
  padding-bottom: 12px;
  padding-top: 12px;
}
.massage-row:first-of-type { padding-top: 0; }
/* Measured from each card's title to its first field label: Transfers sat at
   20px, Restaurants at 28 and Massages at 8 — three values for the same gap.
   20 is the one to keep, so the other two are brought to it: this container
   makes up the 12px Massages was short, and the Restaurants rows container
   drops from 16px to 8 (its rows carry 12px of their own padding on top). */
#massage-rows { padding-top: 12px; }
/* Point-to-Point and Disposition rows, now that they live in a card rather
   than each drawing a border of its own: the same hairline between rows the
   massage and reservation rows use, none under the last, and the same 20px
   from the card's eyebrow to the first label. */
/* 20px from the eyebrow to the first row, the same gap the other tables were
   set to. Measured at 14 with the container at 8, so the container carries 14
   and each row's own top padding is zeroed on the first one — the same shape
   as .massage-row:first-of-type. */
#p2p-rows-container, #disp-rows-container { padding-top: 14px; }
.p2p-transfer-row:first-child, .disp-row:first-child { padding-top: 0 !important; }
/* padding, not margin: a margin here collapses with the title's own 6px and
   lands at 14 instead of 20 */
.massage-row .field { margin-bottom: 0; }
.btn-remove-row {
  background: none;
  border: 1px solid var(--border);
  border-radius: 50%;
  width: 24px;
  height: 24px;
  min-width: 24px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0;
  align-self: end;
  padding-bottom: 1px;
  transition: all .15s;
}
.btn-remove-row:hover { border-color: #c0392b; color: #c0392b; }
.massage-total {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  margin-top: 8px;
  font-size: 12px;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

/* Tabular numerals for clocks, prices, and reservation times — prevents digit jitter */
.hc-time,
.tz-row-time,
.val-cell,
.lbl-cell,
.price-total-row td,
.total-row td,
.detailTable td,
.reservationTable td,
[data-tabular],
input[type="time"],
input[type="number"] {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}
.massage-total strong { color: var(--gold); font-size: 15px; font-weight: 500; }

/* ══════════════════════════════════════════════════════
   RESTAURANT BOOKING ROWS
══════════════════════════════════════════════════════ */
.rest-booking-card {
  /* No fill of its own. A near-white at 55% is invisible on the white card in
     light mode but reads as a pale block on the dark one, which is not what a
     row inside a group should do — the massage rows carry no background and
     these should not either. */
  background: transparent;
  border: none;
  border-radius: 0;
  /* No horizontal padding: the fields sit flush to the card's content edge, so
     the first label lands at the same x as the Transfers and Massages ones. */
  padding: 12px 0 10px;
  margin-bottom: 0;
  position: relative;
  box-shadow: none;
}
/* Starts where the text starts, which is now the content edge — the row lost
   the 14px padding this used to compensate for, so the offset goes with it.
   The massage rows have always been flush and are untouched. */
/* No rule between rows. Each field already ends in its own underline, so a
   full-width line under the row was a second boundary drawn across the first;
   the padding keeps the rows apart on its own. */
/* The grid and the remove button, bottom aligned — the shape a massage row has,
   reached with a flex wrapper so .rr-grid keeps its own container queries
   untouched at every breakpoint. */
.rr-row { display: flex; align-items: flex-end; gap: 12px; }
.rr-row > .rr-grid { flex: 1 1 auto; min-width: 0; }
.rr-row > .btn-remove-row { flex: 0 0 auto; margin-bottom: 2px; }
.rest-booking-card { cursor: grab; }
.rest-booking-card:active { cursor: grabbing; }
.rest-booking-card input, .rest-booking-card select, .rest-booking-card button { cursor: auto; }
.rest-booking-card button { cursor: pointer; }
.rest-booking-card.dragging {
  opacity: 0.38;
  transform: scale(0.98);
}
body.rest-dragging .action-row { opacity: 0; pointer-events: none; transition: opacity 0.15s; }
.rest-booking-card .field { margin-bottom: 0; }
.rest-booking-card .tf-grid { margin-bottom: 0; }
.rest-booking-card .field-row { gap: 12px; }
/* Single-row reservation grid: Restaurant Date Time Guests Address.
   Container-query driven so it reflows when the form panel is dragged narrow
   (split window / vertical layout), not just on small viewports. */
.rr-grid { grid-template-columns: 1.7fr 1fr 1fr 0.85fr 2fr; }
/* Medium panel: Restaurant + Address full-width, Date/Time/Guests share a row */
/* Same measurement, same answer: with the span rules out of the way this grid
   clips nothing down to a 540px panel on its existing template. */
@container form-panel (max-width: 540px) {
  .rr-grid { grid-template-columns: 1fr 1fr 1fr; }
  .rr-grid .field:nth-child(1) { grid-column: span 3; }  /* Restaurant */
  .rr-grid .field:nth-child(5) { grid-column: span 3; }  /* Address */
}
/* Very narrow panel: one field per line */
@container form-panel (max-width: 420px) {
  .rr-grid { grid-template-columns: 1fr; }
  .rr-grid .field { grid-column: span 1 !important; }
}
/* Fallback for browsers without container-query support */
@supports not (container-type: inline-size) {
  /* Viewport, not panel: the form column is roughly half the window here, so
     a 540px panel is about a 1150px window. */
  @media (max-width: 1150px) {
    .rr-grid { grid-template-columns: 1fr 1fr 1fr; }
    .rr-grid .field:nth-child(1) { grid-column: span 3; }
    .rr-grid .field:nth-child(5) { grid-column: span 3; }
  }
}

/* Insert row. iOS renders "add another" as a row inside the group carrying a
   leading + glyph — not as a small button floating after the group, which is
   what this was. As a row it reads as the next thing in the list rather than
   as a control that happens to sit nearby, and it lines up with the fields
   above it instead of being indented away from them.

   The rule is scoped to .btn-add-row alone. .itin-cancel-add-btn and .cd-add
   share the base rule further up and are deliberately left on it: those add to
   a list that is not a row of fields, so the row treatment would misdescribe
   them. */
.btn-add-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  box-sizing: border-box;
  font-family: 'DM Sans', sans-serif;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.2px;
  text-transform: none;
  color: var(--gold);
  text-align: left;
  background: none;
  border: none;
  border-radius: 0;
  /* The hairline that used to sit above this is gone. Inside the card the row
     above already ends at a field underline, so the separator was a second
     line saying the same thing; the padding carries the break on its own. */
  padding: 16px 0 2px;
  margin-top: 0;
  transition: color .15s ease;
}
.btn-add-row .ins-plus {
  flex: 0 0 auto;
  width: 20px; height: 20px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--chip-fill-on, rgba(184,147,79,0.15));
  font-size: 15px; line-height: 1; font-weight: 400;
  transition: background .15s ease;
}
.btn-add-row:hover { background: none; color: var(--gold-mid); }
.btn-add-row:hover .ins-plus { background: var(--chip-fill-hover, rgba(60,50,40,0.095)); }
.btn-add-row:active .ins-plus { transform: scale(0.92); }
@media (prefers-reduced-motion: reduce) { .btn-add-row:active .ins-plus { transform: none; } }

/* Page-body "Add Restaurant" combobox — full width, standard field style */
.field:has(#r-add-restaurant-select) .srch-sel-wrap { width: 100%; }

/* Quick-add favourite restaurant chips — one tap to add a reservation row */
.r-qa-favs { display: flex; flex-wrap: wrap; gap: 6px; margin: 9px 0 11px; }
/* Filled capsule, same family as .opt-chip — an outlined pill is a Material
   chip; iOS fills them and shows state by changing the fill, not by drawing a
   ring. Transparent border keeps the size identical across states. */
.r-qa-chip { font-family: 'DM Sans', sans-serif; font-size: 11px; letter-spacing: 0.2px; color: var(--text);
  background: var(--chip-fill, rgba(60,50,40,0.055)); border: 1px solid transparent; border-radius: 999px; padding: 6px 12px 6px 9px;
  cursor: pointer; display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
  transition: background .15s, color .15s, transform .1s; }
.r-qa-chip:hover { background: var(--chip-fill-on, rgba(184,147,79,0.15)); color: var(--chip-ink-on, #74553F); }
.r-qa-chip:active { transform: scale(0.96); }
.r-qa-chip .r-qa-plus { color: var(--gold, #b8934f); font-weight: 600; font-size: 13px; line-height: 1; }
/* A footer note for the group above it, so it takes the card's inner padding
   as its indent and collapses to nothing when there are favourites to show. */
.r-qa-hint { font-size: 11.5px; color: var(--muted); font-style: italic; margin: -6px 0 14px; padding: 0 16px; }
.r-qa-hint:empty { display: none; }
/* No display rule for #r-pinned-card here, deliberately. It used to be hidden
   when empty with `display: none !important`, and that !important also beat
   the inline display the mode switch writes — which is why the card turned up
   on the guest-list page, where every form section is supposed to be hidden.
   Whether it shows is the mode switch's business now, in _syncPinnedCard. */

/* Category field templates on an Itinerary Activity block — picking a
   category renders that category's defined field labels (e.g. Boat Charter
   -> Boat type, Length (ft); Tennis -> Court, Coach) as blank inputs right
   in the block, ready to fill in per-booking. */
.itin-act-catfields:empty { display: none; }
.itin-act-catfields { margin-bottom: 8px; }
.itin-act-catfields .itin-more-grid { margin-bottom: 0; } .ar-home { display: none; }
/* WhatsApp + Calendar are phone-only primaries injected into the action row;
   desktop keeps its full pill, so they stay hidden above phone width.
   (.btn.ar-mobile-extra beats the .action-row .btn base rule.) */
.action-row .btn.ar-mobile-extra { display: none; }
.action-row {
  display: inline-flex;
  align-items: stretch;
  gap: 0;
  padding: 3px;
  margin: 8px 0 12px !important;
  border: 1px solid rgba(180,155,115,0.22);
  border-radius: 999px;
  background: rgba(250,248,245,0.90);
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  flex-wrap: nowrap;
  width: max-content;
  max-width: 100%;
  backdrop-filter: blur(28px) saturate(200%);
  -webkit-backdrop-filter: blur(28px) saturate(200%);
  box-shadow: 0 12px 48px -8px rgba(0,0,0,0.22), 0 4px 16px -4px rgba(0,0,0,0.12), 0 1px 3px rgba(0,0,0,0.06), inset 0 1px 0 rgba(255,255,255,0.85), inset 0 -1px 0 rgba(143,109,85,0.08);
  transition: box-shadow 0.28s ease;
}
.action-row::-webkit-scrollbar { display: none; }
/* Overflow fade hint — shows right-edge gradient when buttons are clipped */
.action-row-wrap { position: relative; display: inline-flex; max-width: 100%; }
.action-row-wrap::after {
  content: '';
  position: absolute; top: 0; right: 0; bottom: 0; width: 32px;
  background: linear-gradient(to right, transparent, rgba(245,240,236,0.9));
  border-radius: 0 999px 999px 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s;
}
.action-row-wrap.overflows::after { opacity: 1; }
/* On mobile (601–640px) pill mode: liquid glass, centered */
@media (min-width: 601px) and (max-width: 640px) {
  .action-row {
    margin-left: auto !important;
    margin-right: auto !important;
    width: fit-content !important;
    max-width: calc(100vw - 24px) !important;
    padding: 10px 16px 16px !important;
    background: transparent !important;
    box-shadow: 0 12px 40px -8px rgba(0,0,0,0.52), 0 4px 12px -4px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.4) !important;
  }
}
/* No hairlines between buttons — pill hover handles separation */
.action-row > * + *{
  border-left: none;
}

.btn {
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  border: none;
  border-radius: 999px;
  padding: 9px 16px 9px;
  cursor: pointer;
  transition: color .18s ease, background .18s ease, opacity .18s ease;
  font-family: 'DM Sans', sans-serif;
  white-space: nowrap;
  line-height: 1.2;
  background: transparent !important;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.btn:active { transform: scale(0.93); }
.btn:hover { background: transparent !important; color: var(--gold-mid); }

/* A save/generate success used to be just a text swap ("Save" -> "✓ Saved")
   with zero visual moment. A brief gold pulse + settle gives it a touch of
   ceremony — quick and discreet, not a splash. Respects reduced motion. */
@keyframes btnSuccessPulse {
  0%   { box-shadow: 0 0 0 0 rgba(201,169,110,0.55); transform: scale(1); }
  35%  { transform: scale(1.05); }
  65%  { box-shadow: 0 0 0 10px rgba(201,169,110,0); }
  100% { box-shadow: 0 0 0 0 rgba(201,169,110,0); transform: scale(1); }
}
.btn-success-flash { animation: btnSuccessPulse .6s cubic-bezier(0.4,0,0.2,1); border-radius: 999px; }
@media (prefers-reduced-motion: reduce) { .btn-success-flash { animation: none; } }

/* Primary (PDF) — gold accent text */
.btn-primary {
  background: transparent !important;
  color: var(--gold-ink);
  font-weight: 600;
  flex-shrink: 0;
}
.btn-primary:hover { background: rgba(201,169,110,0.10) !important; color: var(--gold-mid); }

/* Outline */
.btn-outline {
  background: transparent !important;
  color: var(--muted);
}
.btn-outline:hover { color: var(--gold-mid); background: transparent !important; }
.btn-outline.active { color: var(--gold-mid); background: rgba(201,169,110,0.10) !important; }
.btn-ghost { background: transparent !important; color: var(--muted); border: none; }
.btn-ghost:hover { color: var(--text); background: transparent !important; }

/* Copy — gold accent text */
.btn-copy {
  background: transparent !important;
  color: var(--gold-ink);
}
.btn-copy:hover { background: rgba(201,169,110,0.10) !important; color: var(--gold-mid); }
.btn-copy.btn-copied { background: rgba(201,169,110,0.10) !important; color: var(--gold) !important; transition: none; }

/* Save — filled gold pill, the primary CTA */
.btn[onclick*="saveManually"] {
  background: var(--gold) !important;
  color: #fff !important;
  font-weight: 500;
  padding: 9px 18px;
}
.btn[onclick*="saveManually"]:hover { background: var(--gold-mid) !important; opacity: 0.92; }
.btn[onclick*="saveManually"] .btn-icon { opacity: 1; }

/* Icon + label layout inside action-row buttons */
.btn .btn-icon {
  width: 13px; height: 13px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  opacity: 0.72; transition: opacity .18s; pointer-events: none;
}
.btn .btn-icon svg { width: 13px; height: 13px; }
.btn:hover .btn-icon { opacity: 1; }
.btn-primary .btn-icon { opacity: 0.88; }
.btn-copy .btn-icon { opacity: 1; }
.btn .btn-label { font-weight: 300; letter-spacing: 1.3px; }

/* ── Action-row motion (tasteful; disabled under reduced-motion) ── */
/* Smooth ease-out on hover/press — no spring overshoot, so rapidly crossing
   the toolbar never bounces. Only transform/opacity animate (GPU-composited). */
.action-row .btn {
  transition: color .18s ease, background .18s ease, opacity .18s ease,
              transform .14s ease-out;
}
.action-row .btn:hover { transform: translateY(-1px); }
.action-row .btn:active { transform: translateY(0) scale(0.95); transition-duration: .06s; }

/* Save pill — a glossy gold sheen that sweeps across on hover.
   Driven purely by transform (not `left`) so it composites on the GPU and
   glides smoothly instead of repainting each frame. */
.btn[onclick*="saveManually"] { position: relative; overflow: hidden; }
.btn[onclick*="saveManually"] > * { position: relative; z-index: 1; }
.btn[onclick*="saveManually"]::after {
  content: ''; position: absolute; top: 0; left: -80%; width: 55%; height: 100%;
  background: linear-gradient(100deg, transparent 0%, rgba(255,255,255,0.55) 50%, transparent 100%);
  transform: translateX(0) skewX(-18deg); pointer-events: none; z-index: 0;
  will-change: transform;
}
.btn[onclick*="saveManually"]:hover::after { animation: arSaveSheen 0.8s ease-out; }
@keyframes arSaveSheen {
  from { transform: translateX(0) skewX(-18deg); }
  to   { transform: translateX(320%) skewX(-18deg); }
}

/* Confirmation badges spring in rather than snapping on */
@keyframes arBadgePop { from { opacity: 0; transform: translateY(4px) scale(0.9); } to { opacity: 1; transform: none; } }
.action-row .copy-confirm.visible,
.action-row .subject-confirm.visible { animation: arBadgePop 0.28s cubic-bezier(0.34, 1.56, 0.64, 1); }

/* Copy success — soft gold ring pulse */
.btn-copy.btn-copied { animation: arCopyGlow 0.6s ease; }
@keyframes arCopyGlow {
  0%   { box-shadow: 0 0 0 0 rgba(201,169,110,0.50); }
  100% { box-shadow: 0 0 0 8px rgba(201,169,110,0); }
}

/* ── Reusable glossy sheen sweep — the same beautiful skewed streak as Save ── */
@keyframes glossySweep {
  0%   { background-position: 150% 0; opacity: 1; }
  100% { background-position: -60% 0; opacity: 1; }
}
.glossy-btn { position: relative; overflow: hidden; }
.glossy-btn::after {
  content: ''; position: absolute; top: 0; left: -80%; width: 55%; height: 100%;
  background: linear-gradient(100deg, transparent 0%, rgba(255,255,255,0.55) 50%, transparent 100%);
  transform: translateX(0) skewX(-18deg); pointer-events: none; z-index: 3;
  will-change: transform;
}
.glossy-btn:hover::after { animation: arSaveSheen 0.8s ease-out; }

/* Tabs: identical sweep on ::before, since the tab's ::after is its (legacy)
   active indicator. */
.glossy-tab { position: relative; overflow: hidden; }
.glossy-tab::before {
  content: ''; position: absolute; top: 0; left: -80%; width: 55%; height: 100%;
  background: linear-gradient(100deg, transparent 0%, rgba(255,255,255,0.45) 50%, transparent 100%);
  transform: translateX(0) skewX(-18deg); pointer-events: none; z-index: 4;
  will-change: transform;
}
.glossy-tab:hover::before { animation: arSaveSheen 0.8s ease-out; }

@media (prefers-reduced-motion: reduce) {
  /* Keep the tasteful action-row motion even when the OS requests reduced
     motion (Windows commonly defaults to reduced). These are subtle,
     decorative UI touches the product intentionally keeps — !important + the
     higher specificity here overrides the global reduced-motion reset. */
  .action-row .btn {
    transition: color .18s ease, background .18s ease, opacity .18s ease,
                transform .14s ease-out !important;
  }
  .action-row .btn:hover { transform: translateY(-1px) !important; }
  .action-row .btn:active { transform: translateY(0) scale(0.95) !important; }
  .btn[onclick*="saveManually"]:hover::after { animation: arSaveSheen 0.8s ease-out !important; }
  .action-row .copy-confirm.visible,
  .action-row .subject-confirm.visible { animation: arBadgePop 0.28s cubic-bezier(0.34, 1.56, 0.64, 1) !important; }
  .btn-copy.btn-copied { animation: arCopyGlow 0.6s ease !important; }
  .glossy-btn:hover::after { animation: arSaveSheen 0.8s ease-out !important; }
  .glossy-tab:hover::before { animation: arSaveSheen 0.8s ease-out !important; }
}

/* Compact mode (ar-compact): collapse labels, show icons only */
.action-row.ar-compact .btn-label { display: none; }
.action-row.ar-compact .btn { padding: 9px 12px 8px; gap: 0; }
.action-row.ar-compact .btn .btn-icon { opacity: 0.78; }
/* Unsaved-changes cue: a gold dot on Save while the form has edits not yet
   saved to history. Clears the moment the arrangement is saved. */
.action-row .btn.is-dirty { position: relative; }
.action-row .btn.is-dirty::after { content: ''; position: absolute; top: 5px; right: 7px; width: 6px; height: 6px; border-radius: 50%;
  background: var(--gold, #b8934f); box-shadow: 0 0 6px rgba(201,169,110,0.9); animation: arDirtyIn .2s ease both; }
@keyframes arDirtyIn { from { transform: scale(0); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .action-row .btn.is-dirty::after { animation: none; } }
.action-row.ar-compact .btn-more { padding: 8px 11px; }

/* Mobile compact: stretch pill to full available width and spread icons evenly */
@media (max-width: 768px) {
  .action-row.ar-compact {
    width: calc(100vw - 24px) !important;
    justify-content: space-evenly;
  }
  /* Remove divider lines — they look wrong with even spacing */
  .action-row.ar-compact > * + *{
    border-left: none !important;
  }
  .action-row.ar-compact > .ar-guest-first {
    border-left: none !important;
  }
  /* Give each button more room */
  .action-row.ar-compact .btn { padding: 10px 14px 9px; }
  .action-row.ar-compact .btn-more { padding: 9px 14px; }
  .action-row.ar-compact .ar-status { padding: 10px 14px 9px; }
}

/* Confirmation badges — sit OUTSIDE the underlined row */
.action-row .subject-confirm,
.action-row .copy-confirm {
  font-size: 9px;
  color: var(--gold);
  padding: 4px 10px;
  background: transparent;
  border-radius: 0;
  display: none;
  letter-spacing: 1.4px;
  border-left: none;
}
.action-row .subject-confirm.visible,
.action-row .copy-confirm.visible {
  display: inline-flex;
  align-items: center;
}

/* ── Workflow status chip ────────────────────────────────────── */
.ar-status {
  color: var(--muted);
  padding: 9px 12px 8px;
  gap: 5px;
  display: inline-flex;
  align-items: center;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 9px;
  font-weight: 500;
  font-family: 'DM Sans', sans-serif;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  white-space: nowrap;
  transition: transform 0.1s;
  line-height: 1.2;
}
.ar-status:hover { color: var(--text); }
.ar-status-dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: rgba(143,109,85,0.35);
  flex-shrink: 0;
  transition: background .2s, box-shadow .2s;
}
.ar-status[data-status="request"] .ar-status-dot { background: #A8978A; box-shadow: 0 0 5px rgba(168,151,138,0.55); }
.ar-status[data-status="request"] .btn-label { color: #6A5A52; }
.ar-status[data-status="guest-request"] .ar-status-dot { background: #7BA7BC; box-shadow: 0 0 5px rgba(123,167,188,0.60); }
.ar-status[data-status="guest-request"] .btn-label { color: #3A6B7F; }
.ar-status[data-status="confirmation"] .ar-status-dot { background: #4AAE6A; box-shadow: 0 0 6px rgba(74,174,106,0.65); }
.ar-status[data-status="confirmation"] .btn-label { color: #2E7D4F; }
.ar-status[data-status="quotation"] .ar-status-dot { background: #D4A853; box-shadow: 0 0 6px rgba(212,168,83,0.70); }
.ar-status[data-status="quotation"] .btn-label { color: #9A7020; }
.ar-status[data-status="recommendations"] .ar-status-dot { background: #B07FD4; box-shadow: 0 0 5px rgba(176,127,212,0.60); }
.ar-status[data-status="recommendations"] .btn-label { color: #7A5A8A; }
@keyframes statusPop {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.12); }
  100% { transform: scale(1); }
}
.ar-status.status-animate { animation: statusPop 0.25s cubic-bezier(0.34,1.56,0.64,1) forwards; }

/* Inline status left-border on itinerary blocks */
#itin-rows > [id^="itin-block-"] {
  border-left: 3px solid transparent;
  transition: border-left-color 0.35s ease;
}
#itin-rows[data-itin-status="request"]      > [id^="itin-block-"] { border-left-color: rgba(168,151,138,0.45); }
#itin-rows[data-itin-status="quotation"]    > [id^="itin-block-"] { border-left-color: rgba(212,168,83,0.75); }
#itin-rows[data-itin-status="confirmation"] > [id^="itin-block-"] { border-left-color: rgba(74,174,106,0.80); }
/* Subtle separator before PDF/Save group */
.action-row > .ar-guest-first {
  border-left: 1px solid rgba(143,109,85,0.18) !important;
  margin-left: 2px;
}
/* No hairlines on either side of the ... button */
.action-row > .more-menu,
.action-row > .more-menu + * {
  border-left: none !important;
}
/* Armed "Clear?" state */
.btn.ar-new-armed { color: #b05050 !important; }

/* ═══════════════════════════════════════════════════════════════
   PREVIEW PANEL (right column)
═══════════════════════════════════════════════════════════════ */
.preview-panel {
  position: static;
  top: auto;
  display: flex;
  flex-direction: column;
  min-height: auto;
  max-height: none;
  overflow-y: visible;
  background: var(--grouped-bg, var(--panel-bg));
}
.preview-panel .panel-body {
  flex: 1;
  min-width: 0;
  min-height: 0;
  background: var(--grouped-bg, var(--panel-bg));
  padding: 0;
  overflow-x: auto;
  overflow-y: auto;
  position: relative;
}
.preview-panel .panel-header { 
  display: none;
}

/* Hide panel titles in form sections (already shown in category tabs) */
.cat-section.active > .panel.form-col .panel-title {
  display: none;
}

.cat-section.active > .panel.form-col .panel-header {
  border-bottom: none;
  padding: 2px 26px 2px;
  min-height: auto;
  justify-content: space-between;
  margin-bottom: 0;
  background: transparent;
}

/* ── Show light grey frame only for active panels ── */
.cat-section.active > .panel {
  border: none;
  background: transparent;
  box-shadow: none;
}

/* ── Hide frame for inactive panels ── */
.cat-section:not(.active) > .panel {
  border: none;
  background: transparent;
}

/* ── Templates ── */
.template-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  border-bottom: none;
  background: transparent;
  flex-wrap: wrap;
  min-height: 36px;
}
.template-chip {
  font-size: 11px;
  font-family: 'DM Sans', sans-serif;
  color: var(--gold);
  background: var(--gold-pale);
  border: 1px solid var(--gold-border);
  border-radius: 0px;
  padding: 3px 11px;
  cursor: pointer;
  transition: all .15s;
  white-space: nowrap;
}
.template-chip:hover { background: var(--bg-tertiary); }
.template-chip-del {
  font-size: 10px;
  color: var(--muted);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0 0 0 3px;
  line-height: 1;
  opacity: 0.6;
}
.template-chip-del:hover { opacity: 1; color: #c0392b; }

/* ── Subject line button ── */
.btn-subject { font-size: 11px; }
.subject-confirm { font-size: 10px; color: var(--gold); display:none; padding: 4px 8px; background: var(--gold-pale); border-radius: 0; white-space: nowrap; }
.subject-confirm.visible { display: inline-block; }
.preview-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

/* ── Document zoom control strip ── */
.doc-zoom-ctrl {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 2px;
  padding: 4px 12px 2px;
  background: var(--bg);
  flex-shrink: 0;
}
.doc-zoom-btn, .doc-zoom-pct-btn {
  background: none;
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--muted);
  cursor: pointer;
  font-family: 'DM Sans', sans-serif;
  font-size: 11px;
  line-height: 1;
  padding: 3px 7px;
  transition: color 0.12s, background 0.12s;
  -webkit-tap-highlight-color: transparent;
}
.doc-zoom-btn { font-size: 14px; font-weight: 400; padding: 1px 7px 3px; }
.doc-zoom-btn:hover, .doc-zoom-pct-btn:hover { color: var(--gold); background: var(--gold-pale); border-color: var(--gold-border); }
@media print { .doc-zoom-ctrl { display: none !important; } }

/* ── Preview footer action bar ── */
.preview-footer {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 10px 16px;
  border-top: 1px solid var(--border);
  background: var(--bg);
  border-radius: 0;
  flex-wrap: wrap;
  margin-top: auto;
}
.preview-footer .btn {
  flex: 1;
  min-width: 0;
  text-align: center;
  font-size: 11px;
  padding: 7px 10px;
  white-space: nowrap;
}
.preview-footer .copy-confirm,
.preview-footer .subject-confirm {
  font-size: 10px;
  flex-shrink: 0;
}
/* Mode-based button visibility in transfer preview footer */
.tf-mode-guest-request { display: none !important; }
.tf-mode-standard { display: inline-flex; }
#preview-footer-t.guest-request-mode .tf-mode-standard { display: none !important; }
#preview-footer-t.guest-request-mode .tf-mode-guest-request { display: flex !important; }

/* Guest-reply button row */
.tf-guest-reply-row {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}
.tf-reply-subj {
  flex: 0 0 auto;
  font-size: 11px;
  padding: 7px 12px;
  opacity: 0.7;
}
.tf-reply-copy {
  flex: 1;
  font-size: 11px;
  padding: 8px 14px;
  gap: 6px;
  justify-content: center;
  font-weight: 500;
}
.tf-reply-mail {
  flex: 1;
  font-size: 11px;
  padding: 8px 14px;
  gap: 6px;
  justify-content: center;
}
.preview-empty {
  padding: 0;
  text-align: center;
  color: var(--muted);
  display: flex;
  flex-direction: row;
  align-items: stretch;
  justify-content: stretch;
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 500px;
  border: none;
  overflow: auto;
  background: transparent;
  margin: 0;
  border-radius: 0;
  box-shadow: none;
}
.preview-empty::before {
  content: '';
  position: absolute;
  inset: 0;
  background: none;
  z-index: 0;
  pointer-events: none;
}
.preview-empty .watermark {
  display: block;
  position: relative;
  z-index: 1;
  margin: 0 auto;
  opacity: 0.65;
  pointer-events: none;
  width: 130px;
  filter: brightness(0) invert(1) drop-shadow(0 2px 8px rgba(0,0,0,0.5));
  height: auto;
  transition: opacity 0.3s ease;
}
.preview-empty:hover .watermark {
  opacity: 0.75;
}
.preview-empty .letterhead-top {
  display: none;
}
.preview-empty .letterhead-title {
  display: none !important;
}
.preview-empty .watermark {
  display: none !important;
}
.preview-empty .letterhead-top {
  display: none !important;
}
.preview-empty .letterhead-divider {
  width: 32px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(212,184,130,0.5), transparent);
  margin: 12px auto 20px;
  position: relative;
  z-index: 1;
}
.preview-empty .preview-empty-icon { display: none; }
#itin-calendar-view {
  display: flex;
  flex-direction: column;
}
#itin-calendar-dates {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.itin-cal-date-group {
  border: 1px solid rgba(180,155,115,0.15);
  border-radius: 6px;
  padding: 12px;
  background: rgba(245,241,236,0.4);
}
.itin-cal-date-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--gold);
  margin-bottom: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(180,155,115,0.12);
  padding-bottom: 8px;
}
.itin-cal-service {
  font-size: 11px;
  padding: 8px;
  margin-bottom: 6px;
  border-left: 3px solid var(--muted);
  background: rgba(255,255,255,0.5);
  border-radius: 3px;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.itin-cal-service.transfer { border-left-color: #4A90E2; }
.itin-cal-service.restaurant { border-left-color: #7ED321; }
.itin-cal-service.massage { border-left-color: #F5A623; }
.itin-cal-service.activity { border-left-color: #BD10E0; }
.itin-cal-time {
  font-weight: 600;
  color: var(--gold);
  flex-shrink: 0;
  min-width: 40px;
}
.itin-cal-details {
  flex: 1;
  color: var(--charcoal);
}
.itin-cal-name {
  font-weight: 500;
}
.preview-calendar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  width: 100%;
  padding: 40px 24px;
  opacity: 1;
  transition: opacity 0.3s ease;
}
.preview-calendar.hidden {
  opacity: 0;
  pointer-events: none;
}
.preview-cal-date {
  text-align: center;
}
.preview-cal-weekday {
  font-size: 13px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 8px;
  font-weight: 500;
}
.preview-cal-day {
  font-size: 48px;
  font-weight: 600;
  color: var(--gold);
  line-height: 1;
}
.preview-cal-month {
  font-size: 14px;
  color: var(--muted);
  margin-top: 8px;
  letter-spacing: 1px;
}
.preview-cal-services-list {
  width: 100%;
  max-width: 340px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.preview-cal-service-item {
  padding: 11px 12px;
  border-left: 4px solid var(--muted);
  background: rgba(255,255,255,0.6);
  border-radius: 4px;
  text-align: left;
  font-size: 11px;
  line-height: 1.4;
  overflow: hidden;
  word-break: break-word;
}
.preview-cal-service-item.transfer { border-left-color: #4A90E2; }
.preview-cal-service-item.restaurant { border-left-color: #7ED321; }
.preview-cal-service-item.massage { border-left-color: #F5A623; }
.preview-cal-service-item.activity { border-left-color: #BD10E0; }
.preview-cal-service-item.date { border-left-color: var(--gold); }
.preview-cal-time {
  font-weight: 600;
  color: var(--gold);
  font-size: 10px;
  margin-bottom: 2px;
  display: block;
  letter-spacing: 0.5px;
}
.preview-cal-name {
  color: var(--charcoal);
  font-weight: 500;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 280px;
}
.preview-empty p {
  font-size: 11.5px;
  line-height: 1.7;
  max-width: 240px;
  font-weight: 300;
  letter-spacing: 0.2px;
  color: rgba(255,255,255,0.55);
  position: relative;
  z-index: 1;
}
.preview-empty p em {
  color: rgba(212,184,130,0.85);
  font-style: italic;
}
@keyframes fadeFromLeft {
  from { opacity: 0; transform: translateX(-14px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes fadeDown {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
/* Header logo — slides in from left */
.header-logo-area {
  animation: fadeFromLeft 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.1s both;
}
/* "Document Preview" title — drops in from above */
.preview-empty .letterhead-title {
  animation: fadeDown 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.2s both;
}
/* Watermark logo — fades in gently */
.preview-empty .watermark {
  animation: fadeIn 0.9s ease 0.3s both;
}

/* ─── More menu (⋯) liquid-glass dropdown ──────────────────────── */
.more-menu { position: relative; display: inline-flex; }
.more-menu > .btn-more {
  background: transparent;
  color: var(--muted);
  border: none;
  font-size: 16px;
  letter-spacing: 0;
  padding: 6px 14px;
  line-height: 1;
  font-weight: 400;
  border-radius: 0;
}
.more-menu > .btn-more:hover { color: var(--gold); background: rgba(143,109,85,0.08); }
.more-menu.open > .btn-more { color: var(--gold); background: rgba(143,109,85,0.12); }

.more-menu-pop {
  position: fixed;
  min-width: 186px;
  background: rgba(255,252,248,0.86);
  backdrop-filter: blur(30px) saturate(220%);
  -webkit-backdrop-filter: blur(30px) saturate(220%);
  border: 1px solid rgba(255,255,255,0.72);
  box-shadow:
    0 -1px 0 rgba(255,255,255,0.92) inset,
    0 20px 56px -10px rgba(100,65,30,0.24),
    0 6px 18px rgba(0,0,0,0.10),
    0 1px 3px rgba(0,0,0,0.06);
  border-radius: 16px;
  padding: 5px;
  display: none;
  z-index: 9999;
  flex-direction: column;
  gap: 1px;
  overflow: hidden;
  transform-origin: bottom center;
}

@keyframes glassPopIn {
  0%   { opacity: 0; transform: scale(0.84) translateY(10px); }
  55%  { opacity: 1; transform: scale(1.03) translateY(-3px); }
  75%  { transform: scale(0.985) translateY(1px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}
.more-menu-pop.is-open {
  animation: glassPopIn 0.28s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
/* Copy / New live in the pill on desktop, so their duplicate More-menu entries
   (added for the slimmed phone pill) are hidden above phone width. */
@media (min-width: 601px) { .more-menu-pop .more-item-mobile { display: none !important; } }

.more-menu-pop .more-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 9px;
  background: transparent;
  border: none;
  color: var(--text);
  font-family: 'DM Sans', sans-serif;
  font-size: 9px;
  font-weight: 300;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 9px 13px 9px 14px;
  text-align: left;
  cursor: pointer;
  border-radius: 10px;
  transition: background .13s ease, color .13s ease;
  white-space: nowrap;
  width: 100%;
  overflow: hidden;
}
.more-menu-pop .more-item::before {
  content: '';
  position: absolute;
  left: 0; top: 22%; bottom: 22%;
  width: 2.5px;
  border-radius: 2px;
  background: var(--gold);
  transform: scaleY(0);
  opacity: 0;
  transition: transform .2s cubic-bezier(0.34,1.56,0.64,1), opacity .15s ease;
}
.more-menu-pop .more-item:hover {
  background: rgba(143,109,85,0.08);
  color: var(--gold-mid);
}
.more-menu-pop .more-item:hover::before {
  transform: scaleY(1);
  opacity: 1;
}
.more-menu-pop .more-item.danger { color: var(--muted); }
.more-menu-pop .more-item.danger:hover { color: #b05050; background: rgba(176,80,80,0.07); }

.more-item-icon {
  width: 13px; height: 13px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  opacity: 0.60; transition: opacity .15s; pointer-events: none;
}
.more-item-icon svg { width: 13px; height: 13px; }
.more-menu-pop .more-item:hover .more-item-icon { opacity: 1; }
.more-menu-pop .more-item.danger .more-item-icon { opacity: 0.4; }
.more-menu-pop .more-item.danger:hover .more-item-icon { opacity: 0.8; }

/* Dark mode */
html.dark-mode .more-menu-pop {
  background: rgba(30,26,22,0.88);
  border-color: rgba(212,175,143,0.22);
  box-shadow:
    0 -1px 0 rgba(255,255,255,0.06) inset,
    0 20px 56px -10px rgba(0,0,0,0.55),
    0 6px 18px rgba(0,0,0,0.30),
    0 1px 3px rgba(0,0,0,0.18);
}
html.dark-mode .more-menu-pop .more-item { color: #e0d8ce; font-weight: 300; }
html.dark-mode .more-menu-pop .more-item:hover { background: rgba(212,175,143,0.11); color: var(--gold); }

/* Dark mode — underline action bar */
html.dark-mode .action-row {
  background: rgba(42,38,32,0.95);
  border-color: rgba(212,175,143,0.35);
  box-shadow: 0 4px 24px rgba(0,0,0,0.55), 0 1px 8px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.08);
}
html.dark-mode .action-row > * + *,
html.dark-mode .action-row .subject-confirm,
html.dark-mode .action-row .copy-confirm {
  border-left-color: rgba(212,175,143,0.18);
}
html.dark-mode .btn { color: #b8aea0; background: transparent !important; }
html.dark-mode .btn:hover { background: transparent !important; color: var(--gold); border-bottom-color: rgba(212,175,143,0.5); }
html.dark-mode .btn-primary {
  background: transparent !important;
  color: var(--gold-ink);
}
html.dark-mode .btn-primary:hover { background: transparent !important; color: var(--gold); border-bottom-color: var(--gold); }
html.dark-mode .btn-outline { color: #b8aea0; background: transparent !important; }
html.dark-mode .btn-outline:hover { background: transparent !important; color: var(--gold); border-bottom-color: rgba(212,175,143,0.5); }
html.dark-mode .btn-outline.active { background: transparent !important; color: var(--gold); border-bottom-color: var(--gold); }
html.dark-mode .btn-copy { color: var(--gold-ink); background: transparent !important; }
html.dark-mode .btn-copy:hover { background: transparent !important; color: var(--gold-mid); border-bottom-color: var(--gold); }
html.dark-mode .more-menu > .btn-more:hover { background: rgba(212,175,143,0.12); }


/* ═══════════════════════════════════════════════════════════════
   DOCUMENT OUTPUT — La Réserve Eden au Lac Zurich
   Font: Barlow Condensed (≈ HelveticaNeueLT Pro 47 LtCn)
═══════════════════════════════════════════════════════════════ */

/* ── Preview wrapper: edge-to-edge, blends with form column ── */
.doc-output-wrap {
  /* Transparent, not var(--bg). This band frames the confirmation document,
     and --bg is the page ground, one step off whatever the preview pane is
     painted — invisible on the near-neutral default, a clear grey collar
     around the page on any scheme with colour in it. Transparent means it is
     the pane, in every theme, scheme and brightness level, with nothing to
     keep in sync. */
  background: transparent;
  padding: 0 8px 8px;
  border-radius: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  overflow: visible;
  overflow-anchor: none;
  transition: opacity 0.2s ease;
}
@starting-style {
  .doc-output-wrap {
    opacity: 0;
  }
}

/* ── A4 page card — light, minimal ── */
.doc-output {
  background: #FFFFFF;
  box-shadow: 0 4px 24px rgba(0,0,0,0.10), 0 1px 4px rgba(0,0,0,0.06);
  width: 100%;
  max-width: 700px;
  margin: 0 auto;
  box-sizing: border-box;
  font-family: var(--doc-font);
  font-size: 10pt;
  font-weight: 200;
  color: #222220;
  line-height: 1.3;
  letter-spacing: 0.01em;
  display: flex;
  flex-direction: column;
  overflow: visible;
  border: none;
  border-radius: 0;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
/* Windows: crisp text rendering in preview and PDF */

/* Kronenhalle attachment — shown as separate full-width sheets in the preview,
   clearly separated from the letter's footer above. */
.kh-attach-page { margin-top: 26px; padding: 0; background: #fff; border-top: 1px solid #ece7e1; }
.kh-attach-page img { display: block; width: 100%; height: auto; }

/* For print: remove all visual constraints */
@media print {
  .doc-output {
    min-height: 100%;
    height: 100%;
    box-shadow: none !important;
    border: none !important;
    border-radius: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: white !important;
    /* Consistent rendering across platforms in PDF output */
    -webkit-font-smoothing: auto !important;
    -moz-osx-font-smoothing: auto !important;
    text-rendering: optimizeLegibility !important;
    color: #1A1918 !important;
  }
  .doc-output *,
  .doc-salutation,
  .doc-para,
  .doc-condition,
  .doc-split-table td,
  .doc-split-table th {
    -webkit-font-smoothing: auto !important;
    color: inherit;
  }
}

/* For print: use actual A4/A5 dimensions */
@media print {
  
  /* Multi-page support: header and footer on each page */
  .doc-output {
    page-break-after: always;
  }
  
  .doc-output:last-of-type {
    page-break-after: avoid;
  }
  
  /* Allow body to break across pages */
  .doc-body {
    page-break-inside: auto;
    break-inside: auto;
  }
  
  /* Keep letterhead and footer together with content */
  .doc-letterhead {
    page-break-after: avoid;
    break-after: avoid;
  }
  
  .doc-footer-block {
    page-break-before: avoid;
    break-before: avoid;
  }
}

/* ── Transfer letter wrapper ── */
.transfer-letter {
  display: flex;
  flex-direction: column;
  flex: 1;
}
.transfer-letter .doc-letter-body {
  padding: 56px 24px 56px;
  flex: 1;
}

/* ── Non-transfer body ── */
.doc-output .doc-body {
  padding: 56px 24px 56px;
  flex: 1;
  display: flex;
  flex-direction: column;
}
/* Internal view banner */
.doc-internal-banner {
  background: rgba(212,168,83,0.10);
  border: 1px solid rgba(212,168,83,0.35);
  border-radius: 3px;
  padding: 5px 10px;
  margin: 0 24px 16px;
  font-size: 8.5px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #9A7020;
  font-family: 'DM Sans', sans-serif;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 8px;
}
.doc-internal-banner::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #D4A853;
  flex-shrink: 0;
}
/* Preview toggle button active state */
.btn-preview-toggle.active {
  background: rgba(212,168,83,0.15) !important;
  color: #9A7020 !important;
  border-color: rgba(212,168,83,0.4) !important;
}
.doc-output .doc-letterhead {
  border-bottom: 0.5px solid #D0C8C2;
  padding-bottom: 8px;
  margin-bottom: 6px;
}
.doc-cont-page .doc-letterhead {
  border-bottom: none;
  padding-bottom: 0;
}

/* ── Logo: centered top ── */
.doc-logo-block {
  text-align: center;
  padding: 14px 36px 10px;
  border-bottom: 0.5px solid #D8D2CC;
  margin-bottom: 14px;
}
.doc-logo {
  height: 62px;
  width: auto;
  display: inline-block;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}

/* ── Footer: centered bottom with partner logos ── */
.doc-footer-block {
  position: relative;
  text-align: center;
  font-family: var(--doc-font);
  font-size: 8pt;
  color: #8C7B6E;
  letter-spacing: 0.2px;
  padding: 14px 120px 24px;
  margin-top: auto;
  line-height: 1.65;
  min-height: 78px;
  flex-shrink: 0;
  width: 100%;
}
/* The footer used to close with a full-bleed 0.5px hairline, which read as a
   table rule rather than a considered end to the page. A short centred rule in
   the house gold closes the document without competing with the partner logos
   either side.

   Deliberately a SOLID colour, not a gradient: html2canvas (which rasterises
   confirmations into the PDF) clones the whole document and materialises every
   ::before into a real element, painting gradient backgrounds through canvas
   createPattern(). Any hidden/zero-size copy of this rule then throws
   ("canvas element with a width or height of 0") and aborts the entire PDF
   build. A solid colour is painted with fillRect instead, so it cannot hit
   that path. print-color-adjust is inherited from the @media print rule on
   html/body, but is restated so the rule is never dropped as "decorative". */
.doc-footer-block::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 200px;
  max-width: 55%;
  height: 1px;
  background-color: #D9C6A3;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
.doc-footer-block p { margin: 0; padding: 0; }
.doc-footer-text {
  display: inline-block;
  text-align: center;
}
.doc-footer-logo {
  position: absolute;
  bottom: 12px;
  width: auto;
  display: block;
  object-fit: contain;
  max-width: none;
}
.doc-footer-logo-left {
  left: 36px;
  height: 48px;
}
.doc-footer-logo-right {
  right: 36px;
  height: 48px;
}

/* ── Logo & footer hidden in the live preview to save space; they appear only
   in the final confirmation / PDF (which wraps content in .print-page). ── */
.doc-output-wrap .doc-logo-block,
.doc-output-wrap .doc-footer-block {
  display: none;
}
/* The footer's closing rule is decorative and invisible here, so skip it
   rather than have html2canvas materialise it when cloning the document. */
.doc-output-wrap .doc-footer-block::before { content: none; }

/* ── Date ── */
.doc-date-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 0 28px 0;
}
.doc-date-row .doc-quotation-label { margin: 0; }
.doc-date-row .doc-date { margin: 0; text-align: right; }
.doc-date {
  text-align: right;
  margin: 0;
  font-family: var(--doc-font);
  font-size: var(--doc-size);
  color: #1a1a18;
  line-height: 1.3;
}

/* ── Spacers ── */
.doc-spacer-sm { height: 3px; display: block; }
.doc-spacer-md { height: 6px; display: block; }

/* ── Body text ── */
.doc-salutation,
.doc-para{
  margin: 0 0 4px 0;
  padding: 0;
  line-height: 1.3;
  font-family: var(--doc-font);
  font-size: 10.5pt;
  font-weight: 200;
  color: #252523;
}
.doc-salutation { margin-bottom: 6px; }

/* ── Gold ── */
.doc-gold { color: #946E55; }
/* ── Graphite (the calendar-button ink) — used to take some weight off the gold ── */
.doc-graphite { color: #2E2E30; }

/* ── Bullet condition lines (Conditions / Cancellation policy) ── */
.doc-condition {
  margin: 0 0 3px 0;
  padding: 0 0 0 14px;
  line-height: 1.45;
  font-family: var(--doc-font);
  font-size: 9.5pt;
  color: #252523;
  position: relative;
}
.doc-condition::before {
  content: '–';
  position: absolute;
  left: 0;
  top: 0;
  color: #A8907A;
  font-size: 9.5pt;
  line-height: 1.45;
}
.doc-condition.doc-gold { color: #2E2E30; }
.doc-condition.doc-gold::before { color: #2E2E30; }
.doc-section-label {
  font-family: var(--doc-font);
  font-size: 8pt;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 1.4px;
  color: #5A4A3E;
  margin: 16px 0 5px 0;
  line-height: 1.3;
}
.doc-section-label.doc-gold { color: #946E55; }
.doc-note-block {
  margin: 12px 0 8px 0;
  padding: 9px 14px;
  border-left: 3px solid #946E55;
  background: none;
  border-radius: 0 3px 3px 0;
}
.doc-notes-row {
  display: flex;
  gap: 16px;
  margin: 10px 0 6px 0;
}
.doc-notes-row .doc-note-block {
  flex: 1;
  margin: 0;
}
.doc-note-label {
  font-family: var(--doc-font);
  font-size: 9.5pt;
  font-weight: 400;
  color: #2a2a28;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #946E55;
  margin: 0 0 2px 0;
}
.doc-note-text {
  font-family: var(--doc-font);
  font-size: 10.5pt;
  color: #2a2a28;
  margin: 0;
  line-height: 1.45;
  text-align: justify;
}

/* ══════════════════════════════════════════════════════
   SPLIT TABLE — Arrival | Departure (borderless)
══════════════════════════════════════════════════════ */
.doc-split-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  margin: 0 0 10px 0;
  font-family: var(--doc-font);
  font-size: var(--doc-size);
  line-height: 1.35;
  border: none;
}
.doc-split-table col.c-lbl1 { width: 17%; }
.doc-split-table col.c-val1 { width: 31%; }
.doc-split-table col.c-sep  { width:  4%; }
.doc-split-table col.c-lbl2 { width: 17%; }
.doc-split-table col.c-val2 { width: 31%; }

.doc-split-table th,
.doc-split-table td {
  border: none;
  padding: 2px 4px 2px 0;
  vertical-align: top;
  font-family: var(--doc-font);
  font-size: var(--doc-size);
  line-height: 1.35;
  color: #2a2a28;
  font-weight: 200;
}
.doc-split-table thead tr { background: transparent; }
.doc-split-table .col-head {
  font-weight: 300;
  padding-bottom: 4px;
  border-bottom: 0.75px solid #bbb;
  text-align: left;
}
.doc-split-table .hdr-spacer td  { height: 5px; line-height: 5px; padding: 0; border: none; }
.doc-split-table .price-spacer td { height: 5px; line-height: 5px; padding: 0; border: none; }
/* The label column reads at 400. It sat at the cell's own 200 with no rule of
   its own, which left "Date:" lighter than the value beside it — and with the
   font 404'ing, every weight below 600 rendered the same, so nothing could be
   done about it until the faces loaded. Measured once they did: 200 inks at
   29.1 and 400 at 40.0, while 350 comes out at 29.7 — the same Light face, a
   step that does not exist in this family. */
.doc-split-table .lbl-cell { color: #666; white-space: nowrap; font-weight: 400; }
.doc-split-table .val-cell { color: #2a2a28; font-weight: 300; }
.doc-split-table .price-total-row td { border-top: 1px solid #ccc; padding-top: 6px; font-weight: 300; color: #2a2a28; }
.transfer-request .val-cell { font-weight: 300; color: #2a2a28; }
.doc-confirm-list {
  margin: 4px 0 10px 0;
  padding-left: 18px;
  font-family: var(--doc-font);
  font-size: var(--doc-size);
  line-height: 1.6;
  color: #2a2a28;
}
.doc-confirm-list li { margin: 0 0 2px 0; }
html.dark-mode .doc-confirm-list { color: #CEC9C2; }
/* Itinerary "Included" list — same gold-bullet language as the cancellation
   policy, with a comfortable gap between the bullet and the text (not cramped). */
.doc-inc-list {
  margin: 1px 0; padding: 0; list-style: none;
  font-family: var(--doc-font); font-size: var(--doc-size); line-height: 1.35;
}
.doc-inc-list li { position: relative; padding-left: 16px; margin: 0 0 2px 0; }
.doc-inc-list li:last-child { margin-bottom: 0; }
.doc-inc-list li::before { content: "•"; position: absolute; left: 1px; top: 0; color: #8F6D55; }
/* Highlights: compact bullets under an activity's description (no label column) */
.doc-hl-list { margin: 1px 0 0; padding: 0; list-style: none; font-family: var(--doc-font); font-size: var(--doc-size); line-height: 1.3; }
.doc-hl-list li { position: relative; padding-left: 14px; margin: 0 0 1px 0; }
.doc-hl-list li:last-child { margin-bottom: 0; }
.doc-hl-list li::before { content: "•"; position: absolute; left: 1px; top: 0; color: #8F6D55; }
/* Subtle divider between the two halves */
.doc-split-table tbody td.col-sep-cell,
.doc-split-table thead td.col-sep-cell {
  border-right: none;
}

/* ══════════════════════════════════════════════════════
   SINGLE-COLUMN TABLE — Arrival or Departure only
══════════════════════════════════════════════════════ */
.doc-single-table {
  width: 50%;
  border-collapse: collapse;
  table-layout: fixed;
  margin: 0 0 10px 0;
  font-family: var(--doc-font);
  font-size: var(--doc-size);
  line-height: 1.35;
}
.doc-single-table col.c-lbl { width: 44%; }
.doc-single-table col.c-val { width: 56%; }
.doc-single-table th,
.doc-single-table td {
  border: none;
  padding: 2px 4px 2px 0;
  vertical-align: top;
  font-family: var(--doc-font);
  font-size: var(--doc-size);
  line-height: 1.35;
  color: #2a2a28;
  /* One weight for a transfer letter, whether it carries one leg or two. This
     block and the .doc-split-table block above it are otherwise parallel, but
     every weight here sat one step heavier — 300 against 200 on the cell, 400
     against 300 on the heading, the value and the total — so the same letter
     read heavier for a single arrival than for the round trip beside it. The
     split table's weights are the ones kept; the shared guest page already
     styles the two tables as one, so only the desk preview was out. */
  font-weight: 200;
}
.doc-single-table thead tr { background: transparent; }
.doc-single-table .col-head {
  font-weight: 300;
  padding-bottom: 4px;
  border-bottom: 0.75px solid #bbb;
  text-align: left;
}
.doc-single-table .hdr-spacer td  { height: 5px; line-height: 5px; padding: 0; border: none; }
.doc-single-table .price-spacer td { height: 5px; line-height: 5px; padding: 0; border: none; }
.doc-single-table .lbl-cell { color: #666; font-weight: 400; }
.doc-single-table .price-total-row td { border-top: 1px solid #ccc; padding-top: 6px; font-weight: 300; color: #2a2a28; }
.doc-single-table .val-cell { font-weight: 300; color: #2a2a28; }
.transfer-request .doc-single-table .val-cell,
.transfer-request .doc-grid-table td { font-weight: 200; color: #2a2a28; }

/* ══════════════════════════════════════════════════════
   GRID TABLES — P2P and Disposition (bordered)
══════════════════════════════════════════════════════ */
.doc-grid-table {
  width: 100%;
  border-collapse: collapse;
  margin: 4px 0 10px 0;
  font-family: var(--doc-font);
  font-size: 10pt;
  line-height: 1.35;
  border: none;
}
.doc-grid-table th,
.doc-grid-table td {
  border: none;
  padding: 4px 10px;
  vertical-align: middle;
  text-align: left;
  font-family: var(--doc-font);
  font-size: 10pt;
  line-height: 1.35;
  color: #2a2a28;
}
.doc-grid-table th:first-child,
.doc-grid-table td:first-child { padding-left: 0; }
.doc-grid-table th:last-child,
.doc-grid-table td:last-child  { padding-right: 0; }
/* Restaurant request (default) — P2P-style clean header, refined to the
   document's gold accent language with subtle per-row dividers. */
.doc-grid-table thead th {
  background: transparent;
  font-weight: 400;
  font-size: 8.5pt;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: #8F6D55;
  border-bottom: 1px solid rgba(143,109,85,0.32) !important;
  padding-top: 5px;
  padding-bottom: 7px;
}
.doc-grid-table tbody td {
  border-bottom: 1px solid rgba(143,109,85,0.12);
  padding-top: 6px;
  padding-bottom: 6px;
}
.doc-grid-table tbody tr:last-child td { border-bottom: none; }
.doc-grid-table th:nth-child(2),
.doc-grid-table td:nth-child(2) { padding-left: 28px; }
.doc-rec-desc { color: #666; }
html.dark-mode .doc-rec-desc { color: #7A726A; }

/* On-doc "Add to calendar" — plain gold text link just above the signature.
   Downloads the .ics locally; stripped from the shared capture and hidden when
   printed. Lives inside the letter body, which already supplies the side padding. */
.cd-cal-doclink { margin: 8px 0 16px 0; padding: 0; }
.cd-cal-doclink a { display: inline-flex; align-items: center; gap: 6px; color: #2E2E30; text-decoration: none; font-family: var(--doc-font); font-size: 9.5pt; font-weight: 400; letter-spacing: 0.3px; line-height: 1.2; padding: 6px 13px 6px 11px; border: 1px solid #e6e0d8; border-left: 2.5px solid #2E2E30; border-radius: 6px; }
.cd-cal-doclink a:hover { background: rgba(46,46,48,0.06); }
html.dark-mode .cd-cal-doclink a { color: #C7C2BB; border-color: rgba(255,255,255,0.14); border-left-color: #C7C2BB; }
/* In print/PDF, keep only the hosted link (a real tappable URL); hide the
   screen-only download button, which can't function in a static PDF. */
@media print { .cd-cal-doclink:not(.cd-cal-hosted) { display: none !important; } }

/* Transfer request (Disposition / grid) — clean minimalist look */
.transfer-request .doc-grid-table thead th {
  background: transparent;
  font-weight: 500;
  color: #6B5A4E;
  text-transform: uppercase;
  letter-spacing: 2.5px;
  font-size: 8.5pt;
  padding-top: 6px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(107,90,78,0.30);
}
.transfer-request .doc-grid-table tbody td {
  background: transparent;
  border-bottom: none;
  padding-top: 10px;
  padding-bottom: 10px;
}
.transfer-request .doc-grid-table tbody tr:last-child td { border-bottom: none; }

.doc-p2p-table { font-size: 9.5pt !important; width: 100%; table-layout: fixed !important; }
.doc-p2p-table th {
  white-space: nowrap !important;
  overflow: visible;
  font-size: 8.5pt !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  letter-spacing: 2.5px !important;
  color: #6B5A4E !important;
  background: transparent !important;
  border-bottom: 1px solid rgba(107,90,78,0.28) !important;
  padding-top: 5px !important;
  padding-bottom: 6px !important;
}
.doc-p2p-table td {
  white-space: nowrap;
  overflow: visible;
  vertical-align: top !important;
  font-size: 9.5pt !important;
  background: transparent !important;
  border-bottom: none !important;
  padding-top: 6px !important;
  padding-bottom: 6px !important;
}
/* Proportioned columns + right-aligned price so it sits flush right, not bunched left */
.doc-p2p-table th:nth-child(1),.doc-p2p-table td:nth-child(1){ width:30%; }
.doc-p2p-table th:nth-child(2),.doc-p2p-table td:nth-child(2){ width:11%; padding-left:22px !important; }
/* Passenger count in the P2P table, but a service name plus its duration in
   the disposition one — "Chauffeurservice · 8 hours" is the ordinary case
   there, not an edge case, and it ran on into the car model beside it at
   19%. Widened at the expense of time, car and price, all three of which
   had room going spare; the row-level font scale (see renderDisposition)
   only has to step in for something well past ordinary, and the ellipsis
   here is the backstop under that — one line, never a second, and never a
   run into the column beside it. */
.doc-p2p-table th:nth-child(3),.doc-p2p-table td:nth-child(3){ width:30%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Car Model reads down the column, not across to the price. Right-aligning it
   pinned both the heading and the value to the same right edge, so the value
   started 45px inside the heading — "V-Class" sitting under the "MODEL" half of
   "CAR MODEL". Left-aligned, the two share a starting edge; the 11px indent
   holds the heading exactly where it already sat. Price is left-aligned too —
   right-aligning it pins the digits to the column's right edge, so "CHF 350"
   and "CHF 173 per hour" start from different points and the "CHF" doesn't
   line up down the column; left-aligned, every row's "CHF" shares one edge. */
.doc-p2p-table th:nth-child(4),.doc-p2p-table td:nth-child(4){ width:16%; text-align:left !important; padding-left:11px !important; padding-right:20px !important; }
.doc-p2p-table th:nth-child(5),.doc-p2p-table td:nth-child(5){ width:13%; text-align:left !important; padding-left:11px !important; }
/* Data row has no bottom border — visually joins the route sub-row below it */
.doc-p2p-table tr.p2p-data-row td { border-bottom: none !important; padding-bottom: 2px !important; }
/* Sub-charge row (disposition multi-charge) */
.doc-p2p-table tr.disp-sub-charge-row td { border-bottom: none; padding-top: 4px !important; padding-bottom: 8px !important; }
.doc-p2p-table tr.p2p-data-row + tr.disp-sub-charge-row td { border-bottom: none; }
.doc-p2p-table tr.p2p-data-row:has(+ tr.disp-sub-charge-row) td { border-bottom: none !important; }
/* Route sub-row: muted, italic, full-width, owns the row separator */
.doc-p2p-table tr.p2p-route-row td {
  white-space: normal !important;
  overflow: visible !important;
  word-break: break-word;
  font-size: 9.5pt !important;
  color: #424040 !important;
  font-style: italic;
  font-family: 'HelveticaNeueLT Pro 47 LtCn', 'Barlow Condensed', 'Arial Narrow', Arial, sans-serif !important;
  padding-top: 1px !important;
  padding-bottom: 8px !important;
  border-bottom: none !important;
}
.doc-p2p-table tbody tr:last-child td { border-bottom: none !important; }

/* ══════════════════════════════════════════════════════
   DETAILS TABLE — Restaurant / massage
══════════════════════════════════════════════════════ */
.doc-details-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  margin: 4px 0 10px 0;
  font-family: var(--doc-font);
  font-size: var(--doc-size);
  line-height: 1.35;
}
.doc-details-table td {
  padding: 2px 6px 2px 0;
  vertical-align: top;
  font-family: var(--doc-font);
  font-size: var(--doc-size);
  color: #2a2a28;
  border: none;
}
.doc-details-table td.lbl { width: 32%; color: #666; }
.doc-details-table td.val { width: 68%; }

/* ══════════════════════════════════════════════════════
   MASSAGE SERVICE TABLE
══════════════════════════════════════════════════════ */
.doc-service-table {
  width: 100%;
  border-collapse: collapse;
  margin: 4px 0 10px 0;
  font-family: var(--doc-font);
  font-size: var(--doc-size);
  border: none;
}
.doc-service-table th,
.doc-service-table td {
  border: none;
  padding: 5px 10px;
  font-family: var(--doc-font);
  font-size: var(--doc-size);
  line-height: 1.35;
  text-align: left;
  vertical-align: middle;
}
.doc-service-table th:first-child,
.doc-service-table td:first-child { padding-left: 0; }
.doc-service-table th:last-child,
.doc-service-table td:last-child  { padding-right: 0; }
.doc-service-table thead th {
  background: transparent;
  font-weight: 500;
  font-size: 8.5pt;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #7A6455;
  border-bottom: 1px solid #C8B89A;
  padding-top: 7px;
  padding-bottom: 7px;
}
.doc-service-table thead th:first-child { padding-left: 6px; border-radius: 2px 0 0 0; }
.doc-service-table thead th:last-child  { padding-right: 6px; border-radius: 0 2px 0 0; }
.doc-service-table tbody td { border-bottom: none; padding-top: 7px; padding-bottom: 7px; }
.doc-service-table tbody tr:last-child td { border-bottom: none; }
.doc-service-table .total-row td {
  font-weight: 500;
  font-size: 10.5pt;
  background: transparent;
  border-top: 1.5px solid #C8B89A;
  padding-top: 9px;
  padding-bottom: 7px;
}

/* ══════════════════════════════════════════════════════
   SIGNATURE
══════════════════════════════════════════════════════ */
.doc-signature {
  margin-top: 32px;
  font-family: var(--doc-font);
  font-size: 9.5pt;
  font-weight: 200;
  line-height: 1.4;
}
.doc-quotation-label {
  font-family: var(--doc-font);
  font-size: 8.5pt;
  font-weight: 500;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 10px 0;
  padding: 0;
}
.doc-proceed-box {
  margin: 14px 0;
  padding: 11px 16px;
  border-left: 3px solid var(--gold);
}
.doc-proceed-text {
  margin: 0;
  font-family: 'Barlow Condensed', 'Arial Narrow', Arial, sans-serif;
  font-size: 9pt;
  color: #4A3C35;
  font-style: italic;
  line-height: 1.45;
}
.doc-signature p    { margin: 0; line-height: 1.4; }
.doc-signature-sm { font-size: 9.5pt !important; margin-top: 24px; }
.doc-signature .closing   { color: #1a1a18; }
.doc-signature .sig-gap   { height: 14px; display: block; }
.doc-signature .sig-name  { color: #1a1a18; font-weight: 500; font-size: 10pt; }
.doc-signature .sig-title { color: #7F7F7F; font-weight: 200; }
.doc-signature .sig-hotel { color: #7F7F7F; font-weight: 200; }
.doc-signature .clefs-tag { font-size: 8.5pt; color: #8F6D55; margin-top: 2px; display: block; }

/* Copy confirm */
.copy-confirm {
  font-size: 10px; color: var(--gold);
  padding: 6px 12px; background: var(--gold-pale);
  border-radius: 3px; display: none;
}
.copy-confirm.visible { display: inline-block; }

/* ── Lock viewport — no outer page scroll on desktop ── */
@media (min-width: 641px) {
  html { height: 100%; overflow: hidden; }
  body { height: 100%; overflow: hidden; }
}


.cat-section {
  display: none;
}

.cat-section.active {
  display: grid;
  grid-template-columns: 1fr 16px 1fr;
  gap: 0;
  align-items: stretch;
  grid-column: 1 / -1;
  width: 100%;
  height: calc(100vh - 136px);
  max-height: calc(100vh - 136px);
  overflow: hidden;
  padding: 0;
  /* The panes on either side paint --grouped-bg; the 16px resizer column
     between them is transparent, so whatever this container is painted shows
     through as a vertical stripe. It was --bg — a different ground from both
     panes. */
  background: var(--grouped-bg, var(--bg));
  border: none;
  margin: 0;
  position: relative;
}

/* ── Overlay mode: preview floats over form when dragged past min width ── */
.cat-section.active.split-overlay > .panel:not(.form-col) {
  position: absolute !important;
  right: 0;
  top: 0;
  height: 100%;
  z-index: 20;
  box-shadow: -8px 0 32px rgba(0,0,0,0.10);
  border-left: 1px solid var(--border);
  background: var(--grouped-bg, var(--bg));
  overflow-y: auto;
}
.cat-section.active.split-overlay > .split-resizer {
  position: absolute !important;
  top: 0;
  height: 100%;
  z-index: 21;
}

/* ── P2P vehicles, added in the row itself ──────────────────────────
   A model and a count on one line, with more lines beneath when the party
   needs a mixed fleet. The count sits inside the Vehicle cell rather than
   taking a column of its own, so the row keeps the shape it has always had
   and a single-car booking looks untouched. */
/* The row's own grid. In CSS rather than inline so the Vehicle column can be
   given more of the row when the journey books a second model — the width
   comes off Date and Time, which have slack, and off Pax, which needs almost
   none. */
.p2p-detail-grid {
  display: grid;
  /* Weighted by what each column actually shows, measured at 1500px with the
     row filled: a date needs ~92px, a time ~54, a pax count ~30, the model and
     its count together ~115, a price ~50. The even-ish split it had gave Time,
     Pax and CHF 53-69px of empty underline each while the Vehicle cell — the
     only one carrying two controls — had the least room per control. This
     moves about 45px out of the three short columns and into Vehicle. */
  grid-template-columns: 1.25fr 0.9fr 0.6fr 1.6fr 0.75fr;
  gap: 10px;
  /* start, not end. Every cell is a label over one control of the same height,
     so the two look identical on an ordinary row — but a row restored with a
     second model makes the Vehicle cell taller, and bottom-aligning then holds
     the other four down at the row's bottom while the Vehicle field, label and
     all, rides to the top: measured 43px out. Aligning to the top instead lets
     that cell grow downward with every label still on one line. */
  align-items: start;
}
/* A native date or time input renders 37.2px tall against 35.2px for a text
   input or a combobox — the picker's own line box — so the five underlines in
   the row sat on two different levels. Pinned here rather than app-wide: this
   is the row where the mismatch shows, five fields side by side. */
.p2p-detail-grid .field input:not([type="hidden"]),
.p2p-detail-grid .field select,
.p2p-detail-grid .srch-sel-input,
/* The form column's own date/time rule sets height:auto from a six-class
   selector, so a plainer one here never reached them — the two inputs stayed
   37.2px while everything beside them took 36. Same context, one class more. */
.cat-section.active > .panel.form-col .p2p-detail-grid .field input:not([type="hidden"]),
.cat-section.active > .panel.form-col .p2p-detail-grid .field select,
.cat-section.active > .panel.form-col .p2p-detail-grid .srch-sel-input {
  height: 36px;
  box-sizing: border-box;
}
/* A row saved with more than one model still shows them; it just cannot be
   given a second one from here any more. The column takes more of the row in
   that case, and the models wrap rather than clip. */
.p2p-detail-grid.veh-2 { grid-template-columns: 0.8fr 0.68fr 0.7fr 3.4fr 0.6fr; }
.p2p-detail-grid.veh-3 { grid-template-columns: 0.7fr 0.6fr 0.6fr 4.8fr 0.55fr; }

/* Models sit next to each other on one line; each is a model and a count, and
   every one after the first carries its own ×. They wrap rather than overflow
   once the row runs out of width. */
.tf-veh-line { display: flex; align-items: flex-end; gap: 6px; flex-wrap: nowrap; }
/* One model: basis 0 so the pair shrinks to whatever the column gives it and
   the + never wraps. On basis auto the item's base width is the select plus
   the count box, which overran the column and pushed the + onto a second line
   — two lines tall on every row, one car or not, and 40px out of line with
   Date and Time. */
.tf-veh-item { display: flex; align-items: flex-end; gap: 6px; min-width: 0; flex: 1 1 0; }

/* Two or more: side by side while the row is wide enough to read them, and
   wrapping to the next line when it is not. A model needs 62px for "S-Class",
   plus 34 for the count, 24 for the ×, and the gaps between — 132px. Held to
   one line regardless, the second model measured 24px at a 1280px viewport
   and 16px at 1100px, which is a dropdown showing no model at all. */
.p2p-detail-grid.veh-2 .tf-veh-item,
.p2p-detail-grid.veh-3 .tf-veh-item { flex: 1 1 auto; min-width: 132px; }
.p2p-detail-grid.veh-2 .tf-veh-line,
.p2p-detail-grid.veh-3 .tf-veh-line { flex-wrap: wrap; row-gap: 8px; }
.tf-veh-item select { flex: 1 1 auto; min-width: 0; }

/* The added items sit outside a .field, so none of the form's control styling
   reaches them — the count came out as a boxed native input beside the bare
   underlined one. Same treatment here, so the line reads as one control. */
.tf-veh-item + .tf-veh-item select,
.tf-veh-item + .tf-veh-item input {
  font-size: 13px;
  font-weight: 300;
  color: var(--text);
  background: transparent;
  background-image: none;
  border: none;
  border-radius: 0;
  padding: 9px 8px 8px;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  box-shadow: none;
  border-bottom: 1px solid var(--border);
}
.tf-veh-item + .tf-veh-item select:focus,
.tf-veh-item + .tf-veh-item input:focus { border-bottom-color: var(--gold); }

.tf-veh-line select { flex: 1 1 auto; min-width: 0; }
/* A dropdown, not a typed box: a count of cars is one of a handful of values,
   and it matches Pax and the model beside it rather than introducing a third
   kind of control to the row. */
.tf-veh-qty {
  flex: 0 0 38px;
  width: 38px;
}
.tf-veh-del {
  flex: 0 0 auto;
  /* Matched to the control height beside it: at 22px against a 36px field the
     button hung below the model name rather than sitting on its line. */
  width: 26px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  padding: 0; border: none; background: none;
  color: var(--muted); font-size: 15px; line-height: 1;
  cursor: pointer; border-radius: 50%;
  transition: color 0.15s, background 0.15s;
}
.tf-veh-del:hover { color: var(--gold-ink, #7A5C42); background: var(--gold-pale); }
/* The + sits on the line, not under it. Below the cell it made the Vehicle
   column taller than Date, Time and Pax beside it, and since the row bottom-
   aligns, the select rode up out of line with them on every row — including
   the great majority that only ever book one car. */
.tf-veh-add {
  flex: 0 0 auto;
  width: 24px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  padding: 0; border: none; background: none;
  color: var(--muted); font-size: 16px; line-height: 1;
  cursor: pointer; border-radius: 50%;
  transition: color 0.15s, background 0.15s;
}
.tf-veh-add:hover { color: var(--gold-ink, #7A5C42); background: var(--gold-pale); }
.tf-veh-del, .tf-veh-add { border-radius: var(--radius, 4px); }
/* One + per row, at the end of the line; every model after the first owns a ×. */
/* Touch targets get room on a phone, where the row stacks anyway. */
@media (max-width: 600px) {
  .tf-veh-qty { flex-basis: 56px; width: 56px; }
  .tf-veh-del, .tf-veh-add { width: 30px; height: 30px; }
}

/* ── Draggable split resizer ── */
.split-resizer {
  grid-column: 2;
  grid-row: 1;
  align-self: stretch;
  cursor: col-resize;
  background: transparent;
  position: relative;
  z-index: 10;
  min-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* The divider parts the two panes; it does not wall them off.

   Every state of it was transparent once, so with both grounds brought to one
   colour there was nothing marking the seam at all. It is a real line again,
   but it fades out at the top and the bottom rather than running the full
   height: the content on both sides stops well short of the window's bottom
   edge, and a rule that carried on through that empty space read as a wall
   dividing the window rather than a seam between two things.

   The column it sits in is 8px wide, not 16. The line needs 2 of those; the
   other 8 were being taken off both panes to hold nothing. Grabbing it does
   not get harder, because the hit area below is wider than the column. */
.split-resizer::before {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  /* A whole pixel, not the centre. The column is 8px and the line is 1, so
     centring puts it on a half-pixel and the browser draws it across two
     columns at half strength each — a blurred 2px smudge instead of a
     hairline, and fainter than the tone asks for. Three is half a pixel left
     of centre, which nothing can see, and it renders crisp. */
  left: 3px;
  width: 1px;
  /* Nothing at rest. The two panes are told apart by what is in them, and a
     rule down the middle of a desk that is already one desk was reading as
     noise however thin or quiet it was made — 2px at 53 luma steps, then a
     hairline at 27, and it was still the first thing the eye went to.
     The line is not deleted, because the divider still has to be findable the
     moment it is reached for: it paints on hover and while dragging, below. */
  background: transparent;
  transition: background 0.15s;
}
/* A grab zone wider than the column it lives in, so the divider can be thin
   without becoming fiddly: 8px of layout, 22px of target. It overhangs the
   panes by 7px either side, which is inside their own padding — nothing
   clickable sits that close to the edge. */
.split-resizer::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  left: -7px; right: -7px;
  background: transparent;
}
html.dark-mode .split-resizer::before { background: transparent; }
/* The whole of the affordance. Reaching for the divider paints it gold down
   its length; letting go takes it away again. The hit area is 21px wide while
   the column is 8, so it is found by pointing at the seam rather than at a
   line — which is why nothing needs to be drawn there the rest of the time. */
.split-resizer:hover::before,
.split-resizer.dragging::before {
  background: linear-gradient(to bottom,
              transparent 0,
              var(--gold, #8F6D55) 3%,
              var(--gold, #8F6D55) 97%,
              transparent 100%);
}
html.dark-mode .split-resizer:hover::before,
html.dark-mode .split-resizer.dragging::before {
  background: linear-gradient(to bottom,
              transparent 0,
              var(--gold-ink, #C9A98A) 3%,
              var(--gold-ink, #C9A98A) 97%,
              transparent 100%);
}
.split-resizer:hover::after,
.split-resizer.dragging::after {
  color: transparent;
  background: transparent;
  border-color: transparent;
}
/* Collapse / expand preview button */
.split-collapse-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 13px;
  color: var(--muted);
  opacity: 0;
  transition: opacity 0.15s, color 0.15s, border-color 0.15s;
  z-index: 2;
  padding: 0;
  line-height: 1;
}
.split-resizer:hover .split-collapse-btn,
.split-collapse-btn:focus { opacity: 1; }
.split-collapse-btn:hover { color: var(--gold); border-color: var(--gold); }
/* When preview is collapsed, always show the expand arrow */
.cat-section.split-preview-collapsed > .split-resizer .split-collapse-btn { opacity: 1; }
/* Collapsed state: preview hidden, form takes full width */
.cat-section.split-preview-collapsed > .panel:not(.form-col) { display: none !important; }
.cat-section.split-preview-collapsed { grid-template-columns: 1fr auto !important; }
.cat-section.split-preview-collapsed > .split-resizer {
  border-left: 1px solid var(--border);
  width: 28px;
}

/* Form panel takes left column — form-col is the scroll container; content flows naturally with no forced gap */
.cat-section.active > .panel.form-col {
  grid-column: 1;
  grid-row: 1;
  border: none;
  padding-right: 0;
  padding-left: 0;
  background: var(--bg);
  box-shadow: none;
  height: calc(100vh - 136px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  container-type: inline-size;
  container-name: form-panel;
  transform: translateZ(0);
}
/* panel-body is the scroll container; padding-bottom leaves room for the floating pill */
.cat-section.active > .panel.form-col .panel-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
  scroll-behavior: smooth;
  display: flex;
  flex-direction: column;
  gap: 16px;
  /* 15 and 15, not 16 and 14. The card inside sat 16px from the left edge of
     the panel and 14px from the right — measured at a 1500 window, 742px
     panel — so every table on the desk was two pixels off centre inside its
     own column, and the 4px scroll bar moved it the other way whenever the
     form was long enough to scroll. The pair still adds to 30, so no table
     loses a pixel of row width to the fix. */
  padding-right: 15px;
  padding-left: 15px;
  padding-bottom: 80px;
}
/* Wide panels have width to spare and cramped tables all the same: at a 742px
   panel the seven-column arrival row needs 547 and is given 672. The extra air
   is spent only where that slack exists, so nothing moves on a narrow panel,
   where the row is the thing that needs the pixels. */
@container form-panel (min-width: 700px) {
  .cat-section.active > .panel.form-col .panel-body { padding-left: 22px; padding-right: 22px; }
}
.cat-section.active > .panel.form-col .panel-body::-webkit-scrollbar { display: none; }
/* form-col is the positioning context for the floating pill */
.cat-section.active > .panel.form-col {
  position: relative;
}
/* Action-row floats over the scrolling content — no background band */
@media (min-width: 641px) {
  .cat-section.active > .panel.form-col > .action-row {
    position: absolute;
    bottom: 14px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 25;
    background: transparent;
    border-top: none;
    padding: 10px 16px 14px;
    margin: 0 !important;
    /* Prevent pill from bleeding outside form-col into the preview panel */
    max-width: calc(100% - 24px);
  }
}
.cat-section.active > .panel.form-col > .template-bar {
  position: absolute;
  bottom: 72px;
  left: 0;
  right: 0;
  z-index: 25;
  padding-left: 16px;
  padding-right: 16px;
}
/* Hide template-bars with no chips — no dead space */
.template-bar:not(:has(.template-chip)) { display: none; }

/* ── Container queries: adapt tf-grids to actual form-col width ── */
@container form-panel (max-width: 640px) {
}
@container form-panel (max-width: 520px) {

  /* Massage rows: 3 equal cols — Service+Duration / Date+Time+Price */
  .massage-row{
    grid-template-columns: minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);
    row-gap: 6px;
  }
  .massage-row > .field:nth-child(1) { grid-column: 1 / span 2; grid-row: 1; }
  .massage-row > .field:nth-child(2) { grid-column: 1; grid-row: 2; }
  .massage-row > .field:nth-child(3) { grid-column: 2; grid-row: 2; }
  .massage-row > .field:nth-child(4) { grid-column: 3; grid-row: 1; }
  .massage-row > .field:nth-child(5) { grid-column: 3; grid-row: 2; }
  .massage-row > .btn-remove-row    { grid-column: 3; justify-self: end; }
}
@container form-panel (max-width: 380px) { .tf-grid-2 { grid-template-columns: 1fr; }
  .field-row { grid-template-columns: 1fr !important; }
  .field-row .field { width: auto !important; }

  /* Massage rows: keep 3-col layout, same as 520px breakpoint */
  .massage-row{
    grid-template-columns: minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);
  }
  .massage-row > .field:nth-child(1) { grid-column: 1 / span 2; grid-row: 1; }
  .massage-row > .field:nth-child(2) { grid-column: 1; grid-row: 2; }
  .massage-row > .field:nth-child(3) { grid-column: 2; grid-row: 2; }
  .massage-row > .field:nth-child(4) { grid-column: 3; grid-row: 1; }
  .massage-row > .field:nth-child(5) { grid-column: 3; grid-row: 2; }
  .massage-row > .btn-remove-row    { grid-column: 3; justify-self: end; align-self: end; }
}

/* ── Touch-friendly resizer: wider grab area on pointer:coarse devices ── */
@media (pointer: coarse) {
  .split-resizer {
    width: 28px !important;
    touch-action: none;
  }
  /* Prevent iOS Safari auto-zoom on input focus — applies on any touch device
     regardless of viewport width (covers Lovable preview and wider iframes) */
  input, textarea, select {
    font-size: 16px !important;
  }
}

/* iOS-specific belt-and-suspenders: -webkit-touch-callout only exists on iOS Safari */
@supports (-webkit-touch-callout: none) {
  input, textarea, select { font-size: 16px !important; }
}

/* Preview panel takes right column — independent scroll, no visible scrollbar */
.cat-section.active > .panel:not(.form-col) {
  grid-column: 3;
  grid-row: 1;
  position: static;
  height: calc(100vh - 136px);
  max-height: calc(100vh - 136px);
  overflow-y: auto;
  overflow-anchor: none;
  scroll-behavior: smooth;
  /* 4, not 12. The letter inside is scaled to fit whatever this panel leaves,
     so every pixel of side padding comes straight off the size it is read at.
     On a full desk it costs nothing either way — the letter caps at its 700px
     design width and the padding just widens the ground around it — but in a
     split-screen window the panel is ~416px and the letter was being fitted
     into 392 of it. */
  padding-left: 4px;
  padding-right: 4px;
  border: none;
  background: var(--bg);
  box-shadow: none;
  scrollbar-width: thin;
  scrollbar-color: var(--gold-border) transparent;
}
.cat-section.active > .panel:not(.form-col)::-webkit-scrollbar { width: 4px; }
.cat-section.active > .panel:not(.form-col)::-webkit-scrollbar-track { background: transparent; }
.cat-section.active > .panel:not(.form-col)::-webkit-scrollbar-thumb { background: var(--gold-border); border-radius: 4px; }
.cat-section.active > .panel:not(.form-col)::-webkit-scrollbar-thumb:hover { background: var(--gold-mid); }
/* Form panel: thin scrollbar only when content overflows */
.cat-section.active > .panel.form-col .panel-body { scrollbar-width: thin; scrollbar-color: var(--gold-border) transparent; }
.cat-section.active > .panel.form-col .panel-body::-webkit-scrollbar { display: block; width: 4px; }
.cat-section.active > .panel.form-col .panel-body::-webkit-scrollbar-track { background: transparent; }
.cat-section.active > .panel.form-col .panel-body::-webkit-scrollbar-thumb { background: var(--gold-border); border-radius: 4px; }
.cat-section.active > .panel.form-col .panel-body::-webkit-scrollbar-thumb:hover { background: var(--gold-mid); }

/* Hide preview-footer — buttons merged into left panel */
.preview-footer { display: none !important; }

/* ══════════════════════════════════════════════════════
   PRINT — A4, logo and footer included
══════════════════════════════════════════════════════ */
@media print {
  @page { size: A4; margin: 15mm 18mm 15mm 18mm; }

  body, html { background: white !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }

  .app-header, .mode-bar, .cat-bar, .mode-sub-bar, .form-col,
  .preview-panel .panel-header, .preview-actions,
  .action-row, .preview-empty, .copy-confirm, .btn, .mobile-preview-toggle { display: none !important; }

  main { display: block !important; padding: 0 !important; max-width: 100% !important; }
  
  .split-resizer { display: none !important; }

  /* Reset cat-section grid layout for printing */
  .cat-section.active {
    display: block !important;
    grid-template-columns: auto !important;
    gap: 0 !important;
    padding: 0 !important;
    border: none !important;
    margin: 0 !important;
  }
  
  /* Reset panel positioning for print */
  .cat-section.active > .panel.form-col {
    grid-column: auto !important;
    grid-row: auto !important;
    border-right: none !important;
    padding-right: 0 !important;
    display: none !important;
  }
  
  .cat-section.active > .panel:not(.form-col) {
    grid-column: auto !important;
    grid-row: auto !important;
    position: static !important;
    top: auto !important;
    padding-left: 0 !important;
  }

  .preview-panel { position: static !important; border: none !important; box-shadow: none !important; width: 100% !important; }
  .preview-panel .panel-body { padding: 0 !important; }

  .doc-output-wrap { 
    background: white !important; 
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;
  }
  .doc-output {
    box-shadow: none !important;
    max-width: 100% !important;
    margin: 0 !important;
    height: 100% !important;
    min-height: 100% !important;
    overflow: visible !important;
    page-break-after: avoid;
    break-after: avoid;
    display: flex !important;
    flex-direction: column !important;
  }
  .doc-output .doc-body {
    flex: 1 !important;
  }
  .transfer-letter .doc-letter-body { padding: 0 !important; }
  .transfer-letter, .doc-output-inner {
    page-break-inside: avoid;
    break-inside: avoid;
  }
  
  /* Itinerary blocks can break across pages for better distribution */
  .doc-body > div[style*="border:1px solid"] {
    page-break-inside: avoid !important;
    break-inside: avoid !important;
  }
  
  .doc-logo-block { padding: 0 0 8px !important; }
  .doc-footer-block {
    padding: 10px 92px 8px !important;
    min-height: 64px !important;
    margin-top: auto !important;
    flex-shrink: 0 !important;
    page-break-inside: avoid !important;
    break-inside: avoid !important;
    page-break-before: avoid !important;
    break-before: avoid !important;
  }
  .doc-footer-logo {
    bottom: 8px !important;
  }
  .doc-footer-logo-left {
    left: 0 !important;
    height: 32px !important;
  }
  .doc-footer-logo-right {
    right: 0 !important;
    height: 32px !important;
  }

  .doc-split-table, .doc-single-table, .doc-grid-table,
  .doc-details-table,
  .doc-service-table, .doc-signature {
    page-break-inside: avoid;
    break-inside: avoid;
  }

  /* Never split an individual label/value row across a page break. */
  .doc-output tr { page-break-inside: avoid; break-inside: avoid; }

  /* Keep a section label with the rows it introduces, and a heading with the
     content beneath it, rather than orphaning it at the foot of a page. */
  .doc-section-label, .doc-output h4, .doc-output .title,
  .doc-confirm-list li, .doc-inc-list li, .doc-condition {
    page-break-inside: avoid; break-inside: avoid;
  }
  .doc-section-label, .doc-output h4, .doc-output .title {
    page-break-after: avoid; break-after: avoid;
  }

  /* Avoid one- or two-line stragglers of body copy across page breaks. */
  .doc-output p, .doc-para { orphans: 3; widows: 3; }

  .doc-output a.svc-link { color: inherit !important; text-decoration: none !important; }

  /* Footer notes (website-links + "tap any address for Maps") stay visible in the
     generated PDF — it's the digital copy guests tap, so the hints are useful. */

  /* Hide external-link SVG icons next to linked names, but keep the map pin so
     addresses still show their tap-for-Maps cue in the PDF. */
  .doc-output a svg:not(.cd-map-pin) { display: none !important; }

  /* Keep the dashed underline on linked names in print (only drop the default
     text-decoration underline) so website links stay visible in the PDF. */
  .doc-output a { text-decoration: none !important; }

  /* Remove dotted outlines / focus rings when printing */
  * { outline: none !important; }

  /* Restaurant: A5 page */
  body.print-a5 {
    @page { size: A5; margin: 12mm 15mm 12mm 15mm; }
  }
  body.print-a5 .doc-output {
    height: calc(210mm - 24mm) !important;
  }
}

.field { gap: 4px; margin-bottom: 8px; }
.panel-body { padding: 20px 26px 14px 26px; }
.field-row { gap: 12px; }
.field label { font-size: 10px; letter-spacing: 2px; opacity: 1; color: var(--muted); }
.field input, .field select, .field textarea { padding: 10px 12px; border-radius: 6px; background-color: transparent; box-shadow: none; }
.form-section-sep { margin: 8px 0; }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(143,109,85,0.12), 0 1px 5px rgba(0,0,0,0.07);
}
.preview-panel .panel-body { padding: 0; }
/* itin-calendar-view is display:none but still a DOM sibling — cancel the * + * margin it triggers on preview-empty-itin */
#preview-empty-itin { margin-top: 0 !important; }
/* Mobile overrides that must come AFTER the global block above to win the cascade */
@media (max-width: 768px) {
  .field input, .field select, .field textarea { padding: 8px 10px; }
  .tf-grid { gap: 8px 10px; }

  /* Checkboxes & radio buttons: slightly larger tap target on touch */
  input[type="checkbox"],
  input[type="radio"] {
    width: 17px;
    height: 17px;
  }
  input[type="checkbox"]:checked::after {
    left: 5px;
    top: 1.5px;
    width: 5px;
    height: 9px;
  }
  input[type="radio"]:checked {
    box-shadow: inset 0 0 0 4.5px #fff;
  }

  /* Option labels: allow wrapping, larger tap targets on touch */
  .opt-label {
    white-space: normal;
    font-size: 13px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }
  .opt-label input[type="checkbox"] {
    accent-color: var(--gold);
    cursor: pointer;
    flex-shrink: 0;
  }
}

/* ── Mobile: toggle sizing ─────────────────────────────────────── */
@media (max-width: 768px) {
  .opt-label input[type="checkbox"] {
    -webkit-appearance: none !important;
    appearance: none !important;
    box-sizing: border-box !important;
    width: 40px !important;
    height: 24px !important;
    min-height: 0 !important;
    max-height: 24px !important;
    border-radius: 999px !important;
    flex: 0 0 40px !important;
    aspect-ratio: auto !important;
    align-self: center !important;
  }
  .opt-label input[type="checkbox"]::after {
    width: 18px !important;
    height: 18px !important;
    top: 3px !important;
    left: 3px !important;
    border-radius: 50% !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0.22);
  }
  .opt-label input[type="checkbox"]:checked::after {
    transform: translateX(16px) !important;
  }
  .opt-label {
    gap: 8px;
    min-height: 44px;
  }

  /* ── Mobile: form field sizing ───────────────────────────────── */
  /* Taller inputs/selects for comfortable thumb reach */
  .panel.form-col .field input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
  .panel.form-col .field select {
    min-height: 44px;
    padding-top: 10px;
    padding-bottom: 10px;
  }

  /* ── Mobile: tf-card spacing & shape ────────────────────────── */
  .tf-card {
    padding: 14px 16px 14px;
    border-radius: 8px;
    margin-bottom: 10px;
  }
  .tf-card-title[data-keep-title] {
    font-size: 9px;
    letter-spacing: 2.5px;
    margin-bottom: 12px;
    padding-bottom: 4px;
  }
  /* Slightly looser grid gap on phone */
  .tf-grid { gap: 10px 12px; }
  /* Special Requests labels: a touch larger */
  .tf-card [style*="font-size:8.5px"],
  .tf-card [style*="font-size: 8.5px"] {
    font-size: 10px !important;
    letter-spacing: 1.8px !important;
  }
}

/* ══ WEATHER STRIP ══════════════════════════════════════════════ */
.weather-strip {
  display: flex; align-items: center; gap: 10px;
  font-family: 'DM Sans', sans-serif; cursor: pointer;
}
.weather-day { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.weather-icon { font-size: 13px; line-height: 1; }
.weather-temp { font-size: 11px; font-weight: 400; color: rgba(255,255,255,0.80); letter-spacing: 0.3px; }
.weather-label { font-size: 7.5px; font-weight: 500; letter-spacing: 1px; text-transform: uppercase; color: rgba(255,255,255,0.38); }
.weather-sep { color: rgba(255,255,255,0.15); font-size: 10px; }
.wx-icon { font-size: 19px; width: 26px; text-align: center; flex-shrink: 0; }
.wx-src-link {
  display: block; text-align: right; margin-top: 12px;
  font-family: 'DM Sans', sans-serif; font-size: 7.5px; letter-spacing: 1px;
  color: var(--muted); text-decoration: none; text-transform: uppercase;
}
.wx-src-link:hover { color: var(--gold); }

/* ══ FLOW SECTION ═══════════════════════════════════════════════ */
/* Hide Flow tab on desktop — accessed via sidebar button there */
#tab-tools { display: none; }
.flow-mobile-menu { display: none; }
#flow-mobile-back { display: none; }
#mobile-tab-menu { display: none; }
#cat-tools.active {
  display: flex;
  flex-direction: row;
  gap: 0;
  padding: 12px;
  align-items: stretch;
  height: calc(100vh - 100px);
}
.flow-col {
  flex: 1 1 0;
  min-width: 160px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.flow-resizer {
  width: 8px;
  flex-shrink: 0;
  cursor: col-resize;
  position: relative;
  background: transparent;
  margin: 0 3px;
  z-index: 1;
}
.flow-resizer::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 1px;
  height: 48px;
  background: var(--border);
  border-radius: 1px;
  transition: background 0.15s, height 0.15s;
}
.flow-resizer:hover::after,
.flow-resizer.dragging::after {
  background: var(--gold);
  height: 72px;
}
#cat-tools .panel {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 8px;
  display: flex; flex-direction: column;
  overflow: hidden;
  box-shadow: 0 1px 6px rgba(0,0,0,0.05);
}
#panel-contacts, #panel-todo {
  height: 100%;
}
#flow-right-col {
  display: flex; flex-direction: column; gap: 12px;
  height: 100%;
}
#panel-handover { flex: 1; min-height: 0; }
#cat-tools .panel-body {
  flex: 1; overflow-y: auto; padding: 16px;
}

/* Flow panel header gold accent */
#cat-tools .panel-header { position: relative; }
#cat-tools .panel-header::after {
  content: ''; position: absolute; bottom: 0; left: 16px;
  width: 20px; height: 1px; background: var(--gold);
}

/* Contact search */
.contact-search-wrap { padding: 8px 16px; border-bottom: 1px solid var(--border); background: var(--bg); }
.contact-search-input {
  width: 100%; box-sizing: border-box;
  font-family: 'DM Sans', sans-serif; font-size: 13px; font-weight: 300;
  border: 1px solid var(--border); border-radius: 4px; background: var(--white);
  color: var(--text); padding: 7px 11px; outline: none; transition: border-color 0.2s;
}
.contact-search-input:focus { border-color: var(--gold); }

/* To-Do */
.todo-add {
  display: flex; gap: 0;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
}
.todo-priority-select {
  font-family: 'DM Sans', sans-serif; font-size: 10px; font-weight: 500; letter-spacing: 0.8px;
  border: 1px solid var(--border); border-right: none; border-radius: 4px 0 0 4px;
  background: var(--white); color: var(--muted);
  padding: 8px 10px; outline: none; cursor: pointer; min-width: 76px;
}
.todo-priority-select:focus { border-color: var(--gold); }
.todo-add input {
  flex: 1;
  font-family: 'DM Sans', sans-serif; font-size: 13px; font-weight: 300;
  border: 1px solid var(--border); border-right: none;
  background: var(--white); color: var(--text);
  padding: 8px 11px; outline: none;
}
.todo-add input:focus { border-color: var(--gold); }
.todo-add-btn {
  font-family: 'DM Sans', sans-serif; font-size: 9px; font-weight: 500;
  letter-spacing: 1.2px; text-transform: uppercase;
  background: var(--charcoal); color: var(--white);
  border: none; border-radius: 0 4px 4px 0; padding: 8px 16px; cursor: pointer; transition: background 0.2s;
}
.todo-add-btn:hover { background: var(--gold); }
.todo-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 0; border-bottom: 1px solid var(--gold-pale);
  transition: background 0.1s;
}
.todo-priority-dot {
  width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
}
.todo-priority-dot.high { background: var(--gold); box-shadow: 0 0 5px rgba(143,109,85,0.4); }
.todo-priority-dot.normal { background: var(--border); }
.todo-item input[type=checkbox] { accent-color: var(--gold); cursor: pointer; flex-shrink: 0; width: 17px; height: 17px; }
.todo-label { flex: 1; font-size: 13px; font-weight: 300; color: var(--text); line-height: 1.45; cursor: pointer; }
.todo-item.done .todo-label { text-decoration: line-through; color: var(--muted); }
.todo-item.done .todo-priority-dot { opacity: 0.25; }
.todo-del { background: none; border: none; color: var(--muted); font-size: 16px; cursor: pointer; padding: 4px 6px; transition: color 0.15s; border-radius: 4px; }
.todo-del:hover { color: #c0392b; background: rgba(192,57,43,0.08); }
.todo-footer { padding: 10px 16px; border-top: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; background: var(--bg); }
.todo-count { font-size: 10px; color: var(--muted); font-weight: 300; }
.todo-clear-btn {
  font-family: 'DM Sans', sans-serif; font-size: 9px; font-weight: 500; letter-spacing: 1.2px; text-transform: uppercase;
  background: none; border: 1px solid var(--border); border-radius: 4px; color: var(--muted); padding: 5px 12px; cursor: pointer; transition: all 0.2s;
}
.todo-clear-btn:hover { border-color: var(--gold); color: var(--gold); }

.flow-empty { font-size: 12px; color: var(--muted); text-align: center; padding: 40px 0; font-style: italic; }

/* Contacts */
.flow-add-toggle {
  font-family: 'DM Sans', sans-serif; font-size: 9px; font-weight: 500;
  letter-spacing: 1.2px; text-transform: uppercase;
  background: none; border: 1px solid var(--border); border-radius: 999px; color: var(--muted);
  padding: 5px 12px; cursor: pointer; transition: all 0.2s;
}
.flow-add-toggle:hover, .flow-add-toggle.open { border-color: var(--gold); color: var(--gold); }
.contacts-add {
  display: none;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
}
.contacts-add.open { display: grid; }
.contacts-add input, .contacts-add select {
  font-family: 'DM Sans', sans-serif; font-size: 13px; font-weight: 300;
  border: 1px solid var(--border); border-radius: 4px; background: var(--white);
  color: var(--text); padding: 8px 11px; outline: none;
  transition: border-color 0.2s;
}
.contacts-add input:focus, .contacts-add select:focus { border-color: var(--gold); }
.contacts-add-btn {
  grid-column: 1 / -1;
  font-family: 'DM Sans', sans-serif; font-size: 9px; font-weight: 500;
  letter-spacing: 1.5px; text-transform: uppercase;
  background: var(--charcoal); color: var(--white);
  border: none; border-radius: 4px; padding: 10px; cursor: pointer;
  transition: background 0.2s;
}
.contacts-add-btn:hover { background: var(--gold); }
.contact-group-label {
  font-size: 8px; font-weight: 600; letter-spacing: 1.8px;
  text-transform: uppercase; color: var(--gold);
  margin: 18px 0 8px; padding-bottom: 5px;
  border-bottom: 1px solid var(--border);
}
.contact-group-label:first-child { margin-top: 6px; }
.contact-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 0; border-bottom: 1px solid rgba(180,155,115,0.14);
  position: relative;
}
.contact-main { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.contact-name { font-size: 13.5px; font-weight: 400; color: var(--text); }
.contact-phone {
  font-size: 12px; color: var(--gold); text-decoration: none; font-weight: 300;
}
.contact-phone:hover { text-decoration: underline; }
.contact-note { font-size: 11px; color: var(--muted); font-weight: 300; }
.contact-del {
  background: none; border: none; color: var(--muted); font-size: 16px;
  cursor: pointer; line-height: 1; padding: 4px 6px; transition: all 0.15s; border-radius: 4px;
}
.contact-del:hover { color: #c0392b; background: rgba(192,57,43,0.08); }
.contacts-empty { font-size: 12px; color: var(--muted); text-align: center; padding: 40px 0; font-style: italic; }

/* Handover */
.handover-textarea {
  width: 100%; height: 100%; min-height: 300px;
  font-family: 'DM Sans', sans-serif; font-size: 13px; font-weight: 300;
  line-height: 1.7; color: var(--text);
  border: none; outline: none; resize: none;
  background: transparent;
  padding: 0;
}
.handover-saved {
  font-size: 9px; letter-spacing: 0.8px; color: var(--muted);
  font-weight: 300; font-family: 'DM Sans', sans-serif;
}
.handover-clear-btn {
  font-family: 'DM Sans', sans-serif; font-size: 9px; font-weight: 500;
  letter-spacing: 1.2px; text-transform: uppercase;
  background: none; border: 1px solid var(--border); border-radius: 4px;
  color: var(--muted); padding: 5px 12px; cursor: pointer;
  transition: all 0.2s;
}
.handover-clear-btn:hover { border-color: var(--gold); color: var(--gold); }
@keyframes slideIn {
  from { transform: translateX(400px); opacity: 0; }
  to   { transform: translateX(0);     opacity: 1; }
}
@keyframes slideOut {
  from { transform: translateX(0);     opacity: 1; }
  to   { transform: translateX(400px); opacity: 0; }
}

/* ═══════════════════════════════════════════════════════════════
   DARK MODE
   Applied via html.dark-mode (manual toggle or system auto-detect)
═══════════════════════════════════════════════════════════════ */
html.dark-mode {
  color-scheme: dark;
  --bg:          #0F0E0D;
  --surface:     #0B0A09;
  /* --grouped-bg was only ever given a light value, so in the dark it read out
     of theme. The form column's dark rule paints from --surface with
     !important, which is why nothing showed; pinning it here keeps the token
     honest wherever else it is read. */
  /* Dark keeps the ground level with the page rather than above it, which is
     what the shipped #0A0907 was against #0B0A09 — derived for the same
     reason as the light one. */
  --grouped-bg:  var(--bg);
  /* The neutrals, de-dusted. Dust is a warm film over a dark ground, and
     measured as red-minus-blue that is what these were: the text at +11, the
     muted ink at +10, the band at the edge of the page at +7 — beige sitting
     on a near-black, so the whole desk read as one brown haze. The gold and
     the category colours carry the warmth here; the greys carrying it too is
     what stopped the gold reading as an accent at all. The greys are neutral
     now all but neutral — a couple of points of warmth, not eleven — which
     leaves the gold and the category colours the warm things on the page.

     The grounds stay black. A ladder is for objects, not for grounds: the
     form column and the calendar's panel fill half the screen each, and
     lifting those to a rung only produced a large grey expanse — which is
     more haze, not less. The crisp black the calendar panel already had is
     what makes the blocks on it read, so it is now what everything reads on,
     and the rungs belong to the things that sit on top: cards, blocks, chips,
     fields, each with a hairline to close its shape.

     The inks are set for a lobby in daylight rather than for a dark room:
     glare flattens the bottom of the range first, so the primary sits well
     over 14:1 on the panel and the muted over 7:1. Dark and crisp, and still
     readable with the sun on the screen. */
  --text:        #F2F0ED;
  --muted:       #A5A09B;
  /* The light-on-dark twin of --gold-ink, lifted for the same reason the light
     one was darkened: on the action row, a step lighter than the card, #D9C09A
     read 3.65:1. */
  --gold-ink:    #EFE0C6;
  --white:       #0B0A09;
  /* ── The dark ladder ──────────────────────────────────────────────────
     Measured on the desk at 1600px, every surface sat within 1.06:1 of the
     ground: panel 1.02, header 1.06, card 1.15. A dark interface with no
     steps in it is not dark, it is fog — which is what "dusty" was, and why
     the one element with a real step (a calendar block, at 1.32:1) was the
     only thing on the page that looked deliberate.

     So the surfaces are a ladder now, each rung derived against the working
     ground (#060504) rather than picked: panel 1.12, card 1.37, field 1.61.
     The lifts are neutral — the hue is carried by the gold and by the
     category colours, and a near-black tinted brown on top of them is
     exactly the haze this is getting rid of. */
  /* Never defined before, so each of the dozen `var(--tab-bar-bg, …)` sites
     fell back to its own literal and the chrome came out in three shades of
     near-black depending on which rule won. One value, one band. */
  --tab-bar-bg:  #171614;
  --border:      #38342E;
  --gold-pale:   #150F09;
  --gold-border: #2C1F12;
  --panel-bg:    #0B0A09;
  --bg-tertiary: #222120;
  --shadow:      0 2px 20px rgba(0,0,0,0.70);
  --shadow-lg:   0 6px 36px rgba(0,0,0,0.80);
  --charcoal:    #E8E5E1;
  --hairline:    rgba(255,255,255,0.11);
}
/* Also on the root, so overscroll and the area behind a short page show the
   page's own ground rather than the browser's white. */
html.dark-mode { background-color: #0B0A09; }
html.dark-mode body {
  /* A soft lift at the top and bottom of the band, falling off by 22.5%.

     This used to drift: the gradient was painted at twice the viewport height
     and background-position animated it through the visible window on a
     ten-second loop. background-position is a paint property, so every frame
     of that loop repainted the entire viewport on the main thread, for ever,
     in the theme the desk is used in all day. Measured, dark mode produced
     frames three times slower than light because of it.

     Then the drift was painted magenta and the pixels counted: it reached
     0.8% of a 1600x950 viewport and 0% of a phone. Everything else is covered
     by main (#060504), the header and the panels. A 1.17:1 breathing across
     0.8% of the screen is not an effect anyone can see, so the movement is
     gone and the band it moved through stays exactly where it rested.

     Putting it back is this rule plus a keyframe — but it should move to a
     transform on a fixed layer if it ever does, not back onto this one. */
  background-color: #0B0A09;
  background-image: linear-gradient(180deg,
    #161513 0%, #0B0A09 22.5%, #0B0A09 77.5%, #161513 100%);
  background-repeat: no-repeat;
  background-size: 100% 200%;
  background-position: 0 0%;
  color: var(--text);
}
html.dark-mode main {
  background: #0B0A09;
}

/* Form panel — solid dark bg, no photo overlay in dark mode */
html.dark-mode .cat-section.active > .panel.form-col,
html.dark-mode #cat-transfers .form-col,
html.dark-mode #cat-restaurants .form-col,
html.dark-mode #cat-massages .form-col,
html.dark-mode #cat-tours .form-col,
html.dark-mode #cat-itinerary .form-col,
/* The preview column is the other half of the same workspace. In dark these
   two were driven by different tokens — --surface for the form, --white for
   the preview — so the desk came out as two colours side by side on any
   scheme with colour in it. Both take the shared ground now. */
html.dark-mode .preview-panel.panel,
html.dark-mode .preview-panel .panel-body {
  background: var(--surface) !important;
}

/* Cards & panels */
/* Cards outside the form column had a third look in dark mode — a solid slab
   with no border at all. Same primitive, same tokens. */
html.dark-mode .tf-card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
}
html.dark-mode input[type="checkbox"],
html.dark-mode input[type="radio"] {
  background: rgba(255,255,255,0.10);
  border-color: rgba(255,255,255,0.28);
}
html.dark-mode input[type="checkbox"]:not(:checked):hover,
html.dark-mode input[type="radio"]:not(:checked):hover {
  border-color: var(--gold-mid);
  background: rgba(255,255,255,0.12);
}
html.dark-mode input[type="radio"]:checked {
  box-shadow: inset 0 0 0 4px #0A0907;
}
html.dark-mode .opt-label input[type="checkbox"] {
  background: rgba(180,155,125,0.22);
  border: none;
}
html.dark-mode .opt-label input[type="checkbox"]::after {
  background: #d8d0c6;
}
html.dark-mode .opt-label input[type="checkbox"]:checked {
  background: var(--gold);
}
html.dark-mode .opt-label input[type="checkbox"]:not(:checked):hover {
  background: rgba(180,155,125,0.35);
}
/* The row had a dark-mode fill of its own here, which is what kept painting a
   pale slab behind the table after the light-mode background was cleared. A row
   inside a group carries no fill in either theme; the base rule already sets
   border and shadow to none. */
html.dark-mode .panel-header {
  background: var(--white);
  border-bottom-color: var(--border);
}
html.dark-mode .panel {
  background: var(--white);
}
html.dark-mode .mode-sub-bar {
  background: #0D0C0A;
  border-bottom-color: var(--border);
}
html.dark-mode .mode-sub-btn {
  color: var(--muted);
}
html.dark-mode .mode-sub-btn.active {
  color: var(--text);
  border-bottom-color: var(--gold);
}

/* Itinerary add panel — themed via --itin-* tokens */

/* Inputs */
html.dark-mode .field input:not([type="checkbox"]):not([type="radio"]),
html.dark-mode .field textarea {
  background: transparent !important;
  color: var(--text);
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
html.dark-mode .field input:not([type="checkbox"]):not([type="radio"]):focus,
html.dark-mode .field textarea:focus {
  background: transparent !important;
  box-shadow: none !important;
}
html.dark-mode .field input::placeholder,
html.dark-mode .field textarea::placeholder { color: rgba(230,225,218,0.30); }
html.dark-mode .field select {
  background: transparent !important;
  color: var(--text);
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
html.dark-mode .field select:focus {
  background: transparent !important;
  box-shadow: none !important;
}
html.dark-mode .cat-section.active > .panel.form-col .field input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
html.dark-mode .cat-section.active > .panel.form-col .field textarea,
html.dark-mode .cat-section.active > .panel.form-col .field select {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
html.dark-mode .cat-section.active > .panel.form-col .field input:focus,
html.dark-mode .cat-section.active > .panel.form-col .field textarea:focus,
html.dark-mode .cat-section.active > .panel.form-col .field select:focus {
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
}
/* Dark mode: underline via ::after tinted lighter */
html.dark-mode .field::after { background: rgba(255,255,255,0.22); }
html.dark-mode .field:focus-within::after { background: var(--gold); }
/* All native select dropdown popups: dark background + readable text */
html.dark-mode select option,
html.dark-mode select optgroup {
  background-color: #1A1918;
  color: #E6E1DB;
}
/* var(--muted), not a fixed rgba(230,225,218,0.88). That literal is the default
   dark theme's own ink, so it neither took a scheme's hue nor tracked the
   ground: measured on Claret it fell from 11.07:1 to 4.47:1 as the brightness
   slider lifted the panes, dropping under AA at the top of the range. --muted
   is corrected per scheme by _mutedFor() and lifted per level by
   _boostScheme(), so it follows both. */
html.dark-mode .field label { color: var(--muted); opacity: 1; }
html.dark-mode .field:focus-within label { color: var(--gold); }

/* Buttons */
html.dark-mode .btn-outline {
  background: rgba(255,255,255,0.06);
  color: var(--text);
  border-color: rgba(255,255,255,0.10);
}
html.dark-mode .btn-outline:hover {
  background: var(--gold-pale);
  border-color: var(--gold-border);
  color: var(--gold);
}
html.dark-mode .btn-outline.active {
  background: var(--gold-pale);
  border-color: var(--gold-border);
  color: var(--gold);
}
html.dark-mode .rec-toolbar-btn {
  color: rgba(230,225,218,0.55);
}
html.dark-mode .rec-toolbar-btn:hover {
  color: var(--gold);
  border-bottom-color: var(--gold-border);
}
html.dark-mode #recommendations-list { background: transparent; border-color: var(--border); }

/* Template bar */
html.dark-mode .template-bar {
  background: var(--bg-tertiary);
  border-top-color: var(--border);
}
html.dark-mode .template-chip {
  background: var(--white);
  color: rgba(230,225,218,0.65);
  border-color: var(--border);
}
html.dark-mode .template-chip:hover {
  border-color: var(--gold-border);
  background: var(--gold-pale);
  color: var(--gold);
}

/* Preview panel — stays white (printed document) */
html.dark-mode .preview-panel,
html.dark-mode .preview-panel.panel,
html.dark-mode .preview-panel .panel-body,
html.dark-mode .preview-panel .panel-header {
  background: var(--surface) !important;
  color: var(--text);
}
html.dark-mode .preview-footer {
  background: var(--surface);
  border-top-color: rgba(255,255,255,0.07);
}
html.dark-mode .preview-empty .watermark {
  filter: brightness(0) invert(1);
  opacity: 0.55;
}

/* Itin blocks */
html.dark-mode .itin-block-header {
  background: #1C1915;
  border-bottom-color: var(--border);
}
html.dark-mode #itin-rows > [id^="itin-block-"] {
  background: #181512 !important;
  border: none !important;
}
html.dark-mode #itin-rows > [id^="itin-block-"] .field input,
html.dark-mode #itin-rows > [id^="itin-block-"] .field textarea,
html.dark-mode #itin-rows > [id^="itin-block-"] .field select {
  background: transparent !important;
  color: var(--text) !important;
  border: none !important;
  box-shadow: none !important;
}

/* Dark mode liquid glass fields */
/* No dark override needed: --card-bg and --card-shadow are already redefined
   for dark, and the rule above resolves through them. */
html.dark-mode .cat-section.active > .panel.form-col .tf-card:focus-within {
  box-shadow: 0 2px 4px rgba(0,0,0,0.3), 0 16px 38px rgba(0,0,0,0.4), 0 0 0 1px rgba(201,169,110,0.16) !important;
}
html.dark-mode .cat-section.active > .panel.form-col .tf-card.tf-guest-card,
html.dark-mode .cat-section.active > .panel.form-col #tf-vehicles-card {
  background: transparent !important;
  box-shadow: none !important;
}
html.dark-mode #itin-rows > [id^="itin-block-"] {
  background: transparent !important;
}
html.dark-mode .itin-block-header {
  background: rgba(255,255,255,0.04) !important;
}
/* One underline, not two. The control carried a border-bottom of its own while
   .field::after drew the system's underline just below it — two hairlines a
   few pixels apart under every field in the dark, which read as a doubled rule
   wherever a value made the pair easy to see. Light mode already dropped the
   control's border and left .field::after to do the job; the dark follows it
   now. The gold focus sweep is unaffected: it lives on .field:focus-within
   ::after, so it never depended on this border. */
html.dark-mode .cat-section.active > .panel.form-col .field input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
html.dark-mode .cat-section.active > .panel.form-col .field textarea,
html.dark-mode .cat-section.active > .panel.form-col .field select {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}
html.dark-mode .cat-section.active > .panel.form-col .field input:focus,
html.dark-mode .cat-section.active > .panel.form-col .field textarea:focus,
html.dark-mode .cat-section.active > .panel.form-col .field select:focus {
  box-shadow: none !important;
  outline: none !important;
}

/* Cat-bar — explicit dark background so --charcoal flip doesn't turn it light */
html.dark-mode .cat-bar {
  background: var(--tab-bar-bg, #121110) !important;
  border-bottom-color: var(--border) !important;
}
html.dark-mode .cat-tabs-group {
  background: var(--tab-bar-bg, #121110);
}

/* Mobile dark mode: lift all variables to a warmer, lighter dark */
@media (max-width: 600px) {
  html:not(.dark-mode),
  html:not(.dark-mode) body {
    background: var(--bg) !important;
  }
  html:not(.dark-mode) main,
  html:not(.dark-mode) .cat-section,
  html:not(.dark-mode) .cat-section.active,
  html:not(.dark-mode) .cat-section.active > .panel,
  html:not(.dark-mode) .cat-section.active > .panel.form-col,
  html:not(.dark-mode) .panel {
    background: var(--bg) !important;
  }
}

@media (max-width: 600px) {
  html.dark-mode {
    --bg:          #0B0A09;
    --surface:     #0B0A09;
    --white:       #0B0A09;
    --panel-bg:    #0B0A09;
    --bg-tertiary: #1B1A18;
  }
  html.dark-mode {
    background: #0B0A09 !important;
  }
  /* Phone deliberately does NOT re-declare the body background any more: it
     inherits the same drifting gradient as desktop. It used to hard-override
     it to a flat fill, which is what kept the fade invisible on a phone.
     No background-attachment:fixed here — iOS Safari repaints fixed
     backgrounds poorly, and pairing that with an animation is what makes it
     stutter; the drift supplies the movement without it. */
  /* These sit on top of body and used to repaint the same flat tone, which
     would hide the gradient entirely — same colour, so dropping the fill
     changes nothing except letting the lift through. */
  html.dark-mode main,
  html.dark-mode .cat-section,
  html.dark-mode .cat-section.active,
  html.dark-mode .cat-section.active > .panel,
  html.dark-mode .cat-section.active > .panel.form-col,
  html.dark-mode .panel {
    background: transparent !important;
  }
}

/* Mobile bottom nav — dark mode text overrides */
@media (max-width: 600px) {
  html.dark-mode .cat-tab {
    color: rgba(255,255,255,0.55) !important;
  }
  html.dark-mode .cat-tab .tab-icon {
    opacity: 0.5 !important;
  }
  html.dark-mode .cat-tab.active {
    color: #D4A853 !important;
    background: rgba(212,168,83,0.12) !important;
    border-color: rgba(212,168,83,0.18) !important;
  }
  html.dark-mode .cat-tab.active .tab-icon {
    opacity: 1 !important;
  }
}


/* Document preview (guest window) */
html.dark-mode .doc-output {
  /* Deliberately a fixed surface, not one that follows --grouped-bg. Making it
     track the ground was tried and measured worse: the page is a sheet of
     paper, its ink is fixed at #CEC9C2, and a card that climbs with the
     brightness slider takes that ink from 9.34:1 down to 3.77:1 on Claret at
     max. Staying put keeps the document at 9:1 or better everywhere and reads
     as a dark page resting on the desk — the inverse of the white sheet on
     off-white the light themes show. */
  background: #141210;
  color: #CEC9C2;
  box-shadow: none;
}
html.dark-mode .doc-output .doc-letterhead { border-bottom-color: rgba(255,255,255,0.10); }
html.dark-mode .doc-logo-block { border-bottom-color: rgba(255,255,255,0.10); }
html.dark-mode .doc-date,
html.dark-mode .doc-salutation,
html.dark-mode .doc-para,
html.dark-mode .doc-condition,
html.dark-mode .doc-section-label,
html.dark-mode .doc-note-text { color: #CEC9C2; }
html.dark-mode .doc-split-table th,
html.dark-mode .doc-split-table td,
html.dark-mode .doc-single-table th,
html.dark-mode .doc-single-table td,
html.dark-mode .doc-grid-table td { color: #CEC9C2; border-bottom-color: rgba(255,255,255,0.08); }
html.dark-mode .doc-p2p-table td { color: #CEC9C2 !important; border-bottom-color: rgba(255,255,255,0.08) !important; }
html.dark-mode .doc-p2p-table th { color: #9A928A !important; border-bottom-color: rgba(255,255,255,0.14) !important; }
html.dark-mode .doc-p2p-table tr.p2p-route-row td { color: #7A726A !important; border-bottom-color: rgba(255,255,255,0.08) !important; }
html.dark-mode .doc-split-table .lbl-cell,
html.dark-mode .doc-single-table .lbl-cell { color: #7A726A; }
html.dark-mode .doc-split-table .col-head,
html.dark-mode .doc-single-table .col-head { border-bottom-color: rgba(255,255,255,0.14); }
html.dark-mode .doc-split-table .price-total-row td,
html.dark-mode .doc-single-table .price-total-row td { border-top-color: rgba(255,255,255,0.12); color: #CEC9C2; }
html.dark-mode .doc-grid-table thead th { background: #1E1B17; color: #CEC9C2; }
html.dark-mode .transfer-request .doc-grid-table thead th { background: transparent; color: #9A928A; border-bottom-color: rgba(255,255,255,0.10); }
html.dark-mode .doc-footer-block { color: #6A625A; }
html.dark-mode .doc-footer-block::before { background-color: #7A5F42; }
html.dark-mode .doc-gold { color: #C09060; }
html.dark-mode .doc-section-label.doc-gold,
html.dark-mode .doc-note-label { color: #C09060; }
html.dark-mode .doc-condition::before { color: #9A7860; }
html.dark-mode .doc-graphite { color: #C7C2BB; }
html.dark-mode .doc-condition.doc-gold { color: #C7C2BB; }
html.dark-mode .doc-condition.doc-gold::before { color: #C7C2BB; }
html.dark-mode .doc-note-block { border-left-color: #C09060; background: none; }
html.dark-mode .doc-service-table thead th { background: rgba(255,255,255,0.04); }
html.dark-mode .doc-service-table .total-row td { border-top-color: rgba(255,255,255,0.14); }

/* History modal */
html.dark-mode #history-modal .history-panel {
  background: var(--white);
  border-color: var(--border);
  box-shadow: 0 16px 48px rgba(0,0,0,0.65);
}
html.dark-mode #history-modal .history-header,
html.dark-mode #history-modal .history-search-bar { background: var(--white); }
html.dark-mode #history-modal .history-title { color: var(--charcoal); }
html.dark-mode #history-modal .hist-search-input,
html.dark-mode #history-modal .hist-date-input { color: var(--text); }
html.dark-mode #history-modal .hist-pill { color: var(--text); }
html.dark-mode #history-modal .history-body { background: var(--white); }
html.dark-mode #history-modal .history-results { background: var(--hm-surface); }
html.dark-mode #history-modal .history-card-name { color: var(--charcoal); }
html.dark-mode #history-modal .history-card-subject,
html.dark-mode #history-modal .history-empty { color: var(--muted); }
html.dark-mode #history-modal .history-detail-col,
html.dark-mode #history-modal .hist-detail-content { background: var(--white); }
html.dark-mode #history-modal .hist-detail-name { color: var(--charcoal); }
html.dark-mode #history-modal .hist-detail-subject,
html.dark-mode #history-modal .hist-detail-label,
html.dark-mode #history-modal .hist-detail-placeholder,
html.dark-mode #history-modal .history-count { color: var(--muted); }
html.dark-mode #history-modal .hist-detail-val,
html.dark-mode #history-modal .hist-preview-table td { color: var(--charcoal); }
html.dark-mode #history-modal .hist-preview-table th { color: var(--muted); }
html.dark-mode #history-modal .hist-count-bar { background: var(--white); }
html.dark-mode #history-modal .history-close { color: var(--muted); }
html.dark-mode #history-modal .history-close:hover { color: var(--charcoal); }
html.dark-mode #history-modal .hist-clear-btn,
html.dark-mode #history-modal .hist-clear-all-btn,
html.dark-mode #history-modal .hist-select-mode-btn { color: var(--muted); background: transparent; }
html.dark-mode #history-modal .hist-clear-btn:hover { color: var(--gold); }
html.dark-mode #history-modal .hist-bulk-label { color: var(--muted); }
html.dark-mode #history-modal .hist-card-load-btn { color: var(--gold); }
html.dark-mode #history-modal .hist-card-del { color: rgba(230,225,218,0.30); }

/* History card "mode" badge (Request/Quotation) — plain text now. --muted
   measured 3.45:1 on the row surface; --hm-ink-2 is the tone the rest of the
   row metadata already uses and clears AA at this size. */
html.dark-mode #history-modal .history-card-mode { background: transparent; color: var(--hm-ink-2); }
html.dark-mode .history-card-mode { background: transparent; color: var(--muted); }

/* Guest review (preview) — remaining hardcoded #000 / cream backgrounds */
html.dark-mode .doc-split-table .val-cell,
html.dark-mode .transfer-request .val-cell,
html.dark-mode .transfer-request .doc-grid-table td { color: #CEC9C2; }
html.dark-mode .doc-grid-table thead th {
  background: transparent;
  color: #CEC9C2;
}
html.dark-mode .doc-signature .sig-name  { color: #CEC9C2; }
html.dark-mode .doc-signature .sig-title,
html.dark-mode .doc-signature .sig-hotel { color: #9A928A; }
html.dark-mode .doc-details-table td.lbl { color: #7A726A; }
html.dark-mode .doc-details-table td { color: #CEC9C2; }
html.dark-mode .doc-service-table thead th { color: #9A928A; border-bottom-color: rgba(255,255,255,0.14); }
html.dark-mode .doc-service-table th,
html.dark-mode .doc-service-table td { color: #CEC9C2; }
html.dark-mode .doc-service-table .total-row td { color: #CEC9C2; }

/* Kill cream background behind the vertical drag resizer — match preview panel */
html.dark-mode .cat-section.active { background: var(--surface); }
html.dark-mode .cat-section.active.split-overlay > .panel:not(.form-col) {
  background: var(--surface);
  border-left-color: var(--border);
}
html.dark-mode .header-title { color: #F5F0EC; }

/* Dark mode toggle button */
#btn-theme-toggle {
  opacity: 0.55;
  padding: 9px 12px;
  display: inline-flex;
  align-items: center;
}
#btn-theme-toggle:hover { opacity: 1; }

/* ═══════════════════════════════════════════════════════════════
   SIDE PANEL — replaces the dropdown of header controls
═══════════════════════════════════════════════════════════════ */
.header-toggle-btn {
  background: transparent !important;
  color: rgba(255,255,255,0.85) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  border-radius: 4px !important;
  padding: 8px 10px !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
}
.header-toggle-btn:hover { background: rgba(255,255,255,0.14) !important; color: #fff !important; }
.header-toggle-btn svg { transition: none !important; transform: none !important; }
html.header-open .header-toggle-btn,
.app-header.controls-open .header-toggle-btn {
  background: rgba(255,255,255,0.18) !important;
}

.side-panel-backdrop {
  position: fixed; inset: 0;
  background: var(--lg-backdrop);
  z-index: 10399;
  opacity: 0;
  transition: opacity .22s ease;
  pointer-events: none;
}
.side-panel-backdrop.open { opacity: 1; pointer-events: auto; }

.side-panel {
  position: fixed; top: env(safe-area-inset-top); right: 0; bottom: 0;
  width: 372px; max-width: 92vw; min-width: 220px;
  background: var(--lg-bg);
  -webkit-backdrop-filter: var(--lg-blur);
  backdrop-filter: var(--lg-blur);
  color: rgba(255,255,255,0.92);
  border-left: var(--lg-border);
  z-index: 10400;
  transform: translateX(105%);
  transition: none;
  /* Parked at translateX(105%) the drawer is off-screen, but --lg-shadow casts
     -16px 0 48px back across the edge it left behind — a soft darkening of the
     last ~55px of every screen, in every theme, whether or not the drawer is
     open. It reads as the right side of the desk being a different colour from
     the left. The shadow belongs to an open drawer; a closed one draws none. */
  box-shadow: none;
  display: flex; flex-direction: column;
  font-family: 'DM Sans', system-ui, sans-serif;
  touch-action: pan-y;
  overflow: hidden;
}
/* Liquid-glass sheen highlights */
.side-panel::before {
  content: '';
  position: absolute; inset: 0;
  background: var(--lg-sheen);
  pointer-events: none;
  z-index: 0;
}
.side-panel::after {
  content: '';
  position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: var(--lg-top-highlight);
  pointer-events: none;
  z-index: 1;
}
.side-panel > * { position: relative; z-index: 2; }
.side-panel.resizing { transition: none !important; user-select: none; }
.side-panel.open { transform: translateX(0); box-shadow: var(--lg-shadow); }
/* Closed, it is off-screen but its blur is still evaluated on every frame the
   desk paints. It only needs to blur while it is actually over something. */
.side-panel:not(.open) { -webkit-backdrop-filter: none; backdrop-filter: none; }
.side-panel:not(.open) { pointer-events: none; }
.side-panel * { box-sizing: border-box; }

/* Drag handle on the left edge — wide hit area, slim visible bar */

.sp-header {
  overflow: hidden;
  padding: 13px 20px 11px;
  display: flex; justify-content: space-between; align-items: flex-start; gap: 12px;
}
.sp-title { font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255,255,255,0.55); font-weight: 500; }
.sp-subtitle { font-size: 13px; margin-top: 4px; color: rgba(255,255,255,0.85); font-weight: 400; }
.sp-close { background: none; border: none; color: rgba(255,255,255,0.55); font-size: 26px; line-height: 1; cursor: pointer; padding: 0 4px; }
.sp-close:hover { color: #fff; }

/* ── Menu drawer: profile header + quick-action launcher (all widths) ── */
/* The old title/subtitle are hidden, but the wrapper div they sit in was still
   an empty flex item — with justify-content:space-between that reserved the
   true left edge for nothing, leaving .sp-profile visually shifted toward the
   middle instead of flush-left. Remove the wrapper from the flex layout
   entirely rather than just hiding its (already-hidden) children. */
.sp-header .sp-legacy-title { display: none; }
.sp-profile { display: flex; align-items: center; gap: 12px; cursor: pointer; }
.sp-launcher-sec { display: block; }
/* The initials are a signet, not a photo stand-in: a dark ground, a gold
   hairline, and the monogram in the mark's own face. A filled gold disc was
   the one flat colour chip in a panel that is otherwise all hairlines and
   engraved type — this belongs to the same family as the P.A. lockup and the
   rule that joins it. The inner ring is what stops it reading as a plain
   circle: two hairlines a pixel apart is how a stamped seal catches light. */
.sp-avatar {
  position: relative;
  width: 46px; height: 46px; border-radius: 50%; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 19px; font-weight: 600; letter-spacing: 1.6px;
  text-indent: 1.6px;                       /* centres the pair despite the tracking */
  color: #EFD9A6;
  background:
    radial-gradient(circle at 50% 30%, rgba(212,168,83,0.22), rgba(212,168,83,0.06) 62%, rgba(0,0,0,0) 78%),
    linear-gradient(160deg, rgba(255,255,255,0.06), rgba(0,0,0,0.18));
  border: 1px solid rgba(212,168,83,0.62);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.14),
    0 0 22px -8px rgba(212,168,83,0.75);
}
.sp-avatar::after {
  content: ''; position: absolute; inset: 3px; border-radius: 50%;
  border: 1px solid rgba(212,168,83,0.22); pointer-events: none;
}
/* The name in the mark's face, at a size that reads as a name rather than a
   field value. */
.sp-profile-name {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 21px; font-weight: 500; color: #fff;
  line-height: 1.1; letter-spacing: 0.2px;
}
/* Rank, in the small letterspaced caps this app uses for every label. */
.sp-profile-role {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 10.5px; font-weight: 600; letter-spacing: 1.7px;
  text-transform: uppercase; color: rgba(233,201,127,0.92);
  line-height: 1; margin-top: 5px; white-space: nowrap;
}
/* The house, quieter still — it is context, not identity. */
.sp-profile-at {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 12.5px; font-weight: 400; color: rgba(255,255,255,0.52);
  line-height: 1.15; margin-top: 3px; letter-spacing: 0.3px;
}
.sp-profile-text { min-width: 0; }
/* The two-line reservation that used to live here is gone with the reason for
   it. Rank and house were one string — "Junior Concierge · La Réserve Eden au
   Lac" — which wrapped for Philip and not for Alex, so the block reserved two
   lines to stop the header changing height between them. They are separate
   lines now, one each, and both concierges' fit on one, so the height is
   stable without reserving anything. */
/* Seven tiles now the lobby board is one of them, and seven does not divide
   into equal rows. Twelve columns: the first four span three each and the rest
   span four, so the row of four and the row of three both run the full width
   and the grid reads as a grid rather than as rows with a hole in one of them.
   The spans are positional, so a tile added or removed has to be counted here
   — which is what the suite checks, rather than trusting the count. */
/* Equal rows. A tile narrower than it used to be can wrap its label onto a
   second line — "Follow-ups" does — and a row that grows for one wrapped word
   reads as a misalignment rather than as a grid. The rows take the height of
   the tallest tile; the tiles stay top-aligned so every icon sits on one line
   and only the wrapped word hangs below. */
.sp-launcher { display: grid; grid-template-columns: repeat(12, 1fr); gap: 7px;
               grid-auto-rows: minmax(0, 1fr); }
.sp-launcher > .sp-tile { grid-column: span 3; }
.sp-launcher > .sp-tile:nth-child(n+5) { grid-column: span 4; }
/* The tiles were six flat rectangles with a stroke drawn on each. They are
   objects now: a shallow top-lit gradient, a hairline that catches at the top
   edge, and the icon sitting in its own small well so it reads as an emblem
   rather than as line-art floating in a box. */
.sp-tile {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 7px 5px 6px; border-radius: 12px; cursor: pointer;
  background: linear-gradient(180deg, rgba(255,255,255,0.07), rgba(255,255,255,0.03));
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.07);
  color: rgba(255,255,255,0.9);
  transition: transform 0.12s ease, background 0.15s ease,
              border-color 0.15s ease, box-shadow 0.15s ease;
}
.sp-tile:hover {
  background: linear-gradient(180deg, rgba(var(--tool-tint),0.13), rgba(var(--tool-tint),0.05));
  border-color: rgba(var(--tool-tint),0.28);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.10), 0 4px 14px -8px rgba(0,0,0,0.55);
}
.sp-tile:active { transform: scale(0.94); background: rgba(var(--tool-tint),0.17); }
/* The well. Round, hairlined, faintly lit from above — the same signet idea as
   the avatar, one size down. */
.sp-tile-ic {
  color: var(--tool);
  display: flex; align-items: center; justify-content: center;
  width: 23px; height: 23px; border-radius: 50%;
  background: radial-gradient(circle at 50% 28%, rgba(var(--tool-tint),0.16), rgba(var(--tool-tint),0.04) 70%, transparent);
  border: 1px solid rgba(var(--tool-tint),0.22);
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.sp-tile:hover .sp-tile-ic {
  color: var(--tool-bright);
  border-color: rgba(var(--tool-tint),0.46);
  background: radial-gradient(circle at 50% 28%, rgba(var(--tool-tint),0.26), rgba(var(--tool-tint),0.08) 70%, transparent);
}
/* Labels join the panel's own grammar — the same letterspaced caps as
   CONCIERGE and FOLLOW-UPS above and below them. */
.sp-tile-ic svg, .side-panel .sp-util-tile .sp-util-ic svg { width: 14px; height: 14px; }
.sp-tile-lbl {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 9.5px; letter-spacing: 1.3px; font-weight: 600;
  text-transform: uppercase; color: rgba(255,255,255,0.82);
}
/* (profile + launcher now show on all widths; the phone-only media block was removed) */
.sp-launcher-sec { padding: 11px 22px 10px; }
/* At-a-glance strip */
.sp-glance { display: flex; gap: 8px; margin-bottom: 7px; }
.sp-glance-seg {
  display: flex; flex-direction: column; gap: 3px; padding: 9px 14px; border-radius: 14px;
  cursor: pointer; text-align: left; color: #fff;
  background: rgba(212,168,83,0.10); border: 1px solid rgba(212,168,83,0.16);
  transition: transform 0.12s ease, background 0.15s ease;
}
.sp-glance-seg:active { transform: scale(0.96); background: rgba(212,168,83,0.18); }
.sp-glance-today-seg { flex: 0 0 auto; align-items: center; justify-content: center; min-width: 72px; }
.sp-glance-next { flex: 1; min-width: 0; justify-content: center; }
.sp-glance-num { font-size: 20px; font-weight: 600; color: var(--gold, #d4a853); line-height: 1; }
.sp-glance-cap { font-size: 9px; letter-spacing: 1px; text-transform: uppercase; color: rgba(255,255,255,0.45); }
.sp-glance-val { font-size: 13px; font-weight: 500; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Concierge chips (single-select, opt-chip look) — sit in a row on the dark drawer */
.sp-user-chips { display: flex; gap: 8px; }
.sp-user-chips .sp-user-chip { flex: 1 1 0; min-width: 0; }
/* Match the standard tf-card opt-chips exactly: transparent pill, thin border,
   readable muted text on the dark glass; gold text/border + checkmark when on.
   (These are <button>s, so the UA grey fill must be cleared explicitly.) */
#side-panel .sp-user-chip {
  background: transparent;
  color: rgba(255,255,255,0.72);
  border-color: rgba(255,255,255,0.18);
}
#side-panel .sp-user-chip:hover { border-color: rgba(212,168,83,0.55); color: rgba(255,255,255,0.92); }
#side-panel .sp-user-chip.is-on {
  background: transparent;
  color: var(--gold, #d4a853);
  border-color: var(--gold, #d4a853);
}

/* Compact utility grid (Settings / Theme / Recent) — vertical mini-tiles */
/* Two, not three — Recent left with the Today tile. The desk keeps its own
   Recent confirmations card on the dashboard and History covers the same
   ground, so the drawer no longer carries a third way to it. */
.sp-util-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; }
/* Settings, Theme and Recent are the same kind of thing as the six above them
   and now look it. Leaving them flat while the launcher gained wells and caps
   made the panel read as two designs stacked. */
.sp-util-tile {
  width: 100%;
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 7px 5px 6px; border-radius: 12px; cursor: pointer;
  background: linear-gradient(180deg, rgba(255,255,255,0.07), rgba(255,255,255,0.03));
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.07);
  color: rgba(255,255,255,0.86); font-family: inherit;
  transition: transform 0.12s ease, background 0.15s ease,
              border-color 0.15s ease, box-shadow 0.15s ease;
}
.sp-util-tile:hover {
  background: linear-gradient(180deg, rgba(var(--tool-tint),0.13), rgba(var(--tool-tint),0.05));
  border-color: rgba(var(--tool-tint),0.28);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.10), 0 4px 14px -8px rgba(0,0,0,0.55);
}
.sp-util-tile:active { transform: scale(0.94); background: rgba(var(--tool-tint),0.17); }
/* Scoped past .sp-btn-icon, which the Theme button also carries. That class is
   styled twice — once here and once in the page's own <style>, which loads
   later and so wins at equal weight — and between them they squashed that one
   well to 18px and greyed its icon in light mode: one tile in nine quietly
   different from the other eight. */
.side-panel .sp-util-tile .sp-util-ic {
  color: var(--tool);
  display: flex; align-items: center; justify-content: center;
  width: 23px; height: 23px; border-radius: 50%;
  background: radial-gradient(circle at 50% 28%, rgba(var(--tool-tint),0.16), rgba(var(--tool-tint),0.04) 70%, transparent);
  border: 1px solid rgba(var(--tool-tint),0.22);
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.side-panel .sp-util-tile:hover .sp-util-ic {
  color: var(--tool-bright);
  border-color: rgba(var(--tool-tint),0.46);
  background: radial-gradient(circle at 50% 28%, rgba(var(--tool-tint),0.26), rgba(var(--tool-tint),0.08) 70%, transparent);
}
.sp-util-lbl {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 9.5px; letter-spacing: 1.3px; font-weight: 600;
  text-transform: uppercase; color: rgba(255,255,255,0.82);
}

.sp-body { flex: 1; overflow-y: auto; padding: 4px 0 10px; scrollbar-width: thin; scrollbar-color: var(--lg-scroll-track) transparent; }
.sp-body::-webkit-scrollbar { width: 8px; }
.sp-body::-webkit-scrollbar-track { background: transparent; }
.sp-body::-webkit-scrollbar-thumb {
  background: var(--lg-scroll-thumb);
  border: 2px solid transparent;
  background-clip: padding-box;
  border-radius: 999px;
  box-shadow: var(--lg-scroll-thumb-shadow);
}
.sp-body::-webkit-scrollbar-thumb:hover {
  background: var(--lg-scroll-thumb-hover);
  background-clip: padding-box;
}

/* The drawer used to be four bands with a hairline between each and the
   padding to keep the rule off the content. The rules are gone — every group
   here already announces itself, with an eyebrow label or by being a grid of
   tiles — so the padding that existed to hold them apart goes with them, and
   the sections read as one column instead of a stack of drawers. */
.sp-section {
  padding: 16px 22px 14px;
  display: flex; flex-direction: column; gap: 10px;
}
/* Tightened sections used by the compacted (no-scroll) drawer */
.sp-section-tight { padding: 7px 22px 6px; gap: 7px; }
/* CONCIERGE and LANGUAGE. At 7px and 0.35 alpha these measured 3.8:1 on the
   drawer ground — under AA, and small enough to read as texture rather than
   as the headings they are. */
.sp-label {
  font-size: 8px; letter-spacing: 2.4px; text-transform: uppercase;
  color: rgba(255,255,255,0.68); font-weight: 600; margin-bottom: 4px;
}
/* Compacted drawer: chips a touch shorter */
#side-panel .sp-user-chip { padding-top: 6px; padding-bottom: 6px; }

/* On short windows, tighten further so the drawer still doesn't scroll. The
   threshold was 720px and the values inside had drifted looser than the base
   tier above, so it was adding height on exactly the screens that had none to
   spare. Vertical longhands only — the phone block's 16px sides survive. */
@media (max-height: 820px) {
  .sp-header { padding-top: 10px; padding-bottom: 9px; }
  .sp-launcher-sec { padding-top: 9px; padding-bottom: 8px; }
  .sp-launcher { gap: 6px; }
  .sp-tile { padding-top: 6px; padding-bottom: 5px; }
  .sp-util-tile { padding-top: 6px; padding-bottom: 5px; }
  .sp-glance { margin-bottom: 6px; }
  .sp-glance-seg { padding-top: 7px; padding-bottom: 7px; }
  .sp-section-tight { padding-top: 6px; padding-bottom: 5px; gap: 6px; }
  #side-panel .sp-user-chip { padding-top: 5px; padding-bottom: 5px; }
}

.sp-select {
  width: 100% !important;
  padding: 8px 30px 8px 14px !important;
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  color: rgba(255,255,255,0.88) !important;
  font-size: 12px !important; font-weight: 300 !important;
  border-radius: 999px !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  font-family: inherit !important;
  -webkit-appearance: none !important; appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='rgba(255,255,255,0.4)' stroke-width='1.3' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-size: 10px 6px !important;
  background-position: right 12px center !important;
  background-repeat: no-repeat !important;
  cursor: pointer !important;
  transition: border-color 0.18s !important;
}
.sp-select:hover { border-color: rgba(180,155,115,0.45) !important; }
.sp-select:focus { border-color: rgba(180,155,115,0.7) !important; outline: none !important; }
.sp-select option { background: #1a1a14; color: #fff; }

.sp-btn {
  width: 100%;
  display: flex; align-items: center; gap: 12px;
  padding: 11px 14px;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.8);
  font-family: inherit;
  font-size: 12px;
  font-weight: 300;
  border-radius: 999px;
  cursor: pointer;
  text-align: left;
  transition: border-color .18s, color .18s;
  letter-spacing: 0.01em;
}
.sp-btn:hover {
  border-color: rgba(180,155,115,0.45);
  color: rgba(255,255,255,0.95);
}
.sp-btn-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px;
  font-size: 13px; color: rgba(255,255,255,0.5);
  flex-shrink: 0;
}
.sp-btn-label { flex: 1; }
.sp-btn-danger { border-color: rgba(220,120,120,0.2); color: rgba(255,200,200,0.85); }
.sp-btn-danger:hover { border-color: rgba(220,120,120,0.5); color: rgba(255,180,180,0.95); }
.sp-draft-status {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 10px; letter-spacing: 0.04em;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(255,255,255,0.05);
  color: rgba(255,255,255,0.50);
  align-self: flex-start;
  min-height: 20px;
}
.sp-draft-status.saved  { color: rgba(180,215,160,0.80); background: rgba(100,180,80,0.10); }
.sp-draft-status.saving { color: rgba(255,255,255,0.40); }
.sp-draft-status.error  { color: rgba(240,163,163,0.90); background: rgba(200,80,80,0.12); }
/* One row, not two. The header said "Brightness" over a track flanked by a
   small sun and a large one — three ways of saying the same thing stacked to
   two bands' height. The word carries it, the slider is the control, and the
   step name sits at the end where the value belongs. */
.sp-brightness-row { display: flex; align-items: center; gap: 10px; }
.sp-brightness-header { display: contents; }
.sp-brightness-label { font-size: 12px; font-weight: 300; color: rgba(255,255,255,0.75); flex: 0 0 auto; order: 1; }
.sp-brightness-track { display: flex; align-items: center; flex: 1 1 auto; min-width: 0; order: 2; }
.sp-brightness-val {
  font-size: 10px; color: rgba(255,255,255,0.42); order: 3; flex: 0 0 auto;
  min-width: 52px; text-align: right; font-variant-numeric: tabular-nums;
}
/* The sun glyphs and the icon that sat before the word are what the row loses
   to fit on one line; the label and the value both say more than they did. */
.sp-brightness-header > .sp-btn-icon,
.sp-brightness-icon { display: none; }
/* The track is 3px of paint inside a 22px box you can actually hit.

   On a phone the generic 44px touch-target rule for inputs was winning here:
   measured, the slider computed to min-height 42px with 8px of padding, so
   the gradient painted across the whole box and the control rendered as a
   pale filled rectangle rather than a line. Clipping the background to the
   content box means the padding is hit area and nothing else — the same trick
   gives the desktop a grabbable target instead of a three-pixel wire. */
input[type=range].sp-range {
  -webkit-appearance: none; appearance: none;
  flex: 1; outline: none; cursor: pointer; border: none;
  box-sizing: border-box;
  min-height: 0;
  height: 22px;
  padding: 9.5px 0;
  border-radius: 2px;
  background: linear-gradient(to right, var(--gold, #c9a96e) var(--fill,0%), rgba(255,255,255,0.14) var(--fill,0%));
  background-clip: content-box;
}
input[type=range].sp-range::-webkit-slider-thumb {
  -webkit-appearance: none; width: 14px; height: 14px;
  border-radius: 50%; background: var(--gold, #c9a96e); cursor: pointer;
  box-shadow: 0 1px 4px rgba(0,0,0,0.35);
}
input[type=range].sp-range::-moz-range-thumb {
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--gold, #c9a96e); border: none; cursor: pointer;
}

/* No rule above it either. Log out is the only thing down here and it is a
   bordered button on an empty ground — it does not need a line to be found. */
.sp-footer {
  padding: 8px 20px 14px;
  padding-bottom: max(14px, env(safe-area-inset-bottom));
  display: flex; flex-direction: column; gap: 10px;
}


@media (max-width: 600px) {
  .side-panel { width: 86vw; min-width: 240px; }
  .sp-header { padding: 12px 16px 10px; }
  .sp-section { padding: 13px 16px 11px; gap: 10px; }
  .sp-launcher-sec { padding: 12px 16px 11px; }
  .sp-section-tight { padding: 8px 16px 7px; gap: 7px; }
  .sp-footer {
    padding: 11px 16px;
    padding-bottom: max(12px, env(safe-area-inset-bottom));
    gap: 10px;
  }
}

/* A short phone was getting the roomy phone values. The compact tier is keyed
   on height and sits earlier in the file, so the width-keyed phone block above
   overrode it at equal specificity — on a 390x667 screen, exactly the one with
   no height to spare, the drawer used the generous padding. Same numbers as
   the compact tier, applied where both conditions hold. */
@media (max-width: 600px) and (max-height: 820px) {
  .sp-header { padding-top: 10px; padding-bottom: 9px; }
  .sp-launcher-sec { padding-top: 9px; padding-bottom: 8px; }
  .sp-section-tight { padding-top: 6px; padding-bottom: 5px; }
  .sp-tile { padding-top: 6px; padding-bottom: 5px; }
  .sp-util-tile { padding-top: 6px; padding-bottom: 5px; }
  .sp-glance-seg { padding-top: 7px; padding-bottom: 7px; }
  #side-panel .sp-user-chip { padding-top: 5px; padding-bottom: 5px; }
  .sp-footer { padding-top: 6px; }
}

/* The compact spacing above was tuned to fit a phone viewport without
   scrolling. On a maximized desktop window there's far more height than
   the drawer's content needs, which otherwise leaves a dead, unstyled gap
   floating above the footer. Rather than guess at a fixed padding number
   (wrong for every window height but one), push the last section down
   with margin-top:auto so it settles just above the footer and the extra
   room reads as deliberate spacing between the two groups, at any height. */
.sp-body { display: flex; flex-direction: column; }
.sp-body > *:last-child { margin-top: auto; }

/* Desktop / tall screens: a touch more breathing room in the sections
   themselves, since the compact mobile spacing isn't needed here.

   The threshold used to be 760px, and the numbers inside were generous
   enough that the drawer overflowed its own scroller by 61px at a 900px
   viewport — the roomy tier was being applied to windows that had no room
   for it. It now starts at 900px and the values are trimmed so the whole
   drawer fits at exactly that height, with the compact tier covering
   everything shorter. */
@media (min-width: 601px) and (min-height: 900px) {
  .sp-header { padding: 18px 24px 15px; }
  .sp-launcher-sec { padding: 18px 24px 16px; }
  .sp-launcher { gap: 9px; }
  .sp-tile { padding: 8px 5px 7px; }
  .sp-glance { gap: 10px; margin-bottom: 10px; }
  .sp-glance-seg { padding: 10px 15px; }
  .sp-section-tight { padding: 11px 24px 10px; gap: 10px; }
  #side-panel .sp-user-chip { padding-top: 8px; padding-bottom: 8px; }
  .sp-util-tile { padding: 8px 5px 7px; }
}


/* ── Night tariff auto-flag ────────────────────────────────── */
.night-tariff-flag {
  display: none;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.9px;
  text-transform: uppercase;
  color: #9a6600;
  background: rgba(210, 140, 0, 0.10);
  border: 1px solid rgba(210, 140, 0, 0.28);
  border-radius: 4px;
  padding: 2px 7px;
  margin-top: 4px;
  white-space: nowrap;
  user-select: none;
  -webkit-user-select: none;
}
.night-tariff-flag.visible { display: inline-block; }
html.dark-mode .night-tariff-flag {
  color: #f5c842;
  background: rgba(245, 200, 60, 0.09);
  border-color: rgba(245, 200, 60, 0.26);
}
.field:has(.night-tariff-flag.visible) input[type="time"] {
  border-color: rgba(210, 140, 0, 0.55) !important;
  box-shadow: 0 0 0 2px rgba(210, 140, 0, 0.09);
}
html.dark-mode .field:has(.night-tariff-flag.visible) input[type="time"] {
  border-color: rgba(245, 200, 60, 0.48) !important;
  box-shadow: 0 0 0 2px rgba(245, 200, 60, 0.09);
}

/* ── Mobile full-screen preview sheet ─────────────────────── */
.mobile-preview-sheet {
  position: fixed;
  inset: 0;
  z-index: 800;
  display: flex;
  flex-direction: column;
  background: var(--panel-bg, #1c1c1a);
  transform: translateY(100%);
  transition: transform 0.30s cubic-bezier(0.32, 0, 0.32, 1);
  visibility: hidden;
  padding-top: env(safe-area-inset-top);
}
.mobile-preview-sheet.open {
  transform: translateY(0);
  visibility: visible;
}
.mobile-preview-sheet-handle {
  width: 36px; height: 4px;
  border-radius: 2px;
  background: rgba(180,155,115,0.32);
  margin: 10px auto 0;
  flex-shrink: 0;
}
.mobile-preview-sheet-header {
  display: flex;
  align-items: center;
  padding: 10px 16px 12px;
  border-bottom: 1px solid var(--border, rgba(255,255,255,0.08));
  gap: 10px;
  flex-shrink: 0;
}
.mobile-preview-close {
  background: none;
  border: none;
  font-size: 16px;
  line-height: 1;
  color: var(--muted);
  cursor: pointer;
  padding: 4px 8px;
  margin: 0;
  -webkit-tap-highlight-color: transparent;
}
.mobile-preview-sheet-title {
  flex: 1;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--text);
}
.mobile-preview-body {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0;
}
/* Tighter doc padding and wider tables for narrow mobile preview */
.mobile-preview-body .doc-output .doc-body {
  padding: 20px 12px 20px !important;
}
.mobile-preview-body .doc-output {
  max-width: 100% !important;
  width: 100% !important;
}
.mobile-preview-body .doc-single-table {
  width: 85% !important;
}
.mobile-preview-body .preview-panel {
  position: static !important;
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
  width: 100% !important;
}
.mobile-preview-body .preview-panel .panel-header { display: none !important; }
.mobile-preview-sheet-footer {
  display: flex;
  gap: 8px;
  padding: 10px 16px;
  padding-bottom: calc(10px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--border, rgba(255,255,255,0.08));
  flex-shrink: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.mobile-preview-sheet-footer::-webkit-scrollbar { display: none; }
.mobile-preview-sheet-footer .btn { flex: 1; min-width: max-content; font-size: 9px; }

/* Floating "Preview" FAB — shown on 641-768px, replaced by in-row button on pill breakpoint */
.mobile-preview-fab {
  display: none;
}
@media (max-width: 768px) {
  .mobile-preview-fab {
    display: block;
    position: fixed;
    bottom: calc(64px + env(safe-area-inset-bottom));
    right: 16px;
    z-index: 490;
    background: var(--gold, #c9a96e);
    color: #111110;
    border: none;
    border-radius: 999px;
    font-family: 'DM Sans', sans-serif;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    padding: 10px 20px;
    cursor: pointer;
    box-shadow: 0 3px 14px rgba(0,0,0,0.30);
    -webkit-tap-highlight-color: transparent;
    transition: opacity 0.15s;
  }
  .mobile-preview-fab:active { opacity: 0.75; }
}
/* On pill breakpoint: hide FAB, show in-row Prev button instead */
.btn-preview-mobile { display: none; }
@media (max-width: 640px) {
  .mobile-preview-fab { display: none !important; }
  .btn-preview-mobile { display: flex; }
}


/* ══ Forecast panel ══════════════════════════════════════════════════════
   Reads the way a weather face should: what it is like now, the readings
   behind it, the shape of the next day, then the week. */
.wx-now { display: flex; align-items: center; gap: 16px; padding: 4px 0 14px; }
.wx-now-icon { font-size: 44px; line-height: 1; flex: 0 0 auto; }
.wx-now-read { min-width: 0; }
.wx-now-temp {
  font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 300;
  font-size: 46px; line-height: 0.95; color: var(--text); letter-spacing: -1px;
}
.wx-now-unit { font-size: 17px; letter-spacing: 0; margin-left: 2px; color: var(--muted); }
.wx-now-feels { font-size: 12px; color: var(--muted); margin-top: 3px; }
.wx-now-range { font-size: 12.5px; color: var(--text); opacity: 0.75; margin-top: 1px; font-variant-numeric: tabular-nums; }

.wx-stats {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px 8px; padding: 12px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
}
@media (max-width: 620px) { .wx-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.wx-stat { min-width: 0; }
.wx-stat-k {
  display: block; font-family: ui-monospace, Menlo, monospace; font-size: 8px;
  letter-spacing: 1.3px; text-transform: uppercase; color: var(--muted); margin-bottom: 2px;
}
.wx-stat-v {
  display: block; font-size: 13.5px; color: var(--text); font-variant-numeric: tabular-nums;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wx-stat-v i { font-style: normal; font-size: 9px; color: var(--muted); margin-left: 2px; }

.wx-curve { position: relative; padding: 14px 0 6px; }
.wx-curve svg { display: block; width: 100%; height: 62px; }
.wx-curve-scale {
  position: absolute; right: 0; top: 35px; height: 62px;
  display: flex; flex-direction: column; justify-content: space-between;
  font-family: ui-monospace, Menlo, monospace; font-size: 8px; color: var(--muted); opacity: 0.7;
}
.wx-curve-axis {
  display: flex; justify-content: space-between; margin-top: 5px;
  font-family: ui-monospace, Menlo, monospace; font-size: 10px; color: var(--muted); opacity: 0.85;
}
/* The sky above the line it belongs to, not a caption under it — the same
   row MeteoSwiss's own detail view reads first. Each icon sits at the exact
   hour (or day) its slice of the curve covers, so scanning left to right and
   reading the curve are the same motion. Sized to actually tell rain from
   cloud from sun at a glance, not just to mark that something changed. */
.wx-curve-icons { position: relative; height: 22px; margin-bottom: 3px; }
.wx-curve-icons span {
  position: absolute; top: 0; transform: translateX(-50%);
  font-size: 18px; line-height: 1;
}

/* The week as the same curve, run on for eight days instead of one — the
   day dividers are the only new grammar; the line, the fill and the scale
   read exactly the way the 24-hour one above does. */
.wx-week-curve {
  position: relative; padding: 18px 0 6px; margin-top: 18px;
  border-top: 1px solid var(--border);
}
.wx-week-curve svg { display: block; width: 100%; height: 74px; }
.wx-week-curve .wx-curve-scale { top: 39px; height: 74px; }
.wx-week-curve-axis span {
  position: absolute; transform: translateX(-50%);
  font-family: ui-monospace, Menlo, monospace; font-size: 10px; color: var(--muted); opacity: 0.85;
}
.wx-week-curve-axis { position: relative; height: 13px; margin-top: 4px; }

.wx-week { display: flex; gap: 5px; padding: 10px 0 4px; border-top: 1px solid var(--border); }
.wx-wday {
  flex: 1 1 0; min-width: 0; text-align: center; padding: 7px 2px;
  border: 1px solid var(--border); border-radius: 9px; background: var(--card-bg);
}
.wx-wday-name {
  display: block; font-family: ui-monospace, Menlo, monospace; font-size: 8px;
  letter-spacing: 0.8px; text-transform: uppercase; color: var(--muted);
}
.wx-wday-icon { display: block; font-size: 15px; margin: 3px 0 2px; line-height: 1; }
.wx-wday-range { display: block; font-size: 10px; color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.wx-wday-range i { font-style: normal; color: var(--muted); }
.wx-wday-range em { font-style: normal; }
/* Seven cells across a phone leave no room for "32° / 18°" on one line, so
   the low moves under the high, and the separator goes with the line break. */
@media (max-width: 560px) {
  .wx-week { gap: 3px; }
  .wx-wday-range { font-size: 9.5px; line-height: 1.3; }
  .wx-wday-range i { display: block; }
  .wx-wday-range em { display: none; }
}

/* ── The country, under the fold ──────────────────────────────────────
   One city's own numbers above, the wider picture below. swisstopo has no
   dark-themed tiles of its own to switch to — only a colour map, a winter
   one and a satellite one — so dark mode gets the same photograph run
   through a filter instead: inverted and hue-turned back the other way,
   which reads as a dark map rather than a negative of a light one, then
   dimmed and taken down a little in saturation so it sits quietly behind
   the pins rather than glowing. Scoped to the tile pane alone — the pane
   the pins and the zoom control live in is a separate layer Leaflet keeps
   for exactly this, so neither inverts along with the terrain. */
.wx-map-section { margin-top: 18px; }
.wx-map {
  height: 400px; width: 100%; border-radius: 10px; overflow: hidden;
  border: 1px solid var(--border); background: var(--card-bg);
}
html.dark-mode .wx-map .leaflet-tile-pane {
  filter: invert(1) hue-rotate(180deg) brightness(0.75) contrast(0.92) saturate(0.88);
}
.wx-map-attr {
  font-family: ui-monospace, Menlo, monospace; font-size: 8px; letter-spacing: 0.5px;
  color: var(--muted); opacity: 0.7; margin-top: 6px; text-align: right;
}
/* Leaflet's own div-icon carries a white box and a grey border by default;
   this one skips that class entirely (see className in _wxMapFetch) so the
   pill below is the only thing drawn. */
.wx-map-pin-wrap { background: none; border: none; }
.wx-map-pin {
  display: flex; align-items: center; gap: 5px;
  transform: translate(-50%, -100%); margin-top: -8px;
  background: var(--panel-bg); color: var(--text);
  border: 1px solid var(--border);
  border-radius: 999px; padding: 3px 9px 3px 7px;
  box-shadow: 0 2px 8px rgba(20,15,8,0.28);
  font-family: 'DM Sans', sans-serif; font-size: 11px; font-weight: 500;
  white-space: nowrap;
}
.wx-map-pin-icon { font-size: 13px; line-height: 1; }
.wx-map-pin-temp { font-variant-numeric: tabular-nums; color: var(--muted); font-weight: 400; margin-left: 1px; }
.wx-map-pin-temp i { font-style: normal; opacity: 0.75; margin-left: 2px; }

/* ══ Flight panel ════════════════════════════════════════════════════════
   The forecast panel's grammar, applied to a different reading: the next
   flight large, the eight facts behind it, then the rest of the week's legs
   as rows. Status is the one place this panel carries colour of its own —
   three hues tuned to the warm palette rather than a traffic light, because
   "late" has to read at a glance across the desk. */
:root {
  /* Solved against the ground each of them is actually drawn on — the card,
     and the calendar block's own 8% wash of the same hue. The old amber
     measured 3.48:1 there, which is under what small text needs; these clear
     5.5:1 and keep the hue. Dark mode's three already did. */
  --fl-ok:   #50684D;
  --fl-late: #825B21;
  --fl-off:  #A3432D;
  /* A leg that has moved earlier reads the same way as one running late —
     both mean the pick-up time on the booking no longer matches the flight
     — but late and early were painted identically, so the only way to tell
     which is to read the struck time rather than see it. A blue apart from
     the warm three, solved the same way: 6.2:1 on this ground. */
  --fl-early: #355E7D;
  /* The calendar badge's own deep tones — solid fills, not text on a ground,
     so they carry white at well past 4.5:1 on their own and need no second
     set of values for dark mode. Kept apart from --fl-late/-off/-early
     above, which are still read as plain text elsewhere (the flight panel,
     the lobby board) and need the lighter dark-mode versions those places
     are tuned for.

     Re-tuned alongside the calendar's own dusty, mood-board palette: the
     original amber/petrol/claret trio was pitched for the earlier, more
     saturated jewel-tone cards and read as a mismatch once those softened.
     Petrol in particular sat almost on top of the new Departure sage-teal,
     the one card a badge is likeliest to share a glance with. */
  --fl-badge-late:  #8C5A1E;
  --fl-badge-early: #55677A;
  --fl-badge-off:   #8C3A3A;
}
html.dark-mode {
  --fl-ok:   #90AF88;
  --fl-late: #D9A75C;
  /* Lifted with the block under it: on the old fill this read 5.7:1, on the
     one a card-shaped block sits at it read 4.44:1. */
  --fl-off:  #D99281;
  --fl-early: #8FB4CC;
}

.fl-src-tag {
  font-family: ui-monospace, Menlo, monospace; font-size: 7.5px; letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--muted);
  border: 1px solid var(--border); border-radius: 999px; padding: 2px 6px;
}
.fl-src-tag.fl-live { color: var(--fl-ok); border-color: color-mix(in srgb, var(--fl-ok) 45%, transparent); }

.fl-now { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 4px 0 14px; }
.fl-now-read { min-width: 0; }
.fl-now-num {
  font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 300;
  font-size: 40px; line-height: 0.95; color: var(--text); letter-spacing: 0.5px;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.fl-now-air {
  font-size: 12px; color: var(--muted); margin-top: 5px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fl-now-side { flex: 0 0 auto; text-align: right; }
.fl-now-time {
  font-size: 13px; color: var(--text); margin-top: 6px;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.fl-now-time b { font-weight: 400; color: var(--fl-late); }
.fl-now-delta {
  font-family: ui-monospace, Menlo, monospace; font-size: 8.5px; letter-spacing: 1px;
  text-transform: uppercase; color: var(--muted); margin-top: 2px;
}

/* Status reads as a word in its own colour, not a filled badge — the desk is
   already a warm, quiet surface and a solid block of colour fights it. */
.fl-pill {
  display: inline-block; font-family: ui-monospace, Menlo, monospace;
  font-size: 8.5px; letter-spacing: 1.4px; text-transform: uppercase;
  padding: 3px 8px; border-radius: 999px; white-space: nowrap;
  border: 1px solid var(--border); color: var(--muted);
}
.fl-pill.fl-on-time { color: var(--fl-ok);   border-color: color-mix(in srgb, var(--fl-ok) 42%, transparent); }
.fl-pill.fl-early   { color: var(--fl-ok);   border-color: color-mix(in srgb, var(--fl-ok) 42%, transparent); }
.fl-pill.fl-delayed { color: var(--fl-late); border-color: color-mix(in srgb, var(--fl-late) 48%, transparent); }
.fl-pill.fl-cancelled,
.fl-pill.fl-diverted { color: var(--fl-off); border-color: color-mix(in srgb, var(--fl-off) 48%, transparent); }

.fl-stats {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px 8px; padding: 12px 0;
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
}
@media (max-width: 620px) { .fl-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.fl-stat { min-width: 0; }
.fl-stat-k {
  display: block; font-family: ui-monospace, Menlo, monospace; font-size: 8px;
  letter-spacing: 1.3px; text-transform: uppercase; color: var(--muted); margin-bottom: 2px;
}
.fl-stat-v {
  display: block; font-size: 13px; color: var(--text); font-variant-numeric: tabular-nums;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* The remaining legs. Rows, not cards — a flight number needs a guest name
   beside it, and seven of those across a column is unreadable. */
.fl-rows { padding: 6px 0 2px; }
/* Five columns, not four: the guest sits beside the flight number instead of
   on a second line under it. The pair the desk reads off this list is the
   guest and their flight, and on two lines the name was the smallest type on
   the card. One line each, both a size up, and the list is shorter for it. */
.fl-row {
  display: grid; grid-template-columns: 46px 46px auto minmax(0, 1fr) auto;
  align-items: baseline; gap: 4px 10px; width: 100%;
  padding: 9px 2px; background: none; border: 0;
  border-bottom: 1px solid var(--border); text-align: left; cursor: pointer;
  font-family: inherit; color: var(--text);
}
.fl-row:last-child { border-bottom: 0; }
.fl-row:hover { background: var(--card-bg); }
.fl-row-day {
  font-family: ui-monospace, Menlo, monospace; font-size: 8.5px; letter-spacing: 0.8px;
  text-transform: uppercase; color: var(--muted); white-space: nowrap;
}
.fl-row-time {
  font-size: 13.5px; font-variant-numeric: tabular-nums; color: var(--text);
  white-space: nowrap;
}
.fl-row-num {
  font-size: 14.5px; font-variant-numeric: tabular-nums;
  white-space: nowrap; color: var(--text);
}
/* The guest takes the flexible column, so a long name ellipsises rather than
   pushing the status off the end of the row. */
.fl-row-who {
  min-width: 0; font-size: 13px; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fl-row-who > i {
  font-style: normal; color: var(--muted); margin-right: 6px;
}
/* The landing and take-off marks. Sized in px rather than em so they stay the
   same object in the row, the panel head and the phone card, and dropped a
   couple of pixels below the baseline so the runway line sits where the
   underline of the text would. */
.fl-dir { width: 16px; height: 16px; flex: 0 0 auto; vertical-align: -3px; }
.fl-now-air .fl-dir { width: 15px; height: 15px; vertical-align: -3px; margin-right: 3px; }
.fl-row-st {
  font-family: ui-monospace, Menlo, monospace; font-size: 9.5px; letter-spacing: 1px;
  text-transform: uppercase; color: var(--muted); white-space: nowrap;
}
/* A phone has no room for five columns, so the guest drops under the flight
   number there and the row goes back to two lines. */
@media (max-width: 560px) {
  .fl-row { grid-template-columns: 40px 42px minmax(0, 1fr) auto; }
  .fl-row-who { grid-column: 3 / 4; grid-row: 2; font-size: 12px; }
  .fl-row-num { grid-column: 3 / 4; grid-row: 1; font-size: 13.5px; }
  .fl-row-st { grid-column: 4; grid-row: 1; }
}
.fl-row-st.fl-on-time, .fl-row-st.fl-early { color: var(--fl-ok); }
.fl-row-st.fl-delayed { color: var(--fl-late); }
.fl-row-st.fl-cancelled, .fl-row-st.fl-diverted { color: var(--fl-off); }

.fl-note {
  margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--border);
  font-size: 10px; line-height: 1.45; color: var(--muted);
}
.fl-empty {
  padding: 26px 0; text-align: center; font-size: 12px; color: var(--muted);
}
.fl-empty span { display: block; margin-top: 6px; font-size: 10.5px; opacity: 0.8; }

/* On a phone the panel is the full width of the screen, so the head can keep
   its two halves; only the flight number needs to come down a size. */
@media (max-width: 560px) {
  .fl-now-num { font-size: 34px; }
  .fl-row { grid-template-columns: 38px 40px minmax(0, 1fr) auto; gap: 6px; }
}

/* ══ The leg, in its own window ═══════════════════════════════════════════
   A departures board reads as one wide line — where it left, how long it is
   in the air, where it lands — with the detail underneath. The route is the
   only thing set large here; everything below it is the same quiet label-and-
   value grammar the forecast window uses, so the two windows read as siblings
   rather than as two designs. */
.flw { font-family: 'DM Sans', system-ui, sans-serif; }

.flw-head {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  flex-wrap: wrap; padding: 14px 0 6px;
}
.flw-head-l { display: flex; align-items: baseline; gap: 10px; min-width: 0; flex-wrap: wrap; flex: 1 1 auto; }
.flw-op {
  font-family: ui-monospace, Menlo, monospace; font-size: 9px; letter-spacing: 1.6px;
  text-transform: uppercase; color: var(--muted);
}
.flw-num { font-size: 14px; color: var(--text); font-variant-numeric: tabular-nums; }
/* Out to a public tracker. Quiet until wanted — the desk reads this card, it
   does not usually need to leave it. */
.flw-out {
  margin-left: auto; margin-right: 2px;
  font-family: ui-monospace, Menlo, monospace; font-size: 8px; letter-spacing: 1.1px;
  text-transform: uppercase; color: var(--muted); text-decoration: none;
  opacity: 0.45; transition: opacity 0.15s, color 0.15s; white-space: nowrap;
}
.flw-out:hover, .flw-out:focus-visible { opacity: 1; color: var(--gold, #8F6D55); }

.flw-chip {
  font-family: ui-monospace, Menlo, monospace; font-size: 8.5px; letter-spacing: 1.2px;
  text-transform: uppercase; color: var(--muted);
  border: 1px solid var(--border); border-radius: 999px; padding: 3px 8px;
}
/* Beside the flight number, not in a footnote under a card that scrolls. */
.flw-chip-sample {
  color: var(--fl-late);
  border-color: color-mix(in srgb, var(--fl-late) 55%, transparent);
  background: color-mix(in srgb, var(--fl-late) 9%, transparent);
}
.flw-sample {
  margin: 8px 0 0; padding: 9px 12px; border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--fl-late) 32%, transparent);
  background: color-mix(in srgb, var(--fl-late) 7%, transparent);
  font-size: 11px; line-height: 1.5; color: var(--fl-late);
}

/* A time the flight has moved past, struck through, beside the one it now
   gives. Used on the card's route and on the day's blocks. */
.flw-fact-v > s { text-decoration: line-through; opacity: 0.55; margin-right: 5px; }

/* Why a card has no reading. Same shape as the sample banner — it sits in the
   same place and answers the same kind of question — in the muted ink rather
   than the amber, because an unreadable flight is a fact about the feed and
   not a warning about the booking. */
.flw-why {
  margin: 8px 0 0; padding: 9px 12px; border-radius: 10px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--muted) 7%, transparent);
  font-size: 11px; line-height: 1.5; color: var(--muted);
}

/* The route. Three columns so the middle stays centred however long the two
   city names run; the ends never wrap because an airport code is three
   characters by definition. */
.flw-route {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(120px, 1.4fr) minmax(0, 1fr);
  align-items: center; gap: 18px;
  padding: 14px 0 20px;
}
.flw-end { min-width: 0; }
.flw-end-r { text-align: right; }
.flw-iata {
  font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 300;
  font-size: 52px; line-height: 0.92; letter-spacing: 0.5px; color: var(--text);
}
.flw-t {
  margin-top: 6px; font-size: 15px; color: var(--text);
  font-variant-numeric: tabular-nums;
}
.flw-city {
  margin-top: 2px; font-size: 11.5px; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.flw-mid { text-align: center; }
.flw-dur {
  font-family: ui-monospace, Menlo, monospace; font-size: 9px; letter-spacing: 1.3px;
  text-transform: uppercase; color: var(--muted); margin-bottom: 7px;
}
.flw-track { display: flex; align-items: center; gap: 7px; color: var(--gold-mid, #A68A74); }
.flw-dot {
  width: 5px; height: 5px; border-radius: 50%; flex: 0 0 auto;
  border: 1px solid currentColor;
}
.flw-rule {
  flex: 1 1 auto; height: 0; border-top: 1px dashed currentColor; opacity: 0.5;
}
.flw-plane { flex: 0 0 auto; transform: rotate(90deg); opacity: 0.85; }

/* Guest, operator, aircraft, pick-up — the booking beside the flight. */
.flw-facts {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 14px;
  padding: 18px 0 4px;
}
.flw-fact { min-width: 0; }
.flw-fact-k {
  display: block; font-family: ui-monospace, Menlo, monospace; font-size: 8px;
  letter-spacing: 1.3px; text-transform: uppercase; color: var(--muted); margin-bottom: 3px;
}
.flw-fact-v {
  display: block; font-size: 13.5px; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* The two ends, side by side. */
.flw-legs { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 16px 0 4px; }
/* Held by their ground rather than by a border — two more boxed outlines on a
   card this tall is three lines where none is needed. */
.flw-leg {
  border: 0; border-radius: 12px;
  background: color-mix(in srgb, var(--gold, #8F6D55) 5%, var(--card-bg));
  padding: 15px 16px 16px; min-width: 0;
}
.flw-leg-hd {
  font-family: ui-monospace, Menlo, monospace; font-size: 8.5px; letter-spacing: 1.6px;
  text-transform: uppercase; color: var(--muted); margin-bottom: 9px;
}
.flw-leg-apt { display: flex; align-items: baseline; gap: 8px; }
.flw-leg-iata {
  font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 300;
  font-size: 28px; line-height: 1; color: var(--text);
}
.flw-leg-icao {
  font-family: ui-monospace, Menlo, monospace; font-size: 9px; letter-spacing: 1px;
  color: var(--muted);
}
.flw-leg-city {
  margin-top: 3px; font-size: 12px; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.flw-sub {
  font-family: ui-monospace, Menlo, monospace; font-size: 8px; letter-spacing: 1.3px;
  text-transform: uppercase; color: var(--muted); margin: 14px 0 6px;
}
.flw-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.flw-chips span {
  font-size: 11px; color: var(--text);
  border: 1px solid var(--border); border-radius: 8px; padding: 4px 9px;
  white-space: nowrap;
}
.flw-times { display: flex; flex-direction: column; gap: 5px; }
.flw-times > div {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  font-size: 12px;
}
.flw-times > div > span { color: var(--muted); }
.flw-times > div > b {
  font-weight: 400; color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap;
}
/* A revised time that has actually moved is the one number on this card that
   has to catch the eye from across the desk. */
.flw-times > div.moved > b { color: var(--fl-late); }

/* The map. Land is a hairline outline on the card's own ground rather than a
   filled slab: a departures card is a document, and a block of satellite grey
   in the middle of one reads as a screenshot someone pasted in. */
.flw-map {
  position: relative; margin: 4px 0 0;
  border: 1px solid var(--border); border-radius: 12px; overflow: hidden;
  background: var(--card-bg);
}
/* 3.2 here and FL_MAP_ASPECT in desk-core.js are one number in two places:
   the viewBox is built to this shape so nothing is ever cropped or boxed. */
.flw-map svg { display: block; width: 100%; height: auto; aspect-ratio: 3.2; }
.flw-map-land {
  fill: color-mix(in srgb, var(--gold, #8F6D55) 8%, transparent);
  stroke: color-mix(in srgb, var(--gold, #8F6D55) 34%, transparent);
  vector-effect: none;
}
.flw-map-route { fill: none; stroke: var(--muted); opacity: 0.55; }
.flw-map-flown { fill: none; stroke: var(--gold, #8F6D55); stroke-linecap: round; }
.flw-map-end { fill: var(--card-bg); stroke: var(--gold, #8F6D55); }
.flw-map-tag {
  position: absolute; right: 8px; bottom: 7px;
  font-family: ui-monospace, Menlo, monospace; font-size: 7.5px; letter-spacing: 1.2px;
  text-transform: uppercase; color: var(--muted);
  background: color-mix(in srgb, var(--card-bg) 82%, transparent);
  border-radius: 999px; padding: 3px 8px;
}

/* ══ Checking a flight ════════════════════════════════════════════════════
   Above the Flight field in the transfer form, and at the top of the flight
   window. The desk is reading back what a guest or an agent gave over the
   phone, so the card is a reading and nothing in it is a control — a lookup
   that quietly rewrote the field would turn a wrong correction into a
   confirmed one. */
.field:has(> .tf-flchk) { position: relative; }
.tf-flchk {
  display: none; position: absolute; left: 0; bottom: calc(100% + 8px); z-index: 60;
  min-width: 248px; max-width: 330px;
  padding: 11px 13px 12px; border-radius: 12px;
  border: 1px solid var(--border); background: var(--card-bg);
  box-shadow: 0 14px 34px rgba(0,0,0,0.13), 0 2px 6px rgba(0,0,0,0.06);
  font-family: 'DM Sans', system-ui, sans-serif; text-align: left;
}
.tf-flchk.open { display: block; }
/* A little nib, so it reads as belonging to the field under it. */
.tf-flchk::after {
  content: ''; position: absolute; top: 100%; left: 20px;
  border: 6px solid transparent; border-top-color: var(--card-bg);
}
.flchk-hd { display: flex; align-items: baseline; gap: 8px; margin-bottom: 7px; }
.flchk-num { font-size: 14px; color: var(--text); font-variant-numeric: tabular-nums; }
.flchk-air {
  font-size: 11px; color: var(--muted); min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.flchk-src {
  margin-left: auto; flex: 0 0 auto;
  font-family: ui-monospace, Menlo, monospace; font-size: 7.5px; letter-spacing: 1.2px;
  text-transform: uppercase; color: var(--fl-ok);
  border: 1px solid color-mix(in srgb, var(--fl-ok) 45%, transparent);
  border-radius: 999px; padding: 2px 6px;
}
.flchk-src.is-sample { color: var(--fl-late); border-color: color-mix(in srgb, var(--fl-late) 50%, transparent); }
.flchk-route {
  display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap;
  font-variant-numeric: tabular-nums;
}
.flchk-route b { font-weight: 400; font-size: 16px; color: var(--text); letter-spacing: 0.4px; }
.flchk-route span { font-size: 12.5px; color: var(--text); }
.flchk-route i { font-style: normal; color: var(--muted); margin: 0 2px; }
.flchk-meta {
  margin-top: 3px; font-size: 11px; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.flchk-land { margin-top: 7px; font-size: 11.5px; color: var(--text); }
.flchk-land b { font-weight: 400; }
.flchk-land b.fl-on-time, .flchk-land b.fl-early { color: var(--fl-ok); }
.flchk-land b.fl-delayed { color: var(--fl-late); }
.flchk-land b.fl-cancelled, .flchk-land b.fl-diverted { color: var(--fl-off); }
.flchk-warn {
  margin-top: 8px; padding-top: 7px; border-top: 1px solid var(--border);
  font-size: 10px; line-height: 1.4; color: var(--fl-late);
}
.flchk-hint { font-size: 11.5px; color: var(--muted); }

/* The window's own search row. */
.flw-find { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 14px 0 2px; }
.flw-find-num, .flw-find-date {
  font-family: inherit; font-size: 13px; color: var(--text);
  background: var(--card-bg); border: 1px solid var(--border); border-radius: 10px;
  padding: 8px 11px; min-width: 0;
}
.flw-find-num { flex: 1 1 150px; max-width: 200px; text-transform: uppercase; letter-spacing: 0.5px; }
.flw-find-date { flex: 0 1 168px; }
.flw-find-go, .flw-find-clear {
  font-family: inherit; font-size: 12px; cursor: pointer;
  border-radius: 999px; padding: 8px 16px; white-space: nowrap;
}
.flw-find-go { border: 0; background: var(--gold, #8F6D55); color: #fff; }
.flw-find-clear { border: 1px solid var(--border); background: none; color: var(--muted); }
.flw-find-note { font-size: 11.5px; color: var(--muted); padding: 6px 0 0; }

/* The flight's status on a calendar block. Small, one line, and only ever
   present on an arrangement that names a flight. */
.cal-ev-fl {
  display: block; margin-top: 4px; min-width: 0;
  font-family: ui-monospace, Menlo, monospace; font-size: 8.5px; letter-spacing: 1px;
  text-transform: uppercase; color: var(--ink2, var(--muted));
}
/* The status, and under it the route. Two lines that read as one reading. */
.cal-ev-fl > b {
  display: inline-flex; align-items: center; gap: 5px; font-weight: inherit;
  white-space: nowrap;
}
/* The number, ahead of its own reading. Set in the block's stronger ink so it
   reads as the subject of the line and the status reads as what it is doing. */
.cal-ev-fl > b > em {
  font-style: normal; font-weight: 600; letter-spacing: 0.9px;
  color: var(--ink, inherit); margin-right: 1px;
}
/* Sample readings say so on the block itself, not only in the window. */
.cal-ev-fl > b > s {
  text-decoration: none; font-size: 7.5px; letter-spacing: 1.1px;
  color: var(--ink2, var(--muted)); opacity: 0.9;
  border: 1px solid color-mix(in srgb, currentColor 45%, transparent);
  border-radius: 999px; padding: 1px 5px;
}
/* A leg that has moved, riding the status line: the time on the ticket struck
   through, an arrow, and the time the feed now gives. Nothing on it asks the
   desk to do anything — the cars belong to a partner watching the same flight
   — it is there so a day that has shifted reads as shifted. On a block too
   narrow for the route it goes the same way the route does. */
.cal-ev-fl > b > u {
  text-decoration: none; margin-left: 6px; letter-spacing: 0.6px;
  color: var(--ink, inherit);
}
.cal-ev-fl > b > u > s { text-decoration: line-through; opacity: 0.62; margin-right: 2px; }
/* The warning itself now lives beside the name as a dot and a caption — see
   .cal-tl-ev-status — rather than the pill this used to be. */
.cal-tl-ev-tight .cal-ev-fl > b { font-size: 0; gap: 0; }
.cal-tl-ev-tight .cal-ev-fl { margin-top: 3px; }
.cal-tl-ev-slim .cal-ev-fl > b > u { display: none; }

.flw-more { padding-top: 6px; margin-top: 14px; }
.flw-more .fl-rows { padding-top: 0; }
/* The rows carry their own rules in the Flow panel, where they are the whole
   content. Here they are a footnote under everything else. */
.flw .fl-row { border-bottom: 0; padding: 7px 2px; }
.flw .fl-note { border-top: 0; padding-top: 0; margin-top: 14px; }

/* A phone gets the same card in one column, and the route keeps its shape by
   dropping the middle to its own row rather than crushing the two ends. */
@media (max-width: 720px) {
  .flw-legs { grid-template-columns: 1fr; gap: 12px; }
  .flw-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .flw-route { grid-template-columns: 1fr 1fr; gap: 10px 14px; }
  .flw-mid { grid-column: 1 / -1; grid-row: 1; }
  .flw-iata { font-size: 40px; }
}

/* ═══════════════════════════════════════════════════════════════════
   DAY TIMELINE — the calendar's day view
   Hours run down the left, arrangements sit as blocks positioned by
   start time and sized by duration. Category colour stays the fastest
   way to read the day, so it drives the bar, the tint and the tag.
═══════════════════════════════════════════════════════════════════ */
/* A little air at the top so the first hour label is never flush against the
   edge of the scroller. */
.cal-tl { --tl-gutter: 52px; position: relative; flex: 0 0 auto; padding-top: 8px; }

/* Untimed arrangements ride above the ruler */
.cal-tl-allday {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 0 0 12px;
  margin-bottom: 10px;
}
.cal-tl-allday-lbl {
  flex: 0 0 var(--tl-gutter);
  font-size: 9px; letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--muted); opacity: 0.7; padding-top: 5px;
}
.cal-tl-allday-items { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.cal-tl-chip {
  display: inline-flex; align-items: center; gap: 7px;
  max-width: 100%; padding: 3px 2px;
  border: none; background: none; color: var(--charcoal);
  font: inherit; font-size: 11px; cursor: pointer;
  transition: color .15s ease;
}
.cal-tl-chip:hover { opacity: 0.75; }
.cal-tl-chip-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ev, #9aa0a6); flex-shrink: 0; }
.cal-tl-chip-txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-tl-chip-txt em { font-style: normal; color: var(--muted); }

/* The ruled grid */
.cal-tl-grid { position: relative; }
.cal-tl-rule { position: absolute; inset: 0; pointer-events: none; }
.cal-tl-hour { position: absolute; left: 0; right: 0; height: 0; display: flex; align-items: center; gap: 8px; }
.cal-tl-hour-lbl {
  flex: 0 0 var(--tl-gutter);
  font-size: 10px; letter-spacing: 0.6px;
  color: var(--muted); opacity: 0.6;
  transform: translateY(-0.5em);
  font-variant-numeric: tabular-nums;
}
/* No hour rules. The labels down the gutter mark the hours on their own,
   and without lines crossing the day the blocks can sit straight on the
   panel with nothing behind them. */
.cal-tl-hour-line { display: none; }

/* A stretch of the day with nothing booked in it, folded to a seam. Two short
   hairlines and the span it stands for — enough to say time was skipped here,
   quiet enough not to read as another rule across the day. */
.cal-tl-quiet {
  position: absolute; left: 0; right: 0;
  display: flex; align-items: center; gap: 12px;
  pointer-events: none; user-select: none;
}
.cal-tl-quiet::before,
.cal-tl-quiet::after {
  content: ''; flex: 1 1 auto; height: 1px;
  background: var(--border); opacity: 0.5;
}
.cal-tl-quiet span {
  flex: 0 0 auto;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 9px; letter-spacing: 1.3px; text-transform: uppercase;
  color: var(--muted); opacity: 0.72; white-space: nowrap;
}
/* The ruler's gutter is the left column; the seam starts clear of it. */
.cal-tl-quiet::before { margin-left: var(--tl-gutter, 52px); }

/* Now marker */
.cal-tl-now {
  position: absolute; left: var(--tl-gutter); right: 0; height: 0;
  border-top: 1px solid var(--gold); opacity: 0.5;
  z-index: 3; pointer-events: none;
}
.cal-tl-now-dot {
  position: absolute; left: -3px; top: -3px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--gold);
}

/* Event blocks */
.cal-tl-events { position: absolute; top: 0; bottom: 0; left: calc(var(--tl-gutter) + 8px); right: 0; }
.cal-tl-ev {
  position: absolute; overflow: hidden;
  display: flex; align-items: stretch;
  border: none;
  border-radius: 7px;
  /* The card is the swatch now, not a wash lifted off the page: each
     category is a deep, solid fill, dark enough that white text clears well
     past 4.5:1 in both themes without a second set of values for dark mode —
     the fill is pinned rather than mixed with the ground. A thin ring takes
     the place the wash's edge used to hold, for definition against a page
     that can be nearly as dark as the card itself. */
  background-color: var(--ev, #5b6167);
  background-image: none;
  box-shadow: inset 0 0 0 1px var(--ev-edge, rgba(255,255,255,0.14)),
              var(--ev-drop, 0 0 0 0 transparent);
  box-sizing: border-box;
  transition: background-color .15s ease, background-image .15s ease;
}
.cal-tl-ev { --ev-edge: rgba(255,255,255,0.14);
             --ev-drop: 0 1px 2px rgba(44,34,22,0.05), 0 8px 18px -12px rgba(44,34,22,0.20); }
html.dark-mode .cal-tl-ev { --ev-edge: rgba(255,255,255,0.18);
                            --ev-drop: 0 1px 2px rgba(0,0,0,0.5); }
/* The spine used to carry the category's own hue; the fill does that now, so
   it is a plain highlight instead — still the one mark that shows a block
   compressed to a fraction of its real duration (--ev-bar), just no longer
   duplicating the colour the whole card already is. */
.cal-tl-ev::before {
  content: ''; position: absolute; left: 0; top: 0;
  height: var(--ev-bar, 100%);
  width: 3px; border-radius: 6px 0 0 6px; background: rgba(255,255,255,0.32);
}
.cal-tl-ev + .cal-tl-ev { margin: 0; }
/* Hover lightens the fill rather than introducing a wash. */
.cal-tl-ev:hover {
  background-image: linear-gradient(rgba(255,255,255,0.08), rgba(255,255,255,0.08));
  z-index: 4;
}
/* The stub: a darker cut of the same fill, carrying the time and a small
   monoline mark for the kind — car, cutlery, leaf — so the category still
   reads once colour alone stops being enough to tell two blocks apart.
   Always a solid shade of the block's own colour, so it needs no separate
   light/dark tuning any more than the fill it comes from does. */
.cal-tl-ev-stub {
  flex: 0 0 50px; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 5px; padding: 6px 2px;
  border-right: 1px solid rgba(255,255,255,0.16);
}
.cal-tl-ev-stub-icon { opacity: 0.92; flex-shrink: 0; }
.cal-tl-ev-stub-time {
  font-size: 10px; font-weight: 500; color: #fff;
  font-variant-numeric: tabular-nums; letter-spacing: 0.2px;
}
.cal-tl-ev-in { min-width: 0; flex: 1; padding: 5px 11px 5px 12px; }
/* Nothing is drawn at rest, so the headline uses the block's full width.
   The actions only appear on hover or tap, and bring their own small
   backdrop with them rather than reserving a lane the rest of the time. */
.cal-tl-ev-head { display: flex; align-items: baseline; gap: 7px; min-width: 0; }
/* The stub carries the time now; this is only a fallback for the blocks too
   short or too narrow to hold the stub (below), where the head goes back to
   reading the way it always did. */
.cal-tl-ev-time { display: none; }
.cal-tl-ev-tight .cal-tl-ev-stub, .cal-tl-ev-slim .cal-tl-ev-stub { display: none; }
.cal-tl-ev-tight .cal-tl-ev-time { display: inline; font-size: 11px; color: var(--ink2); flex-shrink: 0; font-variant-numeric: tabular-nums; letter-spacing: 0.2px; }
/* The whole entry is written in the colour it belongs to, not just its bar.
   The raw category colours are too light to read at 12px on a pale ground,
   so the text takes a version mixed toward the ink — the hue still names the
   category, the contrast still lets you read the guest. */
/* Rank by size and weight, not by fading. Every one of these lines used to
   reach its place in the order by opacity, and opacity is the one way of
   ranking text that also takes away the contrast it is read by: the time and
   the arrangement measured 2.5:1 on the pale ground. The second ink does the
   ranking now and still clears 4.7:1. */
.cal-tl-ev-time {
  font-size: 11px; color: var(--ink2);
  flex-shrink: 0; font-variant-numeric: tabular-nums; letter-spacing: 0.2px;
}
.cal-tl-ev-name {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 15px; font-weight: 500; letter-spacing: 0;
  color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* The status that used to sit in a solid pill: a small dot in the flight's
   own tone plus a quiet caption, so a late or cancelled leg still reads at a
   glance without a sticker fighting the name for the same line. */
.cal-tl-ev-status {
  display: inline-flex; align-items: center; gap: 4px;
  margin-left: auto; flex-shrink: 0;
}
.cal-tl-ev-status > i { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.cal-tl-ev-status > b {
  font-weight: 700; font-size: 7.5px; letter-spacing: 0.5px;
  text-transform: uppercase; color: #fff; white-space: nowrap;
}
.cal-tl-ev-status-late  > i { background: var(--fl-badge-late); }
.cal-tl-ev-status-early > i { background: var(--fl-badge-early); }
.cal-tl-ev-status-off   > i { background: var(--fl-badge-off); }
.cal-tl-ev-sub {
  font-size: 12.5px; color: var(--ink2);
  margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* The facts, and the dots between them. Separating the two is what stops a
   five-part arrangement reading as one long sentence. */
.cal-tl-ev-sub > i { font-style: normal; opacity: 0.42; margin: 0 5px; }
/* The category was being said four times over — the colour bar, the colour
   of the words, the key beside the date, and this. It kept a whole line of
   every block for the least useful of the four, so the line goes to the
   guest and the arrangement instead. It stays in the markup for screen
   readers, which get nothing from a colour. */
.cal-tl-ev-tag {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* A short block only has room for the headline */
/* A block sliced to a third of a phone. The head stops being a row: the time
   takes its own line above the name, so the name gets the whole width instead
   of whatever the time leaves it. */
.cal-tl-ev-slim .cal-tl-ev-head { display: block; }
.cal-tl-ev-slim .cal-tl-ev-time { display: block; font-size: 9.5px; line-height: 1.15; opacity: 0.7; }
.cal-tl-ev-slim .cal-tl-ev-name { font-size: 12.5px; line-height: 1.2; }
.cal-tl-ev-slim .cal-tl-ev-sub { display: none; }

.cal-tl-ev-tight .cal-tl-ev-in { padding-top: 3px; padding-bottom: 3px; }
.cal-tl-ev-tight .cal-tl-ev-sub,
.cal-tl-ev-tight .cal-tl-ev-tag { display: none; }

.cal-tl-ev-actions {
  position: absolute; top: 2px; right: 3px;
  display: flex; gap: 2px;
  padding: 1px 2px; border-radius: 5px;
  background: var(--white);
  opacity: 0; transition: opacity .15s ease;
}
.cal-tl-ev:hover .cal-tl-ev-actions,
.cal-tl-ev-open .cal-tl-ev-actions,
.cal-tl-ev:focus-within .cal-tl-ev-actions { opacity: 1; }
.cal-tl-ev-open {
  z-index: 5;
  background-image: linear-gradient(rgba(255,255,255,0.08), rgba(255,255,255,0.08));
}
.cal-tl-btn {
  background: none; border: none;
  color: var(--muted);
  padding: 3px 4px; line-height: 0; cursor: pointer;
  transition: color .15s ease;
}
.cal-tl-btn:hover { color: var(--charcoal); }
.cal-tl-btn.cal-del-confirm { color: #b3382c; }

/* ── Category text weights ─────────────────────────────────────────
   The one place the readable version of each category colour is written
   down, for everything that renders a category as words rather than as a
   block of colour: the calendar's key, the Today board's counts. Each is
   its own hue deepened only as far as 4.6:1 needs; on the dark ground
   most are already light enough and stay as they are. */
.cat-ink-transfer   { color: #3b74b3; }
.cat-ink-dining     { color: #b45536; }
.cat-ink-massage    { color: #5c795c; }
.cat-ink-activity   { color: #916b2c; }
.cat-ink-experience { color: #8361b1; }
.cat-ink-itinerary  { color: #8862a2; }
.cat-ink-note       { color: #6b7279; }
html.dark-mode .cat-ink-transfer   { color: #5b8fc9; }
html.dark-mode .cat-ink-dining     { color: #c76342; }
html.dark-mode .cat-ink-massage    { color: #7a9a7a; }
html.dark-mode .cat-ink-activity   { color: #c99a4e; }
html.dark-mode .cat-ink-experience { color: #9172ba; }
html.dark-mode .cat-ink-itinerary  { color: #9a7ab0; }
html.dark-mode .cat-ink-note       { color: #9aa0a6; }

/* The text weight of each category is supplied per block, so dark mode is a
   straight swap rather than a recalculation. */
/* The block's ink is written onto the element as an inline custom property by
   the renderer, and an inline custom property beats any stylesheet rule — so
   redefining --ev-ink under html.dark-mode never took, and every timeline
   block was drawn in the light-mode ink on the dark ground. (The line below
   for .cal-tl-ev-who worked around the same thing by setting `color` on the
   element instead of redefining the variable.) The fix is one level of
   indirection: the renderer keeps writing the two inline, and what the text
   actually reads is --ink, which is only ever set here, where the theme can
   reach it. */
.cal-tl-ev, .cal-tl-chip, .today-evt, .cal-agenda-event {
  --ink:  var(--ev-ink, var(--charcoal));
  --ink2: var(--ev-ink-2, var(--muted));
}
html.dark-mode .cal-tl-ev, html.dark-mode .cal-tl-chip,
html.dark-mode .today-evt, html.dark-mode .cal-agenda-event {
  --ink:  var(--ev-ink-dk, var(--muted));
  --ink2: var(--ev-ink-2-dk, var(--muted));
}
html.dark-mode .cal-tl-ev-actions { background: var(--panel-bg); }

/* Touch: the ruler tightens and the actions stay put */
@media (max-width: 768px) {
  .cal-tl { --tl-gutter: 42px; }
  .cal-tl-ev-in { padding: 5px 6px 5px 8px; }
  .cal-tl-ev-stub { flex-basis: 42px; }
  .cal-tl-ev-name { font-size: 14.5px; }
  .cal-tl-ev-slim .cal-tl-ev-name { font-size: 12.5px; }
  /* No hover on touch — the actions appear on the block you tap. */
  .cal-tl-btn { padding: 6px; }
}


/* ── Touch targets ───────────────────────────────────────────────────────
   HIG asks for 44pt. Measured on a 390px screen, fifteen controls came in
   under it: most at 40px tall with width to spare, and three icon buttons
   genuinely small at 22-30px wide — a close button you have to aim at.

   Scoped to a coarse pointer rather than to a width breakpoint, because
   44pt is about fingers and not about screen size: a touch laptop and an
   iPad get it, a mouse-driven desktop is left exactly as it was.

   The audit also flagged four checkboxes at 22x42. They are not here, and
   deliberately: each sits inside a label.opt-chip that is already well past
   44pt, and the label is what you actually tap. Padding the input would grow
   nothing and move the chip's text off centre. */
@media (pointer: coarse) {
  .cd-guest-search,
  .rem-rail-x,
  .sp-close {
    min-width: 44px;
    min-height: 44px;
  }
  /* The shortest segment ("All") lands at 43px; the other three are already
     wider, so this costs the row one pixel in total. */
  .rem-seg { min-width: 44px; }
  .rem-seg,
  .sp-user-chip,
  .sp-rem-all,
  .sp-btn,
  #rem-alerts-btn,
  .rem-rail-ft button {
    min-height: 44px;
  }
}


/* ══ Follow-up editor ═══════════════════════════════════════════════
   A sheet, not a rail: it is reachable from the rail, the side panel and
   the calendar, none of which share a container. Built from the desk's own
   card tokens so it needs no palette of its own, and it becomes a bottom
   sheet on a phone like every other modal here. ══ */
.rem-ed-scrim {
  position: fixed; inset: 0; z-index: 10600;
  background: rgba(0,0,0,0.38);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  padding: 4vh 20px;
}
.rem-ed-scrim[hidden] { display: none !important; }
.rem-ed {
  width: 100%; max-width: 560px; max-height: 92vh;
  display: flex; flex-direction: column;
  background: var(--panel-bg);
  border-radius: 18px;
  box-shadow: 0 24px 64px -12px rgba(30,25,20,0.34), 0 0 0 0.5px rgba(30,25,20,0.12);
  overflow: hidden;
  animation: remEdRise .26s cubic-bezier(0.22,1,0.36,1) backwards;
}
@keyframes remEdRise { from { transform: translateY(14px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .rem-ed { animation: none; } }
.rem-ed-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 18px 20px 12px; flex-shrink: 0;
}
.rem-ed-title { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 21px; color: var(--charcoal); }
.rem-ed-x {
  background: none; border: none; font-size: 16px; line-height: 1; cursor: pointer;
  color: var(--muted); padding: 6px 8px; border-radius: 8px;
}
.rem-ed-x:hover { color: var(--charcoal); background: var(--chip-fill, rgba(60,50,40,0.055)); }
.rem-ed-body { padding: 0 20px 4px; overflow-y: auto; flex: 1 1 auto; }
.rem-ed-field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 16px; }
.rem-ed-field label {
  font-size: 9px; letter-spacing: 1.6px; text-transform: uppercase;
  color: var(--muted); font-weight: 500;
}
.rem-ed-field textarea,
.rem-ed-field input {
  font-family: 'DM Sans', sans-serif; font-size: 14px;
  background: var(--chip-fill, rgba(60,50,40,0.055));
  border: 1px solid transparent; border-radius: 10px;
  padding: 10px 12px; color: var(--charcoal); outline: none;
  transition: box-shadow .15s ease;
  width: 100%; box-sizing: border-box;
}
.rem-ed-field textarea:focus,
.rem-ed-field input:focus { box-shadow: 0 0 0 3px var(--chip-fill-on, rgba(184,147,79,0.16)); }
.rem-ed-field textarea { resize: none; line-height: 1.45; min-height: 44px; overflow-y: auto; }
.rem-ed-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.rem-ed-anchor {
  font-size: 11.5px; color: var(--gold); background: var(--chip-fill-on, rgba(184,147,79,0.16));
  border-radius: 9px; padding: 8px 11px; margin: -4px 0 16px; line-height: 1.45;
}
.rem-ed-sec { margin-bottom: 18px; }
.rem-ed-sec-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  font-size: 9px; letter-spacing: 1.6px; text-transform: uppercase;
  color: var(--muted); font-weight: 500; margin-bottom: 8px;
}
/* display:flex on the rule above outranks the UA's [hidden] {display:none}, so
   the Lines header stayed on screen with nothing under it. */
.rem-ed-sec-head[hidden] { display: none; }
.rem-ed-prog { letter-spacing: 0.6px; text-transform: none; font-size: 11px; color: var(--gold); }
.rem-ed-item { display: flex; align-items: center; gap: 9px; margin-bottom: 7px; }
.rem-ed-item input {
  flex: 1 1 auto; min-width: 0;
  font-family: 'DM Sans', sans-serif; font-size: 13.5px;
  background: var(--chip-fill, rgba(60,50,40,0.055));
  border: 1px solid transparent; border-radius: 9px; padding: 8px 11px;
  color: var(--charcoal); outline: none; transition: box-shadow .15s ease;
}
.rem-ed-item input:focus { box-shadow: 0 0 0 3px var(--chip-fill-on, rgba(184,147,79,0.16)); }
.rem-ed-tick {
  flex: 0 0 auto; width: 22px; height: 22px; border-radius: 7px; cursor: pointer;
  border: 1px solid var(--border); background: transparent; color: transparent;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.rem-ed-tick svg { width: 12px; height: 12px; }
.rem-ed-tick.on { background: var(--gold); border-color: var(--gold); color: #fff; }
.rem-ed-item:has(.rem-ed-tick.on) input { color: var(--muted); text-decoration: line-through; }
.rem-ed-itemx {
  flex: 0 0 auto; background: none; border: none; cursor: pointer;
  color: var(--muted); font-size: 13px; padding: 4px 6px; border-radius: 7px;
}
.rem-ed-itemx:hover { color: #b04a4a; background: rgba(176,74,74,0.09); }
.rem-ed-additem {
  display: flex; align-items: center; gap: 10px; width: 100%;
  font-family: 'DM Sans', sans-serif; font-size: 12.5px; font-weight: 500;
  color: var(--gold); text-align: left; background: none; border: none;
  padding: 8px 0 2px; cursor: pointer;
}
.rem-ed-additem .ins-plus {
  width: 20px; height: 20px; border-radius: 50%; flex: 0 0 auto;
  background: var(--chip-fill-on, rgba(184,147,79,0.15));
  display: inline-flex; align-items: center; justify-content: center; font-size: 15px;
}
.rem-ed-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.rem-ed-chip {
  font-family: 'DM Sans', sans-serif; font-size: 11.5px;
  border: 1px solid transparent; border-radius: 999px;
  background: var(--chip-fill, rgba(60,50,40,0.055));
  color: var(--text); padding: 7px 13px; cursor: pointer;
  transition: background .15s ease, color .15s ease, transform .1s ease;
}
.rem-ed-chip:active { transform: scale(0.96); }
.rem-ed-chip.on { background: var(--chip-fill-on, rgba(184,147,79,0.16)); color: var(--chip-ink-on, #74553F); }
.rem-ed-foot {
  display: flex; align-items: center; gap: 10px; flex-shrink: 0;
  padding: 14px 20px calc(18px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--row-sep, rgba(180,155,115,0.14));
}
.rem-ed-del {
  font-family: 'DM Sans', sans-serif; font-size: 9px; letter-spacing: 1.2px;
  text-transform: uppercase; color: #c07070; background: none; border: none;
  padding: 8px 10px; border-radius: 8px; cursor: pointer;
}
.rem-ed-del:hover { color: #b04a4a; background: rgba(176,74,74,0.09); }
.rem-ed-done {
  margin-left: auto;
  font-family: 'DM Sans', sans-serif; font-size: 9px; letter-spacing: 1.2px;
  text-transform: uppercase; color: var(--chip-ink-on, #74553F);
  background: var(--chip-fill-on, rgba(184,147,79,0.16));
  border: none; border-radius: 10px; padding: 11px 16px; cursor: pointer;
}
.rem-ed-save {
  font-family: 'DM Sans', sans-serif; font-size: 9px; font-weight: 500; letter-spacing: 1.8px;
  text-transform: uppercase; color: #fff; background: var(--gold);
  border: none; border-radius: 10px; padding: 11px 22px; cursor: pointer;
  transition: background .15s ease, transform .1s ease;
}
.rem-ed-save:hover { background: #7A5D49; }
.rem-ed-save:active { transform: scale(0.985); }
html.dark-mode .rem-ed { background: var(--panel-bg); }
html.dark-mode .rem-ed-title, html.dark-mode .rem-ed-field input,
html.dark-mode .rem-ed-item input { color: var(--text); }
@media (max-width: 600px) {
  .rem-ed-scrim { align-items: flex-end; padding: 0; }
  .rem-ed { max-width: none; border-radius: 20px 20px 0 0; max-height: 92dvh; }
  .rem-ed-body { padding-left: 16px; padding-right: 16px; }
  .rem-ed-head { padding: 14px 16px 10px; }
  .rem-ed-foot { padding-left: 16px; padding-right: 16px; gap: 6px; }
  .rem-ed-field { margin-bottom: 12px; }
  .rem-ed-sec { margin-bottom: 14px; }
  /* Native date and time inputs centre their own text on iOS while a plain
     input is left-aligned, which read as three different alignments down one
     sheet. */
  .rem-ed-field input[type="date"],
  .rem-ed-field input[type="time"] { text-align: left; }
  .rem-ed-del, .rem-ed-book { padding-left: 6px; padding-right: 6px; letter-spacing: 0.8px; }
  .rem-ed-done { padding: 11px 12px; }
  .rem-ed-save { padding: 11px 16px; }
}

/* ── Follow-ups on the day timeline ─────────────────────────────────
   A note is not an arrangement. It keeps the timeline's shape but reads as
   a task: a dashed leading edge rather than a solid bar, so a glance down
   the day separates what is booked from what has to be chased. */
/* The leading edge stays solid. A dashed border here rendered as a broken
   run of ticks down the left of the block, which read as a rendering fault
   rather than as a distinction. The italic name and the Follow-up tag say
   what it is; the bar just needs to be quieter than an arrangement's. */
.cal-tl-ev.cal-tl-ev-followup { --ev-bar: 2px; }
.cal-tl-ev.cal-tl-ev-followup .cal-tl-ev-name { font-style: italic; }

.rem-ed-book { padding-left: 6px; padding-right: 6px; letter-spacing: 0.8px; }
  .rem-ed-done { padding: 11px 12px; }
  .rem-ed-save { padding: 11px 16px; }
}

/* ── Follow-ups on the day timeline ─────────────────────────────────
   A note is not an arrangement. It keeps the timeline's shape but reads as
   a task: a dashed leading edge rather than a solid bar, so a glance down
   the day separates what is booked from what has to be chased. */
/* The leading edge stays solid. A dashed border here rendered as a broken
   run of ticks down the left of the block, which read as a rendering fault
   rather than as a distinction. The italic name and the Follow-up tag say
   what it is; the bar just needs to be quieter than an arrangement's. */
.cal-tl-ev.cal-tl-ev-followup { --ev-bar: 2px; }
.cal-tl-ev.cal-tl-ev-followup .cal-tl-ev-name { font-style: italic; }

/* ── Rail: assignee, grouped lines, and the combine bar ─────────── */
.rem-who {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 10px; letter-spacing: 0.4px; color: var(--rl-ink-soft, rgba(255,255,255,0.58));
  white-space: nowrap;
}
.rem-who i {
  font-style: normal; font-size: 8.5px; font-weight: 600; letter-spacing: 0.3px;
  width: 17px; height: 17px; border-radius: 50%; flex: 0 0 auto;
  background: var(--rl-accent-bg-hover); color: var(--rl-accent-ink);
  display: inline-flex; align-items: center; justify-content: center;
}
.rem-who.none { opacity: 0.55; font-style: italic; }
.rem-items-toggle {
  display: inline-flex; align-items: center; gap: 8px; margin: 5px 0 2px;
  background: none; border: none; cursor: pointer; padding: 0;
  font-family: 'DM Sans', sans-serif; font-size: 10.5px; letter-spacing: 0.3px;
  color: var(--rl-accent-ink);
}
.rem-items-bar {
  width: 46px; height: 3px; border-radius: 2px; flex: 0 0 auto;
  background: var(--rl-accent-bg-hover); overflow: hidden; display: inline-block;
}
.rem-items-bar i { display: block; height: 100%; background: var(--rl-accent-fill); }
.rem-items { margin: 4px 0 2px; display: flex; flex-direction: column; gap: 3px; }
.rem-item {
  display: flex; align-items: flex-start; gap: 8px; cursor: pointer;
  font-size: 11.5px; line-height: 1.45; color: var(--rl-ink-soft, rgba(255,255,255,0.58));
}
.rem-item input { margin: 2px 0 0; accent-color: var(--rl-accent-fill); cursor: pointer; flex: 0 0 auto; }
.rem-item.on span { text-decoration: line-through; opacity: 0.6; }
.rem-act.pick svg { opacity: 0.5; }
.rem-row.picked { background: var(--rl-accent-bg); }
.rem-row.picked .rem-act.pick svg { opacity: 1; color: var(--rl-accent-ink); }
.rem-pickbar {
  display: flex; align-items: center; gap: 10px; flex-shrink: 0;
  padding: 10px 22px; background: var(--rl-accent-bg);
  font-size: 11px; color: var(--rl-ink, rgba(255,255,255,0.92));
}
.rem-pickbar[hidden] { display: none !important; }
.rem-pickbar span { flex: 1 1 auto; }
.rem-pickbar button {
  font-family: 'DM Sans', sans-serif; font-size: 9px; letter-spacing: 1.1px;
  text-transform: uppercase; border: none; border-radius: 999px; cursor: pointer;
  padding: 7px 13px; background: rgba(255,255,255,0.10);
  color: var(--rl-ink, rgba(255,255,255,0.92));
}
#rem-pick-combine { background: var(--rl-accent-fill); color: var(--rl-accent-on); font-weight: 600; }
#rem-pick-combine:disabled { opacity: 0.4; cursor: default; }
@media (max-width: 600px) { .rem-pickbar { padding-left: 16px; padding-right: 16px; } }

/* ── Who a follow-up is for, on the calendar block ────────────────────
   Sits with the subtitle rather than beside the name: the name is what the
   task is, the person is who owns it, and at a glance down a day the owner
   is scanned, not read. Hidden on a block too short or too narrow to carry
   it, like the subtitle it sits with. */
.cal-tl-ev-who, .cal-ev-who {
  display: inline-flex; align-items: center;
  white-space: nowrap; flex: 0 0 auto;
  margin-left: auto; padding-left: 8px;
  color: var(--ink2, var(--muted));
}
/* A wash of the card's own hue used to sit the initial apart from the fill
   behind it; on a solid card that wash is the same hue as what it sits on
   and all but disappears. A dark scrim reads on any of the new fills. */
.cal-tl-ev-who i, .cal-ev-who i {
  font-style: normal; font-weight: 600; font-size: 8.5px; letter-spacing: 0.3px;
  width: 16px; height: 16px; border-radius: 50%; flex: 0 0 auto;
  background: rgba(0,0,0,0.28);
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
}
.cal-tl-ev-slim .cal-tl-ev-who { display: none; }
.cal-ev-who { margin-top: 0; margin-left: 8px; }

.rem-sel-mode {
  margin-left: auto; font-family: 'DM Sans', sans-serif;
  font-size: 9px; letter-spacing: 1.1px; text-transform: uppercase;
  border: none; border-radius: 999px; cursor: pointer; padding: 6px 12px;
  background: transparent; color: var(--rl-ink-soft, rgba(255,255,255,0.58));
  transition: background .15s ease, color .15s ease;
}
.rem-sel-mode:hover { color: var(--rl-ink, rgba(255,255,255,0.92)); background: rgba(255,255,255,0.07); }
.rem-sel-mode.on { background: var(--rl-accent-bg); color: var(--rl-accent-ink); }
.rem-pick-cb { width: 16px; height: 16px; accent-color: var(--rl-accent-fill); cursor: pointer; margin: 2px 4px 0 0; }
.rem-ed-book {
  font-family: 'DM Sans', sans-serif; font-size: 9px; letter-spacing: 1.2px;
  text-transform: uppercase; color: var(--muted); background: none; border: none;
  padding: 8px 10px; border-radius: 8px; cursor: pointer;
}
.rem-ed-book:hover { color: var(--gold); background: var(--chip-fill, rgba(60,50,40,0.055)); }

/* ══ Guest identity: two tiers ══════════════════════════════════════
   The row used to be one flex line carrying six things — name, reference,
   phone, a search, a returning-guest note and a reminder — all of them free
   to shrink. Measured at a 726px column: with a long note the name lost 30px,
   the phone 46px, and the Protel reference 23px, which on tabular numerals is
   about two digits. A truncated reference is worse than a missing one,
   because it still looks like a number you can copy.

   These six are not peers. Identity is transcribed into another system and
   cannot yield; the note is glanceable and can. So the name takes a line
   nothing else is on, reference and phone sit beneath it as metadata, and the
   note drops below the rule to truncate alone. iOS's contact header, and the
   shape .cd-stay-line already had under these fields. ══ */
.cd-guest-fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  grid-template-rows: auto auto auto;
  align-items: center;
  column-gap: 10px;
  row-gap: 0;
  border-bottom: none;
  padding-bottom: 0;
  flex-wrap: nowrap;
}
.cd-gf-id { grid-column: 1; grid-row: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.cd-guest-search { grid-column: 2; grid-row: 1; margin-left: 0; align-self: center; }
.cd-guest-fields .rem-cue { grid-column: 3; grid-row: 1; align-self: center; }
/* The rule, as a grid item, so the note can sit under it without leaving the
   container that draws it. */
.cd-guest-fields::after {
  content: ''; grid-column: 1 / -1; grid-row: 2;
  height: 1px; background: var(--border); margin-top: 10px;
  transition: background .15s ease;
}
.cd-guest-fields:focus-within::after { background: var(--gold-mid); }
.cd-gf-name {
  font-size: 19px; width: 100%; flex: 0 0 auto;
  overflow: hidden; text-overflow: ellipsis;
}
.cd-gf-meta { display: flex; align-items: baseline; min-width: 0; }
.cd-gf-meta .cd-gf::placeholder { opacity: 0.52; }
.cd-gf-protel, .cd-gf-phone { font-size: 13px; flex: 0 1 auto; padding: 7px 9px; border-radius: 7px; }
.cd-gf-meta .cd-gf-protel { margin-left: -9px; }
.cd-gf-meta .cd-gf-sep { padding: 0 8px; font-size: 10px; }
/* Only on the way in — a resting fill would put two boxes back on the line. */
.cd-gf-meta .cd-gf:hover { background: var(--chip-fill, rgba(60,50,40,0.055)); }
.cd-gf-meta .cd-gf:focus { background: var(--chip-fill, rgba(60,50,40,0.055)); }
/* The note, on its own line, with only itself to give way to. */
.cd-guest-memory {
  grid-column: 1 / -1; grid-row: 3;
  margin-left: 0; padding-left: 0; border-left: none;
  margin-top: 9px; font-style: normal;
  font-size: 11.5px; color: var(--gold-mid, #8F6D55); opacity: 0.92;
}
.cd-guest-fields.has-memory .cd-guest-memory { padding-left: 0; border-left: none; }
.cd-guest-fields .rem-set-list { grid-column: 1 / -1; grid-row: 4; margin-top: 7px; }
html.dark-mode .cd-guest-memory { color: #C9A96E; }

/* B's badge, folded in. On a narrow column even two tiers is tight, so the
   note becomes its count and opens on click — Mail's thread-count pill. */
@container guestcard (max-width: 430px) {
  /* Keyed on having something to say rather than on the has-memory class,
     which is set and cleared by the desk as the guest changes. */
  .cd-guest-memory:not(:empty) {
    display: inline-flex; align-items: center; gap: 6px;
    grid-column: 1 / -1;
    justify-self: start;
    max-width: 100%;
    background: var(--chip-fill-on, rgba(184,147,79,0.16));
    border-radius: 999px; padding: 5px 11px; font-size: 11px;
    overflow: hidden; text-overflow: ellipsis;
  }
  .cd-gf-name { font-size: 17px; }
  .cd-gf-protel, .cd-gf-phone { font-size: 12.5px; }
}
@media (max-width: 640px) {
  .cd-guest-fields { column-gap: 8px; }
  .cd-gf-name { font-size: 17px; }
}

/* ══ Reduce effects ════════════════════════════════════════════════════════
   One switch for a machine that cannot afford the atmosphere.

   The desk's decoration is not free. Measured on a signed-in desk at
   1600x950: dark mode produced frames three times slower than light because
   the background drift repainted the whole viewport every frame, and the
   login screen carried 64 composited layers and 66 MB of GPU texture — five
   viewport-tall bands under a blur a quarter of their own width, each one
   composited through a blend mode. On an Intel laptop with shared memory that
   is the difference between a desk that types smoothly and one that does not.

   What comes off: every backdrop blur, every layer hint, and every infinite
   loop that exists to be atmosphere.

   What deliberately stays: spinners, skeletons and progress shimmers. Those
   report that something is still happening, and a frozen one is a lie. So are
   transitions on things you just clicked — those are feedback, they are short,
   and they cost nothing while nobody is clicking.

   The opaque surface tokens are the ones the contrast tier above already
   proved: two surfaces lean on their blur for legibility rather than
   decoration, and go solid rather than see-through when it comes off.        */
html.reduce-fx.dark-mode {
  --lg-bg: linear-gradient(135deg, rgba(22,20,17,0.985) 0%, rgba(15,15,11,0.99) 100%);
}
html.reduce-fx:not(.dark-mode) {
  --lg-bg: linear-gradient(160deg, rgba(38,33,26,0.985) 0%, rgba(24,21,16,0.99) 100%);
}
html.reduce-fx .cat-bar-mode-row { background: var(--tab-bar-bg, #0F0E0C) !important; }
html.reduce-fx *,
html.reduce-fx *::before,
html.reduce-fx *::after {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  will-change: auto !important;
}
/* The ambient loops, by name. A blanket rule cannot tell atmosphere from a
   spinner — CSS has no way to ask an animation whether it repeats forever —
   so this list is explicit and the loaders are simply not on it. */
html.reduce-fx .app-header::before,
html.reduce-fx #desk-dash::before,
html.reduce-fx #desk-mode::before,
html.reduce-fx #mh-home.mh-open::before,
html.reduce-fx #desk-dash.dd-editing .dd-card {
  animation: none !important;
}
/* Out of the compositor entirely rather than merely still: a fixed
   full-viewport blend layer costs its texture whether or not it moves. */
html.reduce-fx #login-motes{
  display: none !important;
}

/* ══ The drawer, in charcoal ═══════════════════════════════════════════════
   The panel was built in the house gold: a gold signet for the avatar, gold
   wells under every icon, gold text on the selected chip, a gold slider. Gold
   on dark glass is a low-contrast pairing by construction — it is a mid-tone
   on a dark ground — and at a concierge desk with afternoon sun on the screen
   that is the first thing to disappear.

   So the drawer drops the accent rather than restyling it. Charcoal ground,
   no borders anywhere, icons and type in near-white. What used to be said
   with a hue is said with a fill: a selected chip is simply brighter than an
   unselected one, which survives glare in a way a colour does not.

   Everything here is scoped to #side-panel and additive — the id also buys
   the specificity to reach the follow-up strip, which is styled inline in
   concierge.html and therefore lands after this file. Deleting the block
   restores the gold drawer exactly.                                        */
#side-panel {
  /* Off-white, not white. Pure #FFF on charcoal is a 17:1 pairing, which is
     more contrast than reading needs and reads as glare in its own right —
     the type stops being ink and starts being light. These sit at 11:1 and
     6:1, comfortably past AA, with a blue-grey cast so the greys read as a
     considered neutral rather than as switched-off colour.

     No hue at all. A steel blue was tried here and read as a foreign object
     against a desk built in cream and brown — the accent has to leave, not
     change temperature. So state is carried by weight and fill instead: a
     selected chip is a brighter patch with heavier type, which is the one
     distinction that holds up in direct sun, and the only colours left in the
     drawer are the ones that mean something (overdue, and log out). */
  --spx-ink:      #E4E2DE;
  --spx-ink-2:    #A5A29D;
  --spx-ink-3:    #8C8983;
  /* "Accent" is now simply brighter than the ink, not another colour. */
  --spx-accent:   #E4E2DE;
  --spx-accent-2: #F3F0EA;
  --spx-fill:     rgba(255,255,255,0.075);
  --spx-fill-h:   rgba(255,255,255,0.13);
  --spx-fill-on:  rgba(255,255,255,0.20);
  --spx-sheen:    inset 0 1px 0 rgba(255,255,255,0.05);

  background: linear-gradient(180deg, #26262A 0%, #1B1B1E 100%);
  border-left: 1px solid rgba(255,255,255,0.08);
  color: var(--spx-ink);
}

/* Tiles and wells: fills, not outlines. */
#side-panel .sp-tile,
#side-panel .sp-util-tile {
  background: var(--spx-fill);
  border: none;
  box-shadow: var(--spx-sheen);
  color: var(--spx-ink);
}
#side-panel .sp-tile:hover,
#side-panel .sp-util-tile:hover {
  background: var(--spx-fill-h);
  border: none;
  box-shadow: var(--spx-sheen);
}
#side-panel .sp-tile:active,
#side-panel .sp-util-tile:active { background: var(--spx-fill-on); }

/* Borderless icons. The per-tile tint went with the wells — nine differently
   coloured glyphs on one charcoal ground is exactly the thing that stops
   reading at a glance in daylight. */
#side-panel .sp-tile-ic,
#side-panel .sp-util-tile .sp-util-ic {
  background: none;
  border: none;
  color: var(--spx-ink);
}
#side-panel .sp-tile:hover .sp-tile-ic,
#side-panel .sp-util-tile:hover .sp-util-ic {
  background: none;
  border: none;
  color: var(--spx-accent-2);
}
#side-panel .sp-tile-lbl,
#side-panel .sp-util-lbl { color: var(--spx-ink); }

/* The signet loses its gold rings and becomes a plain charcoal disc. */
#side-panel .sp-avatar {
  color: var(--spx-accent-2);
  background: linear-gradient(160deg, rgba(255,255,255,0.11), rgba(255,255,255,0.03));
  border: none;
  box-shadow: var(--spx-sheen);
}
#side-panel .sp-avatar::after { display: none; }
#side-panel .sp-profile-name { color: var(--spx-ink); }
#side-panel .sp-profile-role { color: var(--spx-ink-2); }
#side-panel .sp-close { color: var(--spx-ink-2); }
#side-panel .sp-close:hover { color: var(--spx-accent-2); }
#side-panel .sp-label { color: var(--spx-ink-2); }

/* At a glance. */
#side-panel .sp-glance-seg { background: var(--spx-fill); border: none; }
#side-panel .sp-glance-seg:active { background: var(--spx-fill-on); }
#side-panel .sp-glance-num { color: var(--spx-accent-2); }
#side-panel .sp-glance-val { color: var(--spx-ink); }
#side-panel .sp-glance-cap { color: var(--spx-ink-3); }

/* Chips: selection is a brighter fill, not a colour. */
#side-panel .sp-user-chip {
  background: var(--spx-fill);
  border: none;
  color: var(--spx-ink-2);
}
#side-panel .sp-user-chip:hover { border: none; background: var(--spx-fill-h); color: var(--spx-ink); }
#side-panel .sp-user-chip.is-on {
  background: var(--spx-fill-on);
  border: none;
  color: var(--spx-accent-2);
  font-weight: 500;
}

/* Follow-up strip — including the row rule, which is a line in a drawer that
   no longer has any. */
#side-panel .sp-rem-row { border-bottom: none; }
#side-panel .sp-rem-row:hover { background: var(--spx-fill); }
#side-panel .sp-rem-task { color: var(--spx-ink); }
#side-panel .sp-rem-when { color: var(--spx-ink-2); }
#side-panel .sp-rem-when small { color: var(--spx-ink-3); }
#side-panel .sp-rem-guest { color: var(--spx-ink-3); }
#side-panel .sp-rem-count { color: var(--spx-ink-3); }
#side-panel .sp-rem-empty { color: var(--spx-ink-3); }
#side-panel .sp-rem-tick { border: none; background: var(--spx-fill); color: var(--spx-ink-2); }
#side-panel .sp-rem-tick:hover { border: none; background: var(--spx-fill-h); color: var(--spx-accent-2); }
#side-panel .sp-rem-all {
  border: none;
  background: var(--spx-fill);
  color: var(--spx-ink);
  box-shadow: var(--spx-sheen);
}
#side-panel .sp-rem-all:hover { background: var(--spx-fill-h); }

/* Brightness: a white track on charcoal reads at any angle. */
#side-panel input[type=range].sp-range {
  background: linear-gradient(to right, var(--spx-accent) var(--fill,0%), var(--spx-fill-h) var(--fill,0%));
  background-clip: content-box;
}
#side-panel input[type=range].sp-range::-webkit-slider-thumb { background: var(--spx-accent-2); }
#side-panel input[type=range].sp-range::-moz-range-thumb { background: var(--spx-accent-2); }
#side-panel .sp-brightness-label { color: var(--spx-ink); }
#side-panel .sp-brightness-val { color: var(--spx-ink-3); }

/* Log out keeps a warm ink so the destructive action still reads as one; it
   is the single exception to the monochrome, and it is a legibility choice
   rather than a decorative one. */
#side-panel .sp-btn-danger {
  border: none;
  background: var(--spx-fill);
  color: #FFC2C2;
}
#side-panel .sp-btn-danger:hover { border: none; background: rgba(214,124,124,0.20); color: #FFD9D9; }

/* The last thing still pointing at the accent. */
#side-panel .sp-select:hover,
#side-panel .sp-select:focus { border-color: rgba(255,255,255,0.28) !important; }

/* The liquid-glass sheen is a warm wash and the top highlight is a hairline —
   the two remaining pieces of the gold drawer, both painted by pseudo-elements
   rather than by any rule above. The sheen goes neutral and the highlight goes
   entirely; it is a line, and this drawer no longer has any. */
#side-panel::before {
  background: linear-gradient(180deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0) 46%);
}
#side-panel::after { display: none; }

/* ── The same drawer, in daylight ────────────────────────────────────────
   The charcoal above is the dark theme's drawer. In the light theme it was
   still charcoal — a black panel sliding out of a cream desk — which is the
   thing the cooler palette was meant to fix, not reproduce.

   This is the same design inverted, not a different one: same borderless
   fills, same single steel-blue accent carrying state, same two-step ink
   scale. Only the ends of the scale swap.

   Every value here was measured against the lighter end of the gradient,
   which is the worst case: ink 14.4:1, the second tier 6.2:1, the quietest
   4.6:1, the accent 5.1:1. The literals below are the handful of colours the
   dark block did not route through a token because on charcoal they were
   already right.                                                          */
html:not(.dark-mode) #side-panel {
  --spx-ink:      #22201D;
  --spx-ink-2:    #56524C;
  --spx-ink-3:    #6A665F;
  --spx-accent:   #22201D;
  --spx-accent-2: #2E2A25;
  --spx-fill:     rgba(40,34,26,0.055);
  --spx-fill-h:   rgba(40,34,26,0.10);
  --spx-fill-on:  rgba(40,34,26,0.155);
  --spx-sheen:    inset 0 1px 0 rgba(255,255,255,0.6);

  /* Paper, not a cool panel — the same warm neutral the desk itself sits on,
     two steps lighter so the drawer reads as being in front of it. */
  background: linear-gradient(180deg, #F1EFEB 0%, #E5E2DD 100%);
  border-left: 1px solid rgba(40,34,26,0.13);
  color: var(--spx-ink);
}
html:not(.dark-mode) #side-panel::before {
  background: linear-gradient(180deg, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0) 46%);
}
html:not(.dark-mode) #side-panel .sp-profile-at { color: var(--spx-ink-3); }
html:not(.dark-mode) #side-panel .sp-glance-seg { color: var(--spx-ink); }
html:not(.dark-mode) #side-panel .sp-tile,
html:not(.dark-mode) #side-panel .sp-util-tile { color: var(--spx-ink); }
/* Overdue keeps its warning colour, darkened until it carries on paper. */
html:not(.dark-mode) #side-panel .sp-rem-when.late,
html:not(.dark-mode) #side-panel .sp-rem-when.late small { color: #9E4526; }
html:not(.dark-mode) #side-panel .sp-btn-danger { color: #A33B3B; }
html:not(.dark-mode) #side-panel .sp-btn-danger:hover {
  background: rgba(163,59,59,0.12); color: #7E2B2B;
}
html:not(.dark-mode) #side-panel .sp-rem-tick:hover { color: var(--spx-accent-2); }
/* The scrollbar is drawn from the shared liquid-glass tokens, which are built
   for a dark trough and vanish on a pale one. */
html:not(.dark-mode) #side-panel .sp-body {
  scrollbar-color: rgba(40,34,26,0.26) transparent;
}
html:not(.dark-mode) #side-panel .sp-body::-webkit-scrollbar-thumb {
  background: rgba(40,34,26,0.24);
  box-shadow: none;
}
html:not(.dark-mode) #side-panel .sp-body::-webkit-scrollbar-thumb:hover {
  background: rgba(40,34,26,0.38);
}

/* ══ Flower orders ═════════════════════════════════════════════════════════
   The widget was the last surface still carrying its own inline styles: four
   of its six fields hid their labels while two showed them, so the card read
   as two labelled columns and four anonymous boxes — and a filled-in "150"
   no longer said budget, or francs. The note was the one boxed control in the
   app, with a resize grip on it. Kopieren was a full-width gold bar twice the
   height of the outline button beside it, and Leeren was a bare uppercase
   word under the badge, where it read as a second section heading.

   Nothing here is new: the fields are .field, the buttons are .btn in the
   same pill .action-row every tab uses, and the note is a .field textarea
   like any other. This only supplies the two things those components do not
   already cover. */
.bl-body { display: flex; flex-direction: column; gap: 8px; }
/* hideRedundantFieldLabels() removes the label of any input carrying a
   placeholder, which is right everywhere the fields are stacked. In a grid it
   left ragged rows: Datum and Uhrzeit sat a label lower than the Strauss beside
   them, and Budget a label lower than the guest name. The label still goes —
   it would only repeat the placeholder — but its line is kept, so every field
   in a row starts on the same baseline. Only inside a row: the note below is
   alone on its line, so reserving there would be dead space. */
#panel-blumen .tf-grid .field[data-placeholder-only] > label {
  display: block;
  visibility: hidden;
}
.bl-wish textarea {
  min-height: 52px;
  resize: none;
  line-height: 1.5;
}
/* The order as it will be pasted. A quiet inset rather than an outlined box,
   so it reads as output from the card rather than another field in it. */
.bl-preview {
  display: none;
  margin-top: 10px;
  padding: 11px 13px;
  border-radius: 10px;
  background: var(--chip-fill, rgba(60,50,40,0.05));
  color: var(--text);
  font-size: 11px;
  line-height: 1.65;
  white-space: pre-wrap;
}
html.dark-mode .bl-preview { background: rgba(255,255,255,0.05); }
/* Inside a widget the pill has the card's padding around it already. */
#desk-dash .bl-actions,
#panel-blumen .bl-actions { margin: 10px 0 0 !important; }


/* ══ THE LOBBY BOARD ══════════════════════════════════════════════════════
   Today's airport runs, shown on a screen rather than read on a desk. Every
   decision here follows from that: one column, no controls, type sized to be
   read standing up, and a ground dark enough that a screen left on all day
   does not light the room. It draws from the same _flData the header cell and
   the calendar use — one reading, three places — so it needs no fetching of
   its own and cannot disagree with them. */
/* The board follows the desk's theme. It was pinned dark on the reasoning
   that it is a screen for a room, which is true of the room it faces and not
   of the desk it is opened from: on a light desk it came up as a black sheet,
   which is the one thing the theme is there to prevent. Its ink, its gold and
   its rules are one set of tokens now, swapped as a set, so a light board is
   a light board rather than a dark one with the colours pulled about. The
   status colours are the app's own, already solved for both themes. */
#lobby-board {
  --lb-bg: var(--surface);
  --lb-ink: #F4EFE8;
  --lb-ink-rgb: 244,239,232;
  --lb-gold: 201,169,110;
  position: fixed; inset: 0; z-index: 10400;
  display: none; flex-direction: column;
  background: var(--lb-bg); color: var(--lb-ink);
  font-family: 'DM Sans', system-ui, sans-serif;
  padding: clamp(18px, 2.6vh, 34px) clamp(20px, 3vw, 56px);
}
#lobby-board.lb-open { display: flex; }
.lb-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 24px;
  padding-bottom: clamp(10px, 1.4vh, 18px);
  border-bottom: 1px solid rgba(var(--lb-gold),0.28);
}
.lb-mark { min-width: 0; }
.lb-mark > span {
  display: block; font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(20px, 2.4vw, 34px); letter-spacing: 0.4px; line-height: 1.1;
}
.lb-mark > em {
  display: block; margin-top: 6px; font-style: normal;
  font-family: ui-monospace, Menlo, monospace;
  font-size: clamp(9px, 0.75vw, 12px); letter-spacing: 3px; text-transform: uppercase;
  color: rgba(var(--lb-gold),0.85);
}
.lb-now { text-align: right; flex: 0 0 auto; }
.lb-now > span {
  display: block; font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(26px, 3.2vw, 46px); line-height: 1; font-variant-numeric: tabular-nums;
}
.lb-now > em {
  display: block; margin-top: 6px; font-style: normal;
  font-family: ui-monospace, Menlo, monospace;
  font-size: clamp(9px, 0.75vw, 12px); letter-spacing: 2.2px; text-transform: uppercase;
  color: rgba(var(--lb-ink-rgb),0.6);
}
/* One control, and it keeps out of the way until the screen is touched. */
.lb-close {
  position: absolute; top: 14px; right: 16px; width: 34px; height: 34px;
  border-radius: 50%; border: 1px solid rgba(var(--lb-ink-rgb),0.18);
  background: none; color: rgba(var(--lb-ink-rgb),0.45); cursor: pointer;
  font-size: 14px; opacity: 0; transition: opacity .18s;
}
#lobby-board:hover .lb-close, .lb-close:focus-visible { opacity: 1; }

.lb-rows { flex: 1; min-height: 0; overflow: hidden; padding-top: clamp(8px, 1.2vh, 16px); }
/* A row is a line to be read at a glance, in six columns that never move:
   which way, when, which flight, whose, where from or to, and what it is
   doing. The grid is fixed rather than fluid so the columns line up down the
   board — a boarding hall reads by column, not by row. */
.lb-row {
  display: grid; align-items: center;
  grid-template-columns: clamp(26px,2.4vw,40px) clamp(74px,7vw,120px) clamp(96px,9vw,150px)
                         minmax(0,1fr) clamp(90px,10vw,190px) clamp(110px,11vw,200px);
  gap: clamp(10px, 1.4vw, 26px);
  padding: clamp(9px, 1.5vh, 20px) 2px;
  border-bottom: 1px solid rgba(var(--lb-ink-rgb),0.08);
}
.lb-row:last-child { border-bottom: 0; }
.lb-dir { color: rgba(var(--lb-gold),0.9); display: flex; }
.lb-dir svg { width: clamp(18px,1.8vw,28px); height: clamp(18px,1.8vw,28px); }
.lb-time {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(22px, 2.6vw, 40px); line-height: 1; font-variant-numeric: tabular-nums;
}
.lb-time > s { display: block; text-decoration: line-through; opacity: 0.4;
  font-size: clamp(11px, 1.1vw, 17px); margin-bottom: 2px; }
.lb-num {
  font-family: ui-monospace, Menlo, monospace;
  font-size: clamp(14px, 1.4vw, 22px); letter-spacing: 1.4px; font-variant-numeric: tabular-nums;
}
.lb-who {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(19px, 2.1vw, 34px); line-height: 1.1;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lb-where {
  font-family: ui-monospace, Menlo, monospace;
  font-size: clamp(10px, 0.95vw, 15px); letter-spacing: 1.6px; text-transform: uppercase;
  color: rgba(var(--lb-ink-rgb),0.62);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lb-state {
  font-family: ui-monospace, Menlo, monospace;
  font-size: clamp(10px, 0.95vw, 15px); letter-spacing: 1.8px; text-transform: uppercase;
  text-align: right; color: rgba(var(--lb-ink-rgb),0.72);
}
.lb-state.is-late { color: var(--fl-late); }
.lb-state.is-ok { color: var(--fl-ok); }
.lb-state.is-off { color: var(--fl-off); }
.lb-state > b { display: block; font-weight: inherit; }
.lb-state > u { display: block; text-decoration: none; font-size: clamp(9px,0.8vw,12px);
  letter-spacing: 1.2px; opacity: 0.85; margin-top: 3px; }
.lb-empty {
  display: flex; align-items: center; justify-content: center; height: 100%;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(20px, 2.2vw, 34px); color: rgba(var(--lb-ink-rgb),0.45);
}
.lb-foot {
  padding-top: clamp(8px, 1.2vh, 16px); border-top: 1px solid rgba(var(--lb-ink-rgb),0.1);
  font-family: ui-monospace, Menlo, monospace;
  font-size: clamp(9px, 0.72vw, 12px); letter-spacing: 2px; text-transform: uppercase;
  color: rgba(var(--lb-ink-rgb),0.42);
}
/* A phone held up at the desk gets the same board, two columns narrower. */
/* The light board. Same board, read off a pale sheet: the gold has to come
   down a long way to hold on white, and the ink is the desk's own dark. */
html:not(.dark-mode) #lobby-board {
  --lb-ink: #241F1A;
  --lb-ink-rgb: 36,31,26;
  --lb-gold: 138,106,50;
}
@media (max-width: 700px) {
  .lb-row { grid-template-columns: 22px 68px minmax(0,1fr) 92px; gap: 10px; }
  .lb-num { grid-column: 3; grid-row: 1; font-size: 13px; }
  .lb-who { grid-column: 3; grid-row: 2; font-size: 19px; }
  .lb-where { display: none; }
  .lb-state { grid-column: 4; grid-row: 1 / span 2; }
}