@layer cinder.tokens, cinder.foundation, cinder.components, cinder.utilities;
/* Compound composition aggregation: ApprovalCard renders these primitives
 * internally, so `cinder/approval-card/styles` must include their styling when
 * consumers import the component-specific style sidecar. Sibling paths mirror
 * between `src/` and generated `dist/`. */
@import '/assets/3532844afb5cdb4f97e46b81fa68378860412319c16ff5d89b7cc4949549fec7/components/alert/alert.css';
@import '/assets/3532844afb5cdb4f97e46b81fa68378860412319c16ff5d89b7cc4949549fec7/components/badge/badge.css';
@import '/assets/3532844afb5cdb4f97e46b81fa68378860412319c16ff5d89b7cc4949549fec7/components/button/button.css';
@import '/assets/3532844afb5cdb4f97e46b81fa68378860412319c16ff5d89b7cc4949549fec7/components/card/card.css';
@import '/assets/3532844afb5cdb4f97e46b81fa68378860412319c16ff5d89b7cc4949549fec7/components/checkbox/checkbox.css';
@import '/assets/3532844afb5cdb4f97e46b81fa68378860412319c16ff5d89b7cc4949549fec7/components/code-block/code-block.css';
@import '/assets/3532844afb5cdb4f97e46b81fa68378860412319c16ff5d89b7cc4949549fec7/components/collapsible/collapsible.css';
@import '/assets/3532844afb5cdb4f97e46b81fa68378860412319c16ff5d89b7cc4949549fec7/components/copy-button/copy-button.css';
@import '/assets/3532844afb5cdb4f97e46b81fa68378860412319c16ff5d89b7cc4949549fec7/components/json-editor/json-editor.css';
@import '/assets/3532844afb5cdb4f97e46b81fa68378860412319c16ff5d89b7cc4949549fec7/components/json-viewer/json-viewer.css';
@import '/assets/3532844afb5cdb4f97e46b81fa68378860412319c16ff5d89b7cc4949549fec7/components/link/link.css';
@import '/assets/3532844afb5cdb4f97e46b81fa68378860412319c16ff5d89b7cc4949549fec7/components/payload-inspector/payload-inspector.css';
@import '/assets/3532844afb5cdb4f97e46b81fa68378860412319c16ff5d89b7cc4949549fec7/components/status-dot/status-dot.css';
@import '/assets/3532844afb5cdb4f97e46b81fa68378860412319c16ff5d89b7cc4949549fec7/components/textarea/textarea.css';
@import '/assets/3532844afb5cdb4f97e46b81fa68378860412319c16ff5d89b7cc4949549fec7/components/tooltip/tooltip.css';

@layer cinder.components {
  .cinder-approval-card {
    display: block;
    /* Narrow rules ask about the card's own width, so a phone and a narrow pane read the same. */
    container-type: inline-size;
  }

  .cinder-approval-card__surface {
    overflow: hidden;
  }

  .cinder-approval-card__surface > .cinder-card__header {
    padding: 0;
  }

  /* ----------------------------------------
   * Header: risk glyph, then source, question, tool and risk word
   * ---------------------------------------- */

  .cinder-approval-card__header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--cinder-space-2) var(--cinder-space-3);
    padding: var(--cinder-space-4);
    /* Neutral: no warning fill, even for a dangerous tool. The glyph carries the alert. */
    background: var(--cinder-surface-raised);
  }

  .cinder-approval-card__title-group {
    display: flex;
    flex-direction: column;
    flex: 1 1 14rem;
    gap: var(--cinder-space-1);
    min-inline-size: 10rem;
  }

  .cinder-approval-card__eyebrow,
  .cinder-approval-card__tool-line,
  .cinder-approval-card__risk-line,
  .cinder-approval-card__consequence {
    margin: 0;
    color: var(--cinder-text-subtle);
    font-size: var(--cinder-text-sm);
    line-height: var(--cinder-leading-snug);
  }

  .cinder-approval-card__title {
    margin: 0;
    color: var(--cinder-text-default);
    font-size: var(--cinder-text-base);
    font-weight: var(--cinder-font-semibold);
    line-height: var(--cinder-leading-tight);
    overflow-wrap: anywhere;
  }

  .cinder-approval-card__title-tool,
  .cinder-approval-card__tool-identifier {
    font-family: var(--cinder-font-mono);
  }

  .cinder-approval-card__tool-identifier {
    font-size: var(--cinder-text-xs);
    white-space: nowrap;
  }

  .cinder-approval-card__tool-label {
    color: var(--cinder-text-default);
    font-weight: var(--cinder-font-semibold);
  }

  /* Risk words are muted regular text everywhere, "Dangerous" included. */
  .cinder-approval-card__risk-word {
    font-weight: var(--cinder-font-normal);
  }

  /* "Can't be undone" never breaks across lines. */
  .cinder-approval-card__undone {
    white-space: nowrap;
  }

  .cinder-approval-card__badges {
    display: flex;
    flex: 0 1 auto;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--cinder-space-2);
  }

  /* StatusDot and Badge each define their own type scale per size step, and
     those scales don't line up 1:1 (StatusDot's "sm" label text is larger
     than Badge's "sm" text). Force every status/expiry indicator in this
     row to the same font-size so the row reads as one cohesive unit. */
  .cinder-approval-card__badges .cinder-status-dot[data-cinder-size='sm'],
  .cinder-approval-card__badges .cinder-badge[data-cinder-size='sm'] {
    font-size: var(--cinder-text-xs);
  }

  /* One glyph for every risk: the shield carries the alert in amber while the approval waits
   * on someone, and goes quiet once it is decided or cannot be answered. */
  .cinder-approval-card__risk-icon {
    display: inline-flex;
    flex: none;
    align-items: center;
    margin-block-start: 2px;
    border-radius: var(--cinder-radius-sm);
    color: var(--cinder-status-warning-text);
    font: inherit;
  }

  .cinder-approval-card__risk-icon[data-cinder-risk='low'],
  .cinder-approval-card:not([data-cinder-state='pending']) .cinder-approval-card__risk-icon {
    color: var(--cinder-text-subtle);
  }

  .cinder-approval-card__risk-icon:focus-visible {
    /* cinder-focus-ring-owner: parent — the trigger self-owns its box-shadow
       ring; the outline is intentionally suppressed. */
    outline: none;
    box-shadow:
      0 0 0 var(--cinder-ring-offset, 1px) var(--cinder-ring-offset-color),
      0 0 0 calc(var(--cinder-ring-offset, 1px) + var(--cinder-ring-width)) var(--cinder-ring-color);
  }

  /* A comma that ends the words before it, so it sits against them; the space after it comes from
   * the markup. */
  .cinder-approval-card__separator {
    margin-inline: 0;
  }

  /* ----------------------------------------
   * Body sections
   * ---------------------------------------- */

  .cinder-approval-card__body {
    display: flex;
    flex-direction: column;
    gap: var(--cinder-space-3);
    padding: var(--cinder-space-4);
  }

  .cinder-approval-card__section {
    display: flex;
    flex-direction: column;
    gap: var(--cinder-space-2);
  }

  .cinder-approval-card__section-heading {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--cinder-space-2);
  }

  .cinder-approval-card__section-title {
    margin: 0;
    color: var(--cinder-text-default);
    font-size: var(--cinder-text-sm);
    font-weight: var(--cinder-font-semibold);
  }

  .cinder-approval-card__muted {
    margin: 0;
    color: var(--cinder-text-muted);
    font-size: var(--cinder-text-sm);
  }

  /* ----------------------------------------
   * Files touched
   * ---------------------------------------- */

  .cinder-approval-card__file-list {
    display: flex;
    flex-direction: column;
    max-block-size: 14rem;
    overflow-y: auto;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .cinder-approval-card__file {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--cinder-space-2);
  }

  .cinder-approval-card__file-path {
    overflow-wrap: anywhere;
    color: var(--cinder-text-default);
    font-family: var(--cinder-font-mono);
    font-size: var(--cinder-text-xs);
  }

  .cinder-approval-card__file .cinder-approval-card__file-copy {
    flex: 0 0 auto;
    padding: var(--cinder-space-1);
    border: none;
  }

  /* ----------------------------------------
   * Environment names
   * ---------------------------------------- */

  .cinder-approval-card__environment-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--cinder-space-2);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  /* ----------------------------------------
   * Resolution controls and actions
   * ---------------------------------------- */

  .cinder-approval-card__actions {
    display: flex;
    flex-direction: column;
    gap: var(--cinder-space-3);
  }

  .cinder-approval-card__resolution-controls {
    display: flex;
    flex-direction: column;
    gap: var(--cinder-space-2);
  }

  /* A line of context above the question, such as "Test chat, this runs for real". */
  .cinder-approval-card__context {
    color: var(--cinder-text-subtle);
    font-size: var(--cinder-text-sm);
    line-height: var(--cinder-leading-snug);
  }

  /* Why the last answer did not go through: Alert's tinted, bordered danger message, drawn as one
   * compact line of a glyph, the bold summary and the reason. */
  .cinder-approval-card__failure.cinder-alert {
    align-items: flex-start;
    gap: var(--cinder-space-2);
    padding: var(--cinder-space-2-5) var(--cinder-space-3);
    border-radius: var(--cinder-radius-md);
    font-size: var(--cinder-text-sm);
    line-height: var(--cinder-leading-snug);
  }

  .cinder-approval-card__failure .cinder-alert__icon {
    inline-size: 1rem;
    block-size: 1rem;
  }

  .cinder-approval-card__failure-summary {
    font-weight: var(--cinder-font-semibold);
  }

  /* What the approval led to, once it is decided. */
  .cinder-approval-card__result {
    margin: 0;
    color: var(--cinder-text-default);
    font-size: var(--cinder-text-sm);
    line-height: var(--cinder-leading-snug);
  }

  .cinder-approval-card__result-label {
    font-weight: var(--cinder-font-semibold);
  }

  /* What happens once the approver decides, under the buttons. */
  .cinder-approval-card__footnote {
    margin: 0;
    color: var(--cinder-text-subtle);
    font-size: var(--cinder-text-sm);
    line-height: var(--cinder-leading-snug);
    text-align: end;
  }

  /* The "Allow <tool> for ..." checkbox sits on its own line before Deny and Approve. */
  .cinder-approval-card__remember {
    display: flex;
    font-size: var(--cinder-text-sm);
  }

  /* A long label ("Allow Issue refund for the rest of this chat") wraps beside its box, not under it. */
  .cinder-approval-card__remember .cinder-checkbox-field {
    flex-wrap: nowrap;
    align-items: flex-start;
  }

  .cinder-approval-card__remember .cinder-checkbox-field > .cinder-form-field__label {
    min-inline-size: 0;
  }

  /* Why Deny and Approve are off, or why an approval cannot be answered now. */
  .cinder-approval-card__reason {
    margin: 0;
    color: var(--cinder-text-subtle);
    font-size: var(--cinder-text-sm);
    line-height: var(--cinder-leading-snug);
  }

  .cinder-approval-card__action-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--cinder-space-3);
  }

  .cinder-approval-card__action-buttons {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--cinder-space-2);
    margin-inline-start: auto;
  }

  .cinder-approval-card__editor {
    display: flex;
    flex-direction: column;
    gap: var(--cinder-space-2);
    border: 1px solid var(--cinder-border-muted);
    border-radius: var(--cinder-radius-md);
    padding: var(--cinder-space-3);
    background: var(--cinder-surface-inset);
  }

  .cinder-approval-card__editor-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--cinder-space-2);
  }

  /* ----------------------------------------
   * Read-only summary for terminal states
   * ---------------------------------------- */

  .cinder-approval-card__readonly-summary {
    margin: 0;
    border: 1px solid var(--cinder-border-muted);
    border-radius: var(--cinder-radius-md);
    padding: var(--cinder-space-3);
    background: var(--cinder-surface-inset);
    color: var(--cinder-text-muted);
    font-size: var(--cinder-text-sm);
  }

  /* In the row the notice lines up with the question, past the glyph. */
  .cinder-approval-card--row > .cinder-approval-card__readonly-summary {
    margin-inline-start: calc(16px + var(--cinder-space-2));
  }

  .cinder-approval-card__readonly-summary[data-cinder-state='approved'],
  .cinder-approval-card__readonly-summary[data-cinder-state='approved_with_edits'] {
    border-color: var(--cinder-status-success-border);
    background: var(--cinder-status-success-background);
    color: var(--cinder-status-success-text);
  }

  /* ----------------------------------------
   * Details disclosure (sandbox, environment, request metadata)
   * ---------------------------------------- */

  .cinder-approval-card__details {
    border: 1px solid var(--cinder-border);
    border-radius: var(--cinder-radius-md);
    background: var(--cinder-surface);
    overflow: hidden;
  }

  .cinder-approval-card__details .cinder-collapsible__trigger {
    border-radius: 0;
    padding: var(--cinder-space-2) var(--cinder-space-3);
    background: var(--cinder-surface-raised);
    font-size: var(--cinder-text-sm);
    color: var(--cinder-text-muted);
  }

  .cinder-approval-card__details[data-cinder-expanded] .cinder-collapsible__trigger {
    border-block-end: 1px solid var(--cinder-border-muted);
  }

  .cinder-approval-card__details .cinder-collapsible__panel-inner {
    padding: var(--cinder-space-3);
    font-size: var(--cinder-text-sm);
  }

  .cinder-approval-card__details-content {
    display: flex;
    flex-direction: column;
    gap: var(--cinder-space-3);
  }

  .cinder-approval-card__details-group {
    display: flex;
    flex-direction: column;
    gap: var(--cinder-space-1);
  }

  .cinder-approval-card__details-label {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: var(--cinder-space-2);
    margin: 0;
    color: var(--cinder-text-default);
    font-size: var(--cinder-text-xs);
    font-weight: var(--cinder-font-semibold);
  }

  .cinder-approval-card__details-label .cinder-approval-card__muted {
    font-size: var(--cinder-text-xs);
    font-weight: var(--cinder-font-normal);
    text-transform: none;
    letter-spacing: normal;
  }

  .cinder-approval-card__metadata {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: var(--cinder-space-3);
    margin: 0;
  }

  .cinder-approval-card__metadata--compact {
    gap: var(--cinder-space-2);
  }

  .cinder-approval-card__metadata-item {
    min-inline-size: 0;
  }

  .cinder-approval-card__metadata-item dt {
    color: var(--cinder-text-muted);
    font-size: var(--cinder-text-xs);
    font-weight: var(--cinder-font-medium);
  }

  .cinder-approval-card__metadata-item dd {
    display: flex;
    flex-direction: column;
    gap: var(--cinder-space-1);
    margin: 0;
    overflow-wrap: anywhere;
    color: var(--cinder-text-default);
    font-family: var(--cinder-font-mono);
    font-size: var(--cinder-text-xs);
  }

  .cinder-approval-card__metadata-help {
    color: var(--cinder-text-muted);
    font-family: var(--cinder-font-sans);
    font-size: var(--cinder-text-xs);
  }

  /* ----------------------------------------
   * Row layout: the shared approval row on a neutral raised surface
   * ---------------------------------------- */

  .cinder-approval-card--row {
    display: flex;
    flex-direction: column;
    gap: var(--cinder-space-2);
    box-sizing: border-box;
    border: 1px solid var(--cinder-border);
    border-radius: var(--cinder-radius-lg);
    padding: var(--cinder-space-3) 14px;
    background: var(--cinder-surface-raised);
    font-size: var(--cinder-text-sm);
  }

  .cinder-approval-card__row {
    display: flex;
    align-items: flex-start;
    gap: var(--cinder-space-2);
  }

  .cinder-approval-card__row-main {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-inline-size: 0;
  }

  /* The question may wrap: a long title never truncates. */
  .cinder-approval-card__row-question {
    margin: 0;
    overflow-wrap: anywhere;
    color: var(--cinder-text-default);
    font-size: var(--cinder-text-base);
    font-weight: var(--cinder-font-semibold);
    line-height: var(--cinder-leading-tight);
  }

  /* Decided on another page: a glyph in the decision's tone stands where the risk shield stood,
     and the question is the size of the line under it. */
  .cinder-approval-card__decided-glyph {
    display: inline-flex;
    flex: none;
    align-items: center;
    margin-block-start: 2px;
    color: var(--cinder-text-subtle);
  }

  .cinder-approval-card__decided-glyph[data-cinder-tone='success'] {
    color: var(--cinder-status-success-text);
  }

  .cinder-approval-card__row[data-cinder-collapsed] .cinder-approval-card__row-question {
    font-size: var(--cinder-text-sm);
    line-height: var(--cinder-leading-snug);
  }

  .cinder-approval-card__line {
    margin: 0;
    color: var(--cinder-text-subtle);
    font-size: var(--cinder-text-sm);
    line-height: var(--cinder-leading-snug);
  }

  /* The line may wrap between the identifier, the risk word and "Can't be undone", but never inside
   * one of them: a piece stays whole with the comma that follows it, so a comma never starts a
   * line or stands alone, and a phone never cuts "Can't be undone" off at the card's edge. */
  .cinder-approval-card__keep {
    white-space: nowrap;
  }

  .cinder-approval-card__line time,
  .cinder-approval-card__eyebrow time,
  .cinder-approval-card__detail-ask time {
    white-space: nowrap;
  }

  /* The state word at the right of the title: neutral, never a colour. */
  .cinder-approval-card__state-word {
    flex: none;
    color: var(--cinder-text-subtle);
    font-size: var(--cinder-text-sm);
    white-space: nowrap;
  }

  /* Everything below the title lines up with the question, past the glyph. */
  .cinder-approval-card__row-body,
  .cinder-approval-card--row > .cinder-approval-card__result {
    display: flex;
    flex-direction: column;
    gap: var(--cinder-space-2);
    margin: 0;
    padding-inline-start: calc(16px + var(--cinder-space-2));
  }

  .cinder-approval-card--row > .cinder-approval-card__outcome {
    padding-inline-start: calc(16px + var(--cinder-space-2));
  }

  /* Running text, so a long chat title wraps and a comma stays with what it follows. */
  .cinder-approval-card__outcome {
    margin: 0;
    color: var(--cinder-text-subtle);
    font-size: var(--cinder-text-sm);
    line-height: var(--cinder-leading-snug);
  }

  /* A decision reads as neutral text with a quiet dot, whatever was decided. */
  .cinder-approval-card__outcome-word {
    display: inline-flex;
    align-items: center;
    gap: var(--cinder-space-2);
    font-weight: var(--cinder-font-semibold);
  }

  .cinder-approval-card__outcome-dot {
    flex: none;
    inline-size: 8px;
    block-size: 8px;
    border-radius: var(--cinder-radius-full);
    background: var(--cinder-text-subtle);
  }

  /* An approval is green; a denial, an expiry and every other decision stay neutral. */
  .cinder-approval-card__outcome[data-cinder-tone='success'] .cinder-approval-card__outcome-dot {
    background: var(--cinder-status-success-solid);
  }

  /* Where the question was asked, after the outcome and its time. */
  .cinder-approval-card__outcome-trailing {
    overflow-wrap: anywhere;
  }

  /* The note the approver left: "Your note", the note, then where it went. */
  .cinder-approval-card__decision-note {
    margin: 0;
    color: var(--cinder-text-muted);
    font-size: var(--cinder-text-sm);
    line-height: var(--cinder-leading-snug);
    overflow-wrap: anywhere;
  }

  .cinder-approval-card__decision-note-label {
    margin-inline-end: var(--cinder-space-1);
    color: var(--cinder-text-default);
    font-weight: var(--cinder-font-semibold);
  }

  .cinder-approval-card__decision-note-caption {
    margin-inline-start: var(--cinder-space-1);
    color: var(--cinder-text-subtle);
  }

  /* Under a decided row, the note and the input summary line up with the question. */
  .cinder-approval-card--row > .cinder-approval-card__decision-note,
  .cinder-approval-card--row > .cinder-approval-card__decided-input {
    padding-inline-start: calc(16px + var(--cinder-space-2));
  }

  .cinder-approval-card__decided-input .cinder-approval-card__input-word {
    margin-inline-end: var(--cinder-space-2);
  }

  .cinder-approval-card__input {
    display: flex;
    flex-direction: column;
    gap: var(--cinder-space-2);
  }

  .cinder-approval-card__input-toggle {
    appearance: none;
    display: flex;
    align-items: center;
    gap: var(--cinder-space-2);
    min-inline-size: 0;
    padding: 0;
    border: 0;
    border-radius: var(--cinder-radius-sm);
    background: none;
    color: var(--cinder-text-subtle);
    font: inherit;
    text-align: start;
    cursor: pointer;
  }

  .cinder-approval-card__input-toggle:focus-visible {
    outline: var(--cinder-ring-width) solid transparent;
    box-shadow: var(--_cinder-focus-ring-shadow);
  }

  .cinder-approval-card__input-toggle svg {
    flex: none;
    transition: transform var(--cinder-duration-fast) var(--cinder-ease-standard);
  }

  .cinder-approval-card__input-toggle svg[data-cinder-open] {
    transform: rotate(90deg);
  }

  .cinder-approval-card__input-word {
    flex: none;
    color: var(--cinder-text-muted);
    font-weight: var(--cinder-font-semibold);
  }

  /* The summary is one line: a few short pairs, cut with an ellipsis only if it must. */
  .cinder-approval-card__input-pairs {
    min-inline-size: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .cinder-approval-card__input-summary {
    margin: 0;
    color: var(--cinder-text-subtle);
  }

  .cinder-approval-card__pair-value {
    color: var(--cinder-text-muted);
  }

  .cinder-approval-card__pair-value[data-cinder-muted] {
    color: var(--cinder-text-subtle);
    font-style: italic;
  }

  .cinder-approval-card__row-input {
    display: flex;
    flex-direction: column;
    gap: var(--cinder-space-2);
  }

  .cinder-approval-card__row-input[hidden] {
    display: none;
  }

  .cinder-approval-card__note {
    display: flex;
    flex-direction: column;
  }

  .cinder-approval-card__row-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--cinder-space-2);
  }

  .cinder-approval-card__row-spacer {
    flex: 1 1 0;
  }

  /* "Add a note" is a link in the accent colour, not a button. */
  .cinder-approval-card__note-toggle {
    appearance: none;
    padding: 0;
    border: 0;
    border-radius: var(--cinder-radius-sm);
    background: none;
    color: var(--cinder-accent-text);
    font: inherit;
    cursor: pointer;
  }

  @media (hover: hover) {
    .cinder-approval-card__note-toggle:hover {
      color: var(--cinder-accent-text-hover);
      text-decoration: underline;
      text-underline-offset: 0.15em;
    }
  }

  .cinder-approval-card__note-toggle:focus-visible {
    outline: var(--cinder-ring-width) solid transparent;
    box-shadow: var(--_cinder-focus-ring-shadow);
  }

  /* ----------------------------------------
   * Decision layout: the explicit decision and its retained receipt
   * ---------------------------------------- */

  .cinder-approval-card--decision {
    display: flex;
    flex-direction: column;
    gap: var(--cinder-space-2);
    box-sizing: border-box;
    border: 1px solid var(--cinder-border);
    border-radius: var(--cinder-radius-lg);
    padding: var(--cinder-space-3) 14px;
    background: var(--cinder-surface-raised);
    font-size: var(--cinder-text-sm);
  }

  /* No glyph gutter: the action is the first thing on the row, and a badge beside it says when it
     cannot be undone. The title may wrap, so a long action never truncates. */
  .cinder-approval-card__decision-head,
  .cinder-approval-card__receipt-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--cinder-space-2);
  }

  .cinder-approval-card__decision-title {
    flex: 1 1 12rem;
    min-inline-size: 0;
    margin: 0;
    overflow-wrap: anywhere;
    color: var(--cinder-text-default);
    font-size: var(--cinder-text-base);
    font-weight: var(--cinder-font-semibold);
    line-height: var(--cinder-leading-tight);
    text-align: start;
  }

  .cinder-approval-card__receipt-head .cinder-approval-card__decision-title {
    flex: 1 1 8rem;
    font-size: var(--cinder-text-sm);
  }

  .cinder-approval-card__receipt-head .cinder-badge,
  .cinder-approval-card__irreversible {
    flex: none;
    white-space: nowrap;
  }

  .cinder-approval-card__receipt-head .cinder-badge svg {
    flex: none;
  }

  .cinder-approval-card__pause {
    margin: 0;
    color: var(--cinder-text-muted);
    line-height: var(--cinder-leading-snug);
    text-align: start;
  }

  /* Tool, Target, Amount and Command read as a definition list: the word, then its value. */
  .cinder-approval-card__facts {
    display: flex;
    flex-direction: column;
    gap: var(--cinder-space-1);
    margin: 0;
  }

  .cinder-approval-card__fact {
    display: grid;
    grid-template-columns: minmax(4.5rem, max-content) minmax(0, 1fr);
    align-items: baseline;
    column-gap: var(--cinder-space-3);
  }

  .cinder-approval-card__fact > dt {
    color: var(--cinder-text-subtle);
  }

  .cinder-approval-card__fact > dd {
    margin: 0;
    min-inline-size: 0;
    overflow-wrap: anywhere;
    color: var(--cinder-text-default);
    text-align: start;
  }

  .cinder-approval-card__fact > dd[data-cinder-monospace] {
    font-family: var(--cinder-font-mono);
  }

  /* The command is always open, so it is a code block that wraps: none of it hides behind a
     sideways scroll. */
  .cinder-approval-card__command {
    min-inline-size: 0;
    margin: 0;
    text-align: start;
  }

  .cinder-approval-card__countdown,
  .cinder-approval-card__arm-hint {
    margin: 0;
    color: var(--cinder-text-subtle);
    font-size: var(--cinder-text-xs);
    text-align: start;
  }

  .cinder-approval-card__why-body {
    margin: 0;
    padding-block-start: var(--cinder-space-1);
    color: var(--cinder-text-muted);
    line-height: var(--cinder-leading-snug);
    text-align: start;
  }

  .cinder-approval-card__why-body[hidden] {
    display: none;
  }

  /* The retained receipt: what was approved, who decided where and when, and the details a
     disclosure away. */
  .cinder-approval-card__receipt {
    display: flex;
    flex-direction: column;
    gap: var(--cinder-space-1);
  }

  .cinder-approval-card--decision:has(> .cinder-approval-card__receipt) {
    gap: 0;
    padding-block: var(--cinder-space-2);
  }

  .cinder-approval-card__receipt-by,
  .cinder-approval-card__receipt-quote {
    margin: 0;
    color: var(--cinder-text-subtle);
    line-height: var(--cinder-leading-snug);
    text-align: start;
  }

  .cinder-approval-card__receipt-quote-text {
    color: var(--cinder-text-muted);
    overflow-wrap: anywhere;
  }

  .cinder-approval-card__receipt-details {
    display: flex;
    flex-direction: column;
    gap: var(--cinder-space-2);
    padding-block-start: var(--cinder-space-2);
  }

  .cinder-approval-card__receipt-details[hidden] {
    display: none;
  }

  /* ----------------------------------------
   * Detail layout: an approval's own page
   * ---------------------------------------- */

  .cinder-approval-card--detail {
    display: flex;
    flex-direction: column;
    gap: var(--cinder-space-3);
    font-size: var(--cinder-text-sm);
  }

  .cinder-approval-card__detail-header {
    display: flex;
    flex-direction: column;
    gap: var(--cinder-space-1);
  }

  /* Who asked is running text, so a long chat title wraps and the comma stays with what it follows. */
  .cinder-approval-card__detail-ask,
  .cinder-approval-card__detail-tool {
    margin: 0;
    color: var(--cinder-text-subtle);
    font-size: var(--cinder-text-sm);
    line-height: var(--cinder-leading-snug);
    overflow-wrap: anywhere;
  }

  .cinder-approval-card__detail-eyebrow {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0 var(--cinder-space-1);
    margin: 0;
    color: var(--cinder-text-subtle);
    font-size: var(--cinder-text-sm);
    line-height: var(--cinder-leading-snug);
  }

  .cinder-approval-card__detail-eyebrow {
    gap: var(--cinder-space-2);
    color: var(--cinder-text-muted);
    font-weight: var(--cinder-font-semibold);
  }

  .cinder-approval-card__detail-eyebrow .cinder-approval-card__risk-icon {
    margin-block-start: 0;
  }

  .cinder-approval-card__detail-body {
    display: flex;
    flex-direction: column;
    gap: var(--cinder-space-3);
  }

  /* The risk glyph line under Input: what cannot be undone and what approving does. */
  .cinder-approval-card__detail-risk {
    display: flex;
    align-items: flex-start;
    gap: var(--cinder-space-2);
    margin: 0;
    color: var(--cinder-text-default);
    line-height: var(--cinder-leading-snug);
  }

  .cinder-approval-card__detail-risk > svg {
    flex: none;
    margin-block-start: 2px;
    color: var(--cinder-status-warning-text);
  }

  .cinder-approval-card--detail:not([data-cinder-state='pending'])
    .cinder-approval-card__detail-risk
    > svg,
  .cinder-approval-card--detail[data-cinder-risk='low'] .cinder-approval-card__detail-risk > svg {
    color: var(--cinder-text-subtle);
  }

  .cinder-approval-card--detail .cinder-approval-card__consequence {
    color: inherit;
    font-size: inherit;
  }

  /* "Can't be undone." leads the consequence line in semibold, as the board sets it. */
  .cinder-approval-card__detail-risk .cinder-approval-card__undone {
    color: var(--cinder-text-default);
    font-weight: var(--cinder-font-semibold);
  }

  /* What the source said when it asked: a collapsed line that opens in place to the whole text. */
  .cinder-approval-card__said {
    display: flex;
  }

  .cinder-approval-card__said-toggle {
    appearance: none;
    display: flex;
    align-items: baseline;
    gap: var(--cinder-space-2);
    inline-size: 100%;
    min-inline-size: 0;
    padding: 0;
    border: 0;
    border-radius: var(--cinder-radius-sm);
    background: none;
    color: var(--cinder-text-muted);
    font: inherit;
    text-align: start;
    cursor: pointer;
  }

  .cinder-approval-card__said-toggle:focus-visible {
    outline: var(--cinder-ring-width) solid transparent;
    box-shadow: var(--_cinder-focus-ring-shadow);
  }

  .cinder-approval-card__said-toggle svg {
    flex: none;
    align-self: center;
    transition: transform var(--cinder-duration-fast) var(--cinder-ease-standard);
  }

  .cinder-approval-card__said-toggle svg[data-cinder-open] {
    transform: rotate(90deg);
  }

  .cinder-approval-card__said-label {
    flex: none;
    color: var(--cinder-text-default);
    font-weight: var(--cinder-font-semibold);
  }

  /* Closed it is one line cut with an ellipsis; open it wraps in full. */
  .cinder-approval-card__said-text {
    min-inline-size: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .cinder-approval-card__said-text[data-cinder-open] {
    overflow: visible;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  /* ----------------------------------------
   * Answered somewhere else: the card gives way to what happened and who did it
   * ---------------------------------------- */

  .cinder-approval-card--elsewhere {
    display: flex;
    align-items: flex-start;
    gap: var(--cinder-space-3);
    box-sizing: border-box;
    border: 1px solid var(--cinder-border);
    border-radius: var(--cinder-radius-lg);
    padding: var(--cinder-space-3) var(--cinder-space-4);
    background: var(--cinder-surface);
    color: var(--cinder-text-default);
    font-size: var(--cinder-text-sm);
  }

  .cinder-approval-card--elsewhere > svg {
    flex: none;
    margin-block-start: 2px;
    color: var(--cinder-text-muted);
  }

  .cinder-approval-card__elsewhere-text {
    display: flex;
    flex-direction: column;
    gap: var(--cinder-space-0-5);
    min-inline-size: 0;
  }

  .cinder-approval-card__elsewhere-title {
    margin: 0;
    font-size: var(--cinder-text-sm);
    font-weight: var(--cinder-font-semibold);
    line-height: var(--cinder-leading-snug);
  }

  .cinder-approval-card__elsewhere-body {
    margin: 0;
    color: var(--cinder-text-muted);
    line-height: var(--cinder-leading-snug);
    overflow-wrap: anywhere;
  }

  /* ----------------------------------------
   * Narrow cards (a phone, a side panel) and touch
   * ---------------------------------------- */

  /* Where the whole line cannot fit, who asked and when sit on a line of their own, so the
   * line never breaks in the middle of "issue-refund, Dangerous, Can't be undone". */
  @container (inline-size < 40rem) {
    .cinder-approval-card__line-source {
      display: block;
    }

    .cinder-approval-card__line-tool > .cinder-approval-card__source-separator {
      display: none;
    }
  }

  /* Where even "who asked, when" cannot fit on a line, the time takes a line of its own and the
   * comma that led to it goes, instead of stranding at the end of the line above. The row's line
   * is short and sits beside the glyph; the card's eyebrow and the detail's ask line are longer. */
  @container (inline-size < 17rem) {
    .cinder-approval-card__line .cinder-approval-card__time-separator {
      display: none;
    }

    .cinder-approval-card__line time {
      display: block;
    }
  }

  @container (inline-size < 19rem) {
    .cinder-approval-card__eyebrow .cinder-approval-card__time-separator,
    .cinder-approval-card__detail-ask .cinder-approval-card__time-separator {
      display: none;
    }

    .cinder-approval-card__eyebrow time,
    .cinder-approval-card__detail-ask time {
      display: block;
    }
  }

  /* Deny and Approve are equal-width 44px targets in a narrow card, with "Add a note" above
   * them, and everywhere on a touch screen. The selectors repeat the button's own attribute so
   * they outrank the compact desktop height without a cross-component custom property. */
  @container (inline-size < 32rem) {
    /* The input line wraps rather than cutting its values, so a phone still reads all of it. */
    .cinder-approval-card__input-toggle {
      align-items: flex-start;
    }

    .cinder-approval-card__input-pairs {
      overflow: visible;
      white-space: normal;
    }

    .cinder-approval-card__note-toggle {
      flex: 1 1 100%;
      text-align: start;
    }

    /* The status badge sits above the question, in the column beside the risk glyph, so the
     * question keeps the full line under it. A resolved or answerable card with no badge draws no
     * badge row, because the empty group is hidden and the row gap is zero. */
    .cinder-approval-card__header {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr);
      grid-template-areas:
        'icon badges'
        'icon title';
      row-gap: 0;
    }

    .cinder-approval-card__risk-tip {
      grid-area: icon;
    }

    .cinder-approval-card__badges {
      grid-area: badges;
      justify-content: flex-start;
      margin-block-end: var(--cinder-space-2);
    }

    /* The group holds two conditional children, so Svelte leaves whitespace text nodes between
     * its anchors and `:empty` never matches; test for an element child instead. */
    .cinder-approval-card__badges:not(:has(*)) {
      display: none;
    }

    .cinder-approval-card__title-group {
      grid-area: title;
      min-inline-size: 0;
    }

    .cinder-approval-card__row-spacer {
      display: none;
    }

    .cinder-approval-card__row-actions .cinder-button[data-cinder-size],
    .cinder-approval-card__action-buttons .cinder-button[data-cinder-size] {
      flex: 1 1 0;
      min-height: var(--cinder-touch-target-min);
    }

    .cinder-approval-card__action-buttons {
      flex: 1 1 100%;
      margin-inline-start: 0;
    }
  }

  @media (pointer: coarse) {
    .cinder-approval-card__row-actions .cinder-button[data-cinder-size],
    .cinder-approval-card__action-buttons .cinder-button[data-cinder-size] {
      min-height: var(--cinder-touch-target-min);
    }

    /* The disclosures (Input, Details, Why the agent wants to do this, what the source said) and
     * "Add a note" are text-sized on a desktop; on a touch screen each is a 44px target (C#3). */
    .cinder-approval-card__input-toggle,
    .cinder-approval-card__said-toggle,
    .cinder-approval-card__note-toggle {
      min-block-size: var(--cinder-touch-target-min);
    }
  }

  /* Below about 20rem the label column squeezed the value to a few characters a line (a long tool
   * identifier broke over five lines), so each fact stacks its label above its value (C#14). */
  @container (inline-size < 20rem) {
    .cinder-approval-card__fact {
      grid-template-columns: minmax(0, 1fr);
    }
  }

  /* ----------------------------------------
   * Forced colors
   * ---------------------------------------- */

  @media (forced-colors: active) {
    .cinder-approval-card__risk-icon {
      color: CanvasText;
    }

    .cinder-approval-card__risk-icon:focus-visible,
    .cinder-approval-card__input-toggle:focus-visible,
    .cinder-approval-card__note-toggle:focus-visible {
      outline: 2px solid CanvasText;
      outline-offset: 2px;
      box-shadow: none;
    }

    .cinder-approval-card__outcome-dot {
      background: CanvasText;
    }
  }
}