/* ============================================================
   agent-shell.css — shared shell + nav + trust primitives.
   Copied VERBATIM from packages/design-system/agent-shell/agent-shell.css.
   Do not restyle: the agent-shell components render through these classes,
   and the repo is the source of truth for every value here.

   All classes are prefixed `.ds-` and reference the Confident Workshop token
   custom properties (--color-*, --font-*) from tokens/workshop.css.

   FLAT only: no gradients / glass / glow. Depth via hairline borders
   + surface steps. State is always icon + label + color (WCAG AA).
   RTL-safe: logical properties throughout. Honors reduced-motion.
   ============================================================ */

.ds-shell,
.ds-shell *,
.ds-shell *::before,
.ds-shell *::after { box-sizing: border-box; }

.ds-ico svg { display: block; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ds-mono { font-family: var(--font-mono); }

/* ── shell: persistent agent header card ── */
.ds-shell {
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: 20px;
  overflow: hidden;
  font-family: var(--font-sans);
  color: var(--color-text);
}
.ds-shead { display: flex; gap: 20px; align-items: flex-start; justify-content: space-between; padding: 22px 24px; flex-wrap: wrap; }
.ds-brandline { display: flex; align-items: center; gap: 10px; }
.ds-leaf { width: 22px; height: 22px; border-radius: 6px; background: var(--color-accent); position: relative; flex-shrink: 0; }
.ds-leaf::after { content: ""; position: absolute; inset-block-start: 5px; inset-inline-end: 5px; width: 5px; height: 5px; border-radius: 50%; background: var(--color-bg-elevated); }
.ds-brandline .ds-nm { font-weight: 600; font-size: 15px; letter-spacing: -0.01em; }
.ds-ctxpill { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--color-text-muted); border: 1px solid var(--color-border); border-radius: 20px; padding: 4px 10px; }
.ds-idtitle { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin-block-start: 16px; }
.ds-idtitle h1 { font-family: var(--font-serif); font-weight: 600; font-size: clamp(28px, 4.4vw, 42px); line-height: 1.02; letter-spacing: -0.02em; margin: 0; }
.ds-ver { font-family: var(--font-mono); font-size: 11px; color: var(--color-text-subtle); padding-block-end: 5px; }
.ds-idsub { color: var(--color-text-muted); font-size: 13.5px; margin-block-start: 8px; max-width: 60ch; }
.ds-sactions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

/* ── status pill (color + dot + LABEL) ── */
.ds-statepill { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 8px; font-weight: 600; font-size: 12.5px; border: 1px solid var(--color-border); }
.ds-statepill .ds-sd { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.ds-statepill.ds-tone-live { color: var(--color-ok); background: var(--color-ok-soft); border-color: transparent; }
.ds-statepill.ds-tone-paused { color: var(--color-text-muted); background: var(--color-surface-2); border-color: transparent; }
.ds-statepill.ds-tone-error { color: var(--color-err); background: var(--color-err-soft); border-color: transparent; }
.ds-statepill.ds-tone-ok { color: var(--color-ok); background: var(--color-ok-soft); border-color: transparent; }
.ds-statepill.ds-tone-warn { color: var(--color-warn); background: var(--color-warn-soft); border-color: transparent; }
.ds-statepill.ds-tone-neutral { color: var(--color-text-muted); background: var(--color-surface-2); border-color: transparent; }

/* ── tab nav docked under header — 3 phases ── */
.ds-tabdock { border-block-start: 1px solid var(--color-border); background: var(--color-bg-secondary); padding: 10px 14px; display: flex; gap: 16px; align-items: center; overflow-x: auto; scroll-snap-type: x mandatory; }
.ds-phase { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.ds-plabel { font-family: var(--font-mono); font-size: 9px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--color-text-subtle); padding-inline-end: 8px; border-inline-end: 1px solid var(--color-border); white-space: nowrap; }
.ds-grp { display: flex; gap: 3px; }
.ds-tab { display: inline-flex; align-items: center; gap: 7px; padding: 8px 11px; border-radius: 8px; font-weight: 600; font-size: 13px; color: var(--color-text-muted); transition: background .14s, color .14s; white-space: nowrap; scroll-snap-align: start; border: 1px solid transparent; cursor: pointer; font-family: inherit; background: none; }
.ds-tab:hover { color: var(--color-text); background: var(--color-hover); }
.ds-tab.ds-on { background: var(--color-bg-elevated); color: var(--color-text); border-color: var(--color-accent-soft); }
.ds-tab .ds-ico svg { width: 15px; height: 15px; }
.ds-tab .ds-ct { font-family: var(--font-mono); font-size: 10.5px; color: var(--color-text-subtle); }
.ds-tab.ds-on .ds-ct { color: var(--color-accent); }
.ds-tab:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

/* ── buttons ── */
.ds-btn { display: inline-flex; align-items: center; gap: 8px; padding: 9px 15px; border-radius: 9px; font-weight: 600; font-size: 13.5px; border: 1px solid var(--color-border-2); background: var(--color-bg-secondary); color: var(--color-text); transition: background .16s; cursor: pointer; font-family: inherit; }
.ds-btn:hover { background: var(--color-hover); }
.ds-btn:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.ds-btn:disabled { cursor: not-allowed; opacity: .55; background: var(--color-bg-secondary); }
.ds-btn:disabled:hover { background: var(--color-bg-secondary); }
.ds-btn .ds-ico svg { width: 16px; height: 16px; }
.ds-btn-primary { background: var(--color-accent); color: #fff; border-color: transparent; }
.ds-btn-primary:hover { background: var(--color-accent-hover); }
.ds-btn-primary:disabled { background: color-mix(in srgb, var(--color-accent) 40%, var(--color-bg-secondary)); color: color-mix(in srgb, #fff 70%, transparent); opacity: 1; }
.ds-btn-primary:disabled:hover { background: color-mix(in srgb, var(--color-accent) 40%, var(--color-bg-secondary)); }
.ds-btn-sm { padding: 6px 11px; font-size: 12.5px; border-radius: 8px; }

/* ── trust primitives ── */
/* permission-scope chip */
.ds-scope { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 20px; border: 1px solid var(--color-border); color: var(--color-text-muted); background: var(--color-bg-elevated); }
.ds-scope .ds-ico svg { width: 12px; height: 12px; }
.ds-scope.ds-ask { color: var(--color-warn); background: var(--color-warn-soft); border-color: transparent; }
.ds-scope.ds-auto { color: var(--color-ok); background: var(--color-ok-soft); border-color: transparent; }
.ds-scope.ds-off { color: var(--color-text-subtle); }

/* test-result badge */
.ds-tbadge { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 7px; }
.ds-tbadge .ds-ico svg { width: 12px; height: 12px; }
.ds-tbadge.ds-pass { color: var(--color-ok); background: var(--color-ok-soft); }
.ds-tbadge.ds-fail { color: var(--color-err); background: var(--color-err-soft); }
.ds-tbadge.ds-pending { color: var(--color-warn); background: var(--color-warn-soft); }
.ds-tbadge.ds-skip { color: var(--color-text-subtle); background: var(--color-surface-2); }

/* confidence / accuracy readout */
.ds-readout { display: grid; gap: 5px; }
.ds-readout .ds-rtop { display: flex; align-items: center; justify-content: space-between; font-size: 12px; gap: 10px; }
.ds-readout .ds-rl { color: var(--color-text-muted); font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
.ds-readout .ds-rl .ds-ico svg { width: 14px; height: 14px; }
.ds-readout .ds-rv { font-family: var(--font-mono); font-size: 12px; color: var(--color-text); }
.ds-readout .ds-track { height: 6px; border-radius: 6px; background: var(--color-surface-2); overflow: hidden; }
.ds-readout .ds-track i { display: block; height: 100%; border-radius: 6px; background: var(--color-accent); }
.ds-readout.ds-tone-warn .ds-track i { background: var(--color-warn); }
.ds-readout.ds-tone-ok .ds-track i { background: var(--color-ok); }
.ds-readout .ds-rnote { font-size: 11px; color: var(--color-text-subtle); }

/* approval card */
.ds-approval { border: 1px solid var(--color-warn-soft); background: var(--color-warn-soft); border-radius: 9px; padding: 14px 16px; }
.ds-approval.ds-resolved { border-color: var(--color-border); background: var(--color-surface-2); opacity: .75; }
.ds-approval .ds-ah { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 12.5px; color: var(--color-warn); }
.ds-approval.ds-resolved .ds-ah { color: var(--color-ok); }
.ds-approval .ds-ah .ds-ico svg { width: 14px; height: 14px; }
.ds-approval .ds-at { font-weight: 600; font-size: 13.5px; margin-block-start: 7px; }
.ds-approval .ds-apv { margin: 9px 0; font-size: 12.5px; color: var(--color-text-muted); background: rgba(20, 22, 22, 0.04); border-radius: 7px; padding: 9px 11px; line-height: 1.5; }
.ds-approval .ds-ameta { font-size: 11px; color: var(--color-text-subtle); font-family: var(--font-mono); margin-block-start: 2px; }
.ds-approval .ds-abtns { display: flex; gap: 8px; margin-block-start: 11px; flex-wrap: wrap; }

/* enable/disable toggle */
.ds-tg { width: 42px; height: 24px; border-radius: 20px; background: var(--color-surface-2); border: 1px solid var(--color-border); position: relative; flex-shrink: 0; transition: background .15s; cursor: pointer; padding: 0; }
.ds-tg .ds-kn { position: absolute; inset-block-start: 2px; inset-inline-start: 2px; width: 18px; height: 18px; border-radius: 50%; background: var(--color-text-subtle); transition: inset-inline-start .15s, background .15s; }
.ds-tg.ds-on { background: var(--color-accent-soft); border-color: transparent; }
.ds-tg.ds-on .ds-kn { inset-inline-start: 20px; background: var(--color-accent); }
.ds-tg:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .ds-shell *, .ds-tab, .ds-btn, .ds-tg, .ds-tg .ds-kn { transition-duration: .001ms !important; }
}

@media (max-width: 560px) {
  .ds-shead { padding: 18px 16px; }
}