/* ============================================================
   ATLAS — Tenant Manager (tm2-* master/detail, tm-* atoms)
   Ported from the design handoff (tenants.css + tenants-v2.css).
   Sits on tokens.css + chrome.css. Cool-dark substrate (ADR-0033):
   cyan = selection/navigate, green = terminal-positive, amber =
   in-progress/friction, red = operator intervention only.
   ============================================================ */

/* ---------- shared atoms ---------- */
.tm-crest {
  width: 30px; height: 30px; border-radius: var(--r-2);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 11px; font-weight: 600;
  letter-spacing: 0.02em; color: var(--bg-0); flex: none;
}

.tm-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: none; background: var(--green); }
.tm-dot--ok { background: var(--green); }
.tm-dot--degraded { background: var(--amber); animation: pulse 1.4s ease-in-out infinite; }
.tm-dot--down { background: var(--red); }
.tm-dot--idle { background: transparent; box-shadow: inset 0 0 0 1.5px var(--fg-4); animation: none; }

.tm-prov {
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 2px 7px; border-radius: var(--r-1);
  border: 1px solid transparent; white-space: nowrap;
}
.tm-prov--active     { color: var(--green); background: var(--green-tint); }
.tm-prov--onboarding { color: var(--cyan-ink); background: var(--cyan-tint); border-color: var(--cyan-dim); }
.tm-prov--paused     { color: var(--amber); background: var(--amber-tint); }
.tm-prov--suspended  { color: var(--fg-3); background: var(--neutral-tint); border: 1px dashed var(--line-bright); }
.tm-prov--archived   { color: var(--fg-4); background: var(--neutral-tint); border: 1px dashed var(--line-bright); }

/* ---------- master/detail layout ---------- */
.tm2 { display: grid; grid-template-columns: 320px minmax(0, 1fr); height: 100%; min-height: 0; }

/* ===== master rail ===== */
.tm2-rail { border-right: 1px solid var(--line); background: var(--bg-1); overflow-y: auto; display: flex; flex-direction: column; min-height: 0; }
.tm2-rail__head { padding: 13px 16px 11px; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--bg-1); z-index: 1; display: flex; align-items: baseline; gap: 10px; }
.tm2-rail__head h2 { margin: 0; font-size: 13px; font-weight: 600; color: var(--fg-1); }
.tm2-rail__head .n { font-family: var(--font-mono); font-size: 11px; color: var(--fg-4); }
.tm2-rail__search { padding: 10px 12px; border-bottom: 1px solid var(--line); }
.tm2-rail__search .input { width: 100%; }

.tm2-row { width: 100%; text-align: left; display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 11px; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--line); cursor: pointer; transition: background 80ms; }
.tm2-row:hover { background: var(--bg-2); }
.tm2-row.is-active { background: var(--sel); box-shadow: inset 2px 0 0 var(--cyan); }
.tm2-row__crest { width: 26px; height: 26px; }
.tm2-row__body { min-width: 0; }
.tm2-row__name { font-size: 12.5px; color: var(--fg-1); font-weight: 550; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tm2-row__sig { display: flex; align-items: center; gap: 9px; margin-top: 4px; font-family: var(--font-mono); font-size: 10px; color: var(--fg-4); letter-spacing: 0.02em; }
.tm2-row__sig .when { color: var(--fg-4); }
.tm2-row__right { display: flex; align-items: center; gap: 8px; }

/* fan-out pip — tiny honest delivery signal in the rail */
.tm2-pip { display: inline-flex; gap: 1.5px; width: 34px; height: 6px; align-items: stretch; }
.tm2-pip span { border-radius: 1px; min-width: 0; }
.tm2-pip .d { background: var(--green-dim); }
.tm2-pip .r { background: var(--amber); }
.tm2-pip .q { background: var(--bg-4); box-shadow: inset 0 0 0 1px var(--line-strong); }
.tm2-pip .f { background: var(--red); }
.tm2-pip.is-idle span { background: transparent; box-shadow: inset 0 0 0 1px var(--line-strong); flex: 1; }

/* ===== detail ===== */
.tm2-detail { overflow-y: auto; background: var(--bg-1); min-width: 0; display: flex; flex-direction: column; }

.tm2-head { padding: 18px 26px 16px; border-bottom: 1px solid var(--line); display: flex; align-items: flex-start; gap: 16px; }
.tm2-head__crest { width: 40px; height: 40px; font-size: 13px; }
.tm2-head__id { min-width: 0; flex: 1; }
.tm2-head__title { display: flex; align-items: center; gap: 12px; }
.tm2-head__title h1 { margin: 0; font-size: 21px; font-weight: 500; letter-spacing: -0.014em; color: var(--fg-1); }
.tm2-head__sub { margin-top: 6px; font-family: var(--font-mono); font-size: 11px; color: var(--fg-3); letter-spacing: 0.02em; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tm2-head__sub .sep { color: var(--fg-5); }

/* access entry (ADR-0034) — as-self (cyan) vs impersonate (amber), legible before commit.
   Ported from the design handoff (tenants-v2.css). flex:none keeps the pair its natural width
   on the right of the flex head; the tm2-head__id (flex:1) pushes it there. */
.tm2-access { display: flex; flex-direction: column; gap: 7px; flex: none; }
.tm2-access__label { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-4); }
.tm2-access__opts { display: flex; gap: 8px; }
.tm2-entry {
  display: flex; flex-direction: column; gap: 3px; align-items: flex-start;
  padding: 8px 12px; border-radius: var(--r-2); border: 1px solid var(--line-strong);
  background: var(--bg-2); cursor: pointer; min-width: 158px; position: relative; overflow: hidden;
  transition: border-color 120ms, background 120ms;
}
.tm2-entry__top { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--fg-1); font-weight: 500; position: relative; }
.tm2-entry__cap { font-family: var(--font-mono); font-size: 10px; color: var(--fg-4); letter-spacing: 0.02em; position: relative; }
.tm2-entry__bar { position: absolute; left: 0; top: 0; bottom: 0; width: 3px; }
/* as-self = cyan */
.tm2-entry--self .tm2-entry__bar { background: var(--cyan); }
.tm2-entry--self .tm2-entry__top svg { color: var(--cyan); }
.tm2-entry--self:hover { border-color: var(--cyan-dim); background: var(--cyan-tint); }
/* impersonate = amber + hatch preview of downstream banner */
.tm2-entry--imp .tm2-entry__bar { background: var(--amber); }
.tm2-entry--imp .tm2-entry__top svg { color: var(--amber); }
.tm2-entry--imp::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.5;
  background-image: repeating-linear-gradient(-45deg, var(--amber-tint) 0, var(--amber-tint) 1px, transparent 1px, transparent 7px);
}
.tm2-entry--imp:hover { border-color: color-mix(in oklab, var(--amber) 50%, var(--line-strong)); background: var(--amber-tint); }
.tm2-entry:disabled, .tm2-entry[aria-disabled="true"] { opacity: 0.4; cursor: not-allowed; }
.tm2-entry:disabled::after { display: none; }

/* placeholder panel for the not-yet-built detail regions (head/lifecycle, fan-out,
   entitlements, participations) — honest "lands later", not fake-populated. */
.tm2-placeholder { margin: 16px 26px; padding: 14px 16px; border: 1px dashed var(--line-bright); border-radius: var(--r-3); background: repeating-linear-gradient(-45deg, var(--bg-2) 0, var(--bg-2) 6px, transparent 6px, transparent 12px); }
.tm2-placeholder__lbl { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-4); margin-bottom: 6px; }
.tm2-placeholder__msg { font-size: 12px; color: var(--fg-3); line-height: 1.5; }

.tm2-fan__empty, .tm2-empty {
  font-family: var(--font-mono); font-size: 11px; color: var(--fg-4); letter-spacing: 0.02em;
  padding: 10px 0; display: flex; align-items: center; gap: 8px;
}

/* ===== programs spine ===== */
.tm2-spine { padding: 18px 26px 40px; }
.tm2-spine__head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.tm2-spine__head h3 { margin: 0; font-size: 14px; font-weight: 600; color: var(--fg-1); }
.tm2-spine__head .meta { font-family: var(--font-mono); font-size: 11px; color: var(--fg-4); }
.tm2-spine__head .right { margin-left: auto; display: flex; gap: 6px; }

.tm2-prog { border: 1px solid var(--line); border-radius: var(--r-3); margin-bottom: 8px; overflow: hidden; background: var(--bg-2); }
.tm2-prog__head { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 11px 14px; cursor: pointer; transition: background 80ms; }
.tm2-prog__head:hover { background: var(--bg-3); }
.tm2-prog__chev { color: var(--fg-4); display: inline-flex; transition: transform 140ms; }
.tm2-prog.is-open .tm2-prog__chev { transform: rotate(90deg); }
.tm2-prog__id { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.tm2-prog__name { font-size: 13px; font-weight: 550; color: var(--fg-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tm2-prog__key { font-family: var(--font-mono); font-size: 10.5px; color: var(--fg-4); }
.tm2-prog__meta { display: inline-flex; align-items: center; gap: 12px; }
.tm2-counts { font-family: var(--font-mono); font-size: 11px; display: inline-flex; gap: 10px; }
.tm2-counts .pub { color: var(--green); }
.tm2-counts .drf { color: var(--amber); }
.tm2-counts .arc { color: var(--fg-4); }
.tm2-counts b { color: var(--fg-1); font-weight: 600; }
.tm2-prog__act { display: inline-flex; gap: 4px; opacity: 0; transition: opacity 120ms; }
.tm2-prog:hover .tm2-prog__act { opacity: 1; }

.tm2-prog__body { border-top: 1px solid var(--line); }
.tm2-def { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 8px 14px 8px 16px; border-bottom: 1px solid var(--line); font-size: 12px; }
.tm2-def:last-child { border-bottom: 0; }
.tm2-def:hover { background: var(--bg-3); }
.tm2-def__icon { color: var(--fg-4); display: inline-flex; }
.tm2-def__name { color: var(--fg-1); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; }
.tm2-def__status { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; }
.tm2-def__status--published { color: var(--green); }
.tm2-def__status--draft { color: var(--amber); }
.tm2-def__status--archived { color: var(--fg-4); }
.tm2-def__act { display: inline-flex; gap: 3px; opacity: 0; transition: opacity 120ms; min-width: 96px; justify-content: flex-end; }
.tm2-def:hover .tm2-def__act { opacity: 1; }

/* archived programs subsection — de-emphasized, collapsed by default */
.tm2-arch { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 14px; }
.tm2-arch__toggle { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 8px 4px; color: var(--fg-3); font-size: 12px; cursor: pointer; }
.tm2-arch__toggle:hover { color: var(--fg-1); }
.tm2-arch__toggle .chev { transition: transform 140ms; display: inline-flex; }
.tm2-arch.is-open .tm2-arch__toggle .chev { transform: rotate(90deg); }
.tm2-arch__toggle .n { font-family: var(--font-mono); font-size: 11px; color: var(--fg-4); }
.tm2-arch__list { margin-top: 6px; }
.tm2-arch .tm2-prog { opacity: 0.6; }

/* frozen (suspended) — covers create-program / create-def / archive equally */
.tm2-frozen { display: flex; align-items: center; gap: 12px; padding: 11px 14px; margin-bottom: 16px; background: var(--neutral-tint); border: 1px dashed var(--line-bright); border-radius: var(--r-2); font-size: 12px; color: var(--fg-2); }
.tm2-frozen svg { color: var(--fg-3); flex: none; }
.tm2-frozen .caps { color: var(--fg-3); }
/* Native :disabled is the real gate (Frozen-suspended buttons + in-flight modal writes); the
   browser blocks the click, the styling just makes the state legible. */
.btn:disabled, .lbtn:disabled { opacity: 0.4; cursor: not-allowed; }

/* program-row actions are persistent (commercial-gating spine, v3 Rev 1) */
.tm2-prog__act { opacity: 1; }

/* ===== panel shared label + state chip ===== */
.tm2-panel__lbl { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-4); display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.tm2-state { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; padding: 1px 7px; border-radius: var(--r-1); }
.tm2-state--healthy { color: var(--green); background: var(--green-tint); }
.tm2-state--degraded, .tm2-state--paused { color: var(--amber); background: var(--amber-tint); }
.tm2-state--down { color: var(--red); background: var(--red-tint); }
.tm2-state--idle { color: var(--fg-3); background: var(--neutral-tint); }

/* ===== lifecycle control (split button + kebab + dropdown) ===== */
.tm3-life { display: inline-flex; align-items: stretch; gap: 0; position: relative; }
.tm3-life__primary {
  display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 12px;
  background: var(--bg-3); border: 1px solid var(--line-strong); border-radius: var(--r-2) 0 0 var(--r-2);
  color: var(--fg-1); font-size: var(--t-body); cursor: pointer; white-space: nowrap;
  transition: background 120ms, border-color 120ms;
}
.tm3-life__primary:hover { background: var(--bg-4); border-color: var(--line-bright); }
.tm3-life__primary svg { color: var(--amber); }
.tm3-life__primary.is-resume svg { color: var(--green); }
.tm3-life__kebab {
  display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px;
  background: var(--bg-3); border: 1px solid var(--line-strong); border-left: 0;
  border-radius: 0 var(--r-2) var(--r-2) 0;
  color: var(--fg-2); cursor: pointer; transition: background 120ms;
}
.tm3-life__kebab:hover { background: var(--bg-4); color: var(--fg-1); }
/* when there's no kebab, the primary button gets full border-radius */
.tm3-life > .tm3-life__primary:only-child { border-radius: var(--r-2); }
.tm3-menu {
  position: absolute; top: calc(100% + 4px); right: 0; min-width: 168px; z-index: 40;
  background: var(--bg-2); border: 1px solid var(--line-strong); border-radius: var(--r-3);
  box-shadow: var(--shadow-overlay); padding: 4px;
}
.tm3-menu button {
  display: flex; align-items: center; gap: 9px; width: 100%; text-align: left; padding: 7px 10px;
  border-radius: var(--r-1); font-size: 12.5px; color: var(--fg-1); background: transparent; cursor: pointer;
}
.tm3-menu button:hover { background: var(--bg-3); }
.tm3-menu button svg { color: var(--fg-3); }
.tm3-menu button.is-danger { color: var(--red); }
.tm3-menu button.is-danger:hover { background: var(--red-tint); }
.tm3-menu button.is-danger svg { color: var(--red); }

/* ===== fan-out panel ===== */
.tm2-fan { padding: 16px 26px 18px; border-bottom: 1px solid var(--line); }
.tm2-fan__grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 28px; align-items: start; }
.tm2-fan__left { min-width: 0; }
.tm2-fan__p95 { display: flex; align-items: baseline; gap: 10px; margin-bottom: 12px; }
.tm2-fan__p95 b { font-family: var(--font-mono); font-size: 30px; font-weight: 400; color: var(--fg-1); letter-spacing: -0.01em; font-variant-numeric: tabular-nums; line-height: 1; }
.tm2-fan__p95 .u { font-family: var(--font-mono); font-size: 10.5px; color: var(--fg-4); text-transform: uppercase; letter-spacing: 0.08em; }
.tm2-fan__bar { display: flex; gap: 2px; height: 10px; margin-bottom: 14px; }
.tm2-fan__bar span { border-radius: 1px; min-width: 0; }
.tm2-fan__bar .d { background: var(--green-dim); }
.tm2-fan__bar .r { background: var(--amber); }
.tm2-fan__bar .q { background: var(--bg-4); box-shadow: inset 0 0 0 1px var(--line-strong); }
.tm2-fan__bar .f { background: var(--red); }
.tm2-fan__cells { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-2); overflow: hidden; }
.tm2-cell { background: var(--bg-2); padding: 9px 12px; }
.tm2-cell .v { font-family: var(--font-mono); font-size: 17px; color: var(--fg-1); font-variant-numeric: tabular-nums; line-height: 1.1; }
.tm2-cell .k { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-4); margin-top: 3px; }
.tm2-cell--fail .v { color: var(--red); }
.tm2-cell--run .v { color: var(--amber); }
.tm2-cell--ok .v { color: var(--green); }
/* histogram */
.tm2-hist { display: flex; flex-direction: column; }
.tm2-hist__bars { display: grid; grid-template-columns: repeat(12, 1fr); gap: 3px; align-items: end; height: 64px; }
.tm2-hist__bar { display: flex; flex-direction: column-reverse; gap: 2px; }
.tm2-hist__bar .ok { background: var(--green-dim); min-height: 2px; border-radius: 1px; }
.tm2-hist__bar .fail { background: var(--red); min-height: 2px; border-radius: 1px; }
.tm2-hist__ax { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 9px; color: var(--fg-5); margin-top: 6px; letter-spacing: 0.04em; }
/* intervention callout — red, operator intervention only (color discipline spec §9) */
.tm2-intervene { display: flex; align-items: center; gap: 10px; padding: 9px 12px; margin-bottom: 14px; background: var(--bg-tint-red); border: 1px solid color-mix(in oklab, var(--red) 35%, var(--line)); border-radius: var(--r-2); font-size: 12px; color: var(--fg-1); }
.tm2-intervene svg { color: var(--red); flex: none; }
.tm2-intervene .lbtn { margin-left: auto; }

/* ===== entitlements panel ===== */
.tm2-ent { padding: 16px 26px 18px; border-bottom: 1px solid var(--line); }
.tm2-ent__meter { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r-2); padding: 11px 14px; margin-bottom: 14px; }
.tm2-ent__meter-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.tm2-ent__meter-lbl { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-4); }
.tm2-ent__meter-val { font-family: var(--font-mono); font-size: 13px; color: var(--fg-1); font-variant-numeric: tabular-nums; }
.tm2-ent__meter-val b { font-weight: 600; }
.tm2-ent__meter-val .lim { color: var(--fg-4); }
.tm2-ent__meter-val.is-warn b { color: var(--amber); }
.tm2-ent__meter-val.is-over b { color: var(--red); }
/* placeholder variant — no live quota data this cycle (ADR-0038 open question) */
.tm2-ent__meter-placeholder { font-size: 11px; color: var(--fg-5); font-family: var(--font-mono); font-style: italic; }
.tm2-ent__track { height: 5px; background: var(--bg-0); border-radius: 2px; overflow: hidden; }
.tm2-ent__fill { height: 100%; background: var(--cyan-dim); border-radius: 2px; }
.tm2-ent__fill.is-warn { background: var(--amber); }
.tm2-ent__fill.is-over { background: var(--red); }
.tm2-ent__track--placeholder { background: var(--bg-0); opacity: 0.4; }
/* capability flags 2-col grid */
.tm2-ent__flags { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-2); overflow: hidden; }
.tm2-flag { background: var(--bg-2); display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; padding: 9px 13px; position: relative; }
.tm2-flag__name { font-size: 12.5px; color: var(--fg-1); }
.tm2-flag__key { font-family: var(--font-mono); font-size: 10px; color: var(--fg-5); margin-top: 2px; }
.tm2-flag__ovr { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--amber); padding: 1px 5px; border: 1px solid color-mix(in oklab, var(--amber) 40%, var(--line)); border-radius: var(--r-1); white-space: nowrap; }
.tm2-flag__ovrwrap { display: inline-flex; align-items: center; gap: 6px; }
.tm2-flag__clear { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--fg-4); padding: 1px 5px; border: 1px solid transparent; border-radius: var(--r-1); opacity: 0; transition: opacity 120ms, color 120ms, background 120ms; cursor: pointer; white-space: nowrap; }
.tm2-flag:hover .tm2-flag__clear { opacity: 1; }
.tm2-flag__clear:hover { color: var(--cyan-ink); background: var(--cyan-tint); }
.tm2-flag__def { font-family: var(--font-mono); font-size: 9px; color: var(--fg-5); letter-spacing: 0.04em; }
/* compact cyan switch — ON = cyan (selection/navigation, spec §9), OFF = muted */
.tm2-switch { width: 30px; height: 16px; border-radius: 999px; background: var(--bg-0); border: 1px solid var(--line-strong); position: relative; cursor: pointer; flex: none; transition: background 120ms, border-color 120ms; padding: 0; }
.tm2-switch__knob { position: absolute; top: 1px; left: 1px; width: 12px; height: 12px; border-radius: 50%; background: var(--fg-4); transition: transform 140ms, background 120ms; }
.tm2-switch.is-on { background: var(--cyan-tint); border-color: var(--cyan-dim); }
.tm2-switch.is-on .tm2-switch__knob { transform: translateX(14px); background: var(--cyan); }
.tm2-switch:disabled { opacity: 0.4; cursor: not-allowed; }

/* warn callout variant (lifecycle modal: pause / resume / suspend) */
.tm3-callout--warn { background: var(--amber-tint); color: var(--fg-1); }
.tm3-callout--warn svg { color: var(--amber); }

/* ---------- modal (tm3-*) ---------- */
.tm3-scrim {
  position: fixed; inset: 0; background: rgba(0,0,0,0.55); z-index: 80;
  display: flex; align-items: flex-start; justify-content: center; padding-top: 12vh;
  opacity: 0; animation: tm3-fade 120ms ease forwards;
}
@keyframes tm3-fade { to { opacity: 1; } }
.tm3-modal {
  width: min(540px, 92vw); background: var(--bg-2); border: 1px solid var(--line-strong);
  border-radius: 7px; box-shadow: var(--shadow-overlay); overflow: hidden;
  transform: translateY(-6px); animation: tm3-rise 150ms cubic-bezier(0.16,1,0.3,1) forwards;
}
@keyframes tm3-rise { to { transform: translateY(0); } }
.tm3-modal__head { padding: 16px 20px 12px; border-bottom: 1px solid var(--line); display: flex; align-items: flex-start; gap: 12px; }
.tm3-modal__crest { width: 30px; height: 30px; font-size: 11px; }
.tm3-modal__titles { flex: 1; min-width: 0; }
.tm3-modal__title { margin: 0; font-size: 15px; font-weight: 600; color: var(--fg-1); letter-spacing: -0.01em; }
.tm3-modal__sub { font-family: var(--font-mono); font-size: 11px; color: var(--fg-3); margin-top: 4px; letter-spacing: 0.02em; }
.tm3-modal__x { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; color: var(--fg-3); border-radius: var(--r-1); }
.tm3-modal__x:hover { background: var(--bg-3); color: var(--fg-1); }
.tm3-modal__body { padding: 16px 20px; max-height: 56vh; overflow-y: auto; }
.tm3-modal__body p { margin: 0 0 12px; font-size: 13px; color: var(--fg-2); line-height: 1.5; }
.tm3-modal__foot { padding: 12px 20px; border-top: 1px solid var(--line); display: flex; align-items: center; gap: 8px; justify-content: flex-end; }
.tm3-modal__foot .grow { flex: 1; }

.tm3-field { margin-bottom: 14px; }
.tm3-field label { display: block; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-4); margin-bottom: 6px; }
.tm3-input { width: 100%; height: 32px; background: var(--bg-1); border: 1px solid var(--line-strong); border-radius: var(--r-2); padding: 0 11px; color: var(--fg-1); font-size: 13px; outline: none; transition: border-color 120ms; }
.tm3-input:focus { border-color: var(--cyan); background: var(--bg-2); }
.tm3-input.mono { font-family: var(--font-mono); }
.tm3-hint { font-family: var(--font-mono); font-size: 10.5px; color: var(--fg-4); margin-top: 5px; }

.tm3-callout { display: flex; gap: 11px; padding: 11px 13px; border-radius: var(--r-2); font-size: 12.5px; line-height: 1.5; margin-bottom: 14px; }
.tm3-callout svg { flex: none; margin-top: 1px; }
.tm3-callout--danger { background: var(--red-tint); color: var(--fg-1); }
.tm3-callout--danger svg { color: var(--red); }
.tm3-callout--info { background: var(--cyan-tint); color: var(--fg-1); }
.tm3-callout--info svg { color: var(--cyan); }

.tm3-envelope { display: flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 11px; color: var(--fg-3); padding: 9px 12px; background: var(--bg-1); border: 1px solid var(--line); border-radius: var(--r-2); margin-bottom: 14px; }
.tm3-envelope b { color: var(--cyan-ink); font-weight: 500; }
.tm3-stubnote { font-family: var(--font-mono); font-size: 10px; color: var(--fg-5); letter-spacing: 0.02em; }
.tm3-err { font-family: var(--font-mono); font-size: 11px; color: var(--red); }

/* ============================================================
   ATLAS — Per-AppDef Atlas view (av-*) + system-app drift sheet.
   Ported from design handoff appdef-v4.css.
   Color discipline holds: cyan = cross-scope / navigate / as-self,
   green = terminal-positive (published & live), amber = draft /
   friction, red = operator intervention only.
   ============================================================ */

.grow { flex: 1; }

/* ---- cross-scope context strip (you are in someone else's house) ---- */
.av-context {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 26px;
  background: var(--cyan-tint);
  border-bottom: 1px solid color-mix(in oklab, var(--cyan) 28%, var(--bg-0));
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.04em;
  color: var(--cyan-ink);
}
.av-context__dot { width: 6px; height: 6px; background: var(--cyan); flex: none; }
.av-context b { color: var(--fg-1); font-weight: 600; }
.av-context__route { color: var(--fg-3); text-transform: none; letter-spacing: 0; }
.av-context__route .seg { color: var(--cyan-ink); }
.av-context__route .punc { color: var(--fg-5); }

/* ---- view container ---- */
.av { overflow-y: auto; background: var(--bg-1); min-width: 0; display: flex; flex-direction: column; flex: 1; }

/* ---- head ---- */
.av-head { padding: 16px 26px 16px; border-bottom: 1px solid var(--line); }
.av-crumb { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--fg-3); margin-bottom: 12px; }
.av-crumb__back {
  display: inline-flex; align-items: center; gap: 6px; color: var(--fg-3);
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase;
  padding: 3px 8px 3px 6px; border: 1px solid var(--line); border-radius: var(--r-1); cursor: pointer;
  transition: color 120ms, background 120ms, border-color 120ms;
}
.av-crumb__back:hover { color: var(--fg-1); background: var(--bg-3); border-color: var(--line-strong); }
.av-crumb__back svg { transform: rotate(180deg); }
.av-crumb__seg { color: var(--fg-3); cursor: pointer; background: none; border: none; padding: 0; font: inherit; }
.av-crumb__seg:hover { color: var(--cyan); }
.av-crumb__seg.is-now { color: var(--fg-1); cursor: default; }
.av-crumb__sep { color: var(--fg-5); }

.av-title { display: flex; align-items: flex-start; gap: 14px; }
.av-title__crest { width: 34px; height: 34px; margin-top: 2px; }
.av-title__id { min-width: 0; flex: 1; }
.av-title__line { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.av-title h1 { margin: 0; font-size: 20px; font-weight: 500; letter-spacing: -0.014em; color: var(--fg-1); }
.av-title__sub { margin-top: 6px; font-family: var(--font-mono); font-size: 11px; color: var(--fg-3); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.av-title__sub .sep { color: var(--fg-5); }
.av-title__sub b { color: var(--fg-2); font-weight: 500; }
.av-title__actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }

/* def status pill */
.av-pill { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; padding: 2px 8px; border-radius: var(--r-1); white-space: nowrap; }
.av-pill--published { color: var(--green); background: var(--green-tint); }
.av-pill--draft { color: var(--amber); background: var(--amber-tint); }
.av-pill--superseded { color: var(--fg-3); background: var(--neutral-tint); }
.av-pill--recalled { color: var(--red); background: var(--red-tint); }
.av-pill--archived { color: var(--fg-4); background: var(--neutral-tint); border: 1px dashed var(--line-bright); }

/* ---- body two-column ---- */
.av-cols { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 1px; background: var(--line); flex: 1; min-height: 0; }
.av-main { background: var(--bg-1); padding: 18px 26px 40px; min-width: 0; overflow-y: auto; }
.av-aside { background: var(--bg-1); padding: 18px 22px 40px; display: flex; flex-direction: column; gap: 20px; overflow-y: auto; }

.av-sect__lbl { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-4); display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.av-sect { margin-bottom: 26px; }

/* ---- ops signals (from above) ---- */
.av-ops { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-2); overflow: hidden; }
.av-ops__cell { background: var(--bg-2); padding: 11px 14px; }
.av-ops__v { font-family: var(--font-mono); font-size: 19px; color: var(--fg-1); font-variant-numeric: tabular-nums; line-height: 1.1; }
.av-ops__v.is-muted { color: var(--fg-4); }
.av-ops__k { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-4); margin-top: 4px; }
.av-ops__v .st { font-size: 13px; }

/* ---- version ladder ---- */
.av-ladder { border: 1px solid var(--line); border-radius: var(--r-3); overflow: hidden; background: var(--bg-2); }
.av-ver { display: grid; grid-template-columns: 14px 56px 1fr auto; gap: 14px; align-items: start; padding: 12px 14px; border-bottom: 1px solid var(--line); position: relative; }
.av-ver:last-child { border-bottom: 0; }
.av-ver.is-live { background: var(--bg-3); }
.av-ver.is-live::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--green); }
.av-ver--recalled::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--red); }
.av-ver__rail { position: relative; padding-top: 4px; }
.av-ver__node { width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--fg-4); background: var(--bg-2); }
.av-ver.is-live .av-ver__node { border-color: var(--green); background: color-mix(in oklab, var(--green) 30%, var(--bg-2)); }
.av-ver--recalled .av-ver__node { border-color: var(--red); background: color-mix(in oklab, var(--red) 30%, var(--bg-2)); }
.av-ver--draft .av-ver__node { border-color: var(--amber); }
.av-ver__rail::after { content: ""; position: absolute; left: 4px; top: 17px; bottom: -12px; width: 1px; background: var(--line-strong); }
.av-ver:last-child .av-ver__rail::after { display: none; }
.av-ver__tag { font-family: var(--font-mono); font-size: 12px; color: var(--fg-1); font-variant-numeric: tabular-nums; padding-top: 2px; }
.av-ver__body { min-width: 0; }
.av-ver__top { display: flex; align-items: center; gap: 10px; }
.av-ver__status { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase; }
.av-ver__status--published { color: var(--green); }
.av-ver__status--draft { color: var(--amber); }
.av-ver__status--superseded { color: var(--fg-4); }
.av-ver__status--recalled { color: var(--red); }
.av-ver__live { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--green); border: 1px solid color-mix(in oklab, var(--green) 40%, var(--line)); padding: 0 5px; border-radius: var(--r-1); }
.av-ver__note { font-size: 12px; color: var(--fg-3); margin-top: 4px; line-height: 1.45; }
.av-ver__meta { font-family: var(--font-mono); font-size: 10.5px; color: var(--fg-4); text-align: right; white-space: nowrap; padding-top: 2px; }
.av-ver__meta b { color: var(--fg-2); font-weight: 500; }
.av-ver__act { display: inline-flex; gap: 3px; margin-top: 6px; opacity: 0; transition: opacity 120ms; }
.av-ver:hover .av-ver__act { opacity: 1; }

/* ---- aside: behind-the-curtain panel ---- */
.av-curtain { border: 1px solid var(--line-strong); border-radius: var(--r-3); overflow: hidden; background: var(--bg-2); }
.av-curtain__head {
  padding: 12px 14px; border-bottom: 1px solid var(--line);
  background: repeating-linear-gradient(-45deg, var(--bg-2) 0, var(--bg-2) 7px, var(--bg-3) 7px, var(--bg-3) 14px);
}
.av-curtain__title { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--fg-1); font-weight: 550; }
.av-curtain__title svg { color: var(--cyan); }
.av-curtain__say { font-family: var(--font-mono); font-size: 10px; color: var(--fg-3); margin-top: 6px; line-height: 1.5; }
.av-curtain__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); }
.av-curtain__cell { background: var(--bg-2); padding: 9px 13px; display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.av-curtain__cell .k { font-size: 12px; color: var(--fg-2); }
.av-curtain__cell .v { font-family: var(--font-mono); font-size: 13px; color: var(--fg-1); font-variant-numeric: tabular-nums; }
.av-curtain__cell .v.is-zero { color: var(--fg-5); }
.av-curtain__cell .v.is-on { color: var(--green); }
.av-curtain__edited { padding: 10px 14px; border-top: 1px solid var(--line); font-family: var(--font-mono); font-size: 10.5px; color: var(--fg-4); line-height: 1.5; }
.av-curtain__edited b { color: var(--fg-2); font-weight: 500; }
.av-curtain__foot { padding: 12px 14px; border-top: 1px solid var(--line); background: var(--bg-1); display: flex; flex-direction: column; gap: 8px; }

/* the as-self handoff block — cyan bar, audit cost stated */
.av-handoff { display: flex; flex-direction: column; gap: 9px; }
.av-handoff__btn {
  display: flex; align-items: center; gap: 9px; width: 100%; text-align: left;
  padding: 10px 12px; border-radius: var(--r-2); cursor: pointer;
  border: 1px solid var(--cyan-dim); background: var(--cyan-tint); color: var(--cyan-ink);
  position: relative; overflow: hidden; transition: background 120ms, border-color 120ms;
}
.av-handoff__btn:hover { background: rgba(52,199,240,0.2); border-color: var(--cyan); }
.av-handoff__btn .lead { font-size: 13px; color: var(--fg-1); font-weight: 500; display: flex; align-items: center; gap: 8px; }
.av-handoff__btn .lead svg { color: var(--cyan); }
.av-handoff__btn .sub { font-family: var(--font-mono); font-size: 10px; color: var(--cyan-ink); opacity: 0.9; margin-top: 3px; }
.av-handoff__btn .av-handoff__bar { position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--cyan); }
.av-handoff__btn:disabled, .av-handoff__btn[aria-disabled="true"] { opacity: 0.4; cursor: not-allowed; pointer-events: none; }
.av-handoff__row { display: flex; gap: 8px; }
.av-handoff__alt {
  flex: 1; display: flex; flex-direction: column; gap: 2px; align-items: flex-start;
  padding: 8px 11px; border-radius: var(--r-2); border: 1px solid var(--line-strong);
  background: var(--bg-2); cursor: pointer; position: relative; overflow: hidden;
  transition: border-color 120ms, background 120ms;
}
.av-handoff__alt .t { font-size: 12px; color: var(--fg-1); display: inline-flex; align-items: center; gap: 7px; }
.av-handoff__alt .c { font-family: var(--font-mono); font-size: 9.5px; color: var(--fg-4); }
.av-handoff__alt.is-imp .t svg { color: var(--amber); }
.av-handoff__alt.is-imp::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.5; background-image: repeating-linear-gradient(-45deg, var(--amber-tint) 0, var(--amber-tint) 1px, transparent 1px, transparent 7px); }
.av-handoff__alt.is-imp:hover { border-color: color-mix(in oklab, var(--amber) 50%, var(--line-strong)); background: var(--amber-tint); }
.av-handoff__alt .t, .av-handoff__alt .c { position: relative; }
.av-handoff__cost { font-family: var(--font-mono); font-size: 9.5px; color: var(--fg-5); letter-spacing: 0.02em; line-height: 1.5; }

/* ---- platform actions ---- */
.av-pactions { display: flex; flex-direction: column; gap: 7px; }
.av-pact {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  padding: 9px 12px; border-radius: var(--r-2); border: 1px solid var(--line-strong);
  background: var(--bg-2); color: var(--fg-1); cursor: pointer; font-size: 12.5px;
  transition: background 120ms, border-color 120ms, color 120ms;
}
.av-pact:hover { background: var(--bg-3); border-color: var(--line-bright); }
.av-pact svg { color: var(--fg-3); flex: none; }
.av-pact .av-pact__sub { font-family: var(--font-mono); font-size: 9.5px; color: var(--fg-4); margin-left: auto; }
.av-pact--primary { border-color: var(--cyan-dim); background: var(--cyan-tint); color: var(--cyan-ink); }
.av-pact--primary svg { color: var(--cyan); }
.av-pact--primary:hover { background: rgba(52,199,240,0.2); border-color: var(--cyan); }
.av-pact--danger { color: var(--red); border-color: color-mix(in oklab, var(--red) 32%, var(--line-strong)); }
.av-pact--danger svg { color: var(--red); }
.av-pact--danger:hover { background: var(--red-tint); border-color: var(--red); }
.av-pact:disabled { opacity: 0.4; cursor: not-allowed; pointer-events: none; }
.av-note { font-family: var(--font-mono); font-size: 10px; color: var(--fg-5); line-height: 1.5; margin-top: 2px; }

/* ---- spine: clickable def name becomes drill link ---- */
.tm2-def__open { text-align: left; color: var(--fg-1); cursor: pointer; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: color 120ms; background: none; border: none; padding: 0; font: inherit; }
.tm2-def__open:hover { color: var(--cyan); }