/* ---------------------------------------------------------------------------
   AFS Pro visual language, as used by the ECL platform.

   The palette and the type are taken from the AFS Pro workspace so that a
   preparer moving between the two applications is not asked to learn a second
   set of conventions. Bone paper, ink text, a brass rule for anything that
   carries authority, and IBM Plex throughout: serif for headings because a
   financial statement is a document, and sans for everything the reader reads —
   labels and figures alike, so a row of a schedule is one line of type rather
   than a label in one face and a number in another.
   --------------------------------------------------------------------------- */

:root {
  --bone:    #f4f2ee;   /* page */
  --panel:   #faf8f4;   /* raised surface */
  --ink:     #1a232b;   /* primary text */
  --slate:   #3f4a52;   /* secondary text */
  --muted:   #5c6873;   /* tertiary text */
  --faint:   #8a939c;   /* captions */
  --rule:    #e3ded4;   /* hairline */
  --border:  #c9c2b6;   /* control border */
  --link:    #4a6b85;
  --link-hi: #3d5a70;
  --brass:   #8a6f45;   /* labels, authority */
  --gold:    #c8a86a;

  /* Stage and status. Muted on purpose: an allowance schedule is not a
     dashboard, and a Stage 3 exposure should read as grave, not as an alert. */
  --stage1:  #4a6b85;
  --stage2:  #8a6f45;
  --stage3:  #8c3a3a;
  --pass:    #4a6b4a;
  --warn:    #8a6f45;
  --fail:    #8c3a3a;

  /* ---------- one family, three roles ----------

     Everything the reader reads is IBM Plex Sans. Headings are IBM Plex Serif,
     which is the same design at a different weight of voice, so a heading and
     the sentence under it belong to each other. The monospaced face is not a
     third voice: it is reserved for strings that are meant to be compared
     character by character — fingerprints, identifiers, algorithm listings —
     where the typewriter texture carries the meaning.

     Figures use the SAME family as the words beside them. A monospaced number
     against a proportional label reads as two fragments on one line: the digits
     sit too wide, the stroke weight does not match, and the eye stops at the
     join. IBM Plex Sans carries proper tabular lining numerals, so a column
     still aligns on the digit — alignment comes from `tnum`, not from making
     every glyph the same width. */
  --serif:   'IBM Plex Serif', Georgia, serif;
  --sans:    'IBM Plex Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --figures: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --mono:    'IBM Plex Mono', ui-monospace, Menlo, monospace;
}

/* Wherever a number appears — tables, stat tiles, statements, equations and
   number inputs. Declared once and late enough to win, because the earlier
   attempt at this was overridden by more specific rules further down the file
   and every figure in the application silently stayed monospaced. */
.num,
.figure .v,
.stat-v,
table.afs .num,
table.afs td.num,
input.num,
.sheet .num,
.eq {
  font-family: var(--figures);
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
  letter-spacing: 0;
}

html, body { margin: 0; padding: 0; }
* { box-sizing: border-box; }

body {
  font-family: var(--sans);
  color: var(--ink);
  background: var(--bone);
  font-size: 16px;
  line-height: 27px;
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
  overflow-x: hidden;
}

a { color: var(--link); text-decoration: none; }
a:hover { color: var(--link-hi); }
a:focus-visible, button:focus-visible { outline: 1px solid var(--brass); outline-offset: 3px; }
input, select, textarea, button { font-family: inherit; color: inherit; font-size: 14px; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--link); outline-offset: 1px; }
::placeholder { color: #99a3ac; }

/* ---------- type ---------- */

.serif { font-family: var(--serif); }
.mono  { font-family: var(--mono); font-variant-numeric: tabular-nums; }

.afs-label {
  display: block;
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brass);
  line-height: 1.6;
}

h1, h2, h3 { font-family: var(--serif); font-weight: 400; letter-spacing: -0.012em; margin: 0; }
h1 { font-size: clamp(34px, 4.6vw, 58px); line-height: 1.14; }
h2 { font-size: clamp(24px, 2.6vw, 33px); line-height: 1.22; }
h3 { font-size: 19px; line-height: 1.35; font-weight: 500; }

.lede { font-size: 18px; line-height: 30px; color: var(--slate); }
.note { font-size: 13.5px; line-height: 23px; color: var(--muted); }
.caption { font-size: 12px; line-height: 20px; color: var(--faint); }

/* ---------- controls ---------- */

.btn-primary, .btn-ghost, .btn-onink {
  display: inline-flex; align-items: center; justify-content: center;
  height: 42px; padding: 0 22px; border-radius: 2px;
  font-size: 12.5px; font-weight: 500; letter-spacing: 0.09em;
  text-transform: uppercase; cursor: pointer; white-space: nowrap;
}
.btn-primary { background: var(--ink); color: #fff; border: 1px solid var(--ink); }
.btn-primary:hover:not(:disabled) { background: #2c3a46; color: #fff; }
.btn-ghost { border: 1px solid var(--border); background: transparent; color: var(--slate); }
.btn-ghost:hover:not(:disabled) { border-color: var(--brass); color: var(--ink); }
.btn-onink { border: 1px solid rgba(255,255,255,0.5); background: transparent; color: #fff; }
.btn-onink:hover { border-color: var(--gold); color: #f0e2c8; }
.btn-primary:disabled, .btn-ghost:disabled { opacity: 0.4; cursor: not-allowed; }
.btn-sm { height: 32px; padding: 0 14px; font-size: 11px; }

input[type="text"], input[type="number"], input[type="email"], input[type="password"], select {
  height: 38px; padding: 0 10px; border: 1px solid var(--border);
  border-radius: 2px; background: #fff;
}
input.num { text-align: right; }   /* family comes from the figures rule above */

/* ---------- surfaces ---------- */

.shell { max-width: 1180px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 56px); }
.shell-wide { max-width: 1420px; margin: 0 auto; padding: 0 clamp(16px, 3vw, 40px); }

.card {
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: 24px 26px;
}
.card-flush { padding: 0; overflow: hidden; }

.hr { height: 1px; background: var(--rule); border: 0; margin: 0; }

nav.afs-nav {
  position: sticky; top: 0; z-index: 20;
  background: var(--panel); border-bottom: 1px solid var(--rule);
}
.afs-navbar {
  display: flex; align-items: center; gap: 24px; height: 66px;
}
.afs-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 1px;
  background: var(--ink); color: var(--bone);
  font-family: var(--serif); font-size: 11.5px; font-weight: 500;
  letter-spacing: 0.04em; flex: none;
}
.afs-wordmark { font-family: var(--serif); font-size: 18px; font-weight: 500; letter-spacing: 0.02em; color: var(--ink); }
.afs-nav-link { font-size: 13px; color: var(--muted); letter-spacing: 0.01em; }
.afs-nav-link:hover { color: var(--ink); }
.afs-nav-link.on { color: var(--ink); box-shadow: inset 0 -1px 0 var(--brass); }

/* ---------- tables ---------- */

table.afs { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.afs th {
  text-align: left; font-weight: 500; font-size: 10.5px;
  letter-spacing: 0.13em; text-transform: uppercase; color: var(--brass);
  padding: 10px 12px; border-bottom: 1px solid var(--border); white-space: nowrap;
}
table.afs td {
  padding: 9px 12px; border-bottom: 1px solid var(--rule);
  vertical-align: top; line-height: 21px;
}
table.afs tbody tr:hover { background: rgba(138,111,69,0.045); }
table.afs .num { text-align: right; white-space: nowrap; }
table.afs tr.total td { border-top: 1px solid var(--ink); border-bottom: 2px double var(--ink); font-weight: 600; }
.table-scroll { overflow-x: auto; }

/* ---------- pills ---------- */

.pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 9px; border-radius: 2px;
  font-size: 10.5px; font-weight: 500; letter-spacing: 0.1em;
  text-transform: uppercase; white-space: nowrap;
  border: 1px solid currentColor;
}
.pill-s1 { color: var(--stage1); }
.pill-s2 { color: var(--stage2); }
.pill-s3 { color: var(--stage3); }
.pill-pass { color: var(--pass); }
.pill-warn { color: var(--warn); }
.pill-fail { color: var(--fail); }
.pill-idle { color: var(--faint); }
.pill-solid { background: var(--ink); color: #fff; border-color: var(--ink); }

/* ---------- figure blocks ---------- */

/* A row of figures has to read as a row: same baseline, same size, no figure
   wrapping or clipping because it happens to be the largest one.

   Three rules make that hold. The caption reserves two lines whether it needs
   them or not, so the numbers sit on a common baseline instead of stepping down
   wherever a caption wrapped. The number never wraps — a currency symbol left
   stranded on its own line is not a small blemish, it is a figure the reader
   has to reassemble. And the size is a clamp against the viewport, so a nine
   digit figure shrinks to fit rather than running out of its box. The unit
   belongs in the caption, the way a column of a statement is headed P'000
   rather than repeating the currency on every line. */
.figure-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.figure { background: var(--panel); padding: 16px 18px; display: flex; flex-direction: column; min-width: 0; }
.figure .k {
  font-size: 10.5px; letter-spacing: 0.13em; text-transform: uppercase; color: var(--brass);
  line-height: 15px; min-height: 30px;      /* two lines, reserved */
}
.figure .v {
  font-size: clamp(16px, 1.45vw, 22px); line-height: 32px; color: var(--ink); font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px;
}
.figure .s { font-size: 12px; color: var(--muted); line-height: 17px; margin-top: 2px; }

/* ---------- layout helpers ---------- */

.split { display: grid; grid-template-columns: 1fr 1fr; gap: 34px; }
.cols3 { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 30px; }
.row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.stack { display: flex; flex-direction: column; gap: 14px; }
.spacer { flex: 1; }

/* ---------- narrow viewports ----------
   The same bargain AFS Pro strikes: the navigation sheds its section anchors
   before it sheds the way in, and any grid of prose collapses to one column
   rather than giving each column less width than the words inside it. */
@media (max-width: 980px) {
  .afs-navbar { height: auto; flex-wrap: wrap; gap: 10px 16px; padding: 12px 0; }
  .afs-nav-sections { display: none !important; }
  .figure-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .split, .cols3 { grid-template-columns: minmax(0,1fr); gap: 28px; }
}
@media (max-width: 560px) {
  .figure-grid { grid-template-columns: minmax(0,1fr); }
  body { font-size: 15.5px; }
}

/* ---------- print ---------- */
@media print {
  nav.afs-nav, .no-print { display: none !important; }
  body { background: #fff; }
  .card { border-color: #ccc; background: #fff; }
}

/* ---------- ownership ----------
   The same foot on every page: who owns the application, and what the visitor
   is looking at. It is set quietly — a proprietary notice that shouts is read
   as a threat rather than as a statement of fact — but it is on every page,
   because a page that can be reached directly can also be printed directly. */
.afs-foot { margin-top: 64px; padding: 30px 0 46px; border-top: 1px solid var(--rule); background: var(--panel); }
.afs-foot-in { display: flex; flex-direction: column; gap: 12px; }
.afs-foot-brand { display: flex; align-items: center; gap: 10px; }
.afs-foot-legal { margin: 0; max-width: 104ch; font-size: 12.5px; line-height: 20px; color: var(--muted); }
.afs-foot-legal strong { color: var(--slate); font-weight: 600; }
.afs-foot-note { margin: 0; max-width: 104ch; font-size: 12px; line-height: 19px; color: var(--faint); }
.afs-foot-note a { color: var(--link); }
@media print { .afs-foot { display: none; } }