:root {
    --fontSizeBase300: 16px;
    --lineHeightBase300: 24px;
    scroll-padding-bottom: var(--notebook-save-clearance, 24px);
    font-family: var(--fontFamilyBase, system-ui, sans-serif);
    line-height: 1.5;
    background: var(--colorNeutralBackground1, #fff);
    color: var(--colorNeutralForeground1, #242424);
}

/* Ivory neutrals and leaf-green accents complement the logo's coral brand palette. */
:root[data-appearance="light"] {
    --colorNeutralBackground1: #fffdf9;
    --colorNeutralBackground2: #faf5ed;
    --colorNeutralBackground3: #f0e8df;
    --colorNeutralForeground1: #302e2a;
    --colorNeutralForeground2: #655e55;
    --colorNeutralStroke2: #e5dbcf;
    --colorBrandBackground2: #fbe8e4;
    --colorBrandBackground: #ac4f46;
    --colorBrandBackgroundHover: #943f37;
    --colorBrandBackgroundPressed: #80382f;
    --colorBrandForeground1: #ac4f46;
    --colorBrandForegroundLink: #9b443b;
    --colorBrandForegroundLinkHover: #80382f;
    --colorPaletteGreenBackground1: #eaf0e3;
    --colorPaletteGreenForeground1: #4f7138;
    background: var(--colorNeutralBackground2);
}

:root[data-appearance="dark"] {
    --colorNeutralBackground1: #262b24;
    --colorNeutralBackground2: #1d211c;
    --colorNeutralBackground3: #353c30;
    --colorNeutralForeground1: #f8f1e8;
    --colorNeutralForeground2: #cdc1b3;
    --colorNeutralStroke2: #444b3d;
    --colorBrandBackground2: #432e2c;
    --colorBrandBackground: #e4786d;
    --colorBrandBackgroundHover: #ee9287;
    --colorBrandBackgroundPressed: #d46b60;
    --colorNeutralForegroundOnBrand: #251c19;
    --colorBrandForeground1: #f0a69c;
    --colorBrandForegroundLink: #f0a69c;
    --colorBrandForegroundLinkHover: #f7c4bc;
    --colorPaletteGreenBackground1: #2d3926;
    --colorPaletteGreenForeground1: #b5ce9c;
    background: var(--colorNeutralBackground2);
}

/* Fluent's baseline assumes a viewport-contained app. This shell scrolls the document. */
body { height: auto; min-height: 100dvh; overflow: visible; background: var(--colorNeutralBackground2); color: var(--colorNeutralForeground1); font-size: 1rem; line-height: 1.55; }
.eyebrow { font-size: 0.75rem; font-weight: var(--fontWeightSemibold, 600); letter-spacing: 0.12em; color: var(--colorPaletteGreenForeground1); margin-bottom: var(--spacingVerticalM, 1rem); }
.lede { font-size: var(--fontSizeBase400, 1.125rem); line-height: 1.7; color: var(--colorNeutralForeground2); max-width: 48rem; }
.muted { color: var(--colorNeutralForeground2); }
.preserve-lines { white-space: pre-wrap; }
.back-link { display: inline-block; margin-bottom: var(--spacingVerticalXL, 1.5rem); text-decoration: none; font-size: var(--fontSizeBase200, 0.875rem); }
.action-link { display: inline-block; min-height: 44px; padding: 10px var(--spacingHorizontalL, 1rem); border-radius: var(--borderRadiusMedium, 0.375rem); border: 1px solid var(--colorNeutralStroke2); background: var(--colorNeutralBackground1); font-weight: var(--fontWeightSemibold, 600); line-height: 22px; text-decoration: none; }
.action-link.primary { background: var(--colorBrandBackground); border-color: var(--colorBrandBackground); color: var(--colorNeutralForegroundOnBrand); }
.action-link.primary:hover { background: var(--colorBrandBackgroundHover); }
.notebook-panel { width: 100%; min-width: 0; padding: clamp(1.125rem, 3vw, 2rem); margin-block: var(--spacingVerticalL, 1rem); background: var(--colorNeutralBackground1); border: 1px solid var(--colorNeutralStroke2); border-radius: var(--borderRadiusXLarge, 0.75rem); }
.editor-form fluent-field { width: 100%; min-width: 0; grid-template-columns: minmax(0, 1fr); }
.editor-form fluent-text-input, .editor-form fluent-text-area, .editor-form fluent-textarea, .editor-form fluent-select, .editor-form fluent-dropdown, .editor-form fluent-number-input { width: 100%; min-width: 0; }
.editor-form > * { margin-bottom: var(--spacingVerticalL, 1rem); }
/* Field margins must not shift a labeled input above its adjacent action. */
.control-row > fluent-field { margin-block: 0; }
/* FluentField reserves a final 2px grid gap for its optional message row. */
.control-row > fluent-button { margin-bottom: var(--spacingVerticalXXS); }
.badge { display: inline-block; padding: var(--spacingVerticalXS, 0.25rem) var(--spacingHorizontalM, 0.75rem); background: var(--colorNeutralBackground3); color: var(--colorNeutralForeground2); border-radius: var(--borderRadiusCircular, 999px); font-size: var(--fontSizeBase200, 0.875rem); font-weight: var(--fontWeightSemibold, 600); }
.badge.standard { background: var(--colorPaletteGreenBackground1); color: var(--colorPaletteGreenForeground1); }
.empty-state { padding: clamp(2rem, 7vw, 5rem); text-align: center; border: 1px dashed var(--colorBrandStroke2); border-radius: var(--borderRadiusXLarge); margin-block: var(--spacingVerticalXXL); background: var(--colorNeutralBackground1); }
.empty-state p { max-width: 34rem; margin-inline: auto; }
.change-summary { padding-left: var(--spacingHorizontalL); font-size: var(--fontSizeBase200); }
.change-summary li { margin-bottom: var(--spacingVerticalS); }
.score-chip { padding: var(--spacingVerticalS) var(--spacingHorizontalM); border-radius: var(--borderRadiusMedium); background: var(--colorBrandBackground2); font-size: var(--fontSizeBase200); }
.score-chip strong { margin-left: var(--spacingHorizontalS); }
.score-list dt { margin-top: var(--spacingVerticalM); }
.score-list dd { margin-left: 0; color: var(--colorNeutralForeground2); white-space: pre-wrap; }
.evaluation-entry, .metric-editor { padding-block: var(--spacingVerticalL); border-top: 1px solid var(--colorNeutralStroke2); }
details summary { cursor: pointer; color: var(--colorBrandForegroundLink); padding-block: var(--spacingVerticalM); }
details > :not(summary) { margin-top: var(--spacingVerticalM); }
caption { text-align: start; font-weight: var(--fontWeightSemibold); margin-bottom: var(--spacingVerticalM); }
img { max-width: 100%; }

@media print {
    .print-sheet :focus-visible { outline: none; }
    :root[data-appearance] { color-scheme: light; --colorNeutralBackground1: white; --colorNeutralBackground2: white; --colorNeutralForeground1: black; --colorNeutralForeground2: #333; --colorBrandForeground1: #333; }
    .site-header, .site-navigation, .site-footer, .no-print, .skip-link, #blazor-error-ui { display: none; }
    .app-layout { display: block; height: auto; }
    .content-container { max-width: none; padding: 0; }
    .print-sheet h1 { font-family: Georgia, serif; font-size: 28pt; }
    .print-sheet { color: black; background: white; }
    .print-sheet details { content-visibility: visible; }
    .print-sheet li { break-inside: avoid; }
    @page { margin: 18mm; }
}

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

body {
    margin: 0;
}

h1 {
    font-family: Georgia, 'Times New Roman', serif;
    font-weight: 400;
    font-size: clamp(2rem, 4vw, 3.25rem);
    letter-spacing: -0.035em;
}

h2 {
    font-family: Georgia, 'Times New Roman', serif;
    font-weight: 400;
    font-size: clamp(1.4rem, 2.4vw, 1.8rem);
}

h3 {
    font-size: 1.125rem;
}

h1, h2, h3, h4, p, ul, ol {
    margin-block: 0 1rem;
}

h1, h2, h3, h4 {
    line-height: 1.25;
}

a {
    color: var(--colorBrandForegroundLink, #0f6cbd);
    text-underline-offset: 0.15em;
}

a:hover {
    color: var(--colorBrandForegroundLinkHover, #115ea3);
}

:focus-visible {
    outline: 2px solid var(--colorBrandForegroundLink, #0f6cbd);
    outline-offset: 3px;
}

main {
    overflow-wrap: anywhere;
}

button, input, select, textarea {
    font: inherit;
}

.content-container fluent-button { min-height: 44px; }
.editor-form fluent-text-input, .editor-form fluent-number-input, .editor-form fluent-select { min-height: 44px; }
.editor-form input, .editor-form select, .editor-form textarea { font-size: 1rem; }
.native-button, .account-form button, .account-sections button, .nav-account-actions button { min-height: 44px; }

/* Native SSR controls only: Fluent dropdowns render their own light-DOM buttons. */
.native-button,
.account-form button,
.account-sections button,
.site-navigation button,
#blazor-error-ui button {
    max-width: 100%;
    min-height: 44px;
    padding: 5px var(--spacingHorizontalM, 0.75rem);
    line-height: 20px;
    cursor: pointer;
    border: 1px solid var(--colorNeutralStroke1, #d1d1d1);
    border-radius: var(--borderRadiusMedium, 4px);
    background: var(--colorNeutralBackground1, #fff);
    color: var(--colorNeutralForeground1, #242424);
    font-weight: 600;
}

button:disabled {
    cursor: default;
}

hr {
    width: 100%;
    margin-block: 1rem;
    border: 0;
    border-top: 1px solid var(--colorNeutralStroke2, #e0e0e0);
}

.account-sections,
.account-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
    width: 100%;
    max-width: 36rem;
}

.account-form {
    justify-items: start;
}

.account-form hr {
    margin: 0;
}

.form-field {
    display: grid;
    gap: 0.25rem;
    width: 100%;
    min-width: 0;
}

.form-field input,
.form-field select,
.form-field textarea {
    width: 100%;
    min-width: 0;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--colorNeutralStroke1, #d1d1d1);
    border-bottom-color: var(--colorNeutralStrokeAccessible, #616161);
    border-radius: var(--borderRadiusMedium, 4px);
    background: var(--colorNeutralBackground1, #fff);
    color: inherit;
}

.form-field button {
    justify-self: start;
}

.checkbox-field {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: baseline;
    gap: 0.5rem;
}

.actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
    align-items: start;
    gap: 0.75rem;
}

.validation-message,
.validation-errors,
.error-text {
    color: var(--colorPaletteRedForeground1, #a4262c);
}

.invalid {
    outline: 1px solid var(--colorPaletteRedForeground1, #a4262c);
}

.invalid:focus-visible {
    outline: 2px solid var(--colorBrandForegroundLink, #0f6cbd);
}

.notice {
    margin-block: 1rem;
    padding: 1rem;
    border: 1px solid var(--colorNeutralStroke1, #d1d1d1);
    border-inline-start-width: 0.25rem;
}

.notice > :last-child {
    margin-bottom: 0;
}

.notice[data-kind="error"] {
    border-color: var(--colorPaletteRedForeground1, #a4262c);
}

.notice[data-kind="warning"] {
    border-color: var(--colorPaletteDarkOrangeForeground1, #8a3707);
}

.notice[data-kind="success"] {
    border-color: var(--colorPaletteGreenForeground1, #107c10);
}

.notice[data-kind="information"] {
    border-color: var(--colorBrandForegroundLink, #0f6cbd);
}

.table-container {
    max-width: 100%;
    overflow-x: auto;
    margin-block: 1rem;
}

table {
    width: 100%;
    min-width: 24rem;
    border-collapse: collapse;
}

table .actions {
    grid-template-columns: max-content;
}

th, td {
    padding: 0.5rem;
    border-bottom: 1px solid var(--colorNeutralStroke2, #e0e0e0);
    text-align: start;
    vertical-align: top;
}

.recovery-code {
    font-size: 1rem;
}

/* Identity keeps native form-associated controls for static SSR and passkeys. */
.account-form button[type="submit"]:not([name="__passkeySubmit"]) {
    background: var(--colorBrandBackground, #0f6cbd);
    border-color: var(--colorBrandBackground, #0f6cbd);
    color: var(--colorNeutralForegroundOnBrand, #fff);
}

.account-form button[type="submit"]:not([name="__passkeySubmit"]):hover {
    background: var(--colorBrandBackgroundHover, #115ea3);
}

.account-sections {
    padding: clamp(1rem, 2vw, 1.5rem);
    border: 1px solid var(--colorNeutralStroke2, #e0e0e0);
    border-radius: var(--borderRadiusLarge, 6px);
    background: var(--colorNeutralBackground1, #fff);
    box-shadow: var(--shadow2, 0 1px 2px #00000014);
}