/* Quick access: ordered mixed actions with an explicit primary operation. */
.module-actions {
  --action-row-height: 64px;
  --action-columns: 3;
  --module-ink: #31563d;
  --module-tone: #eef4e7;
  container-type: inline-size;
  container-name: actionmodule;
}
.module-actions.density-compact { --action-row-height: 48px; }
.module-actions .module-header { min-height: 44px; padding-top: 9px; padding-bottom: 8px; }
.module-actions .module-header h2 { font-size: 22px; }
.module-actions .module-body { min-height: 0; overflow: hidden; padding-top: 2px; }
.action-surface { width: 100%; height: 100%; min-height: 0; min-width: 0; overflow: hidden; }
.action-list {
  display: grid;
  grid-template-columns: repeat(var(--action-columns, 3), minmax(0, 1fr));
  grid-auto-rows: var(--action-row-height, 64px);
  align-content: start;
  gap: 8px 12px;
  min-width: 0;
  min-height: 0;
}
.action-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  height: var(--action-row-height, 64px);
  min-width: 0;
  min-height: 0;
  padding: 7px 8px 7px 11px;
  border: 1px solid #e0e6d7;
  border-radius: 5px;
  background: #fbfcf7;
  transition: border-color .15s, background-color .15s;
}
.action-row:hover { border-color: #b2c29f; background: #f6f9ef; }
.action-row:focus-within { border-color: #8da878; }
.action-identity { display: flex; align-items: center; gap: 8px; min-width: 0; overflow: hidden; text-align: left; }
.action-copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.action-icon { display: grid; place-items: center; flex: 0 0 auto; width: 23px; height: 26px; color: #7a8f69; border: 1px solid #e1e8d8; border-radius: 3px; background: #f1f6e9; }
.action-icon svg { width: 13px; height: 13px; }
.action-buttons { display: flex; align-items: center; gap: 4px; flex: 0 0 auto; }
button.action-identity { border: 0; padding: 0; background: none; color: inherit; cursor: pointer; font: inherit; }
.action-title { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #2e4930; font-size: 12px; font-weight: 600; line-height: 17px; }
.action-title svg { width: 13px; height: 13px; margin-right: 4px; color: #758b65; }
.action-meta, .action-summary { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #718065; font-size: 11px; line-height: 15px; }
.action-meta .action-variant { color: #756345; font-weight: 500; }
.action-description { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; line-height: 15px; color: #718065; }
.module-actions:not(.density-compact) .action-row { padding-top: 5px; padding-bottom: 5px; }
.action-summary .action-kind { color: #806b4d; text-transform: none; letter-spacing: 0; font-size: 11px; }
.action-summary { display: flex; align-items: center; gap: 4px; min-width: 0; }
.action-summary .action-kind { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-right: 0; }
.action-readiness { color: #7c8b6f; }
.action-readiness { flex: 0 0 auto; }
.action-readiness::before { content: "·"; padding-right: 5px; }
.action-kind { display: inline-block; color: #8a937f; font-size: 10px; font-weight: 500; letter-spacing: .5px; text-transform: uppercase; margin-right: 5px; }
.action-primary {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  width: 76px;
  min-width: 76px;
  height: 30px;
  min-height: 30px;
  padding: 5px 7px;
  border: 1px solid #cddcc0;
  border-radius: 4px;
  background: #eaf2e1;
  color: #35552c;
  font-size: 11px;
  font-weight: 600;
  line-height: 16px;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
}
.action-primary:hover { background: #dae9cd; border-color: #9cb58b; color: #24421d; }
a.action-primary { background: #fffefa; border-color: #d9e1d0; color: #687b5a; }
a.action-primary:hover { background: #eef4e6; border-color: #b6c8a5; }
.action-primary.is-copied, .action-primary[data-state="copied"], .action-row.is-copied .action-primary { background: #345d40; color: #fffefa; border-color: #345d40; }
.action-primary svg { width: 12px; height: 12px; }
.action-preview {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  min-width: 28px;
  height: 30px;
  min-height: 30px;
  padding: 5px;
  border: 0;
  border-left: 1px solid #e0e6d7;
  border-radius: 0;
  background: transparent;
  color: #829473;
  cursor: pointer;
}
.action-preview:hover { background: #eaf1e1; color: #3e6130; }
.action-preview svg { width: 15px; height: 15px; }
.action-row:focus-visible, .action-primary:focus-visible, .action-preview:focus-visible { outline: 2px solid #859e71; outline-offset: 2px; }
.module-actions.density-compact .action-row { padding-top: 4px; padding-bottom: 4px; }
.module-actions.density-compact .action-identity { gap: 1px; }
.module-actions.density-compact .action-identity { gap: 7px; }
.module-actions.density-compact .action-copy { gap: 1px; }
.module-actions.density-compact .action-description { display: none; }
.action-group { min-width: 0; }
.action-group-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 27px; padding: 0 0 7px; color: #7c8e6d; font-size: 11px; }
.action-group-header h3 { margin: 0; font-size: 11px; font-weight: 600; letter-spacing: .6px; text-transform: uppercase; }
.module-actions .module-footer .action-pagination { display: flex; align-items: center; gap: 5px; }
.action-feedback { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: #587448; font-size: 11px; }

/* The exact copied content belongs in a deliberate preview, not another board panel. */
.action-composer { min-width: 0; }
.action-composer > * + * { margin-top: 16px; }
.action-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; min-width: 0; }
.action-fields .field { min-width: 0; margin: 0; }
.action-fields .field:has(textarea), .action-fields .field-wide { grid-column: 1 / -1; }
.action-fields .field-label { color: #687e58; font-size: 11px; }
.action-preset-select { width: 100%; min-width: 0; border: 1px solid #d5e1c9; border-radius: 5px; background: #f6f9f0; color: #426333; font-size: 12px; padding: 8px 9px; }
.action-composer .preview { font-family: inherit; font-size: 12px; line-height: 1.7; padding: 15px 17px; max-height: 310px; background: #eff4e6; color: #425b35; border-color: #d7e3c9; }
.action-composer .action-context, .action-source-note { font-size: 11px; color: #7c8c6c; line-height: 1.6; }
.action-composer .action-context { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.action-composer .validation { font-size: 11px; }
.action-composer .validation.is-ready { background: #f0f5e9; border-left-color: #8da572; color: #526d3f; }
.action-composer .preview-label { display: block; margin-bottom: 7px; color: #788969; font-size: 11px; letter-spacing: .7px; }
.action-pin-options { border-top: 1px solid #dce6d1; padding-top: 13px; }
.action-pin-options summary { color: #597b46; cursor: pointer; font-size: 12px; }
.action-pin-options .field { margin-top: 12px; }
.action-pin-options .scope-note { margin: 10px 0; }
.placement-editor-row { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) auto; gap: 9px; align-items: end; margin-top: 9px; padding: 12px; border: 1px solid #dfe7d5; border-radius: 6px; background: #f6f9f0; }
.placement-editor-row .field { margin: 0; min-width: 0; }
.placement-editor-row .placement-controls { display: flex; align-items: center; gap: 2px; padding-bottom: 3px; }
.placement-editor-row .placement-source { grid-column: 1 / -1; min-width: 0; font-size: 11px; line-height: 1.5; color: #7d8c70; }
.placement-editor-row > .muted { grid-column: 1 / -1; font-size: 11px; line-height: 1.5; }
.placement-order { display: flex; align-items: center; gap: 2px; padding-bottom: 3px; }
.action-library-list { display: flex; flex-direction: column; gap: 8px; }
.action-library-list .action-row { --action-row-height: 64px; }

@container actionmodule (max-width: 1000px) {
  .action-list { --action-columns: 2; }
}
@container actionmodule (max-width: 650px) {
  .action-list { --action-columns: 1; }
}
@media (max-width: 600px) {
  .module-actions { --action-row-height: 68px; }
  .module-actions.density-compact { --action-row-height: 52px; }
  .module-actions .module-header { min-height: 42px; padding-top: 8px; padding-bottom: 7px; }
  .module-actions .module-header h2 { font-size: 21px; }
  .action-list { --action-columns: 1; gap: 7px; }
  .action-row { grid-template-columns: minmax(0, 1fr) auto; gap: 5px; padding-left: 8px; padding-right: 5px; }
  .action-primary { width: 69px; min-width: 69px; min-height: 30px; font-size: 11px; padding-left: 5px; padding-right: 5px; }
  .action-preview { width: 25px; min-width: 25px; padding: 4px; }
  .action-title { font-size: 12px; }
  .action-meta { font-size: 11px; }
  .action-icon { display: none; }
  .action-buttons { gap: 2px; }
  .action-fields { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .placement-editor-row { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .placement-editor-row .placement-controls { justify-content: flex-end; padding: 0; }
  .placement-order { justify-content: flex-end; padding: 0; }
  .action-composer .preview { padding: 12px; font-size: 12px; }
}
@media (max-width: 360px) {
  .action-primary { width: 65px; min-width: 65px; padding-left: 3px; padding-right: 3px; }
  .action-row { gap: 4px; }
  .action-preview { width: 23px; min-width: 23px; }
}
@media (max-height: 500px) and (min-width: 601px) {
  .module-actions { --action-row-height: 58px; }
  .module-actions.density-compact { --action-row-height: 44px; }
  .module-actions .module-header { min-height: 37px; padding-top: 5px; padding-bottom: 5px; }
  .action-list { gap: 6px 10px; }
  .module-actions:not(.density-compact) .action-row { padding-top: 4px; padding-bottom: 4px; }
  .module-actions:not(.density-compact) .action-copy { gap: 1px; }
  .module-actions:not(.density-compact) .action-title { line-height: 16px; }
  .module-actions:not(.density-compact) .action-meta, .module-actions:not(.density-compact) .action-description { line-height: 13px; }
  .action-composer .preview { max-height: 180px; }
}
@media (prefers-reduced-motion: reduce) { .action-row { transition: none; } }