/* AiB Platform — the Invoice Extractor's workspace grammar (rd- is its
   short prefix: the reader workspace both doors wear — the public page on
   /free-tools/invoice-extractor/ and AiB Solutions' deployment page).
   Loaded by each door's widget after the kit (static/css/components/), so
   it only adds what is the reader's own: the file rail with its document
   thumbnails, the viewer (page tabs, the paper, the reading marks, the scan
   sweep) and the record panel's rows. Everything generic is the kit's and
   is written in the templates and scripts by its class names: the drop zone
   (.dropzone / .dropzone-input), the panel as a .sheet (side panel, bottom
   sheet ≤1020), status dots, the verdict .badge--lg, .steps, .skeleton,
   .callout and .copy-btn.

   The design is the owner-approved concept mockup (2026-08-16), spoken in
   the platform's tokens: paper and canvas, the document as a white sheet on
   --shadow-paper, and the three semantic statuses doing the talking (--ok
   read verbatim, --warn derived or worth a look, --danger not an invoice).
   Sodium appears ONLY while a file is really being read: the kit's live dot
   and badge, and the scan sweep below (.is-scanning .rd-scan — it exists
   only on the stage of a file in flight). Marks are quiet by default (a
   tinted outline) and turn ink when pointed at, so the document stays a
   document. Reduced motion: base.css stops every animation.

   Ladder literals used: 1180 (the file rail folds into a strip above the
   viewer), 1020 (the record panel becomes the bottom sheet — the 1020
   two-column fold), 719 (phone). */

/* ---------- the workspace band (the hero's own bottom margin spaces it) ---------- */
.rd-ws { background: var(--canvas); border-block: 1px solid var(--hairline); }
.rd-grid {
  max-width: 1480px; margin: 0 auto;
  display: grid; grid-template-columns: 236px minmax(0, 1fr) 412px;
  gap: 0 var(--space-6); padding: var(--space-6) var(--pad) var(--space-8);
  align-items: start;
}

/* ---------- the drop zone's two lives ---------- */
/* Without the script the form is a plain upload: the native picker shows
   (so the chosen file is visible) and the Read button submits; the sample
   button is a real submit too. Once the script runs (.is-scripted) the
   picker hides behind its pill label and every file goes through fetch. */
.rd-ws:not(.is-scripted) .rd-drop .dropzone-input {
  position: static; width: auto; height: auto; max-width: 100%;
  margin: 0; clip-path: none; overflow: visible;
}
.rd-ws:not(.is-scripted) .rd-pick,
.rd-ws.is-scripted .rd-submit { display: none; }

/* ---------- rail: the file queue ---------- */
.rd-rail { min-width: 0; position: sticky; top: 84px; }
.rd-rail-t { color: var(--grey); margin: 0 0 var(--space-2) 2px; font-size: 10px; letter-spacing: 0.12em; }
.rd-file {
  display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 0 10px; align-items: center;
  width: 100%; text-align: left; background: var(--paper); border: 1px solid var(--hairline);
  border-radius: var(--radius-sm); padding: 10px var(--space-3) 10px 10px; margin-bottom: var(--space-2);
  box-shadow: var(--shadow-card); cursor: pointer; font: inherit; color: inherit;
  transition: border-color var(--dur-fast) var(--ease-out);
}
.rd-file:hover { border-color: var(--hairline-strong); }
.rd-file[aria-current="true"] { border-color: var(--ink); }
.rd-file-ico { width: 34px; height: 42px; border-radius: 3px; border: 1px solid var(--hairline-strong); background: var(--white); position: relative; overflow: hidden; grid-row: 1 / span 2; }
.rd-file-ico::before { content: ""; position: absolute; left: 6px; right: 6px; top: 8px; height: 2px; background: var(--hairline-strong); box-shadow: 0 6px 0 var(--hairline), 0 12px 0 var(--hairline), 0 18px 0 var(--hairline), 0 24px 0 var(--hairline); }
.rd-file-ico.is-photo::before { display: none; }
.rd-file-ico.is-photo::after { content: ""; position: absolute; inset: 6px; border-radius: 2px; background: linear-gradient(160deg, var(--photo-light) 0 60%, var(--photo-dark) 60%); }
.rd-file-n { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* the file's state: the kit's .status-dot beside the same state in words */
.rd-file-m { font-family: var(--font-mono); font-size: var(--fs-2xs); color: var(--grey); display: flex; align-items: center; gap: 6px; min-width: 0; }
.rd-file-m span:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rd-file-add { display: block; width: 100%; border: 1px dashed var(--hairline-strong); border-radius: var(--radius-sm); padding: var(--space-3); font-size: 13px; color: var(--grey); text-align: center; cursor: pointer; background: none; }
.rd-file-add:hover { color: var(--ink); border-color: var(--ink); }
.rd-rail-quota { margin: 14px 2px 0; font-size: var(--fs-2xs); color: var(--grey); line-height: 1.7; text-transform: none; letter-spacing: 0.04em; }

/* ---------- viewer: the pages ---------- */
.rd-viewer { min-width: 0; }
.rd-vtool { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-3); min-height: 30px; }
.rd-pages { display: inline-flex; border: 1px solid var(--hairline-strong); border-radius: var(--radius-pill); overflow: hidden; background: var(--paper); }
.rd-pages:empty { display: none; }
.rd-page-tab { padding: 6px 14px; border: 0; background: none; cursor: pointer; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--grey); }
.rd-page-tab + .rd-page-tab { border-left: 1px solid var(--hairline); }
.rd-page-tab[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.rd-vtool-r { display: flex; align-items: center; gap: var(--space-2); }
.rd-tbtn { border: 1px solid var(--hairline-strong); border-radius: var(--radius-pill); padding: 6px var(--space-3); font-size: var(--fs-2xs); color: var(--grey); background: var(--paper); cursor: pointer; }
.rd-tbtn[aria-pressed="true"] { color: var(--ink); border-color: var(--ink); }
.rd-tbtn:hover { color: var(--ink); }
[data-state="empty"] .rd-vtool { display: none; }

.rd-stage { position: relative; }
.rd-paper-wrap { display: none; }
.rd-paper {
  position: relative; width: min(100%, 760px); margin: 0 auto;
  background: var(--white); box-shadow: var(--shadow-paper);
  border-radius: 2px; overflow: hidden; display: none;
}
.rd-paper.is-shown { display: block; }
.rd-paper img { display: block; width: 100%; height: auto; }
.rd-paper-empty { aspect-ratio: 1 / 1.4142; display: grid; place-items: center; color: var(--grey); font-size: 14px; text-align: center; padding: var(--space-6); }
.rd-under { margin: var(--space-3) auto 0; width: min(100%, 760px); display: flex; justify-content: space-between; gap: var(--space-3); font-size: var(--fs-2xs); color: var(--grey); text-transform: none; letter-spacing: 0.04em; }
.rd-under:empty { display: none; }

/* the reading marks */
.rd-marks { position: absolute; inset: 0; pointer-events: none; }
.rd-mark {
  position: absolute; border: 1px solid color-mix(in srgb, var(--ok) 55%, transparent); border-radius: 3px;
  background: color-mix(in srgb, var(--ok) 9%, transparent); pointer-events: auto; cursor: pointer; padding: 0;
  transition: box-shadow var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.rd-mark.warn { border-color: color-mix(in srgb, var(--warn) 60%, transparent); background: color-mix(in srgb, var(--warn) 12%, transparent); }
.rd-mark.is-hot, .rd-mark.is-sel { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink), 0 0 0 4px color-mix(in srgb, var(--ink) 10%, transparent); background: color-mix(in srgb, var(--ok) 20%, transparent); z-index: var(--z-base); }
.rd-mark.warn.is-hot, .rd-mark.warn.is-sel { border-color: var(--warn); box-shadow: 0 0 0 1px var(--warn), 0 0 0 4px color-mix(in srgb, var(--warn) 14%, transparent); background: color-mix(in srgb, var(--warn) 24%, transparent); }
/* a selected mark rings out once — the eye finds it on a busy page */
.rd-mark.is-sel { animation: rd-sel var(--dur-slow) var(--ease-out) 1; }
@keyframes rd-sel { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ink) 28%, transparent); } 100% { box-shadow: 0 0 0 10px color-mix(in srgb, var(--ink) 0%, transparent); } }
.rd-mark::after {
  content: attr(data-cap); position: absolute; left: -1px; bottom: calc(100% + 3px);
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase;
  background: var(--ink); color: var(--paper); padding: 2px 6px; border-radius: 3px; white-space: nowrap;
  opacity: 0; transform: translateY(2px); transition: opacity var(--dur-fast), transform var(--dur-fast) var(--ease-out);
}
.rd-mark.warn::after { background: var(--warn); }
.rd-mark.is-hot::after, .rd-mark.is-sel::after { opacity: 1; transform: none; }
.rd-stage.marks-off .rd-mark { opacity: 0; pointer-events: none; }

/* processing: the reading sweep over the page — a LIVE indicator: the
   stage is .is-scanning only while a file is really being read, so this is
   the one sodium the workspace paints itself (the gate allowlists
   `.is-scanning .rd-scan` with that reason); it beats with the live dot */
.rd-scan { position: absolute; inset: 0; pointer-events: none; display: none; }
.rd-stage.is-scanning .rd-scan { display: block; }
.rd-stage.is-scanning .rd-scan::before { content: ""; position: absolute; left: 0; right: 0; height: 2px; background: var(--sodium); box-shadow: 0 0 18px 4px color-mix(in srgb, var(--sodium) 35%, transparent); animation: rd-sweep var(--dur-pulse) var(--ease-out) infinite; }
.rd-stage.is-scanning .rd-scan::after { content: ""; position: absolute; left: 0; right: 0; height: 22%; background: linear-gradient(to bottom, color-mix(in srgb, var(--sodium) 10%, transparent), color-mix(in srgb, var(--sodium) 0%, transparent)); animation: rd-sweep var(--dur-pulse) var(--ease-out) infinite; }
@keyframes rd-sweep { 0% { top: -2%; } 100% { top: 100%; } }
.rd-stage.is-scanning .rd-marks { display: none; }

/* state visibility: what the stage shows */
.rd-drop { display: none; }
[data-state="empty"] .rd-drop { display: flex; }
[data-state="reading"] .rd-paper-wrap, [data-state="answered"] .rd-paper-wrap { display: block; }
[data-state="empty"] .rd-rail, [data-state="empty"] .rd-under { display: none; }
[data-state="empty"] .rd-grid { grid-template-columns: minmax(0, 1fr) 412px; }

/* the empty state: the drop zone IS the form (the kit's .dropzone, sized as
   the stage; the form itself is not a click target — its buttons are) */
.rd-drop { width: min(100%, 760px); margin: 0 auto; min-height: 520px; padding: var(--space-7); cursor: auto; }
.rd-drop-in { max-width: 40ch; }
.rd-drop-ico { width: 56px; height: 68px; margin: 0 auto 18px; border: 1.5px solid var(--ink); border-radius: 4px; position: relative; background: var(--white); }
.rd-drop-ico::before { content: ""; position: absolute; left: 10px; right: 10px; top: 14px; height: 2px; background: var(--ink); box-shadow: 0 8px 0 var(--hairline-strong), 0 16px 0 var(--hairline-strong), 0 24px 0 var(--hairline-strong); }
.rd-drop-ico::after { content: ""; position: absolute; right: 12px; bottom: 10px; width: 14px; height: 8px; border: 1.5px solid var(--ok); border-radius: 2px; background: var(--ok-face); }
.rd-drop-title { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-2xl); letter-spacing: -0.01em; margin: 0; }
.rd-drop-sub { color: var(--grey); margin: var(--space-2) 0 0; font-size: 14px; }
.rd-drop-btns { display: flex; gap: 10px; justify-content: center; align-items: center; flex-wrap: wrap; margin-top: var(--space-5); }
.rd-drop-fmt { font-size: var(--fs-2xs); color: var(--grey); margin-top: 18px; }

/* ---------- record panel: the kit's .sheet, its body the reading ---------- */
.rd-record { min-width: 0; }
/* the phone sheet's opener — shown only ≤1020, while a reading is on the stage */
.rd-sheet-fab { display: none; }
.rd-panel-scroll { padding-bottom: var(--space-2); scrollbar-width: thin; }
.rd-p-file { font-size: var(--fs-2xs); color: var(--grey); margin: 0; overflow-wrap: anywhere; text-transform: none; }
.rd-p-title { font-family: var(--font-display); font-weight: 800; font-size: 24px; letter-spacing: -0.01em; margin: var(--space-1) 0 0; line-height: 1.1; }
/* the verdict: the kit's .badge--lg, wrapping rather than widening the sheet */
.rd-verdict { margin-top: var(--space-3); white-space: normal; }
/* muted and live badges ground on --canvas: on the paper sheet the kit's
   paper ground would vanish and the pill with it */
.rd-panel .badge--muted, .rd-panel .badge--live { background: var(--canvas); }
.rd-lead { margin: var(--space-3) 0 0; font-size: 14px; color: var(--grey); max-width: 44ch; }
.rd-checks { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--space-3); }
.rd-ck { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: 0.04em; border-radius: var(--radius-xs); padding: var(--space-1) var(--space-2); border: 1px solid var(--hairline); color: var(--grey); background: var(--white); }
.rd-ck.ok { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 35%, transparent); background: var(--ok-face); }
.rd-ck.warn { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 35%, transparent); background: var(--warn-face); }
.rd-ck.info { color: var(--info); border-color: color-mix(in srgb, var(--info) 35%, transparent); background: var(--info-face); }

.rd-grp { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--hairline); }
.rd-grp-t { display: flex; justify-content: space-between; align-items: baseline; font-size: 10px; letter-spacing: 0.12em; color: var(--grey); margin: 0 0 6px; }
.rd-grp-t small { letter-spacing: 0.04em; color: var(--grey); text-transform: none; }
.rd-grp > .callout { margin-top: 6px; }
.rd-grp > .skeleton { margin: 10px 0; }
.rd-fld {
  display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: 0 10px; align-items: baseline;
  padding: 6px var(--space-2); margin: 0 -8px; border-radius: 8px; cursor: default;
  transition: background var(--dur-fast) var(--ease-out);
}
.rd-fld.has-mark { cursor: pointer; }
.rd-fld:hover, .rd-fld.is-hot { background: var(--canvas); }
.rd-fld.is-sel { background: var(--canvas); box-shadow: inset 2px 0 0 var(--ink); }
.rd-fld-k { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--grey); padding-top: 3px; }
.rd-fld-v { font-size: 14px; font-weight: 500; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.rd-fld-v.big { font-weight: 700; font-size: 16px; }
.rd-fld-v small { color: var(--grey); font-weight: 400; font-size: 12px; }
.rd-fld-v.is-empty { color: var(--grey); font-weight: 400; }
.rd-src { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.04em; white-space: nowrap; border-radius: 5px; padding: 2px 6px; align-self: center; }
.rd-src-ok { color: var(--ok); background: var(--ok-face); }
.rd-src-warn { color: var(--warn); background: var(--warn-face); }
.rd-src-none { color: var(--grey); background: transparent; border: 1px dashed var(--hairline-strong); }
.rd-lines { width: 100%; border-collapse: collapse; margin-top: 2px; font-variant-numeric: tabular-nums; }
.rd-lines th { font-family: var(--font-mono); font-weight: 500; font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--grey); text-align: left; padding: 2px 6px 6px; }
.rd-lines th.n, .rd-lines td.n { text-align: right; }
.rd-lines td { padding: 6px; border-top: 1px solid var(--hairline); font-size: 13px; vertical-align: top; }
.rd-lines tr.rd-row.has-mark { cursor: pointer; }
.rd-lines tr.rd-row:hover td, .rd-lines tr.is-hot td, .rd-lines tr.is-sel td { background: var(--canvas); }
.rd-lines tr.is-sel td:first-child { box-shadow: inset 2px 0 0 var(--ink); }
.rd-lines tr.is-off td { color: var(--warn); }
.rd-lines .mn { font-family: var(--font-mono); font-size: 12px; }
.rd-sum-note { margin: var(--space-2) 0 0; font-size: var(--fs-sm); color: var(--ok); display: flex; gap: 6px; align-items: baseline; }
.rd-sum-note.warn { color: var(--warn); }
.rd-panel-meta { margin: 18px 0 0; padding-top: 14px; border-top: 1px solid var(--hairline); font-family: var(--font-mono); font-size: 11px; color: var(--grey); line-height: 1.7; }

.rd-export { border-top: 1px solid var(--hairline); padding: 14px 22px var(--space-4); background: var(--paper); border-radius: 0 0 var(--radius) var(--radius); }
.rd-export-t { font-size: 10px; letter-spacing: 0.12em; color: var(--grey); margin: 0 0 var(--space-2); }
.rd-export-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.rd-export-cta { margin: var(--space-3) 0 0; font-size: 13px; color: var(--grey); }
.rd-export-cta a { color: var(--ink); }

/* processing narration: the kit's .steps */
.rd-steps { margin-top: 14px; }

/* the empty panel: what you'll see */
.rd-what h3 { font-family: var(--font-display); font-weight: 800; font-size: 20px; margin: var(--space-1) 0 0; letter-spacing: -0.01em; }
.rd-what-row { display: grid; grid-template-columns: 74px 1fr; gap: var(--space-3); padding: var(--space-3) 0; border-bottom: 1px solid var(--hairline); }
.rd-what-row:last-of-type { border-bottom: 0; }
.rd-what-k { font-size: 10px; letter-spacing: 0.12em; color: var(--grey); padding-top: 3px; }
.rd-what-row p { margin: 0; font-size: var(--fs-md); color: var(--grey); }
.rd-what-row p b { color: var(--ink); font-weight: 600; }

/* the answer without the script (the door's result partial, drawn in the
   panel on a no-JS POST-back): plain tables, one per group */
.rd-plain { width: 100%; border-collapse: collapse; margin-top: 18px; font-size: var(--fs-md); font-variant-numeric: tabular-nums; }
.rd-plain caption { text-align: left; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--grey); padding: 14px 0 6px; border-top: 1px solid var(--hairline); }
.rd-plain th, .rd-plain td { padding: 5px 6px 5px 0; text-align: left; vertical-align: top; border-top: 1px solid var(--hairline); overflow-wrap: anywhere; }
.rd-plain th { font-weight: 400; color: var(--grey); }
.rd-plain th[scope="row"] { width: 38%; }
.rd-plain .n { text-align: right; }
.rd-plain thead th { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; }
.rd-posted .table-scroll:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.rd-posted .callout { margin-top: var(--space-4); }

/* ---------- keyboard ---------- */
/* buttons and links wear base.css's ring; the record's rows are focusable
   divs and table rows, so they wear it here */
.rd-fld:focus-visible, .rd-row:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* ---------- laptop: the rail folds into a strip ---------- */
@media (max-width: 1180px) {
  .rd-grid { grid-template-columns: minmax(0, 1fr) 380px; gap: 0 var(--space-5); }
  .rd-rail { position: static; grid-column: 1 / -1; display: flex; gap: var(--space-2); align-items: center; margin-bottom: 14px; overflow-x: auto; padding-bottom: var(--space-1); }
  .rd-rail-t { display: none; }
  #rd-queue { display: contents; }
  .rd-file { width: auto; min-width: 210px; margin: 0; flex: 0 0 auto; }
  .rd-file-add { width: auto; flex: 0 0 auto; padding: var(--space-3) var(--space-4); }
  .rd-rail-quota { margin: 0 0 0 auto; white-space: nowrap; }
  .rd-fld { grid-template-columns: 88px minmax(0, 1fr) auto; }
}

/* ---------- tablet & phone: the record becomes a bottom sheet ---------- */
@media (max-width: 1020px) {
  .rd-grid, [data-state="empty"] .rd-grid { grid-template-columns: minmax(0, 1fr); padding-left: var(--space-2); padding-right: var(--space-2); }
  /* The kit's .sheet leaves the flow here and exists ONLY while the record
     is being read: off-screen until the button or a mark opens it; Close,
     the grip, Escape or a swipe down put it back. It never peeks (the sea
     sheet's lesson: a fixed peek rides over the method cards and the
     footer). The empty state's "what you'll see" is not a sheet — it sits
     under the drop zone. */
  [data-state="empty"] .rd-panel { position: static; transform: none; visibility: visible; max-height: none; border-radius: var(--radius); border-bottom: 1px solid var(--hairline); box-shadow: var(--shadow-card); margin-top: var(--space-4); }
  [data-state="empty"] .rd-panel .sheet-grip, [data-state="empty"] .rd-panel .sheet-close { display: none; }
  /* the cookie pill steps aside while the sheet is up (.has-open-sheet:
     the runtime's mark on <body>) */
  .has-open-sheet .cookie-note { opacity: 0; pointer-events: none; transition: opacity var(--dur-fast); }
  /* bottom-right: the cookie pill owns the bottom-left corner */
  .rd-sheet-fab {
    display: inline-flex; position: fixed; right: var(--space-4); bottom: calc(var(--space-4) + env(safe-area-inset-bottom)); z-index: var(--z-pop);
    align-items: center; gap: var(--space-2); border: 0; cursor: pointer; background: var(--ink); color: var(--paper); border-radius: var(--radius-pill); padding: 11px 18px;
    font: inherit; font-size: 14px; font-weight: 600; box-shadow: var(--shadow-sheet); white-space: nowrap;
  }
  .rd-sheet-fab[hidden], .rd-panel.is-open ~ .rd-sheet-fab { display: none; }
  .rd-fab-n { font-size: 11px; color: color-mix(in srgb, var(--paper) 70%, transparent); letter-spacing: 0.04em; text-transform: none; }
  .rd-ws { padding-bottom: 60px; }
  .rd-mark::after { font-size: 9px; }
  .rd-export { padding: var(--space-3) 18px 14px; }
}

@media (max-width: 719px) {
  .rd-vtool { gap: var(--space-2); }
  .rd-file { min-width: 180px; }
  .rd-drop { min-height: 0; padding: 36px var(--space-5); }
  .rd-drop-title { font-size: 22px; }
  .rd-fld { grid-template-columns: 82px minmax(0, 1fr) auto; }
  .rd-rail-quota { display: none; }
}