/* Editorial Orbit — UI styles. Modern, calm, institutional, premium. */
:root {
  --brand: #0a4ea2;
  --brand-dark: #073a78;
  --brand-tint: #eef4fc;
  --accent: #00b3a4;
  --accent-dark: #009488;
  --bg: #eef1f6;
  --surface: #ffffff;
  --surface-2: #f6f8fb;
  --surface-3: #eef2f7;
  --border: #e6eaf1;
  --border-strong: #cdd5e1;
  --text: #16202e;
  --text-soft: #566072;
  --text-faint: #8a94a6;
  --ok: #1f9d62;
  --ok-bg: #e7f7ee;
  --warn: #c47d00;
  --warn-bg: #fdf3e0;
  --danger: #d23f46;
  --danger-bg: #fdecec;
  --radius-lg: 16px;
  --radius: 12px;
  --radius-sm: 9px;
  --radius-xs: 6px;
  /* Layered, soft shadows for real depth without heaviness. */
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, .05), 0 1px 3px rgba(16, 24, 40, .04);
  --shadow: 0 2px 4px rgba(16, 24, 40, .05), 0 8px 20px -6px rgba(16, 24, 40, .12);
  --shadow-lg: 0 4px 8px rgba(16, 24, 40, .06), 0 24px 48px -12px rgba(16, 24, 40, .22);
  --shadow-focus: 0 0 0 3px rgba(10, 78, 162, .14);
  --ring: 1px solid var(--border);
  /* Spacing scale (4px base) — use for consistent rhythm. */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px;
  --font: "Inter var", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: "SFMono-Regular", ui-monospace, "Cascadia Code", Consolas, monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: var(--font);
  color: var(--text);
  background: var(--bg);
  font-size: 14.5px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
a { color: var(--brand); text-decoration: none; cursor: pointer; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { margin: 0 0 .4em; line-height: 1.25; letter-spacing: -.011em; }
h1 { letter-spacing: -.02em; }
.hidden { display: none !important; }

/* Calm, consistent scrollbars app-wide. Slim enough to read as chrome rather
   than furniture, and tinted with the brand so it belongs to the app. The
   inset border keeps the visible thumb narrower than its hit area, so it stays
   comfortable to grab at this width. */
:root {
  --scrollbar-size: 8px;
  --scrollbar-thumb: #9fb2cd;
  --scrollbar-thumb-hover: var(--brand);
}
/* Firefox has no per-pixel control, so it gets the standard properties. They are
   scoped away from engines that support ::-webkit-scrollbar, because current
   Chromium lets `scrollbar-width` win over the pseudo-element and would pin the
   bar to its own "thin" size, ignoring --scrollbar-size entirely. */
@supports not selector(::-webkit-scrollbar) {
  * { scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) transparent; }
}
*::-webkit-scrollbar { width: var(--scrollbar-size); height: var(--scrollbar-size); }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb); border-radius: 99px;
  border: 2px solid transparent; background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover); background-clip: content-box; }
*::-webkit-scrollbar-corner { background: transparent; }

#app { display: grid; grid-template-columns: var(--rail-w) 1fr; grid-template-rows: minmax(0,1fr); height: 100dvh; overflow: hidden; }

/* ================= Sidebar rail =================
   One dark control surface against the light workspace. Its own tokens live
   here so every part of the rail — nav, footer, mobile drawer and the mobile
   top bar — stays in step, and so tuning the rail never reaches into the app. */
:root {
  --rail-w: 260px;
  --rail-top: #0d1a33;
  --rail-bottom: #080f1f;
  --rail-line: rgba(255,255,255,.07);
  --rail-line-soft: rgba(255,255,255,.045);
  --rail-fill: rgba(255,255,255,.05);
  --rail-fill-hover: rgba(255,255,255,.085);
  --rail-text: #93a2c0;
  --rail-text-strong: #f3f6fc;
  --rail-text-faint: #6a7897;
  --rail-icon: #7f8eaf;
  /* Vertical rhythm of the destination list. The height queries below retune
     these instead of restyling the items, so one dial fits the rail to the
     screen and the look never changes with the viewport. */
  --nav-item-h: 34px;
  --nav-item-pad-y: 7px;
  --nav-gap: 2px;
  --nav-group-gap: 15px;
}

.topbar { display: none; }
.sidebar-scrim { display: none; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

.sidebar {
  position: relative;
  display: flex; flex-direction: column; min-height: 0;
  background: linear-gradient(180deg, var(--rail-top) 0%, var(--rail-bottom) 100%);
  color: var(--rail-text);
  border-right: 1px solid rgba(6,12,24,.9);
}
/* A single soft accent bloom behind the brand keeps the rail from reading as a
   flat block of navy. It is decorative and must never eat a click. */
.sidebar::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 240px; pointer-events: none;
  background: radial-gradient(120% 100% at 0% 0%, rgba(0,179,164,.13) 0%, rgba(10,78,162,.09) 38%, transparent 72%);
}
.sidebar > * { position: relative; }

/* ---------- Head: brand + drawer close ---------- */
.sidebar-head {
  flex: 0 0 auto; display: flex; align-items: center; gap: 8px;
  padding: 17px 14px 15px; border-bottom: 1px solid var(--rail-line-soft);
}
.brand { display: flex; align-items: center; gap: 11px; min-width: 0; flex: 1; }
/* The logomark is treated as a product icon rather than a glyph on a tinted
   square: a lit tile with its own depth, so the head reads as the top of an
   application and not as the first row of a menu. */
.brand-mark {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 40px; height: 40px; border-radius: 12px;
  background: linear-gradient(152deg, #1b365e 0%, #0c1f3d 52%, #091730 100%);
  border: 1px solid rgba(122,190,255,.14);
  box-shadow:
    0 6px 16px rgba(3,8,18,.5),
    0 0 0 1px rgba(0,179,164,.05),
    inset 0 1px 0 rgba(255,255,255,.15);
}
/* A single light source behind the glyph, matching the rail's accent bloom. */
.brand-mark::before {
  content: ""; position: absolute; inset: -35%; pointer-events: none;
  background: radial-gradient(circle at 32% 28%, rgba(0,179,164,.3) 0%, rgba(10,78,162,.18) 42%, transparent 70%);
}
.brand-mark svg { position: relative; }
.brand-text { display: flex; flex-direction: column; gap: 2px; line-height: 1.2; min-width: 0; }
.brand-text strong {
  color: var(--rail-text-strong); font-size: 15.5px; font-weight: 600; letter-spacing: -.022em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Two weights in one wordmark: the app name keeps its emphasis without the whole
   line shouting, which is what a single bold run at this size does. */
.brand-word { font-weight: 750; }
.brand-text > span {
  color: var(--rail-text-faint); font-size: 10.5px; font-weight: 500; letter-spacing: .012em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sidebar-close {
  display: none; flex: none; width: 34px; height: 34px; border-radius: 9px;
  background: transparent; border: 1px solid transparent; color: var(--rail-text);
  cursor: pointer; place-items: center;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.sidebar-close:hover { background: var(--rail-fill-hover); color: #fff; border-color: var(--rail-line); }

/* ---------- Scrolling middle: org, primary action, destinations ---------- */
.sidebar-scroll {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  padding: 14px 12px 10px;
}
/* The rail keeps its own quiet scrollbar: present when the list overflows a
   short screen, invisible until the pointer is actually in the rail. */
.sidebar-scroll::-webkit-scrollbar { width: 6px; }
.sidebar-scroll::-webkit-scrollbar-thumb { background: transparent; border: none; }
.sidebar-scroll:hover::-webkit-scrollbar-thumb { background: rgba(255,255,255,.16); border-radius: 99px; }
@supports not selector(::-webkit-scrollbar) {
  .sidebar-scroll { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.16) transparent; }
}

.org-switcher { margin: 0 0 12px; }
.org-field {
  position: relative; display: flex; align-items: center;
  border-radius: 10px; background: rgba(255,255,255,.045);
  border: 1px solid rgba(255,255,255,.075);
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.org-field:hover { background: rgba(255,255,255,.075); border-color: rgba(255,255,255,.13); }
.org-field:focus-within { border-color: rgba(0,179,164,.55); box-shadow: 0 0 0 3px rgba(0,179,164,.15); }
.org-ic { position: absolute; left: 11px; color: var(--rail-icon); pointer-events: none; }
.org-caret { position: absolute; right: 10px; color: var(--rail-icon); pointer-events: none; }
.org-switcher select {
  appearance: none; -webkit-appearance: none;
  width: 100%; min-width: 0; padding: 9px 30px 9px 33px; border: none; background: transparent;
  color: var(--rail-text-strong); font-family: inherit; font-size: 13px; font-weight: 600;
  letter-spacing: -.005em; cursor: pointer; border-radius: 10px;
  text-overflow: ellipsis;
}
.org-switcher select:focus { outline: none; }
/* Native dropdown options render on their own surface — force readable colours so
   they are never light-on-white (the "invisible when open" bug). */
.org-switcher select option { background: #14213a; color: #e6ecf7; }


.nav { display: flex; flex-direction: column; gap: var(--nav-group-gap); }
.nav-group { display: flex; flex-direction: column; gap: var(--nav-gap); }
/* A group is only a heading for the destinations under it. When a viewer's role
   leaves it with nothing, app.js hides the whole group — a lone label over empty
   space is exactly what makes a trimmed menu look broken. */
.nav-group-label {
  margin: 0 0 5px; padding: 0 11px;
  font-size: 10.5px; font-weight: 650; letter-spacing: .085em; text-transform: uppercase;
  color: var(--rail-text-faint);
}
.nav-item {
  position: relative; display: flex; align-items: center; gap: 10px;
  min-height: var(--nav-item-h); padding: var(--nav-item-pad-y) 11px;
  border-radius: 9px; color: var(--rail-text); cursor: pointer;
  font-size: 13.5px; font-weight: 500; letter-spacing: -.006em; line-height: 1.25;
  transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}
.nav-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-item:hover { background: var(--rail-fill); color: var(--rail-text-strong); text-decoration: none; }
.nav-item:hover .nav-ic { color: #b8c6e2; }
.nav-item:focus-visible {
  outline: none; color: var(--rail-text-strong);
  box-shadow: 0 0 0 2px rgba(0,179,164,.6), 0 0 0 4px rgba(0,179,164,.16);
}
/* Selected destination: a frosted pill tinted toward the accent, with the icon
   carrying the colour. Distinct from the solid-brand "New project" button, and
   readable at a glance without a hard rule down the edge. */
.nav-item.active {
  color: var(--rail-text-strong);
  background: linear-gradient(90deg, rgba(0,179,164,.16) 0%, rgba(255,255,255,.075) 60%, rgba(255,255,255,.055) 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 1px 2px rgba(0,0,0,.25);
  font-weight: 600;
}
.nav-item.active::before {
  content: ""; position: absolute; left: 3px; top: 50%; transform: translateY(-50%);
  width: 3px; height: 16px; border-radius: 99px; background: var(--accent);
  box-shadow: 0 0 8px rgba(0,179,164,.55);
}
.nav-item.active .nav-ic { color: var(--accent); }
.nav-ic {
  width: 18px; height: 18px; flex: none; display: inline-flex; align-items: center; justify-content: center;
  color: var(--rail-icon); transition: color .15s ease;
}
.nav-ic svg {
  width: 17px; height: 17px; stroke: currentColor; fill: none;
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
.nav-badge {
  margin-left: auto; flex: none; min-width: 19px; text-align: center;
  background: var(--accent); color: #04231f; font-weight: 700; font-size: 10.5px;
  border-radius: 99px; padding: 1px 6px; line-height: 1.5;
  box-shadow: 0 1px 4px rgba(0,179,164,.35);
}

/* ---------- Foot: activity, providers, account ---------- */
.sidebar-foot {
  position: relative;
  flex: 0 0 auto; display: flex; flex-direction: column; gap: 8px;
  padding: 10px 12px calc(12px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--rail-line-soft);
  background: linear-gradient(180deg, rgba(255,255,255,.015), rgba(0,0,0,.14));
}
.sidebar-foot::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 22px;
  pointer-events: none;
  background: linear-gradient(to top, var(--rail-bottom), rgba(8,15,31,0));
}
.status-pill {
  display: flex; align-items: center; gap: 8px; width: 100%; box-sizing: border-box;
  font-size: 12.5px; font-weight: 550; padding: 7px 11px; border-radius: 9px;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.055);
  color: var(--rail-text); font-family: inherit; text-align: left;
}
.activity-pill { cursor: pointer; transition: background .15s ease, border-color .15s ease, color .15s ease; }
.activity-pill:hover { background: var(--rail-fill-hover); border-color: rgba(255,255,255,.13); color: var(--rail-text-strong); }
.activity-pill:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(0,179,164,.22); }
.status-pill .dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: #5f6d8a; }
.status-ok .dot { background: var(--accent); box-shadow: 0 0 0 3px rgba(0,179,164,.18); }
.status-bad .dot { background: var(--danger); box-shadow: 0 0 0 3px rgba(210,63,70,.18); }
.status-unknown .dot { background: #5f6d8a; }
.activity-count {
  margin-left: auto; min-width: 19px; text-align: center; font-weight: 700;
  background: var(--accent); color: #04231f; border-radius: 99px; padding: 1px 6px; font-size: 10.5px;
  line-height: 1.5;
}

/* One status strip rather than five cramped abbreviations. Each dot keeps the
   provider's full name in its title and aria-label (set in app.js), so the row
   reads as a health indicator and still answers "which one is down?" on hover. */
.provider-strip {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 7px 11px; border-radius: 9px;
  background: rgba(255,255,255,.028); border: 1px solid var(--rail-line-soft);
}
.provider-strip-label { font-size: 11.5px; font-weight: 550; color: var(--rail-text-faint); white-space: nowrap; }
.provider-status-grid { display: flex; align-items: center; gap: 9px; }
.provider-status-grid .status-pill {
  width: auto; padding: 0; background: none; border: none; border-radius: 0; cursor: default;
}
.provider-status-grid .status-pill .dot { width: 7px; height: 7px; }

.user-box {
  display: flex; align-items: center; gap: 10px; padding: 7px 9px;
  border-radius: 10px; background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.055);
}
.user-ava {
  position: relative; width: 34px; height: 34px; border-radius: 10px; flex: none; overflow: hidden;
  border: 1px solid rgba(126,199,255,.28); background: linear-gradient(145deg,#f8fbff 8%,#dce9f7 100%);
  box-shadow: 0 4px 12px rgba(0,0,0,.26), inset 0 1px 0 rgba(255,255,255,.9);
}
.user-ava .account-avatar { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%) scale(.7); transform-origin: center; }
.user-ava::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(135deg,rgba(255,255,255,.55),transparent 42%,rgba(12,24,48,.08)); }
.user-meta { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; flex: 1; }
.user-meta strong {
  color: var(--rail-text-strong); font-size: 12.5px; font-weight: 600; letter-spacing: -.005em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.user-role {
  color: var(--rail-text-faint); font-size: 10.5px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.user-logout {
  display: grid; place-items: center; flex: none; width: 30px; height: 30px;
  background: transparent; border: 1px solid transparent; border-radius: 8px;
  color: var(--rail-text-faint); cursor: pointer; padding: 0;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.user-logout:hover { background: var(--rail-fill-hover); color: #fff; border-color: var(--rail-line); }
.user-logout:focus-visible { outline: none; color: #fff; box-shadow: 0 0 0 3px rgba(0,179,164,.25); }

/* ---------- Fitting the rail to the screen ----------
   The list is top-aligned at every height: spacing tightens on shorter screens,
   and once it hits the legible floor the rail scrolls. It must never spread the
   destinations apart to fill the space, which is what made a non-admin's shorter
   menu look like it had holes punched in it. */
@media (min-width: 861px) and (max-height: 900px) {
  :root { --nav-item-h: 31px; --nav-item-pad-y: 6px; --nav-group-gap: 11px; }
  .sidebar-head { padding: 12px 14px 11px; }
  .sidebar-scroll { padding-top: 11px; }
  .nav-group-label { margin-bottom: 3px; }
  .sidebar-foot { gap: 7px; padding-top: 9px; padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)); }
}
@media (min-width: 861px) and (max-height: 830px) {
  :root { --nav-item-h: 29px; --nav-item-pad-y: 5px; --nav-group-gap: 8px; }
  .sidebar-head { padding: 11px 14px 10px; }
  .brand-text > span { display: none; }
  .brand-mark { width: 34px; height: 34px; border-radius: 10px; }
  .org-switcher { margin-bottom: 8px; }
  .org-switcher select { padding-top: 8px; padding-bottom: 8px; }
  .nav-group-label { margin-bottom: 2px; }
  .sidebar-scroll { padding-bottom: 8px; }
  .sidebar-foot { gap: 6px; padding-top: 8px; }
  .user-ava { width: 32px; height: 32px; }
  .user-box { padding: 6px 9px; }
}
@media (min-width: 861px) and (max-height: 790px) {
  :root { --nav-item-h: 27px; --nav-item-pad-y: 4px; --nav-group-gap: 7px; }
  .nav-group-label { font-size: 10px; }
  .provider-strip, .status-pill { padding-top: 5px; padding-bottom: 5px; }
  .user-box { padding: 4px 9px; }
  .user-ava { width: 30px; height: 30px; }
  .sidebar-scroll { padding-top: 10px; }
}

/* ---------- Content-type builder ---------- */
.ct-builder { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
@media (max-width: 900px) { .ct-builder { grid-template-columns: 1fr; } }
.ct-field-row { border: 1px solid var(--border, #e2e6ef); border-radius: 8px; padding: 10px; margin-bottom: 10px; background: rgba(0,0,0,.02); }
.ct-field-top { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ct-field-top .ct-flabel { flex: 1; min-width: 120px; }
.ct-field-cons { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-top: 8px; }
.ct-field-cons .ct-fhint { flex: 1; min-width: 140px; }
.ct-c { display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--text-muted, #667); }
.ct-c input[type="number"] { width: 70px; }
.ct-prompt { white-space: pre-wrap; font-size: 12px; background: rgba(0,0,0,.04); padding: 12px; border-radius: 8px; max-height: 46vh; overflow: auto; }
.derive-opt { display: flex; align-items: center; gap: 8px; padding: 6px 0; }

/* ---------- Content ---------- */
.content { min-height: 0; overflow-y: auto; padding: 0; }
.page { max-width: 1120px; margin: 0 auto; padding: 34px 40px 96px; }
.page-wide { max-width: 1320px; }

.page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin-bottom: 26px; }
.page-head > div:first-child { flex: 1 1 auto; min-width: 0; }
.page-head > .btn, .page-head > .btn-row, .page-head > .flex { flex: 0 0 auto; }
.page-head h1 { font-size: 25px; font-weight: 750; }
.page-head p { margin: 5px 0 0; color: var(--text-soft); max-width: 92ch; font-size: 14px; line-height: 1.5; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  border: 1px solid var(--border-strong); background: var(--surface);
  color: var(--text); padding: 8px 15px; border-radius: var(--radius-sm);
  font-size: 13.5px; font-weight: 600; cursor: pointer; font-family: inherit;
  box-shadow: var(--shadow-sm);
  transition: background .14s ease, border-color .14s ease, box-shadow .14s ease, transform .06s ease, color .14s ease;
  white-space: nowrap; line-height: 1.4;
}
.btn:hover { background: var(--surface-2); border-color: var(--border-strong); box-shadow: var(--shadow); }
.btn:active { transform: translateY(1px); box-shadow: var(--shadow-sm); }
.btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.btn:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; }
.btn-primary { background: linear-gradient(180deg, #1157ac 0%, var(--brand) 100%); border-color: var(--brand-dark); color: #fff;
  box-shadow: 0 1px 2px rgba(7,58,120,.4), inset 0 1px 0 rgba(255,255,255,.12); }
.btn-primary:hover { background: linear-gradient(180deg, var(--brand) 0%, var(--brand-dark) 100%); border-color: var(--brand-dark);
  box-shadow: 0 2px 8px rgba(10,78,162,.35), inset 0 1px 0 rgba(255,255,255,.12); }
/* White on teal, like every other solid button. It used to write in a very
   dark teal at rest and switch to white on hover, which read as a button that
   had not finished loading. The gradient is deepened rather than the text
   lightened alone: white on the old #10bdae is 2.7:1, and both stops here clear
   4.5:1. */
.btn-accent { background: linear-gradient(180deg, #007f74 0%, #006a60 100%); border-color: #005c54; color: #fff;
  box-shadow: 0 1px 2px rgba(0,148,136,.35), inset 0 1px 0 rgba(255,255,255,.18); }
.btn-accent:hover { background: linear-gradient(180deg, #00907f 0%, #00786d 100%); color: #fff; border-color: #005c54; }
.btn-ghost { background: transparent; border-color: transparent; color: var(--text-soft); box-shadow: none; }
.btn-ghost:hover { background: var(--surface-3); border-color: transparent; box-shadow: none; color: var(--text); }
.btn-danger { color: var(--danger); border-color: var(--border-strong); }
.btn-danger:hover { background: var(--danger-bg); border-color: var(--danger); color: var(--danger); }
.btn-sm { padding: 6px 11px; font-size: 12.5px; border-radius: var(--radius-xs); }
.btn-lg { padding: 11px 20px; font-size: 15px; }
.btn-block { width: 100%; justify-content: center; }
.btn-row { display: flex; gap: 9px; flex-wrap: wrap; align-items: center; }

/* ---------- Cards ---------- */
.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-sm);
}
.card-pad { padding: 20px 22px; }
.card h3 { font-size: 15.5px; font-weight: 700; }
.grid { display: grid; gap: 16px; }
.grid-cards { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }

.project-card { padding: 17px 18px; cursor: pointer; transition: box-shadow .18s ease, transform .12s ease, border-color .18s ease; }
.project-card:hover { box-shadow: var(--shadow); transform: translateY(-2px); border-color: var(--border-strong); }
.project-card h3 { font-size: 15.5px; }
.project-card .meta-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.project-card .pc-date { color: var(--text-faint); font-size: 12px; margin-top: 10px; }

/* ---------- Badges / chips ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11.5px; font-weight: 650; padding: 3px 10px; border-radius: 99px; line-height: 1.5;
  background: var(--surface-2); color: var(--text-soft); border: 1px solid var(--border);
  white-space: nowrap;
}
.badge-brand { background: #eaf2fb; color: var(--brand); border-color: #d4e5f8; }
.badge-accent { background: #e3f7f4; color: var(--accent-dark); border-color: #c4ece6; }
.badge-ok { background: var(--ok-bg); color: var(--ok); border-color: #c7ecd6; }
.badge-warn { background: var(--warn-bg); color: var(--warn); border-color: #f3e2bf; }
.badge-danger { background: var(--danger-bg); color: var(--danger); border-color: #f5cccd; }
/* Clickable "used N×" usage badge — opens the where-used drilldown. */
.usage-badge { margin-left: 6px; cursor: pointer; background: #eaf2fb; color: var(--brand);
  border-color: #d4e5f8; transition: background .12s ease, border-color .12s ease; }
.usage-badge:hover { background: #d9e9fb; border-color: #b9d6f4; }
.usage-badge:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.model-chip {
  display: inline-flex; align-items: center; gap: 5px; max-width: 260px;
  padding: 2px 7px; border-radius: 99px; border: 1px solid var(--border);
  background: var(--surface-2); color: var(--text-faint);
  font-size: 11px; font-weight: 600; line-height: 1.35;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  text-transform: none; letter-spacing: 0;
}
.run-meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 8px; }

/* ---------- Forms ---------- */
label { font-weight: 600; font-size: 12.5px; display: block; margin-bottom: 6px; color: var(--text); }
.hint { font-weight: 400; color: var(--text-faint); font-size: 12px; }
input[type=text], input[type=number], input[type=url], input[type=email],
input[type=password], input[type=date], select, textarea {
  width: 100%; padding: 9px 12px; border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm); font-family: inherit; font-size: 14px;
  background: var(--surface); color: var(--text);
  transition: border-color .14s ease, box-shadow .14s ease, background .14s ease;
}
input::placeholder, textarea::placeholder { color: var(--text-faint); }
input:hover:not(:focus), select:hover:not(:focus), textarea:hover:not(:focus) { border-color: var(--text-faint); }
textarea { resize: vertical; line-height: 1.6; }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--brand); box-shadow: var(--shadow-focus);
}
select { appearance: none; -webkit-appearance: none; padding-right: 34px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%235a6072' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 11px center; cursor: pointer; }

/* A selector input paired with the picker for where its value is read from.
   Both controls are width:100% above, so the row has to size them explicitly. */
.sel-with-source { display: flex; gap: 8px; align-items: center; }
.sel-with-source input { flex: 1 1 auto; min-width: 0; }
.sel-with-source select { flex: 0 0 138px; }
.sel-with-source .sel-pick { flex: 0 0 auto; white-space: nowrap; }

/* --- Scrape configuration assistant --------------------------------------- */
.assist-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: -4px 0 14px; padding: 10px 12px; background: var(--surface-2);
  border: var(--ring); border-radius: var(--radius-sm); }
.assist-bar .is-warn { color: var(--warn); }
.assist-busy { margin: 0; padding: 10px 0; }

/* Live report under each selector: what it matches right now, and the first
   value it would extract. */
.sel-status { display: flex; gap: 8px; align-items: baseline; min-height: 0;
  margin: 4px 2px 0; font-size: 12.5px; }
.sel-status:empty { display: none; }
.sel-count { flex: 0 0 auto; font-weight: 650; }
.sel-status.is-ok .sel-count { color: var(--ok); }
.sel-status.is-warn .sel-count { color: var(--warn); }
.sel-status.is-err, .sel-status.is-err .sel-count { color: var(--danger); }
.sel-sample { flex: 1 1 auto; min-width: 0; color: var(--text-soft);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sel-code { font-family: var(--mono); font-size: 12px; word-break: break-all; }

.assist-result { margin: 0 0 16px; padding: 14px; background: var(--surface-2);
  border: var(--ring); border-radius: var(--radius-sm); }
.assist-result > p:first-child { margin-top: 0; }
.assist-notes { margin: 10px 0 0; padding-left: 18px; }
.assist-notes.is-warn { color: var(--warn); }
.assist-result .table-wrap { overflow-x: auto; background: var(--surface);
  border: var(--ring); border-radius: var(--radius-sm); }
.sel-table td { vertical-align: top; }
.sel-table .sel-sample-cell { color: var(--text-soft); max-width: 260px; }

.test-record { margin-top: 12px; padding: 12px; background: var(--surface);
  border: var(--ring); border-radius: var(--radius-sm); }
.test-record.is-bad { border-color: var(--danger); background: var(--danger-bg); }
.test-record-head { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap;
  margin-bottom: 8px; padding-bottom: 8px; border-bottom: var(--ring); }
.test-record-head a { font-weight: 650; }
.test-field { display: grid; grid-template-columns: 150px 1fr; gap: 12px; padding: 5px 0; }
.test-field-label { font-weight: 620; font-size: 12.5px; }
.test-field-label .small { display: block; font-weight: 400; }
.test-field-value { color: var(--text-soft); overflow-wrap: anywhere; }
.test-field.is-empty .test-field-value { color: var(--danger); }

/* The picker sits above the job modal: the page being configured, made clickable. */
.picker-overlay { position: fixed; inset: 0; z-index: 200; display: grid;
  place-items: center; padding: 16px; background: rgba(13, 20, 38, .58);
  backdrop-filter: blur(3px); }
.picker-shell { display: flex; flex-direction: column; width: min(1400px, 96vw);
  height: min(900px, 94vh); background: var(--surface); border-radius: var(--radius);
  box-shadow: var(--shadow-lg); overflow: hidden; }
.picker-head { display: flex; gap: 12px; align-items: center; justify-content: space-between;
  padding: 12px 16px; border-bottom: var(--ring); }
.picker-head-main { min-width: 0; }
.picker-url { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.picker-hint { padding: 8px 16px; background: var(--brand-tint); color: var(--brand-dark); }
.picker-body { flex: 1 1 auto; min-height: 0; background: #fff; }
.picker-frame { width: 100%; height: 100%; border: 0; display: block; }
.picker-status { padding: 9px 16px; border-top: var(--ring); background: var(--surface-2);
  min-height: 36px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.picker-status code { font-family: var(--mono); color: var(--text); }

@media (max-width: 760px) {
  .test-field { grid-template-columns: 1fr; gap: 2px; }
  .sel-with-source { flex-wrap: wrap; }
  .sel-with-source select, .sel-with-source .sel-pick { flex: 1 1 auto; }
}

/* ---------- Premium checkboxes & toggles (app-wide) ----------
   A single restyle upgrades every native checkbox; add class="toggle" to turn a
   checkbox into an on/off switch for genuine settings (active, enabled, pause…). */
input[type="checkbox"] {
  appearance: none; -webkit-appearance: none;
  flex: none; box-sizing: border-box;
  width: 18px; height: 18px; min-width: 18px; min-height: 18px;
  margin: 0; padding: 0; position: relative; vertical-align: -4px;
  border: 1.5px solid var(--border-strong); border-radius: var(--radius-xs);
  background: var(--surface); cursor: pointer;
  transition: background-color .16s ease, border-color .16s ease, box-shadow .16s ease;
}
input[type="checkbox"]:hover:not(:disabled) { border-color: var(--accent); }
input[type="checkbox"]:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
input[type="checkbox"]:checked { background: var(--brand); border-color: var(--brand); }
input[type="checkbox"]:checked::after {
  content: ""; position: absolute; left: 5px; top: 1px;
  width: 4px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
input[type="checkbox"]:disabled { opacity: .5; cursor: not-allowed; }

/* Switch variant — same native input, rendered as a sliding toggle. */
input[type="checkbox"].toggle {
  width: 38px; min-width: 38px; height: 22px; min-height: 22px;
  border-radius: 999px; background: var(--surface-3); vertical-align: -6px;
}
input[type="checkbox"].toggle::after {
  content: ""; position: absolute; left: 2px; top: 2px;
  width: 15px; height: 15px; border: 0; border-radius: 50%;
  background: #fff; box-shadow: var(--shadow-sm); transform: none;
  transition: transform .18s ease;
}
input[type="checkbox"].toggle:checked { background: var(--accent); border-color: var(--accent); }
input[type="checkbox"].toggle:checked::after { border: 0; transform: translateX(16px); }

.field { margin-bottom: 16px; }
/* align-items:end keeps the inputs lined up horizontally even when one label
   wraps to two lines (e.g. long hints in the RAG settings). The row owns the
   bottom spacing so the inner fields can sit flush. */
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: end; margin-bottom: 16px; }
.field-row .field { margin-bottom: 0; }
/* The content-category hint sits below its select; align this builder row from
   the top so both labels and both controls share the same horizontal baseline. */
.field-row.ct-basic-row { align-items: start; }
/* Per-agent model picker: provider dropdown + model dropdown (+ custom input). */
.model-field { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.model-field .model-prov { flex: 0 0 132px; max-width: 132px; }
.model-field .model-name { flex: 1 1 140px; min-width: 0; }
.model-field .model-custom { flex: 1 1 100%; }
/* A picker whose value is not used until its opt-in toggle is switched on. */
.model-field.is-disabled { opacity: .5; }
.model-field.is-disabled select, .model-field.is-disabled input { cursor: not-allowed; }
.mono { font-family: var(--mono); font-size: 12.5px; }

/* ---------- Project detail ---------- */
.proj-header {
  display: flex; flex-direction: column; align-items: stretch; gap: 12px; margin-bottom: 18px;
}
.proj-header > .btn-row { align-self: flex-end; justify-content: flex-end; width: auto; }
.proj-title-input {
  font-size: 22px; font-weight: 700; border: 1px solid transparent;
  background: transparent; padding: 4px 8px; margin: -4px -8px; border-radius: 8px;
  flex: none; min-width: 0;
}
.proj-title-input:hover { background: var(--surface); border-color: var(--border); }

/* Project sub-page tab bar: Setup · workflow steps · Translations · Activity. */
/* The strip never wraps. A workspace can carry a dozen tabs, and two rows of
   them stop being a strip: the eye has to search for the active one, and the
   panel below jumps a line as tabs come and go with the reader's role.

   The hairline lives on the shell rather than on the scroller, so it stays put
   while the tabs slide under it — and the tabs sit above it, which is what lets
   an active tab's accent cover it without the negative margin that a scroll
   container would clip. */
.proj-tabs-shell { position: relative; margin: 20px 0 0; }
.proj-tabs-shell::after { content: ""; position: absolute; inset: auto 0 0 0; height: 1px;
  background: var(--border); }
/* No scroll-behavior here on purpose: it would animate every wheel tick into a
   lag. The two programmatic scrolls that should glide ask for it themselves. */
.proj-tabs { position: relative; z-index: 1; display: flex; gap: 2px; flex-wrap: nowrap;
  overflow-x: auto; overscroll-behavior-x: contain;
  scrollbar-width: none; -ms-overflow-style: none; }
.proj-tabs::-webkit-scrollbar { display: none; }

/* Hiding the scrollbar means providing the way back. The chevron appears on
   exactly the side that has somewhere to go, and carries the fade itself — one
   thing doing both jobs, and a legible control rather than a glyph laid over
   the text it is standing on. */
.proj-tabs-nudge {
  position: absolute; top: 0; bottom: 1px; z-index: 2; width: 54px; display: flex;
  align-items: center; padding: 0 4px; border: 0; cursor: pointer;
  color: var(--text-soft); opacity: 0; pointer-events: none;
  transition: opacity .14s ease, color .14s ease;
}
.proj-tabs-nudge svg { width: 18px; height: 18px; }
.proj-tabs-nudge.is-prev { left: 0; justify-content: flex-start;
  background: linear-gradient(90deg, var(--bg) 60%, transparent 100%); }
.proj-tabs-nudge.is-next { right: 0; justify-content: flex-end;
  background: linear-gradient(270deg, var(--bg) 60%, transparent 100%); }
.proj-tabs-shell:has(.can-left) .proj-tabs-nudge.is-prev,
.proj-tabs-shell:has(.can-right) .proj-tabs-nudge.is-next {
  opacity: 1; pointer-events: auto; }
.proj-tabs-nudge:hover { color: var(--brand); }
.proj-tabs-nudge:active svg { transform: scale(.88); }
.ptab {
  display: inline-flex; align-items: center; gap: 7px; padding: 10px 16px;
  flex: 0 0 auto; white-space: nowrap;
  border: 0; border-bottom: 2px solid transparent; background: none; cursor: pointer;
  font: inherit; font-weight: 600; font-size: 14px; color: var(--text-soft);
  transition: color .12s ease, border-color .12s ease;
}
.ptab:hover { color: var(--text); }
.ptab.active { color: var(--brand); border-bottom-color: var(--brand); }
.ptab-ic { font-size: 15px; }
.ptab-check { color: var(--ok); font-weight: 800; }
.ptab.active .ptab-check { color: var(--ok); }
.ptab-locked { opacity: .4; cursor: not-allowed; }
.ptab-locked:hover { color: var(--text-soft); }

.split { display: grid; grid-template-columns: 1.35fr 1fr; gap: 20px; align-items: start; }
@media (max-width: 1100px) { .split { grid-template-columns: 1fr; } }

.panel { margin-bottom: 18px; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.panel-head h3 { font-size: 15.5px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.panel-head .agent-tag { font-size: 11px; color: var(--text-faint); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.panel-head .agent-tag .model-chip { margin-left: 8px; vertical-align: middle; }

/* Refiner control (reused on Setup and the AI Assistant composer) */
.refine-control { display: inline-flex; align-items: center; gap: 8px; }
.refine-badge { font-size: 11px; font-weight: 650; padding: 2px 9px; border-radius: 999px;
  border: 1px solid var(--border-strong); color: var(--text-soft); background: var(--surface); white-space: nowrap; }
.refine-badge.is-agent { color: var(--brand-dark); border-color: #bfd7f1; background: #f0f6ff; }

/* streaming output */
.stream-out {
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 14px 16px; white-space: pre-wrap; font-size: 13.5px; min-height: 40px;
  max-height: 460px; overflow-y: auto; line-height: 1.6;
}
/* An empty output box is just clutter — collapse it until it's streaming or has
   content, so a stage never shows one or two blank grey placeholders. */
.stream-out:empty:not(.streaming) { display: none; }
.stream-out.streaming { border-color: var(--accent); }
.stream-out.streaming:empty::before { content: "Generating…"; color: var(--text-faint); }
.md-out h2 { font-size: 17px; margin-top: 14px; }
.md-out h3 { font-size: 15px; }
.md-out ul { margin: 6px 0 6px 2px; padding-left: 20px; }
.md-out p { margin: 8px 0; }
.md-table-wrap { max-width: 100%; margin: 12px 0; overflow-x: auto; }
.md-table-wrap table { width: 100%; border-collapse: collapse; font-size: 13px; line-height: 1.45; }
.md-table-wrap th, .md-table-wrap td {
  min-width: 120px; padding: 9px 11px; border: 1px solid var(--border); vertical-align: top;
}
.md-table-wrap th { background: var(--surface-2); color: var(--text); font-weight: 650; }
.md-table-wrap tbody tr:nth-child(even) { background: var(--surface-2); }
.article-html-view a { text-decoration: underline; text-underline-offset: 2px; }

/* article editor */
.counter { font-size: 12px; font-weight: 600; }
.counter.ok { color: var(--ok); }
.counter.bad { color: var(--danger); }
.counter.warn { color: var(--warn); }
.field-label-row { display: flex; align-items: center; justify-content: space-between; }
.validation-msg { font-size: 12px; color: var(--danger); margin-top: 5px; }

.review-verdict { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; font-weight: 700; }
.issues { white-space: pre-wrap; font-size: 13.5px; line-height: 1.6; }

/* activity log */
.log-item { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--border); }
.log-item:last-child { border-bottom: none; }
.log-ava {
  width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center;
  font-size: 14px; flex-shrink: 0; color: #fff; font-weight: 700;
}
.ava-specs { background: #7c5cff; } .ava-writer { background: var(--brand); }
.ava-proofreader { background: var(--accent-dark); } .ava-lawyer { background: #9a6a3a; }
.ava-auditor { background: #176d72; }
.ava-human { background: #64748b; }
.ava-system { background: #94a3b8; }
.ava-translator { background: #0f766e; } .ava-translation_proofreader { background: #7c3aed; }
/* Write-relay specialists — each a distinct hue so the hand-offs read at a glance. */
.ava-researcher { background: #0891b2; } .ava-planner { background: #2563eb; }
.ava-architect { background: #7c3aed; } .ava-scribe { background: #0d9488; }
.ava-editor { background: #db2777; } .ava-stylist { background: #d97706; }
.log-ava.log-user-avatar { position: relative; width: 34px; height: 34px; overflow: hidden;
  border: 1px solid rgba(10,78,162,.24); border-radius: 10px; background: linear-gradient(145deg,#fff 8%,#e8f0fa 100%);
  box-shadow: 0 3px 10px rgba(10,78,162,.16), inset 0 1px 0 rgba(255,255,255,.9); }
.log-user-avatar .account-avatar { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%) scale(.68); transform-origin: center; }
.log-user-avatar::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(135deg,rgba(255,255,255,.46),transparent 42%); }
.log-body { flex: 1; min-width: 0; }
.log-meta { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--text-faint); margin-bottom: 3px; }
.log-view { margin-left: auto; background: transparent; border: none; color: var(--brand); cursor: pointer;
  font-size: 11.5px; font-weight: 600; padding: 2px 5px; border-radius: 5px; white-space: nowrap; }
.log-view:hover { background: var(--surface-2); text-decoration: underline; }
.log-content { font-size: 13px; color: var(--text-soft); white-space: pre-wrap; cursor: pointer;
  max-height: 110px; overflow: hidden; position: relative; }
.log-content.expanded { max-height: none; }
.log-content-audit { max-height: none; overflow: visible; cursor: default; white-space: normal; }
.ctx-detail-btn { cursor: pointer; font: inherit; }
.ctx-detail-btn:hover { border-color: var(--brand); background: #eef4fc; }
.research-parity { margin: 16px 0; }
.research-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; margin: 14px 0 8px; }
.research-stats > div { border: 1px solid var(--border); background: var(--surface-2); border-radius: var(--radius-sm); padding: 12px; }
.research-stats strong { display: block; font-size: 20px; color: var(--brand); }
.research-stats span { display: block; font-size: 11.5px; color: var(--text-faint); margin-top: 2px; }
.research-settings { padding: 8px 10px; border-radius: 7px; background: var(--surface-2); }
.research-section { margin-top: 24px; }
.research-section h3 { font-size: 15px; margin-bottom: 9px; }
.research-queries { list-style: none; padding: 0; margin: 0; display: grid; gap: 7px; }
.research-queries li { display: flex; gap: 9px; align-items: flex-start; font-size: 13px; }
.research-round { border-left: 3px solid #bfd7f1; padding: 7px 10px; margin: 8px 0; background: var(--surface-2); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.research-round .research-queries { margin-top: 8px; }
.research-query-num { width: 22px; height: 22px; display: inline-grid; place-items: center; flex: none; border-radius: 50%; background: #e8f1fb; color: var(--brand); font-weight: 700; font-size: 11px; }
.research-table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.research-table-wrap .tbl th, .research-table-wrap .tbl td { padding: 9px 10px; }
.research-pages td:first-child { min-width: 280px; max-width: 480px; }
.research-url { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 440px; }
.research-passage { border: 1px solid var(--border); border-radius: var(--radius-sm); margin: 7px 0; background: var(--surface-2); }
.research-passage summary { cursor: pointer; padding: 10px 12px; font-size: 13px; }
.research-passage-text { border-top: 1px solid var(--border); background: var(--surface); padding: 12px; font-size: 13px; line-height: 1.6; max-height: 260px; overflow-y: auto; }
.research-passage > a { display: inline-block; padding: 8px 12px 10px; }

/* file list */
.file-item { display: flex; align-items: center; gap: 10px; padding: 9px 11px;
  border: 1px solid var(--border); border-radius: var(--radius-sm); margin-bottom: 8px; background: var(--surface-2); }
.file-item .fi-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.dropzone {
  border: 2px dashed var(--border-strong); border-radius: var(--radius); padding: 22px;
  text-align: center; color: var(--text-soft); cursor: pointer; background: var(--surface-2);
  transition: border-color .15s, background .15s;
}
.dropzone:hover, .dropzone.drag { border-color: var(--brand); background: #eef4fc; color: var(--brand); }

/* tables (.tbl and legacy .table share one premium style) */
table.tbl, table.table { width: 100%; border-collapse: collapse; }
.tbl th, table.table th { text-align: left; font-size: 11.5px; color: var(--text-faint); text-transform: uppercase;
  letter-spacing: .05em; font-weight: 700; padding: 10px 12px; border-bottom: 1px solid var(--border); }
.tbl td, table.table td { padding: 12px; border-bottom: 1px solid var(--border); font-size: 13.5px; vertical-align: middle; }
.tbl tr:last-child td, table.table tr:last-child td { border-bottom: none; }
.tbl tbody tr, table.table tbody tr { transition: background .12s ease; }
.tbl tbody tr:hover, table.table tbody tr:hover { background: var(--surface-2); }

/* Keep long, unspaced filenames from widening the Knowledge Base table. */
#kb-list { max-width: 100%; overflow-x: auto; }
#kb-list .tbl td:first-child { overflow-wrap: anywhere; word-break: break-word; }

/* empty state */
.empty {
  text-align: center; padding: 60px 24px; color: var(--text-soft);
  border: 1px dashed var(--border-strong); border-radius: var(--radius); background: var(--surface);
}
.empty .big { font-size: 40px; margin-bottom: 10px; }

/* ---------- Modal ---------- */
.modal-root { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 20px; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(13,20,38,.5); backdrop-filter: blur(3px); animation: fadeIn .15s ease; }
.modal {
  position: relative; background: var(--surface); border-radius: var(--radius-lg);
  width: min(640px, calc(100vw - 32px)); max-height: calc(100vh - 48px); overflow-y: auto;
  box-shadow: var(--shadow-lg); padding: 28px 30px; z-index: 1;
  border: 1px solid rgba(255,255,255,.6);
  /* UI.modal sets --modal-dx/dy to the direction the card was opened from, so
     a card opened from the constellation grows out of the node that was
     clicked rather than arriving from nowhere. Unset, it rises from below. */
  --modal-dx: 0px; --modal-dy: 10px;
  animation: modalIn .26s cubic-bezier(.16,1,.3,1);
}
@keyframes modalIn {
  from { transform: translate3d(var(--modal-dx), var(--modal-dy), 0) scale(.955); opacity: 0; }
  to { transform: none; opacity: 1; }
}
/* Leaving is the entrance, faster and in reverse. The durations here are what
   the teardown timer in UI.closeModal is matched to — change one, change both. */
.modal-closing { pointer-events: none; }
.modal-closing .modal { animation: modalOut .14s ease-in forwards; }
.modal-closing .modal-backdrop { animation: fadeOut .14s ease-in forwards; }
@keyframes modalOut {
  to { transform: translate3d(calc(var(--modal-dx) * .4), calc(var(--modal-dy) * .4 + 6px), 0) scale(.975); opacity: 0; }
}
@keyframes fadeOut { to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .modal, .modal-closing .modal, .modal-closing .modal-backdrop, .modal-backdrop { animation: none; }
}
.modal h2 { font-size: 19px; font-weight: 750; margin-bottom: 4px; }
.modal > p:first-of-type, .modal .muted.small { margin-top: 0; }
.modal-foot { display: flex; justify-content: flex-end; align-items: center; gap: 10px; margin-top: 24px;
  padding-top: 18px; border-top: 1px solid var(--border); }

/* workflow picker */
.wf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; margin-top: 4px; }
.wf-opt { border: 1.5px solid var(--border); border-radius: var(--radius-sm); padding: 13px 14px; cursor: pointer; }
.wf-opt:hover { border-color: var(--border-strong); }
.wf-opt.sel { border-color: var(--brand); background: #f3f8fe; box-shadow: 0 0 0 3px rgba(10,78,162,.1); }
.wf-opt strong { display: block; font-size: 13.5px; margin-bottom: 3px; }
.wf-opt span { font-size: 12px; color: var(--text-soft); }

/* ---------- Toast ---------- */
.toast-root { position: fixed; bottom: 20px; right: 20px; z-index: 200; display: flex; flex-direction: column; gap: 10px; }
.toast {
  background: #11203b; color: #fff; padding: 12px 16px; border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0,0,0,.25); font-size: 13.5px; max-width: 360px;
  animation: slideIn .2s ease; display: flex; gap: 10px; align-items: flex-start;
}
.toast.ok { background: #0d3a26; } .toast.err { background: #4a1418; } .toast.warn { background: #4a3608; }
@keyframes slideIn { from { transform: translateX(20px); opacity: 0; } to { transform: none; opacity: 1; } }

/* spinner */
.spinner { width: 15px; height: 15px; border: 2px solid rgba(255,255,255,.4); border-top-color: #fff;
  border-radius: 50%; animation: spin .7s linear infinite; display: inline-block; }
.spinner-dark { border-color: rgba(10,78,162,.25); border-top-color: var(--brand); }
@keyframes spin { to { transform: rotate(360deg); } }

.muted { color: var(--text-soft); }
.small { font-size: 12.5px; }
.mt { margin-top: 14px; } .mt-lg { margin-top: 22px; } .mb { margin-bottom: 14px; }
.flex { display: flex; gap: 10px; align-items: center; }
.between { justify-content: space-between; }
.wrap { flex-wrap: wrap; }
.divider { height: 1px; background: var(--border); margin: 18px 0; }
code.kbd { background: var(--surface-2); border: 1px solid var(--border); border-radius: 5px; padding: 1px 6px; font-family: var(--mono); font-size: 12px; }
.req { color: var(--danger); font-weight: 700; margin-left: 2px; }

/* ---------- Login screen ---------- */
.login-screen {
  position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; padding: 24px;
  background:
    radial-gradient(1100px 560px at 12% 8%, #15355f 0%, transparent 55%),
    radial-gradient(900px 520px at 92% 96%, #0a5366 0%, transparent 52%),
    linear-gradient(160deg, #0c1830 0%, #0a1426 100%);
}
.login-shell {
  display: grid; grid-template-columns: 1.05fr .95fr; width: min(900px, 100%);
  background: var(--surface); border-radius: 20px; overflow: hidden;
  box-shadow: 0 30px 90px rgba(0,0,0,.5); animation: slideIn .25s ease;
}
.login-shell-single { grid-template-columns: 1fr; width: min(460px, 100%); }
.login-hero {
  position: relative; overflow: hidden; padding: 44px 40px; display: flex; flex-direction: column; justify-content: center;
  color: #eaf1ff; background: linear-gradient(155deg, var(--brand) 0%, #073a78 55%, #0a2a4d 100%);
}
/* decorative orbit rings */
.login-hero::before, .login-hero::after { content: ""; position: absolute; border-radius: 50%; border: 1px solid; }
.login-hero::before { width: 380px; height: 380px; right: -150px; top: -130px; border-color: rgba(255,255,255,.12); }
.login-hero::after { width: 240px; height: 240px; right: -70px; bottom: -110px; border-color: rgba(0,179,164,.3); }
.login-hero-content { position: relative; z-index: 1; }
.login-hero-mark { margin-bottom: 16px; }
.login-hero h2 { color: #fff; font-size: 25px; margin-bottom: 10px; letter-spacing: .2px; }
.login-tagline { color: #c6d6f0; font-size: 14px; line-height: 1.65; margin: 0 0 22px; max-width: 34ch; }
.login-points { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.login-points li { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; color: #dbe6f7; line-height: 1.45; }
.login-points li span { color: var(--accent); font-weight: 700; flex-shrink: 0; }

.login-card { padding: 48px 46px; display: flex; flex-direction: column; justify-content: center; }
/* The brand already appears in the hero panel, so hide it in the form on desktop;
   it reappears only when the hero is hidden on narrow screens (see media query). */
.login-brand { display: none; align-items: center; gap: 10px; margin-bottom: 22px; }
.login-brand.login-brand-always { display: flex; }
.login-brand strong { font-size: 18px; }
.login-title { font-size: 24px; margin-bottom: 5px; }
.login-sub { margin: 0 0 18px; }
.login-card .field { margin-bottom: 18px; }
.login-card label { margin-bottom: 7px; font-size: 12.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-soft); }
.login-card input { width: 100%; padding: 12px 14px; font-size: 14.5px; border-radius: 10px; background: var(--surface-2); }
.login-card input:focus { background: var(--surface); border-color: var(--brand); box-shadow: 0 0 0 4px rgba(10,78,162,.12); }
.login-err { color: var(--danger); font-size: 13px; min-height: 18px; margin: 0 0 8px; }
.login-help { display: flex; justify-content: flex-end; margin: -8px 0 12px; }
.login-link {
  appearance: none; border: 0; padding: 0; background: transparent; color: var(--brand);
  font: inherit; font-size: 13px; font-weight: 650; cursor: pointer;
}
.login-link:hover { color: var(--accent-dark); text-decoration: underline; }
.login-back { align-self: center; margin-top: 16px; }
.login-status { min-height: 20px; margin: 0 0 10px; color: var(--danger); font-size: 13px; line-height: 1.45; }
.login-status.success {
  color: var(--ok); background: var(--ok-bg); border: 1px solid var(--border);
  border-radius: 9px; padding: 10px 12px; margin-bottom: 14px;
}
.login-card .btn-block { padding: 12px 15px; font-size: 14.5px; margin-top: 4px; }

@media (max-width: 720px) {
  .login-shell { grid-template-columns: 1fr; width: min(410px, 100%); }
  .login-hero { display: none; }
  .login-card { padding: 36px 32px; }
  .login-brand { display: flex; }
}

/* ---------- Pagination ---------- */
.pager { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 14px; }
.pager .muted { font-size: 12.5px; }

/* ---------- Presence / read-only banners ---------- */
.notice {
  display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: var(--radius-sm);
  font-size: 13px; margin-bottom: 14px; border: 1px solid var(--border);
}
.notice-info { background: #eef4fc; border-color: #d4e5f8; color: var(--brand); }
.notice-warn { background: var(--warn-bg); border-color: #f3e2bf; color: var(--warn); }
.notice-danger { background: var(--danger-bg); border-color: #f1c7cb; color: var(--danger); }
.presence-avatars { display: inline-flex; gap: 4px; }
.presence-dot {
  width: 22px; height: 22px; border-radius: 50%; background: var(--accent-dark); color: #fff;
  display: inline-grid; place-items: center; font-size: 11px; font-weight: 700;
}

/* ---------- Context-used chips (proves KB/memory were used) ---------- */
.ctx-used { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 10px; }
.ctx-chip {
  display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600;
  padding: 3px 9px; border-radius: 99px; background: var(--surface-2);
  border: 1px solid var(--border); color: var(--text-soft);
}
.ctx-chip.on { background: #e3f7f4; color: var(--accent-dark); border-color: #c4ece6; }
.ctx-chip.off { opacity: .65; }

/* read-only editor */
.readonly-lock input, .readonly-lock textarea, .readonly-lock select { background: var(--surface-2); }

/* ---------- Filter bar + project list view ---------- */
/* A per-organisation feature switch, on the Organisations card. Given its own
   line and a sentence of consequence rather than a bare label: turning a whole
   section of the product off deserves to say what that means. */
.org-feature {
  display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px;
  border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2);
  font-size: 13px; line-height: 1.5; margin-bottom: 14px; cursor: pointer;
}
.org-feature input { margin-top: 2px; flex: none; }

/* The project calendar reuses the editorial calendar's grid — .cal-grid,
   .cal-cell, .cal-chip — and adds only what it needs: a colour per kind of
   date, and a legend that is a control rather than a key. Switching a kind off
   is the only useful way to read a busy month, so the legend does it. */
.pm-cal-month { min-width: 140px; text-align: center; font-size: 14px; }
.pm-cal-legend { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px;
  padding-top: 12px; border-top: 1px solid var(--border); }
.pm-cal-key {
  display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px;
  border: 1px solid var(--border); border-radius: 999px; background: var(--surface);
  font: inherit; font-size: 12.5px; color: var(--text); cursor: pointer;
}
.pm-cal-key:hover:not(:disabled) { border-color: var(--brand); }
.pm-cal-key span { color: var(--text-faint); font-variant-numeric: tabular-nums; }
/* Switched off reads as switched off — faded, struck through, and still legible
   so it can be switched back on. */
.pm-cal-key.is-off { opacity: .55; }
.pm-cal-key.is-off { text-decoration: line-through; }
.pm-cal-key:disabled { opacity: .4; cursor: default; }
.pm-cal-swatch { width: 11px; height: 11px; border-radius: 3px; flex: none; }
.pm-cal-brand { background: var(--brand); }
.pm-cal-accent { background: var(--accent); }
.pm-cal-violet { background: #7c5cff; }
.pm-cal-warn { background: #d99013; }
.pm-cal-ok { background: var(--ok); }
.cal-chip.pm-cal-brand { background: #e8f0fb; border-color: var(--brand); color: var(--brand-dark, var(--brand)); }
.cal-chip.pm-cal-accent { background: color-mix(in srgb, var(--accent) 14%, #fff); border-color: var(--accent); color: #05655c; }
.cal-chip.pm-cal-violet { background: #efeaff; border-color: #7c5cff; color: #4a30b0; }
.cal-chip.pm-cal-warn { background: var(--warn-bg); border-color: #e6b660; color: var(--warn); }
.cal-chip.pm-cal-ok { background: var(--ok-bg); border-color: #7bd0a2; color: var(--ok); }

/* Delivery: the project room reuses the writing room's own chat styles —
   .vibe-chat, .vibe-thread, .vibe-message, .vibe-composer — so an editor who
   knows one knows the other. Only the differences live here: the room sits
   inside a tabbed page rather than filling the viewport, and it has one agent
   instead of a cast, so the agent avatar needs a colour of its own. */
/* The room fills what the page has left and scrolls inside itself. A chat that
   grows the page pushes its own composer off the bottom, so the thing you came
   to type into is the thing you have to scroll to reach. The tab content is a
   column: the room takes the remainder, and .vibe-thread is the only part that
   scrolls — exactly as the writing room does it. */
/* The same mechanism the writing room and the Assistant already use, rather
   than a viewport calculation that guesses at the chrome above it: the scroll
   container stops scrolling, the view fills it, and the page becomes a column
   whose last child takes the remainder. The generous bottom padding a reading
   page wants is exactly the height a room does not have to spare. */
.content:has(.pm-project-page.is-room) { overflow: hidden; }
#view:has(.pm-project-page.is-room) { height: 100%; min-height: 0; }
.pm-project-page.is-room {
  height: 100%; min-height: 0; padding-bottom: 20px;
  display: flex; flex-direction: column; overflow: hidden;
}
.pm-project-page.is-room .page-head { margin-bottom: 14px; }
.pm-project-page.is-room #pj-tabcontent { flex: 1; min-height: 0; display: flex; margin-top: 14px; }
.pm-room { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.pm-room .vibe-thread { padding: 18px 18px 10px; }
/* The assistant's colour. Solid, because .vibe-summon-chip and .vibe-avatar
   both write in white on top of it — a tinted background made the composer chip
   white on white, which is a chip nobody can read. */
.ava-assistant { background: var(--accent); color: #fff; }
.pm-room .vibe-notice { margin: 0 14px 14px; }
/* The room hides its chip slot by id; this one has its own. */
.vibe-prompt-shell:not(.has-agent) .pm-summon-slot { display: none; }
/* The head carries two things the writing room does not: what the room has cost
   so far, and a way to take the whole thing away for troubleshooting. */
.pm-room-tools { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.pm-room .pm-working { margin-top: 10px; }
/* A tab that exists before its content does. It says what will be here rather
   than showing an empty panel, which a reader takes for "nothing to report". */
.pm-placeholder { max-width: 62ch; }
.pm-placeholder-lead { margin: 2px 0 10px; font-size: 14px; font-weight: 600; color: var(--text); }
.pm-placeholder-note { display: inline-flex; align-items: center; gap: 7px; margin: 14px 0 0;
  padding: 6px 11px; border: 1px dashed var(--border-strong); border-radius: 999px;
  color: var(--text-faint); font-size: 12px; }
/* A room with nothing priced states the fact rather than showing a total. */
.pm-room-cost.is-unpriced { color: var(--text-faint); }
/* Amending what was said: an author's own line, edited where it sits, and the
   administrator's red for the two actions that take something away. */
.pm-msg-edit { margin: 4px 0 6px; display: grid; gap: 6px; }
.pm-msg-edit textarea { width: 100%; min-height: 62px; padding: 8px 10px; resize: vertical;
  border: 1px solid var(--border-strong); border-radius: 8px; background: var(--surface);
  color: var(--text); font: inherit; }
.vibe-link.pm-linkish-danger { color: var(--danger); }
/* A button like the two beside it, wearing the colour of what it does. */
.pm-room-danger { color: var(--danger); }
.pm-room-danger:hover { border-color: var(--danger); background: var(--danger-bg);
  color: var(--danger); }
/* The # list reuses the mention list's option layout, so its icon has to fill
   the same 30px avatar box the writing room sizes every option's <span> to. */
.vibe-agent-options > button > span.pm-ref-icon { display: grid; place-items: center;
  border-radius: 8px; background: var(--surface-3); font-size: 15px; }
/* The room's @ / # picker is a compact command surface: results scroll while
   the purpose and keyboard help stay put, with a strong active row that works
   equally well for pointer and keyboard users. */
.pm-room .vibe-agent-menu {
  display: flex; flex-direction: column; max-height: min(410px, 58vh); padding: 0;
  overflow: hidden; border-color: color-mix(in srgb, var(--border-strong) 82%, var(--brand));
  box-shadow: 0 18px 46px rgba(16,24,40,.18), 0 3px 10px rgba(16,24,40,.08);
  animation: pm-picker-in .12s ease-out;
}
.pm-room .vibe-agent-menu.hidden { display: none; }
.pm-room .vibe-agent-menu-head {
  position: static; flex: 0 0 auto; min-height: 48px; padding: 9px 10px 9px 13px;
  background: linear-gradient(180deg, #fff, color-mix(in srgb, var(--surface-2) 72%, #fff));
}
.pm-room .vibe-agent-menu-head > div { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.pm-room .vibe-agent-menu-head strong { color: var(--text); font-size: 11.5px; letter-spacing: .055em; }
.pm-room .vibe-menu-count { color: var(--text-faint); font-size: 10.5px; white-space: nowrap; }
.pm-room .vibe-agent-menu-head button { transition: background-color .12s, color .12s, transform .12s; }
.pm-room .vibe-agent-menu-head button:hover { background: var(--danger-bg); color: var(--danger); }
.pm-room .vibe-agent-menu-head button:active { transform: scale(.94); }
.pm-room .vibe-agent-options { min-height: 0; padding: 6px; overflow-y: auto; overscroll-behavior: contain; }
.pm-room .vibe-menu-group { padding: 8px 9px 5px; }
.pm-room .vibe-agent-options > button {
  position: relative; align-items: center; min-height: 50px; padding: 8px 10px;
  border: 1px solid transparent; border-radius: 10px;
  transition: border-color .12s, background-color .12s, box-shadow .12s;
}
.pm-room .vibe-agent-options > button > div { flex: 1 1 auto; min-width: 0; }
.pm-room .vibe-agent-options > button strong,
.pm-room .vibe-agent-options > button small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pm-room .vibe-agent-options > button:hover,
.pm-room .vibe-agent-options > button:focus-visible,
.pm-room .vibe-agent-options > button.is-active {
  border-color: color-mix(in srgb, var(--brand) 22%, var(--border));
  background: linear-gradient(90deg, var(--brand-tint), color-mix(in srgb, var(--brand-tint) 48%, #fff));
  box-shadow: inset 3px 0 0 color-mix(in srgb, var(--brand) 78%, #fff);
}
.pm-room .vibe-agent-options > button:focus-visible { outline: 0; }
.pm-room .vibe-agent-empty {
  display: flex; align-items: center; justify-content: center; gap: 11px; min-height: 112px;
  padding: 20px; text-align: left;
}
.pm-room .vibe-agent-empty > span {
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px;
  background: var(--surface-3); color: var(--brand); font-size: 20px;
}
.pm-room .vibe-agent-empty strong { color: var(--text-soft); font-size: 12px; }
.pm-room .vibe-agent-empty small { max-width: 52ch; line-height: 1.45; white-space: normal; }
.pm-room .vibe-menu-hints {
  flex: 0 0 auto; display: flex; align-items: center; gap: 14px; padding: 8px 12px;
  border-top: 1px solid var(--border); background: var(--surface-2); color: var(--text-faint);
  font-size: 9.5px;
}
.pm-room .vibe-menu-hints span { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.pm-room .vibe-menu-hints kbd {
  min-width: 18px; padding: 1px 4px; border: 1px solid var(--border-strong);
  border-bottom-width: 2px; border-radius: 4px; background: var(--surface); color: var(--text-soft);
  font: inherit; font-weight: 700; text-align: center;
}
@keyframes pm-picker-in {
  from { opacity: 0; transform: translateY(4px) scale(.995); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@media (max-width: 620px) {
  .pm-room .vibe-menu-hints { gap: 8px; justify-content: space-between; }
  .pm-room .vibe-menu-hints span { font-size: 0; }
  .pm-room .vibe-menu-hints kbd { font-size: 9.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .pm-room .vibe-agent-menu { animation: none; }
}
.pm-message-refs { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.pm-message-refs a, .pm-message-refs span { display: inline-flex; align-items: center;
  max-width: 100%; padding: 3px 8px; border: 1px solid var(--border);
  border-radius: 999px; background: var(--surface-2); color: var(--text-soft);
  font-size: 10.5px; line-height: 1.35; text-decoration: none; overflow: hidden;
  white-space: nowrap; text-overflow: ellipsis; }
.pm-message-refs a:hover { border-color: var(--brand); color: var(--brand); }
/* A row whose two halves are different heights — the assignee field carries an
   inline "add a collaborator" form under its select — cannot bottom-align, or
   the shorter field's label drops below the taller one's. */
.field-row.pm-row-top { align-items: start; }
.pm-workspace-toggle { display: flex; align-items: center; gap: 9px; margin-bottom: 14px;
  font-size: 13px; font-weight: 600; }
.pm-na { margin: 7px 0 0; line-height: 1.4; }
.pm-live-answer { animation: none; }
.pm-live-answer .chat-reasoning { background: var(--surface-2); }
.pm-live-answer .vibe-message-body.hidden, .pm-live-answer .chat-reasoning.hidden {
  display: none; }
/* A calendar chip that stands for a task says so on hover, because it opens it. */
.cal-chip.pm-cal-open:hover { filter: brightness(.97); text-decoration: underline; }
.pm-room-cost {
  display: inline-flex; align-items: baseline; gap: 5px; padding: 3px 9px;
  border: 1px solid var(--border); border-radius: 999px; background: var(--surface-2);
  font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.pm-room-cost small { color: var(--text-faint); font-size: 10.5px; }
.pm-room .vibe-message.is-pinned { box-shadow: inset 3px 0 0 var(--brand); padding-left: 10px; }
/* The reasoning channel, while it is arriving. Collapsed by default after the
   answer lands; open while it streams, because that is the only sign of life a
   long think gives. */
.pm-reasoning { margin: 8px 0 0; font-size: 12px; color: var(--text-soft); }
.pm-reasoning summary { cursor: pointer; color: var(--text-faint); font-size: 11px; }
.pm-reasoning > div {
  margin-top: 6px; max-height: 160px; overflow-y: auto; padding: 8px 10px;
  border-left: 2px solid var(--border-strong); background: var(--surface-2);
  white-space: pre-wrap; line-height: 1.5;
}

/* Delivery: the per-project source picker. Grouped by connector, because that
   is how a person thinks about it — "the Alfresco repository, these two sites" —
   and the document count is what turns a list of names into a choice. */
.pm-source-summary {
  font-size: 13.5px; color: var(--text-soft); padding: 10px 0 4px;
  border-bottom: 1px solid var(--border); margin-bottom: 12px;
}
.pm-source-group { margin-bottom: 18px; }
.pm-source-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.pm-source-places { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 6px; }
.pm-source-place {
  display: flex; align-items: center; gap: 8px; padding: 8px 10px;
  border: 1px solid var(--border); border-radius: 8px; cursor: pointer;
  font-size: 13.5px; background: var(--surface);
}
.pm-source-place:hover { border-color: var(--accent); }
.pm-source-place input:disabled { cursor: default; }
.pm-source-label { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.pm-source-count { color: var(--text-faint); font-size: 12px; white-space: nowrap; }

/* Portfolio: forecast against actual as paired columns. Paired rather than
   stacked because the question is which of the two is larger, and a stack hides
   precisely that. */
.pm-qchart { display: flex; gap: 10px; align-items: flex-end; height: 132px; padding: 8px 2px 0; overflow-x: auto; }
.pm-qcol { flex: 1 1 0; min-width: 46px; display: flex; flex-direction: column; align-items: center; height: 100%; }
.pm-qcol-bars { flex: 1; display: flex; gap: 4px; align-items: flex-end; width: 100%; justify-content: center; }
.pm-qcol-bars i { width: 15px; min-height: 2px; border-radius: 3px 3px 0 0; display: block; }
.pm-qcol span { font-size: 10.5px; color: var(--text-faint); margin-top: 6px; white-space: nowrap; }
.pm-qcol.is-past .pm-qcol-bars i { opacity: .78; }
.pm-qlegend { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-top: 10px; font-size: 12px; color: var(--text-soft); }
.pm-qlegend strong { margin-left: auto; font-variant-numeric: tabular-nums; }
.pm-key-plan { background: var(--border-strong, #c8d2de); }
.pm-pipeline-foot { display: flex; gap: 16px; align-items: center; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border); font-size: 12.5px; color: var(--text-soft); }
.pm-pipeline-foot strong:last-child { margin-left: auto; color: var(--text); }

/* Clients by value: contracted behind, invoiced in front, so the gap between
   them is the thing you see. */
.pm-client-bars { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.pm-client-row { display: grid; grid-template-columns: minmax(110px, 1.1fr) minmax(90px, 2fr) auto; gap: 12px; align-items: center; }
.pm-client-name { font-size: 13px; overflow-wrap: anywhere; }
.pm-client-name small { display: block; color: var(--text-faint); font-size: 11px; }
.pm-client-bar { position: relative; height: 18px; background: var(--surface-3); border-radius: 5px; overflow: hidden; }
.pm-client-bar i { position: absolute; left: 0; top: 0; height: 100%; display: block; }
.pm-cb-contracted { background: var(--border-strong, #c8d2de); }
.pm-cb-invoiced { background: var(--accent); height: 100% !important; }
.pm-client-value { font-size: 12.5px; font-variant-numeric: tabular-nums; color: var(--text-soft); white-space: nowrap; }

.pm-fill-billed { background: var(--brand); }
.pm-fill-hot { background: var(--danger); }

/* Delivery: a name that opens something, inside a table or a list row. Reads as
   text until you want it, which is what keeps a dense table calm. */
.pm-linkish {
  border: 0; background: none; padding: 0; font: inherit; color: inherit;
  cursor: pointer; text-align: left; border-bottom: 1px solid transparent;
}
.pm-linkish:hover { color: var(--brand); border-bottom-color: currentColor; }
/* One underline, not two: the border is the underline, so the anchor's own
   text-decoration has to stay off in both states. */
.pm-crumb, .pm-crumb:hover, .pm-crumb:focus {
  color: inherit; text-decoration: none; border-bottom: 1px solid var(--border-strong);
}
.pm-crumb:hover { color: var(--brand); border-bottom-color: currentColor; }

/* A task, read-only. A definition list because that is what it is: labels and
   their values, in the order somebody asks for them. */
.pm-view-badges { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 12px; }
.pm-view-desc { font-size: 14px; line-height: 1.6; margin-bottom: 12px; }
.pm-view { display: grid; gap: 0; margin: 16px 0 4px; }
.pm-view-row {
  display: grid; grid-template-columns: 160px 1fr; gap: 12px;
  padding: 9px 0; border-bottom: 1px solid var(--border);
}
.pm-view-row:last-child { border-bottom: 0; }
.pm-view dt { color: var(--text-faint); font-size: 12.5px; font-weight: 700; margin: 0; }
.pm-view dd { margin: 0; font-size: 13.5px; }
@media (max-width: 620px) { .pm-view-row { grid-template-columns: 1fr; gap: 2px; } }

/* The budget as one bar: paid, then billed-but-unpaid, then what is left. Three
   segments rather than three numbers, because the question is a proportion. */
.pm-budget-bar {
  display: flex; height: 12px; border-radius: 999px; overflow: hidden;
  background: var(--surface-3); margin-bottom: 10px;
}
.pm-budget-fill { height: 100%; }
.pm-budget-paid { background: var(--ok); }
.pm-budget-billed { background: var(--accent); }
.pm-budget-key { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; font-size: 12.5px; color: var(--text-soft); }
.pm-budget-key strong { margin-left: auto; color: var(--text); font-variant-numeric: tabular-nums; }
.pm-key { width: 10px; height: 10px; border-radius: 3px; display: inline-block; margin-right: 5px; }
.pm-key-paid { background: var(--ok); }
.pm-key-billed { background: var(--accent); }
.pm-key-rest { background: var(--surface-3); border: 1px solid var(--border); }

/* Forecast against actual, quarter by quarter, small enough to be a summary. */
.pm-quarter-strip { display: flex; gap: 10px; overflow-x: auto; padding: 6px 2px 2px; }
.pm-quarter-chip {
  flex: 0 0 auto; min-width: 84px; text-align: center; padding: 6px 8px;
  border: 1px solid var(--border); border-radius: 10px; background: var(--surface);
}
.pm-quarter-chip.is-past { background: var(--surface-2); }
.pm-quarter-bars { display: flex; gap: 4px; align-items: flex-end; justify-content: center; height: 38px; }
.pm-quarter-bars i { width: 12px; border-radius: 3px 3px 0 0; display: block; }
.pm-qb-plan { background: var(--border-strong, #c8d2de); }
.pm-qb-actual { background: var(--accent); }
.pm-quarter-chip span { display: block; font-size: 11px; color: var(--text-faint); margin-top: 5px; white-space: nowrap; }
.pm-quarter-chip em { display: block; font-size: 11px; font-style: normal; font-variant-numeric: tabular-nums; }

/* A form that appears where you realised you needed it. */
.pm-inline-form { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.pm-inline-form input { flex: 1 1 140px; min-width: 0; }

/* Delivery: the quarterly grid — a plan and a record on one line, because the
   only reason to look at either is to compare them. The paired bars carry that
   comparison at a glance; the columns carry the precision. */
.pm-quarters td { vertical-align: middle; }
.pm-q-input { width: 120px; text-align: right; font-variant-numeric: tabular-nums; }
.pm-q-actual, .pm-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
th.pm-num { text-align: right; }
/* A quarter that has already happened is history: readable, but not competing
   for attention with the ones still to plan. */
.pm-q-past { opacity: .82; }
.pm-qbars { display: flex; flex-direction: column; gap: 3px; min-width: 110px; }
.pm-qbar { height: 7px; border-radius: 999px; min-width: 2px; }
.pm-qbar-plan { background: var(--border-strong, #c8d2de); }
.pm-qbar-actual { background: var(--accent); }
.pm-over { color: var(--ok); font-variant-numeric: tabular-nums; }
.pm-under { color: var(--danger); font-variant-numeric: tabular-nums; }

/* The portfolio's attention lists: four short answers to "what do I do now",
   side by side rather than stacked, so none of them is the one nobody scrolls to. */
.pm-attention { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; }
.pm-attention .tbl td, .pm-attention .tbl th { padding: 8px 10px; font-size: 13px; }
@media (max-width: 720px) { .pm-q-input { width: 92px; } .pm-qbars { display: none; } }

/* Delivery: a project's headline numbers, as tiles.

   Read by comparison rather than in sequence — how much is done against how
   much is late against what is left in the budget — so they sit side by side
   at one size, and the one that needs attention carries the colour rather than
   a larger number. */
.pm-stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px; margin-bottom: 18px;
}
.pm-stat {
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
  padding: 14px 16px;
}
.pm-stat-label {
  font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-faint); font-weight: 700;
}
.pm-stat-value {
  font-size: 24px; font-weight: 700; line-height: 1.15; margin-top: 6px;
  font-variant-numeric: tabular-nums; color: var(--text);
}
.pm-stat-hint { font-size: 12px; color: var(--text-faint); margin-top: 4px; }
.pm-stat-danger { border-color: var(--danger); }
.pm-stat-danger .pm-stat-value { color: var(--danger); }

/* Progress: the bar carries the comparison, the number carries the precision.
   Neither alone is enough — a bar cannot say 62% and a digit cannot be scanned
   down a column of twenty projects. */
.pm-progress { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.pm-progress-track {
  flex: 1; height: 6px; border-radius: 999px; background: var(--surface-2);
  overflow: hidden; min-width: 80px;
}
.pm-progress-fill { height: 100%; background: var(--accent); border-radius: 999px; }
.pm-progress-label {
  font-size: 12px; color: var(--text-faint); font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.pm-chips { display: flex; flex-wrap: wrap; gap: 6px; }

/* Delivery: one contact inside the client form. Two lines rather than one,
   because five inputs on a single row collapse into unreadable slivers on a
   laptop, and the separator is what makes the boundary between two people
   obvious in a list of them. */
.pm-contact { padding-top: 12px; }
.pm-contact + .pm-contact { border-top: 1px solid var(--border); }
.pm-contact .field-row { margin-bottom: 8px; }
.pm-contact-foot { grid-template-columns: 1fr 1fr auto; align-items: end; }
@media (max-width: 720px) { .pm-contact-foot { grid-template-columns: 1fr !important; } }

.filter-bar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 16px; }
.filter-bar .filter-search { flex: 1; min-width: 220px; }
.filter-bar select { width: auto; min-width: 150px; }
.filter-count { color: var(--text-faint); font-size: 12.5px; margin-left: auto; }

.proj-list { display: flex; flex-direction: column; gap: 10px; }
.proj-row, .list-row {
  display: flex; align-items: center; gap: 14px; padding: 15px 18px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-sm); transition: box-shadow .16s ease, border-color .16s ease, transform .1s ease;
  position: relative;
}
/* The row is not the button any more — the Open button beside it is, as in
   every other list in the app. What is left is the hover lift, which still
   says "this is one thing" without pretending to be clickable. */
.proj-row .pr-side { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.proj-row::before { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px;
  border-radius: 0 3px 3px 0; background: transparent; transition: background .16s ease; }
.proj-row:hover { box-shadow: var(--shadow); border-color: var(--border-strong); }
.proj-row:hover::before { background: var(--brand); }
.pr-main { flex: 1; min-width: 0; }
.pr-title { font-weight: 600; font-size: 14.5px; margin-bottom: 5px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pr-badges { display: flex; gap: 7px; flex-wrap: wrap; align-items: center; }
.writing-mode-badge { font-weight: 750; letter-spacing: .01em; }
.writing-mode-badge.mode-factory { color: #315f91; border-color: #c8dced; background: #eef5fb; }
.writing-mode-badge.mode-vibe { color: #7040a0; border-color: #ddcbed; background: #f7f0fc; }
.project-run-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; box-shadow: 0 0 0 0 rgba(158, 94, 14, .32);
  animation: project-run-pulse 1.8s ease-out infinite; }
.project-quality-badge { gap: 6px; color: #176d72; border-color: #c9e2e1; background: #edf8f7;
  font-variant-numeric: tabular-nums; }
.project-quality-badge > span { display: inline-grid; height: 17px; min-width: 21px; padding: 0 4px; place-items: center;
  border-radius: 6px; color: #fff; background: #176d72; font-size: 8px; font-weight: 850; letter-spacing: .05em; }
.project-quality-badge.is-passed { color: #217653; border-color: #c7e6d7; background: #eef8f3; }
.project-quality-badge.is-passed > span { background: #21875d; }
.project-quality-badge.is-failed { color: #a14d33; border-color: #ecd4c8; background: #fbf3ef; }
.project-quality-badge.is-failed > span { background: #b4693d; }
@keyframes project-run-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(158, 94, 14, .32); }
  50% { box-shadow: 0 0 0 4px rgba(158, 94, 14, 0); }
}
@media (prefers-reduced-motion: reduce) { .project-run-badge::before { animation: none; } }
.pr-date { color: var(--text-faint); font-size: 12px; white-space: nowrap; flex-shrink: 0; }

/* clickable knowledge-source links in the context chips */
.src-link { color: var(--brand); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.src-link:hover { color: var(--brand-dark); }

/* ---------- AI Assistant chat ---------- */
/* The chat page fills the viewport so the input sits at the bottom with no gap
   and no page scroll. Only the message log owns vertical scrolling. */
.content:has(.page-chat) { min-height: 0; overflow: hidden; }
.content:has(.page-chat) #view { height: 100%; min-height: 0; }
.page-chat { display: flex; flex-direction: column; height: 100%; max-height: 100%; overflow: hidden; padding: 28px 34px 22px; }
.page-chat .page-head { margin-bottom: 14px; }
.page-chat .chat-wrap { flex: 1; height: auto; min-height: 0; }

/* ---------- Saved chats (the history rail) ----------
   A permanent, per-person list of past conversations beside the thread, the
   way every chat client does it: the rail collapses to give the answer the
   full width, and becomes a drawer when there is no room for a column. */
.chat-shell { flex: 1; min-height: 0; display: grid; grid-template-columns: 268px minmax(0, 1fr);
  gap: 18px; align-items: stretch; transition: grid-template-columns .18s ease; }
.chat-shell.history-hidden { grid-template-columns: 0 minmax(0, 1fr); gap: 0; }
.chat-shell.history-hidden .chat-history { opacity: 0; pointer-events: none; transform: translateX(-8px); }
.chat-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }

/* The chat panel's own top bar: what this thread is, and the one control that
   starts another. "New chat" belongs here, at the top-left of the conversation
   it replaces, rather than in the list of old ones. */
.chat-topbar { display: flex; align-items: center; gap: 10px; padding: 9px 12px;
  border-bottom: 1px solid var(--border); background: var(--surface-2); }
.chat-topbar-name { flex: 1; min-width: 0; font-size: 13px; font-weight: 650; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-topbar-name.muted-name { color: var(--text-faint); font-weight: 500; font-style: italic; }
.chat-cost { flex-shrink: 0; padding: 3px 8px; border: 1px solid color-mix(in srgb,var(--ok) 35%,var(--border));
  border-radius: 999px; background: color-mix(in srgb,var(--ok) 7%,var(--surface));
  color: #2f7d60; font-size: 10.5px; font-weight: 750; font-variant-numeric: tabular-nums;
  white-space: nowrap; }
.chat-cost.is-warning { border-color: color-mix(in srgb,var(--warn) 38%,var(--border));
  background: color-mix(in srgb,var(--warn) 8%,var(--surface)); color: var(--warn); }
/* Which workspace is answering. Only appears when the account has more than
   one, so it reads as information rather than decoration. */
.chat-workspace { flex-shrink: 0; display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border: 1px solid var(--border-strong); border-radius: 999px;
  background: var(--surface); color: var(--text-soft); font-size: 11px; font-weight: 650;
  white-space: nowrap; max-width: 180px; overflow: hidden; text-overflow: ellipsis; }
.chat-workspace::before { content: "◈"; color: var(--brand); font-size: 9px; }

.chat-history { display: flex; flex-direction: column; min-height: 0; overflow: hidden;
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface);
  box-shadow: var(--shadow-sm); transition: opacity .16s ease, transform .18s ease; }
.chat-history-head { display: flex; align-items: center; gap: 8px; padding: 13px 12px 9px; }
.chat-history-heading { flex: 1; font-size: 11px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--text-faint); padding-left: 4px; }
.chat-history-collapse, .chat-history-show {
  width: 30px; height: 30px; flex-shrink: 0; display: grid; place-items: center; cursor: pointer;
  border: 1px solid transparent; border-radius: var(--radius-sm); background: none;
  color: var(--text-faint); font-size: 14px; line-height: 1;
  transition: background .14s ease, color .14s ease, border-color .14s ease; }
.chat-history-collapse:hover, .chat-history-show:hover {
  background: var(--surface-3); border-color: var(--border); color: var(--text); }
.chat-history-show { border-color: var(--border); background: var(--surface); }
/* The reopen control only exists while the rail is away. */
.chat-shell:not(.history-hidden) .chat-history-show { display: none; }

/* Search: one bordered field with the icon inside it, and a clear affordance
   that appears with the text. The icon is centred on the input itself — it used
   to be positioned against a padded wrapper, which left it sitting low. */
.chat-history-search { position: relative; display: flex; align-items: center; margin: 0 12px 12px; }
.chat-search-icon { position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
  display: flex; color: var(--text-faint); pointer-events: none; transition: color .14s ease; }
.chat-history-search input { width: 100%; height: 36px; padding: 0 32px; font-size: 12.5px;
  border: 1px solid transparent; border-radius: 999px; background: var(--surface-3);
  color: var(--text); box-shadow: none;
  transition: background .14s ease, border-color .14s ease, box-shadow .14s ease; }
.chat-history-search input:hover { background: var(--surface-2); border-color: var(--border); }
.chat-history-search input:focus {
  background: var(--surface); border-color: var(--brand); box-shadow: var(--shadow-focus); outline: none; }
.chat-history-search:focus-within .chat-search-icon { color: var(--brand); }
.chat-history-search input::placeholder { color: var(--text-faint); }
/* The native control duplicates our own clear button and cannot be styled. */
.chat-history-search input::-webkit-search-cancel-button,
.chat-history-search input::-webkit-search-decoration { appearance: none; display: none; }
.chat-search-clear { position: absolute; right: 7px; top: 50%; transform: translateY(-50%);
  width: 19px; height: 19px; display: grid; place-items: center; cursor: pointer;
  border: 0; border-radius: 50%; background: var(--border-strong); color: var(--surface);
  font-size: 9px; line-height: 1; padding: 0; transition: background .14s ease; }
.chat-search-clear:hover { background: var(--text-soft); }

.chat-history-list { flex: 1; min-height: 0; overflow-y: auto; padding: 0 8px 8px; }
.chat-history-loading, .chat-history-empty { padding: 22px 12px; color: var(--text-faint); font-size: 12.5px;
  display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.chat-history-empty strong { color: var(--text-soft); font-size: 13px; }
.chat-history-empty .btn { margin-top: 4px; }
/* Group labels stay put while their rows scroll under them. */
.chat-history-group { position: sticky; top: 0; z-index: 1; padding: 11px 8px 5px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-faint); background: linear-gradient(var(--surface) 72%, transparent); }
.chat-history-item { position: relative; display: flex; align-items: center; border-radius: var(--radius-sm);
  margin-bottom: 1px; transition: background .12s ease; }
.chat-history-item::before { content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 2px;
  border-radius: 2px; background: transparent; transition: background .12s ease; }
.chat-history-item:hover { background: var(--surface-2); }
.chat-history-item.active { background: var(--brand-tint); }
.chat-history-item.active::before { background: var(--brand); }
.chat-history-item.live::before { background: var(--accent); }
.chat-history-open { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px;
  padding: 9px 8px 9px 11px; border: 0; background: none; text-align: left; cursor: pointer;
  font: inherit; color: inherit; border-radius: var(--radius-sm); }
.chat-history-open:disabled { cursor: default; opacity: .5; }
.chat-history-title { font-size: 13px; font-weight: 600; color: var(--text); line-height: 1.35;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* The chat being written says so, in place of a message count that is about to
   change anyway. */
.chat-history-live { color: var(--accent-dark); font-weight: 650; }
.chat-history-live::before { content: "●"; margin-right: 4px; display: inline-block;
  animation: chat-pulse 1.4s ease-in-out infinite; }
/* A pinned row says so even when nothing is hovering it: its pin control stays
   visible and lit, and doubles as the way to unpin. */
.chat-history-item.pinned [data-pin-chat] { opacity: 1; color: var(--brand); }
.chat-history-item.pinned .chat-history-tools { opacity: 1; }
.chat-history-item.pinned .chat-history-tools [data-rename-chat],
.chat-history-item.pinned .chat-history-tools [data-delete-chat] { opacity: 0; transition: opacity .12s ease; }
.chat-history-item.pinned:hover .chat-history-tools [data-rename-chat],
.chat-history-item.pinned:focus-within .chat-history-tools [data-rename-chat],
.chat-history-item.pinned:hover .chat-history-tools [data-delete-chat],
.chat-history-item.pinned:focus-within .chat-history-tools [data-delete-chat] { opacity: 1; }
[data-pin-chat] { filter: grayscale(1); }
.chat-history-item.pinned [data-pin-chat] { filter: none; }
.chat-history-item.active .chat-history-title { color: var(--brand-dark); }
.chat-history-sub { font-size: 11.5px; color: var(--text-faint); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
/* Row actions stay out of the way until the row is the one being considered. */
.chat-history-tools { display: flex; gap: 1px; padding-right: 5px; opacity: 0; transition: opacity .12s ease; }
.chat-history-item:hover .chat-history-tools,
.chat-history-item:focus-within .chat-history-tools { opacity: 1; }
.chat-history-tools button { width: 24px; height: 24px; display: grid; place-items: center; cursor: pointer;
  border: 0; border-radius: var(--radius-xs); background: none; color: var(--text-faint); font-size: 11px; padding: 0; }
.chat-history-tools button:hover:not(:disabled) { background: var(--surface-3); color: var(--text); }
.chat-history-tools button.danger:hover:not(:disabled) { background: var(--danger-bg); color: var(--danger); }
.chat-history-tools button:disabled { opacity: .3; cursor: default; }
.chat-history-item.renaming { padding: 4px 6px; background: var(--surface-2); }
.chat-history-rename { width: 100%; font-size: 13px; padding: 5px 8px; }
.chat-history-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 9px 14px; border-top: 1px solid var(--border); background: var(--surface-2);
  font-size: 11.5px; color: var(--text-faint); }
.chat-history-clear { border: 0; background: none; padding: 0; cursor: pointer; font: inherit;
  color: var(--text-faint); text-decoration: underline; text-underline-offset: 2px; }
.chat-history-clear:hover:not(:disabled) { color: var(--danger); }
.chat-history-clear:disabled { opacity: .45; cursor: default; text-decoration: none; }
/* The save indicator: quiet by design — it only needs to be read when it says
   something went wrong. */
.chat-saved-state { font-size: 11.5px; color: var(--text-faint); }
.chat-saved-state.error { color: var(--danger); font-weight: 600; }
.chat-diagnostics-export { flex-shrink: 0; gap: 5px; }
.chat-history-scrim { display: none; }

/* Below the app's own nav breakpoint there is no room for a column, so the
   history becomes a drawer over the thread — the same shape the main nav takes. */
@media (max-width: 860px) {
  .chat-shell, .chat-shell.history-hidden { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .chat-history { position: fixed; z-index: 70; top: 0; left: 0; bottom: 0; width: min(320px, 86vw);
    border-radius: 0; border-top: 0; border-bottom: 0; border-left: 0;
    box-shadow: 10px 0 48px rgba(8, 14, 28, .32); }
  .chat-shell.history-hidden .chat-history { transform: translateX(-100%); }
  .chat-shell:not(.history-hidden) .chat-history-scrim { display: block; position: fixed; inset: 0;
    z-index: 65; background: rgba(8, 14, 28, .55); backdrop-filter: blur(2px); }
  .chat-shell:not(.history-hidden) .chat-history-show { display: grid; }
}
@media (max-width: 560px) {
  .chat-diagnostics-export-label { display: none; }
  .chat-diagnostics-export { min-width: 32px; padding-inline: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .chat-shell, .chat-history { transition: none; }
}
/* A pointer is what reveals the row actions; without one they must always show. */
@media (hover: none) {
  .chat-history-tools { opacity: 1; }
}

.chat-wrap { display: flex; flex-direction: column; height: calc(100vh - 200px); min-height: 320px;
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); overflow: hidden; box-shadow: var(--shadow-sm); }
.chat-log { flex: 1; min-height: 0; overflow-y: auto; padding: 18px 20px; display: flex; flex-direction: column; gap: 14px; }
/* The chat area inherits the app-wide scrollbar; it only insets its track so
   the thumb does not touch the rounded panel edges. */
.chat-log::-webkit-scrollbar-track { margin: 4px 0; }
.chat-empty { margin: auto; max-width: 460px; text-align: center; color: var(--text-soft); }
.chat-empty .big { font-size: 34px; margin-bottom: 8px; }
.chat-msg { display: flex; gap: 10px; max-width: 88%; }
.chat-msg.user { align-self: flex-end; flex-direction: row-reverse; }
/* Bubble and its actions stack, so the copy control sits under the message
   rather than beside the avatar. */
.chat-msg-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.chat-msg.user .chat-msg-body { align-items: flex-end; }
.chat-msg-actions { display: flex; flex-wrap: wrap; gap: 2px; padding: 0 2px; min-height: 22px; }
.chat-msg-act { display: inline-flex; align-items: center; gap: 5px; cursor: pointer;
  border: 0; border-radius: var(--radius-xs); background: none; padding: 2px 6px;
  font: inherit; font-size: 11.5px; color: var(--text-faint); line-height: 1.6; white-space: nowrap;
  opacity: 0; transition: opacity .12s ease, color .12s ease, background .12s ease; }
.chat-msg:hover .chat-msg-act, .chat-msg-act:focus-visible { opacity: 1; }
/* The newest answer keeps its actions on show — it is the one the reader is
   most likely to copy or take into a document, and a control nobody knows is
   there may as well not exist. */
.chat-log .chat-msg:last-child .chat-msg-act { opacity: 1; }
.chat-msg-act:hover:not(:disabled) { background: var(--surface-3); color: var(--text); }
.chat-msg-act:disabled { opacity: 1; cursor: default; color: var(--text-faint); }
/* Confirmation stays put until it fades, so it is readable after the pointer
   has already moved on. */
.chat-msg-copy.copied { opacity: 1; color: var(--ok); background: var(--ok-bg); }
.chat-copy-mark { font-size: 12px; }
@media (hover: none) { .chat-msg-act { opacity: 1; } }
.chat-ava { width: 30px; height: 30px; border-radius: 8px; flex-shrink: 0; display: grid; place-items: center; font-size: 14px; color: #fff; font-weight: 700; }
.chat-msg.assistant .chat-ava { background: var(--accent-dark); }
.chat-msg.user .chat-ava { background: var(--brand); }
.chat-msg.user .chat-ava.chat-user-avatar { position: relative; width: 34px; height: 34px; overflow: hidden;
  border: 1px solid rgba(10,78,162,.24); border-radius: 10px; background: linear-gradient(145deg,#fff 8%,#e8f0fa 100%);
  box-shadow: 0 3px 10px rgba(10,78,162,.16), inset 0 1px 0 rgba(255,255,255,.9); }
.chat-user-avatar .account-avatar { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%) scale(.68); transform-origin: center; }
.chat-user-avatar::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(135deg,rgba(255,255,255,.46),transparent 42%); }
.chat-bubble { padding: 10px 14px; border-radius: 12px; font-size: 14px; line-height: 1.6; min-width: 0; }
.chat-msg.user .chat-bubble { background: var(--brand); color: #fff; border-top-right-radius: 4px; }
.chat-msg.assistant .chat-bubble { background: var(--surface-2); border: 1px solid var(--border); border-top-left-radius: 4px; }
.chat-msg.assistant .chat-bubble.chat-bubble-failed {
  background: var(--surface); border-color: #f0c9cc;
}
.chat-bubble.md-out p:first-child { margin-top: 0; }
.chat-bubble.md-out p:last-child { margin-bottom: 0; }
.chat-composer { position: relative; border-top: 1px solid var(--border); background: var(--surface-2); }
/* "Go to the latest message" — floats just above the composer, centred over the
   log, and only exists while the newest message is out of sight. */
.chat-jump { position: absolute; top: -44px; left: 50%; z-index: 4;
  width: 34px; height: 34px; display: grid; place-items: center; cursor: pointer;
  border: 1px solid var(--border-strong); border-radius: 50%; background: var(--surface);
  color: var(--text-soft); font-size: 15px; line-height: 1; box-shadow: var(--shadow);
  opacity: 0; pointer-events: none; transform: translateX(-50%) translateY(6px) scale(.92);
  transition: opacity .16s ease, transform .16s ease; }
.chat-jump.visible { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0) scale(1); }
.chat-jump:hover { color: var(--brand); border-color: var(--brand); }
@media (prefers-reduced-motion: reduce) { .chat-jump { transition: none; } }
.chat-input { display: flex; gap: 10px; padding: 8px 12px 12px; }
.chat-input textarea { flex: 1; resize: none; }
.chat-send-button { width: 48px; min-width: 48px; padding: 0; color: #fff; }
.chat-send-button svg { width: 21px; height: 21px; fill: currentColor; }
.chat-stop-button { color: #fff; border-color: #a72e35; background: linear-gradient(180deg, #e05259 0%, var(--danger) 100%);
  box-shadow: 0 1px 2px rgba(125,25,31,.4), inset 0 1px 0 rgba(255,255,255,.16); }
.chat-stop-button:hover { color: #fff; border-color: #8f252b; background: linear-gradient(180deg, var(--danger) 0%, #ad2d34 100%);
  box-shadow: 0 2px 8px rgba(125,25,31,.34), inset 0 1px 0 rgba(255,255,255,.12); }
/* The controls never squash: each pill keeps its intrinsic width, and it is the
   summary note that gives way — truncating first, then dropping to its own line.
   Letting flex shrink the buttons made "Add pages" and "Refine" wrap to two
   lines as soon as the note grew or the history rail took the width. */
.chat-tools { min-height: 42px; display: flex; flex-wrap: wrap; align-items: center; gap: 7px; padding: 9px 12px 2px; }
.chat-tools > * { flex: 0 0 auto; }
.chat-tool { appearance: none; border: 1px solid var(--border-strong); border-radius: 999px; background: var(--surface);
  color: var(--text-soft); padding: 6px 10px; font: inherit; font-size: 12.5px; font-weight: 650; cursor: pointer;
  white-space: nowrap; display: inline-flex; align-items: center; gap: 5px;
  transition: border-color .15s, background .15s, color .15s, box-shadow .15s; }
.chat-tool:hover { color: var(--brand); border-color: var(--brand); }
.chat-tool.active { color: #fff; border-color: var(--brand); background: var(--brand); box-shadow: 0 2px 8px rgba(10,78,162,.18); }
.chat-tool:disabled { opacity: .55; cursor: default; }
.chat-tool-note { flex: 1 1 130px; min-width: 0; margin-left: auto; color: var(--text-faint);
  font-size: 11.5px; text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-source-panel { margin: 7px 12px 5px; padding: 12px; border: 1px solid #bfd7f1; border-radius: var(--radius-sm); background: #f6faff; }
.chat-source-panel p { margin: 3px 0 9px; }
.chat-source-panel textarea { width: 100%; resize: vertical; min-height: 64px; margin-bottom: 7px; }
.source-host { display: inline-block; padding: 2px 7px; margin: 3px 2px 0; border: 1px solid #bfd7f1; border-radius: 999px; background: #fff; color: var(--brand-dark); }
.message-mode { margin-bottom: 5px; font-size: 10.5px; font-weight: 750; letter-spacing: .02em; opacity: .82; }
.chat-examples { margin-top: 14px; display: flex; gap: 7px; justify-content: center; flex-wrap: wrap; }
.chat-examples button { border: 1px solid var(--border); background: var(--surface); color: var(--text-soft); border-radius: 999px; padding: 6px 10px; font: inherit; font-size: 12px; cursor: pointer; }
.chat-examples button:hover { border-color: var(--brand); color: var(--brand); }
.chat-answer-error {
  display: flex; align-items: flex-start; gap: 9px; padding: 10px 11px;
  border: 1px solid #f0c9cc; border-left: 3px solid var(--danger);
  border-radius: var(--radius-xs); background: var(--danger-bg); color: var(--text);
}
.chat-answer-error-mark {
  display: grid; place-items: center; flex: 0 0 20px; height: 20px;
  border-radius: 50%; background: var(--danger); color: #fff; font-size: 12px; font-weight: 800;
}
.chat-answer-error strong, .chat-answer-error small { display: block; }
.chat-answer-error small { margin-top: 2px; color: var(--text-soft); font-size: 12.5px; }
.chat-live-status { display: flex; align-items: center; gap: 8px; color: var(--text-soft); font-size: 12px; margin-bottom: 8px; }
.chat-live-status.complete { color: var(--text-faint); }
.chat-live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--brand); flex: none; box-shadow: 0 0 0 3px rgba(10,78,162,.12); animation: chat-pulse 1.5s ease-in-out infinite; }
.complete .chat-live-dot, .chat-research-activity:not([open]) .chat-live-dot { background: var(--ok); box-shadow: none; animation: none; }
.chat-research-activity.failed .chat-live-dot { background: var(--danger); }
.chat-research-activity.stopped .chat-live-dot { background: var(--text-faint); }
@keyframes chat-pulse { 50% { opacity: .45; transform: scale(.82); } }
.chat-research-activity { margin: -2px 0 10px; border: 1px solid #bfd7f1; border-radius: 9px; background: #f6faff; overflow: hidden; }
.chat-research-activity summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; padding: 9px 11px; font-size: 12px; }
.chat-research-activity summary::-webkit-details-marker { display: none; }
.chat-research-activity summary .muted { margin-left: auto; font-size: 11px; }
.chat-reasoning { margin: 8px 0 10px; border-left: 3px solid #b8c5d6; padding: 5px 9px; background: rgba(255,255,255,.55); border-radius: 0 6px 6px 0; }
.chat-reasoning summary { cursor: pointer; color: var(--text-soft); font-size: 12px; font-weight: 650; }
.chat-reasoning pre { max-height: 220px; overflow: auto; overscroll-behavior: contain; scrollbar-gutter: stable; white-space: pre-wrap; margin: 8px 0 2px; color: var(--text-soft); font: 12px/1.5 var(--font-mono, monospace); }
.research-report-link { width: 100%; margin-top: 12px; padding: 10px 11px; border: 1px solid #9cc5ee; border-radius: 9px; background: #f3f8fe; color: var(--brand-dark); cursor: pointer; display: grid; grid-template-columns: auto 1fr auto; gap: 9px; align-items: center; text-align: left; font: inherit; }
.research-report-link:hover { border-color: var(--brand); background: #eaf3fd; }
.research-report-link strong, .research-report-link small { display: block; }
.research-report-link small { margin-top: 2px; color: var(--text-faint); font-size: 11px; }
.mind-map-result-link { border-color: #a7c9bc; background: #f1f8f5; color: #185f4b; }
.mind-map-result-link:hover { border-color: #31836a; background: #e7f4ef; }
.modal-mind-map { width: min(1420px, calc(100vw - 28px)); max-width: 1420px;
  padding: 0; overflow: hidden; background: #f7f9fc; }
.mind-map-shell { max-height: calc(100vh - 48px); overflow-y: auto; color: var(--text); }
.mind-map-loading { min-height: 360px; display: flex; align-items: center; justify-content: center;
  gap: 14px; text-align: left; }
.mind-map-loading p { margin: 3px 0 0; }
.mind-map-hero { position: relative; overflow: hidden; display: flex; justify-content: space-between;
  align-items: flex-end; gap: 30px; padding: 30px 34px 28px; color: #fff;
  background: linear-gradient(125deg, #0e3156 0%, #185892 48%, #257b91 100%); }
.mind-map-hero::before { content: ""; position: absolute; width: 420px; height: 420px;
  border: 1px solid rgba(255,255,255,.12); border-radius: 50%; right: -120px; top: -280px;
  box-shadow: 0 0 0 64px rgba(255,255,255,.035), 0 0 0 128px rgba(255,255,255,.025); }
.mind-map-hero::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg, transparent 42%, rgba(255,255,255,.055)); }
.mind-map-hero-copy, .mind-map-stats { position: relative; z-index: 1; }
.mind-map-eyebrow { margin-bottom: 7px; color: #bfe3f2; font-size: 10.5px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .15em; }
.mind-map-hero h2 { max-width: 760px; margin: 0; color: #fff; font-size: clamp(22px, 2.6vw, 35px);
  line-height: 1.14; letter-spacing: -.025em; }
.mind-map-meta { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; }
.mind-map-meta span { padding: 5px 9px; border: 1px solid rgba(255,255,255,.18); border-radius: 999px;
  background: rgba(8,34,61,.28); color: rgba(255,255,255,.84); font-size: 10.5px; }
.mind-map-stats { display: grid; grid-template-columns: repeat(3, minmax(92px, 1fr)); gap: 8px; }
.mind-map-stats > div { min-width: 94px; padding: 11px 13px; border: 1px solid rgba(255,255,255,.16);
  border-radius: 13px; background: rgba(7,31,54,.28); backdrop-filter: blur(10px); }
.mind-map-stats strong, .mind-map-stats span { display: block; }
.mind-map-stats strong { font-size: 21px; line-height: 1; }
.mind-map-stats span { margin-top: 5px; color: #c8dfeb; font-size: 9.5px; text-transform: uppercase;
  letter-spacing: .06em; white-space: nowrap; }
.mind-map-purpose { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start;
  margin: 20px 30px 0; padding: 13px 15px; border: 1px solid #d7e4ef; border-radius: 12px;
  background: rgba(255,255,255,.92); box-shadow: 0 7px 24px rgba(25,61,96,.05); }
.mind-map-purpose > span { padding: 4px 8px; border-radius: 6px; background: #eaf2f8;
  color: #286184; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; }
.mind-map-purpose p { margin: 1px 0 0; color: var(--text-soft); font-size: 12.5px; line-height: 1.55; }
.mind-map-route-panel { margin: 20px 30px 0; padding: 17px; border: 1px solid #d7e4ee;
  border-radius: 16px; background: linear-gradient(145deg, #fbfdff, #f2f8fb);
  box-shadow: 0 10px 28px rgba(29,72,106,.07); }
.mind-map-route-heading { display: flex; align-items: center; justify-content: space-between;
  gap: 16px; margin-bottom: 14px; }
.mind-map-route-heading > div { display: flex; flex-direction: column; gap: 3px; }
.mind-map-route-heading span { color: #2d718c; font-size: 9.5px; font-weight: 850;
  letter-spacing: .09em; text-transform: uppercase; }
.mind-map-route-heading strong { color: #173b57; font-size: 14px; }
.mind-map-route-heading small { padding: 5px 9px; border: 1px solid #bfd8e5;
  border-radius: 999px; background: #fff; color: #41677d; font-size: 9.5px; font-weight: 750; }
.mind-map-route-steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 9px; margin: 0; padding: 0; list-style: none; }
.mind-map-route-steps li { position: relative; display: grid; grid-template-columns: 26px 1fr;
  gap: 8px; min-width: 0; margin: 0; padding: 11px 10px; border: 1px solid #dce7ef;
  border-radius: 11px; background: rgba(255,255,255,.88); }
.mind-map-route-steps li:not(:last-child)::after { content: "›"; position: absolute;
  z-index: 2; top: 50%; right: -8px; width: 14px; height: 18px; margin-top: -9px;
  color: #78a2b7; font-size: 18px; font-weight: 800; text-align: center; }
.mind-map-route-number { display: inline-flex; width: 24px; height: 24px; align-items: center;
  justify-content: center; border-radius: 8px; background: linear-gradient(145deg, #246fa8, #245b90);
  color: #fff; font-size: 10px; font-weight: 850; box-shadow: 0 5px 12px rgba(36,95,145,.2); }
.mind-map-route-steps strong { display: block; color: #234861; font-size: 10.5px; line-height: 1.25; }
.mind-map-route-steps p { margin: 4px 0 0; color: #667d8e; font-size: 9.5px; line-height: 1.42; }
.mind-map-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 15px;
  padding: 16px 30px 10px; }
.mind-map-legend { display: flex; flex-wrap: wrap; gap: 9px 17px; align-items: center;
  color: var(--text-soft); font-size: 11.5px; }
.mind-map-line { display: inline-block; width: 28px; height: 0; margin-right: 6px;
  vertical-align: middle; border-top: 2px solid #9aabc0; }
.mind-map-line.is-derived { border-top-color: #8a66b3; border-top-style: dashed; }
.mind-map-open-hint { padding-left: 4px; color: #657b91; }
.mind-map-zoom { display: inline-flex; flex: 0 0 auto; overflow: hidden; border: 1px solid #cfdae6;
  border-radius: 9px; background: #fff; box-shadow: 0 3px 10px rgba(19,50,79,.05); }
.mind-map-zoom button { width: 34px; height: 30px; border: 0; background: transparent;
  color: #35536f; cursor: pointer; font: 700 15px var(--font); }
.mind-map-zoom button + button { border-left: 1px solid #e3e9ef; }
.mind-map-zoom button:hover { background: #edf4fa; color: var(--brand); }
.mind-map-zoom .mind-map-zoom-label { width: 52px; font-size: 10.5px; }
.mind-map-canvas { position: relative; max-height: 58vh; margin: 0 20px; overflow: auto;
  overscroll-behavior: contain; border: 1px solid #d6e1eb; border-radius: 17px;
  background-color: #f9fbfd; background-image:
    radial-gradient(circle at center, rgba(36,111,168,.11) 0, rgba(36,111,168,0) 34%),
    radial-gradient(#c9d8e6 1px, transparent 1px);
  background-size: auto, 22px 22px; box-shadow: inset 0 1px 0 #fff, 0 12px 35px rgba(26,63,96,.07); }
.mind-map-viewport { min-width: 100%; min-height: 100%; }
.mind-map-canvas svg { display: block; width: 100%; min-width: 1180px; height: auto;
  margin: 0 auto; transition: width .18s ease, min-width .18s ease; }
.mind-map-edge { fill: none; stroke: #91a9bd; stroke-width: 2.2; opacity: .7; }
.mind-map-edge.is-derived { stroke: #8464ad; stroke-width: 1.65; stroke-dasharray: 7 8; opacity: .24; }
.mind-map-node-surface { fill: #fff; stroke: #c4d2de; stroke-width: 1.35; }
.mind-map-node-topic .mind-map-node-surface { fill: url(#mind-map-topic-glow); stroke: #8fc4ed;
  stroke-width: 2.2; }
.mind-map-node-group .mind-map-node-surface { fill: #fff; stroke: #cbd8e3; }
.mind-map-node-accent { stroke: none; }
.mind-map-node-title { fill: #183650; font: 680 13px var(--font, sans-serif); pointer-events: none; }
.mind-map-node-topic .mind-map-node-title { fill: #fff; font-size: 16px; font-weight: 760; }
.mind-map-node-topic .mind-map-node-subtitle { fill: #c2dfef; font-size: 9.5px; font-weight: 750;
  letter-spacing: .12em; }
.mind-map-node-group .mind-map-node-title { font-size: 12.5px; }
.mind-map-node-subtitle { fill: #6f8497; font: 10.5px var(--font, sans-serif); pointer-events: none; }
.mind-map-source-ref { fill: #edf3f8; stroke: none; }
.mind-map-source-ref-text { fill: #42637e; font: 750 9px var(--font, sans-serif);
  text-anchor: middle; pointer-events: none; }
.mind-map-node-arrow { fill: #93a8ba; font: 15px var(--font, sans-serif); pointer-events: none; }
.mind-map-color-0 .mind-map-node-accent { fill: #3b82c4; }
.mind-map-color-1 .mind-map-node-accent { fill: #3a9b7a; }
.mind-map-color-2 .mind-map-node-accent { fill: #8b6bb2; }
.mind-map-color-3 .mind-map-node-accent { fill: #d08a3f; }
.mind-map-color-4 .mind-map-node-accent { fill: #d05f78; }
.mind-map-color-5 .mind-map-node-accent { fill: #4b9ca8; }
.mind-map-node.is-clickable { cursor: pointer; }
.mind-map-node.is-clickable:hover .mind-map-node-surface,
.mind-map-node.is-clickable:focus .mind-map-node-surface {
  fill: #f4f9fd; stroke: #4b91ca; stroke-width: 2.25; }
.mind-map-node.is-clickable:hover .mind-map-node-arrow { fill: #337eb9; }
.mind-map-node.is-clickable:focus { outline: none; }
.mind-map-relationships { margin: 14px 30px 0; padding: 0; border: 1px solid #d9e3eb;
  border-radius: 12px; background: #fff; font-size: 12px; }
.mind-map-relationships summary { display: flex; justify-content: space-between; gap: 15px;
  padding: 12px 14px; cursor: pointer; color: #284c69; font-weight: 700; }
.mind-map-relationships summary small { color: var(--text-faint); font-weight: 500; }
.mind-map-relationships ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px; margin: 0; padding: 0 12px 12px; list-style: none; }
.mind-map-relationship-card { display: flex; flex-direction: column; gap: 3px; margin: 0; padding: 9px 10px;
  border-radius: 9px; background: #f5f2f9; color: #5e4a76; }
.mind-map-relationship-refs { color: #71518f; font-size: 10px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .06em; }
.mind-map-notice { margin: 14px 30px 0; padding: 10px 12px; border-radius: 10px;
  background: #fff8e8; color: #6c531d; font-size: 11.5px; }
.mind-map-shell > .modal-foot { margin: 18px 30px 0; padding: 15px 0 22px; }
@media (max-width: 760px) {
  .modal-mind-map { width: calc(100vw - 14px); max-height: calc(100vh - 14px); }
  .mind-map-shell { max-height: calc(100vh - 14px); }
  .mind-map-hero { display: block; padding: 24px 20px; }
  .mind-map-stats { margin-top: 20px; }
  .mind-map-stats span { white-space: normal; line-height: 1.25; }
  .mind-map-purpose { grid-template-columns: 1fr; margin: 14px 16px 0; }
  .mind-map-route-panel { margin: 14px 14px 0; padding: 13px; }
  .mind-map-route-heading { align-items: flex-start; }
  .mind-map-route-heading small { max-width: 120px; text-align: center; }
  .mind-map-route-steps { grid-template-columns: 1fr; }
  .mind-map-route-steps li:not(:last-child)::after { content: "⌄"; top: auto; right: 50%;
    bottom: -13px; margin: 0 -7px 0 0; }
  .mind-map-toolbar { align-items: flex-start; padding: 14px 16px 9px; }
  .mind-map-open-hint { display: none; }
  .mind-map-canvas { margin: 0 10px; max-height: 54vh; }
  .mind-map-relationships, .mind-map-notice { margin-left: 16px; margin-right: 16px; }
  .mind-map-relationships summary { display: block; }
  .mind-map-relationships summary small { display: block; margin-top: 4px; }
  .mind-map-relationships ul { grid-template-columns: 1fr; }
  .mind-map-shell > .modal-foot { margin-left: 16px; margin-right: 16px; }
}
.source-heading { margin: 9px 0 3px; }
.assistant-report-question { margin: 14px 0; padding: 12px 14px; background: var(--surface-2); border-left: 3px solid var(--brand); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.assistant-report-question span { display: block; color: var(--text-faint); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 4px; }
.chat-sources { margin-top: 10px; padding-top: 8px; border-top: 1px dashed var(--border); }
.chat-sources summary { display: flex; align-items: center; gap: 7px; cursor: pointer; color: var(--text-soft); font-size: 12.5px; }
.chat-sources summary .muted { margin-left: auto; font-size: 11.5px; }
.chat-sources-body { padding: 1px 2px 2px 16px; }
.src-item { font-size: 12.5px; line-height: 1.75; }
.src-num { color: var(--text-faint); font-weight: 700; margin-right: 5px; }

/* Import formatting guidance */
.import-help { margin: 0 0 12px; }
.import-help summary { cursor: pointer; padding: 5px 0; font-weight: 600; color: var(--text-soft); }
.import-help summary:hover { color: var(--text); }
.import-help-body { padding: 4px 0 4px; line-height: 1.6; }
.import-help-body ul { margin: 6px 0 6px 18px; padding: 0; }
.import-help-body li { margin: 2px 0; }

/* ---------- Editorial calendar ---------- */
.cal-toolbar { display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 10px; margin: 8px 0 14px; }
.cal-filter { padding: 6px 10px; }
.mb0 { margin-bottom: 4px; }
.linklike { background: none; border: 0; padding: 0; color: var(--brand); cursor: pointer;
  font: inherit; text-align: left; }
.linklike:hover { text-decoration: underline; }

/* Segmented control (Grid / List) */
/* flex:none so the neighbouring full-width <select> can't squeeze the control
   below its content width (which would clip the second button via overflow). */
.seg { display: inline-flex; flex: 0 0 auto; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); overflow: hidden; }
.seg-btn { background: var(--surface); border: 0; padding: 6px 12px; cursor: pointer;
  font: inherit; color: var(--text-soft); white-space: nowrap; }
.seg-btn + .seg-btn { border-left: 1px solid var(--border); }
.seg-btn.active { background: var(--brand); color: #fff; }

.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
/* Every day cell is exactly the same size regardless of its contents; overflow
   is clipped so a busy day never makes its row taller than the others. */
.cal-grid:not(.cal-dow-row) { grid-auto-rows: 120px; }
.cal-dow-row { margin-bottom: 6px; }
.cal-dow { text-align: center; font-size: 12px; font-weight: 700; color: var(--text-faint);
  text-transform: uppercase; letter-spacing: .04em; }
.cal-cell { height: 100%; min-height: 0; overflow: hidden; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 6px; display: flex; flex-direction: column; gap: 4px; }
.cal-cell.cal-out { background: var(--surface-2); opacity: .6; }
.cal-cell.cal-today { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); }
.cal-daynum { font-size: 12px; font-weight: 700; color: var(--text-soft); }
.cal-items { display: flex; flex-direction: column; gap: 3px; overflow: hidden; flex: 1; min-height: 0; }
.cal-chip { border: 1px solid transparent; border-radius: 7px; padding: 4px 6px; font-size: 12px;
  text-align: left; cursor: pointer; overflow: hidden; width: 100%; font-family: inherit;
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.cal-chip-title { display: block; width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-chip-brain { display: block; max-width: 100%; color: var(--text-faint); font-size: 9px;
  font-weight: 800; letter-spacing: .035em; line-height: 1.2; text-transform: uppercase;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-chip-brain-used { color: #65449a; }
.cal-badge { display: inline-block; border-radius: 999px; padding: 2px 10px; font-size: 12px; font-weight: 600; }

/* Status colours (chips + badges share the palette) */
.cal-chip.cal-proposed { background: #fff; border-style: dashed; border-color: var(--border-strong); color: var(--text-soft); }
.cal-chip.cal-approved { background: #e8f0fb; border-color: var(--brand); color: var(--brand-dark); }
.cal-chip.cal-inprod { background: var(--warn-bg); border-color: #e6b660; color: var(--warn); }
.cal-chip.cal-published { background: var(--ok-bg); border-color: #7bd0a2; color: var(--ok); }
.cal-chip.cal-rejected { background: var(--surface-2); color: var(--text-faint); text-decoration: line-through; }
.cal-badge.cal-proposed { background: var(--surface-2); color: var(--text-soft); border: 1px dashed var(--border-strong); }
.cal-badge.cal-approved { background: #e8f0fb; color: var(--brand-dark); }
.cal-badge.cal-inprod { background: var(--warn-bg); color: var(--warn); }
.cal-badge.cal-published { background: var(--ok-bg); color: var(--ok); }
.cal-badge.cal-rejected { background: var(--danger-bg); color: var(--danger); }

/* Drag-to-reschedule */
.cal-chip[draggable="true"] { cursor: grab; }
.cal-chip.cal-dragging { opacity: .45; }
.cal-cell.cal-drop { outline: 2px dashed var(--brand); outline-offset: -3px; background: #eef4fc; }

/* Promotion-window bands overlaid on the grid */
.cal-bands { display: flex; flex-direction: column; gap: 2px; margin-bottom: 2px; }
.cal-band { height: 15px; line-height: 15px; border-radius: 3px; font-size: 10.5px; font-weight: 700;
  padding: 0 5px; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  opacity: .55; }
.cal-band.cal-band-start { opacity: 1; }
.cal-band-more { font-size: 10px; color: var(--text-faint); font-weight: 700; padding-left: 2px; }
/* Six distinguishable band colours, cycled by promotion order */
.cal-band-0, .cal-swatch.cal-band-0 { background: #0a4ea2; }
.cal-band-1, .cal-swatch.cal-band-1 { background: #00a39a; }
.cal-band-2, .cal-swatch.cal-band-2 { background: #b8552a; }
.cal-band-3, .cal-swatch.cal-band-3 { background: #7a4fbf; }
.cal-band-4, .cal-swatch.cal-band-4 { background: #c48a00; }
.cal-band-5, .cal-swatch.cal-band-5 { background: #2f8f4e; }
.cal-legend { display: flex; flex-wrap: wrap; gap: 10px 16px; margin: 12px 2px 0; font-size: 12.5px; color: var(--text-soft); }
.cal-legend-item { display: inline-flex; align-items: center; gap: 6px; }
.cal-swatch { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }

/* Brain-assisted Ideas: a deliberate intelligence layer, visually distinct
   from ordinary source derivation while keeping the evidence boundary clear. */
.ideas-brain-settings { position: relative; overflow: hidden; padding: 18px;
  border: 1px solid #cfdcf2; border-radius: 16px;
  background: linear-gradient(145deg, #f8fbff 0%, #f2f5ff 52%, #f6f1ff 100%);
  box-shadow: 0 12px 32px rgba(48, 68, 118, .08); }
.ideas-brain-settings::after { content: ""; position: absolute; width: 180px; height: 180px;
  right: -80px; top: -100px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(113, 82, 190, .15), transparent 68%); }
.ideas-brain-settings-head { display: flex; gap: 12px; align-items: flex-start; position: relative; z-index: 1; }
.ideas-brain-settings-head h4 { margin: 0 0 4px; font-size: 16px; }
.ideas-brain-settings-head p { margin: 0; color: var(--text-soft); font-size: 13px; line-height: 1.5; max-width: 820px; }
.ideas-brain-settings-icon, .ideas-brain-mark { display: inline-grid; place-items: center; flex: 0 0 auto;
  color: #fff; background: linear-gradient(145deg, #355ca8, #7650b7); box-shadow: 0 7px 18px rgba(73, 68, 150, .23); }
.ideas-brain-settings-icon { width: 34px; height: 34px; border-radius: 11px; font-size: 18px; }
.ideas-brain-toggle { display: flex; align-items: center; gap: 12px; margin: 16px 0 12px; padding: 12px 14px;
  border: 1px solid rgba(79, 102, 158, .18); border-radius: 12px; background: rgba(255,255,255,.76); cursor: pointer; }
.ideas-brain-toggle > span { display: flex; flex-direction: column; gap: 2px; }
.ideas-brain-toggle small, .ideas-brain-foot { color: var(--text-soft); font-size: 12px; }
.ideas-brain-limits { margin-bottom: 0; }
.ideas-brain-limits.is-disabled { opacity: .52; }
.ideas-brain-limits input:disabled { cursor: not-allowed; }
.ideas-brain-foot { margin: 2px 0 0; }
.ideas-brain-mini { margin-left: 5px; color: #5c4294; background: #f1ebff; border: 1px solid #ddd0fb; }
.ideas-brain-mini-checked, .ideas-brain-mini-no_match { color: #35606a; background: #eaf7f5; border-color: #c6e5df; }
.ideas-brain-mini-paused, .ideas-brain-mini-disabled { color: #795d25; background: #fff7df; border-color: #ead8a4; }

.ideas-brain-card { overflow: hidden; border: 1px solid #cbd9f1; border-radius: 15px;
  background: linear-gradient(145deg, #fbfdff, #f5f3ff); box-shadow: 0 10px 28px rgba(48, 68, 118, .09); }
.ideas-brain-card-head { display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 14px 16px; border-bottom: 1px solid rgba(82, 105, 158, .14); }
.ideas-brain-card-head > div { display: flex; align-items: center; gap: 10px; }
.ideas-brain-card-head > div > span:last-child { display: flex; flex-direction: column; }
.ideas-brain-card-head small { color: #68509a; font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.ideas-brain-card-head strong { font-size: 13px; }
.ideas-brain-mark { width: 30px; height: 30px; border-radius: 10px; }
.ideas-brain-connection { margin: 0; padding: 15px 16px 8px; font-size: 14px; line-height: 1.55; }
.ideas-brain-metrics { display: flex; flex-wrap: wrap; gap: 6px; padding: 2px 16px 10px; }
.ideas-brain-metrics span { padding: 4px 8px; color: #53617a; background: rgba(255,255,255,.72);
  border: 1px solid rgba(75, 99, 151, .14); border-radius: 999px; font-size: 10px; font-weight: 700; }
.ideas-brain-card-check { background: linear-gradient(145deg, #fbfdff, #f2faf8); border-color: #c8dfdc; }
.ideas-brain-insights { display: flex; flex-wrap: wrap; gap: 6px; padding: 2px 16px 8px; }
.ideas-brain-insight { color: #60468e; background: #f1ebff; border: 1px solid #ddd0fb; text-transform: capitalize; }
.ideas-brain-notes { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 8px; padding: 8px 16px 14px; }
.ideas-brain-note { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding: 11px 12px;
  color: var(--text); text-decoration: none; border: 1px solid rgba(75, 99, 151, .17); border-radius: 11px; background: rgba(255,255,255,.82); transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease; }
.ideas-brain-note:hover { transform: translateY(-1px); border-color: #8ca5d2; box-shadow: 0 7px 16px rgba(48,68,118,.1); }
.ideas-brain-note-kind { color: #68509a; font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.ideas-brain-note strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.ideas-brain-note small { color: var(--text-soft); font-size: 11px; }
.ideas-brain-review { display: flex; flex-direction: column; gap: 3px; margin: 0 16px 12px; padding: 10px 12px;
  border-left: 3px solid #6d58af; border-radius: 5px 10px 10px 5px; background: rgba(102, 77, 162, .07); font-size: 12px; }
.ideas-brain-review span { color: var(--text-soft); line-height: 1.45; }
.ideas-brain-boundary { margin: 0; padding: 10px 16px; color: var(--text-soft); font-size: 11px;
  border-top: 1px solid rgba(82, 105, 158, .12); background: rgba(255,255,255,.45); }

.ideas-run-summary { display: flex; gap: 13px; align-items: flex-start; padding: 4px 0 14px; }
.ideas-run-summary small { color: #68509a; font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.ideas-run-summary h2 { margin: 2px 0 5px; }
.ideas-run-summary p { margin: 0; color: var(--text-soft); line-height: 1.5; }
.ideas-run-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 2px 0 14px; }
.ideas-run-metrics > div { display: flex; flex-direction: column; padding: 12px; border: 1px solid var(--border);
  border-radius: 12px; background: var(--surface-2); }
.ideas-run-metrics strong { font-size: 22px; }
.ideas-run-metrics span { color: var(--text-soft); font-size: 11px; }
.ideas-run-brain { display: flex; flex-direction: column; gap: 3px; padding: 13px 14px; border: 1px solid #cbd9f1;
  border-radius: 12px; background: linear-gradient(145deg, #f8fbff, #f5f2ff); }
.ideas-run-brain strong { color: #60468e; }
.ideas-run-brain span { font-size: 13px; }
.ideas-run-brain small { color: var(--text-soft); }
.ideas-run-reasons { list-style: none; margin: 8px 0 0; padding: 0; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.ideas-run-reasons li { display: flex; justify-content: space-between; gap: 14px; padding: 9px 12px; border-bottom: 1px solid var(--border); font-size: 12px; }
.ideas-run-reasons li:last-child { border-bottom: 0; }
.ideas-run-rejections { margin-top: 12px; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.ideas-run-rejections > summary { display: flex; justify-content: space-between; gap: 12px; padding: 10px 12px; cursor: pointer; font-size: 12px; font-weight: 700; }
.ideas-run-rejections > summary span { color: var(--text-faint); font-variant-numeric: tabular-nums; }
.ideas-run-rejections[open] > summary { border-bottom: 1px solid var(--border); background: var(--surface-2); }
.ideas-run-rejections ul { list-style: none; margin: 0; padding: 0; max-height: 330px; overflow-y: auto; }
.ideas-run-rejections li { padding: 10px 12px; border-bottom: 1px solid var(--border); }
.ideas-run-rejections li:last-child { border-bottom: 0; }
.ideas-run-rejection-title { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.ideas-run-rejection-title strong { font-size: 12px; }
.ideas-run-rejection-title span { color: var(--text-faint); font-size: 10px; text-align: right; }
.ideas-run-rejections small { display: block; margin-top: 2px; color: var(--text-faint); font-size: 10px; }
.ideas-run-rejections p { margin: 5px 0 0; color: var(--text-soft); font-size: 11px; line-height: 1.45; }
.ideas-run-saved { border-color: #c9dfd3; }
.ideas-run-saved[open] > summary { background: #f2faf5; }

/* Per-project knowledge scope / pinned sources */
.kb-scope-group { margin-top: 10px; }
.kb-scope-row { display: flex; align-items: center; gap: 8px; padding: 3px 0; font-size: 13.5px; cursor: pointer; }
.kb-scope-row input { width: auto; flex: none; }
.kb-scope-title { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kb-scope-list { max-height: 200px; overflow-y: auto; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 6px 8px; }
/* Content-type multi-select (Memory rule scoping). */
.ct-picker { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.ct-pick { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; cursor: pointer; font-weight: 500; }
.ct-pick input { width: auto; flex: none; }
/* The preset's section toggles are long labels in a narrow column, so they are
   stacked rows rather than inline chips — inline wrapping ran them together and
   made two labels read as one. align-items:start keeps the box beside the first
   line when a label wraps. */
.preset-scopes { display: flex; flex-direction: column; gap: 8px; }
.preset-scopes .ct-pick { align-items: start; gap: 8px; line-height: 1.35; }
.preset-scopes .ct-pick input { margin: 2px 0 0; }

/* Translations — split-view editor */
.modal-wide { max-width: 1100px; width: 94vw; }
.tr-grid { display: flex; flex-direction: column; gap: 18px; max-height: 66vh; overflow-y: auto; padding-right: 6px; }
/* Source ↔ target sit in an equal-height two-column row: the target editor box
   matches the height of the original text beside it (not a short single field). */
.tr-field { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: stretch; }
.tr-col { display: flex; flex-direction: column; min-width: 0; }
.tr-label { font-weight: 600; font-size: 12.5px; margin-bottom: 5px; color: var(--text-soft); }
.tr-source { flex: 1; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 10px 12px; font-size: 13.5px; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere;
  min-height: 44px; max-height: 380px; overflow-y: auto; }
.tr-input { width: 100%; font-size: 13.5px; }
textarea.tr-input { flex: 1; min-height: 120px; max-height: 380px; line-height: 1.6; resize: vertical; }
input.tr-input { align-self: flex-start; }
.tr-review { border-radius: var(--radius-sm); padding: 8px 12px; margin-top: 10px; font-size: 13px; }
.tr-review.ok { background: var(--ok-bg); color: var(--ok); }
.tr-review.warn { background: var(--warn-bg); color: var(--warn); }
.tr-review p { margin: 4px 0 0; }
.tr-issues { white-space: pre-wrap; margin: 6px 0 0; color: var(--text); background: rgba(0,0,0,.03); padding: 6px 8px; border-radius: 6px; }

/* Language selection grid (Translation admin) */
.lang-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 6px 14px; margin-top: 6px; }
.lang-chip { display: flex; align-items: center; gap: 8px; padding: 4px 0; font-size: 13.5px; cursor: pointer; }
.lang-chip input { width: auto; flex: none; }

/* Automation / playbook run */
.studio-run-card { overflow: visible; }
.studio-workspace { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px;
  align-items: start; margin-top: 12px; }
.studio-stage { overflow: hidden; border: 1px solid #1f3856; border-radius: 20px;
  background: #081627; color: #edf5ff; box-shadow: 0 24px 55px -32px rgba(5,19,38,.78); }
.studio-stage-head { min-height: 82px; display: flex; align-items: center; justify-content: space-between;
  gap: 22px; padding: 16px 20px; border-bottom: 1px solid rgba(255,255,255,.1);
  background: radial-gradient(circle at 18% -30%, rgba(0,179,164,.25), transparent 37%),
    linear-gradient(135deg, #112b49, #081627 68%); }
.studio-kicker { display: block; color: #70e3d8; font-size: 10.5px; font-weight: 850;
  letter-spacing: .15em; text-transform: uppercase; }
.studio-stage-title { margin-top: 3px; color: #fff; font-size: 18px; font-weight: 730; letter-spacing: -.015em; }
.studio-stage-status { display: inline-flex; align-items: center; gap: 9px; flex: none; color: #e2ebf8;
  font-size: 12px; font-weight: 680; padding: 7px 11px; border: 1px solid rgba(255,255,255,.15);
  border-radius: 99px; background: rgba(255,255,255,.07); backdrop-filter: blur(10px); }
.studio-live-beacon { width: 8px; height: 8px; border-radius: 50%; background: #36d9c9;
  box-shadow: 0 0 0 0 rgba(54,217,201,.5); animation: studio-beacon 1.8s ease-out infinite; }
.studio-live-beacon.beacon-waiting { background: #f5b54c; box-shadow: 0 0 0 0 rgba(245,181,76,.5); }
.studio-live-beacon.beacon-done { background: #4fc084; animation: none; box-shadow: none; }
.studio-live-beacon.beacon-failed { background: #e35860; animation: none; box-shadow: none; }
.studio-live-beacon.beacon-idle { background: #8291a5; animation: none; box-shadow: none; }
@keyframes studio-beacon { 70% { box-shadow: 0 0 0 8px rgba(54,217,201,0); } 100% { box-shadow: none; } }

.studio-game-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 48px; padding: 8px 14px; border-bottom: 1px solid rgba(255,255,255,.1);
  background: #0b1d31; }
.studio-dossier-status { display: inline-flex; align-items: center; gap: 9px; color: #d9e7f7; font-size: 11px; }
.studio-dossier-icon { position: relative; width: 18px; height: 22px; border: 2px solid #62e4d8; border-radius: 3px;
  background: rgba(98,228,216,.1); box-shadow: 0 0 15px rgba(98,228,216,.24); }
.studio-dossier-icon::before, .studio-dossier-icon::after { content: ""; position: absolute; left: 3px; right: 3px;
  height: 2px; border-radius: 2px; background: #62e4d8; }
.studio-dossier-icon::before { top: 6px; }
.studio-dossier-icon::after { top: 12px; }
.studio-floor { position: relative; overflow: hidden; background: #071321; }
.studio-scene { width: 100%; position: relative; aspect-ratio: 1150 / 700; isolation: isolate; overflow: hidden;
  background-color: #10243a;
  background-image: linear-gradient(30deg, rgba(255,255,255,.025) 12%, transparent 12.5%, transparent 87%, rgba(255,255,255,.025) 87.5%),
    linear-gradient(150deg, rgba(255,255,255,.025) 12%, transparent 12.5%, transparent 87%, rgba(255,255,255,.025) 87.5%),
    linear-gradient(30deg, rgba(255,255,255,.025) 12%, transparent 12.5%, transparent 87%, rgba(255,255,255,.025) 87.5%),
    linear-gradient(150deg, rgba(255,255,255,.025) 12%, transparent 12.5%, transparent 87%, rgba(255,255,255,.025) 87.5%),
    radial-gradient(circle at 45% 30%, #1b3a51, #0c1d32 72%);
  background-position: 0 0, 0 0, 18px 32px, 18px 32px, 0 0; background-size: 36px 64px; }
.studio-office-world { position: absolute; z-index: auto; inset: 0; pointer-events: auto; }
.studio-room { position: absolute; top: 18%; bottom: 6%; border: 1px solid rgba(138,186,218,.2); border-radius: 14px;
  box-shadow: inset 0 0 40px rgba(255,255,255,.025), 0 15px 35px rgba(2,10,19,.17); pointer-events: none;
  transition: border-color .3s ease, box-shadow .3s ease; }
.studio-room::after { content: ""; position: absolute; inset: 0; border-radius: inherit; opacity: 0;
  background: radial-gradient(circle at 50% 18%, rgba(72,220,207,.1), transparent 58%); transition: opacity .3s ease; }
.studio-room > span { position: absolute; z-index: 1; top: 3px; left: 10px; color: rgba(208,229,245,.58); font-size: 8px;
  font-weight: 850; letter-spacing: .12em; text-transform: uppercase; transition: color .3s ease, text-shadow .3s ease; }
.studio-room.room-active { border-color: rgba(111,225,216,.46);
  box-shadow: inset 0 0 44px rgba(72,220,207,.075), 0 0 0 1px rgba(72,220,207,.07), 0 15px 35px rgba(2,10,19,.17); }
.studio-room.room-active::after { opacity: 1; }
.studio-room.room-active > span { color: rgba(184,248,241,.9); text-shadow: 0 0 10px rgba(72,220,207,.32); }
.room-briefing { left: 1.5%; width: 14%; background: rgba(91,132,177,.08); }
.room-writing { left: 16.5%; width: 50.5%; background: rgba(36,190,172,.055); }
.room-review { left: 68%; width: 12.5%; background: rgba(169,115,206,.07); }
.room-delivery { left: 81.5%; right: 1.5%; background: rgba(230,163,76,.06); }
.studio-route-line { position: absolute; z-index: 1; left: 4%; right: 4%; top: 9.2%; height: 2px;
  background: linear-gradient(90deg, #2ed7c8, #67aee8 54%, #d79bf0 75%, #f0b35d); box-shadow: 0 0 11px rgba(74,212,210,.35); }
.studio-route-line i { position: absolute; top: 50%; width: 8px; height: 8px; transform: translate(-50%,-50%);
  border: 2px solid #9cebe4; border-radius: 50%; background: #10263a; }
.studio-dossier-runner { position: absolute; z-index: 14; left: var(--dossier-progress); top: 9.2%; width: 26px; height: 26px;
  transform: translate(-50%,-50%); transition: left .9s cubic-bezier(.2,.8,.2,1); }
.studio-dossier-runner span { position: absolute; inset: 1px 4px 3px; border: 2px solid #fff; border-radius: 3px;
  background: #42d8cb; box-shadow: 0 0 0 3px rgba(66,216,203,.18), 0 0 18px rgba(66,216,203,.58);
  animation: studio-dossier-hover 1.35s ease-in-out infinite; }
.studio-dossier-runner span::before, .studio-dossier-runner span::after { content: ""; position: absolute; left: 3px; right: 3px; height: 2px; background: #0c5d62; }
.studio-dossier-runner span::before { top: 5px; } .studio-dossier-runner span::after { top: 10px; }
.studio-dossier-runner i { position: absolute; inset: -5px; border: 1px solid rgba(98,228,216,.4); border-radius: 50%; animation: studio-dossier-pulse 1.8s ease-out infinite; }
@keyframes studio-dossier-hover { 50% { transform: translateY(-3px) rotate(3deg); } }
@keyframes studio-dossier-pulse { to { transform: scale(1.7); opacity: 0; } }
.studio-writing-team { display: contents; }
.studio-writing-team { display: contents; }

.studio-station { --station-color: #91a5bb; --station-bg: rgba(7,22,37,.9); --avatar-shirt: #557ce0;
  position: absolute; z-index: 5; width: 11%; height: 20.37%; padding: 0; border: 0; border-radius: 14px;
  transform: translate(-50%, -50%); color: #fff; background: transparent; font: inherit; cursor: pointer;
  transition: filter .18s, transform .18s; }
.studio-station::after { content: ""; position: absolute; z-index: -1; inset: -4px; border: 2px solid transparent;
  border-radius: 15px; transition: border-color .18s, box-shadow .18s; }
.studio-station:hover { z-index: 15; transform: translate(-50%, -50%) scale(1.035); filter: brightness(1.08); }
.studio-station:focus-visible { outline: 3px solid #fff; outline-offset: 4px; z-index: 16; }
.studio-station.is-selected::after { border-color: var(--station-color); box-shadow: 0 0 0 3px color-mix(in srgb, var(--station-color) 22%, transparent), 0 0 24px color-mix(in srgb, var(--station-color) 30%, transparent); }
.studio-desk { position: absolute; z-index: 2; left: 7%; right: 7%; top: 20%; height: 44%; border: 1px solid rgba(255,255,255,.18);
  border-radius: 8px 8px 12px 12px; background: linear-gradient(160deg, #8c6545, #4b342a 62%, #2a2020);
  box-shadow: 0 8px 0 #291e1d, 0 12px 16px rgba(2,9,17,.34), inset 0 1px rgba(255,255,255,.22); }
.studio-desk::before, .studio-desk::after { content: ""; position: absolute; bottom: -15px; width: 5px; height: 15px;
  border-radius: 0 0 3px 3px; background: #253243; }
.studio-desk::before { left: 9px; } .studio-desk::after { right: 9px; }
.studio-monitor { position: absolute; left: 50%; top: -8%; width: 34%; height: 45%; transform: translateX(-50%);
  overflow: hidden; border: 2px solid #283a50; border-radius: 4px; background: #0c2237; box-shadow: 0 2px 6px rgba(0,0,0,.34); }
.studio-monitor::after { content: ""; position: absolute; left: 47%; bottom: -7px; width: 4px; height: 7px; background: #31465b; }
.studio-monitor i { display: block; width: 65%; height: 2px; margin: 4px 0 0 4px; border-radius: 2px; background: color-mix(in srgb, var(--station-color) 70%, white); opacity: .7; }
.studio-monitor i:nth-child(2) { width: 45%; } .studio-monitor i:nth-child(3) { width: 72%; }
.studio-keyboard { position: absolute; left: 50%; bottom: 12%; width: 34%; height: 10%; transform: translateX(-50%) skewX(-8deg);
  border: 1px solid #24354a; border-radius: 3px; background: repeating-linear-gradient(90deg, #9eafbf 0 2px, #516579 2px 3px); }
.studio-keyboard::after { content: ""; position: absolute; left: 4%; right: 4%; top: 45%; height: 1px; background: rgba(18,35,52,.55); }
.studio-mouse { position: absolute; left: 71%; bottom: 10%; width: 8%; height: 15%; border: 1px solid #24354a;
  border-radius: 50% 50% 44% 44%; background: #8fa2b4; box-shadow: inset 0 1px rgba(255,255,255,.35); }
.studio-mouse::before { content: ""; position: absolute; left: 49%; top: -6px; width: 1px; height: 7px; background: #43566a; }
.studio-mouse i { position: absolute; left: 48%; top: 2px; width: 1px; height: 4px; background: #2b3d50; }
.studio-inbox { position: absolute; right: 7%; top: 14%; width: 17%; height: 26%; border-radius: 3px; background: #25394d; }
.studio-inbox i { position: absolute; left: 2px; right: 2px; height: 34%; border-radius: 2px; background: #eef7ff; transform: rotate(3deg); }
.studio-inbox i:first-child { top: -4px; } .studio-inbox i:last-child { top: 1px; transform: rotate(-4deg); }
.studio-desk-light { position: absolute; left: 8%; top: 12%; width: 6px; height: 6px; border-radius: 50%; background: var(--station-color); box-shadow: 0 0 10px var(--station-color); }
.studio-game-avatar { position: absolute; z-index: 4; left: 50%; top: 50%; width: 42px; height: 52px; transform: translate(-50%, 0); transform-origin: 50% 25%; }
.studio-avatar-shadow { position: absolute; left: 50%; bottom: -2px; width: 38px; height: 10px; transform: translateX(-50%);
  border-radius: 50%; background: rgba(0,0,0,.34); filter: blur(2px); }
.studio-avatar-chair { position: absolute; z-index: 0; left: 50%; top: 18px; width: 34px; height: 32px; transform: translateX(-50%);
  border: 2px solid #1d2d41; border-radius: 10px 10px 13px 13px; background: #2a4057; box-shadow: 0 4px 0 #17273a; }
.studio-avatar-base { position: absolute; z-index: 1; left: 50%; bottom: 3px; width: 27px; height: 13px; transform: translateX(-50%);
  border: 2px solid #31465a; border-radius: 5px 5px 10px 10px; background: linear-gradient(180deg,#8296a9,#43586c); }
.studio-avatar-base::before, .studio-avatar-base::after { content: ""; position: absolute; bottom: -4px; width: 7px; height: 6px; border-radius: 50%; background: #15263a; }
.studio-avatar-base::before { left: 1px; } .studio-avatar-base::after { right: 1px; }
.studio-avatar-base i { position: absolute; left: 50%; top: 2px; width: 8px; height: 4px; transform: translateX(-50%); border-radius: 3px; background: var(--station-color); box-shadow: 0 0 7px var(--station-color); }
.studio-avatar-body { position: absolute; z-index: 2; left: 50%; top: 18px; width: 30px; height: 25px; transform: translateX(-50%);
  border: 2px solid #354b61; border-radius: 7px 7px 9px 9px; background: linear-gradient(145deg, color-mix(in srgb, var(--avatar-shirt) 48%, #c7d7e4), color-mix(in srgb, var(--avatar-shirt) 52%, #22384c));
  box-shadow: inset 4px 0 rgba(255,255,255,.12), inset -3px -3px rgba(8,22,36,.25); }
.studio-avatar-core { position: absolute; left: 50%; top: 7px; width: 9px; height: 9px; transform: translateX(-50%);
  border: 2px solid rgba(255,255,255,.7); border-radius: 50%; background: var(--station-color); box-shadow: 0 0 8px var(--station-color); }
.studio-avatar-arm { position: absolute; top: -8px; width: 6px; height: 27px; border: 2px solid #3c5368; border-radius: 5px;
  background: linear-gradient(180deg,#aebdca,#536a7d); transform-origin: 50% 100%; }
.studio-avatar-arm::after { content: ""; position: absolute; left: -2px; top: -2px; width: 7px; height: 6px; border-radius: 3px; background: #b9c8d3; }
.studio-avatar-arm.arm-left { left: 1px; transform: rotate(-14deg); }
.studio-avatar-arm.arm-right { right: 1px; transform: rotate(14deg); }
.studio-avatar-head { position: absolute; z-index: 3; left: 50%; top: 1px; width: 31px; height: 20px; transform: translateX(-50%);
  overflow: visible; border: 2px solid #435b70; border-radius: 7px 7px 9px 9px; background: linear-gradient(145deg,#d7e2e9,#6f8495 58%,#3e5367);
  box-shadow: 0 3px 6px rgba(0,0,0,.28), inset 3px 2px rgba(255,255,255,.25); }
.studio-avatar-antenna { position: absolute; left: 50%; top: -9px; width: 2px; height: 9px; transform: translateX(-50%); background: #758b9e; }
.studio-avatar-antenna::after { content: ""; position: absolute; left: 50%; top: -3px; width: 6px; height: 6px; transform: translateX(-50%);
  border: 1px solid rgba(255,255,255,.7); border-radius: 50%; background: var(--station-color); box-shadow: 0 0 8px var(--station-color); }
.studio-avatar-visor { position: absolute; left: 4px; right: 4px; top: 5px; height: 7px; overflow: hidden; border-radius: 4px;
  background: #0a2033; box-shadow: inset 0 0 6px rgba(0,0,0,.8), 0 0 6px color-mix(in srgb,var(--station-color) 55%,transparent); }
.studio-avatar-visor::before { content: ""; position: absolute; left: 3px; top: 2px; width: 5px; height: 3px; border-radius: 3px;
  background: var(--station-color); box-shadow: 11px 0 var(--station-color); }
.studio-avatar-visor::after { content: ""; position: absolute; top: 0; bottom: 0; width: 8px; background: rgba(255,255,255,.35); transform: skewX(-24deg); animation: studio-visor-scan 2.6s ease-in-out infinite; }
.studio-agent-cognition { position: absolute; z-index: 6; left: 50%; top: -18px; display: none; width: 38px; height: 16px; transform: translateX(-50%); }
.studio-agent-cognition i { position: absolute; left: 50%; top: 50%; border: 1px solid #b9a2ff; border-radius: 50%; transform: translate(-50%,-50%); }
.studio-agent-cognition i:nth-child(1) { width: 8px; height: 8px; } .studio-agent-cognition i:nth-child(2) { width: 19px; height: 12px; }
.studio-agent-cognition i:nth-child(3) { width: 32px; height: 16px; }
.studio-agent-pin { position: absolute; z-index: 5; right: -10px; top: -5px; display: grid; place-items: center;
  min-width: 20px; height: 17px; padding: 0 4px; border: 1px solid rgba(255,255,255,.86); border-radius: 99px;
  color: #fff; background: var(--station-color); box-shadow: 0 3px 8px rgba(3,13,25,.32);
  font-size: clamp(6px, .45vw, 8px); font-weight: 850; }
.studio-agent-label { position: absolute; z-index: 7; left: 50%; bottom: -3px; display: block; min-width: 76%; max-width: 120%;
  transform: translateX(-50%); padding: 4px 6px; border: 1px solid rgba(255,255,255,.2);
  border-radius: 7px; background: var(--station-bg); box-shadow: 0 5px 14px rgba(4,15,28,.3); text-align: center; white-space: nowrap; }
.studio-agent-name { display: block; overflow: hidden; text-overflow: ellipsis; font-size: clamp(7.5px, .62vw, 10px); font-weight: 800; line-height: 1.15; }
.studio-agent-state { display: flex; align-items: center; justify-content: center; gap: 4px; margin-top: 2px;
  color: color-mix(in srgb, var(--station-color) 76%, white); font-size: clamp(6px, .46vw, 8px); font-weight: 720; }
.studio-state-dot { display: inline-block; width: 5px; height: 5px; flex: none; border-radius: 50%; background: currentColor; }
.studio-agent-task { position: absolute; z-index: 20; left: 50%; bottom: calc(100% + 6px); display: block; width: max-content; max-width: 165%;
  transform: translateX(-50%) translateY(4px); padding: 5px 7px; border: 1px solid rgba(255,255,255,.18); border-radius: 7px;
  color: #dfe9f5; background: rgba(5,17,31,.96); box-shadow: 0 6px 16px rgba(3,12,23,.38);
  font-size: clamp(7px, .5vw, 9px); line-height: 1.3; text-align: center;
  opacity: 0; visibility: hidden; transition: opacity .16s, transform .16s; pointer-events: none; }
.studio-station:hover .studio-agent-task, .studio-station:focus-visible .studio-agent-task {
  opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.studio-document-exchange { position: absolute; z-index: 8; left: 60%; top: 23%; width: 18px; height: 22px; opacity: 0; }
.studio-document-exchange i { display: block; width: 100%; height: 100%; border: 2px solid #fff; border-radius: 3px;
  background: #49ddd0; box-shadow: 0 0 15px rgba(73,221,208,.7); }
.studio-document-exchange i::before, .studio-document-exchange i::after { content: ""; display: block; width: 60%; height: 2px; margin: 5px auto -2px; background: #14706e; }
.station-active { --station-color: #29c4f0; --station-bg: rgba(4,63,91,.96); z-index: 10; }
.station-active .studio-monitor { background: #073b59; box-shadow: 0 0 18px rgba(41,196,240,.62); }
.station-active .studio-monitor i { animation: studio-screen-code .75s steps(2,end) infinite; }
.station-active .studio-game-avatar { animation: studio-robot-seated .9s ease-in-out infinite; }
.station-active .studio-avatar-arm.arm-left { animation: studio-type-left .3s ease-in-out infinite alternate; }
.station-active .studio-avatar-arm.arm-right { animation: studio-type-right .34s ease-in-out infinite alternate; }
.station-active .studio-mouse { animation: studio-mouse-work .8s ease-in-out infinite alternate; }
.agent-activity-reasoning { --station-color: #aa8cff; --station-bg: rgba(70,45,118,.95); }
.agent-activity-reasoning .studio-agent-cognition { display: block; }
.agent-activity-reasoning .studio-agent-cognition i { animation: studio-cognition-ring 1.8s ease-out infinite; }
.agent-activity-reasoning .studio-agent-cognition i:nth-child(2) { animation-delay: .25s; }
.agent-activity-reasoning .studio-agent-cognition i:nth-child(3) { animation-delay: .5s; }
.agent-activity-reasoning .studio-monitor { background: #241b4d; box-shadow: 0 0 18px rgba(170,140,255,.62); }
.agent-activity-reasoning .studio-game-avatar { animation: studio-robot-reasoning 1.5s ease-in-out infinite; }
.agent-activity-reasoning .studio-avatar-arm { animation-duration: .8s; }
.agent-activity-final { --station-color: #f0c85a; --station-bg: rgba(92,68,12,.96); }
.agent-activity-final .studio-monitor { background: #493708; box-shadow: 0 0 18px rgba(240,200,90,.68); }
.agent-activity-final .studio-avatar-arm.arm-left { animation-duration: .2s; }
.agent-activity-final .studio-avatar-arm.arm-right { animation-duration: .23s; }
.agent-activity-final .studio-document-exchange { opacity: 1; animation: studio-document-handoff 2.6s ease-in-out infinite; }
.agent-activity-final .studio-document-exchange i { background: #f0c85a; box-shadow: 0 0 15px rgba(240,200,90,.72); }
.station-done { --station-color: #4aa36f; --station-bg: rgba(22,65,48,.88); }
.station-done .studio-monitor { background: #102e29; box-shadow: 0 0 8px rgba(74,163,111,.22); }
.station-done .studio-monitor i { background: #68bd88; opacity: .72; }
.station-attention { --station-color: #f3b34c; --station-bg: rgba(112,66,6,.94); z-index: 10; }
.station-attention .studio-game-avatar { animation: studio-avatar-call 1.4s ease-in-out infinite; }
.station-attention .studio-document-exchange { left: 70%; opacity: 1; animation: studio-document-wait 1.4s ease-in-out infinite; }
.station-failed { --station-color: #ee6269; --station-bg: rgba(112,22,29,.94); z-index: 10; }
.station-failed .studio-monitor { background: #4a1017; animation: studio-error-screen 1s steps(2,end) infinite; }
.station-queued { --station-color: #91a5bb; --station-bg: rgba(8,23,39,.84); }
.station-queued .studio-game-avatar { filter: saturate(.65); }
.station-idle { --station-color: #728196; --station-bg: rgba(8,23,39,.7); opacity: .65; }
.studio-station-vacant { --station-color: #536273; cursor: default; opacity: .68; pointer-events: none; }
.studio-station-vacant::after { display: none; }
.studio-station-vacant:hover { z-index: 5; transform: translate(-50%, -50%); filter: none; }
.studio-station-vacant .studio-desk { filter: saturate(.48) brightness(.78); }
.studio-station-vacant .studio-monitor { background: #101d29; box-shadow: none; }
.studio-station-vacant .studio-monitor i { opacity: .16; animation: none; }
.studio-station-vacant .studio-inbox i { opacity: .4; }
.studio-station-vacant .studio-desk-light { background: #536273; box-shadow: none; opacity: .55; }
.studio-station-vacant .studio-vacant-seat { filter: saturate(.3); opacity: .72; }
@keyframes studio-screen-code { 50% { transform: translateX(3px); opacity: 1; } }
@keyframes studio-visor-scan { 0%,100% { left: -9px; opacity: 0; } 18% { opacity: .7; } 55% { left: 27px; opacity: .35; } 56% { opacity: 0; } }
@keyframes studio-type-left { to { transform: rotate(-9deg) translate(2px,-2px); } }
@keyframes studio-type-right { to { transform: rotate(9deg) translate(-2px,-2px); } }
@keyframes studio-mouse-work { to { transform: translate(2px,-1px) rotate(2deg); } }
@keyframes studio-robot-seated { 50% { transform: translate(-50%,-1px); } }
@keyframes studio-robot-reasoning { 50% { transform: translate(-50%,-2px) rotate(.8deg); } }
@keyframes studio-cognition-ring { 0% { opacity: 0; transform: translate(-50%,-50%) scale(.55); } 38% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%,-50%) scale(1.25); } }
@keyframes studio-document-handoff { 0%, 15%, 100% { transform: translate(0,0) rotate(-5deg); opacity: 0; }
  30% { opacity: 1; } 58% { transform: translate(22px,8px) rotate(5deg); opacity: 1; } 75% { transform: translate(30px,12px) rotate(2deg); opacity: 0; } }
@keyframes studio-document-wait { 50% { transform: translateY(-5px); } }
@keyframes studio-avatar-call { 50% { transform: translate(-50%,-4px) rotate(2deg); } }
@keyframes studio-error-screen { 50% { filter: brightness(1.8); } }

/* The game floor keeps every role in a stable office desk position. */
.studio-station[data-studio-station="specs"] { left: 8.5%; top: 47.7%; }
.studio-station[data-studio-station="write-Researching"] { left: 22.8%; top: 42.53%; }
.studio-station[data-studio-station="write-Planning"] { left: 35.3%; top: 42.53%; }
.studio-station[data-studio-station="write-Outlining"] { left: 47.8%; top: 42.53%; }
.studio-station[data-studio-station="write-Drafting"] { left: 60.3%; top: 42.53%; }
.studio-station[data-studio-station="write-Writing"] { left: 22.8%; top: 68.07%; }
.studio-station[data-studio-station="write-Editing"] { left: 35.3%; top: 68.07%; }
.studio-station[data-studio-station="write-Polishing"] { left: 47.8%; top: 68.07%; }
.studio-station[data-studio-station="learning"] { left: 60.3%; top: 68.07%; }
.studio-station[data-studio-station="review"] { left: 74.3%; top: 42.53%; }
.studio-station[data-studio-station="lawyer"] { left: 74.3%; top: 61%; }
.studio-station[data-studio-station="approve"] { left: 74.3%; top: 78.68%; }
.studio-station[data-studio-station="audit"] { left: 89.9%; top: 42.53%; }
.studio-station[data-studio-station="translate"] { left: 89.9%; top: 61%; }
.studio-station[data-studio-station="publish"] { left: 89.9%; top: 78.68%; }
.studio-station[data-studio-station="specs"] { --avatar-shirt: #5379d5; }
.studio-station[data-studio-station="write-Researching"], .studio-station[data-studio-station="write-Writing"] { --avatar-shirt: #8b5bc8; }
.studio-station[data-studio-station="write-Planning"], .studio-station[data-studio-station="write-Editing"] { --avatar-shirt: #2e9d8d; }
.studio-station[data-studio-station="write-Outlining"], .studio-station[data-studio-station="write-Polishing"] { --avatar-shirt: #cf6a68; }
.studio-station[data-studio-station="write-Drafting"], .studio-station[data-studio-station="learning"] { --avatar-shirt: #cc8c35; }
.studio-station[data-studio-station="review"] { --avatar-shirt: #7d62c9; }
.studio-station[data-studio-station="lawyer"] { --avatar-shirt: #9a6a3a; }
.studio-station[data-studio-station="approve"] { --avatar-shirt: #3b86bf; }
.studio-station[data-studio-station="audit"] { --avatar-shirt: #176d72; }
.studio-station[data-studio-station="translate"] { --avatar-shirt: #b05d94; }
.studio-station[data-studio-station="publish"] { --avatar-shirt: #d17d3f; }
.studio-briefing-table { position: absolute; left: 3.7%; bottom: 8%; width: 8.5%; height: 11%; }
.studio-briefing-table span { position: absolute; z-index: 2; left: 20%; right: 20%; top: 19%; bottom: 17%;
  border: 2px solid #9b744f; border-radius: 50%; background: radial-gradient(circle at 42% 35%,#b88a5c,#67472f 72%);
  box-shadow: 0 5px 0 #3f2c24,0 9px 14px rgba(0,0,0,.25); }
.studio-briefing-table span::after { content: ""; position: absolute; left: 44%; top: 29%; width: 12%; height: 18%;
  border-radius: 50%; background: #dfeaf1; box-shadow: 0 0 0 2px #6b8192; }
.studio-briefing-table i { position: absolute; top: 22%; width: 23%; height: 55%; border: 2px solid #1d3043;
  border-radius: 7px 7px 10px 10px; background: #3c566e; box-shadow: 0 4px 0 #16283a; }
.studio-briefing-table i:nth-of-type(1) { left: 0; transform: rotate(-7deg); }
.studio-briefing-table i:nth-of-type(2) { right: 0; transform: rotate(7deg); }
.studio-briefing-table b { position: absolute; z-index: 3; left: 38%; top: 12%; width: 24%; height: 28%;
  border: 1px solid #aac2d2; border-radius: 2px; background: #eef6fb; transform: rotate(-8deg); }
.studio-floor-lamp { position: absolute; left: 16.9%; bottom: 8%; width: 20px; height: 55px; }
.studio-floor-lamp::before { content: ""; position: absolute; left: 9px; top: 12px; bottom: 5px; width: 2px; background: #71869a; }
.studio-floor-lamp i { position: absolute; z-index: 2; left: 2px; top: 0; width: 17px; height: 15px; border-radius: 50% 50% 4px 4px;
  background: #e3b960; box-shadow: 0 0 17px rgba(227,185,96,.28); }
.studio-floor-lamp span { position: absolute; left: 3px; bottom: 0; width: 16px; height: 5px; border-radius: 50%; background: #354b60; }
.studio-recycle-bin { position: absolute; right: 18.1%; bottom: 7.5%; width: 19px; height: 24px;
  border: 2px solid #60798e; border-radius: 3px 3px 7px 7px; background: repeating-linear-gradient(90deg,#263d51 0 3px,#3c566c 3px 5px); }
.studio-recycle-bin i { position: absolute; left: -3px; right: -3px; top: -4px; height: 4px; border-radius: 3px; background: #8297a9; }
.studio-couch { position: absolute; left: 28.5%; bottom: 6.8%; width: 13%; height: 8%;
  border: 2px solid #294057; border-radius: 8px 8px 5px 5px; background: linear-gradient(180deg,#54728d,#314b64);
  box-shadow: 0 6px 0 #1c2f43,0 10px 14px rgba(0,0,0,.22); }
.studio-couch::before,.studio-couch::after { content: ""; position: absolute; bottom: -8px; width: 5px; height: 8px; border-radius: 0 0 2px 2px; background: #1a2939; }
.studio-couch::before { left: 10%; } .studio-couch::after { right: 10%; }
.studio-couch i { position: absolute; top: 18%; width: 36%; height: 55%; border: 1px solid rgba(255,255,255,.12); border-radius: 5px; background: #63809a; }
.studio-couch i:first-of-type { left: 8%; } .studio-couch i:nth-of-type(2) { right: 8%; }
.studio-couch span { position: absolute; left: 47%; top: 14%; width: 6%; height: 62%; border-radius: 3px; background: #2b455e; }
.studio-vending-machine { position: absolute; left: 53.7%; bottom: 6.5%; width: 4.2%; height: 13%; padding: 4px;
  border: 2px solid #294156; border-radius: 5px; background: linear-gradient(145deg,#56758b,#263e55 70%);
  box-shadow: 0 7px 12px rgba(0,0,0,.25); }
.studio-vending-machine i { position: absolute; left: 13%; right: 13%; top: 9%; height: 48%; border: 1px solid #89aabd; border-radius: 3px;
  background: repeating-linear-gradient(90deg,#d46d67 0 5px,#e4b768 5px 10px,#5eb59b 10px 15px); opacity: .9; }
.studio-vending-machine span { position: absolute; left: 13%; right: 35%; bottom: 12%; height: 15%; border-radius: 2px; background: #14283b; }
.studio-vending-machine b { position: absolute; right: 12%; bottom: 13%; width: 12%; height: 12%; border-radius: 50%; background: #71dfd3; box-shadow: 0 0 7px rgba(113,223,211,.7); }
.studio-printer { position: absolute; left: 62.7%; bottom: 7%; width: 3.4%; height: 9%; border-radius: 5px;
  background: linear-gradient(145deg,#dfe8ef,#697f92); box-shadow: 0 6px 8px rgba(0,0,0,.24); }
.studio-printer i { position: absolute; left: 16%; right: 16%; top: -13%; height: 24%; border-radius: 2px; background: #f6fbff; }
.studio-printer span { position: absolute; left: 50%; bottom: 7%; transform: translateX(-50%); color: #152638; font-size: 5px; font-weight: 900; }
.studio-coffee-bar { position: absolute; right: 1.8%; bottom: 1%; width: 14%; height: 5%; border-radius: 6px;
  background: linear-gradient(180deg,#875f42,#493126); box-shadow: 0 5px 0 #2b2220; }
.studio-coffee-bar i { position: absolute; bottom: 55%; width: 12px; height: 13px; border-radius: 3px 3px 6px 6px; background: #e9f0f4; }
.studio-coffee-bar i:first-child { left: 18%; } .studio-coffee-bar i:nth-child(2) { left: 34%; background: #e1ae68; }
.studio-coffee-bar span { position: absolute; right: 12%; bottom: 53%; width: 18px; height: 25px; border-radius: 5px; background: #394d5d; }
.studio-server-rack { position: absolute; right: 2.4%; top: 21.26%; display: grid; gap: 3px; width: 3.5%; height: 15%;
  padding: 4px; border-radius: 5px; background: #172536; box-shadow: 0 6px 12px rgba(0,0,0,.25); }
.studio-server-rack i { border-radius: 2px; background: linear-gradient(90deg,#273d52 65%,#40d6c8 65% 72%,#273d52 72%); }
.studio-plant { position: absolute; z-index: 2; width: 24px; height: 31px; }
.studio-plant span { position: absolute; left: 5px; bottom: 0; width: 15px; height: 13px; border-radius: 3px 3px 7px 7px; background: #b16e45; }
.studio-plant i, .studio-plant i::before, .studio-plant i::after { position: absolute; width: 13px; height: 18px; border-radius: 70% 20% 70% 20%; background: #3e9d68; }
.studio-plant i { left: 5px; top: 1px; } .studio-plant i::before, .studio-plant i::after { content: ""; }
.studio-plant i::before { left: -7px; top: 5px; transform: rotate(-42deg); } .studio-plant i::after { right: -7px; top: 3px; transform: rotate(42deg); }
.plant-a { left: 13.6%; top: 29.74%; } .plant-b { left: 65.3%; bottom: 19%; } .plant-c { right: 17.2%; top: 28.8%; }
.studio-office-artifact { z-index: 4; pointer-events: auto; cursor: help; outline: none; }
.studio-office-artifact:hover, .studio-office-artifact:focus, .studio-office-artifact:focus-visible { z-index: 30; }
.studio-office-artifact:focus-visible { filter: brightness(1.14); outline: 2px solid rgba(255,255,255,.88); outline-offset: 3px; }
.studio-artifact-tooltip { position: absolute; z-index: 60; left: 50%; bottom: calc(100% + 8px); display: block; width: max-content; max-width: 190px;
  transform: translate(-50%,4px); padding: 6px 8px; border: 1px solid rgba(129,205,226,.34); border-radius: 7px;
  color: #eaf4ff; background: rgba(4,18,32,.97); box-shadow: 0 8px 18px rgba(0,0,0,.34);
  font-size: 8px; font-style: normal; font-weight: 650; line-height: 1.35; text-align: center; white-space: normal;
  opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .15s,transform .15s; }
.studio-office-artifact:hover > .studio-artifact-tooltip,
.studio-office-artifact:focus > .studio-artifact-tooltip,
.studio-office-artifact:focus-visible > .studio-artifact-tooltip { opacity: 1; visibility: visible; transform: translate(-50%,0); }
.studio-briefing-table > .studio-artifact-tooltip { left: 0; transform: translateY(4px); text-align: left; }
.studio-briefing-table:hover > .studio-artifact-tooltip,
.studio-briefing-table:focus > .studio-artifact-tooltip,
.studio-briefing-table:focus-visible > .studio-artifact-tooltip { transform: translateY(0); }
.studio-server-rack > .studio-artifact-tooltip { right: 0; left: auto; transform: translateY(4px); text-align: right; }
.studio-server-rack:hover > .studio-artifact-tooltip,
.studio-server-rack:focus > .studio-artifact-tooltip,
.studio-server-rack:focus-visible > .studio-artifact-tooltip { transform: translateY(0); }
.studio-language-grid { position: absolute; z-index: 12; left: 50%; top: calc(100% + 2px); display: grid;
  grid-template-columns: repeat(var(--studio-language-columns, 6), 34px); justify-content: center; gap: 2px; width: 178%;
  transform: translateX(-50%); pointer-events: none; }
.studio-language { display: inline-flex; min-width: 0; align-items: center; justify-content: center; gap: 3px; padding: 1px 3px;
  border: 1px solid rgba(255,255,255,.3); border-radius: 99px; color: #d6e1ed;
  background: rgba(6,20,35,.8); backdrop-filter: blur(7px); font-size: clamp(6px, .42vw, 7.5px); font-weight: 800; line-height: 1; }
.studio-language.language-queued { color: #c5d0dd; border-color: #75899f; }
.studio-language.language-active { color: #89f0e6; border-color: #5dd7cc; }
.studio-language.language-done { color: #8ee0ad; border-color: #70c997; }
.studio-language.language-failed { color: #ffabb0; border-color: #e8797f; }
.studio-language-empty { color: #c5d0dd; font-size: clamp(6px, .42vw, 7.5px); font-weight: 650; text-align: center; }
.studio-mobile-hint { display: none; }

.studio-agent-inspector { display: grid; grid-template-columns: auto auto auto minmax(0,1fr) auto; align-items: center; gap: 8px 12px;
  min-height: 46px; padding: 8px 14px; border-top: 1px solid rgba(255,255,255,.1); color: #dfeaf7; background: #0b1d31; }
.studio-inspector-orb { width: 10px; height: 10px; border-radius: 50%; background: #91a5bb; box-shadow: 0 0 0 4px rgba(145,165,187,.12); }
.studio-agent-inspector[data-state="active"] .studio-inspector-orb,
.studio-agent-inspector[data-state="working"] .studio-inspector-orb { background: #29c4f0; box-shadow: 0 0 0 4px rgba(41,196,240,.15), 0 0 14px rgba(41,196,240,.5); }
.studio-agent-inspector[data-state="reasoning"] .studio-inspector-orb { background: #aa8cff; box-shadow: 0 0 0 4px rgba(170,140,255,.16), 0 0 14px rgba(170,140,255,.55); }
.studio-agent-inspector[data-state="final"] .studio-inspector-orb { background: #f0c85a; box-shadow: 0 0 0 4px rgba(240,200,90,.16), 0 0 14px rgba(240,200,90,.55); }
.studio-agent-inspector[data-state="done"] .studio-inspector-orb { background: #4aa36f; }
.studio-agent-inspector[data-state="attention"] .studio-inspector-orb { background: #f3b34c; box-shadow: 0 0 14px rgba(243,179,76,.5); }
.studio-agent-inspector[data-state="failed"] .studio-inspector-orb { background: #ee6269; }
.studio-agent-inspector strong { font-size: 11.5px; white-space: nowrap; }
.studio-inspector-state { padding: 3px 7px; border: 1px solid rgba(255,255,255,.16); border-radius: 99px; color: #b9cadc; font-size: 9px; font-weight: 800; text-transform: uppercase; }
.studio-inspector-note { min-width: 0; color: #93a7bd; font-size: 10.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.studio-legend { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; padding: 0;
  border: 0; color: #b7c5d7; background: transparent; font-size: 9px; }
.studio-inspector-legend { justify-self: end; justify-content: flex-end; }
.studio-legend > span { display: inline-flex; align-items: center; gap: 5px; }
.studio-legend i { display: inline-block; width: 7px; height: 7px; border-radius: 50%; }
.studio-legend .legend-active { background: #29c4f0; }
.studio-legend .legend-reasoning { background: #aa8cff; }
.studio-legend .legend-final { background: #f0c85a; }
.studio-legend .legend-done { background: #4aa36f; }
.studio-legend .legend-waiting { background: #8291a5; }

/* Editorial Floor v2: embedded telemetry, automatic focus and clearer relay order. */
.studio-auto-follow { display: inline-flex; align-items: center; gap: 7px; color: #92a8bd;
  font-size: 10px; font-weight: 700; }
.studio-auto-follow i { width: 7px; height: 7px; border-radius: 50%; background: #36d9c9;
  box-shadow: 0 0 10px rgba(54,217,201,.75); }
.studio-live-telemetry { position: absolute; z-index: 18; left: 2%; right: 2%; top: 1.6%;
  overflow: hidden; border: 1px solid rgba(129,205,226,.3); border-radius: 11px;
  background: linear-gradient(115deg,rgba(11,37,59,.97),rgba(13,27,48,.96));
  box-shadow: 0 10px 24px rgba(1,9,18,.32), inset 0 1px rgba(255,255,255,.06); }
.studio-live-command { position: relative; min-height: 44px;
  display: grid; grid-template-columns: auto minmax(300px,.88fr) minmax(385px,1.22fr); align-items: center; gap: 8px 13px;
  padding: 6px 11px; }
.studio-command-signal { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px;
  background: rgba(130,150,174,.12); }
.studio-command-signal i { width: 8px; height: 8px; border-radius: 50%; background: #8291a5; }
.studio-command-signal.is-live { background: rgba(54,217,201,.12); box-shadow: inset 0 0 0 1px rgba(54,217,201,.25); }
.studio-live-command .spinner { border-color: rgba(103,234,222,.25); border-top-color: #67eade; }
.studio-command-copy { min-width: 0; display: grid; gap: 2px; }
.studio-command-copy > span { color: #6bded4; font-size: 8px; font-weight: 850; letter-spacing: .14em; text-transform: uppercase; }
.studio-live-command .run-now-agent { overflow: hidden; color: #f1f7ff; font-size: clamp(10px,1vw,13px); line-height: 1.25;
  text-overflow: ellipsis; white-space: nowrap; }
.studio-live-command .run-live-dot { color: #73e9df; }
.studio-runtime-strip { min-width: 0; justify-self: stretch; margin: 0; padding: 2px 0 2px 13px;
  overflow: hidden; border: 0; border-left: 1px solid rgba(129,205,226,.24); border-radius: 0;
  color: #aebfd1; background: transparent; text-overflow: ellipsis; white-space: nowrap;
  font-size: 9.5px; font-variant-numeric: tabular-nums; line-height: 1.35; }
.studio-runtime-strip:empty { display: none; }
.studio-token-rail { min-height: 31px; display: flex; align-items: center; gap: 9px;
  padding: 4px 11px; border-top: 1px solid rgba(129,205,226,.22);
  background: rgba(4,17,31,.28); }
.studio-token-rail > .token-meter { flex: 1 1 auto; min-width: 0; }
.studio-token-rail > .managed-writing-chip { flex: 0 0 auto; }

.token-meter { min-width: 0; width: 100%; display: grid; grid-template-columns: auto minmax(120px,1fr) auto auto;
  grid-template-areas: "attempt track count cost" ". split split split";
  align-items: center; gap: 9px; color: var(--text-soft); font-size: 10px; font-variant-numeric: tabular-nums; }
.token-meter-attempt { grid-area: attempt; font-weight: 750; white-space: nowrap; }
.token-meter-track { position: relative; display: flex; height: 7px; overflow: hidden; border-radius: 99px;
  grid-area: track;
  background: #d9e0e9; box-shadow: inset 0 1px 2px rgba(0,0,0,.13); }
.token-meter-track > i { display: block; height: 100%; transition: width .35s ease; }
.token-meter-budget { position: absolute; z-index: 2; top: -2px; bottom: -2px; width: 2px;
  margin-left: -1px; background: currentColor; opacity: .9; box-shadow: 0 0 0 1px rgba(255,255,255,.7); }
.token-meter-reasoning { background: #9b78eb; }
.token-meter-answer { background: #e7b93f; }
.token-meter-count { grid-area: count; white-space: nowrap; }
.token-meter-count b { margin-left: 3px; color: var(--text); }
.token-meter-cost { grid-area: cost; color: #2f9c77; font-weight: 850; white-space: nowrap; }
.token-meter-cost small { margin-right: 2px; font-size: 8px; font-weight: 750; letter-spacing: .05em; text-transform: uppercase; opacity: .72; }
.token-meter-cost-unpriced { color: var(--text-faint); font-weight: 650; }
.token-meter-factory .token-meter-cost { color: #73e9bd; }
.token-meter-factory .token-meter-cost-unpriced { color: #7f94a8; }
.token-meter-split { grid-area: split; justify-self: end; display: inline-flex; align-items: center; gap: 9px; white-space: nowrap; color: var(--text-faint); }
/* Each half keeps its own colour — purple for reasoning, amber for the final
   answer — so the legend still reads as a legend. Which one is live is shown by
   weight and opacity, not by recolouring both halves to the live phase's hue. */
.tms-part { display: inline-flex; align-items: center; gap: 4px; opacity: .68; transition: opacity .2s ease; }
.tms-part.is-live { opacity: 1; font-weight: 800; }
.tms-reasoning { color: #8063c7; }
.tms-answer { color: #9a7312; }
.tms-budget { color: var(--text-faint); }
.token-meter-factory .tms-reasoning { color: #c2afff; }
.token-meter-factory .tms-answer { color: #f2d374; }
.tms-reasoning i { background: #9b78eb; }
.tms-answer i { background: #e7b93f; }
.token-meter-split i { width: 6px; height: 6px; border-radius: 50%; background: #9b78eb; }
/* Factory's meter sits in a full-width rail of its own, so it reads as one line:
   the bar gives up width to the labels instead of pushing the reasoning/final
   split onto a second row and doubling the rail's height. The narrow-screen rule
   further down still stacks it, where one line genuinely does not fit. */
.token-meter.token-meter-factory {
  grid-template-columns: auto minmax(40px, 1fr) auto auto auto;
  grid-template-areas: "attempt track count cost split"; }
.token-meter-factory { color: #b8c9d9; }
.token-meter-factory .token-meter-track { background: rgba(126,146,169,.25); box-shadow: inset 0 1px 2px rgba(0,0,0,.35); }
.token-meter-factory .token-meter-attempt, .token-meter-factory .token-meter-count b { color: #eef6ff; }
.token-meter-factory .token-meter-split { color: #94a9bd; }
.token-meter-placeholder { opacity: .76; }
.token-meter-placeholder .token-meter-track { background: repeating-linear-gradient(135deg,rgba(126,146,169,.16) 0 6px,rgba(126,146,169,.08) 6px 12px); }
.token-meter-placeholder .token-meter-count { color: #aebfd1; }

.token-usage-compact { display: flex; flex-wrap: wrap; gap: 5px 13px; margin-top: 8px; padding: 6px 9px;
  border: 1px solid var(--border); border-radius: 8px; background: var(--surface-2); color: var(--text-soft);
  font-size: 10px; font-variant-numeric: tabular-nums; }
.token-usage-compact span { white-space: nowrap; }
.cost-usage-compact { display: flex; flex-wrap: wrap; gap: 5px 13px; margin-top: 6px; padding: 6px 9px;
  border: 1px solid color-mix(in srgb,var(--ok) 35%,var(--border)); border-radius: 8px;
  background: color-mix(in srgb,var(--ok) 7%,var(--surface-2)); color: var(--text-soft);
  font-size: 10px; font-variant-numeric: tabular-nums; }
.cost-usage-compact span { white-space: nowrap; }
.cost-usage-compact strong, .project-cost-badge { color: #2f7d60; }
/* What one agent-produced thing cost: a calendar proposal, a Brain revision.
   Wraps rather than clipping — the detail line carries token counts. */
.agent-cost-line { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline;
  margin-top: 12px; padding: 7px 10px; border: 1px solid color-mix(in srgb,var(--ok) 35%,var(--border));
  border-radius: 8px; background: color-mix(in srgb,var(--ok) 7%,var(--surface-2));
  color: var(--text-soft); font-size: 11px; font-variant-numeric: tabular-nums; }
.agent-cost-line strong { color: #2f7d60; }
.agent-cost-line.is-warning { border-color: color-mix(in srgb,var(--warn) 45%,var(--border));
  background: color-mix(in srgb,var(--warn) 9%,var(--surface-2)); }
.agent-cost-line.is-warning strong { color: var(--warn); }
.token-split-reasoning::before, .token-split-answer::before { content: ""; display: inline-block; width: 6px; height: 6px;
  margin-right: 4px; border-radius: 50%; vertical-align: 1px; background: #9b78eb; }
.token-split-answer::before { background: #e7b93f; }
/* Cached input is a saving, so it reads as one — and its "none" state stays
   deliberately quiet: a miss is normal on a first request and must not look
   like a fault. */
.token-split-cached::before { content: ""; display: inline-block; width: 6px; height: 6px;
  margin-right: 4px; border-radius: 50%; vertical-align: 1px; background: #4bb18a; }
.token-split-cached { color: #2f7d60; }
.token-split-cached-miss { color: var(--text-faint); }
.token-split-cached-miss::before { background: var(--border); }
.token-attempt-details { margin: 8px 0; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.token-attempt-details > summary { padding: 7px 9px; color: var(--text-soft); font-size: 11px; font-weight: 700; cursor: pointer; }
.token-attempt-row { display: grid; grid-template-columns: auto auto 1fr 1fr 1.4fr; align-items: center; gap: 6px 12px;
  padding: 7px 9px; border-top: 1px solid var(--border); color: var(--text-soft); font-size: 10px;
  font-variant-numeric: tabular-nums; }
.token-attempt-row > span:first-of-type { color: var(--text-faint); text-transform: capitalize; }

/* Keep the timeline and room titles stable; the deeper floor clears the desk hover labels and lowers the fixtures/footer. */
.studio-room { top: 25.69%; }
.studio-route-line { z-index: 16; top: 18.62%; }
.studio-route-point { position: absolute; left: var(--route-position); top: 50%; width: 1px; height: 1px; padding: 0;
  border: 0; color: #9fb2c7; background: transparent; font: inherit; cursor: help; }
.studio-route-point > i { left: 0 !important; width: 9px; height: 9px; box-sizing: border-box; border: 2px solid #718ba5; background: #10263a; box-shadow: 0 0 0 3px rgba(113,139,165,.08); }
.studio-route-point.route-reached > i { border-color: #91eee5; background: #2ecfbe; box-shadow: 0 0 10px rgba(46,207,190,.65); }
.studio-route-point.route-current > i { box-shadow: 0 0 0 4px rgba(46,207,190,.18),0 0 13px rgba(46,207,190,.72); }
.studio-route-point > span { position: absolute; top: 10px; left: 0; transform: translateX(-50%); color: inherit;
  font-size: 7px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.studio-route-point > b { position: absolute; z-index: 40; left: 0; top: 23px; width: 190px;
  transform: translate(-50%,4px); padding: 7px 9px; border: 1px solid rgba(129,205,226,.34); border-radius: 8px;
  color: #eaf4ff; background: rgba(4,18,32,.98); box-shadow: 0 9px 22px rgba(0,0,0,.38);
  font-size: 9px; font-weight: 600; line-height: 1.4; text-align: left; text-transform: none;
  opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .15s,transform .15s; }
.studio-route-point:first-child > b { transform: translate(-12%,4px); }
.studio-route-point:last-child > b { transform: translate(-88%,4px); }
.studio-route-point:hover > b, .studio-route-point:focus-visible > b { opacity: 1; visibility: visible; transform: translate(-50%,0); }
.studio-route-point:first-child:hover > b, .studio-route-point:first-child:focus-visible > b { transform: translate(-12%,0); }
.studio-route-point:last-child:hover > b, .studio-route-point:last-child:focus-visible > b { transform: translate(-88%,0); }
.studio-route-point:focus-visible { outline: 2px solid #fff; outline-offset: 7px; }
.studio-dossier-runner { top: calc(18.62% + 1.5px); }

.studio-station.station-active::after, .studio-station.station-attention::after, .studio-station.station-failed::after,
.studio-station.is-selected::after { border-color: var(--station-color); box-shadow: 0 0 0 3px color-mix(in srgb,var(--station-color) 20%,transparent),0 0 26px color-mix(in srgb,var(--station-color) 38%,transparent); }
.studio-station[data-studio-open-live="1"] { cursor: zoom-in; }
.studio-station[data-studio-open-live="1"] .studio-agent-label { box-shadow: 0 0 0 1px var(--station-color),0 7px 20px rgba(0,0,0,.35); }
.studio-sequence { display: inline-grid; place-items: center; min-width: 13px; height: 13px; margin-right: 4px;
  border: 1px solid rgba(255,255,255,.3); border-radius: 50%; color: #dce8f5; font-size: 7px; }
.studio-run-count { margin-left: 4px; padding: 1px 4px; border: 1px solid color-mix(in srgb,var(--station-color) 55%,transparent);
  border-radius: 99px; color: color-mix(in srgb,var(--station-color) 75%,white); font-size: 7px; font-variant-numeric: tabular-nums; }
.studio-station[data-studio-station="specs"] .studio-agent-task { left: 25%; transform: translateY(4px); text-align: left; }
.studio-station[data-studio-station="specs"]:hover .studio-agent-task,
.studio-station[data-studio-station="specs"]:focus-visible .studio-agent-task { transform: translateY(0); }
.studio-station[data-studio-station="write-Researching"] .studio-agent-task,
.studio-station[data-studio-station="write-Planning"] .studio-agent-task,
.studio-station[data-studio-station="write-Outlining"] .studio-agent-task,
.studio-station[data-studio-station="write-Drafting"] .studio-agent-task,
.studio-station[data-studio-station="review"] .studio-agent-task,
.studio-station[data-studio-station="translate"] .studio-agent-task { bottom: calc(100% - 2px); }
.studio-station[data-studio-station="learning"] .studio-agent-label { min-width: 72%; max-width: 106%; padding-inline: 4px; }
.studio-next-badge { position: absolute; z-index: 12; right: -7px; bottom: 26px; padding: 2px 6px;
  border: 1px solid #f3c269; border-radius: 99px; color: #172333; background: #f3c269;
  box-shadow: 0 0 12px rgba(243,194,105,.42); font-size: 6.5px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.station-next::after { border-color: rgba(243,194,105,.48); border-style: dashed; }

/* Every character is seen from behind, seated toward the monitor. */
.studio-keyboard { bottom: 9%; width: 43%; height: 13%; border-color: #172b40; background: repeating-linear-gradient(90deg,#c8d4de 0 3px,#52697d 3px 4px); box-shadow: 0 1px 2px rgba(0,0,0,.35); }
.studio-mouse { left: 75%; bottom: 7%; width: 9%; height: 17%; background: #c1ced9; }
.studio-game-avatar { top: 49%; }
.studio-avatar-head { background: linear-gradient(145deg,#c6d2dc,#61798c 60%,#354c60); }
.studio-avatar-visor { left: 7px; right: 7px; top: 6px; height: 8px; border-radius: 3px;
  background: #334b60; box-shadow: inset 0 0 0 1px rgba(255,255,255,.15); }
.studio-avatar-visor::before { left: 4px; right: 4px; top: 3px; width: auto; height: 2px; border-radius: 2px;
  background: var(--station-color); box-shadow: none; opacity: .85; }
.studio-avatar-visor::after { display: none; }
.studio-avatar-arm { top: -9px; height: 29px; }
.studio-avatar-ear,.studio-avatar-tail { display: none; }

.studio-avatar-male .studio-avatar-antenna,.studio-avatar-female .studio-avatar-antenna,
.studio-avatar-cat .studio-avatar-antenna,.studio-avatar-dog .studio-avatar-antenna { display: none; }
.studio-avatar-male .studio-avatar-visor,.studio-avatar-female .studio-avatar-visor,
.studio-avatar-cat .studio-avatar-visor,.studio-avatar-dog .studio-avatar-visor { display: none; }
.studio-avatar-male .studio-avatar-head,.studio-avatar-female .studio-avatar-head { border-color: #43372f; border-radius: 45% 45% 38% 38%; background: linear-gradient(180deg,#2f2928 0 42%,#b98261 43%); }
.studio-avatar-female .studio-avatar-head::after { content: ""; position: absolute; z-index: -1; left: -6px; right: -6px; top: 1px; height: 34px;
  border: 2px solid #43372f; border-radius: 48% 48% 30% 30%; background: linear-gradient(105deg,#2f2928,#4a302a 52%,#2f2928); }
.studio-avatar-cat .studio-avatar-head { border-color: #675f75; border-radius: 48% 48% 43% 43%; background: linear-gradient(145deg,#d0c8dc,#80758f); }
.studio-avatar-dog .studio-avatar-head { border-color: #654b38; border-radius: 48% 48% 43% 43%; background: linear-gradient(145deg,#c89568,#765136); }
.studio-avatar-cat .studio-avatar-ear,.studio-avatar-dog .studio-avatar-ear { display: block; position: absolute; top: -8px; width: 11px; height: 13px; border: 2px solid #675f75; background: #aaa0ba; }
.studio-avatar-cat .ear-left { left: -1px; clip-path: polygon(50% 0,100% 100%,0 100%); }
.studio-avatar-cat .ear-right { right: -1px; clip-path: polygon(50% 0,100% 100%,0 100%); }
.studio-avatar-dog .studio-avatar-ear { top: -2px; height: 18px; border-color: #654b38; border-radius: 60% 35% 70% 50%; background: #765136; }
.studio-avatar-dog .ear-left { left: -7px; transform: rotate(18deg); }
.studio-avatar-dog .ear-right { right: -7px; transform: rotate(-18deg); }
.studio-avatar-cat .studio-avatar-tail,.studio-avatar-dog .studio-avatar-tail { display: block; position: absolute; z-index: 1; right: -1px; bottom: 7px; width: 15px; height: 19px; border: 4px solid #8d829d; border-left: 0; border-bottom: 0; border-radius: 0 16px 0 0; transform: rotate(16deg); }
.studio-avatar-dog .studio-avatar-tail { right: 1px; width: 12px; height: 15px; border-color: #8d6547; transform: rotate(35deg); }

.studio-floor-action { padding: 14px 16px; border-top: 1px solid rgba(255,255,255,.1); color: #24364a; background: linear-gradient(145deg,#fffaf0,#f7ead0); }
.studio-floor-action.is-failed { background: linear-gradient(145deg,#fff6f6,#f8dddd); }
.studio-floor-action .run-gate { margin: 0; border: 0; background: transparent; }
.studio-floor-action textarea { background: rgba(255,255,255,.82); }
.studio-transcript-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.studio-transcript-head .studio-kicker { color: var(--brand); }
.studio-transcript-status { flex: none; }
.studio-transcript-status.is-ended { color: #397a55; background: #e7f5ed; border-color: #b9ddc8; }
.studio-transcript { max-height: min(60vh,560px); margin: 14px 0 0; padding: 16px; overflow: auto;
  border: 1px solid var(--border); border-radius: var(--radius); color: #334155; background: #f8fafc;
  white-space: pre-wrap; overflow-wrap: anywhere; font: 12.5px/1.6 var(--font-mono); }

/* Account avatar picker uses the same five silhouettes as the You desk. */
.account-avatar-picker { display: grid; grid-template-columns: repeat(5,minmax(72px,1fr)); gap: 8px; margin-top: 8px; }
.account-avatar-option { position: relative; display: grid; justify-items: center; gap: 5px; padding: 10px 5px 7px;
  border: 1px solid var(--border); border-radius: 10px; color: var(--text-muted); background: var(--surface-2); cursor: pointer; font-size: 11px; font-weight: 700; }
.account-avatar-option:has(input:checked) { border-color: var(--accent); color: var(--brand); background: var(--accent-soft); box-shadow: 0 0 0 2px color-mix(in srgb,var(--accent) 18%,transparent); }
.account-avatar-option:has(input:focus-visible) { outline: 3px solid color-mix(in srgb,var(--accent) 48%,transparent); outline-offset: 2px; }
.account-avatar-option input { position: absolute; opacity: 0; }
.account-avatar { position: relative; display: inline-block; width: 38px; height: 42px; }
.account-avatar-head { position: absolute; z-index: 2; left: 50%; top: 1px; width: 25px; height: 22px; transform: translateX(-50%); border: 2px solid #4a6074; border-radius: 8px; background: linear-gradient(145deg,#d0dbe3,#667e91); }
.account-avatar-back { position: absolute; left: 50%; bottom: 1px; width: 30px; height: 24px; transform: translateX(-50%); border: 2px solid #3a5368; border-radius: 8px 8px 11px 11px; background: #527cc3; }
.account-avatar-head::after { content: ""; position: absolute; left: 5px; right: 5px; top: 8px; height: 4px; border-radius: 2px; background: #2f475b; }
.account-avatar-ear,.account-avatar-tail { display: none; position: absolute; }
.account-avatar.avatar-male .account-avatar-head,.account-avatar.avatar-female .account-avatar-head { border-color: #49382f; border-radius: 48%; background: linear-gradient(180deg,#302827 0 42%,#b98261 43%); }
.account-avatar.avatar-female::before { content: ""; position: absolute; z-index: 1; left: 50%; top: 1px; width: 31px; height: 36px;
  transform: translateX(-50%); border: 2px solid #49382f; border-radius: 48% 48% 30% 30%; background: linear-gradient(105deg,#302827,#4a302a 52%,#302827); }
.account-avatar.avatar-male .account-avatar-head::after,.account-avatar.avatar-female .account-avatar-head::after,
.account-avatar.avatar-cat .account-avatar-head::after,.account-avatar.avatar-dog .account-avatar-head::after { display: none; }
.account-avatar.avatar-cat .account-avatar-head { border-color: #675f75; border-radius: 48%; background: #a89cb9; }
.account-avatar.avatar-dog .account-avatar-head { border-color: #654b38; border-radius: 48%; background: #b98055; }
.account-avatar.avatar-cat .account-avatar-ear,.account-avatar.avatar-dog .account-avatar-ear { display: block; z-index: 3; top: -3px; width: 10px; height: 12px; background: #a89cb9; }
.account-avatar.avatar-cat .ear-left { left: 5px; clip-path: polygon(50% 0,100% 100%,0 100%); }
.account-avatar.avatar-cat .ear-right { right: 5px; clip-path: polygon(50% 0,100% 100%,0 100%); }
.account-avatar.avatar-dog .account-avatar-ear { top: 4px; height: 17px; border-radius: 70%; background: #775239; }
.account-avatar.avatar-dog .ear-left { left: 2px; transform: rotate(20deg); }
.account-avatar.avatar-dog .ear-right { right: 2px; transform: rotate(-20deg); }
.account-avatar-small { width: 26px; height: 29px; transform: scale(.72); transform-origin: center; }
.account-avatar-table { display: inline-flex; align-items: center; gap: 2px; color: var(--text-muted); font-size: 10px; }

@media (max-width: 900px) {
  .studio-floor { overflow-x: auto; overscroll-behavior-inline: contain; scrollbar-color: #53677e #071321; }
  .studio-scene { min-width: 1120px; scroll-snap-align: start; }
  .studio-mobile-hint { position: absolute; z-index: 9; left: 14px; bottom: 12px; display: block;
    padding: 6px 9px; border: 1px solid rgba(255,255,255,.28); border-radius: 99px;
    color: #fff; background: rgba(5,19,34,.78); backdrop-filter: blur(8px); font-size: 9px; font-weight: 700; }
  .studio-agent-inspector { grid-template-columns: auto auto auto; }
  .studio-inspector-note { grid-column: 2 / -1; white-space: normal; }
  .studio-inspector-legend { grid-column: 1 / -1; justify-self: stretch; justify-content: flex-end; }
}
@media (max-width: 620px) {
  .studio-stage-head { align-items: flex-start; flex-direction: column; gap: 9px; padding: 14px 15px; }
  .studio-stage-title { font-size: 16px; }
  .studio-game-toolbar { align-items: flex-start; flex-direction: column; }
  .studio-scene { min-width: 1080px; }
  .studio-workspace { gap: 11px; }
  .account-avatar-picker { grid-template-columns: repeat(3,minmax(72px,1fr)); }
}

.run-timeline { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-bottom: 4px; }
/* Bigger, premium workflow chips. */
.run-pill { font-weight: 650; font-size: 12.5px; padding: 5px 12px; border-radius: 99px;
  border: 1px solid var(--border-strong); box-shadow: var(--shadow-sm); letter-spacing: .005em; }
.run-pill.badge-ok { border-color: #bfe4cf; }
.run-pill.badge-warn { border-color: #e6c07a; }
.run-pill-now { animation: run-pulse 1.5s ease-in-out infinite; }
.run-progress { font-weight: 650; color: var(--brand); }
@keyframes run-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(217, 138, 42, 0.45); }
  50% { box-shadow: 0 0 0 6px rgba(217, 138, 42, 0); }
}
/* "Which agent is working right now" line + its live streaming output. */
.run-now { display: flex; align-items: center; gap: 10px; margin: 12px 0 4px; padding-left: 10px; }
.run-now-agent { font-weight: 650; color: var(--brand); font-size: 14px; }
.run-live-dot { color: var(--accent-dark); font-weight: 600; font-size: 12px; margin-left: 4px; }
/* Live, factual first-token status shared by playbook and manual agent runs. */
.runtime-wait-status { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 7px;
  width: fit-content; max-width: 100%; box-sizing: border-box; overflow-wrap: anywhere;
  color: var(--text-muted); font-size: 12px; font-weight: 550; line-height: 1.35;
  font-variant-numeric: tabular-nums; padding: 6px 10px; border: 1px solid var(--border);
  border-radius: 99px; background: var(--surface-2); box-shadow: var(--shadow-sm); }
.runtime-wait-status::before { content: "⏳"; display: inline-block; font-size: 13px;
  animation: runtime-hourglass 1.5s ease-in-out infinite; }
.runtime-wait-status:empty { display: none; }
.translation-runtime { margin-top: 7px; max-width: 760px; }
.translation-runtime-complete { margin-top: 5px; }
.run-wait-note { margin: 3px 0 4px; min-height: 0; }
.runtime-wait-inline { margin: 0; }
.agent-reasoning { margin: 8px 0; border: 1px solid #cbd5e1; border-radius: var(--radius-sm);
  background: #f8fafc; color: var(--text-muted); overflow: hidden; }
.agent-reasoning summary { cursor: pointer; padding: 8px 11px; font-size: 12px; font-weight: 650;
  color: #526174; user-select: none; }
.agent-reasoning summary::before { content: "🧠"; margin-right: 7px; }
.agent-reasoning[open] summary { border-bottom: 1px solid #dbe3ec; }
.agent-reasoning pre { margin: 0; padding: 10px 12px; max-height: 280px; overflow: auto;
  white-space: pre-wrap; overflow-wrap: anywhere; font: 12px/1.5 var(--font-mono);
  color: #64748b; background: rgba(255,255,255,.55); }
.live-reasoning { max-width: min(100%, 920px); }
.agent-final-label { margin: 10px 0 4px; color: var(--brand); font-size: 11px;
  font-weight: 750; letter-spacing: .055em; text-transform: uppercase; }
.agent-reasoning + .agent-final-answer { margin-top: 10px; }
@keyframes runtime-hourglass {
  0%, 100% { opacity: .65; transform: translateY(0); }
  50% { opacity: 1; transform: translateY(-1px); }
}
@media (prefers-reduced-motion: reduce) {
  .runtime-wait-status::before { animation: none; }
  .studio-live-beacon, .studio-dossier-runner span, .studio-dossier-runner i,
  .studio-game-avatar, .studio-avatar-arm, .studio-document-exchange, .studio-monitor i, .studio-mouse,
  .studio-avatar-visor::after, .studio-agent-cognition i { animation: none !important; }
  .studio-station { transition: none; }
}
.runtime-detail { margin: 10px 0; padding: 9px 11px; border: 1px solid var(--border);
  border-radius: var(--radius-sm); background: var(--surface-2); color: var(--text-muted); line-height: 1.55; }
.managed-writing-activity { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px;
  margin: 7px 0; padding: 6px 9px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface-2); color: var(--text-muted); font-size: 11.5px; line-height: 1.35; }
.managed-writing-activity strong { color: var(--text); }
.managed-writing-activity span:not(:last-child)::after { content: "·"; margin-left: 8px; color: var(--text-faint); }
.managed-writing-activity b { margin-left: auto; padding: 1px 7px; border-radius: 99px;
  background: var(--surface); color: var(--text-soft); font-size: 10.5px; text-transform: capitalize; }
.managed-writing-ok { border-color: color-mix(in srgb, var(--ok) 32%, var(--border)); }
.managed-writing-ok b { color: var(--ok); }
.managed-writing-warn { border-color: color-mix(in srgb, var(--warn) 40%, var(--border)); }
.managed-writing-warn b { color: var(--warn); }
.managed-writing-danger { border-color: color-mix(in srgb, var(--danger) 38%, var(--border)); }
.managed-writing-danger b { color: var(--danger); }
.managed-writing-fields { flex-basis: 100%; color: var(--text-faint); }
/* The live rail's compact form of the same report. It sits on the row rather
   than under it, so a writing agent's length work never covers the token
   figures or changes the height of the strip. */
.managed-writing-chip { display: inline-flex; align-items: center; gap: 6px; max-width: 42%;
  padding: 1px 8px; border: 1px solid rgba(126,146,169,.34); border-radius: 99px;
  background: rgba(9,26,44,.55); color: #aebfd1; font-size: 9.5px; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; cursor: help; }
.managed-writing-chip b { font-weight: 750; color: #eef6ff; text-transform: capitalize; }
.managed-writing-chip.managed-writing-ok { border-color: rgba(115,233,189,.42); }
.managed-writing-chip.managed-writing-ok b { color: #73e9bd; }
.managed-writing-chip.managed-writing-warn { border-color: rgba(242,211,116,.46); }
.managed-writing-chip.managed-writing-warn b { color: #f2d374; }
.managed-writing-chip.managed-writing-danger { border-color: rgba(255,138,138,.5); }
.managed-writing-chip.managed-writing-danger b { color: #ff9d9d; }
.run-phase { font-weight: 600; font-size: 11px; color: var(--accent-dark); background: #e3f7f4;
  border: 1px solid #c4ece6; border-radius: 99px; padding: 1px 8px; margin-left: 4px; vertical-align: middle; }
.run-live { max-height: 300px; overflow-y: auto; margin: 6px 0 2px; padding: 12px 14px;
  background: linear-gradient(180deg, var(--surface-2), var(--surface-3));
  border: 1px solid var(--border); border-radius: var(--radius); box-shadow: inset 0 1px 3px rgba(16,24,40,.05);
  white-space: pre-wrap; word-break: break-word; font-family: var(--mono); font-size: 12px; line-height: 1.6; color: var(--text-soft); }
.run-live:empty { display: none; }
.run-arrow { color: var(--text-faint); font-size: 12px; }
/* Write-relay sub-phases, drawn as a branch below the Write pill. */
.run-subphases { display: flex; align-items: flex-start; gap: 6px; margin: 5px 0 2px 14px; }
.run-sub-tail { width: 12px; height: 14px; flex: none; margin-top: -1px;
  border-left: 2px solid var(--border-strong); border-bottom: 2px solid var(--border-strong);
  border-bottom-left-radius: 7px; }
.run-subrow { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.run-subpill { font-size: 10.5px; font-weight: 650; letter-spacing: .01em; padding: 2px 8px;
  border-radius: 99px; border: 1px solid var(--border-strong); color: var(--text-faint);
  background: var(--surface); transition: all .18s ease; }
.run-subpill.sub-done { color: var(--ok); border-color: #bfe4cf; background: var(--ok-bg); }
.run-subpill.sub-failed { color: var(--danger); border-color: #efb8b8; background: var(--danger-bg); }
.run-subpill.sub-now { color: #fff; border-color: var(--accent); background: var(--accent);
  box-shadow: 0 1px 4px rgba(0,179,164,.35); animation: run-pulse-teal 1.5s ease-in-out infinite; }
@keyframes run-pulse-teal {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0,179,164,.45); }
  50% { box-shadow: 0 0 0 5px rgba(0,179,164,0); }
}
.run-gate { background: var(--warn-bg); border: 1px solid #e6b660; border-radius: var(--radius-sm); padding: 12px 14px; }
.run-gate-q { font-weight: 700; color: var(--warn); }
.run-feedback { max-width: 760px; }
.run-feedback textarea { background: var(--surface); min-height: 104px; resize: vertical; }
.run-send-back-pending { margin: 0 0 12px; padding: 8px 10px; border: 1px solid var(--border);
  border-radius: var(--radius-sm); background: var(--surface); }
.run-send-back-pending .run-now { margin-top: 0; padding-left: 0; }
.run-send-back-pending p { margin: 4px 0 0 28px; }
.card.run-waiting { border-color: #e6b660; box-shadow: inset 0 0 0 1px #e6b660; }
.rq-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px;
  border: 1px solid var(--border); border-radius: var(--radius-sm); margin-bottom: 8px; background: var(--surface); }
.rq-row:hover { border-color: var(--border-strong); box-shadow: var(--shadow-sm); }
.rq-main { min-width: 0; }
.rq-title { font-weight: 600; }

/* ---------- Mobile top bar + responsive shell ---------- */
.topbar {
  align-items: center; gap: 11px;
  padding: 9px 14px; padding-top: calc(9px + env(safe-area-inset-top, 0px));
  background: linear-gradient(180deg, var(--rail-top), var(--rail-bottom)); color: #fff;
  border-bottom: 1px solid rgba(6,12,24,.9);
  box-shadow: 0 1px 12px rgba(8,15,31,.28);
}
.topbar-menu {
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); color: #fff;
  width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center;
  cursor: pointer; flex-shrink: 0;
  transition: background .15s ease, border-color .15s ease;
}
.topbar-menu:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.18); }
.topbar-menu:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(0,179,164,.3); }
.topbar-brand {
  display: inline-flex; align-items: center; gap: 9px; min-width: 0;
  font-size: 15px; font-weight: 650; letter-spacing: -.012em; color: #fff;
}
.topbar-brand strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 860px) {
  #app { grid-template-columns: 1fr; grid-template-rows: auto minmax(0,1fr); }
  .topbar { display: flex; position: sticky; top: 0; z-index: 40; }
  /* The rail becomes an overlay drawer. It keeps the same anatomy as the desktop
     rail — head, scrolling destinations, pinned footer — so nothing is a second,
     lesser mobile menu. */
  .sidebar {
    position: fixed; top: 0; left: 0; bottom: 0; width: min(88vw, 300px); z-index: 60;
    border-right: none; border-radius: 0 18px 18px 0;
    padding-left: env(safe-area-inset-left, 0px);
    transform: translateX(-101%); transition: transform .3s cubic-bezier(.32,.72,0,1);
    will-change: transform;
  }
  body.nav-open .sidebar { transform: none; box-shadow: 18px 0 60px rgba(4,10,22,.55); }
  @media (prefers-reduced-motion: reduce) {
    .sidebar { transition: none; }
    body.nav-open .sidebar-scrim { animation: none; }
  }
  body.nav-open { overflow: hidden; }
  body.nav-open .sidebar-scrim { display: block; position: fixed; inset: 0; z-index: 55;
    background: rgba(8,14,28,.58); backdrop-filter: blur(3px); animation: fadeIn .22s ease; }
  .sidebar-foot::before { height: 28px; }
  .sidebar-close { display: grid; }
  .brand-text > span { display: none; }
  /* Touch targets, not pointer targets. */
  .sidebar-scroll { padding: 14px 12px 12px; }
  .nav-item { min-height: 44px; font-size: 14.5px; border-radius: 11px; }
  .nav-ic { width: 20px; height: 20px; }
  .nav-ic svg { width: 19px; height: 19px; }
  .nav-group-label { font-size: 11px; }
  .org-switcher select { padding-top: 11px; padding-bottom: 11px; font-size: 14px; }
  .status-pill, .provider-strip { padding-top: 9px; padding-bottom: 9px; }
  .content { min-height: 0; }
  .page, .page-wide { max-width: 100%; padding: 22px 20px 84px; }
  .page-chat { height: calc(100vh - 59px); padding: 20px 18px 18px; }
  .page-head { flex-direction: column; align-items: stretch; gap: 12px; }
  .page-head .btn, .page-head .btn-row { align-self: flex-start; }
  .field-row, .ct-builder, .tr-field, .split { grid-template-columns: 1fr !important; }
  .split { gap: 16px; }
  .lang-grid { grid-template-columns: 1fr 1fr; }
  .cal-grid:not(.cal-dow-row) { grid-auto-rows: 84px; }
}
@media (max-width: 560px) {
  .page, .page-wide { padding: 16px 14px 72px; }
  .page-chat { padding: 14px 10px 10px; }
  .page-chat .page-head p { display: none; }
  .chat-log { padding: 13px 10px; }
  .chat-msg { max-width: 97%; }
  .chat-tools { flex-wrap: wrap; }
  .chat-tool-note { order: 3; width: 100%; margin-left: 0; text-align: left; padding: 1px 2px 3px; }
  .chat-input { align-items: flex-end; }
  .chat-research-activity summary { flex-wrap: wrap; }
  .chat-research-activity summary .muted { width: 100%; margin-left: 16px; }
  .page-head h1 { font-size: 21px; }
  .lang-grid { grid-template-columns: 1fr; }
  .ptab { padding: 10px 12px; }
  .filter-bar { flex-direction: column; align-items: stretch; }
  .filter-bar .filter-search, .filter-bar select { width: 100%; min-width: 0; }
  .filter-count { margin-left: 0; }
  .btn-row { width: 100%; }
  .proj-header > .btn-row { align-self: stretch; width: 100%; justify-content: flex-start; }
  .modal { padding: 20px 18px; border-radius: 14px; }
  .modal-foot { flex-wrap: wrap; }
  .research-stats { grid-template-columns: 1fr 1fr; }
  .research-pages td:first-child { min-width: 220px; }
  .cal-grid { gap: 3px; }
  .cal-band { font-size: 9px; }
  .wf-grid { grid-template-columns: 1fr; }
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* ---------- Home dashboard (doc 15 v2) ---------- */
.home-page { animation: fadeIn .25s ease; }
.home-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.home-head h1 { margin-bottom: 2px; }
.home-quick { flex: 0 0 auto; margin-top: 4px; }
.home-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px; }
.home-card { min-width: 0; }
.home-card h3 { margin-bottom: 4px; }
.home-system { margin-bottom: 16px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

/* Dashboard loading skeleton: mirrors the first real content rows so the page
   holds its shape while the aggregate request is in flight. */
.home-skeleton { pointer-events: none; }
.home-skeleton-status {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.home-skeleton-bar {
  display: block; width: var(--sk-w, 100%); background: var(--surface-3);
  border-radius: 999px; position: relative; overflow: hidden;
}
.home-skeleton-bar::after {
  content: ""; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .72), transparent);
  animation: homeSkeletonShimmer 1.45s ease-in-out infinite;
}
@keyframes homeSkeletonShimmer { to { transform: translateX(100%); } }
.home-skeleton-heading { width: min(480px, 62vw); }
.home-skeleton-title { width: min(300px, 68%); height: 28px; margin-bottom: 10px; }
.home-skeleton-subtitle { width: min(460px, 100%); height: 14px; }
.home-skeleton-actions span { width: 108px; height: 38px; border-radius: var(--radius-sm); }
.home-skeleton-actions span:nth-child(2) { width: 126px; }
.home-skeleton-actions span:nth-child(3) { width: 92px; }
.home-skeleton-kpi { min-height: 118px; }
.home-skeleton-label { height: 10px; margin-bottom: 5px; }
.home-skeleton-number { height: 31px; margin-bottom: 4px; }
.home-skeleton-copy { height: 11px; margin-top: auto; }
.home-skeleton-card { min-height: 188px; }
.home-skeleton-card-wide { min-height: 210px; }
.home-skeleton-card-title { width: 148px; height: 17px; margin-bottom: 9px; }
.home-skeleton-card-copy { width: min(380px, 72%); height: 11px; margin-bottom: 26px; }
.home-skeleton-row { height: 34px; border-radius: var(--radius-xs); margin-top: 9px; }
@media (prefers-reduced-motion: reduce) { .home-skeleton-bar::after { animation: none; } }

/* Projects list uses the same shimmer while /api/projects is in flight. */
/* The filter placeholders sit on the page background, which --surface-3 matches
   almost exactly, so they take the outline of the real controls instead. */
.proj-skeleton-filters span { flex: 0 0 auto; width: 152px; height: 38px;
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface-2); }
.proj-skeleton-filters span:first-child { flex: 1 1 220px; }
.proj-skeleton-row { min-height: 76px; }
.proj-skeleton-title { height: 15px; margin-bottom: 10px; }
.proj-skeleton-badges span { width: 74px; height: 17px; }
.proj-skeleton-badges span:nth-child(2) { width: 96px; }
.proj-skeleton-badges span:nth-child(3) { width: 62px; }
.proj-skeleton-badges span:nth-child(4) { width: 84px; }
.proj-skeleton-date { flex: 0 0 auto; width: 104px; height: 12px; }

/* Settings uses the dashboard shimmer while its provider checks are in flight. */
.settings-skeleton-card { min-height: 166px; }
.settings-skeleton-title { width: 184px; height: 18px; margin-bottom: 10px; }
.settings-skeleton-copy { width: min(620px, 82%); height: 11px; margin-bottom: 24px; }
.settings-skeleton-row { height: 38px; border-radius: var(--radius-xs); margin-top: 10px; }

/* KPI stat cards — two balanced rows of six on desktop */
.home-kpis { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; margin-bottom: 16px; }
/* Fixed column counts that divide every band size (6 member / 18 admin tiles)
   so no breakpoint ever leaves a ragged last row. */
@media (max-width: 1140px) { .home-kpis { grid-template-columns: repeat(3, 1fr); } }
.kpi { display: flex; flex-direction: column; gap: 3px; padding: 14px 16px 12px; color: var(--text); min-width: 0; }
a.kpi { text-decoration: none; }
a.kpi:hover { border-color: var(--brand); box-shadow: var(--shadow); }
.kpi-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi-value { font-size: 30px; font-weight: 800; line-height: 1.05; letter-spacing: -.02em; }
.kpi-value small { font-size: 13px; font-weight: 650; color: var(--text-faint); letter-spacing: 0; }
.kpi-value.kpi-danger { color: var(--danger); }
.kpi-value.kpi-ok { color: var(--ok); }
.kpi-value.kpi-accent { color: var(--accent-dark); }
.kpi-sub { font-size: 12px; color: var(--text-soft); min-height: 16px; }
.kpi-delta { font-size: 12px; font-weight: 650; }
.kpi-delta.up { color: var(--ok); }
.kpi-delta.down { color: var(--warn); }
b.kpi-danger { color: var(--danger); }

/* Dashboard tables */
.home-tblwrap { overflow-x: auto; margin-top: 10px; }
.home-tbl { min-width: 460px; }
.home-tbl-attn { min-width: 760px; }
.home-tbl td.col-why { min-width: 220px; }
.home-tbl td.col-icon { width: 30px; font-size: 16px; padding-right: 0; }
.home-tbl td.col-title { max-width: 0; width: 34%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.home-tbl td.col-title a { color: var(--text); }
.home-tbl td.col-title a:hover { color: var(--brand); text-decoration: none; }
.home-tbl td.col-why { color: var(--text-soft); }
.home-tbl td.col-shrink, .home-tbl .nowrap { white-space: nowrap; }
.home-tbl td.col-shrink { width: 1%; }
.home-tbl tr.home-row-live td { background: #f2fbfa; }
.home-mode-summary { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 12px; }
.nowrap { white-space: nowrap; }
.empty-inline { display: flex; align-items: center; gap: 10px; padding: 18px 4px 8px; color: var(--text-soft); }
.empty-inline .big { font-size: 26px; }
.home-run-pulse { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); margin-right: 8px; animation: homePulse 1.6s ease-in-out infinite; }
@keyframes homePulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(0, 179, 164, .35); } 50% { box-shadow: 0 0 0 6px rgba(0, 179, 164, 0); } }

/* Charts (charts.js primitives) */
.chart { display: block; }
.chart-empty { padding: 14px 4px; }
.chart-donut-centre { font-size: 24px; font-weight: 800; fill: var(--text); font-family: var(--font); }
.chart-legend { display: flex; gap: 6px 16px; flex-wrap: wrap; margin-top: 10px; }
.chart-legend-item { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-soft); }
a.chart-legend-item:hover { color: var(--brand); text-decoration: none; }
.chart-legend-item b { color: var(--text); }
.chart-swatch { width: 10px; height: 10px; border-radius: 3px; flex: 0 0 auto; display: inline-block; }
/* Legend entries that filter their chart: a pressed pill is a visible series. */
.chart-legend-toggle { appearance: none; border: 1px solid transparent; border-radius: 999px; padding: 3px 9px 3px 7px;
  background: var(--surface-2); font: inherit; font-size: 12.5px; cursor: pointer;
  transition: border-color .14s, background .14s, color .14s, opacity .14s; }
.chart-legend-toggle:hover { border-color: var(--border-strong); background: var(--surface-3); color: var(--text); }
.chart-legend-toggle:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.chart-legend-toggle.is-off { color: var(--text-faint); background: transparent; border-color: var(--border); }
.chart-legend-toggle.is-off { text-decoration: line-through; text-decoration-color: var(--text-faint); }
.chart-legend-toggle.is-off .chart-swatch { opacity: .28; }
.chart-xlabels { display: grid; grid-template-columns: repeat(var(--n, 8), 1fr); gap: 2px; margin-top: 3px; }
.chart-xlabels span { font-size: 10px; color: var(--text-faint); text-align: center; overflow: hidden; white-space: nowrap; }
.chart-endlabels { display: flex; justify-content: space-between; font-size: 10.5px; color: var(--text-faint); margin-top: 3px; }
.home-spark { margin: 10px 0 0; }
.home-kb { display: flex; gap: 18px; align-items: center; }

/* Auditor quality intelligence — the dashboard's portfolio-quality layer. */
.home-quality-card { position: relative; overflow: hidden; border-color: #cfe2e1; background:
  radial-gradient(circle at 96% -22%, rgba(23,109,114,.13), transparent 34%),
  linear-gradient(145deg,#fff 0%,#fbfdfd 56%,#f4f9f8 100%); }
.home-quality-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px;
  background: linear-gradient(90deg,#176d72,#5eaaa3 48%,transparent 90%); }
.home-quality { --quality-meter: #176d72; }
.home-quality-head { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 18px; }
.home-quality-head h3 { margin: 2px 0 3px; font-size: 20px; letter-spacing: -.018em; }
.home-quality-head > div:first-child { max-width: 660px; }
.home-quality-kicker { color: #176d72; font-size: 10px; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
.home-quality-summary { display: grid; grid-template-columns: auto repeat(3,auto); align-items: center; gap: 10px; flex: 0 0 auto; }
.home-quality-summary > div:not(.home-quality-average) { display: flex; min-width: 86px; min-height: 58px; padding: 8px 11px;
  align-items: center; justify-content: center; flex-direction: column; border: 1px solid var(--border); border-radius: 11px;
  background: rgba(255,255,255,.72); }
.home-quality-summary > div:not(.home-quality-average) strong { font-size: 18px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.home-quality-summary > div:not(.home-quality-average) span { color: var(--text-faint); font-size: 9px; line-height: 1.25; text-align: center; }
.home-quality-average { --meter-color: #176d72; position: relative; display: grid; width: 82px; height: 82px; place-items: center;
  border-radius: 50%; background: conic-gradient(var(--meter-color) var(--score), #e5ecee 0); box-shadow: 0 8px 22px -13px rgba(23,109,114,.7); }
.home-quality-average::before { content: ""; position: absolute; inset: 6px; border-radius: inherit; background: rgba(255,255,255,.97); }
.home-quality-average > div { position: relative; display: flex; align-items: center; justify-content: center; flex-direction: column; text-align: center; }
.home-quality-average strong { font-size: 21px; line-height: 1; letter-spacing: -.025em; font-variant-numeric: tabular-nums; }
.home-quality-average span { margin-top: 3px; color: var(--text-faint); font-size: 7.5px; line-height: 1; }
.home-quality-average.is-strong, .home-quality-engine.is-strong, .home-quality-meter.is-strong,
.home-quality-track.is-strong { --meter-color: #21875d; }
.home-quality-average.is-watch, .home-quality-engine.is-watch, .home-quality-meter.is-watch,
.home-quality-track.is-watch { --meter-color: #d18a20; }
.home-quality-average.is-risk, .home-quality-engine.is-risk, .home-quality-meter.is-risk,
.home-quality-track.is-risk { --meter-color: #cf5358; }
.home-quality-engines { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; margin-bottom: 14px; }
.home-quality-engine { --meter-color: #176d72; min-width: 0; padding: 12px 13px; border: 1px solid var(--border); border-radius: 11px;
  background: rgba(255,255,255,.76); box-shadow: 0 6px 16px -14px rgba(16,24,40,.55); }
.home-quality-engine > span { color: var(--text-soft); font-size: 11px; font-weight: 700; }
.home-quality-engine > div { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin: 4px 0 8px; }
.home-quality-engine strong { font-size: 22px; line-height: 1; font-variant-numeric: tabular-nums; }
.home-quality-engine small { color: var(--text-faint); font-size: 9px; }
.home-quality-track { --meter-color: #176d72; height: 5px; overflow: hidden; border-radius: 99px; background: #e7edf1; }
.home-quality-track i { display: block; width: var(--score); height: 100%; border-radius: inherit; background: var(--meter-color);
  box-shadow: 0 0 8px color-mix(in srgb,var(--meter-color) 35%,transparent); }
.home-quality-layout { display: grid; grid-template-columns: minmax(0,1.9fr) minmax(290px,.9fr); gap: 14px; }
.home-quality-chart-panel, .home-quality-insights > section, .home-quality-panel {
  border: 1px solid var(--border); border-radius: 12px; background: rgba(255,255,255,.72); }
.home-quality-chart-panel { min-width: 0; padding: 14px 15px 11px; }
.home-quality-chart-panel > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.home-quality-chart-panel h4, .home-quality-insights h4, .home-quality-panel h4 { margin: 0; font-size: 12px; }
.home-quality-chart-panel header div > span { display: block; margin-top: 2px; color: var(--text-faint); font-size: 10px; }
.chart-quality-grid { stroke: #e7edf1; stroke-width: 1; vector-effect: non-scaling-stroke; }
.chart-quality-axis { fill: var(--text-faint); font: 9px var(--font); }
.chart-quality-threshold { stroke: #b4693d; stroke-width: 1.2; stroke-dasharray: 5 4; opacity: .72; vector-effect: non-scaling-stroke; }
.chart-quality-line { opacity: .82; }
.chart-quality-line.is-total { opacity: 1; filter: drop-shadow(0 1px 2px rgba(23,109,114,.17)); }
.chart-quality-point { vector-effect: non-scaling-stroke; filter: drop-shadow(0 1px 1px rgba(16,24,40,.24)); }
.chart-quality-point.is-total { filter: drop-shadow(0 1px 2px rgba(23,109,114,.32)); }
.home-quality-insights { display: grid; gap: 10px; align-content: start; }
.home-quality-insights > section { padding: 12px; }
.home-quality-insights h4 { margin-bottom: 8px; }
.home-quality-extreme { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 4px 10px; margin-top: 7px; padding: 9px 10px;
  border: 1px solid var(--border); border-radius: 9px; color: var(--text); background: var(--surface-2); }
.home-quality-extreme:hover { border-color: var(--border-strong); text-decoration: none; box-shadow: var(--shadow-sm); }
.home-quality-extreme > div:first-child { min-width: 0; }
.home-quality-extreme > div:first-child > span { display: block; color: var(--text-faint); font-size: 8.5px; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; }
.home-quality-extreme > div:first-child > strong { display: block; overflow: hidden; margin-top: 1px; font-size: 11.5px; text-overflow: ellipsis; white-space: nowrap; }
.home-quality-extreme > div:first-child > small { display: block; color: var(--text-faint); font-size: 9px; }
.home-quality-extreme-score { align-self: center; color: #176d72; font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; }
.home-quality-extreme.is-low .home-quality-extreme-score { color: #b4693d; }
.home-quality-extreme-engines { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 2px 8px; padding-top: 5px; border-top: 1px solid var(--border); }
.home-quality-extreme-engines span { display: flex; justify-content: space-between; gap: 6px; color: var(--text-faint); font-size: 8.5px; }
.home-quality-extreme-engines b { color: var(--text-soft); font-variant-numeric: tabular-nums; }
.home-quality-types { display: grid; gap: 8px; }
.home-quality-type > div:first-child { display: grid; grid-template-columns: minmax(0,1fr) auto auto; align-items: baseline; gap: 7px; margin-bottom: 4px; }
.home-quality-type span { overflow: hidden; color: var(--text-soft); font-size: 10px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.home-quality-type small { color: var(--text-faint); font-size: 8.5px; }
.home-quality-type strong { font-size: 10.5px; font-variant-numeric: tabular-nums; }
.home-quality-type > small { display: block; margin-top: 3px; text-align: right; }
.home-quality-panels { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; margin-top: 14px; }
.home-quality-panel { padding: 13px 14px; }
.home-quality-panel > header { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.home-quality-panel > header strong { font-size: 11.5px; }
.home-quality-panel > header span { color: var(--text-faint); font-size: 9px; }
.home-quality-panel-list { display: grid; gap: 9px; }
.home-quality-meter { --meter-color: #176d72; }
.home-quality-meter > div:first-child { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.home-quality-meter span { overflow: hidden; color: var(--text-soft); font-size: 9.5px; text-overflow: ellipsis; white-space: nowrap; }
.home-quality-meter strong { font-size: 10px; font-variant-numeric: tabular-nums; }
.home-quality-meter .home-quality-track { height: 4px; }
.home-quality-ledger { margin-top: 14px; overflow: hidden; border: 1px solid var(--border); border-radius: 11px; background: rgba(255,255,255,.66); }
.home-quality-ledger > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px;
  cursor: pointer; color: var(--text-soft); font-size: 11px; font-weight: 700; }
.home-quality-ledger > summary span:last-child { color: var(--text-faint); font-size: 9.5px; font-weight: 550; }
.home-quality-ledger[open] > summary { border-bottom: 1px solid var(--border); background: var(--surface-2); }
.home-quality-ledger .home-tblwrap { margin: 0; }
.home-quality-table { min-width: 780px; }
.home-quality-table th:not(:first-child), .home-quality-table td:not(:first-child) { text-align: right; }
/* Sortable ledger headers: the whole label is the control, so the caret never
   becomes a tiny separate hit target. Inline-flex inherits the cell's own
   alignment, keeping the numeric columns right-aligned. */
.home-quality-ledger .home-quality-table th { padding: 0; }
.home-ledger-sort { display: inline-flex; align-items: center; gap: 5px; width: auto; padding: 10px 12px;
  border: 0; background: none; font: inherit; color: inherit; letter-spacing: inherit;
  text-transform: inherit; cursor: pointer; }
.home-ledger-sort:hover { color: var(--brand); }
.home-ledger-sort:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.home-ledger-sort > span { font-size: 8.5px; color: var(--text-faint); }
.home-ledger-sort.is-active, .home-ledger-sort.is-active > span { color: var(--brand); }
.home-quality-ledger .pager { margin: 12px 0 14px; }
.home-quality-table-score { font-size: 14px; font-variant-numeric: tabular-nums; }
.home-quality-table-score.is-strong { color: var(--ok); }
.home-quality-table-score.is-watch { color: var(--warn); }
.home-quality-table-score.is-risk { color: var(--danger); }
.home-quality-empty { display: flex; align-items: center; gap: 15px; min-height: 92px; }
.home-quality-empty > span { display: grid; width: 48px; height: 48px; flex: 0 0 auto; place-items: center; border-radius: 14px;
  color: #176d72; background: #e9f5f4; border: 1px solid #c9e2e1; font-size: 11px; font-weight: 850; letter-spacing: .08em; }
.home-quality-empty h3 { margin-bottom: 3px; font-size: 18px; }

/* Fortnight strip */
.home-week-grid { display: grid; grid-template-columns: repeat(var(--wk-days, 14), 1fr); gap: 4px; }
.home-week-day { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 2px; border-radius: var(--radius-xs); border: 1px solid transparent; color: var(--text); }
.home-week-day:hover { text-decoration: none; border-color: var(--border-strong); background: var(--surface-2); }
.home-week-day.today { background: var(--brand-tint); border-color: #d4e5f8; }
.home-week-day.today .home-week-num { color: var(--brand); }
.home-week-dow { font-size: 10px; font-weight: 700; text-transform: uppercase; color: var(--text-faint); }
.home-week-num { font-size: 14px; font-weight: 700; }
.home-week-dots { display: flex; gap: 2px; min-height: 8px; }
.home-week-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--border-strong); }
.home-week-dot.cal-proposed { background: var(--surface); border: 1px dashed var(--border-strong); }
.home-week-dot.cal-approved { background: var(--brand); }
.home-week-dot.cal-inprod { background: var(--warn); }
.home-week-dot.cal-published { background: var(--ok); }
.home-week-bands { display: grid; grid-template-columns: repeat(var(--wk-days, 14), 1fr); gap: 4px; margin-top: 6px; }
.home-week-band { height: 16px; border-radius: 5px; opacity: .85; color: #fff; font-size: 10px; font-weight: 700; padding: 0 6px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; line-height: 16px; margin-bottom: 3px; }

/* Most consulted sources (KB card) */
.home-topdocs { display: flex; flex-direction: column; gap: 4px; }
.home-topdoc { display: grid; grid-template-columns: minmax(0, 1.4fr) 1fr auto; align-items: center; gap: 10px; padding: 4px 6px; border-radius: var(--radius-xs); color: var(--text); cursor: pointer; }
.home-topdoc:hover { background: var(--surface-2); text-decoration: none; }
.home-topdoc:hover .home-topdoc-title { color: var(--brand); }
.home-topdoc-title { font-size: 12.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.home-topdoc-bar { height: 7px; border-radius: 4px; background: var(--surface-3); overflow: hidden; }
.home-topdoc-bar i { display: block; height: 100%; border-radius: 4px; background: var(--brand); }
.home-topdoc-n { font-size: 11.5px; font-weight: 700; color: var(--text-soft); }

/* AI telemetry cards (doc 15 v3): model mix, agent bench, step timings */
.home-mrow { cursor: default; grid-template-columns: minmax(0, 1.5fr) 1fr auto; }
.home-mrow:hover .home-topdoc-title { color: var(--text); }
.home-mrow-time { background: var(--accent); }
.home-agents { display: flex; flex-direction: column; }
.home-agent-row { display: grid; grid-template-columns: 26px minmax(0, 1fr) 34px 52px 56px; align-items: center; gap: 6px; padding: 5px 0; border-bottom: 1px solid var(--border); }
.home-agent-row:last-child { border-bottom: 0; }
.home-agent-head { padding: 0 0 2px; border-bottom: 1px solid var(--border-strong); font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-faint); }
.home-agent-icon { text-align: center; font-size: 14px; }
.home-agent-id { display: flex; flex-direction: column; min-width: 0; }
.home-agent-id b { font-size: 12.5px; line-height: 1.25; }
.home-agent-model { font-size: 11px; color: var(--text-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.home-agent-stat { font-size: 11.5px; font-weight: 650; color: var(--text-soft); text-align: right; white-space: nowrap; }
.home-agent-think { font-weight: 600; }

/* Admin cost intelligence: portfolio totals, trend and drill-down rankings. */
.home-cost-card { position: relative; overflow: hidden; border-color: #cfe2e1; background:
  radial-gradient(circle at 96% -30%, rgba(23,109,114,.12), transparent 34%),
  linear-gradient(145deg,#fff 0%,#fbfdfd 62%,#f4f9f8 100%); }
.home-cost-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px;
  background: linear-gradient(90deg,#176d72,#5eaaa3 48%,transparent 90%); }
.home-cost-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.home-cost-head h3 { margin: 2px 0 3px; font-size: 20px; letter-spacing: -.018em; }
.home-cost-kicker { color: #176d72; font-size: 10px; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
.home-cost-kpis { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: 9px; margin: 17px 0 14px; }
.home-cost-kpis > div { display: flex; min-width: 0; min-height: 83px; padding: 10px 11px; flex-direction: column;
  border: 1px solid var(--border); border-radius: 10px; background: rgba(255,255,255,.78); }
.home-cost-kpis > div.is-warning { border-color: #e4c482; background: #fffaf0; }
.home-cost-kpis span { color: var(--text-faint); font-size: 9px; font-weight: 750; letter-spacing: .045em; text-transform: uppercase; }
.home-cost-kpis strong { margin: 6px 0 3px; overflow: hidden; font-size: 19px; line-height: 1.05; letter-spacing: -.025em;
  font-variant-numeric: tabular-nums; text-overflow: ellipsis; white-space: nowrap; }
.home-cost-kpis strong em { color: var(--text-faint); font-style: normal; font-weight: 500; }
.home-cost-kpis small { margin-top: auto; color: var(--text-faint); font-size: 9px; line-height: 1.25; }
.home-cost-layout { display: grid; grid-template-columns: minmax(0,1.7fr) minmax(290px,.8fr); gap: 12px; }
.home-cost-layout > section { min-width: 0; padding: 13px 14px 10px; border: 1px solid var(--border); border-radius: 11px; background: rgba(255,255,255,.72); }
.home-cost-layout section > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 7px; }
.home-cost-layout h4 { margin: 0; font-size: 12px; }
.home-cost-layout header span { display: block; margin-top: 2px; color: var(--text-faint); font-size: 9px; }
.home-cost-layout header b { font-size: 14px; font-variant-numeric: tabular-nums; }
.home-cost-modes { display: flex; align-items: center; gap: 14px; }
.home-cost-modes .chart-donut-centre { font-size: 12px; }
.home-cost-modes > div:last-child { display: grid; min-width: 0; flex: 1; gap: 8px; }
.home-cost-modes > div:last-child > div { display: grid; grid-template-columns: 9px minmax(0,1fr) auto; align-items: center; gap: 6px; }
.home-cost-modes i { width: 9px; height: 9px; border-radius: 3px; }
.home-cost-modes span, .home-cost-modes b { font-size: 10px; }
.home-cost-modes small { grid-column: 2 / -1; color: var(--text-faint); font-size: 8.5px; }
.home-cost-foot { margin-top: 10px; }
.home-cost-extremes { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; margin: 12px 0; }
.home-cost-extremes a { display: grid; min-width: 0; grid-template-columns: minmax(0,1fr) auto; gap: 3px 8px; padding: 10px 11px;
  border: 1px solid var(--border); border-radius: 9px; color: var(--text); background: var(--surface-2); }
.home-cost-extremes a:hover { border-color: var(--border-strong); text-decoration: none; box-shadow: var(--shadow-sm); }
.home-cost-extremes span { grid-column: 1 / -1; color: var(--text-faint); font-size: 8.5px; font-weight: 750; letter-spacing: .05em; text-transform: uppercase; }
.home-cost-extremes strong { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.home-cost-extremes b { color: #176d72; font-size: 12px; font-variant-numeric: tabular-nums; }
.home-cost-rows { display: grid; gap: 8px; margin-top: 12px; }
.home-cost-row-head, .home-cost-row-foot { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.home-cost-row-head span { min-width: 0; overflow: hidden; font-size: 11.5px; text-overflow: ellipsis; white-space: nowrap; }
.home-cost-row-head b { flex: 0 0 auto; font-size: 11px; font-variant-numeric: tabular-nums; }
.home-cost-row-track { height: 5px; margin: 4px 0 3px; overflow: hidden; border-radius: 99px; background: var(--surface-3); }
.home-cost-row-track i { display: block; height: 100%; border-radius: inherit; background: #176d72; }
.home-cost-row-foot { color: var(--text-faint); font-size: 8.5px; }
.home-cost-provider-summary { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 11px; }
.home-cost-provider-summary > span { display: inline-flex; align-items: baseline; gap: 5px; padding: 5px 8px;
  border: 1px solid var(--border); border-radius: 99px; color: var(--text-soft); font-size: 10px; background: var(--surface-2); }
.home-cost-provider-summary strong { color: var(--text); text-transform: capitalize; }
.home-cost-provider-summary small { color: var(--text-faint); }

/* Team activity feed */
.home-team-row { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--border); }
.home-team-row:last-child { border-bottom: 0; }
.home-team-row > .small:first-of-type { flex: 1; min-width: 0; }
.home-team-when { flex: 0 0 auto; }
.home-team-dot { color: var(--text-faint); width: 20px; text-align: center; }

/* Onboarding checklist (designed empty state) */
.home-onboard { max-width: 640px; }
.home-onboard-steps { list-style: none; margin: 14px 0 18px; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.home-onboard-steps li { display: flex; gap: 12px; align-items: flex-start; }
.home-onboard-check { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800; background: var(--surface-3); color: var(--text-soft); border: 1px solid var(--border-strong); }
.home-onboard-steps li.done .home-onboard-check { background: var(--ok-bg); color: var(--ok); border-color: #7bd0a2; }
.home-onboard-steps li.done > div > div:first-child { text-decoration: line-through; color: var(--text-faint); }

@media (max-width: 1180px) {
  .home-grid { grid-template-columns: 1fr; }
  .home-grid .home-card { grid-column: span 1 !important; }
  .home-quality-head { align-items: flex-start; flex-direction: column; }
  .home-quality-summary { width: 100%; grid-template-columns: auto repeat(3,minmax(0,1fr)); }
  .home-quality-layout { grid-template-columns: 1fr; }
  .home-quality-insights { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .home-cost-kpis { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .home-cost-layout { grid-template-columns: 1fr; }
  .home-week-grid, .home-week-bands { grid-template-columns: repeat(7, 1fr); }
  .home-week-day:nth-child(n+8) { display: none; }
  .home-week-band { grid-column: 1 / -1 !important; }
}
@media (max-width: 700px) {
  .token-meter, .token-meter.token-meter-factory {
    grid-template-columns: auto minmax(70px,1fr) auto;
    grid-template-areas: "attempt track cost" ". count count" "split split split"; }
  .token-meter-split { justify-self: start; white-space: normal; }
  .home-kpis { grid-template-columns: repeat(2, 1fr); }
  .home-skeleton-heading { width: 100%; }
  .home-skeleton-actions { width: 100%; }
  .home-skeleton-actions span { flex: 1 1 92px; }
  .home-tbl td.col-why, .home-tbl th.th-why { display: none; }
  .home-tbl-attn { min-width: 520px; }
  .home-kb { flex-direction: column; align-items: flex-start; }
  .home-quality-card { padding: 17px 15px; }
  .home-quality-summary { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .home-quality-average { justify-self: center; }
  .home-quality-summary > div:not(.home-quality-average) { min-width: 0; }
  .home-quality-engines { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .home-quality-insights, .home-quality-panels { grid-template-columns: 1fr; }
  .home-quality-chart-panel { padding-inline: 8px; }
  .home-quality-chart-panel > header { padding-inline: 5px; }
  .home-quality-chart-panel > header > .badge { display: none; }
  .chart-quality-trend { height: 190px; }
  .home-quality-extreme-engines { grid-template-columns: 1fr; }
  .home-cost-head { flex-direction: column; }
  .home-cost-kpis { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .home-cost-extremes { grid-template-columns: 1fr; }
  .home-cost-provider-summary small { display: none; }
}

/* Vibe Writing: a focused room, deliberately separate from the Factory workspace. */
.mode-choice { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mode-card { appearance: none; border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); border-radius: 12px; padding: 14px; display: flex; align-items: flex-start; gap: 12px; text-align: left; cursor: pointer; }
.mode-card:hover { border-color: var(--brand); background: var(--brand-tint); }
.mode-card.sel { border-color: var(--brand); box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand) 16%, transparent); background: var(--brand-tint); }
.mode-card:disabled { opacity: 1; cursor: default; }
.mode-card:not(.sel):disabled { opacity: .45; }
.mode-card strong, .mode-card small { display: block; }
.mode-card small { color: var(--text-soft); font-weight: 400; line-height: 1.35; margin-top: 3px; }
.mode-icon { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; background: var(--surface-3); color: var(--brand); font-size: 17px; flex: 0 0 auto; }

.content:has(.vibe-page) { overflow: hidden; }
#view:has(.vibe-page) { height: 100%; min-height: 0; }
.vibe-page { height: 100%; min-height: 0; display: flex; flex-direction: column; overflow: hidden; background: linear-gradient(145deg, #f5f7fb 0%, #eef2f7 100%); }
.vibe-topbar { min-height: 82px; padding: 12px 18px; background: rgba(255,255,255,.94); border-bottom: 1px solid rgba(205,213,225,.74); box-shadow: 0 1px 0 rgba(255,255,255,.9); display: grid; grid-template-columns: auto minmax(240px, 1fr) auto; align-items: center; gap: 18px; backdrop-filter: blur(12px); }
.vibe-back { min-width: 90px; justify-content: flex-start; color: var(--text-soft); box-shadow: none; border-color: transparent; background: transparent; }
.vibe-back:hover { color: var(--text); background: var(--surface-2); box-shadow: none; }
.vibe-title-block { min-width: 0; }
.vibe-title-block input { display: block; border: 0; background: transparent; padding: 1px 0; width: 100%; min-width: 0; font-size: 20px; font-weight: 760; letter-spacing: -.018em; color: var(--text); outline: 0; white-space: nowrap; }
.vibe-title-block input:focus { box-shadow: 0 2px 0 var(--brand); }
.vibe-title-block > div { display: flex; align-items: center; gap: 6px; margin-top: 6px; }
.vibe-title-block > .vibe-project-actions { flex-wrap: wrap; }
.vibe-project-actions .btn { min-height: 30px; padding: 5px 9px; }
.vibe-topbar-actions { gap: 8px; }
.vibe-topbar-actions .btn { min-height: 36px; }
.vibe-button-count { min-width: 20px; padding: 1px 6px; border-radius: 99px; background: var(--surface-3); color: var(--text-soft); font-size: 11px; }
.vibe-export-control { position: relative; display: inline-flex; }
.vibe-export-control .vibe-export-main { border-radius: var(--radius-xs) 0 0 var(--radius-xs); }
.vibe-export-control .vibe-export-toggle { min-width: 32px; margin-left: -1px; padding-inline: 8px; border-radius: 0 var(--radius-xs) var(--radius-xs) 0; }
.vibe-export-menu { position: absolute; top: calc(100% + 7px); right: 0; z-index: 12; width: 220px; padding: 6px; border: 1px solid var(--border-strong); border-radius: 12px; background: var(--surface); box-shadow: var(--shadow-lg); }
.vibe-export-menu button { width: 100%; padding: 9px 10px; border: 0; border-radius: 8px; background: transparent; color: var(--text); text-align: left; cursor: pointer; }
.vibe-export-menu button:hover { background: var(--brand-tint); }
.vibe-export-menu strong, .vibe-export-menu span { display: block; }
.vibe-export-menu strong { font-size: 12.5px; }
.vibe-export-menu span { margin-top: 1px; color: var(--text-faint); font-size: 11px; }
.vibe-notice { margin: 12px 18px 0; }
.vibe-layout { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(340px, 41%) minmax(0, 59%); gap: 14px; padding: 14px 18px 18px; overflow: hidden; }
.vibe-chat, .vibe-canvas { min-width: 0; min-height: 0; border: 1px solid rgba(205,213,225,.86); border-radius: 16px; overflow: hidden; background: var(--surface); box-shadow: 0 1px 2px rgba(16,24,40,.03), 0 12px 28px -20px rgba(16,24,40,.28); }
.vibe-chat { display: flex; flex-direction: column; position: relative; }
.vibe-pane-head { flex: 0 0 66px; min-height: 66px; padding: 0 18px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; gap: 16px; background: rgba(255,255,255,.96); }
.vibe-pane-head h2 { margin: 2px 0 0; font-size: 16px; font-weight: 740; letter-spacing: -.012em; }
.vibe-team { display: flex; align-items: center; gap: 9px; color: var(--text-faint); font-size: 11px; white-space: nowrap; }
.vibe-team-avatars { display: flex; padding-left: 7px; }
.vibe-team .vibe-team-avatar { width: 27px; height: 27px; margin-left: -7px; border: 2px solid var(--surface); border-radius: 9px; box-shadow: 0 1px 4px rgba(16,24,40,.14); font-size: 12px; }
.vibe-team-more { width: 27px; height: 27px; margin-left: -7px; border: 2px solid var(--surface); border-radius: 9px; display: grid; place-items: center; background: var(--surface-3); color: var(--text-soft); box-shadow: 0 1px 4px rgba(16,24,40,.12); font-size: 9px; font-weight: 800; }
/* Pinned decisions: a one-line summary bar in the room, the full list in a modal.
   The thread is the scarce resource here, so the bar never grows. */
.vibe-decisions { flex: 0 0 auto; border-bottom: 1px solid var(--border); padding: 7px 12px; background: linear-gradient(90deg, color-mix(in srgb, var(--brand-tint) 58%, var(--surface)), var(--surface)); }
.vibe-decisions-trigger { display: flex; align-items: center; gap: 8px; width: 100%; padding: 5px 8px; border: 1px solid transparent; border-radius: 10px; background: transparent; color: var(--text-soft); font: inherit; font-size: 12px; text-align: left; cursor: pointer; }
.vibe-decisions-trigger:hover { border-color: color-mix(in srgb, var(--brand) 26%, var(--border)); background: rgba(255,255,255,.72); }
.vibe-decisions-trigger:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.vibe-decisions-icon { flex: 0 0 auto; font-size: 11.5px; }
.vibe-decisions-label { flex: 0 0 auto; font-weight: 750; }
.vibe-decisions-count { flex: 0 0 auto; min-width: 19px; padding: 1px 6px; border-radius: 9px; background: var(--brand); color: #fff; font-size: 10.5px; font-weight: 800; text-align: center; font-variant-numeric: tabular-nums; }
.vibe-decisions-trigger.is-empty .vibe-decisions-count { background: var(--surface-3); color: var(--text-faint); }
.vibe-decisions-peek { flex: 1 1 auto; min-width: 0; overflow: hidden; color: var(--text-faint); font-size: 11.5px; text-overflow: ellipsis; white-space: nowrap; }
.vibe-decisions-cta { flex: 0 0 auto; color: var(--brand); font-size: 11px; font-weight: 750; }
.vibe-decisions-trigger:hover .vibe-decisions-cta { text-decoration: underline; }
.vibe-decisions-dialog .vibe-decision-list { list-style: none; display: flex; flex-direction: column; gap: 8px; margin: 15px 0 0; padding: 0; max-height: min(54vh, 460px); overflow-y: auto; }
.vibe-decision-item { display: flex; align-items: flex-start; gap: 10px; padding: 11px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); }
.vibe-decision-index { display: grid; place-items: center; flex: 0 0 auto; width: 22px; height: 22px; border-radius: 7px; background: color-mix(in srgb, var(--brand) 12%, var(--surface)); color: var(--brand); font-size: 10.5px; font-weight: 800; font-variant-numeric: tabular-nums; }
.vibe-decision-text { flex: 1 1 auto; min-width: 0; }
.vibe-decision-text p { margin: 0; color: var(--text); font-size: 13px; line-height: 1.52; overflow-wrap: anywhere; }
.vibe-decision-text small { display: block; margin-top: 4px; color: var(--text-faint); font-size: 10.5px; }
.vibe-decision-unpin { flex: 0 0 auto; }
.vibe-decision-unpin:hover { color: var(--danger); }
.vibe-decisions-empty { display: flex; align-items: flex-start; gap: 12px; margin-top: 15px; padding: 18px 16px; border: 1px dashed var(--border-strong); border-radius: var(--radius-sm); background: var(--surface-2); }
.vibe-decisions-empty > span { font-size: 20px; line-height: 1.1; }
.vibe-decisions-empty strong { display: block; margin-bottom: 3px; font-size: 13.5px; }
.vibe-thread { flex: 1; min-height: 0; overflow-y: auto; padding: 20px 20px 14px; scroll-behavior: auto; overscroll-behavior: contain; overflow-anchor: none; scrollbar-gutter: stable; }
.vibe-empty { margin: 30px auto; max-width: 300px; text-align: center; color: var(--text-soft); font-size: 13px; line-height: 1.5; }
.vibe-message { max-width: 91%; margin: 0 0 18px; }
.vibe-message.human { margin-left: auto; background: linear-gradient(145deg, #f2f7fe, #eaf2fc); border: 1px solid color-mix(in srgb, var(--brand) 18%, var(--border)); border-radius: 14px 14px 4px 14px; padding: 11px 13px; box-shadow: 0 3px 12px rgba(10,78,162,.055); }
.vibe-message.agent { margin-right: auto; }
.vibe-message.system { max-width: 100%; text-align: center; color: var(--text-soft); font-size: 12px; padding: 5px 16px; }
.vibe-message-head { display: flex; align-items: center; gap: 7px; color: var(--text-faint); font-size: 10.5px; margin-bottom: 6px; }
.vibe-message-head strong { color: var(--text-soft); font-size: 12px; }
.vibe-avatar { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; background: var(--surface-3); color: #fff; font-size: 14px; font-weight: 800; overflow: hidden; flex: 0 0 auto; }
.vibe-page .ava-analyst { --agent-color: #7c5cff; background: var(--agent-color); }
.vibe-page .ava-researcher { --agent-color: #0891b2; background: var(--agent-color); }
.vibe-page .ava-planner { --agent-color: #2563eb; background: var(--agent-color); }
.vibe-page .ava-architect { --agent-color: #7c3aed; background: var(--agent-color); }
.vibe-page .ava-scribe { --agent-color: #0d9488; background: var(--agent-color); }
.vibe-page .ava-writer { --agent-color: var(--brand); background: var(--agent-color); }
.vibe-page .ava-editor { --agent-color: #db2777; background: var(--agent-color); }
.vibe-page .ava-stylist { --agent-color: #d97706; background: var(--agent-color); }
.vibe-page .ava-proofreader { --agent-color: var(--accent-dark); background: var(--agent-color); }
.vibe-page .ava-lawyer { --agent-color: #9a6a3a; background: var(--agent-color); }
.vibe-page .ava-auditor { --agent-color: #176d72; background: var(--agent-color); }

.quality-passport-host:not(:empty) { margin: 16px 0; }
.quality-passport-host > .quality-passport { margin: 0; }
.quality-passport {
  --quality-accent: #b4693d;
  --quality-accent-rgb: 180,105,61;
  position: relative; margin: 12px 0; overflow: hidden; color: var(--text);
  border: 1px solid color-mix(in srgb, var(--quality-accent) 20%, var(--border));
  border-radius: var(--radius-lg);
  background:
    radial-gradient(circle at 94% -18%, rgba(var(--quality-accent-rgb),.14), transparent 38%),
    linear-gradient(145deg, #fff 0%, #fbfcfe 52%, #f5f8fb 100%);
  box-shadow: 0 1px 2px rgba(16,24,40,.04), 0 16px 38px -22px rgba(24,45,68,.36);
}
.quality-passport::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 3px;
  background: linear-gradient(90deg, var(--quality-accent), color-mix(in srgb, var(--quality-accent) 45%, #fff), transparent 86%);
}
.quality-passport.is-passed { --quality-accent: #21875d; --quality-accent-rgb: 33,135,93; }
.quality-passport > header {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 20px 22px 16px;
}
.quality-passport-identity { display: flex; align-items: center; gap: 12px; min-width: 0; }
.quality-passport-seal {
  display: grid; width: 42px; height: 42px; flex: 0 0 auto; place-items: center;
  border: 1px solid rgba(var(--quality-accent-rgb),.22); border-radius: 13px;
  color: var(--quality-accent); background: rgba(var(--quality-accent-rgb),.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.82);
  font-size: 11px; font-weight: 850; letter-spacing: .09em;
}
.quality-passport .vibe-kicker { color: var(--text-faint); font-size: 9.5px; font-weight: 750; letter-spacing: .105em; }
.quality-passport-title { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 2px; }
.quality-passport-title > strong { color: var(--text); font-size: 17px; letter-spacing: -.015em; }
.quality-verdict {
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px;
  border: 1px solid rgba(var(--quality-accent-rgb),.2); border-radius: 99px;
  color: var(--quality-accent); background: rgba(var(--quality-accent-rgb),.07);
  font-size: 10px; font-weight: 750;
}
.quality-verdict::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 3px rgba(var(--quality-accent-rgb),.1); }
.quality-gate-score {
  position: relative; display: grid; width: 82px; height: 82px; flex: 0 0 auto; place-items: center;
  border-radius: 50%; color: var(--text); font-variant-numeric: tabular-nums;
  background: conic-gradient(var(--quality-accent) var(--score), #e7ecf2 0);
  box-shadow: 0 7px 18px rgba(16,24,40,.1);
}
.quality-gate-score::before { content: ""; position: absolute; inset: 6px; border-radius: inherit; background: rgba(255,255,255,.96); box-shadow: inset 0 0 0 1px rgba(255,255,255,.9); }
.quality-gate-score > div { position: relative; display: flex; width: 100%; height: 100%; align-items: center; justify-content: center; flex-direction: column; gap: 2px; text-align: center; }
.quality-gate-score b { font-size: 21px; line-height: 1; letter-spacing: -.025em; }
.quality-gate-score span { margin: 0; color: var(--text-faint); font-size: 7.5px; line-height: 1; }
.quality-score-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; padding: 0 22px 18px; }
.quality-engine {
  --meter-color: #4978b8; min-width: 0; padding: 12px 13px;
  border: 1px solid var(--border); border-radius: 11px;
  background: rgba(255,255,255,.74); box-shadow: 0 4px 12px -10px rgba(16,24,40,.5);
}
.quality-engine.is-strong, .quality-subscore-row.is-strong { --meter-color: #26936a; }
.quality-engine.is-watch, .quality-subscore-row.is-watch { --meter-color: #d18a20; }
.quality-engine.is-risk, .quality-subscore-row.is-risk { --meter-color: #cf5358; }
.quality-engine > span { display: block; color: var(--text-faint); font-size: 8.5px; font-weight: 700; letter-spacing: .075em; text-transform: uppercase; }
.quality-engine > div:first-of-type { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin: 4px 0 9px; }
.quality-engine strong { min-width: 0; color: var(--text-soft); font-size: 11px; line-height: 1.2; }
.quality-engine b { color: var(--text); font-size: 17px; line-height: 1; letter-spacing: -.025em; font-variant-numeric: tabular-nums; }
.quality-meter { height: 5px; overflow: hidden; border-radius: 99px; background: #e8edf3; }
.quality-meter i { display: block; width: var(--score); height: 100%; border-radius: inherit; background: var(--meter-color); box-shadow: 0 0 8px color-mix(in srgb, var(--meter-color) 40%, transparent); }
.quality-subscore-details { margin: 0 22px 18px; overflow: hidden; border: 1px solid var(--border); border-radius: 12px; background: rgba(247,249,252,.7); }
.quality-subscore-details > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 13px;
  cursor: pointer; color: var(--text-soft); font-size: 11px; font-weight: 700; user-select: none;
}
.quality-subscore-details > summary span:last-child { color: var(--text-faint); font-size: 10px; font-weight: 550; }
.quality-subscore-details[open] > summary { border-bottom: 1px solid var(--border); background: rgba(255,255,255,.55); }
.quality-subscore-panels { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0; }
.quality-subscore-panels > section { padding: 13px; }
.quality-subscore-panels > section + section { border-left: 1px solid var(--border); }
.quality-subscore-panels section > header { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 9px; }
.quality-subscore-panels section > header strong { color: var(--text); font-size: 11px; }
.quality-subscore-panels section > header span { color: var(--text-faint); font-size: 9px; }
.quality-subscore-list { display: grid; gap: 9px; }
.quality-subscore-row { --meter-color: #4978b8; }
.quality-subscore-row > div:first-child { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 4px; }
.quality-subscore-row span { overflow: hidden; color: var(--text-soft); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.quality-subscore-row strong { color: var(--text); font-size: 10px; font-variant-numeric: tabular-nums; }
.quality-subscore-row .quality-meter { height: 4px; }
.quality-reader-outcome {
  margin: 0 22px 18px; overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--quality-accent) 24%, var(--border));
  border-radius: 12px; background: rgba(var(--quality-accent-rgb),.035);
}
.quality-reader-outcome > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 13px; cursor: pointer; color: var(--text-soft);
  font-size: 11px; font-weight: 700; user-select: none;
}
.quality-reader-outcome > summary span:last-child {
  color: var(--quality-accent); font-size: 10px; font-weight: 600;
}
.quality-reader-outcome[open] > summary {
  border-bottom: 1px solid var(--border); background: rgba(255,255,255,.55);
}
.quality-outcome-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
.quality-outcome-grid > section { min-width: 0; padding: 13px; }
.quality-outcome-grid > section + section { border-left: 1px solid var(--border); }
.quality-outcome-grid .vibe-kicker { display: block; margin-bottom: 9px; }
.quality-outcome-grid section > div + div { margin-top: 10px; }
.quality-outcome-grid strong { display: block; color: var(--text); font-size: 10.5px; }
.quality-outcome-grid p {
  margin: 3px 0 0; color: var(--text-soft); font-size: 10.5px;
  line-height: 1.45; overflow-wrap: anywhere;
}
.quality-observed-reader { padding-left: 9px; border-left: 2px solid rgba(var(--quality-accent-rgb),.24); }
.quality-observed-reader p span { color: var(--text-faint); font-weight: 650; }
/* Five metrics, one row: the footer reads as a single band of numbers, so the
   column count follows the number of cells rather than a fixed four. */
.quality-passport > footer { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); border-top: 1px solid var(--border); background: rgba(244,247,250,.62); }
.quality-passport > footer > div { display: flex; align-items: baseline; justify-content: center; flex-wrap: wrap; gap: 2px 6px; padding: 9px 9px; color: var(--text-faint); font-size: 9.5px; text-align: center; }
.quality-passport > footer > div + div { border-left: 1px solid var(--border); }
.quality-passport > footer strong { color: var(--text-soft); font-size: 11px; font-variant-numeric: tabular-nums; }
.quality-passport > footer .has-blockers strong { color: var(--danger); }

/* The activity-stream version keeps the same information in the feed's quieter visual language. */
.quality-passport.is-compact { margin: 8px 0 6px; border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.quality-passport.is-compact::before { height: 2px; opacity: .72; }
.quality-passport.is-compact > header { gap: 12px; padding: 12px 13px 10px; }
.quality-passport.is-compact .quality-passport-seal { width: 32px; height: 32px; border-radius: 9px; font-size: 9px; }
.quality-passport.is-compact .quality-passport-title > strong { font-size: 13px; }
.quality-passport.is-compact .quality-gate-score { width: 62px; height: 62px; box-shadow: none; }
.quality-passport.is-compact .quality-gate-score::before { inset: 5px; }
.quality-passport.is-compact .quality-gate-score b { font-size: 16px; }
.quality-passport.is-compact .quality-gate-score span { font-size: 6.5px; }
.quality-passport.is-compact .quality-score-grid { gap: 6px; padding: 0 13px 11px; }
.quality-passport.is-compact .quality-engine { padding: 8px 9px; border-radius: 8px; box-shadow: none; }
.quality-passport.is-compact .quality-engine > span { display: none; }
.quality-passport.is-compact .quality-engine > div:first-of-type { margin: 0 0 6px; }
.quality-passport.is-compact .quality-engine strong { font-size: 9.5px; }
.quality-passport.is-compact .quality-engine b { font-size: 12px; }
.quality-passport.is-compact .quality-subscore-details { margin: 0 13px 11px; border-radius: 8px; }
.quality-passport.is-compact .quality-subscore-details > summary { padding: 7px 9px; font-size: 10px; }
.quality-passport.is-compact .quality-subscore-panels > section { padding: 10px; }
.quality-passport.is-compact .quality-reader-outcome { margin: 0 13px 11px; border-radius: 8px; }
.quality-passport.is-compact .quality-reader-outcome > summary { padding: 7px 9px; font-size: 10px; }
.quality-passport.is-compact .quality-outcome-grid > section { padding: 10px; }
.quality-passport.is-compact > footer > div { padding: 7px 6px; gap: 1px 5px; }
.quality-passport.is-compact > footer span { font-size: 8.5px; }

/* Auditor call records use the same calm, collapsible treatment as reasoning in Activity. */
.auditor-activity-records { margin: 8px 0 4px; overflow: hidden; border: 1px solid #cbd5e1; border-radius: var(--radius-sm); background: #f8fafc; color: var(--text-muted); }
.auditor-activity-records > summary { display: flex; flex-wrap: wrap; align-items: center; gap: 3px 8px; padding: 8px 11px; cursor: pointer; color: #526174; font-size: 12px; font-weight: 650; user-select: none; }
.auditor-activity-records > summary::before { content: "▦"; flex: 0 0 auto; color: #176d72; font-size: 13px; }
.auditor-activity-records[open] > summary { border-bottom: 1px solid #dbe3ec; }
.auditor-activity-records > summary > span:first-of-type { flex: 1 1 auto; min-width: 0; }
.auditor-record-count { flex: 0 0 auto; margin-left: auto; color: var(--text-faint); font-size: 10px; font-weight: 550; }
.auditor-records-list { background: rgba(255,255,255,.5); }
.auditor-evaluator-record { overflow: hidden; border-bottom: 1px solid var(--border); }
.auditor-evaluator-record:last-child { border-bottom: 0; }
/* The record label wins the space contest: the model chip and runtime summary
   wrap onto a second line rather than squeezing the title into an ellipsis —
   which, in the narrow Vibe chat pane, hid it completely. */
.auditor-evaluator-record > summary { display: flex; flex-wrap: wrap; align-items: center; gap: 3px 8px; padding: 8px 10px; cursor: pointer; color: var(--text-soft); font-size: 11px; }
.auditor-evaluator-record > summary:hover { background: rgba(238,244,252,.65); }
.auditor-evaluator-record[open] > summary { color: var(--text); background: var(--surface-2); }
.auditor-record-index { display: grid; width: 21px; height: 21px; flex: 0 0 auto; place-items: center; border-radius: 6px; color: #176d72; background: #e5f2f2; font-size: 9px; font-weight: 800; font-variant-numeric: tabular-nums; }
.auditor-evaluator-record > summary strong { flex: 1 1 auto; min-width: 0; font-size: 11px; overflow-wrap: anywhere; }
.auditor-record-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 3px 6px; min-width: 0; margin-left: auto; }
.auditor-record-meta > .small { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.auditor-evaluator-record .runtime-detail { margin: 0; border-width: 1px 0 0; border-radius: 0; }
.auditor-evaluator-record .agent-reasoning { margin: 0; border-width: 1px 0 0; border-radius: 0; }
.auditor-final-answer { margin: 0; padding: 10px 12px; max-height: 300px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; color: #475569; background: #f8fafc; font: 12px/1.5 var(--mono); }
.auditor-evaluator-record > .agent-final-label { margin: 0; padding: 8px 12px 4px; border-top: 1px solid #dbe3ec; background: #f8fafc; }
@media (max-width: 860px) {
  .quality-score-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .quality-passport > footer { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .quality-passport > footer > div:nth-child(odd) { border-left: 0; }
  .quality-passport > footer > div:nth-child(n+3) { border-top: 1px solid var(--border); }
}
@media (max-width: 680px) {
  .quality-passport > header { align-items: flex-start; padding: 16px 15px 13px; }
  .quality-passport-seal { display: none; }
  .quality-score-grid { padding: 0 15px 14px; }
  .quality-subscore-details { margin: 0 15px 14px; }
  .quality-subscore-panels { grid-template-columns: 1fr; }
  .quality-subscore-panels > section + section { border-top: 1px solid var(--border); border-left: 0; }
  .quality-reader-outcome { margin: 0 15px 14px; }
  .quality-outcome-grid { grid-template-columns: 1fr; }
  .quality-outcome-grid > section + section { border-top: 1px solid var(--border); border-left: 0; }
  .auditor-record-meta .model-chip { display: none; }
  .log-item-audit { display: grid; grid-template-columns: 30px minmax(0,1fr); gap: 0 9px; }
  .log-item-audit > .log-body { display: contents; }
  .log-item-audit .log-meta { grid-column: 2; flex-wrap: wrap; row-gap: 3px; line-height: 1.35; }
  .log-item-audit .log-content,
  .log-item-audit .auditor-activity-records { grid-column: 1 / -1; margin-top: 8px; }
}
.vibe-avatar.ava-system { background: #94a3b8; }
/* .vibe-avatar paints a light tile and writes on it in white, and every agent
   avatar overrides the tile. The assistant's rule lived with the summon chip,
   far above this one, so it lost on source order and the assistant alone was
   left writing white on near-white. */
.vibe-avatar.ava-assistant { background: var(--accent); color: #fff; }
.vibe-user-avatar { position: relative; border: 1px solid rgba(10,78,162,.24); background: linear-gradient(145deg,#fff 8%,#e8f0fa 100%); box-shadow: 0 2px 7px rgba(10,78,162,.14); }
.vibe-user-avatar .account-avatar { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%) scale(.55); transform-origin: center; }
.vibe-message-body { font-size: 13.5px; line-height: 1.57; overflow-wrap: anywhere; }
.vibe-message-body > :first-child { margin-top: 0; }
.vibe-message-body > :last-child { margin-bottom: 0; }
.vibe-message-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin-top: 6px; }
.vibe-link { border: 0; background: transparent; color: var(--text-faint); padding: 0; font: inherit; font-size: 10.5px; cursor: pointer; }
.vibe-link:hover { color: var(--brand); }
.vibe-link:disabled { opacity: .5; cursor: default; }
/* A pinned message says so, and its action offers the reverse. */
.vibe-link.is-pinned { color: var(--brand); font-weight: 700; }
.vibe-link.is-pinned:hover { color: var(--danger); }
.vibe-message.is-pinned .vibe-message-body { border-left: 2px solid color-mix(in srgb, var(--brand) 55%, var(--surface)); padding-left: 9px; }
.vibe-action { border-radius: 9px; padding: 2px 7px; font-size: 10px; font-weight: 700; }
.vibe-action.applied { color: var(--ok); background: var(--ok-bg); }
.vibe-action.suggestion { color: var(--warn); background: var(--warn-bg); }
.vibe-action.delegation { color: var(--brand); background: var(--brand-tint); }
.vibe-delegation-card { margin-top: 9px; padding: 9px 10px; border: 1px solid #cfe0f5; border-radius: 10px; background: #f6f9fd; color: var(--text-soft); font-size: 11px; }
.vibe-delegation-card > div { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; color: var(--text); }
.vibe-delegation-card > div i { width: 18px; height: 1px; background: var(--border-strong); }
.vibe-delegation-card > div strong { margin-right: auto; }
.vibe-delegation-card > div em { color: var(--brand); font-size: 9px; font-style: normal; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.vibe-delegation-card p { margin: 5px 0 0; line-height: 1.4; }
.vibe-delegation-card small { display: block; margin-top: 6px; color: var(--text-faint); }
.vibe-delegation-card.is-refused { border-color: color-mix(in srgb, var(--warn) 35%, var(--border)); background: var(--warn-bg); }
.vibe-delegation-card.is-unused { display: flex; align-items: center; gap: 7px; background: var(--surface-subtle); color: var(--text-faint); }
.vibe-delegation-card.is-unused strong { color: var(--text-soft); white-space: nowrap; }
.vibe-working { border: 1px solid var(--border); border-radius: 12px; padding: 11px 12px; color: var(--text-soft); font-size: 12px; display: flex; align-items: center; gap: 10px; background: linear-gradient(135deg, var(--surface), var(--surface-2)); box-shadow: var(--shadow-sm); }
.vibe-agent-working { display: grid; grid-template-columns: auto minmax(0,1fr) auto; }
.vibe-agent-working > div:not(.token-meter) { min-width: 0; }
.vibe-agent-working > div:not(.token-meter) strong, .vibe-agent-working > div:not(.token-meter) > span { display: block; }
.vibe-agent-working > div:not(.token-meter) strong { color: var(--text); font-size: 12px; }
.vibe-agent-working > div:not(.token-meter) > span { margin-top: 1px; color: var(--text-soft); line-height: 1.35; }
.vibe-working-avatar { position: relative; flex: 0 0 auto; }
.vibe-working-dots { display: flex; align-items: center; gap: 3px; padding-right: 2px; }
.vibe-working-dots i { width: 4px; height: 4px; border-radius: 50%; background: var(--brand); animation: vibe-agent-dot 1.2s ease-in-out infinite; }
.vibe-working-dots i:nth-child(2) { animation-delay: .14s; }
.vibe-working-dots i:nth-child(3) { animation-delay: .28s; }
.vibe-agent-working > .token-meter { grid-column: 1 / -1; margin-top: 3px; }
/* The compact token strip used by the project room's assistant. It has to span
   the grid like the meter above, and it has to be exempted from the two rules
   directly above, which are written for the label column: they stack every
   figure onto its own line and restyle the numbers inside it. */
.vibe-agent-working > .token-usage-compact { grid-column: 1 / -1; margin-top: 7px; }
.vibe-agent-working > div.token-usage-compact > span { display: inline; margin-top: 0; }
.vibe-agent-working > div.token-usage-compact strong {
  display: inline; color: inherit; font-size: inherit; }
.vibe-agent-working > .managed-writing-activity { grid-column: 1 / -1; margin: 3px 0 0; }
@keyframes vibe-agent-dot { 0%, 65%, 100% { opacity: .25; transform: translateY(0); } 35% { opacity: 1; transform: translateY(-3px); } }
.vibe-composer { flex: 0 0 auto; border-top: 1px solid var(--border); padding: 12px 14px 14px; position: relative; background: linear-gradient(180deg, rgba(248,250,253,.88), #fff 26%); }
.vibe-selection-context { margin-bottom: 7px; }
.vibe-selection-chip { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 8px; min-height: 34px; padding: 6px 7px 6px 9px; border: 1px solid #cfe0f5; border-radius: 9px; background: #f3f7fd; color: var(--text-soft); }
.vibe-selection-kind { color: var(--brand); font-size: 10px; font-weight: 750; white-space: nowrap; }
.vibe-selection-chip q { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; quotes: "“" "”"; }
.vibe-selection-chip button { width: 22px; height: 22px; border: 0; border-radius: 6px; background: transparent; color: var(--text-faint); cursor: pointer; }
.vibe-selection-chip button:hover { background: var(--surface); color: var(--danger); }
.vibe-prompt-shell { display: flex; align-items: flex-start; gap: 8px; min-height: 76px; padding: 8px 10px; border: 1px solid var(--border-strong); border-radius: 12px; background: var(--surface); box-shadow: inset 0 1px 2px rgba(16,24,40,.025); transition: border-color .15s, box-shadow .15s; }
.vibe-prompt-shell:focus-within { border-color: color-mix(in srgb, var(--brand) 76%, white); box-shadow: var(--shadow-focus), inset 0 1px 2px rgba(16,24,40,.02); }
.vibe-prompt-shell textarea { flex: 1; min-width: 0; min-height: 56px; resize: none; border: 0; padding: 5px 2px; background: transparent; box-shadow: none; }
.vibe-prompt-shell textarea:focus { border: 0; box-shadow: none; }
.vibe-prompt-shell:not(.has-agent) #vibe-summon-chip { display: none; }
.vibe-summon-chip { display: inline-flex; align-items: center; gap: 5px; min-height: 30px; margin-top: 1px; padding: 4px 7px; border-radius: 8px; color: #fff; font-size: 11.5px; white-space: nowrap; }
.vibe-summon-chip button { border: 0; background: rgba(255,255,255,.18); color: inherit; width: 17px; height: 17px; padding: 0; border-radius: 50%; cursor: pointer; }
.vibe-agent-permissions { display: flex; align-items: center; flex-wrap: wrap; gap: 7px 14px; padding: 7px 3px 0; color: var(--text-soft); font-size: 10.5px; }
.vibe-agent-permissions label { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; }
.vibe-agent-permissions input { margin: 0; accent-color: var(--brand); }
.vibe-agent-permissions > span { margin-left: auto; color: var(--text-faint); }
.vibe-agent-permissions label:has(input:disabled) { cursor: not-allowed; opacity: .58; }
.vibe-plan-teammate-button { padding: 0; font-size: 10.5px; font-weight: 750; }
.vibe-plan-teammate-button:disabled { cursor: default; opacity: .45; }
.vibe-teamwork-plan { margin-top: 8px; padding: 10px; border: 1px solid #cbdcf3; border-radius: 10px; background: #f5f8fd; }
.vibe-teamwork-plan-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 8px; }
.vibe-teamwork-plan-head strong, .vibe-teamwork-plan-head span { display: block; }
.vibe-teamwork-plan-head strong { color: var(--text); font-size: 11.5px; }
.vibe-teamwork-plan-head span { margin-top: 1px; color: var(--brand); font-size: 10px; font-weight: 700; }
.vibe-teamwork-plan-head button { padding: 1px 0; font-size: 10.5px; }
.vibe-teamwork-plan-fields { display: grid; grid-template-columns: minmax(105px,.7fr) minmax(135px,.9fr) minmax(210px,2fr); gap: 8px; }
.vibe-teamwork-plan-fields label { display: grid; gap: 3px; color: var(--text-soft); font-size: 9.5px; font-weight: 750; text-transform: uppercase; letter-spacing: .04em; }
.vibe-teamwork-plan-fields select, .vibe-teamwork-plan-fields input { width: 100%; min-width: 0; height: 32px; padding: 5px 8px; border: 1px solid var(--border-strong); border-radius: 7px; background: var(--surface); color: var(--text); font-size: 11px; font-weight: 500; text-transform: none; letter-spacing: normal; }
.vibe-teamwork-plan > small { display: block; margin-top: 7px; color: var(--text-soft); line-height: 1.35; }
@media (max-width: 760px) {
  .vibe-agent-permissions > span { width: 100%; margin-left: 0; }
  .vibe-teamwork-plan-fields { grid-template-columns: 1fr 1fr; }
  .vibe-teamwork-task { grid-column: 1 / -1; }
}
.vibe-compose-foot { display: grid; grid-template-columns: auto minmax(80px, 1fr) auto; gap: 10px; align-items: center; margin-top: 9px; }
.vibe-compose-foot > .small { text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* The grid centres its items, so the icon button needs an explicit box (the
   Assistant composer gets its height from stretching beside the textarea). */
.vibe-compose-foot .chat-send-button { width: 44px; min-width: 44px; height: 34px; }
.vibe-compose-foot .chat-send-button svg { width: 19px; height: 19px; }
.vibe-reply { padding: 5px 8px; margin-bottom: 5px; border-radius: 7px; background: var(--surface-3); font-size: 11px; display: flex; justify-content: space-between; }
.vibe-reply button { border: 0; background: transparent; cursor: pointer; }
.vibe-agent-menu { position: absolute; left: 14px; right: 14px; bottom: calc(100% - 5px); z-index: 4; max-height: 320px; overflow-y: auto; padding: 7px; border: 1px solid var(--border-strong); border-radius: 14px; background: var(--surface); box-shadow: var(--shadow-lg); }
.vibe-agent-menu-head { position: sticky; top: -7px; z-index: 1; padding: 7px 6px 8px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; background: var(--surface); }
.vibe-agent-menu-head strong { font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--text-soft); }
.vibe-agent-menu-head button { width: 25px; height: 25px; border: 0; border-radius: 7px; background: var(--surface-2); color: var(--text-soft); cursor: pointer; }
.vibe-agent-options { padding-top: 4px; }
.vibe-agent-options > button { width: 100%; border: 0; border-radius: 8px; background: transparent; color: var(--text); padding: 8px; display: flex; gap: 9px; text-align: left; cursor: pointer; }
.vibe-agent-options > button:hover, .vibe-agent-options > button:focus { outline: none; background: var(--brand-tint); }
.vibe-agent-options > button > span { width: 30px; height: 30px; flex: 0 0 auto; border-radius: 8px; display: grid; place-items: center; color: #fff; font-weight: 800; }
.vibe-agent-menu strong, .vibe-agent-menu small { display: block; }
.vibe-agent-menu small { color: var(--text-soft); margin-top: 2px; }
.vibe-agent-empty { padding: 18px 10px; text-align: center; color: var(--text-faint); font-size: 12px; }
/* Summoning a colleague: the mention menu carries People beside Agents, and the
   composer chip shows a face rather than an agent icon. */
.vibe-menu-group { padding: 8px 8px 3px; font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--text-faint); }
.vibe-agent-options > button > span .account-avatar, .vibe-summon-chip .account-avatar { width: 100%; height: 100%; }
.vibe-summon-chip.vibe-summon-person { background: var(--surface-3); color: var(--text); gap: 6px; }
.vibe-summon-chip.vibe-summon-person .account-avatar { width: 20px; height: 20px; border-radius: 6px; }
.vibe-summon-chip.vibe-summon-person button { background: rgba(16,24,40,.12); }
.vibe-summon-new { font-style: normal; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--brand); }
.vibe-team-manage { margin-left: 8px; }
.vibe-person-list { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.vibe-person-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
.vibe-person-row .account-avatar { width: 30px; height: 30px; border-radius: 8px; flex: 0 0 auto; }
.vibe-person-id { flex: 1 1 auto; min-width: 0; }
.vibe-person-id strong, .vibe-person-id small { display: block; }
.vibe-canvas { display: flex; flex-direction: column; background: #eef2f7; }
.vibe-canvas-head { width: 100%; }
.vibe-kicker { font-size: 10px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--brand); }
.vibe-canvas-actions { display: flex; align-items: center; gap: 12px; }
.vibe-document-meta { display: flex; align-items: center; gap: 9px; color: var(--text-faint); font-size: 11px; white-space: nowrap; }
.vibe-document-meta i { width: 3px; height: 3px; border-radius: 50%; background: var(--border-strong); }
.vibe-document-meta .is-dirty { color: var(--warn); font-weight: 700; }
.vibe-editor-bar { min-height: 46px; padding: 7px 14px; border-bottom: 1px solid rgba(205,213,225,.9); display: flex; align-items: center; gap: 12px; background: rgba(255,255,255,.9); box-shadow: 0 1px 0 rgba(255,255,255,.9); }
.vibe-mode-switch { flex: 0 0 auto; display: inline-flex; padding: 3px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface-2); }
.vibe-mode-switch button { min-height: 28px; padding: 4px 10px; border: 0; border-radius: 6px; background: transparent; color: var(--text-soft); font-size: 11px; font-weight: 700; cursor: pointer; }
.vibe-mode-switch button:hover { color: var(--text); }
.vibe-mode-switch button.active { background: var(--surface); color: var(--brand); box-shadow: 0 1px 3px rgba(16,24,40,.14); }
.vibe-format-tools { min-width: 0; display: flex; align-items: center; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.vibe-format-tools::-webkit-scrollbar { display: none; }
.vibe-format-tools select, .vibe-format-tools button { min-height: 30px; border: 1px solid transparent; border-radius: 7px; background: transparent; color: var(--text-soft); font: inherit; font-size: 11px; cursor: pointer; white-space: nowrap; }
.vibe-format-tools select { width: 96px; padding: 3px 7px; border-color: var(--border); background: var(--surface); }
.vibe-format-tools button { padding: 4px 8px; }
.vibe-format-tools button:hover, .vibe-format-tools button:focus-visible { border-color: var(--border); background: var(--brand-tint); color: var(--brand); outline: 0; }
.vibe-tool-divider { width: 1px; height: 20px; margin: 0 2px; background: var(--border); flex: 0 0 auto; }
.vibe-editor-help { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-faint); font-size: 11px; }
.vibe-history-tools { flex: 0 0 auto; margin-left: auto; display: inline-flex; align-items: center; gap: 3px; padding-left: 10px; border-left: 1px solid var(--border); }
.vibe-history-tools button { min-height: 30px; padding: 4px 8px; border: 1px solid transparent; border-radius: 7px; background: transparent; color: var(--text-soft); font: inherit; font-size: 11px; cursor: pointer; white-space: nowrap; }
.vibe-history-tools button span { font-size: 15px; line-height: 0; vertical-align: -1px; }
.vibe-history-tools button:hover:not(:disabled), .vibe-history-tools button:focus-visible:not(:disabled) { border-color: var(--border); background: var(--brand-tint); color: var(--brand); outline: 0; }
.vibe-history-tools button:disabled { opacity: .38; cursor: default; }
.vibe-canvas-scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; padding: 20px clamp(20px, 2.2vw, 34px) 42px; }
.vibe-paper { width: 100%; max-width: 920px; min-height: 100%; margin: 0 auto; padding: clamp(28px, 3vw, 48px); border: 1px solid rgba(205,213,225,.8); border-radius: 8px; background: var(--surface); box-shadow: 0 2px 4px rgba(16,24,40,.03), 0 18px 42px -18px rgba(16,24,40,.2); }
.vibe-field { margin-bottom: 27px; }
.vibe-field:last-child { margin-bottom: 0; }
.vibe-field textarea { width: 100%; resize: vertical; border-color: transparent; background: transparent; padding: 8px 3px; font-family: inherit; font-size: 15px; line-height: 1.64; }
.vibe-field:first-child textarea { font-size: 26px; line-height: 1.25; font-weight: 750; }
.vibe-field textarea:hover { border-color: var(--border); background: #fbfcfe; }
.vibe-field textarea:focus { border-color: var(--brand); background: var(--surface); box-shadow: var(--shadow-focus); }
.vibe-field textarea[data-field-type="richtext"] { padding: 13px 14px; border-color: var(--border); border-radius: 9px; background: #fbfcfe; font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace; font-size: 12.5px; line-height: 1.58; tab-size: 2; }
.vibe-rich-editor { min-height: max(112px, calc(var(--vibe-editor-lines, 7) * 1.64em + 28px)); padding: 13px 14px; border: 1px solid transparent; border-radius: 9px; background: transparent; color: var(--text); font-family: inherit; font-size: 15px; line-height: 1.64; outline: 0; transition: border-color .14s, background .14s, box-shadow .14s; }
.vibe-rich-editor:hover { border-color: var(--border); background: #fbfcfe; }
.vibe-rich-editor[contenteditable="true"]:focus { border-color: var(--brand); background: var(--surface); box-shadow: var(--shadow-focus); }
.vibe-rich-editor:empty::before { content: attr(data-placeholder); color: var(--text-faint); pointer-events: none; }
.vibe-rich-editor p { margin: 0 0 .9em; }
.vibe-rich-editor p:last-child { margin-bottom: 0; }
.vibe-rich-editor h2 { margin: 1.25em 0 .45em; font-size: 1.42em; line-height: 1.25; letter-spacing: -.015em; }
.vibe-rich-editor h3 { margin: 1.15em 0 .4em; font-size: 1.18em; line-height: 1.3; }
.vibe-rich-editor ul, .vibe-rich-editor ol { margin: .65em 0 .9em; padding-left: 1.55em; }
.vibe-rich-editor li + li { margin-top: .25em; }
.vibe-rich-editor a { color: var(--brand); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; cursor: pointer; }
.vibe-link-dialog label { display: block; margin: 13px 0 5px; color: var(--text-soft); font-size: 12px; font-weight: 700; }
.vibe-link-dialog input { width: 100%; }
.vibe-versions-title { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.vibe-versions-title h2 { margin: 2px 0 0; }
.vibe-versions-title > span { padding: 5px 9px; border-radius: 99px; background: var(--surface-3); color: var(--text-soft); font-size: 11px; font-weight: 700; }
.vibe-compare-panel { margin: 20px 0; padding: 18px; border: 1px solid var(--border); border-radius: 14px; background: linear-gradient(145deg, #fbfcfe, #f6f8fb); }
.vibe-compare-heading strong, .vibe-compare-heading span { display: block; }
.vibe-compare-heading strong { font-size: 14px; color: var(--text); }
.vibe-compare-heading span { margin-top: 2px; color: var(--text-faint); font-size: 11px; }
.vibe-compare-controls { display: grid; grid-template-columns: minmax(170px, 1fr) auto minmax(170px, 1fr) auto; align-items: end; gap: 10px; margin-top: 14px; }
.vibe-compare-controls label { color: var(--text-soft); font-size: 11px; font-weight: 700; }
.vibe-compare-controls select { width: 100%; margin-top: 5px; background: var(--surface); }
.vibe-compare-arrow { align-self: center; margin-top: 18px; color: var(--brand); font-size: 18px; font-weight: 700; }
.vibe-compare-controls .btn { min-height: 38px; }
.vibe-diff-result { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--border); }
.vibe-diff-summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.vibe-diff-summary h3 { margin: 3px 0 0; font-size: 17px; letter-spacing: -.01em; }
.vibe-diff-summary h3 span { padding: 0 5px; color: var(--brand); }
.vibe-diff-summary > span { padding: 5px 9px; border-radius: 99px; background: var(--brand-tint); color: var(--brand); font-size: 11px; font-weight: 750; white-space: nowrap; }
.vibe-diff-legend { display: flex; flex-wrap: wrap; gap: 14px; margin: 12px 0; color: var(--text-faint); font-size: 10.5px; }
.vibe-diff-legend span { display: inline-flex; align-items: center; gap: 5px; }
.vibe-diff-legend i { width: 10px; height: 10px; border-radius: 3px; }
.vibe-diff-legend .removed { background: #fde2e2; border: 1px solid #f2b8b8; }
.vibe-diff-legend .added { background: #dcf6e7; border: 1px solid #a9dfbd; }
.vibe-diff-fields { display: grid; gap: 10px; }
.vibe-diff-field { border: 1px solid var(--border); border-radius: 11px; background: var(--surface); overflow: hidden; }
.vibe-diff-field.is-unchanged { background: rgba(255,255,255,.62); }
.vibe-diff-field > header { min-height: 42px; padding: 9px 12px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--border); }
.vibe-diff-field > header strong { font-size: 12.5px; }
.vibe-diff-status { padding: 3px 7px; border-radius: 99px; font-size: 9.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .035em; }
.vibe-diff-status.changed { color: var(--brand); background: var(--brand-tint); }
.vibe-diff-status.markup { color: #8a5a12; background: #fff2d4; }
.vibe-diff-status.unchanged { color: var(--text-faint); background: var(--surface-3); }
.vibe-diff-inline { padding: 14px; color: var(--text); font-size: 13px; line-height: 1.65; white-space: pre-wrap; overflow-wrap: anywhere; }
.vibe-diff-inline del { margin: 0 1px; padding: 1px 2px; border-radius: 3px; background: #fde2e2; color: #9c2f2f; text-decoration-color: #c96b6b; }
.vibe-diff-inline ins { margin: 0 1px; padding: 1px 2px; border-radius: 3px; background: #dcf6e7; color: #176b3a; text-decoration: none; }
.vibe-diff-markup-note, .vibe-diff-unchanged { margin: 0; padding: 12px 14px; color: var(--text-faint); font-size: 11.5px; }
.vibe-diff-rendered { padding: 0 14px 14px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.vibe-diff-rendered > div > span { display: block; margin-bottom: 5px; color: var(--text-faint); font-size: 9.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .045em; }
.vibe-diff-preview { min-height: 72px; max-height: 230px; overflow: auto; padding: 11px 12px; border: 1px solid var(--border); border-radius: 8px; background: #fbfcfe; font-size: 12px; line-height: 1.55; }
.vibe-diff-preview > :first-child { margin-top: 0; }
.vibe-diff-preview > :last-child { margin-bottom: 0; }
.vibe-diff-preview a { color: var(--brand); text-decoration: underline; }
.vibe-version-list { max-height: 34vh; overflow: auto; padding-right: 4px; }
.vibe-version-list > div { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 9px 0; border-bottom: 1px solid var(--border); font-size: 12px; }

@media (max-width: 1180px) {
  .vibe-team > span:last-child { display: none; }
  .vibe-document-meta #vibe-word-count, .vibe-document-meta i { display: none; }
}
@media (max-width: 980px) {
  .content:has(.vibe-page) { overflow-y: auto; }
  #view:has(.vibe-page) { height: auto; }
  .vibe-page { height: auto; min-height: calc(100vh - 58px); overflow: visible; }
  .vibe-topbar { grid-template-columns: auto 1fr; }
  .vibe-topbar > .btn-row { grid-column: 1 / -1; }
  .vibe-layout { display: flex; flex-direction: column; overflow: visible; }
  .vibe-chat { min-height: 620px; }
  .vibe-canvas { min-height: 720px; overflow: hidden; }
  .vibe-canvas-scroll { overflow: visible; }
}
@media (max-width: 620px) {
  .mode-choice { grid-template-columns: 1fr; }
  .vibe-topbar { padding: 9px; }
  .vibe-title-block input { font-size: 17px; }
  .vibe-compose-foot { grid-template-columns: 1fr auto; }
  .vibe-compose-foot > .small { grid-column: 1 / -1; grid-row: 1; text-align: left; }
  .vibe-paper { padding: 22px 17px; }
  .vibe-compare-controls { grid-template-columns: 1fr; }
  .vibe-compare-arrow { display: none; }
  .vibe-diff-summary { align-items: flex-start; flex-direction: column; }
  .vibe-diff-rendered { grid-template-columns: 1fr; }
}

/* ===========================================================================
   The Brain (doc 16) — a read-only window onto the always-on cognition layer.
   Two lenses share one graph: Constellation (relationships) and Atlas (the
   wiki). The palette is the orbital one already used across the app; node
   colour carries kind, node size carries how central a note is.
   ========================================================================= */
.brain-page { max-width: 1440px; }
.brain-head { align-items: flex-start; gap: var(--sp-4); }
.brain-head h1 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.brain-actions { margin: 0; flex: 0 0 auto; }

/* "This thing is running" — the single most important signal on the page. */
.brain-live {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: var(--text-faint); background: var(--surface-2);
  border: 1px solid var(--border); border-radius: 999px; padding: 3px 10px 3px 8px;
}
.brain-live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--text-faint); }
.brain-live-live { color: var(--accent-dark); border-color: rgba(0,179,164,.35); background: rgba(0,179,164,.08); }
.brain-live-live .brain-live-dot { background: var(--accent); animation: brain-breathe 2.4s ease-in-out infinite; }
.brain-live-warn { color: var(--warn); border-color: rgba(196,125,0,.3); background: var(--warn-bg); }
@keyframes brain-breathe {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0,179,164,.55); opacity: 1; }
  50% { box-shadow: 0 0 0 5px rgba(0,179,164,0); opacity: .55; }
}

.brain-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--sp-3); margin-bottom: var(--sp-4); }
.brain-stat {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 12px 14px; display: flex; flex-direction: column; gap: 1px; box-shadow: var(--shadow-sm);
}
.brain-stat-v { font-size: 24px; font-weight: 650; letter-spacing: -.02em; line-height: 1.15; }
.brain-stat-l { font-size: 12.5px; color: var(--text-soft); }
.brain-stat-h { font-size: 11.5px; color: var(--text-faint); }

.brain-pulse {
  background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--accent);
  border-radius: var(--radius); padding: 8px 12px; margin-bottom: var(--sp-4);
  max-height: 132px; overflow: hidden;
}
.brain-pulse-row { display: flex; gap: 10px; align-items: baseline; padding: 2px 0; font-size: 13px; animation: brain-slide .35s ease; }
.brain-pulse-time { flex: 0 0 74px; color: var(--text-faint); font-size: 11.5px; }
.brain-pulse-text { color: var(--text-soft); }
.brain-pulse-row.ok .brain-pulse-text { color: var(--text); }
.brain-pulse-row.think .brain-pulse-text { color: var(--accent-dark); }
.brain-pulse-row.err .brain-pulse-text { color: var(--danger); }
@keyframes brain-slide { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

.brain-lensbar { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-4); flex-wrap: wrap; margin-bottom: var(--sp-3); }
.brain-lenses { display: inline-flex; background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; padding: 3px; }
.brain-lens { border: 0; background: transparent; color: var(--text-soft); font: inherit; font-size: 13px; font-weight: 550; padding: 6px 16px; border-radius: 999px; cursor: pointer; }
.brain-lens.active { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); }
.brain-filters { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.brain-filters .filter-search { min-width: 240px; }

/* ---------------------------------------------------------------------------
   The constellation — an observatory panel set into the page.

   The map itself is one <canvas>, so almost nothing here styles the picture;
   what these rules own is the field it sits in. Everything that keeps moving
   while the map is idle lives here rather than in JavaScript, because a CSS
   transform on a promoted layer is composited on the GPU and never wakes the
   main thread. The nebula drifts for free; the canvas sleeps.

   The panel is dark on a light page deliberately. Points of light only read as
   light against a dark field, and the one thing this view has to convey is
   that a lot of small things are connected and some of them are brighter than
   the rest. On white that is a diagram; on this it is a sky.
   --------------------------------------------------------------------------- */
/* The panel is the stage, not the canvas: the map gets the top of it and the
   key gets a band along the bottom. They share one dark field and one border,
   but the map can never reach into the key's rows, so the layout no longer has
   to leave a hole in itself for a floating legend. */
.brain-stage {
  display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid #1b2740; border-radius: var(--radius-lg);
  background: radial-gradient(125% 95% at 50% -12%, #17253f 0%, #0d1526 46%, #070c17 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), var(--shadow);
}
.brain-canvas {
  position: relative; isolation: isolate; overflow: hidden;
  height: min(70vh, 780px); min-height: 520px;
  display: flex; align-items: center; justify-content: center;
  background: transparent; border: 0; box-shadow: none;
  color: #c3d0e6; cursor: default;
}
/* Two slow nebulae. Only `transform` animates, so these never repaint. */
.brain-canvas::before, .brain-canvas::after {
  content: ""; position: absolute; inset: -28%; z-index: 0; pointer-events: none;
  will-change: transform;
}
.brain-canvas::before {
  background: radial-gradient(closest-side, rgba(26, 108, 216, .22), transparent 72%);
  animation: brain-drift-a 34s ease-in-out infinite alternate;
}
.brain-canvas::after {
  background: radial-gradient(closest-side, rgba(0, 179, 164, .16), transparent 72%);
  animation: brain-drift-b 47s ease-in-out infinite alternate;
}
@keyframes brain-drift-a {
  from { transform: translate3d(-15%, -9%, 0) scale(1); }
  to { transform: translate3d(11%, 8%, 0) scale(1.18); }
}
@keyframes brain-drift-b {
  from { transform: translate3d(17%, 11%, 0) scale(1.12); }
  to { transform: translate3d(-13%, -6%, 0) scale(.93); }
}

.brain-sky-wrap { position: absolute; inset: 0; z-index: 1; }
.brain-sky { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
/* Star dust: a tiled background painted once and then only composited, so the
   twinkle costs an opacity change on an existing layer and nothing else. */
.brain-sky-wrap::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: -1;
  background-image:
    radial-gradient(1.1px 1.1px at 18px 34px, rgba(255, 255, 255, .30), transparent),
    radial-gradient(1px 1px at 132px 12px, rgba(180, 215, 255, .24), transparent),
    radial-gradient(1.3px 1.3px at 76px 118px, rgba(255, 255, 255, .20), transparent),
    radial-gradient(1px 1px at 198px 86px, rgba(160, 255, 240, .20), transparent),
    radial-gradient(1px 1px at 226px 156px, rgba(255, 255, 255, .16), transparent);
  background-size: 250px 190px;
  animation: brain-twinkle 7.5s ease-in-out infinite alternate;
}
@keyframes brain-twinkle { from { opacity: .55; } to { opacity: 1; } }
/* A refresh is a slow sweep of light rather than a spinner, so a depth change
   reads as the map re-focusing instead of as the page reloading. */
.brain-canvas[aria-busy="true"] .brain-sky-wrap::after {
  content: ""; position: absolute; inset: 0 -40%; pointer-events: none;
  background: linear-gradient(100deg, transparent 42%, rgba(120, 200, 255, .12) 50%, transparent 58%);
  animation: brain-sweep 1.6s cubic-bezier(.4, 0, .2, 1) infinite;
}
@keyframes brain-sweep { from { transform: translateX(-55%); } to { transform: translateX(55%); } }

/* The entry under the pointer, named. A real element rather than an SVG
   <title>: no one-second delay, no operating-system chrome. */
.brain-tip {
  position: absolute; top: 0; left: 0; z-index: 3; pointer-events: none;
  display: grid; gap: 2px; max-width: 290px; padding: 8px 11px 9px;
  border-radius: 10px; border: 1px solid rgba(120, 160, 220, .26);
  background: rgba(9, 16, 30, .93); box-shadow: 0 14px 34px -10px rgba(0, 0, 0, .75);
  opacity: 0; transition: opacity .13s ease; will-change: transform;
}
.brain-tip.on { opacity: 1; }
.brain-tip-kind {
  font-size: 10px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: #6fe0d0;
}
.brain-tip-title { font-size: 13px; font-weight: 650; line-height: 1.35; color: #f2f6ff; }
.brain-tip-meta { font-size: 11px; color: #8fa0bd; }

/* The picture is unreachable with a keyboard, so every entry also exists as a
   real button off-screen. Focusing one lights the same neighbourhood the
   pointer would, and the canvas draws the ring. */
.brain-keys {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.brain-keys button { font: inherit; }

.brain-loading, .brain-empty { position: relative; z-index: 2; text-align: center; padding: var(--sp-8); }
.brain-loading { display: flex; align-items: center; justify-content: center; gap: 11px; }
.brain-loading-orbit {
  width: 17px; height: 17px; border-radius: 50%;
  border: 1.5px solid rgba(120, 160, 220, .26); border-top-color: #41f2dc;
  animation: brain-orbit .9s linear infinite;
}
@keyframes brain-orbit { to { transform: rotate(360deg); } }
.brain-empty h3 { margin-top: var(--sp-3); color: #e8eefb; }
.brain-canvas .muted { color: #93a5c2; }
.brain-canvas .btn {
  background: rgba(255, 255, 255, .07); color: #dce6f7;
  border-color: rgba(255, 255, 255, .16);
}
.brain-canvas .btn:hover { background: rgba(255, 255, 255, .12); }

/* The key's own band along the foot of the panel. A hairline is enough to
   separate it — it is the same sky, just the part nothing is drawn on. The
   swatches take the room they need on the left; the count holds the right edge
   on its own line of sight, so it reads as a caption to the map rather than as
   one more thing in the key. */
.brain-key {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px 18px;
  padding: 11px 16px 12px;
  border-top: 1px solid rgba(255, 255, 255, .07);
  background: rgba(4, 9, 18, .38);
}
.brain-key:empty { display: none; }
.brain-key-swatches {
  display: flex; flex-wrap: wrap; gap: 7px 18px; flex: 1 1 420px; min-width: 0;
}
/* No rule separating it from the key. Whether the count shares the row or
   wraps below depends on how many kinds a workspace uses, and a divider that
   is correct in one of those is wrong in the other — the right edge and the
   quieter colour do the separating on their own. */
.brain-key-count {
  flex: 0 0 auto; margin-left: auto;
  font-size: 11.5px; color: #7f90ad; white-space: nowrap;
  /* Lining figures, so the number does not shuffle sideways as it changes. */
  font-variant-numeric: tabular-nums;
}
.brain-key-count b { color: #d3e0f4; font-weight: 650; }
.brain-legend-item {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 11.5px; color: #93a5c2;
}
.brain-legend-item i {
  width: 8px; height: 8px; border-radius: 50%; background: #6f9dff;
  box-shadow: 0 0 7px -1px rgba(255, 255, 255, .5);
}
@media (max-width: 780px) {
  .brain-canvas { height: min(62vh, 540px); min-height: 380px; }
}

.brain-panel {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: var(--sp-5); overflow-y: auto; max-height: 78vh; box-shadow: var(--shadow-sm);
}
.brain-panel-empty { text-align: center; padding: var(--sp-6) var(--sp-2); }
.brain-panel-mark { font-size: 30px; color: var(--accent); opacity: .55; }
.brain-note-head h2 { margin: 8px 0 2px; font-size: 21px; }
.brain-aliases { margin: 0; font-size: 12.5px; color: var(--text-faint); }
.brain-card-kind {
  display: inline-block; font-size: 11px; font-weight: 650; letter-spacing: .05em;
  text-transform: uppercase; padding: 2px 9px; border-radius: 999px;
  background: var(--surface-3); color: var(--text-soft); border: 1px solid var(--border);
}
.brain-kind-entity.brain-card-kind { background: #eaf1fb; color: #0a4ea2; border-color: #d6e4f7; }
.brain-kind-concept.brain-card-kind { background: #e4f8f6; color: #00786e; border-color: #c9efeb; }
.brain-kind-source.brain-card-kind { background: #efedfd; color: #4b3fc4; border-color: #ded9fa; }
.brain-kind-project.brain-card-kind { background: #fdf1e2; color: #a5620f; border-color: #f7e2c8; }
.brain-kind-application_editorial_task.brain-card-kind,
.brain-kind-application_task.brain-card-kind { background: #edf0f4; color: #46546a; border-color: #d9dfe7; }
.brain-kind-application_client.brain-card-kind { background: #fff2df; color: #8a5513; border-color: #f2d6ac; }
.brain-kind-application_tender.brain-card-kind { background: #fff7d9; color: #75600b; border-color: #ebdda3; }
.brain-kind-application_contract.brain-card-kind { background: #f4eafa; color: #70408a; border-color: #dfc8eb; }
.brain-kind-application_delivery_project.brain-card-kind { background: #e8f1fc; color: #295e9b; border-color: #cbdff5; }
.brain-kind-application_invoice.brain-card-kind { background: #e8f7e9; color: #2f7040; border-color: #c9e8ce; }
.brain-kind-application_idea.brain-card-kind { background: #f6f0e5; color: #765a26; border-color: #e9ddc8; }
.brain-kind-priority.brain-card-kind { background: var(--danger-bg); color: var(--danger); border-color: #f8d5d6; }
.brain-kind-practice.brain-card-kind { background: var(--ok-bg); color: var(--ok); border-color: #cdeedd; }
.brain-kind-event.brain-card-kind { background: var(--warn-bg); color: var(--warn); border-color: #f6e4c2; }

/* The provenance promise, stated on every entry rather than buried in a doc. */
.brain-derived {
  font-size: 12.5px; color: var(--text-soft); background: var(--surface-2);
  border-left: 3px solid var(--accent); border-radius: var(--radius-xs);
  padding: 8px 11px; margin: 12px 0;
}
.brain-summary { font-size: 14.5px; }
.brain-summary p:first-child { margin-top: 0; }
.brain-body { font-size: 13.5px; color: var(--text-soft); }
.brain-body h2, .brain-body h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-faint); margin-top: 16px; }
.brain-panel h4, .brain-modal h4 { margin: 18px 0 8px; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-faint); }
.brain-evs, .brain-links { display: flex; flex-wrap: wrap; gap: 6px; }
.brain-ev, .brain-link {
  display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px;
  padding: 4px 11px; color: var(--text-soft); cursor: pointer; font-family: inherit;
}
.brain-ev:hover, .brain-link:hover { background: var(--surface-3); border-color: var(--border-strong); color: var(--text); text-decoration: none; }
.brain-versions { margin: 0; padding-left: 18px; font-size: 12.5px; color: var(--text-soft); }
.brain-note-foot { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--border); }

.brain-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: var(--sp-3); }
.brain-card {
  display: flex; flex-direction: column; gap: 5px; align-items: flex-start; text-align: left;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 14px; cursor: pointer; font: inherit; color: var(--text); box-shadow: var(--shadow-sm);
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}
.brain-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--border-strong); }
.brain-card strong { font-size: 15px; letter-spacing: -.01em; }
.brain-card-sum {
  font-size: 13px; color: var(--text-soft); display: -webkit-box; -webkit-line-clamp: 3;
  -webkit-box-orient: vertical; overflow: hidden;
}
.brain-card-foot { font-size: 11.5px; color: var(--text-faint); margin-top: auto; padding-top: 6px; }
.brain-modal { padding: var(--sp-2); }

.brain-ev-kind {
  font-size: 10px; font-weight: 650; letter-spacing: .05em; text-transform: uppercase;
  color: var(--text-faint); border-right: 1px solid var(--border); padding-right: 6px;
}
.brain-ev { max-width: 100%; }
.brain-ev, .brain-link { max-width: 320px; }
.brain-ev > :last-child, .brain-link { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* --- Brain: provenance as a reading list -------------------------------- */
/* Supersedes the earlier pill treatment: a chip that ellipsises a document
   title proves nothing, so each source gets a row it can actually be read in. */
.brain-evs {
  display: flex; flex-direction: column; gap: 6px; max-width: 100%;
}
.brain-evs .brain-ev {
  display: grid; grid-template-columns: 1fr auto; align-items: center;
  gap: 2px 10px; width: 100%; max-width: none; white-space: normal;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 9px 12px; color: var(--text-soft);
  text-align: left; overflow: visible;
}
.brain-evs .brain-ev:hover { background: var(--surface-3); border-color: var(--border-strong); text-decoration: none; }
.brain-evs .brain-ev-kind {
  grid-column: 1 / -1; border: 0; padding: 0; font-size: 10px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--text-faint);
}
.brain-ev-title {
  grid-column: 1; font-size: 13.5px; font-weight: 550; color: var(--text);
  line-height: 1.35; overflow: hidden; text-overflow: ellipsis;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.brain-ev-ex {
  grid-column: 1 / -1; font-size: 12px; color: var(--text-faint); line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.brain-ev-go { grid-column: 2; grid-row: 2; color: var(--text-faint); font-size: 14px; }
.brain-evs .brain-ev:hover .brain-ev-go { color: var(--brand); }
.brain-count {
  display: inline-block; background: var(--surface-3); color: var(--text-soft);
  border-radius: 999px; padding: 0 7px; font-size: 11px; font-weight: 650;
  letter-spacing: 0; text-transform: none;
}

/* Connected-to stays compact — these are names, not documents. */
.brain-links .brain-link { flex-direction: row; align-items: baseline; gap: 7px; }
.brain-links .brain-ev-kind {
  border: 0; padding: 0; font-size: 9.5px; letter-spacing: .06em; flex: 0 0 auto;
}

.brain-filters select { max-width: 190px; }

/* --- Brain: an entry's write history ------------------------------------ */
/* First written / last updated / revisions. Separators are drawn by CSS so the
   markup stays a plain list of spans and no stray "·" is left dangling. */
.brain-hist {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px;
  font-size: 11.5px; color: var(--text-faint); line-height: 1.4;
}
.brain-hist > span + span::before { content: "·"; margin-right: 8px; opacity: .6; }
.brain-card .brain-hist { margin-top: 2px; }
.brain-hist-head {
  margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--border);
}

/* ===========================================================================
   Brain v2 — the note card is one consistent list of openable rows, and moving
   between lenses is a movement rather than a swap.
   ========================================================================= */
/* Each lens arrives instead of appearing. The rule keys off :not(.hidden), so
   the animation replays every time a lens is switched back on — going from
   display:none to visible restarts it — and costs one composited layer. */
.brain-stage:not(.hidden), .brain-atlas:not(.hidden), .brain-lens-pane:not(.hidden) {
  animation: brain-lens-in .3s cubic-bezier(.16, 1, .3, 1) both;
}
@keyframes brain-lens-in { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }

/* One row anatomy for every openable thing on a card: sources, connections and
   disambiguation links all read the same way. */
.brain-evs .brain-ev {
  width: 100%; border: 1px solid var(--border); background: var(--surface-2);
  font: inherit; text-align: left; cursor: pointer;
}
.brain-evs .brain-ev-warn { border-left: 3px solid var(--warn); }
.brain-count { margin-left: 2px; }
.brain-split {
  display: inline-flex; flex-wrap: wrap; gap: 8px; margin-left: 8px;
  font-size: 11px; font-weight: 500; letter-spacing: 0; text-transform: none;
  color: var(--text-faint);
}
.brain-split > span + span::before { content: "·"; margin-right: 8px; opacity: .6; }

/* The note modal is the primary reading surface now that the sidebar is gone.
   It opens on a card the right shape for what is coming, so the text landing
   does not reflow it — a card that settles twice reads as slower than one that
   was always the size it ends up. */
.brain-modal { padding: var(--sp-4) var(--sp-5) var(--sp-5); max-height: 80vh; overflow-y: auto; }
.brain-modal .brain-note-head h2 { font-size: 24px; }
.brain-skeleton { display: grid; gap: 13px; padding: 6px 0 10px; }
.brain-sk {
  display: block; height: 13px; border-radius: 7px; background-size: 400% 100%;
  background-image: linear-gradient(90deg, var(--surface-3) 25%, var(--surface-2) 37%, var(--surface-3) 63%);
  animation: brain-sk 1.3s ease infinite;
}
.brain-sk-kind { width: 92px; height: 19px; border-radius: 999px; }
.brain-sk-title { width: 58%; height: 25px; }
.brain-sk-short { width: 44%; }
@keyframes brain-sk { from { background-position: 100% 0; } to { background-position: 0 0; } }

@media (prefers-reduced-motion: reduce) {
  .brain-canvas::before, .brain-canvas::after, .brain-sky-wrap::before,
  .brain-canvas[aria-busy="true"] .brain-sky-wrap::after,
  .brain-loading-orbit, .brain-sk { animation: none; }
  .brain-stage:not(.hidden), .brain-atlas:not(.hidden), .brain-lens-pane:not(.hidden) { animation: none; }
}

/* ===========================================================================
   Brain — the reflective lenses: Tensions, Insights, Timeline, and the audit
   of the Brain's own decisions.
   ========================================================================= */
.brain-lens-n {
  display: inline-block; min-width: 17px; margin-left: 6px; padding: 0 5px;
  border-radius: 999px; background: var(--accent); color: #04231f;
  font-size: 10.5px; font-weight: 700; line-height: 17px; text-align: center;
}
.brain-lens.active .brain-lens-n { background: var(--brand); color: #fff; }
/* The reflective lenses are whole-graph views; the filters do not apply. */
.brain-filters-quiet { opacity: .35; pointer-events: none; }
.brain-lens-pane { min-height: 200px; }
.brain-section {
  margin: var(--sp-5) 0 var(--sp-3); font-size: 13px; text-transform: uppercase;
  letter-spacing: .06em; color: var(--text-faint); font-weight: 700;
}
.brain-section:first-child { margin-top: 0; }
.brain-h-warn { color: var(--danger) !important; }

/* Tensions: two entries that cannot both be right, side by side. */
.brain-tension-list { display: flex; flex-direction: column; gap: var(--sp-3); }
.brain-tension {
  background: var(--surface); border: 1px solid var(--border);
  border-left: 3px solid var(--danger); border-radius: var(--radius);
  padding: 14px 16px; box-shadow: var(--shadow-sm);
}
.brain-tension-pair { display: flex; align-items: stretch; gap: 10px; flex-wrap: wrap; }
.brain-tension-pair .brain-ev { flex: 1 1 240px; }
.brain-tension-vs {
  align-self: center; font-size: 11px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--danger);
}
.brain-tension-why { margin: 10px 0 0; font-size: 13.5px; color: var(--text-soft); }
.brain-ev-conflict { border-left: 3px solid var(--danger); }

/* Insights: a feed of things noticed, not a table of rows. */
.brain-insights { display: flex; flex-direction: column; gap: var(--sp-3); }
.brain-insight {
  display: flex; gap: 14px; align-items: flex-start;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 14px 16px; box-shadow: var(--shadow-sm);
}
.brain-insight-mark {
  flex: 0 0 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  font-size: 15px; background: var(--surface-3); color: var(--text-soft);
}
.brain-insight-gap .brain-insight-mark { background: var(--surface-3); color: var(--text-faint); }
.brain-insight-tension .brain-insight-mark { background: var(--danger-bg); color: var(--danger); }
.brain-insight-opportunity .brain-insight-mark { background: rgba(0,179,164,.12); color: var(--accent-dark); }
.brain-insight-shift .brain-insight-mark { background: var(--brand-tint); color: var(--brand); }
.brain-insight-body { flex: 1 1 auto; min-width: 0; }
.brain-insight-kind {
  display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--text-faint); margin-bottom: 2px;
}
.brain-insight-body strong { font-size: 15px; }
.brain-insight-body p { margin: 4px 0 0; font-size: 13.5px; color: var(--text-soft); }
.brain-insight-links { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.brain-chip {
  font: inherit; font-size: 12px; background: var(--surface-2); color: var(--text-soft);
  border: 1px solid var(--border); border-radius: 999px; padding: 3px 10px; cursor: pointer;
}
.brain-chip:hover { background: var(--surface-3); color: var(--text); }
.brain-insight-x { flex: 0 0 auto; }

/* Timeline: how the understanding moved, newest first. */
.brain-timeline { position: relative; padding-left: 4px; }
.brain-day {
  font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-faint); margin: var(--sp-5) 0 var(--sp-2);
}
.brain-day:first-child { margin-top: 0; }
.brain-tl-row {
  display: flex; align-items: flex-start; gap: 14px; padding: 10px 0 10px 18px;
  position: relative; border-left: 2px solid var(--border); margin-left: 5px;
}
.brain-tl-dot {
  position: absolute; left: -6px; top: 16px; width: 10px; height: 10px;
  border-radius: 50%; background: var(--surface); border: 2px solid var(--border-strong);
}
.brain-tl-row.first .brain-tl-dot { background: var(--accent); border-color: var(--accent); }
.brain-tl-body { flex: 1 1 auto; min-width: 0; }
.brain-tl-title {
  font: inherit; font-size: 14.5px; font-weight: 600; color: var(--text);
  background: none; border: 0; padding: 0; cursor: pointer; text-align: left;
}
.brain-tl-title:hover { color: var(--brand); }
.brain-tl-meta { display: block; font-size: 11.5px; color: var(--text-faint); margin-top: 1px; }
.brain-tl-body p { margin: 4px 0 0; font-size: 13px; color: var(--text-soft); }

/* Version comparison. */
.brain-diff { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); margin-top: var(--sp-3); }
@media (max-width: 860px) { .brain-diff { grid-template-columns: 1fr; } }
.brain-diff-text {
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 12px 14px; font-size: 13.5px;
}
.brain-diff-new { border-left: 3px solid var(--accent); }

.brain-audit-row { grid-template-columns: 1fr auto; }
.brain-audit-undo { grid-column: 2; grid-row: 2 / span 2; align-self: center; }

/* A disagreement inside one entry's own sources — the highest-value warning the
   Brain can give an editor, so it sits above the entry rather than inside it. */
.brain-selftension {
  background: var(--danger-bg); border: 1px solid #f8d5d6; border-left: 3px solid var(--danger);
  border-radius: var(--radius-xs); padding: 10px 12px; margin: 12px 0;
  font-size: 13px; color: var(--text);
}
.brain-selftension strong { color: var(--danger); }

/* ===========================================================================
   The Assistant composer (doc 17) — sources, depth, attachments, and the
   transparency of what was actually consulted.
   ========================================================================= */
.chat-tool-primary { font-weight: 600; }
.chat-tool-count {
  display: inline-block; min-width: 18px; margin-left: 4px; padding: 0 5px;
  border-radius: 999px; background: var(--brand); color: #fff;
  font-size: 11px; font-weight: 700; line-height: 18px; text-align: center;
}
.chat-tool.active .chat-tool-count { background: #fff; color: var(--brand); }

.chat-task-picker {
  display: inline-flex; align-items: center; gap: 6px; padding: 2px 4px 2px 10px;
  border: 1px solid var(--border-strong); border-radius: 999px; background: var(--surface-2);
  color: var(--text-faint); font-size: 11px; font-weight: 700; letter-spacing: .03em;
  text-transform: uppercase;
}
.chat-task-picker select {
  appearance: none; border: 0; border-radius: 999px; background: var(--surface);
  color: var(--text); font: inherit; font-size: 12.5px; font-weight: 600;
  letter-spacing: 0; text-transform: none; padding: 4px 23px 4px 9px; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--text-faint) 50%),
    linear-gradient(135deg, var(--text-faint) 50%, transparent 50%);
  background-position: calc(100% - 10px) 10px, calc(100% - 6px) 10px;
  background-size: 4px 4px, 4px 4px; background-repeat: no-repeat;
}
.chat-task-picker select:disabled { cursor: default; opacity: .6; }

/* Depth: a segmented control, because the three options are one decision. */
.chat-depth {
  display: inline-flex; background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 999px; padding: 2px;
}
.chat-depth-opt {
  border: 0; background: transparent; color: var(--text-soft); font: inherit;
  font-size: 12.5px; padding: 4px 12px; border-radius: 999px; cursor: pointer;
}
.chat-depth-opt.active { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); }

/* The Sources panel doubles as an inventory: every row says what is behind it. */
.chat-sources-panel {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 10px; margin-bottom: 8px; box-shadow: var(--shadow-sm);
}
.chat-presets { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 2px 4px 10px; }
.chat-preset {
  font: inherit; font-size: 12px; background: var(--surface-2); color: var(--text-soft);
  border: 1px solid var(--border); border-radius: 999px; padding: 3px 11px; cursor: pointer;
}
.chat-preset:hover { background: var(--surface-3); color: var(--text); }
.chat-source-row {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px;
  padding: 8px 6px; border-top: 1px solid var(--border); cursor: pointer;
}
.chat-source-row:first-of-type { border-top: 0; }
.chat-source-row.unavailable { opacity: .5; cursor: not-allowed; }
.chat-source-main { display: flex; flex-direction: column; min-width: 0; }
.chat-source-main strong { font-size: 13.5px; }
.chat-source-hint { font-size: 11.5px; color: var(--text-faint); }
.chat-source-status { font-size: 11.5px; color: var(--text-faint); white-space: nowrap; }

/* Assistant source/file choices live in focused dialogs, keeping the composer
   stable instead of making the prompt area jump whenever a control opens. */
.assistant-modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.assistant-modal-head h2 { margin-top: 0; }
.assistant-modal-head p { margin: 4px 0 0; max-width: 680px; }
.assistant-source-list { border: 1px solid var(--border); border-radius: var(--radius-sm);
  max-height: min(40vh, 380px); overflow-y: auto; background: var(--surface); }
.assistant-modal-section { margin-top: 18px; padding: 16px; border: 1px solid #bfd7f1;
  border-radius: var(--radius-sm); background: #f6faff; }
.assistant-modal-section p { margin: 4px 0 10px; }
.assistant-modal-section textarea { width: 100%; min-height: 92px; resize: vertical; }
.assistant-approved-hosts { margin-top: 8px; }
.assistant-modal-summary { margin-right: auto; }
.assistant-attachment-list { display: flex; flex-direction: column; gap: 8px; margin-top: 18px;
  min-height: 100px; max-height: min(55vh, 520px); overflow-y: auto; }
.assistant-attachment-list .chat-attachment { width: 100%; display: grid;
  grid-template-columns: auto minmax(100px, 1fr) auto auto; border-radius: var(--radius-sm);
  padding: 10px 12px; background: var(--surface-2); }
.assistant-attachment-list .chat-attachment-name { max-width: none; }
.assistant-modal-empty { display: grid; place-items: center; min-height: 100px;
  border: 1px dashed var(--border-strong); border-radius: var(--radius-sm); color: var(--text-faint); }
@media (max-width: 620px) {
  .assistant-modal-head { flex-direction: column; }
  .assistant-attachment-list .chat-attachment { grid-template-columns: auto 1fr auto; }
  .assistant-attachment-list .chat-attachment .muted { grid-column: 2 / -1; }
}

.chat-attachments { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.chat-attachment {
  display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 999px; padding: 4px 6px 4px 10px; color: var(--text-soft);
}
.chat-attachment-name { max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.chat-attachment-x {
  border: 0; background: transparent; color: var(--text-faint); cursor: pointer;
  font-size: 12px; padding: 0 4px; line-height: 1;
}
.chat-attachment-x:hover { color: var(--danger); }

.chat-answer-task {
  display: inline-flex; align-items: baseline; gap: 7px; margin-bottom: 8px;
  border-radius: 999px; background: var(--surface-2); padding: 4px 9px;
  color: var(--text-soft); font-size: 11.5px;
}
.chat-answer-task span { color: var(--text-faint); text-transform: uppercase; letter-spacing: .05em; font-size: 10px; }
.chat-answer-task em { padding-left: 7px; border-left: 1px solid var(--border-strong);
  color: var(--text-faint); font-style: normal; }
.chat-verification {
  display: flex; align-items: flex-start; gap: 8px; margin: 10px 0 4px; padding: 8px 10px;
  border: 1px solid #cce8d7; border-radius: var(--radius-xs); background: var(--ok-bg);
  color: var(--text); font-size: 12.5px;
}
.chat-verification.warn { border-color: #f3d49b; background: var(--warn-bg); }
.chat-verification-mark { color: var(--ok); font-weight: 800; }
.chat-verification.warn .chat-verification-mark { color: var(--warn); }
.chat-verification strong, .chat-verification small { display: block; }
.chat-verification small { margin-top: 2px; color: var(--text-soft); }

@media (max-width: 620px) {
  .chat-task-picker { max-width: 100%; }
  .chat-tool-note { flex-basis: 100%; order: 10; text-align: left; margin-left: 0; }
}

/* Something the workspace itself disagrees about outranks the answer. */
.chat-notice {
  display: flex; gap: 8px; align-items: flex-start; margin: 0 0 10px;
  background: var(--warn-bg); border: 1px solid #f6e4c2; border-left: 3px solid var(--warn);
  border-radius: var(--radius-xs); padding: 9px 12px; font-size: 13px; color: var(--text);
}

/* "How this answer was built" — including the sources that did not run. */
.chat-build { margin: 10px 0; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.chat-build > summary { cursor: pointer; padding: 9px 12px; display: flex; gap: 10px; align-items: baseline; font-size: 13px; }
.chat-build-body { padding: 4px 12px 12px; }
.chat-build-row {
  display: grid; grid-template-columns: 16px 150px 1fr; gap: 8px; align-items: baseline;
  padding: 4px 0; font-size: 12.5px;
}
.chat-build-row.skipped { color: var(--text-faint); }
.chat-build-mark { color: var(--ok); text-align: center; }
.chat-build-row.skipped .chat-build-mark { color: var(--text-faint); }
.chat-build-name { font-weight: 600; color: var(--text-soft); }
.chat-build-row.skipped .chat-build-name { font-weight: 500; }
.chat-build-detail { color: var(--text-soft); }
.chat-build-note { margin: 8px 0 0; }

/* Follow-ups: each carries the reason it could be offered at all. */
.chat-followups { display: flex; flex-direction: column; gap: 6px; margin-top: 14px; }
.chat-followups-title {
  font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-faint);
}
.chat-followup {
  display: flex; flex-direction: column; gap: 1px; align-items: flex-start; text-align: left;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 8px 12px; font: inherit; cursor: pointer; color: var(--text);
  transition: border-color .14s ease, background .14s ease;
}
.chat-followup:not(:disabled):hover { border-color: var(--brand); background: var(--brand-tint); }
.chat-followup:disabled { cursor: default; opacity: .56; }
.chat-followup.selected {
  border-color: var(--brand); background: var(--brand-tint);
  box-shadow: inset 3px 0 0 var(--brand);
}
.chat-followup.selected:disabled { opacity: 1; }
.chat-followup span { font-size: 13.5px; }
.chat-followup small { font-size: 11.5px; color: var(--text-faint); }
.chat-followup-prompt { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.chat-followup-selected {
  padding: 2px 6px; border-radius: 999px; background: var(--brand); color: #fff;
  font-size: 9.5px !important; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
}

/* --- Assistant: the live activity log ------------------------------------
   One panel, one set of rules. Shown for every question, not only deep
   research: it names each step, says what that step does, and shows which have
   finished, which is running and which have not started. Earlier versions of
   this list accreted three competing rule blocks, which is what broke it. */
.chat-research-activity {
  margin: -2px 0 12px; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface); overflow: hidden; box-shadow: var(--shadow-sm);
}
.chat-research-activity summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 9px;
  padding: 10px 13px; font-size: 12.5px;
}
.chat-research-activity summary::-webkit-details-marker { display: none; }
.chat-research-activity summary strong { font-weight: 650; }
.chat-research-activity summary .muted { margin-left: auto; font-size: 11.5px; }
.chat-research-activity[open] summary { border-bottom: 1px solid var(--border); }

.research-plan-note {
  padding: 9px 14px; margin: 0; font-size: 12px; color: var(--text-soft);
  background: var(--surface-2); border-bottom: 1px solid var(--border);
}
/* A continuous rail behind the marks turns a list of rows into a sequence. */
.research-steps { position: relative; display: block; padding: 4px 0; }
.research-steps::before {
  content: ""; position: absolute; left: 21px; top: 12px; bottom: 12px;
  width: 1px; background: var(--border);
}
.research-step {
  position: relative; display: grid; grid-template-columns: 16px minmax(0, 1fr) auto;
  gap: 2px 12px; align-items: start; padding: 8px 14px;
}
.research-step-mark {
  position: relative; z-index: 1; width: 16px; height: 16px; border-radius: 50%;
  display: grid; place-items: center; font-size: 10px; line-height: 1;
  background: var(--surface); border: 1px solid var(--border); color: var(--text-faint);
}
.research-step.complete .research-step-mark {
  background: var(--ok-bg); border-color: #cdeedd; color: var(--ok);
}
.research-step.active .research-step-mark {
  background: rgba(0,179,164,.14); border-color: var(--accent); color: var(--accent-dark);
  animation: chat-pulse 1.5s ease-in-out infinite;
}
.research-step-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.research-step-name { font-size: 12.5px; font-weight: 600; color: var(--text-soft); }
.research-step.active .research-step-name { color: var(--text); }
.research-step.pending .research-step-name { color: var(--text-faint); font-weight: 500; }
.research-step-about { font-size: 11.5px; color: var(--text-faint); line-height: 1.4; }
.research-step-detail {
  grid-column: 3; font-size: 11.5px; color: var(--text-faint); text-align: right;
  white-space: nowrap; padding-top: 1px;
}
.research-step.complete .research-step-detail { color: var(--text-soft); }
.research-step.active .research-step-detail { color: var(--accent-dark); }
@media (max-width: 760px) {
  .research-step { grid-template-columns: 16px minmax(0, 1fr); }
  .research-step-detail { grid-column: 2; text-align: left; white-space: normal; }
}

.chat-followups-loading {
  display: flex; align-items: center; gap: 8px; padding: 8px 2px;
  font-size: 13px; color: var(--text-faint);
}
/* A control that cannot act should look like it. */
.chat-tool:disabled, .chat-depth-opt:disabled, .chat-preset:disabled {
  opacity: .45; cursor: not-allowed;
}

/* Per-subject verdicts under a source row: what it considered and why. */
.chat-build-decisions { display: flex; flex-direction: column; gap: 1px; margin-top: 3px; }
.chat-build-decisions > span { font-size: 11px; color: var(--text-faint); }
.chat-build-detail { white-space: normal; }

/* ---------- Connectors ----------
   The picker draws a tree that is loaded a level at a time, so its indentation
   comes from nesting rather than from a computed depth: a level that has not
   been opened has no children in the DOM to measure. */
.cn-kinds { display: grid; gap: 10px; margin: 16px 0 4px; }
.cn-kind {
  display: flex; flex-direction: column; gap: 3px; text-align: left; width: 100%;
  padding: 14px 16px; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); cursor: pointer;
  transition: border-color .16s ease, box-shadow .16s ease, transform .1s ease;
}
.cn-kind:hover { border-color: var(--brand); box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.cn-kind:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.cn-kind-name { font-weight: 650; font-size: 14.5px; }
.cn-kind-blurb { font-size: 13px; color: var(--text-soft); }
.cn-kind-ver { font-size: 11.5px; color: var(--text-faint); }

.cn-advice {
  margin: 12px 0 4px; padding: 10px 12px; font-size: 12.5px; line-height: 1.5;
  color: var(--text-soft); background: var(--warn-bg); border: 1px solid #f3e2bf;
  border-radius: var(--radius);
}

.cn-result { margin-top: 14px; padding: 10px 12px; border-radius: var(--radius); font-size: 13px; }
.cn-result.hidden { display: none; }
.cn-result.is-ok { color: var(--ok); background: var(--ok-bg); border: 1px solid #c7ecd6; }
.cn-result.is-bad { color: var(--danger); background: var(--danger-bg); border: 1px solid #f5cccd; }

.cn-tree {
  margin-top: 14px; max-height: 46vh; overflow: auto; padding: 8px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
}
/* "Sync everything" makes the selection beneath it irrelevant; saying so is
   better than leaving controls that look live but no longer decide anything. */
.cn-tree.is-muted { opacity: .45; pointer-events: none; }

.cn-node-head { display: flex; align-items: center; gap: 8px; padding: 5px 4px; border-radius: 6px; }
.cn-node-head:hover { background: var(--surface-2, rgba(0, 0, 0, .03)); }
.cn-node-label { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cn-node-desc { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cn-children { margin-left: 22px; border-left: 1px solid var(--border); padding-left: 6px; }
.cn-children.hidden { display: none; }

.cn-twisty {
  flex: 0 0 auto; width: 20px; height: 20px; display: grid; place-items: center;
  background: none; border: none; border-radius: 5px; cursor: pointer;
  color: var(--text-soft); font-size: 11px; line-height: 1;
}
.cn-twisty:hover:not(:disabled) { background: var(--border); color: var(--text); }
.cn-twisty:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.cn-twisty.is-leaf { cursor: default; color: var(--text-faint); }

.cn-loading, .cn-empty, .cn-error { padding: 8px 6px; }
.cn-error { color: var(--danger); }
.cn-chosen { margin-top: 10px; }

/* Field picker and preview. The preview shows composed text verbatim, so it is
   pre-formatted — a wrapped <pre> rather than a <div>, because the line breaks
   between labelled fields are part of what is being previewed. */
.cn-fieldbar { display: flex; gap: 9px; flex-wrap: wrap; margin: 14px 0 10px; }
.cn-fields { max-height: 38vh; overflow: auto; padding: 6px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.cn-field { display: flex; align-items: center; gap: 10px; padding: 5px 6px; border-radius: 6px; }
.cn-field:hover { background: var(--surface-2, rgba(0, 0, 0, .03)); }
.cn-field-name { flex: 0 1 auto; font-size: 13.5px; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cn-field-key { flex: 1 1 auto; min-width: 0; font-size: 11.5px; color: var(--text-faint);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cn-field-target { flex: 0 0 auto; width: auto; min-width: 130px; }

.cn-warn { margin: 14px 0 6px; padding: 10px 12px; font-size: 12.5px; line-height: 1.55;
  color: var(--warn); background: var(--warn-bg); border: 1px solid #f3e2bf;
  border-radius: var(--radius); display: flex; flex-direction: column; gap: 4px; }
.cn-preview-head { margin: 14px 0 8px; }
.cn-preview-item { margin-bottom: 12px; padding: 12px 14px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.cn-preview-title { font-weight: 650; font-size: 14px; margin-bottom: 3px; }
.cn-preview-text { margin: 8px 0 0; padding: 10px 12px; max-height: 190px; overflow: auto;
  background: var(--surface-2, rgba(0, 0, 0, .03)); border-radius: var(--radius);
  font-size: 12.5px; line-height: 1.55; white-space: pre-wrap; word-break: break-word; }
.cn-gone { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 4px; color: var(--warn); }
.cn-allowlist { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
.cn-allow { display: flex; align-items: center; gap: 9px; padding: 5px 6px; border-radius: 6px; }
.cn-allow:hover { background: var(--surface-2, rgba(0, 0, 0, .03)); }
.cn-filetypes { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 4px 0 2px; }
.cn-filetype { display: flex; align-items: center; gap: 7px; font-size: 13.5px; }

/* ---------- Workspace document library ----------
   The same premium read-only frame as connected ticket systems, with a table
   retained for the denser metadata documents need. */
.pm-lib { display: flex; flex-direction: column; gap: 14px; }
.pm-lib-hero { --ticket-accent: var(--brand); }
.pm-lib-controls { display: grid; grid-template-columns: minmax(260px, 1fr) minmax(150px, auto); gap: 9px; }
.pm-lib-results-head { display: flex; align-items: center; justify-content: space-between;
  gap: 12px; min-height: 26px; padding: 0 3px; }
.pm-lib-crumbs { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-width: 0; }
.pm-lib-sep { color: var(--text-faint); }
.pm-crumb-btn { background: none; border: none; padding: 3px 6px; border-radius: 6px;
  cursor: pointer; font-size: 13.5px; color: var(--brand); font-weight: 600; }
.pm-crumb-btn:hover { background: var(--surface-2, rgba(0, 0, 0, .04)); }
.pm-crumb-btn[aria-current="page"] { color: var(--text); cursor: default; }
.pm-crumb-btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.pm-lib-note { margin: 0; font-size: 12.5px; color: var(--text-faint); }
.pm-lib-error { margin: 0; color: var(--danger); }

.pm-lib-folders { display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.pm-lib-folder { display: flex; align-items: center; gap: 12px; text-align: left;
  padding: 14px 16px; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-sm); cursor: pointer;
  transition: border-color .16s ease, box-shadow .16s ease, transform .1s ease; }
.pm-lib-folder:hover { border-color: var(--brand); box-shadow: var(--shadow); transform: translateY(-1px); }
.pm-lib-folder:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.pm-lib-folder-ic { font-size: 22px; flex: 0 0 auto; }
.pm-lib-folder-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pm-lib-folder-name { font-weight: 620; font-size: 14px; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.pm-lib-folder-meta { font-size: 12px; color: var(--text-faint); }

.pm-lib-files { overflow: hidden; }
.pm-lib-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.pm-lib-table thead th { text-align: left; padding: 11px 16px; font-size: 11px;
  letter-spacing: .06em; text-transform: uppercase; color: var(--text-faint);
  font-weight: 650; border-bottom: 1px solid var(--border); background: var(--surface-2, transparent); }
.pm-lib-table td { padding: 11px 16px; border-bottom: 1px solid var(--border-soft, var(--border)); vertical-align: middle; }
.pm-lib-table tbody tr:last-child td { border-bottom: none; }
.pm-lib-row:hover { background: var(--surface-2, rgba(0, 0, 0, .025)); }
.pm-lib-c-name { display: flex; align-items: center; gap: 11px; min-width: 0; }
.pm-lib-file-ic { font-size: 17px; flex: 0 0 auto; }
.pm-lib-file-main { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.pm-lib-file-name { font-weight: 560; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pm-lib-file-sub { font-size: 11.5px; color: var(--text-faint); overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.pm-lib-c-when, .pm-lib-c-size { color: var(--text-soft); white-space: nowrap;
  font-variant-numeric: tabular-nums; }
.pm-lib-c-by { color: var(--text-soft); white-space: nowrap; }
.pm-lib-c-open { text-align: right; white-space: nowrap; }
.pm-lib-open { font-weight: 620; color: var(--brand); text-decoration: none; font-size: 12.5px; }
.pm-lib-open:hover { text-decoration: underline; }
.pm-lib-open.is-off { color: var(--text-faint); }

.pm-lib-empty { text-align: center; padding: 34px 20px; }
.pm-lib-empty-ic { font-size: 34px; margin-bottom: 8px; }

/* ---------- Workspace Jira and Redmine ---------- */
.pm-tickets { display: flex; flex-direction: column; gap: 13px; }
.pm-ticket-hero { display: flex; align-items: center; justify-content: space-between;
  gap: 24px; padding: 20px 22px; overflow: hidden; position: relative;
  background: linear-gradient(125deg, var(--surface) 35%, color-mix(in srgb, var(--brand) 7%, var(--surface))); }
.pm-ticket-hero::after { content: ""; position: absolute; width: 210px; height: 210px;
  right: -80px; top: -115px; border-radius: 50%; pointer-events: none;
  background: color-mix(in srgb, var(--brand) 8%, transparent); }
.pm-ticket-redmine { --ticket-accent: #e45b31; }
.pm-ticket-jira { --ticket-accent: #2375d8; }
.pm-ticket-hero-main { display: flex; align-items: center; gap: 14px; min-width: 0; z-index: 1; }
.pm-ticket-mark { width: 46px; height: 46px; border-radius: 13px; display: grid;
  place-items: center; color: white; background: var(--ticket-accent); font-size: 20px;
  font-weight: 760; box-shadow: 0 7px 18px color-mix(in srgb, var(--ticket-accent) 28%, transparent); }
.pm-ticket-eyebrow { margin: 0 0 2px; color: var(--ticket-accent); font-size: 10.5px;
  font-weight: 750; letter-spacing: .11em; text-transform: uppercase; }
.pm-ticket-hero h2 { margin: 0; font-size: 21px; }
.pm-ticket-hero-main p:last-child { margin: 3px 0 0; color: var(--text-soft); font-size: 12.5px; }
.pm-ticket-hero-main p span { color: var(--text-faint); }
.pm-ticket-stats { display: flex; gap: 7px; z-index: 1; }
.pm-ticket-stat { min-width: 86px; padding: 8px 11px; border: 1px solid var(--border);
  border-radius: 10px; background: color-mix(in srgb, var(--surface) 89%, transparent);
  display: grid; grid-template-columns: 6px 1fr; column-gap: 8px; align-items: center; }
.pm-ticket-stat > span { width: 6px; height: 24px; border-radius: 4px; grid-row: 1 / span 2; background: var(--text-faint); }
.pm-ticket-stat.is-open > span { background: #e0a120; }
.pm-ticket-stat.is-progress > span { background: #347bd1; }
.pm-ticket-stat.is-done > span { background: #32a56a; }
.pm-ticket-stat strong { font-size: 17px; line-height: 1; font-variant-numeric: tabular-nums; }
.pm-ticket-stat small { color: var(--text-faint); font-size: 10.5px; white-space: nowrap; }

.pm-ticket-controls { display: grid; grid-template-columns: minmax(260px, 1fr) repeat(3, minmax(140px, auto)); gap: 9px; }
.pm-ticket-controls select, .pm-lib-controls select, .pm-filter-search { height: 40px; }
.pm-filter-search { display: flex; align-items: center; gap: 7px; margin: 0; padding: 0 10px;
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface); }
.pm-filter-search:hover { border-color: var(--text-faint); }
.pm-filter-search:focus-within { border-color: var(--brand); box-shadow: var(--shadow-focus); }
.pm-filter-search > span { color: var(--text-faint); font-size: 20px; }
.pm-filter-search input[type="search"] { min-width: 0; width: 100%; height: 100%; padding: 0;
  border: 0; border-radius: 0; box-shadow: none; appearance: none; background: transparent;
  color: var(--text); font: inherit; }
.pm-filter-search input[type="search"]:focus { box-shadow: none; outline: none; }
.pm-ticket-results-head { display: flex; align-items: baseline; gap: 7px; min-height: 22px;
  padding: 0 3px; font-size: 12.5px; color: var(--text-faint); }
.pm-ticket-results-head strong { color: var(--text); font-size: 13px; }
.pm-ticket-refresh { margin-left: auto; color: var(--brand); }
.pm-ticket-list { display: flex; flex-direction: column; gap: 8px; }
.pm-ticket-card { overflow: hidden; border-left: 3px solid #e0a120; }
.pm-ticket-card.is-progress { border-left-color: #347bd1; }
.pm-ticket-card.is-done { border-left-color: #32a56a; }
.pm-ticket-card > summary { list-style: none; cursor: pointer; display: grid;
  grid-template-columns: 94px minmax(240px, 1fr) minmax(120px, 180px) minmax(88px, auto) 72px 20px;
  gap: 12px; align-items: center; padding: 13px 15px; }
.pm-ticket-card > summary::-webkit-details-marker { display: none; }
.pm-ticket-card > summary:hover { background: var(--surface-2, rgba(0, 0, 0, .025)); }
.pm-ticket-card > summary:focus-visible { outline: none; box-shadow: inset var(--shadow-focus); }
.pm-ticket-key { font: 650 12px/1.2 ui-monospace, SFMono-Regular, Consolas, monospace;
  color: var(--brand); overflow: hidden; text-overflow: ellipsis; }
.pm-ticket-title { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pm-ticket-title strong { font-size: 13.5px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.pm-ticket-title small { color: var(--text-faint); font-size: 11px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.pm-ticket-person { display: flex; align-items: center; gap: 7px; min-width: 0; font-size: 11.5px; color: var(--text-soft); }
.pm-ticket-person i { width: 25px; height: 25px; border-radius: 50%; display: grid; place-items: center;
  flex: 0 0 auto; background: color-mix(in srgb, var(--brand) 12%, var(--surface));
  color: var(--brand); font-style: normal; font-size: 9px; font-weight: 750; }
.pm-ticket-person span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pm-ticket-person.is-empty { color: var(--text-faint); }
.pm-ticket-status { justify-self: start; padding: 4px 8px; border-radius: 999px;
  font-size: 10.5px; font-weight: 650; background: #fff4d9; color: #865e04; white-space: nowrap; }
.pm-ticket-status.is-progress { background: #e8f2ff; color: #185da8; }
.pm-ticket-status.is-done { background: #e8f8ef; color: #177043; }
.pm-ticket-when { display: flex; flex-direction: column; align-items: flex-end;
  color: var(--text-soft); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.pm-ticket-when small { color: var(--text-faint); font-size: 9.5px; }
.pm-ticket-chevron { color: var(--text-faint); transition: transform .15s ease; }
.pm-ticket-card[open] .pm-ticket-chevron { transform: rotate(180deg); }
.pm-ticket-detail { border-top: 1px solid var(--border); padding: 16px 18px 17px 122px;
  background: var(--surface-2, rgba(0, 0, 0, .018)); display: grid;
  grid-template-columns: minmax(240px, 1fr) minmax(260px, .8fr) auto; gap: 24px; }
.pm-ticket-description p { margin: 0; font-size: 12.5px; line-height: 1.6; white-space: pre-wrap; }
.pm-ticket-detail dl { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(100px, 1fr)); gap: 9px 18px; }
.pm-ticket-detail dl div { min-width: 0; }
.pm-ticket-detail dt { color: var(--text-faint); font-size: 9.5px; text-transform: uppercase; letter-spacing: .05em; }
.pm-ticket-detail dd { margin: 2px 0 0; font-size: 11.5px; overflow-wrap: anywhere; }
.pm-ticket-detail-action { align-self: end; }
.pm-ticket-open { color: var(--brand); font-size: 12px; font-weight: 650; text-decoration: none; white-space: nowrap; }
.pm-ticket-open:hover { text-decoration: underline; }
.pm-ticket-open.is-off { color: var(--text-faint); }
.pm-ticket-empty { text-align: center; padding: 34px 20px; }
.pm-ticket-empty > div { font-size: 30px; color: var(--text-faint); }
.pm-ticket-pages { display: flex; justify-content: center; align-items: center; gap: 14px; font-size: 12px; color: var(--text-soft); }

@media (max-width: 760px) {
  .pm-lib-c-by, .pm-lib-c-size { display: none; }
  .pm-lib-controls { grid-template-columns: 1fr; }
  .pm-lib-results-head { align-items: flex-start; flex-direction: column; }
  .pm-ticket-hero { align-items: flex-start; flex-direction: column; }
  .pm-ticket-stats { width: 100%; overflow-x: auto; }
  .pm-ticket-stat { flex: 1 0 82px; }
  .pm-ticket-controls { grid-template-columns: 1fr 1fr; }
  .pm-filter-search { grid-column: 1 / -1; }
  .pm-ticket-controls select:last-child { grid-column: 1 / -1; }
  .pm-ticket-card > summary { grid-template-columns: 76px minmax(0, 1fr) auto 18px; gap: 8px; }
  .pm-ticket-person, .pm-ticket-when { display: none; }
  .pm-ticket-status { max-width: 110px; overflow: hidden; text-overflow: ellipsis; }
  .pm-ticket-detail { padding: 14px; grid-template-columns: 1fr; gap: 13px; }
}
/* An inherited tick is a fact about the parent, not a choice of its own. */
.cn-inherited { background: var(--surface-2, rgba(0, 0, 0, .04)); color: var(--text-faint); }