[data-recipe] [hidden] { display: none !important; }

.recipe-stage {
  border: 1px solid var(--au-border-color);
  border-radius: var(--au-radius-xl);
  min-width: 0;
  overflow: hidden;
}

.recipe-toolbar {
  align-items: center;
  background: var(--au-surface-muted);
  border-bottom: 1px solid var(--au-border-color);
  display: flex;
  gap: 16px;
  justify-content: space-between;
  padding: 13px 16px;
}

.recipe-toolbar strong { font: 600 11px/1.3 var(--au-font-mono); }
.recipe-toolbar span { color: var(--au-fg-subtle); font: 10px/1.3 var(--au-font-mono); text-align: right; }
.recipe-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.8fr); min-width: 0; }
.recipe-thread { min-width: 0; padding: 20px; }
.recipe-aside { background: var(--au-surface-muted); border-left: 1px solid var(--au-border-color); display: grid; gap: 24px; min-width: 0; padding: 20px; }
.recipe-aside__label { color: var(--au-fg-subtle); font: 600 10px/1.3 var(--au-font-mono); letter-spacing: 0.06em; margin: 0 0 10px; text-transform: uppercase; }
.recipe-aside__state { align-items: center; border-bottom: 1px solid var(--au-border-color); display: flex; gap: 12px; justify-content: space-between; padding-bottom: 14px; }
.recipe-aside__state strong { font-size: 13px; }
.recipe-aside__state span { color: var(--au-warning); font: 10px/1.3 var(--au-font-mono); }
.recipe-status { background: var(--au-action-soft); border: 1px solid color-mix(in srgb, var(--au-action) 24%, var(--au-border-color)); border-radius: var(--au-radius-md); color: var(--au-fg-muted); font: 11px/1.5 var(--au-font-mono); padding: 12px; }
.recipe-status[data-recipe-tone="success"] { background: color-mix(in srgb, var(--au-success) 12%, var(--au-bg)); border-color: color-mix(in srgb, var(--au-success) 35%, var(--au-border-color)); }
.recipe-status[data-recipe-tone="error"] { background: color-mix(in srgb, var(--au-danger) 10%, var(--au-bg)); border-color: color-mix(in srgb, var(--au-danger) 35%, var(--au-border-color)); }
.recipe-status[data-recipe-tone="cancelled"] { background: var(--au-surface); border-color: var(--au-border-emphasis); }
.recipe-controls { display: flex; flex-wrap: wrap; gap: 8px; }
.recipe-control { background: var(--au-surface); border: 1px solid var(--au-border-color); border-radius: var(--au-radius-md); color: var(--au-fg-muted); cursor: pointer; font: 600 11px/1.2 var(--au-font-mono); min-height: 38px; padding: 9px 10px; }
.recipe-control:hover, .recipe-control[aria-pressed="true"] { border-color: var(--au-action); color: var(--au-action); }
.recipe-control:focus-visible { outline: 2px solid var(--au-focus); outline-offset: 3px; }
.recipe-immutable { border-top: 1px solid var(--au-border-color); color: var(--au-fg-muted); font-size: 12px; line-height: 1.5; padding-top: 16px; }
.recipe-immutable code { color: var(--au-action); font: 11px/1.4 var(--au-font-mono); overflow-wrap: anywhere; }
.recipe-decision-form { display: flex; flex-wrap: wrap; gap: 8px; }
.recipe-decision-form .au-btn { flex: 1 1 120px; }
.recipe-state-lab { border-top: 1px solid var(--au-border-color); padding-top: 30px; }
.recipe-state-lab__intro { color: var(--au-fg-muted); margin: 0 0 20px; max-width: 720px; }
.recipe-state-grid { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.recipe-state-sample { background: var(--au-surface-muted); border: 1px solid var(--au-border-color); border-radius: var(--au-radius-lg); min-width: 0; overflow: hidden; padding: 16px; }
.recipe-state-sample__label { align-items: center; color: var(--au-fg-subtle); display: flex; font: 600 10px/1.3 var(--au-font-mono); justify-content: space-between; letter-spacing: 0.06em; margin: 0 0 12px; text-transform: uppercase; }
.recipe-state-sample__label span { color: var(--au-fg-muted); font-weight: 400; letter-spacing: 0; text-transform: none; }
.recipe-state-sample .au-chat-message { padding: 0; }
.recipe-state-sample .au-tool-call { min-width: 0; }
.recipe-state-sample .au-approval-gate, .recipe-state-sample .au-ask-user-question { min-width: 0; }
.recipe-state-sample .au-ask-user-question { padding: 0; border: 0; background: transparent; }
.recipe-state-sample .au-ask-user-question__title { font-size: 14px; }
.recipe-note { color: var(--au-fg-subtle); font: 11px/1.5 var(--au-font-mono); margin: 14px 0 0; }
.recipe-grid .au-chat-thread { min-height: 0; }
.recipe-grid .au-chat-thread__messages { overflow: visible; }
.recipe-grid .au-chat-input__textarea { min-height: 52px; }
.recipe-grid .au-tool-call__args, .recipe-grid .au-tool-call__output { overflow-wrap: anywhere; }
.recipe-grid .au-approval-gate, .recipe-grid .au-ask-user-question { min-width: 0; }
.recipe-field-label { color: var(--au-fg-subtle); display: block; font: 600 10px/1.3 var(--au-font-mono); letter-spacing: 0.06em; margin: 0 0 4px; text-transform: uppercase; }
.recipe-action-line { color: var(--au-fg-muted); font: 11px/1.55 var(--au-font-mono); margin: 0; overflow-wrap: anywhere; }
.recipe-action-line strong { color: var(--au-fg); font-weight: 600; }
.recipe-section-heading { align-items: baseline; display: flex; gap: 14px; justify-content: space-between; margin-bottom: 16px; }
.recipe-section-heading h2 { margin-bottom: 0; }
.recipe-section-heading span { color: var(--au-fg-subtle); font: 10px/1.3 var(--au-font-mono); }

@media (max-width: 900px) {
  .recipe-grid { grid-template-columns: 1fr; }
  .recipe-aside { border-left: 0; border-top: 1px solid var(--au-border-color); }
}

@media (max-width: 640px) {
  .recipe-toolbar { align-items: flex-start; flex-direction: column; gap: 5px; }
  .recipe-toolbar span { text-align: left; }
  .recipe-thread, .recipe-aside { padding: 16px; }
  .recipe-state-grid { grid-template-columns: 1fr; }
  .recipe-section-heading { align-items: flex-start; flex-direction: column; gap: 5px; }
}

@media (prefers-reduced-motion: reduce) {
  .recipe-control { transition-duration: 0.01ms; }
}