html, body {
    margin: 0;
    font-family: 'Avenir Next', 'Segoe UI Variable', 'Segoe UI', sans-serif;
}

html {
    /* MudBlazor's own CSS sets this on body, not html - without it, page area below
       short content (e.g. min-height:100vh pushing html taller than body) falls
       through to the browser's default canvas fill instead of the theme background. */
    background-color: var(--mud-palette-background);
}

/* Contextual "?" docs link (see DocsLink.razor): muted until hovered/focused, so it reads as a
   secondary affordance next to a heading rather than competing with the heading itself. */
.docs-link {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    color: var(--mud-palette-text-secondary);
}

.docs-link:hover,
.docs-link:focus-visible {
    color: var(--mud-palette-primary);
}

.dotmarc-footer {
    margin-top: 1rem;
    padding: 1rem 0 1.5rem;
    border-top: 1px solid var(--mud-palette-lines-default);
    text-align: center;
}

/* A button placed beside an outlined input. MudBlazor's outlined inputs are 56px tall and its buttons about 36px,
   so the row looked lopsided. This makes the button the same height as the input, keeping the row one control.
   The 8px top margin matches the space MudBlazor leaves above an outlined input for its floating label, so the
   tops line up as well as the heights. */
.mud-button-root.button-beside-input {
    height: 56px;
    margin-top: 8px;
}

/* Button labels are uppercase, and capital letters sit above the centre of their line box. An icon centred on the
   line box therefore read about 1px low against the text (measured on every icon button). Nudging it up by a
   fraction of the font size centres it on the capitals, and scales for small buttons. */
.mud-button-root .mud-button-icon-start,
.mud-button-root .mud-button-icon-end {
    transform: translateY(-0.08em);
}

/* The dashboard summary cards: the number is centred above its caption and sized with the viewport (bigger on wide
   screens, but small enough that six fit across at the medium breakpoint). */
.stat-card {
    text-align: center;
}

.stat-card .stat-value {
    font-size: clamp(1.75rem, 2.6vw, 2.75rem);
    line-height: 1.1;
    margin-bottom: 0.25rem;
}

/* The reject/quarantine reasons list: compact bullets, with reasons that have no messages dimmed. */
.reason-list {
    margin: 0;
    padding-left: 1.25rem;
    font-size: 0.875rem;
    line-height: 1.6;
}

.reason-list .reason-none {
    color: var(--mud-palette-text-secondary);
}