/* ============================================================================
   AgentOS design system.

   One stylesheet, no framework. Every value is a token below; components never
   use a literal colour, so both themes and both pointer sizes come from tokens.

   Colour carries meaning and nothing else:
     person (blue)  agent (violet)  ok (green)  warn (amber)  danger (red)
   Chrome, text and the primary action are neutral ink.

   Type: Instrument Sans for the interface, JetBrains Mono for anything a
   machine wrote or a person copies: task keys, branches, shas, states, counts,
   times. Load both from Google Fonts with Remix Icon 4.5 (see README).

   Shape: people are circles, agents are squares. Corners are small and crisp.

   Theme: <html data-theme="light|dark">, or no attribute to follow the system.
   Size: controls grow under a coarse pointer (touch); there is no density switch.
   ============================================================================ */

:root {
  /* ---- ground ---- */
  --canvas:   #F3F4F6;  /* page behind everything, the sidebar */
  --surface:  #FFFFFF;  /* panels, tables, inputs */
  --sunken:   #F3F4F6;  /* table heads, insets, code */
  --raised:   #FFFFFF;  /* dialogs, menus, sheets */
  --line:     #E2E5EA;
  --line-2:   #CDD2DA;  /* control borders, stronger dividers */

  /* ---- ink ---- */
  --ink:      #14171C;
  --ink-2:    #4F5663;  /* secondary text */
  --ink-3:    #666E7B;  /* hints, timestamps, line numbers: 4.6:1 on canvas */
  --on-ink:   #FFFFFF;  /* text on an ink fill */
  --hover:    rgba(20, 23, 28, .05);
  --press:    rgba(20, 23, 28, .09);

  /* ---- meaning ---- */
  --person:      #2563C9;  --person-wash: #EAF1FD;  --on-person-wash: #1B4A99;
  --agent:       #6D4AE0;  --agent-wash:  #F0ECFD;  --on-agent-wash:  #4F2FB8;
  --ok:          #12805C;  --ok-wash:     #E6F4EE;  --on-ok-wash:     #0B5C42;
  --warn:        #A15C00;  --warn-wash:   #FBF1E1;  --on-warn-wash:   #6E3F00;
  --danger:      #C8323F;  --danger-wash: #FCEBED;  --on-danger-wash: #8F1F2B;
  --focus:       #2563C9;

  /* ---- code ---- */
  --add-bg: #E9F6EF;  --add-ln: #D7EEE1;  --add-hi: #BDE6CC;
  --del-bg: #FDEEF0;  --del-ln: #F8DCE0;  --del-hi: #F4C3CB;
  --ours:   var(--person);
  --theirs: #0E7490;
  /* the terminal is dark in both themes: the harness TUIs drawn in it assume so */
  --term-bg: #0D0F12;  --term-fg: #D9DCE2;  --term-dim: #8B919C;  --term-line: #23272E;

  /* ---- depth ---- */
  --shadow-1:   0 1px 2px rgba(15, 18, 24, .06);
  --shadow-pop: 0 2px 6px rgba(15, 18, 24, .08), 0 16px 40px -12px rgba(15, 18, 24, .28);
  --scrim:      rgba(13, 15, 18, .42);

  /* ---- type ---- */
  --font: "Instrument Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --t-xs: 11px;  --t-sm: 12px;  --t-md: 13px;  --t-base: 14px;
  --t-lg: 16px;  --t-xl: 20px;  --t-2xl: 26px;

  /* ---- space and shape ---- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px;
  --r-1: 4px;  --r-2: 6px;  --r-3: 10px; --r-4: 14px;
  --ctl-h: 32px;   /* buttons, inputs; 40px under touch */
  --row-h: 40px;   /* table and list rows */
  --side-w: 236px;
}
@media (pointer: coarse) {
  :root { --ctl-h: 40px; --row-h: 48px; }
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --canvas: #0D0F12;  --surface: #14171B;  --sunken: #101317;  --raised: #1B1F24;
    --line: #252A31;  --line-2: #343A43;
    --ink: #E6E8EC;  --ink-2: #A3A9B4;  --ink-3: #858C98;  --on-ink: #0D0F12;
    --hover: rgba(230, 232, 236, .06);  --press: rgba(230, 232, 236, .1);
    --person: #7AA7F7;  --person-wash: #14223A;  --on-person-wash: #A9C6FA;
    --agent:  #A48BFF;  --agent-wash:  #1E1838;  --on-agent-wash:  #C6B7FF;
    --ok:     #4ADE9B;  --ok-wash:     #10261D;  --on-ok-wash:     #7EE8B7;
    --warn:   #F5B84A;  --warn-wash:   #2A2112;  --on-warn-wash:   #F7CB7A;
    --danger: #F47C88;  --danger-wash: #2E1519;  --on-danger-wash: #F7A3AC;
    --focus:  #7AA7F7;
    --add-bg: #0F2219;  --add-ln: #132C20;  --add-hi: #1B4630;
    --del-bg: #2A1316;  --del-ln: #36181D;  --del-hi: #57212B;
    --theirs: #45B6CE;
    --term-bg: #08090B;
    --shadow-1: 0 1px 2px rgba(0, 0, 0, .4);
    --shadow-pop: 0 2px 6px rgba(0, 0, 0, .4), 0 16px 40px -12px rgba(0, 0, 0, .7);
    --scrim: rgba(0, 0, 0, .64);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --canvas: #0D0F12;  --surface: #14171B;  --sunken: #101317;  --raised: #1B1F24;
  --line: #252A31;  --line-2: #343A43;
  --ink: #E6E8EC;  --ink-2: #A3A9B4;  --ink-3: #858C98;  --on-ink: #0D0F12;
  --hover: rgba(230, 232, 236, .06);  --press: rgba(230, 232, 236, .1);
  --person: #7AA7F7;  --person-wash: #14223A;  --on-person-wash: #A9C6FA;
  --agent:  #A48BFF;  --agent-wash:  #1E1838;  --on-agent-wash:  #C6B7FF;
  --ok:     #4ADE9B;  --ok-wash:     #10261D;  --on-ok-wash:     #7EE8B7;
  --warn:   #F5B84A;  --warn-wash:   #2A2112;  --on-warn-wash:   #F7CB7A;
  --danger: #F47C88;  --danger-wash: #2E1519;  --on-danger-wash: #F7A3AC;
  --focus:  #7AA7F7;
  --add-bg: #0F2219;  --add-ln: #132C20;  --add-hi: #1B4630;
  --del-bg: #2A1316;  --del-ln: #36181D;  --del-hi: #57212B;
  --theirs: #45B6CE;
  --term-bg: #08090B;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-pop: 0 2px 6px rgba(0, 0, 0, .4), 0 16px 40px -12px rgba(0, 0, 0, .7);
  --scrim: rgba(0, 0, 0, .64);
  color-scheme: dark;
}

/* ------------------------------------------------------------------ base ---- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--canvas); color: var(--ink);
  font: 400 var(--t-base)/1.5 var(--font); -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -.012em; line-height: 1.25; text-wrap: balance; }
h1 { font-size: var(--t-2xl); letter-spacing: -.02em; }
h2 { font-size: var(--t-xl); }
h3 { font-size: var(--t-lg); }
h4 { font-size: var(--t-base); }
p { margin: 0; }
p + p { margin-top: var(--s-3); }
a { color: inherit; text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; }
a:hover { text-decoration-color: currentColor; }
code, pre, kbd, samp { font-family: var(--mono); font-size: .9em; }
code, pre, kbd, samp, .mono, .sha, .ref, .term-body { font-variant-ligatures: none; } /* machine text reads as typed: -- stays two hyphens */
hr { border: 0; border-top: 1px solid var(--line); margin: var(--s-5) 0; }
img, svg { max-width: 100%; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
::selection { background: var(--person-wash); }

.mono { font-family: var(--mono); font-size: .92em; letter-spacing: -.01em; }
.muted { color: var(--ink-2); }
.faint { color: var(--ink-3); }
.small { font-size: var(--t-sm); }
.center { text-align: center; }
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* A label set in mono caps: column heads, nav sections, eyebrows. */
.eyebrow { font: 500 var(--t-xs)/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }

/* ---------------------------------------------------------------- layout ---- */
.stack { display: grid; gap: var(--s-4); align-content: start; }
.stack-sm { display: grid; gap: var(--s-2); align-content: start; }
.row { display: flex; align-items: center; gap: var(--s-2) var(--s-3); flex-wrap: wrap; min-width: 0; }
.spacer { margin-left: auto; }
.grid-2 { display: grid; gap: var(--s-4); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.split { display: grid; gap: var(--s-4); grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); align-items: start; }
@media (max-width: 860px) { .grid-2, .split { grid-template-columns: minmax(0, 1fr); } }

/* ----------------------------------------------------------------- shell ----
   Sidebar for places, a top bar for where you are and what you can do here,
   the page below. Under 860px the sidebar leaves and a tab bar takes the
   bottom edge, with "More" opening the sidebar as a sheet. */
.shell { display: grid; grid-template-columns: var(--side-w) minmax(0, 1fr); min-height: 100dvh; }
.sidebar {
  position: sticky; top: 0; height: 100dvh; overflow-y: auto; scrollbar-width: thin;
  display: flex; flex-direction: column; gap: var(--s-1);
  padding: var(--s-3) var(--s-3) var(--s-4); border-right: 1px solid var(--line); background: var(--canvas);
}
.brand { display: flex; align-items: center; gap: var(--s-2); padding: var(--s-1) var(--s-2) var(--s-3);
         font-weight: 600; font-size: var(--t-base); letter-spacing: -.01em; text-decoration: none; color: var(--ink); }
.brand img { width: 22px; height: 22px; border-radius: 5px; }
.nav { display: grid; gap: 1px; }
.nav .eyebrow { padding: var(--s-4) var(--s-2) var(--s-1); }
.nav a {
  display: flex; align-items: center; gap: var(--s-2); height: 32px; padding: 0 var(--s-2);
  border: 1px solid transparent; border-radius: var(--r-2);
  color: var(--ink-2); font-size: var(--t-md); font-weight: 500; text-decoration: none;
}
.nav a i { font-size: 16px; color: var(--ink-3); }
.nav a:hover { background: var(--hover); color: var(--ink); }
.nav a[aria-current="page"] { background: var(--surface); border-color: var(--line); color: var(--ink); box-shadow: var(--shadow-1); }
.nav a[aria-current="page"] i { color: var(--ink); }
.nav .count { margin-left: auto; font: 500 var(--t-xs) var(--mono); color: var(--ink-3); }
.sidebar-foot { margin-top: auto; display: grid; gap: var(--s-1); padding-top: var(--s-3); border-top: 1px solid var(--line); }
.sidebar-foot .actor { padding: var(--s-1) var(--s-2); border-radius: var(--r-2); text-decoration: none; color: var(--ink); }
.sidebar-foot .actor:hover, .sidebar-foot .actor[aria-current="page"] { background: var(--hover); }
.sidebar-foot form { margin: 0; }
.sidebar-foot .btn { width: 100%; justify-content: flex-start; }

.main { min-width: 0; display: flex; flex-direction: column; }
.topbar {
  position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: var(--s-3);
  min-height: 52px; padding: var(--s-2) var(--s-6);
  background: color-mix(in srgb, var(--canvas) 88%, transparent); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.topbar .brand { display: none; padding: 0; }

/* The bell: unread notifications. Its count is the one badge in the app, ink like the primary button. */
.bell { position: relative; display: inline-grid; place-items: center; width: var(--ctl-h); height: var(--ctl-h); margin-left: auto; flex: none;
        border-radius: var(--r-2); color: var(--ink-2); font-size: 18px; text-decoration: none; }
.bell:hover { background: var(--hover); color: var(--ink); }
.bell[aria-current="page"] { color: var(--ink); }
.badge { position: absolute; top: 2px; right: 0; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; display: grid; place-items: center;
         background: var(--ink); color: var(--on-ink); font: 600 10px/1 var(--mono); box-shadow: 0 0 0 2px var(--canvas); }
.badge:empty { display: none; }
.content { padding: var(--s-6); display: grid; gap: var(--s-5); align-content: start; }
.content.narrow { max-width: 880px; }

.tabbar { display: none; }
@media (max-width: 860px) {
  .shell { grid-template-columns: minmax(0, 1fr); }
  .sidebar {
    position: fixed; z-index: 60; inset: auto 0 0 0; height: auto; max-height: 82dvh;
    border: 0; border-radius: var(--r-4) var(--r-4) 0 0; background: var(--raised); box-shadow: var(--shadow-pop);
    padding-bottom: calc(var(--s-4) + env(safe-area-inset-bottom, 0px));
    transform: translateY(100%); visibility: hidden; transition: transform .2s ease, visibility .2s;
  }
  .sidebar.open { transform: none; visibility: visible; }
  .topbar { padding: var(--s-2) var(--s-4); padding-top: calc(var(--s-2) + env(safe-area-inset-top, 0px)); }
  .topbar .brand { display: flex; }
  .content { padding: var(--s-4) var(--s-4) calc(var(--s-8) + 64px); gap: var(--s-4); }
  .tabbar {
    position: fixed; z-index: 50; inset: auto 0 0 0; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: color-mix(in srgb, var(--canvas) 92%, transparent); backdrop-filter: blur(10px);
    border-top: 1px solid var(--line);
  }
  .tabbar a, .tabbar button {
    display: flex; flex-direction: column; align-items: center; gap: 2px; padding: var(--s-2) 0 var(--s-1);
    font: 500 var(--t-xs) var(--font); color: var(--ink-3); text-decoration: none; background: none; border: 0; cursor: pointer;
  }
  .tabbar i { font-size: 21px; }
  .tabbar [aria-current="page"] { color: var(--ink); }
}
/* The scrim behind the sidebar sheet: its own element, so a tap on it closes the sheet. */
.scrim { position: fixed; inset: 0; z-index: 55; background: var(--scrim); }

/* A page's title row: the heading, what it is, and its actions. */
.page-head { display: flex; align-items: flex-end; gap: var(--s-2) var(--s-4); flex-wrap: wrap; }
.page-head > div:first-child { display: grid; gap: 2px; min-width: 0; }
.page-head .acts { margin-left: auto; }
.page-head .muted { font-size: var(--t-md); }
.page-head .copy { width: 380px; max-width: 100%; } /* a fixed width: a percentage of a shrink-to-fit row made it wrap */

.crumbs { display: flex; align-items: center; gap: var(--s-1); flex-wrap: wrap; margin: 0; padding: 0; list-style: none;
          font-size: var(--t-md); color: var(--ink-2); min-width: 0; }
.crumbs li { display: flex; align-items: center; gap: var(--s-1); }
.crumbs li + li::before { content: "/"; color: var(--line-2); }
.crumbs a { text-decoration: none; color: var(--ink-2); }
.crumbs a:hover { color: var(--ink); }
.crumbs [aria-current] { color: var(--ink); font-weight: 600; }

.acts { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }
.acts form { margin: 0; }
.toolbar { display: flex; align-items: center; gap: var(--s-2) var(--s-3); flex-wrap: wrap; }

/* --------------------------------------------------------------- buttons ----
   Primary is ink, not a hue: colour is kept for meaning. One primary per view. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  height: var(--ctl-h); padding: 0 var(--s-3); border: 1px solid var(--line-2); border-radius: var(--r-2);
  background: var(--surface); color: var(--ink); box-shadow: var(--shadow-1);
  font: 500 var(--t-md) var(--font); white-space: nowrap; text-decoration: none; cursor: pointer;
  transition: background .12s, border-color .12s;
}
.btn:hover { background: var(--sunken); border-color: var(--ink-3); }
.btn:active { background: var(--press); }
.btn i { font-size: 16px; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
.btn-primary { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }
.btn-primary:hover { background: var(--ink-2); border-color: var(--ink-2); }
.btn-ghost { background: none; border-color: transparent; box-shadow: none; color: var(--ink-2); }
.btn-ghost:hover { background: var(--hover); border-color: transparent; color: var(--ink); }
.btn-danger { background: var(--danger); border-color: var(--danger); color: var(--on-ink); }
.btn-danger:hover { background: var(--on-danger-wash); border-color: var(--on-danger-wash); }
.btn-sm { height: calc(var(--ctl-h) - 6px); padding: 0 var(--s-2); font-size: var(--t-sm); gap: var(--s-1); }
.btn-sm i { font-size: 14px; }
.btn-lg { height: calc(var(--ctl-h) + 8px); padding: 0 var(--s-5); font-size: var(--t-base); }
.btn-block { width: 100%; }
.btn-icon { width: var(--ctl-h); padding: 0; }
.btn-icon.btn-sm { width: calc(var(--ctl-h) - 6px); }
kbd { display: inline-block; min-width: 18px; padding: 0 4px; border: 1px solid var(--line-2); border-bottom-width: 2px;
      border-radius: var(--r-1); font-size: var(--t-xs); line-height: 16px; text-align: center; color: var(--ink-2); background: var(--surface); }

/* ---------------------------------------------------------------- fields ---- */
.field { display: grid; gap: 6px; min-width: 0; align-content: start; } /* a field stretched by its row keeps label and control together */
.field > label, .label { font-size: var(--t-md); font-weight: 500; }
.req::after { content: " *"; color: var(--danger); }
.hint { font-size: var(--t-sm); color: var(--ink-3); }
.error { font-size: var(--t-sm); color: var(--danger); }
.form { display: grid; gap: var(--s-4); }
.form-row { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); }
.form-actions { display: flex; gap: var(--s-2); flex-wrap: wrap; align-items: center; }

input:not([type]), input[type=text], input[type=email], input[type=password], input[type=search], input[type=url], input[type=tel],
input[type=number], input[type=date], input[type=month], input[type=time], input[type=datetime-local], select, textarea {
  width: 100%; height: var(--ctl-h); padding: 0 var(--s-3); border: 1px solid var(--line-2); border-radius: var(--r-2);
  background: var(--surface); color: var(--ink); font: 400 var(--t-md) var(--font); box-shadow: inset 0 1px 1px rgba(15, 18, 24, .03);
}
@media (pointer: coarse) {
  input:not([type]), input[type=text], input[type=email], input[type=password], input[type=search], input[type=url], input[type=tel],
  input[type=number], select, textarea { font-size: 16px; } /* iOS zooms into anything smaller */
}
textarea { height: auto; min-height: 88px; padding: var(--s-2) var(--s-3); line-height: 1.5; resize: vertical; }
select { appearance: none; padding-right: var(--s-8); cursor: pointer;
  background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23858C98'%3E%3Cpath d='M12 15l-5-5h10z'/%3E%3C/svg%3E") right 8px center/18px no-repeat; }
:is(input, select, textarea):hover { border-color: var(--ink-3); }
:is(input, select, textarea):focus-visible { outline: 2px solid var(--focus); outline-offset: -1px; border-color: transparent; }
:is(input, textarea)::placeholder { color: var(--ink-3); }
:is(input, textarea).mono { font-family: var(--mono); font-size: var(--t-sm); } /* branch names, slugs, URLs */
input[aria-invalid="true"] { border-color: var(--danger); }
input[type=number] { max-width: 160px; }
/* A control sized to its content, for a select in a toolbar or a head. */
:is(select, input).fit { width: auto; }
/* A control that takes the room left in a row: an inline add form. */
:is(select, input, textarea).grow { flex: 1; min-width: 160px; }

input[type=checkbox], input[type=radio] { width: 16px; height: 16px; margin: 0; accent-color: var(--ink); flex: none; }
.check { display: inline-flex; align-items: center; gap: var(--s-2); font-size: var(--t-md); cursor: pointer; }

/* A switch: a checkbox underneath, so it submits and works from the keyboard. */
.switch { position: relative; display: inline-flex; align-items: center; gap: var(--s-2); cursor: pointer; font-size: var(--t-md); }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch .track { width: 32px; height: 18px; flex: none; border-radius: 9px; background: var(--line-2); position: relative; transition: background .15s; }
.switch .track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%;
                        background: var(--surface); box-shadow: var(--shadow-1); transition: transform .15s; }
.switch input:checked + .track { background: var(--ok); }
.switch input:checked + .track::after { transform: translateX(14px); }
.switch input:focus-visible + .track { outline: 2px solid var(--focus); outline-offset: 2px; }
.switch.small { font-size: var(--t-sm); }

/* A value people copy: a clone URL, a token. */
.copy { display: flex; align-items: center; gap: var(--s-2); min-width: 0; height: var(--ctl-h); padding: 0 3px 0 var(--s-3);
        border: 1px solid var(--line-2); border-radius: var(--r-2); background: var(--sunken); }
.copy code { flex: 1; min-width: 0; overflow-x: auto; white-space: nowrap; scrollbar-width: none; font-size: var(--t-sm); }
.copy .btn { height: calc(var(--ctl-h) - 8px); box-shadow: none; }

/* ------------------------------------------------------- searchable select ----
   Tom Select on a <select>: the control looks like any field, the list like a menu.
   Inside a dialog the list opens in place, pushing what's below, so it's never cut off. */
.ts-hidden-accessible { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important;
                        clip: rect(0 0 0 0) !important; white-space: nowrap !important; border: 0 !important; padding: 0 !important; }
.ts-wrapper { position: relative; width: 100%; min-width: 0; }
.ts-wrapper.fit { width: auto; min-width: 180px; }
.ts-wrapper.grow { flex: 1; min-width: 160px; }
.ts-control { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; min-height: var(--ctl-h); padding: 3px var(--s-8) 3px var(--s-3);
              border: 1px solid var(--line-2); border-radius: var(--r-2); background: var(--surface); color: var(--ink);
              font: 400 var(--t-md) var(--font); cursor: pointer; position: relative; }
.ts-wrapper.single .ts-control::after { content: ""; position: absolute; right: 12px; top: 50%; width: 7px; height: 7px; margin-top: -5px;
                                        border: solid var(--ink-3); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); }
.ts-control:hover { border-color: var(--ink-3); }
.ts-wrapper.focus .ts-control { outline: 2px solid var(--focus); outline-offset: -1px; border-color: transparent; }
.ts-control > input { flex: 1 1 60px; min-width: 60px; height: 24px; padding: 0; border: 0; background: none; color: inherit; font: inherit; outline: none; box-shadow: none; }
.ts-wrapper.single.has-items .ts-control > input { flex-basis: 4px; min-width: 4px; }
.ts-wrapper.input-hidden .ts-control > input { position: absolute; left: -10000px; opacity: 0; }
/* One line, always: a long choice shortens with an ellipsis rather than pushing the search box onto
   a second line, which made the control grow when it opened. */
.ts-wrapper.single .ts-control { flex-wrap: nowrap; }
.ts-wrapper.single .ts-control > .item { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ts-wrapper.single .ts-control > input { flex: 1 0 4px; }
.ts-wrapper.multi .ts-control > .item { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 6px; border-radius: var(--r-1);
                                        background: var(--sunken); border: 1px solid var(--line); font-size: var(--t-sm); }
.ts-wrapper.multi .item .remove { color: var(--ink-3); text-decoration: none; }
.ts-wrapper.disabled { opacity: .55; pointer-events: none; }
.ts-dropdown { position: absolute; z-index: 60; top: calc(100% + 4px); left: 0; right: 0; padding: var(--s-1);
               background: var(--raised); border: 1px solid var(--line); border-radius: var(--r-3); box-shadow: var(--shadow-pop); }
.ts-dropdown.floating { position: fixed; right: auto; z-index: 100; } /* in a dialog: placed by agentos.js */
.ts-dropdown-content { max-height: 264px; overflow-y: auto; }
.ts-dropdown :is(.option, .no-results, .create) { padding: 7px var(--s-2); border-radius: var(--r-2); font-size: var(--t-md); cursor: pointer; }
.ts-dropdown .option.active { background: var(--hover); }
.ts-dropdown .option.selected { font-weight: 600; }
.ts-dropdown .no-results { color: var(--ink-3); cursor: default; }
.ts-dropdown .spinner { display: none; }
.ts-wrapper.loading .ts-control::after { border-color: var(--line-2); }

/* ------------------------------------------------------------- attachments ----
   Files with a message: images as thumbnails, the rest as a named chip. While composing,
   each has a Remove; a form being dropped on shows a dashed outline. */
.attach { display: grid; gap: var(--s-2); }
.attachments { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: 0; padding: 0; list-style: none; }
.attachments:empty { display: none; }
.attachments li { position: relative; }
.attachments .thumb { display: block; width: 104px; height: 76px; border: 1px solid var(--line); border-radius: var(--r-2); overflow: hidden; background: var(--sunken); }
.attachments .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.attachments .file { display: inline-flex; align-items: center; gap: 6px; max-width: 260px; height: 32px; padding: 0 var(--s-2);
                     border: 1px solid var(--line); border-radius: var(--r-2); background: var(--surface); color: var(--ink);
                     font-size: var(--t-sm); text-decoration: none; }
.attachments .file span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.attachments .file small { color: var(--ink-3); font-family: var(--mono); white-space: nowrap; }
.attachments .remove { position: absolute; top: -7px; right: -7px; width: 20px; height: 20px; display: grid; place-items: center; padding: 0;
                       border: 1px solid var(--line-2); border-radius: 50%; background: var(--raised); color: var(--ink-2); font-size: 13px; line-height: 1; cursor: pointer; }
.msg .attachments { margin-top: 2px; }
form.dropping { outline: 2px dashed var(--focus); outline-offset: 4px; border-radius: var(--r-3); }

/* ----------------------------------------------------------------- panel ---- */
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-3); min-width: 0; }
.panel-head { display: flex; align-items: center; gap: var(--s-2) var(--s-3); flex-wrap: wrap;
              min-height: 48px; padding: var(--s-2) var(--s-4); border-bottom: 1px solid var(--line); }
.panel-head h2, .panel-head h3 { font-size: var(--t-base); }
.panel-head .acts { margin-left: auto; }
.panel-body { padding: var(--s-4); }
.panel-foot { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; padding: var(--s-3) var(--s-4);
              border-top: 1px solid var(--line); background: var(--sunken); border-radius: 0 0 var(--r-3) var(--r-3); }
.panel-foot.form { display: grid; } /* a form as a panel's footer: a reply box under a thread */
.panel.danger { border-color: color-mix(in srgb, var(--danger) 40%, var(--line)); }

/* Key and value pairs. */
.facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--s-2) var(--s-5); margin: 0; font-size: var(--t-md); }
.facts dt { color: var(--ink-3); }
.facts dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }

/* ----------------------------------------------------------------- table ---- */
.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: var(--t-md); }
.table th { height: 34px; padding: 0 var(--s-4); text-align: left; white-space: nowrap; background: var(--sunken);
            border-bottom: 1px solid var(--line); font: 500 var(--t-xs)/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.panel > .table-wrap:first-child .table th:first-child { border-top-left-radius: var(--r-3); }
.panel > .table-wrap:first-child .table th:last-child { border-top-right-radius: var(--r-3); }
.table td { height: var(--row-h); padding: var(--s-2) var(--s-4); border-bottom: 1px solid var(--line); vertical-align: middle; }
.table tr:last-child td { border-bottom: 0; }
.table tbody tr:hover { background: var(--hover); }
.table tr[data-href] { cursor: pointer; }
.table td.acts-cell { text-align: right; white-space: nowrap; }
.table .acts { justify-content: flex-end; flex-wrap: nowrap; opacity: 0; transition: opacity .12s; }
.table tr:hover .acts, .table .acts:focus-within { opacity: 1; }
@media (pointer: coarse) { .table .acts { opacity: 1; } }
.table .primary { font-weight: 600; text-decoration: none; }
/* In a table a name sets its column's width rather than being cut short; machine values never wrap. */
.table .actor b, .table .actor small { overflow: visible; }
.table td.mono { white-space: nowrap; }
.table .sub { display: block; font-size: var(--t-sm); color: var(--ink-3); }

/* Rows that aren't a grid of columns: history, people on a task. */
.list { margin: 0; padding: 0; list-style: none; }
.list > li { display: flex; align-items: center; gap: var(--s-3); min-height: var(--row-h); padding: var(--s-2) var(--s-4);
             border-bottom: 1px solid var(--line); font-size: var(--t-md); }
.list > li:last-child { border-bottom: 0; }
.list .grow { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ------------------------------------------------------------ tabs, seg ---- */
.tabs { display: flex; gap: var(--s-5); border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.tabs a, .tabs button {
  display: inline-flex; align-items: center; gap: 6px; padding: var(--s-2) 0 10px; margin-bottom: -1px;
  border: 0; border-bottom: 2px solid transparent; background: none; cursor: pointer; white-space: nowrap;
  font: 500 var(--t-md) var(--font); color: var(--ink-2); text-decoration: none;
}
.tabs i { font-size: 15px; }
.tabs a:hover, .tabs button:hover { color: var(--ink); }
.tabs [aria-current="page"], .tabs [aria-selected="true"] { color: var(--ink); border-bottom-color: var(--ink); }
.tabs .count { font: 500 var(--t-xs) var(--mono); color: var(--ink-3); }

.segmented { display: inline-flex; padding: 2px; gap: 2px; border-radius: var(--r-2); background: var(--sunken); border: 1px solid var(--line); }
.segmented :is(button, a) { display: inline-flex; align-items: center; gap: 6px; height: calc(var(--ctl-h) - 6px); padding: 0 var(--s-3); border: 0; border-radius: var(--r-1);
                           background: none; color: var(--ink-2); font: 500 var(--t-sm) var(--font); cursor: pointer; text-decoration: none; }
.segmented :is(button, a):hover { color: var(--ink); }
.segmented :is([aria-pressed="true"], [aria-current="page"]) { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-1); }

/* ------------------------------------------------------- chips and state ----
   A chip names a status in mono caps. The state line names what is running,
   always with its word: running · queued · waiting · stalled · limited ·
   passed · failed · skipped · done. */
.chip { display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 6px; border-radius: var(--r-1);
        background: var(--sunken); border: 1px solid var(--line); color: var(--ink-2); white-space: nowrap;
        font: 500 var(--t-xs)/1 var(--mono); letter-spacing: .04em; text-transform: uppercase; vertical-align: middle; }
.chip i { font-size: 12px; }
.chip.ok     { background: var(--ok-wash);     border-color: transparent; color: var(--on-ok-wash); }
.chip.warn   { background: var(--warn-wash);   border-color: transparent; color: var(--on-warn-wash); }
.chip.danger { background: var(--danger-wash); border-color: transparent; color: var(--on-danger-wash); }
.chip.person { background: var(--person-wash); border-color: transparent; color: var(--on-person-wash); }
.chip.agent  { background: var(--agent-wash);  border-color: transparent; color: var(--on-agent-wash); }

.state { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; font: 500 var(--t-sm) var(--mono); color: var(--ink-2); }
.state::before { content: ""; width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--ink-3); }
.state.running { color: var(--ok); }
.state.running::before { background: var(--ok); animation: pulse 1.6s ease-in-out infinite; }
.state.queued::before, .state.skipped::before { background: none; box-shadow: inset 0 0 0 1.5px var(--ink-3); }
.state:is(.waiting, .stalled, .limited) { color: var(--warn); }
.state:is(.waiting, .limited)::before { background: var(--warn); }
.state.stalled::before { background: none; box-shadow: inset 0 0 0 2px var(--warn); }
.state.passed { color: var(--ok); }
.state:is(.passed, .done)::before { background: var(--ok); }
.state.failed { color: var(--danger); }
.state.failed::before { background: var(--danger); }
@keyframes pulse { 50% { box-shadow: 0 0 0 4px var(--ok-wash); } }

/* A running timer: a button that stops it, with a clock that ticks (data-since). */
.timer { font: 500 var(--t-sm) var(--mono); font-variant-numeric: tabular-nums; color: var(--ok); }

/* ----------------------------------------------------------------- meters ----
   A reading against its limit, on a native <meter min=0 max=100 low=80 high=95
   optimum=0>: ink while normal, warn past low, danger past high. The row above
   it says the reading in words. */
.meters { display: grid; gap: var(--s-3) var(--s-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); }
.reading { display: grid; gap: 5px; min-width: 0; }
.reading-head { display: flex; justify-content: space-between; gap: var(--s-2); font-size: var(--t-sm); color: var(--ink-3); }
.reading-head b { font: 500 var(--t-sm) var(--mono); color: var(--ink); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
meter { display: block; width: 100%; height: 6px; border: 0; border-radius: 3px; background: var(--sunken); box-shadow: inset 0 0 0 1px var(--line); appearance: none; }
meter::-webkit-meter-bar { height: 6px; border: 0; border-radius: 3px; background: var(--sunken); box-shadow: inset 0 0 0 1px var(--line); }
meter::-webkit-meter-optimum-value { background: var(--ink-2); border-radius: 3px; }
meter::-webkit-meter-suboptimum-value { background: var(--warn); border-radius: 3px; }
meter::-webkit-meter-even-less-good-value { background: var(--danger); border-radius: 3px; }
meter::-moz-meter-bar { background: var(--ink-2); border-radius: 3px; }
meter:-moz-meter-sub-optimum::-moz-meter-bar { background: var(--warn); }
meter:-moz-meter-sub-sub-optimum::-moz-meter-bar { background: var(--danger); }
meter.share::-webkit-meter-optimum-value { background: var(--ink-3); } /* a share of a total, not a limit */
meter.share::-moz-meter-bar { background: var(--ink-3); }

/* ---------------------------------------------------------------- actors ----
   People are circles and agents are squares, at every size. */
.avatar { display: inline-grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 50%;
          background: var(--person); color: var(--on-ink); font: 600 11px/1 var(--font); letter-spacing: .02em; overflow: hidden; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar.agent { border-radius: var(--r-2); background: var(--agent); }
.avatar.sm { width: 22px; height: 22px; font-size: 9px; }
.avatar.sm.agent { border-radius: 5px; }
.avatar.xs { width: 16px; height: 16px; font-size: 7px; }  /* inline in a line of text */
.avatar.xs.agent { border-radius: 4px; }
.avatar.lg { width: 40px; height: 40px; font-size: 14px; }
.avatar.lg.agent { border-radius: 9px; }
.avatars { display: inline-flex; }
.avatars .avatar + .avatar { margin-left: -6px; box-shadow: 0 0 0 2px var(--surface); }
.actor { display: inline-flex; align-items: center; gap: var(--s-2); min-width: 0; }
.actor > span:last-child { display: grid; min-width: 0; line-height: 1.3; }
.actor b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.actor small { font-size: var(--t-sm); color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* What runs an agent: harness · model, and where (ri-cloud-line or ri-server-line). */
.harness { display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 6px; border-radius: var(--r-1);
           background: var(--agent-wash); color: var(--on-agent-wash); font: 500 var(--t-xs) var(--mono); white-space: nowrap; }
.harness i { font-size: 12px; }

/* ------------------------------------------------------------- feedback ---- */
.note { display: flex; gap: var(--s-3); align-items: flex-start; padding: var(--s-3) var(--s-4); border-radius: var(--r-2);
        border: 1px solid var(--line); background: var(--surface); font-size: var(--t-md); }
.note > i { font-size: 17px; line-height: 1.2; color: var(--ink-3); }
.note > div { min-width: 0; flex: 1; display: grid; gap: var(--s-2); }
.note > .acts { flex: none; display: flex; align-self: center; } /* buttons at their size, at the end */
.note b { font-weight: 600; }
.note.ok     { background: var(--ok-wash);     border-color: transparent; color: var(--on-ok-wash); }
.note.warn   { background: var(--warn-wash);   border-color: transparent; color: var(--on-warn-wash); }
.note.danger { background: var(--danger-wash); border-color: transparent; color: var(--on-danger-wash); }
.note:is(.ok, .warn, .danger) > i { color: inherit; }

.toast { position: fixed; z-index: 90; left: 50%; bottom: var(--s-6); transform: translateX(-50%);
         display: flex; align-items: center; gap: var(--s-2); max-width: min(480px, calc(100vw - 32px));
         padding: var(--s-2) var(--s-4); border-radius: var(--r-2); background: var(--ink); color: var(--on-ink);
         box-shadow: var(--shadow-pop); font-size: var(--t-md); animation: toast-in .18s ease; }
.toast.danger { background: var(--danger); }
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, 8px); } }
@media (max-width: 860px) { .toast { bottom: calc(76px + env(safe-area-inset-bottom, 0px)); } }

.empty { display: grid; justify-items: center; gap: var(--s-2); padding: var(--s-10) var(--s-5); text-align: center; color: var(--ink-2); font-size: var(--t-md); }
.empty .mark { display: flex; gap: 5px; margin-bottom: var(--s-2); }
.empty .mark span { width: 12px; height: 12px; border-radius: 3px; background: var(--line-2); }
.empty .mark span:first-child { border-radius: 50%; }
.empty h3 { color: var(--ink); font-size: var(--t-base); }
.empty p { max-width: 46ch; }

.spinner { width: 16px; height: 16px; flex: none; border-radius: 50%; border: 2px solid var(--line-2); border-top-color: var(--ink); animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .state.running::before, .spinner, .toast { animation: none; }
  .sidebar, .switch .track, .switch .track::after { transition: none; }
}

/* Activity: who did what, newest first, time in mono on the right. */
.feed { margin: 0; padding: 0; list-style: none; }
.feed .unread { font-weight: 600; }
.feed li { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-2) var(--s-4); min-height: 44px;
           border-bottom: 1px solid var(--line); font-size: var(--t-md); }
.feed li:last-child { border-bottom: 0; }
.feed .what { flex: 1; min-width: 0; }
.feed time { font: 400 var(--t-xs) var(--mono); color: var(--ink-3); white-space: nowrap; }
.feed .kind { width: 24px; height: 24px; flex: none; display: grid; place-items: center; border-radius: var(--r-1);
              background: var(--sunken); color: var(--ink-2); font-size: 14px; }

/* ------------------------------------------------------- dialog, sheet ----
   <dialog> gives focus trapping and Esc. On a phone it becomes a bottom sheet. */
dialog {
  width: min(520px, calc(100vw - 32px)); max-height: calc(100dvh - 64px); padding: 0;
  border: 1px solid var(--line); border-radius: var(--r-4); background: var(--raised); color: var(--ink); box-shadow: var(--shadow-pop);
}
dialog::backdrop { background: var(--scrim); }
dialog > form, dialog > .dialog { display: flex; flex-direction: column; max-height: inherit; }
.dialog-head { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-4) var(--s-5) 0; }
.dialog-head h2 { font-size: var(--t-lg); }
.dialog-head .btn-icon { margin-left: auto; margin-right: calc(-1 * var(--s-2)); }
.dialog-body { display: grid; gap: var(--s-4); padding: var(--s-4) var(--s-5); overflow-y: auto; }
.dialog-foot { display: flex; justify-content: flex-end; gap: var(--s-2); padding: var(--s-3) var(--s-5) var(--s-5); }
.dialog-foot > .btn-danger:first-child { margin-right: auto; } /* a destructive action stands apart, on the left */
dialog.wide { width: min(760px, calc(100vw - 32px)); }
@media (max-width: 860px) {
  dialog:not(.workspace) { width: 100vw; max-width: 100vw; margin: auto 0 0; border-radius: var(--r-4) var(--r-4) 0 0; border-bottom: 0;
                           padding-bottom: env(safe-area-inset-bottom, 0px); }
  .dialog-foot .btn { flex: 1; }
}

/* A small menu: <details class="menu"><summary class="btn">…</summary><div>…</div></details> */
.menu { position: relative; }
.menu > summary { list-style: none; }
.menu > summary::-webkit-details-marker { display: none; }
.menu > div { position: absolute; z-index: 40; right: 0; top: calc(100% + 4px); min-width: 200px; padding: var(--s-1);
              background: var(--raised); border: 1px solid var(--line); border-radius: var(--r-3); box-shadow: var(--shadow-pop); }
.menu.up > div { top: auto; bottom: calc(100% + 4px); left: 0; right: auto; }
.menu > div :is(a, button) { display: flex; width: 100%; align-items: center; gap: var(--s-2); height: 32px; padding: 0 var(--s-2);
                             border: 0; border-radius: var(--r-2); background: none; color: var(--ink); text-decoration: none;
                             font: 400 var(--t-md) var(--font); cursor: pointer; text-align: left; }
.menu > div :is(a, button):hover { background: var(--hover); }
.menu > div hr { margin: var(--s-1) 0; }

/* --------------------------------------------------------------- git refs ---- */
.ref { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle;
       padding: 0 6px; border-radius: var(--r-1); background: var(--sunken); border: 1px solid var(--line);
       font: 400 var(--t-sm)/18px var(--mono); color: var(--ink); text-decoration: none; }
a.ref:hover { border-color: var(--ink-3); }
.refs { display: inline-flex; align-items: center; gap: var(--s-1); flex-wrap: wrap; min-width: 0; color: var(--ink-3); }
.sha { font: 400 var(--t-sm) var(--mono); color: var(--ink-2); text-decoration: none; }
a.sha:hover { color: var(--ink); text-decoration: underline; }
.stat { display: inline-flex; gap: var(--s-2); font: 500 var(--t-sm) var(--mono); white-space: nowrap; }
.stat .add { color: var(--ok); }
.stat .del { color: var(--danger); }
.key { font: 500 var(--t-sm) var(--mono); color: var(--ink-3); }
/* Which branch a page shows: a select with the branch icon, sized to its content. */
.ref-picker { display: inline-flex; align-items: center; gap: var(--s-1); margin: 0; color: var(--ink-3); }
.ref-picker select { width: auto; max-width: 280px; font: 400 var(--t-sm) var(--mono); }
.ref-picker .ts-wrapper { width: 240px; }
.ref-picker .ts-control, .ref-picker .ts-dropdown { font: 400 var(--t-sm) var(--mono); }

pre.block { margin: 0; padding: var(--s-3) var(--s-4); overflow-x: auto; border-radius: var(--r-2); background: var(--sunken);
            border: 1px solid var(--line); font-size: var(--t-sm); line-height: 1.6; }
pre.prose { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font-size: var(--t-sm); line-height: 1.65; }
pre.prose.sans { font-family: var(--font); font-size: var(--t-md); } /* text people wrote, kept as written */

/* ------------------------------------------------------- code and diffs ----
   One table for a file and for a diff: rows tr.add / tr.del / tr.hunk / tr.comments.
   Line numbers come from data-ln, so selecting code never copies them. */
.diff-file { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-3); }
.diff-file + .diff-file { margin-top: var(--s-3); }
.diff-file > summary { position: sticky; top: 52px; z-index: 2; display: flex; align-items: center; gap: var(--s-3);
                       min-height: 44px; padding: var(--s-2) var(--s-4); list-style: none; cursor: pointer;
                       background: var(--surface); border-radius: var(--r-3) var(--r-3) 0 0; }
.ws-panel .diff-file > summary { top: calc(-1 * var(--s-4)); } /* in the workspace the panel scrolls, not the page: stick to its top edge, over its padding */
.diff-file[open] > summary { border-bottom: 1px solid var(--line); }
.diff-file:not([open]) > summary { border-radius: var(--r-3); }
.diff-file > summary::-webkit-details-marker { display: none; }
.diff-file > summary::before { content: ""; width: 6px; height: 6px; flex: none; border: solid var(--ink-3); border-width: 0 1.5px 1.5px 0; transform: rotate(-45deg); transition: transform .12s; }
.diff-file[open] > summary::before { transform: rotate(45deg); }
.diff-file .path { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 500 var(--t-md) var(--mono); }
.diff-file > .table-wrap { border-radius: 0 0 var(--r-3) var(--r-3); }

.lines { width: 100%; border-collapse: collapse; font: 400 12.5px/1.6 var(--mono); tab-size: 4; }
.lines td { padding: 0 var(--s-3); vertical-align: top; }
.lines .ln { width: 1%; padding: 0 var(--s-2); text-align: right; white-space: nowrap; user-select: none; color: var(--ink-3); cursor: pointer; }
.lines .ln::before { content: attr(data-ln); }
.lines .ln:hover { color: var(--ink); }
.lines .code { white-space: pre-wrap; overflow-wrap: anywhere; padding-left: calc(var(--s-3) + 1ch); }
.lines tr.add { background: var(--add-bg); }
.lines tr.del { background: var(--del-bg); }
.lines tr.add .ln { background: var(--add-ln); }
.lines tr.del .ln { background: var(--del-ln); }
.lines tr.add .code::before { content: "+"; display: inline-block; width: 1ch; margin-left: -1.5ch; margin-right: .5ch; color: var(--ok); }
.lines tr.del .code::before { content: "−"; display: inline-block; width: 1ch; margin-left: -1.5ch; margin-right: .5ch; color: var(--danger); }
.lines ins { background: var(--add-hi); text-decoration: none; border-radius: 2px; }
.lines del { background: var(--del-hi); text-decoration: none; border-radius: 2px; }
.lines tr.hunk td { padding-block: var(--s-1); background: var(--sunken); color: var(--ink-3); }
.lines tr.comments td { padding: var(--s-3) var(--s-4); background: var(--surface); border-block: 1px solid var(--line);
                        font: 400 var(--t-md) var(--font); white-space: normal; }

/* --------------------------------------------------------------- conflict ----
   Three-way merge for one file: ours (the target), base, theirs (the task). */
.conflict { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); background: var(--surface);
            border: 1px solid var(--line); border-radius: var(--r-3); overflow: hidden; }
.conflict > section { --side: var(--line-2); min-width: 0; border-left: 1px solid var(--line); }
.conflict > section:first-child { border-left: 0; }
.conflict > .ours   { --side: var(--ours); }
.conflict > .theirs { --side: var(--theirs); }
.conflict header { display: flex; align-items: center; gap: var(--s-2); padding: var(--s-2) var(--s-3);
                   border-bottom: 1px solid var(--line); box-shadow: inset 0 2px 0 var(--side); }
.conflict header .ref { margin-left: auto; }
.conflict pre { margin: 0; padding: var(--s-3); overflow-x: auto; font-size: 12.5px; line-height: 1.6; }
.conflict mark { background: var(--warn-wash); color: inherit; border-radius: 2px; }
.hunk-bar { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; padding: var(--s-2) var(--s-3);
            border-radius: var(--r-2); background: var(--warn-wash); color: var(--on-warn-wash); font-size: var(--t-md); }
.hunk-bar b { margin-right: auto; font-weight: 600; }
textarea.code { font: 400 12.5px/1.6 var(--mono); min-height: 180px; tab-size: 4; }

/* One conflict at a time: the agreed lines around it (the rest folded), each side's lines numbered,
   and a choice. The side not kept dims; "Write it" opens an editor holding both. */
.cfile .panel-head { flex-wrap: wrap; }
.cview { border-top: 1px solid var(--line); background: var(--surface); }
.clines { display: grid; grid-template-columns: 4em max-content; overflow-x: auto; font: 400 12.5px/1.6 var(--mono); }
.clines .ln { padding-right: var(--s-3); text-align: right; color: var(--ink-3); user-select: none; }
.clines code { white-space: pre; padding-right: var(--s-4); font: inherit; background: none; }
.cagreed { padding-block: var(--s-1); color: var(--ink-2); }
.cfold summary { display: flex; align-items: center; gap: var(--s-2); margin: 2px 0; padding: 2px var(--s-4); cursor: pointer; list-style: none;
                 background: var(--sunken); color: var(--ink-3); font-size: var(--t-sm); }
.cfold summary::-webkit-details-marker { display: none; }
.cfold summary:hover { color: var(--ink); }
.cconf { margin: var(--s-2) var(--s-3); border: 1px solid var(--warn); border-radius: var(--r-2); overflow: hidden; }
.cconf-head { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; padding: var(--s-2) var(--s-3); background: var(--warn-wash); color: var(--on-warn-wash); font-size: var(--t-md); }
.cconf-head b { margin-right: auto; }
.cpick label { position: relative; display: inline-flex; align-items: center; gap: 6px; height: calc(var(--ctl-h) - 6px); padding: 0 var(--s-3);
               border-radius: var(--r-1); font-size: var(--t-sm); font-weight: 500; color: var(--ink-2); cursor: pointer; }
.cpick input { position: absolute; opacity: 0; pointer-events: none; }
.cpick label:has(input:checked) { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-1); }
.cpick label:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 1px; }
.dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.dot.ours { background: var(--ours); } .dot.theirs { background: var(--theirs); }
.cside { border-top: 1px solid var(--line); transition: opacity .15s; }
.cside.ours { background: color-mix(in srgb, var(--ours) 7%, var(--surface)); box-shadow: inset 3px 0 0 var(--ours); }
.cside.theirs { background: color-mix(in srgb, var(--theirs) 7%, var(--surface)); box-shadow: inset 3px 0 0 var(--theirs); }
.cside-label { display: flex; align-items: center; gap: var(--s-2); padding: var(--s-1) var(--s-3); font-size: var(--t-sm); color: var(--ink-2); }
.cside-label .kept { display: none; margin-left: auto; color: var(--ok); font-size: 16px; }
.cside .clines { padding-bottom: var(--s-1); }
.cnone { margin: 0; padding: 0 var(--s-3) var(--s-2) calc(4em + var(--s-3)); font-size: var(--t-sm); color: var(--ink-3); font-style: italic; }
.cedit { display: none; padding: var(--s-2) var(--s-3); border-top: 1px solid var(--line); background: var(--surface); }
.cedit textarea { width: 100%; min-height: 0; }
.cconf:has(input[value="ours"]:checked) .cside.theirs,
.cconf:has(input[value="theirs"]:checked) .cside.ours,
.cconf:has(input[value="edit"]:checked) .cside { opacity: .4; }
.cconf:has(input[value="ours"]:checked) .cside.ours .kept,
.cconf:has(input[value="theirs"]:checked) .cside.theirs .kept,
.cconf:has(input[value="both"]:checked) .cside .kept { display: inline; }
.cconf:has(input[value="edit"]:checked) .cedit { display: block; }
.cconf:has(.cpick input:checked) { border-color: var(--line-2); }
.cconf:has(.cpick input:checked) .cconf-head { background: var(--sunken); color: var(--ink); }
.cfile.parsed:not(:has([data-whole]:checked)) .cwhole,
.cfile:has([data-whole]:checked) .cview { display: none; }
@media (max-width: 860px) {
  .conflict { grid-template-columns: minmax(0, 1fr); }
  .conflict > section { border-left: 0; border-top: 1px solid var(--line); }
  .conflict > section:first-child { border-top: 0; }
}

/* -------------------------------------------------------------- terminal ----
   A live harness session; xterm.js mounts in .term-body. The frame re-declares
   the theme tokens inside itself, so anything in its head renders dark. */
.term {
  --surface: var(--term-bg); --sunken: #161A1F; --raised: #1B1F24; --line: var(--term-line); --line-2: #343A43;
  --ink: var(--term-fg); --ink-2: #B3B8C2; --ink-3: var(--term-dim); --on-ink: #0D0F12; --hover: rgba(230, 232, 236, .07);
  --ok: #4ADE9B; --ok-wash: #10261D; --warn: #F5B84A; --danger: #F47C88; --focus: #7AA7F7;
  --agent: #A48BFF; --agent-wash: #1E1838; --on-agent-wash: #C6B7FF;
  color-scheme: dark;
  display: flex; flex-direction: column; min-width: 0; min-height: 320px; overflow: hidden;
  background: var(--term-bg); color: var(--term-fg); border: 1px solid var(--term-line); border-radius: var(--r-3);
}
.term-head { display: flex; align-items: center; gap: var(--s-2) var(--s-3); flex-wrap: wrap; min-height: 40px;
             padding: var(--s-1) var(--s-2) var(--s-1) var(--s-3); border-bottom: 1px solid var(--term-line); font-size: var(--t-sm); }
.term-head .acts { margin-left: auto; }
.term-head time { font: 400 var(--t-xs) var(--mono); color: var(--term-dim); }
.term-body { flex: 1; min-height: 0; padding: var(--s-2) var(--s-3); overflow: auto; font: 400 12.5px/1.5 var(--mono); white-space: pre-wrap; }
.term-body .xterm { height: 100%; }
.term.driving { border-color: var(--person); box-shadow: 0 0 0 1px var(--person); }
.term.tall { min-height: calc(100dvh - 260px); }
.term-body .xterm { height: 100%; }
.term-body .xterm-viewport { background: transparent !important; }
.terms { display: grid; gap: var(--s-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); }

/* ------------------------------------------------------------ merge box ---- */
.pr-title { display: flex; align-items: baseline; gap: var(--s-2); flex-wrap: wrap; }
.pr-title .num { font: 400 var(--t-xl) var(--mono); color: var(--ink-3); }
.mergebox { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-3); }
.mergebox > .gate { display: flex; align-items: flex-start; gap: var(--s-3); padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--line); }
.mergebox > .gate > div { flex: 1; min-width: 0; }
.mergebox > form.gate { align-items: center; flex-wrap: wrap; } /* the review row: a note, then its buttons */
.mergebox > .gate b { font-weight: 600; font-size: var(--t-md); }
.mergebox > .gate p { font-size: var(--t-md); color: var(--ink-2); }
.mark { width: 24px; height: 24px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--sunken); color: var(--ink-3); font-size: 14px; }
.mark.ok     { background: var(--ok-wash);     color: var(--ok); }
.mark.warn   { background: var(--warn-wash);   color: var(--warn); }
.mark.danger { background: var(--danger-wash); color: var(--danger); }
.mergebox footer { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; padding: var(--s-3) var(--s-4);
                   background: var(--sunken); border-radius: 0 0 var(--r-3) var(--r-3); font-size: var(--t-md); color: var(--ink-2); }
.mergebox footer .acts { margin-left: auto; }
.mergebox footer form.merge { flex: 1 1 100%; display: grid; gap: var(--s-3); }
.mergebox footer form.merge .acts { display: flex; justify-content: flex-end; gap: var(--s-2); }
.merge-msg textarea { font-size: var(--t-sm); background: var(--surface); }
.checks { margin: var(--s-2) 0 0; padding: 0; list-style: none; display: grid; gap: 2px; }
.checks li { display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; align-items: center; gap: var(--s-3); font-size: var(--t-md); }
.checks .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.checks time { font: 400 var(--t-xs) var(--mono); color: var(--ink-3); }

/* ------------------------------------------------------------------ board ---- */
.board { display: flex; gap: var(--s-3); overflow-x: auto; align-items: flex-start; padding-bottom: var(--s-2); scroll-snap-type: x proximity; }
.column { flex: 0 0 288px; display: grid; gap: var(--s-2); scroll-snap-align: start; }
.column > header { display: flex; align-items: center; gap: var(--s-2); padding: 0 var(--s-1); height: 32px; }
.column > header b { font-size: var(--t-md); font-weight: 600; }
.column > header .count { font: 500 var(--t-xs) var(--mono); color: var(--ink-3); }
.column > header .btn { margin-left: auto; }
/* The cards of a column; also where a dragged card lands, so it keeps a height when empty. */
.column > .cards { display: grid; gap: var(--s-2); align-content: start; min-height: 64px; padding-bottom: var(--s-6); border-radius: var(--r-3); }
.column > .cards:not(:has(.card)) { border: 1px dashed var(--line-2); }
.column > .more { justify-self: center; margin-top: calc(-1 * var(--s-5)); }
.card { display: grid; gap: var(--s-2); padding: var(--s-3); background: var(--surface); border: 1px solid var(--line);
        border-radius: var(--r-2); box-shadow: var(--shadow-1); cursor: pointer; text-decoration: none; color: var(--ink); }
.card:hover { border-color: var(--line-2); }
.card .title { font-size: var(--t-md); font-weight: 500; line-height: 1.4;
               display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.card .meta { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; font: 400 var(--t-xs) var(--mono); color: var(--ink-3); }
.card .meta > span { display: inline-flex; align-items: center; gap: 3px; }
.card .meta i { font-size: 13px; }
.card .meta .warn { color: var(--warn); }
.card .meta .bad { color: var(--danger); }
.card .meta .avatars { margin-left: auto; }
.card .meta .avatars + .avatars.qc { margin-left: 0; }
.card .meta .avatars.qc { gap: 3px; align-items: center; }
.card.sortable-ghost { opacity: .4; }
@media (max-width: 860px) { .column { flex-basis: 84vw; } }

/* -------------------------------------------------------------- workspace ----
   The task: its conversation beside its work. Full screen with a dock on a phone. */
dialog.workspace { width: min(1440px, calc(100vw - 32px)); height: calc(100dvh - 32px); max-height: none; overflow: hidden; }
dialog.workspace[open] { display: flex; flex-direction: column; }
/* The same workspace opened from a link, as a page inside the shell. */
.workspace.page { display: flex; flex-direction: column; height: calc(100dvh - 52px - 2 * var(--s-6)); min-height: 520px; overflow: hidden;
                  background: var(--raised); border: 1px solid var(--line); border-radius: var(--r-4); }
@media (max-width: 860px) { .workspace.page { height: calc(100dvh - 52px - 64px - 2 * var(--s-4)); min-height: 0; border-radius: var(--r-3); } }
.ws-head { display: flex; align-items: center; gap: var(--s-2) var(--s-3); flex-wrap: wrap; padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--line); }
.ws-head h2 { flex: 1 1 280px; min-width: 0; font-size: var(--t-lg); }
.ws-sub, .ws-fields { display: contents; } /* the task's controls: in the head's line; their own bar on a phone */
.ws-body { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(300px, 380px) minmax(0, 1fr); }
.ws-side { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--line); background: var(--canvas); }
.ws-side > .thread { flex: 1; overflow-y: auto; padding: var(--s-4); }
.ws-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.ws-main > .tabs { padding: 0 var(--s-4); }
.ws-panel { flex: 1; min-height: 0; overflow: auto; padding: var(--s-4); }
.dock { display: none; }
@media (max-width: 860px) {
  dialog.workspace { width: 100vw; height: 100dvh; max-width: none; margin: 0; border: 0; border-radius: 0; }
  /* The head: key, title and close; under it a bar with status, timer and people. */
  .ws-head { gap: var(--s-2); padding: calc(var(--s-2) + env(safe-area-inset-top, 0px)) var(--s-3) 0; }
  .ws-sub { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); flex: 1 1 100%; order: 1; margin: 0 calc(-1 * var(--s-3));
            padding: var(--s-2) var(--s-3); border-top: 1px solid var(--line); background: var(--canvas); }
  .ws-head > .key { order: -3; }
  .ws-head h2 { order: -2; flex: 1 1 0; font-size: var(--t-md); font-weight: 600; line-height: 1.35;
                display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .ws-head > [data-ws-close] { order: -1; }
  .ws-head .ts-wrapper.fit { min-width: 136px; }
  .ws-head .ts-control { min-height: 32px; padding-block: 1px; font-size: var(--t-sm); }
  .ws-sub .avatars { margin-left: auto; }
  /* The thread on a phone: messages first; what happened in quiet, left-aligned lines. */
  .ws-side > .thread { padding: var(--s-3); gap: var(--s-3); }
  /* A run of what happened folds to its latest line, in the same quiet style. */
  .ws-side .events { display: grid; gap: var(--s-3); }
  .ws-side .events:not(.open) > .event:not(:last-child) { display: none; }
  .ws-side .events > .more { display: flex; align-items: center; gap: var(--s-2); padding: 0; border: 0; background: none; cursor: pointer;
                             font: 500 var(--t-xs)/1.5 var(--mono); color: var(--ink-2); }
  .ws-side .events > .more::before, .ws-side .events > .more::after { content: ""; flex: 1 0 16px; border-top: 1px dashed var(--line-2); }
  .ws-side .events.open > .more { display: none; }
  .msg { max-width: 100%; }
  .composer { padding: var(--s-2) var(--s-3); }
  .ws-panel { padding: var(--s-3); }
  /* The review row: the note on its own line, the buttons under it. */
  .mergebox > form.gate > input { flex: 1 1 calc(100% - 40px); }
  .mergebox > form.gate > .acts { flex: 1 1 100%; justify-content: flex-end; }
  .mergebox footer .acts { flex: 1 1 100%; justify-content: flex-end; }
  .ws-body { grid-template-columns: minmax(0, 1fr); }
  .ws-side { border-right: 0; }
  .ws-body[data-pane="chat"] > .ws-main, .ws-body:not([data-pane="chat"]) > .ws-side { display: none; }
  .ws-main > .tabs { display: none; }
  .dock { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom, 0px); }
  .dock :is(button, a) { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: var(--s-2) 0; border: 0; background: none;
                 font: 500 var(--t-xs) var(--font); color: var(--ink-3); cursor: pointer; text-decoration: none; }
  .dock i { font-size: 20px; }
  .dock [aria-selected="true"] { color: var(--ink); }
  .dock button { position: relative; }
  .dock .count { position: absolute; top: 4px; left: calc(50% + 8px); min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px;
                 background: var(--ink); color: var(--on-ink); font: 600 10px/16px var(--mono); }
}

/* ------------------------------------------------------------------ thread ---- */
.thread { display: flex; flex-direction: column; gap: var(--s-4); }
.msg { display: flex; gap: var(--s-2); max-width: 92%; }
.msg > div { display: grid; gap: 4px; min-width: 0; }
.msg .who { display: flex; align-items: center; gap: var(--s-2); font-size: var(--t-sm); font-weight: 600; }
.msg .who time { font: 400 var(--t-xs) var(--mono); color: var(--ink-3); }
.msg .bubble { padding: var(--s-2) var(--s-3); border-radius: 2px var(--r-3) var(--r-3) var(--r-3); background: var(--surface);
               border: 1px solid var(--line); font-size: var(--t-md); overflow-wrap: anywhere; }
.msg.agent .bubble { background: var(--agent-wash); border-color: transparent; }
.msg.mine { margin-left: auto; flex-direction: row-reverse; }
.msg.mine > div { justify-items: end; }
.msg.mine .bubble { border-radius: var(--r-3) 2px var(--r-3) var(--r-3); background: var(--ink); color: var(--on-ink); border-color: transparent; }
details.call { font-size: var(--t-sm); }
details.call > summary { cursor: pointer; font-family: var(--mono); color: var(--ink-2); }
details.call pre { margin: var(--s-1) 0 0; padding: var(--s-2); max-height: 220px; overflow: auto; background: var(--surface);
                   border-radius: var(--r-1); white-space: pre-wrap; }
.event { display: flex; align-items: center; gap: var(--s-2); font: 400 var(--t-xs)/1.5 var(--mono); color: var(--ink-3); text-align: center; text-wrap: balance; }
.event::before, .event::after { content: ""; flex: 1 0 16px; height: 1px; background: var(--line); }
.event i { font-size: 13px; }
.events { display: contents; } /* a run of events: folded only on a phone */
.events > .more { display: none; }
.ask { display: grid; gap: var(--s-2); padding: var(--s-3); border-radius: var(--r-3); background: var(--warn-wash); color: var(--on-warn-wash); font-size: var(--t-md); }
.ask b { display: flex; align-items: center; gap: var(--s-2); font-weight: 600; }
.ask form { display: flex; gap: var(--s-2); }
/* A mention of someone real: person blue, agent violet, like their avatars. */
.mention { padding: 0 3px; border-radius: var(--r-1); background: var(--person-wash); color: var(--on-person-wash); font-weight: 500; }
.mention.agent { background: var(--agent-wash); color: var(--on-agent-wash); }
/* Suggestions while typing @ in a composer: people and agents to mention, those on the task first. */
.suggest { position: absolute; z-index: 40; left: var(--s-3); right: var(--s-3); bottom: calc(100% + 4px); max-height: 264px; overflow-y: auto;
           margin: 0; padding: var(--s-1); list-style: none; background: var(--raised); border: 1px solid var(--line);
           border-radius: var(--r-3); box-shadow: var(--shadow-pop); }
.suggest li { display: flex; align-items: center; gap: var(--s-2); min-height: 36px; padding: 0 var(--s-2); border-radius: var(--r-2);
              font-size: var(--t-md); cursor: pointer; }
.suggest li[aria-selected="true"] { background: var(--hover); }
.suggest li small { margin-left: auto; font: 400 var(--t-xs) var(--mono); color: var(--ink-3); white-space: nowrap; }
/* A reply drafted for a person to check: edited in place, then sent. */
.msg.draft { max-width: 100%; }
.msg.draft > form { flex: 1; min-width: 0; padding: var(--s-3); border: 1px dashed var(--warn); border-radius: var(--r-3); background: var(--warn-wash); }
.msg.draft textarea { background: var(--surface); }
.msg.internal .bubble { background: var(--sunken); border-style: dashed; border-color: var(--line-2); } /* only people on our side see it */
.composer { position: relative; display: flex; align-items: flex-end; gap: var(--s-2); padding: var(--s-3); border-top: 1px solid var(--line); background: var(--surface); }
.composer { flex-wrap: wrap; }
.composer .attachments { flex-basis: 100%; }
.composer textarea { flex: 1; min-height: var(--ctl-h); max-height: 160px; padding-block: 6px; resize: none; field-sizing: content; }

/* -------------------------------------------------------------- automation ---- */
.rule { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; padding: var(--s-3) var(--s-4); }
.rule + .rule { border-top: 1px solid var(--line); }
.rule .flow { flex: 1 1 420px; min-width: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: var(--t-md); color: var(--ink-2); }
.rule .runs { font: 400 var(--t-xs) var(--mono); color: var(--ink-3); white-space: nowrap; }
.rule.off .flow { opacity: .5; }
.rule .rule-note { flex-basis: 100%; }
.tok { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 var(--s-2); border-radius: var(--r-1);
       border: 1px solid var(--line-2); background: var(--surface); color: var(--ink); font: 500 var(--t-sm) var(--font); white-space: nowrap; }
.tok i { font-size: 13px; }
.tok.on    { background: var(--ink); border-color: var(--ink); color: var(--on-ink); } /* the trigger */
.tok.agent { background: var(--agent-wash);  border-color: transparent; color: var(--on-agent-wash); }

/* Capacity of a model endpoint: a square per session it can run at once. */
.slots { display: inline-flex; align-items: center; gap: 3px; flex-wrap: wrap; }
.slots > span { width: 12px; height: 12px; border-radius: 2px; box-shadow: inset 0 0 0 1px var(--line-2); }
.slots > span.busy    { background: var(--agent); box-shadow: none; }
.slots > span.limited { background: var(--warn); box-shadow: none; }
.slots > small { margin-left: var(--s-2); font: 400 var(--t-xs) var(--mono); color: var(--ink-3); }

/* ----------------------------------------------------------------- solo ----
   Sign in, first run, offline: one panel alone on the canvas. */
.solo { min-height: 100dvh; display: grid; place-items: center; padding: var(--s-6) var(--s-4); }
.solo > div { width: min(400px, 100%); display: grid; gap: var(--s-5); }
.solo .brand { padding: 0; font-size: var(--t-lg); }
.solo.embed { min-height: 0; place-items: start stretch; padding: var(--s-4); background: var(--surface); } /* inside a website's support widget */
.solo.embed > div { width: 100%; gap: var(--s-4); }
body:has(> .solo.embed) { background: var(--surface); }
.solo .brand img { width: 28px; height: 28px; border-radius: 7px; }

/* ------------------------------------------------------------------- brain ---- */
/* Each kind of memory has its hue, from the meaning colours: --k for ink, --kw for its wash. */
.kind-decision   { --k: var(--person); --kw: var(--person-wash); }
.kind-convention { --k: var(--ok);     --kw: var(--ok-wash); }
.kind-gotcha     { --k: var(--warn);   --kw: var(--warn-wash); }
.kind-runbook    { --k: var(--ink);    --kw: var(--sunken); }
.kind-fix        { --k: var(--danger); --kw: var(--danger-wash); }
.kind-faq        { --k: var(--theirs); --kw: color-mix(in srgb, var(--theirs) 11%, var(--surface)); }
.kind-preference { --k: var(--agent);  --kw: var(--agent-wash); }
.kind-map        { --k: color-mix(in srgb, var(--ok) 55%, var(--theirs)); --kw: color-mix(in srgb, var(--ok) 9%, var(--surface)); }
.kind-review     { --k: color-mix(in srgb, var(--agent) 55%, var(--person)); --kw: color-mix(in srgb, var(--agent) 9%, var(--surface)); }
.kind-note       { --k: var(--ink-2);  --kw: var(--sunken); }
.k-icon { display: grid; place-items: center; flex: none; width: 22px; height: 22px; border-radius: var(--r-1); font-size: 13px;
          background: var(--kw, var(--sunken)); color: var(--k, var(--ink-2)); }
.k-icon.sm { width: 18px; height: 18px; font-size: 11px; }
.k-icon.lg { width: 38px; height: 38px; border-radius: var(--r-2); font-size: 20px; }
.agent-ink { color: var(--agent); }

:is(.brain-stats, .tiles) { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-3); }
:is(.brain-stats, .tiles) .tile { display: grid; gap: 2px; padding: var(--s-3) var(--s-4); background: var(--surface); border: 1px solid var(--line);
                     border-radius: var(--r-3); color: inherit; text-decoration: none; }
:is(.brain-stats, .tiles) a.tile:hover { border-color: var(--line-2); }
:is(.brain-stats, .tiles) .n { font: 600 var(--t-2xl)/1.1 var(--font); letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
:is(.brain-stats, .tiles) .l { display: flex; align-items: center; gap: 4px; font-size: var(--t-sm); color: var(--ink-2); }
:is(.brain-stats, .tiles) .tile.warn { background: var(--warn-wash); border-color: transparent; }
:is(.brain-stats, .tiles) .tile.warn :is(.n, .l) { color: var(--on-warn-wash); }

.brain-search { position: relative; min-width: 220px; }
.brain-search > i { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--ink-3); pointer-events: none; }
.brain-search input { width: 100%; padding-left: 32px; }

.brain { display: grid; grid-template-columns: 196px minmax(0, 1fr); gap: var(--s-4); align-items: start; }
@media (min-width: 1200px) { .brain { grid-template-columns: 196px minmax(0, 1fr) minmax(320px, 400px); } }
.brain-kinds { display: grid; gap: 2px; position: sticky; top: var(--s-4); }
.brain-kinds a { display: flex; align-items: center; gap: var(--s-2); height: 34px; padding: 0 var(--s-2); border-radius: var(--r-2);
                 color: var(--ink-2); font-size: var(--t-md); text-decoration: none; white-space: nowrap; }
.brain-kinds a:hover { background: var(--hover); color: var(--ink); }
.brain-kinds a[aria-current] { background: var(--surface); color: var(--ink); font-weight: 500; box-shadow: var(--shadow-1); }
.brain-kinds a.none:not([aria-current]) { opacity: .5; }
.brain-kinds .count { margin-left: auto; font: 500 var(--t-xs) var(--mono); color: var(--ink-3); }

.brain-list { display: grid; gap: var(--s-2); min-width: 0; }
.mem { display: flex; gap: var(--s-3); padding: var(--s-3) var(--s-4); background: var(--surface); border: 1px solid var(--line);
       border-radius: var(--r-3); color: inherit; text-decoration: none; transition: border-color .12s, box-shadow .12s; }
.mem:hover { border-color: var(--line-2); box-shadow: var(--shadow-1); }
.mem.on { border-color: var(--k); box-shadow: inset 3px 0 0 var(--k), var(--shadow-1); }
.mem.stale { border-color: color-mix(in srgb, var(--warn) 45%, var(--line)); }
.mem.retired { opacity: .7; }
.mem > .k-icon { width: 32px; height: 32px; border-radius: var(--r-2); font-size: 16px; }
.mem-main { flex: 1; min-width: 0; display: grid; gap: 3px; }
.mem-top { display: flex; align-items: center; gap: var(--s-2); min-height: 20px; }
.mem-top time { margin-left: auto; font: 400 var(--t-xs) var(--mono); color: var(--ink-3); white-space: nowrap; }
.mem-kind { font: 600 var(--t-xs)/1 var(--font); letter-spacing: .05em; text-transform: uppercase; color: var(--k, var(--ink-3)); }
.mem-title { font-size: var(--t-base); font-weight: 600; line-height: 1.35; }
.mem-body { font-size: var(--t-md); line-height: 1.5; color: var(--ink-2); white-space: pre-line; overflow: hidden;
            display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.mem-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--s-3); margin-top: 3px; font-size: var(--t-xs); color: var(--ink-3); }
.mem-meta > span { display: inline-flex; align-items: center; gap: 4px; min-width: 0; }
.mem-meta .mono { font-family: var(--mono); }
.mem-meta i { font-size: 12px; }
.mem-meta .by.agent { color: var(--on-agent-wash); }

.brain-detail { position: sticky; top: var(--s-4); min-width: 0; }
.mem-detail { overflow: hidden; }
.mem-detail-head { display: grid; gap: var(--s-2); padding: var(--s-4); border-bottom: 1px solid var(--line);
                   background: color-mix(in srgb, var(--kw) 70%, var(--surface)); }
.mem-detail-head h2 { font-size: var(--t-xl); line-height: 1.25; overflow-wrap: anywhere; }
.mem-detail-head .row { align-items: flex-start; flex-wrap: nowrap; }
.mem-detail > .note { margin: var(--s-3) var(--s-4) 0; }
.mem-detail .note .acts { margin-top: var(--s-2); }
.mem-text { white-space: pre-wrap; overflow-wrap: anywhere; font-size: var(--t-base); line-height: 1.6; }
.mem-detail .mem-facts { border-top: 1px solid var(--line); }
.mem-detail .panel-foot { display: flex; align-items: center; gap: var(--s-2); }
.brain-back { display: none; justify-self: start; }

.brain-how ol { list-style: none; margin: 0; padding: var(--s-1) var(--s-4) var(--s-4); display: grid; gap: var(--s-4); }
.brain-how li { display: flex; gap: var(--s-3); }
.brain-how .step { display: grid; place-items: center; flex: none; width: 22px; height: 22px; border-radius: 50%;
                   background: var(--ink); color: var(--on-ink); font: 600 var(--t-xs) var(--mono); }
.brain-how li b { display: block; font-size: var(--t-md); margin-bottom: 2px; }
.brain-how li span:not(.step) { font-size: var(--t-sm); line-height: 1.5; color: var(--ink-2); }
.brain-legend { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-3); border-top: 1px solid var(--line); }
.brain-legend > span { display: inline-flex; align-items: center; gap: 6px; font-size: var(--t-sm); color: var(--ink-2); }

.kind-pick { display: flex; flex-wrap: wrap; gap: 6px; }
.kind-pick label { position: relative; display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 var(--s-2) 0 6px;
                   border: 1px solid var(--line-2); border-radius: var(--r-2); background: var(--surface); font-size: var(--t-sm); font-weight: 400; cursor: pointer; }
.kind-pick input { position: absolute; opacity: 0; pointer-events: none; }
.kind-pick label:hover { border-color: var(--ink-3); }
.kind-pick label:has(input:checked) { border-color: var(--k); background: var(--kw); color: var(--k); font-weight: 500; }
.kind-pick label:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 1px; }

/* Narrower: the chosen memory takes the list's place, with a way back. */
@media (max-width: 1199px) {
  .brain-detail { display: none; }
  .brain.has-detail { grid-template-columns: minmax(0, 1fr); }
  .brain.has-detail > :is(.brain-kinds, .brain-list) { display: none; }
  .brain.has-detail > .brain-detail { display: block; position: static; max-width: 760px; }
  .brain-back { display: inline-flex; }
  .brain-close { display: none; }
}
@media (max-width: 860px) {
  .brain { grid-template-columns: minmax(0, 1fr); }
  :is(.brain-stats, .tiles) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .brain-kinds { position: static; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 0 calc(-1 * var(--s-4)); padding: 0 var(--s-4) 2px; }
  .brain-kinds a { flex: none; height: 32px; border: 1px solid var(--line); background: var(--surface); }
  .brain-kinds a[aria-current] { border-color: var(--ink); }
  .brain-tools .segmented { width: 100%; overflow-x: auto; }
  .brain-tools .segmented a { flex: 1; justify-content: center; }
  .mem { padding: var(--s-3); }
  .mem > .k-icon { width: 28px; height: 28px; font-size: 14px; }
}

/* -------------------------------------------------------------------- live ---- */
/* What needs someone: one line each, its tone on the left, one action on the right. */
.todo { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-3); overflow: hidden; }
.todo-head { display: flex; align-items: center; gap: var(--s-2); padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--line); }
.todo-head h2 { font-size: var(--t-lg); }
.todo-head .count { display: grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px;
                    background: var(--ink); color: var(--on-ink); font: 600 var(--t-xs) var(--mono); }
.todo-item { --t: var(--ink-2); --tw: var(--sunken); display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-4);
             border-bottom: 1px solid var(--line); box-shadow: inset 3px 0 0 var(--t); }
.todo-item:last-child { border-bottom: 0; }
.todo-item.warn   { --t: var(--warn);   --tw: var(--warn-wash); }
.todo-item.danger { --t: var(--danger); --tw: var(--danger-wash); }
.todo-item.agent  { --t: var(--agent);  --tw: var(--agent-wash); }
.todo-item.person { --t: var(--person); --tw: var(--person-wash); }
.todo-item.ok     { --t: var(--ok);     --tw: var(--ok-wash); }
.todo-icon { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: var(--r-2); background: var(--tw); color: var(--t); font-size: 16px; }
.todo-text { flex: 1; min-width: 0; display: grid; gap: 1px; }
.todo-text b { font-size: var(--t-md); font-weight: 600; }
.todo-text span { font-size: var(--t-sm); color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.todo-item time { white-space: nowrap; }
.todo-clear { display: flex; gap: var(--s-3); align-items: center; padding: var(--s-4); }
.todo-clear > i { font-size: 22px; color: var(--ok); }
.todo-clear b { display: block; font-size: var(--t-md); }
.todo-clear span { font-size: var(--t-sm); color: var(--ink-2); }

/* Agents at work: a card each, with what it's touching. */
.atwork { display: grid; gap: var(--s-3); grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.atwork-card { display: grid; gap: var(--s-2); align-content: start; padding: var(--s-3) var(--s-4); background: var(--surface); border: 1px solid var(--line);
               border-radius: var(--r-3); color: inherit; text-decoration: none; transition: border-color .12s, box-shadow .12s; }
.atwork-card:hover { border-color: var(--line-2); box-shadow: var(--shadow-1); }
.atwork-card .who { display: grid; gap: 1px; min-width: 0; }
.atwork-card .who small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.atwork-task { font-size: var(--t-md); font-weight: 500; line-height: 1.4; }
.atwork-files { display: grid; gap: 2px; margin: 0; padding: var(--s-2); list-style: none; background: var(--sunken); border-radius: var(--r-2); }
.atwork-files li { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: var(--t-xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.atwork-files i { color: var(--ink-3); flex: none; }
.atwork-foot { display: flex; justify-content: space-between; gap: var(--s-2); }
@media (max-width: 860px) {
  .todo-item { flex-wrap: wrap; padding: var(--s-3); }
  .todo-text { flex-basis: calc(100% - 42px); }
  .todo-text span { white-space: normal; }
  .todo-item time { margin-left: 42px; }
  .todo-item .btn { margin-left: auto; }
  .atwork { grid-template-columns: minmax(0, 1fr); }
}

/* Comments on code: resolve folds one away; outdated says the line has changed since. */
.comment .comment-acts { justify-self: start; }
.comment.resolved { font-size: var(--t-sm); color: var(--ink-3); }
.comment.resolved > summary { display: flex; align-items: center; gap: var(--s-2); cursor: pointer; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.comment.resolved > summary b { color: var(--ink-2); font-weight: 500; }
.comment.resolved > form { margin: var(--s-1) 0 0 22px; }
.earlier-comments > summary { cursor: pointer; list-style: none; }
.earlier-comments .code-line { font-family: var(--mono); color: var(--ink-2); }

/* A task's plan: a checklist, each step with who holds it. */
.plan-steps { counter-reset: none; }
.plan-steps > li { gap: var(--s-2); padding-left: var(--s-2); }
.plan-steps .step-box { display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; background: none;
                        color: var(--ink-3); font-size: 18px; cursor: pointer; }
.plan-steps .step-box:hover { background: var(--hover); color: var(--ink); }
.plan-steps .done .step-box { color: var(--ok); }
.plan-steps .doing .step-box { color: var(--agent); }
.plan-steps .doing .step-box i { animation: spin 2s linear infinite; }
.plan-steps .done .step-text { color: var(--ink-3); text-decoration: line-through; text-decoration-color: var(--line-2); }
.plan-steps .step-text { white-space: normal; font-size: var(--t-md); }
/* Who else has the task open: faces ringed in green, before the people on it. */
.avatars.presence .avatar { box-shadow: 0 0 0 2px var(--surface), 0 0 0 3.5px var(--ok); }
.handover > summary { display: flex; align-items: center; gap: var(--s-2); cursor: pointer; list-style: none; font-size: var(--t-md); color: var(--ink-2); }
.handover > summary:hover { color: var(--ink); }
.handover[open] > summary { border-bottom: 1px solid var(--line); }

/* Trainings: agents studying a repository for the Brain. */
.trainings { display: grid; gap: var(--s-2); }
.training { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-2) var(--s-4); border-radius: var(--r-3); text-decoration: none; color: inherit;
            background: var(--agent-wash); color: var(--on-agent-wash); font-size: var(--t-md); }
.training:hover { box-shadow: var(--shadow-1); }
.training b { font-weight: 600; }
.learn-pick { display: grid; gap: var(--s-2); }
.learn-pick label { display: flex; align-items: flex-start; gap: var(--s-3); padding: var(--s-2) var(--s-3); border: 1px solid var(--line-2); border-radius: var(--r-2);
                    font-weight: 400; cursor: pointer; }
.learn-pick label:has(input:checked) { border-color: var(--agent); background: var(--agent-wash); }
.learn-pick input { margin-top: 3px; }
.learn-pick span { display: grid; gap: 1px; }
.learn-pick b { font-size: var(--t-md); font-weight: 600; }
.learn-pick small { font-size: var(--t-sm); color: var(--ink-2); }
@media (max-width: 860px) { .training { flex-wrap: wrap; padding: var(--s-2) var(--s-3); } }

/* The Brain's home: a card per place it's kept. */
.places { display: grid; gap: var(--s-3); grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.place { display: grid; gap: var(--s-3); padding: var(--s-4); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-3);
         color: inherit; text-decoration: none; transition: border-color .12s, box-shadow .12s; }
.place:hover { border-color: var(--line-2); box-shadow: var(--shadow-1); }
.place-icon { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: var(--r-2); background: var(--sunken); color: var(--ink-2); font-size: 18px; }
.place-name { display: grid; gap: 1px; min-width: 0; }
.place-name b { font-size: var(--t-base); font-weight: 600; }
.place-name small { font-size: var(--t-sm); color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.place-counts { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-1) var(--s-3); font-size: var(--t-sm); color: var(--ink-2); }
.place-counts b { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.place-counts .warn { display: inline-flex; align-items: center; gap: 4px; color: var(--on-warn-wash); }
.place-counts .warn b { color: inherit; }
.place-counts time { margin-left: auto; font: 400 var(--t-xs) var(--mono); }
.page-head .eyebrow { display: inline-flex; align-items: center; gap: 4px; }

/* ------------------------------------------------------------------ access ---- */
/* The matrix: permissions down the side, people (or roles) across, the permission column pinned. */
.matrix-wrap { overflow: auto; max-height: calc(100dvh - 220px); }
.matrix { width: max-content; min-width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--t-md); }
.matrix th, .matrix td { border-bottom: 1px solid var(--line); background: var(--surface); }
.matrix thead th { position: sticky; top: 0; z-index: 2; padding: var(--s-3) var(--s-2); vertical-align: bottom; border-bottom-color: var(--line-2); }
.matrix .perm { position: sticky; left: 0; z-index: 1; width: 300px; min-width: 240px; max-width: 320px; padding: var(--s-2) var(--s-4);
                text-align: left; font-weight: 400; border-right: 1px solid var(--line); }
.matrix thead .perm { z-index: 3; font: 600 var(--t-xs)/1 var(--font); letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); vertical-align: bottom; }
.matrix .perm b { display: block; font-weight: 500; }
.matrix .perm small { display: block; font-size: var(--t-xs); color: var(--ink-3); line-height: 1.4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.matrix th.who { min-width: 92px; max-width: 120px; text-align: center; font-weight: 400; }
.matrix th.who a, .matrix .role-head { display: grid; justify-items: center; gap: 3px; color: inherit; text-decoration: none; }
.matrix th.who a:hover b { text-decoration: underline; }
.matrix th.who b { font-size: var(--t-sm); font-weight: 600; max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.matrix th.who small { font-size: var(--t-xs); color: var(--ink-3); }
.matrix th.who.off { opacity: .55; }
.matrix tr.group th { position: sticky; left: 0; padding: var(--s-3) var(--s-4) var(--s-1); text-align: left; background: var(--sunken);
                      font: 600 var(--t-xs)/1 var(--font); letter-spacing: .05em; text-transform: uppercase; color: var(--ink-2); }
.matrix .cell { position: relative; text-align: center; height: 44px; }
.matrix tbody tr:not(.group):hover :is(td, th) { background: color-mix(in srgb, var(--hover) 100%, var(--surface)); }
.matrix .cell i { font-size: 17px; }
.matrix .cell.yes i, .matrix .cell.allow i { color: var(--ok); }
.matrix .cell.admin i { color: var(--ink-3); }
.matrix .cell.deny i { color: var(--danger); }
.matrix .cell .no, .matrix-key .no { color: var(--line-2); font-weight: 600; }
.matrix .cell .own { position: absolute; top: 9px; right: calc(50% - 15px); width: 6px; height: 6px; border-radius: 50%; background: var(--person); }
.matrix .cell.deny .own { background: var(--danger); }
.matrix.roles .cell input { width: 16px; height: 16px; cursor: pointer; }
.matrix-key { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-2) var(--s-4); }
.matrix-key > span { display: inline-flex; align-items: center; gap: 6px; }
.own-key { width: 8px; height: 8px; border-radius: 50%; background: var(--person); }
.own-key.deny { background: var(--danger); }
.ok-ink { color: var(--ok); }
.warn-ink { color: var(--warn); }

/* A person's permissions: As role, Allow or Deny for each. */
.perm-table td small { display: block; font-size: var(--t-xs); }
.perm-table tr.group th { background: var(--sunken); text-align: left; font: 600 var(--t-xs)/1 var(--font); letter-spacing: .05em; text-transform: uppercase; color: var(--ink-2); padding: var(--s-3) var(--s-4) var(--s-1); }
.segmented label { position: relative; display: inline-flex; align-items: center; height: calc(var(--ctl-h) - 6px); padding: 0 var(--s-3); border-radius: var(--r-1);
                  font-size: var(--t-sm); font-weight: 500; color: var(--ink-2); cursor: pointer; }
.segmented label input { position: absolute; opacity: 0; pointer-events: none; }
.segmented label:has(input:checked) { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-1); }
.own-pick label.allow:has(input:checked) { background: var(--ok-wash); color: var(--on-ok-wash); }
.own-pick label.deny:has(input:checked) { background: var(--danger-wash); color: var(--on-danger-wash); }
.segmented label:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 1px; }
@media (max-width: 860px) {
  .matrix .perm { width: 170px; min-width: 150px; padding: var(--s-2) var(--s-3); }
  .matrix .perm small { display: none; }
  .matrix-wrap { max-height: none; }
}
.dialog-aside { display: flex; justify-content: flex-start; padding: 0 var(--s-5) var(--s-4); }
.matrix .cell.sees { font-size: var(--t-xs); white-space: nowrap; padding: 0 var(--s-2); }
.matrix .cell.sees a { color: var(--ink-2); }
.matrix .cell.sees.all a { color: var(--ok); }
.sees-pick .switch { font-size: var(--t-md); }
.matrix .cell.sees { font-size: var(--t-xs); white-space: nowrap; padding: 0 var(--s-2); }
.matrix .cell.sees a { color: var(--ink-2); }
.matrix .cell.sees.all a { color: var(--ok); }
.sees-pick .switch { font-size: var(--t-md); }
.steps { margin: 0; padding-left: var(--s-5); display: grid; gap: var(--s-1); }
.push-ask { flex-wrap: wrap; gap: var(--s-2); }

/* The bell's dropdown: the latest notifications, more as it scrolls. */
.notes { position: relative; margin-left: auto; }
.notes .bell { margin-left: 0; }
.notes-pop { position: absolute; right: 0; top: calc(100% + 6px); z-index: 70; width: min(400px, calc(100vw - 24px)); display: flex; flex-direction: column;
             max-height: min(70vh, 560px); background: var(--raised); border: 1px solid var(--line); border-radius: var(--r-3); box-shadow: var(--shadow-pop); overflow: hidden; }
.notes-pop[hidden] { display: none; }
.notes-head { display: flex; align-items: center; gap: var(--s-1); padding: var(--s-2) var(--s-2) var(--s-2) var(--s-4); border-bottom: 1px solid var(--line); }
.notes-head b { font-size: var(--t-base); }
.notes-pop .feed { overflow-y: auto; overscroll-behavior: contain; }
.notes-pop .feed li { padding: var(--s-2) var(--s-3); }
.notes-pop .feed .what { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: var(--t-md); line-height: 1.4; }
.feed .notes-empty { justify-content: center; color: var(--ink-3); font-size: var(--t-md); padding: var(--s-6) var(--s-4); border: 0; }
@media (max-width: 860px) {
  .notes-pop { position: fixed; left: var(--s-2); right: var(--s-2); top: 56px; width: auto; max-height: calc(100dvh - 140px); }
}

/* Brain artifacts: long references beside the memories, as text, Markdown or HTML pages. */
.kind-art, .mem.art, .mem-detail.art { --k: var(--person); --kw: var(--person-wash); }
.brain-kinds .rail-rule { height: 1px; margin: var(--s-1) var(--s-2); background: var(--line); }
.art-body { margin: 0; padding: var(--s-4); max-height: 60vh; overflow: auto; border-top: 1px solid var(--line); background: var(--sunken);
            font-size: var(--t-md); line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }
.art-source label { position: relative; display: inline-flex; align-items: center; height: calc(var(--ctl-h) - 6px); padding: 0 var(--s-3);
                    border-radius: var(--r-1); font-size: var(--t-sm); font-weight: 500; color: var(--ink-2); cursor: pointer; }
.art-source input { position: absolute; opacity: 0; pointer-events: none; }
.art-source label:has(input:checked) { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-1); }
.art-source label:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 1px; }
form:has(.art-source input[value="write"]:checked) .art-from-file,
form:has(.art-source input[value="file"]:checked) .art-written { display: none; }
.art-tabs { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: 0 var(--s-4); border-top: 1px solid var(--line); }
.art-tabs .tabs { border-bottom: 0; }
/* The reader: an artifact opened beside the page, from the right (agentos.js, links to /a/). */
dialog.reader { position: fixed; inset: 0 0 0 auto; margin: 0; width: min(880px, 100vw); height: 100dvh; max-width: 100vw; max-height: none;
                border: 0; border-left: 1px solid var(--line); border-radius: var(--r-4) 0 0 var(--r-4); overflow: hidden; }
dialog.reader[open] { display: flex; flex-direction: column; animation: reader-in .28s cubic-bezier(.2, .8, .2, 1); }
dialog.reader.closing { animation: reader-out .2s ease-in forwards; }
@keyframes reader-in { from { transform: translateX(48px); opacity: 0; } }
@keyframes reader-out { to { transform: translateX(48px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { dialog.reader[open], dialog.reader.closing { animation: none; } }
.reader-head { display: flex; align-items: center; gap: var(--s-2); height: 52px; padding: 0 var(--s-2) 0 var(--s-4); border-bottom: 1px solid var(--line); flex: none; }
.reader-head b { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.reader iframe { flex: 1; width: 100%; border: 0; background: var(--surface); }
@media (max-width: 860px) { dialog.reader { width: 100vw; height: 100dvh; margin: 0; border-radius: 0; border: 0; } }
.art-frame { display: block; width: 100%; height: 70vh; min-height: 360px; border: 0; border-top: 1px solid var(--line); background: #fff; }
.art-pick:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 1px; }
/* An open artifact takes the list's place too: a page needs the width. */
@media (min-width: 1200px) { .brain.has-art { grid-template-columns: 196px minmax(0, 1fr); } .brain.has-art > .brain-list { display: none; } .brain.has-art > .brain-detail { position: static; } }
.brain.has-art > .brain-detail { max-width: none; }
@media (max-width: 860px) { .brain-kinds .rail-rule { width: 1px; height: auto; margin: 4px 2px; flex: none; } }


/* -------------------------------------------------------------- code editor ----
   /t/KEY/code, a page of its own laid out like VS Code: a title bar, an activity bar, a side bar
   (explorer, search, source control), the editor with a terminal panel below, the task's
   conversation on the right, a status bar. Monaco draws the text; the rest is ours. Widths and the
   panel's height drag, and are remembered. */
body.bare { overflow: hidden; }
.x { --side: 280px; --chat: 360px; --panel: 280px; --bar: 44px;
     position: fixed; inset: 0; display: grid; background: var(--surface); color: var(--ink);
     grid-template-columns: var(--bar) var(--side) 4px minmax(0, 1fr) 4px var(--chat);
     grid-template-rows: 40px minmax(0, 1fr) 24px;
     grid-template-areas: "title title title title title title" "act side sx center cx chat" "status status status status status status"; }
.x.no-side { grid-template-columns: var(--bar) 0 0 minmax(0, 1fr) 4px var(--chat); }
.x.no-chat { grid-template-columns: var(--bar) var(--side) 4px minmax(0, 1fr) 0 0; }
.x.no-side.no-chat { grid-template-columns: var(--bar) 0 0 minmax(0, 1fr) 0 0; }
.x.no-side > .x-side, .x.no-chat > .x-chat { visibility: hidden; overflow: hidden; }
.x-title { grid-area: title; display: flex; align-items: center; gap: var(--s-2); padding: 0 var(--s-2) 0 0; border-bottom: 1px solid var(--line); background: var(--canvas); min-width: 0; }
.x-logo { display: grid; place-items: center; width: var(--bar); height: 100%; } .x-logo img { width: 20px; height: 20px; }
.x-task { display: flex; align-items: center; gap: var(--s-2); min-width: 0; color: var(--ink); text-decoration: none; font-weight: 500; }
.x-task .x-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.x-task:hover .x-name { text-decoration: underline; }
.x-title .chip { flex: none; }
.x-activity { grid-area: act; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: var(--s-1) 0; border-right: 1px solid var(--line); background: var(--canvas); }
.x-activity button { position: relative; display: grid; place-items: center; width: 40px; height: 40px; border: 0; background: none; color: var(--ink-3); font-size: 20px; cursor: pointer; border-radius: var(--r-2); }
.x-activity button:hover { color: var(--ink); }
.x-activity button[aria-pressed="true"] { color: var(--ink); box-shadow: inset 2px 0 0 var(--ink); border-radius: 0; }
.x-badge { position: absolute; right: 4px; bottom: 4px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--focus); color: #fff; font: 600 10px/16px var(--mono); }
.x-side { grid-area: side; display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--sunken); }
.x-view { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.x-view-head { display: flex; align-items: center; gap: 2px; height: 34px; padding: 0 var(--s-1) 0 var(--s-3); flex: none;
  font: 600 var(--t-xs) var(--font); text-transform: uppercase; letter-spacing: .04em; color: var(--ink-3); }
.x-split { background: var(--line); cursor: col-resize; touch-action: none; }
.x-split:hover, .x-split.dragging { background: var(--focus); }
.x-split[data-split="side"] { grid-area: sx; } .x-split[data-split="chat"] { grid-area: cx; }
.x-split-h { height: 4px; flex: none; cursor: row-resize; }
.x-center { grid-area: center; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.x-chat { grid-area: chat; display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--canvas); }
.x-chat > .thread { flex: 1; overflow-y: auto; padding: var(--s-3); }
.x-chat > .composer { border-top: 1px solid var(--line); }
.x-status { grid-area: status; display: flex; align-items: center; gap: var(--s-3); padding: 0 var(--s-3); background: var(--focus); color: #fff;
  font: 400 var(--t-xs) var(--mono); white-space: nowrap; overflow: hidden; }
.x-status > span, .x-status button { display: inline-flex; align-items: center; gap: 4px; }
.x-status button { border: 0; background: none; color: inherit; font: inherit; cursor: pointer; padding: 0 4px; height: 100%; }
.x-status button:hover { background: rgba(255,255,255,.15); }

/* the explorer, and lists like it */
.x-tree, .x-results { flex: 1; min-height: 0; overflow: auto; padding-bottom: var(--s-2); font-size: var(--t-sm); }
.x-row { display: flex; align-items: center; gap: 6px; height: 24px; padding-right: var(--s-2); white-space: nowrap; cursor: pointer; color: var(--ink-2); user-select: none; }
.x-row:hover { background: var(--hover, rgba(127,127,127,.09)); color: var(--ink); }
.x-row:focus-visible { outline: 1px solid var(--focus); outline-offset: -1px; }
.x-row[aria-current="true"] { background: var(--surface); color: var(--ink); }
.x-row .tw { width: 14px; flex: none; text-align: center; color: var(--ink-3); transition: transform .1s; }
.x-row.open .tw { transform: rotate(90deg); }
.x-row i { flex: none; } .x-row .nm { overflow: hidden; text-overflow: ellipsis; }
.x-row .st { margin-left: auto; font: 600 var(--t-xs) var(--mono); }
.x-row .acts2 { margin-left: auto; display: none; gap: 2px; } .x-row:hover .acts2 { display: inline-flex; }
.x-row .acts2 + .st { margin-left: 4px; }
.x-row .acts2 button { display: grid; place-items: center; width: 20px; height: 20px; border: 0; background: none; color: var(--ink-3); border-radius: 4px; cursor: pointer; }
.x-row .acts2 button:hover { background: var(--line); color: var(--ink); }
.st.M, .x-row.M .nm { color: var(--warn); } .st.A, .x-row.A .nm { color: var(--ok); } .st.D { color: var(--danger); } .x-row.D .nm { color: var(--danger); text-decoration: line-through; }
.x-row .dim { color: var(--ink-3); font-size: var(--t-xs); overflow: hidden; text-overflow: ellipsis; }

/* search */
.x-search { display: grid; gap: var(--s-1); padding: 0 var(--s-2) var(--s-2); }
.x-search > input { height: 28px; font-size: var(--t-sm); }
.x-find { display: flex; gap: 2px; align-items: flex-start; }
.x-toggle-replace { width: 18px; height: 28px; border: 0; background: none; color: var(--ink-3); cursor: pointer; padding: 0; transition: transform .1s; }
.x-toggle-replace[aria-expanded="true"] i { display: inline-block; transform: rotate(90deg); }
.x-inputs { flex: 1; display: grid; gap: var(--s-1); min-width: 0; }
.x-input { position: relative; display: flex; }
.x-input input { flex: 1; height: 28px; padding-right: 78px; font-size: var(--t-sm); min-width: 0; }
.x-input .x-opt:first-of-type { margin-left: -78px; }
.x-replace input { padding-right: 30px; } .x-replace .x-opt { margin-left: -28px; }
.x-opt { position: relative; z-index: 1; align-self: center; width: 24px; height: 22px; margin-right: 2px; border: 1px solid transparent; border-radius: 4px; background: none;
  color: var(--ink-3); font: 600 11px var(--mono); cursor: pointer; }
.x-opt:hover { color: var(--ink); background: var(--hover, rgba(127,127,127,.12)); }
.x-opt[aria-pressed="true"] { color: var(--focus); border-color: var(--focus); background: color-mix(in srgb, var(--focus) 12%, transparent); }
.x-search-sum { padding: 0 var(--s-3) var(--s-1); min-height: 18px; }
.x-results mark { background: color-mix(in srgb, var(--warn) 30%, transparent); color: inherit; border-radius: 2px; }
.x-results .will-replace mark { text-decoration: line-through; background: color-mix(in srgb, var(--danger) 25%, transparent); }
.x-results ins { text-decoration: none; background: color-mix(in srgb, var(--ok) 25%, transparent); border-radius: 2px; }
.x-results .ln { font: 400 var(--t-xs) var(--mono); }
.x-results .x-row .tx { overflow: hidden; text-overflow: ellipsis; font: 400 12px var(--mono); }

/* source control */
.x-commit { display: grid; gap: var(--s-2); padding: 0 var(--s-2) var(--s-2); }
.x-commit textarea { min-height: 0; font-size: var(--t-sm); resize: vertical; }
.x-group { display: flex; align-items: center; gap: var(--s-2); padding: var(--s-2) var(--s-3) 2px; font: 600 var(--t-xs) var(--font); text-transform: uppercase; letter-spacing: .04em; color: var(--ink-3); }
.x-list { list-style: none; margin: 0; padding: 0 0 var(--s-2); font-size: var(--t-sm); overflow: auto; }
.x-scm-scroll { flex: 1; min-height: 0; overflow: auto; }

/* the editor area */
.x-tabs { display: flex; flex: none; overflow-x: auto; scrollbar-width: thin; min-height: 35px; background: var(--sunken); border-bottom: 1px solid var(--line); }
.x-tabs button { display: inline-flex; align-items: center; gap: 6px; padding: 0 4px 0 var(--s-3); height: 35px; border: 0; border-right: 1px solid var(--line);
  background: none; color: var(--ink-3); font-size: var(--t-sm); white-space: nowrap; cursor: pointer; }
.x-tabs button[aria-selected="true"] { background: var(--surface); color: var(--ink); box-shadow: inset 0 1px 0 var(--focus); }
.x-tabs button.M .nm { color: var(--warn); } .x-tabs button.A .nm { color: var(--ok); }
.x-tabs .dim { color: var(--ink-3); font-size: var(--t-xs); }
.x-tabs .cl { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 4px; opacity: .55; }
.x-tabs .cl:hover { background: var(--line); opacity: 1; }
.x-tabs .dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; margin: 0 6px; }
.x-tabs button:hover .dot, .x-tabs button[aria-selected="true"] .dot { display: none; }
.x-tabs button:not(:hover):not([aria-selected="true"]) .dot + .cl { display: none; }
.x-crumbs { display: flex; align-items: center; gap: 4px; height: 22px; padding: 0 var(--s-3); flex: none; font-size: var(--t-xs); color: var(--ink-3); overflow: hidden; white-space: nowrap; }
.x-crumbs:empty { display: none; }
.x-stale { margin: var(--s-2) var(--s-3); flex: none; }
.x-editors { position: relative; flex: 1; min-height: 120px; }
.x-editor, .x-diff { position: absolute; inset: 0; }
.x-welcome { position: absolute; inset: 0; z-index: 2; background: var(--surface); display: grid; place-content: center; justify-items: center; gap: var(--s-2); padding: var(--s-4); text-align: center; color: var(--ink-2); }
.x-welcome > i { font-size: 44px; color: var(--ink-3); }
.x-welcome h2 { margin: 0; font-size: var(--t-lg); }
.x-welcome p { max-width: 460px; margin: 0; }
.x-keys { display: grid; grid-template-columns: auto auto; gap: 6px var(--s-4); margin-top: var(--s-3); font-size: var(--t-sm); text-align: left; }
.x-keys dt { color: var(--ink-3); text-align: right; } .x-keys dd { margin: 0; }
.x.has-file .x-welcome { display: none; }
.x-panel { display: flex; flex-direction: column; height: var(--panel); min-height: 80px; flex: none; border-top: 1px solid var(--line); background: var(--surface); }
.x-panel-head { display: flex; align-items: center; height: 30px; padding: 0 var(--s-1) 0 var(--s-3); flex: none; font: 600 var(--t-xs) var(--font); text-transform: uppercase; letter-spacing: .04em; color: var(--ink-3); }
.x-terms { flex: 1; min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: var(--s-2); padding: 0 var(--s-2) var(--s-2); }
.xt-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.xt-start { display: flex; gap: var(--s-1); align-items: center; } .xt-start input { height: 28px; font-size: var(--t-sm); width: 220px; }
.xt-terms { display: flex; flex-direction: column; gap: var(--s-2); flex: 1; min-height: 0; }
.xt-terms .term { flex: 1; min-height: 160px; }
.xt-none { margin: var(--s-2) 0; }
.x-split-h:has(+ .x-panel[hidden]) { display: none; }

/* go to file */
.x-palette { top: 12vh; margin: 0 auto; width: min(560px, 92vw); padding: 0; border: 1px solid var(--line-2); border-radius: var(--r-3); background: var(--raised); box-shadow: var(--shadow-2, 0 12px 40px rgba(0,0,0,.25)); }
.x-palette input { width: 100%; height: 40px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; font-size: var(--t-md); }
.x-palette-list { list-style: none; margin: 0; padding: var(--s-1) 0; max-height: 50vh; overflow: auto; font-size: var(--t-sm); }
.x-palette-list li { display: flex; gap: var(--s-2); padding: 6px var(--s-3); cursor: pointer; }
.x-palette-list li[aria-selected="true"] { background: color-mix(in srgb, var(--focus) 15%, transparent); }
.x-palette-list .dim { color: var(--ink-3); }
.x-palette-list b { color: var(--focus); font-weight: 600; }

/* multiplayer: who else is here, where, and editing together */
.x-peers { display: flex; align-items: center; gap: 2px; }
.x-peer { width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--c); background: color-mix(in srgb, var(--c) 25%, var(--surface)); color: var(--ink);
  font: 600 10px var(--font); cursor: pointer; padding: 0; }
.x-peer.following { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--c); }
.x-pdot { width: 7px; height: 7px; border-radius: 50%; flex: none; margin-left: 4px; }
.x-row .x-pdot + .x-pdot, .x-tabs .x-pdot + .x-pdot { margin-left: -3px; }
.x-together { display: inline-flex; align-items: center; gap: 4px; height: 18px; padding: 0 6px; border: 1px solid var(--line-2); border-radius: 4px; background: none; color: var(--ink-3); font: 500 var(--t-xs) var(--font); cursor: pointer; }
.x-together:hover { color: var(--ink); border-color: var(--ink-3); }
.x-together.on { color: #fff; background: var(--focus); border-color: var(--focus); }
.x-crumbs { flex-wrap: nowrap; padding-right: var(--s-2); }
.x-join { margin: var(--s-2) var(--s-3); flex: none; }
.x-dialog { width: min(560px, 92vw); }
.x-dialog .dialog-foot .x-dialog-cancel { order: -1; } /* OK first in the form (Enter means OK), Cancel first to the eye */
.x-dialog .dialog-foot { justify-content: flex-end; }
.x-ask-code { margin: 0; max-height: 220px; overflow: auto; padding: var(--s-2) var(--s-3); border-radius: var(--r-2); background: var(--sunken); font: 400 12px/1.5 var(--mono); white-space: pre; }
.x-tree.drop, .x-tree .x-row.drop { background: color-mix(in srgb, var(--focus) 18%, transparent); outline: 1px dashed var(--focus); outline-offset: -1px; }
.x-tree [draggable="true"] { cursor: grab; } .x-tree [draggable="true"]:active { cursor: grabbing; }
.x-pushed { background: rgba(87, 171, 90, .18); transition: background 1s; }
.x-pushed-gutter { border-left: 3px solid #57AB5A; margin-left: 3px; }
.x-plabel { padding: 0 5px; border-radius: 3px 3px 3px 0; color: #fff; font: 600 11px/16px var(--font); white-space: nowrap; pointer-events: none;
  transform: translate(-1px, 2px); transition: opacity .3s; text-shadow: 0 1px 1px rgba(0,0,0,.25); }
.x-plabel.idle { opacity: .6; }
.x-join .acts, .x-stale .acts { flex: none; margin-left: auto; }
.x-status .x-following { background: rgba(255,255,255,.18); border-radius: 3px; }

/* Dark, the editor page takes VS Code's own colours (Dark+, which Monaco's dark theme is), so the
   chrome and the code read as one: editor #1e1e1e, side bar #252526, activity bar #333333. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) :is(.x, .x-palette) {
    --surface: #1E1E1E; --sunken: #252526; --canvas: #252526; --raised: #252526;
    --line: #2B2B2B; --line-2: #3C3C3C; --ink: #CCCCCC; --ink-2: #BBBBBB; --ink-3: #8B8B8B;
    --focus: #007ACC; --hover: rgba(90, 93, 94, .31);
  }
  :root:not([data-theme="light"]) .x-title { background: #3C3C3C; border-bottom-color: #2B2B2B; }
  :root:not([data-theme="light"]) .x-activity { background: #333333; border-right-color: #333333; }
  :root:not([data-theme="light"]) .x-activity button { color: #858585; } :root:not([data-theme="light"]) .x-activity button:hover, :root:not([data-theme="light"]) .x-activity button[aria-pressed="true"] { color: #FFFFFF; }
  :root:not([data-theme="light"]) .x-activity button[aria-pressed="true"] { box-shadow: inset 2px 0 0 #FFFFFF; }
  :root:not([data-theme="light"]) .x-tabs { background: #252526; border-bottom-color: #252526; }
  :root:not([data-theme="light"]) .x-tabs button { background: #2D2D2D; color: #969696; border-right-color: #252526; }
  :root:not([data-theme="light"]) .x-tabs button[aria-selected="true"] { background: #1E1E1E; color: #FFFFFF; box-shadow: none; }
  :root:not([data-theme="light"]) .x-crumbs, :root:not([data-theme="light"]) .x-editors, :root:not([data-theme="light"]) .x-welcome, :root:not([data-theme="light"]) .x-panel { background: #1E1E1E; }
  :root:not([data-theme="light"]) .x-panel { border-top-color: #414141; }
  :root:not([data-theme="light"]) .x-row[aria-current="true"] { background: #37373D; }
  :root:not([data-theme="light"]) .x-row:focus-visible { outline-color: #007FD4; }
  :root:not([data-theme="light"]) :is(.x, .x-palette) :is(input, textarea, select) { background: #3C3C3C; border-color: #3C3C3C; color: #CCCCCC; }
  :root:not([data-theme="light"]) :is(.x, .x-palette) :is(input, textarea):focus { border-color: #007FD4; }
  :root:not([data-theme="light"]) .x-status { background: #007ACC; }
  :root:not([data-theme="light"]) .x-split { background: #2B2B2B; } :root:not([data-theme="light"]) .x-split:hover, :root:not([data-theme="light"]) .x-split.dragging { background: #007FD4; }
  :root:not([data-theme="light"]) .x-chat { background: #252526; }
}
:root[data-theme="dark"] :is(.x, .x-palette) {
  --surface: #1E1E1E; --sunken: #252526; --canvas: #252526; --raised: #252526;
  --line: #2B2B2B; --line-2: #3C3C3C; --ink: #CCCCCC; --ink-2: #BBBBBB; --ink-3: #8B8B8B;
  --focus: #007ACC; --hover: rgba(90, 93, 94, .31);
}
:root[data-theme="dark"] .x-title { background: #3C3C3C; border-bottom-color: #2B2B2B; }
:root[data-theme="dark"] .x-activity { background: #333333; border-right-color: #333333; }
:root[data-theme="dark"] .x-activity button { color: #858585; } :root[data-theme="dark"] .x-activity button:hover, :root[data-theme="dark"] .x-activity button[aria-pressed="true"] { color: #FFFFFF; }
:root[data-theme="dark"] .x-activity button[aria-pressed="true"] { box-shadow: inset 2px 0 0 #FFFFFF; }
:root[data-theme="dark"] .x-tabs { background: #252526; border-bottom-color: #252526; }
:root[data-theme="dark"] .x-tabs button { background: #2D2D2D; color: #969696; border-right-color: #252526; }
:root[data-theme="dark"] .x-tabs button[aria-selected="true"] { background: #1E1E1E; color: #FFFFFF; box-shadow: none; }
:root[data-theme="dark"] .x-crumbs, :root[data-theme="dark"] .x-editors, :root[data-theme="dark"] .x-welcome, :root[data-theme="dark"] .x-panel { background: #1E1E1E; }
:root[data-theme="dark"] .x-panel { border-top-color: #414141; }
:root[data-theme="dark"] .x-row[aria-current="true"] { background: #37373D; }
:root[data-theme="dark"] .x-row:focus-visible { outline-color: #007FD4; }
:root[data-theme="dark"] :is(.x, .x-palette) :is(input, textarea, select) { background: #3C3C3C; border-color: #3C3C3C; color: #CCCCCC; }
:root[data-theme="dark"] :is(.x, .x-palette) :is(input, textarea):focus { border-color: #007FD4; }
:root[data-theme="dark"] .x-status { background: #007ACC; }
:root[data-theme="dark"] .x-split { background: #2B2B2B; } :root[data-theme="dark"] .x-split:hover, :root[data-theme="dark"] .x-split.dragging { background: #007FD4; }
:root[data-theme="dark"] .x-chat { background: #252526; }
@media (max-width: 900px) {
  .x { --chat: 0px; } .x > .x-chat, .x-split[data-split="chat"] { display: none; }
  .x-title .chip, .x-title .x-name { display: none; }
}

/* ------------------------------------------------------------------- plans ----
   A repository's plans, and a plan's board: phases as columns of task cards. */
.plans-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-3); margin: var(--s-4) 0 var(--s-3); }
.plans-head h2 { margin: 0; }
.plans-list { display: grid; gap: var(--s-2); grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.plan-item { display: grid; gap: var(--s-2); padding: var(--s-3) var(--s-4); color: inherit; text-decoration: none; }
.plan-item:hover { border-color: var(--line-2); }
.plan-goal-snip { margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.plan-st.planning, .plan-st.training { background: var(--warn-wash); color: var(--on-warn-wash); }
.plan-st.review { background: color-mix(in srgb, var(--focus) 14%, transparent); color: var(--focus); }
.plan-st.running { background: var(--ok-wash); color: var(--on-ok-wash); }
.plan-st.done { background: var(--ok); color: #fff; } .plan-st.cancelled { opacity: .6; }
.plan-top { display: grid; gap: var(--s-2); margin: var(--s-4) 0 var(--s-3); }
.plan-head { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-2) var(--s-3); }
.plan-head h2 { margin: 0; }
.plan-goal { margin: 0; color: var(--ink-2); white-space: pre-wrap; max-width: 90ch; line-height: 1.6; overflow-wrap: anywhere; }
.plan-working .spinner { margin-top: 2px; }
.plan-summary span { white-space: pre-wrap; }
#plan-board { min-width: 0; } /* the board scrolls sideways, not the page */
#plan-board > .note { margin: var(--s-2) 0; }
.plan-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--s-3); margin: var(--s-3) 0; }
.plan-actions .panel-body { display: grid; gap: var(--s-2); }
.plan-progress { margin: var(--s-3) 0; display: grid; gap: var(--s-1); }
.plan-progress .bar { height: 6px; border-radius: 3px; background: var(--sunken); overflow: hidden; }
.plan-progress .bar span { display: block; height: 100%; background: var(--ok); transition: width .4s; }
.plan-board { display: flex; gap: var(--s-3); align-items: flex-start; overflow-x: auto; padding-bottom: var(--s-3); margin-top: var(--s-3); }
.plan-col { flex: 0 0 300px; display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-2); border-radius: var(--r-3); background: var(--sunken); }
.plan-col > header { display: flex; align-items: center; gap: var(--s-2); padding: var(--s-1) var(--s-1) 0; }
.plan-col-new { background: none; border: 1px dashed var(--line-2); }
.plan-cards { display: grid; gap: var(--s-2); min-height: 24px; }
.plan-card { display: grid; gap: 6px; padding: var(--s-2) var(--s-3); border: 1px solid var(--line); border-left: 3px solid var(--ok); border-radius: var(--r-2); background: var(--surface); }
.plan-card.complex { border-left-color: var(--theirs, #0E7490); }
.plan-card[data-plan-edit] { cursor: pointer; } .plan-card[data-plan-edit]:hover { border-color: var(--line-2); }
.plan-card.st-done { opacity: .7; }
.plan-card-top { gap: 6px; font-size: var(--t-xs); }
.plan-ref { font-weight: 600; color: var(--ink-3); }
.plan-card .chip { font-size: 10px; }
.plan-card .chip.simple, .plan-card .chip.local { background: var(--ok-wash); color: var(--on-ok-wash); }
.plan-card .chip.complex, .plan-card .chip.cloud { background: color-mix(in srgb, var(--theirs, #0E7490) 15%, transparent); color: var(--theirs, #0E7490); }
.plan-title { font-size: var(--t-md); line-height: 1.35; }
.plan-body { margin: 0; font-size: var(--t-sm); color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; white-space: pre-wrap; }
.plan-card-foot { gap: 6px; font-size: var(--t-sm); flex-wrap: wrap; }
.plan-add { justify-content: flex-start; }
.plan-empty { flex: 1; }
.plan-deps { display: grid; gap: 4px; max-height: 180px; overflow: auto; padding: var(--s-1) 0; }
.drop-ghost { opacity: .4; }
.runners { margin-top: var(--s-4); }
/* Settings: each section a card that opens; its badge says whether it's configured. */
.setting-link { display: block; color: inherit; text-decoration: none; } /* a setting with its own page: a row like the others */
.setting-link > .panel-head { border-bottom: 0; }
.setting-link:hover { border-color: var(--line-2); }
.setting-part { border-top: 1px solid var(--line); } /* a second part of a setting card, with its own form */
.setting-part h3 { font-size: var(--t-base); }
details.setting > summary { display: flex; align-items: center; gap: var(--s-2) var(--s-3); cursor: pointer; list-style: none; flex-wrap: wrap; user-select: none; }
details.setting > summary::-webkit-details-marker { display: none; }
details.setting:not([open]) > summary { border-bottom: 0; }
.setting-caret { font-size: 18px; color: var(--ink-3); transition: transform .15s; margin-left: calc(-1 * var(--s-1)); }
details.setting[open] .setting-caret { transform: rotate(90deg); }
.setting-sub { margin-left: auto; }
.runners .panel-head { flex-wrap: wrap; }
.runners .note .copy { margin: var(--s-1) 0; max-width: 100%; }
.runners .sub { display: block; margin-top: 2px; color: var(--ink-3); font-size: var(--t-sm); }

/* A repository's Security tab. */
.tabs .count.danger { color: var(--danger); }
.tabs .count.warn { color: var(--warn); }
.sec-sum { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--s-3); margin: var(--s-4) 0 var(--s-3); }
.sec-card { display: grid; gap: var(--s-2); padding: var(--s-3) var(--s-4); }
.sec-card-top { display: flex; align-items: center; gap: var(--s-3); }
.sec-card-top b { display: block; font: 600 26px/1.1 var(--font); letter-spacing: -.02em; }
.sec-card-top span:not(.sec-icon) { color: var(--ink-2); font-size: var(--t-md); }
.sec-icon { width: 38px; height: 38px; flex: none; display: grid; place-items: center; border-radius: var(--r-2); background: var(--ok-wash); color: var(--on-ok-wash); font-size: 19px; }
.sec-card.bad .sec-icon { background: var(--danger-wash); color: var(--on-danger-wash); }
.sec-card.warn .sec-icon { background: var(--warn-wash); color: var(--on-warn-wash); }
.sec-card-foot { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; min-height: 28px; }
.sec-card-foot form { margin-left: auto; }
.sec-err { margin: 0; color: var(--danger); }
.sec-filter { gap: var(--s-3); margin: 0 0 var(--s-3); flex-wrap: wrap; }
#security > .panel { margin-top: var(--s-3); }
.sec-filter > form, .sec-filter > .state { margin-left: auto; }
.panel-head h3 { display: inline-flex; align-items: center; gap: 6px; }
.sec-table td { vertical-align: top; }
.sec-table .sub { display: block; margin-top: 2px; color: var(--ink-3); font-size: var(--t-sm); max-width: 46ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sec-title { display: block; max-width: 46ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sec-done td { color: var(--ink-3); } .sec-done b { font-weight: 500; }
.sec-acts { justify-content: flex-end; flex-wrap: nowrap; }
.sec-fix { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.sec-fix .hint { flex-basis: 100%; }
.sec-clear { display: flex; align-items: center; gap: var(--s-2); color: var(--ink-2); }
.sec-clear i { color: var(--ok); font-size: 18px; }
.sec-prs { list-style: none; margin: 0; padding: 0; }
.sec-prs > li { display: grid; gap: 6px; padding: var(--s-3) var(--s-4); border-top: 1px solid var(--line); }
.sec-prs > li:first-child { border-top: 0; }
.sec-files { margin: 6px 0 0; padding-left: 1.2em; }
.plan-files { display: grid; gap: var(--s-2); margin: var(--s-2) 0 var(--s-3); }
.plan-attach { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--s-2); }
.plan-brain { margin-top: var(--s-4); }
.plan-brain .panel-head { flex-wrap: wrap; gap: 4px var(--s-2); }
.plan-brain .panel-head h3 { display: inline-flex; align-items: center; gap: 6px; }
.plan-brain .panel-head .hint { flex-basis: 100%; }
.plan-brain .mem { box-shadow: none; } .plan-brain .mem-body { -webkit-line-clamp: 4; }
.plan-brain-acts { display: flex; align-items: flex-start; gap: var(--s-1); flex: none; }

/* Databases: the backup schedule shows only the fields its frequency uses */
.sched { border: 0; padding: 0; margin: 0; min-width: 0; }
.sched-when { display: flex; gap: var(--s-2); }
.sched-when > * { flex: 1; min-width: 0; }
.sched-day, .sched-time, .sched-cron { display: none; }
.sched:has(option[value="daily"]:checked) .sched-time,
.sched:has(option[value="weekly"]:checked) :is(.sched-day, .sched-time),
.sched:has(option[value="custom"]:checked) .sched-cron { display: block; }
.data-request { display: flex; align-items: flex-start; gap: var(--s-3); flex-wrap: wrap; }
.data-request + .data-request { border-top: 1px solid var(--line); }
.input-sm { height: 30px; padding: 0 var(--s-2); font-size: var(--t-sm); width: 11em; }

/* ---------------------------------------------------------------------- hr ---- */
@media (min-width: 861px) { .tiles { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); } }
.tiles .n small { font: 500 var(--t-md) var(--font); color: var(--ink-3); letter-spacing: 0; }
.tiles .n.small-n { font-size: var(--t-xl); }
.hr-tabs { margin-bottom: var(--s-2); }
.conflict-person + .conflict-person { border-top: 1px solid var(--line); }
.conflict-who { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-4) 0; }
.conflict-person .list > li { padding-left: var(--s-4); }
/* settling a short day: the time fields only when it's settled in hours */
.settle { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.settle select { width: auto; }
.settle-times { display: none; align-items: center; gap: var(--s-1); }
.settle-times input { width: 7.5em; }
.settle:has(option[value^="permission"]:checked) .settle-times { display: inline-flex; }
/* a payslip: earnings beside deductions, the net pay to finish, and printed as itself */
.payslip-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-4); border-bottom: 1px solid var(--line); }
.payslip-head h2 { font-size: var(--t-xl); }
.payslip-cols { display: grid; grid-template-columns: 1fr 1fr; align-items: start; border-top: 1px solid var(--line); }
.payslip-cols .table + .table { border-left: 1px solid var(--line); }
.payslip-total { font-size: var(--t-base); }
.payslip-total b { font-size: var(--t-xl); margin-left: var(--s-2); }
@media (max-width: 700px) { .payslip-cols { grid-template-columns: 1fr; } .payslip-cols .table + .table { border-left: 0; border-top: 1px solid var(--line); } }
@media print {
  :root { --canvas: #fff; }
  body:has(.payslip) :is(.sidebar, .topbar, .tabbar, .no-print, .toast) { display: none !important; }
  body:has(.payslip) .main, body:has(.payslip) .content { margin: 0; padding: 0; }
  .payslip { border: 0; box-shadow: none; }
}

/* ------------------------------------------------------------ hub import ---- */
.hub-choice { display: flex; gap: var(--s-2); }
.hub-choice select { width: auto; min-width: 11em; }
.hub-choice .hub-slug { width: 20em; min-width: 14em; }
.hub-repo, .hub-slug { display: none; }
.hub-choice:has(option[value="repo"]:checked) .hub-repo, .hub-choice:has(:is(option[value="new"], option[value="migrate"]):checked) .hub-slug { display: block; }
.table tr.faint-row td { color: var(--ink-3); }
.hub-run > summary { display: flex; align-items: center; gap: var(--s-3); cursor: pointer; list-style: none; }
.hub-run > summary::-webkit-details-marker { display: none; }
.hub-run + .hub-run { border-top: 1px solid var(--line); }
.hub-steps { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.hub-step { display: flex; gap: var(--s-3); padding: var(--s-2) var(--s-3); border-radius: var(--r-2); }
.hub-step.running { background: var(--sunken); }
.hub-step-icon { flex: none; width: 20px; padding-top: 1px; font-size: 18px; color: var(--ink-3); }
.hub-step.done .hub-step-icon { color: var(--ok); }
.hub-step.failed .hub-step-icon { color: var(--danger); }
.hub-step.running .hub-step-icon i { display: inline-block; color: var(--person); animation: spin 1s linear infinite; }
.hub-step.skipped, .hub-step.stopped { opacity: .6; }
.hub-step-main { display: grid; gap: 4px; flex: 1; min-width: 0; }
.hub-step-top { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
.hub-step-top b { font-weight: 550; }
.hub-step .meter { margin-top: 2px; }
.hub-step.failed .meter > span { background: var(--danger); }
.hub-step-lines { display: flex; flex-wrap: wrap; gap: 2px var(--s-4); margin: 0; padding: 0; list-style: none; font-size: var(--t-sm); color: var(--ink-2); }
.hub-step-lines.problems { display: grid; max-height: 260px; overflow-y: auto; }
.hub-step-lines.problems { color: var(--danger); }
.hub-step-lines.problems li { display: flex; gap: 6px; }
.hub-log > summary { cursor: pointer; }

/* ---------------------------------------------------------------- admin ----
   The Admin dashboard: its areas as cards in groups, an even grid; each card's icon tinted by its
   group, what it's for, and a figure or chips at its foot. */
.admin-group { display: grid; gap: var(--s-3); margin-bottom: var(--s-6); }
.admin-group > .eyebrow { margin: 0; }
.admin-grid { display: grid; gap: var(--s-3); grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1180px) { .admin-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .admin-grid { grid-template-columns: minmax(0, 1fr); } }
.admin-card { position: relative; display: flex; flex-direction: column; gap: var(--s-1); min-height: 176px; padding: var(--s-4);
              background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-3); color: inherit; text-decoration: none;
              transition: border-color .15s, box-shadow .15s, transform .15s; }
.admin-card:hover { border-color: var(--line-2); box-shadow: var(--shadow-1); transform: translateY(-1px); }
.admin-card:focus-visible { outline: 2px solid var(--person); outline-offset: 2px; }
.admin-card > b { font-size: var(--t-md); font-weight: 600; }
.admin-ic { width: 36px; height: 36px; display: grid; place-items: center; margin-bottom: var(--s-2); border-radius: var(--r-2);
            background: var(--sunken); color: var(--ink-2); font-size: 18px; }
.admin-group.person .admin-ic { background: var(--person-wash); color: var(--on-person-wash); }
.admin-group.agent .admin-ic { background: var(--agent-wash); color: var(--on-agent-wash); }
.admin-go { position: absolute; top: var(--s-4); right: var(--s-4); color: var(--ink-3); opacity: 0; transition: opacity .15s; }
.admin-card:hover .admin-go, .admin-card:focus-visible .admin-go { opacity: 1; }
.admin-desc { font-size: var(--t-sm); line-height: 1.45; color: var(--ink-2); }
.admin-foot { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: var(--s-3); }
.admin-foot .n { font: 600 var(--t-xl)/1 var(--font); letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.admin-foot .u { margin-right: var(--s-1); font-size: var(--t-sm); color: var(--ink-3); }
.admin-foot .chip { align-self: center; }
@media (prefers-reduced-motion: reduce) { .admin-card { transition: none; } .admin-card:hover { transform: none; } }
@media (max-width: 600px) { /* a phone: the icon beside the words, each card as tall as it needs */
  .admin-card { display: grid; grid-template-columns: 36px minmax(0, 1fr); align-content: start; column-gap: var(--s-3); min-height: 0; }
  .admin-ic { grid-row: span 3; margin: 0; }
  .admin-foot { padding-top: var(--s-2); }
}

/* The company logo in Settings: what's saved, or the image chosen, before it's uploaded. */
.logo-form { display: flex; gap: var(--s-4); align-items: flex-start; flex-wrap: wrap; border-bottom: 1px solid var(--line); }
.logo-preview { width: 200px; height: 96px; flex: none; display: grid; place-items: center; align-content: center; gap: 4px; padding: var(--s-3);
                border: 1px dashed var(--line-2); border-radius: var(--r-3); background: var(--sunken); color: var(--ink-3); font-size: 22px; }
.logo-preview img { max-width: 100%; max-height: 100%; object-fit: contain; }

/* ---------------------------------------------------------- system health ----
   A summary line in its colour, then each group's checks: a coloured mark, the name, what was
   found, how to put it right, and Fix where AgentOS can. */
.health-sum { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-4); margin-bottom: var(--s-5);
              border: 1px solid var(--line); border-radius: var(--r-3); background: var(--surface); color: inherit; text-decoration: none; }
.health-sum > i { font-size: 22px; }
.health-sum > div { display: grid; gap: 2px; flex: 1; min-width: 0; }
.health-sum .small { color: var(--ink-2); }
.health-sum.ok > i:first-child { color: var(--ok); }
.health-sum.warn { background: var(--warn-wash); border-color: transparent; }
.health-sum.warn, .health-sum.warn :is(b, .small, i) { color: var(--on-warn-wash); }
.health-sum.fail { background: var(--danger-wash); border-color: transparent; }
.health-sum.fail, .health-sum.fail :is(b, .small, i) { color: var(--on-danger-wash); }
.health-sum:is(.warn, .fail) .small { opacity: .85; }
.health-strip:hover { border-color: var(--line-2); }
.health-strip > i:last-child { margin-left: auto; font-size: 18px; color: var(--ink-3); }
.health-strip:is(.warn, .fail) > i:last-child { color: inherit; opacity: .7; }
.health-group { margin-bottom: var(--s-4); }
.health-check { align-items: flex-start; }
.health-check .row { flex-wrap: wrap; column-gap: var(--s-3); row-gap: 2px; }
.health-dot { width: 20px; flex: none; padding-top: 1px; font-size: 16px; color: var(--ink-3); }
.health-check.ok .health-dot { color: var(--ok); }
.health-check.warn .health-dot { color: var(--warn); }
.health-check.fail .health-dot { color: var(--danger); }
.health-check.off { opacity: .8; }
.health-detail { color: var(--ink-2); font-size: var(--t-sm); }
.health-log { max-height: 320px; overflow: auto; margin: 0; border-radius: 0; border-left: 0; border-right: 0; border-bottom: 0; }

/* ----------------------------------------------------------------- today ----
   The Overview as each person's day: their time in tiles (a bar for the day, one for each day of
   the week), what waits for them to check, their tasks by where they stand; for admins, the team. */
.ok-text { color: var(--ok); }
.warn-text { color: var(--warn); font-weight: 600; }
.today-tiles { margin-bottom: var(--s-6); }
.today-tiles .tile.done { background: var(--ok-wash); border-color: transparent; }
.today-tiles .tile.done :is(.n, .l) { color: var(--on-ok-wash); }
.meter { display: block; height: 6px; margin-top: var(--s-2); border-radius: 3px; background: var(--sunken); overflow: hidden; }
.meter > span { display: block; height: 100%; border-radius: inherit; background: var(--ok); }
.week-bars { display: flex; align-items: flex-end; gap: 6px; height: 46px; margin-top: var(--s-2); }
.week-bars .day { flex: 1; display: grid; gap: 3px; justify-items: center; }
.week-bars .bar { width: 100%; max-width: 18px; height: 30px; display: flex; align-items: flex-end; border-radius: 3px; background: var(--sunken); overflow: hidden; }
.week-bars .bar > span { width: 100%; background: var(--ink-3); border-radius: 3px; }
.week-bars .today .bar > span { background: var(--ok); }
.week-bars .future .bar { opacity: .5; }
.week-bars .d { font: 500 10px/1 var(--mono); color: var(--ink-3); }
.week-bars .today .d { color: var(--ink); }
.today-section { display: grid; gap: var(--s-3); margin-bottom: var(--s-6); }
.today-head { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
.today-head h2 { display: flex; align-items: center; gap: var(--s-2); margin: 0; font-size: var(--t-lg); }
.today-head h2 i { color: var(--ink-3); font-weight: 400; }
.today-lanes { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); align-items: start; }
.today-lane { display: grid; gap: var(--s-2); align-content: start; }
.today-lane h3 { margin: 0; font-size: var(--t-sm); font-weight: 600; color: var(--ink-2); }
.today-cards { display: grid; gap: var(--s-3); grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.today-admin { margin-top: var(--s-2); align-items: start; }
.team-time { width: 140px; flex: none; display: grid; justify-items: end; }
.team-time .meter { width: 100%; margin-top: 4px; height: 4px; }
@media (max-width: 600px) { .team-time { width: 96px; } }

/* ============================================================================
   Crew: the team's chat, its own app on its own address (crew.html, crew.js).
   The chat list, the open chat, and a panel beside it; on a phone, one at a time.
   ============================================================================ */
body.crew { height: 100dvh; overflow: hidden; background: var(--canvas); }
.crew-app { display: grid; grid-template-columns: 320px minmax(0, 1fr); height: 100dvh; }
.crew-app[data-panel] { grid-template-columns: 320px minmax(0, 1fr) 340px; }
.crew-side { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--line); background: var(--canvas);
             padding-top: env(safe-area-inset-top, 0px); }
.crew-side-head { display: flex; align-items: center; gap: var(--s-1); padding: var(--s-3) var(--s-3) var(--s-2) var(--s-4); }
.crew-brand { display: inline-flex; align-items: center; gap: var(--s-2); font-weight: 650; font-size: var(--t-lg); }
.crew-brand img { width: 24px; height: 24px; }
.crew-find { position: relative; margin: 0 var(--s-3) var(--s-2); }
.crew-find i { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--ink-3); pointer-events: none; }
.crew-find input { width: 100%; padding-left: 32px; }
.crew-list { flex: 1; overflow-y: auto; padding: 0 var(--s-2) var(--s-4); overscroll-behavior: contain; }
.crew-list h3 { margin: var(--s-3) var(--s-2) var(--s-1); font-size: var(--t-xs); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); }
.crew-none { padding: var(--s-4); color: var(--ink-3); font-size: var(--t-md); text-align: center; }
.crew-row { display: flex; align-items: center; gap: var(--s-3); width: 100%; padding: var(--s-2); border: 0; border-radius: var(--r-2);
            background: none; color: inherit; text-align: left; text-decoration: none; cursor: pointer; font: inherit; }
.crew-row[hidden] { display: none; }
.crew-row:hover { background: var(--hover); }
.crew-row.on { background: var(--surface); box-shadow: var(--shadow-1); }
.crew-row .avatar, .crew-chat-icon { width: 36px; height: 36px; font-size: var(--t-sm); }
.crew-chat-icon { display: inline-grid; place-items: center; flex: none; border-radius: var(--r-3); background: var(--sunken); color: var(--ink-2); font-size: 18px; border: 1px solid var(--line); }
.crew-chat-icon.group { border-radius: 50%; }
.crew-row-main { display: grid; gap: 1px; min-width: 0; flex: 1; }
.crew-row-top, .crew-row-sub { display: flex; align-items: center; gap: var(--s-2); min-width: 0; }
.crew-row-top b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 550; }
.crew-row-top time { margin-left: auto; flex: none; font-family: var(--mono); font-size: var(--t-xs); color: var(--ink-3); }
.crew-row-sub { font-size: var(--t-md); color: var(--ink-3); }
.crew-row-sub > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; }
.crew-row-sub i { flex: none; font-size: 13px; }
.crew-row.unread .crew-row-top b { font-weight: 700; }
.crew-row.unread .crew-row-sub { color: var(--ink-2); }
.crew-row.unread .crew-row-top time { color: var(--person); }
.crew-count { flex: none; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--person); color: var(--on-ink);
              font: 600 var(--t-xs)/20px var(--mono); text-align: center; }
.crew-count.muted { background: var(--line-2); color: var(--ink-2); }

.crew-main { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--surface); }
.crew-empty { margin: auto; display: grid; justify-items: center; gap: var(--s-2); padding: var(--s-8); text-align: center; }
.crew-empty img { width: 56px; height: 56px; opacity: .9; }
.crew-head { display: flex; align-items: center; gap: var(--s-2); padding: var(--s-2) var(--s-3); padding-top: calc(var(--s-2) + env(safe-area-inset-top, 0px));
             border-bottom: 1px solid var(--line); min-height: 56px; }
.crew-head[hidden], .crew-scroll[hidden], .crew-compose[hidden] { display: none; }
.crew-head .avatar, .crew-head .crew-chat-icon { width: 32px; height: 32px; }
.crew-back { display: none; }
.crew-title { display: grid; min-width: 0; padding: 0; border: 0; background: none; color: inherit; text-align: left; cursor: pointer; font: inherit; }
.crew-title b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--t-base); }
.crew-scroll { flex: 1; overflow-y: auto; overscroll-behavior: contain; }
.crew-msgs { display: flex; flex-direction: column; min-height: 100%; padding: var(--s-4) var(--s-4) var(--s-2); }
.crew-msgs > :first-child { margin-top: auto; } /* a short chat sits by the box you write in, as chats do */
.crew-more { display: flex; justify-content: center; padding: var(--s-2); }
.crew-start { margin: auto; padding: var(--s-8) var(--s-4); color: var(--ink-3); text-align: center; }
.crew-day { display: flex; justify-content: center; padding: var(--s-3) 0 var(--s-2); }
.crew-day span { padding: 2px 10px; border-radius: 10px; background: var(--sunken); border: 1px solid var(--line); color: var(--ink-2); font-size: var(--t-xs); font-weight: 600; }
.crew-sys { align-self: center; display: flex; gap: var(--s-2); align-items: baseline; max-width: 90%; margin: var(--s-1) 0; padding: 2px var(--s-3);
            color: var(--ink-3); font-size: var(--t-sm); text-align: center; }
.crew-sys time { font-family: var(--mono); font-size: var(--t-xs); }
.crew-msg { position: relative; display: flex; align-items: flex-start; gap: var(--s-2); max-width: min(760px, 92%); }
.crew-msg:not(.cont) { margin-top: var(--s-3); }
.crew-msg.cont { margin-top: 3px; }
.crew-msg.mine { margin-left: auto; flex-direction: row-reverse; }
.crew-msg.flash .crew-b { box-shadow: 0 0 0 3px var(--warn); transition: box-shadow .3s; }
.crew-av { width: 30px; height: 30px; margin-top: 18px; font-size: var(--t-xs); }
.crew-gutter { width: 30px; flex: none; }
.crew-col { display: grid; gap: 4px; min-width: 0; justify-items: start; }
.crew-msg.mine .crew-col { justify-items: end; }
.crew-meta { display: flex; align-items: baseline; gap: var(--s-2); padding: 0 2px; font-size: var(--t-sm); }
.crew-meta b { font-weight: 600; }
.crew-meta time { font-family: var(--mono); font-size: var(--t-xs); color: var(--ink-3); }
.crew-meta i, .crew-b > i { font-size: 12px; color: var(--warn); }
.crew-b { display: grid; gap: 4px; max-width: 100%; padding: var(--s-2) var(--s-3); border: 1px solid var(--line); border-radius: 2px var(--r-3) var(--r-3) var(--r-3);
          background: var(--surface); overflow-wrap: anywhere; }
.crew-msg.cont .crew-b { border-radius: var(--r-3); }
.crew-msg.mine .crew-b { border-color: transparent; border-radius: var(--r-3) 2px var(--r-3) var(--r-3); background: var(--ink); color: var(--on-ink); }
.crew-msg.mine.cont .crew-b { border-radius: var(--r-3); }
.crew-msg.pinned .crew-b { box-shadow: inset 3px 0 0 var(--warn); }
.crew-b > i { justify-self: end; }
.crew-text { line-height: 1.5; }
.crew-text a { color: var(--person); text-decoration: underline; text-underline-offset: 2px; }
.crew-text a.crew-key { font-family: var(--mono); font-size: .92em; text-decoration: none; }
.crew-text code { padding: 1px 4px; border-radius: var(--r-1); background: var(--sunken); font-family: var(--mono); font-size: .9em; }
.crew-msg.mine .crew-text a { color: inherit; }
.crew-msg.mine .crew-text code { background: rgba(127, 127, 127, .25); }
.crew-msg.mine .mention { background: rgba(127, 127, 127, .3); color: inherit; }
.mention.me { background: var(--warn-wash); color: var(--on-warn-wash); }
.crew-edited { justify-self: end; font-size: var(--t-xs); opacity: .65; }
.crew-fwd { display: flex; align-items: center; gap: 4px; font-size: var(--t-sm); font-style: italic; opacity: .75; }
.crew-quote { display: grid; gap: 1px; min-width: 120px; max-width: 520px; padding: 4px var(--s-2); border: 0; border-left: 3px solid var(--person); border-radius: var(--r-1);
              background: var(--sunken); color: var(--ink); text-align: left; cursor: pointer; font: inherit; font-size: var(--t-md); }
.crew-msg.mine .crew-quote { background: rgba(127, 127, 127, .22); color: inherit; border-left-color: currentColor; }
.crew-quote span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; opacity: .8; }
/* code: a card with its language and Copy, coloured with the theme's own tokens */
.crew-codebox { width: min(640px, 100%); border: 1px solid var(--line); border-radius: var(--r-3); background: var(--sunken); overflow: hidden; text-align: left; }
.crew-b .crew-codebox { color: var(--ink); }
.crew-code-head { display: flex; align-items: center; justify-content: space-between; padding: 2px 4px 2px var(--s-3); border-bottom: 1px solid var(--line);
                  font: 500 var(--t-xs) var(--mono); color: var(--ink-3); }
.crew-code { margin: 0; padding: var(--s-3); font: var(--t-sm)/1.55 var(--mono); overflow: auto; white-space: pre; max-height: 460px; tab-size: 4; color: var(--ink); }
.hljs-comment, .hljs-quote, .hljs-meta { color: var(--ink-3); font-style: italic; }
.hljs-keyword, .hljs-selector-tag, .hljs-built_in, .hljs-doctag, .hljs-section { color: var(--agent); }
.hljs-string, .hljs-regexp, .hljs-addition, .hljs-attribute, .hljs-template-tag { color: var(--ok); }
.hljs-number, .hljs-literal, .hljs-symbol, .hljs-bullet, .hljs-variable.constant_ { color: var(--warn); }
.hljs-title, .hljs-title.function_, .hljs-name, .hljs-selector-id, .hljs-selector-class { color: var(--person); }
.hljs-type, .hljs-params, .hljs-attr, .hljs-variable, .hljs-property { color: var(--theirs); }
.hljs-deletion { color: var(--danger); }
.hljs-emphasis { font-style: italic; } .hljs-strong { font-weight: 700; }
.crew-imgs { display: grid; gap: 4px; width: min(420px, 100%); }
.crew-imgs.n2, .crew-imgs.n4 { grid-template-columns: 1fr 1fr; }
.crew-imgs.n3 { grid-template-columns: 1fr 1fr 1fr; }
.crew-imgs img { display: block; width: 100%; max-height: 320px; object-fit: cover; border-radius: var(--r-2); border: 1px solid var(--line); background: var(--sunken); }
.crew-imgs:not(.n1) img { aspect-ratio: 1; }
.crew-video { max-width: min(420px, 100%); max-height: 320px; border-radius: var(--r-2); background: var(--term-bg); }
.crew-file { display: inline-flex; align-items: center; gap: var(--s-2); max-width: 360px; padding: var(--s-2) var(--s-3); border: 1px solid var(--line);
             border-radius: var(--r-2); background: var(--surface); color: var(--ink); text-decoration: none; font-size: var(--t-md); }
.crew-file:hover { border-color: var(--line-2); }
.crew-file i { font-size: 18px; color: var(--ink-2); }
.crew-file span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crew-file small { flex: none; font-family: var(--mono); color: var(--ink-3); }
.crew-reacts { display: flex; flex-wrap: wrap; gap: 4px; }
.crew-react { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 7px; border: 1px solid var(--line); border-radius: 12px;
              background: var(--surface); color: var(--ink-2); cursor: pointer; font: inherit; font-size: var(--t-sm); }
.crew-react span { font-family: var(--mono); font-size: var(--t-xs); }
.crew-react.mine { border-color: var(--person); background: var(--person-wash); color: var(--on-person-wash); }
.crew-react.add { opacity: 0; }
.crew-msg:hover .crew-react.add { opacity: 1; }
.crew-seen { display: flex; align-items: center; gap: 4px; color: var(--ink-3); font-size: var(--t-xs); }
.crew-seen i { color: var(--person); }
/* what to do with a message: beside its bubble, on hover */
.crew-acts { align-self: center; display: flex; gap: 2px; padding: 2px; border: 1px solid var(--line); border-radius: var(--r-2);
             background: var(--raised); box-shadow: var(--shadow-1); visibility: hidden; flex: none; }
.crew-msg:hover .crew-acts, .crew-msg:focus-within .crew-acts { visibility: visible; }
.crew-cl { display: grid; gap: var(--s-1); max-width: 520px; padding: var(--s-3); border: 1px solid var(--line); border-radius: var(--r-2); background: var(--surface); }
.crew-cl ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.crew-cl li { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-2); }
.crew-cl label { display: flex; align-items: baseline; gap: var(--s-2); cursor: pointer; }
.crew-cl input { transform: translateY(2px); }
.crew-cl .done { text-decoration: line-through; color: var(--ink-3); }
.crew-cl-add { display: flex; gap: var(--s-1); }
.crew-cl-add input { flex: 1; height: calc(var(--ctl-h) - 6px); }

.crew-compose { position: relative; display: grid; gap: var(--s-2); padding: var(--s-2) var(--s-3) calc(var(--s-3) + env(safe-area-inset-bottom, 0px));
                border-top: 1px solid var(--line); background: var(--surface); }
.crew-compose.drop { outline: 2px dashed var(--person); outline-offset: -4px; }
.crew-compose.sending { opacity: .6; pointer-events: none; }
.crew-compose-row { display: flex; align-items: flex-end; gap: var(--s-1); }
.crew-compose textarea { flex: 1; min-height: var(--ctl-h); max-height: 220px; resize: none; padding-top: 6px; padding-bottom: 6px; line-height: 1.45; }
.crew-compose[data-mode="code"] textarea { font-family: var(--mono); font-size: var(--t-md); }
.crew-replying, .crew-mode-bar { display: flex; align-items: center; gap: var(--s-2); padding: var(--s-1) var(--s-2); border-radius: var(--r-2);
                                 background: var(--sunken); font-size: var(--t-md); color: var(--ink-2); }
.crew-replying[hidden], .crew-mode-bar[hidden], .crew-picked[hidden], .crew-mention[hidden] { display: none; }
.crew-replying span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crew-mode-bar select, .crew-mode-bar input { height: calc(var(--ctl-h) - 6px); width: auto; }
.crew-picked { display: flex; flex-wrap: wrap; gap: var(--s-1); }
.crew-picked .chip { height: 24px; }
.crew-picked .chip button { padding: 0; border: 0; background: none; color: inherit; cursor: pointer; }
.crew-mention { position: absolute; left: var(--s-3); bottom: 100%; z-index: 5; display: grid; min-width: 260px; padding: 4px; margin-bottom: 4px;
                border: 1px solid var(--line); border-radius: var(--r-3); background: var(--raised); box-shadow: var(--shadow-pop); }
.crew-mention button { display: flex; align-items: center; gap: var(--s-2); padding: 6px var(--s-2); border: 0; border-radius: var(--r-1); background: none;
                       color: inherit; text-align: left; cursor: pointer; font: inherit; }
.crew-mention button.on, .crew-mention button:hover { background: var(--hover); }

.crew-panel { display: flex; flex-direction: column; min-height: 0; border-left: 1px solid var(--line); background: var(--canvas); padding-top: env(safe-area-inset-top, 0px); }
.crew-panel[hidden] { display: none; }
.crew-panel > header { display: flex; align-items: center; gap: var(--s-2); padding: var(--s-3) var(--s-3) var(--s-3) var(--s-4); border-bottom: 1px solid var(--line); min-height: 56px; }
.crew-panel-body { flex: 1; overflow-y: auto; display: grid; align-content: start; gap: var(--s-4); padding: var(--s-4); }
.crew-panel-body form.row { flex-wrap: nowrap; }
.crew-panel-body form.row :is(input, select) { flex: 1; min-width: 0; }
.crew-people { display: grid; gap: 2px; }
.crew-people .crew-row { cursor: default; }
.crew-found { display: grid; gap: var(--s-1); }
.crew-hit { display: grid; gap: 2px; padding: var(--s-2) var(--s-3); border: 1px solid var(--line); border-radius: var(--r-2); background: var(--surface);
            color: inherit; text-align: left; cursor: pointer; font: inherit; font-size: var(--t-md); }
.crew-hit:hover { border-color: var(--line-2); }
.crew-hit > span:last-child { color: var(--ink-2); overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.crew-hit-top { display: flex; gap: var(--s-2); }
.crew-hit-top time { margin-left: auto; font-family: var(--mono); font-size: var(--t-xs); color: var(--ink-3); }
.crew-filegrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.crew-filegrid .crew-file { grid-column: 1 / -1; max-width: none; }
.crew-thumb img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--r-1); border: 1px solid var(--line); }
.crew-you { display: grid; gap: var(--s-4); }
.crew-blank { display: grid; justify-items: center; gap: var(--s-1); margin: auto; padding: var(--s-8) var(--s-4); text-align: center; color: var(--ink-3); font-size: var(--t-md); }
.crew-blank i { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: var(--s-2); border-radius: 50%; background: var(--sunken); border: 1px solid var(--line);
                font-size: 22px; color: var(--ink-2); }
.crew-blank b { color: var(--ink); font-size: var(--t-base); }
.crew-blank span { max-width: 280px; text-wrap: balance; }
.crew-pinbar { display: flex; align-items: center; gap: var(--s-2); width: 100%; padding: var(--s-2) var(--s-4); border: 0; border-bottom: 1px solid var(--line);
               background: var(--warn-wash); color: var(--on-warn-wash); text-align: left; cursor: pointer; font: inherit; font-size: var(--t-md); }
.crew-pinbar[hidden] { display: none; }
.crew-pinbar span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crew-code-input { min-height: 320px; font: var(--t-md)/1.55 var(--mono); tab-size: 4; white-space: pre; overflow: auto; resize: vertical; }
.crew-dialog.wide { width: min(860px, calc(100vw - 32px)); }
.crew-dialog .row select { width: auto; max-width: 260px; }
.crew-cl-items { display: grid; gap: var(--s-1); margin: 0; padding: 0; list-style: none; max-height: 46dvh; overflow-y: auto; }
.crew-cl-items li { display: flex; align-items: center; gap: var(--s-2); }
.crew-cl-items li > i { color: var(--ink-3); font-size: 18px; }
.crew-cl-items input { flex: 1; }
.crew-cl-more { align-self: flex-start; }
.danger-text { color: var(--danger); }

.crew-menu { position: fixed; z-index: 80; display: grid; min-width: 200px; padding: 4px; border: 1px solid var(--line); border-radius: var(--r-3);
             background: var(--raised); box-shadow: var(--shadow-pop); }
.crew-menu[hidden] { display: none; }
.crew-menu > button { display: flex; align-items: center; gap: var(--s-2); height: var(--ctl-h); padding: 0 var(--s-3); border: 0; border-radius: var(--r-1);
                      background: none; color: inherit; text-align: left; cursor: pointer; font: inherit; font-size: var(--t-md); }
.crew-menu > button:hover { background: var(--hover); }
.crew-menu > button.danger { color: var(--danger); }
.crew-menu hr { margin: 4px 0; border: 0; border-top: 1px solid var(--line); }
.crew-emojis { display: grid; grid-template-columns: repeat(5, 1fr); gap: 2px; }
.crew-emojis button { width: 40px; height: 40px; border: 0; border-radius: var(--r-2); background: none; font-size: 22px; cursor: pointer; }
.crew-emojis button:hover { background: var(--hover); }
.crew-dialog > form { gap: var(--s-3); padding: var(--s-5); }
.crew-dialog h2 { font-size: var(--t-lg); }
.crew-dialog .segmented { align-self: start; }
.crew-pick { display: grid; gap: 2px; max-height: 46dvh; overflow-y: auto; margin: 0 calc(-1 * var(--s-2)); }
.crew-pick input { flex: none; }
.crew-dialog-acts { display: flex; justify-content: flex-end; gap: var(--s-2); padding-top: var(--s-2); }

@media (max-width: 1100px) {
  .crew-app[data-panel] { grid-template-columns: 300px minmax(0, 1fr); }
  .crew-panel { position: fixed; inset: 0 0 0 auto; z-index: 40; width: min(380px, 100vw); box-shadow: var(--shadow-pop); }
}
@media (max-width: 760px) {
  .crew-app, .crew-app[data-panel] { grid-template-columns: 100vw; }
  .crew-app[data-view="list"] .crew-main { display: none; }
  .crew-app[data-view="chat"] .crew-side { display: none; }
  .crew-back { display: inline-flex; }
  .crew-head .btn-sm[data-crew="files"], .crew-head .btn-sm[data-crew="pinned"] { display: none; }
  .crew-msgs { padding: var(--s-3) var(--s-3) var(--s-2); }
  .crew-msg { max-width: 100%; }
  .crew-panel { width: 100vw; }
  .crew-dialog-acts .btn { flex: 1; }
}
@media (pointer: coarse) {
  .crew-react.add { opacity: 1; }
  .crew-acts { display: none; } /* a tap opens the menu instead */
}

/* Deployments: a card per environment, then the deploys */
.env-cards { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); margin-bottom: var(--s-4); }
.env-card { display: flex; flex-direction: column; margin: 0; }
.env-card .panel-body { flex: 1; }
.env-live { font-size: var(--t-lg); }
.env-facts { display: grid; grid-template-columns: auto 1fr; gap: 4px var(--s-3); margin: 0; font-size: var(--t-md); }
.env-facts dt { color: var(--ink-3); }
.env-facts dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.deploy-grid { margin-bottom: var(--s-4); align-items: start; }
.deploy-grid > * { min-width: 0; margin: 0; }
.deploy-log { max-height: 560px; overflow: auto; margin: 0; border-radius: 0 0 var(--r-3) var(--r-3); white-space: pre-wrap; overflow-wrap: anywhere; }
/* viewing as someone else: on every page, staying in sight */
.viewing-as { position: sticky; top: 0; z-index: 30; align-items: center; box-shadow: var(--shadow-1); }
.hub-coming { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 2px var(--s-5); margin: 0; padding: 0; list-style: none; font-size: var(--t-md); }
.hub-coming li { display: flex; gap: var(--s-3); padding: 6px 0; border-bottom: 1px solid var(--line); }