/*
 * arch2code — application stylesheet.
 *
 * One <link rel="stylesheet" href="/css/app.css"> is the whole contract. The
 * two imports below pull in the theme tokens and the self-hosted IBM Plex, so
 * a page never has to remember to link three files in the right order.
 *
 * ---------------------------------------------------------------------------
 * The visual language
 * ---------------------------------------------------------------------------
 * This is the IBM Carbon presentation idiom used for the BB / DIRIS executive
 * decks, adapted from slide density to application density:
 *
 *   • Light weights at large sizes. Plex Sans Light (300) carries every display
 *     and section heading; 400 carries body; 600 is the only emphasis. That one
 *     decision is 80% of the look, and it is why nothing here is ever bold.
 *     (The decks specify 200 for display. Only Light/Regular/SemiBold are
 *     vendored — see README — so 300 IS the lightest truthful weight here, and
 *     asking for 200 would silently render as 300 anyway.)
 *   • Fluid clamp() scale, one step down from the deck scale. A slide can spend
 *     7rem on a title; a workspace cannot, but it can keep the proportion.
 *   • Section labels: 12px / 500 / 0.16em tracking / uppercase / accent colour.
 *     The single most identifiable mark in this language.
 *   • Hairlines, not borders. 1px subtle rules and a 3px accent edge on the
 *     panels that matter. No drop shadows except on true overlays.
 *   • Accent with parsimony. Blue-60 for interaction, the accent rule and the
 *     eyebrow; cyan/teal only as data marks. Everything else is grey and space.
 *   • Carbon motion: productive easing for state, expressive for entrances.
 *
 * ---------------------------------------------------------------------------
 * Rules for anyone editing this file
 * ---------------------------------------------------------------------------
 *   1. No raw colour. Every colour is var(--cds-*) or var(--a2c-*) from
 *      tokens.css, or a color-mix() of one. A hex value here is wrong in one of
 *      the two themes.
 *   2. No network. No @font-face pointing anywhere but /vendor/plex, no
 *      background-image: url(http...), no @import of a CDN.
 *   3. Focus is never removed, only restyled.
 *   4. No px font sizes; the rem/clamp scale below is the whole vocabulary.
 *
 * See README.md in this directory for the class contract.
 */

@import url("./tokens.css");
@import url("../vendor/plex/plex.css");

/* ==========================================================================
   1. Scale extensions
   --------------------------------------------------------------------------
   tokens.css is generated and owns every COLOUR. These are typographic and
   motion values only — no colour is defined here, so nothing can drift between
   themes. The deck scale (display 3–7rem) is divided by roughly 1.6 to reach
   application density while keeping the same proportion between the steps.
   ========================================================================== */

:root {
  --a2c-type-hero: clamp(2rem, 1.15rem + 3.1vw, 3.75rem);
  --a2c-type-section: clamp(1.5rem, 1.1rem + 1.5vw, 2.25rem);
  --a2c-type-lead: clamp(1.0625rem, 0.98rem + 0.42vw, 1.3125rem);

  /* Carbon's expressive curve. Entrances and anything the eye should follow. */
  --a2c-ease-expressive: cubic-bezier(0.4, 0.14, 0.3, 1);

  --a2c-rule: 3px;
  --a2c-gutter: clamp(1.25rem, 0.6rem + 2.4vw, 3.5rem);
}

/* ==========================================================================
   2. Reset and base
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
}

html,
body {
  min-height: 100%;
}

body {
  background: var(--cds-background);
  color: var(--cds-text-primary);
  font-family: var(--a2c-font-sans);
  font-size: var(--a2c-type-body-sm);
  font-weight: var(--a2c-weight-regular);
  line-height: var(--a2c-lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  display: flex;
  flex-direction: column;
}

img,
svg,
video {
  max-width: 100%;
  display: block;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
  background: none;
  border: 0;
}

a {
  color: var(--cds-link-primary);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

a:hover {
  color: var(--cds-link-primary-hover);
}

code,
pre,
.mono {
  font-family: var(--a2c-font-mono);
}

.numeric {
  font-family: var(--a2c-font-mono);
  font-variant-numeric: tabular-nums;
}

ul,
ol {
  list-style: none;
}

:focus-visible {
  outline: 2px solid var(--cds-focus);
  outline-offset: 1px;
}

[hidden] {
  display: none !important;
}

::selection {
  background: var(--cds-highlight);
}

/* The one place the decks' texture is quoted: a barely-there column grid behind
   the invitation. color-mix() so no literal colour appears outside tokens.css;
   a browser without it simply gets no texture, which is not a defect. */
.textured {
  background-image: repeating-linear-gradient(
      90deg,
      color-mix(in srgb, var(--cds-text-primary) 5%, transparent) 0 1px,
      transparent 1px 12.5%
    ),
    repeating-linear-gradient(
      0deg,
      color-mix(in srgb, var(--cds-text-primary) 3%, transparent) 0 1px,
      transparent 1px 4rem
    );
}

/* ==========================================================================
   3. Typography
   ========================================================================== */

.eyebrow {
  display: flex;
  align-items: center;
  gap: var(--a2c-space-04);
  font-family: var(--a2c-font-mono);
  font-size: var(--a2c-type-caption);
  font-weight: var(--a2c-weight-label);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cds-link-primary);
}

.eyebrow--rule::before {
  content: "";
  width: 1.5rem;
  height: 2px;
  background: var(--cds-interactive);
  flex: none;
}

.eyebrow--quiet {
  color: var(--cds-text-secondary);
}

.hero-title {
  font-size: var(--a2c-type-hero);
  font-weight: var(--a2c-weight-light);
  line-height: 1.04;
  letter-spacing: -0.02em;
  max-width: 24ch;
}

.hero-title strong {
  font-weight: var(--a2c-weight-light);
  color: var(--cds-link-primary);
}

.section-heading {
  font-size: var(--a2c-type-section);
  font-weight: var(--a2c-weight-light);
  line-height: 1.1;
  letter-spacing: -0.015em;
}

.lead {
  font-size: var(--a2c-type-lead);
  font-weight: var(--a2c-weight-light);
  line-height: 1.45;
  color: var(--cds-text-secondary);
  max-width: 62ch;
}

/* The section label from the decks. Used as the head of every panel. */
.section-title {
  font-family: var(--a2c-font-sans);
  font-size: var(--a2c-type-caption);
  font-weight: var(--a2c-weight-label);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cds-text-secondary);
  margin: 0;
}

.meta,
.helper,
.hint {
  font-size: var(--a2c-type-caption);
  color: var(--cds-text-helper);
  line-height: var(--a2c-lh-body);
}

.prose {
  max-width: var(--a2c-prose-max);
  line-height: var(--a2c-lh-prose);
  color: var(--cds-text-secondary);
}

.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: var(--a2c-space-05);
  top: 0;
  transform: translateY(-120%);
  z-index: 60;
  padding: var(--a2c-space-03) var(--a2c-space-05);
  /* Inverse, not interactive-on-white: in g100 --cds-interactive is #4589ff and
     white text on it measures 3.35:1, below the AA floor. The inverse pair is
     the only one guaranteed AA in both themes. */
  background: var(--cds-background-inverse);
  color: var(--cds-text-inverse);
  border-bottom: 2px solid var(--cds-interactive);
  text-decoration: none;
  transition: transform var(--a2c-dur) var(--a2c-ease-productive);
}

.skip-link:focus {
  transform: translateY(0);
}

/* ==========================================================================
   4. Shell
   ========================================================================== */

.masthead {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: stretch;
  min-height: var(--a2c-header-height);
  background: var(--cds-layer-01);
  border-bottom: 1px solid var(--cds-border-subtle-01);
}

.masthead__brand {
  display: flex;
  align-items: center;
  gap: var(--a2c-space-04);
  padding: 0 var(--a2c-space-05) 0 var(--a2c-gutter);
  text-decoration: none;
  color: inherit;
  border-right: 1px solid var(--cds-border-subtle-01);
}

.masthead__brand:hover {
  color: inherit;
  background: var(--cds-layer-hover-01);
}

.masthead__mark {
  width: 1.125rem;
  height: 1.125rem;
  flex: none;
  background: var(--cds-interactive);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 100%, 50% 50%, 0 50%);
}

.masthead__name {
  font-size: var(--a2c-type-body-sm);
  font-weight: var(--a2c-weight-strong);
  letter-spacing: -0.005em;
  white-space: nowrap;
}

.masthead__name span {
  font-weight: var(--a2c-weight-light);
  color: var(--cds-text-secondary);
}

.masthead__context {
  display: flex;
  align-items: center;
  padding: 0 var(--a2c-space-05);
  font-size: var(--a2c-type-caption);
  color: var(--cds-text-helper);
  border-right: 1px solid var(--cds-border-subtle-01);
  min-width: 0;
}

.masthead__context .truncate {
  max-width: 44ch;
}

@media (max-width: 62rem) {
  .masthead__context {
    display: none;
  }
}

.masthead__actions {
  display: flex;
  align-items: stretch;
  margin-left: auto;
}

.masthead__actions > * {
  border-left: 1px solid var(--cds-border-subtle-01);
}

.masthead-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--a2c-space-03);
  padding: 0 var(--a2c-space-05);
  font-size: var(--a2c-type-caption);
  color: var(--cds-text-secondary);
  background: transparent;
  transition: background var(--a2c-dur) var(--a2c-ease-productive),
    color var(--a2c-dur) var(--a2c-ease-productive);
  white-space: nowrap;
}

.masthead-btn:hover:not(:disabled) {
  background: var(--cds-layer-hover-01);
  color: var(--cds-text-primary);
}

.masthead-btn:disabled {
  cursor: progress;
  color: var(--cds-text-helper);
}

.masthead-btn:focus-visible {
  outline-offset: -2px;
}

.app-main {
  flex: 1 1 auto;
  min-width: 0;
}

.app-footer {
  margin-top: var(--a2c-space-09);
  padding: var(--a2c-space-06) var(--a2c-gutter);
  border-top: 1px solid var(--cds-border-subtle-01);
  display: flex;
  flex-wrap: wrap;
  gap: var(--a2c-space-03) var(--a2c-space-06);
  font-size: var(--a2c-type-caption);
  color: var(--cds-text-helper);
}

.app-footer p {
  max-width: 56ch;
}

.app-footer code {
  color: var(--cds-text-secondary);
}

.wrap {
  width: min(100%, var(--a2c-content-max));
  margin-inline: auto;
  padding-inline: var(--a2c-gutter);
}

.wrap--narrow {
  width: min(100%, 76rem);
}

/* ==========================================================================
   5. Surfaces
   ========================================================================== */

.surface {
  background: var(--cds-layer-01);
  border: 1px solid var(--cds-border-subtle-01);
  min-width: 0;
}

.surface--accent {
  border-top: var(--a2c-rule) solid var(--cds-interactive);
}

.surface--edge {
  border-left: var(--a2c-rule) solid var(--cds-interactive);
}

.surface--sunken {
  background: var(--cds-layer-02);
}

.surface--flush {
  border: 0;
  background: transparent;
}

.surface__head {
  display: flex;
  align-items: center;
  gap: var(--a2c-space-04);
  flex-wrap: wrap;
  padding: var(--a2c-space-04) var(--a2c-space-05);
  border-bottom: 1px solid var(--cds-border-subtle-01);
  min-height: 2.75rem;
}

.surface__head > .section-title {
  margin-right: auto;
}

.surface__body {
  padding: var(--a2c-space-05);
}

.surface__body--flush {
  padding: 0;
}

.surface__foot {
  padding: var(--a2c-space-04) var(--a2c-space-05);
  border-top: 1px solid var(--cds-border-subtle-01);
  display: flex;
  gap: var(--a2c-space-04);
  align-items: center;
  flex-wrap: wrap;
}

/*
 * Every single-column grid in this file is clamped to minmax(0, 1fr).
 *
 * A `display: grid` with no explicit template gets ONE implicit column sized
 * `auto`, which resolves to the max of its children's min-content widths. One
 * unbreakable mono path inside a tool call therefore widens the column past its
 * own grid item, past the workspace, and past the viewport — the page grows a
 * horizontal scrollbar and the whole layout shifts. Measured: at a 760px
 * viewport the stage track was laying out at 904px before this rule.
 *
 * `minmax(0, 1fr)` lets the column be narrower than its content, which is what
 * hands control back to the `overflow: auto` and `overflow-wrap: anywhere`
 * already declared on the elements that need it.
 */
.stack,
.track,
.stage__body,
.stage__section,
.calls,
.reasoning,
.think,
.payload,
.field,
.factlist,
.notice__body,
.notice-list,
.gate,
.gate__head,
.gate__evidence,
.gate__decision,
.gate__choices,
.gate__findings,
.finding__body,
.disclose__body,
.deliver,
.runbar__id,
.probe,
.probe-list,
.empty-state,
.journey__step,
.dl,
.invite,
.invite__lede,
.tree ul,
.tree {
  grid-template-columns: minmax(0, 1fr);
}

.stack {
  display: grid;
  gap: var(--a2c-space-05);
}

.stack--tight {
  gap: var(--a2c-space-03);
}

.stack--loose {
  gap: var(--a2c-space-07);
}

.row {
  display: flex;
  align-items: center;
  gap: var(--a2c-space-04);
  flex-wrap: wrap;
}

.row--between {
  justify-content: space-between;
}

.push {
  margin-left: auto;
}

/* ==========================================================================
   6. Buttons
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--a2c-space-05);
  min-height: 2.5rem;
  padding: var(--a2c-space-03) var(--a2c-space-05);
  border: 1px solid transparent;
  border-radius: 0;
  font-size: var(--a2c-type-body-sm);
  font-weight: var(--a2c-weight-regular);
  line-height: 1.2;
  text-align: left;
  text-decoration: none;
  transition: background var(--a2c-dur) var(--a2c-ease-productive),
    color var(--a2c-dur) var(--a2c-ease-productive),
    border-color var(--a2c-dur) var(--a2c-ease-productive);
}

.btn:focus-visible {
  outline: 2px solid var(--cds-focus);
  outline-offset: -3px;
  box-shadow: inset 0 0 0 1px var(--cds-focus-inset);
}

/* Carbon's own disabled pair (--cds-button-disabled + --cds-text-on-color-disabled)
   measures 1.94:1. WCAG exempts inactive controls, but the most important
   button in this product — the gate submit — spends most of its life disabled,
   and an unreadable instruction is not an instruction. The flat surface, the
   absent hover and the cursor carry "disabled"; the label stays legible. */
.btn:disabled,
.btn[aria-disabled="true"] {
  background: var(--cds-layer-02);
  color: var(--cds-text-secondary);
  border-color: transparent;
  box-shadow: inset 0 0 0 1px var(--cds-border-subtle-01);
  cursor: not-allowed;
}

.btn-primary {
  background: var(--cds-button-primary);
  color: var(--cds-text-on-color);
}

.btn-primary:hover:not(:disabled) {
  background: var(--cds-button-primary-hover);
  color: var(--cds-text-on-color);
}

.btn-primary:active:not(:disabled) {
  background: var(--cds-button-primary-active);
}

.btn-secondary {
  background: var(--cds-button-secondary);
  color: var(--cds-text-on-color);
}

.btn-secondary:hover:not(:disabled) {
  background: var(--cds-button-secondary-hover);
  color: var(--cds-text-on-color);
}

.btn-tertiary {
  background: transparent;
  color: var(--cds-link-primary);
  border-color: var(--cds-button-tertiary);
}

.btn-tertiary:hover:not(:disabled) {
  background: var(--cds-button-tertiary);
  color: var(--cds-text-inverse);
}

.btn-ghost {
  background: transparent;
  color: var(--cds-link-primary);
}

.btn-ghost:hover:not(:disabled) {
  background: var(--cds-background-hover);
  color: var(--cds-link-primary-hover);
}

.btn-ghost:disabled {
  background: transparent;
  color: var(--cds-text-disabled);
}

.btn-quiet {
  background: transparent;
  color: var(--cds-text-secondary);
}

.btn-quiet:hover:not(:disabled) {
  background: var(--cds-background-hover);
  color: var(--cds-text-primary);
}

.btn-danger {
  background: var(--cds-button-danger-primary);
  color: var(--cds-text-on-color);
}

.btn-danger:hover:not(:disabled) {
  background: var(--cds-button-danger-hover);
  color: var(--cds-text-on-color);
}

.btn-sm {
  min-height: 2rem;
  padding: var(--a2c-space-02) var(--a2c-space-04);
  font-size: var(--a2c-type-caption);
  gap: var(--a2c-space-04);
}

.btn--lg {
  min-height: 3.5rem;
  padding: var(--a2c-space-05) var(--a2c-space-06);
  font-size: var(--a2c-type-body);
  font-weight: var(--a2c-weight-light);
}

.btn--full {
  width: 100%;
}

.btn--center {
  justify-content: center;
}

.btn__note {
  font-family: var(--a2c-font-mono);
  font-size: var(--a2c-type-caption);
  opacity: 0.85;
  white-space: nowrap;
}

.btn-set {
  display: flex;
  align-items: center;
  gap: var(--a2c-space-02);
  flex-wrap: wrap;
}

.link-btn {
  background: none;
  color: var(--cds-link-primary);
  text-decoration: underline;
  text-underline-offset: 0.15em;
  padding: 0;
  font-size: inherit;
  text-align: left;
}

.link-btn:hover {
  color: var(--cds-link-primary-hover);
}

/* ==========================================================================
   7. Fields
   ========================================================================== */

.field {
  display: grid;
  gap: var(--a2c-space-03);
  min-width: 0;
}

.field > label,
.field-label {
  font-size: var(--a2c-type-caption);
  font-weight: var(--a2c-weight-label);
  letter-spacing: var(--a2c-label-tracking);
  color: var(--cds-text-secondary);
}

.input,
.select,
.textarea {
  width: 100%;
  min-height: 2.5rem;
  padding: var(--a2c-space-03) var(--a2c-space-04);
  background: var(--cds-field-01);
  color: var(--cds-text-primary);
  border: 0;
  border-bottom: 1px solid var(--cds-border-strong-01);
  border-radius: 0;
  transition: background var(--a2c-dur) var(--a2c-ease-productive);
}

.textarea {
  min-height: 4.5rem;
  resize: vertical;
  line-height: var(--a2c-lh-body);
}

.input:hover,
.select:hover,
.textarea:hover {
  background: var(--cds-field-hover-01);
}

.input::placeholder,
.textarea::placeholder {
  color: var(--cds-text-placeholder);
}

.input:focus,
.select:focus,
.textarea:focus {
  outline: 2px solid var(--cds-focus);
  outline-offset: -2px;
}

.input[aria-invalid="true"],
.textarea[aria-invalid="true"] {
  border-bottom-color: var(--cds-support-error);
}

.field-hint {
  font-size: var(--a2c-type-caption);
  color: var(--cds-text-helper);
  line-height: var(--a2c-lh-body);
}

.field-inline {
  display: flex;
  align-items: flex-start;
  gap: var(--a2c-space-04);
}

.field-inline input[type="checkbox"],
.field-inline input[type="radio"] {
  margin-top: 0.2rem;
  width: 1rem;
  height: 1rem;
  accent-color: var(--cds-interactive);
  flex: none;
}

.form-grid {
  display: grid;
  gap: var(--a2c-space-05) var(--a2c-space-06);
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}

.form-actions {
  display: flex;
  gap: var(--a2c-space-03);
  flex-wrap: wrap;
  align-items: center;
}

/* Disclosure: "Advanced options" and every raw-payload escape hatch. */
.disclose {
  border-top: 1px solid var(--cds-border-subtle-01);
}

.disclose--bare {
  border-top: 0;
}

.disclose > summary {
  display: flex;
  align-items: center;
  gap: var(--a2c-space-03);
  padding: var(--a2c-space-04) 0;
  cursor: pointer;
  list-style: none;
  font-size: var(--a2c-type-caption);
  font-weight: var(--a2c-weight-label);
  letter-spacing: var(--a2c-label-tracking);
  color: var(--cds-text-secondary);
}

.disclose > summary::-webkit-details-marker {
  display: none;
}

.disclose > summary::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: rotate(-45deg);
  transition: transform var(--a2c-dur) var(--a2c-ease-productive);
  flex: none;
}

.disclose[open] > summary::before {
  transform: rotate(45deg);
}

.disclose > summary:hover {
  color: var(--cds-text-primary);
}

.disclose > summary:focus-visible {
  outline: 2px solid var(--cds-focus);
  outline-offset: 2px;
}

.disclose__body {
  padding-bottom: var(--a2c-space-06);
  display: grid;
  gap: var(--a2c-space-05);
}

/* ==========================================================================
   8. Tags, status, notices
   ========================================================================== */

.tag {
  display: inline-flex;
  align-items: center;
  gap: var(--a2c-space-02);
  padding: 0 var(--a2c-space-03);
  min-height: 1.25rem;
  border-radius: var(--a2c-radius);
  background: var(--cds-tag-background-gray);
  color: var(--cds-tag-color-gray);
  font-size: var(--a2c-type-caption);
  line-height: 1.25rem;
  white-space: nowrap;
}

.tag--blue { background: var(--cds-tag-background-blue); color: var(--cds-tag-color-blue); }
.tag--cyan { background: var(--cds-tag-background-cyan); color: var(--cds-tag-color-cyan); }
.tag--teal { background: var(--cds-tag-background-teal); color: var(--cds-tag-color-teal); }
.tag--green { background: var(--cds-tag-background-green); color: var(--cds-tag-color-green); }
.tag--red { background: var(--cds-tag-background-red); color: var(--cds-tag-color-red); }
.tag--magenta { background: var(--cds-tag-background-magenta); color: var(--cds-tag-color-magenta); }
.tag--cool-gray { background: var(--cds-tag-background-cool-gray); color: var(--cds-tag-color-cool-gray); }
.tag--warm-gray { background: var(--cds-tag-background-warm-gray); color: var(--cds-tag-color-warm-gray); }

.tag--outline {
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--cds-border-strong-01);
  color: var(--cds-text-secondary);
}

.tag--sm {
  min-height: 1.125rem;
  line-height: 1.125rem;
}

.tag__label {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Squared, never a pill: this carries machine state, not a topic. */
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--a2c-space-03);
  padding: 0 var(--a2c-space-03);
  min-height: 1.375rem;
  font-family: var(--a2c-font-mono);
  font-size: var(--a2c-type-caption);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--cds-text-secondary);
  box-shadow: inset 0 0 0 1px var(--cds-border-subtle-01);
  border-left: 2px solid var(--cds-border-strong-01);
  white-space: nowrap;
}

.status-badge::before {
  content: "";
  width: 0.4375rem;
  height: 0.4375rem;
  background: currentColor;
  flex: none;
}

.status-created,
.status-running { border-left-color: var(--cds-support-info); color: var(--a2c-text-info); }
.status-succeeded { border-left-color: var(--cds-support-success); color: var(--a2c-text-success); }
.status-failed { border-left-color: var(--cds-support-error); color: var(--a2c-text-danger); }
.status-awaiting_input { border-left-color: var(--a2c-amber); color: var(--a2c-text-caution); }
.status-blocked { border-left-color: var(--cds-support-caution-major); color: var(--a2c-text-caution); }
.status-cancelled,
.status-skipped { border-left-color: var(--cds-border-strong-01); color: var(--cds-text-helper); }

.status-dot {
  width: 0.5rem;
  height: 0.5rem;
  flex: none;
  border-radius: 50%;
  background: var(--cds-border-strong-01);
}

.status-dot.status-running { background: var(--cds-support-info); }
.status-dot.status-succeeded { background: var(--cds-support-success); }
.status-dot.status-failed { background: var(--cds-support-error); }
.status-dot.status-awaiting_input { background: var(--a2c-amber); }
.status-dot.status-blocked { background: var(--cds-support-caution-major); }

.spinner {
  display: inline-flex;
  align-items: center;
  gap: var(--a2c-space-03);
  font-size: var(--a2c-type-caption);
  color: var(--a2c-text-info);
}

.spinner::before {
  content: "";
  width: 0.75rem;
  height: 0.75rem;
  border: 2px solid color-mix(in srgb, var(--cds-support-info) 30%, transparent);
  border-top-color: var(--cds-support-info);
  border-radius: 50%;
  animation: a2c-spin 900ms linear infinite;
  flex: none;
}

@keyframes a2c-spin {
  to {
    transform: rotate(360deg);
  }
}

.notice {
  display: flex;
  gap: var(--a2c-space-04);
  padding: var(--a2c-space-04) var(--a2c-space-05);
  background: var(--cds-notification-background-info);
  border-left: var(--a2c-rule) solid var(--cds-support-info);
  font-size: var(--a2c-type-caption);
  color: var(--cds-text-secondary);
}

.notice-error { background: var(--cds-notification-background-error); border-left-color: var(--cds-support-error); }
.notice-warn { background: var(--cds-notification-background-warning); border-left-color: var(--a2c-amber); }
.notice-success { background: var(--cds-notification-background-success); border-left-color: var(--cds-support-success); }

.notice__body {
  display: grid;
  gap: var(--a2c-space-02);
  min-width: 0;
}

.notice-title {
  font-size: var(--a2c-type-body-sm);
  font-weight: var(--a2c-weight-label);
  color: var(--cds-text-primary);
}

.notice-remedy {
  color: var(--cds-text-primary);
}

.notice-list {
  display: grid;
  gap: var(--a2c-space-03);
  padding-left: var(--a2c-space-05);
  list-style: disc;
}

/* Full-bleed strips for run and environment state. */
.strip {
  display: flex;
  align-items: center;
  gap: var(--a2c-space-04);
  flex-wrap: wrap;
  padding: var(--a2c-space-03) var(--a2c-gutter);
  font-size: var(--a2c-type-caption);
  background: var(--cds-notification-background-info);
  border-bottom: 1px solid var(--cds-border-subtle-01);
  color: var(--cds-text-secondary);
}

.strip strong {
  font-weight: var(--a2c-weight-label);
  color: var(--cds-text-primary);
}

.strip--error { background: var(--cds-notification-background-error); }
.strip--warn { background: var(--cds-notification-background-warning); }

.strip__remedy {
  color: var(--cds-text-primary);
}

/* ==========================================================================
   9. Screen 1 — the invitation
   ========================================================================== */

.invite {
  padding-block: clamp(2.5rem, 1rem + 6vw, 6rem) var(--a2c-space-08);
  display: grid;
  gap: var(--a2c-space-08);
}

.invite__lede {
  display: grid;
  gap: var(--a2c-space-05);
  max-width: 64rem;
}

.dropzone {
  position: relative;
  display: grid;
  place-items: center;
  align-content: center;
  gap: var(--a2c-space-04);
  min-height: clamp(14rem, 8rem + 16vw, 21rem);
  padding: var(--a2c-space-07) var(--a2c-space-06);
  text-align: center;
  background: var(--cds-layer-01);
  border: 1px solid var(--cds-border-subtle-01);
  border-top: var(--a2c-rule) solid var(--cds-interactive);
  cursor: pointer;
  transition: background var(--a2c-dur-slow) var(--a2c-ease-productive),
    box-shadow var(--a2c-dur-slow) var(--a2c-ease-productive);
}

.dropzone:hover {
  background: var(--cds-layer-hover-01);
}

.dropzone:focus-visible {
  outline: 2px solid var(--cds-focus);
  outline-offset: -4px;
}

.dropzone.is-over {
  background: var(--cds-layer-selected-01);
  box-shadow: inset 0 0 0 2px var(--cds-interactive);
}

.dropzone.is-busy {
  cursor: progress;
}

.dz-glyph {
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid var(--cds-border-strong-01);
  border-top: 2px solid var(--cds-interactive);
  position: relative;
}

.dz-glyph::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0.875rem;
  height: 0.875rem;
  transform: translate(-50%, -50%);
  background: var(--cds-interactive);
  clip-path: polygon(50% 0, 100% 55%, 68% 55%, 68% 100%, 32% 100%, 32% 55%, 0 55%);
}

.dz-title {
  font-size: var(--a2c-type-lead);
  font-weight: var(--a2c-weight-light);
  color: var(--cds-text-primary);
}

.dz-hint {
  font-size: var(--a2c-type-body-sm);
  color: var(--cds-text-secondary);
}

.dz-meta {
  font-size: var(--a2c-type-caption);
  color: var(--cds-text-helper);
  max-width: 60ch;
}

.dz-progress {
  width: min(100%, 24rem);
  height: 2px;
  background: var(--cds-border-subtle-01);
  overflow: hidden;
}

.dz-progress span {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--cds-interactive), var(--cds-support-info));
  transition: width var(--a2c-dur-slow) var(--a2c-ease-productive);
}

/* The five steps: a hairline strip, deliberately quiet. */
.journey {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 1px;
  background: var(--cds-border-subtle-01);
  border: 1px solid var(--cds-border-subtle-01);
}

.journey__step {
  background: var(--cds-layer-01);
  padding: var(--a2c-space-05);
  display: grid;
  gap: var(--a2c-space-02);
  align-content: start;
}

.journey__n {
  font-family: var(--a2c-font-mono);
  font-size: var(--a2c-type-caption);
  font-weight: var(--a2c-weight-label);
  letter-spacing: 0.12em;
  color: var(--cds-link-primary);
}

.journey__name {
  font-size: var(--a2c-type-body-sm);
  font-weight: var(--a2c-weight-label);
  color: var(--cds-text-primary);
}

.journey__what {
  font-size: var(--a2c-type-caption);
  color: var(--cds-text-helper);
  line-height: var(--a2c-lh-body);
}

/* Recent runs on the landing screen. */
.runlist {
  display: grid;
}

.runlist__item {
  display: grid;
  grid-template-columns: minmax(10rem, 1.2fr) minmax(0, 1.4fr) 9rem 7rem;
  align-items: center;
  gap: var(--a2c-space-05);
  width: 100%;
  padding: var(--a2c-space-04) var(--a2c-space-05);
  border-bottom: 1px solid var(--cds-border-subtle-01);
  background: transparent;
  text-align: left;
  transition: background var(--a2c-dur) var(--a2c-ease-productive);
}

.runlist__item:last-child {
  border-bottom: 0;
}

.runlist__item:hover {
  background: var(--cds-layer-hover-01);
}

.runlist__id {
  font-family: var(--a2c-font-mono);
  font-size: var(--a2c-type-caption);
  color: var(--cds-text-primary);
}

.runlist__src {
  font-size: var(--a2c-type-caption);
  color: var(--cds-text-helper);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.runlist__when {
  font-size: var(--a2c-type-caption);
  color: var(--cds-text-helper);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

@media (max-width: 48rem) {
  .runlist__item {
    grid-template-columns: 1fr auto;
  }
  .runlist__src,
  .runlist__when {
    display: none;
  }
}

/* ==========================================================================
   10. Screen 2 — execution
   ========================================================================== */

.runbar {
  position: sticky;
  top: var(--a2c-header-height);
  z-index: 30;
  display: flex;
  align-items: center;
  gap: var(--a2c-space-05);
  flex-wrap: wrap;
  padding: var(--a2c-space-04) var(--a2c-gutter);
  background: var(--cds-layer-01);
  border-bottom: 1px solid var(--cds-border-subtle-01);
}

.runbar__id {
  display: grid;
  gap: 0.1rem;
  min-width: 0;
}

.runbar__id h2 {
  font-family: var(--a2c-font-mono);
  font-size: var(--a2c-type-body-sm);
  font-weight: var(--a2c-weight-regular);
  letter-spacing: -0.01em;
}

.runbar__id .meta {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 48ch;
}

/* Meters: discreet, monospaced, tabular. Never a dashboard. */
.meters {
  display: flex;
  align-items: stretch;
  margin-left: auto;
}

.meter {
  display: grid;
  gap: 0.1rem;
  padding: 0 var(--a2c-space-05);
  border-left: 1px solid var(--cds-border-subtle-01);
  min-width: 5.5rem;
}

.meter:first-child {
  border-left: 0;
}

.meter__value {
  font-family: var(--a2c-font-mono);
  font-size: var(--a2c-type-body-sm);
  font-variant-numeric: tabular-nums;
  color: var(--cds-text-primary);
  line-height: 1.2;
}

.meter__label {
  font-size: var(--a2c-type-caption);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cds-text-helper);
}

.meter--warn .meter__value {
  color: var(--a2c-text-caution);
}

@media (max-width: 62rem) {
  .meters {
    margin-left: 0;
    width: 100%;
    border-top: 1px solid var(--cds-border-subtle-01);
    padding-top: var(--a2c-space-03);
  }
  .meter:first-child {
    padding-left: 0;
  }
}

/* The segmented switch between execution and deliverables. */
.switcher {
  display: inline-flex;
  border: 1px solid var(--cds-border-subtle-01);
}

.switcher button {
  padding: var(--a2c-space-02) var(--a2c-space-05);
  min-height: 2rem;
  font-size: var(--a2c-type-caption);
  letter-spacing: var(--a2c-label-tracking);
  color: var(--cds-text-secondary);
  background: transparent;
  border-left: 1px solid var(--cds-border-subtle-01);
  transition: background var(--a2c-dur) var(--a2c-ease-productive),
    color var(--a2c-dur) var(--a2c-ease-productive);
}

.switcher button:first-child {
  border-left: 0;
}

.switcher button:hover {
  background: var(--cds-layer-hover-01);
  color: var(--cds-text-primary);
}

.switcher button[aria-selected="true"] {
  background: var(--cds-layer-selected-01);
  color: var(--cds-text-primary);
  box-shadow: inset 0 -2px 0 var(--cds-interactive);
}

.switcher button:focus-visible {
  outline-offset: -3px;
}

.workspace {
  padding-block: var(--a2c-space-06) var(--a2c-space-08);
  display: grid;
  gap: var(--a2c-space-07);
  grid-template-columns: minmax(19rem, 26rem) minmax(0, 1fr);
  align-items: start;
}

@media (max-width: 72rem) {
  .workspace {
    grid-template-columns: minmax(0, 1fr);
  }
}

.workspace__left {
  display: grid;
  gap: var(--a2c-space-05);
  position: sticky;
  top: calc(var(--a2c-header-height) + 4.5rem);
}

@media (max-width: 72rem) {
  .workspace__left {
    position: static;
  }
}

/* -- the diagram panel ----------------------------------------------------- */

.image-frame {
  position: relative;
  display: block;
  background: var(--cds-layer-02);
  overflow: hidden;
}

.vision-image {
  width: 100%;
  height: auto;
  display: block;
}

.overlay-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.ov-box {
  position: absolute;
  padding: 0;
  background: transparent;
  border: var(--a2c-overlay-stroke) solid var(--a2c-confidence-unknown);
  pointer-events: auto;
  transition: opacity var(--a2c-dur) var(--a2c-ease-productive);
  animation: a2c-box-in var(--a2c-dur-slow) var(--a2c-ease-expressive) both;
}

@keyframes a2c-box-in {
  from {
    opacity: 0;
    transform: scale(0.94);
  }
}

.ov-conf-high { border-color: var(--a2c-confidence-high); }
.ov-conf-medium { border-color: var(--a2c-confidence-medium); }
.ov-conf-low { border-color: var(--a2c-confidence-low); }
.ov-conf-unknown { border-color: var(--a2c-confidence-unknown); }
.ov-connection { border-style: dashed; }
.ov-alert { border-color: var(--cds-support-error); }

.ov-box:hover,
.ov-box.is-hovered,
.ov-box.is-selected {
  box-shadow: 0 0 0 1px var(--a2c-overlay-halo);
}

.has-selection .ov-box.is-dimmed {
  opacity: 0.25;
}

.ov-tag {
  position: absolute;
  left: -2px;
  bottom: 100%;
  padding: 0 0.25rem;
  max-width: 16rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--a2c-font-mono);
  font-size: var(--a2c-type-caption);
  line-height: 1.4;
  color: var(--cds-text-on-color);
  background: var(--a2c-overlay-halo);
  opacity: 0;
  transition: opacity var(--a2c-dur) var(--a2c-ease-productive);
}

.ov-box:hover .ov-tag,
.ov-box.is-hovered .ov-tag,
.ov-box.is-selected .ov-tag,
.ov-box:focus-visible .ov-tag {
  opacity: 1;
}

.image-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--a2c-space-02) var(--a2c-space-05);
  font-size: var(--a2c-type-caption);
  color: var(--cds-text-helper);
}

.lg {
  display: inline-flex;
  align-items: center;
  gap: var(--a2c-space-03);
}

.lg::before {
  content: "";
  width: 0.75rem;
  height: 0;
  border-top: 2px solid var(--a2c-confidence-unknown);
}

.lg-high::before { border-top-color: var(--a2c-confidence-high); }
.lg-medium::before { border-top-color: var(--a2c-confidence-medium); }
.lg-low::before { border-top-color: var(--a2c-confidence-low); }
.lg-conn::before { border-top-style: dashed; border-top-color: var(--cds-border-strong-01); }

.factlist {
  display: grid;
  gap: var(--a2c-space-03);
}

.fact {
  display: grid;
  grid-template-columns: 8rem minmax(0, 1fr);
  gap: var(--a2c-space-04);
  font-size: var(--a2c-type-caption);
  align-items: baseline;
}

.fact dt {
  color: var(--cds-text-helper);
  letter-spacing: var(--a2c-label-tracking);
}

.fact dd {
  color: var(--cds-text-primary);
  min-width: 0;
  overflow-wrap: anywhere;
}

/* -- the stage track ------------------------------------------------------- */

.track {
  display: grid;
  position: relative;
}

.stage {
  position: relative;
  padding-left: var(--a2c-space-07);
  padding-bottom: var(--a2c-space-04);
}

/* The vertical rail, drawn per stage so it connects one to the next and stops
   at the last — a rail that overshoots reads as an unfinished pipeline even
   when the run succeeded. */
.stage::before {
  content: "";
  position: absolute;
  left: 0.4375rem;
  top: 1.9rem;
  bottom: 0;
  width: 1px;
  /* border-subtle-01 is #e0e0e0 in g10 and the page behind it is #f4f4f4 —
     a rail nobody can see. The strong hairline is the right weight for a 1px
     rule on this surface, and it is what makes the five stages read as one
     sequence rather than five unrelated cards. */
  background: var(--cds-border-strong-01);
  opacity: 0.5;
}

.stage:last-child::before {
  display: none;
}

.stage__marker {
  position: absolute;
  left: 0;
  top: 1.05rem;
  width: 0.9375rem;
  height: 0.9375rem;
  border: 1px solid var(--cds-border-strong-01);
  background: var(--cds-background);
  z-index: 1;
}

.stage[data-state="succeeded"] .stage__marker {
  border-color: var(--cds-support-success);
  background: var(--cds-support-success);
}

.stage[data-state="running"] .stage__marker {
  border-color: var(--cds-interactive);
  background: var(--cds-layer-01);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cds-interactive) 22%, transparent);
  animation: a2c-pulse 1.6s var(--a2c-ease-expressive) infinite;
}

@keyframes a2c-pulse {
  50% {
    box-shadow: 0 0 0 6px color-mix(in srgb, var(--cds-interactive) 8%, transparent);
  }
}

.stage[data-state="failed"] .stage__marker {
  border-color: var(--cds-support-error);
  background: var(--cds-support-error);
}

.stage[data-state="awaiting"] .stage__marker {
  border-color: var(--a2c-amber);
  background: var(--a2c-amber);
}

/* Caution, not error: the stage stopped because the gate held, which is the
   pipeline working. Red here reads as "the model broke" and is a lie. */
.stage[data-state="blocked"] .stage__marker {
  border-color: var(--cds-support-caution-major);
  background: var(--cds-support-caution-major);
}

.stage__head {
  display: flex;
  align-items: center;
  gap: var(--a2c-space-04);
  flex-wrap: wrap;
  width: 100%;
  padding: var(--a2c-space-04) var(--a2c-space-04) var(--a2c-space-04) 0;
  text-align: left;
  background: transparent;
  transition: background var(--a2c-dur) var(--a2c-ease-productive);
}

.stage__head:hover {
  background: var(--cds-background-hover);
}

.stage__n {
  font-family: var(--a2c-font-mono);
  font-size: var(--a2c-type-caption);
  color: var(--cds-text-helper);
  letter-spacing: 0.1em;
}

.stage__title {
  font-size: var(--a2c-type-lead);
  font-weight: var(--a2c-weight-light);
  letter-spacing: -0.01em;
  color: var(--cds-text-primary);
  min-width: 0;
}

.stage[data-state="pending"] .stage__title {
  color: var(--cds-text-helper);
}

.stage__facts {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--a2c-space-04);
  font-family: var(--a2c-font-mono);
  font-size: var(--a2c-type-caption);
  color: var(--cds-text-helper);
  font-variant-numeric: tabular-nums;
}

.stage__body {
  display: grid;
  gap: var(--a2c-space-05);
  padding: var(--a2c-space-02) 0 var(--a2c-space-06);
  animation: a2c-fade-in var(--a2c-dur-slow) var(--a2c-ease-expressive) both;
}

@keyframes a2c-fade-in {
  from {
    opacity: 0;
    transform: translateY(-0.25rem);
  }
}

.stage__section {
  display: grid;
  gap: var(--a2c-space-03);
}

/* -- reasoning ------------------------------------------------------------- */

.reasoning {
  display: grid;
  gap: var(--a2c-space-04);
  max-height: 30rem;
  overflow-y: auto;
  padding-right: var(--a2c-space-04);
  scrollbar-width: thin;
}

.reasoning--full {
  max-height: none;
  overflow: visible;
}

.think {
  border-left: 1px solid var(--cds-border-subtle-01);
  padding-left: var(--a2c-space-05);
  display: grid;
  gap: var(--a2c-space-02);
}

.think__label {
  font-size: var(--a2c-type-caption);
  font-weight: var(--a2c-weight-label);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cds-text-helper);
}

.think__text {
  font-size: var(--a2c-type-body-sm);
  font-weight: var(--a2c-weight-light);
  line-height: var(--a2c-lh-prose);
  color: var(--cds-text-secondary);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.think__text b,
.say b {
  font-weight: var(--a2c-weight-label);
  color: var(--cds-text-primary);
}

.say {
  font-size: var(--a2c-type-body-sm);
  line-height: var(--a2c-lh-prose);
  color: var(--cds-text-primary);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.cursor::after {
  content: "";
  display: inline-block;
  width: 0.5ch;
  height: 1em;
  margin-left: 0.15ch;
  background: var(--cds-interactive);
  vertical-align: text-bottom;
  animation: a2c-blink 1.1s steps(2, start) infinite;
}

@keyframes a2c-blink {
  50% {
    opacity: 0;
  }
}

/* -- tool calls ------------------------------------------------------------ */

.calls {
  display: grid;
  border-top: 1px solid var(--cds-border-subtle-01);
}

.call {
  border-bottom: 1px solid var(--cds-border-subtle-01);
}

.call > summary {
  display: flex;
  align-items: center;
  gap: var(--a2c-space-04);
  flex-wrap: wrap;
  padding: var(--a2c-space-03) var(--a2c-space-03) var(--a2c-space-03) 0;
  cursor: pointer;
  list-style: none;
  transition: background var(--a2c-dur) var(--a2c-ease-productive);
}

.call > summary::-webkit-details-marker {
  display: none;
}

.call > summary:hover {
  background: var(--cds-background-hover);
}

.call > summary:focus-visible {
  outline: 2px solid var(--cds-focus);
  outline-offset: -2px;
}

.call__caret {
  width: 0.5rem;
  height: 0.5rem;
  flex: none;
  margin-inline: var(--a2c-space-03);
  border-right: 1px solid var(--cds-text-helper);
  border-bottom: 1px solid var(--cds-text-helper);
  transform: rotate(-45deg);
  transition: transform var(--a2c-dur) var(--a2c-ease-productive);
}

.call[open] > summary .call__caret {
  transform: rotate(45deg);
}

.call__name {
  font-family: var(--a2c-font-mono);
  font-size: var(--a2c-type-caption);
  color: var(--cds-text-primary);
  overflow-wrap: anywhere;
}

.call__args {
  font-family: var(--a2c-font-mono);
  font-size: var(--a2c-type-caption);
  color: var(--cds-text-helper);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1 1 8rem;
  min-width: 0;
}

.call__facts {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--a2c-space-04);
  font-family: var(--a2c-font-mono);
  font-size: var(--a2c-type-caption);
  color: var(--cds-text-helper);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.call--error .call__name {
  color: var(--a2c-text-danger);
}

.call__body {
  display: grid;
  gap: var(--a2c-space-04);
  padding: var(--a2c-space-04) 0 var(--a2c-space-05) var(--a2c-space-06);
}

.payload {
  display: grid;
  gap: var(--a2c-space-02);
}

.payload__label {
  font-size: var(--a2c-type-caption);
  font-weight: var(--a2c-weight-label);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cds-text-helper);
}

.dim {
  font-size: var(--a2c-type-caption);
  color: var(--cds-text-helper);
}

.problem {
  font-size: var(--a2c-type-caption);
  color: var(--a2c-text-danger);
}

.remedy {
  font-size: var(--a2c-type-caption);
  color: var(--cds-text-primary);
}

/* -- artifacts written by a stage ------------------------------------------ */

.wrote {
  display: flex;
  flex-wrap: wrap;
  gap: var(--a2c-space-02);
}

.wrote button {
  display: inline-flex;
  align-items: center;
  gap: var(--a2c-space-03);
  padding: var(--a2c-space-02) var(--a2c-space-04);
  font-family: var(--a2c-font-mono);
  font-size: var(--a2c-type-caption);
  color: var(--cds-link-primary);
  background: var(--cds-layer-02);
  border: 1px solid var(--cds-border-subtle-01);
  transition: background var(--a2c-dur) var(--a2c-ease-productive);
}

.wrote button:hover {
  background: var(--cds-layer-hover-02);
}

.wrote button.is-missing {
  color: var(--a2c-text-danger);
  text-decoration: line-through;
}

/* ==========================================================================
   11. Screen 3 — the gate
   ========================================================================== */

.gate {
  background: var(--cds-layer-01);
  border: 1px solid var(--cds-border-subtle-01);
  border-top: var(--a2c-rule) solid var(--a2c-amber);
  display: grid;
}

.gate--approved { border-top-color: var(--cds-support-success); }
.gate--absent { border-top-color: var(--cds-support-error); }
.gate--decided { border-top-color: var(--cds-border-strong-01); }

.gate__head {
  display: grid;
  gap: var(--a2c-space-04);
  justify-items: start;
  padding: var(--a2c-space-06) var(--a2c-gutter) var(--a2c-space-05);
}

.gate__title {
  font-size: var(--a2c-type-section);
  font-weight: var(--a2c-weight-light);
  letter-spacing: -0.015em;
  max-width: 32ch;
}

.gate__verdict {
  display: inline-flex;
  align-items: center;
  gap: var(--a2c-space-03);
  padding: var(--a2c-space-02) var(--a2c-space-04);
  font-family: var(--a2c-font-mono);
  font-size: var(--a2c-type-caption);
  letter-spacing: 0.12em;
  background: var(--cds-layer-02);
  box-shadow: inset 0 0 0 1px var(--cds-border-subtle-01);
  border-left: 2px solid var(--a2c-amber);
  color: var(--a2c-text-caution);
}

.gate--approved .gate__verdict {
  border-left-color: var(--cds-support-success);
  color: var(--a2c-text-success);
}

.gate--absent .gate__verdict {
  border-left-color: var(--cds-support-error);
  color: var(--a2c-text-danger);
}

.gate--decided .gate__verdict {
  border-left-color: var(--cds-border-strong-01);
  color: var(--cds-text-secondary);
}

.gate__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(20rem, 0.9fr);
  border-top: 1px solid var(--cds-border-subtle-01);
}

@media (max-width: 68rem) {
  .gate__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.gate__evidence {
  padding: var(--a2c-space-06) var(--a2c-space-06) var(--a2c-space-06) var(--a2c-gutter);
  display: grid;
  gap: var(--a2c-space-05);
  align-content: start;
  min-width: 0;
}

.gate__decision {
  padding: var(--a2c-space-06) var(--a2c-gutter) var(--a2c-space-06) var(--a2c-space-06);
  border-left: 1px solid var(--cds-border-subtle-01);
  background: var(--cds-layer-02);
  display: grid;
  gap: var(--a2c-space-05);
  align-content: start;
}

@media (max-width: 68rem) {
  .gate__decision {
    border-left: 0;
    border-top: 1px solid var(--cds-border-subtle-01);
    padding-left: var(--a2c-gutter);
  }
}

.gate__excerpt {
  max-height: 24rem;
  overflow: auto;
  background: var(--cds-layer-02);
  border-left: 2px solid var(--cds-border-subtle-01);
  padding: var(--a2c-space-04) var(--a2c-space-05);
  font-family: var(--a2c-font-mono);
  font-size: var(--a2c-type-caption);
  line-height: var(--a2c-lh-prose);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: var(--cds-text-secondary);
}

.gate__choices {
  display: grid;
  gap: var(--a2c-space-02);
  border: 0;
}

.gate__choices legend {
  font-size: var(--a2c-type-caption);
  font-weight: var(--a2c-weight-label);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cds-text-secondary);
  margin-bottom: var(--a2c-space-03);
}

.choice {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--a2c-space-04);
  align-items: start;
  padding: var(--a2c-space-04);
  background: var(--cds-layer-01);
  border: 1px solid var(--cds-border-subtle-01);
  cursor: pointer;
  transition: border-color var(--a2c-dur) var(--a2c-ease-productive),
    background var(--a2c-dur) var(--a2c-ease-productive);
}

.choice:hover {
  background: var(--cds-layer-hover-01);
}

.choice input {
  margin-top: 0.2rem;
  width: 1rem;
  height: 1rem;
  accent-color: var(--cds-interactive);
}

.choice:has(input:checked) {
  border-color: var(--cds-interactive);
  box-shadow: inset 2px 0 0 var(--cds-interactive);
}

.choice:has(input:focus-visible) {
  outline: 2px solid var(--cds-focus);
  outline-offset: 1px;
}

.choice__label {
  display: block;
  font-size: var(--a2c-type-body-sm);
  font-weight: var(--a2c-weight-label);
  color: var(--cds-text-primary);
}

.choice__hint {
  display: block;
  font-size: var(--a2c-type-caption);
  color: var(--cds-text-helper);
  line-height: var(--a2c-lh-body);
}

.gate__override {
  padding: var(--a2c-space-04);
  background: var(--cds-notification-background-warning);
  border-left: var(--a2c-rule) solid var(--a2c-amber);
  font-size: var(--a2c-type-caption);
  color: var(--cds-text-primary);
}

.gate__findings {
  display: grid;
}

.finding {
  display: grid;
  grid-template-columns: 6rem minmax(0, 1fr);
  gap: var(--a2c-space-04);
  padding: var(--a2c-space-04) 0;
  border-bottom: 1px solid var(--cds-border-subtle-01);
  font-size: var(--a2c-type-caption);
}

.finding:last-child {
  border-bottom: 0;
}

.finding__sev {
  font-family: var(--a2c-font-mono);
  letter-spacing: 0.08em;
  color: var(--cds-text-helper);
  white-space: nowrap;
}

.finding__sev--critical,
.finding__sev--high {
  color: var(--a2c-text-danger);
}

.finding__sev--medium {
  color: var(--a2c-text-caution);
}

.finding__body {
  display: grid;
  gap: var(--a2c-space-02);
  min-width: 0;
}

.finding__title {
  color: var(--cds-text-primary);
  font-weight: var(--a2c-weight-label);
  overflow-wrap: anywhere;
}

.finding__text {
  color: var(--cds-text-secondary);
  min-width: 0;
  overflow-wrap: anywhere;
}

.finding__text code,
.finding__title code {
  color: var(--cds-link-primary);
}

/* ==========================================================================
   12. Screen 4 — delivery
   ========================================================================== */

.deliver {
  padding-block: var(--a2c-space-06) var(--a2c-space-08);
  display: grid;
  gap: var(--a2c-space-06);
}

.downloads {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
  gap: 1px;
  background: var(--cds-border-subtle-01);
  border: 1px solid var(--cds-border-subtle-01);
  border-top: var(--a2c-rule) solid var(--cds-interactive);
}

.dl {
  background: var(--cds-layer-01);
  padding: var(--a2c-space-06);
  display: grid;
  gap: var(--a2c-space-04);
  align-content: start;
}

.dl__name {
  font-size: var(--a2c-type-lead);
  font-weight: var(--a2c-weight-light);
  letter-spacing: -0.01em;
}

.dl__what {
  font-size: var(--a2c-type-caption);
  color: var(--cds-text-helper);
  line-height: var(--a2c-lh-body);
  max-width: 48ch;
}

.dl__facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--a2c-space-05);
  font-family: var(--a2c-font-mono);
  font-size: var(--a2c-type-caption);
  color: var(--cds-text-secondary);
  font-variant-numeric: tabular-nums;
}

.files {
  display: grid;
  grid-template-columns: minmax(16rem, 21rem) minmax(0, 1fr);
  gap: var(--a2c-space-05);
  align-items: start;
}

@media (max-width: 68rem) {
  .files {
    grid-template-columns: minmax(0, 1fr);
  }
}

.tree {
  font-size: var(--a2c-type-caption);
  max-height: 42rem;
  overflow: auto;
}

.tree ul {
  display: grid;
}

.tree details > summary {
  display: flex;
  align-items: center;
  gap: var(--a2c-space-03);
  padding: var(--a2c-space-02) var(--a2c-space-04);
  cursor: pointer;
  list-style: none;
  font-family: var(--a2c-font-mono);
  color: var(--cds-text-secondary);
}

.tree details > summary::-webkit-details-marker {
  display: none;
}

.tree details > summary:hover {
  background: var(--cds-background-hover);
}

.tree details > summary::before {
  content: "";
  width: 0.4375rem;
  height: 0.4375rem;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: rotate(-45deg);
  flex: none;
  transition: transform var(--a2c-dur) var(--a2c-ease-productive);
}

.tree details[open] > summary::before {
  transform: rotate(45deg);
}

.tree__file {
  display: flex;
  align-items: baseline;
  gap: var(--a2c-space-04);
  width: 100%;
  padding: var(--a2c-space-02) var(--a2c-space-04);
  text-align: left;
  font-family: var(--a2c-font-mono);
  font-size: var(--a2c-type-caption);
  color: var(--cds-text-secondary);
  border-left: 2px solid transparent;
  transition: background var(--a2c-dur) var(--a2c-ease-productive);
}

.tree__file:hover {
  background: var(--cds-background-hover);
  color: var(--cds-text-primary);
}

.tree__file.is-selected {
  background: var(--cds-layer-selected-01);
  border-left-color: var(--cds-interactive);
  color: var(--cds-text-primary);
}

.tree__file.is-missing {
  color: var(--a2c-text-danger);
}

.tree__size {
  margin-left: auto;
  /* Secondary, not helper: on the selected row (--cds-layer-selected-01, #e0e0e0
     in g10) the helper grey measures 3.81:1. */
  color: var(--cds-text-secondary);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.viewer {
  min-width: 0;
}

.viewer__head {
  display: flex;
  align-items: center;
  gap: var(--a2c-space-04);
  flex-wrap: wrap;
  padding: var(--a2c-space-04) var(--a2c-space-05);
  border-bottom: 1px solid var(--cds-border-subtle-01);
}

.viewer__path {
  font-family: var(--a2c-font-mono);
  font-size: var(--a2c-type-caption);
  color: var(--cds-text-primary);
  overflow-wrap: anywhere;
}

.viewer__meta {
  font-size: var(--a2c-type-caption);
  color: var(--cds-text-helper);
}

.artifact-image {
  max-width: 100%;
  margin: var(--a2c-space-05);
}

/* ==========================================================================
   13. Code
   ========================================================================== */

.code-block,
.artifact-pre {
  margin: 0;
  padding: var(--a2c-space-04) var(--a2c-space-05);
  background: var(--cds-layer-02);
  border-left: 1px solid var(--cds-border-subtle-01);
  color: var(--cds-text-primary);
  font-family: var(--a2c-font-mono);
  font-size: var(--a2c-type-caption);
  line-height: 1.55;
  overflow: auto;
  max-height: 26rem;
  white-space: pre;
  tab-size: 2;
}

.artifact-pre {
  max-height: 44rem;
  border-left: 0;
}

.code-block--wrap {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.code-block--tall {
  max-height: 44rem;
}

.code-stderr {
  border-left: 2px solid var(--cds-support-error);
}

.gutter {
  display: inline-block;
  vertical-align: top;
  text-align: right;
  padding-right: 1ch;
  margin-right: 1ch;
  border-right: 1px solid var(--cds-border-subtle-01);
  color: var(--cds-text-helper);
  user-select: none;
  -webkit-user-select: none;
}

.code-col {
  display: inline-block;
  vertical-align: top;
  white-space: pre;
}

.j-key { color: var(--cds-syntax-attribute-name); }
.j-str { color: var(--cds-syntax-string); }
.j-num { color: var(--cds-syntax-number); }
.j-bool { color: var(--cds-syntax-bool); }
.j-null { color: var(--cds-syntax-null); }
.j-punct { color: var(--cds-syntax-punctuation); }
.y-comment { color: var(--cds-syntax-comment); }
.y-dash { color: var(--cds-syntax-punctuation); }

.md-heading { color: var(--cds-syntax-heading); font-weight: var(--a2c-weight-strong); }
.md-fence { color: var(--cds-syntax-comment); }
.md-code { color: var(--cds-syntax-string); }
.md-quote { color: var(--cds-text-helper); }
.md-list { color: var(--cds-text-secondary); }
.md-verdict-ok { color: var(--a2c-text-success); font-weight: var(--a2c-weight-strong); }
.md-verdict-block { color: var(--a2c-text-danger); font-weight: var(--a2c-weight-strong); }

.snippet {
  position: relative;
}

.snippet__actions {
  position: absolute;
  right: var(--a2c-space-03);
  top: var(--a2c-space-03);
  z-index: 1;
}

/* ==========================================================================
   14. Environment panel
   ========================================================================== */

.health-panel {
  border-bottom: 1px solid var(--cds-border-subtle-01);
  background: var(--cds-layer-01);
  padding: var(--a2c-space-05) var(--a2c-gutter) var(--a2c-space-06);
  display: grid;
  gap: var(--a2c-space-04);
}

.probe-list {
  display: grid;
}

.probe {
  display: grid;
  gap: var(--a2c-space-02);
  padding: var(--a2c-space-04) 0;
  border-bottom: 1px solid var(--cds-border-subtle-01);
}

.probe-head {
  display: flex;
  align-items: center;
  gap: var(--a2c-space-04);
  flex-wrap: wrap;
}

.probe-dot {
  width: 0.5rem;
  height: 0.5rem;
  flex: none;
  background: var(--cds-border-strong-01);
}

.probe-dot-ok { background: var(--cds-support-success); }
.probe-dot-warn { background: var(--a2c-amber); }
.probe-dot-error { background: var(--cds-support-error); }

.probe-title {
  font-size: var(--a2c-type-body-sm);
  color: var(--cds-text-primary);
}

.probe-id {
  font-family: var(--a2c-font-mono);
  font-size: var(--a2c-type-caption);
  color: var(--cds-text-helper);
}

.probe-detail {
  font-size: var(--a2c-type-caption);
  color: var(--cds-text-secondary);
  overflow-wrap: anywhere;
}

.probe-remedy {
  font-size: var(--a2c-type-caption);
  color: var(--cds-text-primary);
  border-left: 2px solid var(--cds-interactive);
  padding-left: var(--a2c-space-04);
}

.probe-remedy-missing {
  border-left-color: var(--cds-support-error);
}

/* ==========================================================================
   15. Empty, loading and skeleton states
   ========================================================================== */

.empty {
  font-size: var(--a2c-type-caption);
  color: var(--cds-text-helper);
}

.empty-state {
  display: grid;
  gap: var(--a2c-space-03);
  padding: var(--a2c-space-07) var(--a2c-space-05);
  text-align: center;
  justify-items: center;
}

.empty-state .empty {
  font-size: var(--a2c-type-body-sm);
  color: var(--cds-text-secondary);
}

.empty-hint {
  font-size: var(--a2c-type-caption);
  color: var(--cds-text-helper);
  max-width: 54ch;
}

.loading {
  font-size: var(--a2c-type-caption);
  color: var(--cds-text-helper);
}

.skeleton {
  background: linear-gradient(
    90deg,
    var(--cds-skeleton-background),
    var(--cds-skeleton-element),
    var(--cds-skeleton-background)
  );
  background-size: 200% 100%;
  animation: a2c-shimmer 1.4s linear infinite;
}

@keyframes a2c-shimmer {
  to {
    background-position: -200% 0;
  }
}

.skeleton-text {
  height: 0.75rem;
  width: 100%;
}

.skeleton-block {
  height: 12rem;
  width: 100%;
}

/* ==========================================================================
   16. Motion preference
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   17. Print — a run is evidence, and evidence gets printed
   ========================================================================== */

@media print {
  .masthead,
  .runbar,
  .switcher,
  .btn,
  .dropzone {
    display: none !important;
  }

  body {
    background: none;
  }

  .surface,
  .gate {
    border: 1px solid var(--cds-border-strong-01);
    break-inside: avoid;
  }

  .reasoning,
  .gate__excerpt,
  .artifact-pre {
    max-height: none;
    overflow: visible;
  }
}

/* Deployment transcript (the last-mile SaaS deploy log). */
.deploy-log {
  margin: 0;
  padding: var(--a2c-space-04, 0.75rem);
  background: var(--cds-layer-01, #161616);
  border-radius: 4px;
  max-height: 22rem;
  overflow: auto;
  font-family: var(--a2c-font-mono, ui-monospace, monospace);
  font-size: 0.8125rem;
  line-height: 1.5;
}
.deploy-line { white-space: pre-wrap; word-break: break-word; color: var(--cds-text-secondary, #c6c6c6); }
.deploy-line--cmd { color: var(--cds-text-primary, #f4f4f4); font-weight: 500; }
.deploy-line--ok { color: var(--a2c-text-success, #42be65); }
.deploy-line--err { color: var(--a2c-text-danger, #ff8389); }