/* =============================================================================
   Daftari — the design system, as CSS: the components.

   BRANDING/Design_Guide governs the look, and Documentation/UI_UX/Design_System.md
   the app's own rules. Read them before changing anything here: every rule below
   has a reason recorded there, and a screen that departs from them is either a
   mistake or a change to record in both.

   The colours, sizes and spacing are not here. They are roles in tokens.css,
   generated by the Design Guide from the brand palette and measured for contrast
   in both themes; base.html links it before this file. A component uses a role,
   never a colour: a hex below the print block is a colour nobody checked.

   No framework, no build step. A page of this application is HTML a browser
   renders on its own, which is what makes it usable on a poor connection.
   ============================================================================= */

/* --- the type ----------------------------------------------------------------
   IBM Plex, served from here: no third party sees who reads which page. Latin
   subset, woff2, cached for a year; the fallback face shows first, so a poor
   connection gets the page before the font. Sans is one variable file, 400-700. */

@font-face {
  font-family: "IBM Plex Sans";
  src: url("fonts/IBMPlexSans-Var.4a4c07be9fda.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Serif";
  src: url("fonts/IBMPlexSerif-SemiBold.2836607ebaf6.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("fonts/IBMPlexMono-Regular.c99ab03b1a96.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

/* --- the page -------------------------------------------------------------- */

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: var(--t-body)/1.55 var(--sans);
  -webkit-text-size-adjust: 100%;
}

a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Focus is always visible: every control, both themes. */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}

main { max-width: 78rem; margin: 0 auto; padding: var(--s5) var(--s4) var(--s8); }

h1 {
  font: 600 var(--t-title)/1.2 var(--serif);
  margin: 0 0 var(--s1);
  letter-spacing: -.01em;
  text-wrap: balance;
}

h2 {
  font: 600 var(--t-label)/1.3 var(--sans);
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--muted);
  margin: var(--s6) 0 var(--s2);
}

h3 { font: 600 var(--t-body)/1.35 var(--sans); margin: var(--s5) 0 var(--s2); }

p.lede { color: var(--muted); margin: 0 0 var(--s5); font-size: var(--t-table); }

/* --- the shell ------------------------------------------------------------- */

/* The bar is the brand's indigo in either theme, with the reversed logo:
   Brand Guide page 14. White and its dimmed step are the only text on it. */
header.bar {
  display: flex;
  align-items: center;
  gap: var(--s4);
  flex-wrap: wrap;
  min-height: 52px;
  padding: var(--s2) var(--s5);
  background: var(--bar);
  color: var(--on-bar);
}

header.bar .brand { display: flex; align-items: center; }
header.bar .brand img { height: 24px; width: auto; display: block; }

header.bar nav { display: flex; gap: var(--s4); flex-wrap: wrap; font-size: var(--t-table); }
header.bar a { color: var(--bar-dim); }
header.bar a:hover { color: var(--on-bar); }
header.bar a[aria-current="page"] { color: var(--on-bar); box-shadow: inset 0 -2px 0 var(--mark); }
header.bar .spacer { flex: 1 1 auto; }
header.bar .who { color: var(--bar-dim); font-size: var(--t-small); }
header.bar button.quiet { color: var(--bar-dim); border-color: var(--bar-dim); }
header.bar button.quiet:hover { color: var(--on-bar); background: transparent; }
header.bar :focus-visible { outline-color: var(--mark); }
/* Find sits in the bar on every page, a phone's included (Design System §12.1). */
header.bar form.find { display: flex; }
header.bar form.find input {
  width: 12rem;
  max-width: 40vw;
  padding: var(--s1) var(--s2);
  background: transparent;
  color: var(--on-bar);
  border: 1px solid var(--bar-dim);
  font-size: var(--t-small);
}
header.bar form.find input::placeholder { color: var(--bar-dim); }

/* Within an organisation, links are grouped by what they are for: books,
   reports, setup, access. Fourteen undifferentiated links is a list to read,
   not a place to navigate. */
.sections { display: flex; flex-wrap: wrap; gap: var(--s5) var(--s6); margin: 0 0 var(--s5); }
.sections .group { display: grid; gap: var(--s1); align-content: start; }
.sections .group > span {
  font-size: var(--t-label);
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
}
.sections .group a { font-size: var(--t-table); }
.sections .group .now { color: var(--ink); font-weight: 600; }

/* --- tables ----------------------------------------------------------------
   The primary instrument of this application. */

table { width: 100%; border-collapse: collapse; font-size: var(--t-table); }

th, td {
  text-align: left;
  padding: var(--s2) var(--s3);
  border-bottom: 1px solid var(--line-soft);
  vertical-align: top;
}

th {
  color: var(--muted);
  font-weight: 600;
  font-size: var(--t-label);
  text-transform: uppercase;
  letter-spacing: .06em;
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  background: var(--bg);
  white-space: nowrap;
}

tbody tr:hover { background: var(--raised); }

/* A figure is not code: the text face, with digits of equal width so a column
   reads down. Monospace is for codes, which are compared character by
   character. Design_System.md §3. */
td.num, th.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* An identifier is read as one string, so it never breaks across lines:
   DEMO-JV-2026-08-0001 wrapped after the month is a different-looking number. */
td.code, .code {
  font-family: var(--mono);
  font-size: .92em;
  color: var(--dim);
}
td.code, th.nowrap, td.nowrap { white-space: nowrap; }

/* Accounting's own rules for totals, not invented ones. */
tr.subtotal td { border-top: 1px solid var(--rule); font-weight: 600; padding-top: var(--s2); }
tr.total td {
  border-top: 1px solid var(--rule);
  border-bottom: 3px double var(--rule);
  font-weight: 700;
  padding-top: var(--s2);
}

td.nil { color: var(--muted); }
.negative { color: var(--bad); }

.scroll { overflow-x: auto; }
.empty { color: var(--muted); padding: var(--s5) 0; }

/* Indentation shows depth in a statement. */
.indent-1 { padding-left: var(--s5); }
.indent-2 { padding-left: var(--s7); }

/* --- the small vocabulary every screen uses --------------------------------
   Named for what the text is, not for how it looks, so a change of mind about
   the look is one edit here rather than fifty in templates. */

.muted { color: var(--muted); }
.dim { color: var(--dim); }
.ink { color: var(--ink); }
.bad-text { color: var(--bad); }
.good-text { color: var(--good); }
.small { font-size: var(--t-small); }
.smaller { font-size: var(--t-label); }
.strong { font-weight: 600; }
.right { text-align: right; }
.row { display: flex; gap: var(--s2); align-items: center; }
.push { margin-left: auto; }
.after { margin-top: var(--s5); }
/* The rules templates once carried in style="" (Implementation Plan 1.5), on the spacing scale.
   A test fails if a style attribute returns to a template. .flush comes before the margins so
   "flush mt-2" means a top margin and nothing else. */
form.inline { display: inline; }
.block { display: block; }
.flush { margin: 0; }
.mt-1 { margin-top: var(--s1); }
.mt-2 { margin-top: var(--s2); }
.mt-3 { margin-top: var(--s3); }
.mt-4 { margin-top: var(--s4); }
.mb-3 { margin-bottom: var(--s3); }
.my-1 { margin-top: var(--s1); margin-bottom: var(--s1); }
.my-2 { margin-top: var(--s2); margin-bottom: var(--s2); }
.my-3 { margin-top: var(--s3); margin-bottom: var(--s3); }
.ml-4 { margin-left: var(--s4); }
.pt-0 { padding-top: 0; }
.row.tight { gap: var(--s1); }
.row.wrap { flex-wrap: wrap; }
.full-row { flex-basis: 100%; }
.grow { flex: 1 1 20rem; }
.w-4 { width: 4rem; }
.w-5 { width: 5rem; }
.w-6 { width: 6rem; }
.w-7 { width: 7rem; }
.w-auto { width: auto; }
.w-full { width: 100%; }
.measure { max-width: 36rem; }
.measure-wide { max-width: 40rem; }
.center { text-align: center; }
.caps { text-transform: uppercase; }
.no-caps { text-transform: none; letter-spacing: 0; }
.break { word-break: break-all; }
.select-all { user-select: all; }
.airy { line-height: 2; }
.inactive { opacity: .55; }
.boxed { border: 1px solid var(--line); padding: var(--s2) var(--s3); }
.button-pad { padding: var(--s2) var(--s3); }
.tight-button { padding: 0 var(--s1); }

/* A row the reader must not miss: a line that cannot be imported, the step
   being worked on. Tinted, and always carrying words as well. */
tr.flagged, tr.flagged:hover { background: color-mix(in srgb, var(--bad) 12%, var(--bg)); }
tr.current, tr.current:hover { background: color-mix(in srgb, var(--good) 12%, var(--bg)); }

/* The enrolment code is scanned by a phone camera, which wants true white
   behind it whatever theme the reader is using. */
.qr { background: #fff; padding: var(--s3); display: inline-block; border-radius: var(--radius); }

/* --- statements -------------------------------------------------------------
   A statement is read by someone who already knows the shape it should take,
   and is taken to a board meeting on paper. */

.statement-head { margin: 0 0 var(--s4); }
.statement-head .who { font: 600 var(--t-section)/1.3 var(--serif); color: var(--ink); }
.statement-head .what { color: var(--muted); font-size: var(--t-table); }

table.statement td:first-child { width: 55%; }
table.statement tr.group-head td {
  padding-top: var(--s4);
  font-size: var(--t-small);
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--muted);
  border-bottom: none;
}

/* --- pills ------------------------------------------------------------------
   Never colour alone: a pill says POSTED as well as being green. */

.pill {
  display: inline-block;
  padding: .1rem .45rem;
  border-radius: 2px;
  font-size: var(--t-label);
  text-transform: uppercase;
  letter-spacing: .06em;
  border: 1px solid var(--line);
  color: var(--dim);
  white-space: nowrap;
}
.pill.good { border-color: var(--good); color: var(--good); }
.pill.warn { border-color: var(--warn); color: var(--warn); }
.pill.bad  { border-color: var(--bad);  color: var(--bad); }

/* --- notices ----------------------------------------------------------------
   A control failure is loud, never subtle. */

/* A border in the meaning's colour at low strength, a 4px leading edge at full
   strength, and a tinted ground: the one place an edge is used, because here it
   carries meaning. Design Guide page 12. */
.note {
  border: 1px solid var(--line);
  border-left: 4px solid var(--line);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: var(--s3) var(--s4);
  margin: 0 0 var(--s4);
  background: var(--panel);
  font-size: var(--t-table);
}
.note.bad {
  border-color: color-mix(in srgb, var(--bad) 40%, var(--bg));
  border-left-color: var(--bad);
  background: color-mix(in srgb, var(--bad) 8%, var(--bg));
}
.note.warn {
  border-color: color-mix(in srgb, var(--warn) 40%, var(--bg));
  border-left-color: var(--warn);
  background: color-mix(in srgb, var(--warn) 8%, var(--bg));
}
.note.good {
  border-color: color-mix(in srgb, var(--good) 40%, var(--bg));
  border-left-color: var(--good);
  background: color-mix(in srgb, var(--good) 8%, var(--bg));
}
.note ul { margin: 0; padding-left: var(--s5); }

/* --- forms ------------------------------------------------------------------
   A label above its field, always: a form is scanned down one column. */

label { display: grid; gap: var(--s1); font-size: var(--t-small); color: var(--dim); }

input, select, textarea {
  background: var(--field);
  color: var(--ink);
  /* --rule, not --line: the edge that tells a reader where a field is needs
     3 : 1 against it (WCAG 1.4.11). --line on white is 1.49. */
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: var(--s2) var(--s3);
  font: inherit;
  font-size: var(--t-table);
}

input:disabled, select:disabled { color: var(--muted); background: var(--panel); cursor: not-allowed; }
input[aria-invalid="true"] { border-color: var(--bad); border-width: 2px; }
input[type="checkbox"] { width: 1rem; height: 1rem; accent-color: var(--accent); }

/* One primary button per screen: it is the action the page is for. */
button, .button {
  background: var(--accent);
  color: var(--on-accent);
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  padding: var(--s2) var(--s4);
  font: 600 var(--t-table) var(--sans);
  cursor: pointer;
}
button:hover { filter: brightness(1.08); }
button.quiet, .button.quiet {
  background: transparent;
  color: var(--link);
  border-color: var(--line);
  font-weight: 500;
}
button.quiet:hover, .button.quiet:hover { background: var(--raised); filter: none; }

form.stack { display: grid; gap: var(--s3); max-width: 26rem; }

/* A set of choices: a legend in the label's voice, one choice to a line. */
fieldset.choice { border: 0; margin: 0; padding: 0; display: grid; gap: var(--s1); }
fieldset.choice legend { font-size: var(--t-small); color: var(--dim); padding: 0; margin-bottom: var(--s1); }
fieldset.choice label.inline { grid-auto-flow: column; justify-content: start; align-items: center; gap: var(--s2); font-size: var(--t-table); color: var(--ink); }

/* Fields that belong together wrap onto one row rather than scrolling sideways. */
.filters {
  display: flex;
  gap: var(--s3);
  align-items: end;
  flex-wrap: wrap;
  margin: 0 0 var(--s4);
}
.filters label { font-size: var(--t-small); }
.filters label.inline { grid-auto-flow: column; align-items: center; gap: var(--s2); }

code { font-family: var(--mono); font-size: .9em; }

/* --- Today -------------------------------------------------------------------
   What is waiting for one person, across organisations. Home_Pages.md §3. */

.today { display: grid; grid-template-columns: minmax(0, 1fr) 16rem; gap: var(--s6); align-items: start; }
.today-side { display: grid; gap: var(--s5); position: sticky; top: var(--s4); }
.today-side section { border-top: 2px solid var(--bar); padding-top: var(--s2); }
.today-side h2 { margin-top: 0; }
.today-side ul.start { list-style: none; margin: var(--s3) 0 0; padding: 0; display: grid; gap: var(--s1); }
.today-side ul.start a { display: block; padding: var(--s1) 0; }
table.waiting tr.blocking td:first-child { box-shadow: inset 3px 0 0 var(--warn); }
table.waiting td.act { text-align: right; width: 1%; white-space: nowrap; }
table.waiting td.act .button { padding: var(--s1) var(--s3); }
svg.spark { display: block; overflow: visible; }
details.later { margin-top: var(--s6); border-top: 1px solid var(--line); padding-top: var(--s3); }
details.later > summary { cursor: pointer; color: var(--link); }
svg.spark .line { fill: none; stroke: var(--chart-1); stroke-width: 1.6; stroke-linejoin: round; }
svg.spark .area { fill: color-mix(in srgb, var(--chart-1) 12%, transparent); }
svg.spark .dot { fill: var(--chart-2); }
svg.spark.falling .dot { fill: var(--bad); }

@media (max-width: 52rem) {
  .today { grid-template-columns: minmax(0, 1fr); }
  .today-side { position: static; }
  table.waiting thead { display: none; }
  table.waiting tr { display: grid; grid-template-columns: auto 1fr auto; gap: 0 var(--s2); padding: var(--s2) 0; border-bottom: 1px solid var(--line); }
  table.waiting td { border: 0; padding: 0; }
  table.waiting td:nth-child(2) { grid-column: 2 / 4; }
  table.waiting td.act { grid-column: 1 / 4; width: auto; text-align: left; padding-top: var(--s2); }
  table.waiting td.act .button { display: block; min-height: 44px; line-height: 44px; padding: 0 var(--s4); text-align: center; }
}

/* --- an organisation's home --------------------------------------------------
   Is the position sound this month. Home_Pages.md §4; the charts follow §23. */

.record { gap: var(--s4); align-items: baseline; flex-wrap: wrap; }
section.controls { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s3); margin: var(--s4) 0 var(--s5); }
section.controls .cell {
  display: grid; gap: var(--s1); align-content: start; padding: var(--s3) var(--s4);
  background: var(--field); border: 1px solid var(--line); border-top: 3px solid var(--good);
  border-radius: var(--radius); color: var(--ink); text-decoration: none;
}
section.controls .cell:hover { background: var(--raised); }
section.controls .cell.warn { border-top-color: var(--warn); }
section.controls .cell.bad { border-top-color: var(--bad); }
section.controls .k { font-size: var(--t-small); color: var(--muted); }
section.controls .v { font: 600 var(--t-section)/1.2 var(--mono); }
section.controls .cell.bad .v { color: var(--bad); }
section.controls .d { font-size: var(--t-small); color: var(--warn); }
.home-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s5) var(--s6); }
.home-grid .panel.wide { grid-column: 1 / -1; }
.home-grid .panel h2 { margin-top: 0; }
.home-grid svg.chart { margin: var(--s2) 0 var(--s3); }
svg.chart a:hover rect, svg.chart a:hover .point { filter: brightness(1.25); }
svg.chart a:focus-visible { outline: 2px solid var(--mark); }
svg.chart .point { fill: var(--chart-1); stroke: var(--field); stroke-width: 1.5; }
.pair-charts { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); }
.pair-charts figure { margin: 0; }
.pair-charts figcaption { font-size: var(--t-small); color: var(--dim); }
.legend { font-size: var(--t-small); color: var(--dim); display: flex; align-items: center; gap: var(--s2); margin: 0; }
.legend .key { display: inline-block; width: .7rem; height: .7rem; }
.legend .key.c1 { background: var(--chart-1); }
.legend .key.c2 { background: var(--chart-2); margin-left: var(--s3); }

@media (max-width: 52rem) {
  section.controls { grid-template-columns: 1fr 1fr; }
  .home-grid { grid-template-columns: minmax(0, 1fr); }
  .pair-charts { grid-template-columns: 1fr; }
  /* A wide chart keeps a size its labels can be read at, and scrolls. */
  .chart-scroll { overflow-x: auto; }
  .chart-scroll svg.chart { min-width: 34rem; }
  .chart-scroll svg.chart text { font-size: 16px; }
  .pair-charts svg.chart text { font-size: 13px; }
}

/* --- inside an organisation --------------------------------------------------
   The switcher and the navigation in a column on the left; the page beside it.
   Grouped by what the person is doing. Design System §12.2. */

main.with-org { max-width: 92rem; display: grid; grid-template-columns: 15rem minmax(0, 1fr); gap: var(--s6); align-items: start; }
.org-main { min-width: 0; }
.org-side { position: sticky; top: var(--s4); display: grid; gap: var(--s4); font-size: var(--t-table); }
/* minmax(0, 1fr): a long organisation name in the switcher must not widen the column. */
.org-side, .org-side .switcher { grid-template-columns: minmax(0, 1fr); min-width: 0; }
.org-side .switcher { display: grid; gap: var(--s1); }
.org-side .switcher label { font-size: var(--t-label); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.org-side .switcher .row { display: flex; gap: var(--s2); }
.org-side .switcher select { flex: 1 1 auto; min-width: 0; }
nav.org-nav { display: grid; gap: var(--s3); }
nav.org-nav a { display: block; padding: var(--s1) var(--s2); border-left: 2px solid transparent; color: var(--link); text-decoration: none; }
nav.org-nav a:hover { background: var(--raised); text-decoration: underline; }
nav.org-nav a[aria-current="page"] { border-left-color: var(--mark); color: var(--ink); font-weight: 600; background: var(--raised); }
nav.org-nav a.home { font-weight: 600; }
nav.org-nav ul { list-style: none; margin: 0; padding: 0; }
nav.org-nav summary {
  cursor: pointer; padding: var(--s1) 0; font-size: var(--t-label); font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
}
nav.org-nav summary:hover { color: var(--ink); }
nav.org-nav .count {
  display: inline-block; min-width: 1.4em; padding: 0 .35em; margin-left: var(--s1);
  border-radius: 999px; background: color-mix(in srgb, var(--warn) 16%, transparent);
  color: var(--warn); font: 600 var(--t-label)/1.6 var(--sans); text-align: center;
}
details.org-menu > summary { display: none; }
details.org-menu { display: grid; gap: var(--s4); }
nav.org-nav details.more summary { text-transform: none; letter-spacing: 0; font-size: var(--t-table); font-weight: 400; color: var(--dim); padding-left: var(--s2); }

@media (max-width: 52rem) {
  main.with-org { grid-template-columns: minmax(0, 1fr); gap: var(--s4); }
  .org-side { position: static; border-bottom: 1px solid var(--line); padding-bottom: var(--s3); }
  details.org-menu > summary {
    display: flex; align-items: center; min-height: 44px; padding: 0 var(--s3); cursor: pointer;
    border: 1px solid var(--line); border-radius: var(--radius); background: var(--field);
    font-weight: 600; color: var(--ink);
  }
  details.org-menu[open] > summary { margin-bottom: var(--s3); }
  nav.org-nav { grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); }
}

/* --- the front door ---------------------------------------------------------
   daftari.pro to a visitor. Home_Pages.md §2, Design Guide page 11. The same
   roles as the application; the only shadow in the system lifts the sample
   statement off the page, as a sheet of paper is. */

a.button { display: inline-block; text-decoration: none; }
a.button:hover { text-decoration: none; filter: brightness(1.08); }
header.bar a.button { color: var(--on-accent); }

main.front { max-width: 72rem; }
main.front section { padding: var(--s7) 0; border-top: 1px solid var(--line); }
main.front section:first-child { border-top: 0; }
main.front h2 {
  font: 600 var(--t-title)/1.25 var(--serif);
  text-transform: none;
  letter-spacing: -.005em;
  color: var(--ink);
  margin: 0 0 var(--s4);
}
main.front p { max-width: 44rem; }
.front .eyebrow {
  font-size: var(--t-label); font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); margin: 0 0 var(--s3);
}
.front h1.display { font: 600 var(--t-display)/1.08 var(--serif); letter-spacing: -.015em; margin: 0 0 var(--s4); }
.front .display-2 { font: 600 var(--t-display)/1.1 var(--serif); }
.front .promise { font-size: 1.05rem; line-height: 1.6; color: var(--dim); }
.front .row { gap: var(--s4); flex-wrap: wrap; }

.front .hero { display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--s7); align-items: center; }
.front .sheet {
  margin: 0; padding: var(--s5); background: var(--field); border: 1px solid var(--line);
  border-radius: 4px; box-shadow: var(--shadow);
}
.front .sheet .sample {
  font-size: var(--t-label); font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted); margin: 0 0 var(--s3);
}
.front .sheet th { position: static; background: transparent; }
.front .traced { color: var(--link); text-decoration: underline; text-decoration-color: var(--mark); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.front ol.trail { list-style: none; margin: var(--s4) 0 0; padding: 0; display: grid; gap: var(--s2); counter-reset: step; }
.front ol.trail li {
  display: grid; grid-template-columns: 1.6rem 1fr; gap: 0 var(--s2); font-size: var(--t-table);
  border-top: 1px solid var(--line-soft); padding-top: var(--s2);
}
.front ol.trail li::before {
  counter-increment: step; content: counter(step); grid-row: span 2;
  width: 1.3rem; height: 1.3rem; background: var(--mark); color: var(--bar);
  font-size: var(--t-label); font-weight: 700; display: grid; place-items: center;
}
.front ol.trail .smaller { display: block; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); }
.front ol.trail .code { margin-right: var(--s2); }

/* The sample's figures, and its charts. Charts take --chart-1..3 for series and
   --bad only for a failure (over budget, overdue), never for decoration.
   Design System §23. */
.front dl.kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s3); margin: var(--s4) 0; }
.front dl.kpis div { border-top: 2px solid var(--bar); padding-top: var(--s2); }
.front dl.kpis dt { font-size: var(--t-label); text-transform: uppercase; letter-spacing: .07em; color: var(--muted); }
.front dl.kpis dd { margin: var(--s1) 0 0; font: 600 var(--t-section)/1.2 var(--mono); }
.good-text { color: var(--good); }
.front .legend { font-size: var(--t-small); color: var(--dim); margin: 0 0 var(--s1); display: flex; align-items: center; gap: var(--s2); }
.front .legend .key { display: inline-block; width: .7rem; height: .7rem; }
.front .legend .key.c1 { background: var(--chart-1); }
.front .legend .key.c2 { background: var(--chart-2); margin-left: var(--s3); }
.front .trail-head { font-size: var(--t-small); color: var(--dim); margin: var(--s3) 0 0; }

svg.chart { display: block; width: 100%; height: auto; overflow: visible; }
svg.chart text { font-family: var(--sans); font-size: 10px; }
svg.chart .axis, svg.chart .label { fill: var(--muted); }
svg.chart .label { fill: var(--dim); font-size: 11px; }
svg.chart .value, svg.chart .callout { fill: var(--ink); font-family: var(--mono); font-weight: 600; }
svg.chart .grid { stroke: var(--line-soft); stroke-width: 1; }
svg.chart .base { stroke: var(--rule); }
svg.chart .c1 { fill: var(--chart-1); }
svg.chart .c2 { fill: var(--chart-2); }
svg.chart .c3 { fill: var(--chart-3); }
svg.chart .bad { fill: var(--bad); }
svg.chart .bad-text { fill: var(--bad); }
svg.chart .track { fill: var(--raised); stroke: var(--line); }
svg.chart .budget { stroke: var(--ink); stroke-width: 2; stroke-dasharray: 3 2; }
svg.chart .line { fill: none; stroke: var(--chart-1); stroke-width: 2.5; stroke-linejoin: round; }
svg.chart .area { fill: color-mix(in srgb, var(--chart-1) 14%, transparent); }
svg.chart .dot { fill: var(--chart-2); stroke: var(--field); stroke-width: 2; }
svg.chart .traced-bar { stroke: var(--mark); stroke-width: 3; paint-order: stroke; }

.front .charts { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s5); margin: var(--s5) 0 var(--s3); }
.front .charts figure { margin: 0; padding: var(--s4); background: var(--field); border: 1px solid var(--line); border-radius: 4px; }
.front .charts figcaption { font: 600 var(--t-body)/1.3 var(--serif); color: var(--ink); margin-bottom: var(--s3); }
.front .charts .sample { display: block; font: 600 var(--t-label)/1.4 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }

/* The name, as a dictionary gives it, laid over a photograph from the brand's
   mock-ups. The one place on the front door that is decoration, so it is the
   one place that may be beautiful for its own sake. */
.front section.name { display: grid; grid-template-columns: 1.15fr 1fr; align-items: center; }
.front .name .photo { grid-column: 1 / 2; grid-row: 1; width: 100%; height: auto; border-radius: 4px; }
.front figure.entry {
  grid-column: 2 / 3; grid-row: 1; margin: 0 0 0 calc(-1 * var(--s7)); position: relative;
  background: var(--field); border: 1px solid var(--line); border-top: 4px double var(--bar);
  border-radius: 2px; box-shadow: var(--shadow); padding: var(--s6) var(--s6) var(--s5);
  font-family: var(--sans); color: var(--ink);
}
.front figure.entry::after {
  content: ""; position: absolute; right: var(--s5); top: var(--s5); width: 2.4rem; height: 2.4rem;
  background: url("brand/favicon.997eab0c2cf0.svg") center / contain no-repeat; opacity: .9;
}
.front .entry p { margin: 0; }
.front .entry .hw { display: flex; align-items: baseline; gap: var(--s3); flex-wrap: wrap; }
.front .entry dfn {
  font: 600 2.6rem/1 var(--serif); font-style: normal; letter-spacing: -.02em;
  text-decoration: underline; text-decoration-color: var(--mark); text-decoration-thickness: 4px; text-underline-offset: 6px;
}
.front .entry .ipa { font: 400 var(--t-body) var(--sans); color: var(--muted); letter-spacing: .02em; }
.front .entry .ipa b { color: var(--ink); }
.front .entry .pos { margin-top: var(--s3); color: var(--accent); font: 600 var(--t-body) var(--serif); }
.front .entry ol.senses { margin: var(--s4) 0; padding: 0; list-style: none; counter-reset: sense; display: grid; gap: var(--s2); }
.front .entry ol.senses li { counter-increment: sense; display: grid; grid-template-columns: 1.4rem 1fr; font-size: 1.05rem; line-height: 1.45; }
.front .entry ol.senses li::before { content: counter(sense); font: 600 1.05rem var(--serif); color: var(--accent); }
.front .entry .example { font-size: var(--t-body); color: var(--dim); border-left: 2px solid var(--mark); padding-left: var(--s3); }
.front .entry .example q { display: block; font-style: italic; color: var(--ink); quotes: "“" "”"; }
.front .entry .lbl { display: block; font: 600 var(--t-label)/1.4 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin: var(--s4) 0 var(--s2); }
.front .entry .syn ul { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: var(--s2); }
.front .entry .syn li { font: 400 var(--t-small)/1 var(--sans); padding: var(--s1) var(--s2); border: 1px solid var(--line); border-radius: 999px; background: var(--raised); color: var(--dim); }
.front .entry .ety { font-size: var(--t-small); color: var(--dim); line-height: 1.5; }

.front table.rows th { text-transform: none; letter-spacing: 0; font: 600 var(--t-body)/1.4 var(--serif); color: var(--ink); width: 30%; position: static; background: transparent; border-bottom: 1px solid var(--line-soft); white-space: normal; padding: var(--s3) var(--s4) var(--s3) 0; }
.front table.rows td { font-size: var(--t-body); padding: var(--s3) 0; }
.front table.rows tr:hover { background: transparent; }

.front ol.steps { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: var(--s5); counter-reset: step; }
.front ol.steps li { border-top: 2px solid var(--bar); padding-top: var(--s3); }
.front ol.steps li::before { counter-increment: step; content: counter(step, decimal-leading-zero); display: block; font-family: var(--mono); color: var(--muted); font-size: var(--t-small); margin-bottom: var(--s1); }

.front section.band { background: var(--bar); color: var(--on-bar); padding: var(--s7) var(--s6); border-top: 0; border-radius: 4px; }
.front section.band h2 { color: var(--on-bar); }
.front section.band p { color: var(--bar-dim); }

.front .pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s7); }
.front .start { text-align: left; }

footer.front-foot {
  display: flex; align-items: center; gap: var(--s4); flex-wrap: wrap;
  background: var(--bar); color: var(--on-bar); padding: var(--s5); margin-top: var(--s6);
}
footer.front-foot a { color: var(--bar-dim); }
footer.front-foot .dim-on-bar { color: var(--bar-dim); }
footer.front-foot .spacer { flex: 1 1 auto; }

@media (max-width: 52rem) {
  .front .hero, .front .pair, .front .charts, .front section.name { grid-template-columns: 1fr; }
  .front figure.entry { grid-column: 1; grid-row: 2; margin: calc(-1 * var(--s6)) var(--s4) 0; padding: var(--s5); }
}
@media (max-width: 40rem) {
  header.bar .sections-nav { display: none; }
  .front h1.display, .front .display-2 { font-size: var(--t-title); }
  .front section.band { padding: var(--s5) var(--s4); }
  .front dl.kpis { grid-template-columns: 1fr 1fr; }
  .front .entry dfn { font-size: 2.1rem; }
  .front table.rows th, .front table.rows td { display: block; width: auto; padding: var(--s1) 0; }
  .front table.rows th { padding-top: var(--s3); border-bottom: 0; }
}

/* --- phone ------------------------------------------------------------------
   Usable for approval and enquiry; bulk entry assumes a keyboard and a wide
   screen. NFR-7.7. */

@media (max-width: 40rem) {
  main { padding: var(--s4) var(--s3) var(--s7); }
  h1 { font-size: 1.3rem; }
  header.bar { padding: var(--s2) var(--s3); gap: var(--s3); }
  .sections { gap: var(--s4); }
  table { font-size: .84rem; }
  th, td { padding: var(--s2); }
}

/* --- paper ------------------------------------------------------------------
   A statement is taken to a board meeting. Print the figures and nothing else. */

@media print {
  :root {
    color-scheme: light;
    --ink: #000; --dim: #000; --muted: #444; --bg: #fff;
    --line: #bbb; --line-soft: #ddd; --rule: #000;
  }
  body { background: #fff; color: #000; font-size: 10.5pt; }
  header.bar, .no-print, form.filters, form, button, .sections, .org-side { display: none !important; }
  main.with-org { display: block; }
  main { max-width: none; padding: 0; }
  a { color: #000; text-decoration: none; }
  th { background: #fff; color: #000; position: static; }
  table { font-size: 9.5pt; }
  tr, td, th { border-color: #999 !important; }
  tr.total td { border-bottom: 3px double #000; }
  h1 { font-size: 15pt; }
  /* A table should not be split across a page break mid-figure. */
  tr, .note { page-break-inside: avoid; }
}