/* Instrument Sans and the type scale follow the OpenClaw console. */
@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("./fonts/instrument-sans-latin.woff2") format("woff2");
}
:root {
  color-scheme: light;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: 1.5;
  font-synthesis: none;
  color: var(--text);
  background: var(--color-canvas);
  /* Colour roles shared by the Console, its controls and its navigation. */
  --color-bg: #f7f5f0;
  /* Themes with a translucent background resolve it over Canvas once, for both root and body. */
  --color-canvas: var(--color-bg);
  --color-surface: #ffffff;
  --color-surface-2: #f1f4f6;
  --color-surface-hover: #eaf1f6;
  --color-border: #d4d9dc;
  --color-border-strong: #7e8c99;
  --color-text: #293847;
  --color-text-strong: #202e40;
  --color-text-muted: #566573;
  --color-accent: #b53d2a;
  --color-accent-hover: #963322;
  --color-accent-subtle: rgba(181, 61, 42, 0.09);
  --color-on-accent: #ffffff;
  --color-link: #245784;
  --color-success: #166534;
  --color-success-subtle: rgba(22, 101, 52, 0.08);
  --color-warning: #92400e;
  --color-warning-subtle: #fff4df;
  --color-danger: #b91c1c;
  --color-danger-subtle: rgba(185, 28, 28, 0.08);
  --color-info: #193e61;
  --color-info-subtle: #e8f1f9;
  /* One tint and opacity for the translucent backdrop and its colour over the page canvas. */
  --color-overlay-mix: #0f172a 40%;
  --color-overlay: color-mix(in srgb, var(--color-overlay-mix), transparent);
  --color-focus: var(--color-link);
  /* Inverse surfaces use the same palette with light text, selection and focus. */
  --color-surface-inverse: var(--color-text-strong);
  --color-on-inverse: var(--color-surface);
  --color-on-inverse-muted: color-mix(in srgb, var(--color-surface) 82%, var(--color-info));
  --color-inverse-hover: color-mix(in srgb, var(--color-surface-inverse) 86%, var(--color-surface));
  --color-inverse-selected: color-mix(in srgb, var(--color-link) 65%, var(--color-surface-inverse));
  --color-inverse-marker: color-mix(in srgb, var(--color-accent) 48%, var(--color-surface));
  --color-focus-inverse: color-mix(in srgb, var(--color-focus) 25%, var(--color-surface));
  /* Type: size and its line height. */
  --font-sans: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --text-xs: 11px;
  --text-xs--line-height: 1.4;
  --text-sm: 12px;
  --text-sm--line-height: 1.5;
  --text-md: 13px;
  --text-md--line-height: 1.5;
  --text-base: 14px;
  --text-base--line-height: 1.5;
  --text-lg: 16px;
  --text-lg--line-height: 1.4;
  --text-xl: 18px;
  --text-xl--line-height: 1.3;
  --text-2xl: 24px;
  --text-2xl--line-height: 1.2;
  --text-display: clamp(27px, 3vw, 36px);
  --text-display--line-height: 1.12;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --tracking-tight: -0.02em;
  --tracking-caps: 0.08em;
  /* Spacing: 4px grid. */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  /* Shape, elevation, motion, focus, controls, layout. */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-pill: 999px;
  --shadow-1: 0 8px 24px rgba(60, 42, 24, 0.09);
  --shadow-2: 0 16px 48px rgba(60, 42, 24, 0.18);
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --focus-ring: 2px solid var(--color-focus);
  --focus-offset: 2px;
  --focus-offset-inset: -3px;
  --control-h: 40px;
  --control-h-sm: 32px;
  --touch-min: 44px;
  --content-max: 1300px;
  --form-max: 960px;
  --prose-max: 640px;
  --sidebar-w: 258px;
  /* Breakpoints (media queries cannot read custom properties): phone <= 520px,
     tablet <= 760px, desktop <= 1100px. */
  /* Older names, kept as aliases until every rule uses the tokens above. */
  --bg: var(--color-bg);
  --surface: var(--color-surface);
  --surface-muted: var(--color-surface-2);
  --hover: var(--color-surface-hover);
  --text: var(--color-text);
  --text-strong: var(--color-text-strong);
  --muted: var(--color-text-muted);
  --line: var(--color-border);
  --input-border: var(--color-border-strong);
  --accent: var(--color-accent);
  --accent-subtle: var(--color-accent-subtle);
  --primary: var(--color-accent);
  --primary-hover: var(--color-accent-hover);
  --on-primary: var(--color-on-accent);
  --success: var(--color-success);
  --success-subtle: var(--color-success-subtle);
  --danger: var(--color-danger);
  --danger-subtle: var(--color-danger-subtle);
  --warning: var(--color-warning);
  --warning-subtle: var(--color-warning-subtle);
  --overlay: var(--color-overlay);
  --shadow: var(--shadow-1);
  --radius: var(--radius-md);
  /* Keep desktop pages aligned when a classic scrollbar comes and goes (finding 1520). */
  scrollbar-gutter: stable;
}
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 1ms;
    --duration-base: 1ms;
  }
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  background: var(--color-canvas);
}
button,
input,
select,
textarea {
  font: inherit;
}
input,
select,
textarea,
dialog {
  color: var(--text);
  background: var(--surface);
}
input::placeholder,
textarea::placeholder {
  color: var(--muted);
  opacity: 1;
}
input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--accent);
}
button,
a,
input {
  -webkit-tap-highlight-color: transparent;
}
button,
a {
  touch-action: manipulation;
}
/* Links keep their underline in prose. A component can set its own link treatment. */
:where(a) {
  color: var(--color-link);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: color-mix(in srgb, currentColor 60%, transparent);
}
:where(a:hover) {
  text-decoration-color: currentColor;
}
/* Button hierarchy (UX plan C2). A plain button is the secondary tone, edged at 3:1 against the
   surface; .button gives a link the same chrome. Tones: --primary (accent fill, at most one per
   view), --ghost (no edge: toolbars and Refresh), --danger (destructive), --link (inline text).
   --sm is the toolbar size. .primary, .overview-primary and .danger are older names for
   --primary and --danger, kept until every caller and test uses the new ones. */
button,
.button,
.primary,
.overview-primary {
  color: inherit;
  cursor: pointer;
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3);
  font-weight: var(--weight-medium);
}
/* Low specificity, so a tone's own colour wins. */
:where(a.button, a.primary, a.overview-primary) {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-text-strong);
  text-decoration: none;
}
button:not(:disabled, [aria-disabled="true"]):hover,
a.button:hover {
  background: var(--color-surface-hover);
}
.button--primary,
.primary,
.overview-primary {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-on-accent);
}
a.button--primary,
a.primary,
a.overview-primary {
  color: var(--color-on-accent);
}
/* Tone hovers name the element so they outrank the plain button hover above. */
button.button--primary:not(:disabled, [aria-disabled="true"]):hover,
button.primary:not(:disabled, [aria-disabled="true"]):hover,
a.button--primary:hover,
a.primary:hover,
a.overview-primary:hover {
  background: var(--color-accent-hover);
  border-color: var(--color-accent-hover);
}
.button--ghost {
  border-color: transparent;
  background: transparent;
}
.button--danger,
.danger {
  color: var(--color-danger);
  border-color: var(--color-danger);
}
button.button--danger:not(:disabled):hover,
button.danger:not(:disabled):hover {
  color: var(--color-danger);
  background: var(--color-danger-subtle);
}
.button--danger:disabled {
  background: var(--color-surface-2);
  color: var(--color-text-muted);
  border-color: var(--color-border);
}
.button--link {
  padding: var(--space-1) var(--space-2);
  border-color: transparent;
  background: none;
}
/* Disclosures that open more detail read as link buttons, not accent text. */
.button--link,
.native-document > summary,
.plugin-access-details > summary {
  color: var(--color-link);
  text-decoration: underline;
  text-underline-offset: 3px;
}
button.button--link:not(:disabled):hover,
a.button.button--link:hover {
  background: none;
}
.button--sm {
  min-height: var(--control-h-sm);
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-md);
  line-height: var(--text-md--line-height);
}
/* One disabled style and one busy cursor: disabled means "not now", busy means "working". The busy
   cursor is for buttons only: a whole page or list marked busy keeps its cursor, so a load that
   settles quickly never flashes it (findings 1444, 1447). */
button:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}
.agent-card[inert] button {
  cursor: not-allowed;
  opacity: 0.6;
}
[aria-busy="true"] button:disabled,
button[aria-busy="true"] {
  cursor: progress;
}
/* One focus ring for every control. Rows and panes that sit against an edge use the inset offset
   (.focus-inset, or listed here); wrappers that draw the ring for a borderless child use the
   normal one. Items inside a scrolling list or tab strip are inset too: the scroller clips
   anything drawn outside it. */
:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}
.focus-inset:focus-visible,
.focus-inset:has(input:focus-visible),
.agent-tabs button:focus-visible,
.log-pane:focus-visible,
.plugin-list-item:focus-visible,
.repository-card-toggle:focus-visible,
.repository-result:has(input:focus-visible),
.slack-directory-result.active,
.version-item:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset-inset);
}
.slack-directory-input:has(input:focus-visible),
.resource-linked:has(.resource-name :focus-visible),
.repository-option:has(:focus-visible),
.repository-profile:has(:focus-visible) {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}
[hidden] {
  display: none !important;
}
h1,
h2,
p {
  margin-top: 0;
}
h1 {
  color: var(--text-strong);
  font-size: var(--text-2xl);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
  margin-bottom: var(--space-3);
}
h2 {
  color: var(--text-strong);
  font-size: var(--text-xl);
  font-weight: var(--weight-medium);
}
p {
  line-height: 1.6;
}
.muted,
.scope {
  color: var(--muted);
}
.startup {
  /* Padding, not margin: a margin collapses through #app and body, so the page jumps when it is replaced. */
  margin: 0;
  padding: calc(14vh + var(--space-8)) var(--space-8);
  color: var(--muted);
  text-align: center;
  /* A load that settles within the loading delay never flashes its status (finding 1444). Full
     loads took up to 274 ms, past the 250 ms other statuses wait, so the boot status waits
     400 ms (finding 1519). Visibility, not opacity: it appears whole, never half-faded. */
  animation: loading-delay 400ms;
}
/* A page held on screen, inert, while a navigation's reads run. Past 300 ms it dims and shows
   a progress cursor, so a slow return does not look stuck; opacity and cursor only, so nothing
   moves (finding 1447). A refocus recheck does not set .holding and keeps its look. */
.content.holding:has(> [aria-live="polite"][inert]) {
  cursor: progress;
}
.content.holding > [aria-live="polite"][inert] {
  animation: held-busy 200ms ease-out 300ms both;
}
@keyframes held-busy {
  from {
    opacity: 1;
  }
  to {
    opacity: 0.6;
  }
}
@media (prefers-reduced-motion: reduce) {
  .content.holding > [aria-live="polite"][inert] {
    animation-duration: 1ms;
  }
}
/* Loading text that appears only if its read outlasts 250 ms (findings 1444, 1449). */
.delayed-status {
  animation: loading-delay 250ms;
}
@keyframes loading-delay {
  from,
  to {
    visibility: hidden;
  }
}
/* The same delay for the text of a node that can take focus: transparent, not hidden, so a
   screen reader still reads it (finding 1656). */
.delayed-text {
  animation: loading-delay-text 250ms;
}
@keyframes loading-delay-text {
  from,
  to {
    opacity: 0;
  }
}
/* Sign-in (UX spec 3.12): one card, a 16 px gutter on a phone, and the build in a muted footer. */
.auth {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  width: calc(100% - 2 * var(--space-4));
  max-width: 410px;
  margin: 14vh auto var(--space-4);
  padding: var(--space-8);
}
.auth h1 {
  font-size: var(--text-2xl);
  margin-bottom: var(--space-2);
}
.auth .auth-intro {
  margin-bottom: 0;
}
.auth .brand {
  margin-bottom: var(--space-10);
}
.auth-footer {
  margin: var(--space-6) auto var(--space-10);
  padding: 0 var(--space-4);
  text-align: center;
  font-size: var(--text-sm);
  line-height: var(--text-sm--line-height);
  color: var(--color-text-muted);
}
@media (max-width: 520px) {
  .auth {
    padding: var(--space-6);
  }
}
/* The wordmark, shared by navigation and sign-in. */
.brand {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--color-text-strong);
  margin-bottom: var(--space-10);
}
.brand img {
  flex: none;
  object-fit: contain;
}
.brand-name {
  min-width: 0;
  overflow-wrap: anywhere;
}
.brand--bar .brand-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.auth label {
  display: block;
  font-weight: var(--weight-medium);
  margin: var(--space-6) 0 var(--space-2);
}
.auth input {
  display: block;
  width: 100%;
  min-height: var(--control-h);
  border: 1px solid var(--input-border);
  border-radius: var(--radius);
  padding: var(--space-2) var(--space-3);
  background: var(--surface);
  color: inherit;
}
.hint {
  display: block;
  margin-top: var(--space-2);
  font-size: var(--text-md);
  color: var(--muted);
}
.auth .primary,
.auth .button--primary {
  width: 100%;
  margin-top: var(--space-8);
}
.auth-providers button {
  width: 100%;
  margin-top: var(--space-4);
}
.auth-provider-icon {
  width: 18px;
  height: 18px;
  margin-right: var(--space-3);
  vertical-align: middle;
  background: var(--color-surface);
}
.auth-google-colors {
  width: 100%;
  height: 100%;
  background: conic-gradient(
    #ff4641,
    #fd5061 40deg,
    #fd5061 60deg,
    #3186ff 85deg,
    #3186ff 117deg,
    #00a5b7 142deg,
    #0ebc5f 167deg,
    #0ebc5f 200deg,
    #6cc500 226deg,
    #fc0 253deg,
    #ffd314 268deg,
    #fc0 292deg,
    #ff4641 327deg
  );
}
.auth .auth-recovery {
  display: block;
  margin: var(--space-5) auto 0;
}
.error {
  color: var(--danger);
  margin-top: var(--space-5);
  /* Refusals name long setting paths and request IDs; wrap them in a phone-width card. */
  overflow-wrap: anywhere;
}
/* A field's own error sits under its control, above its help, not after the form (finding
   1903): danger text, linked by aria-describedby, with aria-invalid on the control. */
.field-error {
  margin: var(--space-1) 0 0;
  font-size: var(--text-md);
  color: var(--color-danger);
  overflow-wrap: anywhere;
}
[aria-invalid="true"]:not([type="checkbox"]):not([type="radio"]) {
  border-color: var(--color-danger);
}
/* Status block (UX plan C1): an error, warning or notice. A stripe in the tone's colour on its
   subtle wash; the text stays in the body colour, and only the label takes the tone. Built by
   statusBlock() in dom.mjs; data-tone is info, success, warning or danger. */
.status {
  --status-tone: var(--color-text-muted);
  --status-wash: var(--color-surface-2);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--status-tone);
  border-radius: var(--radius-md);
  background: var(--status-wash);
  color: var(--color-text);
  font-size: var(--text-base);
  line-height: var(--text-base--line-height);
  /* Refusals name long setting paths and request IDs; wrap them in a phone-width card. */
  overflow-wrap: anywhere;
  /* A refusal scrolled into view keeps room for its focus ring. */
  scroll-margin-block: var(--space-4);
}
/* An empty block shows nothing. One that is a live region (alert or status) keeps its place in
   the accessibility tree with no box, so the message later written into the same node is
   announced; display: none would drop it from the tree. One without a live role goes. An
   explicit hidden attribute still hides either. */
.status:empty {
  margin: 0;
  padding: 0;
  border: 0;
}
.status:empty:not([role="alert"], [role="status"]) {
  display: none;
}
/* An error keeps the gap .error gave it from the control above. :where() leaves a component's
   own margin (.log-error) in charge. */
.status:where([data-tone="danger"]) {
  margin-top: var(--space-4);
}
.status[data-tone="info"] {
  --status-tone: var(--color-info);
  --status-wash: var(--color-info-subtle);
}
.status[data-tone="success"] {
  --status-tone: var(--color-success);
  --status-wash: var(--color-success-subtle);
}
.status[data-tone="warning"] {
  --status-tone: var(--color-warning);
  --status-wash: var(--color-warning-subtle);
}
.status[data-tone="danger"] {
  --status-tone: var(--color-danger);
  --status-wash: var(--color-danger-subtle);
}
/* A stopped or superseded first deployment is informational. */
.status:has(> .provisioning-neutral) {
  --status-tone: var(--color-info);
  --status-wash: var(--color-info-subtle);
}
.status-label {
  margin: 0 0 var(--space-1);
  color: var(--status-tone);
  font-size: var(--text-base);
  line-height: var(--text-base--line-height);
  font-weight: var(--weight-semibold);
}
.status-body,
.status > ul {
  margin: 0;
}
.status > ul {
  padding-left: var(--space-5);
}
.status-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-3);
}
/* Phone: a status block's actions stack full width, each a full touch target (spec 4). */
@media (max-width: 520px) {
  .status-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .status-actions > :is(a, button) {
    justify-content: center;
    min-height: var(--touch-min);
  }
}
.shell {
  min-height: 100dvh;
  display: grid;
  grid-template-columns: 258px minmax(0, 1fr);
}
.sidebar,
.topbar,
.dialog-header {
  --focus-ring: 2px solid var(--color-focus-inverse);
  background: var(--color-surface-inverse);
  color: var(--color-on-inverse);
}
.sidebar {
  padding: var(--space-6) var(--space-4) var(--space-4);
  display: flex;
  flex-direction: column;
  position: relative;
  min-height: 100dvh;
  align-self: stretch;
  z-index: 3;
}
.sidebar .brand,
.topbar .brand,
.runtime-debug h2 {
  color: inherit;
}
/* Navigation logos share a 48 px limit. Contain preserves wide artwork when max-width
   constrains it; narrow artwork uses its natural aspect ratio. */
.sidebar .brand img,
.topbar .brand img {
  width: auto;
  height: 48px;
  max-width: 48px;
}
/* The inverse mascot has its contour in the artwork. Forced colours use the original mark. */
.brand-mascot {
  display: flex;
  flex: none;
}
@media (forced-colors: none) {
  .brand:has(.brand-mascot) {
    gap: var(--space-1);
  }
  .topbar:has(.brand-mascot) {
    column-gap: 0;
  }
  .brand--bar:has(.brand-mascot) {
    font-size: clamp(var(--text-base), 4.4vw, var(--text-xl));
    line-height: var(--text-lg--line-height);
  }
}
.sidebar .brand {
  padding: var(--space-2) var(--space-3) 0;
  margin-bottom: var(--space-6);
}
.occ-version {
  color: var(--color-on-inverse-muted);
  font-size: var(--text-sm);
  text-transform: none;
  letter-spacing: normal;
  font-family: var(--font-mono);
}
.runtime-debug {
  margin: var(--space-6) var(--space-2) var(--space-3);
  min-height: 0;
  overflow-y: auto;
  font-size: var(--text-sm);
}
.runtime-debug h2 {
  font-size: var(--text-md);
}
.runtime-debug code {
  font-size: var(--text-xs);
  overflow-wrap: anywhere;
}
.runtime-debug details {
  margin-top: var(--space-4);
}
.runtime-debug summary {
  cursor: pointer;
}
.runtime-debug dt {
  margin-top: var(--space-3);
  color: var(--color-on-inverse-muted);
}
.runtime-debug dd {
  margin: var(--space-1) 0 0;
}
.nav {
  display: grid;
  gap: var(--space-1);
}
.nav a {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  min-height: 36px;
  padding: 0 var(--space-3);
  text-decoration: none;
  color: var(--color-on-inverse-muted);
  border-radius: var(--radius-md);
}
.nav a:hover,
:is(.account-toggle, .mobile-toggle, .topbar-avatar, .drawer-close):not(:disabled):hover {
  color: var(--color-on-inverse);
  background: var(--color-inverse-hover);
}
/* The marker sits inside the link, so labels stay aligned even in forced colours. */
.nav a[aria-current="page"] {
  position: relative;
  background: var(--color-inverse-selected);
  color: var(--color-on-inverse);
  font-weight: var(--weight-semibold);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}
.nav a[aria-current="page"]::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  border-inline-start: 3px solid var(--color-inverse-marker);
}
@media (forced-colors: active) {
  .nav a[aria-current="page"]::before {
    border-color: Highlight;
  }
}
.nav-icon {
  font-size: 16px;
  width: 16px;
  text-align: center;
}
.external-link-icon {
  width: 16px;
  height: 16px;
  margin-left: auto;
  flex: none;
}
.account {
  margin-top: auto;
  position: relative;
  padding-top: var(--space-6);
}
/* The account row: initials avatar, name and email, chevron. */
.account-toggle {
  width: 100%;
  text-align: left;
  padding: var(--space-3);
  border-color: var(--color-inverse-hover);
  background: transparent;
  font-weight: var(--weight-regular);
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.account-avatar {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-pill);
  background: var(--color-info-subtle);
  color: var(--color-info);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  line-height: 1;
}
.account-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.account-name,
.account-email {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.account-name {
  font-size: var(--text-base);
  line-height: var(--text-base--line-height);
  font-weight: var(--weight-medium);
}
.account-email {
  font-size: var(--text-sm);
  line-height: var(--text-sm--line-height);
}
.account-chevron {
  flex-shrink: 0;
}
.account-email,
.account-chevron {
  color: var(--color-on-inverse-muted);
}
.menu {
  /* Account menus use the page surface, including when opened from the navigation. */
  --focus-ring: 2px solid var(--color-focus);
  padding: var(--space-2);
  background: var(--surface);
  color: var(--color-text);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  min-width: 225px;
}
.account > .menu {
  position: absolute;
  bottom: calc(100% - var(--space-6) + var(--space-2));
  left: 0;
  right: 0;
}
.menu button {
  display: block;
  width: 100%;
  text-align: left;
  border: 0;
  padding: var(--space-3);
  font-size: var(--text-base);
  overflow-wrap: anywhere;
}
.menu [aria-checked="true"] {
  background: var(--accent-subtle);
  color: var(--accent);
  font-weight: var(--weight-semibold);
}
.menu .muted {
  margin: var(--space-3);
  font-size: var(--text-md);
}
.content {
  padding: var(--space-8);
  max-width: 1300px;
  width: 100%;
}
/* Page header (UX spec 3.2). Collections: the title and its scope line at the left, the actions
   (compact Namespace control, Refresh) at the right on the title block's last line. */
.page-header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: end;
  gap: var(--space-4) var(--space-6);
  margin-bottom: var(--space-8);
}
.page-title {
  min-width: 0;
}
.page-header h1 {
  margin-bottom: var(--space-1);
  font-size: var(--text-2xl);
  line-height: var(--text-2xl--line-height);
  letter-spacing: var(--tracking-tight);
  overflow-wrap: anywhere;
}
.page-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  max-width: 100%;
}
/* An Agent's page and Create Agent: ← Agents, the title with the actions at its right, then the
   meta row (ID, Namespace) across the width. The Agent's name is the page's largest type. */
.page-header--subpage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "back back"
    "title actions"
    "meta meta";
  align-items: start;
  gap: var(--space-2) var(--space-6);
}
.page-back {
  grid-area: back;
  justify-self: start;
  /* The arrow lines up with the title, not the ghost button's padding. */
  margin-left: calc(-1 * var(--space-3));
  color: var(--color-text-muted);
}
.page-header--subpage h1 {
  grid-area: title;
  justify-self: start;
}
.page-header--subpage .page-actions {
  grid-area: actions;
  justify-content: end;
}
.page-header--agent h1 {
  margin-bottom: 0;
  font-size: var(--text-display);
  line-height: var(--text-display--line-height);
}
.page-header--create h1 {
  margin-bottom: 0;
}
.page-meta {
  grid-area: meta;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  line-height: var(--text-sm--line-height);
}
.page-meta-id {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-width: 0;
}
.page-meta-id .resource-id {
  font-size: var(--text-xs);
}
/* The separator before the Namespace control; none when the control is hidden. */
.page-meta-id::after {
  content: "·" / "";
  margin-left: var(--space-1);
}
.page-meta:not(:has(> .namespace-selector:not([hidden]))) .page-meta-id::after {
  content: none;
}
/* Below 1100 px the row can wrap, and a wrapped separator would trail the ID. */
@media (max-width: 1100px) {
  .page-meta-id::after {
    content: none;
  }
}
.page-meta-copy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--control-h-sm);
  padding: 0;
  color: var(--color-text-muted);
}
.copy-icon {
  width: 16px;
  height: 16px;
}
.page-meta-copied:empty {
  display: none;
}
@media (max-width: 760px) {
  /* Phone: ← Agents shares its row with the actions, so the header is the back row, the title
     and the meta row (spec 3.2 and 4: header bottom <= 240 px at 390). */
  .page-header--subpage {
    grid-template-areas:
      "back actions"
      "title title"
      "meta meta";
    align-items: center;
  }
}
.checking-status {
  margin: 0;
  padding-block: var(--space-3);
  color: var(--muted);
}
.namespace-selector {
  display: grid;
  gap: var(--space-2);
  max-width: 100%;
  font-size: var(--text-base);
}
.namespace-selector label {
  font-weight: var(--weight-medium);
}
.namespace-selector select {
  width: 240px;
  max-width: 100%;
  min-height: 42px;
  padding: var(--space-3);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  text-overflow: ellipsis;
}
/* The header's compact control: one 32 px box, "Namespace" as a muted prefix inside it, as wide
   as the selection up to 240 px. The box draws the focus ring for its borderless select. */
.namespace-selector--compact {
  display: inline-flex;
  align-items: center;
  width: max-content;
  max-width: min(240px, 100%);
  height: var(--control-h-sm);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  font-size: var(--text-md);
  line-height: var(--text-md--line-height);
}
.namespace-selector--compact label {
  flex: none;
  padding: 0 var(--space-2) 0 var(--space-3);
  color: var(--color-text-muted);
  font-weight: var(--weight-regular);
  white-space: nowrap;
}
.namespace-selector--compact select:not([multiple]):not([size]) {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  height: 100%;
  min-height: 0;
  padding: 0 var(--space-8) 0 0;
  border: 0;
  border-radius: var(--radius-sm);
  background-color: transparent;
  background-position:
    right 18px center,
    right 12px center;
  color: var(--color-text-strong);
  font-weight: var(--weight-medium);
}
.namespace-selector--compact select:focus-visible {
  outline: none;
}
.namespace-selector--compact:has(select:focus-visible) {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}
.namespace-selector--compact:has(select:disabled) {
  opacity: 0.6;
}
@media (max-width: 760px) {
  .page-meta .namespace-selector--compact {
    width: 100%;
    max-width: 100%;
  }
}
.scope {
  margin: 0;
  font-size: var(--text-base);
  overflow-wrap: anywhere;
}
.collection {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--space-3);
}
/* Search first in reading and tab order; the action wraps when both no longer fit. */
.collection-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-block: var(--space-5);
}
.collection-toolbar > input[type="search"] {
  max-width: 360px;
}
/* Section, card and badge patterns (UX plan C4). A section is a heading, an optional description
   and its content; it is not a card. Cards live inside sections. */
.section {
  margin-top: var(--space-8);
}
.section > h2 {
  margin: 0 0 var(--space-2);
  font-size: var(--text-xl);
  line-height: var(--text-xl--line-height);
}
.section > h2 + p {
  max-width: var(--prose-max);
  margin: 0 0 var(--space-4);
  color: var(--color-text-muted);
}
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}
.card--muted {
  background: var(--color-surface-2);
}
.card--danger {
  border-color: color-mix(in srgb, var(--color-danger) 35%, transparent);
}
@media (max-width: 520px) {
  .card {
    padding: var(--space-4);
  }
}
.resource {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
}
.resource-name {
  margin-bottom: var(--space-2);
  font-size: var(--text-lg);
  font-weight: var(--weight-medium);
  overflow-wrap: anywhere;
}
/* An ID reads character by character: no ligatures, which some monospace fonts (Nimbus Mono PS,
   a common Linux default) apply to "ff", drawing two characters as one glyph (finding 2114). */
.resource-id {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-variant-ligatures: none;
  color: var(--muted);
  user-select: text;
  overflow-wrap: anywhere;
}
/* A status in a word or two: human copy, never a raw enum value. Neutral unless data-tone says
   success, warning, danger or info. */
.badge {
  display: inline-block;
  border-radius: var(--radius-sm);
  background: var(--color-surface-hover);
  padding: var(--space-1) var(--space-2);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  line-height: var(--text-sm--line-height);
  font-weight: var(--weight-medium);
  white-space: nowrap;
}
.badge[data-tone="success"] {
  background: var(--color-success-subtle);
  color: var(--color-success);
}
.badge[data-tone="warning"] {
  background: var(--color-warning-subtle);
  color: var(--color-warning);
}
.badge[data-tone="danger"] {
  background: var(--color-danger-subtle);
  color: var(--color-danger);
}
.badge[data-tone="info"] {
  background: var(--color-info-subtle);
  color: var(--color-info);
}
/* The name opens the resource. Its target fills the row, but the ID stays selectable. */
.resource-linked {
  position: relative;
}
@media (hover: hover) {
  .resource-linked:hover {
    background: var(--hover);
  }
}
.resource-linked .resource-name :is(a, button) {
  color: var(--color-link);
  font-weight: var(--weight-medium);
  text-decoration-color: transparent;
}
.resource-linked .resource-name button {
  padding: 0;
  text-align: start;
  overflow-wrap: anywhere;
}
/* The whole row is the target; its name underlines while the pointer is anywhere on it. */
.resource-linked:hover .resource-name :is(a, button),
.resource-linked .resource-name :focus-visible {
  text-decoration-color: currentColor;
}
.resource-linked .resource-name :is(a, button)::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}
.resource-linked .resource-id {
  position: relative;
  z-index: 1;
}
/* The card draws the focus ring (see the wrapper rule), matching the link's hit area in every
   browser. */
.resource-linked .resource-name :focus-visible {
  outline: none;
}
/* A resource collection is one surface, with a header and divided, keyboard-focusable rows. */
.resource-list {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.resource-list-header {
  background: var(--color-surface-2);
  border-bottom: 1px solid var(--color-border);
}
.resource-list .collection {
  gap: 0;
}
.resource-list .resource-linked + .resource-linked {
  border-top: 1px solid var(--color-border);
}
.resource-list .resource-name {
  margin-bottom: var(--space-1);
  font-size: var(--text-base);
}
.resource-list .resource-linked:has(.resource-name :focus-visible) {
  outline-offset: var(--focus-offset-inset);
}
/* Namespace rows are list items; each cell names itself for a screen reader. */
.namespace-table {
  --namespace-columns: minmax(0, 1fr) 8rem 11rem 10rem;
}
.namespace-table-head,
.namespace-row {
  display: grid;
  grid-template-columns: var(--namespace-columns);
  gap: var(--space-4);
  align-items: center;
  padding: 0 var(--space-4);
}
.namespace-table-head {
  min-height: var(--space-12);
  color: var(--color-text-muted);
  font-size: var(--text-md);
  font-weight: var(--weight-medium);
}
.namespace-row {
  min-height: 56px;
  padding-block: var(--space-3);
}
.namespace-cell-name {
  min-width: 0;
}
.namespace-cell-created {
  color: var(--color-text);
}
.namespace-table-head > :last-child {
  text-align: right;
}
.namespace-cell-actions {
  position: relative;
  z-index: 1;
  justify-self: end;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.namespace-row-feedback {
  grid-column: 1 / -1;
  position: relative;
  z-index: 1;
}
.namespace-row-feedback:empty,
.namespace-deletion-outcome:empty {
  display: none;
}
.namespace-row-feedback .status {
  margin: 0;
}
.namespace-deletion-outcome {
  margin-bottom: var(--space-4);
}
.namespace-delete-identity {
  display: grid;
  gap: var(--space-1);
  padding: var(--space-4);
  margin-block: var(--space-5);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow-wrap: anywhere;
}
.namespace-delete-consequence {
  font-weight: var(--weight-semibold);
}
.namespace-delete-dialog details {
  margin-top: var(--space-4);
}
.namespace-delete-blockers {
  padding: 0;
  list-style: none;
}
.namespace-delete-blockers > li {
  padding-block: var(--space-3);
  border-bottom: 1px solid var(--color-border);
}
.namespace-delete-blockers .resource-id {
  display: block;
  overflow-wrap: anywhere;
}
.namespace-delete-blockers pre {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.namespace-delete-resource {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}
.namespace-cell-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
@media (max-width: 1100px) {
  .namespace-table {
    --namespace-columns: minmax(0, 1fr) 7rem 9rem 8rem;
  }
}
/* Phone: the badge sits beside the name and Created goes underneath, labelled. */
@media (max-width: 760px) {
  .namespace-table-head {
    display: none;
  }
  .namespace-row {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-2) var(--space-3);
    padding: var(--space-4);
  }
  .namespace-cell-name {
    grid-column: 1 / -1;
  }
  .namespace-cell-status {
    grid-column: 1;
    grid-row: 2;
    align-self: center;
  }
  .namespace-cell-created {
    grid-column: 1;
    grid-row: 3;
    color: var(--color-text-muted);
    font-size: var(--text-sm);
  }
  .namespace-cell-actions {
    grid-column: 2;
    grid-row: 2 / 4;
    align-self: center;
    max-width: 10rem;
  }
  .namespace-cell-name .resource-id {
    overflow-wrap: anywhere;
  }
  .namespace-cell-label {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip-path: none;
  }
}
.state-panel {
  padding: var(--space-10);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
}
.state-panel p {
  color: var(--muted);
  max-width: 560px;
}
.namespace-recovery {
  margin-bottom: var(--space-5);
}
.state-panel .request-id {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  overflow-wrap: anywhere;
}
/* Settings (UX spec 3.10): an account card and a session card in one 720 px column. */
.settings-page {
  display: grid;
  gap: var(--space-6);
  max-width: 720px;
}
.settings-page h2 {
  margin: 0 0 var(--space-5);
  font-size: var(--text-xl);
  line-height: var(--text-xl--line-height);
}
.settings-account {
  display: flex;
  align-items: center;
  gap: var(--space-8);
}
.account-avatar--lg {
  width: 64px;
  height: 64px;
  font-size: var(--text-2xl);
}
.settings {
  flex: 1;
  min-width: 0;
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: var(--space-3) var(--space-6);
  margin: 0;
  overflow-wrap: anywhere;
}
.settings dt {
  color: var(--color-text-muted);
}
.settings dd {
  margin: 0;
  color: var(--color-text-strong);
}
.settings-page .hint {
  margin: var(--space-3) 0 0;
}
.driver-configurations {
  margin-top: var(--space-8);
  min-width: 0;
}
.driver-configurations-heading,
.driver-configurations-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}
.driver-configurations-heading h2 {
  margin: 0;
}
.driver-configurations-heading p {
  margin: var(--space-1) 0 0;
  color: var(--muted);
  font-size: var(--text-md);
}
.driver-read-only,
.driver-value-redacted {
  display: inline-block;
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--muted);
  font-size: var(--text-sm);
  background: var(--color-surface-2);
}
.driver-read-only {
  flex: none;
}
.driver-configurations-help {
  margin: var(--space-5) 0;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--color-surface-2);
  color: var(--muted);
  font-size: var(--text-sm);
}
.driver-configurations-toolbar {
  flex-wrap: wrap;
  margin-bottom: var(--space-3);
  color: var(--muted);
  font-size: var(--text-sm);
}
.driver-configuration-views {
  display: flex;
  padding: var(--space-1);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--color-surface-2);
}
.driver-configuration-views button {
  min-height: var(--control-h-sm);
  padding: var(--space-1) var(--space-3);
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--muted);
  font-size: var(--text-sm);
}
.driver-configuration-views button[aria-pressed="true"] {
  background: var(--surface);
  color: var(--text-strong);
  box-shadow: inset 0 0 0 1px var(--line);
}
.driver-configuration {
  min-width: 0;
  margin-top: var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
}
.driver-configuration > summary {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  list-style: none;
  cursor: pointer;
  text-decoration: none;
  border-radius: var(--radius-md);
}
.driver-configuration > summary::-webkit-details-marker {
  display: none;
}
.driver-configuration > summary::before {
  content: "›";
  flex: none;
  color: var(--muted);
  font-size: var(--text-xl);
  line-height: 1;
}
.driver-configuration[open] > summary::before {
  transform: rotate(90deg);
}
.driver-configuration > summary:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}
.driver-configuration-identity {
  min-width: 0;
}
.driver-configuration-title,
.driver-configuration-id {
  display: block;
}
.driver-configuration-title {
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
}
.driver-configuration-id,
.driver-configuration-count {
  color: var(--muted);
  font-size: var(--text-xs);
}
.driver-configuration-id {
  margin-top: var(--space-1);
  overflow-wrap: anywhere;
}
.driver-configuration-count {
  margin-left: auto;
  flex: none;
}
.driver-configuration-body {
  min-width: 0;
  margin: 0 var(--space-4);
  padding: var(--space-1) 0 var(--space-3);
  border-top: 1px solid var(--line);
}
.driver-configuration-body > p {
  margin: var(--space-3) 0;
  font-size: var(--text-md);
  color: var(--muted);
}
.driver-configuration-fields {
  margin: 0;
  min-width: 0;
}
.driver-configuration-field {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr);
  align-items: start;
  gap: var(--space-4);
  padding-block: var(--space-3);
}
.driver-configuration-field + .driver-configuration-field {
  border-top: 1px solid var(--line);
}
.driver-configuration-field dt {
  color: var(--muted);
  font-size: var(--text-sm);
  overflow-wrap: anywhere;
}
.driver-field-key {
  display: block;
  margin-top: var(--space-1);
  font-size: var(--text-xs);
  overflow-wrap: anywhere;
}
.driver-configuration-field dd {
  min-width: 0;
  margin: 0;
}
.driver-configuration-fields .driver-configuration-fields {
  padding-left: min(var(--space-3), 3%);
  border-left: 1px solid var(--line);
}
.driver-configuration-fields .driver-configuration-fields .driver-configuration-field {
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-2);
}
.driver-value {
  display: inline-block;
  max-width: 100%;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--color-surface-2);
  color: var(--text);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-size: var(--text-sm);
}
.driver-value-list {
  margin: 0;
  padding-left: min(var(--space-5), 5%);
  min-width: 0;
}
.driver-value-list > li {
  padding-block: var(--space-1);
}
.driver-value-list > li::marker {
  color: var(--muted);
  font-size: var(--text-xs);
}
.driver-configuration-json {
  margin: var(--space-3) 0 0;
  padding: var(--space-4);
  border-radius: var(--radius-sm);
  background: var(--color-surface-2);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-size: var(--text-sm);
}
@media (max-width: 520px) {
  .driver-configurations-heading {
    align-items: flex-start;
  }
  .driver-configuration-field {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-2);
  }
  .driver-configuration-count {
    flex-shrink: 1;
    text-align: right;
  }
  .driver-configuration-views button {
    min-height: var(--touch-min);
  }
}
@media (max-width: 520px) {
  .settings-account {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-5);
  }
  .settings {
    align-self: stretch;
    grid-template-columns: 96px minmax(0, 1fr);
  }
  .settings-sign-out {
    width: 100%;
    min-height: var(--touch-min);
  }
}
.topbar,
.mobile-toggle,
.drawer-close,
.scrim {
  display: none;
}
@media (max-width: 760px) {
  /* Let the top bar, modal backdrop and sheet reach the edge when there is no scrollbar.
     A real classic scrollbar still gets its space, including while a sheet is open. */
  :root {
    scrollbar-gutter: auto;
  }
  .shell {
    /* A flow root keeps the menu button's margin inside the shell; collapsing through body,
       it moved the whole page when the shell replaced the startup status (finding 1413). */
    display: flow-root;
  }
  .content {
    padding: var(--space-5) var(--space-4) var(--space-6);
  }
  /* Phone top bar (spec 3.1): navigation toggle, wordmark and account avatar on a 56 px bar. */
  .topbar {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    height: 56px;
    padding: 0 var(--space-2) 0 var(--space-1);
    position: relative;
    z-index: 1;
  }
  .mobile-toggle,
  .drawer-close,
  .topbar-avatar {
    display: inline-grid;
    place-items: center;
    flex: none;
    width: var(--touch-min);
    height: var(--touch-min);
    padding: 0;
    border-color: transparent;
    background: transparent;
  }
  .topbar-avatar {
    border-radius: var(--radius-pill);
  }
  .line-icon {
    width: 20px;
    height: 20px;
  }
  .brand--bar {
    flex: 1;
    min-width: 0;
    margin: 0;
    white-space: nowrap;
  }
  .topbar-account {
    position: relative;
  }
  .topbar-account > .menu {
    position: absolute;
    top: calc(100% + var(--space-1));
    right: 0;
    z-index: 4;
  }
  .nav a {
    min-height: var(--touch-min);
  }
  .sidebar {
    display: none;
    position: fixed;
    inset: 0 auto 0 0;
    height: 100dvh;
    min-height: 0;
    overflow-y: auto;
    width: min(310px, 88vw);
  }
  .shell.drawer-open .sidebar {
    display: flex;
  }
  .shell.drawer-open .scrim {
    display: block;
    position: fixed;
    inset: 0;
    background: var(--overlay);
    z-index: 2;
    border: 0;
    border-radius: 0;
  }
  .drawer-close {
    position: absolute;
    top: var(--space-5);
    right: var(--space-2);
  }
  .sidebar .brand:has(.brand-mascot) {
    /* Let the full installation name wrap beside the close button's touch target. */
    padding-inline-end: var(--touch-min);
  }
  .resource {
    align-items: start;
    gap: var(--space-3);
  }
  .state-panel {
    padding: var(--space-6);
  }
}

/* Agent management retains the console's native controls and Namespace shell. */
select {
  font: inherit;
  color: inherit;
  background: var(--surface);
}
select:not([multiple]):not([size]),
select:not([multiple])[size="1"] {
  appearance: none;
  background-image:
    linear-gradient(
      45deg,
      transparent 42%,
      var(--color-text) 42%,
      var(--color-text) 58%,
      transparent 58%
    ),
    linear-gradient(
      135deg,
      transparent 42%,
      var(--color-text) 42%,
      var(--color-text) 58%,
      transparent 58%
    );
  background-repeat: no-repeat;
  background-position:
    right 22px center,
    right 16px center;
  background-size: 6px 6px;
  padding-right: var(--space-10);
  text-overflow: ellipsis;
}
@media (forced-colors: active) {
  select:not([multiple]):not([size]),
  select:not([multiple])[size="1"] {
    appearance: auto;
    background-image: none;
  }
}
.agent-toolbar-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.overview-text-button:not(:hover) {
  color: var(--muted);
}
.native-admin-access {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: 0 var(--space-8) 0 0;
  margin-bottom: var(--space-5);
  overflow-wrap: anywhere;
}
.native-admin-access p {
  font-size: var(--text-sm);
}
.native-admin-access .native-admin-target {
  color: var(--text-strong);
  font-weight: var(--weight-semibold);
}
.native-admin-access > .overview-text-button {
  align-self: flex-start;
}
.native-admin-recovery:empty {
  display: none;
}
/* The overview: the stat card (facts + the page's one disclosure), then the deployment card. */
.agent-overview-status {
  display: grid;
  gap: var(--space-6);
  margin-bottom: var(--space-8);
  overflow-wrap: anywhere;
}
.agent-overview-status > .agent-card {
  margin: 0;
}
.agent-overview-status > .deployment-evidence {
  padding: var(--space-2) var(--space-6);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}
.agent-overview-status > .deployment-evidence > button {
  right: var(--space-6);
  top: calc(var(--space-2) + 6px);
}
@media (max-width: 520px) {
  .agent-overview-status > .deployment-evidence {
    padding-inline: var(--space-4);
  }
  .agent-overview-status > .deployment-evidence > button {
    right: var(--space-4);
  }
}
/* Facts as a stat row (spec 3.5): label, value, optional help; hairlines between columns. */
.stats {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
}
.stat {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-1);
  min-width: 0;
  padding: 0 var(--space-6);
  border-left: 1px solid var(--color-border);
}
.stat:first-child {
  padding-left: 0;
  border-left: 0;
}
.stat:last-child {
  padding-right: 0;
}
.stat-label,
.stat-help {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  line-height: var(--text-sm--line-height);
}
/* A value is as tall as its badge, so a recorded outcome's badge replacing loading text moves
   nothing (finding 2163). */
.stat-value {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  min-height: calc(var(--text-sm) * var(--text-sm--line-height) + 2 * var(--space-1));
  color: var(--color-text-strong);
  font-size: var(--text-xl);
  line-height: var(--text-xl--line-height);
  font-weight: var(--weight-semibold);
}
.stat-label,
.stat-value {
  overflow-wrap: normal;
}
.stat-help {
  margin: 0;
}
.stat-help:empty {
  display: none;
}
.stat-help.stat-help-line:empty {
  display: block;
  min-height: calc(var(--text-sm) * var(--text-sm--line-height));
}
/* Beside the sidebar (761-1100) the columns narrow; a fourth fact (Stop requested) stacks. */
@media (max-width: 1100px) {
  .stat {
    padding-inline: var(--space-4);
  }
  .stats:has(> .stat:nth-child(4)) {
    grid-auto-flow: row;
    grid-template-columns: 1fr;
  }
  .stats:has(> .stat:nth-child(4)) > .stat {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    column-gap: var(--space-4);
    padding: var(--space-3) 0;
    border-left: 0;
    border-top: 1px solid var(--color-border);
  }
  .stats:has(> .stat:nth-child(4)) > .stat:first-child {
    padding-top: 0;
    border-top: 0;
  }
  .stats:has(> .stat:nth-child(4)) > .stat:last-child {
    padding-bottom: 0;
  }
  .stats:has(> .stat:nth-child(4)) .stat-help {
    flex-basis: 100%;
  }
}
/* Phone: one column, label and value on one line, help beneath. */
@media (max-width: 760px) {
  .stats {
    grid-auto-flow: row;
    grid-template-columns: 1fr;
  }
  .stat {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    column-gap: var(--space-4);
    padding: var(--space-3) 0;
    border-left: 0;
    border-top: 1px solid var(--color-border);
  }
  .stat:first-child {
    padding-top: 0;
    border-top: 0;
  }
  .stat:last-child {
    padding-bottom: 0;
  }
  .stat-help {
    flex-basis: 100%;
  }
}
/* One disclosure per page (spec 3.6): what the page cannot confirm, said once and folded. */
.disclosure {
  margin-top: var(--space-5);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
}
.disclosure > summary {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--control-h-sm);
  cursor: pointer;
  list-style: none;
  color: var(--color-link);
  font-size: var(--text-md);
  line-height: var(--text-md--line-height);
  font-weight: var(--weight-medium);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.disclosure > summary::-webkit-details-marker {
  display: none;
}
.disclosure > summary::after {
  content: "";
  width: 8px;
  height: 8px;
  border: solid currentColor;
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(-45deg);
}
.disclosure[open] > summary::after {
  transform: translateY(-2px) rotate(45deg);
}
.disclosure > ul {
  max-width: var(--prose-max);
  margin: var(--space-2) 0 0;
  padding-left: var(--space-5);
  color: var(--color-text-muted);
  font-size: var(--text-md);
  line-height: var(--text-md--line-height);
}
.disclosure li + li {
  margin-top: var(--space-1);
}
/* The bindings sentence speaks for the sharing panel's list, so it shows only on the Access tab,
   while that panel shows (finding 2091). */
[aria-live="polite"]:not(:has(.agent-access:not([hidden]))) .disclosure-access {
  display: none;
}
/* What a deploy does explains the draft's next step, so it shows only beside it (UX spec 3.7). */
[aria-live="polite"]:not(:has(.agent-draft-actions)) .disclosure-deploy {
  display: none;
}
@media (max-width: 520px) {
  .disclosure > summary {
    min-height: var(--touch-min);
  }
}
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.native-admin-access p {
  margin: var(--space-1) 0 0;
  color: var(--muted);
  font-size: var(--text-md);
  line-height: 1.45;
}
.native-admin-access p:empty {
  display: none;
}
/* Keep the heading and controls stable while the first overview reads settle. */
.agent-detail-pending > :not(.agent-overview-toolbar) {
  display: none;
}
.deployment-evidence {
  position: relative;
}
.deployment-evidence summary {
  width: fit-content;
  max-width: 53%;
  padding: var(--space-3) 0;
  cursor: pointer;
  color: var(--text-strong);
  font-weight: var(--weight-semibold);
}
.deployment-evidence > button {
  position: absolute;
  right: 0;
  top: 6px;
  max-width: 45%;
}
.overview-text-button {
  background: transparent;
  border-color: transparent;
  padding: var(--space-1);
  font-size: var(--text-sm);
}
.deployment-evidence-content {
  padding-bottom: var(--space-3);
}
/* Deployment activity's stand-in before the latest record is read: one row as tall as the
   folded summary, so the panel that replaces it moves nothing (finding 2163). */
.deployment-evidence-loading {
  margin: 0;
  padding: var(--space-3) 0;
  line-height: inherit;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* An unavailable control that has a reason stays focusable so the reason is reachable (the
   Open Agent UI, finding 2714; dom.mts setUnavailable, finding 2878). It looks like
   button:disabled, but its label, fill and edge fade instead of the button, so its focus ring
   keeps full contrast (finding 2863). */
button.control-unavailable {
  cursor: not-allowed;
  color: color-mix(in srgb, currentColor 60%, var(--color-surface));
  border-color: color-mix(in srgb, var(--color-border-strong) 60%, var(--color-surface));
}
.agent-ui-unavailable[aria-disabled="true"],
button.control-unavailable:is(.primary, .button--primary) {
  cursor: not-allowed;
  color: var(--color-on-accent);
  background: color-mix(in srgb, var(--color-accent) 60%, var(--color-surface));
  border-color: color-mix(in srgb, var(--color-accent) 60%, var(--color-surface));
}
/* An unavailable checkbox fades as a disabled one does; its label draws the focus ring, which the
   fade would dim on the checkbox itself. */
input[type="checkbox"].control-unavailable {
  cursor: not-allowed;
  opacity: 0.6;
}
input[type="checkbox"].control-unavailable:focus-visible {
  outline: none;
}
label:has(> input[type="checkbox"].control-unavailable) {
  width: fit-content;
}
label:has(> input[type="checkbox"].control-unavailable:focus-visible) {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
  border-radius: var(--radius-sm);
}
/* An unavailable select or text field fades its text, not the field, so its focus ring keeps full
   contrast (finding 2899). */
select.control-unavailable,
input.control-unavailable:not([type="checkbox"], [type="radio"]) {
  cursor: not-allowed;
  color: color-mix(in srgb, var(--text) 60%, var(--color-surface));
}
.native-admin-access .overview-text-button {
  margin-top: var(--space-1);
  text-decoration: underline;
  text-underline-offset: 3px;
}
/* Recovery takes precedence over the draft's deployment action. */
[aria-live="polite"]:has(
    > .deployment-recovery:not([hidden]) .deployment-recovery-actions:not([hidden])
  )
  .agent-draft-actions
  :is(.primary, .button--primary) {
  color: var(--color-text-strong);
  background: var(--color-surface);
  border-color: var(--color-border-strong);
}
/* An unavailable Deploy there fades as a secondary button does. */
[aria-live="polite"]:has(
    > .deployment-recovery:not([hidden]) .deployment-recovery-actions:not([hidden])
  )
  .agent-draft-actions
  :is(.primary, .button--primary).control-unavailable {
  color: color-mix(in srgb, var(--color-text-strong) 60%, var(--color-surface));
  border-color: color-mix(in srgb, var(--color-border-strong) 60%, var(--color-surface));
}
[aria-live="polite"]:has(
    > .deployment-recovery:not([hidden]) .deployment-recovery-actions:not([hidden])
  )
  .agent-draft-actions
  :is(.primary, .button--primary):not(:disabled, [aria-disabled="true"]):hover {
  background: var(--color-surface-hover);
}
/* A failed deployment is a full-width danger status block (spec 3.4): the stripe and wash come
   from .status, the label names the version, the title is one --text-lg line, and the actions
   are buttons with one primary. */
.status.deployment-recovery {
  margin: 0 0 var(--space-8);
  padding: var(--space-5) var(--space-6);
}
.deployment-recovery h2 {
  margin: 0 0 var(--space-2);
  color: var(--color-text-strong);
  font-size: var(--text-lg);
  line-height: var(--text-lg--line-height);
  font-weight: var(--weight-semibold);
  letter-spacing: normal;
}
/* line-height 1 keeps a fallback mono font's taller ascent from spacing out the line it sits on. */
.deployment-recovery .status-body code {
  font-family: var(--font-mono);
  font-size: var(--text-md);
  line-height: 1;
}
.deployment-recovery .status-actions {
  margin-top: var(--space-4);
}
/* The danger wash darkens the block, so the input edge falls below 3:1 there; the muted text
   colour keeps a white secondary action's edge at 4.6:1 (finding 1958). */
.deployment-recovery-actions .button:not(.button--primary) {
  border-color: var(--color-text-muted);
}
@media (max-width: 520px) {
  .status.deployment-recovery {
    padding: var(--space-4);
  }
}
.eyebrow {
  color: var(--muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}
/* Size the selected result for its wrapped generic failures as well as its record.
   Actual errors remain in normal flow and can grow beyond these sizing copies. */
.version-deployment-result {
  display: grid;
}
.version-deployment-result > * {
  grid-area: 1 / 1;
  min-width: 0;
}
.version-deployment-error-size {
  visibility: hidden;
  pointer-events: none;
}
.version-deployment-error-size [data-message]::before {
  content: attr(data-message);
}

.deployment-heading,
.agent-version-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
}
.deployment-heading h2,
.agent-version-heading h2 {
  margin-bottom: var(--space-1);
}
.deployment-heading p,
.agent-version-heading p {
  margin-bottom: 0;
}
.deployment-progress {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
  list-style: none;
  padding: 0;
  margin: var(--space-5) 0;
}
/* Step tiles are inner cards (spec 3.4): a hairline edge on the surface, the marker carries the
   tone, and only a failed step takes its tone's wash. */
.deployment-step {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.deployment-step strong,
.deployment-step span:not(.deployment-step-marker) {
  display: block;
}
.deployment-step span:not(.deployment-step-marker) {
  margin-top: var(--space-1);
  color: var(--muted);
  font-size: var(--text-sm);
}
.deployment-step-marker {
  display: block;
  width: 12px;
  height: 12px;
  flex: none;
  margin-top: var(--space-1);
  border-radius: 50%;
  border: 2px solid var(--input-border);
  background: var(--surface);
}
.deployment-step-complete .deployment-step-marker {
  border-color: var(--success);
  background: var(--success);
}
.deployment-step-active .deployment-step-marker {
  border-color: var(--warning);
  background: var(--warning);
}
.deployment-step-failed {
  background: var(--color-danger-subtle);
}
.deployment-step-failed .deployment-step-marker {
  border-color: var(--danger);
  background: var(--danger);
}
/* Superseded by a newer version or stopped by the owner: neutral, neither success nor failure
   (findings 1353, 1375). */
.deployment-step-superseded .deployment-step-marker,
.deployment-step-stopped .deployment-step-marker {
  border-color: var(--muted);
  background: var(--muted);
}
.deployment-outcome {
  font-weight: var(--weight-semibold);
}
/* A pending deploy's attempt rows keep their space as results arrive (finding 1598). At phone
   width a reason code or date takes two lines, so each row holds two from the start. */
@media (max-width: 520px) {
  .deployment-pending-progress dd {
    min-height: 2lh;
  }
}
.agent-version-layout {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
.agent-version-layout > * {
  min-width: 0;
}
.agent-version-summary {
  display: grid;
  gap: var(--space-5);
}
.agent-version-summary > * {
  margin: 0;
}
.agent-version-summary > .agent-draft-actions {
  order: -1;
}
.version-evidence {
  display: grid;
  gap: var(--space-5);
}
.version-evidence:empty,
.agent-version-summary:empty {
  display: none;
}
.agent-version-summary .agent-version-heading .eyebrow,
.agent-version-summary .agent-version-heading h2 {
  display: none;
}
.agent-version-heading {
  padding: 0;
}
.agent-version-metadata {
  font-size: var(--text-sm);
  color: var(--muted);
}
.agent-version-metadata summary {
  cursor: pointer;
  width: fit-content;
  color: var(--color-link);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.agent-version-metadata p {
  margin: var(--space-2) 0;
  font-size: var(--text-sm);
  overflow-wrap: anywhere;
}
.agent-version-toolbar {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}
.agent-version-control {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.agent-version-control label {
  margin: 0;
  white-space: nowrap;
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
}
.agent-version-control select {
  width: 290px;
  max-width: 100%;
}
.agent-version-date,
.agent-version-context {
  font-size: var(--text-sm);
  color: var(--muted);
}
.agent-version-context {
  margin: var(--space-3) 0 0;
}
.version-older[aria-disabled="true"] {
  opacity: 0.6;
}
.agent-deployment-panels {
  display: grid;
  gap: var(--space-5);
}
.agent-deployment-panels :focus-visible {
  /* Leave the keyboard outline visible when a refusal expands the panel. */
  scroll-margin-block: var(--space-2);
}
.agent-deployment-panels > * {
  margin: 0;
}
.agent-deployment-panels > .deployment-evidence {
  padding: var(--space-3) var(--space-6);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
}
.agent-deployment-panels > .deployment-evidence > button {
  top: 18px;
  right: 24px;
}
/* A requested refresh stays focusable and hovered while duplicate activation is blocked. */
.deployment-status > button[aria-disabled="true"]:hover {
  background: var(--color-surface-hover);
}
.agent-deployment-attention {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin: 0 0 var(--space-5);
}
.agent-deployment-attention p {
  margin: 0;
}
.agent-current-summary .stat-value a {
  color: var(--color-link);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.agent-stat-card {
  padding: var(--space-4) var(--space-5);
}
.agent-stat-card .stats {
  margin: 0;
}
.agent-stat-card .stat-value {
  font-size: var(--text-lg);
}
@media (max-width: 760px) {
  .agent-version-control {
    width: 100%;
  }
  .agent-version-control select {
    min-width: 0;
    flex: 1;
  }
  .agent-deployment-attention {
    align-items: flex-start;
    flex-direction: column;
  }
}
/* A draft's next step (UX spec 3.7): a checklist whose steps are done (success check) or open
   (strong ring), then Deploy right-aligned with its status beside it. */
.agent-draft-actions h2 {
  margin: 0 0 var(--space-4);
}
.checklist {
  display: grid;
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}
.checklist > li {
  position: relative;
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: var(--space-3);
  align-items: start;
}
.checklist-mark {
  box-sizing: border-box;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  border: 2px solid var(--color-border-strong);
  border-radius: var(--radius-pill);
}
.checklist > li[data-state="done"] .checklist-mark {
  border-color: var(--color-success);
  background: var(--color-success);
}
/* The check: a rotated L drawn in the circle. */
.checklist > li[data-state="done"] .checklist-mark::after {
  content: "";
  display: block;
  width: 5px;
  height: 9px;
  margin: 2px auto 0;
  border: solid var(--color-on-accent);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
/* A hairline joins each mark to the next one. */
.checklist > li:not(:last-child) > .checklist-mark::before {
  content: "";
  position: absolute;
  top: 24px;
  bottom: calc(-1 * var(--space-4) + 2px);
  left: 9px;
  border-left: 1px solid var(--color-border);
}
.checklist-text {
  color: var(--color-text-strong);
}
.checklist-detail {
  display: block;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  line-height: var(--text-sm--line-height);
}
.agent-draft-actions .card-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-3) var(--space-4);
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border);
}
.agent-draft-actions .card-actions > [role="status"] {
  order: -1;
  flex: 1 1 16rem;
  margin: 0;
  text-align: right;
}
.agent-draft-actions > .status:not(:empty) {
  margin: var(--space-4) 0 0;
}
@media (max-width: 520px) {
  /* Phone: Deploy is full width, its status under it. */
  .agent-draft-actions .card-actions > button {
    flex: 1 1 100%;
  }
  .agent-draft-actions .card-actions > [role="status"] {
    order: 0;
    text-align: left;
  }
}
.version-selection-notice {
  border-left: 1px solid var(--color-border);
}
.agent-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  margin: var(--space-5) 0;
}
/* A tab card's first block starts at the card's padding. The Credentials fieldset and the
   repository picker carry the top margin (and the fieldset its rule) that separate them from
   fields above on Create Agent, which left an empty band at the top of the card (finding 2386). */
.agent-card > .harness-auth-fields:first-child,
.agent-card > .repository-selection:first-child {
  margin-top: 0;
}
.agent-card > .harness-auth-fields:first-child {
  border-top: 0;
  padding-top: 0;
}
/* On an Agent's Repositories tab the tab card is the card: the picker keeps its own border and
   background only on Create Agent, where it is a block among other fields (finding 2402). */
.agent-card:not(.agent-form) > .repository-selection {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
}
/* An empty status line in a tab card or the picker adds no band; it stays a live region. */
.agent-card > .hint:empty,
.repository-selection > .hint:empty {
  margin: 0;
}
/* With no repository choices to list (repository access not set up), the empty list adds no
   band above the access limits (finding 2402). */
.repository-options:has(> .repository-discovery > #repository-results:only-child:empty) {
  margin-top: 0;
}
.agent-form {
  max-width: 960px;
}
/* The Preset a Create Agent form started from, above its first field (UX plan A2). */
.create-agent-origin {
  margin: 0;
}
/* A long Preset name wraps inside the card instead of running past it at phone width. */
.create-agent-origin .badge {
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
}
/* Form field (UX plan C3): label, control, the control's error, then help. Built by field() in
   dom.mjs; .form-field and .channel-field are older names. One control height (--control-h) and
   one help layout. */
.field,
.form-field {
  margin: var(--space-5) 0;
}
.field > label,
.form-field label,
.revision-selector label {
  display: block;
  font-weight: var(--weight-medium);
  margin-bottom: var(--space-2);
}
.field input,
.field select,
.field textarea,
.form-field input,
.form-field select,
.form-field textarea,
.collection-toolbar > input[type="search"],
.sandbox-policy input[type="search"],
.sandbox-policy select,
.repository-discovery input[type="search"],
.plugin-control select,
.plugin-json textarea,
.revision-selector select,
.slack-approver-field select {
  width: 100%;
  min-height: var(--control-h);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3);
}
.field input[type="checkbox"],
.field input[type="radio"] {
  width: auto;
}
/* A fixed value (the inline Create Secret dialog's Binding key) reads as text, not as a field
   the reader could edit (finding 2370). */
.form-field input[readonly] {
  border-color: transparent;
  background: transparent;
  padding-inline: 0;
  font-family: var(--font-mono);
}
.field input[type="checkbox"],
.field input[type="radio"],
.form-field input[type="checkbox"],
.form-field input[type="radio"] {
  min-height: 0;
}
.field > .hint,
.form-field > .hint,
.field-help {
  margin-top: var(--space-1);
  font-size: var(--text-md);
  color: var(--color-text-muted);
}
.secret-typeahead {
  position: relative;
}
.secret-typeahead-listbox {
  position: absolute;
  z-index: 20;
  inset: calc(100% + var(--space-1)) 0 auto;
  max-height: 240px;
  overflow: auto;
  border: 1px solid var(--input-border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-1);
}
.channel-secrets .secret-typeahead-listbox {
  position: static;
  margin-top: var(--space-1);
}
.secret-typeahead-listbox [role="option"],
.secret-typeahead-empty {
  padding: var(--space-3);
  overflow-wrap: anywhere;
}
.secret-typeahead-listbox [role="option"] {
  cursor: pointer;
}
.secret-typeahead-listbox [role="option"][aria-selected="true"],
.secret-typeahead-listbox [role="option"].secret-typeahead-active {
  background: var(--accent-subtle);
}
.secret-typeahead-create {
  font-weight: var(--weight-medium);
}
/* Secret create denied by the permission answer: listed with the reason, not chosen. */
.secret-typeahead-listbox [role="option"][aria-disabled="true"] {
  color: var(--muted);
  cursor: not-allowed;
}
.secret-typeahead-create[aria-disabled="true"] small {
  display: block;
  font-weight: var(--weight-regular);
}
.secret-typeahead-empty {
  color: var(--muted);
}
.form-actions {
  display: flex;
  gap: var(--space-3);
  justify-content: flex-end;
  flex-wrap: wrap;
  margin-top: var(--space-5);
}
.namespace-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-bottom: var(--space-5);
}
.namespace-toolbar p {
  flex: 1 1 18rem;
  margin: 0;
}
.namespace-toolbar button {
  flex-shrink: 0;
}
.repository-selection {
  margin: var(--space-6) 0;
  padding: var(--space-5);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg);
}
.repository-selection h2 {
  margin-bottom: var(--space-2);
}
.repository-options,
.repository-profiles {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-4);
}
.repository-options {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.repository-option,
.repository-profile {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  padding: var(--space-4);
  border: 1px solid var(--input-border);
  border-radius: var(--radius);
  background: var(--surface);
  cursor: pointer;
}
.repository-option input,
.repository-profile input {
  accent-color: var(--accent);
  flex: 0 0 auto;
  width: auto;
  margin: var(--space-1) 0 0;
}
.repository-option:has(input:checked),
.repository-profile:has(input:checked) {
  border-color: var(--accent);
  background: var(--accent-subtle);
}
.repository-option .hint,
.repository-profile .hint {
  margin-top: var(--space-1);
}
.repository-profile-group {
  margin: var(--space-6) 0 0;
  padding: 0;
  border: 0;
}
.repository-profile-group legend {
  font-weight: var(--weight-medium);
}
.repository-access-details {
  margin-top: var(--space-5);
  border-top: 1px solid var(--line);
  padding-top: var(--space-4);
}
.repository-access-details summary {
  cursor: pointer;
  font-size: var(--text-md);
  font-weight: var(--weight-medium);
}
.table-scroll {
  overflow-x: auto;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
.agent-table {
  border-collapse: collapse;
  width: 100%;
}
.agent-table th,
.agent-table td {
  padding: var(--space-4);
  text-align: left;
  border-bottom: 1px solid var(--line);
}
.agent-table th {
  background: var(--surface-muted);
  font-size: var(--text-md);
  font-weight: var(--weight-medium);
  color: var(--muted);
}
.agent-table tbody tr {
  cursor: pointer;
}
.agent-table tbody tr:hover {
  background: var(--hover);
}
.agent-table td {
  vertical-align: top;
}
/* A set width and a one-line note, so a landing deployment read neither grows its row nor
   re-flows the columns (finding 1488). The note adds nothing to the column's width. */
.agent-table .agent-deployment::before {
  content: "";
  display: block;
  width: 14rem;
}
/* With the Actions column the table has no spare width at common desktop sizes, so the version
   cell keeps one width whether it reads or shows a number: "Reading version…" wraps inside the
   set width instead of sizing the column, which would hand width to the Agent column when the
   number lands and change its rows' height. */
.agent-table .agent-current-version::before {
  content: "";
  display: block;
  width: 5.5rem;
}
.agent-table .agent-current-version > .delayed-status {
  display: block;
  contain: inline-size;
}
.agent-table .agent-deployment-note {
  contain: inline-size;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
/* Linked revision IDs keep their monospace face and underline. */
.agent-table .agent-revision-link {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: var(--weight-regular);
  color: var(--color-link);
  text-decoration: underline;
}
.agent-table .resource-id {
  display: block;
  margin-top: var(--space-2);
  max-width: 310px;
  overflow-wrap: anywhere;
}
/* A name with a run too long to wrap (collection.mjs marks it; a name may be 200 unbroken
   characters) breaks anywhere within the width its ID takes, so it does not widen the table
   (finding 1955). Other names wrap as before. */
.agent-table .agent-name-unbroken {
  display: inline-block;
  max-width: 310px;
  overflow-wrap: anywhere;
}
/* Name links underline on hover and focus. Revision and deployment links keep their underline. */
.agent-table td:first-child > a {
  color: var(--color-link);
  font-weight: var(--weight-medium);
  text-decoration-color: transparent;
}
.agent-table td:first-child > a:hover,
.agent-table td:first-child > a:focus-visible {
  text-decoration-color: currentColor;
}
.agent-table .badge {
  display: inline-block;
  margin: var(--space-2) var(--space-2) 0 0;
}
.resource-row-actions {
  display: flex;
  gap: var(--space-2);
}
.resource-row-actions .icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  color: var(--muted);
}
.resource-row-actions .icon-button:not(:disabled, [aria-disabled="true"]):hover {
  border-color: var(--danger);
  background: var(--danger-subtle);
  color: var(--danger);
}
.resource-row-actions .icon-button:disabled {
  cursor: not-allowed;
}
/* A refused delete (the trash icon or Request deletion again) stays focusable so its reason is
   reachable (finding D788). It looks like button:disabled, but its icon, label, edge and fill fade
   one by one: opacity on the button would also fade its focus ring (finding 2863). */
.resource-row-actions button[aria-disabled="true"] {
  cursor: not-allowed;
}
.resource-row-actions .icon-button[aria-disabled="true"] {
  color: var(--muted);
  background: color-mix(in srgb, var(--color-surface) 60%, transparent);
  border-color: color-mix(in srgb, var(--color-border-strong) 60%, transparent);
}
.resource-row-actions .icon-button[aria-disabled="true"] > svg {
  opacity: 0.6;
}
.resource-row-actions .button--link[aria-disabled="true"] {
  color: color-mix(in srgb, var(--color-link) 60%, transparent);
}
.action-icon {
  width: 16px;
  height: 16px;
}
.icon-button-spacer {
  width: 34px;
  height: 34px;
}
/* Like the deployment cell: a set width and one reserved note line, so permission advice that
   lands after the first paint neither grows its row nor re-flows the columns. */
.agent-table .agent-row-actions-cell::before {
  content: "";
  display: block;
  width: 10.5rem;
}
.row-action-note {
  display: block;
  height: 16px;
  margin-top: var(--space-2);
  color: var(--muted);
  font-size: var(--text-sm);
  line-height: 16px;
  contain: inline-size;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.agent-list-feedback > .status {
  margin: 0 0 var(--space-5);
}
.agent-tabs {
  display: flex;
  overflow-x: auto;
  max-width: 100%;
  gap: var(--space-4);
  border-bottom: 1px solid var(--line);
  margin-bottom: var(--space-5);
}
.agent-tabs button {
  flex: 0 0 auto;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.agent-tabs [aria-selected="true"] {
  border-bottom: 2px solid var(--accent);
  color: var(--accent);
  font-weight: var(--weight-semibold);
}
/* An edge with more tabs past it fades (detail.mts sets the attributes as the strip scrolls).
   A mask reads only alpha, so the opaque stop may be any opaque colour. */
.agent-tabs[data-more-before] {
  --agent-tabs-fade-before: var(--space-8);
}
.agent-tabs[data-more-after] {
  --agent-tabs-fade-after: var(--space-8);
}
.agent-tabs[data-more-before],
.agent-tabs[data-more-after] {
  /* A tab focused with the arrow keys scrolls clear of the faded edge. */
  scroll-padding-inline: var(--space-8);
  mask-image: linear-gradient(
    to right,
    transparent,
    var(--color-text) var(--agent-tabs-fade-before, 0px),
    var(--color-text) calc(100% - var(--agent-tabs-fade-after, 0px)),
    transparent
  );
}
.notice {
  color: var(--warning);
  padding: var(--space-4);
  background: var(--warning-subtle);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.configuration-summary {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr);
  gap: var(--space-4) var(--space-5);
}
.configuration-summary dt {
  color: var(--muted);
}
.configuration-summary dd {
  margin: 0;
  overflow-wrap: anywhere;
}
.native-document {
  margin-top: var(--space-6);
}
.native-document summary {
  width: fit-content;
  cursor: pointer;
  font-weight: var(--weight-medium);
}
.native-document pre {
  max-height: 480px;
  overflow: auto;
  background: var(--surface-muted);
  padding: var(--space-5);
  border-radius: var(--radius);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.revision-selector .resource-id {
  overflow-wrap: anywhere;
}
.deletion-note,
.stop-note {
  border-color: var(--danger-subtle);
}
.deletion-note .danger,
.stop-note .danger {
  color: var(--danger);
  border-color: var(--danger);
}
.deletion-note .danger:not(:disabled):hover,
.stop-note .danger:not(:disabled):hover {
  background: var(--danger-subtle);
  color: var(--danger);
}
/* Danger zone (UX spec 3.9): one card at the end of the Agent page with a row each for Stop and
   Delete: title and one sentence, the outlined danger button at the right, and any status the
   row reports full width below. The confirmations carry the detail. */
.danger-zone > h2 {
  margin-bottom: var(--space-3);
}
.danger-zone-card {
  padding-block: 0;
}
.danger-zone:not(:has(.danger-zone-row:not([hidden]))) {
  display: none;
}
.danger-zone-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-4);
  align-items: center;
  padding: var(--space-6) 0;
}
.danger-zone-row:not([hidden]) ~ .danger-zone-row {
  border-top: 1px solid var(--color-border);
}
.danger-zone-text h3 {
  margin: 0;
  color: var(--color-text-strong);
  font-size: var(--text-base);
  line-height: var(--text-base--line-height);
  font-weight: var(--weight-semibold);
}
.danger-zone-text p {
  margin: var(--space-1) 0 0;
  font-size: var(--text-md);
  line-height: var(--text-md--line-height);
}
.danger-zone-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
}
.danger-zone-feedback {
  grid-column: 1 / -1;
}
.danger-zone-feedback:empty {
  display: none;
}
.danger-zone-row .danger-zone-feedback > * {
  margin: 0;
}
.danger-zone-row .danger-zone-feedback > * + * {
  margin-top: var(--space-3);
}
.danger-zone-feedback .credential-status-list {
  grid-template-columns: max-content minmax(0, 1fr);
  gap: var(--space-2) var(--space-4);
}
@media (max-width: 520px) {
  .danger-zone-row {
    grid-template-columns: minmax(0, 1fr);
    padding: var(--space-4) 0;
  }
  .danger-zone-actions {
    flex-direction: column;
    align-items: stretch;
  }
}
/* Only the Stop and Delete confirmations' own button is filled; the rows' buttons stay
   outlined. The dialogs sit inside the rows, so these outrank the row rules above. */
.dialog.agent-stop-dialog .danger,
.dialog.agent-delete-dialog .danger {
  background: var(--color-danger);
  border-color: var(--color-danger);
  color: var(--color-on-accent);
}
.dialog.agent-stop-dialog button.danger:not(:disabled):hover,
.dialog.agent-delete-dialog button.danger:not(:disabled):hover {
  background: var(--color-danger);
  color: var(--color-on-accent);
}
.agent-kept-resources {
  margin-top: var(--space-3);
}
.agent-kept-command {
  display: grid;
  justify-items: start;
  gap: var(--space-1);
  margin-top: var(--space-2);
  padding: var(--space-3);
  background: var(--color-surface-2);
  border-radius: var(--radius-sm);
}
.agent-kept-command code {
  font-size: var(--text-sm);
  overflow-wrap: anywhere;
  user-select: all;
}
/* Dialog pattern (UX plan C6): every modal shares this chrome, backdrop, shadow and open motion.
   `--wide` holds a workspace (plugins), `--drawer` sits at the right edge (channels), and at
   760px and below each one is a bottom sheet. Sizes use % of the viewport box a modal dialog
   sits in, which excludes a classic scrollbar's gutter (finding 1520); 100vw would not. */
.dialog {
  --dialog-open-from: translateY(var(--space-2));
  width: min(32rem, calc(100% - 2 * var(--space-4)));
  max-width: calc(100% - 2 * var(--space-4));
  max-height: calc(100% - 2 * var(--space-4));
  padding: var(--space-6);
  overflow: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-2);
}
.dialog--wide {
  width: min(72rem, calc(100% - 2 * var(--space-4)));
  height: min(52rem, calc(100% - 2 * var(--space-4)));
}
.dialog--framed {
  width: min(38rem, calc(100% - 2 * var(--space-4)));
}
.dialog--drawer {
  --dialog-open-from: translateX(var(--space-6));
  width: min(42rem, calc(100% - 2 * var(--space-4)));
  height: calc(100% - 2 * var(--space-4));
  margin: var(--space-4) var(--space-4) var(--space-4) auto;
}
/* One animation name for every variant: a breakpoint change while a dialog is open changes only
   the starting offset, so it does not replay the animation. */
.dialog[open] {
  animation: dialog-open var(--duration-base) var(--ease);
}
.dialog[open]::backdrop {
  animation: dialog-backdrop-open var(--duration-base) var(--ease);
}
/* Cancel first (left), the confirming action last (right). */
.dialog-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-2);
  margin-top: var(--space-5);
}
/* The Secret dialog's grid gap spaces its fields; their page margins would add to it. */
.credential-secret-dialog .form-field {
  margin: 0;
}
.secret-list-heading {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
}
.secret-row {
  padding: var(--space-3) var(--space-10) var(--space-3) var(--space-4);
}
.secret-row::after {
  content: "";
  position: absolute;
  inset: 50% var(--space-4) auto auto;
  width: 6px;
  height: 6px;
  border: solid currentColor;
  border-width: 1px 1px 0 0;
  transform: translateY(-50%) rotate(45deg);
  color: var(--color-link);
  pointer-events: none;
}
.secret-consumers {
  margin-block: 0 var(--space-4);
  padding: var(--space-2) var(--space-3) var(--space-2) var(--space-6);
  background: var(--color-surface-2);
  border-radius: var(--radius-sm);
}
.secret-value-field {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}
.secret-value-field > label {
  margin: 0;
}
.secret-value-field > :not(label, button) {
  grid-column: 1 / -1;
}
.secret-value-field > button {
  color: var(--color-link);
}
.secret-value--masked {
  -webkit-text-security: disc;
}
.secret-dialog h3,
.secret-dialog h4 {
  margin-top: var(--space-4);
}
.secret-dialog h4 {
  margin-bottom: var(--space-1);
}
@keyframes dialog-open {
  from {
    opacity: 0;
    transform: var(--dialog-open-from);
  }
}
@keyframes dialog-backdrop-open {
  from {
    opacity: 0;
  }
}
/* The sheet sits on the bottom of the visible area: an on-screen keyboard shrinks only that area,
   which dom.mjs `trackVisualViewport` mirrors into these insets (finding 1957). They are 0 unless
   a keyboard or zoom is up, and resolve against the layout viewport the fixed dialog sits in. */
@media (max-width: 760px) {
  .dialog,
  .dialog--wide,
  .dialog--drawer {
    --dialog-open-from: translateY(var(--space-8));
    width: 100%;
    max-width: 100%;
    height: fit-content;
    top: var(--visual-viewport-top, 0px);
    bottom: var(--visual-viewport-bottom, 0px);
    max-height: calc(
      100% - var(--visual-viewport-top, 0px) - var(--visual-viewport-bottom, 0px) - var(--space-8)
    );
    margin: auto 0 0;
    padding: var(--space-4);
    border-bottom: 0;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  }
  .dialog--wide {
    height: calc(
      100% - var(--visual-viewport-top, 0px) - var(--visual-viewport-bottom, 0px) - var(--space-8)
    );
  }
}
@media (prefers-reduced-motion: reduce) {
  .dialog[open],
  .dialog[open]::backdrop {
    animation: none;
  }
}
.dialog::backdrop {
  background: var(--color-overlay);
}
/* The native backdrop stops before a classic scrollbar gutter. Paint the same tint over the
   root canvas there; body keeps its own background so the page is dimmed only once. */
@media (forced-colors: none) {
  :root:has(.dialog:modal) {
    background-color: color-mix(in srgb, var(--color-overlay-mix), var(--color-canvas));
    transition: background-color var(--duration-base) var(--ease);
    scrollbar-color: var(--color-text-muted) transparent;
  }
  body {
    scrollbar-color: auto;
  }
}
/* A framed dialog keeps its destination in the header and its actions together in the footer. */
.dialog--framed {
  padding: 0;
}
.dialog-header,
.dialog-body,
.dialog--framed > .dialog-actions {
  padding: clamp(var(--space-4), 4vw, var(--space-6));
  overflow-wrap: anywhere;
}
.dialog-header p {
  margin-bottom: var(--space-2);
  font-size: var(--text-md);
  color: var(--color-on-inverse-muted);
}
.dialog-header h2 {
  margin: 0;
  color: inherit;
  font-size: var(--text-2xl);
  font-weight: var(--weight-semibold);
  line-height: var(--text-2xl--line-height);
  letter-spacing: var(--tracking-tight);
}
.dialog-body .field:first-child {
  margin-top: 0;
}
.dialog-body > :not(:first-child, :empty) {
  margin-top: var(--space-4);
}
.dialog-body p:last-child,
.dialog-body .status:last-child {
  margin-bottom: 0;
}
.dialog--framed > .dialog-actions {
  margin: 0;
  padding-block: var(--space-4);
  border-top: 1px solid var(--color-border);
  background: var(--color-surface-2);
}
@media (max-width: 760px) {
  .agent-card {
    padding: var(--space-4);
  }
  .deployment-progress {
    grid-template-columns: 1fr;
  }
  .repository-options {
    grid-template-columns: 1fr;
  }
  .configuration-summary {
    grid-template-columns: 1fr;
    gap: var(--space-2);
  }
  .configuration-summary dd {
    margin-bottom: var(--space-3);
  }
}
/* Phone: each Agent is a stacked row, its name and ID first, then each cell beside its column's
   name (`data-label`), so nothing scrolls sideways. The header row stays for screen readers. */
@media (max-width: 760px) {
  .agent-table,
  .agent-table tbody {
    display: block;
  }
  .agent-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .agent-table tbody tr {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: var(--space-2) var(--space-3);
    padding: var(--space-4);
    border-bottom: 1px solid var(--color-border);
  }
  .agent-table tbody tr:last-child {
    border-bottom: 0;
  }
  .agent-table td {
    grid-column: 1 / -1;
    min-width: 0;
    padding: 0;
    border-bottom: 0;
    overflow-wrap: anywhere;
  }
  .agent-table td[data-label] {
    display: grid;
    grid-template-columns: subgrid;
    align-items: baseline;
    row-gap: var(--space-1);
  }
  .agent-table td[data-label]::before {
    content: attr(data-label);
    /* The hidden header row already names the column for screen readers. */
    content: attr(data-label) / "";
    width: auto;
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
  }
  /* The outcome link and its note line keep two lines reserved while the read is pending, so a
     landing read does not grow the row (finding 1488). */
  .agent-table .agent-deployment {
    grid-template-rows: auto calc(var(--text-sm) * var(--text-sm--line-height));
  }
  .agent-table .agent-deployment::before {
    grid-row: span 2;
  }
  /* The row actions and their reserved note line sit beside one label, like the deployment. */
  .agent-table .agent-row-actions-cell::before {
    grid-row: span 2;
  }
  .agent-table .row-action-note {
    margin-top: 0;
  }
  .agent-table .resource-id {
    margin-top: var(--space-2);
    max-width: none;
  }
  .agent-table .agent-name-unbroken {
    display: inline;
    overflow-wrap: inherit;
  }
  .agent-table .agent-deployment-note {
    margin-top: 0;
  }
}
/* Narrow phones put each column's name above its value, so values keep the row's full width. */
@media (max-width: 520px) {
  .agent-table td[data-label] {
    grid-template-columns: minmax(0, 1fr);
  }
  .agent-table .agent-deployment {
    grid-template-rows: auto auto calc(var(--text-sm) * var(--text-sm--line-height));
  }
  .agent-table .agent-deployment::before,
  .agent-table .agent-row-actions-cell::before {
    grid-row: auto;
  }
}

.configuration-editor {
  min-height: 340px;
  resize: vertical;
  font: var(--text-md)/1.6 var(--font-mono);
  tab-size: 2;
}

.workspace-files .configuration-editor {
  min-height: 200px;
}
/* Save stays focusable when the caller lacks Agent operate (aria-disabled, not disabled), so it
   takes the disabled look here. */
.workspace-files button[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.6;
}

.credential-status-list {
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr);
  gap: var(--space-3) var(--space-4);
  margin: var(--space-5) 0 var(--space-1);
}
.credential-status-list dt {
  color: var(--muted);
}
.credential-status-list dd {
  margin: 0;
}
/* A status such as "Bound · not read by the Slack settings · Agent access not confirmed" is wider
   than a phone's value column, so it wraps inside the column rather than widening the page
   (finding 2852). */
.credential-status-list .badge {
  white-space: normal;
  overflow-wrap: anywhere;
}
/* Channel Secrets also lists environment keys, which can outgrow the label column. */
.channel-secrets .credential-status-list {
  grid-template-columns: minmax(130px, max-content) minmax(0, 1fr);
}
.channel-secrets .credential-status-list dt {
  max-width: 20rem;
  overflow-wrap: anywhere;
}
.credential-actions {
  justify-content: flex-start;
}
.credential-form {
  margin-top: var(--space-3);
}

/* The Access tab (spec 3.8): a Share Agent card, then a Direct Agent grants card. */
.agent-access {
  display: grid;
  gap: var(--space-6);
}
.agent-access > .card > h3:first-child {
  margin: 0 0 var(--space-4);
  font-size: var(--text-lg);
  line-height: var(--text-lg--line-height);
  font-weight: var(--weight-semibold);
}
.agent-access-share > .status {
  margin-block: var(--space-3);
}

.agent-access-form {
  display: grid;
  gap: var(--space-3);
  max-width: 44rem;
}

/* The grid gap spaces the form; a field's help and the acknowledgement's error sit under their
   control, as in every other field (UX plan C3). */
.agent-access-form > .form-field {
  margin: 0;
}

.agent-access-form > .form-field + .hint,
.agent-access-form > .field-error {
  margin-top: calc(var(--space-1) - var(--space-3));
}

.agent-access-consent {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
}

.agent-access-consent input {
  width: auto;
}

.agent-access-grant {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-3);
  overflow-wrap: anywhere;
}

.agent-access-grant p {
  margin-block: var(--space-1);
}

.agent-access-progress {
  padding-left: var(--space-4);
  line-height: 1.6;
}

.plugin-fields {
  margin-block: var(--space-5);
}
.slack-approver-field {
  display: grid;
  gap: var(--space-2);
  margin-block: var(--space-4);
  padding: var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}
.slack-approver-field[hidden],
.slack-directory-field[hidden],
.slack-directory-panel[hidden],
.slack-directory-pagination[hidden],
.slack-directory-panel button[hidden] {
  display: none;
}
.slack-approver-field label,
.slack-directory-field > label {
  display: grid;
  gap: var(--space-2);
  font-weight: var(--weight-medium);
}
/* The select sits inside its label: it takes the shared control style and the body weight, not
   the label's (finding 2401). */
.slack-approver-field select {
  font-weight: var(--weight-regular);
}
.slack-approver-field .hint,
.slack-directory-field .hint,
.slack-directory-field .status {
  margin: 0;
}
.slack-directory-field {
  position: relative;
  display: grid;
  gap: var(--space-2);
  margin-block: var(--space-4);
  min-width: 0;
}
.slack-directory-field p:empty,
.slack-directory-workspace:empty,
.slack-directory-chips:empty {
  display: none;
}
.slack-directory-input {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--input-border);
  border-radius: var(--radius-md);
  background: var(--surface);
}
.slack-directory-input input {
  flex: 1 1 15rem;
  width: auto;
  min-width: 0;
  padding: var(--space-1) 0;
  border: 0;
  box-shadow: none;
  outline: none;
  background: transparent;
}
.slack-directory-chips {
  display: contents;
}
.slack-directory-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  max-width: 100%;
  padding: var(--space-1) var(--space-1) var(--space-1) var(--space-2);
  background: var(--surface-muted);
  border-radius: var(--radius-sm);
  font-weight: var(--weight-semibold);
  overflow-wrap: anywhere;
}
.slack-directory-chip button {
  padding: 0 var(--space-1);
  border: 0;
  background: transparent;
  font-size: var(--text-lg);
  line-height: 1.2;
}
.slack-directory-panel {
  position: absolute;
  z-index: 20;
  inset: calc(100% + var(--space-1)) 0 auto;
  background: var(--surface);
  display: grid;
  gap: var(--space-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  box-shadow: var(--shadow);
}
.slack-directory-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}
.slack-directory-results {
  display: grid;
  gap: var(--space-1);
  max-height: 16rem;
  overflow: auto;
}
.slack-directory-result {
  width: 100%;
  text-align: left;
  border: 0;
}
.slack-directory-result.active {
  background: var(--surface-muted);
}
.slack-directory-result span {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}
.slack-directory-result code {
  margin-left: auto;
  font-size: var(--text-xs);
}
.plugin-dialog {
  overflow: hidden;
}
.plugin-dialog[open] {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.plugin-dialog > p {
  margin: 0;
  flex-shrink: 0;
}
.plugin-dialog > p:empty {
  display: none;
}
.plugin-access-help,
.plugin-setup-reminder {
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}
.plugin-access-help {
  flex-shrink: 0;
}
.plugin-access-help > .hint {
  margin: 0;
  font-size: var(--text-sm);
}
.plugin-access-details {
  margin-top: var(--space-2);
  font-size: var(--text-sm);
}
.plugin-access-details > summary {
  width: fit-content;
  cursor: pointer;
  font-weight: var(--weight-medium);
}
.plugin-access-instructions {
  max-height: min(12rem, 25dvh);
  margin-top: var(--space-3);
  overflow: auto;
  overscroll-behavior: contain;
}
.plugin-access-instructions > .hint {
  margin-top: 0;
}
.plugin-dialog-header,
.plugin-detail-header,
.plugin-tool-heading,
.plugin-list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}
.plugin-dialog-header h2,
.plugin-detail-header h3 {
  margin: 0;
}
.plugin-dialog-header {
  flex-shrink: 0;
}
.plugin-workspace {
  display: grid;
  grid-template-columns: minmax(15rem, 18rem) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  flex: 1;
  min-height: 0;
  gap: var(--space-6);
}
.plugin-browser,
.plugin-detail {
  min-width: 0;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
}
.plugin-browser {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  /* Room for the focus ring of the search field and the buttons at the scroller's edge. */
  padding: var(--space-2) var(--space-4) var(--space-2) var(--space-2);
  border-right: 1px solid var(--line);
}
.plugin-browser > :not(.plugin-list) {
  flex-shrink: 0;
}
.plugin-browser .form-field,
.plugin-browser-status .hint {
  margin: 0;
}
.plugin-browser-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}
.plugin-loading {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.plugin-loading::before {
  content: "";
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  border: 2px solid var(--line);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: plugin-loading-spin 0.8s linear infinite;
}
@keyframes plugin-loading-spin {
  to {
    transform: rotate(360deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .plugin-loading::before {
    animation: none;
  }
}
.plugin-browser-status button {
  flex-shrink: 0;
}
.plugin-tabs,
.plugin-pagination {
  display: flex;
  gap: var(--space-2);
}
.plugin-tabs button,
.plugin-pagination button {
  flex: 1;
  padding: var(--space-2);
  font-size: var(--text-md);
}
.plugin-pagination {
  padding-top: var(--space-3);
  border-top: 1px solid var(--line);
}
.plugin-tabs [aria-pressed="true"],
.plugin-list-item[aria-current="true"] {
  background: var(--color-accent-subtle);
  border-color: var(--accent);
}
.plugin-list-item {
  /* A list row, not a button: the light edge, like the version list. */
  border-color: var(--line);
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-2);
  width: 100%;
  text-align: left;
  overflow-wrap: anywhere;
}
.plugin-identity {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
  overflow-wrap: anywhere;
}
.plugin-logo {
  position: relative;
  display: grid;
  place-items: center;
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: var(--color-surface-2);
  color: var(--muted);
  font-size: var(--text-base);
}
.plugin-logo img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: var(--color-surface);
}
.plugin-detail-header .plugin-logo {
  flex-basis: 40px;
  width: 40px;
  height: 40px;
}
.plugin-list-item .badge {
  align-self: flex-start;
  /* Under the name: the 32px logo plus the identity gap. */
  margin-left: calc(32px + var(--space-3));
}
.plugin-detail-empty {
  margin: var(--space-12) var(--space-8);
  text-align: center;
}
.plugin-back {
  display: none;
}
.plugin-list {
  display: grid;
  align-content: start;
  flex: 1;
  min-height: 0;
  overflow: auto;
  gap: var(--space-2);
  padding: var(--space-1);
}
.plugin-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: var(--space-4);
}
.plugin-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: var(--space-3);
  margin-block: var(--space-3);
}
.plugin-control {
  display: grid;
  gap: var(--space-1);
  flex: 1 1 12rem;
}
.plugin-toggle {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.plugin-actions-trigger {
  margin-inline-start: auto;
}
.plugin-actions {
  inset: auto;
  position-area: bottom span-left;
  position-try-fallbacks: flip-block;
  margin: var(--space-1) 0;
}
.plugin-toggle input {
  width: auto;
}
/* Collaboration and safety toggles above the Configuration JSON editor. */
.gateway-safety {
  display: grid;
  gap: var(--space-3);
  margin-block: var(--space-4) var(--space-6);
  max-width: var(--prose-max);
}
.gateway-safety h3,
.gateway-safety > p {
  margin: 0;
}
.gateway-safety-settings {
  display: grid;
  gap: var(--space-3);
  padding-left: var(--space-6);
}
.gateway-safety-toggle {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: var(--weight-medium);
}
.gateway-safety-toggle input {
  width: auto;
  min-height: 0;
  margin: 0;
}
.gateway-safety-setting .field-help {
  margin: var(--space-1) 0 0;
}
.gateway-safety-source {
  font-weight: var(--weight-medium);
}
.plugin-tool {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  margin-block: var(--space-3);
  min-width: 0;
}
.plugin-tool-row {
  margin-block: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}
.plugin-tool-row > summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: var(--space-4);
  cursor: pointer;
  overflow-wrap: anywhere;
}
.plugin-tool-row > summary .plugin-tool-heading,
.plugin-tool-row > summary .plugin-id,
.plugin-tool-description {
  grid-column: 1;
}
.plugin-tool-actions {
  display: flex;
  grid-column: 2;
  grid-row: 1 / span 2;
  justify-content: flex-end;
  align-items: center;
  gap: var(--space-4);
}
.plugin-tool-policy-action::after {
  content: " ▾";
}
.plugin-tool-row[open] .plugin-tool-policy-action::after {
  content: " ▴";
}
.plugin-tool-switch {
  appearance: none;
  position: relative;
  flex: 0 0 36px;
  width: 36px;
  height: 20px;
  margin: 0;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-pill);
  background: var(--color-surface-2);
  cursor: pointer;
}
.plugin-tool-switch::before {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  top: 2px;
  left: 2px;
  border-radius: 50%;
  background: var(--color-surface);
}
.plugin-tool-switch:checked {
  background: var(--accent);
}
.plugin-tool-switch:checked::before {
  left: 18px;
}
.plugin-tool-switch:indeterminate::before {
  width: 14px;
  height: 2px;
  top: 8px;
  left: 10px;
  border-radius: 0;
  background: var(--accent);
}
.plugin-tool-switch:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.plugin-tool-description {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  margin-top: var(--space-2);
}
.plugin-tool-row .plugin-tool {
  border: 0;
  padding: 0;
}
.plugin-id {
  overflow-wrap: anywhere;
}
.plugin-json > summary {
  cursor: pointer;
  font-weight: var(--weight-medium);
  padding: var(--space-2) 0;
}
.plugin-json textarea {
  display: block;
  width: 100%;
  height: 16rem;
  min-height: 8rem;
  max-height: 32rem;
  margin-top: var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--text-md);
  line-height: 1.5;
  resize: vertical;
}
.plugin-json {
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--line);
}
@media (max-width: 1100px) {
  .plugin-tool-row > summary {
    grid-template-columns: minmax(0, 1fr);
  }
  .plugin-tool-actions {
    grid-column: 1;
    grid-row: auto;
    margin-top: var(--space-3);
  }
  .plugin-dialog {
    padding: var(--space-4);
  }
  .plugin-workspace {
    grid-template-columns: minmax(0, 1fr);
  }
  .plugin-browser {
    border: 0;
    padding: var(--space-2);
  }
  .plugin-workspace[data-show-details="true"] .plugin-browser,
  .plugin-workspace[data-show-details="false"] .plugin-detail {
    display: none;
  }
  .plugin-back {
    display: inline-block;
    margin-bottom: var(--space-4);
  }
}

/* Progressive disclosure keeps the launch form focused on everyday choices. */
/* The start cards keep the card's own padding, which narrows on a phone (finding 2404). */
.launch-intro {
  margin: var(--space-5) 0;
}
/* A card heading sits a step under the page title on the type scale (finding 2097). */
.launch-intro h2 {
  font-size: var(--text-xl);
  line-height: var(--text-xl--line-height);
  margin-bottom: var(--space-3);
}
.launch-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}
.launch-preset {
  margin-top: var(--space-5);
}
.launch-preset fieldset {
  border: 0;
  padding: 0;
  margin: 0;
}
.launch-preset legend {
  display: none;
}
.launch-advanced,
.launch-runtime,
.repository-customize {
  border-top: 1px solid var(--line);
  padding-top: var(--space-4);
  margin-top: var(--space-5);
}
.launch-advanced > summary,
.launch-runtime > summary,
.repository-customize > summary {
  cursor: pointer;
  font-weight: var(--weight-medium);
  padding: var(--space-2) 0;
}
.repository-profiles {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.repository-option > span,
.repository-profile > span {
  min-width: 0;
  overflow-wrap: anywhere;
}
.launch-advanced[open] > .form-field:first-of-type {
  margin-top: var(--space-5);
}
@media (max-width: 760px) {
  .repository-profiles {
    grid-template-columns: 1fr;
  }
  .repository-selection {
    padding: var(--space-4);
  }
  .agent-tabs {
    gap: var(--space-1);
  }
}

.harness-auth-fields {
  border: 0;
  border-top: 1px solid var(--line);
  padding: var(--space-5) 0 0;
  margin: var(--space-8) 0 0;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--space-5);
}
.harness-auth-fields > legend {
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  padding-right: var(--space-3);
  /* The heading's gap above the first field label (finding 2402). */
  margin-bottom: var(--space-3);
}
.harness-auth-fields > .form-field {
  margin: 0 0 var(--space-4);
}
.harness-auth-fields > :not(.form-field),
.harness-auth-fields > .form-field:has(#provider-api-key) {
  grid-column: 1 / -1;
}
.harness-auth-fields .model-selection .form-field {
  margin-bottom: 0;
}
.launch-intro,
.launch-preset,
#create-agent-form ~ .create-channels,
#create-agent-form ~ p[role="alert"],
#create-agent-form ~ p[role="status"],
#create-agent-form ~ .form-actions {
  max-width: 960px;
}
/* A Preset fills a form taller than the window, so Create Agent stays in view at its foot
   instead of two screens down (finding 2098). */
#create-agent-form ~ .form-actions {
  position: sticky;
  bottom: 0;
  z-index: 1;
  padding-block: var(--space-3);
  border-top: 1px solid var(--color-border);
  background: var(--color-canvas);
}
/* Keyboard focus scrolls a control into view above that row, not under it. Two rows of buttons
   fit on a phone. */
html:has(#create-agent-form) {
  scroll-padding-bottom: calc(2 * var(--control-h) + 2 * var(--space-3) + var(--space-4));
}
.repository-customize .repository-option {
  margin-top: var(--space-4);
}
@media (max-width: 760px) {
  .harness-auth-fields {
    grid-template-columns: 1fr;
  }
}

/* Repository discovery and the selected access stack share one column. */
.repository-options {
  grid-template-columns: minmax(0, 1fr);
}
.repository-results-heading,
.repository-selected-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}
.repository-results-heading {
  flex-wrap: wrap;
  margin: var(--space-5) 0 var(--space-3);
}
.repository-results-heading h3 {
  color: var(--text-strong);
  font-size: var(--text-lg);
  margin: 0;
}
.repository-results-heading p {
  margin: 0;
}
.repository-results-list {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}
.repository-result-row {
  display: flex;
}
.repository-result-row + .repository-result-row {
  margin-top: -1px;
}
.repository-result {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: start;
  gap: var(--space-3);
  width: 100%;
  min-height: 44px;
  padding: var(--space-3);
  border: 1px solid var(--input-border);
  background: var(--surface);
  cursor: pointer;
  text-align: left;
  transition:
    background-color 160ms ease,
    border-color 160ms ease;
}
.repository-result-row:first-child .repository-result {
  border-radius: var(--radius) var(--radius) 0 0;
}
.repository-result-row:last-child .repository-result {
  border-radius: 0 0 var(--radius) var(--radius);
}
.repository-result-row:only-child .repository-result {
  border-radius: var(--radius);
}
.repository-result:hover:has(input:not(:disabled)) {
  background: var(--surface-muted);
}
.repository-result:has(input:checked) {
  position: relative;
  border-color: var(--accent);
  background: var(--accent-subtle);
}
.repository-result:has(input:checked):hover {
  background: var(--accent-subtle);
}
.repository-result-row:has(input:checked)
  + .repository-result-row:has(input:checked)
  .repository-result {
  border-top-color: var(--line);
}
.repository-result:has(input:focus-visible) {
  position: relative;
  z-index: 1;
}
.repository-result:has(input:disabled) {
  cursor: not-allowed;
}
.repository-result input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin: var(--space-1) 0 0;
}
.repository-identity {
  display: grid;
  gap: var(--space-1);
  min-width: 0;
  overflow-wrap: anywhere;
}
.repository-identity strong {
  color: var(--text-strong);
}
.repository-approval {
  color: var(--warning);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
}
.repository-result-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-2);
  min-width: 0;
  color: var(--muted);
  font-size: var(--text-sm);
  overflow-wrap: anywhere;
}
.repository-description {
  color: var(--muted);
  font-size: var(--text-md);
}
.repository-identity .hint,
.repository-identity .error {
  margin: 0;
  font-size: var(--text-md);
}
.repository-discovery > label {
  display: block;
  margin-bottom: var(--space-2);
  font-weight: var(--weight-medium);
}
.repository-discovery input[type="search"] {
  min-height: 44px;
}
.repository-selected {
  margin-top: var(--space-6);
}
.repository-selected-heading {
  flex-wrap: wrap;
  margin-bottom: var(--space-3);
}
.repository-selected-heading h3 {
  margin: 0;
  font-size: var(--text-lg);
}
.repository-card {
  background: var(--surface);
  border: 1px solid var(--input-border);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  margin: var(--space-2) 0;
}
.repository-card-heading {
  display: flex;
  align-items: center;
  padding-right: var(--space-1);
}
.repository-card-toggle {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex: 1;
  min-width: 0;
  min-height: 68px;
  padding: var(--space-4) var(--space-3);
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  text-align: left;
}
.repository-card-toggle:hover,
.repository-remove:hover {
  background: var(--surface-muted);
}
.repository-chevron {
  display: inline-block;
  width: 8px;
  height: 8px;
  flex-shrink: 0;
  border: solid currentColor;
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(-45deg);
  margin: 0 var(--space-1) 0 var(--space-1);
}
.repository-card-toggle[aria-expanded="true"] > .repository-chevron,
.repository-customize[open] > summary > .repository-chevron {
  transform: rotate(45deg);
}
.repository-customize > summary {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  list-style: none;
}
.repository-customize > summary::-webkit-details-marker {
  display: none;
}
.repository-text-action,
.repository-remove {
  min-width: var(--touch-min);
  min-height: var(--touch-min);
}
.repository-remove {
  flex-shrink: 0;
}
.repository-access-summary {
  justify-self: start;
  max-width: 100%;
  white-space: normal;
}
.repository-card-settings {
  padding: var(--space-4);
  background: var(--surface-muted);
  border-top: 1px solid var(--line);
  border-radius: 0 0 var(--radius) var(--radius);
}
.repository-card-settings .repository-option {
  padding: var(--space-2) 0;
  border: 0;
  background: transparent;
}
.repository-card-settings .repository-profiles {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (max-width: 520px) {
  .repository-card-settings .repository-profiles {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (prefers-reduced-motion: reduce) {
  .repository-result {
    transition: none;
  }
}

.plugin-external-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  font-size: var(--text-md);
}
.plugin-external-links:empty {
  display: none;
}
.plugin-access-help > p {
  margin: 0 0 var(--space-2);
}
.plugin-access-help {
  flex-shrink: 0;
}
.plugin-list-row {
  position: relative;
}
.plugin-list-item:has(+ .plugin-unavailable-trigger) {
  padding-right: var(--space-12);
}
.plugin-unavailable-trigger {
  position: absolute;
  top: 10px;
  right: 10px;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--muted);
}
.plugin-unavailable-trigger span {
  width: 16px;
  height: 16px;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  line-height: 13px;
}
.plugin-unavailable-popover {
  inset: auto;
  position-area: bottom span-right;
  position-try-order: most-height;
  position-try-fallbacks:
    flip-inline,
    flip-block,
    flip-inline flip-block;
  width: 20rem;
  max-width: calc(100vw - 32px);
  margin: var(--space-2);
  padding: var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--text);
  background: var(--surface);
  box-shadow: var(--shadow);
}
.plugin-unavailable-popover .plugin-unavailable {
  margin: 0;
  font-size: var(--text-md);
  overflow-wrap: anywhere;
}
.plugin-setup-reminder {
  margin-top: var(--space-4);
}

/* Keep mobile form text readable without browser focus zoom. */
@media (max-width: 760px) {
  input,
  select,
  textarea {
    font-size: 16px;
  }
}

/* Held back until the Logs view's first reads settle (finding 1413). */
.agent-logs-pending > .runtime-strip,
.agent-logs-pending > .log-viewer {
  display: none;
}
/* The cards below a pending Logs view appear where the shown view puts them (finding 1479). */
.agent-logs-opening > .danger-zone {
  visibility: hidden;
}
/* Pod cards share the panel's width: auto-fit collapses the empty columns that left one or two
   cards near the 260 px minimum with the rest of the row blank (finding 2100). */
.runtime-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: var(--space-3);
  margin: var(--space-2) 0 var(--space-5);
}
.runtime-pod {
  min-width: 0;
  overflow-wrap: break-word;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  padding: var(--space-3) var(--space-4);
}
.runtime-pod h4 {
  margin: 0;
}
.runtime-pod .credential-status-list {
  grid-template-columns: 120px minmax(0, 1fr);
  margin: var(--space-2) 0 0;
}
.runtime-events {
  margin: var(--space-3) 0 0;
  padding-left: var(--space-5);
  color: var(--warning);
  font-size: var(--text-md);
}
.runtime-events-note {
  margin: var(--space-3) 0 0;
  font-size: var(--text-md);
}
.runtime-events-note + .runtime-events {
  margin-top: var(--space-1);
}
.runtime-events-settled {
  color: var(--muted);
}
.log-viewer {
  /* Log rows size to this card, not the window: above 1100 px the card sits beside the
     version list in a pane narrower than at 1001-1100 px (finding 1713). */
  container: log-viewer / inline-size;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
}
.log-viewer-header {
  padding: var(--space-5) var(--space-5) 0;
}
.log-viewer-header h3 {
  margin: 0 0 var(--space-2);
  color: var(--text-strong);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
}
.log-safety {
  margin: 0;
  color: var(--muted);
  font-size: var(--text-sm);
  line-height: 1.6;
}
.log-controls {
  padding: var(--space-5) var(--space-5) var(--space-4);
}
.log-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: var(--space-4) var(--space-4);
}
.log-picker {
  display: flex;
  flex: 1 1 200px;
  flex-direction: column;
  min-width: 0;
  gap: var(--space-2);
}
.log-picker label,
.log-search label,
.log-filter-label {
  color: var(--muted);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
}
.log-picker select,
.log-search input {
  width: 100%;
  min-width: 0;
  min-height: 36px;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
}
.log-picker select:not(:disabled, [aria-disabled="true"]):hover,
.log-search input:hover {
  border-color: var(--input-border);
}
.log-picker select:disabled,
.log-picker select.control-unavailable {
  color: var(--muted);
}
.log-pod-picker {
  flex-basis: 260px;
}
.log-options {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-4);
  min-height: 36px;
}
.log-option {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-md);
  white-space: nowrap;
}
.log-option input {
  width: 15px;
  height: 15px;
  margin: 0;
}
.log-option:has(input:disabled),
.log-option:has(input.control-unavailable) {
  color: var(--muted);
}
.log-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-left: auto;
}
.log-actions button {
  white-space: nowrap;
}
.log-follow[aria-pressed="true"] {
  border-color: var(--success);
  color: var(--success);
  background: var(--success-subtle);
}
.log-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-5);
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--line);
}
.log-levels {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}
.log-filter-label {
  margin-right: var(--space-1);
}
.log-search {
  display: flex;
  flex: 1 1 200px;
  align-items: center;
  min-width: 0;
  gap: var(--space-2);
}
.log-filter-status,
.log-retention {
  margin: var(--space-3) 0 0;
  color: var(--muted);
  font-size: var(--text-sm);
  line-height: 1.6;
}
.log-retention {
  margin: 0;
  padding: var(--space-3) var(--space-5);
  border-top: 1px solid var(--line);
  background: var(--bg);
}
.log-retention:empty,
.log-output-status:empty {
  display: none;
}
.log-source-hint,
.log-error {
  margin: 0 var(--space-5) var(--space-4);
}
.log-output-status {
  margin: 0;
  padding: var(--space-3) var(--space-5);
  border-top: 1px solid var(--line);
  color: var(--muted);
  background: var(--bg);
  font-size: var(--text-sm);
  overflow-wrap: anywhere;
}
.log-pane {
  max-height: 60vh;
  overflow: auto;
  border-top: 1px solid var(--line);
  background: var(--surface);
  font: var(--text-sm)/1.6 var(--font-mono);
}
.log-row {
  padding: var(--space-2) var(--space-4) var(--space-2) var(--space-8);
  border-bottom: 1px solid var(--line);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.log-row:last-child {
  border-bottom: 0;
}
.log-row[data-level="error"] {
  background: var(--danger-subtle);
}
.log-row summary {
  position: relative;
  display: block;
  /* Keyboard scrolling stops short of the pane edge, so the ring outside the summary shows. */
  scroll-margin-block: var(--space-2);
  cursor: pointer;
  list-style: none;
}
.log-row summary::-webkit-details-marker {
  display: none;
}
.log-row summary::before {
  position: absolute;
  left: -18px;
  color: var(--muted);
  content: "▸";
}
.log-row[open] summary::before {
  content: "▾";
}
.log-line {
  /* Reserve room for UNKNOWN so the columns after shorter level labels stay aligned, even when
     the row is short of room. */
  --log-level-column: minmax(6.5em, max-content);
  /* Fit a whole timestamp with its UTC offset on one line (findings 1681, 1861). The console
     measures the widest one its locale and time zone can show and sets --log-time-width (px,
     with 4 px of slack) and --log-time-ems (the text in 11px ems) on the pane. Until then: 33
     characters of the 11px time, as in en-US "12/31/2026, 12:59:59 PM GMT+10:30". ch is the
     row's 12px character. */
  --log-time-column: var(--log-time-width, calc(33ch * 11 / 12));
  /* Where the message moves below: the time takes the room the level (6.5em), the narrowest
     origin (60px) and two 10px gaps leave, up to its width, and any room beyond. In a card too
     narrow for a long timestamp its text shrinks to fit (.log-time-text). */
  --log-time-track: minmax(min(var(--log-time-column), 100% - 6.5em - 80px), 1fr);
  display: grid;
  grid-template-columns:
    var(--log-time-column) var(--log-level-column) minmax(72px, 112px)
    minmax(0, 1fr);
  align-items: baseline;
  gap: var(--space-3);
}
.log-time {
  /* A size container, so the text below can shrink to a cell narrower than the measured width
     (a phone layout with a long timestamp, such as ko-KR "2026. 12. 31. 오후 12시 59분 59초
     GMT+10:30") instead of wrapping. Each row's cell is the same width, so columns stay aligned. */
  container-type: inline-size;
  color: var(--muted);
  font-size: var(--text-xs);
}
.log-time-text {
  font-size: min(var(--text-xs), (100cqi - 4px) / var(--log-time-ems, 19.4));
  white-space: nowrap;
}
.log-time-probe {
  position: absolute;
  visibility: hidden;
  font-size: var(--text-xs);
  white-space: nowrap;
  pointer-events: none;
}
.log-time-probe > span {
  display: block;
}
.log-level {
  width: fit-content;
  padding: 1px var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--surface-muted);
  font-family: var(--font-sans);
  /* UNKNOWN has to fit the 6.5em (78px) level column the log grid reserves; at --text-xs with
     --tracking-caps it is 83px and pushes that row's origin and message out of line. */
  font-size: 10px;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.log-origin {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--space-2);
  color: var(--muted);
  white-space: normal;
}
.log-content {
  min-width: 0;
}
.log-code,
.log-provenance,
.log-join {
  display: block;
  margin-top: var(--space-1);
  color: var(--muted);
  font-size: var(--text-xs);
}
.log-code {
  color: inherit;
}
.log-join {
  font-style: italic;
}
.log-level-error {
  color: var(--danger);
}
.log-level-warn {
  color: var(--warning);
}
.log-level.log-level-error {
  background: var(--danger-subtle);
}
.log-level.log-level-warn {
  background: var(--warning-subtle);
}
.log-row-gap,
.log-row-withheld {
  padding-top: var(--space-2);
  padding-bottom: var(--space-2);
  color: var(--muted);
  background: var(--surface-muted);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  white-space: normal;
}
.log-row-gap {
  color: var(--warning);
  background: var(--warning-subtle);
}
.log-fields {
  display: grid;
  grid-template-columns: minmax(80px, 160px) minmax(0, 1fr);
  gap: var(--space-2) var(--space-3);
  margin: var(--space-3) 0 var(--space-1);
  padding: var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--bg);
}
.log-fields dt {
  color: var(--muted);
}
.log-fields dd {
  margin: 0;
}
.log-chip {
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-pill);
  font-size: var(--text-sm);
}
.log-chip[aria-pressed="true"] {
  border-color: var(--input-border);
  background: var(--surface-muted);
}
.log-chip.log-level-error[aria-pressed="true"] {
  border-color: var(--danger);
  background: var(--danger-subtle);
}
.log-chip.log-level-warn[aria-pressed="true"] {
  border-color: var(--warning);
  background: var(--warning-subtle);
}
.log-chip[aria-pressed="false"] {
  border-color: var(--line);
  color: var(--muted);
  text-decoration: line-through;
}
@container log-viewer (width < 762px) {
  .log-line {
    grid-template-columns:
      var(--log-time-column) var(--log-level-column) minmax(60px, 88px)
      minmax(0, 1fr);
    gap: var(--space-2);
  }
}
/* In a card narrower than 662 px a whole timestamp would leave the message column under 200 px
   (48 px row padding, en-US's 218 px time, 78 px level, 88 px origin and 24 px of gaps), so the
   message moves below the time, level and origin, as it does on phones (findings 1681, 1713). */
@container log-viewer (width < 662px) {
  .log-line {
    grid-template-columns:
      var(--log-time-track) var(--log-level-column)
      minmax(60px, 112px);
    gap: var(--space-1) var(--space-3);
  }
  .log-content {
    grid-column: 1 / -1;
    margin-top: var(--space-1);
  }
}
/* A pane whose measured timestamps are wider than en-US's (data-long-time, finding 1861) moves
   the message below up to a 762 px card too, so the message column keeps 200 px. */
@container log-viewer (662px <= width < 762px) {
  .log-pane[data-long-time] .log-line {
    grid-template-columns:
      var(--log-time-track) var(--log-level-column)
      minmax(60px, 112px);
    gap: var(--space-1) var(--space-3);
  }
  .log-pane[data-long-time] .log-content {
    grid-column: 1 / -1;
    margin-top: var(--space-1);
  }
}
/* A whole en-US timestamp beside the level needs 44 px phone row padding, 218 px time, 12 px
   gap and up to 78 px for the level. In a narrower card (a window under about 400 px) the time
   takes its own line, down to a 320 px window, and the level moves beside the origin (finding
   1844). A longer timestamp shrinks to fit. The .log-row prefix outranks the phone rules below. */
@container log-viewer (width < 352px) {
  .log-row .log-line {
    grid-template-columns: var(--log-level-column) minmax(0, 1fr);
  }
  .log-row .log-time {
    grid-column: 1 / -1;
  }
  .log-row .log-origin {
    grid-column: auto;
  }
}
@media (max-width: 760px) {
  .log-picker select,
  .log-search input {
    font-size: 16px;
  }
  .log-actions {
    margin-left: 0;
  }
  .log-line {
    grid-template-columns:
      var(--log-time-track) var(--log-level-column)
      minmax(60px, 112px);
    gap: var(--space-1) var(--space-3);
  }
  .log-content {
    grid-column: 1 / -1;
    margin-top: var(--space-1);
  }
  .log-fields {
    grid-template-columns: minmax(70px, 110px) minmax(0, 1fr);
  }
}
@media (max-width: 520px) {
  .log-viewer-header {
    padding: var(--space-4) var(--space-4) 0;
  }
  .log-controls {
    padding: var(--space-4);
  }
  .log-picker,
  .log-search {
    flex-basis: 100%;
  }
  .log-actions {
    width: 100%;
  }
  .log-source-hint,
  .log-error {
    margin-right: var(--space-4);
    margin-left: var(--space-4);
  }
  .log-output-status,
  .log-retention {
    padding-right: var(--space-4);
    padding-left: var(--space-4);
  }
  .log-row {
    padding-right: var(--space-3);
  }
  .log-line {
    /* The reserved level column gives every row's time the same width, so a shrunk timestamp
       has one size in every row (finding 1861). */
    grid-template-columns: minmax(0, 1fr) var(--log-level-column);
  }
  .log-origin {
    grid-column: 1 / -1;
  }
}

.sandbox-policy {
  display: grid;
  gap: var(--space-3);
  min-width: 0;
}
.sandbox-policy [hidden] {
  display: none !important;
}
.sandbox-policy-card-head,
.sandbox-denials-heading,
.sandbox-denials-toolbar,
.sandbox-selection,
.sandbox-selection-actions,
.sandbox-page-actions,
.sandbox-pagination {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.sandbox-policy-card-head {
  justify-content: space-between;
}
.sandbox-policy-card-head h2 {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
  font-size: var(--text-xl);
  line-height: var(--text-xl--line-height);
  margin: 0;
}
.sandbox-network-card {
  border: 1px solid var(--color-border);
  padding: var(--space-5);
}
.sandbox-network-card .hint {
  margin-block: var(--space-2) 0;
}
.sandbox-suggestions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: space-between;
  padding: var(--space-4);
  margin-top: var(--space-4);
  background: var(--color-info-subtle);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}
.sandbox-suggestions h3,
.sandbox-suggestions p {
  margin: 0;
}
.sandbox-suggestions .resource-id {
  display: block;
  margin-top: var(--space-1);
}
.sandbox-suggestion-details {
  flex-basis: 100%;
  font-size: var(--text-sm);
  line-height: var(--text-sm--line-height);
}
.sandbox-suggestion-details summary {
  color: var(--color-link);
  cursor: pointer;
}
.sandbox-suggestion-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  width: 100%;
}
.sandbox-denials-heading {
  margin-top: var(--space-3);
}
.sandbox-denials-heading h2 {
  font-size: var(--text-xl);
  line-height: var(--text-xl--line-height);
  margin: 0;
}
.sandbox-denial-count {
  font-size: var(--text-xs);
  line-height: var(--text-xs--line-height);
  border-radius: var(--radius-sm);
  padding: var(--space-1) var(--space-2);
  background: var(--color-surface-2);
  color: var(--color-text-muted);
  margin: 0;
}
.sandbox-denials-toolbar {
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
}
.sandbox-denials-toolbar > .form-field {
  display: grid;
  flex: 1 1 20rem;
  max-width: 32rem;
  min-width: 0;
}
.sandbox-policy label,
.sandbox-pagination label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  line-height: var(--text-sm--line-height);
  margin: 0;
}
.sandbox-policy input[type="checkbox"] {
  width: var(--space-4);
  height: var(--space-4);
  margin: 0;
  accent-color: var(--color-accent);
}
.sandbox-selection {
  justify-content: space-between;
  flex-wrap: wrap;
  min-height: var(--control-h-sm);
}
.sandbox-selection-actions {
  margin-left: auto;
  flex-wrap: wrap;
  font-size: var(--text-sm);
  line-height: var(--text-sm--line-height);
}
.sandbox-decisions {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.sandbox-decisions > p {
  padding: var(--space-4);
}
.sandbox-denial-row {
  display: grid;
  grid-template-columns:
    var(--space-5) var(--space-5) 5rem 7.5rem minmax(0, 1.1fr) minmax(0, 1fr)
    5.5rem;
  align-items: center;
  gap: var(--space-3);
  min-height: 3.5rem;
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm);
  line-height: var(--text-sm--line-height);
}
.sandbox-table-heading {
  background: var(--color-surface-2);
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  line-height: var(--text-xs--line-height);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  min-height: var(--control-h);
}
.sandbox-decision {
  border-top: 1px solid var(--color-border);
  overflow-wrap: anywhere;
}
.sandbox-decision.is-selected > .sandbox-denial-row {
  background: var(--color-info-subtle);
}
.sandbox-denial-time {
  font-size: var(--text-xs);
  line-height: var(--text-xs--line-height);
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}
.sandbox-denial-select {
  justify-content: center;
}
.sandbox-denial-row > .button--link {
  padding-inline: 0;
  justify-self: end;
}
.sandbox-decision-toggle {
  border: 0;
  background: transparent;
  padding: 0;
  min-height: var(--control-h-sm);
  color: var(--color-text-muted);
}
.sandbox-decision-toggle[aria-expanded="true"] {
  transform: rotate(90deg);
}
.sandbox-decision-details {
  border-top: 1px solid var(--color-border);
  padding: var(--space-4);
  background: var(--color-surface-2);
  font-size: var(--text-sm);
  line-height: var(--text-sm--line-height);
}
.sandbox-decision-details > p {
  margin-top: 0;
}
.sandbox-pagination {
  justify-content: space-between;
  flex-wrap: wrap;
  font-size: var(--text-sm);
  line-height: var(--text-sm--line-height);
}
.sandbox-pagination > label {
  margin-left: auto;
}
.sandbox-pagination select {
  width: auto;
  min-height: var(--control-h-sm);
}
.sandbox-page-actions {
  white-space: nowrap;
}
.sandbox-window-details {
  font-size: var(--text-xs);
  line-height: var(--text-xs--line-height);
  color: var(--color-text-muted);
}
.sandbox-window-details summary {
  cursor: pointer;
}
.sandbox-log-notices:empty {
  display: none;
}
.sandbox-new-denials {
  color: var(--color-link);
  border-color: var(--color-border);
  background: var(--color-info-subtle);
}
.dialog.sandbox-policy-dialog {
  width: min(60rem, calc(100% - 2 * var(--space-4)));
  height: min(56rem, calc(100dvh - 2 * var(--space-4)));
  max-height: calc(100dvh - 2 * var(--space-4));
  overflow: hidden;
}
.dialog.sandbox-policy-dialog[open] {
  display: flex;
  flex-direction: column;
}
.sandbox-policy-dialog .dialog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-shrink: 0;
}
.sandbox-policy-dialog .dialog-header h2 {
  font-size: var(--text-xl);
  line-height: var(--text-xl--line-height);
}
.sandbox-policy-dialog .dialog-header button {
  color: var(--color-on-inverse);
}
.sandbox-policy-dialog .dialog-body {
  flex: 1;
  overflow: auto;
  min-height: 0;
}
.sandbox-policy-editor > :first-child:empty {
  display: none;
}
.sandbox-policy-form {
  display: grid;
  gap: var(--space-3);
}
.sandbox-policy-form fieldset {
  min-width: 0;
  display: grid;
  gap: var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}
.sandbox-policy-form label {
  display: grid;
  gap: var(--space-1);
  margin: 0;
}
.sandbox-policy-form input {
  width: 100%;
  min-width: 0;
}
.sandbox-rule-collection {
  display: grid;
  gap: var(--space-3);
  margin-block: var(--space-4);
}
.sandbox-rule-table {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.sandbox-rule-row {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) var(--space-8);
  gap: var(--space-4);
  align-items: center;
  padding: var(--space-3) var(--space-4);
  min-height: 3.5rem;
  overflow-wrap: anywhere;
}
.sandbox-rule-row + .sandbox-rule-row {
  border-top: 1px solid var(--color-border);
}
.sandbox-rule-row:first-child {
  border-radius: var(--radius-md) var(--radius-md) 0 0;
}
.sandbox-rule-actions {
  position: relative;
}
.sandbox-rule-actions > summary {
  cursor: pointer;
  list-style: none;
  font-size: var(--text-xl);
  line-height: var(--text-xl--line-height);
}
.sandbox-rule-actions > summary::-webkit-details-marker {
  display: none;
}
.sandbox-rule-actions > div {
  display: grid;
  position: absolute;
  right: 0;
  top: 100%;
  min-width: 9rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-1);
  background: var(--color-surface);
  box-shadow: var(--shadow-1);
  z-index: 2;
}
.sandbox-rule-actions > div button {
  border: 0;
  text-align: left;
  font-size: var(--text-sm);
  line-height: var(--text-sm--line-height);
}
.sandbox-policy-review > details > summary {
  cursor: pointer;
  color: var(--color-link);
}
.sandbox-policy-dialog .dialog-actions {
  flex-shrink: 0;
  flex-wrap: wrap;
}
@media (max-width: 1100px) {
  .sandbox-denial-row {
    grid-template-columns:
      var(--space-4) var(--space-4) 4.5rem 6rem minmax(0, 1fr) minmax(0, 1fr)
      5rem;
    gap: var(--space-2);
    padding-inline: var(--space-3);
  }
}
@media (max-width: 760px) {
  .sandbox-decisions > .sandbox-table-heading {
    display: none;
  }
  .sandbox-denial-row {
    grid-template-columns: var(--space-5) var(--space-5) 6rem minmax(0, 1fr) 5rem;
  }
  .sandbox-denial-select {
    grid-column: 1;
    grid-row: 1 / 3;
  }
  .sandbox-decision-toggle {
    grid-column: 2;
    grid-row: 1 / 3;
  }
  .sandbox-denial-binary {
    grid-column: 3;
    grid-row: 1;
  }
  .sandbox-denial-time {
    grid-column: 3;
    grid-row: 2;
  }
  .sandbox-denial-destination {
    grid-column: 4;
    grid-row: 1;
  }
  .sandbox-denial-reason {
    grid-column: 4;
    grid-row: 2;
  }
  .sandbox-denial-row > .button--link {
    grid-column: 5;
    grid-row: 1 / 3;
  }
}
@media (max-width: 520px) {
  .sandbox-network-card {
    padding: var(--space-4);
  }
  .sandbox-policy-card-head {
    align-items: flex-start;
    gap: var(--space-2);
  }
  .sandbox-policy-card-head h2 {
    font-size: var(--text-lg);
    line-height: var(--text-lg--line-height);
    gap: var(--space-2);
  }
  .sandbox-policy-card-head > button {
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
    padding-inline: var(--space-2);
  }
  .sandbox-denials-toolbar > .form-field {
    flex-basis: 100%;
    max-width: none;
  }
  .sandbox-denials-toolbar > .form-actions {
    justify-content: space-between;
    width: 100%;
  }
  .sandbox-selection-actions {
    flex-basis: 100%;
    justify-content: space-between;
    margin: 0;
    padding: var(--space-2);
    border-radius: var(--radius-sm);
    background: var(--color-info-subtle);
    gap: var(--space-2);
  }
  .sandbox-selection-actions button,
  .sandbox-selection-actions span {
    font-size: var(--text-xs);
    line-height: var(--text-xs--line-height);
  }
  .sandbox-denial-row {
    grid-template-columns: var(--space-5) minmax(0, 1fr) 5rem;
    padding: var(--space-3);
    gap: var(--space-2);
  }
  .sandbox-denial-select {
    grid-column: 1;
    grid-row: 1;
  }
  .sandbox-decision-toggle {
    grid-column: 1;
    grid-row: 2 / 4;
  }
  .sandbox-denial-binary {
    grid-column: 2;
    grid-row: 1;
  }
  .sandbox-denial-destination {
    grid-column: 2;
    grid-row: 2;
  }
  .sandbox-denial-reason {
    grid-column: 2;
    grid-row: 3;
  }
  .sandbox-denial-time {
    grid-column: 3;
    grid-row: 1;
    text-align: right;
  }
  .sandbox-denial-row > .button--link {
    grid-column: 3;
    grid-row: 2 / 4;
  }
  .sandbox-pagination {
    gap: var(--space-2);
  }
  .sandbox-pagination > span {
    flex-basis: 100%;
  }
  .sandbox-pagination > label {
    margin-left: 0;
    font-size: var(--text-xs);
    line-height: var(--text-xs--line-height);
  }
  .sandbox-page-actions {
    gap: var(--space-1);
    margin-left: auto;
    font-size: var(--text-xs);
    line-height: var(--text-xs--line-height);
  }
  .sandbox-page-actions button {
    padding-inline: var(--space-2);
    font-size: var(--text-xs);
    line-height: var(--text-xs--line-height);
  }
  .sandbox-rule-row {
    grid-template-columns: minmax(0, 1fr) var(--space-8);
    gap: var(--space-1) var(--space-2);
  }
  .sandbox-rule-row > :first-child {
    grid-column: 1;
    grid-row: 1;
  }
  .sandbox-rule-row > :nth-child(2) {
    grid-column: 1;
    grid-row: 2;
  }
  .sandbox-rule-actions {
    grid-column: 2;
    grid-row: 1 / 3;
  }
  .sandbox-rule-table > .sandbox-table-heading {
    display: none;
  }
}

/* Policy denial controls and application feedback. */

.sandbox-policy-header {
  flex-wrap: wrap;
  gap: var(--space-4);
}
.sandbox-policy-controls {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}
.sandbox-editing-control {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  white-space: nowrap;
}
.sandbox-editing-switch {
  display: flex;
  align-items: center;
  position: relative;
  gap: var(--space-2);
  border: 0;
  background: transparent;
  padding-inline: 0;
  box-shadow: none;
  min-width: 4.5rem;
}
.sandbox-editing-switch::before {
  content: "";
  display: inline-block;
  width: 2.25rem;
  height: 1.25rem;
  border-radius: var(--radius-pill);
  background: var(--color-text-muted);
  box-shadow: inset 0 0 0 1px var(--color-border);
}
.sandbox-editing-switch::after {
  content: "";
  position: absolute;
  width: 0.875rem;
  height: 0.875rem;
  border-radius: var(--radius-pill);
  margin-left: calc(var(--space-1) * 0.75);
  background: var(--color-surface);
  pointer-events: none;
}
.sandbox-editing-switch[aria-checked="true"]::before {
  background: var(--color-success);
}
.sandbox-editing-switch[aria-checked="true"]::after {
  margin-left: calc(var(--space-4) + var(--space-1) * 0.75);
}
.sandbox-editing-explanation {
  color: var(--color-text-muted);
}
.sandbox-suggestions {
  display: block;
  padding: var(--space-4);
}
.sandbox-suggestions-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}
.sandbox-suggestions-copy h3 {
  font-size: var(--text-md);
  line-height: var(--text-md--line-height);
}
.sandbox-suggestions-copy .hint {
  margin-top: var(--space-1);
}
.sandbox-suggestion-row {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
}
.sandbox-suggestion-target {
  min-width: 0;
  overflow-wrap: anywhere;
}
.sandbox-suggestion-label {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.sandbox-suggestion-label .resource-id {
  margin-top: 0;
}
.sandbox-observations {
  font-size: var(--text-xs);
  line-height: var(--text-xs--line-height);
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  padding: var(--space-1) var(--space-2);
  white-space: nowrap;
}
.sandbox-policy-meta {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-4);
  margin-top: var(--space-3);
  font-size: var(--text-sm);
  line-height: var(--text-sm--line-height);
}
.sandbox-policy-rule-status {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.sandbox-policy-versions {
  color: var(--color-text-muted);
}
.sandbox-policy-versions summary {
  cursor: pointer;
  color: var(--color-link);
  padding-block: var(--space-1);
}
.sandbox-policy-versions[open] {
  flex-basis: 100%;
}
.sandbox-executable-path {
  font-size: var(--text-xs);
  line-height: var(--text-xs--line-height);
  color: var(--color-text-muted);
  margin-top: var(--space-1);
}
.sandbox-executable-path summary {
  cursor: pointer;
}
.sandbox-suggestion-details {
  margin-top: var(--space-3);
}
.sandbox-readonly .sandbox-denial-select {
  display: none;
}
.sandbox-readonly .sandbox-denial-row {
  grid-template-columns: var(--space-5) 5rem 7.5rem minmax(0, 1.1fr) minmax(0, 1fr);
}
.sandbox-readonly .sandbox-decisions > .sandbox-table-heading > :first-child,
.sandbox-readonly .sandbox-decisions > .sandbox-table-heading > :last-child {
  display: none;
}
.sandbox-readonly .sandbox-denial-row > :last-child:not(.sandbox-denial-reason) {
  display: none;
}
@media (max-width: 760px) {
  .sandbox-policy-header {
    align-items: flex-start;
  }
  .sandbox-policy-controls {
    gap: var(--space-3);
  }
  .sandbox-readonly .sandbox-denial-row {
    grid-template-columns: var(--space-5) 6rem minmax(0, 1fr);
  }
  .sandbox-readonly .sandbox-decision-toggle {
    grid-column: 1;
  }
  .sandbox-readonly .sandbox-denial-binary,
  .sandbox-readonly .sandbox-denial-time {
    grid-column: 2;
  }
  .sandbox-readonly .sandbox-denial-destination,
  .sandbox-readonly .sandbox-denial-reason {
    grid-column: 3;
  }
}
@media (max-width: 520px) {
  .sandbox-policy-controls {
    width: 100%;
    justify-content: space-between;
  }
  .sandbox-policy-controls > button {
    font-size: var(--text-sm);
    padding-inline: var(--space-3);
  }
  .sandbox-suggestions-head {
    flex-wrap: wrap;
    gap: var(--space-3);
  }
  .sandbox-suggestion-row {
    align-items: flex-start;
    flex-wrap: wrap;
  }
  .sandbox-readonly .sandbox-denial-row {
    grid-template-columns: var(--space-5) minmax(0, 1fr) 5rem;
  }
  .sandbox-readonly .sandbox-denial-time {
    grid-column: 3;
  }
  .sandbox-readonly .sandbox-denial-destination,
  .sandbox-readonly .sandbox-denial-reason {
    grid-column: 2 / -1;
  }
}

.sandbox-suggestions-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-top: var(--space-3);
}
.sandbox-bulk-summary {
  background: var(--color-info-subtle);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
}
.sandbox-bulk-summary h3 {
  margin: 0;
  font-size: var(--text-lg);
  line-height: var(--text-lg--line-height);
}
.sandbox-bulk-summary p {
  margin-bottom: 0;
}
.sandbox-selection-breakdown {
  margin-top: var(--space-3);
  font-size: var(--text-sm);
  line-height: var(--text-sm--line-height);
}
.sandbox-selection-breakdown summary {
  cursor: pointer;
  color: var(--color-link);
}
.sandbox-selection-breakdown p {
  overflow-wrap: anywhere;
}
.sandbox-application-feedback {
  margin-top: var(--space-4);
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-info);
  border-radius: var(--radius-sm);
  background: var(--color-info-subtle);
}
.sandbox-application-feedback[data-tone="success"] {
  border-left-color: var(--color-success);
  background: var(--color-success-subtle);
}
.sandbox-application-feedback[data-tone="warning"] {
  border-left-color: var(--color-warning);
  background: var(--color-warning-subtle);
}
.sandbox-application-feedback h3 {
  margin: 0;
  font-size: var(--text-md);
  line-height: var(--text-md--line-height);
}
.sandbox-application-feedback p {
  margin-block: var(--space-2) 0;
  font-size: var(--text-sm);
  line-height: var(--text-sm--line-height);
}
.sandbox-outcome-actions:empty {
  display: none;
}
.sandbox-outcome-actions {
  margin-top: var(--space-3);
}

.sandbox-network-limits-link {
  order: 2;
  padding: var(--space-1) 0;
  min-height: auto;
  font-size: var(--text-sm);
  line-height: var(--text-sm--line-height);
}
.sandbox-policy-versions {
  order: 1;
}
.sandbox-network-limits-body > p:first-child {
  margin-top: 0;
}
.sandbox-network-limits-dialog .dialog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}
.sandbox-network-limits-dialog .dialog-header h2 {
  font-size: var(--text-xl);
  line-height: var(--text-xl--line-height);
}
.sandbox-network-limits-dialog .dialog-header button {
  color: var(--color-on-inverse);
}
.sandbox-limits-heading {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-5);
}
.sandbox-limits-heading h3 {
  margin: 0;
  font-size: var(--text-lg);
  line-height: var(--text-lg--line-height);
}
.sandbox-network-limits-body .sandbox-rule-collection {
  margin-top: var(--space-4);
}
.sandbox-network-limits-body .sandbox-rule-collection .sandbox-rule-row {
  overflow-wrap: anywhere;
}

.sandbox-dialog-change-status {
  margin-right: auto;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  line-height: var(--text-sm--line-height);
}
.sandbox-policy-dialog > .dialog-actions {
  align-items: center;
}
@media (max-width: 520px) {
  .sandbox-dialog-change-status {
    flex-basis: 100%;
  }
}

.workspace-picker-surface {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  overflow: hidden;
  margin: var(--space-5) 0;
}
.workspace-file-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-bottom: 1px solid var(--line);
  background: var(--color-surface-2);
}
.workspace-file-tab {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-1);
  min-height: 82px;
  padding: var(--space-4);
  border: 0;
  border-right: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  text-align: left;
}
.workspace-file-tab:last-child {
  border-right: 0;
}
.workspace-file-tab[aria-selected="true"] {
  background: var(--surface);
  box-shadow: inset 0 -3px var(--color-accent);
}
.workspace-file-tab[aria-selected="true"] .workspace-file-role {
  color: var(--color-accent);
}
.workspace-file-role {
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
}
.workspace-file-name {
  font-size: var(--text-sm);
  color: var(--muted);
  font-weight: var(--weight-regular);
}
.workspace-file-badge {
  font-size: var(--text-xs);
  margin-top: var(--space-1);
}
.workspace-file-tab:focus-visible {
  outline: var(--focus-ring);
  outline-offset: -4px;
}
.workspace-file-intro {
  padding: var(--space-5) var(--space-6) 0;
}
.workspace-file-intro h3 {
  margin: 0 0 var(--space-2);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
}
.workspace-file-intro p {
  font-size: var(--text-md);
  line-height: 1.6;
  margin: 0;
  color: var(--muted);
  max-width: 85ch;
}
.workspace-file-intro .workspace-file-switch-note {
  font-size: var(--text-sm);
  margin-top: var(--space-2);
}
.workspace-file-panel .agent-form {
  max-width: none;
  margin: 0;
  padding: var(--space-5) var(--space-6) var(--space-6);
  border: 0;
  background: transparent;
  border-radius: 0;
}
.workspace-file-panel .configuration-editor {
  min-height: 260px;
}
.workspace-file-mobile {
  display: none;
}
@media (max-width: 760px) {
  .workspace-file-tabs {
    display: none;
  }
  .workspace-file-mobile {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-4);
    border-bottom: 1px solid var(--line);
  }
  .workspace-file-mobile label {
    font-size: var(--text-md);
    font-weight: var(--weight-semibold);
    margin: 0;
  }
  .workspace-file-mobile select {
    width: 100%;
    min-height: var(--touch-min);
  }
  .workspace-file-intro {
    padding: var(--space-4) var(--space-4) 0;
  }
  .workspace-file-panel .agent-form {
    padding: var(--space-4);
  }
  .workspace-file-panel .configuration-editor {
    min-height: 300px;
  }
}