/* app.css: tokens + shell + every shared component. Nothing visual is hardcoded in a view.
 * Gold is reserved: needs-you controls, irreversible actions, the active nav mark, the
 * brand (the CKS chip and Neural's N), and progress on your calls (the day ring). Status
 * is monochrome. Done is quiet. Nothing animates while idle.
 * The chat view's own rules live in chat.css; daylight.css (Matt's pick, 2026-11-04) loads
 * last and carries the shapes and signature pieces for both themes. The tokens are here.
 */

:root{ /* ONYX, the default: Daylight's dark counterpart (Matt picked Onyx 2026-10-28, Daylight 2026-11-04) */
  --bg:#0F0F11; --rail:#151517; --rail-line:#26262B;
  --surface:#1B1B1E; --surface-2:#26262B; --surface-3:#222226;
  --hover:rgba(255,255,255,.05); --active:#26262B;
  --line:#26262B; --line-2:#34343A; --card-line:#2A2A2F; --faint:#4A4A50;
  --seam-score:#2A2A2F; --seam-gleam:transparent;
  /* --dim raised from #6F6F6E: it failed AA at text sizes on a card */
  --ink:#F4F4F2; --body:#DDDDD9; --muted:#A3A3A0; --dim:#8F8F8D; --icon:#8F8F8D;
  /* signal: the only colours that carry meaning. --gold is for fills; text that
     wants gold uses --gold-text, which deepens on the light sheet for contrast. */
  --gold:#F5C842; --gold-ink:#141005; --gold-hover:#FFD659; --gold-soft:rgba(245,200,66,.14); --gold-text:#F5C842;
  --risk:#E06A5E; --ok:#8FA68E;
  --gold-rail:transparent; --risk-rail:transparent;
  /* structure */
  --overlay-1:rgba(255,255,255,.03); --overlay-2:rgba(255,255,255,.05); --overlay-3:rgba(255,255,255,.08);
  --grid:rgba(255,255,255,.022); --scrim:rgba(5,5,7,.6);
  /* no shadows on dark: a 1px lighter top edge lifts a card */
  --shadow:none; --shadow-pop:0 24px 60px -20px rgba(0,0,0,.8);
  --card-shadow:inset 0 1px 0 rgba(255,255,255,.045); --card-lift:inset 0 1px 0 rgba(255,255,255,.09);
  /* the ring's track, the mark's square and edge, the empty-state drawings */
  --ring-track:#3A3A41; --mark-bg:#0B0B0D; --mark-edge:#34343A; --art:#7A7A79; --seg-on:#3A3A41;
  --agent-mix:100%;
  /* type */
  --font-display:"Space Grotesk",-apple-system,BlinkMacSystemFont,sans-serif;
  --font-body:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --fs-body:14px;
  /* metrics */
  --radius:14px; --pill:999px; --btn-h:34px; --gutter:28px; --sidebar:260px; --topbar:60px;
  --row:12px;                /* vertical rhythm between regions */
  color-scheme:dark;
}
[data-theme="light"]{ /* Daylight: a white page, an off-white rail with a hairline, white cards */
  --bg:#FFFFFF; --rail:#FAFAF9; --rail-line:#ECECEA;
  --surface:#FFFFFF; --surface-2:#F2F2F0; --surface-3:#FAFAF9;
  --hover:#F5F5F3; --active:#EEEEEB;
  --line:#ECECEA; --line-2:#DDDDD9; --card-line:#E8E8E5; --faint:#C4C4BF;
  --seam-score:#ECECEA; --seam-gleam:transparent;
  /* four text greys, all AA on every surface above; dim only at 12px and up */
  --ink:#111111; --body:#2B2B2B; --muted:#5F5F5F; --dim:#6B6B6B; --icon:#6B6B6B;
  /* gold: fills take --gold-ink on top; --gold-text when gold is the text (AA on the soft chip) */
  --gold:#F0BF36; --gold-ink:#1A1503; --gold-hover:#F5C94B; --gold-soft:rgba(240,191,54,.2); --gold-text:#7D6218;
  --risk:#C2443A; --ok:#5E8A6A;
  --gold-rail:transparent; --risk-rail:transparent;
  --overlay-1:rgba(20,20,20,.03); --overlay-2:rgba(20,20,20,.05); --overlay-3:rgba(20,20,20,.08);
  --grid:rgba(20,20,20,.045); --scrim:rgba(20,20,20,.32);
  /* elevation: one card shadow, one lift for hover, one pop for floating things */
  --card-shadow:0 1px 2px rgba(0,0,0,.04), 0 8px 24px -12px rgba(0,0,0,.12);
  --card-lift:0 2px 3px rgba(0,0,0,.05), 0 12px 28px -12px rgba(0,0,0,.17);
  --shadow:var(--card-shadow);
  --shadow-pop:0 2px 6px rgba(0,0,0,.05), 0 24px 56px -20px rgba(0,0,0,.24);
  --ring-track:#E6E6E2; --mark-bg:#111111; --mark-edge:transparent; --art:#8E8E8A; --seg-on:#FFFFFF;
  --agent-mix:78%;           /* agent identity colours are pastel; deepen them on paper */
  color-scheme:light;
}

*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
html{background:var(--bg)}
body{
  margin:0; background:var(--bg); color:var(--body);
  font:400 var(--fs-body)/1.5 var(--font-body);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility;
  overflow:hidden;
}
h1,h2,h3,h4,p{margin:0}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
button,a{-webkit-tap-highlight-color:transparent}
a{color:inherit;text-decoration:none}
[hidden]{display:none !important}
::selection{background:var(--gold-soft)}
:focus-visible{outline:1px solid var(--muted);outline-offset:2px;border-radius:3px}

/* thin, unobtrusive scrollbars */
*::-webkit-scrollbar{width:8px;height:8px}
*::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:4px}
*::-webkit-scrollbar-track{background:transparent}

.ic{width:15px;height:15px;flex:none;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.mark{
  font:500 11px/1.1 var(--font-mono); letter-spacing:.14em; text-transform:uppercase;
  color:var(--dim); white-space:nowrap;
}
.dot{width:5px;height:5px;border-radius:50%;background:var(--dim);display:inline-block;margin-right:7px;vertical-align:middle}

/* ── shell ─────────────────────────────────────────────────────────────── */

/* The rail is one tone lighter than the sheet and carries no border: tone, not
 * a line, separates it. The topbar carries neither border nor texture. */
.app{display:grid;grid-template-columns:var(--sidebar) minmax(0,1fr);height:100vh;height:100dvh}

.sidebar{
  position:relative;display:flex;flex-direction:column;min-height:0;min-width:0;
  background:var(--rail);overflow-x:hidden;overflow-y:auto;scrollbar-width:none;
}
.sidebar::-webkit-scrollbar{display:none}
.sidebar__top{height:56px;flex:none;display:flex;align-items:center;justify-content:space-between;
  gap:8px;padding:0 12px 0 18px}
.sidebar__tools{display:flex;align-items:center;gap:2px;flex:none}

/* the lockup: CKS in gold on a soft gold block, then the product name */
.brand{display:inline-flex;align-items:center;gap:8px;min-width:0;white-space:nowrap;border-radius:4px}
.brand__cks{display:inline-block;padding:2px 6px;border-radius:3px;background:var(--gold-soft);
  color:var(--gold-text);font:700 11px/14px var(--font-display);letter-spacing:.1em}
.brand__name{font:600 17px/1 var(--font-display);letter-spacing:-.01em;color:var(--ink)}
.brand--mobile{display:none}

/* drafting-grid texture: the flexible spacer, only in the empty stretch, never behind text */
.sidebar__tex{
  flex:1;min-height:24px;opacity:.35;
  background-image:
    linear-gradient(to right,var(--overlay-1) 1px,transparent 1px),
    linear-gradient(to bottom,var(--overlay-1) 1px,transparent 1px);
  background-size:24px 24px;
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 40%,#000 60%,transparent);
          mask-image:linear-gradient(to bottom,transparent,#000 40%,#000 60%,transparent);
}

/* nav: the item's icon lines up with the CKS block above it (10px + 8px = 18px) */
.nav{display:flex;flex-direction:column;gap:2px;padding:6px 10px 0;flex:none}
.nav--more{padding-top:0}
.nav__item{
  position:relative;display:flex;align-items:center;gap:10px;width:100%;
  height:36px;padding:0 8px;border-radius:8px;text-align:left;white-space:nowrap;
  font:500 13.5px/18px var(--font-body);color:var(--muted);
}
.nav__item .ic{width:16px;height:16px;color:var(--dim)}
.nav__item:hover{color:var(--body);background:var(--overlay-1)}
.nav__item:hover .ic{color:var(--muted)}
.nav__item.is-active{color:var(--ink);background:var(--surface-2)}
.nav__item.is-active .ic{color:var(--ink)}
/* the active mark: 2px of gold flush with the rail's left edge */
.nav__item.is-active::before{
  content:"";position:absolute;left:-10px;top:50%;transform:translateY(-50%);
  width:2px;height:18px;border-radius:0 2px 2px 0;background:var(--gold);
}
.nav__label{min-width:0;overflow:hidden;text-overflow:ellipsis}
.nav__end{margin-left:auto;display:flex;align-items:center;gap:8px;flex:none}
.nav__key{display:none;font:400 10px/1 var(--font-mono);color:var(--dim)}
@media (hover:hover){ .nav__item:hover .nav__key{display:inline} }
.nav__count{min-width:18px;height:18px;padding:0 5px;border-radius:9px;
  background:var(--gold);color:var(--gold-ink);font:500 10.5px/18px var(--font-mono);text-align:center}
.nav__rule{height:1px;flex:none;margin:12px 18px;background:var(--line)}
.nav__item--two{height:auto;min-height:36px;padding:8px;align-items:flex-start}
.nav__item--two .ic{margin-top:1px}
.nav__stack{display:flex;flex-direction:column;min-width:0}
.nav__sub{font:400 12px/16px var(--font-body);color:var(--muted)}

/* account row: who this console belongs to, the theme switch, and (demo only)
 * the dataset chip tucked under the name */
.sidebar__foot{flex:none;height:56px;display:flex;align-items:center;gap:10px;
  padding:0 12px 0 18px;border-top:1px solid var(--line)}
.avatar{display:grid;place-items:center;flex:none;width:28px;height:28px;border-radius:50%;
  background:var(--surface-2);color:var(--ink);font:600 11px/1 var(--font-body);letter-spacing:.02em}
.who-wrap{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:3px}
.who{max-width:100%;font:500 13.5px/18px var(--font-body);color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.lenschip{display:inline-flex;flex:none;border:1px solid var(--line-2);border-radius:5px;overflow:hidden}
.lenschip__opt{height:18px;padding:0 6px;font:500 9.5px/18px var(--font-mono);letter-spacing:.1em;
  text-transform:uppercase;color:var(--dim)}
.lenschip__opt:hover{color:var(--body)}
.lenschip__opt.is-on{color:var(--ink);background:var(--surface-2)}

.pane{display:grid;grid-template-rows:var(--topbar) minmax(0,1fr);min-width:0;min-height:0;background:var(--bg)}
.topbar{display:flex;align-items:center;gap:12px;padding:0 12px 0 20px;min-width:0}
.conclusion{
  min-width:0;flex:1;font:500 15px/1.35 var(--font-body);color:var(--ink);
  letter-spacing:-.005em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.conclusion__sub{color:var(--muted);font-weight:400}
.conclusion--title{font:600 16px/1.2 var(--font-display);letter-spacing:-.01em}
.topbar__tools{display:flex;align-items:center;gap:8px;flex:none;min-width:0}
.search{
  display:flex;align-items:center;gap:7px;height:32px;padding:0 10px;min-width:0;
  border:1px solid var(--line);border-radius:8px;color:var(--dim);
}
.search:focus-within{border-color:var(--line-2);background:var(--surface)}
.search .ic{width:15px;height:15px}
.search input{
  width:150px;min-width:0;border:0;background:none;color:var(--body);font:400 13px/1 var(--font-body);outline:none;
}
.search input::placeholder{color:var(--dim)}
.topbar__sync{padding:0 4px;font:400 10.5px/1 var(--font-mono);letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);white-space:nowrap}
/* icon buttons: 32px, no border, no fill until hovered */
.iconbtn{display:grid;place-items:center;flex:none;width:32px;height:32px;border-radius:8px;color:var(--dim)}
.iconbtn .ic{width:18px;height:18px}
.iconbtn:hover{color:var(--body);background:var(--overlay-1)}
/* phone menu and the show-sidebar button exist in the topbar but stay out of the desktop layout */
.iconbtn.topbar__menu,.iconbtn.topbar__railshow{display:none}
/* the phone's needs-you pill (filled by ctx.setNeedsCount); hidden on desktop */
.needspill{display:none}

#view{overflow:auto;padding:15px var(--gutter) 12px;min-height:0;min-width:0}
#view.is-chat{padding:0}

/* ── section / empty ───────────────────────────────────────────────────── */

.section{display:flex;flex-direction:column;min-height:0}
.section__head{display:flex;align-items:center;gap:10px;padding-bottom:9px;min-height:22px}
.section__head .mark{color:var(--muted)}
.section__title{font:600 14px/1.2 var(--font-display);color:var(--ink)}
.section__right{margin-left:auto;display:flex;align-items:center;gap:10px}
.section__body{display:flex;flex-direction:column;gap:10px;min-height:0}
.section--dense .section__body{gap:0}

.empty{
  display:flex;flex-direction:column;align-items:flex-start;gap:8px;
  padding:26px 22px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
}
.empty__title{font:600 15px/1.3 var(--font-display);color:var(--ink)}
.empty__line{font:400 var(--fs-body)/1.5 var(--font-body);color:var(--muted);max-width:62ch}
.empty__hint{font:400 11px/1.4 var(--font-mono);letter-spacing:.04em;color:var(--dim)}

/* ── fragments: provenance, gate ───────────────────────────────────────── */

.prov{font:400 11px/1.2 var(--font-mono);letter-spacing:.03em;color:var(--muted);white-space:nowrap}
.prov__sep{color:var(--dim)}
.gate{display:inline-flex;align-items:center;gap:6px;font:400 11px/1.2 var(--font-mono);
  letter-spacing:.04em;color:var(--muted);white-space:nowrap}
.gate__mark{width:6px;height:6px;flex:none;background:var(--dim)}
.gate--gold .gate__mark{background:var(--gold)}
.gate--risk .gate__mark{background:var(--risk)}
.gate--ok   .gate__mark{background:var(--ok)}
.gate--dim  .gate__mark{background:var(--line-2)}
.gate--gold{color:var(--body)}

/* ── buttons ───────────────────────────────────────────────────────────── */

.btn{
  display:inline-flex;align-items:center;height:32px;padding:0 12px;border-radius:8px;
  font:600 12.5px/1 var(--font-body);letter-spacing:.005em;white-space:nowrap;
  transition:background .12s linear,border-color .12s linear,color .12s linear;
}
.btn--gold{background:var(--gold);color:var(--gold-ink)}
.btn--gold:hover{background:var(--gold-hover)}
.btn--gold.is-holding{background:var(--gold-hover)}
.btn--plain{background:var(--surface-2);border:1px solid var(--line-2);color:var(--body)}
.btn--plain:hover{border-color:var(--dim)}
.btn--ghost{border:1px solid var(--line-2);color:var(--muted);font-weight:500}
.btn--ghost:hover{color:var(--body);border-color:var(--dim)}
.btn--quiet{color:var(--dim);font-weight:500;padding:0 4px}
.btn--quiet:hover{color:var(--muted)}
.btn__tag{
  margin-left:9px;padding-left:9px;border-left:1px solid var(--shadow);
  font:500 9.5px/1 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;opacity:.6;
}
.btn.is-armed{background:var(--gold-hover)}
.hold{position:relative;display:inline-flex}
.hold__track{position:absolute;left:0;right:0;bottom:-4px;height:2px;background:var(--line-2);border-radius:1px;overflow:hidden}
.hold__fill{display:block;height:100%;background:var(--gold);transform:scaleX(0);transform-origin:left center}

/* ── the judgment seam ─────────────────────────────────────────────────── */

/* The seam is the product's signature, so it must be recognisable at a glance and
 * even in a thumbnail: never "text in a dark box". Three moves do that work:
 *   1. a 2px accent RAIL down the full left edge, carrying the item's state;
 *   2. a DOUBLE HAIRLINE between the halves: a dark score with a lighter line
 *      under it, so the eye reads one deliberate boundary, not a table border;
 *   3. a TONAL SHIFT: the prepared half is the machine's material, the "your
 *      call" half is a lighter one. Two materials, one seam.
 * The rail is muted on purpose: full gold belongs to the button, not the frame. */
.seam{
  position:relative;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  display:flex;flex-direction:column;overflow:hidden;
}
.seam::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:2px;z-index:2;
  background:var(--seam-rail,var(--line-2));
}
.seam--rail-gold{--seam-rail:var(--gold-rail)}
.seam--rail-risk{--seam-rail:var(--risk-rail)}
.seam--rail-neutral{--seam-rail:var(--line-2)}
.seam__prepared{padding:10px 15px 11px 17px;display:flex;flex-direction:column}
.seam__zonebar{display:flex;align-items:center;gap:12px;min-height:13px}
.seam__gate{margin-left:auto}
.seam__title{
  margin-top:7px;font:500 15px/1.3 var(--font-body);color:var(--ink);letter-spacing:-.005em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.seam__detail{
  margin-top:3px;font:400 var(--fs-body)/1.5 var(--font-body);color:var(--body);
  display:-webkit-box;-webkit-line-clamp:var(--seam-lines,2);-webkit-box-orient:vertical;overflow:hidden;
}
/* the manifest line: what exactly is being signed, in mono so it reads as a
 * record rather than as another sentence */
.seam__artifact{
  margin-top:7px;padding-left:10px;border-left:1px solid var(--line-2);
  font:400 11.5px/1.45 var(--font-mono);letter-spacing:.01em;color:var(--muted);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.seam__meta{display:flex;align-items:center;gap:10px;margin-top:8px;min-height:15px;overflow:hidden}
.seam__context{
  font:400 11px/1.2 var(--font-mono);letter-spacing:.03em;color:var(--dim);
  padding-left:10px;border-left:1px solid var(--line-2);white-space:nowrap;
}
.seam__evidence{
  margin-left:auto;display:inline-flex;align-items:center;gap:5px;flex:none;
  font:500 12px/1 var(--font-body);color:var(--muted);
}
.seam__evidence .ic{width:13px;height:13px;color:var(--dim)}
.seam__evidence:hover{color:var(--body)}
.seam__evidence:hover .ic{color:var(--muted)}

/* the seam itself: the machine's half is darker, your half is lit.
 * border-top is the score; the inset shadow is the lighter line beneath it. */
.seam__call{
  border-top:1px solid var(--seam-score);
  box-shadow:inset 0 1px 0 var(--seam-gleam);
  background:var(--surface-3);
  padding:10px 15px 10px 17px;display:flex;flex-direction:column;
}
.seam__callrow{display:flex;align-items:center;gap:14px}
.seam__callrow .mark{color:var(--dim)}
.seam__actions{display:flex;align-items:center;gap:9px;margin-left:auto;padding-bottom:3px}
.seam__owner{display:inline-flex;align-items:center;font:400 11px/1 var(--font-mono);
  letter-spacing:.04em;color:var(--muted);margin-left:3px}
.seam__next{margin-top:5px;font:400 11px/1.2 var(--font-mono);letter-spacing:.04em;color:var(--dim)}
/* Urgency no longer draws its own stripe: the rail already says it, and two
 * left-edge marks on one card read as a bug. */
.receipt.is-cursor,.chip.is-cursor,.slip__row.is-cursor{
  box-shadow:inset 2px 0 0 var(--muted);
}
/* The keyboard cursor brightens the rail rather than covering it, so a seam
 * never loses its state to being selected. */
.seam[data-nav].is-cursor{border-color:var(--line-2)}
.seam[data-nav].is-cursor::before{width:3px;filter:brightness(1.5)}
.seam:focus{outline:none}

/* ── receipt ───────────────────────────────────────────────────────────── */

.receipt{
  display:grid;grid-template-columns:minmax(0,auto) minmax(0,1fr) auto auto 14px;
  align-items:center;gap:12px;height:21px;padding:0 4px 0 2px;
}
.receipt__what{font:400 13px/1.4 var(--font-body);color:var(--body);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.receipt__ev{font:400 12px/1.4 var(--font-body);color:var(--dim);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* the authorization chain: an autonomous act that the person already approved
   says so here, so the footer's claim survives the ledger next to it */
.receipt__auth{font:400 10.5px/1.2 var(--font-mono);letter-spacing:.04em;color:var(--dim);
  white-space:nowrap;padding-left:11px;border-left:1px solid var(--line-2)}
.receipt__auth:empty{padding:0;border:0}
.receipt__meta{font:400 11px/1.2 var(--font-mono);letter-spacing:.03em;color:var(--muted);white-space:nowrap}
.receipt__chev{display:grid;place-items:center;color:var(--line-2)}
.receipt__chev .ic{width:13px;height:13px}
.receipt--act{grid-template-columns:minmax(0,auto) minmax(0,1fr) auto auto auto 14px}
.receipt__act{font:500 12px/1 var(--font-body);color:var(--dim);white-space:nowrap}
.receipt__act:hover{color:var(--body)}
.receipt__act.is-quiet{font:400 11px/1 var(--font-mono);letter-spacing:.04em;cursor:default}
.receipt.is-openable{cursor:pointer;border-radius:3px}
.receipt.is-openable:hover{background:var(--surface)}
.receipt.is-openable:hover .receipt__chev{color:var(--dim)}

/* ── agent chip ────────────────────────────────────────────────────────── */

.chip{display:flex;gap:9px;align-items:flex-start;padding:5px 4px 5px 2px;border-radius:3px}
.chip:hover{background:var(--surface)}
.chip__dot{--agent-ink:color-mix(in oklab,var(--agent) var(--agent-mix),var(--ink));width:6px;height:6px;border-radius:50%;background:var(--agent-ink,var(--agent,var(--dim)));flex:none;margin-top:5px;opacity:.95}
.chip__body{min-width:0}
.chip__name{font:500 13px/1.3 var(--font-body);color:var(--body);display:flex;align-items:baseline;gap:8px}
.chip__busy{font:400 10px/1 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.chip__act{font:400 12px/1.35 var(--font-body);color:var(--dim);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ── overnight ledger strip ────────────────────────────────────────────── */

.strip{display:flex;flex-direction:column}
.strip__head{display:flex;align-items:baseline;gap:16px}
.strip__narrative{font:400 var(--fs-body)/1.4 var(--font-body);color:var(--body);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.strip__toggle{margin-left:auto;display:inline-flex;align-items:center;gap:7px;color:var(--dim);flex:none}
.strip__toggle:hover{color:var(--muted)}
.strip__toggle .ic{width:13px;height:13px;transition:transform .14s ease}
.strip__band{position:relative;height:26px;margin-top:11px;border-bottom:1px solid var(--line-2)}
.strip__ticks{position:absolute;inset:0}
.tick{--agent-ink:color-mix(in oklab,var(--agent) var(--agent-mix),var(--ink));
  position:absolute;bottom:0;width:2px;height:var(--h,11px);
  background:var(--agent,var(--dim));opacity:.85;border-radius:1px;transform:translateX(-1px);
}
.tick:hover,.tick:focus-visible{opacity:1;outline:none;box-shadow:0 0 0 3px var(--overlay-2)}
.strip__tip{
  position:absolute;bottom:32px;transform:translateX(-50%);max-width:290px;
  padding:7px 10px;background:var(--surface-2);border:1px solid var(--line-2);border-radius:4px;
  font:400 11px/1.45 var(--font-mono);color:var(--body);white-space:pre-line;
  opacity:0;pointer-events:none;z-index:5;
}
.strip__tip.is-on{opacity:1}
.strip__axis{position:relative;height:13px;margin-top:6px}
.strip__hour{position:absolute;top:0;transform:translateX(-50%);
  font:400 10.5px/1.2 var(--font-mono);letter-spacing:.06em;color:var(--dim)}
.strip__hour--now{right:0;left:auto;transform:none;color:var(--muted)}
.strip__legend{display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;margin-top:8px}
.legend__agent{display:inline-flex;align-items:center;gap:7px;font:400 12px/1.2 var(--font-body);color:var(--muted);white-space:nowrap}
.legend__agent .chip__dot{margin-top:0}
.legend__n{font:400 10.5px/1 var(--font-mono);letter-spacing:.04em;color:var(--dim)}
.legend__idle{font:400 10.5px/1 var(--font-mono);letter-spacing:.06em;color:var(--dim)}
.strip.is-collapsed .strip__band,.strip.is-collapsed .strip__axis,.strip.is-collapsed .strip__legend{display:none}
.strip.is-collapsed .strip__toggle .ic{transform:rotate(-90deg)}

/* ── lane (Ops lifecycle) ──────────────────────────────────────────────── */

.lane{display:flex;flex-direction:column;gap:10px}
.lane__row{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:1px;background:var(--line)}
.lane__cell{
  display:flex;flex-direction:column;align-items:flex-start;gap:3px;
  padding:11px 13px 10px;background:var(--surface);text-align:left;
}
.lane__cell:hover{background:var(--surface-2)}
.lane__count{font:500 21px/1 var(--font-display);color:var(--ink);letter-spacing:-.02em}
.lane__label{font:400 11px/1.1 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.lane__owner{font:400 11px/1.2 var(--font-body);color:var(--dim);min-height:13px}
.lane__cell.is-gate{box-shadow:inset 0 1px 0 var(--gold)}
.lane__cell.is-gate .lane__owner{color:var(--muted)}
.lane__blocked{display:flex;align-items:center;gap:9px;font:400 13px/1.4 var(--font-body);color:var(--body)}
.lane__blocked .gate__mark{background:var(--risk)}

/* the glance-height lane: same component, one line per stage. This is what
   makes an Ops screen read as an operation in the first second. */
.lane--slim .lane__cell{flex-direction:row;align-items:baseline;gap:7px;padding:5px 9px 6px;
  min-height:0;min-width:0;overflow:hidden}
.lane--slim .lane__count{flex:none;font:500 14px/1 var(--font-display);letter-spacing:-.01em}
.lane--slim .lane__label{min-width:0;font-size:10px;letter-spacing:.07em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lane--slim .lane__cell.is-gate .lane__label{color:var(--body)}

/* ── slide-over / scrim / toast ────────────────────────────────────────── */

.scrim{position:fixed;inset:0;background:var(--scrim);opacity:0;pointer-events:none;
  transition:opacity .16s linear;z-index:40}
.scrim.is-on{opacity:1;pointer-events:auto}
.slideover{
  position:fixed;top:0;right:0;bottom:0;width:480px;max-width:92vw;z-index:41;
  background:var(--surface);border-left:1px solid var(--line-2);
  transform:translateX(100%);transition:transform .18s cubic-bezier(.2,.7,.3,1);
  display:flex;flex-direction:column;
}
.slideover.is-on{transform:translateX(0);box-shadow:var(--shadow-pop)}
.slideover__head{display:flex;align-items:center;gap:12px;min-height:56px;padding:12px 12px 12px 20px;border-bottom:1px solid var(--line)}
.slideover__body{padding:16px 20px 22px;overflow:auto}
.slideover__body h4{font:600 15px/1.3 var(--font-display);color:var(--ink);margin-bottom:8px}
.slideover__body p{font:400 13.5px/1.55 var(--font-body);color:var(--body);margin-bottom:10px}
.slideover__body .mark{display:block;margin:16px 0 7px}
.slideover__head .mark{color:var(--muted)} /* the panel's title: 11px on --dim sat at 3.4:1 */
.toast{
  position:fixed;right:20px;bottom:20px;z-index:70;
  padding:10px 14px;background:var(--surface-2);border:1px solid var(--line-2);border-radius:8px;
  box-shadow:var(--shadow-pop);
  font:500 13px/1.3 var(--font-body);color:var(--body);
  opacity:0;transform:translateY(6px);transition:opacity .14s linear,transform .14s linear;
  pointer-events:none;max-width:360px;
}
.toast.is-on{opacity:1;transform:translateY(0)}
.toast.is-on .toast__act{pointer-events:auto} /* the text never blocks a tap underneath; only Undo is live */
.toast__act{
  margin-left:14px;padding:4px 8px;border-radius:5px;border:1px solid var(--line-2);
  font:600 12px/1 var(--font-body);color:var(--ink);background:transparent;cursor:pointer;
}
.toast__act:hover{border-color:var(--dim)}

/* ── popover (ui.popover): the "More" menu on a card ───────────────────── */
.btn--more .btn__chev{width:13px;height:13px;margin-left:5px;opacity:.7}
.btn--sm{height:28px;padding:0 10px;font-size:12px}
.pop{
  position:fixed;z-index:60;padding:10px 6px 8px;overflow-y:auto;
  background:var(--surface);border:1px solid var(--line-2);border-radius:10px;
  box-shadow:var(--shadow-pop);
}
.pop .mark{display:block;padding:2px 10px 4px}
.pop__sub{
  margin:0 0 4px;padding:0 10px;font:400 11.5px/1.4 var(--font-mono);letter-spacing:.02em;color:var(--muted);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.pop__item{
  display:flex;align-items:center;gap:10px;width:100%;min-height:32px;padding:0 10px;border-radius:6px;
  font:500 13px/1.2 var(--font-body);color:var(--body);text-align:left;
}
.pop__item:hover,.pop__item:focus-visible{background:var(--overlay-2);color:var(--ink);outline:none}
.pop__item.is-on{color:var(--ink)}
.pop__item--quiet{color:var(--muted)}
.pop__item[disabled]{color:var(--dim);pointer-events:none}
.pop__label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pop__check{width:14px;height:14px;color:var(--gold-text)}
.pop__foot{margin:3px 0 2px;padding:0 10px;font:400 11px/1.3 var(--font-mono);letter-spacing:.03em;color:var(--dim)}
.pop__sep{height:1px;margin:7px 4px;background:var(--line)}
.pop__confirm{margin:2px 4px 6px;padding:8px 10px;border:1px solid var(--line-2);border-radius:7px;background:var(--surface-2)}
.pop__confirm-text{margin:0 0 8px;font:400 12.5px/1.45 var(--font-body);color:var(--body)}
.pop__confirm-row{display:flex;align-items:center;gap:8px;padding:0 4px}
.pop__chips{display:flex;flex-wrap:wrap;gap:6px;padding:2px 10px 4px}
.pop__chip{
  height:28px;padding:0 10px;border:1px solid var(--line-2);border-radius:14px;
  font:500 12px/1 var(--font-body);color:var(--body);
}
.pop__chip:hover,.pop__chip:focus-visible{border-color:var(--dim);color:var(--ink);outline:none}
.pop__date{
  flex:1;min-width:0;height:28px;padding:0 8px;border:1px solid var(--line-2);border-radius:6px;
  background:var(--surface);color:var(--ink);font:400 12.5px/1 var(--font-body);color-scheme:inherit;
}
.pop__note{
  display:block;width:calc(100% - 8px);margin:2px 4px 8px;padding:8px 10px;resize:vertical;
  border:1px solid var(--line-2);border-radius:7px;background:var(--surface);color:var(--ink);
  font:400 13px/1.45 var(--font-body);
}
.pop__note:focus{outline:none;border-color:var(--dim)}
.slip__done.is-quiet{font:400 11px/1 var(--font-mono);letter-spacing:.04em;cursor:default}
@media (max-width:820px){
  .pop__item,.pop__chip,.btn--sm{min-height:44px}
  .pop__chip{height:auto;padding:0 14px}
}

/* ── Today ─────────────────────────────────────────────────────────────── */

/* Today flows top to bottom and the view scrolls as one page, so nothing is
 * clipped inside a fixed row and a short day leaves no dead band in the middle. */
.today{display:flex;flex-direction:column;gap:18px;min-width:0}
.today > *{min-width:0}
.today--lane{gap:12px}
.today__split{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:26px;align-items:start}
.today__main{min-width:0}
.today__rail{display:flex;flex-direction:column;gap:16px;min-width:0}
.today__rail > .section + .section{padding-top:14px;border-top:1px solid var(--line)}
.today .moved{padding-top:14px;border-top:1px solid var(--line)}
/* Today's seams are the one-line variant, so they carry the padding of a
 * two-line card for nothing. Row 3 ("What moved") is auto-height and grows with
 * the dataset, 5 receipts in One against 4 in Ops, which is exactly the 12px
 * that pushed the third seam out of the middle row. Trimming 5px of dead padding
 * per seam and 2px off the stack gap makes three seams fit on either dataset. */
.today .seam{--seam-lines:1}
.today .seam__prepared{padding-top:9px;padding-bottom:9px}
.today .seam__call{padding-top:8px;padding-bottom:9px}
.today__main .section__body{gap:8px}

.slip__row{display:grid;grid-template-columns:7px minmax(0,1fr) auto;align-items:center;
  gap:10px;padding:6px 2px}
.slip__body{min-width:0}
/* Risk marks a promise that is LATE, never one that is merely due today : 
   otherwise "open" and "slipped" look identical and the colour stops meaning
   anything. The row's own meta line still says which it is. */
.slip__mark{width:6px;height:6px;background:var(--line-2);align-self:center}
.slip__row.is-late .slip__mark{background:var(--risk)}
.slip__what{display:block;font:400 13.5px/1.4 var(--font-body);color:var(--body);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.slip__meta{display:block;font:400 11px/1.3 var(--font-mono);letter-spacing:.03em;color:var(--dim);margin-top:2px}
.slip__acts{display:flex;align-items:center;gap:10px;align-self:center;flex:none}
.slip__done{font:500 12px/1 var(--font-body);color:var(--dim);align-self:center;flex:none}
.slip__done:hover{color:var(--body)}
.slip__row.is-settled .slip__what{color:var(--dim);text-decoration:line-through;text-decoration-color:var(--line-2)}

.moved .section__body{gap:0}
.moved__more{font:500 12px/1 var(--font-body);color:var(--dim)}
.moved__more:hover{color:var(--muted)}

/* ── generic view scaffolding (stubs + later views) ────────────────────── */

.view{display:flex;flex-direction:column;gap:16px;min-height:0}
.view__stack{display:flex;flex-direction:column;gap:14px}

/* ── motion ────────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{transition-duration:0s !important;animation-duration:0s !important}
  .slideover,.sidebar{transition:none}
}

/* ── Brief (views/brief.js) ────────────────────────────────────────────── */

.brief{display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:9px;height:100%}
.brief__head{display:flex;flex-direction:column;gap:5px}
.brief__datenav{display:flex;align-items:center;gap:10px}
.brief__step{display:grid;place-items:center;width:24px;height:24px;border-radius:3px;color:var(--dim)}
.brief__step:hover{color:var(--body);background:var(--overlay-2)}
.brief__step--prev .ic{transform:rotate(180deg)}
.brief__step[disabled]{color:var(--line-2);pointer-events:none}
.brief__dateblock{display:flex;align-items:baseline;gap:9px}
.brief__date{font:600 16px/1.2 var(--font-display);color:var(--ink);letter-spacing:-.01em}
.brief__datemono{font:400 11px/1.2 var(--font-mono);letter-spacing:.06em;color:var(--dim)}
.brief__filter{flex:none}
.brief__count{margin-left:auto;font:400 11px/1.2 var(--font-mono);letter-spacing:.06em;color:var(--dim)}
.brief__summary{
  font:400 var(--fs-body)/1.55 var(--font-body);color:var(--body);max-width:104ch;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.brief__split{display:grid;grid-template-columns:minmax(0,1.62fr) minmax(0,1fr);gap:22px;min-height:0}
.brief__main{display:flex;flex-direction:column;gap:12px;min-height:0;overflow-y:auto;overflow-x:hidden;padding-right:2px}
.brief__rail{display:flex;flex-direction:column;gap:14px;min-height:0;overflow-y:auto;overflow-x:hidden}
.brief__main>*,.brief__rail>*{flex:none}
.brief__secright{display:flex;align-items:center;gap:12px}
.brief__num{color:var(--dim)}
.brief .seam{--seam-lines:1}
.brief .seam__prepared{padding:9px 15px 10px 17px}
.brief .seam__call{padding:8px 15px 9px 17px}
.brief .seam__title{margin-top:5px}
.brief .seam__meta{margin-top:6px;min-height:13px}
/* urgency rides the seam rail now (ui.js derives it from the gate) */

/* the drafted reply, quoted inside the seam: a rule, not a second card */
.brief__draft{margin-top:9px;padding-left:12px;border-left:1px solid var(--line-2)}
.brief__draft-head{display:flex;align-items:baseline;gap:10px;min-width:0}
.brief__draft-addr{font:400 11px/1.3 var(--font-mono);letter-spacing:.03em;color:var(--dim);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.brief__draft-subj{margin-top:4px;font:500 13px/1.35 var(--font-body);color:var(--body);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.brief__draft-body{margin-top:3px;font:400 13px/1.55 var(--font-body);color:var(--muted);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

/* dated obligation row: Deadlines, Reminders */
.brief__ob{display:grid;grid-template-columns:6px minmax(0,1fr) auto;align-items:center;gap:10px;padding:6px 2px}
.brief__ob-mark{width:6px;height:6px;background:var(--line-2)}
.brief__ob.is-late .brief__ob-mark{background:var(--risk)}
.brief__ob-body{min-width:0;cursor:pointer}
.brief__ob-what{display:block;font:400 13.5px/1.4 var(--font-body);color:var(--body);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.brief__ob-meta{display:block;margin-top:2px;font:400 11px/1.3 var(--font-mono);letter-spacing:.03em;color:var(--dim);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.brief__ob-act{font:500 12px/1 var(--font-body);color:var(--dim);flex:none}
.brief__ob-act:hover{color:var(--body)}
.brief__ob-act.is-quiet{font:400 11px/1 var(--font-mono);letter-spacing:.04em;cursor:default}
.brief__ob-acts{display:flex;align-items:center;gap:10px;flex:none}
.brief__ob.is-settled .brief__ob-what{color:var(--dim)}

/* triage rules drawer */
.brief__drawer{border-top:1px solid var(--line);padding-top:7px}
.brief__drawer-toggle{display:flex;align-items:center;gap:11px;width:100%;color:var(--dim)}
.brief__drawer-toggle:hover{color:var(--muted)}
.brief__drawer-toggle .ic{width:13px;height:13px;margin-left:auto;transform:rotate(-90deg);transition:transform .14s ease}
.brief__drawer.is-open .brief__drawer-toggle .ic{transform:rotate(0)}
.brief__drawer-hint{font:400 12px/1.3 var(--font-body);color:var(--dim);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.brief__drawer-body{display:none;flex-direction:column;gap:3px;padding:10px 0 2px}
.brief__drawer.is-open .brief__drawer-body{display:flex}
.brief__rule{display:grid;grid-template-columns:minmax(0,22ch) 12px minmax(0,14ch) minmax(0,1fr);
  align-items:baseline;gap:9px;font:400 11.5px/1.5 var(--font-mono);letter-spacing:.02em}
.brief__rule-pat{color:var(--body);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.brief__rule-arrow{color:var(--line-2)}
.brief__rule-act{color:var(--muted)}
.brief__rule-note{color:var(--dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ── Work (views/work.js) ──────────────────────────────────────────────── */

.work{display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:var(--row);height:100%}
.work--quiet{grid-template-rows:auto auto minmax(0,1fr)}
.work__split{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:22px;min-height:0}
.work__rail{display:flex;flex-direction:column;gap:15px;min-height:0}
.work__lane .section__head .mark,
.work__queue .section__head .mark ~ .mark{color:var(--dim)}
/* the queue holds three or four seams in one screen, so it runs the tight variant */
.work__queue{min-height:0}
/* the queue is the one region that can outgrow the screen (a manifest line adds
   a row to a release seam), so it scrolls rather than clipping a footnote */
.work__queue .section__body{gap:9px;overflow-y:auto;overflow-x:hidden;padding-right:2px}
/* flex items shrink by default: without this a seam is squeezed below its own
   content and the "what happens next" footnote is sliced in half */
.work__queue .section__body > *{flex:none}
/* the quiet overflow line, same bargain Today makes with "N more in Brief" */
.queue__more{align-self:flex-start;padding:2px 2px 0;font:500 12px/1.4 var(--font-body);color:var(--dim)}
.queue__more:hover{color:var(--body)}
.work .seam__artifact{margin-top:6px}
.work .seam{--seam-lines:1}
.work .seam__prepared{padding:8px 15px 8px 17px}
.work .seam__call{padding:8px 15px 8px 17px}

/* releases: dense rows, no cards inside cards, state in words not colour */
.work__rel .section__body{gap:0}
.rel{display:flex;flex-direction:column;padding:2px 0 5px}
.rel + .rel{margin-top:5px;padding-top:7px;border-top:1px solid var(--line)}
.rel__head{display:flex;align-items:baseline;gap:9px;margin-bottom:3px}
.rel__app{font:500 13px/1.3 var(--font-body);color:var(--body)}
.rel__flag{font:400 10px/1 var(--font-mono);letter-spacing:.11em;text-transform:uppercase;color:var(--dim)}
.rel__row{display:grid;grid-template-columns:52px auto minmax(0,1fr);align-items:baseline;gap:9px;height:19px}
.rel__store{font:400 11px/1.3 var(--font-mono);letter-spacing:.06em;color:var(--dim)}
.rel__ver{font:400 12px/1.3 var(--font-mono);color:var(--body);white-space:nowrap}
.rel__state{font:400 12px/1.3 var(--font-body);color:var(--muted);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rel__row--sub .rel__ver{color:var(--muted)}

/* automations: title + state on one line, schedule and owner beneath */
.work__autos .section__body{gap:0}
.auto__row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:9px;align-items:baseline;padding:5px 2px 5px 0}
.auto__row + .auto__row{border-top:1px solid var(--line)}
.auto__title{font:400 13px/1.35 var(--font-body);color:var(--body);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.auto__state{justify-self:end}
.auto__meta{grid-column:1/-1;font:400 11px/1.3 var(--font-mono);letter-spacing:.03em;color:var(--dim);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* contributors: every agent, its last action, a quiet week of activity */
.work__contribs .section__body{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:2px 22px;align-content:start}
.contrib{display:flex;align-items:center;gap:10px;min-width:0}
.contrib .chip{flex:1;min-width:0}
.contrib__act{flex:none}
/* The week strip is VOLUME, not identity. Painting seven bars in the agent's own
 * colour spent four hues on a fact that is only "more or less than yesterday",
 * and colour that means nothing everywhere teaches the eye to ignore colour
 * where it does mean something (gold, risk). The bars are tonal grey steps; the
 * agent's coloured dot beside the name still carries identity, and it is the
 * same dot the overnight ledger ticks use, so the two agree. */
.act7{display:grid;grid-template-columns:repeat(7,4px);gap:2px;align-items:end;height:11px}
.act7__cell{height:100%;border-radius:1px;background:var(--muted);opacity:var(--w,.3)}

/* ── Ledger (views/ledger.js) ──────────────────────────────────────────── */

.ledger{display:flex;flex-direction:column;gap:11px;height:100%}
.ledger__bar{display:flex;align-items:center;gap:16px;flex:none;min-height:28px}
.ledger__logs{margin-left:auto;display:flex;align-items:center;gap:8px}

/* segmented control: also used by Activity's type toggle */
.seg{display:flex;background:var(--surface);border:1px solid var(--line);border-radius:4px;overflow:hidden;flex:none}
.seg__opt{padding:0 12px;height:26px;font:500 11px/26px var(--font-mono);letter-spacing:.1em;
  text-transform:uppercase;color:var(--dim)}
.seg__opt:hover{color:var(--muted)}
.seg__opt.is-on{color:var(--ink);background:var(--overlay-2)}

/* status filter chips: also used by Activity's agent filters */
.filters{display:flex;align-items:center;gap:2px;flex-wrap:wrap;min-width:0}
.filter{display:inline-flex;align-items:baseline;gap:7px;height:24px;padding:0 9px;border-radius:3px;
  font:500 12.5px/24px var(--font-body);color:var(--dim)}
.filter:hover{color:var(--body);background:var(--overlay-1)}
.filter.is-on{color:var(--ink);background:var(--overlay-2)}
.filter__n{font:400 10.5px/1 var(--font-mono);letter-spacing:.04em;color:var(--dim)}
.filter__dot{width:6px;height:6px;border-radius:50%;background:var(--agent,var(--dim));align-self:center}
.btn--ghost.is-on{color:var(--ink);border-color:var(--dim);background:var(--overlay-2)}

/* the timeline: the date lives in a gutter, not in a divider that costs a row */
.ledger__stream{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column;padding-right:2px;
  -webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 26px),transparent);
          mask-image:linear-gradient(to bottom,#000 calc(100% - 26px),transparent)}
.ledger__day{display:grid;grid-template-columns:96px minmax(0,1fr);gap:18px;padding:8px 0 9px;flex:none}
.ledger__day + .ledger__day{border-top:1px solid var(--line-2)}
.ledger__daymark{display:flex;flex-direction:column;gap:2px;padding-top:5px}
.ledger__dayname{font:500 11px/1.2 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.ledger__daynum{font:400 10.5px/1.2 var(--font-mono);letter-spacing:.04em;color:var(--dim)}
.ledger__rows{display:flex;flex-direction:column;min-width:0}

.led{display:grid;grid-template-columns:minmax(0,1fr) 118px 84px;align-items:start;
  column-gap:14px;padding:5px 2px 6px}
.led + .led{border-top:1px solid var(--line)}
.led__body{min-width:0;cursor:pointer}
.led__what{display:block;font:400 13.5px/1.4 var(--font-body);color:var(--body);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.led__ctx{display:block;margin-top:1px;font:400 12.5px/1.45 var(--font-body);color:var(--muted);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.led__meta{display:flex;align-items:center;gap:8px;margin-top:3px;min-width:0;overflow:hidden}
.led__due{font:400 11px/1.2 var(--font-mono);letter-spacing:.03em;color:var(--muted);white-space:nowrap}
.led__dom{padding:1px 6px 2px;border:1px solid var(--line);border-radius:2px;
  font:400 10.5px/1.3 var(--font-mono);letter-spacing:.05em;color:var(--muted);white-space:nowrap}
/* Status is a COLUMN, not a tail on the sentence above it. The cell is a fixed
 * width and the marker+label group is pinned to its right edge, so the whole
 * column ends on one vertical line and the eye can run down it, recorded, open,
 * slipped, done, without re-finding the start of each row. The "Done"
 * affordance beside it is pinned the same way. */
.led__gate{margin-top:3px;white-space:nowrap;justify-self:end}
.led__act{margin-top:3px;font:500 12px/1.3 var(--font-body);color:var(--dim);white-space:nowrap;justify-self:end}
.led__act:hover{color:var(--body)}
.led__act.is-quiet{font:400 11px/1.4 var(--font-mono);letter-spacing:.04em;cursor:default}
.led__acts{display:flex;gap:10px;justify-self:end}
.led.is-settled .led__what{color:var(--dim)}
.led.is-cursor{box-shadow:inset 2px 0 0 var(--muted)}
.led:focus{outline:none}

/* the inline log form: one surface, no card inside a card */
.ledger__form{flex:none;display:flex;flex-direction:column;gap:10px;padding:12px 14px 13px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius)}
.ledger__form-row{display:flex;align-items:flex-start;gap:12px}
.ledger__form-act{display:flex;align-items:center;gap:9px}
.ledger__form-note{margin-left:auto;font:400 11px/1.2 var(--font-mono);letter-spacing:.04em;color:var(--dim)}
.fld{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px}
.fld--narrow{flex:0 0 190px}
.fld__label{font:500 11px/1.1 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.fld__in{width:100%;background:var(--surface-2);border:1px solid var(--line-2);border-radius:4px;
  color:var(--body);font:400 13px/1.5 var(--font-body);padding:6px 9px;outline:none;resize:none}
.fld__in:focus{border-color:var(--dim)}
.fld__in::placeholder{color:var(--dim)}

/* ── Goals (views/goals.js) ────────────────────────────────────────────── */

.goals{display:flex;flex-direction:column;gap:14px;height:100%}
.goals__head{display:flex;align-items:baseline;gap:14px;flex:none;padding-bottom:2px;border-bottom:1px solid var(--line)}
.goals__lede{font:400 13px/1.4 var(--font-body);color:var(--muted)}
.goals__tally{margin-left:auto;font:400 11px/1.2 var(--font-mono);letter-spacing:.06em;color:var(--dim)}
.goals__list{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column;padding-right:2px}

/* a goal is a flat region on the page, never a card: hairlines carry the split */
/* The goals divide the column between them, three outcomes should own the page
 * rather than stack at the top of it, but a collapsed goal is capped so the
 * band never grows into a void. An opened one is free, and a long list scrolls. */
.goal{display:flex;flex-direction:column;justify-content:center;padding:16px 2px 18px;
  flex:1 1 auto;min-height:min-content;max-height:248px}
.goal.is-open{max-height:none}
.goal + .goal{border-top:1px solid var(--line)}
.goal:focus{outline:none}
.goal.is-cursor{box-shadow:inset 2px 0 0 var(--muted)}
.goal__head{display:flex;align-items:baseline;gap:14px}
.goal__title{font:600 17px/1.25 var(--font-display);color:var(--ink);letter-spacing:-.012em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* the state marker sits WITH the title, not at the far edge of a 1440px page */
.goal__health{flex:none}
.goal--live .goal__health .gate__mark{background:var(--muted)}
.goal__target{margin-top:5px;font:400 var(--fs-body)/1.5 var(--font-body);color:var(--muted);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* the progress rule: a hairline that fills, never a bar */
/* One measured line, all of it inside the goal's own column. The rule is a fixed
 * span so the reading, the date, the owner and the milestone count stay next to
 * it instead of being pushed to the opposite side of the screen. */
.goal__measure{display:flex;align-items:center;gap:13px;margin-top:11px}
.goal__rule{flex:0 0 232px;height:2px;background:var(--line-2);border-radius:1px;overflow:hidden}
.goal__rule i{display:block;height:100%;width:var(--p,0%);background:var(--muted)}
.goal__pct{flex:none;font:500 12px/1 var(--font-mono);letter-spacing:.04em;color:var(--body);
  min-width:34px;text-align:right}
.goal__due,.goal__owner{flex:none;font:400 11px/1 var(--font-mono);letter-spacing:.05em;color:var(--dim);
  padding-left:14px;border-left:1px solid var(--line-2)}

.goal__next{display:flex;align-items:baseline;gap:14px;margin-top:10px;min-width:0}
.goal__nextwhat{min-width:0;font:400 13.5px/1.4 var(--font-body);color:var(--body);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.goal__nextmark{margin-right:11px;font:500 11px/1.1 var(--font-mono);letter-spacing:.14em;
  text-transform:uppercase;color:var(--dim)}
.goal__nextdate{flex:none;font:400 11px/1.3 var(--font-mono);letter-spacing:.04em;color:var(--muted)}
.goal__more{flex:none;display:inline-flex;align-items:center;gap:7px;padding-left:14px;
  border-left:1px solid var(--line-2);
  font:400 11px/1.3 var(--font-mono);letter-spacing:.04em;color:var(--dim)}
.goal__more:hover{color:var(--muted)}
.goal__more .ic{width:12px;height:12px;transform:rotate(-90deg);transition:transform .14s ease}
.goal__more[aria-expanded="true"] .ic{transform:rotate(0)}

.goal__signal{margin-top:8px;font:400 11.5px/1.55 var(--font-mono);letter-spacing:.02em;color:var(--dim);
  max-width:112ch;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* the milestone list, folded away by default */
.goal__ms{display:flex;flex-direction:column;margin-top:12px;padding-left:14px;border-left:1px solid var(--line-2)}
.goal__msrow{display:grid;grid-template-columns:6px minmax(0,1fr) auto auto;align-items:baseline;
  gap:11px;padding:4px 0}
.goal__msmark{width:6px;height:6px;background:var(--line-2);align-self:center}
.goal__msrow.is-next .goal__msmark{background:var(--muted)}
.goal__mswhat{font:400 13px/1.45 var(--font-body);color:var(--body);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.goal__msrow.is-done .goal__mswhat{color:var(--dim)}
.goal__msnext{font:500 10px/1.3 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.goal__msdate{font:400 11px/1.3 var(--font-mono);letter-spacing:.04em;color:var(--dim);white-space:nowrap}

/* achieved: still true, no longer asking for attention */
.goal.is-quiet .goal__title{color:var(--muted);font-weight:500}
.goal.is-quiet .goal__target,.goal.is-quiet .goal__nextwhat{color:var(--dim)}
.goal.is-quiet .goal__rule i{background:var(--line-2)}
.goal.is-quiet .goal__pct{color:var(--dim)}

/* ── Activity (views/activity.js) ──────────────────────────────────────── */

/* The filter bar holds still, the stream takes the rest of the column, and the
 * "Show more" control sits under both so it is never scrolled out of reach. */
.activity{display:flex;flex-direction:column;gap:11px;height:100%}
.act__bar{flex:none;display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding-bottom:10px;border-bottom:1px solid var(--line)}
.act__span{margin-left:auto;flex:none;font:400 11px/1.2 var(--font-mono);
  letter-spacing:.05em;color:var(--dim);white-space:nowrap}

.act__stream{flex:0 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;padding-right:2px}
.act__rows{display:flex;flex-direction:column}

/* the hour divider: a mono time, a hairline, the count of what is under it */
.act__div{display:flex;align-items:center;gap:12px;height:26px;margin-top:6px;padding-right:30px}
.act__stream > .act__div:first-child{margin-top:0}
.act__divtime{flex:none;font:500 11px/1 var(--font-mono);letter-spacing:.12em;color:var(--dim)}
.act__divrule{flex:1;min-width:0;height:1px;background:var(--line)}
.act__divn{flex:none;font:400 10.5px/1 var(--font-mono);letter-spacing:.06em;color:var(--line-2)}

/* An audit record sits a shade behind the action it describes. Status stays
 * monochrome here on purpose: a verb like "failed" is matched by a heuristic,
 * and a staging failover drill that worked as designed must not read as an
 * incident. Red is reserved for slipped/blocked, which this stream never shows. */
.receipt--audit .receipt__what{color:var(--muted)}

.act__more{flex:none;display:flex;align-items:center;gap:12px;width:100%;height:30px;
  padding:0 4px 0 2px;border-top:1px solid var(--line);
  font:400 13px/1.4 var(--font-body);color:var(--muted);text-align:left}
.act__more:hover{color:var(--body)}
.act__moren{margin-left:auto;font:400 11px/1.2 var(--font-mono);letter-spacing:.05em;color:var(--dim)}

/* ── Goals: vertical rhythm (views/goals.js) ──────────────────────────── */

/* Three outcomes should read as a deliberate list, not as three panels stretched
 * to fill a screen. Each goal takes exactly the height its own content needs and
 * the space between them is constant, so the eye steps down the column at an even
 * beat. Whatever height is left over falls to the bottom of the page in one piece
 * rather than being handed out as gaps nobody asked for: an even list with a
 * quiet end reads finished; three blocks floating in air reads unfinished. */
.goals__list{justify-content:flex-start}
.goals__list .goal{flex:0 0 auto;justify-content:flex-start;max-height:none;padding:15px 2px 16px}
.goals__list .goal:first-child{padding-top:4px}

/* The list is a column of outcomes, not a full-bleed table. Holding it to a
 * readable measure stops the hairlines between goals from running off into a
 * region that has nothing in it, which is what made the page read unfinished. */
.goals__head,.goals__list{max-width:1020px}
.goals__list .goal:last-child{border-bottom:0}

/* ── rail collapsed (desktop only) ─────────────────────────────────────── */

@media (min-width:821px){
  .app.is-collapsed{grid-template-columns:minmax(0,1fr)}
  .app.is-collapsed .sidebar{display:none}
  .app.is-collapsed .topbar{padding-left:12px}
  .app.is-collapsed .topbar__railshow{display:grid}
}

/* ── phone (820px and under) ───────────────────────────────────────────── */

/* One column. The sidebar becomes an off-canvas drawer behind #menuBtn; the
 * topbar carries the menu, a centred lockup and the needs-you pill. Other views
 * stack to one column and scroll inside #view; they are not redesigned for the
 * phone, only kept from overflowing it. */
@media (max-width:820px){
  :root{--gutter:16px}
  .app{grid-template-columns:minmax(0,1fr)}

  .sidebar{
    position:fixed;inset:0 auto 0 0;width:min(300px,86vw);z-index:60;
    padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom);
    transform:translateX(-100%);transition:transform .22s cubic-bezier(.2,.7,.3,1);
  }
  .app.is-menu .sidebar{transform:none;box-shadow:var(--shadow-pop)}
  .nav__item{height:44px}
  .nav__item--two{height:auto;min-height:44px}
  .sidebar__tools .iconbtn,.sidebar__foot .iconbtn{width:44px;height:44px}
  .sidebar__top{padding-right:6px}
  .sidebar__foot{padding-right:6px}
  .lenschip__opt{height:24px;line-height:24px;padding:0 9px}
  .sidebar__foot{height:64px}

  .pane{grid-template-rows:auto minmax(0,1fr)}
  .topbar{
    display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:8px;
    height:calc(56px + env(safe-area-inset-top));padding:env(safe-area-inset-top) 6px 0;
  }
  .iconbtn.topbar__menu{display:grid;grid-column:1;grid-row:1;justify-self:start;width:44px;height:44px}
  .topbar__menu .ic{width:22px;height:22px}
  .iconbtn.topbar__railshow,.conclusion,.topbar__tools{display:none}
  .brand--mobile{display:inline-flex;grid-column:2;grid-row:1;justify-self:center}
  .brand--mobile .brand__name{font-size:16px}
  .needspill:not([hidden]){
    position:relative;display:inline-flex;align-items:center;grid-column:3;grid-row:1;justify-self:end;
    height:30px;margin-right:6px;padding:0 11px;border-radius:15px;white-space:nowrap;
    background:var(--gold-soft);color:var(--gold-text);font:600 12.5px/1 var(--font-body);
  }
  /* the pill reads small but takes a 44px tap */
  .needspill::after{content:"";position:absolute;inset:-7px -4px}

  /* search mode: the sidebar's search button swaps the lockup for the filter */
  .app.is-search .topbar__tools{display:flex;grid-column:1 / -1;grid-row:1;padding:0 6px}
  .app.is-search .iconbtn.topbar__menu,.app.is-search .brand--mobile,.app.is-search .needspill,
  .app.is-search .topbar__sync,.app.is-search #refreshBtn{display:none}
  .app.is-search .search{flex:1;height:40px}
  .app.is-search .search input{width:100%;font-size:16px}

  #view{padding:12px var(--gutter) calc(16px + env(safe-area-inset-bottom))}
  #view.is-chat{padding:0}

  .slideover{width:100%;max-width:none;border-left:0}
  .slideover__head .iconbtn{width:44px;height:44px}
  .toast{left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));max-width:none}

  /* other views: one column, one scroll (#view), nothing wider than the screen */
  .today,.today--lane,.brief,.work,.work--quiet{height:auto;grid-template-rows:none;grid-template-columns:minmax(0,1fr)}
  .ledger,.goals,.activity{height:auto}
  .today__split,.brief__split,.work__split{grid-template-columns:minmax(0,1fr);gap:18px}
  .today__main,.today__rail,.brief__main,.brief__rail,
  .work__queue .section__body,.ledger__stream,.goals__list,.act__stream{overflow:visible}
  .ledger__stream{-webkit-mask-image:none;mask-image:none}
  .seam__zonebar,.seam__callrow,.seam__actions,.seam__meta,.ledger__bar,.ledger__form-row,
  .brief__datenav,.goal__measure,.goal__next,.goals__head{flex-wrap:wrap}
  .seam__actions{margin-left:0;row-gap:9px}
  .seam__evidence{margin-left:0}
  .ledger__logs{margin-left:0}
  .ledger__day{grid-template-columns:minmax(0,1fr);gap:4px}
  .ledger__daymark{flex-direction:row;gap:10px;padding-top:0}
  .led{grid-template-columns:minmax(0,1fr) auto auto}
  .fld--narrow{flex:1 1 100%}
  .lane__row{grid-template-columns:repeat(4,minmax(0,1fr))}
  .work__contribs .section__body{grid-template-columns:repeat(2,minmax(0,1fr))}
  .goal__rule{flex:1 1 100%}
  .goals__tally,.act__span{margin-left:0}
  .brief__rule{grid-template-columns:minmax(0,1fr) 12px minmax(0,1fr)}
  .brief__rule-note{grid-column:1 / -1}
  /* a receipt keeps what, who and when on one line; the evidence sentence is in its detail */
  .receipt{height:auto;min-height:21px;grid-template-columns:minmax(0,1fr) auto 14px;
    grid-template-areas:"what meta chev" "auth auth auth";row-gap:2px}
  .receipt--act{grid-template-columns:minmax(0,1fr) auto auto 14px;
    grid-template-areas:"what meta act chev" "auth auth auth auth"}
  .receipt__act{grid-area:act;min-height:44px;min-width:44px}
  .brief__filter .seg__opt{height:44px;line-height:44px}
  .led__acts .led__act,.brief__ob-acts .brief__ob-act,.slip__acts .slip__done{min-height:44px;min-width:44px}
  /* the overnight sentence is the second line of the four-second read: give it the row */
  .strip__head{flex-wrap:wrap;gap:4px 16px}
  .strip__narrative{flex:1 1 100%;white-space:normal}
  .strip__hour--late{display:none}
  .receipt__what{grid-area:what}
  .receipt__meta{grid-area:meta}
  .receipt__chev{grid-area:chev}
  .receipt__auth{grid-area:auth;justify-self:start;padding-left:0;border-left:0}
  .receipt__auth:empty,.receipt__ev{display:none}
}