:root {
  color-scheme: light;
  /* RouteRover palette — Midnight Navy + Pine Green + Sunset Orange + Sky
     Mist on the brand-spec warm gray canvas (#F3F1EE). Variable names
     ("--teal", "--terra"…) are preserved so existing component styling
     auto-picks up the hues. */
  --bg: #F3F1EE;
  --bg-deep: #E8E5DF;
  --paper: #FDFCFA;
  --panel: #ffffff;
  --ink: #0F1D2D;         /* Midnight Navy — headings and primary text */
  --ink-soft: #2a3a4d;
  --muted: #6e7d8a;
  --line: #d8dde4;
  --line-strong: #aab4be;
  --teal: #2E7D6B;        /* Pine Green — primary accent, brand "Rover" half */
  --teal-deep: #1f5a4d;
  --teal-soft: #d3e5df;
  --terra: #FF6B4A;       /* Sunset Orange — pin / highlights / shared-trip */
  --terra-deep: #d9482a;
  --terra-soft: #ffd9cc;
  --mist: #BFD3D9;        /* Sky Mist — soft strokes, mountain silhouettes */
  --shadow-sm: 0 1px 2px rgba(15, 29, 45, 0.06), 0 0 0 1px rgba(15, 29, 45, 0.04);
  --shadow-md: 0 8px 24px rgba(15, 29, 45, 0.12), 0 1px 2px rgba(15, 29, 45, 0.05);
  --shadow-lg: 0 24px 60px rgba(15, 29, 45, 0.20), 0 2px 6px rgba(15, 29, 45, 0.06);
  --serif: "Cormorant Garamond", ui-serif, "Iowan Old Style", Georgia, serif;
  --sans: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  /* Brand display font — Poppins SemiBold per the brand asset guide.
     Used for the RouteRover wordmark on every surface (panel header,
     mobile sheet handle, landing nav, legal nav) so the rendered
     wordmark sits closer to the designed logo wordmark. */
  --display: "Poppins", "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 18px;
  --radius-xl: 26px;
  --sheet-peek: 100px;
}

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  height: 100dvh;
  overflow: hidden;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

button,
input,
textarea {
  font: inherit;
  color: inherit;
}

input,
textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--panel);
  color: var(--ink);
  padding: 10px 13px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

input::placeholder,
textarea::placeholder {
  color: var(--muted);
}

input:focus,
textarea:focus {
  outline: 0;
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(15, 85, 86, 0.14);
}

textarea {
  resize: vertical;
  min-height: 56px;
  line-height: 1.45;
}

/* ============ Buttons ============ */

.btn {
  appearance: none;
  border: 0;
  border-radius: 999px;
  padding: 10px 18px;
  min-height: 42px;
  font-family: var(--sans);
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  transition: background 0.15s ease, transform 0.05s ease, box-shadow 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  white-space: nowrap;
}

.btn:active {
  transform: translateY(1px);
}

.btn:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
}

.btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.btn-primary {
  background: var(--teal);
  color: white;
}

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

.btn-secondary {
  background: var(--ink);
  color: var(--bg);
}

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

.btn-ghost {
  background: transparent;
  border: 1px solid var(--line-strong);
  color: var(--ink-soft);
}

.btn-ghost:hover {
  background: var(--paper);
  color: var(--ink);
}

/* ============ Layout ============ */

.app-shell {
  display: grid;
  grid-template-columns: minmax(420px, 500px) 1fr;
  grid-template-areas: "controls map";
  height: 100dvh;
}

.map-panel {
  grid-area: map;
  position: relative;
  min-width: 0;
  height: 100%;
  background: linear-gradient(180deg, #e3ddca, #d6cfb6);
}

.map-canvas {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.empty-map {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  gap: 8px;
  text-align: center;
  color: var(--muted);
  padding: 24px;
}

.empty-map strong {
  display: block;
  color: var(--ink);
  font-family: var(--serif);
  font-size: 2.2rem;
  font-style: italic;
  font-weight: 500;
  letter-spacing: -0.01em;
}

/* ============ Sidebar / Sheet ============ */

.control-panel {
  grid-area: controls;
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  border-right: 1px solid var(--line);
  height: 100%;
  min-height: 0;
  z-index: 5;
}

.control-panel::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 220px;
  background:
    radial-gradient(120% 80% at 0% 0%, rgba(15, 85, 86, 0.08), transparent 60%),
    radial-gradient(80% 100% at 100% 0%, rgba(197, 87, 58, 0.07), transparent 60%);
  pointer-events: none;
}

.sheet-handle {
  display: none;
}

.panel-scroll {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: auto;
  /* No top padding — .brand-row supplies its own padding and bleeds to
     the panel edges as a navy sticky header. Side + bottom padding
     stay on the scroll container for the rest of the content. */
  padding: 0 30px 40px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.panel-scroll > * {
  flex-shrink: 0;
}

/* Brand row — Midnight Navy sticky header inside the panel, matches
   the landing nav styling so the two surfaces share the same chrome. */

.brand-row {
  position: sticky;
  top: 0;
  z-index: 6;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  /* Negative side margins cancel the panel-scroll's 30px side padding
     so the navy bar reaches the panel's left + right edges. */
  margin: 0 -30px 16px;
  padding: 12px 22px;
  background: rgba(15, 29, 45, 0.94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.brand-logo {
  display: block;
  height: 32px;
  width: auto;
}

.brand-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Icon buttons + account chip on the navy bar — light glass styling
   so they read against the dark backdrop. */
.brand-row .icon-button {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.18);
  color: #fff;
}
.brand-row .icon-button:hover {
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
}
.brand-row .account-chip {
  background: var(--terra);
  border-color: var(--terra);
  color: #fff;
}
.brand-row .account-chip:hover {
  background: var(--terra-deep);
  border-color: var(--terra-deep);
}

/* Trips popover */

.trips-wrapper {
  position: relative;
}

.trips-popover {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: min(320px, 90vw);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: 14px;
  z-index: 25;
  display: none;
}

.trips-popover.is-open {
  display: block;
}

.trips-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.trips-header strong {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 1.1rem;
}

.trips-header .btn-primary {
  font-size: 0.78rem;
  padding: 6px 12px;
  min-height: 32px;
  white-space: nowrap;
}

.trips-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 320px;
  overflow-y: auto;
}

.trips-item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px;
  align-items: center;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  padding: 4px;
  background: var(--paper);
  transition: background 0.15s ease, border-color 0.15s ease;
}

.trips-item:hover {
  background: var(--bg-deep);
}

.trips-item.is-active {
  border-color: var(--teal);
  background: var(--teal-soft);
}

.trips-pick {
  appearance: none;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
  padding: 6px 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.trips-name {
  font-weight: 600;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.92rem;
}

.trips-meta {
  font-size: 0.74rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.trips-delete {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--muted);
  width: 28px;
  height: 28px;
  border-radius: 999px;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background 0.15s ease, color 0.15s ease;
}

.trips-delete:hover {
  background: var(--terra-soft);
  color: var(--terra-deep);
}

/* Trip name field */

.trip-name-field {
  display: flex;
  flex-direction: column;
  gap: 2px;
  cursor: text;
}

.trip-name-eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--muted);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* "Markera som genomförd" toggle in the trip header. Idle state is a
   ghost outlined pill; pressed state is a filled teal pill with a check
   mark — same visual language as the per-stop status badges. */
.trip-completed-toggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px 3px 8px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.trip-completed-toggle:hover {
  border-color: var(--teal);
  color: var(--teal-deep);
}
.trip-completed-toggle[hidden] {
  display: none !important;
}
.trip-completed-toggle .trip-completed-icon {
  opacity: 0;
  width: 12px;
  height: 12px;
  transition: opacity 120ms ease;
}
.trip-completed-toggle[aria-pressed="true"] {
  background: var(--teal);
  border-color: var(--teal);
  color: #fff;
}
.trip-completed-toggle[aria-pressed="true"] .trip-completed-icon {
  opacity: 1;
}

.trip-name-row {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-sm);
  padding: 6px 10px;
  background: rgba(253, 250, 242, 0.5);
  transition: border-color 0.15s ease, background 0.15s ease;
}

.trip-name-row:hover {
  border-color: var(--teal);
  background: var(--paper);
}

.trip-name-row:focus-within {
  border-style: solid;
  border-color: var(--teal);
  background: var(--paper);
  box-shadow: 0 0 0 3px rgba(15, 85, 86, 0.14);
}

.trip-name-input {
  flex: 1;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 1.4rem;
  border: 0;
  background: transparent;
  padding: 0;
  letter-spacing: -0.005em;
}

.trip-name-input:focus {
  outline: 0;
  box-shadow: none;
}

.trip-name-edit {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  color: var(--muted);
  transition: color 0.15s ease, background 0.15s ease;
}

.trip-name-row:hover .trip-name-edit,
.trip-name-row:focus-within .trip-name-edit {
  color: var(--teal-deep);
}

/* ============ Premium card ============ */

.premium-card {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  align-items: center;
  background: linear-gradient(135deg, var(--paper) 0%, var(--teal-soft) 140%);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.premium-card.is-highlighted {
  box-shadow: 0 0 0 3px rgba(15, 85, 86, 0.18), var(--shadow-md);
  border-color: var(--teal);
}

.premium-card.is-premium {
  background: linear-gradient(135deg, var(--teal-soft) 0%, var(--paper) 120%);
  border-color: var(--teal);
}

.premium-info {
  min-width: 0;
}

.premium-eyebrow {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--terra);
  margin-bottom: 4px;
}

.premium-card.is-premium .premium-eyebrow {
  color: var(--teal-deep);
}

.premium-limit {
  margin: 0;
  font-family: var(--serif);
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.005em;
}

.premium-pitch {
  margin: 4px 0 0;
  font-size: 0.84rem;
  color: var(--muted);
  line-height: 1.4;
}

.premium-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: stretch;
}

.premium-actions .btn-primary {
  white-space: nowrap;
  font-size: 0.86rem;
  padding: 8px 14px;
  min-height: 36px;
}

.premium-card.is-premium .premium-actions .btn-primary {
  display: none;
}

.premium-export {
  display: flex;
  gap: 6px;
}

.premium-export .btn {
  flex: 1;
  min-height: 32px;
  padding: 4px 10px;
  font-size: 0.8rem;
  gap: 5px;
}

.premium-card:not(.is-premium) .premium-export .btn {
  opacity: 0.5;
}

@media (max-width: 480px) {
  .premium-card {
    grid-template-columns: 1fr;
  }
  .premium-actions {
    flex-direction: row;
    align-items: center;
  }
  .premium-actions .btn-primary {
    flex: 0 0 auto;
  }
  .premium-export {
    flex: 1;
  }
}

.brand-mark {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
}

.brand-mark img,
.brand-mark svg {
  width: 100%;
  height: 100%;
  display: block;
}

.brand-name {
  font-family: var(--display);
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.brand-name .brand-name-rover {
  color: var(--teal);
}

.icon-button {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink-soft);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.icon-button:hover {
  background: white;
  color: var(--ink);
}

/* Display title */

.display-title {
  margin: 4px 0 8px;
  line-height: 0;
}

/* Brand wordmark as image so the panel matches the hero composition's
   typography exactly. Image is the colored primary-horizontal logo;
   scales by container width. */
.display-title-img {
  display: block;
  width: 100%;
  max-width: 320px;
  height: auto;
}

.display-subtitle {
  margin: 0 0 8px;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  max-width: 36ch;
}

/* API key card */

.api-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 16px;
  box-shadow: var(--shadow-sm);
}

.api-card label {
  display: block;
  font-weight: 600;
  margin-bottom: 8px;
  font-size: 0.9rem;
}

.key-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
}

.hint {
  color: var(--muted);
  margin: 10px 0 0;
  font-size: 0.84rem;
  line-height: 1.45;
}

.api-card.is-env-key {
  display: none;
}

/* Auth card */

.auth-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  box-shadow: var(--shadow-sm);
}

.auth-info {
  min-width: 0;
}

.auth-card-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.auth-card-actions .btn {
  min-height: 36px;
  padding: 6px 14px;
  font-size: 0.84rem;
  white-space: nowrap;
}

@media (max-width: 480px) {
  .auth-card {
    grid-template-columns: 1fr;
  }
  .auth-card-actions {
    justify-content: flex-start;
  }
}

/* Gamified user-tier card */

.level-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  background: linear-gradient(135deg, var(--teal-soft) 0%, var(--bg) 100%);
  border: 1px solid var(--teal);
  border-radius: var(--radius-md);
}

.level-card-top {
  display: flex;
  align-items: center;
  gap: 14px;
}

.level-glyph {
  font-size: 2.4rem;
  line-height: 1;
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--paper);
  border-radius: 50%;
  box-shadow: var(--shadow-sm);
}

.level-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.level-eyebrow {
  color: var(--teal-deep);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.level-name {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 1.4rem;
  color: var(--ink);
  letter-spacing: -0.005em;
}

.level-blurb {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.84rem;
  line-height: 1.35;
}

.level-progress {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.level-progress-bar {
  height: 6px;
  background: rgba(15, 85, 86, 0.12);
  border-radius: 999px;
  overflow: hidden;
}

.level-progress-bar span {
  display: block;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--teal) 0%, var(--terra) 100%);
  border-radius: 999px;
  transition: width 280ms ease;
}

.level-progress-text {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.78rem;
  font-weight: 500;
}

.level-ladder-toggle {
  align-self: flex-start;
  background: transparent;
  border: 0;
  color: var(--teal-deep);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  padding: 0;
}

.level-ladder {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  border-top: 1px solid rgba(15, 85, 86, 0.18);
  padding-top: 10px;
}

.level-ladder[hidden] {
  display: none !important;
}

.level-step {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 4px;
  border-radius: 8px;
  color: var(--muted);
  font-size: 0.86rem;
  transition: background 120ms ease;
}

.level-step.is-reached {
  color: var(--ink);
}

.level-step.is-current {
  background: var(--paper);
  border: 1px solid var(--line);
  padding: 6px 10px;
  box-shadow: var(--shadow-sm);
}

.level-step-glyph {
  font-size: 1.2rem;
  width: 28px;
  text-align: center;
  flex: 0 0 auto;
  opacity: 0.55;
}

.level-step.is-reached .level-step-glyph {
  opacity: 1;
}

.level-step-meta {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

.level-step-meta strong {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 0.98rem;
  color: inherit;
}

.level-step-meta small {
  color: var(--muted);
  font-size: 0.72rem;
}

.level-step-tick {
  color: var(--teal);
  font-weight: 700;
  font-size: 0.95rem;
  flex: 0 0 auto;
}

.account-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}

.account-stats > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: flex-start;
}

.account-stats-label {
  color: var(--muted);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.account-stats strong {
  font-family: var(--serif);
  font-size: 1.2rem;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.account-trips {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.account-trips-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.account-trips-header strong {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 1.1rem;
  color: var(--ink);
}

.account-trips-header .btn-primary {
  font-size: 0.78rem;
  padding: 6px 12px;
  min-height: 32px;
  white-space: nowrap;
}

.account-trips .trips-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 220px;
  overflow-y: auto;
}

@media (max-width: 480px) {
  .account-stats {
    grid-template-columns: repeat(2, 1fr);
  }
}

.auth-label {
  display: block;
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 2px;
}

.auth-card strong {
  display: block;
  font-family: var(--serif);
  font-size: 1.2rem;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.auth-card p {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.35;
}

.auth-card #signOutButton {
  min-height: 36px;
  padding: 6px 14px;
  font-size: 0.84rem;
}

#googleSignInButton {
  min-width: 0;
}

/* Trip meta strip */

.trip-meta {
  display: flex;
  align-items: stretch;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.trip-meta > div {
  flex: 1;
  padding: 14px 16px;
  position: relative;
  min-width: 0;
}

.trip-meta > div + div::before {
  content: "";
  position: absolute;
  left: 0;
  top: 14px;
  bottom: 14px;
  width: 1px;
  background: var(--line);
}

.trip-meta .label {
  display: block;
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.trip-meta .value {
  display: block;
  font-family: var(--serif);
  font-size: 1.5rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.trip-meta .value small {
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--muted);
  letter-spacing: 0;
}

.save-status {
  margin: -8px 2px 0;
  color: var(--muted);
  font-size: 0.82rem;
}

/* Toolbar */

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

.toolbar .btn {
  flex: 0 0 auto;
}

.toolbar .btn-primary {
  flex: 1 1 auto;
  min-width: 160px;
}

/* Section label */

.section-label {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 12px 0 0;
}

.section-label .title {
  font-family: var(--serif);
  font-size: 1.4rem;
  font-style: italic;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.section-label .count {
  color: var(--muted);
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
}

/* ============ Timeline & stops ============ */

.timeline {
  position: relative;
  padding: 0 0 0 32px;
  margin: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.timeline::before {
  content: "";
  position: absolute;
  left: 14px;
  top: 22px;
  bottom: 22px;
  width: 2px;
  background: repeating-linear-gradient(
    to bottom,
    var(--line-strong) 0 4px,
    transparent 4px 9px
  );
}

.stop {
  position: relative;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  transition: transform 0.15s ease, box-shadow 0.2s ease, border-color 0.15s ease;
}

.stop:focus-within {
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
  border-color: var(--line-strong);
}

.stop-pin {
  position: absolute;
  left: -32px;
  top: 18px;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: var(--bg);
  border: 2px solid var(--teal);
  color: var(--teal-deep);
  display: grid;
  place-items: center;
  font-family: var(--serif);
  font-size: 0.95rem;
  font-weight: 600;
  z-index: 1;
}

.stop.is-start .stop-pin {
  background: var(--teal);
  color: white;
}

.stop.is-end .stop-pin {
  background: var(--terra);
  border-color: var(--terra);
  color: white;
}

.stop-body {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 14px;
  padding: 12px;
}

.stop-image-picker {
  display: block;
  position: relative;
  width: 92px;
  height: 92px;
  border-radius: var(--radius-md);
  background: var(--bg-deep);
  border: 1px dashed var(--line-strong);
  overflow: hidden;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.stop-image-picker:hover {
  border-color: var(--teal);
  background: var(--teal-soft);
}

.stop-image-picker:focus-within {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
}

.stop-image-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.stop-image-empty {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--muted);
}

.stop-image {
  display: none;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.stop-image[src] {
  display: block;
}

.stop-image-picker:has(.stop-image[src]) .stop-image-empty {
  display: none;
}

.stop-content {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.stop-topline {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  min-height: 18px;
}

.stop-kicker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--terra);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.stop-kicker:empty {
  display: none;
}

.stop-actions {
  display: flex;
  gap: 2px;
  opacity: 0.5;
  transition: opacity 0.15s ease;
}

.stop:hover .stop-actions,
.stop:focus-within .stop-actions {
  opacity: 1;
}

.stop-actions button {
  appearance: none;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background 0.15s ease, color 0.15s ease;
}

.stop-actions button:hover:not(:disabled) {
  background: var(--bg-deep);
  color: var(--ink);
}

.stop-actions button:disabled {
  color: #cbc5b3;
  cursor: not-allowed;
}

.stop-title {
  font-family: var(--serif);
  font-size: 1.4rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.05;
  border-color: transparent;
  background: transparent;
  padding: 2px 0;
}

.stop-title:focus {
  border-color: var(--teal);
  background: var(--paper);
  padding: 8px 12px;
}

.stop-place {
  font-size: 0.86rem;
  color: var(--ink-soft);
  background: transparent;
  border-color: var(--line);
  padding: 7px 10px;
}

.stop-notes {
  font-size: 0.86rem;
  color: var(--ink-soft);
  background: var(--paper);
  border-color: var(--line);
  padding: 8px 10px;
  min-height: 44px;
}

/* ===== Per-stop datum =====
   Två date-input-fält + en räknad "N nätter"-summa. Layoutar i
   en rad på desktop, wrappar till två rader på smal viewport. */
.stop-dates {
  display: flex;
  gap: 8px;
  margin-top: 6px;
  align-items: end;
  flex-wrap: wrap;
}
.stop-date-field {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  flex: 1 1 130px;
  min-width: 130px;
}
.stop-date-field input[type="date"] {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 6px 8px;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: normal;
  text-transform: none;
  color: var(--ink);
  background: var(--paper);
  width: 100%;
  font-family: inherit;
}
.stop-date-field input[type="date"]:focus {
  outline: 2px solid var(--teal);
  outline-offset: 1px;
  background: #fff;
}
.stop-stay-summary {
  font-size: 0.74rem;
  color: var(--muted);
  padding: 5px 0;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.stop-stay-summary[hidden] {
  display: none !important;
}

/* Shared-readonly view: dates are visible (the sharer's plan) but
   not editable. */
body.shared-readonly .stop-date-field input[type="date"] {
  pointer-events: none;
  background: transparent;
  border-color: transparent;
  padding-left: 0;
}
/* If neither date is set in shared view, hide the whole row so we
   don't leave empty fields on screen. */
body.shared-readonly .stop-dates:not(:has(input:not([value=""]))) {
  display: none;
}

/* ===== Boende / lodging section per stop =====
   Collapsible disclosure with three status modes:
     • none   → show prominent Booking-affiliate "Sök boende" CTA
     • booked → show name + URL inputs + own notes/review
     • stayed → same as booked, badge styled differently
   Closed state renders only the summary row with a status badge. */
.stop-lodging {
  margin-top: 6px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--paper);
  overflow: hidden;
}
.stop-lodging[hidden] {
  display: none !important;
}
body.shared-readonly .stop-lodging {
  /* In read-only share view we still show the section if there's content
     (handled in JS via hidden=true when empty). */
}

.stop-lodging-summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ink-soft);
  list-style: none;
}
.stop-lodging-summary::-webkit-details-marker { display: none; }
.stop-lodging-summary svg { color: var(--teal); flex: 0 0 auto; }

.stop-lodging-label {
  letter-spacing: 0.02em;
}

.stop-lodging-badge {
  margin-left: auto;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: var(--line);
  color: var(--ink-soft);
}
.stop-lodging-badge[data-status="booked"] {
  background: rgba(46, 125, 107, 0.14);
  color: var(--teal-deep);
}
.stop-lodging-badge[data-status="stayed"] {
  background: rgba(255, 107, 74, 0.14);
  color: var(--terra-deep, #c44a2c);
}

.stop-lodging-body {
  padding: 0 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.stop-lodging-status {
  display: inline-flex;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg);
  padding: 3px;
  align-self: flex-start;
  max-width: 100%;
  flex-wrap: wrap;
}
.stop-lodging-status-option {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  user-select: none;
  transition: background 120ms ease, color 120ms ease;
  white-space: nowrap;
}
.stop-lodging-status-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.stop-lodging-status-option:has(input:checked) {
  background: var(--ink);
  color: #fff;
}

.stop-lodging-search {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-start;
}

/* Affiliate disclosure line, sits under the CTAs. Required for Booking
   and Expedia affiliate compliance — the commercial relationship must
   be visible next to the link, not just buried in /integritet. Hidden
   when the CTAs themselves are hidden (set in renderLodgingState). */
.stop-lodging-disclosure,
.stop-activities-disclosure {
  margin: 4px 0 0;
  font-size: 0.72rem;
  line-height: 1.4;
  color: var(--muted);
  max-width: 44ch;
}
.stop-lodging-disclosure[hidden],
.stop-activities-disclosure[hidden] {
  display: none !important;
}

/* ===== Aktiviteter & upplevelser ===== */
/* Visual mirror of .stop-lodging — same disclosure pattern, same
   pill CTAs, just pointed at experience/activity affiliates
   (GetYourGuide + Viator) instead of lodging providers. */
.stop-activities {
  margin-top: 6px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--paper);
  overflow: hidden;
}
.stop-activities[hidden] {
  display: none !important;
}
.stop-activities-summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ink-soft);
  list-style: none;
}
.stop-activities-summary::-webkit-details-marker { display: none; }
.stop-activities-summary svg { color: var(--teal); flex: 0 0 auto; }
.stop-activities-label {
  letter-spacing: 0.02em;
}
.stop-activities-body {
  padding: 0 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.stop-activities-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  padding: 7px 14px 7px 12px;
  background: var(--terra);
  border: 0;
  border-radius: 999px;
  color: #fff;
  font-size: 0.8rem;
  font-weight: 600;
  text-decoration: none;
  letter-spacing: 0.005em;
  transition: background 120ms ease;
}
.stop-activities-cta:hover { background: #d9482a; }
.stop-activities-cta[hidden] { display: none !important; }
.stop-activities-cta svg { color: #fff; }
.stop-activities-cta-secondary {
  background: transparent;
  color: var(--teal-deep);
  border: 1px solid var(--line);
}
.stop-activities-cta-secondary:hover {
  background: var(--teal-soft, rgba(46, 125, 107, 0.14));
  color: var(--teal-deep);
}
.stop-activities-cta-secondary svg { color: var(--teal-deep); }

/* Read-only shared view: hide the CTA buttons but keep section
   visible if/when we add notes/review fields later. */
body.shared-readonly .stop-activities-cta {
  display: none !important;
}

.stop-lodging-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  padding: 7px 14px 7px 12px;
  background: var(--terra);
  border: 0;
  border-radius: 999px;
  color: #fff;
  font-size: 0.8rem;
  font-weight: 600;
  text-decoration: none;
  letter-spacing: 0.005em;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.stop-lodging-cta:hover {
  background: #d9482a;
}
.stop-lodging-cta[hidden] {
  display: none !important;
}
.stop-lodging-cta svg { color: #fff; }

/* Secondary CTA — the "Eller sök på..."-fallback. Quieter visual so
   it doesn't compete with the primary provider button, but still
   clearly clickable. */
.stop-lodging-cta-secondary {
  background: transparent;
  border: 1px solid var(--line-strong);
  color: var(--teal-deep);
  padding: 6px 14px 6px 12px;
}
.stop-lodging-cta-secondary:hover {
  background: var(--teal-soft);
  border-color: var(--teal);
  color: var(--teal-deep);
}
.stop-lodging-cta-secondary svg { color: var(--teal); }

/* When the secondary CTA is rendered AS the only one (e.g. only
   Booking is configured), promote it to primary styling. JS adds the
   .is-solo class in that case. */
.stop-lodging-cta-secondary.is-solo {
  background: var(--terra);
  border-color: var(--terra);
  color: #fff;
}
.stop-lodging-cta-secondary.is-solo:hover {
  background: #d9482a;
  border-color: #d9482a;
}
.stop-lodging-cta-secondary.is-solo svg { color: #fff; }

.stop-lodging-fields[hidden] {
  display: none !important;
}
.stop-lodging-fields {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.stop-lodging-name,
.stop-lodging-url,
.stop-lodging-review {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 8px 12px;
  font: inherit;
  font-size: 0.86rem;
  background: var(--bg);
  color: var(--ink);
}
.stop-lodging-name:focus,
.stop-lodging-url:focus,
.stop-lodging-review:focus {
  outline: 2px solid var(--teal);
  outline-offset: 1px;
  background: #fff;
}
.stop-lodging-review {
  resize: vertical;
  min-height: 56px;
  line-height: 1.45;
}

.stop-lodging-url-row {
  display: flex;
  gap: 6px;
  align-items: stretch;
}
.stop-lodging-url-row .stop-lodging-url {
  flex: 1 1 auto;
  min-width: 0;
}
.stop-lodging-open {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--paper);
  color: var(--teal-deep);
  text-decoration: none;
  transition: background 120ms ease, border-color 120ms ease;
}
.stop-lodging-open:hover {
  background: var(--teal-soft);
  border-color: var(--teal);
}
.stop-lodging-open[hidden] {
  display: none !important;
}

/* Read-only in shared view — disable inputs, hide the search CTA. */
body.shared-readonly .stop-lodging-status,
body.shared-readonly .stop-lodging-cta {
  display: none !important;
}
body.shared-readonly .stop-lodging-name,
body.shared-readonly .stop-lodging-url,
body.shared-readonly .stop-lodging-review {
  pointer-events: none;
  background: transparent;
  border-color: transparent;
  padding-left: 0;
  padding-right: 0;
}

/* Inter-stop leg pill */

.leg {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: -4px 0 -4px 14px;
  padding: 6px 12px 6px 18px;
  background: var(--bg);
  font-size: 0.8rem;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  align-self: flex-start;
}

.leg svg {
  width: 12px;
  height: 12px;
  color: var(--teal);
  flex: 0 0 auto;
}

.leg-distance {
  font-weight: 600;
}

.leg-sep {
  color: var(--line-strong);
}

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

/* ============ Directions panel ============ */

.directions-panel {
  margin-top: 6px;
}

.directions-panel:empty {
  display: none;
}

.segment-note {
  margin: 6px 0 14px;
  padding: 11px 14px;
  border-left: 3px solid var(--teal);
  background: var(--teal-soft);
  color: var(--teal-deep);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: 0.9rem;
  line-height: 1.45;
}

.route-leg {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--paper);
  margin-bottom: 8px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.route-leg[open] {
  background: var(--panel);
}

.route-leg-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px 14px;
  align-items: center;
  min-height: 52px;
  padding: 12px 38px 12px 16px;
  cursor: pointer;
  list-style: none;
}

.route-leg-summary::-webkit-details-marker {
  display: none;
}

.route-leg-summary::before {
  content: "";
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  position: absolute;
  right: 18px;
  top: 22px;
  transform: rotate(45deg);
  transition: transform 0.2s ease;
  pointer-events: none;
}

.route-leg[open] .route-leg-summary::before {
  transform: rotate(225deg);
  top: 26px;
}

.route-leg-main {
  min-width: 0;
  font-family: var(--serif);
  font-size: 1.15rem;
  font-weight: 500;
  letter-spacing: -0.005em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.route-leg-meta {
  color: var(--muted);
  font-size: 0.84rem;
  font-weight: 500;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.route-segment-badge {
  grid-column: 1 / -1;
  justify-self: start;
  border-radius: 999px;
  background: var(--terra-soft);
  color: var(--terra-deep);
  padding: 3px 10px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.route-steps {
  margin: 0;
  padding: 4px 16px 16px 38px;
  color: var(--ink-soft);
}

.route-steps li {
  padding: 9px 0;
  border-top: 1px solid rgba(138, 126, 108, 0.22);
}

.route-steps li:first-child {
  border-top: 0;
}

.step-instruction {
  display: block;
  line-height: 1.5;
  font-size: 0.9rem;
  color: var(--ink);
}

.step-meta {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 0.76rem;
  font-variant-numeric: tabular-nums;
}

/* ============ Map controls (in-DOM overlay) ============ */

.map-controls {
  position: absolute;
  z-index: 30;
  top: 14px;
  right: 14px;
  display: grid;
  gap: 6px;
}

.map-controls button {
  appearance: none;
  cursor: pointer;
  min-width: 42px;
  min-height: 38px;
  padding: 0 12px;
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-weight: 600;
  box-shadow: var(--shadow-sm);
  transition: background 0.15s ease;
}

.map-controls button:hover {
  background: white;
}

/* ============ Map stop markers ============ */
.map-stop-callout {
  position: absolute;
  pointer-events: none;
  z-index: 100000;
  height: 34px;
}

.map-stop-leader {
  position: absolute;
  overflow: visible;
  pointer-events: none;
}

.map-stop-leader line {
  stroke: var(--ink);
  stroke-width: 2;
  stroke-linecap: round;
  filter: drop-shadow(0 1px 1px rgba(255, 255, 255, 0.7));
}

.map-stop-pin {
  position: absolute;
  /* Tight-cropped pin PNG is 113x144 (W/H). 30px wide → ~38px tall
     via aspect-ratio, which sits 6px taller than .map-stop-label's
     32px min-height so the pin and pill read as a balanced pair. */
  width: 30px;
  aspect-ratio: 113 / 144;
  background: url('/assets/icons/pin.png') no-repeat center / contain;
  pointer-events: none;
  filter: drop-shadow(0 3px 6px rgba(15, 29, 45, 0.35));
}

.map-stop-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  min-height: 32px;
  border: 0;
  border-radius: 999px;
  background: var(--ink);
  color: white;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.22);
  padding: 4px 12px 4px 5px;
  font-size: 0.84rem;
  font-weight: 500;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: auto;
  text-align: left;
  letter-spacing: -0.005em;
  cursor: pointer;
}

.map-stop-label span {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  border-radius: 999px;
  background: var(--terra);
  color: var(--ink);
  font-size: 0.74rem;
  font-weight: 700;
  padding: 0 6px;
}

/* ============ Mobile bottom sheet ============ */

.sheet-backdrop {
  display: none;
}

@media (max-width: 900px) {
  .app-shell {
    display: block;
    height: 100dvh;
    position: relative;
  }

  .map-panel {
    position: absolute;
    inset: 0;
    min-height: 0;
  }

  .control-panel {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: 88dvh;
    max-height: 88dvh;
    border-right: 0;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    box-shadow: 0 -16px 40px rgba(28, 24, 20, 0.18), 0 -1px 0 rgba(28, 24, 20, 0.04);
    transform: translateY(calc(100% - var(--sheet-peek)));
    transition: transform 0.32s cubic-bezier(0.32, 0.72, 0.2, 1);
    will-change: transform;
    z-index: 20;
    padding-bottom: env(safe-area-inset-bottom);
    background: var(--bg);
  }

  .control-panel.is-expanded {
    transform: translateY(0);
  }

  .control-panel::before {
    display: none;
  }

  .sheet-handle {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: var(--sheet-peek);
    padding: 14px 22px 14px;
    background: transparent;
    border: 0;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    color: var(--ink);
    text-align: left;
    cursor: pointer;
    position: relative;
  }

  .sheet-handle::before {
    content: "";
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 42px;
    height: 4px;
    border-radius: 999px;
    background: var(--line-strong);
  }

  .sheet-handle:focus-visible {
    outline: 2px solid var(--teal);
    outline-offset: -4px;
  }

  .handle-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 8px;
    min-width: 0;
  }

  .handle-mark {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
  }

  .handle-mark img,
  .handle-mark svg {
    width: 100%;
    height: 100%;
    display: block;
  }

  .handle-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
  }

  .handle-title {
    font-family: var(--display);
    font-size: 1.2rem;
    font-weight: 600;
    letter-spacing: -0.015em;
    line-height: 1;
    color: var(--ink);
  }

  .handle-summary {
    color: var(--muted);
    font-size: 0.84rem;
    font-variant-numeric: tabular-nums;
    margin-top: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .handle-chevron {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border-radius: 999px;
    background: var(--paper);
    color: var(--ink-soft);
    border: 1px solid var(--line);
    display: grid;
    place-items: center;
    margin-top: 8px;
    transition: transform 0.2s ease;
  }

  .control-panel.is-expanded .handle-chevron {
    transform: rotate(180deg);
  }

  .panel-scroll {
    padding: 4px 22px 32px;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    gap: 14px;
  }

  .brand-row,
  .display-title,
  .display-subtitle {
    display: none;
  }

  .auth-header {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }

  .auth-card #signOutButton {
    justify-self: start;
  }

  .sheet-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(28, 24, 20, 0.32);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
    z-index: 15;
  }

  .sheet-backdrop.is-visible {
    opacity: 1;
    pointer-events: auto;
  }

  .map-controls {
    top: 14px;
    right: 14px;
  }

}

@media (max-width: 560px) {
  .control-panel {
    padding: 16px;
  }

  .toolbar .btn-primary {
    min-width: 0;
  }

  .stop-actions {
    opacity: 1;
  }
}

@media (max-width: 480px) {
  .panel-scroll {
    padding: 4px 16px 28px;
  }

  .sheet-handle {
    padding: 14px 18px;
  }

  .stop-body {
    grid-template-columns: 76px 1fr;
    gap: 12px;
    padding: 10px;
  }

  .stop-image-picker {
    width: 76px;
    height: 76px;
  }

  .stop-title {
    font-size: 1.25rem;
  }

  .timeline {
    padding-left: 28px;
  }

  .timeline::before {
    left: 11px;
  }

  .stop-pin {
    left: -28px;
    width: 24px;
    height: 24px;
    font-size: 0.86rem;
  }

  .leg {
    margin-left: 11px;
    padding-left: 14px;
  }

  .trip-meta .value {
    font-size: 1.25rem;
  }
}

/* ============ Front-view tidy modes ============ */

/* When the user is signed in, the auth and premium cards live inside the
   account modal — hide the panel-level versions to keep the front view clean. */
body.signed-in .auth-card,
body.signed-in .premium-card.is-on-front,
body.signed-in [data-onboarding-only] {
  display: none !important;
}

/* Read-only mode for someone viewing a shared trip. We hide the editing
   chrome and visually de-emphasize the stop inputs but keep the timeline
   readable so the trip reads like a static itinerary. */
body.shared-readonly [data-edit-only],
body.shared-readonly .api-card,
body.shared-readonly .premium-card,
body.shared-readonly .auth-card {
  display: none !important;
}

/* ============ Static share view ============
   When the visitor lands via ?trip=…, the planner switches to a polished
   presentation: full-screen map, the routerover wordmark + trip stats
   floating top-left, a sign-in / save-copy CTA at the bottom. The whole
   side panel is hidden — this is "look at this trip", not "edit it". */

body.static-share {
  overflow: hidden;
}

body.static-share .control-panel,
body.static-share .sheet-handle,
body.static-share .sheet-backdrop {
  display: none !important;
}

body.static-share .app-shell {
  display: block;
  height: 100dvh;
}

body.static-share .map-panel {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100dvh;
}

.share-overlay-top {
  position: fixed;
  top: 20px;
  left: 20px;
  right: 20px;
  z-index: 30;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  pointer-events: none;
}

.share-overlay-top[hidden] {
  display: none !important;
}

.share-overlay-top > * {
  pointer-events: auto;
}

.share-overlay-brand {
  display: flex;
  flex-direction: column;
  background: rgba(15, 29, 45, 0.94);
  backdrop-filter: blur(10px);
  padding: 14px 22px;
  border-radius: 18px;
  box-shadow: 0 14px 36px rgba(15, 29, 45, 0.25);
  color: #fff;
  max-width: calc(100vw - 80px);
}

.share-overlay-brand-row {
  display: flex;
  align-items: center;
  gap: 18px;
}

.share-overlay-logo {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  text-decoration: none;
}

.share-overlay-logo img {
  display: block;
  height: 36px;
  width: auto;
}

.share-overlay-trip {
  min-width: 0;
  border-left: 1px solid rgba(255, 255, 255, 0.18);
  padding-left: 18px;
}

.share-overlay-eyebrow {
  margin: 0 0 2px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mist);
}

.share-overlay-name {
  margin: 0 0 4px;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 1.4rem;
  line-height: 1.05;
  color: #fff;
  letter-spacing: -0.005em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 36ch;
}

.share-overlay-stats {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  font-size: 0.86rem;
  color: var(--mist);
}

.share-overlay-stats strong {
  color: #fff;
  font-weight: 700;
  margin-right: 4px;
  font-variant-numeric: tabular-nums;
}

.share-overlay-actions {
  display: flex;
  gap: 8px;
}

.share-overlay-action {
  background: var(--terra);
  border: 0;
  color: #fff;
  font: inherit;
  font-weight: 600;
  font-size: 0.9rem;
  padding: 10px 16px;
  border-radius: 999px;
  cursor: pointer;
  box-shadow: 0 8px 22px rgba(15, 29, 45, 0.22);
  transition: background 120ms ease, transform 80ms ease;
}

.share-overlay-action:hover {
  background: var(--terra-deep);
}

.share-overlay-action:active {
  transform: scale(0.97);
}

.share-overlay-action[hidden] {
  display: none !important;
}

.share-overlay-action-icon {
  width: 42px;
  height: 42px;
  padding: 0;
  display: inline-grid;
  place-items: center;
  background: rgba(15, 29, 45, 0.94);
}

.share-overlay-action-icon:hover {
  background: #1a2c45;
}

/* CTA section nested inside the top chip, only visible for signed-out
   visitors. Sits below the brand row with a hairline separator so the
   chip reads as a single block instead of two stacked overlays. */
.share-overlay-cta {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

.share-overlay-cta[hidden] {
  display: none !important;
}

.share-overlay-cta-text {
  margin: 0;
  font-size: 0.92rem;
  font-weight: 600;
  color: #fff;
  max-width: 36ch;
}

@media (max-width: 720px) {
  .share-overlay-top {
    top: 14px;
    left: 14px;
    right: 14px;
    flex-direction: column;
    align-items: stretch;
  }
  .share-overlay-brand {
    padding: 12px 16px;
  }
  .share-overlay-brand-row {
    gap: 12px;
  }
  .share-overlay-trip {
    padding-left: 12px;
  }
  .share-overlay-logo img {
    height: 28px;
  }
  .share-overlay-name {
    font-size: 1.15rem;
  }
  .share-overlay-actions {
    align-self: flex-end;
  }
}

body.shared-readonly .stop-actions {
  display: none !important;
}

body.shared-readonly .stop-image-picker {
  pointer-events: none;
}

/* In shared mode an "empty" picker just looks like a stray icon — drop it,
   but keep the picker (with the rendered image) when one was included. */
body.shared-readonly .stop-image-picker:not(:has(.stop-image[src])) {
  display: none;
}

body.shared-readonly .stop-title,
body.shared-readonly .stop-place,
body.shared-readonly .stop-notes,
body.shared-readonly .trip-name-input {
  background: transparent;
  border-color: transparent;
  pointer-events: none;
  cursor: default;
}

body.shared-readonly .stop-notes:placeholder-shown,
body.shared-readonly .stop-title:placeholder-shown,
body.shared-readonly .stop-place:placeholder-shown {
  display: none;
}

body.shared-readonly .trip-name-eyebrow::after {
  content: " · skrivskyddad";
  color: var(--terra);
  font-style: italic;
  text-transform: none;
  letter-spacing: 0;
}

/* Brand-row account chip (only visible when signed in) */
.account-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-weight: 600;
  font-size: 0.95rem;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease;
}

.account-chip:hover,
.account-chip:focus-visible {
  background: var(--bg);
  border-color: var(--line-strong);
  outline: none;
}

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

/* ============ Shared-trip banner ============ */

.shared-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  background: linear-gradient(135deg, var(--terra-soft) 0%, var(--bg) 100%);
  border: 1px solid var(--terra);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  box-shadow: var(--shadow-sm);
}

.shared-banner-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.shared-banner-text strong {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 1.1rem;
  color: var(--ink);
}

.shared-banner-text span {
  font-size: 0.84rem;
  color: var(--ink-soft);
  line-height: 1.35;
}

.shared-banner-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.shared-banner-actions .btn {
  min-height: 32px;
  padding: 4px 10px;
  font-size: 0.8rem;
}

@media (max-width: 560px) {
  .shared-banner {
    flex-direction: column;
    align-items: stretch;
  }
  .shared-banner-actions {
    justify-content: flex-start;
  }
}

/* Shared-trip conversion pitch — sits just below the shared-banner when
   the visitor is viewing someone else's route. Wide block with Premium
   upsell + App Store / Play Store download badges. */

.shared-pitch {
  background: var(--ink);
  color: var(--bg);
  border-radius: var(--radius-lg);
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: var(--shadow-md);
}

.shared-pitch[hidden] {
  display: none !important;
}

.shared-pitch-eyebrow {
  margin: 0;
  color: var(--mist);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.shared-pitch-title {
  margin: 0;
  font-family: var(--sans);
  font-weight: 800;
  font-size: 1.5rem;
  letter-spacing: -0.015em;
  line-height: 1.15;
  color: #fff;
}

.shared-pitch-title em {
  font-style: normal;
  color: var(--terra);
}

.shared-pitch-blurb {
  margin: 0;
  color: var(--mist);
  font-size: 0.92rem;
  max-width: 48ch;
  line-height: 1.45;
}

.shared-pitch-actions {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.shared-pitch-actions .btn {
  background: var(--terra);
  color: #fff;
  border: 0;
  font-weight: 700;
  padding: 12px 18px;
  font-size: 0.94rem;
}

.shared-pitch-actions .btn:hover {
  background: var(--terra-deep);
}

.store-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #000;
  color: #fff;
  text-decoration: none;
  padding: 8px 16px 8px 14px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.16);
  transition: transform 80ms ease, background 120ms ease;
}

.store-badge[hidden] {
  display: none !important;
}

.store-badge:hover { background: #15212e; transform: translateY(-1px); }
.store-badge:active { transform: scale(0.97); }

.store-badge svg { flex: 0 0 auto; }

.store-badge-text {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}

.store-badge-text small {
  font-size: 0.62rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.78;
  margin-bottom: 2px;
}

.store-badge-text strong {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* ============ Account modal ============ */

.modal {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.modal[hidden] {
  display: none !important;
}

.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(28, 24, 20, 0.45);
  backdrop-filter: blur(2px);
}

.modal-panel {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  width: min(560px, 100%);
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  padding: 22px 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

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

.modal-eyebrow {
  margin: 0 0 4px;
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.modal-title {
  margin: 0;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 1.6rem;
  color: var(--ink);
  letter-spacing: -0.005em;
}

.modal-subtitle {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.35;
}

@media (max-width: 480px) {
  .modal {
    padding: 0;
    align-items: flex-end;
  }
  .modal-panel {
    width: 100%;
    max-height: 92vh;
    border-radius: 18px 18px 0 0;
    padding: 20px 18px 22px;
  }
}

.modal-panel-narrow {
  width: min(420px, 100%);
}

.modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
  border-top: 1px solid var(--line);
  padding-top: 14px;
}

.modal-footer .btn {
  min-height: 36px;
  padding: 6px 14px;
  font-size: 0.86rem;
}

.modal-footer .share-size-hint {
  margin-right: auto;
  color: var(--muted);
  font-size: 0.78rem;
}

/* Hemadress-sektion i kontomodalen. Sätts som default startpunkt
   för nya rutter — visas bara när användaren är inloggad. */
.account-home {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.account-home-pitch {
  margin: 0;
  font-size: 0.84rem;
  color: var(--ink-soft);
}
.account-home-row {
  display: flex;
  gap: 6px;
  align-items: stretch;
  flex-wrap: wrap;
}
.account-home-row input {
  flex: 1 1 200px;
  min-width: 200px;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 8px 12px;
  font: inherit;
  font-size: 0.88rem;
  color: var(--ink);
  background: var(--bg);
}
.account-home-row input:focus {
  outline: 2px solid var(--teal);
  outline-offset: 1px;
  background: #fff;
}
.account-home-row .btn-primary {
  flex: 0 0 auto;
}
.account-home-clear {
  align-self: flex-start;
  font-size: 0.78rem;
}
.account-home-status {
  margin: 0;
  font-size: 0.78rem;
  color: var(--muted);
  min-height: 1em;
}

.account-premium {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.account-premium-status {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 3px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
}

.account-premium.is-premium .account-premium-status {
  color: var(--teal-deep);
  border-color: var(--teal);
  background: var(--teal-soft);
}

.account-premium-pitch {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.86rem;
  line-height: 1.4;
}

.account-premium.is-premium .account-premium-pitch {
  color: var(--muted);
}

.account-premium-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.account-premium-actions .btn {
  min-height: 36px;
  padding: 6px 14px;
  font-size: 0.86rem;
}

.account-premium.is-premium #modalPremiumUpgradeButton {
  display: none;
}

.account-pitch {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.9rem;
  line-height: 1.45;
}

.account-signed-out {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
}

.account-legal-links {
  margin: 0;
  color: var(--muted);
  font-size: 0.78rem;
  text-align: center;
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
}

.account-legal-links a {
  color: var(--ink-soft);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.account-legal-links a:hover {
  color: var(--ink);
}

/* Share-options modal */

.share-options {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.share-option-label {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  cursor: pointer;
  background: var(--paper);
  transition: border-color 120ms ease, background 120ms ease;
}

.share-option-label:hover {
  border-color: var(--line-strong);
}

.share-option-label input {
  margin-top: 3px;
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  accent-color: var(--teal);
}

.share-option-label strong {
  display: block;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--ink);
}

.share-option-label small {
  display: block;
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.35;
  margin-top: 2px;
}

.share-option-empty {
  list-style: none;
  padding: 14px;
  color: var(--muted);
  font-size: 0.86rem;
  text-align: center;
  border: 1px dashed var(--line);
  border-radius: var(--radius-sm);
}

/* Direct channel grid inside the share-options modal */

.share-channels-label {
  margin: 4px 0 -4px;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.share-channels {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.share-channel {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 8px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--ink);
  font: inherit;
  font-size: 0.76rem;
  font-weight: 500;
  text-align: center;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease, transform 80ms ease;
}

.share-channel:hover,
.share-channel:focus-visible {
  background: var(--bg);
  border-color: var(--teal);
  outline: none;
}

.share-channel:active {
  transform: scale(0.97);
}

.share-channel svg {
  color: var(--teal-deep);
}

.share-channel span {
  line-height: 1.2;
}

/* "Kopierad!" success-flash on the Kopiera-länk button */
.share-channel.is-copied {
  background: var(--teal);
  border-color: var(--teal);
  color: #fff;
  pointer-events: none;
}

.share-channel.is-copied svg {
  color: #fff;
}

@media (max-width: 480px) {
  .share-channels {
    grid-template-columns: repeat(2, 1fr);
  }
  .share-channel {
    padding: 14px 8px;
  }
}

/* ============ Quiz overlay ============ */

.account-quiz {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.account-quiz-pitch {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.86rem;
  line-height: 1.4;
}

.account-quiz .btn-primary {
  align-self: flex-start;
  min-height: 36px;
  padding: 6px 14px;
  font-size: 0.86rem;
}

.quiz-overlay {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: rgba(28, 24, 20, 0.65);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.quiz-overlay[hidden] {
  display: none !important;
}

.quiz-panel {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  width: min(560px, 100%);
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  padding: 22px 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

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

.quiz-creator-list {
  list-style: decimal inside;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.quiz-creator-list li {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 0.92rem;
  color: var(--ink);
}

.quiz-creator-list li strong {
  display: block;
  font-family: var(--sans);
  font-weight: 600;
}

.quiz-creator-list li span {
  color: var(--teal-deep);
  font-style: italic;
  font-size: 0.84rem;
}

.quiz-creator-note {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.86rem;
  line-height: 1.4;
}

.quiz-share-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}

.quiz-share-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 10px 6px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--ink);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease;
}

.quiz-share-btn:hover {
  background: var(--bg);
  border-color: var(--line-strong);
}

.quiz-share-btn svg {
  color: var(--muted);
}

@media (max-width: 480px) {
  .quiz-share-row {
    grid-template-columns: repeat(2, 1fr);
  }
}

.quiz-progress {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.quiz-progress span:first-child {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.quiz-progress-bar {
  height: 5px;
  background: var(--bg);
  border-radius: 999px;
  overflow: hidden;
}

.quiz-progress-bar span {
  display: block;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--teal) 0%, var(--terra) 100%);
  border-radius: 999px;
  transition: width 280ms ease;
}

.quiz-question {
  margin: 0;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 1.4rem;
  color: var(--ink);
  letter-spacing: -0.005em;
  line-height: 1.3;
}

.quiz-options {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.quiz-option {
  display: block;
  width: 100%;
  text-align: left;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  font: inherit;
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
  transition: border-color 120ms ease, background 120ms ease;
}

.quiz-option:hover:not(:disabled) {
  border-color: var(--teal);
  background: var(--teal-soft);
}

.quiz-option:disabled {
  cursor: default;
}

.quiz-option.is-correct {
  background: var(--teal-soft);
  border-color: var(--teal);
  color: var(--teal-deep);
  font-weight: 600;
}

.quiz-option.is-wrong {
  background: var(--terra-soft);
  border-color: var(--terra);
  color: var(--terra-deep);
}

.quiz-player-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.quiz-score {
  color: var(--muted);
  font-size: 0.84rem;
}

.quiz-result {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  padding: 20px 0 10px;
}

.quiz-result-glyph {
  font-size: 3.4rem;
  line-height: 1;
}

.quiz-result-title {
  margin: 0;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 1.8rem;
  color: var(--ink);
}

.quiz-result-subtitle {
  margin: 0;
  color: var(--teal-deep);
  font-size: 1rem;
  font-weight: 600;
}

.quiz-result-blurb {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.92rem;
  line-height: 1.4;
}

.quiz-result-actions {
  margin-top: 8px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}

@media (max-width: 480px) {
  .quiz-overlay {
    padding: 0;
    align-items: flex-end;
  }
  .quiz-panel {
    width: 100%;
    max-height: 96vh;
    border-radius: 18px 18px 0 0;
    padding: 18px 16px 22px;
  }
  .quiz-question {
    font-size: 1.2rem;
  }
}

/* ============ Share menu popover ============ */

.share-menu {
  position: fixed;
  z-index: 60;
  min-width: 200px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.share-menu[hidden] {
  display: none !important;
}

.share-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  background: transparent;
  border: 0;
  border-radius: 8px;
  color: var(--ink);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: background 120ms ease;
}

.share-menu-item:hover,
.share-menu-item:focus-visible {
  background: var(--bg);
  outline: none;
}

.share-menu-item svg {
  flex: 0 0 auto;
  color: var(--muted);
}

/* ============ Hotel filter modal ============
   Opens (feature-flagged) when a visitor clicks a lodging "Sök boende"
   CTA. Lets them pick budget / property type / dates / radius before
   we deeplink to the OTA. All controls map to query-string params in
   the affiliate URL. */
.hotel-filter {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 16px 0 12px;
}

.hotel-filter-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
}

.hotel-filter-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--ink-soft);
  letter-spacing: 0.02em;
}

.hotel-filter-field input,
.hotel-filter-field select {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 8px 12px;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--ink);
  background: #fff;
}
.hotel-filter-field input:focus,
.hotel-filter-field select:focus {
  outline: 2px solid var(--teal);
  outline-offset: 1px;
}

.hotel-filter-group {
  border: 0;
  padding: 0;
  margin: 0;
}
.hotel-filter-group legend {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 0;
  margin-bottom: 8px;
}

/* Budget — segmented pill control */
.hotel-filter-segments {
  display: inline-flex;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg);
  padding: 3px;
  flex-wrap: wrap;
}
.hotel-filter-segments label {
  position: relative;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  user-select: none;
  transition: background 120ms ease, color 120ms ease;
}
.hotel-filter-segments label input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.hotel-filter-segments label:has(input:checked) {
  background: var(--ink);
  color: #fff;
}

/* Property type — chip multi-select */
.hotel-filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.hotel-filter-chips label {
  position: relative;
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ink-soft);
  background: #fff;
  cursor: pointer;
  user-select: none;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}
.hotel-filter-chips label input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.hotel-filter-chips label:has(input:checked) {
  background: var(--teal-soft, rgba(46, 125, 107, 0.14));
  border-color: var(--teal);
  color: var(--teal-deep);
}

/* Radius — range slider with live label */
.hotel-filter-radius {
  gap: 6px;
}
.hotel-filter-radius input[type="range"] {
  width: 100%;
  accent-color: var(--teal);
}
.hotel-filter-radius strong {
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  margin-left: 4px;
}

.hotel-filter-disclosure {
  margin: 0;
  padding: 10px 12px;
  background: var(--paper);
  border-left: 3px solid var(--teal);
  border-radius: 6px;
  font-size: 0.76rem;
  line-height: 1.4;
  color: var(--muted);
}

.hotel-filter-footer {
  flex-wrap: wrap;
  gap: 8px;
}
.hotel-filter-footer .btn {
  flex: 1 1 auto;
  min-width: 140px;
}
.hotel-filter-footer .btn-primary {
  background: var(--terra);
}
.hotel-filter-footer .btn-primary:hover {
  background: #d9482a;
}

/* ============ Print ============ */

/* The printable view is built into a hidden tree by JS right before
   window.print(). On screen we keep it out of the way; in @media print
   it becomes the entire visible document. */
.print-view {
  display: none;
}

@media print {
  /* Reset everything else; the live planner UI never makes it onto paper. */
  body {
    background: white;
    overflow: visible;
  }
  .app-shell,
  .lp-nav,
  .lp-foot,
  .share-overlay-top,
  .map-controls,
  .sheet-handle,
  .sheet-backdrop,
  .modal,
  .share-menu,
  .quiz-overlay {
    display: none !important;
  }

  .print-only-hide {
    display: none !important;
  }

  /* The print view replaces the entire visible document. */
  .print-view {
    display: block !important;
    color: var(--ink);
    font-family: var(--sans);
  }

  @page {
    size: A4;
    margin: 12mm;
  }

  /* Cover page mirrors the static share view: full-bleed map image
     with a navy chip overlaid in the top-left showing trip name + stats.
     Browsers print this without the CTA pill — that only exists on the
     live signed-out share screen. */
  .print-cover {
    position: relative;
    width: 100%;
    height: calc(297mm - 24mm);
    page-break-after: always;
    break-after: page;
    overflow: hidden;
    background: var(--bg);
  }
  .print-cover-map {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: #e6ebf0;
  }
  .print-cover-chip {
    position: absolute;
    top: 16mm;
    left: 12mm;
    right: 12mm;
    background: rgba(15, 29, 45, 0.94);
    color: #fff;
    border-radius: 14px;
    padding: 14px 18px;
    display: flex;
    gap: 16px;
    align-items: center;
    box-shadow: 0 12px 32px rgba(15, 29, 45, 0.25);
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .print-cover-chip-logo {
    height: 28px;
    width: auto;
    display: block;
  }
  .print-cover-chip-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  .print-cover-eyebrow {
    margin: 0;
    font-size: 0.62rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.7);
    font-weight: 700;
  }
  .print-cover-name {
    margin: 0;
    font-size: 1.4rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    line-height: 1.1;
  }
  .print-cover-stats {
    margin: 6px 0 0;
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.88);
  }
  .print-cover-stats span strong {
    color: #fff;
    font-weight: 700;
  }

  /* City pages: 4 boxes per A4. Each city is a self-contained card with
     the photo on one side and notes/hotel text on the other. We alternate
     image position via nth-child so the spreads don't feel mechanical. */
  .print-cities-page {
    page-break-after: always;
    break-after: page;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 8mm;
    height: calc(297mm - 24mm);
  }
  .print-cities-page:last-child {
    page-break-after: auto;
    break-after: auto;
  }
  .print-city {
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 8mm;
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 6mm;
    align-items: start;
    overflow: hidden;
    background: var(--paper);
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  /* Even-numbered boxes flip image to the right side. */
  .print-city.print-city-flip {
    grid-template-columns: 1.1fr 1fr;
  }
  .print-city.print-city-flip .print-city-image {
    order: 2;
  }
  .print-city.print-city-flip .print-city-body {
    order: 1;
  }
  .print-city-image {
    width: 100%;
    height: 100%;
    min-height: 60mm;
    object-fit: cover;
    border-radius: 6px;
    background: #e8ecf1;
  }
  .print-city-image-empty {
    width: 100%;
    height: 60mm;
    border-radius: 6px;
    background: linear-gradient(135deg, #e8ecf1, #d4dbe3);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--muted);
    font-size: 0.78rem;
  }
  .print-city-body {
    display: flex;
    flex-direction: column;
    gap: 4mm;
    overflow: hidden;
  }
  .print-city-eyebrow {
    margin: 0;
    font-size: 0.62rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--teal-deep);
    font-weight: 700;
  }
  .print-city-name {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 800;
    line-height: 1.2;
    color: var(--ink);
  }
  .print-city-place {
    margin: 0;
    font-size: 0.78rem;
    color: var(--muted);
  }
  .print-city-dates {
    margin: 2mm 0 0;
    font-size: 0.78rem;
    color: var(--teal-deep);
    font-weight: 600;
    letter-spacing: 0.01em;
  }
  .print-city-section {
    margin: 0;
  }
  .print-city-section-label {
    margin: 0 0 2mm;
    font-size: 0.62rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted);
    font-weight: 700;
  }
  .print-city-section-body {
    margin: 0;
    font-size: 0.82rem;
    line-height: 1.45;
    color: var(--ink-soft);
    white-space: pre-wrap;
    overflow: hidden;
  }

  /* Directions: one heading band per leg, then a continuous bullet list
     full A4 width. Legs flow into one another so we don't waste a page on
     every short hop. */
  .print-directions {
    page-break-before: always;
    break-before: page;
  }
  .print-directions-title {
    margin: 0 0 4mm;
    font-size: 1.4rem;
    font-weight: 800;
    letter-spacing: -0.01em;
  }
  .print-leg {
    margin: 0 0 6mm;
    break-inside: avoid-page;
  }
  .print-leg-summary {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    padding: 3mm 0 2mm;
    border-bottom: 1px solid var(--line-strong);
    margin-bottom: 3mm;
  }
  .print-leg-name {
    margin: 0;
    font-size: 1rem;
    font-weight: 800;
    color: var(--ink);
  }
  .print-leg-meta {
    font-size: 0.82rem;
    color: var(--muted);
    font-weight: 600;
    white-space: nowrap;
  }
  .print-leg-steps {
    margin: 0;
    padding: 0 0 0 6mm;
    list-style: decimal;
    font-size: 0.86rem;
    color: var(--ink-soft);
    line-height: 1.5;
  }
  .print-leg-steps li {
    padding: 1mm 0;
    break-inside: avoid;
  }
  .print-leg-steps li .step-meta {
    display: block;
    font-size: 0.74rem;
    color: var(--muted);
    margin-top: 0.5mm;
  }
  /* Google's step.instructions contains <b> tags we want to keep. */
  .print-leg-steps li b {
    font-weight: 700;
    color: var(--ink);
  }

  .map-stop-label,
  .map-stop-pin {
    box-shadow: none;
  }
}

/* While we're preparing the print view (image fetches, layout) we add
   body.preparing-print so the user gets a subtle hint and we can hide any
   leftover modal chrome before the OS print dialog opens. */
body.preparing-print {
  cursor: progress;
}