/* ═══════════════════════════════════════════════════════════════════════════
   DDF INTELLIGENCE

   A working instrument for a firm that holds whole people across years. It is
   built like a tool, not like a theme: a white ground, depth carried by
   hairlines and a light surface step rather than by colour, and every hue
   reserved for something that means something. Nothing decorates.

   White is white. Not paper, not cream, not a warm off-white: #FFFFFF, set by
   the Founder. Every grey below it is strictly neutral, cool if anything, and
   never tinted toward yellow.

   Type does the work. Familjen Grotesk sets headings and every figure, tight
   and slightly unusual at size. Instrument Sans runs the interface and
   disappears at 12px. Newsreader carries human speech and nothing else, so a
   quotation is recognisable before it is read. JetBrains Mono holds timestamps
   and identifiers, where fixed width is the point.

   One accent, indigo, for the thing the pointer is on and the thing that is
   selected. Amber, green and red carry state and never anything else, and all
   three are darkened from their dark-ground values so they hold their contrast
   against white. The chart palette is held apart and used only inside charts.
   ═══════════════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Familjen+Grotesk:ital,wght@0,400..700;1,400..700&family=Instrument+Sans:ital,wght@0,400..700;1,400..700&family=Newsreader:ital,opsz,wght@0,6..72,300..600;1,6..72,300..600&family=JetBrains+Mono:wght@400;600&display=swap');

:root {
  /* the ground, and the one step above it. Depth is hairlines and shadow. */
  color-scheme: light;
  --void:  #FFFFFF;
  --s1:    #FFFFFF;
  --s2:    #FFFFFF;
  --s3:    #F4F5F7;
  --s4:    #ECEEF2;
  --line:  #E4E7EC;
  --line-2:#D5D9E0;
  --line-3:#B9BFC9;
  --paper: #FFFFFF;          /* the ground itself where a surface must match it exactly: a mark's card, a select's list, a held column */
  --on-accent: #FFFFFF;      /* words on the accent and on a warning button */
  --ink-rgb: 16,24,40;       /* every tint is the ink at an opacity */
  --shade: rgba(16,24,40,.22); /* the one big shadow, under a drawer or the open rail */
  --mark-card: #FFFFFF;      /* the tile the firm's mark sits on, white on both grounds */
  /* chart furniture, read by the charts at draw time */
  --chart-ax: #3B4252; --chart-faint: #5B6470; --chart-grid: #E6E8ED; --chart-edge: #C9CED8;
  --chart-tip-bg: #FFFFFF; --chart-tip-ink: #0E1116; --chart-zoom-bg: #F3F4F7; --chart-zoom-area: #E6E8ED; --chart-handle: #B9BEC8; --chart-inactive: #C3C8D0;

  /* ink */
  --ink:   #0E1116;
  --ink-2: #333A45;
  --mute:  #566072;
  --faint: #6E7787;

  /* one accent, and the three that carry state. All darkened for white. */
  --accent:    #4A56D2;
  --accent-2:  #3742B8;
  --accent-dim:#E7E9FC;
  --good:  #15754F;
  --warn:  #8A5A0B;
  --bad:   #C0392F;

  /* held apart, and used only inside charts */
  --c1: #4A56D2; --c2: #15754F; --c3: #B07B12; --c4: #C0392F;
  --c5: #1F76A8; --c6: #7B54B5; --c7: #12736A; --c8: #B0537A;

  /* the same colours as channels, for a tint at an opacity: rgba(var(--accent-rgb),.11).
     Until 19 September 2026 every such tint was a literal, several of them the
     retired dark-ground hues, and none was re-derived for black. */
  --accent-rgb: 74,86,210; --good-rgb: 21,117,79; --warn-rgb: 138,90,11; --bad-rgb: 192,57,47;
  --c5-rgb: 31,118,168; --c6-rgb: 123,84,181;
  --on-accent-rgb: 255,255,255;
  --veil-rgb: 10,11,13;        /* the shade behind a drawer, the rail's sheet and the search box */
  --press-edge: rgba(0,0,0,.14); /* the one dark line under a filled button, on both grounds */
  /* the orb tints, behind two dark initials: the one set that stays light on both grounds */
  --on-orb: #03101C;
  --orb-1: #B9BEF6; --orb-2: #A7D9C3; --orb-3: #EBD09A; --orb-4: #F0B7B2;
  --orb-5: #A9D2E8; --orb-6: #CFBCE8; --orb-7: #A5DBD4; --orb-8: #E8BCCB;

  --sans:   'Instrument Sans', -apple-system, 'Segoe UI', sans-serif;
  --display:'Familjen Grotesk', var(--sans);
  --serif:  'Newsreader', Georgia, serif;
  --mono:   'JetBrains Mono', ui-monospace, Menlo, monospace;

  --r-xl: 14px; --r: 10px; --r-s: 8px; --r-xs: 6px;

  --lift-1: 0 1px 2px rgba(var(--ink-rgb),.05), 0 4px 12px -6px rgba(var(--ink-rgb),.10);
  --lift-2: 0 2px 4px rgba(var(--ink-rgb),.06), 0 14px 30px -12px rgba(var(--ink-rgb),.16);
  --ring:   inset 0 0 0 1px var(--line);

  --decay: cubic-bezier(.16, 1, .3, 1);
  --snap:  cubic-bezier(.32, .72, 0, 1);
  --swift: cubic-bezier(.4, 0, .2, 1);
}

/* The dark ground, a choice under Settings since 8 September 2026 on the
   Founder's word: this light background is hurting my eyes; and when I mean
   dark, I want black, not some other dark colour. So the page is #000000 and
   every surface sits one small step off it, hairlines a shade stronger than
   on white because a hairline on black needs more to be seen, shadows black
   rather than glowing, and the accent and the state colours lifted so they
   hold on black. Light stays the default and the reference. A colour lives in
   these two blocks and nowhere else, so a screen never carries one of its own. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --void:  #000000;
  --s1:    #0B0C0E;
  --s2:    #101114;
  --s3:    #17181C;
  --s4:    #1E2024;
  --line:  #26292F;
  --line-2:#33373E;
  --line-3:#4A4F58;
  --paper: #0B0C0E;
  --on-accent: #FFFFFF;
  --ink-rgb: 226,230,236;
  --shade: rgba(0,0,0,.85);
  --mark-card: #FFFFFF;
  --ink:   #F2F4F7;
  --ink-2: #D0D4DB;
  --mute:  #9AA0AB;
  --faint: #7C818C;
  --accent:    #7A86F5;
  --accent-2:  #98A2FF;
  --accent-dim:#232849;
  --good:  #47C58A;
  --warn:  #E0AC48;
  --bad:   #E8736A;
  --c1: #7A86F5; --c2: #47C58A; --c3: #E0AC48; --c4: #E8736A;
  --c5: #58ACE0; --c6: #B196E0; --c7: #57C7B8; --c8: #E094B0;
  --accent-rgb: 122,134,245; --good-rgb: 71,197,138; --warn-rgb: 224,172,72; --bad-rgb: 232,115,106;
  --c5-rgb: 88,172,224; --c6-rgb: 177,150,224;
  --on-accent-rgb: 255,255,255;
  --veil-rgb: 0,0,0;
  --press-edge: rgba(0,0,0,.5);
  --on-orb: #03101C;
  --orb-1: #B9BEF6; --orb-2: #A7D9C3; --orb-3: #EBD09A; --orb-4: #F0B7B2;
  --orb-5: #A9D2E8; --orb-6: #CFBCE8; --orb-7: #A5DBD4; --orb-8: #E8BCCB;
  --chart-ax: #C0C5CF; --chart-faint: #9AA0AB; --chart-grid: #26292F; --chart-edge: #4A4F58;
  --chart-tip-bg: #17181C; --chart-tip-ink: #F2F4F7; --chart-zoom-bg: #101114; --chart-zoom-area: #26292F; --chart-handle: #4A4F58; --chart-inactive: #4A4F58;
  --lift-1: 0 1px 2px rgba(0,0,0,.7), 0 8px 20px -10px rgba(0,0,0,.9);
  --lift-2: 0 2px 4px rgba(0,0,0,.7), 0 18px 36px -14px rgba(0,0,0,.95);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
  color-scheme: dark;
  --void:  #000000;
  --s1:    #0B0C0E;
  --s2:    #101114;
  --s3:    #17181C;
  --s4:    #1E2024;
  --line:  #26292F;
  --line-2:#33373E;
  --line-3:#4A4F58;
  --paper: #0B0C0E;
  --on-accent: #FFFFFF;
  --ink-rgb: 226,230,236;
  --shade: rgba(0,0,0,.85);
  --mark-card: #FFFFFF;
  --ink:   #F2F4F7;
  --ink-2: #D0D4DB;
  --mute:  #9AA0AB;
  --faint: #7C818C;
  --accent:    #7A86F5;
  --accent-2:  #98A2FF;
  --accent-dim:#232849;
  --good:  #47C58A;
  --warn:  #E0AC48;
  --bad:   #E8736A;
  --c1: #7A86F5; --c2: #47C58A; --c3: #E0AC48; --c4: #E8736A;
  --c5: #58ACE0; --c6: #B196E0; --c7: #57C7B8; --c8: #E094B0;
  --accent-rgb: 122,134,245; --good-rgb: 71,197,138; --warn-rgb: 224,172,72; --bad-rgb: 232,115,106;
  --c5-rgb: 88,172,224; --c6-rgb: 177,150,224;
  --on-accent-rgb: 255,255,255;
  --veil-rgb: 0,0,0;
  --press-edge: rgba(0,0,0,.5);
  --on-orb: #03101C;
  --orb-1: #B9BEF6; --orb-2: #A7D9C3; --orb-3: #EBD09A; --orb-4: #F0B7B2;
  --orb-5: #A9D2E8; --orb-6: #CFBCE8; --orb-7: #A5DBD4; --orb-8: #E8BCCB;
  --chart-ax: #C0C5CF; --chart-faint: #9AA0AB; --chart-grid: #26292F; --chart-edge: #4A4F58;
  --chart-tip-bg: #17181C; --chart-tip-ink: #F2F4F7; --chart-zoom-bg: #101114; --chart-zoom-area: #26292F; --chart-handle: #4A4F58; --chart-inactive: #4A4F58;
  --lift-1: 0 1px 2px rgba(0,0,0,.7), 0 8px 20px -10px rgba(0,0,0,.9);
  --lift-2: 0 2px 4px rgba(0,0,0,.7), 0 18px 36px -14px rgba(0,0,0,.95);
  }
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; background: var(--void); color: var(--ink);
  font-family: var(--sans); font-size: 14px; line-height: 1.55; font-weight: 420;
  font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1, 'cv05' 1;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
::selection { background: rgba(var(--accent-rgb),.3); color: var(--ink); }
:focus-visible { outline: 2px solid rgba(var(--accent-rgb),.55); outline-offset: 2px; border-radius: 4px; }
a { color: var(--accent); text-decoration: none; transition: color .18s var(--swift); }
a:hover { color: var(--accent-2); }
h1,h2,h3,h4 { margin: 0; font-family: var(--display); font-weight: 600; letter-spacing: -.022em; }
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb { background: rgba(var(--ink-rgb),.14); border-radius: 6px; border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: rgba(var(--ink-rgb),.26); background-clip: content-box; }
::-webkit-scrollbar-track { background: transparent; }

/* ── the ground ────────────────────────────────────────────────────────────
   Solid. Depth comes from the surface ladder and hairlines, the way Linear's
   does, not from colour washes: a gradient field reads as decoration, and
   decoration reads as a thing nobody spent long on. */
/* Hidden means hidden. The palette and the drawer are toggled by setting the
   hidden attribute, and each also carries a display of its own, which is an
   author rule and therefore beats the browser's own display:none for [hidden].
   Without this line the palette sat over the whole window at z-index 80 with
   opacity 0, invisible and pointer-events auto, and swallowed every click in
   the application. Nothing was clickable, on any screen, for as long as the
   interface existed. Never write a display rule for a panel without this. */
[hidden] { display: none !important; }

#field { position: fixed; inset: 0; z-index: 0; pointer-events: none; background: var(--void); }
#grain { display: none; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } }
#app { position: relative; z-index: 2; min-height: 100vh; display: grid; grid-template-columns: 272px minmax(0,1fr); }

/* ── the shell ─────────────────────────────────────────────────────────── */
/* White page, white rail: the edge between them is the only thing separating
   them, so it is a full hairline rather than the faint one used inside a pane.
   The blur was carrying depth on the dark ground and does nothing on white. */
.rail { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column;
  background: var(--s1); border-right: 1px solid var(--line-2); z-index: 6; }
.rail .mark { display: flex; align-items: center; gap: 12px; padding: 22px 20px 18px; }
.rail .mark .orb { width: 28px; height: 28px; border-radius: 7px; flex: none; background: var(--accent); }

@keyframes spin { to { transform: rotate(360deg); } }
.rail .mark b { display: block; font-family: var(--display); font-size: 14.5px; font-weight: 620; letter-spacing: -.02em; }
.rail .mark small { display: block; font-size: 9.5px; color: var(--faint); letter-spacing: .16em; text-transform: uppercase; margin-top: 2px; }
.rail .kbd { display: flex; align-items: center; justify-content: space-between; margin: 0 14px 4px; padding: 8px 12px; border-radius: var(--r-s);
  background: rgba(var(--ink-rgb),.035); box-shadow: var(--ring); font-size: 12px; color: var(--mute); cursor: pointer; transition: background .2s var(--swift), color .2s var(--swift); }
.rail .kbd:hover { background: rgba(var(--ink-rgb),.07); color: var(--ink); }
kbd { font-family: var(--mono); font-size: 10px; padding: 2px 6px; border-radius: 5px; background: rgba(var(--ink-rgb),.07); box-shadow: inset 0 0 0 1px rgba(var(--ink-rgb),.08); color: var(--ink-2); }
.rail .scroll { flex: 1; overflow-y: auto; padding: 8px 0 12px; }
/* A rail heading is a control, not a label: it folds what sits under it. */
.rail h6 { font-size: 9px; letter-spacing: .2em; text-transform: uppercase; color: var(--faint); font-weight: 600; margin: 20px 22px 8px; }
.rail .group { margin-top: 14px; }
.rail button.h6 { display: flex; align-items: center; gap: 7px; width: calc(100% - 24px); margin: 0 12px 6px; padding: 5px 10px;
  font-family: var(--sans); font-size: 9px; letter-spacing: .2em; text-transform: uppercase; color: var(--faint); font-weight: 640;
  background: transparent; border: 0; border-radius: var(--r-xs); cursor: pointer; text-align: left; box-shadow: none; }
.rail button.h6:hover { background: rgba(var(--ink-rgb),.05); color: var(--mute); }
.rail button.h6 .caret { font-size: 11px; line-height: 1; width: 9px; color: var(--line-3); transition: color .18s var(--swift); }
.rail button.h6:hover .caret { color: var(--mute); }
.rail button.h6 .n { margin-left: auto; letter-spacing: 0; font-family: var(--display); font-size: 10px; font-weight: 640;
  color: var(--warn); text-transform: none; }
.rail button.h6 .n:empty { display: none; }
.rail a.nav { position: relative; display: flex; align-items: center; gap: 11px; margin: 2px 12px; padding: 8px 11px; border-radius: var(--r-s);
  color: var(--ink-2); font-size: 13.5px; font-weight: 480; transition: background .22s var(--swift), color .22s var(--swift), transform .3s var(--decay); }
.rail a.nav:hover { background: rgba(var(--ink-rgb),.055); color: var(--ink); transform: translateX(3px); }
.rail a.nav.on { background: rgba(var(--accent-rgb),.11); color: var(--ink); font-weight: 560; }
.rail a.nav.on::before { content: ''; position: absolute; left: -12px; top: 50%; translate: 0 -50%; width: 2px; height: 20px; border-radius: 0 3px 3px 0; background: var(--accent); }
.rail .ico { width: 26px; display: grid; place-items: center; font-size: 13px; color: var(--faint); }
.rail a.nav.on .ico { color: var(--accent); }
.rail .lbl { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rail .n { font-family: var(--display); font-size: 10.5px; font-weight: 640; padding: 1.5px 7px; border-radius: 20px; background: rgba(var(--ink-rgb),.07); color: var(--mute); }
.rail .n.you { background: rgba(var(--warn-rgb),.14); color: var(--warn); }
.rail .foot { margin: 0 20px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 10px; color: var(--faint); line-height: 1.55; }

/* a person is a body of light, and keeps the same one everywhere */
.orb.mark, .orbit.mark { background: var(--mark-card); padding: 4px; box-shadow: inset 0 0 0 1px var(--line); }
.orb.mark img, .orbit.mark img { width: 100%; height: 100%; object-fit: contain; display: block; }
.rail .mark .orb.mark { background: transparent; padding: 0; }
/* Every orb carries its own size. Without a default here, an orb outside the
   rail or a profile header had none, so a client with a real logo drew the
   image at its natural size: CrownDerm's mark came out 500px square on the
   first screen of the application and pushed its whole row of cards to 597px
   tall while the clients with no logo sat at 130. An orb is a small round
   thing by definition; it must never be able to take a card with it. */
.orb, .orbit { width: 38px; height: 38px; font-size: 14px; border-radius: 7px; display: grid; place-items: center; font-family: var(--display); font-weight: 680; color: var(--on-orb); flex: none; position: relative; letter-spacing: -.03em; overflow: hidden; }
.orb img, .orbit img { max-width: 100%; max-height: 100%; }
.orbit { width: 27px; height: 27px; font-size: 10.5px; }
.profile .orb { width: 60px; height: 60px; font-size: 20px; border-radius: 12px; }

.view { padding: 0 36px 96px; max-width: 1480px; }
.topbar { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 16px; padding: 20px 36px 16px; margin: 0 -36px 6px; }
/* The blur and the tint stay inside the bar's own box and fade in its last
   third. They used to reach 60% further down, over the first rows of every
   page, so the first thing on a page sat under a veil: on People the person's
   name and the two buttons beside it read blurred and dimmed at the top of
   the page (the Founder, 9 September 2026: this is not properly visible). */
.topbar::before { content: ''; position: absolute; inset: 0; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  -webkit-mask-image: linear-gradient(to bottom, var(--ink) 0 86%, transparent 100%); mask-image: linear-gradient(to bottom, var(--ink) 0 86%, transparent 100%);
  background: var(--void); pointer-events: none; }
.topbar > * { position: relative; }
.topbar .crumb { font-size: 11px; color: var(--faint); letter-spacing: .06em; text-transform: uppercase; font-weight: 550; }
/* A back control in the crumb's place: a small quiet button, never a label. */
.topbar .crumb a.back { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px 5px 8px; margin-bottom: 6px; border-radius: var(--r-xs);
  background: rgba(var(--ink-rgb),.06); box-shadow: inset 0 0 0 1px rgba(var(--ink-rgb),.09); color: var(--ink-2); font-size: 12px; font-weight: 600; letter-spacing: 0; text-transform: none; text-decoration: none;
  transition: background .18s var(--swift), color .18s var(--swift); }
.topbar .crumb a.back:hover { background: rgba(var(--ink-rgb),.11); color: var(--ink); }
.topbar .crumb a.back .chev { font-size: 15px; line-height: 1; color: var(--mute); }
.topbar h1 { font-size: 23px; letter-spacing: -.03em; margin-top: 2px; }
.topbar .grow { flex: 1; }

.rise { opacity: 0; transform: translateY(16px); animation: rise .72s var(--decay) forwards; }
@keyframes rise { to { opacity: 1; transform: none; } }

/* ── panes ─────────────────────────────────────────────────────────────── */
.pane { position: relative; border-radius: var(--r); background: var(--s1);
  box-shadow: var(--ring), var(--lift-1); overflow: hidden; margin-bottom: 16px; }
.pane.lift { transition: transform .42s var(--decay), box-shadow .42s var(--decay); }
.pane.lift:hover { transform: translateY(-3px); box-shadow: var(--ring), var(--lift-2); }
.pane > header { display: flex; align-items: baseline; gap: 12px; padding: 15px 20px; border-bottom: 1px solid var(--line); }
.pane > header h3 { font-size: 13px; font-weight: 620; letter-spacing: -.005em; }
.pane > header .sub { font-size: 11.5px; color: var(--mute); flex: 1; font-weight: 400; }
.pane .body { padding: 18px 20px; }
.pane .body.flush { padding: 0; }
.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(400px,1fr)); gap: 16px; }
.grid3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(272px,1fr)); gap: 16px; }

/* ── readings ──────────────────────────────────────────────────────────── */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(174px,1fr)); gap: 13px; margin-bottom: 18px; }
.kpi { position: relative; display: block; color: inherit; padding: 16px 18px 20px; border-radius: var(--r);
  background: var(--s1); box-shadow: var(--ring), var(--lift-1); overflow: hidden;
  transition: transform .42s var(--decay), box-shadow .42s var(--decay); }
.kpi::after { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--k, var(--accent)); opacity: .85; transition: opacity .3s var(--swift); }
a.kpi:hover { transform: translateY(-4px); box-shadow: var(--ring), var(--lift-2); }
a.kpi:hover::after { opacity: 1; }
.kpi .l { font-size: 9.5px; letter-spacing: .17em; text-transform: uppercase; color: var(--faint); font-weight: 600; }
.kpi .n { font-family: var(--display); font-size: 32px; font-weight: 640; letter-spacing: -.04em; line-height: 1.05; margin-top: 9px;
  color: var(--k, var(--ink)); }
.kpi .s { font-size: 11.5px; color: var(--mute); margin-top: 5px; }

/* ── the profile ───────────────────────────────────────────────────────── */
.profile { display: flex; gap: 24px; align-items: flex-start; padding: 26px; }
.profile .who { flex: 1; min-width: 0; }
.profile h2 { font-size: 30px; letter-spacing: -.035em; line-height: 1.1; }
.profile .role { color: var(--mute); font-size: 14.5px; margin-top: 5px; }
.profile .chips { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 14px; }
.profile .acts { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.chip { font-size: 11px; font-weight: 560; padding: 4px 11px; border-radius: 20px; background: rgba(var(--ink-rgb),.05);
  color: var(--ink-2); display: inline-flex; align-items: center; gap: 6px; box-shadow: inset 0 0 0 1px rgba(var(--ink-rgb),.05); }
.chip i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; display: block; }
.chip.pe { color: var(--accent); } .chip.or { color: var(--warn); } .chip.te { color: var(--good); }
.chip.vi { color: var(--c6); } .chip.am { color: var(--warn); } .chip.ro { color: var(--bad); } .chip.bl { color: var(--c5); }

/* ── findings ──────────────────────────────────────────────────────────── */
.finding { display: flex; gap: 15px; padding: 18px 20px; border-bottom: 1px solid var(--line); transition: background .3s var(--swift); }
.finding:last-child { border-bottom: 0; }
.finding:hover { background: rgba(var(--ink-rgb),.022); }
.finding .mk { width: 36px; height: 36px; border-radius: var(--r-s); flex: none; display: grid; place-items: center; font-size: 15px;
  color: var(--k, var(--accent)); background: rgba(var(--ink-rgb),.045); box-shadow: inset 0 0 0 1px rgba(var(--ink-rgb),.06); }
.finding .claim { font-size: 14.5px; line-height: 1.55; font-weight: 480; margin: 0; color: var(--ink); }
.finding .detail { font-size: 12.5px; color: var(--mute); white-space: pre-wrap; margin-top: 9px; line-height: 1.6; }
.finding .prov { font-family: var(--mono); font-size: 10px; color: var(--faint); margin-top: 10px; letter-spacing: .02em; }
/* A finding that was read rather than counted comes with the one thing to do
   about it. That is the point of the whole pass, so it sits above the working
   rather than buried inside it. */
.finding .act { margin: 9px 0 4px; padding: 9px 13px; border-radius: var(--r-xs);
  background: rgba(var(--accent-rgb),.06); box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb),.16); font-size: 13px; color: var(--ink); }
.finding .act b { font-weight: 660; }
.finding .acts { display: flex; flex-direction: column; gap: 7px; flex: none; }

/* receipts: a quotation looks like one before it is read */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 11px; }
a.rc { display: block; max-width: 100%; padding: 9px 13px; border-radius: var(--r-xs); font-family: var(--serif); font-size: 13px; line-height: 1.5;
  color: var(--ink-2); background: rgba(var(--accent-rgb),.06); box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb),.15);
  transition: background .25s var(--swift), transform .3s var(--decay), box-shadow .25s var(--swift); }
a.rc:hover { background: rgba(var(--accent-rgb),.11); color: var(--ink); box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb),.28); }
a.rc .t { font-family: var(--mono); font-size: 10px; font-weight: 600; color: var(--accent); margin-right: 8px; }
a.rc.off { background: rgba(var(--warn-rgb),.06); box-shadow: inset 0 0 0 1px rgba(var(--warn-rgb),.18); }
a.rc.off .t { color: var(--warn); }

/* ── tables ────────────────────────────────────────────────────────────── */
table { width: 100%; border-collapse: collapse; font-size: 13px; }
thead th { text-align: left; font-size: 9px; letter-spacing: .18em; text-transform: uppercase; color: var(--faint); font-weight: 600; padding: 11px 20px; border-bottom: 1px solid var(--line); }
tbody td { padding: 13px 20px; border-bottom: 1px solid rgba(var(--ink-rgb),.055); vertical-align: top; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr { transition: background .22s var(--swift); }
tbody tr:hover { background: rgba(var(--ink-rgb),.028); }
td.n, th.n { text-align: right; }
td.d { color: var(--faint); white-space: nowrap; font-family: var(--mono); font-size: 11px; }
td.who { font-size: 11.5px; color: var(--mute); white-space: nowrap; }
tr.past td.d { color: var(--bad); }
.small { font-size: 11.5px; color: var(--mute); }
.quiet { color: var(--faint); }
.needs { color: var(--warn); }
.mono { font-family: var(--mono); font-size: .9em; background: rgba(var(--ink-rgb),.06); padding: 2px 7px; border-radius: 5px; color: var(--ink-2); }
.status { font-family: var(--display); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; font-weight: 620; padding: 3px 9px; border-radius: 20px; background: rgba(var(--ink-rgb),.07); color: var(--mute); }
.status.confirmed { background: rgba(var(--good-rgb),.13); color: var(--good); }
.status.proposed { background: rgba(var(--warn-rgb),.13); color: var(--warn); }
.status.rejected { background: rgba(var(--bad-rgb),.13); color: var(--bad); }

/* ── items ─────────────────────────────────────────────────────────────── */
.item { display: flex; gap: 16px; padding: 15px 20px; border-bottom: 1px solid rgba(var(--ink-rgb),.055); transition: background .22s var(--swift); }
.item:last-child { border-bottom: 0; }
.item:hover { background: rgba(var(--ink-rgb),.025); }
.item .kind { width: 104px; flex: none; font-size: 9px; letter-spacing: .16em; text-transform: uppercase; color: var(--faint); font-weight: 600; padding-top: 4px; }
.item .kind small { display: block; font-weight: 400; letter-spacing: 0; text-transform: none; font-size: 10.5px; margin-top: 3px; }
.item .text { margin: 0; font-size: 13.5px; line-height: 1.55; }
.item .text.private::after { content: 'private'; font-family: var(--display); font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: var(--c6); background: rgba(var(--c6-rgb),.14); padding: 2px 7px; border-radius: 20px; margin-left: 9px; vertical-align: 2px; }
.item .meta { font-family: var(--mono); font-size: 10.5px; color: var(--faint); margin-top: 6px; }
.item .acts { display: flex; gap: 6px; flex: none; align-items: flex-start; }
/* The presses stay on one line, tighter than they were: held at their old
   padding they took 273 pixels of an 858-pixel table and left the task itself
   190, which is where the ten-line stack of words came from. */
.acts.rowacts { display: flex; gap: 5px; justify-content: flex-end; flex-wrap: nowrap; margin-left: auto; }
.acts.rowacts button { padding: 6px 7px; font-size: 11.5px; }
.item.confirmed { background: rgba(var(--good-rgb),.028); }
.item.rejected { opacity: .4; }

/* ── buttons ───────────────────────────────────────────────────────────── */
button { font-family: var(--sans); font-size: 12.5px; font-weight: 620; padding: 8px 15px; border-radius: var(--r-xs); border: 0; cursor: pointer; white-space: nowrap;
  color: var(--on-accent); background: var(--accent);
  box-shadow: inset 0 -1px 0 var(--press-edge);
  transition: transform .18s var(--snap), filter .18s var(--swift), box-shadow .25s var(--swift); }
button:hover { filter: brightness(1.1); }
button:active { transform: translateY(0) scale(.985); }
button.quiet { background: rgba(var(--ink-rgb),.06); color: var(--ink-2); box-shadow: inset 0 0 0 1px rgba(var(--ink-rgb),.09); }
button.quiet:hover { background: rgba(var(--ink-rgb),.11); color: var(--ink); box-shadow: inset 0 0 0 1px rgba(var(--ink-rgb),.16); }
button.warn { color: var(--on-accent); background: var(--warn); box-shadow: inset 0 -1px 0 var(--press-edge); }
form { display: inline; } .acts form { display: inline-flex; }

/* ── banners ───────────────────────────────────────────────────────────── */
/* Both of these carried pale tinted text that only worked because the ground
   behind it was near-black. On white they need dark ink and a light wash. */
.wash { position: relative; padding: 15px 19px 15px 21px; border-radius: var(--r-s); font-size: 13px; margin-bottom: 16px;
  background: rgba(var(--c5-rgb),.06); box-shadow: inset 0 0 0 1px rgba(var(--c5-rgb),.18); color: var(--ink-2); }
.wash::before { content: ''; position: absolute; left: 0; top: 11px; bottom: 11px; width: 2px; border-radius: 0 2px 2px 0; background: var(--c5); }
.wash.needs { background: rgba(var(--warn-rgb),.07); box-shadow: inset 0 0 0 1px rgba(var(--warn-rgb),.22); color: var(--ink-2); }
.wash.needs::before { background: var(--warn); }
.wash b { color: var(--ink); font-weight: 640; }
.note { background: rgba(var(--ink-rgb),.04); border-radius: var(--r-s); padding: 12px 16px; font-size: 12.5px; color: var(--ink-2); margin: 14px 0; box-shadow: var(--ring); }

/* ── drawer ────────────────────────────────────────────────────────────── */
.drawer { position: fixed; inset: 0 0 0 auto; width: min(760px, 94vw); z-index: 60; display: flex; flex-direction: column;
  background: var(--s2); border-left: 1px solid var(--line-2);
  backdrop-filter: blur(30px) saturate(1.35); -webkit-backdrop-filter: blur(30px) saturate(1.35);
  box-shadow: -30px 0 70px -24px var(--shade); transform: translateX(100%); transition: transform .5s var(--decay); }
.drawer.open { transform: none; }
.drawer > header { display: flex; align-items: center; gap: 14px; padding: 20px 24px; border-bottom: 1px solid var(--line); }
.drawer > header h3 { flex: 1; font-size: 16px; }
.drawer .body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 20px 24px 70px; }
.scrim { position: fixed; inset: 0; z-index: 55; background: rgba(var(--veil-rgb),.62); backdrop-filter: blur(4px); opacity: 0; transition: opacity .4s var(--swift); }
.scrim.open { opacity: 1; }

/* ── palette ───────────────────────────────────────────────────────────── */
.palette { position: fixed; inset: 0; z-index: 80; display: grid; place-items: start center; padding-top: 13vh;
  background: rgba(var(--veil-rgb),.7); backdrop-filter: blur(8px); opacity: 0; transition: opacity .26s var(--swift); }
.palette.open { opacity: 1; }
.palette .box { width: min(660px, 93vw); border-radius: var(--r-xl); overflow: hidden;
  background: var(--s2); box-shadow: inset 0 0 0 1px rgba(var(--ink-rgb),.09), 0 40px 90px -28px rgba(var(--ink-rgb),.28);
  transform: translateY(-12px) scale(.975); transition: transform .38s var(--decay); }
.palette.open .box { transform: none; }
.palette input { width: 100%; padding: 19px 22px; border: 0; background: transparent; color: var(--ink); font-family: var(--sans); font-size: 16.5px; outline: none; border-bottom: 1px solid var(--line); }
.palette input::placeholder { color: var(--faint); }
.palette .hits { max-height: 54vh; overflow-y: auto; padding: 8px; }
.palette .hit { display: flex; align-items: center; gap: 12px; padding: 10px 13px; border-radius: var(--r-s); cursor: pointer; font-size: 13.5px; color: var(--ink-2); }
.palette .hit .ico { width: 27px; text-align: center; color: var(--faint); }
.palette .hit .k { font-family: var(--mono); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); margin-left: auto; }
.palette .hit.sel { background: rgba(var(--accent-rgb),.13); color: var(--ink); box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb),.24); }

/* ── the transcript: the one place a serif belongs ─────────────────────── */
.seg { display: grid; grid-template-columns: 56px 136px 1fr; gap: 15px; padding: 9px 20px; font-family: var(--serif); font-size: 14.5px; line-height: 1.65;
  color: var(--ink-2); border-bottom: 1px solid rgba(var(--ink-rgb),.04); }
.seg:hover { background: rgba(var(--ink-rgb),.025); color: var(--ink); }
.seg.cited { background: rgba(var(--warn-rgb),.06); box-shadow: inset 2px 0 0 var(--warn); }
.seg .t { font-family: var(--mono); font-size: 10px; color: var(--faint); padding-top: 4px; }
.seg .sp { font-family: var(--sans); font-size: 11.5px; color: var(--accent); font-weight: 560; padding-top: 3px; }
blockquote, .said { font-family: var(--serif); font-size: 15.5px; line-height: 1.65; color: var(--ink-2); }

h3.sec { font-family: var(--display); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--faint); font-weight: 600; margin: 26px 0 12px; }
h3.sec span, h3.sec a { font-family: var(--sans); font-size: 11.5px; letter-spacing: 0; text-transform: none; font-weight: 400; color: var(--faint); margin-left: 10px; }
ul { margin: 8px 0; padding-left: 20px; } li { margin: 4px 0; font-size: 13px; color: var(--ink-2); }
p { margin: 9px 0; }
.empty { padding: 44px 20px; text-align: center; color: var(--faint); font-size: 13px; }
.spinner { width: 28px; height: 28px; border-radius: 50%; border: 2px solid rgba(var(--ink-rgb),.09); border-top-color: var(--accent); animation: spin .8s linear infinite; margin: 80px auto; }

/* ── a client's sections, listed under the client in the rail ─────────── */
.rail .sections { margin: 0 12px 6px 30px; border-left: 1px solid var(--line); padding-left: 4px; }
.rail .sections a.nav { margin: 1px 0; padding: 6px 10px; font-size: 12.5px; }
.rail .sections a.nav.on::before { left: -6px; }
.rail .sections .fold { margin-top: 4px; padding-top: 4px; border-top: 1px dashed var(--line); }
.rail .sections a.nav.folded { color: var(--faint); }
.rail .sections a.nav.folded .ico { color: var(--line-3); }
/* The platforms under Social. One step further in than a section, on their own
   hairline, so the eye reads Social as the parent and Instagram as a page of
   it rather than as another section of the client. */
.rail .sections .under { margin: 1px 0 3px 14px; border-left: 1px solid var(--line); padding-left: 3px; }
.rail .sections .under a.nav { padding: 4px 9px; font-size: 12px; color: var(--muted); }
.rail .sections .under a.nav .ico { font-size: 11px; width: 13px; }
.rail .sections .under a.nav.on { color: var(--ink); }
.rail .sections .under a.nav.on::before { left: -5px; }

/* ── nothing scrolls sideways ──────────────────────────────────────────────
   The page never does. A table that is too wide scrolls inside its own pane,
   and every column of the grid can shrink to nothing rather than push the
   page out past the window. */
main, .view { min-width: 0; }
/* A table is one table, so its headings sit over their columns (the
   Founder, 6 September 2026, on the bank rules: not aligned under the
   column each represents). A pane body scrolls sideways only once its table
   is wider than it, marked by the application after each draw (.wide);
   a table that fits keeps its headings held under the top bar. */
.pane .body.flush > table, .pane > table, .pane .body.flush > div > table { display: table; width: 100%; max-width: none; }
.pane .body.wide { overflow-x: auto; max-width: 100%; }

.kpis, .grid2, .grid3 { min-width: 0; }
.kpi, .pane { min-width: 0; }

/* ── the bar: what the rail becomes when the window is narrow ─────────────
   Under 960 pixels the rail used to sit on top of the page, so every click
   landed at the bottom, below the whole list. Now the rail slides in from the
   left over a sheet, and a thin bar across the top says where you are. */
.bar { display: none; }
.scrim.rail-scrim { z-index: 7; }
@media (max-width: 960px) {
  #app { grid-template-columns: 1fr; }
  .rail { position: fixed; inset: 0 auto 0 0; width: min(300px, 86vw); height: 100vh; z-index: 8;
    transform: translateX(-100%); transition: transform .4s var(--decay); box-shadow: none; }
  .rail.open { transform: none; box-shadow: 30px 0 70px -24px var(--shade); }
  .bar { position: sticky; top: 0; z-index: 6; display: flex; align-items: center; gap: 10px; padding: 9px 14px;
    background: var(--s1); border-bottom: 1px solid var(--line-2); }
  .bar .mark { display: flex; }
  .bar .orb.mark { width: 26px; height: 26px; border-radius: 6px; }
  .bar .where { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; color: var(--mute); }
  .bar .where b { font-family: var(--display); font-weight: 620; color: var(--ink); }
  .bar button.quiet { padding: 7px 11px; font-size: 12px; }
  .bar .menu { width: 36px; height: 34px; padding: 0; display: grid; place-items: center; }
  .bar .menu .lines, .bar .menu .lines::before, .bar .menu .lines::after { display: block; width: 16px; height: 2px; border-radius: 1px; background: var(--ink); content: ''; }
  .bar .menu .lines { position: relative; }
  .bar .menu .lines::before { position: absolute; left: 0; top: -5px; }
  .bar .menu .lines::after { position: absolute; left: 0; top: 5px; }
  .view { padding: 0 16px 70px; }
  .topbar { padding: 14px 16px 10px; margin: 0 -16px 6px; flex-wrap: wrap; }
  .topbar h1 { font-size: 20px; }
  .grid2, .grid3 { grid-template-columns: 1fr; }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpi .n { font-size: 26px; }
  .profile { flex-direction: column; gap: 16px; padding: 20px; }
  .profile .acts { justify-content: flex-start; }
  .finding, .item { flex-wrap: wrap; }
  .finding .acts, .item .acts { flex-direction: row; flex-wrap: wrap; width: 100%; }
  .item .kind { width: 100%; padding-top: 0; }
  .seg { grid-template-columns: 48px 1fr; }
  .seg .sp { grid-column: 2; }
  .seg > span:last-child { grid-column: 1 / -1; }
  .drawer { width: 100vw; }
}

/* ── the four states a figure can be in ───────────────────────────────────
   measured (a live pull), from a file, said in a meeting, not yet wired. */
.chip.st-measured { color: var(--good); }
.chip.st-file { color: var(--accent); }
.chip.st-said { color: var(--warn); }
.chip.st-none { color: var(--faint); }
.stats { display: flex; gap: 22px; flex-wrap: wrap; margin-bottom: 14px; }
.step { display: flex; gap: 10px; align-items: baseline; padding: 9px 0; border-top: 1px solid var(--line); font-size: 13px; }
.step b { font-weight: 620; white-space: nowrap; }
.step span { color: var(--mute); }

/* ── the Social section, measured ──────────────────────────────────────────
   A table whose columns sort on a press, and a piece's opening line as a link
   out to the piece itself. */
th.sort { cursor: pointer; user-select: none; }
th.sort:hover { color: var(--ink-2); }
th.sort.on { color: var(--ink); }
th.sort.on::after { content: ' ↓'; font-size: 9px; }
td.t { max-width: 360px; }
td.t a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--line); }
td.t a:hover { color: var(--accent); border-bottom-color: var(--accent); }
.kpis .kpi .s { white-space: normal; }
.pager { display: flex; align-items: center; gap: 8px; padding: 10px 20px; border-top: 1px solid var(--line); font-size: 12px; color: var(--mute); }
.pager .grow { flex: 1; }
.pager button[disabled] { opacity: .4; cursor: default; }

/* ── a platform, folded ─────────────────────────────────────────────────── */
.fold { margin: 18px 0; border-radius: var(--r); background: var(--s1); box-shadow: var(--ring), var(--lift-1); }
.fold-head { display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px 20px; background: none; border: 0; text-align: left; cursor: pointer; font: inherit; color: inherit; border-radius: var(--r); }
.fold-head:hover { background: rgba(var(--ink-rgb),.025); }
.fold-mark { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 15px; font-weight: 600; color: var(--accent); background: rgba(var(--accent-rgb),.08); flex: none; }
.fold-title { font-family: var(--display); font-size: 16px; font-weight: 640; letter-spacing: -.01em; }
.fold-line { font-size: 12.5px; color: var(--mute); }
.fold-body { padding: 4px 20px 20px; border-top: 1px solid var(--line); }
.fold-body > .pane { box-shadow: var(--ring); }
ul.findings li { font-size: 14px; line-height: 1.5; margin: 6px 0; color: var(--ink); }


/* ---- The work: a table you can edit where it stands ---- */
table.tasks td { vertical-align: top; }
table.tasks td.who { min-width: 96px; }
/* Five columns in a column 705 pixels wide: twenty pixels each side of every
   cell is two hundred pixels of nothing, and it came off the words. The outer
   edges keep the page's margin; the gutters between the columns are narrower. */
table.tasks th, table.tasks td { padding-left: 10px; padding-right: 10px; }
table.tasks th:first-child, table.tasks td:first-child { padding-left: 20px; }
table.tasks th:last-child, table.tasks td:last-child { padding-right: 20px; }
table.tasks td.who select { max-width: 100px; }
/* The task is the content of this table, so it holds the width; the owner, the
   state and the date are short and fixed. And however narrow the window, the
   line stays a line: three of them at most, with the whole of it on the task. */
table.tasks th:first-child, table.tasks td:first-child { width: 46%; min-width: 160px; }
/* Except where the words are not the first column. On what was read out of
   meetings the day and who owes it are both short and What carries the account,
   so giving the first column the width squeezed the reading into a gutter. */
/* The team. Five columns, and the one that matters is the sentence saying who
   the person is; the rest shrink to their own content so it keeps the width.
   16 September 2026. */
table.people th:nth-child(3), table.people td:nth-child(3) { width: auto; min-width: 240px; }
table.people th:not(:nth-child(3)), table.people td:not(:nth-child(3)) { width: 1%; white-space: nowrap; }
table.people td:nth-child(3) { white-space: normal; max-width: 60ch; }

table.tasks.said th:first-child, table.tasks.said td:first-child { width: 1%; min-width: 92px; white-space: nowrap; }
table.tasks.said th:nth-child(3), table.tasks.said td:nth-child(3) { padding-right: 14px; }
table.tasks.said th:nth-child(2), table.tasks.said td:nth-child(2) { width: 1%; min-width: 84px; }
table.tasks.said th:nth-child(3), table.tasks.said td:nth-child(3) { width: auto; min-width: 240px; }
a.task-title { color: var(--ink); font-weight: 560; text-decoration: none; display: flex; align-items: flex-start; gap: 8px; }
a.task-title > span:not(.tmark) { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
a.task-title:hover { color: var(--accent); }
/* The mark says the line opens, and once it is open it says it closes again. */
.tmark { width: 17px; height: 17px; margin-top: 1px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 600; line-height: 1; color: var(--accent); background: var(--accent-dim); flex: none; }
tr.open .tmark { background: var(--accent); color: var(--on-accent); }
/* What is open carries a Close at its top, and another at its foot, because it
   runs longer than a screen. */
.tdhead { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.tfull { margin: 0; font-size: 13.5px; font-weight: 560; line-height: 1.5; }
button.tclose { flex: none; }
tr.open > td { background: rgba(var(--accent-rgb),.04); }
tr.tdetail > td { background: rgba(var(--accent-rgb),.04); padding: 6px 12px 16px 12px; }
tr.tdetail .tbody { font-size: 13px; line-height: 1.55; }
select.inline, input.inline { font-size: 12px; padding: 3px 0 4px; max-width: 150px; }
select.inline { padding-right: 18px; background-position: right 2px center; }
input[type=date].inline { font-size: 11px; }
.drawer input, .drawer textarea, .drawer select { width: 100%; }
.drawer label.small { display: block; margin-bottom: 4px; }
.status.rejected { opacity: .8; }

.about { margin: 8px 0 4px; padding: 10px 12px; border-left: 2px solid var(--accent); background: rgba(var(--accent-rgb),.05); border-radius: 0 8px 8px 0; }
.about p { font-size: 13.5px; line-height: 1.6; }
/* The full-size one centres itself with 80 pixels of air above and below; an
   inline one that kept that air put 160 pixels between every line of a list. */
/* The window is working on something you pressed: a hairline under the top
   bar, never a blank page. Shown only past a quarter of a second. */
/* What just happened, said once at the foot of the window and gone. Used
   where one press does several things and the redrawn page cannot show them
   all: somebody's last day, which moves tasks, a login and the access register
   at once. */
.told { position: fixed; left: 50%; transform: translateX(-50%); bottom: 22px; z-index: 90; max-width: min(92vw, 70ch);
  background: var(--paper); border: 1px solid var(--line); border-radius: 10px; padding: 11px 16px; font-size: 13px;
  box-shadow: 0 2px 6px rgba(var(--ink-rgb),.08), 0 12px 32px rgba(var(--ink-rgb),.12); }
.workline { position: fixed; left: 0; right: 0; top: var(--top-h, 0px); height: 2px; z-index: 70; overflow: hidden; background: rgba(var(--ink-rgb),.06); }
.workline::after { content: ''; position: absolute; inset: 0; width: 34%; background: var(--accent); animation: workline 1.1s ease-in-out infinite; }
@keyframes workline { 0% { transform: translateX(-100%); } 100% { transform: translateX(330%); } }
@media (prefers-reduced-motion: reduce) { .workline::after { animation: none; width: 100%; opacity: .4; } }
.spinner.inline { display: inline-block; width: 10px; height: 10px; vertical-align: middle; margin: 0 4px 0 0; }

p.account { margin: 6px 0 4px; font-size: 13px; line-height: 1.6; color: var(--ink); max-width: 78ch; }
.parts .part { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; padding: 3px 0; font-size: 12.5px; }
.parts .part > span:first-child { color: var(--ink-2); }
.parts .part a.rc { font-size: 12px; }

button.tiny { padding: 3px 9px; font-size: 11px; font-weight: 600; }
.about .small.needs { font-weight: 560; }

/* ---- The person ---- */
.personhead { display: flex; gap: 22px; align-items: center; }
.personhead .photo { width: 132px; height: 132px; border-radius: 50%; object-fit: cover; object-position: 50% 30%; flex: none; box-shadow: 0 0 0 1px rgba(var(--ink-rgb),.08); }
.personhead .photo.empty { display: flex; align-items: center; justify-content: center; text-align: center; padding: 14px; font-size: 11px; color: var(--faint); background: rgba(var(--ink-rgb),.04); border: 1px dashed rgba(var(--ink-rgb),.18); box-sizing: border-box; }
.psec { padding: 14px 0; border-bottom: 1px solid var(--line); }
.psec:last-child { border-bottom: 0; }
.psec .phead { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; margin-bottom: 4px; }
.psec h4 { margin: 0; font-size: 14px; font-weight: 640; letter-spacing: -.01em; }
.psec .pacts { margin-left: auto; display: flex; gap: 6px; }
.psec p { margin: 4px 0 6px; font-size: 13.5px; line-height: 1.6; max-width: 80ch; }
.prose p { margin: 0 0 10px; font-size: 13.5px; line-height: 1.6; max-width: 84ch; }
.prose p.li { padding-left: 14px; position: relative; margin-bottom: 4px; }
.prose p.li::before { content: '·'; position: absolute; left: 2px; }
.prose h5 { margin: 12px 0 4px; font-size: 12.5px; font-weight: 640; }
.prose table { font-size: 12.5px; }

.prose p { font-size: 14px; line-height: 1.7; max-width: 76ch; margin: 0 0 12px; }
.prose .cites { white-space: nowrap; }
.prose .cite { display: inline-block; font-family: var(--mono); font-size: 10.5px; line-height: 1.2; padding: 2px 6px; margin: 0 2px; border-radius: 6px; background: rgba(var(--accent-rgb),.07); color: var(--accent); text-decoration: none; vertical-align: 1px; }
.prose a.cite:hover { background: rgba(var(--accent-rgb),.14); }
.prose table td, .prose table th { font-size: 12.5px; vertical-align: top; }

/* The person's own picture: rows that change where they stand, a value's remove mark, and one quiet control at the foot of each read section. */
.ownrow { display: flex; gap: 12px; align-items: flex-start; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.ownrow:last-of-type { border-bottom: 0; }
.chip button.x { all: unset; cursor: pointer; margin-left: 7px; font-size: 12px; line-height: 1; opacity: .55; }
.chip button.x:hover { opacity: 1; }
.oneline { margin: 6px 0 4px; display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.psec .pfoot { display: flex; gap: 14px; align-items: baseline; justify-content: space-between; flex-wrap: wrap; margin-top: 2px; }
.psec .pfoot a.change { color: var(--mute); }
.psec .pfoot a.change:hover { color: var(--accent); }

.personhead .photowrap { display: flex; flex-direction: column; align-items: center; flex: none; }

/* ── create a client ────────────────────────────────────────────────────
   The client takes shape as it is typed: a sheet of hairline fields on the
   left, and on the right what the firm will hold the moment the button is
   pressed. Drawn 6 September 2026. */
.mk { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 44px; align-items: start; margin-top: 6px; }
.mk .sheet { max-width: 640px; }
.mk .sec { padding: 26px 0 30px; border-top: 1px solid var(--line); }
.mk .sec:first-child { border-top: 0; padding-top: 8px; }
.mk .l { display: block; font-size: 9.5px; letter-spacing: .17em; text-transform: uppercase; color: var(--faint); font-weight: 600; margin-bottom: 14px; }
.mk .hint { font-size: 11.5px; color: var(--mute); margin-top: 7px; line-height: 1.5; }
.mk input { width: 100%; font-size: 14px; }
.mk input.name { font-family: var(--display); font-size: 30px; font-weight: 620; letter-spacing: -.03em; padding: 4px 0 8px; border-bottom-width: 1px; border-bottom-color: var(--line-3); }
.mk input.name::placeholder { font-weight: 500; }
.mk .f { margin-top: 22px; }
.mk .f .l { display: block; margin-bottom: 2px; }
.mk .two { display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px; }
.mk .seg { display: inline-flex; margin-top: 6px; border-radius: var(--r-xs); box-shadow: inset 0 0 0 1px var(--line-2); overflow: hidden; }
.mk .seg button { background: transparent; color: var(--mute); border-radius: 0; box-shadow: none; padding: 7px 14px; font-weight: 560; }
.mk .seg button + button { border-left: 1px solid var(--line-2); }
.mk .seg button:hover { filter: none; background: rgba(var(--ink-rgb),.05); color: var(--ink); }
.mk .seg button.on { background: var(--accent-dim); color: var(--accent-2); }
.mk .svc { display: flex; flex-direction: column; margin-top: 16px; border-top: 1px solid var(--line); }
.mk .svc button { position: relative; display: block; width: 100%; text-align: left; background: transparent; color: var(--ink-2); border-radius: 0; box-shadow: none; padding: 12px 16px 12px 18px; border-bottom: 1px solid var(--line); white-space: normal; transition: background .18s var(--swift); }
.mk .svc button:hover { filter: none; background: rgba(var(--ink-rgb),.035); }
.mk .svc button::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--accent); opacity: 0; transition: opacity .18s var(--swift); }
.mk .svc button.on { color: var(--ink); background: rgba(var(--accent-rgb),.05); }
.mk .svc button.on::before { opacity: 1; }
.mk .svc .nm { display: block; font-family: var(--display); font-size: 14px; font-weight: 620; letter-spacing: -.01em; }
.mk .svc button.on .nm { color: var(--accent-2); }
.mk .svc .yd { display: block; font-size: 11.5px; color: var(--mute); margin-top: 3px; line-height: 1.45; font-weight: 400; }
.mk .foot .row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.mk aside { position: sticky; top: 84px; }
.mk .prev { padding: 22px 22px 24px; border-radius: var(--r); box-shadow: var(--ring), var(--lift-1); background: var(--s1); }
.mk .prev .l { margin-bottom: 10px; }
.mk .rail-mock { padding: 8px 0 4px; }
.mk .rail-mock .top { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: var(--r-s); background: rgba(var(--accent-rgb),.11); font-size: 13px; font-weight: 560; color: var(--ink); }
.mk .rail-mock .top .lbl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mk .rail-mock .sections { padding: 4px 0 0 22px; }
.mk .rail-mock .nav { display: flex; align-items: center; gap: 9px; padding: 5px 8px; font-size: 12.5px; color: var(--ink-2); }
.mk .rail-mock .nav .ico { width: 14px; text-align: center; color: var(--faint); font-size: 11px; }
.mk .rail-mock .nav.dim { color: var(--line-3); }
.mk .rail-mock .nav.dim .ico { color: var(--line-3); }
.mk ol.pic { margin: 0; padding: 0; list-style: none; counter-reset: pic; }
.mk ol.pic li { counter-increment: pic; display: flex; gap: 12px; align-items: baseline; padding: 6px 0; border-top: 1px solid var(--line); font-family: var(--display); font-size: 13.5px; font-weight: 560; letter-spacing: -.005em; }
.mk ol.pic li::before { content: counter(pic, decimal-leading-zero); font-family: var(--mono); font-size: 10px; color: var(--faint); min-width: 18px; }
.mk .prev p.yd { font-size: 11.5px; color: var(--mute); line-height: 1.5; margin: 10px 0 0; }
.mk .path { font-family: var(--mono); font-size: 11.5px; color: var(--ink-2); background: rgba(var(--ink-rgb),.05); padding: 6px 9px; border-radius: 5px; display: inline-block; }
.mk .prev p.hint { margin-top: 10px; }
@media (max-width: 1180px) { .mk { grid-template-columns: minmax(0, 1fr) 280px; gap: 32px; } }
@media (max-width: 960px) { .mk { grid-template-columns: 1fr; } .mk aside { position: static; } .mk .two { grid-template-columns: 1fr; } .mk .sheet { max-width: none; } }

/* ── who can see what ──────────────────────────────────────────────────── */
/* Left, everyone with a login; right, the chosen person's doors as the groups
   of the rail, every tick a row on a hairline. Under 960 the two stack. */
.acc { display: grid; grid-template-columns: 272px minmax(0, 1fr); gap: 44px; align-items: start; margin-top: 6px; }
.acc .l { display: block; font-size: 9.5px; letter-spacing: .17em; text-transform: uppercase; color: var(--faint); font-weight: 600; margin-bottom: 10px; }
.acc .who .l { margin: 0 0 6px; }
.acc .who button.p:first-of-type { border-top: 1px solid var(--line); }
.acc .who button.p { position: relative; display: block; width: 100%; text-align: left; background: transparent; color: var(--ink-2); border-radius: 0; box-shadow: none; padding: 11px 14px 11px 16px; border-bottom: 1px solid var(--line); white-space: normal; transition: background .18s var(--swift); }
.acc .who button.p:hover { filter: none; background: rgba(var(--ink-rgb),.035); }
.acc .who button.p::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--accent); opacity: 0; transition: opacity .18s var(--swift); }
.acc .who button.p.on { color: var(--ink); background: rgba(var(--accent-rgb),.05); }
.acc .who button.p.on::before { opacity: 1; }
.acc .nm { display: block; font-family: var(--display); font-size: 14.5px; font-weight: 620; letter-spacing: -.015em; }
.acc .st { display: block; font-size: 11.5px; color: var(--mute); margin-top: 2px; font-weight: 400; }
.acc .add { margin-top: 28px; padding-top: 6px; }
.acc .f { margin-top: 16px; }
.acc .f .l { margin-bottom: 2px; }
.acc .f input, .acc .f select { width: 100%; }
.acc .hint { font-size: 11.5px; color: var(--mute); margin-top: 7px; line-height: 1.5; }
.acc .acts { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 16px; }
.acc .detail .head { display: flex; align-items: center; gap: 13px; padding: 4px 0 14px; border-bottom: 1px solid var(--line); }
.acc .detail .head .acts { margin-top: 0; }
.acc .detail .head .nm { font-size: 19px; letter-spacing: -.025em; }
.acc .detail .head .st.em { color: var(--faint); font-family: var(--mono); font-size: 11px; margin-top: 3px; }
.acc .detail .fold { margin-top: 10px; }
.acc .detail .fold-body .doors { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.acc .detail h3.sec { margin-top: 26px; }
#drawer .lg .seg { display: inline-flex; margin-top: 6px; border-radius: var(--r-xs); box-shadow: inset 0 0 0 1px var(--line-2); overflow: hidden; }
#drawer .lg .seg button { background: transparent; color: var(--mute); border-radius: 0; box-shadow: none; padding: 7px 14px; font-weight: 560; }
#drawer .lg .seg button + button { border-left: 1px solid var(--line-2); }
#drawer .lg .seg button.on { background: var(--accent-dim); color: var(--accent-2); }
#drawer .lg .f input, #drawer .lg .f select { width: 100%; }
.acc .detail .head.small-head { padding: 12px 0 2px; border-bottom: 0; }
.acc .detail .head.small-head .nm { font-size: 14px; }
.acc .fields { display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px; margin-bottom: 8px; }
.acc .block { margin-top: 18px; }
.acc .doors { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 0 32px; }
.acc label.row { display: flex; align-items: baseline; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; color: var(--ink-2); cursor: pointer; }
.acc label.row:hover { color: var(--ink); }
.acc label.row small { color: var(--mute); font-size: 11.5px; }
.acc label.row.dim { color: var(--faint); }
.acc label.row input { margin-right: 0; }
@media (max-width: 1180px) { .acc { grid-template-columns: 240px minmax(0, 1fr); gap: 32px; } .acc .fields { grid-template-columns: 1fr; } }
@media (max-width: 960px) { .acc { grid-template-columns: 1fr; } }
/* Login and security: fields on hairlines, the steps, the conditions. */
.lg .f { margin-top: 16px; }
.lg .f .l { display: block; font-size: 9.5px; letter-spacing: .17em; text-transform: uppercase; color: var(--faint); font-weight: 600; margin-bottom: 2px; }
.lg .f input { width: 100%; }
.lg .f input[type=checkbox] { width: auto; margin: 0; }
.lg .hint { font-size: 11.5px; color: var(--mute); margin-top: 7px; line-height: 1.5; }
.lg .two { display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px; }
.lg .acts { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 14px; }
.lg ol.steps { margin: 6px 0 0; padding-left: 20px; font-size: 13px; line-height: 1.6; color: var(--ink-2); }
.lg ol.steps li { margin-bottom: 8px; }
a.btn { display: inline-flex; align-items: center; padding: 8px 15px; border-radius: var(--r-xs); background: var(--accent); color: var(--on-accent); font-size: 12.5px; font-weight: 620; text-decoration: none; }
a.btn:hover { filter: brightness(1.1); }
.cond { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 13px; color: var(--mute); }
.cond .mark { width: 16px; text-align: center; color: var(--faint); }
.cond.ok { color: var(--ink-2); } .cond.ok .mark { color: var(--good); }
.choice[disabled] { opacity: .55; cursor: not-allowed; }
@media (max-width: 960px) { .lg .two { grid-template-columns: 1fr; } }
/* Seeing it as someone else: a band across the top with the way back. */
.lookas { position: fixed; top: 0; left: 0; right: 0; z-index: 95; display: flex; align-items: center; justify-content: center; gap: 14px; padding: 7px 14px; background: var(--warn); color: var(--on-accent); font-size: 12.5px; }
.lookas b { font-weight: 680; }
.lookas button { background: rgba(var(--on-accent-rgb),.16); color: var(--on-accent); box-shadow: inset 0 0 0 1px rgba(var(--on-accent-rgb),.4); padding: 4px 10px; font-size: 11.5px; }
html[data-lookas] #app { padding-top: 34px; }
html[data-lookas] .rail { top: 34px; height: calc(100vh - 34px); }
@media (max-width: 960px) { html[data-lookas] .rail { top: 34px; height: calc(100vh - 34px); inset: 34px auto 0 0; } html[data-lookas] .bar { top: 34px; } }

/* ── the books ─────────────────────────────────────────────────────────── */
/* Where a figure came from: the bank, the July workbook, a person, an invoice. */
.chip.st-bank { color: var(--good); }
.chip.st-workbook { color: var(--c5); }
.chip.st-typed { color: var(--warn); }
.chip.st-invoice { color: var(--accent); }
.chip.st-ledger { color: var(--c6); }
td.money, th.money { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; font-family: var(--display); }
td.money.out { color: var(--ink-2); } td.money.in { color: var(--good); }
/* Three tabs inside a pane, for For review, Categorised and Excluded: a control
   inside the card, never a strip across the page. */
.tabs { display: flex; gap: 6px; margin: 0 0 12px; flex-wrap: wrap; }
.tabs button { background: none; box-shadow: var(--ring); color: var(--mute); font-weight: 560; }
.tabs button.on { color: var(--ink); background: var(--s3); }
.tabs button .n { margin-left: 6px; color: var(--faint); font-size: 11px; }
.line-desc { font-size: 12.5px; line-height: 1.35; max-width: 420px; min-width: 200px; overflow-wrap: anywhere; }
/* A line in For review: the category to pick, and the five presses in two
   steady rows (Add, Match, Split; Transfer, Exclude) that never wrap
   differently from one row to the next. */
select.inline.cat { max-width: 200px; width: 100%; min-width: 160px; }
.acts.review { display: grid; grid-template-columns: repeat(3, max-content); gap: 6px; align-items: center; min-width: 236px; }
td.review-acts { white-space: nowrap; padding-left: 12px; }
.line-desc .who { display: block; font-size: 11px; color: var(--mute); margin-top: 2px; }
.acts.row { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
select.inline.cat { max-width: 220px; }
.rec-row { display: grid; grid-template-columns: 1fr auto; gap: 8px 16px; padding: 7px 0; border-top: 1px solid var(--line); font-size: 13px; align-items: baseline; }
.rec-row b { font-family: var(--display); font-variant-numeric: tabular-nums; }
.rec-row.total { border-top: 1px solid var(--line-2); font-weight: 620; }
.check-ok { color: var(--good); } .check-no { color: var(--bad); }

/* ── fields ───────────────────────────────────────────────────────────────
   Every place a person types, one look: the words on a hairline, the accent
   under the one being typed into, and no box. A textarea is the one light
   surface step, a sheet to write on. Set 6 September 2026 after the Founder
   said he did not like the feel of the input boxes on The work. */
input, textarea, select { font-family: var(--sans); font-size: 13.5px; color: var(--ink); background: transparent; border: 0; border-bottom: 1px solid var(--line-2); border-radius: 0; padding: 7px 0 8px; outline: 0; box-sizing: border-box; -webkit-appearance: none; appearance: none; transition: border-color .18s var(--swift), background-color .18s var(--swift); }
input::placeholder, textarea::placeholder { color: var(--line-3); }
input:focus, textarea:focus, select:focus { border-bottom-color: var(--accent); }
input[type=date], input[type=number], input[type=time] { font-family: var(--mono); font-size: 12.5px; }
input[type=number] { -moz-appearance: textfield; }
input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
input[type=date]::-webkit-calendar-picker-indicator { opacity: .55; cursor: pointer; }
input[type=checkbox], input[type=radio] { -webkit-appearance: auto; appearance: auto; border: 0; padding: 0; width: auto; accent-color: var(--accent); vertical-align: middle; margin-right: 6px; }
input[type=file], input[type=hidden] { border: 0; }
select { padding-right: 22px; cursor: pointer; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' fill='none' stroke='%236E7787' stroke-width='1.4' stroke-linecap='round'/></svg>"); background-repeat: no-repeat; background-position: right 4px center; }
select option { font-family: var(--sans); color: var(--ink); background: var(--paper); }
textarea { line-height: 1.55; resize: vertical; padding: 10px 12px; background: var(--s3); border-bottom: 1px solid var(--line-2); border-radius: var(--r-xs) var(--r-xs) 0 0; min-height: 64px; }
textarea:focus { background: var(--s4); }
.palette input { border: 0; }

/* ── statements ─────────────────────────────────────────────────────────
   A financial statement drawn as one: hairlines on every row, sections
   set in small capitals, lines indented under them, a rule above each
   subtotal, a double rule under the last line, negatives in brackets,
   nil as a dash. Set 6 September 2026 after the Founder said the Profit &
   Loss had no lines and everything ran together. */
table.stmt { font-variant-numeric: tabular-nums; }
table.stmt tbody td { padding: 8px 14px; border-bottom: 1px solid var(--line); vertical-align: baseline; }
table.stmt tbody tr:last-child td { border-bottom: 0; }
table.stmt td:first-child, table.stmt th:first-child { position: sticky; left: 0; background: var(--paper); min-width: 220px; }
table.stmt tbody tr:hover td { background: rgba(var(--ink-rgb),.028); }
table.stmt tr.head td { padding-top: 18px; padding-bottom: 6px; font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; font-weight: 640; color: var(--ink-2); border-bottom: 1px solid var(--line-2); }
table.stmt tr.line td:first-child { padding-left: 30px; color: var(--ink-2); }
table.stmt tr.sub td { border-top: 1px solid var(--line-2); font-weight: 620; color: var(--ink); }
table.stmt tr.total td { border-top: 1px solid var(--ink); border-bottom: 3px double var(--ink); font-weight: 680; padding-top: 10px; padding-bottom: 10px; }
table.stmt td.money.nil { color: var(--faint); }
table.stmt th.money { text-align: right; }

/* ── what is going on: counted lines, or her own words ───────────────── */
.analysis p { margin: 0 0 8px; font-size: 13.5px; line-height: 1.55; max-width: 72ch; }
.analysis p:last-child { margin-bottom: 0; }

/* ── headings stay in their row ──────────────────────────────────────
   A heading held to the top of the window was tried on 6 September 2026
   and taken out the same night: a pane clips its overflow, so the heading
   held inside the pane instead and slid down over the first rows (the
   Founder, on the August statement: value added tax at the bottom of the
   header, everything bleeding into each other). A row explains itself
   instead: a cell carries words, never a bare yes or a bare number. */
.pane.on { box-shadow: inset 0 0 0 1.5px var(--accent), var(--ring); }
.maker { margin-top: 4px; }
.maker input, .maker select { font-size: 12px; }
td.tick, th.tick { width: 28px; padding-right: 0; }
td.tick input, th.tick input { width: 15px; height: 15px; margin: 2px 0 0; accent-color: var(--accent); }

/* ---- the Finance Dashboard: not a grid of tiles. ---- */
.cash { display: grid; grid-template-columns: minmax(200px, 1fr) minmax(0, 2.4fr); gap: 16px 32px; padding: 6px 0 18px; border-bottom: 1px solid var(--line); margin-bottom: 18px; min-width: 0; }
.cash .big .l, .strip .l { font-size: 9.5px; letter-spacing: .17em; text-transform: uppercase; color: var(--faint); font-weight: 600; }
.cash .big .n { font-family: var(--display); font-size: 46px; font-weight: 640; letter-spacing: -.045em; line-height: 1; margin-top: 10px; font-variant-numeric: tabular-nums; }
.cash .big .s { font-size: 12px; color: var(--mute); margin-top: 10px; max-width: 30ch; line-height: 1.45; }
.accts { display: grid; align-content: start; }
.acct { display: grid; grid-template-columns: 1.1fr 1fr 1.3fr; gap: 4px 16px; padding: 9px 0; border-top: 1px solid var(--line); font-size: 13px; align-items: start; }
.acct:first-child { border-top: 0; padding-top: 0; }
.acct .name { font-weight: 600; }
.acct .fig b { font-family: var(--display); font-variant-numeric: tabular-nums; font-size: 15px; }
.acct .ok, .went .ok, .small.ok { color: var(--good); }
.strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); border: 1px solid var(--line); border-radius: var(--r); margin-bottom: 18px; overflow: hidden; }
.strip > div { padding: 14px 16px 15px; border-left: 1px solid var(--line); min-width: 0; }
.strip > div:first-child { border-left: 0; }
.strip .n { font-family: var(--display); font-size: 26px; font-weight: 640; letter-spacing: -.035em; line-height: 1.05; margin-top: 8px; font-variant-numeric: tabular-nums; }
.strip .s { font-size: 11.5px; color: var(--mute); margin-top: 5px; line-height: 1.4; }
ul.todo { list-style: none; margin: 0; padding: 0; }
ul.todo li { display: flex; gap: 12px; align-items: baseline; padding: 8px 0; border-top: 1px solid var(--line); font-size: 13px; }
ul.todo li:first-child { border-top: 0; padding-top: 0; }
ul.todo .n { font-family: var(--mono); font-size: 12px; min-width: 22px; text-align: right; color: var(--ink-2); }
.went .row { display: grid; grid-template-columns: minmax(0, 1fr) 100px 110px; gap: 12px; align-items: center; padding: 7px 0; border-top: 1px solid var(--line); font-size: 13px; }
.went .row:first-child { border-top: 0; padding-top: 0; }
.went .row.head { font-size: 9.5px; letter-spacing: .17em; text-transform: uppercase; color: var(--faint); font-weight: 600; padding-bottom: 4px; }
.went .row.head > span:nth-child(2) { text-align: right; }
.went .row b { font-family: var(--display); font-variant-numeric: tabular-nums; text-align: right; }
.went .row > span:last-child { text-align: right; }
.went .row.total { border-top: 1px solid var(--line-2); font-weight: 620; }
.went .row.quiet > span:first-child { color: var(--mute); }
.meter { height: 4px; background: var(--s4); border-radius: 2px; overflow: hidden; margin-top: 5px; max-width: 260px; }
.meter i { display: block; height: 100%; background: var(--warn); }
@media (max-width: 960px) { .cash { grid-template-columns: 1fr; } .acct { grid-template-columns: 1fr 1fr; } .acct .fig:last-child { grid-column: 1 / span 2; } }

/* ---- money cells and the invoice sheet ---- */
.money-field { display: flex; align-items: baseline; gap: 6px; border-bottom: 1px solid var(--line-2); }
.money-field:focus-within { border-bottom-color: var(--accent); }
.money-field .cur { color: var(--mute); font-family: var(--display); font-size: 14px; padding-left: 2px; }
.money-field input { border-bottom: 0 !important; text-align: right; font-family: var(--display); font-variant-numeric: tabular-nums; font-size: 15px; min-width: 0; }
.money-field input::placeholder { font-family: var(--mono); font-size: 12px; }
.inv-sec { font-size: 9.5px; letter-spacing: .17em; text-transform: uppercase; color: var(--faint); font-weight: 600; margin-bottom: 8px; }
.inv-row3 { display: grid; grid-template-columns: 1fr 1fr 1.4fr; gap: 16px; margin-top: 10px; }
.inv-head { display: grid; grid-template-columns: minmax(0, 1fr) 180px 64px; gap: 12px; font-size: 9.5px; letter-spacing: .17em; text-transform: uppercase; color: var(--faint); font-weight: 600; padding-bottom: 6px; border-bottom: 1px solid var(--line-2); }
.inv-head span:nth-child(2) { text-align: right; }
.inv-line { display: grid; grid-template-columns: minmax(0, 1fr) 180px 64px; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); align-items: start; }
.inv-line .inv-cell textarea { margin-top: 6px; min-height: 36px; font-size: 12.5px; }
.inv-line .inv-cell.acts { text-align: right; padding-top: 4px; }
.inv-totals { display: flex; justify-content: flex-end; padding: 10px 0 0; }
.inv-total { display: grid; grid-template-columns: auto 200px; gap: 16px; align-items: baseline; font-size: 13px; }
.inv-total b { font-family: var(--display); font-size: 18px; text-align: right; font-variant-numeric: tabular-nums; }
.inv-tick { display: flex; gap: 8px; align-items: baseline; margin-top: 14px; }
.inv-part { display: flex; flex-direction: column; align-items: flex-end; margin-top: 8px; }
.inv-part .inv-total > span:first-child { color: var(--mute); }
.inv-part .small { max-width: 420px; text-align: right; }
@media (max-width: 640px) { .inv-row3 { grid-template-columns: 1fr; } .inv-head { display: none; } .inv-line { grid-template-columns: 1fr; } .inv-line .inv-cell.acts { text-align: left; } }

/* The sheet's action bar stays at the foot of the sheet while the body scrolls. */
.sheet-acts { position: sticky; bottom: 0; margin: 18px -24px -70px; padding: 14px 24px 18px; background: var(--s1); border-top: 1px solid var(--line); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* ---- Operations ---- */
.ops-photo { border-radius: 50%; object-fit: cover; display: inline-block; vertical-align: middle; background: var(--s4); }
.ops-initial { display: inline-block; border-radius: 50%; background: var(--s4); vertical-align: middle; }
.ops-who { display: flex; gap: 10px; align-items: center; }
.ops-head { display: flex; gap: 20px; align-items: center; padding: 6px 0 18px; border-bottom: 1px solid var(--line); margin-bottom: 18px; }
.ops-head .l { font-size: 9.5px; letter-spacing: .17em; text-transform: uppercase; color: var(--faint); font-weight: 600; }
.ops-head h2 { font-family: var(--display); font-size: 26px; font-weight: 640; letter-spacing: -.03em; margin: 4px 0 6px; }
.ops-head p { margin: 0 0 4px; }
ul.plain { margin: 0; padding-left: 18px; font-size: 13px; line-height: 1.6; }
.ops-row { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 2fr) 60px; gap: 12px; align-items: center; padding: 8px 0; border-top: 1px solid var(--line); font-size: 13px; }
.ops-row:first-child { border-top: 0; padding-top: 0; }
.ops-row > span:last-child { text-align: right; }
.ops-cells { display: flex; gap: 6px; flex-wrap: wrap; }
.ops-day { display: inline-block; min-width: 42px; text-align: center; padding: 3px 8px; border-radius: 999px; font-size: 11.5px; border: 1px solid var(--line-2); color: var(--mute); }
.ops-day.yes { background: rgba(var(--good-rgb),.12); border-color: rgba(var(--good-rgb),.35); color: var(--good); cursor: pointer; }
.ops-day.no { background: rgba(var(--bad-rgb),.12); border-color: rgba(var(--bad-rgb),.35); color: var(--bad); }
.ops-day.future { opacity: .55; }
button.ops-cell.yes { color: var(--good); } button.ops-cell.no { color: var(--mute); } button.ops-cell.unknown { color: var(--faint); font-style: italic; }
button.ops-yes { color: var(--good); } button.ops-no { color: var(--bad); }

/* ── Social, platform by platform, and the leads ───────────────────────────
   Social above carries only what is true across the platforms; each platform
   is a card that opens its own page. The Founder, 7 September 2026: everything
   just reads like a long list of data that really tells us nothing. */
.pcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.pcard { display: flex; align-items: center; gap: 11px; padding: 13px 14px; border: 1px solid var(--line);
  border-radius: 10px; background: var(--surface); color: inherit; text-decoration: none; transition: border-color .15s var(--swift), background .15s var(--swift); }
.pcard:hover { border-color: var(--accent); background: var(--surface-2); }
.pcard .pico { font-size: 15px; color: var(--muted); width: 22px; text-align: center; flex: none; }
.pcard .pbody { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.pcard .pbody b { font-size: 14px; }
.pcard .pline { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* One lead. The words are the point, so they get the reading face and the room
   to be read; everything set on the row sits on the hairline above them. */
.lead { padding: 13px 0; border-bottom: 1px solid var(--line); }
.lead:last-child { border-bottom: 0; }
.lead .lhead { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.lead .lhead .d { font: 12px var(--mono); color: var(--muted); }
.lead .lhead .plat { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.lead .lhead .cnt { font: 12px var(--mono); color: var(--accent); }
.lead .lhead select { margin-left: auto; }
.lead .lhead select + select { margin-left: 6px; }
.lead .ltext { font-family: var(--read); font-size: 15px; line-height: 1.55; margin: 0 0 7px; }
.lead .lfoot { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 12px; }
.lead .lfoot a { color: var(--muted); }
.lead .lfoot a:hover { color: var(--accent); }
.lead .lfoot .followed { flex: 1; min-width: 180px; font-size: 12px; }

/* One judged comment or message. The line is the reader's own words: nothing
   anyone wrote is ever shown here, because nothing anyone wrote is stored. */
.inb { display: flex; align-items: baseline; gap: 11px; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.inb:last-child { border-bottom: 0; }
.inb .d { font: 12px var(--mono); color: var(--muted); flex: none; }
.inb .plat { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); flex: none; width: 62px; }
.inb .why { flex: 1; min-width: 0; }
.inb .ask { font-size: 11.5px; color: var(--accent); flex: none; }
.inb a { font-size: 12px; color: var(--muted); flex: none; }
.inb a:hover { color: var(--accent); }

/* Settings: one row per choice, the chosen one marked, no boxes. */
.choices { display: grid; gap: 2px; }
.choice { display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start; text-align: left; padding: 12px 10px; background: transparent; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; color: var(--ink); font: inherit; cursor: pointer; }
.choice:last-child { border-bottom: 0; }
.choice:hover { background: rgba(var(--ink-rgb),.03); }
.choice .mark { color: var(--accent); font-size: 13px; padding-top: 2px; }
.choice b { display: block; font-family: var(--display); font-weight: 620; font-size: 15px; }
.choice small { display: block; color: var(--mute); font-size: 12.5px; margin-top: 2px; }
.choice.on b { color: var(--accent); }
a.choice { color: var(--ink); text-decoration: none; }
.choice.dim { cursor: default; } .choice.dim:hover { background: transparent; } .choice.dim b { color: var(--mute); } .choice.dim .mark { color: var(--faint); }
.pane .body.flush > .choices .choice { padding: 14px 20px; }

/* ---- the firm's own screens (9 September 2026) ---------------------------- */
/* A channel card on Marketing is a pane that opens a page. */
a.pane.chan { display: block; color: inherit; text-decoration: none; cursor: pointer; }
a.pane.chan:hover { box-shadow: var(--ring), var(--lift-2, var(--lift-1)); }
a.pane.chan header .chip { margin-left: auto; }
/* The rail under Prospects and Marketing: the same indent a client's sections take. */
.rail .under { margin: 1px 0 3px 14px; border-left: 1px solid var(--line); padding-left: 3px; }
.rail .under a.nav { padding: 4px 9px; font-size: 12px; color: var(--muted); }
.rail .under a.nav .ico { font-size: 11px; width: 13px; }
.rail .under a.nav.on { color: var(--ink); }
.rail .under a.nav.on::before { left: -5px; }
.rail .under .under { margin-left: 10px; }
.rail .under .sections { margin-left: 0; }

/* ── the firm's mark, one per ground ───────────────────────────────────────
   The artwork is white, so on the white ground it was invisible: the rail
   showed an empty rounded square (the Founder, 9 September 2026). Both marks
   are in the page and the ground picks one, so it is correct before the first
   paint and follows the system's own light and dark without a redraw. The
   default here is light, matching the token blocks above. */
.orb.mark .on-dark { display: none; }
.orb.mark .on-light { display: block; }
:root[data-theme="dark"] .orb.mark .on-dark { display: block; }
:root[data-theme="dark"] .orb.mark .on-light { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .orb.mark .on-dark { display: block; }
  :root:not([data-theme="light"]) .orb.mark .on-light { display: none; }
}

/* The period bar on Expenses: what the page shows and what it is set against, in words. */
.period { display: grid; gap: 12px; padding: 16px 20px 15px; margin-bottom: 18px; }
.period .row { display: flex; align-items: center; gap: 12px 16px; flex-wrap: wrap; }
.period .l { font-size: 9.5px; letter-spacing: .17em; text-transform: uppercase; color: var(--faint); font-weight: 600; min-width: 62px; }
.period .seg { display: inline-flex; flex-wrap: wrap; border-radius: var(--r-xs); box-shadow: inset 0 0 0 1px var(--line-2); overflow: hidden; }
.period .seg button { background: transparent; color: var(--mute); border-radius: 0; box-shadow: none; padding: 7px 13px; font-weight: 560; font-size: 12px; }
.period .seg button + button { border-left: 1px solid var(--line-2); }
.period .seg button:hover { filter: none; background: rgba(var(--ink-rgb),.05); color: var(--ink); }
.period .seg button.on { background: var(--accent-dim); color: var(--accent-2); }
.period .ends { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--mute); }
.period .ends select.inline { max-width: 170px; }
.period .read { margin: 2px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--ink-2); }
.period .read b { color: var(--ink); font-weight: 620; }
@media (max-width: 960px) { .period .l { min-width: 100%; } }
/* On a narrow screen the choices wrap, and a shared box drawn around a wrapped
   row leaves a hairline hanging on the left of every new line. So each choice
   becomes its own chip and the box around them goes. */
@media (max-width: 720px) {
  .period .seg { box-shadow: none; gap: 7px; }
  .period .seg button { border-left: 0 !important; border-radius: var(--r-xs); box-shadow: inset 0 0 0 1px var(--line-2); }
}
.period .ends input.inline { max-width: 130px; }

/* ---- The Website page: the enquiry form step by step, where people are,
   and a small figure with its label, all on hairlines rather than in boxes. */
.funnel { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border-radius: var(--r-xs); overflow: hidden; }
.funnel .fstep { background: var(--paper); padding: 15px 16px 14px; }
.funnel .fstep .n { font-family: var(--display); font-size: 26px; font-weight: 600; letter-spacing: -.02em; color: var(--ink); line-height: 1.1; }
.funnel .fstep .l { font-size: 12.5px; color: var(--ink-2); margin-top: 3px; font-weight: 560; }
.funnel .fstep .s { font-size: 11.5px; color: var(--faint); margin-top: 3px; line-height: 1.45; }
.funnel .fstep + .fstep { position: relative; }
.funnel .fstep + .fstep::before { content: ''; position: absolute; left: -1px; top: 18px; width: 1px; height: 22px; background: var(--accent); opacity: .5; }
@media (max-width: 760px) { .funnel { grid-template-columns: repeat(2, 1fr); } }

.place { padding: 9px 0; border-top: 1px solid var(--line); }
.place:first-child { border-top: 0; padding-top: 0; }
.place .row { display: flex; align-items: baseline; gap: 8px; font-size: 13.5px; }
.place .row .n { font-family: var(--mono); font-size: 12.5px; color: var(--ink); }
.place .row .share { font-size: 11.5px; color: var(--faint); min-width: 42px; text-align: right; }

.stat .l { font-size: 9.5px; letter-spacing: .15em; text-transform: uppercase; color: var(--faint); font-weight: 600; }
.stat .v { font-family: var(--display); font-size: 21px; font-weight: 600; color: var(--ink); margin-top: 2px; }
.stat .s { font-size: 11.5px; color: var(--mute); }

/* ---- A post's own picture in a table. Built 13 September 2026, the Founder
   on the Instagram page: why can't we have the thumbnails of the actual
   videos, it's all just text heavy throughout. */
td.pic { white-space: nowrap; }
td.pic img { box-shadow: inset 0 0 0 1px rgba(var(--ink-rgb),.10), var(--lift-1); background: var(--s1); }
td.pic a:hover img { box-shadow: inset 0 0 0 1px var(--accent), var(--lift-2); }
td.pic .small { margin-top: 5px; color: var(--mute); }
.nopic { background: var(--s1); box-shadow: inset 0 0 0 1px var(--line); color: var(--faint); font-size: 14px; }
/* A caption with its picture beside it, where the row has no column of its own
   for one. Set 13 September 2026: anywhere a post is named it carries its
   picture, never plain text alone. */
.withpic { display: flex; align-items: flex-start; gap: 10px; }
.withpic > span { min-width: 0; }