/* =====================================================================================================================
   THE PORTAL'S ONE SHARED STYLESHEET (AA-99 K35; the owner's ruling: its design system is his cash position template).
   Loaded by every page before the page's own styles. Three parts:
     1. the template's tokens, light and dark (prefers-color-scheme, or data-theme on <html>);
     2. the portal's older token names, each now a name for one of the template's, so every screen moves at once;
     3. the template's components, for any page to use: the sticky header with its month switch (.top, .seg), the stat
        row with a lead stat (.stats, .stat.lead), the panel (.panel, .panel-head), the bar list (.bars), the balance
        curve and its hover (.chart, .tip), lines folded under "Show every line" (details.lines), the checks panel
        (.checks, .check), the footer (.foot), and the table.
   Every number is mono and tabular (.num, a money cell, a figure).
   IBM Plex is the portal's own (AA-99 K37, the owner's approval): woff2, Latin only, the eight faces the pages use
   (a survey of every page: Sans 400/500/600/700, Serif 600, Mono 400/500/600), served from /fonts under the CSP's
   'self'; the SIL Open Font License beside them (/fonts/OFL-IBM-Plex-*.txt). Until a face arrives the system's own
   stands in (font-display: swap), so nothing waits for a font to be read.
   ===================================================================================================================== */

/* ---- 0. the faces (K37) ---- */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/ibm-plex-sans-latin-400-normal-5.3.0.woff2') format('woff2');
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308,
    U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/ibm-plex-sans-latin-500-normal-5.3.0.woff2') format('woff2');
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308,
    U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/ibm-plex-sans-latin-600-normal-5.3.0.woff2') format('woff2');
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308,
    U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/ibm-plex-sans-latin-700-normal-5.3.0.woff2') format('woff2');
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308,
    U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Serif';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/ibm-plex-serif-latin-600-normal-5.3.0.woff2') format('woff2');
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308,
    U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/ibm-plex-mono-latin-400-normal-5.3.0.woff2') format('woff2');
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308,
    U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/ibm-plex-mono-latin-500-normal-5.3.0.woff2') format('woff2');
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308,
    U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/ibm-plex-mono-latin-600-normal-5.3.0.woff2') format('woff2');
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308,
    U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---- 1. the template's tokens ---- */
:root {
  --plane: #f3f3f0;
  --surface: #fcfcfb;
  --surface-2: #f7f7f4;
  --ink: #0b0b0b;
  --ink-2: #52514e;
  --muted: #898781;
  --grid: #e1e0d9;
  --axis: #c3c2b7;
  --rule: rgba(11, 11, 11, 0.1);
  --in: #2a78d6;
  --out: #eb6834;
  --good: #0ca30c;
  --warn: #fab219;
  --crit: #d03b3b;
  --good-ink: #006300;
  --crit-ink: #a62c2c;
  --warn-ink: #7a5505;
  --sans:
    'IBM Plex Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --serif: 'IBM Plex Serif', Georgia, 'Times New Roman', serif;
  --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --shadow: 0 6px 20px rgba(0, 0, 0, 0.14);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --plane: #0d0d0d;
    --surface: #1a1a19;
    --surface-2: #201f1e;
    --ink: #f0efec;
    --ink-2: #c3c2b7;
    --muted: #898781;
    --grid: #2c2c2a;
    --axis: #383835;
    --rule: rgba(255, 255, 255, 0.1);
    --in: #3987e5;
    --out: #d95926;
    --good-ink: #0ca30c;
    --crit-ink: #e66767;
    --warn-ink: #fab219;
    --shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
    color-scheme: dark;
  }
}
:root[data-theme='dark'] {
  --plane: #0d0d0d;
  --surface: #1a1a19;
  --surface-2: #201f1e;
  --ink: #f0efec;
  --ink-2: #c3c2b7;
  --muted: #898781;
  --grid: #2c2c2a;
  --axis: #383835;
  --rule: rgba(255, 255, 255, 0.1);
  --in: #3987e5;
  --out: #d95926;
  --good-ink: #0ca30c;
  --crit-ink: #e66767;
  --warn-ink: #fab219;
  --shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
  color-scheme: dark;
}

/* ---- 2. the portal's older names, each one of the template's (tints mixed from them, so dark follows) ---- */
:root {
  --bg: var(--plane);
  --panel: var(--surface);
  --line: var(--grid);
  --line-strong: var(--axis);
  --ink-1: var(--ink);
  --ink-3: var(--muted);
  --accent: var(--in);
  --accent-strong: color-mix(in srgb, var(--in) 80%, var(--ink));
  --accent-soft: color-mix(in srgb, var(--in) 10%, var(--surface));
  --on-accent: #ffffff;
  --neg: var(--crit-ink);
  --bad: var(--crit-ink);
  --bad-soft: color-mix(in srgb, var(--crit) 9%, var(--surface));
  --bad-line: color-mix(in srgb, var(--crit) 35%, var(--surface));
  --warn-soft: color-mix(in srgb, var(--warn) 12%, var(--surface));
  --warn-line: color-mix(in srgb, var(--warn) 45%, var(--surface));
  --good-soft: color-mix(in srgb, var(--good) 8%, var(--surface));
  --good-line: color-mix(in srgb, var(--good) 30%, var(--surface));
  --ui: var(--sans);
}

/* ---- 3. base ---- */
html {
  background: var(--plane);
}
body {
  background: var(--plane);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
h1,
h2 {
  font-family: var(--serif);
  font-weight: 600;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
h1 {
  font-size: 19px;
}
h2 {
  font-size: 16px;
  margin: 0 0 6px;
}
h3 {
  font-size: 13.5px;
  font-weight: 600;
}
/* every number mono and tabular: a money cell, a figure, anything marked .num */
.num,
td.num,
th.num,
td.n,
th.n,
td.r,
th.r,
.figure,
.fig .v,
.stat .v,
.bar-val,
code,
kbd {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}
a {
  color: var(--in);
}
:focus-visible {
  outline: 2px solid var(--in);
  outline-offset: 1px;
}
.pos {
  color: var(--good-ink);
}
.neg {
  color: var(--crit-ink);
}
.tick-in {
  color: var(--in);
}
.tick-out {
  color: var(--out);
}

/* ---- components: the sticky header and its month switch ---- */
.top {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--plane);
  border-bottom: 1px solid var(--rule);
}
.top-in {
  max-width: 1180px;
  margin: 0 auto;
  padding: 14px 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 20px;
  align-items: baseline;
  justify-content: space-between;
}
.top .brand {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  /* not the rail's brand block: no rule under it */
  padding: 0;
  margin: 0;
  border: 0;
}
.top h1 {
  font-size: 19px;
  margin: 0;
}
.top .sub {
  color: var(--muted);
  font-size: 12px;
}
.seg {
  display: inline-flex;
  gap: 2px;
  background: var(--surface-2);
  border: 1px solid var(--rule);
  border-radius: 7px;
  padding: 2px;
}
.seg button {
  font: inherit;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink-2);
  background: none;
  border: 0;
  border-radius: 5px;
  padding: 6px 13px;
  cursor: pointer;
  white-space: nowrap;
  height: auto;
}
.seg button[aria-pressed='true'] {
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.09);
  font-weight: 600;
}

/* ---- the section label and the stat row ---- */
.eyebrow {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 9px;
}
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  border-radius: 9px;
  overflow: hidden;
}
.stat {
  background: var(--surface);
  padding: 14px 15px 15px;
  min-width: 0;
}
.stat .k {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
  display: block;
  margin-bottom: 7px;
}
.stat .v {
  font-size: 21px;
  font-weight: 500;
  letter-spacing: -0.02em;
  display: block;
  line-height: 1.15;
  overflow-wrap: anywhere;
}
.stat .m {
  font-size: 11.5px;
  color: var(--ink-2);
  margin-top: 5px;
  display: block;
}
.stat.lead .v {
  font-size: 25px;
}
.stat:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}
@media (min-width: 900px) {
  .stat:last-child:nth-child(odd) {
    grid-column: auto;
  }
}

/* ---- the panel ---- */
.panel {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 9px;
}
.panel.pad {
  padding: 17px 17px 15px;
}
.panel-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 14px;
}
.panel-head h2 {
  font-size: 16px;
  margin: 0 0 3px;
}
.pnote {
  color: var(--muted);
  font-size: 12px;
  margin: 0;
}
.pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: start;
}
@media (max-width: 820px) {
  .pair {
    grid-template-columns: 1fr;
  }
}

/* ---- the balance curve and its hover ---- */
.chart-scroll {
  overflow-x: auto;
  overflow-y: hidden;
  margin-inline: -2px;
  padding-inline: 2px;
}
.chart {
  position: relative;
}
/* only a chart that sits in its own scroller keeps its width on a phone; it scrolls, the page does not */
.chart-scroll > .chart {
  min-width: 600px;
}
@media (min-width: 700px) {
  .chart-scroll > .chart {
    min-width: 0;
  }
}
.chart svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}
.tip {
  position: absolute;
  pointer-events: none;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 7px;
  padding: 8px 10px;
  font-size: 12px;
  box-shadow: var(--shadow);
  min-width: 148px;
  z-index: 20;
  transition: opacity 0.09s;
}
.tip .t-d {
  font-weight: 600;
  margin-bottom: 5px;
  font-size: 11.5px;
}
.tip .t-r {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  color: var(--ink-2);
  line-height: 1.7;
}
.tip .t-r b {
  font-family: var(--mono);
  font-weight: 500;
  color: var(--ink);
}
.tip .t-tot {
  border-top: 1px solid var(--rule);
  margin-top: 5px;
  padding-top: 4px;
}
.swatch {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  margin-right: 6px;
  vertical-align: baseline;
}

/* ---- the bar list ---- */
.bars {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin-top: 2px;
}
.bar-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 3px 12px;
}
.bar-row:hover .track {
  filter: brightness(1.07);
}
.bar-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  grid-column: 1 / -1;
  min-width: 0;
}
.bar-name {
  font-size: 12.5px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.bar-val {
  font-size: 12.5px;
  white-space: nowrap;
}
.bar-sub {
  font-size: 11px;
  color: var(--muted);
  font-weight: 400;
}
.track {
  grid-column: 1 / -1;
  height: 9px;
  background: var(--surface-2);
  border-radius: 4px;
  overflow: hidden;
}
.fill {
  height: 100%;
  border-radius: 4px;
}

/* ---- the checks panel: one line each, details on demand ---- */
.checks {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  border-radius: 9px;
  overflow: hidden;
}
.check {
  background: var(--surface);
  padding: 12px 16px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 3px 11px;
  align-items: start;
}
.check .dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  margin-top: 6px;
}
.check h3 {
  font-size: 13.5px;
  margin: 0;
  font-weight: 600;
}
.check details {
  grid-column: 2;
  margin: 0;
}
.check details summary {
  padding: 2px 0;
}
.check p {
  margin: 4px 0 0;
  color: var(--ink-2);
  font-size: 12.5px;
  max-width: 76ch;
}
.sev {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  margin-right: 8px;
}
.sev.good {
  color: var(--good-ink);
}
.sev.warning {
  color: var(--warn-ink);
}
.sev.critical {
  color: var(--crit-ink);
}

/* ---- the table (sorted, filtered and folded by /tables.js) ---- */
.tbl-wrap {
  overflow-x: auto;
  border: 1px solid var(--rule);
  border-radius: 9px;
  background: var(--surface);
}
table {
  border-collapse: collapse;
  width: 100%;
  font-size: 12.5px;
}
th,
td {
  text-align: left;
  border-bottom: 1px solid var(--grid);
}
th {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--surface-2);
}
th.num,
td.num {
  text-align: right;
}
tbody tr:last-child td {
  border-bottom: 0;
}
tbody tr:hover {
  background: var(--surface-2);
}
.cat-tag {
  font-size: 10.5px;
  color: var(--muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ---- lines folded under "Show every line" ---- */
details.lines {
  margin-top: 12px;
}
details.lines > summary,
.check details > summary {
  cursor: pointer;
  font-size: 12.5px;
  color: var(--ink-2);
  font-weight: 500;
  padding: 7px 0;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 7px;
}
details.lines > summary::-webkit-details-marker,
.check details > summary::-webkit-details-marker {
  display: none;
}
details.lines > summary::before,
.check details > summary::before {
  content: '';
  width: 0;
  height: 0;
  border-left: 5px solid currentColor;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  transition: transform 0.15s;
  flex: none;
}
details.lines[open] > summary::before,
.check details[open] > summary::before {
  transform: rotate(90deg);
}

/* ---- the footer ---- */
.foot {
  margin-top: 34px;
  padding-top: 16px;
  border-top: 1px solid var(--rule);
  color: var(--muted);
  font-size: 11.5px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 22px;
}
@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    animation: none !important;
  }
}

/* ---- K37: what the production screenshots showed ---- */
/* hidden means hidden, whatever a layout says: on a phone every row is display:block, which showed every folded row
   of a long table (Reconcile ran to 1,395 rows, 688,325 px) */
[hidden] {
  display: none !important;
}
/* a count with nothing to count is not drawn (Questions and Checks showed an empty pill on every page) */
.badge:empty {
  display: none;
}
/* a badge and a day are one word: neither breaks across lines in a narrow column */
.badge,
td[data-kind='date'],
td.nowrap {
  white-space: nowrap;
}
/* a figure card whose value is words, not a number */
.fig .v.words {
  font-family: var(--sans);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.3;
}