/* Display: themes, text size, spacing, easy-read font, reading ruler, reduce movement and read aloud.
   Same saved settings as the live site ('nd-preview-display'), plus font, ruler and rate. */

/* themes: same values as the live site's cream and mist, mapped to the kit's colour tokens */
:root[data-theme=cream]{--bg:#f6efdf;--bg2:#efe4c9;--card:#fff9ed;--raised:#f3e2bf;--sel:#eae0cd;--ink:#30291f;--head:#241d15;--sub:#65594b;--muted:#6b604f;--edge:#9c8a66;--hair:rgba(48,41,31,.14);--acc:#a45425;--acc-ink:#fff7eb;--acc-text:#904619;color-scheme:light}
:root[data-theme=mist]{--bg:#e9edf0;--bg2:#dce3e7;--card:#f5f7f8;--raised:#f1e6da;--sel:#dce3e7;--ink:#262d30;--head:#1b2124;--sub:#54616a;--muted:#5b6870;--edge:#8a9aa3;--hair:rgba(38,45,48,.14);--acc:#9c5325;--acc-ink:#fff8ef;--acc-text:#8d491e;color-scheme:light}
:root[data-theme=cream] .h-top,:root[data-theme=mist] .h-top{background:color-mix(in srgb,var(--bg) 92%,transparent)}
:root[data-theme=cream] .h-menu nav,:root[data-theme=mist] .h-menu nav{background:var(--bg)}

/* text size: the kit is sized in px, so scale the page itself */
:root[data-size="1.15"] body{zoom:1.15}
:root[data-size="1.3"] body{zoom:1.3}

/* more space */
:root[data-roomy=true] main :is(p,li,dd,blockquote,.h-sub,.h-lede){line-height:1.95!important;letter-spacing:.02em;word-spacing:.12em}

/* easy-read font: one plain sans-serif everywhere, no italics (code stays monospace) */
:root[data-font=easy] body :not(pre,code,kbd,samp,pre *,kbd *){font-family:'Figtree','Segoe UI',system-ui,sans-serif!important;font-style:normal!important}
:root[data-font=easy] main :is(p,li,.h-sub){letter-spacing:.015em}

/* reading ruler */
.nd-ruler{position:fixed;left:0;right:0;height:2.4em;margin-top:-1.2em;pointer-events:none;z-index:60;background:rgba(242,193,78,.13);border-block:1px solid rgba(242,193,78,.45);box-shadow:0 0 0 100vmax rgba(0,0,0,.18);display:none}
:root[data-ruler=true] .nd-ruler{display:block}
@media (hover:none){:root[data-ruler=true] .nd-ruler{display:none}}

/* read aloud: the block being read */
.nd-reading{outline:3px solid var(--acc);outline-offset:4px;border-radius:6px;background:color-mix(in srgb,var(--acc) 10%,transparent)}

/* the panel */
.nd-display{width:min(460px,calc(100vw - 24px));max-height:calc(100vh - 24px);padding:0;border:1px solid var(--edge);border-radius:22px;background:var(--card);color:var(--ink);box-shadow:0 30px 80px rgba(0,0,0,.5)}
.nd-display::backdrop{background:rgba(10,8,6,.55)}
.nd-display form{padding:22px 22px 18px;display:grid;gap:18px}
.nd-display header{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.nd-display h2{margin:0;font:400 28px 'EB Garamond',serif;color:var(--head)}
.nd-display header p{margin:2px 0 0;font-size:13.5px;color:var(--muted)}
.nd-display .x{flex:none;width:44px;height:44px;border-radius:50%;border:1px solid var(--edge);background:none;color:var(--head);font-size:20px;cursor:pointer}
.nd-display fieldset{border:0;margin:0;padding:0;display:grid;gap:8px}
.nd-display legend{padding:0;margin-bottom:8px;font-weight:700;font-size:14px;color:var(--head)}
.nd-seg{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:4px;padding:4px;border-radius:14px;background:var(--bg2)}
.nd-seg label{position:relative;display:grid;place-content:center;min-height:42px;border-radius:10px;cursor:pointer;font-weight:600;font-size:14px;color:var(--sub);text-align:center}
.nd-seg input{position:absolute;opacity:0;inset:0;cursor:pointer}
.nd-seg label:has(input:checked){background:var(--card);color:var(--head);box-shadow:0 1px 0 var(--hair),0 0 0 1px var(--edge)}
.nd-seg label:has(input:focus-visible){outline:2px solid var(--acc)}
.nd-seg .sw{display:inline-block;width:14px;height:14px;border-radius:50%;margin-right:6px;vertical-align:-2px;border:1px solid var(--edge)}
.nd-tog{display:flex;justify-content:space-between;align-items:center;gap:14px;min-height:44px;cursor:pointer;font-size:14.5px;color:var(--ink)}
.nd-tog small{display:block;color:var(--muted);font-size:12.5px}
.nd-tog input{appearance:none;flex:none;width:46px;height:28px;border-radius:999px;background:var(--edge);position:relative;cursor:pointer;transition:background .2s}
.nd-tog input::after{content:'';position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;transition:transform .2s}
.nd-tog input:checked{background:var(--acc)}
.nd-tog input:checked::after{transform:translateX(18px)}
.nd-tog input:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.nd-read{display:flex;flex-wrap:wrap;gap:8px}
.nd-read button,.nd-display .reset{min-height:42px;padding:0 14px;border-radius:999px;border:1px solid var(--edge);background:none;color:var(--head);font:600 14px 'Figtree',sans-serif;cursor:pointer}
.nd-read button.go{background:var(--acc);border-color:var(--acc);color:var(--acc-ink)}
.nd-rate{display:flex;align-items:center;gap:10px;font-size:13.5px;color:var(--sub)}
.nd-rate input{flex:1;accent-color:var(--acc)}
.nd-display .note{margin:0;font-size:12.5px;color:var(--muted)}
.nd-display footer{display:flex;justify-content:space-between;align-items:center;gap:10px}
.nd-display footer a{color:var(--acc-text);font-size:13.5px}
.nd-readbar{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:70;display:flex;align-items:center;gap:10px;padding:8px 8px 8px 16px;border-radius:999px;background:var(--card);border:1px solid var(--edge);box-shadow:0 14px 40px rgba(0,0,0,.4);color:var(--head);font-weight:600;font-size:14px}
.nd-readbar button{min-height:40px;padding:0 14px;border-radius:999px;border:1px solid var(--edge);background:none;color:var(--head);font:600 13.5px 'Figtree',sans-serif;cursor:pointer}
.nd-readbar[hidden]{display:none}

/* "Make it yours" prompt on the homepage */
.h-yours{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:18px;padding:12px 14px;border-radius:16px;border:1px dashed var(--edge);color:var(--sub);font-size:14px;max-width:620px}
.h-yours b{color:var(--head)}
.h-yours button{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 14px 0 6px;border-radius:999px;border:1px solid var(--acc);background:none;color:var(--head);font:700 13.5px 'Figtree',sans-serif;cursor:pointer}
.h-yours .aa{display:inline-grid;place-content:center;width:30px;height:30px;border-radius:50%;background:var(--raised);font:400 15px 'EB Garamond',serif;color:var(--acc-text)}
.h-yours>span{flex:1;min-width:240px}
.nd-seg label{display:flex;align-items:center;justify-content:center}

/* "No cookie banner" note (home/cookie-note.js) */
.nd-cookie{position:fixed;right:20px;bottom:20px;z-index:65;display:flex;gap:16px;align-items:flex-start;width:min(440px,calc(100vw - 40px));padding:18px 20px;border-radius:20px;border:1px solid rgba(217,154,85,.5);background:var(--card);color:var(--sub);box-shadow:0 24px 60px rgba(0,0,0,.45);opacity:0;transform:translateY(16px);transition:opacity .35s ease,transform .35s ease}
.nd-cookie.in{opacity:1;transform:none}
.nd-cookie-art{flex:none;width:52px;height:52px}
.nd-cookie h2{margin:0 0 6px;font:400 24px/1.15 'EB Garamond',serif;color:var(--head)}
.nd-cookie p{margin:0 0 8px;font-size:14.5px;line-height:1.55}
.nd-cookie p.sub{font-size:13.5px;color:var(--muted)}
.nd-cookie .acts{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:6px}
.nd-cookie .btn{height:40px}
.nd-cookie a{color:var(--acc-text);font-weight:700;font-size:14px;min-height:40px;display:inline-flex;align-items:center}
@media (max-width:600px){.nd-cookie{left:10px;right:10px;bottom:10px;width:auto;padding:14px 16px;gap:12px}.nd-cookie-art{width:40px;height:40px}.nd-cookie h2{font-size:21px}}
html.still .nd-cookie{transition:none}
html.still .nd-cookie{transition:none}

/* Keep the optional voice action usable on narrow screens. */
.nd-readbar{max-width:calc(100vw - 24px);width:max-content;flex-wrap:wrap;border-radius:18px;box-sizing:border-box}
.nd-readbar span{flex:1 1 180px}
.nd-readbar button[hidden]{display:none}
@media(max-width:500px){.nd-readbar{bottom:12px;gap:6px;padding:10px}.nd-readbar span{flex-basis:100%}.nd-readbar button{font-size:13px;padding:0 10px}}