/* Glass Ledger, Stellar edition, in the Remi Warm Editorial style.
   Tokens come from tokens.css. This file only maps them to roles.
   Rules this stylesheet keeps: numbers are always in a card, never on a line;
   wires sit under cards; one entrance animation, off under reduced motion. */

/* ---------- roles ----------
   Text colours are the design system colour mixed a little toward the text
   colour, so they pass WCAG AA on the warm surfaces in both themes. In Ink the
   mix only lightens them. The dark masthead maps the same roles again, so
   they resolve against its Ink tokens in both themes. */
:root,
.s-ink-deep{
  --bg:var(--remi-canvas);
  --surface:var(--remi-surface);
  --surface-2:var(--remi-surface-2);
  --line:var(--remi-line);
  --line-soft:var(--remi-line-soft);
  --text:var(--remi-ink);
  --muted:var(--remi-ink-soft);
  --dim:color-mix(in srgb,var(--remi-muted) 72%,var(--remi-ink));

  /* the brand coral marks this account and the main action */
  --you:var(--remi-accent);
  --you-soft:var(--remi-accent-soft);
  --you-border:var(--remi-accent-border);
  --accent-fg:color-mix(in srgb,var(--remi-accent-dark) 88%,var(--remi-ink));
  --accent-fill:var(--remi-accent-dark);
  --on-accent:#fff;

  /* money toward this account: sage */
  --in:var(--remi-success);
  --in-fg:color-mix(in srgb,var(--remi-success) 80%,var(--remi-ink));
  --in-soft:var(--remi-success-soft);
  /* money away from it: slate, borrowed from the bank type accent.
     Brick is kept for threats, so sending money never reads as an error. */
  --out:var(--ty-bank);
  --out-fg:color-mix(in srgb,var(--ty-bank) 85%,var(--remi-ink));
  --out-soft:var(--ty-bank-soft);
  /* other people's business: plain neutrals, never coloured */
  --ctx:var(--remi-muted);
  /* notes about memos and coverage: ochre */
  --warn:var(--remi-warning);
  --warn-fg:color-mix(in srgb,var(--remi-warning) 70%,var(--remi-ink));
  --warn-soft:var(--remi-warning-soft);
  /* impersonation and malicious tags: brick */
  --bad:var(--remi-danger);
  --bad-fg:color-mix(in srgb,var(--remi-danger) 80%,var(--remi-ink));
  --bad-soft:var(--remi-danger-soft);

  --measure:880px;
  --gutter:clamp(16px,4vw,40px);
}
/* In Ink, white on coral fails AA, so the fill takes dark text */
:root[data-theme="ink"],
.s-ink-deep{--accent-fg:var(--remi-accent);--accent-fill:var(--remi-accent);--on-accent:var(--remi-canvas)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="paper"]){--accent-fg:var(--remi-accent);--accent-fill:var(--remi-accent);--on-accent:var(--remi-canvas)}
}

*{box-sizing:border-box}
/* any display rule would otherwise beat the hidden attribute */
[hidden]{display:none!important}
html{background:var(--bg)}
body{margin:0;min-height:100vh;background-color:var(--bg);background-image:var(--remi-bg);background-repeat:no-repeat;color:var(--text);
  font-family:var(--font-sans);font-size:var(--fs-body1);line-height:1.5;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:inherit}
body:focus{outline:none}   /* focused only to restart Tab from the top */
::selection{background:var(--you-soft);color:var(--text)}
:focus-visible{outline:2px solid var(--accent-fg);outline-offset:2px;border-radius:var(--radius-xs)}
.skip{position:absolute;left:-999px;top:8px;background:var(--accent-fill);color:var(--on-accent);padding:8px 12px;border-radius:var(--radius-xs);z-index:100;font-weight:600}
.skip:focus{left:12px}
.page{max-width:var(--container-wide);margin:0 auto;padding:0 var(--gutter) 72px}
.dim{color:var(--dim)}

/* ---------- search ----------
   The top bar and the masthead around it are in remi-shell.css. */
.eyebrow{font:600 var(--fs-overline)/1.4 var(--font-sans);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--accent-fg)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.search{display:flex;gap:10px;max-width:var(--measure)}
.search input{flex:1;min-width:0;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius-sm);color:var(--text);
  font:500 15px var(--font-mono);letter-spacing:.01em;padding:0 16px;height:52px;transition:border-color .15s,box-shadow .15s,background-color .15s}
.search input::placeholder{color:var(--dim);font-family:var(--font-sans);letter-spacing:0}
.search input:focus{outline:none;border-color:var(--you);background:var(--surface);box-shadow:var(--focus-ring)}
.search input[aria-invalid="true"]{border-color:var(--bad)}
.hintline{min-height:22px;margin:10px 0 0;font-size:13px;color:var(--bad-fg);max-width:var(--measure)}
.hintline.ok{color:var(--in-fg)}
.hintline.danger{color:var(--text);background:var(--bad-soft);border:1px solid var(--bad);border-radius:var(--radius-sm);padding:10px 12px}
.fineprint{font-size:12.5px;color:var(--dim);margin:4px 0 0;max-width:var(--measure);line-height:1.6}

/* ---------- buttons ---------- */
.btn{appearance:none;display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid var(--line);background:var(--surface);
  color:var(--muted);font:600 13px var(--font-sans);letter-spacing:.01em;border-radius:var(--radius-sm);padding:0 14px;min-height:38px;
  cursor:pointer;white-space:nowrap;transition:color .15s,border-color .15s,background-color .15s,opacity .15s}
.btn:hover:not(:disabled){color:var(--accent-fg);border-color:var(--you-border)}
.btn.primary{background:var(--accent-fill);border-color:var(--accent-fill);color:var(--on-accent);font-size:14px}
.btn.primary:hover:not(:disabled){color:var(--on-accent);background:color-mix(in srgb,var(--accent-fill) 88%,var(--remi-ink));border-color:transparent}
.btn:disabled{opacity:.55;cursor:progress}
.btn.big{min-height:52px;padding:0 22px}
.btn.small{min-height:32px;padding:0 12px;font-size:12.5px}

/* ---------- progress and errors ---------- */
.progress{margin-top:32px;border:1px solid var(--line);border-radius:var(--radius-md);padding:18px 20px;background:var(--surface);max-width:var(--measure)}
.ptop{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:14px;font-weight:500}
.pbar{height:6px;border-radius:var(--radius-pill);background:var(--line);margin:14px 0 12px;overflow:hidden}
.pbar i{display:block;height:100%;width:0;border-radius:inherit;background:var(--accent-fill);transition:width .25s ease-out}
.psteps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:6px 12px;font-size:12.5px;color:var(--dim)}
.psteps li::before{content:"○ "}
.psteps li.now{color:var(--text);font-weight:600}
.psteps li.now::before{content:"● ";color:var(--accent-fg)}
.psteps li.done{color:var(--muted)}
.psteps li.done::before{content:"✓ ";color:var(--in-fg)}
.notfound{margin-top:28px;max-width:var(--measure);border:1px solid var(--bad);background:var(--bad-soft);border-radius:var(--radius-md);padding:16px 18px;font-size:14px;line-height:1.6;color:var(--text)}

/* ---------- summary ---------- */
.summary{margin-top:48px}
.lede{color:var(--muted);font-size:var(--fs-lead);line-height:1.65;max-width:var(--measure);margin:0 0 24px}
.lede b{color:var(--text);font-weight:600}
.kpis{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;margin-bottom:20px}
.kpi{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-md);padding:16px 18px;min-width:0}
.kpi .k{font-size:12px;font-weight:500;letter-spacing:.01em;color:var(--dim)}
.kpi .v{font:700 30px/1.1 var(--font-sans);letter-spacing:-.03em;margin-top:8px;color:var(--text);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.kpi .v.small{font:600 16px/1.45 var(--font-mono);letter-spacing:0}
.kpi .s{font-size:12px;color:var(--muted);margin-top:6px}
.kpi.warn{border-color:var(--bad);background:var(--bad-soft)}
.kpi.warn .v{color:var(--bad-fg)}
.bar{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.status{font-size:12.5px;color:var(--muted);font-family:var(--font-mono)}
.status.ok{color:var(--in-fg)}
.status.err{color:var(--bad-fg)}
.cov{margin-top:16px;max-width:var(--measure);border:1px solid var(--warn);background:var(--warn-soft);border-radius:var(--radius-md);
  padding:12px 16px;font-size:13.5px;line-height:1.65;color:var(--muted)}
.cov b{color:var(--text);font-weight:600}
#banner{margin:16px 0 0;max-width:var(--measure);border:1px solid var(--warn);background:var(--warn-soft);border-radius:var(--radius-md);padding:12px 16px;font-size:13.5px;color:var(--text)}

/* ---------- blocks ---------- */
.block{margin-top:56px}
.blockhead{margin-bottom:20px;max-width:var(--measure)}
.blockhead h2{font-size:var(--fs-h6);font-weight:700;letter-spacing:var(--ls-snug);line-height:1.25;color:var(--text);margin:0 0 6px}
.blockhead p{margin:0;color:var(--muted);font-size:14px;line-height:1.65}

/* ---------- the flow ----------
   Wide screens: five columns, context on the outside, wires between.
   Middle widths: your own money on one row, context on a row below.
   Narrow: one column. Columns may shrink to nothing, so they never push the
   page wider than the screen. */
.flow{position:relative;display:grid;align-items:start;
  grid-template-columns:minmax(0,1fr) minmax(0,1.25fr) minmax(0,1.1fr) minmax(0,1.25fr) minmax(0,1fr);
  column-gap:clamp(48px,4.4vw,80px);row-gap:32px;padding:20px 16px 24px;border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--bg);
  --align-context:1}
/* the skip link focuses the flow; keep its own corners */
.flow:focus-visible{border-radius:var(--radius-lg);outline-offset:3px}
.wires{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0;overflow:visible}
.col{position:relative;z-index:1;min-width:0}
.colh{font:600 var(--fs-overline)/1.4 var(--font-sans);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--dim);margin:0 0 12px;padding-left:2px}
.colh.in{color:var(--in-fg)} .colh.out{color:var(--out-fg)} .colh.you{color:var(--accent-fg)}
.stack{display:flex;flex-direction:column;gap:10px}
.group{display:flex;flex-direction:column;gap:6px}
.grouph{font-size:12px;color:var(--muted);margin:0 2px}
.grouph b{color:var(--text);font-weight:600}
.empty,.more{font-size:12px;color:var(--dim);border:1px dashed var(--line);border-radius:var(--radius-sm);padding:10px 12px;line-height:1.55;background:var(--bg)}

.card{display:block;width:100%;min-width:0;text-align:left;color:inherit;font:inherit;cursor:pointer;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-md);padding:12px 14px;
  transition:border-color .15s,background-color .15s}
.card:hover{border-color:var(--you-border)}
.card.you{border:2px solid var(--you);background:var(--you-soft);padding:11px 13px}
.card.you:hover{border-color:var(--you)}
/* context cards sit back: no fill of their own, dashed like their wires */
.card.ctx{background:var(--bg);border-style:dashed;padding:8px 10px}
.card.ctx:hover{border-color:var(--remi-muted)}
.card.hl{border-color:var(--warn)!important;box-shadow:0 0 0 3px color-mix(in srgb,var(--warn) 30%,transparent)}

.name{font-weight:600;font-size:14px;line-height:1.3;color:var(--text);display:flex;flex-wrap:wrap;align-items:center;gap:6px;overflow-wrap:anywhere}
.card.ctx .name{font-size:12.5px;color:var(--muted);gap:4px 6px}
.card.ctx .chip{min-height:18px;padding:0 6px;font-size:10px}
.chips{display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px;margin-top:5px}
.chips:empty{display:none}
.chip{display:inline-flex;align-items:center;gap:5px;min-height:21px;padding:1px 8px;border-radius:var(--radius-xs);border:1px solid var(--line);
  background:var(--surface-2);color:var(--muted);font:600 10.5px/1.3 var(--font-sans);letter-spacing:.01em;white-space:nowrap}
.chip.src{border-style:dashed;background:var(--surface)}
.chip.bad{color:var(--bad-fg);border-color:var(--bad);background:var(--bad-soft)}
.chip.ent{color:var(--text);border-color:var(--remi-muted);background:var(--surface)}
.addr{font-family:var(--font-mono);font-size:11.5px;color:var(--muted);margin-top:4px;overflow-wrap:anywhere}
.card.ctx .addr{margin-top:2px}
.flowline{margin-top:8px;padding:7px 10px;border-radius:var(--radius-sm);background:var(--surface-2)}
.card.in .flowline{background:var(--in-soft)}
.card.out .flowline{background:var(--out-soft)}
.flowline .lbl{font:600 10.5px/1.4 var(--font-sans);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--dim)}
.amt{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-weight:600;font-size:14.5px;line-height:1.4;overflow-wrap:anywhere}
.amt.in{color:var(--in-fg)} .amt.out{color:var(--out-fg)}
.card.ctx .amt{font-size:12px;font-weight:500;color:var(--muted);line-height:1.35;margin-top:2px}
.card.ctx .meta{font-size:11.5px;line-height:1.35}
.meta{font-size:12px;color:var(--dim);margin-top:2px;line-height:1.45}
.meta b{color:var(--muted);font-weight:600}
.bal{font-family:var(--font-mono);font-size:11.5px;color:var(--muted);margin-top:7px;line-height:1.45;overflow-wrap:anywhere}
.note{font-size:11.5px;color:var(--muted);margin-top:7px;line-height:1.45;border-left:2px solid var(--line);padding-left:8px}
.note.memo{border-left-color:var(--warn);background:var(--warn-soft);padding:4px 8px;border-radius:0 var(--radius-xs) var(--radius-xs) 0}
.note b{color:var(--text)}
.youbal{font-family:var(--font-mono);font-size:22px;font-weight:600;margin-top:10px;line-height:1.3;font-variant-numeric:tabular-nums;color:var(--text)}
.youbal small{display:inline-block;font-size:12px;font-weight:500;color:var(--muted);margin-left:4px}
.yougrid{display:grid;grid-template-columns:1fr;gap:8px;margin-top:12px}
.yougrid>div{background:var(--surface);border:1px solid var(--you-border);border-radius:var(--radius-sm);padding:8px 10px;min-width:0}
.yougrid .k{font:600 10.5px/1.4 var(--font-sans);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--dim)}

.legend{display:flex;gap:8px 20px;flex-wrap:wrap;margin-top:12px;font-size:12.5px;color:var(--muted)}
.legend span{display:flex;gap:8px;align-items:center}
.sw{width:22px;height:3px;border-radius:var(--radius-pill);display:inline-block;flex:none}
.sw.in{background:var(--in)} .sw.out{background:var(--out)}
.sw.ctx{background:repeating-linear-gradient(90deg,var(--ctx) 0 5px,transparent 5px 9px)}

/* wires: colour only, never text */
.w{fill:none;stroke-linecap:round}
.w.in{stroke:var(--in)}
.w.out{stroke:var(--out)}
.w.ctx{stroke:var(--ctx);stroke-dasharray:4 5;opacity:.8}
.w.dim{opacity:.12}

/* ---------- threats ---------- */
.threat .blockhead h2{color:var(--bad-fg)}
.tgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(380px,100%),1fr));gap:12px}
/* a button centres its content when the grid stretches it; keep it at the top */
.tcard{display:flex;flex-direction:column;justify-content:flex-start;width:100%;min-width:0;text-align:left;color:inherit;font:inherit;cursor:pointer;
  background:var(--bad-soft);border:1px solid var(--bad);border-radius:var(--radius-md);padding:16px;transition:border-color .15s}
.tcard:hover{border-color:var(--bad-fg)}
.tcard .meta{color:var(--muted)}
.cmp{font-family:var(--font-mono);font-size:12.5px;line-height:1.9;margin:10px 0;background:var(--surface);border:1px solid var(--line-soft);
  border-radius:var(--radius-sm);padding:8px 10px;overflow-x:auto}
.cmp .row{display:flex;gap:10px;white-space:nowrap;letter-spacing:.02em}
.cmp .tag{width:44px;flex:none;color:var(--dim);font:600 10.5px/1.9 var(--font-sans);letter-spacing:var(--ls-label);text-transform:uppercase}
.cmp .m{color:var(--bad-fg);font-weight:700}
.cmp .mid{color:var(--dim)}
.tfacts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:10px}
.tfacts>div{border:1px solid var(--line);background:var(--surface);border-radius:var(--radius-sm);padding:8px 10px;min-width:0}
.tfacts .k{font:600 10.5px/1.4 var(--font-sans);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--dim)}
.tfacts .v{font-family:var(--font-mono);font-size:14px;font-weight:600;margin-top:2px;overflow-wrap:anywhere}
.tfacts .meta{color:var(--dim)}

/* ---------- memo ---------- */
.memo{border:1px solid var(--warn);border-radius:var(--radius-md);padding:20px 22px;background:var(--warn-soft)}
.memo .k{font:600 var(--fs-overline)/1.4 var(--font-sans);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--warn-fg)}
.memo .v{font-family:var(--font-mono);font-size:clamp(24px,4vw,34px);font-weight:600;margin:8px 0 4px;color:var(--text);overflow-wrap:anywhere}
.memo p{margin:8px 0 0;color:var(--muted);font-size:14px;line-height:1.7;max-width:var(--measure)}
.memo b{color:var(--text);font-weight:600}

/* ---------- timeline ---------- */
.timeline{list-style:none;margin:0 0 0 8px;padding:0;border-left:2px solid var(--line)}
.ev{position:relative;padding:0 0 18px 22px}
.ev::before{content:"";position:absolute;left:-7px;top:6px;width:12px;height:12px;border-radius:50%;background:var(--bg);border:2px solid var(--remi-muted)}
.ev.in::before{border-color:var(--in)} .ev.out::before{border-color:var(--out)}
.evh{display:flex;gap:4px 14px;align-items:baseline;flex-wrap:wrap}
.evt{font-family:var(--font-mono);font-size:12px;color:var(--dim);min-width:150px}
.evw{font-size:14px;color:var(--muted);min-width:0;overflow-wrap:anywhere}
.evw .who{font-weight:600;color:var(--text)}
.evw .amt{font-size:13.5px;margin-left:6px}
.evx{font-size:11.5px;color:var(--dim);margin-top:2px;font-family:var(--font-mono);overflow-wrap:anywhere}
.evx a{color:var(--dim);text-decoration:none}
.evx a:hover{color:var(--accent-fg)}
.poison{margin:8px 0 0;border:1px dashed var(--bad);background:var(--bad-soft);border-radius:var(--radius-sm);padding:8px 10px;font-size:12.5px;color:var(--muted);overflow-wrap:anywhere}
.poison b{color:var(--bad-fg);font-weight:600}
.poison .mono{font-family:var(--font-mono)}

/* ---------- table ---------- */
.tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius-md);background:var(--surface)}
.tbl{width:100%;border-collapse:collapse;font-size:13px;min-width:1080px}
.tbl th{text-align:left;font:700 10.5px/1.3 var(--font-sans);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--dim);padding:11px 16px;
  border-bottom:1px solid var(--line);background:var(--surface-2)}
.tbl td{padding:12px 16px;border-bottom:1px solid var(--line-soft);vertical-align:top;line-height:1.55;color:var(--muted)}
.tbl tbody tr:last-child td{border-bottom:none}
.tbl tbody tr{cursor:pointer;transition:background-color .15s}
.tbl tbody tr:hover{background:var(--remi-surface-3)}
.tbl tbody tr:focus-visible{outline-offset:-2px;border-radius:0}
.tbl .mono{font-family:var(--font-mono);font-size:11.5px;font-variant-numeric:tabular-nums}
.tbl td:first-child{white-space:nowrap}
.tbl .name{font-size:13px}
.tbl .amt{font-size:12px}
.rel{display:inline-block;font:600 10.5px/1.3 var(--font-sans);letter-spacing:var(--ls-label);text-transform:uppercase;border-radius:var(--radius-xs);
  padding:3px 8px;border:1px solid var(--line);background:var(--surface-2);color:var(--muted);white-space:nowrap}
.rel.in{color:var(--in-fg);border-color:var(--in);background:var(--in-soft)}
.rel.out{color:var(--out-fg);border-color:var(--out);background:var(--out-soft)}
.rel.bad{color:var(--bad-fg);border-color:var(--bad);background:var(--bad-soft)}
/* this account is a solid chip, so it never reads like the brick threat chip */
.rel.you{color:var(--on-accent);border-color:var(--accent-fill);background:var(--accent-fill)}

/* ---------- drawer ---------- */
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(480px,100%);z-index:50;background:var(--surface);border-left:1px solid var(--line);
  transform:translateX(102%);overflow:auto;padding:24px clamp(16px,4vw,24px) 40px;
  /* closed: hidden once it has slid away, so it is out of the Tab order and the accessibility tree */
  visibility:hidden;transition:transform .3s var(--ease-out),visibility 0s linear .3s}
.drawer.open{transform:none;visibility:visible;transition:transform .3s var(--ease-out),visibility 0s}
.scrim{position:fixed;inset:0;background:rgba(28,20,14,.46);z-index:40}
.dclose{position:absolute;top:14px;right:14px;width:36px;height:36px;border-radius:var(--radius-sm);border:1px solid var(--line);background:var(--surface);
  color:var(--muted);font-size:18px;line-height:1;cursor:pointer}
.dclose:hover{color:var(--accent-fg);border-color:var(--you-border)}
.drawer h2{font-size:1.35rem;font-weight:700;letter-spacing:var(--ls-snug);margin:6px 44px 10px 0;line-height:1.22;overflow-wrap:anywhere}
.drawer h3{font:600 var(--fs-overline)/1.4 var(--font-sans);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--dim);margin:24px 0 8px;
  display:flex;justify-content:space-between;gap:12px}
.drawer .full{font-family:var(--font-mono);font-size:12px;word-break:break-all;background:var(--surface-2);border:1px solid var(--line);
  border-radius:var(--radius-sm);padding:10px;display:flex;gap:10px;align-items:flex-start}
.drawer .full button{flex:none;font:600 11.5px var(--font-sans);background:var(--accent-fill);color:var(--on-accent);border:0;border-radius:var(--radius-xs);padding:5px 10px;cursor:pointer}
.kv{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.kv>div{border:1px solid var(--line);border-radius:var(--radius-sm);padding:8px 10px;min-width:0}
.kv .k{font:600 10.5px/1.4 var(--font-sans);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--dim)}
.kv .v{font-family:var(--font-mono);font-size:13px;font-weight:600;margin-top:2px;overflow-wrap:anywhere}
.kv .v.in{color:var(--in-fg)} .kv .v.out{color:var(--out-fg)}
.lst{display:flex;flex-direction:column}
.lst>div{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px solid var(--line-soft);font-size:13px;min-width:0}
.lst>div>span{min-width:0;overflow-wrap:anywhere}
.lst .mono{font-family:var(--font-mono);font-size:11.5px;color:var(--muted);text-align:right}
.hist .hrow{border-bottom:1px solid var(--line-soft);padding:9px 0;font-size:12.5px}
.hist .htop{display:flex;justify-content:space-between;gap:10px}
.hist .htime{font-family:var(--font-mono);color:var(--muted);font-size:11px}
.hist .hsig{font-family:var(--font-mono);font-size:11px;color:var(--dim);text-decoration:none}
.hist .hsig:hover{color:var(--accent-fg)}
.hist .hmv{margin-top:3px;font-family:var(--font-mono);font-size:12px;overflow-wrap:anywhere}
.hist .in{color:var(--in-fg)} .hist .out{color:var(--out-fg)} .hist .cp,.hist .nomove,.hist .hix{color:var(--dim)}
.hist .hix{font-size:11px}
.hist .hfee{font-size:11px;color:var(--dim);margin-top:2px}
.hist .failtag{font:600 10.5px var(--font-sans);color:var(--bad-fg);border:1px solid var(--bad);background:var(--bad-soft);border-radius:var(--radius-xs);padding:0 6px}
.histempty{color:var(--dim);font-size:12.5px;padding:8px 0}
.srcline{font-size:12px;color:var(--dim);margin-top:8px}
.srcline a{color:var(--muted)}

.foot{margin-top:64px;padding-top:20px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:8px 24px;flex-wrap:wrap;font-size:12px;color:var(--dim)}
.foot span{min-width:0}
.foot span:empty{display:none}

/* ---------- motion: one entrance, nothing else moves on its own ---------- */
@media (prefers-reduced-motion:no-preference){
  .flow .card{animation:rise .35s ease-out both}
  .w{stroke-dasharray:var(--len);stroke-dashoffset:var(--len);animation:draw .7s ease-out .15s forwards}
  .w.ctx{stroke-dasharray:4 5;stroke-dashoffset:0;animation:none}
}
@media (prefers-reduced-motion:reduce){
  .drawer,.drawer.open,.pbar i{transition:none}
}
@keyframes rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes draw{to{stroke-dashoffset:0}}

/* ---------- responsive ---------- */
@media (max-width:1279px){
  .kpis{grid-template-columns:repeat(3,minmax(0,1fr))}
  /* your own money in three columns; context sits under its own side and
     starts as soon as that side ends. flow.js marks the longer side, and only
     that side spans the middle row. Context has no gap to cross here, so it
     gets no wires. */
  .flow{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:48px;--align-context:0;
    grid-template-areas:"in you out" "in you beyond" "behind you beyond";grid-template-rows:auto auto 1fr}
  .flow[data-longer="out"]{grid-template-areas:"in you out" "behind you out" "behind you beyond"}
  .col[data-col="behind"]{grid-area:behind} .col[data-col="in"]{grid-area:in} .col[data-col="you"]{grid-area:you}
  .col[data-col="out"]{grid-area:out} .col[data-col="beyond"]{grid-area:beyond}
  .col[data-col="behind"],.col[data-col="beyond"]{border-top:1px dashed var(--line);padding-top:20px}
}
@media (max-width:759px){
  .flow,.flow[data-longer]{grid-template-columns:minmax(0,1fr);grid-template-areas:none;grid-template-rows:none;row-gap:24px;padding:16px 12px}
  .col[data-col]{grid-area:auto}
  .wires{display:none}
  /* on one column, your own relationships come before anyone else's business */
  .col[data-col="you"]{order:1} .col[data-col="in"]{order:2} .col[data-col="out"]{order:3}
  .col[data-col="behind"]{order:4} .col[data-col="beyond"]{order:5}
}
@media (max-width:639px){
  .page{padding-bottom:56px}
  .search{flex-direction:column} .search input{flex:none}
  .btn.big{width:100%}
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .kpi{padding:12px 14px}
  .kpi .v{font-size:24px}
  .kpi .v.small{font-size:13px}
  .tfacts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cmp{font-size:11.5px}
  .evt{min-width:0}
  .blockhead p{font-size:13.5px}
}