/* Parallel Editions — design system: tokens and the few components every page
   family shares (the main site, the generated pages, /daily/, 404, privacy,
   welcome). Linked FIRST on every page; each page's own stylesheet builds on it.

   Contract (tests/design-lint.js checks it):
   - Only :root, :focus-visible, [hidden] and class selectors live here. No
     element selectors, so a page's own element rules never regress.
   - No class name that daily/ or a standalone page already uses for something
     else (.pill, .label, .card, .badge, .mark, .eyebrow, …).
   - site.css and the pages use these tokens instead of literal values. */

/* ──────────────────────── Tokens ──────────────────────── */
:root {
  --paper:        #f4f2ec;
  --paper-2:      #eae7dd;
  --paper-deep:   #ddd9cc;
  --ink:          #17191d;
  --ink-2:        #383b42;
  --ink-soft:     #6a6d75;
  --rule:         #d4d0c4;
  --accent:       #1a3e63;   /* deep ink blue */
  --accent-deep:  #112a45;
  --accent-soft:  #6486a6;

  --serif: "Newsreader", "Iowan Old Style", Georgia, serif;
  --display: "Schibsted Grotesk", "Helvetica Neue", sans-serif;
  --sans: "Schibsted Grotesk", "Helvetica Neue", system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", monospace;

  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 14px;

  --shadow-cover: 0 1px 1px rgba(40,28,12,0.08),
                  0 4px 12px rgba(40,28,12,0.10),
                  0 18px 40px -16px rgba(40,28,12,0.30);

  --container: 1280px;
  --gutter: clamp(20px, 4vw, 56px);
  color-scheme: light;

  /* ── Type: six roles. Each selector takes its size, leading and tracking
     from here (never the `font` shorthand). ── */
  --fs-display: clamp(44px, 7vw, 92px);   /* hero title only */
  --fs-h1:      clamp(30px, 4vw, 48px);   /* page titles, homepage section openers */
  --fs-h2:      clamp(22px, 2.4vw, 28px); /* sub-sections, dialog and panel titles */
  --fs-h3:      19px;                     /* card, row and item titles */
  --fs-lede:    clamp(17px, 1.4vw, 20px); /* body: the paragraph under a title */
  --fs-body:    17px;                     /* body: prose */
  --fs-small:   15px;                     /* body: notes, lists, secondary prose */
  --fs-meta:    14px;                     /* meta: serif italic lines (author · year) */
  --fs-label:   12px;                     /* label: sans caps (eyebrows, field labels) */
  /* Controls size themselves from these. */
  --fs-ui:      14px;                     /* nav, buttons, pills, text actions */
  --fs-ui-sm:   13px;                     /* small buttons, toggles, back links */
  --fs-code:    11px;                     /* pair codes: DE · EN */
  --fs-control: 16px;                     /* text inputs and selects (iOS won't zoom) */
  --fs-icon:    24px;                     /* glyph buttons: × ‹ › */
  /* The reader surface: bilingual prose on --page paper, a little more
     generous than the publisher's body text. */
  --fs-read:         17px;                 /* the sample reader, the specimen on /how-it-works/ */
  --fs-read-compact: 16px;                 /* the hero specimen, kept above the fold */
  --fs-chooser:      var(--fs-h2);                 /* the pair chooser sentence */
  --fs-chooser-hero: clamp(19px, 1.9vw, 24px);     /* its hero copy, kept above the fold */

  --lh-display: 1;
  --lh-tight:   1.05;
  --lh-heading: 1.2;
  --lh-snug:    1.3;
  --lh-meta:    1.45;
  --lh-body:    1.6;
  --lh-read:    1.65;

  --track-display: -0.03em;
  --track-tight:   -0.02em;
  --track-snug:    -0.01em;
  --track-ui:      0.02em;
  --track-code:    0.06em;
  --track-label:   0.12em;

  /* ── Spacing: one scale. Literal px values in CSS must be one of these. ── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  /* Fluid steps (the only place clamp() spacing lives). */
  --space-section: clamp(48px, 7vw, 96px);  /* between homepage sections */
  --space-block:   clamp(32px, 5vw, 64px);  /* between big blocks inside a section */
  --space-page:    clamp(24px, 4vw, 48px);  /* top of a page; section joins; grid rows */
  --space-inset:   clamp(16px, 3vw, 32px);  /* inside panels and dialogs */
  --space-column:  clamp(16px, 2.5vw, 32px);/* between grid columns */

  /* ── Shape ── */
  --r-xs:   2px;    /* covers and thumbnails */
  --r-pill: 999px;  /* controls only; cards and panels never */

  /* ── Surfaces ── */
  --page:        #fffdf7;                 /* reading paper: bilingual prose sits on this */
  --pair-rule:   rgba(60, 60, 60, 0.14);  /* between paragraph pairs */
  --accent-wash: rgba(26, 62, 99, 0.06);  /* hover fill on accent outlines */
  --accent-ring: rgba(26, 62, 99, 0.35);  /* the daily pill's pulse */
  --ink-wash:    rgba(0, 0, 0, 0.03);     /* hover fill on neutral outlines */
  --on-ink-wash: rgba(255, 255, 255, 0.15);
  --error:       #9b2c2c;                 /* form errors */
  --scrim:       rgba(20, 14, 6, 0.72);   /* behind modal dialogs */
  --scrim-soft:  rgba(23, 25, 29, 0.32);  /* behind the non-modal filters popover */
  --shadow-dialog: 0 28px 64px -24px rgba(40, 28, 12, 0.5);
  --shadow-bar:    0 8px 16px -12px rgba(40, 28, 12, 0.35);

  /* ── Widths ── */
  --container-page: 1040px;  /* book and language pages */
  --measure:        680px;   /* one content width for every text column */
  --dialog-reader:  920px;

  /* Runtime: Masthead measures itself and overwrites this on <html>. */
  --masthead-h: 89px;

  /* ── The mark (and nothing else) uses these ── */
  --mark-rust:  #b04020;
  --mark-gold:  #b08736;
  --mark-cream: #faf3e3;
}
@media (max-width: 640px) {
  :root { --masthead-h: 114px; }
}

/* ──────────────────────── Shared base ──────────────────────── */
/* The hidden attribute always wins, even over a component's display rule. */
[hidden] { display: none !important; }

/* One focus ring everywhere. No border-radius here: the ring follows each
   control's own shape, so pills stay pills on keyboard focus. */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 16px; top: -100px; z-index: 100;
  font-family: var(--sans); font-size: var(--fs-ui); font-weight: 600;
  background: var(--ink); color: var(--paper);
  padding: 8px 16px; border-radius: var(--r-pill);
  transition: top 120ms ease;
}
.skip-link:focus { top: 12px; }

/* ──────────────────────── Buttons ──────────────────────── */
/* One primary, one secondary, one text action, in two sizes, always sentence
   case (uppercase is for labels). A Kindle button is `btn btn-primary btn-sm`
   wherever it appears; a sample or "Notify me" button is `btn btn-secondary
   btn-sm`. Hook classes (edition-cta, read-sample-btn, …) stay first on the
   element for tests and scripts; the look comes from here. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 44px;
  max-width: 100%;
  padding: 12px 24px;
  font-family: var(--sans);
  font-size: var(--fs-ui);
  font-style: normal;
  font-weight: 600;
  line-height: var(--lh-snug);
  letter-spacing: 0;
  text-transform: none;
  text-decoration: none;
  text-align: center;
  text-wrap: balance;
  color: var(--ink);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
}
.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--paper); }
.btn-primary:hover { background: var(--accent-deep); border-color: var(--accent-deep); color: var(--paper); }
.btn-secondary { border-color: var(--rule); color: var(--ink); }
.btn-secondary:hover { border-color: var(--ink); background: var(--ink-wash); color: var(--ink); }
.btn-secondary[aria-expanded="true"],
.btn-secondary[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
/* Small: cards, rows, the reader, the masthead. Never wraps inside the pill;
   a row of them wraps as whole buttons instead. */
.btn-sm { min-height: 36px; padding: 8px 16px; font-size: var(--fs-ui-sm); white-space: nowrap; }
/* Text action: a link-weight verb ("Other languages (3)", "Language ↑"). */
.btn-text {
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  color: var(--accent);
  text-align: left;
}
.btn-text:hover { background: transparent; text-decoration: underline; text-underline-offset: 3px; }
.btn-text.is-quiet { color: var(--ink-soft); }
.btn-text.is-quiet:hover { color: var(--accent); }
.btn:disabled,
.btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; }
.btn-primary:disabled:hover { background: var(--accent); border-color: var(--accent); }
.btn-secondary:disabled:hover { background: transparent; border-color: var(--rule); }

/* ──────────────────────── Fields ──────────────────────── */
/* Text inputs and selects. 16px text so iOS never zooms the page on focus. */
.field-control {
  width: 100%;
  min-height: 48px;
  padding: 12px 16px;
  font-family: var(--serif);
  font-size: var(--fs-control);
  line-height: var(--lh-snug);
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  transition: border-color 140ms ease;
}
.field-control::placeholder { color: var(--ink-soft); font-style: italic; }
.field-control:hover { border-color: var(--ink-soft); }
.field-control:focus-visible { border-color: var(--accent); }
.field-control:user-invalid { border-color: var(--error); }
/* Compact: the catalog toolbar and the sticky bar. */
.field-control-sm { width: auto; min-height: 36px; padding: 4px 12px; }

/* ──────────────────────── The mark ──────────────────────── */
/* The one Parallel Editions mark: a cream tile, a rust frame, "P·E" in
   Newsreader Bold with a gold dot. Inline SVG, so it sets in the page's web
   font; gen-mark.py renders the favicons, app icons and the share-card logo
   from this same markup. Rust, gold and cream belong to the mark only. */
.brand-mark { display: block; flex: none; width: 40px; height: 40px; }
.brand-mark-sm { width: 28px; height: 28px; }
.brand-mark-lg { width: 48px; height: 48px; }
.brand-mark-tile { fill: var(--mark-cream); }
.brand-mark-frame { fill: none; stroke: var(--mark-rust); }
.brand-mark-text {
  fill: var(--mark-rust);
  font-family: var(--serif);
  font-weight: 700;
  font-variation-settings: "opsz" 24;
}
.brand-mark-dot { fill: var(--mark-gold); }