/* ===========================================================================
   Design comparison — three directions over one real month.

   Every visual decision below is traceable to the printed luach
   (docs/!!_NEW kalendar_5784_2024_8.pdf) or is a deliberate departure from it.
   Themes are pure token swaps: same markup, same data, three languages.

     a  נאמן לדפוס  — reproduce the printed page
     b  מודרני      — what this content looks like as a 2026 web product
     c  גשר         — the print's colour semantics, modern craft

   Two independent switches on top of the theme:
     [data-week]  rtl | ltr      — week direction (the grid only; the page
                                   itself is ltr, because it is Russian)
     [data-mono]  0 | 1          — colour or black & white (also the print path)
   =========================================================================== */

:root {
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px;
  --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px;
  --ff-ru-serif: 'PT Serif', Georgia, serif;
  --ff-ru-sans:  'PT Sans', system-ui, sans-serif;
  --ff-he:       'Frank Ruhl Libre', 'PT Serif', serif;
  --ff-ui:       'Heebo', system-ui, sans-serif;
}

/* ─────────────────────────── theme a — נאמן לדפוס ─────────────────────── */
[data-theme="a"] {
  --page-bg:   #e8d9b8;
  --page-tex:  repeating-linear-gradient(90deg, rgba(150,120,70,.05) 0 2px, transparent 2px 5px);
  --sheet-bg:  #fdfbf4;
  --ink:       #1a1a1a;
  --ink-soft:  #4a4a4a;
  --hairline:  #9a9a9a;
  --band:      #12a17f;
  --band-ink:  #ffffff;
  --heb:       #1f7ec4;
  --heb-box:   #ffffff;
  --greg:      #14213d;
  --shabbat:   #f6cfc9;
  --special:   #fdf3c4;
  --accent:    #c8102e;
  --note:      #0f7a3d;
  --cell-min:  124px;
  --radius:    4px;
  --ff-body:   var(--ff-ru-serif);
  --cell-gap:  0px;
  --sheet-pad: var(--space-4);
  --shadow:    none;
}

/* ──────────────────────────── theme b — מודרני ────────────────────────── */
[data-theme="b"] {
  --page-bg:   #f4f5f7;
  --page-tex:  none;
  --sheet-bg:  #ffffff;
  --ink:       #16191d;
  --ink-soft:  #6b7280;
  --hairline:  #e5e7eb;
  --band:      #0f766e;
  --band-ink:  #ffffff;
  --heb:       #0f766e;
  --heb-box:   #f0fdfa;
  --greg:      #16191d;
  --shabbat:   #f6f7f9;
  --special:   #fff8ed;
  --accent:    #b4405a;
  --note:      #0f766e;
  --cell-min:  150px;
  --radius:    14px;
  --ff-body:   var(--ff-ui);
  --cell-gap:  8px;
  --sheet-pad: var(--space-6);
  --shadow:    0 1px 2px rgba(16,24,40,.05), 0 8px 24px rgba(16,24,40,.05);
}

/* ───────────────────────────── theme c — גשר ─────────────────────────── */
[data-theme="c"] {
  --page-bg:   #f2ede2;
  --page-tex:  none;
  --sheet-bg:  #fffdf8;
  --ink:       #1c1c1a;
  --ink-soft:  #5c5a54;
  --hairline:  #d9d2c4;
  --band:      #0e8f72;
  --band-ink:  #ffffff;
  --heb:       #1c68a8;
  --heb-box:   #ffffff;
  --greg:      #16233d;
  --shabbat:   #fbe3de;
  --special:   #fdf6d8;
  --accent:    #b21e35;
  --note:      #16794a;
  --cell-min:  138px;
  --radius:    8px;
  --ff-body:   var(--ff-ru-serif);
  --cell-gap:  3px;
  --sheet-pad: var(--space-5);
  --shadow:    0 2px 10px rgba(28,28,26,.06);
}

/* ───────────────────────── black & white override ─────────────────────── */
/* Not a CSS filter: greyscaling colour leaves indistinguishable mid-greys.
   Each role gets a value chosen for contrast, and fills become texture. */
[data-mono="1"] {
  --page-bg:  #ffffff;
  --page-tex: none;
  --sheet-bg: #ffffff;
  --ink:      #000000;
  --ink-soft: #4a4a4a;
  --hairline: #000000;
  --band:     #000000;
  --band-ink: #ffffff;
  --heb:      #000000;
  --heb-box:  #ffffff;
  --greg:     #000000;
  --shabbat:  #e6e6e6;
  --special:  #f2f2f2;
  --accent:   #000000;
  --note:     #3a3a3a;
  --shadow:   none;
}
[data-mono="1"] .cell--shabbat { background-image: repeating-linear-gradient(45deg, rgba(0,0,0,.05) 0 3px, transparent 3px 7px); }
[data-mono="1"] .prayer__item { font-weight: 700; }
[data-mono="1"] .parsha { font-style: italic; font-weight: 700; }
[data-mono="1"] .hebbox { border-width: 2px; }

/* ──────────────────────────────── chrome ──────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

/* Follows the theme. It used to be a fixed dark blue-black from the developer
   bar that no longer exists, so any area the sheet did not cover clashed. */
body { margin: 0; background: var(--page-bg); color: var(--ink); font-family: var(--ff-ui); }

.bar {
  position: sticky; top: 0; z-index: 30;
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: #1d2129; color: #e8eaed;
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.bar__toggle {
  display: none; align-items: center; gap: 6px;
  min-height: 38px; padding: 7px 13px;
  font: inherit; font-size: .82rem;
  color: #e8eaed; background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.18); border-radius: 999px; cursor: pointer;
}
.bar__toggle[aria-expanded="true"] .bar__chev { transform: rotate(180deg); }
.bar__chev { display: inline-block; transition: transform .16s ease; }
.bar__title { display: flex; align-items: baseline; gap: var(--space-2); }
.bar__title strong { font-size: 1.05rem; }
.bar__title span { font-size: .82rem; color: #9aa0a6; }
.bar__groups { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-inline-start: auto; }

.ctl { display: flex; align-items: center; gap: var(--space-2); }
.ctl__label { font-size: .76rem; color: #9aa0a6; white-space: nowrap; }
.seg { display: inline-flex; background: rgba(255,255,255,.08); border-radius: 999px; padding: 2px; }
.seg button {
  min-height: 36px; padding: 6px 13px;
  font: inherit; font-size: .82rem;
  color: #cbd0d6; background: transparent; border: 0; border-radius: 999px; cursor: pointer;
}
.seg button.is-on { background: #e8eaed; color: #1d2129; font-weight: 700; }
.seg button:focus-visible { outline: 2px solid #7cc4ff; outline-offset: 2px; }
#citySel {
  min-height: 36px; padding: 5px 10px;
  font: inherit; font-size: .82rem;
  color: #e8eaed; background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.18); border-radius: 8px;
}
#citySel option { color: #1d2129; }

.note {
  max-width: 1300px; margin: var(--space-4) auto 0; padding: 0 var(--space-4);
  font-size: .86rem; line-height: 1.6; color: #b8bec5;
}

/* ───────────────────────────────── page ───────────────────────────────── */
.page {
  padding: var(--space-5) var(--space-4) var(--space-7);
  background: var(--page-bg); background-image: var(--page-tex);
  min-height: 60vh;
}
.sheet {
  max-width: 1300px; margin: 0 auto; padding: var(--sheet-pad);
  background: var(--sheet-bg);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  font-family: var(--ff-body);
}

.mhead {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4);
  margin: calc(var(--sheet-pad) * -1) calc(var(--sheet-pad) * -1) var(--space-4);
  padding: var(--space-4) var(--space-5);
  background: var(--band); color: var(--band-ink);
  border-radius: var(--radius) var(--radius) 0 0;
}
.mhead__month { margin: 0; font-size: clamp(1.4rem, 4vw, 2.6rem); font-weight: 700; }
.mhead__month .heb { font-family: var(--ff-he); margin-inline-start: .4em; opacity: .95; }
.mhead__range { margin: 0; font-family: var(--ff-ru-sans); font-size: .86rem; opacity: .9; }

/* minmax(0,...) rather than 1fr: a `1fr` track refuses to shrink below its
   content's min-content width, so on a phone the seven columns grew wider
   than the sheet and the last one hung off the page. */
.weekhead {
  display: grid; grid-template-columns: repeat(var(--cols, 7), minmax(0, 1fr));
  gap: var(--cell-gap); margin-bottom: var(--cell-gap);
}
.weekhead[hidden] { display: none !important; }
.weekhead__cell {
  display: flex; align-items: baseline; justify-content: space-between; gap: 6px;
  min-width: 0; padding: 7px 10px;
  font-family: var(--ff-ru-sans); font-size: .78rem; font-weight: 700;
  color: var(--ink-soft);
  border: 1px solid var(--hairline); border-radius: var(--radius);
  background: var(--sheet-bg);
}
/* Both languages, always. Hiding the Russian below 860px left a Russian
   calendar labelling its own columns only in Hebrew. */
.weekhead__ru { font-family: var(--ff-ru-sans); font-size: .74rem; color: var(--ink-soft); }
.weekhead__he { font-family: var(--ff-he); font-size: .85rem; color: var(--ink); }

.grid { display: grid; grid-template-columns: repeat(var(--cols, 7), minmax(0, 1fr)); gap: var(--cell-gap); }

/* Fewer columns means each square has real room, so the shorter views show the
   day's texts rather than a dot standing in for them. */
[data-view="day3"] .grid,
[data-view="day"] .grid { --cell-min: 260px; }
[data-view="day"] .cell,
[data-view="day3"] .cell { padding: var(--space-4); gap: var(--space-2); }
[data-view="day"] .cdate__line.is-lead .cdate__let,
[data-view="day"] .cdate__line.is-lead .cdate__gnum { font-size: 2rem; }
[data-view="day"] .holiday, [data-view="day3"] .holiday,
[data-view="day"] .parsha,  [data-view="day3"] .parsha { font-size: .9rem; }
[data-view="day"] .prayer__item, [data-view="day3"] .prayer__item { font-size: .78rem; }

/* The reader's week direction reorders the columns and nothing else: each
   cell states ltr again so its own contents — Russian, digits, times — read
   the way Russian reads. */
[data-week="rtl"] .grid, [data-week="rtl"] .weekhead { direction: rtl; }
.grid > *, .weekhead > * { direction: ltr; }
[data-theme="a"] .grid, [data-theme="a"] .weekhead { background: var(--hairline); gap: 1px; }
[data-theme="a"] .cell, [data-theme="a"] .weekhead__cell { border: 0; border-radius: 0; }

.cell {
  position: relative; display: flex; flex-direction: column; gap: 3px;
  min-height: var(--cell-min); min-width: 0; padding: 7px 9px;
  background: var(--sheet-bg);
  border: 1px solid var(--hairline); border-radius: var(--radius);
  text-align: start; font: inherit; color: inherit; cursor: pointer;
}
.cell:hover { outline: 2px solid var(--band); outline-offset: -2px; }
.cell:focus-visible { outline: 3px solid var(--band); outline-offset: -3px; z-index: 2; }
.cell--shabbat { background: var(--shabbat); }
.cell--special { background: var(--special); }
.cell--pad { background: transparent; border-color: transparent; cursor: default; }
.cell--pad:hover { outline: none; }

.cell__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 6px; }

/* ── the date block ───────────────────────────────────────────────────────
   Two lines, one above the other. Which one leads follows the reader's month
   breakdown, so the calendar they think in is always the large one and the
   other is always still there, quiet, underneath. */
.cdate { display: flex; flex-direction: column; gap: 0; min-width: 0; }
.cdate__line {
  display: flex; align-items: baseline; gap: 5px;
  min-width: 0; white-space: nowrap;
}
.cdate__line.is-lead   { font-weight: 700; }
.cdate__line.is-sub    { opacity: .72; font-size: .74rem; }

.cdate__let  { font-family: var(--ff-he); color: var(--heb); }
.cdate__hnum { font-family: var(--ff-ru-sans); color: var(--heb); font-variant-numeric: tabular-nums; }
.cdate__hmon { font-family: var(--ff-ru-sans); color: var(--heb); }
.cdate__gnum { color: var(--greg); font-variant-numeric: tabular-nums; }
.cdate__gmon { font-family: var(--ff-ru-sans); color: var(--greg); }

.cdate__line.is-lead .cdate__let  { font-size: 1.35rem; }
.cdate__line.is-lead .cdate__hnum { font-size: 1.05rem; }
.cdate__line.is-lead .cdate__gnum { font-size: 1.45rem; line-height: 1; }
.cdate__line.is-lead .cdate__gmon { font-size: .8rem; }

[data-theme="b"] .cdate__line.is-lead .cdate__let,
[data-theme="b"] .cdate__line.is-lead .cdate__gnum { font-size: 1.5rem; }

/* Kept for the day sheet, which still shows the Hebrew date in a box.
   Hebrew date: letters + Hebrew month on top, digits + Russian month beneath.
   The second line is deliberately quiet — present for anyone who cannot read
   gematria, without competing with the date itself. */
.hebbox {
  display: flex; flex-direction: column; align-items: flex-start; gap: 0;
  padding: 2px 8px 3px;
  background: var(--heb-box); color: var(--heb);
  border: 1px solid currentColor; border-radius: var(--radius);
  line-height: 1.05;
}
.hebbox__line { display: flex; align-items: baseline; gap: 4px; }
.hebbox__line--sub { opacity: .72; }
.hebbox__num    { font-family: var(--ff-he); font-size: 1.3rem; font-weight: 700; }
.hebbox__monhe  { font-family: var(--ff-he); font-size: .72rem; font-weight: 500; }
.hebbox__digits { font-family: var(--ff-ru-sans); font-size: .78rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.hebbox__monru  { font-family: var(--ff-ru-sans); font-size: .6rem; }
[data-theme="b"] .hebbox { border-width: 0; padding: 0; background: transparent; }
[data-theme="b"] .hebbox__num { font-size: 1.45rem; }

.greg { display: flex; align-items: center; gap: 3px; color: var(--greg); }
.greg__num { font-size: 1.45rem; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.greg__mon { font-family: var(--ff-ru-sans); font-size: .52rem; writing-mode: vertical-rl; opacity: .7; }

.holiday, .parsha, .weekhead__cell, .times-inline, .greg { min-width: 0; }
/* `anywhere` split words mid-syllable — "Раскаян/ия". `break-word` only
   breaks a word that genuinely cannot fit. */
.holiday, .parsha { overflow-wrap: break-word; }
.holiday { font-size: .76rem; font-weight: 700; color: var(--note); line-height: 1.25; }
.parsha  { font-size: .78rem; color: var(--accent); font-weight: 700; }
.omer    { font-family: var(--ff-ru-sans); font-size: .68rem; color: var(--ink-soft); }

.prayer { display: flex; flex-wrap: wrap; gap: 4px; }
.prayer__item {
  display: inline-flex; align-items: center; gap: 3px;
  font-family: var(--ff-ru-sans); font-size: .68rem; font-weight: 700;
  color: var(--accent);
}
[data-theme="b"] .prayer__item {
  padding: 2px 7px; border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}
.prayer__item .icon { width: 13px; height: 13px; }

.cell__foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 6px; padding-top: 4px; }
/* A day can carry a lighting or an exit, never both (see zmanim-builder.js) —
   but a wrap is still the honest layout: at phone width one time plus its icon
   already fills the square, and overflow used to make them overlap. */
.times-inline {
  font-family: var(--ff-ru-sans); font-size: .7rem; font-weight: 700; color: var(--ink);
  display: flex; flex-wrap: wrap; gap: 2px 7px; align-items: center;
  min-width: 0; line-height: 1.2;
}
.times-inline > span { white-space: nowrap; }
.times-inline .icon { width: 12px; height: 12px; color: var(--accent); }
.ushpizin { display: inline-flex; align-items: center; gap: 3px; font-size: .7rem; color: var(--ink-soft); }
.ushpizin .icon { width: 13px; height: 13px; }

.icon { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.slash { stroke-width: 2.1; }

.footnotes {
  margin-top: var(--space-3);
  font-family: var(--ff-ru-sans); font-size: .78rem; color: var(--greg);
  display: grid; gap: 2px;
}

/* ─────────────────────────── month customs ────────────────────────────
   Kept out of the grid, the way the printed calendar keeps them on their own
   page. Inside the squares they would drown the dates. */
.customs { margin-top: var(--space-5); }
.customs__title {
  margin: 0 0 var(--space-3); padding-bottom: var(--space-2);
  font-size: 1.1rem; color: var(--greg);
  border-bottom: 2px solid var(--band);
}
.customs__list { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-2); }
.customs__item {
  display: flex; gap: var(--space-3); align-items: flex-start;
  width: 100%; padding: var(--space-3); text-align: start;
  background: color-mix(in srgb, var(--shabbat) 35%, transparent);
  border: 1px solid var(--hairline); border-radius: var(--radius);
  font: inherit; color: inherit; cursor: pointer;
}
.customs__item:hover { border-color: var(--band); }
.customs__item .icon { width: 20px; height: 20px; flex: 0 0 auto; color: var(--accent); }
.customs__name { font-weight: 700; }
.customs__hint { font-family: var(--ff-ru-sans); font-size: .8rem; color: var(--ink-soft); }

/* ─────────────────────────────── legend ──────────────────────────────── */
.legend { margin-top: var(--space-5); }
.legend__title {
  margin: 0 0 var(--space-2);
  font-family: var(--ff-ru-sans); font-size: .82rem; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase; color: var(--ink-soft);
}
.legend__list { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.legend__item {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px;
  font-family: var(--ff-ru-sans); font-size: .78rem;
  background: var(--sheet-bg); border: 1px solid var(--hairline); border-radius: 999px;
}
.legend__item .icon { width: 16px; height: 16px; color: var(--accent); }

/* ─────────────────────── candle-lighting table ───────────────────────── */
.times { margin-top: var(--space-5); }
.times__title {
  margin: 0 0 var(--space-2);
  font-family: var(--ff-ru-sans); font-size: .84rem; font-weight: 700; letter-spacing: .04em;
  color: var(--accent); text-transform: uppercase;
}
.times__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.times__table { width: 100%; border-collapse: collapse; font-family: var(--ff-ru-sans); font-size: .72rem; }
/* Nothing bleeds from one column into the next.
   A table cell has no `overflow` of its own to speak of, so a long parasha
   name simply pushed the column wider and shoved the times sideways. Fixing
   the column widths and clipping inside each cell is the only arrangement that
   holds at every width; the wrapper already scrolls horizontally when the full
   set of cities cannot fit. */
.times__table { table-layout: auto; }
.times__table th, .times__table td {
  overflow: hidden;
  text-overflow: ellipsis;
}
.times__table td.light, .times__table td.exit,
.times__table th.dcol, .times__table td.dcol {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.times__table .occ {
  max-width: 15rem;
  white-space: nowrap;
}
.times__table th, .times__table td {
  border: 1px solid var(--hairline); padding: 3px 6px; text-align: center; white-space: nowrap;
}
.times__table thead th { background: var(--shabbat); font-weight: 700; }
.times__table .city { line-height: 1.15; }
.times__table .city small { display: block; font-weight: 400; opacity: .7; font-size: .62rem; }
.times__table td.light { color: var(--greg); }
.times__table td.exit  { color: var(--accent); }
.times__table th.is-city-selected,
.times__table td.is-city-selected { background: color-mix(in srgb, var(--band) 14%, transparent); font-weight: 700; }
.times__foot {
  margin: var(--space-2) 0 0; font-family: var(--ff-ru-sans); font-size: .7rem;
  color: var(--ink-soft); display: flex; flex-wrap: wrap; gap: 4px var(--space-3);
}
.times__flagnote { display: inline-flex; gap: 5px; align-items: baseline; }
.times__flagnote b { color: var(--accent); }

/* ────────────────────────────── day sheet ────────────────────────────── */
.dsheet { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; }
.dsheet[hidden] { display: none !important; }
.dsheet__scrim { position: absolute; inset: 0; background: rgba(12,14,18,.55); backdrop-filter: blur(3px); }
.dsheet__panel {
  position: relative; z-index: 1;
  width: min(620px, calc(100% - 24px)); max-height: min(88vh, 860px); overflow-y: auto;
  padding: var(--space-5);
  background: var(--sheet-bg); color: var(--ink);
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(0,0,0,.35);
  font-family: var(--ff-body);
  animation: rise .2s cubic-bezier(.2,.8,.3,1);
}
@keyframes rise { from { opacity: 0; transform: translateY(12px); } }
@media (prefers-reduced-motion: reduce) { .dsheet__panel { animation: none; } }
.dsheet__grab { display: none; }
.dsheet__close {
  position: absolute; inset-block-start: 10px; inset-inline-end: 10px;
  width: 44px; height: 44px; display: grid; place-items: center;
  font-size: 1.1rem; color: var(--ink-soft);
  background: none; border: 0; border-radius: 50%; cursor: pointer;
}
.dsheet__close:hover { background: var(--shabbat); color: var(--ink); }
.dsheet__head { padding-bottom: var(--space-3); border-bottom: 2px solid var(--band); padding-inline-end: 44px; }
.dsheet__eyebrow { margin: 0; font-family: var(--ff-ru-sans); font-size: .76rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }
.dsheet__title { margin: 2px 0 0; font-size: 1.5rem; }
.dsheet__sub { margin: 2px 0 0; font-family: var(--ff-he); font-size: 1.1rem; color: var(--heb); }
.dsheet__body { padding-top: var(--space-3); display: grid; gap: var(--space-3); }

.drow { display: flex; gap: var(--space-3); align-items: flex-start; }
.drow .icon { width: 20px; height: 20px; flex: 0 0 auto; margin-top: 2px; color: var(--accent); }
.drow__label { font-family: var(--ff-ru-sans); font-size: .74rem; color: var(--ink-soft); }
.drow__value { font-size: .96rem; line-height: 1.5; white-space: pre-wrap; }
.dpill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; margin: 0 4px 4px 0;
  font-family: var(--ff-ru-sans); font-size: .78rem; font-weight: 700;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent); border-radius: 999px;
}
.dpill .icon { width: 15px; height: 15px; margin: 0; }
.dempty { font-family: var(--ff-ru-sans); font-size: .88rem; color: var(--ink-soft); }

/* ───────────────────────────── responsive ────────────────────────────
   One progression, not competing rules. The grid stays seven columns at every
   width; what changes is how much a square is asked to hold. Anything that
   stops fitting moves into the day sheet, one tap away. */

@media (max-width: 1100px) {
  .sheet { padding: var(--space-4); }
  .mhead { margin: calc(var(--space-4) * -1) calc(var(--space-4) * -1) var(--space-3); padding: var(--space-3); }
  :root { --cell-min: 112px; }
}

@media (max-width: 860px) {
  /* Settings and pickers stack; the brand stays on its own line. */
  .top { padding: var(--space-2) var(--space-3); }
  .top__inner { gap: var(--space-2); }
  .top__name { font-size: 1.05rem; }
  .top__kicker { font-size: .62rem; }
  /* Two selects and two buttons do not fit one nowrap line at 360px. Left to
     overflow, the document became wider than the viewport — which clipped
     "Вид" and put a band of page background beside the sheet. */
  .top__actions { width: 100%; flex-wrap: wrap; justify-content: stretch; gap: 6px; }
  .pick__label { display: none; }
  .pick { flex: 1 1 40%; min-width: 0; }
  .pick select { flex: 1 1 0; width: 100%; min-width: 0; }
  .gear { flex: 1 1 40%; min-width: 0; justify-content: center; }
  .prefs__row { flex-direction: column; align-items: stretch; gap: 6px; }
  .prefs .seg { justify-content: stretch; }
  .prefs .seg button { flex: 1 1 0; }

  /* Month header keeps its shape — arrows flank the title at every width. */
  .mhead { flex-direction: row; align-items: center; gap: var(--space-2); }
  .mhead__month { font-size: 1.25rem; }
  .mhead__range { font-size: .74rem; }

  :root { --cell-min: 92px; }
  .cell { padding: 5px 5px 6px; gap: 2px; }
  .cdate__line.is-lead .cdate__let  { font-size: 1.05rem; }
  .cdate__line.is-lead .cdate__hnum { font-size: .88rem; }
  .cdate__line.is-lead .cdate__gnum { font-size: 1.12rem; }
  .cdate__line.is-lead .cdate__gmon { font-size: .66rem; }
  .cdate__line.is-sub { font-size: .62rem; }

  /* A 60px-wide square cannot hold prose; the sheet carries it. */
  /* מרדכי, 23.08.2026: "לא להוריד ומצד שני שיהיה ברור לעין". These used to be
     hidden below 860px, which is exactly the width most readers are on. They
     shrink instead, and wrap rather than overflow. */
  .holiday { font-size: .6rem; line-height: 1.2; }
  .parsha  { font-size: .6rem; line-height: 1.2; }
  .omer    { font-size: .56rem; }
  .ushpizin { font-size: .56rem; }
  .ushpizin .icon { width: 10px; height: 10px; }

  .prayer { gap: 2px; }
  .prayer__item { padding: 0; font-size: 0; background: none; }
  .prayer__item .icon { width: 14px; height: 14px; }

  .weekhead__cell { flex-direction: column; align-items: center; gap: 0; padding: 4px 2px; }
  .weekhead__ru { font-size: .6rem; line-height: 1.15; }
  .weekhead__he { font-size: .7rem; line-height: 1.2; }

  .mbtn { flex: 1 1 100%; justify-content: center; }
}

@media (max-width: 560px) {
  .page { padding: var(--space-2) var(--space-2) var(--space-6); }
  .sheet { padding: var(--space-2); border-radius: 0; }
  .mhead {
    margin: calc(var(--space-2) * -1) calc(var(--space-2) * -1) var(--space-2);
    padding: var(--space-2);
  }
  .mhead__month { font-size: 1.05rem; }
  .mnav { width: 38px; height: 38px; font-size: 1.25rem; }

  /* A cell is ~47px wide on a 360px phone. Everything in it is centred and
     stacked; nothing is dropped. */
  :root { --cell-min: 84px; }
  .cell { padding: 4px 2px 5px; gap: 1px; align-items: center; text-align: center; }
  .cdate { align-items: center; width: 100%; }
  .cdate__line { justify-content: center; gap: 3px; }
  .cdate__line.is-lead .cdate__let  { font-size: .95rem; }
  .cdate__line.is-lead .cdate__hnum { font-size: .8rem; }
  .cdate__line.is-lead .cdate__gnum { font-size: 1.02rem; line-height: 1.1; }
  .cdate__line.is-lead .cdate__gmon { display: none; }
  .cdate__line.is-sub { font-size: .58rem; }
  .cdate__line.is-sub .cdate__hmon { display: none; }

  .holiday, .parsha { font-size: .54rem; white-space: normal; }
  .omer, .ushpizin { display: none; }
  .prayer { justify-content: center; gap: 2px; }
  .prayer__item .icon { width: 12px; height: 12px; }
  .edots { justify-content: center; gap: 2px; margin-top: 1px; }
  .edot { width: 5px; height: 5px; }

  /* The candle time is the most-read number on the page — keep it, bare. */
  .cell__foot { display: flex; justify-content: center; padding-top: 1px; }
  .times-inline { font-size: .6rem; gap: 1px 4px; }
  .times-inline .icon { display: none; }

  /* Bottom sheet: reachable with a thumb. */
  .dsheet { place-items: end center; }
  .dsheet__panel {
    width: 100%; max-height: 88vh;
    border-radius: 18px 18px 0 0;
    padding: var(--space-3) var(--space-4) calc(var(--space-5) + env(safe-area-inset-bottom));
    animation: slideup .22s cubic-bezier(.2,.8,.3,1);
  }
  @keyframes slideup { from { transform: translateY(100%); } }
  .dsheet__grab { display: block; width: 42px; height: 4px; margin: 0 auto var(--space-2); background: var(--hairline); border-radius: 999px; }
  .dsheet__close { inset-block-start: 4px; }
  .dsheet__title { font-size: 1.25rem; }

  /* Twelve cities do not fit; show the chosen one. */
  /* On a phone only the chosen city's two columns survive — plus the date and
     the occasion, which are what make a row readable at all. */
  .times__table th:not(.is-city-selected):not(.occ):not(.dcol),
  .times__table td:not(.is-city-selected):not(.occ):not(.dcol) { display: none; }
  .times__table .occ { font-size: .64rem; max-width: 40vw; }
  /* The footnote names the city itself now — this used to append a second,
     near-identical sentence beside it. */
}

@media (max-width: 380px) {
  :root { --cell-min: 76px; }
  .page { padding-inline: 2px; }
  .sheet { padding-inline: 2px; }
  .cdate__line.is-lead .cdate__gnum { font-size: .92rem; }
  .cdate__line.is-lead .cdate__let  { font-size: .84rem; }
  .cdate__line.is-lead .cdate__hnum { font-size: .7rem; }
  .holiday, .parsha { font-size: .5rem; }
  .prayer__item .icon { width: 11px; height: 11px; }
  .times-inline { font-size: .55rem; }
  .mstrip__btn { padding: 5px 9px; font-size: .74rem; }
  .weekhead__he { font-size: .68rem; }
}

@media print {
  /* Controls are not part of what is being printed. [data-noprint] carries the
     rule, so a control added later is excluded without editing this block. */
  .bar, .note, .dsheet, [data-noprint] { display: none !important; }
  body, .page { background: #fff; }
  .sheet { box-shadow: none; max-width: none; padding: 0; }
  .cell { break-inside: avoid; }
  /* Whose calendar this is belongs on the paper too. */
  .sitefoot { break-inside: avoid; border-top: 1px solid #ccc; }
  .sitefoot__link a { color: #000; text-decoration: none; }
}

/* ───────────────────────── share, print, footer ──────────────────────── */
.pageacts {
  display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3);
  max-width: 1300px; margin: var(--space-5) auto 0; padding: 0 var(--space-4);
}
.pageact {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 10px 20px;
  font: inherit; font-size: .88rem; font-family: var(--ff-ui);
  color: var(--ink); background: var(--sheet-bg);
  border: 1px solid var(--hairline); border-radius: 999px; cursor: pointer;
}
.pageact:hover { background: color-mix(in srgb, var(--band) 8%, var(--sheet-bg)); }
.pageact:focus-visible { outline: 2px solid var(--band); outline-offset: 2px; }

.sitefoot {
  max-width: 1300px; margin: var(--space-6) auto 0;
  padding: var(--space-5) var(--space-4);
  text-align: center; font-family: var(--ff-ui);
}
/* The seal is circular on a cream field. Clipping to a circle removes the
   file's square corners, which would otherwise show as a pale box on the
   white themes. */
.sitefoot__logo { width: 96px; height: 96px; object-fit: contain; border-radius: 50%; }
.sitefoot__org {
  margin: var(--space-3) 0 2px; font-size: .84rem; font-weight: 700;
  letter-spacing: .04em; color: var(--ink-soft);
}
.sitefoot__link { margin: 0; font-size: .95rem; }
.sitefoot__link a { color: var(--band); text-decoration: none; font-weight: 700; }
.sitefoot__link a:hover { text-decoration: underline; }

/* ─────────────────────── public masthead & preferences ────────────────
   The theme switch is a reader preference now, not a review tool, so it lives
   behind a normal settings control and its choice is remembered. */
.top {
  background: var(--band); color: var(--band-ink);
  padding: var(--space-3) var(--space-4);
}
.top__inner {
  max-width: 1300px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  flex-wrap: wrap;
}
.top__kicker { margin: 0; font-family: var(--ff-ru-sans); font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; opacity: .78; }
.top__name { margin: 0; font-family: var(--ff-body); font-size: 1.25rem; font-weight: 700; }
.top__actions { display: flex; align-items: center; gap: var(--space-3); }

.citypick { display: flex; align-items: center; gap: 7px; }
.citypick__label { font-family: var(--ff-ru-sans); font-size: .72rem; opacity: .8; }
#citySel {
  min-height: 38px; padding: 6px 10px;
  font: inherit; font-size: .82rem;
  color: inherit; background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.28); border-radius: 8px;
}
#citySel option { color: #14213d; }

.gear {
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 38px; padding: 7px 14px;
  font: inherit; font-size: .82rem;
  color: inherit; background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.28); border-radius: 999px; cursor: pointer;
}
.gear:hover { background: rgba(255,255,255,.22); }
.gear .icon { width: 17px; height: 17px; }

.prefs {
  max-width: 1300px; margin: var(--space-3) auto 0;
  padding: var(--space-3) var(--space-4);
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.22); border-radius: 12px;
  display: grid; gap: var(--space-3);
}
.prefs__row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.prefs__label { font-family: var(--ff-ru-sans); font-size: .8rem; opacity: .9; }
.prefs__note { margin: 0; font-family: var(--ff-ru-sans); font-size: .76rem; opacity: .8; line-height: 1.5; }
.prefs .seg { background: rgba(0,0,0,.18); }
.prefs .seg button { color: rgba(255,255,255,.82); }
.prefs .seg button.is-on { background: #fff; color: var(--band); }

/* ───────────────────────── day sheet — two depths ────────────────────── */
.dtabs { display: flex; gap: 4px; margin-top: var(--space-3); border-bottom: 1px solid var(--hairline); }
.dtab {
  min-height: 40px; padding: 8px 16px;
  font: inherit; font-family: var(--ff-ru-sans); font-size: .86rem;
  color: var(--ink-soft); background: none;
  border: 0; border-bottom: 2px solid transparent; cursor: pointer;
}
.dtab.is-on { color: var(--band); border-bottom-color: var(--band); font-weight: 700; }
.dtab:focus-visible { outline: 2px solid var(--band); outline-offset: -2px; }

@media (max-width: 860px) {
  .top__inner { gap: var(--space-2); }
  .top__name { font-size: 1.05rem; }
  .citypick__label { display: none; }
  .prefs__row { flex-direction: column; align-items: stretch; gap: 6px; }
  .prefs .seg { justify-content: stretch; }
  .prefs .seg button { flex: 1 1 0; }
}

/* ──────────────────── month navigation, buttons, panel ────────────────── */
.mhead__center { flex: 1 1 auto; text-align: center; }
.mnav {
  flex: 0 0 auto;
  width: 44px; height: 44px; display: grid; place-items: center;
  font-size: 1.5rem; line-height: 1;
  color: inherit; background: rgba(255,255,255,.16);
  border: 1px solid rgba(255,255,255,.3); border-radius: 50%; cursor: pointer;
}
.mnav:hover { background: rgba(255,255,255,.26); }
.mnav:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

.mstrip {
  display: flex; gap: 3px; overflow-x: auto; -webkit-overflow-scrolling: touch;
  padding: var(--space-2) 0; margin-bottom: var(--space-2);
  border-bottom: 1px solid var(--hairline);
  scrollbar-width: thin;
}
.mstrip__btn {
  flex: 0 0 auto;
  min-height: 34px; padding: 5px 11px;
  font-family: var(--ff-ru-sans); font-size: .8rem;
  color: var(--ink-soft); background: transparent;
  border: 1px solid transparent; border-radius: 999px; cursor: pointer;
  white-space: nowrap;
}
.mstrip__btn:hover { background: var(--shabbat); color: var(--ink); }
.mstrip__btn[aria-selected="true"] { background: var(--band); color: var(--band-ink); font-weight: 700; }
.mstrip__btn--empty { opacity: .5; }
.mstrip__btn--empty::after { content: ' ·'; }

/* Entry dots — how much a day carries, without trying to show any of it. */
.edots { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 2px; }
.edot { width: 6px; height: 6px; border-radius: 50%; background: var(--cat, var(--ink-soft)); }
.edot--date    { --cat: var(--greg); }
.edot--halacha { --cat: var(--accent); }
.edot--minhag  { --cat: var(--brass, #96742c); }
.edot--tefila  { --cat: #4a3b6b; }
.edot--candles { --cat: #b0632a; }
.edot--kiddush { --cat: #6b2f4a; }
.edot--other   { --cat: var(--ink-soft); }
[data-mono="1"] .edot { background: #000; }

.mbtns { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-4); }
.mbtn {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 9px 16px;
  font-family: var(--ff-ru-sans); font-size: .88rem;
  color: var(--ink); background: var(--sheet-bg);
  border: 1px solid var(--hairline); border-radius: 999px; cursor: pointer;
}
.mbtn:hover:not([disabled]) { border-color: var(--band); }
.mbtn.is-on { background: var(--band); color: var(--band-ink); border-color: var(--band); }
.mbtn[disabled] { opacity: .45; cursor: default; }
.mbtn .icon { width: 18px; height: 18px; }
.mbtn__count {
  min-width: 22px; padding: 1px 7px;
  font-size: .74rem; font-weight: 700; text-align: center;
  background: color-mix(in srgb, currentColor 16%, transparent); border-radius: 999px;
}

.mpanel { margin-top: var(--space-3); }
.mpanel[hidden] { display: none !important; }
.mlist { display: grid; gap: var(--space-3); }
.mitem {
  padding: var(--space-4);
  background: var(--sheet-bg);
  border: 1px solid var(--hairline);
  border-inline-start: 3px solid var(--band);
  border-radius: var(--radius);
}
.mitem__head { display: flex; align-items: baseline; gap: var(--space-2); flex-wrap: wrap; margin-bottom: 6px; }
.mitem__head .icon { width: 18px; height: 18px; color: var(--accent); align-self: center; }
.mitem__date {
  font-family: var(--ff-ru-sans); font-size: .74rem; font-weight: 700;
  padding: 2px 9px; background: var(--shabbat); border-radius: 999px; color: var(--greg);
}
.mitem__title { margin: 0; font-size: 1rem; }
.mitem__text { margin: 0; white-space: pre-wrap; line-height: 1.7; }
.mitem__src { margin: var(--space-2) 0 0; font-family: var(--ff-ru-sans); font-size: .74rem; color: var(--ink-soft); }

/* full texts inside the day sheet */
.dentry { padding: var(--space-3) 0; border-bottom: 1px solid var(--hairline); }
.dentry:last-child { border-bottom: 0; }
.dentry__head { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; margin-bottom: 6px; }
.dentry__head .icon { width: 18px; height: 18px; color: var(--accent); }
.dentry__title { margin: 0; font-size: 1rem; }
.dentry__cat {
  font-family: var(--ff-ru-sans); font-size: .7rem; padding: 2px 8px;
  background: var(--shabbat); border-radius: 999px; color: var(--ink-soft);
}
.dentry__text { margin: 0; white-space: pre-wrap; line-height: 1.7; font-size: .95rem; }
.txt-link { color: inherit; text-decoration: underline; text-decoration-style: dotted; text-underline-offset: .15em; word-break: break-all; }
.txt-link:hover, .txt-link:focus-visible { text-decoration-style: solid; }
.dentry__src { margin: var(--space-2) 0 0; font-family: var(--ff-ru-sans); font-size: .74rem; color: var(--ink-soft); }

.dtab__count {
  display: inline-block; min-width: 20px; padding: 0 6px; margin-inline-start: 4px;
  font-size: .72rem; font-weight: 700;
  background: color-mix(in srgb, currentColor 18%, transparent); border-radius: 999px;
}
.dtab__count:empty { display: none; }

.pick { display: flex; align-items: center; gap: 6px; }
.pick__label { font-family: var(--ff-ru-sans); font-size: .72rem; opacity: .8; }
.pick select {
  min-height: 38px; padding: 6px 10px;
  font: inherit; font-size: .82rem;
  color: inherit; background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.28); border-radius: 8px;
}
.pick select option { color: #14213d; }

@media (max-width: 860px) {
  .mhead { flex-direction: row; align-items: center; }
  .mhead__center { text-align: center; }
  .pick__label { display: none; }
  .mbtn { flex: 1 1 100%; justify-content: center; }
}


/* ═════════════════════════ зманим — the day's halachic times ═══════════════
   Definitions live in zmanim-config.js and are editable in the workspace, so
   this only has to render whatever it is handed: one time, or two opinions
   side by side, plus whatever the row still needs reviewed.
   ═════════════════════════════════════════════════════════════════════════ */
.zcity {
  margin: 0 0 var(--space-2);
  font-family: var(--ff-ru-sans); font-size: .78rem; color: var(--ink-soft);
}
.ztable { width: 100%; border-collapse: collapse; }
.zrow > td { padding: 7px 0; border-bottom: 1px solid var(--hairline); vertical-align: baseline; }
.zrow:last-child > td { border-bottom: 0; }
.zrow--key .zrow__title { font-weight: 700; }
.zrow--key > td { background: color-mix(in srgb, var(--band) 5%, transparent); }

.zrow__name { padding-inline-end: var(--space-3); }
.zrow__title { font-size: .92rem; }
.zrow__note {
  display: block; margin-top: 2px;
  font-family: var(--ff-ru-sans); font-size: .7rem; line-height: 1.45; color: var(--ink-soft);
}
.zrow__times { text-align: end; white-space: nowrap; }

.ztime { display: inline-flex; flex-direction: column; align-items: flex-end; margin-inline-start: var(--space-4); }
.ztime b {
  font-family: var(--ff-ru-sans); font-size: 1.05rem; font-weight: 700;
  font-variant-numeric: tabular-nums; color: var(--greg);
}
.ztime__who { font-family: var(--ff-ru-sans); font-size: .64rem; color: var(--ink-soft); }

/* An unsettled definition says so where the time is, not in a footnote. */
.zflag {
  display: inline-block; margin-inline-start: 6px; padding: 1px 7px;
  font-family: var(--ff-ru-sans); font-size: .62rem; font-weight: 700;
  color: var(--ink-soft); background: var(--special); border-radius: 999px;
  vertical-align: middle;
}
.zflag--warn { color: #fff; background: var(--accent); }
.znote {
  margin: var(--space-2) 0 0;
  font-family: var(--ff-ru-sans); font-size: .72rem; line-height: 1.5; color: var(--ink-soft);
}
.znote--pending { padding-top: var(--space-2); border-top: 1px solid var(--hairline); }

/* ══════════════════════════ go to a date ═══════════════════════════════════
   Two ways in, because a reader thinking "14 нисана" and a reader thinking
   "2 апреля" are looking for the same square.
   ═════════════════════════════════════════════════════════════════════════ */
.datego {
  max-width: 1300px; margin: var(--space-3) auto 0;
  padding: var(--space-3) var(--space-4);
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.22); border-radius: 12px;
  display: grid; gap: var(--space-3);
}
.datego[hidden] { display: none !important; }
.datego__form { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.datego__label {
  flex: 0 0 auto; min-width: 170px;
  font-family: var(--ff-ru-sans); font-size: .8rem; opacity: .9;
}
.datego input, .datego select {
  min-height: 38px; padding: 6px 10px;
  font: inherit; font-size: .82rem;
  color: inherit; background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.28); border-radius: 8px;
}
.datego input option, .datego select option { color: #14213d; }
#gotoHebYear { width: 92px; }
.btn--go {
  min-height: 38px; padding: 6px 16px;
  font: inherit; font-size: .82rem; font-weight: 700;
  color: var(--band); background: #fff;
  border: 0; border-radius: 999px; cursor: pointer;
}
.btn--go:hover { background: #f0f0f0; }
.datego__msg { margin: 0; font-family: var(--ff-ru-sans); font-size: .76rem; opacity: .9; }
.datego__msg:empty { display: none; }

@media (max-width: 860px) {
  .datego__form { gap: 6px; }
  .datego__label { flex: 1 1 100%; min-width: 0; }
  .datego input[type="date"] { flex: 1 1 0; min-width: 0; }
  #gotoHebDay, #gotoHebMon { flex: 1 1 0; min-width: 0; }
  .zrow__times { white-space: normal; }
  .ztime { margin-inline-start: var(--space-3); }
}


/* ═══════════════════════ view length — month · week · 3 days · day ═════════ */
.vtabs {
  display: flex; gap: 4px; flex-wrap: wrap;
  padding-bottom: var(--space-2); margin-bottom: var(--space-2);
}
.vtab {
  flex: 0 0 auto;
  min-height: 36px; padding: 6px 14px;
  font-family: var(--ff-ru-sans); font-size: .82rem;
  color: var(--ink-soft); background: transparent;
  border: 1px solid var(--hairline); border-radius: 999px; cursor: pointer;
}
.vtab:hover { border-color: var(--band); color: var(--ink); }
.vtab.is-on { background: var(--band); color: var(--band-ink); border-color: var(--band); font-weight: 700; }
.vtab:focus-visible { outline: 3px solid var(--band); outline-offset: 2px; }

/* The day sheet's Hebrew line: Hebrew reads rtl, the Russian half ltr. */
.dsub__he { direction: rtl; unicode-bidi: isolate; }
.dsub__ru { direction: ltr; unicode-bidi: isolate; }
.dsub__sep { margin: 0 .45em; opacity: .55; }

/* A backstop, not the fix — the header row above is the fix. Nothing on this
   page has a reason to be wider than the window, and when something is, the
   whole layout shifts rather than just that element. */
html, body { max-width: 100%; overflow-x: clip; }

@media (max-width: 560px) {
  .vtabs { gap: 3px; }
  .vtab { flex: 1 1 0; min-width: 0; padding: 6px 4px; font-size: .74rem; text-align: center; }
}

/* The occasion column: what the row is for. One line, clipped — the full
   string stays reachable as a tooltip. */
.times__table .occ {
  text-align: start; font-weight: 700; color: var(--note);
}
.times__table thead .occ { color: inherit; }

/* Дата columns of the times table, and the intermediate lighting of a two-day
   festival — a second time in the same cell, quieter, because it is part of
   the same entry rather than a row of its own. */
.times__table .dcol { white-space: nowrap; font-variant-numeric: tabular-nums; }
.times__table td.light { display: table-cell; }
/* A lighting taken from an existing flame, after nightfall — marked, because
   it is a different act from striking a match before sunset. */
.times__table td.light--flame { font-style: italic; }
.times__table td.light--flame::after { content: ' ✦'; font-size: .8em; opacity: .6; }

@media (max-width: 560px) {
  .times__table .occ { max-width: 34vw; }
  .times__table .dcol { font-size: .64rem; }
}


/* ═══════════════ text that stays inside its square ═════════════════════════
   מרדכי, 23.08.2026: "שלא יברחו מהמשבצת... אולי תבדוק איזה פתרון מקצועי".

   The approach every production calendar takes — Google Calendar, Outlook,
   Fantastical — is not to make the text smaller until it happens to fit. It is
   to give each item exactly one line, clip it with an ellipsis, and let a
   summary marker stand for whatever did not fit. The square then has a height
   that does not depend on its content, so a row of squares is always level and
   nothing can ever spill.

   Here the dots under the date already are that summary marker: one per
   category, counting what the day carries. So the text lines clip, the dots
   stay, and the day sheet holds the full version.

   The single-day and three-day views are exempt: there the square is 260px
   tall and the text is the point.
   ═════════════════════════════════════════════════════════════════════════ */
.cell { overflow: hidden; }

[data-view="month"] .holiday, [data-view="week"] .holiday,
[data-view="month"] .parsha,  [data-view="week"] .parsha,
[data-view="month"] .omer,    [data-view="week"] .omer,
[data-view="month"] .ushpizin,[data-view="week"] .ushpizin {
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* The prayer markers are icons in the dense views — one row, never a second. */
[data-view="month"] .prayer, [data-view="week"] .prayer {
  flex-wrap: nowrap; overflow: hidden; max-width: 100%;
}
[data-view="month"] .prayer__item, [data-view="week"] .prayer__item {
  flex: 0 0 auto; min-width: 0;
}

/* The date line is the one thing that must never be clipped: it is what the
   square is. Everything else yields to it. */
.cdate { flex: 0 0 auto; }
.cell > :not(.cdate) { min-width: 0; }

/* ── today ─────────────────────────────────────────────────────────────── */
.cell--today {
  outline: 2px solid var(--band);
  outline-offset: -2px;
}
.cell--today .cdate__line.is-lead { color: var(--band); }
.gear--today { font-weight: 700; }

@media (max-width: 860px) {
  /* At phone width a pill with a label is a wrapped two-line block; the icon
     alone is one row and reads the same. */
  [data-view="month"] .prayer__item span:not(.icon),
  [data-view="week"] .prayer__item span:not(.icon) { display: none; }
}

/* ══════════════════ «Сообщить о неточности» ════════════════════════════════
   Discreet until wanted. A calendar is read far more often than it is
   corrected, so the control is quiet — but it sits beside the thing it reports
   on, in every tab, so a reader who does spot something never has to hunt for
   where to say so.
   ═════════════════════════════════════════════════════════════════════════ */
.fb { margin-top: var(--space-2); }
.fb__open {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 32px; padding: 4px 10px;
  font-family: var(--ff-ru-sans); font-size: .72rem;
  color: var(--ink-soft); background: none;
  border: 1px dashed var(--hairline); border-radius: 999px; cursor: pointer;
}
.fb__open:hover { color: var(--accent); border-color: var(--accent); border-style: solid; }
.fb__open.is-open { color: var(--accent); border-color: var(--accent); border-style: solid; }
.fb__open .icon { width: 13px; height: 13px; }

.fb__form {
  margin-top: var(--space-2); padding: var(--space-3);
  background: var(--sheet-bg);
  border: 1px solid var(--hairline); border-radius: var(--radius);
  display: grid; gap: var(--space-2);
}
.fb__about { margin: 0; font-family: var(--ff-ru-sans); font-size: .78rem; color: var(--ink); }
.fb__date { color: var(--ink-soft); }
.fb__field { display: grid; gap: 3px; }
.fb__field > span { font-family: var(--ff-ru-sans); font-size: .7rem; color: var(--ink-soft); }
.fb__form select, .fb__form textarea, .fb__form input {
  width: 100%; min-width: 0; padding: 7px 9px;
  font: inherit; font-family: var(--ff-ru-sans); font-size: .82rem;
  color: var(--ink); background: var(--sheet-bg);
  border: 1px solid var(--hairline); border-radius: 6px;
}
.fb__form textarea { resize: vertical; line-height: 1.5; }
.fb__row { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.fb__row input { flex: 1 1 160px; }
.fb__rules { margin: 0; font-family: var(--ff-ru-sans); font-size: .68rem; line-height: 1.5; color: var(--ink-soft); }
.fb__foot { display: flex; align-items: center; gap: var(--space-2); }
.btn--send {
  min-height: 36px; padding: 7px 18px;
  font: inherit; font-family: var(--ff-ru-sans); font-size: .82rem; font-weight: 700;
  color: var(--band-ink); background: var(--band);
  border: 0; border-radius: 999px; cursor: pointer;
}
.btn--send:disabled { opacity: .55; cursor: default; }
.fb__cancel {
  font: inherit; font-family: var(--ff-ru-sans); font-size: .78rem;
  color: var(--ink-soft); background: none; border: 0; cursor: pointer; text-decoration: underline;
}
.fb__msg { margin: 0; font-family: var(--ff-ru-sans); font-size: .76rem; }
.fb__msg:empty { display: none; }
.fb__msg--err { color: var(--accent); }
.fb__thanks {
  font-family: var(--ff-ru-sans); font-size: .82rem; line-height: 1.6; color: var(--ink);
}

/* In the zmanim table the control is a cell of its own, and only shows on
   hover or focus — thirteen permanent buttons would drown the times. */
.zrow__fb { width: 1%; padding-inline: 4px !important; }
.zrow__fb .fb { margin: 0; }
.zrow__fb .fb__open { border: 0; padding: 2px 4px; min-height: 24px; opacity: 0; }
.zrow__fb .fb__open span { display: none; }
.zrow:hover .fb__open, .zrow__fb .fb__open:focus-visible,
.zrow__fb .fb__open.is-open { opacity: 1; }
.zrow__fb .fb__form { position: relative; width: min(320px, 70vw); }

@media (hover: none) {
  /* Nothing hovers on a phone. */
  .zrow__fb .fb__open { opacity: .6; }
}

/* ══════════════════════ уроки — the daily learning ═════════════════════════
   One row per track. The Hebrew name of a Rambam section sits beside the
   Russian one: the translations are not yet checked against the Moreh Shiur
   booklets, and a name a reader can verify is worth more than one they cannot.
   ═════════════════════════════════════════════════════════════════════════ */
.study { display: grid; gap: 0; }
.study__row {
  display: flex; gap: var(--space-3); align-items: baseline;
  padding: 9px 0; border-bottom: 1px solid var(--hairline);
}
.study__row:last-child { border-bottom: 0; }
.study__row--pending { opacity: .72; }
.study__title {
  flex: 0 0 34%; max-width: 180px;
  font-family: var(--ff-ru-sans); font-size: .8rem; font-weight: 700; color: var(--ink-soft);
}
.study__val { flex: 1 1 auto; min-width: 0; display: grid; gap: 2px; }
.study__val b { font-size: .98rem; color: var(--greg); }
.study__detail { font-size: .92rem; line-height: 1.5; }
.study__alt {
  font-family: var(--ff-he); font-size: .8rem; color: var(--ink-soft);
  direction: rtl; unicode-bidi: isolate;
}

@media (max-width: 560px) {
  .study__row { flex-direction: column; gap: 2px; }
  .study__title { flex: none; max-width: none; }
}

/* ═════════════════ молитва — what changes today ════════════════════════════
   The tab exists only on days when something does change; an ordinary day has
   no tab at all. So this styling never has to look right when empty.
   ═════════════════════════════════════════════════════════════════════════ */
.pray { display: grid; gap: 0; }
.pray__row {
  display: flex; gap: var(--space-3); align-items: flex-start;
  padding: 10px 0; border-bottom: 1px solid var(--hairline);
}
.pray__row:last-child { border-bottom: 0; }
.pray__row .icon { width: 18px; height: 18px; margin-top: 2px; color: var(--note); flex: 0 0 auto; }
/* An omission is not an addition. The strike is the shape of the difference. */
.pray__row--out .icon { color: var(--accent); }
.pray__row--out .pray__title { text-decoration: line-through; text-decoration-thickness: 1px; opacity: .85; }
.pray__body { min-width: 0; }
.pray__title { font-size: .98rem; font-weight: 700; }
.pray__meta {
  margin-top: 2px; font-family: var(--ff-ru-sans); font-size: .8rem; color: var(--ink-soft);
  display: flex; flex-wrap: wrap; gap: 5px;
}
.pray__where { font-weight: 700; }

/* The marker at the top of Кратко — the reader looks there first. */
/* The standing season, set apart from what changes today: the same list would
   read as if Машив ѓа-руах had just started. */
/* Beside the city select, not inside a menu: sending the link is the point. */
.citylink {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 36px; padding: 6px 12px;
  font: inherit; font-size: .78rem; white-space: nowrap;
  color: #cbd0d6; background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.18); border-radius: 999px; cursor: pointer;
}
.citylink:hover { background: rgba(255,255,255,.14); color: #e8eaed; }
.citylink:focus-visible { outline: 2px solid #7cc4ff; outline-offset: 2px; }

.pray__head {
  margin: 14px 0 2px; font-size: .74rem; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--note);
}
.pray--season { opacity: .78; }
.pray__row--season .pray__title { font-weight: 600; }

.praymark {
  display: flex; align-items: center; gap: var(--space-2); width: 100%;
  min-height: 44px; padding: 9px var(--space-3); margin-bottom: var(--space-2);
  font: inherit; font-family: var(--ff-ru-sans); font-size: .88rem; font-weight: 700;
  color: var(--note); background: color-mix(in srgb, var(--note) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--note) 35%, transparent);
  border-radius: var(--radius); cursor: pointer; text-align: start;
}
.praymark:hover { background: color-mix(in srgb, var(--note) 14%, transparent); }
.praymark .icon { width: 17px; height: 17px; }
.praymark__go { margin-inline-start: auto; font-size: 1.05rem; }
[dir="rtl"] .praymark__go { transform: scaleX(-1); }

/* ═════════════════════════════ site menu ══════════════════════════════
   Three pages now, and each had grown its own hand-written link to whichever
   other page existed when it was written. One definition, rendered by nav.js.

   The links are the default state and the hamburger is hidden; below 760px
   that inverts. Doing it that way round means the links work if the script
   never runs, and it is the wide layout — not the narrow one — that needs no
   JavaScript to be usable. */
.snav { position: relative; display: flex; align-items: center; }

.snav__list {
  display: flex; align-items: center; gap: 2px;
  margin: 0; padding: 0; list-style: none;
}
.snav__link {
  display: inline-flex; align-items: center;
  min-height: 40px; padding: 8px 14px;
  font-family: var(--ff-ui); font-size: .86rem; text-decoration: none;
  color: inherit; opacity: .78; border-radius: 999px; white-space: nowrap;
}
.snav__link:hover { opacity: 1; background: rgba(255, 255, 255, .14); }
.snav__link.is-here {
  opacity: 1; font-weight: 700;
  background: rgba(255, 255, 255, .2);
}
.snav__link:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

.snav__burger { display: none; }

@media (max-width: 760px) {
  .snav__burger {
    display: flex; flex-direction: column; justify-content: center; gap: 4px;
    width: 44px; height: 44px; padding: 10px;
    background: rgba(255, 255, 255, .14); border: 0; border-radius: 10px;
    cursor: pointer;
  }
  .snav__burger span {
    display: block; height: 2px; width: 100%;
    background: currentColor; border-radius: 2px;
    transition: transform .18s ease, opacity .18s ease;
  }
  .snav.is-open .snav__burger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .snav.is-open .snav__burger span:nth-child(2) { opacity: 0; }
  .snav.is-open .snav__burger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

  .snav__list {
    /* Anchored by the burger's own side (it was inline-end: in Russian the
       burger sits on the left, so the panel grew leftwards off the screen and
       only its right edge showed). nav.js also nudges it back inside the
       viewport, for a header laid out some other way. */
    position: absolute; top: calc(100% + 8px); inset-inline-start: 0; z-index: 40;
    max-width: calc(100vw - 16px);
    display: none; flex-direction: column; align-items: stretch; gap: 2px;
    min-width: 220px; padding: 8px;
    background: #1d2129; color: #e8eaed;
    border: 1px solid rgba(255, 255, 255, .16); border-radius: 12px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, .28);
  }
  .snav.is-open .snav__list { display: flex; }
  .snav__link { border-radius: 8px; padding: 12px 14px; font-size: .95rem; }
}

@media print { .snav { display: none !important; } }

/* The Shabbat's name, and under it what else it is called. */
.occ { line-height: 1.35; }
.occ__name { display: block; }
.occ__tag {
  display: block; margin-top: 1px;
  font-size: .78em; font-weight: 400; color: var(--ink-soft);
}

/* ───────────── «Подробнее в энциклопедии → …» (articles.js, 07.09.2026) ────
   A row of links after the day's own content, in both depths of the sheet,
   and a small book in the square's corner when the day has one. */
.dlinks { display: grid; gap: 6px; margin-top: var(--space-2); }
.dlinks__label { font-family: var(--ff-ru-sans); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }
.dlink {
  display: grid; grid-template-columns: 22px 1fr auto; gap: var(--space-2); align-items: center;
  min-height: 44px; padding: 8px 12px;
  color: inherit; text-decoration: none;
  background: color-mix(in srgb, var(--band) 7%, var(--sheet-bg));
  border: 1px solid color-mix(in srgb, var(--band) 30%, var(--hairline)); border-radius: 10px;
}
.dlink:hover { background: color-mix(in srgb, var(--band) 14%, var(--sheet-bg)); }
.dlink:focus-visible { outline: 2px solid var(--band); outline-offset: 2px; }
.dlink .icon { width: 20px; height: 20px; color: var(--band); }
.dlink__title { display: block; font-weight: 700; font-size: .95rem; }
.dlink__lead { display: block; font-family: var(--ff-ru-sans); font-size: .78rem; color: var(--ink-soft); line-height: 1.4; }
.dlink__go { color: var(--band); font-size: 1.1rem; }
.cell { position: relative; }
.cell__enc { position: absolute; inset-inline-end: 4px; bottom: 4px; color: var(--band); opacity: .75; pointer-events: none; }
.cell__enc .icon { width: 12px; height: 12px; }
@media print { .dlinks, .cell__enc { display: none !important; } }

/* ───────────── the omer in the square and on the sheet (07.09.2026) ─────── */
.omer-cell { display: flex; gap: 5px; align-items: flex-start; margin-top: 3px; font-family: var(--ff-ru-sans); font-size: .7rem; line-height: 1.25; color: var(--note); }
.omer-cell .icon { width: 13px; height: 13px; flex: 0 0 auto; margin-top: 1px; }
.omer-cell > span { display: grid; }
.omer-cell__eve { color: var(--ink-soft); }
.omer-links { display: flex; flex-wrap: wrap; gap: 8px; }
.omer-link { display: inline-flex; align-items: center; min-height: 36px; padding: 6px 14px; font-family: var(--ff-ru-sans); font-size: .86rem; color: var(--band); text-decoration: none; background: color-mix(in srgb, var(--band) 8%, var(--sheet-bg)); border: 1px solid color-mix(in srgb, var(--band) 30%, var(--hairline)); border-radius: 999px; }
.omer-link:hover { background: color-mix(in srgb, var(--band) 16%, var(--sheet-bg)); }
.omer-link--eve { color: var(--ink); }