/* Elward AI Labs
   ---------------------------------------------------------------------------------------------------
   Design direction ("Ledger & Library", Operate mode — impeccable/operate.md):
   - Brand (docs/BRAND.md): the bracketed [E] mark, Elward blue #2238FF, ink #0E0D12, paper #F4F5EF,
     stone #E9E9E1. Files in dashboard/brand/.
   - Shell: an ink rail in both themes, warm paper ground, white working surfaces.
   - Type: Geist for running UI on a fixed 1.2 scale; IBM Plex Mono (the wordmark's face) for the brand
     voice: page titles, wizard headings, ids and code. Numbers use tabular figures of the sans.
   - Colour: neutral greys tinted toward the paper, ink-filled primary actions, ONE accent (Elward blue) for
     links, focus, selection and the current place. Green/amber/red are reserved for state.
   - Containers: panels separated by hairlines, no decorative shadows. Elevation (shadow) is only used for
     things that float: drawer, modal, toast, tooltip.
   - Radius rule: containers 12px, controls 8px, status pills and chips fully round. Nothing else.
   - Signature move: skill packs as periodic-table "element" cells (symbol + count + name, one hue per pack),
     reused as the tiny chip that marks every skill anywhere in the product.
   - Motion (emil-design-eng): only overlays animate (drawer/modal/toast enter, 180-260ms, strong ease-out),
     pressable things scale to .97 on :active, nothing animates on load, and all of it is removed under
     prefers-reduced-motion. */

:root {
  color-scheme: light;
  --ground: #f4f5ef;
  --surface: #ffffff;
  --surface-2: #f8f8f4;
  --surface-3: #e9e9e1;
  --ink: #0e0d12;
  --ink-2: #36353d;
  --muted: #62616a;
  --line: #e3e3db;
  --line-strong: #cdccc3;
  --grid: #e9e9e1;
  --axis: #c2c1b8;
  --accent: #2238ff;
  --accent-ink: #1a2bd6;
  --accent-wash: #e8ebff;
  --primary: #0e0d12;
  --primary-hover: #24232b;
  --on-primary: #ffffff;
  --rail: #0e0d12;
  --rail-2: #1b1a21;
  --rail-ink: #f4f5ef;
  --rail-muted: #a3a2aa;
  --rail-line: #26252c;
  --series-1: #2238ff;
  --series-2: #e0672c;
  --seq-1: #b3bcff;
  --seq-2: #7484ff;
  --seq-3: #2238ff;
  --seq-4: #1726b8;
  --good: #1f8a4c;
  --good-ink: #156337;
  --good-wash: #e5f3ea;
  --warning: #d99a0b;
  --warning-ink: #7d5200;
  --warning-wash: #fcf2da;
  --critical: #d23f3f;
  --critical-ink: #ad2525;
  --critical-wash: #fbeaea;
  --neutral-wash: #efefe8;
  --el-l: 94%; --el-c: 0.045; --el-ink-l: 40%; --el-ink-c: 0.13;  /* pack element cells */
  --shadow-float: 0 1px 2px rgba(20, 24, 40, .06), 0 12px 32px -8px rgba(20, 24, 40, .22);
  --r-box: 12px;
  --r-ctl: 8px;
  --font: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --display: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --mark: url("brand/mark.svg");
  --mark-on-dark: url("brand/mark-on-dark.svg");
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --ease-drawer: cubic-bezier(.32, .72, 0, 1);
  --rail-w: 236px;
  /* fixed type scale, ratio ~1.2 */
  --t-xs: 12px; --t-sm: 13px; --t-md: 14px; --t-lg: 16px; --t-xl: 19px; --t-2xl: 24px; --t-num: 26px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark; --mark: url("brand/mark-on-dark.svg");
    --ground: #0b0a0e; --surface: #141318; --surface-2: #1a191f; --surface-3: #25242b;
    --ink: #f4f5ef; --ink-2: #c9c9c1; --muted: #9d9ca4; --line: #25242b; --line-strong: #37363e;
    --grid: #222128; --axis: #4b4a52;
    --accent: #8e9bff; --accent-ink: #aeb7ff; --accent-wash: #1b1f4a;
    --primary: #f4f5ef; --primary-hover: #ffffff; --on-primary: #0e0d12;
    --rail: #08070b; --rail-2: #151419; --rail-line: #1d1c22;
    --series-1: #8e9bff; --series-2: #e8773f; --seq-1: #1f2775; --seq-2: #3445c4; --seq-3: #6676ff; --seq-4: #a7b1ff;
    --good: #2fae66; --good-ink: #5fd391; --good-wash: #10291b; --warning: #e5a823; --warning-ink: #f1c35c; --warning-wash: #2e2310;
    --critical: #e25656; --critical-ink: #ff8a8a; --critical-wash: #34171a; --neutral-wash: #1f1e25;
    --el-l: 28%; --el-c: 0.05; --el-ink-l: 86%; --el-ink-c: 0.1;
    --shadow-float: 0 1px 2px rgba(0, 0, 0, .4), 0 16px 40px -8px rgba(0, 0, 0, .6);
  }
}
:root[data-theme="dark"] { --mark: url("brand/mark-on-dark.svg");
  color-scheme: dark;
  --ground: #0b0a0e; --surface: #141318; --surface-2: #1a191f; --surface-3: #25242b;
  --ink: #f4f5ef; --ink-2: #c9c9c1; --muted: #9d9ca4; --line: #25242b; --line-strong: #37363e;
  --grid: #222128; --axis: #4b4a52;
  --accent: #8e9bff; --accent-ink: #aeb7ff; --accent-wash: #1b1f4a;
  --primary: #f4f5ef; --primary-hover: #ffffff; --on-primary: #0e0d12;
  --rail: #08070b; --rail-2: #151419; --rail-line: #1d1c22;
  --series-1: #8e9bff; --series-2: #e8773f; --seq-1: #1f2775; --seq-2: #3445c4; --seq-3: #6676ff; --seq-4: #a7b1ff;
  --good: #2fae66; --good-ink: #5fd391; --good-wash: #10291b; --warning: #e5a823; --warning-ink: #f1c35c; --warning-wash: #2e2310;
  --critical: #e25656; --critical-ink: #ff8a8a; --critical-wash: #34171a; --neutral-wash: #1f1e25;
  --el-l: 28%; --el-c: 0.05; --el-ink-l: 86%; --el-ink-c: 0.1;
  --shadow-float: 0 1px 2px rgba(0, 0, 0, .4), 0 16px 40px -8px rgba(0, 0, 0, .6);
}

/* ---------- base & browser surfaces ---------- */
* { box-sizing: border-box; }
html, body { margin: 0; }
body { font: 400 var(--t-md)/1.5 var(--font); background: var(--ground); color: var(--ink); -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility; font-feature-settings: "ss01" 0; caret-color: var(--accent); }
::selection { background: color-mix(in srgb, var(--accent) 28%, transparent); color: inherit; }
* { scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
[hidden] { display: none !important; }
a { color: var(--accent-ink); text-decoration: none; text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { text-decoration: underline; }
code, pre, kbd { font-family: var(--mono); font-size: .88em; }
kbd { padding: 1px 5px; border: 1px solid var(--line-strong); border-bottom-width: 2px; border-radius: 5px; background: var(--surface); }
h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 600; letter-spacing: -0.012em; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
.muted { color: var(--muted); }
.small { font-size: var(--t-xs); }
.num, td.num { font-variant-numeric: tabular-nums; }
.mono { font-family: var(--mono); font-size: var(--t-xs); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
.skip-link { position: absolute; left: -999px; top: 8px; background: var(--surface); padding: 8px 12px; z-index: 100; border-radius: var(--r-ctl); }
.skip-link:focus { left: 8px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.wrap-any { overflow-wrap: anywhere; }

/* ---------- icons ---------- */
.ico { display: inline-flex; width: 18px; height: 18px; flex: none; }
.ico svg { width: 100%; height: 100%; }

/* ---------- buttons & fields ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 36px; padding: 0 14px; border-radius: var(--r-ctl);
  border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); font: inherit; font-weight: 500;
  cursor: pointer; white-space: nowrap; flex: none;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .12s var(--ease-out); }
.btn:hover { background: var(--surface-2); border-color: var(--axis); }
.btn:active:not(:disabled) { transform: scale(.97); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn.primary { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.btn.primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); }
.btn.approve { background: var(--good-ink); border-color: var(--good-ink); color: #fff; }
:root[data-theme="dark"] .btn.approve { color: #08130c; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .btn.approve { color: #08130c; } }
.btn.approve:hover { filter: brightness(1.08); }
.btn.danger { color: var(--critical-ink); border-color: color-mix(in srgb, var(--critical) 45%, transparent); }
.btn.danger:hover { background: var(--critical-wash); }
.btn.ghost { border-color: transparent; background: transparent; }
.btn.ghost:hover { background: var(--surface-3); }
.btn.sm { height: 30px; padding: 0 10px; font-size: var(--t-sm); }
.btn.icon-only { width: 36px; padding: 0; }
.btn.sm.icon-only { width: 30px; }
.btn.block { width: 100%; }
.btn.lg { height: 44px; padding: 0 18px; font-size: 15px; }
.link-btn { border: 0; background: none; padding: 0; font: inherit; color: var(--accent-ink); cursor: pointer; text-align: left; }
.link-btn:hover { text-decoration: underline; }
input, select, textarea { font: inherit; color: var(--ink); background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: var(--r-ctl); padding: 7px 10px; min-height: 36px; min-width: 0; }
input::placeholder, textarea::placeholder { color: var(--muted); opacity: 1; }
textarea { resize: vertical; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
.field { display: grid; gap: 6px; }
.field > span { font-weight: 500; font-size: var(--t-sm); }
.check { display: flex; gap: 8px; align-items: center; }
.form-error { color: var(--critical-ink); min-height: 1em; font-size: var(--t-sm); }
.search { padding-left: 34px; background: var(--surface) no-repeat 11px 50% / 15px
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a909c' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E"); }

/* ---------- sign-in ---------- */
.signin { min-height: 100dvh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); background: var(--surface); }
.signin-side { background: var(--rail); color: var(--rail-ink); padding: 48px; display: flex; flex-direction: column; justify-content: space-between; gap: 32px; }
.signin-side h2 { font-family: var(--display); font-weight: 700; font-size: 34px; line-height: 1.12; letter-spacing: -0.055em; max-width: 17ch; }
.signin-side p { color: var(--rail-muted); max-width: 42ch; }
.signin-main { display: grid; place-items: center; padding: 32px 16px; }
.signin-card { width: min(380px, 100%); display: grid; gap: 18px; }
.signin-card h1 { font-family: var(--display); font-weight: 700; font-size: var(--t-2xl); letter-spacing: -0.045em; }
.signin-card h1:focus { outline: none; }
pre.cmd { margin: 0; padding: 10px 12px; border-radius: var(--r-ctl); background: var(--surface-2); border: 1px solid var(--line); overflow-x: auto; }
.signin-alt { border-top: 1px solid var(--line); padding-top: 14px; }
@media (max-width: 820px) { .signin { grid-template-columns: 1fr; } .signin-side { display: none; } }

/* ---------- shell ---------- */
.app { display: flex; min-height: 100dvh; }
.sidebar { width: var(--rail-w); flex: none; background: var(--rail); color: var(--rail-ink); display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100dvh; border-right: 1px solid var(--rail-line); }
.sidebar-head { display: flex; gap: 10px; align-items: center; padding: 18px 18px 14px; }
/* Brand lockup: [E] mark + "elward / ai/labs" wordmark (IBM Plex Mono). Sizes scale from --lk (mark height). */
.lockup { --lk: 30px; display: inline-flex; align-items: center; gap: calc(var(--lk) * .42); color: var(--ink); }
.lockup.lg { --lk: 38px; } .lockup.xl { --lk: 52px; }
.sidebar-head .lockup { --lk: 34px; }
.brand-mark { width: var(--lk, 30px); height: var(--lk, 30px); flex: none; background: var(--mark) center/contain no-repeat; }
.lockup.on-dark { color: var(--rail-ink); } .lockup.on-dark .brand-mark { background-image: var(--mark-on-dark); }
.wordmark { display: grid; font-family: var(--display); line-height: 1; }
.wm-name { font-weight: 700; font-size: calc(var(--lk) * .77); letter-spacing: -.08em; margin-left: -.04em; }
.wm-sub { font-size: max(11px, calc(var(--lk) * .3)); margin-top: calc(var(--lk) * .06); letter-spacing: 0; }
.wm-ai { color: var(--accent); } .lockup.on-dark .wm-ai { color: #8e9bff; } .wm-sl { color: var(--muted); }
.lockup.on-dark .wm-sl { color: var(--rail-muted); }
.wz-label { font-family: var(--display); font-size: var(--t-sm); color: var(--muted); padding-left: 12px; margin-left: 2px; border-left: 1px solid var(--line); }
.nav { padding: 4px 10px 12px; display: grid; gap: 1px; overflow-y: auto; flex: 1; align-content: start; }
.nav-group { font-size: var(--t-xs); font-weight: 500; color: var(--rail-muted); padding: 16px 10px 6px; }
.nav a { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: var(--r-ctl); color: var(--rail-muted);
  font-weight: 500; text-decoration: none; transition: background-color .15s ease, color .15s ease; }
.nav a .ico { width: 17px; height: 17px; }
.nav a:hover { background: var(--rail-2); color: var(--rail-ink); }
.nav a[aria-current="page"] { background: var(--rail-2); color: #fff; }
.nav a[aria-current="page"] .ico { color: #a9b5ff; }
.nav a:focus-visible { outline-color: #a9b5ff; }
.nav .count { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: #eceef2;
  color: #16181d; font-size: var(--t-xs); font-weight: 600; display: inline-grid; place-items: center; font-variant-numeric: tabular-nums; }
.nav .count.warn { background: var(--critical); color: #fff; }
.nav .count.quiet { background: transparent; color: var(--rail-muted); font-weight: 500; }
.nav .count:empty { display: none; }
.sidebar-foot { border-top: 1px solid var(--rail-line); padding: 12px; display: grid; gap: 8px; }
.foot-row { display: flex; justify-content: space-between; gap: 4px; }
.sidebar .btn.ghost { color: var(--rail-muted); }
.sidebar .btn.ghost:hover { background: var(--rail-2); color: var(--rail-ink); }
.provider { display: flex; gap: 8px; align-items: flex-start; font-size: var(--t-xs); color: var(--rail-muted); padding: 8px 10px;
  border-radius: var(--r-ctl); background: var(--rail-2); line-height: 1.4; }
.provider .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--good); flex: none; margin-top: 5px; }
.provider.mock { color: #f1c35c; }
.provider a { color: #c9d0ff; text-decoration: underline; }
.provider strong { font-weight: 600; }
.provider.mock .dot { background: #e5a823; }

.main-col { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar { display: flex; align-items: flex-start; gap: 12px; padding: 22px 32px 10px; }
.title-wrap { flex: 1; min-width: 0; }
.title-wrap h1 { font-family: var(--display); font-weight: 700; font-size: var(--t-2xl); letter-spacing: -0.045em; line-height: 1.2; }
.title-wrap p { margin-top: 4px; color: var(--muted); }
.top-actions { display: flex; gap: 8px; align-items: center; }
.menu-btn { display: none; }
main { padding: 10px 32px 56px; outline: none; max-width: 1440px; width: 100%; }
.scrim { position: fixed; inset: 0; background: rgba(8, 10, 14, .5); z-index: 39; }

@media (max-width: 900px) {
  .sidebar { position: fixed; left: 0; top: 0; z-index: 40; transform: translateX(-100%); transition: transform .26s var(--ease-drawer); box-shadow: var(--shadow-float); }
  .sidebar.open { transform: none; }
  .menu-btn { display: inline-flex; }
  .topbar { padding: 14px 16px 6px; align-items: center; }
  main { padding: 8px 16px 48px; }
  .hide-sm { display: none !important; }
}

/* ---------- layout primitives ---------- */
.stack { display: grid; gap: 20px; align-content: start; }
.stack.tight { gap: 12px; }
.stack > *, .grid > * { min-width: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; min-width: 0; }
.spread { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; min-width: 0; }
.grid { display: grid; gap: 20px; }
.cols-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); }
.cols-3 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.split { display: grid; gap: 20px; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
@media (max-width: 1100px) { .split { grid-template-columns: minmax(0, 1fr); } }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-box); padding: 18px 20px; min-width: 0; }
.panel.flush { padding: 0; overflow: hidden; }
.panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.panel.flush > .panel-head { padding: 16px 20px 0; }
.panel-head h2, .panel-head h3 { font-size: var(--t-lg); }
.panel-head .sub { color: var(--muted); font-size: var(--t-sm); margin-top: 2px; }
.panel-head a, .panel-head .link-btn { font-size: var(--t-sm); font-weight: 500; }
.section-title { font-size: var(--t-lg); font-weight: 600; margin-top: 8px; }
.section-title + * { margin-top: -8px; }
.banner { display: flex; gap: 10px; align-items: center; padding: 10px 14px; border-radius: var(--r-ctl);
  background: var(--warning-wash); color: var(--warning-ink); font-size: var(--t-sm); font-weight: 500; flex-wrap: wrap; }
.banner > span:not(.ico) { flex: 1 1 260px; min-width: 0; }
.banner a:not(.btn) { color: inherit; text-decoration: underline; }
.banner.mode { background: var(--surface); color: var(--ink-2); border: 1px solid color-mix(in srgb, var(--warning) 55%, var(--line)); }
.banner.mode .ico { color: var(--warning); }
.banner.mode strong { color: var(--ink); }
.empty { display: grid; justify-items: center; gap: 6px; text-align: center; padding: 32px 16px; color: var(--muted); }
.empty .ico { width: 28px; height: 28px; color: var(--axis); margin-bottom: 4px; }
.empty strong { color: var(--ink); font-weight: 600; }
.empty span { max-width: 44ch; }
.error-state { display: grid; gap: 10px; justify-items: start; padding: 20px; border: 1px solid color-mix(in srgb, var(--critical) 35%, var(--line));
  border-radius: var(--r-box); background: var(--surface); }
.error-state strong { color: var(--critical-ink); }

/* ---------- loading skeletons (shaped like the content they stand in for) ---------- */
.skel { display: block; border-radius: 6px; background: var(--surface-3); position: relative; overflow: hidden; }
.skel::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--surface) 55%, transparent), transparent); animation: shimmer 1.4s ease-in-out infinite; }
@keyframes shimmer { to { transform: translateX(100%); } }
.skel-line { height: 12px; margin: 10px 0; }
.skel-block { height: 120px; border-radius: var(--r-box); }
.skel-rows { display: grid; gap: 4px; padding: 6px 0; }

/* ---------- composer ---------- */
.composer { display: grid; gap: 12px; padding: 20px; }
.composer h2 { font-size: var(--t-xl); letter-spacing: -0.02em; }
.composer.hero { padding: 24px; gap: 14px; border-color: var(--line-strong); }
.composer.hero h2 { font-size: var(--t-2xl); letter-spacing: -0.025em; }
.composer-sub { max-width: 70ch; margin-top: -6px; }
.composer-form { display: grid; gap: 10px; }
.composer-form textarea { font-size: 16px; line-height: 1.5; padding: 12px 14px; min-height: 92px; }
.composer-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.composer-actions .grow { flex: 1; }
.composer-actions select { min-height: 36px; }
.goal-pick { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 4px 4px 4px 12px; border-radius: var(--r-ctl);
  background: var(--accent-wash); color: var(--accent-ink); width: fit-content; max-width: 100%; }
.goal-pick strong { color: var(--ink); }
.goal-pick .muted { color: var(--accent-ink); }
.chips a.small { margin-left: 4px; font-weight: 500; }
.composer-input { display: flex; gap: 8px; flex-wrap: wrap; }
.composer-input input { flex: 1 1 320px; height: 46px; font-size: 15px; padding: 0 14px; }
.composer-input select, .composer-input .btn { height: 46px; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.chips .muted { margin-right: 4px; }
.chip { border: 1px solid var(--line); background: var(--surface-2); color: var(--ink-2); border-radius: 999px;
  padding: 4px 11px; font: inherit; font-size: var(--t-sm); cursor: pointer; transition: border-color .15s ease, color .15s ease, transform .12s var(--ease-out); }
.chip:hover { border-color: var(--line-strong); color: var(--ink); }
.chip:active { transform: scale(.97); }
.chip[aria-pressed="true"] { background: var(--accent-wash); border-color: var(--accent); color: var(--accent-ink); font-weight: 500; }

/* ---------- "needs you" strip: one panel, three ruled columns ---------- */
.needs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 0; }
.needs > section { padding: 16px 20px 18px; display: grid; gap: 10px; align-content: start; min-width: 0; }
.needs > section + section { border-left: 1px solid var(--line); }
.needs-top { display: flex; align-items: baseline; gap: 10px; }
.needs-value { font-size: var(--t-num); font-weight: 600; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.needs-value.hot { color: var(--critical-ink); }
.needs-value.warm { color: var(--warning-ink); }
.needs-label { color: var(--ink-2); font-weight: 500; }
.needs ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.needs li { display: flex; gap: 8px; align-items: center; font-size: var(--t-sm); min-width: 0; }
.needs li .t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; }
@media (max-width: 860px) { .needs { grid-template-columns: 1fr; } .needs > section + section { border-left: 0; border-top: 1px solid var(--line); } }

/* ---------- KPI ledger: metrics breathe in a ruled grid, no card per number ---------- */
.ledger { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); padding: 0; overflow: hidden; }
.ledger .cell { padding: 14px 18px 14px; display: grid; gap: 6px; align-content: start; min-width: 0;
  box-shadow: inset -1px 0 0 var(--line), inset 0 -1px 0 var(--line); margin: 0 -1px -1px 0; }
.cell-label { font-size: var(--t-sm); color: var(--muted); }
.cell-value { font-size: var(--t-num); font-weight: 600; letter-spacing: -0.03em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.ledger.compact .cell-value { font-size: 22px; }
.cell-main { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 4px 10px; min-width: 0; }
.cell-foot { display: flex; align-items: center; gap: 8px; min-height: 18px; font-size: var(--t-xs); color: var(--muted); }
.delta { font-size: var(--t-xs); font-weight: 600; display: inline-flex; gap: 3px; align-items: center; white-space: nowrap; }
.delta.good { color: var(--good-ink); }
.delta.bad { color: var(--critical-ink); }
.delta.flat { color: var(--muted); font-weight: 500; }
.spark { width: 80px; height: 26px; flex: none; margin-bottom: 3px; }

/* ---------- status pills (dot + label; colour never alone) ---------- */
.status { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 9px 0 7px; border-radius: 999px;
  font-size: var(--t-xs); font-weight: 500; background: var(--neutral-wash); color: var(--ink-2); white-space: nowrap; flex: none; }
.status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--axis); flex: none; }
.status.good { background: var(--good-wash); color: var(--good-ink); }
.status.good::before { background: var(--good); }
.status.warn { background: var(--warning-wash); color: var(--warning-ink); }
.status.warn::before { background: var(--warning); }
.status.crit { background: var(--critical-wash); color: var(--critical-ink); }
.status.crit::before { background: var(--critical); }
.status.info { background: var(--accent-wash); color: var(--accent-ink); }
.status.info::before { background: var(--accent); animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .3; } }
.tag { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 6px; font-size: var(--t-xs);
  background: var(--surface-2); color: var(--ink-2); border: 1px solid var(--line); white-space: nowrap; flex: none; }
.tag.mock { background: var(--warning-wash); color: var(--warning-ink); border-color: transparent; }
.risk { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: 999px;
  font-size: var(--t-xs); font-weight: 600; white-space: nowrap; flex: none; font-variant-numeric: tabular-nums; }
.risk .ico { width: 14px; height: 14px; }
.risk.l1, .risk.l2 { background: var(--warning-wash); color: var(--warning-ink); }
.risk.l3, .risk.l4 { background: var(--critical-wash); color: var(--critical-ink); }

/* ---------- progress (segmented by task status) ---------- */
.progress { display: flex; height: 6px; border-radius: 999px; overflow: hidden; background: var(--surface-3); gap: 2px; }
.progress span { display: block; height: 100%; }
.progress .p-completed { background: var(--good); }
.progress .p-active { background: var(--accent); }
.progress .p-waiting { background: var(--warning); }
.progress .p-problem { background: var(--critical); }
.legend { display: flex; gap: 6px 14px; flex-wrap: wrap; font-size: var(--t-xs); color: var(--ink-2); }
.legend i { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.legend i.line { height: 2px; width: 14px; border-radius: 1px; vertical-align: 3px; }

/* ---------- tables & feeds ---------- */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th { text-align: left; font-size: var(--t-xs); font-weight: 500; color: var(--muted); padding: 10px 14px; border-bottom: 1px solid var(--line);
  white-space: nowrap; background: var(--surface-2); }
td { padding: 11px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; }
tr:last-child td { border-bottom: 0; }
tbody tr.clickable { cursor: pointer; transition: background-color .12s ease; }
tbody tr.clickable:hover td { background: var(--surface-2); }
td.objective { max-width: 520px; }
td .clip { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
th.num, td.num { text-align: right; }
.feed { list-style: none; margin: 0; padding: 0; }
.feed > li { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); align-items: flex-start; }
.feed > li:first-child { padding-top: 2px; }
.feed > li:last-child { border-bottom: 0; padding-bottom: 0; }
.feed .meta { flex: 1; min-width: 0; display: grid; gap: 3px; }
.feed .meta .t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--t-sm); color: var(--ink-2); }
.feed .who { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.avatar { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; font-size: 11px; font-weight: 600;
  background: var(--surface-3); color: var(--ink-2); flex: none; letter-spacing: .02em; }
.avatar.manager { background: var(--primary); color: var(--on-primary); }
.avatar.lg { width: 44px; height: 44px; border-radius: 11px; font-size: 14px; }

/* ---------- element cells (skill packs) — the signature move ---------- */
.el { --h: 250; }
.el[data-pack="taste"] { --h: 10; } .el[data-pack="marketing"] { --h: 42; } .el[data-pack="ads"] { --h: 78; }
.el[data-pack="impeccable"] { --h: 115; } .el[data-pack="seo"] { --h: 150; } .el[data-pack="cadence"] { --h: 190; }
.el[data-pack="antigravity"] { --h: 228; } .el[data-pack="superpowers"] { --h: 268; } .el[data-pack="emil"] { --h: 300; }
.el[data-pack="uiux"] { --h: 335; }
.el-sym { display: inline-grid; place-items: center; flex: none; width: 22px; height: 22px; border-radius: 5px; font-size: 11px; font-weight: 600;
  letter-spacing: -0.01em; background: oklch(var(--el-l) var(--el-c) var(--h)); color: oklch(var(--el-ink-l) var(--el-ink-c) var(--h)); }
.periodic { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; }
@media (min-width: 1280px) { .periodic:not(.mini) { grid-template-columns: repeat(11, minmax(0, 1fr)); } }
.periodic.mini { grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 6px; }
.cell-el { position: relative; display: grid; grid-template-rows: auto 1fr auto; gap: 2px; text-align: left; min-height: 104px; padding: 10px 11px 10px;
  border-radius: 10px; border: 1px solid transparent; font: inherit; color: oklch(var(--el-ink-l) var(--el-ink-c) var(--h));
  background: oklch(var(--el-l) var(--el-c) var(--h)); cursor: pointer; text-decoration: none; min-width: 0;
  transition: transform .12s var(--ease-out), border-color .15s ease, box-shadow .15s ease; }
.cell-el:hover { text-decoration: none; border-color: color-mix(in srgb, currentColor 35%, transparent); }
.cell-el:active { transform: scale(.97); }
.cell-el[aria-pressed="true"] { border-color: currentColor; box-shadow: inset 0 0 0 1px currentColor; }
.cell-el .z { font-size: var(--t-xs); font-weight: 600; font-variant-numeric: tabular-nums; justify-self: end; opacity: .85; }
.cell-el .sym { font-size: 28px; font-weight: 600; letter-spacing: -0.04em; line-height: 1; align-self: center; }
.cell-el .nm { font-size: var(--t-xs); font-weight: 500; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cell-el .nm2 { font-size: 11px; opacity: .8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.periodic.mini .cell-el { min-height: 76px; padding: 8px 9px; }
.periodic.mini .cell-el .sym { font-size: 21px; }
.cell-el.all { --h: 260; background: var(--surface-2); color: var(--ink); border-color: var(--line); }
.cell-el.all[aria-pressed="true"] { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }

/* skill chip: element symbol + name, used everywhere a skill is mentioned */
.skill-chip { display: inline-flex; align-items: center; gap: 7px; max-width: 100%; min-width: 0; padding: 3px 9px 3px 3px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: inherit; font-size: var(--t-sm); cursor: pointer; text-align: left;
  transition: border-color .15s ease, background-color .15s ease, transform .12s var(--ease-out); }
.skill-chip .el-sym { width: 20px; height: 20px; border-radius: 999px; font-size: 10px; }
.skill-chip .lbl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.skill-chip:hover { border-color: var(--line-strong); background: var(--surface-2); }
.skill-chip:active { transform: scale(.97); }
.skill-chip.core { border-color: color-mix(in srgb, var(--ink) 30%, var(--line)); font-weight: 500; }
.skill-chip.static { cursor: default; }
.skill-chips { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.more { font-size: var(--t-xs); color: var(--muted); align-self: center; }

/* skill list rows */
.skill-list { list-style: none; margin: 0; padding: 0; }
.skill-row { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 4px 14px; align-items: start; padding: 14px 20px;
  border-bottom: 1px solid var(--line); cursor: pointer; transition: background-color .12s ease; }
.skill-row:last-child { border-bottom: 0; }
.skill-row:hover { background: var(--surface-2); }
.skill-row .el-sym { width: 34px; height: 34px; border-radius: 8px; font-size: 14px; }
.skill-row .title { font-weight: 600; overflow-wrap: anywhere; }
.skill-row .title .link-btn { color: var(--ink); font-weight: 600; }
.skill-row .id { font-family: var(--mono); font-size: var(--t-xs); color: var(--muted); overflow-wrap: anywhere; }
.skill-row .desc { grid-column: 2; color: var(--ink-2); font-size: var(--t-sm); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; max-width: 90ch; }
.skill-row .stats { grid-row: 1 / span 2; grid-column: 3; display: flex; gap: 18px; text-align: right; }
.stat { display: grid; gap: 0; min-width: 52px; }
.stat b { font-size: var(--t-lg); font-weight: 600; font-variant-numeric: tabular-nums; }
.stat b.zero { color: var(--muted); font-weight: 500; }
.stat span { font-size: 11px; color: var(--muted); white-space: nowrap; }
@media (max-width: 720px) {
  .skill-row { grid-template-columns: 34px minmax(0, 1fr); padding: 14px 16px; }
  .skill-row .stats { grid-row: auto; grid-column: 2; justify-content: flex-start; text-align: left; gap: 16px; margin-top: 4px; }
}
.pack-about { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 16px; align-items: center; padding: 14px 18px; }
.pack-about .cell-el { min-height: 0; width: 64px; height: 64px; padding: 6px 8px; grid-row: span 2; cursor: default; }
.pack-about .cell-el .sym { font-size: 24px; }
.pack-about h2 { font-size: var(--t-lg); }
.pack-about dl { display: flex; flex-wrap: wrap; gap: 4px 20px; margin: 0; font-size: var(--t-sm); }
.pack-about dt { color: var(--muted); display: inline; }
.pack-about dd { margin: 0 0 0 6px; display: inline; overflow-wrap: anywhere; }

/* usage bars (overview skills panel) */
.usage { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.usage li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(60px, 38%) 34px; gap: 12px; align-items: center; padding: 5px 0; }
.usage .skill-chip { justify-self: start; }
.usage .bar { height: 8px; border-radius: 0 4px 4px 0; background: var(--series-1); min-width: 3px; }
.usage .n { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; font-size: var(--t-sm); }

/* ---------- projects ---------- */
.project-card { display: grid; gap: 12px; cursor: pointer; align-content: start; transition: border-color .15s ease; }
.project-card:hover { border-color: var(--line-strong); }
.project-card h3 { font-size: var(--t-md); line-height: 1.4; font-weight: 600; overflow-wrap: anywhere; }
.project-card .foot { margin-top: auto; }
.steps { list-style: none; margin: 0; padding: 0; display: grid; }
.steps li { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: 10px; padding: 11px 0; border-bottom: 1px solid var(--line); align-items: start; }
.steps li:last-child { border-bottom: 0; }
.steps .node { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--axis); margin-top: 4px; background: var(--surface); }
.steps .node.completed { background: var(--good); border-color: var(--good); }
.steps .node.active { border-color: var(--accent); background: var(--accent-wash); }
.steps .node.waiting { border-color: var(--warning); background: var(--warning-wash); }
.steps .node.problem { border-color: var(--critical); background: var(--critical-wash); }

/* ---------- approvals ---------- */
.approval { display: grid; gap: 14px; }
.approval.high { border-color: color-mix(in srgb, var(--critical) 40%, var(--line)); }
.approval h3 { font-size: var(--t-lg); line-height: 1.4; overflow-wrap: anywhere; }
.kv { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 8px 16px; margin: 0; font-size: var(--t-sm); }
.kv dt { color: var(--muted); font-weight: 500; padding-top: 1px; }
.kv dd { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.kv pre { margin: 0; padding: 10px; border-radius: var(--r-ctl); background: var(--surface-2); overflow-x: auto; white-space: pre; }
.decision { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; padding-top: 14px; border-top: 1px solid var(--line); }
.decision input { flex: 1 1 220px; }
details > summary { cursor: pointer; color: var(--accent-ink); font-weight: 500; font-size: var(--t-sm); list-style: none; }
details > summary::-webkit-details-marker { display: none; }
details > summary::before { content: "+"; display: inline-block; width: 1em; font-weight: 600; }
details[open] > summary::before { content: "−"; }
details[open] > summary { margin-bottom: 12px; }
@media (max-width: 640px) { .kv { grid-template-columns: 1fr; gap: 2px 0; } .kv dd { margin-bottom: 8px; } }

/* ---------- agents ---------- */
.dept { display: grid; gap: 12px; }
.dept-head { display: flex; align-items: baseline; gap: 4px 12px; flex-wrap: wrap; }
.dept-head h2 { font-size: var(--t-lg); }
.dept-head .muted { font-size: var(--t-sm); }
.agent-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 10px; }
.agent-card { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px 12px; align-items: start; padding: 14px; cursor: pointer;
  transition: border-color .15s ease; }
.agent-card:hover { border-color: var(--line-strong); }
.agent-card .name { font-weight: 600; overflow-wrap: anywhere; line-height: 1.35; color: var(--ink); display: block; }
.agent-card .role { font-size: var(--t-xs); color: var(--muted); }
.agent-card .skill-chips { grid-column: 1 / -1; }
.agent-card .skill-chip { font-size: var(--t-xs); padding: 2px 8px 2px 2px; }
.agent-card .skill-chip .el-sym { width: 18px; height: 18px; font-size: 9.5px; }
.agent-card.paused { opacity: .62; }
.switch { position: relative; width: 34px; height: 20px; flex: none; margin-top: 2px; }
.switch input { opacity: 0; position: absolute; inset: 0; margin: 0; cursor: pointer; z-index: 1; min-height: 0; }
.switch span { position: absolute; inset: 0; border-radius: 999px; background: var(--surface-3); transition: background-color .15s ease; }
.switch span::after { content: ""; position: absolute; left: 2px; top: 2px; width: 16px; height: 16px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: transform .18s var(--ease-out); }
.switch input:checked + span { background: var(--good-ink); }
.switch input:checked + span::after { transform: translateX(14px); }
.switch input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- toolbar / segmented ---------- */
.toolbar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.toolbar .search { flex: 1 1 260px; max-width: 380px; }
.toolbar .grow { flex: 1; }
.segmented { min-width: 0; max-width: 100%; overflow-x: auto; scrollbar-width: none; display: inline-flex; padding: 3px; gap: 2px; border-radius: 10px; background: var(--surface-3); }
.segmented button { border: 0; background: transparent; font: inherit; font-size: var(--t-sm); font-weight: 500; color: var(--ink-2);
  padding: 5px 12px; border-radius: 7px; cursor: pointer; white-space: nowrap; flex: none; transition: background-color .15s ease, color .15s ease; }
.segmented button:hover { color: var(--ink); }
.segmented button[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(10, 12, 20, .14); }
.count-label { font-size: var(--t-sm); color: var(--muted); font-variant-numeric: tabular-nums; }

/* ---------- charts ---------- */
.chart { position: relative; width: 100%; }
.chart svg { display: block; width: 100%; overflow: visible; }
.chart text { font-family: var(--font); font-size: 11px; fill: var(--muted); font-variant-numeric: tabular-nums; }
.chart .grid-line { stroke: var(--grid); stroke-width: 1; }
.chart .baseline { stroke: var(--axis); stroke-width: 1; }
.chart .end-label { fill: var(--ink-2); font-weight: 600; font-size: 12px; }
.chart .bar-label { fill: var(--ink-2); font-weight: 600; font-size: 12px; }
.chart .cat-label { fill: var(--ink-2); font-size: 12px; }
.chart .crosshair { stroke: var(--axis); stroke-width: 1; }
.chart .hit { fill: transparent; cursor: crosshair; }
.chart .bar { transition: opacity .12s; }
.chart .bar.dim { opacity: .45; }
.chart-card .chart-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 10px; flex-wrap: wrap; }
.chart-table { font-size: var(--t-sm); margin-top: 8px; max-height: 260px; overflow: auto; }
.tooltip { position: fixed; z-index: 90; pointer-events: none; background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: var(--r-ctl); box-shadow: var(--shadow-float); padding: 8px 10px; font-size: var(--t-xs); min-width: 120px; }
.tooltip .tt-title { color: var(--muted); margin-bottom: 4px; }
.tooltip .tt-row { display: flex; align-items: center; gap: 8px; }
.tooltip .tt-row strong { font-size: var(--t-sm); font-variant-numeric: tabular-nums; }
.tooltip .key { width: 12px; height: 2px; border-radius: 1px; flex: none; }
.loading { opacity: .55; transition: opacity .2s; }

/* ---------- drawer & modal ---------- */
.drawer-wrap { position: fixed; inset: 0; z-index: 60; }
.drawer-scrim { position: absolute; inset: 0; background: rgba(8, 10, 14, .42); transition: opacity .22s ease; }
.drawer { position: absolute; right: 0; top: 0; bottom: 0; width: min(760px, 100%); background: var(--surface);
  box-shadow: var(--shadow-float); display: flex; flex-direction: column; transition: transform .28s var(--ease-drawer); }
.drawer.wide { width: min(940px, 100%); }
@starting-style {
  .drawer-wrap:not([hidden]) .drawer { transform: translateX(48px); }
  .drawer-wrap:not([hidden]) .drawer-scrim { opacity: 0; }
}
.drawer-head { display: flex; gap: 10px; align-items: flex-start; padding: 16px 18px 14px 20px; border-bottom: 1px solid var(--line); }
.drawer-head .titles { flex: 1; min-width: 0; display: grid; gap: 4px; }
.drawer-head h2 { font-size: var(--t-xl); line-height: 1.3; letter-spacing: -0.02em; overflow-wrap: anywhere; }
.drawer-meta { font-size: var(--t-sm); color: var(--muted); display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; }
.drawer-body { flex: 1; min-height: 0; overflow-y: auto; padding: 20px 20px 40px; display: flex; flex-direction: column; gap: 22px; overscroll-behavior: contain; }
.drawer-body > * { flex-shrink: 0; min-width: 0; }
.drawer-body h4 { font-size: var(--t-sm); font-weight: 600; color: var(--ink); margin-bottom: 8px; }
.drawer-body ul.plain { margin: 0; padding-left: 18px; display: grid; gap: 4px; }
.drawer-body ul.plain li::marker { color: var(--muted); }
.stats-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); border: 1px solid var(--line); border-radius: var(--r-box); overflow: hidden; }
.stats-strip > div { padding: 12px 14px; display: grid; gap: 2px; box-shadow: inset -1px 0 0 var(--line), inset 0 -1px 0 var(--line); margin: 0 -1px -1px 0; }
.stats-strip b { font-size: var(--t-xl); font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.stats-strip span { font-size: var(--t-xs); color: var(--muted); }
.artifact { border: 1px solid var(--line); border-radius: var(--r-ctl); overflow: hidden; }
.artifact header { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 6px 8px 6px 12px;
  background: var(--surface-2); font-size: var(--t-sm); font-weight: 600; }
.artifact pre { margin: 0; padding: 12px; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 360px; overflow: auto; }
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.tabs button { border: 0; background: none; font: inherit; font-weight: 500; color: var(--muted); padding: 9px 12px;
  border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer; white-space: nowrap; transition: color .15s ease; }
.tabs button:hover { color: var(--ink); }
.tabs button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--ink); }
.notice { padding: 10px 12px; border-radius: var(--r-ctl); background: var(--critical-wash); color: var(--critical-ink); font-size: var(--t-sm); overflow-wrap: anywhere; }
.notice.warn { background: var(--warning-wash); color: var(--warning-ink); }
.notice.info { background: var(--accent-wash); color: var(--accent-ink); }
.notice.ok { background: var(--good-wash); color: var(--good-ink); }
.notice .ico { width: 16px; height: 16px; vertical-align: -3px; margin-right: 4px; }
.notice a { color: inherit; text-decoration: underline; }
.run-skills { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 6px; }
.run-skills .lbl-k { font-size: var(--t-xs); color: var(--muted); margin-right: 2px; }
.lead { font-size: var(--t-lg); line-height: 1.55; max-width: 68ch; }
.subgroup { display: grid; gap: 8px; }
.agent-links { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 6px; }
.agent-links button { width: 100%; display: flex; gap: 10px; align-items: center; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--r-ctl);
  background: var(--surface); font: inherit; color: var(--ink); cursor: pointer; text-align: left; min-width: 0; transition: border-color .15s ease, transform .12s var(--ease-out); }
.agent-links button:hover { border-color: var(--line-strong); }
.agent-links button:active { transform: scale(.98); }
.agent-links .avatar { width: 26px; height: 26px; font-size: 10px; border-radius: 7px; }
.agent-links .nm { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
.agent-links .dp { font-size: var(--t-xs); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
.agent-links .txt { min-width: 0; }
.core-skills { display: grid; gap: 8px; }
.core-skill { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 2px 12px; padding: 12px; border: 1px solid var(--line); border-radius: var(--r-box);
  background: var(--surface); text-align: left; font: inherit; color: var(--ink); cursor: pointer; transition: border-color .15s ease; }
.core-skill:hover { border-color: var(--line-strong); }
.core-skill .el-sym { width: 34px; height: 34px; border-radius: 8px; font-size: 14px; grid-row: span 2; }
.core-skill b { font-weight: 600; overflow-wrap: anywhere; }
.core-skill span:last-child { font-size: var(--t-sm); color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.lib-group { border-top: 1px solid var(--line); padding-top: 10px; }
.lib-group > summary { color: var(--ink); display: flex; align-items: center; gap: 8px; }
.lib-group > summary::before { color: var(--muted); }
.lib-group .count-label { margin-left: auto; }
.refs { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.refs button { width: 100%; text-align: left; border: 1px solid var(--line); background: var(--surface); border-radius: var(--r-ctl); padding: 8px 12px;
  font-family: var(--mono); font-size: var(--t-xs); color: var(--ink); cursor: pointer; overflow-wrap: anywhere; }
.refs button:hover { border-color: var(--line-strong); background: var(--surface-2); }

.modal { border: 0; padding: 0; border-radius: 14px; background: var(--surface); color: var(--ink); box-shadow: var(--shadow-float);
  width: min(560px, calc(100% - 32px)); transition: opacity .18s ease, transform .2s var(--ease-out); }
@starting-style { .modal[open] { opacity: 0; transform: scale(.97); } }
.modal::backdrop { background: rgba(8, 10, 14, .5); }
.modal-inner { display: grid; }
.modal-head { display: flex; justify-content: space-between; align-items: center; padding: 16px 18px 8px 20px; }
.modal-head h2 { font-size: var(--t-xl); letter-spacing: -0.02em; }
.modal-body { padding: 8px 20px 4px; display: grid; gap: 14px; }
.modal-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 16px 20px 20px; }

/* ---------- toasts ---------- */
.toasts { position: fixed; right: 16px; bottom: 16px; z-index: 95; display: grid; gap: 8px; width: min(380px, calc(100% - 32px)); }
.toast { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: var(--r-ctl);
  background: var(--primary); color: var(--on-primary); box-shadow: var(--shadow-float); font-size: var(--t-sm);
  transition: opacity .2s ease, transform .24s var(--ease-out); }
@starting-style { .toast { opacity: 0; transform: translateY(8px); } }
.toast.error { background: var(--critical); color: #fff; }

/* ---------- approvals: what happens either way ---------- */
.outcomes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 10px; }
.outcomes > div { display: grid; gap: 4px; padding: 12px 14px; border-radius: var(--r-ctl); background: var(--surface-2); font-size: var(--t-sm); color: var(--ink-2); }
.outcomes strong { display: flex; align-items: center; gap: 6px; color: var(--ink); }
.outcomes .ico { width: 15px; height: 15px; }
.outcomes > div:first-child .ico { color: var(--good); }
.outcomes > div:last-child .ico { color: var(--critical); }
.who-sm { font-size: var(--t-xs); color: var(--muted); white-space: nowrap; max-width: 40%; overflow: hidden; text-overflow: ellipsis; flex: none; }
.feed > li > .ico { color: var(--good); margin-top: 2px; }

/* ---------- "what happens next" after asking ---------- */
.quote { font-size: var(--t-lg); color: var(--ink); overflow-wrap: anywhere; }
.next-steps, .mini-steps { margin: 0; padding-left: 22px; display: grid; gap: 8px; }
.next-steps li::marker, .mini-steps li::marker { color: var(--muted); font-weight: 600; }
.mini-steps { font-size: var(--t-sm); color: var(--ink-2); padding: 12px 14px 12px 34px; border-radius: var(--r-ctl); background: var(--surface-2); }

/* ---------- hints ("What's this?") ---------- */
.hint { display: flex; gap: 10px; align-items: flex-start; padding: 10px 6px 10px 14px; border-radius: var(--r-ctl);
  border: 1px solid var(--line); background: var(--surface); font-size: var(--t-sm); color: var(--ink-2); }
.hint > .ico { color: var(--accent); width: 16px; height: 16px; margin-top: 2px; }
.hint p { flex: 1; min-width: 0; padding-top: 1px; }
.hint strong { color: var(--ink); font-weight: 600; }
.hint .btn { margin-top: -4px; }

/* ---------- getting started checklist ---------- */
.setup { display: grid; gap: 12px; }
.setup h2 { font-size: var(--t-lg); }
.checklist { list-style: none; margin: 0; padding: 0; display: grid; }
.checklist li { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.checklist li:last-child { border-bottom: 0; padding-bottom: 0; }
.checklist .lbl { flex: 1 1 220px; min-width: 0; font-weight: 500; }
.checklist .tick { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--line-strong); display: grid; place-items: center; flex: none; }
.checklist .tick .ico { width: 13px; height: 13px; }
.checklist li.done .tick { background: var(--good); border-color: var(--good); color: #fff; }
.checklist li.done .lbl { color: var(--muted); font-weight: 400; text-decoration: line-through; text-decoration-color: var(--line-strong); }

/* ---------- goal cards (Ask your team, setup finish) ---------- */
.goal-group { display: grid; gap: 10px; scroll-margin-top: 16px; }
.goal-group h2 { font-size: var(--t-lg); }
.goal-group h2:focus { outline: none; }
.goal-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }
.goal-grid.three { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.goal-card { display: grid; gap: 8px; align-content: start; padding: 16px; border: 1px solid var(--line); border-radius: var(--r-box); background: var(--surface); min-width: 0; }
.goal-card h3 { font-size: var(--t-md); font-weight: 600; line-height: 1.35; }
.goal-card p { font-size: var(--t-sm); color: var(--ink-2); }
.goal-card .btn { white-space: normal; height: auto; min-height: 36px; padding: 8px 12px; text-align: left; justify-content: flex-start; line-height: 1.35; }
.goal-card .example { display: flex; justify-content: space-between; align-items: center; gap: 8px; width: 100%; margin-top: 2px; padding: 8px 10px 8px 12px;
  border: 1px solid var(--line); border-radius: var(--r-ctl); background: var(--surface-2); font: inherit; font-size: var(--t-sm); color: var(--ink);
  text-align: left; cursor: pointer; transition: border-color .15s ease, background-color .15s ease, transform .12s var(--ease-out); }
.goal-card .example:hover { border-color: var(--accent); background: var(--accent-wash); }
.goal-card .example:active { transform: scale(.98); }
.goal-card .example .ico { width: 15px; height: 15px; color: var(--accent); }

/* ---------- Your business ---------- */
.field small { font-size: var(--t-xs); line-height: 1.4; }
.field em.opt { font-style: normal; font-weight: 400; color: var(--muted); font-size: var(--t-xs); margin-left: 4px; }
details.more-fields { border-top: 1px solid var(--line); padding-top: 14px; }
details.more-fields > .stack, details.more-fields > p { margin-top: 10px; }
.file-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.file-row label.btn { cursor: pointer; }
.file-row input:focus-visible + span, .file-row:focus-within label.btn { outline: 2px solid var(--accent); outline-offset: 2px; }
.useful { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.useful li { display: grid; gap: 2px; padding-left: 12px; border-left: 2px solid var(--line-strong); font-size: var(--t-sm); }
.useful span { color: var(--ink-2); }
#biz-panel h2, #set-body h2, .help-page h2 { font-size: var(--t-lg); }
.muted .ico, p.small > .ico { width: 14px; height: 14px; vertical-align: -2px; }

/* ---------- Settings ---------- */
.conn-list { list-style: none; margin: 0; padding: 0; }
.conn-list li { display: flex; justify-content: space-between; align-items: center; gap: 8px 16px; padding: 12px 20px; border-top: 1px solid var(--line); flex-wrap: wrap; }
.conn-list li > div { display: grid; gap: 1px; min-width: 0; }

/* ---------- Help ---------- */
.how { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); }
.how li { display: flex; gap: 12px; align-items: flex-start; }
.how .n { width: 30px; height: 30px; border-radius: 50%; background: var(--primary); color: var(--on-primary); display: grid; place-items: center; font-weight: 600; flex: none; }
.how li > div, .promises li > span { display: grid; gap: 2px; font-size: var(--t-sm); color: var(--ink-2); }
.how strong, .promises strong { color: var(--ink); font-size: var(--t-md); }
.promises { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.promises li { display: flex; gap: 10px; align-items: flex-start; }
.promises .ico { color: var(--good); margin-top: 2px; }
.promises li > span { display: block; }
.glossary { margin: 0; display: grid; grid-template-columns: minmax(110px, auto) minmax(0, 1fr); gap: 8px 16px; font-size: var(--t-sm); }
.glossary dt { font-weight: 600; }
.glossary dd { margin: 0; color: var(--ink-2); }
@media (max-width: 640px) { .glossary { grid-template-columns: 1fr; gap: 2px; } .glossary dd { margin-bottom: 8px; } }
.faq details { border-top: 1px solid var(--line); padding: 12px 0; }
.faq details:last-child { padding-bottom: 0; }
.faq summary { color: var(--ink); font-size: var(--t-md); }
.faq details[open] > summary { margin-bottom: 6px; }
.faq p { color: var(--ink-2); max-width: 75ch; padding-left: 1em; }

/* ---------- first-run setup (full screen) ---------- */
.wizard { position: fixed; inset: 0; z-index: 70; background: var(--ground); display: flex; flex-direction: column; }
body.wz-open { overflow: hidden; }
.wz-top { display: flex; align-items: center; gap: 16px; padding: 14px 24px; border-bottom: 1px solid var(--line); background: var(--surface); flex-wrap: wrap; }
.wz-progress { list-style: none; margin: 0 auto; padding: 0; display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.wz-progress li { display: flex; align-items: center; gap: 6px; padding: 4px 10px 4px 4px; border-radius: 999px; font-size: var(--t-sm); color: var(--muted); }
.wz-progress .n { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: var(--t-xs); font-weight: 600; background: var(--surface-3); color: var(--ink-2); }
.wz-progress .n .ico { width: 13px; height: 13px; }
.wz-progress li.done .n { background: var(--good); color: #fff; }
.wz-progress li[aria-current="step"] { background: var(--accent-wash); color: var(--accent-ink); font-weight: 600; }
.wz-progress li[aria-current="step"] .n { background: var(--accent); color: #fff; }
.wz-body { flex: 1; overflow-y: auto; padding: 40px 24px 64px; overscroll-behavior: contain; }
.wz-card { width: min(720px, 100%); margin: 0 auto; display: grid; gap: 20px; }
.wz-card h1 { font-family: var(--display); font-weight: 700; font-size: 32px; line-height: 1.15; letter-spacing: -0.05em; }
.wz-card h1:focus { outline: none; }
.wz-card .lead { color: var(--ink-2); }
.wz-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding-top: 4px; }
.wz-actions .grow { flex: 1; }
.wz-count { margin-bottom: -6px; }
.promise { display: flex; gap: 12px; align-items: flex-start; padding: 16px; border-radius: var(--r-box); background: var(--good-wash); color: var(--good-ink); }
.promise > div { display: grid; gap: 4px; }
.promise span { color: var(--ink-2); font-size: var(--t-sm); }
.promise strong { color: var(--ink); }
.promise .ico { color: var(--good); margin-top: 1px; }
.choice-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.choice { display: grid; gap: 6px; justify-items: start; text-align: left; padding: 18px; border-radius: var(--r-box); border: 1px solid var(--line-strong);
  background: var(--surface); font: inherit; color: var(--ink); cursor: pointer; transition: border-color .15s ease, transform .12s var(--ease-out), background-color .15s ease; }
.choice:hover { border-color: var(--ink); }
.choice:active { transform: scale(.98); }
.choice strong { font-size: var(--t-lg); }
.choice span:not(.ico) { color: var(--ink-2); font-size: var(--t-sm); }
.choice > .ico { width: 22px; height: 22px; color: var(--accent); margin-bottom: 4px; }
.choice.primary-choice { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.choice.primary-choice span:not(.ico) { color: color-mix(in srgb, var(--on-primary) 78%, transparent); }
.choice.primary-choice > .ico { color: color-mix(in srgb, var(--on-primary) 85%, var(--accent)); }
.choice.primary-choice:hover { background: var(--primary-hover); }
.skip-box { border-top: 1px solid var(--line); padding-top: 14px; display: grid; gap: 4px; justify-items: start; }
@media (max-width: 640px) {
  .wz-top { padding: 10px 16px; gap: 8px; }
  .wz-progress { order: 3; width: 100%; justify-content: space-between; gap: 2px; }
  .wz-progress li { padding: 2px; }
  .wz-progress li:not([aria-current]) .l { display: none; }
  .wz-top .btn { margin-left: auto; }
  .wz-body { padding: 24px 16px 48px; }
  .wz-card h1 { font-size: 26px; }
  .composer.hero { padding: 16px; }
  .composer.hero h2 { font-size: var(--t-xl); }
  .composer-actions .btn.lg { width: 100%; }
}

/* ---------- reports ---------- */
.report-grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); align-items: start; }
.report-section h3 { font-size: var(--t-lg); margin-bottom: 10px; }
.report-section ul { margin: 0; padding-left: 18px; display: grid; gap: 6px; }
.kv-table td:first-child { color: var(--ink-2); width: 45%; }
.kv-table td { padding: 8px 0; }
.summary-panel { display: grid; gap: 6px; }
.summary-panel .when { color: var(--muted); font-size: var(--t-sm); }

/* ---------- rendered Markdown (skill playbooks) ---------- */
.prose { font-size: 15px; line-height: 1.65; color: var(--ink); max-width: 72ch; overflow-wrap: anywhere; }
.prose > * + * { margin-top: 12px; }
.prose h3, .prose h4, .prose h5, .prose h6 { letter-spacing: -0.015em; line-height: 1.3; }
.prose .md-h1 { font-size: 22px; margin-top: 8px; }
.prose .md-h2 { font-size: 18px; margin-top: 28px; padding-top: 14px; border-top: 1px solid var(--line); }
.prose .md-h3 { font-size: 16px; margin-top: 22px; }
.prose .md-h4, .prose .md-h5, .prose .md-h6 { font-size: 15px; margin-top: 18px; color: var(--ink-2); }
.prose > :first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.prose ul, .prose ol { padding-left: 22px; }
.prose li + li { margin-top: 4px; }
.prose li > ul, .prose li > ol { margin-top: 4px; }
.prose li::marker { color: var(--muted); }
.prose li.task { list-style: none; margin-left: -20px; }
.md-check { display: inline-block; width: 13px; height: 13px; border: 1.5px solid var(--axis); border-radius: 3px; margin-right: 8px; vertical-align: -1px; }
.md-check.on { background: var(--ink); border-color: var(--ink); }
.prose code { background: var(--surface-3); padding: 1px 5px; border-radius: 5px; font-size: .86em; }
.prose pre.md-code { background: var(--surface-2); border: 1px solid var(--line); padding: 12px 14px; border-radius: var(--r-ctl); overflow-x: auto;
  font-size: 12.5px; line-height: 1.55; max-width: 100%; }
.prose pre.md-code code { background: none; padding: 0; font-size: inherit; overflow-wrap: normal; }
.prose blockquote { margin: 12px 0 0; padding: 2px 0 2px 14px; border-left: 1px solid var(--line-strong); color: var(--ink-2); }
.prose hr { border: 0; border-top: 1px solid var(--line); margin: 20px 0; }
.prose .md-table { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-ctl); }
.prose .md-table table { font-size: var(--t-sm); line-height: 1.45; }
.prose .md-table th, .prose .md-table td { padding: 7px 10px; vertical-align: top; white-space: normal; }
.prose .md-table tr:last-child td { border-bottom: 0; }
.prose .md-img { color: var(--muted); font-style: italic; }
.prose a.md-ref { font-family: var(--mono); font-size: .9em; }
.truncated-note { font-size: var(--t-sm); color: var(--muted); border-top: 1px dashed var(--line-strong); padding-top: 12px; }

.fields-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 12px; }
@media (max-width: 640px) {
  .title-wrap h1 { font-size: var(--t-xl); }
  .title-wrap p { font-size: var(--t-sm); }
  .toolbar .search { max-width: none; flex-basis: 100%; }
  .ledger { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ledger .cell { padding: 12px 14px; }
  .cell-value { font-size: 22px; }
  .panel { padding: 16px; }
  .panel.flush > .panel-head { padding: 14px 16px 0; }
  .drawer-body { padding: 16px 16px 40px; }
  .drawer-head { padding: 14px 12px 12px 16px; }
  .periodic, .periodic.mini { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
  .cell-el, .periodic.mini .cell-el { min-height: 66px; padding: 6px 7px; }
  .cell-el .sym, .periodic.mini .cell-el .sym { font-size: 19px; }
  .cell-el .nm { font-size: 10.5px; }
  .cell-el .nm2 { display: none; }
  .skill-row .desc { grid-row: 2; }
  .skill-row .stats { grid-row: 3; }
  table.responsive thead { display: none; }
  table.responsive tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
  table.responsive td { padding: 0; border: 0; }
  table.responsive td.objective { grid-column: 1 / -1; grid-row: 2; max-width: none; }
  table.responsive td.c-status { grid-row: 1; }
  table.responsive td.c-time { grid-row: 1; text-align: right; }
  table.responsive td.c-agent { grid-row: 3; color: var(--ink-2); font-size: var(--t-sm); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  table.responsive td.c-prio { grid-row: 3; text-align: right; }
  .usage li { grid-template-columns: minmax(0, 1fr) 70px 28px; gap: 8px; }
}

/* ---------- live data status ---------- */
.live { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 4px 0 11px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--surface); font-size: var(--t-xs); color: var(--ink-2); white-space: nowrap; }
.live .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--good); flex: none; }
.live.paused .dot { background: var(--axis); }
.live.stale { border-color: color-mix(in srgb, var(--warning) 60%, transparent); background: var(--warning-wash); color: var(--warning-ink); }
.live.stale .dot { background: var(--warning); }
.live .btn { height: 24px; padding: 0 9px; font-size: var(--t-xs); border-radius: 999px; }
@media (max-width: 640px) { .live .label-long { display: none; } }
@media (max-width: 520px) { .live { display: none; } }

/* ---------- touch: 44px minimum targets on coarse pointers ---------- */
@media (pointer: coarse) {
  .btn, input, select, .nav a, .tabs button { min-height: 44px; }
  .btn.sm { min-height: 40px; }
  .btn.icon-only { width: 44px; }
  .chip, .skill-chip { min-height: 36px; }
  .segmented button { min-height: 40px; }
  .live .btn { min-height: 32px; }
}

/* ---------- reduced motion: no movement, no shimmer, no pulse ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0s !important; animation: none !important; }
  .btn:active, .chip:active, .skill-chip:active, .cell-el:active { transform: none; }
}