/* Tokens first: the whole console is set in these, and dark redefines the colours only.
   Spacing and type are scales rather than numbers repeated across rules, so a change to the
   density is one line; `[data-density=comfortable]` loosens the rows for a person who wants
   air over rows on screen. */
:root {
    --s-1:2px; --s-2:4px; --s-3:6px; --s-4:8px; --s-5:12px; --s-6:16px; --s-7:24px; --s-8:32px;
    --fs-0:11px; --fs-1:12px; --fs-2:13px; --fs-3:14px; --fs-4:16px; --fs-5:20px;
    --lh:1.45;
    --sans:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
    --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
    --r-1:3px; --r-2:5px; --r-3:8px; --r-pill:999px;
    --z-thead:1; --z-pin:2; --z-selbar:15; --z-picker:20; --z-nav:30; --z-dialog:50;
    --row-y:.38rem; --cell-x:.6rem; --nav-w:200px;
    --motion:120ms;
}
[data-density=comfortable] { --row-y:.55rem; --cell-x:.8rem; --lh:1.55; }
@media (prefers-reduced-motion: reduce) { :root { --motion:0ms; } }
/* Light is the default set; dark redefines the same tokens rather than adding
   rules, so every component gets both themes from one place. The previous version
   set `color-scheme: light dark` and then used light-mode greys and a dark blue
   link colour, which the browser dutifully painted on a dark background. */
:root {
    color-scheme: light dark;
    --bg:#ffffff; --surface:#f6f7f9; --raised:#ffffff;
    --line:#dde1e6; --line-strong:#c3c9d0;
    --text:#15181d; --muted:#5c6673;
    --accent:#12558f; --accent-soft:rgba(18,85,143,.09);
    --bad:#a4271b; --bad-soft:rgba(164,39,27,.09);
    --warn:#8a5a00; --warn-soft:rgba(138,90,0,.10);
    --good:#1a6c33; --good-soft:rgba(26,108,51,.10);
    --hover:rgba(20,30,45,.045);
    --kind-tax:#5b4bc4; --kind-tax-group:#0f7b8a; --kind-account:#4a6072;
    --kind-position:#a03a7a; --kind-journal:#8a5a2b; --kind-reconcile:#3f7f2f;
    --kind-tax-soft:#ecebfa; --kind-tax-group-soft:#dff1f3;
    --kind-account-soft:#eef1f4; --kind-position-soft:#fae9f3;
    --kind-journal-soft:#f7eee2; --kind-reconcile-soft:#e7f3e2;
    --shadow:0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.05);
}
@media (prefers-color-scheme: dark) {
    :root {
        --bg:#12151a; --surface:#171b21; --raised:#1b2028;
        --line:#2b323c; --line-strong:#414b57;
        --text:#e4e8ee; --muted:#98a3b2;
        --accent:#7cb8f7; --accent-soft:rgba(124,184,247,.13);
        --bad:#ff9b91; --bad-soft:rgba(255,155,145,.13);
        --warn:#e8b563; --warn-soft:rgba(232,181,99,.13);
        --good:#79d68d; --good-soft:rgba(121,214,141,.13);
        --hover:rgba(255,255,255,.045);
        --kind-tax:#a99bf5; --kind-tax-group:#5fc6d6; --kind-account:#9fb3c4;
        --kind-position:#e89bc9; --kind-journal:#d6a06a; --kind-reconcile:#8fce7a;
        --kind-tax-soft:#282542; --kind-tax-group-soft:#17333a;
        --kind-account-soft:#232a33; --kind-position-soft:#3a2333;
        --kind-journal-soft:#352a20; --kind-reconcile-soft:#203223;
        --shadow:0 1px 2px rgba(0,0,0,.4);
    }
}
* { box-sizing:border-box; }
body {
    margin:0; background:var(--bg); color:var(--text);
    font:var(--fs-2)/var(--lh) var(--sans);
    -webkit-font-smoothing:antialiased;
}
code, pre, kbd, .mono { font-family:var(--mono); }
.num, .count, .ord, .tile .n, .pill { font-variant-numeric:tabular-nums; }
.app { display:grid; grid-template-columns:var(--nav-w) minmax(0,1fr); min-height:100vh; }
/* The first tab stop on every page skips the sidebar; it is invisible until it is focused. */
.skip { position:absolute; left:var(--s-4); top:-3rem; z-index:var(--z-dialog); padding:var(--s-3) var(--s-5);
        background:var(--accent); color:var(--bg); border-radius:var(--r-2); }
.skip:focus { top:var(--s-4); outline:2px solid var(--bg); }
.side {
    position:sticky; top:0; height:100vh; overflow:auto; padding:1rem .9rem;
    background:var(--surface); border-right:1px solid var(--line);
    display:flex; flex-direction:column; gap:.2rem;
}
.side .brand {
    font-size:.78rem; letter-spacing:.06em; text-transform:uppercase; font-weight:700;
    color:var(--muted); margin:0 .5rem .8rem;
}
.side a {
    display:flex; justify-content:space-between; align-items:center; gap:.5rem;
    padding:.42rem .6rem; border-radius:.4rem; color:var(--text); text-decoration:none;
    font-weight:500;
}
.side a:hover { background:var(--hover); text-decoration:none; }
.side a.active { background:var(--accent-soft); color:var(--accent); font-weight:600; }
.side .group {
    font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted);
    font-weight:700; margin:.9rem .6rem .25rem;
}
.side .who { margin-top:auto; padding:.6rem .6rem 0; color:var(--muted); font-size:.8rem;
             border-top:1px solid var(--line); }
.side .who a { display:inline; padding:0; font-weight:500; color:var(--accent); }
main { padding:var(--s-6) var(--s-7) var(--s-8); min-width:0; }
/* One head to every page: the trail, then the title with the page's primary action at the
   other end, then the views of this subject as tabs. Pages fill the blocks; the shell lays
   them out. */
.head { margin-bottom:var(--s-6); }
.ph { display:flex; align-items:center; justify-content:space-between; gap:var(--s-4) var(--s-6);
      flex-wrap:wrap; }
.ph h1 { display:flex; align-items:center; gap:.45rem; flex-wrap:wrap; min-width:0;
         font-size:var(--fs-5); margin:0; font-weight:650; line-height:1.25; }
.ph h1 .pill, .ph h1 .tag { font-weight:600; }
.ph h1 code { font-size:.85em; }
.ph .acts-right { display:flex; align-items:center; gap:var(--s-4); flex-wrap:wrap; margin-left:auto; }
.ph .acts-right form { display:inline-flex; gap:var(--s-3); align-items:center; flex-wrap:wrap; margin:0; }
.ph .acts-right button { margin:0; }
.head .crumb { margin-bottom:var(--s-2); }
.tabs { display:flex; gap:var(--s-1); flex-wrap:wrap; margin:var(--s-4) 0 0; border-bottom:1px solid var(--line); }
.tabs a { padding:var(--s-3) var(--s-5); color:var(--muted); text-decoration:none; border-bottom:2px solid transparent;
          margin-bottom:-1px; font-weight:500; }
.tabs a:hover { color:var(--text); text-decoration:none; }
.tabs a[aria-current=page] { color:var(--accent); border-bottom-color:var(--accent); font-weight:600; }
.ph .sub { color:var(--muted); font-size:.85rem; }
.ph form { display:flex; gap:.4rem; align-items:center; flex-wrap:wrap; }

.tiles { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
         gap:.6rem; margin-bottom:1rem; }
/* A triage row is read, not filled: four counts at the head of a page want to stay the
   size of counts rather than stretch across the width the way a summary of an estate does. */
.tiles.tight { grid-template-columns:repeat(auto-fit,minmax(140px,186px));
               justify-content:start; }
.tile { display:block; padding:.65rem .85rem; border:1px solid var(--line);
        border-radius:.5rem; background:var(--raised); box-shadow:var(--shadow);
        text-decoration:none; color:var(--text); }
.tile:hover { text-decoration:none; border-color:var(--accent); }
.tile .n { font-size:1.55rem; font-weight:700; font-variant-numeric:tabular-nums;
           line-height:1.15; }
.tile .l { font-size:.7rem; text-transform:uppercase; letter-spacing:.06em;
           color:var(--muted); font-weight:700; }
.tile .s { font-size:.78rem; color:var(--muted); }
.tile.bad .n { color:var(--bad); } .tile.warn .n { color:var(--warn); }
.tile.good .n { color:var(--good); }

h2 {
    font-size:.72rem; text-transform:uppercase; letter-spacing:.09em;
    color:var(--muted); margin:1.3rem 0 .45rem; font-weight:700;
    display:flex; align-items:center; gap:.6rem;
}
h2:first-of-type { margin-top:.2rem; }
h2 a { font-weight:600; text-transform:none; letter-spacing:0; }
h2 .count { font-weight:600; color:var(--text); }
.lead { font-size:1.15rem; line-height:1.3; margin:.1rem 0 .3rem; font-weight:650; }
.crumb { color:var(--muted); font-size:.8rem; margin-bottom:.3rem; }
.crumb a { color:var(--muted); }
.note { color:var(--muted); font-size:.85rem; }
.meta { color:var(--muted); font-size:.85rem; display:flex; gap:.9rem; flex-wrap:wrap;
        margin:.1rem 0 .8rem; }

a { color:var(--accent); text-underline-offset:.15em; }
a:hover { text-decoration:underline; }

.tw { border:1px solid var(--line); border-radius:.5rem; overflow:auto;
      background:var(--raised); box-shadow:var(--shadow); margin-bottom:.9rem; }
table { border-collapse:collapse; width:100%; }
th, td { text-align:left; padding:var(--row-y) var(--cell-x); vertical-align:top;
         border-bottom:1px solid var(--line); overflow-wrap:anywhere; }
thead th, tr:first-child th {
    position:sticky; top:0; background:var(--surface); z-index:var(--z-thead);
    font-size:.7rem; text-transform:uppercase; letter-spacing:.06em;
    color:var(--muted); font-weight:700;
}
td pre { white-space:pre-wrap; overflow-wrap:anywhere; }
tbody tr:last-child td, tr:last-child td { border-bottom:none; }
tr:hover td { background:var(--hover); }
.num { text-align:right; font-variant-numeric:tabular-nums; }

code, pre {
    font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
    font-size:.86em; color:var(--text);
}
td code { color:var(--text); }

.tag {
    display:inline-block; padding:.02rem .4rem; border-radius:.3rem;
    font-size:.7rem; font-weight:600; letter-spacing:.02em; white-space:nowrap;
    background:var(--accent-soft); color:var(--accent); border:1px solid transparent;
}
.tag.plain { background:transparent; color:var(--muted); border-color:var(--line-strong); }
.pill { display:inline-block; padding:.1rem .55rem; border-radius:1rem; font-size:.75rem;
        font-weight:600; white-space:nowrap; }
.pill.bad { background:var(--bad-soft); color:var(--bad); }
.pill.warn { background:var(--warn-soft); color:var(--warn); }
.pill.good { background:var(--good-soft); color:var(--good); }
.pill.plain { background:var(--hover); color:var(--muted); }
/* a count that is also a filter: the label reads the same, and says when it is on */
button.pill { border:1px solid transparent; cursor:pointer; font:inherit; font-size:.75rem; }
button.pill:hover { border-color:currentColor; }
button.pill.on { outline:2px solid var(--accent); outline-offset:1px; }

.rule {
    border:1px solid var(--line); border-left:4px solid var(--bad);
    background:var(--bad-soft); padding:.55rem .9rem; border-radius:.5rem;
    margin:.4rem 0 .9rem;
}
.rule.ok { border-left-color:var(--good); background:var(--good-soft); }
.rule ul { margin:.3rem 0 0; padding-left:1.2rem; }
.bad { color:var(--bad); font-weight:600; }
.warn { color:var(--warn); font-weight:600; }
.good { color:var(--good); font-weight:600; }

form.inline, .inline { display:inline-flex; gap:.3rem .5rem; align-items:center; flex-wrap:wrap; vertical-align:middle; }
/* A form on a line of its own — the facts a person keeps about an instance, one line each. */
form.line { display:flex; gap:.4rem .6rem; align-items:center; flex-wrap:wrap; margin:.3rem 0; }
th.label { width:14rem; }
td pre { margin:0; }
td.indent { padding-left:1.6rem; }
label.opt { margin-left:.6rem; }
input, select, textarea, button {
    font:inherit; font-size:.88rem; padding:.32rem .5rem; color:var(--text);
    background:var(--raised); border:1px solid var(--line-strong);
    border-radius:.35rem;
}
input:focus, select:focus, textarea:focus, button:focus-visible {
    outline:2px solid var(--accent); outline-offset:1px; border-color:var(--accent);
}
input::placeholder, textarea::placeholder { color:var(--muted); opacity:.75; }
button {
    cursor:pointer; font-weight:600; background:var(--accent); color:var(--bg);
    border-color:var(--accent); padding:.34rem .8rem;
}
button:hover { filter:brightness(1.08); }
button.quiet, .actions button { background:transparent; color:var(--accent);
                                border-color:var(--line-strong); }
form.inline button, p button { margin-right:.4rem; }

/* The switcher carries each kind's silhouette, so the eye picks the one it wants by shape
   before it reads the word; `inline-flex` is what puts the chip and the word on one line. */
.kinds a, .kinds .here {
    display:inline-flex; align-items:center; gap:.3rem;
    margin:0 .35rem .25rem 0; padding:.1rem .45rem;
    border:1px solid var(--line-strong); border-radius:.35rem;
    text-decoration:none; font-size:.82rem; white-space:nowrap;
}
.kinds a:hover { border-color:var(--accent); text-decoration:none;
                 background:var(--accent-soft); }
.kinds .here { border-color:var(--accent); background:var(--accent-soft); color:var(--accent);
               font-weight:600; }
/* A record named beside its kind: the silhouette keeps to the first line of a name that
   wraps, instead of being pushed onto a line of its own. */
.kindline { display:flex; gap:.45rem; align-items:flex-start; min-width:0; }
.kindline > .chip { flex:none; margin-top:.15rem; }
.kindline.mid { align-items:center; }
.kindline.mid > .chip { margin-top:0; }
.actions { display:flex; gap:.6rem; align-items:center; flex-wrap:wrap;
           margin:.2rem 0 .9rem; }
.actions form { display:inline; }
.empty { padding:.8rem 1rem; color:var(--muted); }
/* A page with two things to say at once says them side by side: what a record is beside
   what companies are told about it, a layer's kinds beside what waits on it. One column
   again where there is no room for two. */
/* What narrows the table and what adds to it are the same errand, so they are one row:
   filters from the left, what this page can make from the right. */
.bar { display:flex; align-items:center; justify-content:space-between; gap:1rem;
       flex-wrap:wrap; margin:.2rem 0 .3rem; }
/* What a row is, and what can be done to it, at the two ends of its header — and on two
   lines when the column is too narrow for one. A float could not do the second part. */
/* A form laid out as label and field is not a table with a header row, and neither is a
   contribution's own heading: the first cell is a label like the ones under it, so it
   keeps its case and its weight instead of being set as the name of a column. */
table.plainhead tr:first-child th { position:static; background:transparent;
    color:var(--text); font-size:inherit; text-transform:none; letter-spacing:0; }
.rowhead { display:flex; align-items:baseline; justify-content:space-between;
           gap:.4rem 1rem; flex-wrap:wrap; white-space:normal; }
.rowhead .what { display:flex; align-items:baseline; gap:.3rem; flex-wrap:wrap; }
.rowhead .does { display:flex; align-items:center; gap:.35rem; flex-wrap:wrap; }
.bar .actions, .bar form.inline { margin:0; }
.pair { display:grid; grid-template-columns:1.4fr 1fr; gap:0 1.6rem; align-items:start; }
.pair > section { min-width:0; }
.pair.even { grid-template-columns:1fr 1fr; }
@media (max-width: 1100px) { .pair, .pair.even { grid-template-columns:1fr; } }
/* The words a page's pills stand for, read as a key rather than as a paragraph with pills
   buried in it: one pill, one line, in as many columns as the width allows. */
.key { display:grid; grid-template-columns:repeat(auto-fit,minmax(21rem,1fr));
       gap:.25rem 1.4rem; margin:.5rem 0 .8rem; }
.key > div { display:flex; gap:.5rem; align-items:baseline; }
.key .pill, .key .tag { flex:none; }

/* Wide tables size their columns to their content and scroll inside the wrapper,
   instead of squeezing twenty columns into the viewport and wrapping every word.
   The three prose-like columns keep a ceiling so a list of references wraps. */
.tw table { width:max-content; min-width:100%; }
th { white-space:nowrap; }
td.refs, td.from, td.verdict, td.wrap { max-width:22rem; white-space:normal; }
.clip { display:inline-block; max-width:24rem; overflow:hidden; text-overflow:ellipsis;
        white-space:nowrap; vertical-align:bottom; cursor:help; }
th.sel, td.sel { width:1.6rem; padding-right:0; }
th.sel input, td.sel input { margin:0; vertical-align:middle; }
table.edit td { padding:.2rem .35rem; }
input.cell { width:100%; min-width:7rem; padding:.18rem .35rem; font-size:.82rem;
             border-color:var(--line); background:transparent; }
input.cell:hover { border-color:var(--line-strong); }
input.cell.long { min-width:18rem; }
input.cell.changed, select.cell.changed { border-color:var(--warn); background:var(--warn-soft); }
input.cell-box.changed { outline:2px solid var(--warn); outline-offset:1px; }
.notice { border:1px solid var(--line); border-left:4px solid var(--good);
          background:var(--good-soft); padding:.45rem .9rem; border-radius:.5rem;
          margin:.4rem 0 .9rem; }
a.quiet-link { color:var(--muted); font-size:.8rem; }
tr.new-row td { background:var(--accent-soft); }
select.cell { width:100%; min-width:9rem; padding:.18rem .3rem; font-size:.82rem;
              background:var(--raised); color:var(--text); border-color:var(--line); }
select, select option, select optgroup { background:var(--raised); color:var(--text); }
input.cell-box { margin:.35rem 0 0 .4rem; }
tr.new-row input.cell { background:var(--raised); }

/* The code picker: an address typed against the RT 54 mask, one segment at a time. */
.picker { position:absolute; z-index:var(--z-picker); min-width:min(22rem, calc(100vw - 2rem));
          max-width:min(34rem, calc(100vw - 2rem)); margin-top:.15rem;
          background:var(--raised); border:1px solid var(--line-strong); border-radius:.4rem;
          box-shadow:0 6px 18px rgba(0,0,0,.18); font-size:.82rem; padding:.3rem 0; }
.picker .hd { padding:.25rem .7rem; color:var(--muted); font-size:.72rem; text-transform:uppercase;
              letter-spacing:.06em; }
.picker .hd b { color:var(--text); text-transform:none; letter-spacing:0; font-size:.82rem; }
.picker .opt { display:flex; gap:.7rem; padding:.22rem .7rem; cursor:pointer; align-items:baseline; }
.picker .opt:hover, .picker .opt.on { background:var(--accent-soft); }
.picker .opt code { min-width:8rem; }
.picker .opt.taken { color:var(--muted); }
.picker .opt.taken code { color:var(--muted); }
.picker .opt .n { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.picker .free-hd { border-top:1px solid var(--line); margin-top:.2rem; padding-top:.35rem; }

/* The chart as a tree, drawn as the records table every other page draws: a branch is a row
   and what it holds is indented under it, so the fold, the filter, the selection and the ghost
   line are the shared ones. What is left here is what a tree needs and a flat table does not:
   the branch's prefix set apart, the company's own records marked off inside a standard branch,
   and the row a finding's link focuses. */
.tree { margin-bottom:.9rem; }
.tree .pfx { font-weight:650; }
table.records tr.focus td { background:var(--accent-soft); box-shadow:inset 2px 0 0 var(--accent); }
table.records tr.own td:nth-child(2) { border-left:3px dashed var(--line-strong); }
table.records .twisty.ghost-here { color:var(--muted); font-weight:700; }
table.records .twisty.ghost-here:hover { color:var(--accent); }
table.records td.stand .sub { display:block; }
table.records td.act { white-space:nowrap; }

/* the ghost line: a thin "+ add here" under the row the pointer rests on, the form in place once clicked */
tr.ghost > td { padding:0 .4rem; background:transparent; border-bottom:0; }
.ghost .ghost-add { display:block; width:100%; text-align:left; padding:0 .4rem; margin:0; border:0;
                    border-top:2px dashed var(--accent); color:var(--accent); background:transparent;
                    font-size:.78rem; line-height:1.3rem; cursor:pointer; opacity:.85; }
.ghost .ghost-add:hover { opacity:1; background:var(--accent-soft); }
.ghost-form { display:flex; flex-wrap:wrap; gap:.4rem .8rem; align-items:flex-end; padding:.5rem .6rem;
              margin:.15rem 0; background:var(--accent-soft); border:1px solid var(--line); border-radius:.4rem; }
.ghost-form label { display:flex; flex-direction:column; gap:.15rem; font-size:.72rem; color:var(--muted); }
.ghost-form input.cell, .ghost-form select.cell, .ghost-form input[name=chart], .ghost-form input[name=key],
.ghost-form select[name=layer_id] { background:var(--raised); }
.icon-btn { display:inline-flex; align-items:center; gap:.3rem; vertical-align:middle; margin-left:.5rem;
            padding:.15rem .5rem; border:1px solid var(--line-strong); border-radius:.4rem; color:var(--accent);
            font-size:.78rem; font-weight:500; text-decoration:none; }
.icon-btn:hover { background:var(--hover); }
.icon-btn svg { display:block; }
.codeset { display:inline-flex; gap:.25rem; align-items:center; }
.codeset input[name=code] { font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
                            font-size:.82rem; padding:.1rem .35rem; }
.notice.bad { border-left-color:var(--bad); }
.notice.warn { border-left-color:var(--warn); }
label.also { font-size:.78rem; color:var(--muted); white-space:nowrap; }
label.also input { vertical-align:middle; margin:0 .15rem 0 .3rem; }
.pager { display:flex; gap:.9rem; align-items:center; margin:.8rem 0; color:var(--muted); font-size:.85rem; }
.diagram-wrap { height:80vh; overflow:hidden; position:relative; border:1px solid var(--line);
    border-radius:.5rem; background:var(--raised); cursor:grab; user-select:none;
    touch-action:none; contain:paint; }
.diagram-wrap.dragging { cursor:grabbing; }
.diagram-wrap.dragging .nodes, .diagram-wrap.dragging .edges { pointer-events:none; }
svg.diagram { position:absolute; top:0; left:0; display:block;
    transform-origin:0 0; will-change:transform; }
.diagram .node rect.card { fill:var(--raised); stroke:var(--line); stroke-width:1.2; }
.diagram .node .band, .diagram .node .rule, .diagram .node .spine,
.diagram .node .fold, .diagram .node .underline,
.chip .band, .chip .rule, .chip .spine, .chip .fold, .chip .underline {
    stroke:none; fill:var(--line-strong); }
.diagram .node.standard rect.card, .diagram .node.matches rect.card { stroke:var(--good); }
.diagram .node.differs rect.card { stroke:var(--warn); stroke-width:2; }
.diagram .node.missing rect.card { stroke:var(--muted); stroke-dasharray:4 3; }
.diagram .node.custom rect.card { stroke:var(--muted); }
.diagram .node.not-in-the-standard rect.card { stroke:var(--muted); stroke-dasharray:2 2; }
.diagram .node.collision rect.card, .diagram .node.hole rect.card { stroke:var(--bad); stroke-width:2; }
.diagram .node.hole rect.card { stroke-dasharray:4 3; }
.diagram .node.focus rect.card { stroke:var(--accent); stroke-width:3; }
.diagram .node text { font-size:11px; fill:var(--text); font-family:ui-monospace, monospace; }
.diagram .node text.name { fill:var(--muted); font-family:inherit; }
.diagram .node text.pill { fill:var(--bad); font-size:10px; }
.diagram .node text.carries { fill:var(--muted); font-size:10px; font-family:ui-monospace, monospace; }
.diagram .node text.kind { font-size:9.5px; font-family:inherit; font-weight:700;
    text-transform:uppercase; letter-spacing:.11em; fill:var(--line-strong); }
.diagram .node[data-model="account.tax"] text.name { font-weight:600; fill:var(--text); }
.diagram .node[data-model="account.account"] text.name { font-family:ui-monospace, monospace; }
.kindkey { display:flex; flex-wrap:wrap; gap:.2rem 1rem; align-items:center; }
.kindkey span { display:inline-flex; align-items:center; gap:.35rem; }
.chip { vertical-align:-.3rem; overflow:visible; }
.chip rect.card { fill:var(--raised); stroke:var(--line-strong); stroke-width:1.2; }
.diagram .node[data-model="account.tax"] rect.card, .chip[data-model="account.tax"] rect.card { fill:var(--kind-tax-soft); }
.diagram .node[data-model="account.tax"] .band, .diagram .node[data-model="account.tax"] .rule,
.diagram .node[data-model="account.tax"] .spine, .diagram .node[data-model="account.tax"] .fold,
.diagram .node[data-model="account.tax"] .underline, .diagram .node[data-model="account.tax"] text.kind,
.chip[data-model="account.tax"] .band, .chip[data-model="account.tax"] .rule, .chip[data-model="account.tax"] .spine,
.chip[data-model="account.tax"] .fold, .chip[data-model="account.tax"] .underline { fill:var(--kind-tax); }
.diagram .node[data-model="account.tax.group"] rect.card, .chip[data-model="account.tax.group"] rect.card { fill:var(--kind-tax-group-soft); }
.diagram .node[data-model="account.tax.group"] .band, .diagram .node[data-model="account.tax.group"] .rule,
.diagram .node[data-model="account.tax.group"] .spine, .diagram .node[data-model="account.tax.group"] .fold,
.diagram .node[data-model="account.tax.group"] .underline, .diagram .node[data-model="account.tax.group"] text.kind,
.chip[data-model="account.tax.group"] .band, .chip[data-model="account.tax.group"] .rule, .chip[data-model="account.tax.group"] .spine,
.chip[data-model="account.tax.group"] .fold, .chip[data-model="account.tax.group"] .underline { fill:var(--kind-tax-group); }
.diagram .node[data-model="account.account"] rect.card, .chip[data-model="account.account"] rect.card { fill:var(--kind-account-soft); }
.diagram .node[data-model="account.account"] .band, .diagram .node[data-model="account.account"] .rule,
.diagram .node[data-model="account.account"] .spine, .diagram .node[data-model="account.account"] .fold,
.diagram .node[data-model="account.account"] .underline, .diagram .node[data-model="account.account"] text.kind,
.chip[data-model="account.account"] .band, .chip[data-model="account.account"] .rule, .chip[data-model="account.account"] .spine,
.chip[data-model="account.account"] .fold, .chip[data-model="account.account"] .underline { fill:var(--kind-account); }
.diagram .node[data-model="account.fiscal.position"] rect.card, .chip[data-model="account.fiscal.position"] rect.card { fill:var(--kind-position-soft); }
.diagram .node[data-model="account.fiscal.position"] .band, .diagram .node[data-model="account.fiscal.position"] .rule,
.diagram .node[data-model="account.fiscal.position"] .spine, .diagram .node[data-model="account.fiscal.position"] .fold,
.diagram .node[data-model="account.fiscal.position"] .underline, .diagram .node[data-model="account.fiscal.position"] text.kind,
.chip[data-model="account.fiscal.position"] .band, .chip[data-model="account.fiscal.position"] .rule, .chip[data-model="account.fiscal.position"] .spine,
.chip[data-model="account.fiscal.position"] .fold, .chip[data-model="account.fiscal.position"] .underline { fill:var(--kind-position); }
.diagram .node[data-model="account.journal"] rect.card, .chip[data-model="account.journal"] rect.card { fill:var(--kind-journal-soft); }
.diagram .node[data-model="account.journal"] .band, .diagram .node[data-model="account.journal"] .rule,
.diagram .node[data-model="account.journal"] .spine, .diagram .node[data-model="account.journal"] .fold,
.diagram .node[data-model="account.journal"] .underline, .diagram .node[data-model="account.journal"] text.kind,
.chip[data-model="account.journal"] .band, .chip[data-model="account.journal"] .rule, .chip[data-model="account.journal"] .spine,
.chip[data-model="account.journal"] .fold, .chip[data-model="account.journal"] .underline { fill:var(--kind-journal); }
.diagram .node[data-model="account.reconcile.model"] rect.card, .chip[data-model="account.reconcile.model"] rect.card { fill:var(--kind-reconcile-soft); }
.diagram .node[data-model="account.reconcile.model"] .band, .diagram .node[data-model="account.reconcile.model"] .rule,
.diagram .node[data-model="account.reconcile.model"] .spine, .diagram .node[data-model="account.reconcile.model"] .fold,
.diagram .node[data-model="account.reconcile.model"] .underline, .diagram .node[data-model="account.reconcile.model"] text.kind,
.chip[data-model="account.reconcile.model"] .band, .chip[data-model="account.reconcile.model"] .rule, .chip[data-model="account.reconcile.model"] .spine,
.chip[data-model="account.reconcile.model"] .fold, .chip[data-model="account.reconcile.model"] .underline { fill:var(--kind-reconcile); }
.diagram a:hover rect.card { stroke:var(--accent); }
.diagram .edge { fill:none; stroke:var(--muted); stroke-width:1.2; vector-effect:non-scaling-stroke; }
.diagram .edge.matches { stroke:var(--good); }
.diagram .edge.missing { stroke-dasharray:4 3; }
.diagram .edge.custom { stroke:var(--warn); }
.diagram marker path { fill:var(--muted); }
.diagram-wrap.probing .node:not(.lit), .diagram-wrap.probing .edge:not(.lit) { opacity:.12; }
.diagram-wrap.probing .node.lit rect.card { stroke-width:2.6; }
.diagram-wrap.probing .edge.lit { stroke-width:2.4; stroke:var(--accent); }
.diagram-wrap.probing .node.lit.near rect.card { stroke:var(--accent); }
.legend a.pill.on { outline:2px solid var(--accent); }
/* the selection bar: sticks to the bottom of the viewport only while the section it acts on is
   in view — it sits inside that section, after its rows, so sticky is bounded by the section */
.selectable { position:relative; }
.selbar { position:sticky; bottom:.6rem; z-index:var(--z-selbar); display:flex; flex-wrap:wrap; gap:.5rem 1rem;
          align-items:center; margin:.6rem 0 0; padding:.5rem .9rem; background:var(--raised);
          border:1px solid var(--accent); border-radius:.5rem; box-shadow:0 6px 24px rgba(0,0,0,.18);
          font-size:.86rem; }
.selbar label { display:inline-flex; gap:.4rem; align-items:center; color:var(--muted); }
/* What cannot be undone is outlined in the colour of what it costs, wherever it stands —
   the bar over a selection, or the one button at the foot of a record's own page. */
button.danger { background:transparent; color:var(--bad); border:1px solid var(--bad); }
button.danger:hover { background:var(--bad-soft); }
/* while a selection is open every selectable row is a target, and ticked rows show it */
body.selecting tr:has(input.pick) { cursor:pointer; user-select:none; }
body.selecting tr:has(input.pick):not(.picked):hover td { background:var(--hover); }
tr.picked td { background:var(--accent-soft); }
@media (max-width: 760px) {
    .app { grid-template-columns:1fr; }
    .side { position:static; height:auto; flex-direction:row; flex-wrap:wrap; }
    .side .who { margin:0; border:0; }
}
/* A phone. The page keeps a gutter, the filters stack, the tiles pair up rather than shrinking
   their numbers to nothing, and the selection bar takes the width it needs to say what it will
   do. Tables go on scrolling inside `.tw`, which is the one thing that must not stack. */
@media (max-width: 400px) {
    main { padding:var(--s-5) var(--s-5) var(--s-8); }
    .tiles, .tiles.tight { grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); }
    .filters, form.inline { flex-direction:column; align-items:stretch; }
    .filters label, form.inline label { display:flex; flex-direction:column; gap:var(--s-2); }
    .filters input, .filters select, form.inline input, form.inline select { width:100%; }
    .selbar { left:0; right:0; border-radius:0; }
    .key { grid-template-columns:1fr; }
    .ph { gap:var(--s-4); }
    .ph .acts-right { margin-left:0; }
}

/* records in a person's words: a name over its key, one row per record, filtered by chips */
.rec { display:flex; flex-direction:column; gap:.05rem; min-width:10rem; }
.rec .nm { font-weight:600; }
.rec .ky { color:var(--muted); font-size:.72rem; font-family:var(--mono); }
.rec .ky a { color:var(--muted); }
.chips { display:flex; gap:.35rem; flex-wrap:wrap; align-items:center; margin:.35rem 0 .7rem; }
.chips input { min-width:16rem; }
.chips .pill { cursor:pointer; border:1px solid transparent; font:inherit; font-size:.75rem; font-weight:600; }
.chips .pill:hover { border-color:currentColor; }
.chips .pill.on { outline:2px solid var(--accent); outline-offset:1px; }
.diff { display:block; font-size:.8rem; line-height:1.45; }
.diff b { font-weight:600; }
.diff .was { color:var(--muted); text-decoration:line-through; text-decoration-color:var(--bad); }
.diff .now { color:var(--text); }
.acts { display:flex; flex-direction:column; gap:.15rem; align-items:flex-start; }
.acts form { display:inline; }
/* A row ends in one action. The others are there, a word wide, and anything that needs
   typing — a key to link to, a code to set, a reason to dispose by — waits behind that
   word until it is asked for, so a table's right edge stays a column and not a thicket. */
.acts details.more { align-self:stretch; }
.acts details.more > summary { color:var(--muted); font-size:.8rem; cursor:pointer;
                               list-style:none; padding:.05rem 0; }
.acts details.more > summary::-webkit-details-marker { display:none; }
.acts details.more > summary::before { content:"▸"; margin-right:.25rem; }
.acts details.more[open] > summary::before { content:"▾"; }
.acts details.more > summary:hover { color:var(--accent); }
.acts details.more .inner { display:flex; flex-direction:column; gap:.25rem;
                            align-items:flex-start; padding:.25rem 0 .1rem; }

/* --- Action buttons ---------------------------------------------------------------
   What a person presses to answer a row: a short word, its family's colour, and the
   detail the word leaves out on the line under it. They sit in a grid, one cell each,
   so a row with four answers is four cells rather than a paragraph of sentences and
   three of them behind a fold.

   The colour is the answer to the only question a person has before pressing: which
   side moves. `records.ACTION_INTENTS` names the five and says what each one means,
   and `action_key()` draws that table under the queue. */
.act-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(6.5rem,1fr));
            gap:.25rem; align-items:stretch; min-width:11rem; }
.act-grid > * { margin:0; }
form.act-cell { display:flex; gap:.25rem; align-items:stretch; margin:0; }
form.act-cell.wide { grid-column:1 / -1; }
form.act-cell > .act { flex:1 1 auto; }
form.act-cell.wide > .act { flex:0 0 auto; }
form.act-cell input[type=text], form.act-cell input:not([type]) { flex:1 1 5rem; min-width:0; width:auto; }
.act, a.act, .acts .act {
    display:flex; flex-direction:column; align-items:flex-start; justify-content:center;
    gap:.02rem; text-align:left; text-decoration:none;
    padding:.26rem .45rem; font-size:.82rem; font-weight:600; line-height:1.25;
    border:1px solid var(--line); border-left-width:3px; border-radius:var(--r-2);
    background:var(--raised); color:var(--text);
    /* a long detail never widens its own cell: the grid gives each answer the same room,
       and what does not fit is an ellipsis, not the next button pushed off the table */
    min-width:0; overflow:hidden;
}
.act .an { white-space:nowrap; }
.acts .act { width:100%; }
.act .ad { font-weight:400; font-size:.72rem; color:var(--muted);
           max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.act:hover { filter:none; border-color:var(--line-strong); }
.act:hover .ad { color:var(--text); }
.act.act-standard { border-left-color:var(--accent); background:var(--accent-soft); color:var(--accent); }
.act.act-company { border-left-color:var(--good); background:var(--good-soft); color:var(--good); }
.act.act-apart { border-left-color:var(--warn); background:var(--warn-soft); color:var(--warn); }
.act.act-remove { border-left-color:var(--bad); background:var(--bad-soft); color:var(--bad); }
.act.act-undo { border-left-color:var(--line-strong); background:var(--surface); color:var(--muted); }
.act.sample { display:inline-flex; width:auto; cursor:default; padding:.1rem .4rem; overflow:visible; }
.key .act { flex:none; }
/* One verdict to a row: the standing pill first, and what became of it under it, so a
   record carrying three notes takes the same shape as one carrying none. */
table.records td.stand .pill { display:block; width:fit-content; }
table.records td.stand .pill + .pill { margin-top:.2rem; }
table.records td.stand .sub { display:block; }
.posts { font-size:.8rem; margin:0; padding:0; list-style:none; }
.posts li { white-space:normal; }
.tw table.records { width:100%; table-layout:auto; }
table.records td.stand { min-width:9rem; }
table.records td.diffs { min-width:12rem; }
table.records td.acts-cell { white-space:normal; }
table.records td.acts-cell .acts { white-space:nowrap; }
table.records td.nw { white-space:nowrap; }
.posts .when { color:var(--muted); }
table.records td { vertical-align:middle; }
table.records tr.grp td { background:var(--surface); font-weight:600; padding-top:.55rem; }
table.records tr.grp td .sub { font-weight:400; }
/* A branch and what it holds, in one table. A row is a row and a cell is a cell, so the
   browser keeps the columns in step; the tree's grid had to be counted by hand and
   staggered the moment a row grew a cell nobody had counted. Depth is an indent on the
   first cell only, so every other column stays aligned down the page. */
table.records td[data-depth] { padding-left:calc(.55rem + 8 * 1.1rem); }
table.records td[data-depth="0"] { padding-left:calc(.55rem + 0 * 1.1rem); }
table.records td[data-depth="1"] { padding-left:calc(.55rem + 1 * 1.1rem); }
table.records td[data-depth="2"] { padding-left:calc(.55rem + 2 * 1.1rem); }
table.records td[data-depth="3"] { padding-left:calc(.55rem + 3 * 1.1rem); }
table.records td[data-depth="4"] { padding-left:calc(.55rem + 4 * 1.1rem); }
table.records td[data-depth="5"] { padding-left:calc(.55rem + 5 * 1.1rem); }
table.records td[data-depth="6"] { padding-left:calc(.55rem + 6 * 1.1rem); }
table.records td[data-depth="7"] { padding-left:calc(.55rem + 7 * 1.1rem); }
table.records td[data-depth="8"] { padding-left:calc(.55rem + 8 * 1.1rem); }
table.records tr.grp td.br { font-weight:650; }
table.records tr[hidden] { display:none !important; }
/* The fold and what it folds are one line. A record is a name over its key — a column of
   two — so a button set before it sat on a line of its own, above the code it folds. */
.branchline { display:flex; gap:.15rem; align-items:flex-start; min-width:0; }
.branchline > .twisty { padding-top:.15rem; }
.twisty { border:0; background:transparent; color:var(--muted); cursor:pointer;
          font-size:.8rem; line-height:1; padding:0 .35rem 0 0; }
.twisty:hover { color:var(--accent); }
table.records tr.grp .count { color:var(--muted); font-weight:400; font-size:.8rem;
                              font-variant-numeric:tabular-nums; }
.sub { color:var(--muted); font-size:.78rem; font-weight:400; }
.kv { display:grid; grid-template-columns:minmax(9rem,14rem) 1fr; gap:.25rem 1rem; align-items:start; }
.kv dt { color:var(--muted); font-size:.8rem; padding-top:.1rem; }
.kv dd { margin:0; }

/* The primary table of a long page keeps its head in sight: `.scroll` gives the wrapper a
   height, which is what the sticky head had been missing — `position:sticky` sticks to a
   scrolling box, and the page was the only box there was. */
.tw.scroll { max-height:calc(100dvh - var(--above, 14rem)); }
/* A question asked before a press goes through, in the page's own type rather than the
   browser's — and read by a screen reader as the dialog it is. */
dialog#confirm { border:1px solid var(--line-strong); border-radius:var(--r-3); background:var(--raised); color:var(--text);
                 max-width:min(34rem, calc(100vw - 2rem)); padding:var(--s-6) var(--s-7); box-shadow:var(--shadow); }
dialog#confirm::backdrop { background:rgba(10,14,20,.45); }
dialog#confirm p { margin:0 0 var(--s-6); line-height:1.5; }
dialog#confirm .acts-right { display:flex; gap:var(--s-4); justify-content:flex-end; }
/* What the page has to say without leaving it: a refusal, a count, a hint — announced, then gone. */
#notice { position:fixed; left:50%; bottom:var(--s-7); transform:translateX(-50%); z-index:var(--z-nav);
          max-width:min(40rem, calc(100vw - 2rem)); padding:var(--s-4) var(--s-6); border-radius:var(--r-3);
          background:var(--text); color:var(--bg); box-shadow:var(--shadow); font-size:var(--fs-2);
          transition:opacity var(--motion); }
#notice:empty { display:none; }

/* Reading a plan: the change a person is looking at, and the changes it waits for. */
table.plan tr.lit td { background:var(--accent-soft); }
table.plan tr.waited td:first-child { box-shadow:inset 3px 0 0 var(--accent); }
table.plan .ord { font-weight:650; }
/* the density toggle sits with the rest of the nav's footer, as a word rather than a control */
.side .who button { background:transparent; border:0; padding:0; color:var(--accent);
                    font:inherit; font-size:.8rem; cursor:pointer; }
.side .who button:hover { text-decoration:underline; }