/* ==========================================================================
   Eryce — design system (round 4)
   One page background, one panel surface, one ink for every word.
   Hierarchy comes from size, weight, position and elevation, never from grey.
   Dark red is the accent: the Wren & Vera yin-yang, the count of what waits
   for you, and the one marker on the thing that waits. Nothing else has a hue.
   Agents at work show by motion (breathing, turning) and ink, never by colour.
   ========================================================================== */

/* ---------- Fonts (local, offline) ---------- */
@font-face {
  font-family: "Hanken Grotesk"; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url("../fonts/hanken-grotesk-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Hanken Grotesk"; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url("../fonts/hanken-grotesk-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Geist Mono"; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url("../fonts/geist-mono-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Geist Mono"; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url("../fonts/geist-mono-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- Tokens ---------- */
:root {
  /* Two surfaces, and only two: the room and the panel. */
  --bg: #F3F3F1;              /* the page */
  --surface: #FFFFFF;         /* panels, cards, bubbles, floating layers */

  /* Neutral fills for controls and marks: tracks, chips, avatars, the selected row, our bubbles.
     Translucent ink, so they read the same on the page and on a panel. Never a container background. */
  --fill: rgba(28, 27, 31, .06);
  --fill-2: rgba(28, 27, 31, .11);   /* progress track, pressed */
  --fill-solid: #EFEEEB;             /* the same fill, opaque: avatars, our bubbles (things that overlap) */
  --hover: rgba(28, 27, 31, .035);   /* hover on a surface */
  --press: #F7F7F6;                  /* hover on a white control */
  --line: rgba(28, 27, 31, .09);     /* hairline between things */
  --line-strong: rgba(28, 27, 31, .16); /* the outline of a control */

  /* Ink: the one colour for every word. */
  --ink: #1C1B1F;
  --ink-hover: #36343B;       /* hover on an ink fill */
  --on-ink: #FFFFFF;          /* words on ink or on the accent */

  /* Strokes: rings, connectors, inactive marks, disabled glyphs. Never text. */
  --stroke: #B3B1AD;
  --stroke-faint: #D9D7D3;

  /* The accent: dark red. Only the yin-yang, the count of what waits for you, the needs-you marker. */
  --accent: #A3173F;
  --accent-strong: #84102F;
  --accent-on-ink: #D63A6C;   /* the same marker on an ink surface (toasts) */

  /* Type: five sizes, three weights, one ink. See the text styles below. */
  --font: "Hanken Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --fs-meta: 12px;
  --fs-body: 14px;
  --fs-heading: 16px;
  --fs-title: 20px;
  --fs-figure: 32px;

  /* Space: 4px base */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px; --space-5: 20px;
  --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px;

  /* Radius */
  --r-1: 6px;    /* tiny marks, kbd */
  --r-2: 10px;   /* inputs, rows */
  --r-3: 14px;   /* cards, menus, popovers, callouts, the decision */
  --r-4: 18px;   /* panels, tiles, drawers, the review queue */
  --r-5: 24px;   /* modals */
  --r-pill: 999px;

  /* Elevation. Flat at rest. Floating layers float. --raise lifts the one thing that waits for a person. */
  --ring: 0 0 0 1px rgba(28, 27, 31, .06);
  --shadow-1: 0 1px 2px rgba(28, 27, 31, .08), 0 0 0 1px rgba(28, 27, 31, .05);
  --shadow-2: 0 8px 20px -8px rgba(28, 27, 31, .16), 0 2px 4px rgba(28, 27, 31, .04), 0 0 0 1px rgba(28, 27, 31, .06);
  --shadow-3: 0 18px 40px -12px rgba(28, 27, 31, .22), 0 4px 10px -4px rgba(28, 27, 31, .08), 0 0 0 1px rgba(28, 27, 31, .06);
  --shadow-4: 0 40px 80px -20px rgba(28, 27, 31, .30), 0 10px 24px -10px rgba(28, 27, 31, .12), 0 0 0 1px rgba(28, 27, 31, .06);
  --raise: 0 1px 2px rgba(28, 27, 31, .05), 0 12px 32px -12px rgba(28, 27, 31, .26), 0 0 0 1px rgba(28, 27, 31, .08);

  /* Motion: quick, soft, never bouncy. Repeating motion means an agent is working. */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --ease-io: cubic-bezier(.6, 0, .25, 1);
  --dur-1: 120ms;
  --dur-2: 200ms;
  --dur-3: 320ms;
  --breath: 2.8s;
  --turn: 12s;

  /* Layout */
  --bar-h: 60px;
  --page-max: 1280px;
  --page-pad: 40px;
  --gap: 16px;

  /* ---- Earlier names, remapped to the round-4 meaning. Use the names above in new code. ---- */
  --bg-2: var(--fill);
  --bg-3: var(--fill-2);
  --surface-2: var(--surface);          /* no insets inside a panel */
  --surface-hover: var(--hover);
  --line-solid: #E6E5E1;
  --ink-2: var(--ink);                  /* every text token is the ink */
  --ink-3: var(--ink);
  --ink-4: var(--stroke);               /* strokes only */
  --ink-5: var(--stroke-faint);
  --agent: var(--ink);                  /* agents are ink; work shows as motion */
  --agent-strong: var(--ink);
  --agent-bright: var(--ink);
  --agent-soft: var(--stroke);
  --agent-tint: var(--fill);
  --agent-tint-2: rgba(28, 27, 31, .10);
  --human: var(--accent);               /* a fill that signals: the count badge */
  --human-strong: var(--accent-strong);
  --human-bright: var(--accent);        /* the needs-you marker */
  --human-ink: var(--ink);              /* words stay ink */
  --human-tint: transparent;            /* no washes */
  --human-tint-2: transparent;
  --attention-bg: var(--surface);       /* needs a person: white, raised */
  --attention-wash: var(--hover);
  --attention-edge: var(--line);
  --attention-ink: var(--ink);
  --attention-shadow: var(--raise);
  --chat-room: var(--surface);          /* the conversation sits on the panel */
  --chat-theirs: var(--surface);        /* theirs: white with a hairline */
  --chat-theirs-ink: var(--ink);
  --chat-ours: var(--fill-solid);       /* ours: the neutral fill */
  --chat-ours-ink: var(--ink);
  --chat-ours-meta: var(--ink);
  --chat-outbox-edge: var(--stroke);    /* in the outbox: dashed */
  --chat-team-room: var(--surface);
  --chat-team: var(--surface);
  --chat-team-me: var(--fill-solid);
  --chat-team-ink: var(--ink);
  --ok: var(--ink);
  --ok-tint: var(--fill);
  --danger: var(--ink);
  --danger-tint: var(--fill);
  --src-writing: var(--ink);
  --src-stated: var(--ink);
  --src-estimate: var(--ink);
  --src-unknown: var(--ink);
  --src-disagree: var(--ink);
  --t-xs: var(--fs-meta);
  --t-sm: var(--fs-body);
  --t-md: var(--fs-body);
  --t-lg: var(--fs-heading);
  --t-xl: var(--fs-title);
  --t-2xl: var(--fs-figure);
  --t-3xl: var(--fs-figure);
  --t-num: var(--fs-figure);
}
@media (max-width: 1360px) { :root { --page-pad: 32px; } }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; } /* components set display; `hidden` must still hide them */
html, body { height: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 400 var(--fs-body)/1.5 var(--font);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility;
  overflow: hidden;
}
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; }
img, svg { display: block; }
h1, h2, h3, h4, p { margin: 0; }
::selection { background: rgba(28, 27, 31, .14); color: var(--ink); }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
* { scrollbar-width: thin; scrollbar-color: rgba(28, 27, 31, .18) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: rgba(28, 27, 31, .16); border-radius: 10px; border: 3px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-track { background: transparent; }

/* Icons: 20-unit grid, 1.5 stroke, currentColor (ink) */
.ic { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.ic-12 { width: 12px; height: 12px; }
.ic-14 { width: 14px; height: 14px; }
.ic-16 { width: 16px; height: 16px; }
.ic-20 { width: 20px; height: 20px; }
.ic-24 { width: 24px; height: 24px; }

/* ==========================================================================
   Text styles — the only six, all in ink (plus code for machine text)
   ========================================================================== */
.t-figure  { font-size: var(--fs-figure);  font-weight: 300; line-height: 1.1; font-variant-numeric: tabular-nums; }  /* the greeting, figures that matter */
.t-title   { font-size: var(--fs-title);   font-weight: 500; line-height: 1.3; }   /* view titles, a site's name, modal titles */
.t-heading { font-size: var(--fs-heading); font-weight: 500; line-height: 1.4; }   /* panel and section headings, the question in a decision */
.t-strong  { font-size: var(--fs-body);    font-weight: 500; line-height: 1.45; }  /* names, labels, values, buttons, row titles */
.t-body    { font-size: var(--fs-body);    font-weight: 400; line-height: 1.5; }   /* everything you read, emails included */
.t-meta    { font-size: var(--fs-meta);    font-weight: 400; line-height: 1.4; }   /* times, sources, counts, chips */
.t-code    { font-family: var(--mono); font-size: var(--fs-meta); font-weight: 400; line-height: 1.6; } /* agent chains, tool calls, keys, ids */
.unit { font-size: var(--fs-body); font-weight: 500; margin-left: .2em; }        /* "MW" after a figure: the Strong style */

/* Earlier utilities, mapped onto the styles above */
.t-xs { font-size: var(--fs-meta); line-height: 1.4; }
.t-sm, .t-md { font-size: var(--fs-body); line-height: 1.5; }
.t-lg { font-size: var(--fs-heading); line-height: 1.45; }
.t-xl, .t-2xl { font-size: var(--fs-title); font-weight: 500; line-height: 1.3; }
.t-3xl, .t-num { font-size: var(--fs-figure); font-weight: 300; line-height: 1.1; font-variant-numeric: tabular-nums; }
.strong, .medium { font-weight: 500; }
.muted, .subtle, .human-text, .agent-text { color: var(--ink); } /* no quieter inks: hierarchy is size and weight */
.mono { font-family: var(--mono); font-size: var(--fs-meta); }
.tnum { font-variant-numeric: tabular-nums; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } /* never on names, dates or reasons */
.clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* prose that is the content: two lines at most */
.nowrap { white-space: nowrap; } /* a name, a date or a figure stays whole on its line */
/* UI.seq(parts): a meta line whose parts wrap whole. The "·" sits in the gap before a part; a part that starts a
   line pushes its "·" outside the box, where it is clipped, so a separator never ends or starts a line. */
.seq { display: flex; flex-wrap: wrap; column-gap: .8em; min-width: 0; overflow: hidden; }
.seq > span { position: relative; min-width: 0; overflow-wrap: anywhere; }
.seq > span + span::before { content: "·"; position: absolute; right: 100%; width: .8em; text-align: center; }
.label { font-size: var(--fs-body); font-weight: 500; }
.sep-dot::before { content: "·"; margin: 0 .45em; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Layout helpers (keep view CSS for real layout) */
.row { display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
.col { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.grow { flex: 1 1 auto; min-width: 0; }
.spacer { flex: 1 1 auto; }
.hr { height: 1px; background: var(--line); border: 0; margin: var(--space-4) 0; }

/* ==========================================================================
   Shell
   ========================================================================== */
.app { height: 100vh; display: grid; grid-template-rows: var(--bar-h) minmax(0, 1fr); }
.bar {
  position: relative; z-index: 30; height: var(--bar-h);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--space-4);
  padding: 0 20px;
}
.bar-left, .bar-right { display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
.bar-right { justify-content: flex-end; }
.brand { display: inline-flex; align-items: center; gap: 10px; height: 36px; padding: 0 10px 0 6px; border-radius: var(--r-pill); text-decoration: none; color: var(--ink); }
.brand-mark { width: 22px; height: 22px; color: var(--ink); }
.brand-name { font-size: var(--fs-heading); font-weight: 500; line-height: 1; }

.nav { display: flex; align-items: center; gap: 2px; padding: 3px; background: var(--fill); border-radius: var(--r-pill); }
.nav-item {
  position: relative; display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 16px;
  border-radius: var(--r-pill); color: var(--ink); text-decoration: none; font-weight: 500; font-size: var(--fs-body);
  transition: background var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
}
.nav-item:hover { background: rgba(255, 255, 255, .55); }
.nav-item.is-active { background: var(--surface); box-shadow: var(--shadow-1); }
.nav-item .ic { width: 16px; height: 16px; }

/* Count badge. Neutral by default; .count-human is the dark-red count of what waits for you. */
.count {
  display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--r-pill);
  font-size: var(--fs-meta); font-weight: 400; font-variant-numeric: tabular-nums; line-height: 1;
  background: var(--fill); color: var(--ink);
}
.count-human { background: var(--accent); color: var(--on-ink); }
.count-agent { background: var(--fill); color: var(--ink); }
/* Once you are in the Inbox its review queue carries the count: the tab badge goes quiet. */
.nav-item.is-active .count-human { background: var(--fill); color: var(--ink); }

.mode-btn {
  display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px 0 12px; border-radius: var(--r-pill);
  border: 0; background: transparent; box-shadow: inset 0 0 0 1px var(--line-strong); color: var(--ink); font-weight: 500;
  text-decoration: none; transition: background var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
}
.mode-btn:hover { background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-strong), var(--shadow-1); }
.mode-btn .ic { width: 16px; height: 16px; }

.main { position: relative; min-height: 0; overflow: hidden; }
.view { position: absolute; inset: 0; overflow: auto; }
.view.is-entering { animation: view-in var(--dur-3) var(--ease); }
.page { max-width: calc(var(--page-max) + var(--page-pad) * 2); margin: 0 auto; padding: 8px var(--page-pad) 40px; }

/* Grid-first is its own mode: the map is the room, the bar floats on it */
.app[data-mode="grid"] { grid-template-rows: minmax(0, 1fr); }
.app[data-mode="grid"] .bar { position: absolute; inset: 0 0 auto 0; display: flex; justify-content: space-between; padding: 12px 16px 0; pointer-events: none; }
.app[data-mode="grid"] .bar > * { pointer-events: auto; }
.app[data-mode="grid"] .bar-right { pointer-events: none; }
.app[data-mode="grid"] .bar-right > .mode-exit { pointer-events: auto; }
.app[data-mode="grid"] .main { grid-row: 1; }
.mode-title { display: none; align-items: center; gap: 10px; height: 44px; padding: 0 16px 0 10px; border-radius: var(--r-pill); background: rgba(255, 255, 255, .9); backdrop-filter: blur(14px); box-shadow: var(--shadow-2); }
.mode-title .brand { padding: 0 6px; height: 30px; }
.mode-title .mode-name { font-weight: 500; padding-left: 12px; border-left: 1px solid var(--line-strong); line-height: 18px; }
.app[data-mode="grid"] .bar-left > .brand, .app[data-mode="grid"] .nav, .app[data-mode="grid"] .bar-right > :not(.mode-exit) { display: none; }
.app[data-mode="grid"] .mode-title { display: inline-flex; }
.app:not([data-mode="grid"]) .mode-exit { display: none; }
.app[data-mode="grid"] .mode-exit { display: inline-flex; background: rgba(255, 255, 255, .9); backdrop-filter: blur(14px); box-shadow: var(--shadow-2); height: 44px; padding: 0 18px 0 14px; }

/* Signing in is a page of its own: no bar, the view fills the window */
.app[data-mode="auth"] { grid-template-rows: minmax(0, 1fr); }
/* While the first answer is on its way: the mark alone, still, in the middle (and what went wrong, if it did) */
.boot { position: absolute; inset: 0; display: grid; place-items: center; padding: 40px; }
.boot > .brand-mark { width: 32px; height: 32px; animation: rise var(--dur-3) var(--ease) both; }

/* Placeholder for views that are not built yet */
.placeholder { min-height: 100%; display: grid; place-items: center; padding: 40px; }
.placeholder-inner { max-width: 440px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px; animation: rise var(--dur-3) var(--ease); }
.placeholder-mark { width: 56px; height: 56px; border-radius: 18px; background: var(--surface); box-shadow: var(--ring); display: grid; place-items: center; margin-bottom: 4px; }
.placeholder-mark .ic { width: 24px; height: 24px; }
.placeholder h1 { font-size: var(--fs-title); font-weight: 500; line-height: 1.3; }
.placeholder p { font-size: var(--fs-body); line-height: 1.5; }
.placeholder .note { font-size: var(--fs-meta); }

/* ==========================================================================
   Surfaces
   ========================================================================== */
.tile {
  position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0;
  background: var(--surface); border-radius: var(--r-4); padding: 20px 24px; box-shadow: var(--ring);
}
.tile-head { display: flex; align-items: center; gap: 12px; min-width: 0; min-height: 32px; }
.tile-heading { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tile-title { font-size: var(--fs-heading); font-weight: 500; line-height: 1.4; }
.tile-sub { font-size: var(--fs-body); line-height: 1.45; }
.tile-actions { margin-left: auto; display: flex; align-items: center; gap: 6px; flex: none; }
.tile-foot { margin-top: auto; display: flex; align-items: center; gap: 10px; padding-top: 16px; min-width: 0; }
.tile.is-link { cursor: pointer; transition: box-shadow var(--dur-2) var(--ease); }
.tile.is-link:hover { box-shadow: var(--shadow-2); }

.card { background: var(--surface); border-radius: var(--r-3); box-shadow: var(--ring); padding: 14px 16px; }
.well { border-radius: var(--r-3); padding: 14px 16px; box-shadow: inset 0 0 0 1px var(--line); }

/* ==========================================================================
   Buttons — ink is the action
   ========================================================================== */
.btn {
  --h: 36px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: var(--h); padding: 0 16px;
  border: 0; border-radius: var(--r-pill); background: var(--surface); color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--line-strong);
  font: 500 var(--fs-body)/1 var(--font); white-space: nowrap; text-decoration: none; user-select: none;
  transition: background var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease), color var(--dur-1) var(--ease), transform var(--dur-1) var(--ease);
}
.btn:hover { background: var(--press); box-shadow: inset 0 0 0 1px rgba(28, 27, 31, .26); }
.btn:active { transform: translateY(.5px); }
.btn .ic { width: 16px; height: 16px; margin: 0 -2px; }
/* Primary: ink. One per area. The recommended choice of a decision is primary too. */
.btn-primary, .btn-human { background: var(--ink); color: var(--on-ink); box-shadow: none; }
.btn-primary:hover, .btn-human:hover { background: var(--ink-hover); box-shadow: none; }
.btn-agent { background: var(--surface); color: var(--ink); }
.btn-ghost { background: transparent; box-shadow: none; }
.btn-ghost:hover { background: var(--fill); box-shadow: none; }
/* Destructive: plain until you mean it. The confirmation names what is lost. */
.btn-danger:hover { background: var(--ink); color: var(--on-ink); box-shadow: none; }
.btn-sm { --h: 30px; padding: 0 12px; gap: 6px; }
.btn-sm .ic { width: 14px; height: 14px; }
.btn-lg { --h: 44px; padding: 0 22px; gap: 10px; }
.btn-block { width: 100%; }
.btn[disabled], .btn.is-disabled { opacity: .4; pointer-events: none; }
.btn-link { display: inline-flex; align-items: center; gap: 4px; flex: none; border: 0; background: none; padding: 0; color: var(--ink); font-weight: 500; font-size: var(--fs-body); white-space: nowrap; text-decoration: none; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.btn-link:hover { text-decoration: underline; text-decoration-color: var(--stroke); }
.btn-link .ic { width: 14px; height: 14px; transition: transform var(--dur-2) var(--ease); }
.btn-link:hover .ic { transform: translateX(2px); }
/* Send: the one send button (the inbox composer, the prioritizer chat). Label first, then the paper plane.
   Ink when there is something to send; a quiet pill when there is not (a disabled control fades, like every other). */
.btn-send { --h: 32px; padding: 0 14px 0 16px; gap: 7px; background: var(--ink); color: var(--on-ink); box-shadow: none; }
.btn-send:hover { background: var(--ink-hover); box-shadow: none; }
.btn-send .ic { width: 14px; height: 14px; margin: 0 -1px 0 0; }
.btn-send[disabled], .btn-send.is-disabled { background: rgba(28, 27, 31, .15); color: var(--ink); box-shadow: none; } /* at .4: the fill */

.icon-btn {
  --s: 32px;
  width: var(--s); height: var(--s); flex: none; display: inline-grid; place-items: center; padding: 0;
  border: 0; border-radius: var(--r-pill); background: transparent; color: var(--ink); text-decoration: none;
  transition: background var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
}
.icon-btn:hover { background: var(--fill); }
.icon-btn.is-active, .icon-btn[aria-expanded="true"] { background: var(--fill-2); }
.icon-btn .ic { width: 18px; height: 18px; }
.icon-btn-sm { --s: 28px; }
.icon-btn-sm .ic { width: 16px; height: 16px; }
.icon-btn-lg { --s: 40px; }
.icon-btn-lg .ic { width: 20px; height: 20px; }
.icon-btn-outline { background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-strong); }
.icon-btn-outline:hover { background: var(--press); }
.icon-btn-solid { background: var(--ink); color: var(--on-ink); }
.icon-btn-solid:hover { background: var(--ink-hover); }
.icon-btn[disabled] { opacity: .4; pointer-events: none; }

/* Zoom: the one control for a map canvas (Map, Grid-first). A vertical white stack, bottom right:
   the whole world, a hairline, then in and out. Views move it with their own class if a panel is in the way. */
.zoomctl { position: absolute; right: 16px; bottom: 16px; z-index: 5; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px; border-radius: var(--r-pill); background: var(--surface); box-shadow: var(--shadow-2); }
.zoomctl-btn { position: relative; width: 36px; height: 36px; flex: none; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--ink); transition: background var(--dur-1) var(--ease), opacity var(--dur-2) var(--ease); }
.zoomctl-btn:hover { background: var(--fill); }
.zoomctl-btn:active { background: var(--fill-2); }
.zoomctl-btn .ic { width: 18px; height: 18px; }
.zoomctl-btn[data-zoom="world"] { margin-bottom: 5px; }
.zoomctl-btn[data-zoom="world"]::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: -4px; height: 1px; background: var(--line); pointer-events: none; }
.zoomctl-btn[disabled], .zoomctl-btn.is-off { opacity: .4; pointer-events: none; }

/* ==========================================================================
   Controls — one language: on is ink, off is a quiet track, the choice is raised
   ========================================================================== */
.switch {
  --w: 40px; --h: 24px; --k: 18px;
  position: relative; flex: none; width: var(--w); height: var(--h); padding: 0; border: 0; border-radius: var(--r-pill);
  background: rgba(28, 27, 31, .15); transition: background var(--dur-2) var(--ease);
}
.switch::after {
  content: ""; position: absolute; top: calc((var(--h) - var(--k)) / 2); left: calc((var(--h) - var(--k)) / 2);
  width: var(--k); height: var(--k); border-radius: 50%; background: #fff;
  box-shadow: 0 1px 3px rgba(28, 27, 31, .22), 0 0 0 .5px rgba(28, 27, 31, .06);
  transition: transform var(--dur-2) var(--ease);
}
.switch:hover { background: rgba(28, 27, 31, .21); }
.switch[aria-checked="true"] { background: var(--ink); }
.switch[aria-checked="true"]:hover { background: var(--ink-hover); }
.switch[aria-checked="true"]::after { transform: translateX(calc(var(--w) - var(--h))); }
.switch-sm { --w: 32px; --h: 20px; --k: 14px; }
.switch[disabled] { opacity: .4; pointer-events: none; }
.switch-field { display: flex; align-items: center; gap: 12px; }

/* Segmented control: equal segments on a quiet track, the choice raised in white.  --n = segments, --i = active index */
.seg {
  --n: 2; --i: 0; --h: 34px;
  position: relative; display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; align-items: stretch;
  height: var(--h); padding: 3px; border-radius: var(--r-pill); background: var(--fill); isolation: isolate;
}
.seg-thumb {
  position: absolute; z-index: -1; top: 3px; bottom: 3px; left: 3px; width: calc((100% - 6px) / var(--n));
  border-radius: var(--r-pill); background: var(--surface); box-shadow: var(--shadow-1);
  transform: translateX(calc(var(--i) * 100%)); transition: transform var(--dur-2) var(--ease), background var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
}
.seg > button {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 0 14px; border: 0; background: none;
  border-radius: var(--r-pill); color: var(--ink); font-weight: 500; font-size: var(--fs-body); white-space: nowrap;
  transition: color var(--dur-2) var(--ease);
}
.seg > button .ic { width: 14px; height: 14px; }
.seg-sm { --h: 28px; }
.seg-sm > button { padding: 0 10px; }
.seg-lg { --h: 40px; }
.seg-lg > button { padding: 0 18px; }

/* On / Drafts / Off: the thumb carries the state. On is ink (like a switch that is on), Drafts is ringed, Off is plain. */
.tri { --n: 3; --h: 30px; }
.tri > button { padding: 0 11px; min-width: 56px; }
.tri[data-value="on"] .seg-thumb { background: var(--ink); box-shadow: none; }
.tri[data-value="on"] > button[aria-checked="true"] { color: var(--on-ink); }
.tri[data-value="drafts"] .seg-thumb { background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--ink), var(--shadow-1); }

/* Tabs: rooms and content. Ink words, the open one underlined in ink. */
.tabs { display: flex; align-items: center; gap: 24px; min-width: 0; }
.tab {
  position: relative; display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0; border: 0; background: none;
  color: var(--ink); font-weight: 500; font-size: var(--fs-body); white-space: nowrap; text-decoration: none;
}
.tab .ic { width: 16px; height: 16px; }
.tab::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; border-radius: 2px; background: var(--ink); transform: scaleX(0); transition: transform var(--dur-2) var(--ease); }
.tab:hover::after { transform: scaleX(1); background: var(--line-strong); }
.tab.is-active::after, .tab[aria-selected="true"]::after { transform: scaleX(1); background: var(--ink); }
.tab .count { margin-left: 2px; }
.tab .av { --s: 20px; }

/* Checkbox and radio: a ring that fills with ink. */
.check, .radio { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-size: var(--fs-body); }
.check input, .radio input {
  appearance: none; -webkit-appearance: none; flex: none; width: 18px; height: 18px; margin: 0; background: var(--surface);
  box-shadow: inset 0 0 0 1.5px var(--stroke); transition: background var(--dur-1), box-shadow var(--dur-1); cursor: pointer;
}
.check input { border-radius: 5px; }
.radio input { border-radius: 50%; }
.check input:hover, .radio input:hover { box-shadow: inset 0 0 0 1.5px var(--ink); }
.check input:checked { background: var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 10.5l3 3 6-7'/%3E%3C/svg%3E") center / 14px no-repeat; box-shadow: none; }
.radio input:checked { background: radial-gradient(circle, var(--ink) 0 4px, var(--surface) 4.5px); box-shadow: inset 0 0 0 1.5px var(--ink); }
.check input:disabled, .radio input:disabled { opacity: .4; cursor: default; }

/* Progress: a quiet track, an ink bar. */
.progress { --v: 50%; height: 4px; border-radius: 4px; background: var(--fill-2); overflow: hidden; }
.progress > i { display: block; width: var(--v); height: 100%; border-radius: 4px; background: var(--ink); transition: width var(--dur-3) var(--ease); }
.progress-agent > i, .progress-human > i { background: var(--ink); }

/* ==========================================================================
   Inputs
   ========================================================================== */
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field-label { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-body); font-weight: 500; }
.field-label .ic { width: 14px; height: 14px; }
.field-hint { font-size: var(--fs-meta); line-height: 1.45; }
.field-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.input, .select, .textarea {
  width: 100%; height: 38px; padding: 0 12px; border: 0; border-radius: var(--r-2);
  background: var(--surface); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-strong);
  font: 400 var(--fs-body)/1.4 var(--font); transition: box-shadow var(--dur-1) var(--ease), background var(--dur-1) var(--ease);
}
.input::placeholder, .textarea::placeholder { color: var(--ink); opacity: .42; } /* the one place text is lighter */
.input:hover, .select:hover, .textarea:hover { box-shadow: inset 0 0 0 1px rgba(28, 27, 31, .26); }
.input:focus, .select:focus, .textarea:focus { outline: none; box-shadow: inset 0 0 0 1px var(--ink), 0 0 0 3px rgba(28, 27, 31, .08); }
.input-quiet { box-shadow: none; background: var(--fill); }
.input-quiet:hover { box-shadow: none; background: var(--fill-2); }
.textarea { height: auto; min-height: 96px; padding: 10px 12px; line-height: 1.55; resize: vertical; display: block; }
.textarea.mono { font-family: var(--mono); font-size: var(--fs-meta); line-height: 1.65; }
.select {
  appearance: none; -webkit-appearance: none; padding-right: 34px; cursor: pointer; text-overflow: ellipsis;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%231C1B1F' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center; background-size: 16px;
}
.input-wrap { position: relative; display: flex; align-items: center; }
.input-wrap > .ic { position: absolute; left: 12px; width: 16px; height: 16px; pointer-events: none; }
.input-wrap > .input { padding-left: 36px; }
.input-sm, .select-sm { height: 32px; }
/* A field that cannot be changed here fades, like every disabled control */
.input:disabled, .select:disabled, .textarea:disabled { opacity: .4; cursor: default; }

.stepper { display: inline-flex; align-items: center; align-self: flex-start; flex: none; height: 38px; padding: 0 3px; border-radius: var(--r-pill); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-strong); }
.stepper > button { width: 32px; height: 32px; border: 0; background: none; border-radius: 50%; display: grid; place-items: center; color: var(--ink); transition: background var(--dur-1); }
.stepper > button:hover { background: var(--fill); }
.stepper > button .ic { width: 16px; height: 16px; }
.stepper > output { min-width: 30px; text-align: center; font-weight: 500; font-variant-numeric: tabular-nums; }

/* Composer-style token input (To / Cc) */
.tokens { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 38px; padding: 5px 8px; border-radius: var(--r-2); box-shadow: inset 0 0 0 1px var(--line-strong); background: var(--surface); }
.tokens > input { flex: 1; min-width: 80px; border: 0; outline: 0; background: none; height: 26px; }

/* ==========================================================================
   Floating layers: menu, popover, tooltip, modal, drawer, toast
   Layers: bar 30 · scrim 50 · modal/drawer 51 · menu/popover 70 · tooltip 90 · toasts 95
   ========================================================================== */
.menu {
  position: fixed; z-index: 70; min-width: 220px; max-width: 320px; padding: 6px; border-radius: var(--r-3);
  background: var(--surface); box-shadow: var(--shadow-3); animation: pop-in var(--dur-2) var(--ease);
}
.menu-item {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 36px; padding: 0 10px; border: 0; border-radius: 9px;
  background: none; color: var(--ink); font-size: var(--fs-body); text-align: left; text-decoration: none;
}
.menu-item:hover, .menu-item.is-focus, .menu-item:focus-visible { background: var(--fill); outline: none; }
.menu-item > .ic { width: 16px; height: 16px; }
.menu-item .menu-meta { margin-left: auto; font-size: var(--fs-meta); }
.menu-item .menu-check { margin-left: auto; display: grid; }
.menu-item.is-disabled { opacity: .4; pointer-events: none; }
.menu-sep { height: 1px; background: var(--line); margin: 6px 4px; }
.menu-label { padding: 8px 10px 4px; font-size: var(--fs-meta); }
.menu-text { padding: 8px 10px; font-size: var(--fs-meta); line-height: 1.45; }

.popover {
  position: fixed; z-index: 70; width: max-content; max-width: 380px; padding: 16px 18px; border-radius: var(--r-3);
  background: var(--surface); box-shadow: var(--shadow-3); animation: pop-in var(--dur-2) var(--ease);
}
.popover-title { font-weight: 500; font-size: var(--fs-body); margin-bottom: 4px; }
.popover-text { font-size: var(--fs-body); line-height: 1.5; }

/* Set aside: why, and when to look again (UI.askSetAside) */
.aside-pop { padding: 18px 18px 16px; }
.aside-form { display: flex; flex-direction: column; gap: 14px; }
.aside-form .popover-title { margin: 0; font-size: var(--fs-heading); line-height: 1.4; }
.aside-form .textarea { min-height: 64px; }
.aside-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: -6px; }
.aside-optional { margin-left: 4px; font-size: var(--fs-meta); font-weight: 400; }
.aside-foot { display: flex; justify-content: flex-end; gap: 8px; padding-top: 2px; }

.tooltip {
  position: fixed; z-index: 90; max-width: 280px; padding: 6px 10px; border-radius: 9px; pointer-events: none;
  background: var(--ink); color: var(--on-ink); font-size: var(--fs-meta); font-weight: 500; line-height: 1.4;
  box-shadow: 0 8px 20px -8px rgba(28, 27, 31, .4); animation: fade-in var(--dur-1) var(--ease);
}
.tooltip .tip-sub { font-weight: 400; }

.scrim { position: fixed; inset: 0; z-index: 50; background: rgba(28, 27, 31, .22); backdrop-filter: blur(2px); animation: fade-in var(--dur-3) var(--ease); }
.scrim.is-light { background: rgba(28, 27, 31, .08); backdrop-filter: none; }
.scrim.is-leaving { animation: fade-out var(--dur-2) var(--ease) forwards; }

.modal {
  position: fixed; z-index: 51; left: 50%; top: 50%; translate: -50% -50%; width: min(var(--modal-w, 720px), calc(100vw - 48px));
  height: min(var(--modal-h, auto), calc(100vh - 64px)); max-height: calc(100vh - 64px);
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--surface); border-radius: var(--r-5); box-shadow: var(--shadow-4); animation: modal-in var(--dur-3) var(--ease);
}
.modal.is-leaving { animation: modal-out var(--dur-2) var(--ease) forwards; }
.modal-head { display: flex; align-items: center; gap: 14px; padding: 22px 24px 0; }
.modal-heading { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.modal-title { font-size: var(--fs-title); font-weight: 500; line-height: 1.3; }
.modal-sub { font-size: var(--fs-body); }
.modal-head > .icon-btn { margin: -4px -8px 0 auto; align-self: flex-start; }
.modal-tabs { padding: 8px 24px 0; border-bottom: 1px solid var(--line); }
.modal-body { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 22px 24px 24px; }
.modal-foot { display: flex; align-items: center; gap: 10px; padding: 14px 24px; border-top: 1px solid var(--line); background: var(--surface); }

.drawer {
  position: fixed; z-index: 51; top: 10px; right: 10px; bottom: 10px; width: min(var(--drawer-w, 480px), calc(100vw - 20px));
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--surface); border-radius: var(--r-4); box-shadow: var(--shadow-4); animation: drawer-in var(--dur-3) var(--ease);
}
.drawer.is-leaving { animation: drawer-out var(--dur-2) var(--ease) forwards; }
.drawer-head { position: relative; display: flex; align-items: flex-start; gap: 12px; padding: 20px 24px 20px; border-bottom: 1px solid var(--line); }
.drawer-head > .icon-btn { margin: -4px -8px 0 auto; }
/* A site's state header runs the full width; the close button sits in the corner beside Stop/Resume. */
.drawer-head:has(> .grow > .state) > .icon-btn { position: absolute; top: 19px; right: 16px; margin: 0; }
.drawer-body { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 24px 24px 32px; }
.drawer-foot { display: flex; align-items: center; gap: 10px; padding: 14px 24px; border-top: 1px solid var(--line); }

.toasts { position: fixed; left: 50%; bottom: 28px; translate: -50% 0; z-index: 95; display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; }
.toast {
  display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 6px 6px 6px 18px; border-radius: var(--r-pill);
  background: var(--ink); color: var(--on-ink); font-size: var(--fs-body); font-weight: 500; box-shadow: 0 16px 36px -12px rgba(28, 27, 31, .45);
  pointer-events: auto; animation: toast-in var(--dur-3) var(--ease);
}
.toast:not(:has(.toast-action)) { padding-right: 20px; }
.toast > .ic { width: 16px; height: 16px; margin-left: -4px; }
.toast.is-leaving { animation: toast-out var(--dur-2) var(--ease) forwards; }
.toast-action { height: 32px; padding: 0 14px; border: 0; border-radius: var(--r-pill); background: rgba(255, 255, 255, .14); color: var(--on-ink); font-weight: 500; font-size: var(--fs-body); }
.toast-action:hover { background: rgba(255, 255, 255, .24); }
.toast-dot { width: 8px; height: 8px; border-radius: 50%; margin-left: -4px; flex: none; }
.toast-agent .toast-dot { background: var(--on-ink); animation: breathe-dot var(--breath) var(--ease-io) infinite; }
.toast-human .toast-dot { background: var(--accent-on-ink); }

/* ==========================================================================
   Avatars — one style. Circle = a person, rounded square = an agent.
   ========================================================================== */
.av {
  --s: 32px;
  position: relative; flex: none; width: var(--s); height: var(--s); display: inline-grid; place-items: center;
  border-radius: 50%; background: var(--av-bg, var(--fill-solid)); color: var(--av-fg, var(--ink));
  font: 400 var(--fs-meta)/1 var(--font); user-select: none;
}
.av-xs { --s: 20px; }
.av-sm { --s: 24px; }
.av-md { --s: 32px; }
.av-lg { --s: 40px; font-size: var(--fs-body); font-weight: 500; }
.av-xl { --s: 56px; font-size: var(--fs-body); font-weight: 500; }
.av-agent { border-radius: 31%; }
.av-agent svg { width: 64%; height: 64%; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
/* Working now: a small ink dot that breathes (by size: always full ink). Calm, never a ring around the face. */
.av-agent.is-live::after {
  content: ""; position: absolute; right: -2px; bottom: -2px; width: max(6px, calc(var(--s) * .24)); height: max(6px, calc(var(--s) * .24));
  border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 2px var(--surface);
  animation: breathe-dot var(--breath) var(--ease-io) infinite;
}
.av-xs.av-agent.is-live::after { right: -1.5px; bottom: -1.5px; box-shadow: 0 0 0 1.5px var(--surface); }
.av-agent.is-off { --av-fg: var(--stroke); }  /* paused or off: the glyph fades, like a disabled control */
.av-stack { display: inline-flex; align-items: center; }
.av-stack > .av { box-shadow: 0 0 0 2px var(--surface); }
.av-stack > .av + .av { margin-left: calc(var(--s) * -.22); }
.av-stack.on-bg > .av { box-shadow: 0 0 0 2px var(--bg); }

/* ==========================================================================
   Chips, marks, dots
   ========================================================================== */
.chip {
  display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: var(--r-pill);
  background: var(--chip-bg, var(--fill)); color: var(--chip-fg, var(--ink)); box-shadow: var(--chip-ring, none);
  font-size: var(--fs-meta); font-weight: 400; line-height: 1; white-space: nowrap; flex: none;
}
.chip .ic { width: 13px; height: 13px; margin-left: -2px; }
.chip .dot { width: 6px; height: 6px; margin-left: -2px; }
.chip-lg { height: 30px; padding: 0 12px; font-size: var(--fs-body); }
.chip-lg .ic { width: 14px; height: 14px; }
.chip-agent, .chip-ok { --chip-bg: var(--fill); }
.chip-human { --chip-bg: var(--surface); --chip-ring: inset 0 0 0 1px var(--ink); }
.chip-ink { --chip-bg: var(--ink); --chip-fg: var(--on-ink); }
.chip-outline { --chip-bg: transparent; --chip-ring: inset 0 0 0 1px var(--line-strong); }
.chip-remove { display: grid; place-items: center; width: 16px; height: 16px; margin-right: -5px; border: 0; padding: 0; border-radius: 50%; background: transparent; color: inherit; }
.chip-remove:hover { background: var(--fill-2); }
.chip-remove .ic { width: 12px; height: 12px; margin: 0; }
.chip-btn { cursor: pointer; border: 0; }
.chip-btn:hover { --chip-bg: var(--fill-2); }
/* A chip that toggles (aria-pressed): pressed = ink ring and ink words, off = hairline. */
button.chip[aria-pressed] { cursor: pointer; border: 0; transition: box-shadow var(--dur-1) var(--ease), background var(--dur-1) var(--ease); }
button.chip[aria-pressed="true"] { --chip-bg: var(--surface); --chip-ring: inset 0 0 0 1.5px var(--ink); }
button.chip[aria-pressed="false"] { --chip-bg: transparent; --chip-ring: inset 0 0 0 1px var(--line-strong); }
button.chip[aria-pressed="false"]:hover { --chip-ring: inset 0 0 0 1px rgba(28, 27, 31, .3); }

/* Certainty: the shape is the meaning. ● in writing · ◐ stated · ○ our estimate · ◌ not known yet · two rings = sources disagree */
.src { display: inline-flex; align-items: center; gap: 7px; font-size: var(--fs-meta); font-weight: 400; color: var(--ink); white-space: nowrap; line-height: 1.4; }
.src-glyph { width: 12px; height: 12px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.3; }
.src-glyph .fill { fill: currentColor; stroke: none; }
.src-disagree .src-glyph { width: 14px; }
.src.is-bare { gap: 0; }

/* Stage of a site */
.stage { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: var(--r-pill); background: var(--fill); color: var(--ink); font-size: var(--fs-meta); font-weight: 400; line-height: 1; white-space: nowrap; }
.stage-person { background: var(--surface); box-shadow: inset 0 0 0 1px var(--ink); }
.stage-acquisition { background: var(--ink); color: var(--on-ink); }
.stage-aside { background: transparent; box-shadow: inset 0 0 0 1px var(--line-strong); }

/* Status: two marks, two meanings, everywhere. Breathing ink = an agent is working now. Dark red = waits for you.
   On, connected, idle and off get no mark (only exceptions are marked); unread is weight, not a dot.
   Circles beside values (● ◐ ○ ◌) are the certainty scale only, never a status. Other kinds draw nothing. */
.dot { position: relative; display: inline-block; flex: none; width: 8px; height: 8px; border-radius: 50%; }
.dot-live { background: var(--ink); animation: breathe-dot var(--breath) var(--ease-io) infinite; }
.dot-human { background: var(--accent); }   /* the needs-you marker: still, never breathing */
.dot-sm { width: 6px; height: 6px; }

/* Live line: "● Wren · Writing to An Peeters". The noun first; the words wrap to two lines at most, never cut a name. */
.live { display: flex; align-items: flex-start; gap: 10px; min-width: 0; font-size: var(--fs-body); line-height: 1.5; }
.live > .dot { margin: calc((1lh - 8px) / 2) 2px 0; }
.live b { font-weight: 500; }
.live-text { min-width: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.live-text.is-swapping { animation: swap var(--dur-3) var(--ease); }

/* Slots: running sessions out of max parallel */
.slots { display: inline-flex; align-items: center; gap: 3px; flex: none; }
.slots > i { width: 6px; height: 6px; border-radius: 2px; background: var(--fill-2); }
.slots > i.on { background: var(--ink); }
.slots-label { font-size: var(--fs-meta); font-variant-numeric: tabular-nums; white-space: nowrap; margin-left: 6px; }

/* Countdown: time left in the 1-hour outbox hold */
.countdown { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-meta); font-weight: 400; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.countdown svg { width: 14px; height: 14px; transform: rotate(-90deg); flex: none; }
.countdown .cd-track { fill: none; stroke: var(--fill-2); stroke-width: 2.5; }
.countdown .cd-left { fill: none; stroke: var(--ink); stroke-width: 2.5; stroke-linecap: round; }

.kbd { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: var(--r-1); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-strong), 0 1px 0 var(--line-strong); font: 400 var(--fs-meta)/1 var(--font); }

/* ==========================================================================
   Lists, plain key/value lists, callouts, empty states, section titles
   ========================================================================== */
.list { display: flex; flex-direction: column; gap: 2px; }
.list-row {
  display: flex; align-items: center; gap: 12px; min-width: 0; padding: 10px 12px; border-radius: var(--r-2);
  color: inherit; text-decoration: none; transition: background var(--dur-1) var(--ease);
}
a.list-row, button.list-row, .list-row.is-link { cursor: pointer; }
button.list-row { width: 100%; border: 0; background: none; text-align: left; }
a.list-row:hover, button.list-row:hover, .list-row.is-link:hover { background: var(--hover); }
.list-row.is-active { background: var(--fill); }
.list-row-main { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1 1 auto; }
.list-row-title { font-weight: 500; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list-row-sub { font-size: var(--fs-meta); line-height: 1.4; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list-row-meta { flex: none; font-size: var(--fs-meta); font-variant-numeric: tabular-nums; }
.list-divided > .list-row + .list-row { box-shadow: 0 -1px 0 var(--line); border-radius: 0; }

/* Plain key/value lists (not site facts: those use UI.facts) */
.facts { display: grid; grid-template-columns: minmax(120px, 40%) 1fr; column-gap: 16px; }
.fact { display: contents; }
.fact > dt, .fact > dd { margin: 0; padding: 10px 0; border-top: 1px solid var(--line); }
.fact:first-child > dt, .fact:first-child > dd { border-top: 0; }
.fact > dt { line-height: 1.45; }
.fact > dd { display: flex; flex-direction: column; gap: 6px; min-width: 0; font-weight: 500; }
.answer { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; min-width: 0; }
.answer-value { font-weight: 500; font-variant-numeric: tabular-nums; }
.answer-note { font-size: var(--fs-meta); line-height: 1.45; }
.answer.is-history .answer-value { font-weight: 400; text-decoration: line-through; text-decoration-color: var(--stroke); }
.conflict { display: flex; flex-direction: column; gap: 6px; padding-left: 12px; box-shadow: inset 1.5px 0 0 var(--ink); }

/* Callouts: a note inside a panel. Outlined, never filled. */
.callout { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border-radius: var(--r-3); box-shadow: inset 0 0 0 1px var(--line-strong); }
.callout > .ic { margin-top: 1px; }
.callout-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.callout-title { font-weight: 500; line-height: 1.45; }
.callout-text { line-height: 1.5; }
.callout-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.callout-agent { box-shadow: inset 0 0 0 1px var(--line-strong); }
/* A short note that a person is needed: raised like everything that waits. For a choice, use UI.decision(). */
.callout-human { background: var(--surface); box-shadow: var(--raise); }

.empty { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 6px; padding: 40px 24px; }
.empty-mark { width: 48px; height: 48px; margin-bottom: 8px; border-radius: 50%; display: grid; place-items: center; background: var(--fill); }
.empty-mark .ic { width: 20px; height: 20px; }
.empty-title { font-size: var(--fs-heading); font-weight: 500; line-height: 1.4; }
.empty-text { max-width: 320px; font-size: var(--fs-body); line-height: 1.5; }
.empty .btn { margin-top: 10px; }

/* Section heading inside a panel or drawer */
.section-title { display: flex; align-items: center; gap: 8px; min-height: 30px; font-size: var(--fs-heading); font-weight: 500; line-height: 1.4; margin: 0 0 8px; }
.section-title .btn-link, .section-title .btn { margin-left: auto; }
.section-title .count { margin-left: 2px; }

/* ==========================================================================
   Documents — a file list, as in Finder or Drive
   ========================================================================== */
.docs { position: relative; display: flex; flex-direction: column; min-width: 0; }
.docs-head { display: flex; align-items: center; gap: 8px; min-height: 32px; margin-bottom: 4px; }
.docs-title { font-size: var(--fs-heading); font-weight: 500; line-height: 1.4; }
.docs-count { font-size: var(--fs-meta); font-variant-numeric: tabular-nums; }
.docs-add { margin-left: auto; }
/* Rows bleed by their own padding, so icons and sizes sit on the header's edges, like every list beside them. */
.docs-list { display: flex; flex-direction: column; min-width: 0; margin: 0 -8px; }
.doc-row { position: relative; display: flex; align-items: center; min-width: 0; border-radius: var(--r-2); transition: background var(--dur-1) var(--ease); }
.doc-row + .doc-row::before { content: ""; position: absolute; left: 44px; right: 8px; top: 0; height: 1px; background: var(--line); }
.doc-row:hover { background: var(--hover); }
.doc-row:hover::before, .doc-row:hover + .doc-row::before { opacity: 0; }
.doc { flex: 1 1 auto; display: flex; align-items: center; gap: 12px; min-width: 0; padding: 9px 8px; border-radius: var(--r-2); text-decoration: none; color: inherit; }
.doc-icon { width: 24px; height: 24px; flex: none; display: grid; place-items: center; color: var(--ink); }
.doc-icon svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.doc-icon .fill { fill: currentColor; stroke: none; }
.doc-main, .doc > .grow { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1 1 auto; }
/* A name is never cut: it wraps to two lines (UI.midcut shortens the rare longer one in the middle). */
.doc-name { font-size: var(--fs-body); font-weight: 500; line-height: 1.4; min-width: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.doc-meta { font-size: var(--fs-meta); line-height: 1.4; }
.doc-size { flex: none; min-width: 52px; text-align: right; font-size: var(--fs-meta); font-variant-numeric: tabular-nums; white-space: nowrap; transition: opacity var(--dur-1) var(--ease); }
/* Open and Download on hover, on the row's own hover colour. --doc-under: what the list sits on (the panel by default; set var(--bg) on the page). */
.doc-acts { position: absolute; right: 6px; top: 50%; translate: 0 -50%; display: flex; gap: 2px; padding-left: 8px; border-radius: var(--r-2); background: linear-gradient(var(--hover), var(--hover)), var(--doc-under, var(--surface)); opacity: 0; pointer-events: none; transition: opacity var(--dur-1) var(--ease); }
.doc-row:focus-within { background: var(--hover); }
.doc-row:hover .doc-acts, .doc-row:focus-within .doc-acts { opacity: 1; pointer-events: auto; }
.doc-row:hover .doc-size, .doc-row:focus-within .doc-size { opacity: 0; }
.docs-more { align-self: flex-start; margin: 8px 0 0; }
.docs-none { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 64px; margin: 4px 8px 0; border-radius: var(--r-3); border: 1.5px dashed var(--stroke); font-size: var(--fs-body); cursor: pointer; transition: border-color var(--dur-2) var(--ease); }
.docs-none:hover { border-color: var(--ink); }
.docs-none .ic { width: 16px; height: 16px; }
/* While files are dragged over the list: a dashed ink frame that says where they go. */
.docs-over { position: absolute; inset: -6px; z-index: 2; display: none; align-items: center; justify-content: center; gap: 10px; border-radius: var(--r-3); border: 1.5px dashed var(--ink); background: rgba(255, 255, 255, .94); font-size: var(--fs-body); font-weight: 500; pointer-events: none; }
.docs-over .ic { width: 18px; height: 18px; }
.docs.is-over .docs-over { display: flex; animation: fade-in var(--dur-1) var(--ease); }

/* ==========================================================================
   Site record (shared drawer)
   ========================================================================== */
.site-section { margin-top: 32px; }
.site-summary { line-height: 1.6; }
.site-summary p + p { margin-top: 10px; }
.note-line { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; align-items: start; gap: 10px; padding: 10px 0; font-size: var(--fs-body); line-height: 1.5; }
.note-line + .note-line { border-top: 1px solid var(--line); }
.note-line > .av { margin-top: 1px; }
.note-line .note-when { padding-left: 8px; font-size: var(--fs-meta); line-height: 21px; white-space: nowrap; }
.drawer-head .state { flex: 1; }
.drawer-head .state-top { padding-right: 40px; }
.site-why { display: grid; grid-template-columns: 20px minmax(0, 1fr); align-items: start; gap: 10px; margin-top: 20px; line-height: 1.5; }
.site-why > .av { margin-top: 1px; }
.drawer-body > .decision + .site-why, .drawer-body > .callout + .site-why { margin-top: 20px; }
.drawer-body > .decision + .callout { margin-top: 12px; }
/* One left and one right edge for every row in the record: hover rows bleed by their padding (documents do so everywhere). */
.site-section > .list { margin: 0 -12px; }
/* Stop / Resume among the site's actions in the footer, at the buttons' height */
.drawer-foot .stopgo { height: var(--h, 36px); min-width: 36px; padding: 0 12px; }
.drawer-foot .stopgo:hover, .drawer-foot .stopgo:focus-visible { padding: 0 16px 0 14px; }

/* ==========================================================================
   Patterns for a site
   ========================================================================== */

/* Busy mark: Wren & Vera as one dark-red yin-yang. Wren writes (the red half), Vera reviews (the white half).
   It turns slowly while they work and rests, still, otherwise. */
.busy { display: inline-flex; align-items: center; gap: 8px; min-width: 0; color: var(--ink); font-size: var(--fs-body); font-weight: 500; white-space: nowrap; }
.busy-mark { width: var(--s, 18px); height: var(--s, 18px); flex: none; display: block; transform-origin: 50% 50%; }
.busy-mark .bm-yin { fill: var(--accent); }
.busy-mark .bm-yang { fill: var(--surface); }
.busy-mark .bm-rim { fill: none; stroke: var(--accent); stroke-width: 1.1; }
.busy.is-active .busy-mark { animation: busy-turn var(--turn) linear infinite; }
@keyframes busy-turn { to { transform: rotate(360deg); } }

/* Stop / Resume all research on a site. An icon pill at rest; on hover it opens to STOP or RESUME
   (the one place words are set in capitals, because the owner asked for it). Stopped is ink: a state a person chose. */
.stopgo {
  display: inline-flex; align-items: center; justify-content: center; flex: none; height: 30px; min-width: 30px; padding: 0 9px; overflow: hidden;
  border: 0; border-radius: var(--r-pill); background: var(--surface); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-strong);
  font: 500 var(--fs-meta)/1 var(--font); white-space: nowrap;
  transition: background var(--dur-2) var(--ease), color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease), padding var(--dur-3) var(--ease);
}
.stopgo svg { width: 10px; height: 10px; flex: none; fill: currentColor; }
.stopgo-label { max-width: 0; margin-left: 0; opacity: 0; transition: max-width var(--dur-3) var(--ease), margin var(--dur-3) var(--ease), opacity var(--dur-2) var(--ease); }
.stopgo:hover, .stopgo:focus-visible { padding: 0 14px 0 12px; }
.stopgo:hover .stopgo-label, .stopgo:focus-visible .stopgo-label { max-width: 80px; margin-left: 8px; opacity: 1; }
.stopgo.is-running:hover { background: var(--ink); color: var(--on-ink); box-shadow: none; }
.stopgo.is-stopped { background: var(--ink); color: var(--on-ink); box-shadow: none; }
.stopgo.is-stopped:hover { background: var(--ink-hover); }

/* Decision needed: the one pattern for every moment a person must decide.
   Raised white card · the needs-you marker · one question · the evidence as rows · the choices as buttons (recommended in ink)
   · "Answer in your own words" on its own row under them. */
.decision {
  display: flex; flex-direction: column; gap: 14px; min-width: 0; padding: 18px 22px 20px; border-radius: var(--r-3);
  background: var(--surface); box-shadow: var(--raise);
}
.decision-head { display: flex; align-items: center; gap: 12px; min-width: 0; min-height: 20px; }
.decision-tag { display: inline-flex; align-items: center; gap: 10px; font-size: var(--fs-body); font-weight: 500; white-space: nowrap; }
.decision-tag .dot { background: var(--accent); }
.decision-meta { margin-left: auto; justify-content: flex-end; font-size: var(--fs-meta); line-height: 1.4; }
.decision-fold { margin: -6px -8px -6px -4px; }
.decision-q { margin: 0; font-size: var(--fs-heading); font-weight: 500; line-height: 1.45; }
/* Evidence: one continuous hairline per row (no column gap: the space is the value's own padding).
   The certainty mark follows its value, "10 MW ◐"; a row without a value carries it after its words. */
.decision-ev { display: grid; grid-template-columns: max-content minmax(0, 1fr); margin: 0; }
.decision-ev.is-plain { grid-template-columns: minmax(0, 1fr); }
.decision-row { display: contents; }
.decision-ev dt, .decision-ev dd { margin: 0; padding: 10px 0; border-top: 1px solid var(--line); font-size: var(--fs-body); line-height: 1.5; }
.decision-ev dt { padding-right: 16px; font-weight: 500; white-space: nowrap; font-variant-numeric: tabular-nums; }
.decision-ev dd { min-width: 0; }
.decision-mark { white-space: nowrap; font-weight: 400; }
.decision-doc { display: inline-grid; place-items: center; width: 22px; height: 22px; margin-left: 8px; vertical-align: -5px; border: 0; border-radius: 6px; background: var(--fill); color: var(--ink); }
.decision-doc:hover { background: var(--fill-2); }
.decision-doc .ic { width: 13px; height: 13px; }
.decision-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-top: 2px; }
.decision-own { display: flex; margin-top: -4px; }
.decision.is-folded .decision-ev { display: none; }
.decision.is-compact { gap: 12px; padding: 16px 18px 18px; }

/* Site state: what is the state of this site, at a glance. */
.state { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.state-top { display: flex; align-items: center; gap: 10px; min-width: 0; }
.state-rank { font-size: var(--fs-meta); white-space: nowrap; font-variant-numeric: tabular-nums; }
.state-top .stopgo { margin-left: auto; }
.state-title { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.state-name { margin: 0; padding: 0; border: 0; background: none; text-align: left; font-size: var(--fs-title); font-weight: 500; line-height: 1.3; color: var(--ink); text-decoration: none; }
button.state-name, a.state-name { cursor: pointer; text-underline-offset: 4px; text-decoration-thickness: 1px; }
button.state-name:hover, a.state-name:hover { text-decoration: underline; text-decoration-color: var(--stroke); }
.state-place { font-size: var(--fs-body); }
.state-lines { display: flex; flex-direction: column; margin: 0 -8px; padding: 0; list-style: none; }
.state-line { position: relative; display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; align-items: start; gap: 10px; padding: 7px 8px; border-radius: var(--r-2); font-size: var(--fs-body); line-height: 1.45; color: var(--ink); text-decoration: none; }
.state-line b { font-weight: 500; }
.state-ic { display: grid; place-items: center; width: 20px; height: 20px; }
.state-ic .dot { width: 8px; height: 8px; }
.state-ic .countdown svg { width: 16px; height: 16px; }
.state-ic .stopgo-ic { width: 10px; height: 10px; border-radius: 2px; background: var(--ink); }
.state-text { min-width: 0; }
.state-when { font-size: var(--fs-meta); }
.state-go { display: grid; place-items: center; height: 20px; opacity: 0; transition: opacity var(--dur-1) var(--ease), transform var(--dur-2) var(--ease); }
.state-go .ic { width: 14px; height: 14px; }
a.state-line, button.state-line { cursor: pointer; transition: background var(--dur-1) var(--ease); }
a.state-line:hover, button.state-line:hover { background: var(--hover); }
a.state-line:hover .state-go { opacity: 1; transform: translateX(2px); }
/* "Waiting for your decision ↓": a button to the card below; the arrow goes once the card is passed (.is-passed). */
button.state-line { width: 100%; margin: 0; border: 0; background: none; font: inherit; font-size: var(--fs-body); line-height: 1.45; text-align: left; }
.state-arrow { white-space: nowrap; }
.state-arrow .ic { display: inline-block; width: 14px; height: 14px; margin-left: 2px; vertical-align: -2px; transition: opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease); }
button.state-line:hover .state-arrow .ic { transform: translateY(2px); }
.state-line.is-passed .state-arrow .ic { opacity: 0; }

/* Facts about a site: one pattern everywhere.
   Label (body) · the value (strong) with its certainty mark right after it, "10 MW ◐", and who said it under it (meta).
   Two answers that disagree are held together by an ink rule; earlier answers are struck through. */
.attrs { --attr-label: 120px; display: grid; grid-template-columns: var(--attr-label) minmax(0, 1fr); margin: 0; font-size: var(--fs-body); line-height: 1.45; }
.attr { display: contents; }
.attr > dt, .attr > dd { margin: 0; padding: 10px 0; border-top: 1px solid var(--line); }
.attr:first-child > dt, .attr:first-child > dd { border-top: 0; }
.attr > dt { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding-right: 12px; }
.attr > dt[data-tip] { cursor: default; }
.attr > dd { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.attr-a { display: flex; align-items: flex-start; gap: 8px; min-width: 0; }
.attr-main { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.attr-val { font-weight: 500; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.attr-mark { white-space: nowrap; font-weight: 400; }
.attr-mark .src, .decision-mark .src { vertical-align: -1px; }   /* the glyph sits on the figures' cap height */
.attr-by { font-size: var(--fs-meta); line-height: 1.4; overflow-wrap: anywhere; }
.attr-a > .src { flex: none; margin-top: 4px; }   /* rows hand-built before UI.attrRow: the mark after the answer */
.attr-a.is-open .attr-val { font-weight: 400; }
.attr-a.is-history .attr-val { font-weight: 400; }
.attr-a.is-history .attr-text { text-decoration: line-through; text-decoration-color: var(--stroke); text-decoration-thickness: 1px; }
.attr-flag { display: inline-flex; align-items: center; gap: 6px; height: 20px; margin-bottom: -2px; font-size: var(--fs-meta); white-space: nowrap; }
.attr-flag .src-glyph { width: 14px; }
.attr-group { display: flex; flex-direction: column; gap: 10px; margin-left: -10px; padding-left: 10px; box-shadow: inset 1.5px 0 0 var(--ink); }

/* Steps: what has been done and what comes next. Done = check · next = ink ring and dot · to do = faint ring. */
.steps { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.step { position: relative; display: grid; grid-template-columns: 20px minmax(0, 1fr); align-items: start; gap: 10px; padding: 6px 0; font-size: var(--fs-body); line-height: 1.45; }
.step:not(:last-child)::before { content: ""; position: absolute; left: 9.5px; top: 28px; bottom: -4px; width: 1px; background: var(--line-strong); }
.step-ic { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; }
.step-ic .ic { width: 12px; height: 12px; stroke-width: 2.2; }
.step.is-done .step-ic { background: var(--fill); }
.step.is-next .step-ic { box-shadow: inset 0 0 0 1.5px var(--ink); }
.step.is-next .step-ic::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ink); }
.step.is-todo .step-ic { box-shadow: inset 0 0 0 1.5px var(--stroke-faint); }
.step-main { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.step.is-next .step-text { font-weight: 500; }
.step-meta { font-size: var(--fs-meta); line-height: 1.4; }

/* Chat bubbles. The conversation sits on the panel: theirs is white with a hairline, ours is the neutral fill,
   an email in the outbox is dashed. Team Chat uses the same pair: others white, your own notes filled. */
.chat-room { background: var(--chat-room); }
.chat-room.is-team { background: var(--chat-team-room); }
.bubble { max-width: 560px; padding: 10px 14px; border-radius: 18px; font-size: var(--fs-body); line-height: 1.55; overflow-wrap: anywhere; }
.bubble-theirs { background: var(--chat-theirs); color: var(--chat-theirs-ink); border-bottom-left-radius: 6px; box-shadow: inset 0 0 0 1px var(--line-strong); }
.bubble-ours { background: var(--chat-ours); color: var(--chat-ours-ink); border-bottom-right-radius: 6px; }
.bubble-outbox { background: transparent; color: var(--ink); border: 1.5px dashed var(--chat-outbox-edge); border-bottom-right-radius: 6px; }
.bubble-team { background: var(--chat-team); color: var(--chat-team-ink); border-radius: 14px; box-shadow: inset 0 0 0 1px var(--line-strong); }
.bubble-team-me { background: var(--chat-team-me); box-shadow: none; }
.bubble-who { display: block; margin-bottom: 2px; font-size: var(--fs-meta); font-weight: 400; }

/* The review queue: decisions waiting for a person. The one raised object at rest; its count, right beside the title,
   is the dark-red signal. Each row is a request: the asking agent's glyph on the contact's avatar, the decision,
   "Asked by Vera · Kari Nilsen, Brumunddal", how long it has waited. */
.queue { display: flex; flex-direction: column; min-width: 0; padding: 8px; border-radius: var(--r-4); background: var(--surface); box-shadow: var(--raise); }
.queue-head { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 4px 12px 6px; font-size: var(--fs-heading); font-weight: 500; line-height: 1.4; }
.queue-list { display: flex; flex-direction: column; }
.queue-row { --row-bg: var(--surface); position: relative; display: flex; align-items: flex-start; gap: 12px; padding: 10px 12px; border-radius: var(--r-2); color: inherit; text-decoration: none; transition: background var(--dur-1) var(--ease); }
.queue-row + .queue-row::before { content: ""; position: absolute; left: 56px; right: 12px; top: 0; height: 1px; background: var(--line); transition: opacity var(--dur-1) var(--ease); }
.queue-row:hover::before, .queue-row.is-active::before, .queue-row[aria-current="true"]::before,
.queue-row:hover + .queue-row::before, .queue-row.is-active + .queue-row::before, .queue-row[aria-current="true"] + .queue-row::before { opacity: 0; }
.queue-row:hover { --row-bg: color-mix(in srgb, var(--ink) 3.5%, var(--surface)); background: var(--hover); }
/* The open one: the fill, and white avatars so they stay visible on it */
.queue-row.is-active, .queue-row[aria-current="true"] { --row-bg: color-mix(in srgb, var(--ink) 6%, var(--surface)); background: var(--fill); }
.queue-row.is-active .queue-who > .av, .queue-row[aria-current="true"] .queue-who > .av { --av-bg: var(--surface); }
/* Who asked: the agent's glyph sits on the contact's avatar, cut out by a ring in the row's own colour */
.queue-who { position: relative; flex: none; display: inline-flex; margin-top: 2px; }
.queue-who > .av-agent { --s: 16px; position: absolute; right: -5px; bottom: -5px; box-shadow: 0 0 0 2px var(--row-bg); }
.queue-who > .av-agent svg { stroke-width: 2; }
.queue-row-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; font-size: var(--fs-body); }
.queue-row-main b { font-weight: 500; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.queue-row-meta { font-size: var(--fs-meta); line-height: 1.4; }
.queue-row-age { flex: none; display: flex; align-items: center; gap: 2px; font-size: var(--fs-meta); line-height: 20px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.queue-row-age .ic { width: 14px; height: 14px; margin-right: -4px; transition: transform var(--dur-2) var(--ease); }
.queue-row:hover .queue-row-age .ic { transform: translateX(2px); }
/* Large rows (the Overview): the decision as a Heading, more room around each request */
.queue-row.is-large { gap: 14px; padding: 16px 18px; }
.queue-row.is-large + .queue-row::before { left: 72px; right: 18px; }
.queue-row.is-large .queue-row-main { gap: 4px; }
.queue-row.is-large .queue-row-age { line-height: 22px; }
.queue-row.is-large .queue-who { margin-top: 0; }
.queue-row.is-large .queue-who > .av-agent { --s: 20px; right: -6px; bottom: -6px; }
.queue-row.is-large .queue-who > .av-agent svg { stroke-width: 1.8; }
.queue-none { display: flex; align-items: center; gap: 10px; padding: 8px 12px 10px; font-size: var(--fs-body); }

/* ==========================================================================
   Agent settings (shared modal)
   ========================================================================== */
.agent-head { display: flex; align-items: center; gap: 14px; padding-bottom: 20px; margin-bottom: 22px; border-bottom: 1px solid var(--line); }
.agent-head .grow { display: flex; flex-direction: column; gap: 2px; }
.agent-name { font-size: var(--fs-heading); font-weight: 500; line-height: 1.4; }
.agent-role { font-size: var(--fs-body); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.form-grid .span-2 { grid-column: 1 / -1; }
.sessions-field { display: flex; align-items: center; gap: 14px; }
.prompt-meta { display: flex; justify-content: flex-end; gap: 12px; font-size: var(--fs-meta); }
.reads { display: flex; flex-wrap: wrap; gap: 8px; }
/* What an agent's profile reads: shown, not chosen here */
.reads.is-fixed > button.chip { cursor: default; pointer-events: none; }
.weights-bar { display: flex; height: 36px; border-radius: 12px; overflow: hidden; gap: 3px; }
.weights-bar > div { display: flex; align-items: center; padding: 0 12px; font-size: var(--fs-body); font-weight: 500; white-space: nowrap; overflow: hidden; transition: flex-grow var(--dur-3) var(--ease); }
.weights-bar > .w-power { background: var(--ink); color: var(--on-ink); }
.weights-bar > .w-permits { background: var(--fill-2); color: var(--ink); }
.weights-bar > .w-connectivity { background: var(--fill); color: var(--ink); }
.order-list { display: flex; flex-direction: column; }
.order-item { display: flex; align-items: center; gap: 12px; height: 44px; padding: 0 4px; }
.order-item + .order-item { border-top: 1px solid var(--line); }
.order-item > .ic { color: var(--stroke); cursor: grab; }

/* ==========================================================================
   Motion
   ========================================================================== */
@keyframes fade-in { from { opacity: 0; } }
@keyframes fade-out { to { opacity: 0; } }
@keyframes rise { from { opacity: 0; transform: translateY(6px); } }
@keyframes view-in { from { opacity: 0; } }
@keyframes pop-in { from { opacity: 0; transform: translateY(-4px) scale(.985); } }
@keyframes modal-in { from { opacity: 0; transform: translateY(10px) scale(.985); } }
@keyframes modal-out { to { opacity: 0; transform: translateY(6px) scale(.99); } }
@keyframes drawer-in { from { opacity: 0; transform: translateX(28px); } }
@keyframes drawer-out { to { opacity: 0; transform: translateX(20px); } }
@keyframes toast-in { from { opacity: 0; transform: translateY(10px) scale(.98); } }
@keyframes toast-out { to { opacity: 0; transform: translateY(6px); } }
@keyframes swap { from { opacity: 0; transform: translateY(4px); } }
/* Breathing: slow, and it stays dark, so a working mark never reads as grey.
   A status dot breathes by size (always full ink); marks drawn in SVG (areas, scan lines) breathe by opacity, 1 ↔ .7. */
@keyframes breathe {
  0%, 100% { opacity: 1; }
  50% { opacity: .7; }
}
@keyframes breathe-dot {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(.7); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}