/*
 * Learning Calendar styles.
 *
 * Layout: one phone-width column under the app's bar (full logo, Settings gear);
 * adding a sefer is a three-step screen with its action pinned to the bottom.
 * Colors are tokens. app.js sets data-theme (light/dark), data-style
 * (solid/glass) and --accent from Settings.
 */
:root {
  /* light: parchment, deep gold, navy (the שעשועי logo) */
  --bg: #ece3c9;            /* page: parchment */
  --surface: #f8f3e5;       /* panels and cards */
  --raised: #efe6cf;        /* fields and quiet buttons inside panels */
  --ink: #1e2a4f;           /* navy, like the pasuk under the logo */
  --muted: #6a6450;
  --faint: #a69c80;
  --line: rgba(30, 42, 79, .10);
  --accent: #9a7128;        /* deep gold; the person can change it */
  --gold-text: linear-gradient(180deg, #c9a256 0%, #9a7128 55%, #775622 100%);
  --pasuk: #1e2a4f;
  --accent-ink: #ffffff;
  --accent-soft: color-mix(in srgb, var(--accent) 12%, transparent);
  --ok: #7d5f1c;            /* done and on schedule: deep gold, like the logo */
  --ok-soft: color-mix(in srgb, var(--ok) 14%, transparent);
  --warn: #b86e00;
  --warn-soft: color-mix(in srgb, var(--warn) 14%, transparent);
  --danger: #d1343a;
  --shadow: 0 1px 2px rgba(60, 45, 10, .05), 0 8px 24px -14px rgba(60, 45, 10, .22);
  --blur: none;
  --panel-edge: transparent;

  --ui: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "Segoe UI", Roboto, sans-serif;
  --book: "Frank Ruhl Libre", "Times New Roman", serif;   /* Hebrew names, as printed in a sefer */

  --r-lg: 20px;
  --r-md: 14px;
  --r-sm: 10px;
  color-scheme: light;
}
:root[data-theme="dark"] {
  --bg: #171a24;            /* navy-black */
  --surface: #1f2331;
  --raised: #2a2f40;
  --ink: #f1e9d2;            /* cream */
  --muted: #aaa38d;
  --faint: #6d6a5a;
  --line: rgba(241, 233, 210, .09);
  --gold-text: linear-gradient(180deg, #fbeec3 0%, #d6b25e 55%, #a8812f 100%);
  --pasuk: #e6ddc3;
  --ok: #d6b25e;
  --warn: #f0a32b;
  --danger: #ff5a5f;
  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 10px 30px -16px rgba(0, 0, 0, .7);
  color-scheme: dark;
}
/* Glass: panels are frosted and the page has a faint wash of the chosen color */
:root[data-style="glass"] {
  --surface: rgba(250, 245, 232, .66);
  --raised: rgba(30, 42, 79, .05);
  --blur: blur(28px) saturate(180%);
  --panel-edge: rgba(255, 255, 255, .75);
}
:root[data-style="glass"][data-theme="dark"] {
  --surface: rgba(255, 255, 255, .07);
  --raised: rgba(255, 255, 255, .07);
  --panel-edge: rgba(255, 255, 255, .1);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { background: var(--bg); -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; background: var(--bg); color: var(--ink);
  font: 400 16px/1.45 var(--ui); -webkit-font-smoothing: antialiased;
}
/* the page's gradient, like the logo's card: light parchment with a gold glow, or navy lit from above */
body, .gate {
  background:
    radial-gradient(110% 55% at 0% 0%, color-mix(in srgb, var(--accent) 30%, transparent), transparent 70%),
    radial-gradient(100% 60% at 100% 100%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 70%),
    linear-gradient(180deg, #f6efdb 0%, var(--bg) 45%, #e3d6b2 100%);
  background-attachment: fixed;
}
:root[data-theme="dark"] body, :root[data-theme="dark"] .gate {
  background:
    radial-gradient(110% 55% at 0% 0%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%),
    radial-gradient(100% 60% at 100% 100%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 70%),
    linear-gradient(180deg, var(--bg-top, #252a3b) 0%, var(--bg) 50%, var(--bg-bottom, #0f1118) 100%);
  background-attachment: fixed;
}
[lang="he"] { font-family: var(--book); }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--accent); }
h1 { font-size: 2rem; line-height: 1.1; font-weight: 700; letter-spacing: -.025em; margin: 0; text-wrap: balance; }
h2 { font-size: 1.2rem; font-weight: 650; letter-spacing: -.01em; margin: 0; }
.muted { color: var(--muted); }
.note { color: var(--muted); font-size: .88rem; margin: 0; }
.eyebrow { margin: 0 0 2px; color: var(--muted); font-size: .9rem; font-weight: 500; }
svg[data-icon] { width: 22px; height: 22px; flex: none; }

/* ---- page frame ---- */
.view { max-width: 620px; margin: 0 auto; padding: 14px 16px 48px; }
.topbar { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; padding: 8px 0 14px; }
.navbar { padding: 4px 0 8px; }
.back { display: inline-flex; align-items: center; gap: 2px; border: 0; background: none; color: var(--accent); padding-block: 6px; padding-inline: 0 4px; font-size: 1rem; cursor: pointer; }
.icon-btn {
  width: 40px; height: 40px; border-radius: 50%; border: 0; display: grid; place-items: center; cursor: pointer;
  background: var(--accent-soft); color: var(--accent);
}
.icon-btn.small { width: 34px; height: 34px; background: var(--raised); color: var(--ink); }
.icon-btn.small svg { width: 18px; height: 18px; }
.stack { display: flex; flex-direction: column; gap: 14px; }
.panel {
  background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--shadow);
  border: 1px solid var(--panel-edge);
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
}
.group-title { margin: 26px 4px 8px; font-size: .82rem; font-weight: 600; color: var(--muted); letter-spacing: .02em; }
.form-rows { display: flex; flex-direction: column; gap: 14px; padding: 16px; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.two > * { min-width: 0; }

/* ---- buttons and fields ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 18px;
  border-radius: var(--r-md); border: 0; background: var(--raised); color: var(--ink); font-weight: 600; cursor: pointer;
  text-decoration: none; transition: transform .1s ease, opacity .15s ease;
}
.btn:active, .icon-btn:active, .step-btn:active { transform: scale(.97); }
.btn.primary { background: var(--accent); color: var(--accent-ink); }
.btn.danger { background: var(--danger); color: #fff; }
.btn.danger-text { width: 100%; margin-top: 26px; background: none; color: var(--danger); }
.btn:disabled { opacity: .45; cursor: default; }
.text-btn { border: 0; background: none; color: var(--accent); font-weight: 500; padding: 8px 6px; cursor: pointer; min-height: 0; }
.text-btn.center { align-self: center; }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 50%, transparent); outline-offset: 2px; }
.field { display: flex; flex-direction: column; gap: 6px; font-size: .85rem; font-weight: 500; color: var(--muted); }
input:not([type="radio"]):not([type="checkbox"]), textarea {
  width: 100%; min-width: 0; max-width: 100%; min-height: 46px; padding: 10px 12px; border-radius: var(--r-sm);
  border: 1px solid transparent; background: var(--raised); color: var(--ink); font-size: 1rem;
}
input:focus { border-color: var(--accent); outline: none; }
textarea { min-height: 7em; font: 16px/1.4 ui-monospace, Menlo, monospace; }
/* iPad and iPhone date boxes otherwise stick out of their panel */
input[type="date"] { -webkit-appearance: none; appearance: none; display: block; text-align: start; }
input[type="date"]::-webkit-date-and-time-value { text-align: start; margin: 0; }
input[type="date"]::-webkit-calendar-picker-indicator { margin-inline-start: auto; }

/* segmented choice, like the iPhone's */
.seg { display: flex; gap: 2px; padding: 2px; border-radius: 10px; background: var(--raised); }
.seg label { position: relative; flex: 1 1 0; display: grid; place-items: center; min-height: 34px; padding: 4px; border-radius: 8px;
  font-size: .88rem; font-weight: 500; color: var(--ink); white-space: nowrap; text-align: center; transition: background .2s, box-shadow .2s; }
.seg input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.seg label:has(input:checked) { background: var(--surface); font-weight: 600; box-shadow: 0 2px 6px rgba(0, 0, 0, .12); }
:root[data-theme="dark"] .seg label:has(input:checked) { background: #3a3b41; }
:root[data-style="glass"] .seg label:has(input:checked) { background: rgba(255, 255, 255, .92); }
:root[data-style="glass"][data-theme="dark"] .seg label:has(input:checked) { background: rgba(255, 255, 255, .2); }
.seg label:has(input:focus-visible) { outline: 3px solid color-mix(in srgb, var(--accent) 50%, transparent); }
.seg.big label { min-height: 40px; font-size: .92rem; }

/* rows inside a panel, iPhone Settings style */
.row-link {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; padding: 0; border: 0; background: none;
  color: var(--ink); font-size: 1rem; text-align: start; cursor: pointer; border-top: 1px solid var(--line);
}
.row-link:first-child { border-top: 0; }
a.row-link { text-decoration: none; }
.row-link svg { color: var(--faint); width: 18px; height: 18px; }
.row-value { margin-inline-start: auto; color: var(--muted); }
.row-date { width: auto !important; margin-inline-start: auto; min-height: 36px !important; padding: 6px 10px !important; }
.list-rows { padding: 0 16px; }

/* ---- Today ---- */
.week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin: 0 -4px 6px; }
.week button {
  display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 0 7px; border: 0; border-radius: 14px;
  background: none; color: var(--muted); cursor: pointer; font-size: .72rem; font-weight: 600;
}
.week b { font-size: 1.05rem; color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.week i { width: 6px; height: 6px; border-radius: 50%; background: transparent; }
.week .has i { background: var(--faint); }
.week .all-done i { background: var(--ok); }
.week .is-today b { color: var(--accent); }
.week [aria-pressed="true"] { background: var(--surface); box-shadow: var(--shadow); }
.week [aria-pressed="true"].is-today { background: var(--accent); }
.week [aria-pressed="true"].is-today, .week [aria-pressed="true"].is-today b { color: var(--accent-ink); }
.week [aria-pressed="true"].is-today i { background: var(--accent-ink); }
.day-status { margin: 10px 4px 12px; color: var(--muted); font-size: .92rem; }

.lesson { padding: 18px; display: flex; flex-direction: column; gap: 14px; }
.lesson-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.lesson-head > div { min-width: 0; }
.he-title { font: 700 1.9rem/1.15 var(--book); margin: 0; letter-spacing: 0; text-align: left; }
.lesson .he-title { font-size: 1.65rem; }
.lesson-sub { color: var(--muted); font-size: .88rem; margin-top: 2px; }
.count { flex: none; text-align: end; font-size: .78rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.count b { display: block; font-size: 1.15rem; color: var(--ink); font-weight: 650; }
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 99px; font-size: .78rem; font-weight: 600; }
.pill.ok { background: var(--ok-soft); color: var(--ok); }
.pill.behind { background: var(--warn-soft); color: var(--warn); }

/* the day's place, from where to start to where to stop */
.route { position: relative; display: flex; flex-direction: column; gap: 14px; padding-inline-start: 22px; }
.route::before { content: ""; position: absolute; inset-inline-start: 5px; top: 9px; bottom: 9px; width: 2px; border-radius: 2px; background: var(--line); }
.stop { position: relative; }
.stop::before { content: ""; position: absolute; inset-inline-start: -22px; top: 5px; width: 12px; height: 12px; border-radius: 50%; background: var(--surface); border: 2.5px solid var(--accent); }
.stop.end::before { background: var(--accent); }
.stop small { display: block; font-size: .74rem; font-weight: 600; color: var(--muted); letter-spacing: .02em; }
.stop .place { font-weight: 600; }
.words { font-family: var(--book); font-size: 1.12em; font-weight: 500; }
.comm { margin: 0; padding: 10px 12px; border-radius: var(--r-sm); background: var(--raised); color: var(--muted); font-size: .86rem; }
.lesson-actions { display: grid; grid-template-columns: 1fr; gap: 10px; }   /* Mark as done, then View today’s text, each the full width */
.lesson-actions .btn.ext { padding: 0 14px; gap: 8px; }
.lesson-actions svg { width: 18px; height: 18px; }
.lesson-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; font-size: .85rem; color: var(--muted); }
.lesson-foot .text-btn { padding: 4px 0; }
.behind-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: var(--r-sm); background: var(--warn-soft); color: var(--warn); font-size: .9rem; font-weight: 600; }
.behind-bar .text-btn { color: inherit; text-decoration: underline; padding: 0; }
.lesson.is-done { gap: 10px; }
.done-mark { display: inline-flex; align-items: center; gap: 8px; color: var(--ok); font-weight: 650; }
.done-mark svg { width: 20px; height: 20px; }
.next-line { margin: 0; font-size: .9rem; color: var(--muted); }
.btn.ticked { background: var(--ok); color: #fff; }
.tick { width: 20px; height: 20px; stroke-dasharray: 24; stroke-dashoffset: 24; animation: tick .3s ease-out forwards; }
@keyframes tick { to { stroke-dashoffset: 0; } }

.empty { text-align: center; padding: 48px 12px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.empty p { color: var(--muted); max-width: 30em; margin: 0; }
.empty-art { width: 120px; height: 80px; fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linejoin: round; margin-bottom: 4px; }

/* ---- Seforim list ---- */
.list { display: flex; flex-direction: column; gap: 10px; }
.plan-row { display: flex; flex-direction: column; gap: 10px; width: 100%; padding: 16px; text-align: start; cursor: pointer; border: 1px solid var(--panel-edge); color: var(--ink); }
.plan-row-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.plan-row .he-title { font-size: 1.45rem; }
.plan-row-meta { display: flex; justify-content: space-between; gap: 10px; font-size: .84rem; color: var(--muted); }
.progress { height: 6px; border-radius: 99px; background: var(--raised); overflow: hidden; }
.progress i { display: block; height: 100%; border-radius: inherit; background: var(--accent); }

/* ---- one sefer ---- */
.plan-head { display: flex; flex-direction: column; gap: 6px; margin: 4px 0 18px; }
.plan-head .he-title { font-size: 2.3rem; }
.plan-head .progress { margin-top: 10px; }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 10px; }
.stats div { padding: 12px; border-radius: var(--r-md); background: var(--surface); box-shadow: var(--shadow); border: 1px solid var(--panel-edge);
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); min-width: 0; }
.stats b { display: block; font-size: 1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 650; font-variant-numeric: tabular-nums; }
.stats span { font-size: .76rem; color: var(--muted); }
.calendar { padding: 14px 14px 16px; }
.cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.cal-head h2 { font-size: 1.05rem; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; text-align: center; }
.cal-grid .dow { font-size: .7rem; font-weight: 600; color: var(--faint); padding-bottom: 4px; }
.cal-grid button {
  aspect-ratio: 1; max-width: 100%; border: 0; border-radius: 50%; background: none; color: var(--ink); cursor: pointer;
  font-size: .9rem; font-variant-numeric: tabular-nums; display: grid; place-items: center; position: relative;
}
.cal-grid button.plan { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--accent) 55%, transparent); }
.cal-grid button.done { background: var(--ok); color: #fff; }
.cal-grid button.off { color: var(--faint); }
.cal-grid button.none { color: var(--faint); cursor: default; }
.cal-grid button.today::after { content: ""; position: absolute; bottom: 3px; width: 4px; height: 4px; border-radius: 50%; background: currentColor; }
.cal-grid button[aria-pressed="true"] { outline: 2px solid var(--ink); outline-offset: 1px; }
.cal-key { display: flex; gap: 14px; justify-content: center; margin-top: 12px; font-size: .76rem; color: var(--muted); }
.cal-key i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-inline-end: 5px; vertical-align: -1px; }
.k-done { background: var(--ok); } .k-plan { box-shadow: inset 0 0 0 1.5px var(--accent); } .k-off { background: var(--raised); }
.cal-detail { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); font-size: .92rem; }
.cal-detail:empty { display: none; }
.cal-detail b { display: block; margin-bottom: 2px; }
.all-days { margin-top: 14px; padding: 0 16px; }
.all-days summary, .inline-details summary { display: flex; align-items: center; gap: 8px; min-height: 52px; cursor: pointer; list-style: none; font-weight: 500; }
.all-days summary::-webkit-details-marker, .inline-details summary::-webkit-details-marker { display: none; }
.all-days summary svg, .inline-details summary svg { margin-inline-start: auto; width: 18px; height: 18px; color: var(--faint); transition: transform .2s; }
details[open] > summary svg { transform: rotate(180deg); }
.inline-details { padding: 0 16px; margin-top: 14px; }
.inline-details[open] { padding-bottom: 16px; }
.inline-details > :not(summary) + * { margin-top: 12px; }
.panel.form-rows .inline-details { padding: 0; margin: 0; box-shadow: none; background: none; }
.day-list { list-style: none; margin: 0 0 12px; padding: 0; }
.day-list li { display: grid; grid-template-columns: 5.6em 1fr auto; gap: 10px; padding: 11px 0; border-top: 1px solid var(--line); font-size: .9rem; }
.day-list .d { color: var(--muted); font-variant-numeric: tabular-nums; }
.day-list .ok { color: var(--ok); font-weight: 700; }
.day-list li.today .d { color: var(--accent); font-weight: 600; }
.day-list li.off .t { color: var(--faint); }

/* ---- Add a sefer ---- */
.wizard { padding-bottom: 170px; }
.wizard h1 { margin: 6px 0 14px; }
.wiz-bar { position: sticky; top: 0; z-index: 3; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; margin: -14px -16px 6px; padding: 10px 12px;
  background: color-mix(in srgb, var(--bg) 55%, transparent); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }
.wiz-bar .text-btn { justify-self: start; }
.wiz-steps { display: flex; gap: 6px; }
.wiz-steps i { width: 22px; height: 4px; border-radius: 4px; background: var(--line); transition: background .2s; }
.wiz-steps i.on { background: var(--accent); }
.wiz-count { justify-self: end; font-size: .82rem; color: var(--muted); }
.search { display: flex; align-items: center; gap: 8px; padding: 0 12px; border-radius: var(--r-md); background: var(--raised); color: var(--muted); }
.search input { background: none !important; padding-inline-start: 0 !important; }
.search svg { width: 18px; height: 18px; }
.chips-scroll { display: flex; gap: 8px; overflow-x: auto; margin: 12px -16px 4px; padding: 2px 16px 6px; scrollbar-width: none; }
.chips-scroll::-webkit-scrollbar { display: none; }
.chips-scroll button { flex: none; border: 0; border-radius: 99px; padding: 8px 14px; background: var(--surface); color: var(--ink); font-size: .88rem; font-weight: 500; cursor: pointer;
  box-shadow: var(--shadow); white-space: nowrap; }
.chips-scroll button[aria-selected="true"] { background: var(--ink); color: var(--bg); }
.chips-scroll button bdi { margin-inline-start: 4px; opacity: .7; }
.list-tools { display: flex; justify-content: space-between; align-items: center; margin: 6px 4px 6px; font-size: .88rem; }
.pick-rows { padding: 2px 0; max-height: none; }
#wizList { max-height: 46vh; overflow-y: auto; }  /* at its end, scrolling carries on to the page */
.pick-row { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 8px 16px; border-top: 1px solid var(--line); cursor: pointer; width: 100%;
  background: none; border-inline: 0; border-bottom: 0; text-align: start; color: var(--ink); }
.pick-row:first-child { border-top: 0; }
.pick-row input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pick-row .names { flex: 1; min-width: 0; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.pick-row .he { font: 700 1.2rem var(--book); }
.pick-row .en { color: var(--muted); font-size: .88rem; }
.check { flex: none; width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--faint); display: grid; place-items: center; color: transparent; }
.check svg { width: 14px; height: 14px; }
.pick-row:has(input:checked) .check, .pick-row[aria-selected="true"] .check { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.pick-row:has(input:focus-visible) { outline: 3px solid color-mix(in srgb, var(--accent) 50%, transparent); outline-offset: -3px; }
.toggles { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px; }
.toggles label { position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px; border-radius: 99px; background: var(--raised); font-size: .92rem; font-weight: 500; cursor: pointer; }
.toggles input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.toggles label:has(input:checked) { background: var(--accent); color: var(--accent-ink); }
.toggles bdi { font-family: var(--book); font-size: 1.05em; }
.he-sub { font: 700 1.4rem var(--book); margin: -8px 0 16px; text-align: left; color: var(--muted); }
.dial { margin-top: 14px; padding: 18px 16px; display: flex; flex-direction: column; gap: 12px; align-items: stretch; }
.dial-label { font-size: .85rem; color: var(--muted); font-weight: 500; text-align: center; }
.dial-date { font-size: 1.35rem !important; font-weight: 600; text-align: center !important; min-height: 56px !important; }
.dial-date::-webkit-date-and-time-value { text-align: center !important; }
.stepper { display: grid; grid-template-columns: 52px 1fr 52px; align-items: center; gap: 10px; }
.step-btn { height: 52px; border-radius: 50%; border: 0; background: var(--raised); color: var(--accent); font-size: 1.6rem; line-height: 1; cursor: pointer; }
.step-val { display: flex; flex-direction: column; align-items: center; }
.step-val input { text-align: center; font-size: 2.2rem !important; font-weight: 700; background: none !important; min-height: 0 !important; padding: 0 !important; font-variant-numeric: tabular-nums; -moz-appearance: textfield; }
.step-val input::-webkit-inner-spin-button, .step-val input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.step-val span { color: var(--muted); font-size: .9rem; }
.day-toggles { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.day-toggles label { position: relative; aspect-ratio: 1; max-width: 46px; width: 100%; justify-self: center; border-radius: 50%; display: grid; place-items: center;
  background: var(--raised); font-size: .85rem; font-weight: 600; cursor: pointer; }
.day-toggles input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.day-toggles label:has(input:checked) { background: var(--accent); color: var(--accent-ink); }
.off-list p { display: flex; justify-content: space-between; align-items: center; margin: 0; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: .92rem; }

.wiz-foot {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 4; padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
  background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid var(--line);
}
.wiz-foot > * { max-width: 588px; margin-inline: auto; }
.wiz-foot .btn { width: 100%; display: flex; }
.wiz-sum { min-height: 22px; margin-bottom: 10px; text-align: center; font-size: .92rem; color: var(--muted); }
.wiz-sum b { color: var(--ink); font-variant-numeric: tabular-nums; }
.wiz-sum.error { color: var(--danger); }
.wiz-sum:empty { display: none; }

/* review */
.review-hero { padding: 22px 18px; text-align: center; }
.review-hero .he-title { font-size: 2.2rem; }
.review-hero .big { margin: 16px 0 2px; font-size: 3rem; font-weight: 750; letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.review-hero .big small { font-size: 1rem; font-weight: 500; color: var(--muted); letter-spacing: 0; margin-inline-start: 4px; }
.review-hero p { margin: 4px 0 0; color: var(--muted); }
.review-rows { margin-top: 14px; padding: 0 16px; }
.review-rows div { display: flex; justify-content: space-between; gap: 14px; padding: 13px 0; border-top: 1px solid var(--line); font-size: .94rem; }
.review-rows div:first-child { border-top: 0; }
.review-rows span { color: var(--muted); flex: none; }
.review-rows b { font-weight: 500; text-align: end; min-width: 0; }
.review-first { margin-top: 14px; padding: 16px; }
.review-first small { display: block; color: var(--muted); font-size: .8rem; font-weight: 600; margin-bottom: 4px; }

/* ---- settings ---- */
.swatches { display: flex; flex-wrap: wrap; gap: 12px; }
.swatches button, .swatches label { position: relative; width: 36px; height: 36px; border-radius: 50%; border: 0; cursor: pointer; padding: 0; }
.swatches [aria-pressed="true"] { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--ink); }
.swatches label { background: conic-gradient(#e5484d, #f5a524, #30a46c, #0091ff, #8e4ec6, #e5484d); }
.swatches label input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer; }
.prose { margin-top: 14px; }
.prose p { margin: 0 0 14px; }
.prose h2 { margin: 26px 0 10px; }
.credit { padding: 14px 16px; border-radius: var(--r-md); background: var(--surface); box-shadow: var(--shadow); }
.error-box { margin: 10px 0; padding: 12px 14px; border-radius: var(--r-md); background: var(--warn-soft); color: var(--warn); }


/* ---- sheets ---- */
dialog.sheet {
  margin: auto auto 0; width: 100%; max-width: 520px; max-height: calc(100dvh - 40px); padding: 0; border: 0; border-radius: 24px 24px 0 0;
  background: var(--surface); color: var(--ink); box-shadow: 0 -10px 40px rgba(0, 0, 0, .25);
}
:root[data-style="glass"] dialog.sheet { background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(30px); -webkit-backdrop-filter: blur(30px); }
dialog.sheet[open] { display: flex; flex-direction: column; animation: up .25s cubic-bezier(.2, .8, .2, 1); }
dialog.sheet::backdrop { background: rgba(0, 0, 0, .35); }
dialog.sheet form { display: flex; flex-direction: column; gap: 10px; padding: 22px 18px calc(18px + env(safe-area-inset-bottom, 0px)); overflow-y: auto; }
dialog.sheet form::before { content: ""; align-self: center; width: 36px; height: 5px; border-radius: 5px; background: var(--line); margin: -10px 0 6px; }
dialog.sheet h2 { text-align: center; }
dialog.sheet .muted { text-align: center; margin: 0 0 6px; }
#pickerList .pick-row { border-radius: 0; }
@keyframes up { from { transform: translateY(40px); opacity: 0; } }

#toast {
  position: fixed; left: 50%; bottom: calc(92px + env(safe-area-inset-bottom, 0px)); transform: translate(-50%, 12px); z-index: 9;
  padding: 10px 18px; border-radius: 999px; background: var(--ink); color: var(--bg); font-weight: 600; font-size: .92rem;
  opacity: 0; pointer-events: none; transition: .2s; max-width: calc(100% - 32px);
}
#toast.show { opacity: 1; transform: translate(-50%, 0); }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }
@media (min-width: 700px) { h1 { font-size: 2.3rem; } }

/* saving failed: a note that stays at the top until a save works */
.save-warn { position: sticky; top: 0; z-index: 8; margin: 0; padding: 10px 16px; text-align: center; font-size: .9rem; font-weight: 600;
  background: var(--warn); color: #fff; }
.load-failed h2 { font-size: 1.1rem; }

.day-list li { align-items: center; }
.day-list .mark { width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--faint); background: none; color: var(--ok); display: grid; place-items: center; cursor: pointer; }
.day-list .mark[aria-pressed="true"] { border-color: var(--ok); background: var(--ok-soft); }
.day-list .mark svg { width: 20px; height: 20px; }
.col-note { margin: 10px 4px 0; }
.col-note:empty { display: none; }

/* large text: choices wrap onto a second line instead of running off the screen */
.seg { flex-wrap: wrap; }
.seg label { white-space: normal; flex: 1 1 auto; min-width: 0; min-height: 44px; }
/* every tap target at least 44 by 44 */
.day-toggles { display: flex; justify-content: space-between; gap: 2px; flex-wrap: wrap; }
.day-toggles label { width: 44px; height: 44px; min-width: 44px; max-width: none; aspect-ratio: auto; }
.icon-btn.small, .text-btn, .back, .week button, .cal-grid button { min-height: 44px; }
.icon-btn.small { width: 44px; height: 44px; }
.swatches button, .swatches label { width: 44px; height: 44px; }
.swatches [aria-checked="true"], .swatches label:has([aria-checked="true"]) { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--ink); }
#missed .btn { flex-direction: column; gap: 2px; padding: 8px 18px; }
#missed .btn small { font-weight: 500; font-size: .8rem; opacity: .8; }
/* today's cards from the phone, shown while the sefarim load: not tappable yet */
.lesson.from-cache { pointer-events: none; }
.lesson.from-cache .btn, .lesson.from-cache .text-btn { opacity: .6; }

/* account */
#signedOut, #signedIn { display: flex; flex-direction: column; gap: 12px; }
.btn.wide { width: 100%; }
.link-form { display: flex; flex-direction: column; gap: 6px; }
.account-who { margin: 0; overflow-wrap: anywhere; }
.btn.danger-soft { color: var(--danger); }

.done-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: var(--r-md); background: var(--ok-soft); }
.btn.small-btn { min-height: 44px; padding: 0 16px; border-radius: 99px; background: var(--surface); font-size: .9rem; }
.part-btn { align-self: flex-start; padding-inline-start: 0; }
#settings > .panel.list-rows { margin-top: 16px; }

/* sign-in screen, over everything until signed in */
.gate { position: fixed; inset: 0; z-index: 20; overflow-y: auto;
  display: flex; align-items: center; justify-content: center; padding: 24px 16px calc(24px + env(safe-area-inset-bottom, 0px)); }
.gate-box { width: 100%; max-width: 400px; display: flex; flex-direction: column; gap: 14px; text-align: center; }
.gate-box .empty-art { align-self: center; }
.gate-sub { color: var(--muted); margin: 0 0 6px; }
.gate .link-form { text-align: start; margin-top: 6px; }
.gate-privacy { text-align: start; color: var(--muted); font-size: .9rem; }
.gate-privacy summary { cursor: pointer; }
body.gated { overflow: hidden; }
.save-warn.soft { position: static; background: var(--raised); color: var(--ink); font-weight: 500; }
.save-warn .text-btn { padding: 0 4px; font-weight: 600; }
.switch-row { display: flex; align-items: center; gap: 12px; min-height: 44px; font-size: .95rem; color: var(--ink); cursor: pointer; }
.switch-row input { width: 22px; height: 22px; accent-color: var(--accent); flex: none; }

/* ---- right-to-left (Hebrew screens): the layout mirrors; arrows point the other way ---- */
:root[dir="rtl"] .he-title, :root[dir="rtl"] .he-sub { text-align: right; }
:root[dir="rtl"] svg[data-icon="back"], :root[dir="rtl"] svg[data-icon="next"] { transform: scaleX(-1); }

/* ---- Hebrew dates beside dates ---- */
.week button small.hd, .cal-grid button small.hd { display: block; font: 500 .62rem/1 var(--book); color: var(--faint); margin-top: 1px; }
.cal-grid button { line-height: 1.05; }
#calMonth small { display: block; font: 500 .8rem var(--book); color: var(--muted); }

/* ---- after Done: minutes ---- */
.minutes-box { display: flex; align-items: center; gap: 10px; font-size: .88rem; color: var(--muted); }
.minutes-box input { width: 84px !important; min-height: 38px !important; padding: 6px 10px !important; margin-inline-start: auto; text-align: center; }

/* ---- start choices on "Choose a sefer" ---- */
.quick-starts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
.quick { display: flex; flex-direction: column; gap: 4px; padding: 14px; text-align: start; color: var(--ink); border: 1px solid var(--panel-edge); cursor: pointer; font: inherit; }
.quick b { font-size: .98rem; color: var(--accent); }
.quick span { font-size: .8rem; color: var(--muted); line-height: 1.35; }

/* ---- groups, kinds, dedications, places, suggestions ---- */
.group { display: flex; flex-direction: column; gap: 12px; padding-inline-start: 10px; border-inline-start: 3px solid var(--accent-soft); }
.group-head { display: flex; flex-direction: column; gap: 10px; padding: 16px; }
.group-head .he-title { font-size: 1.3rem; }
.pill.review { background: var(--accent-soft); color: var(--accent); }
.lesson-sub .pill { margin-inline-end: 6px; }
.dedication { margin: 6px 0 0; font-size: .86rem; color: var(--muted); }
.dedication bdi { font-family: var(--book); font-weight: 700; color: var(--ink); }
.places { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border-radius: 12px; background: var(--accent-soft); }
.places p { margin: 0; }
.suggestion { border: 1px dashed color-mix(in srgb, var(--accent) 45%, transparent); }
.suggestion h2 { font-size: 1.1rem; margin: 0; }
.suggest-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); font-size: .92rem; }
.suggest-row .btn { flex: none; }
.ask-date { margin-top: 12px; }
#cycleNote { padding: 14px 16px; }
.pill:not(.ok):not(.behind):not(.review) { background: var(--line); color: var(--muted); }

/* ---- the printable weekly sheet: only it is printed ---- */
.print-sheet { display: none; }
.print-btn { align-self: center; margin-top: 4px; }
@media print {
  body > *:not(#printSheet) { display: none !important; }
  body { background: #fff !important; color: #000; }
  .print-sheet { display: block; font: 11pt/1.4 system-ui, sans-serif; color: #000; }
  .print-sheet h1 { font-size: 15pt; margin: 0 0 10pt; }
  .print-sheet table { width: 100%; border-collapse: collapse; }
  .print-sheet th, .print-sheet td { border: 1px solid #999; padding: 6pt; vertical-align: top; text-align: start; }
  .print-sheet th { width: 24%; font-weight: 600; }
  .print-sheet p { margin: 0 0 5pt; }
  .print-sheet .box { display: inline-block; width: 9pt; height: 9pt; border: 1px solid #000; margin-inline-end: 5pt; vertical-align: -1pt; }
  .print-sheet .print-foot { font-size: 8.5pt; color: #444; margin-top: 8pt; }
  tr { break-inside: avoid; }
}
.chavrusa { margin: 6px 0 0; font-size: .86rem; color: var(--muted); }
.chavrusa b { color: var(--ink); font-weight: 600; }
#shareLink { font-size: .85rem; }
.conflict { margin: 8px 0 0; padding: 10px 12px; border-radius: 12px; background: var(--warn-soft); display: flex; flex-direction: column; gap: 8px; font-size: .88rem; }
.conflict p { margin: 0; }
.conflict .btn { align-self: flex-start; }
.preview-list { margin: 8px 0; padding-inline-start: 18px; max-height: 40vh; overflow: auto; text-align: start; font-size: .9rem; }
.preview-list li { margin: 4px 0; }

/* ---- where today's learning is saved: one quiet line ---- */
.save-state { display: block; margin: -2px 0 10px; padding: 0; border: 0; background: none; font: inherit; font-size: .8rem; color: var(--faint); text-align: start; cursor: pointer; min-height: 0; }
.save-state::before { content: "●"; margin-inline-end: 6px; font-size: .7em; vertical-align: 1px; }
.save-state.account::before { color: var(--ok); }
.save-state.waiting::before { color: var(--faint); }
.save-state.attention { color: var(--warn); font-weight: 600; }
.save-state.attention::before { color: var(--warn); }
.welcome { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; margin-bottom: 12px; }
.welcome p { margin: 0; }
.done-what { margin: 6px 0 0; font-size: .86rem; color: var(--muted); }
.too-big { padding: 12px 14px; color: var(--warn); }
/* the file box is reachable with the keyboard (Tab, then Enter or Space) but drawn as its button */
.file-btn { position: relative; }
.file-input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.file-btn:focus-within { outline: 3px solid color-mix(in srgb, var(--accent) 50%, transparent); outline-offset: 2px; }

/* ---- coming soon: features not built yet, drawn where they will be, grayed out ---- */
.soon { opacity: .55; filter: grayscale(1); user-select: none; }
.panel.soon { display: flex; flex-direction: column; gap: 10px; padding: 16px; margin: 10px 0; }
.soon-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.soon-pill { flex: none; }
.soon p { margin: 0; }
.soon-bars { display: flex; align-items: flex-end; gap: 8px; height: 70px; }
.soon-bars i { flex: 1; border-radius: 6px 6px 2px 2px; background: var(--accent); }
.soon-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; text-align: center; }
.soon-stats b { display: block; font-size: 1.3rem; }
.soon-stats span { font-size: .78rem; color: var(--muted); }
.soon-avatars { display: flex; align-items: center; }
.soon-avatars i, .soon-avatars span { width: 34px; height: 34px; border-radius: 50%; background: var(--raised); border: 2px solid var(--surface); margin-inline-end: -8px; display: grid; place-items: center; color: var(--muted); }
.quick.soon .pill { align-self: flex-start; margin-top: 4px; }
.sponsor-soon { margin-top: 0; }

/* the buttons under a sefer's dedication: full width, with room between them */
#reviewPlan, #sharePlan, #exportPlan { display: flex; width: 100%; margin-top: 12px; }

/* text-only buttons get a frame under the mouse (and while pressed on a phone), so they read as buttons */
.text-btn, .back, .save-state { border-radius: 10px; transition: background-color .15s; }
.lesson-foot .text-btn, .behind-bar .text-btn, .part-btn, .save-state, .save-warn .text-btn { padding-inline: 8px; }
.back { padding-inline: 6px 10px; }
.text-btn:hover, .back:hover, .save-state:hover,
.text-btn:active, .back:active, .save-state:active {
  outline: 1.5px solid currentColor; outline-offset: -1.5px;
  background-color: color-mix(in srgb, currentColor 8%, transparent);
}
.text-btn:disabled:hover { outline: none; background-color: transparent; }

/* the end of the collections row and of each list of sefarim: more are coming */
.soon-chip { flex: none; align-self: center; padding: 8px 14px; border-radius: 99px; border: 1.5px dashed var(--faint); color: var(--muted); font-size: .88rem; white-space: nowrap; }
.soon-more { display: flex; align-items: center; gap: 14px; margin: 10px; padding: 14px 16px; border-radius: var(--r-md); text-align: start; position: relative; overflow: hidden;
  background: radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, #e9cf86 26%, transparent), transparent 60%), var(--raised); }
.soon-more::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none; background: var(--foil);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.soon-more::before { content: ""; position: absolute; inset: 0; pointer-events: none; transform: translateX(-100%);
  background: linear-gradient(105deg, transparent 35%, rgba(255, 246, 214, .55) 50%, transparent 65%); animation: soon-shine 3.6s ease-in-out 1s infinite; }
@keyframes soon-shine { 0%, 55% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
.soon-badge { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--foil); box-shadow: var(--foil-edge); color: #3b2a0b; }
.soon-badge svg { width: 22px; height: 22px; }
.soon-more b { display: block; font-size: 1.02rem; background: var(--gold-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.soon-more small { display: block; margin-top: 2px; color: var(--muted); font-size: .84rem; }

/* the logo on the sign-in screen: the light or dark icon, gold name, the pasuk under a gold rule */
.logo-icon { align-self: center; width: 112px; height: 112px; border-radius: 26px; box-shadow: var(--shadow); }
.logo-icon.dark, :root[data-theme="dark"] .logo-icon.light { display: none; }
:root[data-theme="dark"] .logo-icon.dark { display: block; }
#gateTitle { font: 700 2.8rem/1.1 var(--book); background: var(--gold-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.gate-pasuk { color: var(--pasuk); font-family: var(--book); font-size: 1.2rem; margin: -6px 0 8px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.gate-pasuk::before { content: ""; width: 180px; height: 1px; background: linear-gradient(90deg, transparent, var(--accent), transparent); }
.eyebrow[data-t="app.learningCalendar"] { font-family: var(--book); font-weight: 700; font-size: 1.05rem; background: var(--gold-text); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---- gold foil: the trim on every screen, in every color; with the logo's gold, gold surfaces shine like foil too ---- */
:root {
  --foil: linear-gradient(115deg, #8a6424 0%, #b98f3c 18%, #e9cf86 34%, #fff2c4 42%, #d9b45c 52%, #a77c2c 68%, #d8b866 84%, #9a7128 100%);
  --foil-edge: inset 0 1px 0 rgba(255, 249, 225, .7), inset 0 -1px 0 rgba(90, 62, 15, .35);
  --gold-text: linear-gradient(115deg, #7d5a1e 0%, #b48a37 22%, #e7c977 38%, #f8e6a8 46%, #c9a04a 56%, #8f6a25 74%, #c39a45 100%);
}
:root[data-theme="dark"] {
  --foil: linear-gradient(115deg, #a8812f 0%, #d6b25e 20%, #f6e2a2 36%, #fffbe6 44%, #e8c977 54%, #b8903e 70%, #e3c472 86%, #c49c4a 100%);
  --foil-edge: inset 0 1px 0 rgba(255, 252, 235, .75), inset 0 -1px 0 rgba(70, 50, 12, .4);
  --gold-text: linear-gradient(115deg, #b8903e 0%, #e2c06c 24%, #fbeec3 42%, #fffbe6 48%, #e6c674 58%, #b48a37 78%, #e3c472 100%);
}
:root[data-gold="foil"] .btn.primary,
:root[data-gold="foil"] .week [aria-pressed="true"].is-today,
:root[data-gold="foil"] .stop.end::before,
:root[data-gold="foil"] .progress i,
:root[data-gold="foil"] .wiz-steps i.on,
:root[data-gold="foil"] .pick-row:has(input:checked) .check,
:root[data-gold="foil"] .pick-row[aria-selected="true"] .check,
:root[data-gold="foil"] .toggles label:has(input:checked),
:root[data-gold="foil"] .day-toggles label:has(input:checked),
:root[data-gold="foil"] .soon-bars i {
  background: var(--foil); background-size: 100% 100%; box-shadow: var(--foil-edge);
}
:root[data-gold="foil"] .btn.primary { text-shadow: 0 1px 0 rgba(255, 248, 220, .45); }
:root[data-gold="foil"] .gate-pasuk::before { background: linear-gradient(90deg, transparent, #c9a04a, #f3dc9a, #c9a04a, transparent); }



/* one home screen: settings is the gear in the top corner, and each sefer's name opens its plan */
.icon-btn.gear { background: none; color: var(--muted); }
.icon-btn.gear:hover, .icon-btn.gear:focus-visible { color: var(--accent); background: var(--accent-soft); }
.lesson-open { padding: 0; border: 0; background: none; color: inherit; text-align: start; cursor: pointer; }
.lesson-open:hover .he-title { text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--accent) 50%, transparent); text-underline-offset: 5px; }
.lesson-progress { display: flex; align-items: center; gap: 10px; margin: 2px 0 4px; font-size: .82rem; }
.lesson-progress .progress { flex: 1; height: 4px; }
.lesson-progress .muted { flex: none; }
.add-sefer { display: flex; width: 100%; margin-top: 14px; gap: 8px; }
.add-sefer svg { width: 20px; height: 20px; }
.home-soon { margin-top: 14px; }

/* the app's bar: the full logo in one top corner (goes to Today), Settings in the other */
.appbar { max-width: 620px; margin: 0 auto; padding: 12px 16px 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
body.gated .appbar, body.in-wizard .appbar { display: none; }
.brand { display: inline-flex; align-items: center; gap: 10px; padding: 3px 12px 3px 3px; padding-inline: 3px 12px; border: 0; border-radius: 999px; background: none; cursor: pointer; color: inherit; transition: background-color .15s ease; }
.brand:hover, .brand:focus-visible { background: color-mix(in srgb, var(--accent) 10%, transparent); outline: none; }
.brand:active { transform: scale(.97); }
.brand-mark { flex: none; width: 38px; height: 38px; border-radius: 50%; overflow: hidden; border: 1px solid color-mix(in srgb, var(--accent) 75%, transparent); background: var(--surface); box-shadow: 0 1px 3px rgba(30,42,79,.16); }
.brand-mark img { width: 100%; height: 100%; display: block; transform: scale(1.12); }
.brand-mark img.dark, :root[data-theme="dark"] .brand-mark img.light { display: none; }
:root[data-theme="dark"] .brand-mark img.dark { display: block; }
.brand-name { font-family: var(--book); font-weight: 700; font-size: 1.45rem; line-height: 1; background: var(--gold-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.view { padding-top: 4px; }

/* gold-foil trim, whatever the color: a fine foil edge on every panel, and a foil rule under the app's bar */
.panel { position: relative; }
.panel::after {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none;
  background: var(--foil); opacity: .85;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.panel.soon::after { opacity: .5; }
.appbar { position: relative; padding-bottom: 10px; }
.appbar::after { content: ""; position: absolute; inset-inline: 16px; bottom: 0; height: 1.5px; border-radius: 2px;
  background: linear-gradient(90deg, transparent, #b8903e 12%, #f3dc9a 38%, #fff4cc 50%, #d9b45c 64%, #a77c2c 86%, transparent); }
.brand-mark { border: 0; padding: 1.5px; background: var(--foil); }
.brand-mark img { clip-path: circle(44.6%); }
.icon-btn.gear { color: var(--accent); }
:root:not([data-theme="dark"]) .soon-more b { background: linear-gradient(115deg, #6f4f17 0%, #a07a2e 45%, #c49a45 55%, #7d5a1e 100%); -webkit-background-clip: text; background-clip: text; }

/* every other color is glossy too: a lacquer sheen over the color, a bright top edge and a fine gold rim */
:root:not([data-gold="foil"]) .btn.primary,
:root:not([data-gold="foil"]) .week [aria-pressed="true"].is-today,
:root:not([data-gold="foil"]) .stop.end::before,
:root:not([data-gold="foil"]) .progress i,
:root:not([data-gold="foil"]) .wiz-steps i.on,
:root:not([data-gold="foil"]) .pick-row:has(input:checked) .check,
:root:not([data-gold="foil"]) .pick-row[aria-selected="true"] .check,
:root:not([data-gold="foil"]) .toggles label:has(input:checked),
:root:not([data-gold="foil"]) .day-toggles label:has(input:checked) {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .34) 0%, rgba(255, 255, 255, .08) 48%, rgba(0, 0, 0, .06) 52%, rgba(0, 0, 0, .2) 100%),
    linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .16) 45%, transparent 60%),
    var(--accent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), inset 0 -1px 0 rgba(0, 0, 0, .25), 0 0 0 1px color-mix(in srgb, #c9a04a 70%, transparent);
}
:root:not([data-gold="foil"]) .btn.primary { text-shadow: 0 1px 1px rgba(0, 0, 0, .25); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), inset 0 -1px 0 rgba(0, 0, 0, .25), 0 0 0 1px color-mix(in srgb, #c9a04a 70%, transparent), 0 6px 16px -8px color-mix(in srgb, var(--accent) 70%, transparent); }

/* ---- notes: thoughts and chiddushim on a day's learning ---- */
.notes-btn { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; margin-top: 10px; padding: 8px 14px; border-radius: 999px; cursor: pointer;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); background: color-mix(in srgb, var(--accent) 7%, transparent); color: var(--accent); font-weight: 600; font-size: .92rem; }
.notes-btn svg { width: 18px; height: 18px; }
.notes-btn:hover, .notes-btn:focus-visible { background: color-mix(in srgb, var(--accent) 14%, transparent); }
.notes-count { padding: 2px 9px; border-radius: 999px; font-size: .78rem; font-weight: 700; color: #3b2a0b; background: var(--foil); box-shadow: var(--foil-edge); }
.lesson .notes-btn { display: flex; width: fit-content; }

.notes-sheet .notes-list { display: flex; flex-direction: column; gap: 10px; }
.note-item, .note-card { position: relative; padding: 12px 14px; padding-inline-start: 18px; border-radius: var(--r-md); background: var(--surface); box-shadow: var(--shadow); text-align: start; }
.note-item::before, .note-card::before { content: ""; position: absolute; inset-inline-start: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 3px; background: var(--foil); }
.note-item.editing { outline: 1.5px solid var(--accent); }
.note-text { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 1rem; line-height: 1.6; }
.note-text [lang="he"], .note-words [lang="he"] { font-size: 1.14em; line-height: 1.5; }
.note-words { margin: 0 0 4px; font-size: .86rem; color: var(--muted); }
.note-actions { display: flex; gap: 6px; justify-content: flex-end; margin-top: 6px; }
.note-actions .text-btn { padding: 4px 10px; font-size: .88rem; }

/* the writing box: a page in the app's colors, framed in gold foil */
.note-paper { position: relative; display: flex; flex-direction: column; border-radius: var(--r-md); padding: 6px 4px;
  background:
    repeating-linear-gradient(180deg, transparent 0 31px, color-mix(in srgb, var(--accent) 12%, transparent) 31px 32px) 0 46px / 100% calc(100% - 52px) no-repeat,
    var(--surface);
  box-shadow: var(--shadow); }
.note-paper::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none; background: var(--foil);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.note-paper input, .note-paper textarea { border: 0; background: transparent; outline: none; color: var(--ink); padding: 8px 12px; width: 100%; box-shadow: none; }
.note-paper input { font-size: .9rem; color: var(--muted); border-bottom: 1px solid var(--line); border-radius: 0; }
.note-paper textarea { min-height: 160px; resize: vertical; font: 400 1.02rem/32px var(--ui); }
.note-paper [data-script="he"] { font-family: var(--book); }
.note-paper textarea[data-script="he"] { font-size: 1.18rem; }
.note-paper input::placeholder, .note-paper textarea::placeholder { color: var(--faint); font-style: italic; }
.notes-sheet .notes-soon { margin: 4px 0; }

/* All my notes, and a sefer's notes on its page */
.notes-search { margin: 14px 0; }
.all-notes .note-card, .plan-notes .note-card { cursor: pointer; }
.note-card:hover { box-shadow: var(--shadow), 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent); }
.note-sefer { margin: 0 0 2px; font-size: 1.05rem; }
.note-sefer [lang="he"] { font-size: 1.2rem; font-weight: 700; }
.note-when { margin: 0 0 6px; font-size: .82rem; color: var(--muted); }
.note-card .note-text { display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
.plan-notes { display: flex; flex-direction: column; gap: 10px; padding: 14px; }
.plan-notes .note-card { box-shadow: none; background: var(--raised); }
.plan-notes .btn { display: flex; gap: 8px; }
.plan-notes .btn svg { width: 18px; height: 18px; }
.empty-note { text-align: center; padding: 24px 8px; }
.cal-grid button.has-note::before { content: ""; position: absolute; top: 4px; inset-inline-end: 4px; width: 6px; height: 6px; border-radius: 50%; background: var(--foil); box-shadow: 0 0 0 1px rgba(90, 62, 15, .25); }
.cal-detail .notes-btn { margin-top: 8px; }

/* the color choices shine the way the buttons will: gold as foil, the others glossy with a gold rim */
.swatches [data-swatch] {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .42) 0%, rgba(255, 255, 255, .1) 46%, rgba(0, 0, 0, .08) 54%, rgba(0, 0, 0, .25) 100%),
    linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, .22) 45%, transparent 60%),
    var(--sw);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), inset 0 -1px 1px rgba(0, 0, 0, .3), 0 0 0 1.5px #c9a04a, 0 3px 8px -3px rgba(0, 0, 0, .35);
}
.swatches [data-swatch="#9a7128"] { background: var(--foil); }
.swatches [data-swatch][aria-checked="true"] { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), inset 0 -1px 1px rgba(0, 0, 0, .3), 0 0 0 1.5px #c9a04a, 0 0 0 3.5px var(--bg), 0 0 0 5.5px var(--ink); }
/* dark mode: gold looks just like navy there, so only navy is offered (and shows as chosen for gold) */
:root[data-theme="dark"] .swatches [data-swatch="#9a7128"] { display: none; }
:root[data-theme="dark"][data-pick="gold"] .swatches [data-swatch="#1e2a4f"] { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), inset 0 -1px 1px rgba(0, 0, 0, .3), 0 0 0 1.5px #c9a04a, 0 0 0 3.5px var(--bg), 0 0 0 5.5px var(--ink); }

/* where to read the day's text */
.sources { display: flex; flex-direction: column; gap: 10px; margin: 6px 0; }
.source { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border-radius: var(--r-md);
  background: var(--surface); box-shadow: var(--shadow); color: var(--ink); text-decoration: none; }
a.source::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none; background: var(--foil);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
a.source:hover { box-shadow: var(--shadow), 0 0 0 1.5px var(--accent); }
.source-name { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.source-name [lang="he"] { font-size: 1.1rem; color: var(--muted); }
.source-go { display: inline-flex; align-items: center; gap: 6px; color: var(--accent); font-weight: 600; }
.source-go svg { width: 18px; height: 18px; }
.source.soon { opacity: .55; filter: grayscale(.6); }
.source-more { text-align: center; }
.lesson .btn.ext svg { width: 18px; height: 18px; }
.source.shiur .source-name { flex-direction: column; align-items: flex-start; gap: 2px; }
.source.shiur small { color: var(--muted); font-size: .84rem; }

/* finished days shine in gold foil, not green */
.cal-grid button.done, .k-done, .btn.ticked { background: var(--foil); box-shadow: var(--foil-edge); color: #3b2a0b; }
.week .all-done i { background: var(--foil); }

/* the top of a card (name, day count, progress) opens the sefer's page */
.lesson-top { cursor: pointer; margin: -6px -8px 0; padding: 6px 8px 2px; border-radius: var(--r-md); transition: background-color .15s; }
.lesson-top:hover { background: color-mix(in srgb, var(--accent) 6%, transparent); }
.lesson-top:active { background: color-mix(in srgb, var(--accent) 10%, transparent); }


/* ---- calendar days as soft rounded tiles (Hudi chose B1, 10-09) ---- */
.cal-grid { gap: 5px; }
.cal-grid button { border-radius: 12px; aspect-ratio: 1 / 1.05; }
.cal-grid button.plan { box-shadow: none; background: color-mix(in srgb, var(--accent) 9%, var(--surface)); }
.cal-grid button.done { border-radius: 12px; box-shadow: none; }
.cal-grid button.off, .cal-grid button.none { background: none; }
.cal-grid button.today { box-shadow: inset 0 0 0 1.5px var(--accent); }
.cal-grid button.today::after { display: none; }
.cal-key i { border-radius: 3px; }
.cal-key .k-plan { box-shadow: none; background: color-mix(in srgb, var(--accent) 22%, var(--surface)); }
/* room between the dedication box and the buttons under it (Hudi, 10-09) */
#reviewPlan, #sharePlan { margin-top: 24px; }
#reviewPlan:not([hidden]) + #sharePlan { margin-top: 12px; }
#shareBox { margin-top: 12px; }
.soon .two .btn { white-space: nowrap; padding-inline: 10px; }

/* ---- text people read is never faint: at least 4.5:1 (audit 10-11); faint stays for decoration and days off ---- */
.cal-grid .dow, .week button small.hd, .cal-grid button small.hd, .save-state, .day-list li.off .t { color: var(--muted); }
.cal-grid button.off small.hd, .cal-grid button.none small.hd { color: inherit; }

/* ---- fits a 320px phone and large text: grid tracks may shrink, the day list is the roomy alternative (audit 10-11) ---- */
.cal-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.cal-grid > *, .week > * { min-width: 0; }
.cal-grid button { aspect-ratio: auto; min-height: 44px; }
@media (max-width: 360px) {
  .calendar { padding-inline: 8px; }
  .cal-grid { gap: 3px; }
}
.row-link, .setting-row, .lesson-head, .lesson-top { min-width: 0; }
.row-link > *, .setting-row > *, .lesson-head > * { min-width: 0; overflow-wrap: anywhere; }
.pill, .badge { white-space: normal; }

/* ---- every control at least 44px to tap (audit 10-11) ---- */
.icon-btn, .icon-btn.gear { min-width: 44px; min-height: 44px; }
.notes-btn, .chips-scroll button, .lesson-open { min-height: 44px; }
.save-state { display: flex; align-items: center; min-height: 44px; margin: -12px 0 -2px; }
.soon-head { flex-wrap: wrap; }
.soon-head > b { min-width: 0; }
.switch-row { flex-wrap: wrap; }
.switch-row > span { min-width: 0; flex: 1 1 8em; }
.soon-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.soon-stats > * { min-width: 0; overflow-wrap: anywhere; hyphens: auto; }
.week button { overflow: hidden; overflow-wrap: anywhere; line-height: 1.1; }
@media (max-width: 360px) { .week button { font-size: .6rem; letter-spacing: -.02em; } }

/* the sefarim list scrolls inside its frame, so the frame's gold edge stays put (Hudi, 10-11) */
.wiz-frame { overflow: visible; }
#wizList { border-radius: inherit; overscroll-behavior: auto; }

/* the Add a sefer bar: the page's own color, nothing showing through, a foil rule under it (Hudi, 10-11) */
.wiz-bar { background: var(--bg); backdrop-filter: none; -webkit-backdrop-filter: none; }
/* a round-edged bar with a foil ring, like the panels (Hudi, 10-11); nothing drawn above it, so no box sticks out of the ring */
.wiz-bar { top: 6px; margin: -6px -4px 10px; border-radius: var(--r-lg); box-shadow: var(--shadow); }
.wiz-bar::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: var(--foil); opacity: .85;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }

/* the sign-in logo: the round ש at full size (no square tile), and the name under it as wide as the buttons (Hudi, 10-11) */
.gate .logo-icon { width: 168px; height: 168px; border-radius: 50%; clip-path: circle(47.5%); box-shadow: none; margin: 4px 0 0; }
.gate-box { container-type: inline-size; }
.gate #gateTitle { font-size: 36.2cqw; line-height: 1.1; margin: -4px 0 0; }
.gate { align-items: flex-start; } .gate-box { margin-block: auto; }  /* centered, but a tall sign-in box scrolls from its top instead of being cut off */

/* the week line slides left and right, a day at a time, seven days in view (Hudi, 10-11) */
.week { display: grid; grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: calc((100% - 24px) / 7);
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0 -6px 6px; padding: 2px 0 6px; }
.week::-webkit-scrollbar { display: none; }
.week button { scroll-snap-align: start; }

/* the first-time page (Hudi, 10-11): over the sign-in screen, shown once; the pasuk, why, three steps, and "Learn more" */
#intro { z-index: 21; }
.intro .intro-logo { width: 72px; height: 72px; border-radius: 50%; }
.intro h1 { margin: 4px 0 0; line-height: 1.15; }
.intro-pasuk { font-family: var(--book); font-size: 1.6rem; line-height: 1.4; margin: 0; color: var(--pasuk); }
.intro-source { margin: -8px 0 0; }
.intro-body { color: var(--muted); margin: 0; }
.intro-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.intro-steps .panel { padding: 14px 8px; display: grid; gap: 8px; justify-items: center; align-content: start; font-size: .9rem; line-height: 1.3; }
.intro-steps svg { width: 30px; height: 30px; fill: none; stroke: var(--accent); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.intro-why { text-align: start; }
.intro-why h1 { text-align: center; }
.intro-why p { margin: 0; line-height: 1.6; }

/* the kvius box above Today (Hudi, 10-11): small, Hebrew, the source under it */
.kvius { display: block; width: 100%; text-align: center; padding: 8px 14px; margin: 0 0 10px; font: inherit; color: inherit; cursor: pointer; }
.kvius[hidden] { display: none; }
.kvius-text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; font-family: var(--book); font-size: .98rem; line-height: 1.5; }
.kvius.open .kvius-text { -webkit-line-clamp: unset; display: block; }
.kvius-src { display: block; margin-top: 2px; color: var(--muted); font-size: .78rem; }

/* the Terms of Use and privacy pages, inside the app and as pages of their own */
.note:empty { display: none; }
.gate-legal { font-size: .85rem; color: var(--muted); margin: 0; }
.gate-legal a, .legal-links a { color: inherit; }
.legal-page { min-height: 100vh; }
.legal-main { max-width: 680px; margin: 0 auto; padding: 16px; }
.legal-main .view { display: block; }
.legal-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.legal-top .brand { display: flex; align-items: center; gap: 8px; text-decoration: none; }
.legal-langs button { background: none; border: 0; padding: 4px; color: var(--accent); font: inherit; cursor: pointer; }