/* Phone first. Controls are at least 44px tall; trip sections sit in a bottom tab bar within thumb reach. */
:root {
  --bg:#f3f5f7; --card:#fff; --fg:#17212b; --muted:#5d6b78; --line:#d5dce3; --accent:#0f5c7a; --accent-fg:#fff;
  --ok:#1a7f37; --ok-bg:#dafbe1; --bad:#c62828; --bad-bg:#ffebe9; --warn:#8a5a00; --warn-bg:#fff4c9; --info-bg:#e1f1f8;
  --tabs-h:60px;
}
@media (prefers-color-scheme: dark) {
  :root { --bg:#10161c; --card:#19222b; --fg:#e6edf3; --muted:#9aa7b3; --line:#2c3944; --accent:#2a8fb5; --accent-fg:#fff;
    --ok:#56d364; --ok-bg:#12331c; --bad:#ff7b72; --bad-bg:#3d1513; --warn:#e3b341; --warn-bg:#3a2d05; --info-bg:#11303d; }
}
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; font:16px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, "Hiragino Sans", "Noto Sans JP", sans-serif;
  background:var(--bg); color:var(--fg); }
body.has-tabs { padding-bottom:calc(var(--tabs-h) + env(safe-area-inset-bottom)); }
a { color:var(--accent); text-decoration:none; }
h1 { font-size:1.45rem; margin:.4rem 0 .9rem; } h2 { font-size:1.1rem; margin:1.4rem 0 .5rem; }
.card h2:first-child { margin-top:0; }
main { max-width:960px; margin:0 auto; padding:.8rem; }
.narrow { max-width:540px; margin-left:auto; margin-right:auto; }
.muted { color:var(--muted); } .small { font-size:.86rem; } .big { font-size:1.1rem; } .grow { flex:1; min-width:0; }

header.top { background:var(--accent); color:var(--accent-fg); display:flex; align-items:center; gap:.6rem;
  padding:.3rem .8rem; padding-top:calc(.3rem + env(safe-area-inset-top)); min-height:52px; position:sticky; top:0; z-index:20; }
header.top a, header.top button.link { color:var(--accent-fg); }
.brand { font-weight:700; padding:.6rem .2rem; white-space:nowrap; }
.here { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; opacity:.9; }
.menu { margin-left:auto; display:flex; align-items:center; gap:.2rem; }
.menu a, .menu button.link { padding:.6rem .5rem; font-size:.95rem; white-space:nowrap; }
.menu form { margin:0; }
button.link { background:none; border:0; min-height:0; cursor:pointer; font:inherit; }

/* trip sections: bottom bar on phones, strip under the header on wide screens */
nav.tabs { position:fixed; left:0; right:0; bottom:0; z-index:20; display:flex; background:var(--card);
  border-top:1px solid var(--line); padding-bottom:env(safe-area-inset-bottom); }
nav.tabs a { flex:1; min-height:var(--tabs-h); display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.1rem; font-size:.78rem; color:var(--muted); }
nav.tabs a.on { color:var(--accent); font-weight:600; }
nav.tabs .ico { font-size:1.35rem; line-height:1; }
@media (min-width:800px) {
  body.has-tabs { padding-bottom:0; }
  nav.tabs { position:static; border-top:0; border-bottom:1px solid var(--line); justify-content:center; padding:0; }
  nav.tabs a { flex:0 0 auto; flex-direction:row; gap:.4rem; min-height:48px; padding:0 1.2rem; font-size:.95rem; }
  nav.tabs a.on { box-shadow:inset 0 -3px 0 var(--accent); }
  nav.tabs .ico { font-size:1.1rem; }
}

.card { display:block; background:var(--card); border:1px solid var(--line); border-radius:12px; padding:.9rem 1rem; margin:.6rem 0; color:inherit; }
.list .card { margin:.5rem 0; }
.row { display:flex; flex-wrap:wrap; align-items:center; gap:.6rem; }
.row.head { margin-bottom:.4rem; } .row.head h1 { margin:0; }
a.card.trip { display:flex; align-items:center; gap:.6rem; min-height:64px; }
a.card:active { background:var(--info-bg); }
.empty { padding:2rem 1rem; text-align:center; color:var(--muted); border:1px dashed var(--line); border-radius:12px; }
.grid { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:.6rem; margin:.6rem 0; }
.grid .card { margin:0; }
@media (min-width:800px) { .grid { grid-template-columns:repeat(4, minmax(0, 1fr)); } }
.stat { display:flex; flex-direction:column; gap:.15rem; min-height:92px; }
.stat .label { font-size:.78rem; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); }
.stat .value { font-size:1.25rem; font-weight:650; overflow-wrap:anywhere; }
.stat .soon { font-size:.85rem; color:var(--muted); font-style:italic; }

.hero { text-align:center; background:var(--accent); color:var(--accent-fg); border-radius:14px; padding:1.2rem 1rem; margin:.2rem 0 .6rem; }
.hero .count { font-size:3rem; font-weight:750; line-height:1; }
.hero .count-label { opacity:.9; margin-bottom:.6rem; }
.hero h1 { margin:.2rem 0; font-size:1.3rem; } .hero p { margin:0; opacity:.9; }

.pill { display:inline-block; padding:.1rem .6rem; border-radius:999px; font-size:.82rem; background:var(--line); color:var(--fg); white-space:nowrap; }
.pill.ok { background:var(--ok-bg); color:var(--ok); } .pill.bad { background:var(--bad-bg); color:var(--bad); } .pill.warn { background:var(--warn-bg); color:var(--warn); }
.flash, .error { padding:.7rem .9rem; border-radius:10px; margin:.5rem 0; }
.flash { background:var(--info-bg); } .error { background:var(--bad-bg); color:var(--bad); }

/* forms: 16px text stops iOS zooming in on focus */
label { display:flex; flex-direction:column; gap:.25rem; margin:.7rem 0; font-size:.92rem; color:var(--muted); }
label .hint { font-size:.8rem; }
label.check { flex-direction:row; align-items:center; gap:.6rem; color:var(--fg); min-height:44px; }
label.check input { width:22px; height:22px; min-height:0; flex:none; }
input, select, button, .btn { font:inherit; font-size:16px; min-height:44px; padding:.5rem .8rem; border:1px solid var(--line);
  border-radius:10px; background:var(--card); color:var(--fg); }
input, select { width:100%; }
button, .btn { cursor:pointer; display:inline-flex; align-items:center; justify-content:center; font-weight:550; touch-action:manipulation; }
button.primary, .btn.primary { background:var(--accent); border-color:var(--accent); color:var(--accent-fg); }
button.big { width:100%; min-height:50px; font-size:1.05rem; }
button.danger { color:var(--bad); border-color:var(--bad); }
.two { display:grid; grid-template-columns:1fr 1fr; gap:.6rem; }
@media (max-width:420px) { .two { grid-template-columns:1fr; gap:0; } }
.actions { display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; margin:0; }
.actions form { margin:0; } .actions select { width:auto; } .actions .big { flex:1; width:auto; }
form.card .actions { margin-top:.8rem; }
.linkbox { border-color:var(--accent); background:var(--info-bg); }
.copyrow { display:flex; gap:.5rem; } .copyrow input { flex:1; min-width:0; font-size:.85rem; }
.or { display:flex; align-items:center; gap:.6rem; color:var(--muted); font-size:.85rem; margin:.9rem 0 .6rem; }
.or::before, .or::after { content:""; flex:1; border-top:1px solid var(--line); }
.btn.big { width:100%; min-height:50px; font-size:1.05rem; }

/* ---- phase 2: forms, flights, plan, day timeline ---- */
fieldset { border:0; padding:0; margin:0; min-width:0; }
textarea { font:inherit; font-size:16px; width:100%; padding:.5rem .8rem; border:1px solid var(--line); border-radius:10px; background:var(--card); color:var(--fg); }
.three { display:grid; grid-template-columns:minmax(0, 1.2fr) minmax(0, 1.2fr) minmax(0, .8fr); gap:.4rem; }
.three input { padding-left:.5rem; padding-right:.3rem; }
details { border-top:1px solid var(--line); margin-top:.6rem; padding-top:.2rem; }
summary { min-height:44px; display:flex; align-items:center; font-weight:600; cursor:pointer; }
.daypick { display:flex; flex-wrap:wrap; gap:.4rem; }
.daypick label { margin:0; flex-direction:row; }
.daypick input { position:absolute; opacity:0; width:1px; height:1px; min-height:0; }
.daypick span { display:inline-flex; align-items:center; justify-content:center; min-width:48px; min-height:44px; border:1px solid var(--line); border-radius:10px; color:var(--fg); }
.daypick input:checked + span { background:var(--bad-bg); border-color:var(--bad); color:var(--bad); font-weight:600; }
.daypick input:focus-visible + span { outline:2px solid var(--accent); }
.savebar { margin-top:1rem; }
.warnbox { border-color:var(--warn); background:var(--warn-bg); color:var(--warn); }
.warnbox a { color:inherit; text-decoration:underline; }
.navrow { display:flex; align-items:center; gap:.8rem; min-height:60px; }
.navrow .ico { font-size:1.4rem; } .navrow .grow { display:flex; flex-direction:column; }
.center { text-align:center; } .bad { color:var(--bad); }
.card.gap { border-color:var(--bad); }

.flight .legs { display:grid; grid-template-columns:1fr auto 1fr; gap:.6rem; align-items:center; margin:.5rem 0; }
.flight .legs > div:last-child { text-align:right; }
.flight .code { font-size:1.5rem; font-weight:700; letter-spacing:.03em; }
.flight .when { font-size:1.15rem; font-weight:600; } .zone { font-size:.8rem; font-weight:500; color:var(--muted); }
.flight .mid { display:flex; flex-direction:column; align-items:center; } .flight .line { color:var(--accent); font-size:1.2rem; }

.days { display:grid; gap:.6rem; grid-template-columns:1fr; }
@media (min-width:700px) { .days { grid-template-columns:repeat(2, minmax(0, 1fr)); } }
@media (min-width:1000px) { .days { grid-template-columns:repeat(3, minmax(0, 1fr)); } }
.daycard { margin:0; display:flex; flex-direction:column; gap:.3rem; scroll-margin-top:60px; }
.daycard.today { border-color:var(--accent); box-shadow:0 0 0 2px var(--accent); }
.daynum { font-size:.75rem; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); }
.mini { list-style:none; margin:.2rem 0; padding:0; flex:1; }
.mini li { display:flex; gap:.5rem; padding:.12rem 0; font-size:.92rem; }
.mini .t { width:2.9rem; flex:none; font-variant-numeric:tabular-nums; color:var(--muted); }
.mini .grow { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mini .k-flight .grow { color:var(--accent); font-weight:600; }
.sleep { font-size:.88rem; border-top:1px solid var(--line); padding-top:.35rem; }
.sleep.bad { font-weight:600; }

.daynav { display:flex; align-items:center; gap:.5rem; margin-bottom:.4rem; }
.daynav h1 { margin:0; font-size:1.25rem; } .daynav .btn { min-width:48px; font-size:1.4rem; } .btn.ghost { opacity:.25; }
.sleepline { display:flex; gap:.7rem; align-items:flex-start; } .sleepline .ico { font-size:1.4rem; }
.cityform { display:flex; flex-wrap:wrap; gap:.5rem; align-items:flex-end; margin-top:.6rem; border-top:1px solid var(--line); }
.cityform label { margin:.5rem 0 0; flex:1 1 8rem; } .cityform .grow { flex:2 1 12rem; }
.entry { border-left:5px solid var(--line); } .entry .pill, .block .pill { margin-top:.2rem; }

/* category colours: left edge of entries and timeline blocks */
.c-sight { --cat:#2a8fb5; } .c-food { --cat:#d9822b; } .c-shopping { --cat:#b0509e; } .c-transport { --cat:#5d6b78; }
.c-experience { --cat:#3a9d5d; } .c-rest { --cat:#8a7fd1; } .c-other { --cat:#8d99a5; }
.k-flight { --cat:var(--accent); } .k-checkin, .k-checkout { --cat:#b08900; }
.entry, .block { border-left-color:var(--cat, var(--line)); }

/* The timeline works without JS as a plain list; app.js adds .live and places the blocks by time. */
.timeline { position:relative; display:flex; flex-direction:column; gap:.4rem; }
.block { display:block; background:var(--card); border:1px solid var(--line); border-left:5px solid var(--cat, var(--line));
  border-radius:8px; padding:.3rem .5rem; color:inherit; overflow:hidden; font-size:.92rem; line-height:1.25; }
.block .t { font-variant-numeric:tabular-nums; color:var(--muted); font-size:.82rem; }
.block .sub { display:block; }
.block.clash { border-color:var(--bad); background:var(--bad-bg); }
.block.k-flight { background:var(--info-bg); }
.timeline.live { display:block; background:var(--card); border:1px solid var(--line); border-radius:12px; }
.timeline.live .block { position:absolute; box-shadow:0 1px 2px rgba(0,0,0,.08); }
.timeline .hour { position:absolute; left:0; right:0; border-top:1px solid var(--line); font-size:.72rem; color:var(--muted);
  padding:.1rem .4rem; font-variant-numeric:tabular-nums; pointer-events:none; }

.fab { position:fixed; right:1rem; bottom:calc(var(--tabs-h) + env(safe-area-inset-bottom) + .8rem); z-index:15; background:var(--accent);
  color:var(--accent-fg); border-radius:999px; padding:.8rem 1.2rem; font-weight:650; box-shadow:0 3px 10px rgba(0,0,0,.3); min-height:52px; display:inline-flex; align-items:center; }
@media (min-width:800px) { .fab { bottom:1.2rem; } }
.checks { margin:.3rem 0 0; padding-left:1.1rem; }

/* ---- phase 3: map and location picker ---- */
nav.tabs a { min-width:0; }
@media (max-width:420px) { nav.tabs a { font-size:.7rem; } }
.picker { border:1px solid var(--line); border-radius:12px; padding:.6rem .7rem; margin:.7rem 0; }
.picker > label { margin-top:0; }
.picker-map { height:240px; border-radius:10px; margin:.5rem 0; background:var(--bg); z-index:0; }
.picker-results { list-style:none; margin:0; padding:0; }
.picker-results .result { width:100%; display:flex; flex-direction:column; align-items:flex-start; text-align:left; gap:.1rem;
  margin:.3rem 0; padding:.5rem .7rem; font-weight:400; }
.picker-msg { margin:.4rem 0 0; min-height:1.2em; }
.picker button.link { color:var(--bad); min-height:44px; padding:0 .4rem; }

.pin { display:flex; align-items:center; justify-content:center; border-radius:50%; border:2px solid #fff; color:#fff; font-weight:700;
  font-size:13px; box-shadow:0 1px 4px rgba(0,0,0,.45); background:var(--dc, #0f5c7a); }
.pin.bed { background:#fff; border-color:#b08900; font-size:17px; }
.pin.air { background:#0f5c7a; font-size:13px; }
.pin.pick { background:#d9534f; }
.dc0 { --dc:#1f77b4; } .dc1 { --dc:#d9534f; } .dc2 { --dc:#2e9d57; } .dc3 { --dc:#b0509e; } .dc4 { --dc:#e08a1e; }
.dc5 { --dc:#17a2b8; } .dc6 { --dc:#7b61c4; } .dc7 { --dc:#8c6d31; } .dc8 { --dc:#d6336c; } .dc9 { --dc:#5d6b78; }
.dot, .num { display:inline-flex; align-items:center; justify-content:center; flex:none; width:22px; height:22px; border-radius:50%;
  background:var(--dc, transparent); color:#fff; font-size:.75rem; font-weight:700; }
.dot.bed { background:none; }

.mapbar { display:flex; gap:.5rem; align-items:center; margin-bottom:.5rem; }
.mapbar select { flex:1; min-width:0; }
.seg { display:flex; flex:none; border:1px solid var(--line); border-radius:10px; overflow:hidden; }
.seg button { border:0; border-radius:0; min-width:56px; } .seg button.on { background:var(--accent); color:var(--accent-fg); }
/* phone: map or list, switched with the buttons; fills the screen between the bars */
.mapcols { --maph:calc(100dvh - 52px - var(--tabs-h) - 5.6rem - env(safe-area-inset-bottom) - env(safe-area-inset-top)); }
#map { height:var(--maph); min-height:320px; border-radius:12px; border:1px solid var(--line); z-index:0; }
.mapcols[data-view="map"] .maplist, .mapcols[data-view="list"] #map { display:none; }
@media (min-width:900px) {
  main:has(.mapcols) { max-width:1400px; }
  .seg { display:none; }
  .mapcols { display:grid; grid-template-columns:340px 1fr; gap:.8rem; --maph:calc(100dvh - 52px - 48px - 5.6rem); }
  .mapcols[data-view] .maplist, .mapcols[data-view] #map { display:block; }
  .maplist { height:var(--maph); overflow-y:auto; }
}
.mday { background:var(--card); border:1px solid var(--line); border-radius:12px; margin-bottom:.5rem; overflow:hidden; }
.mday.off { opacity:.45; }
.mday-head { width:100%; display:flex; align-items:center; gap:.5rem; justify-content:flex-start; text-align:left; border:0; border-radius:0;
  min-height:48px; padding:.4rem .7rem; font-weight:400; background:none; }
.mday ul { list-style:none; margin:0; padding:0 .7rem .5rem; }
.mday .stop { width:100%; display:flex; align-items:center; gap:.5rem; justify-content:flex-start; text-align:left; border:0; min-height:44px;
  padding:.2rem 0; font-weight:400; background:none; }
.pop { min-width:180px; font:15px/1.35 system-ui, sans-serif; } .pop-actions { display:flex; gap:.4rem; margin-top:.5rem; }
.pop .btn { min-height:40px; padding:.3rem .8rem; } .leaflet-popup-content .btn.primary { color:var(--accent-fg); }
.leaflet-container { font:inherit; } .leaflet-popup-content-wrapper, .leaflet-popup-tip { background:var(--card); color:var(--fg); }