/* ============================================================
   Customisation: three more themes, text options, highlight
   styles, the tabbed Aa panel, and the "Your reading" card.
   ============================================================ */

/* highlight colours, in a light-paper and a dark-paper strength */
:root {
  --hl-amber: #C98A12; --hl-sage: #4F8A5B; --hl-sky: #3B7DC0; --hl-rose: #C2416F;
  --hl: var(--crimson);
  --hl-a: 15%;
  --hl-bg: var(--pill);
  --s-hl: 255, 158, 82; /* the spotlight's ember */
}
:root[data-theme="dark"], :root[data-theme="oled"], :root[data-theme="hearth"], :root[data-theme="mars"], :root[data-theme="ash"] {
  --hl-amber: #F2B84B; --hl-sage: #8CC59A; --hl-sky: #7DB3EA; --hl-rose: #F08AAE;
  --hl-a: 30%;
}
:root[data-hlc="amber"] { --hl: var(--hl-amber); --s-hl: 255, 196, 92; }
:root[data-hlc="sage"] { --hl: var(--hl-sage); --s-hl: 150, 214, 160; }
:root[data-hlc="sky"] { --hl: var(--hl-sky); --s-hl: 130, 186, 245; }
:root[data-hlc="rose"] { --hl: var(--hl-rose); --s-hl: 245, 140, 178; }
:root:not([data-hlc="accent"]) { --hl-bg: color-mix(in oklab, var(--hl) var(--hl-a), transparent); }
:root[data-hlc="accent"] { --hl-bg: var(--pill); }

/* ============================================================
   Themes
   ============================================================ */

/* Parchment: old paper in daylight. Straw-coloured, toothy, oxblood ink for the accents. */
:root[data-theme="parchment"] {
  --bg: #EFE5CC;
  --bg-2: #E5D8B9;
  --surface: #F6EEDA;
  --ink: #2B2116;
  --ink-2: #5E4E39;
  --ink-3: #8A7759;
  --line: #D8C8A4;
  --crimson: #8E2B1F;
  --gold: #7C5E1C;
  --pill: rgba(142, 43, 31, 0.14);
  --bar: rgba(239, 229, 204, 0.88);
  --shade: 52, 38, 20;
  --paper: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .36 0 0 0 0 .26 0 0 0 0 .1 0 0 0 .16 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --glow-a: .26;
  color-scheme: light;
}

/* Mars: dusk over the Martian plains. Rust-red dark, apricot ink, a coral sun for the accents. */
:root[data-theme="mars"] {
  --bg: #2E1A16;
  --bg-2: #3A221D;
  --surface: #40271F;
  --ink: #F2DDCD;
  --ink-2: #D0AF9B;
  --ink-3: #A0806D;
  --line: #533429;
  --crimson: #F08A63;
  --gold: #E9BB78;
  --pill: rgba(240, 138, 99, 0.26);
  --bar: rgba(46, 26, 22, 0.86);
  --shade: 0, 0, 0;
  --paper: var(--grain-light);
  --glow-a: .34;
  color-scheme: dark;
}
:root[data-theme="mars"] body {
  background-image: radial-gradient(120% 60% at 50% -10%, rgba(236, 104, 66, .16), transparent 70%), var(--grain-light);
  background-repeat: no-repeat, repeat;
}

/* Ash: the cold hour after the fire. Charcoal-blue, pale ink, embers left in the accents. */
:root[data-theme="ash"] {
  --bg: #1F242B;
  --bg-2: #272E36;
  --surface: #2C333C;
  --ink: #DDE3E8;
  --ink-2: #AAB4BE;
  --ink-3: #7D8893;
  --line: #38414B;
  --crimson: #EE8574;
  --gold: #D9B673;
  --pill: rgba(238, 133, 116, 0.24);
  --bar: rgba(31, 36, 43, 0.86);
  --shade: 0, 0, 0;
  --paper: none;
  --glow-a: .3;
  color-scheme: dark;
}
:root[data-theme="ash"] body {
  background-image: radial-gradient(110% 55% at 50% -8%, rgba(130, 160, 200, .1), transparent 70%);
  background-repeat: no-repeat;
}

/* the light papers' spotlight treatment (styles.css / mobile.css name light and sepia) */
:root[data-theme="parchment"] body.spot-on .pages { filter: blur(18px) brightness(.3) saturate(1.25) sepia(.3); }
:root[data-theme="parchment"] .spot-backdrop { background: rgba(30, 15, 8, .64); }
:root[data-theme="parchment"] body.spot-on { background-color: #2B1D16; }
@media (max-width: 720px), (pointer: coarse) and (max-height: 500px) {
  :root[data-theme="parchment"] body.spot-on .pages { filter: none; opacity: .14; }
}
@media (display-mode: standalone) {
  :root[data-theme="parchment"] body::before {
    content: ""; position: fixed; inset: 0 0 auto 0; z-index: 90; pointer-events: none;
    height: calc(env(safe-area-inset-top) + 8px);
    background: linear-gradient(rgba(var(--shade), .5), rgba(var(--shade), 0));
  }
}

/* ============================================================
   Text options
   ============================================================ */
/* weight: the fonts are variable (Literata 300–800, Hanken 400–700), so this is real weight, not faux bold */
:root[data-weight="bold"] .pages, :root[data-weight="bold"] .spot-track { font-weight: 520; }
:root[data-weight="bold"] .sec :is(h1, h2, h3, h5, h6) { font-weight: 500; }
:root[data-weight="bold"] .sec > p.c:first-child { font-weight: 400; }

/* column width (desktop): a measure in ems so it scales with the text */
:root[data-width="narrow"] { --measure: 28em; }
:root[data-width="wide"] { --measure: 41em; }
:root[data-width="narrow"] .spot-track { width: min(29ch, calc(100vw - 48px)); }
:root[data-width="wide"] .spot-track { width: min(40ch, calc(100vw - 48px)); }
/* on a phone the column is the screen: the same choice sets the side margins */
@media (max-width: 720px), (pointer: coarse) and (max-height: 500px) {
  :root[data-width="narrow"] .pages { padding-left: max(34px, env(safe-area-inset-left)); padding-right: max(34px, env(safe-area-inset-right)); }
  :root[data-width="wide"] .pages { padding-left: max(12px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right)); }
  :root[data-width="narrow"] .spot-track { width: calc(100vw - 64px); }
  :root[data-width="wide"] .spot-track { width: calc(100vw - 28px); }
}

/* paragraphs: book (indented, no gaps; the default) or spaced (flush, a gap between) */
:root[data-para="spaced"] .sec p:not(.c) { text-indent: 0; margin-bottom: .85em; }
:root[data-para="spaced"] .sec li p { margin-bottom: .3em; }

:root[data-hyph="off"] .pages { hyphens: manual; -webkit-hyphens: manual; }

/* ============================================================
   The word highlight while listening: marker, underline, glow
   ============================================================ */
.pill { background: var(--hl-bg); }
:root[data-hls="underline"] .pill { background: none; border-radius: 0; }
:root[data-hls="underline"] .pill::after {
  content: ""; position: absolute; left: .16em; right: .16em; bottom: .02em;
  height: max(2px, .11em); border-radius: 2px; background: var(--hl);
}
:root[data-hls="glow"] .pill { background: none; }
:root[data-hls="glow"] .pill::before {
  content: ""; position: absolute; inset: -38% -16%;
  border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in oklab, var(--hl) calc(var(--hl-a) * 2.4), transparent), color-mix(in oklab, var(--hl) calc(var(--hl-a) * .9), transparent) 55%, transparent);
}

/* the spotlight keeps its ember glow; underline swaps it for a line, and the colour tints it */
.sw::before { background: radial-gradient(closest-side, rgba(var(--s-hl), .3), rgba(var(--s-hl), .12) 55%, transparent); }
:root[data-hls="underline"] .sw::before {
  inset: auto .02em -.04em; height: max(2px, .07em); border-radius: 2px;
  background: rgba(var(--s-hl), .9);
}

/* ============================================================
   The Aa panel: Text / Look / Listening
   ============================================================ */
.pop-type.aa-panel {
  width: 348px; gap: 0; padding: 0 14px 14px;
  max-height: min(700px, calc(100dvh - 84px));
  overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin;
}
.aa-tabs {
  position: sticky; top: 0; z-index: 2;
  display: grid; grid-template-columns: repeat(var(--n, 3), 1fr);
  margin: 0 -14px 14px; padding: 14px 14px 0;
  background: var(--surface);
}
.aa-tabs::after { /* the track */
  content: ""; position: absolute; z-index: -1; left: 14px; right: 14px; top: 14px; bottom: 0;
  border-radius: 11px; background: var(--bg-2);
}
.aa-tabs::before { /* the thumb that slides to the open tab */
  content: ""; position: absolute; top: 17px; bottom: 3px;
  left: 17px; width: calc((100% - 34px) / var(--n, 3));
  border-radius: 8px; background: var(--surface);
  box-shadow: 0 1px 3px rgba(var(--shade), .16), 0 0 0 .5px rgba(var(--shade), .06);
  transform: translateX(calc(var(--i, 0) * 100%));
  transition: transform .5s var(--spring, cubic-bezier(.16, 1, .3, 1));
}
.aa-tabs [role="tab"] {
  position: relative; height: 36px; margin: 3px 0;
  font-size: 13px; font-weight: 600; color: var(--ink-3);
  border-radius: 8px; transition: color .25s;
}
.aa-tabs [role="tab"]:hover { color: var(--ink-2); }
.aa-tabs [role="tab"][aria-selected="true"] { color: var(--ink); }

.aa-panels { position: relative; }
.aa-panels:has(> .aa-leaving) { overflow: hidden; }
.aa-tab-panel { display: flex; flex-direction: column; gap: 12px; }
.aa-tab-panel.aa-leaving { position: absolute; inset: 0 0 auto 0; pointer-events: none; }
.aa-panel .focus-row { margin-top: 16px; }

.opt-row { display: grid; grid-template-columns: 74px minmax(0, 1fr); align-items: center; gap: 10px; }
.opt-row .seg button { height: 32px; padding: 0 6px; }
.seg .w-reg { font-weight: 450; }
.seg .w-bold { font-weight: 750; }
.seg .f-sans { font-family: var(--ui); }
.aa-panel .toggle-row { padding: 2px 0; }

/* themes: each swatch is a scrap of that paper with its own ink */
.aa-panel .type-row.themes { grid-template-columns: repeat(3, 1fr); gap: 6px; }
.aa-panel .swatch {
  flex-direction: row; justify-content: flex-start; gap: 9px;
  padding: 5px 8px 5px 5px; border-radius: 11px; font-size: 13px;
  transition: background-color .2s, color .2s;
}
.aa-panel .swatch[aria-checked="true"] { background: color-mix(in oklab, var(--crimson) 10%, transparent); }
.aa-panel .swatch .sw-dot {
  flex: none; width: 32px; height: 32px; border-radius: 9px;
  display: grid; place-items: center;
  background: var(--sw-bg); color: var(--sw-ink);
  box-shadow: inset 0 0 0 1px rgba(128, 112, 108, .3);
  transition: box-shadow .25s;
}
.aa-panel .swatch[aria-checked="true"] .sw-dot { box-shadow: 0 0 0 2px var(--surface), 0 0 0 3.5px var(--crimson); }
.sw-dot b { font: 500 14px/1 var(--serif); letter-spacing: -0.02em; padding-bottom: 2px; border-bottom: 2px solid var(--sw-acc); }
.sw-auto { --sw-bg: linear-gradient(135deg, #F8F5F4 50%, #1C1615 50%); --sw-ink: #8E8280; --sw-acc: #C2404C; }
.sw-light { --sw-bg: #F8F5F4; --sw-ink: #241B1A; --sw-acc: #A41E2B; }
.sw-parchment { --sw-bg: #EFE5CC; --sw-ink: #2B2116; --sw-acc: #8E2B1F; }
.sw-sepia { --sw-bg: #F1E6D3; --sw-ink: #3A2B1F; --sw-acc: #962530; }
.sw-mars { --sw-bg: radial-gradient(circle at 50% 0%, #6A2E22, #2E1A16 75%); --sw-ink: #F2DDCD; --sw-acc: #F08A63; }
.sw-ash { --sw-bg: #1F242B; --sw-ink: #DDE3E8; --sw-acc: #EE8574; }
.sw-hearth { --sw-bg: radial-gradient(circle at 38% 32%, #6b3a1f, #1A120D 72%); --sw-ink: #F1E1C6; --sw-acc: #E9824C; }
.sw-dark { --sw-bg: #1C1615; --sw-ink: #E9E0DA; --sw-acc: #E0505A; }
.sw-oled { --sw-bg: #000; --sw-ink: #D6CEC8; --sw-acc: #E0505A; }

/* highlight: a live sample line, the style, and the colour */
.hl-set { display: flex; flex-direction: column; gap: 12px; transition: opacity .25s; }
.hl-set.is-off { opacity: .5; }
.hl-preview {
  margin: 0; padding: 12px 14px; border-radius: 10px;
  background: var(--bg); background-image: var(--paper);
  font: 400 17px/1.5 var(--read-font); color: color-mix(in oklab, var(--ink) 64%, var(--bg));
}
:root[data-weight="bold"] .hl-preview { font-weight: 520; }
.hp-word { position: relative; color: var(--ink); z-index: 0; }
.hp-word::before {
  content: ""; position: absolute; z-index: -1; inset: -.04em -.18em;
  border-radius: .32em; background: var(--hl-bg);
  transition: background-color .25s, inset .25s;
}
:root[data-hls="underline"] .hp-word::before { inset: auto .02em -.06em; height: max(2px, .11em); border-radius: 2px; background: var(--hl); }
:root[data-hls="glow"] .hp-word::before {
  inset: -.45em -.35em; border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in oklab, var(--hl) calc(var(--hl-a) * 2.4), transparent), color-mix(in oklab, var(--hl) calc(var(--hl-a) * .9), transparent) 55%, transparent);
}
.hl-set.is-off .hp-word::before { opacity: 0; }

.hl-colors { display: flex; gap: 10px; padding: 2px 0; }
.hlc {
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--c); box-shadow: inset 0 0 0 1px rgba(var(--shade), .14);
  transition: box-shadow .2s, transform .2s var(--spring, ease);
}
.hlc:hover { transform: scale(1.08); }
.hlc[aria-checked="true"] { box-shadow: 0 0 0 2px var(--surface), 0 0 0 3.5px var(--c); }
.hlc-accent { --c: var(--crimson); }
.hlc-amber { --c: var(--hl-amber); }
.hlc-sage { --c: var(--hl-sage); }
.hlc-sky { --c: var(--hl-sky); }
.hlc-rose { --c: var(--hl-rose); }

/* phones: the panel is a bottom sheet with finger-sized rows */
@media (max-width: 720px), (pointer: coarse) and (max-height: 500px) {
  .type-sheet.aa-panel { gap: 0; padding-top: 0; }
  .type-sheet .aa-tabs { margin: 0 -20px 16px; padding: 4px 20px 0; }
  .type-sheet .aa-tabs::after { left: 20px; right: 20px; top: 4px; }
  .type-sheet .aa-tabs::before { left: 23px; top: 7px; width: calc((100% - 46px) / var(--n, 3)); }
  .type-sheet .aa-tabs [role="tab"] { height: 42px; font-size: 14.5px; }
  .type-sheet .aa-tab-panel { gap: 16px; }
  .type-sheet .opt-row { grid-template-columns: 84px minmax(0, 1fr); }
  .type-sheet .opt-row .seg button { height: 42px; }
  .type-sheet .swatch .sw-dot { width: 30px; height: 30px; }
  .type-sheet .swatch { padding-left: 7px; }
  .type-sheet .hlc { width: 38px; height: 38px; }
  .type-sheet .hl-colors { gap: 12px; }
  .type-sheet .focus-row { margin-top: 18px; }
}

/* contents drawer: time left in the book */
.drawer-left { margin: 8px 0 0; font-size: 13px; font-weight: 600; color: var(--gold); font-variant-numeric: tabular-nums; }

/* ============================================================
   Library: Your reading
   ============================================================ */
.reading { margin: 0 0 clamp(44px, 6vw, 72px); }
.rd-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 24px; padding-bottom: 16px; border-bottom: 1px solid var(--line); margin-bottom: 24px; }
.rd-head h2 { margin: 0; font: 500 22px/1.2 var(--serif); font-variation-settings: "opsz" 32; letter-spacing: -0.01em; }
.rd-week-total { margin: 0; font-size: 13px; color: var(--ink-3); font-variant-numeric: tabular-nums; }

.rd-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, 1.15fr); }
.rd-col { min-width: 0; padding: 2px clamp(20px, 3vw, 36px); border-left: 1px solid var(--line); }
.rd-col:first-child { padding-left: 0; border-left: 0; }
.rd-col:last-child { padding-right: 0; }

.rd-today { margin: 0; font: italic 400 19px/1.25 var(--serif); color: var(--ink-2); }
.rd-big { font: normal 400 38px/1 var(--serif); font-variation-settings: "opsz" 72; letter-spacing: -0.02em; color: var(--ink); margin-right: .12em; }
.rd-split { margin: 8px 0 0; font-size: 13px; color: var(--ink-3); max-width: 34ch; }
.rd-streak { display: flex; align-items: center; gap: 9px; margin: 18px 0 0; font-size: 14px; font-weight: 600; color: var(--ink-2); }
.rd-ember { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--line); }
.rd-streak.is-on .rd-ember {
  background: var(--crimson);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--crimson) 18%, transparent), 0 0 14px color-mix(in oklab, var(--crimson) 65%, transparent);
}
.rd-left { margin: 12px 0 0; font: 400 15px/1.45 var(--serif); color: var(--ink-2); text-wrap: pretty; }

.rd-bars { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; align-items: end; height: 118px; }
.rd-bars li { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 8px; height: 100%; }
.rd-bar {
  width: 100%; max-width: 24px; height: calc(var(--h) * 88px); min-height: 3px;
  border-radius: 6px 6px 2px 2px;
  background: color-mix(in oklab, var(--gold) 60%, var(--bg-2));
  transform-origin: 50% 100%;
}
.rd-bars li.is-zero .rd-bar { background: var(--line); }
.rd-bars li.is-today .rd-bar { background: linear-gradient(to top, var(--crimson), color-mix(in oklab, var(--crimson) 60%, var(--gold))); }
.rd-bars li.is-today.is-zero .rd-bar { background: color-mix(in oklab, var(--crimson) 35%, var(--line)); }
.rd-day { font-size: 11.5px; font-weight: 600; line-height: 1; color: var(--ink-3); }
.rd-bars li.is-today .rd-day { color: var(--crimson); }

.rd-book-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 13px; }
.rd-book-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; column-gap: 12px; }
.rd-bt { font: 500 15.5px/1.25 var(--serif); font-variation-settings: "opsz" 24; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rd-bh { font-size: 12.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.rd-bbar {
  grid-column: 1 / -1; height: 3px; margin-top: 6px; border-radius: 3px;
  width: calc(var(--w) * 100%); min-width: 6px;
  background: linear-gradient(90deg, var(--crimson), var(--gold));
  transform-origin: 0 50%;
}

/* the one entrance: the week's bars rise, the books' bars draw out */
.rd-anim .rd-bar { animation: rd-rise .9s var(--ease-out) both; animation-delay: calc(var(--k) * 55ms + 200ms); }
.rd-anim .rd-bbar { animation: rd-draw 1.1s var(--ease-out) both .45s; }
@keyframes rd-rise { from { transform: scaleY(0); } }
@keyframes rd-draw { from { transform: scaleX(0); } }

@media (max-width: 860px) {
  .rd-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); row-gap: 26px; }
  .rd-books { grid-column: 1 / -1; padding: 24px 0 0; border-left: 0; border-top: 1px solid var(--line); }
}
@media (max-width: 520px) {
  .rd-grid { grid-template-columns: minmax(0, 1fr); }
  .rd-col { padding: 22px 0 0; border-left: 0; border-top: 1px solid var(--line); }
  .rd-col:first-child { padding-top: 0; border-top: 0; }
  .rd-bars { height: 104px; }
  .rd-big { font-size: 34px; }
}
@media (prefers-reduced-motion: reduce) {
  .rd-anim .rd-bar, .rd-anim .rd-bbar { animation: none; }
  .aa-tabs::before { transition: none; }
}