/*
 * Triparo stylesheet — 2026 visual system.
 * Level 1: «Τα ταξίδια μου» (page header + elevated card grid).
 * Level 2: selected trip (hero band, segmented tabs; frosted bottom bar on mobile).
 * Design tokens: 8px spacing grid · radius 10/14/20 · type 13/15/17/22/28/34
 * Light + dark via prefers-color-scheme. Self-hosted fonts (Inter + Source Serif 4),
 * CSP-safe (same-origin, no font CDN).
 */

/* ============================================================
   0. Self-hosted fonts — Inter (variable, UI/body) + Source Serif 4 (display).
   Greek + Latin subsets, font-display:swap. default-src 'self' permits them
   (no font-src directive) so NO CSP change was needed.
   ============================================================ */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/inter-greek.woff2") format("woff2");
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/source-serif-4-latin-600.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/source-serif-4-greek-600.woff2") format("woff2");
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}

/* ============================================================
   1. Design tokens
   ============================================================ */

:root {
  color-scheme: light;

  /* spacing — 8px grid */
  --sp-1: 8px;
  --sp-2: 16px;
  --sp-3: 24px;
  --sp-4: 32px;
  --sp-5: 40px;
  --sp-6: 48px;

  /* radius scale */
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;

  /* type scale — steps must READ as hierarchy (≥20% apart); serif only ≥22px */
  --fs-xs: 13px;
  --fs-sm: 15px;
  --fs-md: 18px;
  --fs-lg: 22px;
  --fs-xl: 28px;
  --fs-2xl: 34px;
  --fs-3xl: 42px;

  /* ONE caps-label voice across the product (was 6 divergent styles) */
  --label-size: 11px;
  --label-track: 0.08em;

  /* TWO chip primitives (was 7 uncoordinated families): anything clickable =
     chip geometry, anything passive = badge geometry. One mold. */
  --chip-h: 30px;
  --chip-r: 999px;
  --badge-r: 999px;
  --font: "Inter", "Segoe UI Variable", system-ui, -apple-system, sans-serif;
  --font-display: "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-mono: ui-monospace, "Cascadia Code", Consolas, "Liberation Mono", monospace;

  /* shadow scale — chiaroscuro: warm near shadow, slightly COOL far shadow
     (warm light ⇒ cool shade); plus a top edge-light where the "sun" hits */
  --shadow-sm: 0 1px 2px rgb(60 47 30 / 0.06);
  --shadow-md: 0 2px 6px rgb(60 47 30 / 0.07), 0 8px 20px -8px rgb(42 52 58 / 0.13);
  --shadow-lg: 0 4px 12px rgb(60 47 30 / 0.10), 0 24px 48px -16px rgb(42 52 58 / 0.24);
  --edge-light: inset 0 1px 0 rgb(255 255 255 / 0.65);

  /* directional daylight: warm sun top-left, teal "sea" glow right */
  --sun-glow: radial-gradient(1100px 460px at 18% -10%, rgb(216 161 58 / 0.05), transparent 60%);
  --sea-glow: radial-gradient(900px 420px at 78% -140px, rgb(14 124 123 / 0.06), transparent 65%);

  /* brand (text/accent token; slightly deeper than the gradient so brand small-text
     clears WCAG-AA on --surface-2 too — axe-verified 5.2:1. The --grad keeps #0e7c7b.) */
  --brand: #0c6f6e;
  --brand-bright: #14b8a6;
  --grad: linear-gradient(135deg, #0e7c7b, #14b8a6);
  --grad-hover: linear-gradient(135deg, #0a6463, #0f9d8c);
  --brand-soft: rgb(12 111 110 / 0.1);
  --brand-soft-2: rgb(12 111 110 / 0.16);
  --ring: 0 0 0 3px rgb(20 184 166 / 0.25);

  /* warm gold — THE golden thread: gold means exactly one thing, «το επόμενο
     βήμα / η ετοιμότητα». One gold element per screen, never decoration. */
  --gold: #d8a13a;
  --gold-soft: rgb(216 161 58 / 0.12);
  --gold-border: rgb(216 161 58 / 0.4);
  --gold-text: #7d5a12; /* AA 5.5:1 on --surface-2 */

  /* neutrals — warm bone / espresso (Mediterranean daylight), all AA-audited */
  --bg: #faf7f1;
  --bg-tint: rgb(14 124 123 / 0.06);
  --surface: #fffdf9;
  --surface-2: #f4efe6;
  --border: rgb(60 47 30 / 0.08);
  --border-strong: rgb(60 47 30 / 0.16);
  --text: #20160d;
  /* --text-2 carries the guide texts (empty states, item notes, locked phases) at
     12-13px/400 — held a step darker than a typical muted so guidance stays
     readable, not decorative (live-UX audit 2026-08-29): ~6.9:1 on --surface. */
  --text-2: #5e5142;

  /* inset / segmented control — warmed to sand */
  --tab-indicator-bg: var(--tab-active);
  --seg-bg: #efe9dd;
  --seg-bg-glass: rgb(244 239 230 / 0.8);
  --tab-active: #fffdf9;
  --bottombar-solid: #fffdf9;
  --bottombar-glass: rgb(255 253 249 / 0.72);
  --bottombar-shadow: 0 -8px 24px rgb(60 47 30 / 0.08);

  /* ink button (solid secondary) — espresso ink, same material as --text
     (the slate-navy remnants read as a foreign cool material in a warm world) */
  --ink-btn: #231a10;
  --ink-btn-hover: #3a2d1c;
  --ink-btn-text: #f5f1e8;

  /* semantic — refined, not pure saturated */
  --ok: #177a53;
  --ok-soft: #e4f3eb;
  --ok-border: rgb(23 122 83 / 0.24);
  --warn: #8f5e10;
  --warn-soft: #fbf1dc;
  --warn-border: rgb(143 94 16 / 0.24);
  --danger: #b5443a;
  --danger-soft: #fbeae7;
  --danger-border: rgb(181 68 58 / 0.28);

  /* map */
  --pin-sight: #0e7c7b;
  --pin-food: #b84f43;
  --pin-stay: #6760b8;
  --pin-transport: #1b7f5e;
  --route: rgb(32 22 13 / 0.45);
  --board-grid: rgb(60 47 30 / 0.05);
  --board-bg: linear-gradient(135deg, #e9f4f0, #f6f2e7 52%, #e7f1ec);
  --map-real-bg: #e8eef2;

  /* misc — one ink: every dark neutral comes from the espresso family */
  --toast-bg: #231a10;
  --toast-text: #f5f1e8;
  --backdrop: rgb(32 22 13 / 0.45);
  --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6' fill='none' stroke='%236b5d4d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

  /* per-card accent (hue set per nth-child below) */
  --card-h: 174;
  --card-s: 50%;
  --card-l: 44%;

  /* motion vocabulary — frequency rule: high-frequency actions are instant/quick,
     low-frequency moments get the magic. One ease, three durations. */
  --dur: 160ms;
  --dur-quick: 120ms;
  --dur-settle: 240ms;
  --dur-magic: 900ms;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-spring: cubic-bezier(0.3, 1.4, 0.4, 1); /* needle settle — slight overshoot */
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;

    --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.35);
    --shadow-md: 0 2px 8px rgb(0 0 0 / 0.45);
    --shadow-lg: 0 12px 32px -8px rgb(0 0 0 / 0.6);
    --edge-light: inset 0 1px 0 rgb(255 252 245 / 0.06);
    --sun-glow: radial-gradient(1100px 460px at 18% -10%, rgb(230 185 79 / 0.04), transparent 60%);
    --sea-glow: radial-gradient(900px 420px at 78% -140px, rgb(43 208 191 / 0.05), transparent 65%);

    /* brighter text-accent for contrast on dark surfaces; --grad stays per spec */
    --brand: #2bd0bf;
    --brand-bright: #2bd0bf;
    --brand-soft: rgb(43 208 191 / 0.16);
    --brand-soft-2: rgb(43 208 191 / 0.24);
    --gold: #e6b94f;
    --gold-soft: rgb(230 185 79 / 0.14);
    --gold-border: rgb(230 185 79 / 0.4);
    --gold-text: #e6b94f;

    --bg: #0c1715;
    --bg-tint: rgb(43 208 191 / 0.08);
    --surface: #11201d;
    --surface-2: #162824;
    --border: rgb(255 252 245 / 0.09);
    --border-strong: rgb(255 252 245 / 0.18);
    --text: #f1ece2;
    /* same rule as light: guide texts must read effortlessly on the dark surfaces
       (live-UX audit 2026-08-29) — ~7.5:1 on --surface. */
    --text-2: #b3a695;

    --seg-bg: #16231f;
    --seg-bg-glass: rgb(22 35 31 / 0.78);
    --tab-active: #1f332e;
    --bottombar-solid: #0e1c19;
    --bottombar-glass: rgb(12 23 21 / 0.74);
    --bottombar-shadow: 0 -8px 24px rgb(0 0 0 / 0.45);

    --ink-btn: #f1ece2;
    --ink-btn-hover: #d8d0c0;
    --ink-btn-text: #1c130b;

    --ok: #5cc794;
    --ok-soft: rgb(46 160 110 / 0.16);
    --ok-border: rgb(92 199 148 / 0.3);
    --warn: #e0aa52;
    --warn-soft: rgb(224 170 82 / 0.14);
    --warn-border: rgb(224 170 82 / 0.3);
    --danger: #f0907f;
    --danger-soft: rgb(240 110 90 / 0.14);
    --danger-border: rgb(240 144 127 / 0.3);

    --pin-sight: #129a92;
    --pin-food: #cd6a5c;
    --pin-ink: #111;
    --brand-ink: #0b1f1e; /* text ON the bright dark-mode brand (11:1) */
    --pin-stay: #7a73cc;
    --pin-transport: #259a72;
    --route: rgb(241 236 226 / 0.5);
    --board-grid: rgb(255 255 255 / 0.05);
    --board-bg: linear-gradient(135deg, #11202c, #182438 52%, #122433);
    --map-real-bg: #0e1626;

    --toast-bg: #123430;
    --toast-text: #d9efe9;
    --backdrop: rgb(0 0 0 / 0.6);
    --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6' fill='none' stroke='%2394a6ba' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

    --card-s: 56%;
    --card-l: 54%;
  }
}

/* ============================================================
   2. Base
   ============================================================ */

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  /* Directional daylight: warm sun top-left, teal sea-glow right — the
     «Mediterranean Daylight» name finally proven in pixels. */
  background:
    var(--sun-glow),
    var(--sea-glow),
    var(--bg);
  font-family: var(--font);
  font-size: var(--fs-sm);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3 {
  text-wrap: balance;
}

h1,
h2,
h3,
h4 {
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* Display voice: Source Serif 4 (editorial serif) for the major headings + wordmark */
h1,
h2,
h3,
.brand-name,
.onboard-h {
  font-family: var(--font-display);
  font-weight: 600;
}

::selection {
  background: rgb(20 184 166 / 0.28);
}

button,
input,
select {
  font-family: inherit;
  font-size: var(--fs-sm);
}

button {
  cursor: pointer;
}

input[type="checkbox"] {
  width: 18px;
  height: 18px;
  min-height: 0;
  padding: 0;
  border: 0;
  background: none;
  accent-color: var(--brand);
}

:focus-visible {
  outline: 3px solid rgb(20 184 166 / 0.65);
  outline-offset: 2px;
}

/* Visually hidden but available to assistive tech (state/context text). */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.eyebrow {
  margin: 0 0 4px;
  color: var(--brand);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Shared micro-interactions: color / shadow / transform only */
button,
.trip-card,
.tab,
.menu-item,
input,
select,
.more-section summary {
  transition:
    color var(--dur) var(--ease),
    background-color var(--dur) var(--ease),
    border-color var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease),
    transform var(--dur) var(--ease);
}

/* ============================================================
   3. Level 1: «Τα ταξίδια μου»
   ============================================================ */

.trips-view {
  width: min(100%, 1040px);
  margin: 0 auto;
  padding: var(--sp-4) var(--sp-3) 72px;
}

.home-brand {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: var(--sp-5);
}

.brand-mark {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  color: #fff;
  background: var(--grad);
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-md);
  font-size: var(--fs-lg);
  font-weight: 700;
}

.brand-name {
  font-size: 20px;
  font-weight: 600; /* Source Serif 4 ships a 600 cut only — avoid synthetic bold on the wordmark */
  letter-spacing: -0.02em;
}

.home-hero {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: var(--sp-4);
}

.home-hero h1 {
  margin: 0;
  font-size: var(--fs-3xl);
  letter-spacing: -0.015em;
  line-height: 1.05;
}

.home-subtitle {
  margin: 6px 0 0;
  color: var(--text-2);
  font-size: var(--fs-md);
}

.home-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.trip-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--sp-2);
}

/* --- Trip cards: top accent strip + elevation --- */

.trip-card {
  position: relative;
  overflow: hidden;
  display: grid;
  gap: 6px;
  padding: 26px 20px 20px;
  color: var(--text);
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--edge-light), var(--shadow-sm);
  transition:
    border-color 180ms ease,
    box-shadow 180ms ease,
    transform 180ms ease;
}

.trip-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 6px;
  background: linear-gradient(
    90deg,
    hsl(var(--card-h) var(--card-s) var(--card-l)),
    hsl(calc(var(--card-h) + 28) calc(var(--card-s) + 8%) calc(var(--card-l) + 8%))
  );
}

/* Deterministic per-card hue (position-based, no JS) */
.trip-grid .trip-card:nth-child(6n + 1) { --card-h: 176; --card-s: 46%; --card-l: 42%; } /* sea */
.trip-grid .trip-card:nth-child(6n + 2) { --card-h: 198; --card-s: 42%; --card-l: 48%; } /* sky */
.trip-grid .trip-card:nth-child(6n + 3) { --card-h: 88;  --card-s: 32%; --card-l: 42%; } /* olive */
.trip-grid .trip-card:nth-child(6n + 4) { --card-h: 18;  --card-s: 62%; --card-l: 52%; } /* terracotta */
.trip-grid .trip-card:nth-child(6n + 5) { --card-h: 36;  --card-s: 64%; --card-l: 52%; } /* saffron */
.trip-grid .trip-card:nth-child(6n + 6) { --card-h: 322; --card-s: 36%; --card-l: 52%; } /* bougainvillea */

.trip-card:hover {
  border-color: rgb(20 184 166 / 0.4);
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
}

.trip-card:active {
  transform: translateY(0) scale(0.99);
}

.trip-card-title {
  font-size: var(--fs-md);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.trip-card-dest {
  color: var(--text-2);
  font-weight: 400;
}

.trip-card-dates {
  color: var(--text-2);
  font-size: var(--fs-xs);
}

/* Ο στόλος: the micro-Nimbo in the card's top-right corner */
.card-nimbo {
  position: absolute;
  top: 16px;
  right: 16px;
}

/* Each card answers «τι κάνω μετά;» — the top calm item, in gold (the thread) */
/* B3 (audit F9): the one line that matters on a card gets two lines, not «…». */
.trip-card-next {
  display: -webkit-box;
  overflow: hidden;
  margin-top: 2px;
  color: var(--gold-text);
  font-size: var(--fs-xs);
  font-weight: 600;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

.trip-card-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: var(--sp-1);
}

/* readiness chip (always the last pill) — brand tinted */
.trip-card-foot .meta-pill:last-child {
  color: var(--brand);
  background: var(--brand-soft);
  border-color: transparent;
}

/* «Παράδειγμα» badge on seeded sample trips — NEUTRAL: gold is reserved for the
   next step / readiness; demo data must not wear the signature color. */
.meta-pill.sample {
  color: var(--text-2);
  background: var(--surface-2);
  border-color: var(--border);
}

/* Anticipation countdown — serif number, escalating tone as departure nears */
.countdown {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 4px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text-2);
}

.countdown strong {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.countdown span {
  font-size: var(--label-size);
  font-weight: 700;
  letter-spacing: var(--label-track);
  text-transform: uppercase;
}

.countdown--near {
  color: var(--brand);
  border-color: rgb(12 111 110 / 0.3);
}

.countdown--gold {
  color: var(--gold-text);
  background: var(--gold-soft);
  border-color: var(--gold-border);
}

/* «Σε εξέλιξη» — the trip happening right now */
.meta-pill.live {
  color: var(--ok);
  background: var(--ok-soft);
  border-color: var(--ok-border);
}

/* «Γρήγορη εκκίνηση» template row for RETURNING users — the quick-start chips
   used to exist only in the first-run empty state (audit P2). */
.trip-grid-templates {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  grid-column: 1 / -1;
  margin-top: var(--sp-1);
  padding: var(--sp-2);
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-md);
}

/* Quiet product signature at the foot of the trips list */
.app-version {
  margin: var(--sp-4) 0 0;
  color: var(--text-2);
  opacity: 0.75;
  font-size: 12px;
  text-align: center;
}

/* The privacy link sits under the signature at full opacity (AA contrast). */
.app-links {
  margin: var(--sp-1) 0 0;
  font-size: var(--fs-xs);
  text-align: center;
}

.app-links a,
.map-consent .form-hint a {
  color: var(--brand);
  font-weight: 600;
}

/* --- Empty state with inline-SVG doodle (mask + currentColor) --- */

.trips-empty {
  display: grid;
  gap: var(--sp-2);
  justify-items: center;
  grid-column: 1 / -1;
  padding: 64px var(--sp-3);
  text-align: center;
  color: var(--text-2);
  background: var(--surface);
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-lg);
}

.trips-empty::before {
  content: "";
  width: 88px;
  height: 88px;
  background: currentColor;
  opacity: 0.75;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 96'%3E%3Cg fill='none' stroke='%23000' stroke-width='4.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='18' y='30' width='60' height='42' rx='9'/%3E%3Cpath d='M37 30v-7a11 11 0 0 1 22 0v7'/%3E%3Cpath d='M33 42v18M48 42v18M63 42v18'/%3E%3Cpath d='M12 88c12-10 26 10 38 0s24 8 34-4' stroke-dasharray='2 9'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 96'%3E%3Cg fill='none' stroke='%23000' stroke-width='4.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='18' y='30' width='60' height='42' rx='9'/%3E%3Cpath d='M37 30v-7a11 11 0 0 1 22 0v7'/%3E%3Cpath d='M33 42v18M48 42v18M63 42v18'/%3E%3Cpath d='M12 88c12-10 26 10 38 0s24 8 34-4' stroke-dasharray='2 9'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
}

.trips-empty p {
  margin: 0;
  color: var(--text-2);
  font-size: var(--fs-md);
}

/* First-run orientation (S7): the honest canvas explains Triparo + the compass */
.trips-onboard {
  gap: 14px;
  padding: 56px var(--sp-3);
  /* a welcoming solid panel, not the dashed "empty placeholder" frame */
  border-style: solid;
  border-color: var(--border);
}

.trips-onboard::before {
  display: none; /* replace the generic suitcase doodle with the Nimbo compass */
}

.onboard-mark {
  display: block;
}

.onboard-h {
  margin: 0;
  color: var(--text);
  font-size: var(--fs-xl);
  letter-spacing: -0.02em;
}

.onboard-p {
  margin: 0;
  max-width: 48ch;
  color: var(--text-2);
  font-size: var(--fs-md);
  line-height: 1.5;
}

.onboard-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-top: 6px;
}

.onboard-templates {
  display: grid;
  gap: 10px;
  justify-items: center;
  margin-top: 8px;
}

.onboard-templates-label {
  color: var(--text-2);
  font-size: var(--fs-xs);
}

.onboard-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}

.template-chip {
  min-height: 38px;
  padding: 0 16px;
  color: var(--brand);
  background: var(--brand-soft);
  border: 1px solid transparent;
  border-radius: var(--r-pill, 999px);
  font-weight: 600;
}

.template-chip:hover {
  border-color: rgb(20 184 166 / 0.5);
  background: var(--brand-soft-2);
}

/* ============================================================
   4. Level 2: trip view shell
   ============================================================ */

.trip-view {
  width: min(100%, 960px);
  min-width: 0;
  margin: 0 auto;
  padding: var(--sp-3) var(--sp-3) 72px;
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  margin-bottom: var(--sp-1);
  padding: 0 10px;
  color: var(--text-2);
  background: transparent;
  border: 0;
  border-radius: var(--r-sm);
  font-size: var(--fs-xs);
  font-weight: 600;
}

.back-link:hover {
  color: var(--brand);
  background: var(--brand-soft);
}

/* Hero band */
.topbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-2);
  margin-bottom: var(--sp-1);
  padding: var(--sp-3);
  background:
    linear-gradient(135deg, rgb(14 124 123 / 0.1), rgb(20 184 166 / 0.03) 55%, transparent),
    var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--edge-light), var(--shadow-sm);
}

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

.topbar h1 {
  margin: 0;
  font-size: var(--fs-xl);
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.trip-dates {
  margin: 6px 0 0;
  color: var(--text-2);
  font-weight: 400;
}

.meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin-top: 12px;
}

.meta-pill {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 3px 10px;
  color: var(--text-2);
  background: transparent;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  font-size: var(--fs-xs);
  font-weight: 600;
}

/* ============================================================
   5. «⋯» menu — floating card
   ============================================================ */

.trip-menu {
  position: relative;
  flex: 0 0 auto;
}

.menu-button {
  width: 44px;
  height: 44px;
  font-size: 20px;
  font-weight: 700;
}

.menu[hidden] {
  display: none;
}

.menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 20;
  display: grid;
  min-width: 240px;
  padding: var(--sp-1);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  animation: menu-pop var(--dur) var(--ease);
}

@keyframes menu-pop {
  from {
    opacity: 0;
    transform: translateY(-4px) scale(0.98);
  }
}

.menu-item {
  min-height: 42px;
  padding: 8px 12px;
  color: var(--text);
  text-align: left;
  background: transparent;
  border: 0;
  border-radius: var(--r-sm);
  font-weight: 600;
}

.menu-item:hover,
.menu-item:focus-visible {
  background: var(--brand-soft);
  color: var(--brand);
}

/* ============================================================
   6. Buttons
   ============================================================ */

.primary-action,
.secondary-action,
.ghost-button,
.danger-button {
  min-height: 44px;
  border-radius: 12px;
  border: 1px solid transparent;
  font-weight: 600;
}

.primary-action:active,
.secondary-action:active,
.ghost-button:active,
.danger-button:active,
.vote-button:active,
.icon-button:active {
  transform: scale(0.98);
}

.primary-action {
  padding: 0 20px;
  color: #fff;
  background: var(--grad);
  box-shadow: var(--shadow-sm);
}

.primary-action:hover {
  background: var(--grad-hover);
  box-shadow: var(--shadow-md);
}

.primary-action.big {
  min-height: 48px;
  padding: 0 24px;
  font-size: 16px;
}

.secondary-action {
  padding: 0 18px;
  color: var(--ink-btn-text);
  background: var(--ink-btn);
}

.secondary-action:hover {
  background: var(--ink-btn-hover);
}

.ghost-button {
  display: inline-grid;
  place-items: center;
  padding: 0 16px;
  color: var(--text);
  background: var(--surface);
  border-color: var(--border-strong);
}

.ghost-button:hover,
.vote-button:hover {
  color: var(--brand);
  border-color: rgb(20 184 166 / 0.65);
  background: var(--brand-soft);
}

.ghost-button.small {
  min-height: 34px;
  padding: 0 12px;
  font-size: var(--fs-xs);
  border-radius: var(--r-sm);
}

.danger-button {
  padding: 0 16px;
  color: var(--danger);
  background: var(--danger-soft);
  border-color: var(--danger-border);
}

.danger-button:hover {
  border-color: var(--danger);
}

/* Quiet destructive link (W1-B): «Διαγραφή ταξιδιού» in the settings dialog must
   not out-shout «Δημιουργία/Αποθήκευση» — danger is signalled by ink, not mass. */
.ghost-button.danger-link {
  color: var(--danger);
  background: transparent;
  border-color: transparent;
}

.ghost-button.danger-link:hover {
  background: var(--danger-soft);
  border-color: var(--danger-border);
}

.icon-button {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  color: var(--text-2);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  font-size: var(--fs-xs);
  line-height: 1;
}

.icon-button:hover {
  color: var(--brand);
  border-color: rgb(20 184 166 / 0.65);
  background: var(--brand-soft);
}

.icon-button.danger {
  color: var(--danger);
}

.icon-button.danger:hover {
  border-color: var(--danger);
  background: var(--danger-soft);
}

/* ============================================================
   7. Tabs — segmented control (desktop) / frosted bar (mobile)
   ============================================================ */

.tabs {
  position: sticky;
  /* --banner-offset: height of the in-flow banner stack (set by the app), so the
     sticky bar never slides under a persistent banner (S0a review B1). */
  top: calc(8px + var(--banner-offset, 0px));
  z-index: 10;
  display: flex;
  gap: 4px;
  align-items: center;
  overflow-x: auto;
  margin: var(--sp-2) 0;
  padding: 4px;
  background: var(--seg-bg);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
}

.tabs::-webkit-scrollbar {
  height: 6px;
}

.tabs::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: 999px;
}

.tabs::-webkit-scrollbar-track {
  background: transparent;
}

@supports (backdrop-filter: blur(12px)) or (-webkit-backdrop-filter: blur(12px)) {
  .tabs {
    background: var(--seg-bg-glass);
    -webkit-backdrop-filter: blur(12px) saturate(1.4);
    backdrop-filter: blur(12px) saturate(1.4);
  }
}

/* Sliding active indicator: ONE surface that GLIDES under the tabs instead of
   background snapping — the most visible motion in the app. */
.tab-indicator {
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 0;
  width: 0;
  background: var(--tab-indicator-bg);
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-sm);
  z-index: 0;
  pointer-events: none;
}

.tabs.is-ready .tab-indicator {
  transition: transform var(--dur-settle) var(--ease), width var(--dur-settle) var(--ease);
}

.tab {
  position: relative;
  z-index: 1;
  display: inline-flex;
  flex: 1 1 0;
  gap: 7px;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 12px;
  color: var(--text-2);
  background: transparent;
  border: 0;
  border-radius: var(--r-sm);
  font-size: var(--fs-xs);
  font-weight: 600;
  white-space: nowrap;
}

.tab:hover {
  color: var(--text);
  background: rgb(20 184 166 / 0.08);
}

.tab.active {
  color: var(--brand);
}

.tab-icon {
  display: none;
  width: 20px;
  height: 20px;
}

.tab-panel {
  display: none;
}

.tab-panel.active {
  display: grid;
  /* macro rhythm: sections breathe apart (micro gaps stay tight inside them) */
  gap: var(--sp-3);
  animation: panel-in var(--dur-settle) var(--ease);
}

@keyframes panel-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ============================================================
   8. Panels / stat cards
   ============================================================ */

.panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  /* edge-light: the sun catches the top edge of every raised surface */
  box-shadow: var(--edge-light), var(--shadow-sm);
}

.panel {
  min-width: 0;
  padding: 28px;
}

.panel-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 20px;
}

.panel h2 {
  margin: 0;
  font-size: var(--fs-md);
}

/* Structural panel headings that merely repeat the active tab («Ημερήσιο
   πρόγραμμα» under the Πρόγραμμα tab) step down to a quiet caps label —
   ο planner που αφαιρεί. Narrative headings (Τώρα, Σήμερα) stay serif. */
.panel h2.panel-label {
  font-family: var(--font);
  font-size: var(--label-size);
  font-weight: 700;
  letter-spacing: var(--label-track);
  text-transform: uppercase;
  color: var(--text-2);
}

/* Meta strip UNDER the focus card (next-step-first IA): the numbers are quiet
   context pills that double as jump-to-tab shortcuts — not a dashboard wall. */
.stats-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.stat-pill {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  min-height: var(--chip-h);
  padding: 4px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--chip-r);
  font-family: inherit;
  cursor: pointer;
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.stat-pill:hover {
  border-color: var(--brand);
  transform: translateY(-1px);
}

.stat-pill-label {
  color: var(--text-2);
  font-size: var(--label-size);
  font-weight: 700;
  letter-spacing: var(--label-track);
  text-transform: uppercase;
}

.stat-pill strong {
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}

.stat-pill-note {
  color: var(--text-2);
  font-size: var(--fs-xs);
}

/* B3: inside the focus card the strip is a compact 2×2 grid on phones — four
   answers («πόσα, τι, ιδέες, κρατήσεις») in ~2 rows instead of 4 wrapped pills. */
.stats-strip--in-card {
  margin: var(--sp-2) 0;
}

@media (max-width: 520px) {
  .stats-strip--in-card {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .stats-strip--in-card .stat-pill {
    display: grid;
    align-content: start;
    gap: 1px;
    padding: 8px 10px;
    border-radius: var(--r-sm);
    text-align: left;
  }
}

/* B3: the full hero band belongs to the overview. Every other tab keeps one
   quiet line (title · dates), so its content starts above the fold. */
.trip-view:not([data-active-tab="overview"]) .topbar {
  align-items: center;
  padding: 10px 12px 10px 16px;
  border-radius: var(--r-md);
}

.trip-view:not([data-active-tab="overview"]) .topbar h1 {
  overflow: hidden;
  font-size: var(--fs-md);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.trip-view:not([data-active-tab="overview"]) .trip-dates {
  margin-top: 2px;
  font-size: var(--fs-xs);
}

.trip-view:not([data-active-tab="overview"]) .meta-row {
  display: none;
}

.trip-view:not([data-active-tab="overview"]) .menu-button {
  width: 40px;
  height: 40px;
}

/* «Σήμερα» — in-trip hero card: today's programme leads the Overview */
.today-card {
  border-color: var(--brand);
  box-shadow: 0 0 0 1px var(--brand) inset, var(--shadow-sm);
}

.today-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: var(--sp-2);
}

.today-head h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: 600;
}

.today-item {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 9px 4px;
  border-top: 1px solid var(--border);
}

.today-item .item-title {
  flex: 1;
  min-width: 0;
}

/* S9 Today/Next — «Τώρα / Μετά»: the two columns of the in-trip moment.
   Auto-fit so the pair stacks calmly on narrow screens. */
.now-next {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0 var(--sp-2);
}

.now-next-col {
  border-top: 1px solid var(--border);
  padding: 10px 4px 6px;
  display: grid;
  gap: 6px;
  align-content: start;
}

/* ONE caps-label voice (token pair --label-size/--label-track) */
.now-next-label {
  font-size: var(--label-size);
  letter-spacing: var(--label-track);
  text-transform: uppercase;
  font-weight: 600;
  color: var(--text-2);
}

/* ΤΩΡΑ is the hero of the moment: brand label + a quiet brand hairline. */
.now-next-col--now {
  border-top: 2px solid var(--brand);
}

.now-next-col--now .now-next-label {
  color: var(--brand);
}

.now-next-stop {
  display: flex;
  align-items: baseline;
  gap: 12px;
}

.now-next-stop .item-title {
  flex: 1;
  min-width: 0;
  font-weight: 600;
}

.now-next-more {
  padding: 4px 4px 0;
}

.today-tasks {
  border-top: 1px solid var(--border);
  margin-top: var(--sp-1);
  padding-top: 8px;
  display: grid;
  gap: 2px;
}

/* ============================================================
   9. Focus card («Πού να εστιάσεις»)
   ============================================================ */

.focus-card {
  display: grid;
  gap: 0;
}

.focus-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-2);
  margin-bottom: 12px;
}

.focus-head h2 {
  margin: 0 0 4px;
  font-size: var(--fs-lg);
}

/* Nimbo readiness compass — the brand mark IS the hero metric */
.focus-ring {
  display: grid;
  justify-items: center;
  gap: 4px;
  flex: 0 0 auto;
}

.nimbo-ring {
  display: block;
}

/* readiness fill animates from the previous value; reduced-motion zeroes this globally */
.nimbo-arc {
  transition: stroke-dashoffset var(--dur-magic) var(--ease);
}

/* The needle is a real compass needle: it TRAVELS (re-seeded like the arc) and
   settles with a slight mechanical overshoot. At 100% it locks North. */
.nimbo-needle {
  transform-origin: 36px 36px;
  transition: transform var(--dur-magic) var(--ease-spring);
}

.nimbo-needle.lock {
  animation: needle-lock 600ms var(--ease) var(--dur-magic);
}

@keyframes needle-lock {
  0% { transform: rotate(0deg); }
  30% { transform: rotate(-3deg); }
  60% { transform: rotate(1.5deg); }
  100% { transform: rotate(0deg); }
}

/* one-shot gold glow when the trip first hits 100% */
.nimbo-arc.celebrate {
  animation: ring-celebrate 1100ms var(--ease);
}

@keyframes ring-celebrate {
  35% {
    filter: drop-shadow(0 0 7px var(--gold));
  }
  100% {
    filter: none;
  }
}

/* The readiness number is the product's hero metric — it speaks in the serif
   voice (serif only ≥22px, where its strokes actually read). */
.focus-ring-num {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1;
  color: var(--brand);
  font-variant-numeric: tabular-nums;
}

.focus-ring-num.ready {
  color: var(--gold);
}

.focus-ring-cap {
  display: block;
  margin-top: 3px;
  color: var(--text-2);
  font-family: var(--font);
  font-size: var(--label-size);
  font-weight: 700;
  letter-spacing: var(--label-track);
  text-transform: uppercase;
}

/* Nimbo's concierge voice */
.focus-voice {
  margin: 4px 0 6px;
  color: var(--text);
  font-size: var(--fs-sm);
  font-weight: 400;
  line-height: 1.4;
  max-width: 46ch;
}

.focus-toggle {
  justify-self: start;
}

.focus-list {
  display: grid;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--border);
}

.focus-group {
  display: grid;
  gap: var(--sp-1);
}

.focus-group-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.focus-group-head h3 {
  margin: 0;
  font-family: var(--font);
  font-size: var(--fs-sm);
  font-weight: 700;
}

.focus-group-count {
  color: var(--text-2);
  font-size: var(--fs-xs);
  font-weight: 700;
}

.pillar-phase {
  display: block;
  margin-bottom: 2px;
  color: var(--brand);
  font-size: var(--label-size);
  font-weight: 700;
  letter-spacing: var(--label-track);
  text-transform: uppercase;
}

.pillar-item {
  position: relative; /* anchors the visually-hidden checkbox over the row */
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  padding: 12px;
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  font-weight: 400;
}

.pillar-item input {
  width: 18px;
  height: 18px;
  margin-top: 2px;
}

.pillar-item.done {
  opacity: 0.6;
}

.pillar-item.done .item-title {
  text-decoration: line-through;
}

/* Calm readiness: blocker highlight (priority=high undone items) */
.pillar-item--blocker {
  border-left: 3px solid var(--brand);
}

/* THE golden thread: exactly one row per screen — the next step — wears gold */
.pillar-item--next {
  border-left: 3px solid var(--gold);
  background: var(--gold-soft);
}

/* B1: the row's side (shared .row-side, §12) holds the jump to where the step
   gets done — always visible — plus the edit/delete pair of the traveller's own steps. */
.row-jump {
  position: relative; /* above the row-wide visually-hidden checkbox */
  z-index: 1;
  min-height: 32px;
  padding: 4px 10px;
  color: var(--brand);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-family: inherit;
  font-size: var(--fs-xs);
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}

.row-jump:hover {
  border-color: var(--brand);
}

/* Phones: the jump drops under the text so titles keep the full row width
   (beside it they wrapped to 3 lines at 375px). */
@media (max-width: 520px) {
  .pillar-item .row-side {
    grid-column: 2;
    justify-self: start;
  }
}

/* Custom check — the completion moment. The native input stays for a11y (it is
   the focus target and the click surface); the visual box draws the tick with a
   live stroke (Things-3 style). */
.pillar-item input[type="checkbox"] {
  position: absolute;
  width: 24px;
  height: 24px;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.item-check {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  flex: none;
  background: var(--surface);
  border: 1.6px solid var(--border-strong);
  border-radius: 6px;
  color: #fff;
  transition: background var(--dur-quick) var(--ease), border-color var(--dur-quick) var(--ease);
}

.pillar-item input[type="checkbox"]:checked + .item-check {
  background: var(--brand);
  border-color: var(--brand);
}

.item-check path {
  stroke-dasharray: 24;
  stroke-dashoffset: 24;
}

.pillar-item input[type="checkbox"]:checked + .item-check path {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 200ms var(--ease) 60ms;
}

.pillar-item input[type="checkbox"]:focus-visible + .item-check {
  outline: 3px solid rgb(20 184 166 / 0.65);
  outline-offset: 2px;
}

/* Post-toggle settle: the row that just completed glows once (survives the full
   re-render — the handler re-finds the node and re-applies the class). */
.pillar-item.just-done {
  animation: just-done 600ms var(--ease);
}

@keyframes just-done {
  0% { background-color: var(--gold-soft); }
  100% { background-color: var(--surface-2); }
}

/* Row chrome appears only when the hand (or focus) arrives — 8 simultaneous
   edit/trash pairs made every list read as an admin table (D4). */
@media (hover: hover) {
  .timeline-item .row-actions,
  .budget-item .row-actions,
  .ticket-item .row-actions,
  .doc-item .row-actions,
  .task-item .row-actions,
  .pillar-item .row-actions,
  .decision-item .row-actions {
    opacity: 0;
    transition: opacity var(--dur-quick) var(--ease);
  }

  .timeline-item:hover .row-actions,
  .timeline-item:focus-within .row-actions,
  .budget-item:hover .row-actions,
  .budget-item:focus-within .row-actions,
  .ticket-item:hover .row-actions,
  .ticket-item:focus-within .row-actions,
  .doc-item:hover .row-actions,
  .doc-item:focus-within .row-actions,
  .task-item:hover .row-actions,
  .task-item:focus-within .row-actions,
  .pillar-item:hover .row-actions,
  .pillar-item:focus-within .row-actions,
  .decision-item:hover .row-actions,
  .decision-item:focus-within .row-actions {
    opacity: 1;
  }
}

/* The destructive red exists only at the moment of destructive intent */
.icon-button.danger {
  color: var(--text-2);
}

.icon-button.danger:hover,
.icon-button.danger:focus-visible {
  color: var(--danger);
}

/* Press feedback — the hand lands somewhere */
button:not(:disabled):active {
  transform: scale(0.985);
}

/* Undo toast: the deadline is VISIBLE — a draining gold hairline */
.toast-life {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 5px;
  height: 2px;
  border-radius: 2px;
  background: var(--gold);
  transform-origin: left;
  animation: toast-life linear forwards;
}

@keyframes toast-life {
  from { transform: scaleX(1); }
  to { transform: scaleX(0); }
}

/* Η ΡΟΤΑ — the 7-phase compass bezel above the phase buttons */
.rota-bezel {
  display: block;
  width: 100%;
  height: auto;
  margin-bottom: 2px;
}

.rota-progress {
  transition: stroke-dasharray var(--dur-magic) var(--ease);
}

/* Phase roadmap strip — 7 chips in a scrollable row */
.phase-roadmap {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: var(--sp-2);
}

.phase-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: var(--chip-h);
  padding: 0 12px;
  border-radius: var(--chip-r);
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text-2);
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.03em;
  white-space: nowrap;
  cursor: pointer;
  transition: transform var(--dur, 0.15s) var(--ease, ease), box-shadow var(--dur, 0.15s) var(--ease, ease), background var(--dur, 0.15s) var(--ease, ease);
}

.phase-chip:hover {
  border-color: var(--brand);
  color: var(--text);
}

.phase-chip--open {
  box-shadow: 0 0 0 2px var(--brand) inset;
  color: var(--text);
}

.phase-chip--current {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--brand-ink, #fff);
}

.phase-chip--current:hover {
  color: var(--brand-ink, #fff);
}

.phase-chip--done {
  /* Completed phases: struck through, but text stays at full --text-2 (~5.5:1 on
     --surface-2) — no opacity dimming, which would drop it below WCAG AA. */
  background: transparent;
  border-color: var(--border);
  color: var(--text-2);
  text-decoration: line-through;
}

.phase-chip--locked {
  /* Future/locked phases: signalled by a dashed border (not colour/opacity alone),
     text kept at full --text-2 so 11px labels still clear AA. */
  color: var(--text-2);
  border-style: dashed;
  border-color: var(--text-2);
}

/* "Αργότερα" quiet footer */
.focus-later {
  margin: var(--sp-2) 0 0;
  padding: var(--sp-1) 12px;
  border-radius: var(--r-sm);
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text-2);
  font-size: var(--fs-xs);
}

/* "+N ακόμη — δες τα όλα": reveals the active items the cap hid. Quiet, inline. */
.focus-more {
  align-self: start;
  margin-top: 2px;
  padding: 6px 2px;
  background: none;
  border: 0;
  min-height: 0;
  color: var(--brand);
  font-family: inherit;
  font-size: var(--fs-xs);
  font-weight: 600;
  cursor: pointer;
}

.focus-more:hover {
  text-decoration: underline;
}

/* "Δες όλη την πορεία / Σύμπτυξη": completeness-on-request toggle. */
.focus-expand-toggle {
  margin-top: var(--sp-2);
  width: 100%;
  padding: 10px 12px;
  background: var(--surface-2);
  border: 1px dashed var(--border);
  border-radius: var(--r-sm);
  color: var(--text-2);
  font-family: inherit;
  font-size: var(--fs-xs);
  font-weight: 600;
  cursor: pointer;
}

.focus-expand-toggle:hover {
  border-color: var(--brand);
  color: var(--text);
}

/* THE composer — the ONE way data enters Triparo (D4). A quiet dashed trigger
   at the end of every list opens the form; Enter submits and it STAYS open for
   the next entry (the details element is static DOM, untouched by re-renders).
   Kills the five permanently-open «wall of fields» admin forms. */
.composer {
  margin-top: var(--sp-2);
}

.composer-trigger {
  display: block;
  padding: 11px 12px;
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-sm);
  color: var(--text-2);
  font-size: var(--fs-xs);
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  list-style: none;
  transition: color var(--dur-quick) var(--ease), border-color var(--dur-quick) var(--ease);
}

.composer-trigger::-webkit-details-marker {
  display: none;
}

.composer-trigger:hover {
  border-color: var(--brand);
  color: var(--brand);
}

.composer[open] > .composer-trigger {
  margin-bottom: 14px;
  border-style: solid;
  border-color: var(--border);
  background: var(--surface-2);
  color: var(--text);
  text-align: left;
}

/* ============================================================
   10. Forms
   ============================================================ */

.compact-input,
input,
select {
  min-height: 44px;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  font-weight: 500;
}

input,
select {
  width: 100%;
  padding: 0 12px;
}

input::placeholder {
  color: var(--text-2);
  opacity: 0.7;
}

select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 36px;
  background-image: var(--select-arrow);
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 18px;
}

input:focus-visible,
select:focus-visible {
  outline: none;
  border-color: var(--brand-bright);
  box-shadow: var(--ring);
}

input[type="checkbox"]:focus-visible {
  outline: none;
  box-shadow: var(--ring);
}

.compact-input {
  width: auto;
  min-height: 38px;
  padding: 0 10px;
}

select.compact-input {
  padding-right: 32px;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
  align-items: end;
}

.form-grid .secondary-action {
  align-self: end;
}

.form-divider {
  margin-top: var(--sp-2);
  padding-top: var(--sp-2);
  border-top: 1px solid var(--border);
}

label {
  display: grid;
  gap: 6px;
  color: var(--text-2);
  font-size: var(--fs-xs);
  font-weight: 600;
}

.add-inline {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  margin-top: 12px;
}

/* ============================================================
   11. Map
   ============================================================ */

.map-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.map-canvas {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 400px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
}

.map-canvas.board {
  background:
    linear-gradient(90deg, var(--board-grid) 1px, transparent 1px),
    linear-gradient(var(--board-grid) 1px, transparent 1px),
    var(--board-bg);
  background-size: 44px 44px, 44px 44px, auto;
}

.map-canvas.real {
  background: var(--map-real-bg);
}

/* 2026-10-03: the real map is MapLibre (vendored); markers are DOM buttons. */
.map-stage {
  position: relative;
}

/* Two classes: MapLibre's own stylesheet (loaded later) sets .maplibregl-map
   to position:relative, which would collapse the host to 0px. */
.map-canvas .maplibre-host {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.maplibre-host .maplibregl-ctrl-attrib {
  font-size: 11px;
}

#map3dToggle[aria-pressed="true"] {
  color: #fff;
  background: var(--brand);
  border-color: var(--brand);
}

/* «Πλοήγηση»: the map takes the whole screen; the turn on top, the arrival
   below. Above the tab bar (20), under toasts (30) and banners (60). */
.map-stage.is-navigating {
  position: fixed;
  inset: 0;
  z-index: 25;
  background: var(--bg);
}

.map-stage.is-navigating .map-canvas {
  position: absolute;
  inset: 0;
  min-height: 0;
  border: 0;
  border-radius: 0;
}

.map-stage.is-navigating .maplibregl-ctrl-top-right {
  top: calc(env(safe-area-inset-top, 0px) + 96px);
}

/* The map's attribution stays visible above the arrival panel (review C:
   OSM/ODbL credit while the route is drawn). */
.map-stage.is-navigating .maplibregl-ctrl-bottom-right,
.map-stage.is-navigating .maplibregl-ctrl-bottom-left {
  bottom: calc(env(safe-area-inset-bottom, 0px) + 150px);
}

.routing-note {
  margin-top: 8px;
}

body.navigating {
  overflow: hidden;
}

.nav-top {
  position: absolute;
  top: calc(env(safe-area-inset-top, 0px) + 10px);
  left: 10px;
  right: 10px;
  z-index: 2;
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  color: #fff;
  background: #0c6f6e;
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
}

.nav-top[hidden],
.nav-bottom[hidden],
.nav-recenter[hidden] {
  display: none;
}

.nav-arrow {
  flex: none;
  width: 36px;
  font-size: 30px;
  line-height: 1;
  text-align: center;
}

.nav-instruction {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.nav-distance {
  font-size: var(--fs-lg);
  font-weight: 800;
}

.nav-text {
  font-size: var(--fs-sm);
  line-height: 1.3;
}

.nav-bottom {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 10px);
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  color: var(--text);
  background: var(--surface);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
}

.nav-eta {
  display: grid;
  gap: 2px;
}

.nav-eta strong {
  font-size: var(--fs-md);
}

.nav-eta span {
  color: var(--text-2);
  font-size: var(--fs-xs);
}

.nav-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.nav-recenter {
  position: absolute;
  right: 10px;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 96px);
  z-index: 2;
  min-height: 44px;
  padding: 0 16px;
  color: #fff;
  background: #0c6f6e;
  border: 0;
  border-radius: 999px;
  box-shadow: var(--shadow-md);
  font-weight: 700;
}

.nav-me {
  width: 22px;
  height: 22px;
  background: #1a73e8;
  border: 3px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 7px rgb(26 115 232 / 0.22), 0 2px 6px rgb(0 0 0 / 0.3);
}

/* «Ο κόσμος σου» — the trips on a globe (home). */
.world-map {
  display: grid;
  gap: 10px;
  margin: 24px 0 8px;
}

.world-map[hidden],
.world-map-canvas[hidden] {
  display: none;
}

.world-map-head {
  display: grid;
  gap: 2px;
}

.world-map-title {
  margin: 0;
  font-family: var(--font-display, "Source Serif 4", Georgia, serif);
  font-size: var(--fs-lg);
}

.world-map-hint {
  color: var(--text-2);
  font-size: var(--fs-sm);
}

.world-map-canvas {
  position: relative;
  height: 340px;
  overflow: hidden;
  background: var(--map-real-bg);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-lg);
}

.world-pin {
  padding: 6px 10px;
  color: #fff;
  background: #0c6f6e;
  border: 2px solid #fff;
  border-radius: 999px;
  box-shadow: var(--shadow-md);
  font: 700 13px/1.2 Inter, system-ui, sans-serif;
  white-space: nowrap;
  cursor: pointer;
}

.map-route {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.route-line {
  fill: none;
  stroke: var(--route);
  stroke-dasharray: 8 8;
  stroke-width: 3;
}

.map-pin {
  position: absolute;
  display: grid;
  min-width: 104px;
  max-width: 160px;
  padding: 8px 10px;
  color: #fff;
  background: var(--pin-sight);
  border: 1px solid rgb(255 255 255 / 0.65);
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-md);
  transform: translate(-50%, -50%);
}

/* B5: numbered dots (board + real map) and the stop list under the map. */
.map-consent {
  display: grid;
  gap: 10px;
  margin-bottom: 12px;
  padding: 12px 14px;
  background: var(--brand-soft);
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
}

.map-consent p {
  margin: 0;
}

.map-consent-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.map-days {
  overflow-x: auto;
  margin-bottom: 10px;
}

.map-days .seg {
  flex-wrap: nowrap;
}

.map-days .seg-btn {
  white-space: nowrap;
}

.map-dot {
  position: absolute;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  color: var(--pin-ink, #fff);
  background: var(--pin-sight);
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: var(--shadow-md);
  font-size: 13px;
  font-weight: 800;
  transform: translate(-50%, -50%);
}

.map-dot.food { background: var(--pin-food); }
.map-dot.stay { background: var(--pin-stay); }
.map-dot.transport { background: var(--pin-transport); }

.map-dot.is-selected {
  outline: 3px solid var(--gold);
  outline-offset: 1px;
}

.map-marker .map-dot,
.map-stop .map-dot {
  position: static;
  transform: none;
}

.map-marker .map-dot {
  cursor: pointer;
}

.map-empty {
  position: absolute;
  inset: auto 16px 16px;
  margin: 0;
  color: var(--text-2);
  font-size: var(--fs-sm);
}

.map-stops {
  display: grid;
  gap: 6px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.map-stop {
  display: flex;
  gap: 10px;
  align-items: center;
  width: 100%;
  min-height: 44px;
  padding: 6px 10px;
  color: var(--text);
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
}

.map-stop.is-selected {
  border-color: var(--brand);
}

.map-stop .map-dot {
  flex: none;
  width: 26px;
  height: 26px;
  font-size: 12px;
  box-shadow: none;
}

.map-stop-text {
  display: grid;
  min-width: 0;
}

.map-stop-text span {
  color: var(--text-2);
  font-size: var(--fs-xs);
}

.map-pin.food {
  background: var(--pin-food);
}

.map-pin.stay {
  background: var(--pin-stay);
}

.map-pin.transport {
  background: var(--pin-transport);
}

.map-pin.sight {
  background: var(--pin-sight);
}

.map-pin strong {
  overflow-wrap: anywhere;
  font-size: 12px;
}

.map-pin span {
  opacity: 0.8;
  font-size: 11px;
}

.selected-place {
  min-height: 48px;
  margin-top: 12px;
  color: var(--text-2);
  line-height: 1.45;
}

.selected-place strong {
  display: block;
  color: var(--text);
}

.selected-place-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

/* «Πλοήγηση» + «Όρισε θέση» + edit + delete must wrap at 375px, never push
   the page wider than the phone (2026-10-03). */
.selected-place-row > div {
  flex: 1 1 200px;
  min-width: 0;
}

.selected-place-row .row-actions {
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* ============================================================
   12. Lists / items
   ============================================================ */

.budget-list,
.ticket-list,
.traveler-list,
.task-list,
.checklist,
.timeline,
.decision-list,
.readiness-panel {
  display: grid;
  gap: 10px;
}

.budget-item,
.ticket-item,
.traveler-item,
.task-item,
.doc-item,
.timeline-item,
.decision-item,
.readiness-item {
  display: grid;
  gap: 6px;
  padding: 12px 14px;
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  font-weight: 400;
}

.row-side {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
}

.row-actions {
  display: inline-flex;
  gap: 6px;
  align-items: center;
}

.timeline-day {
  /* paragraph turn: a day boundary breathes 3x more than an item boundary */
  margin: 24px 0 2px;
  color: var(--text);
  font-family: var(--font);
  font-size: var(--fs-sm);
  font-weight: 700;
}

.timeline > div:first-child .timeline-day {
  margin-top: 0;
}

.timeline-item {
  grid-template-columns: 64px minmax(0, 1fr) auto;
  align-items: center;
}

/* A RUN of free days collapses into one quiet dashed row («ο planner που
   αφαιρεί» — 5 identical «Κενή ημέρα» cards said nothing 5 times). */
.timeline-free {
  display: grid;
  gap: 2px;
  padding: 12px 14px;
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-sm);
  color: var(--text-2);
  font-size: var(--fs-xs);
  font-weight: 600;
}

.timeline-time {
  color: var(--brand);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.item-title {
  margin: 0;
  font-weight: 600;
}

.item-meta,
.item-note {
  margin: 0;
  color: var(--text-2);
  font-size: var(--fs-xs);
  font-weight: 400;
}

.status-chip {
  border-radius: var(--badge-r);
  padding: 4px 10px;
  text-align: center;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 12px;
  font-weight: 600;
}

.status-chip.ok {
  color: var(--ok);
  background: var(--ok-soft);
  border-color: var(--ok-border);
}

.status-chip.pending {
  color: var(--warn);
  background: var(--warn-soft);
  border-color: var(--warn-border);
}

/* Neutral state («Πλάνο», free days): planned-but-fine is NOT a warning —
   the warn/yellow chip was reading as a problem (audit P3). */
.status-chip.neutral {
  color: var(--text-2);
  background: var(--surface-2);
  border-color: var(--border);
}

.decision-item {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
}

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

.vote-button {
  min-height: 36px;
  padding: 0 12px;
  color: var(--text-2);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  font-size: 12px;
  font-weight: 700;
}

.decision-select {
  width: 132px;
  min-height: 36px;
  font-size: 12px;
}

.readiness-score {
  display: grid;
  gap: var(--sp-1);
  padding: var(--sp-2);
  color: #fff;
  background: var(--grad);
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-md);
}

.readiness-score strong {
  font-size: var(--fs-2xl);
  letter-spacing: -0.02em;
  line-height: 1;
}

.readiness-track {
  overflow: hidden;
  height: 8px;
  background: rgb(255 255 255 / 0.25);
  border-radius: 999px;
}

.readiness-fill {
  height: 100%;
  background: #fff;
  border-radius: 999px;
}

/* ============================================================
   13. Budget
   ============================================================ */

/* Spent amount = hero number (serif); the limit is quiet context */
.budget-total {
  color: var(--text);
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.budget-total .budget-limit {
  font-family: var(--font);
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--text-2);
}

.budget-item {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

.money {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.budget-bars {
  display: grid;
  gap: 12px;
}

/* B2 «Λογαριασμός παρέας» — who you are, the group's figures, who owes whom. */
.money-summary {
  display: grid;
  gap: var(--sp-2);
}

.money-identity {
  margin: 0;
  color: var(--text-2);
  font-size: var(--fs-sm);
}

.money-identity strong {
  color: var(--text);
}

.money-identity--ask {
  display: grid;
  gap: 8px;
  padding: 12px 14px;
  background: var(--brand-soft);
  border-radius: var(--r-sm);
}

.money-identity--ask p {
  margin: 0;
}

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

.identity-chips .template-chip {
  background: var(--surface);
}

.money-note {
  margin: 0;
  padding: 10px 12px;
  color: var(--text);
  background: var(--gold-soft);
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
}

.link-button {
  min-height: 0;
  padding: 2px 4px;
  color: var(--brand);
  background: none;
  border: 0;
  font: inherit;
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
}

.money-figures {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
  gap: 10px;
}

.money-figure {
  display: grid;
  gap: 2px;
  padding: 10px 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
}

.money-figure-label,
.money-figure-note {
  color: var(--text-2);
  font-size: var(--fs-xs);
}

.money-figure-label {
  font-weight: 700;
}

.money-figure strong {
  font-size: 18px;
  font-variant-numeric: tabular-nums;
}

.settle {
  display: grid;
  gap: 8px;
}

.settle-title {
  margin: 0;
  font-family: var(--font);
  font-size: var(--fs-sm);
  font-weight: 700;
}

.settle-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 10px;
  align-items: center;
  padding: 8px 8px 8px 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
}

/* Rows that are about YOU get the brand edge (and «(εσύ)» in words). */
.settle-row--me {
  border-left: 3px solid var(--brand);
}

.bar-fill--over {
  background: var(--danger);
}

.budget-item--transfer {
  background: transparent;
  border-style: dashed;
}

.lock-tag {
  display: inline-block;
  margin-right: 4px;
  padding: 1px 8px;
  color: var(--text-2);
  background: var(--seg-bg);
  border-radius: 999px;
  font-size: var(--fs-xs);
  font-weight: 700;
  vertical-align: 1px;
}

.money .money-share {
  display: block;
  color: var(--text-2);
  font-size: var(--fs-xs);
  font-weight: 600;
  text-align: right;
}

/* B4: the 3-step «Νέο ταξίδι» and the «no dates yet» prompts. */
.modal-heading {
  margin: 0;
  font-size: var(--fs-lg);
}

.wizard-head {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  justify-content: space-between;
}

.wizard-step {
  display: grid;
  gap: 12px;
}

.friend-chip {
  display: inline-flex;
  gap: 2px;
  align-items: center;
  min-height: 36px;
  padding: 0 4px 0 14px;
  color: var(--brand);
  background: var(--brand-soft);
  border-radius: 999px;
  font-weight: 600;
}

.friend-chip .link-button {
  min-width: 32px;
  min-height: 32px;
  font-size: var(--fs-md);
  text-decoration: none;
  text-align: center;
}

.wizard-step .seg {
  justify-self: start;
}

.wizard-friend {
  display: flex;
  gap: 10px;
  align-items: end;
}

.wizard-friend label {
  flex: 1;
}

.form-error {
  margin: 0;
  color: var(--danger);
  font-size: var(--fs-sm);
  font-weight: 600;
}

.check-row {
  display: flex;
  gap: 10px;
  align-items: center;
  color: var(--text);
}

/* B7: paste a booking. */
.paste-booking {
  display: grid;
  gap: 10px;
  justify-items: start;
}

.paste-booking label {
  width: 100%;
}

.paste-booking textarea {
  width: 100%;
  min-height: 88px;
  padding: 10px 12px;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  font: inherit;
  font-size: var(--fs-sm);
  resize: vertical;
}

.paste-booking textarea:focus-visible {
  outline: none;
  border-color: var(--brand-bright);
  box-shadow: var(--ring);
}

.money-limit {
  margin: 0;
  color: var(--text-2);
  font-size: var(--fs-sm);
}

.dates-cta {
  margin: 0;
  padding: 10px 12px;
  color: var(--text);
  background: var(--gold-soft);
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
}

.form-hint {
  margin: 0;
  color: var(--text-2);
  font-size: var(--fs-xs);
  line-height: 1.45;
}

/* «Παρέα | Μόνο εγώ» — a two-way switch; aria-pressed carries the state. */
.seg {
  display: inline-flex;
  padding: 3px;
  background: var(--seg-bg);
  border-radius: 999px;
}

.seg-btn {
  min-height: 32px;
  padding: 0 12px;
  color: var(--text-2);
  background: none;
  border: 0;
  border-radius: 999px;
  font: inherit;
  font-size: var(--fs-xs);
  font-weight: 700;
  cursor: pointer;
}

.seg-btn[aria-pressed="true"] {
  color: var(--text);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.split-people {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  grid-column: 1 / -1;
  margin: 0;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
}

.split-people legend {
  padding: 0 4px;
  color: var(--text-2);
  font-size: var(--fs-xs);
  font-weight: 700;
}

.split-person {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  font-size: var(--fs-sm);
}

.split-person input[type="number"] {
  width: 96px;
}

.composer--top {
  margin: 0 0 var(--sp-2);
}

.bar-row {
  display: grid;
  gap: 6px;
}

.bar-label {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  color: var(--text-2);
  font-size: var(--fs-xs);
  font-weight: 600;
}

.bar-track {
  overflow: hidden;
  height: 8px;
  background: var(--seg-bg);
  border-radius: 999px;
}

.bar-fill {
  height: 100%;
  background: var(--grad);
  border-radius: 999px;
}

/* ============================================================
   15. Tickets / documents / team
   ============================================================ */

.ticket-item {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

.ticket-item select {
  width: 150px;
  min-height: 36px;
  font-size: 12px;
}

.doc-item,
.task-item {
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
}

.doc-item input,
.task-item input {
  width: 18px;
  height: 18px;
}

.traveler-item {
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
}

.avatar {
  display: grid;
  flex: none;
  width: 38px;
  height: 38px;
  place-items: center;
  color: #fff;
  background: var(--grad);
  border-radius: 50%;
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* B8 «warm & social»: 8 tones, white initials ≥4.9:1 on each (light and dark). */
.avatar--t0 { background: #0e7c7b; }
.avatar--t1 { background: #6760b8; }
.avatar--t2 { background: #1b7f5e; }
.avatar--t3 { background: #b84f43; }
.avatar--t4 { background: #8a5a14; }
.avatar--t5 { background: #2f6db3; }
.avatar--t6 { background: #a0457e; }
.avatar--t7 { background: #5a6570; }

.avatar-stack {
  display: inline-flex;
  align-items: center;
  padding-left: 6px;
}

.avatar--sm {
  width: 26px;
  height: 26px;
  margin-left: -6px;
  border: 2px solid var(--surface);
  font-size: 10px;
}

.avatar--more {
  color: var(--text);
  background: var(--seg-bg);
}

/* ============================================================
   16. «Περισσότερα» accordion
   ============================================================ */

.more-section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
}

.more-section summary {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  align-items: baseline;
  min-height: 48px;
  padding: var(--sp-2) var(--sp-3);
  cursor: pointer;
  border-radius: var(--r-md);
  list-style: none;
}

.more-section summary::-webkit-details-marker {
  display: none;
}

/* Rotating chevron (inline-SVG mask, currentColor via background) */
.more-section summary::before {
  content: "";
  align-self: center;
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin-right: 4px;
  background: var(--brand);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 5.5 15.5 12 9 18.5' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 5.5 15.5 12 9 18.5' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform var(--dur) var(--ease);
}

.more-section[open] summary::before {
  transform: rotate(90deg);
}

.more-section summary:hover {
  background: var(--surface-2);
}

.more-section[open] summary {
  border-radius: var(--r-md) var(--r-md) 0 0;
}

.more-title {
  /* B8: an h2 inside <summary> (heading order); keeps the old sans label look. */
  margin: 0;
  font-family: var(--font);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: -0.01em;
}

.more-hint {
  color: var(--text-2);
  font-size: var(--fs-xs);
}

.more-body {
  padding: 4px var(--sp-3) var(--sp-3);
}

/* B8 (F11 heading order): trip-view headings moved one level up (panels h2,
   sub-heads h3) — these keep the sans look they had as h4. */
.more-subtitle {
  margin: var(--sp-2) 0 10px;
  font-family: var(--font);
  font-size: var(--fs-sm);
  font-weight: 700;
}

.more-body .more-subtitle:first-child {
  margin-top: 0;
}

.share-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  margin: var(--sp-2) 0 10px;
}

.share-row:first-child {
  margin-top: 0;
}

/* W3 — data safety net */
.storage-note {
  margin: 4px 0 0;
  color: var(--text-2);
  font-size: var(--fs-xs);
}

.storage-note.warn {
  color: var(--warn);
  font-weight: 600;
}

.restore-preview {
  margin: 0;
  font-weight: 600;
}

/* S0a — clickjacking guard: inside a foreign frame the app never renders; only the
   notice with the top-level link does. */
.framed .app-shell,
.framed dialog,
.framed .toast,
.framed .save-banner {
  display: none !important;
}

.framed-notice {
  max-width: 60ch;
  margin: 48px auto;
  padding: 0 24px;
  color: var(--text);
  font-size: var(--fs-sm);
  line-height: 1.5;
}

.framed-notice a {
  color: var(--brand);
  font-weight: 600;
}

/* Persistent banners (W3 save failure, S0a read-only): IN FLOW at the top of the
   shell and sticky — they push the content down instead of covering it. A fixed
   overlay used to sit on «← Τα ταξίδια μου» and the sticky tab bar (S0a review B1).
   Opaque surface so no text bleeds through in dark mode. */
.banner-stack {
  position: sticky;
  top: 0;
  z-index: 60;
}

.save-banner {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
  background: var(--surface);
  color: var(--danger);
  border-bottom: 1px solid var(--danger-border);
  box-shadow: var(--shadow-sm);
  font-size: var(--fs-sm, 14px);
}

/* Visible export actions (W1-B): the named buttons in «Κοινοποίηση» — the «⋯»
   menu stays as a shortcut, but discovery lives here. */
.share-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 6px 0 var(--sp-2);
}

.share-row .more-subtitle {
  margin: 0;
}

/* ============================================================
   17. Modals / toast / brief
   ============================================================ */

.modal {
  width: min(520px, calc(100vw - 28px));
  padding: 0;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
}

.modal::backdrop {
  background: var(--backdrop);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

.modal-body {
  display: grid;
  gap: var(--sp-2);
  padding: var(--sp-3);
}

.modal-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.modal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.modal-actions-spacer {
  flex: 1;
}

.edit-fields {
  display: grid;
  gap: 12px;
}

.toast {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 30;
  max-width: 340px;
  padding: 12px 16px;
  color: var(--toast-text);
  background: var(--toast-bg);
  border: 1px solid rgb(255 255 255 / 0.08);
  border-radius: 12px;
  box-shadow: var(--shadow-lg);
  font-weight: 500;
  opacity: 0;
  pointer-events: none; /* invisible toast must never intercept taps (it now holds a button) */
  transform: translateY(10px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.toast.show {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

/* Toast with an action (undo): message + quiet inverted button */
.toast {
  display: flex;
  align-items: center;
  gap: 12px;
}

.toast-action {
  flex: none;
  min-height: 0;
  padding: 5px 12px;
  background: transparent;
  border: 1px solid rgb(255 255 255 / 0.35);
  border-radius: 8px;
  color: inherit;
  font-family: inherit;
  font-size: var(--fs-xs);
  font-weight: 700;
  cursor: pointer;
}

.toast-action:hover {
  background: rgb(255 255 255 / 0.12);
}

.brief-box {
  overflow: auto;
  min-height: 220px;
  max-height: 420px;
  margin: 0;
  padding: var(--sp-2);
  color: var(--text);
  white-space: pre-wrap;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  line-height: 1.55;
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
}

.brief-box::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.brief-box::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: 999px;
}

.brief-box::-webkit-scrollbar-track {
  background: transparent;
}

/* ============================================================
   18. Responsive
   ============================================================ */

@media (max-width: 1100px) {
  .trip-grid {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  }
}

@media (max-width: 767px) {
  .trips-view {
    padding: var(--sp-3) var(--sp-2) var(--sp-6);
  }

  .home-hero h1 {
    font-size: var(--fs-xl);
  }

  .home-subtitle {
    font-size: var(--fs-sm);
  }

  .trip-grid {
    grid-template-columns: 1fr;
  }

  /* Content column + room for the bottom tab bar */
  .trip-view {
    padding: var(--sp-2) var(--sp-2) 104px;
  }

  .topbar {
    padding: var(--sp-2);
  }

  .topbar h1 {
    font-size: 24px;
  }

  .panel {
    padding: var(--sp-2);
  }

  /* Bottom tab bar: frosted glass, 5 icons + labels, tap targets ≥ 44px */
  .tabs {
    position: fixed;
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 20;
    gap: 2px;
    margin: 0;
    padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0px));
    background: var(--bottombar-solid);
    border: 0;
    border-top: 1px solid var(--border);
    border-radius: 0;
    box-shadow: var(--bottombar-shadow);
  }

  @supports (backdrop-filter: blur(12px)) or (-webkit-backdrop-filter: blur(12px)) {
    .tabs {
      background: var(--bottombar-glass);
      -webkit-backdrop-filter: blur(12px) saturate(1.4);
      backdrop-filter: blur(12px) saturate(1.4);
    }
  }

  .tab {
    flex-direction: column;
    gap: 3px;
    min-height: 54px;
    padding: 6px 2px;
    font-size: 11px;
  }

  .tab-icon {
    display: block;
  }

  .tab.active {
    color: var(--brand);
  }

  .tabs {
    --tab-indicator-bg: var(--brand-soft);
  }

  .tab-indicator {
    box-shadow: none;
  }

  .form-grid,
  .modal-grid {
    grid-template-columns: 1fr;
  }

  .timeline-item,
  .budget-item,
  .ticket-item,
  .doc-item,
  .task-item,
  .decision-item {
    grid-template-columns: 1fr;
  }

  .row-side,
  .decision-actions {
    justify-content: flex-start;
  }

  .status-chip {
    justify-self: start;
  }

  .map-canvas {
    min-height: 380px;
  }

  /* Comfortable touch targets */
  .icon-button {
    width: 44px;
    height: 44px;
  }

  .vote-button,
  .decision-select,
  .ticket-item select,
  .ghost-button.small {
    min-height: 44px;
  }

  .menu-item {
    min-height: 48px;
  }

  .toast {
    right: 12px;
    bottom: calc(84px + env(safe-area-inset-bottom, 0px));
    max-width: calc(100vw - 24px);
  }
}

/* ============================================================
   19. Reduced motion
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================
   B3 (2026-09-26) — home housekeeping, dense rows on phones
   ============================================================ */

.data-tools {
  margin-top: var(--sp-3);
  color: var(--text-2);
  font-size: var(--fs-sm);
}

.data-tools summary {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 4px;
  font-weight: 600;
  cursor: pointer;
}

.data-tools summary::-webkit-details-marker {
  display: none;
}

.data-tools summary::before {
  content: "›";
  display: inline-block;
  margin-right: 8px;
  color: var(--brand);
  font-size: 18px;
  transition: transform var(--dur) var(--ease);
}

.data-tools[open] summary::before {
  transform: rotate(90deg);
}

.data-tools-body {
  display: grid;
  gap: 10px;
  padding: 4px 0 var(--sp-2);
}

.data-tools-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.data-tools .storage-note {
  margin: 0;
}

.edit-delete {
  margin-right: auto;
}

/* The status word rides in the meta line where the chip is hidden (phones). */
.meta-status {
  display: none;
}

@media (max-width: 767px) {
  .budget-item {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .timeline-item {
    grid-template-columns: 48px minmax(0, 1fr) auto;
    column-gap: 10px;
  }

  .task-item,
  .doc-item {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  .budget-item .row-side,
  .timeline-item .row-side,
  .task-item .row-side,
  .doc-item .row-side {
    flex-wrap: nowrap;
    justify-content: flex-end;
  }

  /* One edit button per row; «Διαγραφή» (undoable) is inside the editor. */
  .budget-item .row-actions [data-delete],
  .timeline-item .row-actions [data-delete],
  .task-item .row-actions [data-delete] {
    display: none;
  }

  .timeline-item .status-chip,
  .task-item .status-chip {
    display: none;
  }

  .timeline-item .meta-status,
  .task-item .meta-status {
    display: inline;
  }
}

/* --- «Πού ζουν τα δεδομένα σου» (privacy.html, 2026-10-03) ---
   A plain reading page: one column, the app's tokens, no scripts. */

.privacy-page {
  width: min(100%, 720px);
  margin: 0 auto;
  padding: var(--sp-3) var(--sp-3) var(--sp-6);
  font-size: var(--fs-sm);
  line-height: 1.65;
}

.privacy-page .back-link {
  margin-left: -10px;
  text-decoration: none;
}

.privacy-page h1 {
  margin: var(--sp-2) 0 var(--sp-1);
  font-size: var(--fs-2xl);
  line-height: 1.15;
}

.privacy-page h2 {
  margin: var(--sp-4) 0 var(--sp-1);
  font-size: var(--fs-lg);
  line-height: 1.25;
}

.privacy-page p,
.privacy-page ul,
.privacy-page dl {
  margin: 0 0 var(--sp-2);
}

.privacy-page ul {
  padding-left: 1.25em;
}

.privacy-page li + li {
  margin-top: 6px;
}

.privacy-page a {
  color: var(--brand);
  font-weight: 600;
}

.privacy-page a[href^="mailto:"] {
  white-space: nowrap;
}

.privacy-lead {
  font-size: var(--fs-md);
}

.privacy-meta {
  color: var(--text-2);
  font-size: var(--fs-xs);
}

.privacy-services dt {
  margin-top: var(--sp-2);
  font-weight: 700;
}

.privacy-services dd {
  margin: 4px 0 0;
  padding-left: var(--sp-2);
  border-left: 3px solid var(--brand-soft-2);
}

.privacy-foot {
  margin-top: var(--sp-5);
}