/* Every action shares one pen weight, glyph scale and target, independent of its feature. */
:root {
    --ratio-icon-action-size: 40px;
    --ratio-icon-action-compact-size: 28px;
    --ratio-icon-action-embedded-size: 20px;
    --ratio-action-icon-stroke: 1.4;
    --ratio-action-icon-standard: 24px;
    --ratio-action-icon-labelled: 18px;
    --ratio-action-icon-compact: 18px;
    --ratio-action-icon-mini: 16px;
}

/* Associations retain a compact text-action footprint instead of a fixed icon-only target. */
.link-icon {
    width: var(--ratio-action-icon-labelled);
    height: var(--ratio-action-icon-labelled);
    flex: 0 0 var(--ratio-action-icon-labelled);
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: var(--ratio-action-icon-stroke);
}
.association-link-action, .record-sidebar-action {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-width: 100px;
    min-height: 26px;
    padding: 2px 10px;
    font-size: 11px;
    line-height: 1.2;
}
.record-sidebar-action {
    flex: 0 0 100px;
    width: 100px;
    height: 26px;
    padding-inline: 8px;
    white-space: nowrap;
}
.record-sidebar-action > span {
    /* Font glyphs sit below the center of their line box; keep labels level with icons. */
    line-height: 1;
    transform: translateY(-1px);
}

/* The native control contract also covers dynamically generated buttons and inline SVGs. */
:is(button, a[href], summary, [role="button"]):not([data-action-presentation-skip], [data-action-presentation-skip] *) svg,
:is(button, a[href], summary, [role="button"]):not([data-action-presentation-skip], [data-action-presentation-skip] *) svg :is(path, circle, rect, line, polyline, polygon, ellipse) {
    stroke-width: var(--ratio-action-icon-stroke) !important;
}
:is(button, a.button, summary, [role="button"]):not([data-action-presentation-skip], [data-action-presentation-skip] *) > svg {
    flex-shrink: 0;
    width: var(--ratio-action-icon-labelled) !important;
    height: var(--ratio-action-icon-labelled) !important;
}

/* Icon-only actions use one square without altering labelled controls or menu rows. */
[data-icon-action] {
    --ratio-action-control-size: var(--ratio-icon-action-size);
    --ratio-action-glyph-size: var(--ratio-action-icon-standard);
    box-sizing: border-box;
    display: inline-flex;
    flex: 0 0 auto !important;
    align-items: center;
    justify-content: center !important;
    width: var(--ratio-action-control-size) !important;
    min-width: var(--ratio-action-control-size) !important;
    max-width: var(--ratio-action-control-size) !important;
    height: var(--ratio-action-control-size) !important;
    min-height: var(--ratio-action-control-size) !important;
    padding: 0 !important;
    gap: 0;
    border-radius: var(--radius-small);
}
[data-icon-action][hidden] { display: none !important; }
[data-icon-action]:has(> [data-action-icon]) { font-size: 0 !important; }
[data-icon-action]:has(> [data-action-icon]) > .formula-tab-icon { display: none !important; }
[data-action-icon] {
    display: block;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* List forms and disabled tooltip wrappers reserve the very same target as their icon action. */
.compact-icon-action, .compact-icon-action-form {
    display: inline-grid !important;
    place-items: center;
    box-sizing: border-box;
    width: var(--ratio-icon-action-size) !important;
    min-width: var(--ratio-icon-action-size) !important;
    height: var(--ratio-icon-action-size) !important;
    min-height: var(--ratio-icon-action-size) !important;
    margin: 0 !important;
    padding: 0 !important;
    vertical-align: middle;
}
.compact-icon-action-form, .disabled-icon-action { flex: 0 0 var(--ratio-icon-action-size) !important; }
.compact-icon-action svg { display: block; margin: 0; }
.disabled-icon-action > .compact-icon-action:disabled {
    border-color: #d6dce1;
    background: #eef1f3;
    color: #98a4ae;
    cursor: not-allowed;
    opacity: 1;
}
:is(button, a.button, summary, [role="button"])[data-icon-action] > svg,
:is(button, a.button, summary, [role="button"])[data-icon-action] > :is(span, i) > svg {
    flex: 0 0 var(--ratio-action-glyph-size);
    width: var(--ratio-action-glyph-size) !important;
    height: var(--ratio-action-glyph-size) !important;
}

/* Inline widget affordances intentionally use smaller named targets from the same component. */
[data-icon-action-size="compact"] {
    --ratio-action-control-size: var(--ratio-icon-action-compact-size);
    --ratio-action-glyph-size: var(--ratio-action-icon-compact);
}
[data-icon-action-size="embedded"] {
    --ratio-action-control-size: var(--ratio-icon-action-embedded-size);
    --ratio-action-glyph-size: var(--ratio-action-icon-mini);
}

/* Planning and dashboard settings keep a usable target around a small, quiet glyph. */
[data-icon-action].settings-gear-action {
    --ratio-action-control-size: 26px;
    --ratio-action-glyph-size: 16px;
    border: 0;
    background: transparent;
    color: #5b9fc9;
    box-shadow: none;
}
/* The shared SVG has wide view-box padding; this scale keeps its drawn teeth visible. */
[data-icon-action].settings-gear-action > svg { transform: scale(1.25); }
[data-icon-action].settings-gear-action:is(:hover, :focus-visible) {
    border: 0;
    background: transparent;
    color: var(--navy-800);
    box-shadow: none;
    transform: none;
}

/* Quiet outline actions share feedback while primary colours and native disabled states remain intact. */
[data-icon-action]:not(.button-accent, .button-danger, .feedback-report-trigger, :disabled, [aria-disabled="true"], [data-icon-action-size]) {
    border: 1px solid var(--border-strong);
    background: #fff;
    color: var(--muted);
    box-shadow: none;
}
[data-icon-action]:not(.button-accent, .button-danger, .feedback-report-trigger, :disabled, [aria-disabled="true"], [data-icon-action-size]):is(:hover, :focus-visible) {
    border-color: var(--blue-600);
    background: var(--blue-050);
    color: var(--blue-700);
    box-shadow: none;
    transform: none;
}

/* Labelled controls never repeat their visible words in a legacy CSS tooltip. */
[data-action-text-visible]:is([data-compact-tooltip], .editor-topbar-action, .preview-icon-button)::after { content: none !important; }

/* Trash actions stay visually quiet until hover or keyboard focus signals danger. */
.trash-icon-part {
    fill: none !important;
    stroke: var(--muted) !important;
    stroke-width: var(--ratio-action-icon-stroke) !important;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: stroke .14s ease;
}
:is(button, a.button, summary[role="button"]):not(:disabled):is(:hover, :focus-visible) .trash-icon-part { stroke: var(--danger) !important; }
:is(button, a.button, summary[role="button"]):disabled .trash-icon-part,
:is(button, a.button, summary[role="button"])[aria-disabled="true"] .trash-icon-part { stroke: #68747d !important; }
:is(button, a.button, summary[role="button"]):has(.trash-icon-part),
:is(button, a.button, summary[role="button"]):has(.trash-icon-part):is(:hover, :focus-visible, :active) { box-shadow: none !important; }
.icon-button-danger:has(.trash-icon-part) { border-color: var(--interface-border) !important; background: #fff !important; color: var(--muted) !important; }
.icon-button-danger:has(.trash-icon-part):is(:disabled, [aria-disabled="true"]),
.icon-button-danger:has(.trash-icon-part):is(:disabled, [aria-disabled="true"]):is(:hover, :focus-visible) { border-color: #b9c3ca !important; background: #dfe4e8 !important; color: #68747d !important; cursor: not-allowed; opacity: 1; transform: none; }
.icon-button-danger:has(.trash-icon-part):not(:disabled):is(:hover, :focus-visible) { border-color: #d8a5a5 !important; background: #fff7f7 !important; color: var(--danger) !important; }

/* Inline phase and attachment removal keeps one quiet, borderless action contract. */
.icon-button-danger:is(.inline-trash-action, .attachment-delete-button, .attachment-collection-remove):has(.trash-icon-part),
.icon-button-danger:is(.inline-trash-action, .attachment-delete-button, .attachment-collection-remove):has(.trash-icon-part):not(:disabled):is(:hover, :focus-visible) {
    border-color: transparent !important;
    background: transparent !important;
    box-shadow: none !important;
}
.icon-button-danger:is(.inline-trash-action, .attachment-delete-button, .attachment-collection-remove):has(.trash-icon-part):is(:disabled, [aria-disabled="true"]),
.icon-button-danger:is(.inline-trash-action, .attachment-delete-button, .attachment-collection-remove):has(.trash-icon-part):is(:disabled, [aria-disabled="true"]):is(:hover, :focus-visible) {
    border-color: transparent !important;
    background: #eef1f3 !important;
    color: #8996a1 !important;
    box-shadow: none !important;
}
.icon-button-danger:is(.inline-trash-action, .attachment-delete-button, .attachment-collection-remove):is(:disabled, [aria-disabled="true"]) .trash-icon-part {
    stroke: #8996a1 !important;
}

/* Commercial document actions retain their two-row fallback unless their header is explicitly compact. */
@media (max-width: 760px) {
    .topbar:has(.document-topbar-actions) { flex-wrap: wrap; row-gap: 8px; }
    .topbar:has(.document-topbar-actions) .topbar-left { flex: 1 1 100%; }
    .topbar:has(.document-topbar-actions) .topbar-actions { width: 100%; justify-content: flex-end; }
    .topbar:has(.document-topbar-actions) .document-topbar-actions { flex-wrap: wrap; justify-content: flex-end; }
    .topbar--compact-actions { flex-wrap: nowrap; }
    .topbar--compact-actions .topbar-left { gap: 10px; }
    .topbar--compact-actions .page-title { font-size: 18px; }
    .topbar--compact-actions .topbar-actions { flex-wrap: nowrap; }
    .topbar--compact-actions .responsive-topbar-action { flex: 0 0 var(--ratio-icon-action-size); }
    .topbar.topbar--compact-actions:has(.document-topbar-actions) { flex-wrap: nowrap; }
    .topbar.topbar--compact-actions:has(.document-topbar-actions) .topbar-left { flex: 1 1 auto; }
    .topbar.topbar--compact-actions:has(.document-topbar-actions) .topbar-actions { width: auto; }
    .topbar.topbar--compact-actions:has(.document-topbar-actions) .document-topbar-actions { flex-wrap: nowrap; }
}
@media (min-width: 761px) { .responsive-topbar-action { width: auto; } }

/* Very narrow phones trade decorative spacing and heading size for readable record context. */
@media (max-width: 480px) {
    .topbar--compact-actions { padding-inline: 12px; gap: 8px; }
    .topbar--compact-actions .topbar-left { gap: 6px; }
}
@media (max-width: 360px) { .topbar--compact-actions .page-title { font-size: 16px; } }