/* ============================================================
   AGORA — application styles. Built on tokens.css.
   Recreates the "2a Deep" design handoff as server-rendered UI.
   ============================================================ */

/* ---- Reset / base ---- */
* { box-sizing: border-box; }
/* The hidden attribute must always win — author display values (e.g. .msg's
   display:flex) otherwise override the UA's [hidden] rule. */
[hidden] { display: none !important; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--ag-bg);
  color: var(--ag-text);
  font-family: var(--ag-font-ui);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }
/* One keyboard story for the whole app (deep audit §D, AG-08): anything
   focusable shows the same ring. Never disable outlines below this. */
:focus-visible { outline: 2px solid var(--ag-blue-line); outline-offset: 2px; }

/* ---- Shared primitives ---- */
.brand { display: flex; align-items: center; gap: 10px; }
.brand__mark {
  width: 30px; height: 30px; border-radius: 8px;
  background: linear-gradient(135deg, var(--ag-coach), var(--ag-blue));
  display: flex; align-items: center; justify-content: center;
}
.brand__mark span {
  width: 10px; height: 10px; border-radius: 50%;
  border: 2px solid var(--ag-surface-2);
}
.brand__word { font-weight: 800; letter-spacing: .18em; font-size: 16px; }

.eyebrow {
  font: 600 11px var(--ag-font-mono);
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--ag-text-faint);
}
.eyebrow--blue { color: var(--ag-blue-light); }

.coach-text { color: var(--ag-coach-light); font-weight: 600; }
.mono { font-family: var(--ag-font-mono); }
.mono-faint { font: 400 11px var(--ag-font-mono); color: var(--ag-text-muted); line-height: 1.5; }

.dot { width: 5px; height: 5px; border-radius: 50%; flex: none; display: inline-block; }
.dot--coach { background: var(--ag-coach); }

/* avatars */
.avatars { display: flex; align-items: center; }
.avatar {
  width: 26px; height: 26px; border-radius: 50%;
  color: #fff; font-size: 11px; font-weight: 600;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--ag-surface-2);
}
.avatar + .avatar { margin-left: -7px; }
.avatar--a { background: var(--ag-user-a); }
.avatar--b { background: var(--ag-user-b); }
.avatar--c { background: var(--ag-user-c); }
.avatar--coach {
  border-radius: 8px;
  background: linear-gradient(135deg, var(--ag-coach), #6a2fb8);
  font-weight: 800; box-shadow: 0 0 10px -1px rgba(139,61,217,.7);
}

/* buttons */
.btn {
  border: none; border-radius: 10px; padding: 13px 16px;
  font: 600 14px var(--ag-font-ui); cursor: pointer; text-align: center;
}
.btn--primary {
  flex: 1; background: var(--ag-blue); color: #fff;
  box-shadow: 0 0 20px -3px rgba(61,88,242,.75);
}
.btn--primary:hover { filter: brightness(1.06); }
.btn--ghost {
  background: transparent; color: var(--ag-text-muted);
  border: 1px solid var(--ag-line-strong); font-size: 13px;
}

/* ============================================================
   Index / landing
   ============================================================ */
.index {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  padding: 40px;
  background:
    radial-gradient(120% 90% at 0% 0%, rgba(139,61,217,.16), transparent 55%),
    radial-gradient(120% 100% at 100% 100%, rgba(61,88,242,.16), transparent 55%),
    var(--ag-bg);
}
.index__panel {
  width: 100%; max-width: 720px;
  background: var(--ag-surface-2); border: 1px solid var(--ag-line-strong);
  border-radius: var(--ag-r-xl); box-shadow: var(--ag-shadow-window);
  padding: 40px 44px; display: flex; flex-direction: column; gap: 28px;
}
.index__hero { margin: 14px 0 0; font-size: 34px; line-height: 1.1; font-weight: 700; letter-spacing: -.02em; }
.index__sub { margin: 12px 0 0; font-size: 14px; color: var(--ag-text-muted); }
.index__surfaces { margin-top: 26px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.surface-card {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 18px; border-radius: var(--ag-r-lg);
  border: 1px solid var(--ag-line-strong); background: var(--ag-surface);
}
.surface-card__name { font-size: 14px; font-weight: 600; }
.surface-card__state { font: 500 11px var(--ag-font-mono); color: var(--ag-text-faint); }
.surface-card--live { border-color: var(--ag-blue-line); }
.surface-card--live:hover { box-shadow: var(--ag-blue-glow); }
.surface-card--live .surface-card__state { color: var(--ag-blue-light); }
/* "soon" = border + label say it (deep audit §C, AG-04) — never a ghost card */
.surface-card--soon { border-color: var(--ag-line); }
.surface-card--soon .surface-card__state { color: var(--ag-text-meta); }
.index__foot { border-top: 1px solid var(--ag-line); padding-top: 20px; }
.index__panel--narrow { max-width: 440px; }
.index__link { color: var(--ag-blue-light); }
.index__link:hover { text-decoration: underline; }
.index__sub--row { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.index__logout { display: inline; }
.index__linkbtn {
  background: none; border: none; padding: 0; cursor: pointer;
  font: 400 12px var(--ag-font-ui); color: var(--ag-text-faint); text-decoration: underline;
}
.login__title { margin: 22px 0 6px; font-size: 24px; font-weight: 700; letter-spacing: -.01em; }

/* -- the public explainer (AG-22): one readable column, the product's voice -- */
.how { min-height: 100dvh; overflow-y: auto; padding: 48px 20px 64px; }
.how__col { max-width: 620px; margin: 0 auto; }
.how__hero {
  margin: 30px 0 0; font-size: 32px; line-height: 1.15;
  font-weight: 700; letter-spacing: -.02em;
}
.how__lead { margin: 14px 0 0; font-size: 15px; line-height: 1.65; color: var(--ag-text-muted); }
.how__sec { margin-top: 34px; padding-top: 22px; border-top: 1px solid var(--ag-line); }
.how__eyebrow {
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ag-text-faint);
}
.how__title { margin: 8px 0 8px; font-size: 18px; font-weight: 650; letter-spacing: -.01em; }
.how__sec p { margin: 0; font-size: 13.5px; line-height: 1.65; color: var(--ag-text-body); }
.how__sec b, .how__sec i { color: var(--ag-text); }
.how__foot { margin-top: 38px; padding-top: 24px; border-top: 1px solid var(--ag-line-strong); }
.how__footnote { font-size: 12px; line-height: 1.6; margin: 0 0 18px; }

/* coach brain selector (index) */
.brains { margin-top: 24px; }
.brains__row { margin-top: 10px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.brain__btn {
  width: 100%; display: flex; flex-direction: column; gap: 3px; align-items: flex-start;
  padding: 12px 14px; border-radius: var(--ag-r-md); cursor: pointer; text-align: left;
  border: 1px solid var(--ag-line-strong); background: var(--ag-surface);
  color: var(--ag-text); font-family: var(--ag-font-ui);
}
.brain--active .brain__btn { border-color: var(--ag-aris-line); box-shadow: var(--ag-coach-glow); }
.brain--off .brain__btn { border-color: var(--ag-line); cursor: default; }
.brain--off .brain__label { color: var(--ag-text-meta); }
.brain__btn:not([disabled]):hover { border-color: var(--ag-coach-border); }
.brain__label { font-size: 12.5px; font-weight: 600; }
.brain__model { font-size: 11px; color: var(--ag-text-muted); }
.brain__state { font-size: 11px; color: var(--ag-text-faint); }
.brain--active .brain__state { color: var(--ag-coach-light); }

/* memory */
.mem { flex: 1; display: flex; min-width: 0; }
.mem__list {
  width: 360px; flex: none; border-right: 1px solid var(--ag-line-strong);
  background: var(--ag-surface-2); padding: 18px;
  display: flex; flex-direction: column; gap: 10px; overflow-y: auto;
}
.mem-card {
  display: flex; flex-direction: column; gap: 3px; padding: 11px 13px;
  border: 1px solid var(--ag-line-strong); border-radius: 10px; background: var(--ag-surface);
}
.mem-card:hover { border-color: var(--ag-blue-line); }
.mem-card--selected { border-color: var(--ag-blue-line); box-shadow: 0 0 0 1px rgba(61,88,242,.15); }
.mem-card__kind { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--ag-coach-light); }
.mem-card__title { font-size: 13px; font-weight: 600; }
.mem-card__meta { font-size: 11px; color: var(--ag-text-faint); }
.mem__reader { flex: 1; min-width: 0; overflow-y: auto; padding: 26px 34px; }
.mem__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; max-width: 760px; }
.mem__title { margin: 6px 0 14px; font-size: 22px; font-weight: 700; letter-spacing: -.01em; }
.mem__versions { display: flex; gap: 6px; flex-wrap: wrap; }
.mem__version {
  font-size: 11px; padding: 3px 8px; border: 1px solid var(--ag-line-strong);
  border-radius: 6px; color: var(--ag-text-muted);
}
.mem__version.is-current { color: var(--ag-blue-light); border-color: var(--ag-blue-line); }
.mem__relations { margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--ag-line); }

/* lobby */
.cases { margin-top: 24px; display: flex; flex-direction: column; gap: 10px; }
.case-card { display: block; }
.case-card__btn {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 15px 18px; border-radius: var(--ag-r-lg); cursor: pointer; text-align: left;
  border: 1px solid var(--ag-line-strong); background: var(--ag-surface);
  color: var(--ag-text); font-family: var(--ag-font-ui);
}
.case-card--active .case-card__btn { border-color: var(--ag-blue-line); box-shadow: 0 0 0 1px rgba(61,88,242,.15); }
.case-card__btn:hover { border-color: var(--ag-blue-line); }
.case-card__name { font-size: 14px; font-weight: 600; }
.case-card__meta { font-size: 11px; color: var(--ag-text-faint); }
.case-new { margin-top: 18px; display: flex; gap: 10px; }
.case-new__input { margin-bottom: 0; flex: 1; }
.case-new__btn { flex: none; }

/* ============================================================
   Registration  (handoff #3a)
   ============================================================ */
.reg { display: flex; min-height: 100vh; }

.reg__left {
  width: 520px; flex: none;
  background:
    radial-gradient(120% 90% at 0% 0%, rgba(139,61,217,.22), transparent 55%),
    radial-gradient(120% 100% at 100% 100%, rgba(61,88,242,.22), transparent 55%),
    var(--ag-surface-2);
  border-right: 1px solid var(--ag-line-strong);
  padding: 44px 46px; display: flex; flex-direction: column;
}
.reg__lead { margin: auto 0; padding: 40px 0; }
.reg__hero { margin: 18px 0 0; font-size: 40px; line-height: 1.08; font-weight: 700; letter-spacing: -.02em; }
.reg__subcopy { margin: 20px 0 0; font-size: 15px; line-height: 1.6; color: var(--ag-text-body); max-width: 380px; }

.reg__room {
  margin-top: 32px; padding: 16px 18px;
  background: rgba(8,10,28,.5); border: 1px solid var(--ag-line-strong);
  border-radius: var(--ag-r-lg);
}
.reg__room .eyebrow { letter-spacing: .08em; margin-bottom: 10px; }
.reg__room-name { font-size: 15px; font-weight: 600; margin-bottom: 3px; }
.reg__room-meta { font-size: 11px; color: var(--ag-text-muted); margin-bottom: 14px; }
.reg__room-presence { display: flex; align-items: center; gap: 9px; }
.reg__room-note { font-size: 12px; color: var(--ag-text-muted); }

.reg__right {
  flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center;
  padding: 40px 56px;
}
.reg__form { width: 100%; max-width: 470px; }
.reg__form-title { margin: 0 0 6px; font-size: 24px; font-weight: 700; letter-spacing: -.01em; }
.reg__form-sub { margin: 0 0 26px; font-size: 13.5px; color: var(--ag-text-muted); line-height: 1.5; }
.reg__error {
  margin: 0 0 18px; padding: 10px 13px; font-size: 12.5px;
  color: var(--ag-coach-light);
  background: var(--ag-coach-tint); border: 1px solid var(--ag-coach-border);
  border-radius: var(--ag-r-md);
}

/* form fields */
.field-label {
  display: block; margin-bottom: 8px;
  font: 600 11px var(--ag-font-mono); letter-spacing: .08em;
  text-transform: uppercase; color: var(--ag-text-muted);
}
.field-label__note { color: var(--ag-text-faint); text-transform: none; letter-spacing: 0; }

.field-input, .field-textarea {
  width: 100%; background: var(--ag-surface);
  border: 1px solid var(--ag-line-strong); border-radius: 10px;
  padding: 12px 14px; font: 400 14px var(--ag-font-ui); color: var(--ag-text);
  margin-bottom: 20px; outline: none;
}
.field-input::placeholder, .field-textarea::placeholder { color: var(--ag-text-faint); }
.field-input:focus { border-color: var(--ag-blue-line); box-shadow: var(--ag-focus-ring); }

.field-textarea { min-height: 74px; resize: vertical; line-height: 1.55; font-size: 13.5px; color: var(--ag-text-body); margin-bottom: 9px; }
/* the "why" field carries the purple (Coach) treatment by design */
.field-textarea--coach {
  border-color: var(--ag-aris-line);
  box-shadow: 0 0 0 3px rgba(139,61,217,.08);
}
.field-textarea--coach:focus {
  border-color: var(--ag-aris-line);
  box-shadow: 0 0 0 3px rgba(139,61,217,.14);
}

.field-help {
  display: flex; align-items: center; gap: 7px;
  margin: 0 0 26px; font-size: 11px; color: var(--ag-text-meta);
}

/* structured position selects */
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; }
.field {
  background: var(--ag-surface); border: 1px solid var(--ag-line-strong);
  border-radius: 10px; padding: 11px 13px;
  display: flex; flex-direction: column; gap: 3px;
}
.field--full { margin-bottom: 20px; }
.field:focus-within { border-color: var(--ag-blue-line); box-shadow: var(--ag-focus-ring); }
.field__eyebrow {
  font: 400 11px var(--ag-font-mono); text-transform: uppercase; letter-spacing: .06em;
  color: var(--ag-text-faint);
}
.field__control { position: relative; display: flex; align-items: center; }
.field__control select {
  appearance: none; -webkit-appearance: none;
  width: 100%; background: transparent; border: none; outline: none;
  color: var(--ag-text); font: 400 13.5px var(--ag-font-ui);
  cursor: pointer; padding-right: 18px;
}
.field__control select option { background: var(--ag-surface); color: var(--ag-text); }
.field__caret {
  position: absolute; right: 0; pointer-events: none;
  color: var(--ag-text-meta); font-size: 11px;
}

.reg__cta { display: flex; align-items: center; gap: 12px; margin-top: 4px; }
.reg__foot { margin-top: 8px; }

/* ============================================================
   App shell  (top bar + left rail — shared by Room / BC / Parking)
   ============================================================ */
.shell { display: flex; flex-direction: column; height: 100vh; }

.topbar {
  height: 54px; flex: none; display: flex; align-items: center; gap: 16px;
  padding: 0 18px; border-bottom: 1px solid var(--ag-line-strong); background: var(--ag-surface);
}
.brand--sm { gap: 9px; }
.brand__mark--sm { width: 25px; height: 25px; border-radius: 7px; }
.brand__mark--sm span { width: 8px; height: 8px; border-color: var(--ag-bg); }
.brand__word--sm { font-size: 13px; letter-spacing: .16em; }
.topbar__sep { font: 400 11px var(--ag-font-mono); color: var(--ag-text-faint); }
.topbar__crumb { font-size: 12.5px; font-weight: 500; }
.topbar__divider { width: 1px; height: 20px; background: var(--ag-line-strong); }

/* Spine stepper — the persistent progress motif (spec §3.4) */
.spine {
  margin-left: auto; display: flex; align-items: center;
  background: var(--ag-surface-2); border: 1px solid var(--ag-line-strong);
  border-radius: 10px; padding: 3px;
}
.spine__link { width: 10px; height: 1px; background: var(--ag-line); }
.spine__step { display: flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 7px; font-size: 11px; }
.spine__step--done { color: var(--ag-text-muted); }
.spine__check {
  width: 14px; height: 14px; border-radius: 50%; background: var(--ag-engine);
  color: var(--ag-engine-ink); font-size: 11px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}
.spine__step--active {
  background: var(--ag-blue); color: #fff; font-weight: 600; padding: 5px 11px;
  box-shadow: 0 0 14px -2px rgba(61,88,242,.7);
}
.spine__dot { width: 7px; height: 7px; border-radius: 50%; background: #fff; }
.spine__step--todo { color: var(--ag-text-faint); }

.avatars--topbar .avatar { border-color: var(--ag-surface); }
.live-pill {
  display: flex; align-items: center; gap: 6px; padding: 5px 9px;
  border: 1px solid var(--ag-line-strong); border-radius: 7px;
  font-size: 11px; font-weight: 500;
}
.live-pill__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ag-live); box-shadow: 0 0 8px var(--ag-live); }
.live-pill--closed { color: var(--ag-text-faint); }
.close-btn {
  background: transparent; border: 1px solid var(--ag-line-strong); border-radius: 7px;
  padding: 5px 9px; font-size: 11px; color: var(--ag-text-faint); cursor: pointer;
}
.close-btn:hover { color: var(--ag-coach-light); border-color: var(--ag-coach-border); }
.composer__box--between { justify-content: space-between; }
.composer__send--open {
  width: auto; padding: 0 14px; font: 600 12.5px var(--ag-font-ui); height: 32px;
}

.shell__body { flex: 1; display: flex; min-height: 0; }
.shell__content { flex: 1; display: flex; min-width: 0; }

/* left rail */
.rail {
  width: 52px; flex: none; border-right: 1px solid var(--ag-line-strong);
  background: var(--ag-surface-deep);
  display: flex; flex-direction: column; align-items: center; padding: 12px 0; gap: 5px;
}
.rail__item {
  width: 36px; height: 36px; border-radius: 9px; position: relative;
  display: flex; align-items: center; justify-content: center;
}
/* A real active state: the old .18 tint + .4 inset ring read as nothing on a
   near-black rail. Filled blue with a white glyph is unambiguous. */
.rail__item.is-active { background: var(--ag-blue); box-shadow: none; }
.rail__item.is-disabled { cursor: default; }
/* The label flag (deep audit §D, AG-09): icons alone are a memory test —
   hover/focus names the destination, read from the item's aria-label. */
.rail__item::after {
  content: attr(aria-label);
  position: absolute; left: calc(100% + 12px); top: 50%; transform: translateY(-50%);
  font: 500 12px var(--ag-font-ui); color: var(--ag-text);
  background: var(--ag-chrome); border: 1px solid var(--ag-line-strong);
  border-radius: 6px; padding: 3px 9px; white-space: nowrap;
  opacity: 0; pointer-events: none; z-index: 40; transition: opacity .12s;
}
.rail__item:hover::after, .rail__item:focus-visible::after { opacity: 1; }
.rail__dot {
  position: absolute; top: 6px; right: 7px; width: 6px; height: 6px;
  border-radius: 50%; background: var(--ag-coach); box-shadow: 0 0 6px var(--ag-coach);
}
/* rail icons — simple CSS shapes per the handoff */
.icon-room { width: 15px; height: 13px; border: 2px solid var(--ag-text-faint); border-radius: 5px 5px 5px 1px; }
.rail__item.is-active .icon-room,
.rail__item.is-active .icon-journey i { border-color: #fff; }
.rail__item.is-active .icon-memory i,
.rail__item.is-active .icon-grid i,
.rail__item.is-active .icon-diamond { background: #fff; }
.rail__item.is-active .icon-p { color: #fff; }
.icon-memory { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.icon-memory i { width: 15px; height: 2px; background: var(--ag-text-faint); }
.icon-memory i:last-child { width: 10px; }
.icon-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.icon-grid i { width: 6px; height: 6px; background: var(--ag-text-faint); }
.icon-diamond { width: 11px; height: 11px; background: var(--ag-text-faint); transform: rotate(45deg); }
.icon-p { font: 700 12px var(--ag-font-mono); color: var(--ag-text-faint); }
/* traces: a pulse ring — the black box "listening" — instead of the ◦ glyph
   that read as a rendering artifact (deep audit AG-09) */
.icon-pulse { width: 14px; height: 14px; border: 2px solid var(--ag-text-faint);
  border-radius: 50%; position: relative; display: block; }
.icon-pulse i { position: absolute; inset: 3px; border-radius: 50%;
  background: var(--ag-text-faint); }
.rail__item.is-active .icon-pulse { border-color: #fff; }
.rail__item.is-active .icon-pulse i { background: #fff; }

/* ============================================================
   The Room  (handoff #2a)
   ============================================================ */
.room { flex: 1; display: flex; min-width: 0; }

.convo { flex: 1; display: flex; flex-direction: column; min-width: 0; background: var(--ag-bg); }
.convo__scroll {
  flex: 1; overflow-y: auto; padding: 22px 30px;
  display: flex; flex-direction: column; gap: 18px;
}

/* recap banner */
.recap {
  border: 1px solid var(--ag-blue-line);
  /* Flat, not a gradient over a 1.06:1 tint: the old gradient's ends were
     indistinguishable from the canvas, so the banner had no edge. */
  background: var(--ag-accent-navy);
  border-radius: 11px; padding: 14px 16px; flex: none;
}
.recap__head { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; }
.recap__eyebrow {
  font: 600 11px var(--ag-font-mono); letter-spacing: .08em;
  color: var(--ag-blue-light); text-transform: uppercase;
}
.recap__meta { font-size: 11px; color: var(--ag-text-muted); }
.recap__body { font-size: 13px; line-height: 1.55; color: var(--ag-text-body); }
.recap__body strong { color: var(--ag-text); }

/* AG-13: the one-time orientation — Aris's voice, styled like his messages
   but framed as furniture (dashed): it is not part of the record. */
.orient {
  border: 1px dashed var(--ag-coach-border);
  background: var(--ag-coach-tint);
  border-radius: 11px; padding: 14px 16px; flex: none;
}
.orient__head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.orient__name { font-size: 12.5px; font-weight: 600; color: var(--ag-text); }
.orient__eyebrow {
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ag-text-faint);
}
.orient__lines { display: flex; flex-direction: column; gap: 6px; }
.orient__lines p { margin: 0; font-size: 13px; line-height: 1.55; color: var(--ag-text-body); }
.orient__lines b { color: var(--ag-text); font-weight: 600; }
.orient__lines a { color: var(--ag-blue-light); text-decoration: none; }
.orient__lines a:hover { text-decoration: underline; }

/* Q1 — the guest seat: reply needs a composer (the decision menu item is
   gated in the template). The server enforces both; this keeps chrome honest. */
.room--guest .msg__reply { display: none; }

/* E2 — the room's own voice: a diarization slot, not an identity. Quiet,
   distinct from both members (no claimed name) and Aris (no coach tint). */
.msg--ambient .msg__name { color: var(--ag-text-muted); font-style: italic; }
.avatar--ambient {
  background: var(--ag-surface-2); border: 1px dashed var(--ag-line-strong);
  font-size: 11px;
}
.msg--ambient .msg__body { color: var(--ag-text-body); }

/* H2 — the visible silence: quiet furniture where a held turn happened.
   Nobody else can show this; the silences are recorded with reasoning. */
.held-mark {
  display: flex; align-items: baseline; gap: 8px; flex: none;
  padding: 2px 0 2px 46px;  /* aligns with message bodies (avatar gutter) */
}
.held-mark__dot {
  width: 6px; height: 6px; border-radius: 50%; flex: none; align-self: center;
  border: 1.5px solid var(--ag-coach-border); background: none;
}
.held-mark__label { font-size: 11.5px; color: var(--ag-text-faint); font-style: italic; }
.held-mark__why summary {
  font-size: 11px; color: var(--ag-text-faint); cursor: pointer;
  list-style: none; text-decoration: underline dotted;
}
.held-mark__why summary::-webkit-details-marker { display: none; }
.held-mark__why[open] summary { color: var(--ag-text-muted); }
.held-mark__reason {
  display: block; margin-top: 4px; font-size: 12px; line-height: 1.55;
  color: var(--ag-text-muted); max-width: 560px;
}

/* messages */
.msg { display: flex; gap: 11px; flex: none; }
.avatar--msg { width: 30px; height: 30px; font-size: 11px; border: none; }
.avatar--msg-coach {
  width: 30px; height: 30px; border-radius: 8px; border: none;
  background: linear-gradient(135deg, var(--ag-coach), #6a2fb8);
  font-size: 12px; font-weight: 800; flex: none;
  box-shadow: 0 0 0 3px rgba(139,61,217,.18), var(--ag-coach-glow);
}
.avatar--quiet { box-shadow: 0 0 0 3px rgba(139,61,217,.18); }
.msg__main { flex: 1; min-width: 0; }
.msg__head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 3px; }
.msg__name { font-size: 12px; font-weight: 600; }
.msg__name--coach { font-weight: 700; color: var(--ag-coach-light); margin-bottom: 2px; }
.msg__meta { font-size: 11px; color: var(--ag-text-faint); }
.msg__body { font-size: 14px; line-height: 1.55; color: var(--ag-text-body); }

.method-tag {
  font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em;
  color: var(--ag-aris-emphasis); background: var(--ag-aris-chip);
  border: 1px solid var(--ag-aris-line); padding: 2px 6px; border-radius: 5px;
}
.coach-bubble {
  background: var(--ag-coach-tint); border: 1px solid var(--ag-coach-border);
  border-left: 2px solid var(--ag-coach);
  border-radius: 11px; border-top-left-radius: 3px;
  padding: 13px 15px; font-size: 14px; line-height: 1.6; color: var(--ag-text-body);
}
.coach-bubble strong { color: var(--ag-aris-emphasis); }
.provocation {
  margin-top: 9px; padding: 10px 12px; background: rgba(8,10,28,.6);
  border: 1px dashed var(--ag-aris-line); border-radius: 8px; font-size: 12.5px;
}
.provocation strong { color: var(--ag-text); }

/* system event divider */
.sysline { display: flex; align-items: center; gap: 10px; flex: none; }
.sysline__rule { flex: 1; height: 1px; background: var(--ag-line); }
.sysline__note { display: flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 500; color: var(--ag-text-muted); }
.sysline__note strong { color: var(--ag-coach-light); font-weight: 600; }
.sysline__diamond { width: 6px; height: 6px; background: var(--ag-coach); transform: rotate(45deg); }

/* typing indicator */
@keyframes ag-blink { 0%, 60% { opacity: .25; } 30% { opacity: 1; } }
.msg--typing { align-items: center; }
.typing {
  display: flex; align-items: center; gap: 5px; padding: 9px 13px;
  background: var(--ag-coach-tint); border: 1px solid var(--ag-coach-border);
  border-radius: 11px; border-top-left-radius: 3px;
}
.typing span { width: 6px; height: 6px; border-radius: 50%; background: var(--ag-coach-light); animation: ag-blink 1.2s infinite; }
.typing span:nth-child(2) { animation-delay: .2s; }
.typing span:nth-child(3) { animation-delay: .4s; }

/* composer */
.composer { flex: none; padding: 12px 30px 18px; border-top: 1px solid var(--ag-line-strong); position: relative; }

/* @mentions — chips in messages (blue = a person, purple = Aris) */
.mention {
  color: var(--ag-blue-text); background: rgba(61,88,242,.14);
  border-radius: 5px; padding: 0 4px; font-weight: 600;
}
.mention--aris { color: var(--ag-coach-light); background: rgba(139,61,217,.16); }

/* @mention autocomplete popup, anchored above the composer */
.mention-pop {
  position: absolute; left: 30px; bottom: calc(100% + 2px); min-width: 260px;
  background: var(--ag-surface); border: 1px solid var(--ag-line-strong);
  border-radius: 10px; padding: 4px; z-index: 30;
  box-shadow: 0 -6px 24px -8px rgba(0,0,0,.6);
  display: flex; flex-direction: column;
}
.mention-pop__item {
  display: flex; align-items: center; gap: 9px; text-align: left;
  border: none; background: transparent; cursor: pointer;
  padding: 6px 8px; border-radius: 7px; color: var(--ag-text);
  font: 400 13px var(--ag-font-ui);
}
.mention-pop__item.is-active, .mention-pop__item:hover { background: rgba(61,88,242,.14); }
.mention-pop__name { flex: none; }
.mention-pop__role { font-size: 11px; color: var(--ag-text-meta); }

/* who else is typing (ephemeral) */
.peers-typing { font-size: 11px; color: var(--ag-text-meta); margin: 0 2px 6px; }

/* Message actions (C3/C6/C8) — VISIBLE AT REST (deep audit §D, AG-07): a
   hover-only affordance does not exist on touch and is undiscoverable
   everywhere else. Quiet meta colour at rest; blue on hover/focus. */
.msg__reply, .msg__react, .msg__more {
  border: none; background: transparent; color: var(--ag-text-meta); cursor: pointer;
  font-size: 11px; padding: 2px 5px;
}
.msg__more { font-size: 13px; line-height: 1; }
.msg__react { margin-left: auto; }
.msg__react + .msg__reply { margin-left: 0; }  /* react takes the auto-gap slot */
.msg__reply:hover, .msg__react:hover, .msg__more:hover,
.msg__reply:focus-visible, .msg__react:focus-visible, .msg__more:focus-visible {
  color: var(--ag-blue-text);
}

/* reaction pills (C6) */
.reactions { display: flex; gap: 5px; margin-top: 5px; flex-wrap: wrap; }
.rpill {
  border: 1px solid var(--ag-line-strong); background: rgba(255,255,255,.02);
  border-radius: 11px; padding: 2px 8px; font-size: 12px; cursor: pointer;
  display: inline-flex; gap: 4px; align-items: center; line-height: 1.3;
}
.rpill:hover { border-color: var(--ag-blue-line); }
.rpill.is-mine { border-color: var(--ag-blue); background: rgba(61,88,242,.14); }
.rpill__n { font-size: 11px; color: var(--ag-blue-light); }

/* attachment chip on a message (C7) — the visible mark of the door */
.attach-chip {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 5px;
  padding: 4px 10px; font-size: 11px; color: var(--ag-text-muted);
  border: 1px solid var(--ag-line-strong); border-radius: 8px;
  background: rgba(255,255,255,.02);
}
.attach-chip__clip { font-size: 12px; }
.attach-chip__note { color: var(--ag-text-meta); font-size: 11px; }

/* admin surface (Line A) — read-only monitoring */
.adminwrap { padding: 26px 34px; overflow-y: auto; max-width: 1220px; }
.admin-nav {
  font-size: 11px; color: var(--ag-text-muted); text-decoration: none;
  padding: 5px 9px; border: 1px solid var(--ag-line-strong); border-radius: 7px; margin-left: 6px;
}
.admin-nav:hover { color: var(--ag-text); border-color: var(--ag-line-strong); }
.admin-stats { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 22px; }
.stat {
  min-width: 130px; padding: 12px 16px; border: 1px solid var(--ag-line-strong);
  border-radius: 11px; background: var(--ag-surface);
  display: flex; flex-direction: column; gap: 3px;
}
.stat--live { border-color: var(--ag-blue-line); }
.stat__value { font-size: 21px; font-weight: 700; }
.stat__label { font-size: 11px; color: var(--ag-text-meta); letter-spacing: .05em; text-transform: uppercase; }
.admin-section { margin-bottom: 26px; }
.admin-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; align-items: start; }
.admin-table { width: 100%; border-collapse: collapse; margin-top: 8px; }
.admin-table th {
  text-align: left; font-size: 11px; color: var(--ag-text-meta); font-weight: 500;
  letter-spacing: .05em; text-transform: uppercase; padding: 6px 10px;
  border-bottom: 1px solid var(--ag-line-strong);
}
.admin-table td {
  padding: 8px 10px; font-size: 12.5px; border-bottom: 1px solid var(--ag-line-strong);
  vertical-align: baseline;
}
.admin-table td.mono { font-size: 11px; color: var(--ag-text-muted); }
.admin-table tr:hover td { background: var(--ag-chrome); }  /* AG-17: .015 alpha was imperceptible */
.admin-table__link { color: var(--ag-text); text-decoration: none; }
.admin-table__link:hover { color: var(--ag-blue-light); }
.live-pill--inline { display: inline-flex; margin-left: 8px; font-size: 11px; padding: 2px 7px; }

/* observe mode (A2) — read-only live view */
.observe { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.observe__banner {
  flex: none; padding: 8px 30px; font-size: 11px; color: var(--ag-coach-light);
  background: var(--ag-coach-tint); border-bottom: 1px solid var(--ag-coach-border);
}
.observe__scroll { flex: 1; overflow-y: auto; padding: 18px 30px; }
/* the shared event fragment carries interactive affordances; an observer has none */
.observe .msg__reply, .observe .msg__react, .observe .msg__more { display: none; }
.observe .rpill { pointer-events: none; }
.admin-observe-cta { text-decoration: none; cursor: pointer; }
.admin-observe-cta .stat__value { color: var(--ag-blue-light); }
.admin-observe-cta:hover { border-color: var(--ag-blue); }

/* the facilitation report, rendered markdown (A3c) */
.report-body { font-size: 13px; line-height: 1.6; }
.report-body h2 { font-size: 13px; margin: 14px 0 6px; color: var(--ag-blue-light); }
.report-body ul { padding-left: 18px; margin: 6px 0; }
.report-body li { margin: 3px 0; }
.report-body strong { color: var(--ag-text); }

/* reaction palette */
.react-pop {
  position: fixed; z-index: 60; display: flex; gap: 2px; padding: 4px;
  background: var(--ag-surface); border: 1px solid var(--ag-line-strong);
  border-radius: 10px; box-shadow: 0 8px 26px -8px rgba(0,0,0,.6);
}
.react-pop[hidden] { display: none; }
.react-pop__emoji {
  border: none; background: transparent; font-size: 16px; padding: 4px 6px;
  border-radius: 6px; cursor: pointer; line-height: 1;
}
.react-pop__emoji:hover { background: rgba(61,88,242,.14); }

/* message actions menu (C8) */
.msg-menu {
  position: fixed; z-index: 60; min-width: 184px; padding: 4px;
  background: var(--ag-surface); border: 1px solid var(--ag-line-strong);
  border-radius: 9px; box-shadow: 0 8px 26px -8px rgba(0,0,0,.6);
  display: flex; flex-direction: column;
}
.msg-menu__item {
  text-align: left; border: none; background: transparent; cursor: pointer;
  padding: 7px 10px; border-radius: 6px; color: var(--ag-text);
  font: 400 12.5px var(--ag-font-ui);
}
.msg-menu__item:hover { background: rgba(61,88,242,.14); }

.reply-quote {
  display: flex; gap: 7px; align-items: baseline; text-decoration: none;
  border-left: 2px solid var(--ag-line-strong); padding: 2px 0 2px 8px;
  margin: 2px 0 5px; border-radius: 0 4px 4px 0; max-width: 100%;
}
.reply-quote:hover { border-left-color: var(--ag-blue); background: rgba(61,88,242,.06); }
.reply-quote__author { color: var(--ag-blue-light); font-size: 11px; font-weight: 600; flex: none; }
.reply-quote__snippet {
  color: var(--ag-text-meta); font-size: 11px; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.reply-bar {
  display: flex; align-items: center; gap: 8px; margin: 0 2px 6px;
  padding: 5px 10px; border-left: 2px solid var(--ag-blue);
  background: rgba(61,88,242,.07); border-radius: 0 6px 6px 0;
}
.reply-bar__label { font-size: 11px; color: var(--ag-text-muted); flex: none; }
.reply-bar__label b { color: var(--ag-blue-light); }
.reply-bar__snippet {
  flex: 1; min-width: 0; font-size: 11px; color: var(--ag-text-meta);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.reply-bar__cancel {
  border: none; background: transparent; color: var(--ag-text-meta); cursor: pointer;
  font-size: 12px; flex: none; line-height: 1;
}
.reply-bar__cancel:hover { color: var(--ag-text); }

@keyframes msg-flash { 0%, 100% { background: transparent; } 30% { background: rgba(61,88,242,.13); } }
.msg--flash { animation: msg-flash 1.2s ease; border-radius: 8px; }

/* live presence dots (C5, restyled deep audit §C): away = a visible ring and
   no dot — initials stay fully legible; online = surface ring + green dot.
   Ring is --ag-text-meta because the topbar sits on CHROME, where line-strong
   is only 2.8:1 (its 3.17:1 is stated against the canvas). Selectors carry
   .avatars--topbar to outrank its blanket border-color rule. */
.pavatar { position: relative; transition: border-color .15s; }
.avatars--topbar .pavatar { border-color: var(--ag-text-meta); }
.avatars--topbar .pavatar.is-online { border-color: var(--ag-surface); }
.pdot {
  position: absolute; right: -1px; bottom: -1px; width: 8px; height: 8px;
  border-radius: 50%; background: var(--ag-online); border: 2px solid var(--ag-surface);
  opacity: 0; transform: scale(.5); transition: opacity .15s, transform .15s;
}
.pavatar.is-online .pdot { opacity: 1; transform: scale(1); }

/* unread divider (C5) */
.unread-divider { display: flex; align-items: center; gap: 10px; margin: 6px 0; flex: none; }
.unread-divider::before, .unread-divider::after {
  content: ''; flex: 1; height: 1px; background: rgba(61,88,242,.35);
}
.unread-divider__label {
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ag-blue-light); flex: none;
}
.composer__box {
  border: 1px solid var(--ag-line-strong); background: var(--ag-surface);
  border-radius: 11px; padding: 8px 13px;
  display: flex; align-items: center; gap: 10px;
}
.composer__box:focus-within { border-color: var(--ag-blue-line); }
.composer__input {
  flex: 1; background: transparent; border: none; outline: none; resize: none;
  font: 400 13px var(--ag-font-ui); color: var(--ag-text); line-height: 1.5; padding: 4px 0;
}
.composer__input::placeholder { color: var(--ag-text-meta); }
.composer__hint { font-size: 11px; color: var(--ag-text-meta); }
.composer__send {
  width: 30px; height: 30px; flex: none; border: none; border-radius: 8px;
  background: var(--ag-blue); color: #fff; font-size: 14px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 14px -2px rgba(61,88,242,.7);
}
.composer__mic {
  width: 30px; height: 30px; flex: none; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--ag-line-strong); background: transparent; color: var(--ag-text-meta);
  display: flex; align-items: center; justify-content: center;
}
.composer__mic:hover { color: var(--ag-text); border-color: var(--ag-blue-line); }
/* recording = the human speaking, so record-red — purple stays the Coach's */
.composer__mic.is-recording {
  color: #fff; background: #d64545; border-color: transparent;
  animation: mic-pulse 1.6s ease-in-out infinite;
}
.composer__mic.is-busy { opacity: .5; cursor: progress; }
@keyframes mic-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(214,69,69,.45); }
  50% { box-shadow: 0 0 0 7px rgba(214,69,69,0); }
}
.composer__box--join { cursor: pointer; }
.composer__joincopy { flex: 1; font-size: 13px; color: var(--ag-text-muted); }
.conn-state { font-size: 11px; color: var(--ag-coach-light); }

/* right panel */
.panel {
  width: 400px; flex: none; border-left: 1px solid var(--ag-line-strong);
  background: var(--ag-surface-deep); display: flex; flex-direction: column; min-height: 0;
}
.panel__tabs {
  flex: none; display: flex; gap: 16px; padding: 13px 16px 0;
  border-bottom: 1px solid var(--ag-line-strong);
}
.panel__tab {
  background: none; border: none; cursor: pointer; padding: 0 0 11px;
  font: 400 12px var(--ag-font-ui); color: var(--ag-text-meta);
  border-bottom: 2px solid transparent;
}
.panel__tab.is-active { color: var(--ag-text); font-weight: 600; border-bottom-color: var(--ag-blue); }
.panel__body {
  flex: 1; overflow-y: auto; padding: 15px 16px;
  display: flex; flex-direction: column; gap: 11px;
}
.panel__foot { margin-top: auto; padding-top: 12px; }
.panel__empty { padding: 12px 2px; }

/* Value-Spectrum gate warning */
.gate-warning {
  display: flex; align-items: center; gap: 8px; padding: 8px 11px;
  background: rgba(139,61,217,.1); border: 1px solid var(--ag-aris-line);
  border-radius: 8px; font-size: 11.5px; line-height: 1.4; color: var(--ag-aris-emphasis);
}
.gate-warning__icon { font-size: 15px; line-height: 1; color: var(--ag-coach-light); }

/* Value-Spectrum cards */
.vcard { border: 1px solid var(--ag-line-strong); border-radius: 9px; overflow: hidden; flex: none; }
.vcard__head {
  padding: 8px 11px; display: flex; align-items: center; gap: 7px;
  border-bottom: 1px solid var(--ag-line); background: rgba(75,242,242,.05);
}
.vcard__chip { width: 8px; height: 8px; border-radius: 2px; }
.vcard__chip--save { background: var(--ag-save); }
.vcard__chip--grow { background: var(--ag-grow); }
.vcard__chip--transform { background: var(--ag-transform); }
.vcard__title { font-size: 11.5px; font-weight: 700; }
.vcard__note { margin-left: auto; font-size: 11px; color: var(--ag-text-faint); }
.vcard__body { padding: 9px 11px; font-size: 12px; color: var(--ag-text-body); line-height: 1.45; }
.vcard__body strong { color: var(--ag-text); }
.vcard__body--muted { color: var(--ag-text-muted); }
.vcard__state { color: var(--ag-blue-light); font-style: normal; }

.vcard--grow { border-color: var(--ag-blue-line); box-shadow: 0 0 0 1px rgba(61,88,242,.12); }
.vcard__head--grow { background: rgba(61,88,242,.1); border-bottom-color: var(--ag-blue-line); }
.vcard__note--grow { color: var(--ag-blue-light); }
.vcard--transform { border: 1px dashed var(--ag-aris-line); }
.vcard__head--transform { background: rgba(139,61,217,.08); border-bottom-color: var(--ag-aris-line); }
.vcard__note--transform { color: var(--ag-transform); }

/* engine strip — every computed value glows cyan (spec §2.4 made visible) */
.engine-strip {
  margin-top: 4px; border: 1px solid var(--ag-engine-line); background: rgba(75,242,242,.04);
  border-radius: 9px; padding: 11px 12px; display: flex; align-items: center; gap: 10px; flex: none;
}
.engine-strip__col { display: flex; flex-direction: column; gap: 1px; }
.engine-strip__label {
  font: 400 11px var(--ag-font-mono); color: var(--ag-text-meta);
  text-transform: uppercase; letter-spacing: .06em;
}
.engine-strip__value {
  font: 700 18px var(--ag-font-mono); color: var(--ag-engine);
}
.engine-strip__formula { margin-left: auto; font: 400 11px var(--ag-font-mono); color: var(--ag-text-faint); text-align: right; line-height: 1.4; }

/* decision cards */
.dcard { border: 1px solid var(--ag-line-strong); background: var(--ag-surface-2); border-radius: 9px; padding: 10px 12px; flex: none; }
.dcard__head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.dcard__id { font-size: 11px; font-weight: 600; color: var(--ag-blue-light); }
.dcard__statement { font-size: 12.5px; line-height: 1.45; color: var(--ag-text); }
.dcard__rationale { margin-top: 5px; font-size: 11px; line-height: 1.4; color: var(--ag-text-faint); }

/* status pills (decisions + parking lot) */
.status-pill {
  margin-left: auto; font-size: 11px; font-weight: 600; text-transform: uppercase;
  padding: 3px 8px; border-radius: 5px;
}
.status-pill--pending, .status-pill--parked-pending { background: rgba(139,61,217,.16); color: var(--ag-coach-light); }
.status-pill--proposed, .status-pill--raised { background: rgba(61,88,242,.16); color: var(--ag-blue-light); }
.status-pill--decided, .status-pill--accepted { background: rgba(75,242,242,.14); color: var(--ag-engine); }
.status-pill--parked { background: rgba(138,141,192,.16); color: var(--ag-status-parked); }
.status-pill--rejected, .status-pill--dropped { background: rgba(92,95,146,.16); color: var(--ag-status-dropped); }

/* ============================================================
   Business case  (handoff #3b) — the cell graph as a grid
   ============================================================ */
.bcase { flex: 1; display: flex; flex-direction: column; min-width: 0; }

/* scenario tabs + export (top bar) */
.scenario-tabs {
  margin-left: auto; display: flex; align-items: center;
  background: var(--ag-surface-2); border: 1px solid var(--ag-line-strong);
  border-radius: 9px; padding: 3px;
}
.scenario-tab { padding: 5px 12px; border-radius: 6px; font-size: 11.5px; color: var(--ag-text-muted); }
.scenario-tab.is-active { background: var(--ag-blue); color: #fff; font-weight: 600; }
.export-btn {
  display: flex; align-items: center; gap: 7px; padding: 6px 12px;
  border: 1px solid var(--ag-engine-line); border-radius: 8px;
  font-size: 12px; font-weight: 600; color: var(--ag-engine);
}
.export-btn:hover { box-shadow: 0 0 12px -4px rgba(75,242,242,.6); }
.export-btn__dot { width: 6px; height: 6px; border-radius: 2px; background: var(--ag-engine); box-shadow: 0 0 6px var(--ag-engine); }

/* formula bar */
.fbar {
  height: 40px; flex: none; display: flex; align-items: center; gap: 12px;
  padding: 0 20px; border-bottom: 1px solid var(--ag-line-strong); background: var(--ag-surface-2);
}
.fbar__ref {
  font-size: 12px; font-weight: 600; color: var(--ag-blue-light);
  background: rgba(61,88,242,.14); border: 1px solid var(--ag-blue-line);
  border-radius: 6px; padding: 3px 9px;
}
.fbar__fx { font-size: 13px; font-weight: 600; color: var(--ag-engine); }
.fbar__formula { font-size: 12.5px; font-weight: 500; color: var(--ag-text-body); }
.fbar__note { margin-left: auto; font-size: 11px; color: var(--ag-text-faint); }

.bcase__body { flex: 1; display: flex; min-height: 0; }
.bcase__gridwrap {
  flex: 1; min-width: 0; padding: 20px; overflow-y: auto;
  display: flex; flex-direction: column; gap: 14px;
}

/* the grid — gridlines via container bg + 1px gap */
/* [hidden] must win over the class's display — the AG-28 empty state
   depends on it (a bare `display: grid` resurrects a hidden element). */
.grid[hidden] { display: none; }
.grid {
  display: grid; grid-template-columns: 30px 268px 1fr 1fr 1fr; gap: 1px;
  /* The background IS the gridline (it shows through the 1px gap), so it is
     structural, not decoration — the highest-impact hairline in the file. */
  background: var(--ag-line-strong); border: 1px solid var(--ag-line-strong);
  border-radius: 10px; overflow: hidden; font-size: 12.5px;
}
.grid__cell { background: var(--ag-surface); padding: 9px 12px; display: flex; align-items: center; gap: 7px; }
.grid__cell--head {
  background: var(--ag-surface-2); padding: 8px 12px;
  font-size: 11px; font-weight: 600; color: var(--ag-text-faint);
}
.grid__cell--gutter {
  background: var(--ag-surface-2); justify-content: center; padding: 9px 0;
  font-size: 11px; font-weight: 500; color: var(--ag-text-faint);
}
.grid__cell--gutter.is-selected-gutter { color: var(--ag-blue-light); font-weight: 600; }
.grid__cell--num { justify-content: flex-end; text-align: right; font-size: 13px; font-weight: 500; }
/* AG-14: Y2/Y3 inputs are no longer muted — an input is an input in every
   column; cyan (--derived) alone distinguishes the Engine's numbers. */
.grid__cell--empty { color: var(--ag-text-faint); }
a.grid__cell--num:hover { box-shadow: inset 0 0 0 1px rgba(61,88,242,.45); }

.grid__cell--derived { background: var(--ag-derived-cell); }
.grid__cell--derived.grid__cell--num { color: var(--ag-engine); font-weight: 600; }
.grid__cell--label.grid__cell--derived { color: var(--ag-text-body); }

.grid__cell.is-selected {
  background: var(--ag-select); box-shadow: inset 0 0 0 2px var(--ag-blue-line);
  font-weight: 700; font-size: 13px;
}
.grid__cell--label.is-selected-label { background: var(--ag-select); box-shadow: inset 2px 0 0 var(--ag-blue); }

.grid__note { font-size: 11px; color: var(--ag-text-faint); }
/* Chip labels are the ONE sanctioned 10px: on their own solid ≥4.5:1 fills
   (deep audit §E — alpha washes gave ratios nobody could state). */
.fx-chip {
  font-size: 10px; font-weight: 600; background: var(--ag-engine-chip); color: var(--ag-engine);
  padding: 1px 5px; border-radius: 3px; flex: none;
}
.parked-chip {
  font-size: 10px; font-weight: 600; background: var(--ag-aris-chip); color: var(--ag-aris-emphasis);
  padding: 1px 6px; border-radius: 3px; flex: none;
}

/* NPV footer — a computed value, so it glows cyan (§2.4 on screen) */
.npv {
  display: flex; align-items: center; gap: 14px; padding: 14px 18px;
  background: linear-gradient(90deg, rgba(75,242,242,.06), rgba(61,88,242,.05));
  border: 1px solid var(--ag-engine-line); border-radius: 11px; flex: none;
}
.npv__labels { display: flex; flex-direction: column; gap: 2px; }
.npv__eyebrow { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ag-text-muted); }
.npv__formula { font-size: 11px; color: var(--ag-text-faint); }
.npv__value { margin-left: auto; font-size: 26px; font-weight: 700; color: var(--ag-engine); }

/* trace panel */
.trace {
  width: 360px; flex: none; border-left: 1px solid var(--ag-line-strong);
  background: var(--ag-surface-deep); padding: 18px;
  display: flex; flex-direction: column; gap: 14px; overflow-y: auto;
}
.trace__eyebrow { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ag-blue-light); margin-bottom: 4px; }
.trace__title { font-size: 14px; font-weight: 600; }

.chain { display: flex; flex-direction: column; }
.chain__row { display: flex; gap: 10px; align-items: stretch; }
.chain__spine { display: flex; flex-direction: column; align-items: center; flex: none; }
.chain__node { width: 9px; height: 9px; flex: none; margin-top: 3px; }
.chain__node--computed { border-radius: 2px; background: var(--ag-engine); }
.chain__node--assumption { border-radius: 50%; background: var(--ag-coach); }
.chain__line { width: 1px; flex: 1; min-height: 14px; background: var(--ag-line-strong); }
.chain__body { padding-bottom: 12px; min-width: 0; }
.chain__value { font-size: 12.5px; font-weight: 600; color: var(--ag-engine); }
.chain__tag { color: var(--ag-text-faint); font-weight: 400; font-size: 11px; }
.chain__label { font-size: 12.5px; }
.chain__ref { font-size: 11px; color: var(--ag-text-muted); }
.chain__formula { font-size: 11px; font-weight: 500; color: var(--ag-text-muted); margin-top: 2px; }

/* assumption record card */
.asm-card {
  border: 1px solid var(--ag-aris-line); background: rgba(139,61,217,.06);
  border-radius: 10px; padding: 12px 13px; flex: none;
}
.asm-card__head { display: flex; align-items: center; gap: 7px; margin-bottom: 8px; }
.asm-card__eyebrow { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--ag-coach-light); }
.asm-card__version { margin-left: auto; font-size: 11px; font-weight: 500; color: var(--ag-text-muted); }
.asm-card__body { font-size: 12.5px; line-height: 1.5; color: var(--ag-text-body); }
.asm-card__body strong { color: var(--ag-text); }
.asm-card__foot {
  display: flex; align-items: center; gap: 8px; margin-top: 10px; padding-top: 10px;
  border-top: 1px solid var(--ag-aris-line); font-size: 11px; color: var(--ag-text-muted);
}
.asm-card__sep { color: var(--ag-text-faint); }

/* sensitivity — real Engine sweeps */
.sens { margin-top: auto; flex: none; }
.sens__eyebrow { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ag-text-faint); margin-bottom: 9px; }
.sens__row { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; }
.sens__name { width: 64px; font-size: 11px; color: var(--ag-text-muted); }
.sens__track { flex: 1; height: 9px; border-radius: 3px; display: flex; justify-content: flex-end; }
.sens__bar { height: 9px; border-radius: 3px; background: linear-gradient(90deg, var(--ag-coach), var(--ag-engine)); }
.sens__value { width: 52px; text-align: right; font-size: 11px; font-weight: 500; color: var(--ag-text-muted); }

/* ============================================================
   Parking lot  (handoff #3c) — the async door
   ============================================================ */
.plot { flex: 1; display: flex; min-width: 0; }

.pending-pill {
  margin-left: auto; display: flex; align-items: center; gap: 6px;
  padding: 5px 10px; background: rgba(139,61,217,.14);
  border: 1px solid var(--ag-aris-line); border-radius: 20px;
  font-size: 11.5px; font-weight: 600; color: var(--ag-coach-light);
}
.pending-pill__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ag-coach); box-shadow: 0 0 6px var(--ag-coach); }

.plot__left {
  width: 388px; flex: none; border-right: 1px solid var(--ag-line-strong);
  background: var(--ag-surface-2); padding: 26px;
  display: flex; flex-direction: column;
}
.plot__hero { margin: 0; font-size: 26px; font-weight: 700; letter-spacing: -.01em; }
.plot__copy { margin: 12px 0 0; font-size: 13.5px; line-height: 1.6; color: var(--ag-text-body); }

.compose {
  margin-top: 24px; border: 1px solid var(--ag-line-strong); background: var(--ag-surface);
  border-radius: 12px; padding: 14px; display: block;
}
.compose:focus-within { border-color: var(--ag-blue-line); }
.compose__input {
  width: 100%; min-height: 52px; background: transparent; border: none; outline: none;
  resize: vertical; font: 400 13px var(--ag-font-ui); color: var(--ag-text); line-height: 1.5;
}
.compose__input::placeholder { color: var(--ag-text-meta); }
.compose__row { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.compose__attach {
  display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--ag-text-muted);
  padding: 6px 10px; border: 1px solid var(--ag-line-strong); border-radius: 8px; cursor: pointer;
}
.compose__plus { font-size: 14px; line-height: 1; }
.compose__submit {
  margin-left: auto; border: none; padding: 8px 16px; background: var(--ag-blue);
  border-radius: 8px; font: 600 12.5px var(--ag-font-ui); color: #fff; cursor: pointer;
  box-shadow: 0 0 16px -3px rgba(61,88,242,.7);
}
.compose--join { padding: 20px 14px; text-align: center; }
.compose__joincopy { font-size: 13px; color: var(--ag-text-muted); }
.plot__note { margin-top: 12px; }

.lifecycle { margin-top: auto; padding-top: 22px; }
.lifecycle__eyebrow { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ag-text-faint); margin-bottom: 11px; }
.lifecycle__chips { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; font-size: 11px; font-weight: 600; }
.lifecycle__chips .status-pill { margin-left: 0; }
.lifecycle__arrow { color: var(--ag-text-faint); }

.plot__list { flex: 1; min-width: 0; background: var(--ag-bg); display: flex; flex-direction: column; min-height: 0; }
.plot__filters {
  flex: none; display: flex; align-items: center; gap: 16px; padding: 14px 24px;
  border-bottom: 1px solid var(--ag-line-strong);
}
/* Filters are tabs (deep audit AG-30) — same underline pattern as the
   right panel's tabs, so "which view am I in" reads at a glance. */
.plot__filter {
  font-size: 12px; color: var(--ag-text-meta);
  padding-bottom: 6px; border-bottom: 2px solid transparent;
}
.plot__filter.is-active { color: var(--ag-text); font-weight: 600; border-bottom-color: var(--ag-blue); }
.plot__count { color: var(--ag-text-faint); }
.plot__items { flex: 1; overflow-y: auto; padding: 16px 24px; display: flex; flex-direction: column; gap: 12px; }
.plot__foot { flex: none; padding: 12px 24px; border-top: 1px solid var(--ag-line); }

/* item cards */
.pcard { border: 1px solid var(--ag-line-strong); background: var(--ag-surface-2); border-radius: 12px; padding: 14px 16px; flex: none; }
.pcard--pending { border-color: var(--ag-aris-line); background: rgba(139,61,217,.05); }
.pcard--accepted { border-color: var(--ag-engine-line); background: rgba(75,242,242,.03); }
/* Disposition is told by border + colour, never by fading the record
   (deep audit §C, AG-04/AG-05). Dropped strikes the TITLE only — the body
   stays readable; a disposed idea is still part of the acta. */
.pcard--parked { border-color: var(--ag-line); background: var(--ag-chrome); }
.pcard--parked .pcard__body, .pcard--parked .pcard__meta { color: var(--ag-text-muted); }
.pcard--dropped { border-color: var(--ag-line); background: var(--ag-chrome); }
.pcard--dropped .pcard__name { text-decoration: line-through; }
.pcard--dropped .pcard__body { color: var(--ag-text-muted); }
/* A failed turn is EVIDENCE — the most legible thing on the page, accented
   in the system's warn voice, never dimmed as if merely dropped (AG-05). */
.pcard--failed { border-color: var(--ag-warn-line); background: var(--ag-warn-surface); }
.pcard__head { display: flex; align-items: center; gap: 9px; margin-bottom: 9px; }
.avatar--card { width: 26px; height: 26px; font-size: 11px; border: none; flex: none; }
.pcard__name { font-size: 12.5px; font-weight: 600; }
.pcard__meta { font-size: 11px; color: var(--ag-text-meta); }
.pcard__body { font-size: 13px; line-height: 1.5; color: var(--ag-text-body); }
.pcard--parked .pcard__body { color: var(--ag-text-muted); }
.pcard__body strong { color: var(--ag-text); }
.pcard__accepted { color: var(--ag-engine); }
.pcard__file {
  display: flex; align-items: center; gap: 8px; margin-bottom: 8px; padding: 8px 10px;
  background: var(--ag-surface); border: 1px solid var(--ag-line-strong); border-radius: 8px;
}
.pcard__fileicon {
  width: 20px; height: 24px; flex: none; border-radius: 3px;
  background: linear-gradient(135deg, var(--ag-user-b), var(--ag-blue));
}
.pcard__filename { font-size: 12px; font-weight: 500; }
.pcard__filetag { margin-left: auto; font-size: 11px; color: var(--ag-text-meta); }
.pcard__coachnote { display: flex; align-items: center; gap: 7px; margin-top: 10px; font-size: 11px; color: var(--ag-blue-light); }
.pcard__coachsummary {
  margin-top: 10px; padding: 9px 12px; font-size: 12px; line-height: 1.5; color: var(--ag-text-body);
  background: var(--ag-coach-tint); border: 1px solid var(--ag-coach-border);
  border-left: 2px solid var(--ag-coach); border-radius: 8px;
}
.pcard__coachlabel {
  display: block; font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .06em; color: var(--ag-coach-light); margin-bottom: 4px;
}

/* ============================================================
   Export  (Part VIII) — the assembled view + the Lens gate
   ============================================================ */
.exp { flex: 1; display: flex; min-width: 0; }

.export-state {
  margin-left: auto; font-size: 11px; font-weight: 600; letter-spacing: .06em;
  padding: 5px 10px; border: 1px solid var(--ag-line-strong); border-radius: 7px;
  color: var(--ag-text-faint);
}
.export-state--final {
  color: var(--ag-engine); border-color: var(--ag-engine-line);
  box-shadow: 0 0 12px -4px rgba(75,242,242,.5);
}

.exp__preview { flex: 1; min-width: 0; overflow-y: auto; padding: 26px 34px; }
.exp__doc { max-width: 760px; font-size: 13.5px; line-height: 1.6; color: var(--ag-text-body); }
.exp__doc h1 { font-size: 24px; letter-spacing: -.01em; color: var(--ag-text); }
.exp__doc h2 {
  font-size: 15px; color: var(--ag-text); margin-top: 28px;
  padding-bottom: 6px; border-bottom: 1px solid var(--ag-line);
}
.exp__doc h3 { font-size: 12.5px; color: var(--ag-blue-light); text-transform: uppercase; letter-spacing: .05em; }
.exp__doc blockquote {
  margin: 12px 0; padding: 8px 14px; border-left: 2px solid var(--ag-blue);
  background: rgba(61,88,242,.06); color: var(--ag-text-muted); font-size: 12px;
}
.exp__doc table { border-collapse: collapse; width: 100%; margin: 10px 0; font-size: 12px; }
.exp__doc th, .exp__doc td { border: 1px solid var(--ag-line-strong); padding: 6px 9px; text-align: left; }
.exp__doc th { background: var(--ag-surface-2); font: 600 11px var(--ag-font-mono); text-transform: uppercase; color: var(--ag-text-muted); }
.exp__doc em { color: var(--ag-text-faint); }
.exp__doc hr { border: none; border-top: 1px solid var(--ag-line); margin: 22px 0; }

.exp__panel {
  width: 380px; flex: none; border-left: 1px solid var(--ag-line-strong);
  background: var(--ag-surface-deep); padding: 18px;
  display: flex; flex-direction: column; gap: 11px; overflow-y: auto;
}
.exp__eyebrow { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ag-blue-light); }

.lens-card {
  border: 1px solid var(--ag-aris-line); background: rgba(139,61,217,.05);
  border-radius: 10px; padding: 10px 12px; flex: none;
}
.lens-card--ok { border-color: var(--ag-engine-line); background: rgba(75,242,242,.03); }
.lens-card__head { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; }
.lens-card__name { font-size: 12.5px; font-weight: 700; }
.lens-card__evidence { font-size: 11.5px; line-height: 1.45; color: var(--ag-text-muted); }
.exp__checked { text-align: right; }

.exp__btn { width: 100%; flex: none; }
.exp__downloads { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.exp__dl {
  display: flex; flex-direction: column; gap: 2px; padding: 10px 12px;
  border: 1px solid var(--ag-line-strong); border-radius: 9px; background: var(--ag-surface);
}
.exp__dl:hover { border-color: var(--ag-engine-line); }
.exp__dl-name { font: 600 12.5px var(--ag-font-mono); color: var(--ag-engine); }
.exp__dl-note { font-size: 11px; color: var(--ag-text-faint); }

/* ---- Responsive: stack the split on narrow viewports ---- */
@media (max-width: 900px) {
  .reg { flex-direction: column; }
  .reg__left { width: 100%; }
  .index__surfaces { grid-template-columns: 1fr; }
  .spine { display: none; }

  /* AG-12: below 900px the right panel used to vanish (display:none) — the
     Value-Spectrum, business case and decisions simply didn't exist on a
     phone. It is now a bottom sheet: collapsed, the readiness strip and the
     tabs stay visible (the readiness dots are the Spine's stand-in — they
     link to /journey); tapping a tab expands the sheet, tapping the active
     tab again collapses it. --ag-sheet-head is measured by the room script. */
  .panel {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    width: auto; border-left: none;
    border-top: 1px solid var(--ag-line-strong);
    border-radius: 14px 14px 0 0;
    box-shadow: 0 -14px 40px rgba(0, 0, 0, .5);
    max-height: var(--ag-sheet-head, 86px);
    overflow: hidden;
    transition: max-height .22s ease;
  }
  .panel.is-open { max-height: 72dvh; }
  .panel .aris { display: none; }
  /* the conversation keeps its last lines above the collapsed sheet */
  .convo { padding-bottom: var(--ag-sheet-head, 86px); }

  /* AG-31: the journey map was four squeezed columns clipping their station
     labels — on a phone the movements stack, full width each. */
  .journey { padding: 20px 16px 36px; }
  .jmap { flex-direction: column; gap: 10px; }

  /* AG-31: the business case — trace panel stacks under the sheet; the sheet
     itself keeps its column widths and scrolls inside its own wrap. */
  .bcase__body { flex-direction: column; }
  .bcase__gridwrap { overflow-x: auto; }
  .grid { min-width: 540px; }
  .trace { width: auto; border-left: none; border-top: 1px solid var(--ag-line-strong); }
  .fbar { overflow-x: auto; }

  /* AG-31: the topbar wraps instead of forcing the page wide */
  .topbar { height: auto; min-height: 54px; flex-wrap: wrap; padding: 8px 14px; row-gap: 6px; }

  /* AG-31: two-pane screens (memoria, trazas/estacionamiento, export) stack —
     the fixed-width side panes become capped top sections. */
  .mem, .plot, .exp { flex-direction: column; }
  .mem__list, .plot__left, .exp__panel {
    width: auto; max-height: 45dvh; overflow-y: auto;
    border-right: none; border-left: none;
    border-bottom: 1px solid var(--ag-line-strong);
  }
}

/* ============================================================
   Aris — the facilitator's presence (an ambient window, §AVATAR_INSIGHTS).
   The stage sits at the top of the right panel: visible from anywhere in
   the room, never demanding attention. Purple stays Aris's color.
   ============================================================ */
.aris {
  flex: none; position: relative; height: 190px;
  border-bottom: 1px solid var(--ag-line-strong);
  background:
    radial-gradient(120% 90% at 50% 105%, rgba(139,61,217,.10), transparent 60%),
    linear-gradient(180deg, rgba(10,12,34,.4), var(--ag-surface-deep));
  overflow: hidden;
}
.aris__canvas { width: 100%; height: 100%; display: block; }
.aris__caption {
  position: absolute; left: 12px; bottom: 8px;
  display: flex; align-items: center; gap: 6px;
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ag-text-faint); pointer-events: none;
}
.aris__dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--ag-coach); box-shadow: var(--ag-coach-glow);
}
/* The last fallback tier: live rendering gave up (reason recorded in the
   console) — an honest static presence, never a blank or a frozen face. */
.aris__fallback { display: none; }
.aris--static .aris__fallback {
  display: flex; align-items: center; justify-content: center;
  position: absolute; inset: 0;
}
.aris--static .aris__fallback-mark {
  width: 64px; height: 64px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font: 600 26px var(--ag-font-ui); color: var(--ag-coach-light);
  background: var(--ag-coach-tint); border: 1px solid var(--ag-coach-border);
  box-shadow: var(--ag-coach-glow);
}
@media (max-height: 760px) { .aris { height: 150px; } }

/* ============================================================
   The Journey — progress you can point at (§3.4: the Spine
   advances as the work does). A view over memory: the map from
   document status, the story from the frozen-summary chain.
   ============================================================ */
.journey { flex: 1; overflow-y: auto; padding: 28px 34px 40px; min-width: 0; }
.readiness-pill {
  font-size: 11px; letter-spacing: .06em; color: var(--ag-text-muted);
  padding: 5px 10px; border: 1px solid var(--ag-line-strong); border-radius: 20px;
}

.jmap-head { max-width: 640px; margin-bottom: 26px; }
.jmap-hero { font: 600 26px/1.2 var(--ag-font-ui); color: var(--ag-text); margin-bottom: 8px; }
.jmap-copy { font-size: 12.5px; line-height: 1.55; color: var(--ag-text-muted); }

/* -- the metro line ------------------------------------------------ */
.jmap { display: flex; gap: 18px; position: relative; padding: 4px 0 6px; }
.jmap__movement {
  flex: 1 1 0; min-width: 0; border-radius: 10px; padding: 12px 14px 14px;
  border: 1px solid transparent;
}
.jmap__movement--active {
  background: rgba(61,88,242,.06); border-color: var(--ag-blue-line);
}
.jmap__mname {
  display: flex; align-items: center; gap: 7px; margin-bottom: 14px;
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ag-text-faint);
}
.jmap__movement--done .jmap__mname { color: var(--ag-engine); }
.jmap__movement--active .jmap__mname { color: var(--ag-blue-light); }
.jmap__check { font-size: 11px; }
.jmap__now {
  width: 6px; height: 6px; border-radius: 50%; background: var(--ag-blue);
  box-shadow: var(--ag-blue-glow); animation: jpulse 2.2s ease-in-out infinite;
}
@keyframes jpulse { 50% { opacity: .35; } }

.jmap__track { display: flex; gap: 10px; position: relative; }
.jmap__track::before {
  content: ''; position: absolute; left: 4px; right: 4px; top: 6px; height: 2px;
  background: var(--ag-line-strong); border-radius: 1px;
}
.jstation {
  flex: 1 1 0; min-width: 0; position: relative; text-decoration: none;
  display: flex; flex-direction: column; gap: 5px; padding-top: 0;
}
.jstation__dot {
  width: 14px; height: 14px; border-radius: 50%; box-sizing: border-box;
  border: 2px solid var(--ag-text-faint); background: var(--ag-bg);
  position: relative; z-index: 1;
}
.jstation--provisional .jstation__dot {
  border-color: var(--ag-blue);
  background: radial-gradient(circle at center, var(--ag-blue) 0 3px, var(--ag-bg) 3.5px);
}
.jstation--canonical .jstation__dot {
  border-color: var(--ag-blue); background: var(--ag-blue); box-shadow: var(--ag-blue-glow);
}
.jstation__label {
  font-size: 11.5px; color: var(--ag-text-muted); line-height: 1.25;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.jstation--canonical .jstation__label { color: var(--ag-text); }
.jstation__meta { font-size: 11px; color: var(--ag-text-faint); letter-spacing: .04em; }
.jstation:hover .jstation__label { color: var(--ag-blue-light); }

/* -- the Lens gate strip ------------------------------------------- */
.jlens {
  margin-top: 18px; padding: 12px 16px; border-radius: 10px;
  border: 1px dashed var(--ag-line-strong); background: var(--ag-engine-tint);
}
.jlens__row { display: flex; align-items: baseline; gap: 16px; }
/* AG-15: each lens shows its verdict inline — the evidence was hover-only */
.jlens__grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 6px 18px; margin-top: 10px;
}
.jlens__cell { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.jlens__evidence { font-size: 11px; line-height: 1.5; color: var(--ag-text-muted); }
.jlens__label {
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ag-text-faint);
}
.jlens__item {
  display: flex; align-items: center; gap: 7px;
  font-size: 11.5px; color: var(--ag-text-faint);
}
.jlens__diamond {
  width: 9px; height: 9px; transform: rotate(45deg);
  border: 1.5px solid var(--ag-text-faint); box-sizing: border-box;
}
.jlens__item--pass { color: var(--ag-engine); }
.jlens__item--pass .jlens__diamond {
  border-color: var(--ag-engine); background: var(--ag-engine);
  box-shadow: 0 0 10px -2px rgba(75,242,242,.7);
}
.jlens__meta { margin-left: auto; font-size: 11px; text-decoration: none; }
a.jlens__meta:hover { color: var(--ag-engine); }
@media (max-width: 900px) { .jlens__grid { grid-template-columns: 1fr 1fr; } }

/* -- below the line ------------------------------------------------- */
.journey__grid { display: grid; grid-template-columns: 1fr 320px; gap: 26px; margin-top: 30px; }

.jstory__head {
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ag-text-faint); margin-bottom: 14px;
}
.scard {
  display: flex; gap: 14px; position: relative; padding-bottom: 22px;
}
.scard::before {  /* the timeline rail */
  content: ''; position: absolute; left: 17px; top: 34px; bottom: 0;
  width: 2px; background: var(--ag-line-strong);
}
.scard:last-child::before { display: none; }
.scard__node {
  flex: none; width: 36px; height: 30px; border-radius: 8px; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; color: var(--ag-text-muted);
  background: var(--ag-surface-2); border: 1px solid var(--ag-line-strong);
}
.scard--live .scard__node {
  color: var(--ag-blue-light); border-color: var(--ag-blue-line);
  box-shadow: inset 0 0 12px -6px rgba(61,88,242,.8);
}
.scard__body {
  flex: 1; min-width: 0; padding: 12px 14px; border-radius: 10px;
  background: var(--ag-surface-2); border: 1px solid var(--ag-line-strong);
}
.scard__meta { font-size: 11px; letter-spacing: .06em; color: var(--ag-text-faint); margin-bottom: 7px; }
.scard__live { color: var(--ag-blue-light); }
.scard__summary { font-size: 12px; line-height: 1.55; color: var(--ag-text-muted); }
.scard__decisions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.scard__decision { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--ag-text-faint); }

.jside { display: flex; flex-direction: column; gap: 14px; }
.jcard {
  padding: 14px 16px; border-radius: 10px;
  background: var(--ag-surface-2); border: 1px solid var(--ag-line-strong);
}
.jcard--quiet { background: none; border-style: dashed; }
.jcard__head {
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ag-text-faint); margin-bottom: 10px;
}
.jnext { display: flex; flex-direction: column; gap: 2px; padding: 7px 0; border-bottom: 1px solid var(--ag-line); }
.jnext:last-child { border-bottom: none; }
.jnext__kind { font-size: 11px; color: var(--ag-blue-light); letter-spacing: .08em; text-transform: uppercase; }
.jnext__prompt { font-size: 11.5px; line-height: 1.45; color: var(--ag-text-muted); }
.jcounts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.jcount {
  display: flex; flex-direction: column; gap: 1px; text-decoration: none;
  padding: 8px 10px; border-radius: 8px; border: 1px solid var(--ag-line-strong);
}
.jcount:hover { border-color: var(--ag-blue-line); }
.jcount__n { font-size: 16px; color: var(--ag-text); }
.jcount__label { font-size: 11px; color: var(--ag-text-faint); letter-spacing: .05em; }

/* rail icon: three stations on a line */
.icon-journey { display: flex; align-items: center; }
.icon-journey i { width: 5px; height: 5px; border-radius: 50%; border: 1.5px solid var(--ag-text-faint); box-sizing: border-box; flex: none; }
.icon-journey i:first-child { background: var(--ag-text-faint); }
.icon-journey b { width: 3px; height: 1.5px; background: var(--ag-text-faint); flex: none; }

/* -- the Room's ambient readiness strip ----------------------------- */
.readiness {
  flex: none; display: flex; align-items: center; gap: 10px;
  padding: 7px 14px; border-bottom: 1px solid var(--ag-line-strong);
  text-decoration: none; background: rgba(61,88,242,.04);
}
.readiness:hover { background: rgba(61,88,242,.09); }
.readiness__seg { font-size: 11px; letter-spacing: .07em; color: var(--ag-text-faint); }
.readiness__dots { display: flex; gap: 3px; }
.readiness__dot {
  width: 5px; height: 5px; border-radius: 50%;
  border: 1px solid var(--ag-text-faint); box-sizing: border-box;
}
.readiness__dot--canonical { background: var(--ag-blue); border-color: var(--ag-blue); }
.readiness__dot--provisional { background: var(--ag-blue-surface); border-color: var(--ag-blue-line); }
.readiness__go { margin-left: auto; font-size: 11px; color: var(--ag-blue-light); }

@media (max-width: 1100px) { .journey__grid { grid-template-columns: 1fr; } }

/* ============================================================
   The Wall (THE_WALL.md) — the discussion, drawn. The renderer
   is dumb on purpose; these styles only dress the projection.
   ============================================================ */
.wall { flex: 1; display: flex; min-width: 0; min-height: 0; }
.wall__side {
  width: 300px; flex: none; overflow-y: auto; padding: 24px 20px;
  border-right: 1px solid var(--ag-line-strong); background: var(--ag-surface-deep);
  display: flex; flex-direction: column; gap: 14px;
}
.wall__hero { font: 600 24px/1.2 var(--ag-font-ui); color: var(--ag-text); }
.wall__copy { font-size: 12px; line-height: 1.55; color: var(--ag-text-muted); }
.wall__derived, #wall-questions { display: flex; flex-direction: column; gap: 7px; }
.wall__dline { font-size: 11.5px; line-height: 1.45; color: var(--ag-text-muted); }
.wall__dloop {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; border-radius: 50%; margin-right: 4px;
  font-size: 11px; color: var(--ag-engine);
  border: 1.5px solid var(--ag-engine); box-shadow: 0 0 10px -3px rgba(75,242,242,.8);
}

.wall__stage { flex: 1; min-width: 0; overflow: auto; padding: 20px; }
.wall__canvas { min-width: 900px; }
.wall__svg { width: 100%; height: auto; display: block; }

/* (The old .wall__sector/.wall__tag/… SVG-text font rules are gone: the
   renderer styles its text INLINE from wall.js's themed FONTS — the CSS
   mirror was dead weight that could only drift. deep audit §E.) */
.wall__node--linked { cursor: pointer; }
.wall__node--linked:hover rect { stroke-width: 2; }

/* rail icon: two nodes and the edge between them */
.icon-wall { position: relative; width: 16px; height: 14px; }
.icon-wall i {
  position: absolute; width: 6px; height: 6px; border-radius: 2px;
  border: 1.5px solid var(--ag-text-faint); box-sizing: border-box;
}
.icon-wall i:first-child { left: 0; top: 0; }
.icon-wall i:last-child { right: 0; bottom: 0; background: var(--ag-text-faint); }
.icon-wall::after {
  content: ''; position: absolute; left: 5px; top: 6px; width: 8px; height: 1.5px;
  background: var(--ag-text-faint); transform: rotate(32deg);
}

/* ============================================================
   Modo Sala (WONDER_PLAN S1) — the projector stage. The wall fills the
   screen; a thin identity strip sits below; new strokes bloom in.
   ============================================================ */
.sala-link {
  font-size: 11px; letter-spacing: .06em; color: var(--ag-text-muted);
  text-decoration: none; padding: 5px 10px; border: 1px solid var(--ag-line-strong);
  border-radius: 20px;
}
.sala-link:hover { color: var(--ag-text); border-color: var(--ag-blue-line); }
.sala { position: fixed; inset: 0; display: flex; flex-direction: column; background: var(--ag-bg); }
.sala__canvas { flex: 1; min-height: 0; }
.sala__strip {
  flex: none; display: flex; align-items: center; gap: 14px;
  padding: 10px 18px; border-top: 1px solid var(--ag-line-strong);
  background: var(--ag-surface);
}
.sala__room { font-size: 13px; font-weight: 600; color: var(--ag-text); }
.sala__caption { font-size: 11px; letter-spacing: .08em; color: var(--ag-text-faint); }
.sala__presence { margin-left: auto; }
.sala__exit {
  font-size: 11px; color: var(--ag-text-muted); text-decoration: none;
  padding: 5px 9px; border: 1px solid var(--ag-line-strong); border-radius: 7px;
}
.sala__exit:hover { color: var(--ag-text); border-color: var(--ag-blue-line); }
.sala__film {
  font-size: 11px; letter-spacing: .06em; cursor: pointer;
  color: var(--ag-text-muted); background: none;
  padding: 5px 10px; border: 1px solid var(--ag-line-strong); border-radius: 20px;
}
.sala__film:hover { color: var(--ag-text); border-color: var(--ag-blue-line); }
/* E3 — the listening pulse: the room can always SEE that it is being heard */
.sala__film.is-listening {
  color: var(--ag-engine); border-color: var(--ag-engine);
  animation: sala-listen 2.2s ease-in-out infinite;
}
@keyframes sala-listen {
  0%, 100% { box-shadow: 0 0 0 0 rgba(75, 242, 242, .35); }
  50% { box-shadow: 0 0 0 5px rgba(75, 242, 242, 0); }
}
@media (prefers-reduced-motion: reduce) { .sala__film.is-listening { animation: none; } }
body.sala-idle { cursor: none; }

/* S2 — the cinema's subtitle card: floats above the strip while the film runs */
.sala__cine {
  position: absolute; left: 50%; bottom: 64px; transform: translateX(-50%);
  display: flex; align-items: baseline; gap: 12px; max-width: min(720px, 88vw);
  padding: 12px 18px; border-radius: 11px;
  background: var(--ag-surface); border: 1px solid var(--ag-line-strong);
  box-shadow: 0 10px 34px rgba(0, 0, 0, .5);
}
.sala__cine-chapter {
  flex: none; font-size: 11px; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ag-blue-light);
}
.sala__cine-line {
  font-size: 13.5px; line-height: 1.5; color: var(--ag-text-body);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sala__cine-skip {
  flex: none; font-size: 11px; cursor: pointer; color: var(--ag-text-faint);
  background: none; border: none; padding: 2px 4px;
}
.sala__cine-skip:hover { color: var(--ag-text); }

/* Q1 — the seat QR: black modules need a light plate to scan from a dark stage */
.sala__qrbox {
  position: fixed; inset: 0; z-index: 55;
  display: flex; align-items: center; justify-content: center;
  background: rgba(5, 6, 18, .72); cursor: pointer;
}
.sala__qrcard {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  background: var(--ag-surface); border: 1px solid var(--ag-line-strong);
  border-radius: 16px; padding: 28px 32px; max-width: 380px; text-align: center;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .6);
}
.sala__qrimg {
  width: 240px; height: 240px; background: #fff;
  border-radius: 10px; padding: 12px;
}
.sala__qrtitle { font-size: 21px; font-weight: 700; letter-spacing: -.01em; }
.sala__qrsub { font-size: 12.5px; line-height: 1.55; color: var(--ag-text-muted); }
.sala__qrnote { font-size: 11px; letter-spacing: .08em; color: var(--ag-text-faint); }

/* S3 — the close ritual: the acta over a dimmed stage */
.sala__acta {
  position: fixed; inset: 0; z-index: 60;
  display: flex; align-items: center; justify-content: center;
  background: rgba(5, 6, 18, .72); padding: 24px;
}
.sala__acta-card {
  width: min(680px, 94vw); max-height: 84dvh; overflow-y: auto;
  background: var(--ag-surface); border: 1px solid var(--ag-line-strong);
  border-radius: 14px; padding: 26px 30px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .6);
  display: flex; flex-direction: column; gap: 14px;
}
.sala__acta-eyebrow {
  font-size: 11px; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ag-blue-light);
}
.sala__acta-title { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -.01em; }
.sala__acta-summary { font-size: 13.5px; line-height: 1.6; color: var(--ag-text-body); }
.sala__acta-summary strong { color: var(--ag-text); }
.sala__acta-decisions { display: flex; flex-direction: column; gap: 7px; }
.sala__acta-dec {
  display: flex; align-items: baseline; gap: 9px;
  font-size: 13px; line-height: 1.5; color: var(--ag-text-body);
}
.sala__acta-stats { font-size: 11px; letter-spacing: .06em; color: var(--ag-text-faint); }
.sala__acta-links {
  display: flex; align-items: center; gap: 10px;
  padding-top: 6px; border-top: 1px solid var(--ag-line);
}
.sala__acta-cta {
  font-size: 13px; font-weight: 600; color: #fff; text-decoration: none;
  background: var(--ag-blue); padding: 9px 18px; border-radius: 8px;
}
.sala__acta-cta:hover { filter: brightness(1.12); }
.sala__acta-ghost {
  font-size: 12.5px; color: var(--ag-text-muted); text-decoration: none;
  background: none; border: 1px solid var(--ag-line-strong);
  border-radius: 8px; padding: 8px 14px; cursor: pointer;
}
.sala__acta-ghost:hover { color: var(--ag-text); border-color: var(--ag-blue-line); }

/* draw-in: only elements tagged .is-new by the stage's redraw diff animate —
   the opening render is the baseline, so nothing ever animates twice. */
.wall__node.is-new {
  animation: sala-bloom .5s cubic-bezier(.2, .8, .3, 1.2) both;
  transform-box: fill-box; transform-origin: center;
}
@keyframes sala-bloom {
  from { opacity: 0; transform: scale(.55); }
  to { opacity: 1; transform: scale(1); }
}
.wall__edge.is-new { animation: sala-fade .6s ease-out .15s both; }
@keyframes sala-fade { from { opacity: 0; } to { opacity: 1; } }
/* a new tension announces itself once — two amber breaths, then still */
.wall__edge--tension.is-new path { animation: sala-pulse 1.1s ease-out .2s 2; }
@keyframes sala-pulse {
  0%, 100% { stroke-width: 1.5; }
  50% { stroke-width: 3; }
}
@media (prefers-reduced-motion: reduce) {
  .wall__node.is-new, .wall__edge.is-new, .wall__edge--tension.is-new path { animation: none; }
}

/* AG-31: below 1000px the sidebar used to vanish — with it the composer, the
   film slider and the open questions. It is a drawer now, summoned by the
   ☰ button that floats on the stage. */
.wall__sidebtn { display: none; }
@media (max-width: 1000px) {
  .wall { position: relative; }
  .wall__side {
    position: absolute; top: 0; bottom: 0; left: 0; z-index: 45;
    width: min(320px, 86vw);
    transform: translateX(-100%); visibility: hidden;
    transition: transform .22s ease, visibility .22s;
    box-shadow: 14px 0 40px rgba(0, 0, 0, .5);
  }
  .wall__side.is-open { transform: translateX(0); visibility: visible; }
  .wall__sidebtn {
    display: flex; align-items: center; gap: 6px;
    position: absolute; top: 12px; left: 12px; z-index: 44;
    padding: 7px 12px; border-radius: 8px; cursor: pointer;
    font-size: 11.5px; letter-spacing: .06em;
    color: var(--ag-text-body); background: var(--ag-surface);
    border: 1px solid var(--ag-line-strong);
  }
  .wall__sidebtn:hover { border-color: var(--ag-blue-line); color: var(--ag-text); }
}
.wall__meta--value { fill: var(--ag-engine); font-weight: 600; }

/* -- P4: chat <-> muro toggle in the Room --------------------------- */
.convo__views {
  flex: none; display: flex; gap: 2px; padding: 8px 16px 0;
  border-bottom: 1px solid var(--ag-line-strong);
}
.convo__view {
  position: relative; background: none; border: none; cursor: pointer;
  padding: 4px 12px 9px; font: 500 11px var(--ag-font-mono);
  letter-spacing: .1em; text-transform: uppercase; color: var(--ag-text-faint);
}
.convo__view.is-active {
  color: var(--ag-blue-light);
  box-shadow: inset 0 -2px 0 var(--ag-blue);
}
.convo__viewdot {
  position: absolute; top: 3px; right: 3px; width: 6px; height: 6px;
  border-radius: 50%; background: var(--ag-coach); box-shadow: var(--ag-coach-glow);
}
.convo__wall { flex: 1; min-height: 0; overflow: auto; padding: 14px; }
.wall__canvas--room { min-width: 820px; }

/* -- P4: human composer, film slider, download on the wall page ------ */
.wall__compose { display: flex; gap: 6px; }
.wall__line {
  flex: 1; min-width: 0; padding: 7px 10px; border-radius: 8px;
  border: 1px solid var(--ag-line-strong); background: var(--ag-surface);
  font: 400 12px var(--ag-font-mono); color: var(--ag-text);
}
.wall__line:focus { outline: none; border-color: var(--ag-blue-line); }
.wall__send {
  flex: none; width: 30px; border-radius: 8px; border: none; cursor: pointer;
  background: var(--ag-blue); color: #fff; font-size: 13px;
}
.wall__compose-err { margin-top: 7px; font-size: 12px; color: var(--ag-amber); line-height: 1.4; }
/* W1 — the live what-if: the canvas wears an amber hypothesis frame while a
   scenario is on; the chip names it and offers the exit. Never truth. */
.wall__canvas.is-whatif {
  outline: 2px dashed var(--ag-amber);
  outline-offset: -2px; border-radius: 8px;
}
.whatif-chip {
  margin-top: 8px; display: flex; align-items: center; gap: 8px;
  padding: 6px 10px; border-radius: 8px; font-size: 11px;
  color: var(--ag-amber); border: 1px dashed var(--ag-amber);
  background: var(--ag-warn-surface);
}
.whatif-chip button {
  margin-left: auto; background: none; border: none; cursor: pointer;
  color: var(--ag-amber); font-size: 12px; padding: 0 2px;
}
.whatif-chip button:hover { filter: brightness(1.25); }

/* AG-27: the three-line syntax cheat — the whole language, where it's typed */
.wall__cheat {
  margin-top: 9px; display: flex; flex-direction: column; gap: 3px;
  font-size: 11px; line-height: 1.5; color: var(--ag-text-muted);
}
.wall__cheat b { font-weight: 600; color: var(--ag-text-body); }

.wall__time { width: 100%; accent-color: var(--ag-blue); margin: 2px 0 8px; }

.wall__download {
  margin-top: 10px; width: 100%; padding: 7px 0; cursor: pointer;
  border-radius: 8px; border: 1px solid var(--ag-line-strong);
  background: none; font: 500 11px var(--ag-font-mono);
  letter-spacing: .08em; color: var(--ag-text-muted);
}
.wall__download:hover { border-color: var(--ag-engine-line); color: var(--ag-engine); }
.exp__wall {
  margin-bottom: 22px; border: 1px solid var(--ag-line-strong); border-radius: 12px;
  background: var(--ag-bg); padding: 12px; overflow-x: auto;
}
.exp__wall-head {
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ag-text-faint); margin: 2px 0 8px 4px;
}
.exp__wall .wall__canvas { min-width: 860px; }

/* ============================================================
   Rooms — the home after login (invitation-only access) — and
   the per-room brain selector. The old landing page dissolved
   into these.
   ============================================================ */
.rlist { display: flex; flex-direction: column; gap: 12px; margin: 18px 0; }
.rcard {
  border: 1px solid var(--ag-line-strong); border-radius: 12px;
  background: var(--ag-surface-2); overflow: hidden;
}
.rcard__main { display: block; }
.rcard__open {
  width: 100%; display: flex; align-items: center; gap: 14px;
  padding: 14px 16px; background: none; border: none; cursor: pointer; text-align: left;
}
.rcard__open:hover { box-shadow: inset 0 0 0 1px var(--ag-blue-line); }  /* AG-17 */
.rcard__name { font: 600 14px var(--ag-font-ui); color: var(--ag-text); }
.rcard__meta { font-size: 11px; letter-spacing: .05em; color: var(--ag-text-faint); }
.rcard__owner { color: var(--ag-blue-light); }
.rcard__go { margin-left: auto; font: 500 11px var(--ag-font-mono); color: var(--ag-blue-light); }

.rcard__admin { border-top: 1px solid var(--ag-line); padding: 0 16px 12px; }
.rcard__adminhead {
  cursor: pointer; padding: 9px 0; font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ag-text-faint); list-style: none;
}
.rcard__adminhead::-webkit-details-marker { display: none; }
.rcard__admin[open] .rcard__adminhead { color: var(--ag-blue-light); }

.rinvite__form { display: flex; gap: 8px; margin-top: 6px; }
.rinvite__email { flex: 1; min-width: 0; }
.rinvite__fresh {
  margin: 8px 0 12px; padding: 10px 12px; border-radius: 9px;
  border: 1px solid var(--ag-engine-line); background: var(--ag-engine-tint);
}
.rinvite__freshhead { font-size: 11px; color: var(--ag-engine); margin-bottom: 7px; }
.rinvite__linkrow { display: flex; gap: 6px; }
.rinvite__link {
  flex: 1; min-width: 0; padding: 6px 9px; border-radius: 7px;
  border: 1px solid var(--ag-line-strong); background: var(--ag-surface);
  font-size: 11px; color: var(--ag-text);
}
.rinvite__copy { flex: none; padding: 4px 12px; }
.rinvite__list { margin-top: 12px; display: flex; flex-direction: column; gap: 6px; }
.rinvite__row { display: flex; align-items: center; gap: 10px; font-size: 11px; color: var(--ag-text-muted); }
.rinvite__addr { overflow: hidden; text-overflow: ellipsis; }
.status-pill--pending { background: rgba(139,61,217,.14); color: var(--ag-coach-light); }

.rlist__pending { margin: 16px 0 4px; }
.rinvite {
  display: flex; align-items: center; gap: 12px; margin-top: 8px;
  padding: 11px 14px; border-radius: 10px;
  border: 1px solid var(--ag-coach-border); background: var(--ag-coach-tint);
}
.rinvite__text { flex: 1; font-size: 12.5px; color: var(--ag-text-muted); }
.rinvite__btn { flex: none; padding: 6px 18px; }

.rcreate { display: flex; gap: 8px; margin-top: 8px; }
.rcreate__name { flex: 1; min-width: 0; }

.login__forgot { font-size: 11px; color: var(--ag-text-faint); }
.login__forgot:hover { color: var(--ag-blue-light); }

/* per-room brain selector (topbar) */
.brainsel { display: flex; align-items: center; gap: 6px; }
.brainsel__label { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ag-text-faint); }
.brainsel__select {
  background: var(--ag-surface); color: var(--ag-text-muted);
  border: 1px solid var(--ag-line-strong); border-radius: 7px;
  font-size: 11px; padding: 3px 6px; max-width: 190px;
}
.brainsel__select:focus { outline: none; border-color: var(--ag-blue-line); }

/* member administration inside the owner's panel */
.rmembers { margin-top: 14px; border-top: 1px solid var(--ag-line-strong); padding-top: 10px; }
.rmembers__head {
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ag-text-faint); margin-bottom: 8px;
}
.rmembers__row { display: flex; align-items: center; gap: 10px; padding: 4px 0; font-size: 12px; }
.rmembers__name { color: var(--ag-text); }
.rmembers__pos { flex: 1; font-size: 11px; color: var(--ag-text-faint); }
.rmembers__remove { color: var(--ag-danger); }

/* the facilitation auditor's verdict on a trace card */
.audit { margin-top: 10px; padding: 10px 12px; border-radius: 9px; border: 1px solid var(--ag-line-strong); }
.audit--clean { border-color: var(--ag-engine-line); background: var(--ag-engine-tint); }
.audit--fault { border-color: var(--ag-amber); background: rgba(240,180,90,.05); }
.audit__head {
  display: flex; align-items: center; gap: 8px; font-size: 11px; letter-spacing: .12em;
  color: var(--ag-text-faint); margin-bottom: 6px;
}
.audit__verdict { color: var(--ag-text-muted); text-transform: none; letter-spacing: normal; }
.audit__clean { color: var(--ag-engine); }
.audit__note { font-size: 11.5px; color: var(--ag-text-muted); line-height: 1.45; }
.audit__fault { margin-top: 8px; padding-left: 8px; border-left: 2px solid var(--ag-amber); }
.audit__fault--serious { border-left-color: var(--ag-danger); }
.audit__code { font-size: 11px; color: var(--ag-text); }
.audit__sev { font-size: 11px; color: var(--ag-text-faint); margin-left: 6px; text-transform: uppercase; }
.audit__evidence { font-size: 11px; color: var(--ag-text-muted); line-height: 1.4; margin-top: 2px; }

/* ============================================================
   UI polish pass (2026-07-13) — findings from the synthetic-team
   review of six modules. Template counterparts cite "UI review".
   ============================================================ */

/* Reading measure: Aris's dense turns were hitting 120+ chars/line. */
.msg__body, .coach-bubble { max-width: 72ch; }

/* Owner-only brain: members see the fact, not the control. */
.brainsel--ro { font-size: 11px; color: var(--ag-text-faint); padding: 4px 8px;
  border: 1px solid var(--ag-line-strong); border-radius: 6px; }

/* Past-sitting navigation (the log is append-only — read it). */
.convo__sittings { margin-left: auto; display: flex; gap: 4px; align-items: center; }
.convo__sitting { font-size: 11px; color: var(--ag-text-faint); text-decoration: none;
  padding: 2px 7px; border: 1px solid transparent; border-radius: 10px; }
.convo__sitting:hover { color: var(--ag-text-muted); border-color: var(--ag-line-strong); }
.convo__sitting.is-active { color: var(--ag-blue-light); border-color: var(--ag-line-strong);
  background: rgba(61,88,242,.08); }
.recap--past .recap__meta a { color: var(--ag-blue-light); text-decoration: none; }

/* The one action between sittings must never wrap into a broken pill. */
.composer__box--between form { flex: none; }
.composer__send--open { white-space: nowrap; }

/* Readiness strip: the "are we converging?" signal earns legible type. */
.readiness__seg { font-size: 11px; color: var(--ag-text-muted); }

/* Principle footers: product voice, not debug whispers. */
.panel__foot { margin-top: auto; padding-top: 12px; font: 400 11px var(--ag-font-mono);
  color: var(--ag-text-faint); line-height: 1.5; }
.panel__foot-tag { display: block; font-size: 11px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ag-text-faint); margin-bottom: 3px; }

/* Memory: two shelves told apart; relations navigate. */
.mem__shelf-head { margin-top: 18px; }
.mem__rel { color: var(--ag-blue-light); text-decoration: none; }
.mem__rel:hover { text-decoration: underline; }

/* Parking: the lifecycle legend lives beside the cards it explains,
   not in the far corner. */
.lifecycle { margin-top: 20px; }

/* Journey: decision chips are links now. */
.scard__decision { text-decoration: none; }

/* Durable acts outrank trivia: decision notes read as record, not plumbing. */
.sysline--decision .sysline__note {
  font-size: 12px; color: var(--ag-text); background: rgba(139,61,217,.08);
  border: 1px solid var(--ag-aris-line); border-radius: 8px; padding: 7px 11px;
  line-height: 1.45;
}
.sysline--decision .sysline__diamond { background: var(--ag-coach-light); }

/* Traces: chips filter; clamps and provider noise are labeled, not mysterious. */
#outcome-filters .status-pill { cursor: pointer; border: 1px solid transparent; }
/* Chips that ACT as tabs look like tabs (deep audit AG-30): the active
   filter carries the panel-tab underline, not just a brighter border. */
#outcome-filters .status-pill.is-filtering {
  border-color: var(--ag-blue-line);
  box-shadow: inset 0 -2px 0 var(--ag-blue);
}
.clamp-mark { font-size: 11px; color: var(--ag-text-faint); }
.errdetails { margin-top: 4px; }
.errdetails summary { cursor: pointer; color: var(--ag-text-faint); }
.errdetails[open] { word-break: break-all; }
.audit__fault--serious .audit__sev { color: var(--ag-danger); }

/* The Wall: legend, derived-layer controls, focus pulse, tension lens. */
.wall__legend summary { cursor: pointer; list-style: none; }
.wall__legend-body { font-size: 11px; color: var(--ag-text-muted); line-height: 2; }
.wall__legend-sep { height: 1px; background: var(--ag-line); margin: 4px 0; }
/* Swatches mirror the wall's own palette tokens (deep audit §B-4) — the
   legend must show what the drawing actually uses, opaque strokes included. */
.wall__lg { display: inline-block; width: 14px; height: 9px; border-radius: 3px;
  background: var(--ag-wall-node); border: 1.2px solid; margin-right: 7px; vertical-align: -1px; }
.wall__lg--neutral { border-color: var(--ag-wall-stroke-neutral); }
.wall__lg--idea { border-color: var(--ag-wall-stroke-idea); }
.wall__lg--engine { border-color: var(--ag-wall-stroke-metric); }
.wall__lg--riesgo { border-color: var(--ag-wall-stroke-risk); }
.wall__lgline { display: inline-block; width: 16px; height: 0; margin-right: 7px;
  border-top: 1.5px solid var(--ag-wall-edge); vertical-align: 3px; }
.wall__lgline--tension { border-top-color: var(--ag-amber); border-top-style: dashed; }
.wall__lgline--dash { border-top-style: dashed; }
.wall__lgq { color: var(--ag-amber); font-weight: 700; }
/* `font: inherit` here was the SHORTHAND — it reset family AND size, so it
   defeated the .mono class on this button and pulled the size up out of
   .wall__dline. Take only the size from the parent; .mono owns the family. */
.wall__dtoggle { background: none; border: 1px solid transparent; color: inherit;
  font-size: inherit; line-height: inherit; cursor: pointer;
  padding: 1px 6px; margin-left: -6px; border-radius: 6px; }
.wall__dtoggle:hover { border-color: var(--ag-line-strong); }
.wall__dtoggle.is-filtering { border-color: var(--ag-amber); color: var(--ag-amber); }
/* Same shorthand trap: `font: inherit` clobbered .wall__dline's 11.5px/1.45,
   so the open questions rendered in the inherited body font — visibly larger
   than every other line in the sidebar. Only the family needs inheriting;
   size, line-height and colour come from .wall__dline. */
.wall__dline--q { display: block; width: 100%; text-align: left; background: none;
  border: none; font-family: inherit; cursor: pointer; padding: 2px 0; }
.wall__dline--q:hover { color: var(--ag-text); }
/* Pan & zoom: the stage becomes a fixed viewport and the drawing moves inside
   it, instead of an ever-taller SVG the page has to scroll. Scoped to the
   --nav modifier (added by mountWall) so the export's static wall is
   untouched. */
.wall__stage, .convo__wall { overflow: hidden; }
.wall__canvas--nav { min-width: 0; width: 100%; height: 100%; position: relative; }
.wall__canvas--nav .wall__svg {
  width: 100%; height: 100%; touch-action: none; cursor: grab;
  user-select: none; -webkit-user-select: none;
}
.wall__canvas--nav .wall__svg.is-panning { cursor: grabbing; }
.wall__nav { position: absolute; right: 12px; bottom: 12px; display: flex; gap: 5px; z-index: 2; }
.wall__nav button {
  width: 27px; height: 27px; border-radius: 7px; cursor: pointer;
  background: var(--ag-chrome); border: 1px solid var(--ag-line-strong);
  color: var(--ag-text-muted); font: 600 13px var(--ag-font-mono); line-height: 1;
  display: flex; align-items: center; justify-content: center;
}
.wall__nav button:hover { color: var(--ag-text); border-color: var(--ag-blue-line); }

@keyframes wall-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.wall__node--pulse rect:first-of-type { stroke: var(--ag-amber) !important;
  stroke-width: 2.5 !important; animation: wall-pulse .8s ease-in-out 2; }
.wall--lens-tensions .wall__edge:not(.wall__edge--tension) { opacity: .07; }

/* ---- One eyebrow spec (deep audit AG-42) ---------------------------------
   Every section eyebrow reads identically: 11px / 600 / .1em. Colours stay
   per-context; the SHAPE is one voice. Declared last so it wins the floor
   rewrites above without chasing each rule. */
.eyebrow, .field__eyebrow, .recap__eyebrow, .npv__eyebrow, .trace__eyebrow,
.asm-card__eyebrow, .sens__eyebrow, .lifecycle__eyebrow, .exp__eyebrow,
.field-label, .rcard__adminhead, .rmembers__head {
  font-size: 11px; font-weight: 600; letter-spacing: .1em;
}

/* ---- SG flow repairs (deep audit) ---------------------------------------- */
/* AG-26: the owner panel summary reads as openable; chevron turns when open */
.rcard__chev { display: inline-block; transition: transform .12s; margin-right: 4px; }
.rcard__admin[open] .rcard__chev { transform: rotate(90deg); }
/* AG-26: armed remove speaks in the danger voice, inline, no window.confirm */
.rmembers__removeform.is-armed .rmembers__remove {
  color: var(--ag-danger); border: 1px solid var(--ag-danger-line);
  background: var(--ag-danger-surface); border-radius: 6px;
}
/* AG-40: member-row actions get real hit areas */
.rmembers__row .index__linkbtn {
  display: inline-flex; align-items: center; min-height: 32px; padding: 0 10px;
}
/* AG-38: below 1200px the presence strip collapses to three faces + a count */
.avatars__more {
  display: none; font-size: 11px; color: var(--ag-text-muted);
  background: var(--ag-raised); border-color: var(--ag-line-strong);
}
@media (max-width: 1200px) {
  .avatars--topbar .pavatar:nth-child(n+4) { display: none; }
  .avatars--topbar .avatars__more { display: flex; }
}
/* AG-35: identifiers in stat tiles are mono and modest, not headline numerals */
.stat__value--mono { font: 500 13px var(--ag-font-mono); padding: 4px 0; }