/* ------------------------------------------------------------------
   Middle Grades theme.

   DESIGN RULE: Middle Grades reuses the Entry Level parent layout in
   full - the same <main id="main"> > section.section-bg > .container
   skeleton, the same .section-header heading block, the same Bootstrap
   grid, form controls, tables and button sizes. A parent moving between
   the two modules must not feel they have changed site.

   The ONLY difference is accent colour. Entry Level's gold rule under a
   section heading becomes warm brown, and the module's own badges and
   nav buttons follow. Nothing structural is overridden, and every state
   still carries text as well as colour - colour is never load-bearing
   on its own.

   Loaded by Views/Shared/_MGLayout.cshtml, so it applies on Middle
   Grades pages only and the shared layout stays untouched.
   ------------------------------------------------------------------ */

:root {
    --mg-accent: #7a3e12;      /* Middle Grades: warm, clearly not the Entry Level gold */
    --mg-accent-soft: #fdf3ea;
    --el-accent: #195367;      /* Entry Level: the existing NCDoE teal */
}

/* ---------------- page shell ----------------
   .mg-page is on <main>, .mg-body on the view's own wrapper. Together they
   scope every override below so nothing here can reach an Entry Level page. */

/* Vertical breathing room. The shared layout renders the footer immediately after
   @RenderBody() with only a <br>, and no generic rule pads <section>, so a page that ends
   in a button row butts straight up against the footer banner. Padded here, scoped to
   .mg-page, rather than by changing the shared stylesheet. */
.mg-page > .section-bg { padding: 30px 0 70px; }
.mg-page .mg-body { padding-top: 4px; padding-bottom: 10px; }

/* Every action row at the foot of a Middle Grades form or page gets clearance, so the
   last button is never the last pixel before the footer. */
.mg-page .mg-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: stretch;      /* equal HEIGHT, not centred on differing heights */
    margin-top: 24px;
    padding-bottom: 20px;
}

/* Every button in an action row shares one geometry.
   Two things were pulling Back and Continue out of line:
     - only .mg-appbtn carried min-width:200px, so Back was as narrow as its text; and
     - .mg-appbtn carries margin-bottom:5px for use in stacked nav, which inside a flex row
       lifted Continue relative to Back.
   Both are settled here rather than per button, so every step lines up the same way. */
.mg-page .mg-actions > .btn {
    min-width: 200px;
    margin-bottom: 0;
    text-decoration: none;     /* Back is an <a>; without this it renders underlined */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 9px 18px;
    line-height: 1.4;
}

/* Back is the quiet one: same size, clearly secondary, and legible - it must never end up
   as pale text on a pale fill the way an inherited outline style can. */
.mg-page .mg-actions > .btn-outline-secondary,
.mg-page .mg-actions > a.btn-outline-secondary {
    background: #fff;
    border: 1px solid #d9d5cd;
    color: #33312d;
}
.mg-page .mg-actions > .btn-outline-secondary:hover,
.mg-page .mg-actions > a.btn-outline-secondary:hover,
.mg-page .mg-actions > .btn-outline-secondary:focus {
    background: #f4f1ec;
    border-color: #c9c4ba;
    color: #111;
}

@media (max-width: 480px) {
    /* On a phone the pair stacks and each takes the full width, rather than one wide
       button beside a narrow one. */
    .mg-page .mg-actions > .btn { flex: 1 1 100%; min-width: 0; }
}
.mg-page .mg-body > form > .btn:last-child,
.mg-page .mg-body > .btn:last-child { margin-bottom: 20px; }

/* The section heading is the shared Entry Level block, unmodified except for the
   accent bar beneath it: gold #fdb915 there, warm brown here. This one rule is
   what tells a parent which module they are in. */
.mg-page .section-header h3::after { background: var(--mg-accent); }

/* Sub-headings inside a Middle Grades page. Matches the weight and rhythm of the
   Entry Level forms instead of the ad-hoc inline font sizes used previously. */
.mg-page .mg-sub {
    font-size: 17px;
    font-weight: 700;
    color: #111;
    margin: 26px 0 12px;
    padding-bottom: 6px;
    border-bottom: 1px solid #e3e0da;
}

/* ---------------- parent nav ----------------
   Same geometry as Views/Shared/_NavButtons.cshtml (.appbtn is defined there,
   min-width 200px), so the two profiles line up button for button. Colour is the
   only change: Entry Level uses btn-warning gold, Middle Grades uses the accent. */

.mg-nav { margin: 6px 0 18px; }

/* ---------------- grade confirmation ----------------
   Shown before the step submits. The two grades are the easiest thing on this form to get wrong
   and the consequence lands months later on a learner, so the parent reads back what they said
   in words before it goes anywhere. Plain markup and script - no dependency on a JS bundle
   loading on a parent's phone. */
.mg-confirm {
    position: fixed; inset: 0; z-index: 1080;
    display: flex; align-items: center; justify-content: center;
    background: rgba(17, 17, 17, .55);
    padding: 18px;
}
.mg-confirm[hidden] { display: none; }
body.mg-noscroll { overflow: hidden; }

.mg-confirm-card {
    background: #fff; border-radius: 14px; max-width: 460px; width: 100%;
    padding: 26px 26px 20px;
    box-shadow: 0 18px 48px rgba(17, 17, 17, .28);
    animation: mgConfirmIn 140ms ease-out;
}
@keyframes mgConfirmIn {
    from { opacity: 0; transform: translateY(8px) scale(.98); }
    to   { opacity: 1; transform: none; }
}
.mg-confirm-card h3 {
    font-size: 18px; font-weight: 700; color: #111; margin: 0 0 18px;
}

.mg-confirm-flow {
    display: flex; align-items: stretch; gap: 12px; margin-bottom: 16px;
}
.mg-confirm-step {
    flex: 1; text-align: center; padding: 14px 10px;
    border: 1px solid #e3e0da; border-radius: 10px; background: #fbfaf8;
}
.mg-confirm-step.is-target {
    border-color: #f0cfae; background: var(--mg-accent-soft);
}
.mg-confirm-label {
    display: block; font-size: 13px; text-transform: uppercase; letter-spacing: .05em;
    color: #4a473f; margin-bottom: 4px;
}
.mg-confirm-grade {
    display: block; font-size: 17px; font-weight: 700; color: #111; line-height: 1.2;
}
.mg-confirm-step.is-target .mg-confirm-grade { color: var(--mg-accent); }
.mg-confirm-arrow {
    align-self: center; font-size: 22px; color: var(--mg-accent); flex: none;
}

.mg-confirm-verdict {
    font-size: 16px; color: #33312d; margin: 0 0 20px; line-height: 1.5;
}
.mg-confirm-actions {
    display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap;
}
@media (max-width: 480px) {
    .mg-confirm-actions .btn { flex: 1 1 100%; }
    .mg-confirm-flow { flex-direction: column; }
    .mg-confirm-arrow { transform: rotate(90deg); }
}

/* The address-rule question above the school list. A required answer, so it is given its own
   block rather than tucked in beside a filter. */
.mg-page .mg-criteria-pick { margin-bottom: 16px; max-width: 520px; }
.mg-page .mg-criteria-pick label { display: block; margin-bottom: 4px; }
.mg-page .mg-criteria-pick .mg-muted { margin-top: 4px; }

/* The distance hint above the school list. Informative, not a promise - styled as a note
   rather than as a success banner for exactly that reason. */
.mg-page .mg-nearest {
    background: var(--mg-accent-soft);
    border: 1px solid #f0d9c4;
    border-left: 4px solid var(--mg-accent);
    border-radius: 6px;
    padding: 10px 14px;
    margin-bottom: 14px;
    font-size: 16px;
}

/* ---------------- documents after submission ----------------
   A parent can add or replace a document at any time once they have applied. Everything here is
   scoped under .mg-page, so no Entry Level screen is affected. */
.mg-page .mg-lead { font-size: 17px; margin-bottom: 14px; }
.mg-page .mg-muted { color: #4a473f; font-size: 15px; }
.mg-page .mg-doc-row { margin-bottom: 12px; max-width: 620px; }
.mg-page .mg-doc-row label { display: block; font-weight: 600; margin-bottom: 4px; }
.mg-page .mg-req {
    display: inline-block; margin-left: 6px; font-size: 13px; font-weight: 700;
    color: #7a3e12; background: #fdeee0; border-radius: 10px; padding: 1px 8px;
    vertical-align: middle;
}

/* .appbtn is declared in an inline <style> inside _NavButtons.cshtml, which does not render
   on a Middle Grades page. Re-declared here, scoped to .mg-page, so the buttons keep the
   Entry Level sizing without touching that partial. */
.mg-page .appbtn { min-width: 200px; margin-bottom: 5px; }

.mg-appbtn {
    background: var(--mg-accent);
    border: 1px solid var(--mg-accent);
    color: #fff;
    min-width: 200px;
    margin-bottom: 5px;
}
.mg-appbtn:hover, .mg-appbtn:focus { background: #5e2f0e; border-color: #5e2f0e; color: #fff; }
.mg-appbtn:disabled, .mg-appbtn[disabled] { background: var(--mg-accent); border-color: var(--mg-accent); color: #fff; opacity: .55; }

/* Callout used for the "Grades R, 1 and 8 are elsewhere" style warnings. Built from
   Bootstrap's alert spacing so it sits correctly beside .alert blocks. */
.mg-warn {
    background: var(--mg-accent-soft);
    border-left: 4px solid var(--mg-accent);
    border-radius: 4px;
    padding: 12px 16px;
    font-size: 16px;
}

/* ---------------- wizard ---------------- */
.mg-stepper { margin: 18px 0 22px; }
.mg-stepper ol { display: flex; flex-wrap: wrap; gap: 4px; list-style: none; padding: 0; margin: 0; }
.mg-stepper li { flex: 1 1 auto; font-size: 14px; }
.mg-stepper li > a, .mg-stepper li > span {
    display: block; padding: 8px 10px; border-radius: 5px; text-decoration: none;
    background: #f1f4f5; color: #4a473f; border: 1px solid transparent; white-space: nowrap;
}
.mg-stepper .mg-step-n {
    display: inline-block; width: 18px; height: 18px; line-height: 18px; text-align: center;
    border-radius: 50%; background: #dfe4e6; color: #4a4a4a; font-size: 13px; margin-right: 5px;
}
.mg-stepper .mg-step-done > a { background: #eef4f6; color: var(--el-accent); }
.mg-stepper .mg-step-done .mg-step-n { background: var(--el-accent); color: #fff; }
.mg-stepper .mg-step-current > span { background: var(--mg-accent); color: #fff; font-weight: 700; }
.mg-stepper .mg-step-current .mg-step-n { background: rgba(255,255,255,.25); color: #fff; }

.mg-school-card {
    border: 1px solid #dfe4e6; border-radius: 8px; padding: 14px 16px; margin-bottom: 12px; background: #fff;
}
.mg-school-blocker { border-left: 4px solid #b3261e; }
.mg-school-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.mg-school-head h3 { font-size: 17px; font-weight: 700; margin: 0; }
.mg-school-meta { font-size: 14px; color: #4a473f; }
.mg-school-pick { font-size: 15px; white-space: nowrap; }

/* Finder: "Add to my application" sits directly under its card, visually attached to it. */
.mg-finder-item { margin-bottom: 16px; }
.mg-finder-item .mg-school-card { margin-bottom: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.mg-finder-add {
    display: flex; align-items: center; gap: 12px; padding: 10px 16px;
    border: 1px solid #dfe4e6; border-top: 0; border-radius: 0 0 8px 8px; background: #faf8f4;
}
.mg-finder-item[data-added="1"] .mg-school-card { border-color: #b7e0c4; }
.mg-finder-item[data-added="1"] .mg-finder-add { border-color: #b7e0c4; background: #f1faf3; }
/* Sticky progress bar: how many schools are added, and the way on - visible however long the list. */
.mg-finder-bar {
    position: sticky; bottom: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between;
    gap: 12px; padding: 12px 16px; margin-top: 12px; background: #fff; border: 1px solid #dfe4e6;
    border-radius: 8px; box-shadow: 0 -4px 14px rgba(0,0,0,.06); font-size: 15px;
}
.mg-school-reason { font-size: 15px; margin: 8px 0 4px; }

.mg-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.mg-badge {
    display: inline-block; font-size: 13px; font-weight: 700; padding: 3px 9px;
    border-radius: 11px; border: 1px solid transparent;
}
.mg-fit-full     { background: #e6f4ea; color: #14532d; border-color: #b7e0c4; }
.mg-fit-partial  { background: #fff8e1; color: #6b4b00; border-color: #f0dfa8; }
.mg-fit-clash    { background: #fdeee0; color: #7a3e12; border-color: #f0cfae; }
.mg-fit-blocker  { background: #fdecea; color: #8c1d18; border-color: #f2c2bd; }
.mg-fit-unknown  { background: #f1f3f4; color: #5f6368; border-color: #dcdfe1; }
.mg-cap-open     { background: #e6f4ea; color: #14532d; border-color: #b7e0c4; }
.mg-cap-tight    { background: #fff8e1; color: #6b4b00; border-color: #f0dfa8; }
.mg-cap-full     { background: #fdecea; color: #8c1d18; border-color: #f2c2bd; }
.mg-cap-unknown  { background: #f1f3f4; color: #5f6368; border-color: #dcdfe1; }

.mg-fit-detail { font-size: 14.5px; margin-top: 6px; }
.mg-fit-detail summary { cursor: pointer; color: var(--el-accent); }
.mg-fit-detail ul { margin: 6px 0 0 0; padding-left: 18px; }
.mg-lines { color: #4a473f; margin-top: 6px; }
.mg-ack { display: block; font-size: 14.5px; margin-top: 10px; padding: 8px 10px;
          background: #fdecea; border-radius: 5px; color: #8c1d18; }
.mg-timeline { list-style: none; padding-left: 0; }
.mg-timeline li { border-left: 2px solid #dfe4e6; padding: 0 0 14px 16px; position: relative; }
.mg-timeline li:before {
    content: ''; position: absolute; left: -6px; top: 4px; width: 10px; height: 10px;
    border-radius: 50%; background: var(--el-accent);
}

/* Middle Grades public entry */
.mg-choice-card {
    border: 1px solid #dfe4e6; border-radius: 8px; padding: 18px; height: 100%;
    display: flex; flex-direction: column;
}
.mg-choice-card h3 { font-size: 17px; font-weight: 700; margin-bottom: 6px; }
.mg-choice-card p { font-size: 15px; color: #4a473f; flex: 1; }

/* banner CTA */
.btn-mg-started {
    display: inline-block; margin: 10px 0 0 8px; padding: 8px 28px;
    border-radius: 50px; background: var(--mg-accent); color: #fff !important;
    font-family: "Montserrat", sans-serif; font-weight: 600; font-size: 16px;
    text-transform: uppercase; letter-spacing: 1px; border: 2px solid var(--mg-accent);
    text-decoration: none; transition: all .3s;
}
.btn-mg-started:hover { background: transparent; color: #fff !important; border-color: #fff; }

/* Learner document type. The three options are read together as one question, so they are
   boxed as a group rather than floating as loose radios - the choice changes which of the
   fields below are even asked for. */
.mg-page .mg-citizenship {
    border: 1px solid #dfe4e6;
    border-radius: 6px;
    padding: 12px 14px 6px;
    background: #fff;
    margin-top: 4px;
}
.mg-page .mg-citizenship .form-check { margin-bottom: 8px; }
.mg-page .mg-citizenship .form-check-label { font-size: 16px; }

/* A derived value is not an editable one. Make read-only look read-only, so nobody spends
   time trying to correct a date that only the ID number can change. */
.mg-page input[readonly] {
    background-color: #f1f4f5;
    cursor: not-allowed;
}

/* ------------------------------------------------------------------
   Early Grades / Middle Grades switch.

   ONE control, not two buttons. The segments share a border and sit
   flush, so the eye reads a single object with a current position
   rather than a pair of competing actions. The active side is filled
   in its module's accent and is not a link - there is nothing to click
   on the page you are already on - and the inactive side stays quiet
   until hovered.

   Each module keeps its own colour, so the fill also answers "which
   one am I in" without reading the label.
   ------------------------------------------------------------------ */

.mg-switch {
    display: inline-flex;
    border: 1px solid #dfe4e6;
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
    margin: 0 0 18px;
    max-width: 100%;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}

.mg-switch-seg {
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    min-width: 190px;
    padding: 10px 40px 10px 16px;
    text-decoration: none;
    color: #4a4a4a;
    background: #fff;
    border: 0;
    transition: background .15s ease, color .15s ease;
}

.mg-switch-seg + .mg-switch-seg { border-left: 1px solid #dfe4e6; }

.mg-switch-name {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.25;
    white-space: nowrap;
}

.mg-switch-sub {
    font-size: 13.5px;
    line-height: 1.3;
    opacity: .75;
    white-space: nowrap;
}

/* The count is the reason this earns its space - it answers "is there anything
   of mine over there" without making the parent go and look. */
.mg-switch-count {
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 10px;
    background: #eceff1;
    color: #4a4a4a;
    font-size: 13px;
    font-weight: 700;
    line-height: 20px;
    text-align: center;
}

/* Inactive side: quiet until pointed at. */
a.mg-switch-seg:hover,
a.mg-switch-seg:focus {
    background: #f4f6f7;
    color: #1f1f1f;
    text-decoration: none;
}

/* Active side: filled in its own module's accent. */
.mg-switch-seg.is-active { color: #fff; cursor: default; }
.mg-switch-seg.is-active .mg-switch-sub { opacity: .85; }
.mg-switch-seg.is-active .mg-switch-count {
    background: rgba(255, 255, 255, .22);
    color: #fff;
}

.mg-switch-el.is-active { background: var(--el-accent); }
.mg-switch-mg.is-active { background: var(--mg-accent); }

/* A thin bar under the active segment, so the state survives being printed,
   viewed in high contrast, or seen by someone who cannot separate the two hues. */
.mg-switch-seg.is-active::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 3px;
    background: rgba(255, 255, 255, .55);
}

@media (max-width: 575.98px) {
    .mg-switch { display: flex; width: 100%; }
    .mg-switch-seg { flex: 1 1 50%; min-width: 0; padding: 9px 30px 9px 12px; }
    .mg-switch-sub { display: none; }
    .mg-switch-count { right: 8px; }
}

/* ---- button text, stated outright ----
   Middle Grades buttons name their own foreground as well as their background. Inheriting the
   text colour is how a button ends up dark-on-dark the moment something upstream changes an
   anchor colour. Everything here is scoped to .mg-page, so no Entry Level button is affected. */
.mg-page .mg-appbtn, .mg-page a.mg-appbtn, .mg-page button.mg-appbtn,
.mg-page .mg-appbtn:link, .mg-page .mg-appbtn:visited,
.mg-page .mg-appbtn:hover, .mg-page .mg-appbtn:focus, .mg-page .mg-appbtn:active {
    color: #fff !important;
    background: var(--mg-accent) !important;
    border-color: var(--mg-accent) !important;
    text-decoration: none !important;
}
.mg-page .mg-appbtn:hover, .mg-page .mg-appbtn:focus {
    background: #5e2f0e !important;
    border-color: #5e2f0e !important;
}

.mg-page .btn-success, .mg-page a.btn-success, .mg-page button.btn-success,
.mg-page .btn-success:link, .mg-page .btn-success:visited,
.mg-page .btn-success:hover, .mg-page .btn-success:focus, .mg-page .btn-success:active {
    color: #fff !important;
    background-color: #1e8e4e !important;
    border-color: #1a7a43 !important;
    text-decoration: none !important;
}

/* ---------------- step guidance banner ----------------
   Sits under each step's heading. Written for a parent applying for the first time, on a phone,
   who has not read a circular - so it says what the step is FOR before asking anything. */
.mg-page .mg-guide {
    background: var(--mg-accent-soft);
    border: 1px solid #f0d9c4;
    border-left: 4px solid var(--mg-accent);
    border-radius: 8px;
    padding: 14px 18px;
    margin: 0 0 20px;
}
.mg-page .mg-guide-step {
    font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
    color: var(--mg-accent); margin-bottom: 4px;
}
.mg-page .mg-guide-lead {
    font-size: 17px; font-weight: 600; color: #111; margin: 0 0 8px;
}
.mg-page .mg-guide-points { margin: 0; padding-left: 18px; }
.mg-page .mg-guide-points li { font-size: 15.5px; color: #33312d; margin-bottom: 3px; }
.mg-page .mg-guide-points li:last-child { margin-bottom: 0; }

/* The same banner used inside a field group - flatter, so it does not compete with the
   step banner above it. */
.mg-page .mg-guide-inline {
    background: #fbfaf8; border-left-width: 3px; padding: 12px 16px; margin-bottom: 16px;
}

/* ---------------- grade group ----------------
   The three grade questions are one decision, so they are one box. */
.mg-page .mg-gradegroup {
    border: 1px solid #e3e0da; border-radius: 10px;
    padding: 16px 18px 4px; margin: 0 0 22px;
}
.mg-page .mg-gradegroup > legend {
    float: none; width: auto; padding: 0 8px; margin: 0 0 0 -8px;
    font-size: 15px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
    color: var(--mg-accent);
}

/* ---------------- button colours, stated outright ----------------
   Middle Grades buttons name their own foreground as well as their background. Inheriting the
   text colour is how "Edit" ended up as dark text on a dark fill: something upstream styles
   .btn-link with a filled background, and the link colour came along unchanged. Scoped to
   .mg-page, so no Entry Level button is touched. */
.mg-page .btn-link,
.mg-page a.btn-link,
.mg-page .btn-link:link,
.mg-page .btn-link:visited {
    background: transparent !important;
    border: 1px solid transparent !important;
    color: var(--mg-accent) !important;
    text-decoration: underline !important;
    box-shadow: none !important;
    padding: 2px 6px !important;
    font-weight: 600;
}
.mg-page .btn-link:hover,
.mg-page .btn-link:focus {
    background: var(--mg-accent-soft) !important;
    color: #5e2f0e !important;
    border-radius: 6px;
}

.mg-page .btn-primary,
.mg-page .btn-primary:link,
.mg-page .btn-primary:visited,
.mg-page .btn-primary:hover,
.mg-page .btn-primary:focus {
    color: #fff !important;
    background-color: var(--mg-accent) !important;
    border-color: var(--mg-accent) !important;
}
.mg-page .btn-primary:hover, .mg-page .btn-primary:focus {
    background-color: #5e2f0e !important; border-color: #5e2f0e !important;
}

/* ================================================================
   EVERY button variant inside Middle Grades names its own colours
   ================================================================
   This has now been fixed three times, one class at a time - btn-link on Review, then the
   action row, now btn-outline-secondary on My applications. The cause is the same every time:
   something in this site's stylesheets gives a Bootstrap button a dark fill while leaving the
   text colour to be inherited, and whichever variant we have not pinned yet comes out dark on
   dark. So rather than wait for the next one, every variant is settled here.

   Dark fills take white text. Light fills take dark text. Nothing is left to inherit.
   All of it scoped to .mg-page, so not one Entry Level button is affected. */

.mg-page .btn-primary,   .mg-page .btn-primary:link,   .mg-page .btn-primary:visited,
.mg-page .btn-secondary, .mg-page .btn-secondary:link, .mg-page .btn-secondary:visited,
.mg-page .btn-success,   .mg-page .btn-success:link,   .mg-page .btn-success:visited,
.mg-page .btn-danger,    .mg-page .btn-danger:link,    .mg-page .btn-danger:visited,
.mg-page .btn-info,      .mg-page .btn-info:link,      .mg-page .btn-info:visited,
.mg-page .btn-dark,      .mg-page .btn-dark:link,      .mg-page .btn-dark:visited,
.mg-page .mg-appbtn,     .mg-page .mg-appbtn:link,     .mg-page .mg-appbtn:visited {
    color: #fff !important;
}

/* Light fills must NOT take white text - that is the same bug in the other direction. */
.mg-page .btn-light,   .mg-page .btn-light:link,   .mg-page .btn-light:visited,
.mg-page .btn-warning, .mg-page .btn-warning:link, .mg-page .btn-warning:visited {
    color: #111 !important;
}

/* Outline buttons are the ones that keep arriving with a dark fill from somewhere upstream.
   Given an explicit light fill AND a dark foreground, they cannot land dark-on-dark either way. */
.mg-page .btn-outline-secondary, .mg-page a.btn-outline-secondary,
.mg-page .btn-outline-secondary:link, .mg-page .btn-outline-secondary:visited,
.mg-page .btn-outline-primary, .mg-page a.btn-outline-primary,
.mg-page .btn-outline-dark, .mg-page a.btn-outline-dark {
    background-color: #fff !important;
    border: 1px solid #d9d5cd !important;
    color: #33312d !important;
    text-decoration: none !important;
}
.mg-page .btn-outline-secondary:hover, .mg-page .btn-outline-secondary:focus,
.mg-page .btn-outline-primary:hover,   .mg-page .btn-outline-primary:focus,
.mg-page .btn-outline-dark:hover,      .mg-page .btn-outline-dark:focus {
    background-color: var(--mg-accent-soft) !important;
    border-color: #f0d9c4 !important;
    color: #5e2f0e !important;
}

/* Danger keeps its meaning: outlined until hovered, then solid red with white text. */
.mg-page .btn-outline-danger, .mg-page a.btn-outline-danger {
    background-color: #fff !important; border: 1px solid #f2c2bd !important; color: #8c1d18 !important;
}
.mg-page .btn-outline-danger:hover, .mg-page .btn-outline-danger:focus {
    background-color: #b3261e !important; border-color: #b3261e !important; color: #fff !important;
}


/* ---------------------------------------------------------------------------
   Required-field asterisk.

   Rendered by MGRequiredLabelTagHelper off the field's own [Required] metadata,
   so this rule is the only place its APPEARANCE is decided.

   Note this is NOT .mg-req: that class is already the "required" pill on the
   documents screen, and reusing it would have drawn a rounded orange badge
   around a single asterisk on every label in the wizard.

   Red, because that is what every form a parent has ever filled in uses. The
   colour is stated outright rather than inherited - these labels sit inside
   cards and alerts that set their own text colour, and an inherited asterisk
   went grey on exactly the panels where it mattered most.
   --------------------------------------------------------------------------- */
.mg-page .mg-req-star,
.mg-req-star {
    color: #d6336c;
    margin-left: 3px;
    font-weight: 700;
    line-height: 1;
}

/* A legend, so the asterisk is explained once per step rather than guessed at. */
.mg-page .mg-req-legend,
.mg-req-legend {
    font-size: 13px;
    color: #4a473f;
    margin: 2px 0 12px;
}


/* ---------------------------------------------------------------------------
   School match confirmation dialog.

   Hand-rolled rather than Bootstrap's modal: the Middle Grades pages do not
   load Bootstrap's JS bundle, and pulling it in for one dialog would put a
   second modal implementation on pages that already have their own. The
   [hidden] attribute does the showing and hiding, so the dialog is genuinely
   absent from the accessibility tree when closed rather than merely invisible.
   --------------------------------------------------------------------------- */
.mg-modal { position: fixed; inset: 0; z-index: 1080; display: flex; align-items: center; justify-content: center; padding: 16px; }
.mg-modal[hidden] { display: none; }
.mg-modal-backdrop { position: absolute; inset: 0; background: rgba(20, 18, 14, .55); }

.mg-modal-panel {
    position: relative;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 18px 48px rgba(0, 0, 0, .28);
    width: 100%;
    max-width: 540px;
    /* Taller than the viewport on a phone in landscape, so the panel scrolls
       inside itself instead of pushing its buttons off the bottom of the screen
       where nobody can reach them. */
    max-height: 90vh;
    overflow-y: auto;
    padding: 20px 22px;
}

.mg-modal-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.mg-modal-head h3 { margin: 0; font-size: 20px; font-weight: 700; color: #2b2823; }

.mg-modal-body { font-size: 15px; color: #2b2823; }
.mg-match-lead { font-size: 16px; font-weight: 600; margin: 0 0 14px; }

.mg-match-row { display: flex; gap: 10px; align-items: flex-start; padding: 10px 0; border-top: 1px solid #ece8e0; }
.mg-match-row div { flex: 1; }

/* Colour is never the only signal - the glyph is set in script alongside the
   class, because a red dot and a green dot are the same dot to a good number
   of readers. */
.mg-match-icon {
    flex: 0 0 24px; width: 24px; height: 24px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 14px; font-weight: 700; color: #fff; margin-top: 2px;
}
.mg-match-good { background: #2f7a3f; }
.mg-match-bad { background: #b02a37; }
.mg-match-unknown { background: #7a6f5c; }

.mg-match-list { margin: 6px 0 0; padding-left: 20px; font-size: 14px; }
.mg-match-list li { margin-bottom: 4px; }

.mg-match-note {
    margin: 14px 0 0; padding: 10px 12px;
    background: #f6f2ea; border-radius: 8px;
    font-size: 14px; color: #4a473f;
}

.mg-modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 18px; flex-wrap: wrap; }
.mg-modal-actions .btn { min-width: 150px; }

/* Stops the page behind the dialog scrolling under the parent's thumb. */
body.mg-modal-open { overflow: hidden; }

@media (max-width: 575.98px) {
    .mg-modal-actions { flex-direction: column-reverse; }
    .mg-modal-actions .btn { width: 100%; }
}

/* ---- "match this school" subject guidance (Step 4/5) ---- */
.mg-adjust { margin: 8px 0 0; font-size: 14.5px; }
.mg-adjust a { color: var(--mg-accent); font-weight: 600; text-decoration: underline; }
.mg-clusters { background: #fff; border: 1px solid #e3ded4; border-left: 4px solid var(--mg-accent); border-radius: 6px; padding: 12px 14px; margin-bottom: 16px; font-size: 15px; }
.mg-clusters ul { margin: 6px 0 0; padding-left: 18px; }
.mg-match-adjust { background: var(--mg-accent-soft); border-left: 4px solid var(--mg-accent); padding: 10px 12px; border-radius: 6px; margin: 10px 0; font-size: 14.5px; }
.mg-doc-alert { background: #fff8e1; border: 1px solid #f0dfa8; border-left: 4px solid #b8860b; border-radius: 6px; padding: 12px 14px; margin-bottom: 14px; font-size: 15px; }
.mg-learner-card { background: #fff; border: 1px solid #e3ded4; border-radius: 8px; padding: 14px 16px; margin-bottom: 14px; }
.mg-learner-card h4 { margin: 0 0 2px; }
.mg-learner-apps { margin: 10px 0 0; padding: 0; list-style: none; }
.mg-learner-apps li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; padding: 8px 0; border-top: 1px solid #eee; font-size: 14.5px; }