/* Harmony's actions use a shared instrument language: brass construction,
   violet knowledge, blue navigation, teal community. Health stays green,
   attention orange and critical states red. Icons never replace visible names. */
button[data-ui-action]{--action-ink:#b4c9c5;--action-edge:#7faaa84a;transition:border-color .18s,background-color .18s,box-shadow .18s,color .18s}
button[data-ui-family="construction"]{--action-ink:#e0c08b;--action-edge:#d1b07770}
button[data-ui-family="knowledge"]{--action-ink:#c8b7e8;--action-edge:#aa98ca66}
button[data-ui-family="journey"]{--action-ink:#b0c9e7;--action-edge:#8ba8cf66}
button[data-ui-family="community"]{--action-ink:#a5d7cc;--action-edge:#89bdae66}
button[data-ui-family="engineering"]{--action-ink:#b7d3cf;--action-edge:#92b7ac66}
button[data-ui-family="critical"]{--action-ink:#f3b0a4;--action-edge:#df91815e}
button[data-ui-action]:not(.factory-socket):not(.factory-port){border-color:var(--action-edge)}
button[data-ui-action]:not(:disabled):hover{border-color:var(--action-ink);box-shadow:inset 0 0 0 1px var(--action-edge),0 3px 12px #0003}
button[data-ui-action]:focus-visible{outline:2px solid #d8e7cf;outline-offset:3px}
button[data-ui-action]:disabled .action-icon{opacity:.45}
.action-icon{display:inline-block;width:18px;height:18px;min-width:18px;margin-inline-end:6px;vertical-align:-4px;pointer-events:none;color:var(--action-ink,currentColor);overflow:visible;flex-shrink:0;transition:transform .18s,opacity .18s}
button:not(:disabled):hover>.action-icon,button:focus-visible>.action-icon{transform:translateY(-1px)}
button[data-ui-action="refresh"]:not(:disabled):hover>.action-icon{transform:rotate(35deg)}
button[data-ui-action="upgrade"]:not(:disabled):hover>.action-icon{transform:translateY(-3px)}
button[data-ui-action="send"]:not(:disabled):hover>.action-icon,button[data-ui-action="next"]:not(:disabled):hover>.action-icon{transform:translateX(2px)}
button[data-ui-action="previous"]:not(:disabled):hover>.action-icon{transform:translateX(-2px)}
button[data-ui-action="close"]:not(:disabled):hover>.action-icon{transform:rotate(90deg)}
button[data-ui-action="save"]:not(:disabled):hover>.action-icon,button[data-ui-action="confirm"]:not(:disabled):hover>.action-icon{transform:scale(1.1)}
.factory-socket>.action-icon,.factory-port>.action-icon{width:15px;height:15px;min-width:15px;margin:0;vertical-align:0}
.factory-socket[data-ui-action]>span,.factory-port-choice[data-ui-action]>span[aria-hidden="true"]{display:none}
.factory-socket[data-ui-action]:hover{box-shadow:none}
.factory-port-choice>.action-icon{width:17px;height:17px;min-width:17px;margin:0}
.icon-button>.action-icon,button[data-close-dialog]>.action-icon{margin-inline-end:2px}
.workspace-tabs button[data-ui-action][aria-selected="true"],.workspace-tabs button.active[data-ui-action],.admin-tabs button[aria-current="page"][data-ui-action]{box-shadow:inset 0 -2px var(--action-ink)}
.workspace-tabs button[data-ui-action]{background-image:linear-gradient(155deg,#a8d0c409,transparent 70%)}
.factory-blueprint,.building-card,.admin-card,.coop-card,.engineering-card,.recipe-choice{transition:border-color .2s,background-color .2s,box-shadow .2s}
.factory-blueprint:hover,.building-card:hover,.recipe-choice:hover{border-color:#b7c9b975;box-shadow:0 5px 16px #0002}
.building-art{width:96px;height:62px;flex-shrink:0;overflow:hidden;border-radius:8px;background:#102732}
.building-art>svg{display:block;width:100%;height:100%}
.building-card:hover .art-motion,.building-card:focus-within .art-motion{animation-play-state:running}
dialog[open]{animation:harmony-panel-arrive .2s ease-out}
dialog::backdrop{background:#07151bc9;backdrop-filter:blur(5px)}
.resource-chip{transition:border-color .2s,background-color .2s}
.resource-chip:hover{background-color:#a6cbb40d;border-color:#abcbbd5c}
.status-dot.healthy,.status-dot.online,.health-good .status-dot{animation:none!important}
@keyframes harmony-panel-arrive{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}}
/* Actionable attention pulses orange; faults stay red and healthy states steady. */
.factory-card.compact-card[data-severity="critical"],.building-card[data-severity="critical"]{border-color:#f17870;box-shadow:0 0 0 1px #f1787066,0 0 18px #eb645855,inset 0 0 18px #c7473c19}.factory-card.compact-card[data-severity="critical"] .status-dot{background:#f17870!important;box-shadow:0 0 7px #f1787077!important;animation:none!important}
.factory-card.compact-card[data-severity="healthy"],.building-card[data-severity="healthy"]{border-color:#78c9a2;box-shadow:0 0 0 1px #72be9450,0 0 12px #69bb8b25,inset 0 0 12px #70be8d0b}.factory-card.compact-card[data-severity="healthy"] .status-dot{background:#78c9a2!important;animation:none!important}
.factory-card.compact-card[data-severity="neutral"] .status-dot{background:#8ba2aa!important;box-shadow:none!important;animation:none!important}
.factory-card.compact-card[data-severity="neutral"],.building-card[data-severity="neutral"]{border-color:#71878f;box-shadow:0 4px 10px #0004,inset 0 0 0 1px #71878f33}
.factory-card.compact-card[data-severity="attention"],button.attention:not(:disabled),.sky-attention:not(:disabled),.sky-choice-ready,.workshop-problem,.needs-attention,[data-attention="true"]{border-color:#f5ac68;box-shadow:0 0 0 1px #f4a36555,0 0 15px #ed974435;animation:harmony-attention-glow 2.4s ease-in-out infinite}
.factory-card.compact-card[data-severity="attention"] .status-dot{background:#f5ac68!important;box-shadow:0 0 8px #f4a36566!important}
@keyframes harmony-attention-glow{0%,100%{box-shadow:0 0 0 1px #f4a36555,0 0 9px #ed974425}50%{box-shadow:0 0 0 1px #f4a365aa,0 0 23px #ed974465}}
/* A user preference, a hidden page or a constrained connection is authoritative.
   SVG delivery motion is hidden too; machinery settles into its real state. */
html[data-motion="calm"] *,html[data-motion-limited="true"] *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
html[data-motion="calm"] .wire-delivery,html[data-motion-limited="true"] .wire-delivery{display:none!important}
html[data-motion="calm"] button>.action-icon,html[data-motion-limited="true"] button>.action-icon{transform:none!important}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.wire-delivery{display:none!important}button>.action-icon{transform:none!important}}
@media(max-width:600px){.action-icon{width:16px;height:16px;min-width:16px;margin-inline-end:5px}.factory-toolbar .action-icon{width:15px;height:15px;min-width:15px;margin-inline-end:3px}.workspace-tabs button .action-icon{width:17px;height:17px;min-width:17px}}