:root {
  --bg: #e8e2d6;
  --panel: #fffcf7;
  --ink: #141210;
  --muted: #3d3832;
  --line: #cfc4b4;
  --accent: #0f3a54;
  --accent-hover: #0a2c40;
  --accent-soft: #dceaf3;
  --ok: #1f5c3a;
  --warn: #8a5a00;
  --error: #8b1e1e;
  --sidebar-w: 360px;
  --results-h: 180px;
  --radius: 10px;
  --shadow: 0 10px 32px rgba(40, 30, 20, 0.1);
  font-family: "Source Sans 3", system-ui, sans-serif;
  font-size: 16px;
  color: var(--ink);
  background: var(--bg);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  height: 100%;
  background: var(--bg);
}

#app {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
}

.app-body {
  display: grid;
  grid-template-columns: var(--sidebar-w) 8px 1fr;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.app-body.sidebar-collapsed {
  grid-template-columns: 0 0 1fr;
}

.app-body.sidebar-collapsed .sidebar {
  overflow: hidden;
  border: none;
  width: 0;
  min-width: 0;
  padding: 0;
  opacity: 0;
  pointer-events: none;
}

.app-body.sidebar-collapsed #sidebar-resizer {
  display: none;
}

/* Always-visible tab when itinerary is hidden — so it never “fully goes away” */
.sidebar-open-tab {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 40;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  width: 2.1rem;
  padding: 0.85rem 0.25rem;
  border: 1px solid var(--line);
  border-left: none;
  border-radius: 0 10px 10px 0;
  background: #0f3a54;
  color: #f7f3ec;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
  box-shadow: 2px 4px 14px rgba(15, 58, 84, 0.28);
}

.sidebar-open-tab.hidden {
  display: none;
}

.sidebar-open-tab:hover,
.sidebar-open-tab:focus-visible {
  background: #164a6a;
  outline: none;
}

.sidebar-open-tab-icon {
  font-size: 1.1rem;
  line-height: 1;
}

.sidebar-open-tab-label {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  transform: rotate(180deg);
  text-transform: uppercase;
}

.app-body {
  position: relative;
}

/* Drag handles */
.panel-resizer {
  flex-shrink: 0;
  background: transparent;
  z-index: 6;
  transition: background 0.15s;
  touch-action: none;
}

.panel-resizer:hover,
.panel-resizer.is-dragging {
  background: rgba(15, 58, 84, 0.18);
}

.panel-resizer-v {
  cursor: col-resize;
  width: 8px;
  margin: 0;
  align-self: stretch;
  border-left: 1px solid var(--line);
  border-right: 1px solid var(--line);
}

.panel-resizer-h {
  cursor: row-resize;
  height: 10px;
  width: 100%;
  margin-top: auto;
  border-top: 1px solid var(--line);
  background: linear-gradient(180deg, transparent, rgba(15, 58, 84, 0.06));
  flex-shrink: 0;
}

body.is-resizing {
  cursor: col-resize;
  user-select: none;
}

body.is-resizing * {
  cursor: inherit !important;
  user-select: none !important;
}

body.is-resizing-y,
body.is-resizing-y * {
  cursor: row-resize !important;
}

.search-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.search-toggle {
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, 0.35) !important;
  background: rgba(255, 255, 255, 0.1) !important;
  flex-shrink: 0;
}

.search-toggle:hover {
  background: rgba(255, 255, 255, 0.2) !important;
}

.search-hero.is-collapsed .search-form,
.search-hero.is-collapsed .batch-presets,
.search-hero.is-collapsed .flat-file-panel,
.search-hero.is-collapsed .search-status,
.search-hero.is-collapsed .search-sub {
  display: none;
}

.search-hero.is-collapsed .search-hero-inner {
  padding: 0.45rem 1.35rem;
}

.search-hero.is-collapsed .search-hero-copy {
  margin: 0;
}

.search-expand-bar {
  flex-shrink: 0;
  width: 100%;
  border: none;
  border-bottom: 1px solid var(--line);
  background: #f4efe6;
  color: var(--accent);
  font: inherit;
  font-size: 0.85rem;
  font-weight: 650;
  padding: 0.4rem 1rem;
  cursor: pointer;
  text-align: left;
}

.search-expand-bar:hover {
  background: #ebe4d6;
}

.search-expand-bar.hidden {
  display: none;
}

/* Menu control must sit above map chrome and remain clickable */
#btn-expand-sidebar {
  position: relative;
  z-index: 45;
  pointer-events: auto;
}

#btn-expand-sidebar.btn-primary,
.sidebar-menu-btn.btn-primary {
  font-weight: 700;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset;
}

.sidebar-toggle {
  margin-left: auto;
  font-size: 1.2rem;
  line-height: 1;
  color: var(--accent) !important;
}

/* —— Cruise search hero —— */
.search-hero {
  flex-shrink: 0;
  position: relative;
  background: linear-gradient(135deg, #143a52 0%, #1a4a66 48%, #2a5f7a 100%);
  color: #f7f3ec;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 4px 20px rgba(20, 40, 60, 0.18);
  z-index: 5;
}

/* Compact CMS logo — small mark + letters in the navy search bar */
.search-hero-logo {
  position: absolute;
  top: 0.7rem;
  left: 0.85rem;
  z-index: 6;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  width: auto;
  height: auto;
  min-height: 0;
  padding: 0.28rem 0.55rem 0.28rem 0.3rem;
  border-radius: 10px;
  background: #ffffff;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.4);
  text-decoration: none;
  transition: transform 0.15s, box-shadow 0.15s;
  box-sizing: border-box;
}

.search-hero-logo:hover {
  transform: translateY(-1px);
  box-shadow: 0 5px 16px rgba(0, 0, 0, 0.26);
}

.search-hero-logo img {
  width: auto;
  height: 2rem;
  max-width: 11rem;
  object-fit: contain;
  border-radius: 4px;
  display: block;
  background: transparent;
  flex-shrink: 0;
}

.search-hero.is-collapsed .search-hero-logo {
  top: 0.35rem;
  left: 0.55rem;
  padding: 0.2rem 0.4rem;
}

.search-hero.is-collapsed .search-hero-logo img {
  height: 1.55rem;
  max-width: 9rem;
}

.search-hero-inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 1rem 1.35rem 1.15rem;
  /* Room for full platform wordmark on the left */
  padding-left: max(1.35rem, 12.5rem);
}

.search-hero-copy {
  margin-bottom: 0.85rem;
}

.search-title {
  margin: 0;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.65rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: #fff;
  line-height: 1.15;
}

.search-sub {
  margin: 0.3rem 0 0;
  font-size: 0.9rem;
  color: rgba(255, 252, 247, 0.92);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
  line-height: 1.4;
}

.mode-badge {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.18rem 0.5rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #f0e6d3;
}

.mode-badge.live {
  background: rgba(45, 160, 110, 0.25);
  border-color: rgba(120, 220, 170, 0.45);
  color: #b8f0d4;
}

.mode-badge.mock-fallback {
  background: rgba(200, 150, 40, 0.28);
  border-color: rgba(240, 200, 100, 0.4);
  color: #ffe9b0;
}

.search-form {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
  gap: 0.65rem;
  align-items: end;
}

.search-form-wide {
  grid-template-columns: repeat(3, minmax(0, 1fr)) repeat(3, minmax(0, 1fr)) auto;
}

.search-form-wide .btn-search {
  grid-column: auto;
  grid-row: span 1;
  align-self: end;
}

.batch-presets {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  margin-top: 0.75rem;
}

.batch-presets-label {
  font-size: 0.75rem;
  font-weight: 750;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(255, 252, 247, 0.92);
}

.flat-file-toggle {
  margin-left: auto;
  color: rgba(247, 243, 236, 0.88) !important;
  border-color: rgba(255, 255, 255, 0.22) !important;
}

.flat-file-toggle:hover {
  background: rgba(255, 255, 255, 0.12) !important;
}

/* —— Flat file upload (optional; collapsed by default) —— */
.flat-file-panel {
  margin-top: 0.85rem;
  padding: 0.75rem 0.85rem 0.65rem;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.flat-file-panel.hidden {
  display: none;
}

.flat-file-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.45rem 0.85rem;
  margin-bottom: 0.55rem;
}

.flat-file-hint {
  font-size: 0.78rem;
  color: rgba(247, 243, 236, 0.72);
}

.flat-file-grid {
  display: grid;
  grid-template-columns: minmax(160px, 1fr) minmax(220px, 1.4fr) minmax(180px, 1.2fr) auto;
  gap: 0.65rem;
  align-items: start;
}

.flat-ships-note {
  font-style: normal;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  opacity: 0.75;
  font-size: 0.7rem;
}

.flat-ships-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  max-height: 5.5rem;
  overflow: auto;
  padding: 0.35rem;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  min-height: 2.4rem;
}

.flat-ship-chip {
  appearance: none;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.1);
  color: #f7f3ec;
  border-radius: 999px;
  padding: 0.28rem 0.65rem;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 650;
  cursor: pointer;
}

.flat-ship-chip:hover {
  background: rgba(255, 255, 255, 0.18);
}

.flat-ship-chip.is-selected {
  background: #c9892e;
  border-color: #c9892e;
  color: #1a1208;
}

.flat-upload-field input[type="file"] {
  font-size: 0.78rem;
  color: #f7f3ec;
  max-width: 100%;
}

.flat-file-actions {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  align-self: end;
}

.flat-file-actions .btn {
  white-space: nowrap;
}

.flat-file-actions .btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

@media (max-width: 1100px) {
  .flat-file-grid {
    grid-template-columns: 1fr 1fr;
  }
  .flat-file-actions {
    flex-direction: row;
    grid-column: 1 / -1;
  }
}

@media (max-width: 640px) {
  .flat-file-grid {
    grid-template-columns: 1fr;
  }
}

.chip-row-dark .chip {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.22);
  color: #f7f3ec;
}

.chip-row-dark .chip:hover {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.4);
  color: #fff;
}

.chip-row-dark .chip.active {
  background: #c9892e;
  border-color: #c9892e;
  color: #1a1208;
}

.batch-progress {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.35rem 1rem 0.55rem;
  font-size: 0.78rem;
  color: var(--muted);
}

.batch-progress.hidden {
  display: none;
}

.batch-progress-bar {
  flex: 1;
  height: 6px;
  border-radius: 99px;
  background: #e8e0d4;
  overflow: hidden;
  max-width: 280px;
}

.batch-progress-fill {
  height: 100%;
  width: 0%;
  background: var(--accent);
  border-radius: 99px;
  transition: width 0.2s ease;
}

.search-field {
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
  min-width: 0;
}

.search-field span {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255, 252, 247, 0.95);
}

.search-field select {
  width: 100%;
  padding: 0.58rem 0.7rem;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.97);
  color: var(--ink);
  font: inherit;
  font-size: 0.88rem;
  font-weight: 500;
  cursor: pointer;
  appearance: auto;
}

.search-field select:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.22);
}

.btn-search {
  padding: 0.62rem 1.35rem;
  font-size: 0.92rem;
  white-space: nowrap;
  background: #c9892e;
  color: #1a1208;
  border-radius: 8px;
  font-weight: 700;
  height: 42px;
}

.btn-search:hover {
  background: #d9a03a;
}

.btn-search:disabled {
  opacity: 0.65;
  cursor: wait;
}

.search-status {
  margin: 0.55rem 0 0;
  min-height: 1.1em;
  font-size: 0.8rem;
  color: rgba(247, 243, 236, 0.82);
}

.search-status.error {
  color: #ffc9c9;
}

.search-status.ok {
  color: #c8f0d8;
}

/* —— Search results table (full width under hero) —— */
.results-panel {
  flex-shrink: 0;
  height: var(--results-h, 240px);
  max-height: 55vh;
  min-height: 120px;
  display: flex;
  flex-direction: column;
  background: #fffcf7;
  border-bottom: 1px solid var(--line);
  box-shadow: 0 4px 14px rgba(30, 25, 20, 0.06);
  z-index: 4;
  position: relative;
}

.results-panel.hidden {
  display: none !important;
}

.results-panel.is-collapsed {
  height: auto !important;
  min-height: 0;
  max-height: none;
}

.results-panel.is-collapsed .results-table-wrap,
.results-panel.is-collapsed #batch-progress,
.results-panel.is-collapsed #results-resizer {
  display: none !important;
}

.results-panel.is-collapsed .results-head {
  padding: 0.4rem 1rem;
}

.results-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.55rem 1rem 0.35rem;
  flex-wrap: wrap;
}

.results-head h3 {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.results-head-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.results-meta {
  font-size: 0.8rem;
  color: #2c2824;
  font-weight: 600;
}

.btn-sm {
  padding: 0.28rem 0.55rem;
  font-size: 0.78rem;
}

.results-table-wrap {
  overflow: auto;
  padding: 0 0.75rem 0.65rem;
  flex: 1;
  min-height: 0;
}

.results-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}

.results-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #ebe4d6;
  color: #1a1612;
  font-size: 0.75rem;
  font-weight: 750;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: left;
  padding: 0.55rem 0.6rem;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}

.results-table tbody tr {
  border-bottom: 1px solid #efe8dc;
  transition: background 0.12s;
  cursor: pointer;
}

.results-table tbody tr:hover {
  background: #f7f3ec;
}

.results-table tbody tr.is-active {
  background: #e7f0f6;
  box-shadow: inset 3px 0 0 var(--accent);
}

.results-table tbody tr.is-selected {
  background: #f3ebe0;
}

.results-table tbody tr.is-selected.is-active {
  background: #e0ebf3;
}

.results-table td {
  padding: 0.5rem 0.6rem;
  vertical-align: middle;
  color: #141210;
  font-size: 0.88rem;
}

.results-table .col-check {
  width: 36px;
  text-align: center;
}

.results-table .col-thumb {
  width: 120px;
}

.results-table .col-actions {
  width: 150px;
  white-space: nowrap;
}

.results-table input[type="checkbox"] {
  width: 15px;
  height: 15px;
  accent-color: var(--accent);
  cursor: pointer;
}

.map-thumb {
  width: 108px;
  height: 68px;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: #c5d9e8
    linear-gradient(135deg, #c5d9e8 0%, #e8d5b5 100%);
  object-fit: cover;
  display: block;
  box-shadow: 0 2px 6px rgba(30, 40, 50, 0.08);
}

.map-thumb.is-loading {
  opacity: 0.65;
  animation: thumb-pulse 1.1s ease-in-out infinite;
}

@keyframes thumb-pulse {
  0%,
  100% {
    opacity: 0.55;
  }
  50% {
    opacity: 0.9;
  }
}

.cell-line {
  font-size: 0.78rem;
  font-weight: 750;
  color: #0f3a54;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.cell-title {
  font-weight: 700;
  color: #141210;
  line-height: 1.3;
  font-size: 0.92rem;
}

.cell-muted {
  color: #2c2824;
  font-size: 0.84rem;
}

.cell-ports {
  max-width: 220px;
  color: #2c2824;
  font-size: 0.8rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.row-actions {
  display: flex;
  gap: 0.3rem;
  flex-wrap: wrap;
}

.row-actions .btn {
  padding: 0.28rem 0.5rem;
  font-size: 0.72rem;
}

.results-empty {
  padding: 1rem;
  font-size: 0.85rem;
  color: var(--muted);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* —— Sidebar —— */
.sidebar {
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border-right: 1px solid var(--line);
  overflow-y: auto;
  z-index: 2;
}

.brand-header {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  padding: 1.1rem 1.2rem 0.9rem;
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  background: var(--panel);
  z-index: 2;
}

.logo-mark {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--accent-soft);
  color: var(--accent);
  display: grid;
  place-items: center;
  font-size: 1.1rem;
  flex-shrink: 0;
}

.logo-mark-img {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  object-fit: contain;
  background: #fff;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(20, 40, 60, 0.15);
}

.logo-platform-img {
  width: auto;
  height: 44px;
  max-width: min(220px, 58%);
  object-fit: contain;
  object-position: left center;
  flex: 1 1 auto;
  background: transparent;
}

.brand-header {
  display: flex;
  gap: 0.55rem;
  align-items: center;
}

.brand-header-copy {
  flex: 0 1 auto;
  min-width: 0;
}

.brand-header h1 {
  margin: 0;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.45rem;
  font-weight: 700;
  color: #0f3a54;
  line-height: 1.15;
}

.tagline {
  margin: 0;
  font-size: 0.82rem;
  color: #2c2824;
  font-weight: 500;
}

.panel {
  padding: 1rem 1.2rem 1.1rem;
  border-bottom: 1px solid var(--line);
}

.panel-brand {
  background: linear-gradient(180deg, #f3eee4 0%, var(--panel) 48px);
}

.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
}

.panel h2 {
  margin: 0 0 0.75rem;
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #1a1612;
}

.panel-head h2 {
  margin: 0;
}

.brand-hint {
  margin: 0 0 0.55rem;
  font-size: 0.82rem;
  color: #2c2824;
  font-weight: 600;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
  margin-bottom: 0.65rem;
  font-size: 0.92rem;
}

.field.row {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

.field span,
.field-label {
  color: #1f1a16;
  font-weight: 650;
  font-size: 0.88rem;
}

.field em,
.soft {
  font-style: normal;
  font-weight: 700;
  color: var(--ink);
}

.soft {
  font-weight: 500;
  color: #3d3832;
  font-size: 0.75rem;
}

.field input[type="text"],
.field input[type="number"],
.field select,
.field textarea,
.save-brand-row input {
  width: 100%;
  padding: 0.48rem 0.65rem;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #fff;
  font: inherit;
  color: var(--ink);
  transition: border-color 0.15s, box-shadow 0.15s;
}

.field textarea {
  resize: vertical;
  min-height: 96px;
  font-size: 0.82rem;
  line-height: 1.4;
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
}

.field input:focus,
.field select:focus,
.field textarea:focus,
.save-brand-row input:focus {
  outline: none;
  border-color: #8eb4cc;
  box-shadow: 0 0 0 3px rgba(26, 74, 102, 0.12);
}

.field input[type="range"] {
  width: 100%;
  accent-color: var(--accent);
}

.field input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
}

.field input[type="file"] {
  font-size: 0.78rem;
}

.field-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
}

.hint {
  margin: 0.35rem 0 0;
  font-size: 0.8rem;
  color: #2c2824;
  line-height: 1.4;
  font-weight: 500;
}

.feedback {
  margin: 0.45rem 0 0.2rem;
  padding: 0.45rem 0.6rem;
  border-radius: 7px;
  font-size: 0.78rem;
  font-weight: 500;
}

.feedback-ok {
  background: #e8f5ee;
  color: var(--ok);
}

.feedback-warn {
  background: #fdf3dc;
  color: var(--warn);
}

.feedback-error {
  background: #fde8e8;
  color: var(--error);
}

/* Map title/subtitle tucked away — port list stays the focus */
.map-heading-details {
  margin: 0 0 0.55rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #faf7f1;
  overflow: hidden;
}

.map-heading-summary {
  display: flex;
  align-items: baseline;
  gap: 0.45rem;
  padding: 0.5rem 0.75rem;
  cursor: pointer;
  font-weight: 700;
  font-size: 0.84rem;
  color: var(--ink);
  list-style: none;
  user-select: none;
}

.map-heading-summary::-webkit-details-marker {
  display: none;
}

.map-heading-summary::before {
  content: "▸";
  color: var(--muted);
  font-size: 0.75rem;
  transition: transform 0.12s ease;
}

.map-heading-details[open] > .map-heading-summary::before {
  transform: rotate(90deg);
}

.map-heading-summary .soft {
  font-weight: 500;
  font-size: 0.74rem;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  flex: 1;
}

.map-heading-details[open] > :not(summary) {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

.map-heading-details[open] > :last-child {
  padding-bottom: 0.65rem;
}

/* Collapsible examples + paste — sits under the port list */
.itinerary-extras {
  margin: 0.55rem 0 0.15rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #faf7f1;
  overflow: hidden;
}

.itinerary-extras-summary {
  display: flex;
  align-items: baseline;
  gap: 0.45rem;
  padding: 0.55rem 0.75rem;
  cursor: pointer;
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--ink);
  list-style: none;
  user-select: none;
}

.itinerary-extras-summary::-webkit-details-marker {
  display: none;
}

.itinerary-extras-summary::before {
  content: "▸";
  color: var(--muted);
  font-size: 0.75rem;
  transition: transform 0.12s ease;
}

.itinerary-extras[open] > .itinerary-extras-summary::before {
  transform: rotate(90deg);
}

.itinerary-extras-summary .soft {
  font-weight: 500;
  font-size: 0.78rem;
}

.itinerary-extras[open] > :not(summary) {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

.itinerary-extras[open] > :last-child {
  padding-bottom: 0.75rem;
}

/* Examples */
.examples-block {
  margin-bottom: 0.75rem;
}

.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.35rem;
}

.chip {
  appearance: none;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
  border-radius: 999px;
  padding: 0.28rem 0.7rem;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}

.chip:hover {
  border-color: #b7c9d6;
  background: var(--accent-soft);
  color: var(--accent);
}

.chip.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

/* Corporate brand hex inputs */
.brand-hex-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.45rem;
  margin-bottom: 0.55rem;
}

.brand-palette-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
  margin: 0 0 0.55rem;
  min-height: 1.5rem;
}

.brand-palette-preview.hidden {
  display: none;
}

.brand-palette-chip {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  border: 1px solid rgba(42, 36, 28, 0.28);
  box-shadow: inset 0 0 0 1px rgba(255, 252, 247, 0.35);
  flex: 0 0 auto;
}

.brand-palette-caption {
  font-size: 0.68rem;
  font-weight: 650;
  color: #5a5248;
  margin-right: 0.15rem;
}

/* Color swatches */
.brand-section-title {
  margin: 0.35rem 0 0.2rem;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent);
}

.color-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.45rem;
  margin-bottom: 0.85rem;
}

.color-grid-map {
  grid-template-columns: repeat(2, 1fr);
  gap: 0.5rem;
}

.map-colours-actions {
  display: flex;
  justify-content: flex-end;
  margin: -0.35rem 0 0.85rem;
}

.swatch {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.28rem;
  padding: 0.45rem 0.3rem 0.4rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  font-size: 0.72rem;
  font-weight: 700;
  color: #1a1612;
  min-width: 0;
}

.swatch-lg {
  padding: 0.55rem 0.4rem 0.5rem;
  gap: 0.32rem;
}

.swatch-lg .swatch-label {
  font-size: 0.8rem;
}

.swatch-lg input[type="color"] {
  height: 48px;
  min-width: 56px;
  border-radius: 8px;
}

.swatch-label {
  color: #1a1612;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.swatch-hex {
  font-size: 0.62rem;
  font-weight: 650;
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  color: #3d3832;
  letter-spacing: 0.02em;
}

.swatch input[type="color"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  min-width: 44px;
  height: 34px;
  padding: 0;
  border: 1px solid #cfc4b4;
  border-radius: 6px;
  background: transparent;
  cursor: pointer;
  overflow: hidden;
}

.brand-assets,
.brand-corporate,
.brand-fonts {
  margin: 0.55rem 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0.35rem 0.65rem 0.55rem;
  background: #faf7f1;
}

.brand-assets > summary,
.brand-corporate > summary,
.brand-fonts > summary {
  cursor: pointer;
  font-weight: 650;
  font-size: 0.88rem;
  padding: 0.3rem 0;
  color: var(--ink);
}

.brand-assets[open],
.brand-corporate[open],
.brand-fonts[open] {
  background: #fffcf7;
}

.swatch input[type="color"]::-webkit-color-swatch-wrapper {
  padding: 2px;
}

.swatch input[type="color"]::-webkit-color-swatch {
  border: none;
  border-radius: 4px;
}

.swatch input[type="color"]::-moz-color-swatch {
  border: none;
  border-radius: 4px;
}

.swatch:hover {
  border-color: #8eb4cc;
  box-shadow: 0 0 0 2px rgba(15, 58, 84, 0.08);
}

.swatch:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(15, 58, 84, 0.15);
}

/* Brand select */
.brand-select-row {
  display: flex;
  gap: 0.35rem;
}

.brand-select-row select {
  flex: 1;
}

.save-brand-row {
  display: flex;
  gap: 0.4rem;
  margin-top: 0.35rem;
}

.save-brand-row input {
  flex: 1;
}

/* —— Journey timeline —— */
.panel-journey {
  border-top: 1px solid var(--line);
}

.voyage-glance {
  background: #f7f1e8;
  border-radius: 10px;
  padding: 0.7rem 0.75rem;
  margin-bottom: 0.75rem;
}

.voyage-glance-title {
  margin: 0 0 0.45rem;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #5a5248;
}

.voyage-glance-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.35rem;
}

.voyage-chip {
  background: #fff;
  border-radius: 8px;
  padding: 0.35rem 0.3rem;
  text-align: center;
  border: 1px solid #e6ddd0;
}

.voyage-chip-val {
  display: block;
  font-weight: 800;
  font-size: 0.95rem;
  color: var(--accent, #0f3a54);
}

.voyage-chip-label {
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #6a6258;
}

.voyage-glance-route {
  margin: 0.55rem 0 0;
  font-size: 0.78rem;
  color: #3d3832;
  font-weight: 600;
}

.journey-layout {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.journey-day-list {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  max-height: 280px;
  overflow: auto;
  padding-right: 2px;
}

.journey-day-card {
  text-align: left;
  border: 1px solid #e0d6c8;
  background: #fff;
  border-radius: 10px;
  padding: 0.55rem 0.65rem;
  cursor: pointer;
  font: inherit;
  color: inherit;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.journey-day-card:hover,
.journey-day-card.is-active {
  border-color: var(--accent, #0f3a54);
  box-shadow: 0 0 0 2px rgba(15, 58, 84, 0.12);
}

.journey-day-head {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
  margin-bottom: 0.25rem;
}

.journey-day-num {
  font-weight: 800;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--accent, #0f3a54);
}

.journey-day-date {
  font-size: 0.72rem;
  color: #6a6258;
}

.journey-badge {
  display: inline-block;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.12rem 0.4rem;
  border-radius: 999px;
  background: #f0e6d4;
  color: #3d3832;
}

.journey-badge.sea { background: #d9e6f0; }
.journey-badge.scenic { background: #e4edd8; }
.journey-badge.overnight { background: #f3e0c8; }
.journey-badge.terminal { background: #e8dff0; }

.journey-day-title {
  font-weight: 750;
  font-size: 0.92rem;
  line-height: 1.25;
}

.journey-day-title.is-scenic {
  font-style: italic;
  font-weight: 600;
  color: #4a433c;
}

.journey-day-gateway,
.journey-day-meta,
.journey-day-times {
  font-size: 0.72rem;
  color: #5a5248;
  margin-top: 0.15rem;
}

.journey-extra-events {
  margin: 0.35rem 0 0;
  padding-left: 1rem;
  font-size: 0.72rem;
  color: #5a5248;
}

.journey-detail {
  background: #fffefb;
  border: 1px solid #e6ddd0;
  border-radius: 10px;
  padding: 0.7rem 0.75rem;
}

.journey-detail h3 {
  margin: 0 0 0.35rem;
  font-size: 1rem;
}

.journey-detail h4 {
  margin: 0.55rem 0 0.25rem;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #6a6258;
}

.journey-detail ul {
  margin: 0;
  padding-left: 1.1rem;
  font-size: 0.8rem;
}

.journey-detail-why,
.journey-detail-context {
  font-size: 0.8rem;
  line-height: 1.4;
  color: #3d3832;
  margin: 0.35rem 0;
}

.journey-source-link {
  margin: 0.65rem 0 0;
  font-size: 0.74rem;
}

.journey-source-link a {
  color: var(--ocean-deep, #0b3d5c);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid var(--accent, #c9922e);
}

.journey-source-link a:hover {
  color: var(--accent, #c9922e);
}

.journey-known-for {
  font-size: 0.75rem;
  color: #5a5248;
}

.stay-builder {
  margin-top: 0.85rem;
  padding-top: 0.75rem;
  border-top: 1px dashed #e0d6c8;
}

/* Temporarily hide Mode / Virtuoso / Journey while refining sidebar UX */
.panel-business-mode,
.panel-virtuoso,
.panel-journey {
  display: none !important;
}

/* Hotel inspiration is Virtuoso-only (also toggled via [hidden] in JS) */
body:not(.mode-virtuoso) .stay-builder {
  display: none !important;
}

.mode-badge.sample {
  background: #f3e8d8;
  color: #6b4f2a;
}

.stay-builder-title {
  margin: 0 0 0.25rem;
  font-size: 0.9rem;
}

.stay-block {
  margin: 0.65rem 0;
}

.stay-block h4 {
  margin: 0 0 0.4rem;
  font-size: 0.82rem;
}

.stay-controls {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.35rem;
  margin-bottom: 0.5rem;
}

.stay-controls label {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  font-size: 0.72rem;
  font-weight: 700;
  color: #5a5248;
}

.stay-controls select {
  font: inherit;
  font-weight: 600;
  padding: 0.3rem 0.4rem;
  border-radius: 6px;
  border: 1px solid #d4cbbd;
}

.hotel-card-list {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.hotel-card {
  border: 1px solid #e6ddd0;
  border-radius: 8px;
  padding: 0.55rem 0.6rem;
  background: #fff;
}

.hotel-card h4 {
  margin: 0.35rem 0 0.15rem;
  font-size: 0.85rem;
}

.hotel-meta,
.hotel-why,
.hotel-best,
.hotel-terminal,
.hotel-amenities {
  margin: 0.2rem 0;
  font-size: 0.74rem;
  line-height: 1.35;
  color: #3d3832;
}

/* —— Virtuoso Advisors sub-brand —— */
.panel-virtuoso .vv-banner {
  background: linear-gradient(135deg, #1a1a1a, #3d3428);
  color: #f5ead2;
  border-radius: 10px;
  padding: 0.75rem 0.8rem;
  margin-bottom: 0.55rem;
}
.vv-banner-brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.vv-logo {
  max-height: 44px;
  max-width: 160px;
  width: auto;
  object-fit: contain;
  flex: 0 0 auto;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35));
}
.vv-banner-copy {
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
  min-width: 0;
}
.panel-virtuoso .vv-banner strong {
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 0.78rem;
  color: #c4a35a;
}
.panel-virtuoso .vv-banner span {
  font-size: 0.72rem;
  opacity: 0.85;
}
.vv-logo-upload {
  margin-bottom: 0.25rem;
}
.vv-list {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  max-height: 220px;
  overflow: auto;
  margin-bottom: 0.65rem;
}
.vv-card {
  text-align: left;
  border: 1px solid #e0d6c8;
  background: #fff;
  border-radius: 10px;
  padding: 0.55rem 0.65rem;
  cursor: pointer;
  font: inherit;
  color: inherit;
}
.vv-card.is-active,
.vv-card:hover {
  border-color: #c4a35a;
  box-shadow: 0 0 0 2px rgba(196, 163, 90, 0.2);
}
.vv-card-title {
  font-weight: 750;
  font-size: 0.85rem;
}
.vv-card-meta,
.vv-card-route {
  font-size: 0.72rem;
  color: #5a5248;
  margin-top: 0.15rem;
}
.vv-amenities,
.vv-hotels {
  margin: 0.65rem 0;
  padding: 0.55rem 0.6rem;
  background: #f7f1e8;
  border-radius: 8px;
}
.vv-amenities h3,
.vv-amenities h4,
.vv-hotels h4 {
  margin: 0.35rem 0;
  font-size: 0.8rem;
}
.vv-amenities ul,
.vv-core {
  margin: 0.25rem 0 0.45rem;
  padding-left: 1.1rem;
  font-size: 0.75rem;
}
.vv-import {
  margin-top: 0.5rem;
  font-size: 0.8rem;
}
.vv-import textarea {
  width: 100%;
  margin: 0.4rem 0;
  font: inherit;
  font-size: 0.72rem;
  border-radius: 6px;
  border: 1px solid #d4cbbd;
  padding: 0.4rem;
}
/* Virtuoso Advisors — warm light-brown site chrome (replaces studio blue) */
body.mode-virtuoso {
  --bg: #ebe4d8;
  --panel: #fbf7f0;
  --ink: #1c1814;
  --muted: #5a5248;
  --line: #d4c4ae;
  --accent: #8b6914;
  --accent-hover: #6f5410;
  --accent-soft: #f0e6d4;
  --ocean-deep: #5c4a32;
  --shadow: 0 10px 32px rgba(60, 45, 25, 0.12);
}

body.mode-virtuoso .panel-resizer:hover,
body.mode-virtuoso .panel-resizer.is-dragging {
  background: rgba(139, 105, 20, 0.22);
}

body.mode-virtuoso .btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fffef8;
}

body.mode-virtuoso .btn-primary:hover:not(:disabled) {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
}

body.mode-virtuoso .btn-secondary {
  border-color: var(--accent);
  color: var(--accent);
}

body.mode-virtuoso .chip.active,
body.mode-virtuoso .sailing-card.active {
  border-color: var(--accent);
  box-shadow: inset 3px 0 0 var(--accent);
}

body.mode-virtuoso .tagline::after {
  content: " · Virtuoso Advisors";
  color: #c4a35a;
}

/* —— Virtuoso Advisors sub-brand —— */
.panel-virtuoso .vv-banner {
  background: linear-gradient(135deg, #1a1a1a, #3d3428);
  color: #f5ead2;
  border-radius: 10px;
  padding: 0.65rem 0.75rem;
  margin-bottom: 0.55rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.panel-virtuoso .vv-banner strong {
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 0.78rem;
  color: #c4a35a;
}

.panel-virtuoso .vv-banner span {
  font-size: 0.72rem;
  opacity: 0.85;
}

.vv-list {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  max-height: 220px;
  overflow: auto;
  margin-bottom: 0.65rem;
}

.vv-card {
  text-align: left;
  border: 1px solid #e0d6c8;
  background: #fff;
  border-radius: 10px;
  padding: 0.55rem 0.65rem;
  cursor: pointer;
  font: inherit;
  color: inherit;
}

.vv-card.is-active,
.vv-card:hover {
  border-color: #c4a35a;
  box-shadow: 0 0 0 2px rgba(196, 163, 90, 0.2);
}

.vv-card-title {
  font-weight: 750;
  font-size: 0.85rem;
}

.vv-card-meta,
.vv-card-route {
  font-size: 0.72rem;
  color: #5a5248;
  margin-top: 0.15rem;
}

.vv-amenities,
.vv-hotels {
  margin: 0.65rem 0;
  padding: 0.55rem 0.6rem;
  background: #f7f1e8;
  border-radius: 8px;
}

.vv-amenities h3,
.vv-amenities h4,
.vv-hotels h4 {
  margin: 0.35rem 0;
  font-size: 0.8rem;
}

.vv-amenities ul,
.vv-core {
  margin: 0.25rem 0 0.45rem;
  padding-left: 1.1rem;
  font-size: 0.75rem;
}

.vv-import {
  margin-top: 0.5rem;
  font-size: 0.8rem;
}

.vv-import textarea {
  width: 100%;
  margin: 0.4rem 0;
  font: inherit;
  font-size: 0.72rem;
  border-radius: 6px;
  border: 1px solid #d4cbbd;
  padding: 0.4rem;
}

body.mode-virtuoso .brand-header h1 {
  font-size: 0.95rem;
  color: var(--accent);
}

.hotel-gallery {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 0.28rem;
  margin-bottom: 0.35rem;
  min-height: 7.5rem;
}

.hotel-gallery-item {
  margin: 0;
  border-radius: 6px;
  overflow: hidden;
  background: #ece4d8;
  position: relative;
}

.hotel-gallery-item:first-child {
  grid-row: 1 / span 2;
}

.hotel-gallery-item img {
  width: 100%;
  height: 100%;
  min-height: 3.4rem;
  object-fit: cover;
  display: block;
}

.hotel-gallery-item:first-child img {
  min-height: 7.2rem;
}

.hotel-gallery-item figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0.15rem 0.3rem;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #fff;
  background: linear-gradient(transparent, rgba(20, 16, 12, 0.72));
}

.hotel-photo-note {
  margin: 0 0 0.3rem;
  font-size: 0.65rem;
  line-height: 1.3;
  color: #7a7268;
}

.hotel-website {
  margin: 0.35rem 0 0.15rem;
}

.hotel-website a {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--ocean-deep, #0b3d5c);
  text-decoration: none;
  border-bottom: 1px solid var(--accent, #c9922e);
}

.hotel-website a:hover {
  color: var(--accent, #c9922e);
}

.brand-pdf-fonts {
  margin: 0.35rem 0 0.75rem;
  padding: 0.55rem 0.6rem;
  border: 1px solid #e6ddd0;
  border-radius: 8px;
  background: #fffefb;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  max-height: 14rem;
  overflow: auto;
}

.brand-pdf-fonts.hidden {
  display: none;
}

.brand-pdf-fonts-head {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
  justify-content: space-between;
  font-size: 0.72rem;
  font-weight: 700;
  color: #5a5248;
}

.brand-pdf-font-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.55rem;
  align-items: center;
  justify-content: space-between;
  padding: 0.35rem 0;
  border-top: 1px dashed #e6ddd0;
}

.brand-pdf-font-meta {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}

.brand-pdf-font-meta strong {
  font-size: 0.78rem;
}

.brand-pdf-font-meta span {
  font-size: 0.68rem;
  color: #6a6258;
}

.brand-pdf-font-actions {
  display: flex;
  gap: 0.25rem;
  flex-shrink: 0;
}

.brand-pdf-pack-summary {
  margin: 0;
  font-size: 0.72rem;
  color: #6a6258;
}

.brand-pdf-section-label {
  margin: 0.25rem 0 0;
  font-size: 0.68rem;
  font-weight: 750;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #5a5248;
}

.brand-pdf-swatch-row {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.brand-pdf-swatch {
  appearance: none;
  border: 1px solid #e6ddd0;
  background: #fff;
  border-radius: 8px;
  padding: 0.35rem 0.45rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  text-align: left;
  font: inherit;
}

.brand-pdf-swatch:hover {
  border-color: #c9ae8a;
  background: #fffef8;
}

.brand-pdf-swatch-chip {
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 5px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  flex-shrink: 0;
}

.brand-pdf-swatch-meta {
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
  min-width: 0;
}

.brand-pdf-swatch-meta strong {
  font-size: 0.74rem;
  color: #2a241c;
}

.brand-pdf-swatch-meta em {
  font-style: normal;
  font-size: 0.66rem;
  color: #6a6258;
}

/* Buttons */
.btn {
  appearance: none;
  border: none;
  border-radius: 8px;
  padding: 0.48rem 0.85rem;
  font: inherit;
  font-size: 0.84rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, box-shadow 0.15s;
}

.btn-primary {
  background: var(--accent);
  color: #fff;
}

.btn-primary:hover {
  background: var(--accent-hover);
}

.btn:disabled,
button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

.btn-secondary {
  background: var(--accent-soft);
  color: var(--accent);
}

.btn-secondary:hover {
  background: #d5e5f0;
}

.btn-ghost {
  background: transparent;
  color: #2c2824;
  font-weight: 650;
}

.btn-ghost:hover {
  background: #ebe4d6;
  color: #0f0e0c;
}

.canvas-toolbar .btn-ghost {
  color: #1a1612;
  border: 1px solid transparent;
}

.canvas-toolbar .btn-ghost:hover {
  border-color: var(--line);
}

.canvas-toolbar .btn-ghost.is-active {
  background: var(--accent-soft);
  color: var(--accent);
  border-color: #a8c5d8;
  font-weight: 600;
}

#map-canvas.route-editing,
#map-canvas.label-editing {
  touch-action: none;
}

#map-canvas.label-editing {
  cursor: default;
}

.btn-lg {
  flex: 1;
  padding: 0.6rem 0.75rem;
}

.btn-block {
  width: 100%;
  margin-top: 0.4rem;
}

.btn-icon {
  padding: 0.45rem 0.55rem;
  min-width: 36px;
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.btn-row.tight {
  margin-bottom: 0.35rem;
}

.export-btns {
  margin-bottom: 0.15rem;
}

.port-toolbar {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  margin: 0.15rem 0 0.35rem;
}

.port-toolbar-label {
  flex: 1;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.port-toolbar .btn-sm {
  padding: 0.22rem 0.5rem;
  font-size: 0.75rem;
}

.port-list-hint {
  margin: 0.35rem 0 0;
}

/* Port list — brochure Day + name rows */
.port-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  max-height: min(48vh, 420px);
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
}

.port-empty {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 1rem 0.85rem;
  text-align: center;
  font-size: 0.8rem;
  color: var(--muted);
  background: #faf7f1;
}

.port-empty strong {
  font-size: 0.88rem;
  color: var(--ink);
}

.port-empty em {
  font-style: normal;
  font-weight: 700;
  color: var(--accent);
}

.port-item {
  display: grid;
  grid-template-columns: 20px auto minmax(0, 1fr);
  gap: 0.45rem;
  align-items: center;
  padding: 0.55rem 0.65rem;
  background: transparent;
  border: none;
  border-bottom: 1px solid #efe8dc;
  border-radius: 0;
  cursor: pointer;
  user-select: none;
  transition: background 0.12s;
}

.port-item:last-child {
  border-bottom: none;
}

.port-item:hover,
.port-item:focus-visible {
  background: #faf7f1;
  border-color: #efe8dc;
  outline: none;
}

.port-item.is-major .name {
  font-weight: 700;
}

.port-item.dragging {
  opacity: 0.45;
  background: #f3ebe0;
}

.port-item .handle {
  color: #c4b5a2;
  font-size: 0.72rem;
  text-align: center;
  cursor: grab;
  padding: 0.15rem 0;
  touch-action: none;
  opacity: 0.7;
}

.port-item:hover .handle,
.port-item:focus-visible .handle {
  opacity: 1;
  color: #9a8770;
}

.port-item .handle:active {
  cursor: grabbing;
}

.port-item .day-pill {
  display: inline-flex;
  align-items: baseline;
  justify-content: flex-start;
  gap: 0.2rem;
  min-width: 3.1rem;
  height: auto;
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: #8a6a28;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.port-item .day-prefix {
  font-size: 0.65rem;
  font-weight: 650;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #b08a3a;
}

.port-item .info {
  min-width: 0;
}

.port-item .name {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 600;
  font-size: 1.02rem;
  line-height: 1.2;
  color: #1a1612;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.port-dialog-actions .danger {
  margin-left: auto;
  color: #a33b2b;
}

.port-dialog-actions .danger:hover {
  background: rgba(163, 59, 43, 0.08);
  color: #8a2e22;
}

.sidebar-footer {
  margin-top: auto;
  padding: 0.7rem 1.2rem;
  font-size: 0.8rem;
  color: #2c2824;
  font-weight: 550;
  border-top: 1px solid var(--line);
  background: var(--panel);
  position: sticky;
  bottom: 0;
}

/* —— Workspace —— */
.workspace {
  display: flex;
  flex-direction: column;
  min-width: 0;
  /* Critical: allow grid cell to shrink so map bottom is not clipped */
  min-height: 0;
  height: 100%;
  overflow: hidden;
  background: #e5dfd3;
}

.canvas-toolbar {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.45rem 0.85rem;
  background: rgba(255, 252, 247, 0.94);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(6px);
  flex-shrink: 0;
}

.stats {
  margin-left: auto;
  margin-right: 0.5rem;
  font-size: 0.8rem;
  color: #2c2824;
  font-weight: 600;
}

.map-stage {
  /* flex-basis 0 so stage gets remaining height, not content height */
  flex: 1 1 0;
  min-height: 0;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem;
  /* Scroll if canvas is still taller than the stage — never clip the map base */
  overflow: auto;
  background: #c5d0da;
  cursor: zoom-in;
}

#map-canvas {
  width: auto;
  height: auto;
  max-width: none;
  max-height: none;
  /* size is set entirely by JS to fit the stage */
  background: #c5d9e8;
  border-radius: 6px;
  box-shadow: var(--shadow);
  display: block;
  border: 1px solid #8aa3b5;
  flex-shrink: 0;
}

.loading-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  background: rgba(239, 233, 223, 0.72);
  backdrop-filter: blur(3px);
  z-index: 5;
  font-size: 0.9rem;
  color: var(--muted);
}

.loading-overlay.hidden {
  display: none;
}

.spinner {
  width: 36px;
  height: 36px;
  border: 3px solid #d0c8ba;
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* —— Dialog —— */
dialog {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 1.25rem 1.4rem;
  box-shadow: var(--shadow);
  background: var(--panel);
  max-width: 400px;
  width: calc(100% - 2rem);
}

dialog::backdrop {
  background: rgba(30, 25, 20, 0.4);
}

dialog h3 {
  margin: 0 0 1rem;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.35rem;
  color: var(--accent);
}

/* —— “Job done” success toast —— */
.job-done-toast {
  position: fixed;
  top: 1.15rem;
  left: 50%;
  transform: translateX(-50%) translateY(0);
  z-index: 1000;
  min-width: 140px;
  padding: 0.7rem 1.35rem;
  border-radius: 10px;
  background: #1f7a45;
  color: #ffffff;
  font-size: 0.95rem;
  font-weight: 750;
  letter-spacing: 0.02em;
  text-align: center;
  box-shadow: 0 10px 28px rgba(20, 80, 40, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.2);
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.35s ease, transform 0.35s ease;
}

.job-done-toast.hidden {
  display: none;
}

.job-done-toast.is-leaving {
  opacity: 0;
  transform: translateX(-50%) translateY(-8px);
}

/* —— Map full-size preview lightbox —— */
#map-canvas {
  cursor: zoom-in;
}

.btn-map-preview {
  position: absolute;
  right: 0.85rem;
  bottom: 0.85rem;
  z-index: 4;
  appearance: none;
  border: 1px solid rgba(15, 58, 84, 0.25);
  background: rgba(255, 252, 247, 0.95);
  color: var(--accent);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  padding: 0.45rem 0.75rem;
  border-radius: 8px;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(20, 40, 60, 0.15);
  backdrop-filter: blur(4px);
}

.btn-map-preview:hover {
  background: #fff;
  border-color: var(--accent);
}

.map-preview-dialog {
  border: none;
  border-radius: 14px;
  padding: 0;
  width: min(96vw, 1400px);
  max-width: 96vw;
  height: min(94vh, 960px);
  max-height: 94vh;
  background: #1a2834;
  color: #f7f3ec;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.45);
  overflow: hidden;
}

.map-preview-dialog[open] {
  display: flex;
  flex-direction: column;
}

.map-preview-dialog::backdrop {
  background: rgba(10, 18, 28, 0.72);
  backdrop-filter: blur(4px);
}

.map-preview-chrome {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.65rem 0.9rem;
  background: #12202c;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  flex-shrink: 0;
}

.map-preview-title {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}

.map-preview-title strong {
  font-size: 0.95rem;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.map-preview-hint {
  font-size: 0.72rem;
  color: rgba(247, 243, 236, 0.65);
}

.map-preview-actions {
  display: flex;
  gap: 0.4rem;
  flex-shrink: 0;
}

.map-preview-actions .btn-ghost {
  color: #f0e6d3 !important;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.map-preview-actions .btn-ghost:hover {
  background: rgba(255, 255, 255, 0.1) !important;
}

.map-preview-body {
  flex: 1;
  min-height: 0;
  height: calc(100% - 52px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem;
  overflow: auto;
  background:
    radial-gradient(ellipse at center, #2a3f52 0%, #1a2834 70%);
}

#map-preview-canvas {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
  background: #c5d9e8;
  display: block;
}

@media (max-width: 1200px) {
  .search-form,
  .search-form-wide {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .btn-search {
    grid-column: 1 / -1;
    height: auto;
  }
}

@media (max-width: 1100px) {
  .search-form,
  .search-form-wide {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .btn-search {
    grid-column: 1 / -1;
    height: auto;
  }
}

/* Backdrop for mobile drawer — hidden on desktop */
.sidebar-backdrop {
  display: none;
}

/* —— Tablet / mobile —— */
@media (max-width: 960px) {
  :root {
    --sidebar-w: 100%;
    --results-h: 140px;
    font-size: 15px;
  }

  #app {
    height: 100dvh;
    overflow: hidden;
  }

  .app-body {
    display: flex;
    flex-direction: column;
    position: relative;
    min-height: 0;
  }

  .app-body.sidebar-collapsed {
    display: flex;
  }

  /* Dim map while menu is open */
  .sidebar-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 28;
    border: none;
    margin: 0;
    padding: 0;
    background: rgba(20, 16, 12, 0.45);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  .sidebar-backdrop.hidden {
    display: none !important;
  }

  body.drawer-open {
    overflow: hidden;
    touch-action: none;
  }

  /* Sidebar as bottom sheet — out of document flow so map stays full-width */
  .sidebar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    z-index: 30;
    max-height: min(78dvh, 640px);
    width: 100%;
    border-right: none;
    border-top: 1px solid var(--line);
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -12px 40px rgba(20, 30, 40, 0.22);
    transform: translateY(0);
    transition: transform 0.22s ease, opacity 0.22s ease;
    padding-bottom: max(0.65rem, env(safe-area-inset-bottom, 0px));
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

  /* Grab handle affordance */
  .sidebar::before {
    content: "";
    display: block;
    width: 40px;
    height: 4px;
    border-radius: 999px;
    background: var(--line);
    margin: 0.45rem auto 0.35rem;
    flex-shrink: 0;
  }

  .app-body.sidebar-collapsed .sidebar {
    transform: translateY(110%);
    opacity: 0;
    pointer-events: none;
    width: 100%;
    max-height: min(78dvh, 640px);
  }

  #sidebar-resizer {
    display: none !important;
  }

  .workspace {
    min-height: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
  }

  .canvas-toolbar {
    flex-wrap: nowrap;
    gap: 0.35rem;
    padding: 0.45rem 0.55rem;
    padding-left: max(0.55rem, env(safe-area-inset-left, 0px));
    padding-right: max(0.55rem, env(safe-area-inset-right, 0px));
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    flex-shrink: 0;
  }

  .canvas-toolbar::-webkit-scrollbar {
    display: none;
  }

  .canvas-toolbar .btn {
    font-size: 0.8rem;
    padding: 0.45rem 0.7rem;
    min-height: 40px;
    white-space: nowrap;
    flex: 0 0 auto;
  }

  #btn-expand-sidebar {
    position: sticky;
    left: 0;
    z-index: 46;
    background: var(--panel);
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.06);
    font-weight: 700;
  }

  .stats {
    flex: 0 0 auto;
    margin: 0;
    order: 0;
    font-size: 0.7rem;
    max-width: 9rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .map-stage {
    padding: 0.35rem;
    min-height: 0;
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  #map-canvas {
    max-width: 100%;
    max-height: 100%;
    width: auto !important;
    height: auto !important;
    object-fit: contain;
  }

  .btn-map-preview {
    right: max(0.55rem, env(safe-area-inset-right, 0px));
    bottom: max(0.55rem, env(safe-area-inset-bottom, 0px));
    font-size: 0.78rem;
    padding: 0.45rem 0.7rem;
    min-height: 40px;
  }

  .search-form,
  .search-form-wide {
    grid-template-columns: 1fr 1fr;
    gap: 0.55rem;
  }

  .search-field select,
  .search-field input,
  .field input,
  .field select,
  .field textarea {
    min-height: 44px;
    font-size: 16px; /* prevents iOS zoom on focus */
  }

  .btn-search {
    grid-column: 1 / -1;
    height: 48px;
    min-height: 48px;
  }

  .search-hero-logo {
    top: max(0.4rem, env(safe-area-inset-top, 0px));
    left: max(0.45rem, env(safe-area-inset-left, 0px));
    padding: 0.22rem 0.4rem;
  }

  .search-hero-logo img {
    height: 1.55rem;
    max-width: 9.5rem;
  }

  .search-hero-inner {
    padding: 0.75rem 0.85rem 0.9rem;
    padding-left: max(0.85rem, 11rem);
  }

  .logo-platform-img {
    height: 38px;
    max-width: min(180px, 55%);
  }

  .search-title {
    font-size: 1.2rem;
  }

  .search-sub {
    font-size: 0.82rem;
  }

  .search-toggle {
    font-size: 0.72rem;
    padding: 0.35rem 0.55rem;
    min-height: 36px;
  }

  .results-panel {
    max-height: 36vh;
    min-height: 96px;
  }

  .results-head {
    padding: 0.45rem 0.65rem 0.35rem;
  }

  .results-head-actions {
    gap: 0.3rem;
    flex-wrap: wrap;
  }

  .results-table-wrap {
    padding: 0 0.45rem 0.5rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .results-table {
    min-width: 640px;
    font-size: 0.78rem;
  }

  .results-table .col-thumb {
    width: 72px;
  }

  .map-thumb {
    width: 68px;
    height: 44px;
  }

  .color-grid,
  .brand-hex-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .journey-day-list {
    max-height: 220px;
  }

  .vv-list {
    max-height: 180px;
  }

  .hotel-gallery {
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: auto !important;
  }

  .hotel-gallery-item:first-child {
    grid-row: auto !important;
  }

  .map-preview-dialog {
    width: 100vw;
    max-width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
    border-radius: 0;
  }

  .map-preview-chrome {
    flex-wrap: wrap;
  }

  .brand-header h1 {
    font-size: 1.15rem;
  }

  .panel {
    padding-left: 0.85rem;
    padding-right: 0.85rem;
  }

  .btn {
    min-height: 40px;
  }

  .chip {
    min-height: 36px;
    padding: 0.35rem 0.65rem;
  }
}

@media (max-width: 640px) {
  .search-form,
  .search-form-wide {
    grid-template-columns: 1fr;
  }

  .search-title-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
  }

  .batch-presets {
    flex-direction: column;
    align-items: flex-start;
  }

  .results-head {
    flex-direction: column;
    align-items: flex-start;
  }

  .example-chips,
  .chip-row {
    gap: 0.35rem;
  }

  .field-grid-2 {
    grid-template-columns: 1fr;
  }

  .export-btns {
    flex-direction: column;
  }

  .export-btns .btn,
  .btn-lg,
  .btn-block {
    width: 100%;
  }

  .stay-controls {
    gap: 0.45rem;
  }

  .prop-stats {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Keep primary actions visible; tuck rarer tools into scroll */
  .canvas-toolbar .btn {
    font-size: 0.76rem;
    padding: 0.4rem 0.6rem;
  }
}

@media (max-width: 400px) {
  .search-hero-inner {
    padding-left: 0.85rem;
    padding-top: 2.6rem;
  }

  .brand-header h1 {
    font-size: 1.05rem;
  }

  .sidebar {
    max-height: min(85dvh, 700px);
  }
}

/* Safe area for notched phones */
@supports (padding: max(0px)) {
  @media (max-width: 960px) {
    .canvas-toolbar {
      padding-top: max(0.45rem, env(safe-area-inset-top, 0px));
    }

    .map-preview-dialog {
      padding-bottom: env(safe-area-inset-bottom);
    }

    .search-hero {
      padding-top: env(safe-area-inset-top, 0px);
    }
  }
}

/* —— Sign-in gate —— */
.auth-gate {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  background:
    radial-gradient(ellipse at 20% 10%, rgba(15, 58, 84, 0.12), transparent 55%),
    radial-gradient(ellipse at 80% 90%, rgba(201, 146, 46, 0.14), transparent 50%),
    var(--bg);
}

.auth-gate[hidden] {
  display: none;
}

.auth-card {
  width: min(420px, 100%);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--shadow);
  padding: 1.6rem 1.5rem 1.35rem;
}

.auth-brand {
  text-align: center;
  margin-bottom: 1.1rem;
}

.auth-brand img {
  display: block;
  margin: 0 auto 0.45rem;
  height: 40px;
  width: auto;
}

.auth-tagline {
  margin: 0;
  font-size: 0.78rem;
  color: var(--muted);
}

.auth-title {
  margin: 0 0 0.25rem;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.65rem;
  font-weight: 600;
  text-align: center;
  color: var(--ink);
}

.auth-sub {
  margin: 0 0 1.1rem;
  text-align: center;
  font-size: 0.88rem;
  color: var(--muted);
}

.auth-form {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.auth-form .field {
  margin: 0;
}

.auth-submit {
  width: 100%;
  margin-top: 0.35rem;
  padding: 0.65rem 1rem;
  font-size: 0.95rem;
}

.auth-error {
  margin: 0;
  padding: 0.55rem 0.7rem;
  border-radius: 8px;
  background: #f8e8e6;
  color: var(--error);
  font-size: 0.82rem;
  font-weight: 600;
}

.auth-toggle {
  display: block;
  width: 100%;
  margin-top: 0.85rem;
  padding: 0.4rem;
  border: none;
  background: transparent;
  color: var(--accent);
  font: inherit;
  font-size: 0.84rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.auth-toggle:hover {
  color: var(--accent-hover);
}

.auth-footnote {
  margin: 0.85rem 0 0;
  text-align: center;
  font-size: 0.72rem;
  color: #7a7268;
  line-height: 1.35;
}

.account-chip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin: 0 0 0.75rem;
  padding: 0.55rem 0.65rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #f7f2ea;
}

.account-chip[hidden] {
  display: none;
}

.account-chip-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 0.1rem;
}

.account-chip-text strong {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.account-chip-text span {
  font-size: 0.72rem;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.account-chip .btn-sm {
  flex-shrink: 0;
  padding: 0.28rem 0.55rem;
  font-size: 0.72rem;
}

.account-chip.is-admin {
  border-color: #0f3a54;
  background: linear-gradient(135deg, #e8f1f7 0%, #f7f2ea 100%);
}

.account-chip.is-admin #account-chip-name {
  color: #0f3a54;
}

/* —— App mode bar (Maps | Nautical CX) —— */
.app-mode-bar {
  flex-shrink: 0;
  background: linear-gradient(180deg, #0f3a54 0%, #0a2c40 100%);
  color: #f4efe6;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.app-mode-bar-inner {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.45rem 0.9rem;
  flex-wrap: wrap;
}
.app-mode-logo img {
  display: block;
  height: 34px;
  width: auto;
  filter: brightness(1.05);
}
.app-mode-toggle {
  display: inline-flex;
  background: rgba(0, 0, 0, 0.25);
  border-radius: 999px;
  padding: 3px;
  gap: 2px;
}
.app-mode-btn {
  appearance: none;
  border: 0;
  background: transparent;
  color: #d7cfc2;
  font: inherit;
  font-weight: 600;
  font-size: 0.88rem;
  padding: 0.35rem 0.95rem;
  border-radius: 999px;
  cursor: pointer;
}
.app-mode-btn:hover {
  color: #fff;
}
.app-mode-btn.is-active {
  background: #c9922e;
  color: #141210;
}
.app-mode-tagline {
  margin: 0;
  flex: 1;
  min-width: 12rem;
  font-size: 0.82rem;
  color: rgba(244, 239, 230, 0.78);
}
.app-mode-bar .mode-badge {
  background: rgba(255, 255, 255, 0.12);
  color: #f4efe6;
  border-color: rgba(255, 255, 255, 0.2);
}

#app[data-app-mode="ncx"] [data-maps-only] {
  display: none !important;
}
#app[data-app-mode="maps"] #ncx-root {
  display: none !important;
}
#app[data-app-mode="ncx"] #ncx-root {
  display: block;
}
#app[data-app-mode="ncx"] #ncx-root[hidden] {
  display: block;
}

/* —— Nautical CX shell —— */
.ncx-shell {
  flex-shrink: 0;
  max-height: min(58vh, 560px);
  overflow: auto;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  padding: 0.75rem 1rem 1rem;
}
.ncx-hero {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.5rem 1rem;
  align-items: start;
  margin-bottom: 0.75rem;
}
.ncx-title {
  margin: 0;
  font-family: Cinzel, serif;
  font-size: 1.15rem;
  color: var(--accent);
}
.ncx-sub {
  margin: 0.25rem 0 0;
  font-size: 0.88rem;
  color: var(--muted);
}
.ncx-demo-banner {
  display: inline-block;
  margin-left: 0.35rem;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  background: #fff4d6;
  color: #8a5a00;
  font-size: 0.75rem;
  font-weight: 600;
}
.ncx-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
  justify-content: flex-end;
}
.ncx-gap-field {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.8rem;
  color: var(--muted);
}
.ncx-gap-field input {
  width: 3.2rem;
  padding: 0.25rem 0.35rem;
  border: 1px solid var(--line);
  border-radius: 6px;
  font: inherit;
}
.ncx-counts {
  grid-column: 1 / -1;
  margin: 0;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--accent);
}
.ncx-hero #ncx-status {
  grid-column: 1 / -1;
  margin: 0;
}

.ncx-uploads {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.55rem;
  margin-bottom: 0.75rem;
}
.ncx-upload-card {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.55rem 0.65rem;
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  background: #faf7f1;
  cursor: pointer;
  font-size: 0.8rem;
}
.ncx-upload-card:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.ncx-upload-label {
  font-weight: 700;
  color: var(--ink);
}
.ncx-upload-hint {
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.3;
}
.ncx-upload-card input[type="file"] {
  font-size: 0.72rem;
  max-width: 100%;
}

.ncx-inventory {
  margin-bottom: 0.75rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.35rem 0.65rem 0.55rem;
  background: #fffcf7;
}
.ncx-inventory > summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 0.9rem;
  padding: 0.25rem 0;
}
.ncx-inventory-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.5rem;
  margin-top: 0.4rem;
}
.ncx-inventory-grid h3 {
  margin: 0 0 0.3rem;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}
.ncx-list {
  max-height: 160px;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.ncx-match-title {
  margin: 0 0 0.25rem;
  font-size: 0.95rem;
}
.ncx-match-hint {
  margin: 0 0 0.55rem;
  font-size: 0.78rem;
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
}
.ncx-reels {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.55rem;
  margin-bottom: 0.65rem;
}
.ncx-reel {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #f7f2e9;
  min-height: 140px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.ncx-reel-head {
  padding: 0.35rem 0.55rem;
  font-weight: 700;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: var(--accent);
  color: #f4efe6;
}
.ncx-reel-body {
  padding: 0.4rem;
  overflow: auto;
  max-height: 220px;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  flex: 1;
}

.ncx-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 0.4rem 0.5rem;
  font-size: 0.78rem;
}
.ncx-card.is-locked {
  border-color: #c9922e;
  box-shadow: 0 0 0 2px rgba(201, 146, 46, 0.35);
}
.ncx-card.is-selected {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.ncx-card-head {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  align-items: center;
  margin-bottom: 0.2rem;
}
.ncx-card-title {
  font-size: 0.8rem;
  line-height: 1.25;
}
.ncx-card-meta,
.ncx-card-places,
.ncx-card-why {
  margin: 0.15rem 0 0;
  color: var(--muted);
  line-height: 1.3;
}
.ncx-card-why {
  color: var(--ok);
  font-style: italic;
}
.ncx-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin-top: 0.35rem;
}
.ncx-empty,
.ncx-reel-hint {
  margin: 0.25rem 0;
  font-size: 0.76rem;
  color: var(--muted);
}
.ncx-demo-tag {
  display: inline-block;
  padding: 0.05rem 0.35rem;
  border-radius: 4px;
  background: #fff4d6;
  color: #8a5a00;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.03em;
}

.ncx-light {
  display: inline-block;
  padding: 0.08rem 0.4rem;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  border: 1px solid transparent;
}
.ncx-light-green {
  background: #d9f0e2;
  color: #1f5c3a;
  border-color: #8fc9a6;
}
.ncx-light-amber {
  background: #fff0cc;
  color: #8a5a00;
  border-color: #e0c06a;
}
.ncx-light-red {
  background: #f8dede;
  color: #8b1e1e;
  border-color: #e0a0a0;
}
.ncx-light-grey {
  background: #eceae6;
  color: #5a554e;
  border-color: #cfc4b4;
}

.ncx-journey-summary {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.55rem 0.75rem;
  background: #fffcf7;
  font-size: 0.85rem;
}
.ncx-journey-summary h4 {
  margin: 0 0 0.35rem;
  font-size: 0.95rem;
}
.ncx-journey-ol {
  margin: 0 0 0.45rem;
  padding-left: 1.2rem;
}
.ncx-journey-ol li {
  margin: 0.2rem 0;
}
.ncx-warn-list {
  margin: 0 0 0.45rem;
  padding-left: 1.1rem;
  color: var(--warn);
  font-size: 0.8rem;
}
.ncx-warn {
  list-style: disc;
}
.ncx-journey-actions {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
}

@media (max-width: 1100px) {
  .ncx-uploads,
  .ncx-inventory-grid,
  .ncx-reels {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .ncx-shell {
    max-height: min(52vh, 520px);
  }
}
@media (max-width: 700px) {
  .ncx-uploads,
  .ncx-inventory-grid,
  .ncx-reels {
    grid-template-columns: 1fr;
  }
  .ncx-hero {
    grid-template-columns: 1fr;
  }
  .app-mode-tagline {
    display: none;
  }
}

/* —— toolbar18: compact search header + hidden route stats —— */
#route-stats,
.canvas-toolbar .hidden { display: none !important; }
.search-hero-inner { padding-top: 0.5rem; padding-bottom: 0.6rem; }
.search-hero-copy { margin-bottom: 0.45rem; }
.search-sub { margin-top: 0.15rem; }
.search-hero-logo { top: 0.45rem; }
@media (max-width: 960px) {
  .search-hero-inner { padding-top: 0.45rem; padding-bottom: 0.5rem; }
  .search-hero-copy { margin-bottom: 0.4rem; }
}
@media (max-width: 400px) {
  .search-hero-inner { padding-top: 2.4rem; }
}

/* —— dayplan19: logo fills the left gutter of the search header —— */
@media (min-width: 401px) {
  .search-hero:not(.is-collapsed) .search-hero-logo {
    top: 50%;
    transform: translateY(-50%);
    left: 0.85rem;
    padding: 0.35rem 0.5rem;
  }
  .search-hero:not(.is-collapsed) .search-hero-logo:hover { transform: translateY(calc(-50% - 1px)); }
  .search-hero:not(.is-collapsed) .search-hero-logo img { width: 10.25rem; max-width: 10.25rem; height: 4.1rem; object-fit: cover; }
}
@media (min-width: 401px) and (max-width: 960px) {
  .search-hero:not(.is-collapsed) .search-hero-logo img { width: 8.75rem; max-width: 8.75rem; height: 3.5rem; }
}
/* No gutter when collapsed or on phones — the top bar already shows the logo */
.search-hero.is-collapsed .search-hero-logo { display: none; }
@media (max-width: 600px) {
  .search-hero-logo { display: none; }
  .search-hero-inner { padding-left: 0.85rem; }
}
@media (max-width: 400px) {
  .search-hero-inner { padding-top: 0.45rem; }
}

/* —— sidebar20: collapsible sections with clear headings —— */
.side-section { padding-top: 0; padding-bottom: 0; }
.side-section > .side-section-head {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.7rem 0;
  margin: 0;
  user-select: none;
}
.side-section > .side-section-head::-webkit-details-marker { display: none; }
.side-section > .side-section-head h2 {
  margin: 0;
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--accent);
}
.side-section > .side-section-head::after {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-right: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(-45deg);
  transition: transform 0.15s;
  flex-shrink: 0;
  margin-right: 0.2rem;
}
.side-section[open] > .side-section-head::after { transform: rotate(45deg); }
.side-section > .side-section-head:hover h2 { color: var(--accent-hover); }
.side-section > .side-section-head:focus-visible { outline: 2px solid #0b5a82; outline-offset: 2px; border-radius: 4px; }
.side-section[open] { padding-bottom: 0.8rem; }
.side-section-desc { margin: -0.35rem 0 0.6rem; font-size: 0.8rem; color: #6b7280; line-height: 1.35; }

/* —— sidebar20: Nautical CX colour theme (teal + gold) so the mode switch is obvious —— */
.app-mode-btn.is-active { box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.85); }
#app[data-app-mode="ncx"] {
  --accent: #0e5a52;
  --accent-hover: #083f3a;
  --accent-soft: #d3ece8;
  --bg: #dde8e5;
  --panel: #f6fbfa;
  --line: #b9d0cb;
  background: var(--bg);
}
#app[data-app-mode="ncx"] .app-mode-bar {
  background: linear-gradient(180deg, #0e5a52 0%, #073a35 100%);
  border-bottom: 3px solid #d4a73a;
}
#app[data-app-mode="ncx"] .app-mode-btn.is-active { background: #d4a73a; color: #082c29; }
#app[data-app-mode="ncx"] .sidebar,
#app[data-app-mode="ncx"] .ncx-shell { background: var(--panel); }
#app[data-app-mode="ncx"] .panel-brand { background: var(--panel); }
#app[data-app-mode="ncx"] .btn-primary { background: var(--accent); border-color: var(--accent); }
#app[data-app-mode="ncx"] .btn-primary:hover:not(:disabled) { background: var(--accent-hover); border-color: var(--accent-hover); }
#app[data-app-mode="ncx"] .canvas-toolbar { background: #eef6f4; border-color: var(--line); }

/* sidebar21: sub-heading inside merged Route & port names section */
.side-section .side-subhead { margin: 0.9rem 0 0.45rem; padding-top: 0.7rem; border-top: 1px solid var(--line); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); }

/* ncxflights22: Nautical CX-only controls */
#app:not([data-app-mode="ncx"]) [data-ncx-only] { display: none !important; }
.flights-au-row { margin-top: 0.6rem; }

/* sidebar22: Map style colours as one plain list (label left, swatch right) */
.color-grid.color-list { display: flex; flex-direction: column; gap: 0; }
.color-list .swatch { display: grid; grid-template-columns: 1fr auto 2.2rem; align-items: center; gap: 0.5rem; padding: 0.3rem 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: none; min-height: 0; }
.color-list .swatch:last-child { border-bottom: 0; }
.color-list .swatch .swatch-label { order: 1; text-align: left; font-weight: 600; font-size: 0.88rem; }
.color-list .swatch .swatch-hex { order: 2; font-size: 0.75rem; color: var(--muted); font-family: ui-monospace, monospace; }
.color-list .swatch input[type="color"] { order: 3; width: 2.2rem; height: 1.6rem; padding: 0; border: 1px solid var(--line); border-radius: 6px; background: none; cursor: pointer; }
.save-brand-row .btn { white-space: nowrap; }

/* import23: Import sailings button beside Search */
.search-form-wide { grid-template-columns: repeat(3, minmax(0, 1fr)) repeat(3, minmax(0, 1fr)) auto auto; }
.btn-import-sailings { height: 42px; padding: 0.62rem 1.1rem; font-size: 0.92rem; font-weight: 700; border-radius: 8px; white-space: nowrap; align-self: end; background: rgba(255,255,255,0.14) !important; color: #fff !important; border: 1px solid rgba(255,255,255,0.45) !important; }
.btn-import-sailings:hover, .btn-import-sailings.is-active { background: rgba(255,255,255,0.26) !important; }
.search-sub:empty { display: none; }
.search-sub:not(:has(:not(#api-mode-badge))) { margin-top: 0.15rem; }
.brand-header-copy:empty { flex: 1; }
@media (max-width: 1200px) {
  .search-form-wide { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .btn-import-sailings { grid-column: 1 / -1; height: auto; }
}
@media (max-width: 1100px) {
  .search-form-wide { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
  .btn-import-sailings { height: 48px; min-height: 48px; }
}
@media (max-width: 640px) {
  .search-form-wide { grid-template-columns: 1fr; }
}

/* —— ncxui25: compact Nautical CX panel —— */
.ncx-shell { max-height: min(46vh, 430px); padding: 0.4rem 0.75rem 0.5rem; display: flex; flex-direction: column; overflow: visible; }
#app[data-app-mode="ncx"] #ncx-root:not([hidden]), #app[data-app-mode="ncx"] #ncx-root { display: flex; }
.ncx-bar { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; position: relative; }
.ncx-bar .ncx-title { margin: 0; font-size: 1rem; white-space: nowrap; }
.ncx-collapse { border: 0; background: none; cursor: pointer; font-size: 0.95rem; padding: 0 0.15rem; color: var(--accent); }
.ncx-uploads { display: flex; gap: 0.3rem; flex-wrap: wrap; margin: 0; grid-template-columns: none !important; }
.ncx-up { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.18rem 0.55rem; border: 1px solid var(--line); border-radius: 999px; background: #fff; font-size: 0.76rem; font-weight: 600; cursor: pointer; }
.ncx-up:hover { border-color: var(--accent); }
.ncx-up b { background: var(--accent-soft); color: var(--accent); border-radius: 999px; padding: 0 0.35rem; font-size: 0.7rem; }
.ncx-up span { color: var(--muted); }
.ncx-up input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.ncx-legend { display: inline-flex; gap: 0.15rem; }
.ncx-legend .ncx-light { padding: 0 0.3rem; font-size: 0.62rem; cursor: help; }
.ncx-status { margin: 0 0 0 auto; font-size: 0.74rem; min-height: 0; max-width: 40ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ncx-status:empty { display: none; }
.ncx-more { margin-left: auto; position: relative; }
.ncx-status:not(:empty) + .ncx-more { margin-left: 0; }
.ncx-more > summary { list-style: none; cursor: pointer; padding: 0 0.45rem; border-radius: 6px; font-weight: 700; color: var(--muted); }
.ncx-more > summary::-webkit-details-marker { display: none; }
.ncx-more[open] > summary { background: var(--accent-soft); }
.ncx-more-menu { position: absolute; right: 0; top: 1.6rem; z-index: 30; background: #fff; border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 6px 18px rgba(0,0,0,.12); padding: 0.35rem; display: flex; flex-direction: column; gap: 0.2rem; min-width: 190px; }
.ncx-more-menu .btn { justify-content: flex-start; }
.ncx-more-menu .ncx-gap-field { display: flex; align-items: center; justify-content: space-between; gap: 0.4rem; font-size: 0.78rem; padding: 0.15rem 0.5rem; }
.ncx-more-menu .ncx-gap-field input { width: 3.2rem; }
.ncx-body { min-height: 0; flex: 1; margin-top: 0.35rem; overflow: hidden; display: flex; }
.ncx-shell.is-collapsed .ncx-body { display: none; }
.ncx-reels { flex: 1; margin: 0; gap: 0.4rem; min-height: 0; }
.ncx-reel { min-height: 0; }
.ncx-reel-head { padding: 0.2rem 0.5rem; font-size: 0.7rem; }
.ncx-reel-body { max-height: 260px; padding: 0.3rem; gap: 0.3rem; }
.ncx-card { padding: 0.3rem 0.4rem; font-size: 0.74rem; transition: opacity .15s; }
.ncx-card.is-dim { opacity: 0.45; }
.ncx-card.is-fit { border-color: #8fc9a6; }
.ncx-card.is-selected { border-color: var(--accent); background: var(--accent-soft); opacity: 1; }
.ncx-card-head { flex-wrap: nowrap; margin: 0 0 0.15rem; }
.ncx-card-head .ncx-light { margin-left: auto; flex-shrink: 0; font-size: 0.6rem; padding: 0 0.3rem; }
.ncx-card-title { font-size: 0.78rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.ncx-pick { display: inline-flex; cursor: pointer; }
.ncx-pick input { width: 15px; height: 15px; margin: 0; accent-color: var(--accent); cursor: pointer; }
.ncx-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(58px, 1fr)); gap: 0.1rem 0.4rem; margin: 0; }
.ncx-fields div { min-width: 0; }
.ncx-fields dt { font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
.ncx-fields dd { margin: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ncx-card-foot { display: flex; align-items: center; gap: 0.3rem; margin-top: 0.15rem; min-height: 1rem; }
.ncx-card-foot .ncx-card-why { margin: 0; font-style: normal; font-weight: 700; font-size: 0.66rem; cursor: help; }
.ncx-demo-tag { font-size: 0.56rem; padding: 0 0.25rem; }
.ncx-card-tools { margin-left: auto; display: inline-flex; gap: 0.15rem; }
.ncx-icon-btn { border: 1px solid transparent; background: none; border-radius: 5px; font-size: 0.68rem; padding: 0 0.3rem; color: var(--muted); cursor: pointer; }
.ncx-icon-btn:hover:not(:disabled) { border-color: var(--line); color: var(--accent); }
.ncx-icon-btn.is-on { color: #8a5a00; background: #fff0cc; }
.ncx-icon-btn:disabled { opacity: 0.4; cursor: default; }
.ncx-empty { font-size: 0.72rem; margin: 0.1rem 0.2rem; }
.ncx-package { display: flex; align-items: center; gap: 0.45rem; margin-top: 0.35rem; font-size: 0.76rem; min-height: 1.6rem; }
.ncx-package.has-items { border: 1px solid var(--accent); border-radius: 8px; background: #fffcf7; padding: 0.25rem 0.5rem; }
.ncx-package-hint { color: var(--muted); font-size: 0.72rem; }
.ncx-package-title { white-space: nowrap; font-size: 0.78rem; }
.ncx-pkg-items { display: flex; align-items: center; gap: 0.25rem; flex: 1; overflow-x: auto; white-space: nowrap; scrollbar-width: thin; }
.ncx-pkg-item { display: inline-flex; align-items: center; gap: 0.25rem; background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 0.05rem 0.2rem 0.05rem 0.45rem; }
.ncx-pkg-item.is-off { opacity: 0.5; text-decoration: line-through; }
.ncx-pkg-item .ncx-light { width: 8px; height: 8px; padding: 0; }
.ncx-pkg-x { border: 0; background: none; cursor: pointer; color: var(--muted); font-size: 0.85rem; line-height: 1; padding: 0 0.15rem; }
.ncx-pkg-arrow { color: var(--muted); }
.ncx-package .ncx-warn { color: var(--warn); cursor: help; list-style: none; font-weight: 700; white-space: nowrap; }
.ncx-shell.is-collapsed .ncx-package:not(.has-items) { display: none; }
@media (max-width: 1100px) {
  .ncx-reels { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .ncx-shell { max-height: 52vh; }
  .ncx-legend { display: none; }
  .ncx-reels { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; grid-template-columns: none; }
  .ncx-reel { flex: 0 0 78%; scroll-snap-align: start; }
  .ncx-reel-body { max-height: 32vh; }
  .ncx-package { flex-wrap: wrap; }
  .ncx-pkg-items { flex-basis: 100%; order: 3; }
}
/* ncxui25: per-type accents */
.ncx-t-ocean { --ncx-t: var(--ncx-c-ocean, #1f5f8b); }
.ncx-t-river { --ncx-t: var(--ncx-c-river, #3f8a6c); }
.ncx-t-land { --ncx-t: var(--ncx-c-land, #b5833a); }
.ncx-t-hotel { --ncx-t: var(--ncx-c-hotel, #8c4f5f); }
.ncx-t-custom { --ncx-t: #9a7b2f; }
.ncx-reel[class*="ncx-t-"] .ncx-reel-head { background: var(--ncx-t); }
.ncx-reel[class*="ncx-t-"] .ncx-card { border-left: 3px solid var(--ncx-t); }
.ncx-reel[class*="ncx-t-"] .ncx-card.is-selected { border-color: var(--ncx-t); border-left-width: 3px; background: color-mix(in srgb, var(--ncx-t) 9%, #fff); }
.ncx-reel[class*="ncx-t-"] .ncx-pick input { accent-color: var(--ncx-t); }
.ncx-pkg-item[class*="ncx-t-"] { border-left: 3px solid var(--ncx-t); }
.ncx-pkg-arrow { font-size: 0.68rem; white-space: nowrap; }
.ncx-add-custom { border: 1px dashed var(--line); white-space: nowrap; padding: 0.1rem 0.45rem; font-weight: 600; }
.ncx-package:not(.has-items) .ncx-add-custom { margin-left: auto; }
.ncx-custom-form { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem; margin-top: 0.3rem; padding: 0.3rem 0.45rem; border: 1px solid #d8c48f; border-left: 3px solid #9a7b2f; border-radius: 8px; background: #fffaf0; font-size: 0.76rem; }
.ncx-custom-form[hidden] { display: none; }
.ncx-custom-form input, .ncx-custom-form select { font: inherit; padding: 0.15rem 0.35rem; border: 1px solid var(--line); border-radius: 5px; min-width: 0; }
.ncx-custom-form #ncx-c-title { flex: 1 1 140px; }
.ncx-custom-form #ncx-c-from, .ncx-custom-form #ncx-c-to { flex: 1 1 100px; }
.ncx-c-nights { color: var(--muted); font-weight: 700; min-width: 2rem; }

/* ncxmap27: package map viewer + colour pickers */
.ncx-pm { position: fixed; inset: 0; z-index: 1000; background: rgba(15, 30, 32, 0.55); display: flex; align-items: center; justify-content: center; padding: 1.2rem; }
.ncx-pm[hidden] { display: none; }
.ncx-pm-box { background: #fff; border-radius: 10px; box-shadow: 0 12px 40px rgba(0,0,0,.3); width: min(1600px, 100%); max-height: 100%; display: flex; flex-direction: column; overflow: hidden; }
.ncx-pm-bar { display: flex; gap: 0.4rem; align-items: center; padding: 0.4rem 0.6rem; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.ncx-pm-bar input { font: inherit; font-size: 0.8rem; padding: 0.2rem 0.4rem; border: 1px solid var(--line); border-radius: 5px; min-width: 0; }
.ncx-pm-title { flex: 2 1 220px; font-weight: 700; }
.ncx-pm-sub { flex: 1.5 1 160px; }
.ncx-pm-stage { overflow: auto; min-height: 0; }
.ncx-pm-stage canvas { display: block; width: 100%; height: auto; }
.ncx-colours { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.25rem 0.4rem; margin: 0.2rem 0 0.6rem; font-size: 0.76rem; }
.ncx-colours-head { grid-column: 1 / -1; font-weight: 700; display: flex; align-items: center; justify-content: space-between; }
.ncx-colours label { display: flex; align-items: center; gap: 0.3rem; cursor: pointer; }
.ncx-colours input[type="color"] { width: 22px; height: 22px; padding: 0; border: 1px solid var(--line); border-radius: 5px; background: none; cursor: pointer; }
.ncx-c-incl { display: inline-flex; align-items: center; gap: 0.2rem; font-weight: 600; }
.ncx-c-incl[hidden] { display: none; }
.ncx-pkg-incl { border: 0; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-size: 0.62rem; font-weight: 700; padding: 0 0.35rem; margin-left: 0.25rem; cursor: pointer; }
.ncx-pkg-incl.is-sep { background: #eceae6; color: #6b6f72; }
.ncx-t-custom { --ncx-t: var(--ncx-c-flight, #2f3b44); }
/* ncxfit30: best fit, icons, stale build badge */
.ncx-card.is-best { border-color: #c9922e; box-shadow: 0 0 0 1px rgba(201,146,46,.45); opacity: 1; }
.ncx-card-best { background: #fff0cc; color: #7a5200; border-radius: 999px; padding: 0 0.4rem; font-size: 0.64rem; font-weight: 700; cursor: help; white-space: nowrap; }
.ncx-pick input { width: 18px; height: 18px; }
.ncx-fields { grid-template-columns: repeat(auto-fit, minmax(52px, 1fr)); }
.ncx-pkg-ico { width: 15px; height: 15px; flex-shrink: 0; }
.ncx-pkg-item { gap: 0.3rem; }
.ncx-head-ico { width: 13px; height: 13px; vertical-align: -2px; margin-right: 0.3rem; }
.mode-badge.is-stale { background: #c0392b !important; color: #fff !important; border-color: #fff !important; cursor: help; }
.ncx-card-why { font-style: normal; font-weight: 700; font-size: 0.64rem; color: var(--ok); white-space: nowrap; cursor: help; }
.ncx-card-why.is-far, .ncx-card-best.is-far { box-shadow: inset 0 -2px 0 #d98b2b; }
.ncx-pkg-stats { font-weight: 600; color: var(--muted); font-size: 0.7rem; margin-left: 0.2rem; }
.ncx-pkg-arrow.is-far { color: #b5651d; font-weight: 700; }
.ncx-card-co { margin: -0.1rem 0 0.15rem 1.45rem; font-size: 0.66rem; color: var(--muted); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ncx-card-dates { margin: 0 0 0.15rem; font-size: 0.7rem; color: var(--ink, #2a241c); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ncx-card-dates b { font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); font-weight: 700; }
.ncx-clear-sel { white-space: nowrap; padding: 0.1rem 0.4rem; }

/* landfix31: What fits — visible reason line, tap for breakdown; suggestions */
.ncx-reason { margin: 0.2rem 0 0; font-size: 0.66rem; line-height: 1.3; color: #3c4a52; }
.ncx-reason > summary { cursor: pointer; list-style: none; }
.ncx-reason > summary::-webkit-details-marker { display: none; }
.ncx-reason[open] > summary { font-weight: 600; }
.ncx-reason p { margin: 0.2rem 0 0; color: #5b6870; }
.ncx-reason.is-no { color: #8a3b2b; }
.ncx-card.is-dim .ncx-reason { opacity: 1; }
.ncx-card-no { background: #f6e2dc; color: #8a3b2b; border-radius: 999px; padding: 0 0.4rem; font-size: 0.64rem; font-weight: 700; white-space: nowrap; }
.ncx-suggest-panel { position: fixed; z-index: 60; left: 50%; top: 12vh; transform: translateX(-50%); width: min(920px, calc(100vw - 1.2rem)); max-height: 72vh; overflow: auto; box-shadow: 0 12px 40px rgba(0,0,0,.25); padding: 0.5rem 0.7rem; background: #fffdf7; border: 1px solid #e3d8bf; border-radius: 8px; font-size: 0.78rem; }
.ncx-suggest-head { display: flex; gap: 0.4rem; align-items: center; margin-bottom: 0.3rem; }
.ncx-suggest-head button { margin-left: auto; }
.ncx-chain { border-top: 1px solid #eee4cf; padding: 0.35rem 0; }
.ncx-chain header { display: flex; flex-wrap: wrap; gap: 0.3rem 0.6rem; align-items: center; }
.ncx-chain-stats { color: #6b5b2b; font-weight: 600; }
.ncx-chain header .btn { margin-left: auto; }
.ncx-chain ol { margin: 0.25rem 0 0 1.1rem; padding: 0; }
.ncx-chain li { margin: 0.1rem 0; }

/* itin32: Your itinerary panel (expanded package bar) */
.ncx-package.has-items { display: block; padding: 0.35rem 0.55rem; }
.ncx-itin-head, .ncx-itin-foot { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.ncx-itin-head .ncx-package-title { margin-right: auto; }
.ncx-itin { list-style: none; margin: 0.25rem 0; padding: 0; max-height: 11.5rem; overflow-y: auto; scrollbar-width: thin; }
.ncx-itin.is-enter { animation: ncxItinIn 0.22s ease-out; }
.ncx-itin-leg { display: flex; align-items: center; gap: 0.35rem; padding: 0.12rem 0.25rem 0.12rem 0.4rem; border-left: 3px solid var(--ncx-t); background: color-mix(in srgb, var(--ncx-t) 6%, #fff); border-radius: 4px; font-size: 0.76rem; line-height: 1.3; }
.ncx-itin-leg.is-new { animation: ncxItinIn 0.25s ease-out; }
.ncx-itin-txt { flex: 1; min-width: 0; }
.ncx-itin-leg .ncx-pkg-x { margin-left: auto; font-size: 0.75rem; }
.ncx-itin-leg .ncx-pkg-x:hover { color: #b42318; }
.ncx-itin-gap { color: #8a8f93; font-size: 0.68rem; padding: 0.05rem 0 0.05rem 1.55rem; position: relative; }
.ncx-itin-gap::before { content: ""; position: absolute; left: 0.72rem; top: 0; bottom: 0; border-left: 1px dashed #c4c7ca; }
.ncx-itin-gap.is-warn { color: #b5651d; }
.ncx-itin-gap.is-bad { color: #b42318; font-weight: 700; }
.ncx-itin-foot { border-top: 1px solid var(--line); padding-top: 0.25rem; font-size: 0.74rem; }
.ncx-itin-total { margin-right: auto; color: var(--muted); }
.ncx-itin-total b { color: inherit; color: #333; }
@keyframes ncxItinIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .ncx-itin.is-enter, .ncx-itin-leg.is-new { animation: none; } }
@media (max-width: 760px) {
  .ncx-itin { max-height: 9rem; }
  .ncx-itin-leg { font-size: 0.72rem; align-items: flex-start; }
  .ncx-itin-head .ncx-icon-btn { font-size: 0.7rem; }
}

/* pkgfix33: compact product cards — tap body / chevron to expand */
.ncx-card { cursor: pointer; }
.ncx-card-head { display: flex; align-items: center; gap: 0.3rem; }
.ncx-card-ico { flex: 0 0 auto; width: 14px; height: 14px; }
.ncx-card-head .ncx-card-title { flex: 1 1 auto; }
.ncx-card-head .ncx-card-best, .ncx-card-head .ncx-card-why, .ncx-card-head .ncx-card-no { flex: 0 0 auto; margin: 0; }
.ncx-card-chev { flex: 0 0 auto; border: 0; background: none; color: var(--muted); font-size: 0.8rem; line-height: 1; padding: 0.15rem 0.2rem; cursor: pointer; border-radius: 4px; min-width: 1.4rem; min-height: 1.4rem; }
.ncx-card-chev:hover, .ncx-card-chev:focus-visible { background: rgba(0,0,0,.06); color: var(--ink, #2a241c); }
.ncx-card-sub { margin: 0 0 0 1.45rem; font-size: 0.68rem; color: var(--muted); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ncx-card-reason-short { margin: 0.1rem 0 0 1.45rem; font-size: 0.64rem; color: #8a3b2b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ncx-card.is-dim .ncx-card-reason-short { opacity: 1; }
.ncx-card-more { margin-top: 0.3rem; padding-top: 0.3rem; border-top: 1px dashed rgba(0,0,0,.12); cursor: auto; }
.ncx-card-more .ncx-card-foot .ncx-light { margin-left: 0; }
.ncx-card.is-open { opacity: 1; }
@media (max-width: 600px) {
  .ncx-card-chev { min-width: 1.9rem; min-height: 1.9rem; font-size: 0.95rem; }
  .ncx-card-sub, .ncx-card-reason-short { margin-left: 1.6rem; }
}

/* ---------- build34: N-CX filter, back-to-back, connection timing ---------- */
.ncx-filter { display: flex; align-items: center; gap: 0.5rem; padding: 0.25rem 0.5rem 0.35rem; min-width: 0; }
.ncx-f-year { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.72rem; color: #5b6670; flex: none; }
.ncx-f-year select { font: inherit; font-size: 0.74rem; padding: 0.12rem 0.3rem; border: 1px solid #d6d2c8; border-radius: 6px; background: #fff; }
.ncx-f-months { display: flex; gap: 0.25rem; overflow-x: auto; scrollbar-width: thin; min-width: 0; flex: 1 1 auto; -webkit-overflow-scrolling: touch; padding-bottom: 2px; }
.ncx-f-chip { flex: none; font: inherit; font-size: 0.7rem; line-height: 1; padding: 0.22rem 0.42rem; border: 1px solid #d6d2c8; border-radius: 999px; background: #fff; color: #2f3a42; cursor: pointer; }
.ncx-f-chip sup { font-size: 0.56rem; margin-left: 0.15rem; color: #7d8790; vertical-align: super; }
.ncx-f-chip.is-on { background: #0f4c45; border-color: #0f4c45; color: #fff; }
.ncx-f-chip.is-on sup { color: #d9efe9; }
.ncx-f-chip.is-zero { opacity: 0.42; }
.ncx-f-chip.ncx-f-clear-chip { margin-left: 0.35rem; border-color: #0f4c45; color: #0f4c45; font-weight: 600; }
.ncx-f-chip.ncx-f-clear-chip:hover:not(:disabled) { background: #eef5f3; }
.ncx-f-chip.ncx-f-clear-chip:disabled { border-color: #d6d2c8; color: #9aa3aa; font-weight: 500; cursor: default; opacity: 0.6; }
.ncx-f-clear { flex: none; font: inherit; font-size: 0.7rem; background: none; border: 0; color: #0f4c45; text-decoration: underline; cursor: pointer; padding: 0 0.2rem; }
.ncx-card-filtered { margin: 0.05rem 0 0; font-size: 0.62rem; color: #8a7a52; font-style: italic; }
.ncx-b2b { display: inline-flex; align-items: center; flex: none; font-size: 0.6rem; font-weight: 700; padding: 0.06rem 0.32rem; border-radius: 999px; background: #e3f0fb; color: #1d5d8f; border: 1px solid #b9d6ee; white-space: nowrap; }
.ncx-card-reason-short.is-b2b, .ncx-reason.is-b2b { color: #1d5d8f; }
.ncx-tmark { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 1.05rem; height: 1.05rem; border-radius: 50%; background: #c0392b; color: #fff; font-weight: 800; font-size: 0.68rem; line-height: 1; }
.ncx-card-reason-short.is-tight, .ncx-card-reason-short.is-impossible { color: #b03a2e; }
.ncx-timing { margin: 0.3rem 0; font-size: 0.7rem; color: #8e2a20; background: #fdecea; border-radius: 6px; padding: 0.3rem 0.4rem; }
.ncx-itin-gap.is-tight { color: #b03a2e; }
.ncx-itin-gap.is-b2b { color: #1d5d8f; }
.ncx-times { border: 1px solid #e6e1d6; border-radius: 6px; padding: 0.25rem 0.4rem 0.35rem; margin: 0.35rem 0; display: flex; flex-wrap: wrap; gap: 0.3rem 0.5rem; }
.ncx-times legend { font-size: 0.62rem; color: #7d8790; padding: 0 0.2rem; }
.ncx-time { display: inline-flex; flex-direction: column; font-size: 0.6rem; color: #5b6670; }
.ncx-time input { font: inherit; font-size: 0.72rem; width: 5.6rem; padding: 0.1rem 0.2rem; border: 1px solid #d6d2c8; border-radius: 4px; }
.ncx-source { margin: 0.25rem 0 0; font-size: 0.66rem; color: #7d8790; }
.ncx-source a { color: #0f4c45; font-weight: 600; }
.ncx-demo-tag { display: none !important; }
@media (max-width: 520px) {
  .ncx-filter { padding: 0.2rem 0.35rem; gap: 0.35rem; }
  .ncx-f-year span { display: none; }
}
.ncx-body { flex-direction: column; }
.ncx-body > .ncx-filter { flex: none; }
.ncx-body > .ncx-reels { flex: 1 1 auto; min-height: 0; }
.ncx-card-head .ncx-card-title { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: break-word; }
.ncx-card-sub { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
/* build34: Branding panel */
.app-brand-btn { display: inline-flex; align-items: center; gap: 0.3rem; }
.branding-panel { position: fixed; inset: 56px 0 auto 0; z-index: 60; display: flex; justify-content: center; padding: 0 0.75rem; pointer-events: none; }
.branding-panel[hidden] { display: none; }
.branding-box { pointer-events: auto; width: min(920px, 100%); max-height: calc(100vh - 72px); overflow: auto; background: #fffefb; border: 1px solid #e0d9cc; border-radius: 10px; box-shadow: 0 18px 50px rgba(0,0,0,.18); padding: 0.8rem 1rem 1rem; }
.branding-head { display: flex; align-items: baseline; gap: 0.75rem; flex-wrap: wrap; border-bottom: 1px solid #eee6d8; padding-bottom: 0.5rem; margin-bottom: 0.6rem; }
.branding-head h2 { margin: 0; font-size: 1.05rem; color: var(--brand, #0f4c45); }
.branding-head .hint { flex: 1 1 260px; margin: 0; }
.branding-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.branding-col .account-chip { margin: 0 0 0.6rem; }
.branding-preview { position: relative; display: flex; align-items: center; gap: 0.5rem; margin-top: 0.4rem; height: 34px; border-radius: 6px; background: var(--brand, #0f4c45); color: #fff; padding: 0 0.6rem; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.05em; overflow: hidden; }
.branding-preview img { height: 24px; background: #fff; border-radius: 3px; padding: 2px; order: 2; margin-left: auto; }
.linklike { background: none; border: 0; padding: 0; color: inherit; text-decoration: underline; cursor: pointer; font: inherit; }
@media (max-width: 640px) { .branding-grid { grid-template-columns: 1fr; } .branding-panel { inset: 48px 0 auto 0; padding: 0 0.35rem; } }
/* build34: the brand colour drives the top bar in both modes */
.app-mode-bar, #app[data-app-mode="ncx"] .app-mode-bar { background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(0,0,0,0.14) 100%), var(--brand, #0f4f4c); }

/* ---------- build37: departures, grades, prices ---------- */
.ncx-card-price { margin: 0.05rem 0 0 1.45rem; font-size: 0.68rem; display: flex; flex-wrap: wrap; gap: 0.25rem 0.4rem; align-items: baseline; color: var(--muted); }
.ncx-price b { color: #123b38; font-weight: 800; }
.ncx-price.is-none { color: #9a948a; font-style: italic; }
.ncx-cur { display: inline-block; padding: 0 0.25rem; border-radius: 3px; background: #e7eef8; color: #2a4f86; font-size: 0.6rem; font-weight: 800; letter-spacing: .03em; }
.ncx-ind { display: inline-block; padding: 0 0.25rem; border-radius: 3px; background: #efe9fb; color: #5b3d9a; font-size: 0.6rem; font-weight: 700; }
.ncx-stale { display: inline-block; padding: 0 0.3rem; border-radius: 3px; background: #fff1d6; color: #8a5a00; border: 1px solid #f0c36b; font-size: 0.6rem; font-weight: 700; }
.ncx-card-deps { padding: 0 0.3rem; border-radius: 8px; background: #eef3f2; color: #355; font-size: 0.6rem; font-weight: 700; }
.ncx-card-chose { color: #0b6b4f; font-size: 0.62rem; font-weight: 700; }
.ncx-card-grade { color: #123b38; font-weight: 700; }
.ncx-deps { width: 100%; border-collapse: collapse; margin: 0.25rem 0; font-size: 0.66rem; }
.ncx-deps th { text-align: left; font-weight: 700; color: var(--muted); font-size: 0.6rem; text-transform: uppercase; letter-spacing: .03em; padding: 0 0.2rem 0.15rem; }
.ncx-deps td { padding: 0.15rem 0.2rem; border-top: 1px solid rgba(0,0,0,.06); vertical-align: middle; }
.ncx-deps td:first-child { width: 1.1rem; }
.ncx-deps input[type="radio"] { margin: 0; }
.ncx-deps tr[data-dep] { cursor: pointer; }
.ncx-deps tr[data-dep]:hover td { background: #f5f8f7; }
.ncx-deps tr.is-on td { background: #e9f4f1; font-weight: 700; }
.ncx-deps .ncx-dep-fit { color: #0b6b4f; font-weight: 700; white-space: nowrap; }
.ncx-avail { display: inline-block; padding: 0 0.3rem; border-radius: 8px; font-size: 0.6rem; font-weight: 700; white-space: nowrap; }
.ncx-avail.is-ok { background: #dff3e6; color: #17663a; } .ncx-avail.is-lim { background: #fff1d6; color: #8a5a00; }
.ncx-avail.is-wait { background: #ffe3d6; color: #9a3b00; } .ncx-avail.is-sold { background: #f6dada; color: #8f1f1f; }
.ncx-avail.is-unk { background: #ecebe8; color: #6b665d; }
.ncx-grades { margin: 0.2rem 0 0.3rem; display: grid; gap: 0.15rem; }
.ncx-grades-h { margin: 0; font-size: 0.6rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); }
.ncx-grade { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem; padding: 0.15rem 0.3rem; border: 1px solid #e3ded4; border-radius: 6px; cursor: pointer; font-size: 0.68rem; }
.ncx-grade.is-on { border-color: #0e4d4a; background: #e9f4f1; }
.ncx-grade input { margin: 0; }
.ncx-grade-n { flex: 1 1 auto; font-weight: 600; } .ncx-grade-n small { color: var(--muted); font-weight: 500; }
.ncx-supp { color: var(--muted); }
.ncx-grades-none { margin: 0.2rem 0; font-size: 0.64rem; color: var(--muted); font-style: italic; }
.ncx-itin-price { white-space: nowrap; } .ncx-itin-price i { color: var(--muted); font-size: 0.9em; }
.ncx-import-btn { cursor: pointer; font-weight: 700; }
.ncx-import-btn.is-active { background: #0e4d4a; color: #fff; }
.ncx-import-panel { margin: 0.3rem 0.6rem; padding: 0.45rem 0.6rem; border: 1px solid #d8d1c4; border-radius: 8px; background: #fffefb; font-size: 0.72rem; }
.ncx-imp-head { display: flex; flex-wrap: wrap; gap: 0.2rem 0.6rem; align-items: baseline; } .ncx-imp-head span { color: var(--muted); flex: 1 1 auto; }
.ncx-imp-row { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; margin-top: 0.35rem; }
.ncx-imp-file { position: relative; overflow: hidden; } .ncx-imp-file input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.ncx-imp-cols { color: var(--muted); font-size: 0.62rem; flex: 1 1 260px; }
.ncx-import-summary:empty { display: none; }
.ncx-import-summary { margin-top: 0.4rem; }
.ncx-imp-sum { padding: 0.3rem 0.45rem; border-radius: 6px; } .ncx-imp-sum.is-ok { background: #e6f4ec; } .ncx-imp-sum.is-bad { background: #fbe5e5; }
.ncx-imp-errn { color: #8f1f1f; font-weight: 700; } .ncx-imp-ex { color: #8a5a00; }
.ncx-imp-errs { margin: 0.3rem 0 0; padding-left: 1.1rem; max-height: 9rem; overflow: auto; color: #6d1b1b; }
/* left panel price breakdown */
.panel-price-breakdown .price-breakdown-body { padding: 0 0.1rem 0.4rem; font-size: 0.74rem; }
.pb-empty, .pb-note { margin: 0.2rem 0; color: var(--muted); font-size: 0.68rem; }
.pb-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.2rem; }
.pb-list li { display: flex; gap: 0.4rem; justify-content: space-between; align-items: baseline; padding: 0.2rem 0.35rem; border-left: 3px solid var(--ncx-t, #0e4d4a); background: #faf8f3; border-radius: 4px; }
.pb-leg { min-width: 0; } .pb-leg small { display: block; color: var(--muted); font-size: 0.64rem; }
.pb-price { text-align: right; white-space: nowrap; font-size: 0.7rem; }
/* Branding → Map styling (one collapsible section for every map) */
.brand-mapstyle { margin-top: 0.6rem; border: 1px solid #e0d9cc; border-radius: 8px; background: #fbf9f4; padding: 0.35rem 0.6rem; }
.brand-mapstyle > summary { cursor: pointer; font-weight: 800; color: #123b38; padding: 0.2rem 0; }
.brand-mapstyle > summary em { font-weight: 500; font-size: 0.72rem; }
.brand-mapstyle[open] { padding-bottom: 0.6rem; }
.brand-mapstyle .bms-group { margin-top: 0.5rem; padding-top: 0.45rem; border-top: 1px dashed #e0d9cc; }
.brand-mapstyle .bms-h { margin: 0 0 0.3rem; font-size: 0.78rem; text-transform: uppercase; letter-spacing: .04em; color: #0e4d4a; }
@media (min-width: 900px) { .brand-mapstyle[open] { columns: 1; } }
.sidebar .brand-header { min-height: 0; padding-top: 0.25rem; padding-bottom: 0.25rem; }
.ncx-imp-types { display: grid; gap: 0.3rem; margin-top: 0.35rem; }
.ncx-imp-type { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.5rem; padding: 0.25rem 0.35rem; border: 1px solid #ece6da; border-radius: 6px; }
.ncx-imp-type > b { min-width: 5.5rem; } .ncx-imp-help { flex: 1 1 200px; color: var(--muted); font-size: 0.66rem; }
.ncx-imp-file-sum { margin-top: 0.35rem; } .ncx-imp-fname { margin: 0 0 0.15rem; font-size: 0.68rem; }

/* ---------- build37: Branding tab redesign ---------- */
.branding-box [hidden] { display: none !important; }
.branding-box { width: min(1060px, 100%); }
.branding-layout { display: grid; grid-template-columns: minmax(0, 1fr) 270px; gap: 1rem; align-items: start; }
.branding-sections { display: grid; gap: 0.7rem; min-width: 0; }
.bsec, .branding-box .brand-mapstyle { border: 1px solid #e6dfd2; border-radius: 10px; background: #fff; padding: 0.6rem 0.75rem 0.7rem; margin: 0; }
.bsec-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.bsec-head h3, .branding-box .brand-mapstyle > summary { margin: 0; font-size: 0.95rem; font-weight: 800; color: #123b38; }
.bsec-n { display: inline-grid; place-items: center; width: 1.3rem; height: 1.3rem; margin-right: 0.3rem; border-radius: 50%; background: var(--brand, #0f4f4c); color: #fff; font-size: 0.7rem; vertical-align: 1px; }
.bsec-help { margin: 0.15rem 0 0.45rem; color: var(--muted); font-size: 0.74rem; }
.bsec-tools { display: flex; justify-content: flex-end; margin: -0.2rem 0 0.2rem; }
.bsec-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; align-items: end; }
.bsec .field { margin-bottom: 0.45rem; }
.bsec .account-chip { margin-bottom: 0.5rem; }
.bsec-colour .bsec-swatch-wrap { display: inline-flex; align-items: center; gap: 0.4rem; }
.bsec-colour code { font-size: 0.72rem; color: var(--muted); }
.bsec-more { margin-top: 0.2rem; border-top: 1px dashed #e6dfd2; padding-top: 0.35rem; }
.bsec-more > summary { cursor: pointer; font-size: 0.78rem; font-weight: 700; color: #355; }
.bsec-more[open] > summary { margin-bottom: 0.4rem; }
.branding-box .brand-mapstyle > summary { cursor: pointer; list-style: none; }
.branding-box .brand-mapstyle > summary::-webkit-details-marker { display: none; }
.branding-box .brand-mapstyle > summary::after { content: "▸"; float: right; color: var(--muted); }
.branding-box .brand-mapstyle[open] > summary::after { content: "▾"; }
.branding-box .brand-mapstyle > summary em { display: block; font-weight: 500; font-size: 0.72rem; margin: 0.1rem 0 0 1.6rem; }
.bsec .ncx-colours { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.3rem 0.6rem; margin-bottom: 0.5rem; }
.bsec .ncx-colours .ncx-colours-head { grid-column: 1 / -1; font-weight: 700; font-size: 0.74rem; }
.bsec .ncx-colours label { display: flex; align-items: center; gap: 0.35rem; font-size: 0.76rem; }
.branding-live { position: sticky; top: 0; display: grid; gap: 0.5rem; padding: 0.6rem; border: 1px solid #e6dfd2; border-radius: 10px; background: #fbf9f4; }
.bl-h { margin: 0; font-size: 0.7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.bl-card { border-radius: 8px; overflow: hidden; border: 1px solid #e3ddd0; background: #fff; }
.bl-banner { display: flex; align-items: center; gap: 0.4rem; padding: 0.35rem 0.5rem; background: var(--bl-brand); color: #fff; font-size: 0.62rem; font-weight: 800; letter-spacing: .06em; min-height: 1.6rem; }
.bl-banner img { max-height: 1.1rem; max-width: 4rem; object-fit: contain; background: #fff; border-radius: 2px; }
.bl-card-body { display: grid; gap: 0.25rem; padding: 0.35rem; }
.bl-ncx { display: grid; padding: 0.25rem 0.4rem; border-left: 3px solid var(--t); border-radius: 4px; background: #faf8f3; font-size: 0.66rem; }
.bl-ncx small { color: var(--muted); font-size: 0.6rem; } .bl-price { font-size: 0.62rem; } .bl-price b { color: var(--bl-brand); }
.bl-map { width: 100%; height: auto; border-radius: 8px; border: 1px solid #e3ddd0; display: block; }
#bl-sea { fill: var(--bl-sea); } #bl-land { fill: var(--bl-land); stroke: var(--bl-coast); stroke-width: 1; }
#bl-route { stroke: var(--bl-route); stroke-linecap: round; } #bl-marks circle { fill: #fff; stroke: var(--bl-marker); stroke-width: 1.4; }
#bl-labels text { fill: var(--bl-label); font-weight: 700; } #bl-title { fill: var(--bl-brand); font-size: 9px; font-weight: 800; }
.bl-note { margin: 0; font-size: 0.64rem; color: var(--muted); }
@media (max-width: 760px) {
  .branding-layout { grid-template-columns: 1fr; }
  .branding-live { position: static; order: -1; grid-template-columns: 1fr 1fr; align-items: start; }
  .branding-live .bl-h, .branding-live .bl-note { grid-column: 1 / -1; }
  .bsec-row { grid-template-columns: 1fr; }
  .bsec .ncx-colours { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.branding-box .brand-mapstyle > summary { position: relative; padding-right: 1.2rem; }
.branding-box .brand-mapstyle > summary::after { float: none; position: absolute; right: 0; top: 0.1rem; }

/* build38: display-price overrides */
.pb-view { display: inline-flex; border: 1px solid var(--line, #cfd8d6); border-radius: 999px; overflow: hidden; margin: 0 0 8px; }
.pb-view button { border: 0; background: transparent; padding: 3px 10px; font: inherit; font-size: 12px; cursor: pointer; color: inherit; }
.pb-view button.is-on { background: var(--brand, #0f4f4c); color: #fff; }
.pb-row { display: flex; justify-content: space-between; gap: 8px; }
.pb-ovr { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 12px; margin: 4px 0 2px; padding: 4px 6px; border-radius: 6px; background: rgba(0,0,0,.035); }
.pb-ovr.is-set { background: rgba(201,146,46,.12); }
.pb-ovr-l { flex: 1 0 100%; font-weight: 600; opacity: .8; }
.pb-disp input { width: 76px; padding: 2px 4px; font: inherit; border: 1px solid var(--line, #cfd8d6); border-radius: 4px; }
.pb-diff { font-weight: 700; } .pb-diff.is-down { color: #a23b2a; } .pb-diff.is-up { color: #23784a; }
.pb-clear { border: 0; background: none; color: var(--brand, #0f4f4c); text-decoration: underline; cursor: pointer; font: inherit; padding: 0; }
.pb-pkg { display: flex; gap: 6px; align-items: baseline; margin: 8px 0 2px; padding-top: 6px; border-top: 1px solid var(--line, #cfd8d6); }
.pb-pkg span { flex: 1; font-weight: 600; } .pb-pkg.is-none { opacity: .7; font-size: 12px; }
.pb-list > li { display: block; }
.pb-list > li > .pb-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.pb-list > li > .pb-ovr { width: 100%; box-sizing: border-box; }

/* build39: column header filters */
.ncx-reel-head { display: flex; align-items: center; gap: 0.35rem; flex-wrap: wrap; min-height: 1.6rem; }
.ncx-reel-title { white-space: nowrap; }
.ncx-cf { display: inline-flex; gap: 0.25rem; margin-left: auto; flex-wrap: wrap; justify-content: flex-end; text-transform: none; letter-spacing: 0; }
.ncx-cf:empty { display: none; }
.ncx-cf-dd { display: inline-flex; align-items: center; position: relative; }
.ncx-cf-btn { display: inline-flex; align-items: center; gap: 0.25rem; max-width: 9.5rem; padding: 0.08rem 0.45rem; border: 1px solid rgba(255,255,255,.45); border-radius: 999px; background: rgba(255,255,255,.14); color: inherit; font-family: inherit; font-weight: 600; font-size: 0.68rem; line-height: 1.35; font-family: inherit; cursor: pointer; }
.ncx-cf-btn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ncx-cf-btn i { font-style: normal; font-size: 0.6rem; opacity: .85; }
.ncx-cf-btn:hover, .ncx-cf-btn[aria-expanded="true"] { background: rgba(255,255,255,.26); }
.ncx-cf-btn:focus-visible, .ncx-cf-x:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }
.ncx-cf-btn[disabled] { opacity: .5; cursor: default; }
.ncx-cf-dd.is-on .ncx-cf-btn { background: #fff; color: var(--ncx-t, var(--accent)); border-color: #fff; border-radius: 999px 0 0 999px; }
.ncx-cf-x { border: 1px solid #fff; border-left: 0; background: #fff; color: var(--ncx-t, var(--accent)); border-radius: 0 999px 999px 0; padding: 0 0.4rem; font-family: inherit; font-weight: 700; font-size: 0.8rem; line-height: 1.3; cursor: pointer; }
.ncx-cf-pop { position: fixed; z-index: 60; min-width: 11rem; max-width: min(17rem, calc(100vw - 16px)); max-height: 16rem; overflow: auto; padding: 0.3rem; background: #fff; color: #1d2b2a; border: 1px solid rgba(0,0,0,.12); border-top: 3px solid var(--ncx-t, var(--accent)); border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.16); display: flex; flex-direction: column; font-weight: 500; text-transform: none; letter-spacing: 0; }
.ncx-cf-pop[hidden] { display: none; }
.ncx-cf-opt { display: flex; align-items: center; gap: 0.45rem; padding: 0.3rem 0.4rem; border-radius: 5px; font-size: 0.8rem; cursor: pointer; }
.ncx-cf-opt:hover { background: rgba(0,0,0,.04); }
.ncx-cf-opt input { accent-color: var(--ncx-t, var(--accent)); margin: 0; }
.ncx-cf-opt span { flex: 1; }
.ncx-cf-opt small { color: #6b7775; font-variant-numeric: tabular-nums; }
.ncx-cf-opt.is-all { border-bottom: 1px solid rgba(0,0,0,.08); border-radius: 5px 5px 0 0; margin-bottom: 0.15rem; font-weight: 700; }
@media (max-width: 500px) { .ncx-cf-btn { max-width: 7.5rem; padding: 0.15rem 0.5rem; } .ncx-cf-opt { padding: 0.45rem 0.4rem; font-size: 0.85rem; } }
.ncx-reel-head { flex-wrap: nowrap; }
.ncx-reel-title { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.ncx-cf { flex-wrap: nowrap; flex-shrink: 0; }
.ncx-t-hotel .ncx-cf-btn { max-width: 6.2rem; }

/* build40: settings backup */
.bsec-backup-row { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; }
.bsec-backup-row label.btn { cursor: pointer; }
.bsec-msg { margin: 0.4rem 0 0; font-size: 0.8rem; min-height: 1em; color: #4b5856; }
.bsec-msg.is-ok { color: #23784a; } .bsec-msg.is-warn { color: #9a6a12; } .bsec-msg.is-err { color: #a23b2a; }

/* build41: Custom products */
.ncx-own-add { flex-shrink: 0; border: 1px dashed rgba(255,255,255,.6); background: transparent; color: inherit; border-radius: 999px; padding: 0.05rem 0.45rem; font-family: inherit; font-weight: 700; font-size: 0.66rem; line-height: 1.35; font-family: inherit; text-transform: none; letter-spacing: 0; cursor: pointer; white-space: nowrap; }
.ncx-own-add:hover, .ncx-own-add:focus-visible { background: rgba(255,255,255,.2); border-style: solid; outline: none; }
.ncx-tag-custom { display: inline-block; font-family: inherit; font-weight: 700; font-size: 0.6rem; line-height: 1.4; font-family: inherit; text-transform: uppercase; letter-spacing: .04em; color: var(--ncx-t, var(--accent)); border: 1px solid currentColor; border-radius: 4px; padding: 0 0.3rem; margin-left: 0.25rem; white-space: nowrap; vertical-align: middle; }
.ncx-noincl { display: inline-flex; align-items: center; gap: 0.2rem; color: #b03a2e; font-weight: 700; font-size: 0.72rem; margin-left: 0.35rem; white-space: nowrap; }
.ncx-nosym { flex-shrink: 0; vertical-align: -2px; }
.ncx-stops { margin: 0.3rem 0; padding-left: 1.1rem; font-size: 0.78rem; }
.ncx-stops li { margin: 0.1rem 0; }
.ncx-notes { font-size: 0.78rem; margin: 0.3rem 0; } .ncx-notes b { margin-right: 0.3rem; }
.ncx-own-warn { font-size: 0.75rem; color: #9a6a12; margin: 0.2rem 0; }
.ncx-icon-btn.is-danger, .btn.is-danger { color: #a23b2a; }
.ncx-itin-stop { list-style: none; margin: 0 0 0 1.9rem; padding: 0.05rem 0.4rem; font-size: 0.72rem; border-left: 2px dotted var(--ncx-t, #b5833a); color: #3b4a48; }
.ncx-itin-flights { font-size: 0.74rem; font-weight: 700; color: #1f8a4c; margin-right: auto; }
.ncx-package details.ncx-warn { display: inline-block; position: relative; }
.ncx-package details.ncx-warn summary { list-style: none; cursor: pointer; }
.ncx-package details.ncx-warn summary::-webkit-details-marker { display: none; }
.ncx-package details.ncx-warn ul { position: absolute; bottom: 1.6rem; right: 0; z-index: 30; width: min(22rem, 86vw); margin: 0; padding: 0.5rem 0.6rem 0.5rem 1.4rem; background: #fff; color: #3b2a12; font-weight: 500; border: 1px solid #e0c48a; border-radius: 8px; box-shadow: 0 6px 18px rgba(0,0,0,.15); }
.pb-incl { color: #1f8a4c; font-weight: 700; font-size: 0.78rem; margin: 0.35rem 0 0; }
.pb-excl { color: #b03a2e; font-size: 0.76rem; margin: 0.25rem 0 0; display: flex; gap: 0.3rem; align-items: flex-start; }
dialog.ncx-own-dialog { padding: 0; border: 0; border-radius: 12px; width: min(40rem, calc(100vw - 16px)); max-height: calc(100vh - 24px); box-shadow: 0 18px 60px rgba(0,0,0,.3); color: #1d2b2a; }
dialog.ncx-own-dialog::backdrop { background: rgba(10,30,28,.45); }
.own-form { padding: 0.9rem 1rem 1rem; display: flex; flex-direction: column; gap: 0.55rem; }
.own-head { display: flex; align-items: center; justify-content: space-between; border-bottom: 3px solid var(--accent); padding-bottom: 0.35rem; }
.own-head h3 { margin: 0; font-size: 1.05rem; color: var(--accent); }
.own-help { margin: 0; font-size: 0.78rem; color: #5b6866; }
.own-row { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: flex-end; }
.own-row > .own-f { flex: 1 1 10rem; }
.own-f { display: flex; flex-direction: column; gap: 0.15rem; font-size: 0.78rem; font-weight: 600; }
.own-f input, .own-f select, .own-f textarea, .own-stop input, .own-stop select { font-family: inherit; font-weight: 400; font-size: 0.88rem; line-height: 1.3; font-family: inherit; padding: 0.35rem 0.45rem; border: 1px solid #cfd8d6; border-radius: 6px; background: #fff; min-width: 0; }
.own-f small { font-weight: 400; color: #6b7775; }
.own-t { flex: 0 1 7rem !important; }
.own-sub { flex-basis: 100%; font-size: 0.75rem; font-weight: 700; color: #5b6866; }
.own-nights { font-size: 0.8rem; font-weight: 700; color: var(--accent); padding-bottom: 0.45rem; }
.own-kind { display: flex; gap: 0.9rem; font-weight: 600; font-size: 0.85rem; }
.own-stops { border: 1px solid #e3e0d8; border-radius: 8px; padding: 0.4rem 0.5rem 0.5rem; display: flex; flex-direction: column; gap: 0.35rem; }
.own-stops legend { font-size: 0.78rem; font-weight: 700; padding: 0 0.3rem; }
.own-stop { display: flex; gap: 0.35rem; align-items: center; flex-wrap: wrap; }
.own-stop-n { width: 2.4rem; font-size: 0.7rem; font-weight: 700; color: #6b7775; text-transform: uppercase; }
.own-stop [data-s=city] { flex: 1 1 8rem; }
.own-n { display: inline-flex; align-items: center; gap: 0.2rem; font-size: 0.75rem; }
.own-n input { width: 3.4rem; }
.own-stop-tools button { border: 1px solid #d6dcdb; background: #fff; border-radius: 5px; padding: 0.1rem 0.4rem; cursor: pointer; }
.own-incl { display: inline-flex; gap: 0.3rem; align-items: center; font-size: 0.78rem; font-weight: 600; }
.own-incl-main { flex-wrap: wrap; } .own-incl-main small { flex-basis: 100%; font-weight: 400; color: #6b7775; padding-left: 1.4rem; }
.own-warn { margin: 0; font-size: 0.78rem; color: #9a6a12; } .own-err { margin: 0; font-size: 0.82rem; font-weight: 700; color: #a23b2a; }
.own-foot { display: flex; gap: 0.5rem; align-items: center; border-top: 1px solid #ece8df; padding-top: 0.55rem; } .own-foot > span { flex: 1; }
@media (max-width: 500px) { .own-stop-n { width: 100%; } .own-row > .own-f { flex-basis: 100%; } .own-t { flex-basis: 45% !important; } }
/* build41 audit #3: at phone width, Your itinerary scrolls inside its own box instead of squashing the columns */
@media (max-width: 700px) {
  #ncx-root.ncx-shell { max-height: 74vh; }
  .ncx-reels { flex: 1 0 190px; min-height: 190px; }
  .ncx-package { max-height: 30vh; overflow-y: auto; overscroll-behavior: contain; }
}
dialog.ncx-own-dialog { max-width: none; }
@media (min-width: 701px) {
  #ncx-root.ncx-shell:not(.is-collapsed):has(.ncx-package.has-items) { max-height: 64vh; }
  .ncx-package.has-items { max-height: 24vh; overflow-y: auto; overscroll-behavior: contain; }
}
.ncx-package.has-items .ncx-itin-foot { position: sticky; bottom: -0.35rem; background: #fffcf7; z-index: 2; box-shadow: 0 -6px 8px -6px rgba(0,0,0,.12); }
.ncx-package.has-items .ncx-itin-head { position: sticky; top: -0.35rem; background: #fffcf7; z-index: 2; }

/* build42: Custom section at the top of each column */
details.ncx-own-sec { border: 1px dashed var(--ncx-t, var(--accent)); border-radius: 8px; margin: 0.3rem 0 0.45rem; padding: 0 0.3rem 0.1rem; background: rgba(255,255,255,.55); }
details.ncx-own-sec > summary { cursor: pointer; font-weight: 700; font-size: 0.74rem; text-transform: uppercase; letter-spacing: .05em; padding: 0.3rem 0.1rem; color: var(--ncx-t, var(--accent)); list-style: none; display: flex; align-items: center; gap: 0.35rem; }
details.ncx-own-sec > summary::-webkit-details-marker { display: none; }
details.ncx-own-sec > summary::before { content: "▸"; transition: transform .15s; }
details.ncx-own-sec[open] > summary::before { transform: rotate(90deg); }
.ncx-own-n { background: var(--ncx-t, var(--accent)); color: #fff; border-radius: 999px; padding: 0 0.4rem; font-size: 0.66rem; letter-spacing: 0; }

/* build44: saved packages + Marketing Assets */
.ncx-code { font: 700 0.72rem/1.4 ui-monospace, "SFMono-Regular", Menlo, monospace; letter-spacing: .04em; color: var(--accent); border: 1px solid currentColor; border-radius: 4px; padding: 0 0.35rem; white-space: nowrap; background: #fff; }
.ncx-itin-head .ncx-code { margin-right: 0.3rem; }
.pb-code { margin: 0.3rem 0; font-size: 0.8rem; }
dialog.ncx-sp-dialog { width: min(44rem, calc(100vw - 16px)); }
.sp-recall { align-items: flex-end; } .sp-recall .own-f { flex: 1 1 12rem; }
.sp-list { list-style: none; margin: 0; padding: 0; max-height: 50vh; overflow: auto; border-top: 1px solid #ece8df; }
.sp-list li { display: flex; gap: 0.6rem; align-items: center; justify-content: space-between; padding: 0.5rem 0.2rem; border-bottom: 1px solid #ece8df; flex-wrap: wrap; }
.sp-main { display: flex; flex-direction: column; gap: 0.1rem; min-width: 12rem; flex: 1; } .sp-main small { color: #6b7775; } .sp-slogan { font-style: italic; color: #3b4a48 !important; }
.sp-main .ncx-code { align-self: flex-start; } .sp-name { font-weight: 700; }
.sp-tools { display: flex; gap: 0.3rem; flex-wrap: wrap; } .sp-empty { color: #6b7775; justify-content: center !important; }
.mkt-panel { position: fixed; inset: 56px 0 0 0; z-index: 900; background: rgba(10,30,28,.35); overflow: auto; padding: 16px; }
.mkt-panel[hidden] { display: none; }
.mkt-inner { max-width: 1100px; margin: 0 auto; background: #fffcf7; border-radius: 12px; padding: 1rem 1.2rem 1.4rem; box-shadow: 0 18px 60px rgba(0,0,0,.25); display: flex; flex-direction: column; gap: 0.8rem; }
.mkt-head { display: flex; align-items: baseline; gap: 0.8rem; border-bottom: 3px solid var(--accent); padding-bottom: 0.4rem; flex-wrap: wrap; } .mkt-head h2 { margin: 0; color: var(--accent); } .mkt-head .hint { flex: 1; font-size: 0.8rem; color: #5b6866; }
.mkt-row { display: flex; gap: 1rem; align-items: flex-end; flex-wrap: wrap; } .mkt-row .own-f { flex: 1 1 22rem; }
.mkt-pkginfo { display: flex; flex-direction: column; gap: 0.15rem; font-size: 0.85rem; } .mkt-pkginfo small { color: #6b7775; } .mkt-pkginfo .ncx-code { align-self: flex-start; }
.mkt-assets { border: 1px solid #e3e0d8; border-radius: 8px; display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: 0.4rem 1rem; padding: 0.5rem 0.8rem 0.7rem; }
.mkt-assets legend { font-weight: 700; font-size: 0.8rem; padding: 0 0.3rem; } .mkt-assets label { font-size: 0.85rem; } .mkt-assets small { color: #6b7775; display: block; margin-left: 1.4rem; } .mkt-sub { display: block; margin-left: 1.4rem; font-size: 0.78rem; }
.mkt-note { font-size: 0.78rem; color: #5b6866; margin: 0; } .mkt-actions { display: flex; gap: 0.5rem; align-items: center; } .mkt-status { font-size: 0.82rem; color: #3b4a48; }
.mkt-thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 0.8rem; }
.mkt-thumb { margin: 0; background: #fff; border: 1px solid #e3e0d8; border-radius: 8px; padding: 0.4rem; display: flex; flex-direction: column; gap: 0.3rem; }
.mkt-thumb img { width: 100%; height: 180px; object-fit: contain; background: #f2efe8; border-radius: 4px; }
.mkt-thumb iframe { width: 100%; height: 260px; border: 0; background: #fff; border-radius: 4px; }
.mkt-thumb pre { height: 180px; overflow: auto; font-size: 0.66rem; margin: 0; white-space: pre-wrap; background: #f7f5f0; padding: 0.4rem; border-radius: 4px; }
.mkt-thumb figcaption { font-size: 0.75rem; font-weight: 600; color: #3b4a48; }
/* build47b: preview lightbox */
.mkt-thumb.is-zoomable { cursor: zoom-in; }
.mkt-thumb.is-zoomable:hover, .mkt-thumb.is-zoomable:focus-visible { border-color: #0f4c45; box-shadow: 0 2px 10px rgba(15, 76, 69, 0.15); outline: none; }
.mkt-thumb.is-zoomable iframe, .mkt-thumb.is-zoomable pre { pointer-events: none; }
.mkt-lb { position: fixed; inset: 0; z-index: 9999; background: rgba(14, 20, 22, 0.88); display: grid; grid-template-columns: 56px 1fr 56px; grid-template-rows: auto 1fr; }
.mkt-lb[hidden] { display: none; }
.mkt-lb-bar { grid-column: 1 / -1; display: flex; align-items: center; gap: 0.6rem; padding: 0.55rem 0.9rem; color: #fff; background: rgba(0, 0, 0, 0.35); }
.mkt-lb-title { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mkt-lb-title small { color: #c9d4d2; font-weight: 500; }
.mkt-lb-count { color: #c9d4d2; font-size: 0.8rem; }
.mkt-lb .btn-ghost { color: #fff; border-color: rgba(255, 255, 255, 0.5); }
.mkt-lb-x { background: none; border: 0; color: #fff; font-size: 1.8rem; line-height: 1; cursor: pointer; padding: 0 0.3rem; }
.mkt-lb-nav { align-self: center; justify-self: center; width: 44px; height: 64px; border: 0; border-radius: 8px; background: rgba(255, 255, 255, 0.12); color: #fff; font-size: 2.2rem; cursor: pointer; }
.mkt-lb-nav:hover { background: rgba(255, 255, 255, 0.25); }
.mkt-lb-nav[hidden] { visibility: hidden; display: block; }
.mkt-lb-stage { display: flex; align-items: center; justify-content: center; min-height: 0; padding: 14px 0; }
.mkt-lb-img { max-width: 100%; max-height: calc(100vh - 90px); object-fit: contain; box-shadow: 0 6px 30px rgba(0, 0, 0, 0.5); background: #fff; cursor: default; }
.mkt-lb-frame { width: min(1100px, 100%); height: calc(100vh - 90px); border: 0; background: #fff; border-radius: 4px; }
.mkt-lb-text { width: min(820px, 100%); max-height: calc(100vh - 90px); overflow: auto; margin: 0; padding: 1.2rem 1.4rem; background: #fffdf8; color: #222; border-radius: 4px; font-size: 0.85rem; line-height: 1.5; white-space: pre-wrap; }
@media (max-width: 600px) { .mkt-lb { grid-template-columns: 34px 1fr 34px; } .mkt-lb-nav { width: 30px; font-size: 1.6rem; } }
.mkt-empty { color: #5b6866; }
#btn-marketing.is-active { background: rgba(255,255,255,.2); }
@media (max-width: 600px) { .mkt-panel { inset: 100px 0 0 0; padding: 6px; } .mkt-thumb img { height: 140px; } }

/* ===== build45: declutter ("less is more") ===== */
/* filter bar: no counts, no status dots */
.ncx-up b, .ncx-legend { display: none !important; }
.ncx-f-chip sup { display: none; }
/* non-fitting products: hidden behind "Show all (n)", small ✕ badge with the reason as tooltip */
.ncx-card-no { display: inline-grid; place-items: center; width: 1.15rem; height: 1.15rem; padding: 0 !important; border-radius: 50%; font-size: .66rem; line-height: 1; cursor: help; }
.ncx-nomatch { text-align: center; font-weight: 600; color: #4b5a58; padding: 1.1rem .5rem .3rem !important; margin: 0; }
.ncx-showall { display: block; margin: .4rem auto .6rem; border: 0; background: none; color: var(--accent); font-family: inherit; font-weight: 600; font-size: .78rem; line-height: 1.3; text-decoration: underline; cursor: pointer; padding: .25rem .5rem; }
.ncx-showall:hover { color: var(--accent-hover); }
.ncx-offlist .ncx-card { opacity: .78; }
/* slim expanded card */
.ncx-deps { margin: .25rem 0 .35rem; }
.ncx-fromlist { list-style: none; margin: .3rem 0 .4rem; padding: 0; display: grid; gap: .15rem; }
.ncx-fromlist li { display: flex; justify-content: space-between; gap: .6rem; font-size: .8rem; padding: .2rem .45rem; background: #f6f3ec; border-radius: 5px; }
.ncx-fromlist li > span:first-child { font-weight: 600; color: #34413f; }
.ncx-card-foot { display: flex; align-items: flex-start; gap: .4rem; flex-wrap: wrap; justify-content: space-between; }
.ncx-card-x { flex: 1 1 100%; order: 2; } .ncx-card-x > summary { list-style: none; display: inline-flex; cursor: pointer; float: right; margin-top: -1.75rem; }
.ncx-card-x > summary::-webkit-details-marker { display: none; }
.ncx-card-x[open] > summary { float: none; margin: 0 0 .3rem auto; display: flex; width: max-content; }
.ncx-card-x-body { border-top: 1px dashed #e0dbd0; padding-top: .35rem; display: flex; flex-direction: column; gap: .35rem; font-size: .76rem; }
.ncx-card-x-tools { display: flex; gap: .3rem; align-items: center; flex-wrap: wrap; margin: 0; }
/* itinerary: gap rows + Suggest only under More */
#ncx-journey-summary:not(.show-more) .ncx-itin-gap.is-info, #ncx-journey-summary:not(.show-more) .ncx-suggest { display: none !important; }
#ncx-journey-summary .ncx-save-btn { margin-left: .2rem; }
/* prominent Save package (brand colour) */
.ncx-save-btn.btn-primary { background: var(--brand, var(--accent)) !important; border-color: var(--brand, var(--accent)) !important; color: #fff !important; font-weight: 700; box-shadow: 0 1px 0 rgba(0,0,0,.08), 0 2px 8px rgba(0,0,0,.12); }
.ncx-save-btn.btn-primary:hover { filter: brightness(1.1); }
#btn-ncx-save-top { display: none; }
#app[data-app-mode="ncx"] #btn-ncx-save-top { display: inline-flex; align-items: center; background: #fff; color: var(--brand, var(--accent)); font-weight: 700; border-radius: 999px; margin-left: .35rem; box-shadow: 0 1px 4px rgba(0,0,0,.18); }
#app[data-app-mode="ncx"] #btn-ncx-save-top.is-empty { opacity: .6; }
/* price breakdown: one line per item + total; overrides under More */
.pb-actions { display: flex; align-items: center; justify-content: flex-end; gap: .45rem; margin: 0 0 .4rem; }
.pb-actions .ncx-save-btn { padding: .42rem .9rem; }
.pb-actions + .pb-code { display: none; }
.pb-pkg { display: flex; align-items: baseline; gap: .4rem; font-size: .95rem; border-top: 2px solid #e3dfd6; padding-top: .45rem; margin-top: .35rem; }
.pb-pkg > span:first-child { flex: 1; font-weight: 700; }
.pb-more { margin-top: .5rem; font-size: .78rem; } .pb-more > summary { cursor: pointer; color: #5b6866; font-weight: 600; }
.pb-more-h { margin: .45rem 0 .15rem; font-weight: 700; font-size: .74rem; color: #3b4a48; }
.pb-view { display: none !important; }
/* left panel: Maps-only tools hidden in N-CX */
#app[data-app-mode="ncx"] .side-section[data-section="itinerary"], #app[data-app-mode="ncx"] .side-section[data-section="days"] { display: none !important; }
/* save dialog: code field */
.sp-code-f input { font: 700 .95rem/1.3 ui-monospace, "SFMono-Regular", Menlo, monospace; letter-spacing: .05em; text-transform: uppercase; }
.sp-code-msg { min-height: 1em; color: #5b6866; } .sp-code-msg.is-err { color: #b42318; font-weight: 600; }
/* saved rows: Recall + Itinerary ▾ + ⋯ */
.sp-menu { position: relative; } .sp-menu > summary { list-style: none; cursor: pointer; } .sp-menu > summary::-webkit-details-marker { display: none; }
.sp-pop { display: flex; gap: .3rem; align-items: center; flex-wrap: wrap; margin-top: .3rem; padding: .3rem; background: #f6f3ec; border-radius: 6px; }
.sp-price { font-size: .76rem; display: inline-flex; gap: .25rem; align-items: center; }
.sp-tools { align-items: flex-start; }
/* build45: cabin availability (no prices on cards) */
.ncx-av-badge { display: inline-block; font-family: inherit; font-weight: 700; font-size: .64rem; line-height: 1.5; padding: 0 .4rem; border-radius: 999px; letter-spacing: .02em; white-space: nowrap; vertical-align: middle; }
.ncx-av-badge.is-avail { background: #dff3e6; color: #17663a; } .ncx-av-badge.is-limited { background: #fdf0d2; color: #8a5a00; } .ncx-av-badge.is-sold { background: #fde2df; color: #a0261b; }
.ncx-avail-mini { font-size: .74rem; color: #3b4a48; font-weight: 600; display: inline-flex; gap: .3rem; align-items: center; }
.ncx-cats { list-style: none; margin: .35rem 0; padding: 0; display: grid; gap: .2rem; }
.ncx-cat { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .2rem .45rem; border-radius: 6px; background: #f6f3ec; font-size: .8rem; }
.ncx-cat.is-on { background: #e6efe9; box-shadow: inset 0 0 0 1.5px var(--brand, var(--accent)); }
.ncx-cat label { display: flex; align-items: center; gap: .35rem; cursor: pointer; flex: 1; font-weight: 600; }
.ncx-cat-st { font: 600 .72rem inherit; border-radius: 999px; padding: .05rem .3rem; border: 1px solid #d8d3c8; }
.ncx-cat-st.is-avail { background: #dff3e6; color: #17663a; } .ncx-cat-st.is-limited { background: #fdf0d2; color: #8a5a00; } .ncx-cat-st.is-sold { background: #fde2df; color: #a0261b; }
.pb-av { margin-right: auto; font-size: .78rem; font-weight: 600; display: inline-flex; gap: .3rem; align-items: center; }
.ncx-itin-head .ncx-av-badge { margin-right: .3rem; }
.ncx-card-foot { align-items: center; }
.ncx-card-x { flex: 0 0 auto; order: 0; }
.ncx-card-x > summary, .ncx-card-x[open] > summary { float: none; margin: 0 0 0 auto; display: flex; width: max-content; }
.ncx-card-x[open] { flex: 1 1 100%; }
.ncx-card-x[open] > summary { margin-bottom: .3rem; }

/* ===== build46: marketing photos picker, QA badges, Agent/Client view, empty states, package options ===== */
.mkt-photos { border: 1px solid #e3e0d8; border-radius: 8px; padding: 0.5rem 0.8rem 0.7rem; background: #fff; }
.mkt-photos > summary { cursor: pointer; font-size: 0.85rem; } .mkt-photos > summary small { color: #6b7775; font-weight: 400; }
.mkt-hero-row { display: flex; gap: 0.9rem; margin-top: 0.6rem; flex-wrap: wrap; }
.mkt-hero-prev { flex: 0 0 260px; height: 146px; border-radius: 8px; overflow: hidden; background: #e9e5dc; }
.mkt-hero-prev img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mkt-grad { display: grid; place-items: center; width: 100%; height: 100%; color: #fff; font-size: 0.8rem; font-weight: 600; }
.mkt-hero-ctl { flex: 1 1 18rem; display: flex; flex-direction: column; gap: 0.35rem; font-size: 0.82rem; }
.mkt-hero-ctl select { max-width: 100%; }
.mkt-chk { display: flex; gap: 0.4rem; align-items: center; } .mkt-credit { color: #6b7775; font-size: 0.72rem; line-height: 1.35; }
.mkt-up { cursor: pointer; } .mkt-up input { display: none; }
.mkt-ports { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.6rem, 1fr)); gap: 0.6rem; margin: 0.7rem 0 0.3rem; }
.mkt-port { margin: 0; display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.74rem; }
.mkt-port img, .mkt-noimg { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 8px; border: 2px solid #fff; box-shadow: 0 0 0 1px #e3e0d8; display: grid; place-items: center; background: #f2efe8; color: #8a9391; }
.mkt-port figcaption { font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; } .mkt-port figcaption small { display: block; font-weight: 400; letter-spacing: 0; text-transform: none; color: #6b7775; }
.mkt-port.is-off img { opacity: 0.45; filter: grayscale(0.6); }
.mkt-port figcaption small.mkt-tier::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 0.3rem; vertical-align: 0; background: #9aa3aa; }
.mkt-port figcaption small.mkt-tier.t1::before { background: #0f4c45; } .mkt-port figcaption small.mkt-tier.t2::before { background: #3a8f6a; }
.mkt-port figcaption small.mkt-tier.t3::before { background: #d39b2a; } .mkt-port figcaption small.mkt-tier.t4::before { background: #b9b2a6; }
.mkt-port .btn { padding: 0.15rem 0.45rem; font-size: 0.72rem; align-self: flex-start; } .mkt-film-tick { display: flex; gap: 0.3rem; align-items: center; }
.mkt-qa { font-weight: 600; font-size: 0.72rem; } .mkt-qa.is-ok { color: #1f7a4c; } .mkt-qa.is-bad { color: #a23b2a; }
.ncx-pkg-opts { display: flex; align-items: center; gap: 0.9rem; flex-wrap: wrap; margin-top: 0.35rem; font-size: 0.76rem; }
.ncx-pkg-opt { display: inline-flex; align-items: center; gap: 0.35rem; cursor: pointer; } .ncx-pkg-opts .flights-au-row { margin-top: 0; }
.ncx-view-toggle { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; margin-left: auto; }
.ncx-view-toggle button { border: 0; background: #fff; padding: 0.2rem 0.7rem; font: inherit; cursor: pointer; color: var(--muted); }
.ncx-view-toggle button.is-on { background: var(--brand, var(--accent)); color: #fff; font-weight: 600; }
.ncx-card-agentprice { display: inline-flex; gap: 0.3rem; align-items: baseline; margin-right: 0.5rem; }
body.ncx-client-view .ncx-agent-only { display: none !important; }
.ncx-empty { display: flex; flex-direction: column; align-items: flex-start; gap: 0.3rem; }
.ncx-empty-why { font-size: 0.72rem; color: var(--muted); font-weight: 400; }
.ncx-empty-fix { border: 1px solid var(--accent); color: var(--accent); background: #fff; border-radius: 999px; padding: 0.15rem 0.7rem; font: inherit; font-size: 0.74rem; font-weight: 600; cursor: pointer; }
.ncx-empty-fix:hover { background: var(--accent); color: #fff; }
.ncx-empty.ncx-nomatch { align-items: center; }
.mkt-up { display: inline-flex; align-items: center; border: 1px solid var(--line, #d8d3c8); border-radius: 6px; background: #fff; padding: 0.2rem 0.6rem; font-weight: 600; }
.mkt-up:hover { border-color: var(--accent); color: var(--accent); }

/* ===== build47: one clear "Import products ▾" menu ===== */
.ncx-impmenu { position: relative; display: inline-flex; }
.ncx-im-btn { display: inline-flex; align-items: center; gap: .35rem; padding: .22rem .75rem; border: 1px solid var(--accent); border-radius: 999px; background: var(--accent); color: #fff; font-family: inherit; font-weight: 600; font-size: .8rem; line-height: 1.3; cursor: pointer; }
.ncx-im-btn.ncx-clear-all { background: transparent; color: inherit; border-color: currentColor; opacity: .85; margin-left: .4rem; }
.ncx-im-btn.ncx-clear-all:hover { opacity: 1; }
.ncx-im-btn:hover, .ncx-im-btn.is-active { filter: brightness(1.12); }
.ncx-im-pop { position: absolute; top: calc(100% + 6px); left: 0; z-index: 60; width: min(480px, 92vw); background: #fff; border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.18); padding: .45rem; display: grid; gap: .2rem; }
.ncx-im-pop[hidden] { display: none; }
.ncx-im-head { margin: .1rem .35rem .35rem; font-size: .74rem; color: var(--muted); line-height: 1.35; }
.ncx-im-row { display: flex; align-items: flex-start; gap: .4rem; border-radius: 8px; padding: .1rem; }
.ncx-im-row:hover { background: var(--accent-soft); }
.ncx-im-main { flex: 1; display: grid; gap: .1rem; padding: .35rem .45rem; border-radius: 6px; cursor: pointer; position: relative; }
.ncx-im-main:focus-visible { outline: 2px solid var(--accent); }
.ncx-im-name { font-weight: 700; font-size: .84rem; color: var(--text, #1d2b2a); }
.ncx-im-name small { font-weight: 500; color: var(--muted); }
.ncx-im-desc { font-size: .72rem; line-height: 1.35; color: var(--muted); }
.ncx-im-main input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.ncx-im-tpl { flex: none; align-self: center; font-size: .72rem; font-weight: 600; color: var(--accent); white-space: nowrap; padding: .3rem .45rem; }
.ncx-im-legacy { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; margin-top: .2rem; padding: .45rem .45rem .2rem; border-top: 1px solid var(--line); font-size: .7rem; color: var(--muted); }
.ncx-im-legacy .ncx-up { font-size: .7rem; padding: .1rem .5rem; }
.ncx-im-results { justify-self: start; margin: .15rem .35rem .1rem; border: 0; background: none; color: var(--accent); font-family: inherit; font-weight: 600; font-size: .74rem; line-height: 1.3; text-decoration: underline; cursor: pointer; padding: .2rem 0; }

/* ===== build47: tidy itinerary bar (one Save, one main action, consistent ghost row) ===== */
.ncx-acts, .ncx-foot-acts { display: inline-flex; align-items: center; gap: .3rem; }
.ncx-foot-acts { margin-left: auto; }
.ncx-itin-head, .ncx-itin-foot { gap: .45rem; min-height: 34px; }
.ncx-act { display: inline-flex; align-items: center; gap: .3rem; height: 28px; padding: 0 .6rem; border: 1px solid var(--line); border-radius: 6px; background: #fff; color: #33433f; font-family: inherit; font-weight: 600; font-size: .74rem; line-height: 1; white-space: nowrap; cursor: pointer; }
.ncx-act > span[aria-hidden] { color: var(--accent); font-size: .78rem; line-height: 1; }
.ncx-act:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.ncx-act[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent); }
.ncx-act.ncx-add-custom { border-style: solid; padding: 0 .6rem; }
.ncx-package:not(.has-items) .ncx-acts { margin-left: auto; }
.ncx-package:not(.has-items) .ncx-acts .ncx-add-custom { margin-left: 0; }
#ncx-journey-summary .ncx-acts button.ncx-suggest.ncx-act { display: inline-flex !important; }
/* Save: visible but secondary (outline in brand colour) so it never competes with Build package map */
#ncx-journey-summary .ncx-save-outline { display: inline-flex; align-items: center; height: 30px; padding: 0 .85rem; margin-left: .15rem; border: 1.5px solid var(--brand, var(--accent)); border-radius: 6px; background: #fff; color: var(--brand, var(--accent)); font-family: inherit; font-weight: 700; font-size: .78rem; line-height: 1; white-space: nowrap; cursor: pointer; box-shadow: none; }
#ncx-journey-summary .ncx-save-outline:hover { background: var(--accent-soft); }
.ncx-main-btn { display: inline-flex; align-items: center; height: 30px; padding: 0 1rem; border: 1.5px solid var(--brand, var(--accent)); border-radius: 6px; background: var(--brand, var(--accent)); color: #fff; font-family: inherit; font-weight: 700; font-size: .78rem; line-height: 1; white-space: nowrap; cursor: pointer; }
.ncx-main-btn:hover { filter: brightness(1.1); }
.ncx-itin-foot .ncx-warn summary { display: inline-flex; align-items: center; height: 24px; padding: 0 .55rem; border-radius: 999px; background: #fff4dc; font-size: .72rem; }
.ncx-itin-head .ncx-av-badge { font-size: .68rem; padding: .05rem .45rem; }
.ncx-pkg-opts { padding: 0 .1rem; }

/* ===== build47: lower-left not squished — NCX page scrolls; nothing clipped, no tiny inner scroll boxes ===== */
@media (min-width: 701px) {
  #app[data-app-mode="ncx"] { height: auto; min-height: 100vh; overflow: visible; }
  #app[data-app-mode="ncx"] .app-mode-bar { position: sticky; top: 0; z-index: 40; }
  #app[data-app-mode="ncx"] #ncx-root.ncx-shell,
  #app[data-app-mode="ncx"] #ncx-root.ncx-shell:not(.is-collapsed):has(.ncx-package.has-items) { max-height: none !important; overflow: visible; flex: none; }
  #app[data-app-mode="ncx"] .ncx-body { flex: none; height: clamp(250px, 40vh, 430px); }
  #app[data-app-mode="ncx"] .ncx-shell.is-collapsed .ncx-body { height: 0; }
  #app[data-app-mode="ncx"] .ncx-package.has-items { max-height: none !important; overflow: visible !important; }
  #app[data-app-mode="ncx"] .ncx-package.has-items .ncx-itin-head,
  #app[data-app-mode="ncx"] .ncx-package.has-items .ncx-itin-foot { position: static; box-shadow: none; }
  #app[data-app-mode="ncx"] .app-body { flex: none; height: max(600px, calc(100vh - 52px)); grid-template-columns: minmax(320px, var(--sidebar-w)) 8px 1fr; }
  #app[data-app-mode="ncx"] .app-body.sidebar-collapsed { grid-template-columns: 0 0 1fr; }
  #app[data-app-mode="ncx"] .sidebar .side-section-head { padding-top: .85rem; padding-bottom: .85rem; }
  #app[data-app-mode="ncx"] .sidebar-footer { font-size: .74rem; font-weight: 500; color: var(--muted); padding: .5rem 1.2rem; }
}
/* build47: export buttons as one even 2×2 grid */
.export-panel .export-btns { display: grid !important; grid-template-columns: 1fr 1fr; gap: .45rem; }
.export-panel .export-btns .btn { width: 100%; justify-content: center; margin: 0; }
.export-panel .hint { margin: .45rem 0 0; }
.export-panel > .field { margin-top: .8rem; }

/* ===== build47: Branding and Marketing Assets are full-page views (hash routed) ===== */
#app[data-view="pricing"] { height: auto; min-height: 100vh; overflow: visible; background: #f6f3ec; }
#app[data-view="pricing"] .app-mode-bar { position: sticky; top: 0; z-index: 40; }
#app[data-view="pricing"] > :not(.app-mode-bar):not(#pricing-panel) { display: none !important; }
#app[data-view="pricing"] .app-mode-tagline { display: none !important; }
#app[data-view="branding"], #app[data-view="marketing"] { height: auto; min-height: 100vh; overflow: visible; background: #f6f3ec; }
#app[data-view="branding"] .app-mode-bar, #app[data-view="marketing"] .app-mode-bar { position: sticky; top: 0; z-index: 40; }
#app[data-view="branding"] > :not(.app-mode-bar):not(#branding-panel),
#app[data-view="marketing"] > :not(.app-mode-bar):not(#marketing-panel) { display: none !important; }
#app[data-view="branding"] #btn-ncx-save-top, #app[data-view="marketing"] #btn-ncx-save-top,
#app[data-view="branding"] .app-mode-tagline, #app[data-view="marketing"] .app-mode-tagline { display: none !important; }
.page-back { order: -1; flex-basis: 100%; align-self: flex-start; border: 0; background: none; padding: 0 0 .35rem; color: var(--brand, var(--accent)); font-family: inherit; font-weight: 600; font-size: .84rem; line-height: 1.2; cursor: pointer; text-align: left; }
.page-back:hover { text-decoration: underline; }
/* Branding page */
#app[data-view="branding"] .branding-panel { position: static; inset: auto; display: block; padding: 1.6rem 2rem 3rem; pointer-events: auto; }
#app[data-view="branding"] .branding-box { width: min(1240px, 100%); max-height: none; overflow: visible; margin: 0 auto; background: none; border: 0; border-radius: 0; box-shadow: none; padding: 0; }
#app[data-view="branding"] .branding-head { padding-bottom: 1rem; margin-bottom: 1.4rem; border-bottom: 1px solid #e3dccd; }
#app[data-view="branding"] .branding-head h2 { font-size: 1.6rem; }
#app[data-view="branding"] .branding-head .hint { font-size: .86rem; }
#app[data-view="branding"] .branding-layout { grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); gap: 2rem; }
#app[data-view="branding"] .branding-sections { gap: 1.25rem; }
#app[data-view="branding"] .bsec, #app[data-view="branding"] .branding-box .brand-mapstyle { padding: 1.1rem 1.3rem 1.2rem; border-radius: 12px; }
#app[data-view="branding"] .bsec-help { margin: .3rem 0 .8rem; font-size: .8rem; }
#app[data-view="branding"] .bsec .field { margin-bottom: .8rem; }
#app[data-view="branding"] .bsec-row { gap: 1rem; }
#app[data-view="branding"] .branding-live { position: sticky; top: 76px; padding: 1rem; gap: .75rem; background: #fff; }
.bl-avail { font-size: .62rem; color: var(--muted); } .bl-avail b { color: #2f7d4f; }
@media (max-width: 900px) { #app[data-view="branding"] .branding-layout { grid-template-columns: 1fr; } #app[data-view="branding"] .branding-live { position: static; order: -1; } #app[data-view="branding"] .branding-panel { padding: 1rem; } }
/* Marketing page */
#app[data-view="marketing"] .mkt-panel { position: static; inset: auto; z-index: auto; background: none; overflow: visible; padding: 1.6rem 2rem 3rem; }
#app[data-view="marketing"] .mkt-inner { max-width: 1240px; background: none; box-shadow: none; border-radius: 0; padding: 0; gap: 1.2rem; }
#app[data-view="marketing"] .mkt-head { border-bottom-width: 1px; border-color: #e3dccd; padding-bottom: 1rem; }
#app[data-view="marketing"] .mkt-head h2 { font-size: 1.6rem; }
@media (max-width: 700px) { #app[data-view="marketing"] .mkt-panel { padding: 1rem; } }
/* build47: text wordmark when the logo image is missing */
.logo-fallback { font-family: Georgia, "Times New Roman", serif; font-weight: 700; font-size: 17px; letter-spacing: .01em; color: inherit; white-space: nowrap; }

/* ===== build47: Pricing & commercials page ===== */
.pricing-panel[hidden] { display: none !important; }
#app[data-view="pricing"] .pricing-panel { position: static; inset: auto; display: block; padding: 1.6rem 2rem 3rem; pointer-events: auto; background: none; }
#app[data-view="pricing"] .branding-box { width: min(1240px, 100%); max-height: none; overflow: visible; margin: 0 auto; background: none; border: 0; border-radius: 0; box-shadow: none; padding: 0; }
#app[data-view="pricing"] .branding-head { padding-bottom: 1rem; margin-bottom: 1.4rem; border-bottom: 1px solid #e3dccd; }
#app[data-view="pricing"] .branding-head h2 { font-size: 1.6rem; }
.pricing-layout { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(300px, 1fr); gap: 1.6rem; align-items: start; }
.pricing-side { display: grid; gap: 1.25rem; }
.pricing-panel .bsec { background: #fff; border: 1px solid #e6dfd1; padding: 1.1rem 1.3rem 1.2rem; border-radius: 12px; }
.pricing-panel .bsec-help { margin: .3rem 0 .8rem; font-size: .8rem; color: var(--muted); }
.pricing-panel .field { display: grid; gap: .3rem; margin-bottom: .6rem; }
.pricing-panel .field input, .pricing-panel .field select { max-width: 260px; }
.pricing-panel .pr-hint { margin-top: -.3rem; }
.pr-rule { font-size: .78rem; color: var(--muted); margin: .4rem 0; }
.pr-preview { font-weight: 700; color: #2f7d4f; min-height: 1.2em; margin: .2rem 0 0; }
.pr-preview.is-none { color: var(--muted); font-weight: 500; }
.pr-comm { display: grid; grid-template-columns: auto 1fr auto; gap: .45rem .7rem; align-items: center; font-size: .86rem; }
.pr-comm select, .pr-comm input { font: inherit; padding: .3rem .4rem; border: 1px solid #d8d0c0; border-radius: 6px; background: #fff; }
.pr-comm input { width: 5.2rem; text-align: right; }
.pr-comm .pr-t { font-weight: 600; }
.pr-msg { font-size: .78rem; color: #2f7d4f; min-height: 1em; margin: .4rem 0 0; }
.pr-msg.is-err { color: #a33; }
.pricing-panel .price-breakdown-body { max-height: none; overflow: visible; }
@media (max-width: 960px) { .pricing-layout { grid-template-columns: 1fr; } #app[data-view="pricing"] .pricing-panel { padding: 1rem; } }
/* compact read-only total in the builder */
.pb-compact { padding: .8rem 1.2rem .9rem; }
.pb-compact-row { display: flex; justify-content: space-between; align-items: baseline; gap: .6rem; }
.pb-compact-l { font-weight: 700; font-size: .92rem; }
.pb-compact-row b { font-size: 1.05rem; }
.pb-compact-sub { margin: .2rem 0 .35rem; font-size: .76rem; color: var(--muted); }
.pb-compact-link { font-weight: 600; font-size: .82rem; }
/* ===== build47: quotes + unsaved-changes guard ===== */
.sp-kind { display: inline-flex; gap: .25rem; margin: .2rem 0 .6rem; padding: .2rem; background: #f1ece2; border-radius: 999px; }
.sp-kind-btn { border: 0; background: none; padding: .32rem .8rem; border-radius: 999px; font-family: inherit; font-size: .8rem; font-weight: 600; color: var(--muted); cursor: pointer; }
.sp-kind-btn.is-on { background: #fff; color: var(--ink, #1f2a2a); box-shadow: 0 1px 2px rgba(0,0,0,.12); }
.sp-kind-n { font-weight: 500; opacity: .7; }
.sp-quote-badge { display: inline-block; padding: .08rem .5rem; border-radius: 999px; background: #fff4dc; color: #8a5a00; border: 1px solid #f0d9a4; font-size: .7rem; font-weight: 700; white-space: nowrap; vertical-align: middle; }
.sp-quote-badge.is-soon { background: #fde8e4; color: #9a2f1f; border-color: #f2c2b8; }
.sp-quote-note { font-size: .8rem; background: #fff8e8; border: 1px solid #f0e0b8; border-radius: 8px; padding: .5rem .7rem; margin: .2rem 0 .4rem; }
.ncx-guard-dialog { width: min(480px, calc(100vw - 2rem)); }
.ncx-guard p { margin: .2rem 0 1rem; line-height: 1.45; }
.ncx-guard-foot { display: flex; gap: .45rem; align-items: center; flex-wrap: wrap; }
.ncx-guard-foot > span { flex: 1; }

/* ===== build47: mobile fixes (stress L7) ===== */
@media (max-width: 720px) {
  .app-mode-bar-inner { flex-wrap: wrap; row-gap: .35rem; }
  .app-mode-toggle { flex-wrap: wrap; overflow: visible; max-width: 100%; border-radius: 18px; row-gap: .25rem; }
  .app-mode-btn { flex: none; }
  .app-mode-tagline { display: none; }
  .ncx-f-months, .ncx-filter { flex-wrap: wrap; overflow-x: visible; }
  .map-wrap, .map-stage, #map-stage { min-height: 300px; }
}
@media (pointer: coarse) {
  .ncx-icon-btn, .ncx-act, .ncx-f-chip, .chip, .ncx-card-chev, .sp-kind-btn { min-height: 32px; min-width: 32px; }
  .ncx-card input[type="checkbox"] { width: 22px; height: 22px; }
}
a:has(> .logo-fallback) { color: inherit; text-decoration: none; }
.app-mode-bar .logo-fallback, header .logo-fallback { color: #fff; }
.sp-quote-badge { width: max-content; justify-self: start; align-self: flex-start; }
.sp-kind { width: max-content; }
/* build47 (stress L7): 24 px minimum tap targets in Nautical CX */
.ncx-card-chev { min-width: 24px; min-height: 24px; }
.ncx-f-chip, .ncx-own-add, .ncx-cf-btn { min-height: 24px; }
.ncx-collapse { min-width: 24px; min-height: 24px; }

/* build47c: products too far apart to be one trip */
.ncx-apart-warn { margin: 0.35rem 0; padding: 0.4rem 0.6rem; border-radius: 6px; background: #fff4e0; border: 1px solid #e7b25a; color: #7a4a00; font-size: 0.78rem; font-weight: 600; }

/* build47d: thousands of cards (Princess 1,008 sailings × dates): skip layout and paint for
   cards scrolled out of view; the browser remembers each card's real height once seen */
.ncx-reel .ncx-card { content-visibility: auto; contain-intrinsic-size: auto 64px; }
.ncx-reel .ncx-card.is-open { contain-intrinsic-size: auto 180px; }

/* build47g: logo upload + remove */
.logo-up-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}

/* build47g: Trip story */
.trip-story textarea, .trip-story input[type=text] { width: 100%; box-sizing: border-box; font: inherit; font-size: 13px; }
.story-stops { display: flex; flex-direction: column; gap: 4px; max-height: 420px; overflow: auto; }
.story-stop { border: 1px solid var(--border, #e3ddd3); border-radius: 6px; padding: 4px 8px; }
.story-stop > summary { cursor: pointer; font-size: 13px; padding: 3px 0; }
.story-stop[open] > summary { margin-bottom: 6px; }
.story-day { color: #8a7a62; font-size: 11px; margin-right: 4px; }
.story-edited { font-size: 11px; color: #0f6b5c; margin-left: 4px; }
.story-stops-label { margin-top: 10px; }
/* build47h: Day at sea in the itinerary panel */
.journey-sea-photo { margin: 6px 0 8px; }
.journey-sea-photo img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 6px; }
.journey-sea-photo figcaption { font-size: 10px; color: #8a8278; text-align: right; margin-top: 2px; }
.story-stop.is-sea summary .story-day { background: #e8f1f4; }

/* build47h: Clear chip beside Search (same look as the Nautical CX Clear chip, sized for the search bar) */
.search-clear-chip { align-self: end; margin-bottom: 0.55rem; padding: 0.38rem 0.7rem; font-size: 0.78rem; }

/* build47h: supplier logos */
.sup-logo { display: inline-block; height: auto; vertical-align: middle; object-fit: contain; }
.sup-logo.is-badge { border-radius: 2px; }
.sup-logo-txt { font-weight: 700; }
.ncx-sup-logo { max-height: 13px; max-width: 100px; width: auto; margin: -2px 6px 0 0; opacity: .95; }
body.no-sup-logos .ncx-sup-logo { display: none; }

/* flights: suggested flights panel */
.ncx-flt-sug { margin: .5rem 0 0; border: 1px solid var(--line, #dfe4e6); border-radius: 8px; padding: .35rem .6rem .5rem; background: #f7fafb; font-size: .78rem; }
.ncx-flt-sug > summary { cursor: pointer; font-weight: 700; }
.ncx-flt-sug > summary small { font-weight: 500; color: var(--muted); margin-left: .35rem; }
.ncx-flt-home { display: inline-flex; gap: .35rem; align-items: center; margin: .35rem 0; }
.ncx-flt-dir h4 { margin: .45rem 0 .2rem; font-size: .76rem; }
.ncx-flt-dir h4 small { font-weight: 500; color: var(--muted); }
.ncx-flt-dir ol { margin: 0; padding: 0; list-style: none; }
.ncx-flt-dir li { display: flex; gap: .5rem; align-items: flex-start; justify-content: space-between; padding: .3rem 0; border-top: 1px dashed #dde3e5; }
.ncx-flt-legs { display: flex; flex-direction: column; gap: .1rem; }
.ncx-flt-leg small { color: var(--muted); }
.ncx-flt-added { color: #1f8a4c; font-weight: 700; }
.ncx-flt-none, .ncx-flt-note { margin: .2rem 0; color: var(--muted); }
.ncx-flt-note { font-size: .7rem; }

/* build47k2: product image — the actual ship's photo, or a branded card (logo/brand + ship name). Never a port photo. */
.prod-img { position: relative; margin: 0 0 0.35rem; border-radius: 6px; overflow: hidden; aspect-ratio: 16 / 7; background: #e9e5dc; }
.prod-img.is-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.prod-img figcaption { position: absolute; right: 0; bottom: 0; max-width: 100%; padding: 1px 5px; font-size: 0.55rem; line-height: 1.3; color: #fff; background: rgba(0,0,0,0.45); border-top-left-radius: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prod-img.is-card { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.3rem; color: #fff; background: linear-gradient(135deg, var(--pi-c, #24414a), color-mix(in srgb, var(--pi-c, #24414a) 65%, #000)); }
.prod-img .pi-logo { display: inline-flex; align-items: center; justify-content: center; padding: 4px 10px; background: rgba(255,255,255,0.96); border-radius: 5px; color: #1d2b2a; font-weight: 700; font-size: 0.8rem; max-width: 80%; }
.prod-img .pi-logo img { display: block; max-height: 30px; max-width: 100%; width: auto; height: auto; }
.prod-img .pi-brand { font: 700 0.95rem/1.1 Georgia, serif; letter-spacing: 0.06em; text-transform: uppercase; text-align: center; padding: 0 8px; }
.prod-img .pi-name { font-size: 0.72rem; font-weight: 600; text-align: center; padding: 0 8px; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* build47l: destination chips share the Departs row; groups wrap as whole units, never overlap */
.ncx-filter { flex-wrap: wrap; row-gap: 0.3rem; }
.ncx-filter .ncx-f-months { flex: 0 1 auto; flex-wrap: wrap; overflow-x: visible; row-gap: 0.25rem; }
.ncx-f-regions { padding-left: 0.5rem; border-left: 1px solid #e2ded5; }
@media (max-width: 520px) { .ncx-f-regions { padding-left: 0; border-left: 0; } }

/* build47l: the ticked card stands out; back-to-back partners stay secondary */
.ncx-sel-tag { display: none; flex: none; font-size: 0.6rem; font-weight: 700; padding: 0.06rem 0.34rem; border-radius: 999px; background: #0f4c45; color: #fff; white-space: nowrap; }
.ncx-card.is-selected .ncx-sel-tag { display: inline-flex; align-items: center; }
.ncx-card.is-selected, .ncx-reel[class*="ncx-t-"] .ncx-card.is-selected { border-color: #0f4c45; border-left: 4px solid #0f4c45; background: #eef6f3; box-shadow: 0 1px 4px rgba(15, 76, 69, 0.18); opacity: 1; }
.ncx-combo { display: inline-flex; align-items: center; flex: none; font-size: 0.6rem; font-weight: 700; padding: 0.06rem 0.34rem; border-radius: 999px; background: #fff4dc; color: #7a4b00; border: 1px solid #ecd29a; white-space: nowrap; }
.ncx-combo-note { margin: 0.3rem 0 0.4rem; padding: 0.35rem 0.5rem; font-size: 0.72rem; line-height: 1.4; background: #fffaf0; border: 1px solid #ecd29a; border-radius: 6px; color: #3a3328; }
.ncx-combo-note .ncx-empty-fix { margin-left: 0.3rem; }

/* build47m: day tags by trip-leg type */
.journey-badge.journey-badge.seg-ocean { color: #1f3a5f; background: #e3eaf3; }
.journey-badge.journey-badge.seg-river { color: #17625d; background: #dcefec; }
.journey-badge.journey-badge.seg-land { color: #7a5520; background: #f3e6cf; }
.journey-badge.journey-badge.seg-hotel { color: #6e3b49; background: #f2e3e7; }
/* build47m: trip-leg tag on Day by day rows */
.port-item .port-seg { display: inline-block; margin-top: 2px; font-size: 0.58rem; padding: 0.05rem 0.4rem; border-radius: 999px; letter-spacing: 0.03em; text-transform: uppercase; font-weight: 700; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }

/* build47m: phone / tablet pass — desktop untouched (all rules inside narrow-width queries) */
.pricing-layout > *, .pricing-side > *, .pricing-panel .pc-table-wrap { min-width: 0; }
@media (max-width: 960px) {
  .pricing-layout, .pricing-side, .pc-root { grid-template-columns: minmax(0, 1fr); }
  .pc-summary { flex-wrap: wrap; }
  .mkt-hero-ctl { min-width: 0; max-width: 100%; } .mkt-hero-btns { flex-wrap: wrap; }
}
/* tap targets ≥ 40px on phones and touch tablets */
@media (max-width: 600px), (max-width: 1024px) and (pointer: coarse) {
  #app button:not(.ncx-f-chip):not(.ncx-sel-tag), #app select, #app input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]), .page-back, .linklike { min-height: 40px; }
  #app .ncx-f-chip { min-height: 36px; min-width: 40px; }
  #app input[type=checkbox], #app input[type=radio] { width: 22px; height: 22px; }
}
@media (max-width: 600px) {
  /* package map viewer: full screen, scrolls vertically (stacked layout from packageMap.js) */
  .ncx-pm { padding: 0; align-items: stretch; }
  .ncx-pm-box { border-radius: 0; max-height: 100dvh; height: 100dvh; }
  .ncx-pm-stage { overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; }
}
/* build47q: Marketing — Saved packages panel */
.mkt-saved { border: 1px solid #e3e0d8; border-radius: 10px; background: #fff; padding: .6rem .75rem; margin: .4rem 0 .8rem; }
.mkt-sp-head { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; margin-bottom: .4rem; }
.mkt-sp-head input { flex: 1 1 240px; min-width: 0; padding: .35rem .6rem; border: 1px solid #cfd6d4; border-radius: 8px; font: inherit; font-size: .85rem; }
.mkt-sp-list { list-style: none; margin: 0; padding: 0; max-height: 260px; overflow-y: auto; }
.mkt-sp-row { display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding: .4rem .3rem; border-top: 1px solid #f0ede6; }
.mkt-sp-row:first-child { border-top: 0; }
.mkt-sp-row.is-on { background: #f1f7f6; border-radius: 6px; }
.mkt-sp-main { display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .5rem; min-width: 0; font-size: .85rem; }
.mkt-sp-main small { color: #6b7775; flex-basis: 100%; }
.mkt-sp-name { font-weight: 600; }
.mkt-sp-acts { display: flex; gap: .35rem; flex-shrink: 0; }
.mkt-sp-exp { font-size: .72rem; color: #8a5a00; background: #fdf3dc; border-radius: 999px; padding: 0 .5rem; }
.mkt-sp-exp.is-out { color: #8a2b2b; background: #fbe4e4; }
.mkt-sp-sub { margin: .6rem 0 .2rem; font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; color: #6b7775; }
@media (max-width: 600px) { .mkt-sp-row { flex-direction: column; align-items: stretch; } .mkt-sp-acts { justify-content: flex-start; } }

/* build47r: pick the hero sales image from any photo tile */
.mkt-hero-pick { position: relative; display: block; width: 100%; padding: 0; border: 3px solid transparent; border-radius: 8px; background: none; cursor: pointer; line-height: 0; }
.mkt-hero-pick img { display: block; width: 100%; border-radius: 5px; }
.mkt-hero-pick:hover { border-color: rgba(29, 107, 115, 0.45); }
.mkt-port.is-hero .mkt-hero-pick, li.is-hero .mkt-hero-pick, .mkt-gal-pick.is-on { border-color: #1d6b73 !important; box-shadow: 0 0 0 2px rgba(29, 107, 115, 0.25); }
.mkt-hero-badge { position: absolute; top: 6px; left: 6px; background: #1d6b73; color: #fff; font: 700 10px/1 system-ui, sans-serif; letter-spacing: .06em; text-transform: uppercase; padding: 4px 7px; border-radius: 999px; box-shadow: 0 1px 3px rgba(0,0,0,.3); }
.mkt-own-pick { display: inline-block; width: auto; vertical-align: middle; }
.mkt-port:not(.can-hero) > img { cursor: not-allowed; }
.mkt-gal-pick { position: relative; }

/* build47r trip tray */
.ncx-trip-tray{position:fixed;right:18px;bottom:18px;z-index:900;border:0;border-radius:24px;background:#c9a35b;color:#10303e;font:700 14px/1.2 system-ui,sans-serif;padding:12px 18px;box-shadow:0 4px 14px rgba(0,0,0,.25);cursor:pointer;display:flex;gap:10px;align-items:center}
.ncx-trip-tray[hidden]{display:none}.ncx-trip-tray span{font-weight:600}
.ncx-flash{animation:ncxFlash 1.4s}@keyframes ncxFlash{0%,60%{box-shadow:0 0 0 4px #c9a35b}100%{box-shadow:none}}
#ncx-filter .ncx-f-brand select,#ncx-filter .ncx-f-ship select{max-width:220px}
@media(max-width:600px){#ncx-filter select{min-height:40px;font-size:15px}}

/* build47r: no scroll-anchoring jumps when the map or package panels redraw */
#map-stage, #map-stage *, .ncx-package, #ncx-journey-summary { overflow-anchor: none; }

/* build47r: Maps is the core product; Nautical CX + its tools are a separate (upsell) suite — visual grouping only */
.app-mode-toggle{align-items:center}
.app-mode-divider{display:inline-block;width:1px;height:26px;margin:0 10px 0 6px;background:linear-gradient(180deg,transparent,rgba(201,163,91,.85),transparent);flex:0 0 auto}
.app-pro-group{position:relative;display:inline-flex;align-items:center;gap:4px;padding:4px 5px;border:1px solid rgba(201,163,91,.7);border-radius:999px;background:linear-gradient(180deg,rgba(201,163,91,.10),rgba(201,163,91,.03));box-shadow:inset 0 0 0 1px rgba(255,255,255,.04)}
.app-pro-label{position:absolute;top:-8px;left:16px;padding:0 6px;font:600 8.5px/14px system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#e3c98f;background:#0f3b44;border-radius:6px;white-space:nowrap;pointer-events:none}
.app-pro-label b{color:#10303e;background:#c9a35b;border-radius:3px;padding:0 4px;margin-left:3px;font-weight:700;letter-spacing:.1em}
@media(max-width:760px){
  .app-mode-toggle{flex-wrap:wrap;row-gap:12px}
  .app-mode-divider{display:none}
  .app-pro-group{flex-wrap:wrap;border-radius:14px;padding:9px 6px 5px;width:100%;justify-content:flex-start}
}

/* build47r2: finder filters — one tidy row of matching dropdowns */
#ncx-filter .ncx-f-row{display:flex;flex-wrap:wrap;align-items:flex-end;gap:8px 10px}
#ncx-filter .ncx-f-row label{display:flex;flex-direction:column;gap:2px;margin:0}
#ncx-filter .ncx-f-row label>span{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:#5d6b70;font-weight:600}
#ncx-filter .ncx-f-row select{height:36px;min-width:120px;max-width:220px;padding:0 30px 0 10px;border:1px solid #cfd8d6;border-radius:8px;background-color:#fff;font:inherit;font-size:14px;color:#10303e}
#ncx-filter .ncx-f-row select:focus{outline:2px solid #1d6b73;outline-offset:1px}
#ncx-filter .ncx-f-clear-btn{height:36px;padding:0 16px;border:1px solid #1d6b73;border-radius:8px;background:#fff;color:#1d6b73;font-weight:600;cursor:pointer}
#ncx-filter .ncx-f-clear-btn:disabled{opacity:.45;cursor:default}
@media(max-width:600px){#ncx-filter .ncx-f-row{display:grid;grid-template-columns:1fr 1fr;gap:8px}#ncx-filter .ncx-f-row select{width:100%;max-width:none;min-width:0;height:44px;font-size:16px}#ncx-filter .ncx-f-clear-btn{height:44px}}
#ncx-filter .ncx-f-row label>span{text-align:left;padding-left:2px}

/* build47s3: add-on component badges + result sort */
.go-addons, .addons-badge { display: inline-block; vertical-align: middle; margin-left: 8px; padding: 2px 9px; border-radius: 999px; border: 1px solid #c9a24a; background: #fbf4e2; color: #7a5a12; font: 600 12px/1.5 "Source Sans 3", system-ui, sans-serif; letter-spacing: .02em; white-space: nowrap; }
.addons-badge { margin-left: 0; }
.results-table td.col-addons, .results-table th.col-addons { white-space: nowrap; }
.results-sort { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: inherit; }
.results-sort select { min-height: 30px; font-size: 13px; }
#go-sort { flex: 0 0 auto; }