/* ==========================================================================
   Japan Trip Scout — shared styles. Vanilla CSS, no preprocessor.
   "Otona-kawaii" (adult-cute, warm pastel) visual language.
   ========================================================================== */

:root {
  color-scheme: light;
  /* -- Otona-kawaii palette ------------------------------------------------ */
  --cream: #FFF7EF; --surface: #FFFFFF; --tint: #FFF1E9;
  --ink: #4A3D46; --hair: #F1E3D8;
  --coral: #F5789B; --coral-soft: #FFE7EE; --coral-border: #F6C9D5; --coral-text: #b04d67;
  --mint: #3FC3B0; --mint-soft: #DFF6F1; --mint-border: #AEE3DA; --mint-text: #2c8377; --mint-tint: #EAF7F3;
  --honey: #FBB43F; --honey-soft: #FFEFCF; --honey-border: #F3D48A; --honey-text: #b0774a;
  --indigo: #9B96E8; --indigo-soft: #EFEEFB;
  --serif: "Hiragino Mincho ProN", "Yu Mincho", Georgia, "Times New Roman", serif;
  --sans: "Hiragino Kaku Gothic ProN", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  /* P4 — kawaii display face for on-map city/region labels (from the
     validated ref/map-changes-mockup-v4.html). */
  --round: "SF Pro Rounded", ui-rounded, "Hiragino Maru Gothic ProN", "Varela Round", system-ui;
  --soft-sh: 0 16px 40px -22px rgba(150, 90, 110, .55);
  --soft-sm: 0 8px 20px -12px rgba(150, 90, 110, .4);

  /* -- Semantic tokens used throughout the app, retinted to the palette --- */
  --bg: var(--cream);
  --panel: var(--surface);
  --border: var(--hair);
  --text: var(--ink);
  --muted: #9C8A90;
  --accent: var(--coral);
  --accent-dark: #e0587c;
  --primary: var(--coral);
  --primary-dark: #e0587c;
  /* Status system (P4.2): liked / maybe (default) / eliminated. Liked is
     retinted to the coral/pink family to match the Airbnb-style heart. */
  --maybe: #E4D9CF;
  --liked: var(--coral); --liked-soft: var(--coral-soft); --liked-border: var(--coral-border);
  --eliminated: #C9BEC3; --eliminated-soft: #EEEAEC;
  --suggested: var(--indigo);
  --radius: 14px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; min-height: 100%; }
body {
  font-family: var(--sans);
  color: var(--text);
  background: var(--bg);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  transition: background .8s ease;
}
body[data-season="spring"] { background: linear-gradient(180deg, #FFF3F6, var(--cream) 40%); }
body[data-season="summer"] { background: linear-gradient(180deg, #EFFAF3, var(--cream) 40%); }
body[data-season="autumn"] { background: linear-gradient(180deg, #FFF1E6, var(--cream) 40%); }
body[data-season="winter"] { background: linear-gradient(180deg, #EEF4F8, var(--cream) 40%); }

h1, h2, h3, h4 { margin: 0; font-family: var(--serif); font-weight: 500; }
a { color: var(--mint); }
button { font-family: inherit; }

/* Content wrappers sit above the fixed petals layer (z-index:0). */
.home-wrap, .topbar, #screen-app, .wizard-wrap, .panel-wrap { position: relative; z-index: 1; }

/* ---------------------------------------------------------------------- */
/* SEASONAL PETALS + SWITCHER                                             */
/* ---------------------------------------------------------------------- */
#petals { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.petal { position: absolute; top: -8%; will-change: transform; animation: fall linear infinite; }
.petal img { display: block; transform-origin: center; animation: sway ease-in-out infinite alternate; }
@keyframes fall { to { transform: translateY(112vh); } }
@keyframes sway { from { transform: translateX(-15px) rotate(var(--r1, -22deg)); } to { transform: translateX(15px) rotate(var(--r2, 26deg)); } }
@media (prefers-reduced-motion: reduce) { #petals { display: none; } }

.switch {
  position: fixed; top: 14px; right: 14px; z-index: 50; display: flex; gap: 6px;
  background: rgba(255, 255, 255, .86); border: 1px solid var(--hair); border-radius: 999px;
  padding: 5px; box-shadow: var(--soft-sm); backdrop-filter: blur(6px);
}
.switch button { border: none; background: none; font-size: 1.15rem; width: 34px; height: 34px; border-radius: 50%; cursor: pointer; line-height: 1; }
.switch button.on { background: var(--coral-soft); }

/* ---------------------------------------------------------------------- */
/* MOMO THE FOX — idle breathe, happy boing                               */
/* ---------------------------------------------------------------------- */
.fox, .minifox, .peek { animation: breathe 4.6s ease-in-out infinite; }
@keyframes breathe { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-3px) scale(1.03); } }
@keyframes boing {
  0% { transform: scale(1); } 28% { transform: scale(.85) translateY(5px); }
  60% { transform: scale(1.14) translateY(-7px); } 80% { transform: scale(.97); } 100% { transform: scale(1); }
}
.boing { animation: boing .55s ease !important; }
.fox { height: 88px; width: auto; display: block; margin: 0 auto 10px; }
.minifox { height: 80px; width: auto; display: block; margin: 0 auto 10px; }

/* Occasional whole-body "alive" movements. The mascot is a flat PNG (no
   independent eye/ear rig), so movement is whole-body: startMascotIdleMotion
   (util.js) briefly adds one of these classes, each overriding the breathe
   loop for its short duration. */
.mascot-wiggle { animation: mascot-wiggle .9s ease !important; }
.mascot-hop { animation: mascot-hop .6s ease !important; }
.mascot-nod { animation: mascot-nod .8s ease !important; }
@keyframes mascot-wiggle { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-5deg); } 60% { transform: rotate(4deg); } }
@keyframes mascot-hop { 0%, 100% { transform: translateY(0); } 35% { transform: translateY(-14px) scaleY(1.04); } 70% { transform: translateY(0) scaleY(.97); } }
@keyframes mascot-nod { 0%, 100% { transform: rotate(0); } 40% { transform: translateY(2px) scaleY(.94); } }
@media (prefers-reduced-motion: reduce) {
  .fox, .minifox, .peek, .boing, .mascot-wiggle, .mascot-hop, .mascot-nod { animation: none !important; }
}

/* ---------------------------------------------------------------------- */
/* PETAL BURST — short success celebration (POI set to "liked", wizard done) */
/* ---------------------------------------------------------------------- */
.petal-burst { position: fixed; width: 0; height: 0; pointer-events: none; z-index: 5; }
.petal-burst-piece {
  position: absolute; top: 0; left: 0; width: 9px; height: 9px; margin: -4.5px;
  border-radius: 50% 50% 50% 4px; pointer-events: none;
  animation: petal-burst-fly ease-out forwards;
}
@keyframes petal-burst-fly {
  0% { transform: rotate(var(--pb-angle)) translateX(0) scale(.3); opacity: 1; }
  65% { opacity: 1; }
  100% { transform: rotate(var(--pb-angle)) translateX(var(--pb-dist)) scale(1); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .petal-burst { display: none; } }

/* ---------------------------------------------------------------------- */
/* REVEAL ON SCROLL                                                        */
/* ---------------------------------------------------------------------- */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .5s ease, transform .5s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

/* ---------------------------------------------------------------------- */
/* ANIMATED UNDERLINE LINKS                                                */
/* ---------------------------------------------------------------------- */
.ulink { position: relative; color: var(--mint); text-decoration: none; cursor: pointer; }
.ulink::after {
  content: ""; position: absolute; left: 0; bottom: -2px; height: 1.5px; width: 100%;
  background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .28s ease;
}
.ulink:hover::after { transform: scaleX(1); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 10px 18px; border-radius: 13px; border: 1px solid var(--border);
  background: var(--surface); color: var(--text); font-size: 13px; font-weight: 700;
  cursor: pointer; transition: background .15s, border-color .15s, transform .1s;
}
.btn:hover { background: var(--tint); transform: translateY(-1px); }
.btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.btn-primary { background: var(--primary); border-color: var(--primary); color: #fff; box-shadow: var(--soft-sm); }
.btn-primary:hover { background: var(--primary-dark); border-color: var(--primary-dark); }
.btn-primary:disabled { background: #f6cdd9; border-color: #f6cdd9; cursor: not-allowed; }
/* Delete-trip confirm (only user of .btn-danger): mint, matching the app CTAs. */
.btn-danger { background: var(--mint-soft); border-color: var(--mint-border); color: var(--mint-text); box-shadow: var(--soft-sm); }
.btn-danger:hover { background: #d3f0ea; border-color: var(--mint-border); }
.btn-ghost { background: transparent; border-color: transparent; }
.btn-ghost:hover { background: var(--tint); }
.btn-sm { padding: 7px 12px; font-size: 12px; }
.btn-block { width: 100%; }

input[type="text"], input[type="number"], input[type="search"], select, textarea {
  font-family: inherit; font-size: 13px; padding: 10px 12px; border: 1px solid var(--border);
  border-radius: 12px; background: var(--tint); color: var(--text); width: 100%;
}
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
textarea { resize: vertical; }
label { font-size: 13px; }
.field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 14px; }
.field label { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.field-hint { font-size: 11px; color: var(--muted); }

.badge {
  display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px;
  border-radius: 999px; font-size: 11px; font-weight: 600; color: #fff;
}

/* ---------------------------------------------------------------------- */
/* TOAST / MODAL (shared)                                                  */
/* ---------------------------------------------------------------------- */
.jts-toast {
  position: fixed; top: 16px; right: 16px; z-index: 2000;
  background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 12px;
  font-size: 13px; box-shadow: var(--soft-sh);
  opacity: 0; transform: translateY(-8px); transition: opacity .2s, transform .2s;
  max-width: min(360px, calc(100vw - 32px));
}
.jts-toast.show { opacity: 1; transform: translateY(0); }
.jts-toast-error { background: var(--accent-dark); }
.jts-toast-success { background: #2f9e83; }

.jts-modal-overlay {
  position: fixed; inset: 0; background: rgba(74, 61, 70, .45); z-index: 3000;
  display: flex; align-items: center; justify-content: center; padding: 16px;
}
.jts-modal {
  background: var(--surface); border-radius: 20px; padding: 26px; max-width: 380px; width: 100%;
  text-align: center; box-shadow: var(--soft-sh);
}
.jts-modal-icon { font-size: 28px; margin-bottom: 8px; }
/* Kawaii mascot illustration in place of the emoji icon (e.g. delete-trip). */
.jts-modal-art { position: relative; width: 84px; height: 80px; margin: 0 auto 10px; }
.jts-modal-art::before {
  content: ""; position: absolute; left: 50%; top: 52%; transform: translate(-50%, -50%);
  width: 70px; height: 70px; border-radius: 50%; z-index: 0;
  background: radial-gradient(circle, var(--mint-tint) 0%, rgba(234, 247, 243, .55) 55%, rgba(234, 247, 243, 0) 72%);
}
.jts-modal-art img { position: relative; z-index: 1; width: 84px; height: auto; display: block; }
.jts-modal h3 { margin-bottom: 8px; font-size: 17px; }
.jts-modal p { font-size: 13px; color: var(--muted); margin: 0 0 18px; }
.jts-modal-actions { display: flex; gap: 8px; justify-content: center; }

/* ---------------------------------------------------------------------- */
/* HOME SCREEN                                                             */
/* ---------------------------------------------------------------------- */
.home-wrap { max-width: 820px; margin: 0 auto; padding: 40px 20px 64px; }

/* Hero welcome */
.home-hero { text-align: center; max-width: 600px; margin: 20px auto 40px; }
.home-hero .fox { height: 100px; width: auto; margin: 0 auto 8px; }
.home-title { font-family: var(--serif); font-weight: 500; font-size: clamp(28px, 5vw, 40px); line-height: 1.12; margin: 4px 0 8px; text-wrap: balance; }
/* Tagline: a Japanese travel saying (serif) + its English translation as a
   muted italic display quote just below (replaces the old brand kanji). */
.home-jp { font-family: var(--serif); color: var(--ink); letter-spacing: .14em; margin: 0 0 6px; font-size: 16px; }
.home-quote { font-family: var(--serif); font-style: italic; color: var(--muted); font-size: 14px;
  line-height: 1.5; max-width: 40ch; margin: 0 auto 20px; }
.home-lead { color: var(--muted); font-size: 14px; line-height: 1.6; max-width: 44ch; margin: 0 auto 26px; }
/* Hero CTA in soft mint (matches the map screen's mint buttons), not coral. */
.btn-hero { font-size: 15px; padding: 14px 30px; border-radius: 15px;
  background: var(--mint-soft); border: 1px solid var(--mint-border); color: var(--mint-text);
  box-shadow: 0 8px 20px -12px rgba(63, 195, 176, .6); }
.btn-hero:hover { background: #d3f0ea; border-color: var(--mint-border); }
/* Two hero CTAs side by side (stacks on mobile). "See the map" is the honey
   secondary — opens the full map without creating a trip. */
.home-cta-row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.btn-hero-map { text-decoration: none; background: var(--honey-soft); border: 1px solid var(--honey-border);
  color: var(--honey-text); box-shadow: 0 8px 20px -12px rgba(251, 180, 63, .6); }
.btn-hero-map:hover { background: #FBE6B4; border-color: var(--honey-border); }

/* Trips list */
.trips-title { text-align: center; font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .18em; font-weight: 700; margin-bottom: 16px; }

.trip-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; }

/* Card shows only: generated illustration background, name, Open affordance.
   The whole card is a native <a> (keyboard-accessible by default); the "⋯"
   menu is a separate overlapping control so it never intercepts the link. */
.trip-card {
  position: relative; aspect-ratio: 4 / 3; border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--soft-sm); transition: box-shadow .15s, transform .1s; background: var(--surface);
}
.trip-card:hover, .trip-card:focus-within { box-shadow: var(--soft-sh); transform: translateY(-2px); }
.trip-card-link { position: absolute; inset: 0; display: block; color: inherit; text-decoration: none; }
.trip-card-link:focus-visible { outline: 3px solid var(--coral); outline-offset: -3px; }
.trip-card-art { position: absolute; inset: 0; }
/* Seasonal island postcard, softened over the white card so it never
   overwhelms; recentred so the island sits in the visible area above the band. */
.trip-card-art img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 68%; opacity: .5; }
/* Soft fade into the text band. */
.trip-card-scrim { position: absolute; left: 0; right: 0; bottom: 0; height: 72px; z-index: 1; background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .5)); pointer-events: none; }
/* Opaque white band so the name + Open read clearly over the faded art. */
.trip-card-info { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 9px 16px 11px; background: rgba(255, 255, 255, .9); backdrop-filter: blur(3px); border-top: 1px solid rgba(241, 227, 216, .6); }
.trip-card-info h3 { font-size: 16px; color: var(--ink); margin-bottom: 1px; }
.trip-card-open { font-size: 12px; font-weight: 700; color: var(--mint-text); }
.trip-card-chip { position: absolute; top: 10px; left: 10px; z-index: 2; font-size: 12px; font-weight: 600; background: rgba(255, 255, 255, .9); color: var(--ink); border-radius: 999px; padding: 3px 10px; backdrop-filter: blur(4px); }

.card-menu { position: absolute; top: 8px; right: 8px; z-index: 2; }
.card-menu-toggle {
  width: 28px; height: 28px; border-radius: 50%; border: none; cursor: pointer;
  background: rgba(255, 255, 255, .82); color: var(--ink); font-size: 15px; line-height: 1;
  box-shadow: var(--soft-sm); transition: background .15s;
}
.card-menu-toggle:hover { background: #fff; }
.card-menu-toggle:focus-visible { outline: 2px solid var(--coral); outline-offset: 2px; }
.card-menu-list {
  position: absolute; top: 34px; right: 0; min-width: 150px; background: var(--surface);
  border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--soft-sh); padding: 5px;
}
/* Menu item (e.g. Delete trip): full-width, mint icon chip, mint hover. */
.dropdown-item {
  display: flex; align-items: center; gap: 9px; width: 100%; padding: 9px 10px; border: none;
  background: transparent; border-radius: 9px; font-family: var(--sans); font-size: 13px; font-weight: 600;
  color: var(--ink); text-align: left; cursor: pointer; transition: background .14s, color .14s;
}
.dropdown-item .di-ic {
  display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px;
  border-radius: 8px; background: var(--mint-tint); font-size: 13px; transition: background .14s;
}
.dropdown-item:hover { background: var(--mint-soft); color: var(--mint-text); }
.dropdown-item:hover .di-ic { background: #cdeee7; }
.dropdown-item:focus-visible { outline: 2px solid var(--mint); outline-offset: 1px; }

.empty-state { text-align: center; padding: 48px 16px; color: var(--muted); background: var(--surface); border: 1px dashed var(--border); border-radius: var(--radius); }

.inline-form { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; margin: 20px auto 0; max-width: 420px; box-shadow: var(--soft-sm); text-align: left; }
.inline-form-row { display: flex; gap: 10px; }
.inline-form-row .field { flex: 1; }

/* Home entry create-trip form: mint accent to match the hero CTA, not coral. */
#new-trip-form input:focus-visible { outline-color: var(--mint); }
#new-trip-form .btn-primary { background: var(--mint-soft); border-color: var(--mint-border); color: var(--mint-text); box-shadow: var(--soft-sm); }
#new-trip-form .btn-primary:hover { background: #d3f0ea; border-color: var(--mint-border); }

/* ---------------------------------------------------------------------- */
/* TOP BAR (trip.html)                                                     */
/* ---------------------------------------------------------------------- */
.topbar {
  display: flex; align-items: center; gap: 12px; padding: 10px 16px;
  /* Soft mint (Option C, 2026-07-14): ties the bar to the mint rail into one
     cool otona-kawaii frame around the map. */
  background: linear-gradient(180deg, #F4FBF9, var(--mint-tint));
  border-bottom: 1.5px solid var(--mint-border); box-shadow: var(--soft-sm);
  flex-wrap: wrap; position: relative; z-index: 20;
}
.topbar .back-link {
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; flex: 0 0 auto; border-radius: 50%;
  font-size: 17px; text-decoration: none; color: var(--text); background: var(--surface);
  border: 1px solid var(--border); transition: background .15s, transform .1s;
}
.topbar .back-link:hover { background: var(--coral-soft); transform: translateX(-1px); }
.topbar h1 {
  font-size: 17px; flex: 1; min-width: 120px; font-weight: 700; color: var(--ink);
  font-family: var(--round); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ---------------------------------------------------------------------- */
/* WIZARD                                                                  */
/* ---------------------------------------------------------------------- */
.wizard-wrap { max-width: 640px; margin: 0 auto; padding: 40px 20px 64px; }
.wizard-steps { display: flex; gap: 6px; margin-bottom: 24px; }
.wizard-step-dot { flex: 1; height: 4px; border-radius: 2px; background: var(--border); }
.wizard-step-dot.active { background: var(--mint); }
.wizard-step-dot.done { background: var(--mint); opacity: .5; }
.wizard-card { background: var(--panel); border: 1px solid var(--border); border-radius: 22px; padding: 28px 26px; box-shadow: var(--soft-sh); }
.wizard-card h2 { font-size: 20px; text-align: center; margin-bottom: 6px; }
.wizard-card .wizard-sub { color: var(--muted); font-size: 13px; margin-bottom: 20px; text-align: center; }
.choice-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-bottom: 8px; }
.choice-tile {
  position: relative;
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px; text-align: left;
  border: 2px solid var(--border); border-radius: 14px; padding: 13px; cursor: pointer; background: var(--surface);
  transition: background .18s, border-color .18s, transform .1s;
}
.choice-tile:hover { transform: translateY(-1px); }
.choice-tile .emoji { font-size: 20px; }
.choice-tile.selected { border-color: var(--coral-border); background: var(--coral-soft); }
.choice-tile.selected::after {
  content: "✓"; position: absolute; top: 8px; right: 10px; width: 18px; height: 18px;
  border-radius: 50%; background: var(--coral); color: #fff; font-size: .62rem; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}
.choice-tile input { position: absolute; opacity: 0; pointer-events: none; }
.choice-tile:focus-within { outline: 2px solid var(--primary); outline-offset: 2px; }
.wizard-nav { display: flex; justify-content: space-between; margin-top: 24px; }
.duration-input { display: flex; align-items: center; gap: 10px; max-width: 220px; margin: 0 auto; }

.season-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 8px; }
.season-tile {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  padding: 14px; border: 2px solid var(--border); border-radius: 14px; background: var(--surface);
  font-size: .96rem; font-weight: 700; color: var(--text); font-family: var(--sans); cursor: pointer;
  transition: background .18s, border-color .18s;
}
.season-tile .emoji { font-size: 1.25rem; }
.season-tile.on { background: var(--mint-soft); border-color: var(--mint-border); color: var(--mint-text); }

/* Onboarding wizard runs on the mint charte (coral stays for the research panel,
   which reuses .choice-tile). Scoped to .wizard-card so research is untouched. */
.wizard-card .choice-tile.selected { border-color: var(--mint-border); background: var(--mint-soft); }
.wizard-card .choice-tile.selected::after { background: var(--mint); }
.wizard-card .choice-tile:focus-within { outline-color: var(--mint); }
.wizard-nav #wiz-next {
  background: var(--mint-soft); border-color: var(--mint-border); color: var(--mint-text); box-shadow: var(--soft-sm);
}
.wizard-nav #wiz-next:hover { background: #d3f0ea; border-color: var(--mint-border); }
#wiz-free-text, #duration-days { background: var(--mint-tint); border-color: var(--mint-border); }
#wiz-free-text:focus-visible, #duration-days:focus-visible { outline-color: var(--mint); }

/* ---------------------------------------------------------------------- */
/* FILTER RAIL (vertical, left of the map — redesigned 2026-07-08)         */
/* ---------------------------------------------------------------------- */
.filter-rail {
  flex: 0 0 240px; width: 240px; align-self: stretch; overflow-y: auto;
  background: var(--panel); border-right: 1px solid var(--border);
  padding: 16px 14px; display: flex; flex-direction: column; gap: 18px; z-index: 900;
}
.rail-section { display: flex; flex-direction: column; gap: 8px; }
.rail-h {
  margin: 0; font-family: var(--sans); font-size: 11px; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
}
.rail-list { display: flex; flex-direction: column; gap: 5px; }
.rail-pill {
  font-family: var(--sans); font-size: 13px; font-weight: 600; text-align: left;
  padding: 8px 12px; border-radius: 11px; border: 1px solid var(--border);
  background: var(--surface); color: var(--text); cursor: pointer; white-space: nowrap;
  transition: background .15s, border-color .15s, color .15s, transform .1s;
}
/* Mint accent (chosen 2026-07-14): selected = soft mint tint + border, a light
   uniform treatment so a rail full of active filters no longer shouts (and it
   reads as a calm layer distinct from the coral map pins / heart). */
.rail-pill:not(.active) { color: var(--muted); opacity: .78; }
.rail-pill:hover { transform: translateY(-1px); border-color: var(--mint-border); }
.rail-pill.active { border-color: var(--mint-border); background: var(--mint-soft); color: var(--mint-text); opacity: 1; }
/* Status pills (P4.2/P4.3): the SAME selected treatment as Category/Region, so
   "selected or not" always reads consistently across Liked / Maybe / Eliminated.
   The ♥ / ○ / ⊘ glyph in each label carries the per-status meaning — no more
   three different fills (which made "is it selected?" ambiguous). */
.rail-showall {
  margin-top: auto; align-self: flex-start; background: none; border: none;
  color: var(--muted); font-size: 12.5px; font-weight: 700; font-family: var(--sans);
  cursor: pointer; padding: 6px 2px; text-decoration: underline;
}
.rail-showall:hover { color: var(--accent-dark); }

/* "Filters" button: hidden on desktop, shown on mobile to toggle the rail. */
.rail-toggle {
  /* Above the open rail (1050) so it stays clickable to close it; sits in the
     rail's top padding band so it never overlaps the filter content. */
  display: none; position: absolute; z-index: 1060; top: 10px; left: 10px;
  align-items: center; gap: 6px; padding: 8px 13px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--surface); color: var(--text);
  font-family: var(--sans); font-size: 12.5px; font-weight: 700; cursor: pointer;
  box-shadow: var(--soft-sm);
}

/* ---------------------------------------------------------------------- */
/* TRIP MAP SHELL — map is the hero, full width edge to edge               */
/* ---------------------------------------------------------------------- */
.map-shell { position: relative; display: flex; height: calc(100vh - 108px); overflow: hidden; }
#map { flex: 1 1 auto; min-width: 0; height: 100%; background: var(--tint); }

/* ---------------------------------------------------------------------- */
/* P3 — SEASONAL ILLUSTRATED MAP                                          */
/* Screen-anchored sea + frame decorations sit as plain DOM siblings of    */
/* Leaflet's map-pane (z-index 400): the sea (z:1) stays behind all panes; */
/* the frame (z:480) sits above tiles/land but is pointer-events:none      */
/* throughout, so POI pins (Leaflet's own marker pane, z:600) stay fully   */
/* clickable regardless of paint order. The land + Fuji are real Leaflet   */
/* layers (see js/map.js) and pan/zoom correctly; only this frame chrome   */
/* is fixed to the viewport.                                               */
/* ---------------------------------------------------------------------- */
#map-sea, #map-frame { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
#map-sea { z-index: 1; }
#map-frame { z-index: 480; transition: opacity .45s ease; }
#map-sea svg { display: block; }
#map-frame img { display: block; width: 100%; height: auto; }

.jts-branch { position: absolute; top: -2%; left: -1%; width: 30%; transform-origin: top left; filter: drop-shadow(0 6px 8px rgba(74, 61, 70, .12)); }
.jts-wave { position: absolute; right: 0; bottom: 0; width: 27%; transform: scaleX(-1); }
.jts-facewrap { position: absolute; transform: translate(-50%, -50%); }
.jts-facewrap > .jts-wink { position: absolute; top: 0; left: 0; opacity: 0; }
#jts-wrap-c1 { width: 10%; left: 42%; top: 22%; }
#jts-wrap-c2 { width: 7.5%; left: 84%; top: 16%; }
#jts-wrap-whale { width: 9.5%; left: 50%; top: 85%; }
.jts-particles { position: absolute; inset: 0; overflow: hidden; }
.jts-particle { position: absolute; will-change: transform; animation: jts-fall linear infinite; }
.jts-particle img { display: block; width: 100%; height: auto; }
/* P3.8 — on-map season selector. Sits at the same top-right spot as the old
   passive eyebrow tag it replaces, but as a real (pointer-events: auto)
   control, and above the detail panel (z-index 1100) so it is never covered
   when a POI is open. */
.season-select {
  position: absolute; top: 12px; right: 12px; z-index: 1150;
  display: flex; gap: 4px; background: rgba(255, 255, 255, .92);
  padding: 5px; border-radius: 999px; box-shadow: var(--soft-sm);
}
.season-chip {
  width: 32px; height: 32px; padding: 0; display: flex; align-items: center; justify-content: center;
  border: none; border-radius: 50%; background: transparent; cursor: pointer;
  transition: background .15s ease, box-shadow .15s ease;
}
.season-chip img { width: 19px; height: 19px; object-fit: contain; }
.season-chip:hover { background: var(--coral-soft); }
.season-chip.active { background: var(--coral-soft); box-shadow: inset 0 0 0 2px var(--coral); }
.season-chip:focus-visible { outline: 2px solid var(--accent-dark); outline-offset: 2px; }
@keyframes jts-fall { 0% { transform: translateY(0) translateX(0) rotate(0deg); } 100% { transform: translateY(300px) translateX(var(--dx, 0)) rotate(var(--rot, 300deg)); } }
@keyframes jts-drift { 0%, 100% { translate: -8px 0; } 50% { translate: 9px 0; } }
@keyframes jts-wink { 0%, 89%, 99%, 100% { opacity: 0; } 92%, 96% { opacity: 1; } }
.jts-d1 { animation: jts-drift 8.5s ease-in-out infinite; }
.jts-d2 { animation: jts-drift 7.4s ease-in-out infinite; }
.jts-d3 { animation: jts-drift 10s ease-in-out infinite; }
.jts-w1 { animation: jts-wink 6.4s ease-in-out infinite; }
.jts-w2 { animation: jts-wink 8.3s ease-in-out infinite; }
.jts-w3 { animation: jts-wink 5.6s ease-in-out infinite; }
.jts-snowcap { filter: blur(4px); }
@media (prefers-reduced-motion: reduce) {
  .jts-particle { display: none; }
  .jts-d1, .jts-d2, .jts-d3, .jts-w1, .jts-w2, .jts-w3 { animation: none; }
  .jts-facewrap > .jts-wink { display: none; }
  #map-frame { transition: none; }
}

/* ---------------------------------------------------------------------- */
/* P4.5 — Real chihō region boundaries (replaces the single JAPAN_GEO      */
/* silhouette as the "Map" land layer). Each region is an L.geoJSON path   */
/* tinted with the season's land color (js/map.js applySeason); this just  */
/* adds the delimiting stroke look + the dim state for the rail toggle.    */
/* ---------------------------------------------------------------------- */
.region-zone { transition: opacity .2s ease; }
.region-zone.region-dim { opacity: .28; }
/* P6.3 — Satellite: keep the region border (no fill) recolored white with a
   soft dark halo for legibility over imagery; the Kawaii fill/labels/Fuji
   (kawaiiGroup) are already removed by the base-layer switch itself. */
.map-satellite .region-zone {
  stroke: #fff !important; fill-opacity: 0 !important;
  filter: drop-shadow(0 0 3px rgba(30, 20, 24, .55));
}
/* The Leaflet marker wrapper is sized 0x0 (iconSize:[0,0]) so the geo point
   is exactly its flex-centered origin; the label text overflows visibly,
   centered on that point. */
.region-label-wrap { pointer-events: none; display: flex; align-items: center; justify-content: center; overflow: visible; }
.region-label {
  font-family: var(--round); font-weight: 800; font-size: 13px; letter-spacing: .1em;
  text-transform: uppercase; color: #5A4A52; opacity: .68; white-space: nowrap;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .7); transition: opacity .2s ease;
}
.region-label-wrap.region-dim .region-label { opacity: .22; }

/* ---------------------------------------------------------------------- */
/* P5.1 — Prefecture layer: intermediate scale between region and city    */
/* labels. --round kawaii font, white halo, visual only (zoom-faded via    */
/* js/map.js updatePrefectureVisibility). Sized between region-label and   */
/* city-label. */
/* ---------------------------------------------------------------------- */
/* P6.3 — Satellite: recolor the prefecture border white (same halo as the
   region border); the border itself stays on both Map and Satellite, only
   its color changes, and the text labels are separately hidden in js/map.js. */
.map-satellite .pref-border-zone {
  stroke: #fff !important;
  filter: drop-shadow(0 0 2px rgba(30, 20, 24, .5));
}
.pref-label-wrap { pointer-events: none; display: flex; align-items: center; justify-content: center; overflow: visible; }
.pref-label {
  font-family: var(--round); font-weight: 700; font-size: 13px; letter-spacing: .08em;
  text-transform: uppercase; color: rgba(95, 78, 87, .72); white-space: nowrap; pointer-events: none;
  text-shadow: 0 1px 0 #fff, 0 0 6px rgba(255, 255, 255, .92), 0 0 6px rgba(255, 255, 255, .92);
  transition: opacity .2s ease;
}

/* ---------------------------------------------------------------------- */
/* P4.1 — Progressive city labels: --round kawaii font, soft white halo,   */
/* revealed by zoom tier (js/map.js updateCityLabelVisibility). Sit below  */
/* POI pins, above region labels/land; shown on both Map and Satellite.   */
/* ---------------------------------------------------------------------- */
.city-label-wrap { pointer-events: none; display: flex; align-items: center; justify-content: center; overflow: visible; }
.city-label-wrap.hide { display: none; }
.city-label {
  font-family: var(--round); color: var(--ink); white-space: nowrap; pointer-events: none;
  display: flex; align-items: center;
}
.city-label .dot {
  display: inline-block; width: 5px; height: 5px; border-radius: 50%;
  background: var(--coral); margin-right: 5px; box-shadow: 0 0 0 3px rgba(245, 120, 155, .18);
}
.city-label.t1 { font-weight: 800; font-size: 19px; text-shadow: 0 1px 0 #fff, 0 0 8px rgba(255, 255, 255, .98), 0 0 8px rgba(255, 255, 255, .98); }
.city-label.t2 {
  font-weight: 700; font-size: 16px; color: #5a4a52;
  text-shadow: 0 1px 0 #fff, 0 0 7px rgba(255, 255, 255, .95), 0 0 7px rgba(255, 255, 255, .95);
}
.city-label.t3 {
  font-weight: 700; font-size: 14px; color: #6b5a62;
  text-shadow: 0 1px 0 #fff, 0 0 6px rgba(255, 255, 255, .92), 0 0 6px rgba(255, 255, 255, .92);
}
.city-label.t3 .dot { width: 4px; height: 4px; background: var(--honey); }
/* P6.2 — secondary/small towns, progressively quieter than prefecture capitals. */
.city-label.t4 {
  font-weight: 600; font-size: 12.5px; color: #8a7680;
  text-shadow: 0 1px 0 #fff, 0 0 5px rgba(255, 255, 255, .9), 0 0 5px rgba(255, 255, 255, .9);
}
.city-label.t4 .dot { width: 3.5px; height: 3.5px; background: var(--honey); box-shadow: none; }
.city-label.t5 {
  font-weight: 600; font-size: 11px; color: #9C8A90;
  text-shadow: 0 1px 0 #fff, 0 0 5px rgba(255, 255, 255, .88), 0 0 5px rgba(255, 255, 255, .88);
}
.city-label.t5 .dot { width: 3px; height: 3px; background: #c9b7a8; box-shadow: none; }

/* Detail panel floats over the map (Airbnb/Google-Maps style) instead of
   reserving a permanent layout column — hidden until a marker is selected. */
.detail-panel {
  /* Above Leaflet's internal panes AND its zoom control (Leaflet's control
     container sits at z-index 1000), so it isn't hidden behind either.
     top is pushed down from the map edge to clear the season-select chips
     (P3.8) that sit above it (z-index 1150) in that same top-right corner. */
  display: none; position: absolute; top: 58px; right: 14px; bottom: 14px; width: 380px;
  max-width: calc(100% - 28px); background: var(--panel); border-radius: 18px;
  box-shadow: var(--soft-sh); overflow-y: auto; z-index: 1100;
}
.detail-panel.open { display: block; }
.detail-close {
  position: sticky; top: 10px; left: calc(100% - 40px); margin-bottom: -30px;
  width: 30px; height: 30px; border-radius: 50%; border: none; background: rgba(255,255,255,.92);
  box-shadow: var(--soft-sm); color: var(--ink); font-size: 13px; cursor: pointer; z-index: 5;
}
.detail-close:hover { background: var(--coral-soft); }

/* Retint stock Leaflet chrome (zoom control + marker tooltip) with the
   otona-kawaii tokens instead of leaving default white squares/tooltip. */
.leaflet-control-zoom { border: none; border-radius: 12px; box-shadow: var(--soft-sm); }
.leaflet-control-zoom a, .leaflet-bar a {
  background: var(--surface); color: var(--ink); border-bottom: 1px solid var(--hair);
}
.leaflet-control-zoom a:hover, .leaflet-bar a:hover { background: var(--coral-soft); color: var(--coral-text); }
.leaflet-control-attribution { background: rgba(255, 255, 255, .75); color: var(--muted); }
/* Layers control (Map / Satellite), Google-Maps-style toggle, otona-kawaii. */
.leaflet-control-layers { border: none; border-radius: 12px; box-shadow: var(--soft-sm); background: var(--surface); }
.leaflet-control-layers-toggle { width: 38px; height: 38px; background-size: 20px 20px; }
.leaflet-control-layers-expanded { padding: 8px 12px 8px 10px; color: var(--text); font-family: var(--sans); }
.leaflet-control-layers-list { font-size: 13px; font-weight: 600; }
.leaflet-control-layers label { margin: 3px 0; display: flex; align-items: center; gap: 6px; }
.leaflet-control-layers-selector { accent-color: var(--coral); }
.leaflet-tooltip {
  background: var(--surface); border: 1px solid var(--hair); color: var(--text);
  border-radius: 10px; font-family: var(--sans); font-size: 12px; box-shadow: var(--soft-sm);
}
.leaflet-tooltip-top:before { border-top-color: var(--surface); }
.leaflet-tooltip-bottom:before { border-bottom-color: var(--surface); }
.leaflet-tooltip-left:before { border-left-color: var(--surface); }
.leaflet-tooltip-right:before { border-right-color: var(--surface); }

/* Kawaii teardrop markers */
.kpin {
  width: 36px; height: 36px; border-radius: 50% 50% 50% 4px; background: var(--surface);
  box-shadow: 0 5px 12px -3px rgba(120, 70, 80, .55); transform: rotate(45deg);
  display: grid; place-items: center; border: 2.5px solid var(--coral);
  transition: transform .18s ease, box-shadow .18s ease;
}
/* Border + light fill keyed to the POI's decision status (emoji still shows the category). */
.kpin.st-liked { border-color: var(--liked); background: var(--liked-soft); }
.kpin.st-maybe { border-color: var(--maybe); background: #fff; }
.kpin.st-eliminated { border-color: var(--eliminated); background: var(--eliminated-soft); opacity: .5; }
.kpin.st-suggested { border-color: var(--suggested); background: #ECEBFA; }
.kpin span { transform: rotate(-45deg); font-size: 16px; line-height: 1; }
.kpin.active {
  transform: rotate(45deg) scale(1.28); z-index: 1000;
  box-shadow: 0 0 0 7px rgba(245, 120, 155, .26), 0 9px 18px -4px rgba(120, 70, 80, .6);
}

/* P8 — mint cluster bubble (region/prefecture/city tiers). Number-only,
   no halo/glow — reads distinctly "mint" against the .kpin status colors. */
.mapcluster {
  display: grid; place-items: center; border-radius: 50%;
  background: radial-gradient(circle, #F1FBF8 0%, #DBF3ED 100%);
  border: 3px solid var(--mint); color: var(--mint-text);
  font-family: var(--round); font-weight: 700; line-height: 1;
  box-shadow: 0 6px 14px -6px rgba(46, 131, 119, .42);
  cursor: pointer; transition: transform .15s ease;
}
.mapcluster:hover { transform: scale(1.07); }
@media (prefers-reduced-motion: reduce) {
  .mapcluster { transition: none; }
  .mapcluster:hover { transform: none; }
}

.detail-content { padding: 18px; display: flex; flex-direction: column; gap: 10px; }
.detail-content h2 { font-size: 19px; }

/* Status control (P4.2, softened P5.2): an Airbnb-style heart (like) + a
   circle-slash (eliminate) float over the single photo. Both are white
   circles by default (paired look); mutually exclusive, toggling the active
   one returns to "maybe". When eliminated, the whole photo (including these
   buttons) is greyed. */
.carousel.elim { filter: grayscale(1); opacity: .6; }
.heart-btn {
  position: absolute; top: 9px; right: 9px; width: 38px; height: 38px; z-index: 4;
  border-radius: 50%; border: 2px solid rgba(255, 255, 255, .9); background: rgba(255, 255, 255, .86);
  cursor: pointer; padding: 0; display: grid; place-items: center;
  box-shadow: 0 3px 8px -3px rgba(74, 61, 70, .5);
  transition: transform .15s, border-color .15s;
}
.heart-btn svg { width: 21px; height: 21px; transition: transform .12s; }
.heart-btn:hover { transform: scale(1.06); }
.heart-btn path { fill: none; stroke: #8a7f85; stroke-width: 2.4; transition: fill .15s, stroke .15s; }
.heart-btn[aria-pressed="true"] { border-color: var(--coral); }
.heart-btn[aria-pressed="true"] path { fill: var(--coral); stroke: var(--coral); }
.elim-btn {
  position: absolute; bottom: 9px; right: 9px; width: 38px; height: 38px; z-index: 4;
  border-radius: 50%; border: 2px solid rgba(255, 255, 255, .9); background: rgba(255, 255, 255, .86);
  cursor: pointer; display: grid; place-items: center; box-shadow: 0 3px 8px -3px rgba(74, 61, 70, .5);
  transition: transform .15s, background .15s, border-color .15s;
}
.elim-btn svg { width: 22px; height: 22px; fill: none; stroke: #8a7f85; stroke-width: 2.4; stroke-linecap: round; }
.elim-btn:hover { transform: scale(1.06); }
.elim-btn:hover svg { stroke: #6b5f66; }
.elim-btn[aria-pressed="true"] { background: #8a7f85; border-color: #8a7f85; }
.elim-btn[aria-pressed="true"] svg { stroke: #fff; }

/* P5.2 — one mint button directly under the photo (replaces the Google Maps
   + Google Images external-links row). */
/* P7 — two external links side by side (Google Maps + Photos). */
.linkrow { display: flex; gap: 8px; }
.poi-photolink {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  flex: 1 1 0; min-width: 0; white-space: nowrap;
  padding: 10px 14px; border-radius: 12px; font-size: 13px; font-weight: 700;
  text-decoration: none; background: var(--mint-soft); border: 1px solid var(--mint-border);
  color: var(--mint-text); transition: transform .12s ease, box-shadow .12s ease;
}
.poi-photolink:hover { transform: translateY(-1px); box-shadow: var(--soft-sm); }
/* Google Maps in the coral charte, to sit as a peer of the mint Photos link. */
.poi-photolink.maps { background: var(--coral-soft); border-color: var(--coral-border); color: var(--coral-text); }

/* P5.2 — quiet meta line (replaces the category + region pill badges). */
/* P7 — meta line stays on a single line (content is shortened in renderDetail;
   nowrap is the safety net so a long name never wraps to two lines). */
.poi-meta { font-size: 12px; color: var(--muted); font-family: var(--sans); white-space: nowrap; overflow: hidden; }
.poi-ja { font-size: 12.5px; color: var(--muted); font-family: var(--sans); margin-top: 1px; }
.poi-oneliner { font-size: 13.5px; color: var(--text); line-height: 1.5; margin: 0; }

/* P5.2 — chips: season + price (no access chip). */
.poi-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.chip {
  display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600;
  padding: 5px 11px; border-radius: 999px; background: var(--tint); color: var(--text);
  border: 1px solid var(--border);
}

.period { font-size: 12.5px; background: var(--honey-soft); color: var(--honey-text); padding: 9px 11px; border-radius: 10px; }
.tips { font-size: 12.5px; background: var(--mint-soft); padding: 9px 11px; border-radius: 10px; margin-top: 8px; }

/* P6.1 — Practical info: left-aligned pastel icon rows (replaces the orange
   .practical box). Sources moved inside, see .pinfo-sources below. */
.pinfo { display: flex; flex-direction: column; }
.pinfo-row { display: flex; align-items: flex-start; gap: 11px; padding: 11px 2px; border-bottom: 1px solid var(--hair); }
.pinfo-row:last-of-type { border-bottom: none; }
.pinfo-ic { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: 15px; line-height: 1; }
.ic-city { background: var(--indigo-soft); }
.ic-car { background: var(--honey-soft); }
.ic-train { background: var(--mint-soft); }
.ic-time { background: var(--coral-soft); }
.ic-price { background: var(--honey-soft); }
.ic-date { background: var(--indigo-soft); }
.pinfo-txt { min-width: 0; flex: 1; }
.pinfo-label { font-size: 10.5px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: var(--muted); font-family: var(--sans); }
.pinfo-val { font-size: 13px; line-height: 1.5; color: var(--text); font-family: var(--sans); margin-top: 1px; }
.pinfo-sources { margin-top: 14px; padding-top: 13px; border-top: 1px dashed var(--hair); }
.pinfo-sources h4 { font-size: 10.5px; letter-spacing: .4px; text-transform: uppercase; margin: 0 0 8px; font-weight: 700; color: var(--muted); font-family: var(--sans); }

/* Sources: small chips — link title (+ domain), never a raw glued URL. */
.source-list { display: flex; flex-wrap: wrap; gap: 8px; }
.source-chip {
  display: inline-flex; align-items: center; gap: 5px; font-size: 12px;
  padding: 6px 11px; border-radius: 999px; border: 1px solid var(--border);
  background: var(--surface); color: var(--text); text-decoration: none; transition: background .15s;
}
.source-chip:hover { background: var(--tint); }
.source-domain { color: var(--muted); font-size: 11px; }

.notes-area { min-height: 70px; background: var(--tint); }
.confidence-list { font-size: 11.5px; color: var(--muted); display: flex; flex-wrap: wrap; gap: 6px; }
.conf-chip { border: 1px solid var(--border); border-radius: 999px; padding: 1px 7px; }

/* Single photo (P5.2 — no carousel/dots/arrows) */
.carousel { position: relative; margin: 0 0 8px; }
.track { display: flex; overflow: hidden; border-radius: 15px; }
.slide { flex: 0 0 100%; height: 200px; position: relative; overflow: hidden; display: grid; place-items: center; }
.slide img { width: 100%; height: 100%; object-fit: cover; display: block; position: relative; z-index: 1; opacity: 0; transition: opacity .25s ease; }
.slide img.loaded { opacity: 1; }
.slide.placeholder-slide { background: linear-gradient(150deg, var(--honey-soft), var(--coral-soft)); font-size: 2.6rem; }
/* Shown behind the <img> until it loads (or is dropped as unreachable), so
   a real photo never appears as a multi-second blank white slide. */
.slide-skel {
  position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(100deg, var(--tint) 35%, var(--hair) 50%, var(--tint) 65%);
  background-size: 200% 100%; animation: slide-shimmer 1.4s ease-in-out infinite;
}
@keyframes slide-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .slide-skel { animation: none; } }
/* Momo peeks from the bottom-left corner of the photo. */
.peek { position: absolute; left: 8px; bottom: -8px; height: 60px; width: auto; z-index: 3; filter: drop-shadow(0 4px 8px rgba(120, 70, 80, .35)); }

/* P5.2 — "About" / "Practical info" disclosures, two-chevron style. */
details.dd { border: 1px solid var(--border); border-radius: 13px; margin: 0; overflow: hidden; }
details.dd summary { list-style: none; cursor: pointer; padding: 12px 14px; font-weight: 700; font-size: .86rem; display: flex; align-items: center; gap: 9px; color: var(--text); font-family: var(--sans); }
details.dd summary::-webkit-details-marker { display: none; }
details.dd summary .chev { margin-left: auto; color: var(--muted); transition: transform .22s ease; }
details.dd[open] summary .chev { transform: rotate(180deg); }
details.dd .dd-body { padding: 0 14px 14px; font-size: .88rem; line-height: 1.6; color: var(--text); }
.dd-desc { margin-bottom: 8px; }

/* ---------------------------------------------------------------------- */
/* PANELS: research / import / export (right-side sliding panel reuse)    */
/* ---------------------------------------------------------------------- */
.panel-wrap { max-width: 640px; margin: 0 auto; padding: 32px 20px 64px; }
.panel-card { background: var(--panel); border: 1px solid var(--border); border-radius: 18px; padding: 22px; margin-bottom: 18px; box-shadow: var(--soft-sm); }
.panel-card h2 { font-size: 17px; margin-bottom: 4px; }
.panel-card .sub { color: var(--muted); font-size: 12.5px; margin-bottom: 14px; }
.suggestion-list { display: flex; flex-direction: column; gap: 10px; }
.suggestion-card { border: 1px solid var(--border); border-radius: 14px; padding: 13px 15px; background: var(--surface); }
.suggestion-card h4 { font-size: 15px; margin-bottom: 4px; }
.suggestion-card .desc { font-size: 12.5px; color: var(--text); margin-bottom: 8px; }
.suggestion-card .meta { font-size: 11px; color: var(--muted); margin-bottom: 8px; }
.suggestion-actions { display: flex; gap: 8px; }
.mock-banner { background: #fffbea; border: 1px solid #f0c36d; color: #7a5b00; border-radius: 10px; padding: 9px 13px; font-size: 12px; margin-bottom: 14px; }
.no-license-banner { background: var(--coral-soft); border: 1px solid var(--coral-border); color: var(--coral-text); border-radius: 10px; padding: 10px 14px; font-size: 12.5px; margin-bottom: 14px; }

/* ---------------------------------------------------------------------- */
/* RESPONSIVE — mobile down to ~360px                                      */
/* ---------------------------------------------------------------------- */
@media (max-width: 860px) {
  /* The rail slides in over the map from the left, toggled by the "Filters"
     button, instead of taking a permanent column on a narrow screen. */
  .rail-toggle { display: inline-flex; }
  /* Push Leaflet's top-left zoom control below the "Filters" button so the two
     don't stack on the same corner (the + was untappable underneath it). */
  .leaflet-top.leaflet-left { top: 50px; }
  .filter-rail {
    /* Above Leaflet's zoom control (z ~1000) so an open rail isn't pierced by
       the +/- buttons; still below the detail-panel sheet (1100). */
    position: absolute; top: 0; left: 0; bottom: 0; z-index: 1050;
    width: 82%; max-width: 300px; transform: translateX(-100%);
    transition: transform .2s ease; box-shadow: var(--soft-sh); padding-top: 56px;
  }
  .filter-rail.open { transform: translateX(0); }
  /* Detail panel becomes a bottom sheet on narrow viewports instead of a
     right-floating card, so it never overlaps the tabs. */
  .detail-panel {
    top: auto; left: 0; right: 0; bottom: 0; width: auto; max-width: none;
    max-height: 62vh; border-radius: 18px 18px 0 0;
  }
}
@media (max-width: 480px) {
  .home-title { font-size: 26px; }
  .choice-grid { grid-template-columns: repeat(2, 1fr); }
  .season-grid { grid-template-columns: 1fr 1fr; }
  .wizard-card { padding: 20px 16px; }
  .home-wrap, .wizard-wrap, .panel-wrap { padding-left: 12px; padding-right: 12px; }
  .topbar { padding: 10px 12px; gap: 8px; }
}