/* The First 100 Days: reader styles. Fonts are the app's own files. */

/* ---------- fonts ---------- */
@font-face { font-family: "Poppins"; font-weight: 400; font-display: swap; src: url("fonts/poppins-latin-400.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 500; font-display: swap; src: url("fonts/poppins-latin-500.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 600; font-display: swap; src: url("fonts/poppins-latin-600.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 700; font-display: swap; src: url("fonts/poppins-latin-700.woff2") format("woff2"); }
@font-face { font-family: "Merriweather"; font-weight: 300 900; font-display: swap; src: url("fonts/merriweather-latin.woff2") format("woff2"); }
@font-face { font-family: "Varela Round"; font-weight: 400; font-display: swap; src: url("fonts/varela-hebrew.woff2") format("woff2"); unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F; }
@font-face { font-family: "Varela Round"; font-weight: 400; font-display: swap; src: url("fonts/varela-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122; }
@font-face { font-family: "Rubik"; font-weight: 300 900; font-display: swap; src: url("fonts/rubik-hebrew.woff2") format("woff2"); unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F; }
@font-face { font-family: "Rubik"; font-weight: 300 900; font-display: swap; src: url("fonts/rubik-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122; }

:root {
  --f-num: "Poppins", "Avenir Next", "Segoe UI", sans-serif;
  --f-serif-brand: "Iowan Old Style", Baskerville, "Times New Roman", "Merriweather", serif;
  /* page geometry: set by JS, defaults for fixtures */
  --page-w: 420px; --page-h: 640px;
  --m-top: 46px; --m-bottom: 44px; --m-inner: 40px; --m-outer: 28px;
  --body-size: 16px; --body-lh: 1.66;
}
html[lang="he"] { --f-body: "Rubik", "Varela Round", -apple-system, sans-serif; --f-head: "Varela Round", "Rubik", sans-serif; --f-label: "Varela Round", "Rubik", sans-serif; }
html[lang="en"] { --f-body: "Merriweather", Georgia, serif; --f-head: "Poppins", "Avenir Next", sans-serif; --f-label: "Poppins", "Avenir Next", sans-serif; }
@media (min-width: 900px) { :root { --body-size: 17px; } }

/* ---------- stage ---------- */
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--stage); color: var(--ink); overscroll-behavior: none; -webkit-text-size-adjust: 100%; }
body { font-family: var(--f-body); font-size: var(--body-size); line-height: var(--body-lh); -webkit-font-smoothing: antialiased; }
#stage { position: fixed; inset: 0; display: grid; place-items: center; overflow: hidden; perspective: 2600px; }
#measure { position: fixed; left: 0; top: 0; width: 0; height: 0; overflow: hidden; visibility: hidden; pointer-events: none; }

/* ---------- a page ---------- */
.page {
  position: relative; width: var(--page-w); height: var(--page-h);
  background: var(--paper);
  color: var(--ink); overflow: hidden;
}
.page-body {
  position: absolute; top: var(--m-top); bottom: var(--m-bottom);
  overflow: hidden;
}
.page.recto .page-body { inset-inline-start: var(--m-inner); inset-inline-end: var(--m-outer); }
.page.verso .page-body { inset-inline-start: var(--m-outer); inset-inline-end: var(--m-inner); }
.page-head, .page-folio {
  position: absolute; font-family: var(--f-num); font-weight: 500; font-size: 10.5px;
  letter-spacing: .06em; color: var(--ink-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 70%;
}
.page-head { top: 18px; }
.page-folio { bottom: 16px; font-size: 11px; }
.page.recto .page-head, .page.recto .page-folio { inset-inline-end: var(--m-outer); text-align: end; }
.page.verso .page-head, .page.verso .page-folio { inset-inline-start: var(--m-outer); text-align: start; }
.page-head.he, html[lang="he"] .page-head { font-family: var(--f-label); letter-spacing: 0; font-size: 11px; }

/* ---------- flow (column pagination) ---------- */
.flow {
  width: var(--col-w); height: var(--col-h);
  column-width: var(--col-w); column-gap: var(--col-gap); column-fill: auto;
  orphans: 2; widows: 2;
}
.flow > * { break-inside: avoid; }
/* paragraphs, lists and tables may break between lines/items/rows; callouts and headings never */
.flow > p, .flow > ul, .flow > ol, .flow > .tablewrap { break-inside: auto; }
.flow li, .flow tr { break-inside: avoid; }
.flow thead { break-after: avoid; }
.flow > h2, .flow > h3, .flow > h4 { break-after: avoid; break-inside: avoid; }
.flow > .oversize { break-inside: auto; }

/* ---------- text ---------- */
.flow p, .page-body p { margin: 0 0 .78em; text-align: start; }
html[lang="en"] #stage:not(.single-mode) .flow p { text-align: justify; text-align-last: start; }
html[lang="en"] .flow p { hyphens: auto; -webkit-hyphens: auto; }
html[lang="he"] .flow p { hyphens: none; }
.flow h2 { font-family: var(--f-head); font-weight: 600; font-size: 1.32em; line-height: 1.28; margin: .9em 0 .5em; color: var(--ink); letter-spacing: -.005em; }
html[lang="he"] .flow h2 { font-weight: 400; }
.flow h3 { font-family: var(--f-head); font-weight: 600; font-size: 1.06em; line-height: 1.35; margin: 1.1em 0 .35em; color: var(--ink); }
html[lang="he"] .flow h3 { font-weight: 400; }
.flow h4 { font-family: var(--f-label); font-size: .82em; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); margin: 1.1em 0 .3em; }
.flow h2:first-child, .flow h3:first-child { margin-top: 0; }
.flow strong { font-weight: 600; color: var(--ink); }
html[lang="he"] .flow strong { font-weight: 500; }
.flow em { font-style: italic; }
.flow hr { border: 0; height: 1px; margin: 1.1em auto; width: 28%; background: var(--rule-strong); break-after: avoid; }
.flow code { font-family: var(--f-num); font-size: .9em; color: var(--ink-soft); }
.flow blockquote { margin: .4em 0 .9em; padding-inline-start: 14px; border-inline-start: 1px solid var(--rule-strong); color: var(--ink-soft); font-style: italic; }
.flow ul, .flow ol { margin: 0 0 .8em; padding-inline-start: 1.25em; }
.flow li { margin: 0 0 .28em; }
.flow li.legend { list-style: none; display: flex; gap: 10px; align-items: flex-start; margin-inline-start: -1.25em; }
.flow li.legend .mk { color: var(--rose); flex: 0 0 auto; margin-top: .2em; }
.num, .flow .num { font-family: var(--f-num); font-weight: 500; font-variant-numeric: lining-nums tabular-nums; }

/* drop cap on the first paragraph of a gate */
.gate-body > p.lead::first-letter {
  float: inline-start; font-family: var(--f-head); font-weight: 600; color: var(--rose);
  font-size: 3.05em; line-height: .82; padding-inline-end: .12em; padding-top: .06em;
}
/* Hebrew: no drop cap (one-letter prefixes like ב־ and ו־ split badly) */
html[lang="he"] .gate-body > p.lead::first-letter { float: none; font: inherit; color: inherit; padding: 0; }

/* ---------- marks ---------- */
.mk { width: 16px; height: 16px; display: inline-block; vertical-align: -3px; }

/* ---------- callouts ---------- */
aside.callout {
  margin: .5em 0 1em; padding: 10px 14px 9px; position: relative;
  background: var(--callout-bg); color: var(--ink);
  border-inline-start: 2px solid var(--c, var(--rose)); border-radius: 0;
  font-size: .93em; line-height: 1.58;
}
aside.callout header { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; color: var(--c, var(--rose)); font-family: var(--f-label); font-weight: 600; font-size: .74em; letter-spacing: .09em; text-transform: uppercase; }
html[lang="he"] aside.callout header { letter-spacing: 0; font-size: .82em; font-weight: 400; }
aside.callout header .mk { width: 15px; height: 15px; }
aside.callout p { margin: 0; text-align: start; orphans: 3; widows: 3; }
aside.callout { box-decoration-break: clone; -webkit-box-decoration-break: clone; }
aside.callout p + p { margin-top: .5em; }
.c-quick, .c-dad { --c: var(--teal); }
.c-nurse, .c-tool, .c-talia { --c: var(--rose); }
.c-quote { --c: var(--violet); font-style: italic; }
.c-quote p { font-family: var(--f-body); }
.c-bug { --c: var(--warn); }
.c-alert { --c: var(--danger); background: rgb(var(--t-danger-bg) / .9); }
.c-alert[data-level="p1"], .c-alert[data-level="p2"], .c-alert2 { --c: var(--warn); background: rgb(var(--t-warning-bg) / .9); }
.c-talia { background: rgb(var(--t-pink) / .45); }
html[data-appearance="dark"] .c-talia { background: rgb(var(--t-brand-pink) / .07); }

/* ---------- checklists ---------- */
ul.checklist { list-style: none; padding: 0; margin: .2em 0 .9em; }
li.chk { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 .42em; cursor: pointer; }
li.chk .mk { width: 18px; height: 18px; flex: 0 0 auto; color: var(--rose); margin-top: .15em; }
li.chk.on span { color: var(--ink-muted); text-decoration: line-through; text-decoration-color: var(--rule-strong); }

/* ---------- tables ---------- */
.tablewrap { margin: .3em 0 1em; font-size: .8em; line-height: 1.4; }
.tablewrap table { width: 100%; border-collapse: collapse; }
.tablewrap th { font-family: var(--f-label); font-weight: 600; font-size: .86em; letter-spacing: .03em; text-align: start; color: var(--ink-soft); padding: 5px 7px 6px; border-bottom: 1px solid var(--rule-strong); }
html[lang="he"] .tablewrap th { font-weight: 400; letter-spacing: 0; }
.tablewrap td { padding: 5px 7px; vertical-align: top; border-bottom: 1px solid var(--rule); }
.tablewrap td.fill { height: 22px; }
.tablewrap tr:last-child td { border-bottom: 1px solid var(--rule-strong); }
/* a very narrow phone (under 375px): a five-column table gives up padding and may break a long word,
   so its last column is never cut off by the page edge */
@media (max-width: 374px) {
  .tablewrap { font-size: .74em; }
  .tablewrap th, .tablewrap td { padding-inline: 3px; overflow-wrap: anywhere; }
}

/* "In Talia" boxes carry the app's cloud instead of a drawn mark */
.c-talia header .mk { display: none; }
.c-talia header::before { content: ""; flex: 0 0 auto; width: 20px; height: 20px; border-radius: 50%; background: #fff url("talia-cloud.webp") center / 128% no-repeat; }

/* save a checklist to Notes (share sheet) or copy it */
.chk-share-row { margin: .1em 0 1.1em; text-align: start; }
.chk-share { display: inline-flex; align-items: center; gap: 8px; font: inherit; font-family: var(--f-label); font-size: .82em; color: var(--ink);
  background: none; border: 1px solid var(--rule-strong); border-radius: 999px; padding: 8px 16px; min-height: 40px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.chk-share .mk { width: 16px; height: 16px; color: var(--rose); }
.chk-share:hover, .chk-share:focus-visible { border-color: var(--rose); }
.chk-share.done { color: var(--ink-muted); border-color: var(--rule); }