/* ============================================================================
   DRC Student Portal - design tokens
   Loaded from _Host.cshtml after site.css. Everything in the portal reads its
   colours and spacing from here, so a brand change is one file.
   ============================================================================ */

:root {
    /* Brand */
    --drc-navy: #153448;
    --drc-navy-deep: #0E2334;
    --drc-navy-line: #22455C;
    --drc-navy-hover: #1F4A63;
    --drc-gold: #FFCC5B;
    --drc-gold-edge: #EABB4A;
    --drc-gold-ink: #3A2A00;
    --drc-gold-ink-soft: #5A4304;
    --drc-steel: #84A0A9;

    /* Canvas and surfaces */
    --drc-canvas: #EEF1F3;
    --drc-surface: #FFFFFF;
    --drc-hair: #DCE3E7;
    --drc-hair-soft: #EAEEF1;

    /* Text */
    --drc-ink: #12242F;
    --drc-ink-2: #4A5C67;
    --drc-ink-3: #6C7D87;

    /* Status. Green is a status colour only - never a button. */
    --drc-pass: #1B6B45;
    --drc-pass-bg: #E7F2EC;
    --drc-pass-edge: #BFDDCD;
    --drc-partial: #9A5B00;
    --drc-partial-bg: #FDF1DC;
    --drc-partial-edge: #F0D5A2;
    --drc-idle: #93A5AE;
    --drc-idle-bg: #F3F6F8;
    --drc-error: #B32121;

    --drc-r-sm: 6px;
    --drc-r-md: 10px;
    --drc-shadow: 0 1px 2px rgba(15, 40, 55, .06), 0 6px 18px rgba(15, 40, 55, .06);
}

/* ── Cards ───────────────────────────────────────────────────────────────── */
.drc-card {
    background: var(--drc-surface);
    border: 1px solid var(--drc-hair);
    border-radius: var(--drc-r-md);
    box-shadow: var(--drc-shadow);
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
}

    .drc-card > h2 {
        margin: 0 0 4px;
        font-size: 15.5px;
        font-weight: 700;
        color: var(--drc-ink);
    }

.drc-note {
    margin: 0 0 14px;
    font-size: 13px;
    color: var(--drc-ink-3);
    max-width: 60ch;
}

.drc-push {
    margin-top: auto;
    padding-top: 16px;
}

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.drc-btn {
    display: inline-block;
    border: 1.5px solid var(--drc-navy);
    cursor: pointer;
    text-decoration: none;
    background: var(--drc-navy);
    color: #fff;
    font-family: inherit;
    font-weight: 700;
    font-size: 14.5px;
    padding: 10px 20px;
    border-radius: var(--drc-r-sm);
    white-space: nowrap;
    line-height: 1.2;
}

    .drc-btn:hover {
        background: var(--drc-navy-deep);
        color: #fff;
        text-decoration: none;
    }

.drc-btn--quiet {
    background: transparent;
    color: var(--drc-navy);
}

    .drc-btn--quiet:hover {
        background: #E1E7EA;
        color: var(--drc-navy);
    }

.drc-btn--sm {
    padding: 8px 15px;
    font-size: 13.5px;
}

.drc-btn:disabled {
    opacity: .55;
    cursor: default;
}

/* ── Status pills ────────────────────────────────────────────────────────── */
.drc-flag {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    padding: 2px 9px;
    border-radius: 20px;
    white-space: nowrap;
}

.drc-flag--pass {
    background: var(--drc-pass-bg);
    color: var(--drc-pass);
}

.drc-flag--partial {
    background: var(--drc-partial-bg);
    color: var(--drc-partial);
}

.drc-flag--idle {
    background: var(--drc-idle-bg);
    color: var(--drc-ink-3);
}

/* Small round mark that sits in front of a checklist row. */
.drc-mark {
    width: 21px;
    height: 21px;
    flex: 0 0 21px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
}

.drc-mark--pass {
    background: var(--drc-pass-bg);
    color: var(--drc-pass);
    border: 1px solid var(--drc-pass-edge);
}

.drc-mark--partial {
    background: var(--drc-partial-bg);
    color: var(--drc-partial);
    border: 1px solid var(--drc-partial-edge);
}

.drc-mark--idle {
    background: var(--drc-idle-bg);
    color: var(--drc-idle);
    border: 1px solid var(--drc-hair);
}

/* ── Focus and motion ────────────────────────────────────────────────────── */
.drc-card :focus-visible,
.drc-btn:focus-visible,
a:focus-visible {
    outline: 3px solid #2F80C8;
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    * {
        transition: none !important;
        animation: none !important;
    }
}