/* ================================================================
     Looking Back design system v0.6 — Parchment & Terracotta.

     A warm apothecary journal, not a clinical dashboard. Three rules
     hold the whole thing together:

     1. ELEVATION IS A COLOR STEP, NEVER A SHADOW. Parchment canvas →
        aged-paper card → deeper wash. Shadows exist only for things
        that genuinely float (menus, lightbox, toast).
     2. THE ACCENT IS RATIONED. Terracotta gets exactly three jobs:
        filled primary actions, active/selected states, and eyebrow
        labels. Never body text, never a large fill, never decoration.
     3. MONO IS FOR NUMBERS AND DATES. Not for section titles, not for
        every label. Small structural labels are sans at 600 weight
        with open tracking — mono at 10px everywhere is what made the
        old system read busy.

     Type: Newsreader (editorial serif) carries headlines and the
     content the user wrote, and pairs roman with italic inside a
     single line — that mix is the signature. Instrument Sans carries
     the interface. JetBrains Mono carries numerals.
     ================================================================ */
  :root {
    --bg: #F2ECDF;           /* Bone — the daylight ground, warm, never white */
    --surface: #E9E1D0;      /* A VISIBLE step up from the canvas */
    --surface-2: #DCD2BD;    /* Deeper wash — nested blocks, hover, inputs on cards */
    --ink: #241118;          /* Plum, carried straight over from the dark world */
    --ink-2: #47343D;        /* Body copy */
    /* Both secondary tiers clear WCAG AA (4.5:1) on the surface tier, so they
       sit closer together than a typical muted/faint pair. The step between
       metadata and body is carried by size and weight instead. */
    --muted: #6B5760;        /* Secondary text — 5.1:1 on surface */
    --faint: #6F5A62;        /* Tertiary, timestamps, placeholder — 4.8:1 */
    --accent: #57620F;       /* Citron, taken down far enough to read on bone */
    --accent-deep: #3F480A;  /* Pressed */
    --accent-soft: #E4E8C2;  /* Citron-tinted paper */
    --on-accent: #F6F2E6;    /* Text on any filled accent */
    --field: #241118;        /* Plum — the one dark field (book cover, hero) */
    --field-deep: #150A10;
    --field-ink: #EFE7D3;    /* Text on the dark field */
    --field-soft: #EFE7DA;   /* Quiet selected state */
    --sad: #9E3F55;          /* Frustrations — the ember tier */
    --happy: #41633F;        /* Growth */
    --amber: #7E5F26;        /* Streaks, anniversaries — the gilt tier */
    --amber-soft: #F0E4CB;
    --warn: #993122;         /* Missed periods, invalid */
    --border: #D9CEB7;       /* Hairlines */
    --line: #E4DBC7;         /* Softer hairlines */
    --shadow: none;
    --shadow-lift: 0 18px 50px -14px rgba(36,17,24,0.26);
    --grain-opacity: 0;

    /* One rounded family. Rectangles and 2px radii broke the system, so the
       landing page's hard edges deliberately stop at the app's door. */
    --r-card: 24px;
    --r-md: 16px;
    --r-sm: 10px;
    --r-pill: 999px;

    --serif: "Fraunces", Georgia, "Times New Roman", serif;
    --sans: "Karla", -apple-system, "Segoe UI", system-ui, sans-serif;
    --mono: "Space Mono", ui-monospace, "Cascadia Mono", monospace;
  }
  :root[data-theme="dark"] {
    /* The Nightbook world itself: the same plum the landing page is lit in. */
    --bg: #150A10;
    --surface: #241118;
    --surface-2: #32202A;
    --ink: #EFE7D3;
    --ink-2: #D6CBBA;
    --muted: #C9B9BC;
    --faint: #9A8590;
    --accent: #C9D64B;
    --accent-deep: #D9E465;
    --accent-soft: #2C3212;
    --on-accent: #22240A;
    --field: #2E1A24;
    --field-deep: #150A10;
    --field-ink: #EFE7D3;
    --field-soft: #2C1A23;
    --sad: #D9738A;
    --happy: #96BE84;
    --amber: #C7A868;
    --amber-soft: #382B18;
    --warn: #E0705C;
    --border: #3B2530;
    --line: #2B1922;
    --shadow: none;
    --shadow-lift: 0 18px 50px -14px rgba(0,0,0,0.6);
    --grain-opacity: 0;
  }

  * { box-sizing: border-box; }
  html, body { height: 100%; }
  body {
    margin: 0;
    font-family: var(--sans);
    background: var(--bg);
    color: var(--ink-2);
    line-height: 1.55;
    font-size: 15px;
    letter-spacing: -0.011em;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }
  ::selection { background: color-mix(in srgb, var(--accent) 26%, transparent); color: var(--ink); }

  /* ---------- Editorial voice ----------
     Newsreader carries anything the user wrote and anything Looking Back says
     back. The roman + italic mix inside one headline is the signature:
     the italic word is the emotional one, the roman words set it up.
     Italic is display-only — never a UI label, never body copy. */
  .editorial {
    font-family: var(--serif);
    font-weight: 400;
    letter-spacing: -0.018em;
    color: var(--ink);
  }
  .editorial em, .ed-em {
    font-style: italic;
    font-weight: 300;
  }

  /* Eyebrow: the small label above a heading. Sans at 600 with open
     tracking, NOT 10px mono — mono everywhere is what made v0.5 busy. */
  .date-range {
    display: block;
    font-family: var(--sans);
    font-weight: 600;
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: 0.11em;
    color: var(--accent);
    margin: 0 0 10px;
  }
  /* Numerals, dates and tallies — the only place mono is allowed */
  .num { font-family: var(--mono); font-variant-numeric: tabular-nums; }

  /* ---------- Card: the surface primitive ----------
     One shape for everything. No border, no shadow — a card is visible
     because aged paper sits a real step above parchment. */
  .card {
    background: var(--surface);
    border: none;
    border-radius: var(--r-card);
    padding: 28px 30px;
    margin-bottom: 18px;
  }
  .card-quiet { background: none; padding: 0 4px; margin-bottom: 34px; }
  .card-head {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 14px; flex-wrap: wrap; margin-bottom: 18px;
  }
  .card-head .card-title { margin: 0; }
  .card-title {
    font-family: var(--sans);
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--muted);
    margin: 0 0 16px;
  }
  .card-tally { font-family: var(--mono); font-size: 11.5px; color: var(--faint); font-variant-numeric: tabular-nums; }
  .card-link {
    background: none; border: none; cursor: pointer; padding: 0;
    font-family: var(--sans); font-size: 13.5px; font-weight: 600; color: var(--accent);
  }
  .card-link:hover { text-decoration: underline; text-underline-offset: 3px; }

  /* ---------- Dashboard hero ----------
     One statement and one number. Everything else on Insights is
     subordinate to this block. */
  .hero {
    background: var(--field);
    color: var(--field-ink);
    border-radius: var(--r-card);
    padding: 38px 36px 34px;
    margin-bottom: 14px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 30px 40px;
    align-items: end;
  }
  .hero-eyebrow {
    font-family: var(--sans); font-weight: 600; font-size: 11.5px;
    text-transform: uppercase; letter-spacing: 0.13em;
    color: color-mix(in srgb, var(--field-ink) 62%, transparent);
    margin: 0 0 18px;
  }
  .hero-title {
    font-family: var(--serif); font-weight: 400;
    font-size: clamp(34px, 4.6vw, 52px);
    line-height: 1.02;
    letter-spacing: -0.026em;
    margin: 0;
    color: var(--field-ink);
    text-wrap: balance;
  }
  .hero-title em { font-style: italic; font-weight: 300; }
  .hero-sub {
    font-size: 15px; line-height: 1.5; margin: 16px 0 0; max-width: 46ch;
    color: color-mix(in srgb, var(--field-ink) 72%, transparent);
  }
  .hero-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 26px; }
  .hero button.primary { background: var(--accent); color: var(--on-accent); }
  .hero button.primary:hover { background: var(--accent-deep); }
  .hero button.secondary {
    color: var(--field-ink);
    border-color: color-mix(in srgb, var(--field-ink) 34%, transparent);
  }
  .hero button.secondary:hover {
    background: color-mix(in srgb, var(--field-ink) 12%, transparent);
    border-color: color-mix(in srgb, var(--field-ink) 55%, transparent);
  }
  /* The metric that shares the hero: mood, big, with its own trend */
  .hero-metric { text-align: right; min-width: 190px; }
  .hero-metric-val {
    font-family: var(--serif); font-weight: 400;
    font-size: 78px; line-height: 0.86; letter-spacing: -0.04em;
    font-variant-numeric: tabular-nums; color: var(--field-ink);
  }
  .hero-metric-label {
    font-family: var(--sans); font-weight: 600; font-size: 11px;
    text-transform: uppercase; letter-spacing: 0.13em; margin-top: 12px;
    color: color-mix(in srgb, var(--field-ink) 58%, transparent);
  }
  .hero-spark { margin-top: 14px; display: block; margin-left: auto; }
  .hero-delta {
    font-family: var(--mono); font-size: 11.5px; margin-top: 10px;
    color: color-mix(in srgb, var(--field-ink) 66%, transparent);
    font-variant-numeric: tabular-nums;
  }
  .hero-delta.up { color: #96BE84; }
  .hero-delta.down { color: #D9738A; }

  /* ---------- Feature card: the AI reading ----------
     The note is the product, so it gets the largest surface on the page
     and is set in the editorial serif. */
  .feature {
    background: var(--surface);
    border-radius: var(--r-card);
    padding: 32px 34px;
    margin-bottom: 18px;
  }
  .feature-eyebrow {
    font-family: var(--sans); font-weight: 600; font-size: 11.5px;
    text-transform: uppercase; letter-spacing: 0.11em;
    color: var(--accent); margin: 0 0 16px;
  }

  /* ---------- App shell: top bar + main ---------- */
  .app {
    display: flex;
    flex-direction: column;
    height: 100dvh;
    overflow: hidden;
  }
  /* Opaque, and deliberately NOT backdrop-filtered. Two reasons: `main` is
     the scroll container in this shell, so nothing ever passes under the bar
     and there is nothing to blur; and backdrop-filter would make the topbar a
     containing block for `position: fixed` descendants, which silently breaks
     the mobile bottom nav (it would anchor to the 63px bar instead of the
     viewport). Same trap applies to transform, filter and will-change. */
  .topbar {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 0 clamp(18px, 4vw, 44px);
    height: 70px;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    z-index: 100;
  }
  .brand {
    display: flex;
    align-items: center;
    gap: 11px;
    font-family: var(--serif);
    font-weight: 400;
    font-size: 24px;
    letter-spacing: -0.03em;
    color: var(--ink);
    text-decoration: none;
    flex-shrink: 0;
  }
  .brand-mark { width: 27px; height: 21px; color: var(--accent); flex-shrink: 0; }
  .brand-mark rect { fill: var(--field); }

  /* Nav is a segmented pill, not a row of underlined tabs. The active
     item is a filled espresso capsule — the same rounded family as every
     button, so the chrome reads as one system. */
  .nav {
    display: flex;
    align-items: center;
    gap: 2px;
    flex: 1;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
    padding: 4px;
    background: var(--surface);
    border-radius: var(--r-pill);
    justify-content: center;
  }
  .nav::-webkit-scrollbar { display: none; }
  .nav-item {
    background: none;
    border: none;
    border-radius: var(--r-pill);
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 500;
    letter-spacing: -0.012em;
    color: var(--muted);
    cursor: pointer;
    padding: 9px 17px;
    white-space: nowrap;
    transition: color 0.18s ease-out, background 0.18s ease-out;
  }
  .nav-item:hover { color: var(--ink); background: color-mix(in srgb, var(--surface-2) 70%, transparent); }
  .nav-item.active {
    background: var(--field);
    color: var(--field-ink);
    font-weight: 600;
  }
  .nav-item.active:hover { background: var(--field); color: var(--field-ink); }

  .top-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
  .icon-btn {
    background: none;
    border: 1px solid transparent;
    color: var(--muted);
    cursor: pointer;
    padding: 9px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: inherit;
    transition: background 0.18s ease-out, color 0.18s ease-out;
  }
  .icon-btn:hover { background: var(--surface); color: var(--ink); }
  .icon-btn svg { width: 18px; height: 18px; }

  .user-wrap { position: relative; }
  .avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--field);
    color: var(--field-ink);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    border: none;
    font-family: var(--serif);
  }
  .menu {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    background: var(--surface);
    border: none;
    border-radius: var(--r-md);
    box-shadow: var(--shadow-lift);
    min-width: 246px;
    padding: 8px;
    display: none;
    z-index: 300;
  }
  .menu.open { display: block; animation: menuIn 0.16s ease-out; }
  /* Slide only. Fading the whole element in made its background translucent for
     the first frames, so the page showed through and the labels read as
     overlapping the content behind them. */
  @keyframes menuIn { from { transform: translateY(-4px); } to { transform: none; } }
  .menu-header { padding: 10px 13px 13px; border-bottom: 1px solid var(--border); margin-bottom: 6px; }
  .menu-name { font-weight: 600; font-size: 14.5px; color: var(--ink); }
  .menu-sub { font-size: 12px; color: var(--muted); margin-top: 3px; }
  .menu-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: none;
    border: none;
    color: var(--ink);
    padding: 10px 13px;
    border-radius: var(--r-sm);
    font-size: 14px;
    cursor: pointer;
    font-family: inherit;
    text-align: left;
  }
  .menu-item:hover { background: var(--surface-2); }
  a.menu-item { text-decoration: none; }
  .menu-item .right { font-family: var(--mono); font-size: 10.5px; color: var(--faint); }

  /* ---------- Main column ----------
     Two widths. Dashboard views (Insights, Goals, Archive, Threads) get
     the wide canvas so tiles and grids have room; anything you read or
     write in stays at a single comfortable measure. */
  main { flex: 1; overflow-y: auto; min-height: 0; }
  .container {
    max-width: 1080px;
    margin: 0 auto;
    padding: clamp(28px, 4.5vh, 46px) clamp(18px, 3.5vw, 36px) 110px;
  }
  .view { display: none; }
  .view.active { display: block; animation: viewIn 0.4s ease-out; }
  .view[data-width="reading"] { max-width: 720px; margin: 0 auto; }
  @keyframes viewIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

  /* ---------- View header ----------
     Eyebrow + serif headline. The old kicker/h2/subtitle/double-rule
     stack put four pieces of chrome above the content; the rule is gone
     and the subtitle only appears where it earns its place. */
  .view-head { margin-bottom: 30px; }
  h2 {
    font-family: var(--serif);
    font-size: clamp(34px, 4.6vw, 50px);
    line-height: 1.02;
    margin: 0;
    font-weight: 400;
    letter-spacing: -0.028em;
    color: var(--ink);
    text-wrap: balance;
  }
  h2 em { font-style: italic; font-weight: 300; }
  .subtitle {
    color: var(--muted);
    margin: 14px 0 0;
    font-size: 16px;
    line-height: 1.55;
    max-width: 58ch;
  }
  /* Kept as a no-op so existing markup doesn't leave a stray line. The
     headline and the whitespace under it do the separating now. */
  .view-rule { border: none; height: 0; margin: 0 0 26px; }

  /* ---------- Sections inside a card ----------
     A section is a labelled run of content. On the writing form each one
     is its own aged-paper card; elsewhere it stays quiet. */
  .section {
    background: none;
    border: none;
    border-radius: 0;
    padding: 0;
    margin-bottom: 34px;
    box-shadow: none;
  }
  /* On the writing form, in settings and in export, each labelled section
     is its own aged-paper card. That gives the long forms the same surface
     rhythm as the dashboard instead of one undivided wall of fields. */
  #view-write .section,
  #view-settings .section,
  #view-export .section,
  #view-review .section,
  #view-detail .section,
  #view-goals .section,
  .capture-recall {
    background: var(--surface);
    border-radius: var(--r-card);
    padding: 26px 28px;
    margin-bottom: 14px;
  }
  /* A card nested inside a card steps down again, or it disappears */
  .section .goal-edit-card, .section .ai-slot, .section .prompt-box { background: var(--surface-2); }
  .section.invalid { box-shadow: inset 3px 0 0 var(--warn); }
  #view-write .section.invalid { background: color-mix(in srgb, var(--warn) 5%, var(--surface)); }
  .section-title {
    font-family: var(--sans);
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--muted);
    margin: 0 0 16px;
    display: flex;
    align-items: center;
    gap: 9px;
  }
  .section-title .dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
  .sad .dot { background: var(--sad); }
  .happy .dot { background: var(--happy); }
  .free .dot { background: var(--amber); }
  .custom .dot, .sec-dot.custom { background: var(--muted); }
  .section-count {
    margin-left: auto; font-family: var(--mono); font-size: 10.5px; font-weight: 400;
    letter-spacing: 0.02em; text-transform: none; color: var(--faint);
  }
  .sections-link {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px 12px;
    margin: 0 0 14px; font-size: 13.5px; color: var(--muted);
  }
  .sections-link button { padding: 8px 18px; font-size: 13px; }
  /* A one-row section is written in full, like free writing */
  #write-sections textarea, .section.list textarea { min-height: 130px; }

  /* Entry sections in Settings: one line each, controls wrap under the name on a phone */
  .sec-row {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px;
    padding: 12px 0; border-bottom: 1px solid var(--border);
  }
  .sec-main { flex: 1 1 220px; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
  .sec-main .sec-rename-input { flex: 1 1 180px; margin-bottom: 0; }
  .sec-rename-actions { display: inline-flex; gap: 6px; }
  .sec-btn { padding: 8px 14px; font-size: 13px; }
  .sec-name { display: inline-flex; align-items: center; gap: 9px; font-size: 15px; color: var(--ink); overflow-wrap: anywhere; }
  .sec-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
  .sec-dot.happy { background: var(--happy); }
  .sec-dot.sad { background: var(--sad); }
  .sec-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
  .sec-rows { display: inline-flex; align-items: center; gap: 2px; }
  .sec-rows-n { font-family: var(--mono); font-size: 11.5px; color: var(--muted); min-width: 44px; text-align: center; }
  .sec-step {
    background: none; border: 1px solid var(--border); border-radius: 50%; cursor: pointer;
    width: 28px; height: 28px; padding: 0; line-height: 1; font-size: 14px; color: var(--muted);
  }
  .sec-step:hover:not(:disabled) { color: var(--accent); border-color: var(--accent); }
  .sec-step:disabled { opacity: 0.35; cursor: default; }
  .sec-remove:hover { color: var(--warn); }
  .sec-note { font-size: 13px; line-height: 1.5; color: var(--muted); margin: 0 0 6px; }
  .sec-note:last-child { margin: 10px 0 0; }
  .sec-add { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 6px; }
  .sec-add input { flex: 1 1 220px; margin-bottom: 0; }
  .mood .dot { background: var(--accent); }
  .photos .dot { background: var(--sad); }

  /* ---------- Inputs ----------
     Single-line fields are fully pill-shaped, textareas take the card
     radius. Focus is a soft terracotta ring, never a hard border jump. */
  input[type="text"], input[type="password"], input[type="email"], textarea {
    width: 100%;
    border: 1px solid var(--border);
    border-radius: var(--r-pill);
    padding: 12px 18px;
    font-family: inherit;
    font-size: 15px;
    letter-spacing: -0.011em;
    background: var(--bg);
    color: var(--ink);
    margin-bottom: 8px;
    resize: vertical;
    transition: border-color 0.18s ease-out, box-shadow 0.18s ease-out;
  }
  input[type="text"]:focus, input[type="password"]:focus, input[type="email"]:focus, textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
    background: var(--bg);
  }
  input.invalid, textarea.invalid {
    border-color: var(--warn);
    background: color-mix(in srgb, var(--warn) 5%, var(--bg));
  }
  .section.invalid { border-color: var(--warn); }
  textarea {
    min-height: 190px;
    line-height: 1.7;
    border-radius: var(--r-md);
    padding: 16px 18px;
  }
  /* Six months of reflection needs room. Fills the screen, still grows past it. */
  textarea.longform {
    min-height: min(62vh, 640px);
    font-family: var(--serif);
    font-size: 18px;
    line-height: 1.75;
    letter-spacing: -0.005em;
    resize: vertical;
  }
  input::placeholder, textarea::placeholder { color: var(--faint); opacity: 1; }
  /* Shortcut hint. Pointer-only: it's noise on a phone, where there are no keys. */
  .kbd-hint {
    margin: 16px 0 0; font-family: var(--sans); font-size: 12.5px;
    color: var(--faint); line-height: 2;
  }
  .save-missing {
    margin: 10px 0 0; font-family: var(--sans); font-size: 13px;
    color: var(--muted); display: none;
  }
  .save-missing.show { display: block; }
  .kbd-hint kbd {
    font-family: var(--mono); font-size: 11px;
    padding: 3px 6px; border-radius: 5px;
    background: var(--surface-2); color: var(--muted);
    border: 1px solid var(--border);
  }
  @media (hover: none), (max-width: 620px) { .kbd-hint { display: none; } }
  .draft-stamp {
    font-family: var(--mono); font-size: 10.5px;
    color: var(--faint); margin: 10px 0 0; min-height: 14px;
  }
  select {
    width: 100%;
    border: 1px solid var(--border);
    border-radius: var(--r-pill);
    padding: 12px 18px;
    font-family: inherit;
    font-size: 15px;
    background: var(--bg);
    color: var(--ink);
    margin-bottom: 8px;
  }
  select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
  /* Backfill control: a quiet one-line button, not a banner */
  .group-line { text-align: right; margin: -6px 0 14px; }
  .ghost-btn {
    background: none; border: none; cursor: pointer; padding: 4px 0;
    font-family: inherit; font-size: 13px; color: var(--muted);
    text-decoration: underline; text-underline-offset: 3px;
  }
  .ghost-btn:hover { color: var(--ink); }

  /* Numbered list rows — the five-and-five. Still ruled-paper lines
     rather than five stacked pills: typing a list should feel like
     writing down a list, not filling in a form. */
  .input-row { display: flex; align-items: center; gap: 12px; margin-bottom: 2px; }
  .add-row {
    background: none; border: none; cursor: pointer;
    font-family: var(--sans); font-size: 13px; font-weight: 600;
    color: var(--accent); padding: 12px 0 0 34px; text-align: left;
  }
  .add-row:hover { text-decoration: underline; text-underline-offset: 3px; }
  .row-num {
    font-family: var(--mono);
    color: var(--faint);
    font-size: 12px;
    width: 20px;
    text-align: right;
    display: inline-block;
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
  }
  .input-row input {
    margin-bottom: 0;
    flex: 1;
    min-width: 0;
    width: auto;
    border: none;
    border-bottom: 1px solid var(--border);
    border-radius: 0;
    background: transparent;
    padding: 11px 2px;
  }
  .input-row input:focus {
    box-shadow: none;
    background: transparent;
    border-bottom-color: var(--accent);
  }
  .input-row input.invalid {
    background: transparent;
    border-bottom-color: var(--warn);
  }

  /* ---------- Buttons ----------
     Always pills. The secondary is an outlined terracotta at the same
     height as the primary, never subordinate in size. */
  .actions { display: flex; gap: 10px; margin-top: 26px; flex-wrap: wrap; align-items: center; }
  button.primary {
    background: var(--accent);
    color: var(--on-accent);
    border: 1.5px solid var(--accent);
    padding: 12px 26px;
    border-radius: var(--r-pill);
    font-size: 14.5px;
    cursor: pointer;
    font-family: inherit;
    font-weight: 600;
    letter-spacing: -0.012em;
    box-shadow: none;
    transition: background 0.15s ease-out, border-color 0.15s ease-out;
  }
  :root[data-theme="dark"] button.primary { color: var(--field-deep); }
  button.primary:hover, button.primary:active { background: var(--accent-deep); border-color: var(--accent-deep); }
  /* Save before the entry is complete: grey, but still pressable to show what's missing */
  #save-btn.not-ready, #save-btn.not-ready:hover {
    background: var(--surface-2); border-color: var(--border); color: var(--muted); box-shadow: none;
  }
  button.primary:disabled {
    background: var(--surface-2);
    border-color: var(--surface-2);
    color: var(--faint);
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
  }
  button.secondary {
    background: none;
    color: var(--accent);
    border: 1.5px solid color-mix(in srgb, var(--accent) 45%, transparent);
    padding: 12px 24px;
    border-radius: var(--r-pill);
    font-size: 14.5px;
    font-weight: 600;
    letter-spacing: -0.012em;
    cursor: pointer;
    font-family: inherit;
    box-shadow: none;
    transition: background 0.18s ease-out, border-color 0.18s ease-out;
  }
  button.secondary:hover { background: var(--accent-soft); border-color: var(--accent); }
  button.danger {
    background: none;
    color: var(--warn);
    border: 1.5px solid color-mix(in srgb, var(--warn) 35%, transparent);
    padding: 9px 18px;
    border-radius: var(--r-pill);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.18s ease-out, border-color 0.18s ease-out;
  }
  button.danger:hover { background: color-mix(in srgb, var(--warn) 8%, transparent); border-color: var(--warn); }
  .danger-zone {
    border: 1.5px solid color-mix(in srgb, var(--warn) 60%, transparent);
    border-left-width: 6px;
    border-radius: var(--radius);
    background: color-mix(in srgb, var(--warn) 7%, transparent);
    padding: 22px 24px;
    margin-top: 40px;
  }
  .danger-zone .section-title { color: var(--warn); font-weight: 700; }
  .danger-zone .section-title::before { content: "⚠ "; }
  .file-button {
    display: inline-flex; align-items: center; min-height: 40px; padding: 9px 18px;
    border: 1.5px solid var(--border); border-radius: 3px; background: var(--surface);
    color: var(--ink); font: 600 13px var(--sans); cursor: pointer;
    transition: background .18s ease-out, border-color .18s ease-out;
  }
  .file-button:hover { background: var(--accent-soft); border-color: var(--accent); }
  .file-button:focus-within { outline: 2px solid var(--accent); outline-offset: 3px; }
  .visually-hidden-file { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

  /* A result that stays on screen. Toasts slide away, which is fine for "saved"
     and wrong for "your account already exists" or "your password is set" —
     the answers people come back and look for. */
  .form-note { font-size: 13px; line-height: 1.5; margin: 10px 0 0; display: none; }
  .form-note.show { display: block; }
  .form-note.ok { color: var(--happy); }
  .form-note.bad { color: var(--warn); }
  .del-check { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; color: var(--muted); line-height: 1.5; }
  .del-check input { width: auto; margin: 2px 0 0; flex: none; }

  .toolbar { display: flex; gap: 10px; margin-bottom: 22px; align-items: center; }
  .toolbar input { flex: 1; margin-bottom: 0; }

  /* ---------- Mood scale ---------- */
  .mood-row { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
  .mood-emoji {
    font-family: var(--serif);
    font-size: 54px;
    font-weight: 400;
    line-height: 1;
    width: 64px;
    text-align: center;
    letter-spacing: -0.035em;
    color: var(--accent);
    font-variant-numeric: tabular-nums;
    user-select: none;
  }
  .mood-scale { display: flex; gap: 6px; flex: 1; min-width: 230px; }
  .mood-dot {
    flex: 1;
    aspect-ratio: 1;
    max-width: 36px;
    border-radius: 50%;
    background: transparent;
    border: 1px solid var(--border);
    cursor: pointer;
    font-family: var(--mono);
    font-size: 11px;
    color: var(--muted);
    transition: all 0.15s ease-out;
    padding: 0;
  }
  .mood-dot:hover { border-color: var(--accent); color: var(--accent); }
  .mood-dot.active {
    background: var(--accent);
    color: var(--on-accent);
    border-color: var(--accent);
    transform: scale(1.14);
    font-weight: 600;
  }
  :root[data-theme="dark"] .mood-dot.active { color: var(--field-deep); }
  .mood-label { font-size: 14px; color: var(--muted); min-width: 88px; text-align: right; }

  /* ---------- Session timer ---------- */
  .write-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 22px;
  }
  .session-timer {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-family: var(--mono);
    font-size: 12px;
    color: var(--muted);
    background: var(--surface);
    border-radius: var(--r-pill);
    padding: 8px 16px;
    font-variant-numeric: tabular-nums;
  }
  .timer-dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--accent);
    animation: timerPulse 2s ease-in-out infinite;
  }
  @keyframes timerPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
  .timer-target { color: var(--muted); }
  .session-timer.done .timer-dot { background: var(--amber); animation: none; }

  /* ---------- Entry list + periods ----------
     A period is one aged-paper card; the weeks inside it are rows split
     by hairlines. That gives the surface step without turning the
     archive into fifty floating boxes. */
  .entry-card {
    background: none;
    border: none;
    border-bottom: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: 18px 20px;
    margin-bottom: 0;
    cursor: pointer;
    transition: background 0.18s ease-out;
    box-shadow: none;
  }
  .entry-card:hover { background: var(--surface-2); }
  .entry-date {
    font-family: var(--serif); font-weight: 400; margin: 0 0 6px;
    font-size: 21px; letter-spacing: -0.022em; color: var(--ink);
  }
  .entry-mood {
    display: inline-block;
    margin-left: 10px;
    font-family: var(--mono);
    font-size: 10.5px;
    color: var(--faint);
    vertical-align: middle;
    font-variant-numeric: tabular-nums;
  }
  .entry-thumbs { display: flex; gap: 7px; margin-top: 12px; }
  .entry-thumbs img {
    width: 46px; height: 46px; object-fit: cover; border-radius: var(--r-sm);
    border: none; background: var(--surface-2);
  }
  .entry-tag {
    display: inline-block;
    margin-left: 10px;
    padding: 3px 11px;
    border-radius: var(--r-pill);
    background: var(--amber-soft);
    color: var(--amber);
    font-family: var(--sans);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    vertical-align: middle;
  }
  .entry-preview {
    color: var(--muted);
    font-size: 14.5px;
    line-height: 1.55;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  details.period {
    margin-bottom: 18px;
    background: var(--surface);
    border-radius: var(--r-card);
    padding: 24px 14px 14px;
  }
  details.period > summary {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    cursor: pointer;
    list-style: none;
    margin: 0 8px 10px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border);
  }
  details.period:not([open]) > summary { margin-bottom: 0; padding-bottom: 4px; border-bottom: none; }
  details.period > summary::-webkit-details-marker { display: none; }
  .period-left { display: flex; align-items: baseline; gap: 11px; }
  .chev { color: var(--faint); font-size: 11px; transition: transform 0.15s ease-out; display: inline-block; }
  details.period[open] > summary .chev { transform: rotate(90deg); }
  .period-range { font-family: var(--serif); font-size: 24px; font-weight: 400; color: var(--ink); letter-spacing: -0.026em; }
  .period-meta { font-family: var(--mono); font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
  .period-missed { color: var(--warn); font-weight: 500; }
  .period-current {
    background: var(--accent);
    color: var(--on-accent);
    font-family: var(--sans);
    font-size: 10px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: var(--r-pill);
    margin-right: 8px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
  }
  :root[data-theme="dark"] .period-current { color: var(--field-deep); }
  .missed-marker {
    display: flex;
    align-items: center;
    gap: 9px;
    color: var(--warn);
    font-family: var(--sans);
    font-size: 12.5px;
    font-weight: 500;
    margin: 0 0 12px;
    padding-left: 20px;
  }
  .missed-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--warn); flex-shrink: 0; }

  .period-goals-cat { margin-bottom: 10px; }
  .period-goals-cat:last-child { margin-bottom: 0; }
  .pg-label { font-family: var(--sans); font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--accent); font-weight: 600; }
  .pg-list { margin: 6px 0 0; padding-left: 18px; font-size: 14.5px; }
  .pg-status { color: var(--accent); font-weight: 600; }
  .pg-status.part { color: var(--amber); }
  .pg-status.miss { color: var(--warn); }
  .pg-tally { color: var(--accent); font-weight: 600; }
  /* The text takes the slack so three mark buttons never get pushed onto
     their own line. Only the note is meant to wrap to a full row. */
  .pg-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 4px 0; flex-wrap: wrap; }
  .pg-text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
  .pg-item.miss .pg-text { color: var(--muted); }
  .pg-note { flex-basis: 100%; margin: 2px 0 6px; font-size: 12.5px; font-style: italic; color: var(--muted); line-height: 1.5; }
  .pg-actions { display: inline-flex; gap: 4px; flex-shrink: 0; }
  .pg-mark {
    width: 28px; height: 26px; padding: 0; border: 1px solid var(--border); border-radius: var(--r-pill);
    background: var(--bg); color: var(--muted); font-size: 12px; line-height: 1;
    cursor: pointer; transition: border-color 0.15s ease-out, color 0.15s ease-out, background 0.15s ease-out;
  }
  .pg-mark:hover { border-color: var(--ink); color: var(--ink); }
  .pg-mark.hit.on { color: var(--happy); border-color: var(--happy); background: color-mix(in srgb, var(--happy) 12%, var(--bg)); }
  .pg-mark.part.on { color: var(--amber); border-color: var(--amber); background: var(--amber-soft); }
  .pg-mark.miss.on { color: var(--warn); border-color: var(--warn); background: color-mix(in srgb, var(--warn) 9%, var(--bg)); }

  /* Closing out last period's goals — rows inside the period card */
  .followup-card {
    border: none; border-bottom: 1px solid var(--border); border-left: none;
    border-radius: var(--r-md);
    padding: 22px 20px 24px; margin-bottom: 0; background: none; box-shadow: none;
  }
  .followup-card.unanswered { background: color-mix(in srgb, var(--amber-soft) 45%, transparent); }
  .fu-cat {
    font-family: var(--sans); font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em;
    font-weight: 600; margin: 0 0 10px; display: flex; align-items: center; gap: 10px;
  }
  .fu-auto {
    font-size: 9.5px; letter-spacing: 0.09em; color: var(--accent); font-weight: 600;
    background: var(--accent-soft);
    padding: 3px 9px; border-radius: var(--r-pill);
  }
  .fu-remaining {
    font-size: 14px; color: var(--amber); margin: 18px 0 0;
  }
  .fu-remaining.done { color: var(--happy); }
  .fu-text { font-family: var(--serif); font-size: 22px; line-height: 1.28; letter-spacing: -0.022em; margin: 0; color: var(--ink); }
  .fu-desc { font-size: 13.5px; color: var(--muted); line-height: 1.55; margin: 9px 0 0; }
  .fu-btns { display: flex; gap: 8px; margin-top: 18px; flex-wrap: wrap; }
  .fu-btn {
    flex: 1; min-width: 120px; padding: 10px 14px; border: 1px solid var(--border);
    border-radius: var(--r-pill); background: var(--bg); color: var(--muted); cursor: pointer;
    font-family: inherit; font-size: 13px; transition: all 0.15s ease-out;
  }
  .fu-btn:hover { border-color: var(--ink); color: var(--ink); }
  .fu-btn.hit.on { background: color-mix(in srgb, var(--happy) 12%, var(--bg)); color: var(--happy); border-color: var(--happy); font-weight: 600; }
  .fu-btn.part.on { background: var(--amber-soft); color: var(--amber); border-color: var(--amber); font-weight: 600; }
  .fu-btn.miss.on { background: color-mix(in srgb, var(--warn) 9%, var(--bg)); color: var(--warn); border-color: var(--warn); font-weight: 600; }
  .fu-note {
    width: 100%; margin: 14px 0 0; min-height: 0; font-size: 14px; line-height: 1.6;
    border: 1px solid var(--border); border-radius: var(--r-md); padding: 12px 15px; background: var(--bg);
    resize: vertical;
  }
  .review-cta { width: 100%; margin-bottom: 14px; }
  .review-block {
    background: none;
    border: none;
    border-bottom: 1px solid var(--border);
    border-radius: 0;
    padding: 0 4px;
    margin-bottom: 0;
    box-shadow: none;
  }
  .review-block > summary {
    cursor: pointer;
    padding: 17px 0;
    font-weight: 600;
    font-size: 14.5px;
    color: var(--ink);
    list-style: none;
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .review-block > summary::-webkit-details-marker { display: none; }
  .review-block > summary .chev { font-size: 11px; }
  .review-block[open] > summary .chev { transform: rotate(90deg); }
  .review-text {
    padding: 0 0 18px; white-space: pre-wrap;
    font-family: var(--serif); font-size: 17.5px; line-height: 1.7;
    letter-spacing: -0.005em; color: var(--ink);
  }
  .review-actions { display: flex; gap: 10px; padding: 0 0 18px; }

  .empty { text-align: center; color: var(--muted); padding: 80px 20px; }
  .empty p { margin: 6px 0; }
  .empty p:first-child { font-family: var(--serif); font-size: 26px; letter-spacing: -0.024em; color: var(--ink); }

  /* ---------- Entry detail ----------
     What you wrote is the content, so it's set in the serif at reading
     size. The chrome around it stays quiet sans. */
  .detail-meta {
    font-family: var(--sans);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
    margin: 0 0 26px;
  }
  .detail-meta strong { color: var(--accent); font-weight: 600; }
  .detail-section { margin-bottom: 30px; }
  .detail-section h3 {
    font-family: var(--sans);
    font-size: 11.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--muted);
    margin: 0 0 12px;
  }
  /* ---------- Edit trail ---------- */
  /* An edited entry keeps what it used to say. The badge is deliberately plain:
     it's a fact about the entry, not a warning about it. */
  .ver-badge {
    display: inline-block;
    margin-left: 10px;
    padding: 2px 9px;
    border-radius: var(--r-pill);
    background: var(--surface-2);
    color: var(--muted);
    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: 0.04em;
    vertical-align: middle;
  }
  .ver-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
  .ver-item { border-bottom: 1px solid var(--line); }
  .ver-head {
    display: flex; align-items: baseline; gap: 10px; width: 100%;
    padding: 12px 2px; cursor: pointer; text-align: left;
    background: none; border: none; font-family: inherit; color: var(--ink);
  }
  .ver-head:hover .ver-when { color: var(--ink); }
  .ver-num { font-family: var(--mono); font-size: 11px; color: var(--accent); flex: none; }
  .ver-when { font-size: 14px; color: var(--muted); transition: color 0.15s ease-out; }
  .ver-note { font-size: 12.5px; color: var(--faint); margin-left: auto; text-align: right; }
  /* An old version is set back behind a rule, so an expanded row can't be
     mistaken for the entry as it stands. */
  .ver-body { padding: 4px 0 20px 18px; border-left: 2px solid var(--line); margin-left: 4px; }
  .ver-body .detail-section { margin-bottom: 20px; }
  .ver-body .detail-section:last-child { margin-bottom: 0; }
  .detail-list { margin: 0; padding-left: 22px; font-size: 15.5px; line-height: 1.6; }
  .detail-list li { margin-bottom: 7px; }
  .detail-none { color: var(--faint); font-size: 14px; margin: 0; }
  .detail-free {
    background: var(--surface);
    border: none;
    border-radius: var(--r-card);
    padding: 26px 28px;
    white-space: pre-wrap;
    font-family: var(--serif);
    font-size: 18px;
    line-height: 1.72;
    letter-spacing: -0.005em;
    color: var(--ink);
  }

  /* ---------- Review banner ----------
     The one moment that outranks everything else on its page, so it keeps
     the espresso field. Everything else on the page is aged paper. */
  .review-banner {
    display: flex; align-items: center; justify-content: space-between;
    gap: 20px; flex-wrap: wrap;
    background: var(--field);
    border: none;
    border-radius: var(--r-card); padding: 30px 32px; margin-bottom: 26px;
  }
  .review-banner-title {
    font-family: var(--serif); font-weight: 400; font-size: 27px;
    color: var(--field-ink); letter-spacing: -0.025em; line-height: 1.1;
  }
  .review-banner-title em { font-style: italic; font-weight: 300; }
  .review-banner-sub {
    font-size: 14.5px; line-height: 1.5; margin-top: 8px; max-width: 480px;
    color: color-mix(in srgb, var(--field-ink) 72%, transparent);
  }
  .review-banner button.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
  .review-banner button.primary:hover { background: var(--accent-deep); border-color: var(--accent-deep); }
  .review-banner button.secondary { border-color: color-mix(in srgb, var(--field-ink) 34%, transparent); color: var(--field-ink); }
  .review-banner button.secondary:hover { background: color-mix(in srgb, var(--field-ink) 12%, transparent); border-color: color-mix(in srgb, var(--field-ink) 55%, transparent); }

  /* ---------- Review wizard ---------- */
  .wizard-step-label {
    font-family: var(--sans);
    font-size: 11.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.11em;
    color: var(--accent);
    margin: 0 0 14px;
  }
  .wizard-nav { display: flex; align-items: center; gap: 10px; margin-top: 30px; }
  .wizard-nav .spacer { flex: 1; }
  .intro-hero { text-align: center; padding: 54px 10px 44px; }
  .intro-hero .big {
    font-family: var(--serif); font-size: 40px; font-weight: 400; margin: 0 0 16px;
    letter-spacing: -0.028em; line-height: 1.05; color: var(--ink); text-wrap: balance;
  }
  .intro-hero .big em { font-style: italic; font-weight: 300; }

  .book { perspective: 1600px; }
  .book-cover {
    background: var(--field);
    color: var(--field-ink);
    border-radius: 6px var(--r-card) var(--r-card) 6px;
    border-left: 12px solid var(--field-deep);
    padding: 64px 34px;
    min-height: 350px;
    display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center;
    box-shadow: var(--shadow-lift);
    position: relative;
    animation: coverIn 0.5s ease-out;
  }
  .book-cover::after {
    content: "";
    position: absolute;
    inset: 16px;
    border: 1px solid color-mix(in srgb, var(--field-ink) 26%, transparent);
    border-radius: 2px 14px 14px 2px;
    pointer-events: none;
  }
  @keyframes coverIn { from { transform: rotateY(-22deg) scale(0.96); opacity: 0; } to { transform: none; opacity: 1; } }
  .cover-kicker {
    font-family: var(--sans); font-size: 11px; font-weight: 600; text-transform: uppercase;
    letter-spacing: 0.2em; color: color-mix(in srgb, var(--field-ink) 60%, transparent); margin-bottom: 20px;
  }
  .cover-title {
    font-family: var(--serif); font-size: 36px; font-weight: 400; line-height: 1.1;
    letter-spacing: -0.028em; margin-bottom: 18px; max-width: 22ch;
  }
  .cover-title em { font-style: italic; font-weight: 300; }
  .cover-sub { font-family: var(--mono); font-size: 11.5px; opacity: 0.75; font-variant-numeric: tabular-nums; }

  .book-page {
    background: var(--surface);
    border: none;
    border-radius: var(--r-card);
    padding: 30px 32px;
    box-shadow: none;
    min-height: 280px;
    transform-origin: left center;
    backface-visibility: hidden;
  }
  .book-page.flip-next { animation: pageNext 0.55s ease-out; }
  .book-page.flip-prev { animation: pagePrev 0.45s ease-out; }
  @keyframes pageNext { 0% { transform: rotateY(-95deg); opacity: 0; } 55% { opacity: 1; } 100% { transform: rotateY(0); opacity: 1; } }
  @keyframes pagePrev { 0% { transform: rotateY(95deg); opacity: 0; } 55% { opacity: 1; } 100% { transform: rotateY(0); opacity: 1; } }
  .book-date { font-family: var(--serif); font-size: 26px; font-weight: 400; margin: 0 0 16px; letter-spacing: -0.026em; color: var(--ink); }
  .book-mood { font-family: var(--mono); font-size: 12px; color: var(--faint); margin-left: 10px; font-variant-numeric: tabular-nums; }
  .book-page h4 {
    font-family: var(--sans);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--muted);
    margin: 22px 0 8px;
  }
  .book-counter { text-align: center; font-family: var(--mono); font-size: 11px; color: var(--faint); margin-top: 16px; font-variant-numeric: tabular-nums; }
  .book-skip {
    display: block; margin: 18px auto 0; background: none; border: none; cursor: pointer;
    font-family: var(--sans); font-size: 13px; font-weight: 600; color: var(--accent);
    padding: 6px 4px; transition: color 0.15s ease-out;
  }
  .book-skip:hover { text-decoration: underline; text-underline-offset: 3px; }

  /* ---------- Metric tiles ----------
     Function's hero stat block: serif numeral over a sans sub-label,
     divided by hairlines inside one aged-paper surface rather than
     boxed individually. */
  .stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
    gap: 0;
    background: var(--surface);
    border-radius: var(--r-card);
    overflow: hidden;
    margin-bottom: 18px;
  }
  .stat-card { background: none; border: none; border-left: 1px solid var(--border); padding: 24px 26px; box-shadow: none; }
  .stat-card:first-child { border-left: none; }
  .stat-num {
    font-family: var(--serif); font-size: 40px; font-weight: 400;
    line-height: 1; letter-spacing: -0.032em; color: var(--ink);
    font-variant-numeric: tabular-nums;
  }
  .stat-label {
    font-family: var(--sans); font-size: 11px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.11em;
    color: var(--muted); margin-top: 11px;
  }

  /* ---------- Safety strip ----------
     Whether the journal is actually backed up. Quiet and one line when it is,
     a real card when it isn't. Uses the data colours, never the accent —
     terracotta means "you can act on this", and green here means "nothing to do". */
  .safety {
    border-radius: var(--r-card);
    margin-bottom: 18px;
    font-family: var(--sans);
  }
  .safety.ok {
    display: flex; align-items: center; gap: 10px;
    padding: 13px 18px;
    background: var(--surface);
    font-size: 13px; color: var(--muted);
  }
  .safety.ok .ghost-btn { margin-left: auto; font-size: 12px; }
  /* Due is still the one-line strip, tinted. The archive coming round is a
     chore on a calendar, and the page it sits on is the page for writing. */
  .safety.ok.due {
    background: color-mix(in srgb, var(--warn) 7%, var(--surface));
    border: 1px solid color-mix(in srgb, var(--warn) 20%, transparent);
    color: var(--ink);
  }
  .safety.ok.due .ghost-btn.strong { color: var(--warn); font-weight: 600; }
  .safety.ok.due .ghost-btn.strong:hover { color: var(--ink); }
  .safety.warn {
    background: color-mix(in srgb, var(--warn) 7%, var(--surface));
    border: 1px solid color-mix(in srgb, var(--warn) 22%, transparent);
    padding: 20px 22px;
  }
  .safety-head {
    margin: 0 0 14px;
    display: flex; align-items: center; gap: 9px;
    font-size: 11px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.11em;
    color: var(--warn);
  }
  /* --warn on the tinted card only reaches 4.19:1 in dark, and an 11px label
     counts as normal text. Lifted to 4.94:1 here rather than shifting the
     global token, which is well judged everywhere else it's used. */
  [data-theme="dark"] .safety-head { color: var(--warn); }
  .safety-dot {
    width: 7px; height: 7px; border-radius: 50%; flex: none;
    background: var(--warn);
  }
  .safety-dot.ok { background: var(--happy); }
  .safety-row {
    display: flex; align-items: center; gap: 16px;
    padding: 11px 0;
    border-top: 1px solid color-mix(in srgb, var(--warn) 16%, transparent);
  }
  .safety-row:first-of-type { border-top: none; padding-top: 0; }
  .safety-row:last-child { padding-bottom: 0; }
  .safety-row .safety-text { flex: 1; font-size: 14px; line-height: 1.5; color: var(--ink); }
  .safety-row button { flex: none; }
  @media (max-width: 620px) {
    .safety-row { flex-direction: column; align-items: stretch; gap: 10px; }
    .safety.ok { flex-wrap: wrap; }
  }

  /* ---------- AI slots + chat ----------
     The reading is the product, so it gets a full aged-paper surface and
     the editorial serif, not a tinted callout with a coloured left rule. */
  .ai-slot {
    border: none;
    background: var(--surface);
    border-radius: var(--r-card);
    padding: 30px 32px;
  }
  .ai-slot .pill {
    display: inline-block;
    background: none;
    color: var(--accent);
    padding: 0;
    border-radius: 0;
    font-family: var(--sans);
    font-size: 11.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.11em;
    margin-bottom: 14px;
  }
  .ai-text { font-size: 14.5px; line-height: 1.65; color: var(--ink-2); margin: 6px 0 0; }

  .chat-log { display: flex; flex-direction: column; gap: 12px; margin: 12px 0 16px; }
  .chat-msg { padding: 13px 18px; border-radius: var(--r-md); font-size: 14.5px; line-height: 1.6; max-width: 88%; }
  .chat-msg.assistant { background: var(--surface-2); border: none; align-self: flex-start; border-bottom-left-radius: 6px; }
  .chat-msg.user { background: var(--field); color: var(--field-ink); align-self: flex-end; border-bottom-right-radius: 6px; }
  .chat-msg.chat-busy { color: var(--muted); }
  /* A reply that streams needs a caret: a two-second pause mid-sentence
     should read as "still writing", not as "stuck". */
  .streaming::after {
    content: ""; display: inline-block; width: 2px; height: 1em;
    margin-left: 2px; vertical-align: -0.14em; background: var(--accent);
    animation: caret 1s steps(1) infinite;
  }
  @keyframes caret { 50% { opacity: 0; } }
  .chat-msg p { margin: 0 0 8px; }
  .chat-msg p:last-child { margin: 0; }
  /* The opening note reads as editorial prose, not a bubble — it's the product. */
  .chat-note {
    font-family: var(--serif); font-size: 19px; line-height: 1.66;
    letter-spacing: -0.008em; color: var(--ink); padding: 4px 0 2px;
    max-width: 68ch;
  }
  .chat-note p { margin: 0 0 17px; }
  .chat-note p:last-child { margin: 0; }
  .chat-note em { font-style: italic; }
  .chat-note strong { font-weight: 600; }
  .chat-note ul { list-style: none; margin: 0 0 17px; padding: 0; }
  .chat-note li { position: relative; padding-left: 24px; margin-bottom: 10px; }
  .chat-note li::before { content: "·"; position: absolute; left: 6px; color: var(--accent); font-weight: 700; }
  .chat-input-row { display: flex; gap: 8px; }
  .chat-input-row input { flex: 1; margin: 0; }

  .mood-chart { width: 100%; height: auto; display: block; background: none; border-radius: 0; margin-top: 8px; }

  /* ---------- Signals: hairline-divided rows ---------- */
  .signals { display: flex; flex-direction: column; gap: 0; }
  .signal-card {
    display: flex; align-items: flex-start; gap: 12px;
    background: none;
    border: none;
    border-bottom: 1px solid var(--border);
    border-radius: 0;
    padding: 15px 2px;
    font-size: 14.5px;
    line-height: 1.55;
  }
  .signals .signal-card:last-child { border-bottom: none; }
  .signal-dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 7px; flex-shrink: 0; }
  .signal-dot.up { background: var(--happy); }
  .signal-dot.down { background: var(--sad); }
  .signal-dot.warn { background: var(--warn); }

  /* Search hit inside an opened entry */
  mark {
    background: var(--amber-soft);
    color: inherit; border-radius: var(--r-sm); padding: 1px 5px;
    box-shadow: none;
  }

  /* ---------- Ask your journal ---------- */
  .ask-box {
    border: none; border-radius: var(--r-card);
    padding: 28px 30px; margin-bottom: 20px; background: var(--surface); box-shadow: none;
  }
  .ask-q {
    font-family: var(--serif); font-size: 24px; font-style: italic; font-weight: 300;
    margin: 0 0 18px; color: var(--ink); line-height: 1.25; letter-spacing: -0.022em;
  }
  .ask-answer { font-family: var(--serif); font-size: 18px; line-height: 1.7; letter-spacing: -0.006em; color: var(--ink); }
  .ask-answer p { margin: 0 0 14px; }
  .ask-answer p:last-child { margin-bottom: 0; }
  .ask-foot { font-family: var(--sans); font-size: 12.5px; color: var(--muted); margin: 18px 0 10px; }
  .cite {
    display: inline-block; background: var(--accent-soft); border: none; border-radius: var(--r-pill);
    color: var(--accent); cursor: pointer; font-family: var(--mono); font-size: 10px;
    padding: 2px 8px; margin: 0 3px; vertical-align: baseline;
  }
  .cite:hover { background: var(--accent); color: var(--on-accent); }

  /* ---------- People and topics ---------- */
  .thread-label {
    font-family: var(--sans); font-size: 11.5px; font-weight: 600; text-transform: uppercase;
    letter-spacing: 0.1em; color: var(--muted); margin: 30px 0 12px;
  }
  /* A grid, not a wrapping row: every card is the same width and height, so a
     long name and a short one don't produce a ragged wall of boxes. */
  .thread-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); gap: 10px; }
  .thread-chip {
    display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between;
    gap: 12px; min-height: 104px; text-align: left;
    border: none; border-radius: var(--r-md); background: var(--surface);
    padding: 18px 19px; cursor: pointer; font-family: inherit;
    transition: background 0.15s ease-out, transform 0.15s ease-out;
  }
  .thread-chip:hover { background: var(--surface-2); transform: translateY(-2px); }
  .tc-word {
    font-family: var(--serif); font-size: 20px; line-height: 1.2; color: var(--ink);
    letter-spacing: -0.022em; overflow-wrap: anywhere;
  }
  .tc-foot { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; width: 100%; }
  .tc-count { font-family: var(--mono); font-size: 10px; color: var(--faint); font-variant-numeric: tabular-nums; }
  .tc-kind {
    font-family: var(--sans); font-size: 9.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.09em;
    padding: 3px 9px; border-radius: var(--r-pill); color: var(--muted); white-space: nowrap;
    background: color-mix(in srgb, var(--muted) 12%, transparent);
  }
  .tc-kind.person { color: var(--accent); background: var(--accent-soft); }
  .tc-kind.org, .tc-kind.place { color: var(--sad); background: color-mix(in srgb, var(--sad) 13%, transparent); }
  .tc-kind.activity, .tc-kind.thing { color: var(--amber); background: var(--amber-soft); }
  .tc-kind.feeling { color: var(--warn); background: color-mix(in srgb, var(--warn) 11%, transparent); }
  .threads-refresh {
    display: flex; align-items: center; gap: 14px; font-size: 13.5px; color: var(--muted);
  }
  .thread-mention {
    border: none; border-bottom: 1px solid var(--border); border-radius: var(--r-md); padding: 18px 20px;
    margin-bottom: 0; background: none; cursor: pointer;
    transition: background 0.15s ease-out;
  }
  .thread-mention:hover { background: var(--surface-2); }
  .tm-date {
    font-family: var(--mono); font-size: 11px; color: var(--muted);
    margin: 0 0 10px; display: flex; justify-content: space-between; gap: 10px;
    font-variant-numeric: tabular-nums;
  }
  .tm-line { margin: 0 0 7px; font-size: 14.5px; line-height: 1.55; padding-left: 14px; border-left: 2px solid var(--border); }
  .tm-line:last-child { margin-bottom: 0; }
  .tm-line.happy { border-left-color: var(--happy); }
  .tm-line.sad { border-left-color: var(--sad); }
  .tm-line.custom { border-left-color: var(--muted); }

  /* ---------- Printable period book ---------- */
  #print-root { display: none; }
  @media print {
    body { background: #fff; }
    body::before { display: none; }
    body > *:not(#print-root) { display: none !important; }
    #print-root {
      display: block; color: #111; background: #fff;
      font-family: Georgia, "Times New Roman", serif; font-size: 11.5pt; line-height: 1.6;
    }
    @page { margin: 20mm 18mm; }
    .pb-cover { text-align: center; padding: 45mm 0 0; break-after: page; }
    .pb-kicker { font-size: 9.5pt; letter-spacing: 0.22em; text-transform: uppercase; margin: 0 0 14mm; }
    .pb-cover h1 { font-size: 34pt; font-weight: 400; line-height: 1.1; margin: 0 0 6mm; }
    .pb-sub { font-size: 12pt; font-style: italic; margin: 0 0 22mm; }
    .pb-stats { display: flex; justify-content: center; gap: 12mm; flex-wrap: wrap; font-size: 10pt; }
    .pb-stats b { display: block; font-size: 20pt; font-weight: 400; }
    #print-root h2 {
      font-size: 19pt; font-weight: 400; margin: 0 0 6mm;
      padding-bottom: 2mm; border-bottom: 0.4pt solid #999;
    }
    #print-root section { break-before: page; }
    #print-root section:first-of-type { break-before: auto; }
    .pb-review-text { font-size: 12pt; line-height: 1.75; }
    .pb-goal-cat { margin-bottom: 7mm; }
    #print-root h4 { font-size: 9.5pt; letter-spacing: 0.14em; text-transform: uppercase; margin: 0 0 2mm; font-weight: 400; }
    #print-root ul { margin: 0 0 3mm; padding-left: 6mm; }
    #print-root li { margin-bottom: 1.5mm; break-inside: avoid; }
    .pb-outcome { font-size: 8.5pt; letter-spacing: 0.1em; text-transform: uppercase; }
    .pb-goal-desc, .pb-goal-note { font-size: 10pt; font-style: italic; color: #444; }
    .pb-entry { break-inside: avoid; break-before: page; padding-top: 2mm; }
    .pb-entry:first-of-type { break-before: auto; }
    .pb-entry h3 { font-size: 15pt; font-weight: 400; margin: 0 0 5mm; display: flex; justify-content: space-between; gap: 6mm; }
    .pb-mood { font-size: 10pt; font-style: italic; }
    .pb-free { margin-bottom: 4mm; }
    .pb-none { color: #666; font-style: italic; margin: 0 0 3mm; }
    .pb-photos { display: flex; gap: 3mm; flex-wrap: wrap; margin-top: 4mm; }
    .pb-photos img { max-width: 54mm; max-height: 44mm; object-fit: cover; }
    .pb-colophon { break-before: page; text-align: center; font-size: 9pt; font-style: italic; padding-top: 60mm; }
  }

  /* ---------- Quick capture ---------- */
  /* Top of the page and one field deep: the Tuesday-thought box has to be
     usable in about 4 seconds. */
  .capture-section {
    border: none; border-radius: var(--r-card);
    padding: 24px 30px 26px; background: var(--surface); box-shadow: none;
    margin-bottom: 18px;
  }
  .capture-input-row { display: flex; gap: 9px; align-items: center; flex-wrap: wrap; }
  .capture-input-row input { flex: 1 1 100%; min-width: 0; margin: 0; font-size: 14.5px; padding: 12px 18px; background: var(--bg); }
  @media (min-width: 621px) { .capture-input-row input { flex: 1 1 200px; } }
  .capture-input-row button { padding: 12px 22px; font-size: 13.5px; white-space: nowrap; }
  .capture-list { margin-top: 16px; }
  .capture-row {
    display: flex; align-items: baseline; gap: 14px;
    padding: 12px 0; border-bottom: 1px solid var(--border);
  }
  .capture-row:last-child { border-bottom: none; }
  .capture-when { font-family: var(--mono); font-size: 10.5px; color: var(--faint); flex-shrink: 0; }
  .capture-text { flex: 1; font-size: 14.5px; line-height: 1.5; color: var(--ink); overflow-wrap: anywhere; }
  /* A tick, not a delete: letting a note go is a decision you have made */
  .capture-done, .cr-done {
    background: none; border: 1px solid var(--border); border-radius: 50%; cursor: pointer;
    color: var(--faint); font-size: 13px; line-height: 1; width: 26px; height: 26px; padding: 0;
    flex-shrink: 0; transition: all 0.15s ease-out;
  }
  .capture-done:hover, .cr-done:hover { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
  /* The same notes, waiting at the top of the writing form */
  .cr-row { display: flex; align-items: baseline; gap: 14px; padding: 13px 0; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
  .cr-row:last-of-type { border-bottom: none; }
  .cr-row.used .cr-text { color: var(--faint); text-decoration: line-through; }
  .cr-when { font-family: var(--mono); font-size: 10.5px; color: var(--faint); flex-shrink: 0; }
  .cr-text { flex: 1; min-width: 140px; font-size: 15px; line-height: 1.5; color: var(--ink); }
  .cr-actions { display: inline-flex; flex-wrap: wrap; gap: 6px; flex-shrink: 1; min-width: 0; }
  .cr-use {
    background: none; border: 1px solid var(--border); border-radius: var(--r-pill); cursor: pointer;
    font-family: var(--sans); font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.07em;
    color: var(--muted); padding: 5px 12px; transition: all 0.15s ease-out;
  }
  .cr-use:hover { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }

  /* ---------- This week, back then ---------- */
  /* Given its own framed block near the top: it's the read-back hook, and it
     was invisible as a plain section at the foot of the page. */
  .otw-section {
    border: none;
    border-radius: var(--r-card); padding: 28px 30px;
    background: var(--amber-soft);
    margin-bottom: 18px;
  }
  .otw-head { margin-bottom: 20px; }
  .otw-eyebrow {
    font-family: var(--sans); font-size: 11.5px; text-transform: uppercase;
    letter-spacing: 0.11em; color: var(--amber); margin: 0 0 8px; font-weight: 600;
  }
  .otw-lede {
    font-family: var(--serif); font-size: 24px; color: var(--ink); margin: 0;
    line-height: 1.2; letter-spacing: -0.024em;
  }
  .otw-lede em { font-style: italic; font-weight: 300; }
  .otw-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
  .otw-card {
    border: none; border-radius: var(--r-md); padding: 18px 19px;
    background: var(--bg); cursor: pointer; box-shadow: none;
    transition: transform 0.15s ease-out;
  }
  .otw-card:hover { transform: translateY(-2px); }
  .otw-kicker {
    font-family: var(--sans); font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em;
    color: var(--amber); margin: 0 0 8px; display: flex; justify-content: space-between; gap: 8px;
  }
  .otw-mood { color: var(--faint); font-family: var(--mono); font-weight: 400; letter-spacing: 0; }
  .otw-date { font-family: var(--serif); font-size: 19px; letter-spacing: -0.022em; margin: 0 0 10px; color: var(--ink); }
  .otw-thumb { margin: 0 0 12px; }
  .otw-thumb img { width: 100%; height: 96px; object-fit: cover; border-radius: var(--r-sm); display: block; }
  .otw-preview { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--muted); }

  /* ---------- Insight feedback ---------- */
  .fb-bar { display: flex; align-items: center; gap: 9px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border); }
  .fb-label { font-family: var(--sans); font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.09em; color: var(--muted); margin-right: 2px; }
  .fb-btn {
    background: none; border: 1px solid var(--border); border-radius: var(--r-pill); cursor: pointer;
    font-family: inherit; font-size: 12.5px; color: var(--muted); padding: 6px 15px;
    transition: all 0.15s ease-out;
  }
  .fb-btn:hover { color: var(--ink); border-color: var(--ink); }
  .fb-btn.on { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); font-weight: 600; }
  .fb-btn.on.down { color: var(--warn); border-color: var(--warn); background: color-mix(in srgb, var(--warn) 9%, transparent); }

  /* ---------- Prompt library ---------- */
  .prompt-bar { margin-top: 14px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
  .prompt-bar .prompt-cta { margin-left: auto; }
  /* Green enough to find when the page is blank, small enough to ignore when
     the words are already coming. */
  .prompt-cta {
    display: inline-block; cursor: pointer; font-family: inherit;
    font-size: 13.5px; font-weight: 600; color: var(--accent);
    padding: 11px 22px; border-radius: var(--r-pill);
    background: none; border: 1.5px solid color-mix(in srgb, var(--accent) 45%, transparent);
    transition: background 0.15s ease-out, border-color 0.15s ease-out;
  }
  .prompt-cta:hover { background: var(--accent-soft); border-color: var(--accent); }
  .prompt-box {
    margin-top: 14px; border: none; border-radius: var(--r-md);
    padding: 22px 24px; background: var(--surface-2);
  }
  .prompt-lede { margin: 0 0 16px; font-size: 13.5px; color: var(--muted); line-height: 1.55; }
  .prompt-list { display: flex; flex-direction: column; gap: 0; }
  .prompt-pick {
    display: flex; align-items: baseline; gap: 14px; width: 100%; text-align: left;
    border: none; border-bottom: 1px solid var(--border); border-radius: var(--r-sm); background: none;
    padding: 13px 10px; cursor: pointer; font-family: inherit;
    transition: background 0.15s ease-out;
  }
  .prompt-pick:hover { background: var(--bg); }
  .pp-cat {
    font-family: var(--sans); font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.09em;
    color: var(--accent); flex-shrink: 0; min-width: 68px;
  }
  .pp-text { font-family: var(--serif); font-size: 17px; line-height: 1.4; letter-spacing: -0.014em; color: var(--ink); }
  .prompt-foot { display: flex; gap: 16px; align-items: center; margin-top: 16px; flex-wrap: wrap; }
  .prompt-add { display: flex; gap: 8px; align-items: center; width: 100%; flex-wrap: wrap; }
  .prompt-add input { flex: 1; min-width: 200px; margin: 0; font-size: 14px; padding: 11px 16px; background: var(--bg); }
  .prompt-add button { padding: 11px 20px; font-size: 13px; }
  .prompt-mine { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border); }
  .prompt-mine > summary {
    cursor: pointer; list-style: none; font-family: var(--sans); font-size: 11.5px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.09em; color: var(--muted);
  }
  .prompt-mine > summary::-webkit-details-marker { display: none; }
  .pm-row { display: flex; align-items: center; gap: 12px; padding: 9px 0; font-size: 14px; }
  .pm-row > span { flex: 1; }
  .pm-del { background: none; border: none; color: var(--warn); cursor: pointer; font-size: 12.5px; font-family: inherit; }

  /* ---------- Goals ---------- */
  .goal-section-title {
    font-family: var(--serif);
    font-size: 24px;
    font-weight: 400;
    letter-spacing: -0.026em;
    color: var(--ink);
    margin: 34px 0 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border);
  }
  .goal-section-title:first-of-type { margin-top: 8px; }
  .goal-empty-line { color: var(--faint); font-size: 14.5px; padding: 10px 0; }

  .goal-item { padding: 16px 2px; border-bottom: 1px solid var(--border); }
  .goal-binary { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
  .goal-binary .goal-text { flex: 1; min-width: 0; }

  /* Goal pulse: what the recent entries actually say about each goal */
  .gs-pulse {
    flex-basis: 100%;
    display: flex;
    align-items: baseline;
    gap: 9px;
    margin-top: 6px;
    padding-left: 19px;
    font-size: 12.5px;
    font-style: italic;
    color: var(--muted);
    line-height: 1.45;
  }
  .goal-item .gs-pulse { padding-left: 0; }
  /* Status chips carry the DATA colours (green / amber / rust), never the
     brand accent — terracotta means "you can act on this", not "this is
     going well". */
  .pulse-chip {
    font-family: var(--sans);
    font-size: 9.5px;
    font-weight: 600;
    font-style: normal;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    padding: 3px 10px;
    border-radius: var(--r-pill);
    flex-shrink: 0;
    border: 1px solid var(--border);
    color: var(--muted);
  }
  .pulse-chip.strong, .pulse-chip.done {
    background: color-mix(in srgb, var(--happy) 12%, transparent);
    color: var(--happy);
    border-color: color-mix(in srgb, var(--happy) 34%, transparent);
  }
  .pulse-chip.steady { color: var(--ink); }
  .pulse-chip.drifting {
    background: var(--amber-soft);
    color: var(--amber);
    border-color: color-mix(in srgb, var(--amber) 38%, transparent);
  }
  .pulse-chip.quiet { border-style: dashed; }
  .goal-check {
    width: 26px; height: 26px; border-radius: 50%;
    border: 1.5px solid var(--border); background: none; cursor: pointer;
    flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
    color: transparent; font-size: 13px; line-height: 1; padding: 0;
    transition: all 0.15s ease-out;
  }
  .goal-check:hover { border-color: var(--happy); }
  .goal-item.done .goal-check { background: var(--happy); border-color: var(--happy); color: var(--on-accent); }
  .goal-text { font-family: var(--serif); font-size: 18px; line-height: 1.35; letter-spacing: -0.018em; color: var(--ink); }
  .goal-item.done .goal-text { color: var(--faint); text-decoration: line-through; }
  .goal-desc {
    flex-basis: 100%; margin: 8px 0 0; font-size: 13.5px; color: var(--muted);
    line-height: 1.55; padding-right: 34px;
  }

  .goal-edit-card { border: none; border-radius: var(--r-md); padding: 22px 24px; margin-bottom: 12px; background: var(--surface); box-shadow: none; }
  /* The goal is the field that matters, so it gets the solid box; the note
     under it is optional and stays quiet. The other way round, people typed
     their goal into the note because the goal line did not look like a field. */
  .ge-text {
    width: 100%; margin: 0 0 10px; font-family: var(--serif); font-size: 19px; font-weight: 400;
    letter-spacing: -0.018em;
    background: var(--bg); border: 1px solid var(--border);
    border-radius: var(--r-md); padding: 11px 15px;
  }
  .ge-text:focus { border-color: var(--accent); }
  .ge-desc {
    width: 100%; margin: 0 0 12px; min-height: 0; font-size: 14px; line-height: 1.55;
    background: transparent; border: none; border-bottom: 1px dashed var(--border);
    border-radius: 0; padding: 6px 2px;
    resize: vertical;
  }
  .ge-desc:focus { border-bottom-color: var(--accent); background: transparent; box-shadow: none; outline: none; }
  .ge-card-foot { display: flex; align-items: center; gap: 14px; }
  .ge-add { margin-bottom: 8px; }
  .ge-remove { background: none; border: none; color: var(--warn); cursor: pointer; font-size: 12.5px; font-family: inherit; padding: 2px 0; margin-left: auto; }
  .ge-coach {
    background: none; border: 1px solid var(--border); border-radius: var(--r-pill); cursor: pointer;
    font-family: var(--sans); font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em;
    color: var(--muted); padding: 6px 13px; transition: all 0.15s ease-out;
  }
  .ge-coach:hover { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
  .ge-coach[disabled] { opacity: 0.5; cursor: default; }

  /* Looking Back's read on a goal you just wrote */
  .goal-critique {
    margin-top: 16px; padding: 18px 20px; border-radius: var(--r-md);
    background: var(--amber-soft);
    border: none;
    font-size: 14px; line-height: 1.6;
  }
  .goal-critique.ok { background: color-mix(in srgb, var(--happy) 10%, transparent); }
  .goal-critique p { margin: 0 0 8px; }
  .goal-critique p:last-child { margin-bottom: 0; }
  .gc-rewrite {
    font-family: var(--serif); font-size: 18px; font-style: italic; font-weight: 300; color: var(--ink);
    padding: 10px 0 12px; line-height: 1.4; letter-spacing: -0.016em;
  }
  .gc-actions { display: flex; gap: 12px; align-items: center; margin-top: 4px; }
  .gc-apply {
    background: var(--accent); color: var(--on-accent); border: none; border-radius: var(--r-pill); cursor: pointer;
    font-family: inherit; font-size: 12.5px; font-weight: 600; padding: 8px 18px;
  }
  :root[data-theme="dark"] .gc-apply { color: var(--field-deep); }
  .gc-apply:hover { background: var(--accent-deep); }
  .gc-dismiss { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 12.5px; font-family: inherit; }

  /* SMART primer above the goal editor */
  .smart-intro { border: none; border-radius: var(--r-card); padding: 24px 28px; margin-bottom: 26px; background: var(--surface); }
  .smart-intro > summary { cursor: pointer; list-style: none; font-weight: 600; font-size: 15px; color: var(--ink); display: flex; align-items: center; gap: 10px; }
  .smart-intro > summary::-webkit-details-marker { display: none; }
  .smart-intro > summary .chev { font-size: 11px; color: var(--muted); }
  .smart-intro[open] > summary .chev { transform: rotate(90deg); }
  .smart-intro .smart-lede { font-size: 14.5px; color: var(--muted); line-height: 1.6; margin: 16px 0 18px; }
  .smart-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px; }
  .smart-card { border-left: 2px solid var(--accent); padding-left: 15px; }
  .smart-card b { display: block; font-size: 13.5px; color: var(--ink); margin-bottom: 4px; }
  .smart-card span { font-size: 13.5px; color: var(--muted); line-height: 1.5; }
  .smart-eg { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--border); font-size: 14px; line-height: 1.6; }
  .smart-eg .bad { color: var(--faint); }
  .smart-eg .good { color: var(--ink); font-family: var(--serif); font-style: italic; font-weight: 300; font-size: 18px; }

  .goal-archive { margin-top: 36px; border-top: 1px solid var(--border); padding-top: 20px; }
  .goal-archive > summary { cursor: pointer; list-style: none; font-weight: 600; font-size: 14.5px; display: flex; align-items: center; gap: 10px; color: var(--ink); }
  .goal-archive > summary::-webkit-details-marker { display: none; }
  .goal-archive > summary .chev { font-size: 11px; }
  .goal-archive[open] > summary .chev { transform: rotate(90deg); }
  .goal-archive-period { padding: 18px 0; border-bottom: 1px solid var(--border); }
  .goal-archive-date { font-family: var(--serif); font-size: 19px; font-weight: 400; letter-spacing: -0.02em; margin: 0 0 10px; color: var(--muted); }

  /* ---------- Confetti ---------- */
  .confetti-piece {
    position: fixed; top: -16px; width: 9px; height: 14px;
    z-index: 9999; pointer-events: none; border-radius: 1px;
    animation-name: confetti-fall; animation-timing-function: linear; animation-fill-mode: forwards;
  }
  @keyframes confetti-fall {
    0% { transform: translateY(0) rotate(0deg); opacity: 1; }
    100% { transform: translateY(105vh) rotate(720deg); opacity: 0.9; }
  }

  /* ---------- Toast ---------- */
  .toast {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%) translateY(80px);
    background: var(--field);
    color: var(--field-ink);
    padding: 13px 26px;
    border-radius: var(--r-pill);
    font-size: 14px;
    font-weight: 500;
    box-shadow: var(--shadow-lift);
    opacity: 0;
    transition: all 0.25s ease-out;
    pointer-events: none;
    z-index: 500;
  }
  .toast.show { transform: translateX(-50%) translateY(0); opacity: 1; }

  #api-key-input {
    width: 100%; border: 1px solid var(--border); border-radius: var(--r-pill);
    padding: 12px 18px; font-family: var(--mono); font-size: 13px;
    background: var(--bg); color: var(--ink); margin-bottom: 8px;
  }
  #api-key-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }

  /* Login overlay */
  .login-overlay {
    position: fixed; inset: 0; z-index: 200;
    background: var(--bg);
    display: flex; align-items: center; justify-content: center;
    padding: 24px;
  }
  .login-card { max-width: 440px; width: 100%; text-align: center; }
  .login-brand {
    display: inline-flex; align-items: center; gap: 11px;
    font-family: var(--serif); font-size: 27px; font-weight: 400; letter-spacing: -0.03em; color: var(--ink);
    margin-bottom: 30px;
  }
  .login-brand svg { width: 31px; height: 23px; color: var(--accent); }
  .login-card h1 {
    font-family: var(--serif); font-weight: 400; font-size: 40px; line-height: 1.05;
    letter-spacing: -0.03em; margin: 0 0 14px; color: var(--ink); text-wrap: balance;
  }
  .login-card h1 em { font-style: italic; font-weight: 300; }
  .login-card .login-sub { color: var(--muted); font-size: 15.5px; line-height: 1.55; margin: 0 0 30px; }
  .login-card input[type="email"], .login-card input[type="password"] {
    width: 100%; padding: 13px 20px; font-family: var(--sans); font-size: 15px;
    color: var(--ink); background: var(--surface);
    border: 1px solid var(--border); border-radius: var(--r-pill); outline: none;
    margin-bottom: 12px;
  }
  .login-card input[type="email"]:focus, .login-card input[type="password"]:focus {
    border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
  }
  .login-card .primary { width: 100%; }
  .login-local {
    display: inline-block; margin-top: 22px; font-size: 13.5px; color: var(--muted);
    background: none; border: none; cursor: pointer; text-decoration: underline;
    text-underline-offset: 3px; font-family: var(--sans);
  }
  .login-local:hover { color: var(--ink); }
  /* The honest note, on the card rather than buried in a FAQ. Someone has to
     read this before they decide to sync a journal, so it sits under the
     buttons and is left-aligned: a centred paragraph this long doesn't get read. */
  .login-note {
    margin: 26px 0 0; padding-top: 18px; border-top: 1px solid var(--border);
    font-size: 12.5px; line-height: 1.6; color: var(--muted); text-align: left;
  }
  .login-note strong { color: var(--ink); font-weight: 600; }

  /* ---------- Onboarding / profile controls ---------- */
  .login-card input[type="text"], .login-card select {
    width: 100%; padding: 13px 20px; font-family: var(--sans); font-size: 15px;
    color: var(--ink); background: var(--surface);
    border: 1px solid var(--border); border-radius: var(--r-pill); outline: none;
    margin-bottom: 12px; text-align: center;
  }
  .login-card input[type="text"]:focus, .login-card select:focus {
    border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
  }
  .onb-nav { display: flex; gap: 10px; margin-top: 22px; }
  .onb-nav .primary { flex: 1; width: auto; }
  .onb-nav .secondary { width: auto; }
  .onb-progress { font-family: var(--sans); font-size: 11.5px; font-weight: 600; letter-spacing: 0.11em; text-transform: uppercase; color: var(--accent); margin: 0 0 16px; }
  .day-row { display: flex; gap: 7px; flex-wrap: wrap; justify-content: center; margin-bottom: 12px; }
  .login-card .day-row { justify-content: center; }
  #view-settings .day-row { justify-content: flex-start; }
  .day-pill, .opt-pill {
    border: 1px solid var(--border); background: var(--bg); color: var(--ink);
    border-radius: var(--r-pill); padding: 9px 16px; font-family: var(--sans); font-size: 13px;
    cursor: pointer; transition: border-color 0.15s ease-out, background 0.15s ease-out, color 0.15s ease-out;
  }
  .day-pill:hover, .opt-pill:hover { border-color: var(--accent); }
  .day-pill.active, .opt-pill.active {
    border-color: var(--accent); background: var(--accent);
    color: var(--on-accent); font-weight: 600;
  }
  :root[data-theme="dark"] .day-pill.active, :root[data-theme="dark"] .opt-pill.active { color: var(--field-deep); }
  .opt-row { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-bottom: 12px; }
  #view-settings .opt-row { justify-content: flex-start; }
  .onb-hint { font-size: 13px; color: var(--muted); margin: 6px 0 0; }
  .minutes-wrap { display: flex; align-items: center; gap: 10px; justify-content: center; margin-bottom: 12px; font-size: 15px; color: var(--ink); }
  .minutes-wrap input[type="text"] { width: 90px; max-width: 90px; text-align: center; margin-bottom: 0; font-family: var(--mono); }
  #view-settings .minutes-wrap { justify-content: flex-start; }

  /* ---------- Confirm dialog ---------- */
  /* The browser's own confirm() is a Chrome dialog, in Chrome's typeface, with
     the origin printed above it. A strange thing to meet on the way to deleting
     your own journal. This asks the same question in the app's voice.
     The cost is real: a dialog made of HTML cannot freeze the page the way the
     browser's can, so every caller has to wait for the answer instead of
     reading it off a return value. See askConfirm. */
  .ask-overlay {
    position: fixed; inset: 0; z-index: 400;
    display: flex; align-items: center; justify-content: center;
    padding: 24px;
    background: color-mix(in srgb, var(--field-deep) 68%, transparent);
    animation: ask-fade 0.16s ease-out;
  }
  /* .ask-overlay sets display, so it outranks the browser's own rule for
     [hidden] and has to say this itself. */
  .ask-overlay[hidden] { display: none; }
  .ask-card {
    width: min(440px, 100%);
    /* --surface rather than --bg: in dark mode the page background and the
       scrim are the same near-black, so a card painted in --bg has nothing but
       its border to sit on. --surface lifts in dark and reads as a card in
       light. */
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-card);
    box-shadow: var(--shadow-lift);
    padding: 28px 30px 22px;
    animation: ask-pop 0.18s cubic-bezier(0.2, 0.8, 0.3, 1);
  }
  @keyframes ask-fade { from { opacity: 0; } }
  @keyframes ask-pop { from { opacity: 0; transform: translateY(10px); } }
  .ask-card h2 {
    font-family: var(--serif); font-weight: 400;
    font-size: 26px; line-height: 1.15; letter-spacing: -0.02em;
    margin: 0 0 10px; color: var(--ink);
  }
  .ask-card p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--ink-2); }
  .ask-nav { display: flex; justify-content: flex-end; gap: 10px; margin-top: 24px; }
  .ask-nav button { width: auto; padding-left: 20px; padding-right: 20px; }
  @media (max-width: 480px) {
    .ask-card { padding: 22px 20px 18px; }
    .ask-card h2 { font-size: 22px; }
    /* Reversed, so the safe answer is the one under the thumb. */
    .ask-nav { flex-direction: column-reverse; }
    .ask-nav button { width: 100%; }
  }
  @media (prefers-reduced-motion: reduce) {
    .ask-overlay, .ask-card { animation: none; }
  }

  /* ---------- Welcome tour ---------- */
  /* The tour used to leave the app live underneath it, which let you wander
     off mid-card and then read step 4 about a screen you were no longer on.
     This layer takes every click instead. It is barely tinted on purpose: the
     whole point of the tour is that the real screen is visible behind it, so
     it blocks the app without hiding it. */
  .tour-scrim {
    position: fixed; inset: 0; z-index: 155;
    background: color-mix(in srgb, var(--field-deep) 12%, transparent);
    animation: tour-fade 0.2s ease-out;
  }
  .tour-scrim[hidden] { display: none; }
  @keyframes tour-fade { from { opacity: 0; } }
  /* Cards over the live app rather than a lightbox. Each step switches the view
     behind it, so the thing being described is on screen while it is described,
     and nothing is covered up: no scrim, and the app stays clickable throughout.
     On a phone the card has to clear the fixed tab bar, which sits at z-index
     150, so it outranks it the way the toast does. */
  .tour-card {
    position: fixed;
    left: 50%; bottom: calc(26px + env(safe-area-inset-bottom, 0px));
    transform: translateX(-50%);
    width: min(560px, calc(100vw - 32px));
    z-index: 160;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--r-card);
    box-shadow: var(--shadow-lift);
    padding: 24px 26px 20px;
    animation: tour-rise 0.28s cubic-bezier(0.2, 0.8, 0.3, 1);
  }
  @keyframes tour-rise { from { opacity: 0; transform: translate(-50%, 20px); } }
  .tour-step { font-family: var(--sans); font-size: 11.5px; font-weight: 600; letter-spacing: 0.11em; text-transform: uppercase; color: var(--accent); margin: 0 0 12px; }
  .tour-card h2 { font-family: var(--serif); font-weight: 400; font-size: 28px; line-height: 1.15; letter-spacing: -0.02em; margin: 0 0 10px; }
  .tour-copy { margin: 0; font-size: 15px; line-height: 1.6; color: var(--ink-2); }
  .tour-nav { display: flex; align-items: center; gap: 10px; margin-top: 20px; }
  .tour-dots { display: flex; align-items: center; gap: 6px; margin-right: auto; }
  .tour-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--border); }
  .tour-dots i.on { background: var(--accent); }
  .tour-nav button.primary, .tour-nav button.secondary { width: auto; padding-left: 18px; padding-right: 18px; }
  .tour-skip {
    border: 0; background: none; padding: 8px 2px; cursor: pointer;
    font-family: var(--sans); font-size: 13px; color: var(--muted);
    text-decoration: underline; text-underline-offset: 3px;
  }
  .tour-skip:hover { color: var(--ink); }
  /* The ring is drawn outside the element, so highlighting a nav item or a
     button moves nothing else on the page. */
  .tour-spot { position: relative; }
  /* Two rings, not one: the highlighted control can sit on parchment or on the
     dark hero, and a single line in --accent disappears against one or the
     other. The outer glow carries it on whichever surface the line loses. */
  .tour-spot::after {
    content: ""; position: absolute; inset: -7px -10px; pointer-events: none;
    border: 2px solid var(--accent); border-radius: var(--r-md);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 28%, transparent),
                0 0 20px 3px color-mix(in srgb, var(--accent) 45%, transparent);
    animation: tour-pulse 1.9s ease-in-out infinite;
  }
  @keyframes tour-pulse { 0%, 100% { opacity: 0.3; } 50% { opacity: 1; } }
  /* Keep the last of the page clear of the card. */
  body.tour-on .container { padding-bottom: 250px; }
  @media (max-width: 600px) {
    body.tour-on .container { padding-bottom: calc(330px + env(safe-area-inset-bottom, 0px)); }
    .tour-card { bottom: calc(74px + env(safe-area-inset-bottom, 0px)); padding: 20px 20px 16px; }
    .tour-card h2 { font-size: 24px; }
    .tour-nav { flex-wrap: wrap; }
    .tour-dots { order: -1; flex-basis: 100%; margin: 0 0 4px; }
  }
  @media (prefers-reduced-motion: reduce) {
    .tour-card, .tour-scrim { animation: none; }
    .tour-spot::after { animation: none; opacity: 0.9; }
  }

  /* ---------- Photos ---------- */
  /* The strip doubles as the drop target. Outline rather than border, so
     lighting it up on dragover moves nothing on the page. */
  .photo-strip { display: flex; gap: 10px; flex-wrap: wrap; position: relative; border-radius: var(--r-md); }
  .section.photos.drop-over .photo-strip {
    outline: 2px dashed var(--accent);
    outline-offset: 9px;
    background: color-mix(in srgb, var(--accent) 6%, transparent);
  }
  .section.photos.drop-over .photo-strip::after {
    content: "Drop them here";
    position: absolute; inset: -9px;
    display: flex; align-items: center; justify-content: center;
    background: color-mix(in srgb, var(--bg) 82%, transparent);
    border-radius: var(--r-md);
    font-family: var(--sans); font-size: 11.5px; font-weight: 600; letter-spacing: 0.11em;
    text-transform: uppercase; color: var(--accent);
    pointer-events: none;
  }
  .photo-tile {
    position: relative;
    width: 96px; height: 96px;
    border-radius: var(--r-md);
    overflow: hidden;
    border: none;
    background: var(--surface-2);
    box-shadow: var(--shadow);
  }
  .photo-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .photo-remove {
    position: absolute; top: 4px; right: 4px;
    width: 22px; height: 22px; border-radius: 50%;
    border: none; cursor: pointer;
    background: rgba(22,18,10,0.72); color: var(--field-ink);
    font-size: 13px; line-height: 1; padding: 0;
    display: flex; align-items: center; justify-content: center;
  }
  .photo-remove:hover { background: var(--warn); }
  .photo-add {
    width: 96px; height: 96px;
    border: 1.5px dashed var(--border);
    border-radius: var(--r-md);
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
    font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: 0.04em;
    transition: border-color 0.15s ease-out, color 0.15s ease-out;
  }
  .photo-add:hover { border-color: var(--accent); color: var(--accent); }
  .photo-add svg { width: 20px; height: 20px; }
  .photo-add:disabled { opacity: 0.4; cursor: not-allowed; }
  /* A HEIC off an iPhone takes a few seconds to transcode; hold its place */
  .photo-tile.pending {
    display: flex; align-items: center; justify-content: center;
    border: 1.5px dashed var(--border); color: var(--muted); text-align: center;
    font-family: var(--sans); font-size: 10px; font-weight: 600; letter-spacing: 0.07em;
    text-transform: uppercase; padding: 0 6px;
  }
  .photo-hint { font-size: 13px; color: var(--muted); margin: 12px 0 0; line-height: 1.55; }
  .detail-photos { display: flex; gap: 10px; flex-wrap: wrap; }
  .detail-photos .photo-tile { width: 132px; height: 132px; cursor: zoom-in; }
  .book-photos { display: flex; gap: 8px; flex-wrap: wrap; }
  .book-photos img {
    width: 84px; height: 84px; object-fit: cover; border-radius: var(--r-sm);
    border: none; cursor: zoom-in;
  }
  .lightbox {
    position: fixed; inset: 0; z-index: 900;
    background: rgba(27,23,16,0.9);
    display: flex; align-items: center; justify-content: center;
    padding: 32px; cursor: zoom-out;
  }
  .lightbox img {
    max-width: 100%; max-height: 100%;
    border-radius: var(--r-md);
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
  }

  /* ---------- Model picker (styled combobox) ---------- */
  .model-picker { position: relative; max-width: 380px; }
  .model-picker input {
    font-family: var(--mono);
    font-size: 13px;
    margin-bottom: 0;
  }
  .model-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0; right: 0;
    max-height: 260px;
    overflow-y: auto;
    background: var(--surface);
    border: none;
    border-radius: var(--r-md);
    box-shadow: var(--shadow-lift);
    z-index: 320;
    display: none;
    padding: 6px;
  }
  .model-menu.open { display: block; }
  .model-group {
    font-family: var(--sans); font-size: 10.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--accent); padding: 12px 12px 6px; position: sticky; top: 0; background: var(--surface);
  }
  .model-opt {
    display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
    width: 100%; text-align: left; background: none; border: none; cursor: pointer;
    padding: 9px 12px; border-radius: var(--r-sm); font-family: var(--mono); font-size: 12.5px; color: var(--ink);
  }
  .model-opt:hover, .model-opt.hl { background: var(--surface-2); }
  .model-opt .m-note { font-size: 10.5px; color: var(--faint); flex-shrink: 0; }
  .model-empty { padding: 12px; font-size: 13px; color: var(--muted); }

  /* ---------- Settings ---------- */
  .set-label {
    font-family: var(--sans); font-size: 11.5px; font-weight: 600; text-transform: uppercase;
    letter-spacing: 0.09em; color: var(--muted); margin: 22px 0 10px; display: block;
  }
  .set-label:first-of-type { margin-top: 0; }
  .key-chip {
    display: inline-flex; align-items: center; gap: 9px;
    font-family: var(--sans); font-size: 12.5px; font-weight: 500;
    background: var(--accent-soft); color: var(--accent);
    border: none;
    border-radius: var(--r-pill); padding: 8px 16px; margin-bottom: 16px;
  }
  .key-chip.none { background: var(--surface-2); color: var(--muted); }
  .key-chip .k-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex-shrink: 0; }
  .key-chip.none .k-dot { background: var(--faint); }

  /* ---------- Goals v2 ---------- */
  .goals-summary {
    display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
    background: var(--surface); border: none; border-radius: var(--r-card);
    padding: 26px 30px; margin-bottom: 20px; box-shadow: none;
  }
  .goals-summary-left { display: flex; flex-direction: column; gap: 6px; }
  .goals-summary-title { font-family: var(--serif); font-size: 27px; font-weight: 400; letter-spacing: -0.026em; color: var(--ink); }
  .goals-summary-sub { font-family: var(--sans); font-size: 13.5px; color: var(--muted); }
  .goals-ring { position: relative; width: 72px; height: 72px; flex-shrink: 0; }
  .goals-ring svg { width: 72px; height: 72px; transform: rotate(-90deg); }
  .goals-ring .ring-val {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    font-family: var(--serif); font-size: 20px; font-weight: 400; letter-spacing: -0.02em; color: var(--ink);
  }
  /* One group per aged-paper card; goals inside are hairline rows */
  .goal-cat {
    margin-bottom: 16px; background: var(--surface); border: none;
    border-radius: var(--r-card); box-shadow: none; overflow: visible;
    padding: 24px 28px;
  }
  .goal-cat-head {
    display: flex; align-items: center; gap: 11px;
    padding: 0 0 14px; border-bottom: 1px solid var(--border);
    background: none;
  }
  .goal-cat-head .dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
  .goal-cat-head .cat-name { font-family: var(--sans); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink); }
  .goal-cat-head .cat-tally { margin-left: auto; font-family: var(--mono); font-size: 11px; color: var(--faint); font-variant-numeric: tabular-nums; }
  .goal-cat .goal-item { padding: 18px 0; border-bottom: 1px solid var(--border); margin: 0; }
  .goal-cat .goal-item:last-child { border-bottom: none; padding-bottom: 0; }
  .goal-pct { font-family: var(--mono); font-size: 11px; color: var(--accent); font-weight: 500; }
  .goal-note { font-size: 13px; color: var(--muted); margin-top: 7px; }

  /* Compact goal strip (Insights + post-entry) — same card language as the Goals tab */
  .gs-group {
    background: var(--surface); border: none; border-radius: var(--r-card);
    box-shadow: none; overflow: visible; margin-bottom: 12px; padding: 24px 28px;
  }
  .gs-group:last-of-type { margin-bottom: 4px; }
  .gs-group-head {
    display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
    padding: 0 0 14px; border-bottom: 1px solid var(--border);
    background: none;
  }
  .gs-group-name {
    font-family: var(--sans); font-size: 12px; font-weight: 600; text-transform: uppercase;
    letter-spacing: 0.1em; color: var(--ink);
  }
  .gs-group-tally { font-family: var(--mono); font-size: 11px; color: var(--faint); white-space: nowrap; font-variant-numeric: tabular-nums; }

  .goal-strip { display: flex; flex-direction: column; }
  .goal-strip-row { padding: 18px 0; border-bottom: 1px solid var(--border); }
  .goal-strip-row:last-child { border-bottom: none; padding-bottom: 0; }
  /* The goal is the content, so it gets the editorial face */
  .gs-text {
    margin: 0; font-family: var(--serif); font-size: 19px; line-height: 1.35;
    letter-spacing: -0.02em; color: var(--ink); overflow-wrap: anywhere;
  }
  .goal-strip-row.done .gs-text { color: var(--faint); }
  .gs-tick { color: var(--happy); font-family: var(--sans); font-size: 13px; margin-right: 9px; }
  /* The AI read and its evidence are one sentence, not two stacked chips */
  .gs-read {
    margin: 10px 0 0; display: flex; align-items: baseline; gap: 10px;
    flex-wrap: wrap; line-height: 1.55;
  }
  .goal-strip-row .pulse-chip {
    font-family: var(--sans); font-size: 9.5px; font-weight: 600; font-style: normal;
    text-transform: uppercase; letter-spacing: 0.09em; line-height: 1.6;
    padding: 3px 10px; border-radius: var(--r-pill); white-space: nowrap; flex-shrink: 0;
  }
  .gs-evidence {
    flex: 1; min-width: 0; font-size: 13.5px;
    color: var(--muted); line-height: 1.55;
  }

  /* Goal-group editing */
  .cat-head { display: flex; align-items: baseline; gap: 12px; }
  .cat-del {
    background: none; border: none; color: var(--muted); cursor: pointer;
    font-size: 12px; font-family: inherit; flex-shrink: 0;
  }
  .cat-del:hover { color: var(--warn); }
  .cat-add { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
  .cat-add input { flex: 1; min-width: 200px; margin: 0; font-size: 14px; padding: 9px 12px; }
  .cat-add button { padding: 9px 16px; font-size: 13px; }
  .goal-strip-more {
    background: none; border: none; cursor: pointer; padding: 4px 0 2px;
    font-family: var(--sans); font-size: 13.5px; font-weight: 600; color: var(--accent);
    text-align: left;
  }
  .goal-strip-more:hover { text-decoration: underline; text-underline-offset: 3px; }

  /* Post-entry quick goal update */
  .quick-goal {
    display: flex; align-items: center; gap: 14px;
    padding: 14px 0; border-bottom: 1px solid var(--border);
  }
  .quick-goal:last-child { border-bottom: none; }
  .quick-goal .qg-text { flex: 1; font-family: var(--serif); font-size: 18px; min-width: 0; line-height: 1.35; letter-spacing: -0.018em; color: var(--ink); }

  /* ---------- Post-entry check-in view ---------- */
  .checkin-hero { text-align: center; padding: 44px 10px 22px; }
  .checkin-hero .ch-kicker {
    font-family: var(--sans); font-size: 11.5px; font-weight: 600; letter-spacing: 0.13em;
    text-transform: uppercase; color: var(--accent); margin-bottom: 16px;
  }
  .checkin-hero .ch-title {
    font-family: var(--serif); font-size: clamp(34px, 4.6vw, 46px); font-weight: 400;
    letter-spacing: -0.03em; line-height: 1.03; margin: 0 0 14px; color: var(--ink); text-wrap: balance;
  }
  .checkin-hero .ch-title em { font-style: italic; font-weight: 300; }
  .checkin-hero .ch-sub { color: var(--muted); font-size: 16px; line-height: 1.55; margin: 0 auto; max-width: 50ch; }

  /* Insights teaser: collapsed note with a fade + read-more */
  .note-teaser { position: relative; max-height: 168px; overflow: hidden; }
  .note-teaser::after {
    content: "";
    position: absolute; left: 0; right: 0; bottom: 0; height: 76px;
    background: linear-gradient(to bottom, transparent, var(--surface));
    pointer-events: none;
  }
  .note-more {
    display: inline-flex; align-items: center; gap: 7px;
    background: none; border: none; cursor: pointer; padding: 14px 0 0;
    font-family: var(--sans); font-size: 13.5px;
    color: var(--accent); font-weight: 600;
  }
  .note-more:hover { text-decoration: underline; text-underline-offset: 3px; }

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

  /* ---------- Tablet ---------- */
  @media (max-width: 900px) {
    .hero { grid-template-columns: 1fr; gap: 26px; padding: 32px 28px 30px; }
    .hero-metric { text-align: left; min-width: 0; }
    .hero-spark { margin-left: 0; }
    .hero-metric-val { font-size: 64px; }
  }

  /* ---------- Mobile ----------
     The nav leaves the top bar and becomes a floating pill anchored above
     the home indicator: on a phone this app is thumb-driven, and four
     tabs squeezed under a header were never comfortable to hit. */
  @media (max-width: 720px) {
    /* Safe areas: keep clear of the iPhone notch and home indicator */
    .topbar {
      height: auto;
      padding-top: calc(12px + env(safe-area-inset-top, 0px));
      padding-bottom: 12px;
      gap: 12px;
    }
    .brand { font-size: 21px; }
    .nav {
      position: fixed;
      left: 12px; right: 12px;
      bottom: calc(12px + env(safe-area-inset-bottom, 0px));
      z-index: 150;
      width: auto;
      background: var(--field);
      box-shadow: var(--shadow-lift);
      padding: 5px;
      justify-content: space-between;
    }
    /* Explicit min-height, not padding arithmetic: buttons take line-height
       from the UA sheet, not from body, so padding alone lands short. This is
       the primary navigation on a thumb-driven phone — it clears 44px. */
    .nav-item {
      flex: 1; padding: 4px; font-size: 12.5px;
      min-height: 44px;
      display: flex; align-items: center; justify-content: center;
      color: color-mix(in srgb, var(--field-ink) 62%, transparent);
    }
    .nav-item:hover { background: none; color: var(--field-ink); }
    .nav-item.active, .nav-item.active:hover { background: var(--accent); color: var(--on-accent); }
    .top-actions { margin-left: auto; }
    .container { padding: 22px 16px calc(110px + env(safe-area-inset-bottom, 0px)); }
    /* Toast outranks the nav on z-index, so it has to clear it or it lands
       square on top of the tab bar */
    .toast { bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
    h2 { font-size: 32px; }
    .hero { padding: 28px 22px 26px; border-radius: var(--r-md); }
    .hero-metric-val { font-size: 56px; }
    .card, .ai-slot, .feature, .capture-section, .otw-section,
    .goal-cat, .gs-group, .goals-summary, .ask-box, .book-page,
    .detail-free, .review-banner, .smart-intro {
      padding-left: 20px; padding-right: 20px; border-radius: var(--r-md);
    }
    details.period { padding-left: 8px; padding-right: 8px; border-radius: var(--r-md); }
    .entry-card { padding-left: 14px; padding-right: 14px; }
    .stat-grid { border-radius: var(--r-md); }
    .stat-card { padding: 18px 18px; }
    .stat-num { font-size: 32px; }
    .mood-label { text-align: left; min-width: 0; width: 100%; }
    .chat-note { font-size: 17.5px; }

    /* iOS zooms into any focused field under 16px — never let that happen */
    input, textarea, select { font-size: 16px !important; }

    /* Comfortable thumb targets (~44px) */
    button.primary, button.secondary, button.danger { min-height: 44px; }
    .icon-btn { width: 44px; height: 44px; padding: 0; }
    .avatar { width: 40px; height: 40px; font-size: 15px; }
    .menu-item { padding: 13px 13px; }
    .input-row input { padding-top: 12px; padding-bottom: 12px; }
    .login-overlay { padding-top: calc(24px + env(safe-area-inset-top, 0px)); }
  }