/* FLOGVIT.dedup — tokens copied from portal/design/tokens.css (STYLE.md),
   accent marine. Chrome rules follow portal/SETTINGS.md: no px floors on chrome
   elements, min-width: 0 on rows, nowrap only on the wordmark itself. */

:root {
  --paper: #faf9f6;
  --surface: #ffffff;
  --ink: #1b1b18;
  --ink-2: #67665f;
  --line: #dcdacf;
  --bad: #c03b2e;
  --accent: #24407a;
  --accent-dark: #b4bff7;
  --radius: 10px;
  --radius-pill: 999px;
  --maxw: 1120px;
  /* The page's side gutter: 12 px, or the notch's inset where that is wider.
     The header, main, footer and every edge-to-edge strip that pulls itself
     back out of main all read these, so they cannot disagree. */
  --gutter-left: max(12px, env(safe-area-inset-left));
  --gutter-right: max(12px, env(safe-area-inset-right));
  --font-ui: 'Schibsted Grotesk', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;
  --well: color-mix(in oklab, var(--ink) 6%, var(--surface));
  --ink-soft: #46453f;
  --tint: #f1eee4;
  --hover: #f3f1ea;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-fv-theme="light"]) {
    --paper: #161614; --surface: #1e1e1b; --ink: #edece6; --ink-2: #99978d; --line: #2e2d29; --bad: #e0604f;
    --accent: var(--accent-dark);
    --ink-soft: #c4c2b8; --tint: #22211e; --hover: #1f1e1b;
  }
}
:root[data-fv-theme="dark"] {
  --paper: #161614; --surface: #1e1e1b; --ink: #edece6; --ink-2: #99978d; --line: #2e2d29; --bad: #e0604f;
  --accent: var(--accent-dark);
  --ink-soft: #c4c2b8; --tint: #22211e; --hover: #1f1e1b;
  color-scheme: dark;
}
/* A forced theme says so to the browser too, or date pickers, checkboxes and
   scroll bars are drawn in the OS's scheme on the other one's paper. The light
   colours need no block of their own: they are :root's, and the dark media
   query above already leaves a forced-light page alone. */
:root[data-fv-theme="light"] { color-scheme: light; }

/* min-width: 0 on everything, once (#94). The default, auto, means "never
   narrower than my content": a grid or flex child pushes its track out past
   the viewport as the text grows, and a <fieldset> carries min-content in the
   browser's own stylesheet without a single rule of ours. No rule below
   repeats it; a rule that needs a floor sets one. */
*, *::before, *::after { box-sizing: border-box; min-width: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--font-ui); font-size: 16px; line-height: 1.5;
  display: flex; flex-direction: column; min-height: 100vh;
}
a { color: var(--accent); }
::selection { background: color-mix(in oklab, var(--accent) 25%, transparent); }
h1, h2, h3 { line-height: 1.15; letter-spacing: -0.01em; margin: 0 0 0.4em; overflow-wrap: anywhere; }
h1 { font-size: clamp(1.7em, 5vw, 2.4em); font-weight: 800; }
h2 { font-size: 1.25em; font-weight: 700; }
p { margin: 0 0 1em; overflow-wrap: anywhere; }
img, svg { max-width: 100%; }

.skip-link { position: absolute; left: -999px; top: 0; padding: 8px 12px; background: var(--surface); color: var(--ink); }
.skip-link:focus { left: 8px; z-index: 100; }
/* A label a screen reader reads and an eye does not need: the field beside it
   already says what it is. Never `display: none` — that hides it from both. */
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* ---------- header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  padding: calc(10px + env(safe-area-inset-top)) 0 10px;
  background: color-mix(in oklab, var(--paper) 88%, transparent);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.hdr-row {
  max-width: var(--maxw); margin: 0 auto;
  padding: 0 var(--gutter-right) 0 var(--gutter-left);
  display: flex; align-items: center; gap: 0.75em; flex-wrap: wrap;
}
.hdr-nav { display: flex; gap: 0.1em; flex-wrap: wrap; }
.hdr-nav a {
  padding: 0.4em 0.7em; border-radius: var(--radius-pill);
  font-size: 0.9em; font-weight: 500; color: var(--ink-2); text-decoration: none;
}
.hdr-nav a.active, .hdr-nav a:hover { color: var(--ink); background: color-mix(in oklab, var(--ink) 6%, transparent); }
.hdr-controls { margin-left: auto; display: flex; align-items: center; gap: 0.5em; }

/* Wordmark (STYLE.md): nowrap on the mark itself, never on the row. */
.wordmark { display: inline-flex; align-items: baseline; font-size: 1.05em; color: var(--ink); }
.wordmark a { color: var(--ink); text-decoration: none; }
.wordmark a:focus-visible, .fv-summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }
.wm-product { font-family: var(--font-mono); font-weight: 500; font-size: 0.95em; white-space: nowrap; }
.wm-product-dot { color: var(--accent); font-family: var(--font-ui); font-weight: 800; }

.fv-menu { position: relative; display: inline-block; }
.fv-summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: baseline; gap: 0.3em;
  font-weight: 800; letter-spacing: -0.02em; white-space: nowrap;
}
.fv-summary::-webkit-details-marker { display: none; }
.fv-caret { color: var(--ink-2); transition: transform 0.15s ease-out; }
.fv-menu[open] .fv-caret { transform: rotate(180deg); }
/* `left: 0`, as in books — never a negative offset in `em`. The panel is
   absolutely positioned, so a pull to the left is measured against the header's
   12 px gutter, and an `em` grows with the text: -0.6em is 10 px at 100 % text
   and 15 px at 150 %, which puts the panel 3 px off the left edge of the screen
   in all eight languages. See test/chrome-meny.test.ts.
   The height is capped, and the panel scrolls itself: it hangs from a sticky
   header, so it never scrolls with the page, and what was below the bottom of
   the screen stayed there — "Account & settings" at 320 × 568 in every
   language, half the panel at 150 % text (#30). 5em is the header above the
   panel with room to spare, and it grows with the text as the header does. */
.fv-menu-panel {
  position: absolute; left: 0; top: calc(100% + 0.6em); z-index: 80;
  display: flex; flex-direction: column;
  min-width: min(14em, calc(100vw - 24px)); max-width: calc(100vw - 24px);
  max-height: calc(100vh - 5em - env(safe-area-inset-top));
  max-height: calc(100dvh - 5em - env(safe-area-inset-top));
  overflow-y: auto; overscroll-behavior: contain;
  padding: 0.35em; white-space: normal;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
}
.fv-item {
  display: flex; align-items: baseline; justify-content: space-between; gap: 0.8em; flex-wrap: wrap;
  padding: 0.5em 0.75em; border-radius: 6px;
  font-size: 0.95em; font-weight: 400; letter-spacing: 0; text-decoration: none; color: var(--ink);
}
.fv-item[aria-current] { background: var(--well); }
.fv-wm { display: inline-flex; align-items: baseline; white-space: nowrap; }
.fv-brand-b { font-weight: 800; letter-spacing: -0.02em; }
.fv-dot { font-weight: 800; color: var(--ink); }
.fv-prod { font-family: var(--font-mono); font-weight: 500; font-size: 0.95em; }
.fv-soon .fv-wm { opacity: 0.5; }
.fv-chip { font-family: var(--font-mono); font-size: 0.7em; color: var(--ink-2); }
.fv-kontoitem { font-size: 0.85em; border-top: 1px solid var(--line); margin-top: 0.25em; padding-top: 0.6em; }
.fv-dot-puzzles { color: #2b5bb7; } .fv-dot-lab { color: #6743b8; } .fv-dot-image { color: #0f6e77; }
.fv-dot-books { color: #2f7d43; } .fv-dot-photo { color: #b0355f; } .fv-dot-photosuite { color: #8a5d0b; }
.fv-dot-bible { color: #7a4a21; } .fv-dot-hides { color: #8a4b22; } .fv-dot-eventphotos { color: #9c2f92; } .fv-dot-gallery { color: #3f5b75; } .fv-dot-god { color: #6f5a12; } .fv-dot-dedup { color: #24407a; }
@media (prefers-color-scheme: dark) {
  :root:not([data-fv-theme="light"]) .fv-dot-puzzles { color: #7ea6ec; }
  :root:not([data-fv-theme="light"]) .fv-dot-lab { color: #b39df0; }
  :root:not([data-fv-theme="light"]) .fv-dot-image { color: #6fc7cd; }
  :root:not([data-fv-theme="light"]) .fv-dot-books { color: #85c795; }
  :root:not([data-fv-theme="light"]) .fv-dot-photo { color: #ef8fb1; }
  :root:not([data-fv-theme="light"]) .fv-dot-photosuite { color: #e0aa4f; }
  :root:not([data-fv-theme="light"]) .fv-dot-bible { color: #d9a06b; }
  :root:not([data-fv-theme="light"]) .fv-dot-hides { color: #e0996a; }
  :root:not([data-fv-theme="light"]) .fv-dot-eventphotos { color: #e79ae0; }
  :root:not([data-fv-theme="light"]) .fv-dot-gallery { color: #a3bdd4; }
  :root:not([data-fv-theme="light"]) .fv-dot-god { color: #d8bf63; }
  :root:not([data-fv-theme="light"]) .fv-dot-dedup { color: #b4bff7; }
}
:root[data-fv-theme="dark"] .fv-dot-puzzles { color: #7ea6ec; }
:root[data-fv-theme="dark"] .fv-dot-lab { color: #b39df0; }
:root[data-fv-theme="dark"] .fv-dot-image { color: #6fc7cd; }
:root[data-fv-theme="dark"] .fv-dot-books { color: #85c795; }
:root[data-fv-theme="dark"] .fv-dot-photo { color: #ef8fb1; }
:root[data-fv-theme="dark"] .fv-dot-photosuite { color: #e0aa4f; }
:root[data-fv-theme="dark"] .fv-dot-bible { color: #d9a06b; }
:root[data-fv-theme="dark"] .fv-dot-hides { color: #e0996a; }
:root[data-fv-theme="dark"] .fv-dot-eventphotos { color: #e79ae0; }
:root[data-fv-theme="dark"] .fv-dot-gallery { color: #a3bdd4; }
:root[data-fv-theme="dark"] .fv-dot-god { color: #d8bf63; }
:root[data-fv-theme="dark"] .fv-dot-dedup { color: #b4bff7; }

.account-chip {
  display: inline-flex; align-items: center; gap: 0.4em; min-height: 2.4em; max-width: 12em; padding: 0 0.8em;
  border: 1px solid var(--line); border-radius: var(--radius-pill); background: var(--surface); color: var(--ink);
  font-size: 0.85em; font-weight: 600; text-decoration: none;
}
.account-chip:hover { border-color: var(--ink-2); }
.account-chip-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-chip-plus {
  flex: none; padding: 0.1em 0.5em; border-radius: var(--radius-pill); background: var(--accent); color: var(--paper);
  font-family: var(--font-mono); font-size: 0.7em; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
}
.settings-gear {
  display: inline-flex; align-items: center; justify-content: center; width: 2.4em; height: 2.4em;
  border-radius: 50%; color: var(--ink-2); text-decoration: none; font-size: 1em;
}
.settings-gear.active, .settings-gear:hover { color: var(--ink); background: color-mix(in oklab, var(--ink) 6%, transparent); }

/* ---------- page ---------- */
.page {
  flex: 1; width: 100%; max-width: var(--maxw); margin: 0 auto;
  padding: 1.5em var(--gutter-right) 3em var(--gutter-left);
}
.hero { padding: 1em 0 1.5em; }
.hero--center { text-align: center; padding-top: 3em; }
.lead { font-size: 1.1em; color: var(--ink-2); max-width: 40em; }
.hero--center .lead { margin-inline: auto; }
.eyebrow { font-family: var(--font-mono); font-size: 0.85em; color: var(--accent); margin: 0; }
.empty { color: var(--ink-2); }

/* A section's name, with the rule drawn NEXT to it rather than under it: the
   heading stays one text node, which is what the sweeps read. */
.section-head {
  display: flex; align-items: center; gap: 0.7em;
  margin-top: 1.6em;
  font-family: var(--font-mono); font-size: 0.8em; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2);
  margin-bottom: 0.7em;
}
.section-head::after { content: ""; flex: 1; height: 1px; background: var(--line); }


.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.2em; margin: 0 0 1em; }
.card p:last-child { margin-bottom: 0; }

.btn {
  display: inline-block; padding: 0.6em 1.1em; border-radius: var(--radius-pill); border: 1px solid var(--accent);
  background: var(--accent); color: var(--paper); text-decoration: none; cursor: pointer; font: inherit; font-weight: 600;
}
.btn--outline { background: transparent; color: var(--accent); }
.chips { display: flex; flex-wrap: wrap; gap: 0.5em; }
.chip {
  padding: 0.4em 0.9em; border-radius: var(--radius-pill); border: 1px solid var(--line);
  background: var(--surface); color: var(--ink); font: inherit; cursor: pointer;
  text-decoration: none;
}
.chip--on { border-color: var(--accent); color: var(--accent); font-weight: 600; }



/* ---------- the pages ---------- */
.page > section { margin-bottom: 2em; }
.page h2 { margin-top: 0.4em; }
.hero h1 { font-size: clamp(2em, 5vw, 3.2em); line-height: 1.05; letter-spacing: -0.02em; margin: 0.3em 0 0.4em; }
.example { font-family: var(--font-mono); font-size: 0.9em; color: var(--accent); max-width: 44em; }
/* As many columns as fit, never a px floor. */
.points { display: grid; gap: 1.5em 2.5em; grid-template-columns: repeat(auto-fit, minmax(min(18em, 100%), 1fr)); margin: 1em 0 2.5em; }
.point { min-width: 0; }
.point h2 { font-size: 1.2em; margin: 0 0 0.4em; }
.point p { margin: 0; color: var(--ink-2); line-height: 1.55; }
.price { border-top: 1px solid var(--line); padding-top: 1.5em; max-width: 44em; }
.price p { margin-bottom: 0.6em; }

/* ---------- footer ---------- */
.site-footer { border-top: 1px solid var(--line); }
.footer-row {
  max-width: var(--maxw); margin: 0 auto; padding: 1.5em var(--gutter-right) 1.5em var(--gutter-left);
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.6em 1.2em; font-size: 0.85em; color: var(--ink-2);
}
.footer-row a { color: var(--ink-2); text-decoration: none; }
.footer-row a:hover { color: var(--accent); }
.footer-wm { display: inline-flex; align-items: baseline; white-space: nowrap; color: var(--ink); }
.footer-wm-brand { font-weight: 800; letter-spacing: -0.02em; color: var(--ink) !important; }
.footer-wm-prod { font-family: var(--font-mono); font-weight: 500; font-size: 0.95em; color: var(--ink) !important; }
.footer-wm-dot { color: var(--accent); font-family: var(--font-ui); font-weight: 800; }
.footer-copy { margin-left: auto; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}


/* ---------- part V: passages ---------- */
.index-group { margin-bottom: 2.5em; }
.index-group .numbered-title { flex: 0 1 12em; font-size: 1.4em; }
.verse-n { font-family: var(--font-mono); font-style: normal; font-size: 0.4em; color: var(--band-ink-2); margin-right: 0.3em; vertical-align: super; }
.related-why { display: block; font-size: 0.85em; line-height: 1.5; color: var(--ink-soft); }
.mark--left { background: transparent; border: 1.5px solid var(--ink-2); border-radius: 0; }

/* "Where are you?" on the front page: the reader's situations, in their own words. */
.where { padding-bottom: 3.5em; }
.where-list { list-style: none; margin: 0.6em 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(19em, 100%), 1fr)); border-top: 1px solid var(--ink); }
.where-list li { border-bottom: 1px solid var(--line); }
.where-list a { display: block; padding: 0.75em 0.2em 0.75em 0; font-family: var(--font-read); font-size: 1.3em; line-height: 1.3; color: var(--ink); text-decoration: none; }
.where-list a:hover { color: var(--accent); }
.where-list a::after { content: " →"; color: var(--accent); }

/* The way onward at the foot of a page: written to the one who arrived there. */
.wayon { padding-top: 4em; }
.wayon .lead-serif { margin: 0.3em 0 1.4em; max-width: 34em; }
.wayon-all { margin-top: 1.2em; font-family: var(--font-mono); font-size: 0.85em; }
.where-like { margin-top: 2.2em; }
.like-list { list-style: none; margin: 0.6em 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5em; }
.like-list a { display: inline-block; padding: 0.35em 0.9em; border: 1px solid var(--line); border-radius: var(--radius-pill); font-family: var(--font-read); color: var(--ink); text-decoration: none; }
.like-list a:hover { border-color: var(--accent); color: var(--accent); }

/* A song's words, when free: stanzas set as verse. */
.song-text p { margin: 0 0 1em; font-family: var(--font-read); font-size: 1.1em; line-height: 1.55; }
.song-text p:last-child { margin-bottom: 0; }

/* The timeline and its map (/timeline). The map is an inline SVG drawn by the page. */
.tl-map-wrap { margin-block: 1.5em; }
.tl-map { display: block; width: 100%; height: auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.tl-land { fill: var(--line); stroke: none; }
.tl-dot { fill: var(--accent); stroke: var(--paper); stroke-width: 0.4; }
.tl-dot--left { fill: var(--ink-2); }
.tl-note { font-size: 0.9em; }
.tl-list { list-style: none; margin: 0 0 1.5em; padding: 0; }
.tl-row { display: grid; grid-template-columns: 6.5em auto minmax(0, 1fr); gap: 0.6em; align-items: baseline; padding: 0.35em 0; border-bottom: 1px solid var(--line); }
.tl-year { min-width: 0; font-family: var(--font-mono); font-size: 0.9em; color: var(--ink-2); overflow-wrap: anywhere; }
.tl-what { min-width: 0; overflow-wrap: anywhere; }

/* The books that turned them: a book, and the lives it turned, each in the entry's own words. */
.book { margin: 0 0 1.6em; }
.book-title { font-size: 1.15em; margin: 0 0 0.4em; overflow-wrap: anywhere; }
.book-lives { list-style: none; margin: 0; padding: 0; }
.book-lives li { min-width: 0; padding: 0.4em 0; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }

/* "In their own voice": links to recordings, never an embedded player. */
.voice-list { margin: 0 0 0.6em; padding-left: 1.2em; }
.voice-list li { margin: 0.3em 0; overflow-wrap: anywhere; }
.voice-note { font-size: 0.9em; }

/* Reading together: questions beside each story (person page, /circles). */
.circle-list { margin: 0 0 0.6em; padding-left: 1.4em; }
.circle-list li { margin: 0.4em 0; }
.circle-story { margin: 0 0 1.8em; }
.circle-name { margin: 0 0 0.2em; }
.circle-group { margin: 1.4em 0 0.6em; }

/* Readers' stories: the form, and the mark that sets them apart. */
.story-form { display: grid; gap: 1.1em; max-width: 42rem; }
.story-form label { display: grid; gap: 0.35em; font-weight: 600; }
.story-form label.inline { display: flex; gap: 0.5em; align-items: baseline; font-weight: 400; }
.story-form input:not([type]), .story-form textarea { font: inherit; padding: 0.6em; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); color: var(--ink); width: 100%; box-sizing: border-box; }
.story-form fieldset { border: 1px solid var(--line); border-radius: var(--radius); min-width: 0; }
.story-form .muted { font-weight: 400; font-size: 0.9em; }
.form-errors { color: var(--bad); }
.reader-mark { border-left: 3px solid var(--accent); padding-left: 0.8em; color: var(--ink-2); }
.reader-list { list-style: none; padding: 0; }
.reader-list li { padding: 0.35em 0; border-bottom: 1px solid var(--line); }