/* وصلها 4 — reader (focus mode, design doc §5.6): compact bar, the page as a
   sheet of paper with a selectable English text layer, notes beside the page,
   a large bottom pager on phones; the supplement reader, published (CMS)
   lectures with their in-page PDF viewer; and the selection-translation popup
   created by selection-translate.js. */

/* ---------- Frame ---------- */
.reader { --sheet-width: 960px; --reader-bar: 64px; display: flex; flex-direction: column; min-height: 100dvh; }
.reader-bar {
  position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: var(--space-2);
  min-height: var(--reader-bar); padding: var(--space-2) var(--space-3); padding-top: max(var(--space-2), env(safe-area-inset-top));
  background: color-mix(in srgb, var(--bg) 90%, transparent); backdrop-filter: blur(14px); border-block-end: 1px solid var(--line);
}
.reader-back { flex: none; gap: var(--space-1); padding-inline: var(--space-2); color: var(--text-2); }
.reader-back:hover { color: var(--text); }
.reader-back-label { display: none; }
.reader-title { flex: 1; min-width: 0; display: grid; gap: var(--space-1); line-height: var(--leading-tight); }
.reader-title h1 { overflow: hidden; font-size: var(--text-md); font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.reader-title small { display: flex; gap: var(--space-2); min-width: 0; color: var(--text-3); font-size: var(--text-xs); }
.reader-context { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reader-count { flex: none; color: var(--accent); font-weight: 600; font-variant-numeric: tabular-nums; }
.reader-count::before { content: '·'; margin-inline-end: var(--space-2); color: var(--text-3); }
.reader-nav { display: none; align-items: center; gap: var(--space-1); }
.reader-select { width: auto; min-height: var(--control-sm); max-width: 280px; padding-inline: var(--space-3); text-overflow: ellipsis; }
.reader-tools { flex: none; display: flex; align-items: center; gap: var(--space-1); }
.reader-tools .btn-icon, .reader-nav .btn-icon, .reader-zoom .btn-icon { color: var(--text-2); }
.reader-tools .btn-icon:hover, .reader-nav .btn-icon:hover, .reader-zoom .btn-icon:hover { background: var(--surface-2); color: var(--text); }
.reader-tools [aria-expanded="true"] { background: var(--accent-soft); color: var(--accent); }
.reader-tool-mid, .reader-tool-wide { display: none; }
@media (min-width: 560px) { .reader-tool-mid { display: inline-flex; } }
@media (min-width: 600px) { .reader-back-label { display: inline; } .reader-bar { padding-inline: var(--space-4); } }
@media (min-width: 1024px) {
  .reader-nav { display: flex; }
  .reader-tool-wide { display: inline-flex; }
  .reader-nav + .reader-tools { padding-inline-start: var(--space-2); border-inline-start: 1px solid var(--line); }
}

/* ---------- View controls: translation, zoom (the supplement reader adds its language chips) ---------- */
.reader-modes { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); padding: var(--space-3) var(--space-4); border-block-end: 1px solid var(--line); }
.reader-lang { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.reader-modes .chip { min-height: var(--control-sm); }
.reader-modes .btn-sm, .reader-full-ar .btn-sm { min-height: var(--control-sm); }
@media (pointer: coarse) { .reader-modes .chip, .reader-modes .btn-sm, .reader-full-ar .btn-sm { min-height: var(--control-height); } }
/* «الـPDF كامل بالعربي» sits below the page: secondary, with the reason not to study from it. */
.reader-full-ar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); padding-block-start: var(--space-3); border-block-start: 1px solid var(--line); }
.reader-full-ar p { margin: 0; font-size: var(--text-sm); }
.reader-coach { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); }
.reader-coach p { flex: 1 1 16rem; margin: 0; }
.reader-zoom { display: flex; align-items: center; gap: var(--space-1); margin-inline-start: auto; }
.reader-zoom-level { min-width: 52px; color: var(--text-2); font-size: var(--text-sm); font-variant-numeric: tabular-nums; text-align: center; }
/* Narrow phones: the translate action and zoom share one row; disabled ends still show the limits. */
@media (max-width: 399px) {
  .reader-modes { gap: var(--space-2); padding-inline: var(--space-3); }
  .reader-zoom-level { display: none; }
}

/* ---------- Stage and sheet ---------- */
.reader-body { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; }
.reader-stage { min-width: 0; display: grid; justify-items: center; align-content: start; gap: var(--space-3); padding: var(--space-4) var(--space-3) var(--space-7); }
.reader-stage > * { width: min(100%, var(--sheet-width)); }
.reader-stage > :empty { display: none; }
.sheet-scroll { overflow-x: auto; overscroll-behavior-x: contain; border-radius: 6px; scroll-margin-block-start: calc(var(--reader-bar) + var(--space-3)); }
.sheet-scroll:focus-visible { outline-offset: 4px; }
.sheet {
  position: relative; width: calc(100% * var(--zoom, 1)); margin: 0 auto; overflow: hidden; container-type: inline-size;
  border: 1px solid var(--line-strong); border-radius: 6px; background: var(--paper);
  transition: width var(--fast) var(--ease-out);
}
.sheet[data-shape="portrait"] { width: calc(min(100%, 760px) * var(--zoom, 1)); }
.sheet img { display: block; width: 100%; height: auto; transition: opacity var(--fast) var(--ease-out); }
.sheet img:not([src]) { display: none; }
.sheet.is-loading { aspect-ratio: var(--ratio, 4 / 3); }
.sheet.is-loading img { opacity: .45; }
.sheet.is-loading::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--text) 6%, transparent), transparent); animation: shimmer 1.4s infinite; pointer-events: none; }
.reader-loading { display: grid; gap: var(--space-3); justify-items: center; }
.reader-loading .sheet { width: 100%; aspect-ratio: 4 / 3; }
.reader-error { width: 100%; }

/* Transparent selectable text over the page image (positions from text-layers/*.json). */
.text-layer { position: absolute; inset: 0; overflow: hidden; line-height: 1; font-size: 0; -webkit-user-select: text; user-select: text; forced-color-adjust: none; }
.text-layer span { position: absolute; white-space: pre; color: transparent; font-family: Arial, Helvetica, sans-serif; font-size: calc(var(--f) * 100cqw / var(--pw)); transform-origin: 0 0; cursor: text; }
.text-layer span::selection { background: color-mix(in srgb, var(--accent) 45%, transparent); color: transparent; }
.text-layer br::selection { background: transparent; }
/* Long press: no word selection while a finger holds the page; the sentence being translated is marked. */
.text-layer.is-pressing { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.text-layer span.is-sentence { background: color-mix(in srgb, var(--accent) 32%, transparent); border-radius: 2px; }

.reader-status:empty { display: none; }
.reader-status > p { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); }
.reader-status > p .icon { flex: none; color: var(--accent); }
.reader-stage .notice { align-items: center; font-size: var(--text-sm); line-height: var(--leading-body); }
.reader-stage .notice > .icon { flex: none; color: var(--accent); }
.reader-stage .notice > div, .reader-stage .notice > span { flex: 1 1 0; min-width: 0; }
.reader-stage .notice > div { display: grid; gap: var(--space-2); justify-items: start; }
.reader-resume, .translation-banner { flex-wrap: wrap; }
.reader-stage .reader-resume > span, .reader-stage .translation-banner > p { flex: 1 1 220px; }
.reader-scanned p, .reader-image-error p { line-height: var(--leading-body); }
.reader-image-error > .icon { color: var(--danger); }
.reader-clarify { display: grid; gap: var(--space-2); }
.reader-clarify summary { display: flex; align-items: center; gap: var(--space-2); min-height: 32px; font-size: var(--text-sm); font-weight: 600; cursor: pointer; }
.reader-clarify summary .icon { color: var(--info); }
.reader-clarify p { font-size: var(--text-sm); }
.arabic-text { display: grid; gap: var(--space-3); padding: var(--space-5); font-size: var(--text-lg); line-height: var(--leading-body); }
.arabic-text h2 { font-size: var(--text-lg); }
.arabic-text .faint { font-size: var(--text-sm); line-height: var(--leading-body); }
.reader-end { display: grid; gap: var(--space-3); padding: var(--space-5); border-color: var(--accent-line); }
.reader-end h2 { font-size: var(--text-lg); }

/* ---------- Notes beside the page ---------- */
.reader-notes { display: grid; align-content: start; gap: var(--space-4); padding: var(--space-5) var(--space-4) var(--space-7); border-block-start: 1px solid var(--line); background: var(--surface-1); }
.reader-notes-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.reader-notes-head h2 { font-size: var(--text-lg); }
.reader-notes-body { display: grid; gap: var(--space-5); }
.notes-section { display: grid; gap: var(--space-3); padding-block-start: var(--space-4); border-block-start: 1px solid var(--line); }
.notes-section:first-child { padding-block-start: 0; border-block-start: 0; }
.notes-section h3 { font-size: var(--text-md); }
.notes-section > .btn, .notes-section .btn-row { justify-self: start; }
.notes-section .faint { font-size: var(--text-sm); }
.notes-ideas, .approved-notes { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.notes-idea, .approved-note { display: grid; gap: var(--space-2); padding: var(--space-3) var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--bg); }
.notes-idea .btn { justify-self: start; }
.notes-idea summary { display: inline-flex; align-items: center; gap: var(--space-1); min-height: var(--control-sm); color: var(--accent); font-size: var(--text-sm); font-weight: 600; cursor: pointer; list-style: none; }
.notes-idea summary::-webkit-details-marker { display: none; }
.notes-idea .disclosure { transition: transform var(--fast) var(--ease-out); }
.notes-idea details[open] .disclosure { transform: scaleX(-1) rotate(90deg); }
.notes-idea-title { display: grid; }
.notes-idea .reading-copy { display: grid; gap: var(--space-2); padding-block: var(--space-1) var(--space-2); color: var(--text-2); font-size: var(--text-sm); }
.approved-note.is-here { border-color: var(--accent-line); background: var(--accent-soft); }
.approved-note p { color: var(--text-2); font-size: var(--text-sm); white-space: pre-line; }
.approved-note .btn { justify-self: start; }
.note-form { display: grid; gap: var(--space-3); }
.note-form .textarea { min-height: 112px; }
.note-status:empty { display: none; }
.note-status { color: var(--text-2); font-size: var(--text-sm); }
@media (min-width: 1024px) {
  .reader-body.has-notes { grid-template-columns: minmax(0, 1fr) 380px; }
  .reader-notes { position: sticky; top: var(--reader-bar); max-height: calc(100dvh - var(--reader-bar)); overflow-y: auto; overscroll-behavior: contain; border-block-start: 0; border-inline-start: 1px solid var(--line); padding-inline: var(--space-5); }
}

/* ---------- Bottom pager (phones and tablets) ---------- */
.reader-pager {
  position: sticky; bottom: 0; z-index: 30; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-2);
  padding: var(--space-2) var(--space-3) max(var(--space-2), env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(14px); border-block-start: 1px solid var(--line);
}
.reader-pager .btn { min-height: var(--control-height); padding-inline: var(--space-4); }
.reader-pager .reader-select { width: 100%; max-width: none; min-height: var(--control-height); }
@media (max-width: 359px) { .reader-pager .btn { padding-inline: var(--space-3); } .reader-pager .btn .icon { display: none; } }
@media (min-width: 1024px) { .reader-pager { display: none; } }

/* ---------- Reader dialogs ---------- */
.translate-pdf-dialog .translate-warning { font-size: var(--text-body); line-height: var(--leading-body); }
.translate-pdf-dialog .dialog-foot .btn { flex: 1 1 160px; }
.reader-search-dialog .search-field .input { padding-inline: calc(var(--space-3) + 1.25em + var(--space-2)); }
.reader-search-dialog .input::-webkit-search-cancel-button { display: none; }
.search-hits { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-1); max-height: 55vh; overflow: auto; }
.search-hit { display: grid; grid-template-columns: 40px minmax(0, 1fr); align-items: start; gap: var(--space-3); width: 100%; padding: var(--space-3); border: 0; border-radius: var(--radius-control); background: none; color: var(--text); text-align: start; }
.search-hit:hover { background: var(--accent-soft); }
.search-hit-page { display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--radius-control); background: var(--surface-2); color: var(--accent); font-family: var(--font-display); font-weight: 800; }
.search-hit-text { display: grid; gap: var(--space-1); }
.search-hit-text strong { font-weight: 600; }
.search-hit-text small { color: var(--text-2); line-height: var(--leading-body); }
.search-hit-text small[lang="en"] { text-align: left; }
.download-links a { min-height: 60px; }
.download-text { flex: 1; display: grid; line-height: var(--leading-ui); }
.download-links .download-mark { color: var(--text-3); }
.tools-list { gap: var(--space-2); }
.tools-list .list-row { min-height: 52px; padding-block: var(--space-3); }
.tools-list .list-row .icon { color: var(--accent); }
.offline-status:empty { display: none; }
.offline-status { color: var(--text-2); font-size: var(--text-sm); }

/* ---------- Supplement reader ---------- */
.supplement-videos { display: grid; gap: var(--space-4); }
.supplement-videos .section-head { margin: 0; }
.video-notes { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); color: var(--text-2); font-size: var(--text-sm); }
.video-notes strong { color: var(--text); font-weight: 600; }
.supplement-notice a { white-space: nowrap; }

/* ---------- Published (CMS) lecture ---------- */
.cms-page { width: 100%; max-width: 820px; margin-inline: auto; }
.cms-source { color: var(--text-2); font-size: var(--text-sm); }
.cms-explanation { display: grid; gap: var(--space-4); padding: var(--space-6) var(--space-5); }
.cms-block { line-height: var(--leading-body); }
.cms-block.is-heading { margin-block-start: var(--space-3); font-size: var(--text-lg); }
.cms-block.is-formula { padding: var(--space-3) var(--space-4); overflow-x: auto; border-radius: var(--radius-control); background: var(--surface-2); font-family: var(--font-mono); text-align: left; white-space: pre-wrap; }
.cms-block.is-note { padding: var(--space-3) var(--space-4); border-inline-start: 3px solid var(--accent); border-radius: var(--radius-control); background: var(--accent-soft); }
.cms-block ul, ul.cms-block { margin: 0; padding-inline-start: var(--space-5); }
.cms-materials { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
.cms-material { display: grid; gap: var(--space-3); min-width: 0; }
.cms-material h3 { font-size: var(--text-body); }
.cms-material audio, .cms-material video, .cms-material img { width: 100%; border-radius: var(--radius-control); }
.cms-material .video-frame .icon { width: 28px; height: 28px; }
.cms-questions { display: grid; gap: var(--space-4); }
.cms-loading { gap: var(--space-5); }
.cms-skeleton-head { height: 128px; }
.cms-skeleton-body { height: 320px; }
.cms-question { display: grid; gap: var(--space-3); padding: var(--space-5); border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--surface-1); }
.cms-question fieldset { display: grid; gap: var(--space-3); min-width: 0; margin: 0; padding: 0; border: 0; }
.cms-question-head { display: grid; gap: var(--space-2); width: 100%; margin-block-end: var(--space-3); padding: 0; }
.cms-translation summary { min-height: var(--control-sm); color: var(--accent); font-size: var(--text-sm); font-weight: 600; cursor: pointer; }
.cms-translation p { color: var(--text-2); }
.cms-question-prompt { font-size: var(--text-lg); font-weight: 500; line-height: var(--leading-body); text-align: left; }
.cms-options { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.cms-option { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--space-3); min-height: 52px; padding: var(--space-2) var(--space-4); border: 1px solid var(--line-strong); border-radius: var(--radius-card); background: var(--bg); cursor: pointer; }
.cms-option:hover { border-color: var(--control); }
.cms-option:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.cms-option:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 3px; }
.cms-option input { width: 20px; height: 20px; margin: 0; accent-color: var(--accent); }
.cms-option span { text-align: left; }
.cms-option.is-correct { border-color: var(--success); background: var(--success-soft); }
.cms-option.is-wrong { border-color: var(--danger); background: var(--danger-soft); }
.cms-feedback:empty { display: none; }
.cms-feedback { display: flex; align-items: start; gap: var(--space-2); line-height: var(--leading-body); }
.cms-feedback.is-correct { color: var(--success); }
.cms-feedback.is-wrong { color: var(--danger); }
.cms-feedback .icon { margin-top: .35em; }
.cms-feedback strong { font-weight: 600; }
.cms-why { display: block; color: var(--text-2); }
.cms-question .btn { justify-self: start; }

/* In-page PDF viewer (pdf.js canvas + its text layer). */
.cms-pdf { min-width: 0; }
.pdf-viewer { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3); min-width: 0; }
.pdf-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.pdf-toolbar [data-pdf-count] { min-width: 96px; color: var(--text-2); font-size: var(--text-sm); text-align: center; font-variant-numeric: tabular-nums; }
.pdf-toolbar .pdf-pager { display: grid; grid-template-columns: max-content minmax(0, 1fr) max-content; align-items: center; gap: var(--space-2); flex: 0 0 100%; width: 100%; min-width: 0; min-height: 44px; }
.pdf-toolbar .pdf-pager [data-pdf-count] { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pdf-toolbar .pdf-pager .btn { white-space: nowrap; }
.pdf-toolbar .pdf-translate { margin-inline-start: auto; }
.pdf-page { position: relative; max-width: 100%; margin-inline: auto; overflow: hidden; border: 1px solid var(--line-strong); border-radius: 6px; background: var(--paper); }
.pdf-page canvas { display: block; }
.pdf-viewport { max-width: 100%; overflow: auto; direction: ltr; }
.explained-reader .pdf-page { max-width: none; }
.explained-reader .pdf-toolbar label { display: flex; gap: var(--space-2); align-items: center; max-width: 100%; }
.explained-reader [data-pdf-jump] { width: 5rem; }
.explained-reader [data-pdf-chapter] { width: min(100%, 24rem); min-width: 0; }
.explained-reader .pdf-toolbar input, .explained-reader .pdf-toolbar select { min-height: 44px; }
.pdf-translation { display: grid; gap: var(--space-2); padding: var(--space-4) var(--space-5); border: 1px solid var(--accent-line); border-radius: var(--radius-card); background: var(--accent-soft); line-height: var(--leading-body); }
.pdf-translation h3 { font-size: var(--text-md); }
.pdf-translation .translate-untranslated { color: var(--text-2); font-family: Arial, Helvetica, sans-serif; text-align: left; }
.pdf-translation .btn { justify-self: start; }
.pdf-status:empty { display: none; }
.pdf-status { color: var(--text-2); font-size: var(--text-sm); }
/* pdf.js text layer (from pdfjs-dist web/pdf_viewer.css, trimmed to what the viewer uses). */
.pdf-page .textLayer { color-scheme: only light; position: absolute; inset: 0; z-index: 0; overflow: clip; opacity: 1; line-height: 1; letter-spacing: normal; word-spacing: normal; text-align: initial; -webkit-text-size-adjust: none; text-size-adjust: none; forced-color-adjust: none; transform-origin: 0 0; caret-color: CanvasText; --min-font-size: 1; --text-scale-factor: calc(var(--total-scale-factor) * var(--min-font-size)); --min-font-size-inv: calc(1 / var(--min-font-size)); }
.pdf-page .textLayer :is(span, br) { position: absolute; color: transparent; white-space: pre; cursor: text; transform-origin: 0% 0%; -webkit-user-select: text; user-select: text; }
.pdf-page .textLayer > :not(.markedContent), .pdf-page .textLayer .markedContent span:not(.markedContent) { z-index: 1; --font-height: 0; font-size: calc(var(--text-scale-factor) * var(--font-height)); --scale-x: 1; --rotate: 0deg; transform: rotate(var(--rotate)) scaleX(var(--scale-x)) scale(var(--min-font-size-inv)); }
.pdf-page .textLayer .markedContent { display: contents; }
.pdf-page .textLayer span[role="img"] { -webkit-user-select: none; user-select: none; cursor: default; }
.pdf-page .textLayer ::selection { background: color-mix(in srgb, var(--accent) 45%, transparent); color: transparent; }
.pdf-page .textLayer br::selection { background: transparent; }
.pdf-page .textLayer .endOfContent { position: absolute; inset: 100% 0 0; z-index: 0; display: block; cursor: default; -webkit-user-select: none; user-select: none; }

/* ---------- Selection translation (elements created by selection-translate.js) ---------- */
.translate-trigger { position: fixed; z-index: 60; display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--control-height); padding: 0 var(--space-4); border: 0; border-radius: var(--radius-pill); background: var(--accent); color: var(--on-accent); font-weight: 600; box-shadow: var(--shadow-pop); }
.translate-trigger[hidden] { display: none; }
.translate-trigger:disabled { max-width: min(320px, calc(100vw - 24px)); border-radius: var(--radius-card); background: var(--surface-3); color: var(--text); font-weight: 500; white-space: normal; }
.translate-popup { position: fixed; z-index: 61; display: flex; flex-direction: column; width: min(420px, calc(100vw - 24px)); max-height: min(70dvh, 560px); border: 1px solid var(--line-strong); border-radius: var(--radius-sheet); background: var(--surface-3); color: var(--text); box-shadow: var(--shadow-pop); animation: dialog-in 200ms var(--ease-out); }
.translate-popup[hidden] { display: none; }
.translate-popup.is-sheet { inset: auto 0 0 0; width: auto; max-height: 75dvh; padding-bottom: env(safe-area-inset-bottom); border-radius: var(--radius-sheet) var(--radius-sheet) 0 0; }
@media (min-width: 641px) { .translate-popup.is-sheet { inset: auto auto var(--space-5) var(--space-5); width: min(460px, calc(100vw - 48px)); border-radius: var(--radius-sheet); } }
.translate-popup-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) var(--space-3) var(--space-3) var(--space-5); border-block-end: 1px solid var(--line); }
.translate-popup-head h2 { font-size: var(--text-md); }
.translate-popup-head h2:focus-visible { outline-offset: 2px; }
.translate-close { width: 44px; height: 44px; border: 0; border-radius: var(--radius-control); background: none; color: var(--text-2); font-size: var(--text-lg); }
.translate-close:hover { background: var(--surface-2); color: var(--text); }
.translate-popup-body { overflow: auto; overscroll-behavior: contain; padding: var(--space-4) var(--space-5) var(--space-5); }
.translate-label { margin: var(--space-3) 0 var(--space-1); color: var(--text-3); font-size: var(--text-xs); }
.translate-original { margin: 0; padding: var(--space-3) var(--space-4); border-inline-start: 3px solid var(--line-strong); border-radius: var(--radius-control); background: var(--surface-1); font-family: Arial, Helvetica, sans-serif; line-height: var(--leading-ui); text-align: left; }
.translate-result p { margin: 0 0 var(--space-2); font-size: var(--text-body); line-height: var(--leading-body); }
.translate-result .translate-untranslated { color: var(--text-2); font-family: Arial, Helvetica, sans-serif; text-align: left; }
.translate-result button { min-height: var(--control-height); padding: 0 var(--space-4); border: 1px solid var(--control); border-radius: var(--radius-control); background: transparent; font-weight: 600; }
.translate-loading, .translate-muted { color: var(--text-2); }
.translate-error { color: var(--danger); }
.translate-terms { margin-top: var(--space-3); padding-top: var(--space-2); border-top: 1px solid var(--line); }
.translate-terms summary { display: flex; align-items: center; min-height: var(--control-sm); color: var(--text-2); font-size: var(--text-sm); cursor: pointer; }
.translate-terms dl { display: grid; gap: var(--space-2); margin: var(--space-2) 0 0; }
.translate-terms dl > div { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
/* «احفظ في مصطلحاتي» in the popup (built by selection-translate.js). */
.translate-save { display: inline-flex; align-items: center; min-height: var(--control-sm); margin-top: var(--space-2); padding: 0 var(--space-3);
  border: 1px solid var(--control); border-radius: var(--radius-control); background: transparent; color: var(--accent); font: inherit; font-size: var(--text-sm); font-weight: 600; cursor: pointer; }
.translate-save:hover:not(:disabled) { background: var(--accent-soft); }
.translate-save:disabled { border-color: transparent; color: var(--success); cursor: default; }
.translate-terms dd .translate-save { margin-top: var(--space-1); }
@media (pointer: coarse) { .translate-save { min-height: var(--control-height); } }
.translate-terms dt { color: var(--accent); font-family: Arial, Helvetica, sans-serif; text-align: left; }
.translate-terms dd { margin: 0; }
.translate-terms dd small { display: block; color: var(--text-3); }
.translate-note { margin-top: var(--space-3); color: var(--text-3); font-size: var(--text-xs); line-height: var(--leading-body); }
.translate-paste { display: grid; gap: var(--space-2); margin: var(--space-2) 0 var(--space-3); }
.translate-paste label { font-weight: 600; font-size: var(--text-sm); }
.translate-paste textarea { width: 100%; min-height: 88px; padding: var(--space-2) var(--space-3); border: 1px solid var(--control); border-radius: var(--radius-control); background: var(--surface-1); font-family: Arial, Helvetica, sans-serif; text-align: left; }
.translate-paste .primary { justify-self: start; min-height: var(--control-height); padding: 0 var(--space-5); border: 0; border-radius: var(--radius-control); background: var(--accent); color: var(--on-accent); font-weight: 600; }
.translate-lines { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.translate-lines button { width: 100%; min-height: var(--control-height); padding: var(--space-2) var(--space-3); border: 1px solid var(--line-strong); border-radius: var(--radius-control); background: var(--surface-1); font-family: Arial, Helvetica, sans-serif; line-height: var(--leading-ui); text-align: left; }
.translate-lines button:hover { border-color: var(--control); }