/* The siddur (/siddur/, /he/siddur/) and the Jewish year (/jewish-holidays/),
   written by tools/siddur.mjs. Only the tokens from base.css, which carry
   light and dark; logical properties throughout, so the Hebrew page mirrors. */

/* ---- The app screenshot beside the hero -------------------------------- */
/* As wide as the phone frame (guide.css .app-shot), so the pair centres as
   one on a phone; .hub-top keeps the space below it, so the hero's own margin goes. */
.hub-top .guide-hero { margin-bottom: 0; }
.shot { margin: 0; width: min(100%, 240px); }
@media (max-width: 760px) { .shot figcaption { margin-inline: auto; text-align: center; } }

/* ---- The siddur ----------------------------------------------------------- */
.guide-section .section-sub { margin-top: -.6rem; color: var(--ink-3); }
.prayers { list-style: none; padding: 0; margin: 1.25rem 0 0; display: grid; gap: .75rem; }
.prayer { padding: 1rem 1.2rem 1.1rem; border-radius: var(--r-card); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.prayer:has(h3:target) { box-shadow: inset 0 0 0 2px var(--brand); }
.guide-section .prayer h3 { margin: 0; font-size: var(--step-1); line-height: 1.3; }
.prayer .he-title { margin-top: .1rem; font-size: 1.3rem; line-height: 1.35; color: var(--ink-2); }
[dir="ltr"] .prayer .he-title { text-align: left; }
.guide-section .prayer .note { margin-top: .45rem; color: var(--ink-2); }
.nusach-line { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .75rem; }
.nusach-line .chip { padding: .2rem .7rem; font-size: .84rem; font-weight: 600; }
/* Only a prayer the app carries in fewer than three nusachim has a chip. */
.nusach-line .chip.only { background: var(--brand-tint); color: var(--brand); box-shadow: none; }
.guide-section .prayer .missing { margin-top: .45rem; font-size: .9rem; color: var(--ink-3); }

.editions { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr)); gap: .9rem; margin-top: 1.25rem; }
.edition { padding: 1.05rem 1.2rem; border-radius: var(--r-card); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.guide-section .edition h3 { margin: 0; font-size: var(--step-1); line-height: 1.3; }
.guide-section .edition .count { margin-top: .15rem; font-size: .88rem; color: var(--ink-3); }
.edition ul { margin: .7rem 0 0; padding-inline-start: 1.1rem; color: var(--ink-2); line-height: 1.45; }
.edition li + li { margin-top: .3rem; }
.guide-section .caveat { margin-top: 1.5rem; font-weight: 600; color: var(--ink); }

/* ---- The year at a glance ------------------------------------------------ */
.guide-section .year-note { max-width: 30.5em; font-size: .95rem; color: var(--ink-3); }
.cal.year { max-width: 60rem; margin-top: 1.25rem; border-collapse: separate; border-spacing: 0; border-radius: var(--r-card); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; }
.cal.year thead th { white-space: nowrap; }
.cal.year th, .cal.year td { padding-inline: 1rem; }
.cal.year th[scope="rowgroup"] { padding-top: 1.1rem; font-family: var(--f-display); font-size: 1.2rem; font-weight: 600; color: var(--ink); }
.cal.year th[scope="rowgroup"] .he { margin-inline-start: .5rem; font-size: 1.15rem; font-weight: 500; color: var(--ink-3); }
.cal.year th[scope="row"] { font-weight: 600; }
.cal.year th[scope="row"] a { color: var(--ink); text-decoration-color: var(--line-strong); text-underline-offset: 3px; }
.cal.year th[scope="row"] a:hover { text-decoration-color: currentColor; }
.cal.year .kind { white-space: nowrap; color: var(--ink-3); }
.cal.year .hd { color: var(--ink-2); }
.cal.year .dates { width: 17rem; }
.cal.year .dates span { display: block; }
.cal.year tbody:last-child tr:last-child > * { border-bottom: 0; }
/* On a phone each day is a short block: its name, then kind and Hebrew date on one line, then the dates. */
@media (max-width: 640px) {
  .cal.year { background: transparent; box-shadow: none; border-radius: 0; overflow: visible; }
  .cal.year thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .cal.year, .cal.year tbody, .cal.year tr, .cal.year th, .cal.year td { display: block; }
  .cal.year tr { padding-block: .7rem; border-bottom: 1px solid var(--line); }
  .cal.year th, .cal.year td, .cal.year th[scope="rowgroup"] { padding: 0; border: 0; }
  .cal.year td.dates { width: auto; }
  .cal.year tr.month { padding-top: 1.5rem; border-bottom: 0; }
  .cal.year td.kind, .cal.year td.hd { display: inline; font-size: .9rem; }
  .cal.year td.hd::before { content: " · "; content: " · " / ""; color: var(--ink-4); } /* shown, not read aloud */
  .cal.year td.dates { margin-top: .2rem; }
}

/* ---- One day ------------------------------------------------------------- */
.holiday-head { display: grid; gap: .55rem; justify-items: start; margin-bottom: 1.1rem; }
.guide-section .holiday-head h2 { margin: 0; font-size: var(--step-3); }
.holiday-head .guide-alt .he { font-size: clamp(1.35rem, 1.1rem + 1vw, 1.8rem); line-height: 1.3; }
.guide-section.holiday .one { font-size: var(--step-1); line-height: 1.5; color: var(--ink); }
.holiday .facts { margin-block: 1.25rem; }
.dates-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .25rem; }
.dates-list .yr { display: block; font-size: .85rem; color: var(--ink-3); }
.greet { display: grid; gap: .1rem; justify-items: start; }
.greet .he { font-size: 1.45rem; line-height: 1.35; color: var(--ink); }
.greet .tr { color: var(--ink-3); font-style: italic; }
.greet .mean { color: var(--ink-2); }
.guide-section .quiet { margin-top: .8rem; font-size: .92rem; color: var(--ink-3); }
.holiday .body + h3 { margin-top: 1.8rem; }
.holiday > h3 + p + p { margin-top: .8rem; }

/* ---- The months ---------------------------------------------------------- */
.months { list-style: none; padding: 0; margin: 1.25rem 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); gap: .8rem; }
.months li { display: grid; gap: .3rem; align-content: start; padding: 1rem 1.15rem; border-radius: var(--r-card); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.months .m-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: .25rem .75rem; }
.months strong { font-family: var(--f-display); font-size: 1.25rem; font-weight: 600; line-height: 1.2; color: var(--ink); }
.months .he { font-size: 1.35rem; line-height: 1.3; color: var(--ink-2); }
.guide-section .months .m-meta { font-size: .85rem; color: var(--ink-3); }
.guide-section .months p:last-child { font-size: .95rem; line-height: 1.5; }