/* Public site — lucina.baby landing and legal documents.
 * Hand-written, NOT generated: this surface has no seam theming, so it needs
 * no tokens.json render and has no drift guard. Colours are the Split
 * Decision constants (docs/design.md §3) copied as literals.
 */
@font-face {
  font-family: "Bowlby One";
  src: url(/static/fonts/BowlbyOne-Regular.woff2) format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Space Mono";
  src: url(/static/fonts/SpaceMono-Regular.woff2) format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Space Mono";
  src: url(/static/fonts/SpaceMono-Bold.woff2) format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --cream: #F7EFE3;
  --ink: #38251C;
  --a: #B07CF4;
  --b: #E8471C;
  --display-on-a: #84250B;
  /* For the Both theme `display-on-B` IS cream (design.md §3.3 table). Aliased
     under its token name so the seam-type rule below reads the way the design
     system states it, rather than as an incidental reuse of --cream. */
  --display-on-b: var(--cream);
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: "Space Mono", ui-monospace, monospace;
  font-size: 16px;
  line-height: 1.65;
}

.site-head {
  padding: 24px 20px;
  border-bottom: 2px solid var(--ink);
}

.wordmark {
  font-family: "Bowlby One", system-ui, sans-serif;
  font-size: 28px;
  color: var(--ink);
  text-decoration: none;
}

/* The one split surface on the site: the landing headline. Legal documents
   are pure cream reading surfaces (design.md §2, "cream means settled").
 *
 * FULL-BLEED BY CONSTRUCTION. The horizontal gutters live on .prose, NOT on
 * <main> — a band inset by a parent's padding renders as a floating rectangle
 * with cream margins between two full-width rules, which is not a seam. Do not
 * put horizontal padding back on <main>.
 *
 * The 20px here is symmetric on purpose: it keeps the h1's box centred on the
 * band, so the glyph gradient's 50% stop below lands on the same pixel as this
 * background's 50% stop. Asymmetric padding would split the two seams apart.
 */
.band {
  /* Fallback for engines without glyph clipping — see the @supports block. */
  background: var(--a);
  padding: 72px 20px;
  text-align: center;
}

.band h1 {
  margin: 0;
  font-family: "Bowlby One", system-ui, sans-serif;
  font-size: clamp(40px, 9vw, 88px);
  line-height: 1.05;
  text-transform: lowercase;
  /* Keeps the two composed lines from fraying into three ragged ones on narrow
     phones, where "one decision." at the 40px clamp floor only just fits. */
  text-wrap: balance;
  /* Fallback colour, legal on the solid --a fallback band above (3.13:1).
     NEVER cream: cream on --a measures 2.62:1, below the 3:1 poster floor. */
  color: var(--display-on-a);
}

/* design.md §4.3 "Cross-color seam type": poster-scale seam type (≥40pt, §4.5
   point 1) is one horizontal two-stop hard gradient clipped to the glyphs —
   `B-deep`/displayOnA left of the seam, display-on-B right of it. Both segments
   clear 3:1 where cream on --a does not. §15.1's glass-knockout supersession
   does NOT reach here: it covers only the seam-crossing *name* and keeps
   displayOnA/displayOnB live for exactly this case, "split-band headings".
 *
 * The stop is anchored to the band's 50% seam, not to the glyph bounds, and one
 * gradient covers both lines — §4.3 forbids a per-line glyph-relative gradient.
 *
 * Paired with the band's own split so the two can never disagree: without glyph
 * clipping there is no way to give one text run two colours, and displayOnA is
 * only legal on --a (2.38:1 on --b), so the no-support path drops the split
 * rather than shipping illegible type.
 */
@supports (background-clip: text) or (-webkit-background-clip: text) {
  .band {
    background: linear-gradient(90deg, var(--a) 0 50%, var(--b) 50% 100%);
  }

  .band h1 {
    background: linear-gradient(
      90deg,
      var(--display-on-a) 0 50%,
      var(--display-on-b) 50% 100%
    );
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}

.prose {
  max-width: 68ch;
  margin: 0 auto;
  padding: 40px 20px 64px;
}

/* Document title on a cream reading surface — the legal pages, which are the
   only pages with an <h1> outside the split band. Bowlby One, sized just above
   the 24px .prose h2 so a long document keeps a readable two-level hierarchy;
   NOT the band's clamp, which is poster scale and would dwarf a policy. */
.prose h1 {
  font-family: "Bowlby One", system-ui, sans-serif;
  font-size: 34px;
  line-height: 1.15;
  margin: 0 0 8px;
}

.prose h2 {
  font-family: "Bowlby One", system-ui, sans-serif;
  font-size: 24px;
  margin: 40px 0 12px;
}

.prose h3 {
  font-size: 17px;
  font-weight: 700;
  margin: 28px 0 8px;
}

.lede { font-size: 19px; }

.prose ul { padding-left: 20px; }
.prose li { margin-bottom: 10px; }

.prose a { color: var(--display-on-a); }

.updated {
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.75;
}

.fine { font-size: 14px; }

.site-foot {
  border-top: 2px solid var(--ink);
  padding: 24px 20px 48px;
  font-size: 14px;
}

.site-foot nav { display: flex; gap: 20px; flex-wrap: wrap; }
.site-foot a { color: var(--ink); }

/* .prose, not main — main must stay gutterless so .band reaches both edges. */
@media (min-width: 720px) {
  .site-head, .site-foot, .prose { padding-left: 40px; padding-right: 40px; }
}
/* Print — this rule is about the LANDING page, and only about it. The legal
   documents print fine untouched: their <h1> lives in .prose, which is flat
   ink on cream and has no glyph-clipped paint to lose. `.band h1` exists on no
   other page.
 *
 * The landing headline is painted by a gradient clipped to its glyphs, with
 * `color: transparent` underneath, and browsers print with background graphics
 * OFF by default. That breaks two different ways, both verified in Chrome:
 * an engine that drops every background leaves `color: transparent` behind and
 * prints a blank rectangle; Chrome instead drops the band's violet/orange but
 * keeps the glyph gradient, whose right half is CREAM — invisible on white
 * paper, so everything past the seam disappears. Repainting with a real ink
 * fill fixes both. display-on-a measures 9.33:1 on white.
 *
 * -webkit-text-fill-color is restored explicitly because Blink/WebKit treat it
 * as the winning paint for text when it has been engaged; setting `color`
 * alone is not reliably enough to undo a glyph-clipped fill.
 *
 * One rule is all this block needs: the head/foot rules are borders and the
 * body ink is a dark brown, both of which print without background graphics.
 * Do not add `background: #fff` — the cream is a background and is already
 * dropped, and forcing white would only fight a reader who has deliberately
 * turned backgrounds on.
 */
@media print {
  .band h1 {
    color: var(--display-on-a);
    -webkit-text-fill-color: currentColor;
  }
}

/* Password recovery (/reset-password, /auth/callback) — the only form on the
 * public site. Plain cream reading surface like the legal documents: this is a
 * page someone reaches while locked out and mildly alarmed, so it gets the
 * settled treatment, not the split band (design.md §2, "cream means settled").
 *
 * `[hidden]` is asserted explicitly because the script toggles panels with the
 * `hidden` attribute, and `display: flex` on a .panel would otherwise win over
 * the user-agent's `display: none` and show every panel at once.
 */
.panel[hidden], #status[hidden] { display: none; }

.panel form {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: 34ch;
}

.panel label {
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-top: 14px;
}

.panel input {
  font-family: inherit;
  font-size: 16px;
  padding: 10px 12px;
  color: var(--ink);
  background: #fff;
  border: 2px solid var(--ink);
  border-radius: 0;
}

.panel input:focus-visible,
.panel button:focus-visible {
  outline: 3px solid var(--display-on-a);
  outline-offset: 2px;
}

.panel button {
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  margin-top: 22px;
  padding: 12px 20px;
  color: var(--cream);
  background: var(--display-on-a);
  border: 2px solid var(--ink);
  cursor: pointer;
  align-self: flex-start;
}

/* A status line that only ever appears after something happened, so it needs
 * to read as an interruption of the prose, not as more prose. */
.notice {
  border-left: 4px solid var(--ink);
  padding: 10px 14px;
  margin: 20px 0 0;
  background: #fff;
}

/* NOT red-on-cream: --b (#E8471C) measures 3.29:1 on the cream ground, under
 * the 4.5:1 body-text floor. The border carries the alarm and the text keeps
 * full-contrast ink, so the message is legible and the state is still obvious
 * without relying on colour alone.
 */
.notice.error { border-left-color: var(--b); }