/* =========================================================================
   WGS Cash Position — executive dashboard
   Refined "ledger terminal": cool neutral canvas, one steel-blue accent,
   monospaced tabular figures, hairline rules. Green/red reserved for
   surplus/shortfall and signed amounts only. Fully theme-aware + responsive.
   No external assets — system fonts, inline SVG.
   ========================================================================= */

/* ----------------------------- Design tokens ---------------------------- */
:root {
  color-scheme: light dark;

  /* Type */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
    Arial, "Helvetica Neue", sans-serif;
  --font-mono: ui-monospace, "SF Mono", "SFMono-Regular", Menlo, "Cascadia Mono",
    "Segoe UI Mono", "Roboto Mono", Consolas, monospace;

  /* Light palette (default) */
  --canvas:        #eaedf2;
  --canvas-glow:   rgba(58, 99, 192, 0.06);
  --surface:       #ffffff;
  --surface-2:     #f5f7fa;
  --surface-3:     #eef1f6;
  --border:        #dce1e9;
  --border-strong: #c6cdda;
  --hairline:      #e7eaf0;

  --text:          #101826;
  --text-muted:    #566173;
  --text-faint:    #8790a0;

  --accent:        #345fbd;
  --accent-strong: #2a4fa0;
  --accent-soft:   rgba(52, 95, 189, 0.10);
  --accent-ring:   rgba(52, 95, 189, 0.35);

  --pos:           #0f7a4d;
  --pos-soft:      rgba(15, 122, 77, 0.10);
  --neg:           #c0392b;
  --neg-soft:      rgba(192, 57, 43, 0.10);
  --warn:          #b26a00;
  --warn-text:     #7a4a00;
  --warn-soft:     #fdf3df;
  --warn-border:   #f0d9a8;

  --shadow-sm: 0 1px 2px rgba(16, 24, 38, 0.06),
               0 1px 1px rgba(16, 24, 38, 0.04);
  --shadow-md: 0 2px 4px rgba(16, 24, 38, 0.05),
               0 8px 24px rgba(16, 24, 38, 0.08);
  --shadow-lg: 0 4px 10px rgba(16, 24, 38, 0.06),
               0 20px 48px rgba(16, 24, 38, 0.12);

  --radius:    14px;
  --radius-sm: 10px;
  --radius-xs: 7px;
  --tap: 40px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --canvas:        #0b0f16;
    --canvas-glow:   rgba(111, 156, 245, 0.10);
    --surface:       #141a24;
    --surface-2:     #1a2130;
    --surface-3:     #212a3a;
    --border:        #29323f;
    --border-strong: #38455a;
    --hairline:      #232c3a;

    --text:          #eef2f8;
    --text-muted:    #9aa6ba;
    --text-faint:    #667389;

    --accent:        #6f9cf5;
    --accent-strong: #8fb2f8;
    --accent-soft:   rgba(111, 156, 245, 0.14);
    --accent-ring:   rgba(111, 156, 245, 0.45);

    --pos:           #34d39a;
    --pos-soft:      rgba(52, 211, 154, 0.14);
    --neg:           #f7736b;
    --neg-soft:      rgba(247, 115, 107, 0.15);
    --warn:          #f4b43e;
    --warn-text:     #f4c974;
    --warn-soft:     rgba(244, 180, 62, 0.10);
    --warn-border:   rgba(244, 180, 62, 0.30);

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 2px 6px rgba(0, 0, 0, 0.4), 0 10px 30px rgba(0, 0, 0, 0.45);
    --shadow-lg: 0 6px 14px rgba(0, 0, 0, 0.45), 0 24px 60px rgba(0, 0, 0, 0.55);
  }
}

/* Explicit toggle wins in both directions */
:root[data-theme="dark"] {
  --canvas:        #0b0f16;
  --canvas-glow:   rgba(111, 156, 245, 0.10);
  --surface:       #141a24;
  --surface-2:     #1a2130;
  --surface-3:     #212a3a;
  --border:        #29323f;
  --border-strong: #38455a;
  --hairline:      #232c3a;

  --text:          #eef2f8;
  --text-muted:    #9aa6ba;
  --text-faint:    #667389;

  --accent:        #6f9cf5;
  --accent-strong: #8fb2f8;
  --accent-soft:   rgba(111, 156, 245, 0.14);
  --accent-ring:   rgba(111, 156, 245, 0.45);

  --pos:           #34d39a;
  --pos-soft:      rgba(52, 211, 154, 0.14);
  --neg:           #f7736b;
  --neg-soft:      rgba(247, 115, 107, 0.15);
  --warn:          #f4b43e;
  --warn-text:     #f4c974;
  --warn-soft:     rgba(244, 180, 62, 0.10);
  --warn-border:   rgba(244, 180, 62, 0.30);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 2px 6px rgba(0, 0, 0, 0.4), 0 10px 30px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 6px 14px rgba(0, 0, 0, 0.45), 0 24px 60px rgba(0, 0, 0, 0.55);
}

/* ------------------------------- Reset+base ----------------------------- */
* { box-sizing: border-box; }
[hidden] { display: none !important; }   /* make the hidden attribute authoritative */
/* overflow-x on <body> alone does NOT stop iOS Safari panning the page — the
   root element still scrolls. Setting it here too means one over-wide child can
   never shift the whole layout sideways again (see .anomalies li below).
   MUST be `clip`, not `hidden`: `hidden` makes the element a scroll container
   (the other axis computes to auto), and a sticky descendant then sticks to
   THAT scrollport instead of the viewport — which silently killed the sticky
   masthead, and with it snapshot navigation on mobile. `clip` blocks the pan
   without creating a scroll container, so `position: sticky` keeps working. */
html { -webkit-text-size-adjust: 100%; overflow-x: clip; }
body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.5;
  color: var(--text);
  background-color: var(--canvas);
  background-image:
    radial-gradient(1100px 620px at 82% -8%, var(--canvas-glow), transparent 70%),
    radial-gradient(900px 500px at 6% 4%, var(--canvas-glow), transparent 72%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;   /* `clip`, not `hidden` — see the note on html above */
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
button { font-family: inherit; }

.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.num  { font-family: var(--font-mono); font-variant-numeric: tabular-nums;
        letter-spacing: -0.01em; }

/* Accounting-style amount: "$" pinned LEFT, tabular digits pinned RIGHT, so
   down any column the $ signs line up on the left and the decimals on the right. */
.amt {
  display: inline-flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.6em;
  min-width: 7.4em;              /* shared column width -> $ + decimals align */
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.amt-cur { flex: none; }
.amt-num { flex: none; text-align: right; font-variant-numeric: tabular-nums; }
/* In tables the amount fills its column (which auto-sizes to the widest value),
   so $ + decimals align with no magic fixed width. */
td.cell-amt .amt { display: flex; min-width: 0; }
/* Hero stats: one big figure — keep the $ hugging the number, no column width. */
.amt-hero { min-width: 0; justify-content: flex-start; gap: 0.12em; }

.pos { color: var(--pos); }
.neg { color: var(--neg); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

/* --------------------------------- Shell -------------------------------- */
.wrap {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 22px 64px;
}

/* -------------------------------- Header -------------------------------- */
.masthead {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--surface);
  background: color-mix(in srgb, var(--canvas) 82%, transparent);
  backdrop-filter: saturate(160%) blur(12px);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid var(--border);
  transition: background .2s, border-color .2s;
}
/* Viewing a past snapshot — subtle amber wash so it's clearly not live */
.masthead.viewing-history {
  background: var(--warn-soft);
  background: color-mix(in srgb, var(--warn) 13%, var(--canvas));
  border-bottom-color: var(--warn-border);
}
.masthead-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 12px 22px;
  display: flex;
  align-items: center;
  column-gap: 16px; row-gap: 4px;   /* thin gap so the history label adds only a slim 2nd line */
  flex-wrap: wrap;
}
.brand { display: flex; align-items: center; gap: 12px; min-width: 0; position: relative; }
.brand-mark {
  flex: none;
  width: 38px; height: 38px;
  border-radius: 10px;
  display: grid; place-items: center;
  color: #fff;
  padding: 0; border: 0; cursor: pointer;   /* it's now a menu button */
  background: linear-gradient(155deg, var(--accent), var(--accent-strong));
  box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,0.25);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.02em;
}
.brand-text { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.brand-title {
  font-size: 15px; font-weight: 650; letter-spacing: -0.01em;
  white-space: nowrap;
}
.brand-sub {
  font-size: 11.5px; color: var(--text-muted);
  letter-spacing: 0.04em; text-transform: uppercase;
}

/* -------- W-logo dropdown menu (secondary header actions) --------------- */
.brand-mark[aria-expanded="true"] { box-shadow: 0 0 0 3px var(--accent-ring); }
.brand-menu {
  position: absolute; top: calc(100% + 8px); left: 0; z-index: 60;
  min-width: 220px; padding: 6px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-sm); box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column; gap: 2px;
  animation: popup-in .14s cubic-bezier(.2,.7,.3,1);
}
.brand-menu[hidden] { display: none; }
.bm-item {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 9px 11px; margin: 0;
  border: 0; border-radius: var(--radius-xs); background: none;
  font: inherit; font-size: 13.5px; font-weight: 550; color: var(--text);
  text-align: left; cursor: pointer; white-space: nowrap;
  transition: background .12s, color .12s;
}
.bm-item[hidden] { display: none; }
.bm-item:hover { background: var(--surface-2); }
.bm-item:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.bm-item .bm-ico { flex: none; display: inline-grid; place-items: center; width: 18px; height: 18px; color: var(--text-muted); }
.bm-item .bm-ico svg { width: 17px; height: 17px; }
.bm-item:hover .bm-ico { color: var(--accent-strong); }
.bm-label { min-width: 0; }
.bm-sep { height: 1px; margin: 5px 6px; background: var(--hairline); }
.bm-danger { color: var(--neg); }
.bm-danger .bm-ico { color: var(--neg); }
.bm-danger:hover { background: var(--neg-soft); color: var(--neg); }

/* Refresh: rightmost of the top row on every breakpoint. margin-left:auto on
   .header-tools does the pushing that the old spacer used to; refresh (order 2)
   trails the tool cluster so it stays the rightmost control on desktop. */
.header-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
                margin-left: auto; order: 1; }

#refreshBtn {
  order: 2; flex: none;
  /* Reserve MORE than the widest label ("Refresh data" / "Refreshing…") so
     swapping the text can never grow the button past this width — idle and busy
     render at the identical size. No edge shift, no header bounce. */
  min-width: 152px;
}

/* Snapshot history navigator — segmented control + "where am I" label */
.snapnav { display: inline-flex; align-items: center; gap: 8px; flex: none; }
/* History label lives on its OWN full-width line at the bottom of the masthead,
   pinned left — so its presence/length never shifts the tool buttons. */
.snapnav-label {
  order: 10; flex: 0 0 100%; width: 100%; margin: 0;
  font-size: 11.5px; font-weight: 600; color: var(--warn-text);
  line-height: 1.4;
  /* Reserve the line's height PERMANENTLY (while nav is available) so toggling
     between live and a historical snapshot never adds/removes a row — zero bounce.
     Blank (live) state keeps this box via visibility:hidden below. */
  min-height: 1.4em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-variant-numeric: tabular-nums;
}
/* Live/blank state: keep the reserved line box, just hide the text (no collapse). */
.snapnav-label.is-blank { visibility: hidden; }
.segmented { display: inline-flex; flex: none; box-shadow: var(--shadow-sm); border-radius: var(--radius-sm); }
.seg-btn {
  min-height: var(--tap); min-width: 34px; padding: 0 9px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border-strong); background: var(--surface);
  color: var(--text); font-size: 13px; line-height: 1; cursor: pointer;
  transition: background .15s, color .15s;
}
.seg-btn + .seg-btn { border-left-width: 0; }
.segmented .seg-btn:first-child { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.segmented .seg-btn:last-child { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.seg-btn:hover:not(:disabled) { background: var(--surface-2); color: var(--accent-strong); }
.seg-btn:disabled { opacity: 0.4; cursor: default; }
.seg-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; z-index: 1; }

.user-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 10px 5px 8px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  font-size: 13px;
  box-shadow: var(--shadow-sm);
}
.user-avatar {
  width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent-strong);
  font-size: 11px; font-weight: 700; font-family: var(--font-mono);
}
.user-name { font-weight: 600; max-width: 140px; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.badge-admin {
  font-size: 10px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 6px; border-radius: 5px;
  color: var(--accent-strong);
  background: var(--accent-soft);
  border: 1px solid var(--accent-ring);
}

/* Buttons */
.btn {
  appearance: none;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--tap);
  padding: 0 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text);
  font-size: 13.5px; font-weight: 600;
  cursor: pointer;
  transition: background .15s, border-color .15s, transform .05s, box-shadow .15s;
  box-shadow: var(--shadow-sm);
}
.btn:hover { background: var(--surface-2); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .6; cursor: not-allowed; }
.btn svg { width: 16px; height: 16px; }

.btn-icon { padding: 0; width: var(--tap); }

.btn-accent {
  color: #fff;
  background: linear-gradient(160deg, var(--accent), var(--accent-strong));
  border-color: transparent;
  box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,0.22);
}
.btn-accent:hover { filter: brightness(1.05); background: linear-gradient(160deg, var(--accent), var(--accent-strong)); }
.btn-accent:disabled { filter: none; }

.btn-ghost { border-color: transparent; background: transparent; box-shadow: none; }
.btn-ghost:hover { background: var(--surface-2); }

/* Refresh spinner */
.spin { animation: spin 0.9s linear infinite; transform-origin: 50% 50%; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Pull-to-refresh indicator (installed standalone app only; JS attaches it).
   A small circular badge that slides down from the top as you pull and spins
   while the data re-fetches. Hidden until the JS adds .visible. */
.ptr-indicator {
  position: fixed; top: calc(env(safe-area-inset-top, 0px) + 4px); left: 50%;
  z-index: 55; visibility: hidden;
  width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--surface); border: 1px solid var(--border);
  box-shadow: var(--shadow-md); color: var(--accent);
  opacity: 0; pointer-events: none;
  transform: translateX(-50%) translateY(-48px);
  will-change: transform, opacity;
}
.ptr-indicator.visible { visibility: visible; }
.ptr-indicator svg { width: 18px; height: 18px; display: block; }
.ptr-indicator.ready { color: var(--accent-strong); border-color: var(--accent-ring); }
.ptr-indicator.spinning svg { animation: spin 0.8s linear infinite; transform-origin: 50% 50%; }
/* Smooth the snap-back / settle; suppressed during an active finger drag via .dragging. */
.ptr-indicator.settle { transition: transform .22s ease, opacity .22s ease; }

/* ------------------------------ Report bar ------------------------------ */
.reportbar {
  display: flex; align-items: baseline; gap: 12px 18px;
  flex-wrap: wrap;
  padding: 26px 2px 18px;
}
.reportbar h1 {
  margin: 0;
  font-size: clamp(20px, 3.4vw, 27px);
  font-weight: 700;
  letter-spacing: -0.02em;
}
.asof {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--text-muted); font-size: 13.5px;
}
.dot { width: 6px; height: 6px; border-radius: 50%; background: var(--text-faint);
  display: inline-block; }
.updated {
  flex-basis: 100%;            /* own line, pinned to the start of the row */
  margin-left: 0;
  display: inline-flex; align-items: center; gap: 7px;
  justify-content: flex-start;
  font-size: 12.5px; color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
/* Reserve the ticking timestamp's width so it (and "view refresh log") never
   shift as "updated Xs ago" changes length each second. */
#updatedText { display: inline-block; min-width: 9em; text-align: left; }
.rs-sep { color: var(--text-faint); }
.rs-loglink {
  border: 0; background: none; padding: 0; margin: 0; cursor: pointer;
  font: inherit; font-size: 12.5px; font-weight: 600; color: var(--accent-strong);
  white-space: nowrap;
}
.rs-loglink:hover { text-decoration: underline; }
.rs-loglink:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }
.live-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--pos);
  box-shadow: 0 0 0 0 var(--pos-soft);
  animation: pulse 2.4s ease-out infinite;
}
.live-dot.stale { background: var(--warn); animation: none; }
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 var(--pos-soft); }
  70%  { box-shadow: 0 0 0 7px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

/* -------------------------------- KPIs ---------------------------------- */
.kpis {
  display: grid;
  gap: 16px;
  grid-template-columns: 1.65fr 1fr 1fr;
  margin-bottom: 18px;
}
.kpi {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 22px;
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
.kpi::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 4px;
  background: var(--border-strong);
}
.kpi-hero::before { width: 5px; }
.kpi-label {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 650; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--text-muted);
  margin-bottom: 10px;
}
.kpi-label svg { width: 15px; height: 15px; opacity: .8; }
.kpi-value {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.02;
  font-size: clamp(26px, 4.4vw, 34px);
}
.kpi-hero .kpi-value { font-size: clamp(34px, 6.4vw, 52px); }
.kpi-foot {
  margin-top: 10px; font-size: 12.5px; color: var(--text-muted);
  display: flex; align-items: center; gap: 8px; flex-wrap: nowrap;
}
/* One line always — the chip holds its size, the note shrinks/ellipsizes if a
   screen is truly narrow. Prevents the surplus↔shortfall note-length difference
   from changing the card height (which bounced the screen on snapshot nav). */
.kpi-foot .status-chip { flex: none; }
#netNote { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Net position states */
.kpi-hero.surplus::before { background: var(--pos); }
.kpi-hero.surplus .kpi-value { color: var(--pos); }
.kpi-hero.shortfall::before { background: var(--neg); }
.kpi-hero.shortfall .kpi-value { color: var(--neg); }
.kpi-hero.surplus  { background: linear-gradient(120deg, var(--pos-soft), transparent 55%), var(--surface); }
.kpi-hero.shortfall{ background: linear-gradient(120deg, var(--neg-soft), transparent 55%), var(--surface); }

.status-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px; border-radius: 999px;
  font-size: 11px; font-weight: 800; letter-spacing: 0.09em;
  text-transform: uppercase;
}
.status-chip.surplus  { color: var(--pos); background: var(--pos-soft); border: 1px solid color-mix(in srgb, var(--pos) 30%, transparent); }
.status-chip.shortfall{ color: var(--neg); background: var(--neg-soft); border: 1px solid color-mix(in srgb, var(--neg) 35%, transparent); }

.kpi-assets .kpi-value { color: var(--text); }
.kpi-oblig .kpi-value  { color: var(--text); }

/* Clickable KPI cards (open a breakdown popup) */
.kpi-click { cursor: pointer; }
.kpi-click:hover { border-color: var(--accent-ring); }
.kpi-click:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.kpi-info {
  display: inline-flex; align-items: center; margin-left: 4px;
  color: var(--text-faint); opacity: 0.5; transition: opacity .15s, color .15s;
}
.kpi-info svg { width: 14px; height: 14px; }
.kpi-click:hover .kpi-info { opacity: 1; color: var(--accent); }

/* flash on data update */
@keyframes flash {
  0%   { box-shadow: var(--shadow-md), 0 0 0 0 var(--accent-ring); }
  25%  { box-shadow: var(--shadow-md), 0 0 0 3px var(--accent-ring); }
  100% { box-shadow: var(--shadow-md), 0 0 0 0 transparent; }
}
.flash { animation: flash 1.1s ease-out; }

/* ----------------------------- Anomalies -------------------------------- */
.anomalies {
  border: 1px solid var(--warn-border);
  background: var(--warn-soft);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-bottom: 18px;
  box-shadow: var(--shadow-sm);
}
.anomalies-head {
  display: flex; align-items: center; gap: 9px;
  font-weight: 700; font-size: 13px; letter-spacing: 0.02em;
  color: var(--warn-text);
  cursor: pointer; user-select: none; list-style: none;
}
.anomalies-head::-webkit-details-marker { display: none; }
.anomalies-head svg { width: 17px; height: 17px; color: var(--warn); flex: none; }
/* chevron sits at the far right, rotates on open (matches the detail sections) */
/* copy-context button rides at the far right, just left of the chevron */
.anomalies-head .ctx-copy { margin-left: auto; color: var(--warn-text); }
.anomalies-head .ctx-copy svg { color: currentColor; }
.anomalies-head .ctx-copy:hover { background: var(--warn-soft); color: var(--warn-text); }
.anomalies-head .chevron { margin-left: auto; color: var(--warn); }
.anomalies-head .ctx-copy ~ .chevron { margin-left: 2px; }
details.anomalies[open] .anomalies-head .chevron { transform: rotate(180deg); }
/* gap:0 — the rows are separated by a hairline rule instead (below), which
   gives a gentler visual break between findings than whitespace alone. */
.anomalies ul { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 0; }
.anomalies li {
  display: flex; gap: 9px; align-items: flex-start;
  font-size: 13.5px; color: var(--text); line-height: 1.45;
  min-width: 0;
}
/* Subtle divider between findings. Tinted from --warn rather than --warn-border
   so it reads as a whisper inside the amber panel in BOTH themes; a full
   --warn-border here looks like a table. First item gets none. */
.anomalies li + li {
  margin-top: 9px; padding-top: 9px;
  border-top: 1px solid color-mix(in srgb, var(--warn) 22%, transparent);
}
.anomalies li::before {
  content: ""; flex: none; margin-top: 8px;
  width: 5px; height: 5px; border-radius: 50%; background: var(--warn);
}
/* Anomaly prose carries unbreakable tokens — Message-IDs, filenames, txn ids.
   A flex item defaults to min-width:auto, so ONE 76-char Message-ID sets a
   min-content floor wider than a phone viewport, pushing the whole page
   sideways. min-width:0 lets the item shrink; overflow-wrap:anywhere gives the
   token somewhere to break (unlike break-word, `anywhere` also shrinks the
   min-content size, which is what actually clears the floor). The text MUST
   stay wrapped in this span — as a bare text node it becomes an anonymous flex
   item that no selector can reach. */
.anomalies li .an-txt { min-width: 0; overflow-wrap: anywhere; }
/* The bullet's sibling is a COLUMN: the plain line, then the optional Detail
   disclosure on its own line beneath it. Generic (not .anomalies-scoped) because
   the Resolved list reuses it — that li is a flex row (tag beside text), so the
   text and its toggle need a column wrapper or the disclosure sits inline. */
.an-body { min-width: 0; flex: 1; display: grid; gap: 2px; }

/* "Detail" disclosure. width:fit-content keeps the click target on the word
   itself rather than the full row width, so dragging to select text either side
   of it does not toggle the section shut mid-selection. */
.an-more > summary {
  display: inline-flex; align-items: center; gap: 5px;
  width: fit-content; cursor: pointer;
  margin-top: 2px;
  font-size: 12px; font-weight: 600; letter-spacing: 0.01em;
  color: var(--warn-text); opacity: 0.72;
  list-style: none;
}
.an-more > summary::-webkit-details-marker { display: none; }
.an-more > summary:hover { opacity: 1; }
.an-more > summary:focus-visible {
  outline: 2px solid var(--accent-ring); outline-offset: 2px; border-radius: 3px;
}
/* CSS triangle rather than the native marker: the native one cannot be recoloured
   or aligned consistently across engines. Rotates 90deg on open. */
.an-more > summary::before {
  content: ""; flex: none;
  border-left: 5px solid currentColor;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  transition: transform 0.15s ease;
}
.an-more[open] > summary::before { transform: rotate(90deg); }
/* Per-item copy on a Needs-review finding. It rides INSIDE the summary, right
   beside the word "Detail", so the pointer barely moves from the collapser to
   the copy. Hidden until that finding is expanded, so collapsed rows stay
   clean. Sized down from the 26px section buttons to sit on a 12px label
   without stretching the row, and tinted amber so it belongs to the panel
   rather than borrowing the accent-blue hover of the section buttons. */
.an-more > summary .an-copy { display: none; }
.an-more[open] > summary .an-copy {
  display: inline-grid; width: 20px; height: 20px;
  margin-left: 1px; color: var(--warn-text); opacity: 0.5;
}
.an-more[open] > summary .an-copy svg { width: 13px; height: 13px; }
.an-more[open] > summary .an-copy:hover {
  opacity: 1; color: var(--warn-text); background: var(--warn-soft);
}
.an-more[open] > summary .an-copy:focus-visible {
  outline: 2px solid var(--warn); outline-offset: 1px; opacity: 1;
}
.an-detail {
  margin-top: 4px; min-width: 0; overflow-wrap: anywhere;
  font-size: 13px; line-height: 1.5; color: var(--text-muted);
  border-left: 2px solid color-mix(in srgb, var(--warn) 28%, transparent);
  padding-left: 9px;
}
@media (prefers-reduced-motion: reduce) {
  .an-more > summary::before { transition: none; }
}
/* The same disclosure is reused by the dense Ledger Activity sections. Each has
   its own surrounding rhythm, so only the spacing is retuned — never the look. */
.la-recon .an-more, .la-held-list li .an-more { margin-top: 1px; }
.la-recon .an-detail, .la-held-list li .an-detail,
.la-resolved-list .an-detail { font-size: 12.5px; }
/* Inside the posted-entries table the toggle sits under the Description cell.
   The cell is already width-constrained by the table, so the detail must wrap
   rather than widen the column and force a horizontal scroll. */
td.col-desc .an-more { margin-top: 3px; }
td.col-desc .an-detail {
  font-size: 12.5px; white-space: normal; min-width: 0; overflow-wrap: anywhere;
}

/* A detail section whose own rows do not add up to the Obligations row it
   belongs to. Deliberately loud-ish: the headline stays correct in that state,
   so nothing else on the page signals that the snapshot is inconsistent. */
details.section.section-mismatch {
  border-color: var(--warn-border);
  box-shadow: inset 3px 0 0 0 var(--warn);
}
details.section.section-mismatch > summary .sum-total { color: var(--warn-text); }

/* -------------------------------- Columns ------------------------------- */
.cols {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr 1fr;
  align-items: start;
}

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
.card-head {
  display: flex; align-items: center; gap: 10px;
  padding: 15px 18px;
  border-bottom: 1px solid var(--hairline);
}
.card-head svg { width: 17px; height: 17px; color: var(--accent); flex: none; }
.card-head h2 {
  margin: 0; font-size: 14px; font-weight: 700; letter-spacing: -0.01em;
}
.card-total {
  margin-left: auto; font-family: var(--font-mono);
  font-variant-numeric: tabular-nums; font-weight: 650; font-size: 15px;
  letter-spacing: -0.01em;
}
.card-body { padding: 6px 8px 10px; }

/* Subtle per-section "copy context" clipboard button (quiet, like the ⓘ cues) */
.ctx-copy {
  flex: none; display: inline-grid; place-items: center;
  width: 26px; height: 26px; border-radius: 6px;
  border: 0; background: none; padding: 0; margin: 0; cursor: pointer;
  color: var(--text-faint); opacity: 0.5;
  transition: opacity .15s, color .15s, background .15s;
}
.ctx-copy svg { width: 15px; height: 15px; }
.ctx-copy:hover { opacity: 1; color: var(--accent); background: var(--surface-2); }
.ctx-copy:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; opacity: 1; }
.card-head .ctx-copy { margin-left: 2px; }
/* Copy-context button pinned to the top-right corner of each KPI hero card.
   z-index keeps it above the card's ::before accent bar; the click handler
   bails out of the card's own popup so a tap here only copies. */
.kpi-copy { position: absolute; top: 12px; right: 12px; z-index: 2; }

/* Ledger rows */
.ledger { width: 100%; }
.lrow {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 10px;
  border-radius: var(--radius-xs);
}
.lrow + .lrow { border-top: 1px solid var(--hairline); }
.lrow:hover { background: var(--surface-2); }
.lrow .lr-label { display: flex; align-items: center; gap: 10px; min-width: 0; }
.lr-type {
  flex: none; width: 26px; height: 26px; border-radius: 7px;
  display: grid; place-items: center;
  background: var(--surface-3); color: var(--text-muted);
}
.lr-type svg { width: 15px; height: 15px; }
.lr-text { min-width: 0; }
.lr-name {
  font-size: 13.5px; font-weight: 550;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lr-meta { font-size: 11.5px; color: var(--text-faint); }
.lr-amt {
  margin-left: auto; flex: none;
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-size: 14px; font-weight: 600; letter-spacing: -0.01em;
  text-align: right;
}

/* subtotal / in-transit */
.subrow {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 12px; margin: 4px 2px 0;
  font-size: 12.5px; color: var(--text-muted);
  border-top: 1px dashed var(--border);
}
.subrow .num { color: var(--text-muted); }
/* Inline icon (e.g. the in-transit ↓) — size it; without this the raw SVG has
   no intrinsic size and blows up to fill the row. */
.subrow svg { width: 14px; height: 14px; flex: none; vertical-align: -2px; margin-right: 4px; }

/* --------------------------- Detail sections ---------------------------- */
.details-grid {
  margin-top: 16px;
  display: grid;
  gap: 14px;
  grid-template-columns: 1fr 1fr;
  align-items: start;
}
details.section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
details.section[open] { box-shadow: var(--shadow-md); }
details.section > summary {
  list-style: none;
  cursor: pointer;
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px;
  font-weight: 650; font-size: 13.5px;
  user-select: none;
}
details.section > summary::-webkit-details-marker { display: none; }
.sum-icon { width: 17px; height: 17px; color: var(--accent); flex: none; }
.sum-count {
  margin-left: 4px; font-size: 11px; font-weight: 700;
  color: var(--text-muted); background: var(--surface-3);
  border-radius: 999px; padding: 1px 8px;
}
.sum-right { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.sum-total {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-weight: 650; font-size: 13.5px;
}
.chevron { width: 16px; height: 16px; color: var(--text-faint);
  transition: transform .2s ease; flex: none; }
details.section[open] .chevron { transform: rotate(180deg); }
.section-body { padding: 2px 8px 12px; }

/* Tables inside sections (scroll horizontally if narrow) */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.grid {
  width: 100%; border-collapse: collapse; font-size: 13px;
  min-width: 380px;
}
table.grid th {
  text-align: left; font-weight: 600; font-size: 10.5px;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-faint);
  padding: 8px 10px; border-bottom: 1px solid var(--border);
  white-space: nowrap; position: sticky; top: 0;
  background: var(--surface);   /* keep sticky header opaque over scrolling rows */
}
/* Sortable headers — click/Enter/Space to toggle asc/desc */
table.grid.sortable thead th[data-col] {
  cursor: pointer; user-select: none;
  transition: color .12s, background .12s;
}
table.grid.sortable thead th[data-col]:hover { color: var(--accent-strong); background: var(--surface-2); }
table.grid.sortable thead th[data-col][aria-sort="ascending"],
table.grid.sortable thead th[data-col][aria-sort="descending"] { color: var(--accent-strong); }
table.grid.sortable thead th[data-col]:focus-visible {
  outline: 2px solid var(--accent); outline-offset: -2px;
}
.th-sort { margin-left: 4px; font-size: 8px; vertical-align: 1px; }
table.grid td {
  padding: 9px 10px; border-bottom: 1px solid var(--hairline);
  vertical-align: middle;
}
table.grid tr:last-child td { border-bottom: 0; }
table.grid td.r, table.grid th.r { text-align: right; }
.cell-amt {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-weight: 600; white-space: nowrap; letter-spacing: -0.01em;
}
.muted { color: var(--text-muted); }
.faint { color: var(--text-faint); }

.tag {
  display: inline-block; font-size: 10px; font-weight: 700;
  letter-spacing: 0.04em; text-transform: uppercase;
  padding: 2px 7px; border-radius: 5px; white-space: nowrap;
}
.tag-stale { color: var(--neg); background: var(--neg-soft);
  border: 1px solid color-mix(in srgb, var(--neg) 30%, transparent); }
.tag-fresh { color: var(--pos); background: var(--pos-soft);
  border: 1px solid color-mix(in srgb, var(--pos) 26%, transparent); }
.tag-due   { color: var(--warn-text); background: var(--warn-soft);
  border: 1px solid var(--warn-border); }
.row-highlight td { background: var(--accent-soft); }
.row-highlight td:first-child { box-shadow: inset 3px 0 0 var(--accent); }

.subhead {
  padding: 10px 10px 4px; font-size: 11px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted);
}
/* Strong break between grouped tables (e.g. AP "Past due" → "Due within 30
   days"): a bold full-width rule, generous spacing, and a darker heading. */
.subhead-sep {
  margin-top: 20px; padding-top: 16px;
  border-top: 3px solid var(--border-strong);
  font-size: 12.5px; font-weight: 800; color: var(--text);
}
/* Keeps a trailing ⓘ glued to the last word of a wrapping label so the icon
   never lands on a line by itself. */
.nowrap-ico { white-space: nowrap; }
/* Due-date cells stay on one line ("Jul 27", not "Jul" / "27"); the vendor
   column yields the space. */
.col-due { white-space: nowrap; }

.empty {
  padding: 18px 12px; text-align: center; color: var(--text-faint);
  font-size: 13px;
}

/* Payroll components as bars */
.pay-list { display: grid; gap: 8px; padding: 6px 10px 10px; }
.pay-item { display: grid; gap: 5px; }
.pay-top { display: flex; justify-content: space-between; align-items: baseline;
  font-size: 13px; gap: 12px; }
.pay-name { color: var(--text); font-weight: 550; }
.pay-amt { font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-weight: 600; }
.pay-track { height: 6px; border-radius: 999px; background: var(--surface-3);
  overflow: hidden; }
.pay-fill { height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), var(--accent-strong)); }

/* Card balances */
.cards-strip { display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 8px; padding: 8px 10px 12px; }
.cardbal {
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 11px 12px; background: var(--surface-2);
  display: flex; flex-direction: column; gap: 3px;
}
.cardbal .cb-issuer { font-size: 12px; color: var(--text-muted); font-weight: 600;
  display: flex; align-items: center; gap: 7px; }
.cardbal .cb-issuer svg { width: 14px; height: 14px; opacity: .8; }
.cardbal .cb-amt { font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-weight: 650; font-size: 16px; letter-spacing: -0.01em; }

/* --------------------------- Ledger activity ---------------------------- */
#ledgerActivity { display: block; }
.la-card { margin-top: 16px; }
.la-body { padding: 16px; }

.mode-chip {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 3px 10px; border-radius: 999px; white-space: nowrap;
}
.mode-chip.full {
  color: var(--warn-text); background: var(--warn-soft); border: 1px solid var(--warn-border);
}
.mode-chip.report {
  color: var(--text-muted); background: var(--surface-3); border: 1px solid var(--border);
}
/* auto-post: the run was allowed to book, but only high-confidence entries */
.mode-chip.autopilot {
  color: var(--accent); background: var(--accent-soft); border: 1px solid var(--accent-ring);
}

.la-headline { margin-bottom: 4px; }
.la-count {
  font-size: clamp(19px, 3vw, 23px); font-weight: 700; letter-spacing: -0.015em;
  line-height: 1.2; color: var(--text);
  display: flex; align-items: center; gap: 9px;
}
.la-count.calm {
  color: var(--text-muted); font-weight: 600; font-size: clamp(15px, 2.4vw, 17px);
}
.la-count.calm svg { width: 19px; height: 19px; color: var(--pos); flex: none; }
.la-sub { font-size: 12.5px; color: var(--text-faint); margin-top: 4px; }

/* Optional runner instructions callout (muted, wraps; may be up to ~4000 chars) */
.la-instructions {
  margin-top: 14px; padding: 11px 13px;
  border: 1px solid var(--border); background: var(--surface-2);
  border-radius: var(--radius-sm);
}
.la-instructions-head {
  display: flex; align-items: center; gap: 7px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text-muted); margin-bottom: 6px;
}
.la-instructions-head svg { width: 14px; height: 14px; color: var(--text-muted); flex: none; }
.la-instructions-body {
  font-size: 13px; line-height: 1.5; color: var(--text);
  white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word;
}

.la-held {
  margin-top: 16px;
  border: 1px solid var(--warn-border); background: var(--warn-soft);
  border-radius: var(--radius-sm); padding: 13px 15px;
}
.la-held-head {
  display: flex; align-items: center; gap: 8px;
  font-weight: 700; font-size: 13px; color: var(--warn-text); margin-bottom: 10px;
}
.la-held-head svg { width: 16px; height: 16px; color: var(--warn); flex: none; }
.la-held-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.la-held-list li { display: grid; gap: 3px; }
.la-held-top {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
}
.la-held-label { font-weight: 600; font-size: 13.5px; }
.la-held-amt { font-weight: 650; }
.la-held-meta { font-size: 12px; color: var(--text-muted); line-height: 1.5; }

.la-followups { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 8px; }
.la-followups li {
  display: flex; gap: 10px; align-items: flex-start;
  font-size: 13.5px; line-height: 1.5;
}
.la-followups li svg {
  width: 15px; height: 15px; color: var(--accent); flex: none; margin-top: 3px;
}

/* Resolved — this run: calm, positive, informational. Sits at the very bottom of
   Ledger Activity, below Follow-ups. A subtle green so it reads "done, no action
   needed" — deliberately NOT Held's attention-grabbing amber. */
.la-resolved {
  margin-top: 16px;
  border: 1px solid color-mix(in srgb, var(--pos) 22%, transparent);
  background: var(--pos-soft);
  border-radius: var(--radius-sm); padding: 4px 13px 12px;
}
.la-resolved-head { color: var(--pos); padding-left: 0; }
.la-resolved-count {
  display: inline-block; margin-left: 4px; padding: 0 6px; border-radius: 999px;
  font-size: 11px; letter-spacing: 0;
  background: color-mix(in srgb, var(--pos) 16%, transparent); color: var(--pos);
}
.la-resolved-list { list-style: none; margin: 2px 0 0; padding: 0; display: grid; gap: 9px; }
.la-resolved-list li {
  display: flex; gap: 9px; align-items: flex-start;
  font-size: 12.5px; line-height: 1.5; color: var(--text-muted);
}
.tag-resolved {
  flex: none; margin-top: 1px;
  color: var(--pos); background: var(--pos-soft);
  border: 1px solid color-mix(in srgb, var(--pos) 26%, transparent);
}

/* Reconciliations — read-only identifications (informational / neutral) */
.la-recon-list { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 12px; }
.la-recon { display: grid; gap: 4px; }
.la-recon-top {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
}
.la-recon-item { font-weight: 600; font-size: 13.5px; min-width: 0; }
.la-recon-amt { flex: none; font-weight: 650; }
.la-recon-finding { font-size: 12.5px; color: var(--text-muted); line-height: 1.45; }
.la-recon-refs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.ref-chip {
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.02em;
  color: var(--text-muted); background: var(--surface-3);
  border: 1px solid var(--border); border-radius: 5px; padding: 2px 7px;
  white-space: nowrap;
}

/* ----------------------- Clickable rows + info cue ---------------------- */
.lrow-click { cursor: pointer; }
.lr-info {
  display: inline-flex; align-items: center; flex: none; margin-left: 2px;
  color: var(--text-faint); opacity: 0.5;
  transition: opacity .15s, color .15s;
}
.lr-info svg { width: 15px; height: 15px; }
.lrow-click:hover .lr-info,
.lrow-click:focus-visible .lr-info { opacity: 1; color: var(--accent); }
.lrow-click:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

.cardbal-click { cursor: pointer; transition: border-color .15s, background .15s; }
.cardbal-click:hover { border-color: var(--accent-ring); }
.cardbal-click:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.cb-info { margin-left: auto; opacity: 0.55; color: var(--text-faint);
  display: inline-flex; align-items: center; }
.cb-info svg { width: 14px; height: 14px; }
.cardbal-click:hover .cb-info { opacity: 1; color: var(--accent); }

/* ------------------------- Top A/R section tint ------------------------- */
details.section-ar { border-color: var(--accent-ring); }
details.section-ar > summary .sum-icon { color: var(--accent); }
.ar-caption {
  display: flex; gap: 8px; align-items: flex-start;
  margin: 6px 10px 10px; padding: 9px 11px;
  font-size: 12.5px; line-height: 1.45; color: var(--text-muted);
  background: var(--accent-soft); border: 1px solid var(--accent-ring);
  border-radius: var(--radius-sm);
}
.ar-caption svg { width: 15px; height: 15px; color: var(--accent); flex: none; margin-top: 1px; }
/* "Read live from xTuple" note — subtle green to distinguish live data from the snapshot. */
.ar-caption.live-note {
  background: rgba(22, 163, 74, 0.10);
  border-color: rgba(22, 163, 74, 0.34);
}
.ar-caption.live-note svg { color: #16a34a; }
.ar-caption.live-note strong { color: #15803d; }
@media (prefers-color-scheme: dark) {
  .ar-caption.live-note strong { color: #4ade80; }
}
:root[data-theme="dark"] .ar-caption.live-note strong { color: #4ade80; }
:root[data-theme="light"] .ar-caption.live-note strong { color: #15803d; }

/* ------------------------------- Popups --------------------------------- */
body.modal-open { overflow: hidden; }
.popup-overlay {
  position: fixed; inset: 0; z-index: 80;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  background: rgba(9, 13, 22, 0.55);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  animation: overlay-in .16s ease;
}
.popup-overlay[hidden] { display: none; }
@keyframes overlay-in { from { opacity: 0; } }
.popup {
  width: min(480px, 100%);
  max-height: 85vh;
  display: flex; flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  animation: popup-in .18s cubic-bezier(.2,.7,.3,1);
}
@keyframes popup-in { from { opacity: 0; transform: translateY(10px) scale(.98); } }
.popup:focus { outline: none; }
.popup-head {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px; border-bottom: 1px solid var(--hairline); flex: none;
}
.popup-back {
  flex: none; margin-right: 2px; padding: 4px 9px; border-radius: 7px;
  border: 1px solid var(--border); background: var(--surface-2);
  color: var(--text-muted); font: inherit; font-size: 12px; font-weight: 600;
  cursor: pointer; white-space: nowrap; transition: background .15s, color .15s;
}
.popup-back:hover { background: var(--surface-3); color: var(--accent-strong); }
.popup-back:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.popup-title { margin: 0; font-size: 15px; font-weight: 700; letter-spacing: -0.01em;
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  cursor: pointer; }   /* tap to scroll the body back to top */
/* Right-side header group (Stop + Copy) — pushes itself and Close to the right. */
.popup-head-actions { margin-left: auto; flex: none; display: flex; align-items: center; gap: 8px; }
.popup-close {
  flex: none;
  width: 32px; height: 32px; border-radius: 8px;
  display: grid; place-items: center;
  background: var(--surface-2); border: 1px solid var(--border); color: var(--text-muted);
  cursor: pointer; transition: background .15s, color .15s;
}
.popup-close:hover { background: var(--surface-3); color: var(--text); }
.popup-close svg { width: 16px; height: 16px; }
/* Copy-MD icon button in the popup header */
.popup-hbtn {
  flex: none; width: 32px; height: 32px; border-radius: 8px;
  display: grid; place-items: center;
  background: var(--surface-2); border: 1px solid var(--border); color: var(--text-muted);
  cursor: pointer; transition: background .15s, color .15s;
}
.popup-hbtn:hover { background: var(--surface-3); color: var(--accent-strong); }
.popup-hbtn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.popup-hbtn svg { width: 16px; height: 16px; }
/* Stop button reuses .rs-stop; drop the banner's left margin in the header group */
.popup-hstop { margin-left: 0; }
/* The modal body is the ONE and only scroll container for the whole popup. */
.popup-body {
  padding: 14px 16px 16px;
  flex: 1 1 auto; min-height: 0;
  overflow-y: auto; overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

.kv-list { display: grid; gap: 0; }
.kv {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  padding: 8px 0; border-bottom: 1px solid var(--hairline);
}
.kv:last-child { border-bottom: 0; }
/* Group divider: a stronger, differently-coloured rule ABOVE the row so a
   kv-list reads as blocks at a glance. The -1px pulls it over the preceding
   row's hairline so only the accent rule shows (no doubled line). */
.kv.kv-sep {
  border-top: 1px solid var(--accent-ring);
  margin-top: -1px;
  padding-top: 13px;
}
.kv-k { font-size: 13px; color: var(--text-muted); min-width: 0; }
.kv-v {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-weight: 600; font-size: 13.5px; text-align: right; letter-spacing: -0.01em;
  min-width: 0; overflow-wrap: anywhere;
}

.popup-note {
  margin-top: 12px; padding: 10px 12px; border-radius: var(--radius-sm);
  font-size: 12.5px; line-height: 1.45;
  background: var(--accent-soft); border: 1px solid var(--accent-ring); color: var(--text);
}
.popup-note.ok {
  background: var(--pos-soft);
  border-color: color-mix(in srgb, var(--pos) 28%, transparent);
}
.popup-note.warn {
  background: var(--warn-soft); border-color: var(--warn-border);
  color: var(--warn-text); font-weight: 550;
}
.popup-subhead {
  margin: 16px 0 8px; font-size: 11px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted);
}

/* Popup lead stats (customer balance + open-invoice count) */
.popup-lead {
  display: flex; flex-wrap: wrap; gap: 8px 26px;
  padding: 2px 0 12px; margin-bottom: 6px;
  border-bottom: 1px solid var(--hairline);
}
.pl-stat { display: flex; flex-direction: column; gap: 2px; }
.pl-k {
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--text-muted);
}
.pl-v {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-weight: 650; font-size: 15px; letter-spacing: -0.01em;
}

/* Clickable Top-AR + Pending in/out rows */
tr.ar-row, tr.pend-row, tr.drill-row { cursor: pointer; }
tr.ar-row:hover td, tr.pend-row:hover td, tr.drill-row:hover td { background: var(--surface-2); }
tr.ar-row:focus-visible,
tr.pend-row:focus-visible,
tr.drill-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.ar-info, .pend-info { margin-left: 5px; }
.ar-info svg, .pend-info svg { width: 14px; height: 14px; }
tr.ar-row:hover .ar-info,
tr.pend-row:hover .pend-info,
tr.drill-row:hover .ar-info { opacity: 1; color: var(--accent); }

/* Pending-row popup: bank descriptor + plain note */
.popup-descriptor { margin-top: 12px; display: flex; flex-direction: column; gap: 3px; }
.pd-k {
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--text-muted);
}
.pd-v {
  font-family: var(--font-mono); font-size: 12.5px; color: var(--text-muted);
  word-break: break-word; line-height: 1.4;
}
.popup-plain-note {
  margin-top: 12px; font-size: 12.5px; line-height: 1.5; color: var(--text-muted);
}
/* An authored popup note can carry the same "Detail" disclosure as the rest of
   the report. Each box keeps its own colour: the amber card note inherits
   --warn-text from .an-more, the neutral plain note is retuned to muted so the
   toggle does not read as a warning in a calm box. */
.popup-note .an-more, .popup-plain-note .an-more { margin-top: 7px; }
.popup-note .an-detail, .popup-plain-note .an-detail {
  font-size: 12.5px; font-weight: 400;
}
.popup-note.warn .an-detail {
  color: var(--warn-text); opacity: 0.85;
  border-left-color: color-mix(in srgb, var(--warn) 34%, transparent);
}
.popup-plain-note .an-more > summary { color: var(--text-muted); }
/* The per-note copy button inherits the amber tint from the Needs-review rule;
   inside the neutral pending-item note that would read as a warning, so it is
   returned to muted here. The amber card note keeps the amber button. */
.popup-plain-note .an-more[open] > summary .an-copy { color: var(--text-muted); }
.popup-plain-note .an-more[open] > summary .an-copy:hover {
  color: var(--text-muted); background: var(--surface-2);
}
.popup-plain-note .an-detail {
  color: var(--text-muted);
  border-left-color: color-mix(in srgb, var(--text-muted) 30%, transparent);
}
.popup-note-list {
  margin: 12px 0 0; padding-left: 18px;
  font-size: 12.5px; line-height: 1.5; color: var(--text-muted);
}
.popup-note-list li { margin: 5px 0; }
.popup-note-list li:first-child { margin-top: 0; }

/* Refresh-data dialog (optional instructions before a run) */
.rf-intro { margin: 0 0 14px; font-size: 13.5px; color: var(--text-muted); line-height: 1.5; }
.rf-label {
  display: block; font-size: 12px; font-weight: 600; color: var(--text-muted);
  margin-bottom: 6px; letter-spacing: 0.02em;
}
.rf-textarea {
  width: 100%; min-height: 92px; resize: vertical;
  padding: 10px 12px; font-family: inherit; font-size: 14px; line-height: 1.5;
  color: var(--text); background: var(--surface-2);
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
}
.rf-textarea:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-ring); background: var(--surface);
}
.rf-charnote {
  margin-top: 6px; text-align: right; font-size: 11px;
  color: var(--text-faint); font-variant-numeric: tabular-nums;
}
/* Auto-post switch row. Neutral when off; tinted "armed" when on, because the
   run will then write real journal entries to the ledger. */
.rf-switchrow {
  display: flex; align-items: flex-start; gap: 12px;
  margin-top: 16px; padding: 12px 13px;
  border: 1px solid var(--hairline); border-radius: var(--radius-xs);
  background: var(--surface-2); cursor: pointer; user-select: none;
  transition: background .15s, border-color .15s;
}
.rf-switchrow.armed {
  background: var(--accent-soft); border-color: var(--accent-ring);
}
.rf-switchtext { min-width: 0; }
.rf-switchlabel {
  display: block; font-size: 13px; font-weight: 650; color: var(--text);
}
.rf-switchhint {
  margin-top: 3px; font-size: 11.5px; line-height: 1.45; color: var(--text-muted);
}
.rf-switchrow.armed .rf-switchhint { color: var(--text); }

.switch {
  flex: none; position: relative; margin-top: 1px;
  width: 40px; height: 23px; padding: 0; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--border); background: var(--surface-3);
  transition: background .16s ease, border-color .16s ease;
}
.switch .switch-knob {
  position: absolute; top: 2px; left: 2px;
  width: 17px; height: 17px; border-radius: 50%;
  background: var(--surface); box-shadow: 0 1px 2px rgba(0,0,0,.28);
  transition: transform .16s ease;
}
.switch.on { background: var(--accent); border-color: var(--accent); }
.switch.on .switch-knob { transform: translateX(17px); }
.switch:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Agent selector (Fable leader / Codex / Grok advisor). Three-position
   segmented control; left = leader. Advisor picks highlighted when chosen. */
.rf-orch { margin-top: 16px; }
.rf-orch-label {
  font-size: 13px; font-weight: 650; color: var(--text); margin-bottom: 8px;
}
.rf-seg {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px;
  padding: 4px; border: 1px solid var(--hairline); border-radius: var(--radius-xs);
  background: var(--surface-2);
}
.rf-seg-btn {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 9px 6px; border: 1px solid transparent; border-radius: calc(var(--radius-xs) - 2px);
  background: transparent; color: var(--text-muted); cursor: pointer;
  font-size: 12.5px; font-weight: 650; line-height: 1.15; text-align: center;
  transition: background .15s, color .15s, border-color .15s;
}
.rf-seg-btn:hover:not(.on) { color: var(--text); background: var(--surface-3); }
.rf-seg-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.rf-seg-sub { font-size: 10px; font-weight: 500; color: var(--text-muted); letter-spacing: .01em; }
.rf-seg-btn.on {
  background: var(--surface); color: var(--accent-strong);
  border-color: var(--accent-ring); box-shadow: 0 1px 2px rgba(0,0,0,.12);
}
.rf-seg-btn.on .rf-seg-sub { color: var(--accent-strong); }
/* Advisor picks (Codex/Grok) read as a deliberate, non-default choice. */
.rf-seg-btn[data-orch="codex"].on,
.rf-seg-btn[data-orch="grok"].on {
  background: var(--accent-soft); border-color: var(--accent-ring);
}
.rf-orch-hint {
  margin-top: 7px; font-size: 11.5px; line-height: 1.45; color: var(--text-muted);
}

.rf-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px; }

.txn-list { list-style: none; margin: 0; padding: 0; display: grid; }
.txn {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  padding: 8px 0; border-bottom: 1px solid var(--hairline);
}
.txn:last-child { border-bottom: 0; }
/* Description wraps (never clips), amount stays pinned right — no horizontal scroll. */
.txn-main { display: flex; flex-direction: column; gap: 1px; flex: 1 1 auto; min-width: 0; }
.txn-desc {
  font-size: 13px; white-space: normal;
  overflow-wrap: anywhere; word-break: break-word;
}
.txn-date { font-size: 11.5px; }
.txn-amt {
  font-size: 13.5px; font-weight: 650;
  flex: none; white-space: nowrap; text-align: right;
}

/* Pending transactions box (amber, like the anomalies styling) */
.pending-box {
  margin-top: 14px; padding: 10px 13px 4px;
  border: 1px solid var(--warn-border); background: var(--warn-soft);
  border-radius: var(--radius-sm);
}
.pending-box-head {
  display: flex; align-items: center; gap: 7px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--warn-text); margin-bottom: 2px;
}
.pending-box-head svg { width: 14px; height: 14px; color: var(--warn); flex: none; }
.txn-pending .txn { border-bottom-color: color-mix(in srgb, var(--warn) 22%, transparent); }
.txn-pending .txn:last-child { border-bottom: 0; }
.tag-pending {
  margin-left: 7px; vertical-align: 1px;
  color: var(--warn-text);
  background: color-mix(in srgb, var(--warn) 15%, transparent);
  border: 1px solid var(--warn-border);
}

/* AR popup invoice table: fits the modal (no forced min-width), cells wrap,
   amount stays pinned — flows inside the single modal-body scroll. */
.grid.ar-invoices { min-width: 0; }
.grid.ar-invoices td { overflow-wrap: anywhere; word-break: break-word; }
/* Top-AR past-due flag column: left-aligned so every pill starts at the same x. */
td.ar-flag { text-align: left; white-space: nowrap; width: 1%; }
.grid.ar-invoices td.cell-amt { white-space: nowrap; }

.popup-total {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  margin-top: 10px; padding-top: 10px; border-top: 2px solid var(--border);
  font-weight: 700; font-size: 13.5px;
}
.popup-total .num { font-weight: 700; }

/* --------------------------- Layout edit mode --------------------------- */
.edit-banner {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; margin-bottom: 16px;
  border-radius: var(--radius-sm);
  background: var(--accent-soft); border: 1px solid var(--accent-ring);
  font-size: 13px; color: var(--text);
}
.edit-banner .eb-ico { display: inline-flex; flex: none; color: var(--accent); }
.edit-banner .eb-ico svg { width: 16px; height: 16px; }
.eb-text { line-height: 1.45; }
.eb-text strong { font-weight: 700; }
.eb-text em { font-style: normal; font-weight: 600; color: var(--accent-strong); }

/* Editable (draggable) obligation rows + card items */
.lrow-edit {
  cursor: grab; gap: 10px;
  border: 1px dashed transparent; border-radius: var(--radius-xs);
  background: var(--surface-2);
}
.lrow-edit + .lrow-edit { margin-top: 6px; border-top: 1px dashed transparent; }
.lrow-edit:hover { background: var(--surface-3); }
.lrow-edit:active { cursor: grabbing; }
.lrow-edit .lr-amt { margin-left: auto; }

.drag-handle {
  display: inline-flex; align-items: center; flex: none;
  color: var(--text-faint); cursor: grab; touch-action: none;
}
.drag-handle svg { width: 17px; height: 17px; }

.reorder-btns { display: flex; gap: 3px; flex: none; margin-left: 8px; }
.reorder-btn {
  width: 28px; height: 28px; display: grid; place-items: center;
  border: 1px solid var(--border); background: var(--surface);
  border-radius: 6px; color: var(--text-muted); cursor: pointer;
  transition: background .12s, color .12s, border-color .12s;
}
.reorder-btn:hover { background: var(--surface-3); color: var(--text); border-color: var(--border-strong); }
.reorder-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.reorder-btn svg { width: 14px; height: 14px; }

.dragging { opacity: 0.45; }
.drop-before { box-shadow: inset 0 3px 0 var(--accent); }
.drop-after  { box-shadow: inset 0 -3px 0 var(--accent); }

/* Card items stack (one per row) while editing for clear drop targets */
.cards-strip-edit { grid-template-columns: 1fr; gap: 6px; }
.cardbal-edit {
  flex-direction: row; align-items: center; gap: 10px;
  cursor: grab; border-style: dashed;
}
.cardbal-edit:active { cursor: grabbing; }
.cardbal-edit .cb-main {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex: 1 1 auto; min-width: 0;
}
.cardbal-edit .cb-issuer { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* ----------------------------- Print / PDF ------------------------------ */
.print-only { display: none; }

@media print {
  /* Force a readable light palette regardless of the on-screen theme. */
  :root, :root[data-theme="dark"], :root[data-theme="light"] {
    --canvas: #ffffff; --surface: #ffffff; --surface-2: #ffffff; --surface-3: #f1f2f5;
    --border: #b9bec8; --border-strong: #9aa1ad; --hairline: #dcdfe6;
    --text: #14181f; --text-muted: #454c58; --text-faint: #6b7280;
    --accent: #274a94; --accent-strong: #1f3d7d; --accent-soft: #eef1fb; --accent-ring: #b7c3e6;
    --pos: #0a7a41; --pos-soft: #e7f4ec;
    --neg: #b3271e; --neg-soft: #fbeceb;
    --warn: #8a5a00; --warn-text: #6a4600; --warn-soft: #fbf3e2; --warn-border: #e7cfa0;
  }
  html, body {
    background: #fff !important;
    background-image: none !important;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  .masthead, .reportbar, .toast-host, .popup-overlay,
  .refresh-strip { display: none !important; }
  .wrap { max-width: none; padding: 0 22px 8px; }
  .print-only { display: block !important; }

  #printHeader { margin-bottom: 16px; padding-bottom: 10px; border-bottom: 2px solid #222; }
  .print-title { font-size: 21px; font-weight: 800; letter-spacing: -0.01em; }
  .print-sub { font-size: 13px; color: #444; margin-top: 2px; }
  .print-h2 {
    font-size: 15px; font-weight: 700; margin: 20px 0 8px;
    padding-bottom: 4px; border-bottom: 1px solid #999;
  }
  .print-block { break-inside: avoid; margin-bottom: 12px; }
  .print-block h3 { font-size: 13px; margin: 0 0 4px; }

  /* Stack the responsive grids for paper */
  .kpis, .cols, .details-grid { display: block !important; }
  .kpi, .card, details.section, .la-card, .anomalies, .print-block {
    box-shadow: none !important; break-inside: avoid; margin-bottom: 12px;
  }
  /* Force every collapsible fully open (JS also sets [open]) */
  details.section > *:not(summary),
  details.an-more > *:not(summary),
  details.anomalies > *:not(summary) { display: block !important; }
  /* Keep the "Detail" label on paper — it marks where the deep write-up starts. */
  .an-more > summary { opacity: 1 !important; }
  details.section .chevron, details.anomalies .chevron { display: none !important; }
  .table-scroll { overflow: visible !important; }
  .lr-info, .cb-info, .live-dot { display: none !important; }
  .drag-handle, .reorder-btns, .edit-banner { display: none !important; }
  a { color: inherit; text-decoration: none; }
}

/* -------------------------------- Footer -------------------------------- */
.foot {
  margin-top: 22px; padding-top: 16px;
  border-top: 1px solid var(--border);
  display: flex; align-items: center; gap: 10px 22px; flex-wrap: wrap;
  font-size: 12px; color: var(--text-muted);
}
.sync-item { display: inline-flex; align-items: center; gap: 7px; }
.sync-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--pos); flex: none; }
.sync-dot.stale { background: var(--warn); }
.sync-dot.old { background: var(--neg); }
.foot-gen { margin-left: auto; font-variant-numeric: tabular-nums; }

/* -------------------------------- Toast --------------------------------- */
.toast-host {
  position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%);
  z-index: 90; display: grid; gap: 8px; width: min(440px, calc(100vw - 32px));
}
.toast {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 14px; border-radius: var(--radius-sm);
  background: var(--surface); border: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  font-size: 13.5px;
  animation: toast-in .22s ease;
}
.toast svg { width: 17px; height: 17px; flex: none; margin-top: 1px; }
.toast.info svg { color: var(--accent); }
.toast.error { border-color: color-mix(in srgb, var(--neg) 40%, var(--border)); }
.toast.error svg { color: var(--neg); }
.toast.success svg { color: var(--pos); }
.toast.warn svg { color: var(--warn); }
.toast-msg { min-width: 0; }
.toast-msg strong { display: block; margin-bottom: 1px; }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } }

/* Progress inline banner during refresh */
.refresh-strip {
  display: none;
  align-items: center; gap: 10px;
  padding: 10px 14px; margin-bottom: 16px;
  border-radius: var(--radius-sm);
  background: var(--accent-soft);
  border: 1px solid var(--accent-ring);
  font-size: 13px; color: var(--text);
}
.refresh-strip.show { display: flex; }
.refresh-strip svg { width: 16px; height: 16px; color: var(--accent); flex: none; }
.refresh-strip .rs-progress { color: var(--text-muted); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Clickable: opens the live activity log */
.refresh-strip { cursor: pointer; transition: background .15s, border-color .15s; }
.refresh-strip:hover { background: color-mix(in srgb, var(--accent) 16%, var(--surface)); }
.refresh-strip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.rs-hint {
  margin-left: auto; flex: none;
  color: var(--accent-strong); font-weight: 700; font-size: 12px; white-space: nowrap;
}
/* Live run timer — monospace tabular so ticking digits don't jitter */
.rs-timer {
  flex: none; font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-size: 12px; color: var(--text-muted); white-space: nowrap;
}
.rs-timer:empty { display: none; }
.popup-timer {
  flex: 0 1 auto; min-width: 0; font-family: var(--font-mono);
  font-variant-numeric: tabular-nums; font-size: 12px; color: var(--text-faint);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.popup-timer:empty { display: none; }
/* DATA popups: title yields space before the timer (both can ellipsize) and the
   action buttons never shrink — a compact single-line header. */
.popup-title { flex-shrink: 8; }
@media (max-width: 560px) {
  .popup-head { gap: 8px; }
  .popup-timer { font-size: 11px; }
}

/* ACTIVITY-LOG popup ONLY: the header wraps to three tiers.
   Row 1: title (left) + Stop (right, on its own, away from the minor icons).
   Row 2: the full timer line (elapsed · avg · time-left) — NEVER truncated.
   Row 3: Copy + Close, dropped beneath the text. */
.popup--log .popup-head { flex-wrap: wrap; row-gap: 10px; }
.popup--log .popup-title {
  order: 1; flex: 1 1 auto;       /* grows to push Stop to the right edge */
  white-space: normal; overflow: visible; text-overflow: clip;
}
.popup--log .popup-hstop {
  order: 2; margin-left: auto;    /* row 1, far right — Stop alone on the top line */
}
.popup--log .popup-timer {
  order: 3; flex: 1 1 100%;       /* row 2 — full timer line on its own row */
  overflow: visible; white-space: nowrap; text-overflow: clip; font-size: 12px;
}
.popup--log .popup-head-actions {
  order: 4; flex: 1 1 100%;       /* row 3 — copy + close, beneath the text */
  margin-left: 0; justify-content: flex-end;
}
@media (max-width: 560px) {
  .popup--log .popup-timer { font-size: 12px; }
}
/* Stop button on the banner — small, danger-tinted, distinct from "View activity" */
.rs-stop {
  flex: none; margin-left: 10px;
  padding: 3px 11px; border-radius: 6px;
  font: inherit; font-size: 12px; font-weight: 700; white-space: nowrap;
  cursor: pointer;
  color: var(--neg); background: var(--neg-soft);
  border: 1px solid color-mix(in srgb, var(--neg) 35%, transparent);
  transition: background .12s, color .12s;
}
.rs-stop:hover { background: color-mix(in srgb, var(--neg) 18%, var(--surface)); }
.rs-stop:focus-visible { outline: 2px solid var(--neg); outline-offset: 2px; }

/* ------------------- Live refresh-activity log popup -------------------- */
.popup-body-log { font-variant-numeric: normal; }
.log-view { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; font-family: var(--font-mono); font-size: 12px; line-height: 1.5; }
/* A grid column defaults to its widest item's max-content, so one wide table
   (Grok/payload) blows the whole log past the popup and it clips. minmax(0,1fr)
   above caps the column at the container width; min-width:0 lets each row shrink
   below its content so wide tables/code scroll INTERNALLY instead of overflowing. */
.log-view > * { min-width: 0; max-width: 100%; }
.log-row { white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; }
.log-sys { color: var(--text-faint); }
.log-text { color: var(--text); }
.log-tool-name { color: var(--accent-strong); font-weight: 700; }
.log-tool-arg { color: var(--text-muted); }
.log-result { color: var(--text-faint); }
.log-final {
  position: relative;
  margin-top: 6px; padding: 9px 34px 9px 11px; border-radius: var(--radius-xs);
  background: var(--pos-soft);
  border: 1px solid color-mix(in srgb, var(--pos) 28%, transparent);
  color: var(--text); font-weight: 600;
}
.log-final-text { display: block; white-space: pre-wrap; }
.log-final-copy {
  position: absolute; top: 6px; right: 6px;
  display: inline-grid; place-items: center;
  width: 24px; height: 24px; border-radius: 6px;
  border: 0; background: none; padding: 0; margin: 0; cursor: pointer;
  color: var(--text-faint); opacity: 0.55;
  transition: opacity .15s, color .15s, background .15s;
}
.log-final-copy svg { width: 14px; height: 14px; }
.log-final-copy:hover { opacity: 1; color: var(--pos); background: color-mix(in srgb, var(--pos) 12%, transparent); }
.log-final-copy:focus-visible { outline: 2px solid var(--pos); outline-offset: 1px; opacity: 1; }

/* Advisor report — a collapsed line in the log; click the summary to expand. */
.log-advisor {
  margin: 6px 0; border: 1px solid var(--accent-ring); border-radius: var(--radius-xs);
  background: var(--accent-soft);
  min-width: 0; max-width: 100%; box-sizing: border-box;
}
.log-advisor-head {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; cursor: pointer; user-select: none; list-style: none;
  font-size: 12.5px; font-weight: 650; color: var(--text);
}
.log-advisor-head::-webkit-details-marker { display: none; }
.log-advisor-head .chev { color: var(--accent); transition: transform .15s; flex: none; }
.log-advisor[open] .log-advisor-head .chev { transform: rotate(90deg); }
.log-advisor-bytes { color: var(--text-muted); font-weight: 500; }
.log-advisor-copy {
  margin-left: auto; flex: none; display: inline-grid; place-items: center;
  width: 24px; height: 24px; border-radius: 6px; border: 0; background: none;
  padding: 0; cursor: pointer; color: var(--text-faint); opacity: 0.6;
  transition: opacity .15s, color .15s, background .15s;
}
.log-advisor-copy svg { width: 14px; height: 14px; }
.log-advisor-copy:hover { opacity: 1; color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.log-advisor-body {
  margin: 0; padding: 10px 12px; border-top: 1px solid var(--accent-ring);
  max-height: 460px; overflow: auto;
  font-family: var(--font-mono); font-size: 12px; line-height: 1.5;
  white-space: pre-wrap; word-break: break-word; color: var(--text);
}
/* Rendered-Markdown variant (pretty): headings, tables, lists, bold, code. */
.log-advisor-body.md {
  white-space: normal; font-family: var(--font-sans); font-size: 12.5px; line-height: 1.55;
}
.log-advisor-body.md .md-h {
  margin: 12px 0 6px; font-weight: 750; letter-spacing: -0.01em; color: var(--text);
}
.log-advisor-body.md h2.md-h { font-size: 14px; }
.log-advisor-body.md h3.md-h { font-size: 13.5px; }
.log-advisor-body.md h4.md-h, .log-advisor-body.md h5.md-h, .log-advisor-body.md h6.md-h { font-size: 12.5px; }
.log-advisor-body.md .md-h:first-child { margin-top: 0; }
.log-advisor-body.md .md-p { margin: 6px 0; }
.log-advisor-body.md .md-ul { margin: 6px 0; padding-left: 18px; }
.log-advisor-body.md .md-ul li { margin: 3px 0; }
.log-advisor-body.md strong { font-weight: 700; }
.log-advisor-body.md code {
  font-family: var(--font-mono); font-size: 11.5px;
  background: var(--surface-3); border-radius: 4px; padding: 1px 5px;
}
.log-advisor-body.md .md-tablewrap { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 8px 0; }
.log-advisor-body.md .md-table {
  /* natural width so a wide table scrolls inside .md-tablewrap; min-width:100%
     keeps a narrow table full-bleed. */
  border-collapse: collapse; width: max-content; min-width: 100%; max-width: none;
  font-size: 11.5px; font-variant-numeric: tabular-nums;
}
.log-advisor-body.md .md-table th,
.log-advisor-body.md .md-table td {
  border: 1px solid var(--hairline); padding: 4px 8px; text-align: left; vertical-align: top;
  overflow-wrap: anywhere; word-break: break-word;   /* break long ids/strings */
}
.log-advisor-body.md .md-table th {
  background: var(--surface-2); font-weight: 700; white-space: nowrap;
}
.log-advisor-body.md .md-table tr:nth-child(even) td { background: color-mix(in srgb, var(--surface-2) 45%, transparent); }
.log-advisor-body.md .md-pre {
  margin: 8px 0; padding: 10px 12px; border-radius: 6px;
  background: var(--surface-3); border: 1px solid var(--hairline);
  max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch;
}
.log-advisor-body.md .md-pre code {
  background: none; padding: 0; border-radius: 0;
  font-family: var(--font-mono); font-size: 11px; line-height: 1.5;
  white-space: pre; color: var(--text);
}
/* Payload block reads as an INPUT (amber), distinct from advisor reports (blue). */
.log-payload { border-color: var(--warn-border); background: var(--warn-soft); }
.log-payload .log-advisor-head .chev { color: var(--warn); }
.log-payload .log-advisor-body { border-top-color: var(--warn-border); }
.log-foot { margin-top: 12px; }
.log-badge {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 11px; border-radius: 999px; font-size: 12px; font-weight: 700;
}
.log-badge svg { width: 14px; height: 14px; }
.log-badge.ok {
  color: var(--pos); background: var(--pos-soft);
  border: 1px solid color-mix(in srgb, var(--pos) 30%, transparent);
}
.log-badge.err {
  color: var(--neg); background: var(--neg-soft);
  border: 1px solid color-mix(in srgb, var(--neg) 35%, transparent);
}
.log-badge.stopped {
  color: var(--text-muted); background: var(--surface-3);
  border: 1px solid var(--border);
}

/* Skeleton loading */
.skeleton { position: relative; color: transparent !important; }
.skeleton::after {
  content: ""; position: absolute; inset: 0;
  border-radius: 6px;
  background: linear-gradient(90deg, var(--surface-2), var(--surface-3), var(--surface-2));
  background-size: 200% 100%;
  animation: shimmer 1.3s linear infinite;
}
@keyframes shimmer { to { background-position: -200% 0; } }

/* -------------------------------- Login --------------------------------- */
body.login-page {
  display: grid; place-items: center; padding: 24px;
}
.login-card {
  width: 100%; max-width: 400px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: var(--shadow-lg);
  padding: 34px 30px 30px;
  animation: rise .4s cubic-bezier(.2,.7,.3,1);
}
@keyframes rise { from { opacity: 0; transform: translateY(12px); } }
.login-brand {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  margin-bottom: 22px; text-align: center;
}
.login-brand .brand-mark { width: 52px; height: 52px; font-size: 20px; border-radius: 14px; }
.login-brand h1 { margin: 0; font-size: 20px; font-weight: 700; letter-spacing: -0.01em; }
.login-brand p { margin: 0; font-size: 13px; color: var(--text-muted);
  letter-spacing: 0.03em; text-transform: uppercase; }
.field { margin-bottom: 14px; }
.field label {
  display: block; font-size: 12px; font-weight: 600; color: var(--text-muted);
  margin-bottom: 6px; letter-spacing: 0.02em;
}
.field input {
  width: 100%; min-height: 44px;
  padding: 10px 13px;
  font-family: inherit; font-size: 15px; color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.field input:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-ring);
  background: var(--surface);
}
.login-card .btn-accent { width: 100%; margin-top: 6px; }
.login-error {
  display: none;
  align-items: center; gap: 8px;
  margin-bottom: 14px; padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: var(--neg-soft);
  border: 1px solid color-mix(in srgb, var(--neg) 35%, transparent);
  color: var(--neg); font-size: 13px; font-weight: 550;
}
.login-error.show { display: flex; }
.login-error svg { width: 16px; height: 16px; flex: none; }
.login-foot { margin-top: 18px; text-align: center; font-size: 11.5px;
  color: var(--text-faint); letter-spacing: 0.02em; }

/* ------------------------------ Responsive ------------------------------ */
@media (max-width: 940px) {
  .kpis { grid-template-columns: 1fr; }
  .kpi-hero { order: -1; }
  .cols { grid-template-columns: 1fr; }
  .details-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  /* Safe-area insets fold into the existing mobile padding, so an installed
     iOS home-screen web app (standalone) clears the notch / status bar / home
     indicator. env(...) is 0 in normal browsers and on non-notch devices, so
     this is a no-op everywhere except the installed app — nothing else moves. */
  .wrap {
    padding: 0 max(14px, env(safe-area-inset-right))
             calc(48px + env(safe-area-inset-bottom))
             max(14px, env(safe-area-inset-left));
  }
  .masthead-inner {
    padding: calc(10px + env(safe-area-inset-top))
             max(14px, env(safe-area-inset-right)) 10px
             max(14px, env(safe-area-inset-left));
  }
  .reportbar { padding: 20px 2px 14px; }
  .updated { margin-left: 0; width: 100%; }
  .cards-strip { grid-template-columns: 1fr; }
  .brand-sub { display: none; }
  .user-name { max-width: 92px; }
  .btn .btn-label-lg { display: none; }

  /* Refresh rides the brand row, pinned hard right (top-right corner). The
     tool cluster (snapshot nav + user chip) drops to its own full-width line
     below — so Refresh is never shoved onto a third row. min-width still holds
     the button steady through the "data" ↔ "Refreshing…" swap. */
  #refreshBtn { order: 0; margin-left: auto; }
  .header-tools { order: 5; margin-left: 0; flex: 1 0 100%; }
  /* The brand claims a flex-basis of 0 and grows into whatever space the
     fixed-width button leaves — so the button is reserved FIRST and can never
     be wrapped onto a second row, in any label state. The title ellipsis-
     truncates only if the phone is genuinely too narrow to show it whole. */
  .brand { flex: 1 1 0; }
  .brand-text { overflow: hidden; }
  .brand-title { overflow: hidden; text-overflow: ellipsis; }

  /* AP drill-down popups (past due / due-30): drop the Doc # column on mobile
     so Vendor / Due / Amount get the room they need. Doc # still shows on
     desktop and in the copied Markdown. */
  .col-doc { display: none; }

  /* Ledger Activity "Posted entries" on a phone: reflow each row into a card.
     Journal # and Date sit on the top line; Description spans the full width
     beneath them; the Amount is its own column, vertically centered, never
     sharing space with the description text. The header mirrors the data —
     JOURNAL # / DATE on top, DESCRIPTION beneath. No horizontal scroll, so
     there's nothing to bounce. */
  table.grid.la-posted { min-width: 0 !important; display: block; width: 100%; }
  table.grid.la-posted thead,
  table.grid.la-posted tbody { display: block; width: 100%; }
  table.grid.la-posted th,
  table.grid.la-posted td {
    display: block; border: 0; padding: 0; position: static; white-space: normal;
  }
  table.grid.la-posted tr {
    display: grid;
    grid-template-columns: max-content 1fr max-content;
    grid-template-areas: "jrnl date amt" "desc desc amt";
    column-gap: 12px; row-gap: 3px;
    align-items: center;
    padding: 11px 2px;
    border-bottom: 1px solid var(--hairline);
  }
  table.grid.la-posted tbody tr:last-child { border-bottom: 0; }
  table.grid.la-posted .col-jrnl { grid-area: jrnl; }
  table.grid.la-posted .col-date { grid-area: date; justify-self: start; }
  table.grid.la-posted .col-desc {
    grid-area: desc; white-space: normal; overflow-wrap: anywhere;
  }
  table.grid.la-posted .col-amt { grid-area: amt; text-align: right; white-space: nowrap; }
  /* Doc + Account stay out of the phone layout (still in the copied Markdown).
     Scoped high enough to beat the block rule above. */
  table.grid.la-posted .col-doc,
  table.grid.la-posted .col-acct { display: none; }

  /* Ledger Activity header: the wide AUTO-POST badge can't share the row with
     the title on a phone — it overflowed the card and crushed the title into a
     narrow multi-line column. Let the head wrap so the title keeps its own line
     and the badge sits beneath it, left-aligned. */
  .la-card .card-head { flex-wrap: wrap; row-gap: 8px; }
  .la-card .mode-chip { margin-left: 0; }

  /* AP drill-down tables: drop the 380px min-width so the table fits the dialog
     and the vendor name wraps to two lines instead of shoving the amount column
     off-screen. It still scrolls horizontally if a cell truly can't fit. */
  table.grid.fit { min-width: 0 !important; }   /* beat any inline min-width */
  table.grid.fit td:first-child { white-space: normal; overflow-wrap: anywhere; }
  /* Outstanding chks/ACH tables: drop the Status column on a phone so
     Check / Vendor / Date / Amount fit without a horizontal scroll (the table
     still scrolls if a screen is truly too narrow). Status stays on desktop. */
  .col-status { display: none; }

  /* chks/ACH table, tightened for a phone: shrink to fit, keep the check
     number on ONE line, wrap the vendor/item instead, and LEFT-justify the
     Amount column (header + cells) so the dollars pack left and stay visible
     rather than being pushed off the right edge. */
  table.grid.chkach { min-width: 0 !important; }
  table.grid.chkach th, table.grid.chkach td { padding-left: 7px; padding-right: 7px; }
  table.grid.chkach th:first-child,
  table.grid.chkach td:first-child { white-space: nowrap; }          /* check # never breaks */
  table.grid.chkach td:nth-child(2) { white-space: normal; overflow-wrap: anywhere; } /* vendor/item wraps */
  /* KPI drill-downs (Total liquid assets / Total obligations / payroll): shrink
     to fit, let the label wrap, and drop its "(detail)" to a second line. */
  table.grid.kpi2 { min-width: 0 !important; }
  table.grid.kpi2 th:first-child,
  table.grid.kpi2 td:first-child { white-space: normal; }
  .lr-sub { display: block; }   /* e.g. "(checking 7447)" onto its own line */

  /* Accounting-format amounts: right-aligned so the decimals stack. */
  table.grid.chkach td.cell-amt, table.grid.chkach th.r,
  table.grid.kpi2 td.cell-amt, table.grid.kpi2 th.r {
    text-align: right; white-space: nowrap; padding-right: 4px;
  }
  /* kpi popups (2 columns) have room: keep the $ pinned left, number right,
     with reserved width for a larger figure ($100k+). */
  table.grid.kpi2 td.cell-amt, table.grid.kpi2 th.r { padding-left: 16px; }
  table.grid.kpi2 td.cell-amt .amt { min-width: 6.8em; }
  /* chks/ACH popup is tight (4 columns): drop the $ from each ROW (the Total row
     keeps its $), right-align the number so the decimals stack, and let the
     column size to the number so nothing clips or overflows. */
  table.grid.chkach td.cell-amt { padding-left: 8px; }
  table.grid.chkach .amt-cur { display: none; }
  table.grid.chkach td.cell-amt .amt { justify-content: flex-end; min-width: 0; }

  /* Refresh strip: on a phone the long timer text used to shove "View
     activity ›" and Stop off the right edge, hiding the way to open the live
     log. Let it wrap so both always stay visible and tappable. "Refreshing
     ledger…" fills line 1; the timer, "View activity ›" and Stop flow onto the
     next line(s), never clipped. */
  .refresh-strip { flex-wrap: wrap; row-gap: 7px; column-gap: 8px; }
  .rs-progress { display: none; }   /* redundant with the timer on mobile */
  .rs-hint { margin-left: auto; }   /* "View activity ›" pinned to the right of its line */
  .rs-stop { margin-left: 8px; }    /* Stop follows the hint */
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}