/* Self-hosted from Google Fonts (SIL Open Font License): Fraunces and Inter, latin + latin-ext. */
@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 500; font-display: swap; src: url(/fonts/fraunces-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 500; font-display: swap; src: url(/fonts/fraunces-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 600; font-display: swap; src: url(/fonts/fraunces-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 600; font-display: swap; src: url(/fonts/fraunces-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/inter-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/inter-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url(/fonts/inter-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url(/fonts/inter-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url(/fonts/inter-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url(/fonts/inter-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --bg: #f7f2ea;
  --surface: #fffaf3;
  --ink: #2b241c;
  --muted: #5f5243;
  --accent: #c0622f;
  --line: #e6dccd;
  --shadow: 0 1px 2px rgba(40, 30, 20, .06), 0 8px 24px rgba(40, 30, 20, .08);
  --serif: "Fraunces", Georgia, serif;
  --sans: "Inter", system-ui, -apple-system, sans-serif;
  --radius: 14px;
  /* Status colors (text on its soft background), shared by badges, tags and notes everywhere:
     ok = done / reviewed, warn = changed since reviewed, draft = preview only, note = ✎ notes,
     danger = needs a look / errors / stale, pending = AI changes waiting for an OK. */
  --ok: #2c6b4b; --ok-bg: #e3f1ea;
  --warn: #8a5a00; --warn-bg: #fbf0d6;
  --draft: #6b4e00; --draft-bg: #fff3c4;
  --note: #2a5a8a; --note-bg: #e4eef8;
  --danger: #9a3d1d; --danger-bg: #fbe9e2;
  --pending: #6b3a8a; --pending-bg: #f1e6f7; --pending-soft: #faf5fd; --pending-line: #9a6bb8;
  --neutral-bg: #eef2f1;
  color-scheme: light;
}
[data-theme="ocean"]  { --bg: #eef4f6; --surface: #f8fbfc; --ink: #102a34; --muted: #3f5b67; --accent: #1f7a99; --line: #d3e2e8; }
[data-theme="forest"] { --bg: #eef1ea; --surface: #f8faf5; --ink: #1f2b1d; --muted: #5d6d57; --accent: #4c7a3a; --line: #d7dfcf; }
[data-theme="city"]   { --bg: #f1f1f1; --surface: #fafafa; --ink: #161616; --muted: #666; --accent: #d1342f; --line: #ddd; }
[data-theme="night"]  { --bg: #12141c; --surface: #1b1e29; --ink: #ece8e1; --muted: #9a98a3; --accent: #e5b45a; --line: #2c3040; color-scheme: dark;
  --ok: #9fd8b8; --ok-bg: #1e3a2c; --warn: #f0c56b; --warn-bg: #3d2f0c; --draft: #ffe08a; --draft-bg: #4a3b00;
  --note: #a9c8ea; --note-bg: #1d2f45; --danger: #f2a58a; --danger-bg: #44200f;
  --pending: #d4b3ea; --pending-bg: #2f2140; --pending-soft: #241b30; --pending-line: #9a6bb8; --neutral-bg: #262a36; }

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
html { font-size: 112.5%; }  /* 18px base: comfortable for every reader */
html.large-text { font-size: 131.25%; }  /* 21px, via the A+ button */
body { margin: 0; background: var(--bg); color: var(--ink); font: 1rem/1.6 var(--sans); -webkit-tap-highlight-color: transparent; }
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; } }
html { scroll-behavior: smooth; }
a { color: var(--accent); }
img { display: block; max-width: 100%; }
h1, h2, h3 { font-family: var(--serif); font-weight: 600; line-height: 1.15; margin: 0 0 .4em; letter-spacing: -.01em; }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 20px; }
.muted { color: var(--muted); }
.small { font-size: 13px; }

/* ---------- loading skeletons ---------- */
@keyframes shimmer { from { background-position: 150% 0; } to { background-position: -50% 0; } }
.skel, .trip-card.skel, .stat.skel, .ph-img img:not(.loaded), .mt-cell img:not(.loaded), .trip-card img:not(.loaded), .lib .item img:not(.loaded),
.fc-hero img:not(.loaded), .fc-cell img:not(.loaded), .cover .bgimg:not(.loaded) {
  background: linear-gradient(100deg, var(--line) 35%, color-mix(in srgb, var(--surface) 75%, var(--line)) 50%, var(--line) 65%) 0 0 / 200% 100%;
  animation: shimmer 1.5s linear infinite;
}
.skel { border-radius: 8px; }
/* A photo that couldn't load yet: hidden (no broken-image icon or outline) with the shimmer on its frame
   until a retry works. Phones without :has() just show the frame's plain gray. */
img.failed { visibility: hidden; }
:is(.ph-img, .mt-cell, .fc-hero, .fc-cell, .trip-card, .cover):has(> img.failed) {
  background: linear-gradient(100deg, var(--line) 35%, color-mix(in srgb, var(--surface) 75%, var(--line)) 50%, var(--line) 65%) 0 0 / 200% 100%;
  animation: shimmer 1.5s linear infinite;
}
.skel-line { height: 1em; margin: 0 0 14px; }
.skel-cover { background: #2a2f36; }
.skel-cover::after { display: none; }
.skel-cover .skel { background-image: linear-gradient(100deg, rgba(255,255,255,.12) 35%, rgba(255,255,255,.28) 50%, rgba(255,255,255,.12) 65%); }
.skel-photo { aspect-ratio: 4 / 3; border-radius: 10px; margin-bottom: 22px; }
.stat.skel { min-height: 74px; }
.lib .skel { aspect-ratio: 1; border-radius: 10px; }
@media (prefers-reduced-motion: reduce) { .skel, .ph-img img, .trip-card img, .lib .item img { animation: none !important; } }

/* ---------- top bar ---------- */
.topbar { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; max-width: 1120px; margin: 0 auto; }
.brand { font-family: var(--serif); font-size: 22px; font-weight: 600; color: var(--ink); text-decoration: none; }
.brand span { color: var(--accent); }
.topbar nav a { margin-left: 18px; color: var(--muted); text-decoration: none; font-size: 14px; }
.topbar nav a:hover { color: var(--ink); }

/* ---------- index ---------- */
.intro { padding: 48px 0 24px; }
.intro h1 { font-size: clamp(34px, 6vw, 60px); max-width: 14ch; }
.trip-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px; padding-bottom: 64px; }
.trip-card { position: relative; display: block; border-radius: var(--radius); overflow: hidden; aspect-ratio: 4 / 5; background: var(--line); box-shadow: var(--shadow); color: #fff; text-decoration: none; }
.trip-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.trip-card:hover img { transform: scale(1.04); }
.trip-card .meta { position: absolute; inset: auto 0 0 0; padding: 60px 20px 20px; background: linear-gradient(transparent, rgba(0, 0, 0, .72)); }
.trip-card h2 { font-size: 28px; margin: 0; }
.trip-card p { margin: 4px 0 0; opacity: .85; font-size: 14px; }
.empty { padding: 60px 24px; text-align: center; border: 1.5px dashed var(--line); border-radius: var(--radius); color: var(--muted); }

/* ---------- trip page (mobile first) ---------- */
.cover { position: relative; min-height: 88svh; display: flex; align-items: flex-end; color: #fff; background: #222; overflow: hidden; }
.bgimg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,0) 30%, rgba(0,0,0,.8)); }
.cover .wrap { position: relative; z-index: 1; padding-bottom: 40px; width: 100%; }
.cover h1 { font-size: clamp(2.4rem, 11vw, 5.8rem); max-width: 11ch; margin-bottom: .2em; text-shadow: 0 2px 16px rgba(0,0,0,.35); }
.cover .sub { font-size: 1.1rem; opacity: .95; max-width: 34ch; margin: 0 0 16px; }
.cover .dates { text-transform: uppercase; letter-spacing: .14em; font-size: .75rem; font-weight: 600; opacity: .9; margin-bottom: 10px; }
.cover .stats { display: inline-block; margin: 0 0 22px; padding: 6px 14px; border-radius: 99px; background: rgba(255,255,255,.18); backdrop-filter: blur(6px); font-size: .85rem; }
.summary { font-family: var(--serif); font-size: 1.2rem; line-height: 1.55; max-width: 32em; margin: 40px auto 28px; padding: 0 20px; }

.route { margin-bottom: 8px; }
/* Voyage map: an inline SVG drawn by scripts/voyage.mjs. Fixed sea-and-sand colors so it reads like a brochure map. */
.voyage-card { aspect-ratio: 1000 / 972; max-width: 600px; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); margin: 16px 0 0; background: #d9ebf0; }
@media (min-width: 1000px) { .route .voyage-card { margin-top: 0; } }
.voyage { display: block; width: 100%; height: auto; }
.voyage .v-sea { fill: #d9ebf0; }
.voyage .v-land { fill: #f3ece0; stroke: #c9bba3; stroke-width: 1; stroke-linejoin: round; }
.voyage .v-sea-name { font: italic 500 30px "Fraunces", Georgia, serif; fill: #6f97a5; letter-spacing: .12em; text-anchor: middle; }
.voyage .v-country { font: 600 19px "Inter", system-ui, sans-serif; fill: #b4a58b; letter-spacing: .32em; text-anchor: middle; }
.voyage .v-route { fill: none; stroke: #1f7a99; stroke-width: 5; stroke-linecap: round; stroke-dasharray: .1 12; }
.voyage .v-stop circle { fill: #fff; stroke: #1f7a99; stroke-width: 6; }
.voyage .v-name { font: 600 38px "Fraunces", Georgia, serif; fill: #102a34; paint-order: stroke; stroke: rgba(243,236,224,.9); stroke-width: 9px; stroke-linejoin: round; }
.voyage .v-day { font: 600 24px "Inter", system-ui, sans-serif; fill: #1f7a99; letter-spacing: .04em; }
.voyage .v-spur { fill: none; stroke: #1f7a99; stroke-width: 5; stroke-linecap: round; stroke-dasharray: .1 12; }
.voyage .v-stop { cursor: pointer; }
.voyage .v-stop:hover circle, .voyage .v-stop:focus circle { fill: #1f7a99; }

/* slim day bar, appears once you're past the cover */
.daybar { position: fixed; top: 0; left: 0; right: 0; z-index: 30; display: flex; align-items: center; gap: 8px; padding: max(8px, env(safe-area-inset-top)) 12px 8px; background: color-mix(in srgb, var(--surface) 94%, transparent); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.daybar button { font: 600 .95rem/1 var(--sans); min-height: 44px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--bg); color: var(--ink); cursor: pointer; flex: none; }
.daybar-text span { font-size: .75em; vertical-align: super; }
.daybar-now { flex: 1; min-width: 0; text-align: center; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: inherit; text-decoration: none; }
.daybar.at-start .daybar-now { color: var(--accent); }
.daybar.at-start .daybar-home { display: none; } /* on the cover there's nothing to go back up to; the label gets its room */
/* Phones: tighter buttons so "Start the story ↓" and "Day 6 · Dubrovnik" fit between them. */
@media (max-width: 480px) {
  .daybar { gap: 6px; padding-left: 10px; padding-right: 10px; }
  .daybar button { padding: 0 10px; min-width: 44px; }
  .daybar-now { font-size: .9rem; }
}
.daybar-home svg { display: block; }
html.large-text .daybar-text { background: var(--accent); color: #fff; border-color: var(--accent); }

/* full-screen list of days */
.days-sheet { position: fixed; inset: 0; z-index: 60; background: var(--bg); overflow-y: auto; -webkit-overflow-scrolling: touch; }
.days-inner { max-width: 640px; margin: 0 auto; padding: max(16px, env(safe-area-inset-top)) 16px 40px; }
.days-top { display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; background: var(--bg); padding: 8px 0 12px; }
.days-top h2 { margin: 0; font-size: 1.5rem; }
.days-close { font: 600 1rem/1 var(--sans); min-height: 48px; padding: 0 18px; border-radius: 12px; border: 0; background: var(--ink); color: var(--bg); cursor: pointer; }
.day-list { display: grid; gap: 8px; }
.day-list a { display: grid; grid-template-columns: 52px 1fr auto; align-items: center; gap: 12px; min-height: 68px; padding: 10px 14px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.day-list b { font: 600 1.6rem/1 var(--serif); color: var(--accent); text-align: center; }
.dl-main { font-weight: 600; line-height: 1.3; }
.dl-main small { display: block; font-weight: 400; color: var(--muted); font-size: .85rem; margin-top: 2px; }
.dl-count { font-size: .85rem; color: var(--muted); white-space: nowrap; }
.day-list a.dim { opacity: .55; }

/* days */
.day { padding-top: 48px; scroll-margin-top: 64px; }
.day-head { display: flex; gap: 14px; align-items: center; padding-bottom: 16px; margin-bottom: 4px; border-bottom: 2px solid var(--line); }
.day-num { font: 600 3.4rem/.85 var(--serif); color: var(--accent); letter-spacing: -.03em; min-width: 1.15em; text-align: right; }
.day-num span { display: block; font: 700 .65rem/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; text-align: right; }
.day-date { font-size: .8rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.day-meta h2 { font-size: 1.6rem; margin: 4px 0 2px; }
.day-meta .kind { color: var(--accent); font-size: .7em; vertical-align: .1em; }
.day-detail { color: var(--muted); font-size: .95rem; }
.day.empty { padding-top: 28px; }
.day.empty .day-head { border-bottom: 0; opacity: .6; }
.day.empty .day-num { font-size: 2.4rem; }
.day.empty h2 { font-size: 1.25rem; }
.soon { margin: 0; color: var(--muted); font-style: italic; }
.next-day { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 60px; margin: 28px 0 4px; padding: 10px 18px; border-radius: 16px; background: var(--accent); color: #fff; font-weight: 600; text-decoration: none; text-align: center; }
.next-day span { font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; opacity: .85; }

/* chapters */
.chapter { padding: 32px 0 4px; scroll-margin-top: 64px; }
.upcoming-card { padding: 18px 18px 6px; border: 2px dashed var(--line); border-radius: var(--radius); background: var(--surface); }
.upcoming-card .kicker { font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); font-weight: 700; margin-bottom: 6px; }
.section-head { max-width: 38em; margin-bottom: 18px; }
.section-head .kicker { font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); font-weight: 700; font-variant-numeric: tabular-nums; }
.section-head h3 { font-family: var(--serif); font-weight: 600; font-size: 1.6rem; line-height: 1.2; margin: 6px 0 8px; }
.section-head .body p { margin: 0 0 .8em; font-size: 1.05rem; }

/* photos: one per row on phones, caption + time always visible underneath */
figure { margin: 0; }
/* Justified rows: every photo keeps its true shape and gets width in proportion to it, so each row lines up
   at one height and fills the width exactly (Flickr-style). On phones the target row height is low enough
   that two portrait shots pair up side by side while a landscape shot gets the full width. */
.photos { --row-h: 165px; --stretch: 2.4; display: flex; flex-wrap: wrap; gap: 20px 8px; justify-content: center; }
/* --stretch caps how far a photo left alone on a row can grow, so a stray portrait doesn't balloon. */
.photos > .ph { flex: var(--r) 1 calc(var(--r) * var(--row-h)); min-width: 0; max-width: min(100%, calc(var(--r) * var(--row-h) * var(--stretch))); }
/* Featured photos get a row to themselves (same-height rows can't hold a double-size photo). */
.photos > .ph.featured { flex-basis: 100%; max-width: 100%; }
.photos > .ph.featured > .ph-img, .photos > .ph.featured > figcaption { width: min(100%, calc(var(--r) * 75svh)); margin-inline: auto; }
.ph { display: flex; flex-direction: column; }
/* montage tiles: a full row, 2–4 photos combined */
.photos > .ph.montage { flex-basis: 100%; max-width: 100%; }
.mt-grid { display: grid; gap: 4px; width: min(100%, 760px); margin-inline: auto; border-radius: 10px; overflow: hidden; background: var(--line); }
.montage > figcaption { width: min(100%, 760px); margin-inline: auto; }
.m2 .mt-grid { grid-template-columns: 1fr 1fr; aspect-ratio: 2 / 1.25; }
.m3 .mt-grid { grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; aspect-ratio: 3 / 2; }
.m3 .mt-cell:first-child { grid-row: 1 / 3; }
.m4 .mt-grid { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; aspect-ratio: 1 / 1; }
@media (min-width: 700px) { .m4 .mt-grid { aspect-ratio: 4 / 3; } }
.mt-cell { position: relative; display: block; min-width: 0; min-height: 0; padding: 0; border: 0; background: var(--line); cursor: zoom-in; overflow: hidden; }
.mt-cell img { width: 100%; height: 100%; object-fit: cover; }
.mt-more { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(0,0,0,.45); color: #fff; font-size: 1.6rem; font-weight: 700; }
.ph-img { display: block; width: 100%; padding: 0; border: 0; background: var(--line); border-radius: 10px; overflow: hidden; cursor: zoom-in; aspect-ratio: var(--r); }
.ph-img img { width: 100%; height: 100%; object-fit: cover; }
.ph figcaption { padding: 8px 2px 0; font-size: .95rem; line-height: 1.4; }
.ph figcaption .c { display: block; }
.ph figcaption .t { display: block; color: var(--muted); font-size: .8rem; margin-top: 2px; font-variant-numeric: tabular-nums; }

/* hero: big photo edge to edge, then the text */
.chapter.hero { padding-top: 32px; }
.hero-img .ph-img { border-radius: 0; max-height: 88svh; }
.hero-img figcaption { padding: 8px 16px 0; }
.hero-img { margin-bottom: 22px; }
footer.site a { min-height: 44px; line-height: 44px; }

/* bigger screens: photos in rows of two/three, still in time order */
@media (min-width: 700px) {
  .day { padding-top: 64px; }
  .day-num { font-size: 4.6rem; }
  .day-meta h2 { font-size: 2.1rem; }
  .section-head h3 { font-size: 2rem; }
  .photos { --row-h: 250px; --stretch: 2.2; gap: 26px 14px; }
  .hero-img { max-width: 1240px; margin: 0 auto; padding: 0 20px; }
  .hero-img .ph-img { border-radius: var(--radius); }
  .summary { font-size: 1.35rem; margin: 64px auto 36px; }
}
@media (min-width: 1100px) {
  .photos { --row-h: 290px; }
}

/* full-screen photo viewer */
.lightbox { position: fixed; inset: 0; z-index: 80; background: #0b0b0d; color: #eee; display: none; flex-direction: column; }
.lightbox.open { display: flex; }
.lb-top { display: flex; justify-content: space-between; align-items: center; padding: max(10px, env(safe-area-inset-top)) 12px 10px; }
.lb-count { font-size: .9rem; color: #bbb; padding-left: 4px; }
.lightbox button { font: 600 1rem/1 var(--sans); min-height: 48px; padding: 0 18px; border-radius: 12px; border: 1px solid #333; background: #1d1d22; color: #fff; cursor: pointer; }
.lb-stage { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 0 8px; }
.lb-stage img, .lb-stage video { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 6px; }
.lb-stage video { width: 100%; background: #000; }

/* video tiles: a jumpy looping flipbook over the poster frame */
.ph-vid { position: relative; }
.ph-vid .vid-poster { width: 100%; height: 100%; object-fit: cover; }
.ph-vid .flip { position: absolute; inset: 0; overflow: hidden; }
.ph-vid .flip-strip { width: 800%; max-width: none; height: 100%; animation: flipbook 32s steps(8) infinite; }
@keyframes flipbook { to { transform: translateX(-100%); } }
.ph-vid .vid-badge { position: absolute; left: 10px; bottom: 10px; padding: 6px 12px; border-radius: 99px; background: rgba(0,0,0,.6); color: #fff; font-size: .9rem; font-weight: 600; }
@media (prefers-reduced-motion: reduce) { .ph-vid .flip { display: none; } }
.lb-cap { padding: 12px 18px 4px; text-align: center; max-width: 62ch; margin: 0 auto; }
.lb-text { font-size: 1.05rem; }
.lb-meta { color: #aaa; font-size: .85rem; margin-top: 4px; font-variant-numeric: tabular-nums; }
.lb-nav { display: flex; gap: 10px; padding: 10px 12px max(14px, env(safe-area-inset-bottom)); }
.lb-nav button { flex: 1; }

footer.site { padding: 56px 20px calc(56px + env(safe-area-inset-bottom)); text-align: center; color: var(--muted); }
footer.site a { display: inline-block; padding: 10px 6px; }

/* ---------- uploader / library (phone first) ---------- */
.uploader { max-width: 720px; padding-bottom: 48px; }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; margin-bottom: 16px; }
.panel h2 { font-size: 1.4rem; }
.panel h3 { font-size: 1.1rem; margin-top: 24px; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
input[type=text], input[type=password] { font: inherit; min-height: 48px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); color: var(--ink); min-width: 0; flex: 1; }
button.btn { font: inherit; font-weight: 500; min-height: 48px; padding: 10px 18px; border-radius: 10px; border: 0; background: var(--accent); color: #fff; cursor: pointer; }
button.btn.ghost { background: transparent; color: var(--ink); border: 1px solid var(--line); }
button.btn:disabled { opacity: .5; cursor: default; }
.signed-in { justify-content: space-between; font-weight: 500; }
.signed-in span { color: var(--ok); }
#auth-status { margin: 10px 0 0; }
#auth-status:empty { display: none; }
.who { border: 0; margin: 0 0 14px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.who legend { font-weight: 600; margin-bottom: 8px; padding: 0; }
.who label { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 6px 14px; border: 1.5px solid var(--line); border-radius: 12px; background: var(--bg); cursor: pointer; font-weight: 500; }
.who label:has(input:checked) { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--surface)); }
.who input[type=radio] { width: 20px; height: 20px; margin: 0; accent-color: var(--accent); }
.who #who-other { flex-basis: 100%; }
.who.need legend { color: var(--danger); }
.pick-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pick { display: block; cursor: pointer; text-align: center; }
.pick-btn { display: flex; align-items: center; justify-content: center; min-height: 72px; padding: 8px 10px; border-radius: 12px; background: var(--accent); color: #fff; font-size: 1.05rem; font-weight: 600; line-height: 1.25; }
.pick:active .pick-btn { filter: brightness(.92); }
.pick-hint { margin: 8px 0 0; color: var(--muted); font-size: .85rem; text-align: center; }
.note { width: 100%; margin-top: 14px; }
#save-shot { width: 100%; margin-top: 12px; }
#drop.over { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 7%, var(--surface)); }
.toggle { display: flex; gap: 12px; align-items: flex-start; margin-top: 18px; padding: 14px; border-radius: 12px; background: var(--bg); cursor: pointer; font-size: .9rem; line-height: 1.45; }
.toggle input { width: 24px; height: 24px; margin: 0; flex: none; accent-color: var(--accent); }
.status { margin-top: 18px; }
.status-line { margin: 0 0 8px; font-weight: 600; }
.progress { height: 10px; background: var(--line); border-radius: 99px; overflow: hidden; }
.progress div { height: 100%; width: 0; background: var(--accent); transition: width .2s; }
#retry { width: 100%; margin-top: 12px; }
details { margin-top: 12px; }
summary { cursor: pointer; color: var(--muted); font-size: .9rem; min-height: 32px; }
.log { font: 13px/1.5 ui-monospace, monospace; max-height: 50vh; overflow: auto; margin-top: 8px; color: var(--muted); white-space: pre-wrap; overflow-wrap: anywhere; }
.stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (min-width: 600px) { .stats { grid-template-columns: repeat(3, 1fr); } }
.stat { background: var(--bg); border-radius: 10px; padding: 10px 12px; }
.stat b { display: block; font-size: 1.4rem; font-family: var(--serif); }
.stat span { font-size: .7rem; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.lib-actions { margin-top: 12px; }
.lib-actions .btn { flex: 1; }
.trip-list { list-style: none; margin: 0; padding: 0; }
.trip-list li { padding: 10px 0; border-bottom: 1px solid var(--line); }
.trip-list a { font-weight: 600; }
.trip-list .meta { display: block; font-size: .85rem; color: var(--muted); }
.lib { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
@media (min-width: 600px) { .lib { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); } }
.lib .item { background: var(--bg); border-radius: 10px; overflow: hidden; font-size: 12px; }
.lib .item img { aspect-ratio: 1; object-fit: cover; width: 100%; background: var(--line); }
.lib .item .cap { padding: 6px 8px 8px; line-height: 1.35; overflow-wrap: anywhere; }
.lib .item.hidden { opacity: .45; }
.badge { display: inline-block; padding: 1px 7px; border-radius: 99px; font-size: 11px; background: var(--line); color: var(--muted); }
.badge.done { background: var(--ok-bg); color: var(--ok); }
.badge.error { background: var(--danger-bg); color: var(--danger); }
.badge.pending { background: var(--warn-bg); color: var(--warn); }

.add-fab { position: fixed; right: 16px; bottom: max(16px, env(safe-area-inset-bottom)); z-index: 25; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--accent); color: #fff; font-size: 30px; text-decoration: none; box-shadow: 0 4px 16px rgba(0,0,0,.25); }

/* large text: keep the day bar on one line */
html.large-text .daybar button { padding: 0 10px; }
html.large-text .daybar-now { font-size: .85rem; }


/* owner-only suggestions (suggest.js) */
.sg { margin-top: 6px; }
.sg-btn { font: inherit; font-size: .8rem; min-height: 36px; padding: 4px 12px; border-radius: 99px; border: 1px dashed var(--line); background: transparent; color: var(--muted); cursor: pointer; }
.sg-btn.caption { min-height: 32px; font-size: .72rem; padding: 2px 10px; opacity: .8; }
.sg-note { margin: 6px 0; padding: 8px 10px; border-radius: 10px; background: var(--draft-bg); color: var(--draft); font-size: .85rem; line-height: 1.4; }
.sg-note.done { background: var(--ok-bg); color: var(--ok); }
.sg-state { display: block; font-size: .75rem; opacity: .75; }
.sg-form textarea { width: 100%; font: inherit; font-size: 1rem; padding: 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink); }
.sg-form textarea[aria-invalid] { border-color: var(--danger); }
.sg-research { display: flex; gap: 10px; align-items: center; margin-top: 8px; font-size: .9rem; color: var(--muted); cursor: pointer; }
.sg-research input { width: 22px; height: 22px; margin: 0; accent-color: var(--accent); }
.sg-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 6px; }

/* Preview-only chapters (owner's phone only) */
.draft-tag { display: inline-block; margin: 0 0 8px; padding: 4px 10px; border-radius: 999px; background: var(--draft-bg); color: var(--draft); font: 700 .75rem/1.2 var(--sans); letter-spacing: .02em; }

/* Montage albums: "+N more" and a See-all button that opens just this montage in the viewer */
.mt-more { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; line-height: 1; }
.mt-more small { font-size: .85rem; font-weight: 600; letter-spacing: .02em; }
.mt-all { display: inline-flex; align-items: center; margin-top: 8px; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--accent); font: 600 .95rem/1 var(--sans); cursor: pointer; }
.mt-all:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.lightbox button:disabled { opacity: .35; cursor: default; }

/* Viewer: while the big photo loads, show a soft blurred preview and a spinner */
.lb-stage { position: relative; }
.lb-stage.loading::before { content: ""; position: absolute; inset: 8%; background: var(--lb-blur, #1d1d22) center / contain no-repeat; filter: blur(14px); opacity: .55; border-radius: 6px; }
.lb-stage.loading::after { content: ""; position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; border: 4px solid rgba(255,255,255,.25); border-top-color: #fff; animation: lb-spin .8s linear infinite; }
.lb-stage img { transition: opacity .2s ease; }
.lb-stage.loading img:not(.ready) { opacity: 0; }
@keyframes lb-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .lb-stage.loading::after { animation-duration: 2.4s; } .lb-stage img { transition: none; } }

/* ---------- Story flow: theme cards (trip page) -> chapter page -> group page ---------- */
.day-intro { font: 500 1.1rem/1.5 var(--serif); color: var(--ink); margin: 14px 0 4px; max-width: 60ch; }
.fcards { display: grid; gap: 22px; margin-top: 18px; }
.flow-chapter { padding: 0; }
.fcard { display: block; color: inherit; text-decoration: none; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.fcard:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.fc-hero { aspect-ratio: 4 / 3; background: var(--line); }
.fc-hero img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fc-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; padding-top: 3px; background: var(--surface); }
.fc-strip.n1 { grid-template-columns: 1fr 3fr; } .fc-strip.n2 { grid-template-columns: repeat(2, 1fr); } .fc-strip.n3 { grid-template-columns: repeat(3, 1fr); }
.fc-cell { position: relative; aspect-ratio: 1; background: var(--line); overflow: hidden; }
.fc-cell img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fc-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; background: var(--surface); }
.fc-more { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(0,0,0,.45); color: #fff; font: 700 1.3rem/1 var(--sans); }
.fc-text { padding: 12px 16px 16px; }
.fc-text h3 { font-size: 1.35rem; margin: 2px 0 6px; text-wrap: balance; }
.fc-text p { margin: 0 0 10px; color: var(--muted); line-height: 1.5; }
.fc-go { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: 999px; background: var(--accent); color: #fff; font: 600 .95rem/1 var(--sans); }
.fcard.group { margin: 18px 0; }
.fcard.group .fc-hero { aspect-ratio: 3 / 2; }
.fcard.group .fc-text h3 { font-size: 1.15rem; }
.flow-page { padding: 14px 0 40px; min-height: 100svh; }
.flow-back { display: inline-flex; align-items: center; min-height: 48px; padding: 0 16px; margin: 4px 0 8px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--accent); font: 600 1rem/1 var(--sans); text-decoration: none; }
.flow-page .photos.one { margin: 16px 0; }
.flow-page .photos.one .ph { flex-basis: 100%; max-width: 100%; }
body.in-sub .daybar { display: none; }
.lightbox.single .lb-nav, .lightbox.single .lb-count { visibility: hidden; }
@media (min-width: 700px) {
  .fcards { grid-template-columns: 1fr 1fr; }
  /* Cards side by side match heights, with "See all" lined up at the bottom, so rows don't leave gaps */
  .flow-chapter { display: flex; flex-direction: column; }
  .flow-chapter > .fcard { flex: 1; display: flex; flex-direction: column; }
  .flow-chapter .fc-text { flex: 1; display: flex; flex-direction: column; align-items: flex-start; }
  .flow-chapter .fc-go { margin-top: auto; }
  /* A pair next to a taller card: the photos grow to fill the height, rather than leaving a gap under the text. */
  .flow-chapter > .fcard.pair .fc-pair { flex: 1; }
  .flow-chapter > .fcard.pair .fc-pair .fc-cell { aspect-ratio: auto; min-height: 200px; }
  .flow-chapter > .fcard.pair .fc-text { flex: none; }
}
/* Inside a chapter or group page only that page shows, under a sticky "where am I" bar */
body.in-sub .cover, body.in-sub .summary, body.in-sub .route, body.in-sub .site { display: none; }
.flow-bar { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 40; display: grid; grid-template-columns: 48px 1fr 48px; align-items: center; gap: 8px;
  padding: 8px 12px; background: color-mix(in srgb, var(--bg) 78%, transparent); -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid color-mix(in srgb, var(--line) 80%, transparent); }
.fb-back { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); color: var(--accent); font: 600 1.8rem/1 var(--sans); text-decoration: none; }
.fb-where { min-width: 0; text-align: center; line-height: 1.2; }
.fb-where small { display: block; color: var(--muted); font: 600 .75rem/1.3 var(--sans); letter-spacing: .04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fb-where b { display: block; font: 600 1.05rem/1.25 var(--serif); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fb-text { width: 48px; height: 48px; padding: 0; }
/* Route map: one labeled dot per place */

/* Chapter and album pages: every photo whole, with its caption. One column on a phone,
   uncropped rows (like a photo book) on wider screens. No viewer; videos play in place. */
.flow-page .photos.sheet { --stretch: 3.2; margin: 18px 0 26px; } /* a landscape photo alone in its row still fills the width */
@media (max-width: 699px) { .flow-page .photos.sheet > .ph { flex-basis: 100%; max-width: 100%; } }
.flow-page .ph-img { cursor: zoom-in; }
.flow-page .fcards.albums { margin: 18px 0 26px; }
.flow-page .fcards.albums .fcard.group { margin: 0; }
/* An album card without a partner beside it takes the whole row, with a wider photo so it isn't too tall */
@media (min-width: 700px) {
  .flow-page .fcards.albums > .fcard:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .flow-page .fcards.albums > .fcard:last-child:nth-child(odd) .fc-hero { aspect-ratio: 16 / 9; }
}
.inline-video { display: block; width: 100%; aspect-ratio: var(--r); max-height: 80svh; border-radius: 10px; background: #000; }
/* Story flow on iPad landscape and desktop: use the width instead of one long column */
@media (min-width: 1000px) {
  .flow-day { display: grid; grid-template-columns: 300px 1fr; gap: 36px; align-items: start; }
  .flow-day .fd-side { position: sticky; top: 76px; }
  .flow-day .day-head { flex-direction: column; align-items: flex-start; border-bottom: 0; }
  .flow-day .fcards { margin-top: 0; grid-template-columns: repeat(2, 1fr); }
  .fp-chapter { display: grid; grid-template-columns: minmax(240px, 320px) 1fr; gap: 40px; align-items: start; }
  .fp-tiles > :first-child { margin-top: 0; }
  .fp-chapter .fp-side { position: sticky; top: 84px; }
}
@media (min-width: 1400px) { .flow-day .fcards { grid-template-columns: repeat(3, 1fr); } }
.fb-text { border-radius: 14px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: 600 1rem/1 var(--sans); cursor: pointer; }
html.large-text .fb-text { background: var(--accent); color: #fff; border-color: var(--accent); }

/* "Updated · tap to refresh": shown when the phone's saved copy of the story turned out to be stale. */
.updated-pill {
  position: fixed; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 70;
  font: 600 15px/1 var(--sans); color: #fff; background: var(--accent);
  border: 0; border-radius: 999px; padding: 12px 18px; white-space: nowrap; box-shadow: 0 6px 20px rgba(0,0,0,.25); cursor: pointer;
}

/* ---------- story map (/edit, editors only) ---------- */
.edit-page { background: var(--bg); }
.ed-top { position: sticky; top: 0; z-index: 30; background: color-mix(in srgb, var(--surface) 94%, transparent); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.ed-top-in { display: flex; align-items: center; gap: 14px; min-height: 56px; }
.ed-title { font: 600 1rem var(--sans); color: var(--muted); }
.ed-open { margin-left: auto; font-weight: 600; color: var(--accent); text-decoration: none; }
#ed { padding-top: 20px; padding-bottom: 80px; max-width: 900px; }
.ed-msg { padding: 60px 0; color: var(--muted); font-size: 1.05rem; }
.ed-trip h1 { font-size: 2rem; margin: 6px 0 2px; }
.ed-legend { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 14px 0 8px; font-size: .85rem; color: var(--muted); }
.ed-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 6px 0 16px; }
.ed-node { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; margin: 8px 0; }
.ed-node > summary { list-style: none; cursor: pointer; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding: 12px 14px; min-height: 48px; }
.ed-node > summary::-webkit-details-marker { display: none; }
.ed-node > summary::before { content: "▸"; color: var(--muted); width: 1em; transition: transform .15s; display: inline-block; }
.ed-node[open] > summary::before { transform: rotate(90deg); }
.ed-kind { font: 700 .7rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.ed-name { font: 600 1.05rem var(--serif); color: var(--ink); }
.ed-meta { color: var(--muted); font-size: .85rem; }
.ed-badges { display: inline-flex; flex-wrap: wrap; gap: 6px; margin-left: auto; }
.ed-badge { font: 600 .75rem/1 var(--sans); padding: 5px 8px; border-radius: 99px; white-space: nowrap; width: auto; margin: 0; }
.ed-badge.reviewed { background: var(--ok-bg); color: var(--ok); }
.ed-badge.changed { background: var(--warn-bg); color: var(--warn); }
.ed-badge.partial { background: var(--neutral-bg); color: var(--muted); }
.ed-review { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 2px 0 12px; font-size: .9rem; color: var(--muted); }
.ed-review.done { color: var(--ok); font-weight: 600; }
.ed-review.again span { color: var(--warn); font-weight: 600; }
.ed-act.ed-ok { background: var(--ok); border-color: var(--ok); color: #fff; }
.ed-act.small-act { padding: 3px 10px; font-size: .8rem; }
.ed-progress { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 10px 0 4px; font-size: .95rem; }
.ed-progress .ed-bar { flex: 1 1 160px; max-width: 260px; height: 8px; border-radius: 99px; background: var(--neutral-bg); overflow: hidden; }
.ed-progress .ed-bar span { display: block; height: 100%; background: var(--ok); border-radius: inherit; }
.ed-filter-note { margin: -8px 0 14px; font-size: .9rem; color: var(--muted); }
.ed-changed-note { color: var(--warn); font-weight: 600; }
.ed-filter { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; font-size: .9rem; color: var(--muted); }
.ed-badge.draft { background: var(--draft-bg); color: var(--draft); }
.ed-badge.note { background: var(--note-bg); color: var(--note); }
.ed-badge.warn { background: var(--danger-bg); color: var(--danger); }
.ed-badge.pending { background: var(--pending-bg); color: var(--pending); }
.ed-body { padding: 0 14px 6px 38px; }
.ed-kids { padding: 0 10px 10px 26px; }
.ed-kids > .ed-node { background: var(--bg); }
.ed-field { padding: 8px 0 10px; border-top: 1px dashed var(--line); }
.ed-label { display: block; font: 700 .7rem/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.ed-text { margin: 0 0 8px; line-height: 1.5; white-space: pre-wrap; }
.ed-empty { color: var(--muted); }
.ed-note { margin: 0 0 8px; padding: 8px 10px; border-radius: 10px; background: var(--note-bg); color: var(--note); font-size: .9rem; }
.ed-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.ed-act { font: 600 .85rem var(--sans); color: var(--accent); background: transparent; border: 1px solid var(--line); border-radius: 99px; padding: 8px 14px; min-height: 36px; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; }
.ed-act.ed-primary { background: var(--accent); color: #fff; border-color: var(--accent); }
.ed-act:disabled { opacity: .6; }
.ed-photo { display: grid; grid-template-columns: 64px 1fr; gap: 12px; padding: 10px 6px; border-top: 1px dashed var(--line); }
.ed-photo img { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; background: var(--line); }
.ed-photo-main { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.ed-photo-main .ed-badges { margin-left: 0; }
.ed-form { margin-top: 10px; display: grid; gap: 8px; }
.ed-form textarea { width: 100%; box-sizing: border-box; font: 1rem/1.5 var(--sans); padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line); background: #fff; }
.ed-form-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ed-hint { color: var(--muted); font-size: .8rem; margin-right: auto; }
.ed-actions.small .ed-act { border: 0; padding: 4px 6px; min-height: 30px; font-size: .8rem; }
.ed-actions.small { gap: 2px; margin-left: -6px; }
.ed-top .brand, .ed-title, .ed-open { white-space: nowrap; }
@media (max-width: 520px) { .ed-top .brand { display: none; } } /* phones: "Story map" and "Trip ↗" are enough */
/* proposals (Claude's changes waiting for an OK) */
.ed-waiting, .ed-stale { margin: 12px 0; padding: 12px 14px; border-radius: 14px; background: var(--pending-bg); color: var(--pending); }
.ed-stale { background: var(--danger-bg); color: var(--danger); }
.ed-stale ul { margin: 6px 0 10px 18px; padding: 0; }
.ed-approve-all { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.ed-prop { margin: 10px 0; padding: 10px 12px; border-left: 4px solid var(--pending-line); border-radius: 10px; background: var(--pending-soft); }
.ed-prop-head { margin-bottom: 6px; }
.ed-before, .ed-after { margin: 4px 0; padding: 6px 10px; border-radius: 8px; line-height: 1.45; white-space: pre-wrap; }
.ed-before { background: var(--danger-bg); color: var(--danger); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--danger) 45%, transparent); }
.ed-after { background: var(--ok-bg); color: var(--ok); }
ol.ed-before, ol.ed-after { text-decoration: none; padding-left: 28px; }
.ed-chapters { display: grid; gap: 8px; grid-template-columns: 1fr 1fr; margin: 6px 0; }
@media (max-width: 600px) { .ed-chapters { grid-template-columns: 1fr; } }
.ed-pchange { display: flex; gap: 10px; align-items: center; margin: 4px 0; font-size: .9rem; }
.ed-pchange img { width: 40px; height: 40px; object-fit: cover; border-radius: 6px; flex: none; }
.ed-pchange.gone img { opacity: .45; filter: grayscale(1); }
.ed-photo.waiting { background: var(--pending-soft); border-radius: 10px; }