/* Japan Trip Companion - styles. Autumn-Japan identity (see DESIGN.md).
   Bold, client-facing register: sumi ink + torii red + autumn gold on warm washi. */

:root {
  --sumi: #1a1512;
  --torii: #b7282e;
  --torii-deep: #8f1d22;
  --gold: #bd7d24;
  --gold-soft: #d8a24a;
  --washi: #f6efe1;
  --card: #fffdf8;
  --border: #e8ddc7;
  --line: #efe6d3;
  --ink: #2a211b;
  --muted: #726355;
  --moss: #5c6f4a;
  --maxw: 620px;
  --tap: 46px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: hidden; }

body {
  margin: 0;
  background: var(--washi);
  font-family: 'Heebo', 'Segoe UI', 'Arial Hebrew', Arial, sans-serif;
  color: var(--ink);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  padding-bottom: 92px;
}

a { color: var(--torii); }
a:hover { color: var(--torii-deep); }

/* LTR runs inside RTL (codes, dates, phones, addresses) */
.ltr { direction: ltr; unicode-bidi: isolate; }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ===== Sticky top bar ===== */
.topbar { position: sticky; top: 0; z-index: 50; background: var(--card); border-bottom: 1px solid var(--border); box-shadow: 0 2px 8px rgba(26,21,18,0.1); }
.topbar-inner { max-width: var(--maxw); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 14px; }
.brand { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 16px; color: var(--sumi); letter-spacing: -0.3px; }
.brand-mark { display: grid; place-items: center; flex: none; }
.topbar-right { display: flex; align-items: center; gap: 7px; }
.net-pill { font-weight: 700; font-size: 12px; border-radius: 999px; padding: 4px 10px; white-space: nowrap; }
.net-pill.online { background: #e7efe0; color: var(--moss); }
.net-pill.offline { background: #f3e4c9; color: var(--gold); }
.status-pill { background: var(--torii); color: #fff; font-weight: 700; font-size: 13px; border-radius: 999px; padding: 5px 12px; white-space: nowrap; }
.icon-btn { min-width: 40px; min-height: 40px; border-radius: 50%; background: #fff; border: 1.5px solid var(--line); color: var(--sumi); font-size: 17px; cursor: pointer; display: grid; place-items: center; font-family: inherit; }
.icon-btn:active { transform: scale(0.94); }
.icon-btn.copied { background: var(--moss); color: #fff; border-color: var(--moss); }
.lang-toggle { min-width: 38px; min-height: 32px; border-radius: 999px; background: var(--sumi); color: #fff; border: none; font-family: inherit; font-weight: 800; font-size: 13px; letter-spacing: 0.3px; cursor: pointer; padding: 0 11px; }
.lang-toggle:active { transform: scale(0.94); }
.progwrap { height: 4px; background: #e6dcc6; }
.progbar { height: 100%; width: 0; background: linear-gradient(90deg, var(--torii), var(--gold)); border-radius: 0 3px 3px 0; transition: width 0.6s; }

/* ===== Hero (real free-license photo + drifting sakura petals) ===== */
.hero { position: relative; overflow: hidden; height: clamp(300px, 46vw, 470px); background: var(--sumi); }
.hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 42%; animation: kenburns 26s ease-in-out infinite alternate; }
@keyframes kenburns { from { transform: scale(1.03); } to { transform: scale(1.13) translateY(-1.5%); } }
.hero-petals { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 1; }
.petal { position: absolute; top: -8%; width: 12px; height: 12px; background: radial-gradient(circle at 32% 30%, #ffe6ef, #f7a8c4 68%, #e98bb0); border-radius: 100% 0 100% 0; opacity: 0; will-change: transform, opacity; }
.petal.p1 { left: 10%; animation: petalfall 11s linear infinite; }
.petal.p2 { left: 24%; width: 9px; height: 9px; animation: petalfall 14s linear infinite 2s; }
.petal.p3 { left: 40%; animation: petalfall 9s linear infinite 1s; }
.petal.p4 { left: 55%; width: 10px; height: 10px; animation: petalfall 13s linear infinite 4s; }
.petal.p5 { left: 68%; animation: petalfall 12s linear infinite 3s; }
.petal.p6 { left: 82%; width: 8px; height: 8px; animation: petalfall 15s linear infinite 1.5s; }
.petal.p7 { left: 92%; animation: petalfall 10s linear infinite 5s; }
@keyframes petalfall {
  0% { transform: translateY(0) translateX(0) rotate(0deg); opacity: 0; }
  10% { opacity: 0.9; }
  50% { transform: translateY(240px) translateX(-26px) rotate(180deg); opacity: 0.8; }
  90% { opacity: 0.45; }
  100% { transform: translateY(500px) translateX(16px) rotate(360deg); opacity: 0; }
}
.hero-scrim { position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, rgba(0,0,0,0.7), rgba(0,0,0,0.15) 45%, rgba(0,0,0,0.25)); pointer-events: none; }
.hero-overlay { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; justify-content: flex-end; padding: 0 20px 22px; max-width: var(--maxw); margin: 0 auto; color: #fff; }
.hero-kicker { align-self: flex-start; font-weight: 700; font-size: 14px; letter-spacing: 1px; color: var(--gold-soft); text-transform: uppercase; margin-bottom: 8px; text-shadow: 0 1px 8px rgba(0,0,0,0.6); }
.hero-badge { display: inline-block; align-self: flex-start; border: 1.5px solid rgba(255,255,255,0.6); border-radius: 999px; padding: 5px 15px; font-size: 15px; font-weight: 600; margin-bottom: 10px; background: rgba(26,21,18,0.35); }
.hero h1 { font-weight: 800; font-size: clamp(44px, 13vw, 66px); line-height: 0.98; letter-spacing: -1px; margin: 0; text-shadow: 0 2px 16px rgba(0,0,0,0.5); }
.hero-sub { margin: 8px 0 0; font-size: 18px; font-weight: 700; color: var(--gold-soft); text-shadow: 0 1px 8px rgba(0,0,0,0.6); }
.hero-lede { margin: 5px 0 0; font-size: 15px; font-weight: 500; color: #f4ede0; text-shadow: 0 1px 8px rgba(0,0,0,0.6); }

/* ===== Live clocks (Japan + Israel, owner review item 1) ===== */
.clocks { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0 0 12px; }
.clock-chip { display: inline-flex; align-items: center; gap: 6px; background: #fbf3e3; border: 1.5px solid var(--line); border-radius: 999px; padding: 6px 13px; font-size: 13.5px; font-weight: 600; color: var(--ink); white-space: nowrap; }
.clock-hint { font-size: 12px; color: var(--muted); font-weight: 600; }

.container { max-width: var(--maxw); margin: 0 auto; padding: 0 16px; }

/* offset anchor jumps for the sticky header */
#weather, #flights, #map-sec, #bookings, #packing, #gallery, #emergency, #finale, .stop { scroll-margin-top: 74px; }

.section-title { font-weight: 800; font-size: 26px; color: var(--sumi); letter-spacing: -0.5px; margin: 26px 2px 2px; }

/* ===== Quick links ===== */
.quicklinks { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; padding: 14px 2px 4px; }
.quicklink { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 36px; background: #fff; border: 1.5px solid var(--line); border-radius: 999px; padding: 6px 13px; text-decoration: none; font-weight: 600; font-size: 13px; color: var(--ink); text-align: center; max-width: 100%; overflow-wrap: break-word; }
.quicklink:hover { border-color: var(--torii); }

/* ===== Install helper ===== */
.install-card { background: var(--card); border: 2px solid var(--torii); border-radius: 16px; padding: 16px 18px; margin: 14px 0 0; box-shadow: 0 4px 10px rgba(183,40,46,0.14), 0 18px 36px -18px rgba(26,21,18,0.4); }
.install-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.install-head--compact { align-items: center; }
.install-icon { flex: none; width: 34px; height: 34px; border-radius: 50%; background: #f3e4c9; display: grid; place-items: center; font-size: 19px; line-height: 1; color: var(--torii); }
.install-close { flex: none; width: 44px; height: 44px; border-radius: 50%; background: #f3e4c9; border: 1.5px solid var(--line); color: var(--sumi); font-size: 14px; cursor: pointer; display: grid; place-items: center; font-family: inherit; }
.install-close:active { transform: scale(0.94); }
.install-body { margin-top: 8px; }
.install-title { margin: 0 0 6px; font-weight: 800; font-size: 18px; color: var(--torii); }
.install-text { margin: 0; font-size: 16px; line-height: 1.6; color: var(--ink); }
.install-text--compact { margin: 0; font-size: 16px; font-weight: 700; color: var(--ink); flex: 1; }
.install-note { margin: 8px 0 0; font-size: 14px; color: var(--muted); }
.install-btn { margin-top: 12px; width: 100%; min-height: var(--tap); border-radius: 12px; background: var(--torii); color: #fff; border: none; font-weight: 700; font-size: 15px; cursor: pointer; font-family: inherit; display: flex; align-items: center; justify-content: center; }
.install-btn:active { transform: scale(0.98); }

/* ===== Card ===== */
.card { background: var(--card); border: 1px solid var(--border); border-radius: 16px; padding: 16px 18px; margin: 14px 0 0; box-shadow: 0 2px 5px rgba(26,21,18,0.07), 0 14px 30px -18px rgba(26,21,18,0.3); }
.card h2 { font-weight: 800; font-size: 25px; color: var(--sumi); letter-spacing: -0.5px; margin: 0 0 4px; }
.card .lede { margin: 0 0 12px; font-size: 14px; color: var(--muted); }
.accent-card { border: 2px solid var(--gold); background: linear-gradient(180deg, #fffdf8, #fdf6e8); }
.accent-card h2 { color: var(--gold); }

/* ===== Weather ===== */
/* Owner review round 4, item 5: the row already scrolled (overflow-x:auto) but
   the scrollbar was hidden and there was no other affordance, so the owner
   could not tell the strip was scrollable and had no mouse-drag on desktop.
   Root cause fix = a visible thin scrollbar + scroll-snap paging + an edge
   "peek" (padding-inline-end leaves the next card partially visible) - see
   wireWeatherScroll() in app.js for the drag/wheel progressive enhancement. */
.wx-row { display: flex; flex-wrap: nowrap; gap: 10px; overflow-x: auto; -webkit-overflow-scrolling: touch; padding: 2px 2px 10px; scroll-snap-type: inline mandatory; cursor: grab; }
.wx-row.dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.wx-row::-webkit-scrollbar { height: 6px; }
.wx-row::-webkit-scrollbar-track { background: var(--line); border-radius: 999px; }
.wx-row::-webkit-scrollbar-thumb { background: var(--gold-soft); border-radius: 999px; }
.wx-scroll-hint { margin: 0 0 6px; font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 4px; }
.wx-scroll-hint::after { content: '→'; display: inline-block; transform: scaleX(var(--wx-arrow-flip, 1)); }
[dir="rtl"] .wx-scroll-hint::after { --wx-arrow-flip: -1; }
.wx-city { flex: none; scroll-snap-align: start; text-decoration: none; background: #fbf3e3; border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; color: var(--ink); }
.wx-city .name { font-weight: 700; font-size: 15px; color: var(--torii); margin-bottom: 6px; text-align: center; }
.wx-days { display: flex; gap: 12px; }
.wx-day { display: flex; flex-direction: column; align-items: center; gap: 1px; }
.wx-day .d { font-size: 14px; color: var(--muted); }
.wx-day .i { font-size: 21px; line-height: 1.2; }
.wx-day .hi { font-size: 16px; font-weight: 700; }
.wx-day .lo { font-size: 14px; color: var(--muted); }

/* ===== Flights ===== */
.flight-card { background: #fbf3e3; border: 1.5px solid var(--line); border-radius: 14px; padding: 12px 14px; margin-bottom: 10px; }
.flight-top { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.flight-top b { color: var(--sumi); font-size: 16px; }
.flight-route { margin: 8px 0; font-weight: 700; color: var(--torii); font-size: 15px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.flight-route .arrow { color: var(--muted); }
.flight-times { display: flex; flex-wrap: wrap; gap: 8px; }
.ft { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 6px 12px; min-width: 92px; }
.ft .ftl { font-size: 12px; color: var(--muted); }
.ft .ltr { font-weight: 700; font-size: 14px; }
/* flight duration: force LTR + isolate each number so hours/minutes never flip in RTL */
.ft .dur { direction: ltr; unicode-bidi: isolate; white-space: nowrap; font-weight: 700; font-size: 14px; }
.ft .dur bdi { unicode-bidi: isolate; }
.flight-status { color: var(--muted); font-weight: 600; font-size: 13.5px; }
.flight-status.landed { color: var(--moss); font-weight: 700; }
.flight-status.delayed { color: var(--gold); font-weight: 700; }
.flight-status.cancelled { color: var(--torii); font-weight: 700; }
.flight-note { margin: 2px 0 0; font-size: 14px; color: var(--muted); }
.flight-note b { color: var(--sumi); }

/* ===== Journey map: real static basemap (Wikimedia Commons, see CREDITS.md) with
   an absolutely-positioned pin overlay projected from the image's documented
   lat/lon bounds (owner review round 3, item 2). ===== */
.jpmap-wrap { margin: 4px 0 6px; }
.jpmap-frame { position: relative; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.jpmap-img { display: block; width: 100%; height: auto; }
.jpmap-lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
/* Route polyline linking the 8 pins in itinerary order (owner review round 4,
   item 2). viewBox is 0-100 (percent-space), so stroke-width/dasharray are in
   the SAME units - no non-scaling-stroke (that would make 0.3 mean 0.3 real
   CSS px, effectively invisible). */
.jpmap-route { stroke: var(--torii); stroke-width: 0.7; fill: none; opacity: 0.85; stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: 2 1.4; }
.jpmap-pins { position: absolute; inset: 0; }
.jpmap-pin { position: absolute; transform: translate(-50%, -50%); text-decoration: none; cursor: pointer; }
/* Dot shows the trip DAY number (owner decision, round 3: day numbers, not
   location names - see renderMapPins() in app.js). No separate name-label
   pill any more; the always-visible .stations legend below is the
   day-number -> place-name key, and the dot's aria-label carries the name
   for screen readers. */
.jpmap-pin-dot { width: 26px; height: 26px; border-radius: 50%; background: var(--torii); color: #fff; border: 2px solid #fff; box-shadow: 0 2px 6px rgba(26,21,18,0.35); display: grid; place-items: center; font-weight: 800; font-size: 12px; font-family: 'Heebo', sans-serif; }
.jpmap-pin:hover .jpmap-pin-dot, .jpmap-pin:focus .jpmap-pin-dot { background: var(--gold); }
.map-approx-note { margin: 6px 2px 2px; font-size: 12px; color: var(--muted); }

/* ===== Journey map (station legend, horizontal wrapping chips) ===== */
/* Owner review round 4, item 3: legend read "a line left on Hebrew, too close to
   the borders, I don't know what the buttons are" - padding/text-align are now
   LOGICAL properties (start/end flip automatically per dir), the group has
   breathing room from the card edge + a top divider from the map above, and a
   caption (.stations-hint, in index.html) states the legend's purpose. */
.stations-hint { margin: 12px 2px 0; font-size: 12.5px; color: var(--muted); font-weight: 600; }
.stations { display: flex; flex-wrap: wrap; gap: 8px; padding-block: 6px; padding-inline: 2px; margin-block-start: 8px; border-block-start: 1px solid var(--line); }
/* Whole-trip route overview link (task #39, link 3) - sits after the stations
   legend, given its own top margin so it reads as a separate line, not part
   of the legend's own flex-wrap row. */
.map-route-ref { margin: 14px 2px 0; }
.station { position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding-block: 4px; padding-inline-start: 4px; padding-inline-end: 12px; text-decoration: none; color: var(--ink); background: #fff; border: 1.5px solid var(--line); border-radius: 999px; }
.station:hover { border-color: var(--torii); }
.st-dot { flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--torii); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 13px; }
.st-label { font-weight: 700; font-size: 14px; color: var(--sumi); display: flex; flex-direction: column; line-height: 1.2; text-align: start; }
.st-sub { font-weight: 500; font-size: 11px; color: var(--muted); }
.station:hover .st-label { color: var(--torii); }

/* ===== Day cards ===== */
.stop.today .stop-card { border: 3px solid var(--torii); box-shadow: 0 12px 32px -10px rgba(183,40,46,0.35); }
.stop-card { background: var(--card); border: 1px solid var(--border); border-radius: 16px; padding: 14px 18px; margin: 12px 0 0; box-shadow: 0 2px 5px rgba(26,21,18,0.07), 0 14px 30px -18px rgba(26,21,18,0.3); }
.today-banner { background: var(--torii); color: #fff; font-weight: 800; font-size: 15px; border-radius: 12px 12px 0 0; padding: 8px 14px; margin: -14px -18px 12px; text-align: center; }
.stop-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.stop-num { width: 30px; height: 30px; border-radius: 50%; background: var(--sumi); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 15px; flex: none; }
.stop-date { background: var(--gold); color: #fff; font-weight: 700; font-size: 13px; border-radius: 8px; padding: 3px 9px; }
.stop-wd { background: var(--line); color: var(--sumi); font-weight: 700; font-size: 13px; border-radius: 8px; padding: 3px 9px; }
.stop-card h3 { font-weight: 800; font-size: 22px; line-height: 1.25; color: var(--sumi); letter-spacing: -0.4px; margin: 10px 0 10px; }

/* per-day area photo (free-license, bundled local) */
.day-photo { margin: 0 0 12px; }
.day-photo img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 12px; border: 1px solid var(--border); background: #f1e9d6; }
.day-photo figcaption { margin: 6px 2px 0; font-size: 13px; color: var(--muted); font-weight: 600; }

/* "More Information" button (owner review round 4, item 4 CORRECTED) - a plain
   <button> (opens the shared #dayInfoSheet modal, wired in wireDayInfoSheet()),
   living in the .stop-links row next to Navigate. Secondary/outline style (NOT
   filled like .nav-primary) so Navigate stays the primary action. The old r3
   standalone .day-guide-btn (top-of-card area-guide link) is retired - its
   target now opens INSIDE the modal via .day-info-link below. */
.day-info-btn { display: inline-flex; align-items: center; gap: 5px; width: fit-content; min-height: 44px; padding: 6px 14px; background: #fff; border: 1.5px solid var(--torii); border-radius: 999px; font-weight: 700; font-size: 14px; color: var(--torii); font-family: inherit; cursor: pointer; }
.day-info-btn:hover { background: var(--torii); color: #fff; }
/* links inside the #dayInfoBody modal content (official info + area guide) */
.day-info-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.day-info-link { display: inline-flex; align-items: center; min-height: 40px; padding: 6px 13px; background: #fff; border: 1.5px solid var(--line); border-radius: 999px; font-weight: 600; font-size: 14px; text-decoration: none; color: var(--sumi); }
.day-info-link:hover { border-color: var(--torii); }

.lodging { background: #fbf3e3; border: 1.5px dashed var(--gold-soft); border-radius: 12px; padding: 10px 14px; margin: 0 0 12px; display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; font-size: 15px; }
.lodging.pending { border-style: dashed; border-color: var(--border); }
.lodging .lname { color: var(--torii); font-weight: 700; }
.lodging .larea { color: var(--ink); font-size: 13.5px; flex-basis: 100%; }
.lodging .lpend { color: var(--muted); font-weight: 600; font-size: 13px; flex-basis: 100%; }
.lodging .lnav, .lodging .lcall { font-weight: 600; text-decoration: none; background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 5px 11px; min-height: 38px; font-size: 14px; display: inline-flex; align-items: center; gap: 5px; color: var(--sumi); }

.daybook { background: #fdf1dc; border: 1px solid var(--gold-soft); border-radius: 12px; padding: 9px 12px; margin: 0 0 12px; display: flex; gap: 9px; align-items: flex-start; }
.daybook-ico { flex: none; }
.daybook-item { font-size: 14px; font-weight: 600; color: #8a5f1c; }

.acts { border: 1px solid var(--line); border-radius: 12px; padding: 2px 12px; margin-bottom: 10px; background: #fffdf8; }
.act { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start; padding: 9px 0; border-bottom: 1px dashed rgba(26,21,18,0.1); }
.act:last-child { border-bottom: none; }
/* Chip line-height matches .act-body's so the chip text and the body's FIRST LINE
   share a baseline (owner review item 6 - day 3 and others showed the chip floating
   above/below the transport text). Verified on multi-line rows (day 3, 6, 7, 11). */
.act-time { background: #fbf3e3; color: var(--torii); font-weight: 700; font-size: 14px; line-height: 1.5; border-radius: 7px; padding: 2px 8px; white-space: nowrap; margin-top: 0; font-variant-numeric: tabular-nums; align-self: start; }
.act-time.notime { background: transparent; color: var(--gold); line-height: 1.5; padding: 2px 6px; }
.act-body { font-size: 15.5px; line-height: 1.5; }

.daynote { background: #f3e4c9; border-radius: 10px; padding: 9px 12px; margin: 0 0 10px; font-size: 14px; color: #7a5a24; font-weight: 600; }

.stop-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.stop-links a { min-height: 44px; padding: 8px 14px; font-size: 15px; background: #fff; border: 1.5px solid var(--line); border-radius: 999px; display: inline-flex; align-items: center; text-decoration: none; }
.stop-links a.nav-primary { background: var(--sumi); color: #fff; border-color: var(--sumi); }

/* ===== Hotels summary ===== */
.hotel-row { display: flex; gap: 12px; align-items: flex-start; padding: 11px 0; border-bottom: 1px dashed rgba(26,21,18,0.12); }
.hotel-row:last-child { border-bottom: none; }
.hotel-nights { flex: none; background: var(--gold); color: #fff; font-weight: 700; font-size: 12.5px; border-radius: 8px; padding: 4px 8px; min-width: 66px; text-align: center; }
.hotel-main { display: flex; flex-direction: column; gap: 3px; }
.hotel-city { font-size: 13px; color: var(--muted); font-weight: 600; }
.hotel-name { font-weight: 700; font-size: 16px; color: var(--sumi); }
.hotel-nav { font-size: 14px; text-decoration: none; }
.hotel-call { font-size: 14px; text-decoration: none; font-weight: 700; white-space: nowrap; }
.hotel-area { font-size: 13.5px; color: var(--ink); }
.hotel-pend { font-size: 13px; color: var(--muted); font-weight: 600; }

/* ===== Bookings board (owner review item 3: one compact line each - name +
   when/day pill + links, links/functionality unchanged from round 2) ===== */
.book-row { padding: 8px 0; border-bottom: 1px dashed rgba(26,21,18,0.12); }
.book-row:last-child { border-bottom: none; }
.book-main { display: flex; flex-direction: row; align-items: center; flex-wrap: wrap; gap: 8px; }
.book-what { font-weight: 600; font-size: 15px; color: var(--sumi); }
.book-meta { display: inline-flex; align-items: center; font-size: 12px; color: var(--muted); font-weight: 600; background: #fbf3e3; border-radius: 999px; padding: 3px 9px; white-space: nowrap; }
.book-links { display: inline-flex; flex-wrap: wrap; gap: 8px; }
.book-link { display: inline-flex; align-items: center; min-height: 40px; padding: 6px 13px; background: #fff; border: 1.5px solid var(--line); border-radius: 999px; font-weight: 600; font-size: 13.5px; text-decoration: none; color: var(--sumi); }
.book-link:hover { border-color: var(--torii); }

/* ===== Packing chips ===== */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-btn { background: #eef2e8; border: 1.5px solid #d3ddca; color: #45543a; border-radius: 999px; padding: 9px 15px; font-size: 15px; font-weight: 600; min-height: 44px; cursor: pointer; font-family: inherit; display: inline-flex; align-items: center; gap: 7px; transition: background 0.2s, color 0.2s, border-color 0.2s; }
.chip-btn:active { transform: scale(0.96); }
.chip-btn.done { background: var(--moss); border-color: var(--moss); color: #fff; }

/* ===== Buttons ===== */
.btn { min-height: var(--tap); display: inline-flex; align-items: center; justify-content: center; gap: 6px; border-radius: 12px; text-decoration: none; font-weight: 700; font-size: 15px; cursor: pointer; font-family: inherit; border: none; padding: 0 18px; }
.btn-primary { background: var(--torii); color: #fff; }
.btn-primary:hover { background: var(--torii-deep); color: #fff; }

.btn-outline { background: #fff; border: 1.5px solid var(--line); color: var(--sumi); }
.btn-outline:hover { border-color: var(--torii); }

/* ===== Group photos: shared family album (owner review round 3, item 4) - grid,
   pager, upload chooser, lightbox and share modal. Mechanism ported from the
   Norway trip page; palette/type adapted to Japan's washi/torii/Heebo tokens. ===== */
.gp-actions { display: flex; gap: 10px; }

.gp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; }
.gp-tile { position: relative; aspect-ratio: 1 / 1; border-radius: 10px; overflow: hidden; background: #fbf3e3; }
.gp-tile-open { position: absolute; inset: 0; width: 100%; height: 100%; border: none; padding: 0; margin: 0; cursor: pointer; background: none; font-family: inherit; }
.gp-tile-open img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gp-tile-open:focus-visible { outline: 3px solid var(--torii); outline-offset: 2px; }
.gp-skel { cursor: default; background: linear-gradient(100deg, #fbf3e3 30%, var(--line) 50%, #fbf3e3 70%); background-size: 200% 100%; animation: gpSkelPulse 1.4s ease-in-out infinite; }
@keyframes gpSkelPulse { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* pager: numbered pages + prev/next, RTL-aware (prev = first/rightmost control) */
.gp-pager { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.gp-pager[hidden], .gp-actions[hidden] { display: none; }
.gp-page-nav, .gp-page { min-width: var(--tap); min-height: var(--tap); border-radius: 10px; border: 1.5px solid var(--line); background: #fff; color: var(--sumi); font-weight: 700; font-size: 15px; cursor: pointer; font-family: inherit; display: grid; place-items: center; padding: 0 4px; }
.gp-page[aria-current="true"] { background: var(--torii); border-color: var(--torii); color: #fff; }
.gp-page-nav:disabled { opacity: 0.4; cursor: not-allowed; }
.gp-page-nav:focus-visible, .gp-page:focus-visible { outline: 3px solid var(--torii); outline-offset: 2px; }
.gp-page-ellipsis { display: inline-flex; align-items: center; justify-content: center; min-width: var(--tap); height: var(--tap); color: var(--muted); user-select: none; }

/* upload source chooser: quiet inline panel (not a modal - avoids focus-trap
   conflicts with the emergency/hotels sheets) */
.gp-visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.gp-source-chooser { background: #fbf3e3; border: 1.5px solid var(--line); border-radius: 14px; padding: 14px; margin-top: 12px; }
.gp-source-opts { display: flex; gap: 10px; }
.gp-source-opt { flex: 1; }
.gp-device-panel { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.gp-device-btn { width: 100%; }
.gp-dropzone { border: 2px dashed var(--line); border-radius: 12px; padding: 22px 14px; text-align: center; color: var(--muted); font-size: 14.5px; transition: border-color 0.15s, background 0.15s; }
.gp-dropzone.dragover { border-color: var(--torii); background: #fff; }
.gp-preview-panel { margin-top: 12px; }
.gp-preview-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.gp-preview-tile { position: relative; aspect-ratio: 1 / 1; border-radius: 8px; overflow: hidden; background: #fff; }
.gp-preview-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* per-tile upload status overlay: covers the whole tile so the tap target
   always exceeds the min touch size. Every tile resolves to success or a
   labeled, tappable retry error - never a dead spinner. */
.gp-preview-status { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; padding: 4px; font-size: 12px; font-weight: 700; color: #fff; line-height: 1.3; }
.gp-preview-status[hidden] { display: none; }
.gp-preview-status.is-uploading { background: rgba(26, 21, 18, 0.55); }
.gp-preview-status.is-success { background: rgba(92, 111, 74, 0.72); }
.gp-preview-status.is-error { background: rgba(143, 29, 34, 0.82); cursor: pointer; }
.gp-preview-status.is-error:focus-visible { outline: 3px solid #fff; outline-offset: -3px; }

/* lightbox (RTL-aware: prev on the right/start side, next on the left/end side) */
.gp-lightbox[hidden] { display: none; }
.gp-lightbox { position: fixed; inset: 0; z-index: 90; }
.gp-lightbox-backdrop { position: absolute; inset: 0; background: rgba(20,16,12,0.88); }
.gp-lightbox-inner { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 20px; pointer-events: none; }
.gp-lightbox-img { position: relative; z-index: 1; max-width: 100%; max-height: 100%; border-radius: 8px; box-shadow: 0 10px 40px rgba(0,0,0,0.5); object-fit: contain; pointer-events: auto; }
.gp-lightbox-topbar { position: absolute; top: 14px; left: 14px; z-index: 2; pointer-events: auto; display: flex; gap: 8px; }
.gp-lightbox-close, .gp-lightbox-share { width: 44px; height: 44px; min-width: 44px; min-height: 44px; border-radius: 50%; background: rgba(255,255,255,0.94); border: none; color: var(--ink); font-size: 17px; cursor: pointer; font-family: inherit; text-decoration: none; display: grid; place-items: center; }
.gp-lightbox-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; pointer-events: auto; width: 48px; height: 48px; min-width: 44px; min-height: 44px; border-radius: 50%; background: rgba(255,255,255,0.94); border: none; color: var(--sumi); font-size: 26px; line-height: 1; cursor: pointer; font-family: inherit; display: grid; place-items: center; }
.gp-lightbox-prev { right: 14px; }
.gp-lightbox-next { left: 14px; }
.gp-lightbox-close:focus-visible, .gp-lightbox-share:focus-visible, .gp-lightbox-nav:focus-visible { outline: 3px solid var(--torii); outline-offset: 2px; }

/* share modal: centered panel over a dim backdrop, above the lightbox (91 > 90)
   since it always opens from within it */
.gp-share-modal[hidden] { display: none; }
.gp-share-modal { position: fixed; inset: 0; z-index: 91; display: flex; align-items: center; justify-content: center; padding: 20px; }
.gp-share-backdrop { position: absolute; inset: 0; background: rgba(20,16,12,0.6); }
.gp-share-panel { position: relative; z-index: 1; width: 100%; max-width: 360px; background: var(--card); border-radius: 18px; padding: 22px 18px 18px; box-shadow: 0 12px 40px rgba(0,0,0,0.35); }
.gp-share-close { position: absolute; top: 10px; left: 10px; width: 36px; height: 36px; min-width: 36px; min-height: 36px; border-radius: 50%; background: #fbf3e3; border: none; color: var(--ink); font-size: 14px; cursor: pointer; font-family: inherit; display: grid; place-items: center; }
.gp-share-close:focus-visible { outline: 3px solid var(--torii); outline-offset: 2px; }
.gp-share-title { margin: 0 0 16px; font-weight: 800; font-size: 17px; color: var(--sumi); text-align: center; }
.gp-share-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(70px, 1fr)); gap: 12px; margin-bottom: 16px; }
.gp-share-target { display: flex; flex-direction: column; align-items: center; gap: 6px; background: none; border: none; cursor: pointer; font-family: inherit; padding: 0; }
.gp-share-icon { width: 56px; height: 56px; min-width: var(--tap); min-height: var(--tap); border-radius: 50%; background: var(--torii); color: #fff; font-size: 24px; display: grid; place-items: center; }
.gp-share-label { font-size: 12px; color: var(--muted); }
.gp-share-target:focus-visible .gp-share-icon { outline: 3px solid var(--torii); outline-offset: 2px; }
.gp-share-download { width: 100%; min-height: var(--tap); border-radius: 12px; border: 2px solid var(--torii); background: #fff; color: var(--torii); font-weight: 700; font-size: 15px; cursor: pointer; font-family: inherit; display: flex; align-items: center; justify-content: center; gap: 6px; }
.gp-share-download:focus-visible { outline: 3px solid var(--torii); outline-offset: 2px; }

/* ===== Emergency inline card ===== */
.emerg-card { border: 2px solid var(--torii); }
.emerg-card h2 { color: var(--torii); }
.emerg-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }
.emerg-big { background: var(--torii); color: #fff; border-radius: 12px; min-height: 62px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; text-decoration: none; }
.emerg-big b { font-size: 22px; }
.emerg-big span { font-size: 13px; font-weight: 600; }
.emerg-line { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 48px; padding: 7px 2px; border-bottom: 1px solid var(--line); }
.emerg-line:last-child { border-bottom: none; }
.emerg-line .el-name { font-weight: 600; font-size: 15px; color: var(--ink); }
.emerg-line .el-pend { font-size: 13px; color: var(--muted); text-align: end; }
.emerg-line .el-val { font-weight: 700; color: var(--sumi); }

/* ===== Finale ===== */
.finale { position: relative; overflow: hidden; background: var(--sumi); border-radius: 18px; padding: 38px 20px 42px; margin: 24px 0 26px; text-align: center; color: #fff; }
.finale-mark { font-size: 40px; }
.finale h2 { font-weight: 800; font-size: 40px; letter-spacing: -0.5px; margin: 8px 0 6px; color: #fff; }
.finale p { margin: 0; font-size: 15px; color: var(--gold-soft); }

.footer { text-align: center; font-size: 14px; color: #9a8f78; padding: 0 0 18px; }

/* ===== Place guides (task #38: embedded in each day's More Information modal,
   reusing these classes - was previously a standalone accordion) ===== */
.guide-body { padding: 0 16px 16px; }
.guide-body p { margin: 0 0 10px; font-size: 15px; line-height: 1.55; color: var(--ink); }
.guide-note { margin: 0 0 10px; font-size: 12.5px; color: var(--muted); }
.guide-wiki-link { display: inline-flex; align-items: center; min-height: 40px; padding: 6px 13px; background: #fff; border: 1.5px solid var(--line); border-radius: 999px; font-weight: 600; font-size: 14px; text-decoration: none; color: var(--sumi); }
.guide-wiki-link:hover { border-color: var(--torii); }

/* ===== Photo credits ===== */
.credits { margin: 18px 0 4px; border: 1px solid var(--border); border-radius: 12px; background: var(--card); overflow: hidden; }
.credits > summary { list-style: none; cursor: pointer; padding: 12px 16px; font-weight: 700; font-size: 14px; color: var(--sumi); min-height: 44px; display: flex; align-items: center; }
.credits > summary::-webkit-details-marker { display: none; }
.credits-list { margin: 0; padding: 0 20px 6px; list-style: none; }
.credits-list li { font-size: 12.5px; color: var(--muted); padding: 4px 0; border-bottom: 1px dashed var(--line); }
.credits-list li:last-child { border-bottom: none; }
.credits-list a { font-weight: 600; }
.credits-note { margin: 4px 16px 14px; font-size: 12px; color: var(--muted); }

/* ===== Bottom bar ===== */
.bottombar { position: fixed; bottom: 0; left: 0; right: 0; z-index: 60; background: rgba(26,21,18,0.97); backdrop-filter: blur(8px); box-shadow: 0 -4px 18px rgba(20,16,12,0.28); }
.bottombar-inner { max-width: var(--maxw); margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; padding: 6px 8px calc(8px + env(safe-area-inset-bottom)); }
.bb-btn { background: transparent; border: none; border-radius: 12px; color: #fff; min-height: 52px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; cursor: pointer; font-family: inherit; text-decoration: none; }
.bb-btn.emerg { background: rgba(183,40,46,0.28); border: 1px solid rgba(183,40,46,0.6); }
.bb-btn.today { background: var(--card); border: 1px solid rgba(255,255,255,0.4); box-shadow: 0 2px 8px rgba(0,0,0,0.18); }
.bb-btn.today .lbl { color: var(--sumi); }
.bb-btn:active { transform: scale(0.96); }
.bb-btn .ico { font-size: 18px; }
.bb-btn .lbl { font-size: 13px; font-weight: 700; white-space: nowrap; }

/* ===== Back-to-top FAB (owner review item 8) ===== */
/* RTL-safe: pinned to the LEFT so it never sits over the RTL-primary thumb zone or
   the bottombar's own buttons (bottombar spans the full width at z-index 60; the FAB
   sits ABOVE it positionally). z-index kept below .backdrop/.sheet (70/80) so an open
   sheet always covers it - avoids the third stacking conflict round-2 verify flagged. */
.back-to-top {
  position: fixed;
  left: 14px;
  bottom: calc(74px + env(safe-area-inset-bottom));
  z-index: 55;
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--torii);
  border: none;
  display: grid; place-items: center;
  box-shadow: 0 6px 16px rgba(183,40,46,0.35);
  cursor: pointer;
  opacity: 0; visibility: hidden; transform: scale(0.8);
  transition: opacity 0.25s, transform 0.25s, visibility 0.25s;
}
.back-to-top.show { opacity: 1; visibility: visible; transform: scale(1); }
.back-to-top:active { transform: scale(0.92); }

/* ===== Emergency sheet ===== */
.backdrop { position: fixed; inset: 0; background: rgba(20,16,12,0.5); z-index: 70; opacity: 0; pointer-events: none; transition: opacity 0.28s; }
.backdrop.open { opacity: 1; pointer-events: auto; }
.sheet-wrap { position: fixed; bottom: 0; left: 0; right: 0; z-index: 80; display: flex; justify-content: center; pointer-events: none; }
.sheet { pointer-events: auto; width: min(var(--maxw), 100%); background: #fff; border-radius: 20px 20px 0 0; box-shadow: 0 -10px 40px rgba(20,16,12,0.35); padding: 10px 18px calc(20px + env(safe-area-inset-bottom)); transform: translateY(112%); transition: transform 0.32s cubic-bezier(0.3,0.8,0.3,1); max-height: 85dvh; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.sheet.open { transform: translateY(0); }
.sheet .grab { width: 44px; height: 5px; border-radius: 3px; background: #ddd5c4; margin: 4px auto 12px; }
.sheet-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.sheet-head h2 { font-weight: 800; font-size: 26px; color: var(--torii); margin: 0; letter-spacing: -0.5px; }
.sheet-close { background: #f3ede0; border: none; border-radius: 50%; width: 40px; height: 40px; font-size: 16px; cursor: pointer; color: var(--ink); }

/* ===== reveal on scroll ===== */
.rv-t { opacity: 0; transform: translateY(22px); }
.rv { animation: rvIn 0.6s cubic-bezier(0.2,0.7,0.2,1) both; }
@keyframes rvIn { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: translateY(0); } }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
  .rv-t { opacity: 1; transform: none; }
  .hero-img { transform: none; }
  .hero-petals { display: none; }
}

/* ===== small phones ===== */
@media (max-width: 380px) {
  body { font-size: 16px; }
  .card h2 { font-size: 22px; }
  .stop-card h3 { font-size: 20px; }
  .emerg-grid { grid-template-columns: 1fr; }
  .ft { min-width: 78px; }
}