/* Book AI: the application shell, the shared components and the working
   screens. Every value comes from tokens.css. The bookshelf and the reader
   are in book.css. */

:root {
  /* Icons used from CSS (notes, selects, acknowledgements), as masks so they take the colour of their place. */
  --mask-info: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21a9 9 0 100-18 9 9 0 000 18zM12 11v6M12 7.6h.01'/%3E%3C/svg%3E");
  --mask-alert: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4.5l8.5 15h-17zM12 10v4.5M12 17h.01'/%3E%3C/svg%3E");
  --mask-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
  --mask-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M10.8 17.1a6.3 6.3 0 100-12.6 6.3 6.3 0 000 12.6zM15.4 15.4l4.6 4.6'/%3E%3C/svg%3E");
  --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a8377' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 10l5 5 5-5'/%3E%3C/svg%3E");
}

/* ---- base ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scrollbar-gutter: stable; }
body {
  margin: 0;
  background: var(--c-canvas);
  color: var(--c-ink);
  font-family: var(--font-ui);
  font-size: var(--text-md);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: var(--w-medium); line-height: var(--lh-tight); margin: 0; letter-spacing: var(--track-tight); text-wrap: balance; }
h1 { font-size: var(--text-3xl); }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-lg); line-height: var(--lh-snug); }
p { margin: 0 0 var(--sp-3); }
a { color: var(--c-accent); text-underline-offset: 3px; text-decoration-thickness: 1px; transition: color var(--d-2); }
a:hover { color: var(--c-accent-strong); }
img { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
code { font-family: var(--font-mono); font-size: 0.86em; overflow-wrap: anywhere; }
:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }
::selection { background: var(--c-mark); color: var(--c-ink); }
[hidden] { display: none !important; }

.skip { position: absolute; inset-inline-start: 12px; top: -60px; background: var(--c-ink); color: var(--c-canvas); padding: 8px 14px; border-radius: var(--r-sm); z-index: 300; transition: top var(--d-3) var(--ease-out); }
.skip:focus { top: 12px; color: var(--c-canvas); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.spacer { flex: 1; }
.icon { width: var(--icon, 18px); height: var(--icon, 18px); flex: none; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }
.icon-play, .icon-stop { fill: currentColor; stroke-width: 1.2; }
.icon-more { stroke-width: 2.6; }

/* ---- shell ------------------------------------------------------------------- */
.app { display: grid; grid-template-columns: var(--sidebar-w) minmax(0, 1fr); min-height: 100vh; min-height: 100dvh; transition: grid-template-columns var(--d-4) var(--spring); }
.sidebar {
  position: sticky; top: 0; height: 100vh; height: 100dvh; display: flex; flex-direction: column; min-width: 0; overflow: hidden;
  background: var(--c-canvas-2); border-inline-end: 1px solid var(--c-line);
}
.brand { display: flex; flex-direction: column; gap: 6px; padding: var(--sp-5) var(--sp-5) var(--sp-3); text-decoration: none; color: inherit; flex: none; }
.brand img { height: 56px; width: auto; align-self: flex-start; }
.brand span { font-size: var(--text-2xs); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--c-ink-3); white-space: nowrap; }
.nav-scroll { flex: 1; overflow-y: auto; overflow-x: hidden; padding: var(--sp-2) var(--sp-3) var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-5); scrollbar-width: thin; }
.nav-group { display: flex; flex-direction: column; gap: 2px; }
.nav-title { font-size: var(--text-xs); font-weight: var(--w-semibold); color: var(--c-ink-3); padding: 0 var(--sp-2) var(--sp-1); white-space: nowrap; }
.nav-link {
  display: flex; align-items: center; gap: 10px; min-height: 34px; padding: 0 10px; border-radius: var(--r-sm);
  color: var(--c-ink-2); text-decoration: none; font-size: var(--text-base); white-space: nowrap;
  transition: background-color var(--d-2), color var(--d-2), transform var(--d-1);
}
.nav-link .icon { color: var(--c-ink-3); transition: color var(--d-2); }
.nav-link span { overflow: hidden; text-overflow: ellipsis; transition: opacity var(--d-3); }
.nav-link:hover { background: var(--state-hover); color: var(--c-ink); }
.nav-link:active { transform: scale(0.985); }
.nav-link[aria-current='page'] { background: color-mix(in srgb, var(--c-accent) 14%, transparent); color: var(--c-ink); font-weight: var(--w-medium); }
.nav-link[aria-current='page'] .icon { color: var(--c-accent); }
.nav-link[aria-disabled='true'] { opacity: var(--disabled); pointer-events: none; }
.nav-book {
  display: flex; align-items: center; gap: 10px; width: 100%; margin: 2px 0 6px; padding: 7px 8px; border: 0; border-radius: var(--r-md);
  background: var(--c-surface); box-shadow: var(--e-1); color: var(--c-ink); text-align: start; cursor: pointer;
  transition: box-shadow var(--d-2), transform var(--d-1);
}
.nav-book:hover { box-shadow: var(--e-2); }
.nav-book:active { transform: scale(0.985); }
.nav-book > .icon { color: var(--c-ink-3); --icon: 16px; }
.nav-book-cover { width: 30px; flex: none; }
.nav-book-cover .cover { box-shadow: 0 1px 2px color-mix(in srgb, var(--c-shadow) 30%, transparent); border-radius: 1px 3px 3px 1px; }
.nav-book-cover .cover-type > *, .nav-book-cover .cover-sheen { display: none; }
.nav-book-cover.is-none { height: 42px; display: grid; place-items: center; border-radius: var(--r-xs); background: var(--fill); color: var(--c-ink-3); }
.nav-book-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.nav-book-title { font-family: var(--font-display); font-size: var(--text-base); line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.nav-book-sub { font-size: var(--text-xs); color: var(--c-ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-book.is-empty .nav-book-title { font-family: var(--font-ui); font-size: var(--text-sm); color: var(--c-ink-2); }
.sidebar-foot { flex: none; padding: var(--sp-3) var(--sp-4) var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-3); border-top: 1px solid var(--c-line); }
.foot-row { display: flex; gap: var(--sp-2); min-width: 0; }
.foot-row > #uiLanguage { flex: 3 1 0; min-width: 0; }
.foot-row > #appearance { flex: 2 1 0; min-width: 0; }
.foot-row .seg button { min-width: 0; padding-inline: 6px; }
.sidebar-foot p { display: flex; gap: 8px; margin: 0; font-size: var(--text-xs); line-height: 1.45; color: var(--c-ink-3); }
.sidebar-foot p .icon { --icon: 14px; margin-top: 2px; }
.sidebar-foot strong { color: var(--c-ink-2); font-weight: var(--w-semibold); }

/* The sidebar reduced to its icons. */
@media (min-width: 901px) {
  :root[data-sidebar='collapsed'] .app { grid-template-columns: var(--sidebar-w-collapsed) minmax(0, 1fr); }
  :root[data-sidebar='collapsed'] .brand { align-items: center; padding-inline: 0; }
  :root[data-sidebar='collapsed'] .brand img { height: 30px; width: 44px; object-fit: cover; object-position: 50% 0; }
  :root[data-sidebar='collapsed'] .brand span,
  :root[data-sidebar='collapsed'] .nav-title,
  :root[data-sidebar='collapsed'] .nav-book-text,
  :root[data-sidebar='collapsed'] .nav-book > .icon,
  :root[data-sidebar='collapsed'] .sidebar-foot { display: none; }
  :root[data-sidebar='collapsed'] .nav-scroll { padding-inline: 14px; }
  :root[data-sidebar='collapsed'] .nav-group { padding-top: var(--sp-3); border-top: 1px solid var(--c-line); }
  :root[data-sidebar='collapsed'] .nav-group:first-child { border-top: 0; padding-top: 0; }
  :root[data-sidebar='collapsed'] .nav-link { justify-content: center; padding: 0; }
  :root[data-sidebar='collapsed'] .nav-link span { position: absolute; opacity: 0; pointer-events: none; }
  :root[data-sidebar='collapsed'] .nav-book { justify-content: center; padding: 6px; box-shadow: none; background: transparent; }
}

.main-col { min-width: 0; display: flex; flex-direction: column; }
.topbar {
  position: sticky; top: 0; z-index: var(--z-bar); display: flex; align-items: center; gap: var(--sp-3); height: var(--topbar-h);
  padding-inline: calc(var(--gutter) - 8px) var(--gutter); background: transparent; border-bottom: 1px solid transparent;
  transition: background-color var(--d-3), border-color var(--d-3);
}
body.is-scrolled .topbar { background: var(--material-bar); -webkit-backdrop-filter: var(--material-blur); backdrop-filter: var(--material-blur); border-bottom-color: var(--c-line); }
.search { position: relative; flex: 0 1 380px; min-width: 0; transition: flex-basis var(--d-4) var(--spring); }
.search:focus-within { flex-basis: 480px; }
.search::before { content: ''; position: absolute; inset-inline-start: 12px; top: 50%; width: 16px; height: 16px; margin-top: -8px; background: var(--c-ink-3); -webkit-mask: var(--mask-search) center / contain no-repeat; mask: var(--mask-search) center / contain no-repeat; pointer-events: none; }
.search input[type='search'] { width: 100%; height: 36px; min-height: 0; padding: 0 36px; border-radius: var(--r-pill); border: 0; background: var(--fill); font-size: var(--text-base); }
.search input[type='search']::placeholder { color: var(--c-ink-3); }
.search input[type='search']:focus-visible { background: var(--c-surface); }
.search-key { position: absolute; inset-inline-end: 10px; top: 50%; transform: translateY(-50%); min-width: 20px; height: 20px; display: grid; place-items: center; border-radius: var(--r-xs); background: var(--fill); color: var(--c-ink-3); font: var(--w-medium) var(--text-2xs) var(--font-ui); pointer-events: none; transition: opacity var(--d-2); }
.search:focus-within .search-key { opacity: 0; }
.badge-local { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-xs); color: var(--c-ink-3); white-space: nowrap; }
.badge-local::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--c-ok); }

main { width: 100%; padding: var(--sp-6) var(--gutter) var(--sp-10); outline: none; }
main:focus-visible { outline: none; }
.view { max-width: 1240px; margin-inline: auto; animation: view-in var(--d-4) var(--ease-out) both; }
.view.is-carried { animation: none; }
.view-narrow { max-width: 900px; }
.view-wide { max-width: 1560px; }
@keyframes view-in { from { opacity: 0; transform: translateY(8px); } }

/* The tab bar of a narrow screen. */
.tabbar { display: none; }
.scrim { position: fixed; inset: 0; z-index: calc(var(--z-drawer) - 1); background: var(--c-scrim); opacity: 1; transition: opacity var(--d-3); }
@starting-style { .scrim { opacity: 0; } }

/* ---- moving between screens ----------------------------------------------------
   One picture of the window gives way to the next. Only what travels by itself
   (a book cover, the open book) is lifted out of that picture; keeping the rest
   as a single layer is what keeps the change cheap to draw. */
::view-transition { pointer-events: none; }
::view-transition-group(*) { animation-duration: var(--d-3); animation-timing-function: var(--ease-out); }
::view-transition-old(root) { animation: vt-out var(--d-2) var(--ease-in) both; }
::view-transition-new(root) { animation: vt-in var(--d-3) var(--ease-out) both; }
:root[data-nav='open']::view-transition-old(root), :root[data-nav='close']::view-transition-old(root) { animation-duration: var(--d-3); }
:root[data-nav='open']::view-transition-new(root), :root[data-nav='close']::view-transition-new(root) { animation-duration: var(--d-4); }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; } }

/* ---- headings of a screen ---------------------------------------------------------- */
.page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--sp-4) var(--sp-6); margin-bottom: var(--sp-7); }
.page-head > :first-child { min-width: 0; flex: 1 1 420px; }
.eyebrow { font-size: var(--text-sm); font-weight: var(--w-medium); color: var(--c-accent); margin-bottom: var(--sp-1); overflow-wrap: anywhere; }
.lede { color: var(--c-ink-2); max-width: 66ch; margin: var(--sp-2) 0 0; text-wrap: pretty; }
.actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-4); margin: var(--sp-8) 0 var(--sp-4); }
.section-head h2 { font-size: var(--text-xl); }

/* ---- buttons ---------------------------------------------------------------------- */
.btn {
  --btn-bg: var(--fill); --btn-fg: var(--c-ink); --btn-tint: transparent;
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: var(--control-h); padding: 0 16px;
  border: 0; border-radius: var(--r-pill); background: linear-gradient(var(--btn-tint), var(--btn-tint)), var(--btn-bg); color: var(--btn-fg);
  font-size: var(--text-base); font-weight: var(--w-medium); line-height: 1.2; white-space: nowrap; text-decoration: none; cursor: pointer; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent;
  transition: transform var(--d-1) var(--ease-out), opacity var(--d-2), box-shadow var(--d-2);
}
.btn:hover { --btn-tint: var(--state-hover); color: var(--btn-fg); }
.btn:active { --btn-tint: var(--state-press); transform: scale(0.97); }
.btn .icon { --icon: 16px; }
.btn-primary { --btn-bg: var(--c-ink); --btn-fg: var(--c-canvas); }
.btn-primary:hover { --btn-tint: color-mix(in srgb, var(--c-canvas) 16%, transparent); }
.btn-primary:active { --btn-tint: color-mix(in srgb, var(--c-canvas) 26%, transparent); }
.btn-quiet { --btn-bg: transparent; --btn-fg: var(--c-ink-2); }
.btn-danger { --btn-fg: var(--c-bad); --btn-bg: color-mix(in srgb, var(--c-bad) 10%, transparent); }
.btn-quiet.btn-danger { --btn-bg: transparent; }
.btn-sm { min-height: var(--control-h-sm); padding: 0 12px; font-size: var(--text-sm); }
.btn-lg { min-height: 44px; padding: 0 22px; font-size: var(--text-md); }
.icon-btn { width: var(--control-h); padding: 0; flex: none; }
.icon-btn.btn-sm { width: var(--control-h-sm); }
.btn:disabled, .btn[aria-disabled='true'] { opacity: var(--disabled); cursor: default; pointer-events: none; }
/* Working: a ring turns in front of the label. */
.btn.is-busy { pointer-events: none; }
.btn.is-busy .icon { display: none; }
.btn.is-busy::before { content: ''; width: 14px; height: 14px; border-radius: 50%; border: 2px solid color-mix(in srgb, currentColor 30%, transparent); border-top-color: currentColor; animation: spin 0.8s linear infinite; flex: none; }
/* Done: for a moment the button says so. */
.btn.is-done { font-size: 0; gap: 6px; }
.btn.is-done > * { display: none; }
.btn.is-done::before { content: ''; width: 15px; height: 15px; background: currentColor; -webkit-mask: var(--mask-check) center / contain no-repeat; mask: var(--mask-check) center / contain no-repeat; animation: pop var(--d-4) var(--spring-lively) both; }
.btn.is-done::after { content: attr(data-done); font-size: var(--text-base); animation: appear var(--d-3) var(--ease-out) both; }
@keyframes pop { from { transform: scale(0.3); opacity: 0; } }
@keyframes appear { from { opacity: 0; } }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---- fields ----------------------------------------------------------------------------- */
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field > span, .label { font-size: var(--text-sm); font-weight: var(--w-medium); color: var(--c-ink-2); }
.field small, .hint { font-size: var(--text-sm); color: var(--c-ink-3); line-height: 1.45; }
.field-inline { flex-direction: row; align-items: center; gap: var(--sp-2); }
.field-inline select { width: auto; }
.field-short { flex: 0 0 104px !important; }
.field-medium { max-width: 280px; }
input[type='text'], input[type='search'], input[type='number'], select, textarea {
  width: 100%; min-height: var(--control-h); padding: 7px 12px; border-radius: var(--r-sm); border: 1px solid var(--c-line-2); background: var(--field-bg); color: var(--c-ink);
  transition: border-color var(--d-2), box-shadow var(--d-2), background-color var(--d-2);
}
input[type='text']:hover, input[type='number']:hover, select:hover, textarea:hover { border-color: color-mix(in srgb, var(--c-ink) 32%, transparent); }
input[type='text']:focus-visible, input[type='search']:focus-visible, input[type='number']:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; border-color: var(--c-accent); box-shadow: var(--focus-ring); }
input::placeholder, textarea::placeholder { color: color-mix(in srgb, var(--c-ink-3) 78%, transparent); }
select { appearance: none; -webkit-appearance: none; overflow: hidden; white-space: nowrap; min-width: 0; max-width: 100%; padding-inline-end: 34px; background-image: var(--chevron); background-repeat: no-repeat; background-size: 16px; background-position: right 10px center; cursor: pointer; text-overflow: ellipsis; }
textarea { resize: vertical; line-height: 1.55; field-sizing: content; min-height: calc(var(--control-h) + 1.55em); max-height: 70vh; }
input:disabled, select:disabled, textarea:disabled { opacity: 0.6; cursor: default; }
input[type='checkbox'], input[type='radio'] { width: 18px; height: 18px; margin: 0; accent-color: var(--c-accent); flex: none; cursor: pointer; }
input[type='range'] { accent-color: var(--c-accent); cursor: pointer; }
.row { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: flex-end; }
.row > .field { flex: 1 1 180px; }
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--sp-4); }
.form-stack { display: flex; flex-direction: column; gap: var(--sp-4); }
.check { display: inline-flex; align-items: center; gap: 9px; font-size: var(--text-base); cursor: pointer; min-height: 28px; }
.check-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: var(--sp-1) var(--sp-4); }
.field-error { color: var(--c-bad); font-size: var(--text-sm); }

/* One of several: the pressed choice sits on a thumb that slides to it. */
.seg { position: relative; display: inline-flex; flex-wrap: wrap; padding: 3px; border-radius: var(--r-pill); background: var(--fill); isolation: isolate; }
.seg button { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; min-height: calc(var(--control-h) - 6px); padding: 0 14px; border: 0; border-radius: var(--r-pill); background: transparent; color: var(--c-ink-2); font-size: var(--text-sm); font-weight: var(--w-medium); cursor: pointer; transition: color var(--d-2); -webkit-tap-highlight-color: transparent; }
.seg button:hover { color: var(--c-ink); }
.seg button[aria-pressed='true'] { color: var(--c-ink); background: var(--c-raised); box-shadow: var(--e-1); }
.seg.has-thumb button[aria-pressed='true'] { background: transparent; box-shadow: none; }
.seg-thumb { position: absolute; top: 0; left: 0; width: var(--w, 0); height: var(--h, 0); transform: translate(var(--x, 0), var(--y, 0)); border-radius: var(--r-pill); background: var(--c-raised); box-shadow: var(--e-1); opacity: 0; pointer-events: none; }
.seg.has-thumb .seg-thumb { opacity: 1; }
.seg.is-live .seg-thumb { transition: transform var(--d-4) var(--spring), width var(--d-3) var(--ease-out); }
.seg-icons button { padding: 0 10px; flex: 1; }
.seg-icons, .seg-fill { display: flex; }
.seg-fill button { flex: 1; }

/* ---- surfaces ------------------------------------------------------------------------------ */
.card { --field-bg: var(--c-surface-2); background: var(--c-surface); border-radius: var(--r-lg); padding: var(--sp-6); box-shadow: var(--e-1); }
.card-flat { --field-bg: var(--c-surface); background: var(--c-surface-2); box-shadow: none; border-radius: var(--r-md); padding: var(--sp-4) var(--sp-5); }
.card-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.card-head h2 { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--text-xl); }
.card-head h2 .icon { --icon: 20px; color: var(--c-accent); }
.card h2 { font-size: var(--text-xl); }
.stack > * + * { margin-top: var(--sp-5); }
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-6); align-items: start; }
.split-wide { grid-template-columns: minmax(280px, 340px) minmax(0, 1fr); }
/* What is inside a surface keeps one rhythm. */
:where(.card, .dialog-body, .q, .key, .doc-section, .disclosure, .item, .sheet, .studio, .draft-tools, .suggestions) > * + * { margin-top: var(--flow, var(--sp-4)); }
:where(.card, .dialog-body, .q, .key, .doc-section, .disclosure, .item, .studio, .draft-tools, .suggestions) > p { margin-bottom: 0; }
:where(.card, .dialog-body, .q, .key, .doc-section, .disclosure, .item, .studio, .draft-tools, .suggestions) > * + .hint { margin-top: var(--sp-2); }
.view > * + * { margin-top: var(--sp-5); }
.toolbar-end { display: inline-flex; align-items: center; gap: 0; }

.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); padding: var(--sp-2) var(--sp-3); background: var(--c-surface); border-radius: var(--r-lg); box-shadow: var(--e-1); }
.toolbar select { width: auto; max-width: 100%; }
.pager { display: inline-flex; align-items: center; gap: var(--sp-1); }
.pager select { width: auto; min-width: 148px; }
.pager-label { font-size: var(--text-sm); color: var(--c-ink-2); padding-inline: var(--sp-2); font-variant-numeric: tabular-nums; white-space: nowrap; }

.chip { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 9px; border-radius: var(--r-pill); background: var(--fill); color: var(--c-ink-2); font-size: var(--text-xs); font-weight: var(--w-medium); white-space: nowrap; }
.chip::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: 0.75; }
.chip-ok { background: var(--c-ok-wash); color: var(--c-ok); }
.chip-warn { background: var(--c-warn-wash); color: var(--c-warn); }
.chip-bad { background: var(--c-bad-wash); color: var(--c-bad); }
.chip-info { background: var(--c-info-wash); color: var(--c-info); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }

.note { --note-c: var(--c-accent); position: relative; padding: 12px var(--sp-4); padding-inline-start: 44px; border-radius: var(--r-md); background: var(--c-accent-wash); color: var(--c-ink); font-size: var(--text-base); line-height: 1.5; }
.note::before { content: ''; position: absolute; inset-inline-start: 15px; top: 13px; width: 18px; height: 18px; background: var(--note-c); -webkit-mask: var(--mask-info) center / contain no-repeat; mask: var(--mask-info) center / contain no-repeat; }
.note-warn { --note-c: var(--c-warn); background: var(--c-warn-wash); }
.note-bad { --note-c: var(--c-bad); background: var(--c-bad-wash); }
.note-info { --note-c: var(--c-info); background: var(--c-info-wash); }
.note-ok { --note-c: var(--c-ok); background: var(--c-ok-wash); }
.note-warn::before, .note-bad::before { -webkit-mask-image: var(--mask-alert); mask-image: var(--mask-alert); }
.note-ok::before { -webkit-mask-image: var(--mask-check); mask-image: var(--mask-check); }
.note p { margin: 0; }
.note > * + * { margin-top: var(--sp-3); }
.note + .note { margin-top: var(--sp-3); }

.empty { display: flex; flex-direction: column; align-items: center; text-align: center; padding: var(--sp-9) var(--sp-6); border-radius: var(--r-xl); background: color-mix(in srgb, var(--c-surface) 60%, transparent); color: var(--c-ink-2); }
.empty-icon { width: 64px; height: 64px; display: grid; place-items: center; border-radius: 50%; background: var(--c-accent-wash); color: var(--c-accent); margin-bottom: var(--sp-5); }
.empty-icon .icon { --icon: 28px; stroke-width: 1.4; }
.empty h2 { color: var(--c-ink); }
.empty p { max-width: 54ch; margin: var(--sp-3) 0 0; text-wrap: pretty; }
.empty .actions { justify-content: center; margin-top: var(--sp-6); }
.error-state { max-width: 640px; margin: var(--sp-8) auto 0; padding-block: var(--sp-4); }
.error-back { text-align: center; margin-top: var(--sp-4); }

/* Waiting: shown only when the wait is long enough to be noticed. */
.loading { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-3); min-height: 46vh; color: var(--c-ink-3); font-size: var(--text-sm); animation: appear var(--d-4) var(--ease-out) 240ms both; }
.spinner { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--c-line-2); border-top-color: var(--c-accent); animation: spin 0.8s linear infinite; flex: none; }
.btn .spinner, .chip .spinner, .hint .spinner { width: 14px; height: 14px; }

.progress { height: 6px; border-radius: var(--r-pill); background: color-mix(in srgb, var(--c-ink) 9%, transparent); overflow: hidden; }
.progress > i { display: block; width: 100%; height: 100%; border-radius: inherit; background: var(--c-accent); transform: scaleX(var(--p, 0)); transform-origin: 0 50%; transition: transform var(--d-4) var(--ease-out); }
.progress-lg { height: 8px; }
.meter-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: var(--sp-4) 0; padding-top: var(--sp-5); border-top: 1px solid var(--c-line); }
.meter { padding-inline: var(--sp-4); border-inline-start: 1px solid var(--c-line); }
.meter:first-child { border-inline-start: 0; padding-inline-start: 0; }
.meter b { display: block; font-family: var(--font-display); font-size: var(--text-2xl); font-weight: var(--w-medium); letter-spacing: var(--track-tight); font-variant-numeric: tabular-nums; line-height: 1.2; }
.meter span { font-size: var(--text-sm); color: var(--c-ink-3); }

table { width: 100%; border-collapse: collapse; font-size: var(--text-base); }
th, td { text-align: start; padding: 11px 12px; border-bottom: 1px solid var(--c-line); vertical-align: top; }
th { font-size: var(--text-xs); font-weight: var(--w-medium); color: var(--c-ink-3); border-bottom-color: var(--c-line-2); white-space: nowrap; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr { transition: background-color var(--d-2); }
tbody tr:hover { background: color-mix(in srgb, var(--c-ink) 3%, transparent); }
.table-wrap { overflow-x: auto; margin-inline: -12px; }
.table-list td:first-child a { font-family: var(--font-display); font-size: var(--text-lg); text-decoration: none; color: var(--c-ink); }
.table-list td:first-child a:hover { color: var(--c-accent); }

details > summary { cursor: pointer; font-weight: var(--w-medium); list-style: none; display: flex; align-items: center; gap: var(--sp-2); min-height: 32px; }
details > summary::-webkit-details-marker { display: none; }
details > summary::after { content: ''; width: 16px; height: 16px; margin-inline-start: auto; background: var(--chevron) center / contain no-repeat; transition: transform var(--d-3) var(--spring); }
details[open] > summary::after { transform: rotate(180deg); }
details::details-content { opacity: 0; transition: opacity var(--d-3) var(--ease-out), content-visibility var(--d-3) allow-discrete; }
details[open]::details-content { opacity: 1; }
blockquote { margin: 0; padding-inline-start: var(--sp-4); border-inline-start: 2px solid var(--c-accent); font-family: var(--font-read); font-style: italic; }
mark { background: var(--c-mark); color: inherit; border-radius: 3px; padding: 0 1px; }

/* ---- messages, dialogs, menus ------------------------------------------------------------------ */
#toasts { position: fixed; top: 10px; left: 50%; transform: translateX(-50%); z-index: var(--z-toast); display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); width: max-content; max-width: min(520px, calc(100vw - 28px)); pointer-events: none; }
.toast { pointer-events: auto; display: flex; align-items: center; gap: 10px; padding: 9px 10px; padding-inline-end: 16px; border-radius: var(--r-lg); background: color-mix(in srgb, var(--c-ink) 92%, transparent); color: var(--c-canvas); -webkit-backdrop-filter: var(--material-blur); backdrop-filter: var(--material-blur); box-shadow: var(--e-3); font-size: var(--text-base); line-height: 1.35; cursor: default; animation: toast-in var(--d-4) var(--spring) both; }
.toast > span { padding-inline-start: 6px; }
.toast .icon { --icon: 22px; padding: 4px; border-radius: 50%; stroke-width: 2.4; }
.toast .icon + span { padding-inline-start: 0; }
.toast-ok .icon { background: var(--c-ok); color: var(--c-ok-wash); }
.toast-bad .icon { background: var(--c-bad); color: var(--c-bad-wash); }
.toast.is-leaving { animation: toast-out var(--d-3) var(--ease-in) both; }
@keyframes toast-in { from { opacity: 0; transform: translateY(-14px) scale(0.94); } }
@keyframes toast-out { to { opacity: 0; transform: translateY(-8px) scale(0.97); } }

dialog.dialog {
  border: 0; padding: 0; margin: auto; background: transparent; color: var(--c-ink); max-width: none; max-height: none; overflow: visible;
  opacity: 0; transform: scale(0.96) translateY(8px);
  transition: opacity var(--d-2) var(--ease-in), transform var(--d-2) var(--ease-in), overlay var(--d-2) allow-discrete, display var(--d-2) allow-discrete;
}
dialog.dialog[open] { opacity: 1; transform: none; transition: opacity var(--d-3) var(--ease-out), transform var(--d-4) var(--spring), overlay var(--d-3) allow-discrete, display var(--d-3) allow-discrete; }
@starting-style { dialog.dialog[open] { opacity: 0; transform: scale(0.93) translateY(14px); } }
dialog.dialog::backdrop { background: var(--c-scrim); opacity: 0; transition: opacity var(--d-3), overlay var(--d-3) allow-discrete, display var(--d-3) allow-discrete; }
dialog.dialog[open]::backdrop { opacity: 1; }
@starting-style { dialog.dialog[open]::backdrop { opacity: 0; } }
.dialog-body { --field-bg: var(--c-surface-2); width: min(440px, calc(100vw - 32px)); max-height: calc(100dvh - 48px); overflow: auto; padding: var(--sp-6); border-radius: var(--r-xl); background: var(--c-surface); box-shadow: var(--e-4); }
.dialog-wide .dialog-body { width: min(620px, calc(100vw - 32px)); }
.dialog-body h2 { font-size: var(--text-xl); }
.dialog-body p { color: var(--c-ink-2); }
.dialog-body > .actions { justify-content: flex-end; margin-top: var(--sp-6); }

.menu { position: fixed; z-index: var(--z-popover); min-width: 200px; max-width: min(340px, calc(100vw - 16px)); max-height: min(62vh, 460px); overflow: auto; padding: 6px; border-radius: var(--r-md); background: var(--material-panel); -webkit-backdrop-filter: var(--material-blur); backdrop-filter: var(--material-blur); box-shadow: var(--e-3); opacity: 0; transform: scale(0.9); }
.menu.is-open { opacity: 1; transform: none; transition: opacity var(--d-2) var(--ease-out), transform var(--d-3) var(--spring); }
.menu.is-leaving { opacity: 0; transform: scale(0.96); transition: opacity var(--d-2) var(--ease-in), transform var(--d-2) var(--ease-in); pointer-events: none; }
.menu-item { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 36px; padding: 6px 10px; border: 0; border-radius: calc(var(--r-md) - 6px); background: transparent; color: var(--c-ink); font-size: var(--text-base); text-align: start; cursor: pointer; }
.menu-item .icon { --icon: 16px; color: var(--c-ink-3); }
.menu-label { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.menu-label small { font-size: var(--text-xs); color: var(--c-ink-3); }
.menu-item:hover, .menu-item:focus-visible { background: var(--c-accent); color: var(--c-on-accent); outline: none; }
.menu-item:hover :is(.icon, small), .menu-item:focus-visible :is(.icon, small) { color: inherit; }
.menu-item.is-danger { color: var(--c-bad); }
.menu-item:disabled { opacity: var(--disabled); pointer-events: none; }
.menu-sep { height: 1px; margin: 6px 8px; background: var(--c-line); }

/* ---- import ------------------------------------------------------------------------------------ */
.steps { list-style: none; display: flex; align-items: center; gap: var(--sp-3); margin: 0 0 var(--sp-6); padding: 0; }
.steps li { display: flex; align-items: center; gap: var(--sp-2); color: var(--c-ink-3); font-size: var(--text-base); white-space: nowrap; min-width: 0; }
.steps li + li::before { content: ''; width: clamp(16px, 5vw, 56px); height: 1px; background: var(--c-line-2); margin-inline-end: var(--sp-1); }
.step-dot { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: var(--fill); font-size: var(--text-sm); font-weight: var(--w-semibold); font-variant-numeric: tabular-nums; flex: none; transition: background-color var(--d-3), color var(--d-3); }
.step-dot .icon { --icon: 14px; stroke-width: 2.4; }
.steps .is-current { color: var(--c-ink); font-weight: var(--w-medium); }
.steps .is-current .step-dot { background: var(--c-ink); color: var(--c-canvas); }
.steps .is-done .step-dot { background: var(--c-ok-wash); color: var(--c-ok); }
.step-label { overflow: hidden; text-overflow: ellipsis; }
.drop { display: flex; flex-direction: column; align-items: center; text-align: center; padding: var(--sp-8) var(--sp-5); border-radius: var(--r-lg); border: 1.5px dashed var(--c-line-2); background: var(--c-surface-2); transition: background-color var(--d-3), border-color var(--d-3), transform var(--d-3) var(--spring); }
.drop.is-over { border-color: var(--c-accent); background: var(--c-accent-wash); transform: scale(1.01); }
.drop-icon { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 50%; background: var(--c-surface); box-shadow: var(--e-1); color: var(--c-accent); margin-bottom: var(--sp-4); transition: transform var(--d-4) var(--spring-lively); }
.drop-icon .icon { --icon: 24px; }
.drop.is-over .drop-icon { transform: translateY(-4px) scale(1.06); }
.drop p { color: var(--c-ink-2); max-width: 52ch; margin: var(--sp-2) 0 var(--sp-4); }
.drop .hint { margin: var(--sp-4) 0 0; }
.file-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.file-list:empty { display: none; }
.file-item { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: var(--sp-3); align-items: center; padding: var(--sp-2); padding-inline-end: var(--sp-3); border-radius: var(--r-md); background: var(--c-surface-2); animation: view-in var(--d-3) var(--ease-out) both; }
.file-item.is-bad { background: var(--c-bad-wash); }
.file-thumb { width: 48px; height: 48px; border-radius: var(--r-xs); background: var(--c-surface-3); object-fit: cover; display: grid; place-items: center; font-size: var(--text-2xs); font-weight: var(--w-semibold); color: var(--c-ink-3); letter-spacing: 0.04em; }
.file-main { min-width: 0; }
.file-main .progress { margin: 6px 0 2px; }
.file-name { font-weight: var(--w-medium); overflow-wrap: anywhere; }
.file-sub { font-size: var(--text-sm); color: var(--c-ink-3); }
.file-actions { gap: 0; flex-wrap: nowrap; }
.file-state { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-sm); color: var(--c-ink-3); white-space: nowrap; }
.file-state.is-done { color: var(--c-ok); }
.file-state.is-failed { color: var(--c-bad); }
.card-actions { margin-top: var(--sp-5); }

/* ---- processing ------------------------------------------------------------------------------- */
.run-head { display: flex; align-items: center; gap: var(--sp-4); }
.run-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--sp-3); }
.run-status { margin: 0; font-family: var(--font-display); font-size: var(--text-lg); color: var(--c-ink); }
.run-badge { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: var(--fill); color: var(--c-ink-3); flex: none; transition: background-color var(--d-3), color var(--d-3); }
.run-badge .icon { --icon: 22px; stroke-width: 2; }
.run-badge.is-done { background: var(--c-ok-wash); color: var(--c-ok); }
.run-badge.is-warn { background: var(--c-warn-wash); color: var(--c-warn); }
.run-badge.is-working { background: var(--c-accent-wash); }
.disclosure > summary { color: var(--c-ink-2); }
.page-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); gap: var(--sp-4); }
.page-card { --flow: var(--sp-2); display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-2); border-radius: var(--r-md); background: var(--c-surface); box-shadow: var(--e-1); transition: box-shadow var(--d-3), transform var(--d-3) var(--spring), opacity var(--d-2); }
.page-card:hover { box-shadow: var(--e-2); }
.page-card.is-dragging { opacity: 0.4; transform: scale(0.97); }
.page-card.is-target { outline: 2px solid var(--c-accent); outline-offset: 3px; }
.page-thumb { position: relative; aspect-ratio: 3 / 4; display: grid; place-items: center; border-radius: var(--r-sm); background: var(--c-surface-3); overflow: hidden; cursor: grab; }
.page-thumb:active { cursor: grabbing; }
.page-thumb img { width: 100%; height: 100%; object-fit: contain; }
.page-thumb .hint { display: inline-flex; align-items: center; gap: 6px; }
.page-pos { position: absolute; inset-block-start: 6px; inset-inline-start: 6px; min-width: 22px; height: 22px; display: grid; place-items: center; padding: 0 6px; border-radius: var(--r-pill); background: color-mix(in srgb, var(--c-ink) 82%, transparent); color: var(--c-canvas); font-size: var(--text-xs); font-weight: var(--w-semibold); font-variant-numeric: tabular-nums; }
.page-card > .chips, .page-card > .hint, .page-card > .page-err, .page-label { padding-inline: var(--sp-1); }
.page-label { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); font-size: var(--text-xs); color: var(--c-ink-3); }
.page-label input[type='text'] { width: 76px; min-height: 28px; padding: 2px 8px; font-size: var(--text-sm); text-align: center; background: var(--c-surface-2); }
.page-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 0; margin-top: auto; padding-top: var(--sp-1); border-top: 1px solid var(--c-line); }
.page-tools .icon-btn { width: 30px; min-height: 30px; }
.page-tools .page-open { margin-inline-start: auto; }
.page-err { font-size: var(--text-xs); color: var(--c-bad); overflow-wrap: anywhere; }

/* ---- reading surfaces outside the reader ------------------------------------------------------ */
.reading { background: var(--c-surface); border-radius: var(--r-lg); padding: clamp(20px, 4vw, 56px); box-shadow: var(--e-1); }
.prose { font-family: var(--font-read); font-size: var(--text-prose); line-height: var(--lh-read); max-width: var(--measure); margin-inline: auto; color: var(--c-ink); }
.prose p { margin: 0 0 1em; text-wrap: pretty; white-space: pre-line; }
.prose p:last-child { margin-bottom: 0; }
.prose:lang(he), .prose [lang='he'], [lang='he'] .prose { font-family: var(--font-read-he); font-size: var(--text-read-he); line-height: 1.9; }
.prose .speaking { background: var(--c-accent-wash); box-shadow: 0 0 0 3px var(--c-accent-wash); border-radius: 3px; }
.missing { color: var(--c-ink-3); font-style: italic; font-family: var(--font-ui); font-size: var(--text-base); }
.sentence { border-radius: 3px; transition: background-color var(--d-2); cursor: pointer; }
.sentence:hover { background: var(--state-hover); }

/* ---- OCR editor: the scan and the text, side by side ------------------------------------------ */
.workspace { display: grid; grid-template-columns: minmax(0, 0.84fr) minmax(0, 1.16fr); gap: var(--sp-4); align-items: start; }
.workspace-pane { min-width: 0; }
.scan { position: sticky; top: calc(var(--topbar-h) + 8px); display: flex; flex-direction: column; height: calc(100vh - var(--topbar-h) - 28px); height: calc(100dvh - var(--topbar-h) - 28px); min-height: 380px; border-radius: var(--r-lg); background: var(--c-surface-3); box-shadow: inset 0 0 0 1px var(--c-line); overflow: hidden; }
.scan-view { flex: 1; min-height: 0; overflow: auto; padding: var(--sp-4) var(--sp-4) 72px; outline-offset: -3px; }
.scan-view img { max-width: none; background: #fff; border-radius: 2px; box-shadow: var(--e-2); margin-inline: auto; }
.scan-tools { position: absolute; inset-block-end: 14px; left: 50%; transform: translateX(-50%); z-index: 2; display: flex; align-items: center; gap: 0; max-width: calc(100% - 24px); padding: 4px 6px; border-radius: var(--r-pill); background: var(--material-panel); -webkit-backdrop-filter: var(--material-blur); backdrop-filter: var(--material-blur); box-shadow: var(--e-2); white-space: nowrap; overflow-x: auto; scrollbar-width: none; }
.scan-tools output { min-width: 5ch; text-align: center; font-size: var(--text-sm); color: var(--c-ink-2); font-variant-numeric: tabular-nums; }
.scan-tools .btn[aria-pressed='true'] { --btn-fg: var(--c-accent); }
.editor-pane { display: flex; flex-direction: column; gap: var(--sp-4); }
.sheet { --flow: 0; display: flex; flex-direction: column; border-radius: var(--r-lg); background: var(--c-surface); box-shadow: var(--e-1); overflow: hidden; }
.sheet-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-3) var(--sp-5); border-bottom: 1px solid var(--c-line); }
.sheet-foot { padding: var(--sp-3) var(--sp-4); border-top: 1px solid var(--c-line); background: var(--c-surface-2); }
.editor-text { field-sizing: fixed; display: block; min-height: 52vh; max-height: none; padding: var(--sp-5) clamp(16px, 2vw, 28px); border: 0 !important; border-radius: 0; background: transparent; box-shadow: none !important; font-family: var(--font-read); font-size: var(--text-read); line-height: 1.75; resize: vertical; }
.editor-text:lang(he) { font-family: var(--font-read-he); font-size: var(--text-read-he); line-height: 1.9; }
.save-state { display: inline-flex; align-items: center; gap: 7px; font-size: var(--text-sm); color: var(--c-ink-3); transition: color var(--d-2); }
.save-state.is-dirty { color: var(--c-warn); }
.dirty-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; animation: pop var(--d-3) var(--spring-lively) both; }
.editor-info { margin: 0; padding-inline: var(--sp-2); }
.rev-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-2); max-height: 340px; overflow: auto; }
.rev-list li { padding: var(--sp-3); border-radius: var(--r-sm); background: var(--c-surface); font-size: var(--text-sm); }
.rev-list li > * + * { margin-top: var(--sp-2); }
.rev-list pre { margin: 0; white-space: pre-wrap; font-family: var(--font-read); font-size: var(--text-sm); max-height: 84px; overflow: auto; color: var(--c-ink-2); }

/* ---- translations --------------------------------------------------------------------------------- */
.lang-pair { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border-radius: var(--r-pill); background: var(--fill); }
.lang-pair select { min-height: calc(var(--control-h) - 6px); padding-block: 0; border: 0; border-radius: var(--r-pill); background-color: var(--c-raised); box-shadow: var(--e-1); font-weight: var(--w-medium); font-size: var(--text-sm); }
.lang-arrow { display: grid; place-items: center; width: 26px; color: var(--c-ink-3); }
.lang-arrow .icon { --icon: 15px; }
.studio-head, .studio-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.studio-foot { padding-top: var(--sp-4); border-top: 1px solid var(--c-line); }
.tr-head { display: grid; grid-template-columns: 28px minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-4); padding: 0 0 var(--sp-2); border-bottom: 1px solid var(--c-line-2); font-size: var(--text-xs); font-weight: var(--w-medium); color: var(--c-ink-3); }
.tr-head span:first-child { grid-column: 2; }
.tr-row { display: grid; grid-template-columns: 28px minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-4); align-items: start; padding: var(--sp-3) 0; border-bottom: 1px solid var(--c-line); }
.tr-row:last-of-type { border-bottom: 0; }
.tr-num { padding-top: 9px; font-size: var(--text-xs); color: var(--c-ink-3); font-variant-numeric: tabular-nums; text-align: end; }
.tr-row .src { padding: 8px 0; font-family: var(--font-read); font-size: var(--text-read); line-height: 1.65; color: var(--c-ink-2); white-space: pre-line; }
.tr-row textarea { min-height: 0; padding: 8px 12px; border-color: transparent; background: var(--c-surface-2); font-family: var(--font-read); font-size: var(--text-read); line-height: 1.65; color: var(--c-ink); resize: none; }
.tr-row textarea:hover { border-color: var(--c-line-2); }
.tr-row [lang='he'] { font-family: var(--font-read-he); font-size: var(--text-read-he); }
.only-source .tr-row, .only-source .tr-head, .only-target .tr-row, .only-target .tr-head { grid-template-columns: 28px minmax(0, 1fr); }
.only-source .tgt, .only-target .src, .only-source .tr-head span:nth-child(2), .only-target .tr-head span:first-child { display: none; }
.only-target .tr-head span:nth-child(2) { grid-column: 2; }
.matrix td, .matrix th { text-align: center; padding: 8px; }
.matrix td:first-child, .matrix th:first-child { text-align: start; }
.matrix a { display: inline-grid; place-items: center; min-width: 28px; min-height: 28px; border-radius: 50%; text-decoration: none; transition: background-color var(--d-2); }
.matrix td:not(:first-child) a:hover { background: var(--state-hover); }
.dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: transparent; box-shadow: inset 0 0 0 1.5px var(--c-line-2); }
.dot-draft { background: var(--c-info); box-shadow: none; opacity: 0.55; }
.dot-needs_review { background: var(--c-warn); box-shadow: none; opacity: 0.8; }
.dot-reviewed, .dot-approved { background: var(--c-ok); box-shadow: none; }
.dot-outdated { background: var(--c-bad); box-shadow: none; }
.legend { margin-top: var(--sp-3); }

/* ---- listen -------------------------------------------------------------------------------------- */
.player { display: flex; flex-wrap: wrap; gap: var(--sp-4); align-items: flex-end; }
.player .field { flex: 1 1 200px; }
.player input[type='range'] { width: 100%; height: var(--control-h); }
.player-buttons { flex: 1 1 100%; }
.player-state { font-size: var(--text-sm); color: var(--c-ink-3); padding-inline-start: var(--sp-2); }

/* ---- chapters and summaries -------------------------------------------------------------------- */
.side-column { position: sticky; top: calc(var(--topbar-h) + 8px); max-height: calc(100dvh - var(--topbar-h) - 24px); overflow-y: auto; padding: 2px; margin: -2px; scrollbar-width: thin; }
.chapter-list { list-style: none; margin-inline: calc(var(--sp-2) * -1); margin-bottom: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.chapter-item { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 2px var(--sp-2); padding: var(--sp-2) var(--sp-2) var(--sp-1); border-radius: var(--r-md); transition: background-color var(--d-2); }
.chapter-item:hover { background: var(--state-hover); }
.chapter-item.is-active { background: color-mix(in srgb, var(--c-accent) 12%, transparent); }
.chapter-num { grid-row: span 2; width: 24px; height: 24px; display: grid; place-items: center; margin-top: 1px; border-radius: 50%; background: var(--fill); font-size: var(--text-xs); font-weight: var(--w-semibold); color: var(--c-ink-2); font-variant-numeric: tabular-nums; }
.chapter-item.is-active .chapter-num { background: var(--c-accent); color: var(--c-on-accent); }
.chapter-item a { font-family: var(--font-display); font-size: var(--text-lg); line-height: 1.3; text-decoration: none; color: var(--c-ink); }
.chapter-item .sub { font-size: var(--text-xs); color: var(--c-ink-3); line-height: 1.45; }
.chapter-actions { grid-column: 2; gap: 0; margin-inline-start: -8px; opacity: 0.55; transition: opacity var(--d-2); }
.chapter-item:hover .chapter-actions, .chapter-item:focus-within .chapter-actions, .chapter-item.is-active .chapter-actions { opacity: 1; }
#candidates:empty { display: none; }
.summary-doc { --flow: var(--sp-5); padding: clamp(20px, 3.2vw, 44px); }
.doc-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--sp-4); }
.doc-head h2 { font-size: var(--text-2xl); }
.doc-section { --flow: var(--sp-3); padding-top: var(--sp-5); border-top: 1px solid var(--c-line); }
.doc-section > h3 { font-size: var(--text-lg); }
.doc-section > h3 label { cursor: text; }
.doc-text { font-family: var(--font-read); font-size: var(--text-read); line-height: 1.7; padding: var(--sp-3) var(--sp-4); }
.draft-tools { --flow: var(--sp-3); }
.item-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.item-list:empty { display: none; }
.item { --flow: var(--sp-2); --field-bg: var(--c-surface); padding: var(--sp-3); border-radius: var(--r-md); background: var(--c-surface-2); }
.item-head { display: flex; gap: var(--sp-2); align-items: flex-start; }
.item-head > :first-child { flex: 1; min-width: 0; }
.item-fields { display: flex; flex-direction: column; gap: 6px; }
.item-quote textarea { font-family: var(--font-read); font-style: italic; font-size: var(--text-read); }
.cites { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.cites > span { font-size: var(--text-xs); color: var(--c-ink-3); margin-inline-end: var(--sp-1); }
.cite { min-height: 24px; padding: 0 9px; border: 0; border-radius: var(--r-pill); background: var(--fill); color: var(--c-ink-2); font-size: var(--text-xs); font-weight: var(--w-medium); font-variant-numeric: tabular-nums; cursor: pointer; transition: background-color var(--d-2), color var(--d-2), transform var(--d-1); }
.cite:hover { background: var(--state-press); }
.cite:active { transform: scale(0.94); }
.cite[aria-pressed='true'] { background: var(--c-accent); color: var(--c-on-accent); }
.sugg { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--sp-2) !important; }
.sugg button { padding: 4px 12px; border: 1px dashed var(--c-line-2); border-radius: var(--r-pill); background: var(--c-surface); font-size: var(--text-sm); text-align: start; cursor: pointer; transition: border-color var(--d-2), background-color var(--d-2); }
.sugg button:hover { border-style: solid; border-color: var(--c-accent); background: var(--c-accent-wash); }
.sugg.block button { display: block; width: 100%; padding: var(--sp-2) var(--sp-3); border-radius: var(--r-sm); font-family: var(--font-read); }
.savebar { position: sticky; bottom: var(--sp-4); z-index: var(--z-sticky); display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--sp-2); width: fit-content; max-width: 100%; margin-inline-start: auto; padding: 6px; border-radius: var(--r-xl); background: var(--material-panel); -webkit-backdrop-filter: var(--material-blur); backdrop-filter: var(--material-blur); box-shadow: var(--e-2); }

/* ---- teacher --------------------------------------------------------------------------------- */
.q { --flow: var(--sp-3); --field-bg: var(--c-surface); padding: var(--sp-4) var(--sp-5); border-radius: var(--r-md); background: var(--c-surface-2); }
.q + .q { margin-top: var(--sp-3); }
.q-head { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; justify-content: space-between; }
.q-head .actions { gap: 0; }
.q-num { font-family: var(--font-display); font-size: var(--text-xl); line-height: 1; min-width: 1.4em; }
.q-meta { align-items: center; }
.q-cites { flex: 1 1 300px; }
.q-prompt { font-family: var(--font-display); font-size: var(--text-lg); line-height: 1.4; color: var(--c-ink); margin: 0; }
.key { --flow: var(--sp-3); padding: var(--sp-3) var(--sp-4); border-radius: var(--r-sm); background: var(--c-info-wash); }
.key > .label { display: flex; align-items: center; gap: 6px; color: var(--c-info); text-transform: uppercase; letter-spacing: var(--track-caps); font-size: var(--text-2xs); font-weight: var(--w-semibold); }
.key > .label .icon { --icon: 13px; stroke-width: 2; }
.opt-row { display: flex; gap: var(--sp-2); align-items: center; margin-bottom: 6px; }
.opt-row input[type='text'] { flex: 1; }
.opt-num { min-width: 1.6em; color: var(--c-ink-3); font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
.pair-row { display: grid; grid-template-columns: 1fr 1.6fr auto; gap: var(--sp-2); margin-bottom: 6px; align-items: center; }
.pair-answer { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
.add-row { padding-top: var(--sp-4); border-top: 1px solid var(--c-line); }
#attempts:empty { display: none; }

/* ---- student ---------------------------------------------------------------------------------- */
body.mode-student .sidebar, body.mode-student .topbar, body.mode-student .tabbar { display: none; }
body.mode-student .app { grid-template-columns: minmax(0, 1fr); }
.student-bar { position: sticky; top: 0; z-index: var(--z-bar); display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); min-height: 60px; padding: var(--sp-2) var(--gutter); background: var(--material-bar); -webkit-backdrop-filter: var(--material-blur); backdrop-filter: var(--material-blur); border-bottom: 1px solid var(--c-line); }
.student-avatar { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; background: var(--c-info); color: var(--c-info-wash); font-family: var(--font-display); font-size: var(--text-lg); flex: none; }
.student-who { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.student-who strong { font-family: var(--font-display); font-size: var(--text-lg); font-weight: var(--w-medium); }
.student-who span { font-size: var(--text-xs); color: var(--c-ink-3); }
.student-bar select { width: auto; }
.assignment-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: var(--sp-4); }
.assignment-card { --flow: 0; display: flex; align-items: center; gap: var(--sp-4); text-decoration: none; color: inherit; transition: transform var(--d-3) var(--spring), box-shadow var(--d-3); }
.assignment-card:hover { transform: translateY(-2px); box-shadow: var(--e-2); color: inherit; }
.assignment-card:active { transform: scale(0.99); }
.assignment-card > .icon { color: var(--c-ink-3); margin: 0; }
.assignment-icon { width: 48px; height: 48px; display: grid; place-items: center; border-radius: var(--r-md); background: var(--c-info-wash); color: var(--c-info); flex: none; }
.assignment-icon .icon { --icon: 24px; }
.assignment-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; margin: 0; }
.assignment-text .chips { margin-top: 6px; }
.book-meta { font-size: var(--text-sm); color: var(--c-ink-3); }
.student-tabs { display: none; }
.student-work > section > h2 { margin-bottom: var(--sp-3); font-size: var(--text-xl); }
.student-read { position: sticky; top: 76px; }
.student-read .reading { max-height: calc(100dvh - 232px); overflow-y: auto; padding: clamp(20px, 3vw, 44px); }
.read-pane > * + * { margin-top: var(--sp-3); }
.answer-progress { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.answer-progress .progress { flex: 1; }
.student-answer > .lede { margin: 0 0 var(--sp-4); }
.student-answer .q { background: var(--c-surface); box-shadow: var(--e-1); border-radius: var(--r-lg); padding: var(--sp-5); --field-bg: var(--c-surface-2); }
.answer-opt { display: flex; gap: 10px; align-items: center; min-height: var(--hit); padding: var(--sp-2) var(--sp-3); margin-top: 6px !important; border-radius: var(--r-sm); background: var(--c-surface-2); cursor: pointer; transition: background-color var(--d-2), box-shadow var(--d-2), transform var(--d-1); }
.answer-opt:hover { background: var(--c-surface-3); }
.answer-opt:active { transform: scale(0.995); }
.answer-opt:has(input:checked) { background: var(--c-info-wash); box-shadow: inset 0 0 0 1.5px var(--c-info); }
.answer-opt:has(input:focus-visible) { outline: 2px solid var(--c-accent); outline-offset: 2px; }
.result-ok, .result-bad { display: inline-flex; align-items: center; gap: 5px; font-weight: var(--w-semibold); font-size: var(--text-sm); }
.result-ok { color: var(--c-ok); }
.result-bad { color: var(--c-bad); }
.result-ok .icon, .result-bad .icon { --icon: 15px; stroke-width: 2.4; }
.order-row { display: flex; gap: var(--sp-2); align-items: center; min-height: var(--hit); padding: 4px var(--sp-2); padding-inline-start: var(--sp-3); margin-top: 6px; border-radius: var(--r-sm); background: var(--c-surface-2); }
.order-row > span { flex: 1; }
.order-row > strong { color: var(--c-ink-3); font-variant-numeric: tabular-nums; }
.handin { margin-top: var(--sp-5); }
#studentResult .note { margin-top: var(--sp-5); }

/* ---- search ----------------------------------------------------------------------------------- */
.results { display: flex; flex-direction: column; gap: var(--sp-3); }
.result { --flow: var(--sp-2); position: relative; display: block; padding: var(--sp-4) var(--sp-5); padding-inline-end: 52px; text-decoration: none; color: inherit; transition: transform var(--d-3) var(--spring), box-shadow var(--d-3); }
.result:hover { transform: translateY(-1px); box-shadow: var(--e-2); color: inherit; }
.result-head { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: baseline; }
.result-text { max-width: none; font-size: var(--text-read); }
.result > .icon { position: absolute; inset-inline-end: var(--sp-4); top: 50%; margin-top: -9px; color: var(--c-ink-3); transition: transform var(--d-3) var(--spring); }
.result:hover > .icon { transform: translateX(3px); color: var(--c-accent); }
.data-path { overflow-wrap: anywhere; }

/* ---- choosing a cover --------------------------------------------------------------------------- */
.cover-pick { --flow: var(--sp-4); }
.cover-pick > * + * { margin-top: var(--sp-4); }
.cover-now { display: flex; gap: var(--sp-5); align-items: flex-start; }
.cover-preview { width: 112px; flex: none; container-type: inline-size; }
.cover-now-text { min-width: 0; flex: 1; }
.cover-now-text > * + * { margin-top: var(--sp-2); }
.cover-now-text p { margin-bottom: 0; }
.cover-now-text .actions { margin-top: var(--sp-3); }
.cover-pages { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: var(--sp-2); }
.cover-page { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 4px 4px; border: 0; border-radius: var(--r-sm); background: var(--c-surface-2); color: var(--c-ink-2); font-size: var(--text-xs); cursor: pointer; transition: background-color var(--d-2), box-shadow var(--d-2), transform var(--d-1); }
.cover-page img { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; object-position: top; border-radius: 2px; box-shadow: var(--e-1); }
.cover-page:hover:not(:disabled) { background: var(--c-surface-3); }
.cover-page:active:not(:disabled) { transform: scale(0.97); }
.cover-page[aria-pressed='true'] { background: var(--c-accent-wash); box-shadow: inset 0 0 0 2px var(--c-accent); color: var(--c-ink); }
.cover-page:disabled { opacity: var(--disabled); cursor: default; }

/* ---- print ------------------------------------------------------------------------------------ */
.print-sheet { background: #fff; color: #111; max-width: 800px; margin: 0 auto; padding: 48px; border-radius: 4px; box-shadow: var(--e-2); font-family: var(--font-read); font-size: 12.5pt; line-height: 1.5; }
.print-sheet h1 { font-size: 20pt; margin-bottom: 4pt; }
.print-sheet h2 { font-size: 13pt; margin: 18pt 0 6pt; }
.print-sheet .meta { font-family: var(--font-ui); font-size: 10pt; color: #444; margin-bottom: 14pt; }
.print-sheet .name-line { display: flex; gap: 24pt; font-family: var(--font-ui); font-size: 10.5pt; margin: 12pt 0 18pt; }
.print-sheet .name-line span { flex: 1; border-bottom: 1px solid #333; padding-bottom: 14pt; }
.print-sheet ol { padding-inline-start: 20pt; }
.print-sheet li { margin-bottom: 14pt; break-inside: avoid; }
.print-sheet .lines { border-bottom: 1px solid #999; height: 20pt; }
.print-sheet .answer { font-family: var(--font-ui); font-size: 10.5pt; background: #f2f2f2; border-inline-start: 3px solid #333; padding: 5pt 8pt; margin-top: 5pt; }
.print-sheet .foot { font-family: var(--font-ui); font-size: 9pt; color: #555; margin-top: 24pt; border-top: 1px solid #ccc; padding-top: 6pt; }
.print-sheet table td, .print-sheet table th { border-bottom: 1px solid #ccc; }
.print-sheet tbody tr:hover { background: none; }

@media print {
  body { background: #fff; }
  .sidebar, .topbar, .tabbar, .student-bar, .no-print, #toasts, .scrim { display: none !important; }
  .app { display: block; }
  main { padding: 0; }
  .view { max-width: none; animation: none; }
  .print-sheet { border-radius: 0; box-shadow: none; padding: 0; max-width: none; }
  @page { margin: 18mm; }
}

/* ---- narrower screens -------------------------------------------------------------------------- */
@media (max-width: 1100px) {
  .split, .workspace, .split-wide { grid-template-columns: minmax(0, 1fr); }
  .scan, .side-column, .student-read { position: static; max-height: none; }
  .scan { height: min(72vh, 640px); }
  .student-read .reading { max-height: none; }
  /* The text and the questions take turns. */
  .student-tabs { display: flex; width: 100%; max-width: 420px; margin: var(--sp-5) auto; }
  .student-tabs button { flex: 1; }
  .student-work[data-show='read'] > .student-answer, .student-work[data-show='answer'] > .student-read { display: none; }
  .student-work > section > h2 { display: none; }
  .student-work > section { animation: view-in var(--d-3) var(--ease-out) both; }
}
@media (max-width: 900px) {
  .app { grid-template-columns: minmax(0, 1fr); transition: none; }
  .sidebar { position: fixed; inset-block: 0; inset-inline-start: 0; z-index: var(--z-drawer); width: min(304px, 86vw); border-inline-end: 0; box-shadow: var(--e-4); transform: translateX(-104%); visibility: hidden; transition: transform var(--d-4) var(--spring), visibility 0s linear var(--d-4); }
  body.nav-open .sidebar { transform: none; visibility: visible; transition: transform var(--d-4) var(--spring), visibility 0s; }
  .topbar { padding-inline: var(--sp-2) var(--gutter); }
  .search, .search:focus-within { flex: 1 1 auto; }
  .search-key, .badge-local { display: none; }
  main { padding-top: var(--sp-3); padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px) + var(--sp-8)); }
  .tabbar { position: fixed; inset-inline: 0; bottom: 0; z-index: var(--z-bar); display: grid; grid-template-columns: repeat(4, 1fr); height: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px)); padding: 0 var(--sp-2) env(safe-area-inset-bottom, 0px); background: var(--material-bar); -webkit-backdrop-filter: var(--material-blur); backdrop-filter: var(--material-blur); border-top: 1px solid var(--c-line); }
  .tab-link { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: var(--c-ink-3); text-decoration: none; font-size: var(--text-2xs); font-weight: var(--w-medium); -webkit-tap-highlight-color: transparent; transition: color var(--d-2), transform var(--d-1); }
  .tab-link .icon { --icon: 23px; transition: transform var(--d-4) var(--spring-lively); }
  .tab-link:active { transform: scale(0.94); }
  .tab-link[aria-current='page'] { color: var(--c-accent); }
  .tab-link[aria-current='page'] .icon { transform: translateY(-1px) scale(1.06); }
  .tab-link[aria-disabled='true'] { opacity: var(--disabled); pointer-events: none; }
  body.is-reading .tabbar, body.mode-student .tabbar { display: none; }
  .page-head { margin-bottom: var(--sp-5); }
  .savebar { bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px) + var(--sp-2)); }
}
@media (max-width: 700px) {
  .card, .summary-doc { padding: var(--sp-4); border-radius: var(--r-lg); }
  .tr-row, .tr-head { grid-template-columns: minmax(0, 1fr); gap: var(--sp-2); }
  .tr-num, .tr-head span:nth-child(2) { display: none; }
  .tr-head span:first-child { grid-column: 1; }
  .only-source .tr-row, .only-source .tr-head, .only-target .tr-row, .only-target .tr-head { grid-template-columns: minmax(0, 1fr); }
  .tr-row .src { padding: 0; }
  .pair-row, .pair-answer { grid-template-columns: minmax(0, 1fr); }
  .file-item { grid-template-columns: 48px minmax(0, 1fr); }
  .file-item > :last-child { grid-column: 1 / -1; justify-content: flex-end; }
  .steps .step-label { display: none; }
  .steps .is-current .step-label { display: inline; }
  .steps li + li::before { width: 16px; }
  .meter-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); }
  .meter { padding: 0; border: 0; }
  .page-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--sp-3); }
  .toolbar { border-radius: var(--r-lg); }
  .lang-pair { flex: 1 1 100%; }
  .lang-pair select { flex: 1; }
  /* Lists of lessons and worksheets: each row becomes a card, with the name of each value beside it. Nothing scrolls sideways. */
  .table-wrap:has(> .table-list) { overflow: visible; margin-inline: 0; }
  .table-list, .table-list tbody, .table-list tr, .table-list td { display: block; }
  .table-list thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .table-list tr { padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md); background: var(--c-surface-2); }
  .table-list tr + tr { margin-top: var(--sp-2); }
  .table-list tbody tr:hover { background: var(--c-surface-2); }
  .table-list td { padding: 0; border: 0; }
  .table-list td + td { margin-top: var(--sp-2); }
  .table-list td[data-label] { display: grid; grid-template-columns: minmax(88px, 34%) minmax(0, 1fr); gap: var(--sp-2); align-items: start; font-size: var(--text-sm); }
  .table-list td[data-label]::before { content: attr(data-label); color: var(--c-ink-3); font-size: var(--text-xs); padding-top: 2px; }
  .table-list td:empty { display: none; }
  /* A long label wraps inside its card instead of pushing the page wider. */
  .table-list td .chips { min-width: 0; }
  .table-list td .chip { white-space: normal; height: auto; min-height: 22px; padding-block: 2px; text-align: start; }
  .table-list td code { overflow-wrap: anywhere; white-space: normal; }
  .dialog-body { padding: var(--sp-5); border-radius: var(--r-xl); }
  .print-sheet { padding: var(--sp-6) var(--sp-4); overflow-x: auto; }
  .btn:not(.icon-btn) { white-space: normal; max-width: 100%; padding-block: 6px; text-align: center; }
  .q, .student-answer .q { padding: var(--sp-4); }
  .q-head .actions { margin-inline-start: auto; }
  input[type='text'], input[type='search'], input[type='number'], select, textarea { font-size: 16px; }
  .search input { font-size: 16px; }
}

/* ---- right to left ---------------------------------------------------------------------------------
   The layout is written with logical properties, so a Hebrew interface mirrors by itself.
   What follows are the few things that have a physical direction. */
[dir='rtl'] select { background-position: left 10px center; }
[dir='rtl'] .progress > i, [dir='rtl'] .read-progress > i { transform-origin: 100% 50%; }
/* Arrows that mean "back", "forward" or "from here to there" point the other way. The reader's own arrows follow the book, not the interface. */
[dir='rtl'] :is(.icon-prev, .icon-next, .icon-left, .icon-right):not(.bk-bar *, .page-tools *) { transform: scaleX(-1); }
[dir='rtl'] .result:hover > .icon { transform: scaleX(-1) translateX(3px); }
@media (max-width: 900px) {
  [dir='rtl'] .sidebar { transform: translateX(104%); }
  [dir='rtl'] body.nav-open .sidebar { transform: none; }
}
/* A title or a name in another language keeps its own reading order but stays on the side where the interface puts titles. */
:is(h1, h2, h3, h4, .eyebrow, .book-meta, .lede, .nav-book-title, .chapter-item a, td, .result-head strong, .menu-label)[dir='auto'] { text-align: match-parent; }
/* Text that is always written left to right (a file name, a model name, a path) keeps its order inside a Hebrew sentence. */
.ltr { direction: ltr; unicode-bidi: isolate; display: inline-block; }

/* ---- less movement ------------------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
  .spinner, .btn.is-busy::before { animation: breathe 1.4s ease-in-out infinite !important; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}
@keyframes breathe { 50% { opacity: 0.35; } }

/* ---- Generated text: the unverified banner, the checks, a run in progress ---- */

.ai-banner { display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-4); border-radius: var(--r-lg); background: var(--c-warn-wash); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c-warn) 34%, transparent); }
.ai-banner p { margin: 0; }
.ai-banner-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); }
.ai-mark { display: inline-flex; align-items: center; gap: var(--sp-2); min-height: 28px; padding: 3px 12px; border-radius: var(--r-pill); background: var(--c-warn); color: var(--c-surface); font-size: var(--text-xs); font-weight: var(--w-semibold); letter-spacing: 0.06em; }
.ai-mark .icon { --icon: 14px; }
[lang='he'] .ai-mark { letter-spacing: 0; font-size: var(--text-sm); }
.ai-line { font-family: var(--font-ui); }
.ai-banner + * { margin-top: var(--sp-4); }
#lessonBanner:empty, #worksheetBanner:empty { display: none; }

.checks { border-radius: var(--r-md); background: color-mix(in srgb, var(--c-surface) 72%, transparent); }
.checks summary { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); min-height: var(--control-h); padding: 6px var(--sp-3); border-radius: var(--r-md); cursor: pointer; font-weight: var(--w-medium); list-style: none; }
.checks summary::-webkit-details-marker { display: none; }
.checks summary .icon { --icon: 16px; color: var(--c-ink-2); }
.checks summary:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.checks-count { margin-inline-start: auto; color: var(--c-ink-2); font-size: var(--text-sm); font-weight: var(--w-regular); }
.checks-body { padding: 0 var(--sp-3) var(--sp-3); }
.checks-body h4 { margin: var(--sp-3) 0 var(--sp-1); font-family: var(--font-ui); font-size: var(--text-sm); font-weight: var(--w-semibold); }
.checks-body ul { margin: 0; padding-inline-start: 1.2em; font-size: var(--text-sm); line-height: 1.5; }
.checks-body li + li { margin-top: var(--sp-1); }
.checks-body .quoted { color: var(--c-ink-2); }
.checks-body p { margin: var(--sp-2) 0 0; }

.item-check { display: flex; align-items: flex-start; gap: var(--sp-2); margin: 0; padding: 6px 10px; border-radius: var(--r-sm); background: var(--c-warn-wash); color: var(--c-ink); font-size: var(--text-sm); line-height: 1.45; }
.item-check .icon { --icon: 15px; flex: none; margin-top: 2px; color: var(--c-warn); }
.item-meta { align-items: center; }
.basis-select { width: auto; max-width: 100%; min-height: var(--control-h-sm); padding-block: 2px; font-size: var(--text-sm); }
.verified-note { width: 100%; }
.basis-chip { cursor: help; }
textarea.explain { min-height: var(--control-h); resize: vertical; }

.run-steps { display: flex; flex-direction: column; gap: var(--sp-2); margin: var(--sp-4) 0; padding: 0; list-style: none; }
.run-steps li { display: flex; align-items: center; gap: var(--sp-3); min-height: 28px; color: var(--c-ink-3); }
.run-steps li > span:nth-child(2) { flex: 1; }
.run-steps li.is-running { color: var(--c-ink); font-weight: var(--w-medium); }
.run-steps li.is-done { color: var(--c-ink-2); }
.run-steps li.is-done .icon { --icon: 16px; color: var(--c-ok); }
.run-steps li.is-failed .icon { --icon: 16px; color: var(--c-bad); }
.run-dot { width: 16px; height: 16px; display: grid; place-items: center; }
.run-dot::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--c-line-2); }

.version-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--sp-4); margin-top: var(--sp-4); }
.version-col { padding: var(--sp-4); border-radius: var(--r-md); background: var(--c-surface-2); min-width: 0; }
.version-col h3 { margin: 0 0 var(--sp-2); font-size: var(--text-lg); }
.version-col h4, .versions-body > h4 { margin: var(--sp-3) 0 var(--sp-1); font-family: var(--font-ui); font-size: var(--text-sm); font-weight: var(--w-semibold); color: var(--c-ink-2); }
.version-col p { margin: 0; line-height: 1.55; overflow-wrap: anywhere; }
.version-text { white-space: pre-wrap; }
.version-diff { margin: 0; padding-inline-start: 1.2em; font-size: var(--text-sm); }

.count-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--sp-3); margin: 0; padding: var(--sp-3) 0 0; border: 0; }
.count-grid legend { padding: 0; font-weight: var(--w-medium); font-size: var(--text-sm); }
.field-count input { max-width: 96px; }

.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: var(--sp-3) var(--sp-5); margin: var(--sp-2) 0; }
.fact { min-width: 0; }
.fact dt { color: var(--c-ink-2); font-size: var(--text-xs); }
.fact dd { margin: 2px 0 0; overflow-wrap: anywhere; }
.lede-small { margin: 0; font-size: var(--text-md); }
.engine-list { display: flex; flex-direction: column; gap: var(--sp-3); margin: 0; padding: 0; list-style: none; }
.engine { padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md); background: var(--c-surface-2); }
.engine-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.engine p { margin: var(--sp-1) 0 0; overflow-wrap: anywhere; }
.field-wide { max-width: 520px; }

/* A second-level heading set at the size of a third: the outline of the page stays in order where a card title follows the page title directly. */
.h-sub, .card .h-sub { font-size: var(--text-lg); line-height: var(--lh-snug); }
article.reading:focus-visible { outline: none; box-shadow: var(--focus-ring); }