/* Japan 2027 — Japanese rail vernacular.
   Cool indigo-on-paper, route diagram as the organizing metaphor. */

:root {
  --indigo:    #12336B;   /* skeleton route, primary structure */
  --indigo-2:  #24509c;   /* lighter indigo for hovers/fills */
  --vermilion: #C1272D;   /* day-trip branches */
  --ink:       #16202E;   /* body text */
  --paper:     #E9EDF1;   /* background — cool, not cream */
  --card:      #FFFFFF;   /* panels */
  --rule:      #C7D0D9;   /* hairlines */
  --muted:     #5a6675;

  --serif: 'Shippori Mincho', 'Times New Roman', serif;
  --sans:  'Zen Kaku Gothic New', system-ui, -apple-system, sans-serif;
  --mono:  'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --shadow: 0 1px 2px rgba(22,32,46,.08), 0 6px 20px rgba(22,32,46,.06);
  --focus: 0 0 0 3px rgba(18,51,107,.35);
}

* { box-sizing: border-box; }

/* Author display rules (e.g. .btn { display:inline-flex }) otherwise beat the
   UA [hidden] rule, leaking "hidden" buttons like Delete onto the Add form. */
[hidden] { display: none !important; }

html, body {
  margin: 0; padding: 0;
  height: 100%;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
}

button { font-family: inherit; }

/* --- App shell --- */
/* Desktop: fill the viewport so the left panel scrolls INTERNALLY and the map stays
   fixed beside it (mobile overrides this to a normal scrolling page). */
.app { display: flex; flex-direction: column; height: 100dvh; overflow: hidden; }

.topbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  padding: 10px 16px;
  background: var(--indigo);
  color: #fff;
  border-bottom: 3px solid var(--vermilion);
  position: sticky; top: 0; z-index: 500;
}
.brand {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.15rem;
  letter-spacing: .06em;
  display: flex; align-items: baseline; gap: 10px;
}
.brand .jp { font-size: .8rem; opacity: .72; letter-spacing:.18em; }
.brand .dates {
  font-family: var(--mono); font-size: .62rem; opacity: .7;
  letter-spacing: .04em; font-weight: 400;
}
.you-chip {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 999px;
  padding: 5px 12px 5px 10px;
  color: #fff; cursor: pointer;
  font-size: .85rem; white-space: nowrap;
}
.you-chip:hover { background: rgba(255,255,255,.22); }
.you-chip .dot { width: 12px; height: 12px; border-radius: 50%; box-shadow: 0 0 0 2px rgba(255,255,255,.5); }

.main {
  flex: 1; display: grid;
  grid-template-columns: minmax(300px, 380px) 1fr;
  min-height: 0; overflow: hidden;
}

/* --- Left panel --- */
.panel {
  background: var(--paper);
  border-right: 1px solid var(--rule);
  overflow-y: auto;
  padding: 18px 16px 32px;
  display: flex; flex-direction: column; gap: 22px;
}
.section-title {
  font-family: var(--sans);
  font-weight: 700; font-size: .72rem;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 10px;
  display: flex; align-items: center; gap: 8px;
}
.section-title::after { content:""; flex:1; height:1px; background: var(--rule); }

/* Roster */
.roster { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.roster li { margin: 0; }
.roster-row {
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  background: transparent; border: 0;
  padding: 8px 8px; border-radius: 8px;
  cursor: pointer; text-align: left;
  color: var(--ink); font-size: .92rem;
}
.roster-row:hover { background: rgba(18,51,107,.06); }
.roster-row .swatch {
  width: 16px; height: 16px; border-radius: 4px; flex: none;
  display: grid; place-items: center;
  font-size: .58rem; font-weight: 700; color: #fff;
  font-family: var(--mono);
}
.roster-row .name { flex: 1; min-width: 0; font-weight: 500; display: flex; flex-direction: column; }
.roster-row .name .meta-line { font-size: .62rem; color: var(--muted); font-weight: 400; margin-top: 1px; }

/* owner moderation controls in the roster */
.roster li.has-admin { display: flex; align-items: center; gap: 2px; }
.roster li.has-admin .roster-row { flex: 1; min-width: 0; }
.roster-admin { display: flex; gap: 2px; flex: none; }
.roster-mini {
  width: 28px; height: 28px; border-radius: 6px; border: 1px solid var(--rule);
  background: transparent; color: var(--muted); cursor: pointer;
  font-size: 14px; line-height: 1; display: grid; place-items: center;
}
.roster-mini:hover { background: rgba(18,51,107,.08); color: var(--ink); }
.roster-mini.danger:hover { background: #FDECEC; color: var(--vermilion); border-color: #E9BFC0; }

/* merge picker */
.merge-choice {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  background: transparent; border: 1px solid var(--rule); border-radius: 8px;
  padding: 10px 12px; margin-bottom: 8px; cursor: pointer; font-size: .95rem; color: var(--ink);
}
.merge-choice:hover { background: rgba(18,51,107,.06); }
.merge-choice .swatch { width: 20px; height: 20px; border-radius: 5px; }

/* rail & passes panel */
.rail-info-note { font-size: .68rem; color: var(--muted); margin-bottom: 10px; line-height: 1.4; }
.rail-subhead {
  font-family: var(--sans); font-size: .68rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted); margin: 12px 0 6px;
}
.rail-legs, .rail-passes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.rleg {
  display: block; width: 100%; text-align: left; font-family: var(--sans);
  border: 1px solid var(--rule); border-left: 3px solid var(--indigo);
  border-radius: 8px; padding: 9px 11px; background: var(--card); cursor: pointer; color: var(--ink);
}
.rleg:hover { border-color: var(--indigo); background: rgba(18,51,107,.04); }
.rleg-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.rleg-route, .rpass-name { font-weight: 700; font-size: .86rem; min-width: 0; }
.rpass-name { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.rleg-price { font-family: var(--mono); font-weight: 700; font-size: .82rem; color: var(--indigo); flex: none; display: inline-flex; align-items: baseline; gap: 4px; }
.est-tag { font-family: var(--sans); font-size: .58rem; font-weight: 600; color: var(--muted); background: #EEF0F3; border-radius: 3px; padding: 0 4px; }
.rleg-line { font-size: .76rem; color: var(--ink); margin-top: 2px; }
/* prominent "who to buy from" badge on each leg */
.rleg-app {
  display: inline-block; margin-top: 6px; font-size: .72rem; font-weight: 700;
  background: var(--indigo); color: #fff; border-radius: 5px; padding: 2px 8px;
}
.rleg-app.local { background: #E7F1EA; color: #1B6B3A; }
.leg-app-line { margin-top: 6px; font-size: .78rem; font-weight: 700; color: var(--indigo); }
.leg-app-line.local { color: #1B6B3A; }
.rleg-note { font-size: .7rem; color: var(--muted); margin-top: 5px; line-height: 1.4; }

/* pass tiles = accordion */
.rpass { border: 1px solid var(--rule); border-left: 3px solid var(--rule); border-radius: 8px; background: var(--card); overflow: hidden; }
.rpass.best { border-left-color: #2B8A3E; background: #F1F8F3; }
.rpass-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%; text-align: left; background: transparent; border: 0; cursor: pointer;
  padding: 10px 11px; font-family: var(--sans); color: var(--ink);
}
.rpass-head:hover { background: rgba(18,51,107,.04); }
.rpass-right { display: flex; align-items: center; gap: 8px; flex: none; }
.rpass-chev { color: var(--muted); font-size: .8rem; }
.rpass-tag {
  font-size: .55rem; font-family: var(--mono); letter-spacing: .05em;
  background: var(--muted); color: #fff; border-radius: 4px; padding: 1px 6px; white-space: nowrap;
}
.rpass-tag.best { background: #2B8A3E; }
.rpass-body { padding: 0 11px 11px; }
.rpass-child { font-family: var(--mono); font-size: .72rem; color: var(--muted); margin-bottom: 4px; }
.rpass-covers { font-size: .74rem; color: var(--ink); margin-top: 3px; line-height: 1.4; }
.rpass-verified { font-size: .66rem; color: #2B8A3E; margin-top: 6px; line-height: 1.4; }
.rpass-buy { margin-top: 9px; text-decoration: none; }

/* leg popup extras */
.leg-detail .leg-pass-line { font-size: .74rem; margin-top: 5px; font-weight: 600; color: var(--indigo); }
.leg-detail .price { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.leg-detail .leg-child-note { font-size: .66rem; color: var(--muted); margin: 2px 0 4px; }
.rleg-fares { font-family: var(--mono); font-size: .68rem; color: var(--muted); margin-top: 3px; }

/* rail booking checklist */
.railcheck-progress { font-family: var(--mono); font-size: .7rem; color: var(--muted); margin-bottom: 8px; }
.railcheck { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.rc-row { display: flex; align-items: flex-start; gap: 9px; padding: 8px 10px; border: 1px solid var(--rule); border-radius: 8px; background: var(--card); }
.rc-row.done { opacity: .55; background: #F4F6F8; }
.rc-row input { width: 18px; height: 18px; flex: none; margin-top: 1px; accent-color: #2B8A3E; cursor: pointer; }
.rc-label { display: flex; flex-direction: column; gap: 3px; cursor: pointer; min-width: 0; }
.rc-text { font-size: .84rem; line-height: 1.35; }
.rc-row.done .rc-text { text-decoration: line-through; }
.rc-when { font-family: var(--mono); font-size: .66rem; font-weight: 700; align-self: flex-start; border-radius: 4px; padding: 1px 6px; }
.rc-when.dl-urgent { background: var(--vermilion); color: #fff; }
.rc-when.dl-past { background: #7a2126; color: #fff; }
.rc-when.dl-soon { background: #B08900; color: #fff; }
.rc-when.dl-ok { background: rgba(18,51,107,.1); color: var(--indigo); }
.rc-note { font-size: .68rem; color: var(--muted); }
.rc-link { font-size: .7rem; font-weight: 600; color: var(--indigo); text-decoration: none; border-bottom: 1px solid var(--indigo); align-self: flex-start; }

/* overlapping-leg chooser popup */
.leg-chooser-hd { font-weight: 700; font-size: .8rem; margin-bottom: 7px; color: var(--ink); }
.leg-chooser-btn {
  display: block; width: 100%; text-align: left; background: #fff;
  border: 1px solid var(--rule); border-radius: 7px; padding: 9px 11px; margin-bottom: 6px;
  cursor: pointer; font-size: .86rem; font-weight: 600; font-family: var(--sans); color: var(--ink);
}
.leg-chooser-btn:last-child { margin-bottom: 0; }
.leg-chooser-btn:hover { border-color: var(--indigo); background: rgba(18,51,107,.06); }

/* arrival van alternative — leg row + popup */
.rleg-alt { margin-top: 5px; font-size: .72rem; font-weight: 600; color: #7a4e00; }
.leg-alt { margin-top: 8px; padding: 8px 10px; background: #FFF6E6; border: 1px solid #E7CE80; border-radius: 8px; }
.leg-alt-hd { font-weight: 700; font-size: .82rem; color: #7a4e00; }
.leg-alt-veh { font-size: .72rem; color: var(--ink); margin-top: 2px; font-weight: 600; }
.leg-alt-note { font-size: .72rem; color: var(--ink); margin-top: 4px; line-height: 1.4; }

/* smartEX early-booking discount box in the leg popup */
.leg-discount { margin-top: 8px; padding: 8px 10px; background: #EAF4EC; border: 1px solid #BFDEC7; border-radius: 8px; }
.leg-discount-hd { font-weight: 700; font-size: .78rem; color: #1B6B3A; }
.leg-discount-note { font-size: .72rem; color: var(--ink); margin-top: 3px; line-height: 1.4; }

/* reserve-by deadlines panel */
.deadlines { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.dl-main {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  border: 1px solid var(--rule); border-left-width: 4px; border-radius: 8px;
  background: var(--card); padding: 8px 11px; cursor: pointer; color: var(--ink);
}
.dl-main:hover { border-color: var(--indigo); }
.dl-when {
  flex: none; min-width: 34px; text-align: center; font-family: var(--mono);
  font-weight: 700; font-size: .82rem; border-radius: 5px; padding: 3px 4px;
}
.dl-text { display: flex; flex-direction: column; min-width: 0; }
.dl-name { font-weight: 600; font-size: .88rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dl-sub { font-size: .68rem; color: var(--muted); }
/* urgency tiers */
.dl-urgent .dl-main, li.dl-urgent .dl-main { border-left-color: var(--vermilion); background: #FDECEC; }
.dl-urgent .dl-when { background: var(--vermilion); color: #fff; }
.dl-past .dl-main, li.dl-past .dl-main { border-left-color: #7a2126; background: #FBE4E4; }
.dl-past .dl-when { background: #7a2126; color: #fff; }
.dl-soon .dl-main, li.dl-soon .dl-main { border-left-color: #B08900; background: #FFF8E6; }
.dl-soon .dl-when { background: #B08900; color: #fff; }
.dl-ok .dl-main, li.dl-ok .dl-main { border-left-color: var(--indigo); }
.dl-ok .dl-when { background: rgba(18,51,107,.1); color: var(--indigo); }
/* deadline badge in popup */
.deadline-badge {
  display: inline-block; border-radius: 999px; font-size: .7rem; font-weight: 700;
  padding: 3px 9px; margin: 0 0 6px;
}
.deadline-badge.dl-urgent, .deadline-badge.dl-past { background: #FDECEC; color: #7a2126; border: 1px solid #E9BFC0; }
.deadline-badge.dl-soon { background: #FFF8E6; color: #7a5c00; border: 1px solid #E7CE80; }
.deadline-badge.dl-ok { background: #EEF2F8; color: var(--indigo); border: 1px solid var(--rule); }

/* "Your stops" editable list */
.my-plan { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.mp-row { display: flex; align-items: center; gap: 4px; }
.mp-main {
  flex: 1; min-width: 0; display: flex; flex-direction: column; text-align: left;
  background: var(--card); border: 1px solid var(--rule); border-radius: 8px;
  padding: 8px 10px; cursor: pointer; color: var(--ink);
}
.mp-main:hover { border-color: var(--indigo); }
.mp-name { font-weight: 600; font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mp-sub { font-family: var(--mono); font-size: .68rem; color: var(--muted); margin-top: 1px; }
.mp-actions { display: flex; gap: 3px; flex: none; }

/* --- panel tabs (Route / Proposed) --- */
.panel-tabs {
  display: flex; gap: 4px; margin-bottom: 14px;
  background: rgba(18,51,107,.06); border: 1px solid var(--rule);
  border-radius: 10px; padding: 3px;
}
.panel-tab {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  font-family: var(--sans); font-size: .76rem; font-weight: 700; letter-spacing: 0;
  color: var(--muted); background: transparent; border: 0; border-radius: 8px;
  padding: 7px 4px; cursor: pointer; white-space: nowrap; min-width: 0;
}
.panel-tab:hover { color: var(--ink); }
.panel-tab.active { background: var(--card); color: var(--indigo); box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.tab-count {
  font-family: var(--mono); font-size: .64rem; font-weight: 700;
  background: var(--indigo); color: #fff; border-radius: 999px; padding: 0 5px; min-width: 16px; text-align: center;
}
.panel-tab.active .tab-count { background: var(--indigo); }

/* --- proposed tab --- */
.proposed-lede { font-size: .74rem; color: var(--muted); line-height: 1.4; margin: 0 0 10px; }
.pf-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.pf-chip {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--sans); font-size: .76rem; font-weight: 600; color: var(--ink);
  background: var(--card); border: 1px solid var(--rule); border-radius: 999px;
  padding: 5px 10px; cursor: pointer;
}
.pf-chip:hover { border-color: var(--indigo); }
.pf-chip.active { background: var(--indigo); border-color: var(--indigo); color: #fff; }
.pf-n { font-family: var(--mono); font-size: .64rem; opacity: .7; }
.pf-chip.active .pf-n { opacity: .85; }

.pf-list { list-style: none; margin: 0; padding: 0; }
.pf-head {
  font-family: var(--sans); font-size: .68rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted); margin: 14px 0 6px;
}
.pf-head:first-child { margin-top: 0; }
.pf-item { display: flex; align-items: stretch; gap: 4px; margin-bottom: 6px; }
.pf-main {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 9px; text-align: left;
  background: var(--card); border: 1px solid var(--rule); border-radius: 8px;
  padding: 7px 10px; cursor: pointer; color: var(--ink);
}
.pf-main:hover { border-color: var(--indigo); background: rgba(18,51,107,.04); }
.pf-dot {
  flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  color: #fff; font-family: var(--mono); font-size: .6rem; font-weight: 700;
  box-shadow: 0 0 0 1.5px #fff;
}
.pf-txt { min-width: 0; display: flex; flex-direction: column; }
.pf-name { font-weight: 600; font-size: .88rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-sub {
  font-size: .68rem; color: var(--muted); margin-top: 1px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.pf-nopin {
  flex: none; align-self: center; font-family: var(--mono); font-size: .58rem; color: var(--muted);
  border: 1px dashed var(--rule); border-radius: 5px; padding: 1px 5px;
}
.pf-acts { flex: none; display: flex; align-items: stretch; gap: 4px; }
.pf-star, .pf-go, .pf-link {
  flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 3px;
  min-width: 34px; padding: 0 7px; border: 1px solid var(--rule); border-radius: 8px;
  background: var(--card); color: var(--indigo); text-decoration: none; font-weight: 700;
  font-family: var(--sans); font-size: .85rem; cursor: pointer;
}
.pf-star:hover, .pf-go:hover, .pf-link:hover { border-color: var(--indigo); background: rgba(18,51,107,.06); }
.pf-star-ic { font-size: 1rem; line-height: 1; color: var(--muted); }
.pf-star.on { border-color: #E8B923; background: #FFF8E1; }
.pf-star.on .pf-star-ic { color: #E8A100; }
.pf-star-n { font-family: var(--mono); font-size: .66rem; color: var(--muted); }
.pf-star.on .pf-star-n { color: #B07800; }
.pf-empty { font-size: .8rem; color: var(--muted); padding: 12px 0; }

/* identity picker (honor system) */
.id-list { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.id-choice {
  display: flex; align-items: center; gap: 11px; width: 100%; text-align: left;
  background: var(--card); border: 1px solid var(--rule); border-radius: 10px;
  padding: 12px 14px; cursor: pointer; color: var(--ink); font-size: 1rem; font-family: var(--sans);
}
.id-choice:hover { border-color: var(--indigo); background: rgba(18,51,107,.04); }
.id-choice .swatch { width: 24px; height: 24px; border-radius: 6px; font-size: .7rem; }
.id-choice .id-name { flex: 1; font-weight: 600; min-width: 0; }
.id-choice .id-count { font-family: var(--mono); font-size: .72rem; color: var(--muted); }
.id-choice.owner-locked { cursor: default; opacity: .72; background: #f4f7fb; }
.id-choice.owner-locked:hover { border-color: var(--rule); background: #f4f7fb; }
.id-choice .id-lock { font-size: .68rem; font-family: var(--mono); color: var(--muted); }
.id-empty { font-size: .85rem; color: var(--muted); padding: 6px 2px; }

/* restore-identity affordance on the join screen */
.restore-row { margin-top: 14px; border-top: 1px solid var(--rule); padding-top: 10px; }
.linklike {
  background: none; border: 0; color: var(--indigo); text-decoration: underline;
  cursor: pointer; font-size: .82rem; padding: 4px 0; font-family: var(--sans);
}
.linklike:hover { color: var(--vermilion); }
.roster-row .count { font-family: var(--mono); font-size: .72rem; color: var(--muted); }
.roster-row.off { opacity: .4; }
.roster-row.off .swatch { filter: grayscale(1); }
.roster-row .eye { font-size: .8rem; color: var(--muted); width: 16px; text-align:center; }
.roster-row .owner-tag {
  font-size: .58rem; font-family: var(--mono); letter-spacing:.08em;
  background: var(--indigo); color:#fff; border-radius: 4px; padding: 1px 5px;
}

/* --- Rail diagram --- */
.rail-legend { font-size: .68rem; color: var(--muted); margin: -4px 0 8px; font-family: var(--mono); }
.rail-wrap { position: relative; }
#rail { width: 100%; display: block; }
.rail-node-btn { cursor: pointer; }
.rail-label {
  font-family: var(--sans); font-size: 12px; fill: var(--ink); font-weight: 600;
  dominant-baseline: middle;
}
.rail-sub {
  font-family: var(--mono); font-size: 9.5px; fill: var(--muted);
  dominant-baseline: middle;
}
.rail-nights {
  font-family: var(--mono); font-size: 10px; fill: var(--indigo); font-weight: 600;
}

/* --- Buttons --- */
.btn {
  font-family: var(--sans); font-weight: 600; font-size: .9rem;
  border-radius: 8px; padding: 11px 16px; cursor: pointer;
  border: 1px solid var(--indigo); background: var(--indigo); color: #fff;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
.btn:hover { background: var(--indigo-2); }
.btn.ghost { background: transparent; color: var(--indigo); }
.btn.ghost:hover { background: rgba(18,51,107,.08); }
.btn.danger { border-color: var(--vermilion); background: var(--vermilion); }
.btn.danger:hover { filter: brightness(1.08); }
.btn.block { width: 100%; }
.btn.small { padding: 7px 11px; font-size: .8rem; border-radius: 7px; }

:focus-visible { outline: none; box-shadow: var(--focus); border-radius: 6px; }

/* --- Map --- */
.map-wrap { position: relative; min-height: 300px; }
#map { position: absolute; inset: 0; }
.map-note {
  position: absolute; z-index: 400; bottom: 10px; left: 10px; right: 10px;
  background: rgba(255,255,255,.92); border: 1px solid var(--rule);
  border-radius: 8px; padding: 7px 10px; font-size: .72rem; color: var(--muted);
  max-width: 320px; box-shadow: var(--shadow);
}

/* Custom map marker */
.pin {
  position: relative;
  width: 26px; height: 26px; border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  border: 2px solid #fff; box-shadow: 0 2px 5px rgba(0,0,0,.35);
  display: grid; place-items: center;
}
.pin span {
  transform: rotate(45deg);
  color: #fff; font-family: var(--mono); font-weight: 700; font-size: 11px;
  line-height: 1;
}
.pin.day_trip { border-style: dashed; }

/* --- Modal / sheet --- */
.overlay {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(22,32,46,.5);
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
}
.overlay[hidden] { display: none; }
.sheet {
  background: var(--card); color: var(--ink);
  border-radius: 14px; box-shadow: var(--shadow);
  width: 100%; max-width: 440px; max-height: 92dvh; overflow-y: auto;
  padding: 22px;
}
.sheet h2 {
  font-family: var(--serif); font-weight: 600; font-size: 1.35rem; margin: 0 0 4px;
}
.sheet .lede { color: var(--muted); font-size: .9rem; margin: 0 0 18px; }

.field { margin-bottom: 14px; }
.field label { display: block; font-size: .78rem; font-weight: 700; letter-spacing:.04em; margin-bottom: 5px; color: var(--ink); }
.field input, .field select, .field textarea {
  width: 100%; font-family: var(--sans); font-size: .95rem;
  padding: 10px 12px; border: 1px solid var(--rule); border-radius: 8px;
  background: #fff; color: var(--ink);
}
.field textarea { min-height: 74px; resize: vertical; }
.field .hint { font-size: .72rem; color: var(--muted); margin-top: 4px; }
.field.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.field.grid2 > div { min-width: 0; }

.color-grid { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.color-swatch {
  width: 30px; height: 30px; border-radius: 7px; cursor: pointer;
  border: 2px solid transparent; position: relative;
}
.color-swatch[aria-pressed="true"] { border-color: var(--ink); }
.color-swatch[aria-pressed="true"]::after {
  content:"✓"; position:absolute; inset:0; display:grid; place-items:center;
  color:#fff; font-size:14px; font-weight:700;
}
.color-swatch.taken { opacity: .3; cursor: not-allowed; }

.warn-box {
  background: #FFF4F4; border: 1px solid #E9BFC0; color: #7a2126;
  border-radius: 8px; padding: 9px 11px; font-size: .76rem; margin: 10px 0 4px;
  display: flex; gap: 8px;
}
.warn-box b { font-weight: 700; }

.sheet-actions { display: flex; gap: 10px; margin-top: 20px; }
.sheet-actions .btn { flex: 1; }
.sheet-actions .spacer { flex: 1; }

.form-error {
  color: var(--vermilion); font-size: .82rem; margin-top: 10px; min-height: 1em;
}

/* Stop location picker */
.locpick {
  border: 1px dashed var(--rule); border-radius: 8px; padding: 10px;
  font-size: .8rem; color: var(--muted); text-align: center;
}
.locpick.set { border-style: solid; color: var(--ink); background: #f4f7fb; }

/* --- Detail / stop popup contents (rendered in panel or leaflet popup) --- */
.stop-detail h3 { font-family: var(--serif); margin: 0 0 2px; font-size: 1.05rem; }
.stop-detail .jp-name {
  font-family: var(--serif); font-size: 1.15rem; color: var(--indigo);
  margin: 2px 0 1px; user-select: all; -webkit-user-select: all; line-height: 1.3;
}
.stop-detail .jp-hint { font-size: .64rem; color: var(--muted); margin-bottom: 6px; }
.stop-detail .meta { font-family: var(--mono); font-size: .72rem; color: var(--muted); margin-bottom: 6px; }
.stop-detail .price { font-size: .8rem; color: var(--ink); margin: 2px 0 6px; font-weight: 500; }
.stop-detail .notes { font-size: .85rem; white-space: pre-wrap; }
.stop-detail .wiki-link {
  display: inline-block; margin-top: 8px; font-size: .8rem; font-weight: 600;
  color: var(--indigo); text-decoration: none; border-bottom: 1px solid var(--indigo);
}
.stop-detail .wiki-link:hover { color: var(--vermilion); border-color: var(--vermilion); }
.booked-badge {
  display: inline-block; background: #E7F3EC; color: #1B6B3A;
  border: 1px solid #B7DEC4; border-radius: 999px;
  font-size: .7rem; font-weight: 700; letter-spacing: .02em;
  padding: 3px 9px; margin: 0 0 6px;
}
.stop-detail .book-link {
  display: inline-block; margin-top: 8px; margin-left: 12px; font-size: .8rem; font-weight: 600;
  color: var(--vermilion); text-decoration: none; border-bottom: 1px solid var(--vermilion);
}
.stop-detail .book-link.done { color: #1B6B3A; border-color: #1B6B3A; }
.stop-detail .book-link:hover { filter: brightness(1.1); }
.pin-lock {
  position: absolute; top: -7px; right: -7px; transform: rotate(45deg);
  font-size: 11px; line-height: 1; filter: drop-shadow(0 1px 1px rgba(0,0,0,.4));
}
.pin-glyph {
  position: absolute; top: -8px; left: -8px; transform: rotate(45deg);
  font-size: 12px; line-height: 1; filter: drop-shadow(0 1px 1px rgba(0,0,0,.45));
}
.check-row { display: flex; align-items: center; gap: 9px; font-weight: 500; cursor: pointer; }
.check-row input { width: 18px; height: 18px; flex: none; accent-color: var(--indigo); }

/* proposed badge in popup */
.proposed-badge {
  display: inline-block; background: #FFF6E0; color: #8a5a00;
  border: 1px solid #EBD599; border-radius: 999px;
  font-size: .7rem; font-weight: 700; padding: 3px 9px; margin: 0 6px 6px 0;
}
/* who's-in row */
.whos-in { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; margin-top: 8px; }
.whos-in-label { font-size: .72rem; color: var(--muted); margin-right: 2px; }
.whos-in-dot {
  width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center;
  color: #fff; font-family: var(--mono); font-size: .6rem; font-weight: 700;
  box-shadow: 0 0 0 1.5px #fff;
}

/* geocoding search */
.geo-search { display: flex; gap: 8px; }
.geo-search input {
  flex: 1; min-width: 0; font-family: var(--sans); font-size: .95rem;
  padding: 10px 12px; border: 1px solid var(--rule); border-radius: 8px; background: #fff; color: var(--ink);
}
.geo-search .btn { flex: none; }
.geo-results {
  list-style: none; margin: 6px 0 0; padding: 0; border: 1px solid var(--rule);
  border-radius: 8px; overflow: hidden; max-height: 240px; overflow-y: auto; background: #fff;
}
.geo-result { padding: 9px 11px; cursor: pointer; border-bottom: 1px solid var(--rule); display: block; }
.geo-result:last-child { border-bottom: 0; }
.geo-result:hover, .geo-result:focus { background: rgba(18,51,107,.07); outline: none; }
.geo-name { display: block; font-weight: 600; font-size: .88rem; }
.geo-addr { display: block; font-size: .72rem; color: var(--muted); margin-top: 1px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.geo-loading { padding: 10px 11px; font-size: .8rem; color: var(--muted); }

/* proposed marker: hollow/dashed ring */
.pin.proposed { border-style: dashed; box-shadow: 0 0 0 2px #FFF6E0, 0 2px 5px rgba(0,0,0,.35); }
.pin-count {
  position: absolute; bottom: -6px; right: -6px; transform: rotate(45deg);
  background: #fff; color: var(--ink); border: 1.5px solid currentColor;
  border-radius: 999px; min-width: 15px; height: 15px; padding: 0 3px;
  font-family: var(--mono); font-size: 9px; font-weight: 700; line-height: 13px; text-align: center;
}
.stop-detail .by { font-size: .72rem; color: var(--muted); margin-top: 8px; }
.stop-detail .actions { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }

/* English name labels on markers (readable over Japanese base tiles) */
.leaflet-tooltip.stop-label {
  background: rgba(255,255,255,.9); border: 1px solid var(--rule); color: var(--ink);
  font-family: var(--sans); font-weight: 600; font-size: .72rem; padding: 1px 6px;
  border-radius: 5px; box-shadow: 0 1px 3px rgba(0,0,0,.2); white-space: nowrap;
}
.leaflet-tooltip.stop-label::before { display: none; } /* no callout arrow */
/* only show once zoomed into a region; keep the country view clean */
body:not(.labels-on) .leaflet-tooltip.stop-label { display: none; }
/* decluttering hides labels that would overlap a higher-priority one */
.leaflet-tooltip.stop-label.label-hidden { display: none !important; }

/* leaflet popup restyle */
.leaflet-popup-content-wrapper { border-radius: 10px; }
.leaflet-popup-content { margin: 12px 14px; font-family: var(--sans); }

/* Toast */
.toast {
  position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%);
  background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 8px;
  font-size: .85rem; z-index: 2000; box-shadow: var(--shadow); max-width: 90vw;
}
.toast[hidden] { display: none; }

/* Empty state */
.empty-invite {
  border: 1px dashed var(--rule); border-radius: 10px; padding: 14px;
  font-size: .86rem; color: var(--muted); background: #fff;
}
.empty-invite b { color: var(--ink); }

/* mobile view toggle (hidden on desktop) */
.view-toggle { display: none; }

/* --------- Responsive: mobile first stacking --------- */
@media (max-width: 820px) {
  /* Stacked layout: let the whole page scroll instead of the panel internally. */
  .app { height: auto; min-height: 100dvh; overflow: visible; }
  .main { grid-template-columns: 1fr; overflow: visible; }
  .panel {
    border-right: 0; border-bottom: 1px solid var(--rule);
    max-height: none; order: 2; overflow-y: visible;
  }
  .map-wrap { order: 1; height: 46dvh; min-height: 300px; }
  #map { position: absolute; }
  .brand .dates { display: none; }
  .view-toggle {
    display: inline-flex; position: fixed; z-index: 600; bottom: 16px; right: 16px;
    box-shadow: var(--shadow);
  }
  /* When "list only" active, hide map area */
  body.list-only .map-wrap { display: none; }
  body.list-only .panel { order: 1; }
}

/* --------- Print: itinerary as a clean list by person, no map --------- */
@media print {
  .topbar, .view-toggle, .map-wrap, #map, .btn, .roster-row .eye,
  .overlay, .toast, .map-note { display: none !important; }
  .app, .main, .panel { display: block; }
  .panel { border: 0; overflow: visible; }
  body { background: #fff; font-size: 11pt; }
  #rail { display: none; }
  .print-itinerary { display: block !important; }
}
.print-itinerary { display: none; }
.print-itinerary h2 { font-family: var(--serif); border-bottom: 2px solid var(--ink); padding-bottom:4px; }
.print-itinerary .p-group { margin-bottom: 18px; page-break-inside: avoid; }
.print-itinerary .p-name { font-weight: 700; font-size: 1.05rem; margin-bottom: 6px; }
.print-itinerary .p-stop { margin: 0 0 8px; padding-left: 12px; border-left: 3px solid var(--rule); }
.print-itinerary .p-stop .n { font-weight: 600; }
.print-itinerary .p-stop .d { font-family: var(--mono); font-size: 9pt; color:#444; }

/* ============================ discussion ============================ */
/* pin badge: bottom-left shoulder (stars sit bottom-right). Red = unread for me. */
.pin-talk {
  position: absolute; bottom: -6px; left: -6px; transform: rotate(45deg);
  background: var(--indigo); color: #fff; border: 1.5px solid #fff;
  border-radius: 999px; min-width: 15px; height: 15px; padding: 0 3px;
  font-family: var(--mono); font-size: 9px; font-weight: 700; line-height: 12px; text-align: center;
  box-shadow: 0 1px 2px rgba(0,0,0,.3);
}
.pin-talk.new { background: var(--vermilion); animation: talk-pulse 2.2s ease-out infinite; }
@keyframes talk-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(193,39,45,.55); }
  70%  { box-shadow: 0 0 0 7px rgba(193,39,45,0); }
  100% { box-shadow: 0 0 0 0 rgba(193,39,45,0); }
}

/* proposed-list row: bubble button + unread accent bar */
.pf-talk {
  flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 3px;
  min-width: 34px; padding: 0 7px; border: 1px solid var(--rule); border-radius: 8px;
  background: var(--card); color: var(--indigo); font-family: var(--sans); font-size: .85rem;
  font-weight: 700; cursor: pointer; position: relative;
}
.pf-talk:hover { border-color: var(--indigo); background: rgba(18,51,107,.06); }
.pf-talk-ic { font-size: .9rem; line-height: 1; filter: grayscale(1); opacity: .45; }
.pf-talk.on .pf-talk-ic { filter: none; opacity: 1; }
.pf-talk.on { border-color: rgba(18,51,107,.45); background: rgba(18,51,107,.06); }
.pf-talk-n { font-family: var(--mono); font-size: .66rem; color: var(--indigo); }
.pf-talk.new { border-color: var(--vermilion); background: #FDF0F0; }
.pf-talk.new .pf-talk-n { color: var(--vermilion); }
.pf-talk.new::after {
  content: ""; position: absolute; top: -4px; right: -4px; width: 9px; height: 9px;
  border-radius: 50%; background: var(--vermilion); border: 1.5px solid #fff;
}
.pf-item.has-talk .pf-main { border-color: rgba(18,51,107,.35); }
.pf-item.unread .pf-main { box-shadow: inset 3px 0 0 var(--vermilion); border-color: rgba(193,39,45,.45); }

/* chips */
.pf-chip-new { border-color: var(--vermilion); color: var(--vermilion); }
.pf-chip-new::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--vermilion); }
.pf-chip-new.active { background: var(--vermilion); border-color: var(--vermilion); color: #fff; }
.pf-chip-new.active::before { background: #fff; }
.pf-chip-talk { border-color: rgba(18,51,107,.45); }

/* latest chatter */
.recent {
  background: var(--card); border: 1px solid var(--rule); border-radius: 10px;
  padding: 10px 10px 6px; margin-bottom: 12px;
}
.recent-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  font-family: var(--sans); font-size: .68rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted); margin: 0 2px 6px;
}
.recent-unread {
  text-transform: none; letter-spacing: 0; font-family: var(--mono); font-size: .64rem;
  color: var(--vermilion); font-weight: 700;
}
.recent-row {
  display: flex; align-items: flex-start; gap: 8px; width: 100%; text-align: left;
  background: none; border: 0; border-top: 1px solid var(--rule); padding: 7px 2px;
  cursor: pointer; color: var(--ink); font-family: var(--sans);
}
.recent-row:first-of-type { border-top: 0; }
.recent-row:hover .recent-stop { color: var(--indigo); text-decoration: underline; }
.recent-row.new { box-shadow: inset 3px 0 0 var(--vermilion); padding-left: 8px; }
.recent-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.recent-line { font-size: .76rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.recent-line b { color: var(--ink); font-weight: 600; }
.recent-snip {
  font-size: .82rem; margin-top: 1px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.recent-when { flex: none; font-family: var(--mono); font-size: .64rem; color: var(--muted); padding-top: 2px; }

/* thread (inside popup and sheet) */
.thread { margin-top: 12px; border-top: 1px solid var(--rule); padding-top: 10px; }
.thread-head {
  display: flex; align-items: center; gap: 6px; font-family: var(--sans);
  font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted);
  margin-bottom: 6px;
}
.thread-n {
  font-family: var(--mono); font-size: .64rem; background: var(--indigo); color: #fff;
  border-radius: 999px; padding: 0 6px; line-height: 15px;
}
.thread-list { max-height: 190px; overflow-y: auto; display: flex; flex-direction: column; gap: 7px; padding-right: 2px; }
.thread-sheet .thread-list { max-height: 48dvh; }
.thread-empty { font-size: .8rem; color: var(--muted); font-style: italic; padding: 2px 0 4px; }
.cmt { display: flex; gap: 8px; align-items: flex-start; padding: 2px 0 2px 4px; border-radius: 6px; }
.cmt.new { background: #FDF3F3; box-shadow: inset 3px 0 0 var(--vermilion); }
.cmt-dot {
  flex: none; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center;
  color: #fff; font-family: var(--mono); font-size: .56rem; font-weight: 700; box-shadow: 0 0 0 1.5px #fff;
  margin-top: 1px;
}
.cmt-body { flex: 1; min-width: 0; }
.cmt-head { display: flex; align-items: baseline; gap: 6px; font-size: .76rem; }
.cmt-head b { font-weight: 600; }
.cmt-when { font-family: var(--mono); font-size: .62rem; color: var(--muted); }
.cmt-del {
  margin-left: auto; background: none; border: 0; color: var(--muted); cursor: pointer;
  font-size: 1rem; line-height: 1; padding: 0 4px;
}
.cmt-del:hover { color: var(--vermilion); }
.cmt-text { font-size: .84rem; white-space: pre-wrap; word-break: break-word; line-height: 1.35; }
.thread-form { display: flex; gap: 6px; align-items: flex-end; margin-top: 9px; }
.thread-input {
  flex: 1; min-width: 0; font-family: var(--sans); font-size: .88rem; line-height: 1.3;
  padding: 7px 9px; border: 1px solid var(--rule); border-radius: 8px; background: #fff; color: var(--ink);
  resize: none;
}
.thread-input:focus { border-color: var(--indigo); }
.thread .btn.block { width: 100%; margin-top: 8px; }

/* the sheet variant */
.thread-sheet { max-width: 480px; }
.thread-sheet-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.thread-sheet-head h2 { margin-bottom: 2px; }
.thread-sub { font-family: var(--mono); font-size: .7rem; color: var(--muted); }
.sheet-close {
  flex: none; background: none; border: 1px solid var(--rule); border-radius: 8px; width: 32px; height: 32px;
  font-size: 1.2rem; line-height: 1; color: var(--muted); cursor: pointer;
}
.sheet-close:hover { color: var(--ink); border-color: var(--indigo); }
.thread-sheet .thread { border-top: 0; margin-top: 8px; padding-top: 0; }
.thread-sheet .linklike { margin-top: 10px; }

/* ============================ chatter tab ============================ */
.tab-count.new { background: var(--vermilion); }
.panel-tab.active .tab-count.new { background: var(--vermilion); }
.ch-list { list-style: none; margin: 0; padding: 0; }
.ch-item { display: flex; align-items: stretch; gap: 4px; margin-bottom: 7px; }
.ch-main {
  flex: 1; min-width: 0; display: flex; align-items: flex-start; gap: 9px; text-align: left;
  background: var(--card); border: 1px solid var(--rule); border-radius: 8px;
  padding: 9px 10px; cursor: pointer; color: var(--ink); font-family: var(--sans);
}
.ch-main:hover { border-color: var(--indigo); background: rgba(18,51,107,.04); }
.ch-item.unread .ch-main { box-shadow: inset 3px 0 0 var(--vermilion); border-color: rgba(193,39,45,.45); }
.ch-main .pf-dot { margin-top: 2px; }
.ch-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ch-top { display: flex; align-items: baseline; gap: 8px; }
.ch-name { flex: 1; font-weight: 600; font-size: .88rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ch-when { flex: none; font-family: var(--mono); font-size: .62rem; color: var(--muted); }
.ch-meta { font-family: var(--mono); font-size: .62rem; color: var(--muted); margin-top: 1px; }
.ch-last {
  font-size: .78rem; margin-top: 4px; color: var(--ink);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.ch-last b { font-weight: 600; color: var(--muted); }
.ch-count {
  flex: none; align-self: center; display: flex; flex-direction: column; align-items: center; gap: 2px;
  font-size: .8rem; color: var(--indigo); padding-left: 4px;
}
.ch-count-n { font-family: var(--mono); font-size: .68rem; font-weight: 700; }
.ch-count.new { color: var(--vermilion); }
.ch-new {
  font-family: var(--mono); font-size: .56rem; font-weight: 700; color: #fff; background: var(--vermilion);
  border-radius: 999px; padding: 1px 5px; white-space: nowrap;
}
.ch-lock {
  flex: none; font-family: var(--mono); font-size: .58rem; font-weight: 700; letter-spacing: .04em;
  color: var(--indigo); background: rgba(18,51,107,.08); border-radius: 4px; padding: 1px 5px;
}
.ch-item.booked .ch-main { border-left: 3px solid var(--indigo); }
.ch-item.booked.unread .ch-main { box-shadow: inset 3px 0 0 var(--vermilion); border-left-color: var(--vermilion); }
.ch-last.quiet { color: var(--muted); font-style: italic; }
.ch-count.none { color: var(--muted); }