/* Partners 3.0 reusable component vocabulary. */

.ss3-page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--ss3-gap-heading-wrap) var(--ss3-gap-heading-actions);
    margin-bottom: var(--ss3-space-3);
}

.ss3-page-header > :first-child {
    min-width: 0;
}

/* A visible status context stays with the page identity when space permits and
   wraps only when its complete label/value unit no longer fits. */
.ss3-status-context {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: var(--ss3-gap-inline);
    min-height: calc(var(--ss3-font-size-page-title) + var(--ss3-space-1));
    color: var(--ss3-color-text);
    font-size: var(--ss3-font-size-label);
    font-weight: var(--ss3-font-weight-strong);
    line-height: var(--ss3-line-height-tight);
    white-space: nowrap;
}

/* Compact name/fact and pill composition wraps whole items before shrinking text. */
.ss3-status-context[data-wrap="true"] {
    flex-wrap: wrap;
    gap: var(--ss3-space-1) var(--ss3-gap-inline);
    max-width: 100%;
    min-width: 0;
    min-height: 0;
    white-space: normal;
}

.ss3-status-context[data-wrap="true"] > :not(.ss3-status-pill) {
    min-width: 0;
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
}

/* Inline title/status flow keeps an atomic marker with the final name line.
   Adjacent title spans keep the shared margin as the single gap owner. */
.ss3-heading-context { min-width: 0; max-width: 100%; }
/* A heading may wrap beside an atomic optional field without placing that
   field inside its accessible name. Native control target geometry is retained. */
.ss3-heading-context[data-layout="paired"] {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: var(--ss3-gap-inline);
}
.ss3-heading-context[data-layout="paired"] > :is(h1, h2, h3) {
    flex: 0 1 auto;
    min-width: 0;
    margin: 0;
}
.ss3-heading-context[data-layout="paired"] > .ss3-field[data-control="checkbox"] {
    flex: 0 0 auto;
    margin: 0;
    white-space: nowrap;
}

.ss3-heading-context > .ss3-status-marker {
    display: inline-flex;
    font-size: var(--ss3-font-size-label);
    font-weight: var(--ss3-font-weight-strong);
    line-height: var(--ss3-line-height-tight);
    margin-inline-start: var(--ss3-gap-inline);
    vertical-align: middle;
    white-space: nowrap;
}

/* Related delivery facts and a value action wrap as one outer contact unit.
   Inner value content may shrink/wrap; its action remains a complete target. */
.ss3-contact-cluster {
    display: inline-flex;
    flex: 0 1 auto;
    flex-wrap: nowrap;
    align-items: center;
    gap: var(--ss3-gap-inline);
    min-width: 0;
    max-width: 100%;
}
.ss3-contact-cluster > :not(.ss3-icon-action) { flex: 1 1 auto; min-width: 0; }
.ss3-contact-cluster > .ss3-icon-action { flex: 0 0 auto; }

.ss3-page-header h1,
.ss3-page-header h2 {
    margin: 0;
    font-weight: var(--ss3-font-weight-strong);
    line-height: var(--ss3-line-height-tight);
}

.ss3-page-header h1 {
    font-size: var(--ss3-font-size-page-title);
}

.ss3-page-header h2 {
    font-size: var(--ss3-font-size-section-title);
}

.ss3-stack > .ss3-page-header,
.ss3-stack-lg > .ss3-page-header {
    margin-bottom: 0;
}

.ss3-page-header-summary {
    max-width: 60rem;
    color: var(--ss3-color-text-muted);
    font-size: var(--ss3-font-size-supporting);
    line-height: var(--ss3-line-height-body);
}

.ss3-toolbar,
.ss3-action-bar,
.ss3-grid-toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--ss3-space-2);
}

.ss3-toolbar {
    margin-bottom: var(--ss3-space-3);
}

/* A toolbar field followed by row actions aligns those actions with the control. */
.ss3-toolbar > .ss3-field + .ss3-row-actions {
    align-self: flex-end;
}

.ss3-toolbar > .ss3-field + .ss3-row-actions .button {
    margin-bottom: 0;
    white-space: nowrap;
}

.ss3-page-header-actions {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: var(--ss3-space-2);
    margin-bottom: 0;
}

.ss3-page-header .ss3-row-actions,
.ss3-page-header .ss3-toolbar {
    flex: 0 0 auto;
    margin-bottom: 0;
}

.ss3-grid-toolbar > h1,
.ss3-grid-toolbar > h2,
.ss3-grid-toolbar > h3 {
    margin-bottom: 0;
}

.ss3-page-header-actions .button,
.ss3-row-actions .button,
.ss3-grid-toolbar .button {
    margin-bottom: 0;
}

.ss3-action-bar {
    margin: 0;
    padding-top: 0;
    border-top: 0;
}

.ss3-action-bar .button {
    margin-bottom: 0;
}

/* Compatibility for direct actions in unmigrated sections/cards. Form-grid gap is
   already authoritative. Remove these selectors when those consumers migrate. */
.ss3-section:not([data-layout="section"]) > .ss3-action-bar,
.ss3-card:not([data-layout="section"]) > .ss3-action-bar {
    margin-top: var(--ss3-gap-actions);
}

/* Optional compact in-section actions retain normal control text and touch height. */
.ss3-action-bar[data-density="compact"] .button {
    padding-inline: var(--ss3-space-3);
}

.ss3-action-bar[hidden] {
    display: none !important;
}

.ss3-card,
.ss3-summary-card,
.ss3-detail-panel,
.ss3-child-panel {
    background: var(--ss3-color-surface);
    border: 1px solid var(--ss3-color-border);
    border-radius: var(--ss3-radius-lg);
    box-shadow: var(--ss3-shadow-sm);
}

.ss3-card,
.ss3-detail-panel,
.ss3-child-panel {
    padding: var(--ss3-space-4);
}

/* A section is semantic grouping, not another nested card boundary. */
.ss3-section {
    min-width: 0;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.ss3-summary-card {
    padding: var(--ss3-space-3);
}

.ss3-section:not([data-layout="section"]) + .ss3-section:not([data-layout="section"]) {
    margin-top: var(--ss3-space-6);
}

/* Opt-in boundary for peer workbench sections; not an underline or a form divider. */
.ss3-section[data-divider="true"]:not([data-layout="section"]) {
    margin-top: var(--ss3-space-3);
    padding-top: var(--ss3-space-3);
    border-top: 1px solid var(--ss3-color-structure);
}

.ss3-card + .ss3-card,
.ss3-detail-panel + .ss3-detail-panel,
.ss3-child-panel + .ss3-child-panel {
    margin-top: var(--ss3-space-3);
}

/* Read-only business content is visually distinct from editable form controls. */
.ss3-readonly-content {
    padding: var(--ss3-space-2) var(--ss3-space-3);
    border: 0;
    border-radius: var(--ss3-radius-sm);
    background: rgb(17 45 78 / 0.035);
    color: var(--ss3-color-text);
    font-family: inherit;
    font-size: var(--ss3-font-size-body);
    font-weight: var(--ss3-font-weight-regular);
    line-height: var(--ss3-line-height-body);
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}

/* Supported semantic composition: section/card -> header -> content groups ->
   owning actions. No empty slot is required. Header and group gaps are distinct. */
.ss3-section[data-layout="section"],
.ss3-card[data-layout="section"] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
:is(.ss3-section, .ss3-card)[data-layout="section"] > * {
    margin-block: 0;
    min-width: 0;
}
:is(.ss3-section, .ss3-card)[data-layout="section"] > :not([hidden]) ~ :not([hidden]) {
    margin-top: var(--ss3-gap-group);
}
:is(.ss3-section, .ss3-card)[data-layout="section"] > header:not([hidden]) ~ :not([hidden]) {
    margin-top: var(--ss3-gap-heading);
}
:is(.ss3-section, .ss3-card)[data-layout="section"] > :not(header):not([hidden]) ~ :not([hidden]) {
    margin-top: var(--ss3-gap-group);
}
:is(.ss3-section, .ss3-card)[data-layout="section"] > :not([hidden]) ~ .ss3-action-bar:not([hidden]) {
    margin-top: var(--ss3-gap-actions);
}
/* A headed subsection following visible content starts a new semantic group.
   The responsive section-before gap replaces the ordinary group gap once.
   First/hidden subsections and workbench peer boundaries remain separately owned. */
:is(.ss3-section, .ss3-card)[data-layout="section"] > :not(header):not([hidden]) ~ .ss3-section[data-layout="section"]:not([hidden]):has(> header:not([hidden])),
:is(.ss3-section, .ss3-card)[data-layout="section"] > :not(header):not([hidden]) ~ .ss3-headed-group:not([hidden]):has(> .ss3-section[data-layout="section"]:not([hidden]) > header:not([hidden])) {
    margin-top: var(--ss3-gap-section-before);
}

/* One section-header owner: title left, intact actions right. A modest title
   basis preserves readable wrapping before the complete action group moves below. */
:is(.ss3-section[data-layout="section"] > header, .ss3-card[data-layout="section"] > header, .ss3-section-header) {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--ss3-gap-heading-wrap) var(--ss3-gap-heading-actions);
}
:is(.ss3-section[data-layout="section"] > header, .ss3-card[data-layout="section"] > header, .ss3-section-header) > :is(h2, h3) {
    color: var(--ss3-color-structure);
    flex: 1 1 12rem;
    min-width: 0;
    max-width: 100%;
    margin: 0;
    font-size: var(--ss3-font-size-section-title);
    font-weight: var(--ss3-font-weight-strong);
    line-height: var(--ss3-line-height-tight);
    overflow-wrap: anywhere;
}
:is(.ss3-section[data-layout="section"] > header, .ss3-card[data-layout="section"] > header, .ss3-section-header) > .ss3-action-bar {
    flex: 0 0 auto;
    flex-wrap: nowrap;
    justify-content: flex-end;
    align-items: center;
    max-width: 100%;
    min-height: 1.2em;
    margin: 0;
    margin-inline-start: auto;
    gap: var(--ss3-gap-inline);
    font-size: var(--ss3-font-size-section-title);
    line-height: var(--ss3-line-height-tight);
}

/* Mixed record headers align text, a native field and full-size action targets.
   Icons nested in row-actions keep their standard control geometry. */
:is(.ss3-section[data-layout="section"] > header, .ss3-card[data-layout="section"] > header, .ss3-section-header)[data-actions="mixed"] {
    flex-wrap: nowrap;
    align-items: center;
}
:is(.ss3-section[data-layout="section"] > header, .ss3-card[data-layout="section"] > header, .ss3-section-header)[data-actions="mixed"] > :is(h1, h2, h3) {
    flex: 1 1 0;
    min-width: 0;
    max-width: 100%;
    margin: 0;
}
:is(.ss3-section[data-layout="section"] > header, .ss3-card[data-layout="section"] > header, .ss3-section-header)[data-actions="mixed"] > .ss3-action-bar {
    min-height: var(--ss3-control-height);
    gap: var(--ss3-gap-heading-actions);
}
:is(.ss3-section[data-layout="section"] > header, .ss3-card[data-layout="section"] > header, .ss3-section-header)[data-actions="mixed"] > .ss3-action-bar > .ss3-field[data-control="checkbox"] {
    flex: 0 0 auto;
    margin: 0;
    white-space: nowrap;
}
:is(.ss3-section[data-layout="section"] > header, .ss3-card[data-layout="section"] > header, .ss3-section-header)[data-actions="mixed"] > .ss3-action-bar > .ss3-row-actions {
    gap: var(--ss3-gap-inline);
}

/* Native hidden removes unavailable actions and their empty group entirely. */
:is(.ss3-section[data-layout="section"] > header, .ss3-card[data-layout="section"] > header, .ss3-section-header) > .ss3-action-bar:not(:has(> :not([hidden]))) {
    display: none;
}

/* Section-heading action targets are decoupled from layout height. The visible
   24px action line participates in baseline layout; the pseudo target occupies the
   shared 40px hit area for labelled and icon-only actions without enlarging the
   heading-to-content relationship. */
:is(.ss3-section[data-layout="section"] > header, .ss3-card[data-layout="section"] > header, .ss3-section-header) > .ss3-action-bar > .ss3-icon-action {
    position: relative;
    isolation: isolate;
    height: 1.5rem;
    min-height: 1.5rem;
    padding-block: 0;
    border: 0;
    overflow: visible;
    line-height: 1.5rem;
}

:is(.ss3-section[data-layout="section"] > header, .ss3-card[data-layout="section"] > header, .ss3-section-header) > .ss3-action-bar > .ss3-icon-action::before {
    content: "";
    position: absolute;
    z-index: 0;
    border-radius: var(--ss3-radius-md);
    background: transparent;
    pointer-events: auto;
}

:is(.ss3-section[data-layout="section"] > header, .ss3-card[data-layout="section"] > header, .ss3-section-header) > .ss3-action-bar > .ss3-icon-action > * {
    position: relative;
    z-index: 1;
}

:is(.ss3-section[data-layout="section"] > header, .ss3-card[data-layout="section"] > header, .ss3-section-header) > .ss3-action-bar > .ss3-icon-action[data-label="true"]::before {
    top: calc(0rem - var(--ss3-gap-heading-wrap));
    right: 0;
    left: 0;
    height: var(--ss3-control-height);
}

:is(.ss3-section[data-layout="section"] > header, .ss3-card[data-layout="section"] > header, .ss3-section-header) > .ss3-action-bar > .ss3-icon-action:not([data-label="true"])::before {
    top: 50%;
    left: 50%;
    width: var(--ss3-control-height);
    height: var(--ss3-control-height);
    transform: translate(-50%, -50%);
}

:is(.ss3-section[data-layout="section"] > header, .ss3-card[data-layout="section"] > header, .ss3-section-header) > .ss3-action-bar > .ss3-icon-action:hover,
:is(.ss3-section[data-layout="section"] > header, .ss3-card[data-layout="section"] > header, .ss3-section-header) > .ss3-action-bar > .ss3-icon-action:focus {
    background: transparent;
}

:is(.ss3-section[data-layout="section"] > header, .ss3-card[data-layout="section"] > header, .ss3-section-header) > .ss3-action-bar > .ss3-icon-action:hover::before,
:is(.ss3-section[data-layout="section"] > header, .ss3-card[data-layout="section"] > header, .ss3-section-header) > .ss3-action-bar > .ss3-icon-action:focus::before {
    background: var(--ss3-color-action-soft);
}

:is(.ss3-section[data-layout="section"] > header, .ss3-card[data-layout="section"] > header, .ss3-section-header) > .ss3-action-bar > .ss3-icon-action.is-secondary:hover::before,
:is(.ss3-section[data-layout="section"] > header, .ss3-card[data-layout="section"] > header, .ss3-section-header) > .ss3-action-bar > .ss3-icon-action.is-secondary:focus::before {
    background: var(--ss3-color-action-secondary-soft);
}

:is(.ss3-section[data-layout="section"] > header, .ss3-card[data-layout="section"] > header, .ss3-section-header) > .ss3-action-bar > .ss3-icon-action.is-delete:hover::before,
:is(.ss3-section[data-layout="section"] > header, .ss3-card[data-layout="section"] > header, .ss3-section-header) > .ss3-action-bar > .ss3-icon-action.is-delete:focus::before,
:is(.ss3-section[data-layout="section"] > header, .ss3-card[data-layout="section"] > header, .ss3-section-header) > .ss3-action-bar > .ss3-icon-action.is-destructive:hover::before,
:is(.ss3-section[data-layout="section"] > header, .ss3-card[data-layout="section"] > header, .ss3-section-header) > .ss3-action-bar > .ss3-icon-action.is-destructive:focus::before {
    background: var(--ss3-color-action-destructive-soft);
}

:is(.ss3-section[data-layout="section"] > header, .ss3-card[data-layout="section"] > header, .ss3-section-header) > .ss3-action-bar > .ss3-icon-action:focus-visible {
    outline: 0;
}

:is(.ss3-section[data-layout="section"] > header, .ss3-card[data-layout="section"] > header, .ss3-section-header) > .ss3-action-bar > .ss3-icon-action:focus-visible::before {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

:is(.ss3-section[data-layout="section"] > header, .ss3-card[data-layout="section"] > header, .ss3-section-header) > .ss3-action-bar > .ss3-icon-action:disabled:hover::before,
:is(.ss3-section[data-layout="section"] > header, .ss3-card[data-layout="section"] > header, .ss3-section-header) > .ss3-action-bar > .ss3-icon-action:disabled:focus::before,
:is(.ss3-section[data-layout="section"] > header, .ss3-card[data-layout="section"] > header, .ss3-section-header) > .ss3-action-bar > .ss3-icon-action.is-disabled:hover::before,
:is(.ss3-section[data-layout="section"] > header, .ss3-card[data-layout="section"] > header, .ss3-section-header) > .ss3-action-bar > .ss3-icon-action.is-disabled:focus::before {
    background: transparent;
}

/* Shared read-only label/value facts. */
.ss3-fact-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--ss3-gap-row) var(--ss3-gap-column);
    margin: 0;
}

.ss3-fact-grid[data-columns="1"] {
    grid-template-columns: minmax(0, 1fr);
}

.ss3-fact-grid[data-columns="2"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ss3-fact {
    min-width: 0;
    margin: 0;
}

.ss3-fact[data-span="full"] {
    grid-column: 1 / -1;
}

/* An optional leading symbol stays with its semantic label/value fact. */
.ss3-fact[data-icon="true"] {
    position: relative;
    padding-inline-start: calc(var(--ss3-space-6) + var(--ss3-space-3));
}

.ss3-fact[data-icon="true"] > dt > i {
    position: absolute;
    inset-inline-start: 0;
    top: 0;
    width: var(--ss3-space-6);
    color: var(--ss3-color-text-muted);
    font-size: var(--ss3-font-size-section-title);
    line-height: var(--ss3-line-height-tight);
    text-align: center;
}

.ss3-fact > dt {
    margin: 0 0 var(--ss3-gap-label);
    color: var(--ss3-color-text);
    font-size: var(--ss3-font-size-label);
    font-weight: var(--ss3-font-weight-strong);
    line-height: var(--ss3-line-height-tight);
    letter-spacing: normal;
    text-transform: none;
}

.ss3-fact > dd {
    min-width: 0;
    margin: 0;
    color: var(--ss3-color-text);
    font-size: var(--ss3-font-size-data);
    font-weight: var(--ss3-font-weight-regular);
    line-height: var(--ss3-line-height-data);
    overflow-wrap: anywhere;
}

.ss3-fact > dd.ss3-muted,
.ss3-fact > dd .ss3-muted {
    color: var(--ss3-color-text-muted);
}

/* Shared phone-fact presentation keeps the number primary. A compact leading
   classification icon supplies scan context; an independent trailing indicator
   may communicate an actual lookup/number issue. */
/* Phone collections use ordinary inline flow, wrapping between atomic units. */
.ss3-phone-values {
    display: inline;
}

.ss3-phone-values > .ss3-phone-value:not(:last-child) {
    margin-inline-end: var(--ss3-space-2);
}

.ss3-phone-values .ss3-phone-number {
    white-space: nowrap;
    overflow-x: auto;
}

.ss3-phone-value {
    flex: 0 1 auto;
}

.ss3-phone-values .ss3-phone-number {
    white-space: nowrap;
    overflow-x: auto;
}

.ss3-phone-value {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    gap: var(--ss3-space-1);
    color: inherit;
    font: inherit;
    line-height: inherit;
    vertical-align: baseline;
}

.ss3-phone-value > .ss3-phone-type-icon {
    flex: 0 0 1rem;
    width: 1rem;
    color: var(--ss3-color-text-muted);
    font-size: 1rem;
    line-height: 1;
    text-align: center;
}

.ss3-phone-value > .ss3-phone-number {
    min-width: 0;
}

.ss3-phone-value > .ss3-phone-issue-icon {
    flex: 0 0 auto;
    color: var(--ss3-color-warning);
    font-size: 1rem;
    line-height: 1;
}

.ss3-phone-value > .ss3-phone-issue-icon.is-error {
    color: var(--ss3-color-error);
}

.ss3-phone-value > .ss3-phone-issue-icon.is-info {
    color: var(--ss3-color-info);
}

.ss3-section-title,
.ss3-card-title {
    margin-bottom: var(--ss3-space-3);
    font-size: var(--ss3-font-size-section-title);
    font-weight: var(--ss3-font-weight-strong);
    line-height: var(--ss3-line-height-tight);
}

.ss3-card > .ss3-toolbar > h2,
.ss3-section > .ss3-toolbar > h2,
.ss3-card > h2:first-child,
.ss3-section > h2:first-child,
.ss3-detail-panel > h2:first-child,
.ss3-child-panel > h2:first-child,
.ss3-grid-shell h2 {
    margin-top: 0;
    margin-bottom: var(--ss3-space-2);
    font-size: var(--ss3-font-size-section-title);
    font-weight: var(--ss3-font-weight-strong);
    line-height: var(--ss3-line-height-tight);
}

/* A section heading retains its role when actions share its toolbar. */
.ss3-card > .ss3-toolbar > h2,
.ss3-section > .ss3-toolbar > h2,
.ss3-section > .ss3-toolbar > .button,
.ss3-card > .ss3-toolbar > .button {
    margin-bottom: 0;
}

.ss3-card > h3,
.ss3-section > h3,
.ss3-detail-panel > h3,
.ss3-child-panel > h3 {
    margin-top: var(--ss3-space-3);
    margin-bottom: var(--ss3-space-2);
    font-size: var(--ss3-font-size-data);
    font-weight: var(--ss3-font-weight-strong);
    line-height: var(--ss3-line-height-tight);
}

.ss3-record-context {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ss3-space-1) var(--ss3-space-3);
    margin: 0;
    color: var(--ss3-color-text-muted);
    font-size: var(--ss3-font-size-supporting);
    line-height: var(--ss3-line-height-body);
}

.ss3-record-context > span + span::before {
    content: "|";
    margin-right: var(--ss3-space-3);
    color: var(--ss3-color-border-strong);
}

/* Standard Excel download identity; CSV retains the ordinary action color. */
.ss3-icon-action[data-grid-action="excel"] > i {
    color: #217346;
}

.ss3-disclosure {
    border-top: 1px solid var(--ss3-color-border);
}

.ss3-disclosure > summary {
    padding: var(--ss3-space-2) 0;
    color: var(--ss3-color-text);
    font-weight: var(--ss3-font-weight-strong);
    cursor: pointer;
}

.ss3-disclosure > summary:hover,
.ss3-disclosure > summary:focus {
    color: var(--ss3-color-link-hover);
}

.ss3-disclosure-body {
    padding: 0 0 var(--ss3-space-3);
}

/* Unboxed optional field groups retain native disclosure semantics and one
   compact target; the containing section owns following content/action spacing. */
.ss3-disclosure[data-boundary="unboxed"] { border: 0; min-width: 0; }
.ss3-disclosure[data-boundary="unboxed"] > summary {
    width: fit-content;
    max-width: 100%;
    min-height: var(--ss3-control-height);
    padding: 0;
    align-content: center;
    color: var(--ss3-color-action);
    font-weight: var(--ss3-font-weight-regular);
}
.ss3-disclosure[data-boundary="unboxed"] > .ss3-disclosure-body {
    margin-top: var(--ss3-space-2);
    padding: 0;
}

.ss3-status-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--ss3-space-1);
    min-height: 1.65rem;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    border: 1px solid var(--ss3-color-border);
    background: var(--ss3-color-surface-muted);
    color: var(--ss3-color-text-muted);
    font-size: var(--ss3-font-size-supporting);
    font-weight: var(--ss3-font-weight-strong);
    line-height: var(--ss3-line-height-tight);
}

.ss3-status-pill.is-success {
    border-color: rgb(20 108 67 / 0.28);
    background: var(--ss3-color-success-bg);
    color: var(--ss3-color-success);
}

/* Strong factual/status emphasis; geometry remains shared with ordinary pills. */
.ss3-status-pill.is-success[data-contrast="strong"] {
    flex: 0 0 auto;
    border-color: var(--ss3-color-success);
    background: var(--ss3-color-success);
    color: var(--ss3-color-primary-contrast);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.ss3-status-pill.is-error {
    border-color: rgb(168 32 32 / 0.28);
    background: var(--ss3-color-error-bg);
    color: var(--ss3-color-error);
}

.ss3-status-pill.is-info {
    border-color: rgb(36 82 122 / 0.28);
    background: var(--ss3-color-info-bg);
    color: var(--ss3-color-info);
}

.ss3-alert,
.ss3-error-summary[data-ss3-message-host="true"] {
    display: flex;
    align-items: flex-start;
    gap: var(--ss3-space-3);
    padding: var(--ss3-space-3) var(--ss3-space-4);
    border: 1px solid var(--ss3-color-border);
    border-radius: var(--ss3-radius-md);
    background: var(--ss3-color-info-bg);
    color: var(--ss3-color-info);
}

.ss3-alert[hidden],
.ss3-error-summary[hidden] {
    display: none;
}

.ss3-alert-content {
    flex: 1 1 auto;
    min-width: 0;
}

.ss3-alert-content > :first-child {
    margin-top: 0;
}

.ss3-alert-content > :last-child {
    margin-bottom: 0;
}

.ss3-alert-content ul {
    margin: 0;
    padding-left: 1.25rem;
}

.ss3-alert-content li + li {
    margin-top: var(--ss3-space-1);
}

.ss3-alert-dismiss {
    appearance: none;
    -webkit-appearance: none;
    flex: 0 0 auto;
    width: 2rem;
    height: 2rem;
    margin: 0;
    padding: 0;
    border: 1px solid transparent;
    border-radius: var(--ss3-radius-sm);
    background: transparent;
    color: currentColor;
    cursor: pointer;
    line-height: 1;
}

.ss3-alert-dismiss:hover,
.ss3-alert-dismiss:focus {
    border-color: currentColor;
    background: rgb(255 255 255 / 0.55);
}

.ss3-alert-dismiss:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 1px;
}

.ss3-alert.is-success {
    background: var(--ss3-color-success-bg);
    color: var(--ss3-color-success);
}

.ss3-alert.is-error {
    background: var(--ss3-color-error-bg);
    color: var(--ss3-color-error);
}

/* Inline status emphasis paints outside its text without changing line geometry. */
.ss3-status-marker {
    position: relative;
    isolation: isolate;
}

.ss3-status-marker::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: -0.125rem;
    border-radius: var(--ss3-radius-sm);
    background: inherit;
    pointer-events: none;
}

/* Filled warnings share one palette; component geometry remains independent. */
.ss3-status-pill.is-warning,
.ss3-alert.is-warning,
.ss3-error-summary[data-ss3-message-host="true"].is-warning,
.ss3-status-marker.is-warning {
    border-color: var(--ss3-color-warning-contrast);
    background: var(--ss3-color-warning-fill);
    color: var(--ss3-color-warning-contrast);
}

.ss3-status-pill.is-warning a:not(.button),
.ss3-alert.is-warning a:not(.button),
.ss3-error-summary[data-ss3-message-host="true"].is-warning a:not(.button),
.ss3-status-marker.is-warning a:not(.button) {
    color: inherit;
    text-decoration: underline;
}

/* Compact row/action and confirmation helpers. */
.ss3-row-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    flex-wrap: nowrap;
    white-space: nowrap;
}

.ss3-row-actions > .ss3-icon-action {
    flex: 0 0 auto;
}

/* Vendor SearchPanes actions adopt this same owner; specificity defeats its fixed35px defaults. */
.ss3-icon-action,
div.dtsp-panesContainer button.ss3-icon-action {
    appearance: none;
    -webkit-appearance: none;
    min-width: var(--ss3-control-height);
    width: var(--ss3-control-height);
    height: var(--ss3-control-height);
    padding: var(--ss3-space-2);
    margin: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: var(--ss3-radius-md);
    background: transparent;
    color: var(--ss3-color-action);
    cursor: pointer;
    line-height: 1;
    text-align: center;
    text-decoration: none;
}

.ss3-icon-action > i,
div.dtsp-panesContainer button.ss3-icon-action > i,
.ss3-icon-button > i,
.ss3-mobile-search-scope-button > i {
    flex: 0 0 auto;
    width: 1.5rem;
    font-size: 1.5rem;
    line-height: 1;
    pointer-events: none;
}

.ss3-icon-action:hover,
div.dtsp-panesContainer button.ss3-icon-action:hover,
.ss3-icon-action:focus,
div.dtsp-panesContainer button.ss3-icon-action:focus {
    background: var(--ss3-color-action-soft);
    color: var(--ss3-color-action-hover);
    outline: 0;
    text-decoration: none;
}

.ss3-icon-action:focus-visible,
div.dtsp-panesContainer button.ss3-icon-action:focus-visible {
    outline: 2px solid var(--ss3-color-action);
    outline-offset: 2px;
}

.ss3-icon-action.is-secondary,
div.dtsp-panesContainer button.ss3-icon-action.is-secondary {
    color: var(--ss3-color-action-secondary);
}

.ss3-icon-action.is-secondary:hover,
div.dtsp-panesContainer button.ss3-icon-action.is-secondary:hover,
.ss3-icon-action.is-secondary:focus,
div.dtsp-panesContainer button.ss3-icon-action.is-secondary:focus {
    background: var(--ss3-color-action-secondary-soft);
    color: var(--ss3-color-action-secondary-hover);
}

/* Toggle state changes the glyph, never the touch-area background. */
.ss3-icon-action.ss3-icon-toggle,
.ss3-icon-action.ss3-icon-toggle:is(:hover, :focus, :active),
div.dtsp-panesContainer button.ss3-icon-action.ss3-icon-toggle,
div.dtsp-panesContainer button.ss3-icon-action.ss3-icon-toggle:is(:hover, :focus, :active) {
    background: transparent;
}
:is(.ss3-section, .ss3-card)[data-layout="section"] > header > .ss3-action-bar > .ss3-icon-action.ss3-icon-toggle::before,
:is(.ss3-section, .ss3-card)[data-layout="section"] > header > .ss3-action-bar > .ss3-icon-action.ss3-icon-toggle:is(:hover, :focus, :active)::before {
    background: transparent;
}
.ss3-icon-action.ss3-icon-toggle[aria-pressed="false"] {
    color: var(--ss3-color-action-secondary);
}
.ss3-icon-action.ss3-icon-toggle[aria-pressed="true"] {
    color: var(--ss3-color-action);
}
.ss3-icon-action.ss3-icon-toggle[aria-pressed="false"]:hover,
.ss3-icon-action.ss3-icon-toggle[aria-pressed="false"]:focus {
    color: var(--ss3-color-action-secondary-hover);
}
.ss3-icon-action.ss3-icon-toggle[aria-pressed="true"]:hover,
.ss3-icon-action.ss3-icon-toggle[aria-pressed="true"]:focus {
    color: var(--ss3-color-action-hover);
}

.ss3-icon-action.is-save,
div.dtsp-panesContainer button.ss3-icon-action.is-save {
    color: var(--ss3-color-action);
}

.ss3-icon-action.is-delete,
div.dtsp-panesContainer button.ss3-icon-action.is-delete,
.ss3-icon-action.is-destructive,
div.dtsp-panesContainer button.ss3-icon-action.is-destructive {
    color: var(--ss3-color-action-destructive);
}

.ss3-icon-action.is-delete:hover,
div.dtsp-panesContainer button.ss3-icon-action.is-delete:hover,
.ss3-icon-action.is-delete:focus,
div.dtsp-panesContainer button.ss3-icon-action.is-delete:focus,
.ss3-icon-action.is-destructive:hover,
div.dtsp-panesContainer button.ss3-icon-action.is-destructive:hover,
.ss3-icon-action.is-destructive:focus,
div.dtsp-panesContainer button.ss3-icon-action.is-destructive:focus {
    background: var(--ss3-color-action-destructive-soft);
    color: var(--ss3-color-action-destructive-hover);
}

.ss3-icon-action:disabled,
div.dtsp-panesContainer button.ss3-icon-action:disabled,
.ss3-icon-action.is-disabled,
div.dtsp-panesContainer button.ss3-icon-action.is-disabled {
    color: var(--ss3-color-text-muted);
    cursor: not-allowed;
    opacity: 0.55;
}

.ss3-icon-action:disabled:hover,
div.dtsp-panesContainer button.ss3-icon-action:disabled:hover,
.ss3-icon-action:disabled:focus,
div.dtsp-panesContainer button.ss3-icon-action:disabled:focus,
.ss3-icon-action.is-disabled:hover,
div.dtsp-panesContainer button.ss3-icon-action.is-disabled:hover,
.ss3-icon-action.is-disabled:focus,
div.dtsp-panesContainer button.ss3-icon-action.is-disabled:focus {
    background: transparent;
    color: var(--ss3-color-text-muted);
}

.ss3-icon-action .show-for-sr,
div.dtsp-panesContainer button.ss3-icon-action .show-for-sr {
    position: absolute !important;
}


/* Single-record designation: selected status replaces its action in the same slot.
   This span is informational, never a disabled button or keyboard stop. */
.ss3-designation-status {
    display: inline-flex;
    flex: 0 0 var(--ss3-control-height);
    align-items: center;
    justify-content: center;
    width: var(--ss3-control-height);
    height: var(--ss3-control-height);
    padding: var(--ss3-space-2);
    color: var(--ss3-color-success);
    cursor: default;
    line-height: 1;
}
.ss3-designation-status > i {
    flex: 0 0 auto;
    width: 1.5rem;
    font-size: 1.5rem;
    line-height: 1;
}

/* Labelled compact actions: navigation and collection commands, not primary CTAs. */
.ss3-icon-action[data-label="true"],
div.dtsp-panesContainer button.ss3-icon-action[data-label="true"] {
    width: auto;
    padding: 0 var(--ss3-space-3);
    gap: var(--ss3-space-2);
    font-size: var(--ss3-font-size-control);
    font-weight: var(--ss3-font-weight-regular);
    line-height: var(--ss3-line-height-tight);
    white-space: nowrap;
}

.ss3-icon-action[data-label="true"] > i,
div.dtsp-panesContainer button.ss3-icon-action[data-label="true"] > i {
    --fa-width: auto;
    flex: 0 0 auto;
    width: var(--fa-width);
}

/* Optional labelled disclosure reuses shared icon-action target and focus geometry.
   Its compact chevron is a disclosure affordance rather than a command icon. */
.ss3-icon-action[data-label="true"][data-disclosure="true"] {
    gap: var(--ss3-space-1);
    padding-inline: var(--ss3-space-1);
    font-size: var(--ss3-font-size-supporting);
}
.ss3-icon-action[data-label="true"][data-disclosure="true"] > i {
    font-size: 0.75rem;
}
.ss3-icon-action[data-label="true"][data-disclosure="true"][aria-expanded="true"] > i {
    transform: rotate(180deg);
}
.ss3-icon-action[data-label="true"][data-disclosure="true"].is-success {
    color: var(--ss3-color-success);
}
.ss3-icon-action[data-label="true"][data-disclosure="true"].is-warning {
    color: var(--ss3-color-warning);
}
.ss3-icon-action[data-label="true"][data-disclosure="true"].is-error {
    color: var(--ss3-color-error);
}
.ss3-icon-action[data-label="true"][data-disclosure="true"]:disabled {
    color: var(--ss3-color-text-muted);
    opacity: 1;
}

/* Back/parent navigation retains its start context; related destinations are
   composed beside the identity in the page header. */
.ss3-toolbar[data-layout="navigation"] {
    align-items: center;
    gap: var(--ss3-space-3);
    margin-bottom: var(--ss3-space-3);
}

.ss3-toolbar[data-layout="navigation"] > [data-position="end"] {
    margin-inline-start: auto;
}

.ss3-toolbar[data-layout="navigation"] > .ss3-icon-action:first-child {
    padding-inline-start: 0;
}

.ss3-toolbar[data-layout="navigation"] > .ss3-icon-action[data-position="end"] {
    padding-inline-end: 0;
}


/* Related navigation shares the identity row and wraps as a complete toolbar.
   The summary occupies the next row; ordinary 40px navigation targets remain. */
.ss3-page-header[data-layout="navigation"] {
    align-items: center;
}

.ss3-page-header[data-layout="navigation"] > :first-child {
    flex: 0 1 auto;
    max-width: 100%;
    overflow-wrap: anywhere;
}

.ss3-page-header[data-layout="navigation"] > .ss3-toolbar[data-layout="navigation"] {
    min-width: 0;
    max-width: 100%;
    margin: 0;
    margin-inline-start: auto;
}

.ss3-page-header[data-layout="navigation"] > .ss3-page-header-summary {
    flex: 0 0 100%;
    max-width: 100%;
    margin: 0;
}

.ss3-confirm-inline {
    margin: 0.5rem 0 1rem;
    padding: var(--ss3-space-3);
    border: 1px solid var(--ss3-color-border);
    border-radius: var(--ss3-radius-md);
    background: var(--ss3-color-surface);
    box-shadow: var(--ss3-shadow-sm);
}

.ss3-confirm-text {
    margin-bottom: var(--ss3-space-2);
    color: var(--ss3-color-text);
    font-size: var(--ss3-font-size-supporting);
    line-height: var(--ss3-line-height-body);
}

.ss3-confirm-actions {
    display: flex;
    align-items: center;
    gap: var(--ss3-space-2);
    flex-wrap: wrap;
}

.ss3-confirm-actions .button {
    margin: 0;
}

.ss3-edit-drawer,
.ss3-modal,
.ss3-confirm {
    background: var(--ss3-color-surface);
    border: 1px solid var(--ss3-color-border);
    box-shadow: var(--ss3-shadow-md);
}

.ss3-edit-drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: var(--ss3-z-drawer);
    width: min(34rem, 100vw);
    padding: var(--ss3-space-5);
    overflow-y: auto;
}


.ss3-task-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ss3-space-3);
    padding: var(--ss3-space-3) var(--ss3-space-4);
    background: var(--ss3-task-header-bg);
    color: var(--ss3-task-header-text);
}

.ss3-task-header > :first-child {
    min-width: 0;
    flex: 1 1 auto;
}

.ss3-task-header h1,
.ss3-task-header h2 {
    margin: 0;
    color: var(--ss3-task-header-text);
    font-size: var(--ss3-font-size-section-title);
    font-weight: var(--ss3-font-weight-strong);
    line-height: var(--ss3-line-height-tight);
}

.ss3-task-header p {
    margin: var(--ss3-space-1) 0 0;
    color: var(--ss3-task-header-text);
    font-size: var(--ss3-font-size-supporting);
    line-height: var(--ss3-line-height-tight);
    opacity: 0.88;
}

.ss3-task-header > .ss3-action-bar {
    justify-content: flex-end;
    flex: 0 0 auto;
    flex-wrap: nowrap;
    margin: 0;
    padding: 0;
    border: 0;
}

.ss3-task-header > .ss3-action-bar .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 5rem;
    min-height: var(--ss3-control-height);
    margin: 0;
    border-radius: var(--ss3-radius-md);
    font-size: var(--ss3-font-size-control);
    font-weight: var(--ss3-font-weight-strong);
    line-height: var(--ss3-line-height-tight);
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
}

.ss3-task-header > .ss3-action-bar .button.secondary {
    border-color: var(--ss3-task-header-secondary-bg);
    background: var(--ss3-task-header-secondary-bg);
    color: var(--ss3-task-header-secondary-text);
}

.ss3-task-header > .ss3-action-bar .button.secondary:hover,
.ss3-task-header > .ss3-action-bar .button.secondary:focus-visible {
    border-color: var(--ss3-task-header-secondary-bg);
    background: var(--ss3-task-header-secondary-bg);
    color: var(--ss3-task-header-secondary-text);
}

.ss3-task-header > .ss3-action-bar .button:not(.secondary) {
    border-color: var(--ss3-task-header-primary-bg);
    background: var(--ss3-task-header-primary-bg);
    color: var(--ss3-task-header-primary-text);
}

.ss3-task-header > .ss3-action-bar .button:not(.secondary):hover,
.ss3-task-header > .ss3-action-bar .button:not(.secondary):focus-visible {
    color: var(--ss3-task-header-primary-text);
}

.ss3-task-header > .ss3-action-bar .button:disabled {
    cursor: not-allowed;
    opacity: 0.55;
}

.ss3-edit-drawer {
    display: flex;
    padding: 0;
    overflow: hidden;
    flex-direction: column;
}

.ss3-edit-drawer[hidden] {
    display: none;
}

.ss3-edit-drawer > .ss3-task-header {
    position: sticky;
    top: 0;
    z-index: 1;
    flex: 0 0 auto;
}

.ss3-edit-drawer > .ss3-task-header + * {
    min-height: 0;
    padding: var(--ss3-space-4);
    overflow-y: auto;
    flex: 1 1 auto;
}

.ss3-confirm {
    width: min(30rem, calc(100vw - (2 * var(--ss3-space-4))));
    max-height: calc(100vh - (2 * var(--ss3-space-4)));
    padding: 0;
    border-radius: var(--ss3-radius-md);
    color: var(--ss3-color-text);
}

.ss3-confirm::backdrop {
    background: rgb(15 23 42 / 0.55);
}

.ss3-confirm > div {
    padding: var(--ss3-space-5);
}

.ss3-confirm h2 {
    margin: 0 0 var(--ss3-space-3);
    font-size: var(--ss3-font-size-section-title);
    line-height: var(--ss3-line-height-tight);
}

.ss3-confirm p {
    margin: 0 0 var(--ss3-space-4);
}

.ss3-confirm .ss3-confirm-actions {
    justify-content: flex-end;
}

@media screen and (max-width: 39.9375em) {
    .ss3-edit-drawer {
        left: 0;
        width: 100vw;
    }

    .ss3-task-header {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .ss3-task-header > :first-child {
        flex: 1 1 12rem;
    }

    .ss3-task-header > .ss3-action-bar {
        margin-left: auto;
    }
}

.ss3-activity-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.ss3-activity-list > li {
    padding: 0;
}

/* Opt in for a compact name, metadata and action row. Explicit gaps work for
   server markup and dynamically inserted items alike; prose rows stay unchanged. */
.ss3-activity-list > li[data-layout="inline"]:not([hidden]) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ss3-gap-inline);
    overflow-wrap: anywhere;
}

.ss3-activity-list > li[data-layout="inline"] > :not(.ss3-row-actions) {
    min-width: 0;
}

.ss3-activity-list > li[data-layout="inline"] > .ss3-row-actions {
    align-self: center;
}

/* Collection-item boundaries are subordinate to peer-section boundaries. Apply
   one light inset rule only between visible items, with 8px on each side. The
   first and last visible items add no outer allowance or trailing separator. */
.ss3-activity-list > li:not([hidden]) ~ li:not([hidden]) {
    margin-top: var(--ss3-space-2);
    padding-top: var(--ss3-space-2);
    border-top: 1px solid var(--ss3-color-divider-subtle);
}

/* Activity actions use the same 40px target; the visible 24px line owns layout. */
.ss3-activity-list .ss3-row-actions > .ss3-icon-action:not([data-label="true"]) {
    position: relative;
    isolation: isolate;
    height: 1.5rem;
    min-height: 1.5rem;
    padding-block: 0;
    border: 0;
    overflow: visible;
    line-height: 1.5rem;
}

.ss3-activity-list .ss3-row-actions > .ss3-icon-action:not([data-label="true"])::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 0;
    width: var(--ss3-control-height);
    height: var(--ss3-control-height);
    border-radius: var(--ss3-radius-md);
    background: transparent;
    transform: translate(-50%, -50%);
    pointer-events: auto;
}

.ss3-activity-list .ss3-row-actions > .ss3-icon-action:not([data-label="true"]) > * {
    position: relative;
    z-index: 1;
}

.ss3-activity-list .ss3-row-actions > .ss3-icon-action:not([data-label="true"]):hover,
.ss3-activity-list .ss3-row-actions > .ss3-icon-action:not([data-label="true"]):focus {
    background: transparent;
}

.ss3-activity-list .ss3-row-actions > .ss3-icon-action:not([data-label="true"]):hover::before,
.ss3-activity-list .ss3-row-actions > .ss3-icon-action:not([data-label="true"]):focus::before {
    background: var(--ss3-color-action-soft);
}

.ss3-activity-list .ss3-row-actions > .ss3-icon-action.is-delete:hover::before,
.ss3-activity-list .ss3-row-actions > .ss3-icon-action.is-delete:focus::before,
.ss3-activity-list .ss3-row-actions > .ss3-icon-action.is-destructive:hover::before,
.ss3-activity-list .ss3-row-actions > .ss3-icon-action.is-destructive:focus::before {
    background: var(--ss3-color-action-destructive-soft);
}

.ss3-activity-list .ss3-row-actions > .ss3-icon-action:not([data-label="true"]):focus-visible {
    outline: 0;
}

.ss3-activity-list .ss3-row-actions > .ss3-icon-action:not([data-label="true"]):focus-visible::before {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

.ss3-search-panel {
    padding: var(--ss3-space-4);
    border: 1px solid var(--ss3-color-border);
    border-radius: var(--ss3-radius-md);
    background: var(--ss3-color-surface-muted);
}


.ss3-lookup-option {
    display: block;
    min-width: 0;
}

.ss3-lookup-option > strong,
.ss3-lookup-option > small {
    display: block;
}

.ss3-lookup-option > strong {
    color: var(--ss3-color-text);
    font-size: var(--ss3-font-size-body);
    font-weight: var(--ss3-font-weight-medium);
    line-height: var(--ss3-line-height-data);
}

.ss3-lookup-option > small {
    margin-top: var(--ss3-space-1);
    color: var(--ss3-color-text-muted);
    font-size: var(--ss3-font-size-supporting);
    line-height: var(--ss3-line-height-tight);
}

.ss3-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--ss3-space-1);
    padding: 0.25rem 0.55rem;
    border: 1px solid var(--ss3-color-border);
    border-radius: 999px;
    background: var(--ss3-color-surface);
    color: var(--ss3-color-text-muted);
    font-size: var(--ss3-font-size-supporting);
    line-height: var(--ss3-line-height-tight);
}

@media screen and (max-width: 22rem) {
    .ss3-fact-grid:not([data-columns="2"]) {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media screen and (max-width: 39.9375em) {
    .ss3-fact-grid[data-stack="small"] {
        grid-template-columns: minmax(0, 1fr);
    }

    .ss3-card,
    .ss3-detail-panel,
    .ss3-child-panel {
        padding: var(--ss3-space-3);
    }

    .ss3-record-context {
        display: grid;
        gap: var(--ss3-space-1);
    }

    .ss3-record-context > span + span::before {
        content: none;
        margin-right: 0;
    }
}

/* Native hidden state wins over component display (toolbars, buttons and editors). */
.ss3-save-state[hidden],
.ss3-section[hidden],
.ss3-section [hidden] {
    display: none !important;
}

.ss3-status-pill[hidden] { display: none; }

/* SearchPanes narrow mode declares25% !important; shared icon targets stay square. */
div.dtsp-panesContainer div.dtsp-narrow div.dtsp-subRow2 button.ss3-icon-action {
    width: var(--ss3-control-height) !important;
}

/* Preserve the shared disabled cursor over the vendor's important default. */
div.dtsp-panesContainer button.ss3-icon-action:disabled { cursor: not-allowed !important; }

/* Responsive Field Groups: opt-in content widths shared by display and edit.
   Flex wrapping follows the actual containing area, including nested children. */
.ss3-field-group,
.ss3-field-pair {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--ss3-gap-row) var(--ss3-gap-column);
    min-width: 0;
    margin: 0;
}
.ss3-field-group > *,
.ss3-field-pair > * {
    --ss3-field-basis: 14rem;
    --ss3-field-limit: 24rem;
    --ss3-field-growth: 1;
}
:is(.ss3-field-group, .ss3-field-pair) > [data-field-size="compact"] {
    --ss3-field-basis: 8.5rem;
    --ss3-field-limit: 14rem;
}
:is(.ss3-field-group, .ss3-field-pair) > [data-field-size="wide"] {
    --ss3-field-basis: 20rem;
    --ss3-field-limit: 44rem;
    --ss3-field-growth: 2;
}
:is(.ss3-field-group, .ss3-field-pair) > :is(.ss3-field, .ss3-fact) {
    flex: var(--ss3-field-growth) 1 var(--ss3-field-basis);
    min-inline-size: min(100%, var(--ss3-field-basis));
    max-inline-size: min(100%, var(--ss3-field-limit));
    margin: 0;
}
/* Short choice controls can retain their natural caption/target width without
   reserving the compact text-input basis or changing other field defaults. */
:is(.ss3-field-group, .ss3-field-pair) > :is(.ss3-field, .ss3-fact)[data-field-size="natural"] {
    flex: 0 0 auto;
    min-inline-size: 0;
    max-inline-size: 100%;
}
.ss3-field-group > .ss3-field-pair {
    flex: 2 1 calc(2 * var(--ss3-field-basis) + var(--ss3-gap-column));
    min-inline-size: min(100%, calc(2 * var(--ss3-field-basis) + var(--ss3-gap-column)));
    max-inline-size: min(100%, calc(2 * var(--ss3-field-limit) + var(--ss3-gap-column)));
}
:is(.ss3-field-group, .ss3-field-pair) > [data-field-size="long"] {
    flex: 1 1 100%;
    min-inline-size: 0;
    max-inline-size: 100%;
}
.ss3-field-group > :is(.ss3-error-summary, .ss3-alert, .ss3-help, .ss3-action-bar) {
    flex: 0 0 100%;
    min-width: 0;
}
.ss3-field-group > .button {
    align-self: flex-end;
    margin: 0;
}
.ss3-fact[data-field-size="long"] > dd {
    max-inline-size: 76ch;
    white-space: pre-wrap;
}
.ss3-field-group[hidden],
.ss3-field-pair[hidden],
.ss3-field-group > [hidden],
.ss3-field-pair > [hidden] {
    display: none;
}

/* Compact Summary Metrics: natural-width, atomic label/value pairs. */
.ss3-summary-metrics {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--ss3-gap-row) var(--ss3-gap-column);
    min-width: 0;
    margin: 0;
}
.ss3-summary-metrics > .ss3-fact {
    display: flex;
    align-items: baseline;
    gap: var(--ss3-gap-inline);
    max-inline-size: 100%;
}
.ss3-summary-metrics > .ss3-fact > dt,
.ss3-summary-metrics > .ss3-fact > dd {
    min-width: 0;
    margin: 0;
    font-size: var(--ss3-font-size-data);
    line-height: var(--ss3-line-height-data);
    overflow-wrap: anywhere;
}
.ss3-summary-metrics > .ss3-fact > dd {
    font-variant-numeric: tabular-nums;
}
.ss3-summary-metrics[hidden] {
    display: none;
}

/* Technical content uses the whole field; prose keeps its readable line length. */
.ss3-fact[data-field-content="code"] > dd { max-inline-size:none; inline-size:100%; }
.ss3-fact[data-field-content="code"] > dd > pre { margin:0; max-inline-size:100%; white-space:pre-wrap; overflow-wrap:anywhere; }

/* Collapsed peer sections: one title/summary disclosure and separate end actions.
   Compact visible heading line; transparent targets retain the shared40px hit area. */
header.ss3-section-header[data-disclosure="true"] {
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: var(--ss3-gap-inline);
    border-top: 1px solid var(--ss3-color-structure);
    padding-top: var(--ss3-gap-heading);
}
header.ss3-section-header[data-disclosure="true"] > :is(h2,h3) { flex: 1 1 auto; }
.ss3-section-toggle {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: minmax(0,auto) minmax(0,1fr) var(--ss3-control-height);
    grid-template-rows: minmax(1.5rem,auto);
    align-items: start;
    gap: var(--ss3-gap-heading-actions);
    width: 100%; min-width: 0; min-height: 1.5rem;
    padding: 0; margin: 0; border: 0; background: transparent;
    color: var(--ss3-color-structure); font: inherit; text-align: left; cursor: pointer;
}
.ss3-section-toggle::before {
    content: "";
    position: absolute;
    z-index: 0;
    top: 50%;
    inset-inline: 0;
    height: 100%;
    min-height: var(--ss3-control-height);
    transform: translateY(-50%);
    border-radius: var(--ss3-radius-md);
    background: transparent;
    pointer-events: auto;
}
.ss3-section-toggle > * { position: relative; z-index: 1; }
.ss3-section-toggle > [data-section-summary] {
    min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    color: var(--ss3-color-text-muted); font-size: var(--ss3-font-size-sm,.875rem);
    font-weight: var(--ss3-font-weight-regular); line-height: var(--ss3-line-height-normal,1.5);
}
.ss3-section-toggle > .ss3-section-chevron {
    grid-column: 3; grid-row: 1; justify-self: center; align-self: start; font-size: 1rem;
    display: flex; align-items: center; justify-content: center; height: 1.5rem;
    color: var(--ss3-color-link);
}
.ss3-section-toggle[aria-expanded="true"] > .ss3-section-chevron { transform: rotate(180deg); }
.ss3-section-toggle:is(:hover,:focus-visible)::before { background: var(--ss3-color-surface-hover,#f8fafc); }
.ss3-section-toggle:focus-visible { outline: 0; }
.ss3-section-toggle:focus-visible::before { outline: 2px solid var(--ss3-color-link); outline-offset: 2px; }
.ss3-section-toggle:disabled { cursor: default; }
header.ss3-section-header[data-disclosure="true"] > .ss3-action-bar > .ss3-icon-action {
    width: var(--ss3-control-height); padding: 0;
}
@media screen and (max-width: 39.99875em) {
    .ss3-section-toggle { grid-template-columns: minmax(0,1fr) var(--ss3-control-height); gap: var(--ss3-gap-label) var(--ss3-gap-inline); }
    .ss3-section-toggle:has(> [data-section-summary]:not([hidden])) { grid-template-rows: minmax(1.5rem,auto) auto; }
    .ss3-section-toggle > .ss3-section-chevron { grid-column: 2; }
    .ss3-section-toggle > [data-section-summary] { grid-column: 1 / -1; grid-row: 2; }
}


.ss3-section-static { display:flex; align-items:flex-start; min-height:1.5rem; }
/* Optional summary content is a full-width sibling beneath a disclosure header. */
.ss3-section-summary { margin-top:var(--ss3-gap-heading); min-width:0; }
header.ss3-section-header[data-disclosure="true"][data-summary="below"] .ss3-section-toggle { grid-template-columns:minmax(0,1fr) var(--ss3-control-height); grid-template-rows:minmax(1.5rem,auto); }
header.ss3-section-header[data-disclosure="true"][data-summary="below"] .ss3-section-chevron { grid-column:2; }

/* Opt-in record identity: icon-only Back shares the first title line. */
.ss3-page-identity {
    display:flex;
    flex:1 1 auto;
    align-items:flex-start;
    gap:var(--ss3-gap-inline);
    min-width:0;
}
.ss3-page-identity > :is(h1,h2) { flex:1 1 auto; min-width:0; overflow-wrap:anywhere; }
.ss3-page-back {
    position:relative;
    display:flex;
    flex:0 0 auto;
    align-items:center;
    justify-content:flex-start;
    inline-size:calc(var(--ss3-control-height) - var(--ss3-gap-inline) - var(--ss3-gap-inline));
    block-size:1.2em;
    margin:0;
    padding:0;
    border:0;
    background:transparent;
    color:var(--ss3-color-link);
    font-size:var(--ss3-font-size-page-title);
    line-height:var(--ss3-line-height-tight);
    text-decoration:none;
}
.ss3-page-back > i { display:block; inline-size:auto; width:auto; text-align:left; font-size:inherit; line-height:1; }
.ss3-page-back::before {
    content:"";
    position:absolute;
    inset-inline-start:calc(0rem - var(--ss3-gap-inline));
    top:50%;
    inline-size:var(--ss3-control-height);
    block-size:max(100%, var(--ss3-control-height));
    transform:translateY(-50%);
}
.ss3-page-back:focus-visible { outline:none; }
.ss3-page-back:focus-visible::before { outline:2px solid var(--ss3-color-link); outline-offset:-2px; border-radius:var(--ss3-radius-md); }
.ss3-page-back[hidden] { display:none; }