@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700&family=Playfair+Display:ital@1&display=swap');

/* a11y: Radzen's default placeholder grey (~3:1) fails WCAG AA. Darken to
   gray-500 (#6b7280 ≈ 4.8:1 on white) so input/dropdown placeholders pass. */
.rz-placeholder,
.rz-dropdown-label.rz-placeholder,
.rz-inputtext.rz-placeholder {
    color: #6b7280;
}


/* LIU Vet Med Autopsy — Theme Tokens
   Single source of truth for color, typography, radius, and shadow.
   Add a new hex only if no token covers it; if you find yourself reaching
   for a literal, the right answer is usually a token you didn't know existed. */
:root {
    /* Brand */
    --liu-blue: #69b3e7;
    /* Was identical to --liu-blue, so "dark" wasn't — anything relying on the pair for
       contrast (text on a tint, hover states, --status-info) silently had none. */
    --liu-blue-dark: #2f7fb5;
    --liu-blue-light: #E8F4FB;
    --liu-gold: #FFC72C;

    /* Legacy grey aliases — kept so existing rules still resolve. */
    --liu-gray: #f3f5f7;
    --liu-light-gray: #f3f5f7;
    --liu-medium-gray: #cecece;
    --liu-dark-gray: #888888;

    /* Role accents — hue encodes which side of LIU you're on, depth encodes rank.
       Cool = inside LIU, warm = the clinic, grey = no person. The old set collided
       (admin and manager shared one purple) and inverted (clinic staff wore the LIU
       brand blue), so the app's most important distinction was invisible.
       Every role gets an ink/tint pair: ink for text and marks, tint for pill grounds. */
    --role-superadmin: #6d28d9;
    --role-admin:      #0369a1;
    --role-doctor:     #0f766e;
    /* The clinic side. Indigo — cool like the rest of the app, so a row doesn't look
       like it wandered in from another product, but a hue LIU itself never uses: the
       LIU trio is violet, azure and teal, and indigo sits between them without being
       any of them. It replaces an amber family that matched nothing else on screen.
       Depth carries rank inside the family, deepest first.

       Honest limit: six roles in one cool family cannot all be told apart by hue at
       10px. These three are close to each other by construction — they're the same
       side, and they're rarely adjacent. The icon and the word do the rest. */
    --role-clinic:     #403aa6;
    --role-manager:    #2f2b7d;
    --role-staff:      #5b55c4;
    --role-system:     #52627a;

    /* Tint strength. One number, so every role pill is built the way a status pill is:
       saturated ink, and a ground mixed from that same ink rather than a second hex
       hand-picked to sit near it. */
    --role-tint: 12%;

    /* The rail's ground. Named for what it is — it was --role-admin-dark, a blue
       masquerading as a dark admin purple. */
    --rail-bg: #69b3e7;

    /* Decorative accent. Charts and KPI borders used to borrow --role-admin for "the
       purple one"; they aren't role identity, so they get their own token and keep the
       old hue rather than following the roles wherever those go next. */
    --accent-violet: #a476b3;

    /* Autopsy submit button — coordinated brand set (rest → hover → active). */
    --autopsy-submit-bg: #6dace0;
    --autopsy-submit-hover: #8B539D;
    --autopsy-submit-active: #483377;

    /* UI action button — admin/dashboard CTAs (rest → hover → disabled). */
    --ui-action: #2374ad;   /* darkened from #3498db: white-on-action now 5:1 (was 3.15, failed AA) */
    --ui-action-hover: #2980b9;
    --ui-action-disabled: #95a5a6;

    /* Text */
    --text-primary: #223c4f;
    --text-secondary: #374151;
    --text-muted: #6b7280;
    --text-subtle: #647488;   /* darkened from #94a3b8: now 4.8:1 on white (was 2.56, failed AA) */
    --text-inverse: #ffffff;

    /* Surfaces */
    --surface-base: #ffffff;
    --surface-raised: #f8f9fa;
    --surface-sunken: #f3f5f7;

    /* Borders */
    --border-default: #e5e7eb;
    --border-strong: #cbd5e1;
    --border-subtle: #ecf0f1;

    /* Status */
    --status-success: #2e7d32;
    --status-success-bg: #d4edda;
    --status-success-text: #155724;
    --status-danger: #c0392b;
    --status-danger-bg: #f8d7da;
    --status-danger-text: #721c24;
    --status-warning: #f0ad4e;
    --status-warning-bg: #fff8e6;
    --status-warning-text: #856404;
    --status-info: var(--liu-blue-dark);
    --status-info-bg: #d6eef7;
    --status-info-text: #1f5f8b;
    --success-green: var(--status-success);

    /* Typography */
    --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
    --font-body: Lato, 'Open Sans', Arial, sans-serif;

    /* Type scale — semantic, not pixel-based. Reach for a token, not a literal;
       if nothing fits, the design probably wants something to fit. */
    --text-xs:   0.7rem;    /* uppercase metadata labels */
    --text-sm:   0.85rem;   /* helpers, fine print, badges */
    --text-md:   0.95rem;   /* default body / form labels */
    --text-lg:   1.05rem;   /* prominent inline values */
    --text-xl:   1.25rem;   /* modal hero / card titles */
    --text-2xl:  1.5rem;    /* subtitles */
    --text-3xl:  1.8rem;    /* page titles */

    /* Weight */
    --weight-regular: 400;
    --weight-medium:  500;
    --weight-semi:    600;
    --weight-bold:    700;

    /* Line height */
    --leading-tight: 1.15;
    --leading-snug:  1.4;
    --leading-loose: 1.6;

    /* Letter spacing — uppercase chrome and slight optical lift on big titles. */
    --tracking-uppercase: 0.06em;
    --tracking-wide:      0.02em;

    /* Border radius scale */
    --r-input: 4px;
    --r-card: 6px;
    --r-button: 8px;
    --r-modal: 8px;
    --r-pill: 999px;

    /* Shadows */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 12px 35px rgba(15, 23, 42, 0.10);
    --shadow-card: var(--shadow-md);
    --shadow-hero: var(--shadow-lg);

    /* Neutral action buttons — a grey between --liu-medium-gray and
       --liu-dark-gray, used app-wide so action buttons read neutral, not blue. */
    --btn-neutral: #a8a8a8;
    --btn-neutral-hover: #8f8f8f;

    /* Radzen overrides */
    --rz-primary: #69B3E7 !important;
    --rz-input-disabled-color: #616161 !important;
    --rz-button-hover-shadow: var(--rz-shadow-2);
}

/* A Radzen primary button with nothing else said about it is LIU blue. That is all this
   rule is now: a FALLBACK.

   It used to be `!important` with a growing chain of `:not()`s — one per control that
   had been given a treatment of its own — and every one of those was added after the
   rule silently repainted something blue: the form's Back button, the grid's edit
   pencils, the row expander, the Add Manager button, every dialog's confirm. A rule at
   six classes and !important beats anything a component can reasonably write about
   itself, so the exclusion list could only ever grow.
   Without !important and without the chain, it sits at two classes and loses to any rule
   that says something more specific — which is how a default should behave. */
.rz-button.rz-primary {
    background-color: var(--liu-blue);
    border-color: var(--liu-blue);
}

.rz-button.rz-primary:hover:not(:disabled):not(.rz-state-disabled),
.rz-button.rz-primary:active:not(:disabled):not(.rz-state-disabled) {
    background-color: #4a93cf;
    border-color: #4a93cf;
}

/* Editorial brand title — one word in italic Playfair, the rest in clean sans.
   Use sparingly: H1 page titles, hero surfaces, modal titles. Don't apply to
   body copy or anything under ~16px — italic serif loses readability small. */
.brand-title {
    font-family: var(--font-body);
    font-weight: var(--weight-semi);
    color: var(--text-primary);
    line-height: var(--leading-tight);
    letter-spacing: 0.005em;
    margin: 0;
}

.brand-title em,
.brand-title .accent {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: var(--weight-regular);
    color: var(--liu-blue-dark);
    /* Slight up-bump so the italic serif's optical center matches the sans. */
    font-size: 1.05em;
    margin-right: 0.15em;
}

.brand-title.brand-title--gold em,
.brand-title.brand-title--gold .accent {
    color: var(--liu-gold);
}


html, body {
    font-family: Lato,'Open Sans',Arial;
    background-image: url('images/vetmed-stain-mix.jpg');
    background-repeat:no-repeat;
    background-size:cover;
}

a, .btn-link {
    color: #006bb7;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.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 #258cfb;
}


.content {
    padding: 0 !important;
    display: flex;
    justify-content: center;
    width:100%;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    /*
       outline: 1px solid #26b050;
   */
}

.invalid {
    outline: 1px solid var(--status-danger);
}

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

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, var(--status-danger);
    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: #929292;
}

.top-nav{
    background-color: #f1f1f1
}

.top-nav a{
    color: #55a7ff
}

/* The numeric input's step buttons. They were painted LIU blue — two filled brand-blue
   squares stacked inside a text field, for something that adds one to a number. Quiet
   ink on the field's own ground, colour only on hover, like every other control that
   sits inside an input. */
.rz-numeric-button {
    background-color: transparent !important;
    color: var(--text-subtle) !important;
    border: 0 !important;
}

.rz-numeric-button:hover {
    background-color: var(--surface-raised) !important;
    color: var(--liu-blue-dark) !important;
}

.rz-numeric-button .rzi {
    font-size: var(--rz-numeric-button-height);
    vertical-align: top;
    background-color: transparent;
    color: inherit;
}
.rz-state-highlight.rz-menuitem, .rz-state-highlight.rz-autocomplete-list-item, .rz-state-highlight.rz-multiselect-item, .rz-autocomplete-items li.rz-state-highlight, .rz-dropdown-items li.rz-state-highlight, .rz-multiselect-items li.rz-state-highlight, .rz-dropdown-item.rz-state-highlight {
    background-color: var(--liu-blue);
}
.rz-menuitem:hover, .rz-autocomplete-list-item:hover, .rz-multiselect-item:hover, .rz-autocomplete-items li:hover, .rz-dropdown-items li:hover, .rz-multiselect-items li:hover, .rz-dropdown-item:hover {
    background-color: #600878;
}
.rz-alert.rz-info.rz-shade-default {
    background-color: var(--liu-light-gray);
    color: var(--liu-dark-gray);
}
.page {
    /* background:#f3f4f6; */
}

/* ================================
   Page shell (your own markup)
   ================================ */

.autopsy-page {
    min-height: 100vh;
    /* Paint the vetmed stain here too so logged-in roles (whose MainLayout wraps
       the page in .admin-wrapper with a flat gray bg) still see the autopsy look.
       Don't use fixed attachment — once the sidebar is present, the .autopsy-page
       box is narrower than the viewport and a fixed-attached image gets sliced
       into a misaligned strip. Sizing to the element keeps the stain coherent. */
    background-image: url('images/vetmed-stain-mix.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    padding: 2.5rem 0 3rem;
    width: 100%;
}

.autopsy-shell {
    max-width: 1100px;
}

/* ================================
   Hero / banner (RadzenCard output)
   ================================ */

.autopsy-page  .autopsy-card.rz-card {
    border-radius: 3px;
    /*border: 1px solid var(--border-default);*/
    box-shadow: 0 12px 35px rgba(15, 23, 42, 0.10);
    background-color: #ffffff;
    padding: 0; /* important: content handles its own padding */
    overflow: hidden; /* so the gradient + form share the same rounded corners */
}

.autopsy-form-wrapper {
    padding: 1rem 2.75rem 1.5rem;
    /*background-color: #ffffff;*/
}

/* ================================
   Main form card (RadzenCard)
   ================================ */

.autopsy-page  .autopsy-card.rz-card {
    /*border-radius: 18px;*/
    /*border: 1px solid var(--border-default);*/
    box-shadow: 0 12px 35px rgba(15, 23, 42, 0.10);
    padding: 0;
    /*background-color: #ffffff;*/
}

/* This is a class on RadzenTemplateForm */
.autopsy-page  .autopsy-form {
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
}

/* ================================
   Sections (your own markup)
   ================================ */

.form-section {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

/* No margin of its own. The caption-to-content gap is owned by ONE property —
   .autopsy-page .form-section's `gap` — because it used to be the sum of three
   (this, the h2's margin, and that gap), and a sum drifts the moment a section's
   header renders anything different. */
.form-section-header {
    margin-bottom: 0;
}

/* Only bites if a header ever carries prose under its caption again. */
.form-section-header > * + * { margin-top: 0.35rem; }

/* A caption with a control on its line: caption left, control hard right. Baseline
   rather than centre, so the button sits on the caption's line instead of straddling
   the taller of the two. */
.section-head-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
}

.section-head-row > h2 { flex: 0 1 auto; }

    /* The same section caption the admin side uses. It was already uppercase and
       tracked, just at `font-size: medium` in a hardcoded grey — so this is mostly a
       matter of committing to the tokens rather than a new idea. */
    .form-section-header h2,
    .form-section-header h6 {
        font-size: var(--text-xs);
        color: var(--text-subtle);
        font-weight: var(--weight-bold);
        letter-spacing: var(--tracking-uppercase);
        text-transform: uppercase;
        margin-bottom: 0;
    }

.section-helper-text {
    font-size: 0.875rem;
    color: var(--text-muted);
    margin: 0;
}

/* ================================
   Radzen fieldsets
   ================================ */

.autopsy-page  .form-fieldset.rz-fieldset {
    border-radius: 10px;
    border: 1px solid var(--border-default);
    padding: 1.25rem 1.25rem 1.1rem;
    margin: 0;
    background-color: #ffffff;
    box-shadow: 0 6px 20px rgba(15, 23, 42, 0.04);
}

/* legend rendered by RadzenFieldset */
.autopsy-page  .form-fieldset .rz-fieldset-legend {
    display: none; /* we use our own section headers */
}

/* ================================
   Layout helpers (your own markup)
   ================================ */


.form-row-item {
}



.form-row-span {
    grid-column: 1 / -1;
}

.form-stack {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}


.form-di-content {
    gap: 2rem
}

.form-di-row {
    gap: 4rem;
}


    .form-di-row .form-row-item {
        display: flex;
        flex-direction: column;
        width: 100%;
        justify-content: flex-start;
    }

.form-row-item.or {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100px;
}

.form-section.submit .form-di-row {
    gap: 0rem !important;
    align-items: flex-start !important;
}



.form-section.additional .form-row-item.or,
.form-section.tribute .form-row-item.or {
    width: 0px;
}



.form-di-row .or span {
    font-size: var(--text-sm); /* slightly larger */
    letter-spacing: var(--tracking-uppercase);
    text-transform: uppercase;
    color: #9ca3af; /* slate-400-ish */
    padding: 0.25rem 0.75rem; /* more breathing room */
    border-radius: 999px;
    background-color: #f3f4f6; /* light gray pill */
    font-weight: var(--weight-medium); /* adds presence */
}



/* ================================
   Inputs / labels / radios (Radzen)
   ================================ */

/* --text-md at medium weight. The size the token scale calls "default body / form
   labels" was never the problem — semibold, near-black and tracked out was. Dropping to
   0.85 and then 0.7 chased the symptom; a label reads as a label because it's lighter
   and quieter than its field, not because it's smaller. */
.autopsy-page  .autopsy-form .rz-label {
    display: block;
    margin-bottom: 0.25rem;
    font-size: var(--text-md);
    color: var(--text-muted);
    line-height: var(--leading-snug);
    letter-spacing: 0;
}

.autopsy-page  .autopsy-form .rz-dropdown,
.autopsy-page  .autopsy-form .rz-numeric-input,
.autopsy-page  .autopsy-form .rz-textbox:not(.address) {
    width: 100% !important;
}

/* Slight spacing between label and control */
.autopsy-page  .form-row-item .rz-dropdown,
.autopsy-page  .form-row-item .rz-numeric-input,
.autopsy-page  .form-row-item .rz-textbox,
.autopsy-page  .form-stack .rz-dropdown,
.autopsy-page  .form-stack .rz-numeric-input,
.autopsy-page .form-stack .rz-textbox {
    margin-top: 0.15rem;
}

/* Radio button horizontal spacing */
.autopsy-page .autopsy-form .rz-radiobutton-list-horizontal .rz-radiobutton {
    margin-right: 1.2rem;
}

.autopsy-page .autopsy-form .rz-radiobutton-label {
    font-size: var(--text-sm);
}

/* Checkbox + label alignment.
   Radzen's checkbox root is `.rz-chkbox`, not `.rz-checkbox` — so this rule matched
   nothing and every checkbox caption fell through to the field-label rule above:
   block-level, semibold, with a margin under it. That is why "I confirm this
   submission is authorized…" was set heavier than the sentence it is. */
.autopsy-page .autopsy-form .rz-chkbox + .rz-label,
.autopsy-page .autopsy-form .rz-chkbox + label,
.autopsy-page .autopsy-form .rz-checkbox + .rz-label,
.autopsy-page .autopsy-form .rz-checkbox + label {
    display: inline-block;
    margin: 0 0 0 0.45rem;
    font-size: var(--text-sm);
    font-weight: var(--weight-regular);
    color: var(--text-secondary);
    letter-spacing: 0;
}

/* Small muted text styles (used on RadzenLabel) */
.autopsy-page .text-muted {
    color: var(--text-muted) !important;
}




/* Submit button */
/* ---- the two button tiers ----
   Straight from the case page, which has exactly two: the ACTION the view is waiting on
   (.step-next — a tinted fill, blue ink, no shadow) and everything else (.case-tool —
   transparent with a quiet outline). Same 8px box on both, which is most of what makes
   them read as one set.

   Tier 1: the action. Solid blue with a coloured drop shadow was a third treatment that
   exists nowhere else in the app, and the hover turned it purple. */
.autopsy-page .autopsy-submit-btn.rz-button,
.thankyou-page .autopsy-submit-btn.rz-button {
    min-width: 150px;
    padding: 0.6rem 1.4rem;
    background-color: var(--liu-blue-light);
    border: 1px solid #bcdcf1;
    border-radius: var(--r-button);
    color: #1f5f8b;
    font-size: var(--text-sm);
    font-weight: var(--weight-semi);
    box-shadow: none;
    transition: filter 0.12s ease, transform 0.12s ease;
    align-self: end;
    margin-top: 1rem;
}

.autopsy-page .autopsy-submit-btn.rz-button:hover:not(:disabled),
.thankyou-page .autopsy-submit-btn.rz-button:hover:not(:disabled) {
    background-color: var(--liu-blue-light);
    border-color: #bcdcf1;
    color: #1f5f8b;
    filter: brightness(0.97);
    transform: translateY(-1px);
    box-shadow: none;
}

.autopsy-page .autopsy-submit-btn.rz-button:active:not(:disabled) { transform: none; }

/* Same story on the form's own action button: a click leaves it focused, and without
   this it kept Radzen's focus fill until you clicked elsewhere. Mouse focus is the
   resting look; the keyboard gets a ring. */
.autopsy-page .autopsy-submit-btn.rz-button:focus:not(:disabled),
.thankyou-page .autopsy-submit-btn.rz-button:focus:not(:disabled) {
    background-color: var(--liu-blue-light);
    border-color: #bcdcf1;
    color: #1f5f8b;
    outline: none;
    box-shadow: none;
}

.autopsy-page .autopsy-submit-btn.rz-button:focus-visible,
.thankyou-page .autopsy-submit-btn.rz-button:focus-visible {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--liu-blue-dark) 20%, transparent);
}

/* And the tool tier — Back, Add files, Fill Test Data. */
.autopsy-page .rz-button.form-tool:focus-visible,
.autopsy-page .spec-upload:focus-within {
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--liu-blue-dark) 20%, transparent) !important;
}

/* ---- the footer row ----
   The row had no rules of its own — it was three Bootstrap utilities, and each button
   then overrode `align-items-center` with an `align-self` of its own: the tool tier
   pinned to flex-start, the action tier to end, plus a 1rem top margin left over from
   when the action stood alone. Two buttons on one line, at two different heights.
   The row owns the alignment now; the buttons stop arguing with it. */
.autopsy-page .wizard-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1.25rem;
}

.autopsy-page .wizard-footer .rz-button,
.thankyou-page .thankyou-actions .rz-button {
    align-self: center;
    margin-top: 0;
}

/* A lone action still sits right, since space-between puts a single child at the start. */
.autopsy-page .wizard-footer > .rz-button:only-child { margin-left: auto; }

/* ---- dev tools ----
   Right-aligned above the form: they aren't part of it, and on the left they read as
   its first control. Only rendered when AppMode:AllowTesting is on. */
.autopsy-page .dev-tools {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

/* Tier 2: everything that isn't the action — Add files, and the dev-only Fill Test
   Data. The case page's .case-tool, one step up in size to sit in a form rather than
   in a top bar. */
.autopsy-page .spec-upload,
.autopsy-page .rz-button.form-tool {
    display: inline-flex;
    align-items: center;
    /* A flex column stretches its children across the cross axis unless told not to, and
       inline-flex doesn't opt out of that — which is what ran Fill Test Data the full
       width of the form. */
    align-self: flex-start;
    gap: 0.4rem;
    min-width: 0;
    padding: 0.35rem 0.8rem;
    background: transparent !important;
    border: 1px solid var(--border-default) !important;
    border-radius: var(--r-button);
    box-shadow: none !important;
    cursor: pointer;
    font-family: inherit;
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--text-muted) !important;
}

/* The background has to be restated on hover, not just inherited: Radzen's own
   `.rz-button:hover` paints a dark fill, and with only the text and border overridden
   here the label went dark-on-dark the moment the pointer touched it. A faint raised
   tint instead — the same one the case page's tools use. */
.autopsy-page .spec-upload:hover,
.thankyou-page .rz-button.form-tool:hover:not(:disabled),
.autopsy-page .rz-button.form-tool:hover:not(:disabled) {
    background: var(--surface-raised) !important;
    border-color: var(--border-strong) !important;
    color: var(--text-primary) !important;
}

/* Focus and active are Radzen's other two chances to repaint it. */
.autopsy-page .rz-button.form-tool:focus:not(:disabled),
.autopsy-page .rz-button.form-tool:active:not(:disabled) {
    background: var(--surface-raised) !important;
    color: var(--text-primary) !important;
    box-shadow: none !important;
}

.autopsy-page .spec-upload input[type="file"] { display: none; }
.autopsy-page .spec-upload .rzi,
.autopsy-page .rz-button.form-tool .rzi { font-size: var(--text-md); }

/* The purple :active fill that used to live here is gone — the last survivor of the old
   solid-blue-CTA-with-a-purple-press treatment. Holding the button turned it white on
   #483377 for as long as you held it, on pages where nothing else is purple. The action
   tier cancels its own lift on :active, which is all a press needs to say. */

.menu {
    min-width: fit-content;
    font-size: 2rem;
    padding: 1rem;
    background: none;
    box-shadow: none;
    border-radius: 3px;
    color: #691384;
    transition: all 0.2s ease;
}
    .menu:hover {
        color: #691384;
        transform: translateY(-1px);
        cursor:pointer;
    }
    .menu:active {
        color: var(--autopsy-submit-active);
        transform: translateY(0px);
    }
   



/* Radio button container tweak */
.autopsy-page  .rz-radio-btn {
    display: flex !important;
}



/* Zero-size scroll target placed at the top of each form field, used by
   scrollToFirstError to bring an invalid field into view with header clearance. */
.field-anchor {
    display: block;
    height: 0;
    scroll-margin-top: 90px;
}

/* Red asterisk marking a required field, and the legend explaining it. */
.required-marker {
    color: var(--danger, #dc3545);
    margin-left: 0.15rem;
    font-weight: 600;
}

/* The form labels are display:block (full row), which pushes a trailing inline
   asterisk onto its own line. Where a label is immediately followed by a marker,
   shrink it to inline-block so the * sits beside the text; the input still wraps
   below since it takes the full width. */
.autopsy-page .autopsy-form .rz-label:has(+ .required-marker) {
    display: inline-block;
}

.form-required-legend {
    font-size: var(--text-sm);
    color: var(--text-muted);
    margin: 0 0 0.75rem 0.25rem;
}

/* Read-only clinic details, sourced from the selected site (not user-editable).
   The case page's record sheet, brought over: a tiny uppercase key, the value beside
   it, stripes instead of hairlines, and no box — a bordered panel inside a bordered
   section card was a panel within a panel, and the border was the loudest thing in a
   block nobody can edit.

   `display: contents` on the row is what lets a two-column grid keep every key in one
   column while the row stays a real element — which is what the stripe is painted from. */
/* The sheet's own row in the fieldset: everything else in there is a field row with a
   label above it, and the sheet has neither, so it needs the gap declared. The site
   picker above it sits closer, because the sheet is that picker's answer. */
.site-select-row { margin-bottom: 0.5rem; }
.clinic-sheet-block { margin-bottom: 1rem; }

.clinic-sheet {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    font-size: var(--text-sm);
}

.clinic-sheet-row { display: contents; }

.clinic-sheet-row:nth-child(odd) > * { background: var(--surface-raised); }

.clinic-sheet-k {
    /* A touch more above than below: the key is smaller than the value it sits beside,
       so equal padding leaves it visibly high on the line. */
    padding: 0.45rem 0.75rem 0.3rem 0.65rem;
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-uppercase);
    color: var(--text-subtle);
    white-space: nowrap;
}

.clinic-sheet-v {
    padding: 0.35rem 0.65rem;
    color: var(--text-secondary);
    line-height: var(--leading-snug);
    overflow-wrap: anywhere;
}

.clinic-sheet-note {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin: 0.55rem 0 0;
    font-size: var(--text-xs);
    color: var(--text-subtle);
}

.clinic-sheet-note .rz-icon {
    font-size: 0.9rem;
    color: var(--text-subtle);
}

/* Empty state shown in place of the form when the system has no sites yet. */
.no-sites-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.75rem;
    max-width: 32rem;
    margin: 2rem auto;
    padding: 2.5rem 1.5rem;
    border: 1px solid var(--border-strong, #d1d5db);
    border-radius: 12px;
    background: var(--surface, #fff);
}

.no-sites-icon {
    font-size: 3rem;
    color: var(--text-muted, #6b7280);
}

.no-sites-title {
    font-size: var(--text-lg, 1.25rem);
    font-weight: var(--weight-semi, 600);
    color: var(--text-primary, #111827);
    margin: 0;
}

.no-sites-text {
    color: var(--text-secondary, #4b5563);
    margin: 0;
    line-height: 1.5;
}

.field-helper-text {
    font-size: var(--text-xs);
    color: var(--text-muted); /* slate-500 */
    margin-top: 0.25rem;
    margin-bottom: 0;
    margin-left: 0.25rem;
}

/*rz overrides*/

.autopsy-page  .rz-radio-button-list .rz-stack {
    margin-top: 0.5rem !important;
    margin-left: 0.25rem !important;
}

.autopsy-page  .form-section.additional .anonymous .rz-label,
.autopsy-page  .form-section.matching .match .rz-label {
    margin-bottom: 0 !important;
}

#dvCaptcha {
    align-self: end;
}

.rz-button-box{
    gap:0.5rem !important;
}




.autopsy-relative {
    position: relative;
}

/* Covers the form area only (inside the card) */
/* ---- the wait between paying and being told it worked ----
   Fixed, not absolute. It used to cover the form element, which on a page as long as
   billing meant the card could be scrolled well off screen while the gateway ran — you
   pressed Submit and the page appeared to do nothing. Fixed to the viewport, the
   feedback is where you are.
   The old ground was rgba(230,230,230,0.1): a 10% grey over white is nothing, so the
   form stayed fully legible underneath and read as still editable while it wasn't. */
.autopsy-loading-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    animation: autopsy-fade-in 0.18s ease;
}

/* A card, not a pill. The pill was 2rem of padding top and bottom against 1rem at the
   sides, so the text sat in a lozenge wider than it was comfortable with, and the
   spinner rode beside it like a bullet point. Stacked and centred: the mark, then what
   is happening, then what not to do. */
.autopsy-loading-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.9rem;
    min-width: 17rem;
    padding: 2rem 2.25rem;
    background: #fff;
    border: 1px solid var(--border-default);
    border-radius: 14px;
    box-shadow: var(--shadow-lg);
    text-align: center;
    animation: autopsy-rise 0.22s ease;
}

/* Two rings, not a ring with one coloured edge: a faint full circle for the track and a
   blue arc turning on top of it, which is what makes the motion read as continuous
   rather than as a dot chasing its tail. */
.autopsy-spinner {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    border: 3px solid color-mix(in srgb, var(--liu-blue) 22%, #fff);
    border-top-color: var(--liu-blue-dark);
    animation: autopsy-spin 0.75s linear infinite;
}

@keyframes autopsy-spin {
    to { transform: rotate(360deg); }
}

@keyframes autopsy-fade-in {
    from { opacity: 0; }
}

@keyframes autopsy-rise {
    from { opacity: 0; transform: translateY(6px); }
}

.autopsy-loading-text {
    font-size: var(--text-md);
    font-weight: var(--weight-semi);
    color: var(--text-primary);
    line-height: var(--leading-snug);
}

.autopsy-loading-subtext {
    margin-top: 0.35rem;
    font-size: var(--text-sm);
    font-weight: var(--weight-regular);
    color: var(--text-muted);
}

/* The spinner stays — it is the only thing saying the request is still alive — but the
   entrance animations go for anyone who asked for less motion. */
@media (prefers-reduced-motion: reduce) {
    .autopsy-loading-overlay,
    .autopsy-loading-card { animation: none; }
}

/* Mobile: stack Amount + Custom Amount vertically and hide the OR column */
@media (max-width: 700px) {
    .form-di-row {
        flex-direction: column !important;
        gap: 0px;
        align-items: stretch;
    }

    .or.form-row-item {
        align-self: center;
        padding: 15px 0;
    }


    .autopsy-submit-btn{
        min-width: 0 !important;
    }
}


.thankyou-page {
    min-height: 100vh;
    background-image: url('images/vetmed-stain-mix.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    padding: 2.5rem 0 3rem;
    width: 100%;
}

.thankyou-shell {
    max-width: 1100px;
}

.thankyou-page .thankyou-card.rz-card {
    box-shadow: 0 12px 35px rgba(15, 23, 42, 0.10);
    padding: 0;
    border-radius: 3px;
    background-color: #ffffff;
    overflow: hidden;
}


.thankyou-hero {
    padding: 1.75rem 0 2.5rem 0;
    background: linear-gradient(to bottom, var(--liu-blue) 100%, #ffffff 100%);
    color: var(--border-strong);
}

    .thankyou-hero .img-fluid {
        width: 100%;
        margin-bottom: 1rem;
    }

.thankyou-subtitle {
    font-size: var(--text-md);
    line-height: var(--leading-loose);
    max-width: 650px;
    margin-left: auto;
    margin-right: auto;
    color: #ffe896;
}

.thankyou-body {
    padding: 2rem 2.75rem 2.25rem;
    background-color: #ffffff;
}

.thankyou-text {
    margin-top: 0.65rem;
    color: #475569;
    line-height: var(--leading-loose);
}

@media (max-width: 576px) {
    .thankyou-body {
        padding: 1.5rem 1.25rem 1.75rem;
    }
    .autopsy-form-wrapper {
        padding: 1rem 1.75rem 1.5rem;
    }
    .autopsy-page .form-fieldset.rz-fieldset {
        padding: 0;
    }
}







/* =========================
   HEADER CONTAINER
========================= */

.autopsy-header {
    position: relative;
    /*border-radius: 16px;*/
    padding: 30px 40px 20px 40px;
    /*color: white;*/
    overflow: hidden;
    background: linear-gradient(135deg, #6ea8d7 0%, #8fc1e8 100%);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    background-image:url('images/vetmed-stain-header-2.png');
    background-size:cover;
}


/* =========================
   HEADER LAYOUT
========================= */

.header-inner {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

/* =========================
   TEXT BLOCK
========================= */

.header-text {
    max-width: 600px;
}

.institution {
    font-size: 17px;
    font-weight: var(--weight-medium);
    opacity: 0.9;
    /*font-weight: 800;*/
    padding-top: 20px;
}

.sub-institution {
    font-size: 10px;
    /* margin-bottom: 14px; */
    opacity: 0.85;
}

.title {
    font-family: var(--font-body);
    font-size: 32px;
    font-weight: var(--weight-semi);
    letter-spacing: 0.005em;
    text-transform: none;
    line-height: 1.1;
    margin: 0;
}

.autopsy-header .title em,
.thankyou-hero .title em,
.thankyou-title em,
.brand-title em {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: var(--weight-regular);
    color: var(--liu-blue-dark);
    font-size: 1.05em;
    margin-right: 0.1em;
}

/* The page-header form title accent uses primary text, not brand blue. */
.autopsy-header .title em {
    color: var(--text-primary);
}

.thankyou-title em:last-child {
    margin-right: 0;
    margin-left: 0.05em;
}

/* Autopsy form section legends — same editorial pattern. */
.form-section-header h2 em {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: var(--weight-regular);
    color: var(--liu-blue-dark);
    font-size: 1.05em;
    margin-right: 0.08em;
}

.form-section-header h2 em:last-child {
    margin-right: 0.05em;
    margin-left: 0.04em;
}

.subtitle {
    font-size: 13px;
    color: var(--text-primary);
    opacity: 0.9;
    margin-top:0.5rem;
}








.seal{
    width:280px;
    float:left;
    padding-right:10px;
}
.menu {
    font-size: xx-large;
    color: #600878;
}

.liu-medium-gray {
    background-color: var(--liu-medium-gray) !important;
    color: var(--liu-dark-gray) !important;
}
.label-with-info {
    display: flex;
    align-items: center;
    gap: 0;
}

/* Reset the label's default margin so it centers cleanly against the icon
   regardless of its text size. */
.label-with-info .rz-label {
    margin: 0;
}

/* The asterisk hugs the label (its own margin); the info button carries its own
   spacing so it sits a consistent distance from the text on every field. */
.label-with-info .info-icon-btn {
    margin-left: 0.4rem;
}

.info-icon {
    font-size: var(--text-md);
    line-height: 1;
    display: block;
    color: var(--liu-blue);
    cursor: pointer;
    opacity: 0.8;
    transition: all 0.2s ease;
}

.info-icon:hover {
    opacity: 1;
    transform: scale(1.15);
}

/* The info toggle is a real <button> for keyboard/screen-reader access; strip the
   native chrome so it still looks like a bare icon. */
.info-icon-btn {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    line-height: 1;
}

.info-icon-btn:focus-visible {
    outline: 2px solid var(--liu-blue);
    outline-offset: 2px;
    border-radius: 4px;
}
.v-bottom{
    vertical-align:text-bottom;
}

/* The panel behind an (i) button. Same shape as the notices on the prices card — grey
   ground, a rule on the left, no shadow — so a thing you opened looks like the things
   that were already open. It briefly got stripped to bare text here, which lost the one
   cue that it was a panel at all. */
.info-card {
    margin: 0.5rem 0 1rem;
    padding: 0.7rem 0.9rem;
    background: var(--surface-raised);
    border: 1px solid var(--border-default);
    border-left: 3px solid var(--border-strong);
    border-radius: 0 var(--r-card) var(--r-card) 0;
    font-size: var(--text-sm);
    line-height: var(--leading-loose);
    color: var(--text-muted);
    max-width: 78ch;
    animation: fadeIn 0.2s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}



/* ===== Estimated Charges (payment page) =====
   No box of its own. The section is already a bordered white card, so a bordered white
   card inside it drew a second line a few pixels in — the same panel-within-a-panel the
   clinic details had. The lines between the fees are enough structure. */
.charges-card {
    background: none;
    border: 0;
    padding: 0;
}

/* The .charges-animal-* badge is gone — AnimalPill draws it, in the one set of hues the
   rest of the app uses. Its blue was #0b6bb3 here and #1f5f8b everywhere else, which is
   what a fifth copy of a thing buys you.
   The pill lives in admin.css, which the public pages don't load, so it needs its rules
   here too — scoped to .autopsy-page so this copy can never fight the admin's on a page
   that loads both sheets. */
.autopsy-page .animal-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.65rem;
    border-radius: var(--r-pill);
    font-size: var(--text-sm);
    font-weight: var(--weight-semi);
    white-space: nowrap;
}

.autopsy-page .animal-pill .rzi { font-size: var(--text-md); opacity: 0.8; }

.autopsy-page .animal-pill-dog     { background: #EAF5FD; color: var(--status-info-text); }
.autopsy-page .animal-pill-horse   { background: #FFF6D1; color: #8A6A00; }
.autopsy-page .animal-pill-farm    { background: #F1E8F4; color: #7F5A8C; }
.autopsy-page .animal-pill-default { background: var(--border-subtle); color: var(--text-muted); }

.charges-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.65rem 0;
    font-size: var(--text-md);
    color: var(--text-secondary);
}
.charges-line + .charges-line { border-top: 1px solid var(--border-default); }

.charges-line-label {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.charges-line-amount {
    font-size: var(--text-lg);
    font-weight: 700;
    color: var(--text-primary);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.charges-total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.65rem 0;
    border-top: 2px solid var(--border-default);
}

.charges-total-label {
    font-weight: 700;
    color: var(--text-primary);
}

.charges-total-amount {
    font-size: var(--text-lg);
    font-weight: 700;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}






.thankyou-confirmation {
    display: inline-block;
    margin: 1.5rem auto;
    padding: 1rem 2rem;
    background: #f8fafc;
    border: 1px solid var(--border-default);
    border-radius: var(--r-card);
    text-align: center;
}

.thankyou-confirmation-label {
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin-bottom: 0.3rem;
}

.thankyou-confirmation-value {
    font-family: var(--font-body);
    font-size: 1.75rem;
    font-weight: var(--weight-bold);
    color: var(--text-primary);
    letter-spacing: var(--tracking-wide);
    line-height: 1;
}

/* Non-profit fee-waiver banner — solid LIU brand blue with white text.
   Scoped overrides pierce Radzen's inner alert markup (title/message/icon). */
/* .nonprofit-banner's solid-blue !important block lived here. It predated the notice
   styling and beat it on every property, which is why the "fees will be waived" banner
   stayed white-on-blue while every other notice picked up its theme. The banner is now
   styled with the rest of them, further down. */

/* ===== Role identity =====
   ONE component for "what is this person", used in the header, the timeline, the
   spec sheet and the case rail. It replaces four separate mechanisms that disagreed
   with each other: .admin-role-pill (header), .tl-pill--* (timeline), the timeline
   avatar tints, and Bracket(RoleTag()) which rendered "(LIU admin)" as plain text.
   A role looked like a different thing on every surface it appeared on.

   Tinted, never filled: a saturated pill with white text outranked the case status
   sitting beside it, which is exactly backwards. */
.role-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.16rem 0.55rem;
    border-radius: var(--r-pill);
    font-size: 0.63rem;
    font-weight: var(--weight-bold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-uppercase);
    line-height: var(--leading-snug);
    white-space: nowrap;
    vertical-align: middle;
}

/* Boxed to one em. A Material Icons ligature that fails to resolve — the webfont
   hasn't loaded yet, or the name isn't in the set — falls back to rendering its own
   name as text, which stretched the pill to the width of "admin_panel_settings" and
   shoved the label to the far edge. The glyph gets exactly its slot or nothing. */
/* Sized absolutely. At 0.85em of a 0.62rem pill the glyph came out about 8px — present
   but unreadable. Boxed to its own width so a ligature that fails to resolve renders
   nothing rather than stretching the pill to the width of "admin_panel_settings". */
.role-tag .rzi {
    font-size: 0.85rem;
    width: 0.85rem;
    height: 0.85rem;
    line-height: 1;
    overflow: hidden;
    flex: 0 0 auto;
}

.role-tag--superadmin { color: var(--role-superadmin); background: color-mix(in srgb, var(--role-superadmin) var(--role-tint), #fff); }
.role-tag--admin { color: var(--role-admin); background: color-mix(in srgb, var(--role-admin) var(--role-tint), #fff); }
.role-tag--doctor { color: var(--role-doctor); background: color-mix(in srgb, var(--role-doctor) var(--role-tint), #fff); }
.role-tag--clinic { color: var(--role-clinic); background: color-mix(in srgb, var(--role-clinic) var(--role-tint), #fff); }
.role-tag--manager { color: var(--role-manager); background: color-mix(in srgb, var(--role-manager) var(--role-tint), #fff); }
.role-tag--staff { color: var(--role-staff); background: color-mix(in srgb, var(--role-staff) var(--role-tint), #fff); }
.role-tag--system { color: var(--role-system); background: color-mix(in srgb, var(--role-system) var(--role-tint), #fff); }

/* The initials mark that carries identity in a list or a timeline gutter. Same
   ink/tint pair as the tag, so a person reads the same in both places. */
.role-avatar {
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 50%;
    font-size: 0.68rem;
    font-weight: var(--weight-bold);
}

.role-avatar--superadmin { color: var(--role-superadmin); background: color-mix(in srgb, var(--role-superadmin) var(--role-tint), #fff); }
.role-avatar--admin { color: var(--role-admin); background: color-mix(in srgb, var(--role-admin) var(--role-tint), #fff); }
.role-avatar--doctor { color: var(--role-doctor); background: color-mix(in srgb, var(--role-doctor) var(--role-tint), #fff); }
.role-avatar--clinic { color: var(--role-clinic); background: color-mix(in srgb, var(--role-clinic) var(--role-tint), #fff); }
.role-avatar--manager { color: var(--role-manager); background: color-mix(in srgb, var(--role-manager) var(--role-tint), #fff); }
.role-avatar--staff { color: var(--role-staff); background: color-mix(in srgb, var(--role-staff) var(--role-tint), #fff); }
.role-avatar--system { color: var(--role-system); background: color-mix(in srgb, var(--role-system) var(--role-tint), #fff); }


/* ==========================================================================
   Submission form — Style C
   Today's sections, order and width. What changes is the typography, the
   controls and the prose measure.
   ========================================================================== */

/* ---- the measure ----
   The single biggest problem on this page, and the cheapest to fix. The subsidy
   paragraph and both PLEASE NOTE blocks were running the full width of the card —
   about 130 characters a line, roughly double what stays readable. Capping in `ch`
   ties the limit to the font rather than to a guess in pixels.

   Applied to prose only. Fields, fieldsets and the price row still use the whole
   width, because a form control that stops at 78ch just looks broken. */
.autopsy-page .form-section-header .rz-label,
.autopsy-page .section-helper-text,
.autopsy-page .form-fieldset .rz-label {
    max-width: 78ch;
}

/* The notice carries the cap itself rather than its paragraphs — capping text inside a
   full-width box left a ragged right edge in a band claiming width it wasn't using.
   The box is the column.
   Only for a notice that is a block of prose, though. A bordered box stopping short of
   its neighbours looks broken, because the border makes the ending visible; the one-line
   non-profit banner and the paired notices are bands and run the full width. Unbordered
   small print stopping short reads as a text column, which is why the footnote keeps
   its cap while these don't. */
.autopsy-page .rz-alert,
.thankyou-page .rz-alert { max-width: 78ch; }
.autopsy-page .rz-alert p { max-width: none; }
.autopsy-page .rz-alert.nonprofit-banner { max-width: none; }
.autopsy-page .rz-alert.notice-legal { max-width: none; }

/* The one notice on any of the three pages that IS a warning: something the clinic has
   to act on. It keeps amber while the standing conditions wear plum. */
.thankyou-page .rz-alert.notice-failed {
    --notice-accent: var(--status-warning);
    --notice-ink: var(--status-warning-text);
    max-width: 640px;
    margin: 1.5rem auto;
    text-align: left;
}

/* ---- price tiers ---- */
.price-tiers {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.6rem;
}

.price-tier {
    display: flex;
    flex-direction: column;
    /* The mark runs off the right edge, so the tile has to be the thing that cuts it. */
    position: relative;
    overflow: hidden;
    background: var(--surface-raised);
    border: 1px solid var(--border-default);
    border-radius: var(--r-card);
    /* Extra room on the right so the words stop before the mark's fragment starts. */
    padding: 0.85rem 3rem 0.85rem 1rem;
}

/* The three species hues, same values the animal pills use in admin.css — the public
   form doesn't load that sheet, and a tier should read as the same species as its chip
   does on the case page. */
.price-tier--pet   { --tier-ink: #1f5f8b; }
.price-tier--horse { --tier-ink: #8A6A00; }
.price-tier--farm  { --tier-ink: #7F5A8C; }

/* The species mark, oversized and cropped by the card's right edge, so the shape reads as
   pattern rather than as an icon someone dropped in a corner. Quiet enough never to
   compete with the price. Decoration, not information: the tier is named in words
   directly above the amount.
   The drawn silhouettes were tried here first and lost. They carry engraved detail that
   needs a continuous edge to read, and blown up to this size and then cut in half by the
   card they came apart — a symbol survives the same crop because it has no interior to
   lose. */
.price-tier-glyph {
    position: absolute;
    right: -1.5rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 6.5rem;
    line-height: 1;
    color: var(--tier-ink);
    opacity: 0.2;
    pointer-events: none;
    user-select: none;
}

/* Everything else stacks above the mark. */
.price-tier-cap,
.price-tier-amt,
.price-tier-note { position: relative; z-index: 1; }

/* What the AnimalPill used to say, in the species' own ink. */
/* ---- the tier that applies to you ----
   Once the animal type is chosen further down the form, the row stops listing three
   prices and starts stating yours: the matching tile keeps full strength and takes its
   species colour as a border, the other two fade back. Nothing is hidden — a clinic can
   still see what the others cost, and changing the type moves the emphasis with it. */
.price-tiers.has-pick .price-tier {
    opacity: 0.5;
    transition: opacity 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.price-tiers.has-pick .price-tier.is-picked {
    opacity: 1;
    border-color: var(--tier-ink);
    box-shadow: 0 0 0 1px var(--tier-ink);
}

.price-tiers.has-pick .price-tier.is-picked .price-tier-glyph { opacity: 0.3; }

/* Only ever drawn on the picked tile. */
.price-tier-pick { display: none; }

.price-tier.is-picked .price-tier-pick {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    margin-bottom: 0.15rem;
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-uppercase);
    color: var(--tier-ink);
}

.price-tier.is-picked .price-tier-pick .rzi { font-size: 0.85rem; }

.price-tier-cap {
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-uppercase);
    color: var(--tier-ink);
    margin-bottom: 0.1rem;
}

.price-tier-amt {
    font-size: var(--text-2xl);
    font-weight: var(--weight-bold);
    line-height: var(--leading-tight);
    color: var(--text-secondary);
}

/* margin-top:auto pins the note to the floor of a stretched tile. The grid already
   makes the three equal height, so without it a one-line note floated wherever its
   price left it and the three descriptions never lined up. */
.price-tier-note {
    font-size: var(--text-xs);
    line-height: var(--leading-loose);
    color: var(--text-muted);
    margin-top: auto;
    padding-top: 0.45rem;
    /* Wide enough that the longest list — the Pets one, at 79 characters — sets in two
       lines rather than three. Below about 40ch it breaks to three and the whole row
       grows a line taller, since the three tiles are equal height. */
    max-width: 44ch;
}

@media (max-width: 720px) {
    .price-tiers { grid-template-columns: 1fr; }
}

/* ---- notices ----
   RadzenAlert restyled rather than replaced: the component carries the title and the
   markup already reads correctly, and swapping it out on a page that takes money buys
   risk for nothing. A rule on the left instead of a filled panel, so a four-paragraph
   notice reads as an aside rather than as a warning about the field beside it. */
/* Plum, the same hue the farm-animal tier and the manager role already use. Amber says
   "warning" — and none of these are one; they're the standing conditions of submitting a
   case. The colour is held in one pair of variables because the rule, the tint and the
   title ink all derive from it, and three literals is how they drift apart. */
.autopsy-page,
.thankyou-page {
    --notice-accent: #8b6aa0;
    --notice-ink: #5c3f68;
}

.autopsy-page .rz-alert {
    border: 1px solid var(--border-default);
    border-left: 3px solid var(--notice-accent);
    background: color-mix(in srgb, var(--notice-accent) 7%, #fff);
    border-radius: 0 var(--r-card) var(--r-card) 0;
    padding: 0.85rem 1.1rem;
    color: var(--text-muted);
    font-size: var(--text-sm);
    line-height: var(--leading-loose);
    box-shadow: none;
}

.autopsy-page .rz-alert .rz-alert-title,
.thankyou-page .rz-alert .rz-alert-title {
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-uppercase);
    color: var(--notice-ink);
    margin-bottom: 0.35rem;
}

.autopsy-page .rz-alert p,
.thankyou-page .rz-alert p { margin: 0 0 0.5rem; }
.autopsy-page .rz-alert p:last-child,
.thankyou-page .rz-alert p:last-child { margin-bottom: 0; }
.autopsy-page .rz-alert a,
.thankyou-page .rz-alert a { color: var(--liu-blue-dark); }

/* The one alert that is good news, not a caveat. */
.autopsy-page .rz-alert.nonprofit-banner {
    border-left-color: var(--status-success);
    background: color-mix(in srgb, var(--status-success) 7%, #fff);
}

.autopsy-page .rz-alert.nonprofit-banner .rz-alert-title { color: var(--status-success); }

/* Two notices side by side. Each column is its own measure, so the cap comes off the
   boxes here — a half-width column is already close to a comfortable line length. */
.notice-pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.85rem;
    /* stretch, not start — the two boxes end on the same line. They're within a line or
       two of each other, so equal height costs almost no dead space and buys an aligned
       bottom edge against the tiles above and the footnote below. */
    align-items: stretch;
}

.autopsy-page .notice-pair .rz-alert { max-width: none; }

/* The escape hatch reads as help, not as a caveat, so it drops the warning tint. */
.autopsy-page .rz-alert.notice-ask {
    border-left-color: var(--liu-blue-dark);
    background: var(--liu-blue-light);
}
.autopsy-page .rz-alert.notice-ask .rz-alert-title { color: #1f5f8b; }

/* The address someone actually has to act on, separated from the sentence that
   introduces it by a hairline in the notice's own hue. Medium weight and a tighter
   leading so it reads as a detail to copy rather than a line to read past. */
.notice-contact {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    margin-top: 0.7rem;
    padding-top: 0.6rem;
    border-top: 1px solid color-mix(in srgb, var(--liu-blue-dark) 25%, transparent);
    font-size: var(--text-sm);
    line-height: var(--leading-snug);
}

.notice-contact a {
    color: var(--liu-blue-dark);
    font-weight: var(--weight-semi);
}

.notice-contact span { color: var(--text-secondary); font-weight: var(--weight-medium); }

/* Small print. Sits under everything and looks it. */
/* Above the tiers, and the full width of them. It carries no measure cap: it is one
   paragraph introducing a three-card row, so a short column beside a full-width row
   reads as a ragged edge rather than as a text column. */
.price-footnote {
    margin: 0 0 0.9rem;
    font-size: var(--text-xs);
    line-height: var(--leading-loose);
    color: var(--text-subtle);
}

@media (max-width: 860px) {
    .notice-pair { grid-template-columns: 1fr; }
}

/* ---- step indicator ----
   No fill and no border, on every page. It is a progress indicator, not a card: the dots
   and the rules between them already say everything the box was saying, and boxing it
   made the first thing under the masthead a panel competing with the section cards under
   IT. On the confirmation page it also sat forty pixels above a second tinted band, which
   is what surfaced it — but the box was never earning its keep on pages one and two
   either. A hairline underneath keeps it attached to the chrome above rather than
   floating in the form. */
.submit-steps {
    display: flex;
    align-items: center;
    list-style: none;
    margin: 0 0 0.5rem;
    padding: 0.35rem 0 0.9rem;
    border-bottom: 1px solid var(--border-subtle);
}

.submit-step {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 0 0 auto;
}

/* The connector belongs to the step that follows it, so the first one has none —
   simpler than a separate element per gap, and it can't get out of step with the list. */
/* flex:1 so the rules stretch and the three steps space themselves across the bar.
   At a fixed width they bunched against the left edge with the rest of the bar empty. */
.submit-step { flex: 0 0 auto; }
.submit-step + .submit-step { flex: 1 1 auto; }
.submit-step + .submit-step::before {
    content: "";
    flex: 1 1 auto;
    min-width: 1.5rem;
    height: 1px;
    background: var(--border-default);
    margin: 0 0.8rem;
}

.submit-step-dot {
    width: 1.4rem;
    height: 1.4rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    background: var(--surface-sunken);
    color: var(--text-subtle);
    flex: 0 0 auto;
}

.submit-step-dot .rzi { font-size: 0.85rem; }

.submit-step-label {
    white-space: nowrap;
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-subtle);
}

/* LIU blue, not the dark variant: the brand blue is the one on the rail and the header,
   so the step you're on is coloured by the same blue as the shell around it. The label
   takes the dark variant — #69b3e7 on white doesn't hold at 0.7rem uppercase. */
.submit-step.is-now .submit-step-dot { background: var(--liu-blue); color: #fff; }
.submit-step.is-now .submit-step-label { color: var(--liu-blue-dark); }
.submit-step.is-done .submit-step-dot {
    background: color-mix(in srgb, var(--status-success) 14%, #fff);
    color: var(--status-success);
}

/* On a phone the labels don't fit beside three dots; the numbers still carry it. */
@media (max-width: 640px) {
    .submit-step-label { display: none; }
    .submit-step + .submit-step::before { width: 1rem; margin: 0 0.4rem; }
    .submit-steps { justify-content: center; }
}


/* ---- controls ----
   The part of Style C I missed on the first pass. Headings, prose and notices were
   restyled while the controls — which are most of what you actually look at — were left
   on Radzen's defaults, so the page looked untouched.

   Scoped to .autopsy-page throughout. The same Radzen controls appear in the admin
   dialogs, and those already sit correctly against the admin chrome; restyling
   .rz-textbox globally would drag them somewhere nobody asked for. */

/* Field labels live on `.autopsy-page .autopsy-form .rz-label` further up — a rule that
   already existed and, at three classes, beat the one added here. Two rules for one job
   is how they drift, so this one was removed rather than made to win. Section-header
   prose still needs separating from it, which is the rule below. */
/* Section prose — the subsidy paragraph and anything else sitting under a caption. */
.autopsy-page .form-section-header .rz-label {
    display: block;
    font-size: var(--text-sm);
    margin-bottom: 0;
    font-weight: var(--weight-regular);
    color: var(--text-muted);
    line-height: var(--leading-loose);
}

/* The asterisk sits in its own span after the label, so it needs pulling back onto the
   same line rather than dropping below a block-level label. */
.autopsy-page .required-marker {
    color: var(--status-danger);
    margin-left: 0.15rem;
}
/* No negative margin. The label beside it is inline-block on its own baseline, so
   lifting the asterisk 0.4rem only ever floated it above the word it marks. */
.autopsy-page .rz-label + .required-marker { display: inline; }

.autopsy-page .rz-textbox,
.autopsy-page .rz-inputtext,
.autopsy-page .rz-dropdown,
.autopsy-page textarea.rz-textarea,
.autopsy-page .rz-datepicker {
    box-sizing: border-box;
    padding: 0.5rem 0.65rem;
    font-size: var(--text-md);
    color: var(--text-secondary);
    background: #fff;
    border: 1px solid var(--border-strong);
    border-radius: var(--r-button);
    box-shadow: none;
}

.autopsy-page .rz-textbox:focus,
.autopsy-page .rz-inputtext:focus,
.autopsy-page textarea.rz-textarea:focus,
.autopsy-page .rz-dropdown.rz-state-focused,
.autopsy-page .rz-datepicker:focus-within {
    outline: none;
    border-color: var(--liu-blue-dark);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--liu-blue-dark) 14%, transparent);
}

/* Same height as a textbox or a dropdown. The wrapper carries the padding and border,
   so the field and the calendar button inside it have to stop carrying their own —
   Radzen sizes both to its own input height, which stacked on top of ours. */
.autopsy-page .rz-datepicker {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.autopsy-page .rz-datepicker > .rz-inputtext {
    flex: 1 1 auto;
    min-width: 0;
    height: auto;
    line-height: var(--leading-snug);
}

.autopsy-page .rz-datepicker .rz-datepicker-trigger {
    flex: 0 0 auto;
    width: auto;
    height: auto;
    min-width: 0;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
    color: var(--text-subtle);
}

.autopsy-page .rz-placeholder,
.autopsy-page .rz-textbox::placeholder { color: var(--text-subtle); }

/* Radzen paints a dropdown's label and a datepicker's field as `.rz-inputtext` INSIDE
   the control that already carries our border — so each one drew a second, inset border
   a few pixels in from the first. The outer box is the control; this is only its text.

   !important on the box properties because Radzen's own rules for
   `.rz-datepicker > .rz-inputtext:not(:disabled):not(.rz-state-disabled):hover|:focus`
   carry six classes' worth of specificity and put the border straight back the moment
   you hover or click into the field. Nothing short of !important outranks them. */
.autopsy-page .rz-dropdown-label,
.autopsy-page .rz-datepicker > .rz-inputtext {
    padding: 0;
    border: 0 !important;
    background: none !important;
    box-shadow: none !important;
    outline: none !important;
    font-size: var(--text-md);
    color: var(--text-secondary);
}

/* ---- attachments ----
   The same treatment the case page gives them, redeclared here because the public form
   doesn't load request-detail.css and scoped to .autopsy-page so it can't reach the
   admin's own copy. A native file input is unstyleable, so the label IS the button and
   the input inside it is hidden; clicking the label still opens the picker — the button
   half of that lives with the other tier-2 buttons above.

   Chips, not rows. Each file was a 64px thumbnail over a hairline, so three attachments
   filled a screen; at this size the list stays a list. */
.autopsy-page .attachments-block {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
}

.autopsy-page .attachments-hint {
    font-size: var(--text-xs);
    color: var(--text-subtle);
}

.autopsy-page .attachment-row {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    max-width: 100%;
    padding: 0.25rem 0.3rem;
    background: var(--surface-raised);
    border: 1px solid var(--border-subtle);
    border-radius: 6px;
}

.autopsy-page .attachment-thumb {
    width: 26px;
    height: 26px;
    object-fit: cover;
    border-radius: 3px;
    border: 1px solid var(--border-default);
    background: var(--surface-base);
}

.autopsy-page .attachment-thumb--icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

.autopsy-page .attachment-thumb--icon .rzi {
    font-size: 15px;
    color: var(--text-muted);
}

/* Name and size on one line — two stacked lines is what made the row tall. */
.autopsy-page .attachment-info {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    min-width: 0;
}

.autopsy-page .attachment-name {
    max-width: 14rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.78rem;
    font-weight: var(--weight-medium);
    color: var(--text-primary);
}

.autopsy-page .attachment-size {
    flex: 0 0 auto;
    font-size: 0.68rem;
    color: var(--text-subtle);
}

.autopsy-page .attachment-row .rz-button {
    min-width: 0;
    width: 1.5rem;
    height: 1.5rem;
    padding: 0;
    margin: 0;
}

.autopsy-page .attachment-row .rz-button .rzi { font-size: 0.9rem; }

/* ---- section cards ----
   The fieldset is the section's container, so it takes the card treatment the rest of
   the app uses: a flat border rather than a drop shadow, and the shared radius. Six
   shadowed panels down one page read as six things floating rather than one form. */
.autopsy-page .form-fieldset.rz-fieldset {
    border-radius: var(--r-card);
    border: 1px solid var(--border-default);
    background: #fff;
    box-shadow: none;
    padding: 1.2rem 1.35rem;
}

/* ---- field help ----
   The info panel behind the (i) buttons, and the standing helper text. Muted and
   unboxed: a box per hint would out-weigh the fields it is helping with. */
.autopsy-page .section-helper-text {
    font-size: var(--text-xs);
    line-height: var(--leading-loose);
    color: var(--text-subtle);
    background: none;
    border: 0;
    padding: 0;
    margin-top: 0.25rem;
    max-width: 78ch;
}

/* Bare icon, no disc. The grey circle behind it read as a button you had to press
   rather than a hint you could open, and next to a small quiet caption it was the
   loudest thing in the row. */
.autopsy-page .info-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin-left: 0.3rem;
    border: 0;
    background: none;
    color: var(--text-subtle);
    cursor: pointer;
    /* Nudged up off the baseline. The captions beside it are uppercase, so they have no
       descenders and their optical centre sits above the line's true middle — aligned to
       middle, the icon reads as hanging below the words. */
    vertical-align: middle;
    position: relative;
    top: -0.09em;
}
.autopsy-page .info-icon-btn:hover { color: var(--liu-blue-dark); }

/* The icon inherits the button's colour rather than carrying its own blue, so the
   hover above is the only thing that changes it. */
.autopsy-page .info-icon-btn .rzi,
.autopsy-page .info-icon-btn .rz-icon {
    font-size: 0.85rem;
    color: inherit;
    opacity: 1;
}
.autopsy-page .info-icon-btn:hover .rz-icon { transform: none; }

/* ---- validation ---- */
.autopsy-page .rz-message,
.autopsy-page .rz-messages-error {
    font-size: var(--text-xs);
    color: var(--status-danger);
    margin-top: 0.2rem;
}

/* The "submitting for" blue band is gone — the site is the first row of the clinic
   record sheet now, which is where a fact about the site belongs. */

/* ---- checkboxes sit on the line with their label ---- */
.autopsy-page .rz-checkbox { vertical-align: middle; }
/* The checkbox label is handled by .autopsy-page .autopsy-form .rz-checkbox + .rz-label
   above, for the same reason. */


/* ---- one card per section ----
   The caption and its prose sat OUTSIDE the fieldset while the fields sat inside it, so
   every section read as two loose blocks with a gap between them. Rather than move the
   header into the fieldset in seven places, the section itself becomes the card and the
   fieldset stops being one. Same result, no markup churn, and it can't be applied to six
   sections and forgotten on the seventh. */
.autopsy-page .form-section {
    /* The one number for caption → content, and between blocks inside a section. */
    gap: 1rem;
    background: #fff;
    border: 1px solid var(--border-default);
    border-radius: var(--r-card);
    padding: 1.25rem 1.4rem;
}

.autopsy-page .form-fieldset.rz-fieldset {
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    padding: 0;
}

/* The alert is now inside a white card, so a white-ish notice would vanish into it.
   Both keep their tint; only the pre-existing blue override is gone. */
.autopsy-page .rz-alert.nonprofit-banner,
.autopsy-page .rz-alert.nonprofit-banner * {
    color: var(--text-muted);
}
.autopsy-page .rz-alert.nonprofit-banner .rz-alert-title { color: var(--status-success); }

/* Radzen's own alert chrome. The lightbulb competes with the title for the same job,
   and the close button let a clinic dismiss the species restrictions and the legal
   terms — neither is a notification, they're part of the page. */
.autopsy-page .rz-alert .rz-alert-icon,
.autopsy-page .rz-alert .rz-alert-close,
.thankyou-page .rz-alert .rz-alert-icon,
.thankyou-page .rz-alert .rz-alert-close { display: none; }

/* .autopsy-shell was widened to 1360px here to close a gutter on a wide monitor. That
   was the wrong read: it widened the card without widening what fills it, so the capped
   prose ended up stranded with a large empty right side — the exact problem the extra
   width was meant to solve. Reverted to the original 1100px above, which is the width
   the two-column field rows and the side-by-side notices both want. A centred form with
   gutters on a 1920 monitor is correct, not a bug. */


/* ================================================================
   Confirmation page
   ================================================================ */

/* Air between the stepper and the news. The stepper is chrome at the top of the page;
   this is the page. */
.thankyou-page .thankyou-message { margin-top: 2rem; }

/* A mark rather than another sentence saying "it worked". */
.thankyou-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.25rem;
    height: 3.25rem;
    margin-bottom: 0.9rem;
    border-radius: 50%;
    background: color-mix(in srgb, var(--status-success) 14%, #fff);
    color: var(--status-success);
}

.thankyou-mark .rzi { font-size: 1.9rem; }

/* The reassurance keeps a readable measure; the band below it takes the width.
   `balance` because at 56ch this sentence broke as "…Our pathology / team will…" — the
   browser fills line one and dumps the remainder on line two, and a two-line paragraph
   is exactly where that looks like a mistake. Balanced, the two lines come out even. */
.thankyou-page .thankyou-text {
    max-width: 56ch;
    margin: 0.55rem auto 1.75rem;
    text-wrap: balance;
}

/* ---- the stub ----
   The one element allowed to touch the card's edges, which is what makes it read as a
   torn-off receipt rather than as a paragraph that ran out of things to say. It also
   ends the page: number at one end, the only remaining action at the other, so neither
   is left standing alone in a 1100px card. */
.thankyou-page .thankyou-confirmation {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    /* Pulled out to the card's edges, then padded back to the same inset the header and
       the stepper use — the band bleeds, its contents stay on the page's left edge. */
    margin: 0 -2.75rem;
    padding: 1.25rem 2.75rem;
    background: var(--liu-blue-light);
    border-top: 1px solid #cfe4f2;
    border-bottom: 1px solid #cfe4f2;
    text-align: left;
}

.thankyou-page .thankyou-confirmation-id {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
}

.thankyou-page .thankyou-confirmation-label {
    margin-bottom: 0;
    color: var(--liu-blue-dark);
    white-space: nowrap;
}

/* Tabular figures so the number never re-spaces itself between one case and the next,
   and the # because that is how anyone writes a case number down. */
.thankyou-page .thankyou-confirmation-value {
    font-size: 2.75rem;
    line-height: var(--leading-tight);
    color: var(--liu-blue-dark);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.04em;
}

/* Notation, not a digit. At full size it read as the first character of the number and
   sat with a gap after it, which is why "#48" looked like two things. Two thirds the
   height and tight against the figures makes it a prefix again. */
.thankyou-page .thankyou-confirmation-value::before {
    content: "#";
    margin-right: 0.02em;
    font-size: 0.62em;
    font-weight: var(--weight-medium);
    vertical-align: 0.12em;
    opacity: 0.4;
}

/* Inside the band, so it answers to the band's alignment rather than the form footer's. */
/* Inside the band, so it answers to the band's alignment rather than the form footer's.
   It also has to invert: the action tier is a tinted fill on white, and the band is that
   exact same tint — so on it the button was a border around nothing, and its hover
   (brightness 0.97) turned the tint muddy instead of lifting it. White on the tinted
   ground is the same relationship the other way round.
   `.autopsy-submit-btn` is in the selector so this outranks the tier rule outright
   instead of tying with it and winning only on source order. */
.thankyou-page .thankyou-confirmation .rz-button.autopsy-submit-btn {
    flex: 0 0 auto;
    align-self: center;
    margin: 0;
    background-color: #fff;
    border-color: #bcdcf1;
    color: #1f5f8b;
}

.thankyou-page .thankyou-confirmation .rz-button.autopsy-submit-btn:hover:not(:disabled) {
    background-color: #fff;
    border-color: var(--liu-blue-dark);
    color: var(--liu-blue-dark);
    /* No brightness filter — 97% of white is grey, which is what made the hover look
       dirty rather than raised. The border and the lift carry it. */
    filter: none;
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(31, 95, 139, 0.14);
}

/* Clicking a button leaves it focused, so :focus has to be defined or the button wears
   Radzen's focus fill for as long as the page sits there — the "why is it still lit"
   state. Mouse focus looks exactly like hover minus the lift. */
.thankyou-page .thankyou-confirmation .rz-button.autopsy-submit-btn:active:not(:disabled),
.thankyou-page .thankyou-confirmation .rz-button.autopsy-submit-btn:focus:not(:disabled) {
    background-color: #fff;
    border-color: var(--liu-blue-dark);
    color: var(--liu-blue-dark);
    filter: none;
    outline: none;
    box-shadow: none;
    transform: none;
}

/* Keyboard focus still needs to be obvious — :focus-visible only fires for the keyboard,
   so this ring never appears on a click. */
.thankyou-page .thankyou-confirmation .rz-button.autopsy-submit-btn:focus-visible {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--liu-blue-dark) 20%, transparent);
}

/* The notice, when the attachments failed, belongs under the stub. */
.thankyou-page .rz-alert.notice-failed { margin-top: 1.75rem; }

/* Nothing follows the band, so the body's floor closes up behind it. */
.thankyou-page .thankyou-body { padding-bottom: 0; }

/* Stacked, the band's left-and-right becomes a top-and-bottom, and a left edge that had
   the whole card's width to justify against no longer has one — everything above it on
   this page is centred, so the stub joins them. */
@media (max-width: 720px) {
    .thankyou-page .thankyou-confirmation {
        flex-direction: column;
        align-items: center;
        gap: 1rem;
        margin: 0 -1.25rem;
        padding: 1.25rem;
        text-align: center;
    }

    .thankyou-page .thankyou-confirmation-id {
        flex-direction: column;
        align-items: center;
        gap: 0.1rem;
    }
}

/* ===== The species inks =====
   Colour only, and shared, because the mark is drawn in three places on two pages now —
   the case header's tile, the case page's watermark and the confirmation page's. The
   header tile adds a ground of its own on top of this; nothing else wants one. */
.animal-ink--pet   { color: #1f5f8b; }
.animal-ink--horse { color: #8A6A00; }
.animal-ink--farm  { color: #7F5A8C; }
.animal-ink--other { color: var(--text-muted); }

/* ===== A Material mark, drawn from a class =====
   The species vocabulary is Font Awesome except the horse, which is Material's knight.
   Font Awesome carries its glyph in a class; Material carries it in the element's text.
   Putting the ligature in ::before is what lets both be expressed the same way — one
   class string from AnimalTag.IconClass, whichever font it comes from — so no caller has
   to know or branch.
   Material Symbols, not classic Material Icons: the classic set has no chess piece at
   all. Symbols is the font Radzen bundles, so nothing extra is loaded for this. */
.mi-mark {
    font-family: var(--rz-icon-font-family, 'Material Symbols');
    font-weight: normal;
    font-style: normal;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    white-space: nowrap;
    word-wrap: normal;
    font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.mi-mark--horse::before { content: "chess_knight"; }

/* ---- the confirmation page's watermark ----
   The whole animal, uncropped, behind the tick and the headline. Everything on that page
   is centred, so the mark joins them rather than sitting off to one side. */
.thankyou-page .thankyou-message { position: relative; }

/* :not() matters. Without it this reaches the watermark too, turns its absolute position
   back into relative, and an inline span with nowhere to be is simply never drawn. */
.thankyou-page .thankyou-message > *:not(.thankyou-beast) {
    position: relative;
    z-index: 1;
}

/* Off the right edge rather than centred behind the sentence. Centred, it sat under the
   tick and the headline and had to stay faint enough to be readable through; hung off the
   edge it can be a crop the card cuts, which is how the price tiers carry theirs.
   Half the mark is outside the card at any width, since the offset is a percentage. */
.thankyou-page .thankyou-beast {
    position: absolute;
    left: 95%;
    top: 42%;
    transform: translate(-50%, -50%);
    z-index: 0;
    font-size: 13rem;
    line-height: 1;
    /* Faint, not absent. At 5% it read as a smudge on the card; 9% is the floor where the
       shape still resolves without competing with the sentence over it.
       Colour comes from .animal-ink--* on the element — the species, not the brand. */
    opacity: 0.09;
    pointer-events: none;
    user-select: none;
}

/* The card crops it, so at full size on a narrow screen the mark would show only its
   middle. Sized down instead, which keeps the whole symbol. */
@media (max-width: 720px) {
    .thankyou-page .thankyou-beast { font-size: 8rem; }
}


/* ===== Case status tones =====
   What a status looks like, defined once. Five surfaces render one — the grids, the
   dashboard, the case header, the timeline and the case page's state block — and until
   now the colours lived in request-detail.css, a page sheet that happens to be loaded
   globally. Anything that stopped loading it would have taken the grids' pills with it.
   Each tone is three custom properties rather than a finished rule, so a pill and a whole
   tinted panel can be the same colour without one of them inheriting the other's shape. */
.tone-new  { --tone-bg: #E6F0FA;                   --tone-ink: #1a4f78;                    --tone-edge: #cfe0f0; }
.tone-info { --tone-bg: var(--status-info-bg);     --tone-ink: var(--status-info-text);    --tone-edge: #cfe4f2; }
.tone-ok   { --tone-bg: var(--status-success-bg);  --tone-ink: var(--status-success);      --tone-edge: #c9e7d2; }
.tone-warn { --tone-bg: var(--status-warning-bg);  --tone-ink: var(--status-warning-text); --tone-edge: #ecdcb2; }
.tone-bad  { --tone-bg: var(--status-danger-bg);   --tone-ink: var(--status-danger);       --tone-edge: #f0d2d2; }
.tone-none { --tone-bg: var(--border-subtle);      --tone-ink: var(--text-muted);          --tone-edge: var(--border-default); }

/* The pills read their colour from the tone above rather than restating it. */
.badge-success { background: var(--tone-bg); color: var(--tone-ink); }
.badge-danger  { background: var(--tone-bg); color: var(--tone-ink); }
.badge-warning { background: var(--tone-bg); color: var(--tone-ink); }
.badge-info    { background: var(--tone-bg); color: var(--tone-ink); }
.badge-new     { background: var(--tone-bg); color: var(--tone-ink); }
.badge-default { background: var(--tone-bg); color: var(--tone-ink); }