/* ============================================================
   WARRAQ design system — tokens first, then shell, then parts.
   Three type roles, no substitutions (design rationale sheet):
     chrome/metadata  = Inter        (--font-ui)
     Arabic content   = Amiri       (--font-arabic)
     scholarly display = EB Garamond (--font-display)
   Colour means confidence, nothing else: the four tier colours
   below belong to the confidence channel exclusively. Every tier
   also carries a letter and a border/hatch style so the UI reads
   in grayscale (colour-blind rule). Selection is #315DBE — the
   one selection colour app-wide, including the reading screen.
   ============================================================ */

:root {
  /* surfaces */
  --ink: #22231f;
  --muted: #6d7169;
  --paper: #f2efe7;          /* warm paper app background */
  --surface: #fdfdfb;        /* working cards */
  --line: #ddd9cc;
  --sidebar: #16211b;        /* dark green shell */
  --sidebar-ink: #cdd6cd;
  --sidebar-active: #24382c;

  /* action greens (interface, NOT confidence) */
  --green: #245b45;
  --green-deep: #194735;
  --green-soft: #e2efe8;
  --amber: #b6782a;
  --amber-soft: #f7edd7;
  --red: #9d4239;

  /* confidence tiers — this palette encodes confidence ONLY */
  --conf-high: #2f6f6a;      /* solid  · letter H */
  --conf-mid: #a06a19;       /* hatch  · letter M */
  --conf-low: #a24832;       /* dotted · letter L */
  --conf-unreadable: #2f3130;/* crosshatch · Ø    */
  --select: #315dbe;         /* selection outline, and only selection */

  /* geometry: square-leaning, restrained depth */
  --radius: 4px;
  --radius-small: 3px;
  --shadow: 0 10px 28px rgba(39, 43, 35, .07);

  /* type roles */
  --font-ui: 'Inter', ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-arabic: 'Amiri', 'Noto Naskh Arabic', 'Geeza Pro', Tahoma, serif;
  --font-display: 'EB Garamond', Georgia, serif;

  font-family: var(--font-ui);
  color: var(--ink);
  background: var(--paper);
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--paper); }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; }

/* ---- app frame: dark sidebar + scrolling paper ---- */
.app-frame { display: flex; min-height: var(--zoom-vh, 100vh); }
.sidebar {
  width: 236px; flex: 0 0 236px; background: var(--sidebar); color: var(--sidebar-ink);
  display: flex; flex-direction: column; position: sticky; top: 0;
  height: var(--zoom-vh, 100vh); overflow-y: auto; padding: 20px 14px 16px;
}
.app-main { flex: 1; min-width: 0; }

/* The global capture bar: one row above every screen's content. Sticky at
   the top rather than floating at the bottom — a floating button would sit
   over the last line of whatever is being read. */
.app-topbar { position: sticky; top: 0; z-index: 6; display: flex; align-items: center;
  gap: 10px; padding: 8px 26px; background: var(--paper); border-bottom: 1px solid var(--line); }
.app-topbar-hint { font-size: 11px; color: var(--muted); letter-spacing: .04em; }
.side-account-links { margin-left: auto; display: flex; flex-direction: column;
  align-items: flex-end; gap: 4px; }
.side-account-links a { font-size: 10px; letter-spacing: .05em;
  text-transform: uppercase; color: var(--sidebar-ink); opacity: .75;
  text-decoration: none; }
.side-account-links a:hover { opacity: 1; }
.side-account-links button { font: inherit; font-size: 10px; letter-spacing: .05em;
  text-transform: uppercase; background: none; border: 1px solid rgba(205,214,205,.28);
  color: var(--sidebar-ink); border-radius: 3px; padding: 3px 7px; cursor: pointer; }
.side-account-links button:hover { background: var(--sidebar-active); }


.brand { display: inline-flex; align-items: center; gap: 12px; padding: 2px 8px 18px; }
.brand-mark { width: 38px; height: 38px; border-radius: var(--radius); display: grid; place-items: center; background: #c6a15b; color: var(--sidebar); }
/* The mark is a place-mark, not a letter: a point located on a page. It
   carries no alphabet, which matters on an instrument whose chrome is
   English and whose material is Arabic — a Latin "L" would have picked a
   side. PROPOSAL: the researcher can veto this for a typographic mark. */
.brand strong, .brand small { display: block; }
.brand strong { letter-spacing: .14em; font-size: 13px; color: #fff; }
.brand small { color: #8fa192; font-size: 10.5px; margin-top: 3px; line-height: 1.35; }

.side-nav { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.nav-group { color: #71836f; font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; margin: 16px 8px 6px; }
.side-nav a { display: flex; align-items: center; gap: 8px; color: var(--sidebar-ink); font-size: 13px; padding: 8px 10px; border-radius: var(--radius); }
.side-nav a:hover { background: #1d2c22; color: #fff; }
.side-nav a.is-active { background: var(--sidebar-active); color: #fff; font-weight: 600; }
.side-nav a .nav-count { margin-left: auto; font-size: 11px; color: #8fa192; }
.side-nav a em { font-style: normal; font-size: 9px; letter-spacing: .08em; color: #8fa192; margin-left: auto; text-transform: uppercase; }

.side-project { display: block; border: 1px solid #24382c; border-radius: var(--radius); padding: 9px 10px; margin: 2px 0; color: var(--sidebar-ink); }
.side-project:hover { background: #1d2c22; }
.side-project.is-active { background: var(--sidebar-active); border-color: #33503f; }
.side-project strong { display: block; color: #fff; font-size: 12.5px; font-weight: 600; }
.side-project small { display: block; color: #8fa192; font-size: 10.5px; margin-top: 3px; }

.ui-scale { display: flex; align-items: center; gap: 7px; padding: 10px 8px 0;
  border-top: 1px solid #24382c; margin-top: 12px; }
.ui-scale label { color: #8fa192; font-size: 10.5px; }
.ui-scale select { background: #1d2c22; color: #cdd6cd; border: 1px solid #33503f;
  border-radius: var(--radius-small); font-size: 11px; padding: 3px 5px; }
.side-user { display: flex; align-items: center; gap: 10px; border-top: 1px solid #24382c; margin-top: 14px; padding: 12px 8px 0; }
.side-user .avatar { width: 30px; height: 30px; border: 1px solid #4a5d4e; border-radius: var(--radius-small); display: grid; place-items: center; font-size: 10px; font-weight: 700; color: #fff; }
.side-user strong { display: block; font-size: 12px; color: #fff; font-weight: 600; }
.side-user small { display: block; font-size: 10.5px; color: #8fa192; margin-top: 2px; }

.shell { max-width: 1320px; margin: 0 auto; padding: 42px 32px 70px; }
.review-shell { max-width: 1680px; }

/* ---- confidence badges: letter + pattern + colour ----
   The letter is the primary redundancy; the border/background
   pattern is the second. Never render a tier colour without them. */
.conf-badge { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-ui); font-size: 11px; font-weight: 600; }
.conf-badge .swatch { width: 15px; height: 15px; flex: 0 0 15px; display: grid; place-items: center; font-size: 9px; font-weight: 800; line-height: 1; border: 1.5px solid; border-radius: 2px; }
.conf-badge.conf-good { color: var(--conf-high); }
.conf-badge.conf-good .swatch { border-style: solid; border-color: var(--conf-high); background: var(--conf-high); color: #fff; }
.conf-badge.conf-mid { color: var(--conf-mid); }
.conf-badge.conf-mid .swatch { border-style: solid; border-color: var(--conf-mid); color: var(--conf-mid); background: repeating-linear-gradient(45deg, transparent 0 3px, rgba(160, 106, 25, .30) 3px 5px); }
.conf-badge.conf-low { color: var(--conf-low); }
.conf-badge.conf-low .swatch { border-style: dotted; border-color: var(--conf-low); color: var(--conf-low); background: transparent; }
.conf-badge.conf-unreadable { color: var(--conf-unreadable); }
.conf-badge.conf-unreadable .swatch { border-style: solid; border-color: var(--conf-unreadable); color: var(--conf-unreadable); background: repeating-linear-gradient(45deg, transparent 0 2px, rgba(47, 49, 48, .35) 2px 3px), repeating-linear-gradient(-45deg, transparent 0 2px, rgba(47, 49, 48, .35) 2px 3px); }
.conf-badge .conf-value { color: inherit; }
.conf-badge .conf-note { color: var(--muted); font-weight: 500; }

/* ---- RTL/LTR separation ----
   Arabic content lives in its own RTL block; Latin metadata sits
   OUTSIDE it (below or beside), never inside the sentence. */
.arabic-content { font-family: var(--font-arabic); direction: rtl; text-align: right; font-size: 19px; line-height: 1.9; color: var(--ink); }
.latin-meta { direction: ltr; font-family: var(--font-ui); font-size: 11.5px; color: var(--muted); }

/* ---- shared chrome ---- */
.flash { padding: 12px 16px; border-radius: var(--radius); margin-bottom: 20px; border: 1px solid; font-size: 13px; }
.flash-success { background: var(--green-soft); color: var(--green); border-color: #bed6c8; }
.flash-error { background: #fae7e4; color: var(--red); border-color: #e6bbb5; }
/* Back. It sits first in the top bar because it is the way out, and it names
   its destination — a bare arrow makes the reader guess. */
.back-link { color: var(--ink); text-decoration: none; font-size: 13px;
  padding: 5px 10px; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); white-space: nowrap; }
.back-link:hover { border-color: var(--green); color: var(--green); }

/* Where the two readers disagree. The scan strip is the widest thing in the
   card because it is what actually decides: the two readings are candidates,
   the ink is the evidence. Both readings share one type size and one weight —
   the library's is offered first because it was measured better on this
   material, not because it is louder. */
.disagreement .line-strip { display: block; width: 100%; max-height: 90px;
  object-fit: contain; object-position: right center; background: #fff;
  border: 1px solid var(--line); border-radius: 3px; padding: 4px; }
.disagreement .readings { display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
  margin-top: 10px; }
.disagreement .readings form { display: flex; flex-direction: column; gap: 6px;
  align-items: flex-start; }
.disagreement .reading-text { margin: 0; font-family: var(--font-arabic);
  font-size: 18px; line-height: 1.9; flex: 1; }
@media (max-width: 900px) { .disagreement .readings { grid-template-columns: 1fr; } }

/* The one line that replaced five pipeline chips. It appears only when the
   document is not yet readable AND there is something the researcher can do,
   so it is styled as a sentence he should read, not as a status decoration. */
.doc-state { color: var(--muted); font-size: 13px; margin: 0 0 14px; }
.doc-state a { color: var(--ink); }

.eyebrow { color: var(--muted); text-transform: uppercase; font-weight: 700; font-size: 11px; letter-spacing: .14em; margin: 0 0 8px; }
.page-heading { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 30px; }
.page-heading h1 { font-family: var(--font-display); font-size: clamp(34px, 4.4vw, 46px); font-weight: 500; margin: 0 0 8px; }
.page-heading p { color: var(--muted); margin: 0; font-size: 14px; }
.button { border: 0; border-radius: var(--radius); background: var(--green); color: white; padding: 11px 18px; font-weight: 600; font-size: 13.5px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.button:hover { background: var(--green-deep); }
.button-secondary { background: var(--surface); color: var(--green); border: 1px solid #cdd3cd; }
.button-secondary:hover { background: #f0f4f0; }
.button:disabled { background: #bec3be; cursor: not-allowed; }


.upload-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow); }
.upload-form { display: grid; grid-template-columns: 1fr 1.2fr auto; gap: 16px; align-items: end; }
label span { display: block; color: #555b54; font-size: 12px; font-weight: 600; margin-bottom: 7px; }
input[type="text"], input[type="file"] { width: 100%; border: 1px solid #d3d7d0; background: #fafbf8; border-radius: var(--radius); min-height: 44px; padding: 9px 12px; }
input[type="file"] { padding: 8px; }
.section-heading { display: flex; justify-content: space-between; align-items: baseline; margin: 38px 0 14px; }
.section-heading h2 { margin: 0; font-family: var(--font-display); font-size: 24px; font-weight: 500; }
.section-heading span { color: var(--muted); font-size: 13px; }
.document-list { display: grid; gap: 10px; }
.document-row { display: flex; gap: 8px; align-items: stretch; }
.document-row .document-item { flex: 1; }
.delete-button { border: 1px solid #e6bbb5; background: var(--surface); color: var(--red); border-radius: var(--radius); width: 40px; cursor: pointer; font-size: 14px; height: 100%; }
.delete-button:hover { background: #fae7e4; }
.delete-button-solid { background: var(--red); color: #fff; }
.delete-button-solid:hover { background: #7c2f28; }
.document-item { display: grid; grid-template-columns: auto 1fr auto auto; gap: 16px; align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 17px 19px; transition: .18s ease; }
.document-item:hover { border-color: #abb8ad; box-shadow: 0 6px 18px rgba(39,43,35,.06); }
.document-icon { width: 42px; height: 42px; display: grid; place-items: center; background: var(--paper); border-radius: var(--radius); color: var(--green); font-size: 23px; font-family: var(--font-arabic); }
.document-copy strong, .document-copy small { display: block; }
.document-copy strong { font-family: var(--font-arabic); font-size: 17px; }
.document-copy small { color: var(--muted); margin-top: 4px; font-size: 12px; }
.progress-copy { color: var(--muted); font-size: 13px; }
.empty-state { border: 1px dashed #cbd0c8; border-radius: var(--radius); text-align: center; padding: 60px 20px; color: var(--muted); }
.empty-state > span { display: inline-grid; place-items: center; background: var(--paper); width: 58px; height: 58px; border-radius: 50%; font-family: var(--font-display); font-size: 30px; color: var(--green); }
.empty-state h2 { color: var(--ink); margin-bottom: 6px; font-family: var(--font-display); font-weight: 500; }
.empty-state p { margin: 0; }

.breadcrumbs { display: flex; gap: 8px; color: var(--muted); font-size: 12px; margin-bottom: 22px; white-space: nowrap; overflow: hidden; }
.breadcrumbs a:hover { color: var(--green); }
.export-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.action-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 20px; }
.page-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 1100px) { .page-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px) { .page-grid { grid-template-columns: 1fr; } }
.page-cell { position: relative; }
.page-select { position: absolute; top: 10px; left: 10px; z-index: 2; width: 18px; height: 18px; accent-color: var(--green); }
.engine-tag { color: var(--muted); font-size: 10px; letter-spacing: .05em; }
.page-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; transition: .18s ease; }
.page-card:hover { border-color: #9dac9e; box-shadow: var(--shadow); }
.thumbnail-wrap { position: relative; height: 290px; background: #e5e2d8; padding: 18px; display: grid; place-items: center; }
.thumbnail-wrap img { max-height: 100%; max-width: 100%; box-shadow: 0 5px 18px rgba(0,0,0,.18); }
.status { display: inline-block; border-radius: var(--radius-small); padding: 5px 9px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; background: #eaebe7; color: #676b65; }
.thumbnail-wrap .status { position: absolute; top: 12px; right: 12px; }
.status-reviewed { background: var(--amber-soft); color: #855619; }
.status-approved { background: var(--green-soft); color: var(--green); }
.status-ocr_failed { background: #fae7e4; color: var(--red); }
.status-queued { background: #eceae4; color: #6d7169; }
.status-running { background: var(--amber-soft); color: #855619; }
.status-done { background: var(--green-soft); color: var(--green); }
.status-error { background: #fae7e4; color: var(--red); }
.status-cancelled { background: #eceae4; color: #6d7169; }

.job-row { display: grid; grid-template-columns: 90px 130px 1fr auto auto; gap: 12px; align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 14px; font-size: 13px; }
.job-kind { font-weight: 700; }
.job-doc, .job-when { color: var(--muted); }
.job-progress-head { margin-bottom: 8px; font-size: 13px; }
.progress-track { height: 8px; background: #e7e4da; border-radius: var(--radius-small); overflow: hidden; }
.progress-fill { height: 100%; background: var(--green); transition: width .3s ease; }
.job-log { background: var(--sidebar); color: #cfe4d6; padding: 14px 16px; border-radius: var(--radius); font-size: 12px; line-height: 1.5; max-height: 60vh; overflow: auto; white-space: pre-wrap; }
.job-log-head { margin-bottom: 8px; }
.page-card-meta { display: flex; justify-content: space-between; align-items: center; padding: 14px; }
.page-card-meta strong, .page-card-meta small { display: block; }
.page-card-meta small, .page-card-meta > span { color: var(--muted); font-size: 11px; margin-top: 4px; }

/* .page-alert* and .ocr-error-detail used to live here and styled nothing:
   they appear only in templates/review_flow.html, which is standalone and
   does not load this file. The rules moved into that template's own <style>.
   Left as a note rather than deleted silently, because "these rules vanished"
   is a question somebody will ask. */
.failed-note { color: var(--muted); text-align: center; padding: 26px 14px; }

.review-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 18px; margin-bottom: 18px; }
.review-title { display: flex; align-items: center; gap: 12px; }
.review-title h1 { margin: 0; font-family: var(--font-display); font-size: 30px; font-weight: 500; }
.review-toolbar p { margin: 5px 0 0; color: var(--muted); font-size: 12px; }
.toolbar-actions { display: flex; gap: 8px; align-items: center; }
.icon-button { border: 1px solid var(--line); background: var(--surface); width: 42px; height: 42px; border-radius: var(--radius); display: grid; place-items: center; }
.icon-button:hover { border-color: #9dac9e; }
.icon-button.is-disabled { opacity: .4; }
.review-grid { display: grid; grid-template-columns: minmax(420px, 1fr) minmax(420px, .92fr); gap: 18px; align-items: start; }
.image-panel, .text-panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.panel-label { height: 48px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--line); padding: 0 15px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.panel-label small { text-transform: none; font-weight: 500; color: var(--muted); letter-spacing: 0; }
.viewer-scroll { height: calc(var(--zoom-vh, 100vh) - 255px); min-height: 540px; overflow: auto; background: #333a35; padding: 22px; }
.image-canvas { position: relative; width: 100%; line-height: 0; box-shadow: 0 8px 30px rgba(0,0,0,.35); }
.image-canvas img { width: 100%; height: auto; }
.image-canvas svg { position: absolute; inset: 0; width: 100%; height: 100%; }
/* Overlay tiers keep letter-free colour here because the paired line card
   carries the tier letter for the same line — the redundancy lives one
   glance away, and the overlays' line styles differ per tier. */
.line-overlay { fill: rgba(160, 106, 25, .12); stroke: rgba(160, 106, 25, .8); stroke-width: 3; vector-effect: non-scaling-stroke; cursor: pointer; transition: fill .12s, stroke .12s; }
.line-overlay.confidence-good { fill: rgba(47, 111, 106, .10); stroke: rgba(47, 111, 106, .82); }
.line-overlay.confidence-mid { fill: rgba(160, 106, 25, .14); stroke: rgba(160, 106, 25, .85); stroke-dasharray: 10 6; }
.line-overlay.confidence-low { fill: rgba(162, 72, 50, .14); stroke: rgba(162, 72, 50, .86); stroke-dasharray: 3 5; }
.line-overlay:hover { fill-opacity: .34; stroke-width: 5; }
.line-overlay.is-accepted { fill: rgba(47, 111, 106, .12); stroke: rgba(47, 111, 106, .78); }
.line-overlay.is-selected { fill: rgba(49, 93, 190, .14); stroke: var(--select); stroke-width: 5; stroke-dasharray: none; }
.lines-list { height: calc(var(--zoom-vh, 100vh) - 255px); min-height: 540px; overflow-y: auto; padding: 12px; background: #f4f2ea; }
.line-card { background: var(--surface); border: 1px solid var(--line); border-left: 4px solid transparent; border-radius: var(--radius); margin-bottom: 9px; transition: .15s; scroll-margin: 90px; }
.line-card:hover { border-color: #babfb7; }
.line-card.is-selected { border-color: var(--select); border-left-color: var(--select); box-shadow: 0 0 0 2px rgba(49, 93, 190, .18); }
.line-card.is-accepted { border-left-color: var(--conf-high); background: #fbfefc; }
.line-card.confidence-good { border-left-color: var(--conf-high); }
.line-card.confidence-mid { border-left-color: var(--conf-mid); border-left-style: dashed; }
.line-card.confidence-low { border-left-color: var(--conf-low); border-left-style: dotted; }
.line-card form { padding: 11px 12px 10px; }
.line-meta { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 10px; margin-bottom: 7px; }
.line-number { background: #eceee9; color: #3e423d; border-radius: var(--radius-small); padding: 3px 5px; font-weight: 800; }
.region-badge { border-radius: var(--radius-small); padding: 3px 8px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; background: #eceee9; color: #5a5f58; }
.region-badge.region-body { background: var(--green-soft); color: var(--green); }
.region-badge.region-header { background: var(--amber-soft); color: #855619; }
.region-badge.region-page_number { background: #ece6f6; color: #5b4a86; }
.region-badge.region-footnote { background: #e2ecf5; color: #35618c; }
.region-select { border: 1px solid #d3d7d0; border-radius: var(--radius-small); background: #fafbf8; color: #3e423d; font-size: 11px; padding: 5px 6px; margin-right: auto; }
.line-overlay.region-header, .line-overlay.region-page_number, .line-overlay.region-footnote, .line-overlay.region-other { stroke-dasharray: 8 5; }
.accepted-mark { margin-left: auto; color: var(--green); font-weight: 800; }
.line-card textarea { width: 100%; resize: vertical; border: 1px solid transparent; border-radius: var(--radius-small); background: #f7f6f1; padding: 9px 11px; font-family: var(--font-arabic); font-size: 19px; line-height: 1.7; color: #191a17; }
.line-card textarea:focus { outline: none; border-color: var(--select); background: white; box-shadow: 0 0 0 2px rgba(49, 93, 190, .15); }
.line-actions { display: flex; justify-content: flex-end; align-items: center; gap: 8px; margin-top: 7px; }
.text-button, .accept-button { border-radius: var(--radius-small); padding: 6px 10px; font-size: 11px; font-weight: 700; cursor: pointer; }
.text-button { border: 0; background: transparent; color: var(--muted); }
.text-button:hover { color: var(--green); }
.accept-button { border: 1px solid #bad0c1; color: var(--green); background: var(--green-soft); }
.is-accepted .accept-button { background: var(--green); color: white; }

@media (max-width: 900px) {
  .app-frame { display: block; }
  .sidebar { position: static; height: auto; width: auto; flex-direction: row; flex-wrap: wrap; align-items: center; }
  .side-nav { flex-direction: row; flex-wrap: wrap; }
  .nav-group { margin: 0 6px; }
  .side-user { border: 0; margin: 0; padding: 0 8px; }
  .upload-form { grid-template-columns: 1fr; }
  .review-grid { grid-template-columns: 1fr; }
  .viewer-scroll, .lines-list { height: 68vh; min-height: 430px; }
  .review-toolbar { align-items: flex-start; }
}

@media (max-width: 620px) {
  .shell { padding: 28px 14px 50px; }
  .page-heading, .review-toolbar { display: block; }
  .page-heading .button, .page-heading form { margin-top: 18px; }
  .toolbar-actions { margin-top: 15px; }
  .document-item { grid-template-columns: auto 1fr auto; }
  .progress-copy { display: none; }
  .review-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ---- storage meter: the account's own footprint ---- */
.storage-meter { display: flex; align-items: center; gap: 10px; margin: 14px 0 0;
  font-size: 12px; color: var(--muted); flex-wrap: wrap; }
.storage-label { text-transform: uppercase; letter-spacing: .06em; font-size: 10px; }
.storage-figure { color: var(--ink); font-variant-numeric: tabular-nums; }
.storage-bar { width: 180px; height: 6px; background: var(--line); border-radius: 3px;
  overflow: hidden; }
.storage-bar span { display: block; height: 100%; background: var(--green); }
.storage-bar span.over { background: var(--red); }
.storage-warn { color: var(--red); }

/* ---- admin tables: accounts and job health share one shape, so the
   rules live here rather than inside one screen's head block (job
   health rendered unstyled because they did) ---- */
.account-table { width: 100%; border-collapse: collapse; font-size: 13px;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.account-table th { text-align: left; font-size: 10px; text-transform: uppercase;
    letter-spacing: .06em; color: var(--muted); padding: 9px 12px;
    border-bottom: 1px solid var(--line); }
.account-table td { padding: 10px 12px; border-bottom: 1px solid var(--line);
    vertical-align: middle; }
.account-table tr:last-child td { border-bottom: none; }
.account-table tr.is-inactive td { opacity: .55; }
.role-chip { font-size: 10px; text-transform: uppercase; letter-spacing: .06em;
    border: 1px solid var(--line); border-radius: var(--radius-small); padding: 2px 7px; }
.role-chip.admin { border-color: var(--green); color: var(--green); background: var(--green-soft); }
.meter { width: 130px; height: 6px; background: var(--line); border-radius: 3px; overflow: hidden; }
.meter span { display: block; height: 100%; background: var(--green); }
.meter span.over { background: var(--red); }

/* ---- deletion: one dialog, two doors ---- */
.delete-dialog { border: 1px solid #e6bbb5; border-radius: 6px; padding: 0;
  width: min(520px, 92vw); background: var(--surface); color: var(--ink);
  box-shadow: 0 18px 48px rgba(39, 43, 35, .22); font-family: var(--font-ui); }
.delete-dialog::backdrop { background: rgba(22, 33, 27, .38); }
.delete-dialog form { padding: 18px 20px 16px; }
.delete-dialog h2 { font-size: 15px; margin: 0 0 6px; color: var(--red);
  letter-spacing: .03em; }
.delete-title { font-family: var(--font-arabic); font-size: 20px; direction: rtl;
  text-align: right; margin: 0 0 12px; }
.delete-losses { font-size: 13px; margin: 0 0 12px 18px; padding: 0; line-height: 1.7; }
.delete-keeps, .delete-backups { font-size: 12px; color: var(--muted); margin: 0 0 10px; }
.delete-dialog footer { display: flex; gap: 8px; justify-content: flex-end;
  margin-top: 14px; }
.delete-button-solid { background: var(--red); border-color: #7f342c; color: #fff; }
.delete-button-solid:hover { background: #7f342c; }


/* ---- the library's front door -----------------------------------------
   On an empty library the import card IS the screen. It is deliberately
   not a marketing hero: a research instrument's front door says what to do
   and gets out of the way. The weight comes from space and type scale, not
   from colour — colour still means confidence and nothing else. */
.upload-card.first-import { padding: 40px 34px; }
.first-import-title { font-family: var(--font-display); font-size: 28px;
  font-weight: 500; margin: 0 0 8px; color: var(--ink); }
.first-import-lead { margin: 0 0 22px; max-width: 52ch; color: var(--muted);
  font-size: 13.5px; line-height: 1.65; }
.first-import-aside { margin: 18px 0 0; font-size: 12px; color: var(--muted); }
.linkish { background: none; border: 0; padding: 0; font: inherit;
  color: var(--green); text-decoration: underline; cursor: pointer; }
.linkish:hover { color: var(--green-deep); }

/* The delete control was the only prominent thing on a library row: the
   clearest offer the screen made about a book was to destroy it. It now
   waits until the row is under the pointer (and is always present for the
   keyboard, which never hovers). */
.row-delete { opacity: 0; transition: opacity .12s ease; }
.doc-row-line:hover .row-delete,
.doc-row-line:focus-within .row-delete { opacity: 1; }
@media (hover: none) { .row-delete { opacity: 1; } }

.rail-details > summary { cursor: pointer; font-size: 13px; font-weight: 600;
  color: var(--green); list-style: none; }
.rail-details > summary::-webkit-details-marker { display: none; }
.rail-details > summary:hover { color: var(--green-deep); }

/* The year input was 65px wide with a placeholder that rendered as
   "Publi" (design review ض‑9). It has its own label now, and room for
   four digits and a hint. */
.upload-form input[name="year"] { min-width: 132px; }

/* ---- disclosure, once and quiet ---------------------------------------
   The standing epistemic claim is body copy: true of every count this tool
   will ever show, so it does not blink. Amber is reserved for what is
   CONTINGENT — the blind-spot panel, index drift, a library that changed
   under a saved search — which is what makes amber mean something again. */
.caveat { font-size: 12px; line-height: 1.6; color: var(--muted);
  margin: 8px 0 14px; max-width: 68ch; }
.blindspots { border-left: 3px solid var(--amber); background: var(--amber-soft); }
.blindspots h3 { color: #7a4a05; }
.blindspots-lead { font-size: 12px; color: #7a4a05; margin: 0 0 8px; }

/* ---- the reading screen: one primary action ---------------------------
   Three buttons all shaped like "done" made the researcher pick among three
   finishing verbs on every page. One is primary; the rest live behind ⋯ or
   on the keyboard. */
.page-more-menu { position: absolute; right: 8px; top: 100%; z-index: 40;
  min-width: 280px; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow); padding: 6px; }
.page-more-menu .menu-item { display: block; width: 100%; text-align: left;
  background: none; border: 0; font: inherit; font-size: 12.5px; color: var(--ink);
  padding: 8px 10px; border-radius: var(--radius-small); cursor: pointer; }
.page-more-menu .menu-item:hover { background: var(--green-soft); }
.page-more-menu .menu-label { cursor: default; color: var(--muted); }
.page-more-menu .menu-label select { display: block; margin: 6px 0 2px; width: 100%; }
.page-more-menu .menu-label small { display: block; font-size: 11px; line-height: 1.5; }
.float-actions { position: relative; }

.keymap-sheet { padding: 4px 12px 0; font-size: 11px; color: #6a6f68; }
.keymap-sheet > summary { cursor: pointer; color: var(--green); font-weight: 600;
  list-style: none; padding: 4px 0; }
.keymap-sheet > summary::-webkit-details-marker { display: none; }
.keymap-sheet dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px;
  margin: 6px 0 0; }
.keymap-sheet dt { font-weight: 700; color: #4a4f48; }
.keymap-sheet dd { margin: 0; }

/* The project rename control was grey microtext and had to be reported
   missing before it was found. It now looks like something you can press. */
.project-edit > summary { cursor: pointer; font-size: 12.5px; font-weight: 600;
  color: var(--green); list-style: none; display: inline-block;
  padding: 3px 8px; border: 1px solid var(--line); border-radius: var(--radius-small);
  background: var(--surface); }
.project-edit > summary::-webkit-details-marker { display: none; }
.project-edit > summary:hover { border-color: var(--green); color: var(--green-deep); }

/* Said before the upload, so it is a warning and not a discovery. */
.upload-note { grid-column: 1 / -1; margin: 2px 0 0; padding: 9px 12px;
  background: var(--amber-soft); border: 1px solid #e3c48f; border-radius: var(--radius);
  color: #855619; font-size: 12px; line-height: 1.5; }