/* Self-hosted Lexend and Inter fonts — GDPR-compliant, no external requests */
@font-face {
    font-family: 'Lexend';
    src: url('/fonts/Lexend-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Lexend';
    src: url('/fonts/Lexend-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Lexend';
    src: url('/fonts/Lexend-SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Inter';
    src: url('/fonts/Inter-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Inter';
    src: url('/fonts/Inter-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Inter';
    src: url('/fonts/Inter-SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

:root {
    --font-family-primary: 'Lexend', 'Inter', system-ui, sans-serif;
}

html, body {
    font-family: var(--font-family-primary);
    margin: 0;
    padding: 0;
    background-color: var(--color-background);
    color: var(--color-text-primary);
}

*, *::before, *::after {
    box-sizing: border-box;
}

/* ==========================================================================
   SetFair Base Typography — Issue #157
   Lexend font family; 16px minimum body text; WCAG AA accessible.
   ========================================================================== */

/* Headings */
h1, .h1 {
    font-size: var(--font-size-h1, 32px);
    font-weight: var(--font-weight-semibold, 600);
    line-height: var(--line-height-tight, 1.2);
    letter-spacing: var(--letter-spacing-tight, -0.02em);
    margin-top: 0;
    margin-bottom: 16px;
}

h2, .h2 {
    font-size: var(--font-size-h2, 24px);
    font-weight: var(--font-weight-semibold, 600);
    line-height: var(--line-height-tight, 1.2);
    letter-spacing: var(--letter-spacing-tight, -0.02em);
    margin-top: 24px;
    margin-bottom: 12px;
}

h3, .h3 {
    font-size: var(--font-size-h3, 20px);
    font-weight: var(--font-weight-medium, 500);
    line-height: var(--line-height-normal, 1.5);
    letter-spacing: var(--letter-spacing-normal, 0);
    margin-top: 20px;
    margin-bottom: 8px;
}

/* Paragraphs — scope to content areas only for 70ch optimal line length */
.content-prose p, .article-body p {
    font-size: var(--font-size-body, 16px);
    font-weight: var(--font-weight-regular, 400);
    line-height: var(--line-height-normal, 1.5);
    margin-top: 0;
    margin-bottom: 16px;
    max-width: 70ch;
}

p {
    font-size: var(--font-size-body, 16px);
    font-weight: var(--font-weight-regular, 400);
    line-height: var(--line-height-normal, 1.5);
    margin-top: 0;
    margin-bottom: 16px;
}

/* Small / caption text */
small, .small {
    font-size: var(--font-size-small, 14px);
    font-weight: var(--font-weight-regular, 400);
    line-height: var(--line-height-normal, 1.5);
}

/* Emphasis */
strong, b {
    font-weight: var(--font-weight-semibold, 600);
}

/* Links */
a {
    color: var(--color-primary-light, #4A6FA5);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

a:hover {
    color: var(--color-link-hover, #3A5F8A);
    text-decoration-thickness: 2px;
}

/* MudBlazor MudLink — brand link colour */
.mud-link,
.mud-link.mud-link-underline-hover,
.mud-link.mud-link-underline-always,
.mud-link.mud-primary-text {
    color: var(--color-primary-light, #4A6FA5) !important;
    cursor: pointer;
}

.mud-link:hover,
.mud-link.mud-link-underline-always:hover,
.mud-link.mud-primary-text:hover {
    color: var(--color-link-hover, #3A5F8A) !important;
    text-decoration-thickness: 2px;
}

a:focus {
    outline: 2px solid var(--color-primary-light);
    outline-offset: 2px;
    border-radius: 2px;
}

a, .btn-link {
    color: var(--color-primary-light);
}

.btn-primary {
    color: #fff;
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}

.btn-primary:hover {
    background-color: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem var(--color-primary);
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid var(--color-success);
}

.invalid {
    outline: 1px solid var(--color-error);
}

.validation-message {
    color: var(--color-error);
}

/* Text utility classes for success/error states */
.text-success {
    color: var(--color-success);
}

/**
 * .text-error - Use for error messages and validation failures ONLY
 * Color: Signal Red (#C53030) — WCAG AA compliant
 * Per CLAUDE.md: "Text should never be styled red unless it is an error message"
 * DO NOT use for non-error semantic content
 */
.text-error {
    color: var(--color-error);
}

/* Secondary/muted text — replaces Color.Secondary on MudText */
.text-secondary {
    color: var(--color-text-secondary);
}

/**
 * Secondary text - accessible grey for non-semantic secondary content
 * !important is required to override MudBlazor's Color="Color.Secondary" inline styles
 * which would otherwise apply a lower-contrast color that fails WCAG AA requirements.
 * This ensures secondary text maintains accessible contrast ratio (4.5:1 minimum).
 */
.mud-secondary-text {
    color: var(--color-secondary-text) !important;
}

/* Registration form - narrower width for better form presentation */
.page-content-width-narrow {
    max-width: 550px;
    width: 100%;
}

/* Tips/guidance list styling */
.tips-list {
    margin: 0;
    padding-left: 20px;
}

.register-error-list {
    margin: 0;
    padding-left: 20px;
}

.register-checkbox-row .mud-checkbox {
    padding-top: 0;
}

.register-checkbox-row .mud-button-root {
    align-self: flex-start;
}

/* Password strength indicator component styles */
.password-strength-label {
    font-weight: 500;
    min-width: 60px;
}

.password-guidelines-title {
    font-weight: 500;
}

.password-requirements {
    font-size: 0.75rem;
}

.password-requirements .requirement-met {
    color: var(--color-success);
}

.password-requirements .requirement-unmet {
    color: var(--color-secondary-text);
    opacity: 0.7;
}

.password-optional-hint {
    font-style: italic;
    color: var(--color-secondary-text);
    opacity: 0.7;
}

.password-strength-alert {
    font-size: 0.875rem;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

.blazor-error-boundary::after {
    content: "An error has occurred."
}

.darker-border-checkbox.form-check-input {
    border-color: var(--color-border-default);
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* ===========================================
   RESPONSIVE DESIGN SYSTEM
   =========================================== */

:root {
    /* =====================================================
       SetFair Typography Scale — Lexend font family
       Optimised for 50+ demographic. Minimum 16px body text.
       ===================================================== */

    /* Font sizes */
    --font-size-h1:    32px;  /* Page titles */
    --font-size-h2:    24px;  /* Section headings */
    --font-size-h3:    20px;  /* Subsections, card titles */
    --font-size-body:  16px;  /* Body text, forms — WCAG minimum */
    --font-size-small: 14px;  /* Captions, hints, metadata */

    /* Font weights */
    --font-weight-regular:  400;
    --font-weight-medium:   500;
    --font-weight-semibold: 600;

    /* Line heights */
    --line-height-tight:   1.2;   /* Display headings */
    --line-height-normal:  1.5;   /* Body text — WCAG 1.4.8 */
    --line-height-relaxed: 1.75;  /* Long-form reading */

    /* Letter spacing */
    --letter-spacing-tight:  -0.02em;  /* Large headings */
    --letter-spacing-normal:  0;

    /* Font family */
    --font-family-primary: 'Lexend', 'Inter', system-ui, sans-serif;

    /* Legacy responsive scale aliases (preserved for backward-compat) */
    --page-title-size: 2.125rem;
    --section-title-size: 1.25rem;
    --content-padding: 24px;
    --touch-target-min: 44px;

    /* =====================================================
       SetFair Brand Colours — "Clear Skies, Warm Harbour"
       All colours meet WCAG AA accessibility standards.
       ===================================================== */

    /* Primary Palette */
    --color-primary:       #1E3A5F;  /* Horizon    — headers, primary buttons, navigation */
    --color-primary-light: #4A6FA5;  /* Clear Sky  — secondary buttons, links, hover */
    --color-link-hover:    #3A5F8A;  /* Deeper Sky — link hover state */
    --color-primary-dark:  #152D4A;  /* Deeper     — active pressed state */
    --color-secondary:     #E8DED1;  /* Warm Sand  — backgrounds, cards (large areas only) */
    --color-accent:        #D4956A;  /* Fair Weather — CTAs, progress, highlights */

    /* Surface & Layout */
    --color-background:    #FAF8F5;  /* Morning Light — page background */
    --color-surface:       #FFFFFF;  /* Calm          — cards, modals, inputs */

    /* Text */
    --color-text-primary:    #1A2B3C;  /* Deep Water — body text, headings */
    --color-text-secondary:  #5C6B7A;  /* Dusk       — secondary text, labels */
    --color-text-dark:       #000000;  /* Pure black for maximum contrast contexts */

    /* Borders & Dividers */
    --color-border:        #D1D5DB;  /* Shoreline — borders, dividers */
    --color-divider:       #D1D5DB;  /* Alias for --color-border */
    --color-border-default: #929292; /* Darker border for form controls (e.g. checkboxes) */

    /* Semantic Colours — WCAG AA compliant */
    --color-success: #2E7D6B;  /* Safe Harbour — success states */
    --color-warning: #D97706;  /* Amber Light  — warnings */
    --color-error:   #C53030;  /* Signal Red   — errors, destructive actions */
    --color-info:    #4A6FA5;  /* Clear Sky    — information, tips */

    /* Legacy aliases (kept for backward-compatibility with existing CSS) */
    --color-secondary-text:    #5C6B7A;                  /* Dusk — maps to --color-text-secondary */
    --color-primary-hover:     rgba(30, 58, 95, 0.04);   /* Horizon at 4% opacity */
    --color-primary-active:    rgba(30, 58, 95, 0.06);   /* Horizon at 6% opacity */
    --color-hover-overlay:     rgba(255, 255, 255, 0.1); /* White overlay for dark backgrounds */
    --color-avatar-accent:     #D4956A;                  /* Fair Weather */
    --color-accent-dark:       #C2845A;                  /* Fair Weather dark — hover state for accent buttons */
    --color-error-dark:        #A82828;                  /* Signal Red dark  — hover state for destructive buttons */
    --color-background-grey:   #FAF8F5;                  /* Morning Light */
    --color-grey-default:      #D1D5DB;                  /* Shoreline */
    --color-icon-secondary:    #5C6B7A;                  /* Dusk */

    /* Dashboard-specific colour tokens */
    --color-surface-subtle:    #F8FAFC;  /* Very light grey — chip/card backgrounds */
    --color-surface-muted:     #F3F4F6;  /* Slightly darker grey — empty states */
    --color-border-light:      #E2E8F0;  /* Light border — chip borders */
    --color-surface-hover:     #EFF6FF;  /* Light blue — hover backgrounds */
    --color-border-hover:      #93C5FD;  /* Blue border — hover state */
    --color-grey-muted:        #9CA3AF;  /* Mid grey — empty/disabled text and counts */
    --color-success-chart:     #16a34a;  /* Green — chart/completion indicators */
    --color-info-chart:        #2563eb;  /* Blue — chart/activity indicators */
    --color-error-chart:       #dc2626;  /* Red — chart/error activity indicators */
    --color-warning-chart:     #F59E0B;  /* Amber — warning indicators */
    --color-alert-warning-bg:  #FEF3C7;  /* Pale amber — warning alert background */
    --color-alert-warning-border: #FCD34D; /* Amber border — warning alert */
    --color-alert-info-bg:     #DBEAFE;  /* Pale blue — info alert background */
    --color-alert-info-border: #93C5FD;  /* Blue border — info alert */
    --color-primary-gradient-mid: #2a5280; /* Mid-point for dashboard hero gradient */
    --color-dashboard-on-dark-warning: #FDE68A; /* AA warning text on dashboard hero gradient */
    --color-dashboard-on-dark-accent:  #F9D4B8; /* AA accent text on dashboard hero gradient */

    /* Spacing scale (8px grid) */
    --spacing-0: 0;
    --spacing-1: 4px;
    --spacing-2: 8px;
    --spacing-3: 12px;
    --spacing-4: 16px;
    --spacing-5: 20px;
    --spacing-6: 24px;

    /* Component dimensions */
    --app-bar-height: 81px;
    --sidebar-width: 250px;
    --icon-btn-size: 48px;
    --avatar-size-lg: 40px;
    --avatar-size-sm: 24px;
    --card-min-width: 320px;
    --btn-height: 36px;

    /* Typography */
    --font-family: 'Lexend', 'Inter', system-ui, sans-serif;
    --font-size-xs: 12px;
    --font-size-sm: 14px;
    --font-size-md: 16px;
    --font-size-lg: 20px;
    --font-size-xl: 34px;
    --line-height-xs: 20px;
    --line-height-sm: 24px;
    --line-height-md: 24.5px;
    --line-height-lg: 32px;
    --line-height-xl: 43px;
    --letter-spacing: 0.15px;
    --letter-spacing-lg: 0.25px;

    /* Elevation / shadows */
    --shadow-card: 0px 3px 1px -2px rgba(0,0,0,0.2), 0px 2px 2px 0px rgba(0,0,0,0.14), 0px 1px 5px 0px rgba(0,0,0,0.12);
    --shadow-appbar: 0px 2px 4px -1px rgba(0,0,0,0.2), 0px 4px 5px 0px rgba(0,0,0,0.14), 0px 1px 10px 0px rgba(0,0,0,0.12);
    --shadow-sidebar: 0px 1px 2px rgba(0,0,0,0.25);
    --shadow-btn: 0px 1px 2px rgba(0,0,0,0.25);
}

/* Mobile breakpoint (< 600px) */
@media (max-width: 599px) {
    :root {
        --page-title-size: 1.5rem;
        --section-title-size: 1.125rem;
        --content-padding: 16px;
    }
}

/* Tablet breakpoint (600-959px) */
@media (min-width: 600px) and (max-width: 959px) {
    :root {
        --page-title-size: 1.75rem;
        --content-padding: 20px;
    }
}

/* Responsive page headers */
.page-header-responsive {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 16px;
}

@media (min-width: 960px) {
    .page-header-responsive {
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-end;
    }
}

/* Responsive form actions */
.form-actions-responsive {
    display: flex;
    gap: 8px;
    margin-top: 16px;
}

@media (max-width: 599px) {
    .form-actions-responsive {
        flex-direction: column-reverse;
    }
    .form-actions-responsive .mud-button-root {
        width: 100%;
        min-height: 48px;
    }
}

/* Touch-friendly card actions */
.mud-card-actions .mud-button-root {
    min-height: var(--touch-target-min);
}

/* Responsive table wrapper */
.responsive-table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Main content padding - no top bar, drawer extends full height */
.main-content-responsive {
    padding: 24px 24px 24px 16px;
    background-color: var(--color-background);
    min-height: 100vh;
}

/* Mobile hamburger toggle button - fixed position, hidden on desktop */
.mobile-hamburger {
    display: none;
    position: fixed;
    top: 12px;
    left: 12px;
    z-index: 1300;
    background: var(--color-primary);
    border: none;
    border-radius: 6px;
    width: 40px;
    height: 40px;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: white;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

@media (max-width: 959px) {
    .mobile-hamburger {
        display: flex;
    }

    .main-content-responsive {
        padding: 64px 16px 80px 16px;
    }
}

/* ===========================================
   UTILITY CLASSES FOR INLINE STYLE MIGRATION
   Issue #43 - Move inline styles to CSS
   =========================================== */

/* Flex utilities */
.flex-grow {
    flex: 1;
}

.flex-column-full {
    display: flex;
    flex-direction: column;
}

.full-height-layout {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* Form utilities */
.form-container-width {
    max-width: 600px;
}

.form-container-centered {
    max-width: 600px;
    margin: 0 auto;
}

/* Table/detail view utilities */
.table-label-cell {
    width: 40%;
    font-weight: 600;
}

/* Ensure MudBlazor typography inside label cells inherits bold */
.table-label-cell .mud-typography {
    font-weight: 600;
}

.table-action-cell {
    width: 60px;
}

/* Edit links in Check Answers and View Record tables — link-hover colour, underlined.
   color needs !important: global .mud-link rules use !important on their color. */
.table-action-cell .mud-link,
.table-action-cell a.mud-typography,
.table-action-cell span.mud-link {
    color: var(--color-link-hover, #3A5F8A) !important;
    text-decoration: underline;
}

.table-action-cell .mud-link:hover,
.table-action-cell a.mud-typography:hover,
.table-action-cell span.mud-link:hover,
.table-action-cell button.mud-link:hover {
    color: var(--color-link-hover, #3A5F8A) !important;
    text-decoration-thickness: 2px;
    background-color: transparent;
}

/* Text utilities */
.text-center {
    text-align: center;
}

.link-cursor {
    cursor: pointer;
}

.text-white {
    color: white;
}

.font-medium {
    font-weight: 500;
}

/* Preserve whitespace and line breaks in multi-line text content */
.text-preserve-whitespace {
    white-space: pre-wrap;
}

/* Page title styling - responsive font size with medium weight */
.page-title {
    font-size: var(--page-title-size);
    font-weight: 500;
}

/* -------------------------------------------------------------------------
   Typography colour hierarchy — enforces SetFair brand palette on all pages.
   MudBlazor applies no default colour to heading/caption variants so these
   rules fill the gap without conflicting with explicit Color="..." attributes
   (which MudBlazor writes as inline styles and therefore win on specificity).
   ------------------------------------------------------------------------- */

/* Primary headers (h1–h4) — Horizon #1E3A5F */
.mud-typography-h1,
.mud-typography-h2,
.mud-typography-h3,
.mud-typography-h4 {
    color: var(--color-primary, #1E3A5F);
}

/* Secondary headers (h5–h6) — Deep Water #1A2B3C */
.mud-typography-h5,
.mud-typography-h6 {
    color: var(--color-text-primary, #1A2B3C);
}

/* Dashboard hero sits on a dark gradient — override h6 color for white text.
   Component-scoped CSS cannot override this rule for MudText children. */
.dashboard-hero .mud-typography-h6 {
    color: #fff;
}

/* Caption / help text — Dusk #5C6B7A; display:block so mb-* spacing works */
/* :not(.d-inline) guards against breaking inline callsites */
.mud-typography-caption:not(.d-inline):not(.d-inline-block) {
    display: block;
    color: var(--color-text-secondary, #5C6B7A);
}

/* Link styling */
.link-no-decoration {
    text-decoration: none;
}

/* Nav links should never be underlined — browser default <a> styling applies otherwise */
.mud-nav-link {
    text-decoration: none !important;
}

/* WCAG AA: Links within text blocks must be distinguishable by more than color alone */
.link-primary {
    text-decoration: underline;
}

.link-white {
    color: white;
    margin-right: 24px;
}

.link-white-compact {
    color: white;
    margin-right: 16px;
}

/* Inline body links — #4A6FA5, underlined, inherits body font (Lexend) */
.mud-alert .mud-link,
.form-body-link {
    color: var(--color-primary-light) !important;
    text-decoration: underline !important;
    text-decoration-thickness: 1px;
    font-family: inherit !important;
    font-size: inherit !important;
    transition: text-decoration-thickness 0.15s ease;
}

.mud-alert .mud-link:hover,
.form-body-link:hover {
    text-decoration-thickness: 2px !important;
}

/* Destructive link hover — darker red + thicker underline */
.link-destructive {
    color: var(--color-error) !important;
    transition: color 0.15s ease, text-decoration-thickness 0.15s ease;
}

.link-destructive:hover {
    color: #B71C1C !important;
    text-decoration-thickness: 2px !important;
}

/* Link colour — use for text that should match the primary link colour (e.g. expansion panel titles) */
.text-link {
    color: var(--color-primary-light);
}

/* Breadcrumb — last item (current page) should not be underlined */
.mud-breadcrumbs li:last-child .mud-typography {
    text-decoration: none !important;
    cursor: default;
}

.mud-breadcrumbs li:last-child a {
    text-decoration: none !important;
    pointer-events: none;
    color: var(--color-text-secondary, #5C6B7A);
}

/* Two-thirds column layout for forms (GDS guidance) */
.form-two-thirds {
    max-width: 66.66%;
}

@media (max-width: 599px) {
    .form-two-thirds {
        max-width: 100%;
    }
}

/* GDS-style input widths — size inputs to expected content length.
   rem units ensure consistent sizing across font-size contexts (inputs vs caption text).
   display: block ensures max-width applies to inline elements like <span> (MudText caption). */
.input-width-5 { max-width: 5.4rem; display: block; }    /* ~10 chars: payment day */
.input-width-10 { max-width: 11rem; display: block; }    /* ~20 chars: account number, amounts */
.input-width-15 { max-width: 17rem; display: block; }    /* ~30 chars: provider names, selects */
.input-width-20 { max-width: 23rem; display: block; }    /* ~40 chars: names, emails */
.input-width-30 { max-width: 33rem; display: block; }    /* URLs */
.input-width-40 { max-width: 41rem; display: block; }    /* textareas, notes */
.input-width-full { max-width: 100%; }  /* dropdowns, textareas, passwords */
@media (max-width: 599px) {
    .input-width-5,
    .input-width-10,
    .input-width-15,
    .input-width-20,
    .input-width-30,
    .input-width-40 {
        max-width: 100%;
    }
}

/* Layout components */
.layout-main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding-top: 80px;
    background-color: white;
}

.layout-body-content {
    flex: 1;
    display: flex;
    justify-content: center;
    padding: 32px 16px;
}

.layout-footer {
    background-color: var(--mud-palette-primary);
    padding: 24px;
    color: white;
}

.layout-footer p,
.layout-footer .mud-typography {
    color: white;
}

.layout-footer-container {
    max-width: 1200px;
    margin: 0 auto;
}

/* Branding */
.brand-title {
    font-weight: 500;
    color: var(--color-primary);
}

/* QR code specific */
.qr-code-container {
    max-width: 200px;
}

.qr-code-image {
    width: 180px;
    height: 180px;
}

.qr-code-placeholder {
    width: 180px;
    height: 180px;
    border: 1px solid var(--color-divider);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Setup step containers */
.setup-step-container {
    flex: 1;
}

/* Divider styling */
.nav-divider {
    height: 40px;
    background-color: rgba(255, 255, 255, 0.3);
    margin: 0 16px;
}

/* Validation error list */
.validation-error-list {
    list-style-type: disc;
}

/* Helper text color - accessible grey */
.helper-text-secondary {
    color: var(--color-secondary-text);
}

/* MainLayout specific styles */
.mud-background-default {
    background-color: var(--mud-palette-background);
}

.drawer-margin-top {
    margin-top: 24px;
}

/* Verification code input */
.verification-code-input {
    width: 48px;
}

/* Icon alignment */
.icon-align-middle {
    vertical-align: middle;
}

.icon-middle {
    vertical-align: middle;
}

/* Error summary panel - used by ErrorSummary component and form pages.
   Background tint removed per Stephanie-Illuminate design review.
   display: inline-block → block + width: fit-content so panel hugs content width. */
.error-summary {
    border-left: 5px solid var(--color-error);
    display: block;
    width: fit-content;
    max-width: 100%;
}

/* Error summary title */
.error-summary-title {
    color: var(--color-error);
    font-weight: 700;
    font-size: 20px;
}

/* Error summary item links — must be red, not blue.
   .error-summary .mud-link and .error-summary-item both need !important to beat MudBlazor. */
.error-summary .mud-link,
.error-summary .mud-link:visited,
.error-summary a,
.error-summary a:visited,
.error-summary .error-summary-item {
    color: var(--color-error) !important;
    text-decoration: underline !important;
}

.error-summary-links {
    display: flex;
    flex-direction: column;
    gap: 4px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.error-summary-link-row {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Per-input error state — heavier red border */
.input-error-state .mud-input-outlined-border,
.input-error .mud-input-outlined-border,
.mud-input.mud-input-error .mud-input-outlined-border,
.mud-input-control.mud-input-error .mud-input-outlined-border {
    border-color: var(--color-error) !important;
    border-width: 2px !important;
}

.input-error-message {
    color: var(--color-error);
    font-size: 14px;
    font-weight: 500;
    margin-top: 4px;
}

/* Error text dark variant */
.text-error-dark {
    color: var(--mud-palette-error-darken);
}

/* Text decoration */
.text-underline {
    text-decoration: underline;
}

/* Upload button wrapper — constrains button to its natural content width.
   MudBlazor 9.4.0 changed CustomContent to render in a stretching flex context;
   width:fit-content + align-self:flex-start counteract that. */
.upload-btn-wrap {
    width: fit-content;
    align-self: flex-start;
}

/* File upload dropzone */
.file-upload-dropzone {
    border-style: dashed;
    min-height: 150px;
}

/* Table max-width for check answers page */
.table-max-720 {
    max-width: 720px;
}

/* Pre-wrap text for multi-line content display */
.text-pre-wrap {
    white-space: pre-wrap;
}

/* Pre-line text — preserves line breaks, collapses other whitespace */
.text-pre-line {
    white-space: pre-line;
}

/* Semibold font weight for table labels and check-answers headings */
.font-semibold {
    font-weight: 600;
}

/* Bordered paper using MudBlazor divider color */
.paper-bordered {
    border: 1px solid var(--mud-palette-divider);
}

/* Transparent expansion panel - no background or shadow */
.expansion-panel-transparent {
    background: transparent;
    box-shadow: none;
}

/* Expansion panel with arrow on the left, flush with surrounding content */
.expansion-panel-arrow-left {
    padding: 0 !important;
    margin: 0 !important;
}

.expansion-panel-arrow-left .mud-expand-panel {
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important;
}

.expansion-panel-arrow-left .mud-expand-panel::before {
    display: none !important;
}

.expansion-panel-arrow-left .mud-expand-panel-header {
    flex-direction: row-reverse !important;
    justify-content: flex-end !important;
    padding: 0 !important;
}

.expansion-panel-arrow-left .mud-expand-panel-header .mud-expand-panel-icon {
    margin: 0 !important;
    padding: 0 !important;
}

.expansion-panel-arrow-left .mud-expand-panel-content {
    padding: 0 !important;
}

.expansion-panel-arrow-left .mud-collapse-wrapper {
    padding: 0 !important;
}

/* Gift record header accordion: keep toggle left-aligned with icon next to text */
.gift-record-header-accordion {
    margin-left: 0 !important;
}

.gift-record-header-accordion .mud-expand-panel-header {
    width: fit-content;
    margin: 0 !important;
    padding: 0 !important;
    text-decoration: none !important;
}

.gift-record-header-accordion .mud-expand-panel-header .mud-expand-panel-icon {
    margin-right: 4px !important;
}

.gift-record-header-accordion .mud-expand-panel-header .mud-typography {
    color: var(--color-primary-light, #4A6FA5) !important;
    text-decoration: none !important;
}

.gift-record-header-accordion-panel {
    margin: 0 !important;
}

/* Vertical radio group - stack radio buttons vertically */
/* Override MudBlazor's internal flex container to stack radios vertically */
.radio-group-vertical.mud-input-control-input-container,
.radio-group-vertical .mud-input-control-input-container {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px;
}

.radio-group-vertical .mud-radio {
    margin-right: 0;
}


/* Vault card grid - ensures all cards have uniform height */
.vault-card-grid .mud-grid-item {
    display: flex;
}

.vault-card {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 220px;
}

.vault-card .mud-card-content {
    flex: 1;
}

.vault-card .mud-card-actions {
    margin-top: auto;
}

.error-message {
    color: var(--color-error);
    font-weight: 700;
    margin-bottom: 8px;
}

/* .form-group-error — red left border removed per Stephanie-Illuminate feedback;
   error state is indicated by field-level error message and input border colour only */
.form-group-error {
}

.input-error .mud-input-outlined-border,
.mud-input.mud-input-error .mud-input-outlined-border,
.mud-input-control.mud-input-error .mud-input-outlined-border {
    border-color: var(--color-error) !important;
    border-width: 2px !important;
}

/* ==========================================================================
   Accessibility Utilities
   ========================================================================== */

.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* ==========================================================================
   Conditional Form Fields
   ========================================================================== */

.conditional-field {
    border-left: 4px solid var(--color-grey-default);
    padding-left: 16px;
    margin-left: 20px;
}

/* Progressive reveal nested section with visual indentation bar */
.progressive-reveal-section {
    display: flex;
    gap: 12px;
    padding-left: 20px;
    margin-top: 4px;
}

.progressive-reveal-bar {
    width: 4px;
    background-color: var(--mud-palette-action-disabled, rgba(0, 0, 0, 0.26));
    border-radius: 2px;
    flex-shrink: 0;
}

.progressive-reveal-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
    min-width: 0;
}

/* Alert fit content - prevents alerts from stretching full width */
.alert-fit-content {
    width: fit-content;
    max-width: 100%;
}

/* Ensure close icon stays top-right in alerts, not wrapping below */
.alert-fit-content .mud-alert-close {
    align-self: flex-start;
}

/* Success alert — #2E7D6B text with WCAG AA compliant tinted background (4.6:1 contrast) */
.alert-success-green {
    background-color: rgba(46, 125, 107, 0.05) !important;
    border-color: rgba(46, 125, 107, 0.2) !important;
}

/* Button with no minimum width - allows buttons to shrink to content size */
.mud-btn-no-min-width {
    min-width: 0;
}

.alert-success-green,
.alert-success-green .mud-alert-message,
.alert-success-green .mud-alert-message .mud-typography {
    color: #2E7D6B !important;
}

.alert-success-green .mud-alert-icon .mud-icon-root,
.alert-success-green .mud-icon-button .mud-icon-root {
    color: #2E7D6B !important;
}

/* Record completion circle — ensure percentage text fits inside the progress ring */
.completion-circle {
    position: relative;
}

.completion-circle-text {
    font-size: 11px;
    line-height: 1;
    white-space: nowrap;
}

/* Vault record list — stacked rows for record summaries */
.vault-record-list {
    max-width: 720px;
}

.vault-record-row {
    background-color: rgba(212, 149, 106, 0.1);
    border-radius: 8px;
    padding: 16px 20px;
    margin-bottom: 12px;
    color: #1A2B3C;
}

/* Vault record name — larger to stand out from metadata */
.vault-record-name {
    font-size: 18px;
    font-weight: 600;
}

/* Vault completion text — muted inline percentage */
.vault-completion-text {
    color: #5C6B7A;
    font-size: 0.85rem;
    font-weight: 400;
}

.vault-view-link {
    color: #4A6FA5 !important;
    text-decoration: underline !important;
}

/* Vault section toggle links */
.vault-toggle-link {
    color: #4A6FA5 !important;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 2px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-decoration: underline !important;
    white-space: nowrap;
}

/* Vault record count badge — has records */
.vault-record-count {
    background-color: #2E7D6B !important;
    color: white !important;
    font-size: 0.75rem;
}

/* Vault record count badge — no records */
.vault-record-count-empty {
    background-color: #1E3A5F !important;
    color: white !important;
    font-size: 0.75rem;
}

/* Vault add link — matches view link colour */
.vault-add-link {
    color: #4A6FA5 !important;
    display: flex;
    align-items: center;
    gap: 2px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-decoration: underline !important;
}

/* Vault add link — disabled state (no pointer-events:none to allow tooltip hover) */
.vault-add-link-disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Vault sections container */
.vault-sections {
    max-width: 720px;
}

/* Vault section header — stable flex layout to prevent text reflow */
.vault-section-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.vault-section-description {
    flex: 1;
    min-width: 0;
}


/* Clickable links in validation error summaries */
.clickable-link {
    cursor: pointer;
}

/* ==========================================================================
   SetFair Brand Component Patterns
   Issue #156 — Buttons, Form Inputs, Cards
   Relies on CSS variables defined in the SetFair colour system (issue #155).
   ========================================================================== */

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

/* Primary button — Horizon (#1E3A5F) */
.sf-btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-primary, #1E3A5F);
    color: #ffffff;
    border: none;
    padding: 12px 24px;
    font-family: var(--font-family-primary, 'Lexend', 'Inter', system-ui, sans-serif);
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.2s ease;
    min-height: 44px; /* WCAG touch target */
    text-decoration: none;
}

.sf-btn-primary:hover {
    background-color: var(--color-accent, #D4956A);
    color: var(--color-primary, #1E3A5F);
}

.sf-btn-primary:active {
    background-color: var(--color-primary-dark, #152D4A);
}

.sf-btn-primary:focus-visible {
    outline: 2px solid var(--color-primary-light, #4A6FA5);
    outline-offset: 2px;
}

.sf-btn-primary:disabled,
.sf-btn-primary[disabled] {
    background-color: var(--color-border, #D1D5DB);
    color: var(--color-text-secondary, #5C6B7A);
    cursor: not-allowed;
    opacity: 0.6;
}

/* Secondary button — outlined, Clear Sky (#4A6FA5) */
.sf-btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #FFFFFF;
    color: var(--color-primary-light, #4A6FA5);
    border: 1px solid var(--color-primary-light, #4A6FA5);
    padding: 11px 23px;
    font-family: var(--font-family-primary, 'Lexend', 'Inter', system-ui, sans-serif);
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    min-height: 44px;
    text-decoration: none;
}

.sf-btn-secondary:hover {
    background-color: rgba(74, 111, 165, 0.08);
}

.sf-btn-secondary:focus-visible {
    outline: 2px solid var(--color-primary-light, #4A6FA5);
    outline-offset: 2px;
}

.sf-btn-secondary:disabled,
.sf-btn-secondary[disabled] {
    border-color: var(--color-border, #D1D5DB);
    color: var(--color-text-secondary, #5C6B7A);
    cursor: not-allowed;
    opacity: 0.6;
}

/* MudBlazor secondary button override — white bg, #4A6FA5 border + text */
.mud-button-outlined.mud-button-outlined-info {
    background-color: #FFFFFF !important;
    color: var(--color-primary-light, #4A6FA5) !important;
    border-color: var(--color-primary-light, #4A6FA5) !important;
}

.mud-button-outlined.mud-button-outlined-info:hover {
    background-color: rgba(74, 111, 165, 0.08) !important;
}


/* Accent/CTA button — Fair Weather (#D4956A) */
.sf-btn-accent {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-accent, #D4956A);
    color: var(--color-text-primary, #1A2B3C);
    border: none;
    padding: 12px 24px;
    font-family: var(--font-family-primary, 'Lexend', 'Inter', system-ui, sans-serif);
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.2s ease;
    min-height: 44px;
    text-decoration: none;
}

.sf-btn-accent:hover {
    background-color: var(--color-accent-dark, #C2845A);
}

.sf-btn-accent:focus-visible {
    outline: 2px solid var(--color-accent, #D4956A);
    outline-offset: 2px;
}

.sf-btn-accent:disabled,
.sf-btn-accent[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Destructive button — Signal Red (#C53030) */
.sf-btn-destructive {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-error);
    color: #ffffff;
    border: none;
    padding: 12px 24px;
    font-family: var(--font-family-primary, 'Lexend', 'Inter', system-ui, sans-serif);
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.2s ease;
    min-height: 44px;
    text-decoration: none;
}

.sf-btn-destructive:hover {
    background-color: var(--color-error-dark, #A82828);
}

.sf-btn-destructive:focus-visible {
    outline: 2px solid var(--color-error);
    outline-offset: 2px;
}

/* MudBlazor primary button hover — Fair Weather accent for high contrast */
.mud-button-filled.mud-button-filled-primary:hover {
    background-color: var(--color-accent, #D4956A) !important;
    color: var(--color-primary, #1E3A5F) !important;
}

/* MudBlazor link hover — darken to primary-dark, matching breadcrumbs */
a.mud-typography.mud-link:hover,
.mud-link:hover,
span.mud-link:hover,
button.mud-link:hover {
    color: var(--color-primary-dark, #152D4A) !important;
    cursor: pointer;
}

/* Error summary link hover override — wins via higher specificity: adding .error-summary
   ancestor class makes each selector 0,1,0 more specific than the global link hover block above.
   !important on color is still needed to beat MudBlazor's own !important on .mud-link. */
.error-summary a.mud-typography.mud-link:hover,
.error-summary .mud-link:hover,
.error-summary span.mud-link:hover,
.error-summary button.mud-link:hover,
.error-summary a:hover {
    color: var(--color-error) !important;
    text-decoration-thickness: 2px;
    background-color: transparent;
}

/* Inline text links — breadcrumb-matching hover (darken + bold underline) */
.inline-link {
    color: var(--color-primary-light, #4A6FA5);
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

.inline-link:hover {
    color: var(--color-primary-dark, #152D4A);
    text-decoration-thickness: 2px;
    font-weight: 500;
}

/* Field-level error message — rendered above input via explicit markup */
.error-field-message {
    font-size: 16px;
    font-weight: 700;
    color: var(--color-error);
    margin-bottom: 4px;
}

/* Hide MudBlazor's built-in error text below inputs (we render our own above) */
.mud-input-helper-text.mud-input-error {
    display: none;
}

/* Consistent spacing between input and helper text below it */
.mud-input-helper-text {
    margin-top: 6px;
}
/* --------------------------------------------------------------------------
   Form Inputs
   -------------------------------------------------------------------------- */

/* Text input */
.sf-form-input {
    background-color: var(--color-surface, #FFFFFF);
    border: 1px solid var(--color-border, #D1D5DB);
    padding: 10px 12px;
    font-family: var(--font-family-primary, 'Lexend', 'Inter', system-ui, sans-serif);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--color-text-primary, #1A2B3C);
    border-radius: 4px;
    width: 100%;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    min-height: 44px; /* Touch target */
}

.sf-form-input::placeholder {
    color: var(--color-text-secondary, #5C6B7A);
    opacity: 0.7;
}

.sf-form-input:hover {
    border-color: var(--color-primary-light, #4A6FA5);
}

.sf-form-input:focus {
    outline: none;
    border-color: var(--color-primary-light, #4A6FA5);
    box-shadow: 0 0 0 3px rgba(74, 111, 165, 0.1);
}

.sf-form-input:disabled {
    background-color: var(--color-secondary, #E8DED1);
    color: var(--color-text-secondary, #5C6B7A);
    cursor: not-allowed;
    opacity: 0.6;
}

.sf-form-input.sf-input-error {
    border-color: var(--color-error);
}

.sf-form-input.sf-input-error:focus {
    box-shadow: 0 0 0 3px rgba(197, 48, 48, 0.1);
}

.sf-form-input.sf-input-success {
    border-color: var(--color-success, #2E7D6B);
}

.sf-form-input.sf-input-success:focus {
    box-shadow: 0 0 0 3px rgba(46, 125, 107, 0.1);
}

/* Form label */
.sf-form-label {
    display: block;
    font-family: var(--font-family-primary, 'Lexend', 'Inter', system-ui, sans-serif);
    font-size: 16px;
    font-weight: 500;
    color: var(--color-text-primary, #1A2B3C);
    margin-bottom: 6px;
}

/* Helper/hint text */
.sf-form-helper {
    display: block;
    font-size: 14px;
    color: var(--color-text-secondary, #5C6B7A);
    margin-top: 4px;
}

/* Inline error message */
.sf-form-error {
    display: block;
    font-size: 14px;
    color: var(--color-error);
    margin-top: 4px;
    font-weight: 500;
}

/* --------------------------------------------------------------------------
   Cards
   -------------------------------------------------------------------------- */

/* Base card */
.sf-card {
    background-color: var(--color-surface, #FFFFFF);
    border: 1px solid var(--color-border, #D1D5DB);
    border-radius: 8px;
    padding: 24px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    transition: box-shadow 0.2s ease;
}

/* Interactive (clickable) card */
.sf-card.sf-card-interactive {
    cursor: pointer;
}

.sf-card.sf-card-interactive:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.10);
}

/* Card header */
.sf-card-header {
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--color-border, #D1D5DB);
}

/* Card title */
.sf-card-title {
    font-size: 20px;
    font-weight: 500;
    color: var(--color-text-primary, #1A2B3C);
    margin: 0;
}

/* Card subtitle */
.sf-card-subtitle {
    font-size: 14px;
    color: var(--color-text-secondary, #5C6B7A);
    margin-top: 4px;
}

/* Card footer */
.sf-card-footer {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--color-border, #D1D5DB);
}

/* Vault dashboard card (extends .vault-card with SetFair branding) */
.vault-card-icon {
    color: var(--color-primary, #1E3A5F);
    font-size: 32px;
    margin-bottom: 12px;
}

.vault-card-title {
    font-size: 20px;
    font-weight: 600;
    color: var(--color-text-primary, #1A2B3C);
    margin-bottom: 8px;
}

.vault-card-description {
    font-size: 16px;
    color: var(--color-text-secondary, #5C6B7A);
    margin-bottom: 12px;
}

.vault-card-count {
    display: inline-block;
    background-color: var(--color-accent, #D4956A);
    color: var(--color-text-primary, #1A2B3C);
    font-size: 14px;
    font-weight: 500;
    padding: 4px 12px;
    border-radius: 12px;
}

/* Form panel — narrower width for form triage and input sections */
.form-panel {
    max-width: 600px;
}

/* Prose text with optimal line length */
.notes-text {
    white-space: pre-wrap;
}

/* Check-your-answers table label column - fixed width for alignment */
.review-label-width {
    width: 40%;
}

/* Check-your-answers table value cells with pre-formatted whitespace (e.g. multi-line notes) */
.review-value-preformat {
    white-space: pre-line;
}

/* Registration lookup input — fixed width to match typical plate length */
.input-registration {
    max-width: 250px;
}

/* GDS-style input widths — size inputs to expected content length */
.input-width-5 { max-width: 5.4em; }    /* ~10 chars: payment day */
.input-width-10 { max-width: 11em; }    /* ~20 chars: account number, amounts */
.input-width-15 { max-width: 17em; }    /* ~30 chars: provider names, selects */
.input-width-20 { max-width: 23em; }    /* ~40 chars: names, emails */
.input-width-30 { max-width: 33em; }    /* URLs */
.input-width-40 { max-width: 41em; }    /* textareas, notes */
.input-width-full { max-width: 100%; }  /* dropdowns, textareas, passwords */

@media (max-width: 599px) {
    .input-width-5,
    .input-width-10,
    .input-width-15,
    .input-width-20,
    .input-width-30,
    .input-width-40 {
        max-width: 100%;
    }
}

/* Breadcrumb links — always underlined with hover state */
.mud-breadcrumbs a,
.breadcrumb-link {
    text-decoration: underline !important;
}

.mud-breadcrumbs a:hover,
.breadcrumb-link:hover {
    text-decoration-thickness: 2px !important;
    opacity: 0.8;
}

/* GDS form group error state — red left border removed per Stephanie-Illuminate feedback;
   error state is indicated by field-level error message and input border colour only */
.gds-form-group--error {
}

/* Override MudBlazor error helper text to 14px (GDS body2) */
.mud-input-error .mud-input-helper-text {
    font-size: 14px;
}

.mud-button-outlined.mud-button-outlined-default:hover {
    background-color: rgba(74, 111, 165, 0.08) !important;
}

/* Preserve whitespace and line breaks in user-entered multi-line text */
.preserve-whitespace {
    white-space: pre-wrap;
}

/* View record page grid container */
.view-record-grid {
    max-width: 960px;
}

/* Issue #240: Red asterisk for required fields */
/* Colors MudBlazor's built-in required asterisk (from Required="true") */
.mud-input-control.mud-input-required .mud-input-label::after {
    color: #C53030;
}

/* Required indicator for MudText standalone labels */
.required-indicator {
    color: #C53030;
    padding-left: 2px;
}

/* Personal items wishes: item card container (replaces inline border styles) */
.item-card {
    border: 1px solid #e0e0e0;
    border-radius: 4px;
}

/* Italic text utility (replaces inline font-style: italic) */
.font-italic {
    font-style: italic;
}

/* Dashboard accordion — individual rounded cards with gaps between panels */
.dashboard-vaults .mud-expand-panel {
    border-radius: 12px !important;
    border: 1px solid var(--color-grey-default) !important;
    margin-bottom: 8px !important;
    overflow: hidden !important;
    box-shadow: none !important;
}

.dashboard-vaults .mud-expand-panel:last-child {
    margin-bottom: 0 !important;
}

/* Override MudBlazor's expanded-state margin so panels keep their card spacing */
.dashboard-vaults .mud-expand-panel.mud-panel-expanded {
    margin: 0 0 8px 0 !important;
    border-radius: 12px !important;
}

.dashboard-vaults .mud-expand-panel.mud-panel-expanded:last-child {
    margin-bottom: 0 !important;
}

/* Dashboard recent activity card — rounded with border, no shadow */
.dashboard-activity-card {
    border-radius: 12px;
    border: 1px solid var(--color-grey-default);
}

/* Autofill detection — the animationstart event is used by AutofillGuard in scroll-helpers.js
   to detect when the browser fills in form fields automatically, so that MudAutocomplete
   dropdowns can be closed before they visually open. */
@keyframes ks-autofill-detect {
    from { }
}
input:-webkit-autofill {
    animation-name: ks-autofill-detect;
    animation-duration: 0.001s;
}

/* Activity items are not clickable — suppress MudListItem hover highlight */
.dashboard-activity-card .mud-list-item:hover {
    background-color: transparent;
    cursor: default;
}

/* Document chip pending removal — visually struck through */
.document-pending-removal {
    text-decoration: line-through;
    opacity: 0.6;
}

/* Recovery codes — monospace, generous size, no numbering */
.recovery-codes-list .recovery-code-text {
    font-family: 'Courier New', Courier, monospace;
    font-size: 18px;
    letter-spacing: 0.05em;
}

/* Manual entry key container — shaded bordered box with monospace key */
.manual-entry-key-container {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background-color: var(--color-surface-alt, #f5f6f8);
    border: 1px solid var(--color-divider);
    border-radius: 6px;
    padding: 8px 12px;
}

.manual-entry-key-text {
    font-family: 'Courier New', Courier, monospace;
    font-size: 15px;
    letter-spacing: 0.08em;
    word-break: break-all;
}

/* =====================================================
   Vault Hub Redesign
   ===================================================== */

.vault-hub-page {
    max-width: 920px;
}

.vault-hub-page.list-mode {
    max-width: 920px;
}

.vault-hub-page.grid-mode {
    max-width: 1360px;
}

.vault-hub-title-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}

.vault-hub-title-block {
    min-width: 0;
}

.vault-hub-lede {
    max-width: 56ch;
}

.vault-view-toggle {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--color-border, #D1D5DB);
    border-radius: 6px;
    background: #FFFFFF;
    padding: 2px;
    flex-shrink: 0;
    margin-top: 4px;
}

.vault-view-toggle-button {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 4px;
    color: var(--color-text-secondary, #5C6B7A);
    background: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.vault-view-toggle-button.active {
    background: var(--color-primary, #1E3A5F);
    color: #FFFFFF;
}

.vault-view-toggle-button:hover {
    color: var(--color-primary, #1E3A5F);
}

.vault-subvault-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.vault-subvault-grid.view-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.vault-subvault-card {
    background: #FFFFFF;
    border: 1px solid var(--color-border, #D1D5DB);
    border-radius: 10px;
    padding: 16px 18px 18px 14px;
    display: grid;
    grid-template-columns: 16px 1fr auto;
    column-gap: 10px;
    row-gap: 8px;
    align-items: start;
}

.vault-subvault-card:hover {
    border-color: var(--color-border-light, #E2E8F0);
}

.vault-subvault-card.vault-drag-armed {
    cursor: grabbing;
}

.vault-subvault-card.dragging {
    opacity: 0.6;
    border-color: var(--color-primary-light, #4A6FA5);
    box-shadow: 0 8px 24px rgba(30, 58, 95, 0.16);
}

.vault-drag-handle {
    grid-column: 1;
    grid-row: 1 / span 4;
    width: 16px;
    border: none;
    background: transparent;
    color: var(--color-border-light, #E2E8F0);
    cursor: grab;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: center;
}

.vault-drag-handle:hover,
.vault-drag-handle:focus-visible {
    color: var(--color-text-secondary, #5C6B7A);
}

.vault-drag-handle:focus-visible {
    outline: 2px solid var(--color-primary-light, #4A6FA5);
    outline-offset: 2px;
    border-radius: 4px;
}

.vault-drag-handle:active {
    cursor: grabbing;
}

.vault-subvault-header {
    grid-column: 2 / span 2;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.vault-subvault-heading {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    min-width: 0;
}

.vault-record-count-chip {
    font-size: 12px;
    font-weight: 500;
    padding: 2px 10px;
    border-radius: 999px;
    background: rgba(46, 125, 107, 0.10);
    color: #2E7D6B;
    line-height: 1.3;
}

.vault-record-count-chip.empty {
    background: var(--color-surface-muted, #F3F4F6);
    color: var(--color-grey-muted, #9CA3AF);
}

.vault-add-record-button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    background: var(--color-primary, #1E3A5F);
    color: #FFFFFF !important;
    border-radius: 6px;
    border: none;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none !important;
    white-space: nowrap;
    min-height: 32px;
    cursor: pointer;
}

.vault-add-record-button:hover {
    background: var(--color-accent, #D4956A);
    color: var(--color-primary, #1E3A5F) !important;
}

.vault-add-record-button.disabled,
.vault-add-record-button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.vault-subvault-description {
    grid-column: 2 / span 2;
    color: var(--color-text-secondary, #5C6B7A);
}

.vault-record-list {
    grid-column: 2 / span 2;
    margin-top: 10px;
    border-top: 1px solid var(--color-border-light, #E2E8F0);
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: none;
}

.vault-record-row-link {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 10px 8px 10px 0;
    margin: 0;
    border-radius: 0;
    text-decoration: none !important;
    color: inherit !important;
    min-width: 0;
    position: relative;
}

.vault-record-row-link:not(:last-child)::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    border-bottom: 1px solid var(--color-border-light, #E2E8F0);
}

.vault-record-row-link:hover {
    background: var(--color-surface-subtle, #F8FAFC);
}

.vault-record-row-link:hover .vault-record-primary-text {
    color: var(--color-primary, #1E3A5F);
}

.vault-record-row-link:hover .vault-record-chevron {
    color: var(--color-primary, #1E3A5F);
    transform: translateX(2px);
}

.vault-record-row-link:focus-visible {
    outline: 2px solid var(--color-primary-light, #4A6FA5);
    outline-offset: 2px;
}

.vault-record-name-block {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
}

.vault-record-primary-line {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    margin-bottom: 2px;
}

.vault-record-primary-text {
    font-size: 14px;
    font-weight: 500;
    line-height: 1.35;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.vault-record-meta-line {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--color-text-secondary, #5C6B7A);
    white-space: nowrap;
    overflow: hidden;
}

.vault-record-meta-text {
    overflow: hidden;
    text-overflow: ellipsis;
}

.vault-record-meta-text::before {
    content: '·';
    margin-right: 6px;
}

.vault-record-type-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.4;
    padding: 1px 7px;
    border-radius: 4px;
    background: var(--color-secondary, #E8DED1);
    color: var(--color-primary, #1E3A5F);
    white-space: nowrap;
    flex-shrink: 0;
}

.vault-record-chevron {
    font-size: 18px;
    color: var(--color-border, #D1D5DB);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 12px;
    margin-left: 8px;
    flex-shrink: 0;
    line-height: 1;
    transition: color 0.12s ease, transform 0.12s ease;
}

.vault-view-all-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    color: var(--color-primary-light, #4A6FA5) !important;
    text-decoration: none !important;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font-family: inherit;
    line-height: inherit;
}

.vault-view-all-link .word {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

.vault-view-all-link .chevron {
    line-height: 1;
}

.vault-view-all-link:hover .word {
    text-decoration-thickness: 2px;
}

.vault-view-all-link.inline {
    margin: 8px 0 0;
    padding: 8px 0 0;
    text-align: left;
    align-self: flex-start;
}

.vault-subvault-footer {
    grid-column: 2 / span 2;
    margin-top: 6px;
}

.vault-empty-state {
    grid-column: 2 / span 2;
    margin-top: 4px;
    padding: 10px 12px;
    background: var(--color-surface-subtle, #F8FAFC);
    border: 1px dashed var(--color-border, #D1D5DB);
    border-radius: 6px;
    font-size: 13px;
    color: var(--color-text-secondary, #5C6B7A);
    line-height: 1.45;
}

.vault-subvault-grid.view-grid .vault-subvault-card {
    grid-template-columns: 16px 1fr auto;
    column-gap: 10px;
    padding: 16px;
}

.vault-subvault-grid.view-grid .vault-drag-handle {
    display: flex;
}

.vault-subvault-grid.view-grid .vault-subvault-header {
    grid-column: 2 / span 2;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 8px;
    row-gap: 8px;
    align-items: start;
}

.vault-subvault-grid.view-grid .vault-subvault-description,
.vault-subvault-grid.view-grid .vault-record-list,
.vault-subvault-grid.view-grid .vault-empty-state,
.vault-subvault-grid.view-grid .vault-subvault-footer {
    grid-column: 2 / span 2;
}

.vault-subvault-grid.view-grid .vault-record-row-link {
    padding: 7px 10px 7px 10px;
}

.vault-subvault-grid.view-grid .vault-record-primary-text {
    font-size: 13px;
}

.vault-subvault-grid.view-grid .vault-record-meta-line {
    font-size: 11px;
}

.vault-subvault-grid.view-grid .vault-add-record-button {
    padding: 6px 12px;
    min-height: 30px;
    font-size: 12px;
}

@media (max-width: 720px) {
    .vault-hub-title-row {
        flex-direction: column;
        align-items: stretch;
    }

    .vault-subvault-grid.view-grid {
        grid-template-columns: 1fr;
    }

    .vault-subvault-card {
        grid-template-columns: 1fr auto;
        padding-left: 18px;
    }

    .vault-drag-handle {
        display: none;
    }

    .vault-subvault-header,
    .vault-subvault-description,
    .vault-record-list,
    .vault-empty-state,
    .vault-subvault-footer {
        grid-column: 1 / span 2;
    }
}

@media (min-width: 1400px) {
    .vault-hub-page.grid-mode .vault-subvault-grid.view-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (hover: none), (pointer: coarse) {
    .vault-drag-handle {
        display: none;
    }
}