:root {
    --connect-border-radius: 14px;
    --connect-border-radius-large: 28px;
    --connect-max-width: 1200px;
    /* Narrower than a leader dashboard on purpose — a personal plan is a reading column, and the
       width is what tells the two apart at a glance. Sized so four stat tiles still fit one row. */
    --personal-max-width: 960px;
    --nav-max-width: 1200px;
    --bottom-nav-height: 56px;
    --icon-button-length: 2rem;
    --content-max-width: calc(var(--nav-max-width) / 2);
}

.content-max-width {
    max-width: var(--content-max-width);
}

/* Content for assistive technology only: kept in the accessibility tree and out of the
   visual layout. Use it to name a control an icon alone cannot, or to state a value the
   design conveys purely through colour or position. */
.tc-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Skip link: off-screen until focused, then pinned to the top of the viewport. */
.tc-skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 10000;
    padding: 12px 20px;
    background: var(--connect-colors-menu-background);
    color: var(--connect-colors-high-emphasis);
    border: 2px solid var(--connect-colors-primary);
    border-radius: 0 0 var(--connect-border-radius) 0;
    text-decoration: none;
    font-weight: 600;
}

.tc-skip-link:focus {
    left: 0;
}

/* Elements made operable with role="button" get no focus ring from the browser the way a real
   button does, so keyboard users would have no idea where they are (WCAG 2.4.7). */
[role="button"][tabindex]:focus-visible {
    outline: 2px solid var(--connect-colors-primary);
    outline-offset: 2px;
    border-radius: 4px;
}

/* The brand colour does two jobs with opposite contrast requirements. Primary is the fill —
   dark enough to carry a white label. Where it is the ink instead, MudBlazor still reaches for
   --mud-palette-primary, which would be unreadable on a dark surface, so text and icon usages
   are redirected to the lightened variant. Fills are untouched: they set background, not color. */
.mud-primary-text,
.mud-typography.mud-primary-text,
a.mud-link.mud-primary-text,
.mud-icon-root.mud-primary-text,
.mud-button-text-primary,
.mud-icon-button.mud-primary-text {
    color: var(--connect-colors-primary-text) !important;
}