/* ---------------- Born Again Academy palette, matched to the original site ----------------
   Yellow announcement bar #ffd966, charcoal text #212121 / #1b1b1b, white content,
   golden watercolor banner, dark charcoal buttons #303033.
   Fonts: Source Sans 3 (body) + Quicksand (display headings), loaded in App.razor. */
:root {
    --baa-yellow: #ffd966;
    --baa-gold-light: #fbf0d2;
    --baa-gold: #f3d488;
    --baa-charcoal: #1b1b1b;
    --baa-ink: #212121;
    --baa-grey: #6b6b6b;
    --baa-border: #e5e5e5;
    --baa-button: #303033;
}

html, body {
    font-family: 'Source Sans 3', 'Source Sans Pro', sans-serif;
    color: var(--baa-ink);
    background-color: #fff;
    margin: 0;
}

a, .btn-link {
    color: var(--baa-ink);
}

a:hover {
    color: #000;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Quicksand', sans-serif;
    font-weight: 400;
    color: var(--baa-ink);
}

.btn-primary {
    color: #fff;
    background-color: var(--baa-button);
    border-color: var(--baa-charcoal);
    border-radius: 4px;
    font-weight: 600;
}

    .btn-primary:hover, .btn-primary:focus {
        background-color: var(--baa-charcoal);
        border-color: var(--baa-charcoal);
    }

.btn-secondary {
    color: var(--baa-ink);
    background-color: transparent;
    border: 1px solid var(--baa-charcoal);
    border-radius: 4px;
    font-weight: 600;
}

    .btn-secondary:hover, .btn-secondary:focus {
        background-color: rgba(0, 0, 0, 0.05);
        color: #000;
        border-color: var(--baa-charcoal);
    }

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem #fff, 0 0 0 0.25rem var(--baa-yellow);
}

.content {
    padding-top: 0;
}

h1:focus {
    outline: none;
}

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

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: #b32121;
    padding: 1rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred.";
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

/* Defense-in-depth copy of the scoped rule so the error banner never renders visible/unstyled. */
#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

/* ---------------- Page banner: the original site's banner images, with a golden
   gradient as the fallback while /images hasn't been populated yet ---------------- */
.page-banner {
    background-color: #f7df9c;
    background-image:
        radial-gradient(ellipse at 20% 30%, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 45%),
        radial-gradient(ellipse at 75% 60%, rgba(240, 195, 90, 0.55) 0%, rgba(240, 195, 90, 0) 55%),
        linear-gradient(135deg, #fdf6e3 0%, #f7df9c 55%, #f0c96a 100%);
    background-size: cover;
    background-position: center;
    padding: 4.5rem 2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 2.5rem;
}

    /* banner-1.jpg = golden watercolor, banner-2.jpg = yellow knit (downloaded from the
       original site by tools/download-images.ps1) */
    .page-banner.banner-watercolor {
        background-image: url('/images/banner-1.jpg'), linear-gradient(135deg, #fdf6e3 0%, #f7df9c 55%, #f0c96a 100%);
    }

    .page-banner.banner-knit {
        background-image: url('/images/banner-2.jpg'), linear-gradient(135deg, #fdf6e3 0%, #f7df9c 55%, #f0c96a 100%);
    }

    .page-banner h1 {
        font-family: 'Quicksand', sans-serif;
        font-weight: 300;
        font-size: clamp(1.8rem, 4.5vw, 3rem);
        color: #3c3c3c;
        border: 1px solid #3c3c3c;
        padding: 1.75rem 3.5rem;
        margin: 0;
        text-align: center;
        max-width: 90%;
    }

    /* Per-activity-type icon next to the lesson title (Courses/ActivityPageView.razor, 2026-09-11
       per Weston). Sized in em so it tracks the h1's own clamp()'d font-size instead of a fixed
       pixel size that would look tiny on desktop or oversized on mobile; the small negative
       vertical-align nudges the icon's optical center onto the text baseline the way a glyph would
       sit, since SVGs otherwise align to their bottom edge like an inline image. */
    .page-banner h1 .activity-type-icon {
        display: inline-flex;
        width: 0.8em;
        height: 0.8em;
        margin-right: 0.35em;
        vertical-align: -0.1em;
        color: inherit;
    }

        .page-banner h1 .activity-type-icon svg {
            width: 100%;
            height: 100%;
        }

    /* Personalized welcome banner (Courses/MyCourses.razor, 2026-09-11 per Weston) -- same
       inline-with-heading-text placement as .activity-type-icon just above, sized in px here
       instead of em since UserAvatar's own SizePx parameter already fixes its on-screen size. */
    .page-banner h1 .user-avatar {
        vertical-align: middle;
        margin-right: 0.5rem;
    }

    .page-banner.banner-empty {
        min-height: 220px;
    }

/* ---------------- Content column ---------------- */
main > article.content > .page-inner {
    max-width: 56rem;
    margin: 0 auto;
    padding: 0 1.5rem 4rem;
}

/* Pages that don't use .page-inner (admin CMS, account/login pages) still get a centered,
   padded column so their content doesn't hug the viewport edges under the new full-width layout. */
main > article.content > *:not(.page-banner):not(.page-inner) {
    max-width: 56rem;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

main > article.content > h1:first-child,
main > article.content > h2:first-child {
    margin-top: 2rem;
}

.page-body {
    font-size: 1.1rem;
    line-height: 1.7;
}

.page-body h1 { font-size: 2.2rem; margin-top: 1rem; }
.page-body h2 { margin-top: 2.25rem; font-size: 1.7rem; }
.page-body h3 { margin-top: 1.75rem; font-size: 1.3rem; }
.page-body ul, .page-body ol { padding-left: 1.5rem; }
.page-body p { margin-bottom: 1.1rem; }
.page-body table.state-pathways { width: 100%; border-collapse: collapse; margin: 1rem 0; }
.page-body table.state-pathways th, .page-body table.state-pathways td {
    border: 1px solid var(--baa-border);
    padding: 0.5rem 0.75rem;
    text-align: left;
}
.page-body table.state-pathways th { background: var(--baa-gold-light); }

.edit-page-link { margin-top: 2rem; }
.edit-page-link a {
    display: inline-block;
    padding: 0.4rem 0.9rem;
    background: var(--baa-gold-light);
    color: var(--baa-ink);
    border: 1px solid var(--baa-gold);
    border-radius: 4px;
    text-decoration: none;
    font-size: 0.9rem;
}

    .edit-page-link a:hover {
        background: var(--baa-gold);
    }

.section-index { list-style: none; padding: 0; }
.section-index li {
    margin-bottom: 0.6rem;
    border: 1px solid var(--baa-border);
    border-radius: 4px;
}
.section-index li a {
    display: block;
    padding: 0.85rem 1.1rem;
    font-family: 'Quicksand', sans-serif;
    font-size: 1.1rem;
    text-decoration: none;
}
.section-index li a:hover { background: var(--baa-gold-light); }

/* Courses/MyAssignments.razor -- one card per outstanding assignment, grouped under a course heading.
   Reuses .assignment-status for the badge (same vocabulary as the assignment page itself and the
   course outline's .revision-tag) so a student sees one consistent color for "needs revision" or
   "below passing" everywhere in the student portal. */
.my-assignments-course-title {
    font-family: 'Quicksand', sans-serif;
    font-size: 1.2rem;
    margin: 1.5rem 0 0.6rem;
}
.my-assignments-course-title:first-of-type { margin-top: 0.5rem; }
.my-assignments-list { list-style: none; padding: 0; }
.my-assignments-item {
    margin-bottom: 0.6rem;
    border: 1px solid var(--baa-border);
    border-radius: 4px;
    padding: 0.85rem 1.1rem;
}
.my-assignments-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    text-decoration: none;
    color: var(--baa-ink);
}
.my-assignments-item:hover { background: var(--baa-gold-light); }
.my-assignments-item-title {
    font-family: 'Quicksand', sans-serif;
    font-size: 1.05rem;
}
.my-assignments-feedback {
    margin: 0.5rem 0 0;
    padding-top: 0.5rem;
    border-top: 1px solid var(--baa-border);
    font-style: italic;
    color: var(--baa-grey);
    font-size: 0.9rem;
}

/* Completed lessons on the course outline (CourseOutlineView.razor) get a visibly different color/
   background, not just the "✓" prefix already in the text -- a glance down the list should show
   progress, not require reading each line. */
.section-index li a.completed {
    color: #1b6e3c;
    background: #eaf6ee;
    font-weight: 600;
}
.section-index li a.completed:hover { background: #dcf0e2; }

/* Previous/Next at the bottom of a lesson (ActivityPageView.razor), so a student can move through
   the course without going back to the outline after every page. */
.activity-nav {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--baa-border);
}

/* Quiz-taking (ActivityPageView.razor) and quiz authoring (EditQuiz.razor). Correct/incorrect share
   the same green/eaf6ee "correct" and a matching red "incorrect" palette used for completed lessons
   above, so a student scanning results recognizes the same visual language. */
.quiz-intro { margin-bottom: 1.5rem; }

.quiz-question {
    padding: 1.25rem;
    margin-bottom: 1.25rem;
    background: #fff;
    border: 1px solid var(--baa-border);
    border-radius: 8px;
}
.quiz-question-html { font-weight: 600; margin-bottom: 0.75rem; }

.quiz-options { display: flex; flex-direction: column; gap: 0.5rem; }
.quiz-option { display: flex; align-items: center; gap: 0.5rem; font-weight: normal; cursor: pointer; }

.quiz-match-pairs { display: flex; flex-direction: column; gap: 0.75rem; }
.quiz-match-row { display: flex; align-items: center; gap: 0.75rem; }
.quiz-match-prompt { min-width: 12rem; font-weight: 500; }

.quiz-score {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
}

.quiz-question-result.correct { border-color: #1b6e3c; background: #eaf6ee; }
.quiz-question-result.incorrect { border-color: #a6353a; background: #fbeaea; }

.quiz-option-result { padding: 0.15rem 0; }
.quiz-option-result.correct { color: #1b6e3c; font-weight: 600; }
.quiz-option-result.incorrect { color: #a6353a; font-weight: 600; }

/* One-question-at-a-time on narrow/mobile viewports (Courses/ActivityPageView.razor's take-quiz form)
   -- pure responsive CSS, no device/user-agent detection. .quiz-question-take only marks the questions
   in the TAKING form specifically, not the post-submission results view (.quiz-question-result below),
   which always stays a normal scrollable list regardless of viewport -- reviewing answers isn't
   something that benefits from being paginated one at a time the way answering does. Same
   799.98px breakpoint .hero-columns already uses elsewhere in this file. */
.quiz-mobile-progress { display: none; color: var(--baa-grey); font-weight: 600; margin-bottom: 0.75rem; }
.quiz-mobile-nav { display: none; gap: 0.5rem; margin-top: 1rem; }
@media (max-width: 799.98px) {
    .quiz-question-take { display: none; }
    .quiz-question-take.quiz-question-current { display: block; }
    .quiz-mobile-progress { display: block; }
    .quiz-mobile-nav { display: flex; }
    .quiz-desktop-submit { display: none; }
}

.quiz-match-row-result { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.quiz-match-row-result.correct { color: #1b6e3c; }
.quiz-match-row-result.incorrect { color: #a6353a; }

.quiz-answer-tag { font-size: 0.85rem; font-weight: normal; color: var(--baa-grey); }

/* Admin quiz authoring (EditQuiz.razor) */
.quiz-question-list { list-style: none; padding-left: 0; }
.quiz-question-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.25rem 1rem;
    padding: 0.85rem 1rem;
    margin-bottom: 0.5rem;
    background: #fff;
    border: 1px solid var(--baa-border);
    border-radius: 6px;
}
.quiz-question-row-html { grid-column: 1; }
.quiz-question-row-meta { grid-column: 1; color: var(--baa-grey); font-size: 0.85rem; }
.quiz-question-row-actions { grid-column: 2; grid-row: 1 / span 2; align-self: center; white-space: nowrap; }
.quiz-question-form {
    margin-top: 1.5rem;
    padding: 1.25rem;
    background: #fff;
    border: 1px solid var(--baa-border);
    border-radius: 8px;
}

/* A course listed on "My Courses" whose access has lapsed (Courses/MyCourses.razor) -- same muted-grey
   treatment as .nav-only-badge/.quiz-answer-tag, since it's informational text rather than a link. */
.access-ended { color: var(--baa-grey); font-style: italic; }

/* Discussion forum (Courses/ActivityPageView.razor) -- same card language as .quiz-question, muted
   meta line matching .quiz-answer-tag/.access-ended. white-space: pre-wrap preserves a post's line
   breaks without storing/rendering it as HTML (ForumPost.Body is always plain, HTML-encoded text). */
.forum-prompt { margin-bottom: 1.25rem; }
.forum-post-list { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 1.25rem; }
.forum-post {
    padding: 1rem 1.25rem;
    background: #fff;
    border: 1px solid var(--baa-border);
    border-radius: 8px;
}
/* Author avatar (UserAvatar.razor) added 2026-09-11, per Weston: "Add profile pic that appears
   beside their discussion posts" -- flex row so it sits inline with the existing meta text
   instead of stacking above it. */
.forum-post-meta { display: flex; align-items: center; gap: 0.5rem; color: var(--baa-grey); font-size: 0.85rem; margin-bottom: 0.35rem; }
.forum-post-body { white-space: pre-wrap; }

/* Assignment submissions (Courses/ActivityPageView.razor) -- submission history reuses the .forum-post
   card language above. Status badge reuses the exact green/red vocabulary .quiz-question-result
   correct/incorrect already established, plus a muted "pending" variant matching .access-ended. */
.assignment-instructions { margin-bottom: 1.25rem; }
.assignment-status {
    display: inline-block;
    padding: 0.15rem 0.6rem;
    border-radius: 4px;
    font-weight: 600;
    font-size: 0.85rem;
}
.assignment-status.graded-pass { color: #1b6e3c; background: #eaf6ee; }
.assignment-status.graded-fail { color: #8a5b00; background: #fff6d5; }
.assignment-status.needs-revision { color: #a6353a; background: #fbeaea; }
.assignment-status.pending { color: var(--baa-grey); background: var(--baa-gold-light); font-style: italic; }
/* Courses/MyAssignments.razor only -- "hasn't been touched yet" is deliberately a different color
   from .needs-revision/.graded-fail (both of which mean "staff already looked at this and sent it
   back"), so a student can tell the two situations apart at a glance. */
.assignment-status.not-submitted { color: #8a5b00; background: #fff6d5; }

/* One card per deliverable. .assignment-deliverable-card (Courses/ActivityPageView.razor) is the big
   one: everything about a single deliverable -- every past attempt's content for it, newest first,
   each in its own white .forum-post history entry, followed directly by that deliverable's own
   add/submit controls -- grouped together rather than a separate "Your submissions" list (grouped by
   attempt, every deliverable mixed together) sitting far from the upload form for each one.
   .assignment-deliverable-group is the smaller, staff-facing version: AssignmentSubmissionContent.razor
   still uses it as-is (nested inside a submission's outer .forum-post card) on every screen that shows
   a submission read-only (staff rosters, OfferingDashboard.razor, GradingQueue.razor) -- only
   ActivityPageView.razor's own per-deliverable history renders it Bare (no card, no label) since that
   card and label are already provided by the outer .assignment-deliverable-card. A slightly tinted
   background (not plain white) keeps both distinct from the white .forum-post cards nested inside them. */
.assignment-deliverable-group,
.assignment-deliverable-card {
    padding: 0.85rem 1rem;
    background: #f8f7f4;
    border: 1px solid var(--baa-border);
    border-radius: 6px;
}
.assignment-deliverable-group + .assignment-deliverable-group {
    margin-top: 0.75rem;
}
.assignment-deliverable-label {
    font-weight: 600;
    margin-bottom: 0.4rem;
}
.assignment-deliverable-card h4 {
    margin-bottom: 0.75rem;
}
.assignment-deliverable-history-entry + .assignment-deliverable-history-entry,
.assignment-deliverable-history-entry + .assignment-deliverable-upload-section {
    margin-top: 0.75rem;
}

/* Picture-type assignment submissions (Components/Shared/AssignmentSubmissionContent.razor) -- a small
   row of clickable thumbnails rather than a stacked Download/View link list, since photos are the one
   submission type that can have more than one item. */
.assignment-photo-gallery { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.5rem 0; }
.assignment-photo-thumb { display: block; }
.assignment-photo-thumb img {
    width: 96px;
    height: 96px;
    object-fit: cover;
    border-radius: 4px;
    border: 1px solid var(--baa-gold-light);
}
.assignment-photo-thumb-wrap { position: relative; display: inline-block; }
.assignment-photo-delete {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 20px;
    height: 20px;
    line-height: 18px;
    padding: 0;
    border-radius: 50%;
    background: #a6353a;
    color: #fff;
    border: 2px solid #fff;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}
.assignment-pending-photo-list { list-style: none; padding-left: 0; margin-bottom: 0.5rem; }
.assignment-pending-photo-list li { padding: 0.15rem 0; }

/* Document/Picture deliverable file pickers (Courses/ActivityPageView.razor) styled to match the
   "Record a video" / "Choose a video file" buttons on a Video deliverable -- a raw <input type="file">
   can't be restyled directly, so it's visually hidden (clipped, not display:none, so it stays reachable
   and a <label for="..."> click still forwards to it) and a <label class="btn btn-outline-primary">
   stands in as the visible control, same look as the video buttons' actual <button> elements. */
.file-input-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.admin-page-tree { list-style: none; padding-left: 0; }
.admin-page-tree ul { list-style: none; padding-left: 1.25rem; }
.admin-page-tree li { margin-bottom: 0.25rem; }
.nav-only-badge { color: var(--baa-grey); font-size: 0.8rem; }

.billing-blocked {
    padding: 1.25rem;
    background: var(--baa-gold-light);
    border: 1px solid var(--baa-gold);
    border-radius: 4px;
}

/* ---------------- Images in page content ---------------- */
.page-body img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
}

.page-photo {
    float: right;
    max-width: 340px;
    margin: 0 0 1.25rem 1.75rem;
}

.photo-grid {
    clear: both;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1rem;
    margin-top: 2.5rem;
}

/* Home page hero: two columns like the original site. align-items is deliberately the flex
   default (stretch), not flex-start -- the text column (headline + cohort card) and the photo
   column are rarely the same natural height, and flex-start left the shorter column's leftover
   space sitting empty at its bottom instead of centered, which read as the two columns not being
   lined up. Stretching both to the row's full height and then vertically centering the photo
   inside its own (now taller) column via justify-content keeps the photo's midpoint level with
   the text block regardless of which column is naturally taller, without cropping the image. */
.hero-columns {
    display: flex;
    gap: 2.5rem;
    align-items: stretch;
}

.hero-text {
    flex: 1 1 55%;
    text-align: center;
}

.hero-logo img {
    max-width: 260px;
}

.hero-role {
    font-family: 'Quicksand', sans-serif;
    font-size: 1.9rem;
    color: #3c3c3c;
    margin: 1rem 0;
}

.hero-tags {
    color: #3c3c3c;
}

.hero-photos {
    flex: 1 1 45%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1rem;
}

    .hero-photos img {
        width: 100%;
        height: auto;
        border-radius: 4px;
    }

@media (max-width: 799.98px) {
    .hero-columns {
        flex-direction: column;
    }

    .page-photo {
        float: none;
        margin: 1rem auto;
    }
}

/* ---------------------------------------------------------------------------
   Second audience: state health/education reviewers.
   These pages are deliberately plainer than the student-facing site -- a
   reviewer is scanning for completeness and currency, not being sold to. The
   look to aim for is "official document", not "landing page".
   --------------------------------------------------------------------------- */

.doc-intro {
    border-left: 3px solid #ffd966;
    padding: 0.75rem 0 0.75rem 1rem;
    margin-bottom: 2rem;
    color: #333;
}

.doc-index {
    margin: 0 0 2rem;
}

.doc-index dt {
    font-weight: 600;
    margin-top: 1rem;
}

.doc-index dd {
    margin: 0.15rem 0 0 0;
    color: #555;
    font-size: 0.95rem;
}

/* Unfinished sections a reviewer would notice. Loud on purpose so they can't
   ship by accident -- see the Program Overview page. */
.doc-todo {
    background: #fff6d5;
    border: 1px dashed #c9a227;
    padding: 0.6rem 0.9rem;
    color: #6b5300;
    font-size: 0.95rem;
}

.doc-stamp {
    margin-top: 3rem;
    padding-top: 1rem;
    border-top: 1px solid #ddd;
    font-size: 0.85rem;
    color: #666;
}

/* --- Site footer --- */

.site-footer {
    margin-top: 4rem;
    padding: 2rem 1.5rem;
    border-top: 1px solid #e4e4e4;
    background: #fafafa;
    text-align: center;
}

.footer-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem 1.5rem;
    margin-bottom: 1rem;
}

.footer-nav a {
    color: #303033;
    font-size: 0.9rem;
    text-decoration: none;
}

.footer-nav a:hover {
    text-decoration: underline;
}

.footer-legal {
    margin: 0;
    font-size: 0.8rem;
    color: #777;
}

/* ---------------------------------------------------------------------------
   Live blocks embedded in CMS page bodies via [[cohorts]] and [[state-pricing]].
   These render from the database, so they turn up inside staff-edited HTML and
   have to sit comfortably in the middle of ordinary page copy.
   --------------------------------------------------------------------------- */

.cohort-list {
    list-style: none;
    margin: 1rem 0 1.5rem;
    padding: 0;
}

.cohort {
    border-left: 3px solid #ffd966;
    padding: 0.5rem 0 0.5rem 1rem;
    margin-bottom: 1rem;
}

.cohort-dates {
    margin: 0;
    font-size: 1.05rem;
}

.cohort-detail {
    margin: 0.15rem 0 0;
    font-size: 0.9rem;
    color: #555;
}

.cohort-seats {
    color: #8a5b00;
    font-weight: 600;
}

.cohort-empty {
    color: #555;
    font-style: italic;
}

.hero-cohort {
    margin: 1.25rem 0;
}

.hero-cohort-label {
    margin: 0 0 0.25rem;
}

/* --- State-dependent pricing --- */

.state-pricing {
    margin: 1.5rem 0 2rem;
    padding: 1.25rem;
    border: 1px solid #e4e4e4;
    border-radius: 6px;
    background: #fcfbf7;
}

.state-pricing-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
}

.state-pricing-label {
    font-weight: 600;
}

.state-pricing-select {
    padding: 0.45rem 0.6rem;
    border: 1px solid #c9c9c9;
    border-radius: 4px;
    background: #fff;
    min-width: 16rem;
}

.state-pricing-hint,
.state-pricing-pending {
    margin: 1rem 0 0;
    font-size: 0.95rem;
    color: #555;
}

.state-pricing-pending {
    background: #fff6d5;
    border: 1px dashed #c9a227;
    padding: 0.6rem 0.9rem;
    color: #6b5300;
}

.state-pricing-table {
    width: 100%;
    margin: 1.25rem 0 0.75rem;
    border-collapse: collapse;
}

.state-pricing-table td,
.state-pricing-table th {
    padding: 0.5rem 0.4rem;
    border-bottom: 1px solid #ececec;
    vertical-align: top;
    text-align: left;
}

.state-pricing-table tfoot th {
    border-bottom: none;
    border-top: 2px solid #303033;
    font-size: 1.1rem;
}

.state-pricing-pick {
    width: 2rem;
}

.state-pricing-required {
    color: #2f7a3f;
    font-weight: 700;
}

.state-pricing-amount {
    text-align: right;
    white-space: nowrap;
}

/* Optional extras the student's state doesn't call for — present, but visibly
   secondary to the lines that make up their state's advertised price. */
.state-pricing-optional {
    color: #555;
}

@media (max-width: 640px) {
    .state-pricing-form {
        flex-direction: column;
        align-items: stretch;
    }

    .state-pricing-select {
        min-width: 0;
    }
}

/* --- "What Could I Make" earnings estimator (Components/Shared/EarningsEstimator.razor,
   embedded in CMS pages via [[earnings-estimator]]) -- same visual family as the
   state-pricing widget above: bordered card on the warm off-white, GET form, en-US money. --- */
.earnings {
    margin: 1.5rem 0 2rem;
    padding: 1.25rem;
    border: 1px solid #e4e4e4;
    border-radius: 6px;
    background: #fcfbf7;
    text-align: left;
}

/* Two label+control rows on a grid, then the submit button centered under them (layout per
   Weston 2026-08-26). The label column right-aligns, so "Clients per month" sits flush against
   the right edge of the longer "Where would you practice?" and both controls start at the same
   x -- the classic form-alignment grid, without hand-tuned label widths. */
.earnings-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.earnings-grid {
    display: grid;
    grid-template-columns: max-content max-content;
    gap: 0.75rem;
    align-items: center;
}

.earnings-label {
    font-weight: 600;
}

    .earnings-grid .earnings-label {
        justify-self: end;
        text-align: right;
    }

.earnings-form > button[type="submit"] {
    align-self: center;
}

.earnings-select {
    padding: 0.45rem 0.6rem;
    border: 1px solid #c9c9c9;
    border-radius: 4px;
    background: #fff;
    min-width: 16rem;
}

.earnings-clients {
    padding: 0.45rem 0.6rem;
    border: 1px solid #c9c9c9;
    border-radius: 4px;
    background: #fff;
    width: 5.5rem;
}

.earnings-hint,
.earnings-context {
    margin: 1rem 0 0;
}

.earnings-tiles {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 1rem;
}

.earnings-tile {
    flex: 1 1 10rem;
    max-width: 14rem;
    padding: 1rem 1.25rem;
    border: 1px solid var(--baa-border);
    border-radius: 6px;
    background: #fff;
    text-align: center;
}

    /* The high estimate is the star of the trio -- give it the site's gold wash, the same
       accent the form cards use, rather than inventing a new color. Mid gets a half-step
       toward it (gold border on white) so the three tiles read as a progression. */
    .earnings-tile-mid {
        border-color: var(--baa-gold);
    }

    .earnings-tile-high {
        background: var(--baa-gold-light);
        border-color: var(--baa-gold);
    }

.earnings-tile-label {
    display: block;
    font-weight: 600;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--baa-grey);
}

.earnings-tile-amount {
    display: block;
    font-family: 'Quicksand', sans-serif;
    font-size: 2rem;
    color: var(--baa-ink);
    margin: 0.15rem 0;
}

.earnings-tile-note {
    display: block;
    font-size: 0.85rem;
    color: var(--baa-grey);
}

.earnings-disclaimer {
    margin: 1rem 0 0;
    font-size: 0.8rem;
    color: var(--baa-grey);
}

@media (max-width: 640px) {
    /* On a phone the two-column grid gets cramped: stack each label above its control,
       labels back to left-aligned, select stretching to the column. */
    .earnings-grid {
        grid-template-columns: 1fr;
    }

        .earnings-grid .earnings-label {
            justify-self: start;
            text-align: left;
        }

    .earnings-select {
        min-width: 0;
        width: 100%;
    }
}

/* --- Enrollment / checkout --- */

.enroll-cohort {
    margin: 0 0 1.5rem;
    line-height: 1.6;
}

.enroll-blocked {
    background: #fdf1f1;
    border: 1px solid #e6b8b8;
    border-radius: 6px;
    padding: 1rem 1.25rem;
    margin: 1.5rem 0;
}

.enroll-blocked p:last-child {
    margin-bottom: 0;
}

.enroll-canceled {
    background: #fff6d5;
    border: 1px dashed #c9a227;
    padding: 0.6rem 0.9rem;
    color: #6b5300;
}

.enroll-pay {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid #e4e4e4;
}

/* Live-intensive availability agreement above the pay button (Enroll.razor). */
.enroll-agree {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin-bottom: 1rem;
    max-width: 34rem;
}

    .enroll-agree input {
        margin-top: 0.25rem;
        flex-shrink: 0;
    }

.enroll-receipt {
    border-left: 3px solid #ffd966;
    padding: 0.75rem 0 0.75rem 1rem;
    margin: 1.5rem 0;
}

/* Reuses .state-pricing's neutral card look (added on this page 2026-08-28) rather than a new
   scoped .razor.css -- Enroll.razor has no scoped stylesheet of its own, and EditForm's root
   class never receives Blazor's CSS-isolation scope attribute anyway (see razor_gotchas.md
   "a scoped CSS class on <EditForm class=...> never reaches the real <form>"), so a global class
   here sidesteps that whole trap rather than needing ::deep. */
.enroll-waitlist-intro,
.enroll-waitlist-confirmed {
    margin-top: 0;
}

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

    .enroll-waitlist-form label {
        display: flex;
        flex-direction: column;
        gap: 0.35rem;
        font-weight: 600;
    }

    .enroll-waitlist-form input {
        font-weight: 400;
        padding: 0.5rem 0.7rem;
        border: 1px solid var(--baa-border);
        border-radius: 4px;
        font-family: inherit;
    }

    .enroll-waitlist-form button[type="submit"] {
        align-self: flex-start;
    }

.cohort-action {
    margin: 0.6rem 0 0;
}

.owned-list {
    list-style: none;
    margin: 0 0 2rem;
    padding: 0;
}

.owned-list li {
    border-left: 3px solid #ffd966;
    padding: 0.4rem 0 0.4rem 1rem;
    margin-bottom: 0.75rem;
}

/* --- Assignment marking --- */

.grade-entry {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin-bottom: 0.4rem;
}

.grade-input {
    width: 4.5rem;
}

.grade-out-of {
    color: #666;
    font-size: 0.85rem;
    white-space: nowrap;
}

.grade-awarded {
    margin-top: 0.2rem;
    font-weight: 600;
}

/* Per-rubric-row grading (GradingQueue.razor, OfferingDashboard.razor, Courses/ActivityPageView.razor's
   staff table) -- replaces the old single overall-mark box with one row per AssignmentRubricItem, each
   showing its own Max points alongside an editable Points earned box. Narrow Max/Earned columns keep
   Description as the column that actually gets the room it needs. */
.rubric-grading-table th, .rubric-grading-table td {
    vertical-align: middle;
}
.rubric-grading-table th:nth-child(2), .rubric-grading-table td:nth-child(2),
.rubric-grading-table th:nth-child(3), .rubric-grading-table td:nth-child(3) {
    width: 5.5rem;
    white-space: nowrap;
}

/* A submitted link (AssignmentSubmissionType.Url) -- long share URLs have to wrap rather than push a
   grading table sideways. */
.assignment-submitted-link a {
    word-break: break-all;
}

/* ---------------- Rubric panel (Shared/RubricPanel.razor) ----------------
   The rubric as reference material: collapsed by default beside a grading form, open on the
   student's assignment page. Plain <details>, so opening it costs no round trip on a Blazor Server
   page (see the reconnect notes in the project docs for why that matters on grading rosters). */
.grade-entry {
    max-width: 11rem;
}
.rubric-panel {
    border: 1px solid #dee2e6;
    border-radius: 0.375rem;
    padding: 0.35rem 0.5rem;
    background: #fbfbfc;
}
.rubric-panel-summary {
    cursor: pointer;
    font-size: 0.85rem;
    color: #495057;
}
.rubric-panel[open] > .rubric-panel-summary {
    margin-bottom: 0.4rem;
}
.rubric-panel-table td {
    vertical-align: top;
    background: transparent;
}
.rubric-panel-label {
    font-weight: 600;
}
.rubric-panel-description {
    font-size: 0.9rem;
}
.rubric-panel-weight {
    width: 5rem;
    text-align: right;
    color: #6c757d;
    font-size: 0.85rem;
}
.rubric-panel-bands {
    margin: 0.3rem 0 0;
    padding-left: 1.1rem;
    font-size: 0.85rem;
    color: #495057;
}
.rubric-panel-band-range {
    font-weight: 600;
    margin-right: 0.25rem;
}
.rubric-panel-note {
    margin-top: 0.4rem;
}
.rubric-panel-note-saved {
    margin-top: 0.35rem;
    padding-left: 0.6rem;
    border-left: 3px solid #ced4da;
    font-size: 0.9rem;
    color: #343a40;
}

/* ---------------- Course outline (CourseOutlineView.razor) ----------------
   Modelled on the Moodle course page the students already know: collapsible section cards, a
   colour-coded icon per activity kind, and a course index rail. The extra width is deliberate --
   this page carries a sidebar, so it opts out of the 56rem reading column the marketing pages use. */
main > article.content > .page-inner.course-outline-page {
    max-width: 78rem;
}

.course-blurb {
    font-size: 1.05rem;
    margin-bottom: 1.5rem;
}

/* ---- Progress bar (replaces the old "N of 154 activities" line) ---- */
/* No max-width here on purpose: this page opts into the wider 78rem .course-outline-page column
   (see above) for its two-column sidebar layout, but the bar's 34rem cap predates that widening and
   was never updated to match -- it left the bar hugging the left edge, its right end stopping well
   short of both the "Course index" rail and the main content beneath it, looking disconnected from
   the rest of the page instead of framing it. Letting it span the same width as .course-layout below
   keeps its left/right edges lined up with everything under it at every viewport width. */
.course-progress {
    margin: 0 0 2rem;
}

.course-progress-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 0.4rem;
}

.course-progress-label {
    font-family: 'Quicksand', sans-serif;
    font-size: 1rem;
    color: var(--baa-grey);
}

.course-progress-value {
    font-family: 'Quicksand', sans-serif;
    font-size: 1.35rem;
    font-weight: 600;
    color: var(--baa-ink);
}

.course-progress-track {
    height: 12px;
    border-radius: 999px;
    background: #eeeeee;
    border: 1px solid var(--baa-border);
    overflow: hidden;
}

.course-progress-fill {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--baa-gold) 0%, var(--baa-yellow) 100%);
    transition: width 0.35s ease;
    min-width: 0;
}

/* ---- Two-column layout ---- */
.course-layout {
    display: grid;
    grid-template-columns: 16rem minmax(0, 1fr);
    gap: 2.5rem;
    align-items: start;
}

@media (max-width: 62rem) {
    .course-layout {
        grid-template-columns: minmax(0, 1fr);
        gap: 1.5rem;
    }

    .course-index {
        position: static;
        max-height: none;
    }
}

/* ---- Course index rail ---- */
.course-index {
    position: sticky;
    top: 1.5rem;
    max-height: calc(100vh - 3rem);
    overflow-y: auto;
    border: 1px solid var(--baa-border);
    border-radius: 6px;
    padding: 1rem 0.9rem;
    background: #fcfcfc;
    font-size: 0.92rem;
}

.course-index-title {
    font-family: 'Quicksand', sans-serif;
    font-weight: 600;
    font-size: 1rem;
    margin-bottom: 0.6rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--baa-border);
}

.course-index-list, .course-index-list ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.course-index-list ul {
    padding-left: 0.85rem;
    border-left: 2px solid var(--baa-border);
    margin: 0.15rem 0 0.5rem 0.35rem;
}

.course-index-list a {
    display: block;
    padding: 0.3rem 0.4rem;
    border-radius: 4px;
    text-decoration: none;
    line-height: 1.35;
    color: var(--baa-ink);
}

.course-index-list > li > a {
    font-weight: 600;
}

.course-index-list ul a {
    font-weight: 400;
    color: var(--baa-grey);
}

.course-index-list a:hover {
    background: var(--baa-gold-light);
    color: var(--baa-ink);
}

/* ---- Section cards ---- */
.course-toolbar {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 0.75rem;
}

.course-collapse-all {
    background: none;
    border: none;
    padding: 0.25rem 0.4rem;
    font: inherit;
    font-size: 0.95rem;
    color: var(--baa-grey);
    text-decoration: underline;
    cursor: pointer;
    border-radius: 4px;
}

    .course-collapse-all:hover {
        color: var(--baa-ink);
        background: var(--baa-gold-light);
    }

.course-section {
    border: 1px solid var(--baa-border);
    border-radius: 8px;
    margin-bottom: 1rem;
    background: #fff;
    overflow: hidden;
}

.course-section-head,
.course-subsection-head {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    cursor: pointer;
    font: inherit;
    color: var(--baa-ink);
    padding: 1rem 1.2rem;
}

    .course-section-head:hover,
    .course-subsection-head:hover {
        background: var(--baa-gold-light);
    }

    .course-section-head:focus-visible,
    .course-subsection-head:focus-visible {
        outline: 2px solid var(--baa-yellow);
        outline-offset: -2px;
    }

.course-section-title {
    font-family: 'Quicksand', sans-serif;
    font-size: 1.3rem;
    font-weight: 600;
}

.course-subsection-title {
    font-family: 'Quicksand', sans-serif;
    font-size: 1.08rem;
    font-weight: 600;
}

.course-chevron {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    background: var(--baa-gold-light);
    transition: transform 0.18s ease;
}

    .course-chevron svg {
        width: 1rem;
        height: 1rem;
        fill: none;
        stroke: var(--baa-ink);
        stroke-width: 2.2;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .course-chevron.is-open {
        transform: rotate(90deg);
    }

.course-section-body {
    padding: 0 1.2rem 1rem;
}

.course-subsection {
    border: 1px solid var(--baa-border);
    border-radius: 6px;
    margin: 0.75rem 0;
    background: #fdfdfd;
}

    .course-subsection > .course-subsection-head {
        padding: 0.7rem 0.9rem;
    }

    .course-subsection .activity-list {
        padding: 0 0.9rem 0.6rem;
    }

.course-empty {
    color: var(--baa-grey);
    font-style: italic;
    padding: 0.25rem 0.9rem 0.75rem;
    margin: 0;
}

/* ---- Activity rows ---- */
.activity-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

    .activity-list > li + li .activity-row {
        border-top: 1px solid var(--baa-border);
    }

.activity-row {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.7rem 0.5rem;
    text-decoration: none;
    color: var(--baa-ink);
    border-radius: 4px;
}

    .activity-row:hover {
        background: var(--baa-gold-light);
        color: var(--baa-ink);
    }

.activity-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 1.75rem;
    height: 1.75rem;
}

    .activity-icon svg {
        width: 1.4rem;
        height: 1.4rem;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.7;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

/* Colour per activity kind, so the shape of a section reads at a glance the way it does in Moodle. */
.activity-icon.type-page { color: #1f7a6c; }
.activity-icon.type-resource { color: #b32d2e; }
.activity-icon.type-quiz { color: #c2185b; }
.activity-icon.type-forum { color: #1a6fa3; }
.activity-icon.type-assignment { color: #cc5200; }

.activity-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1 1 auto;
}

.activity-title {
    font-size: 1.02rem;
    line-height: 1.35;
}

.activity-kind {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--baa-grey);
}

.activity-row.is-done .activity-title {
    color: #1b6e3c;
    font-weight: 600;
}

.activity-check {
    flex: 0 0 auto;
    color: #1b6e3c;
    font-weight: 700;
    font-size: 1.05rem;
}

.draft-tag {
    flex: 0 0 auto;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.1rem 0.4rem;
    border-radius: 3px;
    background: #f1f1f1;
    border: 1px solid var(--baa-border);
    color: var(--baa-grey);
}

/* Same red/pink used for .assignment-status.needs-revision, so a student sees one consistent colour
   for "needs revision" whether they're looking at the course outline or the assignment page itself. */
.revision-tag {
    flex: 0 0 auto;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.1rem 0.4rem;
    border-radius: 3px;
    background: #fbeaea;
    border: 1px solid #a6353a;
    color: #a6353a;
    font-weight: 600;
}

/* --- User picker (Components/Shared/UserPicker.razor) -- searchable account picker used by
   Admin/Courses/Enrollments.razor and Instructors.razor to find a student/instructor to add. The
   input sits in normal flow; the results list is absolutely positioned so it overlays whatever
   follows (the roster table's own "Save"/"Revoke" buttons, etc.) instead of pushing it down. --- */
.user-picker {
    position: relative;
    max-width: 26rem;
}

.user-picker-results {
    position: absolute;
    z-index: 20;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 0.15rem;
    max-height: 16rem;
    overflow-y: auto;
    background: #fff;
    border: 1px solid var(--baa-border);
    border-radius: 4px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
}

.user-picker-result {
    display: flex;
    flex-direction: column;
    width: 100%;
    text-align: left;
    padding: 0.4rem 0.75rem;
    border: none;
    background: none;
    cursor: pointer;
}

.user-picker-result:hover,
.user-picker-result:focus {
    background: var(--baa-gold-light);
}

.user-picker-name {
    font-weight: 600;
    color: var(--baa-ink);
}

.user-picker-email {
    font-size: 0.85rem;
    color: var(--baa-grey);
}

.user-picker-empty,
.user-picker-more {
    padding: 0.5rem 0.75rem;
    color: var(--baa-grey);
    font-size: 0.85rem;
    font-style: italic;
}

/* --- Assignment document preview (Components/Shared/AssignmentSubmissionContent.razor) -- a PDF (or
   an image uploaded as a "Document") renders inline via the browser's own viewer instead of forcing a
   download; a small Download link stays underneath as a fallback/for saving a copy. Non-previewable
   types (Word/Excel/etc.) never reach this markup -- they keep the plain Download-only link. --- */
.assignment-document-preview {
    margin-bottom: 0.35rem;
}

.assignment-document-preview iframe {
    width: 100%;
    height: 32rem;
    max-height: 70vh;
    border: 1px solid var(--baa-border);
    border-radius: 4px;
    background: #fff;
}

/* --- Grading Queue cards (Admin/GradingQueue.razor) -- each submission is its own collapsible card:
   a clickable header showing just enough to triage (course/offering/assignment, student, submitted
   date, status), expanding to the rubric, submission content, and grading form only once clicked. --- */
.grading-queue-card {
    border: 1px solid var(--baa-border);
    border-radius: 8px;
    margin-bottom: 1rem;
    background: #fff;
    overflow: hidden;
}

.grading-queue-card-header {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    width: 100%;
    padding: 0.75rem 1rem;
    background: none;
    border: none;
    text-align: left;
    cursor: pointer;
}

.grading-queue-card-header:hover,
.grading-queue-card-header:focus {
    background: var(--baa-gold-light);
}

.grading-queue-card-chevron {
    flex: 0 0 auto;
    color: var(--baa-grey);
    font-size: 0.9rem;
    line-height: 1.6;
}

.grading-queue-card-heading {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.grading-queue-card-title {
    font-weight: 600;
    color: var(--baa-ink);
}

.grading-queue-card-sub {
    color: var(--baa-grey);
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.grading-queue-card-body {
    padding: 0 1rem 1rem;
    border-top: 1px solid var(--baa-border);
    padding-top: 1rem;
}

/* ---------------- Nav dropdown close-on-click (2026-08-24) ----------------
   wwwroot/js/navMenu.js puts this class on <body> the moment a top-nav link is clicked, and
   removes it once the pointer moves off the menu. Without it, Blazor's enhanced navigation (no
   full reload) leaves the clicked link focused and the cursor parked over the menu, so the pure
   CSS :hover/:focus-within dropdowns in NavMenu.razor.css stay open on the next page. This rule
   lives here rather than in the scoped NavMenu.razor.css because the class is on <body>, outside
   the component; !important is needed to beat the scoped rules' specificity. */
body.nav-menu-closed .top-nav .dropdown,
body.nav-menu-closed .top-nav .flyout {
    display: none !important;
}

/* Blazor Server reconnect notice (#components-reconnect-modal in App.razor; behavior in
   js/reconnect.js). Blazor toggles exactly one of the components-reconnect-{show,hide,failed,
   rejected} classes on the element. Hidden by default (covers the "hide" class too); the visible
   states are a light click-blocking veil (so nobody keeps pressing buttons that can't respond) plus
   a small card at the bottom of the screen, instead of Blazor's built-in washed-out full-page
   overlay with alarming wording. Each state shows just its own line of text. */
#components-reconnect-modal {
    display: none;
}

#components-reconnect-modal.components-reconnect-show,
#components-reconnect-modal.components-reconnect-failed,
#components-reconnect-modal.components-reconnect-rejected {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 1050;
    background: rgba(255, 255, 255, 0.35);
}

#components-reconnect-modal .reconnect-card {
    position: absolute;
    left: 50%;
    bottom: 1.5rem;
    transform: translateX(-50%);
    max-width: min(28rem, calc(100vw - 2rem));
    padding: 0.75rem 1.25rem;
    border-radius: 0.5rem;
    background: #303033;
    color: #fff;
    font-size: 0.95rem;
    text-align: center;
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.25);
}

#components-reconnect-modal .reconnect-card a {
    color: #fff;
    text-decoration: underline;
}

#components-reconnect-modal .reconnect-state {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .reconnect-show,
#components-reconnect-modal.components-reconnect-failed .reconnect-failed,
#components-reconnect-modal.components-reconnect-rejected .reconnect-rejected {
    display: inline;
}