/* HERO admin screens — shared preview styles */
:root {
  --black: #0a0a0a;
  --bg: #161616;
  --surface: #1f1f1f;
  --surface-2: #262626;
  --border: #2a2a2a;
  --border-soft: #1e1e1e;
  --white: #f5f5f5;
  --dim: #a3a3a3;
  --faint: #8a8a8a;
  --orange: #f0940a;
  --icon-tile: #2b2113;
  /* data colours — gold + grey scheme */
  --meter-ok: #6f6f6f;   /* neutral grey: booked/normal */
  --meter-warn: #d1780a; /* gold: nearly full (validated vs dark surface) */
  --good-tint: #2b2113;  /* gold-tinted badge background */
  --good-text: #dfa746;  /* gold badge/highlight text */
  --track: #2a2a2a;      /* empty portion of meters and chart bars */
}

/* Light mode (per-pane setting in split view) */
html.light {
  --bg: #f2f2f3;
  --surface: #ffffff;
  --surface-2: #ececee;
  --border: #d8d8dc;
  --border-soft: #e5e5e8;
  --white: #1c1c1e;
  --dim: #55555a;
  --faint: #77777d;
  --icon-tile: #f5e9d2;
  --good-tint: #f5ead2;
  --good-text: #8a5d00;
  --track: #dcdcdf;
}
html.light body { background: linear-gradient(225deg, #f7f7f8 0%, #e6e6e9 100%) fixed; }
/* The top bar (and full-screen menu) stay black in light mode, so they keep
   their dark-mode text and surface colours */
html.light .topnav, html.light .menu-overlay {
  --white: #f5f5f5; --dim: #a3a3a3; --faint: #8a8a8a;
  --surface: #1f1f1f; --surface-2: #262626; --border: #2a2a2a; --border-soft: #1e1e1e;
  color: #f5f5f5;
}
html.light .breadcrumbs, html.light .pane-head { background: #ececee; }
html.light .sidebar { background: #ededef; }
html.light .sidebar a:hover, html.light .sidebar-foot button:hover { background: #e2e2e5; }
html.light .component { background: #f1f1f3; }
html.light .component.optional { background: #f7f7f8; }
html.light a.row:hover { background: #f4f4f6; }
html.light .chip-optional { background: #f5ead2; color: #8a5d00; }
html.light .stat.highlight { border-color: #e3d3a6; background: #faf3e0; }
html.light .input::placeholder { color: #9a9aa0; }
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  background: linear-gradient(225deg, var(--bg) 0%, #0c0c0c 100%) fixed;
  color: var(--white);
  font-family: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  min-height: 100vh;
}
a { color: inherit; text-decoration: none; }

/* ---- Top nav bar ---- */
.topnav {
  background: var(--black);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 20px;
  /* Stays put so the left menu can sit directly beneath it while scrolling */
  position: sticky; top: 0; z-index: 20;
}
.avatar { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
/* Person Avatar — a placeholder person icon in a circle, standing in until there
   are profile photos. Neutral grey on purpose: gold means "selected" in Compass,
   and an avatar isn't a selection. */
.av {
  width: 26px; height: 26px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--surface-2); border: 1px solid var(--border);
  font-size: 10px; font-weight: 600; color: var(--dim); letter-spacing: 0.3px;
  overflow: hidden;
}
/* With a photo the circle is the photo — faces sit high in a portrait, so bias the
   crop upwards rather than centring on the torso. */
.av.has-photo { background: none; }
.av img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: 50% 22%; }
.context { display: flex; flex-direction: column; cursor: pointer; user-select: none; }
.context .label {
  font-weight: 600; font-size: 12.5px;
  display: flex; align-items: center; gap: 6px;
}
.context .label svg { opacity: 0.7; }
.context .entity { font-size: 10px; color: #757575; margin-top: 3px; }
.topnav .spacer { flex: 1; }
.nav-icons { display: flex; align-items: center; gap: 4px; }
.nav-icons button {
  background: none; border: none; cursor: pointer;
  padding: 8px; border-radius: 6px;
  color: var(--dim);
  display: flex; align-items: center;
}
.nav-icons button:hover { background: #1c1c1c; color: var(--white); }
.logo { margin-left: 30px; height: 24px; width: auto; }

/* ---- Shell: sidebar + content ---- */
.shell { display: flex; min-height: calc(100vh - 56px); }
.sidebar {
  width: 218px; flex-shrink: 0;
  background: #101010;
  border-right: 1px solid var(--border-soft);
  padding: 16px 10px;
  display: flex; flex-direction: column; gap: 2px;
  /* Held in the viewport (56px = top bar) so the shrink button at its foot is
     always reachable, however long the page is */
  position: sticky; top: 56px; z-index: 10;
  align-self: flex-start;
  height: calc(100vh - 56px);
  overflow-y: auto;
}
.sidebar a {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 12px;
  border-radius: 6px;
  font-size: 13px; font-weight: 600;
  color: var(--dim);
}
.sidebar a svg { flex-shrink: 0; }
.sidebar a:hover { background: #191919; color: var(--white); }
.sidebar a.active { color: var(--orange); }
/* Subpages sit indented beneath their parent, in a slightly smaller font, and
   carry NO icon — the parent's icon stands for the whole section. They only
   appear while you're inside that section (see chrome.js). Indented to just past
   where the parent's label starts, so the nesting reads. */
.sidebar:not(.collapsed) a.sub { margin-left: 34px; }
.sidebar a.sub { font-size: 12px; }
/* A collapsed sidebar is icon-only, so text-only subpages have nothing to show */
.sidebar.collapsed a.sub { display: none; }
/* Chevron on a section that has subpages: down when open, right when folded */
.sidebar a .chev, .menu-overlay a .chev { margin-left: auto; display: flex; opacity: 0.55; }
.sidebar a .chev svg, .menu-overlay a .chev svg { transition: transform 0.12s; }
.sidebar a.closed .chev svg, .menu-overlay a.closed .chev svg { transform: rotate(-90deg); }
.sidebar.collapsed a .chev { display: none; }
.menu-overlay a.sub { margin-left: 44px; font-size: 14px; }
.dd-menu button.sub { padding-left: 28px; }
.content { flex: 1; min-width: 0; }

/* Collapsible sidebar. The foot is one row: shrink button, then the icon-only
   Return to Hero link on its right. */
.sidebar-foot {
  margin-top: auto; border-top: 1px solid var(--border-soft); padding-top: 8px;
  display: flex; align-items: center; gap: 4px;
}
.sidebar-foot button, .sidebar-foot a {
  display: flex; align-items: center; gap: 11px;
  background: none; border: none; cursor: pointer;
  padding: 10px 12px; border-radius: 6px;
  font-family: inherit; font-size: 12.5px; font-weight: 600;
  color: var(--faint);
}
.sidebar-foot button { flex: 1; min-width: 0; }
.sidebar-foot .foot-icon { flex-shrink: 0; padding: 10px; }
.sidebar-foot button:hover, .sidebar-foot a:hover { background: #191919; color: var(--white); }
/* At 62px wide there isn't room for both side by side, so they stack */
.sidebar.collapsed .sidebar-foot { flex-direction: column; gap: 2px; }
.sidebar.collapsed .sidebar-foot button { flex: none; width: 100%; }
.sidebar.collapsed .sidebar-foot .foot-icon { width: 100%; justify-content: center; }
.sidebar.collapsed { width: 62px; padding-left: 8px; padding-right: 8px; }
.sidebar.collapsed a span, .sidebar.collapsed .sidebar-foot span { display: none; }
.sidebar.collapsed a, .sidebar.collapsed .sidebar-foot button { justify-content: center; padding: 10px; }
/* Only the shrink chevrons flip — not the other icons in the foot */
.sidebar.collapsed .sidebar-foot button svg { transform: rotate(180deg); }

/* Hamburger + full-screen mobile menu */
.hamburger { display: none; background: none; border: none; cursor: pointer; color: var(--dim); padding: 6px; border-radius: 6px; }
.hamburger:hover { background: #1c1c1c; color: var(--white); }
.menu-overlay {
  display: none;
  position: fixed; inset: 0; z-index: 50;
  background: var(--black);
  padding: 14px 16px;
  flex-direction: column; gap: 4px;
}
.menu-overlay.open { display: flex; }
.menu-overlay a {
  display: flex; align-items: center; gap: 14px;
  padding: 15px 12px; border-radius: 7px;
  font-size: 15px; font-weight: 600; color: var(--dim);
}
.menu-overlay a.active { color: var(--orange); }
.menu-overlay-head { display: flex; align-items: center; justify-content: space-between; padding: 4px 4px 14px; }
.menu-overlay-title { font-size: 13.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; }
.menu-overlay-head button { background: none; border: none; cursor: pointer; color: var(--dim); padding: 6px; }
@media (max-width: 760px) {
  .sidebar { display: none; }
  .hamburger { display: flex; }
  .context .label { font-size: 11.5px; }
  .nav-icons button, .nav-icons .layout-toggle { display: none; }
}

/* Custom drop-down — always opens BELOW its button */
.dd { position: relative; }
.dd-btn {
  display: flex; align-items: center; gap: 8px;
  background: var(--surface); color: var(--white);
  border: 1px solid var(--border); border-radius: 5px;
  font-family: inherit; font-size: 12.5px; font-weight: 600;
  padding: 7px 11px; cursor: pointer; white-space: nowrap;
}
.dd-btn:hover { border-color: #3d3d3d; }
.dd-btn svg { transition: transform 0.12s; }
.dd.open .dd-btn { border-color: #3d3d3d; }
/* Chevron rotation is for pane pickers only — never rotate icon buttons */
.pane-head .dd.open .dd-btn > svg:last-child { transform: rotate(180deg); }
.dd-menu {
  display: none;
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 30;
  min-width: 170px;
  background: var(--surface);
  border: 1px solid var(--border); border-radius: 6px;
  padding: 5px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.55);
}
.dd-menu.right { left: auto; right: 0; }
.dd.open .dd-menu { display: block; }
.dd-menu button {
  display: flex; align-items: center; gap: 8px; width: 100%;
  background: none; border: none; border-radius: 4px;
  padding: 8px 10px; text-align: left;
  font-family: inherit; font-size: 12.5px; font-weight: 600;
  color: var(--dim); cursor: pointer;
}
.dd-menu button:hover { background: var(--surface-2); color: var(--white); }
.dd-menu button.selected { color: var(--orange); }
.dd-menu button.selected::after { content: "✓"; margin-left: auto; }
.dd-sep { height: 1px; background: var(--border-soft); margin: 5px 4px; }

/* Layout (pane count) drop-down in top nav: icon-style button */
.layout-dd .dd-btn { background: none; border-color: transparent; color: var(--dim); padding: 8px; }
.layout-dd .dd-btn:hover { background: #1c1c1c; color: var(--white); }
.layout-dd.on .dd-btn { color: var(--orange); }
@media (max-width: 760px) { .layout-dd { display: none; } }

/* Embedded pane pages: no top breadcrumb bar (crumbs move to the pane header) */
html.embed .breadcrumbs { display: none; }
html.embed .shell { min-height: 100vh; }
/* Split-view panes have no top bar, so the menu starts at the very top */
html.embed .sidebar { top: 0; height: 100vh; }

/* Theme colours drop-down (palette icon, top-right) */
.theme-row {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 7px 10px;
  font-size: 12.5px; font-weight: 600; color: var(--dim);
}
.theme-row input[type="color"] {
  width: 26px; height: 26px; padding: 0;
  border: 1px solid var(--border); border-radius: 50%;
  background: none; cursor: pointer;
  overflow: hidden;
}
.theme-row input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
.theme-row input[type="color"]::-webkit-color-swatch { border: none; border-radius: 50%; }

/* Split view page */
.split-wrap { display: flex; gap: 0; height: calc(100vh - 56px); }
.pane { flex: 1; min-width: 0; display: flex; flex-direction: column; border-right: 1px solid var(--border-soft); }
.pane:last-child { border-right: none; }
.pane-head {
  display: flex; align-items: center; gap: 14px;
  background: #121212; border-bottom: 1px solid var(--border-soft);
  padding: 9px 14px;
}
.pane-crumbs { display: flex; align-items: center; gap: 12px; font-size: 12px; min-width: 0; overflow: hidden; white-space: nowrap; }
/* In a pane header the picker already names the page in white, so the
   current crumb stays grey like the rest of the trail */
.pane-crumbs .crumb.current { color: var(--dim); }
/* Fixed width so the picker doesn't resize with the selected label */
.pane-head .dd-btn { min-width: 136px; justify-content: space-between; }
/* Pro mode: no box around the pane picker — just the label and chevron */
html.skill-pro .pane-head .dd-btn { background: none; border-color: transparent; }
html.skill-pro .pane-head .dd-btn:hover { background: #1f1f1f; }
.pane-head select {
  background: var(--surface); color: var(--white);
  border: 1px solid var(--border); border-radius: 5px;
  font-family: inherit; font-size: 12.5px; font-weight: 600;
  padding: 6px 10px; cursor: pointer;
}
.pane-head select:focus { outline: none; border-color: var(--orange); }
.pane iframe { flex: 1; width: 100%; border: none; background: var(--bg); }
@media (max-width: 980px) { .split-wrap { flex-direction: column; } .pane { border-right: none; border-bottom: 1px solid var(--border-soft); } }

/* ---- Breadcrumbs ---- */
.breadcrumbs {
  background: #121212;
  border-bottom: 1px solid var(--border-soft);
  display: flex; align-items: center; gap: 12px;
  padding: 13px 24px;
  font-size: 12px;
}
.crumb { color: var(--dim); }
a.crumb:hover { color: var(--white); }
.crumb-divider { color: #3a3a3a; }
.crumb.current { color: var(--orange); font-weight: 600; }

/* ---- Page scaffolding ---- */
/* Full width (05/08/2026): the page fills the content area rather than sitting
   in a centred 1060px column, so wide tables and role/function rows get room. */
.page { padding: 36px 28px 80px; }
.page-head { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 28px; }
.page-head .titles { flex: 1; }
.page h1 {
  font-size: 20px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.5px;
}
.page .page-sub { font-size: 12.5px; color: var(--dim); margin-top: 4px; }

/* ---- Buttons ---- */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--surface); color: var(--white);
  border: 1px solid var(--border); border-radius: 6px;
  padding: 9px 14px;
  font-family: inherit; font-size: 12.5px; font-weight: 600;
  cursor: pointer;
}
.btn:hover { border-color: #3d3d3d; }
.btn-primary { background: var(--orange); border-color: var(--orange); color: #141414; }
.btn-primary:hover { background: #fca62c; border-color: #fca62c; }
.btn-ghost { background: none; border-color: transparent; color: var(--dim); }
.btn-ghost:hover { color: var(--white); border-color: transparent; }

/* ---- Tabs (outlined toggle, e.g. Trip Yield / Activity Bookings) ---- */
.tabs { display: flex; gap: 10px; margin-bottom: 22px; }
.tabs button {
  display: inline-flex; align-items: center; gap: 8px;
  background: none; border: 1px solid transparent; border-radius: 6px;
  padding: 9px 14px;
  font-family: inherit; font-size: 12.5px; font-weight: 600;
  color: var(--dim); cursor: pointer;
}
.tabs button:hover { color: var(--white); }
.tabs button { position: relative; }
.tabs button.active { color: var(--orange); }
.tabs button.active::after {
  content: "";
  position: absolute; left: 12px; right: 12px; bottom: 1px;
  height: 2px; border-radius: 2px;
  background: var(--orange);
}

/* ---- Segmented control. Also used as an Access Toggle / Assign Toggle.
   Selected state is GOLD, not white (05/08/2026) — same as everywhere else
   in the system. ---- */
.seg { display: inline-flex; background: var(--surface); border: 1px solid var(--border); border-radius: 6px; padding: 3px; margin-bottom: 24px; }
.seg button {
  background: none; border: none; border-radius: 5px;
  padding: 7px 18px;
  font-family: inherit; font-size: 12.5px; font-weight: 600;
  color: var(--dim); cursor: pointer;
}
.seg button.active { background: var(--surface-2); color: var(--orange); }
/* A level that doesn't exist for this row (e.g. Reports is read-only) */
.seg button:disabled { opacity: 0.35; cursor: not-allowed; }
.seg button:disabled.active { background: var(--surface-2); }

/* A value-picker toggle inside a List Row (Access Toggle, Assign Toggle) reads as
   two states and no more: the chosen segment gold and semi-bold, everything else
   the same faint grey a disabled segment gets. The View Switcher, which lives in
   the Filter Bar rather than a row, keeps the ordinary three-state look. */
.row .seg button:not(.active) { opacity: 0.35; font-weight: 400; }
/* Gold marks access actually granted, not merely the segment you landed on. So a
   chosen "Not allowed" / "Not assigned" stays grey — the tinted background is what
   shows it's the current answer — and only a real permission goes gold. Without
   this, a column of mostly-unassigned rows lights up gold for the wrong answer. */
.row .seg button.active[data-level="none"],
.row .seg button.active[data-on="0"] { color: var(--dim); }

/* ---- Cards ---- */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 22px;
}
a.card { display: block; transition: border-color 0.15s, transform 0.15s; }
a.card:hover { border-color: #3d3d3d; transform: translateY(-2px); }
.card-head { display: flex; gap: 14px; margin-bottom: 18px; }
.icon-tile {
  width: 46px; height: 46px; flex-shrink: 0;
  border-radius: 7px;
  background: var(--icon-tile);
  color: var(--orange);
  display: flex; align-items: center; justify-content: center;
}
.card-head h2 { font-size: 16px; font-weight: 600; line-height: 1.2; }
.card-head .subtitle { font-size: 12px; color: var(--dim); margin-top: 3px; }
.card p { font-size: 12.5px; color: var(--faint); line-height: 1.5; }
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
@media (max-width: 900px) { .grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .grid { grid-template-columns: 1fr; } }

/* ---- Badges & chips ---- */
.badge {
  display: inline-flex; align-items: center;
  border-radius: 999px; padding: 3px 10px;
  font-size: 11px; font-weight: 600;
}
.badge-good { background: var(--good-tint); color: var(--good-text); }
.badge-neutral { background: var(--surface-2); color: var(--dim); }
.chip {
  display: inline-flex; align-items: center;
  border-radius: 4px; padding: 2px 8px;
  font-size: 10.5px; font-weight: 600;
}
.chip-accommodation { background: var(--surface-2); color: var(--dim); }
.chip-activity { background: var(--good-tint); color: var(--good-text); }
.chip-optional { background: #241d10; color: #cfa14e; }
.chip-included { background: none; border: 1px solid var(--border); color: var(--faint); }

/* ---- Skill level: newbie explanations ---- */
.newbie-note {
  display: none;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--orange);
  border-radius: 6px;
  padding: 12px 15px;
  font-size: 12.5px; color: var(--dim); line-height: 1.55;
  margin-bottom: 24px;
}
html.skill-newbie .newbie-note { display: block; }
html.skill-pro .newbie-hide { display: none !important; }
/* Pro mode: shrink/expand button is icon-only */
html.skill-pro .sidebar-foot span { display: none; }

/* ---- Dummy-data banner ---- */
.banner-dummy {
  display: flex; align-items: center; gap: 10px;
  background: #241d08; border: 1px solid #4c3d10; border-radius: 6px;
  color: #e3c46a; font-size: 12.5px;
  padding: 11px 14px; margin-bottom: 24px;
}
.banner-dummy strong { color: #f0d386; }

/* ---- Stat tiles ---- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 28px; }
@media (max-width: 900px) { .stats { grid-template-columns: repeat(2, 1fr); } }
.stat { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 16px 18px; }
.stat .stat-label { font-size: 10px; font-weight: 600; letter-spacing: 0.8px; text-transform: uppercase; color: var(--faint); margin-bottom: 8px; }
.stat .stat-value { font-size: 20px; font-weight: 700; }
.stat .stat-note { font-size: 11.5px; color: var(--dim); margin-top: 4px; }
.stat.highlight { border-color: #4a3c1c; background: #211b0f; }
.stat.highlight .stat-value { color: var(--white); }

/* ---- Inline stats strip (trip detail header) ---- */
.stat-strip { display: flex; gap: 36px; }
.stat-strip .stat-label { font-size: 10px; font-weight: 600; letter-spacing: 0.8px; text-transform: uppercase; color: var(--faint); margin-bottom: 3px; }
.stat-strip .stat-value { font-size: 15px; font-weight: 700; }
.stat-strip .stat-value.good { color: var(--good-text); }

/* ---- Tables ---- */
.table { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.table-wrap { border: 1px solid var(--border); border-radius: 8px; overflow-x: auto; }
.table-wrap .table { border: none; }
.table th {
  font-size: 10px; font-weight: 600; letter-spacing: 0.8px; text-transform: uppercase;
  color: var(--faint); text-align: left; padding: 13px 16px;
  border-bottom: 1px solid var(--border);
}
.table td { font-size: 12.5px; padding: 13px 16px; border-bottom: 1px solid var(--border-soft); }
.table th.num, .table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.table tr:last-child td { border-bottom: none; }
.table td.yield { color: var(--white); font-weight: 600; }
.table tr.total td { font-weight: 600; border-top: 1px solid var(--border); }

/* ---- Meters (capacity bars) ---- */
.meter { width: 150px; height: 6px; border-radius: 3px; background: var(--track); overflow: hidden; flex-shrink: 0; }
.meter > span { display: block; height: 100%; border-radius: 3px; background: var(--meter-ok); }
.meter.warn > span { background: var(--meter-warn); }
.count { font-size: 13px; color: var(--faint); font-variant-numeric: tabular-nums; white-space: nowrap; }
.count strong { color: var(--white); font-weight: 600; }

/* ---- List rows / groups ---- */
.group { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; margin-bottom: 18px; overflow: hidden; }
/* The Group Head names the thing that governs the rows beneath it, so it outranks
   them twice over: a full-width rule in the surface stroke (--border-soft is a
   half-step off --surface and reads as no line at all in dark mode), and 15px
   against the rows' 13px. */
.group-head { display: flex; align-items: center; gap: 10px; padding: 15px 18px; border-bottom: 1px solid var(--border); }
.group-head .g-title { font-weight: 600; font-size: 15px; }
.group-head .g-sub { font-size: 11.5px; color: var(--faint); }
.row { display: flex; align-items: center; gap: 16px; padding: 14px 18px; border-bottom: 1px solid var(--border-soft); }
.row:last-child { border-bottom: none; }
.row .r-main { flex: 1; min-width: 0; }
.row .r-title { font-size: 13px; font-weight: 600; }
/* A row under a Group Head belongs to it — lighter, so the heading leads. */
.group .row .r-title { font-weight: 400; }
.row .r-sub { font-size: 11.5px; color: var(--faint); margin-top: 2px; }
a.row:hover { background: #232323; }

/* ---- Pick Row: a selectable row in a master list (left column of a
   master-detail screen). The chosen one is tinted and accented. ---- */
.pick-row {
  display: flex; align-items: center; gap: 10px; width: 100%;
  text-align: left; cursor: pointer; font-family: inherit; color: var(--white);
  background: var(--surface); border: 1px solid var(--border); border-radius: 7px;
  padding: 12px 14px; margin-bottom: 10px;
}
.pick-row:hover { border-color: #3d3d3d; }
.pick-row.selected { background: var(--icon-tile); border-color: var(--orange); }
.pick-row.selected .pick-title { color: var(--orange); }
.pick-row .pick-main { flex: 1; min-width: 0; }
.pick-row .pick-title { display: block; font-size: 13px; font-weight: 600; }
.pick-row .pick-sub {
  display: block; font-size: 11px; color: var(--faint); margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ---- Field grids (detail panels) ---- */
.fields { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 24px; }
.field .f-label { font-size: 10px; font-weight: 600; letter-spacing: 0.8px; text-transform: uppercase; color: var(--faint); margin-bottom: 3px; }
.field .f-value { font-size: 13px; }
.field.wide { grid-column: 1 / -1; }

/* ---- Panels ---- */
.panel { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 20px; margin-bottom: 18px; }
.panel h3 { font-size: 13.5px; font-weight: 600; margin-bottom: 14px; }
.panel-note { font-size: 11.5px; color: var(--faint); line-height: 1.5; margin-top: -8px; margin-bottom: 14px; }

/* ---- Day cards (itineraries) ---- */
.day-card { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 16px 18px; margin-bottom: 14px; }
.day-card .day-title { font-weight: 600; font-size: 13px; margin-bottom: 12px; }
.day-card .day-title span { font-weight: 500; color: var(--faint); }
.component { display: flex; align-items: flex-start; gap: 10px; background: #242424; border-radius: 6px; padding: 11px 13px; margin-bottom: 8px; }
.component:last-child { margin-bottom: 0; }
.component.optional { background: #1d1d1d; }
.component .c-main { flex: 1; min-width: 0; }
.component .c-title { font-size: 12.5px; font-weight: 600; }
.component .c-meta { font-size: 11.5px; color: var(--faint); margin-top: 2px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.component .c-desc { font-size: 11.5px; color: var(--faint); line-height: 1.5; margin-top: 6px; }
.component .c-right { font-size: 11px; color: var(--faint); white-space: nowrap; }
.empty-note { font-size: 12.5px; color: var(--faint); }

/* ---- Coming soon (screens whose content is parked for now) ---- */
.coming-soon { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 8px; padding: 76px 24px; color: var(--faint); }
.coming-soon .cs-title { font-size: 13.5px; font-weight: 600; color: var(--white); }

/* Filter drop-downs: our own chevron with even spacing either side
   (the .shell .content prefix outranks the per-page select styling) */
.shell .content select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="%238a8a8a" stroke-width="2.5"><path d="m6 9 6 6 6-6"/></svg>');
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 30px;
}

/* ---- Inputs ---- */
.input {
  background: var(--surface); color: var(--white);
  border: 1px solid var(--border); border-radius: 6px;
  padding: 9px 13px;
  font-family: inherit; font-size: 12.5px;
}
.input::placeholder { color: #6d6d6d; }
.input:focus { outline: none; border-color: var(--orange); }

/* ---- Hint: hover tooltip. Add data-hint="…" to any element (essential for
   icon-only controls). Note: an ancestor with overflow:hidden will clip it —
   .group does, so set overflow:visible on a group holding hinted controls. ---- */
[data-hint] { position: relative; }
[data-hint]::after {
  content: attr(data-hint);
  position: absolute; bottom: calc(100% + 7px); left: 50%; transform: translateX(-50%);
  z-index: 40;
  background: var(--surface-2); color: var(--white);
  border: 1px solid var(--border); border-radius: 5px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
  padding: 5px 9px;
  font-size: 11.5px; font-weight: 600; white-space: nowrap;
  opacity: 0; visibility: hidden; transition: opacity 0.12s;
  pointer-events: none;
}
[data-hint]:hover::after, [data-hint]:focus-visible::after { opacity: 1; visibility: visible; }
/* Anchor to an edge when a centred tooltip would run off it */
[data-hint].hint-end::after { left: auto; right: 0; transform: none; }
[data-hint].hint-start::after { left: 0; right: auto; transform: none; }

/* ---- Legend ---- */
.legend { display: flex; align-items: center; gap: 16px; font-size: 11.5px; color: var(--faint); margin-bottom: 14px; }
.legend .swatch { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }