:root {
    /* Shape roles: nested corners derive from their parent and inset. */
    --connect-border-radius-extra-small: 4px;
    --connect-border-radius-small: 8px;
    --connect-border-radius-medium: 12px;
    --connect-border-radius: 16px;
    --connect-border-radius-large: 28px;
    --connect-border-radius-pill: 999px;
    --connect-border-radius-circle: 50%;
    /* Match MudBlazor's 4px spacing steps. Layouts own gaps; surfaces own padding. */
    --connect-space-1: 4px;
    --connect-space-2: 8px;
    --connect-space-3: 12px;
    --connect-space-4: 16px;
    --connect-space-5: 20px;
    --connect-space-6: 24px;
    --connect-space-8: 32px;
    --connect-space-12: 48px;
    --connect-touch-target: 48px;
    --connect-control-min-size: 0px;
    --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);
    --desktop-list-width: 1040px;
}

/* A list-heavy page opts in with a .desktop-list-width element; everything in the layout that reads
   --content-max-width (TCLayout's column, TCPaper, TCCard) widens together. Dialogs render outside
   .mud-layout and keep their sizes. It goes with the sidebar, so below its breakpoint, or with the new look
   turned off, nothing changes. */
@media (min-width: 960px) {
    body:has(.side-nav) .mud-layout:has(.desktop-list-width) {
        --content-max-width: var(--desktop-list-width);
    }
}

/* Phones, tablets and narrow layouts. A touchscreen laptop driven by its trackpad or mouse keeps desktop sizes:
   any-pointer would match it for the touchscreen alone. */
@media (pointer: coarse), (max-width: 600px) {
    :root {
        --connect-control-min-size: var(--connect-touch-target);
        --icon-button-length: var(--connect-touch-target);
    }

    /* A switch's thumb is an icon button too, but MudBlazor sizes it to the 38px track and pins it
       to the track's top, so a taller minimum pushes the thumb below the track. */
    .mud-button-root.mud-icon-button:not(.mud-switch-base) {
        min-width: var(--connect-touch-target);
        min-height: var(--connect-touch-target);
    }

    .mud-button-root.mud-button {
        min-height: var(--connect-touch-target);
    }

    /* A calendar day is an icon button too. At the full touch size seven of them (52px with their margins) are wider
       than the 310px calendar, so each row wrapped at five and the rest of the month fell below the popover. 40px is
       the largest that fits seven across, and the weekday labels follow it so the columns stay aligned. */
    .mud-picker-calendar .mud-day.mud-icon-button {
        width: 40px;
        height: 40px;
        min-width: 40px;
        min-height: 40px;
    }

    .mud-picker-calendar-header-day .mud-day-label {
        width: 40px;
    }
}

.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: var(--connect-space-3) var(--connect-space-5);
    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;
}

/* Preserve each component's shape while adding the focus ring custom buttons need. */
[role="button"][tabindex]:focus-visible {
    outline: 2px solid var(--connect-colors-primary);
    outline-offset: 2px;
}

/* The same for the other roles keyboardActivation.js operates. :where() holds this just above the
   global :focus reset, so a component that draws its own ring for these (Smiles, the theme picker)
   still wins. The element's own corner radius is kept: these are often round or pill-shaped. */
:where([role="switch"], [role="radio"], [role="checkbox"], [role="tab"], [role="menuitem"], [role="option"])[tabindex]:focus-visible {
    outline: 2px solid var(--connect-colors-primary);
    outline-offset: 2px;
}

/* 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;
}