/**
 * The light reading surface — behind NLD_LIGHT_READING (?light_reading=1).
 *
 * Scoped to `body.light-reading #dew-modal-content` and nothing else, so the
 * forest palette is untouched everywhere this is off. Same containment Home v2
 * used: redefine the tokens inside one scope rather than editing the globals.
 *
 * TWO KINDS OF COLOUR LIVE IN THIS SCREEN and they need different handling.
 *
 * Most of it references tokens — `color: var(--primary)`, `background:
 * rgba(var(--primary-rgb), .04)` — written inline by the template and by
 * renderQuadripartite. An inline style that references a custom property still
 * resolves against whatever an ancestor defines, so redefining the tokens below
 * rethemes all of it with no specificity fight at all. That is why the green
 * sweep mattered: before it, every one of those was a baked-in forest literal.
 *
 * The rest are literals the sweep did not cover — the neutral inks (#222/#333/
 * #2a2a2a/#444) and the brass parchment of the Story Time card. An inline style
 * can only be beaten by !important, so those rules carry it. Each one is marked;
 * they are the exception, not the house style.
 *
 * Nothing here changes markup or ids. renderQuadripartite finds ~40 bread-* ids
 * by getElementById, so this file deliberately cannot break the reading.
 */

body.light-reading #dew-modal-content {
    /* The reading's own palette. Sampled to sit beside Home v2 rather than
       match it exactly — Home is a dashboard, this is a page you read for
       several minutes, so the paper is warmer and the ink softer.

       --read-paper was #fbfcfd — the same fault the shell had before tonight's
       fix (nld-shell-light.css, Paul: "too white"), and here it was actually
       worse: 251/252/253 sits closer to pure white than the shell's own broken
       #f7fcfb ever did. Pulled toward the shell's canonical mint-blue, but only
       as far as a tint — this paper is what you read for several minutes, so
       it stays noticeably calmer than the shell's own background sitting
       behind the whole app, not a second dose of the same glow. --read-card
       stays #ffffff: a card sitting on tinted paper is supposed to read
       whiter than the paper under it, that part was never the problem. */
    --read-paper: #f1f8f6;
    --read-card: #ffffff;
    --read-ink: #1b2b33;
    --read-ink-soft: #55707c;
    --read-rule: #e4edf1;

    /* Redefining these two rethemes every tokenised colour the template and the
       renderer write inline — borders, tints, labels, the reference, the
       personalize button. Both must move together or the greens split. */
    --primary: #2f7d8c;
    --primary-rgb: 47, 125, 140;

    background: var(--read-paper);
    color: var(--read-ink);
    padding: var(--s-18) var(--s-15) var(--s-27);
    border-radius: 18px;
}

/* The reading is not the outermost thing on screen. It is cloned into
   .modal-box, which is cream and scrolls — so light paper inside it read as two
   stacked cards with a dark unstyled scrollbar down the gap between them.
   :has() ties this to the box holding THIS reading; .modal-box is shared by
   every modal in the app and must stay cream everywhere else.

   The fallback in the var() below is not a fallback in practice — .modal-box
   is the PARENT #dew-modal-content is cloned into, and a custom property set
   on a child is invisible to its ancestor, so --read-paper never resolves
   here and this literal is what actually paints. It has to be hand-kept
   equal to --read-paper above or the two stacked-card seam this rule exists
   to hide comes back. */
body.light-reading .modal-box:has(#dew-modal-content) {
    background: var(--read-paper, #f1f8f6);
    scrollbar-width: thin;
    scrollbar-color: #cfdde3 transparent;
}

body.light-reading .modal-box:has(#dew-modal-content)::-webkit-scrollbar {
    width: 8px;
}

body.light-reading .modal-box:has(#dew-modal-content)::-webkit-scrollbar-thumb {
    background: #cfdde3;
    border-radius: 999px;
}

body.light-reading .modal-box:has(#dew-modal-content)::-webkit-scrollbar-track {
    background: transparent;
}

/* ── The opening: lane, day counter, title ───────────────────────────────── */

body.light-reading #dew-modal-content #bread-lane {
    font-size: 11px;
    letter-spacing: 1.6px;
    opacity: 0.75;
}

body.light-reading #dew-modal-content #bread-day-counter {
    color: var(--read-ink-soft) !important; /* inline var(--text-main) = cream */
    font-size: 12px;
}

body.light-reading #dew-modal-content #bread-title {
    color: var(--read-ink) !important; /* inline var(--primary) */
    font-size: 29px;
    line-height: 1.18;
    letter-spacing: -0.02em;
    margin-bottom: var(--s-15);
}

/* ── The verse: a quote card, not a rule down the side ───────────────────── */

body.light-reading #dew-modal-content #bread-verse {
    position: relative;
    color: var(--read-ink) !important; /* inline #444 */
    background: var(--read-card);
    /* The 4px rule down the side is written inline, so a stylesheet loses to it
       whatever the order. The card replaces the bar — keeping both reads as the
       old design wearing new colours. */
    border-left: none !important;
    border: 1px solid var(--read-rule) !important;
    border-radius: 16px;
    padding: var(--s-27) var(--s-21) var(--s-21);
    margin-bottom: var(--s-9);
    font-size: 21px;
    line-height: 1.62;
    box-shadow: 0 6px 20px rgba(27, 43, 51, 0.05);
}

/* NO decorative quote mark here, deliberately. The mockup's verse opens with a
   big serif quote, but NLD's verse text arrives already carrying its own — the
   string starts with a literal `"` — so adding one drew a second mark that sat
   on top of the first letter. The content already says what the ornament was
   there to say. */

/* The reference reads as a tag under the verse rather than a heading. */
body.light-reading #dew-modal-content #bread-reference {
    display: inline-block;
    cursor: pointer;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.02em;
    padding: 5px 12px;
    border-radius: 999px;
    background: rgba(var(--primary-rgb), 0.10);
    margin-bottom: var(--s-21);
}

/* The tappable reference is an <a> nested two levels inside #bread-reference,
   carrying its own inline text-decoration:underline — so styling the pill did
   not reach it. Inside a pill an underline reads as a broken link rather than
   an invitation; the pill is already the affordance. */
body.light-reading #dew-modal-content #bread-reference,
body.light-reading #dew-modal-content #bread-reference a {
    text-decoration: none !important;
}

/* ── The passage and the woven summary: what they came to read ───────────── */

body.light-reading #dew-modal-content #bread-passage-text,
body.light-reading #dew-modal-content #bread-summary {
    color: var(--read-ink) !important; /* inline #2a2a2a */
    font-size: 17.5px;
    line-height: 1.9;
}

body.light-reading #dew-modal-content #bread-passage-text-wrap {
    border-left: none !important; /* inline 3px rule, same as the verse */
    border: 1px solid var(--read-rule) !important;
    border-radius: 14px;
    background: var(--read-card) !important; /* inline primary tint */
    padding: var(--s-21);
}

/* ── The three lenses ────────────────────────────────────────────────────── */

body.light-reading #dew-modal-content .bread-lens {
    padding: var(--s-18) 0 0;
    border-top: 1px solid var(--read-rule);
}

body.light-reading #dew-modal-content .bread-lens .small {
    font-size: 10.5px;
    letter-spacing: 1.4px;
    opacity: 1;
}

body.light-reading #dew-modal-content #bread-reveal,
body.light-reading #dew-modal-content #bread-perspective,
body.light-reading #dew-modal-content #bread-walk {
    color: var(--read-ink) !important; /* inline #333 */
    font-size: 16.5px;
    line-height: 1.8;
}

/* ── Story Time keeps its parchment ──────────────────────────────────────── */

/* Deliberately NOT rethemed. The card is meant to feel like an older page than
   the screen around it, and that reads even better against light paper than it
   did against the forest. Only the shadow is softened to match the others. */
body.light-reading #dew-modal-content #bread-story-time-wrap > div {
    box-shadow: 0 6px 20px rgba(27, 43, 51, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.6) !important;
}

/* ── The journal, and the ask ────────────────────────────────────────────── */

body.light-reading #dew-modal-content #bread-journal,
body.light-reading #dew-modal-content #bread-ask-input {
    background: var(--read-card) !important;
    color: var(--read-ink) !important;
    border: 1px solid var(--read-rule) !important;
    border-radius: 14px !important;
    font-size: 16px;
    line-height: 1.7;
}

body.light-reading #dew-modal-content #bread-journal:focus,
body.light-reading #dew-modal-content #bread-ask-input:focus {
    outline: none;
    border-color: rgba(var(--primary-rgb), 0.55) !important;
    box-shadow: 0 0 0 4px rgba(var(--primary-rgb), 0.12) !important;
}

/* ── Speak it, softened ──────────────────────────────────────────────────── */

/* The record button is #ff4b2b on a hot gradient. Against forest it was one
   warm thing among many; against light teal it is the only saturated colour on
   the screen and it shouts over the reflection it is inviting. So it becomes a
   tinted pill in the same language as the reference — still unmistakably the
   warm control, no longer the loudest thing in the room.

   :not(.is-recording) is load-bearing. Recording paints the button black inline
   with a pulsing glow, and !important here would beat that too and quietly
   remove the only signal that the microphone is live. */
body.light-reading #dew-modal-content #btn-record-bread:not(.is-recording) {
    background: rgba(224, 122, 95, 0.12) !important;
    border: 1px solid rgba(224, 122, 95, 0.42) !important;
    color: #b4553c !important;
    box-shadow: none !important;
}

/* ── The seal: the one button that ends the reading ──────────────────────── */

body.light-reading #dew-modal-content #bread-btn {
    background: linear-gradient(180deg, #3a97a8 0%, var(--primary) 100%) !important;
    border: none !important;
    border-radius: 16px !important;
    color: #fff !important;
    font-size: 17px;
    font-weight: 700;
    padding: var(--s-18) !important;
    box-shadow: 0 10px 22px rgba(var(--primary-rgb), 0.28) !important;
}

/* ── The close control ───────────────────────────────────────────────────── */

body.light-reading #dew-modal-content > button[aria-label='Close'] {
    background: var(--read-card) !important;
    color: var(--read-ink-soft) !important;
    border: 1px solid var(--read-rule) !important;
    box-shadow: 0 2px 8px rgba(27, 43, 51, 0.06) !important;
}