/* ============================================================================
   LEDGER — the house visual language
   ----------------------------------------------------------------------------
   One stylesheet, used by every project. The structure travels; the colour does
   not. Each project sets one accent and inherits everything else, so a TidyCheck
   report and a GitFoundry report are recognisably siblings without being twins.

   Home:     ~/agent-os/design/ledger.css
   Docs:     ~/agent-os/design/README.md
   Specimen: ~/agent-os/design/preview.html

   Scope: documents, internal tools, and public sites.
   Applying it to a live public surface is still a preview-and-approve decision
   (KI-AESTHETIC-APPROVAL-GATE). This file is the toolkit, not the permission.

   Version: 1.0.0 — 2026-08-16
   ========================================================================== */

/* ---------------------------------------------------------------------------
   1. TOKENS — light is the base. Every colour is defined here and nowhere else.
   A colour defined only inside a media query or [data-theme] block will fail in
   the "system default" state, which is what most readers actually see.
   --------------------------------------------------------------------------- */

:root {
  /* Neutrals. Warm-grey paper, near-black ink. Chosen, not inherited: the greys
     carry a faint green-grey bias so they sit under any accent without clashing. */
  --paper:        #F0F0EC;   /* page ground */
  --card:         #FFFFFF;   /* raised surface */
  --sunken:       #E7E7E2;   /* inset surface, table heads */
  --ink:          #080808;   /* primary text */
  --muted:        #5A5A5A;   /* secondary text, captions */
  --line:         #B8B8B0;   /* borders that must be seen */
  --rule:         #D9D9D2;   /* borders that must not be noticed */

  /* The one per-project variable. Override this and nothing else. */
  --accent:       #3A6B94;
  --accent-soft:  #E4EBF1;   /* accent at ~8% over paper, for pill grounds */
  --accent-ink:   #FFFFFF;   /* text on a solid accent fill */

  /* Semantic state. Separate from the accent on purpose — a warning must not
     change meaning when a project changes its accent. */
  --warn:         #8A2C25;
  --warn-soft:    #F2E3E1;
  --good:         #2F6B4F;
  --good-soft:    #E1EDE6;

  --shadow-1: 0 1px 2px rgba(8,8,8,.05);
  --shadow-2: 0 1px 2px rgba(8,8,8,.05), 0 8px 24px -18px rgba(8,8,8,.35);

  /* Type roles.
     display — Charis SIL, self-hosted (SIL OFL 1.1), a Bitstream Charter
       derivative. It leads the stack deliberately: Iowan Old Style is an Apple
       system font, free on a Mac but NOT licensed for embedding, so preferring
       it would show the author one face and every Windows visitor another.
       Iowan and Charter stay behind it as offline fallbacks only.
     copy    — the same serif, for running prose. Applied to an explicit list of
       body-copy selectors, never to interface chrome (see "Prose type" below).
     body    — Switzer (Fontshare, free for commercial use, self-hosted). Owns
       every control: buttons, inputs, labels, nav, tables, eyebrows.
     mono    — system stack, nothing to download or license. */
  --font-display: "Charis SIL", "Iowan Old Style", "Charter", "XCharter",
                  "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --font-copy:    var(--font-display);
  --font-body:    "Switzer", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono:    ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* Type scale — 1.25 major third, rounded to whole pixels. Stay on it. */
  --t-xs:   11.5px;
  --t-sm:   13.5px;
  --t-base: 17px;
  --t-lg:   20px;
  --t-xl:   25px;
  --t-2xl:  31px;
  --t-3xl:  39px;
  --t-4xl:  56px;

  /* Space scale — 4px base. Layout uses gap, not stacked margins. */
  --s-1: 4px;   --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
  --s-5: 22px;  --s-6: 32px;  --s-7: 52px;  --s-8: 72px;

  --radius: 3px;          /* nearly square. The grid stays untouched. */
  --measure: 68ch;        /* reading width */
  --wrap: 1120px;         /* page width */
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:       #121413;
    --card:        #1A1D1C;
    --sunken:      #0D0F0E;
    --ink:         #E9E9E3;
    --muted:       #9B9B94;
    --line:        #3A3E3D;
    --rule:        #2A2E2D;
    --accent:      #86AFD1;
    --accent-soft: #1E2A33;
    --accent-ink:  #0B0D0C;
    --warn:        #D3897F;
    --warn-soft:   #2E1F1D;
    --good:        #7FBF9C;
    --good-soft:   #17251E;
    --shadow-1: 0 1px 2px rgba(0,0,0,.4);
    --shadow-2: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px -18px rgba(0,0,0,.9);
  }
}

:root[data-theme="dark"] {
  --paper:       #121413;
  --card:        #1A1D1C;
  --sunken:      #0D0F0E;
  --ink:         #E9E9E3;
  --muted:       #9B9B94;
  --line:        #3A3E3D;
  --rule:        #2A2E2D;
  --accent:      #86AFD1;
  --accent-soft: #1E2A33;
  --accent-ink:  #0B0D0C;
  --warn:        #D3897F;
  --warn-soft:   #2E1F1D;
  --good:        #7FBF9C;
  --good-soft:   #17251E;
  --shadow-1: 0 1px 2px rgba(0,0,0,.4);
  --shadow-2: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px -18px rgba(0,0,0,.9);
}

/* ---------------------------------------------------------------------------
   2. PROJECT ACCENTS — set data-project on <html>, or override --accent by hand.
   Values read from each project's own stylesheet, not invented.
   --------------------------------------------------------------------------- */

[data-project="tidycheck"] { --accent: #3A6B94; --accent-soft: #E4EBF1; --accent-ink: #FFFFFF; }
[data-project="gitfoundry"] { --accent: #8B6319; --accent-soft: #F3EBDA; --accent-ink: #FFFFFF; }
[data-project="books"]      { --accent: #5A4A6A; --accent-soft: #ECE7F1; --accent-ink: #FFFFFF; }
[data-project="inversa"]    { --accent: #2F6B5F; --accent-soft: #E2EDEA; --accent-ink: #FFFFFF; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"])[data-project="tidycheck"]  { --accent: #86AFD1; --accent-soft: #1E2A33; --accent-ink: #0B0D0C; }
  :root:not([data-theme="light"])[data-project="gitfoundry"] { --accent: #C9A84C; --accent-soft: #2A2413; --accent-ink: #0B0D0C; }
  :root:not([data-theme="light"])[data-project="books"]      { --accent: #B3A2C4; --accent-soft: #241E2B; --accent-ink: #0B0D0C; }
  :root:not([data-theme="light"])[data-project="inversa"]    { --accent: #7FC0B0; --accent-soft: #16251F; --accent-ink: #0B0D0C; }
}
:root[data-theme="dark"][data-project="tidycheck"]  { --accent: #86AFD1; --accent-soft: #1E2A33; --accent-ink: #0B0D0C; }
:root[data-theme="dark"][data-project="gitfoundry"] { --accent: #C9A84C; --accent-soft: #2A2413; --accent-ink: #0B0D0C; }
:root[data-theme="dark"][data-project="books"]      { --accent: #B3A2C4; --accent-soft: #241E2B; --accent-ink: #0B0D0C; }
:root[data-theme="dark"][data-project="inversa"]    { --accent: #7FC0B0; --accent-soft: #16251F; --accent-ink: #0B0D0C; }

/* ---------------------------------------------------------------------------
   3. BASE
   --------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

body {
  background: var(--paper);          /* explicit: a transparent body borrows the host's ground */
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--t-base);
  line-height: 1.6;
  margin: 0;
  padding: 0 var(--s-5) var(--s-8);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; text-wrap: balance; margin: 0; }
h1 { font-size: clamp(34px, 5.2vw, var(--t-4xl)); line-height: 1.06; letter-spacing: -.015em; }
h2 { font-size: clamp(24px, 3vw, var(--t-2xl));  line-height: 1.15; }
h3 { font-size: var(--t-lg); line-height: 1.3; }
h4 { font-family: var(--font-body); font-size: var(--t-base); font-weight: 650; letter-spacing: .01em; }
p  { margin: 0; }

a { color: var(--accent); text-underline-offset: 3px; }
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px;
}

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

::selection { background: var(--accent-soft); color: var(--ink); }

/* ---------------------------------------------------------------------------
   4-6 are OPT-IN on this site. Sections 1-3 (tokens, accents, base) are what
   TidyCheck adopted: the palette, the serif display face, the focus rings.
   Sections 4-6 are the ledger's own components, and their class names — .card,
   .section, .callout, .stat, .eyebrow, .btn, .row — are names this codebase was
   already using for its own things. Left global they silently restyle markup
   that has its own design: privacy.html's quiet inset .callout became a white
   rounded card, the essay's accent-rule .stat gained a white ground, and every
   .card in the app and the blog became a flex column with a 12px gap.
   Nothing here is deleted; it is scoped, so a page that wants the ledger's
   components opts in with class="ledger-ui" and everything else is untouched.
   --------------------------------------------------------------------------- */

.ledger-ui {

/* ---------------------------------------------------------------------------
   4. TYPE ROLES
   --------------------------------------------------------------------------- */

.eyebrow {
  font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: .18em;
  text-transform: uppercase; color: var(--muted);
}
.lede  { font-size: var(--t-lg); line-height: 1.5; }
.note  { font-size: var(--t-sm); color: var(--muted); line-height: 1.55; }
.mono  { font-family: var(--font-mono); font-size: .88em; }
.nums  { font-variant-numeric: tabular-nums; }
code, kbd, samp { font-family: var(--font-mono); font-size: .88em; }

/* ---------------------------------------------------------------------------
   5. LAYOUT
   --------------------------------------------------------------------------- */

.wrap   { max-width: var(--wrap); margin: 0 auto; }
.prose  { max-width: var(--measure); }
.stack  { display: flex; flex-direction: column; gap: var(--s-5); }
.stack-tight { display: flex; flex-direction: column; gap: var(--s-3); }
.row    { display: flex; flex-wrap: wrap; gap: var(--s-4); align-items: center; }
.scroll-x { overflow-x: auto; }

.masthead { border-bottom: 1px solid var(--line); padding: var(--s-8) 0 var(--s-6);
            display: flex; flex-direction: column; gap: var(--s-4); }
.section  { padding: var(--s-7) 0 0; display: flex; flex-direction: column; gap: var(--s-5); }
.sec-head { display: flex; flex-direction: column; gap: var(--s-2); }
.page-foot { margin-top: var(--s-7); padding-top: var(--s-5); border-top: 1px solid var(--line); }

/* ---------------------------------------------------------------------------
   6. COMPONENTS
   --------------------------------------------------------------------------- */

/* 6.1 Stat strip — headline numbers, hairline-separated. .is-zero marks a
   number that ought to worry you. */
.strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
         gap: 1px; background: var(--line); border: 1px solid var(--line);
         border-radius: var(--radius); overflow: hidden; }
.stat  { background: var(--card); padding: var(--s-4) var(--s-5);
         display: flex; flex-direction: column; gap: 3px; }
.stat b { font-family: var(--font-display); font-size: var(--t-2xl); font-weight: 600;
          font-variant-numeric: tabular-nums; line-height: 1; }
.stat span { font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em;
             text-transform: uppercase; color: var(--muted); }
.stat.is-zero b { color: var(--warn); }
.stat.is-good b { color: var(--good); }

/* 6.2 Ledger table */
.tablewrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); }
.ledger { border-collapse: collapse; width: 100%; min-width: 640px; font-size: 15px; }
.ledger th, .ledger td { text-align: left; padding: var(--s-3) var(--s-4);
                         border-bottom: 1px solid var(--rule); vertical-align: top; }
.ledger thead th { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .12em;
                   text-transform: uppercase; color: var(--muted); font-weight: 500;
                   background: var(--sunken); }
.ledger tbody tr:last-child td { border-bottom: 0; }
.ledger td.num { font-variant-numeric: tabular-nums; }

/* 6.3 Status pill — state as shape and colour, not only as a word */
.pill { display: inline-block; font-family: var(--font-mono); font-size: 10.5px;
        letter-spacing: .08em; text-transform: uppercase; padding: 3px 8px;
        border-radius: 2px; white-space: nowrap; border: 1px solid var(--line); color: var(--muted); }
.pill.is-live   { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.pill.is-idle   { border-color: var(--line);   color: var(--muted); }
.pill.is-broken { border-color: var(--warn);   color: var(--warn);  background: var(--warn-soft); }
.pill.is-done   { border-color: var(--good);   color: var(--good);  background: var(--good-soft); }

/* 6.4 Figure — a drawing plus the claim it makes */
figure { margin: 0; display: flex; flex-direction: column; gap: var(--s-3); }
.figbox { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
          padding: var(--s-5); overflow-x: auto; box-shadow: var(--shadow-2); }
.figbox svg { display: block; width: 100%; height: auto; }
figcaption { font-size: var(--t-sm); color: var(--muted); max-width: var(--measure); }

/* Diagram encoding, for hand-authored inline SVG */
.d-box { fill: var(--card); stroke: var(--line); stroke-width: 1.25; }
.d-box.is-live   { stroke: var(--accent); stroke-width: 1.75; }
.d-box.is-idle   { stroke: var(--muted); }
.d-box.is-broken { stroke: var(--warn); stroke-width: 1.75; stroke-dasharray: 5 4; }
.d-box.is-todo   { stroke: var(--line); stroke-dasharray: 2 4; }
.d-lbl  { fill: currentColor; font-family: var(--font-body); font-size: 13px; }
.d-lbl.sm   { font-size: 11.5px; fill: var(--muted); }
.d-lbl.mono { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .1em;
              text-transform: uppercase; fill: var(--muted); }
.d-flow { stroke: var(--muted); stroke-width: 1.25; fill: none; }
.d-flow.is-accent { stroke: var(--accent); stroke-width: 1.5; }
.d-flow.is-dash   { stroke-dasharray: 4 4; }
.d-flow.is-bad    { stroke: var(--warn); stroke-width: 1.5; stroke-dasharray: 5 4; }

.legend { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); font-size: var(--t-sm); color: var(--muted); }
.key { display: inline-flex; align-items: center; gap: var(--s-2); }
.swatch { width: 22px; height: 11px; border-radius: 2px; background: var(--card); border: 1.75px solid var(--line); }
.swatch.is-live { border-color: var(--accent); }
.swatch.is-idle { border-color: var(--muted); }
.swatch.is-broken { border-color: var(--warn); border-style: dashed; }
.swatch.is-todo { border-style: dotted; }

/* 6.5 Callout — one point, marked by a rule rather than a box */
.callout { border-left: 2px solid var(--accent); background: var(--card);
           padding: var(--s-4) var(--s-5); border-radius: 0 var(--radius) var(--radius) 0;
           display: flex; flex-direction: column; gap: var(--s-2); }
.callout.is-warn { border-left-color: var(--warn); }
.callout.is-good { border-left-color: var(--good); }

/* 6.6 Numbered plan — numbers only where order carries meaning */
.plan { list-style: none; counter-reset: step; margin: 0; padding: 0;
        display: flex; flex-direction: column; gap: 1px; background: var(--line);
        border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.plan > li { counter-increment: step; background: var(--card); padding: var(--s-5);
             display: grid; grid-template-columns: 40px 1fr; gap: var(--s-5); }
.plan > li::before { content: counter(step, decimal-leading-zero);
                     font-family: var(--font-mono); font-size: 12px; color: var(--accent);
                     letter-spacing: .06em; padding-top: 4px; }
.plan .why { font-size: 15px; color: var(--muted); }

/* 6.7 Card */
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
        padding: var(--s-5); box-shadow: var(--shadow-1);
        display: flex; flex-direction: column; gap: var(--s-3); }

/* 6.8 Controls — for tools and product UI */
.btn { font-family: var(--font-body); font-size: 15px; font-weight: 600; line-height: 1;
       padding: 12px 18px; border-radius: var(--radius); border: 1px solid var(--ink);
       background: var(--ink); color: var(--paper); cursor: pointer; }
.btn:hover { opacity: .88; }
.btn.is-quiet { background: transparent; color: var(--ink); }
.btn.is-accent { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn[disabled] { opacity: .45; cursor: not-allowed; }

.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: .12em;
               text-transform: uppercase; color: var(--muted); }
.field input, .field select, .field textarea {
  font-family: inherit; font-size: 15px; color: var(--ink); background: var(--card);
  border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; width: 100%;
}
.field .hint { font-size: var(--t-sm); color: var(--muted); }
.field .error { font-size: var(--t-sm); color: var(--warn); }

ul.tight { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; font-size: 15.5px; }
ul.tight li::marker { color: var(--muted); }

}
/* end .ledger-ui — sections 4-6 above are opt-in */

/* ---------------------------------------------------------------------------
   7. RESPONSIVE + MOTION
   Split along the same line: the body rules belong to the base layer and stay
   global; anything naming a component class is scoped like its section.
   --------------------------------------------------------------------------- */

@media (max-width: 640px) {
  body { font-size: 16px; padding: 0 var(--s-4) var(--s-7); }
  .ledger-ui .masthead { padding-top: var(--s-7); }
  .ledger-ui .plan > li { grid-template-columns: 1fr; gap: var(--s-2); }
}

@media (prefers-reduced-motion: no-preference) {
  a { transition: opacity 140ms ease, background-color 140ms ease; }
  .ledger-ui .btn { transition: opacity 140ms ease, background-color 140ms ease; }
}

@media print {
  body { background: #fff; color: #000; padding: 0; }
  .ledger-ui .figbox, .ledger-ui .card, .ledger-ui .tablewrap { box-shadow: none; }
}