html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

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

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

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.content {
    padding-top: 1.1rem;
}

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: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

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

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

/* ---- Kryphos brand + home page ---- */
:root {
    --kryphos-navy: #0f3d6e;
    --kryphos-cyan: #17a2c4;
    --kryphos-gold: #e6a91e;
}

.kryphos-hero {
    max-width: 46rem;
    margin: 0 auto;
    padding: 1.5rem 1rem 2rem;
    text-align: center;
}
.kryphos-logo {
    width: clamp(240px, 45vw, 380px);
    height: auto;
    margin-bottom: .5rem;
    display: block;
    margin-left: auto;
    margin-right: auto;
}
/* Tagline under the logo: TEST › IDENTIFY › LEARN › REPEAT */
.kryphos-tagline {
    margin: 0 auto 1.25rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    font-size: clamp(.8rem, 2.5vw, 1.05rem);
    color: var(--kryphos-navy);
    white-space: nowrap;
}
.kryphos-tagline .sep {
    color: var(--kryphos-gold);
    margin: 0 .5em;
    font-weight: 700;
}
@media (max-width: 420px) {
    .kryphos-tagline { white-space: normal; }
    .kryphos-tagline .sep { margin: 0 .35em; }
}
/* Hero call-to-action row: big buttons, centred, and stacking on narrow screens. */
.kryphos-hero .d-flex {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: .75rem;
}
.kryphos-hero .btn {
    font-size: 1.25rem;
    padding: .75rem 1.75rem;
    border-radius: .5rem;
}
@media (max-width: 640px) {
    /* On phones the buttons stack full-width and sit centred on top of each other. */
    .kryphos-hero .d-flex { flex-direction: column; align-items: center; }
    .kryphos-hero .btn { width: 100%; max-width: 22rem; }
}
.kryphos-tagline {
    color: var(--kryphos-navy);
    font-weight: 600;
    letter-spacing: .01em;
    margin-bottom: 1.25rem;
}
.kryphos-h1 {
    color: var(--kryphos-navy);
    font-weight: 800;
    font-size: clamp(1.6rem, 4vw, 2.4rem);
    line-height: 1.15;
    margin-bottom: .75rem;
}
.kryphos-sub {
    max-width: 40rem;
    margin: 0 auto 1.25rem;
    color: #444;
}

.kryphos-section {
    max-width: 60rem;
    margin: 2.5rem auto 0;
    padding: 0 1rem;
}
.kryphos-section h2 { color: var(--kryphos-navy); }

.kryphos-card {
    background: #fff;
    border: 1px solid #e6ebf1;
    border-top: 3px solid var(--kryphos-cyan);
    border-radius: .5rem;
    padding: 1rem 1.1rem;
    height: 100%;
    box-shadow: 0 1px 2px rgba(15, 61, 110, .05);
}
.kryphos-card strong { color: var(--kryphos-navy); display: block; margin-bottom: .25rem; }
.kryphos-card p { margin: 0; color: #555; font-size: .95rem; }
.kryphos-ico { font-size: 1.4rem; display: block; margin-bottom: .35rem; }

.kryphos-how { background: #f6f9fc; border-radius: .75rem; padding: 1.75rem 1rem; }
.kryphos-step p { color: #555; font-size: .9rem; margin: .5rem 0 0; }
.kryphos-num {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2.2rem; height: 2.2rem; border-radius: 50%;
    background: var(--kryphos-navy); color: #fff; font-weight: 700;
}

.btn-primary {
    background-color: var(--kryphos-navy);
    border-color: var(--kryphos-navy);
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
    background-color: #0c3159;
    border-color: #0c3159;
}

.kryphos-foot { margin: 3rem auto 1.5rem; max-width: 46rem; padding: 0 1rem; }

/* Blazor Server reconnect overlay. Hidden until Blazor adds a state class to #components-reconnect-modal. */
.reconnect-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: rgba(255, 255, 255, 0.92);
    align-items: center;
    justify-content: center;
    text-align: center;
    font-family: system-ui, -apple-system, sans-serif;
}

/* Show the overlay while reconnecting OR when it has failed/been rejected. */
#components-reconnect-modal.components-reconnect-show,
#components-reconnect-modal.components-reconnect-failed,
#components-reconnect-modal.components-reconnect-rejected {
    display: flex;
}

.reconnect-box {
    max-width: 26rem;
    padding: 1.5rem;
    font-size: 1.05rem;
    color: #212529;
}

/* Show the right line for the state: "trying" while reconnecting, "gave up" once failed/rejected. */
.reconnect-trying, .reconnect-gaveup { margin: 0; }
.reconnect-gaveup { display: none; }
#components-reconnect-modal.components-reconnect-failed .reconnect-trying,
#components-reconnect-modal.components-reconnect-rejected .reconnect-trying { display: none; }
#components-reconnect-modal.components-reconnect-failed .reconnect-gaveup,
#components-reconnect-modal.components-reconnect-rejected .reconnect-gaveup { display: block; }

/* ===== Root landing page (subject/board picker) ===== */
.landing-hero {
    max-width: 46rem;
    margin: 0 auto;
    padding: 2rem 1rem 1rem;
    text-align: center;
}
.landing-hero .kryphos-logo {
    display: block;
    margin: 0 auto .5rem;
}
.landing-strap {
    color: var(--kryphos-navy);
    font-weight: 800;
    font-size: clamp(1.5rem, 4vw, 2.25rem);
    margin: 1rem 0 .75rem;
    text-align: center;
}
.landing-lead {
    max-width: 40rem;
    margin: 0 auto;
    color: #555;
    text-align: center;
}

/* Amazon-bookstore-style row of tall vertical boxes, one per subject/board. */
.landing-grid {
    max-width: 64rem;
    margin: 2rem auto 0;
    padding: 0 1rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem;
}
.subject-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    text-align: center;
    aspect-ratio: 3 / 4;                 /* tall rectangle, like a book cover */
    padding: 1.25rem 1rem;
    background: #fff;
    border: 1px solid #e6ebf1;
    border-top: 4px solid var(--kryphos-cyan);
    border-radius: .6rem;
    box-shadow: 0 1px 3px rgba(15, 61, 110, .08);
    text-decoration: none;
    color: inherit;
    transition: transform .12s ease, box-shadow .12s ease;
    cursor: pointer;
}
.subject-box:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 16px rgba(15, 61, 110, .15);
}
.subject-box--live { border-top-color: var(--kryphos-gold); }
.subject-box__subject {
    font-weight: 700;
    color: var(--kryphos-navy);
    font-size: 1.05rem;
    line-height: 1.25;
    margin-bottom: .35rem;
}
.subject-box__board {
    display: inline-block;
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: #fff;
    background: var(--kryphos-navy);
    border-radius: 1rem;
    padding: .1rem .6rem;
    margin-bottom: auto;               /* push CTA to the bottom of the box */
}
.subject-box__cta {
    margin-top: 1rem;
    font-weight: 700;
    color: var(--kryphos-cyan);
}
.subject-box__cta--soon {
    color: #9aa5b1;
    font-weight: 600;
}
.landing-foot { margin: 2.5rem auto 1.5rem; max-width: 46rem; padding: 0 1rem; }

/* "All subjects" back-link in the CS app nav header */
.brand-allsubjects {
    display: inline-block;
    margin-top: .25rem;
    font-size: .8rem;
    color: rgba(255, 255, 255, .75);
    text-decoration: none;
}
.brand-allsubjects:hover { color: #fff; text-decoration: underline; }

/* Blazor error UI — hidden by default, GLOBALLY (both MainLayout and RootLayout).
   The template put "#blazor-error-ui { display:none }" only in MainLayout.razor.css, which is
   SCOPED — so it never applied to the RootLayout-based landing page, leaving the yellow
   "An unhandled error has occurred" bar permanently visible there even with no actual error.
   Defining it in this global (unscoped) stylesheet hides it on every page; the Blazor framework
   still sets display:block on a genuine unhandled error. */
#blazor-error-ui {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    background: lightyellow;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    z-index: 1000;
}
#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}