@charset "utf-8";
/* Ivy ROI — one stylesheet for every screen in the app.
 *
 * Three rules it exists to enforce, in CSS rather than in prose:
 *   figures are mono and words are Figtree, so a reader can tell a measurement
 *   from a claim at a glance;
 *   a disabled control carries its reason beside it, never a tooltip;
 *   nothing is a colour alone — every tone pairs with a word.
 *
 * Palette, ramp and spacing are the marketing site's. One product, one surface.
 */

:root {
  color-scheme: light;

  /* ---- paper and ink ---- */
  --paper:#FBFAF7; --ink:#17140F; --body:#5C564D; --mute:#6F675B;
  --rule:#E7E3DA;        /* decorative hairlines only */
  --edge:#948B7D;        /* control borders: 3.2:1 on paper */
  --tile:#FFFFFF;
  --track:#EFECE5;

  --blue:#1B4FC4;  --blue-bg:#E8F0FB;  --blue-bd:#CBDBF4;
  --green:#2F6B4F; --green-bg:#E9F2EB; --green-bd:#CFE0D6;
  --ochre:#7E5F17; --ochre-bg:#FBF3E0; --ochre-bd:#E8DCBD;
  --red:#8F3B3B;   --red-bg:#FAEDE9;   --red-bd:#EDD6CF;
  --flat:#5C564D;  --flat-bg:#F4F2ED;  --flat-bd:#E7E3DA;

  /* ---- ten steps, and nothing between them ---- */
  --label:12px; --fine:13px; --small:15px; --body-size:17px; --lead:19px;
  --title:23px; --h2:clamp(30px, 3.4vw, 40px);
  --n-lg:26px; --n-xl:clamp(28px, 4vw, 36px);

  /* ---- rhythm ---- */
  --pad-y:clamp(30px, 3.6vw, 44px);
  --pad-x:clamp(16px, 4vw, 38px);
  --stack:14px;
  --stack-lg:20px;
  --radius:12px;

  --sans:'Figtree', Helvetica, Arial, sans-serif;
  --head:'Outfit', Helvetica, Arial, sans-serif;
  --mono:'IBM Plex Mono', ui-monospace, Menlo, monospace;
}

* { box-sizing:border-box; }

html { -webkit-text-size-adjust:100%; scroll-padding-top:76px; }

body {
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:var(--body-size);
  line-height:1.6;
  overflow-wrap:break-word;
}

/* ------------------------------------------------------------ type roles ---- */

h1, h2, h3 { font-family:var(--head); letter-spacing:-0.025em; font-weight:600; margin:0; }
h1 { font-size:var(--h2); line-height:1.08; letter-spacing:-0.032em; text-wrap:balance; }
h2 { font-size:var(--title); line-height:1.2; }
h3 { font-size:var(--lead); line-height:1.25; }

/* Figures, and only figures. "ms", "min" and "of claim" sit outside it. */
.num { font-family:var(--mono); font-weight:500; font-variant-numeric:tabular-nums; }
.words { font-family:var(--sans); }
.mono { font-family:var(--mono); }

/* A link inside a sentence is underlined, because colour alone is not a
   signal (§10, rule 8, and the same rule the rest of this file follows). The
   exceptions below are the links that are not sentences: the masthead, a pill,
   a card title, and a standalone jump with an arrow on it. */
a { color:var(--blue); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; }
a:hover { color:#143a92; }
.mast nav a, .pill a, .drill, .go, .back, .agent h3 a, .barrow a, .jump {
  text-decoration:none;
}
.mast nav a:hover, .drill:hover, .go:hover, .back:hover,
.agent h3 a:hover, .barrow a:hover, .jump:hover { text-decoration:underline; }

button, input, select, textarea { font:inherit; color:inherit; }

::selection { background:#D8E3F8; }

.sr {
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ------------------------------------------------------------ landmarks ---- */

header.mast {
  position:sticky; top:0; z-index:30;
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; flex-wrap:wrap;
  padding:11px var(--pad-x);
  background:rgba(251,250,247,0.94);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--rule);
}
.mast .brandrow { display:flex; align-items:baseline; gap:14px; min-width:0; }
.mark { font-family:var(--head); font-weight:700; font-size:var(--lead); letter-spacing:-0.025em; white-space:nowrap; }
.mast .org { font-size:var(--fine); color:var(--mute); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mast nav { display:flex; align-items:center; gap:4px; flex-wrap:wrap; }
.mast nav a {
  display:inline-flex; align-items:center; min-height:44px; padding:0 10px;
  font-size:var(--small); font-weight:600; color:var(--ink);
}
.mast nav .who { font-weight:400; color:var(--mute); padding:0 6px; }
.mast .navtoggle { display:none; }

/* On a phone this chrome was 161px of an 812px screen, pinned to every scroll.
   One row now, with the account links behind a disclosure that opens under it.
   Wide, the toggle is gone and the nav is the row it has always been. */
@media (max-width: 700px) {
  header.mast { padding:6px 16px; gap:0; }
  .mast .brandrow {
    flex:1 1 auto; width:100%;
    align-items:center; justify-content:space-between;
  }
  .mast .navtoggle {
    display:inline-flex; align-items:center; justify-content:center; flex:none;
    min-height:44px; padding:0 12px; margin-left:12px;
    border:1px solid var(--edge); border-radius:9px; background:var(--tile);
    font-family:var(--sans); font-size:var(--fine); font-weight:600; color:var(--ink);
  }
  .mast nav { display:none; }
  .mast.open nav {
    display:flex; flex-direction:column; align-items:stretch; width:100%;
    gap:0; margin-top:5px; padding-top:3px; border-top:1px solid var(--rule);
  }
  .mast.open nav a { width:100%; padding:0; }
  .mast nav .who { padding:5px 0; }
}

main { display:block; max-width:1180px; margin:0 auto; padding:var(--pad-y) var(--pad-x) 72px; }
main.narrow { max-width:520px; }

footer.foot {
  max-width:1180px; margin:0 auto;
  padding:0 var(--pad-x) 56px;
  font-size:var(--small); color:var(--mute);
}

section { margin-top:clamp(34px, 4vw, 52px); }
/* Only where a section really is the first thing on the page. A section that
   follows a heading and a standing line still needs the air above it. */
main > section:first-child { margin-top:0; }

/* A section heading on a long page, with a hairline under it. Eleven of these
   carry the agent page, so they are a heading and not a label. */
h2.ruled { padding-bottom:10px; border-bottom:1px solid var(--rule); }
/* A row of pills beside a name. */
.head { display:flex; flex-wrap:wrap; align-items:center; gap:9px 14px; }

.lede { margin:var(--stack) 0 0; font-size:var(--lead); color:var(--body); max-width:62ch; text-wrap:pretty; }
.note { margin:10px 0 0; font-size:var(--small); color:var(--mute); text-wrap:pretty; }
.fine { margin:8px 0 0; font-size:var(--fine); color:var(--mute); text-wrap:pretty; }
.period { margin:0; font-size:var(--fine); color:var(--mute); }
.meta { font-size:var(--fine); color:var(--mute); }
.sub2 { display:block; font-size:var(--small); color:var(--mute); line-height:1.4; }
.lab {
  display:block; font-family:var(--sans); font-size:var(--label); font-weight:600;
  letter-spacing:0.05em; color:var(--mute); text-transform:uppercase;
}
.rline, .kind { font-family:var(--sans); font-weight:600; }

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

/* ----------------------------------------------------------------- pills ---- */

.pill {
  display:inline-flex; align-items:center; gap:5px;
  padding:4px 12px; border-radius:999px;
  font-family:var(--sans); font-size:var(--fine); font-weight:600; line-height:1.3;
  border:1px solid var(--flat-bd); background:var(--flat-bg); color:var(--flat);
  white-space:nowrap;
}
.pill.green { color:var(--green); background:var(--green-bg); border-color:var(--green-bd); }
.pill.ochre { color:var(--ochre); background:var(--ochre-bg); border-color:var(--ochre-bd); }
.pill.red   { color:var(--red);   background:var(--red-bg);   border-color:var(--red-bd); }
.pill.blue  { color:var(--blue);  background:var(--blue-bg);  border-color:var(--blue-bd); }
.pills { display:flex; flex-wrap:wrap; gap:6px; }

/* ----------------------------------------------------------------- cells ---- */

.cells {
  display:grid; gap:1px; background:var(--tile);
  border:1px solid var(--rule); border-radius:var(--radius); overflow:hidden;
  grid-template-columns:repeat(auto-fit, minmax(160px, 1fr));
}
.cells.four { grid-template-columns:repeat(auto-fit, minmax(170px, 1fr)); }
.cell { background:var(--tile); padding:14px 16px; min-width:0; box-shadow:0 0 0 1px var(--rule); }
.cell .v {
  display:block; margin-top:5px; font-size:var(--n-lg); line-height:1.15;
  letter-spacing:-0.01em; color:var(--ink);
}
.cell .v .words { font-family:var(--sans); font-size:var(--body-size); font-weight:500;
                  color:var(--body); letter-spacing:0; }
.cell .v .unit { font-family:var(--sans); font-size:var(--small); color:var(--mute); }
.cell .v.green .num { color:var(--green); }
.cell .v.ochre .num { color:var(--ochre); }
.cell .v.red .num   { color:var(--red); }
.cell .v.blue .num  { color:var(--blue); }
.cell .sub2 { margin-top:4px; }
.cell.alarm { box-shadow:inset 3px 0 0 var(--red); }

/* ------------------------------------------------------------------ bars ---- */

.bar { position:relative; height:9px; border-radius:999px; background:var(--track); overflow:hidden; }
.bar i { position:absolute; inset:0 auto 0 0; display:block; background:var(--ink); border-radius:999px; }
.bar i.blue { background:var(--blue); }
.bar i.quote { background:#fff; border:1px solid var(--blue); box-sizing:border-box; }
.bar b { position:absolute; top:-2px; bottom:-2px; width:2px; background:var(--ink); }
.barcap { margin:8px 0 0; font-size:var(--fine); color:var(--mute); text-wrap:pretty; }
.barrow { display:grid; grid-template-columns:minmax(96px, 150px) minmax(0,1fr) auto;
          gap:12px; align-items:center; padding:9px 0; }
.barrow .fignum { font-family:var(--mono); font-size:var(--small); white-space:nowrap; }
.prog { height:4px; border-radius:999px; background:var(--track); overflow:hidden; margin-top:8px; }
.prog i { display:block; height:100%; background:var(--blue); }

@media (prefers-reduced-motion: no-preference) {
  .bar i, .prog i { transition:width 0.45s cubic-bezier(0.2,0.7,0.2,1); }
}

/* --------------------------------------------------------------- controls ---- */

button { cursor:pointer; }

.ink, .ghost, .danger, .act {
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  min-height:44px; padding:11px 18px; border-radius:9px;
  font-family:var(--sans); font-size:var(--small); font-weight:600;
  border:1px solid var(--edge); background:var(--tile); color:var(--ink);
}
.ink { background:var(--ink); color:var(--paper); border-color:var(--ink); }
.ink:hover { background:#000; }
.ghost:hover, .act:hover { background:#F4F2ED; }
.blue-btn { background:var(--blue); color:#fff; border-color:var(--blue); }
.blue-btn:hover { background:#143a92; }
.danger { color:var(--red); border-color:#B98478; }
.danger:hover { background:var(--red-bg); }
button[disabled], .ink[disabled], .ghost[disabled] {
  opacity:1; cursor:not-allowed;
  color:var(--mute); background:var(--flat-bg); border-color:var(--rule);
}
/* A locked verb keeps its place in the tab order. `disabled` takes a button out
   of the tab walk and the reason beside it goes unheard, so the lock is said in
   aria and drawn here, and the handler refuses the work. */
button[aria-disabled="true"] {
  cursor:not-allowed; color:var(--mute); background:var(--flat-bg); border-color:var(--rule);
}
button[aria-disabled="true"]:hover { background:var(--flat-bg); color:var(--mute); }
.wide { width:100%; }

a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline:2px solid var(--blue); outline-offset:3px; border-radius:6px;
}

label { display:block; }
label .lab { margin-bottom:6px; }
input[type=text], input[type=email], input[type=password], input[type=number], input[type=search], select, textarea {
  width:100%; min-height:44px; padding:11px 13px;
  border:1px solid var(--edge); border-radius:9px; background:var(--tile);
  color:var(--ink);
}
textarea { min-height:88px; resize:vertical; line-height:1.5; }
select {
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%235C564D' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; padding-right:38px;
}
input:focus, select:focus, textarea:focus { border-color:var(--blue); }
fieldset { margin:0; padding:0; border:0; }
legend { padding:0; }

.field { margin-top:var(--stack); }
.row { display:flex; flex-wrap:wrap; gap:10px; align-items:flex-end; }
.row > label { flex:1 1 180px; min-width:0; }

/* The period, said once per screen, with the picker beside it. */
.periodrow { display:flex; flex-wrap:wrap; align-items:center; gap:12px 18px; margin-top:var(--stack); }

/* Period picker and sample picker: one segmented control, two uses. */
.seg { display:flex; flex-wrap:wrap; gap:6px; }
.seg button {
  min-height:44px; padding:10px 15px; border-radius:999px;
  border:1px solid var(--edge); background:var(--tile); color:var(--body);
  font-size:var(--small); font-weight:600;
}
.seg button:hover { background:#F4F2ED; }
.seg button[aria-pressed="true"] { background:var(--ink); border-color:var(--ink); color:var(--paper); }

/* The band ladder. Seven targets, each at least 44px. */
.ladder { display:flex; flex-wrap:wrap; gap:7px; margin-top:10px; }
.ladder button {
  display:inline-flex; flex-direction:column; align-items:flex-start; gap:1px;
  min-height:44px; padding:8px 14px; border-radius:9px; text-align:left;
  border:1px solid var(--edge); background:var(--tile); color:var(--ink);
  font-size:var(--small); font-weight:600;
}
.ladder button:hover { background:#F4F2ED; }
.ladder button[aria-pressed="true"] { background:var(--ink); border-color:var(--ink); color:var(--paper); }
.ladder button[disabled], .ladder button[aria-disabled="true"] {
  color:var(--mute); background:var(--flat-bg); border-color:var(--rule);
}
/* What the rung is worth, on the rung. The floor rule is invisible from a label
   alone, so the price it lands on sits under the words — and when a residual
   answer would cancel the claim, it says so before the click rather than after. */
.ladder .cap { font-family:var(--sans); font-size:var(--fine); font-weight:400; color:var(--mute); }
.ladder .cap .num { font-weight:500; }
.ladder .cap.warn { color:var(--red); font-weight:600; }
.ladder button[aria-pressed="true"] .cap { color:#D5CFC4; }
.ladder button[aria-pressed="true"] .cap.warn { color:#F2CFC8; }

/* ------------------------------------------------------------------ lock ---- */

.lockrow { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.lock {
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 11px; border-radius:999px;
  background:var(--flat-bg); border:1px solid var(--flat-bd);
  font-size:var(--fine); font-weight:600; color:var(--flat);
}
.lockwhy { font-size:var(--small); color:var(--mute); text-wrap:pretty; }

/* ---------------------------------------------------------- said and err ---- */

.said {
  margin:10px 0 0; font-size:var(--small); color:var(--green); text-wrap:pretty;
}
.said.cooled { color:var(--body); }
@media (prefers-reduced-motion: no-preference) { .said { transition:color 1.2s linear; } }

.err {
  margin:10px 0 0; padding:12px 14px; border-radius:9px;
  background:var(--red-bg); box-shadow:inset 3px 0 0 var(--red);
  color:#6B3131; font-size:var(--small); text-wrap:pretty;
}
.err:focus-visible { outline:2px solid var(--red); outline-offset:2px; }

/* --------------------------------------------------------------- panels ---- */

.panel {
  background:var(--tile); border:1px solid var(--rule); border-radius:var(--radius);
  padding:clamp(16px, 2.4vw, 22px);
}
.panel + .panel { margin-top:var(--stack); }
.panel.flat  { background:#F6F4EF; }
.panel.green { background:var(--tile); border-color:var(--rule); box-shadow:inset 3px 0 0 var(--green); }
.panel.ochre { background:var(--ochre-bg); border-color:var(--ochre-bd); }
.panel .lab + .pills, .panel .pills { margin-bottom:9px; }
/* A label-and-figure grid inside a panel: the same cells, without the second
   border a panel already draws. */
.cells.bare { background:none; border:0; border-radius:0; gap:15px 18px; }
.cells.bare .cell { padding:0; background:none; }
.cells.bare .cell .v { font-size:var(--lead); }
.ask {
  background:var(--tile); border:1px solid var(--rule); border-radius:var(--radius);
  padding:clamp(16px, 2.4vw, 22px); margin-top:var(--stack);
}
.ask.ochre { background:var(--ochre-bg); border-color:var(--ochre-bd); }

/* ----------------------------------------------------------------- table ---- */

table { width:100%; border-collapse:collapse; font-size:var(--small); }
caption { text-align:left; }
th {
  text-align:left; font-family:var(--sans); font-size:var(--label); font-weight:600;
  letter-spacing:0.05em; color:var(--mute); text-transform:uppercase; padding:8px 10px 8px 0;
  border-bottom:1px solid var(--rule); white-space:nowrap;
}
td { padding:10px 10px 10px 0; border-bottom:1px solid var(--rule); vertical-align:top; }
tr:last-child td { border-bottom:0; }
td.n, th.n { text-align:right; padding-right:0; }
td.n { font-family:var(--mono); font-variant-numeric:tabular-nums; }
.scroll { overflow-x:auto; -webkit-overflow-scrolling:touch; }
/* A clipped table holds its columns together and scrolls; wrapping nine columns
   into a block of text is how a row stops being a row. */
.scroll td { white-space:nowrap; }
.scroll td .sub2 { white-space:normal; }

/* ----------------------------------------------------------------- lists ---- */

.ledger { list-style:none; margin:var(--stack) 0 0; padding:0; }
.ledger li { padding:11px 0; border-bottom:1px solid var(--rule); }
.ledger li:last-child { border-bottom:0; }
.ledger .kind { color:var(--ink); }
.ledger .when { color:var(--mute); font-size:var(--fine); }

/* ----------------------------------------------------------------- dialog ---- */

dialog {
  width:min(470px, calc(100vw - 32px));
  padding:0; border:1px solid var(--rule); border-radius:14px;
  background:var(--tile); color:var(--ink);
  box-shadow:0 18px 46px rgba(23,20,15,0.22);
}
dialog::backdrop { background:rgba(23,20,15,0.42); }
dialog .dbody { padding:22px; }
dialog h2 { font-size:var(--title); }
dialog p { margin:10px 0 0; font-size:var(--small); color:var(--body); text-wrap:pretty; }
dialog .dacts { display:flex; flex-wrap:wrap; gap:10px; margin-top:18px; }
dialog .dacts button { flex:1 1 auto; }
/* What is about to be filed, inside the dialog that files it. Four figures,
   read before the verb is pressed rather than recalled from the page behind. */
dialog .cells { margin-top:var(--stack); }
dialog .cells .cell { padding:11px 13px; }
dialog .cells .cell .v { font-size:var(--lead); margin-top:3px; }
dialog .cells .cell .v .words { font-size:var(--small); }
dialog .fine { margin-top:12px; }

/* ------------------------------------------------------------------ keys ---- */

.keybox {
  background:var(--tile); border:1px solid var(--rule); border-radius:var(--radius);
  padding:clamp(16px, 2.4vw, 20px); box-shadow:inset 3px 0 0 var(--blue);
}
.keybox .key {
  display:block; margin-top:9px; padding:12px 14px;
  background:#F6F4EF; border:1px solid var(--rule); border-radius:9px;
  font-family:var(--mono); font-size:var(--small); word-break:break-all;
}
.keyrow { display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-top:12px; }
.keyrow .note { margin:0; }
.keybox .gone .num { color:var(--ink); }

.snip {
  margin-top:10px; padding:14px 16px; border-radius:var(--radius);
  background:var(--ink); color:#EDE8DF;
  font-family:var(--mono); font-size:var(--fine); line-height:1.8;
  white-space:pre; overflow-x:auto;
}
.snip .c { color:#9D968A; }

/* ------------------------------------------------------------------ dots ---- */

.dot { display:inline-block; width:9px; height:9px; border-radius:50%; background:var(--mute); flex:none; }
.dot.blue { background:var(--blue); }
.dot.green { background:var(--green); }
.dot.red { background:var(--red); }
@media (prefers-reduced-motion: no-preference) {
  .dot.pulse { animation:dotpulse 1.5s ease-in-out infinite; }
}
@keyframes dotpulse { 0%,100% { opacity:1; } 50% { opacity:0.3; } }
.dotline { display:flex; align-items:center; gap:10px; }

/* ----------------------------------------------------------------- cards ---- */

.agent {
  background:var(--tile); border:1px solid var(--rule); border-radius:var(--radius);
  padding:clamp(16px, 2.2vw, 22px); margin-top:var(--stack);
}
.agent.due { box-shadow:inset 3px 0 0 var(--red); }
.agent.killed { background:#F7F5F1; }
.agent .head { display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px; }
.agent h3 a { color:var(--ink); }
.agent h3 a:hover { color:var(--blue); }
.agent .metaline { margin:8px 0 0; font-size:var(--fine); color:var(--mute); }
.next {
  margin-top:var(--stack); padding:13px 15px; border-radius:10px;
  background:var(--blue-bg); border:1px solid var(--blue-bd);
  font-size:var(--small); color:#143a92; text-wrap:pretty;
}
.next .go { display:inline-flex; align-items:center; min-height:44px; font-weight:600; }
.next .ctl { margin-top:10px; }
.acts { margin-top:var(--stack); padding-top:var(--stack); border-top:1px solid var(--rule); }
.verbs { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:10px; margin-top:9px; }
.verb { display:flex; flex-direction:column; gap:5px; align-items:stretch; min-width:0; }
.verb > button { width:100%; }
.verb .why { font-size:var(--fine); color:var(--mute); line-height:1.4; }
@media (max-width: 620px) { .verbs { grid-template-columns:repeat(2, minmax(0, 1fr)); } }
/* The reason sits under the control it disables, and wraps rather than
   stretching the button out to the width of a sentence. */
.verb .lockrow { align-items:flex-start; }
.verb .lockrow .lock { margin-top:1px; }
.out:empty { display:none; }

/* A link that posts rather than navigates. It looks like a link because that is
   what it does; it is a button because that is what it is. */
.linky {
  display:inline-flex; align-items:center; min-height:44px; padding:0;
  border:0; background:none; color:var(--blue); font-family:var(--sans);
  font-size:inherit; font-weight:600;
  text-decoration:underline; text-underline-offset:3px;
}
.linky:hover { color:#143a92; }

.evidence { margin:var(--stack) 0 0; font-size:var(--small); color:var(--body); text-wrap:pretty; }

/* ================================================================ the shell ====
   A top bar, a rail, and the page. The rail carries the sections of the product,
   never the agents: a list of 150 names in a sidebar is a list nobody can use.
   The agents live in the table on the dashboard, which filters and pages. */

.topbar {
  position:sticky; top:0; z-index:40;
  display:flex; align-items:center; gap:16px;
  height:60px; padding:0 clamp(16px, 2.4vw, 24px);
  background:var(--tile); border-bottom:1px solid var(--rule);
}
.topbar .mark { display:flex; align-items:center; gap:9px; color:var(--ink); text-decoration:none; }
.topbar .mark svg { display:block; flex:none; }
.topbar .org { font-size:var(--fine); font-weight:600; color:var(--ink); white-space:nowrap;
               overflow:hidden; text-overflow:ellipsis; max-width:24ch; }
.topbar .find { margin-left:auto; display:flex; min-width:0; flex:0 1 340px; }
.topbar .find input {
  min-height:38px; padding:7px 12px; font-size:var(--fine);
  border-color:var(--rule); background:var(--paper);
}
.topbar .find input::placeholder { color:var(--mute); }
.topbar .who { font-size:var(--fine); color:var(--mute); white-space:nowrap; }
.topbar .out-link { font-size:var(--fine); font-weight:600; color:var(--ink); text-decoration:none;
                    display:inline-flex; align-items:center; min-height:44px; }
.topbar .out-link:hover { text-decoration:underline; }
.topbar .railtoggle { display:none; }

.frame { display:grid; grid-template-columns:220px minmax(0, 1fr); align-items:start; }
.rail {
  position:sticky; top:60px; height:calc(100vh - 60px); overflow:auto;
  display:flex; flex-direction:column; gap:2px;
  padding:18px 14px; border-right:1px solid var(--rule); background:#FCFBF8;
}
.rail .grp + .grp { margin-top:18px; }
.rail .lab { padding:0 10px 6px; }
.rail a {
  display:flex; align-items:center; gap:10px; min-height:40px; padding:0 10px;
  border-radius:8px; color:var(--body); font-size:var(--small); font-weight:500;
  text-decoration:none;
}
.rail a:hover { background:#F2F0E9; color:var(--ink); }
.rail a[aria-current="page"] { background:#EFEDE5; color:var(--ink); font-weight:600; }
.rail .mobile-only, .rail .find-m { display:none; }
.rail a .cnt {
  margin-left:auto; padding:0 7px; min-width:22px; text-align:center;
  font-family:var(--mono); font-size:var(--label); font-weight:500;
  color:var(--red); background:var(--red-bg); border:1px solid var(--red-bd); border-radius:999px;
}

.page { display:block; max-width:1100px; margin:0; min-width:0;
        padding:clamp(24px, 3.4vw, 40px) clamp(16px, 3.2vw, 40px) 80px; }

/* The page head: the title, one line under it, the period on the right. */
.phead { display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:14px 24px; }
.phead .sub { margin:10px 0 0; color:var(--mute); font-size:var(--small); max-width:70ch; text-wrap:pretty; }
.phead .seg button { min-height:40px; padding:8px 14px; font-size:var(--fine); }
.crumb { display:inline-flex; align-items:center; min-height:44px; font-size:var(--small);
         font-weight:600; text-decoration:none; }
.crumb:hover { text-decoration:underline; }

/* ------------------------------------------------------------------ cards ---- */

.card { background:var(--tile); border:1px solid var(--rule); border-radius:14px; margin-top:18px; min-width:0; }
.card > .chead { display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 14px; padding:16px 20px 0; }
.card > .chead h2 { font-size:var(--lead); letter-spacing:-0.02em; }
.card > .chead .fine { margin:0; flex:1 1 260px; }
.card > .chead .right { margin-left:auto; font-size:var(--fine); font-weight:600; }
.card .lead { margin:10px 20px 14px; font-size:var(--lead); line-height:1.5; max-width:72ch; text-wrap:pretty; }
.card .lead b { font-weight:600; }
.card .pad { padding:14px 20px 18px; }
.card .pad > .fine:first-child, .card .pad > .note:first-child, .card .pad > .ledger:first-child, .card .pad > .empty:first-child { margin-top:0; }
.card .chips { display:flex; flex-wrap:wrap; gap:6px; padding:0 20px 14px; }
.card.due { box-shadow:inset 3px 0 0 var(--red); }

/* The figure strip: label, figure, the delta pill, the "was" line. */
.strip { display:grid; grid-template-columns:repeat(auto-fit, minmax(190px, 1fr)); border-top:1px solid var(--rule); }
.strip .fig { padding:13px 20px 15px; border-left:1px solid var(--rule); min-width:0; }
.strip .fig:first-child { border-left:0; }
.strip .v { display:block; margin-top:5px; font-size:var(--n-lg); line-height:1.15; letter-spacing:-0.01em; }
.strip .v.words { font-family:var(--sans); font-size:var(--body-size); font-weight:500; color:var(--body); letter-spacing:0; line-height:1.35; }
.strip .v.green { color:var(--green); } .strip .v.red { color:var(--red); }
.strip .d { display:flex; flex-wrap:wrap; gap:6px; margin-top:7px; }
.strip .was { margin-top:6px; font-size:var(--fine); color:var(--mute); text-wrap:pretty; }
.pill.sm { padding:2px 9px; font-size:var(--label); }

/* A disclosure row instead of a tooltip: the split behind a figure, one click away. */
.disc {
  display:flex; align-items:center; gap:9px; width:100%; min-height:44px; padding:10px 20px;
  border:0; border-top:1px solid var(--rule); background:none; text-align:left;
  font-size:var(--fine); font-weight:600; color:var(--ink); border-radius:0 0 14px 14px;
}
.disc:hover { background:#FCFBF8; }
.disc .car { width:0; height:0; border:5px solid transparent; border-left-color:var(--mute); margin-right:1px; flex:none; }
.disc[aria-expanded="true"] { border-radius:0; }
.disc[aria-expanded="true"] .car { transform:rotate(90deg) translateX(2px); }
.disc + .body { display:none; padding:12px 20px 16px; border-top:1px solid var(--rule); font-size:var(--small); color:var(--body); text-wrap:pretty; }
.disc[aria-expanded="true"] + .body { display:block; }
@media (prefers-reduced-motion: no-preference) { .disc .car { transition:transform .15s; } }

/* The summary over the decide list. */
.summ { display:grid; grid-template-columns:repeat(auto-fit, minmax(190px, 1fr)); border-top:1px solid var(--rule); }
.summ > div { padding:13px 20px; border-left:1px solid var(--rule); min-width:0; }
.summ > div:first-child { border-left:0; }
.summ .v { display:block; margin-top:4px; font-size:var(--title); line-height:1.2; }
.summ .v.words { font-family:var(--sans); font-size:var(--body-size); font-weight:500; color:var(--body); }
.summ .fine { margin-top:4px; }
.seqbar { display:flex; height:6px; margin-top:9px; border-radius:3px; overflow:hidden; background:var(--track); max-width:180px; }
.seqbar i { display:block; background:var(--red); }

/* Tables inside a card run edge to edge, with the card's own padding on the ends. */
.card table { font-size:var(--small); }
.card th { padding:10px 12px; border-top:1px solid var(--rule); }
.card td { padding:12px 12px; }
.card th:first-child, .card td:first-child { padding-left:20px; }
.card th:last-child, .card td:last-child { padding-right:20px; }
.card td .sub2 { font-size:var(--fine); margin-top:2px; font-family:var(--sans); }
.card td.wrap { white-space:normal; min-width:220px; max-width:420px; }
tr.link { cursor:pointer; }
tr.link:hover td { background:#FCFBF8; }
tr.link td:first-child a { font-weight:600; color:var(--ink); text-decoration:none; }
tr.link td:first-child a:hover { text-decoration:underline; }
tr.due td:first-child { box-shadow:inset 3px 0 0 var(--red); }
tr.dead td { color:var(--mute); }
tr.dead td:first-child a { color:var(--body); }
td .up, td .down { color:var(--ink); }
.tacts { display:flex; flex-wrap:wrap; gap:6px; }
.tacts .ghost, .tacts .danger, .tacts .ink, .tacts .blue-btn { min-height:44px; padding:8px 14px; font-size:var(--fine); }
.card td.next-cell, .card td.claim-cell { white-space:normal; min-width:150px; max-width:200px; }
.duew { display:none; }

.cfoot { display:flex; flex-wrap:wrap; align-items:center; gap:8px 24px; padding:12px 20px; border-top:1px solid var(--rule); font-size:var(--fine); color:var(--mute); }
.cfoot b { color:var(--ink); font-weight:600; }
.cfoot .push { margin-left:auto; }
.cfoot button.ghost { min-height:40px; padding:6px 13px; font-size:var(--fine); }

/* The table's toolbar: a filter, the quick narrows, and the sort said in words. */
.toolbar { display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px; padding:14px 20px; border-top:1px solid var(--rule); }
.toolbar .q { flex:1 1 260px; min-width:0; }
.toolbar .q input { min-height:40px; padding:8px 12px; font-size:var(--fine); }
.toolbar .seg button, .toolbar select { min-height:40px; padding:7px 13px; font-size:var(--fine); }
.toolbar select { width:auto; padding-right:34px; }
.toolbar .seg button .num { font-size:var(--label); margin-left:4px; }
.pager { display:flex; align-items:center; gap:8px; }

/* What it is worth: one bar, four parts, cost beside it and never inside it. */
.vside { display:flex; flex-wrap:wrap; gap:16px 40px; margin-bottom:14px; }
.vside .v { display:block; margin-top:4px; font-size:var(--title); }
.vside .v.words { font-family:var(--sans); font-size:var(--body-size); font-weight:500; color:var(--body); }
.vside .was { font-size:var(--fine); color:var(--mute); margin-top:3px; max-width:34ch; }
.vbar { display:flex; height:30px; border-radius:7px; overflow:hidden; border:1px solid var(--rule); background:var(--tile); }
.vbar span { display:block; height:100%; }
.vbar .proven { background:var(--green); }
.vbar .short { background:repeating-linear-gradient(135deg, #CFE0D6 0 5px, #E9F2EB 5px 10px); }
.vbar .disproven { background:repeating-linear-gradient(135deg, #EDD6CF 0 5px, #FAEDE9 5px 10px); }
.vbar .untested { background:#F1EEE7; }
.vkey { display:flex; flex-wrap:wrap; gap:8px 20px; margin-top:10px; }
.vkey span { display:flex; align-items:center; gap:7px; font-size:var(--fine); color:var(--body); }
.vkey i { width:12px; height:12px; border-radius:3px; display:block; flex:none; border:1px solid var(--rule); }

/* Where the money goes. */
.brow { display:grid; grid-template-columns:minmax(110px, 200px) minmax(0, 1fr) 96px; gap:14px; align-items:center; padding:7px 0; font-size:var(--small); }
.brow a { color:var(--ink); text-decoration:none; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.brow a:hover { text-decoration:underline; }
.brow .fignum { text-align:right; font-size:var(--small); }
.brow.dead a { color:var(--mute); }
.brow.dead .bar i:first-child { background:var(--edge); }
.legend { display:flex; flex-wrap:wrap; gap:8px 18px; margin-top:12px; font-size:var(--fine); color:var(--mute); }
.legend i { display:inline-block; width:14px; height:8px; border-radius:3px; vertical-align:middle; margin-right:6px; background:var(--ink); }
.legend i.blue { background:var(--blue); } .legend i.quote { background:#fff; border:1px solid var(--blue); }
.legend i.dead { background:var(--edge); }

/* The next move, inside a card or on its own under the page head. */
.card > .next { margin:14px 20px 18px; }
.page > .next { margin-top:18px; }

.two { display:grid; grid-template-columns:1fr 1fr; border-top:1px solid var(--rule); }
.two > div { padding:14px 20px 18px; min-width:0; }
.two > div + div { border-left:1px solid var(--rule); }
.two ul { margin:8px 0 0; padding-left:18px; font-size:var(--small); color:var(--body); }
.two li + li { margin-top:5px; }


/* Jump links across one agent's page. A row of anchors, not tabs: nothing is hidden. */
.jumps { display:flex; flex-wrap:wrap; gap:4px 18px; margin-top:18px; padding-bottom:2px; border-bottom:1px solid var(--rule); }
.jumps a { display:inline-flex; align-items:center; min-height:40px; font-size:var(--fine); font-weight:600; color:var(--mute); text-decoration:none; border-bottom:2px solid transparent; margin-bottom:-3px; }
.jumps a:hover { color:var(--ink); border-color:var(--edge); }

/* The setup card on a brand-new org. */
.setup { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:14px 20px; align-items:center; padding:18px 20px; }
.setup h2 { font-size:var(--lead); }
.setup p { margin:4px 0 0; font-size:var(--small); color:var(--body); }
.card .snip { margin:0 20px 16px; }
.steps { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); border-top:1px solid var(--rule); }
.steps > div { padding:14px 20px 16px; border-left:1px solid var(--rule); font-size:var(--small); color:var(--body); }
.steps > div:first-child { border-left:0; }
.steps .st { display:flex; align-items:center; gap:8px; font-weight:600; color:var(--ink); margin-bottom:4px; }

.card form.addagent { padding:14px 20px 20px; max-width:680px; }
.skel { color:var(--mute); padding:16px 20px; font-size:var(--small); }

@media (max-width: 900px) {
  .frame { grid-template-columns:1fr; }
  .rail { display:none; position:static; height:auto; border-right:0; border-bottom:1px solid var(--rule); }
  .frame.open .rail { display:flex; position:fixed; top:60px; left:0; right:0; z-index:39;
                      max-height:calc(100vh - 60px); overflow:auto; box-shadow:0 12px 28px rgba(23,20,15,0.14); }
  .topbar .railtoggle {
    display:inline-flex; align-items:center; min-height:40px; padding:0 12px;
    border:1px solid var(--edge); border-radius:8px; background:var(--tile);
    font-size:var(--fine); font-weight:600;
  }
  .topbar .find, .topbar .who { display:none; }
  .topbar .org { max-width:14ch; }
  .strip, .summ { grid-template-columns:1fr 1fr; }
  .strip .fig:nth-child(odd), .summ > div:nth-child(odd) { border-left:0; }
  .strip .fig:nth-child(n+3), .summ > div:nth-child(n+3) { border-top:1px solid var(--rule); }
  .two { grid-template-columns:1fr; }
  .two > div + div { border-left:0; border-top:1px solid var(--rule); }
  .brow { grid-template-columns:minmax(0, 1fr) 96px; }
  .brow .bar { grid-column:1 / -1; grid-row:2; }
  .setup { grid-template-columns:1fr; }
  .steps > div { border-left:0; border-top:1px solid var(--rule); }
  .steps > div:first-child { border-top:0; }
  .card .lead { font-size:var(--body-size); }
}
/* A phone gets each owed row as a block: name, what is owed, the figure, the
   buttons on their own line. A table scrolled sideways hid the buttons. */
@media (max-width: 700px) {
  .stack thead { display:none; }
  .stack, .stack tbody, .stack tr, .stack td { display:block; width:auto; }
  .stack tr { padding:12px 16px 14px 20px; border-bottom:1px solid var(--rule); }
  .stack td, .card .stack td { padding:3px 0; border:0; white-space:normal; max-width:none; min-width:0; text-align:left; }
  .stack td.n { font-size:var(--small); }
  .stack td.n .sub2 { display:inline; margin-left:6px; }
  .stack td.who { color:var(--mute); font-size:var(--fine); }
  .stack td:last-child { padding-top:10px; }
  .card .stack td:first-child { padding-left:0; }
  tr.due.link td:first-child { box-shadow:none; }
  .stack tr.due { box-shadow:inset 3px 0 0 var(--red); }
  .duew { display:inline-flex; margin-top:4px; }
  .topbar .railtoggle { order:3; margin-left:auto; }
  .topbar .out-link { display:none; }
  .rail .mobile-only { display:flex; }
}
@media (max-width: 900px) {
  .rail .find-m { display:block; padding:4px 10px 10px; }
}
@media (max-width: 460px) {
  .strip, .summ { grid-template-columns:1fr; }
  .strip .fig, .summ > div { border-left:0; border-top:1px solid var(--rule); }
  .strip .fig:first-child, .summ > div:first-child { border-top:0; }
  .topbar { gap:10px; }
  .topbar .org { display:none; }
}

/* -------------------------------------------------------------- 375px ---- */

@media (max-width: 560px) {
  .cells, .cells.four { grid-template-columns:1fr 1fr; }
  .barrow { grid-template-columns:minmax(0,1fr) auto; }
  .barrow .bar { grid-column:1 / -1; }
  .verb, .verb .ghost, .verb .danger, .verb .ink, .verb .blue-btn { width:100%; }
  .verb .why { max-width:none; }
  .mast { padding:10px 16px; }
  .mast nav a { padding:0 8px; }
}
@media (max-width: 380px) {
  .cells, .cells.four { grid-template-columns:1fr; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation:none !important; transition:none !important; }
}

/* The skip link is the one .sr element that can take focus, and it shows when it does. */
a.sr:focus { position:fixed; top:8px; left:8px; z-index:100; width:auto; height:auto; clip:auto; margin:0;
             padding:10px 14px; background:var(--ink); color:var(--paper); border-radius:8px; white-space:normal; }

.ledgerline { display:flex; align-items:center; gap:8px; }

/* [hidden] means hidden, whatever display a component class gives the element. */
[hidden] { display:none !important; }

/* ------------------------------------------------------------ efficiency ---- */
/* Three bars per agent and no words: what it does, where the money goes in the same
   colours, and who starts it. The key sits once above the table. */
.tri { display:grid; gap:5px; width:min(200px, 100%); }
.tri .b { display:flex; height:8px; border-radius:3px; overflow:hidden; background:var(--track); }
.tri .b span { display:block; height:100%; }
.j0 { background:var(--ink); } .j1 { background:#3F68C9; } .j2 { background:#B0832F; } .j3 { background:#7A7265; }
.jnone { background:repeating-linear-gradient(135deg, #BDB6A8 0 3px, #EFECE5 3px 6px); box-shadow:inset 0 0 0 1px var(--edge); }
.wperson { background:var(--green); } .wschedule { background:#A88A4E; } .wsystem { background:#5F86D6; }
.wunknown { background:repeating-linear-gradient(45deg, #CFC8BA 0 2px, #F7F5F0 2px 5px); box-shadow:inset 0 0 0 1px var(--edge); }
.trikey { display:grid; grid-template-columns:auto 1fr; gap:6px 16px; padding:12px 20px; border-top:1px solid var(--rule); font-size:var(--fine); color:var(--mute); }
.trikey b { color:var(--ink); font-weight:600; }
.trikey .sw { display:flex; flex-wrap:wrap; gap:4px 16px; }
.tri .says { font-size:var(--label); color:var(--mute); line-height:1.35; margin-top:2px; }
.trikey i { display:inline-block; width:12px; height:8px; border-radius:2px; vertical-align:middle; margin-right:5px; }
.flag { font-size:var(--fine); color:var(--red); font-weight:500; }
.flag.none { color:var(--mute); font-weight:400; }

/* One agent's six tiles. */
.tiles { display:grid; grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)); border-top:1px solid var(--rule); }
.tile { padding:16px 20px 18px; border-left:1px solid var(--rule); border-top:1px solid var(--rule); margin:-1px 0 0 -1px; min-width:0; }
.tile h3 { margin:0; font-family:var(--head); font-size:var(--small); font-weight:600; letter-spacing:-0.005em; }
.tile .big { display:block; margin-top:6px; font-size:var(--n-lg); line-height:1.15; }
.tile .big.words { font-family:var(--sans); font-size:var(--body-size); font-weight:500; color:var(--body); line-height:1.35; }
.tile p { margin:8px 0 0; font-size:var(--small); color:var(--body); text-wrap:pretty; }
.tile ul { list-style:none; margin:10px 0 0; padding:0; font-size:var(--small); }
.tile li { display:flex; justify-content:space-between; gap:12px; padding:4px 0; border-bottom:1px solid var(--rule); }
.tile li:last-child { border-bottom:0; }
.tile li .num { white-space:nowrap; }
.tile .tb { margin-top:10px; }
.spark { display:flex; align-items:flex-end; gap:4px; height:40px; margin-top:10px; }
.spark span { flex:1; background:var(--green); border-radius:2px 2px 0 0; min-height:2px; }
.spark span.zero { background:var(--track); }
.sparkx { display:flex; justify-content:space-between; font-size:var(--label); color:var(--mute); margin-top:3px; }
.tstate { font-size:var(--label); font-weight:600; letter-spacing:.02em; color:var(--mute); margin-top:12px; }
.tstate.red { color:var(--red); }
@media (max-width: 700px) {
  .tri { width:100%; } .tiles { grid-template-columns:1fr; }
  .stack tr.link td:first-child a { display:inline-block; padding:10px 0 4px; }
  .chead .fine a { display:inline-block; padding:10px 0; }
  .stack td .unit { display:inline; }
}
.unit { display:none; color:var(--mute); font-family:var(--sans); font-size:var(--fine); margin-left:5px; }
.spark-none { margin-top:10px; font-size:var(--small); color:var(--body); }