@layer components {
  .action-block-frame { display: block; max-width: 700px; margin-top: 6px; container-type: inline-size; }

  /* Panels and the edit form carry [hidden]; their display rules below would otherwise show them. */
  .action-block [hidden] { display: none; }
  .action-block {
    border: 1px solid var(--border); border-radius: 9px; background: var(--card); overflow: hidden; font-size: 13px;
  }
  /* A block that waits for its validator: amber edge, as everything that waits on a person. */
  .action-block--pending, .action-block--modified { border-color: var(--jx-wait); box-shadow: inset 3px 0 0 var(--jx-wait); }
  .action-block-head {
    display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 7px 12px;
    border-bottom: 1px solid var(--border);
  }
  .action-block-title { display: inline-flex; align-items: center; gap: 6px; flex: 1; min-width: 0; font-weight: 600; }
  .action-block-title svg { flex: none; color: var(--muted-foreground); }
  .action-block-state { background: var(--muted); color: var(--muted-foreground); }
  .action-block-state--pending, .action-block-state--modified { background: var(--jx-wait-soft); color: var(--jx-wait); }
  .action-block-state--approved { background: var(--jx-ok-soft); color: var(--jx-ok); }
  .action-block-state--executing { background: var(--jx-accent-soft); color: var(--jx-accent); }
  .action-block-state--failed, .action-block-state--rejected { background: var(--jx-no-soft); color: var(--jx-no); }

  .action-block-outcome {
    margin: 0; padding: 7px 12px; border-bottom: 1px solid var(--border); background: var(--jx-no-soft); color: var(--jx-no);
  }
  .action-block-body { padding: 8px 12px; }
  .action-block-erased { margin: 0; padding: 8px 12px; color: var(--muted-foreground); font-style: italic; }
  .action-block-fields, .action-block-item {
    display: grid; grid-template-columns: minmax(88px, max-content) 1fr; gap: 5px 12px; margin: 0;
  }
  .action-block-fields dt, .action-block-item dt { color: var(--muted-foreground); }
  .action-block-fields dd, .action-block-item dd { margin: 0; overflow-wrap: anywhere; white-space: pre-line; text-wrap: pretty; }
  .action-block-list { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }
  .action-block-list > li:has(> dl) { padding: 6px 8px; border: 1px solid var(--border); border-radius: 7px; }

  .action-block-edit { display: flex; flex-direction: column; gap: 10px; padding: 8px 12px; }
  .action-block-fields-edit { display: flex; flex-direction: column; gap: 10px; }
  .action-block-fieldset { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 8px 10px; border: 1px solid var(--border); border-radius: 7px; }
  .action-block-fieldset legend { padding: 0 4px; font-weight: 500; }

  /* Per-tool bodies: one row per pole, recipient or person. */
  .tool-rows { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }
  .tool-rows--inline { flex-direction: row; flex-wrap: wrap; }
  .tool-row { display: flex; flex-direction: column; gap: 4px; padding: 7px 9px; border: 1px solid var(--border); border-radius: 7px; }
  .tool-row-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
  .tool-row-title { font-weight: 600; }
  .tool-row-note { margin: 0; color: var(--muted-foreground); }
  .tool-row-people { display: flex; flex-wrap: wrap; gap: 6px; }
  .tool-person { display: inline-flex; align-items: center; gap: 6px; }
  /* A pole nobody holds waits on the validator. */
  .pole-vacant {
    padding: 0 7px; border: 1px solid var(--jx-wait); border-radius: 999px; background: var(--jx-wait-soft); color: var(--jx-wait);
  }
  .tool-briefing, .tool-goal { margin: 0; white-space: pre-line; overflow-wrap: anywhere; }
  .tool-goal { margin-top: 8px; }
  .tool-briefing-label { color: var(--muted-foreground); }
  .tool-block-text { display: block; color: var(--muted-foreground); white-space: pre-line; }
  .tool-handoff { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
  .tool-handoff p, .tool-destination { margin: 0; }
  .tool-destination { font-weight: 600; }
  .tool-quote {
    margin: 0; padding-left: 10px; border-left: 3px solid var(--border); white-space: pre-line; overflow-wrap: anywhere;
  }
  .tool-files { margin: 0; padding-left: 18px; overflow-wrap: anywhere; }
  /* Their values are markup, not stored text: the template's line breaks must not show. */
  .tool-fields dd { white-space: normal; }

  .action-block-modified, .action-block-decision, .action-block-readonly {
    margin: 0; padding: 7px 12px; border-top: 1px solid var(--border);
  }
  .action-block-modified { color: var(--muted-foreground); }
  .action-block-decision { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
  .action-block-decision p { margin: 0; }
  .action-block-decision form { margin: 0; }
  .action-block-reason { margin: 0; padding-left: 10px; border-left: 3px solid var(--border); font-style: italic; white-space: pre-line; }
  .action-block-readonly { color: var(--muted-foreground); }

  .action-block-gestures { display: flex; flex-direction: column; gap: 8px; padding: 8px 12px; border-top: 1px solid var(--border); }
  .action-block-gestures form { margin: 0; }
  .action-block-approve { display: flex; flex-direction: column; gap: 8px; }
  .action-block-form { display: flex; flex-direction: column; gap: 6px; width: 100%; }
  .action-block-warning {
    display: flex; flex-direction: column; gap: 6px; padding: 8px 10px; border-radius: 7px;
    border: 1px solid var(--jx-wait); background: var(--jx-wait-soft);
  }
  .action-block-warning p { margin: 0; }
  /* A file about to leave Janus: its card first, then the sentence saying it cannot be taken back. */
  .action-block-file { margin: 0 0 8px; }
  .action-block-egress {
    display: flex; gap: 6px; align-items: flex-start; margin: 8px 0 0; padding: 8px 10px; border-radius: 7px;
    border: 1px solid var(--jx-wait); background: var(--jx-wait-soft);
  }
  .action-block-egress svg { flex: none; margin-top: 2px; color: var(--jx-wait); }
  /* The provenance to open before « J'ai vérifié »: a native disclosure inside the warning box. */
  .action-block-warning summary { cursor: pointer; font-weight: 600; }
  .action-block-blocked { margin: 0; }

  .action-block-foot {
    display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; padding: 6px 12px;
    border-top: 1px solid var(--border); background: var(--surface); color: var(--muted-foreground);
  }

  /* The block folds by the width of its own frame, in a thread, a panel or a phone. */
  @container (max-width: 480px) {
    .action-block-fields, .action-block-item { grid-template-columns: 1fr; gap: 2px; }
    .action-block-fields dd + dt, .action-block-item dd + dt { margin-top: 6px; }
  }

  @media (max-width: 767px) {
    /* The block leaves the message's text column (agent avatar and gap) for the whole width. */
    .action-block-frame { max-width: none; margin-inline-start: calc(-1 * (24px + 9px)); }
    .action-block { border-radius: var(--radius-lg); font-size: var(--text-body); }
    .action-block-head { padding: 9px 12px; }
    /* One 50 px row per pole: its name and card on the left, who holds it on the right. */
    .action-block-body .tool-rows { gap: 0; margin-inline: -12px; }
    .action-block-body .tool-rows > .tool-row {
      flex-flow: row wrap; align-items: center; justify-content: space-between; gap: 4px 10px; min-height: 50px;
      padding: 7px 12px; border: 0; border-top: 1px solid var(--border); border-radius: 0;
    }
    .action-block-body .tool-rows > .tool-row:first-child { border-top: 0; }
    .action-block-body .tool-row-head { flex: 1; min-width: 0; flex-direction: column; gap: 0; }
    .action-block-body .tool-row-people { flex: none; justify-content: flex-end; }
    .action-block-body .tool-row > :is(.tool-briefing, p.tool-row-note) { flex-basis: 100%; }
    /* A vacant pole: its name, the state in plain amber under it, and « Désigner » at the right edge. */
    .action-block-body .tool-rows > .tool-row:has(.pole-vacant) {
      display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 0 10px;
    }
    .action-block-body .tool-row:has(.pole-vacant) .tool-row-people { display: contents; }
    .action-block-body .tool-row:has(.pole-vacant) .tool-row-head { grid-column: 1; grid-row: 1; }
    .action-block-body .tool-row .pole-vacant { grid-column: 1; grid-row: 2; padding: 0; border: 0; background: none; }
    .action-block-body .tool-row .pole-designate-block {
      grid-column: 2; grid-row: 1 / span 2; height: 36px; font-weight: 600;
    }
    .action-block-body .tool-row:has(.pole-vacant) > :is(.tool-briefing, p.tool-row-note) { grid-column: 1 / -1; }
    /* Gestures at the thumb: « Valider » across, « Modifier » and « Refuser » side by side under it. */
    .action-block-gestures { padding: 10px 12px 12px; background: var(--surface); }
    .action-block-approve .button-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
    .action-block-approve .action-block-gesture { min-height: var(--tap); justify-content: center; }
    .action-block-gesture--approve, .action-block-gesture--other { grid-column: 1 / -1; }
    .action-block-approve .action-block-gesture--reject {
      border-color: var(--jx-no); background: var(--jx-no-soft); color: var(--jx-no);
    }
    .action-block-approve .button-row:not(:has(.action-block-gesture--modify)) .action-block-gesture--reject {
      grid-column: 1 / -1;
    }
    .action-block-foot { justify-content: center; text-align: center; }
  }

  @media (max-width: 1099px) {
    /* In the bottom sheet the reason has room to be written, and the button spans the sheet. */
    .sheet .action-block-form { padding: 4px var(--gutter) 16px; }
    .sheet .action-block-form textarea { min-height: 7rem; }
    .sheet .action-block-form .button-row .button { width: 100%; min-height: var(--tap); justify-content: center; }
  }

  /* « Désigner » in a vacant pole is the phone's way into the edit form; the desktop has « Modifier ». */
  .tool-row .pole-designate-block { display: none; }

  @media (max-width: 1099px) {
    .tool-row .pole-designate-block { display: inline-flex; }
  }
}