/* The page itself. Shared by the app, Claude's look renderer and the PDF print view. */
.page { position: relative; width: 100%; aspect-ratio: 1000 / 1414; background: var(--nb-paper, #fff); container-type: inline-size;
        border-radius: 3px; box-shadow: 0 1px 2px rgba(0,0,0,.08), 0 8px 24px -12px rgba(0,0,0,.14); }
.page .inksvg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }   /* taps reach the page and Claude's blocks */
.page .inksvg.fresh { pointer-events: none; }
.page .inksvg.fresh.on { will-change: transform; }          /* its own layer only while it holds ink */
.page .tlayer { position: absolute; left: 0; top: 0; width: 1000px; height: 1414px; transform-origin: 0 0; transform: scale(var(--k, 1)); pointer-events: none; overflow: clip; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }   /* Claude's text is part of the page like a PDF (Roy 30/09, critical): laid out ONCE in page units (1 unit = 1 px) and only scaled geometrically with the page (--k = page width / 1000), exactly as his ink. Never CSS zoom: that lays the text out again at each size (glyph widths round differently, lines wrap elsewhere, blocks grow over other things) */
.page .pno { position: absolute; bottom: 1.2cqw; left: 1.6cqw; font: 1.2cqw -apple-system, system-ui, sans-serif; color: #767676; pointer-events: none; }
.page.far > * { display: none; }                          /* far from the screen: the box only (app.js farIO) */
.page.hide-marks .marks, .page.hide-marks .mark-note, .page.hide-marks .askg { display: none; }
.page .mark { animation: none; }   /* (appears at once: no fades, Roy 05/10) */
@media (prefers-reduced-motion: reduce) { .page .mark { animation: none; } }

.ctext { position: absolute; line-height: 1.5; white-space: pre-wrap; font-family: var(--font-page, var(--font-ui)); }
.ctext .katex, .cblock .katex, .mark-note .katex { direction: ltr; unicode-bidi: isolate; font-size: 1.05em; }
.ctext .katex-display, .cblock .katex-display { margin: .3em 0; }

.cblock { position: absolute; box-sizing: border-box; font-family: var(--font-page, var(--font-ui)); line-height: 1.5; color: var(--pg-ink, #111); }
/* black paper (web/paper.js applyPaper): the colours Claude draws straight on the paper are var(--pg-*), set on the root to
   their light variants (paper.js inkOn, as api/_render.js draws them); a block with a card of its own keeps its colours */
.cblock:is(.frame, .toc, .checklist, .formula, .result, .handoffer, .practice, .image, .graph):not(.v2) { --pg-ink: #111; --pg-acc: #1f4fbf; --pg-blue: #1a5cff;
  --pg-done: #767676; --pg-cap: #555; --pg-red: #d62828; --pg-fb: #6b6b66; --pg-fbr: #b9b9b4; --pg-under: #b8c4d6; }
/* A block's kind is a bare class (sheet, hint, note, list...), and the app's own stylesheet (web/app.css, loaded after this
   file) has rules for some of those names: .sheet is the app's full-screen dialog (position: fixed; inset: 0; display:
   grid), .hint a grey caption with a margin. On the iPad a formula sheet became a box from its top to the page's bottom,
   its rows spread apart (19/10). Inside a page those rules never apply: the block is where and what page.js says. */
.page .cblock { position: absolute; inset: auto; margin: 0; display: block; place-items: normal; box-shadow: none; }
.cblock.frame { background: #fff; border: 1.5px solid #1a5cff; border-radius: .9em; padding: .8em 1em; }
.cblock.formula { background: #f5f8ff; border-radius: .7em; padding: .5em .9em; color: #0b3fc2; }
.cblock.result { background: #f5f8ff; border-radius: .7em; padding: .35em .8em; color: #0b3fc2; font-weight: 600; }
.cblock.image, .cblock.graph { background: #fff; }
.cblock img { display: block; width: 100%; height: auto; border-radius: .4em; }
.cblock .btitle { font-weight: 600; margin-bottom: .35em; }
.cblock .bcap { color: var(--pg-cap, #555); font-size: .8em; margin-top: .3em; }
.cblock .btext { white-space: pre-wrap; }
.mark-note { position: absolute; line-height: 1.35; font-family: var(--font-page, var(--font-ui)); white-space: pre-wrap; }

/* a table of contents (each line jumps to its page), a checklist (each line ticks), a special mark */
.cblock .lnk, .cblock .chk { display: flex; align-items: baseline; gap: .6em; padding: .15em .1em; pointer-events: auto; cursor: pointer; border-radius: .3em; }
.cblock .lnk .pgn { margin-inline-start: auto; color: var(--pg-blue, #1a5cff); font-variant-numeric: tabular-nums; }
.cblock .lnk span:first-child { border-bottom: 1px dotted var(--pg-under, #b8c4d6); }
.cblock .chk i { flex: none; width: .85em; height: .85em; border: .09em solid var(--pg-blue, #1a5cff); border-radius: .18em; transform: translateY(.1em); }
.cblock .chk.done i { background: var(--pg-blue, #1a5cff); box-shadow: inset 0 0 0 .14em #fff; }
.cblock .chk.done span { text-decoration: line-through; color: var(--pg-done, #767676); }
.cblock.toc, .cblock.checklist { background: #fff; border: 1.5px solid #1a5cff; border-radius: .9em; padding: .7em 1em; }
.cblock.badge { width: auto !important; }
.cblock .bsym { font-size: 1.6em; line-height: 1; color: var(--pg-red, #d62828); font-weight: 700; }
/* paint order (layers.js): paper 0, base text 1, base ink 2, layer n text 10n+1 and ink 10n+2 (Roy's pen always over
   Claude's text and blocks, 28/09), then Claude's marks, the ink just written, selection and page number on top */
.page { isolation: isolate; }
.page .inksvg.band { z-index: 2; }
.page .tlayer > * { z-index: 1; }
/* Roy 01/10: the grid's vertical lines (.page::after, z-index 0, painted last) crossed Claude's blocks. The text layer is its own stacking context (transform), so it sits at z 1: above the ruling, still under the ink canvas (z 2). */
.page .tlayer { z-index: 1; }
.page .inksvg.top { z-index: 100000; }
.page .inksvg.fresh { z-index: 100001; }
.page .inksvg.drag { z-index: 100001; display: none; }
.page .inksvg.drag.on { display: block; will-change: transform; }
.page .tlayer > .flowdot { z-index: 100001; }
.page .sel, .page .pno { z-index: 100002; }
.page .shp-h { z-index: 100003; }                 /* a selected shape's own handles, over its frame (input.js shapeHandles) */

/* the short note beside his ink (Roy 28/09): like the grey "הסבר" notes of the root notebooks, in Claude's blue */
.cblock.hint { color: var(--pg-blue, #1a5cff); line-height: 1.45; }
.cblock.hint .katex { color: var(--pg-blue, #1a5cff); }
/* an AI's offer to practise the symbols it lacks, and a practice block (web/handflow.js): calm, black on white, 44 px buttons */
.cblock.handoffer, .cblock.practice { background: #fff; border: 1.5px solid #111; border-radius: .9em; padding: .6em .9em; }
.cblock.fallback { color: var(--pg-fb, #6b6b66); font-size: .9em; border-inline-start: 3px solid var(--pg-fbr, #b9b9b4); padding-inline-start: .6em; }
.cblock .hbtns { display: flex; flex-wrap: wrap; gap: .5em; margin-top: .5em; }
.cblock .hbtn { min-height: calc(44px / var(--k, 1)); min-width: calc(44px / var(--k, 1)); padding: 0 1em; align-items: center; border: 1.5px solid #111; background: #fff; color: #111;
  font: inherit; font-size: calc(16px / var(--k, 1)); border-radius: calc(22px / var(--k, 1)); }   /* (the text layer is scaled with the page: a finger's 44 px whatever the zoom) */
.cblock .hbtn.primary { background: #111; color: #fff; }
.cblock .hbtn:disabled { opacity: .5; }


/* night mode, layer 3 (Roy 26/10: "הכל"): an imported PDF page or photo and a picture block shown inverted, hue kept, so a
   white PDF reads as the dark page around it; only on this device's screen (the stored file and the export are untouched) */
:root[data-nightimg] .page .bg image, :root[data-nightimg] .page .cblock img { filter: invert(.9) hue-rotate(180deg); }
/* night mode, layers 2-3 (and a night export): Claude's cards turn dark too (v1; a v2 block has no card: its ink is --pg-ink), so no white box glares on the dark page; a
   black-paper notebook in day keeps its white cards (Roy 22/10). api/_render.js draws the same for a look in night colours. */
:root[data-nightpages] .page .cblock:is(.frame, .toc, .checklist, .handoffer, .practice):not(.v2) { background: #232427; border-color: #4a6fe0; }
:root[data-nightpages] .page .cblock:is(.handoffer, .practice):not(.v2) { border-color: #6b6e74; }
:root[data-nightpages] .page .cblock:is(.formula, .result):not(.v2) { background: #1f2738; color: #a9c1ff; }
:root[data-nightpages] .page .cblock:is(.frame, .toc, .checklist, .formula, .result, .handoffer, .practice):not(.v2) { --pg-ink: #e8e8e6; --pg-acc: #9db8ff;
  --pg-blue: #8fb0ff; --pg-done: #9a9a9a; --pg-cap: #b5b5b2; --pg-red: #ff8a80; --pg-fb: #a5a5a0; --pg-fbr: #5a5a57; --pg-under: #4a5568; }
/* ---- page style v2 (Roy 19/10, page-taste/profile.md): a printed page, not an app. Blocks with sv: 2 (web/page.js _block).
   Frank Ruhl Libre text, Heebo titles and run-in terms, emphasis by size and weight; no boxes but a 1-unit black rule
   where a result, a question or a formula sheet needs one; one accent (#1f4fbf) for terms and the AI's side notes.
   Mirrored exactly by api/_render.js block2 (render parity) and measured there (api/mcp.js sizes and places v2 blocks):
   the letters in the font's own advances, so kerning and ligatures are off. The files are named by their content and
   cached immutable (vercel.json /web/fonts/page/, tools/gen_page_font.py). */
@font-face { font-family: "EP Page Serif"; src: url(/web/fonts/page/frank-ruhl-libre-hebrew-400-normal.a285b14985.woff2) format("woff2"); font-weight: 400; font-display: block; unicode-range: U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F; }
@font-face { font-family: "EP Page Serif"; src: url(/web/fonts/page/frank-ruhl-libre-latin-400-normal.74bc3279fe.woff2) format("woff2"); font-weight: 400; font-display: block; unicode-range: U+0000-00FF, U+2000-206F; }
@font-face { font-family: "EP Page Sans"; src: url(/web/fonts/page/heebo-hebrew.5272f40ede.woff2) format("woff2"); font-weight: 100 900; font-display: block; unicode-range: U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F; }
@font-face { font-family: "EP Page Sans"; src: url(/web/fonts/page/heebo-latin.5968ef50a0.woff2) format("woff2"); font-weight: 100 900; font-display: block; unicode-range: U+0000-058F, U+0600-200B, U+2011-20A9, U+20AB-25CB, U+25CD-FB1C, U+FB50-FFFF; }
@font-face { font-family: "EP Page Fallback"; src: url(/web/fonts/NotoSansHebrew-Regular.ttf) format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "EP Page Noto"; src: url(/web/fonts/page/NotoSansHebrew-Regular.3ec5724f18.woff2) format("woff2"); font-weight: 400; font-display: block; }
@font-face { font-family: "EP Page Noto"; src: url(/web/fonts/page/NotoSansHebrew-Bold.c9113b3214.woff2) format("woff2"); font-weight: 700; font-display: block; }
/* the notebook font a block was written in (data-pf from its pf; none: the book look, every block before 26/10), as
   api/_render.js faces(pf) maps it: body (S), side notes and sheet labels (A), titles and terms (B) */
.cblock.v2 { --pf-s: "EP Page Serif"; --pf-a: "EP Page Sans"; --pf-b: "EP Page Sans"; --pf-bw: 600; }
.cblock.v2[data-pf=sans] { --pf-s: "EP Page Sans"; }
.cblock.v2[data-pf=noto] { --pf-s: "EP Page Noto"; --pf-a: "EP Page Noto"; --pf-b: "EP Page Noto"; --pf-bw: 700; }
.cblock.v2 { --acc: var(--pg-acc, #1f4fbf); font-family: var(--pf-s), "EP Page Fallback", serif; font-weight: 400; color: var(--v2-ink, var(--pg-ink, #111)); line-height: 1.6; text-align: start;
             font-kerning: none; font-variant-ligatures: none; font-feature-settings: "kern" 0, "liga" 0, "clig" 0; font-synthesis: none;
             background: none; border: 0; border-radius: 0; padding: 0; }   /* (none of v1's cards: .frame, .formula, .result, .toc, .checklist) */
.cblock.v2 .bterm, .cblock.v2.title, .cblock.v2.heading, .cblock.v2 .btitle, .cblock.v2 .lno, .cblock.v2 .sh-hd { font-family: var(--pf-b), "EP Page Fallback", sans-serif; font-weight: var(--pf-bw); }
.cblock.v2 .bterm { line-height: 0; }
.cblock.v2.definition .bterm { color: var(--acc); }
.cblock.v2.title { line-height: 1.25; padding-bottom: .3em; border-bottom: 1px solid var(--pg-ink, #111); }
.cblock.v2.heading { line-height: 1.35; }
.cblock.v2.formula { text-align: center; }
.cblock.v2.result { border: 1px solid var(--pg-ink, #111); padding: .4em .7em; }
.cblock.v2.frame { border-top: 1px solid var(--pg-ink, #111); padding-top: .5em; }
.cblock.v2.hint { font-family: var(--pf-a), "EP Page Fallback", sans-serif; color: var(--acc); line-height: 1.5; }
.cblock.v2.hint .katex { color: var(--acc); }
.cblock.v2 .btitle { margin-bottom: .25em; }
.cblock.v2 .katex-display { margin: .3em 0; }
.cblock.v2 .li { display: flex; align-items: flex-start; padding-bottom: .15em; }
.cblock.v2 .lno { flex: none; width: 1.6em; }
.cblock.v2 .ltx { flex: 1 1 0; min-width: 0; }
.cblock.v2 .chk { gap: .5em; padding: .1em 0; border-radius: 0; }
.cblock.v2 .chk i { width: .7em; height: .7em; border: 1px solid var(--pg-ink, #111); border-radius: 0; box-sizing: border-box; transform: translateY(.05em); }
.cblock.v2 .chk.done i { background: var(--pg-ink, #111); box-shadow: none; }
.cblock.v2 .lnk { padding: .1em 0; border-radius: 0; }
.cblock.v2 .lnk span:first-child { border-bottom: 0; }
.cblock.v2 .lnk .pgn { color: var(--v2-ink, var(--pg-ink, #111)); font-family: var(--pf-a), "EP Page Fallback", sans-serif; }
.cblock.v2.sheet { border: 1px solid var(--pg-ink, #111); font-family: var(--pf-a), "EP Page Fallback", sans-serif; line-height: 1.45; }
.cblock.v2 .sh-hd { text-align: center; padding: .3em .5em; border-bottom: 1px solid var(--pg-ink, #111); }
.cblock.v2 .sh-row { display: flex; align-items: center; gap: .8em; padding: .3em .5em; }
.cblock.v2 .sh-row + .sh-row { border-top: 1px solid var(--pg-ink, #111); }
.cblock.v2 .sh-lab { flex: 1 1 0; min-width: 0; }
.cblock.v2 .sh-fx { flex: none; max-width: 60%; direction: ltr; text-align: left; font-family: var(--pf-s), "EP Page Fallback", serif; }