/* agent-ops chrome — datacore idiom (flat, hairline borders, cool neutrals),
   sole owner of .ao-*. Renders under the shell topbar (no topbar of its own);
   tokens come from ../datacore/datacore-tokens.css. */

* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font: var(--font-body); }

/* Night values live in ONE home: ../datacore/skin-night.css (linked by every
   page) — no per-sheet copies to drift. */

.ao { display: flex; flex-direction: column; height: 100dvh; background: var(--bg); color: var(--text); }
/* embedded in the portfolio shell: fill the host surface, not the viewport */
.ao.ao--embedded { height: 100%; width: 100%; }
.ao-spacer { flex: 1; }
.ao-dot { width: 0.95rem; height: 0.95rem; border-radius: 3px; background: var(--accent); flex: none; }
.ao-dot.lg { width: 2rem; height: 2rem; border-radius: 6px; }
.ao-lock { font-size: 0.75em; }

/* ── header ─────────────────────────────────────────────────────────────── */
.ao-header { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-4); border-bottom: 1px solid var(--border); flex: none; flex-wrap: wrap; }
.ao-title { font-family: var(--font-mono); font-weight: var(--weight-bold); letter-spacing: -0.02em; }
.ao-sub { font-size: var(--text-xs); color: var(--text-muted); }
.ao-as { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-xs); color: var(--text-subtle); }
.ao-select { border: 1px solid var(--border-strong); background: var(--surface); border-radius: var(--radius-sm); padding: 0.25rem 0.4rem; color: var(--text); font-family: var(--font-mono); font-size: var(--text-xs); max-width: 16rem; }

.ao-btn { display: inline-flex; align-items: center; gap: 0.35rem; border: 1px solid var(--border); background: var(--surface); border-radius: var(--radius-sm); padding: 0.3rem 0.7rem; cursor: pointer; font-size: var(--text-sm); color: var(--text-muted); font-family: inherit; text-decoration: none; }
.ao-btn:hover { border-color: var(--accent); color: var(--text); text-decoration: none; }
.ao-btn--accent { border: 0; background: var(--accent); color: var(--text-on-accent); font-weight: 600; }
.ao-btn--accent:hover { color: var(--text-on-accent); }

/* ── scenario stepper ───────────────────────────────────────────────────── */
.ao-stepper { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-4); border-bottom: 1px solid var(--border); background: var(--accent-tint); flex: none; flex-wrap: wrap; }
.ao-step-n { font-family: var(--font-mono); font-size: var(--text-2xs); text-transform: uppercase; letter-spacing: 0.05em; color: var(--accent); font-weight: 600; white-space: nowrap; }
.ao-step-txt { font-size: var(--text-sm); color: var(--text); line-height: 1.5; flex: 1 1 24rem; min-width: 14rem; }

/* ── body: rail · feed · inspector ──────────────────────────────────────── */
.ao-body { display: flex; flex: 1; min-height: 0; }
.ao-rail { flex: none; width: 19rem; display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--border); overflow: auto; }
.ao-rail-sec { padding: var(--space-3); border-bottom: 1px solid var(--border); display: flex; flex-direction: column; gap: var(--space-2); }
.ao-rail-fleet { flex: none; }
.ao-rail-audit { flex: 1; border-bottom: 0; min-height: 8rem; }
.ao-rail-title { font-family: var(--font-mono); font-size: var(--text-2xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-subtle); font-weight: 600; line-height: 1.5; }

/* fleet tree */
.ao-tree { display: flex; flex-direction: column; gap: 2px; }
/* flex-wrap + shrinkable people-container: a seeded node's chips must wrap
   INSIDE the bordered row, never spill past it (the rail is only 19rem) */
.ao-node { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); padding: 0.15rem 0.45rem 0.15rem 0; border: 1px solid transparent; border-radius: var(--radius-sm); min-height: var(--tap-min, 2.25rem); }
.ao-node-hit { display: flex; align-items: center; gap: var(--space-2); border: 0; background: transparent; cursor: pointer; font: inherit; color: inherit; padding: 0.15rem 0.45rem; min-height: inherit; border-radius: var(--radius-sm); text-align: left; }
.ao-node-hit:focus-visible { outline: var(--focus-width, 2px) solid var(--focus-ring, var(--accent)); outline-offset: var(--focus-offset, -1px); }
.ao-node.is-reached { border-color: color-mix(in srgb, var(--accent) 25%, transparent); background: var(--accent-tint); }
.ao-node.is-dim { opacity: 0.45; }
.ao-node.is-seeded .ao-node-led { outline: 2px solid var(--accent); outline-offset: 1px; }
.ao-node.is-drop { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-tint); opacity: 1; }
.ao-node.is-flash { animation: ao-flash 0.8s var(--ease, ease) 2; }
@keyframes ao-flash { 50% { border-color: var(--accent); background: var(--accent-tint); opacity: 1; } }
.ao-node-led { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--text-subtle); flex: none; }
.ao-node.is-reached .ao-node-led { background: var(--accent); }
.ao-node-name { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text); white-space: nowrap; }
.ao-node-kind { font-size: var(--text-2xs); color: var(--text-subtle); }
.ao-node-people { display: flex; gap: 0.25rem; flex-wrap: wrap; justify-content: flex-end; flex: 1 1 auto; min-width: 0; }

/* principal chips */
.ao-chip { display: inline-flex; align-items: center; gap: 0.3rem; border: 1px solid var(--border); background: var(--surface); border-radius: var(--radius-full); padding: 0.15rem 0.55rem; cursor: grab; font-size: var(--text-2xs); color: var(--text); font-family: var(--font-mono); touch-action: none; }
.ao-chip .bi { font-size: 0.8rem; line-height: 1; color: var(--text-muted); }
.ao-chip.is-agent .bi { color: var(--chart-3, var(--accent)); }
.ao-chip.is-selected { border-color: var(--accent); background: var(--accent-tint); }
.ao-chip:hover { border-color: var(--accent); }
.ao-ghost { position: fixed; z-index: 200; pointer-events: none; display: inline-flex; align-items: center; gap: 0.3rem; border: 1px solid var(--accent); background: var(--surface); border-radius: var(--radius-full); padding: 0.2rem 0.6rem; font-size: var(--text-xs); font-family: var(--font-mono); box-shadow: var(--shadow-popover); }
body.ao-dragging { cursor: grabbing; user-select: none; }

/* resources */
.ao-resources, .ao-ins-sec { display: flex; flex-direction: column; gap: 0.25rem; }
.ao-res { display: flex; align-items: center; gap: var(--space-2); padding: 0.35rem 0.45rem; border: 1px solid var(--border); background: var(--surface); border-radius: var(--radius-sm); cursor: pointer; font: inherit; color: var(--text); text-align: left; min-height: var(--tap-min, 2.25rem); }
.ao-res:hover { border-color: var(--accent); }
.ao-res.is-dim { opacity: 0.5; }
.ao-res .bi { font-size: 0.85rem; line-height: 1; color: var(--text-muted); flex: none; }
.ao-res-name { font-family: var(--font-mono); font-size: var(--text-xs); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ao-res-scope { font-size: var(--text-2xs); color: var(--text-subtle); font-family: var(--font-mono); }
.ao-res.sm { min-height: 1.9rem; padding: 0.25rem 0.45rem; }

/* audit */
.ao-audit { display: flex; flex-direction: column; gap: 0.3rem; overflow: auto; }
.ao-audit-empty { font-size: var(--text-2xs); color: var(--text-subtle); line-height: 1.5; }
.ao-audit-row { display: flex; gap: var(--space-2); align-items: baseline; font-size: var(--text-2xs); font-family: var(--font-mono); }
.ao-audit-verdict { flex: none; width: 4.6rem; }
.ao-audit-verdict.is-ok { color: var(--success); }
.ao-audit-verdict.is-warn { color: var(--warning); }
.ao-audit-verdict.is-danger { color: var(--danger); }
.ao-audit-what { color: var(--text-muted); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── feed ───────────────────────────────────────────────────────────────── */
.ao-main { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
/* bottom padding keeps the LAST feed element a safe distance above the
   composer — a full feed must never sit flush against the input row */
.ao-feed { flex: 1; overflow: auto; padding: var(--space-5) var(--space-5) calc(var(--space-8) + var(--space-4)); scroll-padding-bottom: var(--space-8); }

/* invisible horizontal scroll — wide grids scroll inside, the page never does */
.ao-scroll-x { overflow-x: auto; scrollbar-width: none; }
.ao-scroll-x::-webkit-scrollbar { display: none; }
.ao-feed-inner { max-width: 50rem; margin: 0 auto; display: flex; flex-direction: column; gap: var(--space-4); }

.ao-empty { padding: var(--space-10) 0; text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--space-4); }
.ao-empty h1 { margin: 0; font-size: var(--text-2xl); font-weight: var(--weight-semibold); letter-spacing: -0.01em; }
.ao-empty p { margin: 0 auto; max-width: 36rem; color: var(--text-muted); line-height: 1.6; }

.ao-cmd { display: flex; justify-content: flex-end; }
.ao-cmd > div { display: inline-flex; align-items: baseline; gap: var(--space-2); background: var(--accent-tint); border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent); border-radius: var(--radius); padding: 0.4rem 0.7rem; max-width: 85%; }
.ao-cmd .p { color: var(--accent); font-family: var(--font-mono); }
.ao-cmd .who { font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--text-subtle); }
.ao-cmd .t { font-family: var(--font-mono); font-size: var(--text-sm); word-break: break-word; }

.ao-note { display: flex; gap: var(--space-2); align-items: baseline; font-size: var(--text-sm); color: var(--text-muted); }
.ao-note.is-ok { color: var(--success); }
.ao-note.is-warn { color: var(--warning); }
.ao-note .ao-dot { width: 0.85rem; height: 0.85rem; transform: translateY(2px); }

.ao-card { display: flex; gap: var(--space-3); }
.ao-card > .ao-dot { margin-top: 0.15rem; }
.ao-frame { flex: 1; min-width: 0; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }

.ao-v-head { display: flex; align-items: baseline; gap: var(--space-2); padding: 0.45rem 0.8rem; border-bottom: 1px solid var(--border); font-family: var(--font-mono); }
.ao-v-head.is-danger { background: var(--danger-tint); }
.ao-v-head.is-warn { background: var(--warning-tint); }
.ao-v-head.is-ok { background: var(--success-tint); }
.ao-v-status { font-weight: var(--weight-bold); font-size: var(--text-md); }
.is-danger .ao-v-status { color: var(--danger); }
.is-warn .ao-v-status { color: var(--warning); }
.is-ok .ao-v-status { color: var(--success); }
.ao-v-code { font-size: var(--text-xs); color: var(--text-muted); }
.ao-v-who { font-size: var(--text-2xs); color: var(--text-subtle); }
.ao-v-title { padding: 0.5rem 0.8rem 0; font-weight: var(--weight-semibold); font-size: var(--text-sm); font-family: var(--font-mono); word-break: break-word; }
.ao-v-detail { padding: 0.35rem 0.8rem 0.6rem; font-size: var(--text-sm); color: var(--text-muted); line-height: 1.55; }
.ao-v-hint { display: flex; gap: 0.4rem; align-items: baseline; padding: 0.45rem 0.8rem; border-top: 1px solid var(--border); background: var(--surface-subtle); font-size: var(--text-xs); color: var(--text-muted); line-height: 1.5; }
.ao-v-hint .bi { color: var(--accent); flex: none; }
.ao-v-actions { display: flex; gap: var(--space-2); padding: 0.45rem 0.8rem; border-top: 1px solid var(--border); flex-wrap: wrap; }

.ao-summary { padding: 0.5rem 0.8rem 0.2rem; font-size: var(--text-sm); line-height: 1.6; }
.ao-kvs { padding: 0.4rem 0.8rem 0.6rem; display: flex; flex-direction: column; gap: 0.25rem; }
.ao-kv { display: flex; gap: var(--space-3); font-size: var(--text-xs); align-items: baseline; }
.ao-kv-k { width: 11rem; flex: none; color: var(--text-subtle); }
.ao-kv-v { font-family: var(--font-mono); color: var(--text); }
.ao-kv-v.is-redacted { color: var(--text-subtle); letter-spacing: 0.05em; }
.ao-closing { padding-bottom: 0; }
.ao-closing .ao-v-title { padding-top: 0.6rem; }

/* ── composer ───────────────────────────────────────────────────────────── */
.ao-composer { flex: none; border-top: 1px solid var(--border); background: var(--surface); padding: var(--space-3) var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); }
.ao-chips { display: flex; gap: 0.35rem; flex-wrap: wrap; max-width: 50rem; margin: 0 auto; width: 100%; }
.ao-sug { border: 1px solid var(--border-strong); background: var(--surface); border-radius: var(--radius-full); padding: 0.2rem 0.6rem; cursor: pointer; font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--text); }
.ao-sug:hover { border-color: var(--accent); }
.ao-sug.is-404 { border-style: dashed; color: var(--text-muted); }
/* the input row + autocomplete are the shared component (.cx-* — see
   apps/shared/console-input.css); .ao-console is its width-constrained slot */
.ao-console { max-width: 50rem; margin: 0 auto; width: 100%; }
/* --kb-inset: virtual-keyboard occlusion (iOS path — set by the shared
   console component); on Android the resizes-content viewport handles it */
.ao-composer { padding-bottom: calc(var(--space-3) + var(--kb-inset, 0px)); }

/* ── inspector ──────────────────────────────────────────────────────────── */
.ao-inspector { flex: none; width: 19rem; border-left: 1px solid var(--border); overflow: auto; padding: var(--space-3); display: flex; flex-direction: column; gap: var(--space-3); }
.ao-ins-card { border: 1px solid var(--border); border-radius: var(--radius); padding: var(--space-3); display: flex; flex-direction: column; gap: var(--space-2); }
.ao-ins-head { display: flex; gap: var(--space-2); align-items: center; }
.ao-ins-avatar { width: 2.1rem; height: 2.1rem; border-radius: var(--radius-sm); background: var(--accent-tint); display: inline-flex; align-items: center; justify-content: center; font-size: 1rem; color: var(--accent); flex: none; }
.ao-ins-name { font-weight: var(--weight-semibold); font-size: var(--text-sm); }
.ao-ins-title { font-size: var(--text-2xs); color: var(--text-muted); font-family: var(--font-mono); }
.ao-ins-stat { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0.4rem 0.6rem; background: var(--surface-subtle); }
.ao-ins-stat .n { font-size: var(--text-xl); font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums; }
.ao-ins-stat .l { font-size: var(--text-2xs); color: var(--text-subtle); text-transform: uppercase; letter-spacing: 0.05em; }
.ao-ins-row { font-size: var(--text-xs); color: var(--text-muted); line-height: 1.5; }
.ao-ins-guard { font-size: var(--text-xs); color: var(--text-muted); line-height: 1.55; border-top: 1px solid var(--border); padding-top: var(--space-2); }
.ao-ins-fine { font-size: var(--text-2xs); color: var(--text-subtle); line-height: 1.6; }
.ao-ins-fine a { color: var(--accent); }

/* ── caps matrix overlay ────────────────────────────────────────────────── */
.ao-overlay { position: fixed; inset: 0; z-index: 110; background: color-mix(in srgb, #000 64%, transparent); /* skin-ok: overlay scrim, design-inherited */ display: flex; align-items: flex-start; justify-content: center; padding: var(--space-8) var(--space-4); overflow: auto; }
.ao-modal { width: min(44rem, 100%); background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-lg); box-shadow: var(--shadow-dialog); overflow: hidden; }
.ao-m-head { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border); background: var(--surface-subtle); }
.ao-m-head .hg { flex: 1; min-width: 0; }
.ao-m-title { font-family: var(--font-mono); font-weight: var(--weight-bold); }
.ao-m-sub { font-size: var(--text-xs); color: var(--text-muted); }
/* rail-recipe icon button: borderless centered square, hover tint */
.ao-m-close { display: inline-flex; align-items: center; justify-content: center; border: 0; padding: 0; background: transparent; border-radius: var(--radius-sm); width: 2.25rem; height: 2.25rem; cursor: pointer; color: var(--text-muted); flex: none; }
.ao-m-close:hover { background: var(--hover); color: var(--text); }
.ao-matrix { display: grid; gap: 1px; background: var(--border); border-top: 1px solid var(--border); }
.ao-mx-h, .ao-mx-f, .ao-mx-c { background: var(--surface); padding: 0.4rem 0.6rem; font-size: var(--text-xs); }
.ao-mx-h { font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.04em; font-size: var(--text-2xs); color: var(--text-subtle); font-weight: 600; }
.ao-mx-h.is-you { color: var(--accent); }
.ao-mx-f { color: var(--text-muted); }
.ao-mx-c { font-family: var(--font-mono); text-align: center; }
.ao-mx-c.is-you { background: var(--accent-tint); }
.ao-mx-c.is-locked { color: var(--text-subtle); }
.ao-m-fine { padding: var(--space-2) var(--space-4) var(--space-3); font-size: var(--text-2xs); color: var(--text-subtle); line-height: 1.6; }

/* ── narrow — one-column fold, NOTHING hidden ───────────────────────────────
   Below --bp-md (64rem ladder; 63.5rem here to stay under exactly-1024px
   viewports) the three panes stack: rail (capped) → console → inspector.
   The inspector folds into the flow instead of disappearing, so caps + the
   guardrails stay reachable on tablet/phone. */
@media (max-width: 63.5rem) { /* below --bp-md 64rem */
  .ao-body { flex-direction: column; overflow: auto; }
  .ao-rail { width: 100%; border-right: 0; border-bottom: 1px solid var(--border); flex: none; max-height: 40dvh; }
  .ao-main { flex: none; min-height: 70dvh; }
  .ao-inspector { width: 100%; border-left: 0; border-top: 1px solid var(--border); flex: none; overflow: visible; }
}
@media (max-width: 47.5rem) { /* --bp-sm 48rem ladder; 47.5rem = 760px, synced with app JS narrow() */
  .ao-sub { display: none; }
}

/* ── touch — raise hit areas to the 44px floor (amenan-typescript) ───────── */
@media (pointer: coarse) {
  .ao-rail-sec, .ao-inspector { --tap-min: 2.75rem; }
  .ao-btn, .ao-btn--accent { min-height: 2.75rem; padding: 0.5rem 0.9rem; }
  .ao-chip { min-height: 2.25rem; padding: 0.4rem 0.8rem; }
  .ao-sug { min-height: 2.75rem; padding: 0.5rem 0.9rem; }
  .ao-res, .ao-res.sm { min-height: 2.75rem; }
  .ao-select { min-height: 2.75rem; }
  .ao-m-close { width: 2.75rem; height: 2.75rem; }
}

/* ── phone floor — Fold6 outer (~368px) stays usable: stacked key/values,
   wrapped node rows, near-full-width modals ──────────────────────────────── */
@media (max-width: 30rem) { /* --bp-xs 30rem ladder (Fold6 outer 368px) */
  .ao-kv { flex-direction: column; gap: 0.1rem; }
  .ao-kv-k { width: auto; }
  .ao-select { max-width: 100%; }
  .ao-overlay { padding: var(--space-3) var(--space-1); }
  .ao-feed { padding: var(--space-3) var(--space-3) calc(var(--space-8) + var(--space-2)); }
}