:root {
  /* Light theme — the default */
  --bg: #ECEDE8;
  --card: #ffffff;
  --line: #D8D6CC;
  --ink: #1B1E21;
  --muted: #6B6F6A;
  --confirmed: #C1662A;
  --confirmed-ink: #ffffff;
  --tentative: #2F6B63;
  --tentative-ink: #ffffff;
  --empty: #9A9D97;
  --shadow: rgba(20, 20, 15, 0.10);
  /* BUTTONS (owner, 28 Oct 2026): every button you can click is filled
     with the logo's orange, in both themes; one you can't click is grey
     (see "THE BUTTONS" below). */
  --btn-primary-bg: #C4682A;
  --btn-primary-hover: #A9561F;
  --btn-primary-ink: #ffffff;
  --btn-primary-border: transparent;
  --btn-off-bg: #E2E2DC;
  --btn-off-ink: #8A8D88;
  /* The neutral "world traveler" globe (see .globe-flag) */
  --globe: #2f6f73;
  --globe-ink: #ffffff;
  /* What a SEAT's state looks like, everywhere, in both themes:
     green = confirmed, orange = interested (or held). Squares and the
     rings around flags use the same two colours, so they always agree.
     These are separate from --confirmed / --tentative above, which are
     the site's brand colours for buttons, links and badges. */
  --seat-confirmed: #2fb46a;
  --seat-confirmed-ink: #062413;
  --seat-interested: #f28c28;
  --seat-interested-ink: #2b1600;
}

:root[data-theme="dark"] {
  --bg: #07131f;
  --card: rgba(18, 28, 40, 0.96);
  --line: rgba(168, 183, 207, 0.25);
  --ink: #edf5ff;
  --muted: #9caec6;
  --confirmed: #7ae5b8;
  --confirmed-ink: #041815;
  --tentative: #f4d28b;
  --tentative-ink: #221a0b;
  --globe: #bfe8e2;
  --globe-ink: #14393b;
  --empty: rgba(255,255,255,0.18);
  --shadow: rgba(2, 6, 12, 0.45);
  --btn-off-bg: rgba(148, 163, 184, 0.14);
  --btn-off-ink: rgba(237, 245, 255, 0.42);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  transition: background 0.2s ease, color 0.2s ease;
}
:root[data-theme="dark"] body {
  background: radial-gradient(circle at top, #0e1d2b 0%, var(--bg) 42%, #050d15 100%);
}

img, svg { display: block; max-width: 100%; }

/* Font helpers used throughout the HTML (Sora, Inter and IBM Plex Mono
   are served from our own site: css/fonts.css). */
.display { font-family: Sora, Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }
.mono { font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

/* ===== THE LOGO (owner, 27 Oct 2026): the drawn logo, everywhere — the
   top bar of every page and the footers. The files are copies of
   workspace/brand/SeekSetGo-logo/SVG/ (its README: never stretch,
   recolour or re-tilt it):
     img/logo/seeksetgo-logo-full-colour.svg    the main logo (light theme)
     img/logo/seeksetgo-logo-light-on-dark.svg  the same for the dark theme
   Both are in the page; the theme shows one:
     <a class="logo" …><img class="logo-img logo-img-light" …><img class="logo-img logo-img-dark" …></a>
   Only the height is set (width: auto keeps its shape). A label after the
   logo inside it (a desk's name: "staff desk") sits at its foot. ===== */
.logo {
  display: inline-flex; align-items: flex-end;
  font-family: Sora, Inter, sans-serif; font-weight: 700; font-size: 18px; line-height: 1.2;
  color: var(--ink); text-decoration: none; white-space: nowrap;
}
/* The file has empty space around the drawing (its README asks for it),
   so it is set a little bigger than it looks. On a phone 52px, the most
   that leaves room for the home page's buttons on one line at 375px
   (measured with the wider "Light" button of the dark theme). */
.logo-img { display: block; height: 52px; width: auto; }
@media (min-width: 768px) { .logo-img { height: 72px; } }
.logo-lg .logo-img { height: 96px; }
.logo-img-dark { display: none; }
:root[data-theme="dark"] .logo-img-light { display: none; }
:root[data-theme="dark"] .logo-img-dark { display: block; }
.logo > :not(.logo-img) { margin-left: 0.4em; margin-bottom: 0.5em; }

/* ===== THE TEXT STANDARD (owner, 21 Oct 2026) =====
   Every text on the public pages is one of these, each with one job:
     .t-section  a section's title ("Expeditions forming now")
     .t-title    a box's title: a card, a popup, a frame
     .t-body     a sentence people read (the page's own size)
     .t-small    a helper note, a date, "charged in tugrik" (grey)
     .t-label    1-3 words in capitals: STEP 1 OF 5, SHARED. Never a sentence.
   Rules: a heading is never smaller than the text under it, and no
   sentence is smaller than .t-small. (The hero's headline is its own.) */
.t-section { font-family: Sora, Inter, sans-serif; font-weight: 700; font-size: clamp(1.55rem, 2.6vw, 1.9rem); line-height: 1.2; letter-spacing: -0.01em; }
.t-title   { font-family: Sora, Inter, sans-serif; font-weight: 600; font-size: 18px; line-height: 1.3; }
.t-body    { font-size: 15px; line-height: 1.6; }
.t-small   { font-size: 13px; line-height: 1.5; color: var(--muted); }
.t-label   { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 11px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }

/* ----- "How the price works" (index.html #priceModal; the booking form
   shows the same pieces in its "How the price works" fold) -----
   Each section has a real sub-heading, bigger than its text. */
.pw-h { font-family: Sora, Inter, sans-serif; font-weight: 600; font-size: 17px; line-height: 1.3; margin: 0 0 12px; }
.pw-sec { padding-top: 22px; margin-top: 22px; border-top: 1px solid var(--line); }
.pw-grid { display: grid; gap: 0; }
@media (min-width: 768px) {
  .pw-grid { grid-template-columns: 1fr 1fr; column-gap: 36px; }
}
/* The facts under "Good to know": a heading line and a sentence each;
   two columns in the wide window. */
.pw-facts { display: grid; gap: 14px; }
.pw-fact-h { font-weight: 600; font-size: 15px; line-height: 1.4; }
@media (min-width: 768px) {
  .pw-more .pw-facts { grid-template-columns: 1fr 1fr; column-gap: 36px; row-gap: 16px; }
}
.pw-example { margin-top: 14px; padding: 12px 14px; border-radius: 10px; background: var(--bg); }
.strike { text-decoration: line-through; }

.line { border-color: var(--line) !important; }
.muted { color: var(--muted) !important; }
.card,
.blueprint {
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: 0 14px 30px var(--shadow);
}
:root[data-theme="dark"] .card,
:root[data-theme="dark"] .blueprint {
  background: linear-gradient(180deg, rgba(16, 25, 36, 0.96), rgba(10, 16, 24, 0.96));
}

/* The blueprint panel (behind vehicle art) stays a dark technical surface
   in both themes — it's a deliberate contrast element, not page chrome. */
.blueprint {
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(40, 51, 67, 0.96), rgba(27, 36, 49, 0.96)) !important;
  border-color: rgba(255,255,255,0.12) !important;
}

/* ===== THE BUTTONS (owner, 28 Oct 2026) =====
   A button you can click is filled with the logo's orange; one you can't
   (disabled, or .btn-disabled) is grey with a "not allowed" pointer.
   That covers the main buttons (.btn-primary) and the outlined ones
   ("rounded border line": Edit, Cancel, + Add a day...).
   NOT orange, on purpose — they show which one is SELECTED, and orange
   is their "selected" colour: the staff desk tabs (.admin-tab,
   .tab-group-btn, .req-tab), choices that are on or off ([aria-pressed]),
   and a traveler's answer to a trip change ([data-choice]). The small
   underlined words (rename, switch off) and the seats stay as they are. */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--btn-primary-bg);
  border: 1px solid var(--btn-primary-border);
  color: var(--btn-primary-ink);
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
:is(button, a).border.line:not(.admin-tab, .tab-group-btn, .req-tab, [aria-pressed], [data-choice]) {
  background: var(--btn-primary-bg);
  border-color: var(--btn-primary-bg) !important;
  color: var(--btn-primary-ink);
  transition: background 0.15s ease, border-color 0.15s ease;
}
.btn-primary:hover,
:is(button, a).border.line:not(.admin-tab, .tab-group-btn, .req-tab, [aria-pressed], [data-choice]):hover {
  background: var(--btn-primary-hover);
  border-color: var(--btn-primary-hover) !important;
}
/* The warning buttons (Delete, Remove, Cancel booking — red words,
   style="color:#c0392b") are filled red instead: red words on orange
   can't be read, and they should still look different. */
:is(button, a).border.line[style*="c0392b"] {
  background: #c0392b;
  border-color: #c0392b !important;
  color: #ffffff !important;
}
:is(button, a).border.line[style*="c0392b"]:hover {
  background: #a5301f;
  border-color: #a5301f !important;
}
.btn-disabled,
.btn-primary:disabled,
button.border.line:disabled {
  background: var(--btn-off-bg) !important;
  border: 1px solid var(--line) !important;
  color: var(--btn-off-ink) !important;
  opacity: 1 !important;
  cursor: not-allowed;
}
button:disabled { cursor: not-allowed; }
/* Staff desk: some controls are for admins only, and some notes only for
   staff. The database enforces the same rules — this just hides buttons
   that wouldn't work for the person looking at the page. */
body:not(.is-admin) .admin-only { display: none !important; }
body.is-admin .staff-only { display: none !important; }

.admin-tab.active {
  background: var(--confirmed);
  color: var(--confirmed-ink);
  border-color: transparent;
}
/* Staff desk: the three menus of sections. The menu holding the open
   section looks like an active tab; inside a menu the open section is
   marked the same way, and the others light up under the pointer. */
.tab-group-btn.active {
  background: var(--confirmed);
  color: var(--confirmed-ink);
  border-color: transparent;
}
.tab-group-menu .admin-tab:not(.active):hover { background: rgba(127,127,127,0.12); }
/* Staff desk, Requests: the tab of the stage shown. */
.req-tab.active {
  background: var(--confirmed);
  color: var(--confirmed-ink);
  border-color: transparent;
}

/* The vehicle drawing and its seats.
   The box always keeps the drawing's own shape (500 x 230), and both the
   car art and the seats fill it exactly. Seats are placed and sized in
   percentages of the box (see VEHICLE_SEAT_SPOTS in js/vehicle.js), so
   they stay in the same spot inside the car at every screen size. */
.vehicle-body {
  position: relative;
  width: 100%;
  max-width: 500px;
  aspect-ratio: 500 / 230;
  margin: 0 auto;
  background: radial-gradient(circle at center, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
  border-radius: 14px;
  overflow: hidden;
  container-type: inline-size;
}

.vehicle-body svg.vehicle-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

.vehicle-body svg.vehicle-art path,
.vehicle-body svg.vehicle-art rect,
.vehicle-body svg.vehicle-art circle {
  stroke: rgba(255,255,255,0.92);
  stroke-width: 2;
}

/* Layer the seats sit on, exactly over the car art */
.vehicle-seats {
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* A seat inside a vehicle: its middle goes on the spot given by the
   left/top that vehicle.js writes. 8.9% wide = SEAT_SIZE in vehicle.js. */
.vehicle-seats .seat {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 8.9%;
  height: auto;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 24%;
  font-size: 9px;
  font-size: clamp(7px, 3cqw, 14px);
}
/* The bus holds four across, so its seats are smaller: 6.7% = 30 on the
   500-wide sheet (BUS_SEAT_SIZE in vehicle.js). */
.vehicle-seats.seats-bus .seat {
  width: 6.7%;
  font-size: clamp(6px, 2.2cqw, 12px);
}
/* Backrest: the car faces left, so the back of each seat is on the right. */
.vehicle-seats .seat::after {
  content: "";
  position: absolute;
  top: 10%;
  bottom: 10%;
  right: -9%;
  width: 16%;
  border-radius: 999px;
  background: inherit;
  border: inherit;
  filter: brightness(0.8);
}

/* Base style for individual seat elements */
.seat {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #0e1723;
  border: 1px solid rgba(255,255,255,0.18);
  user-select: none;
}

.seat-driver {
  background: var(--empty);
  color: var(--ink);
  border-color: var(--line);
}
.seat-confirmed {
  background: var(--seat-confirmed);
  color: var(--seat-confirmed-ink);
}
.seat-tentative {
  background: var(--seat-interested);
  color: var(--seat-interested-ink);
}
.seat-empty {
  background: rgba(255,255,255,0.08);
  color: rgba(237,245,255,0.8);
}
/* Admin only: a seat staff reserved but nobody has paid for yet —
   the "interested" colour with stripes, so the two are easy to tell apart. */
.seat-held {
  background: repeating-linear-gradient(135deg, var(--seat-interested) 0 4px, rgba(0,0,0,0.28) 4px 6px);
  color: var(--seat-interested-ink);
}
/* Taken seats on the admin map are buttons (click to find the tourist). */
.seat-btn { cursor: pointer; padding: 0; font-family: inherit; }
.seat-btn:focus-visible { outline: 2px solid var(--confirmed); outline-offset: 2px; }
.seat-pick { cursor: pointer; padding: 0; font-family: inherit; }
.seat-pick:hover { background: rgba(255,255,255,0.18); }
.seat-pick:focus-visible { outline: 2px solid var(--confirmed); outline-offset: 2px; }
.seat-selected {
  box-shadow: 0 0 0 2px var(--confirmed);
}
/* A taken seat whose traveler chose a flag: the seat turns round and the
   flag picture covers it, with a thin ring around it — orange while the
   traveler is interested (or held), green once confirmed — the same two
   colours as the square seats (--seat-confirmed / --seat-interested).
   Every other seat keeps its rounded-square shape. */
.seat-has-flag {
  --flag-ring: var(--seat-confirmed);    /* confirmed: green */
  border-radius: 50%;
  border: 0;
  overflow: hidden;
  /* Behind the flag, the same colour as the ring — so no other colour can
     peek out at the edge, and it still looks right if the picture can't
     be loaded. */
  background: var(--flag-ring);
  box-shadow: 0 0 0 1.5px var(--flag-ring);
}
/* Inside a vehicle the seat rule above (".vehicle-seats .seat") sets the
   rounded-square shape and outranks a single class — so the round shape
   has to be said again here, at least as specifically. */
.vehicle-seats .seat.seat-has-flag {
  border-radius: 50%;
}
/* No backrest strip on a flag seat: it would be drawn across the flag. */
.vehicle-seats .seat.seat-has-flag::after {
  display: none;
}
.seat-tentative.seat-has-flag,
.seat-held.seat-has-flag {
  --flag-ring: var(--seat-interested);   /* interested or held: orange */
}
/* The traveler's own seat on their desk: a second, white ring outside. */
.seat-selected.seat-has-flag {
  box-shadow: 0 0 0 1.5px var(--flag-ring), 0 0 0 3.5px rgba(255,255,255,0.9);
}
.seat-flag {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* The neutral globe is drawn by the page itself (not a picture file), so
   its colours can follow the light / dark theme like everything else:
   --globe and --globe-ink at the top of this file. */
.globe-flag .globe-sea { fill: var(--globe); }
.globe-flag .globe-lines {
  fill: none;
  stroke: var(--globe-ink);
  stroke-width: 22;
  stroke-linecap: round;
}

/* Legend swatches sit on the page background, not the dark blueprint,
   so the "open" swatch needs its own outline to be visible. */
.legend-swatch.seat-empty {
  background: transparent;
  border: 1px dashed var(--muted);
}

/* ===== Expedition carousel (index.html) =====
   #expCarousel is the window; .exp-track is the strip of pages inside it,
   moved sideways one whole page at a time; each .exp-page is as wide as
   the window. The 12px of padding (taken back by the negative margin) is
   room for the cards' shadows, which the window would otherwise cut off. */
.exp-carousel {
  overflow: hidden;
  overflow: clip visible;      /* newer browsers: cut the sides only, so shadows below still show */
  margin-inline: -12px;
}
.exp-track {
  display: flex;
  align-items: flex-start;
  transition: transform 0.6s ease;
}
.exp-page {
  flex: 0 0 100%;
  min-width: 0;
  padding-inline: 12px;
}
@media (prefers-reduced-motion: reduce) {
  .exp-track { transition: none; }
}
/* The strip with an expedition's name on top of its card. Where cards
   stand side by side it is always tall enough for a name of two lines,
   so a short name and a long one leave the cars below at the same
   height. (2 lines of 1.25rem + the strip's own padding and line.) */
@media (min-width: 640px) {
  .exp-card-head { min-height: calc(2.5rem + 1.5rem + 1px); }
}
/* An expedition's name on its card: two lines at most, then "…". The
   whole name shows on hover and in the popup that a click opens. */
.exp-card-name {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}
.exp-card-name[data-route-info] { cursor: pointer; }
/* The dark panel with the car, inside a card: it fills the card from
   edge to edge, so it needs no frame, corners or shadow of its own (they
   showed as a dark line along the card's edge). */
.blueprint.exp-card-car {
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
/* A big car (a minibus) on a marketplace card: the car, and over it how
   many seats are open; clicking opens its seat map in #seatModal. */
.big-car-btn {
  position: absolute; inset: 0; z-index: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  background: rgba(10, 16, 24, 0.45); color: #fff; border-radius: 12px;
  font-family: Inter, sans-serif; cursor: pointer;
}
.big-car-btn:hover { background: rgba(10, 16, 24, 0.3); }
.big-car-btn:focus-visible { outline: 2px solid var(--confirmed); outline-offset: 2px; }
.big-car-count { font-family: Sora, Inter, sans-serif; font-weight: 700; font-size: 28px; line-height: 1; }
.big-car-pick { margin-top: 6px; padding: 4px 12px; border-radius: 999px; background: var(--confirmed); color: #fff; font-size: 13px; font-weight: 600; }
/* The same seat map, larger, inside the popup. */
.vehicle-body.vehicle-body-big { max-width: 720px; }
/* Staff desk, Vehicle types: the car drawings to pick from (js/admin.js,
   renderVtShapes). The chosen one has a green ring. */
.blueprint.vt-shape { border-radius: 10px; box-shadow: none; cursor: pointer; }
.blueprint.vt-shape:hover { border-color: rgba(255,255,255,0.4) !important; }
.blueprint.vt-shape-on { box-shadow: 0 0 0 2px var(--confirmed); }
/* The price notes under a card's price: room for three, each on ONE
   line — what doesn't fit ends in "…" and shows in full on hover. With
   the same room on every card, the buttons below line up. */
.exp-price-lines { min-height: 3.5rem; }
.exp-price-lines p {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.exp-run-line { min-height: 1rem; }
/* The card's buttons stay at its bottom whatever is above them. */
.exp-card-foot { margin-top: auto; }
/* The card a shared link (?trip=CODE) points at, lit up for 3 seconds
   (js/expeditions.js, openSharedTrip). Drawn inside the card's edge so the
   carousel window doesn't cut it off. */
.exp-card-shared { outline: 3px solid var(--seat-interested); outline-offset: -3px; animation: expShared 1s ease 3; }
.exp-card-shared:focus { outline: 3px solid var(--seat-interested); }
/* The card keeps focus after it (so the carousel stays put), without the
   browser's focus ring: the card itself is not a button. */
[data-card]:focus:not(.exp-card-shared) { outline: none; }
@keyframes expShared { 50% { outline-color: transparent; } }
@media (prefers-reduced-motion: reduce) { .exp-card-shared { animation: none; } }
/* "This expedition is no longer open" over the list (same file). */
.shared-trip-note {
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid var(--seat-interested);
}
/* "Share this trip" (js/share.js): the Share button on a card, and the
   six choices in its menu. */
.share-trip-btn { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 11px; letter-spacing: 0.04em;
  padding: 2px 8px; border: 1px solid var(--line); border-radius: 6px; color: var(--muted); white-space: nowrap; }
.share-trip-btn:hover, .share-trip-btn:focus-visible { color: var(--ink); border-color: currentColor; }
.share-opt { display: block; text-align: center; padding: 9px 10px; border: 1px solid var(--line); border-radius: 8px;
  font-size: 14px; font-weight: 600; color: var(--ink); text-decoration: none; cursor: pointer; }
.share-opt:hover, .share-opt:focus-visible { border-color: currentColor; }
/* The dots under the carousel: one per page, the current one filled. */
.exp-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 1px solid var(--muted);
  background: transparent;
  padding: 0;
  cursor: pointer;
}
.exp-dot-on {
  background: var(--confirmed);
  border-color: var(--confirmed);
}

/* How many travelers are in line for a seat: a small number on its corner. */
.seat { position: relative; }
.vehicle-seats .seat { position: absolute; }
.seat-line {
  position: absolute;
  top: -32%;
  right: -32%;
  min-width: 58%;
  padding: 0 3px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--bg, #fff);
  font-size: 0.82em;
  line-height: 1.5;
  font-weight: 700;
  text-align: center;
  pointer-events: none;
}

/* A seat somebody is in line for: orange, with the number of travelers
   interested inside. Still open (interest reserves nothing), so it keeps
   its colour under the pointer instead of turning into a free seat. */
.seat-wanted {
  background: var(--seat-interested);
  color: var(--seat-interested-ink);
}
.seat-pick.seat-wanted:hover { background: var(--seat-interested); filter: brightness(1.12); }

/* My desk: a traveler's place in the line for a seat. */
.line-flag { width: 14px; height: 14px; border-radius: 50%; display: inline-block; vertical-align: -2px; }

/* ===== THE ROUTE FORM: ONE LINE PER DAY (owner, 28 Oct 2026) =====
   js/admin-routes.js (renderRouteDays). Every day is one line with the
   same columns, so a 14- or 21-day tour can be read down the page and
   what is still empty shows. Notes and the suppliers' details open under
   a day's line ("Notes"). Narrower than this, the lines scroll sideways
   (their box in admin.html is overflow-x-auto). */
.route-days { min-width: 1080px; }
.route-day-line {
  display: grid;
  grid-template-columns: 4.75rem 4.25rem 3.75rem minmax(9rem, 1.3fr) repeat(3, minmax(7.5rem, 1fr)) minmax(10rem, 2fr) 8.5rem;
  gap: 6px;
  align-items: start;
}
.route-day-details {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  padding: 2px 0 8px 4.75rem;
}

/* ===== SEARCHABLE DROP-DOWNS (owner, 28 Oct 2026) =====
   js/select-search.js: a long drop-down on the staff desk opens this
   panel — a search box and the choices that match. Above every popup
   and dialog (they use z-index 40 and 50). */
.select-search {
  position: fixed; z-index: 70;
  background: var(--card); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 14px 30px var(--shadow); padding: 6px;
  font-size: 13px; color: var(--ink);
}
:root[data-theme="dark"] .select-search { background: #121c28; }
.select-search-input {
  width: 100%; padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px;
  background: transparent; color: var(--ink); font-size: 13px;
}
.select-search-list { list-style: none; margin: 6px 0 0; padding: 0; max-height: 18rem; overflow-y: auto; }
.select-search-item { padding: 5px 8px; border-radius: 6px; cursor: pointer; }
.select-search-item:hover { background: rgba(127, 127, 127, 0.12); }
.select-search-item.is-active { background: var(--btn-primary-bg); color: var(--btn-primary-ink); }
.select-search-item.is-chosen { font-weight: 600; }
.select-search-item.is-off { color: var(--muted); cursor: not-allowed; }
.select-search-group { padding: 6px 8px 2px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.select-search-none { padding: 6px 8px; color: var(--muted); }
.select-search-count { margin: 4px 2px 0; font-size: 11px; color: var(--muted); }

/* All signups (Requests): a booking's action buttons ("Mark confirmed",
   "Record payment"...) stay on one line each. */
#signupRows td:last-child button { white-space: nowrap; }
/* ...and the deposit line under Total may wrap, so Total stays narrow. */
#signupRows td:nth-child(5) p { white-space: normal; }