/* ---- Trip map theme ----
   Light only, on purpose. The dark palette used background tokens as text
   colours in several places, which made search results and table headers
   nearly unreadable; color-scheme keeps native controls light too. */
:root{
  color-scheme:light;

  /* Typeface. The system UI stack renders SF Pro on Mac and iOS, Segoe UI
     Variable on Windows, Roboto on Android — all modern, all already on the
     device. That last part matters more here than taste: this is an offline-
     first PWA, and a downloaded webfont is a render-blocking request that a
     service worker caching same-origin assets would not hold. Zero bytes,
     instant paint, no flash of unstyled text. */
  --font-sans:-apple-system,BlinkMacSystemFont,'Segoe UI Variable Text','Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  /* The map is the content and the pins are the point, so the chrome is a
     frame: near-neutral surfaces, hairline rules, and exactly one saturated
     colour. Teal rather than the usual product indigo because the basemap runs
     warm — orange roads, cream land — and teal sits against that instead of
     competing with it, while staying clear of every colour in CATEGORY_COLORS. */
  /* Sage & Terracotta, chosen 2026-09-27. The only theme here built on a real
     complementary pair — sage sits opposite terracotta on the wheel, so the two
     sharpen each other instead of competing. That is also what made the audit
     harder than the others.

     Three corrections:

     1. The preview had headings LIGHTER than body — 13.7:1 against 16.1:1,
        inverted. Whichever is darker reads as the title, so the page was
        quietly arguing with itself. Headings take the floor now.
     2. The preview's terracotta (#c2664a) fails in BOTH directions: 4.0:1 with
        white on it, 3.8:1 with dark. A mid-tone fill has a dead zone where no
        text colour clears AA, and that value was sitting in it. Deepened to
        #b3573b, which still reads terracotta and takes white at 4.8:1.
     3. Danger had to leave the neighbourhood entirely. This palette already
        spends a warm red on terracotta, and the Event badge (#c1121f) and
        Restaurant pin (#d81159) are two more. A fourth warm red would be
        indistinguishable, so danger is a cool deep crimson — far darker, and
        on the other side of the red family.

     Nearest remaining collision: sage and the green Sightseeing pin (#2e7d32)
     are relatives, though the accent is markedly lighter and they never share
     a surface. */
  --navy:#1c231e;          /* chrome bars, and headings (16.1:1) */
  --deep-teal:#32523b;     /* accent, pressed */
  --harbor:#436f50;        /* sage, 5.8:1 in both directions */
  --sand:#f7f8f4;          /* ground, a green-biased off-white */
  --paper:#ffffff;
  --brass:#b3573b;         /* terracotta, fills only */
  --brass-fg:#ffffff;      /* white on terracotta (4.8:1) */
  --coral:#7f1d2e;         /* danger (9.9:1), cool and clear of three warm reds */
  --ink:#2e3a31;           /* body (11.9:1), a clear step below headings */
  --line:#e5e9df;
  --stripe:#fafbf7;
  --hotel-row-bg:#fdf3e3;
  --schedule-bg:#eff2ea;
  --muted:#66755f;         /* 4.9:1 — the preview's was 2.7:1 */
  --meta:#57604f;
  --header-sub:#a8b6a4;
  --tab-text:#c3d3c0;
  --footer-text:#96a693;
  --map-tile-bg:#ebeee6;

  /* Dividers for where two *filled* bands meet. Translucent rather than a
     fixed colour so they survive a theme swap: white at low alpha reads on any
     dark chrome, and the install banner derives its rule from its own text
     colour, so it works whether --brass lands light or dark. --line stays for
     hairlines on paper. */
  --chrome-line:rgba(255,255,255,0.14);
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;height:100%;font-family:var(--font-sans);background:var(--sand);color:var(--ink);}
#app{display:flex;flex-direction:column;height:100vh;}

header{
  background:var(--navy);
  color:var(--paper);
  padding:14px 18px;
  display:flex;
  /* Three parts now — dates, name, actions — so centre them against each
     other rather than sitting them on a shared text baseline. */
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:8px;
  /* The header keeps a 3px accent rather than the hairline the other bands
     use: it is the top of the page and the only band that never scrolls, so
     it is the one place a heavier edge is structure rather than decoration. */
  border-bottom:3px solid var(--brass);
}
header h1{
  font-family:var(--font-sans);
  font-size:1.25rem;
  margin:0;
  letter-spacing:0.02em;
  font-weight:600;
}
header .dates{
  font-family:var(--font-sans);
  font-size:0.85rem;
  color:var(--header-sub);
  font-style:italic;
}

#tabs{
  display:flex;
  background:var(--deep-teal);
  border-bottom:1px solid var(--line);
}
#tabs button{
  flex:1;
  padding:10px 12px;
  background:transparent;
  border:none;
  border-left:1px solid var(--chrome-line);
  color:var(--tab-text);
  font-family:var(--font-sans);
  font-size:0.9rem;
  cursor:pointer;
  border-bottom:3px solid transparent;
  transition:all .15s ease;
}
#tabs button:first-child{border-left:none;}
/* The active tab sits on a bar of a closely related colour, so colour alone
   does not separate it. A top edge and a shadow under its neighbours do. */
#tabs button.active{
  color:#fff;
  background:var(--harbor);
  border-bottom-color:var(--brass);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.22);
  font-weight:bold;
}
#tabs button:hover:not(.active){
  background:rgba(255,255,255,0.06);
}

.tab-panel{display:none;flex:1;min-height:0;flex-direction:column;}
.tab-panel.active{display:flex;}

#travel{
  flex:1;
  overflow-y:auto;
  padding:16px;
  display:flex;
  flex-direction:column;
  gap:16px;
}
#toppicks-content{
  flex:1;
  overflow-y:auto;
  padding:16px;
}
#al-filters{
  display:flex;
  flex-wrap:wrap;
  gap:6px 10px;
  padding:10px 14px;
  background:var(--paper);
  border-bottom:1px solid var(--line);
}
.al-filter-item{
  display:flex;
  align-items:center;
  gap:5px;
  cursor:pointer;
  padding:3px 10px;
  border-radius:12px;
  border:1px solid var(--line);
  font-size:0.78rem;
  user-select:none;
  transition:all .15s ease;
}
.al-filter-item.off{
  opacity:0.35;
}
.al-filter-item .dot{
  width:9px;height:9px;border-radius:50%;flex-shrink:0;
  border:1px solid rgba(0,0,0,0.25);
}
#al-table-wrap{
  flex:1;
  overflow:auto;
  padding:0 14px 14px;
}
.al-table{
  width:100%;
  border-collapse:collapse;
  background:var(--paper);
  font-size:0.85rem;
}
.al-table thead th{
  position:sticky;
  top:0;
  background:var(--navy);
  /* --paper is a dark surface in dark mode, so it vanished against --navy.
     --tab-text is the token for text sitting on the dark bars. */
  color:var(--tab-text);
  text-align:left;
  padding:8px 10px;
  font-size:0.74rem;
  text-transform:uppercase;
  letter-spacing:0.03em;
  z-index:2;
}
.al-table td{
  padding:8px 10px;
  border-top:1px solid var(--line);
}
.al-table tbody#al-hotel-row td{
  background:var(--hotel-row-bg);
  font-weight:bold;
  position:sticky;
  top:29px;
  z-index:1;
}
.al-table tbody#al-body tr:nth-child(even) td{
  background:var(--stripe);
}
.al-group-badge{
  display:inline-block;
  font-size:0.7rem;
  padding:1px 7px;
  border-radius:9px;
  color:#fff;
}
.al-pick-btn{
  font-size:0.75rem;
  padding:4px 10px;
  border-radius:12px;
  border:1px solid var(--harbor);
  background:var(--paper);
  color:var(--harbor);
  cursor:pointer;
  white-space:nowrap;
  transition:all .15s ease;
}
.al-pick-btn:hover{
  background:var(--harbor);
  color:#fff;
}
.al-pick-btn.picked{
  background:var(--brass);
  border-color:var(--brass);
  color:var(--brass-fg);
}
.al-pick-btn.picked:hover{
  background:var(--coral);
  border-color:var(--coral);
}

.toppicks-table{
  width:100%;
  border-collapse:collapse;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:8px;
  overflow:hidden;
}
/* Deliberately identical to .al-table thead th — the two tables show the same
   columns and should read as the same table in two views. */
.toppicks-table th{
  background:var(--navy);
  color:var(--tab-text);
  text-align:left;
  padding:8px 10px;
  font-size:0.74rem;
  text-transform:uppercase;
  letter-spacing:0.04em;
}
.toppicks-table td{
  padding:10px 12px;
  border-top:1px solid var(--line);
  font-size:0.9rem;
}
.toppicks-table tr:nth-child(even) td{
  background:var(--stripe);
}
.toppicks-note{
  font-size:0.78rem;
  color:var(--muted);
  font-style:italic;
  margin-top:10px;
}
.sync-badge{
  display:inline-block;
  font-size:0.74rem;
  font-weight:bold;
  letter-spacing:0.02em;
  padding:4px 11px;
  border-radius:12px;
  margin-bottom:12px;
  background:var(--stripe);
  border:1px solid var(--line);
  color:var(--meta);
}
.sync-badge.shared{ color:var(--harbor); }
.sync-badge.local{ color:var(--brass); }
.sync-badge.connecting{ color:var(--muted); }
.travel-card{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:10px;
  padding:16px 18px;
  box-shadow:0 1px 3px rgba(0,0,0,0.08);
}
.travel-card h3{
  margin:0 0 4px;
  font-size:1.05rem;
  /* --navy is a background colour in dark mode; --ink flips with the theme. */
  color:var(--ink);
}
.travel-meta{
  font-size:0.82rem;
  color:var(--harbor);
  margin-bottom:12px;
}
.travel-meta strong{color:var(--ink);}
.travel-leg{
  border-top:1px dashed var(--line);
  padding-top:10px;
  margin-top:10px;
}
.travel-leg-label{
  font-size:0.72rem;
  text-transform:uppercase;
  letter-spacing:0.06em;
  color:var(--brass);
  font-weight:bold;
  margin-bottom:6px;
}
.travel-route{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  font-size:0.95rem;
}
.travel-route .pt{
  text-align:center;
}
.travel-route .time{
  font-weight:bold;
  font-size:1.1rem;
  color:var(--ink);
}
.travel-route .loc{
  font-size:0.78rem;
  color:var(--harbor);
}
.travel-route .arrow{
  flex:1;
  text-align:center;
  color:var(--muted);
  font-size:0.78rem;
}
.travel-details-line{
  font-size:0.8rem;
  color:var(--meta);
  margin-top:6px;
}

#legend{
  display:flex;
  flex-wrap:wrap;
  gap:6px 14px;
  padding:8px 14px;
  background:var(--paper);
  border-bottom:1px solid var(--line);
  font-size:0.78rem;
}
.legend-item{
  display:flex;
  align-items:center;
  gap:5px;
  padding:3px 4px 3px 8px;
  border-radius:12px;
  border:1px solid var(--line);
  user-select:none;
  transition:all .15s ease;
  max-width:100%;
}
.legend-label{
  display:flex;
  align-items:center;
  gap:5px;
  cursor:pointer;
  min-width:0;
}
.legend-label span:last-child{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  max-width:20ch;
}
/* The X removes the place from the trip, so keep it visually distinct from
   the label, which only toggles the pin. */
.legend-remove{
  border:0;
  background:transparent;
  color:var(--muted);
  font-size:1rem;
  line-height:1;
  padding:0 4px;
  cursor:pointer;
  border-radius:50%;
}
.legend-remove:hover{
  background:var(--coral);
  color:#fff;
}
.legend-remove:disabled{
  opacity:0.4;
  cursor:default;
}
.legend-empty{
  display:none;
  padding:10px 14px;
  background:var(--paper);
  border-bottom:1px solid var(--line);
  font-size:0.78rem;
  color:var(--muted);
}
.legend-empty.show{ display:block; }
.legend-item.off{
  opacity:0.35;
}
.legend-item:hover{
  border-color:var(--line);
}
.dot{
  width:10px;height:10px;border-radius:50%;flex-shrink:0;
  border:1px solid rgba(0,0,0,0.25);
}

#map{flex:1;min-height:0;background:var(--map-tile-bg);border-top:1px solid var(--line);}

@keyframes pulseRing{
  0%{transform:scale(0.6);opacity:0.5;}
  100%{transform:scale(1.6);opacity:0;}
}
.popup-stay-badge{
  display:inline-block;
  background:var(--brass);
  color:var(--brass-fg);
  font-size:0.68rem;
  font-weight:bold;
  text-transform:uppercase;
  letter-spacing:0.05em;
  padding:2px 8px;
  border-radius:10px;
  margin-bottom:6px;
}
.popup-ig{
  display:inline-flex;
  align-items:center;
  gap:4px;
}

.leaflet-popup-content-wrapper,.leaflet-popup-tip{
  background:var(--paper);
  color:var(--ink);
}
.leaflet-popup-content-wrapper{
  border-radius:6px;
  font-family:var(--font-sans);
}
.popup-title{
  font-weight:bold;
  font-size:1rem;
  margin-bottom:2px;
  color:var(--navy);
}
.popup-cat{
  font-size:0.72rem;
  text-transform:uppercase;
  letter-spacing:0.06em;
  color:var(--harbor);
  margin-bottom:6px;
}
.popup-price{
  font-weight:bold;
  color:var(--coral);
  font-size:0.9rem;
  margin-bottom:4px;
}
.popup-price-note{
  font-weight:normal;
  font-size:0.7rem;
  color:var(--muted);
}
.popup-schedule{
  margin:6px 0;
  padding:6px 8px;
  background:var(--schedule-bg);
  border-radius:4px;
  border:1px solid var(--line);
}
.popup-schedule-label{
  font-size:0.7rem;
  text-transform:uppercase;
  letter-spacing:0.05em;
  color:var(--navy);
  font-weight:bold;
  margin-bottom:4px;
}
.sched-grid{
  display:flex;
  flex-wrap:wrap;
  gap:4px;
}
.sched-time{
  font-size:0.72rem;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:3px;
  padding:1px 5px;
  white-space:nowrap;
}
.popup-schedule-note{
  font-size:0.66rem;
  color:var(--muted);
  margin-top:4px;
  font-style:italic;
}
.popup-links{
  display:flex;
  gap:10px;
  margin-top:6px;
  font-size:0.8rem;
}
.popup-links a{
  color:var(--coral);
  text-decoration:none;
  border-bottom:1px solid var(--coral);
}
.popup-links a:hover{opacity:0.7;}

footer{
  padding:6px 14px;
  background:var(--navy);
  border-top:1px solid var(--chrome-line);
  color:var(--footer-text);
  font-size:0.72rem;
  text-align:center;
  font-family:var(--font-sans);
}

/* ---- Map search (AI-assisted place search on the trip map) ---- */
.ms-mode{display:none;}
.ms-mode.show{
  display:block;
  padding:8px 14px;
  background:var(--hotel-row-bg);
  border-bottom:1px solid var(--line);
  font-size:0.75rem;
  color:var(--meta);
}

#map-search{
  padding:10px 14px 8px;
  background:var(--paper);
  border-bottom:1px solid var(--line);
}
.ms-row{display:flex;flex-wrap:wrap;gap:10px;}
.ms-field{flex:1 1 260px;min-width:0;display:flex;flex-direction:column;gap:4px;  position:relative;
}
.ms-field label{
  font-size:0.7rem;
  text-transform:uppercase;
  letter-spacing:0.05em;
  color:var(--harbor);
  font-weight:bold;
}
.ms-input-row{display:flex;gap:6px;}
.ms-input-row input{
  flex:1;
  min-width:0;
  font-family:var(--font-sans);
  font-size:0.86rem;
  padding:7px 10px;
  border:1px solid var(--line);
  border-radius:6px;
  background:var(--sand);
  color:var(--ink);
}
.ms-input-row input:focus{outline:2px solid var(--harbor);outline-offset:-1px;}
.ms-input-row button{
  font-family:var(--font-sans);
  font-size:0.84rem;
  padding:7px 14px;
  border-radius:6px;
  border:1px solid var(--harbor);
  background:var(--harbor);
  color:#fff;
  cursor:pointer;
  white-space:nowrap;
  transition:background .15s ease;
}
.ms-input-row button:hover{background:var(--deep-teal);}
.ms-input-row button:disabled{opacity:0.5;cursor:default;}

.ms-examples{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:5px;
  margin-top:8px;
}
.ms-examples-label{
  font-size:0.68rem;
  text-transform:uppercase;
  letter-spacing:0.05em;
  color:var(--muted);
  margin-right:2px;
}
.ms-example{
  font-family:var(--font-sans);
  font-size:0.73rem;
  padding:3px 10px;
  border-radius:12px;
  border:1px solid var(--line);
  background:var(--stripe);
  color:var(--meta);
  cursor:pointer;
  transition:all .15s ease;
}
.ms-example:hover{border-color:var(--harbor);color:var(--harbor);}
.ms-clear-btn{margin-left:auto;color:var(--coral);}
.ms-clear-btn:hover{border-color:var(--coral);color:var(--coral);}

.ms-status{font-size:0.75rem;color:var(--muted);margin-top:5px;}
.ms-status:empty{margin-top:0;}
.ms-status.error{color:var(--coral);}
.ms-status.ok{color:var(--harbor);}

/* Legend for found places — separate from the trip legend above it. */
.ms-found-legend{
  display:none;
  flex-wrap:wrap;
  align-items:center;
  gap:6px 10px;
  padding:7px 14px;
  background:var(--stripe);
  border-bottom:1px solid var(--line);
  font-size:0.76rem;
}
.ms-found-legend.show{display:flex;}
.ms-legend-label{
  font-size:0.67rem;
  text-transform:uppercase;
  letter-spacing:0.05em;
  color:var(--muted);
}
.ms-legend-item{
  display:flex;
  align-items:center;
  gap:5px;
  padding:2px 3px 2px 9px;
  border-radius:12px;
  border:1px solid var(--line);
  background:var(--paper);
  user-select:none;
  transition:opacity .15s ease;
}
.ms-legend-label-hit{
  display:flex;
  align-items:center;
  gap:5px;
  cursor:pointer;
}
/* Mirrors .legend-remove on the saved-places legend so the gesture reads the
   same in both rows. */
.ms-legend-remove{
  border:0;
  background:transparent;
  color:var(--muted);
  font-size:1rem;
  line-height:1;
  padding:0 4px;
  cursor:pointer;
  border-radius:50%;
}
.ms-legend-remove:hover{ background:var(--coral); color:#fff; }
.ms-legend-item.off{opacity:0.35;}
.ms-legend-dot{
  width:10px;height:10px;border-radius:50%;flex-shrink:0;
  border:1px solid rgba(0,0,0,0.25);
}

/* Found-place pins: circles, to read as distinct from the trip's teardrops. */
.ms-pin{
  width:24px;height:24px;border-radius:50%;
  border:2px solid var(--paper);
  box-shadow:0 1px 3px rgba(0,0,0,0.4);
  color:#fff;
  font:bold 10px var(--font-sans);
  display:flex;align-items:center;justify-content:center;
}
.ms-center-pin{
  width:18px;height:18px;border-radius:50%;
  border:2px dashed var(--brass);
  background:transparent;
}

.ms-results-wrap{
  display:none;
  border-top:1px solid var(--line);
  background:var(--paper);
  max-height:34vh;
  overflow-y:auto;
  flex-shrink:0;
}
.ms-results-wrap.show{display:block;}
.ms-results-wrap summary{
  cursor:pointer;
  padding:8px 14px;
  font-size:0.78rem;
  font-weight:bold;
  color:var(--harbor);
  position:sticky;
  top:0;
  background:var(--paper);
  border-bottom:1px solid var(--line);
}
.ms-result{
  display:flex;
  align-items:flex-start;
  gap:9px;
  padding:9px 14px;
  border-bottom:1px solid var(--line);
  cursor:pointer;
}
.ms-result:hover{background:var(--stripe);}
.ms-result.active{background:var(--stripe);box-shadow:inset 3px 0 0 var(--harbor);}
.ms-result-dot{
  width:11px;height:11px;border-radius:50%;flex-shrink:0;margin-top:4px;
  border:1px solid rgba(0,0,0,0.25);
}
.ms-result-body{flex:1;min-width:0;}
.ms-name{font-weight:bold;color:var(--ink);font-size:0.9rem;}
.ms-meta{font-size:0.74rem;color:var(--meta);margin-top:1px;}
.ms-hours{font-size:0.73rem;color:var(--meta);margin-top:2px;}
.ms-badges{display:flex;flex-wrap:wrap;gap:5px;margin-top:4px;}
.ms-badge{
  font-size:0.66rem;
  padding:1px 8px;
  border-radius:9px;
  background:var(--stripe);
  color:var(--meta);
  border:1px solid var(--line);
}
.ms-badge.notable{background:var(--brass);border-color:var(--brass);color:var(--brass-fg);}
.ms-empty-note{padding:12px 14px;font-size:0.78rem;color:var(--muted);font-style:italic;}

/* ---- PWA install prompt banner ---- */
#install-banner{
  display:none;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:8px 14px;
  background:var(--brass);
  color:var(--brass-fg);
  /* Both edges, not just the bottom. The header's accent rule is drawn in
     --brass and this banner is filled with --brass, so without a rule of its
     own the two mint bands run together into one. Derived from the banner's
     own foreground so it stays visible whichever way --brass lands. */
  border-top:1px solid color-mix(in srgb, var(--brass-fg) 24%, transparent);
  border-bottom:1px solid color-mix(in srgb, var(--brass-fg) 24%, transparent);
  font-size:0.8rem;
}
#install-banner.show{ display:flex; }
#install-banner button{
  background:#fff;
  color:var(--navy);
  border:none;
  border-radius:8px;
  padding:5px 12px;
  font-size:0.78rem;
  font-weight:bold;
  cursor:pointer;
}
#install-dismiss{
  background:transparent;
  color:#fff;
  font-weight:normal;
  text-decoration:underline;
}

/* ---- Full-screen gates: setup, sign-in, trip picker ---- */
.screen{
  display:none;
  min-height:100vh;
  padding:32px 20px;
  align-items:flex-start;
  justify-content:center;
  background:var(--sand);
  overflow-y:auto;
}
.screen.visible{display:flex;}
#app{display:none;}
#app.visible{display:flex;}
.screen-card{
  width:100%;
  max-width:460px;
  background:var(--paper);
  border:1px solid var(--line);
  border-top:3px solid var(--brass);
  border-radius:10px;
  padding:26px 26px 22px;
  box-shadow:0 2px 10px rgba(0,0,0,0.07);
}
.screen-card h1{
  font-family:var(--font-sans);
  font-size:1.35rem;
  margin:0 0 8px;
  color:var(--navy);
}
.screen-card p, .auth-dialog-card p{font-size:0.88rem;color:var(--meta);margin:0 0 14px;line-height:1.55;}
.screen-steps{font-size:0.85rem;color:var(--meta);line-height:1.7;padding-left:20px;margin:0 0 14px;}
.screen-steps code,.screen-hint code{
  font-family:var(--font-mono);
  font-size:0.86em;
  background:var(--stripe);
  padding:1px 5px;
  border-radius:4px;
}
.screen-hint{font-size:0.78rem;color:var(--muted);font-style:italic;}
.screen-label{
  display:block;
  font-size:0.7rem;
  text-transform:uppercase;
  letter-spacing:0.05em;
  color:var(--harbor);
  font-weight:bold;
  margin:12px 0 4px;
}
.screen-card input, .auth-dialog-card input{
  width:100%;
  font-family:var(--font-sans);
  font-size:0.9rem;
  padding:9px 11px;
  border:1px solid var(--line);
  border-radius:6px;
  background:var(--sand);
  color:var(--ink);
}
.screen-card input:focus, .auth-dialog-card input:focus{outline:2px solid var(--harbor);outline-offset:-1px;}
.screen-card button[type="submit"], .auth-dialog-card button[type="submit"]{
  margin-top:14px;
  width:100%;
  font-family:var(--font-sans);
  font-size:0.9rem;
  padding:10px;
  border-radius:6px;
  border:1px solid var(--harbor);
  background:var(--harbor);
  color:#fff;
  cursor:pointer;
}
.screen-card button[type="submit"]:hover, .auth-dialog-card button[type="submit"]:hover{background:var(--deep-teal);}
.screen-card button[type="submit"]:disabled, .auth-dialog-card button[type="submit"]:disabled{opacity:0.55;cursor:default;}
.screen-status{font-size:0.8rem;color:var(--muted);margin-top:10px;min-height:1.2em;line-height:1.5;}
.screen-status.ok{color:var(--harbor);}
.screen-status.error{color:var(--coral);}
.link-btn{
  background:none;border:none;padding:0;
  font-family:var(--font-sans);font-size:inherit;
  color:var(--coral);text-decoration:underline;cursor:pointer;
}
/* Only one auth form is ever laid out; the rest are display:none, which also
   keeps the browser from validating their required fields on submit. */
.auth-view{display:none;}
.auth-view.visible{display:block;}
.auth-links{
  font-size:0.8rem;
  color:var(--meta);
  margin:8px 0 0;
  line-height:1.5;
}
.auth-links[hidden]{display:none;}
.auth-sep{color:var(--muted);margin:0 4px;}
.auth-guest{
  margin-top:14px;
  padding-top:14px;
  border-top:1px solid var(--line);
}
.auth-guest[hidden]{display:none;}
.auth-guest-note{font-size:0.74rem;color:var(--muted);margin:6px 0 0;line-height:1.5;}
.auth-join-note{
  font-size:0.8rem;
  color:var(--meta);
  background:var(--stripe);
  border-left:3px solid var(--brass);
  padding:8px 10px;
  border-radius:0 6px 6px 0;
  margin:0 0 14px;
  line-height:1.5;
}
.auth-join-note[hidden]{display:none;}
.secondary-btn{
  width:100%;
  font-family:var(--font-sans);
  font-size:0.9rem;
  padding:10px;
  border-radius:6px;
  border:1px solid var(--harbor);
  background:transparent;
  color:var(--harbor);
  cursor:pointer;
}
.secondary-btn:hover{background:var(--stripe);}
.screen-card .screen-hint, .auth-dialog-card .screen-hint{margin:6px 0 0;}

.field-pair{display:flex;gap:10px;}
.field-pair>div{flex:1;min-width:0;}

.trip-list-head{
  font-size:0.7rem;
  text-transform:uppercase;
  letter-spacing:0.05em;
  color:var(--muted);
  font-weight:bold;
  margin:14px 0 2px;
}
.trip-item-other{background:var(--paper);border-style:dashed;}

/* ---- Multi-select in All Locations and Top Picks ---- */
.bulk-bar{
  display:none;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  padding:8px 12px;
  background:var(--stripe);
  border-bottom:1px solid var(--line);
}
.bulk-bar.show{display:flex;}
.bulk-count{font-size:0.78rem;font-weight:bold;color:var(--harbor);}
.bulk-btn{
  font-family:var(--font-sans);
  font-size:0.76rem;
  padding:4px 11px;
  border-radius:12px;
  border:1px solid var(--harbor);
  background:var(--harbor);
  color:#fff;
  cursor:pointer;
}
.bulk-btn:hover{background:var(--deep-teal);}
.bulk-clear{background:transparent;color:var(--meta);border-color:var(--line);}
.bulk-clear:hover{background:var(--paper);}
.check-col{width:34px;text-align:center;}
/* Removing a place from the trip, from the table as well as from the Explore
   legend. Muted until hovered: it sits at the end of every row, and a column
   of red crosses would read as a list of problems. */
.remove-col{width:38px;text-align:center;}
.al-remove{
  width:24px;height:24px;line-height:1;padding:0;
  font-size:1rem;font-family:var(--font-sans);
  border:1px solid transparent;background:none;color:var(--muted);
  border-radius:6px;cursor:pointer;
}
.al-remove:hover:not(:disabled){background:var(--coral);border-color:var(--coral);color:#fff;}
.al-remove:disabled{opacity:0.4;cursor:default;}
#app.readonly .al-remove{display:none !important;}
.row-check{width:15px;height:15px;cursor:pointer;accent-color:var(--harbor);}

.trip-list{display:flex;flex-direction:column;gap:8px;margin-bottom:6px;}
.trip-item{
  display:flex;
  flex-direction:column;
  gap:2px;
  text-align:left;
  padding:11px 13px;
  border:1px solid var(--line);
  border-radius:8px;
  background:var(--stripe);
  cursor:pointer;
  font-family:var(--font-sans);
  transition:border-color .15s ease;
}
.trip-item:hover{border-color:var(--harbor);}

/* A row is the trip button plus its own actions — nesting buttons inside the
   open-the-trip button would be invalid, so they sit alongside it. */
.trip-row{display:flex;flex-direction:column;gap:0;}
.trip-row .trip-item{border-bottom-left-radius:0;border-bottom-right-radius:0;border-bottom:none;}
.trip-row-actions{
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap;
  padding:6px 10px;
  border:1px solid var(--line);
  border-top:none;
  border-radius:0 0 8px 8px;
  background:var(--paper);
}
.trip-action{
  font-family:var(--font-sans);
  font-size:0.72rem;
  padding:3px 10px;
  border-radius:11px;
  border:1px solid var(--line);
  background:transparent;
  color:var(--harbor);
  cursor:pointer;
}
.trip-action:hover{background:var(--stripe);border-color:var(--harbor);}
.trip-action-danger{color:var(--coral);}
.trip-action-danger:hover{background:#fbeeea;border-color:var(--coral);}
.trip-action:disabled{opacity:0.55;cursor:default;}
.trip-confirm{font-size:0.74rem;color:var(--meta);margin-right:2px;}
.trip-item-name{font-weight:bold;color:var(--ink);font-size:0.95rem;}
.trip-item-meta{font-size:0.76rem;color:var(--muted);}
.create-trip{margin-top:16px;border-top:1px solid var(--line);padding-top:12px;}
.create-trip summary{
  cursor:pointer;font-size:0.82rem;font-weight:bold;color:var(--harbor);
}

/* ---- Bookings: entry form and cards ---- */
.travel-head{padding:12px 16px 0;}
.travel-add-btn{
  font-family:var(--font-sans);font-size:0.82rem;padding:7px 14px;border-radius:16px;
  border:1px solid var(--harbor);background:var(--harbor);color:#fff;cursor:pointer;
}
.travel-add-btn:hover{background:var(--deep-teal);}
.travel-head{display:flex;gap:8px;flex-wrap:wrap;align-items:center;}
.travel-paste-btn{
  font-family:var(--font-sans);font-size:0.82rem;padding:7px 14px;border-radius:16px;
  border:1px solid var(--brass);background:transparent;color:var(--brass);cursor:pointer;
}
.travel-paste-btn:hover{background:rgba(192,138,62,0.12);}
.travel-paste-btn[hidden]{display:none;}

.paste-panel{
  margin:12px 16px;padding:14px 16px;max-width:760px;
  background:var(--paper);border:1px solid var(--line);border-radius:10px;
}
.paste-panel[hidden]{display:none;}
.paste-panel textarea{
  width:100%;font-family:var(--font-mono);font-size:0.78rem;line-height:1.5;
  padding:9px 11px;border:1px solid var(--line);border-radius:6px;
  background:var(--sand);color:var(--ink);resize:vertical;
}
.paste-panel textarea:focus{outline:2px solid var(--harbor);outline-offset:-1px;}
.paste-note{
  font-size:0.75rem;color:var(--meta);line-height:1.55;margin:8px 0 0;
  background:var(--hotel-row-bg);border-left:3px solid var(--brass);
  padding:9px 12px;border-radius:0 6px 6px 0;
}
.paste-actions{display:flex;align-items:center;gap:10px;margin-top:12px;}
.paste-status{flex:1;font-size:0.78rem;color:var(--muted);}
.paste-status.error{color:var(--coral);}
.paste-panel button[type="button"]#paste-go{
  font-family:var(--font-sans);font-size:0.82rem;padding:7px 18px;border-radius:16px;
  border:1px solid var(--harbor);background:var(--harbor);color:#fff;cursor:pointer;
}
.paste-panel button:disabled{opacity:0.55;cursor:default;}

.travel-empty{font-size:0.85rem;color:var(--muted);font-style:italic;padding:14px 16px;}

.travel-form{
  margin:12px 16px;padding:14px 16px;
  background:var(--paper);border:1px solid var(--line);border-radius:10px;
  max-width:760px;
}
.travel-form[hidden]{display:none;}
.tf-row{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:4px;}
.tf-field{flex:1;min-width:130px;}
.tf-field[hidden]{display:none;}
.tf-mode{max-width:150px;}
.tf-time{max-width:120px;}
.tf-optional{font-weight:normal;text-transform:none;letter-spacing:0;color:var(--muted);font-style:italic;}
.travel-form input,.travel-form select{
  width:100%;font-family:var(--font-sans);font-size:0.85rem;padding:7px 9px;
  border:1px solid var(--line);border-radius:6px;background:var(--sand);color:var(--ink);
}
.travel-form input:focus,.travel-form select:focus{outline:2px solid var(--harbor);outline-offset:-1px;}

.tf-leg{border-top:1px solid var(--line);padding-top:8px;margin-top:8px;}
.tf-leg-head{display:flex;justify-content:space-between;align-items:center;}
.tf-leg-title{font-size:0.7rem;text-transform:uppercase;letter-spacing:0.05em;color:var(--muted);font-weight:bold;}
.tf-leg-remove{background:none;border:none;color:var(--coral);font-family:var(--font-sans);font-size:0.74rem;cursor:pointer;text-decoration:underline;}
.tf-add-leg{
  margin-top:8px;background:none;border:none;color:var(--harbor);
  font-family:var(--font-sans);font-size:0.78rem;cursor:pointer;text-decoration:underline;padding:0;
}

.tf-ref{border-top:1px solid var(--line);margin-top:12px;padding-top:10px;}
.tf-ref input{max-width:220px;}
.tf-ref-warning{font-size:0.74rem;color:var(--meta);line-height:1.5;margin:6px 0 6px;max-width:560px;}
.tf-ref-share{display:flex;gap:16px;font-size:0.78rem;color:var(--ink);}
.tf-ref-share label{display:flex;align-items:center;gap:5px;cursor:pointer;}
.tf-ref-share input{width:auto;}

.tf-actions{display:flex;align-items:center;gap:10px;margin-top:14px;}
.tf-status{flex:1;font-size:0.78rem;color:var(--muted);}
.tf-status.error{color:var(--coral);}
.tf-cancel{
  font-family:var(--font-sans);font-size:0.82rem;padding:7px 14px;border-radius:16px;
  border:1px solid var(--line);background:transparent;color:var(--meta);cursor:pointer;
}
.travel-form button[type="submit"]{
  font-family:var(--font-sans);font-size:0.82rem;padding:7px 18px;border-radius:16px;
  border:1px solid var(--harbor);background:var(--harbor);color:#fff;cursor:pointer;
}

.travel-card-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;}
.travel-remove{
  background:none;border:none;color:var(--muted);font-size:1.2rem;line-height:1;
  cursor:pointer;padding:0 2px;
}
.travel-remove:hover{color:var(--coral);}
.travel-ref{margin-left:10px;}
.travel-ref-note{font-style:italic;color:var(--muted);}
.travel-share-btn{
  margin-left:8px;font-family:var(--font-sans);font-size:0.72rem;
  padding:2px 9px;border-radius:11px;border:1px solid var(--line);
  background:transparent;color:var(--harbor);cursor:pointer;
}
.travel-share-btn:hover{border-color:var(--harbor);background:var(--stripe);}

/* ---- Paid-feature dialog ---- */
/* ---------- range calendar ---------- */
/* Whichever pair of date fields the calendar is currently serving: it is
   absolutely positioned against its host, and moves between them. */
.range-host{position:relative;}
/* The fields are buttons that happen to show a date. Hiding the native
   indicator stops the browser offering a second, different picker. */
.range-field{cursor:pointer;}
.range-field::-webkit-calendar-picker-indicator{display:none;-webkit-appearance:none;}
.range-cal{
  position:absolute;top:calc(100% + 8px);left:0;z-index:1200;
  max-width:calc(100vw - 24px);
  background:var(--paper);border:1px solid var(--line);border-radius:10px;
  box-shadow:0 10px 30px rgba(0,0,0,0.28);padding:12px;
}
.range-cal[hidden]{display:none;}
.range-cal-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px;}
.range-hint{font-size:0.74rem;color:var(--meta);letter-spacing:0.03em;}
.range-cal-head button{
  width:26px;height:26px;line-height:1;padding:0;font-size:1rem;
  border:1px solid var(--line);background:var(--paper);color:var(--harbor);
  border-radius:6px;cursor:pointer;
}
.range-cal-head button:hover{background:var(--stripe);}
.range-months{display:flex;gap:18px;}
.range-month-name{
  font-family:var(--font-sans);
  font-size:0.84rem;font-weight:700;color:var(--navy);text-align:center;margin-bottom:6px;
}
.range-grid{display:grid;grid-template-columns:repeat(7,26px);gap:2px;}
.range-dow{
  font-size:0.62rem;color:var(--muted);text-align:center;line-height:20px;
  text-transform:uppercase;letter-spacing:0.04em;
}
.range-pad{height:26px;}
.range-day{
  height:26px;width:26px;padding:0;font-size:0.76rem;font-family:var(--font-sans);
  border:1px solid transparent;background:none;color:var(--ink);
  border-radius:6px;cursor:pointer;
}
.range-day:hover{background:var(--stripe);}
.range-day.is-inside{background:var(--hotel-row-bg);border-radius:0;}
.range-day.is-start,.range-day.is-end{background:var(--harbor);color:#fff;font-weight:700;}
.range-day.is-start{border-radius:6px 0 0 6px;}
.range-day.is-end{border-radius:0 6px 6px 0;}
.range-day.is-start.is-end{border-radius:6px;}
.range-cal-foot{display:flex;justify-content:flex-end;gap:8px;margin-top:10px;}
.range-foot-btn{
  font-family:var(--font-sans);font-size:0.75rem;padding:4px 12px;
  border:1px solid var(--line);background:var(--paper);color:var(--meta);
  border-radius:14px;cursor:pointer;
}
.range-foot-btn:hover{background:var(--stripe);color:var(--ink);}
@media (max-width:620px){
  .range-months{flex-direction:column;gap:12px;}
  .range-cal{left:-8px;}
}

/* ---------- itinerary ---------- */
.itin-controls-bar{
  display:flex;align-items:flex-start;justify-content:space-between;gap:14px;
  flex-wrap:wrap;padding-right:36px;
}
.itin-controls-bar .toppicks-note{flex:1 1 320px;margin:0;}
.itin-views{display:flex;gap:4px;flex:0 0 auto;}
.itin-view-btn{
  font-family:var(--font-sans);font-size:0.74rem;padding:4px 12px;
  border:1px solid var(--line);border-radius:14px;
  background:var(--paper);color:var(--meta);cursor:pointer;
}
.itin-view-btn:hover{background:var(--stripe);color:var(--ink);}
.itin-view-btn.active{background:var(--harbor);border-color:var(--harbor);color:#fff;}

/* Days are cards in a grid, not a single column. A column capped for
   readability left most of a wide window empty; a grid uses whatever width
   there is and collapses to one card per row on a phone, which is what a
   multi-day plan wants to look like anyway. */
#itin-body{display:flex;flex-direction:column;gap:14px;padding:4px 36px 18px 0;}
.itin-days{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(310px, 1fr));
  gap:14px;
  align-items:start;
}
.itin-note{margin:0;padding:18px 4px;font-size:0.85rem;color:var(--muted);}

.itin-day{
  border:1px solid var(--line);border-radius:10px;background:var(--paper);
  overflow:hidden;box-shadow:0 1px 2px rgba(27,42,65,0.05);
}
/* Unscheduled is a holding pen, not a day: a block below the grid rather than
   an item inside it, with its own grid so a long list reads across. */
.itin-unscheduled .itin-list{
  display:grid;grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
}

.itin-day-head{
  display:flex;align-items:center;gap:11px;
  padding:9px 12px;background:var(--stripe);border-bottom:1px solid var(--line);
}
.itin-date{
  flex:0 0 auto;width:46px;text-align:center;line-height:1.05;
  padding:5px 0;border-radius:7px;background:var(--navy);color:var(--paper);
}
.itin-date.is-loose{background:var(--brass);letter-spacing:2px;padding:13px 0 14px;font-size:0.68rem;}
.itin-dow{display:block;font-size:0.57rem;text-transform:uppercase;letter-spacing:0.08em;opacity:0.72;}
.itin-dnum{display:block;font-size:1.15rem;font-weight:700;font-family:var(--font-sans);}
.itin-mon{display:block;font-size:0.57rem;text-transform:uppercase;letter-spacing:0.08em;opacity:0.72;}
.itin-heads{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1 1 auto;}
.itin-day-name{font-family:var(--font-sans);font-size:0.92rem;font-weight:700;color:var(--navy);}
.itin-day-count{font-size:0.69rem;color:var(--muted);}
.itin-day-tally{
  flex:0 0 auto;font-size:0.63rem;text-transform:uppercase;letter-spacing:0.07em;
  color:var(--meta);background:var(--paper);border:1px solid var(--line);
  padding:2px 8px;border-radius:11px;white-space:nowrap;
}

/* An item is two lines: what it is, then everything you can do to it. Inline
   would need ~400px of row, which a card in this grid does not have. */
.itin-list{list-style:none;margin:0;padding:0;}
.itin-item{
  display:flex;flex-direction:column;gap:7px;
  padding:9px 12px;border-bottom:1px solid var(--line);
}
.itin-list > li:last-child{border-bottom:none;}
.itin-name{display:flex;align-items:flex-start;gap:8px;min-width:0;}
.itin-name .dot{margin-top:5px;flex:0 0 auto;}
.itin-label{display:flex;flex-direction:column;gap:1px;min-width:0;font-size:0.86rem;color:var(--ink);line-height:1.3;}
.itin-label small{color:var(--muted);font-size:0.69rem;}
.itin-controls{display:flex;align-items:center;gap:6px;padding-left:16px;}
.itin-move{
  width:25px;height:25px;line-height:1;padding:0;flex:0 0 auto;
  border:1px solid var(--line);background:var(--paper);color:var(--harbor);
  border-radius:6px;cursor:pointer;font-size:0.78rem;
}
.itin-move:hover:not(:disabled){background:var(--stripe);}
.itin-move:disabled{opacity:0.25;cursor:default;}
/* Takes a place off its day and back to the waiting list at the bottom. The
   dropdown can do it too, but "remove from this day" is a different intent
   from "move to another day" and reads better as its own button. */
.itin-unschedule{
  width:25px;height:25px;line-height:1;padding:0;flex:0 0 auto;
  border:1px solid var(--line);background:var(--paper);color:var(--muted);
  border-radius:6px;cursor:pointer;font-size:0.95rem;
}
.itin-unschedule:hover{background:var(--coral);border-color:var(--coral);color:#fff;}
#app.readonly .itin-unschedule{display:none !important;}
.itin-time-input{
  font-family:var(--font-sans);font-size:0.74rem;width:130px;flex:0 0 auto;padding:4px 6px;
  border:1px solid var(--line);border-radius:6px;background:var(--paper);color:var(--ink);
}
/* Sized to its content, not to the card. flex:1 made it stretch across a wide
   card, which turned "Day 2 · 15 Thu" into a 250px slab of empty select. */
.itin-day-pick{
  font-family:var(--font-sans);font-size:0.74rem;padding:4px 6px;
  flex:0 1 auto;min-width:0;max-width:190px;
  border:1px solid var(--line);border-radius:6px;background:var(--paper);color:var(--ink);
}

/* ---- list: days down, places across ---- */
/* The inverse of grid. A day with six places shows them in a row instead of a
   long scroll, which is the view you want when one day is busy. */
#itin-body.is-list .itin-days{grid-template-columns:1fr;}
#itin-body.is-list .itin-day .itin-list{
  display:grid;grid-template-columns:repeat(auto-fit, minmax(250px, 1fr));
}
#itin-body.is-list .itin-travel{
  display:grid;grid-template-columns:repeat(auto-fit, minmax(250px, 1fr));
}

/* ---- agenda: one stream, in time order ---- */
/* Days with nothing in them are dropped: this is the "what is next" view, and
   an empty Thursday is not an answer to that. */
.itin-agenda{display:flex;flex-direction:column;gap:16px;}
.agenda-group{
  list-style:none;margin:0;padding:0;
  border:1px solid var(--line);border-radius:10px;background:var(--paper);overflow:hidden;
  box-shadow:0 1px 2px rgba(27,42,65,0.05);
}
.agenda-day{
  display:flex;align-items:baseline;gap:10px;
  padding:9px 16px;background:var(--navy);color:var(--paper);
}
.agenda-day-name{font-family:var(--font-sans);font-size:0.95rem;font-weight:700;}
.agenda-day-num{font-size:0.68rem;text-transform:uppercase;letter-spacing:0.09em;opacity:0.7;}
.agenda-row{
  display:flex;align-items:center;gap:14px;
  padding:9px 16px;border-bottom:1px solid var(--line);
}
.agenda-group li:last-child{border-bottom:none;}
.agenda-row.is-travel{background:var(--schedule-bg);color:var(--meta);font-size:0.82rem;}
.agenda-time{
  flex:0 0 96px;font-weight:700;color:var(--navy);font-size:0.82rem;
  font-variant-numeric:tabular-nums;
}
.agenda-untimed{font-weight:400;color:var(--muted);font-size:0.75rem;font-style:italic;}
.agenda-what{display:flex;align-items:center;gap:9px;flex:1 1 auto;min-width:0;}
.agenda-row .itin-controls{padding-left:0;flex:0 0 auto;}

/* Travel places itself: read-only here, edited in its own tab. */
.itin-travel{list-style:none;margin:0;padding:0;background:var(--schedule-bg);}
.itin-travel li{
  display:flex;flex-direction:column;gap:1px;
  padding:7px 12px;font-size:0.78rem;color:var(--meta);border-bottom:1px solid var(--line);
}
.itin-time{font-weight:700;color:var(--navy);font-size:0.75rem;display:flex;align-items:center;gap:7px;}

/* What kind of thing this row is. A booking row used to say only when it was;
   a concert and a connecting flight looked identical until you read the text. */
.itin-kind{
  font-weight:700;font-size:0.6rem;text-transform:uppercase;letter-spacing:0.07em;
  padding:1px 6px;border-radius:999px;white-space:nowrap;
  background:var(--kind, #6b7b93);color:#fff;
}
.agenda-what .itin-kind{flex:0 0 auto;}
/* The badge colour follows the map pin for the same kind, so a red Event badge
   and a red Event pin are recognisably the same thing in two places. */
.kind-travel{--kind:#3a86ff;}
.kind-stay{--kind:#c98a00;}
.kind-event{--kind:#c1121f;}
.kind-attraction{--kind:#087f8c;}
.kind-booking{--kind:#6b7b93;}
.itin-empty{margin:0;padding:13px 12px;font-size:0.78rem;color:var(--muted);font-style:italic;}

/* A viewer reads the plan and does not change it. */
#app.readonly .itin-move,
#app.readonly .itin-day-pick,
#app.readonly .itin-time-input{display:none !important;}

@media (max-width:620px){
  #itin-body{padding-right:34px;}
  .itin-controls-bar{padding-right:34px;}
  .itin-days{grid-template-columns:1fr;}
  #itin-body.is-list .itin-day .itin-list,
  #itin-body.is-list .itin-travel{grid-template-columns:1fr;}
  .agenda-row{flex-wrap:wrap;row-gap:7px;}
  .agenda-time{flex:0 0 auto;}
  .agenda-what{flex:1 1 100%;}
  .itin-unscheduled .itin-list{grid-template-columns:1fr;}
  .itin-day-tally{display:none;}
}

/* ---------- the sign-in dialog ---------- */
/* Sign-in used to be a wall you met before the app. It is a dialog over the
   app now, so a first visit lands on the map instead of a form. Same views,
   same forms, same JS — only the container changed. */
.auth-dialog{
  position:fixed;inset:0;z-index:1600;
  display:flex;align-items:center;justify-content:center;
  background:rgba(27,42,65,0.42);padding:20px;
  overflow-y:auto;
}
.auth-dialog[hidden]{display:none;}
.auth-dialog-card{
  position:relative;
  width:100%;max-width:400px;margin:auto;
  background:var(--paper);border:1px solid var(--line);
  border-top:3px solid var(--harbor);border-radius:10px;
  padding:24px 26px 20px;box-shadow:0 10px 40px rgba(0,0,0,0.28);
}
.auth-dialog-card h2{
  font-family:var(--font-sans);
  font-size:1.25rem;margin:0 0 6px;color:var(--navy);
}
.auth-dialog-card #auth-blurb{
  font-size:0.84rem;color:var(--meta);margin:0 0 16px;line-height:1.55;
}
.auth-dialog-close{
  position:absolute;top:8px;right:10px;
  width:30px;height:30px;line-height:1;
  font-size:1.35rem;font-family:var(--font-sans);
  background:none;border:none;color:var(--muted);cursor:pointer;border-radius:50%;
}
.auth-dialog-close:hover{background:var(--stripe);color:var(--ink);}
/* The card scrolls rather than the page when a form is tall on a short screen. */
@media (max-height:620px){
  .auth-dialog{align-items:flex-start;}
}

.paid-dialog{
  position:fixed;inset:0;z-index:1500;
  display:flex;align-items:center;justify-content:center;
  background:rgba(27,42,65,0.34);padding:20px;
}
.paid-dialog[hidden]{display:none;}
.paid-dialog-card{
  width:100%;max-width:420px;
  background:var(--paper);border:1px solid var(--line);
  border-top:3px solid var(--brass);border-radius:10px;
  padding:22px 24px 18px;box-shadow:0 8px 30px rgba(0,0,0,0.22);
}
.paid-dialog-card h2{
  font-family:var(--font-sans);
  font-size:1.1rem;margin:0 0 10px;color:var(--navy);
}
.paid-dialog-card p{font-size:0.87rem;color:var(--meta);line-height:1.6;margin:0 0 10px;}
.paid-dialog-lede{color:var(--ink) !important;}
.paid-dialog-lede strong{color:var(--harbor);}
.paid-dialog-note{
  font-size:0.78rem;color:var(--ink);background:var(--hotel-row-bg);
  border-left:3px solid var(--brass);padding:9px 12px;border-radius:0 6px 6px 0;
}
.paid-dialog-note[hidden]{display:none;}
.price-block{display:flex;gap:10px;flex-wrap:wrap;margin:4px 0 2px;}
.price-opt{
  flex:1;min-width:118px;
  border:1px solid var(--line);border-radius:8px;
  padding:10px 12px;background:var(--sand);
  display:flex;flex-direction:column;gap:1px;
}
.price-opt-best{border-color:var(--brass);background:var(--hotel-row-bg);}
.price-name{
  font-size:0.68rem;text-transform:uppercase;letter-spacing:0.08em;
  font-weight:bold;color:var(--harbor);
}
.price-amt{font-family:var(--font-sans);font-size:1.15rem;font-weight:bold;color:var(--navy);}
.price-amt small{font-size:0.6em;font-weight:normal;color:var(--muted);}
.price-per{font-size:0.72rem;color:var(--muted);}
.price-tag{font-size:0.7rem;color:var(--meta);font-style:italic;margin-top:4px;}
.price-opt-best .price-name{color:var(--brass);}

.paid-dialog-actions{display:flex;justify-content:flex-end;margin-top:14px;}
.paid-dialog-actions button{
  font-family:var(--font-sans);font-size:0.85rem;padding:8px 20px;border-radius:16px;
  border:1px solid var(--harbor);background:var(--harbor);color:#fff;cursor:pointer;
}
.paid-dialog-actions button:hover{background:var(--deep-teal);}

/* A locked feature still looks like a feature, just not one you have yet. */
.travel-paste-btn.locked{opacity:0.72;}
.travel-paste-btn.locked::after{content:' \1F512';font-size:0.85em;}

/* ---- Concierge drawer ---- */
/* Slides in over the right edge. Fixed, so it never disturbs the layout it
   overlays — you keep looking at the map while you ask about it. */
.concierge{
  position:fixed;
  top:0;right:0;bottom:0;
  width:min(420px,100%);
  z-index:1400;
  display:flex;flex-direction:column;
  background:var(--sand);
  border-left:1px solid var(--line);
  box-shadow:-6px 0 24px rgba(0,0,0,0.14);
  transform:translateX(100%);
  transition:transform .22s ease;
}
.concierge.open{transform:translateX(0);}
@media (prefers-reduced-motion: reduce){ .concierge{transition:none;} }

#concierge-scrim{
  position:fixed;inset:0;z-index:1399;
  background:rgba(27,42,65,0.28);
}
#concierge-scrim[hidden]{display:none;}

.concierge-head{
  display:flex;align-items:flex-start;justify-content:space-between;gap:10px;
  padding:14px 16px;background:var(--navy);color:var(--paper);
}
.concierge-head h2{
  font-family:var(--font-sans);
  font-size:1.02rem;margin:0;color:var(--paper);
}
#concierge-sub{font-size:0.72rem;color:var(--header-sub);margin:3px 0 0;line-height:1.45;}
.concierge-close{
  background:none;border:none;color:var(--paper);
  font-size:1.5rem;line-height:1;cursor:pointer;padding:0 2px;
}
.concierge-close:hover{color:var(--brass);}

/* The pull-tab on the right edge of the map. Always visible, so the concierge
   is discoverable without hunting the header; it slides left with the drawer
   so one control both opens and closes it. */
.concierge-tab{
  position:fixed;
  top:50%;right:0;
  transform:translateY(-50%);
  z-index:1401;
  display:flex;align-items:center;justify-content:center;
  padding:16px 7px;
  border:1px solid var(--brass);
  border-right:none;
  border-radius:10px 0 0 10px;
  background:var(--navy);
  color:var(--brass);
  cursor:pointer;
  box-shadow:-3px 0 10px rgba(0,0,0,0.18);
  transition:transform .22s ease, background .15s ease;
}
.concierge-tab:hover{background:var(--deep-teal);}
.concierge-tab-label{
  font-family:var(--font-sans);
  font-size:0.82rem;letter-spacing:0.06em;
  writing-mode:vertical-rl;
  text-orientation:mixed;
  transform:rotate(180deg);   /* reads bottom-to-top, the usual way for a spine */
}
/* Shift left by exactly the drawer's width, which is min(420px, 100vw).
   Negating that gives max(), not min() — min() of two negatives would pick the
   more negative and throw the tab off the left of the screen. */
.concierge-tab.open{transform:translateY(-50%) translateX(max(-420px, -100vw));}
@media (prefers-reduced-motion: reduce){ .concierge-tab{transition:none;} }

/* On a phone the drawer is full width, so there is nowhere for the tab to go:
   hide it and let the × in the drawer header do the closing. */
@media (max-width:520px){
  .concierge-tab.open{display:none;}
}

.chat-gate{display:none;padding:20px 18px;}
.chat-gate.show{display:block;}
.chat-gate p{font-size:0.85rem;color:var(--meta);line-height:1.6;margin:0 0 12px;}
.chat-gate-note{
  font-size:0.8rem;color:var(--ink);background:var(--hotel-row-bg);
  border-left:3px solid var(--brass);padding:9px 12px;border-radius:0 6px 6px 0;
}

#chat-wrap{display:none;flex-direction:column;min-height:0;flex:1;}
#chat-wrap.show{display:flex;}

.chat-log{
  flex:1;min-height:0;overflow-y:auto;
  padding:14px 16px;display:flex;flex-direction:column;gap:12px;
}
.chat-empty{font-size:0.82rem;color:var(--muted);font-style:italic;margin:2px 0 0;}
.chat-msg{max-width:94%;}
.chat-user{align-self:flex-end;}
.chat-who{
  font-size:0.63rem;text-transform:uppercase;letter-spacing:0.05em;
  color:var(--muted);font-weight:bold;margin-bottom:3px;
}
.chat-user .chat-who{text-align:right;}
.chat-text{
  font-size:0.85rem;line-height:1.55;color:var(--ink);
  padding:9px 12px;border-radius:10px;
  border:1px solid var(--line);background:var(--paper);
  overflow-wrap:anywhere;
}
.chat-user .chat-text{background:var(--stripe);}
.chat-text p{margin:0 0 8px;}
.chat-text p:last-child{margin-bottom:0;}
.chat-text ul{margin:0 0 8px;padding-left:18px;}
.chat-text ul:last-child{margin-bottom:0;}
.chat-text li{margin:0 0 4px;}
.chat-text strong{color:var(--navy);}
.chat-text a{
  color:var(--harbor);
  text-decoration:underline;
  text-underline-offset:2px;
  overflow-wrap:anywhere;
}
.chat-text a:hover{color:var(--deep-teal);}
/* A small mark so it is obvious the link leaves the app. */
.chat-text a::after{content:'\2197';font-size:0.8em;margin-left:1px;opacity:0.7;}

.chat-pins{
  display:flex;flex-wrap:wrap;align-items:center;gap:6px;
  margin:-4px 0 2px;
}
.chat-pins-intro{
  font-size:0.66rem;text-transform:uppercase;letter-spacing:0.05em;
  color:var(--muted);font-weight:bold;width:100%;
}
.chat-pin-btn{
  font-family:var(--font-sans);font-size:0.76rem;
  padding:5px 11px;border-radius:14px;
  border:1px solid var(--harbor);background:var(--paper);color:var(--harbor);
  cursor:pointer;text-align:left;
}
.chat-pin-btn:hover{background:var(--stripe);}
.chat-pin-btn.added{
  border-color:var(--line);background:var(--stripe);color:var(--muted);
  cursor:default;
}
.chat-pin-btn:disabled{cursor:default;opacity:0.75;}

.chat-form{display:flex;gap:8px;padding:10px 12px;border-top:1px solid var(--line);background:var(--paper);}
.chat-form input{
  flex:1;min-width:0;font-family:var(--font-sans);font-size:0.85rem;padding:9px 12px;
  border:1px solid var(--line);border-radius:18px;background:var(--sand);color:var(--ink);
}
.chat-form input:focus{outline:2px solid var(--harbor);outline-offset:-1px;}
.chat-form button{
  font-family:var(--font-sans);font-size:0.82rem;padding:8px 16px;border-radius:18px;
  border:1px solid var(--harbor);background:var(--harbor);color:#fff;cursor:pointer;
}
.chat-form button:hover{background:var(--deep-teal);}
.chat-form button:disabled{opacity:0.55;cursor:default;}

.chat-foot{
  display:flex;justify-content:space-between;gap:10px;
  padding:0 14px 9px;font-size:0.72rem;min-height:1.1em;
}
.chat-status{color:var(--muted);}
.chat-status.error{color:var(--coral);}
.chat-allowance{color:var(--muted);}

/* ---- Header actions ---- */
.header-actions{display:flex;gap:6px;flex-wrap:wrap;}
.header-btn{
  font-family:var(--font-sans);
  font-size:0.74rem;
  padding:4px 10px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,0.35);
  background:transparent;
  color:var(--paper);
  cursor:pointer;
  transition:background .15s ease;
}
.header-btn:hover{background:rgba(255,255,255,0.12);}
.invite-status{
  display:none;
  padding:7px 14px;
  background:var(--harbor);
  color:#fff;
  font-size:0.78rem;
  word-break:break-all;
}
.invite-status.show{display:block;}
.offline-note{
  display:none;
  padding:7px 14px;
  background:var(--hotel-row-bg);
  border-bottom:1px solid var(--line);
  font-size:0.76rem;
  color:var(--meta);
}
.offline-note.show{display:block;}

/* Guests: a permanent, unmissable statement that nothing here is saved. */
/* The guest banner was removed: it nagged continuously about something that
   only matters at one moment. That moment is now handled by #save-prompt. */
.save-prompt-actions{
  display:flex;gap:8px;flex-wrap:wrap;margin:14px 0 4px;
}
/* Its own buttons, not the header's: those are cream-on-navy and vanish on a
   pale card. Learned the hard way, one screenshot in. */
.sp-btn{
  flex:1 1 auto;
  font-family:var(--font-sans);
  font-size:0.82rem;
  padding:9px 14px;
  border-radius:16px;
  border:1px solid var(--harbor);
  background:transparent;
  color:var(--harbor);
  cursor:pointer;
  white-space:nowrap;
  transition:background .15s ease, color .15s ease;
}
.sp-btn:hover{background:var(--stripe);}
.sp-btn-primary{background:var(--harbor);color:#fff;}
.sp-btn-primary:hover{background:var(--deep-teal);color:#fff;}

/* Read-only trip. Same shape as the guest note — both answer "why can't I
   change this?" — but a cooler ground, because being a viewer is a normal
   state rather than a warning about unsaved work. */
.viewer-note{
  display:none;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  padding:8px 14px;
  background:var(--schedule-bg);
  border-bottom:1px solid var(--harbor);
  font-size:0.78rem;
  color:var(--ink);
}
.viewer-note.show{display:flex;}
.viewer-note button{
  font-family:var(--font-sans);
  font-size:0.76rem;
  padding:5px 12px;
  border-radius:14px;
  border:1px solid var(--harbor);
  background:var(--harbor);
  color:#fff;
  cursor:pointer;
  white-space:nowrap;
}
.viewer-note button:hover{background:var(--deep-teal);}

/* Plan about to end. Warmer than the viewer note because this one is a
   deadline rather than a state — and brass, not red: nothing is broken yet. */
.expiry-note{
  display:none;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  padding:8px 14px;
  background:var(--hotel-row-bg);
  border-bottom:1px solid var(--brass);
  font-size:0.78rem;
  color:var(--ink);
}
.expiry-note.show{display:flex;}
.expiry-note strong{font-weight:700;}
.expiry-note button{
  font-family:var(--font-sans);
  font-size:0.76rem;
  padding:5px 12px;
  border-radius:14px;
  border:1px solid var(--brass);
  background:transparent;
  color:var(--ink);
  cursor:pointer;
  white-space:nowrap;
}
.expiry-note button:hover{background:var(--brass);color:var(--brass-fg);}

/* A viewer keeps every control that reads and loses every control that writes.
   Hiding rather than disabling: a greyed-out row of buttons reads as breakage,
   and the banner above already says why they are gone. */
#app.readonly .legend-remove,
#app.readonly .bulk-bar,
#app.readonly #travel-add-btn,
#app.readonly .travel-remove,
#app.readonly .travel-share-btn,
#app.readonly .row-check,
#app.readonly .stay-btn{display:none !important;}
#app.readonly .trip-name-input{pointer-events:none;background:transparent;border-color:transparent;}
#app.readonly .trip-range input{pointer-events:none;opacity:0.65;}
.header-btn-primary{
  background:var(--brass);
  border-color:var(--brass);
  color:var(--brass-fg);
  font-weight:bold;
}
.header-btn-primary:hover{background:var(--deep-teal);color:#fff;}
.header-btn[hidden]{display:none;}

/* ---- Locations header: view toggle + sync badge ---- */
/* Was .tp-header, on the Top Picks tab that has been merged into this one. */
.locations-controls{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:12px;
}
.locations-controls .sync-badge{margin-bottom:0;}
/* A guest has no sync to report, so the badge is not rendered at all. */
.sync-badge.is-hidden{display:none;}
.picks-view{display:flex;gap:4px;}
.picks-view-btn{
  font-family:var(--font-sans);
  font-size:0.74rem;
  padding:4px 11px;
  border-radius:12px;
  border:1px solid var(--line);
  background:var(--paper);
  color:var(--meta);
  cursor:pointer;
}
.picks-view-btn.active{
  background:var(--harbor);
  border-color:var(--harbor);
  color:#fff;
  font-weight:bold;
}
.pick-count{
  display:inline-block;
  font-size:0.68rem;
  padding:1px 7px;
  border-radius:9px;
  background:var(--stripe);
  border:1px solid var(--line);
  color:var(--meta);
  margin-left:4px;
}

/* ---- Suggested ---- */
.suggested-wrap{
  display:none;
  padding:11px 14px;
  background:var(--stripe);
  border-bottom:1px solid var(--line);
}
.suggested-wrap.show{display:block;}
.suggested-head{
  font-size:0.68rem;
  text-transform:uppercase;
  letter-spacing:0.06em;
  color:var(--brass);
  font-weight:bold;
  margin-bottom:7px;
}
.suggested-list{display:flex;flex-direction:column;gap:6px;}
.suggested-card{
  display:flex;
  align-items:center;
  gap:9px;
  padding:8px 11px;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:8px;
}
.suggested-body{flex:1;min-width:0;}
.suggested-name{font-weight:bold;font-size:0.87rem;color:var(--ink);}
.suggested-reason{font-size:0.74rem;color:var(--muted);font-style:italic;}

/* "+ Add to map" — on each search result row and inside each found-place popup. */
.ms-add-btn{
  flex:0 0 auto;
  align-self:center;
  margin-left:8px;
  padding:5px 10px;
  font-size:0.72rem;
  font-weight:bold;
  font-family:inherit;
  color:#fff;
  background:var(--harbor);
  border:0;
  border-radius:14px;
  cursor:pointer;
  white-space:nowrap;
}
.ms-add-btn:hover{ filter:brightness(1.1); }
.ms-add-btn.added,
.ms-add-btn:disabled{
  background:transparent;
  color:var(--muted);
  border:1px solid var(--line);
  cursor:default;
}
.ms-add-btn.popup-add{
  display:block;
  width:100%;
  margin:8px 0 0;
  text-align:center;
}

/* "Set as stay" — the lodging counterpart to "+ Add" in All Locations. */
.al-stay-btn{
  font-size:0.75rem;
  padding:4px 10px;
  border-radius:12px;
  border:1px solid var(--brass);
  background:var(--paper);
  color:var(--brass);
  font-family:inherit;
  cursor:pointer;
  white-space:nowrap;
  transition:all .15s ease;
}
.al-stay-btn:hover{ background:var(--brass); color:var(--brass-fg); }
.al-stay-btn.is-set,
.al-stay-btn:disabled{
  background:var(--hotel-row-bg);
  border-color:var(--brass);
  color:var(--meta);
  cursor:default;
}

/* The single action button inside a map popup. */
.popup-action{
  display:block;
  width:100%;
  margin-top:8px;
  padding:6px 10px;
  font-size:0.76rem;
  font-family:inherit;
  font-weight:bold;
  border-radius:12px;
  border:1px solid var(--harbor);
  background:var(--harbor);
  color:#fff;
  cursor:pointer;
}
.popup-action:hover{ filter:brightness(1.1); }
.popup-action.is-set,
.popup-action:disabled{
  background:transparent;
  color:var(--meta);
  border-color:var(--line);
  cursor:default;
}

/* ---- Trip date range, in the header ---- */
.trip-range{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:6px;
  font-size:0.78rem;
  color:var(--header-sub);
}
.trip-range label{
  text-transform:uppercase;
  letter-spacing:0.06em;
  font-size:0.68rem;
  font-weight:bold;
}
.trip-range input[type="date"]{
  font-family:inherit;
  font-size:0.78rem;
  padding:4px 7px;
  border-radius:8px;
  border:1px solid rgba(255,255,255,0.25);
  background:rgba(255,255,255,0.08);
  color:#fff;
}
.trip-range input[type="date"]:focus{
  outline:none;
  border-color:var(--brass);
  background:rgba(255,255,255,0.16);
}
/* The native picker glyph is hidden on every range field (see .range-field
   above) — these fields open the app's own calendar and nothing else. */
.trip-range-status{
  display:none;
  font-size:0.72rem;
  color:var(--header-sub);
}
.trip-range-status.show{ display:inline; }
.trip-range-status.error{ color:#f0a79a; }

/* ---- Where you're staying: pinned to the top of All Locations ---- */
.al-stay-row td{
  background:var(--hotel-row-bg);
  font-weight:bold;
  border-bottom:2px solid var(--brass);
}
.al-stay-tag{
  font-weight:normal;
  font-size:0.7rem;
  color:var(--brass);
  white-space:nowrap;
}

/* ---- Distance column: walking and driving on separate lines ---- */
.dist-line{ white-space:nowrap; line-height:1.5; }
.dist-mode{
  display:inline-block;
  min-width:3.4em;
  font-size:0.68rem;
  text-transform:uppercase;
  letter-spacing:0.05em;
  color:var(--muted);
}

/* Sign-in addresses are long; keep the User column from stretching the table. */
.picker-names{
  font-size:0.78rem;
  color:var(--meta);
  overflow-wrap:anywhere;
}

/* ---- Trip name, centred in the header ----
   Deliberately mirrors .trip-item-name / .trip-item-meta on the "Your trips"
   screen: bold name, date range under it, so the same trip reads the same way
   in both places. */
.trip-name-block{
  flex:1 1 240px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:1px;
  min-width:0;
  text-align:center;
}
.trip-name-input{
  width:100%;
  max-width:340px;
  font-family:var(--font-sans);
  font-weight:bold;
  font-size:0.95rem;
  color:#fff;
  text-align:center;
  background:transparent;
  border:1px solid transparent;
  border-radius:8px;
  padding:3px 10px;
  transition:all .15s ease;
}
/* It's an editable field, so it has to look like one on approach. */
.trip-name-input:hover{ border-color:rgba(255,255,255,0.25); }
.trip-name-input:focus{
  outline:none;
  border-color:var(--brass);
  background:rgba(255,255,255,0.1);
}
.trip-name-input::placeholder{
  color:var(--header-sub);
  font-weight:normal;
  font-style:italic;
}
.trip-name-meta{
  font-size:0.76rem;
  color:var(--header-sub);
}

/* ---- "Which one did you mean?" list under the Where to? box ---- */
.ms-choices{
  display:none;
  position:absolute;
  z-index:1200;            /* above the Leaflet map, which sits at 400-ish */
  left:0;
  right:0;
  top:100%;
  margin-top:4px;
  max-height:280px;
  overflow-y:auto;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:8px;
  box-shadow:0 6px 18px rgba(0,0,0,0.18);
}
.ms-choices.show{ display:block; }
.ms-choice{
  display:flex;
  flex-direction:column;
  gap:1px;
  width:100%;
  text-align:left;
  padding:8px 12px;
  background:transparent;
  border:0;
  border-bottom:1px solid var(--line);
  font-family:var(--font-sans);
  cursor:pointer;
}
.ms-choice:last-child{ border-bottom:0; }
.ms-choice.active,
.ms-choice:hover{ background:var(--stripe); }
.ms-choice-name{
  font-weight:bold;
  font-size:0.86rem;
  color:var(--ink);
  display:flex;
  align-items:baseline;
  gap:7px;
}
.ms-choice-kind{
  font-weight:normal;
  font-size:0.68rem;
  text-transform:uppercase;
  letter-spacing:0.04em;
  color:var(--muted);
}
.ms-choice-meta{
  font-size:0.74rem;
  color:var(--meta);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* ---- add to itinerary, from an Explore result ---- */
/* Two buttons on one result: "on the map" and "on a day" are different
   questions, so neither replaces the other. */
.ms-result-actions{
  display:flex;flex-direction:column;gap:5px;
  flex:0 0 auto;align-self:center;margin-left:8px;
}
.ms-result-actions .ms-add-btn{margin-left:0;white-space:nowrap;}
/* Secondary: adding to the map stays the primary move. */
.ms-add-btn.ms-plan-btn{
  background:transparent;color:var(--harbor);border:1px solid var(--harbor);
}
.ms-add-btn.ms-plan-btn:hover{background:var(--harbor);color:#fff;filter:none;}
.ms-add-btn.popup-add.ms-plan-btn{margin-top:5px;}

.itin-add{
  position:fixed;z-index:2000;width:270px;max-width:calc(100vw - 24px);
  background:var(--paper);border:1px solid var(--line);border-radius:10px;
  box-shadow:0 10px 30px rgba(0,0,0,0.28);padding:13px 14px;
}
.itin-add[hidden]{display:none;}
.itin-add-title{
  font-family:var(--font-sans);
  font-size:0.95rem;font-weight:700;color:var(--navy);
  margin-bottom:9px;line-height:1.25;
}
.itin-add-fields{display:flex;gap:10px;}
.itin-add-fields > div{flex:1 1 auto;min-width:0;}
.itin-add-fields > div:last-child{flex:0 0 96px;}
.itin-add-optional{font-weight:400;text-transform:none;letter-spacing:0;color:var(--muted);}
.itin-add select,
.itin-add input[type="time"]{
  width:100%;font-family:var(--font-sans);font-size:0.78rem;
  padding:5px 7px;border:1px solid var(--line);border-radius:7px;
  background:var(--paper);color:var(--ink);
}
.itin-add-status{font-size:0.72rem;color:var(--meta);margin-top:8px;min-height:1em;}
.itin-add-status.error{color:var(--coral);}
.itin-add-foot{display:flex;justify-content:flex-end;gap:8px;margin-top:10px;}
.itin-add-go{
  font-family:var(--font-sans);font-size:0.75rem;font-weight:bold;padding:5px 13px;
  border:1px solid var(--harbor);background:var(--harbor);color:#fff;
  border-radius:14px;cursor:pointer;
}
.itin-add-go:hover{filter:brightness(1.1);}
.itin-add-go:disabled{background:transparent;color:var(--muted);border-color:var(--line);cursor:default;filter:none;}

/* ---- editing a booking ---- */
.travel-card-actions{display:flex;align-items:center;gap:6px;flex:0 0 auto;}
.travel-edit{
  font-family:var(--font-sans);font-size:0.72rem;
  padding:2px 10px;border-radius:11px;border:1px solid var(--line);
  background:transparent;color:var(--harbor);cursor:pointer;
}
.travel-edit:hover{background:var(--harbor);color:#fff;border-color:var(--harbor);}
/* The form says which job it is doing, because the fields are identical. */
.travel-form.is-editing{box-shadow:inset 3px 0 0 var(--brass);}

/* Quiet until wanted: a booking row in the Itinerary is there to be read, and
   the Edit button should not compete with the time and the place. */
.itin-booking-edit{
  font-family:var(--font-sans);font-size:0.66rem;
  padding:1px 8px;border-radius:10px;border:1px solid var(--line);
  background:transparent;color:var(--meta);cursor:pointer;
  flex:0 0 auto;align-self:flex-start;opacity:0.65;
}
.itin-travel li .itin-booking-edit{align-self:flex-start;margin-top:3px;}
.agenda-row .itin-booking-edit{align-self:center;margin-left:auto;}
.itin-booking-edit:hover{opacity:1;color:var(--harbor);border-color:var(--harbor);}
/* A viewer reads the plan and does not change it. */
#app.readonly .itin-booking-edit,
#app.readonly .travel-edit{display:none !important;}

/* A quiet line, not a consent wall: it says the honest one-sentence version
   and links to the rest. It sits where an account is actually created. */
.auth-links.auth-privacy{font-size:0.76rem;color:var(--muted);line-height:1.45;}
footer a{color:var(--footer-text);}

/* ---- deleting your own account ---- */
/* Visually separate from the rest of the card, because it is not one of the
   settings — it is the end of the account. Closed by default, and the button
   stays disabled until the typed email matches. */
.danger-zone{
  margin-top:26px;padding-top:18px;border-top:1px solid var(--line);
}
.danger-zone > summary{
  cursor:pointer;font-size:0.82rem;color:var(--coral);
  list-style:none;display:inline-flex;align-items:center;gap:6px;
}
.danger-zone > summary::-webkit-details-marker{display:none;}
.danger-zone > summary::before{content:"\25B8";font-size:0.7rem;transition:transform .12s;}
.danger-zone[open] > summary::before{transform:rotate(90deg);}
.danger-zone > summary:hover{text-decoration:underline;}
.danger-body{
  margin-top:14px;padding:16px 18px;border-radius:6px;
  border:1px solid var(--coral);background:rgba(193,85,61,0.05);
}
.danger-summary{font-size:0.88rem;color:var(--ink);margin:0 0 10px;line-height:1.5;}
.danger-list{margin:0 0 10px;padding-left:20px;font-size:0.84rem;color:var(--meta);line-height:1.5;}
.danger-list li{margin-bottom:5px;}
.danger-keep{font-size:0.82rem;color:var(--meta);line-height:1.5;margin:0 0 10px;}
.danger-final{font-size:0.85rem;color:var(--coral);margin:0 0 14px;}
.danger-body input{width:100%;}
.danger-btn{
  margin-top:12px;width:100%;
  font-family:var(--font-sans);font-size:0.85rem;font-weight:bold;padding:9px 14px;
  border:1px solid var(--coral);background:var(--coral);color:#fff;
  border-radius:8px;cursor:pointer;
}
.danger-btn:hover:not(:disabled){filter:brightness(1.08);}
.danger-btn:disabled{
  background:transparent;color:var(--muted);border-color:var(--line);cursor:not-allowed;
}

/* ---- settings ---- */
/* Sections, not one long form: the account screen now holds six unrelated
   jobs and a rule between them is what stops it reading as a single one. */
.settings-card{max-width:520px;}
.settings-section{
  margin-top:26px;padding-top:20px;border-top:1px solid var(--line);
}
.settings-section h2{
  font-size:0.78rem;text-transform:uppercase;letter-spacing:0.1em;
  color:var(--meta);margin:0 0 12px;font-weight:bold;
}
.settings-section form{margin:0;}
.settings-section .screen-hint{margin-top:6px;}
.settings-section select{
  width:100%;font-family:var(--font-sans);font-size:0.88rem;padding:7px 9px;
  border:1px solid var(--line);border-radius:8px;background:var(--paper);color:var(--ink);
}
/* The danger section owns its own rule via .danger-zone, so it does not need
   a second one stacked on top of it. */
.settings-section .danger-zone{margin-top:0;padding-top:0;border-top:none;}
/* The button styling in this card is scoped to submit buttons, and this one
   does not submit anything — it assembles a file. Same look, same weight,
   because it is the same kind of action. */
#export-data-btn{
  width:100%;margin-top:4px;
  font-family:var(--font-sans);font-size:0.88rem;font-weight:bold;
  padding:9px 14px;border:1px solid var(--harbor);border-radius:8px;
  background:var(--harbor);color:var(--paper);cursor:pointer;
}
#export-data-btn:hover:not(:disabled){background:var(--deep-teal);}
#export-data-btn:disabled{opacity:0.55;cursor:default;}
.settings-section .auth-links a{color:var(--harbor);}

/* ---- typographic tuning for the sans stack ---- */
/* Georgia carried its own hierarchy through shape; a UI sans does not, so the
   weight and tracking have to be stated. Headings tighten (large text set at
   default tracking reads loose), small uppercase labels open up (tight caps
   are illegible), and numbers line up in columns. */
h1, h2, h3,
.screen-card h1,
.trip-name-input,
.tile .num, .plan-price{
  letter-spacing:-0.018em;
}
h1, .screen-card h1{font-weight:650;}
h2, h3{font-weight:600;}
.screen-label,
.settings-section h2,
.eyebrow,
.itin-kind,
.plan-name{
  letter-spacing:0.06em;
}
/* Digits in a column should share a width: times in the itinerary, distances
   in Locations, prices on the plan cards. */
.itin-time, .agenda-time, .itin-time-input,
.al-distance, .plan-price, .tile .num, .travel-route .time{
  font-variant-numeric:tabular-nums;
}
/* One hairline instead of the old heavy rule, and a touch more air in the
   places the serif used to fill. */
body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}