/* AUTO-GENERATED from src/system/layers.css and src/system/{contracts,primitives,recipes}/*.css by scripts/build-system.js — DO NOT EDIT. */

/* Public cascade order. Product overrides are last; the kernel ships no reset. */
@layer oi.mapping, oi.contracts, oi.primitives, oi.recipes, oi.utilities, product;

/* source: src/system/contracts/surfaces.css */
@layer oi.contracts {
  .oi-root {
    --_oi-surface-background: var(--oi-surface-base);
    --_oi-surface-border: var(--oi-border-subtle);
    --_oi-surface-elevation: var(--oi-elevation-flat);
    --_oi-surface-radius: var(--oi-geometry-radius-surface);

    min-inline-size: 0;
    background-color: var(--oi-surface-canvas);
    color: var(--oi-text-body);
    font-family: var(--oi-typography-body);
  }

  :where([data-oi-surface]) {
    min-inline-size: 0;
    background-color: var(--_oi-surface-background);
    border-color: var(--_oi-surface-border);
    border-radius: var(--_oi-surface-radius);
    box-shadow: var(--_oi-surface-elevation);
  }

  :where([data-oi-surface="canvas"]) {
    --_oi-surface-background: var(--oi-surface-canvas);
    --_oi-surface-border: var(--oi-border-subtle);
    --_oi-surface-elevation: var(--oi-elevation-flat);
  }

  :where([data-oi-surface="base"]) {
    --_oi-surface-background: var(--oi-surface-base);
    --_oi-surface-border: var(--oi-border-subtle);
    --_oi-surface-elevation: var(--oi-elevation-flat);
  }

  :where([data-oi-surface="raised"]) {
    --_oi-surface-background: var(--oi-surface-raised);
    --_oi-surface-border: var(--oi-border-default);
    --_oi-surface-elevation: var(--oi-elevation-raised);
  }

  :where([data-oi-surface="interactive"]) {
    --_oi-surface-background: var(--oi-surface-interactive);
    --_oi-surface-border: var(--oi-border-default);
    --_oi-surface-elevation: var(--oi-elevation-flat);
  }

  :where([data-oi-surface="interactive"]):is(:hover, :focus-within) {
    --_oi-surface-background: var(--oi-surface-hover);
    --_oi-surface-border: var(--oi-border-strong);
  }

  :where([data-oi-surface="inset"]) {
    --_oi-surface-background: var(--oi-surface-inset);
    --_oi-surface-border: var(--oi-border-subtle);
    --_oi-surface-elevation: var(--oi-elevation-flat);
  }

  :where([data-oi-surface="overlay"]) {
    --_oi-surface-background: var(--oi-surface-overlay);
    --_oi-surface-border: var(--oi-border-strong);
    --_oi-surface-elevation: var(--oi-elevation-overlay);
    --_oi-surface-radius: var(--oi-geometry-radius-overlay);
  }

  :where([data-oi-surface="scrim"]) {
    --_oi-surface-background: var(--oi-surface-scrim);
    --_oi-surface-border: var(--oi-border-subtle);
    --_oi-surface-elevation: var(--oi-elevation-flat);
  }

  @media (prefers-contrast: more) {
    :where(
      [data-oi-surface="base"],
      [data-oi-surface="raised"],
      [data-oi-surface="interactive"],
      [data-oi-surface="inset"],
      [data-oi-surface="overlay"],
      [data-oi-surface="scrim"]
    ) {
      --_oi-surface-border: var(--oi-border-strong);
    }
  }
}

/* source: src/system/contracts/text.css */
@layer oi.contracts {
  .oi-root {
    color: var(--oi-text-body);
    font-family: var(--oi-typography-body);
    font-size: var(--oi-typography-size-body);
    line-height: var(--oi-typography-line-reading);
    text-rendering: optimizeLegibility;
  }

  :where([data-oi-emphasis="quiet"]) {
    color: var(--oi-text-muted);
  }

  :where([data-oi-emphasis="normal"]) {
    color: var(--oi-text-body);
  }

  :where([data-oi-emphasis="strong"]) {
    color: var(--oi-text-primary);
    font-weight: 600;
  }
}

/* source: src/system/contracts/interaction.css */
@layer oi.contracts {
  .oi-root :where(
    a,
    button,
    input,
    select,
    textarea,
    summary,
    [role="button"],
    [tabindex]:not([tabindex="-1"])
  ) {
    min-block-size: var(--oi-interaction-pointer-target-min);
    min-inline-size: var(--oi-interaction-pointer-target-min);
  }

  .oi-root :where(
    a,
    button,
    input,
    select,
    textarea,
    summary,
    [role="button"],
    [tabindex]:not([tabindex="-1"])
  ):focus-visible {
    outline: var(--oi-interaction-focus-ring-width) solid var(--oi-border-focus);
    outline-offset: var(--oi-interaction-focus-ring-offset);
  }

  .oi-root :where(:disabled, [aria-disabled="true"]) {
    cursor: not-allowed;
    opacity: 0.55;
  }

  .oi-root :where([aria-busy="true"]) {
    cursor: progress;
  }

  .oi-root :where([aria-selected="true"], [aria-current]:not([aria-current="false"])) {
    background-color: var(--oi-surface-hover);
    border-color: var(--oi-accent-primary);
  }

  @media (pointer: coarse), (any-pointer: coarse) {
    .oi-root :where(
      a,
      button,
      input,
      select,
      textarea,
      summary,
      [role="button"],
      [tabindex]:not([tabindex="-1"])
    ) {
      min-block-size: var(--oi-interaction-touch-target-min);
      min-inline-size: var(--oi-interaction-touch-target-min);
    }
  }

  @media (forced-colors: active) {
    .oi-root :where(
      a,
      button,
      input,
      select,
      textarea,
      summary,
      [role="button"],
      [tabindex]:not([tabindex="-1"])
    ):focus-visible {
      outline-color: CanvasText;
    }
  }
}

/* source: src/system/contracts/state.css */
@layer oi.contracts {
  .oi-root {
    --_oi-status-color: var(--oi-border-default);
  }

  :where([data-oi-severity]) {
    border-color: var(--_oi-status-color);
  }

  :where([data-oi-severity="neutral"]) {
    --_oi-status-color: var(--oi-border-default);
  }

  :where([data-oi-severity="informational"]) {
    --_oi-status-color: var(--oi-status-informational);
  }

  :where([data-oi-severity="positive"]) {
    --_oi-status-color: var(--oi-status-positive);
  }

  :where([data-oi-severity="warning"]) {
    --_oi-status-color: var(--oi-status-warning);
  }

  :where([data-oi-severity="negative"]) {
    --_oi-status-color: var(--oi-status-negative);
  }

  :where([data-oi-severity="critical"]) {
    --_oi-status-color: var(--oi-status-critical);
    box-shadow: var(--oi-elevation-critical);
  }

  :where([data-oi-activity="loading"], [data-oi-activity="refreshing"]) {
    cursor: progress;
  }

  :where([data-oi-activity="failed"]) {
    border-block-end-color: var(--oi-status-negative);
    border-block-end-style: solid;
    border-block-end-width: var(--oi-interaction-focus-ring-width);
  }

  :where([data-oi-activity="live"]) {
    border-block-start-color: var(--oi-status-live);
    border-block-start-style: solid;
    border-block-start-width: var(--oi-interaction-focus-ring-width);
  }

}

/* source: src/system/contracts/truth.css */
@layer oi.contracts {
  :where(
    [data-oi-source],
    [data-oi-freshness],
    [data-oi-certainty],
    [data-oi-completeness]
  ) {
    --_oi-truth-border-style: solid;
    --_oi-truth-font-style: normal;
    --_oi-truth-decoration-line: none;
    --_oi-truth-decoration-style: solid;
    --_oi-truth-completeness-border-style: solid;
    --_oi-truth-completeness-border-width: 1px;
  }

  :where([data-oi-source="derived"], [data-oi-source="generated"]) {
    --_oi-truth-font-style: italic;
  }

  :where([data-oi-source="external"]) {
    --_oi-truth-font-style: oblique;
  }

  :where([data-oi-freshness="stale"], [data-oi-freshness="unknown"]) {
    --_oi-truth-decoration-line: underline;
    --_oi-truth-decoration-style: dashed;
  }

  :where([data-oi-certainty="inferred"], [data-oi-certainty="uncertain"]) {
    --_oi-truth-border-style: dashed;
    --_oi-truth-font-style: italic;
  }

  :where([data-oi-certainty="disputed"]) {
    --_oi-truth-border-style: double;
    --_oi-truth-decoration-line: underline;
    --_oi-truth-decoration-style: wavy;
  }

  :where([data-oi-completeness="partial"]) {
    --_oi-truth-completeness-border-style: dashed;
    --_oi-truth-completeness-border-width: var(--oi-interaction-focus-ring-width);
  }

  :where([data-oi-completeness="missing"]) {
    --_oi-truth-completeness-border-style: double;
    --_oi-truth-completeness-border-width: calc(var(--oi-interaction-focus-ring-width) * 2);
  }

  :where([data-oi-completeness="unavailable"]) {
    --_oi-truth-completeness-border-style: dotted;
    --_oi-truth-completeness-border-width: var(--oi-interaction-focus-ring-width);
  }
}

/* source: src/system/contracts/density.css */
@layer oi.contracts {
  .oi-root,
  :where([data-oi-density="standard"]) {
    --_oi-density-gap: calc(var(--oi-geometry-space) * 3);
    --_oi-density-inset: calc(var(--oi-geometry-space) * 4);
    --_oi-density-control-size: var(--oi-interaction-pointer-target-min);
  }

  :where([data-oi-density="compact"]) {
    --_oi-density-gap: calc(var(--oi-geometry-space) * 2);
    --_oi-density-inset: calc(var(--oi-geometry-space) * 3);
    --_oi-density-control-size: var(--oi-interaction-pointer-target-min);
  }

  :where([data-oi-density="spacious"]) {
    --_oi-density-gap: calc(var(--oi-geometry-space) * 4);
    --_oi-density-inset: calc(var(--oi-geometry-space) * 6);
    --_oi-density-control-size: var(--oi-interaction-touch-target-min);
  }
}

/* source: src/system/contracts/motion.css */
@layer oi.contracts {
  :where([data-oi-activity], [data-oi-severity], [data-oi-freshness]) {
    transition-duration: var(--oi-motion-duration-fast);
    transition-property: background-color, border-color, box-shadow, color, outline-color;
    transition-timing-function: var(--oi-motion-ease-standard);
  }

  @media (prefers-reduced-motion: reduce) {
    :where([data-oi-activity], [data-oi-severity], [data-oi-freshness]) {
      transition-duration: 0ms;
    }
  }
}

/* source: src/system/primitives/surface.css */
@layer oi.primitives {
  .oi-surface {
    box-sizing: border-box;
    min-inline-size: 0;
    margin: 0;
    padding: var(--oi-surface-padding, var(--_oi-density-inset));
    overflow: var(--oi-surface-overflow, clip);
    border-style: solid;
    border-width: 1px;
  }

  @media (forced-colors: active) {
    .oi-surface {
      background-color: Canvas;
      border-color: CanvasText;
      box-shadow: none;
    }
  }
}

/* source: src/system/primitives/stack.css */
@layer oi.primitives {
  .oi-stack {
    display: flex;
    flex-direction: column;
    align-items: var(--oi-stack-align, stretch);
    min-inline-size: 0;
    margin: 0;
    gap: var(--oi-stack-gap, var(--_oi-density-gap));
  }
}

/* source: src/system/primitives/cluster.css */
@layer oi.primitives {
  .oi-cluster {
    display: flex;
    flex-direction: row;
    flex-wrap: var(--oi-cluster-wrap, wrap);
    align-items: var(--oi-cluster-align, center);
    justify-content: var(--oi-cluster-justify, start);
    min-inline-size: 0;
    margin: 0;
    gap: var(--oi-cluster-gap, var(--_oi-density-gap));
  }
}

/* source: src/system/primitives/rail.css */
@layer oi.primitives {
  .oi-rail {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    min-inline-size: 0;
    margin: 0;
    gap: var(--oi-rail-gap, var(--_oi-density-gap));
  }

  .oi-rail__rail {
    flex: 1 1 var(--oi-rail-size, calc(var(--oi-geometry-space) * 48));
    min-inline-size: min(
      100%,
      var(--oi-rail-size, calc(var(--oi-geometry-space) * 48))
    );
    max-inline-size: 100%;
  }

  .oi-rail__content {
    container-type: inline-size;
    flex: 999 1 0;
    min-inline-size: min(100%, var(--oi-rail-content-min, 50%));
    max-inline-size: 100%;
  }
}

/* source: src/system/primitives/inset.css */
@layer oi.primitives {
  .oi-inset {
    box-sizing: border-box;
    min-inline-size: 0;
    margin: 0;
    padding: var(--oi-inset-padding, var(--_oi-density-inset));
    overflow: var(--oi-inset-overflow, auto);
    border-style: solid;
    border-width: 1px;
  }

  @media (forced-colors: active) {
    .oi-inset {
      background-color: Canvas;
      border-color: CanvasText;
      box-shadow: none;
    }
  }
}

/* source: src/system/primitives/divider.css */
@layer oi.primitives {
  .oi-divider {
    --_oi-divider-color: var(--oi-border-default);

    box-sizing: border-box;
    inline-size: 100%;
    block-size: 0;
    margin: 0;
    padding: 0;
    color: var(--_oi-divider-color);
    border: 0;
    border-block-start: var(--oi-divider-size, 1px) solid var(--_oi-divider-color);
  }

  .oi-divider[data-oi-emphasis="quiet"] {
    --_oi-divider-color: var(--oi-border-subtle);
  }

  .oi-divider[data-oi-emphasis="strong"] {
    --_oi-divider-color: var(--oi-border-strong);
  }

  .oi-divider[aria-orientation="vertical"] {
    align-self: stretch;
    inline-size: 0;
    block-size: auto;
    border-block-start: 0;
    border-inline-start: var(--oi-divider-size, 1px) solid var(--_oi-divider-color);
  }

  @media (forced-colors: active) {
    .oi-divider {
      --_oi-divider-color: CanvasText;
    }
  }
}

/* source: src/system/primitives/metric.css */
@layer oi.primitives {
  .oi-metric {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    min-inline-size: 0;
    margin: 0;
    padding: var(--_oi-density-gap);
    gap: var(--oi-geometry-space) calc(var(--oi-geometry-space) * 2);
    border-color: var(--_oi-status-color);
    border-style: var(--_oi-truth-border-style);
    border-width: 1px;
  }

  .oi-metric__label,
  .oi-metric__value,
  .oi-metric__unit,
  .oi-metric__trend,
  .oi-metric__provenance {
    min-inline-size: 0;
    margin: 0;
  }

  .oi-metric__label {
    grid-column: 1 / -1;
    color: var(--oi-text-muted);
    font-family: var(--oi-typography-body);
    font-size: var(--oi-typography-size-label);
    line-height: var(--oi-typography-line-compact);
    overflow-wrap: anywhere;
  }

  .oi-metric__value {
    grid-column: 1;
    color: var(--oi-text-primary);
    font-family: var(--oi-typography-mono);
    font-size: var(--oi-metric-value-size, var(--oi-typography-size-display));
    font-variant-numeric: lining-nums tabular-nums;
    font-weight: 700;
    line-height: var(--oi-typography-line-compact);
    overflow-wrap: anywhere;
  }

  .oi-metric__unit {
    align-self: end;
    grid-column: 2;
    color: var(--oi-text-muted);
    font-family: var(--oi-typography-body);
    font-size: var(--oi-typography-size-body);
    line-height: var(--oi-typography-line-compact);
    overflow-wrap: anywhere;
  }

  .oi-metric__trend {
    grid-column: 1 / -1;
    color: var(--oi-text-body);
    font-family: var(--oi-typography-body);
    font-size: var(--oi-typography-size-label);
    line-height: var(--oi-typography-line-reading);
    overflow-wrap: anywhere;
  }

  .oi-metric__provenance {
    grid-column: 1 / -1;
    padding-inline-start: calc(var(--oi-geometry-space) * 2);
    color: var(--oi-text-muted);
    border-inline-start-color: var(--oi-border-strong);
    border-inline-start-style: var(--_oi-truth-completeness-border-style);
    border-inline-start-width: var(--_oi-truth-completeness-border-width);
    font-family: var(--oi-typography-body);
    font-size: var(--oi-typography-size-label);
    font-style: var(--_oi-truth-font-style);
    line-height: var(--oi-typography-line-reading);
    overflow-wrap: anywhere;
    text-decoration-color: var(--oi-text-muted);
    text-decoration-line: var(--_oi-truth-decoration-line);
    text-decoration-style: var(--_oi-truth-decoration-style);
    text-underline-offset: calc(var(--oi-geometry-space) / 2);
  }

  @media (forced-colors: active) {
    .oi-metric {
      box-shadow: none;
    }

    .oi-metric__trend {
      color: CanvasText;
    }

    .oi-metric__provenance {
      border-color: CanvasText;
    }
  }
}

/* source: src/system/primitives/meter.css */
@layer oi.primitives {
  .oi-meter {
    --_oi-meter-accent: var(--_oi-status-color);

    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    min-inline-size: 0;
    margin: 0;
    gap: var(--oi-geometry-space) calc(var(--oi-geometry-space) * 2);
  }

  .oi-meter__label {
    grid-column: 1;
    min-inline-size: 0;
    color: var(--oi-text-body);
    font-family: var(--oi-typography-body);
    font-size: var(--oi-typography-size-body);
    line-height: var(--oi-typography-line-compact);
    overflow-wrap: anywhere;
  }

  .oi-meter__control {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    opacity: 0;
    pointer-events: none;
    white-space: nowrap;
  }

  .oi-meter__track {
    box-sizing: border-box;
    grid-column: 1 / -1;
    inline-size: 100%;
    min-inline-size: 0;
    block-size: var(
      --oi-meter-track-size,
      calc(var(--oi-geometry-space) * 3)
    );
    overflow: clip;
    background-color: var(--oi-surface-inset);
    border: 1px solid var(--oi-border-default);
    border-radius: var(--oi-geometry-radius-control);
  }

  .oi-meter__fill {
    display: block;
    inline-size: clamp(0%, var(--oi-meter-value, 0%), 100%);
    max-inline-size: 100%;
    block-size: 100%;
    background-color: var(--_oi-meter-accent);
  }

  .oi-meter__value {
    grid-column: 2;
    min-inline-size: 0;
    color: var(--oi-text-primary);
    font-family: var(--oi-typography-mono);
    font-size: var(--oi-meter-value-size, var(--oi-typography-size-title));
    font-variant-numeric: lining-nums tabular-nums;
    line-height: var(--oi-typography-line-compact);
    overflow-wrap: anywhere;
  }

  .oi-meter__description {
    grid-column: 1 / -1;
    min-inline-size: 0;
    color: var(--oi-text-muted);
    font-family: var(--oi-typography-body);
    font-size: var(--oi-typography-size-label);
    line-height: var(--oi-typography-line-reading);
    overflow-wrap: anywhere;
  }

  @media (forced-colors: active) {
    .oi-meter {
      box-shadow: none;
    }

    .oi-meter__track {
      background-color: Canvas;
      border-color: CanvasText;
    }

    .oi-meter__fill {
      background-color: Highlight;
    }
  }
}

/* source: src/system/primitives/disclosure.css */
@layer oi.primitives {
  .oi-disclosure {
    min-inline-size: 0;
    margin: 0;
  }

  .oi-disclosure__summary {
    box-sizing: border-box;
    display: list-item;
    min-inline-size: 0;
    padding-block: calc(var(--oi-geometry-space) * 2);
    padding-inline: 0;
    color: var(--oi-text-body);
    cursor: pointer;
    font-family: var(--oi-typography-body);
    font-size: var(--oi-typography-size-body);
    line-height: var(--oi-typography-line-reading);
    overflow-wrap: anywhere;
  }

  .oi-disclosure__summary::marker {
    color: var(--oi-accent-primary);
  }

  .oi-disclosure[open] > .oi-disclosure__summary {
    color: var(--oi-text-primary);
    font-weight: 600;
  }

  .oi-disclosure__content {
    min-inline-size: 0;
    padding-block-start: var(--_oi-density-gap);
    padding-inline-start: var(--_oi-density-gap);
    line-height: var(--oi-typography-line-reading);
  }

  @media (forced-colors: active) {
    .oi-disclosure__summary,
    .oi-disclosure__summary::marker {
      color: CanvasText;
    }
  }
}

/* source: src/system/primitives/history-strip.css */
@layer oi.primitives {
  /* Items share one width so bar lengths stay comparable. When the container
     cannot fit every item at its preferred size, the strip wraps to further
     rows (still oldest to newest, reading order) instead of becoming an
     inline scroll region that keyboard users cannot reach. */
  .oi-history-strip {
    display: grid;
    grid-template-columns: repeat(
      auto-fit,
      minmax(
        min(
          100%,
          var(--oi-history-item-size, calc(var(--oi-geometry-space) * 28))
        ),
        1fr
      )
    );
    min-inline-size: 0;
    margin: 0;
    padding-block: var(--_oi-density-gap);
    padding-inline-start: var(--_oi-density-inset);
    gap: var(--oi-history-gap, var(--_oi-density-gap));
    overflow: visible;
    list-style-position: outside;
    list-style-type: decimal;
    border: 1px solid var(--_oi-status-color);
  }

  .oi-history-strip__item {
    min-inline-size: 0;
    padding-inline-start: var(--oi-geometry-space);
    color: var(--oi-text-body);
    overflow-wrap: anywhere;
  }

  .oi-history-strip__item::marker {
    color: var(--oi-text-muted);
    font-family: var(--oi-typography-mono);
    font-size: var(--oi-typography-size-label);
    font-variant-numeric: tabular-nums;
  }

  .oi-history-strip__time {
    display: block;
    padding-block-end: var(--oi-geometry-space);
    color: var(--oi-text-muted);
    font-family: var(--oi-typography-mono);
    font-size: var(--oi-typography-size-label);
    font-variant-numeric: tabular-nums;
    line-height: var(--oi-typography-line-compact);
  }

  .oi-history-strip__bar {
    box-sizing: border-box;
    display: block;
    inline-size: 100%;
    max-inline-size: 100%;
    block-size: calc(var(--oi-geometry-space) * 2);
    overflow: hidden;
    background-color: var(--oi-surface-inset);
    border: 1px solid var(--oi-border-strong);
    border-radius: var(--oi-geometry-radius-control);
  }

  .oi-history-strip__bar::before {
    content: "";
    display: block;
    inline-size: calc(clamp(0, var(--oi-history-intensity, 0), 1) * 100%);
    block-size: 100%;
    background-color: var(--_oi-status-color);
    background-image: repeating-linear-gradient(
      135deg,
      var(--_oi-status-color) 0 2px,
      var(--oi-text-primary) 2px 3px
    );
  }

  .oi-history-strip__value {
    display: block;
    padding-block-start: var(--oi-geometry-space);
    color: var(--oi-text-primary);
    font-family: var(--oi-typography-mono);
    font-size: var(--oi-typography-size-body);
    font-weight: 600;
    font-variant-numeric: lining-nums tabular-nums slashed-zero;
    line-height: var(--oi-typography-line-compact);
    overflow-wrap: normal;
    white-space: nowrap;
  }

  @media (forced-colors: active) {
    .oi-history-strip__bar {
      forced-color-adjust: none;
      background-color: Canvas;
      border-color: CanvasText;
    }

    .oi-history-strip__bar::before {
      background-color: Highlight;
      background-image: repeating-linear-gradient(
        135deg,
        Highlight 0 2px,
        CanvasText 2px 3px
      );
    }
  }
}

/* source: src/system/recipes/compact-monitor.css */
@layer oi.recipes {
  .oi-recipe-compact-monitor {
    container-name: oi-compact-monitor;
    container-type: inline-size;
    display: grid;
    min-inline-size: 0;
    margin: 0;
    gap: var(--oi-compact-monitor-gap, var(--_oi-density-gap));
    overflow: visible;
    overflow-wrap: anywhere;
  }

  .oi-recipe-compact-monitor__chrome {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    min-inline-size: 0;
    gap: var(--oi-compact-monitor-gap, var(--_oi-density-gap));
  }

  .oi-recipe-compact-monitor > [data-oi-slot],
  .oi-recipe-compact-monitor__chrome > [data-oi-slot] {
    min-inline-size: 0;
    margin: 0;
    overflow-wrap: anywhere;
  }

  .oi-recipe-compact-monitor__chrome > [data-oi-slot="actions"] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: start;
    gap: var(--_oi-density-gap);
  }

  .oi-recipe-compact-monitor > [data-oi-slot="focus"],
  .oi-recipe-compact-monitor > [data-oi-slot="history"] {
    overflow: auto;
    overscroll-behavior: contain;
  }

  .oi-recipe-compact-monitor > [data-oi-slot="status"] {
    min-block-size: var(--_oi-density-control-size);
    padding-block: var(--oi-geometry-space);
    padding-inline-start: var(--_oi-density-gap);
    border-inline-start-color: var(--_oi-status-color);
    border-inline-start-style: var(--_oi-truth-completeness-border-style);
    border-inline-start-width: var(--_oi-truth-completeness-border-width);
    color: var(--oi-text-body);
    font-style: var(--_oi-truth-font-style);
    text-decoration-color: var(--oi-text-muted);
    text-decoration-line: var(--_oi-truth-decoration-line);
    text-decoration-style: var(--_oi-truth-decoration-style);
    text-underline-offset: calc(var(--oi-geometry-space) / 2);
  }

  .oi-recipe-compact-monitor > [data-oi-slot="primary"] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--oi-compact-monitor-primary-gap, var(--_oi-density-gap));
  }

  .oi-recipe-compact-monitor[data-oi-activity="loading"]
    > [data-oi-slot="primary"] {
    min-block-size: var(
      --oi-compact-monitor-loading-min-block-size,
      calc(var(--oi-interaction-pointer-target-min) * 3)
    );
    align-content: center;
  }

  .oi-recipe-compact-monitor > [data-oi-slot="settings"] {
    padding-block-start: var(--_oi-density-gap);
    border-block-start: 1px solid var(--oi-border-subtle);
    color: var(--oi-text-muted);
  }

  .oi-recipe-compact-monitor__chrome[hidden],
  .oi-recipe-compact-monitor > [data-oi-slot][hidden],
  .oi-recipe-compact-monitor__chrome > [data-oi-slot][hidden],
  .oi-recipe-compact-monitor__chrome:empty,
  .oi-recipe-compact-monitor__chrome > [data-oi-slot="context"]:empty,
  .oi-recipe-compact-monitor__chrome > [data-oi-slot="actions"]:empty,
  .oi-recipe-compact-monitor > [data-oi-slot="focus"]:empty,
  .oi-recipe-compact-monitor > [data-oi-slot="details"]:empty,
  .oi-recipe-compact-monitor > [data-oi-slot="history"]:empty,
  .oi-recipe-compact-monitor > [data-oi-slot="settings"]:empty {
    display: none;
  }

  @container oi-compact-monitor (min-width: 36rem) {
    .oi-recipe-compact-monitor__chrome {
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: start;
    }

    .oi-recipe-compact-monitor__chrome > [data-oi-slot="context"] {
      grid-column: 1;
    }

    .oi-recipe-compact-monitor__chrome > [data-oi-slot="actions"] {
      grid-column: 2;
      justify-content: end;
      justify-self: end;
    }

    .oi-recipe-compact-monitor > [data-oi-slot="primary"] {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @container oi-compact-monitor (min-width: 52rem) {
    .oi-recipe-compact-monitor > [data-oi-slot="primary"] {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }

  @media (forced-colors: active) {
    .oi-recipe-compact-monitor > [data-oi-slot="status"],
    .oi-recipe-compact-monitor > [data-oi-slot="settings"] {
      border-color: CanvasText;
      color: CanvasText;
    }
  }
}

/* source: src/system/recipes/conversation-shell.css */
@layer oi.recipes {
  /* The root is always a two-column grid. A size container query can only
     restyle descendants, never the container itself, so the rail column has
     to exist at every width: fit-content() collapses it to zero until the
     wide query moves history into it. Rows are explicit so `turns` owns the
     one flexible track and a bounded root shrinks it first; the composer
     never scrolls away. Spacing is carried by the slots, not by grid gaps,
     so an omitted slot leaves no residual space: history spaces itself from
     whatever follows, and every slot after `turns` spaces itself from
     whatever precedes it. Positional selectors are not needed. */
  .oi-recipe-conversation-shell {
    container-name: oi-conversation-shell;
    container-type: inline-size;
    display: grid;
    grid-template-columns:
      fit-content(var(--oi-conversation-shell-history-size, 16rem))
      minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr) auto auto auto auto;
    gap: 0;
    min-inline-size: 0;
    min-block-size: 0;
    margin: 0;
    overflow: visible;
    overflow-wrap: anywhere;
  }

  .oi-recipe-conversation-shell > [data-oi-slot] {
    grid-column: 1 / -1;
    min-inline-size: 0;
    inline-size: 100%;
    margin: 0;
    overflow-wrap: anywhere;
  }

  .oi-recipe-conversation-shell > [data-oi-slot="history"] {
    grid-row: 1;
    margin-block-end: var(--oi-conversation-shell-gap, var(--_oi-density-gap));
  }

  /* `turns` is the only slot allowed to own scrolling, and it delegates that
     to a keyboard-reachable child (an inset with a name and tabindex) because
     slot wrappers may never be focusable. The single-track grid lets that
     child fill and scroll when the root is bounded. */
  .oi-recipe-conversation-shell > [data-oi-slot="turns"] {
    grid-row: 2;
    display: grid;
    grid-template-rows: minmax(0, 1fr);
    min-block-size: 0;
  }

  .oi-recipe-conversation-shell[data-oi-activity="loading"]
    > [data-oi-slot="turns"] {
    min-block-size: calc(var(--oi-interaction-pointer-target-min) * 4);
  }

  .oi-recipe-conversation-shell > [data-oi-slot="live"],
  .oi-recipe-conversation-shell > [data-oi-slot="status"],
  .oi-recipe-conversation-shell > [data-oi-slot="composer"],
  .oi-recipe-conversation-shell > [data-oi-slot="hints"] {
    margin-block-start: var(--oi-conversation-shell-gap, var(--_oi-density-gap));
  }

  .oi-recipe-conversation-shell > [data-oi-slot="live"] {
    grid-row: 3;
    min-block-size: var(--_oi-density-control-size);
    padding-inline-start: var(--_oi-density-gap);
    border-inline-start-color: var(--oi-status-live);
    border-inline-start-style: solid;
    border-inline-start-width: var(--oi-interaction-focus-ring-width);
    color: var(--oi-text-muted);
  }

  /* The one persistent animation in the region (§5.6), owned by the live
     activity state (§5.11). Animating outline width never moves layout and
     never touches a color literal. Reduced motion keeps the static outline,
     the live border, and the slot text, so the state stays legible. */
  .oi-recipe-conversation-shell[data-oi-activity="live"]
    > [data-oi-slot="live"] {
    outline-color: var(--oi-status-live);
    outline-style: solid;
    outline-width: var(--oi-interaction-focus-ring-width);
    outline-offset: calc(-1 * var(--oi-interaction-focus-ring-width));
    animation-name: oi-conversation-shell-pulse;
    animation-duration: calc(var(--oi-motion-duration-slow) * 3);
    animation-timing-function: var(--oi-motion-ease-standard);
    animation-iteration-count: infinite;
    animation-direction: alternate;
  }

  @keyframes oi-conversation-shell-pulse {
    from {
      outline-width: 0;
    }

    to {
      outline-width: var(--oi-interaction-focus-ring-width);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .oi-recipe-conversation-shell[data-oi-activity="live"]
      > [data-oi-slot="live"] {
      animation: none;
    }
  }

  .oi-recipe-conversation-shell > [data-oi-slot="status"] {
    grid-row: 4;
    min-block-size: var(--_oi-density-control-size);
    padding-block: var(--oi-geometry-space);
    padding-inline-start: var(--_oi-density-gap);
    border-inline-start-color: var(--_oi-status-color);
    border-inline-start-style: var(--_oi-truth-completeness-border-style);
    border-inline-start-width: var(--_oi-truth-completeness-border-width);
    color: var(--oi-text-body);
    font-style: var(--_oi-truth-font-style);
    text-decoration-color: var(--oi-text-muted);
    text-decoration-line: var(--_oi-truth-decoration-line);
    text-decoration-style: var(--_oi-truth-decoration-style);
    text-underline-offset: calc(var(--oi-geometry-space) / 2);
  }

  /* The composer is the single point of maximum persistent emphasis (study
     §6.3). The recipe only pins and separates it; the product spends the
     accent. */
  .oi-recipe-conversation-shell > [data-oi-slot="composer"] {
    grid-row: 5;
    padding-block-start: var(--_oi-density-gap);
    border-block-start: 1px solid var(--oi-border-subtle);
  }

  .oi-recipe-conversation-shell > [data-oi-slot="hints"] {
    grid-row: 6;
    color: var(--oi-text-muted);
    font-size: var(--oi-typography-size-label);
  }

  .oi-recipe-conversation-shell > [data-oi-slot][hidden],
  .oi-recipe-conversation-shell > [data-oi-slot="history"]:empty,
  .oi-recipe-conversation-shell > [data-oi-slot="live"]:empty,
  .oi-recipe-conversation-shell > [data-oi-slot="hints"]:empty {
    display: none;
  }

  /* Bounded reading measure (study §3.7) once the panel is wide enough that
     unbounded lines would hurt reading. */
  @container oi-conversation-shell (min-width: 40rem) {
    .oi-recipe-conversation-shell > [data-oi-slot="turns"],
    .oi-recipe-conversation-shell > [data-oi-slot="live"],
    .oi-recipe-conversation-shell > [data-oi-slot="status"],
    .oi-recipe-conversation-shell > [data-oi-slot="composer"],
    .oi-recipe-conversation-shell > [data-oi-slot="hints"] {
      max-inline-size: var(--oi-conversation-shell-measure, 48rem);
      justify-self: center;
    }
  }

  /* History becomes a rail beside the stream: it moves into the first column
     and spans every row; the stream and its dock take the second column. */
  @container oi-conversation-shell (min-width: 64rem) {
    .oi-recipe-conversation-shell > [data-oi-slot="history"] {
      grid-column: 1;
      grid-row: 1 / -1;
      margin-block-end: 0;
      margin-inline-end: var(--oi-conversation-shell-gap, var(--_oi-density-gap));
      padding-inline-end: var(--_oi-density-gap);
      border-inline-end: 1px solid var(--oi-border-subtle);
    }

    .oi-recipe-conversation-shell > [data-oi-slot="turns"],
    .oi-recipe-conversation-shell > [data-oi-slot="live"],
    .oi-recipe-conversation-shell > [data-oi-slot="status"],
    .oi-recipe-conversation-shell > [data-oi-slot="composer"],
    .oi-recipe-conversation-shell > [data-oi-slot="hints"] {
      grid-column: 2;
    }
  }

  @media (forced-colors: active) {
    .oi-recipe-conversation-shell > [data-oi-slot="live"],
    .oi-recipe-conversation-shell > [data-oi-slot="status"],
    .oi-recipe-conversation-shell > [data-oi-slot="composer"],
    .oi-recipe-conversation-shell > [data-oi-slot="history"] {
      border-color: CanvasText;
      color: CanvasText;
    }

    .oi-recipe-conversation-shell[data-oi-activity="live"]
      > [data-oi-slot="live"] {
      outline-color: Highlight;
    }
  }
}