/* My Club: the Club app (my-club.html). Scoped under .dash-page.
   Four places: Home (today in both calendars, the week's strip, its lessons in any order), Learn (the reader and its player),
   Progress (the family log) and More (children, Shabbos, the calendar, reminders, your data).
   Like a family book, not a dashboard: cream paper, ink type, one sand accent, whitespace over boxes.
   One column, an 8-point spacing scale, one radius family; a tab bar docked at the bottom on phones,
   a quiet rail at the side on wide screens.
   Sections follow the screen: shell, controls, Home, Learn, Read, Progress, More, overlays. */

.dash-page {
  /* ── Color: one warm hue, one accent, four books. Defined in OKLCH so lightness and chroma are explicit.
     Every neutral sits on hue 75 (warm paper) at chroma ≤ .03: monochromatic, so nothing fights.
     The accent is that same hue at chroma .1: it reads as the paper's own gold, not a foreign color.
     The four books are a square tetrad rooted on the accent (75 / 165 / 255 / 345), all at L .55 C .08,
     so no book outweighs another. No other colors exist on this page; nothing raw below this block. */
  --kt-bg: oklch(.96 .014 75);        /* paper */
  --kt-card: oklch(.995 .005 75);     /* page on paper */
  --kt-well: oklch(.95 .016 75);      /* recessed: inputs, tracks */
  --kt-line: oklch(.915 .02 75);
  --kt-hair: color-mix(in srgb, var(--kt-line) 70%, transparent);
  --kt-ink: oklch(.23 .017 75);       /* 16:1 on card */
  --kt-ink-2: oklch(.31 .022 75);     /* ink, pressed */
  --kt-soft: oklch(.49 .03 75);       /* 6:1 on card; the only secondary text */
  --kt-sand-lt: oklch(.82 .085 75);   /* accent on ink */
  --kt-sand: oklch(.64 .1 75);        /* accent fill */
  --kt-sand-ink: oklch(.52 .095 75);  /* accent text and links, 5.5:1 on card */
  --kt-wash: oklch(.92 .035 75);      /* selected, done, now reading */
  --kt-on: oklch(1 0 0);              /* on ink or sand */
  --kt-on-soft: oklch(1 0 0 / .7);
  --kt-on-line: oklch(1 0 0 / .14);
  --kt-glass: oklch(.23 .017 75 / .94);
  --kt-glass-lt: oklch(.995 .005 75 / .88);
  --ring-c: oklch(.55 .08 75);        /* Chumash: the accent's own hue */
  --ring-n: oklch(.55 .08 165);       /* Nevi'im */
  --ring-t: oklch(.55 .08 255);       /* Tehillim */
  --ring-m: oklch(.55 .08 345);       /* Mishna */
  --kt-glow: oklch(.64 .1 75 / .3);
  --kt-shadow: 0 1px 2px oklch(.23 .017 75 / .04);
  --kt-lift: 0 1px 3px oklch(.23 .017 75 / .15);       /* a thumb or segment raised off its track */
  --kt-float: 0 10px 30px -10px oklch(.23 .017 75 / .35);   /* anything docked over the page */

  /* ── Geometry: a 4px grid. Every space, size and corner is one of these steps.
     Space: .125 .25 .5 .75 1 1.25 1.5 2 (rem). Nothing between steps.
     Corners, four shapes: --kt-r surfaces (cards, sheets, reader, timer); --kt-r-sm anything inside a surface
       (wells, inputs, day cells, menus); --kt-r-xs inline text marks; 999px pill for any labelled control;
       50% circle for icon-only controls and dots. An inner corner is never rounder than its frame.
     Controls, four heights: --kt-h-lg the one big action, --kt-h every button and input, --kt-h-sm chips,
       --kt-h-xs segments and anything inside a bar. Icons: --kt-i. Borders: 1px, --kt-line or --kt-hair.
     Type, six sizes on a ~1.17 ratio; two weights (600 label, 700 heading; 400 only for reading text);
       three line-heights; caps labels always .1em tracking. */
  --kt-r: 1.25rem;
  --kt-r-sm: .75rem;
  --kt-r-xs: .375rem;
  --kt-pad: 1.25rem;        /* inside every card, every row */
  --kt-gap: .75rem;         /* between controls */
  --kt-h-lg: 3.25rem;
  --kt-h: 2.75rem;
  --kt-h-sm: 2.25rem;
  --kt-h-xs: 2rem;
  --kt-i: 1.125rem;
  --kt-t-xs: .6875rem;      /* 11: captions, caps labels */
  --kt-t-sm: .8125rem;      /* 13: meta, secondary */
  --kt-t-md: .9375rem;      /* 15: body, controls */
  --kt-t-lg: 1.0625rem;     /* 17: titles, inputs */
  --kt-t-xl: 1.25rem;       /* 20: Hebrew lines, section heads */
  --kt-t-2xl: 1.625rem;     /* 26: figures */
  --kt-lh-tight: 1.25;
  --kt-lh: 1.4;
  --kt-lh-read: 1.6;
  --kt-ease: cubic-bezier(.22, .8, .3, 1);
  min-height: 100dvh;
  background: var(--kt-bg);
  color: var(--kt-ink);
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  overscroll-behavior-y: none;
  touch-action: pan-y pinch-zoom;
}
.dash-page *, .dash-page *::before, .dash-page *::after { box-sizing: border-box; }
.dash-page a { color: var(--kt-sand-ink); }
.dash-page p, .dash-page h1, .dash-page h2, .dash-page h3 { margin: 0; max-width: none; }
.dash-page button { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
/* Chrome behaves like an app, not a page: no text selection or long-press callout on controls, bars and labels. */
.dash-page :is(button, summary, label, .kt-bar, .kt-tabs, .kt-label, .kt-tiles, .dash-days, .kt-log__row--head, .au, .kt-timer) {
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
.dash-page img, .dash-page svg { -webkit-user-drag: none; }
.dash-page :is(button, select, summary, a, input[type="checkbox"]):focus-visible { outline: 2px solid var(--kt-sand-ink); outline-offset: 2px; }
.dash-page .kt-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- Shell: no site nav or footer; fills the screen, never scrolls sideways ---------- */
html:has(.dash-page) { scrollbar-gutter: stable; }
html:has(.dash-page), html:has(.dash-page) body, .app-bare .site-shell, .app-bare .site-main, .dash-page { overflow-x: clip; max-width: 100%; }
.app-bare .site-shell > .site-main { margin-left: 0; padding: 0 0 calc(1.5rem + env(safe-area-inset-bottom)); }

.dash-page .kt-app {
  --kt-dock: calc(4rem + env(safe-area-inset-bottom)); /* bottom tab bar height */
  --kt-over: 0rem;                                     /* height of whatever is docked above the tab bar */
  display: grid; gap: 1.5rem; width: 100%; max-width: 30rem; margin-inline: auto;
  padding: 0 1rem calc(var(--kt-dock) + var(--kt-over) + 1.5rem);
}
.dash-page .kt-app:is([data-view="t-learn"], :has(.au.is-playing)) { --kt-over: 5.5rem; }
.dash-page .kt-app:has(.kt-timer:not([hidden])) { --kt-over: 5rem; }
.dash-page .kt-app:is([data-view="t-learn"], :has(.au.is-playing)):has(.kt-timer:not([hidden])) { --kt-over: 10.75rem; }
.dash-page .kt-app > *, .dash-page .kt-panel > * { min-width: 0; }

/* App bar: a thin dark strip — the mark, and the child switcher every tab shares. */
.dash-page .kt-bar {
  position: sticky; z-index: 5; top: 0; display: flex; align-items: center; gap: .75rem;
  min-height: calc(env(safe-area-inset-top) + 3rem);
  margin-inline: -1rem; padding: env(safe-area-inset-top) 1rem 0;
  background: var(--kt-glass); -webkit-backdrop-filter: saturate(1.6) blur(16px); backdrop-filter: saturate(1.6) blur(16px);
}
.dash-page .kt-bar { flex-wrap: wrap; padding-bottom: 0; row-gap: 0; }
.dash-page .kt-bar__mark { flex: none; display: grid; height: 3rem; align-items: center; }
.dash-page .kt-bar .kt-kids { flex: 1; flex-wrap: nowrap; justify-content: flex-end; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.dash-page .kt-bar .kt-chip { flex: none; height: var(--kt-h-xs); padding: 0 .75rem; border-color: var(--kt-on-line); background: transparent; color: var(--kt-on); }
.dash-page .kt-bar .kt-chip[aria-pressed="true"] { border-color: var(--kt-sand-lt); background: var(--kt-sand-lt); color: var(--kt-ink); }
.dash-page .kt-bar .kt-chip__n { color: var(--kt-sand-lt); }
.dash-page .kt-bar .kt-chip[aria-pressed="true"] .kt-chip__n { color: var(--kt-sand-ink); }
/* The live count: a quiet pill at the top of Home. */
.dash-page .kt-bar__now {
  justify-self: center; max-width: 100%; padding: .3rem .8rem; border-radius: 999px; background: var(--kt-card); border: 1px solid var(--kt-hair);
  font-size: var(--kt-t-sm); font-weight: 600; line-height: var(--kt-lh); text-align: center; color: var(--kt-sand-ink);
}

/* More: who's online, as initials in circles; a crowd scrolls down, the bar stays short. */
.dash-page .kt-bar__beat { display: none; flex-basis: 100%; gap: .5rem; padding-bottom: .75rem; min-width: 0; }
.dash-page .kt-app[data-view="t-more"] .kt-bar__beat { display: grid; }
.dash-page .kt-bar__online { font-size: var(--kt-t-sm); font-weight: 700; color: var(--kt-on); }
.dash-page .kt-bar__online::before { content: ""; display: inline-block; width: .5rem; height: .5rem; margin-inline-end: .4rem; border-radius: 50%; background: oklch(.75 .15 150); vertical-align: .05em; }
.dash-page .kt-faces { display: flex; flex-wrap: wrap; gap: .375rem; max-height: calc(var(--kt-h-xs) * 2 + .375rem); overflow-y: auto; margin: 0; padding: 0; list-style: none; scrollbar-width: thin; }
.dash-page .kt-faces:empty { display: none; }
.dash-page .kt-face { flex: none; display: grid; place-items: center; width: var(--kt-h-xs); height: var(--kt-h-xs); border-radius: 50%; background: var(--kt-sand-lt); color: var(--kt-ink); font-size: var(--kt-t-xs); font-weight: 700; letter-spacing: .02em; }

/* Tab bar: docked to the bottom like a native app. */
.dash-page .kt-tabs {
  position: fixed; z-index: 5; left: 0; right: 0; bottom: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  height: var(--kt-dock); padding: 0 max(.5rem, calc((100% - 30rem) / 2)) env(safe-area-inset-bottom);
  border-top: 1px solid var(--kt-line);
  background: var(--kt-glass-lt); -webkit-backdrop-filter: saturate(1.6) blur(16px); backdrop-filter: saturate(1.6) blur(16px);
}
.dash-page .kt-tab {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .25rem; min-width: 0; padding: 0;
  border: 0; background: none; color: var(--kt-soft);
  font: inherit; font-size: var(--kt-t-xs); font-weight: 600; letter-spacing: .01em; white-space: nowrap; cursor: pointer;
  transition: color 180ms var(--kt-ease); user-select: none; -webkit-user-select: none;
}
.dash-page .kt-tab span { overflow: hidden; text-overflow: ellipsis; }
.dash-page .kt-tab svg {
  flex: none; width: 1.5rem; height: 1.5rem; padding: .125rem; box-sizing: content-box; border-radius: 999px;
  fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
  transition: background 180ms var(--kt-ease), padding 180ms var(--kt-ease);
}
.dash-page .kt-tab:hover, .dash-page .kt-tab[aria-selected="true"] { color: var(--kt-ink); }
.dash-page .kt-tab:active svg { transform: scale(.88); }
.dash-page .kt-tab svg { transition: background 180ms var(--kt-ease), padding 180ms var(--kt-ease), transform 120ms; }
.dash-page .kt-tab[aria-selected="true"] svg { padding: .125rem 1rem; background: var(--kt-wash); color: var(--kt-sand-ink); }
.dash-page .kt-tab:focus-visible { outline: 0; }
.dash-page .kt-tab:focus-visible svg { outline: 2px solid var(--kt-sand-ink); outline-offset: 1px; }

/* Wide screens: the tabs become a quiet rail at the left, the page a calm column beside it. */
@media (min-width: 60rem) {
  .dash-page .kt-app { --kt-dock: 0rem; width: auto; max-width: 36rem; padding-left: 7rem; box-sizing: content-box; }
  .dash-page .kt-app[data-view="t-learn"] { max-width: 42rem; }
  .dash-page .kt-tabs {
    top: 0; right: auto; bottom: 0; width: 6rem; height: auto; padding: 1.5rem 0;
    grid-template-columns: 1fr; grid-auto-rows: 4.5rem; align-content: start;
    border-top: 0; border-right: 1px solid var(--kt-line);
  }
  .dash-page .kt-tab { font-size: var(--kt-t-sm); }
  .dash-page :is(.kt-timer, .au, .rd-pop) { left: calc(50% + 3rem); }
}

/* ---------- Panels, cards, type ---------- */
.dash-page .kt-panels { display: grid; }
.dash-page .kt-panel { display: grid; align-content: start; gap: 1.5rem; animation: kt-in 240ms var(--kt-ease); }
@keyframes kt-fade { from { opacity: 0; } }
@keyframes kt-in { from { opacity: 0; transform: translateY(.375rem); } }
.dash-page .kt-card { display: grid; gap: var(--kt-gap); padding: var(--kt-pad); border-radius: var(--kt-r); background: var(--kt-card); border: 1px solid var(--kt-hair); box-shadow: var(--kt-shadow); }
.dash-page .kt-title { font-size: var(--kt-t-lg); font-weight: 700; line-height: var(--kt-lh); }
/* A group in More: a quiet label, then its card. */
.dash-page .kt-group { display: grid; gap: .5rem; }
.dash-page .kt-group > .kt-label { padding: 0 var(--kt-pad); }
.dash-page .kt-panel > .kt-group + .kt-group { margin-top: .25rem; }
/* Rows inset-ruled, as in a settings list. */
.dash-page .kt-list__item + .kt-list__item { border-top: 0; box-shadow: inset 0 1px 0 var(--kt-hair); }
.dash-page .kt-list .kt-fold > summary { min-height: 2.75rem; }
/* Rows inside one card, ruled apart instead of boxed apart. */
.dash-page .kt-list { padding: 0; gap: 0; }
.dash-page .kt-list__item { display: grid; gap: var(--kt-gap); padding: var(--kt-pad); }
.dash-page .kt-list__item + .kt-list__item { border-top: 1px solid var(--kt-hair); }
.dash-page .kt-list__item[hidden] + .kt-list__item { border-top: 0; }
.dash-page .kt-card__top { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; }
.dash-page .kt-label { font-family: inherit; font-size: var(--kt-t-xs); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--kt-soft); }
.dash-page .kt-count { font-size: var(--kt-t-sm); font-weight: 600; color: var(--kt-sand-ink); font-variant-numeric: tabular-nums; }
.dash-page .kt-text { font-size: var(--kt-t-md); line-height: var(--kt-lh-read); color: var(--kt-soft); }
.dash-page .kt-hint { padding: .75rem var(--kt-pad) .5rem; font-size: var(--kt-t-sm); line-height: var(--kt-lh); color: var(--kt-soft); }
.dash-page .kt-note { text-align: center; font-size: var(--kt-t-sm); font-weight: 600; line-height: var(--kt-lh); color: var(--kt-sand-ink); }
.dash-page .kt-fine { padding: 0 var(--kt-pad); text-align: center; font-size: var(--kt-t-sm); line-height: var(--kt-lh-read); color: var(--kt-soft); }
.dash-page .kt-out { padding: .75rem .75rem; border-radius: var(--kt-r-sm); background: var(--kt-well); font-size: var(--kt-t-md); line-height: var(--kt-lh-read); }
.dash-page :is(.kt-note, .kt-out, .kt-count, .kt-text):empty { display: none; }

/* ---------- Controls ---------- */
.dash-page .kt-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; width: 100%;
  height: var(--kt-h); padding: 0 1.25rem; border: 1px solid var(--kt-ink); border-radius: 999px;
  background: var(--kt-ink); color: var(--kt-on); font: inherit; font-size: var(--kt-t-md); font-weight: 600; white-space: nowrap;
  text-decoration: none; cursor: pointer; transition: background 150ms, border-color 150ms; user-select: none; -webkit-user-select: none;
}
.dash-page .kt-btn:hover { background: var(--kt-ink-2); }
.dash-page .kt-btn--lg { gap: .75rem; height: var(--kt-h-lg); font-size: var(--kt-t-lg); }
.dash-page .kt-btn--sm { width: auto; height: var(--kt-h-sm); padding: 0 1rem; font-size: var(--kt-t-md); }
.dash-page .kt-glyph { flex: none; width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.dash-page .kt-btn--soft { border-color: var(--kt-line); background: var(--kt-card); color: var(--kt-ink); }
.dash-page .kt-btn--soft:hover { background: var(--kt-well); }
.dash-page :is(.kt-btn, .kt-icon-btn, .dash-read, .dash-song, .kt-log__cell, .kt-chip, .au__play, .kt-timer__btn, .kt-timer__done):active { transform: scale(.96); filter: brightness(.94); }
.dash-page :is(.kt-btn, .kt-icon-btn, .dash-read, .dash-song, .kt-log__cell, .kt-chip, .au__play, .kt-timer__btn, .kt-timer__done) { transition-property: background, border-color, color, transform; transition-duration: 150ms; }
/* Tappable rows highlight while pressed, like a list cell. */
.dash-page :is(.kt-more summary, .kt-fold summary, .dash-lesson__name):active { background: var(--kt-well); }
.dash-page .kt-file:focus-within { outline: 2px solid var(--kt-sand-ink); outline-offset: 2px; }
.dash-page .kt-link--quiet { color: var(--kt-soft); font-weight: 600; }
.dash-page .kt-link { justify-self: start; min-height: 1.5rem; padding: 0; border: 0; background: none; color: var(--kt-sand-ink); font: inherit; font-size: var(--kt-t-md); font-weight: 600; cursor: pointer; text-decoration: underline; text-underline-offset: .2em; }

/* Small outlined pills: Read on a lesson; Song and Start in a note. */
.dash-page :is(.dash-read, .dash-song) {
  display: inline-flex; align-items: center; justify-content: center; height: var(--kt-h-sm); padding: 0 .75rem;
  border: 1px solid var(--kt-line); border-radius: 999px; background: var(--kt-card); color: var(--kt-ink);
  font: inherit; font-size: var(--kt-t-sm); font-weight: 600; text-decoration: none; cursor: pointer; transition: background 150ms;
}
.dash-page .dash-read:hover { background: var(--kt-well); }
.dash-page .dash-song { border-color: var(--kt-sand); background: var(--kt-sand); color: var(--kt-on); }
.dash-page .dash-song:hover { background: var(--kt-sand-ink); }

/* Button rows: equal halves; --split puts a switch left, the button right. */
.dash-page .kt-actions { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: .5rem; }
.dash-page .kt-actions--split { grid-auto-columns: auto; grid-template-columns: minmax(0, 1fr); align-items: center; }
.dash-page .kt-actions--split .kt-btn { width: auto; min-width: 8rem; }
/* An input with its button beside it. */
.dash-page .kt-inline { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .5rem; }
.dash-page .kt-inline--three { grid-template-columns: 4.5rem minmax(0, 1fr) auto; }
.dash-page .kt-inline .kt-btn { width: auto; min-width: 5rem; }

.dash-page .kt-icon-btn {
  display: grid; place-items: center; width: var(--kt-h); height: var(--kt-h); padding: 0;
  border: 1px solid var(--kt-line); border-radius: 50%; background: var(--kt-card); color: var(--kt-ink); cursor: pointer; transition: background 150ms;
}
.dash-page .kt-icon-btn:hover { background: var(--kt-well); }
.dash-page .kt-icon-btn svg { width: var(--kt-i); height: var(--kt-i); fill: none; stroke: currentColor; stroke-width: 2.25; stroke-linecap: round; stroke-linejoin: round; }

.dash-page .kt-form { display: grid; gap: var(--kt-gap); }
.dash-page .kt-row { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr) 5.5rem; gap: .5rem; }
.dash-page .kt-field { display: grid; gap: .5rem; min-width: 0; font-size: var(--kt-t-sm); font-weight: 600; color: var(--kt-soft); }
.dash-page .kt-input {
  width: 100%; height: var(--kt-h); padding: 0 .75rem; font: inherit; font-size: var(--kt-t-lg); /* 16px: no zoom on iPhone */
  border: 1px solid var(--kt-line); border-radius: var(--kt-r-sm); background: var(--kt-card); color: var(--kt-ink);
  transition: border-color 150ms, box-shadow 150ms;
}
.dash-page .kt-input:focus { outline: 0; border-color: var(--kt-sand); box-shadow: 0 0 0 4px var(--kt-glow); }
.dash-page .kt-input--initials { text-align: center; text-transform: uppercase; letter-spacing: .1em; }
.dash-page .kt-switch { display: flex; align-items: center; gap: .75rem; min-height: var(--kt-h); font-size: var(--kt-t-md); line-height: var(--kt-lh); color: var(--kt-ink); cursor: pointer; }
.dash-page .kt-switch { justify-content: space-between; }
/* A real on/off switch, trailing its label, like a settings row. */
.dash-page .kt-switch input {
  order: 2; flex: none; position: relative; width: 3.125rem; height: var(--kt-h-xs); margin: 0; border-radius: 999px;
  -webkit-appearance: none; appearance: none; background: var(--kt-line); cursor: pointer; transition: background 200ms var(--kt-ease);
}
.dash-page .kt-switch input::before {
  content: ""; position: absolute; top: .125rem; left: .125rem; width: 1.625rem; height: 1.625rem; border-radius: 50%;
  background: var(--kt-on); box-shadow: var(--kt-lift); transition: transform 200ms var(--kt-ease);
}
.dash-page .kt-switch input:checked { background: var(--kt-sand-ink); }
.dash-page .kt-switch input:checked::before { transform: translateX(1.25rem); }
.dash-page .kt-file { overflow: hidden; }
.dash-page .kt-file input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }

/* A segmented switch: Hebrew / Both / English in the reader, the converter's two directions. */
.dash-page .rd-seg, .dash-page .rd-size { display: flex; padding: .1875rem; border-radius: 999px; background: var(--kt-well); }
.dash-page .rd-seg button, .dash-page .rd-size button {
  flex: 1; min-width: 2.75rem; height: var(--kt-h-sm); padding: 0 .75rem; border: 0; border-radius: 999px; background: none; color: var(--kt-soft);
  font: inherit; font-size: var(--kt-t-sm); font-weight: 600; white-space: nowrap; cursor: pointer; transition: background 150ms, color 150ms;
}
.dash-page .rd-seg button[aria-checked="true"] { background: var(--kt-card); color: var(--kt-ink); box-shadow: var(--kt-lift); }

/* Folded sections: a row with a chevron. */
.dash-page .kt-more summary { display: flex; align-items: center; gap: .5rem; cursor: pointer; list-style: none; }
.dash-page .kt-more summary::-webkit-details-marker { display: none; }
.dash-page .kt-more summary > span:first-child { flex: 1; }
.dash-page .kt-more summary::after { content: ""; width: .45rem; height: .45rem; margin: 0 .25rem; border: solid var(--kt-soft); border-width: 0 2px 2px 0; transform: rotate(45deg); transition: transform 150ms var(--kt-ease); }
.dash-page .kt-more[open] summary::after { transform: rotate(-135deg); }

/* ---------- Children, one chip each (Home and Progress) ---------- */
.dash-page .kt-kids { display: flex; flex-wrap: wrap; gap: .5rem; }
.dash-page .kt-kids[hidden] { display: none; }
.dash-page .kt-chip {
  display: inline-flex; align-items: center; gap: .5rem; height: var(--kt-h-sm); padding: 0 1rem; border: 1px solid var(--kt-line); border-radius: 999px;
  background: var(--kt-card); color: var(--kt-ink); font: inherit; font-size: var(--kt-t-md); font-weight: 600; cursor: pointer; transition: background 150ms;
}
.dash-page .kt-chip[aria-pressed="true"] { border-color: var(--kt-ink); background: var(--kt-ink); color: var(--kt-on); }
.dash-page .kt-chip__n { font-size: var(--kt-t-sm); font-weight: 600; color: var(--kt-sand-ink); font-variant-numeric: tabular-nums; }
.dash-page .kt-chip[aria-pressed="true"] .kt-chip__n { color: var(--kt-sand-lt); }
.dash-page .kt-chip__cake { font-size: var(--kt-t-md); line-height: 1; }
.dash-page .kt-chip--add { width: var(--kt-h-sm); justify-content: center; padding: 0; border-style: dashed; background: none; color: var(--kt-sand-ink); font-size: var(--kt-t-xl); }

/* ---------- Home: today rides in the header; one card holds the week and its lessons ---------- */
.dash-page .kt-bar__today { display: none; flex-basis: 100%; gap: .125rem; padding-bottom: .75rem; min-width: 0; }
.dash-page .kt-app[data-view="t-home"] .kt-bar__today { display: grid; }
.dash-page .kt-bar__date { font-size: var(--kt-t-md); font-weight: 700; color: var(--kt-on); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-page .kt-bar__he { margin-inline-start: .5rem; font-weight: 400; color: var(--kt-sand-lt); }
.dash-page .kt-bar__club { font-size: var(--kt-t-sm); font-weight: 600; color: var(--kt-on-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-page .kt-bar__club:empty { display: none; }
.dash-page .kt-week .kt-today { justify-self: center; margin-top: -.5rem; }
.dash-page .kt-week .kt-card__top { padding-top: 1rem; border-top: 1px solid var(--kt-hair); }

.dash-page .kt-sum { padding: 1rem .25rem 0; border-top: 1px solid var(--kt-line); font-size: var(--kt-t-md); line-height: var(--kt-lh-read); color: var(--kt-soft); }
.dash-page .kt-sum .kt-link { margin-inline-start: .25rem; }

/* ---------- Home: the week's head, day strip, lessons ---------- */
.dash-page .kt-week { gap: 1rem; scroll-margin-top: 1rem; }
.dash-page .kt-week__head { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr) 2.5rem; align-items: center; gap: .5rem; text-align: center; }
.dash-page .kt-week__title h2 { font-family: var(--font-display); font-size: var(--kt-t-lg); font-weight: 700; line-height: var(--kt-lh-tight); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-page .kt-week__title p { min-height: 1.3em; margin-top: .125rem; font-size: var(--kt-t-sm); line-height: var(--kt-lh); color: var(--kt-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.dash-page .dash-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .25rem; margin: 0; padding: .25rem; list-style: none; border-radius: var(--kt-r-sm); background: var(--kt-well); }
.dash-page .dash-day { display: grid; justify-items: center; align-content: start; gap: .25rem; padding: .5rem 0 .5rem; border-radius: var(--kt-r-sm); text-align: center; line-height: var(--kt-lh-tight); }
.dash-page .dash-day__name { font-size: var(--kt-t-xs); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--kt-soft); }
.dash-page .dash-day__num { font-size: var(--kt-t-lg); font-weight: 700; font-variant-numeric: tabular-nums; }
.dash-page .dash-day__he { min-height: 1.15em; font-size: var(--kt-t-xs); color: var(--kt-soft); white-space: nowrap; }
.dash-page .dash-day__ev { width: .3125rem; height: .3125rem; border-radius: 50%; background: var(--kt-sand); font-size: 0; }
.dash-page .dash-day__ev:empty { visibility: hidden; }
.dash-page .dash-day.is-today { background: var(--kt-ink); color: var(--kt-on); }
.dash-page .dash-day.is-today .dash-day__name { color: var(--kt-sand-lt); }
.dash-page .dash-day.is-today .dash-day__he { color: var(--kt-on-soft); }

/* Lessons: tick, name (opens the note), Read. They sit full-bleed at the foot of their card. */
.dash-page .dash-plan { margin: 0; padding: 0; list-style: none; }
.dash-page .kt-week .dash-plan { margin: 0 calc(-1 * var(--kt-pad)) calc(-1 * var(--kt-pad)); }
.dash-page .dash-lesson, .dash-page .dash-plan__off { border-top: 1px solid var(--kt-hair); }
.dash-page .dash-plan__off { padding: .75rem var(--kt-pad); text-align: center; font-style: italic; color: var(--kt-soft); }
.dash-page .dash-lesson__row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .75rem; min-height: 3.75rem; padding: .5rem var(--kt-pad); }
.dash-page .dash-check { width: 1.375rem; height: 1.375rem; margin: 0; accent-color: var(--kt-sand-ink); cursor: pointer; }
.dash-page .dash-lesson__name { display: grid; gap: .125rem; min-width: 0; padding: .25rem 0; border: 0; border-radius: var(--kt-r-xs); background: none; color: inherit; font: inherit; text-align: start; cursor: pointer; }
.dash-page .dash-lesson__book { font-size: var(--kt-t-sm); color: var(--kt-soft); }
.dash-page .dash-lesson__title { font-weight: 600; line-height: var(--kt-lh); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-page .is-done .dash-lesson__title { color: var(--kt-soft); text-decoration: line-through; text-decoration-color: var(--kt-sand); }
/* A lesson just done: a warm wash that fades, like ink settling. */
.dash-page .dash-lesson.is-just { animation: kt-settle 1.4s var(--kt-ease); }
@keyframes kt-settle { 0% { background: var(--kt-wash); } 100% { background: transparent; } }

/* The note: what to know before you sit. */
.dash-page .dash-note { display: grid; gap: .5rem; margin: 0 var(--kt-pad) .75rem; padding: .75rem; border-radius: var(--kt-r-sm); background: var(--kt-well); font-size: var(--kt-t-md); line-height: var(--kt-lh-read); }
.dash-page .dash-note__he { font-size: var(--kt-t-xl); line-height: var(--kt-lh-read); }
.dash-page .dash-note__en { font-style: italic; }
.dash-page .dash-note__ans { font-size: var(--kt-t-md); color: var(--kt-soft); }
.dash-page .dash-note__reveal { justify-self: start; padding: 0; border: 0; background: none; color: var(--kt-sand-ink); font: inherit; font-size: var(--kt-t-md); font-weight: 600; cursor: pointer; text-decoration: underline; text-underline-offset: .2em; }
.dash-page .dash-note__acts { display: flex; flex-wrap: wrap; gap: .5rem; padding-top: .25rem; }
/* Home's preview pane: a fixed size, so loading a note never moves the page. */
.dash-page .dash-preview { height: 17rem; overflow-y: auto; overscroll-behavior: contain; border-top: 1px solid var(--kt-hair); padding-top: .75rem; }
.dash-page .dash-preview .dash-note { margin-bottom: .75rem; }
.dash-page .dash-preview__head { display: grid; gap: .125rem; padding: 0 var(--kt-pad) .75rem; }
.dash-page .dash-preview__title { font-size: var(--kt-t-lg); font-weight: 700; line-height: var(--kt-lh); }
.dash-page .dash-preview__empty { display: grid; place-items: center; height: 100%; margin: 0; padding: 0 var(--kt-pad); color: var(--kt-soft); font-size: var(--kt-t-md); text-align: center; }
.dash-page .dash-lesson.is-shown { background: var(--kt-well); }
.dash-page .dash-say { display: inline-grid; place-items: center; width: var(--kt-h-xs); height: var(--kt-h-xs); margin-inline-start: .5rem; padding: 0; border: 1px solid var(--kt-line); border-radius: 999px; background: var(--kt-card); color: var(--kt-ink); vertical-align: middle; cursor: pointer; }

/* From earlier weeks: folded away until wanted. */
.dash-page .kt-more { padding: 0; gap: 0; }
.dash-page .kt-more summary { min-height: var(--kt-h-lg); padding: 0 var(--kt-pad); border-radius: var(--kt-r); font-size: var(--kt-t-md); font-weight: 600; }

/* ---------- More: Shabbos, the week's two times ---------- */
.dash-page .kt-shab__times { display: grid; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.dash-page .kt-shab__times li { display: flex; justify-content: space-between; align-items: baseline; gap: .75rem; padding: .75rem .75rem; border-radius: var(--kt-r-sm); background: var(--kt-well); font-size: var(--kt-t-md); }
.dash-page .kt-shab__times strong { font-size: var(--kt-t-xl); font-variant-numeric: tabular-nums; }
.dash-page .kt-shab__times .is-in strong { color: var(--kt-sand-ink); }
.dash-page .kt-shab__times .kt-shab__parsha { justify-content: center; padding: 0; background: none; font-size: var(--kt-t-sm); font-weight: 600; color: var(--kt-soft); }

/* The one-time reminder offer: a quiet line at the foot of Home, gone once answered. */
.dash-page .kt-ask { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; padding: .25rem; }
.dash-page .kt-ask__text { flex: 1 1 12rem; font-size: var(--kt-t-md); line-height: var(--kt-lh); color: var(--kt-soft); }
.dash-page .kt-ask__acts { display: flex; align-items: center; gap: 1rem; }

/* ---------- Progress: four numbers, then the log ----------
   One row per week, newest first; one box per book in the same order as Learn. A filled box carries the day it was learned.
   Empty is a quiet well, never a warning colour. This week is marked in sand. */
.dash-page .kt-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem; margin: 0; }
.dash-page .kt-tiles p { display: grid; justify-items: center; gap: .125rem; padding: .75rem .25rem; border-radius: var(--kt-r-sm); background: var(--kt-card); border: 1px solid var(--kt-hair); text-align: center; }
.dash-page .kt-tiles strong { font-family: var(--font-display); font-size: var(--kt-t-2xl); line-height: var(--kt-lh-tight); font-variant-numeric: lining-nums tabular-nums; }
.dash-page .kt-tiles span { font-size: var(--kt-t-xs); font-weight: 600; color: var(--kt-soft); white-space: nowrap; }

.dash-page .kt-log { gap: 1rem; }
.dash-page .kt-log__table { display: grid; margin: 0 calc(-1 * var(--kt-pad)) calc(-1 * var(--kt-pad)); }
.dash-page .kt-log__row { display: grid; grid-template-columns: minmax(0, 1fr) repeat(4, 3.75rem); align-items: center; gap: .5rem; padding: .5rem var(--kt-pad); border-top: 1px solid var(--kt-hair); }
.dash-page .kt-log__row--head { padding-block: .5rem; border-top: 0; font-size: var(--kt-t-xs); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; text-align: center; color: var(--kt-soft); }
.dash-page .kt-log__row--head span:first-child { text-align: start; }
.dash-page .kt-log__row.is-now { background: color-mix(in srgb, var(--kt-wash) 45%, transparent); }
.dash-page .kt-log__wk { display: grid; gap: .125rem; min-width: 0; line-height: var(--kt-lh-tight); }
.dash-page .kt-log__wk strong { font-size: var(--kt-t-md); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-page .kt-log__wk span { font-size: var(--kt-t-sm); color: var(--kt-soft); }
.dash-page .kt-log__cell {
  display: grid; place-items: center; align-content: center; gap: 0; height: var(--kt-h); min-width: 0; padding: 0 .25rem;
  border: 1px solid transparent; border-radius: var(--kt-r-sm); background: var(--kt-well); color: var(--kt-soft);
  font: inherit; cursor: pointer; transition: background 200ms var(--kt-ease), color 200ms var(--kt-ease);
}
.dash-page .kt-log__cell:hover { border-color: var(--kt-line); }
.dash-page .kt-log__cell.is-none { background: none; cursor: default; }
.dash-page .kt-log__tick { font-size: var(--kt-t-md); font-weight: 700; line-height: 1; }
.dash-page .kt-log__tick:empty { display: none; }
.dash-page .kt-log__date { max-width: 100%; font-size: var(--kt-t-xs); font-weight: 600; line-height: var(--kt-lh); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-page .kt-log__cell[aria-pressed="false"] .kt-log__date { opacity: .7; }
.dash-page .kt-log__cell[aria-pressed="true"] { background: var(--kt-sand-ink); color: var(--kt-on); }
.dash-page .kt-log__empty { padding: 1rem var(--kt-pad); border-top: 1px solid var(--kt-hair); }

/* Milestones: a dated list, like the inscriptions in the front of a family book. */
.dash-page .kt-record__next { padding: 0 .25rem; font-size: var(--kt-t-sm); line-height: var(--kt-lh); color: var(--kt-soft); }
.dash-page .kt-record__next:empty { display: none; }
.dash-page .kt-record__list { display: grid; gap: .5rem; margin: 0; padding: .25rem var(--kt-pad) var(--kt-pad); list-style: none; }
.dash-page .kt-record__list li { display: grid; grid-template-columns: 3.25rem minmax(0, 1fr); align-items: baseline; gap: .5rem; font-family: var(--font-display); font-size: var(--kt-t-md); line-height: var(--kt-lh); }
.dash-page .kt-record__date { font-family: var(--font-body, inherit); font-size: var(--kt-t-sm); font-weight: 600; color: var(--kt-sand-ink); font-variant-numeric: tabular-nums; }

/* ---------- Read: a page of a book. Paper, a serif, wide margins, the Hebrew set large ---------- */
@font-face {
  font-family: "Frank Ruhl Libre";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../../fonts/frank-ruhl-libre-hebrew.woff2") format("woff2");
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
.dash-page [lang="he"] { font-family: "Frank Ruhl Libre", "Taamey Frank CLM", "SBL Hebrew", "David", serif; }

/* Learn: books, lesson and chapter ride in the header; language and size fold behind the dots. */
.dash-page .kt-bar__learn { display: none; flex-basis: 100%; gap: .5rem; padding-bottom: .75rem; }
.dash-page .kt-app[data-view="t-learn"] .kt-bar__learn { display: grid; }
/* No children to switch between: the mark shares the books' row instead of taking one of its own. */
.dash-page .kt-app:is([data-view="t-learn"], [data-view="t-home"]) .kt-bar:has(> .kt-kids[hidden]) { align-items: flex-start; }
.dash-page .kt-app:is([data-view="t-learn"], [data-view="t-home"]) .kt-bar:has(> .kt-kids[hidden]) .kt-bar__mark { height: 2.125rem; margin-top: .75rem; }
.dash-page .kt-app:is([data-view="t-learn"], [data-view="t-home"]) .kt-bar:has(> .kt-kids[hidden]) :is(.kt-bar__learn, .kt-bar__today) { flex: 1 1 0; min-width: 0; padding-top: .75rem; }
.dash-page .kt-bar .rd-books { padding: .125rem; background: var(--kt-on-line); }
.dash-page .kt-bar .rd-books button { flex: 1; min-width: 0; height: var(--kt-h-xs); padding: 0 .25rem; color: var(--kt-on-soft); }
.dash-page .kt-bar .rd-books button[aria-checked="true"] { background: var(--kt-sand-lt); color: var(--kt-ink); box-shadow: none; }
.dash-page .rd-nav { display: flex; gap: .5rem; min-width: 0; }
.dash-page .rd-select {
  flex: 1; min-width: 0; height: var(--kt-h-sm); padding: 0 2rem 0 .75rem; border: 1px solid var(--kt-on-line); border-radius: 999px;
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e2bd84' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right .75rem center / .75rem;
  color: var(--kt-on); font: inherit; font-size: var(--kt-t-md); font-weight: 600; text-overflow: ellipsis; cursor: pointer;
  -webkit-appearance: none; appearance: none;
}
.dash-page .rd-select option { color: var(--kt-ink); background: var(--kt-card); }
.dash-page #rd-pick { flex: 0 1 auto; max-width: 9rem; }
.dash-page .rd-more { position: relative; flex: none; }
.dash-page .rd-more summary { display: grid; place-items: center; width: var(--kt-h-sm); height: var(--kt-h-sm); border-radius: 50%; list-style: none; cursor: pointer; color: var(--kt-on); }
.dash-page .rd-more summary::-webkit-details-marker { display: none; }
.dash-page .rd-more[open] summary { background: var(--kt-on-line); }
.dash-page .rd-more svg { width: var(--kt-i); height: var(--kt-i); fill: currentColor; }
.dash-page .rd-tools { position: absolute; z-index: 6; top: calc(100% + .5rem); right: 0; display: flex; align-items: center; gap: .5rem; padding: .5rem; border-radius: 999px; background: var(--kt-card); box-shadow: var(--kt-float); }
.dash-page .rd-tools .rd-seg button { flex: none; }
.dash-page .rd-seg button[lang="he"] { font-size: var(--kt-t-lg); }
.dash-page #rd-smaller { font-size: var(--kt-t-sm); }
.dash-page #rd-bigger { font-size: var(--kt-t-lg); }
.dash-page .rd-size button:disabled { opacity: .35; cursor: default; }

.dash-page .rd-book {
  --rd-step: 0;
  --rd-en: calc(1.0625rem + var(--rd-step) * .125rem);
  --rd-he: calc(1.5rem + var(--rd-step) * .1875rem);
  display: grid; gap: 1.25rem; padding: 1.5rem 1.25rem 1.25rem; border-radius: var(--kt-r);
  background: var(--kt-card); box-shadow: var(--kt-shadow);
}
.dash-page .rd-head { display: grid; gap: .25rem; padding-bottom: 1rem; border-bottom: 1px solid var(--kt-line); text-align: center; }
.dash-page .rd-head__book { min-height: 1em; font-size: var(--kt-t-xs); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--kt-sand-ink); }
.dash-page .rd-head__title { font-family: var(--font-display); font-size: var(--kt-t-2xl); line-height: var(--kt-lh-tight); }
.dash-page .rd-head__he { min-height: 1.5em; font-size: var(--kt-t-xl); color: var(--kt-soft); }
.dash-page :is(.dash-say, .rd-pop__say) svg { width: var(--kt-i); height: var(--kt-i); fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.dash-page :is(.dash-say, .rd-pop__say) svg path:first-child { fill: currentColor; }

/* A mishna's introduction: folded until asked for. */
.dash-page .rd-intro { border-radius: var(--kt-r-sm); background: var(--kt-well); }
.dash-page .rd-intro summary {
  display: flex; align-items: center; justify-content: space-between; padding: .75rem 1rem; border-radius: var(--kt-r-sm); cursor: pointer; list-style: none;
  font-size: var(--kt-t-sm); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--kt-sand-ink);
}
.dash-page .rd-intro summary::-webkit-details-marker { display: none; }
.dash-page .rd-intro summary::after { content: "+"; font-size: var(--kt-t-xl); font-weight: 400; letter-spacing: 0; }
.dash-page .rd-intro[open] summary::after { content: "−"; }
.dash-page .rd-intro p { padding: 0 1rem 1rem; }
.dash-page :is(.rd-intro p, .rd-v__en) { font-family: "Iowan Old Style", "Charter", "Palatino Linotype", Georgia, serif; font-size: var(--rd-en); line-height: var(--kt-lh-read); color: var(--kt-ink-2); }

/* The text: one verse per block, the number in the margin. */
.dash-page .rd-text { display: grid; gap: 1.25rem; }
.dash-page .rd-text.is-prose .rd-v { padding-left: .5rem; }
.dash-page .rd-ch { margin-top: .5rem; font-size: var(--kt-t-xs); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; text-align: center; color: var(--kt-soft); }
.dash-page .rd-v {
  position: relative; display: grid; gap: .5rem; padding: .25rem .5rem .25rem 1.5rem; margin-inline: -.5rem;
  border-radius: var(--kt-r-sm); scroll-margin-block: 6rem; transition: background 600ms var(--kt-ease);
}
.dash-page .rd-v__n { position: absolute; left: .375rem; top: .45rem; font-size: var(--kt-t-xs); font-weight: 700; font-variant-numeric: tabular-nums; color: var(--kt-sand); }
.dash-page .rd-v__he { font-size: var(--rd-he); line-height: var(--kt-lh-read); text-align: right; }
.dash-page .rd-v__en { hyphens: auto; }
.dash-page .rd-v.is-at, .dash-page .rd-v.is-saying { background: var(--kt-wash); }
.dash-page .rd-book[data-lang="he"] .rd-v__en, .dash-page .rd-book[data-lang="en"] .rd-v__he { display: none; }
.dash-page .rd-book[data-lang="he"] .rd-v__he { font-size: calc(var(--rd-he) * 1.08); }
.dash-page .rd-msg { text-align: center; color: var(--kt-soft); }
.dash-page .rd-text > .kt-btn { justify-self: center; width: auto; }
.dash-page .rd-skel { height: 1.1rem; border-radius: var(--kt-r-xs); background: linear-gradient(90deg, var(--kt-well), var(--kt-card), var(--kt-well)); background-size: 200% 100%; animation: rd-shine 1.2s linear infinite; }
.dash-page .rd-skel:nth-child(3n) { width: 70%; }
@keyframes rd-shine { to { background-position: -200% 0; } }

/* Each Hebrew word a quiet tap target. */
.dash-page .rd-w { border-radius: var(--kt-r-xs); cursor: pointer; transition: background 150ms; -webkit-tap-highlight-color: transparent; }
.dash-page .rd-w:hover { background: var(--kt-well); }
.dash-page .rd-w.is-on { background: var(--kt-wash); color: var(--kt-sand-ink); }
.dash-page .rd-w.is-said { background: var(--kt-ink); color: var(--kt-on); }

.dash-page .rd-foot { display: grid; grid-template-columns: 2.5rem 1fr 2.5rem; align-items: center; gap: .75rem; padding-top: 1rem; border-top: 1px solid var(--kt-line); }
.dash-page .rd-foot .kt-btn { grid-column: 2; }
.dash-page #rd-prev { grid-column: 1; }
.dash-page #rd-next { grid-column: 3; }

/* ---------- More: one block per child ---------- */
.dash-page .kt-fam { display: grid; gap: 1rem; margin: 0; padding: 0; list-style: none; }
.dash-page .kt-fam:empty { display: none; }
.dash-page .kt-fam__kid { display: grid; gap: .75rem; padding-bottom: 1rem; border-bottom: 1px solid var(--kt-line); scroll-margin-block: 5rem; }
.dash-page .kt-fam__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; gap: .5rem; }
.dash-page .kt-fam__out { white-space: pre-line; }
.dash-page .kt-fam__del { font-size: var(--kt-t-sm); color: var(--kt-soft); }

/* ---------- More: a section folded behind its own row ---------- */
.dash-page .kt-fold { display: grid; gap: var(--kt-gap); }
.dash-page .kt-fold summary { display: flex; align-items: center; min-height: var(--kt-h); font-weight: 600; cursor: pointer; list-style: none; }
.dash-page .kt-list__item.kt-fold summary { min-height: 1.5rem; font-size: var(--kt-t-lg); font-weight: 700; }
.dash-page .kt-fold summary::-webkit-details-marker { display: none; }
.dash-page .kt-fold summary::after { content: ""; width: .45rem; height: .45rem; margin: 0 .25rem 0 auto; border: solid var(--kt-soft); border-width: 0 2px 2px 0; transform: rotate(45deg); transition: transform 150ms var(--kt-ease); }
.dash-page .kt-fold[open] > summary::after { transform: rotate(-135deg); }
.dash-page .kt-shab .kt-fold summary { min-height: 1.5rem; font-size: var(--kt-t-md); color: var(--kt-sand-ink); }
.dash-page .kt-keep[data-on="1"] { background: var(--kt-ok-wash); color: var(--kt-ok); }

/* ---------- Overlays: anything docked over the page sits just above the tab bar ---------- */
.dash-page :is(.kt-timer, .au, .rd-pop) {
  position: fixed; left: 50%; bottom: calc(var(--kt-dock) + .625rem); width: min(28rem, calc(100% - 2rem));
  transform: translateX(-50%); box-shadow: var(--kt-float);
}

/* Timer: the lesson bar. The Learn player stacks above it. */
.dash-page .kt-timer { z-index: 4; overflow: hidden; border-radius: var(--kt-r); background: var(--kt-card); animation: kt-up 240ms var(--kt-ease); }
@keyframes kt-up { from { opacity: 0; transform: translate(-50%, 1rem); } }
/* One ring per book, nested; each book keeps its colour everywhere it's drawn. */
.dash-page .kt-timer__rings { width: 3.25rem; height: var(--kt-h-lg); overflow: visible; }
/* A hairline circle; each book learned this week closes its quarter, the book on the clock fills as it goes. */
.dash-page .kt-ring__bg { fill: none; stroke: var(--kt-line); stroke-width: 1; }
.dash-page .kt-ring { fill: none; stroke-width: 3.5; stroke-linecap: round; transition: stroke-dasharray 250ms linear, opacity 200ms; }
.dash-page .kt-ring--c { stroke: var(--ring-c); }
.dash-page .kt-ring--n { stroke: var(--ring-n); }
.dash-page .kt-ring--t { stroke: var(--ring-t); }
.dash-page .kt-ring--m { stroke: var(--ring-m); }
.dash-page .kt-ring.is-empty { opacity: 0; }
.dash-page .kt-ring__n { fill: var(--kt-ink); font-family: var(--font-display); font-size: 11px; font-weight: 700; text-anchor: middle; dominant-baseline: central; font-variant-numeric: tabular-nums; }
.dash-page .kt-timer.is-up .kt-ring.is-on { animation: kt-ring-up 1.2s ease-in-out 3; }
@keyframes kt-ring-up { 50% { opacity: .35; } }
.dash-page .kt-timer__row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto auto; align-items: center; gap: .5rem; padding: .75rem .75rem .75rem 1rem; }
.dash-page .kt-timer__text { display: grid; min-width: 0; line-height: var(--kt-lh-tight); }
.dash-page .kt-timer__clock { font-family: var(--font-display); font-size: var(--kt-t-2xl); font-weight: 700; font-variant-numeric: tabular-nums; }
.dash-page .kt-timer.is-up .kt-timer__clock { color: var(--kt-sand-ink); }
.dash-page .kt-timer__what { font-size: var(--kt-t-sm); color: var(--kt-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-page .kt-timer__btn, .dash-page .kt-timer__x { display: grid; place-items: center; width: var(--kt-h); height: var(--kt-h); padding: 0; border: 0; border-radius: 50%; cursor: pointer; }
.dash-page .kt-timer__btn { background: var(--kt-ink); color: var(--kt-on); }
.dash-page .kt-timer__btn svg { width: 1rem; height: 1rem; fill: currentColor; }
.dash-page .kt-timer__done { height: var(--kt-h); padding: 0 .75rem; border: 1px solid var(--kt-line); border-radius: 999px; background: var(--kt-card); color: var(--kt-ink); font: inherit; font-size: var(--kt-t-sm); font-weight: 600; cursor: pointer; }
.dash-page .kt-timer.is-up .kt-timer__done { border-color: var(--kt-sand); background: var(--kt-sand); color: var(--kt-on); }
.dash-page .kt-timer__x { width: var(--kt-h-xs); height: var(--kt-h-xs); background: none; color: var(--kt-soft); }
.dash-page .kt-timer__x svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.dash-page :is(.kt-timer, .au) .i-pause { display: none; }
.dash-page :is(.kt-timer.is-running, .au.is-playing) .i-pause { display: inline; }
.dash-page :is(.kt-timer.is-running, .au.is-playing) .i-play { display: none; }

/* The Learn player: play, what's playing over its slider, and Song / Read when the psalm has a song.
   Docked above the tabs in Learn; elsewhere only while it plays. */
.dash-page .au {
  z-index: 4; grid-template-columns: 2.75rem minmax(0, 1fr) auto; grid-template-areas: "play body mode" "x x x";
  align-items: center; gap: .25rem .75rem; padding: .75rem .75rem .75rem .75rem; background: var(--kt-ink); color: var(--kt-on);
}
.dash-page .kt-app:not([data-view="t-learn"]) .au:not(.is-playing) { display: none; }
.dash-page .kt-app:has(.kt-timer:not([hidden])) .au { bottom: calc(var(--kt-dock) + 5.75rem); }
/* The YouTube frame plays the sound but is never seen. */
.dash-page .au__frame { position: fixed; left: 0; bottom: 0; z-index: -1; width: 200px; height: 200px; overflow: hidden; opacity: 0; pointer-events: none; }
.dash-page .au__frame iframe { display: block; width: 200px; height: 200px; border: 0; }
.dash-page .au__play { grid-area: play; display: grid; place-items: center; width: var(--kt-h); height: var(--kt-h); padding: 0; border: 0; border-radius: 50%; background: var(--kt-on); color: var(--kt-ink); cursor: pointer; }
.dash-page .au__play:disabled { opacity: .4; cursor: default; }
.dash-page .au__play svg { width: var(--kt-i); height: var(--kt-i); fill: currentColor; }
.dash-page .au__body { grid-area: body; display: grid; gap: .25rem; min-width: 0; }
.dash-page .au__now { display: flex; align-items: baseline; gap: .5rem; min-width: 0; line-height: var(--kt-lh); white-space: nowrap; }
.dash-page #au-what { flex: none; font-size: var(--kt-t-xs); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--kt-sand-lt); }
.dash-page #au-sub { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: var(--kt-t-md); font-weight: 600; }
.dash-page .au__bar { display: flex; align-items: center; gap: .5rem; font-size: var(--kt-t-xs); color: var(--kt-on-soft); font-variant-numeric: tabular-nums; }
.dash-page .au__bar span { flex: none; min-width: 1.75rem; }
.dash-page .au__bar span:last-child { text-align: end; }
.dash-page .au__bar input { flex: 1 1 0; width: 0; min-width: 0; height: 1rem; margin: 0; accent-color: var(--kt-sand-lt); }
.dash-page .au__mode { grid-area: mode; padding: .125rem; background: var(--kt-on-line); }
.dash-page .au__mode button { min-width: 0; height: var(--kt-h-xs); padding: 0 .75rem; color: var(--kt-on-soft); font-size: var(--kt-t-sm); }
.dash-page .au__mode button[aria-checked="true"] { background: var(--kt-on); color: var(--kt-ink); box-shadow: none; }
.dash-page :is(.au__credit, .au__err) { grid-area: x; min-width: 0; padding-inline-start: 3.5rem; font-size: var(--kt-t-xs); line-height: var(--kt-lh); color: var(--kt-on-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-page .au__err { font-size: var(--kt-t-sm); color: var(--kt-on); white-space: normal; }
.dash-page .au a { color: var(--kt-sand-lt); }

/* The word sheet: rises over the tab bar, one word at a time. */
.dash-page .rd-pop { z-index: 6; gap: .5rem; padding: 1.5rem 1.25rem 1.25rem; animation: kt-sheet 280ms var(--kt-ease); }
/* The grabber: reads as a sheet that came up from the bottom. */
.dash-page .rd-pop::before { content: ""; position: absolute; top: .5rem; left: 50%; width: var(--kt-h-sm); height: .3125rem; border-radius: 999px; background: var(--kt-line); transform: translateX(-50%); }
@keyframes kt-sheet { from { opacity: 0; transform: translate(-50%, 2rem); } }
.dash-page .rd-pop__top { display: flex; align-items: center; gap: .5rem; }
.dash-page .rd-pop__word { flex: 1; font-size: var(--kt-t-2xl); line-height: var(--kt-lh); text-align: right; }
.dash-page .rd-pop__say { display: grid; place-items: center; width: var(--kt-h); height: var(--kt-h); padding: 0; border: 1px solid var(--kt-line); border-radius: 50%; background: var(--kt-well); color: var(--kt-ink); cursor: pointer; }
.dash-page .rd-pop .kt-timer__x { position: static; }
.dash-page .rd-pop__say-it { font-size: var(--kt-t-sm); color: var(--kt-soft); }
.dash-page .rd-pop__mean { font-size: var(--kt-t-lg); line-height: var(--kt-lh-read); }
.dash-page .rd-pop__root { font-size: var(--kt-t-md); line-height: var(--kt-lh-read); color: var(--kt-sand-ink); }
.dash-page .rd-pop__say-it:empty, .dash-page .rd-pop__root:empty { display: none; }

/* The note: one line, an emoji and two words, dropped in at the top. */
.dash-page .kt-toast {
  position: fixed; z-index: 6; left: 50%; top: calc(env(safe-area-inset-top) + .75rem);
  padding: .5rem 1.25rem; border-radius: 999px; background: var(--kt-ink); color: var(--kt-on);
  font-size: var(--kt-t-md); font-weight: 600; white-space: nowrap; cursor: pointer;
  box-shadow: var(--kt-float); transform: translateX(-50%);
}
.dash-page .kt-toast.is-in { animation: kt-slip 320ms cubic-bezier(.3, 1.4, .5, 1); }
@keyframes kt-slip { from { opacity: 0; transform: translate(-50%, -.75rem) scale(.92); } }
.dash-page .kt-toast[data-kind="big"] { background: var(--kt-sand-ink); }

@media (prefers-reduced-motion: reduce) {
  .dash-page *, .dash-page *::before, .dash-page *::after { animation: none !important; transition: none !important; }
}

/* Last, so it beats every display rule above. */
.dash-page [hidden] { display: none !important; }