/* ============================================================
   meander — Design System
   Components
   Requires tokens.css. Flat, hairline-bordered, no shadows.
   ============================================================ */

/* ---- Base / reset ---- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
/* Das HTML-Attribut `hidden` MUSS verstecken — auch auf Elementen mit eigener
   display-Regel (z.B. .ds-login__redirect{display:flex}, .ds-login__notice). Ohne
   dies schlägt die Author-Regel die UA-Default-Regel [hidden]{display:none}, und der
   „Redirecting…"-Interstitial des Logins erschiene schon beim ersten Laden. */
[hidden] { display: none !important; }

.ds-root {
  background: var(--ds-bg);
  color: var(--ds-ink);
  font-family: var(--ds-font);
  font-size: var(--ds-text-base);
  line-height: var(--ds-leading-base);
  font-weight: var(--ds-weight-regular);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.ds-root ::selection { background: var(--ds-selection); }

/* Scrollbar */
.ds-root ::-webkit-scrollbar { width: 11px; height: 11px; }
.ds-root ::-webkit-scrollbar-thumb {
  background: var(--ds-line);
  border-radius: var(--ds-radius-lg);
  border: 3px solid var(--ds-bg);
}
.ds-root ::-webkit-scrollbar-thumb:hover { background: var(--ds-line-strong); }

/* ============================================================
   Typography helpers
   ============================================================ */
/* Headings use the heading token (raw tags + the DS heading classes the
   templates actually render). Same family as body in the current theme. */
h1, h2, h3,
.ds-title, .ds-h2, .ds-h3 { font-family: var(--ds-font-heading); }

.ds-title {
  font-size: var(--ds-text-2xl);
  font-weight: var(--ds-weight-semibold);
  letter-spacing: var(--ds-tracking-tight);
  margin: 0 0 var(--ds-space-3);
  color: var(--ds-ink);
}
.ds-title--detail { font-size: var(--ds-text-xl); letter-spacing: -0.01em; }

.ds-lede {
  color: var(--ds-ink-2);
  font-size: var(--ds-text-body);
  margin: 0 0 var(--ds-space-11);
  max-width: var(--ds-prose-max);
}
/* Wider measure for dense reference pages (the documented exception). */
.ds-lede--wide { max-width: var(--ds-prose-wide); }
.ds-h2 {
  font-size: var(--ds-text-md);
  font-weight: var(--ds-weight-semibold);
  margin: 0 0 var(--ds-space-6);
  color: var(--ds-ink);
}
.ds-h3 {
  font-size: var(--ds-text-md);
  font-weight: var(--ds-weight-semibold);
  margin: 0 0 var(--ds-space-2);
  color: var(--ds-ink);
}
.ds-label {
  font-size: var(--ds-text-xs);
  text-transform: uppercase;
  letter-spacing: var(--ds-tracking-label);
  color: var(--ds-ink-6);
}
.ds-muted { color: var(--ds-ink-4); }
.ds-faint { color: var(--ds-ink-5); }

/* ============================================================
   Buttons
   ============================================================ */
.ds-btn {
  font: inherit;
  font-size: var(--ds-text-base);
  font-weight: var(--ds-weight-medium);
  padding: var(--ds-space-4) var(--ds-space-8);
  border-radius: var(--ds-radius);
  border: 1px solid var(--ds-line-strong);
  background: transparent;
  color: var(--ds-ink);
  cursor: pointer;
  text-decoration: none;  /* <a class="ds-btn"> must not show the link underline */
  display: inline-block;
  transition: background .12s ease, border-color .12s ease;
}
.ds-btn:hover { background: var(--ds-hover); }

/* Primary = terracotta ghost (the one accented action) */
.ds-btn--primary {
  border-color: var(--ds-accent);
  color: var(--ds-accent);
}
.ds-btn--primary:hover { background: var(--ds-accent-tint); }

/* Secondary = neutral outline (default .ds-btn already is) */
.ds-btn--ghost { border-color: transparent; }
.ds-btn--ghost:hover { background: var(--ds-hover); }

.ds-btn:disabled,
.ds-btn[aria-disabled="true"] {
  opacity: 0.4;
  cursor: default;
}

/* Quiet inline row action (one consistent control for table-row actions). */
.ds-action {
  font: inherit;
  font-size: var(--ds-text-sm);
  font-weight: var(--ds-weight-regular);
  padding: var(--ds-space-1) var(--ds-space-3);
  border: none;
  background: transparent;
  color: var(--ds-ink-4);
  border-radius: var(--ds-radius-sm);
  cursor: pointer;
  white-space: nowrap;
  transition: background .12s ease, color .12s ease;
}
.ds-action:hover { background: var(--ds-hover); color: var(--ds-ink); }
.ds-action--danger:hover { color: var(--ds-negative); }

/* ============================================================
   Cards & panels
   ============================================================ */
.ds-card {
  background: var(--ds-surface);
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius-lg);
  padding: var(--ds-space-10);
}
.ds-panel {
  background: var(--ds-surface);
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius-xl);
  overflow: hidden;
}

/* Summary grid (key/value tiles split by hairlines) */
.ds-summary {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--ds-line);
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius-xl);
  overflow: hidden;
}
.ds-summary__cell { background: var(--ds-surface); padding: var(--ds-space-7) var(--ds-space-8); }
.ds-summary__key {
  font-size: var(--ds-text-xs);
  text-transform: uppercase;
  letter-spacing: var(--ds-tracking-label);
  color: var(--ds-ink-6);
  margin-bottom: var(--ds-space-2);
}
.ds-summary__val { font-size: var(--ds-text-md); color: var(--ds-ink); }

/* ============================================================
   Empty state — dashed placeholder for "nothing here yet".
   One pattern for the ~9 identical empty blocks across the app.
   ============================================================ */
.ds-empty {
  border: 1px dashed var(--ds-line-strong);
  border-radius: var(--ds-radius-lg);
  padding: var(--ds-space-16);
  text-align: center;
  color: var(--ds-ink-5);
  font-size: var(--ds-text-body);
}
.ds-empty--compact { padding: var(--ds-space-14); }

/* ============================================================
   Callout — inset info box on the darker surface
   ============================================================ */
.ds-callout {
  border: 1px solid var(--ds-line);
  background: var(--ds-inset);
  border-radius: var(--ds-radius-md);
  padding: var(--ds-space-5) var(--ds-space-7);
}
/* Flush variant: wraps its own padded header/disclosure (no box padding). */
.ds-callout--inset { padding: 0; overflow: hidden; }

/* ============================================================
   Status strip — a 3px rail on a card's left edge (one decision
   colour per state). Compose with .ds-card: class="ds-card ds-strip--positive".
   ============================================================ */
.ds-strip--accent   { border-left: 3px solid var(--ds-accent); }
.ds-strip--positive { border-left: 3px solid var(--ds-positive); }
.ds-strip--negative { border-left: 3px solid var(--ds-negative); }

/* ============================================================
   Layout utilities — a small, deliberate set (not a grid system).
   Replace the most-repeated inline flex/grid/spacing declarations.
   ============================================================ */
.ds-stack   { display: flex; flex-direction: column; gap: var(--ds-space-6); }
.ds-row     { display: flex; align-items: center; gap: var(--ds-space-3); flex-wrap: wrap; }
.ds-grid-2  { display: grid; grid-template-columns: 1fr 1fr; gap: var(--ds-space-6); }
.ds-section { margin-bottom: var(--ds-space-14); }

/* ============================================================
   Tables (grid-based rows)
   ============================================================ */
.ds-table {
  background: var(--ds-surface);
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius-lg);
  overflow: hidden;
}
.ds-table--nested { background: var(--ds-inset); border-radius: var(--ds-radius-md); }

.ds-table__head,
.ds-table__row {
  display: grid;
  gap: var(--ds-space-6);
  padding: var(--ds-space-5) var(--ds-space-8);
  align-items: center;
}
.ds-table__head {
  padding: var(--ds-space-4) var(--ds-space-8);
  font-size: var(--ds-text-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ds-ink-6);
  border-bottom: 1px solid var(--ds-line);
}
.ds-table__row {
  border-bottom: 1px solid var(--ds-line);
  font-size: var(--ds-text-sm);
}
.ds-table__row:last-child { border-bottom: none; }
.ds-table__row--clickable { cursor: pointer; transition: background .1s ease; }
.ds-table__row--clickable:hover { background: var(--ds-hover); }

/* Grid cells shrink instead of forcing the column wider (stops overlap). */
.ds-table__head > *, .ds-table__row > * { min-width: 0; }
/* Reusable single-line truncation for id / name / timestamp cells. */
.ds-cell--truncate { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ============================================================
   Inputs & selects
   ============================================================ */
.ds-input,
.ds-select {
  font: inherit;
  font-size: var(--ds-text-base);
  color: var(--ds-ink);
  background: var(--ds-inset);
  border: 1px solid var(--ds-line-strong);
  border-radius: var(--ds-radius);
  padding: var(--ds-space-4) var(--ds-space-5);
  transition: border-color .12s ease;
}
.ds-input::placeholder { color: var(--ds-ink-7); }
.ds-input:focus,
.ds-select:focus { outline: none; border-color: var(--ds-accent); }

/* Input sizing modifiers (compose with .ds-input) */
.ds-input--narrow     { flex: 1; min-width: var(--ds-input-min); }   /* grows, but never collapses */
.ds-input--fixed-md   { min-width: var(--ds-input-field-md); }       /* a single value input */
.ds-textarea--compact { width: 100%; min-height: var(--ds-textarea-min-h); }

/* ============================================================
   Status dot
   ============================================================ */
.ds-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
  display: inline-block;
}
.ds-dot--active { background: var(--ds-accent); }
.ds-dot--idle   { background: transparent; border: 1px solid var(--ds-ink-7); }

/* ============================================================
   Badges & tags
   ============================================================ */
.ds-tag {
  font-size: var(--ds-text-xs);
  color: var(--ds-ink-8);
  letter-spacing: 0.01em;
}
.ds-badge {
  font-size: var(--ds-text-sm);
  font-weight: var(--ds-weight-medium);
}
.ds-badge--positive { color: var(--ds-positive); }
.ds-badge--negative { color: var(--ds-negative); }
.ds-badge--accent   { color: var(--ds-accent); }

/* Keycap (⌘K etc.) */
.ds-key {
  font-size: 10.5px;
  color: var(--ds-ink-7);
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius-xs);
  padding: var(--ds-space-1) var(--ds-space-3);
}

/* ============================================================
   Navigation (sidebar)
   ============================================================ */
.ds-nav { display: flex; flex-direction: column; gap: 1px; }
.ds-nav__item {
  display: block;
  padding: var(--ds-space-3) var(--ds-space-5);
  border-radius: var(--ds-radius);
  font-size: var(--ds-text-md);
  text-decoration: none;
  cursor: pointer;
  color: var(--ds-ink-3);
  font-weight: var(--ds-weight-regular);
  background: transparent;
  transition: background .12s ease;
}
.ds-nav__item:hover { background: var(--ds-hover); }
.ds-nav__item--active {
  background: var(--ds-accent-tint);
  color: var(--ds-accent);
  font-weight: var(--ds-weight-medium);
}

/* ============================================================
   Segmented control (tabs)
   ============================================================ */
.ds-segmented {
  display: inline-flex;
  gap: var(--ds-space-1);
  background: var(--ds-surface);
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius-md);
  padding: var(--ds-space-1);
}
.ds-segmented__item {
  font-size: var(--ds-text-base);
  padding: var(--ds-space-2) var(--ds-space-6);
  border-radius: var(--ds-radius-sm);
  text-decoration: none;
  cursor: pointer;
  color: var(--ds-ink-4);
}
.ds-segmented__item--active {
  background: var(--ds-inset);
  color: var(--ds-ink);
  font-weight: var(--ds-weight-medium);
  box-shadow: 0 0 0 1px var(--ds-line);
}

/* ============================================================
   In-page tabs (button-driven, JS-toggled panels)
   Visually the segmented control; semantically a tablist that
   switches sections on one route without changing the URL.
   ============================================================ */
.ds-tabs {
  display: inline-flex;
  gap: var(--ds-space-1);
  background: var(--ds-surface);
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius-md);
  padding: var(--ds-space-1);
  margin-bottom: var(--ds-space-10);
}
.ds-tab {
  font: inherit;
  font-size: var(--ds-text-base);
  padding: var(--ds-space-2) var(--ds-space-6);
  border-radius: var(--ds-radius-sm);
  border: none;
  background: transparent;
  color: var(--ds-ink-4);
  cursor: pointer;
  transition: color .12s ease;
}
.ds-tab:hover { color: var(--ds-ink); }
.ds-tab.is-active {
  background: var(--ds-inset);
  color: var(--ds-ink);
  font-weight: var(--ds-weight-medium);
  box-shadow: 0 0 0 1px var(--ds-line);
}

/* ============================================================
   Link
   ============================================================ */
.ds-link {
  color: var(--ds-accent);
  text-decoration: underline;
  text-decoration-color: rgba(125,147,179,0.4);
  cursor: pointer;
}
.ds-link--quiet {
  color: var(--ds-ink-4);
  text-decoration: none;
}
.ds-link--quiet:hover { color: var(--ds-ink); }

/* ============================================================
   Proof disclosure (collapsible audit)
   ============================================================ */
.ds-disclosure { border-top: 1px solid var(--ds-line); }
.ds-disclosure > summary {
  cursor: pointer;
  padding: var(--ds-space-4) var(--ds-space-8);
  font-size: var(--ds-text-sm);
  color: var(--ds-ink-2);
  list-style: none;
  user-select: none;
}
.ds-disclosure > summary::-webkit-details-marker { display: none; }
.ds-disclosure > summary:hover { color: var(--ds-ink); }

/* Code / monospace-free identifier (kept in the brand sans on purpose) */
.ds-code { color: var(--ds-ink-4); }

/* ============================================================
   Auth shell — the standalone sign-in / denied pages. Same tokens
   and surface as the app; one centered card, no second mini-theme.
   ============================================================ */
.ds-auth { min-height: 100vh; display: flex; align-items: center; justify-content: center; }
.ds-auth__card {
  max-width: var(--ds-auth-card-max);
  width: 100%;
  padding: var(--ds-space-16);
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius-lg);
  background: var(--ds-surface);
  text-align: center;
}
.ds-auth__title { font-size: var(--ds-text-lg); font-weight: var(--ds-weight-semibold); color: var(--ds-ink); }
.ds-auth__subtitle { font-size: var(--ds-text-xs); color: var(--ds-ink-6); margin-top: var(--ds-space-1); margin-bottom: var(--ds-space-12); }
.ds-auth__msg { font-size: var(--ds-text-sm); color: var(--ds-ink-2); margin-bottom: var(--ds-space-8); }
.ds-auth__msg--error { color: var(--ds-negative); }

/* ============================================================
   Sign-in page (login_handoff spec §4). Pixel-exact: every value is
   from the spec; the only non-token colours are the provider brand
   marks. Errors are never red (red = decision polarity only); no
   shadows (hairlines only); transitions are .12s background only.
   ============================================================ */
.ds-login { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 32px; font-size: 13.5px; line-height: 1.55; -webkit-font-smoothing: antialiased; }
.ds-login__col { width: 100%; max-width: 392px; }

/* §2 brand block */
.ds-login__brand { text-align: center; margin-bottom: 30px; }
.ds-login__wordmark { font-family: var(--ds-font-heading); font-size: 30px; font-weight: 600; letter-spacing: -0.01em; line-height: 1; color: var(--ds-ink); }
.ds-login__tagline { font-size: 12.5px; color: var(--ds-ink-5); margin-top: 8px; }

/* §3 card */
.ds-login__card { border: 1px solid var(--ds-line); background: var(--ds-surface); border-radius: 12px; padding: 28px; }

/* §4A idle */
.ds-login__heading { font-size: 19px; font-weight: 600; letter-spacing: -0.01em; margin: 0 0 5px; }
.ds-login__subtext { font-size: 12.5px; line-height: 1.5; color: var(--ds-ink-3); margin: 0 0 22px; }
.ds-login__providers { display: flex; flex-direction: column; gap: 10px; }
.ds-provider-btn { display: flex; align-items: center; justify-content: center; gap: 11px; height: 46px; border: 1px solid var(--ds-line-strong); border-radius: 9px; background: var(--ds-inset); color: var(--ds-ink); font-size: 13.5px; font-weight: 500; cursor: pointer; text-decoration: none; transition: background .12s; }
.ds-provider-btn:hover { background: var(--ds-hover); }
.ds-provider-btn:focus-visible { outline: 2px solid var(--ds-accent); outline-offset: 2px; }
.ds-provider-btn svg { flex-shrink: 0; }
.ds-login__reassure { display: flex; align-items: flex-start; gap: 8px; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--ds-line); }
.ds-login__reassure-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ds-accent); flex-shrink: 0; margin-top: 5px; }
.ds-login__reassure-text { font-size: 11.5px; line-height: 1.55; color: var(--ds-ink-5); margin: 0; }
.ds-login__reassure-text .ds-em { color: var(--ds-ink-3); font-style: normal; } /* "reads": one ink step brighter, no italic */
.ds-login__footnote { text-align: center; font-size: 11.5px; color: var(--ds-ink-6); margin: 20px 0 0; line-height: 1.5; }

/* §4C session notice (and the flow-error message: neutral, never red) */
.ds-login__notice { display: flex; align-items: flex-start; gap: 9px; border: 1px solid var(--ds-line); background: var(--ds-inset); border-radius: 9px; padding: 12px 14px; margin-bottom: 18px; }
.ds-login__notice-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ds-ink-5); flex-shrink: 0; margin-top: 5px; }
.ds-login__notice-text { font-size: 12.5px; line-height: 1.5; color: var(--ds-ink-2); }

/* §4B redirecting (client-side post-click interstitial) */
.ds-login__redirect { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 14px 0 6px; }
.ds-login__spinner { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--ds-line-strong); border-top-color: var(--ds-accent); animation: ds-mspin .8s linear infinite; margin-bottom: 16px; }
@keyframes ds-mspin { to { transform: rotate(360deg); } }
.ds-login__redirect-l1 { font-size: 13.5px; color: var(--ds-ink); margin-bottom: 4px; }
.ds-login__redirect-l2 { font-size: 12px; color: var(--ds-ink-5); margin-bottom: 18px; }
.ds-login__back { font-size: 12.5px; color: var(--ds-ink-4); cursor: pointer; text-decoration: none; background: none; border: none; padding: 0; font-family: inherit; }
.ds-login__back:hover { color: var(--ds-ink); }

/* §4D access denied */
.ds-login__denied-head { display: flex; align-items: center; gap: 9px; margin-bottom: 14px; }
.ds-login__denied-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ds-accent); flex-shrink: 0; }
.ds-login__denied-title { font-size: 19px; font-weight: 600; letter-spacing: -0.01em; margin: 0; }
.ds-login__denied-l1 { font-size: 13px; line-height: 1.6; color: var(--ds-ink-2); margin: 0 0 8px; }
.ds-login__denied-l2 { font-size: 12.5px; line-height: 1.6; color: var(--ds-ink-4); margin: 0 0 22px; }
.ds-login__denied-action { display: flex; align-items: center; justify-content: center; height: 44px; border: 1px solid var(--ds-line-strong); border-radius: 9px; background: var(--ds-inset); color: var(--ds-ink); font-size: 13px; font-weight: 500; cursor: pointer; text-decoration: none; transition: background .12s; }
.ds-login__denied-action:hover { background: var(--ds-hover); }
.ds-login__denied-action:focus-visible { outline: 2px solid var(--ds-accent); outline-offset: 2px; }

/* §4E signed-in identity menu (sidebar foot, app pages) */
.ds-account { position: relative; }
.ds-account__trigger { display: flex; align-items: center; gap: 9px; width: 100%; padding: 7px 8px; border-radius: 7px; cursor: pointer; background: none; border: none; text-align: left; list-style: none; }
.ds-account__trigger::-webkit-details-marker { display: none; }
.ds-account__trigger:hover { background: var(--ds-surface); }
.ds-account[open] .ds-account__trigger { background: var(--ds-surface); }
.ds-account__avatar { width: 25px; height: 25px; border-radius: 50%; background: var(--ds-accent-tint); color: var(--ds-accent); font-size: 10px; font-weight: 600; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ds-account__id { display: block; flex: 1; min-width: 0; }
.ds-account__name { display: block; font-size: 12px; color: var(--ds-ink); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ds-account__email { display: block; font-size: 10.5px; color: var(--ds-ink-6); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ds-account__caret { font-size: 11px; color: var(--ds-ink-6); flex-shrink: 0; }
.ds-account__caret::before { content: "\25B8"; } /* ▸ */
.ds-account[open] .ds-account__caret::before { content: "\25BE"; } /* ▾ */
.ds-account__popover { position: absolute; bottom: 100%; left: 0; right: 0; margin-bottom: 8px; border: 1px solid var(--ds-line-strong); background: var(--ds-surface); border-radius: 10px; padding: 6px; }
.ds-account__pop-id { display: flex; align-items: center; gap: 10px; padding: 9px 9px 11px; }
.ds-account__pop-avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--ds-accent-tint); color: var(--ds-accent); font-size: 12px; font-weight: 600; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ds-account__pop-idtext { display: block; min-width: 0; flex: 1; }
.ds-account__pop-name { display: block; font-size: 12.5px; color: var(--ds-ink); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ds-account__pop-email { display: block; font-size: 11px; color: var(--ds-ink-5); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ds-account__provider { display: flex; align-items: center; gap: 7px; padding: 0 9px 9px; border-bottom: 1px solid var(--ds-line); }
.ds-account__provider-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--ds-ink-6); flex-shrink: 0; }
.ds-account__provider-text { font-size: 11px; color: var(--ds-ink-5); }
.ds-account__menu { margin-top: 6px; }
.ds-account__item { display: block; padding: 8px 9px; border-radius: 6px; font-size: 12.5px; color: var(--ds-ink-1); text-decoration: none; }
.ds-account__item:hover { background: var(--ds-hover); }

/* ============================================================
   Fleet (Agents home) + Connect-agent flow (agents-page spec).
   Reuses ds-summary (KPI tiles), ds-table (fleet card), ds-dot,
   ds-btn--primary (accent outline), ds-input, ds-terminal (the one
   --ds-inset code surface). Only the additions below are new.
   ============================================================ */
/* Fleet KPI numbers are larger than the generic summary tiles (spec §1B: 20px/600). */
.ds-summary--kpi .ds-summary__val { font-size: var(--ds-text-xl); font-weight: var(--ds-weight-semibold); letter-spacing: -0.02em; }

/* Live pulse — fleet "polling every 2s" dot + connect "waiting" dot (spec §1C/§2). */
@keyframes ds-mpulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
.ds-pulse { animation: ds-mpulse 2s ease-in-out infinite; }

/* Agent lifecycle "Manage" popover (agent-detail §1B trigger + agents-page §2.5
   popover). Quiet secondary trigger (no fill, no caret — subordinate to the fleet's
   one primary Connect action); the reveal/confirm cards render in a slot below. */
.ds-manage { position: relative; }
.ds-manage__trigger { display: inline-flex; align-items: center; border: 1px solid var(--ds-line-strong); background: transparent; color: var(--ds-ink-2); border-radius: 6px; padding: 7px 13px; font-size: 12.5px; font-weight: 500; cursor: pointer; list-style: none; white-space: nowrap; }
.ds-manage__trigger::-webkit-details-marker { display: none; }
.ds-manage__trigger:hover { background: var(--ds-hover); color: var(--ds-ink); }
.ds-manage__popover { position: absolute; top: 100%; right: 0; margin-top: 6px; width: 212px; border: 1px solid var(--ds-line-strong); background: var(--ds-surface); border-radius: 9px; padding: 6px; z-index: 5; }
.ds-manage__item { display: block; width: 100%; text-align: left; padding: 8px 9px; border-radius: 6px; font-size: 12.5px; color: var(--ds-ink-1); text-decoration: none; cursor: pointer; background: none; border: 0; font-family: inherit; }
.ds-manage__item:hover { background: var(--ds-hover); }
.ds-manage__divider { height: 1px; background: var(--ds-line); margin: 6px 0; border: 0; }

/* ============================================================
   Terminal / env block (inset, dark)
   ============================================================ */
.ds-terminal {
  background: var(--ds-inset);
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius-md);
  padding: var(--ds-space-7) var(--ds-space-8);
  font-size: var(--ds-text-sm);
  color: var(--ds-ink);
  line-height: var(--ds-leading-loose);
  overflow-x: auto;
}
.ds-terminal .ds-terminal__key { color: var(--ds-ink-5); }