/* ============================================================
   Odyssey Rebuild Baseline — v2 (Back to classic Odyssey aesthetic)
   Build: baseline-v5-2026-02-23

   Goals:
   - Restore your previous look/feel: warm parchment, gold accent, small-caps labels
   - Restore the familiar layout primitives: app / oracleShell / inputsRow / grid / panel / oracleBubble
   - Keep Mapbox + modular JS from v1
   ============================================================ */

:root{
  --gold:#d7b35a;

  /* Color system (matches your prior baseline naming) */
  --bg:#ffffff;
  --bg2:#f6f4ef;                 /* warm parchment */
  --panel:rgba(0,0,0,0.04);
  --panel2:rgba(0,0,0,0.06);

  --text:rgba(17,17,19,0.92);
  --text2:rgba(17,17,19,0.72);
  --muted:rgba(17,17,19,0.56);

  --line:rgba(0,0,0,0.10);
  --line2:rgba(0,0,0,0.14);

  --accent:#b79a63;
  --accent2:#8f7a48;

  --radius:14px;
  --gap:12px;
  --shadow:0 14px 40px rgba(0,0,0,0.12);

  --controlH:42px;

  /* Top controls sizing */
  --topControlW: 250px;
  --topGap: 14px;
  --genW: 190px;
  --genBtnH: var(--controlH);
  --genSep: 14px;

  /* Oracle inner width ends where General Interests ends (4 controls) */
  --oracleMaxWAdd: 200px;
  --oracleMaxW: calc((var(--topControlW) * 4) + (var(--topGap) * 3) + var(--oracleMaxWAdd));
}

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

html,body{
  height:100%;
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Ubuntu,"Helvetica Neue",Arial,sans-serif;
  overflow:hidden; /* desktop: panels scroll internally */
}

button,input,select,textarea{ font-family:inherit; color:inherit; }
a{ color:inherit; text-decoration:none; }

.muted{ color:var(--muted); }

/* ------------------------------------------------------------
   TYPE SYSTEM: unified small-caps labels
   ------------------------------------------------------------ */
.fieldLabel,
.chipsTitle,
.oracleBubbleTitle,
.panelTitleSmall{
  font-size:11px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  font-weight:800;
  color:var(--text2);
}

.brandName{
  font-size:15px;
  font-weight:900;
  letter-spacing:0.14em;
  text-transform:uppercase;
}

.oracleBubbleTitle{ color:var(--accent); }

/* ------------------------------------------------------------
   APP SHELL
   ------------------------------------------------------------ */
.app{
  height:100vh;
  padding:10px;
  padding-bottom:140px; /* reserve space above fixed Oracle bubble */
}

.app--itinerary{
  display:flex;
  flex-direction:column;
  gap:var(--gap);
  overflow:hidden;
}

.app--home{
  display:flex;
  flex-direction:column;
  gap:var(--gap);
}

/* ------------------------------------------------------------
   TOP MENU (simple, classic)
   ------------------------------------------------------------ */
.menu{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}

.menuTitleWrap{ display:flex; flex-direction:column; gap:4px; min-width:0; }
.menuTitle{
  font-size:32px;
  font-weight:300;
  letter-spacing:0.10em;
  line-height:1.1;
  white-space:nowrap;
  color:var(--text);
}
.menuSubtitle{
  font-size:12px;
  font-weight:400;
  letter-spacing:0.06em;
  color:var(--muted);
  opacity:0.85;
}

.menuActions{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; justify-content:flex-end; }

.buildPill{
  font-size:11px;
  letter-spacing:0.12em;
  text-transform:uppercase;
  padding:8px 10px;
  border-radius:999px;
  border:1px solid var(--line);
  background:var(--panel);
  color:var(--muted);
}

/* ------------------------------------------------------------
   BUTTONS / INPUTS
   ------------------------------------------------------------ */
.btn{
  padding:8px 12px;
  border-radius:10px;
  border:1px solid var(--line);
  background:var(--panel);
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
}

.btn.primary{
  background:var(--accent);
  color:#111;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:0.14em;
  font-size:12px;
}

.btn.primary:hover{ background:#a88e5a; transform:translateY(-1px); }

.btn.ghost{ background:transparent; }
.btn.tiny{ padding:6px 8px; font-size:12px; }

.input{
  width:100%;
  min-height:var(--controlH);
  height:var(--controlH);
  border-radius:12px;
  border:1px solid var(--line);
  background:var(--bg2);
  padding:10px 12px;
  outline:none;
}

.input:focus{ border-color:var(--accent); box-shadow:0 0 0 3px rgba(183,154,99,0.18); }

.field{ display:flex; flex-direction:column; gap:6px; min-width:0; }
.combo{ display:flex; gap:8px; align-items:center; }
.combo .btn{ height:var(--controlH); }

/* ------------------------------------------------------------
   ORACLE SHELL + INPUTS ROW (your classic 5-col bar)
   ------------------------------------------------------------ */
.oracleShell{}
.inputsRow{
  display:grid;
  grid-template-columns: var(--topControlW) var(--topControlW) var(--topControlW) var(--topControlW) var(--genW);
  gap: var(--topGap);
  align-items:stretch;
}

.generateCol--inline{
  justify-self:start;
  align-self:start;
  padding-left: var(--genSep);
  border-left: 1px solid var(--line);
}

#btnGenerate{
  width:100%;
  height: var(--genBtnH);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  box-shadow:0 6px 20px rgba(183,154,99,0.35);
}

.helperText{
  font-size:12px;
  color:var(--muted);
  margin-top:4px;
}

/* ------------------------------------------------------------
   PANELS / GRID (3 panels: Map / Itinerary / Details)
   ------------------------------------------------------------ */
.grid{
  display:grid;
  grid-template-columns: 70% 30%; /* explicit split: Map 70%, Itinerary 30% */
  gap: var(--gap);
  width:100%;
  height: 100%;
  min-height:0;
  align-items:stretch;
}

.panel{
  background:linear-gradient(180deg,var(--panel2),var(--panel));
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  border:1px solid var(--line);
  display:flex;
  flex-direction:column;
  min-height:0;
  overflow:hidden;
}

.panelTop{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:12px 14px;
  border-bottom:1px solid var(--line);
  gap:10px;
}

.panelTitle{ font-weight:900; }
.panelTools{ display:flex; gap:8px; align-items:center; }

.panelBody{ flex:1 1 auto; min-height:0; overflow:auto; padding:12px; }

.mapWrap{ position:relative; flex:1 1 auto; min-height:0; }
.map{ position:absolute; inset:0; border-radius:12px; overflow:hidden; }
#map{ width:100%; height:100%; }

.statusPill{
  font-size:11px;
  letter-spacing:0.10em;
  text-transform:uppercase;
  padding:7px 10px;
  border-radius:999px;
  border:1px solid var(--line);
  background:rgba(255,255,255,0.55);
  color:var(--text2);
}
.devPill{
  font-size:11px;
  letter-spacing:0.06em;
  padding:4px 9px;
  border-radius:999px;
  background:#e8f0fe;
  color:#1a73e8;
  border:1px solid #aecbfa;
  font-weight:600;
  align-self:center;
}

/* ------------------------------------------------------------
   Suggest dropdown
   ------------------------------------------------------------ */
.suggest{
  margin-top:8px;
  border:1px solid var(--line);
  border-radius:12px;
  background:#fff;
  box-shadow:var(--shadow);
  overflow:hidden;
}

.suggestItem{ padding:10px 12px; cursor:pointer; border-top:1px solid rgba(0,0,0,0.06); }
.suggestItem:hover{ background:rgba(183,154,99,0.10); }
.suggestItemTitle{ font-weight:900; }
.suggestItemSub{ font-size:12px; color:var(--muted); margin-top:2px; }

/* ------------------------------------------------------------
   Chips
   ------------------------------------------------------------ */
.chipsRow{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; }

.chip{
  border:1px solid rgba(0,0,0,0.10);
  background:rgba(255,255,255,0.55);
  border-radius:999px;
  padding:7px 10px;
  font-size:12px;
  font-weight:900;
  letter-spacing:0.06em;
  cursor:pointer;
  color:var(--text2);
}

.chip.isActive{ border-color: rgba(183,154,99,0.55); background: rgba(183,154,99,0.18); color: var(--text); }
.chip .x{ margin-left:8px; opacity:0.7; }

/* ------------------------------------------------------------
   Itinerary list cards (simple baseline)
   ------------------------------------------------------------ */
.emptyState{
  padding:14px;
  border:1px dashed rgba(0,0,0,0.16);
  border-radius:14px;
  background:rgba(255,255,255,0.55);
}

.emptyTitle{ font-weight:950; }
.emptySub{ margin-top:4px; color:var(--muted); font-size:12px; }

.stopCard{
  border:1px solid var(--line);
  border-radius:12px;
  background:rgba(255,255,255,0.55);
  padding:10px;
  cursor:pointer;
  margin-bottom:10px;
}

.stopCard:hover{ border-color:var(--line2); }
.stopName{ font-weight:950; }
.stopMeta{ color:var(--muted); font-size:12px; margin-top:4px; }
.stopTime{ font-size:11px; letter-spacing:0.10em; text-transform:uppercase; color:var(--accent2); font-weight:950; }

/* ------------------------------------------------------------
   ORACLE BUBBLE (fixed bottom, classic)
   ------------------------------------------------------------ */
.oracleBubble{
  position:fixed;
  left:10px;
  right:10px;
  bottom:28px;
  z-index:900;
}

.oracleBubbleInner{
  background:linear-gradient(180deg,var(--panel2),var(--panel));
  border:1px solid var(--line);
  border-radius:16px;
  box-shadow:var(--shadow);
  padding:12px;
  width:100%;
  max-width: var(--oracleMaxW);
  margin: 0 auto 0 0; /* left aligned */
}

.oracleBubbleTop{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
}

.oracleBubbleHint{
  font-size:12px;
  color:var(--muted);
  flex:1;
  text-align:right;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.oracleBubbleRow{ display:flex; gap:10px; align-items:stretch; }

.oracleInput{
  flex:1;
  resize:none;
  background:var(--bg2);
  border:1px solid var(--line);
  border-radius:12px;
  padding:10px 12px;
  line-height:1.35;
  min-height:44px;
}

.oracleInput:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(183,154,99,0.18); }

/* ------------------------------------------------------------
   Responsive
   ------------------------------------------------------------ */
@media (max-width: 980px){
  html, body{ overflow:auto; height:auto; }
  .app{ height:auto; min-height:100vh; padding-bottom: var(--gap); overflow:visible; }
  .grid{ grid-template-columns:1fr; grid-template-rows:auto auto auto; height:auto; }
  .mapWrap{ height: 52vh; min-height: 45vh; }
  .oracleBubble{ position:static; left:auto; right:auto; bottom:auto; margin-top:12px; }
  .oracleBubbleInner{ max-width:100%; margin:0; }
  .inputsRow{ display:flex; flex-direction:column; gap:12px; }
  .generateCol--inline{ padding-left:0; border-left:none; }
  #btnGenerate{ height:64px; min-height:64px; }
}


/* ============================================================
   v4 Layout hardening (full screen + 70/30 like the old index)
   ============================================================ */

/* Full-screen app; internal scrolling only */
html, body{
  height:100%;
}
body{
  overflow:hidden;
}

/* App reserves oracle bubble space but keeps grid full-height */
.app{
  height:100vh;
  max-height:100vh;
  overflow:hidden;
}

/* Allow grid children to shrink properly */
.grid > *{
  min-width:0;
}

/* Map panel: map always fills and looks “big” */
.mapPanel .panelBody{
  padding:10px;
}
.mapWrap{
  height:100%;
  min-height:0;
}
.map{
  border-radius:12px;
}

/* Itinerary: keep header visible, body scrolls */
.itineraryPanel .panelBody{
  overflow:auto;
}

/* Tighten panel chrome to match classic UI density */
.panelTop{
  padding:10px 12px;
}
.panelBody{
  padding:12px;
}

/* On very wide screens, keep the overall density similar */
@media (min-width: 1400px){
  :root{
    --gap:12px;
  }
}

/* On smaller screens, keep the mobile collapse behavior */
@media (max-width: 980px){
  body{ overflow:auto; }
  .app{ height:auto; max-height:none; overflow:visible; }
  .grid{ grid-template-columns:1fr; height:auto; }
  .mapWrap{ height:52vh; min-height:45vh; }
}


/* v5: subtle divider between map + itinerary like the old layout */
.grid::after{
  content:"";
  position:absolute;
  pointer-events:none;
  left:70%;
  top:0;
  bottom:0;
  width:1px;
  background:rgba(0,0,0,0.06);
  transform:translateX(calc(var(--gap) / 2));
  display:none;
}
@supports (display:grid){
  .grid{ position:relative; }
  .grid::after{ display:block; }
}
@media (max-width: 980px){
  .grid::after{ display:none; }
}

/* ===== Odyssey v14 pages styles (merged) ===== */
/* v14: account + my-odysseys components */
.accountCard{ display:flex; flex-direction:column; gap:12px; }
.accountRow{ display:flex; gap:12px; align-items:center; }
.accountAvatar{
  width:44px; height:44px; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  background: rgba(0,0,0,0.08);
  font-weight:800;
}
.accountName{ font-size:18px; font-weight:800; }
.accountEmail{ opacity:0.85; }
.divider{ height:1px; background: rgba(0,0,0,0.08); margin:8px 0; }
.accountActions{ display:flex; gap:10px; flex-wrap:wrap; }

.odyCards{ display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap:12px; }
@media (max-width: 900px){ .odyCards{ grid-template-columns:1fr; } }

.odyCard{
  border:1px solid rgba(0,0,0,0.10);
  border-radius:14px;
  background: rgba(255,255,255,0.65);
  padding:12px;
  box-shadow: 0 10px 26px rgba(0,0,0,0.05);
}
.odyCardTop{ display:flex; flex-direction:column; gap:6px; }
.odyCardTitle{ font-weight:900; font-size:16px; }
.odyCardMeta{ opacity:0.8; font-size:13px; }
.odyCardActions{ margin-top:10px; display:flex; gap:8px; }

/* ===== end v14 pages styles ===== */
/* ============================================================
   OB18 MAPBOX VISIBILITY FIX (2026-02-24)
   Ensures the Mapbox container has real height so the map renders.
   ============================================================ */
.mapWrap { position: relative; width: 100%; min-height: 520px; height: 100%; }
#map.map, #map { width: 100%; min-height: 520px; height: 100%; }
.panel.mapPanel .panelBody { min-height: 560px; }

.interestRow {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}

.interestRow .chipsRow {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* ------------------------------------------------------------
   OB18 UI: Generate button height = input height, align controls, hide Fit
   ------------------------------------------------------------ */
.inputsRow{
  align-items:end; /* align control baselines */
}

.fieldLabel{
  display:block;
  min-height:14px; /* keep labels consistent so inputs line up */
}

.generateCol--inline{
  align-self:end;
  padding-top: 20px; /* label(14) + gap(6) to align with inputs row */
}

#btnGenerate{
  height: 44px !important;
  min-height: 44px !important;
  flex-direction:row !important;
}

#btnFit, .btnFit, .fitBtn, [data-action="fit"]{
  display:none !important;
}


/* ==== baseline-v9-2026-02-25b additions ==== */

/* Hide preset interest suggestion chips (keeps underlying state logic intact) */
/* Save button next to itinerary title */
.itineraryPanel .panelTop { gap: 10px; }

/* Map markers */
.odyMarker{
  width: 14px;
  height: 14px;
  border-radius: 999px;
  box-shadow: 0 1px 4px rgba(0,0,0,.35);
  border: 2px solid rgba(255,255,255,.95);
  background: rgba(0,0,0,.85);
  cursor: pointer;
}
/* g43: Hotel markers always on top + larger + distinct color */
.odyMarker--hotel{
  width: 20px;
  height: 20px;
  background: #4a3f8a;
  z-index: 10 !important;
  border: 2.5px solid #fff;
}
.odyMarker--activity{
  background: #2c3e50;
  z-index: 2;
}
.odyMarker--food{
  background: #c9a84c;
  z-index: 1;
}
.odyMarker.isActive{
  transform: scale(1.35);
  box-shadow: 0 2px 10px rgba(0,0,0,.5);
  z-index: 20 !important;
}

/* Make Generate button match input height more consistently */
.generateCol--inline .btn.primary{
  min-height: 44px;
}
.inputsRow .input{
  min-height: 44px;
}


/* ------------------------------------------------------------
   INPUT INLINE ACTION BUTTONS (Must-see / Interests)
   ------------------------------------------------------------ */
.comboInlineAction{
  position:relative;
}
.comboInlineAction .input{
  padding-right:64px; /* room for Add */
}
.inlineActionBtn{
  position:absolute;
  right:12px;
  top:50%;
  transform:translateY(-50%);
  background:transparent;
  border:none;
  padding:0;
  font-weight:900;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--gold);
  cursor:pointer;
}
.inlineActionBtn:disabled{
  opacity:0.5;
  cursor:not-allowed;
}

/* ------------------------------------------------------------
   FORM ALIGNMENT
   ------------------------------------------------------------ */
.leftControls .field{
  width:100%;
}
.leftControls .combo{
  width:100%;
}
.leftControls .input{
  width:100%;
}


/* ------------------------------------------------------------
   INPUT ROW ALIGNMENT (Destination / Dates / Generate)
   ------------------------------------------------------------ */
.topControlsRow, .controlsRow, .inputRow{
  align-items:stretch;
}
.topControlsRow .field, .controlsRow .field, .inputRow .field{
  display:flex;
  flex-direction:column;
}
.topControlsRow .btn, .controlsRow .btn, .inputRow .btn{
  height:44px;
}
.topControlsRow .input, .controlsRow .input, .inputRow .input{
  height:44px;
}


/* ------------------------------------------------------------
   INPUT DASHBOARD CHIPS ROW (single thin row under inputs)
   ------------------------------------------------------------ */
.inputDashboardChips{
  display:flex;
  gap:8px;
  align-items:center;
  padding:8px 2px 2px 2px;
  overflow-x:auto;
  overflow-y:hidden;
  white-space:nowrap;
}
.inputDashboardChips::-webkit-scrollbar{ height:6px; }
.inputDashboardChips .chip{
  padding:4px 10px;
  font-size:11px;
  font-weight:900;
  letter-spacing:0.06em;
}
.chip--mustsee{
  background:rgba(120,180,255,0.20);
  border:1px solid rgba(120,180,255,0.35);
  color:rgba(18,60,120,0.95);
}
.chip--interest{
  background:rgba(215,179,90,0.18);
  border:1px solid rgba(215,179,90,0.35);
  color:rgba(120,85,10,0.95);
}

/* Hide the per-field chip rows; we now render a single row under the dashboard */
#mustSeeChips, #customInterestChips{ display:none; }

/* ------------------------------------------------------------
   INPUT DASHBOARD VERTICAL ALIGNMENT
   ------------------------------------------------------------ */
.inputsRow{ align-items:stretch; }
.generateCol--inline{
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  align-self:stretch; /* override earlier align-self:start so button aligns with inputs */
}
.generateCol--inline .btn{ width:100%; height:44px; min-height:44px; box-sizing:border-box; }
.inputsRow .input{ height:44px; box-sizing:border-box; }

/* ------------------------------------------------------------
   INPUT DASHBOARD: micro-align Interests field
   ------------------------------------------------------------ */
#generalInterestsField{ margin-top:-2px; }


/* ------------------------------------------------------------
   MAP GENERATION OVERLAY (progress bar + current step)
   ------------------------------------------------------------ */
#map{ position:relative; }
.mapGenOverlay{
  position:absolute;
  left:12px;
  right:12px;
  top:12px;
  z-index:50;
  background:rgba(255,255,255,0.92);
  border:1px solid rgba(0,0,0,0.08);
  border-radius:12px;
  padding:10px 12px;
  box-shadow:0 8px 20px rgba(0,0,0,0.08);
  backdrop-filter: blur(8px);
}
.mapGenOverlay[hidden]{ display:none !important; }
.mapGenBar{
  height:10px;
  border-radius:999px;
  background:rgba(0,0,0,0.08);
  overflow:hidden;
}
.mapGenBarFill{
  height:100%;
  width:0%;
  border-radius:999px;
  background:rgba(215,179,90,0.95); /* gold */
  transition: width 180ms ease;
}
.mapGenText{
  margin-top:8px;
  font-size:12px;
  font-weight:800;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:rgba(25,25,25,0.75);
}
.mapGenDetail{
  margin-top:4px;
  font-size:12px;
  color:rgba(25,25,25,0.70);
}

/* Micro-align Interests input box with other fields */
#generalInterestsField{ margin-top:-2px; }