/* Yadi app shell. Black on white, one accent reserved for the AI: the brand's orange (Roy 25/10: "כתום בכל מקום"); the ink
   the AI writes on the page keeps its own colours (web/page.css, the pen palette). */
/* no scrollbar anywhere in the app (Roy 25/10: "מקצועי ואיכותי בלי סרגל גלילה"): panels, library, sheets and the page all
   still scroll by touch, wheel, pen and keyboard; only the bar is not drawn */
* { scrollbar-width: none; }
*::-webkit-scrollbar { display: none; width: 0; height: 0; }
/* ---------- the Hebrew font: free for commercial use (SIL OFL 1.1), swap it in one line: --font-ui ---------- */
@font-face { font-family: "EP Heebo"; src: url(/web/fonts/heebo-hebrew.woff2) format("woff2"); font-weight: 100 900; font-display: swap; unicode-range: U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F; }
@font-face { font-family: "EP Heebo"; src: url(/web/fonts/heebo-latin.woff2) format("woff2"); font-weight: 100 900; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "EP Noto"; src: url(/web/fonts/noto-sans-hebrew-regular-he.woff2) format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F; }
@font-face { font-family: "EP Noto"; src: url(/web/fonts/noto-sans-hebrew-regular-latin.woff2) format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "EP Noto"; src: url(/web/fonts/noto-sans-hebrew-bold-he.woff2) format("woff2"); font-weight: 700; font-display: swap; unicode-range: U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F; }
@font-face { font-family: "EP Noto"; src: url(/web/fonts/noto-sans-hebrew-bold-latin.woff2) format("woff2"); font-weight: 700; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "EP Noto Hebrew"; src: url(/web/fonts/NotoSansHebrew-Regular.ttf) format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "EP Noto Hebrew"; src: url(/web/fonts/NotoSansHebrew-Bold.ttf) format("truetype"); font-weight: 700; font-display: swap; }
@font-face { font-family: "EP Frank Ruhl"; src: url(/web/fonts/frank-ruhl-libre-hebrew-400-normal.woff2) format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F; }
@font-face { font-family: "EP Frank Ruhl"; src: url(/web/fonts/frank-ruhl-libre-hebrew-700-normal.woff2) format("woff2"); font-weight: 700; font-display: swap; unicode-range: U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F; }
@font-face { font-family: "EP Frank Ruhl"; src: url(/web/fonts/frank-ruhl-libre-latin-400-normal.woff2) format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0000-00FF, U+2000-206F; }
:root {
  /* type (25/10, docs/DESIGN.md): Noto Sans Hebrew everywhere, the site and the app alike (Roy: "Noto Sans בכל מקום");
     the Apple stack stays behind it as the fallback while the face loads */
  --font-ui: "EP Noto", -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "Segoe UI", sans-serif;
  /* typed text ON the page keeps the font it was laid out in (main before 25/10), so no notebook reflows and the AI's
     look_page image (api/_render.js) still matches; only the app around the page is Noto */
  --font-page: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "Segoe UI", sans-serif;
  --font-doc: var(--font-ui);                         /* Claude's text on the page keeps page.css's own rules */
  --fs-xs: 12px; --fs-sm: 13px; --fs-ui: 15px; --fs-body: 16px; --fs-title: 17px; --fs-h: 21px;
  --lh-ui: 1.4; --lh-body: 1.55; --lh-title: 1.25;
  --fw-reg: 400; --fw-med: 500; --fw-bold: 600;
  --fg: #202121; --muted: #676969; --faint: #6f7171; --line: #e7e7e4; --desk: #f6f6f3; --paper: #fff;   /* the brand's palette (site/brand.css) */
  --chip: #eeeeeb; --accent: #c2541a; --accent-soft: #fff2e8; --warn: #9a5b00;
  --panel: var(--surface);   /* banners, dialogs, the trial chip (guest.css, notice.js): was never defined, so night painted light text on a white fallback */
  --surface: #fff; --on-fg: #fff; --fg-press: #333; --knob-off: #d9d9d6; --dash: #c4c4c0; --grip: #cfcfcb;
  --ring: rgba(0,0,0,.12); --edge: rgba(0,0,0,.06); --scrim: rgba(0,0,0,.18); --rec-bg: #fdecec; --rec-fg: #b3261e;
  --sheet: #fbfbf9; --sheet-edge: rgba(0,0,0,.12); --cover-drop: rgba(0,0,0,.35);   /* a notebook's sheets behind its cover */
  color-scheme: light;
  --bar-h: 56px; --r: 12px; --shadow-md: 0 1px 2px rgba(0,0,0,.08), 0 10px 28px -10px rgba(0,0,0,.22);
  --ease: cubic-bezier(.4,0,.2,1);
  --r-xs: 4px; --r-sm: 6px; --r-lg: 14px; --r-round: 50%;   /* radii: 4 sizes and a circle */
  /* motion (Roy 05/10, one tempo): every transition and one-shot animation in the app, the panels' slide (nav.js), the
     page dip and every timer that waits for a motion (app.js A.motion) run on --t and --ease, nothing else; --t-pulse is
     the rhythm of the status loops only (a pulse, a blink), never a transition */
  --t: .22s; --t-pulse: 1.1s;
}
:root[data-theme="graphite"] {
  --switch-on: var(--fg); --switch-knob-on: var(--surface);   /* a switch is the light one at night, never the AI's orange (25/10) */
  --fg: #e6e7e9; --muted: #a8abb1; --faint: #9a9da3; --line: #45484e; --desk: #26282b; --paper: #fff;
  --chip: #3c3f44; --accent: #ff9b60; --accent-soft: #3d3027; --warn: #e0a64a;
  --surface: #313337; --on-fg: #1d1e20; --fg-press: #c9cace; --knob-off: #55585e; --dash: #5d6066; --grip: #5d6066;
  --ring: rgba(255,255,255,.16); --edge: rgba(255,255,255,.07); --scrim: rgba(0,0,0,.42); --rec-bg: #4a2727; --rec-fg: #ffb4ab;
  --shadow-md: 0 1px 2px rgba(0,0,0,.4), 0 10px 28px -10px rgba(0,0,0,.6);
  --sheet: #dcdee2; --sheet-edge: rgba(0,0,0,.45); --cover-drop: rgba(0,0,0,.7);
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme]) {
  --switch-on: var(--fg); --switch-knob-on: var(--surface);   /* a switch is the light one at night, never the AI's orange (25/10) */
  --fg: #e6e7e9; --muted: #a8abb1; --faint: #9a9da3; --line: #45484e; --desk: #26282b; --paper: #fff;
  --chip: #3c3f44; --accent: #ff9b60; --accent-soft: #3d3027; --warn: #e0a64a;
  --surface: #313337; --on-fg: #1d1e20; --fg-press: #c9cace; --knob-off: #55585e; --dash: #5d6066; --grip: #5d6066;
  --ring: rgba(255,255,255,.16); --edge: rgba(255,255,255,.07); --scrim: rgba(0,0,0,.42); --rec-bg: #4a2727; --rec-fg: #ffb4ab;
  --shadow-md: 0 1px 2px rgba(0,0,0,.4), 0 10px 28px -10px rgba(0,0,0,.6);
  --sheet: #dcdee2; --sheet-edge: rgba(0,0,0,.45); --cover-drop: rgba(0,0,0,.7);
  color-scheme: dark;
} }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; background: var(--desk); color: var(--fg); overscroll-behavior: none; }
/* the app's height is the visible screen, measured (web/viewport.js --app-h): 100dvh stayed at the keyboard's height on
   the iPad after the keyboard closed, a gray band at the bottom until he zoomed */
body { font: var(--fs-ui)/var(--lh-ui) var(--font-ui); -webkit-font-smoothing: antialiased;
       display: grid; grid-template-rows: auto auto 1fr; height: var(--app-h, 100dvh); overflow: hidden; touch-action: none; }
/* Safari's own pinch and double-tap zoom never act on the app (it has its own zoom, zoom.js): every element pans only,
   unless a rule of its own says more (none, the scroller's pan-y in fit). Form controls keep the browser's own. */
:where(body *:not(input, textarea, select)) { touch-action: pan-x pan-y; }
/* the Live strip is a row of its own: it pushes the pages down, never covers them (Roy 28/09) */
#bar { grid-row: 1; } #flowStrip { grid-row: 2; } #main, #lib { grid-row: 3; }
button { font: inherit; color: inherit; align-items: normal; }   /* (older Safari's own sheet gave every button align-items: flex-start: a flex column
   button then shrank its children to their content, so a notebook card's cover was 0 x 0 and its names ran wide, Roy's iPad 05/10) */
button:focus-visible, textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
#bar, #pages, .pop, .selmenu, .sheet { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }

/* ---------- top bar: brand left, tools middle, Claude and notebook right ---------- */
/* sticky, not relative: Safari 26 on the iPhone keeps its own top-edge blur off a sticky top header (Roy 25/10: the bar looked smudged) */
#bar { position: sticky; top: 0; z-index: 20; display: block; height: calc(var(--bar-h) + env(safe-area-inset-top));
       padding: env(safe-area-inset-top) max(12px, env(safe-area-inset-right)) 0 max(12px, env(safe-area-inset-left));
       background: var(--surface); border-bottom: 1px solid var(--line); }
.grp { display: flex; align-items: center; gap: 2px; min-width: 0; }
/* the three regions are pinned: brand to the physical top-left, tools to the true center, notebook to the top-right */
#brandBox { position: absolute; left: max(10px, env(safe-area-inset-left)); bottom: 6px; display: flex; align-items: center; gap: 2px; }
.grp.tools { position: absolute; left: 50%; bottom: 6px; transform: translateX(-50%); justify-content: center; min-width: max-content; gap: 0; }   /* compact: 44 px targets side by side, groups split by a hairline */
/* timer, +, share: one size; the timer keeps its 44 px slot in every phase and in both of his display modes (the time, or
   the ring alone: the timer's own toggle, Roy 23/10), so nothing beside it moves */
#bar #timerBtn { width: 44px; min-width: 44px; padding: 0; justify-content: center; }
#bar #timerBtn .tmr-time { min-width: 0; font-size: 12px; letter-spacing: -.03em; white-space: nowrap; }
#bar #timerBtn:not([data-show="ring"]) .tmr-ring, #bar #timerBtn[data-phase="done"] .tmr-time { display: none; }

#nbBox { position: absolute; right: max(12px, env(safe-area-inset-right)); bottom: 6px; display: flex; align-items: center; gap: 4px; max-width: 22vw; }
.logoBtn, .eyeBtn { height: 44px; min-width: 44px; border: 0; background: none; border-radius: var(--r); padding: 0 6px; display: inline-flex; align-items: center; cursor: pointer; color: var(--fg); }
.logoBtn:active, .eyeBtn:active, .logoBtn[aria-expanded="true"], .eyeBtn[aria-expanded="true"] { background: var(--chip); }
.wordmark { font: 600 19px/1 -apple-system, BlinkMacSystemFont, "SF Pro Display", system-ui, sans-serif; letter-spacing: -0.01em; white-space: nowrap; }
.logo { display: block; }
.nbname { height: 44px; min-width: 44px; max-width: 100%; border: 0; background: none; border-radius: var(--r); padding: 0 8px; cursor: pointer;
          font: 600 15px/1 var(--font-ui); color: var(--fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nbname:active { background: var(--chip); }
.b { flex: none; min-width: 44px; height: 44px; padding: 0 10px; border: 0; background: none; border-radius: var(--r);
     display: inline-grid; grid-auto-flow: column; gap: 6px; place-items: center; cursor: pointer; transition: background-color var(--t) var(--ease); }
.b svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.b:active { background: var(--chip); }
.b.on { background: var(--chip); }
.b:disabled { opacity: .32; cursor: default; }
.b.small { height: 44px; min-width: 44px; padding: 0 10px; font-size: 13px; color: var(--muted); }
.b.small svg { width: 18px; height: 18px; }
.b.primary { background: var(--fg); color: var(--on-fg); font-weight: 600; padding: 0 16px; }
.b.primary:active { background: var(--fg-press); }
.b.wide { width: 100%; margin-top: 10px; }
#homeBody .hint { color: var(--muted); font-size: 13px; margin: 8px 2px 0; }
#homeBody .back { margin-bottom: 4px; }
.b.nb { max-width: 200px; color: var(--muted); }
.b.nb span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 130px; }
.sep { flex: none; width: 1px; height: 20px; background: var(--line); margin: 0 4px; }
#colorBtn .erasemark { display: none; }
#colorBtn.erasing .dot { display: none; }
#colorBtn.erasing .erasemark { display: block; }
.dot { width: 18px; height: 18px; border-radius: 50%; display: block; box-shadow: inset 0 0 0 .5px var(--ring); }   /* the color in use: calm, the icons' visual size (Roy 23/10); the faint ring only keeps a white pen visible */

.chip { flex: none; min-width: 44px; justify-content: center; display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 14px 0 12px; border: 1px solid var(--line);
        border-radius: var(--r); background: var(--surface); cursor: pointer; color: var(--fg); white-space: nowrap; }
.chip[aria-expanded="true"] { border-color: var(--accent); }
.led { width: 9px; height: 9px; border-radius: 50%; flex: none; box-shadow: inset 0 0 0 1.5px var(--faint); }
.led.listening, .led.working { background: var(--accent); box-shadow: none; }
.led.busy { background: var(--warn); box-shadow: none; }
.led.asked, .led.looking, .led.writing { background: var(--accent); box-shadow: none; animation: pulse var(--t-pulse) ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .3; } }
.net { font-size: 13px; color: var(--warn); white-space: nowrap; padding: 0 6px; max-width: 170px; overflow: hidden; text-overflow: ellipsis; }
/* (Roy 04/10) the connection note never moves anything: a small quiet pill above the page, out of the layout (fixed, no
   reflow of the bar or the side menu), not in the way of the pen (no pointer events), fading in and out */
#net.net { position: fixed; z-index: 70; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%);
  max-width: min(82vw, 440px); padding: 6px 14px 6px 12px; border-radius: 999px; background: var(--surface, #fff); color: var(--fg, #222);
  box-shadow: 0 1px 8px rgb(0 0 0 / .14); font: 13px/1.3 var(--font-ui); display: inline-flex; align-items: center; gap: 8px;
  pointer-events: none; transform: translate(-50%, calc(100% + 24px + env(safe-area-inset-bottom, 0px))); transition: transform var(--t) var(--ease); }   /* (it rises into place; app.js setNet shows and hides it at once) */
#net.net::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #c98a1b; flex: none; }
#net.net[data-state=signin]::before, #net.net[data-state=quota]::before, #net.net[data-state=nodevice]::before, #net.net[data-state=held]::before { background: #b3261e; }
/* (perf 14/10) ink kept on the device while it syncs is no alarm: a quiet grey dot */
#net.net[data-state=syncing]::before { background: #8a8f98; }
/* (UX audit 15/10 #12) reconnecting, in progress: its own calm blue dot (it showed the offline amber) */
#net.net[data-state=reconnecting]::before { background: #2f6fde; }
/* (UX audit 15/10 #5) its words wrap rather than being cut */
#net.net { white-space: normal; text-overflow: clip; overflow: visible; }
#net.net.on { transform: translateX(-50%); }

/* ---------- main: pages beside Claude's panel, never under it ---------- */
#main { display: flex; min-height: 0; min-width: 0; }
#scroller { flex: 1 1 auto; min-width: 0; overflow: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
            touch-action: pan-x pan-y; padding: 16px 16px 40px; position: relative; overflow-anchor: none; }
/* fit width (double tap): the page is the screen's width, nothing to pan sideways, scrolling runs straight down */
#scroller.fit { padding-inline: 0; overflow-x: hidden; touch-action: pan-y; }
#pages { margin: 0 auto; display: flex; flex-direction: column; gap: calc(var(--pw, 800px) * 0.0145);   /* the gap scales with the page: a width change is one uniform scale, exact for every page */ transform-origin: 0 0; width: var(--pw, 800px); }
/* the zoom camera (zoom.js): paper clones, the ink canvas, then Claude's text and page numbers, all under the live pen canvas */
#zoomcv { position: fixed; left: 0; top: 0; pointer-events: none; z-index: 4; }
.zoomlayer { position: fixed; overflow: hidden; pointer-events: none; z-index: 3; }
#zoomback { background: var(--desk); }
#zoomfront { z-index: 4; }
.zoomworld { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.zoomworld > .page { position: absolute; }
#zoomfront .page { background: none; box-shadow: none; }
#zoomfront .page::before, #zoomfront .page::after { display: none; }   /* the ruling belongs to the paper layer, under the ink */
.addpage { display: block; margin: 20px auto 0; height: 44px; padding: 0 20px; border: 1px dashed var(--dash); background: none;
           border-radius: var(--r); color: var(--muted); cursor: pointer; }
.page { cursor: crosshair; }
/* black paper (Roy's first user 22/10): the selection, its handles, a shape's handles and the crop frame drawn in the
   graphite theme's light ink and surface, so they read on the dark page whatever the app's own theme */
:root[data-dkpaper] .page :is(.sel, .shp-h, .cropui) { --fg: #e6e7e9; --surface: #313337; }
.page .sel { position: absolute; border: 1.5px dashed var(--fg); border-radius: var(--r-sm); pointer-events: auto; touch-action: none; }
/* resize handles: a 36 px target around a quiet 10 px dot at each corner, shown only with a selection, hidden mid-move */
.page .sel .hdl { position: absolute; width: 36px; height: 36px; margin: -18px; touch-action: none; cursor: nwse-resize; }
.page .sel .hdl::after { content: ''; position: absolute; left: 13px; top: 13px; width: 10px; height: 10px; border-radius: 50%; background: var(--surface, #fff); box-shadow: 0 0 0 1.5px var(--fg); }
.page .sel .hdl.nw { left: 0; top: 0; } .page .sel .hdl.ne { right: 0; top: 0; cursor: nesw-resize; }
.page .sel .hdl.sw { left: 0; bottom: 0; cursor: nesw-resize; } .page .sel .hdl.se { right: 0; bottom: 0; }
.page .sel.moving .hdl { visibility: hidden; }
.page .sel.locked { border-style: dotted; }
/* one snapped shape selected (shapes v2, input.js shapeHandles): its own points, a filled 12 px dot in a 36 px target, in
   place of the frame's corner handles */
.page .sel.shape .hdl { display: none; }
.page .shp-h { position: absolute; width: 44px; height: 44px; margin: -22px; touch-action: none; cursor: move; pointer-events: auto; }   /* (UX audit 15/10 #7: 36 px) */
.page .shp-h::after { content: ''; position: absolute; left: 16px; top: 16px; width: 12px; height: 12px; border-radius: 50%; background: var(--fg); box-shadow: 0 0 0 2px var(--surface, #fff); }
/* "undo shape" after a snap (input.js shapeChip): the selection menu's dark pill, small, a 44 px target, 3 s */
.shpchip { position: fixed; z-index: 100010; pointer-events: none; min-height: 44px; padding: 0 16px; border: 0; border-radius: 22px; background: #111; color: #fff; font: inherit; font-size: 14px; box-shadow: var(--shadow-md); animation: drop var(--t) var(--ease); touch-action: manipulation; cursor: pointer; }
/* crop (web/crop.js): the whole picture dimmed, the part kept clear inside a frame with eight handles */
.page .cropui { position: absolute; z-index: 30; pointer-events: auto; touch-action: none; overflow: visible; }
.page .cropui .cropimg { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .35; pointer-events: none; -webkit-user-drag: none; }
.page .cropui .cropr { position: absolute; box-shadow: 0 0 0 1.5px var(--fg), 0 0 0 3px var(--paper, #fff); cursor: move; touch-action: none; }
.page .cropui .cropwin { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.page .cropui .cropwin img { position: absolute; max-width: none; pointer-events: none; -webkit-user-drag: none; }
.page .cropui .ch { position: absolute; width: 44px; height: 44px; margin: -22px; touch-action: none; }
.page .cropui .ch::after { content: ''; position: absolute; left: 16px; top: 16px; width: 12px; height: 12px; border-radius: 2px; background: var(--paper, #fff); box-shadow: 0 0 0 1.5px #111; }
.page .cropui .ch.nw { left: 0; top: 0; cursor: nwse-resize; } .page .cropui .ch.ne { left: 100%; top: 0; cursor: nesw-resize; }
.page .cropui .ch.se { left: 100%; top: 100%; cursor: nwse-resize; } .page .cropui .ch.sw { left: 0; top: 100%; cursor: nesw-resize; }
.page .cropui .ch.n { left: 50%; top: 0; cursor: ns-resize; } .page .cropui .ch.s { left: 50%; top: 100%; cursor: ns-resize; }
.page .cropui .ch.w { left: 0; top: 50%; cursor: ew-resize; } .page .cropui .ch.e { left: 100%; top: 50%; cursor: ew-resize; }
.cropbar { left: 50%; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); }
.cropbar button.primary { background: #fff; color: #111; font-weight: 600; }
.cropbar button.primary:active { background: #ddd; }

#panel, #home { flex: none; display: flex; flex-direction: column; background: var(--surface); min-height: 0; min-width: 0; position: relative; }
#panel[hidden], #home[hidden] { display: none; }
#panel.enter { animation: slide-l var(--t) var(--ease); } #home.enter { animation: slide-r var(--t) var(--ease); }
@keyframes slide-l { from { transform: translateX(-24px); } }
@keyframes slide-r { from { transform: translateX(24px); } }
.resize { position: absolute; inset-block: 0; inset-inline-start: -6px; width: 12px; cursor: col-resize; touch-action: none; z-index: 2; }
.resize::after { content: ""; position: absolute; inset-block: 50%; inset-inline-start: 4px; width: 4px; height: 44px; margin-top: -22px; border-radius: var(--r-xs); background: var(--grip); }
.htabs { display: flex; gap: 2px; flex: 1; }
.htab { height: 44px; min-width: 44px; padding: 0 14px; border: 0; background: none; border-radius: var(--r); font: inherit; color: var(--muted); cursor: pointer; }
.htab.on { background: var(--chip); color: var(--fg); font-weight: 600; }
.hbody { flex: 1; overflow-y: auto; padding: 8px 12px 24px; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.hbody h3 { font-size: 13px; font-weight: 600; color: var(--muted); margin: 18px 6px 6px; }
.hbody .row { display: flex; flex-wrap: wrap; gap: 6px; }
.hbody .menu { min-width: 0; }
.hbody .note { color: var(--muted); font-size: 13px; line-height: 1.5; padding: 4px 6px; }
.hbody .sess { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 6px 10px; border-radius: var(--r); }
.hbody .sess.on { background: var(--accent-soft); }
.hbody .tune label { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; font-size: 13px; margin: 6px 6px; }
.hbody .tune input[type=range] { grid-column: 1 / -1; width: 100%; height: 44px; margin: 0; }   /* a thumb Roy can hit */
.hbody .folder { font-size: 13px; color: var(--muted); padding: 10px 12px 2px; }
.a2hs { position: fixed; z-index: 31; top: calc(var(--bar-h) + env(safe-area-inset-top) + 8px); left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 6px;
        background: var(--surface); border-radius: var(--r-lg); box-shadow: 0 0 0 1px var(--edge), var(--shadow-md); padding: 4px 6px 4px 14px; animation: rise var(--t) var(--ease); max-width: calc(100vw - 32px); }
body.claude-faded .page .marks, body.claude-faded .page .mark-note, body.claude-faded .page .ctext, body.claude-faded .page .cblock, body.claude-faded .page .askg { opacity: .3; }
body.claude-hidden .page .marks, body.claude-hidden .page .mark-note, body.claude-hidden .page .ctext, body.claude-hidden .page .cblock, body.claude-hidden .page .askg { display: none; }
@media (orientation: landscape) and (min-width: 1000px) {
  #panel { width: var(--panel-w, min(360px, 34vw)); border-inline-start: 1px solid var(--line); }
  #home { width: min(360px, 34vw); border-inline-end: 1px solid var(--line); }
  .grab { display: none; }
}
@media not ((orientation: landscape) and (min-width: 1000px)) {
  #main { flex-direction: column; }
  #panel, #home { height: var(--sheet-h, 34%); min-height: 180px; max-height: 60%; border-top: 1px solid var(--line); order: 2; }
  .resize { display: none; }
  .grab { height: 18px; flex: none; display: grid; place-items: center; cursor: row-resize; touch-action: none; }
  .grab::before { content: ""; width: 40px; height: 5px; border-radius: var(--r-xs); background: var(--grip); }
}
.phead { display: flex; align-items: center; gap: 6px; padding: 8px 8px 8px 12px; padding-inline-start: 16px; border-bottom: 1px solid var(--line); }
.ptitle { flex: 1; min-width: 0; }
.ptitle b { font-size: 17px; font-weight: 600; }
#pstate { color: var(--muted); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#marksBtn[aria-pressed="false"] { text-decoration: line-through; }
#msgs { flex: 1; overflow-y: auto; padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.m { line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }
.m.roy { align-self: flex-start; background: var(--desk); padding: 8px 12px; border-radius: var(--r); max-width: 88%; }
.m.roy.empty { color: var(--muted); font-size: 13px; background: none; padding: 0; }
.m.claude { align-self: stretch; }
.m time { display: block; font-size: 12px; color: var(--faint); margin-top: 2px; }
.m .katex, .fs-text .katex { direction: ltr; unicode-bidi: isolate; font-size: 1.05em; }
.m .katex-display { margin: .4em 0; overflow-x: auto; overflow-y: hidden; }
.empty-state { color: var(--muted); line-height: 1.6; }
#compose { display: flex; gap: 8px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); align-items: flex-end; }
#note { flex: 1; resize: none; min-height: 44px; max-height: 140px; border: 1px solid var(--line); border-radius: var(--r); padding: 11px 12px;
        font: inherit; font-size: 16px; color: var(--fg); background: var(--surface); }
#note:focus { border-color: var(--fg); }
#mic.rec { background: var(--rec-bg); color: var(--rec-fg); }

/* ---------- the live stroke layer ---------- */
#live { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100dvh; pointer-events: none; z-index: 5; }

/* ---------- floating surfaces ---------- */
.preview { position: fixed; z-index: 30; top: calc(var(--bar-h) + env(safe-area-inset-top) + 8px); right: max(12px, env(safe-area-inset-right));
           width: min(360px, calc(100vw - 24px)); display: flex; gap: 4px; align-items: flex-start; background: var(--surface); border-radius: var(--r-lg);
           box-shadow: 0 0 0 1px var(--edge), var(--shadow-md); padding: 6px 6px 6px 14px; animation: drop var(--t) var(--ease);
           pointer-events: none; }                 /* the card never swallows a pen stroke; only its buttons take taps */
.preview .b { pointer-events: auto; }
.preview #pvText { align-self: center; }
.preview #pvText { flex: 1; min-width: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.5; }
.preview #pvText::before { content: "קלוד: "; color: var(--accent); font-weight: 600; }
.pop { position: fixed; z-index: 40; background: var(--surface); border-radius: 18px; box-shadow: 0 0 0 1px var(--edge), 0 2px 6px rgba(0,0,0,.06), 0 28px 60px -28px rgba(0,0,0,.38); padding: 12px; animation: drop var(--t) var(--ease);
       overflow-y: auto; overscroll-behavior: contain; }
.pop .row { display: flex; gap: 4px; align-items: center; }
.pop .row + .row { margin-top: 6px; }
.pop .lbl { font-size: 13px; font-weight: 700; color: var(--muted); padding: 4px 6px 4px; }
.sw { width: 44px; height: 44px; border: 0; background: none; border-radius: var(--r-round); display: grid; place-items: center; cursor: pointer; }
.sw i { width: 24px; height: 24px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--ring); }
.sw.on { box-shadow: inset 0 0 0 2px var(--fg); }
.sz i { background: var(--fg); border-radius: 50%; display: block; }
/* the pen's width presets in millimetres (13/10): the dot over its number */
.sz:has(small) { align-content: center; gap: 3px; }
.sz small { font-size: var(--fs-xs); line-height: 1; color: var(--muted); font-variant-numeric: tabular-nums; }   /* (14 px on a phone) */
.sw.pin:not(.on) i { box-shadow: inset 0 0 0 1px var(--ring); }   /* (16/10) a pinned color wears no selection ring: the ring is the current color only */
.sw.add { position: relative; font: 600 20px/1 var(--font-ui); color: var(--muted); border: 1.5px dashed var(--dash); }
.hidden-color { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer; }
.wslider { width: 100%; margin: 4px 0 2px; }
/* advanced pen settings (web/colors.js advanced): a quiet fold under the width */
.advpen { margin-top: 8px; border-top: 1px solid var(--line); padding-top: 6px; }
.advpen .advtog { width: 100%; justify-content: flex-start; }
.advpen .advbody { padding: 2px 6px 4px; }
.advpen .advrow { display: flex; flex-direction: column; font-size: 13px; color: var(--muted); margin-top: 4px; }
.pv { display: block; margin: 2px auto 0; }
.menu { display: flex; flex-direction: column; min-width: 240px; }
.menu button { height: 44px; border: 0; background: none; border-radius: 10px; text-align: start; padding: 0 12px; cursor: pointer; display: flex; align-items: center; gap: 10px; font-size: var(--fs-ui); color: var(--fg); transition: background var(--t) var(--ease); }
@media (hover: hover) { .menu button:hover { background: color-mix(in srgb, var(--fg) 5%, transparent); } }
.menu button:active, .menu button.on { background: var(--chip); }
.menu hr { border: 0; border-top: 1px solid var(--line); margin: 6px 0; }
.iconmenu { min-width: 220px; }
.iconmenu svg { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.menu .tog::after { content: ""; margin-inline-start: auto; width: 34px; height: 20px; border-radius: var(--r); background: var(--knob-off); transition: background-color var(--t) var(--ease); }
.menu .tog.on::after { background: var(--fg); }
.selmenu { position: fixed; z-index: 35; display: flex; gap: 2px; background: #202121; color: #fff; border-radius: 14px; padding: 4px; box-shadow: 0 18px 40px -18px rgba(0,0,0,.5); animation: drop var(--t) var(--ease); }
.selmenu button { height: 44px; padding: 0 12px; border: 0; background: none; color: #fff; border-radius: var(--r); cursor: pointer; white-space: nowrap; }
.selmenu button:active { background: #3a3c3c; }
.selmenu button.claude { color: #9db8ff; }
.selmenu button.pdf { color: #bdbdbd; }
.selmenu button.pdf.on { color: #fff; box-shadow: inset 0 0 0 1.5px #9db8ff; }
.xprev { position: relative; width: min(100%, 300px); margin: 6px auto 12px; border-radius: var(--r-sm); overflow: hidden; box-shadow: 0 0 0 1px var(--line), var(--shadow-md); background: var(--paper); pointer-events: none; }
.xprev .page { width: 100%; cursor: default; }
.xprev .xno { position: absolute; bottom: 6px; inset-inline-start: 8px; font-size: 12px; color: var(--muted); }
.sheet { position: fixed; inset: 0; z-index: 45; background: var(--scrim); display: grid; place-items: center; padding: 20px; }
.sheet-card { width: min(560px, 100%); max-height: min(80vh, 720px); max-height: min(80dvh, 720px); overflow: auto; background: var(--surface); border-radius: 22px; box-shadow: 0 0 0 1px var(--edge), 0 40px 80px -40px rgba(0,0,0,.45); padding: 20px 22px; animation: rise var(--t) var(--ease); }
.sheet-card h2 { font-size: 21px; font-weight: 700; margin: 4px 4px 14px; }
.nbrow { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; border: 0; background: none; border-radius: var(--r); padding: 8px 12px; text-align: start; cursor: pointer; }
.nbrow:active, .nbrow.on { background: var(--chip); }
.nbrow .t { flex: 1; min-width: 0; }
.nbrow .t b { display: block; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nbrow .t small { color: var(--muted); }
.thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 14px; }
.thumb { border: 0; background: none; padding: 0; cursor: pointer; text-align: center; color: var(--muted); font-size: 13px; }
.thumb .tpage { display: block; width: 100%; aspect-ratio: 1000/1414; background: var(--paper); border-radius: var(--r-xs); box-shadow: 0 0 0 1px var(--line); margin-bottom: 6px; }
.thumb.on .tpage { box-shadow: 0 0 0 2px var(--fg); }
.thumb { position: relative; }
.thumb.picked .tpage { box-shadow: 0 0 0 3px var(--accent); }
.thumb.picked::after { content: '✓'; position: absolute; top: 6px; inset-inline-end: 6px; width: 22px; height: 22px; border-radius: 50%; background: var(--accent); color: #fff; font-size: 13px; line-height: 22px; }
.pgacts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 12px; }
.pgacts .lbl { flex-basis: 100%; margin: 4px 0 0; }
.pgacts .pgtpl { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 8px; }
.pgcount { font-weight: 600; margin-inline-end: auto; }
.toast { position: fixed; z-index: 50; bottom: calc(24px + env(safe-area-inset-bottom)); left: 50%; transform: translate(-50%, calc(100% + 32px + env(safe-area-inset-bottom))); visibility: hidden;
         background: #111; color: #fff; padding: 10px 18px; border-radius: var(--r); pointer-events: none; transition: transform var(--t) var(--ease), visibility 0s var(--ease) var(--t); }
.toast.show { visibility: visible; transform: translate(-50%, 0); transition: transform var(--t) var(--ease), visibility 0s var(--ease); }
/* (UX audit 15/10 #5) the toast and the sync bar stacked, both whole: while the bar shows (app.js setNet: .net-on and its
   height), the toast stands 10 px above it, above it in z too; its words wrap within the screen, never cut */
.toast { max-width: min(90vw, 520px); text-align: center; }
.net-on .toast { bottom: calc(26px + var(--net-h, 32px) + env(safe-area-inset-bottom)); z-index: 71; }
/* the blind pen test's label (web/penengine.js, ?pen=ab): the page's letter only, never which engine; out of the pen's way */
#penab { position: fixed; z-index: 40; inset-inline-start: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); pointer-events: none;
  padding: 4px 10px; border-radius: 999px; background: var(--chip); color: var(--fg); font: var(--fw-bold) var(--fs-sm)/var(--lh-ui) var(--font-ui); }
/* the import's progress (web/nav.js importCard): above the toast's place (a toast during an import never covers it), phone width first, one line of words, a bar and
   a 44 px cancel; graphite on the surface, RTL from the document */
.impcard { position: fixed; z-index: 51; left: 50%; transform: translateX(-50%); bottom: calc(76px + env(safe-area-inset-bottom));
           width: min(420px, calc(100vw - 32px)); display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 6px 12px;
           padding-block: 10px; padding-inline: 16px 12px; background: var(--surface); color: var(--fg); border-radius: var(--r); box-shadow: var(--shadow-md);
           font: var(--fw-reg) var(--fs-ui)/var(--lh-ui) var(--font-ui); }
.impcard-msg { grid-column: 1; font-variant-numeric: tabular-nums; }
.impcard progress { grid-column: 1; grid-row: 2; width: 100%; height: 6px; accent-color: var(--fg); }
.impcard-stop { grid-column: 2; grid-row: 1 / span 2; min-height: 44px; min-width: 44px; padding: 0 14px; border: 1px solid var(--line);
                border-radius: var(--r-sm); background: transparent; color: inherit; font: inherit; cursor: pointer; }
.impcard-stop:disabled { opacity: .5; }
/* (Roy 05/10) views move or appear at once, never fade: things anchored below a trigger drop a few px into place, things
   from the bottom or the page rise; 'translate' composes with an element's own transform (centred banners keep theirs) */
@keyframes rise { from { translate: 0 10px; } }
@keyframes drop { from { translate: 0 -6px; } }
.newver { position: fixed; z-index: 30; bottom: calc(16px + env(safe-area-inset-bottom)); left: max(16px, env(safe-area-inset-left)); height: 44px;
          padding: 0 16px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); color: var(--fg); box-shadow: var(--shadow-md);
          font: inherit; cursor: pointer; animation: rise var(--t) var(--ease); }
#dbg { position: fixed; z-index: 60; bottom: 12px; inset-inline-end: 12px; background: rgba(0,0,0,.86); color: #fff; font: 12px/1.5 ui-monospace, Menlo, monospace;
       padding: 8px 10px; border-radius: var(--r); white-space: pre-wrap; max-width: calc(100vw - 24px); pointer-events: none; }
#dbg .txt { text-align: left; } [dir=rtl] #dbg .txt { text-align: right; }   /* (lines keep their own direction, all aligned with the app's) */
#dbg .row { display: flex; gap: 6px; margin-top: 6px; pointer-events: auto; }   /* (the numbers never take a stroke: only the buttons take a touch) */
#dbg button { height: 32px; padding: 0 10px; border-radius: var(--r-sm); border: 0; background: var(--surface); color: #111; font: inherit; }
#tune { position: fixed; z-index: 60; top: calc(var(--bar-h) + 12px); inset-inline-start: 12px; width: 280px; background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--shadow-md); padding: 12px; direction: rtl; }
#tune label { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; font-size: 13px; margin-bottom: 6px; }
#tune input[type=range] { grid-column: 1 / -1; width: 100%; }
#tune .row { display: flex; gap: 6px; margin-top: 8px; }

/* left-handed: the resting hand is on the left, so Claude's panel docks on the right */
body.lefty #main { flex-direction: row-reverse; }
@media not ((orientation: landscape) and (min-width: 1000px)) { body.lefty #main { flex-direction: column; } }

/* narrow screens: the bar keeps every control reachable */
@media (max-width: 900px) {
  .wordmark { font-size: 17px; }
  #nbBox { max-width: 20vw; }
  .sep { margin: 0 3px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .led.asked, .led.looking, .led.writing { opacity: 1; }
}

/* ---------- notebooks: search, folders that fold, a new notebook as Roy designs it ---------- */
.nbtop { display: flex; gap: 8px; align-items: center; margin-bottom: 6px; }
.hbody .search, .hbody .field { flex: 1; min-width: 0; height: 44px; border: 1px solid var(--line); border-radius: var(--r); padding: 0 12px;
  font: inherit; font-size: 16px; color: var(--fg); background: var(--surface); }
.hbody .field { display: block; width: 100%; margin: 6px 0; }
.hbody .search:focus, .hbody .field:focus { border-color: var(--accent); }
.hbody .lbl { font-size: 13px; color: var(--muted); padding: 12px 2px 4px; }
.fold { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 44px; border: 0; background: none; border-radius: var(--r);
  padding: 0 10px; text-align: start; cursor: pointer; color: var(--fg); margin-top: 4px; }
.fold:active { background: var(--chip); }
.fold b { flex: 1; font-weight: 600; font-size: 14px; }
.fold small { color: var(--muted); font-size: 13px; min-width: 22px; text-align: center; background: var(--chip); border-radius: var(--r); padding: 1px 6px; }
.nbrow .paper { flex: none; width: 22px; height: 30px; border-radius: var(--r-xs); box-shadow: inset 0 0 0 1px var(--ring); }
.nblist .nbrow { padding-inline-start: 22px; }
.sw.paper i { width: 28px; height: 28px; border-radius: var(--r-sm); }
.sw.paper.on i { box-shadow: inset 0 0 0 1px var(--ring), 0 0 0 2px var(--surface), 0 0 0 3.5px var(--fg); }
.pvpage { width: 120px; aspect-ratio: 1000 / 1414; margin: 12px auto 4px; border-radius: var(--r-xs); box-shadow: 0 0 0 1px var(--line), var(--shadow-md);
  background-repeat: repeat; }
.pvpage[data-tpl="lines"], .pvpage[data-tpl="assignment"] { background-image: linear-gradient(transparent 7.4px, var(--rule-l, #dfe6f1) 7.4px, var(--rule-l, #dfe6f1) 8.4px); background-size: 100% 8.4px; }
.pvpage[data-tpl="grid"] { background-image: linear-gradient(var(--rule-g, #e8ecf2) 1px, transparent 1px), linear-gradient(90deg, var(--rule-g, #e8ecf2) 1px, transparent 1px); background-size: 8.4px 8.4px; }
.pvpage[data-tpl="grid-s"] { background-image: linear-gradient(var(--rule-g, #e8ecf2) 1px, transparent 1px), linear-gradient(90deg, var(--rule-g, #e8ecf2) 1px, transparent 1px); background-size: 5.12px 5.12px; }   /* 0.609 of the grid (0.7 x 0.87) */

/* ---------- Flow: the pending dot where a line's mark will land ---------- */
.flowbtn .fc { display: none; }
.flowbtn.on { background: var(--accent-soft); color: var(--accent); }
.flowdot { position: absolute; width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; border-radius: 50%; background: #9aa0a6;
  opacity: .55; pointer-events: none; animation: flowpulse 1s ease-in-out infinite; }
@keyframes flowpulse { 50% { opacity: .15; transform: scale(.7); } }
@media (prefers-reduced-motion: reduce) { .flowdot { animation: none; } }

/* ---------- Flow: the eye is the switch, the strip carries status, replies and questions ---------- */
/* Flow on: the open, moving eye is the whole signal (Roy 28/09: no frame around it) */
.eyeBtn.flow, .eyeBtn.flow[aria-expanded="true"] { background: none; }
.fstrip { position: relative; z-index: 30;
  min-height: 44px; display: flex; align-items: center; gap: 10px; padding: 6px max(16px, env(safe-area-inset-right)) 6px max(16px, env(safe-area-inset-left));
  background: var(--surface); background: color-mix(in srgb, var(--surface) 92%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line); touch-action: none; direction: rtl; }
.fstrip .fs-text { flex: 1; min-width: 0; font-size: 16px; line-height: 1.45; color: var(--fg); overflow-wrap: anywhere; }
.fstrip .fs-dot { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); opacity: .55; }
.fstrip[data-state="reading"] .fs-dot, .fstrip[data-state="stream"] .fs-dot, .fstrip[data-state="action"] .fs-dot { animation: pulse 1s ease-in-out infinite; opacity: 1; }
.fstrip[data-tone="ok"] .fs-dot { background: #1e9e4a; opacity: 1; }
.fstrip[data-tone="error"] .fs-dot { background: #d62828; opacity: 1; }
.fstrip[data-tone="unsure"] .fs-dot { background: #9aa0a6; opacity: 1; }
.fstrip[data-state="waiting"] .fs-text, .fstrip[data-state="idle"] .fs-text { color: var(--muted); }
.fstrip .fs-ask { display: flex; gap: 6px; flex: none; }
.fstrip .fs-ask button { width: 52px; height: 44px; border: 0; border-radius: var(--r); font-size: 20px; cursor: pointer; }
.fstrip .fs-yes { background: #1e9e4a; color: #fff; }
.fstrip .fs-choices { display: flex; gap: 6px; flex: none; flex-wrap: wrap; justify-content: flex-end; max-width: 55%; }
.fstrip .fs-choices button { min-height: 44px; padding: 0 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--fg); font: inherit; font-size: 14px; cursor: pointer; }
.fstrip .fs-choices button.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.fstrip .fs-deep { flex: none; width: 44px; height: 44px; border: 0; border-radius: var(--r); background: none; color: var(--muted); cursor: pointer; display: grid; place-items: center; }
.fstrip .fs-deep svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.fstrip .fs-deep:active { background: var(--chip); }
.fstrip .fs-no { background: var(--chip); color: var(--fg); }
@media (prefers-reduced-motion: reduce) { .fstrip .fs-dot { animation: none !important; } }

/* ---------- settings: quiet groups that open on tap ---------- */
.sgroup { border-bottom: 1px solid var(--line); }
.sgroup .shead { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 52px; border: 0; background: none; padding: 0 8px;
  text-align: start; cursor: pointer; color: var(--fg); border-radius: var(--r); font: inherit; }
.sgroup .shead:active { background: var(--chip); }
.sgroup .shead b { font-weight: 600; font-size: 15px; }
.sgroup .shead small { flex: 1; color: var(--muted); font-size: 13px; text-align: end; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sgroup .sbody { padding: 2px 4px 14px; }
@media (prefers-reduced-motion: reduce) { .sgroup .sbody { animation: none; } }

/* the chat panel's actions, and the wipe that clears Claude's writing off the board */
.pacts { display: flex; gap: 4px; padding: 4px 10px; border-bottom: 1px solid var(--line); }
.page .wipe { position: absolute; top: 0; bottom: 0; left: 0; width: 22%; pointer-events: none; z-index: 5;
  background: var(--accent-soft); opacity: .9; animation: wipe var(--t) var(--ease) forwards; }
@keyframes wipe { from { transform: translateX(460%); } to { transform: translateX(-100%); } }

/* ---------- print: the pages only, one per sheet, the paper's own color ---------- */
@media print {
  #bar, #home, #panel, #flowStrip, #preview, #pop, #selmenu, #sheet, #toast, #penab, #addpage, #live, #zoomcv, .zoomlayer, .flowdot, .page .pno, .page .sel, .page .shp-h, .shpchip, .page .cropui, .cropbar { display: none !important; }
  html, body { height: auto; overflow: visible; background: #fff; display: block; }
  #main, #scroller { display: block; overflow: visible; height: auto; padding: 0; }
  #pages { --pw: 100% !important; width: 100% !important; }
  .page { width: 100% !important; box-shadow: none !important; margin: 0 !important; break-after: page; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
}

.menu button.danger { color: #b3261e; }
.thumb.held { box-shadow: 0 0 0 2.5px var(--accent); }

/* the notebook panel: this notebook, then all notebooks */
.hbody .ncard { background: var(--surface); border-radius: var(--r-lg); box-shadow: 0 0 0 1px var(--line); padding: 10px 10px 12px; margin: 8px 0 14px; }
.hbody .ncard h2 { font-size: 16px; font-weight: 600; margin: 4px 6px 2px; }
.hbody .ncard .where { color: var(--muted); font-size: 13px; margin: 0 6px 6px; }
.hbody .ncard .row { margin: 8px 0; }

/* the fields that draw their own border keep a visible focus ring for the keyboard */
#note:focus-visible, .hbody .search:focus-visible, .hbody .field:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
body.dash #flowStrip { display: none; }                          /* Flow is for the pages, not the dashboard */
.dcard .cover { overflow: hidden; }
.dcard .cover img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
/* the pages panel's picking actions read as buttons: outlined chips, delete in red */
.pgacts .b.small { border: 1px solid var(--line); border-radius: 999px; color: var(--fg); padding: 0 14px; background: var(--surface); }
.pgacts .b.small.danger { color: #b3261e; border-color: #b3261e; border-color: color-mix(in srgb, #b3261e 35%, var(--line)); }
/* eraser sizes: hollow circles at the eraser's real size on the page */
.esizes { justify-content: space-around; align-items: center; }
.esz i { background: none; box-shadow: inset 0 0 0 1.5px var(--fg); border-radius: 50%; display: block; }
.esz.on i { box-shadow: inset 0 0 0 1.5px var(--fg), 0 0 0 2px var(--surface), 0 0 0 3.5px var(--accent); }
/* layers (layers.js), in the settings */
.lylist { display: flex; flex-direction: column; gap: 2px; min-width: 240px; }
.lyrow { display: grid; grid-template-columns: 18px 1fr auto 20px; align-items: center; gap: 10px; min-height: 48px; padding: 0 12px;
  border: 0; border-radius: var(--r); background: none; color: var(--fg); font: inherit; text-align: start; cursor: pointer; }
.lyrow b { font-weight: 500; }
.lyrow small { color: var(--muted); font-size: 12px; }
.lyrow .lydot { width: 12px; height: 12px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--muted); }
.lyrow.on { background: var(--chip); }
.lyrow.on .lydot { background: var(--accent); box-shadow: none; }
.lyrow.locked b { color: var(--muted); }
.lylock svg { width: 16px; height: 16px; fill: none; stroke: var(--muted); stroke-width: 1.8; display: block; }
.lyadd { min-height: 44px; border: 1px dashed var(--line); border-radius: var(--r); background: none; color: var(--fg); font: inherit; margin: 6px 0; cursor: pointer; }
.seg.lymode { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; padding: 2px; border-radius: var(--r); background: var(--chip); }
.seg.lymode button { min-height: 44px; border: 0; border-radius: calc(var(--r) - 2px); background: none; color: var(--muted); font: inherit; font-size: 13px; cursor: pointer; }
.seg.lymode button.on { background: var(--surface); color: var(--fg); box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.lytoggle { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 48px; margin-top: 6px; padding: 0 4px;
  border: 0; background: none; color: var(--fg); font: inherit; cursor: pointer; }
.lytoggle i { width: 40px; height: 24px; border-radius: 12px; background: var(--line); position: relative; transition: background var(--t) var(--ease); }
.lytoggle i::after { content: ''; position: absolute; top: 3px; inset-inline-start: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.3); transition: inset-inline-start var(--t) var(--ease); }
.lytoggle.on i { background: var(--accent); }
.lytoggle.on i::after { inset-inline-start: 19px; }
.lyadd { width: 100%; }
.fstrip[data-tone="session"] .fs-dot { background: #7a3cff; opacity: 1; }   /* the Claude session that follows the page */
/* the recycle bin (home.js binView) */
.binlist { display: flex; flex-direction: column; gap: 4px; }
.binrow { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 6px 4px; border-bottom: 1px solid var(--line); }
.bininfo { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.bininfo small { color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* =====================================================================================================================
   Redesign 28/09: paper, navigator, companion. One panel language, one row anatomy, one active emphasis.
   ===================================================================================================================== */
:root { --active-ring: inset 0 0 0 1.5px var(--fg); --eye-pupil: var(--accent); --eye-warn: #b3261e; --danger: #b3261e; }
:root[data-theme="graphite"] { --eye-warn: #ffb4ab; --danger: #ffb4ab; }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) { --eye-warn: #ffb4ab; --danger: #ffb4ab; } }

/* ---- the active tool: one emphasis everywhere (bar, popovers, choices) ---- */
.b.on, .b.tool.on, .menu button.on, .lyrow.on, .seg button.on { background: var(--chip); box-shadow: var(--active-ring); color: var(--fg); }
.sw.on i, .sw.paper.on i, .esz.on i { box-shadow: inset 0 0 0 1px var(--ring), 0 0 0 2px var(--surface), 0 0 0 3.5px var(--fg); }
.sw.on { box-shadow: none; }

/* ---- the bar's right side: library, where I am, settings ---- */
#nbBox { max-width: 27vw; gap: 2px; }
.nbname { display: inline-flex; align-items: center; gap: 6px; font-weight: var(--fw-bold); font-size: var(--fs-ui); min-width: 0; }
.nbname > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nbname .nbfolder { color: var(--muted); font-weight: var(--fw-reg); flex: 0 1 auto; max-width: 12vw; margin-inline-end: 2px; }   /* (the folder, quiet, then the notebook: no chevron between, Roy 05/10) */
.nbname[aria-expanded="true"], #setBtn[aria-expanded="true"] { background: var(--chip); }
.wordmark { font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", system-ui, sans-serif; }
@media (max-width: 1365px) { .nbname .nbfolder { display: none; } }

/* ---- the layer indicator beside the writing tools ---- */
.b.lyind { display: none; color: var(--fg); padding: 0 8px; gap: 4px; }
.b.lyind.multi { display: inline-grid; }   /* one layer: nothing to tell; two or more: always visible beside the pen */
.b.lyind svg { width: 18px; height: 18px; }
.b.lyind.multi { color: var(--fg); }
#layerName { font-size: var(--fs-sm); max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#layerName:empty { display: none; }

/* ---- one panel language: head (back, title, extra, close), then a scrolling body ---- */
.pnl { display: flex; flex-direction: column; min-height: 0; }
.pnl-head { display: flex; align-items: center; gap: 4px; min-height: 60px; padding: 8px 8px 8px 8px; padding-inline-start: 16px; border-bottom: 1px solid var(--line); flex: none; }
.pnl-head .pnl-back { margin-inline-start: -10px; }
.pnl-head .pnl-back svg { width: 20px; height: 20px; }
.pnl-tbox { flex: 1; min-width: 0; }
.pnl-title { margin: 0; font-size: 19px; font-weight: var(--fw-bold); line-height: var(--lh-title); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pnl-sub { color: var(--muted); font-size: var(--fs-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pnl-tail { display: flex; align-items: center; }
.pnl-body { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding: 4px 16px 32px; }
.pnl-view { animation: none; }   /* a view replaced in place appears at once; a deeper one slides (below) */
/* a deeper view arrives from the reading end and leaves the way it came: 160 ms, the side set by web/nav.js from the
   panel's own direction (l = from the left, r = from the right), so Hebrew and English mirror each other */
.pnl-view[data-mv="l"] { animation: pnl-from-l var(--t) var(--ease); }
.pnl-view[data-mv="r"] { animation: pnl-from-r var(--t) var(--ease); }
@keyframes pnl-from-l { from { transform: translateX(-18px); } }
@keyframes pnl-from-r { from { transform: translateX(18px); } }
.pnl-body { overflow-x: hidden; }
.pnl-title:focus { outline: none; }   /* the heading takes the focus when a view opens (a screen reader reads it); it is not a control */
#panel .pnl-head .led { margin-inline-end: 4px; }

/* ---- rows: name (and a quiet line), value, one action ---- */
.sgrp { margin: 22px 0 0; }
.sgrp-t { font-size: var(--fs-sm); font-weight: 700; color: var(--muted); margin: 0 6px 8px; }
.sgrp-l { display: flex; flex-direction: column; background: var(--surface); border-radius: 14px; box-shadow: 0 0 0 1px var(--line); overflow: hidden; }   /* a group is one quiet card (25/10) */
.sgrp-note, .hint { color: var(--muted); font-size: var(--fs-sm); line-height: 1.5; margin: 8px 6px 0; }
.srow { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 52px; padding: 10px 14px; border: 0; background: none; color: var(--fg);
  font: inherit; text-align: start; cursor: pointer; border-bottom: 1px solid var(--line); border-radius: 0; }
.sgrp-l > .srow:last-child { border-bottom: 0; }
div.srow { cursor: default; }
button.srow:active { background: var(--chip); }
.srow-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.srow-n { font-size: var(--fs-ui); }
.srow-d { font-size: var(--fs-sm); color: var(--muted); line-height: 1.4; }
.srow[data-pf] .srow-d { font-size: var(--fs-body); color: var(--fg); }   /* (the notebook font: each choice says its sample in itself) */
.srow[data-pf=noto] .srow-d { font-family: "EP Page Noto", var(--font-ui); }
.srow[data-pf=serif] .srow-d { font-family: "EP Page Serif", "EP Page Noto", serif; }
.srow[data-pf=sans] .srow-d { font-family: "EP Page Sans", "EP Page Noto", sans-serif; }
.srow-v { color: var(--muted); font-size: var(--fs-sm); max-width: 45%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.srow-go { display: none; }   /* (round 2: no chevrons; a row that opens a view is .go, its value and its press say it) */
button.srow.go:hover { background: var(--chip); background: color-mix(in srgb, var(--fg) 4%, transparent); }
/* a part of a view still waiting for its data (nav.js sbox): quiet bars in the rows' rhythm, gone as soon as it is filled */
.sbox:empty { height: calc(var(--n, 2) * 52px); margin-top: 18px; background: repeating-linear-gradient(to bottom, transparent 0 16px, var(--chip) 16px 30px, transparent 30px 52px) 4px 0 / 58% 100% no-repeat;
  border-radius: 6px; animation: skpulse 1.1s var(--ease) infinite alternate; }
@keyframes skpulse { from { opacity: .5; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .sbox:empty { animation: none; } }
.srow-check { width: 22px; height: 22px; flex: none; }
.srow-check svg { width: 22px; height: 22px; fill: none; stroke: var(--fg); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.srow.checked .srow-n { font-weight: var(--fw-bold); }
.srow.danger .srow-n { color: var(--danger); }
.srow.quiet .srow-n { color: var(--muted); }
.srow .b.small { flex: none; }
/* the account card (cloud): an initial, the email, the plan and the nearest limit in one line */
.srow.acard { min-height: 68px; }
.avatar { flex: none; width: 40px; height: 40px; border-radius: var(--r-round); display: grid; place-items: center; background: var(--fg); color: var(--on-fg); font-size: var(--fs-title); font-weight: var(--fw-bold); }
.acard .srow-n { font-weight: var(--fw-bold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: start; }
/* the plan sheet (web/plansheet.js): use as a name, a number and a thin meter; Free beside Connect; the state of buying */
.urow { padding: 12px 14px 14px; border-bottom: 1px solid var(--line); }
.sgrp-l > .urow:last-child { border-bottom: 0; }
.urow-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.urow-n { font-size: var(--fs-ui); }
.urow-v { font-size: var(--fs-sm); color: var(--muted); font-variant-numeric: tabular-nums; }
.urow-w { font-size: var(--fs-sm); color: var(--warn); margin-top: 6px; }
.meter { height: 6px; border-radius: 3px; background: var(--chip); margin-top: 8px; overflow: hidden; }
.meter > i { display: block; height: 100%; border-radius: 3px; background: var(--fg); }
.meter.warn > i { background: var(--warn); }
.plan-cmp { width: 100%; border-collapse: collapse; font-size: var(--fs-ui); }
.plan-cmp caption { text-align: start; font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--muted); padding: 0 4px 6px; }
.plan-cmp th, .plan-cmp td { padding: 12px 4px; border-bottom: 1px solid var(--line); text-align: start; font-weight: var(--fw-reg); vertical-align: top; }
.plan-cmp tbody tr:last-child > * { border-bottom: 0; }
.plan-cmp thead th { font-weight: var(--fw-bold); width: 27%; }
.plan-cmp td { font-variant-numeric: tabular-nums; color: var(--muted); }
.plan-cmp td.mine { color: var(--fg); font-weight: var(--fw-bold); }
.plan-cmp td[dir="ltr"] { text-align: end; } html[dir="ltr"] .plan-cmp td[dir="ltr"] { text-align: start; }
.plan-name, .plan-mine { display: block; }
.plan-mine { font-size: var(--fs-xs); font-weight: var(--fw-reg); color: var(--muted); }
.plan-say { margin: 0 4px; font-size: var(--fs-ui); line-height: 1.5; }
.plan-price { margin: 0 4px 6px; font-size: var(--fs-ui); font-weight: 600; font-variant-numeric: tabular-nums; }
.plan-done { margin: 12px 4px 0; font-size: var(--fs-ui); font-weight: var(--fw-bold); }
.plan-done:focus { outline: none; }
.plan-offer .b.primary.wide { margin-top: 14px; }
.switch { flex: none; width: 44px; height: 26px; border-radius: 13px; background: var(--knob-off); position: relative; transition: background-color var(--t) var(--ease); }
.switch::after { content: ''; position: absolute; top: 3px; inset-inline-start: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.3); transition: inset-inline-start var(--t) var(--ease); }
.switch.on { background: var(--switch-on, var(--fg)); }
.switch.on::after { background: var(--switch-knob-on, #fff); }
.switch.on::after { inset-inline-start: 21px; }
.seg { display: flex; gap: 2px; padding: 2px; border-radius: var(--r); background: var(--desk); }
.seg button { flex: 1; min-height: 44px; border: 0; border-radius: calc(var(--r) - 2px); background: none; color: var(--muted); font: inherit; font-size: var(--fs-sm); cursor: pointer; padding: 0 10px; }
.seg button.on { background: var(--surface); }
.srow.hand-opt { flex-wrap: wrap; gap: 6px 12px; } .srow.hand-opt .srow-n { flex: 1 1 8em; } .srow.hand-opt .seg { flex: 2 1 16em; }
.hand-sample { margin: 8px 4px 16px; padding: 10px; border-radius: var(--r); background: #fff; color: #111; min-height: 44px; font-size: var(--fs-sm); }
.hand-sample svg { display: block; width: 100%; max-height: 90px; }
.b.quiet { color: var(--muted); }
.b.small.danger, .b.danger { color: var(--danger); }
.field { width: 100%; height: 48px; border: 1px solid var(--line); border-radius: var(--r); padding: 0 12px; font: inherit; font-size: var(--fs-body); color: var(--fg); background: var(--surface); }
select.field { appearance: none; -webkit-appearance: none; padding-inline-end: 40px; background-repeat: no-repeat; background-size: 16px 16px; background-position: left 14px center;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23676969' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); }   /* one chevron, drawn (25/10) */
html[dir="ltr"] select.field { background-position: right 14px center; }
.field:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent; }
.swrow { display: flex; flex-wrap: wrap; gap: 6px; }
.sw.paper { width: auto; height: auto; min-width: 56px; min-height: 64px; flex-direction: column; gap: 4px; border-radius: var(--r); display: flex; align-items: center; justify-content: center; }
.sw.paper small { font-size: var(--fs-xs); color: var(--muted); }
.tune { padding: 4px 0; }
.tune label { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; font-size: var(--fs-sm); margin: 6px 4px; }
.tune input[type=range] { grid-column: 1 / -1; width: 100%; height: 44px; margin: 0; }
/* layers inside a row group or a popover */
.sgrp .lylist, .pop .lylist { margin-top: 6px; }
.pop .hint { max-width: 280px; }

/* ---- this notebook: pages ---- */
.thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 14px 12px; margin-top: 12px; }
.thumb { border: 0; background: none; padding: 0; cursor: pointer; text-align: center; color: var(--muted); font-size: var(--fs-sm); position: relative; }
.thumb .tpage { display: block; width: 100%; aspect-ratio: 1000/1414; background: var(--paper); border-radius: var(--r-xs); box-shadow: 0 0 0 1px var(--line); margin-bottom: 6px; }
.thumb.on .tpage { box-shadow: 0 0 0 2px var(--fg); }
.thumb.on .thumb-n { color: var(--fg); font-weight: var(--fw-bold); }
.thumb.add { aspect-ratio: 1000/1414; border: 1.5px dashed var(--dash); border-radius: var(--r-xs); color: var(--muted); min-height: 44px; }
.pgacts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 10px 0 0; }
.pgacts .seg { flex-basis: 100%; }
.pgcount { font-weight: var(--fw-bold); margin-inline-end: auto; }

/* ---- sheets (create, export): a centered card, a bottom sheet on a phone-narrow screen ---- */
.sheet { place-items: center; }
.sheet-card { padding: 0; width: min(520px, 100%); max-height: min(86vh, 760px); max-height: min(86dvh, 760px); display: flex; flex-direction: column; overflow: hidden; }
.sheet-card .pnl-body { padding-bottom: 20px; }
.sheet-card:focus { outline: none; }
.xprev { width: min(100%, 180px); }
.sheet-card.nudge { animation: nudge var(--t) var(--ease); }
@keyframes nudge { 30% { transform: translateX(-6px); } 60% { transform: translateX(5px); } }
.b.primary.wide { margin-top: 18px; height: 50px; }
.b.wide.quiet { width: 100%; margin-top: 6px; }
.tiles { display: grid; grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; gap: 6px; }   /* every paper in one row, on a phone too */
.tile { border: 0; background: none; border-radius: var(--r); padding: 8px 4px; display: flex; flex-direction: column; align-items: center; gap: 6px; color: var(--muted); font: inherit; font-size: var(--fs-sm); cursor: pointer; min-height: 44px; }
.tile .pvpage { width: min(56px, 100%); margin: 0; box-shadow: 0 0 0 1px var(--line); border-radius: 3px; }
.tile.on { background: var(--chip); box-shadow: var(--active-ring); color: var(--fg); }
.pvpage[data-tpl="plain"] { background-image: none; }
details.more { margin-top: 10px; }
details.more summary { min-height: 44px; display: flex; align-items: center; color: var(--muted); cursor: pointer; font-size: var(--fs-sm); padding: 0 4px; }
.xprev { width: min(100%, 180px); margin: 12px auto 4px; }
.xsum { text-align: center; color: var(--muted); font-size: var(--fs-sm); margin: 8px 0 4px; }
/* Share and print (round 2): Send the PDF first, the one primary action of the sheet; everything else is a quiet row */
.b.xsend { display: flex; justify-content: center; align-items: center; min-height: 54px; margin-top: 8px; gap: 10px; font-size: var(--fs-body); font-weight: var(--fw-bold); border-radius: var(--r); }
.b.xsend svg { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.b.xsend[disabled] { opacity: .72; }
@media (max-width: 600px) { .sheet { place-items: end stretch; padding: 0; } .sheet-card { width: 100%; max-height: 92vh; max-height: 92dvh; border-radius: var(--r-lg) var(--r-lg) 0 0; padding-bottom: env(safe-area-inset-bottom); } }

/* ---- the library (redesign 04/10, Roy: "super premium, calm, consistent everywhere") ----
   One column on every screen: a top bar (the back arrow to the folder above, where he is as a breadcrumb that folds when deep, search, a new folder, a
   new notebook), then the recent notebooks in exactly one row, then the folders, then the notebooks, then what was
   shared with him, every card the same width in one grid. Nothing ever scrolls sideways: every row is min-width 0, every
   name is cut on one or two lines with the whole name as its title. Folders open with a tap; the back arrow, a swipe
   from the reading edge or Alt+Up go one level up. */
#lib { position: fixed; z-index: 15; left: 0; right: 0; bottom: 0; top: calc(var(--bar-h) + env(safe-area-inset-top)); background: var(--desk); overflow-x: hidden; overflow-y: auto;
  -webkit-overflow-scrolling: touch; overscroll-behavior: contain; animation: rise var(--t) var(--ease); }
body.library .grp.tools { visibility: hidden; }
body.library #flowStrip, body.library #firstUse { display: none; }   /* (the first-use card belongs to the page: over the library it took taps) */
.libin { --cardw: 160px; --gapx: 24px; max-width: 1200px; margin: 0 auto; padding: 0 40px 80px; min-width: 0; }
.libhead { position: sticky; top: 0; z-index: 2; display: grid; grid-template-columns: minmax(0, 1fr) minmax(160px, 280px) auto auto; align-items: center; gap: 8px;
  margin: 0 -40px; padding: 18px 40px 14px; background: var(--desk);   /* opaque (05/10): nothing shows through the head, at the top or scrolled (a see-through head showed the tiles under it) */
  border-bottom: 1px solid transparent; }
#lib.scrolled .libhead { border-bottom-color: var(--line); }
.libhead > * { min-width: 0; }
.libhead .search { width: 100%; height: 44px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface) no-repeat;
  padding: 0 16px; padding-inline-start: 42px; font: inherit; font-size: var(--fs-ui); color: var(--fg); -webkit-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23676969' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='M16 16l4.5 4.5'/%3E%3C/svg%3E");
  background-size: 18px 18px; background-position: right 16px center; transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease); }
html[dir="ltr"] .libhead .search { background-position: left 16px center; }
.libhead .search::placeholder { color: var(--faint); }
.libhead .search:focus { outline: none; border-color: var(--fg); box-shadow: 0 0 0 3px var(--ring); }
.libwhere { display: flex; align-items: center; gap: 2px; min-width: 0; }
.libhead .libup { color: var(--fg); flex: none; margin-inline-start: -10px; }   /* the one back arrow: to the folder above (nav.js goUp); none at the top */
.libhead .libup svg { width: 20px; height: 20px; }
.libhead .crumbs { display: flex; align-items: center; gap: 0; font-size: var(--fs-title); flex: 1 1 auto; min-width: 0; flex-wrap: nowrap; overflow: hidden; }
.crumbs .crumb { flex: 0 1 auto; min-width: 44px; max-width: 14em; border: 0; background: none; font: inherit; color: var(--muted); min-height: 44px; padding: 0 6px; cursor: pointer;
  border-radius: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; unicode-bidi: isolate; transition: background var(--t) var(--ease); }
.crumbs button.crumb:hover { background: var(--chip); }
.crumbs .crumb.here { color: var(--fg); font-weight: 700; font-size: 26px; letter-spacing: 0; flex-shrink: 1; display: inline-flex; align-items: center; }   /* where he is reads as the page's title (25/10) */
.crumbs span.crumb.here { display: block; line-height: 44px; }
.crumbs .crumb-more { flex: none; min-width: 44px; color: var(--fg); letter-spacing: .1em; }
.crumbs .sepch { flex: none; color: var(--faint); padding: 0 1px; }
#libTree { display: none !important; }
.libcols { display: block; min-width: 0; }
#libBody { min-width: 0; }
.lh { display: flex; align-items: baseline; gap: 8px; font-size: 16px; font-weight: 700; color: var(--fg); margin: 40px 2px 16px; }   /* a section's name, in the landing's heading voice (25/10) */
.lh:first-child { margin-top: 16px; }
/* one grid for every notebook: the same width, the same gaps, at every size */
.lgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--cardw), 1fr)); gap: 32px var(--gapx); min-width: 0; }
.lrecent { padding: 2px 2px 4px; margin: -2px -2px 0; }   /* exactly one row: the cards that would start a second are hidden (nav.js fitRow) */
.lrecent > .lcard[hidden] { display: none; }
/* a notebook: always a page (round 2). The cover is blank paper with the notebook's own ruling, drawn here in the page's
   own proportions (page.js: a line every 1/41.6 of the height from the third line, a 1/29.4 grid), so a card is a page
   before any picture arrives; the picture lies over it and fades in (nav.js coverImg), nothing moves */
.lcard { position: relative; min-width: 0; }
.lcard-open { display: flex; flex-direction: column; align-items: stretch; gap: 12px; width: 100%; min-width: 0; border: 0; background: none; padding: 0; text-align: start; color: var(--fg); font: inherit; cursor: pointer; border-radius: 10px; }
.lcard .cover { position: relative; width: 100%; aspect-ratio: 1000 / 1414; border-radius: 12px; overflow: hidden; background-color: #fff;
  box-shadow: 0 0 0 1px var(--sheet-edge), var(--cover-stack); transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease); }
.lcard .cover::before { content: ""; position: absolute; pointer-events: none; }
/* every card is a notebook, with or without a picture (Roy 05/10: "a notebook without a cover must still look like a
   notebook, with volume"): two sheets peek out behind it on the open side (--peek follows the reading direction), a soft
   spine shades the bound edge, and a cover with no picture yet (.blank, nav.js) is ruled paper with a margin line beside
   the spine. One look in both themes: the paper stays paper, only the sheets and the edges follow the theme. */
.lcard { --peek: 3px; --cover-stack: var(--peek) 3px 0 -1px var(--sheet), var(--peek) 3px 0 0 var(--sheet-edge),
  calc(var(--peek) * 2) 6px 0 -2px var(--sheet), calc(var(--peek) * 2) 6px 0 -1px var(--sheet-edge), 0 14px 24px -16px var(--cover-drop); }
:root[dir="rtl"] .lcard { --peek: -3px; }
.lcard .cover::after { content: ""; position: absolute; inset-block: 0; width: 9%; pointer-events: none; inset-inline-start: 0;
  background: linear-gradient(to left, rgba(0,0,0,.13), rgba(0,0,0,.04) 45%, transparent), linear-gradient(to left, rgba(0,0,0,.10) 1px, transparent 1px); }
:root[dir="ltr"] .lcard .cover::after { background: linear-gradient(to right, rgba(0,0,0,.13), rgba(0,0,0,.04) 45%, transparent), linear-gradient(to right, rgba(0,0,0,.10) 1px, transparent 1px); }
.lcard .cover.blank::after { width: 15%; background: linear-gradient(to left, rgba(0,0,0,.13), rgba(0,0,0,.04) 30%, transparent 60%),
  linear-gradient(to left, transparent calc(100% - 1.5px), rgba(214,88,88,.42) calc(100% - 1.5px)); }
:root[dir="ltr"] .lcard .cover.blank::after { background: linear-gradient(to right, rgba(0,0,0,.13), rgba(0,0,0,.04) 30%, transparent 60%),
  linear-gradient(to right, transparent calc(100% - 1.5px), rgba(214,88,88,.42) calc(100% - 1.5px)); }
/* (percentages of the cover itself: a line every 1/41.6 of the height from the third line to half a line before the
   end = 38.1 lines; assignment from the ninth = 32.1 lines; grid squares 1/29.4 of the width = 41.57 of the height) */
.lcard .cover[data-tpl="lines"]::before, .lcard .cover[data-tpl="tasks"]::before { inset: 7.212% 0 1.202%; background: linear-gradient(to bottom, var(--rule-l, #d3dbe7) 1px, transparent 1px) 0 0 / 100% calc(100% / 38.1) repeat-y; }
.lcard .cover[data-tpl="assignment"]::before { inset: 21.635% 0 1.202%; background: linear-gradient(to bottom, var(--rule-l, #d3dbe7) 1px, transparent 1px) 0 0 / 100% calc(100% / 32.1) repeat-y; }
.lcard .cover[data-tpl="grid"]::before { inset: 0; background: linear-gradient(to bottom, var(--rule-g, #e0e6ee) 1px, transparent 1px) 0 0 / 100% calc(100% / 41.57), linear-gradient(to right, var(--rule-g, #e0e6ee) 1px, transparent 1px) 0 0 / calc(100% / 29.4) 100%; }
.lcard .cover[data-tpl="grid-s"]::before { inset: 0; background: linear-gradient(to bottom, var(--rule-g, #e0e6ee) 1px, transparent 1px) 0 0 / 100% calc(100% / 68.28), linear-gradient(to right, var(--rule-g, #e0e6ee) 1px, transparent 1px) 0 0 / calc(100% / 48.28) 100%; }   /* small squares: 0.609 of the grid (29.4 / 0.609 = 48.28 across, 1414 / 20.71 = 68.28 down) */
/* black paper (web/paper.js RULE): the preview tiles and a cover with no picture yet ruled in its dim grey-blue */
.pvpage[data-dark], .lcard .cover[data-dark] { --rule-l: #3a3f47; --rule-g: #33373d; }
.lcard .cover img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; opacity: 0; }   /* (shown at once when decoded, over the same blank paper: no fade) */
.lcard .cover img.on { opacity: 1; }
.lcard .cover img.now { transition: none; }
.lcard-open:active .cover { transform: scale(.98); }
.lcard.here .cover { box-shadow: 0 0 0 2px color-mix(in srgb, var(--fg) 30%, transparent), var(--cover-stack); }   /* the open notebook: a quiet ring, not a focus outline */
.lcard-m { display: flex; flex-direction: column; align-items: stretch; gap: 3px; min-width: 0; max-width: 100%; padding: 0 2px; }
.lcard-m b { font-weight: var(--fw-bold); font-size: var(--fs-ui); line-height: 1.3; height: 2.6em; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow-wrap: anywhere; word-break: break-word; unicode-bidi: isolate; text-overflow: ellipsis; flex: none; }   /* (Roy 05/10: a long name is two lines and an ellipsis, the whole name is the card's title; every card the same height) */
.lcard-m b.untitled { color: var(--muted); font-weight: var(--fw-reg); }
.lcard-m small { color: var(--muted); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-inline-end: 40px; }
.lcard-more { position: absolute; inset-inline-end: -8px; bottom: -14px; color: var(--muted); }   /* (its dots on the line of the page count, never over the name's second line) */
.lcard-more svg { fill: currentColor; stroke: none; }
/* folders (round 2): one shelf of compact tiles above the notebooks, never cards among them. A tile is a folder picture
   (web/folders.js folderArt: a tab, paper peeking out when something is inside), the name on one or two lines and what
   is inside; two rows at most while there are many (nav.js clampShelf, "show all" beside the heading) */
.lfolders { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; min-width: 0; }
.lfolders > .lfwrap[hidden] { display: none; }
.lfwrap { position: relative; display: flex; min-width: 0; }
.lfolder { display: flex; align-items: center; gap: 14px; width: 100%; min-width: 0; min-height: 76px; border: 0; padding: 10px 14px; padding-inline-end: 12px;
  background: var(--surface); border-radius: 16px; box-shadow: 0 0 0 1px var(--line); color: var(--fg); font: inherit; text-align: start; cursor: pointer;   /* a hairline, no drop (25/10) */
  transition: transform var(--t) var(--ease), background var(--t) var(--ease); }
.lfwrap.acts .lfolder { padding-inline-end: 48px; }
.lfolder:hover { background: var(--chip); background: color-mix(in srgb, var(--fg) 3%, var(--surface)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--fg) 22%, var(--line)); }
.lfolder:active { transform: scale(.98); }
.ficon { flex: none; width: 48px; height: 40px; display: block; }
.ficon svg { width: 48px; height: 40px; display: block; overflow: visible; }
html[dir="rtl"] .ficon svg { transform: scaleX(-1); }
.ficon .fk { fill: #d6d3ca; }
.ficon .fp { fill: #fff; stroke: rgba(0,0,0,.14); stroke-width: .6; }
.ficon .ff { fill: #e7e4dc; }
:root[data-theme="graphite"] .ficon .fk { fill: #5d5b56; }
:root[data-theme="graphite"] .ficon .ff { fill: #7d7a73; }
:root[data-theme="graphite"] .ficon .fp { fill: #e9ecf0; stroke: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) .ficon .fk { fill: #5d5b56; } :root:not([data-theme]) .ficon .ff { fill: #7d7a73; } :root:not([data-theme]) .ficon .fp { fill: #e9ecf0; stroke: none; } }
.lfolder-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.lfolder-t b { font-weight: var(--fw-bold); font-size: var(--fs-ui); line-height: 1.3; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow-wrap: anywhere; word-break: break-word; unicode-bidi: isolate; }
.lfolder-t small { color: var(--muted); font-size: var(--fs-xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lfwrap .lf-more { position: absolute; inset-inline-end: 2px; top: 50%; transform: translateY(-50%); color: var(--muted); }
.lf-more svg { fill: currentColor; stroke: none; }
.lsub { display: none !important; }
.lh .lshelf-all { margin-inline-start: auto; min-height: 44px; font-size: var(--fs-sm); font-weight: var(--fw-reg); color: var(--fg); }
.lh.shelfh { min-height: 44px; align-items: center; margin-bottom: 4px; }   /* (the same height with or without "show all": nav.js observes it) */
/* what is shared: a small people marker on the cover's corner; "shared with me" is one more section in the same style */
.lcard .sharebadge, .lfwrap .sharebadge { position: absolute; top: 8px; inset-inline-end: 8px; z-index: 1; width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center; background: var(--surface); background: color-mix(in srgb, var(--surface) 92%, transparent); color: var(--fg); box-shadow: 0 0 0 1px var(--line); pointer-events: none; }
.lfwrap .sharebadge { top: 6px; inset-inline-end: auto; inset-inline-start: 40px; width: 22px; height: 22px; }
.lcard .sharebadge svg, .lfwrap .sharebadge svg { width: 15px; height: 15px; }
.libshared { margin-top: 8px; }
.libshared .sharecrumbs { margin: 0 0 8px; }
.sharedcover { display: grid; place-items: end start; padding: 10px; background: #f2f3f5; background: color-mix(in srgb, var(--fg) 5%, #fff); }
.sharedcover > span { font-size: var(--fs-xs); font-weight: var(--fw-bold); color: #444; background: rgba(255,255,255,.85); padding: 3px 8px; border-radius: 999px; }
.empty-state { color: var(--muted); margin: 8px 2px; }
.menu-tree { display: flex; flex-direction: column; max-height: 38vh; overflow-y: auto; overscroll-behavior: contain; }
.menu-tree button { flex: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lrow-open:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
@media (prefers-reduced-motion: reduce) { .crumbs .crumb, .lcard .cover, .fcover { transition: none; } .lcard-open:active .cover, .lfolder:active .fcover { transform: none; } }
/* iPad portrait and narrower: two rows of tools (back and where he is; search and the two actions) */
@media (max-width: 899px) {
  .libin { --cardw: 136px; --gapx: 18px; padding: 0 24px 56px; }
  .libhead { grid-template-columns: minmax(0, 1fr) auto auto; margin: 0 -24px; padding: 12px 24px; row-gap: 10px; }
  .libwhere { grid-column: 1 / -1; grid-row: 1; }
  .libhead .search { grid-column: 1; grid-row: 2; }
  #libNewFolder { grid-column: 2; grid-row: 2; } #libNew { grid-column: 3; grid-row: 2; }
}
@media (max-width: 560px) {
  .libin { --cardw: 140px; --gapx: 16px; padding: 0 16px 48px; }   /* two notebooks a row on a phone: names that read (25/10) */
  .libhead { margin: 0 -16px; padding: 10px 16px; }
  .crumbs .crumb.here { font-size: 22px; }
  .lh { margin: 30px 2px 12px; }
  .lfolders { grid-template-columns: 1fr; gap: 8px; }   /* one folder a row on a phone: the whole name, never "מחבר..." (25/10) */
  .lfolder { min-height: 60px; gap: 12px; padding: 8px 14px; }
  .lfolder .ficon, .lfolder .ficon svg { width: 40px; height: 34px; }
  #libNewFolder span, #libNew span { display: none; }
  #libNewFolder, #libNew { padding: 0 12px; }
  .lcard-m b, .lfolder-t b { font-size: var(--fs-sm); }
}

/* ---- the companion: the assistant panel ---- */
.pmode { margin: 10px 12px 0; flex: none; }
#msgs { padding: 14px 16px; }
.m { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--fg); color: color-mix(in srgb, var(--fg) 86%, var(--surface)); }   /* the reference's quieter reading text */
.m.roy { background: var(--desk); }
.m.flash { animation: mflash 1.2s var(--ease); }
@keyframes mflash { 0%, 40% { box-shadow: 0 0 0 2px var(--accent); border-radius: var(--r); } }
.msrc { display: block; margin-top: 4px; border: 0; background: none; padding: 0; min-height: 44px; color: var(--muted); font: inherit; font-size: var(--fs-sm); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.macts { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; white-space: normal; }
.macts .b.small { border: 1px solid var(--line); color: var(--fg); padding: 0 12px; }
.simtag { display: inline-block; font-size: var(--fs-xs); font-weight: var(--fw-bold); color: var(--warn); border: 1px solid currentColor; border-radius: var(--r-xs); padding: 0 6px; margin-inline-end: 6px; }
body.library .demobar { display: none; }
body:has(#home:not([hidden])) .demobar { display: none; }
.demobar { position: fixed; z-index: 55; bottom: calc(10px + env(safe-area-inset-bottom)); inset-inline-start: 12px; background: var(--surface); color: var(--warn);
  font-size: var(--fs-xs); font-weight: var(--fw-bold); padding: 6px 10px; border-radius: var(--r); box-shadow: 0 0 0 1px var(--line); pointer-events: none; }
.preview { padding: 8px 8px 8px 14px; align-items: center; }
.preview .pvbody { flex: 1; min-width: 0; align-self: center; }
.preview .pvsrc { font-size: var(--fs-xs); color: var(--accent); font-weight: var(--fw-bold); }
.preview #pvText::before { content: none; }

/* the cue in the margin beside the ink a request came from; the pen writes through it */
.page .askcue { position: absolute; width: 44px; height: 44px; margin: -22px 0 0 -22px; border: 0; background: none; padding: 0; cursor: pointer; pointer-events: auto; z-index: 6;
  display: grid; place-items: center; touch-action: none; }
.page .askcue::before { content: ''; width: 14px; height: 14px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--accent); background: var(--paper); transition: background-color var(--t) var(--ease), transform var(--t) var(--ease); }
.page .askcue.new::before { background: var(--accent); transform: scale(1.15); }
.page .askcue.read::before { box-shadow: inset 0 0 0 1.5px #9aa0a6; width: 10px; height: 10px; }
.page .askcue:focus-visible { outline: 2px solid var(--accent); border-radius: 50%; }
.page .srcflash { position: absolute; pointer-events: none; border-radius: var(--r-sm); box-shadow: 0 0 0 2px var(--accent); background: none; background: color-mix(in srgb, var(--accent) 8%, transparent);
  animation: srcflash 1.6s var(--ease) forwards; z-index: 5; }
@keyframes srcflash { 70% { opacity: 1; } to { opacity: 0; } }
@media print { .page .askcue, .page .srcflash, .demobar { display: none !important; } }

/* ---- the eye ---- */
.eyeBtn { padding: 0 8px; }
.eyeBtn .eye { display: block; color: var(--fg); overflow: visible; }
.eyeBtn .eye .iris { transform-box: fill-box; transform-origin: center; }
.eyeBtn .eye .badge { transition: none; }   /* (at once: no fades, Roy 05/10) */

/* ---- focus you can see, from the keyboard ---- */
.b:focus-visible, .srow:focus-visible, .lcard-open:focus-visible, .lfolder:focus-visible, .thumb:focus-visible, .tile:focus-visible, .nbname:focus-visible,
.logoBtn:focus-visible, .eyeBtn:focus-visible, .seg button:focus-visible, .crumb:focus-visible, .msrc:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .pnl-view[data-mv="l"], .pnl-view[data-mv="r"] { animation: none; } }
@media (prefers-reduced-motion: reduce) { .pnl-view, #lib, .sheet-card:focus { outline: none; }
.xprev { width: min(100%, 180px); }
.sheet-card.nudge { animation: none; } .switch, .switch::after { transition: none; } }

/* ---- compact widths (portrait iPad, split view): two rows, where I am on top, the pen tools below; nothing overlaps ---- */
@media (max-width: 899px) {
  :root { --bar-h: 102px; }
  #brandBox, #nbBox { bottom: auto; top: calc(env(safe-area-inset-top) + 2px); }
  #nbBox { max-width: calc(100vw - 190px); }
  .grp.tools { bottom: 2px; }
  #bar::after { content: ''; position: absolute; left: 0; right: 0; top: calc(env(safe-area-inset-top) + 50px); border-top: 1px solid var(--line); pointer-events: none; }
  body.library #bar::after { display: none; }
  .nbname .nbfolder { display: inline; max-width: 22vw; }
}
@media (max-width: 560px) { .nbname .nbfolder { display: none; } }
@media (max-width: 899px) { body.library { --bar-h: 56px; } body.library .grp.tools { display: none; } }

.pconnect { margin: 10px 12px 0; padding: 12px 14px; border-radius: var(--r); background: var(--desk); display: flex; flex-direction: column; gap: 4px; font-size: var(--fs-sm); line-height: 1.5; color: var(--muted); flex: none; }
.pconnect b { color: var(--fg); font-size: var(--fs-ui); }

/* ---- panels on both sides: docked beside the notebook, the same motion (nav.js magnetize); a leaving panel is out of
   the flow at once so the pages take their new place, and slides away above them ---- */
#main { position: relative; overflow: hidden; }
#home.side { box-shadow: none; }
#home.leaving, #panel.leaving, #home.gliding, #panel.gliding { position: absolute; top: 0; bottom: 0; z-index: 12; }
#home.leaving, #panel.leaving { pointer-events: none; }
#home, #panel { z-index: 12; }
#home.leaving, #home.gliding { right: 0; } #panel.leaving, #panel.gliding { left: 0; }
body.lefty #home.leaving, body.lefty #home.gliding { right: auto; left: 0; } body.lefty #panel.leaving, body.lefty #panel.gliding { left: auto; right: 0; }
@media not ((orientation: landscape) and (min-width: 1000px)) {
  #home.leaving, #panel.leaving, #home.gliding, #panel.gliding { top: auto; left: 0; right: 0; height: var(--sheet-h, 34%); }
}


/* the ruling as the page's own background (page.js sets --rc, --rl, --ry0, --rg): under Claude's blocks and the ink */
.page.cvready[data-tpl]::before { content: ''; position: absolute; left: 0; right: 0; top: var(--ry0); bottom: calc(var(--rl) * 0.5); z-index: 0; pointer-events: none;
  background: repeating-linear-gradient(to bottom, var(--rc) 0, var(--rc) 1px, transparent 1px, transparent var(--rl)); }
.page.cvready[data-tpl="grid"]::after, .page.cvready[data-tpl="grid-s"]::after { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: repeating-linear-gradient(to right, transparent 0, transparent calc(var(--rg) - 1px), var(--rc) calc(var(--rg) - 1px), var(--rc) var(--rg)); }
@media print { .page.cvready[data-tpl]::before, .page.cvready[data-tpl="grid"]::after, .page.cvready[data-tpl="grid-s"]::after { display: none; } }
/* page ink on a canvas (inkcanvas.js): the SVG ink hides once the canvas holds it; print and the export preview use the SVG */
.page .inkcv { position: absolute; left: 0; top: 0; width: 100%; height: auto; pointer-events: none; z-index: 2; }   /* placed on the device pixel grid by inkcanvas.js (percent of the page) */
.page.cvready > svg.band, .page.cvready > svg.inksvg:first-child > g.hl, .page.cvready > svg.inksvg:first-child > g.lockg, .page.cvready > svg.inksvg:first-child > g.bg > g[stroke] { visibility: hidden; }
@media print { .page .inkcv { display: none !important; } .page.cvready > svg.band, .page.cvready > svg.inksvg:first-child > g.hl, .page.cvready > svg.inksvg:first-child > g.lockg, .page.cvready > svg.inksvg:first-child > g.bg > g[stroke] { visibility: visible !important; } }

#pages { will-change: transform; }   /* its own layer, always: a panel's glide starts without building one (the first frame) */

/* a question the app must ask before acting (web/account.js: sign-out with unsent ink) */
.ep-dialog { max-width: min(440px, calc(100vw - 32px)); border: 0; border-radius: 14px; padding: 20px; background: var(--panel, #fff); color: var(--fg, #111);
  font: 16px var(--font-ui); box-shadow: 0 12px 40px rgb(0 0 0 / .25); }
.ep-dialog::backdrop { background: rgb(0 0 0 / .35); }
.ep-dialog h2 { margin: 0 0 8px; font-size: 18px; font-weight: 600; }
.ep-dialog p { margin: 0 0 16px; line-height: 1.5; color: var(--muted, #555); }
.ep-dialog-actions { display: grid; gap: 8px; }
.ep-dialog-actions button { min-height: 44px; border-radius: 10px; border: 1px solid var(--line, #d0d0cc); background: transparent; color: inherit; font: inherit; }
.ep-dialog-actions button.primary { background: var(--fg, #111); color: var(--panel, #fff); border-color: transparent; font-weight: 600; }
.ep-dialog-actions button:focus-visible { outline: 2px solid var(--accent, #c2541a); outline-offset: 2px; }
/* the one-time terms prompt (web/legal.js) */
.ep-legal-links { display: flex; gap: 16px; flex-wrap: wrap; }
.ep-legal-links a { color: var(--accent, #c2541a); }
.ep-legal-check { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 16px; line-height: 1.5; }
.ep-legal-check input { inline-size: 22px; block-size: 22px; flex: none; margin: 1px 0 0; }
.ep-dialog-actions button:disabled { opacity: .5; }

/* the cloud notebook's loading line and plain errors (web/cloud.js) */
#cloudStatus { position: fixed; z-index: 90; top: 64px; left: 50%; transform: translateX(-50%); padding: 8px 14px; border-radius: 999px;
  background: #111; color: #fff; font: 15px var(--font-ui); box-shadow: 0 4px 16px rgb(0 0 0 / .15); pointer-events: none; }
#cloudStatus.bad { background: #b3261e; }
#cloudStatus:not(.bad) { display: flex; align-items: center; gap: 10px; }
#cloudStatus:not(.bad)::before { content: ''; width: 14px; height: 14px; border-radius: 50%; border: 2px solid rgb(255 255 255 / .3); border-top-color: #fff; animation: epSpin .8s linear infinite; }
@keyframes epSpin { to { transform: rotate(360deg); } }
/* the connection chip (web/cloud.js link()) keeps its state for the board but is never shown (Roy 03/10): a real problem
   is said in the bar (#net, web/app.js setNet) and nothing at all while all is well */
#linkChip { display: none !important; }
#linkChip { position: fixed; z-index: 60; inset-inline-start: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); display: inline-flex; align-items: center; gap: 8px;
  min-height: 28px; padding: 0 12px 0 10px; border: 0; border-radius: 999px; background: var(--surface, #fff); color: var(--fg, #111); box-shadow: 0 1px 6px rgb(0 0 0 / .16);
  font: 13px var(--font-ui); cursor: pointer; transition: padding var(--t) var(--ease); touch-action: manipulation; }
#linkChip i { width: 9px; height: 9px; border-radius: 50%; background: #1a8f4c; flex: none; }
#linkChip[data-state=ok] i { background: #1a8f4c; }
/* nothing animates while all is well: a looping animation beside the page kept the screen repainting under the pen */
#linkChip[data-state=live] i { animation: epBlink .5s ease-out 2; }
#linkChip[data-state=loading] i { background: var(--accent, #c2541a); animation: epBlink 1s ease-in-out infinite; }
#linkChip[data-state=reconnecting] i { background: #d98300; animation: epBlink 1s ease-in-out 6; }
#linkChip.dot { padding: 0 9.5px; opacity: .75; } #linkChip.dot span { display: none; }
@keyframes epBlink { 50% { opacity: .3; } }
@media (prefers-reduced-motion: reduce) { #linkChip i, #cloudStatus::before { animation: none !important; } #linkChip { transition: none; } }

/* a plan limit reached (web/upgrade.js): a quiet note at the bottom, never over the pen */
.upgrade-note { position: fixed; z-index: 80; inset-inline: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); max-width: 460px; margin-inline: auto;
  padding: 14px 16px; border-radius: 14px; background: var(--surface, #fff); color: var(--fg, #111); box-shadow: 0 8px 28px rgb(0 0 0 / .18);
  font: 15px/1.5 var(--font-ui); }
.upgrade-note p { margin: 0 0 6px; } .upgrade-note .quiet { color: var(--muted, #666); }
.upgrade-note div { display: flex; gap: 12px; align-items: center; justify-content: flex-end; }
.upgrade-note button { min-height: 44px; display: inline-flex; align-items: center; padding: 0 12px; border-radius: 10px; font: inherit; color: inherit; }
.upgrade-note button { border: 1px solid var(--line, #d0d0cc); background: transparent; }
.upgrade-note .upgrade-more { background: var(--fg, #111); color: var(--on-fg, #fff); border-color: transparent; font-weight: 600; }

/* a load that failed: said quietly, with a retry, the last list kept under it */
.lib-fail { color: var(--muted); font-size: 14px; margin: 8px 0 12px; }

/* ---------- the UI language (web/i18n.js sets <html lang dir>; launch P037) ----------
   The words and the panels' contents follow the language. What is physical stays physical in every language: the notebook
   area (#main: the pages, their scrolling and zoom, Claude's panel on the side away from the writing hand, the settings
   beside it) and the bar's pinned regions (brand and eye top-left, this notebook top-right). The pages are authored right
   to left and never mirror; only the text inside the side panels runs left to right in English. */
html[dir="ltr"] #main { direction: rtl; }
html[dir="ltr"] #main > aside > :not(.resize):not(.grab) { direction: ltr; }
html[dir="ltr"] #nbBox { direction: rtl; }
html[dir="ltr"] #nbBox > * { direction: ltr; }
html[dir="ltr"] .pnl-back svg, html[dir="ltr"] .libup svg, html[dir="ltr"] #undo svg, html[dir="ltr"] #redo svg { transform: scaleX(-1); }   /* back, undo and redo point the reading way */
html[dir="ltr"] .srow-go { transform: none; }
#nbTitle, #nbFolder, .lcard-m b { unicode-bidi: isolate; }

/* ---------- first use (web/firstuse.js): one small note on a new account's first notebook, never over the bar ---------- */
.firstuse { position: fixed; z-index: 29; bottom: calc(24px + env(safe-area-inset-bottom)); inset-inline-start: max(16px, env(safe-area-inset-left));
  width: min(380px, calc(100vw - 32px)); display: grid; gap: 6px; padding: 14px 16px 12px; border-radius: var(--r-lg, 14px);
  background: var(--surface); color: var(--fg); box-shadow: 0 0 0 1px var(--edge, var(--line)), var(--shadow-md); font-size: 14px; line-height: 1.45;
  animation: rise var(--t) var(--ease); }
.firstuse .fu-t { font-size: 16px; font-weight: 600; }
.firstuse p { margin: 0; color: var(--muted); }
.firstuse .fu-state { color: var(--fg); font-weight: 600; padding-top: 2px; }
.firstuse .fu-state::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-inline-end: 8px; vertical-align: 1px; background: var(--muted); }
.firstuse[data-state="saved"] .fu-state::before { background: #138a3e; }
.firstuse[data-state="syncing"] .fu-state::before { background: var(--accent, #c2541a); }
.firstuse[data-state="offline"] .fu-state::before { background: #b26b00; }
.firstuse[data-state="error"] .fu-state::before { background: #b3261e; }
.firstuse .fu-close { justify-self: end; min-height: 44px; min-width: 88px; }
@media print { .firstuse, .a2hs { display: none !important; } }
/* while the side panel is open (settings, the plan sheet, the pages) the note waits: it used to lie over the panel's last rows */
body:has(#home:not([hidden])) .firstuse { display: none; }

/* one calm banner (web/notice.js): maintenance, a paused account; under the bar, never over the pen's page for long */
.ep-banner { position: fixed; z-index: 85; top: calc(60px + env(safe-area-inset-top, 0px)); inset-inline: 16px; max-width: 560px; margin-inline: auto;
  display: flex; gap: 10px; align-items: center; padding: 10px 12px 10px 16px; border-radius: 12px; background: var(--panel, #fff); color: var(--fg, #111);
  box-shadow: 0 6px 22px rgb(0 0 0 / .14); border-inline-start: 4px solid var(--accent, #c2541a); font: 15px/1.45 var(--font-ui, -apple-system, system-ui, sans-serif); }
.ep-banner[data-tone="warn"] { border-inline-start-color: #b26a00; }
.ep-banner p { margin: 0; flex: 1; } .ep-banner a { color: inherit; font-weight: 600; }
.ep-banner-x { min-width: 44px; min-height: 44px; border: 0; background: transparent; color: inherit; font: 22px/1 inherit; border-radius: 10px; }
/* sign in again, in place (web/account.js): a sheet at the bottom, the page usable behind it */
.ep-dialog.ep-sheet { position: fixed; z-index: 95; inset-inline: 0; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); top: auto; margin-inline: auto; margin-block: 0; }
.ep-sheet .field { display: block; width: 100%; box-sizing: border-box; margin: 0 0 8px; min-height: 44px; }
.ep-sheet .sa-err { color: var(--danger, #b3261e); margin: 0 0 8px; }
/* the diagnostic line (web/diag.js) and the export-all progress */
.ep-diag { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 4px 0; }
.ep-diag code { font-size: 13px; padding: 4px 8px; border-radius: 8px; background: var(--desk, #f1f1ef); user-select: all; }
.ep-diag-copy { min-height: 44px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--line, #d0d0cc); background: transparent; color: inherit; font: inherit; }
.xall progress { width: 100%; height: 8px; }
/* the Yadi logo carries Claude's state in its i-dot (Roy 30/09: only the logo in the bar; web/app.js eyeLabel sets data-ai):
   calm when offline or idle, a soft pulse while it follows or works, the answer / attention colours; reduced motion: no
   pulse, a thin ring around the dot instead. The logo's box never changes. */
#logo .yadi .aidot { transform-box: fill-box; transform-origin: center; transition: fill var(--t) var(--ease); }
#logo .yadi .airing { opacity: 0; }
#logo[data-ai="unavailable"] .yadi .aidot { opacity: .45; }
#logo[data-ai="following"] .yadi .aidot, #logo[data-ai="received"] .yadi .aidot { animation: aidot 2.6s ease-in-out infinite; }
#logo[data-ai="processing"] .yadi .aidot { animation: aidot 1.1s ease-in-out infinite; }
#logo[data-badge="answer"] .yadi .aidot { fill: var(--eye-pupil); }
#logo[data-badge="attention"] .yadi .aidot { fill: var(--eye-warn); }
@keyframes aidot { 50% { transform: scale(.7); opacity: .6; } }
@media (prefers-reduced-motion: reduce) {
  #logo[data-ai] .yadi .aidot { animation: none; }
  #logo:is([data-ai="following"], [data-ai="received"], [data-ai="processing"]) .yadi .airing { opacity: 1; }
}
/* what was learned of his handwriting (nav.js learnedGroups): one quiet grid; a learned letter black, a weak one grey,
   one with nothing good yet outlined */
.lgrid-chars { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 12px; direction: rtl; }
.lchar { display: inline-grid; place-items: center; min-width: 36px; height: 36px; border-radius: 10px; font-size: 18px; background: var(--fg); color: var(--on-fg); }
.lchar.ok { background: var(--chip); color: var(--fg); }
.lchar.none { background: none; color: var(--muted); box-shadow: inset 0 0 0 1px var(--line); }
.lswatches { display: flex; gap: 8px; padding: 6px 12px 12px; }
.lswatches i { width: 22px; height: 22px; border-radius: 50%; box-shadow: 0 0 0 1px var(--line); }
/* the selection's color picker (web/input.js colorPicker): beside the selection, his pens first, 44 px swatches */
.colorpick { position: fixed; z-index: 40; display: grid; grid-template-columns: repeat(6, 44px); gap: 4px; padding: 8px; border-radius: 16px; background: var(--surface);
  box-shadow: 0 0 0 1px var(--line), var(--shadow-md); animation: drop var(--t) var(--ease); touch-action: none; }
.colorpick .sw { width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent; padding: 0; cursor: pointer; display: grid; place-items: center; }
.colorpick .sw::before { content: ''; width: 28px; height: 28px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 1px rgb(0 0 0 / .12); transition: transform var(--t) var(--ease); }
.colorpick .sw.on::before, .colorpick .sw:focus-visible::before { transform: scale(1.18); box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--fg); }
.colorpick .sw.last-own { position: relative; }
.colorpick .sw.last-own::after { content: ''; position: absolute; inset-inline-end: -3px; top: 10px; bottom: 10px; width: 1px; background: var(--line); }
@media (prefers-reduced-motion: reduce) { .colorpick, .colorpick .sw::before { animation: none; transition: none; } }

#nbTitle.untitled { color: var(--muted); font-weight: var(--fw-reg); }
/* a page thumbnail is the page itself, cloned and scaled (web/nav.js thumb): nothing in it is tappable */
.thumb .tpage { position: relative; overflow: hidden; container-type: inline-size; }
.tpage > .page { width: 100%; pointer-events: none; cursor: inherit; box-shadow: none; margin: 0; }
/* a name keeps its own direction (a Hebrew name reads right to left) but sits on the side the library reads from */
:root[dir="ltr"] .lfolder-t b, :root[dir="ltr"] .lcard-m b { text-align: left; }
:root[dir="rtl"] .lfolder-t b, :root[dir="rtl"] .lcard-m b { text-align: right; }

/* switching notebooks (web/nav.js switchNb): the pages left stay, still, until the new notebook is laid out (audit 05/10) */
body.switching #pages { pointer-events: none; }
.page .framecover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; pointer-events: none; }   /* (the kept cover of the notebook just tapped, under its ink until that is painted: app.js showFrame) */   /* (the new notebook's frame, untouchable until its ink is in: never the old one dimmed, nav.js switchNb) */

/* ---- a phone (audit 05/10: many open a link for the first time on a phone). Phone = narrower than 600 px, or a phone
   on its side (500 px tall or less). The iPad (and anything wider and taller) is untouched. ---- */
#moreBtn, #grabHome { display: none; }
#moreBtn circle { fill: currentColor; stroke: none; }
@media (max-width: 600px), (max-height: 500px) {
  :root { --fs-xs: 14px; --fs-sm: 14px; }
  #bar { overflow-x: clip; }                                     /* nothing in the bar ever pans the page sideways */
  /* the bar keeps the pen tools, colour, undo and redo; a page, a file and share are under "more" (app.js #moreBtn) */
  .grp.tools .sep, #attachBtn, #shareBtn { display: none; }
  #moreBtn { display: inline-flex; }
  /* text 14 px at least, targets 44 px */
  .b.small, #homeBody .hint, .net, .hbody h3, .hbody .note, .hbody .tune label, .hbody .folder, #pstate, .m.roy.empty, .m time, .pop .lbl,
  .thumb, #tune label, .hbody .lbl, .fold small, .sgroup .shead small, .hbody .ncard .where, .lyrow small, .bininfo small, .xprev .xno { font-size: 14px; }
  .wslider { height: 44px; margin: 0; }
  /* settings, the notebook's pages and Claude: a tall sheet with a grabber (drag to resize, down to close) */
  #panel, #home { height: var(--sheet-h, 85%); max-height: 92%; }
  #home.leaving, #panel.leaving, #home.gliding, #panel.gliding { height: var(--sheet-h, 85%); }
  #main:has(> #home:not([hidden]):not(.leaving)) > #grabHome { display: grid; order: 2; background: var(--surface); border-top: 1px solid var(--line); }
  #main:has(> #home:not([hidden])) > #home { border-top: 0; }
  /* the first-use note never sits over an open panel */
  body:has(#panel:not([hidden])) .firstuse { display: none; }
  body:has(#home:not([hidden])) .firstuse { display: none; }
}
/* portrait: the tools row of its own, compact and centered; the selection goes under "more" below 380 px */
@media (max-width: 600px) {
  .grp.tools { left: max(8px, env(safe-area-inset-left)); right: max(8px, env(safe-area-inset-right)); transform: none; min-width: 0; justify-content: center; gap: 0; }
}
@media (max-width: 379px) { .grp.tools .tool[data-tool="lasso"] { display: none; } body:has(.tool[data-tool="lasso"].on) #moreBtn { background: var(--chip); box-shadow: var(--active-ring); } }
/* on its side: one row (the two-row bar took a quarter of a 390 px height) */
@media (max-height: 500px) and (min-width: 601px) {
  :root { --bar-h: 52px; }
  #brandBox, #nbBox { top: auto; bottom: 4px; }
  .grp.tools { bottom: 4px; }
  #nbBox { max-width: calc(50vw - 200px); }
  #bar::after { display: none; }
}

/* "My handwriting and style" (web/handstudio.js): full screen over the notebook, graphite on white, the app's tokens.
   Two columns on a wide screen (letters, then the style with its live preview), one on a phone; 44 px targets throughout. */
body.hs-on { overflow: hidden; }
.hs-wrap { position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column; background: var(--desk); color: var(--fg);
  padding: env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left); overflow: hidden; font-size: 15px; outline: none; }
.hs-head { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: var(--surface); border-bottom: 1px solid var(--line); flex: none; }
.hs-title { flex: 1 1 auto; min-width: 0; margin: 0; font-size: 17px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; outline: none; }
.hs-pick { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 14px; }
.hs-btn { min-height: 44px; min-width: 44px; border: 0; border-radius: var(--r); background: var(--chip); color: var(--fg); font: inherit; padding: 0 14px; cursor: pointer; }
.hs-btn:focus-visible, .hs-g:focus-visible, .hs-wrap input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.hs-btn svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.hs-close { background: none; padding: 0; display: inline-grid; place-items: center; }
.hs-page { padding: 0 10px; border: 1px solid var(--line); background: var(--surface); }
.hs-main { flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; display: grid; gap: 14px; padding: 14px;
  grid-template-columns: minmax(0, 1fr); align-content: start; -webkit-overflow-scrolling: touch; }
@media (min-width: 900px) { .hs-main { grid-template-columns: minmax(0, 1.5fr) minmax(300px, 1fr); max-width: 1280px; width: 100%; margin: 0 auto; box-sizing: border-box; } .hs-right { position: sticky; top: 0; align-self: start; } }
.hs-left, .hs-right { background: var(--surface); border-radius: 14px; box-shadow: 0 0 0 1px var(--line); padding: 14px; min-width: 0; }
.hs-h { margin: 0 0 6px; font-size: 16px; font-weight: 600; }
.hs-sum, .hs-keys { margin: 0 0 10px; color: var(--muted); font-size: 14px; }
.hs-keys { font-size: 13px; }
@media (pointer: coarse) { .hs-keys { display: none; } }
.hs-unread { margin: 0 0 10px; padding: 10px 12px; border-radius: 10px; background: var(--accent-soft); font-size: 14px; }
.hs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 8px; }
.hs-g { position: relative; display: flex; flex-direction: column; align-items: stretch; gap: 0; padding: 4px 4px 0; min-height: 104px; border: 0; border-radius: 10px;
  background: var(--paper); color: #111; box-shadow: 0 0 0 1px var(--line); cursor: pointer; content-visibility: auto; contain-intrinsic-size: 76px 104px; font: inherit;
  touch-action: manipulation; transition: box-shadow var(--t) var(--ease); }
.hs-g svg { width: 100%; height: 60px; display: block; }
.hs-g svg path { fill: #111; }
.hs-g .hs-base { stroke: #e3e6ea; stroke-width: 1; vector-effect: non-scaling-stroke; }
.hs-ch { display: grid; place-items: center; min-height: 40px; font-size: 20px; line-height: 1; border-top: 1px solid #eee; color: #111; }
.hs-g.lib::after { content: ""; position: absolute; top: 6px; inset-inline-start: 6px; width: 6px; height: 6px; border-radius: 50%; background: #9a9da3; }
.hs-g.unsure { box-shadow: 0 0 0 1px #c9a24a; }
.hs-g[data-state="out"] { opacity: .35; box-shadow: 0 0 0 1px var(--line); }
.hs-g[data-state="out"] .hs-ch { text-decoration: line-through; }
.hs-g[data-state="fixed"] { box-shadow: 0 0 0 2px var(--fg); }
.hs-g[data-state="fixed"] .hs-ch { font-weight: 700; }
.hs-skel { min-height: 104px; border-radius: 10px; background: var(--chip); opacity: .7; }
.hs-skel-line { min-height: 64px; }
.hs-skel-row { min-height: 44px; margin: 8px 0; }
.hs-empty { grid-column: 1 / -1; padding: 18px 4px; font-size: 15px; line-height: 1.5; }
.hs-empty p { margin: 0 0 8px; } .hs-empty-t { font-weight: 600; } .hs-ask { color: var(--muted); }
.hs-preview { margin: 6px 0 12px; } .hs-pvart { min-height: 64px; background: var(--paper); border-radius: 10px; box-shadow: 0 0 0 1px var(--line); padding: 10px; display: grid; place-items: center; color: #111; }
.hs-pvart svg { width: 100%; max-height: 120px; display: block; }
.hs-cap { margin-top: 6px; font-size: 13px; color: var(--muted); }
.hs-none { margin: 0; color: #5f6368; font-size: 14px; }
.hs-row { display: grid; grid-template-columns: minmax(84px, auto) minmax(0, 1fr) 3.2em 44px; grid-template-areas: "n i v r" ". m m m"; align-items: center; gap: 0 8px; margin: 4px 0; }
.hs-row .hs-rn { grid-area: n; font-size: 14px; } .hs-row input[type=range] { grid-area: i; width: 100%; min-height: 44px; margin: 0; accent-color: var(--fg); }
.hs-row .hs-val { grid-area: v; font-variant-numeric: tabular-nums; font-size: 14px; text-align: center; } .hs-row .hs-reset { grid-area: r; padding: 0; display: inline-grid; place-items: center; background: none; }
.hs-row .hs-meas { grid-area: m; font-size: 12px; color: var(--muted); }
.hs-color { grid-area: i; justify-self: start; width: 88px; height: 44px; padding: 2px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
label.hs-row { grid-template-areas: "n i i i"; }
.hs-facts { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 12px 0 0; font-size: 13px; }
.hs-facts dt { color: var(--muted); } .hs-facts dd { margin: 0; font-variant-numeric: tabular-nums; }
.hs-foot { flex: none; display: flex; align-items: center; gap: 8px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: var(--surface); border-top: 1px solid var(--line); }
.hs-status { flex: 1 1 auto; min-width: 0; margin: 0; font-size: 14px; color: var(--muted); }
.hs-save.primary { background: var(--fg); color: var(--on-fg, #fff); font-weight: 600; }
.hs-save:disabled { opacity: .4; cursor: default; }
.hs-save.busy { opacity: .7; }
@media (max-width: 520px) { .hs-pick span { display: none; } .hs-main { padding: 10px; gap: 10px; } .hs-grid { grid-template-columns: repeat(auto-fill, minmax(68px, 1fr)); } .hs-row { grid-template-columns: minmax(70px, auto) minmax(0, 1fr) 3em 44px; } }
@media (prefers-reduced-motion: reduce) { .hs-g { transition: none; } }
.hs-tabs { display: none; flex: none; gap: 6px; padding: 8px 12px 0; background: var(--desk); }
.hs-tab { flex: 1 1 0; background: var(--surface); box-shadow: 0 0 0 1px var(--line); }
.hs-tab[aria-selected="true"] { background: var(--fg); color: var(--on-fg); font-weight: 600; box-shadow: none; }
@media (max-width: 899px) { .hs-tabs { display: flex; } .hs-wrap[data-part="letters"] .hs-right, .hs-wrap[data-part="style"] .hs-left { display: none; } }
/* (19/10) the studio's two views: "my letters" (web/handbench.js, the default) and "learn from a page" */
.hs-modes { display: inline-flex; flex: none; gap: 2px; padding: 2px; border-radius: var(--r); background: var(--chip); }
.hs-mode { min-height: 44px; background: none; padding: 0 12px; font-size: 14px; color: var(--muted); }
.hs-mode[aria-selected="true"] { background: var(--surface); color: var(--fg); box-shadow: 0 1px 2px var(--ring); }   /* (the same weight: the bar never shifts) */
.hs-wrap[data-mode="letters"] .hs-tabs, .hs-wrap[data-mode="letters"] .hs-main, .hs-wrap[data-mode="letters"] .hs-foot { display: none; }
.hs-wrap[data-mode="page"] .hs-bench { display: none; }
.hs-bench { flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
@media (max-width: 640px) { .hs-title { display: none; } .hs-modes { flex: 1 1 auto; } .hs-mode { flex: 1 1 0; } }
.hb { position: relative; display: grid; gap: 14px; padding: 14px; grid-template-columns: minmax(0, 1fr); align-content: start; max-width: 1320px; margin: 0 auto; box-sizing: border-box; }
@media (min-width: 1000px) { .hb { grid-template-columns: minmax(0, 1.1fr) minmax(380px, 1fr); } }   /* (one scroll for the view: no scroll inside a scroll) */
.hb-letters, .hb-pv, .hb-ed { background: var(--surface); border-radius: var(--r-lg); box-shadow: 0 0 0 1px var(--line); padding: 14px; min-width: 0; }
.hb-side { display: grid; gap: 14px; align-content: start; min-width: 0; }
@media (max-width: 999px) { .hb-side { order: -1; } }
.hb-lhead { display: flex; align-items: center; gap: 8px; justify-content: space-between; margin-bottom: 8px; }
.hb-lhead .hs-h { margin: 0; }
.hb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 6px; }
.hb-card { position: relative; display: flex; flex-direction: column; min-height: 98px; padding: 4px 4px 0; border: 0; border-radius: 10px; background: var(--paper); color: #111;
  box-shadow: 0 0 0 1px var(--line); cursor: pointer; font: inherit; touch-action: manipulation; transition: box-shadow var(--t) var(--ease), transform var(--t) var(--ease); }
.hb-card svg { width: 100%; height: 62px; display: block; }
.hb-card svg path { fill: #111; }
.hb-base { stroke: #e3e6ea; stroke-width: 1; vector-effect: non-scaling-stroke; }
.hb-guide { stroke: #eef0f3; stroke-width: 1; stroke-dasharray: 4 4; vector-effect: non-scaling-stroke; }
.hb-ch { display: grid; place-items: center; min-height: 32px; font-size: 18px; line-height: 1; border-top: 1px solid #eee; color: #111; }
.hb-card[aria-selected="true"] { box-shadow: 0 0 0 2px var(--accent); }
.hb-card:active { transform: scale(.97); }
.hb-card.missing svg { background: repeating-linear-gradient(135deg, transparent 0 6px, #f2f2f0 6px 7px); border-radius: 8px; }
.hb-card.missing .hb-ch { color: #8a8a86; }
.hb-card.nudged::before { content: ""; position: absolute; top: 6px; inset-inline-start: 6px; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.hb-card.sus { box-shadow: 0 0 0 1px #c9a24a; }
.hb-dot { position: absolute; top: 5px; inset-inline-end: 5px; width: 9px; height: 9px; border-radius: 50%; background: #c98a00; box-shadow: 0 0 0 2px var(--paper); }
.hb-card:focus-visible, .hb-role:focus-visible, .hb-h:focus-visible, .hb-hgrab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.hb-skel { min-height: 98px; border-radius: 10px; background: var(--chip); }
.hb-more { margin-top: 12px; } .hb-more summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; color: var(--muted); font-size: 14px; }
.hb-chk { background: #fff3d6; color: #6b4a00; font-size: 14px; font-weight: 600; }
:root[data-theme="graphite"] .hb-chk { background: #4a3c1d; color: #ffd98a; }
.hb-check { display: grid; gap: 8px; margin: 0 0 12px; padding: 10px; border-radius: 12px; background: var(--desk); }
.hb-chint { margin: 0; font-size: 13px; color: var(--muted); }
.hb-ci { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 6px; border-radius: 10px; background: var(--surface); box-shadow: 0 0 0 1px var(--line); }
.hb-ci.on { box-shadow: 0 0 0 2px var(--accent); }
.hb-cshow { flex: 1 1 200px; min-width: 0; display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: start; cursor: pointer; border-radius: 8px; }
.hb-cshow:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.hb-ci svg { flex: none; width: 52px; height: 48px; background: var(--paper); border-radius: 8px; } .hb-ci svg path { fill: #111; }
.hb-cw { display: grid; gap: 2px; font-size: 14px; min-width: 0; } .hb-cw b { font-size: 18px; font-weight: 600; } .hb-cw span { color: var(--muted); }
.hb-cacts { display: flex; flex-wrap: wrap; gap: 6px; }
.hb-cacts .hs-btn, .hb-eacts .hs-btn { min-height: 44px; font-size: 14px; }
.hs-btn.danger { color: var(--danger); }
.hb-call { justify-self: start; }
.hb-pv .hs-h { margin-bottom: 8px; }
.hb-text { width: 100%; box-sizing: border-box; min-height: 88px; resize: vertical; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--paper); color: #111;
  font: 16px/1.55 var(--font-ui); }
.hb-text:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.hb-roles { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 4px; }
.hb-role { min-height: 44px; padding: 0 12px; font-size: 14px; background: var(--chip); }
.hb-role[aria-pressed="true"] { background: var(--fg); color: var(--on-fg); }
.hb-rctl { display: grid; gap: 0; }
.hb-sl { display: grid; grid-template-columns: minmax(96px, auto) minmax(0, 1fr) 3.4em; align-items: center; gap: 8px; }
.hb-sl label { font-size: 14px; } .hb-sl input[type=range] { width: 100%; min-height: 44px; margin: 0; accent-color: var(--fg); }
.hb-val { font-variant-numeric: tabular-nums; font-size: 14px; text-align: center; }
.hb-sw { display: flex; gap: 10px; padding: 6px 0; }
.hb-swc { width: 44px; height: 44px; border-radius: 50%; border: 0; box-shadow: 0 0 0 1px var(--line); cursor: pointer; }
.hb-swc[aria-checked="true"] { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--fg); }
.hb-art { margin-top: 10px; min-height: 96px; padding: 10px; border-radius: 10px; background: var(--paper); box-shadow: 0 0 0 1px var(--line); display: grid; place-items: center; overflow: hidden; }
.hb-art svg { width: 100%; height: auto; max-height: 360px; display: block; }
.hb-hit { fill: none; stroke: var(--accent); stroke-width: 1.6; vector-effect: non-scaling-stroke; }
.hb-none, .hb-note, .hb-hint { margin: 6px 0 0; font-size: 13px; color: var(--muted); }
.hb-unused { margin: 6px 0 0; font-size: 13px; color: var(--muted); }
.hb-note:empty { display: none; }
.hb-warn { margin: 0 0 6px; padding: 8px 10px; border-radius: 8px; background: #fff3d6; color: #6b4a00; font-size: 14px; }
:root[data-theme="graphite"] .hb-warn { background: #4a3c1d; color: #ffd98a; }
.hb-ehead { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.hb-ehead .hs-h { margin: 0; }
.hb-stage { width: 100%; height: auto; max-height: 300px; display: block; margin: 8px 0 4px; background: var(--paper); border-radius: 10px; box-shadow: 0 0 0 1px var(--line); color: #c8cbd0; touch-action: none; }
.hb-form path { fill: #111; } .hb-ghost path { fill: currentColor; opacity: .55; }
.hb-next { fill: #f1f2f4; stroke: #dfe2e6; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; }
.hb-h { fill: var(--surface); stroke: var(--accent); stroke-width: 2; vector-effect: non-scaling-stroke; pointer-events: none; }
.hb-hgap { fill: var(--accent); fill-opacity: .25; } .hb-tg { cursor: ew-resize; } .hb-tt { cursor: ns-resize; }
.hb-hgrab { cursor: grab; } .hb-hgrab.on, .hb-h.on { cursor: grabbing; }
.hb-vals { margin: 0; font-size: 14px; font-variant-numeric: tabular-nums; }
.hb-forms { display: flex; align-items: center; gap: 8px; margin: 8px 0; }
.hb-forms .hs-btn { padding: 0; display: inline-grid; place-items: center; }
.hb-fcnt { min-width: 7em; text-align: center; font-size: 14px; color: var(--muted); font-variant-numeric: tabular-nums; }
:root[dir="ltr"] .hb-forms svg { transform: scaleX(-1); }
.hb-eacts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.hb-eacts .primary, .hb-teach.primary { background: var(--fg); color: var(--on-fg); font-weight: 600; }
.hb-pad { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.hb-padsvg { width: 100%; height: auto; max-height: 280px; display: block; margin: 8px 0; background: var(--paper); border-radius: 10px; box-shadow: 0 0 0 1px var(--line); touch-action: none; cursor: crosshair; }
.hb-padsvg path { fill: #111; }
.hb-sync { margin: 0; margin-inline-start: auto; font-size: 13px; color: var(--muted); }
.hb-sync[data-s="offline"], .hb-sync[data-s="error"] { color: var(--warn); }
.hb-toast { position: fixed; inset-inline: 0; bottom: calc(16px + env(safe-area-inset-bottom)); margin: 0 auto; width: max-content; max-width: calc(100% - 32px); display: flex; align-items: center; gap: 12px;
  padding-block: 6px; padding-inline: 14px 6px; border-radius: 12px; background: var(--fg); color: var(--on-fg); box-shadow: var(--shadow-md); font-size: 14px; z-index: 4; }
.hb-undo { background: transparent; color: inherit; font-weight: 600; box-shadow: inset 0 0 0 1px currentColor; }
.hb-empty { padding: 18px 4px; font-size: 15px; line-height: 1.5; grid-column: 1 / -1; } .hb-empty p { margin: 0 0 8px; } .hb-empty-t { font-weight: 600; }
@media (max-width: 999px) { .hb-ed:not([hidden]) { position: fixed; inset-inline: 8px; bottom: calc(8px + env(safe-area-inset-bottom)); max-height: 62dvh; overflow: auto; z-index: 3; box-shadow: 0 0 0 1px var(--line), var(--shadow-md); }
  .hb.editing { padding-bottom: 64dvh; } .hb.editing .hb-toast { bottom: calc(64dvh + 16px); } }
@media (prefers-reduced-motion: reduce) { .hb-card { transition: none; } .hb-card:active { transform: none; } }

/* his own order (Roy 19/10, web/libsort.js): a held card lifts a little and follows the finger, the others make room;
   nothing new is drawn while nothing is held. A hold never selects text or opens the system's callout. */
.sortable > .lcard, .sortable > .lfwrap { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; transition: transform var(--t) var(--ease); }
.sortable > .lifted { transform: scale(1.03); }
.sortable > .lifted .cover, .sortable > .lifted .lfolder { box-shadow: 0 10px 28px rgba(0,0,0,.16), 0 2px 6px rgba(0,0,0,.08); }
.sortable > .dragging { position: relative; z-index: 5; transition: none; cursor: grabbing; }
.sortable > .dragging .lcard-open:active .cover, .sortable > .dragging .lfolder:active { transform: none; }
.sorting { touch-action: none; }
@media (prefers-reduced-motion: reduce) { .sortable > .lcard, .sortable > .lfwrap { transition: none; } .sortable > .lifted { transform: none; } }

/* ---------- folder looks to choose from: a DEV FLAG only, off for everyone (Roy picks designs himself, 19/10) ----------
   ?fstyle=a|b|c on the app URL (kept on this device as ep.dev.fstyle; ?fstyle= clears it). Nothing here applies without
   it. Shared tokens only; shadows never offset sideways (RTL); no letter-spacing on Hebrew.
   a  quiet tile: no ring and no shadow, a tint of the desk; the picture smaller, the name carries it
   b  the card is the folder: a tab on its top edge at the reading start, the picture gone, the name larger
   c  rows: a slim list of two columns, a small picture, the count at the end, a hairline between rows */
:root[data-fstyle="a"] .lfolders { gap: 8px; }
:root[data-fstyle="a"] .lfolder { min-height: 64px; gap: 12px; padding: 10px 14px; box-shadow: none; border-radius: var(--r);
  background: var(--chip); background: color-mix(in srgb, var(--fg) 4%, var(--desk)); }
:root[data-fstyle="a"] .lfolder:hover { background: var(--chip); background: color-mix(in srgb, var(--fg) 7%, var(--desk)); }
:root[data-fstyle="a"] .ficon, :root[data-fstyle="a"] .ficon svg { width: 34px; height: 28px; }
:root[data-fstyle="a"] .lfolder-t small { font-variant-numeric: tabular-nums; }

:root[data-fstyle="b"] .lfolders { gap: 18px 12px; padding-top: 10px; }
:root[data-fstyle="b"] .lfwrap { margin-top: 10px; }
:root[data-fstyle="b"] .lfolder { position: relative; min-height: 84px; padding: 14px 18px; border-radius: 4px var(--r-lg) var(--r-lg) var(--r-lg);
  box-shadow: 0 0 0 1px var(--edge), 0 1px 2px rgba(0,0,0,.04), 0 6px 18px -8px rgba(0,0,0,.10); }
:root[dir="rtl"][data-fstyle="b"] .lfolder { border-radius: var(--r-lg) 4px var(--r-lg) var(--r-lg); }
:root[data-fstyle="b"] .lfolder::before { content: ""; position: absolute; bottom: 100%; inset-inline-start: 0; width: 42%; max-width: 96px; height: 10px;
  background: inherit; border-radius: 8px 8px 0 0; box-shadow: 0 0 0 1px var(--edge); clip-path: inset(-2px -2px 0 -2px); }
:root[data-fstyle="b"] .ficon { display: none; }
:root[data-fstyle="b"] .lfolder-t b { font-size: var(--fs-title); }
:root[data-fstyle="b"] .lfolder-t small { font-variant-numeric: tabular-nums; }

:root[data-fstyle="c"] .lfolders { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 0 28px; }
:root[data-fstyle="c"] .lfolder { min-height: 56px; gap: 12px; padding: 8px 4px; border-radius: 0; background: none; box-shadow: inset 0 -1px 0 var(--line); }
:root[data-fstyle="c"] .lfolder:hover { background: var(--chip); background: color-mix(in srgb, var(--fg) 3%, transparent); }
:root[data-fstyle="c"] .ficon, :root[data-fstyle="c"] .ficon svg { width: 30px; height: 25px; }
:root[data-fstyle="c"] .lfolder-t { flex-direction: row; align-items: baseline; gap: 10px; }
:root[data-fstyle="c"] .lfolder-t b { flex: 1; -webkit-line-clamp: 1; }
:root[data-fstyle="c"] .lfolder-t small { flex: none; font-variant-numeric: tabular-nums; }
:root[data-fstyle="c"] .sortable > .lifted .lfolder { background: var(--surface); }
:root[data-fstyle] .lfwrap.acts .lfolder { padding-inline-end: 48px; }   /* (the ⋯ keeps its own room in every look) */
/* ---------- the practice screen (web/practice.js, 24/10): a few short lines on a pad of its own, never a notebook page.
   The app's tokens: desk, surface, chip, one active emphasis (chip + inset ring), black primary; the paper stays white. */
.pr-wrap { position: fixed; inset: 0; z-index: 61; display: flex; flex-direction: column; background: var(--desk); color: var(--fg); outline: none;
  overflow: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; touch-action: pan-y; font: var(--fs-ui)/var(--lh-ui) var(--font-ui);
  --pr-rule: #dfe6f1; --pr-base: #b9c6db; --pr-guide: rgba(17,17,17,.15); --pr-active: inset 0 0 0 1.5px var(--fg); }
body.pr-on { overflow: hidden; }
.pr-wrap button { font: inherit; color: inherit; cursor: pointer; }
.pr-wrap :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pr-wrap [tabindex="-1"]:focus { outline: none; }
.pr-bar { position: sticky; top: 0; z-index: 5; background: var(--surface); border-bottom: 1px solid var(--line); padding-top: env(safe-area-inset-top); flex: none; }
.pr-bar-in { max-width: 760px; margin: 0 auto; height: 56px; display: flex; align-items: center; gap: 8px;
  padding: 0 max(12px, env(safe-area-inset-right)) 0 max(12px, env(safe-area-inset-left)); }
.pr-title { flex: 1 1 auto; margin: 0; font-size: var(--fs-title); font-weight: var(--fw-bold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; outline: none; }
.pr-x { flex: none; width: 44px; height: 44px; border: 0; background: none; border-radius: var(--r); display: inline-grid; place-items: center; }
.pr-x svg, .pr-b svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.pr-x:active, .pr-link:active { background: var(--chip); }
.pr-link { background: none; border: 0; min-height: 44px; min-width: 44px; padding: 0 10px; color: var(--muted); border-radius: var(--r); font-size: var(--fs-sm); }
.pr-app { width: 100%; max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; flex: 1 0 auto;
  padding: 12px max(16px, env(safe-area-inset-right)) calc(16px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); box-sizing: border-box; }
.pr-abc { display: grid; grid-template-columns: repeat(14, 1fr); gap: 4px; margin: 4px 0; }
.pr-abc span { display: flex; align-items: center; justify-content: center; height: 28px; border-radius: var(--r-sm); background: var(--chip); color: var(--faint); font-size: 15px;
  transition: background-color var(--t) var(--ease), color var(--t) var(--ease), transform var(--t) var(--ease); }
.pr-abc span.on { background: var(--fg); color: var(--on-fg); }
.pr-abc span.pop { transform: scale(1.18); }
.pr-abc-meta { font-size: var(--fs-sm); color: var(--muted); min-height: 20px; font-variant-numeric: tabular-nums; }
.pr-screen { flex: 1; display: none; flex-direction: column; gap: 14px; padding-top: 12px; }
.pr-screen.active { display: flex; }
.pr-wrap h1 { font-size: 26px; line-height: var(--lh-title); margin: 0; font-weight: 700; text-wrap: balance; outline: none; }
.pr-wrap h2 { font-size: var(--fs-h); line-height: var(--lh-title); margin: 0; font-weight: var(--fw-bold); outline: none; }
.pr-wrap p { margin: 0; }
.pr-muted { color: var(--muted); }
.pr-step { font-size: var(--fs-sm); color: var(--muted); }
.pr-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.pr-chip { min-height: 44px; padding: 0 16px; border-radius: var(--r); border: 1px solid var(--line); background: var(--surface); }
.pr-chip[aria-pressed="true"] { background: var(--chip); box-shadow: var(--pr-active); border-color: transparent; }
.pr-actions { display: flex; gap: 8px; align-items: center; margin-top: auto; padding-top: 8px; }
.pr-grow { flex: 1; }
.pr-btn { min-height: 48px; padding: 0 20px; border-radius: var(--r); border: 1px solid var(--line); background: var(--surface); font-weight: var(--fw-bold);
  position: relative; overflow: hidden; transition: background-color var(--t) var(--ease), color var(--t) var(--ease), border-color var(--t) var(--ease); }
.pr-btn:active { background: var(--chip); }
.pr-btn.primary { background: var(--fg); color: var(--on-fg); border-color: var(--fg); }
.pr-btn.primary:active { background: var(--fg-press); }
.pr-btn:disabled { opacity: .6; cursor: default; }
.pr-btn span { position: relative; }
.pr-fill { position: absolute; inset: 0; background: var(--on-fg); opacity: .18; transform-origin: right; transform: scaleX(0); }
.pr-wrap[dir="ltr"] .pr-fill { transform-origin: left; }
.pr-tools { display: flex; align-items: center; gap: 2px; background: var(--surface); border-radius: var(--r-lg); padding: 4px; box-shadow: 0 0 0 1px var(--edge); }
.pr-b { flex: none; min-width: 48px; height: 48px; padding: 0 10px; border: 0; background: none; border-radius: var(--r); display: inline-flex; gap: 6px; align-items: center; justify-content: center;
  transition: background-color var(--t) var(--ease); }
.pr-b:active { background: var(--chip); }
.pr-b[aria-pressed="true"] { background: var(--chip); box-shadow: var(--pr-active); }
.pr-b:disabled { opacity: .32; cursor: default; }
.pr-b .lbl { font-size: 14px; }
.pr-sep { flex: none; width: 1px; height: 24px; background: var(--line); margin: 0 4px; }
.pr-paper { background: var(--paper); border-radius: var(--r); box-shadow: var(--shadow-md); position: relative; overflow: hidden; color: #111; }
.pr-pad { position: relative; height: 200px; touch-action: none; cursor: crosshair; }
.pr-pad.erasing { cursor: none; }
.pr-pad canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.pr-ecur { position: absolute; top: 0; left: 0; width: 24px; height: 24px; margin: -12px 0 0 -12px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px #111, 0 0 0 1px #fff;
  pointer-events: none; opacity: 0; }   /* (shown at once: no fade, tests/test_nav_polish.py) */
.pr-pad.erasing.hover .pr-ecur { opacity: 1; }
.pr-name { min-height: 44px; border-radius: var(--r); border: 1px solid var(--line); background: var(--surface); color: var(--fg); padding: 0 12px; font-size: 16px; width: 100%; max-width: 280px; }
.pr-hintrow { display: flex; align-items: center; gap: 8px; min-height: 44px; }
.pr-hint { font-size: 14px; color: var(--muted); flex: 1; }
.pr-cancel { background: var(--chip); border: 0; min-height: 44px; padding: 0 16px; border-radius: var(--r); font-weight: var(--fw-bold); }
.pr-auto { display: flex; align-items: center; gap: 10px; background: none; border: 0; min-height: 44px; padding: 0; color: var(--muted); font-size: var(--fs-sm); align-self: flex-start; }
.pr-sw { width: 36px; height: 22px; border-radius: 11px; background: var(--knob-off); position: relative; flex: none; transition: background-color var(--t) var(--ease); }
.pr-sw::after { content: ""; position: absolute; top: 3px; inset-inline-start: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--surface); box-shadow: 0 1px 2px rgba(0,0,0,.2); transition: transform var(--t) var(--ease); }
.pr-auto[aria-checked="true"] .pr-sw { background: var(--fg); }
.pr-auto[aria-checked="true"] .pr-sw::after { transform: translateX(14px); background: var(--on-fg); }
.pr-wrap[dir="rtl"] .pr-auto[aria-checked="true"] .pr-sw::after { transform: translateX(-14px); }
.pr-word { padding: 16px 0; min-height: 160px; display: grid; place-items: center; }
.pr-word svg { width: min(100%, 520px); max-height: 150px; }
.pr-src { padding: 12px 0 0; }
.pr-src canvas { display: block; width: 100%; height: 90px; }
.pr-tag { font-size: var(--fs-sm); color: #636363; padding: 0 16px; }
.pr-big { font-size: 44px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.pr-card { background: var(--surface); border-radius: var(--r-lg); box-shadow: 0 0 0 1px var(--edge); padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.pr-ai-row { display: flex; gap: 8px; flex-wrap: wrap; }
.pr-ai-row .pr-btn { flex: 1; min-width: 140px; }
.pr-toast { position: fixed; bottom: calc(24px + env(safe-area-inset-bottom)); left: 50%; transform: translate(-50%, 8px); background: var(--fg); color: var(--on-fg);
  padding: 4px 16px; border-radius: var(--r); font-size: 14px; opacity: 0; transition: transform var(--t) var(--ease); pointer-events: none;
  display: flex; align-items: center; gap: 8px; min-height: 44px; box-shadow: var(--shadow-md); max-width: calc(100vw - 32px); z-index: 62; }
.pr-toast.show { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.pr-toast button { background: none; border: 0; color: inherit; font-weight: var(--fw-bold); min-height: 40px; padding: 0 12px; border-radius: var(--r-sm); text-decoration: underline; text-underline-offset: 3px; }
.pr-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
@media (max-width: 420px) { .pr-tools .pr-b.tl .lbl { display: none; } .pr-tools .pr-b.tl { min-width: 52px; } }
@media (min-width: 700px) { .pr-abc { grid-template-columns: repeat(var(--n, 27), 1fr); } }
@media (min-width: 768px) { .pr-pad { height: 240px; } .pr-wrap h1 { font-size: 30px; } }
@media (min-height: 900px) { .pr-actions { margin-top: 12px; } }       /* (a tall iPad: Next right under the line, not a screen away) */
@media (prefers-reduced-motion: reduce) { .pr-wrap *, .pr-wrap *::after { transition: none !important; animation: none !important; } }
.pnl-body:has(> .pnl-view > .sgrp, > .sgrp) { background: var(--desk); }   /* grouped rows sit as cards on the desk (25/10) */

/* ---------- the app's own small dialogs (web/ask.js), in place of the browser's prompt and confirm boxes ---------- */
.askd { position: fixed; inset: 0; z-index: 90; background: var(--scrim); display: grid; place-items: center; padding: 20px; }
.askd-card { width: min(400px, 100%); background: var(--surface); color: var(--fg); border-radius: 22px; padding: 22px 22px 18px;
  box-shadow: 0 0 0 1px var(--edge), 0 40px 80px -40px rgba(0,0,0,.45); display: grid; gap: 16px; font-family: var(--font-ui); animation: rise var(--t) var(--ease); }
.askd-msg { margin: 0; font-size: 17px; font-weight: 700; line-height: 1.45; overflow-wrap: anywhere; }
.askd-in { font: inherit; font-size: 16px; color: var(--fg); background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; min-height: 48px; width: 100%; box-sizing: border-box; }
.askd-in:focus { outline: none; border-color: var(--fg); box-shadow: 0 0 0 3px color-mix(in srgb, var(--fg) 10%, transparent); }
.askd-row { display: flex; gap: 10px; justify-content: flex-end; }
.askd-b { font: inherit; font-size: 15px; font-weight: 700; min-height: 44px; padding: 0 18px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); color: var(--fg); cursor: pointer; }
.askd-b.primary { background: var(--fg); color: var(--surface); border-color: var(--fg); }
.askd-b.danger { background: #b42318; color: #fff; border-color: #b42318; }
.askd-b:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 600px) { .askd { place-items: end stretch; padding: 0; } .askd-card { width: 100%; border-radius: 22px 22px 0 0; padding-bottom: calc(18px + env(safe-area-inset-bottom)); }
  .askd-row .askd-b { flex: 1; } }
@media (prefers-reduced-motion: reduce) { .askd-card { animation: none; } }

/* ---------- the pen window, minimal (Roy 25/10): one segmented control for the pen, quiet labels, a thin slider, a calm preview ---------- */
.pop .lbl { font-size: 12.5px; font-weight: 700; color: var(--muted); padding: 10px 6px 6px; }
.pop .lbl:first-child { padding-top: 2px; }
.pop .seg-pens { display: flex; gap: 2px; padding: 3px; border-radius: 12px; background: var(--chip); }
.pop .seg-pens .b { flex: 1 1 0; min-width: 0; min-height: 38px; padding: 0 6px; border: 0; border-radius: 9px; background: none; box-shadow: none; color: var(--muted); font-size: 13.5px; font-weight: 600; white-space: nowrap; }
.pop .seg-pens .b.on { background: var(--surface); color: var(--fg); font-weight: 700; box-shadow: 0 1px 3px rgba(0,0,0,.12), 0 0 0 1px var(--edge); }
.pop .wrow { justify-content: flex-start; gap: 6px; }
.pop .wrow .sw.sz { width: 48px; height: 52px; border-radius: 12px; display: flex; flex-direction: column; gap: 3px; align-items: center; justify-content: center; }
.pop .wrow .sw.sz i { background: var(--fg); box-shadow: none; }
.pop .wrow .sw.sz small { font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.pop .wrow .sw.sz.on { background: var(--chip); }
.pop .wrow .sw.sz.on i { box-shadow: none; }
.pop .wrow .sw.sz.on small { color: var(--fg); font-weight: 700; }
.wslider { -webkit-appearance: none; appearance: none; height: 28px; background: none; cursor: pointer; }
.wslider::-webkit-slider-runnable-track { height: 4px; border-radius: 4px; background: var(--line); }
.wslider::-moz-range-track { height: 4px; border-radius: 4px; background: var(--line); }
.wslider::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; margin-top: -9px; border-radius: 50%; background: var(--surface); box-shadow: 0 0 0 1px var(--edge), 0 2px 6px rgba(0,0,0,.25); }
.wslider::-moz-range-thumb { width: 22px; height: 22px; border: 0; border-radius: 50%; background: var(--surface); box-shadow: 0 0 0 1px var(--edge), 0 2px 6px rgba(0,0,0,.25); }
.wslider:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 8px; }
.pop .pv { margin: 8px 0 2px; width: 100%; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); }   /* the page is white in both themes, so the ink shows as it will write */
.advpen { margin-top: 10px; padding-top: 4px; }
.advpen .advtog { color: var(--muted); font-weight: 600; }
.advpen .advrow { gap: 2px; margin-top: 8px; }
/* every segmented control in the app is one look (the pen window's, the landing's billing switch): a quiet track, the choice
   a raised white tab; no black outline (25/10) */
.seg { background: var(--chip); padding: 3px; border-radius: 12px; }
.seg button { border-radius: 9px; font-weight: 600; }
.seg button.on, .seg.lymode button.on { background: var(--surface); color: var(--fg); font-weight: 700; box-shadow: 0 1px 3px rgba(0,0,0,.12), 0 0 0 1px var(--edge); }
.pop .erase-modes { min-width: 240px; }
/* the first-notebook card in the landing's language (25/10): a 22 px card with one soft shadow, a clear title, quiet lines,
   and a real button to close it */
.firstuse { border-radius: 22px; padding: 20px 22px 16px; gap: 8px; box-shadow: 0 0 0 1px var(--edge), 0 30px 60px -30px rgba(0,0,0,.4); }
.firstuse .fu-t { font-size: 17px; font-weight: 700; }
.firstuse p { font-size: 14.5px; line-height: 1.55; }
.firstuse .fu-state { font-size: 14px; font-weight: 700; padding-top: 4px; }
.firstuse .fu-close { justify-self: stretch; margin-top: 6px; border-radius: 12px; background: var(--fg); color: var(--surface); font-weight: 700; border: 0; }
/* text fields: focus is a dark frame and a soft halo, never the AI's orange (25/10); buttons keep their keyboard ring */
textarea:focus-visible, .field:focus-visible, #note:focus-visible, .hbody .search:focus-visible, .hbody .field:focus-visible, .hs-wrap input:focus-visible {
  outline: none; border-color: var(--fg); box-shadow: 0 0 0 3px color-mix(in srgb, var(--fg) 10%, transparent); }
.hbody .search:focus, .hbody .field:focus { border-color: var(--fg); }
/* night mode, layers 2-3 (web/app.js repaper): the library's covers dark like the pages they show */
:root[data-nightpages] .lcard .cover:not([data-dark]) { background-color: #1a1917 !important; --rule-l: #3a3f47; --rule-g: #33373d; }
:root[data-nightpages] .lcard .cover img { filter: invert(.88) hue-rotate(180deg); }
:root[data-nightpages] .lcard .cover[data-dark] img { filter: none; }