/* ================= AI IN STRIDE — the capabilities explorer's own rules =================
   Surface: JS/components/ai-capabilities-dialog.js (read its header first — the search/filter
   explorer rebuilt from a flat list in 2026-09-21/22, and why it's a dialog not a page).
   Wears `.settings-modal` for its frame (CSS/components.css, alt-shared-dialogs.css); reuses
   `.a-search`/`.a-input`/`.a-chip` for the search field and filters. Every value here is a
   token (alt-tokens.css), scoped to `body.alt-app`. Four accent tokens stand in for six
   categories on purpose — two pairs share a colour by the shape of their job (an output vs.
   turning an external input into a record); the icon and heading carry the rest, colour is a
   scanning aid only (§18). */

/* ---------- the card shell ---------- */

/* Wider than the flat-list revision on purpose — 880px fits the two-panel intro row and card
   grid that 720px crushed; still narrower than the permissions matrix's 980px table.
   sizeModalToViewport() sets the real size; this is the ceiling. */
body.alt-app .settings-modal.aic-modal{ width:min(880px, 100%); }

/* The header keeps its two-child contract (title, close button — every other dialog's
   `.settings-modal-header` has exactly these two under space-between). The status pill is
   grouped under this wrapper as a sibling of the title, not a third flex child. */
body.alt-app .aic-head-left{ display:flex; align-items:center; gap:8px; min-width:0; }

/* The header pill — provider and readiness, never a model name (see the component's own
   header). `:empty` hides it: a host without ai-status.js leaves no text, and an absent fact is
   drawn as absent, not guessed. */
body.alt-app .aic-head-pill{
  display:inline-flex; align-items:center; gap:5px;
  padding:3px 8px; border-radius:var(--a-r-pill);
  font-size:11px; font-weight:700; white-space:nowrap;
  border:1px solid var(--a-line-soft); color:var(--a-dim); background:var(--a-raised);
}
body.alt-app .aic-head-pill:empty{ display:none; }
body.alt-app .aic-head-pill.on{
  color:var(--a-green); border-color:var(--a-green); background:var(--a-green-soft);
}
body.alt-app .aic-head-pill.warn{
  color:var(--a-amber); border-color:var(--a-amber); background:var(--a-amber-soft);
}

/* The scroller is the inner box, not the body — one scrolling region, never nested scrollbars. */
body.alt-app .aic-body{ overflow:hidden; min-height:0; gap:0; }
body.alt-app .aic-body > *{ flex:0 0 auto; }
body.alt-app .aic-body > .aic-scroll{ flex:1 1 auto; min-height:0; }

body.alt-app .aic-scroll{
  overflow:auto;
  display:flex; flex-direction:column; gap:var(--a-4);
  padding-right:var(--a-1);
}
body.alt-app .aic-scroll:focus-visible{ outline:2px solid var(--focus-ring); outline-offset:1px; }
body.alt-app .aic-scroll > .aic-sub{ margin:0; }

/* ---------- the reader's own status ---------- */

/* `.a-callout`, never `.a-err` — no red, no error affordance: a reader with no key configured
   has nothing wrong with their account (see the component's own comment). */
body.alt-app .aic-scroll .a-callout{ margin-bottom:0; }
body.alt-app .aic-status-host:empty{ display:none; }
body.alt-app .aic-status-act{ display:flex; margin-top:var(--a-2); }
body.alt-app .aic-status-btn{ flex:0 0 auto; }

/* ---------- the intro / trust row ---------- */

/* The wide column goes to the panel with the most to say — the trust panel's copy grew 5.4x in
   the 2026-09-21/22 disclosure corrections and the ratio never moved, so the shorter intro
   panel was stretched to the taller trust panel's height, reading as a box that failed to load.
   A ratio sweep settled `.9fr`/`1.5fr` as the one pairing where neither panel pads out the
   other. THE FLOOR BELONGS ON THE INTRO COLUMN — the half that's easy to get backwards — so its
   headline never gets squeezed on the way to the stacking breakpoint. */
body.alt-app .aic-intro-grid{
  display:grid; grid-template-columns:minmax(260px, .9fr) minmax(0, 1.5fr); gap:var(--a-3);
}
body.alt-app .aic-intro-panel,
body.alt-app .aic-trust-panel{
  border:1px solid var(--a-line-soft); border-radius:var(--a-r-lg); background:var(--a-raised);
  padding:var(--a-4);
}
body.alt-app .aic-intro-eyebrow{
  display:flex; align-items:center; gap:7px;
  color:var(--a-blue-text); font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
}
body.alt-app .aic-intro-eyebrow-ic{ display:flex; width:14px; height:14px; }
body.alt-app .aic-intro-eyebrow-ic svg{ width:14px; height:14px; }
body.alt-app .aic-intro-h{ margin:var(--a-2) 0 var(--a-2); font:700 19px/1.25 var(--a-display); color:var(--a-text); }
body.alt-app .aic-intro-p{ margin:0; color:var(--a-dim); font-size:12px; line-height:1.55; max-width:62ch; }

body.alt-app .aic-stats{ display:flex; flex-wrap:wrap; gap:var(--a-4); margin-top:var(--a-3); }
body.alt-app .aic-stat{ display:flex; align-items:baseline; gap:6px; }
body.alt-app .aic-stat-n{ font-size:19px; font-weight:700; color:var(--a-blue-text); font-variant-numeric:tabular-nums; }
body.alt-app .aic-stat-l{ color:var(--a-faint); font-size:11px; }

body.alt-app .aic-trust-title{ display:flex; align-items:center; gap:8px; color:var(--a-text); font-weight:750; font-size:13px; }
body.alt-app .aic-trust-title-ic{ display:flex; width:15px; height:15px; color:var(--a-blue-text); }
body.alt-app .aic-trust-title-ic svg{ width:15px; height:15px; }
body.alt-app .aic-trust-p{ margin:7px 0 var(--a-3); color:var(--a-dim); font-size:12px; line-height:1.5; }
body.alt-app .aic-trust-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:var(--a-2); }
body.alt-app .aic-trust-li{ display:flex; align-items:flex-start; gap:8px; color:var(--a-dim); font-size:11px; line-height:1.5; }
body.alt-app .aic-trust-li-ic{ flex:0 0 auto; display:flex; width:14px; height:14px; margin-top:2px; color:var(--a-green); }
body.alt-app .aic-trust-li-ic svg{ width:14px; height:14px; }

/* ---------- the explorer ---------- */

body.alt-app .aic-explorer{ display:flex; flex-direction:column; gap:var(--a-2); }
body.alt-app .aic-explorer-head{
  display:flex; align-items:flex-end; gap:var(--a-3); flex-wrap:wrap;
}
body.alt-app .aic-explorer-title{ min-width:0; }
body.alt-app .aic-explorer-title h2{ margin:0; font-size:15px; color:var(--a-text); }
body.alt-app .aic-explorer-title p{ margin:3px 0 0; color:var(--a-faint); font-size:11px; }

/* `.a-search` already centres its icon and pads the input (alt-components.css); this only
   sizes the box in the flex header and pins it to the trailing edge, opposite the title. */
body.alt-app .aic-search{ width:min(320px, 100%); margin-left:auto; }

body.alt-app .aic-filters{ display:flex; flex-wrap:wrap; gap:6px; }
/* `.a-chip` supplies the geometry, `.on` wash and focus ring; this adds only what a FILTER use
   needs — no clamp to the chip's default 170px max-width, and a fixed icon slot. */
body.alt-app .aic-filter{ max-width:none; }
body.alt-app .aic-filter-ic{ display:flex; width:13px; height:13px; flex:0 0 auto; }
body.alt-app .aic-filter-ic svg{ width:13px; height:13px; }

body.alt-app .aic-results-meta{ margin:0; color:var(--a-faint); font-size:11px; }

body.alt-app .aic-grid{
  display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:var(--a-3);
}
body.alt-app .aic-grid[hidden]{ display:none; }

/* ---------- one capability card ---------- */

body.alt-app .aic-card{
  display:grid; grid-template-columns:36px minmax(0, 1fr); gap:10px;
  padding:var(--a-3); border:1px solid var(--a-line-soft); border-radius:var(--a-r);
  background:var(--a-raised);
}
body.alt-app .aic-card-icon{
  width:36px; height:36px; display:flex; align-items:center; justify-content:center;
  border-radius:var(--a-r-sm);
}
body.alt-app .aic-card-icon svg{ width:17px; height:17px; }
/* The four-token pairing this file's own header explains. */
body.alt-app .aic-card-icon-write,
body.alt-app .aic-card-icon-okrs{ color:var(--a-blue-text); background:var(--a-blue-soft); }
body.alt-app .aic-card-icon-tasks,
body.alt-app .aic-card-icon-imports{ color:var(--a-green); background:var(--a-green-soft); }
body.alt-app .aic-card-icon-email{ color:var(--a-purple); background:var(--a-purple-soft); }
body.alt-app .aic-card-icon-summaries{ color:var(--a-amber); background:var(--a-amber-soft); }

body.alt-app .aic-card-body{ min-width:0; }
body.alt-app .aic-card-top{ display:flex; align-items:flex-start; flex-wrap:wrap; gap:8px; }
body.alt-app .aic-card-title{ margin:0; min-width:0; font:650 13px/1.35 var(--a-body); color:var(--a-text); }

/* "Automatic" — a word first, a chip second: meaning is never carried by colour alone, so the
   marker is a WORD and `.a-chip` merely frames it. */
body.alt-app .aic-auto{ flex:0 0 auto; margin-left:auto; color:var(--a-dim); cursor:default; }

body.alt-app .aic-card-desc{ margin:6px 0 0; color:var(--a-dim); font-size:12px; line-height:1.5; }

body.alt-app .aic-card-find{
  display:flex; align-items:flex-start; gap:6px;
  margin-top:var(--a-2); padding-top:var(--a-2); border-top:1px solid var(--a-line-soft);
  color:var(--a-faint); font-size:11px; line-height:1.5;
}
body.alt-app .aic-find-ic{ flex:0 0 auto; display:flex; width:12px; height:12px; margin-top:2px; color:var(--a-faint); }
body.alt-app .aic-find-ic svg{ width:12px; height:12px; }
body.alt-app .aic-find-label{ flex:0 0 auto; color:var(--a-dim); font-weight:650; white-space:nowrap; }

/* A job in the routing table with no description yet. The card still renders (see
   aiCapabilityRows() for why silently dropping it is worse) and says so, amber not red — an
   incomplete surface, not a broken one. Kept unreachable in practice by
   ai-capabilities-dialog.test.js's generation guard. */
body.alt-app .aic-card-undescribed .aic-find-text{ color:var(--a-amber); font-style:italic; }

/* ---------- the two empty states the explorer can show ---------- */

/* `.a-empty`/`.a-empty-h`/`.a-empty-p` are alt-components.css's own primitive (the suite's
   three-states pattern) — this only narrows the padding, since this empty state sits inside a
   panel that already has its own gutter. */
body.alt-app .aic-empty{ padding:var(--a-5) var(--a-3); }

/* ---------- the footer note ---------- */

body.alt-app .aic-foot-note{ display:flex; align-items:center; gap:7px; color:var(--a-faint); font-size:11px; }
body.alt-app .aic-foot-ic{ display:flex; width:13px; height:13px; color:var(--a-blue-text); }
body.alt-app .aic-foot-ic svg{ width:13px; height:13px; }

/* ---------- the toolbar trigger ----------
   Nothing calls aiCapabilitiesTrigger() today — the live entry point is the menu row
   (`.a-menu-item`, needs nothing from this sheet). Kept so a second host doesn't invent its own
   treatment. */
body.alt-app .aic-trigger{ display:inline-flex; align-items:center; gap:6px; }
body.alt-app .aic-trigger-ic{ flex:0 0 auto; display:flex; width:14px; height:14px; color:var(--a-blue-text); }
body.alt-app .aic-trigger-ic svg{ width:14px; height:14px; display:block; }
body.alt-app .aic-trigger-t{ white-space:nowrap; }

/* ================= NARROW ================= */

/* The intro row stacks earlier (820px) than the card grid (720px) — they answer different
   questions. The card grid stacks when a card gets unreadable; the intro row has to stack when
   the shorter panel starts being padded out by the taller one again, which happens sooner.
   Re-measure both numbers if the trust copy's length changes again — that is what caused this. */
@media (max-width: 820px){
  body.alt-app .aic-intro-grid{ grid-template-columns:1fr; }
}

@media (max-width: 720px){
  body.alt-app .aic-grid{ grid-template-columns:1fr; }
}

@media (max-width: 520px){
  body.alt-app .aic-scroll{ gap:var(--a-3); padding-right:0; }
  body.alt-app .aic-intro-panel,
  body.alt-app .aic-trust-panel{ padding:var(--a-3); }
  body.alt-app .aic-explorer-head{ align-items:stretch; }
  body.alt-app .aic-search{ width:100%; margin-left:0; }
  body.alt-app .aic-card{ grid-template-columns:30px minmax(0, 1fr); padding:var(--a-2); }
  body.alt-app .aic-card-icon{ width:30px; height:30px; }
  body.alt-app .aic-card-icon svg{ width:15px; height:15px; }
  body.alt-app .aic-auto{ margin-left:0; }
}