/* KRITOS - THE LOOK (step 1 of the redesign; Ishwar, 15 October 2026: "I like it, lets roll with it").
   Source: Kritos\design\DESIGN_HANDOFF.md, "Kritos branding". ONE place for the look, linked by every app page AFTER
   its own <style>, so the variables below win over each page's own: the colours, the fonts, the radius and shadow, the
   focus ring, the buttons, the tinted summary cards and fold-out headers, the row shading and the brand.
   Nothing here moves an element into another place or changes a word. Not linked by the public website
   (kritos-landing.html), which keeps its own look. */

/* The fonts are served from Kritos itself (frontend/fonts, each family's SIL Open Font Licence beside it): no page
   asks a third party for them. IBM Plex Sans is one variable file for every weight. */
@font-face { font-family: "IBM Plex Sans"; src: url("/frontend/fonts/IBMPlexSans-var.woff2") format("woff2");
  font-weight: 100 700; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("/frontend/fonts/IBMPlexMono-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("/frontend/fonts/IBMPlexMono-500.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("/frontend/fonts/IBMPlexMono-600.woff2") format("woff2");
  font-weight: 600 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Fraunces"; src: url("/frontend/fonts/Fraunces-600.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap; }

:root {
  --navy: #0F2A52;          /* navy: buttons, headings */
  --navy-deep: #06142B;     /* deep navy: the menu, the logo's own ground */
  --emerald: #10B981;       /* the one accent */
  --green-text: #096C4C;    /* green as text */
  --bg-page: #F5F7FA;       /* the page ground */
  --card: #FFFFFF;
  --ink: #13243F;
  --muted: #566580;         /* grey labels: 5.6:1 or better on every ground below */
  --border: #E3E8EF;
  --sans: "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Consolas, "Liberation Mono", monospace;
  --serif: "Fraunces", Georgia, serif;
  --radius: 8px;            /* one radius */
  --radius-sm: 8px;
  --shadow-card: 0 1px 2px rgba(6, 20, 43, .06), 0 0 0 1px rgba(6, 20, 43, .05);   /* one shadow */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px;
  --focus: rgba(11, 111, 189, .45);
  --shell-bg: #F5F7FA; --shell-border: #E3E8EF;
}

body { font-family: var(--sans); }
.mono, code, kbd { font-family: var(--mono); }

/* A visible keyboard focus ring on every control. */
a:focus-visible, button:focus-visible, select:focus-visible, input:focus-visible, textarea:focus-visible,
summary:focus-visible, [tabindex]:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

/* ---------- the menu and the brand ---------- */
.sidebar { background: var(--navy-deep); }
.sidebar-brand { display: flex; align-items: center; gap: 10px; font-family: var(--serif); font-weight: 600;
  font-size: 23px; letter-spacing: .01em; text-transform: none; color: #FFFFFF; }
.brand-mark { display: block; flex: none; width: 32px; height: 32px; }
.sidebar-section-label { color: rgba(255, 255, 255, .72); }
.sidebar-ver { color: rgba(255, 255, 255, .72); }
.sidebar-nav a.disabled { opacity: 1; color: rgba(255, 255, 255, .62); }
/* ⚠ 0.4 item 4 (his night plan, 16 October 2026): "At 900 px tall, the menu's last link (Administration) is cut: make
   the menu scroll, or fit." It scrolled, but its thin scrollbar hardly shows, so the link read as cut. On a short screen
   the links sit closer, and the whole menu fits at 900 px; shorter still, it scrolls as before. */
@media (max-height: 960px) {
  .sidebar .sidebar-brand { margin-bottom: 16px; }
  .sidebar .sidebar-nav a { padding-top: 8px; padding-bottom: 8px; }
}
.brand-mark-collapsed { display: none; }
@media (max-width: 900px) {
  /* the menu collapsed: the mark alone, beside the button that opens it */
  .brand-mark-collapsed { display: block; position: fixed; top: 16px; left: 64px; width: 36px; height: 36px; z-index: 60; }
  .app-topbar { padding-left: 112px; }
  /* the menu opened: the mark beside the wordmark, clear of the button (which covered "KRI" of "KRITOS" before) */
  body:has(.sidebar.is-open) .brand-mark-collapsed { display: none; }
  .sidebar-brand { padding-left: 52px; }
}

/* The three-line button at any width (his ruling, 15 October, night). On a wide screen it collapses the menu: the
   menu slides away, the page takes its room, and the mark stands alone beside the button, as on a narrow screen. Each
   page's own button handler sets `menu-collapsed` on the body; on a narrow screen it opens and closes the menu as before. */
@media (min-width: 901px) {
  .hamburger { display: inline-flex; }
  .sidebar { transition: transform .22s ease; }
  .sidebar-brand { padding-left: 52px; }
  body.menu-collapsed .sidebar { transform: translateX(-102%); }
  body.menu-collapsed .layout-shell { margin-left: 0; width: 100%; max-width: 100%; }
  body.menu-collapsed .brand-mark-collapsed { display: block; position: fixed; top: 16px; left: 64px; width: 36px;
    height: 36px; z-index: 60; }
  body.menu-collapsed .app-topbar { padding-left: 112px; }
}

/* No sideways scroll (D12; found on step 1: 15 px on every tall page). Each page sized its shell to "100vw" less the
   menu, and 100vw counts the vertical scrollbar, so a page tall enough to scroll was 15 px too wide. The shell takes
   the width it is given beside the menu instead, at every width. */
.layout-shell { width: auto !important; max-width: none !important; }

/* Sign-in, MFA, the invite page and Coming Soon: the mark above the wordmark. */
.brand-mark-lg { display: block; width: 56px; height: 56px; margin: 0 auto 14px; }
.brand .brand-word, .logo .brand-word { display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--serif); font-weight: 600; font-size: 26px; letter-spacing: .01em; color: var(--navy);
  text-transform: none; }
.logo { display: flex; flex-direction: column; align-items: center; }

/* ---------- buttons ---------- */
/* L16 (Ishwar, 19 October 2026: "Fresh read, Generate workpaper and Download JSON are not the same size"): the results'
   action buttons in one row are one size, on Revenue and Expenses alike - Generate's own (his 5a of 17 October); each
   keeps its own colours. One rule, here. */
.results-action-btn { flex: 0 0 auto; font-size: 15px; font-weight: 700; padding: 3px 14px; line-height: 1.2;
  white-space: nowrap; }
.btn { border-radius: var(--radius); }
.btn-primary { background: var(--navy); color: #FFFFFF; }
.btn-primary:disabled, .btn-primary[disabled] { opacity: 1; background: #E3E8EF; color: #566580;
  border-color: #E3E8EF; box-shadow: none; }
.btn-ghost { background: #F2F6FC; color: var(--navy); border-color: #DFE7F3; }
.btn-ghost:hover:not(:disabled) { background: #E6EDF6; border-color: #C9D6E8; }
.btn-ghost:disabled, .btn-ghost[disabled] { opacity: 1; background: #E3E8EF; color: #566580; border-color: #E3E8EF; }
/* Confirm: ready is the accent with deep-navy words (white on emerald read at 2.5:1); greyed out is grey on light grey,
   the handoff's checked pair (4.8:1), never white on grey. */
.btn-confirm-audit.is-ready { background: var(--emerald); color: var(--navy-deep); border-color: #0C8F64; box-shadow: none; }
.btn-confirm-audit:disabled, .btn-confirm-audit.is-disabled { background: #E3E8EF; color: #566580; border-color: #E3E8EF;
  box-shadow: none; }
/* A greyed-out choice in a row reads grey on light grey, not faded. */
.cell-select:disabled, .cell-input:disabled { opacity: 1; background: #E3E8EF; color: #566580; }
/* "View invoice" still to open, and the amber word on a row: a darker amber (4.06:1 and 4.31:1 before). */
.btn-doc-pending { color: #92400E; }
.badge-amber { color: #92400E; }
.badge-emerald { color: var(--green-text); }

/* The separators between the figures in the results bar, and on Home: grey, not faded to nothing. */
.arb-sep { opacity: 1; color: rgba(255, 255, 255, .72); }
.stats-sep { color: var(--muted); }
/* Home: a module that is coming soon sits on light grey with its "Coming soon" badge, not faded (2.6:1 before). */
.module-card.coming-soon { opacity: 1; background: #F5F6F9; box-shadow: none; }

/* ---------- summary cards, tinted by meaning ---------- */
.kpi-card { box-shadow: var(--shadow-card); }
.kpi-card:has(#kpiTotalTx), .kpi-card:has(#kpiMatchedInv), .kpi-card:has(#kpiReceiptsFound),
.kpi-card:has(#kpiTotal), .kpi-card:has(#kpiPassed) { background: #F2F6FC; border-color: #DFE7F3; }
.kpi-card:has(#kpiExceptions) { background: #FDF4F3; border-color: #F4DCD8; }
.kpi-card:has(#kpiProjected), .kpi-card:has(#kpiSeverity), .kpi-card:has(#kpiVariance) { background: #FFF8EC; border-color: #F3E2C0; }
.kpi-card:has(#kpiCutoff) { background: #F5F6F9; border-color: #E3E8EF; }
.kpi-card:has(#kpiConfirmed) { background: #F1FAF5; border-color: #CDEBDC; }
/* 261a (his 16 October, evening; the prototype's cards): every figure IBM Plex Mono 22px semibold, the cut-off count
   18px with its detail small under it, and severity the small line under Projected misstatement - not a tile */
.kpi-card .kpi-card-value { font-family: var(--mono); font-size: 22px; font-weight: 600; }
.kpi-card .kpi-card-value#kpiCutoff { font-size: 18px; }
.kpi-card-sub { font-size: 12px; color: #566580; margin-top: 2px; line-height: 1.35; }
.kpi-card-sub #kpiSeverity { display: inline-block; padding: 0 6px; border-radius: 5px; font-weight: 700; }
table.rv-on tbody > tr > td.rv-cell.rv-po-flag, .rv-po-flag { color: #7A4B00; font-weight: 600; }
.rv-keep { white-space: nowrap; }
/* (9) c's clamp, the whole text on hover by the element's title: the PO sentence on the row in two lines; the
   proposed-match note above the statement in one (his ruling (b) of 30 October 2026, `.rv-docnote-words` below) */
.rv-po-answer, .rv-docnote-words { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; }

/* ---------- fold-out panel headers, on a light blue-grey ---------- */
#extrapolationSection .card-header { background: #F4F7FB; border-top-left-radius: var(--radius);
  border-top-right-radius: var(--radius); }
#docReconSection > h3 { background: #F4F7FB; border-radius: var(--radius); padding: 6px 10px; }
#docReconCard .card-header { background: #F4F7FB; border-top-left-radius: var(--radius);
  border-top-right-radius: var(--radius); }

/* ---------- tables: alternate rows on #F9FAFC; each page's hover and amend colours still win (!important) ---------- */
.results-table tbody tr:nth-child(even) td, .results-tbl tbody tr:nth-child(even) td,
.recon-mini tbody tr:nth-child(even) td { background: #F9FAFC; }

/* ---------- steps 3 and 4 (D12): the Revenue testing results - ten columns, the tabs, the row panel ---------- */
/* The rows keep all 46 of their own cells; with the view on, the table draws only the ten summary cells
   (`.rv-cell`), and an open row's own cells sit in its panel (`.rv-host`). */
.rv-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px;
  margin-bottom: 12px; }
.rv-tabs { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px; background: #FFFFFF; border: 1px solid #E3E8EF;
  border-radius: 8px; }
.rv-tab { border: 0; background: transparent; padding: 7px 12px; border-radius: 6px; font: inherit; font-size: 13px;
  color: #3B4A63; cursor: pointer; min-height: 32px; }
.rv-tab:hover { background: #F2F6FC; }
.rv-tab.is-on { background: var(--navy-deep); color: #FFFFFF; }
.rv-tab .rv-n { opacity: .85; margin-left: 2px; }
.rv-hint { font-size: 13px; color: #566580; }

/* the columns take what their figures need (an amount, a result, the chevron never break - $99,999,999.99 at 1366 px
   did, under fixed widths); the words wrap in what is left */
table.rv-on { table-layout: auto; width: 100%; min-width: 0; }
table.rv-on thead tr { display: none; }
table.rv-on thead tr.rv-head { display: table-row; }
table.rv-on tbody > tr > td:not(.rv-cell):not(.rv-host) { display: none; }
table.rv-on tbody > tr.rv-filtered { display: none; }
table td.rv-host { display: contents !important; }
/* the view is today's cut ("compact"), whose rules hide cells by position; the view's own cells are not today's
   columns, and while a row is open its own cells are in the panel, so the positions shift - they always show */
table.rv-on tbody > tr > td.rv-cell { display: table-cell !important; }
table:not(.rv-on) td.rv-cell, table:not(.rv-on) thead tr.rv-head { display: none; }
table.rv-on thead tr.rv-head th { text-align: left; padding: 10px 10px; font-family: var(--mono);
  font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; font-weight: 500; color: #566580;
  background: #F7F9FC; border-bottom: 1px solid #E3E8EF; white-space: normal; position: static; }
table.rv-on thead tr.rv-head th.r, table.rv-on td.rv-num { text-align: right; }
table.rv-on tbody > tr > td.rv-cell { padding: 10px 10px; vertical-align: top; border-bottom: 1px solid #EEF1F5;
  white-space: normal; overflow-wrap: anywhere; max-width: none; font-size: 13px; color: var(--ink); }
table.rv-on tbody > tr > td.rv-cell.rv-num, table.rv-on tbody > tr > td.rv-cell.rv-res,
table.rv-on tbody > tr > td.rv-cell.rv-open { white-space: nowrap; overflow-wrap: normal; }
table.rv-on tbody > tr.rv-row { cursor: pointer; }
table.rv-on tbody > tr.rv-row:hover > td.rv-cell { background: #EEF3FA; }
table.rv-on tbody > tr.rv-is-open > td.rv-cell { background: #E6EDF6; }
.rv-strong { font-weight: 600; }
.rv-sub { font-size: 12px; color: #566580; margin-top: 2px; }
.rv-finding.rv-check { color: #7A4B00; font-weight: 500; }
.rv-finding.rv-exc { color: #9B1C13; font-weight: 500; }
.rv-var-bad { color: #9B1C13; }
.rv-amended { font-size: 11px; font-weight: 600; color: #92400E; margin-top: 2px; }
.rv-done { font-size: 11px; font-weight: 600; color: var(--green-text); margin-top: 4px; }
.rv-pill { display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px; border-radius: 999px; font-size: 12px;
  font-weight: 600; white-space: nowrap; }
.rv-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.rv-pill.rv-pass { background: #E7F6EE; color: #096C4C; }
.rv-pill.rv-check { background: #FDF0D8; color: #7A4B00; }
.rv-pill.rv-exc { background: #FBE5E2; color: #9B1C13; }
.rv-pill.rv-amended-pill { background: #F59E0B; color: #1F1300; }
.rv-pill.rv-none { background: #EEF1F5; color: #566580; }
.rv-pill.rv-none::before { display: none; }
table.rv-on tbody > tr.rv-row:has(.rv-pill.rv-none) { cursor: default; }
/* the table's old legend ("Cells with light purple background are editable ...") describes cells the screen no longer
   shows: every correction is in the row panel's boxes now (his gate of 17 October) */
#editableCellsFooter { display: none !important; }
.rv-chev { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; border: 1px solid #DFE7F3; background: #F2F6FC; color: var(--navy); border-radius: 8px; min-width: 32px;
  min-height: 32px; font-size: 18px; line-height: 1; cursor: pointer; }
.rv-footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; padding: 12px 16px;
  background: #F7F9FC; font-size: 13px; color: #3B4A63; border: 1px solid #E3E8EF; border-top: 0;
  border-radius: 0 0 8px 8px; }

/* the fold-outs under the table: closed until opened */
.rv-fold { margin-top: 14px; border-radius: 8px; background: #FFFFFF; border: 1px solid #E3E8EF; overflow: hidden; }
.rv-fold-head { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 13px 16px; border: 0; background: #F4F7FB; font: inherit; font-size: 14px; font-weight: 600;
  color: var(--navy-deep); cursor: pointer; text-align: left; }
.rv-fold-head::after { content: "▾"; color: #566580; }
.rv-fold.is-closed .rv-fold-head::after { content: "▸"; }
.rv-fold.is-closed > .rv-fold-body { display: none; }
.rv-fold-body { padding: 12px 16px; }
.rv-fold-body #bankNearMissPanel { margin: 0 !important; border: 0 !important; }

/* the row panel, on the right */
.rv-scrim { position: fixed; inset: 0; background: rgba(6, 20, 43, .35); z-index: 70; }
.rv-panel { position: fixed; top: 0; right: 0; bottom: 0; width: min(700px, 100vw); background: #FFFFFF; z-index: 71;
  display: flex; flex-direction: column; box-shadow: -8px 0 30px rgba(6, 20, 43, .2); cursor: default;
  text-align: left; white-space: normal; color: var(--ink); font-size: 13px; }
.rv-head { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 16px 64px 16px 22px;
  background: var(--navy-deep); color: #FFFFFF; }
.rv-eyebrow { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: #34D399; }
.rv-title { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.rv-ref { font-size: 18px; font-weight: 600; }
.rv-cust { font-size: 14px; color: #C4CFDF; }
.rv-x { position: absolute; top: 14px; right: 16px; width: 36px; height: 36px; border-radius: 8px; border: 0;
  background: #173963; color: #FFFFFF; font-size: 20px; cursor: pointer; }
.rv-body { flex: 1; overflow-y: auto; padding: 16px 22px; display: flex; flex-direction: column; gap: 16px; }
.rv-sec { display: flex; flex-direction: column; gap: 10px; }
.rv-sec + .rv-sec, .rv-found + .rv-sec { border-top: 1px solid #E3E8EF; padding-top: 14px; }
.rv-h { margin: 0; font-size: 14px; font-weight: 600; color: var(--navy-deep); }
.rv-k { display: block; font-size: 11.5px; color: #566580; margin-bottom: 2px; }
.rv-field { display: flex; flex-direction: column; min-width: 0; }
.rv-field[hidden] { display: none; }   /* 321a.3: the attribute alone lost to `display: flex` - the field still showed */
/* ⚠ Today's table styles its cells BY POSITION (`td:nth-child(1)`, `(2)` are frozen - sticky, 150 px, shadowed - and
   others have floors). In the panel each of the row's own cells is the second child of its field, and while a row is
   open its summary cells are its first ten: neither is today's column, so none of those rules may reach them. */
.rv-panel td, table.rv-on tbody > tr > td.rv-cell {
  position: static !important; left: auto !important; z-index: auto !important; box-shadow: none !important;
  min-width: 0 !important; max-width: none !important; }
.rv-panel td { display: block; padding: 0; border: 0; background: none; white-space: normal !important;
  overflow-wrap: anywhere; width: auto !important; text-align: left; }
.rv-panel td * { max-width: 100%; }
/* the table's alternate-row stripe is the row's, not the panel's: it must not reach the panel's values (an editable
   cell keeps its purple and an amended one its amber - both !important on the page) */
table tbody tr > td.rv-host .rv-panel td { background: transparent; }
.rv-panel .rv-body { overflow-x: hidden; }
/* his ruling (c) of 30 October 2026: each figure tile on one line - its label, its figure at the right - the three as
   wide as that line; what a tile says more ("Amended", the variance's status) sits under its line and never widens it */
.rv-sec-figures { display: flex; flex-direction: row; gap: 8px; }
.rv-tile { display: flex; flex: 1 1 auto; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; background: #F5F7FA;
  border-radius: 8px; padding: 8px 10px; min-width: 0; line-height: 1.25; }
.rv-tile > .rv-k { font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
  color: #566580; margin: 0 auto 0 0; }
.rv-fig { font-size: 16px; font-weight: 600; color: #13243F; overflow-wrap: anywhere; }
.rv-tile.is-bad .rv-fig { color: #9B1C13; font-weight: 500; }   /* the handoff: red, normal weight */
.rv-figsub { font-size: 12px; color: #566580; flex-basis: 100%; contain: inline-size; }
.rv-figsub:empty { display: none; }
.rv-tile-vouched .rv-figsub { color: #92400E; font-weight: 600; }
.rv-found { display: flex; flex-direction: column; gap: 4px; border-radius: 8px; padding: 12px 14px;
  background: #F5F7FA; line-height: 1.5; font-size: 14px; }
.rv-found.rv-pass { background: #F1FAF5; }
.rv-found.rv-check { background: #FFF8EC; color: #5C3900; }
.rv-found.rv-exc { background: #FDF4F3; color: #7A1A12; }
.rv-grid { display: grid; grid-template-columns: 92px repeat(3, minmax(0, 1fr)); font-size: 13px; }
.rv-grid > span { padding: 8px; border-bottom: 1px solid #EEF1F5; overflow-wrap: anywhere; }
.rv-gh { font-weight: 600; color: var(--navy-deep); font-size: 12.5px; }
.rv-tiek { color: #566580; font-size: 12px; }
.rv-tv-ok { background: #F1FAF5; }
.rv-tv-ok::after { content: " \2713"; color: #096C4C; font-weight: 600; }
.rv-tv-bad { color: #9B1C13; background: #FDF4F3; font-weight: 600; }
.rv-tv-chk { color: #7A4B00; background: #FFF8EC; font-weight: 600; }
.rv-more { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 8px; }
.rv-nobank .rv-grid { grid-template-columns: 92px repeat(2, minmax(0, 1fr)); }
.rv-nobank .rv-more { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rv-minis { display: flex; flex-direction: column; gap: 8px; padding: 8px 0; min-width: 0; }
.rv-fold-sec .rv-fold-inner { display: flex; flex-direction: column; gap: 10px; padding-top: 10px; }
.rv-sec-analysis .rv-fold-inner { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; }

/* his gate of 17 October, the prototype as the specification: the panel's first view, its folds, its documents, its
   boxes, and its left edge to drag */
.rv-found.is-empty { display: none; }
/* the page's editable tint (purple) is the table's sign of a door; in the panel the box is the sign, so it is white as
   the prototype draws it - an amended field keeps its amber (the handoff: "keeps its amber shading") */
table tbody tr > td.rv-host .rv-panel .rv-box > td.cell-editable { background: #FFFFFF !important; outline: 0 !important; }
table tbody tr > td.rv-host .rv-panel .rv-box > td.cell-editable.is-amended,
table tbody tr > td.rv-host .rv-panel td.po-cell.is-amended select,
table tbody tr > td.rv-host .rv-panel td.po-cell.is-amended input { background: #FED7AA !important;
  border-color: #F59E0B !important; }     /* 73a: a carried performance obligation answer, in the review's own box */
table tbody tr > td.rv-host .rv-panel td.cell-editable:hover::after,
table tbody tr > td.rv-host .rv-panel td.cell-editable.is-amended::after { content: none !important; }   /* the table's
   corner ✏ is the table's: in a box it was drawn above the box, by its label (the amber box says "amended", and its ↺
   line what Kritos read) - seen on an amended box the pointer was not over, 3 November 2026 */
/* the review's own controls (performance obligation, Override, notes) in the prototype's input: white, 14px, 8 px
   corners - the table's tinted cell behind them is the table's, not the panel's */
table tbody tr > td.rv-host .rv-panel .rv-sec-review td { background: transparent !important; border: 0 !important;
  padding: 0 !important; box-shadow: none !important; }
.rv-panel .rv-sec-review select, .rv-panel .rv-sec-review textarea,
.rv-panel .rv-sec-review input[type="text"] { width: 100%; min-height: 40px; font: inherit; font-size: 14px;
  color: #13243F; background: #FFFFFF !important; border: 1px solid #CFD6E1 !important; border-radius: 8px;
  padding: 9px 10px; box-sizing: border-box; }
.rv-panel .rv-sec-review > .rv-field + .rv-field { margin-top: 4px; }
.rv-minis .rv-badge-cell .badge { display: none; }       /* the sample's badges are the header's, once */
.rv-title .badge { font-size: 11px; }
.rv-fold-sec { border-top: 1px solid #E3E8EF; padding-top: 12px; }
.rv-fold-sec > summary.rv-h { cursor: pointer; list-style: none; display: flex; justify-content: space-between;
  align-items: center; min-height: 32px; }
.rv-fold-sec > summary.rv-h::-webkit-details-marker { display: none; }
.rv-fold-sec > summary.rv-h::after { content: "▸"; color: #566580; font-size: 14px; }
.rv-fold-sec[open] > summary.rv-h::after { content: "▾"; }
.rv-fold-sec > summary.rv-h:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
.rv-sec-docs > .rv-field { display: none; }               /* the row's own buttons, pressed by the tabs */
.rv-docs { display: flex; flex-direction: column; gap: 8px; }
.rv-doctabs { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px; background: #FFFFFF; border: 1px solid #E3E8EF;
  border-radius: 8px; width: fit-content; max-width: 100%; }
.rv-doctab { border: 0; background: transparent; padding: 7px 12px; border-radius: 6px; font: inherit; font-size: 13px;
  color: #3B4A63; cursor: pointer; min-height: 32px; }
.rv-doctab:hover { background: #F2F6FC; }
.rv-doctab.is-on { background: var(--navy-deep); color: #FFFFFF; }
.rv-doctab .rv-viewed { font-weight: 600; }
/* its height: the space left in the panel (results-view.js `fitViewer`, his ruling (a) of 30 October 2026) */
.rv-docview { display: none; flex-direction: column; gap: 8px; overflow: auto;
  padding: 8px; border: 1px solid #E3E8EF; border-radius: 8px; background: #F5F7FA; }
.rv-docs.has-doc .rv-docview { display: flex; }
/* 78a, his ruling (a) of 29 October: the wheel stops at the statement's end - never handed on to the panel, which
   would carry the note box above it out of the window */
.rv-docview { overscroll-behavior: contain; }
/* 78a: 31a's note on a proposed row, pinned above the viewer (outside its scroll), in the Check's own amber */
.rv-docnote { margin: 0; padding: 8px 10px; border: 1px solid #F3E2C0; border-radius: 8px; background: #FFF8EC;
  color: #5C3900; font-size: 13px; line-height: 1.45; }
.rv-docnote-words { -webkit-line-clamp: 1; }    /* the clamp on the words, not the padded box: no second line in its padding */
.rv-docview canvas { width: 100%; height: auto; background: #FFFFFF; box-shadow: 0 1px 3px rgba(6, 20, 43, .15); }
/* ⚠ HIS BRIEF OF 4 NOVEMBER 2026 (C2, C8), the one amend panel of his ruling 1a (3 November): a box's figure on one
   line, never broken - each box wide enough for its badge and 99,999,999.99 at 14 px; anything the box says more (the
   ↺ line, a failed conversion, an entry it cannot read, the rate's live amount) on its own line UNDER the figure, never
   beside it. While the box is amended its ↺ line reads what ↺ puts back - Kritos's own reading, in the box's own currency
   (results-view.js `door`: `data-was`). One layout for both pages' doors: Revenue's span inside the cell, Expenses' cell. */
.rv-boxes { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.rv-box { position: relative; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.rv-box > .rv-k { font-size: 13px; font-weight: 500; color: var(--ink); margin: 0; }
/* the prototype's input: 14px, #CFD6E1, 8 px corners, 9 x 10 px inside */
.rv-box > td { display: grid !important; grid-template-columns: auto minmax(0, 1fr); align-items: center;
  align-content: center; gap: 2px 0; min-height: 42px; padding: 9px 10px !important;
  border: 1px solid #CFD6E1 !important; border-radius: 8px; background: #FFFFFF !important; font-size: 14px;
  font-family: var(--mono); color: #13243F; }
.rv-box .amendable-cell { grid-column: 1 / -1; display: grid; grid-template-columns: auto minmax(0, 1fr);
  align-items: center; gap: 2px 0; min-width: 0; }
.rv-box .amend-ccy { grid-column: 1; margin: 0 6px 0 0; }
.rv-box .amend-display, .rv-box .amend-input { grid-column: 2; }
.rv-box .amend-display { min-width: 0; font-size: 14px; }
.rv-box .amend-figure { white-space: nowrap; overflow-wrap: normal; }   /* a figure; a rate's words wrap as words */
.rv-box .amend-revert-icon, .rv-box > td > div, .rv-box .fx-live, .rv-box .amend-reject { grid-column: 1 / -1; }
.rv-box .amend-revert-icon { justify-self: start; margin: 0; padding: 0; font-size: 12px; line-height: 1.4;
  color: #566580; white-space: nowrap; }
.rv-box .amend-revert-icon::after { content: " " attr(data-was); }
.rv-box > td > div:empty { display: none; }
.rv-amend-hint { font-size: 13px; color: #566580; }
.rv-box.is-door > td { cursor: text; }
.rv-box.is-door:hover > td { border-color: var(--navy) !important; }
.rv-box:not(.is-door) > td { background: #F5F7FA !important; border-color: #E3E8EF !important; color: #3B4A63; }
.rv-box.is-date > td { padding-right: 40px !important; }
.rv-box .receipt-date-display { flex: 1 1 auto; min-width: 0; }
.rv-box .amend-display:hover { text-decoration: none; }
.rv-box .amend-icon { display: none !important; }
.rv-box .amend-input, .rv-box .receipt-date-input { flex: 1 1 auto; width: 100%; min-width: 0; border: 0; outline: none;
  padding: 0; font: inherit; background: transparent; }
.rv-cal { position: absolute; right: 8px; bottom: 9px; width: 26px; height: 26px; display: inline-flex;
  align-items: center; justify-content: center; border: 0; border-radius: 6px; background: transparent;
  color: var(--navy); cursor: pointer; }
.rv-cal:hover { background: #F2F6FC; }
.rv-cal-input { position: absolute; right: 8px; bottom: 8px; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.rv-grip { position: absolute; left: -5px; top: 0; bottom: 0; width: 10px; cursor: ew-resize; z-index: 2; }
.rv-grip::after { content: ""; position: absolute; left: 4px; top: 0; bottom: 0; width: 2px; background: transparent; }
.rv-grip:hover::after, .rv-panel.is-resizing .rv-grip::after { background: #10B981; }
.rv-panel.is-resizing { user-select: none; }
.rv-why { font-size: 13px; color: #92400E; font-weight: 500; }
.rv-bar { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; padding: 14px 22px;
  border-top: 1px solid #E3E8EF; background: #F7F9FC; }
.rv-bar-confirm { display: contents; }
body.rv-panel-open { overflow: hidden; }
#toggleAllColumns[hidden] { display: none !important; }
/* his gate of 8943619: the untested-credits choice on the Projected misstatement card, in the card's own small type */
.rv-card-choice { font-size: 11px; color: #3B4A63; margin-top: 4px; line-height: 1.5; display: flex;
  flex-direction: column; gap: 4px; }
/* the prototype's two-way switch (his gate of 17 October): the half in use filled navy */
.rv-seg { display: flex; gap: 2px; background: #FFFFFF; border-radius: 7px; padding: 2px; box-shadow: 0 0 0 1px #E3E8EF; }
.rv-seg-half { position: relative; flex: 1; display: inline-flex; align-items: center; justify-content: center;
  min-height: 28px; padding: 5px 8px; border-radius: 5px; font-size: 11.5px; color: #3B4A63; cursor: pointer;
  white-space: nowrap; }
.rv-seg-half:hover { background: #F2F6FC; }
.rv-seg-half.is-on { background: var(--navy); color: #FFFFFF; }
.rv-seg-half input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.rv-seg-half:focus-within { outline: 2px solid var(--navy); outline-offset: 1px; }
.rv-undo { align-self: flex-start; }