:root{color:#153c38;background:#f4f5ed}header{padding:28px 5vw;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #d9e0d6}.brand{font-size:24px;font-weight:750;color:inherit;text-decoration:none}.brand span{display:block;font-size:12px;letter-spacing:.08em;font-weight:500;margin-top:4px}main{max-width:1100px;margin:8vh auto;padding:0 30px;display:flex;gap:70px;align-items:center;min-height:55vh}.note,footer{font-size:13px;color:#61746b}.note{margin-top:24px}footer{padding:25px 5vw}input{min-height:48px;padding:12px;width:100%;margin:8px 0 16px}#blazor-error-ui{display:none;background:#fff6ca;padding:15px;position:fixed;bottom:0;width:100%}@media(max-width:750px){main{flex-direction:column;gap:20px;align-items:stretch;margin:30px auto}header{padding:20px}}

.passport-main{display:block;width:100%;max-width:850px;margin:40px auto}.passport-panel{max-width:none;min-width:0}fieldset{min-width:0;border:1px solid #becfc1;border-radius:8px;margin:20px 0;padding:18px}legend{font-weight:650;padding:0 8px}.passport-panel li{margin:18px 0}nav fluent-link{display:inline-flex;align-items:center;min-height:44px;padding:8px;margin:4px}

/* BEGIN SHARED FLUENT ACCOUNT DESIGN — sync with tools/sync-auth-presentation.py. */
:root, .public-site {
    --fontFamilyBase: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --fontSizeBase900: clamp(calc(20rem / 9), 4.5vw, calc(32rem / 9));
    --lineHeightBase900: 1.15;
    --fontSizeBase800: clamp(2rem, 1.5rem + 1.5vw, calc(8rem / 3));
    --lineHeightBase800: 1.2;
    --fontSizeBase700: clamp(1.75rem, 1.5rem + 1vw, calc(20rem / 9));
    --lineHeightBase700: 1.25;
    --fontSizeBase600: clamp(1.5rem, 1.25rem + .75vw, calc(16rem / 9));
    --lineHeightBase600: 1.25;
    --fontSizeBase500: clamp(1.125rem, 1rem + .3vw, calc(4rem / 3));
    --lineHeightBase500: 1.4;
    --fontSizeBase400: var(--fontSizeBase300);
    --lineHeightBase400: 1.4;
    --fontSizeBase300: 1rem;
    --lineHeightBase300: 1.6;
    --fontSizeBase200: .85rem;
    --lineHeightBase200: 1.5;
    --fontWeightRegular: 400;
    --fontWeightMedium: 500;
    --fontWeightSemibold: 600;
}
:root { font-family: var(--fontFamilyBase); font-size: 112.5%; }
* { box-sizing: border-box; }
body { margin: 0; line-height: var(--lineHeightBase300, 1.6); }
h1 { font-size: var(--fontSizeBase800, calc(8rem / 3)); line-height: var(--lineHeightBase800, 1.2); font-weight: var(--fontWeightMedium, 500); letter-spacing: -.025em; }
h2 { font-size: var(--fontSizeBase600, calc(16rem / 9)); line-height: var(--lineHeightBase600, 1.25); font-weight: var(--fontWeightMedium, 500); letter-spacing: -.015em; margin-block: var(--spacingVerticalM, .75rem); }
h3 { font-size: var(--fontSizeBase500, calc(4rem / 3)); line-height: var(--lineHeightBase500, 1.4); font-weight: var(--fontWeightSemibold, 600); letter-spacing: -.015em; }
p { line-height: inherit; }
label { font-size: var(--fontSizeBase300, 1rem); line-height: var(--lineHeightBase300, 1.6); }
button, input, select, textarea, fluent-button, fluent-anchor-button { font: inherit; }
button, fluent-button, fluent-anchor-button { font-weight: var(--fontWeightRegular, 400); }
/* Fluent button typography is set inside its shadow root through these tokens. */
:is(fluent-button, fluent-anchor-button):not(.representative-confirmations *) {
    --fontSizeBase300: .9rem;
    --fontWeightSemibold: var(--fontWeightRegular, 400);
    font-size: var(--fontSizeBase300);
}
fluent-link:focus-visible, button:not([slot="control"]):focus-visible { outline: 3px solid #0b4d86; outline-offset: 3px; }
fluent-link { text-decoration-line: none; }
fluent-link:hover { text-decoration-line: underline; }
code, pre { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; }
p, li, label, fluent-link, h1, h2, h3, code { overflow-wrap: anywhere; }
[id] { scroll-margin-block: 24px; }
.site-skip-link { position: fixed; top: 12px; left: 20px; z-index: 30; transform: translateY(calc(-100% - 24px)); padding: 12px 18px; background: #fff; border: 2px solid #0b4d86; line-height: 1.4; }
.site-skip-link:focus-within { transform: translateY(0); }
.validation-summary-errors { font-size: var(--fontSizeBase200, .85rem); line-height: var(--lineHeightBase200, 1.5); color: var(--colorPaletteRedForeground1, #bc2f32); border: 2px solid var(--colorPaletteRedForeground1, #bc2f32); padding: 16px 20px; margin-block: 20px; }
.validation-summary-errors:focus { outline: 3px solid #0b4d86; outline-offset: 4px; }
.validation-summary-valid, .field-validation-valid { display: none; }
.field-validation-error { display: block; margin-block: -8px 16px; }
.field-message, .field-validation-error, .fluent-validation-message { color: var(--colorPaletteRedForeground1, #bc2f32); font-size: var(--fontSizeBase200, .85rem); line-height: var(--lineHeightBase200, 1.5); }
.field-message { margin-block: var(--spacingVerticalXS, .25rem) var(--spacingVerticalM, .75rem); }
.field-message[slot="message"] { margin: 0; }
.field-message:empty { display: none; }
.field-help { color: var(--colorNeutralForeground2, #424242); font-size: var(--fontSizeBase300, 1rem); line-height: var(--lineHeightBase300, 1.6); margin-block: var(--spacingVerticalXS, .25rem) var(--spacingVerticalM, .75rem); }
.fluent-validation-message :is(svg, fluent-icon) { display: none; }
@media (forced-colors: active) {
    button, input, select, textarea { border: 1px solid ButtonText; }
    fluent-link:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible { outline-color: Highlight; }
}

/* Restore Fluent's default 14/20px font scale locally; the site root is 18px at default browser settings.
   Relative values preserve browser text-size preferences and zoom. Native Fluent controls retain their own typography. */
.representative-confirmations {
    --fontSizeBase300: calc(14rem / 18);
    --lineHeightBase300: calc(20rem / 18);
    --fontSizeBase500: calc(20rem / 18);
    --lineHeightBase500: calc(28rem / 18);
    font-size: var(--fontSizeBase300);
    line-height: var(--lineHeightBase300);
}

/* Fluent owns button sizing and states; only destructive semantic colours are remapped. */
:is(.passkey-remove-button, .passkey-confirmations) {
    --colorBrandBackground: var(--colorPaletteRedBackground3, #c50f1f);
    --colorBrandBackgroundHover: var(--colorPaletteRedForeground2, #b10e1c);
    --colorBrandBackgroundPressed: var(--colorPaletteRedForeground1, #960b18);
}

/* One frame for all entry fields. Inset focus weight preserves the control dimensions. */
:is(input:not([type="checkbox"], [type="radio"], [type="hidden"]), select, textarea, fluent-text-input, fluent-text-area, fluent-number-input, fluent-dropdown) {
    --entry-border-color: var(--colorNeutralStrokeAccessible, #616161);
    --entry-focus-shadow: none;
}
:is(input:not([type="checkbox"], [type="radio"], [type="hidden"]), select, textarea, fluent-text-input, fluent-text-area, fluent-number-input, fluent-dropdown):focus-within {
    --entry-border-color: var(--entry-error-color, var(--colorBrandStroke1, #0f6cbd));
    --entry-focus-shadow: inset 0 0 0 2px var(--entry-border-color);
    outline: none;
}
:is(input:not([type="checkbox"], [type="radio"], [type="hidden"]), select, textarea, fluent-text-input, fluent-text-area, fluent-number-input, fluent-dropdown):is([aria-invalid="true"], .input-validation-error) {
    --entry-error-color: var(--colorPaletteRedForeground1, #bc2f32);
    --entry-border-color: var(--entry-error-color);
}
:is(input:not([type="checkbox"], [type="radio"], [type="hidden"]), select, textarea) {
    border: 1px solid var(--entry-border-color);
    border-radius: var(--borderRadiusMedium, .25rem);
    box-shadow: var(--entry-focus-shadow);
}
:is(fluent-text-input, fluent-text-area, fluent-number-input)::part(root) {
    border: 1px solid var(--entry-border-color);
    box-shadow: var(--entry-focus-shadow);
    outline: none;
}
:is(fluent-text-input, fluent-text-area, fluent-number-input)::part(root)::after { display: none; }
fluent-checkbox[aria-invalid="true"] { border: 2px solid var(--colorPaletteRedForeground1, #bc2f32); }
.field-validation-slot::part(message) { display: block; min-height: 2.7rem; }
@media (forced-colors: active) {
    :is(input:not([type="checkbox"], [type="radio"], [type="hidden"]), select, textarea, fluent-text-input, fluent-text-area, fluent-number-input, fluent-dropdown):focus-within { outline: 2px solid Highlight; outline-offset: 2px; }
}

/* END SHARED FLUENT ACCOUNT DESIGN */

.passport-panel input { max-width: 100%; }
@media (max-width: 750px) {
    .passport-header { align-items: flex-start; flex-wrap: wrap; gap: 12px; }
    .passport-main { padding-inline: 20px; margin-block: 24px; }
}

.care-snapshot-value { white-space: pre-wrap; overflow-wrap: anywhere; }