/* KurenaiOS — css/views/ink.css · @layer views
   The ink engine (roadmap 6.1–6.2, design turn 30): the docked toolbar
   (30a), its popovers (30b), the Handwritten tab with its band, sheets
   and All pages (30c–30d). Paper is drawn in CSS from the theme's own
   --line, in page widths (cqw), so lines, squares and dots scale with the
   page and the ink on it. Ink colours are roles the canvas reads live
   (js/core/inkui.js); nothing here names a colour. */
@layer views {

/* ---------- the toolbar (30a) ---------- */
.k-ink-barwrap { position: sticky; inset-block-start: 0; z-index: var(--z-sticky); padding-block: var(--sp-6); background: var(--bg); container-type: inline-size; }
.k-ink-bar { display: flex; align-items: center; gap: var(--sp-6); padding: var(--sp-6); border-radius: var(--ink-bar-r); background: var(--s2); box-shadow: inset 0 0 0 var(--hairline) var(--line); overflow-x: auto; scrollbar-width: none; }
.k-ink-group { display: flex; align-items: center; gap: var(--sp-2); flex: 0 0 auto; }
.k-ink-group + .k-ink-group { padding-inline-start: var(--sp-6); border-inline-start: var(--hairline) solid var(--line); }
.k-ink-group[data-state~="off"] { display: none; }
.k-ink-extra { margin-inline-start: auto; }
.k-ink-tool { min-inline-size: var(--ink-tool-w); min-block-size: var(--ink-tool-h); display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-2); padding: var(--sp-4) var(--sp-6); border-radius: var(--r-12); background: none; box-shadow: none; color: var(--text-2); font-size: var(--fs-11); line-height: 1.1; }
.k-ink-tool:hover { background: var(--s3); color: var(--text); }
.k-ink-tool[data-state~="on"] { background: var(--text); color: var(--bg); }
.k-ink-tool:disabled { opacity: 0.4; }
.k-ink-tool-l { white-space: nowrap; }
.k-ink-glyph { inline-size: var(--ink-glyph); block-size: var(--ink-glyph); flex: 0 0 auto; }
.k-ink-plus { font-size: var(--fs-18); line-height: 1; }
.k-ink-file { display: none; }
/* a menu button built as a tool: icon over label, the caret beside it */
.k-ink-colour-btn, .k-ink-paper-btn { flex-direction: row; flex-wrap: wrap; justify-content: center; column-gap: var(--sp-4); }
.k-ink-colour-btn .k-btn-caret, .k-ink-paper-btn .k-btn-caret { font-size: var(--fs-11); }
.k-ink-paper-btn .k-ink-glyph { flex-basis: 100%; }
.k-ink-colour-btn .k-ink-glyph, .k-ink-pal-colour .k-ink-glyph { inline-size: var(--sp-16); block-size: var(--sp-16); }
.k-ink-dot { inline-size: var(--sp-14); block-size: var(--sp-14); border-radius: 50%; background: var(--ink-c, var(--text)); box-shadow: inset 0 0 0 var(--hairline) var(--line); }
.k-ink-dot[data-role="ink"], .k-ink-swatch[data-role="ink"], .k-ink-probe[data-role="ink"] { --ink-c: var(--text); }
.k-ink-dot[data-role="accent"], .k-ink-swatch[data-role="accent"], .k-ink-probe[data-role="accent"] { --ink-c: var(--crimson); }
.k-ink-dot[data-role="teal"], .k-ink-swatch[data-role="teal"], .k-ink-probe[data-role="teal"] { --ink-c: var(--teal); }
.k-ink-dot[data-role="amber"], .k-ink-swatch[data-role="amber"], .k-ink-probe[data-role="amber"] { --ink-c: var(--amber); }
.k-ink-dot[data-role="green"], .k-ink-swatch[data-role="green"], .k-ink-probe[data-role="green"] { --ink-c: var(--green); }
.k-ink-dot[data-role="bloom"], .k-ink-swatch[data-role="bloom"], .k-ink-probe[data-role="bloom"] { --ink-c: var(--bloom); }
/* a pen set from the Gold Shop (34p, invariant 133) re-maps the first three roles */
:root[data-penset="exam"] :is(.k-ink-dot, .k-ink-swatch, .k-ink-probe)[data-role="accent"] { --ink-c: var(--red); }
:root[data-penset="exam"] :is(.k-ink-dot, .k-ink-swatch, .k-ink-probe)[data-role="teal"] { --ink-c: var(--muted); }
:root[data-penset="sketch"] :is(.k-ink-dot, .k-ink-swatch, .k-ink-probe)[data-role="ink"] { --ink-c: var(--text-2); }
:root[data-penset="sketch"] :is(.k-ink-dot, .k-ink-swatch, .k-ink-probe)[data-role="accent"] { --ink-c: var(--bloom); }
:root[data-penset="sketch"] :is(.k-ink-dot, .k-ink-swatch, .k-ink-probe)[data-role="teal"] { --ink-c: var(--gold); }
.k-ink-swatches, .k-ink-widths { display: flex; align-items: center; gap: var(--sp-6); }
.k-ink-swatch { inline-size: var(--ink-swatch); block-size: var(--ink-swatch); min-inline-size: var(--ink-swatch); min-block-size: var(--ink-swatch); padding: 0; border-radius: 50%; background: var(--ink-c); box-shadow: inset 0 0 0 var(--hairline) var(--line); }
.k-ink-swatch[data-state~="hl"] { opacity: 0.6; }
.k-ink-swatch[aria-checked="true"] { box-shadow: 0 0 0 var(--sp-2) var(--s2), 0 0 0 var(--sp-4) var(--text); }
.k-ink-width { inline-size: var(--hit); block-size: var(--hit); min-inline-size: var(--hit); padding: 0; display: grid; place-items: center; border-radius: 50%; background: none; box-shadow: none; }
.k-ink-width-dot { border-radius: 50%; background: var(--text); inline-size: var(--sp-5); block-size: var(--sp-5); }
.k-ink-width[data-w="1"] .k-ink-width-dot { inline-size: var(--sp-8); block-size: var(--sp-8); }
.k-ink-width[data-w="2"] .k-ink-width-dot { inline-size: var(--sp-12); block-size: var(--sp-12); }
.k-ink-width[aria-checked="true"] { box-shadow: inset 0 0 0 var(--sp-2) var(--text); }
/* the eraser's and the lasso's mode: two chips */
.k-ink-choices { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-6); }
.k-ink-choice { min-block-size: var(--hit); padding-inline: var(--sp-10); cursor: pointer; white-space: nowrap; }
.k-ink-choice[data-state~="on"] { background: var(--text); color: var(--bg); }
/* an iPad's page column: the tools close up so the paper picker stays on
   the bar instead of behind its scroll arrow (labels kept) */
@container (max-width: 48rem) {
.k-ink-tool { min-inline-size: var(--hit-coarse); padding-inline: var(--sp-3); }
.k-ink-group + .k-ink-group { padding-inline-start: var(--sp-4); }
.k-ink-bar { gap: var(--sp-4); }
}
.k-ink-pop { inline-size: var(--ink-pop-w); max-inline-size: 92vw; padding: var(--sp-14); border-radius: var(--r-22); display: flex; flex-direction: column; gap: var(--sp-10); }
.k-ink-pop-note { margin: 0; font-size: var(--fs-12); color: var(--muted); line-height: 1.45; }

/* ---------- papers (the chips and the sheets) ---------- */
.k-ink-papers { display: flex; flex-wrap: wrap; gap: var(--sp-6); }
.k-ink-paper-chip { display: inline-flex; align-items: center; gap: var(--sp-6); min-block-size: var(--hit); padding-inline: var(--sp-10); cursor: pointer; }
.k-ink-paper-chip[data-state~="on"] { background: var(--text); color: var(--bg); }
/* a chip's swatch is too small for page widths: its paper is drawn at a
   fixed few pixels, in the page's own ink (cqw here would read the band) */
.k-ink-paper-swatch { --paper-ink: var(--muted); --ink-rule: var(--sp-4); --ink-square: var(--sp-4); --ink-cue: var(--sp-5); --ink-margin: var(--sp-3); --ink-marks: calc(var(--sp-14) - var(--sp-3)); inline-size: var(--sp-14); block-size: var(--sp-16); border-radius: var(--r-2); background-color: var(--s3); }
.k-ink-page, .k-ink-thumb { --paper-ink: var(--line); container-type: inline-size; background-color: var(--s1); }
.k-ink-page[data-paper="lined"], .k-ink-thumb[data-paper="lined"], .k-ink-paper-swatch[data-paper="lined"] {
background-image: linear-gradient(to bottom, transparent calc(var(--ink-rule) - var(--hairline)), var(--paper-ink) calc(var(--ink-rule) - var(--hairline)), var(--paper-ink) var(--ink-rule));
background-size: 100% var(--ink-rule); background-position: 0 calc(var(--ink-rule) * 2); background-repeat: repeat-y; }
.k-ink-page[data-paper="squared"], .k-ink-thumb[data-paper="squared"], .k-ink-paper-swatch[data-paper="squared"] {
background-image: linear-gradient(to bottom, var(--paper-ink) var(--hairline), transparent var(--hairline)), linear-gradient(to right, var(--paper-ink) var(--hairline), transparent var(--hairline));
background-size: var(--ink-square) var(--ink-square); }
.k-ink-page[data-paper="dotted"], .k-ink-thumb[data-paper="dotted"], .k-ink-paper-swatch[data-paper="dotted"] {
background-image: radial-gradient(circle, var(--muted) 0.18cqw, transparent 0.24cqw); background-size: var(--ink-rule) var(--ink-rule); }
.k-ink-paper-swatch[data-paper="dotted"] { background-image: radial-gradient(circle, var(--muted) var(--hairline), transparent calc(var(--hairline) * 1.5)); }
.k-ink-page[data-paper="cornell"], .k-ink-thumb[data-paper="cornell"], .k-ink-paper-swatch[data-paper="cornell"] {
background-image: linear-gradient(to right, transparent calc(var(--ink-cue) - var(--hairline)), var(--crimson) calc(var(--ink-cue) - var(--hairline)), var(--crimson) var(--ink-cue), transparent var(--ink-cue)),
  linear-gradient(to bottom, transparent calc(var(--ink-rule) - var(--hairline)), var(--paper-ink) calc(var(--ink-rule) - var(--hairline)), var(--paper-ink) var(--ink-rule));
background-size: 100% 80%, 100% var(--ink-rule); background-repeat: no-repeat, repeat-y; background-position: 0 0, 0 calc(var(--ink-rule) * 2); }
.k-ink-page[data-paper="booklet"], .k-ink-thumb[data-paper="booklet"], .k-ink-paper-swatch[data-paper="booklet"] {
background-image: linear-gradient(to right, transparent calc(var(--ink-margin) - var(--hairline)), var(--paper-ink) calc(var(--ink-margin) - var(--hairline)), var(--paper-ink) var(--ink-margin), transparent var(--ink-margin), transparent var(--ink-marks), var(--paper-ink) var(--ink-marks), var(--paper-ink) calc(var(--ink-marks) + var(--hairline)), transparent calc(var(--ink-marks) + var(--hairline))),
  linear-gradient(to bottom, transparent calc(var(--ink-rule) - var(--hairline)), var(--paper-ink) calc(var(--ink-rule) - var(--hairline)), var(--paper-ink) var(--ink-rule));
background-size: 100% 100%, 100% var(--ink-rule); background-repeat: no-repeat, repeat-y; background-position: 0 0, 0 calc(var(--ink-rule) * 2); }

/* the Gold Shop's papers (34p), from the theme's own line */
.k-ink-page[data-paper="kraft"], .k-ink-thumb[data-paper="kraft"], .k-ink-paper-swatch[data-paper="kraft"] {
background-color: var(--paper-kraft); background-image: linear-gradient(to bottom, transparent calc(var(--ink-rule) - var(--hairline)), var(--paper-ink) calc(var(--ink-rule) - var(--hairline)), var(--paper-ink) var(--ink-rule));
background-size: 100% var(--ink-rule); background-position: 0 calc(var(--ink-rule) * 2); }
.k-ink-page[data-paper="slate"], .k-ink-thumb[data-paper="slate"], .k-ink-paper-swatch[data-paper="slate"] {
background-color: var(--s3); background-image: linear-gradient(to bottom, var(--paper-ink) var(--hairline), transparent var(--hairline)), linear-gradient(to right, var(--paper-ink) var(--hairline), transparent var(--hairline));
background-size: var(--ink-square) var(--ink-square); }
.k-ink-page[data-paper="iso"], .k-ink-thumb[data-paper="iso"], .k-ink-paper-swatch[data-paper="iso"] {
background-image: radial-gradient(circle, var(--muted) 0.18cqw, transparent 0.24cqw), radial-gradient(circle, var(--muted) 0.18cqw, transparent 0.24cqw);
background-size: var(--ink-rule) calc(var(--ink-rule) * 1.732); background-position: 0 0, calc(var(--ink-rule) / 2) calc(var(--ink-rule) * 0.866); }
.k-ink-paper-swatch[data-paper="iso"] { background-image: radial-gradient(circle, var(--muted) var(--hairline), transparent calc(var(--hairline) * 1.5)), radial-gradient(circle, var(--muted) var(--hairline), transparent calc(var(--hairline) * 1.5)); }
.k-ink-page[data-paper="manuscript"], .k-ink-thumb[data-paper="manuscript"], .k-ink-paper-swatch[data-paper="manuscript"] {
background-image: linear-gradient(to bottom, var(--paper-ink) var(--hairline), transparent var(--hairline)), linear-gradient(to right, var(--paper-ink) var(--hairline), transparent var(--hairline));
background-size: calc(var(--ink-square) * 2) calc(var(--ink-square) * 2); }
.k-ink-page[data-paper="staff"], .k-ink-thumb[data-paper="staff"], .k-ink-paper-swatch[data-paper="staff"] {
background-image: repeating-linear-gradient(to bottom, var(--paper-ink) 0 var(--hairline), transparent var(--hairline) calc(var(--ink-rule) / 3));
background-size: 100% calc(var(--ink-rule) * 3); background-position: 0 var(--ink-rule); }
.k-ink-page[data-paper="graph"], .k-ink-thumb[data-paper="graph"], .k-ink-paper-swatch[data-paper="graph"] {
background-image: linear-gradient(to bottom, var(--paper-ink) var(--hairline), transparent var(--hairline)), linear-gradient(to right, var(--paper-ink) var(--hairline), transparent var(--hairline)),
  linear-gradient(to bottom, color-mix(in oklch, var(--paper-ink) 45%, transparent) var(--hairline), transparent var(--hairline)), linear-gradient(to right, color-mix(in oklch, var(--paper-ink) 45%, transparent) var(--hairline), transparent var(--hairline));
background-size: calc(var(--ink-square) * 2) calc(var(--ink-square) * 2), calc(var(--ink-square) * 2) calc(var(--ink-square) * 2), calc(var(--ink-square) * 0.4) calc(var(--ink-square) * 0.4), calc(var(--ink-square) * 0.4) calc(var(--ink-square) * 0.4); }

/* ---------- side by side (30e) ----------
   Two panes under the topic header, each its own scroll region; the pair
   sticks once the header has scrolled away, so both fill the screen. */
.k-topic-col > .k-topic-panel:has(> .k-ink-tab[data-state~="side"]) { max-inline-size: none; }
.k-ink-side { position: sticky; inset-block-start: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-20); block-size: calc(100dvh - var(--topbar-h) - var(--sp-16)); }
.k-ink-side-notes, .k-ink-side-page { min-inline-size: 0; min-block-size: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.k-ink-side-notes { padding-inline-end: var(--sp-12); }
.k-ink-side-head { display: flex; align-items: baseline; gap: var(--sp-8); margin-block-end: var(--sp-12); }
.k-ink-side-hint { margin-inline-start: auto; font-size: var(--fs-12); color: var(--muted); }
.k-ink-side-page { display: flex; flex-direction: column; gap: var(--sp-12); }
.k-ink-side-notes .k-notes :is(.k-n-fig, .k-n-diagram, .k-n-math, .k-n-kv, .k-n-tablewrap, .k-n-worked, .k-n-step, .k-callout, .k-n-code) { position: relative; cursor: pointer; }
.k-ink-side-notes [data-state~="clip-sel"] { border-radius: var(--r-14); box-shadow: 0 0 0 var(--sp-2) var(--focus-ring); }
.k-ink-clip-chips { position: absolute; inset-block-start: var(--sp-10); inset-inline-end: var(--sp-10); z-index: var(--z-sticky); display: flex; gap: var(--sp-6); }
.k-ink-clip-chips .k-btn { box-shadow: var(--elev-2); }
.k-ink-clip-chips .k-ink-glyph { inline-size: var(--sp-16); block-size: var(--sp-16); }

/* ---------- the tab (30c–30d) ---------- */
.k-topic-inkmode { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-8) var(--sp-14); }
.k-topic-inkmode:empty { display: none; }
.k-topic-inkmenus { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-6); margin-inline-start: auto; }
.k-ink-tab { position: relative; display: flex; flex-direction: column; gap: var(--sp-14); }
.k-ink-band { display: flex; gap: var(--sp-14); align-items: flex-start; }
.k-ink-band-mark { flex: 0 0 auto; inline-size: var(--hit-coarse); block-size: var(--hit-coarse); display: grid; place-items: center; border-radius: var(--r-12); background: var(--wash-teal); color: var(--teal); font: var(--fs-20) var(--font-kanji); }
.k-ink-band-body { flex: 1 1 0; min-inline-size: 0; display: flex; flex-direction: column; gap: var(--sp-8); }
.k-ink-band-title { margin: 0; font-size: var(--fs-16); }
.k-ink-band-p { margin: 0; color: var(--text-2); font-size: var(--fs-14); line-height: 1.5; }
.k-ink-band-pen { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-12); font-size: var(--fs-13); color: var(--muted); }
.k-ink-pages { display: flex; flex-direction: column; align-items: center; gap: var(--sp-4); }
.k-ink-sheet { inline-size: 100%; max-inline-size: var(--ink-page-max); display: flex; flex-direction: column; align-items: stretch; gap: var(--sp-6); }
.k-ink-gap { text-align: center; font: var(--fs-11) var(--font-mono); color: var(--muted); padding-block: var(--sp-6); }
.k-ink-page { position: relative; inline-size: 100%; aspect-ratio: 1000 / var(--ink-h, 1414); border-radius: var(--r-12); box-shadow: inset 0 0 0 var(--hairline) var(--line); overflow: hidden; }
.k-ink-canvas, .k-ink-live { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; }
.k-ink-live { touch-action: pan-x pan-y pinch-zoom; cursor: crosshair; }
/* finger drawing: one finger draws; the browser keeps the pinch, and two
   fingers scroll (inkui.js pans for them) */
.k-ink-page[data-state~="finger"] .k-ink-live { touch-action: none; touch-action: pinch-zoom; }
.k-ink-page[data-tool="text"] .k-ink-live { cursor: text; }
.k-ink-page[data-tool="lasso"] .k-ink-live { cursor: default; }
.k-ink-layer { position: absolute; inset: 0; pointer-events: none; }
.k-ink-layer > * { pointer-events: auto; }
.k-ink-chips { position: absolute; inset-inline-start: var(--ink-chip-x); inset-block-start: var(--ink-chip-y); display: flex; gap: var(--sp-4); padding: var(--sp-4); border-radius: var(--r-pill); background: var(--s3); box-shadow: var(--elev-2); }
.k-ink-chip { min-block-size: var(--hit); }
.k-ink-chip[data-state~="on"] { background: var(--text); color: var(--bg); }
.k-ink-text { position: absolute; inset-inline-start: var(--ink-chip-x); inset-block-start: var(--ink-chip-y); min-inline-size: 40%; padding: var(--sp-2) var(--sp-4); border: var(--hairline) dashed var(--teal); border-radius: var(--r-6); background: transparent; color: var(--text); font: var(--ink-text-size) / 1.3 var(--font-ui); resize: both; }
.k-ink-start { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-4); color: var(--muted); pointer-events: none; }
.k-ink-start .k-ink-glyph { inline-size: var(--sp-24); block-size: var(--sp-24); }
.k-ink-start-t { font-size: var(--fs-16); color: var(--text-2); }
.k-ink-start-s { font-size: var(--fs-12-5); }
.k-ink-pill { position: sticky; inset-block-end: var(--sp-16); align-self: flex-end; margin-block-start: calc(var(--sp-40) * -1); padding: var(--sp-4) var(--sp-12); border-radius: var(--r-pill); background: var(--s3); box-shadow: var(--elev-2); font: var(--weight-semibold) var(--fs-13) var(--font-mono); opacity: 0; transition: opacity var(--dur-fast) var(--ease); pointer-events: none; }
.k-ink-pill[data-state~="shown"] { opacity: 1; }
.k-ink-probe { position: absolute; inline-size: 0; block-size: 0; overflow: hidden; color: var(--ink-c); }

/* ---------- All pages (30d) ---------- */
.k-ink-all-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-10); }
.k-ink-all-title { margin: 0; font-size: var(--fs-16); }
.k-ink-all-meta { font-size: var(--fs-13); color: var(--muted); }
.k-ink-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-16); grid-template-columns: repeat(auto-fill, minmax(var(--ink-thumb-min), 1fr)); }
.k-ink-tile { display: flex; flex-direction: column; gap: var(--sp-6); min-inline-size: 0; }
.k-ink-thumb { position: relative; display: block; inline-size: 100%; aspect-ratio: 1000 / 1414; padding: 0; border-radius: var(--r-10); box-shadow: inset 0 0 0 var(--hairline) var(--line); overflow: hidden; }
.k-ink-thumb:hover { box-shadow: inset 0 0 0 var(--sp-2) var(--text-2); }
.k-ink-thumb-ink { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; }
.k-ink-tile-foot { display: flex; align-items: center; gap: var(--sp-4); }
.k-ink-tile-t { flex: 1 1 0; min-inline-size: 0; display: flex; flex-direction: column; font-size: var(--fs-12); color: var(--muted); }
.k-ink-tile-t strong { color: var(--text); font-size: var(--fs-13); }
.k-ink-handle { min-inline-size: var(--hit-dense); padding: 0; background: none; box-shadow: none; color: var(--muted); cursor: grab; }
.k-ink-newpage { inline-size: 100%; aspect-ratio: 1000 / 1414; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-4); border-radius: var(--r-10); background: none; box-shadow: inset 0 0 0 var(--hairline) var(--line); border: var(--hairline) dashed var(--line); color: var(--text-2); }
.k-ink-hint { margin: 0; padding: var(--sp-10) var(--sp-14); border-radius: var(--r-14); background: var(--s1); font-size: var(--fs-13); color: var(--text-2); }

/* the phone tier (Split View 590, Slide Over 375): the bar scrolls in
   one row; labels stay (30r) */
@media (max-width: 700px) {
.k-ink-barwrap { inset-block-start: 0; }
.k-ink-tool { min-inline-size: var(--hit-coarse); }
}

/* ---------- the floating palette and names on long press (30b, 30r) ---------- */
.k-ink-barwrap[data-state~="floating"] { display: none; }
.k-ink-pal { position: fixed; inset-inline-start: var(--pal-x, auto); inset-block-start: var(--pal-y, auto); z-index: var(--z-focus);
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); padding: var(--sp-6); border-radius: var(--ink-pal-r);
  background: var(--s2); box-shadow: inset 0 0 0 var(--hairline) var(--line), var(--elev-3); touch-action: none; }
.k-ink-pal[data-state~="over-modal"] { z-index: calc(var(--z-modal) + 1); }
.k-ink-pal[data-state~="lifted"] { box-shadow: inset 0 0 0 var(--hairline) var(--line), var(--elev-4); }
.k-ink-pal[data-state~="row"] { flex-direction: row; }
.k-ink-pal-group { display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); }
.k-ink-pal[data-state~="row"] .k-ink-pal-group { flex-direction: row; }
.k-ink-pal-group + .k-ink-pal-group, .k-ink-pal > .k-ink-tool[data-tool="dock"] { padding-block-start: var(--sp-4); border-block-start: var(--hairline) solid var(--line); }
.k-ink-pal[data-state~="row"] .k-ink-pal-group + .k-ink-pal-group, .k-ink-pal[data-state~="row"] > .k-ink-tool[data-tool="dock"] { padding-block-start: 0; border-block-start: 0; padding-inline-start: var(--sp-4); border-inline-start: var(--hairline) solid var(--line); }
.k-ink-pal .k-ink-tool { min-inline-size: var(--ink-pal-tool); }
.k-ink-pal[data-state~="icons"] .k-ink-tool { min-inline-size: var(--hit-coarse); }
.k-ink-pal[data-state~="icons"] .k-ink-tool-l { display: none; }
.k-ink-pal-grip { min-inline-size: var(--hit); min-block-size: var(--hit); padding: 0; display: grid; place-items: center; background: none; box-shadow: none; color: var(--muted); cursor: grab; touch-action: none; }
.k-ink-pal-colour { flex-direction: column; }
.k-ink-tip { position: fixed; inset-inline-start: var(--tip-x); inset-block-start: var(--tip-y); z-index: var(--z-toast); max-inline-size: var(--ink-tip-max);
  display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-8) var(--sp-12); border-radius: var(--r-12); background: var(--text); color: var(--bg); box-shadow: var(--elev-3); pointer-events: none; }
.k-ink-tip-t { font-size: var(--fs-13); }
.k-ink-tip-s { font-size: var(--fs-12); line-height: 1.35; opacity: 0.85; }
.k-ink-tool, .k-ink-pal-grip { -webkit-touch-callout: none; user-select: none; }

/* ---------- the answer pad (30f) and Kurenai's suggestions (30g) ---------- */
.k-pad-answer { display: flex; flex-direction: column; gap: var(--sp-8); }
.k-pad-modes { display: flex; }
.k-pad-slot { display: flex; flex-direction: column; gap: var(--sp-8); }
.k-pad { display: flex; flex-direction: column; gap: var(--sp-6); container-type: inline-size; }
.k-pad[hidden] { display: none; }
.k-pad .k-ink-barwrap { position: static; padding-block: 0; background: none; }
.k-pad-sheet { max-inline-size: var(--ink-strip-max); }
.k-pad-foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-8); }
.k-pad-foot:empty { display: none; }
.k-qz-point-t { display: flex; flex-direction: column; gap: var(--sp-4); }
.k-qz-needs { font-size: var(--fs-11); color: var(--muted); }
.k-qz-kurenai { display: flex; flex-wrap: wrap; gap: var(--sp-8); padding-block-start: var(--sp-6); }
.k-pad-sug { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--sp-6); padding: var(--sp-4) var(--sp-8); border-radius: var(--r-10);
  border: var(--hairline) dashed var(--teal); color: var(--text-2); font-size: var(--fs-12-5); line-height: 1.4; }
.k-pad-sug[data-state~="confirmed"] { border-style: solid; background: var(--wash-teal); color: var(--text); }
.k-pad-sug[data-state~="declined"] { border-color: var(--line); color: var(--muted); }
.k-pad-sug[data-state~="declined"] .k-pad-sug-t { text-decoration: line-through; }
.k-pad-sug-mark { color: var(--teal); font-weight: var(--weight-semibold); }
.k-pad-sent-lead, .k-pad-sent-not { margin: 0; font-size: var(--fs-13); color: var(--text-2); line-height: 1.45; }
.k-pad-sent-not { color: var(--muted); }
.k-pad-sent-img { margin: 0; display: flex; flex-direction: column; gap: var(--sp-4); }
.k-pad-sent-img img { max-inline-size: 100%; max-block-size: 40vh; object-fit: contain; border-radius: var(--r-10); box-shadow: inset 0 0 0 var(--hairline) var(--line); background: var(--s1); }
.k-pad-sent-img figcaption { font-size: var(--fs-12); color: var(--muted); }
.k-pad-sent-sec { display: flex; flex-direction: column; gap: var(--sp-4); }
.k-pad-sent-sec p, .k-pad-sent-list { margin: 0; font-size: var(--fs-13); line-height: 1.45; }
.k-pad-sent-ins { color: var(--text-2); }
.k-pad-sent-status { margin: 0; font-size: var(--fs-13); color: var(--muted); min-block-size: var(--sp-18); }
.k-ink-viewlist { display: flex; flex-direction: column; gap: var(--sp-12); max-block-size: 70vh; overflow-y: auto; }

/* ---------- working beside any tab (26 October 2026) ---------- */
.k-topic-workgrid { display: block; }
.k-topic-col[data-state~="work"] .k-topic-workgrid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-20); align-items: start; }
.k-topic-workpane { position: sticky; inset-block-start: var(--sp-8); display: flex; flex-direction: column; gap: var(--sp-8);
  max-block-size: calc(100dvh - var(--topbar-h) - var(--sp-16)); overflow-y: auto; overscroll-behavior: contain; }
.k-topic-workpane[hidden] { display: none; }
.k-topic-workhead { display: flex; align-items: center; gap: var(--sp-8); }
.k-topic-workhead .k-iconbtn { margin-inline-start: auto; }
.k-topic-work[data-state~="on"] { background: var(--text); color: var(--bg); }
@media (max-width: 1080px) {
.k-topic-col[data-state~="work"] .k-topic-workgrid { grid-template-columns: minmax(0, 1fr); }
.k-topic-workpane { position: static; max-block-size: none; }
}
/* the flashcard's answer modes (30o) */
.k-fc-modes { display: flex; justify-content: center; }
.k-fc-modes:empty { display: none; }
.k-fc-answer { inline-size: 100%; max-inline-size: var(--ink-strip-max); margin-inline: auto; display: flex; flex-direction: column; gap: var(--sp-8); }
.k-fc-answer[hidden] { display: none; }
.k-fc-answer-foot { display: flex; justify-content: flex-end; }
.k-fc-typed { inline-size: 100%; }

/* ---------- the ink dialogs and the drills (30k–30n) ---------- */
.k-dialog[data-state~="wide"] { inline-size: min(var(--ink-dlg-w), 100%); }
.k-ink-dlg-body { display: flex; flex-direction: column; gap: var(--sp-12); min-block-size: 0; }
.k-ink-conflict-acts { display: flex; flex-wrap: wrap; gap: var(--sp-8); margin-inline-start: auto; }
.k-drill-badge { margin: 0; font-size: var(--fs-12); color: var(--muted); }
.k-drill-p { margin: 0; font-size: var(--fs-14); color: var(--text-2); line-height: 1.5; }
.k-drill-sec { display: flex; flex-direction: column; gap: var(--sp-4); }
.k-drill-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-10); }
.k-drill-step { display: flex; flex-direction: column; gap: var(--sp-6); padding: var(--sp-10) var(--sp-12); border-radius: var(--r-14); background: var(--s1); box-shadow: inset 0 0 0 var(--hairline) var(--line); }
.k-drill-step[data-state~="hidden"] { background: repeating-linear-gradient(135deg, var(--s1) 0 var(--sp-8), var(--s2) var(--sp-8) var(--sp-16)); }
.k-drill-step[data-state~="now"] { box-shadow: inset 0 0 0 var(--sp-2) var(--teal); }
.k-drill-step-h { display: flex; align-items: center; gap: var(--sp-8); }
.k-drill-mk { margin-inline-start: auto; font: var(--fs-12) var(--font-mono); color: var(--teal); }
.k-drill-line { font-size: var(--fs-14); }
.k-drill-note, .k-drill-hidden, .k-drill-hint { margin: 0; font-size: var(--fs-12-5); color: var(--muted); }
.k-drill-verdict[data-v="had"] { color: var(--green); }
.k-drill-verdict[data-v="missed"] { color: var(--amber); }
.k-drill-acts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-8); }
.k-drill-summary { padding: var(--sp-12); border-radius: var(--r-14); background: var(--wash-teal); display: flex; flex-direction: column; gap: var(--sp-6); }
.k-drill-summary[hidden] { display: none; }
.k-drill-sum-t, .k-drill-result { margin: 0; }
.k-drill-blurt { display: grid; gap: var(--sp-16); grid-template-columns: minmax(0, 1fr); }
.k-drill-blurt[data-state~="compare"] { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: start; }
.k-drill-clock { font-size: var(--fs-20); }
.k-drill-points { display: flex; flex-direction: column; gap: var(--sp-6); }
.k-drill-point { display: flex; align-items: flex-start; gap: var(--sp-8); font-size: var(--fs-13-5); line-height: 1.4; }
.k-drill-count { font-size: var(--fs-12); color: var(--muted); }
.k-drill-diagram { display: grid; gap: var(--sp-16); grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: start; }
.k-drill-pagebox .k-ink-page { position: relative; }
.k-drill-model { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; color: var(--teal); opacity: var(--model-o, 0); pointer-events: none; }
.k-drill-slider { flex: 1 1 auto; }
.k-drill-mpanel { display: flex; flex-direction: column; gap: var(--sp-8); padding: var(--sp-12); border-radius: var(--r-14); background: var(--s1); }
.k-drill-list { margin: 0; padding-inline-start: var(--sp-18); font-size: var(--fs-13); line-height: 1.45; display: flex; flex-direction: column; gap: var(--sp-4); }
.k-drill-fold summary { cursor: pointer; font-size: var(--fs-13); }
.k-drill-check { padding: var(--sp-10) var(--sp-12); border-radius: var(--r-14); border: var(--hairline) dashed var(--amber); display: flex; flex-direction: column; gap: var(--sp-6); }
.k-drill-check p { margin: 0; }
.k-topic-worktools { display: flex; flex-wrap: wrap; gap: var(--sp-8); }
.k-n-writeout { position: absolute; inset-block-start: var(--sp-8); inset-inline-end: calc(var(--sp-8) * 9); padding: var(--sp-2) var(--sp-9); border-radius: var(--r-pill); background: var(--wash-teal); color: var(--teal); font-size: var(--fs-12); min-block-size: 0; }
@media (max-width: 860px) {
.k-drill-blurt[data-state~="compare"], .k-drill-diagram { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- the PDF viewer (30h–30j) ---------- */
.k-dialog-overlay.k-pv { display: grid; grid-template-rows: auto auto minmax(0, 1fr); align-items: stretch; justify-items: stretch; padding: 0; background: var(--bg); }
.k-pv-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-8); padding: var(--sp-8) var(--sp-16); border-block-end: var(--hairline) solid var(--line); background: var(--s1); }
.k-pv-title { font-size: var(--fs-14); max-inline-size: 40ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.k-pv-pageinfo { font-size: var(--fs-12); color: var(--muted); }
.k-pv-clockbox { display: inline-flex; align-items: center; gap: var(--sp-6); }
.k-pv-clock { font-size: var(--fs-16); padding-inline: var(--sp-6); }
.k-pv-clock[data-state~="low"] { color: var(--amber); }
.k-pv-follow { display: inline-flex; align-items: center; gap: var(--sp-6); font-size: var(--fs-13); }
.k-pv-bar { padding-inline: var(--sp-16); background: var(--bg); }
.k-pv-bar:empty { display: none; }
.k-pv-body { display: grid; grid-template-columns: var(--ink-thumbs-w) minmax(0, 1fr); min-block-size: 0; }
.k-pv[data-state~="scheme"] .k-pv-body { grid-template-columns: var(--ink-thumbs-w) minmax(0, 1fr) minmax(0, 1fr); }
.k-pv-thumbs { overflow-y: auto; display: flex; flex-direction: column; gap: var(--sp-8); padding: var(--sp-10); border-inline-end: var(--hairline) solid var(--line); }
.k-pv-thumb { position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); padding: var(--sp-4); border-radius: var(--r-10); background: none; box-shadow: none; }
.k-pv-thumb[aria-current="true"] { box-shadow: inset 0 0 0 var(--sp-2) var(--text); }
.k-pv-thumb-paper { inline-size: 100%; aspect-ratio: var(--pv-ar, 0.7071); background: var(--ex-paper); border-radius: var(--r-6); overflow: hidden; }
.k-pv-thumb-paper canvas { inline-size: 100%; block-size: 100%; display: block; }
.k-pv-thumb-n { font-size: var(--fs-11); color: var(--muted); }
.k-pv-thumb-dot { position: absolute; inset-block-start: var(--sp-6); inset-inline-end: var(--sp-6); font-size: var(--fs-11); color: var(--teal); display: none; }
.k-pv-thumb[data-state~="ink"] .k-pv-thumb-dot { display: block; }
.k-pv-stage { overflow-y: auto; overscroll-behavior: contain; padding: var(--sp-16); }
.k-pv-pages { display: flex; flex-direction: column; align-items: center; gap: var(--sp-16); }
.k-pv-page { position: relative; inline-size: 100%; max-inline-size: var(--ink-page-max); aspect-ratio: var(--pv-ar, 0.7071); background: var(--ex-paper); border-radius: var(--r-6); box-shadow: var(--elev-2); overflow: hidden; }
.k-pv-canvas { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; }
.k-ink-page.k-pv-ink { position: absolute; inset: 0; aspect-ratio: auto; background: none; box-shadow: none; border-radius: 0; }
.k-pv-stage[data-state~="clip"] .k-pv-page { cursor: crosshair; }
.k-pv-cliprect { position: absolute; inset-inline-start: var(--cx); inset-block-start: var(--cy); inline-size: var(--cw); block-size: var(--ch); border: var(--sp-2) dashed var(--teal); background: var(--wash-teal); pointer-events: none; }
.k-pv-scheme { overflow-y: auto; overscroll-behavior: contain; padding: var(--sp-16); border-inline-start: var(--hairline) solid var(--line); background: var(--s1); }
.k-pv-scheme[hidden] { display: none; }
.k-pv-schead { margin-block-end: var(--sp-10); }
.k-pv-status { margin: 0; padding: var(--sp-24); color: var(--muted); }
.k-pv-marks { display: flex; flex-direction: column; gap: var(--sp-4); max-block-size: 55vh; overflow-y: auto; }
.k-pv-mrow { display: grid; grid-template-columns: minmax(var(--sp-48), auto) var(--hit) minmax(var(--sp-48), var(--sp-64)) var(--hit) auto minmax(var(--sp-48), 1fr) auto; align-items: center; gap: var(--sp-6); }
.k-pv-mq { background: none; box-shadow: none; padding: 0; text-align: start; color: var(--text); }
.k-pv-lost { font-size: var(--fs-13); }
.k-pv-lost[data-tone="danger"] { color: var(--alarm); }
.k-pv-redo { display: inline-flex; align-items: center; gap: var(--sp-4); font-size: var(--fs-13); }
.k-pv-topicbtn { justify-content: flex-start; }
@media (max-width: 1080px) {
.k-pv[data-state~="scheme"] .k-pv-body { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); }
.k-pv[data-state~="scheme"] .k-pv-thumbs { display: none; }
}
@media (max-width: 860px) {
.k-pv-body { grid-template-columns: minmax(0, 1fr); }
.k-pv-thumbs { display: none; }
}

.k-ex-replist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-4); max-block-size: 40vh; overflow-y: auto; }
.k-ex-reprow { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--sp-10); }
.k-ex-reprow[data-outcome="skipped"] { opacity: 0.75; }

/* an assignment's attachments as cards (files plan R0) */
.k-asg-file { display: flex; align-items: center; gap: var(--sp-6); }
.k-asg-file-open { flex: 1 1 auto; min-inline-size: 0; display: flex; align-items: center; gap: var(--sp-8); padding: var(--sp-6) var(--sp-10); border-radius: var(--r-12); background: var(--s1); box-shadow: inset 0 0 0 var(--hairline) var(--line); text-align: start; }
.k-asg-file-open:hover { box-shadow: inset 0 0 0 var(--hairline) var(--text-2); }
.k-asg-file-kind { flex: 0 0 auto; padding: var(--sp-2) var(--sp-6); border-radius: var(--r-6); background: var(--s3); font: var(--weight-semibold) var(--fs-11) var(--font-mono); color: var(--text-2); }
.k-asg-file-open .k-asg-sub-t { flex: 1 1 auto; min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.k-asg-file-size { font-size: var(--fs-11); color: var(--muted); }

/* hold ⌘ (6.9) */
.k-desk-keys { position: fixed; inset-inline: 0; inset-block-start: 15vh; margin-inline: auto; z-index: var(--z-toast); inline-size: min(var(--ink-dlg-w), calc(100vw - var(--sp-32)));
  display: grid; grid-template-columns: repeat(auto-fit, minmax(var(--ink-pop-w), 1fr)); gap: var(--sp-16); padding: var(--sp-20); border-radius: var(--r-20); background: var(--s2); box-shadow: var(--elev-4); pointer-events: none; }
.k-desk-keys-g { display: flex; flex-direction: column; gap: var(--sp-6); }
.k-desk-keys-row { display: flex; gap: var(--sp-10); font-size: var(--fs-13); }
.k-desk-keys-row kbd { min-inline-size: 9em; color: var(--text-2); }

/* ---------- Settings › Pen and ink (30s) ---------- */
.k-pen-grid { display: grid; gap: var(--sp-16); grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
.k-pen-card { display: flex; flex-direction: column; gap: var(--sp-12); }
.k-pen-status { display: flex; gap: var(--sp-12); align-items: flex-start; }
.k-pen-mark { flex: 0 0 auto; inline-size: var(--hit); block-size: var(--hit); display: grid; place-items: center; border-radius: 50%; background: var(--s3); color: var(--muted); font-size: var(--fs-18); }
.k-pen-mark[data-tone="ok"] { background: var(--wash-teal); color: var(--teal); }
.k-pen-mark[data-tone="warn"] { color: var(--amber); }
.k-pen-row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-12); padding-block: var(--sp-6); }
.k-pen-row-t { display: flex; flex-direction: column; gap: var(--sp-2); min-inline-size: 0; }
.k-pen-row-s { margin: 0; font-size: var(--fs-13); color: var(--muted); line-height: 1.45; }
.k-pen-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-8); }
.k-pen-warn { margin: 0; font-size: var(--fs-13); color: var(--alarm); }
@media (max-width: 860px) { .k-pen-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------- sync, drop, read-only (30p) ---------- */
.k-ink-sync { font-size: var(--fs-11); min-block-size: var(--hit-dense); }
.k-ink-sync[data-state~="warn"] { color: var(--amber); box-shadow: inset 0 0 0 var(--hairline) var(--amber); }
.k-ink-sync:disabled { opacity: 1; cursor: default; }
.k-ink-pages[data-state~="drop"] { outline: var(--sp-2) dashed var(--teal); outline-offset: var(--sp-6); border-radius: var(--r-14); }
.k-ink-page[data-state~="readonly"] .k-ink-live { cursor: default; touch-action: auto; }
.k-ink-exporthost { position: absolute; inline-size: 0; block-size: 0; overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
.k-ink-pill { transition: none; }
}


/* ---------- notes pinned to a page, Ask about this page (files plan §5, R4) ---------- */
.k-pv[data-state~="pins"] .k-pv-body { grid-template-columns: var(--ink-thumbs-w) minmax(0, 1fr) var(--pv-pins-w); }
.k-pv[data-state~="pins"][data-state~="scheme"] .k-pv-body { grid-template-columns: var(--ink-thumbs-w) minmax(0, 1fr) minmax(0, 1fr) var(--pv-pins-w); }
.k-pv-pins { overflow-y: auto; overscroll-behavior: contain; padding: var(--sp-16); border-inline-start: var(--hairline) solid var(--line); background: var(--s1); display: flex; flex-direction: column; gap: var(--sp-10); }
.k-pv-pins[hidden] { display: none; }
.k-pv-pinhead { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-8); }
.k-pv-pinempty { font-size: var(--fs-13); }
.k-pv-pinlist { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--sp-6); }
.k-pv-pinrow { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--sp-8); inline-size: 100%; text-align: start; padding: var(--sp-8) var(--sp-10); border-radius: var(--r-10); background: var(--s2); color: var(--text); font-size: var(--fs-13); }
.k-pv-pin { position: absolute; z-index: 2; inset-inline-start: var(--px); inset-block-start: var(--py); translate: -50% -50%; display: grid; place-items: center; inline-size: var(--pv-pin); block-size: var(--pv-pin); min-inline-size: 0; min-block-size: 0; padding: 0; border-radius: 50% 50% 50% var(--r-2); background: var(--amber); color: var(--bg); font-size: var(--fs-12); font-weight: var(--weight-semibold); box-shadow: var(--elev-2); }
.k-pv-stage[data-state~="pin"] .k-pv-page { cursor: copy; }
.k-pv-asktext { max-block-size: 40vh; overflow-y: auto; white-space: pre-wrap; padding: var(--sp-12); border-radius: var(--r-10); background: var(--s2); font-size: var(--fs-13); }
.k-fc-pic { display: block; max-inline-size: 100%; max-block-size: var(--fc-pic-max-h); margin: var(--sp-8) auto; border-radius: var(--r-8); background: var(--ex-paper); }
@media (max-width: 1080px) {
.k-pv[data-state~="pins"] .k-pv-body { grid-template-columns: minmax(0, 1fr) var(--pv-pins-w); }
.k-pv[data-state~="pins"] .k-pv-thumbs { display: none; }
}
@media (max-width: 700px) {
.k-pv[data-state~="pins"] .k-pv-body { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) minmax(0, 0.6fr); }
}
}