/* Shared control geometry: Final presentation p.192 and P1 Final Reveal p.75.
   LineSpacing 0.75–2 gives 41–56px at the default root font size. */
:root, .portal-control {
    --portal-control-height: calc(2.75rem + (var(--portal-line-spacing, 1) - 1) * .75rem);
    --portal-control-icon-size: 1.25rem;
}

:is(button, a, label, span).portal-control:is(.portal-button, .portal-button-static, .portal-textbox) {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    box-sizing: border-box;
    block-size: var(--portal-control-height);
    min-block-size: var(--portal-control-height);
    padding: 0 .875rem;
    border-width: 1px;
    border-style: solid;
    border-radius: 999px;
    font: inherit;
    line-height: 1.25;
    vertical-align: middle;
}

/* Non-interactive current-page markers use the same light button geometry. */
span.portal-control.portal-button-static {
    justify-content: center;
    inline-size: max-content;
    max-inline-size: 100%;
    min-inline-size: var(--portal-control-height);
    background: var(--surface, #fff);
    color: var(--tone-182b34, #182b34);
    border-color: var(--portal-control-light-border, var(--tone-dfe7ea, #dfe7ea));
    white-space: nowrap;
    font-weight: inherit;
}
.portal-button-static .portal-button-icon {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    inline-size: var(--portal-control-icon-size);
    block-size: var(--portal-control-icon-size);
}
.portal-button-static .portal-button-label { flex: none; }
.portal-button-static:has(.breadcrumb-current-text.breadcrumb-text-collapsed) {
    inline-size: var(--portal-control-height);
    padding: 0;
    gap: 0;
}

.portal-control:focus-visible,
.portal-textbox:has(> :is(input, textarea, select):focus-visible) {
    outline: 2px solid var(--brand-focus, #14b8a6);
    outline-offset: 3px;
}