/* The SeRP theme: one look shared by SAM.Admin, SAM.NewUserApplication and SAM.Researcher.
   Linked after Bootstrap and Font Awesome and before the host's own site.css, so a host can still
   override anything here. Every rule is scoped to a class or element all three hosts can use safely;
   nothing here restyles a bare table, `html` or the `mt-*` spacing helpers. */

/* -- Tokens --------------------------------------------------------------- */

/* Colour tokens are HSL components so a rule can add transparency: hsl(var(--primary) / .5). */
:root {
    --background: 210 20% 98%;  /* page background */
    --foreground: 215 35% 15%;  /* default body text */
    --primary: 215 50% 23%;  /* primary action and emphasis, the SeRP navy */
    --secondary: 210 40% 96%;  /* subdued surface behind secondary content */
    --muted: 210 30% 95%;  /* de-emphasised surface */
    --muted-foreground: 215 20% 50%;  /* de-emphasised text, hints and placeholders */
    --destructive: 0 72% 51%;  /* delete and other irreversible actions */
    --border: 214 20% 90%;  /* general borders and rules */
    --input: 215 14% 52%;  /* form control borders, at least 3:1 against white and the pale surfaces */
    --ring: 215 50% 23%;  /* keyboard focus ring */
    --radius: 0.625rem;  /* corner radius other radii are derived from */
    --serp-navy: #003761;  /* SeRP brand navy, as a hex literal rather than HSL components */
    --serp-light-blue: 200 70% 50%;  /* SeRP brand light blue */
    --success: 150 60% 40%;  /* success state */
    --info: 200 70% 50%;  /* informational state */
    --notice-danger: 0 72% 51%;  /* notice (alert) accent: error */
    --notice-warning: 38 92% 50%;  /* notice (alert) accent: warning */
    --notice-success: 150 60% 40%;  /* notice (alert) accent: success */
    --notice-info: 200 70% 50%;  /* notice (alert) accent: information */
    --tw-ring-inset:;
    --tw-ring-offset-width: 0px;
    --tw-ring-offset-color: #fff;
    --tw-ring-color: rgb(59 130 246 / .5);
    --tw-ring-offset-shadow: 0 0 #0000;
    --tw-ring-shadow: 0 0 #0000;
}

/* -- Base ----------------------------------------------------------------- */

/* Page text, headings and links. The page background is not forced with !important, so a host
   can still paint its own. The root font size is deliberately left to each host. */
body {
    font-family: 'Figtree', sans-serif;
    text-rendering: optimizelegibility;
    color: #08212C;
    background-color: hsl(var(--background));
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Poppins', sans-serif;
    font-weight: bold;
}

a {
    color: #0F52BA;
}

.text-primary {
    color: hsl(var(--primary)) !important;
}

.text-muted {
    color: hsl(var(--muted-foreground)) !important;
}

/* -- Utilities ------------------------------------------------------------ */

/* Surface, corner and shadow helpers the redesigned markup relies on. */
.bg-primary {
    background-color: var(--serp-navy) !important;
}

.bg-secondary {
    background-color: hsl(var(--secondary)) !important;
}

.bg-muted {
    background-color: hsl(var(--muted));
}

.rounded-2 {
    border-radius: calc(var(--radius) - 2px) !important;
}

.rounded-3 {
    border-radius: .75rem !important;
}

.rounded-md {
    border-radius: calc(var(--radius) - 2px) !important;
}

.rounded-lg {
    border-radius: var(--radius) !important;
}

.rounded-full {
    border-radius: 9999px;
}

.shadow-sm {
    --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
}

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

/* Rounded, roomier buttons in the navy palette. There is no vertical margin on .btn, because a
   host's forms and toolbars set their own spacing. */
.btn {
    padding: 8px 16px;
    border-radius: calc(var(--radius) - 2px);
}

/* The keyboard focus ring of a button: a white gap and then the navy ring colour. It shows for keyboard
   focus only, so a mouse click leaves no ring. */
.btn:focus-visible, .btn:active:focus-visible {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem hsl(var(--ring));
}

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

    .btn-primary:hover {
        background-color: #08212C !important;
        border-color: #08212C !important;
    }

/* Driven through Bootstrap's own button variables, so every state (hover, keyboard focus, pressed) takes
   the same navy fill with white text. Bootstrap paints a focused or pressed outline button with its hover
   variables, so leaving those on Bootstrap's blue put navy text on blue. */
.btn-outline-primary {
    --bs-btn-color: var(--serp-navy);
    --bs-btn-border-color: var(--serp-navy);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--serp-navy);
    --bs-btn-hover-border-color: var(--serp-navy);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--serp-navy);
    --bs-btn-active-border-color: var(--serp-navy);
    --bs-btn-disabled-color: var(--serp-navy);
    --bs-btn-disabled-border-color: var(--serp-navy);
}

/* Bootstrap's grey, red and green outline text (and its blue link button) is 4.1 to 4.4:1 against a host's
   pale page background and the tint of a notice. A darker shade of each clears 4.5:1 on both; the border and
   the hover fill are unchanged. */
.btn-outline-secondary {
    --bs-btn-color: #565e64;
}

.btn-outline-danger {
    --bs-btn-color: #b02a37;
}

.btn-outline-success {
    --bs-btn-color: #146c43;
}

.btn-link {
    --bs-btn-color: #0F52BA;
}

/* -- The brand logo ------------------------------------------------------- */

/* The environment's logo in the top bar of every host, drawn by the shared _BrandLogo partial. */
.serp-brand-logo {
    height: 40px;
    width: auto;
    max-width: 100%;
}

/* -- Icon buttons --------------------------------------------------------- */

/* A square button holding one icon, for the action column of a table row. */
.btn-icon {
    width: 32px;
    height: 32px;
    display: inline-grid;
    place-items: center;
    padding: 0;
    border: 1px solid #6c757d55;
    border-radius: 6px;
    background: #fff;
    color: #4b5563;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
}

    .btn-icon:hover {
        background: hsl(var(--secondary));
        color: #4b5563;
    }

.btn-icon + .btn-icon {
    margin-left: 6px;
}

.btn-icon-danger {
    color: hsl(var(--destructive));
}

    .btn-icon-danger:hover {
        background: hsl(var(--destructive) / .08);
        color: hsl(var(--destructive));
    }

/* Stands in for an action a row does not have, with the same size as a real icon button, so the
   rest of the row does not shift. Use it together with .btn-icon. */
.btn-icon-placeholder {
    visibility: hidden;
}

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

/* A soft hairline border on every card. Pages use "card shadow-sm rounded-3" with "card-body p-4". */
.card {
    border: 1px solid hsl(var(--border)) !important;
    --bs-card-border-color: var(--border);
}

/* A card's heading row: the title and its count badge on the left, the actions on the right. */
.card-title-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

/* -- Pill strip (navigation) ---------------------------------------------- */

/* Segmented navigation. Markup: "nav nav-pills d-inline-flex rounded-2 gap-1 p-1 bg-secondary".
   The strip wraps onto a second line on a narrow screen instead of overflowing. */
.nav-pills {
    flex-wrap: wrap;
}

.nav-pills .nav-link {
    border-radius: 4px;
    color: hsl(var(--muted-foreground));
}

    .nav-pills .nav-link.active {
        color: hsl(var(--foreground));
        background-color: #ffffff;
        --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
        --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
        box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
    }

    .nav-pills .nav-item {
        margin-bottom: 0;
    }

/* The count shown inside a pill. */
.nav-pills .badge {
    color: #fff;
    padding: 1px 7px;
}

/* -- Page header ---------------------------------------------------------- */

/* The title block at the top of a page, with an optional subtitle and a row of actions. */
.page-header {
    margin: 30px 0;
}

    .page-header h1 {
        font-size: 1.75rem;
    }

    .page-header .subtitle {
        color: hsl(var(--muted-foreground));
        margin-top: 4px;
    }

/* The actions never shrink and their button text never wraps, so a long subtitle takes the squeeze
   instead. A header that holds actions lets them drop below the title on a narrow screen. */
.page-header-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
    max-width: 100%;
}

    .page-header-actions .btn {
        white-space: nowrap;
    }

.page-header:has(> .page-header-actions) {
    flex-wrap: wrap;
}

    .page-header:has(> .page-header-actions) > :not(.page-header-actions) {
        flex: 1 1 20rem;
        min-width: 0;
    }

/* A page header that stays at the top of the screen while the page scrolls under it, so the actions and whose
   record it is stay in reach on a long page. Add .page-header-sticky to a .page-header and put a
   .page-header-sentinel just above it: pageHeaderSticky.js adds .is-stuck while the header is floating, and
   then the subtitle hides and a light shadow shows. Without that script the header stays full size. */
.page-header-sentinel {
    height: 0;
}

.page-header-sticky {
    position: sticky;
    top: 0;
    z-index: 20;
    margin: 0 0 18px;
    padding: 30px 0 12px;
    background-color: hsl(var(--background));
}

    .page-header-sticky.is-stuck {
        padding-top: 12px;
        box-shadow: 0 6px 8px -6px rgb(0 0 0 / .25);
    }

    .page-header-sticky.is-stuck .subtitle {
        display: none;
    }

/* -- Tables (scoped) ------------------------------------------------------ */

/* Data tables are styled only inside a .serp-table wrapper. SAM.Admin also uses tables for layout,
   so a bare "table" rule would restyle those. */
/* position: relative makes the wrapper the containing block for anything absolutely positioned inside the
   table, such as a visually-hidden column heading. Without it that text is placed against an ancestor outside
   the wrapper, escapes the overflow clip, and gives a narrow page a horizontal scroll bar. */
.serp-table {
    position: relative;
    border: 1px solid #E5E7EB;
    border-radius: var(--radius);
    overflow: auto;
}

    .serp-table .table {
        margin-bottom: 0;
    }

    .serp-table .table th {
        background-color: hsl(var(--secondary) / .5);
        height: 3rem;
        font-weight: 600;
        white-space: nowrap;
    }

    .serp-table .table th, .serp-table .table td {
        border-bottom: 1px solid #E5E7EB;
        padding-left: 1rem;
        padding-right: 1rem;
        vertical-align: middle;
    }

    .serp-table .table td {
        padding-top: .75rem;
        padding-bottom: .75rem;
    }

    .serp-table .table tbody tr:last-child td {
        border-bottom: none;
    }

    .serp-table .table-hover > tbody > tr:hover > * {
        --bs-table-bg-state: hsl(var(--secondary) / .5);
    }

    /* The action column: icon buttons packed to the right edge, in a column that shrinks to its content. A
       1% width is the smallest the table layout will give a column, so it takes only what its buttons need
       and the other columns share the rest. */
    .serp-table .table th.actions,
    .serp-table .table td.actions {
        width: 1%;
        white-space: nowrap;
    }

    .serp-table .table td.actions {
        text-align: right;
    }

/* -- Badges and status pills ---------------------------------------------- */

/* Bootstrap's "badge rounded-pill" with its bg-success, bg-danger, bg-warning text-dark, bg-info,
   bg-primary and bg-muted text-dark colours. A long pill wraps inside itself instead of being
   clipped, and a wrapped pill becomes a rounded rectangle rather than a stadium shape. A pill breaks
   between words only, never inside one. */
.badge {
    white-space: normal;
    text-align: left;
    max-width: 100%;
}

.badge.rounded-pill {
    border-radius: .75rem !important;
}

/* A pill in a table cell never wraps, so the table gives the squeeze to a long text column instead of
   cutting the pill's own column down to a few letters. */
.serp-table td .badge {
    white-space: nowrap;
}

/* Green outline on white, for an "Enabled" state. */
.badge-outline-success {
    border: 1px solid #198754;
    color: #198754;
    background: #fff;
}

/* Quiet navy-on-grey pill, for aspects and counts. */
.badge-soft {
    background: hsl(var(--secondary));
    color: hsl(var(--primary));
}

/* Side-by-side pills that wrap onto a second line cleanly. */
.pill-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

/* -- Key-value grid ------------------------------------------------------- */

/* Labelled values on a three-column grid that falls to one column on a narrow screen.
   Markup: <dl class="serp-dl"><div><dt>Label</dt><dd>Value</dd></div>...</dl>. */
dl.serp-dl {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px 32px;
    margin: 0;
}

    dl.serp-dl dt {
        font-size: 11.5px;
        text-transform: uppercase;
        letter-spacing: .04em;
        color: hsl(var(--muted-foreground));
        font-weight: 600;
        margin-bottom: 4px;
    }

    dl.serp-dl dd {
        margin: 0;
    }

    dl.serp-dl .span-all {
        grid-column: 1 / -1;
    }

/* Two lists one after the other (User edit groups below the approver organisations on User Details) are kept
   apart by the same gap as the rows inside one. */
dl.serp-dl + dl.serp-dl {
    margin-top: 18px;
}

@media (max-width: 767.98px) {
    dl.serp-dl {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* A small bold sub-heading with a hairline running to the right edge, such as "Access and roles". */
.section-rule {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 24px 0 12px;
    font-size: .95rem;
    font-weight: 700;
}

    .section-rule::after {
        content: "";
        flex: 1;
        height: 1px;
        background: hsl(var(--border));
    }

/* -- Notices -------------------------------------------------------------- */

/* Soft alerts: a tinted background, a hairline border in the same colour and dark text, with the
   leading Font Awesome icon in the accent colour. Done through Bootstrap's own alert variables so
   dismiss buttons and spacing keep working. */
.alert {
    --bs-alert-border-radius: var(--radius);
}

.alert-danger {
    --bs-alert-bg: hsl(var(--notice-danger) / .08);
    --bs-alert-border-color: hsl(var(--notice-danger) / .35);
    --bs-alert-color: #08212C;
}

.alert-warning {
    --bs-alert-bg: hsl(var(--notice-warning) / .08);
    --bs-alert-border-color: hsl(var(--notice-warning) / .35);
    --bs-alert-color: #08212C;
}

.alert-success {
    --bs-alert-bg: hsl(var(--notice-success) / .08);
    --bs-alert-border-color: hsl(var(--notice-success) / .35);
    --bs-alert-color: #08212C;
}

.alert-info {
    --bs-alert-bg: hsl(var(--notice-info) / .08);
    --bs-alert-border-color: hsl(var(--notice-info) / .35);
    --bs-alert-color: #08212C;
}

.alert-danger > .fa, .alert-danger > .fas {
    color: hsl(var(--notice-danger));
}

.alert-warning > .fa, .alert-warning > .fas {
    color: hsl(var(--notice-warning));
}

.alert-success > .fa, .alert-success > .fas {
    color: hsl(var(--notice-success));
}

.alert-info > .fa, .alert-info > .fas {
    color: hsl(var(--notice-info));
}

/* -- Forms ---------------------------------------------------------------- */

/* Control borders dark enough to see (the --input token), and a navy keyboard focus ring. */
.form-control, .form-select {
    border-color: hsl(var(--input));
    color: #08212C;
}

input[type=text]:focus, input[type=password]:focus, textarea.form-control:focus, select.form-control:focus, select.form-control:active, .form-control:focus {
    outline: 2px solid transparent;
    outline-offset: 2px;
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
    --tw-ring-color: hsl(var(--ring));
    --tw-ring-offset-width: 2px;
}

.form-label {
    font-weight: bold;
}

/* A control and the button or icon joined to it are one control. The box takes its height from the row
   instead of Bootstrap's or a host's fixed height, so it stands exactly as tall as the button beside it, and
   a joined grey button takes the box's own border colour so the two edges match. Hover is left alone. */
.input-group > .form-control, .input-group > .form-select {
    height: auto;
}

.input-group > .btn-outline-secondary {
    --bs-btn-border-color: hsl(var(--input));
    --bs-btn-disabled-border-color: hsl(var(--input));
}

/* A host's own vertical margin on .btn must not lift a joined button off the box's top and bottom edges. */
.input-group > .btn {
    margin-top: 0;
    margin-bottom: 0;
}

/* A field the validation script has marked invalid: a red border, 3:1 or better against white. It is
   more specific than the border rule above and than a host's own, so it wins in every host, and the
   keyboard focus ring below still shows on it. */
.form-control.input-validation-error, .form-select.input-validation-error {
    border-color: hsl(var(--notice-danger));
}

/* A box the browser filled in keeps the theme's own look. Chrome and Edge paint an autofilled field pale blue
   and ignore a background colour, so the colour is laid back over the whole box as an inset shadow instead,
   and the text colour is set through the one property they do honour. The border is left alone, so it stays
   the control border above. The shadow also replaces the focus ring a focused box draws as a shadow, so the
   focused rule puts that ring back, the same two-pixel gap and two-pixel ring; the keyboard outline further
   down is unaffected. The prefixed and the standard name are separate rules because a browser that does not
   know one name drops a rule that lists it. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
select:-webkit-autofill,
select:-webkit-autofill:hover {
    -webkit-box-shadow: 0 0 0 1000px var(--bs-body-bg) inset;
    box-shadow: 0 0 0 1000px var(--bs-body-bg) inset;
    -webkit-text-fill-color: #08212C;
    caret-color: #08212C;
}

input:-webkit-autofill:focus,
textarea:-webkit-autofill:focus,
select:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px var(--bs-body-bg) inset, 0 0 0 2px var(--bs-body-bg), 0 0 0 4px hsl(var(--ring));
    box-shadow: 0 0 0 1000px var(--bs-body-bg) inset, 0 0 0 2px var(--bs-body-bg), 0 0 0 4px hsl(var(--ring));
}

input:autofill,
input:autofill:hover,
textarea:autofill,
textarea:autofill:hover,
select:autofill,
select:autofill:hover {
    box-shadow: 0 0 0 1000px var(--bs-body-bg) inset;
    -webkit-text-fill-color: #08212C;
    caret-color: #08212C;
}

input:autofill:focus,
textarea:autofill:focus,
select:autofill:focus {
    box-shadow: 0 0 0 1000px var(--bs-body-bg) inset, 0 0 0 2px var(--bs-body-bg), 0 0 0 4px hsl(var(--ring));
}

/* -- Check boxes, radio buttons and switches ------------------------------ */

/* Bootstrap draws the box in a border about 1.3:1 against white, which is hard to see. This one takes the
   same border as a text box, navy when it is on, and still reads as a box when disabled. The focus rule comes
   first and the checked rule last, so a checked box stays navy while it has focus. */
.form-check-input {
    border-color: hsl(var(--input));
}

.form-check-input:focus {
    border-color: hsl(var(--input));
    box-shadow: none;
}

.form-check-input:disabled {
    opacity: .6;
    background-color: hsl(var(--muted));
}

.form-check-input:checked, .form-check-input[type=checkbox]:indeterminate {
    background-color: var(--serp-navy);
    border-color: var(--serp-navy);
}

/* A switch's knob is pale grey when it is off, so it takes the border colour instead. */
.form-switch .form-check-input:not(:checked) {
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23738296'/%3e%3c/svg%3e");
}

/* -- Keyboard focus ------------------------------------------------------- */

/* A 2px navy ring on whatever takes focus from the keyboard, and none after a mouse click. A button draws its
   own ring as a shadow (see Buttons). Bootstrap turns the outline off on its own components, so each is named
   here to get it back. The ring shows up against white and against the tinted notices. The Dropzone upload
   button (SAM.Researcher's file pages) is named for the same reason: its own stylesheet gives it
   "outline: inherit" with a more specific selector than the plain :focus-visible. */
:focus-visible,
.dropzone .dz-message .dz-button:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible,
.form-check-input:focus-visible,
.page-link:focus-visible,
.accordion-button:focus-visible,
.nav-link:focus-visible,
.navbar-toggler:focus-visible,
.btn-close:focus-visible {
    outline: 2px solid hsl(var(--ring));
    outline-offset: 2px;
}

/* -- Pagination ----------------------------------------------------------- */

/* The current page in navy, and a greyed-out disabled link. */
.page-item.disabled .page-link {
    color: hsl(var(--muted-foreground)) !important;
    pointer-events: none;
    background-color: hsl(var(--secondary)) !important;
    border-color: transparent !important;
    opacity: .5;
}

.page-item.active .page-link {
    color: #fff;
    background-color: var(--serp-navy) !important;
    border-color: var(--serp-navy);
    --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
}

/* -- Accordion ------------------------------------------------------------ */

/* An open accordion header on the subdued surface, and a hairline between items. */
.accordion-button:not(.collapsed) {
    color: #08212C;
    background-color: hsl(var(--secondary));
    box-shadow: none;
}

.accordion-item {
    border-color: #E5E7EB;
}

/* -- Avatar --------------------------------------------------------------- */

/* A round navy badge holding a user's initials. */
.user-avatar {
    background-color: var(--serp-navy);
    color: #ffffff;
    font-weight: 600;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    text-transform: uppercase;
}

/* -- Status card ---------------------------------------------------------- */

/* A single centred card announcing one outcome, such as "request complete" or "something went
   wrong". Markup: "card shadow-sm rounded-3 status-card" > "card-body p-4", holding a .status-tile,
   an h1, then paragraphs. */
.status-card {
    max-width: 560px;
    margin: 24px auto;
    text-align: center;
}

    .status-card h1 {
        font-size: 1.5rem;
        margin-bottom: 12px;
    }

/* The square icon badge at the top of a status card, softly tinted with a solid icon. */
.status-tile {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    margin: 0 auto 16px;
    border-radius: var(--radius);
    font-size: 1.5rem;
    line-height: 1;
}

.status-tile-success {
    background: hsl(var(--notice-success) / .12);
    color: hsl(var(--notice-success));
}

.status-tile-warning {
    background: hsl(var(--notice-warning) / .15);
    color: hsl(var(--notice-warning));
}

/* A neutral grey-blue tile, for an outcome that is neither good nor a fault, such as "access denied". */
.status-tile-muted {
    background: hsl(var(--muted));
    color: hsl(var(--muted-foreground));
}

/* A small monospace chip for a value someone reads out or searches for, such as a request ID. It
   sets its own colour because Bootstrap's bare code element is pink. */
.code-chip {
    display: inline-block;
    padding: 2px 8px;
    border-radius: calc(var(--radius) - 4px);
    background: hsl(var(--secondary));
    color: #08212C;
    font-family: SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
    font-size: .85rem;
}

/* The floating "Back to top" button that samBackToTop.js adds to every page. It sits bottom LEFT because
   SAM.Admin's toast stack (.serp-toast-stack) is fixed to the bottom right and grows upward as notices
   arrive, so a button there would be covered by them. Its z-index is above the sticky page header (20) and
   the sticky monitoring controls (10) and below Bootstrap's modals and their backdrops (1050 and up) and the
   toast stack (9999), so a dialog or a notice is never hidden behind it. */
.sam-back-to-top {
    position: fixed;
    bottom: 20px;
    left: 20px;
    z-index: 1030;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--serp-navy);
    color: #fff;
    font-size: 1rem;
    box-shadow: 0 2px 10px rgb(0 0 0 / .25);
    cursor: pointer;
}

/* An author display value would otherwise beat the browser's rule that hides an element with the hidden
   attribute, leaving the button on screen. */
.sam-back-to-top[hidden] {
    display: none;
}

.sam-back-to-top:hover {
    background: hsl(var(--primary) / .85);
}

.sam-back-to-top:focus-visible {
    outline: 3px solid hsl(var(--ring));
    outline-offset: 2px;
}

/* A printed page has no use for a button. */
@media print {
    .sam-back-to-top {
        display: none;
    }
}