/*
  מהלך: a squared math notebook.
  The page is graph paper; the red margin rule on the right is the solution's spine.
  Every size and gap is a whole number of cells (--cell), half-cells for small text.
*/

:root {
  --text-scale: 1;
  --cell: 0.875rem;
  --half: calc(var(--cell) / 2);

  --paper: #fbfcfd;
  --desk: #e8ecf2;
  --paper-raised: #ffffff;
  --grid: rgb(56 96 158 / 0.105);
  --text: #1b2030;
  --text-2: #465065;
  --pencil: #687186;
  --rule: #c5cfdf;
  --rule-strong: #9aa7bd;
  --ink: #2140a8;
  --ink-strong: #172f80;
  --ink-wash: rgb(33 64 168 / 0.07);
  --ink-wash-2: rgb(33 64 168 / 0.13);
  --on-ink: #ffffff;
  --red: #df5560;
  --red-ink: #b3202e;
  --red-wash: rgb(179 32 46 / 0.06);
  --green: #1b7447;
  --shadow: 0 1px 2px rgb(18 28 56 / 0.06), 0 10px 28px -10px rgb(18 28 56 / 0.24);

  --font-read: 'Assistant', 'Segoe UI', 'Arial Hebrew', Arial, system-ui, sans-serif;
  --font-print: 'David Libre', 'David', 'Times New Roman', serif;

  --pad: calc(var(--cell) * 2);
  --margin-w: calc(var(--cell) * 12);
  --gap: calc(var(--cell) * 2);
  --col-w: calc(var(--cell) * 50);
  --band-h: calc(var(--cell) * 4);

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  color-scheme: light;
}

:root[data-theme='dark'] {
  --paper: #121419;
  --desk: #0b0d11;
  --paper-raised: #1a1d24;
  --grid: rgb(150 176 228 / 0.075);
  --text: #e6e9f0;
  --text-2: #b6bdcb;
  --pencil: #9198aa;
  --rule: #2c3242;
  --rule-strong: #485166;
  --ink: #9db4ff;
  --ink-strong: #c4d2ff;
  --ink-wash: rgb(157 180 255 / 0.09);
  --ink-wash-2: rgb(157 180 255 / 0.16);
  --on-ink: #0d1430;
  --red: #f0646e;
  --red-ink: #ff8f97;
  --red-wash: rgb(255 143 151 / 0.08);
  --green: #6fd3a0;
  --shadow: 0 1px 2px rgb(0 0 0 / 0.4), 0 12px 32px -12px rgb(0 0 0 / 0.7);
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --paper: #121419;
    --desk: #0b0d11;
  --desk: #0b0d11;
    --paper-raised: #1a1d24;
    --grid: rgb(150 176 228 / 0.075);
    --text: #e6e9f0;
    --text-2: #b6bdcb;
    --pencil: #9198aa;
    --rule: #2c3242;
    --rule-strong: #485166;
    --ink: #9db4ff;
    --ink-strong: #c4d2ff;
    --ink-wash: rgb(157 180 255 / 0.09);
    --ink-wash-2: rgb(157 180 255 / 0.16);
    --on-ink: #0d1430;
    --red: #f0646e;
    --red-ink: #ff8f97;
    --red-wash: rgb(255 143 151 / 0.08);
    --green: #6fd3a0;
    --shadow: 0 1px 2px rgb(0 0 0 / 0.4), 0 12px 32px -12px rgb(0 0 0 / 0.7);
    color-scheme: dark;
  }
}

/* ---------- Base ---------- */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  font-size: calc(100% * var(--text-scale));
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--band-h) + var(--cell) * 2);
  scrollbar-color: var(--rule-strong) transparent;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font-family: var(--font-read);
  font-size: 1.125rem;
  line-height: calc(var(--cell) * 2);
  font-variant-numeric: tabular-nums;
  caret-color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--ink-wash-2); color: var(--ink-strong); }

a { color: var(--ink); text-underline-offset: 0.22em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }

:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 2px; }

h1, h2, h3, p, ol, ul, figure, fieldset { margin: 0; }
ol, ul { padding: 0; }
fieldset { border: 0; padding: 0; min-width: 0; }
button, input, textarea, select { font: inherit; color: inherit; }
code { font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace; font-size: 0.875em; }
[hidden] { display: none !important; }

.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; inset-inline-start: var(--cell); top: calc(var(--cell) * -6); z-index: 50;
  background: var(--ink); color: var(--on-ink); padding: var(--half) var(--cell); border-radius: 3px;
  text-decoration: none; font-weight: 600;
}
.skip-link:focus { top: var(--half); }

.icon { display: block; flex: none; }
[data-icon] { display: inline-flex; }

/* ---------- The sheet ---------- */

.page {
  min-height: 100dvh;
  background-color: var(--paper);
  /* Graph paper, anchored to the right edge so the margin rule lands on a line: the brand's squared page, drawn as 1px lines. */
  background-image:
    linear-gradient(to bottom, var(--grid) 1px, transparent 1px), /* taste-skill-ignore */
    linear-gradient(to left, var(--grid) 1px, transparent 1px); /* taste-skill-ignore */
  background-size: var(--cell) var(--cell);
  background-position: right top;
}

.band {
  position: sticky; top: 0; z-index: 20;
  height: var(--band-h);
  display: flex; align-items: center; gap: var(--cell);
  padding-inline: var(--pad);
  background: var(--paper);
  /* the printed double rule at the head of a notebook page */
  border-block-end: 4px double var(--rule);
}

.brand {
  display: flex; align-items: baseline; gap: var(--cell);
  text-decoration: none; color: inherit;
  min-width: calc(var(--margin-w) + var(--gap));
  flex: none;
}
.brand__name {
  font-family: var(--font-print); font-weight: 700;
  font-size: 1.75rem; line-height: calc(var(--cell) * 3);
  color: var(--ink);
}
.brand__tag {
  font-size: 0.875rem; line-height: calc(var(--cell) * 1.5); color: var(--pencil);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.band__steps { display: flex; align-items: center; gap: var(--half); }
.band__tools { margin-inline-start: auto; display: flex; align-items: center; gap: var(--half); }

.stepper {
  height: calc(var(--cell) * 3); padding-inline: var(--cell);
  background: transparent; border: 1px solid var(--rule); border-radius: 3px;
  font-size: 1rem; color: var(--text-2); cursor: pointer;
  max-width: calc(var(--cell) * 28); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.stepper:hover { border-color: var(--ink); color: var(--ink); }
.stepper b { color: var(--ink); font-weight: 700; }
.stepper .sl-slash { display: none; }

.sheet {
  display: grid;
  grid-template-columns: var(--margin-w) minmax(0, var(--col-w)) minmax(0, 1fr);
  column-gap: var(--gap);
  padding-inline-start: var(--pad);
  padding-inline-end: var(--pad);
  min-height: calc(100dvh - var(--band-h));
}

.margin {
  grid-column: 1;
  border-inline-end: 2px solid var(--red);
  padding-block: calc(var(--cell) * 3);
  padding-inline-end: var(--cell);
  min-width: 0;
}

.column {
  grid-column: 2;
  position: relative;
  overflow-wrap: break-word;
  padding-block: calc(var(--cell) * 3) calc(var(--cell) * 8);
  min-width: 0;
  outline: none;
}

.facing {
  grid-column: 3;
  padding-block: calc(var(--cell) * 3);
  padding-inline-start: var(--cell);
  min-width: 0;
}

/* ---------- Type ---------- */

.title {
  font-family: var(--font-print); font-weight: 700;
  font-size: 1.75rem; line-height: calc(var(--cell) * 2.5);
  letter-spacing: -0.01em;
  margin-block-end: var(--cell);
  text-wrap: balance;
  outline: none;
}

.lede { color: var(--text-2); margin-block-end: calc(var(--cell) * 2); max-width: 62ch; }

.section-title {
  font-family: var(--font-print); font-weight: 700;
  font-size: 1.25rem; line-height: calc(var(--cell) * 2);
  margin-block-end: var(--cell);
}

.meta {
  margin-block-start: calc(var(--cell) * 2);
  font-size: 0.875rem; line-height: calc(var(--cell) * 1.5); color: var(--pencil);
}

.kbd {
  font-family: var(--font-read); font-size: 0.75rem; line-height: 1;
  padding: 3px 6px; border-radius: 3px;
  border: 1px solid color-mix(in srgb, currentColor 45%, transparent);
  color: inherit;
  direction: ltr; unicode-bidi: isolate;
}

/* ---------- Controls ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--half);
  min-height: calc(var(--cell) * 3);
  padding-inline: calc(var(--cell) * 1.5);
  border-radius: 3px; border: 1.5px solid transparent;
  background: transparent; cursor: pointer;
  font-size: 1rem; font-weight: 600; line-height: calc(var(--cell) * 1.5);
  text-decoration: none; white-space: nowrap;
  transition: background-color 160ms var(--ease), border-color 160ms var(--ease), color 160ms var(--ease);
}
.btn:disabled { cursor: not-allowed; opacity: 0.45; }

.btn--primary { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
.btn--primary:hover:not(:disabled) { background: var(--ink-strong); border-color: var(--ink-strong); }

.btn--secondary { border-color: var(--ink); color: var(--ink); }
.btn--secondary:hover:not(:disabled) { background: var(--ink-wash); }

.btn--quiet { color: var(--text-2); padding-inline: var(--cell); }
.btn--quiet:hover:not(:disabled) { color: var(--ink); background: var(--ink-wash); }
.btn--quiet[aria-pressed='true'] { color: var(--ink); background: var(--ink-wash-2); }
.btn--danger:hover:not(:disabled) { color: var(--red-ink); background: var(--red-wash); }

.icon-btn {
  display: inline-grid; place-items: center;
  width: calc(var(--cell) * 3); height: calc(var(--cell) * 3);
  border-radius: 3px; border: 0; background: transparent; color: var(--text-2);
  cursor: pointer; font-weight: 700; font-size: 1rem;
}
.icon-btn:hover:not(:disabled) { color: var(--ink); background: var(--ink-wash); }
.icon-btn:disabled { opacity: 0.35; cursor: default; }

.link {
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--ink); font-weight: 600;
  text-decoration: underline; text-underline-offset: 0.22em; text-decoration-thickness: 1px;
}
.link:hover { text-decoration-thickness: 2px; }

.status {
  display: inline-flex; align-items: center; gap: var(--half);
  height: calc(var(--cell) * 3); padding-inline: var(--cell);
  border-radius: 3px; border: 1px solid var(--rule); background: var(--paper);
  font-size: 0.875rem; color: var(--text-2); cursor: pointer; white-space: nowrap;
}
.status:hover { border-color: var(--ink); }
/* State is drawn as a mark, not a colour alone: solid dot = connected, ring = not, dashed ring = unknown. */
.status__dot { width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--pencil); flex: none; }
.status[data-state='connected'] .status__dot { background: var(--green); border-color: var(--green); }
.status[data-state='simulated'] .status__dot { border-style: dashed; border-color: var(--ink); }
.status[data-state='checking'] .status__dot { border-style: dashed; }
.status[data-state='error'] .status__dot { border-color: var(--red-ink); }
.status[data-state='error'] { color: var(--red-ink); }

.field-label { display: block; font-size: 1rem; font-weight: 600; line-height: calc(var(--cell) * 1.5); margin-block-end: var(--half); }
.opt { font-weight: 400; color: var(--pencil); }

textarea, input[type='text'], input[type='password'] {
  width: 100%;
  border: 1.5px solid var(--rule-strong); border-radius: 3px;
  background: transparent;
  padding: var(--half) var(--cell);
  line-height: calc(var(--cell) * 2);
  transition: border-color 160ms var(--ease), background-color 160ms var(--ease);
}
textarea { resize: vertical; display: block; }
textarea:focus, input:focus { outline: none; border-color: var(--ink); background: var(--ink-wash); }
textarea::placeholder, input::placeholder { color: var(--pencil); opacity: 1; }

.segmented__options { display: flex; flex-wrap: wrap; gap: var(--half); }
.segmented__options label { position: relative; }
.segmented__options input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.segmented__options label > span {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: calc(var(--cell) * 2.5); padding-inline: var(--cell);
  border: 1px solid var(--rule-strong); border-radius: 3px;
  font-size: 1rem; color: var(--text-2);
}
.segmented__options input:checked + span { border-color: var(--ink); color: var(--ink); background: var(--ink-wash-2); font-weight: 600; outline: 1px solid var(--ink); outline-offset: -2px; }
.segmented__options input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 2px; }

/* ---------- Compose ---------- */

.composer { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--cell); }

.writing { position: relative; }
.writing textarea {
  font-size: 1.125rem;
  min-height: calc(var(--cell) * 11);
  padding: var(--cell);
  unicode-bidi: plaintext;
  border-color: var(--rule-strong);
}
.drop-hint {
  position: absolute; inset: 0; display: none; place-items: center; gap: var(--half);
  border: 2px dashed var(--ink); border-radius: 3px; background: var(--paper);
  color: var(--ink); font-weight: 700; pointer-events: none;
}
.drop-hint > span { display: inline-flex; align-items: center; gap: var(--half); }
.writing.is-dragging .drop-hint { display: grid; }

.symbols {
  display: flex; flex-wrap: wrap; gap: 4px;
  padding: var(--half); border: 1px solid var(--rule); border-radius: 3px; background: var(--paper);
}
.symbols button {
  min-width: calc(var(--cell) * 3); height: calc(var(--cell) * 3); padding-inline: 6px;
  border: 0; border-radius: 3px; background: transparent; cursor: pointer; color: var(--ink);
}
.symbols button:hover { background: var(--ink-wash); }
.symbols .katex { font-size: 1.05em; }

.preview {
  border-block-start: 1px dashed var(--rule-strong);
  padding-block-start: var(--half);
}
.preview__label { font-size: 0.875rem; line-height: calc(var(--cell) * 1.5); color: var(--pencil); }
.preview__body { color: var(--text); overflow-x: auto; }
.preview__body p + p { margin-block-start: var(--half); }

.attachments { list-style: none; display: flex; flex-wrap: wrap; gap: var(--cell); }
.attachment {
  position: relative; display: grid; grid-template-rows: calc(var(--cell) * 6) auto; gap: 4px;
  width: calc(var(--cell) * 8);
}
.attachment__thumb {
  width: 100%; height: 100%; object-fit: cover; border-radius: 2px;
  border: 1px solid var(--rule-strong); background: var(--paper-raised);
  display: grid; place-items: center; color: var(--pencil);
}
.attachment__name { font-size: 0.75rem; line-height: 1.4; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; direction: ltr; text-align: end; }
.attachment__remove {
  position: absolute; top: -10px; inset-inline-end: -10px;
  width: 28px; height: 28px; border-radius: 50%;
  border: 1px solid var(--rule-strong); background: var(--paper-raised); color: var(--text-2);
  display: grid; place-items: center; cursor: pointer;
}
.attachment__remove:hover { color: var(--red-ink); border-color: var(--red-ink); }

.tools-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--half); margin-inline-start: calc(var(--cell) * -1); }
.hint { font-size: 0.875rem; line-height: calc(var(--cell) * 1.5); color: var(--pencil); margin-inline-start: var(--half); }
.touch-only { display: none; }
@media (pointer: coarse) { .touch-only { display: inline-flex; } }
@media (hover: none) { .shortcuts { display: none; } }
/* Printing is a desk task; on a phone the toolbar keeps to one line. */
@media (hover: none) and (pointer: coarse) { #print-btn { display: none; } }

.submit-row { display: flex; align-items: center; justify-content: space-between; gap: calc(var(--cell) * 2); }
.privacy { font-size: 0.875rem; line-height: calc(var(--cell) * 1.5); color: var(--pencil); max-width: 46ch; }
#solve-btn { flex: none; }

.form-error {
  color: var(--red-ink); font-weight: 600; font-size: 1rem;
  border: 1px solid var(--red-ink); border-radius: 3px; padding: var(--half) var(--cell);
  background: var(--red-wash);
}

.sample-line { margin-block-start: calc(var(--cell) * 2); }
.sample-line .link .icon { margin-inline-end: 2px; }

/* ---------- Notices ---------- */

.notice {
  border: 1.5px solid var(--ink); border-radius: 3px;
  padding: var(--cell) calc(var(--cell) * 1.5);
  margin-block-end: calc(var(--cell) * 3);
  background: var(--paper);
}
.notice--quiet { border-color: var(--rule-strong); }
.notice__title {
  display: flex; align-items: center; gap: var(--half);
  font-size: 1.125rem; line-height: calc(var(--cell) * 2); font-weight: 700; color: var(--ink);
  margin-block-end: var(--half);
}
.notice p { font-size: 1rem; }
.notice__steps { padding-inline-start: calc(var(--cell) * 1.5); margin-block: var(--half); font-size: 1rem; }
.notice__steps li { padding-inline-start: 4px; }
.notice__steps li + li { margin-block-start: 4px; }
.notice__fine { color: var(--text-2); font-size: 1rem; }
.notice code { background: var(--ink-wash); padding: 1px 5px; border-radius: 2px; }

.access-form { display: grid; gap: var(--half); }
.access-form__row { display: flex; gap: var(--half); }
.access-form input { max-width: calc(var(--cell) * 20); }

/* ---------- Margin: history ---------- */

.margin__title {
  font-family: var(--font-print); font-weight: 700;
  font-size: 1rem; line-height: calc(var(--cell) * 2); color: var(--text-2);
  margin-block-end: var(--half);
}
.margin__empty { font-size: 0.875rem; line-height: calc(var(--cell) * 1.5); color: var(--pencil); }

.history { list-style: none; display: grid; }
.history__item { position: relative; }
.history__open {
  display: grid; grid-template-columns: calc(var(--cell) * 2) minmax(0, 1fr); column-gap: var(--half);
  width: 100%; padding-block: var(--half); padding-inline: 4px;
  background: none; border: 0; border-radius: 3px; text-align: start; cursor: pointer; color: inherit;
}
.history__open:hover { background: var(--ink-wash); }
.history__num { font-family: var(--font-print); font-weight: 700; color: var(--ink); font-size: 1rem; line-height: calc(var(--cell) * 1.5); }
.history__text {
  font-size: 0.875rem; line-height: calc(var(--cell) * 1.5); color: var(--text);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.history__text .katex { font-size: 1em; }
/* A snippet's formula keeps its beginning; too long, it fades out at its end. */
.history__text .m { display: inline-block; max-width: 100%; overflow: hidden; vertical-align: bottom; }
.history__text .m.is-wide { -webkit-mask-image: linear-gradient( /* taste-skill-ignore: an edge fade that says a formula continues */ to right, #000 calc(100% - var(--cell) * 2), transparent); mask-image: linear-gradient( /* taste-skill-ignore: an edge fade that says a formula continues */ to right, #000 calc(100% - var(--cell) * 2), transparent); }
.history__date { grid-column: 2; font-size: 0.75rem; line-height: calc(var(--cell) * 1.5); color: var(--pencil); }
.history__item.is-current .history__open { background: var(--ink-wash-2); }
.history__remove {
  position: absolute; top: var(--half); inset-inline-end: 0;
  width: 28px; height: 28px; display: grid; place-items: center;
  border: 0; background: var(--paper); border-radius: 3px; color: var(--pencil); cursor: pointer;
  opacity: 0; transition: opacity 160ms var(--ease);
}
.history__item:hover .history__remove, .history__remove:focus-visible { opacity: 1; }
/* No hover on a touch screen: the remove mark stays visible, quietly. */
@media (hover: none) { .history__remove { opacity: 1; background: transparent; } .history__open { padding-inline-end: calc(var(--cell) * 2.5); } }
.history__remove:hover { color: var(--red-ink); }

/* ---------- Review ---------- */

.review__source { display: flex; flex-wrap: wrap; gap: var(--cell); margin-block-end: calc(var(--cell) * 2); }
.source-thumb {
  padding: 0; border: 1px solid var(--rule-strong); border-radius: 2px; background: var(--paper-raised);
  cursor: zoom-in; display: block; overflow: hidden;
}
.source-thumb img { display: block; max-height: calc(var(--cell) * 14); max-width: 100%; width: auto; }
.source-thumb.is-open { cursor: zoom-out; flex-basis: 100%; }
.source-thumb.is-open img { max-height: none; width: 100%; }
.source-file {
  display: inline-flex; align-items: center; gap: var(--half);
  min-height: calc(var(--cell) * 3); padding-inline: var(--cell);
  border: 1px solid var(--rule-strong); border-radius: 2px; font-size: 1rem; color: var(--text-2);
}

.reading { position: relative; margin-block-end: calc(var(--cell) * 3); }
.reading__num {
  position: absolute; top: 0;
  inset-inline-start: calc(-1 * (var(--gap) + var(--margin-w)));
  width: var(--margin-w); padding-inline-end: var(--cell);
  text-align: end;
  font-family: var(--font-print); font-weight: 700; font-size: 1.5rem; line-height: calc(var(--cell) * 2);
  color: var(--ink);
}
.reading__choose { display: flex; align-items: center; gap: var(--half); font-weight: 600; margin-block-end: var(--half); cursor: pointer; }
.reading__choose input { width: 18px; height: 18px; accent-color: var(--ink); margin: 0; }
.reading__text { font-family: var(--font-print); font-size: 1.25rem; line-height: calc(var(--cell) * 2); }
.reading__text .mblock { margin-block: var(--half); }
.reading__edit { margin-block-start: var(--half); display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--half); }
.reading__edit textarea { font-family: var(--font-read); font-size: 1rem; unicode-bidi: plaintext; min-height: calc(var(--cell) * 8); }
.reading__tools { display: flex; flex-wrap: wrap; gap: var(--half); margin-block-start: var(--half); margin-inline-start: calc(var(--cell) * -1); }

.doubt {
  margin-block-start: var(--cell);
  border: 1.5px dashed var(--rule-strong); border-radius: 3px;
  padding: var(--half) var(--cell);
  font-size: 1rem;
}
.doubt__title { display: flex; align-items: center; gap: var(--half); font-weight: 700; font-size: 1rem; color: var(--text-2); }
.doubt ul { padding-inline-start: calc(var(--cell) * 1.5); }
.doubt li { padding-inline-start: 2px; }

.review__actions { display: flex; flex-wrap: wrap; gap: var(--half); margin-block-start: calc(var(--cell) * 2); }

/* The last line of a solution: where to go next. */
.end-actions {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--half);
  margin-block-start: calc(var(--cell) * 3); padding-block-start: calc(var(--cell) * 2);
  border-block-start: 1px solid var(--rule);
}
.end-actions .btn--quiet:last-child { margin-inline-start: auto; }

/* ---------- Working (streaming) state ---------- */

.working {
  display: grid; grid-template-columns: calc(var(--cell) * 3) minmax(0, 1fr) auto; align-items: center; gap: var(--cell);
  margin-block: calc(var(--cell) * 2);
  padding-block: var(--half);
  border-block: 1px dashed var(--rule-strong);
}
.working__line { position: relative; height: 2px; width: 100%; overflow: hidden; }
.working__line::before {
  content: ''; position: absolute; inset-block: 0; inset-inline-start: 0; width: 40%;
  background: var(--pencil); border-radius: 1px;
  animation: pencil 1.4s var(--ease) infinite;
}
/* right to left, the way the line is written */
@keyframes pencil { from { transform: translateX(0); } to { transform: translateX(-250%); } }
.working p { font-size: 1rem; color: var(--text-2); }
.working__slow { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: var(--half) var(--cell); padding-block-start: var(--half); border-block-start: 1px dashed var(--rule); }
.working__slow p { font-size: 1rem; line-height: calc(var(--cell) * 1.5); max-width: 60ch; }
.working__thought {
  font-size: 0.875rem !important; line-height: calc(var(--cell) * 1.5); color: var(--pencil) !important;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-height: calc(var(--cell) * 1.5);
}

/* ---------- Solution ---------- */

.banner {
  display: flex; align-items: flex-start; gap: var(--half);
  margin-block-end: calc(var(--cell) * 2);
  padding: var(--half) var(--cell);
  border: 1.5px dashed var(--ink); border-radius: 3px;
  font-size: 1rem; line-height: calc(var(--cell) * 1.5); color: var(--ink);
}
.banner .icon { margin-block-start: 1px; }

.question {
  margin-block: var(--cell) calc(var(--cell) * 2);
  border: 1px solid var(--rule); border-radius: 2px;
  background: var(--paper);
  padding: var(--cell) calc(var(--cell) * 1.5);
}
.question__head { display: flex; align-items: center; justify-content: space-between; gap: var(--cell); margin-block-end: var(--half); }
.question__label { font-family: var(--font-print); font-weight: 700; font-size: 1rem; line-height: calc(var(--cell) * 1.5); color: var(--text-2); }
.question__head .link { font-size: 0.875rem; }
.question__body { font-family: var(--font-print); font-size: 1.25rem; line-height: calc(var(--cell) * 2); }
.question__body p + p { margin-block-start: var(--half); }
.question__body .mblock { margin-block: var(--half); }
.question__source { display: flex; flex-wrap: wrap; gap: var(--half); margin-block-start: var(--cell); }
.question__source:empty { display: none; }
.question__source .source-thumb img { max-height: calc(var(--cell) * 8); }

.assumptions { margin-block-start: var(--cell); padding-block-start: var(--half); border-block-start: 1px dashed var(--rule); font-size: 1rem; line-height: calc(var(--cell) * 1.5); color: var(--text-2); }
.assumptions b { color: var(--text); }
.assumptions ul { padding-inline-start: calc(var(--cell) * 1.5); }

.approach { margin-block-end: calc(var(--cell) * 2); max-width: 68ch; }
.approach b { color: var(--ink); }

.answer-line {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--half) var(--cell);
  margin-block-end: calc(var(--cell) * 2);
  padding-block: var(--half);
}
.answer-line__label { font-weight: 700; }
.answer-line__math {
  /* the final answer is double-underlined, as in the notebook */
  border-block-end: 3px double var(--ink);
  padding-block: 4px 2px; color: var(--ink);
  overflow-x: auto; overflow-y: hidden; max-width: 100%;
  scrollbar-width: thin; scrollbar-color: var(--rule-strong) transparent;
}
.answer-line__math .katex-display { margin: 0; }
.answer-line .link { font-size: 0.875rem; }

.toolbar {
  display: flex; flex-wrap: wrap; gap: 0 var(--half);
  margin-inline-start: calc(var(--cell) * -1);
  margin-block-end: var(--cell);
}

.steps { list-style: none; counter-reset: step; }

.step {
  position: relative;
  padding-block: calc(var(--cell) * 2);
  border-block-start: 1px solid var(--rule);
}
.step:first-child { border-block-start-color: transparent; }
.step.is-new { animation: ink-in 220ms var(--ease) both; }
@keyframes ink-in { from { opacity: 0; transform: translateY(var(--half)); } }

/* The step number is written in the margin, beside the red rule. */
.step__num {
  position: absolute; top: calc(var(--cell) * 2);
  inset-inline-start: calc(-1 * (var(--gap) + var(--margin-w)));
  width: var(--margin-w); padding-inline-end: var(--cell);
  display: flex; justify-content: flex-end;
}
.step__num span {
  display: grid; place-items: center;
  width: calc(var(--cell) * 2.5); height: calc(var(--cell) * 2.5);
  margin-block-start: calc(var(--cell) * -0.25);
  border-radius: 50%; border: 1.5px solid transparent;
  font-family: var(--font-print); font-weight: 700; font-size: 1.5rem; line-height: 1;
  color: var(--ink);
  transition: border-color 200ms var(--ease), background-color 200ms var(--ease);
}
/* The current step is circled, and a stroke crosses the spine at its height. */
.step.is-current .step__num span { border-color: var(--ink); background: var(--paper); }
.step.is-current .step__num::after {
  content: ''; position: absolute; top: calc(var(--cell) * 1); inset-inline-end: calc(-1 * var(--gap) - 1px);
  width: calc(var(--gap) + var(--cell)); height: 2px; background: var(--ink); border-radius: 1px;
  transform-origin: right; animation: stroke 200ms var(--ease) both;
}
@keyframes stroke { from { transform: scaleX(0); } }

.step__part {
  display: inline-block; margin-inline-end: var(--half);
  font-size: 0.875rem; font-weight: 700; color: var(--text-2);
  border: 1px solid var(--rule-strong); border-radius: 2px; padding-inline: 6px; line-height: 1.5;
  vertical-align: 0.2em;
}

.step__title {
  font-size: 1.25rem; line-height: calc(var(--cell) * 2); font-weight: 700;
  text-wrap: balance;
}
.step__title .katex { font-size: 1.05em; }

.math {
  margin-block: var(--cell);
  color: var(--ink);
}
.math .mblock + .mblock { margin-block-start: var(--half); }
.mblock .katex-display { margin: 0; }
.mblock .katex-display > .katex { white-space: nowrap; }
/* A formula inside a Hebrew line never breaks: a right-to-left reader would meet its two halves in the wrong order. */
.m { unicode-bidi: isolate; white-space: nowrap; }
/* One too wide for its line scrolls inside itself instead. */
.m.is-wide { display: inline-block; max-width: 100%; vertical-align: middle; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; }
.mblock { max-width: 100%; overflow-x: auto; overflow-y: hidden; padding-block: 2px; scrollbar-width: thin; scrollbar-color: var(--rule-strong) transparent; }
/* A formula wider than the column scrolls; the faded edge says there is more. */
.has-overflow { -webkit-mask-image: linear-gradient( /* taste-skill-ignore: an edge fade that says a formula continues */ to left, transparent 0, #000 calc(var(--cell) * 2)); mask-image: linear-gradient( /* taste-skill-ignore: an edge fade that says a formula continues */ to left, transparent 0, #000 calc(var(--cell) * 2)); }
.has-overflow.is-end { -webkit-mask-image: none; mask-image: none; }
.m .katex { font-size: 1.08em; }
.mblock .katex { font-size: 1.16em; }
.tex-src code { color: var(--text-2); border-block-end: 1.5px dashed var(--rule-strong); }

.why { max-width: 68ch; }
.why__label { color: var(--ink); font-weight: 700; margin-inline-end: 4px; }
.why p { display: inline; }

.caution {
  margin-block-start: var(--cell);
  border: 1.5px dashed var(--rule-strong); border-radius: 3px;
  padding: var(--half) var(--cell);
  font-size: 1rem; max-width: 68ch;
}
.caution__label { font-weight: 700; }

.details { margin-block-start: var(--cell); }
.details summary {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: calc(var(--cell) * 2.5); cursor: pointer; list-style: none;
  font-size: 1rem; font-weight: 600; color: var(--ink);
}
.details summary::-webkit-details-marker { display: none; }
.details summary .icon { transition: transform 200ms var(--ease); }
.details[open] summary .icon { transform: rotate(180deg); }
.details__list { list-style: none; margin-block-start: var(--half); padding-inline-start: calc(var(--cell) * 1.5); border-inline-start: 1px solid var(--rule); }
.details__list li { font-size: 1rem; }
.details__list li + li { margin-block-start: var(--half); }
.details__list .math { margin-block: 4px; }
.details__list .mblock .katex { font-size: 1.04em; }

.step__ask { margin-block-start: var(--cell); margin-inline-start: calc(var(--cell) * -1); }

.ask-form {
  margin-block-start: var(--half);
  display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--half);
  padding: var(--cell); border: 1px solid var(--rule-strong); border-radius: 3px; background: var(--paper);
}
.ask-form__chips { display: flex; flex-wrap: wrap; gap: var(--half); }
.ask-form__chips button {
  min-height: calc(var(--cell) * 2.5); padding-inline: var(--cell);
  border: 1px solid var(--rule-strong); border-radius: 3px; background: transparent;
  font-size: 1rem; color: var(--text-2); cursor: pointer;
}
.ask-form__chips button:hover { border-color: var(--ink); color: var(--ink); }
.ask-form__row { display: flex; gap: var(--half); align-items: flex-end; }
.ask-form__row textarea { min-height: calc(var(--cell) * 3); font-size: 1rem; }

.followup { margin-block-start: var(--cell); padding-block-start: var(--half); border-block-start: 1px dashed var(--rule); }
.followup__q { font-size: 1rem; color: var(--text-2); }
.followup__q b { color: var(--text); }
.followup__a { margin-block-start: 4px; }
.followup__a p + p, .followup__a p + ul, .followup__a ul + p { margin-block-start: var(--half); }
.followup__a ul { padding-inline-start: calc(var(--cell) * 1.5); list-style: disc; }
.followup__a li::marker { color: var(--pencil); }
.followup__meta { font-size: 0.75rem; color: var(--pencil); margin-block-start: 4px; }
.followup.is-writing .followup__a::after { content: ''; display: inline-block; width: 2px; height: 1.1em; margin-inline-start: 2px; vertical-align: -0.2em; background: var(--pencil); animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* A step still being written: pencil grey, its lines drawn as dashes. */
.step.is-writing .step__title { color: var(--pencil); }
.step.is-writing .step__num span { color: var(--pencil); }
.pending-lines { margin-block-start: var(--cell); display: grid; gap: var(--cell); }
.pending-lines span { height: 0; border-block-start: 2px dashed var(--rule-strong); }
.pending-lines span:nth-child(1) { width: 60%; }
.pending-lines span:nth-child(2) { width: 85%; }
.pending-lines span:nth-child(3) { width: 40%; }

/* Practice mode: later steps are covered by a blank sheet. */
.step.is-covered > :not(.step__num):not(.cover) { display: none; }
.step.is-covered { padding-block: var(--cell); }
.step.is-covered .step__num { top: var(--cell); }
.cover {
  display: grid; align-content: center; justify-items: start; gap: var(--half);
  min-height: calc(var(--cell) * 3);
  padding: var(--half) calc(var(--cell) * 1.5);
  /* a hidden step reads as pending: a dashed sheet, as everything unfinished on this page */
  background: var(--paper);
  border: 1.5px dashed var(--rule-strong); border-radius: 3px;
}
.cover--next { padding-block: var(--cell); border-style: solid; border-color: var(--ink); background: var(--paper-raised); }
.cover p { font-size: 1rem; color: var(--text-2); }
.cover--next { justify-items: stretch; }
.cover__hint { border-block-start: 1px dashed var(--rule); padding-block-start: var(--half); }
.cover__hint b { color: var(--ink); }
.cover .problem-box__actions { justify-content: flex-start; }
.attempt { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--half); }
.attempt textarea { font-size: 1rem; unicode-bidi: plaintext; min-height: calc(var(--cell) * 6); }
.attempt__row { display: flex; justify-content: flex-end; }
.attempt__result:empty { display: none; }
.attempt__result .followup { margin-block-start: 0; }
.cover .problem-box__actions { margin-block-start: 0; }
.step.is-revealing > :not(.step__num):not(.cover) { animation: ink-in 220ms var(--ease) both; }
/* revealing a step slides its blank sheet off the page, toward the end of the line */
.cover.is-lifting { transform: translateX(calc(var(--cell) * -3)) rotate(-1.2deg); opacity: 0; transition: transform 200ms var(--ease), opacity 200ms var(--ease); }

/* After the steps: the boxed answer, the check, the doubts, the takeaways. */
.end { margin-block-start: calc(var(--cell) * 2); display: grid; grid-template-columns: minmax(0, 1fr); gap: calc(var(--cell) * 2); }

.final {
  border: 3px double var(--ink); border-radius: 2px;
  padding: var(--cell) calc(var(--cell) * 1.5);
  background: var(--paper);
}
.final h2 { font-family: var(--font-print); font-weight: 700; font-size: 1.25rem; line-height: calc(var(--cell) * 2); margin-block-end: var(--half); }
.final__item { margin-block: var(--half); }
.final__label { font-size: 1rem; font-weight: 600; color: var(--text-2); }
.final__math { color: var(--ink); padding-block: 4px; }
.final__summary { margin-block-start: var(--half); }
.final__qed { float: inline-end; color: var(--ink); margin-block-start: var(--half); }
.final.is-covered { border-style: dashed; border-width: 1.5px; border-color: var(--rule-strong); }
.final.is-covered > :not(h2):not(.cover-final) { display: none; }
.cover-final { color: var(--text-2); font-size: 1rem; }

.block-title { display: flex; align-items: center; gap: var(--half); font-family: var(--font-print); font-weight: 700; font-size: 1.25rem; line-height: calc(var(--cell) * 2); margin-block-end: var(--half); }
.check { padding-block-start: var(--half); }
.check__status { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; padding-block-end: 2px; }
.check__status[data-status='verified'] { color: var(--text); border-block-end: 2px solid var(--text-2); }
.check__status[data-status='partial'] { color: var(--text); border-block-end: 2px dashed var(--pencil); }
.check__status[data-status='not_verified'] { color: var(--text-2); border-block-end: 2px dotted var(--pencil); }
.check__note { margin-block-start: 4px; font-size: 0.875rem; line-height: calc(var(--cell) * 1.5); color: var(--pencil); max-width: 68ch; }
.check__method { margin-block-start: var(--half); color: var(--text-2); }
.check__details { margin-block-start: 4px; max-width: 68ch; }
.check__confidence { margin-block-start: var(--half); font-size: 1rem; color: var(--text-2); }
.check__confidence ul { padding-inline-start: calc(var(--cell) * 1.5); }

.points { border: 1.5px dashed var(--rule-strong); border-radius: 3px; padding: var(--cell) calc(var(--cell) * 1.5); }
.points ul, .ideas ul { padding-inline-start: calc(var(--cell) * 1.5); }
.points li + li, .ideas li + li { margin-block-start: 4px; }
.ideas li::marker { color: var(--ink); }

.problem-box {
  border: 1.5px solid var(--red-ink); border-radius: 3px;
  padding: var(--cell) calc(var(--cell) * 1.5);
  margin-block: calc(var(--cell) * 2);
  background: var(--red-wash);
}
.problem-box h2 { display: flex; align-items: center; gap: var(--half); font-size: 1.125rem; line-height: calc(var(--cell) * 2); color: var(--red-ink); margin-block-end: 4px; }
.problem-box p { font-size: 1rem; }
.problem-box__actions { display: flex; flex-wrap: wrap; gap: var(--half); margin-block-start: var(--cell); }
.problem-box details { margin-block-start: var(--half); font-size: 0.875rem; color: var(--text-2); }
.problem-box details summary { display: inline-flex; align-items: center; gap: 4px; min-height: calc(var(--cell) * 2); cursor: pointer; list-style: none; }
.problem-box details summary::-webkit-details-marker { display: none; }
.problem-box details summary:hover { color: var(--text); }
.problem-box details summary .icon { transition: transform 200ms var(--ease); }
.problem-box details[open] summary .icon { transform: rotate(180deg); }
.problem-box details pre { white-space: pre-wrap; direction: ltr; text-align: left; margin: 4px 0 0; font-size: 0.75rem; }
.problem-box--soft { border-color: var(--rule-strong); border-style: dashed; background: transparent; }
.problem-box--soft h2 { color: var(--text); }

/* ---------- Outline (facing page and popover) ---------- */

.outline ol { list-style: none; display: grid; }
.outline a {
  display: grid; grid-template-columns: calc(var(--cell) * 2) minmax(0, 1fr); gap: var(--half);
  padding-block: 4px; padding-inline: var(--half);
  border-radius: 3px; text-decoration: none; color: var(--text-2);
  font-size: 0.875rem; line-height: calc(var(--cell) * 1.5);
}
.outline a:hover { background: var(--ink-wash); color: var(--ink); }
.outline a[aria-current='step'] { color: var(--ink); background: var(--ink-wash-2); font-weight: 600; }
.outline__n { font-family: var(--font-print); font-weight: 700; color: var(--ink); text-align: center; }
.outline__t { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.outline__t .katex { font-size: 1em; }
.facing .outline { max-width: calc(var(--cell) * 22); }

/* A clipping of a worked page, shown beside the empty composer: the mechanism, not a claim. */
.outline__title { font-family: var(--font-print); font-weight: 700; font-size: 1rem; line-height: calc(var(--cell) * 2); color: var(--text-2); margin-block-end: var(--half); }

/* ---------- Popovers ---------- */

.pop {
  margin: 0; inset: auto;
  position: fixed; top: calc(var(--band-h) + var(--half)); inset-inline-end: var(--pad);
  width: min(calc(var(--cell) * 28), calc(100vw - var(--cell) * 2));
  max-height: calc(100dvh - var(--band-h) - var(--cell) * 2); overflow: auto;
  padding: 0; border: 1px solid var(--rule); border-radius: 4px;
  background: var(--paper-raised); color: var(--text);
  box-shadow: var(--shadow); /* taste-skill-ignore: a popover floats over the page */
}
.pop::backdrop { background: transparent; }
.pop__body { padding: var(--cell) calc(var(--cell) * 1.5) calc(var(--cell) * 1.5); display: grid; gap: var(--cell); }
.pop__title { font-family: var(--font-print); font-weight: 700; font-size: 1.25rem; line-height: calc(var(--cell) * 2); }
.pop__fine { font-size: 0.875rem; line-height: calc(var(--cell) * 1.5); color: var(--pencil); }
.pop p { font-size: 1rem; line-height: calc(var(--cell) * 1.5); }
.pop .history__text { font-size: 1rem; }
#outline-pop { inset-inline-end: auto; inset-inline-start: 50%; transform: translateX(50%); }

.setting legend, .setting__label { font-size: 1rem; font-weight: 600; margin-block-end: var(--half); line-height: calc(var(--cell) * 1.5); }
.setting--check { display: flex; gap: var(--half); align-items: flex-start; font-size: 1rem; line-height: calc(var(--cell) * 1.5); cursor: pointer; }
.setting--check input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--ink); flex: none; }
.size-row { display: flex; align-items: center; gap: var(--half); }
.size-row .icon-btn { border: 1px solid var(--rule-strong); }
.size-row output { min-width: calc(var(--cell) * 4); text-align: center; font-weight: 600; }

.status-detail { display: grid; gap: var(--half); }
.status-detail h2 { display: flex; align-items: center; gap: var(--half); font-size: 1.125rem; line-height: calc(var(--cell) * 2); }
.status-detail dl { display: grid; grid-template-columns: auto 1fr; gap: 4px var(--cell); margin: 0; font-size: 0.875rem; line-height: calc(var(--cell) * 1.5); }
.status-detail dt { color: var(--pencil); }
.status-detail dd { margin: 0; direction: ltr; text-align: end; unicode-bidi: isolate; }
.status-detail ol { padding-inline-start: calc(var(--cell) * 1.5); font-size: 1rem; line-height: calc(var(--cell) * 1.5); }
.status-detail code { background: var(--ink-wash); padding: 1px 4px; border-radius: 2px; }

/* ---------- Responsive ---------- */

@media (max-width: 1199px) {
  .facing { display: none !important; }
  .sheet { grid-template-columns: var(--margin-w) minmax(0, 1fr); }
}


@media (max-width: 1023px) {
  :root { --margin-w: calc(var(--cell) * 3); --gap: calc(var(--cell) * 1.5); }
  .brand { width: auto; }
  .brand__tag { display: none; }
}

@media (min-width: 1024px) {
  .narrow-only { display: none; }
}

@media (max-width: 720px) {
  :root { --pad: var(--cell); --margin-w: calc(var(--cell) * 2); --gap: var(--cell); }
  body { font-size: 1.0625rem; }
  .title { font-size: 1.5rem; line-height: calc(var(--cell) * 2); }
  .column { padding-block-start: calc(var(--cell) * 2); }
  .step__num span { width: calc(var(--cell) * 2); height: calc(var(--cell) * 2); font-size: 1.125rem; margin-block-start: 0; }
  .step.is-current .step__num::after { display: none; }
  .reading__num { font-size: 1.125rem; }
  .submit-row { flex-direction: column-reverse; align-items: stretch; }
  .submit-row .btn { width: 100%; }
  .review__actions .btn--primary, .end-actions .btn--primary { flex: 1 1 100%; }
  .end-actions .btn--quiet:last-child { margin-inline-start: 0; }
  .shortcuts { display: none; }
  .kbd { display: none; }
  .hint { flex-basis: 100%; margin-inline-start: var(--cell); }
  .band { gap: var(--half); }
  /* the state stays in words on a phone too: a dot alone said nothing */
  .status { padding-inline: var(--half); max-width: 42vw; font-size: 0.8125rem; }
  .status__text { overflow: hidden; text-overflow: ellipsis; }
  .question, .final, .points, .notice { padding-inline: var(--cell); }
  .working { grid-template-columns: calc(var(--cell) * 2) minmax(0, 1fr); }
  .working .btn { grid-column: 1 / -1; justify-self: start; }
  .band__steps {
    position: fixed; inset-inline: 0; bottom: 0; z-index: 20;
    justify-content: space-between; gap: var(--cell);
    padding: var(--half) var(--cell) calc(var(--half) + env(safe-area-inset-bottom));
    background: var(--paper); border-block-start: 1px solid var(--rule);
  }
  .band__steps .stepper { flex: 1; max-width: none; }
  .column { padding-block-end: calc(var(--cell) * 10); }
  .toolbar { gap: 0; }
  .tools-row .btn { padding-inline: var(--half); }
  .toolbar .btn { padding-inline: var(--half); }
  .mblock .katex { font-size: 1.04em; }
  .pop { inset-inline-end: var(--cell); }
  #outline-pop { inset-inline-start: var(--cell); inset-inline-end: var(--cell); width: auto; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

/* ---------- Print: the solution as a clean page ---------- */

@media print {
  :root { --text-scale: 0.9; }
  .page { background: none; }
  .band, .margin, .facing, .toolbar, .working, .step__ask, .ask-form, .question__head .link,
  #view-compose, #view-review, .banner .link, .problem-box__actions, .skip-link,
  .end-actions, .reasoning-log, .answer-line .link { display: none !important; }
  .sheet { display: block; padding: 0; }
  .column { padding: 0; }
  .step { break-inside: avoid; padding-inline-start: calc(var(--cell) * 3); }
  .step__num { inset-inline-start: 0; width: auto; padding: 0; }
  .details { display: block; }
  .details > :not(summary) { display: block !important; }
  .final, .points, .question { break-inside: avoid; }
  .step.is-covered > * { visibility: visible !important; }
  .cover { display: none !important; }
  a { color: inherit; text-decoration: none; }
}

/* ---------- Notes under a setting ---------- */

.model-note { font-size: 0.875rem; line-height: calc(var(--cell) * 1.5); color: var(--text-2); max-width: 64ch; }
.model-note b { color: var(--ink); font-weight: 700; }

/* The model's own reasoning, folded under the solution: a draft, set apart from the checked work. */
.reasoning-log summary {
  display: inline-flex; align-items: center; gap: var(--half);
  min-height: calc(var(--cell) * 3); cursor: pointer; list-style: none;
  font-weight: 600; color: var(--text-2);
}
.reasoning-log summary::-webkit-details-marker { display: none; }
.reasoning-log summary:hover { color: var(--ink); }
.reasoning-log[open] summary .icon { transform: rotate(180deg); }
.reasoning-log__note { font-size: 0.875rem; line-height: calc(var(--cell) * 1.5); color: var(--pencil); margin-block-end: var(--half); }
.reasoning-log__text {
  max-height: calc(var(--cell) * 30); overflow: auto;
  padding: var(--cell); border: 1.5px dashed var(--rule-strong); border-radius: 3px;
  font-size: 0.875rem; line-height: calc(var(--cell) * 1.5); color: var(--text-2);
  white-space: pre-wrap; overflow-wrap: anywhere; unicode-bidi: plaintext;
}

/* ---------- Solve settings: one line, opens into the full choice ---------- */

.settings { border-block: 1px solid var(--rule); }
.settings__summary {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--half) var(--cell);
  min-height: calc(var(--cell) * 3); padding-block: var(--half);
  cursor: pointer; list-style: none;
}
.settings__summary::-webkit-details-marker { display: none; }
.settings__label { font-size: 0.875rem; font-weight: 600; color: var(--pencil); }
.settings__value { font-size: 1rem; font-weight: 600; color: var(--text); flex: 1 1 auto; min-width: 0; }
.settings__edit { display: inline-flex; align-items: center; gap: var(--half); font-size: 0.875rem; font-weight: 600; color: var(--ink); }
.settings__chev { transition: transform 200ms var(--ease); }
.settings[open] .settings__chev { transform: rotate(180deg); }
.settings__summary:hover .settings__value { color: var(--ink); }
@media (max-width: 560px) {
  .settings__label { flex-basis: 100%; }
  .settings__value { flex: 1 1 0; }
}
.settings__body { display: grid; grid-template-columns: minmax(0, 1fr); gap: calc(var(--cell) * 1.5); padding-block: var(--half) calc(var(--cell) * 1.5); }

/* ---------- Compose: the notebook lies open ---------- */
/*
  The compose screen is a spread on the desk. Right (where Hebrew starts): the page being
  written, with its red margin and the number of the exercise it will be. Left: the
  worksheet facing it: the exercise as it will be printed, the practice sheet, the notebook's
  last exercises. The pages carry the grid; the desk does not.
*/
body[data-view='compose'] .page, body[data-view='review'] .page { background-color: var(--desk); background-image: none; }
body[data-view='compose'] .band, body[data-view='review'] .band { background: var(--desk); }
body[data-view='compose'] .margin, body[data-view='review'] .margin,
body[data-view='compose'] .facing, body[data-view='review'] .facing { display: none !important; }
body[data-view='compose'] .sheet, body[data-view='review'] .sheet { display: block; }
body[data-view='compose'] .column, body[data-view='review'] .column {
  max-width: calc(var(--cell) * 94); margin-inline: auto;
  padding-block: calc(var(--cell) * 3) calc(var(--cell) * 5);
}

.spread {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  border-radius: 2px;
  min-height: calc(100dvh - var(--band-h) - var(--cell) * 8);
}
.leaf {
  background-color: var(--paper);
  background-image:
    linear-gradient(to bottom, var(--grid) 1px, transparent 1px), /* taste-skill-ignore: the page's squares */
    linear-gradient(to left, var(--grid) 1px, transparent 1px); /* taste-skill-ignore */
  background-size: var(--cell) var(--cell);
  background-position: right top;
  padding-block: calc(var(--cell) * 3) calc(var(--cell) * 4);
  min-width: 0;
}

/* the page being written */
.leaf--write {
  display: grid; grid-template-columns: calc(var(--cell) * 5) minmax(0, 1fr);
  padding-inline-end: calc(var(--cell) * 3);
  /* the spine: where the two pages meet */
  border-inline-end: 2px solid var(--rule-strong);
}
.leaf__margin { border-inline-end: 2px solid var(--red); padding-inline-end: var(--cell); text-align: end; }
.leaf__num {
  display: block;
  font-family: var(--font-print); font-weight: 700; font-size: 1.75rem; line-height: calc(var(--cell) * 2.5);
  color: var(--ink); font-variant-numeric: lining-nums tabular-nums;
}
.leaf__num::after { content: '.'; }
.leaf__body { padding-inline-start: calc(var(--cell) * 2); min-width: 0; display: flex; flex-direction: column; }
/* The writing stays in view at the height of the screen while the facing page scrolls; below it the page goes on as blank lines. */
@media (min-width: 960px) {
  .leaf--write { align-items: start; }
  #view-compose .leaf__body { position: sticky; top: calc(var(--band-h) + var(--cell) * 3); height: calc(100dvh - var(--band-h) - var(--cell) * 7); min-height: calc(var(--cell) * 34); }
  .leaf__margin { align-self: stretch; }
  .leaf__num { position: sticky; top: calc(var(--band-h) + var(--cell) * 3); }
  .leaf--write .writing textarea { min-height: calc(var(--cell) * 2 * 4); }
}
/* the writing takes the page; the tools and the solve button sit at its foot */
.leaf--write .composer { flex: 1; display: flex; flex-direction: column; }
.leaf--write .writing { flex: 1; display: flex; }
.leaf--write .writing textarea { flex: 1; }
.leaf--write .lede { margin-block-end: calc(var(--cell) * 2); }

/* The field is a field: a solid, raised box with its own label, on the squared page. A blank page
   with dashed rules read as decoration, and people did not see where to type. */
.leaf--write .writing { flex-direction: column; gap: 4px; }
.writing__label { font-size: 0.875rem; font-weight: 700; line-height: calc(var(--cell) * 1.5); color: var(--text-2); }
.leaf--write .writing textarea {
  border: 1.5px solid var(--rule-strong); border-radius: 6px;
  background: var(--paper-raised);
  box-shadow: inset 0 1px 2px rgb(18 28 56 / 0.06);
  padding: var(--half) var(--cell);
  font-size: 1.25rem; line-height: calc(var(--cell) * 2);
  min-height: calc(var(--cell) * 2 * 6);
  cursor: text;
}
.leaf--write .writing textarea:hover { border-color: var(--ink); }
.leaf--write .writing textarea:focus { border-color: var(--ink); background: var(--paper-raised); box-shadow: 0 0 0 3px var(--ink-wash-2); }
.leaf--write .writing textarea::placeholder { color: var(--text-2); opacity: 0.85; }
.leaf--write .composer { gap: var(--cell); }
.leaf--write .composer > * { flex: none; }
.leaf--write .composer > .writing { flex: 1; }
.leaf--write .submit-row { margin-block-start: var(--half); flex-wrap: wrap; row-gap: var(--half); }
.leaf--write .privacy { flex: 1 1 26ch; }
/* the action first; its fine print follows it, beside or under it */
.leaf--write #solve-btn { order: -1; }
.leaf--write #solve-btn { min-height: calc(var(--cell) * 4); padding-inline: calc(var(--cell) * 2.5); font-size: 1.125rem; }

/* the worksheet facing it */
.leaf--sheet { display: grid; align-content: start; gap: calc(var(--cell) * 3); padding-inline: calc(var(--cell) * 3); container-type: inline-size; }
.leaf__title { font-family: var(--font-print); font-weight: 700; font-size: 1.25rem; line-height: calc(var(--cell) * 2); }
.leaf__note { font-size: 0.875rem; line-height: calc(var(--cell) * 1.5); color: var(--pencil); margin-block-end: var(--cell); }

/* the exercise as the solution will print it */
/* printed on the page itself, closed by the double rule a printed header carries */
.proof { padding-block-end: var(--cell); border-block-end: 3px double var(--rule-strong); }
.proof__title { font-family: var(--font-print); font-weight: 700; font-size: 1rem; line-height: calc(var(--cell) * 1.5); color: var(--text-2); margin-block-end: var(--half); }
.proof__body { font-family: var(--font-print); font-size: 1.25rem; line-height: calc(var(--cell) * 2); overflow-wrap: break-word; }
.proof__body p + p { margin-block-start: var(--half); }
.proof__body .mblock { margin-block: var(--half); }
/* nothing typed yet: no empty preview competing with the field */
.proof.is-empty { display: none; }
/* on the spread the facing page is the preview; the line under the field is for single pages */
@media (min-width: 960px) { #preview { display: none; } }

/* the practice sheet: printed exercises, numbered as on an exam paper */
.worksheet__list { list-style: none; display: grid; gap: 2px; }
.example {
  display: grid; grid-template-columns: calc(var(--cell) * 2) minmax(0, 1fr) auto; align-items: baseline; column-gap: var(--cell);
  width: 100%; padding: 4px var(--half);
  background: none; border: 0; border-radius: 3px;
  text-align: start; cursor: pointer; color: inherit;
}
.example:hover { background: var(--ink-wash); }
.example__num { font-family: var(--font-print); font-weight: 700; color: var(--ink); font-size: 1.125rem; line-height: calc(var(--cell) * 2); }
.example__text { font-family: var(--font-print); font-size: 1.125rem; line-height: calc(var(--cell) * 2); min-width: 0; overflow: hidden; }
.example__text .katex { font-size: 1.05em; color: var(--ink); }
.example__topic { font-size: 0.875rem; white-space: nowrap; line-height: calc(var(--cell) * 1.5); color: var(--pencil); }
.sample-line { margin-block-start: var(--cell); }
/* a narrow worksheet keeps the problem whole and writes its topic under it */
@container (max-width: 520px) {
  .example { grid-template-columns: calc(var(--cell) * 2) minmax(0, 1fr); }
  .example__topic { grid-column: 2; line-height: calc(var(--cell) * 1.25); }
}

/* the notebook's last pages */
.notebook-index .history__open { padding-inline: var(--half); }
/* the facing page shows the last three; the rest are one click away */
.notebook-index .history__item:nth-child(n + 4) { display: none; }
.notebook-index__all { margin-block-start: var(--half); font-size: 0.875rem; }

/* on a smaller spread the pages share the width more evenly */
@media (max-width: 1100px) { .spread { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); } .leaf--write { padding-inline-end: calc(var(--cell) * 2); } .leaf--sheet { padding-inline: calc(var(--cell) * 2); } }

/* below a spread's width the notebook closes to one page: the page you write on, then the worksheet */
@media (max-width: 959px) {
  .spread { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .leaf--write .writing { flex: none; }
  .leaf--write .writing textarea { flex: none; }
  .leaf--write { border-inline-end: 0; border-block-end: 2px solid var(--rule-strong); }
  .proof { display: none; }
  .example { grid-template-columns: calc(var(--cell) * 1.5) minmax(0, 1fr); }
  .example__topic { grid-column: 2; }
}
@media (max-width: 720px) {
  body[data-view='review'] .column,
  body[data-view='compose'] .column { padding-block: var(--cell) calc(var(--cell) * 3); }
  .spread { margin-inline: calc(var(--pad) * -1); }
  .leaf--write { grid-template-columns: calc(var(--cell) * 3) minmax(0, 1fr); padding-inline-end: calc(var(--cell) * 1.5); padding-block-start: calc(var(--cell) * 2); }
  .leaf__margin { padding-inline-end: var(--half); }
  .leaf__num { font-size: 1.25rem; line-height: calc(var(--cell) * 2); }
  .leaf__body { padding-inline-start: var(--cell); }
  .leaf--sheet { padding-inline: calc(var(--cell) * 1.5); }
  .leaf--write #solve-btn { width: 100%; }
  .leaf--write .submit-row { flex-direction: column; align-items: stretch; }
}

/* ---------- Solution: the worked page, and the exercise sheet facing it ---------- */
/*
  The notebook lies open on the desk here too. Right: the worked page, with its red margin and
  the step numbers. Left (from 1200px): the exercise sheet, which stays in view while the steps
  scroll by: the exercise as printed, its answer, the tools and the index of the steps.
*/
body[data-view='solution'] .page { background-color: var(--desk); background-image: none; }
body[data-view='solution'] .band { background: var(--desk); }
body[data-view='solution'] .sheet {
  max-width: calc(var(--cell) * 66); min-height: 0;
  margin: calc(var(--cell) * 3) auto calc(var(--cell) * 5);
  border-radius: 2px;
  background-color: var(--paper);
  background-image:
    linear-gradient(to bottom, var(--grid) 1px, transparent 1px), /* taste-skill-ignore: the page's squares */
    linear-gradient(to left, var(--grid) 1px, transparent 1px); /* taste-skill-ignore */
  background-size: var(--cell) var(--cell);
  background-position: right top;
}
body[data-view='solution'] .column { padding-block: calc(var(--cell) * 3) calc(var(--cell) * 5); }
/* a page's margin holds the step numbers and nothing else: five squares, not a column of its own */
@media (min-width: 721px) { body[data-view='solution'] .sheet { --margin-w: calc(var(--cell) * 5); } }
/* the exercise is printed on the page, closed by a printed double rule, never boxed */
body[data-view='solution'] .question {
  margin-block: var(--cell) calc(var(--cell) * 2); padding: 0 0 var(--cell);
  border: 0; border-block-end: 3px double var(--rule-strong); border-radius: 0; background: none;
}

@media (min-width: 1200px) {
  body[data-view='solution'] .sheet {
    --margin-w: calc(var(--cell) * 5);
    max-width: calc(var(--cell) * 96);
    grid-template-columns: var(--margin-w) minmax(0, 1fr) minmax(0, calc(var(--cell) * 30));
    padding-inline-end: 0;
  }
  body[data-view='solution'] .column { padding-inline-end: var(--cell); }
  /* the spine */
  body[data-view='solution'] .facing { border-inline-start: 2px solid var(--rule-strong); padding: 0; }
  .facing__inner {
    position: sticky; top: calc(var(--band-h) + var(--cell));
    max-height: calc(100dvh - var(--band-h) - var(--cell) * 2); overflow-y: auto; scrollbar-width: thin;
    display: grid; align-content: start; gap: calc(var(--cell) * 2);
    padding: calc(var(--cell) * 3) calc(var(--cell) * 2);
  }
  /* the exercise printed on the sheet itself, closed by a printed double rule */
  .facing__sheet { display: grid; gap: calc(var(--cell) * 1.5); }
  .facing__sheet:empty { display: none; }
  .facing .question { margin: 0; padding: 0 0 var(--cell); border: 0; border-block-end: 3px double var(--rule-strong); background: none; }
  .facing .question__head { flex-wrap: wrap; }
  .facing .answer-line { margin: 0; padding: 0; }
  .facing .toolbar { margin: 0; display: grid; grid-template-columns: 1fr 1fr; }
  .facing .toolbar .btn { justify-content: flex-start; }
  .facing .outline { max-width: none; }
}

/* single page: the page lies on the desk; on a phone it runs edge to edge */
@media (max-width: 720px) {
  body[data-view='solution'] .sheet { margin: 0; }
}

/* On the page nothing is boxed: the final answer is double-ruled above and below, as a student
   double-underlines it, and a caution or a doubt sits between dashed rules. */
body[data-view='solution'] .final { border: 0; border-block: 3px double var(--ink); border-radius: 0; padding-inline: 0; background: none; }
body[data-view='solution'] .final.is-covered { border-block-style: dashed; border-block-width: 1.5px; border-color: var(--rule-strong); }
body[data-view='solution'] .caution,
body[data-view='solution'] .points { border: 0; border-block: 1.5px dashed var(--rule-strong); border-radius: 0; padding-inline: 0; }

/* ---------- Reading a photo: what was read, facing the original ---------- */
/* the exercise numbers stand in this page's margin, as the step numbers do on a solution */
.spread--review { --margin-w: calc(var(--cell) * 5); --gap: calc(var(--cell) * 2); }
.spread--review .reading__num { padding-inline-end: var(--cell); }
.spread--review .reading { padding-block-end: calc(var(--cell) * 2); }
.spread--review .reading + .reading { border-block-start: 1px solid var(--rule); padding-block-start: calc(var(--cell) * 2); }
.spread--review .reading__text { font-size: 1.25rem; }
/* a doubt is written between dashed rules on the page, not boxed */
.spread--review .doubt { border: 0; border-block: 1.5px dashed var(--rule-strong); border-radius: 0; padding-inline: 0; }
.spread--review .review__actions { margin-block-start: calc(var(--cell) * 2); }

/* the original, large, in view while each line is checked */
.source-sheet { display: grid; align-content: start; gap: var(--cell); }
.leaf--source .review__source { display: grid; gap: var(--cell); margin: 0; }
.leaf--source .source-thumb { width: 100%; border: 0; border-radius: 0; background: var(--paper-raised); }
.leaf--source .source-thumb img { width: 100%; max-height: calc(100dvh - var(--band-h) - var(--cell) * 14); object-fit: contain; }
.leaf--source .source-thumb.is-open img { max-height: none; }
@media (min-width: 960px) {
  .leaf--source .source-sheet { position: sticky; top: calc(var(--band-h) + var(--cell) * 3); }
  /* the original is the reference the reading answers to: its page comes first in reading order on one page, beside it on a spread */
  .spread--review { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
}
/* one page: the original first, then what was read from it */
@media (max-width: 959px) {
  .spread--review .leaf--source { order: -1; border-block-end: 2px solid var(--rule-strong); }
  .spread--review .leaf--write { border-block-end: 0; }
  .leaf--source .source-thumb img { max-height: calc(var(--cell) * 22); }
}
@media (max-width: 720px) {
  .spread--review { --margin-w: calc(var(--cell) * 3); --gap: var(--cell); }
  .spread--review .reading__num { padding-inline-end: var(--half); }
}
.spread--review .reading { margin-block-end: 0; }
/* the exercise that will not be solved steps back to pencil */
.spread--review .reading:has(input[name='pick']:not(:checked)) :is(.reading__text, .reading__num) { color: var(--pencil); }
.spread--review .reading:has(input[name='pick']:not(:checked)) .katex { color: var(--pencil); }
/* the way on stays at the foot of the screen while the readings are checked */
.spread--review .review__actions {
  position: sticky; bottom: 0; z-index: 2;
  margin-block-start: var(--cell); padding-block: var(--cell);
  background: var(--paper); border-block-start: 1px solid var(--rule);
}
.source-sheet__again { display: grid; justify-items: start; gap: var(--half); padding-block-start: var(--cell); }
.source-sheet__again .leaf__note { margin: 0; }
@media (max-width: 720px) {
  /* one line at the foot of the phone: the action, and the way back beside it */
  .spread--review .review__actions { flex-wrap: nowrap; padding-block: var(--half); }
  .spread--review .review__actions .btn--primary { flex: 1 1 auto; white-space: normal; }
}

/* ---------- Graphs: drawn on the page's own squares ---------- */
/* No frame and no ground of their own: the axes sit on the page's grid lines, one unit is a
   whole number of squares, the function is drawn in ink and everything else in pencil. */
.graph { margin-block: var(--cell); }
.graph__title { font-size: 0.875rem; line-height: calc(var(--cell) * 1.5); color: var(--text-2); margin-block-end: var(--half); }
.graph__plot { width: 100%; }
.graph__svg { display: block; max-width: 100%; height: auto; color: var(--text); overflow: visible; }
.graph__axes line { stroke: currentColor; stroke-width: 1.5; }
.graph__ticks line { stroke: var(--text-2); stroke-width: 1; }
.graph__svg text { direction: ltr; unicode-bidi: isolate; font-variant-numeric: tabular-nums; }
.graph__ticks text { fill: var(--pencil); font-family: var(--font-read); font-size: 12px; font-variant-numeric: tabular-nums; }
.graph__ticks .graph__var { fill: var(--text-2); font-style: italic; font-size: 14px; }
.graph__vline { stroke: var(--pencil); stroke-width: 1.25; stroke-dasharray: 4 4; }
.graph__curve { fill: none; stroke: var(--ink); stroke-width: 2.25; stroke-linecap: round; stroke-linejoin: round; }
.graph__curve.is-secondary { stroke: var(--text-2); stroke-width: 1.75; stroke-dasharray: 7 5; }
.graph__point { fill: var(--ink); stroke: var(--ink); stroke-width: 1.75; }
.graph__point.is-open { fill: var(--paper); }
.graph__key { list-style: none; display: flex; flex-wrap: wrap; gap: var(--half) calc(var(--cell) * 1.5); margin-block-start: var(--half); font-size: 0.875rem; line-height: calc(var(--cell) * 1.5); color: var(--text-2); }
.graph__key li { display: inline-flex; align-items: center; gap: var(--half); }
.graph__key .m { color: var(--text); }

/* Geometric figures: a ruler drawing in ink; construction lines dashed, as a student draws them */
.geo__seg { stroke: var(--ink); stroke-width: 2; stroke-linecap: round; }
.geo__seg.is-construction { stroke-width: 1.5; stroke-dasharray: 6 4; }
.geo__mark { fill: none; stroke: var(--ink); stroke-width: 1.5; }
.geo__arc { fill: none; stroke: var(--pencil); stroke-width: 1.25; }
.geo__dot { fill: var(--text); }
.geo__name { fill: var(--text); font-family: var(--font-print); font-style: italic; font-weight: 700; font-size: 16px; }
.geo__angle { fill: var(--text-2); font-family: var(--font-read); font-size: 12px; }

/* ---------- AI connection: setup card, status popover ---------- */

.setup { margin-block-end: calc(var(--cell) * 2); display: grid; gap: var(--half); }
.setup__form { margin-block-start: 4px; }
.setup__form .access-form__row { flex-wrap: wrap; }
.setup__form input { flex: 1 1 18ch; max-width: none; font-family: ui-monospace, Consolas, monospace; }
.setup__form input::placeholder { font-family: var(--font-read); direction: rtl; }
.setup__msg { font-size: 1rem; line-height: calc(var(--cell) * 1.5); min-height: calc(var(--cell) * 1.5); color: var(--text-2); }
.setup__msg[data-kind='error'] { color: var(--red-ink); font-weight: 600; }
.setup__msg[data-kind='ok'] { color: var(--green); font-weight: 600; }
.owner-help { font-size: 0.875rem; line-height: calc(var(--cell) * 1.5); color: var(--text-2); }
.owner-help summary { display: inline-flex; align-items: center; gap: 4px; min-height: calc(var(--cell) * 2); cursor: pointer; list-style: none; }
.owner-help summary::-webkit-details-marker { display: none; }
.owner-help summary .icon { transition: transform 200ms var(--ease); }
.owner-help[open] summary .icon { transform: rotate(180deg); }
.owner-help p, .owner-help dl { margin-block-start: 4px; font-size: 0.875rem; }
.owner-help code { background: var(--ink-wash); padding: 1px 4px; border-radius: 2px; }
.status-detail__actions { display: flex; flex-wrap: wrap; gap: var(--half); }
.status-detail p { font-size: 1rem; line-height: calc(var(--cell) * 1.5); }

/* ---------- Settings, grouped ---------- */

.setting-group { display: grid; gap: var(--cell); padding-block-start: var(--cell); border-block-start: 1px solid var(--rule); }
.setting-group__title { font-size: 0.875rem; font-weight: 700; color: var(--pencil); letter-spacing: 0.01em; }
.setting-group--more > summary { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; list-style: none; min-height: calc(var(--cell) * 2); }
.setting-group--more > summary::-webkit-details-marker { display: none; }
.setting-group--more > summary .icon { transition: transform 200ms var(--ease); }
.setting-group--more[open] > summary .icon { transform: rotate(180deg); }
.setting-group--more:not([open]) { gap: 0; }
.setting-group .model-note { margin-block-start: var(--half); }

/* ---------- What stands behind an answer ---------- */

.answer-line__foot { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 4px var(--cell); }
.answer-line__check { display: inline-flex; align-items: center; gap: 4px; font-size: 0.875rem; color: var(--text-2); }
.answer-line__check[data-status='not_verified'] { color: var(--pencil); }

/* the optional proofreading, reported apart from the solution it only polishes */
.meta__proof { display: block; margin-block-start: 4px; }
.meta__proof[data-kind='failed'] { color: var(--text-2); }
.meta__proof .icon { vertical-align: -2px; margin-inline-end: 4px; }

/* a formula still wider than its line after shrinking: say so in words, under it */
.scroll-hint { margin: 2px 0 0; font-size: 0.8125rem; line-height: calc(var(--cell) * 1.25); color: var(--pencil); text-align: end; }
@media print { .scroll-hint { display: none; } }
.answer-line .scroll-hint { flex-basis: 100%; }

/* the two services, as two radio rows in the settings */
.service-options { display: grid; gap: var(--half); }
.service-options .setting--check input { border-radius: 50%; }
.service-options .model-note { display: block; margin-block-start: 2px; }