/**
 * sc-medication — the three public donor pages (medication reference,
 * document upload, status lookup), as one set.
 *
 * Runs inside the site's own page chrome (no dashboard scope), so every
 * value is explicit with brand fallbacks: navy #0B1F3A, teal #2CA6A4,
 * teal-dark #1F7B79, body #4A5A67, muted #6B7A88, light #F0F2F4,
 * hairline #E2E6EB — the palette the DATS dashboards and the training
 * portal already use. Every heading is classed with a fixed size (the
 * Ion theme styles bare h2/h3 at 41–70px).
 *
 * 0.5.3 restyle. The reference screens are the training module rows
 * (sclms-public.css) and the Credentials & Signature tab
 * (dats-public.css), so:
 *
 *   - Boxes are DATS's card: white, 1px #E2E6EB, radius 8px,
 *     shadow 0 1px 2px rgba(11,31,58,.04). The only other shadow used
 *     anywhere here is the training portal's raised card,
 *     0 4px 16px rgba(11,31,58,.1), for things that float (the
 *     autocomplete panel).
 *   - The teal accent has ONE job: the left bar on a section heading.
 *     It is no longer also a card's top border, and the panels that
 *     used a teal tint to mean "important" now use the neutral light
 *     surface, so the accent still means one thing.
 *   - Supporting text is a stacked explainer block, the way the
 *     training tab stacks module rows, instead of a row of equal
 *     columns.
 */

/* ── Page shell ─────────────────────────────────────────────── */

/*
 * Top and bottom breathing room. These pages are shortcode content
 * inside the theme's page template, which supplies none of its own, so
 * without this the first block butts the site header and the last one
 * butts the footer. 40px is DATS's --dats-space-10.
 */
.scmed-page {
    margin-top: var(--dats-space-10, 40px);
    margin-bottom: 64px;
    font-size: 15px;
    line-height: 1.6;
    color: var(--dats-text, #4A5A67);
}
.scmed-page *,
.scmed-page *::before,
.scmed-page *::after {
    box-sizing: border-box;
}
.scmed-page > * {
    margin-bottom: 24px;
}
.scmed-page > *:last-child {
    margin-bottom: 0;
}

/* Short utility pages (status lookup, upload confirmation) held to a
 * readable measure — full page width under a full-bleed hero is what
 * made the status page look unfinished. */
.scmed-page--narrow {
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
    /* These pages are short by nature — a hero and one card — so they
     * carry more room before the footer than the long ones do, or the
     * footer sits too close under a page that has already finished. */
    margin-bottom: 96px;
}

/* ── Hero ───────────────────────────────────────────────────── */

.scmed-hero {
    background: #0B1F3A;
    border-radius: 10px;
    padding: 36px 32px;
}
/* The eyebrow and the language toggle share the hero's top line, so
 * the toggle is anchored to something on every page instead of
 * floating in white space above it. */
.scmed-hero__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}
.scmed-hero__lang {
    flex: 0 0 auto;
    /* Keeps the toggle on the right even when the row wraps on a
     * phone, so its position reads the same on every page. */
    margin-left: auto;
}
.scmed-hero__eyebrow {
    display: inline-block;
    background: rgba(44, 166, 164, .18);
    border: 1px solid rgba(44, 166, 164, .4);
    border-radius: 999px;
    padding: 4px 14px;
    color: #7BD2D0;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.scmed-title {
    margin: 0 0 10px;
    color: #fff;
    font-size: 28px;
    font-weight: 700;
    line-height: 1.25;
}
.scmed-hero__sub {
    margin: 0 0 18px;
    max-width: 620px;
    color: rgba(255, 255, 255, .75);
    font-size: 15px;
}
.scmed-hero > *:last-child {
    margin-bottom: 0;
}

/* ── Buttons (page-local — no dashboard scope here) ─────────── */

.scmed-btn {
    display: inline-block;
    background: #0B1F3A;
    border: 1px solid #0B1F3A;
    border-radius: 6px;
    padding: 10px 20px;
    color: #fff !important;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    min-height: 40px;
    line-height: 1.3;
}
.scmed-btn:hover {
    background: #163454;
    border-color: #163454;
}
.scmed-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(31, 123, 121, .20);
}
.scmed-btn--hero {
    background: #2CA6A4;
    border-color: #2CA6A4;
}
.scmed-btn--hero:hover {
    background: #1F7B79;
    border-color: #1F7B79;
}
.scmed-btn--ghost {
    background: #fff;
    border: 1px solid #2CA6A4;
    color: #1F7B79 !important;
}
.scmed-btn--ghost:hover {
    background: rgba(44, 166, 164, .08);
}
.scmed-textlink {
    display: inline-block;
    margin-top: 12px;
    color: #1F7B79;
    font-size: 14px;
    font-weight: 600;
    text-decoration: underline;
}
.scmed-textlink:hover {
    color: #0B1F3A;
}

/* ── Search ─────────────────────────────────────────────────── */

/*
 * The search is its own card, not a full-bleed grey band with a
 * half-width field floating in it: the band read as a stray strip
 * belonging to nothing. Same card as everything else, and it keeps its
 * sticky behaviour unchanged.
 */
.scmed-searchbar {
    position: sticky;
    top: 0;
    z-index: 40;
    background: #fff;
    border: 1px solid #E2E6EB;
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(11, 31, 58, .04);
    padding: 12px;
}
.scmed-search {
    position: relative;
}
.scmed-search input[type="search"] {
    width: 100%;
    padding: 11px 40px 11px 14px;
    border: 1.5px solid #B9C2CC;
    border-radius: 6px;
    font-size: 15px;
    color: #0B1F3A;
    background: #fff;
    min-height: 44px;
}
.scmed-search input[type="search"]:hover {
    border-color: #2CA6A4;
}
.scmed-search input[type="search"]:focus {
    outline: none;
    border-color: #2CA6A4;
    box-shadow: 0 0 0 3px rgba(31, 123, 121, .20);
}
.scmed-search__clear {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    border: none;
    border-radius: 50%;
    background: #E2E6EB;
    color: #0B1F3A;
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
}
.scmed-search__clear:hover {
    background: #2CA6A4;
    color: #fff;
}
.scmed-search__clear:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(31, 123, 121, .20);
}
.scmed-suggest {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 50;
    margin-top: 4px;
    background: #fff;
    border: 1px solid #E2E6EB;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(11, 31, 58, .1);
    overflow: hidden;
}
.scmed-suggest button {
    display: block;
    width: 100%;
    padding: 10px 14px;
    background: #fff;
    border: none;
    border-bottom: 1px solid #F0F2F4;
    text-align: left;
    font-size: 14px;
    color: #0B1F3A;
    cursor: pointer;
}
.scmed-suggest button:last-child {
    border-bottom: none;
}
.scmed-suggest button:hover,
.scmed-suggest button.is-active {
    background: rgba(44, 166, 164, .08);
}
.scmed-hint {
    margin: 8px 0 0;
    font-size: 13px;
    color: #6B7A88;
}
.scmed-page mark {
    background: rgba(44, 166, 164, .2);
    color: #0B1F3A;
    border-radius: 2px;
    padding: 0 2px;
}

/* ── Search results ─────────────────────────────────────────── */

.scmed-results > * {
    margin-bottom: 14px;
}
.scmed-results__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 14px;
}
.scmed-results__head strong {
    color: #0B1F3A;
    font-size: 16px;
}
.scmed-result {
    background: #fff;
    border: 1px solid #E2E6EB;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(11, 31, 58, .04);
}
.scmed-result__head {
    background: #0B1F3A;
    padding: 14px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}
.scmed-result__name {
    margin: 0;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
}
.scmed-result__brands {
    margin: 2px 0 0;
    color: rgba(255, 255, 255, .65);
    font-size: 13px;
}
.scmed-result__brands mark,
.scmed-result__name mark {
    background: rgba(44, 166, 164, .45);
    color: #fff;
}
.scmed-result__body {
    padding: 14px 20px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 24px;
}
.scmed-result__label {
    margin: 0 0 3px;
    font-size: 11px;
    font-weight: 700;
    color: #6B7A88;
    text-transform: uppercase;
    letter-spacing: .05em;
}
.scmed-result__value {
    margin: 0;
    font-size: 14px;
    color: #0B1F3A;
}
.scmed-result__foot {
    background: #F0F2F4;
    border-top: 1px solid #E2E6EB;
    padding: 12px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    font-size: 13px;
}
.scmed-result__foot strong {
    color: #0B1F3A;
}
.scmed-result__actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.scmed-result__actions .scmed-btn,
.scmed-result__actions .scmed-btn--ghost {
    padding: 7px 14px;
    font-size: 13px;
    min-height: 0;
}
.scmed-noresults {
    background: #fff;
    border: 1px solid #E2E6EB;
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(11, 31, 58, .04);
    padding: 32px 24px;
    text-align: center;
}
.scmed-noresults h4 {
    margin: 0 0 8px;
    color: #0B1F3A;
    font-size: 18px;
    font-weight: 700;
}
.scmed-noresults p {
    max-width: 480px;
    margin: 0 auto 18px;
    font-size: 14px;
}
.scmed-noresults .scmed-result__actions {
    justify-content: center;
}

/* ── Explainer block ────────────────────────────────────────── */

/*
 * Was three equal columns of dense paragraph, on both the reference
 * page and the upload sidebar, which read as filler. Now one card
 * holding a stacked sequence — the rhythm the training tab uses for
 * its module rows: a title, its text, a hairline, the next one.
 */
.scmed-explain {
    background: #fff;
    border: 1px solid #E2E6EB;
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(11, 31, 58, .04);
    padding: 0 24px;
}
.scmed-explain__item {
    padding: 20px 0;
    border-bottom: 1px solid #EDF0F3;
}
.scmed-explain__item:last-child {
    border-bottom: none;
}
.scmed-explain__title {
    margin: 0 0 8px;
    color: #0B1F3A;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
}
.scmed-explain__body {
    margin: 0;
    font-size: 14px;
}

/* In the upload sidebar the same block is a set of labelled groups
 * beside the form, so its titles take the Credentials tab's group
 * label (14px, uppercase, muted) rather than competing with the
 * form's own section headings. */
.scmed-explain--side {
    padding: 0 20px;
}
.scmed-explain--side .scmed-explain__item {
    padding: 16px 0;
}
.scmed-explain--side .scmed-explain__title {
    margin: 0 0 6px;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--dats-text-muted, #4A5A67);
}
.scmed-explain--side .scmed-explain__body {
    font-size: 13.5px;
}

/* Neutral card, used for the reference page's empty state. */
.scmed-card {
    background: #fff;
    border: 1px solid #E2E6EB;
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(11, 31, 58, .04);
    padding: 20px 22px;
}

/* ── Section heading + quick nav ────────────────────────────── */

/* The teal accent's one job. */
.scmed-section__title {
    margin: 0 0 10px;
    padding-left: 12px;
    border-left: 3px solid #2CA6A4;
    color: #0B1F3A;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
}
.scmed-section__sub {
    margin: 0 0 16px;
    font-size: 14px;
}
.scmed-quicknav__label {
    margin: 0 0 8px;
    font-size: 13px;
    font-weight: 600;
    color: #0B1F3A;
}
.scmed-quicknav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
}
/* Same chip metrics as the onboarding roster filter chips. */
.scmed-chip {
    display: inline-block;
    padding: .35em .9em;
    border-radius: 999px;
    border: 1px solid #E2E6EB;
    background: #fff;
    color: #0B1F3A;
    font-size: .85rem;
    font-weight: 600;
    text-decoration: none;
}
.scmed-chip:hover {
    border-color: #2CA6A4;
    color: #1F7B79;
}
.scmed-chip:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(31, 123, 121, .20);
}

/* ── Drug class sections ────────────────────────────────────── */

.scmed-class {
    background: #fff;
    border: 1px solid #E2E6EB;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(11, 31, 58, .04);
    scroll-margin-top: 90px;
}
.scmed-class__head {
    background: #0B1F3A;
    padding: 14px 24px;
}
.scmed-class__title {
    margin: 0;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
}
.scmed-class__desc {
    margin: 0;
    padding: 16px 24px 12px;
    font-size: 14px;
}
.scmed-tablewrap {
    overflow-x: auto;
}
/* Fixed layout so the colgroup widths hold: with auto layout the test
 * type column absorbed the slack and left a wide gap before it. */
.scmed-table {
    width: 100%;
    min-width: 620px;
    table-layout: fixed;
    border-collapse: collapse;
    font-size: 14px;
}
.scmed-col--med    { width: 23%; }
.scmed-col--brands { width: 25%; }
.scmed-col--used   { width: 35%; }
.scmed-col--types  { width: 17%; }
.scmed-table th {
    padding: 10px 16px;
    background: #F0F2F4;
    border-bottom: 2px solid #E2E6EB;
    color: #0B1F3A;
    font-weight: 600;
    text-align: left;
}
.scmed-table th:first-child,
.scmed-table td:first-child {
    padding-left: 24px;
}
.scmed-table th:last-child,
.scmed-table td:last-child {
    padding-right: 24px;
}
.scmed-table td {
    padding: 10px 16px;
    border-bottom: 1px solid #EDF0F3;
    vertical-align: top;
    overflow-wrap: break-word;
}
.scmed-table tbody tr:last-child td {
    border-bottom: none;
}
.scmed-table tbody tr:hover {
    background: rgba(44, 166, 164, .06);
}
.scmed-med {
    color: #0B1F3A;
    font-weight: 600;
}
.scmed-types {
    white-space: normal;
}
/* Same pill metrics as the dashboards' status pills. */
.scmed-badge {
    display: inline-block;
    border-radius: 999px;
    padding: 2px 10px;
    margin: 0 4px 4px 0;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
}
.scmed-badge--urine {
    background: #E6F5F4;
    color: #1F7B79;
}
.scmed-badge--oral {
    background: #F1F3F5;
    color: #4A5A67;
}

/* ── Notes + CTA ────────────────────────────────────────────── */

.scmed-note {
    background: #F0F2F4;
    border: 1px solid #E2E6EB;
    border-left: 3px solid #2CA6A4;
    border-radius: 8px;
    padding: 18px 22px;
}
.scmed-note__title {
    margin: 0 0 8px;
    color: #0B1F3A;
    font-size: 15px;
    font-weight: 700;
}
.scmed-note p,
.scmed-disclaimer p {
    margin: 0;
    font-size: 13.5px;
}
.scmed-disclaimer {
    background: #F0F2F4;
    border: 1px solid #E2E6EB;
    border-radius: 8px;
    padding: 18px 22px;
}
.scmed-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    background: #0B1F3A;
    border-radius: 10px;
    padding: 24px 28px;
}
.scmed-cta__title {
    margin: 0 0 6px;
    color: #fff;
    font-size: 18px;
    font-weight: 700;
}
.scmed-cta p {
    margin: 0;
    max-width: 560px;
    color: rgba(255, 255, 255, .75);
    font-size: 14px;
}
.scmed-cta .scmed-btn {
    background: #2CA6A4;
    border-color: #2CA6A4;
    flex-shrink: 0;
}
.scmed-cta .scmed-btn:hover {
    background: #1F7B79;
    border-color: #1F7B79;
}
.scmed-empty {
    margin: 0;
    font-size: 14px;
    color: #6B7A88;
}

/* ── Upload + status pages ──────────────────────────────────── */

.scmed-alert {
    background: #FDECEA;
    border: 1px solid #F5C2BC;
    border-radius: 8px;
    padding: 12px 16px;
    color: #B42318;
    font-size: 14px;
}
.scmed-alert--warn {
    background: #FFF6E6;
    border-color: #F0C181;
    color: #8A5500;
}

/*
 * The guidance sits beside the fields it explains; consent and submit
 * run the full width beneath. Previously everything including the
 * consent panel lived in the left column, so the right column ran out
 * of content and left a tall empty gap down the page.
 */
.scmed-upload-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 32px;
    align-items: start;
    margin-bottom: 24px;
}
.scmed-upload-main {
    min-width: 0;
}
.scmed-upload-side {
    min-width: 0;
}
.scmed-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px 20px;
    margin-bottom: 8px;
}
.scmed-field {
    margin-bottom: 16px;
    min-width: 0;
}
.scmed-field--full {
    grid-column: 1 / -1;
}
.scmed-label {
    display: block;
    margin-bottom: 6px;
    color: #0B1F3A;
    font-size: 13px;
    font-weight: 600;
}
.scmed-optional {
    color: #6B7A88;
    font-weight: 400;
}
.scmed-page input[type="text"],
.scmed-page input[type="email"],
.scmed-page input[type="date"] {
    width: 100%;
    padding: 10px 12px;
    border: 1.5px solid #B9C2CC;
    border-radius: 6px;
    font-size: 14px;
    color: #0B1F3A;
    background: #fff;
    min-height: 42px;
}
.scmed-page input[type="text"]:hover,
.scmed-page input[type="email"]:hover,
.scmed-page input[type="date"]:hover {
    border-color: #2CA6A4;
}
.scmed-page input[type="text"]:focus,
.scmed-page input[type="email"]:focus,
.scmed-page input[type="date"]:focus {
    outline: none;
    border-color: #2CA6A4;
    box-shadow: 0 0 0 3px rgba(31, 123, 121, .20);
}
.scmed-help {
    margin: 6px 0 0;
    font-size: 13px;
    color: #6B7A88;
}
.scmed-fileerror {
    color: #B42318;
    font-weight: 600;
}

/*
 * File field. The native control is kept exactly as it is — same id,
 * name, accept and multiple — but laid transparently over the whole
 * zone, so the browser's own "Browse… no files selected" chrome is not
 * what the donor sees, while clicking anywhere, dropping files onto
 * the zone, and keyboard focus all keep working natively.
 */
.scmed-drop {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 104px;
    padding: 20px;
    border: 1px dashed #B9C2CC;
    border-radius: 8px;
    background: #F0F2F4;
    text-align: center;
}
.scmed-drop:hover {
    border-color: #2CA6A4;
    background: rgba(44, 166, 164, .06);
}
.scmed-drop:focus-within {
    border-color: #2CA6A4;
    box-shadow: 0 0 0 3px rgba(31, 123, 121, .20);
}
.scmed-drop__cta {
    display: inline-block;
    padding: 9px 18px;
    border-radius: 6px;
    background: #fff;
    border: 1px solid #0B1F3A;
    color: #0B1F3A;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    cursor: pointer;
}
.scmed-drop:hover .scmed-drop__cta {
    border-color: #1F7B79;
    color: #1F7B79;
}
.scmed-drop input[type="file"] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.scmed-filelist {
    list-style: none;
    margin: 12px 0 0;
    padding: 0;
}
.scmed-filelist li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    margin-bottom: 6px;
    background: #fff;
    border: 1px solid #E2E6EB;
    border-radius: 6px;
    font-size: 13px;
}
.scmed-filelist li:last-child {
    margin-bottom: 0;
}
.scmed-filelist li.is-bad {
    border-color: #F5C2BC;
    background: #FDECEA;
}
.scmed-filelist__name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #0B1F3A;
    font-weight: 600;
}
.scmed-filelist__size {
    color: #6B7A88;
    white-space: nowrap;
}
.scmed-filelist__rm {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #E2E6EB;
    border-radius: 50%;
    background: #fff;
    color: #6B7A88;
    cursor: pointer;
    font-size: 12px;
    line-height: 1;
    padding: 0;
}
.scmed-filelist__rm:hover {
    border-color: #B42318;
    color: #B42318;
}
.scmed-filelist__rm:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(31, 123, 121, .20);
}
.scmed-hp {
    position: absolute !important;
    left: -9999px !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Consent — neutral surface (the teal accent belongs to section
 * headings now), tighter bullets, and a checkbox row that reads as the
 * deliberate action it is without shrinking any legal text. */
.scmed-consent {
    background: #F0F2F4;
    border: 1px solid #E2E6EB;
    border-radius: 8px;
    padding: 20px 22px;
}
.scmed-consent__title {
    margin: 0 0 10px;
    color: #0B1F3A;
    font-size: 15px;
    font-weight: 700;
}
.scmed-consent p {
    margin: 0 0 10px;
    font-size: 13px;
    line-height: 1.6;
}
.scmed-consent ul {
    margin: 0 0 16px;
    padding-left: 18px;
    font-size: 13px;
    line-height: 1.55;
}
.scmed-consent li {
    margin-bottom: 6px;
}
.scmed-consent li:last-child {
    margin-bottom: 0;
}
.scmed-consentrow {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    background: #fff;
    border: 1px solid #E2E6EB;
    border-radius: 8px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    color: #0B1F3A;
    line-height: 1.5;
}
.scmed-consentrow:hover {
    border-color: #2CA6A4;
}
.scmed-consentrow:focus-within {
    border-color: #2CA6A4;
    box-shadow: 0 0 0 3px rgba(31, 123, 121, .20);
}
.scmed-consentrow input[type="checkbox"] {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin: 1px 0 0;
    accent-color: #2CA6A4;
}
/*
 * The submit row and the consent panel are inside the <form>, so the
 * page shell's `.scmed-page > *` block margin never reached them and
 * the button sat flush against the consent panel. 24px is the same
 * block rhythm used between every other block on these pages.
 */
.scmed-submitrow {
    display: flex;
    justify-content: flex-end;
    margin-top: 24px;
}
.scmed-submitrow .scmed-btn--wide {
    width: auto;
    min-width: 240px;
    text-align: center;
}

/* ── Success + status ───────────────────────────────────────── */

.scmed-refcard {
    background: #fff;
    border: 1px solid #E2E6EB;
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(11, 31, 58, .04);
    padding: 22px 26px;
}
.scmed-refcard__label {
    margin: 0 0 6px;
    font-size: 12px;
    font-weight: 700;
    color: #1F7B79;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.scmed-refcard__ref {
    margin: 0 0 12px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: .04em;
    color: #0B1F3A;
    overflow-wrap: anywhere;
}
.scmed-refcard__note,
.scmed-refcard__files {
    margin: 0 0 8px;
    font-size: 13px;
    line-height: 1.6;
}
.scmed-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

/* The lookup is one short form, so it sits in its own card and the
 * page is given a floor height — at full width under a full-bleed hero
 * the footer rode up and the page read as unfinished. */
.scmed-status {
    min-height: 52vh;
}
.scmed-lookup {
    background: #fff;
    border: 1px solid #E2E6EB;
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(11, 31, 58, .04);
    padding: 24px;
}
.scmed-lookup > * {
    margin-bottom: 16px;
}
.scmed-lookup > *:last-child {
    margin-bottom: 0;
}
.scmed-statusform {
    margin: 0;
}
.scmed-statusform .scmed-field {
    margin-bottom: 0;
}
.scmed-statusform__row {
    display: flex;
    gap: 10px;
}
.scmed-statusform__row input {
    flex: 1;
    min-width: 0;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    letter-spacing: .03em;
    text-transform: uppercase;
}
.scmed-statuscard {
    border: 1px solid #E2E6EB;
    border-left-width: 3px;
    border-radius: 8px;
    padding: 20px 24px;
    background: #fff;
}
.scmed-statuscard--pending {
    border-left-color: #8A5500;
    background: #FFF6E6;
}
.scmed-statuscard--review {
    border-left-color: #2CA6A4;
    background: #E6F5F4;
}
.scmed-statuscard--done {
    border-left-color: #1F7B79;
    background: #E6F5F4;
}
.scmed-statuscard--muted {
    border-left-color: #6B7A88;
    background: #F1F3F5;
}
.scmed-statuscard__ref {
    margin: 0 0 4px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 13px;
    color: #6B7A88;
    letter-spacing: .04em;
}
.scmed-statuscard__label {
    margin: 0 0 8px;
    color: #0B1F3A;
    font-size: 18px;
    font-weight: 700;
}
.scmed-statuscard__desc {
    margin: 0 0 10px;
    font-size: 14px;
    line-height: 1.65;
}
.scmed-statuscard__date {
    margin: 0;
    font-size: 13px;
    color: #6B7A88;
}
.scmed-statushelp {
    margin: 0;
    font-size: 13px;
    color: #6B7A88;
}

/* ── Tablet ─────────────────────────────────────────────────── */

@media (max-width: 900px) {
    /* The sidebar guidance drops under the fields it explains before
     * the columns get too narrow to read. */
    .scmed-upload-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }
}

/* ── Phone ──────────────────────────────────────────────────── */

@media (max-width: 768px) {
    .scmed-page {
        margin-top: 24px;
        margin-bottom: 48px;
    }
    .scmed-page--narrow {
        margin-bottom: 64px;
    }
    .scmed-hero {
        padding: 26px 20px;
    }
    .scmed-title {
        font-size: 22px;
    }
    .scmed-explain,
    .scmed-explain--side {
        padding: 0 18px;
    }
    .scmed-result__body {
        grid-template-columns: 1fr;
    }
    .scmed-cta {
        padding: 20px;
    }
    .scmed-cta .scmed-btn {
        width: 100%;
        text-align: center;
    }
    .scmed-fields {
        grid-template-columns: 1fr;
    }
    .scmed-lookup {
        padding: 18px;
    }
    .scmed-statusform__row {
        flex-direction: column;
    }
    .scmed-actions .scmed-btn {
        width: 100%;
        text-align: center;
    }
    .scmed-submitrow .scmed-btn--wide {
        width: 100%;
        min-width: 0;
    }
}

/* ── Shared EN/FR toggle (markup from the sc-lang mu-plugin) ── */
.sc-lang-toggle { display: inline-flex; gap: 2px; padding: 2px; border: 1px solid #D5DDE3; border-radius: 999px; background: #fff; }
.sc-lang-toggle__opt { display: inline-block; padding: 4px 12px; border-radius: 999px; font-size: 13px; font-weight: 700; letter-spacing: .02em; color: #4A5A67; text-decoration: none; line-height: 1.4; }
.sc-lang-toggle__opt:hover { color: #0B1F3A; background: #F0F4F7; text-decoration: none; }
.sc-lang-toggle__opt:focus-visible { outline: 2px solid #0B1F3A; outline-offset: 1px; }
.sc-lang-toggle__opt.is-active { background: #0B1F3A; color: #FFFFFF; }