/* ============================================================
   Day Trip Planner — theme & component styles
   Display: Bricolage Grotesque · Body: Hanken Grotesque
   ============================================================ */

:root {
  /* warm neutrals (sand) */
  --sand:      #F4ECDD;
  --sand-soft: #FBF6EC;
  --card:      #FFFFFF;
  --ink:       #2B2620;
  --ink-2:     #6E665A;
  --ink-3:     #9C9486;
  --line:      rgba(43,38,32,0.10);
  --line-2:    rgba(43,38,32,0.06);

  /* outdoorsy accents — shared chroma, varied hue */
  --coral:      #EE7A4E;
  --coral-press:#D9663B;
  --coral-soft: #FBE4D6;
  --sage:       #5E7C60;
  --sage-soft:  #E1EADD;
  --sky:        #4F90C4;
  --sky-soft:   #DCEAF4;
  --amber:      #E2A33C;
  --amber-soft: #F6E7C8;

  /* accent (tweakable) — set --accent only; press/soft derive from it */
  --accent:      #EE7A4E;
  --accent-press:color-mix(in oklab, var(--accent), #000 15%);
  --accent-soft: color-mix(in oklab, var(--accent), var(--sand-soft) 82%);

  /* shape + rhythm (tweakable) */
  --r:    20px;            /* base radius */
  --r-sm: calc(var(--r) * 0.55);
  --r-lg: calc(var(--r) * 1.35);
  --r-pill: 999px;
  --pad: 1;                /* density multiplier */

  --shadow-sm: 0 1px 2px rgba(43,38,32,0.05), 0 2px 6px rgba(43,38,32,0.05);
  --shadow:    0 2px 6px rgba(43,38,32,0.05), 0 10px 26px rgba(43,38,32,0.08);
  --shadow-lg: 0 6px 18px rgba(43,38,32,0.08), 0 24px 60px rgba(43,38,32,0.14);

  --font-display: 'Bricolage Grotesque', 'Hanken Grotesque', system-ui, sans-serif;
  --font-body:    'Hanken Grotesque', system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; }

.dtp {
  font-family: var(--font-body);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.dtp h1, .dtp h2, .dtp h3, .dtp .display {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0;
  text-wrap: balance;
}

/* ---------- phone frame ---------- */
.phone-bezel {
  width: 399px; height: 836px;
  background: #1b1814;
  border-radius: 54px;
  padding: 12px;
  box-shadow: var(--shadow-lg), inset 0 0 0 2px rgba(255,255,255,0.06);
  position: relative;
}
.phone-screen {
  width: 375px; height: 812px;
  border-radius: 42px;
  overflow: hidden;
  position: relative;
  background: var(--sand);
}

/* board (overview) screen — no bezel */
.board-screen {
  width: 375px;
  border-radius: 34px;
  overflow: hidden;
  position: relative;
  background: var(--sand);
  box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset, 0 10px 30px rgba(43,38,32,0.10);
}

/* ---------- status bar ---------- */
.statusbar {
  height: 50px;
  display: flex; align-items: flex-end; justify-content: space-between;
  padding: 0 26px 6px;
  position: relative; z-index: 30;
  font-family: var(--font-body);
  flex: 0 0 auto;
}
.statusbar .sb-time { font-weight: 700; font-size: 15px; letter-spacing: 0.01em; }
.statusbar .sb-right { display: flex; align-items: center; gap: 6px; }
.statusbar.light, .statusbar.light .sb-glyph { color: #fff; }
.statusbar.dark,  .statusbar.dark  .sb-glyph { color: var(--ink); }
.island {
  position: absolute; top: 9px; left: 50%; transform: translateX(-50%);
  width: 108px; height: 30px; border-radius: 18px; background: #16130f; z-index: 40;
}
.home-ind {
  position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%);
  width: 132px; height: 5px; border-radius: 99px; z-index: 45; pointer-events: none;
}
.home-ind.dark  { background: rgba(43,38,32,0.28); }
.home-ind.light { background: rgba(255,255,255,0.8); }

/* ---------- screen scaffold ---------- */
.screen { display: flex; flex-direction: column; height: 100%; position: relative; }
.screen-body { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.screen-body::-webkit-scrollbar { width: 0; display: none; }
.screen-pad { padding: 0 22px; }

/* sticky top header within a screen */
.scr-head {
  flex: 0 0 auto; padding: 4px 20px 14px;
  display: flex; align-items: center; gap: 12px;
}
.scr-title { font-family: var(--font-display); font-weight: 700; font-size: 19px; letter-spacing: -0.01em; }
.scr-sub   { color: var(--ink-2); font-size: 13.5px; }

/* ---------- buttons ---------- */
.btn {
  font-family: var(--font-body);
  font-weight: 600; font-size: 17px;
  border: none; cursor: pointer; width: 100%;
  height: 54px; border-radius: var(--btn-r, var(--r));
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  transition: transform .12s cubic-bezier(.3,.7,.4,1), background .15s, box-shadow .15s, color .15s;
  user-select: none;
}
.btn:active { transform: translateY(1px) scale(0.992); }
.btn-primary {
  background: var(--accent); color: #fff;
  box-shadow: 0 2px 4px rgba(43,38,32,0.10), 0 8px 20px color-mix(in oklab, var(--accent) 38%, transparent);
}
.btn-primary:hover { background: var(--accent-press); }
.btn-primary:disabled { background: #D8D0C2; color: #fff; box-shadow: none; cursor: not-allowed; transform: none; }
.btn-secondary {
  background: var(--card); color: var(--ink);
  box-shadow: inset 0 0 0 1.5px var(--line), var(--shadow-sm);
}
.btn-secondary:hover { background: var(--sand-soft); }
.btn-ghost { background: transparent; color: var(--ink-2); height: 44px; }
.btn-ghost:hover { color: var(--ink); background: rgba(43,38,32,0.04); }
.btn-sm { height: 44px; font-size: 15px; border-radius: var(--btn-r, var(--r-sm)); }
.btn-pill { border-radius: var(--r-pill); }

/* small icon button */
.icon-btn {
  width: 42px; height: 42px; border-radius: var(--r-pill);
  background: var(--card); border: none; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ink); box-shadow: var(--shadow-sm), inset 0 0 0 1px var(--line-2);
  transition: background .15s, transform .12s;
  flex: 0 0 auto;
}
.icon-btn:hover { background: var(--sand-soft); }
.icon-btn:active { transform: scale(0.94); }

/* ---------- cards ---------- */
.card {
  background: var(--card); border-radius: var(--r-lg);
  box-shadow: var(--shadow); position: relative;
}
.card-inset { box-shadow: inset 0 0 0 1px var(--line-2), var(--shadow-sm); }

/* ---------- field ---------- */
.field {
  background: var(--card); border-radius: var(--r);
  box-shadow: inset 0 0 0 1.5px var(--line), var(--shadow-sm);
  display: flex; align-items: center; gap: 12px;
  padding: 0 16px; height: 58px;
  transition: box-shadow .15s;
}
.field:focus-within { box-shadow: inset 0 0 0 2px var(--accent); }
.field input {
  border: none; background: transparent; outline: none; flex: 1; min-width: 0;
  font-family: var(--font-body); font-size: 16px; color: var(--ink); font-weight: 500;
}
.field input::placeholder { color: var(--ink-3); }
.field-label {
  font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-3); margin: 0 0 8px 4px;
}

/* ---------- interest chips (grid) ---------- */
.chip-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.chip {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 14px; border-radius: var(--r);
  background: var(--card); cursor: pointer; user-select: none;
  box-shadow: inset 0 0 0 1.5px var(--line), var(--shadow-sm);
  transition: transform .12s cubic-bezier(.3,.7,.4,1), box-shadow .15s, background .15s;
  font-weight: 600; font-size: 14.5px;
}
.chip:hover { transform: translateY(-1px); }
.chip[data-on="1"] {
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 2px var(--accent);
}
.chip-ico {
  width: 30px; height: 30px; border-radius: 9px; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  background: var(--sand); color: var(--ink-2);
}
.chip[data-on="1"] .chip-ico { background: var(--accent); color: #fff; }

/* ---------- slider ---------- */
.slider-wrap { padding: 4px 2px; }
.slider-val { font-family: var(--font-display); font-weight: 700; }
.range {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 8px; border-radius: 99px; outline: none;
  background: var(--sand); cursor: pointer;
}
.range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 30px; height: 30px; border-radius: 50%;
  background: #fff; border: none; cursor: grab;
  box-shadow: 0 1px 3px rgba(43,38,32,0.25), inset 0 0 0 7px var(--accent);
  transition: transform .1s;
}
.range::-webkit-slider-thumb:active { transform: scale(1.08); cursor: grabbing; }
.range::-moz-range-thumb {
  width: 30px; height: 30px; border-radius: 50%; border: none;
  background: #fff; box-shadow: 0 1px 3px rgba(43,38,32,0.25), inset 0 0 0 7px var(--accent);
}

/* ---------- toggle (keep/replace, segmented) ---------- */
.seg {
  display: inline-flex; padding: 3px; border-radius: var(--r-pill);
  background: var(--sand); box-shadow: inset 0 0 0 1px var(--line-2);
  position: relative;
}
.seg button {
  border: none; background: transparent; cursor: pointer; position: relative; z-index: 1;
  font-family: var(--font-body); font-weight: 600; font-size: 12.5px;
  padding: 7px 12px; border-radius: var(--r-pill); color: var(--ink-2);
  transition: color .18s;
}
.seg button[data-on="1"] { color: #fff; }
.seg button.keep[data-on="1"] { color: #fff; }
.seg .seg-thumb {
  position: absolute; top: 3px; bottom: 3px; border-radius: var(--r-pill);
  transition: left .2s cubic-bezier(.3,.7,.4,1), width .2s, background .2s;
  z-index: 0;
}

/* ---------- expander ---------- */
.expander {
  background: var(--card); border-radius: var(--r);
  box-shadow: inset 0 0 0 1.5px var(--line), var(--shadow-sm); overflow: hidden;
}
.expander-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 18px; cursor: pointer; user-select: none; font-weight: 600; font-size: 15px;
}
.expander-body { padding: 0 18px 18px; }

/* ---------- pills / tags ---------- */
.tag {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 11px; border-radius: var(--r-pill);
  font-size: 12.5px; font-weight: 700; letter-spacing: 0.01em;
  background: var(--sand); color: var(--ink-2);
}
.tag-sage  { background: var(--sage-soft); color: var(--sage); }
.tag-sky   { background: var(--sky-soft);  color: var(--sky); }
.tag-coral { background: var(--coral-soft);color: var(--coral-press); }
.tag-amber { background: var(--amber-soft);color: #B07A1C; }

/* summary stat */
.stat { display: flex; flex-direction: column; gap: 3px; align-items: flex-start; }
.stat .stat-k { font-size: 11.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-3); }
.stat .stat-v { font-family: var(--font-display); font-weight: 700; font-size: 20px; letter-spacing: -0.01em; white-space: nowrap; }

/* ---------- striped photo placeholder ---------- */
.ph {
  position: relative; overflow: hidden;
  background-color: var(--sand);
  background-image: repeating-linear-gradient(135deg,
    rgba(43,38,32,0.05) 0, rgba(43,38,32,0.05) 1px,
    transparent 1px, transparent 11px);
  display: flex; align-items: center; justify-content: center;
}
.ph-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.ph.ph-sage { background-color: var(--sage-soft); }
.ph.ph-sky  { background-color: var(--sky-soft); }
.ph.ph-coral{ background-color: var(--coral-soft); }
.ph-label {
  font-family: 'Hanken Grotesque', monospace;
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.04em;
  color: var(--ink-3); text-transform: lowercase;
  background: rgba(255,255,255,0.72); padding: 4px 9px; border-radius: 99px;
  backdrop-filter: blur(2px);
}

/* ---------- stop row (itinerary) ---------- */
.stop {
  display: flex; gap: 14px; cursor: pointer;
  transition: transform .12s;
}
.stop:active { transform: scale(0.99); }
.stop-rail { display: flex; flex-direction: column; align-items: center; flex: 0 0 auto; width: 30px; }
.stop-num {
  width: 30px; height: 30px; border-radius: 50%; flex: 0 0 auto;
  background: var(--accent); color: #fff;
  font-family: var(--font-display); font-weight: 700; font-size: 14px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 5px color-mix(in oklab, var(--accent) 40%, transparent);
}
.stop-line { flex: 1; width: 2px; background: var(--line); margin: 6px 0; border-radius: 2px; }
.stop-line.dashed { background: none; border-left: 2px dashed var(--line); width: 0; }

/* drive-time connector */
.drive {
  display: flex; align-items: center; gap: 7px;
  color: var(--ink-3); font-size: 12.5px; font-weight: 600;
  padding: 8px 0 8px 44px;
}

/* spinning compass */
@keyframes dtp-spin { to { transform: rotate(360deg); } }
@keyframes dtp-spin-rev { to { transform: rotate(-360deg); } }
@keyframes dtp-pulse { 0%,100% { opacity: .35; } 50% { opacity: 1; } }
@keyframes dtp-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.spin { animation: dtp-spin 3.4s linear infinite; transform-origin: center; }
.spin-rev { animation: dtp-spin-rev 8s linear infinite; transform-origin: center; }

/* screen transition */
.scr-enter { animation: dtp-fade .32s cubic-bezier(.2,.7,.3,1) both; }

/* misc */
.muted { color: var(--ink-2); }
.faint { color: var(--ink-3); }
.divider { height: 1px; background: var(--line); }
.row { display: flex; align-items: center; }
.between { justify-content: space-between; }
.gap8 { gap: 8px; } .gap12 { gap: 12px; } .gap16 { gap: 16px; }