/**
 * Member Path — member-facing styles.
 *
 * Every rule is prefixed with #scp-primary on purpose. The base public sheet
 * carries `#scp-primary :not(.scp-shortcode-elements *) { margin:0; padding:0 }`
 * at specificity (1,1,0), which outranks a plain `.scp-mp .x` rule (0,2,0) and
 * silently flattens the padding off every button and card. Keep the prefix on
 * any rule added here, and verify computed styles rather than trusting the file.
 *
 * Scoped under .scp-mp so nothing leaks into the other My Account tabs. Colours
 * follow the site's front-end palette rather than the mockup's pink/purple;
 * icons are SVG, never emoji.
 */

/* The accent follows SCP's public primary (`:root` in
   smart-creator-press-public.css) rather than a hue of its own, so a site that
   repaints --primary repaints this tab with it. The hex after the comma is the
   fallback for an install that never defines it.

   --scp-mp-wash / --scp-mp-tint are the two light weights of that same accent,
   used for card fills and pill backgrounds. color-mix keeps them derived rather
   than a second set of hard-coded hexes that would drift the moment --primary
   changes; the literal declaration above each one is the pre-color-mix
   fallback, frozen at the default indigo. */
#scp-primary .scp-mp {
    --scp-mp-line: #e6e8ec;
    --scp-mp-muted: #6b7280;
    --scp-mp-accent: var(--primary, #4f46e5);
    --scp-mp-accent-dark: var(--primary-dark, #4338ca);
    --scp-mp-soft: #f7f8fa;

    --scp-mp-wash: #f6f6fe;
    --scp-mp-wash: color-mix(in srgb, var(--scp-mp-accent) 4%, #fff);
    --scp-mp-tint: #f0f0fd;
    --scp-mp-tint: color-mix(in srgb, var(--scp-mp-accent) 7%, #fff);
    --scp-mp-edge: #d6d5f7;
    --scp-mp-edge: color-mix(in srgb, var(--scp-mp-accent) 22%, #fff);
}

/* Creator-authored text can be a single unbroken 300-char "word" (a pasted URL,
   or a label typed without spaces). Without this the flex/grid children refuse
   to shrink and the whole page scrolls sideways. */
#scp-primary .scp-mp .scp-mp-step-label,
#scp-primary .scp-mp .scp-mp-step-hint,
#scp-primary .scp-mp .scp-mp-step-dest,
#scp-primary .scp-mp .scp-mp-quiz-q,
#scp-primary .scp-mp .scp-mp-choice,
#scp-primary .scp-mp .scp-mp-pathchip,
#scp-primary .scp-mp .scp-mp-cat-name,
#scp-primary .scp-mp .scp-mp-new-title,
#scp-primary .scp-mp .scp-mp-ql-label,
#scp-primary .scp-mp-popup-item-main b {
    overflow-wrap: anywhere;
    word-break: break-word;
    min-width: 0;
}

/* ---------- two-column layout ----------
   Wide reading column plus a narrow rail for the short at-a-glance cards.
   Which column a block lands in comes from SCP_Member_Path::block_types(), not
   from the creator — the rail is only wide enough for the small ones. When one
   column ends up empty the renderer emits `.is-single` instead of leaving an
   empty 320px track. */

#scp-primary .scp-mp .scp-mp-layout {
    display: grid; grid-template-columns: minmax(0, 1fr) 320px;
    gap: 22px; align-items: start;
}
#scp-primary .scp-mp .scp-mp-layout.is-single { grid-template-columns: minmax(0, 1fr); }
#scp-primary .scp-mp .scp-mp-col-main,
#scp-primary .scp-mp .scp-mp-col-side { min-width: 0; }

/* ---------- side-rail cards ---------- */

#scp-primary .scp-mp .scp-mp-railcard {
    background: #fff; border: 1px solid var(--scp-mp-line); border-radius: 12px;
    padding: 18px 20px; margin-bottom: 16px;
}
#scp-primary .scp-mp .scp-mp-railcard-title {
    font-size: 16px; font-weight: 700; line-height: 1.3; margin: 0; padding: 0;
    overflow-wrap: anywhere;
}
#scp-primary .scp-mp .scp-mp-railcard-sub {
    font-size: 13px; line-height: 1.45; color: var(--scp-mp-muted); margin: 5px 0 0; padding: 0;
}
#scp-primary .scp-mp .scp-mp-railbtn {
    display: inline-block; margin-top: 14px; text-decoration: none;
    font-size: 13.5px; font-weight: 700; line-height: 1.2;
    padding: 10px 18px; border-radius: 8px;
    background: var(--scp-mp-accent); color: #fff; border: 0;
}
#scp-primary .scp-mp .scp-mp-railbtn:hover { background: var(--scp-mp-accent-dark); color: #fff; }

/* "Continue where you left off" is the one card meant to pull the eye, so it
   sits on a light tint of the accent rather than the plain white the other rail
   cards use. Tinted, not filled: a solid accent behind four lines of text made
   the rail read as an advert, and it forced every child to white. */
#scp-primary .scp-mp .scp-mp-continue {
    background: var(--scp-mp-tint);
    border-color: var(--scp-mp-edge);
    padding: 18px 20px 20px;
}
#scp-primary .scp-mp .scp-mp-continue .scp-mp-eyebrow {
    color: var(--scp-mp-accent); margin-bottom: 10px;
}

/* Course names run long — clamp to two lines so one verbose title cannot turn
   the card into a paragraph. The full string stays on the title attribute. */
#scp-primary .scp-mp .scp-mp-continue-course {
    margin: 0; padding: 0;
    font-size: 15px; font-weight: 700; line-height: 1.35; color: var(--text, #1f2937);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; overflow-wrap: anywhere;
}

/* The next lesson is the actual call to action, so it gets its own labelled
   line rather than reading as a subtitle of the course. One line only. */
#scp-primary .scp-mp .scp-mp-continue-lesson {
    margin: 10px 0 0; padding: 0;
    font-size: 13px; line-height: 1.4; color: #374151;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; overflow-wrap: anywhere;
}
#scp-primary .scp-mp .scp-mp-continue-next {
    display: block;
    font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
    color: var(--scp-mp-muted); margin-bottom: 2px;
}

#scp-primary .scp-mp .scp-mp-continue-progress { margin: 14px 0 0; }
#scp-primary .scp-mp .scp-mp-continue .scp-mp-progress-bar {
    background: var(--scp-mp-edge); height: 6px;
}
#scp-primary .scp-mp .scp-mp-continue .scp-mp-progress-bar i { background: var(--scp-mp-accent); }
#scp-primary .scp-mp .scp-mp-continue .scp-mp-progress-text {
    color: var(--scp-mp-muted); font-size: 12px; margin-top: 7px;
}

/* The button keeps the solid fill the card gave up — on a tinted card it is now
   the only thing carrying full-strength colour, which is what makes it read as
   the action. */
#scp-primary .scp-mp .scp-mp-continue .scp-mp-railbtn { margin-top: 16px; }

/* Full-width button: in a 320px rail a short "Resume" floating left looks like
   an afterthought next to a two-line title. */
#scp-primary .scp-mp .scp-mp-railbtn-block {
    display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%;
}
#scp-primary .scp-mp .scp-mp-railbtn-arrow { display: inline-flex; transition: transform .12s; }
#scp-primary .scp-mp .scp-mp-railbtn-arrow svg { width: 15px; height: 15px; }
#scp-primary .scp-mp .scp-mp-railbtn:hover .scp-mp-railbtn-arrow { transform: translateX(2px); }

/* The event card sits directly under Continue in the same rail, so it takes the
   same accent — two unrelated tints stacked read as two unrelated widgets. One
   weight weaker, so Continue still leads. */
#scp-primary .scp-mp .scp-mp-event {
    background: var(--scp-mp-wash);
    border-color: var(--scp-mp-edge);
}

/* ---------- shared block chrome ---------- */

/* Every main-column block is a card, matching the side rail. The theme's
   `.scp-my-account-inner-section` only supplies a bottom margin, so without
   this the blocks sit as bare content on the page background while the rail
   beside them is carded. */
#scp-primary .scp-mp .scp-mp-block {
    background: #fff; border: 1px solid var(--scp-mp-line); border-radius: 12px;
    padding: 22px 24px; margin-bottom: 16px;
}
#scp-primary .scp-mp .scp-mp-block:last-child { margin-bottom: 0; }

/* The section heading, now that it sits inside the card.
   The theme dresses `.scp-my-section-heading` with a 2px grey bottom border
   AND a 150px grey bar via ::after. That reads as a divider across the top of
   a card, so both are dropped here — the card edge already does that job. */
/* 14px below, not 4: the grids that follow (categories, new content) carry no
   top margin of their own, so the heading sat almost on top of the first row. */
#scp-primary .scp-mp .scp-my-section-heading {
    margin: 0 0 14px; border-bottom: 0; padding: 0;
}
#scp-primary .scp-mp .scp-my-section-heading:after { display: none; }
#scp-primary .scp-mp .scp-my-section-heading h3 {
    font-size: 18px; font-weight: 700; line-height: 1.25; margin: 0; padding: 0;
    color: inherit;
}

#scp-primary .scp-mp .scp-mp-eyebrow {
    display: flex; align-items: center; gap: 7px;
    font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
    color: var(--scp-mp-accent); margin-bottom: 8px;
}
#scp-primary .scp-mp .scp-mp-eyebrow svg { width: 15px; height: 15px; }

/* ---------- quiz + path chooser ----------
   Both render the same shape: an eyebrow, a question, and a grid of one-tap
   choices. The chooser adds a step count under each label. */

/* The card comes from `.scp-mp-block` around it — every main-column block is
   carded now, so giving the quiz one of its own would nest two. */
#scp-primary .scp-mp .scp-mp-quiz { margin: 0; }

/* The 4px margin here used to read as ~10px: a 20px heading at line-height
   1.25 carries ~2.5px of half-leading under the glyphs, and the sub's 1.5
   added ~3px above its own. Tightening both line-heights closes the optical
   gap without cramping either line internally. */
#scp-primary .scp-mp .scp-mp-quiz-q {
    font-size: 20px; font-weight: 700; line-height: 1.2; margin: 0; padding: 0;
}
#scp-primary .scp-mp .scp-mp-quiz-sub {
    font-size: 13.5px; color: var(--scp-mp-muted); margin: 0 0 16px; line-height: 1.45;
}

#scp-primary .scp-mp .scp-mp-choices {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px;
}
#scp-primary .scp-mp .scp-mp-choice {
    text-align: left; cursor: pointer; font: inherit;
    font-size: 15px; font-weight: 600; line-height: 1.3;
    padding: 15px 16px; border-radius: 10px;
    border: 1.5px solid var(--scp-mp-line); background: var(--scp-mp-soft); color: inherit;
    transition: border-color .12s, background .12s, transform .12s, box-shadow .12s;
}
#scp-primary .scp-mp .scp-mp-choice:hover {
    border-color: var(--scp-mp-accent);
    background: #fff;
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(79, 70, 229, .1);
}
#scp-primary .scp-mp .scp-mp-choice-label { display: block; }
#scp-primary .scp-mp .scp-mp-choice-meta {
    display: block; margin-top: 3px;
    font-size: 12px; font-weight: 600; color: var(--scp-mp-muted);
}

/* ---------- path line ---------- */

/* No top margin: the heading above now supplies the gap, and Start Here would
   otherwise get 14 + 2 where every other block gets 14. */
#scp-primary .scp-mp .scp-mp-pathline {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 14px;
}
#scp-primary .scp-mp .scp-mp-pathchip {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: 13px; font-weight: 700;
    padding: 7px 13px; border-radius: 20px;
    background: var(--scp-mp-tint); color: var(--scp-mp-accent);
}
#scp-primary .scp-mp .scp-mp-pathchip svg { width: 15px; height: 15px; }

/* No path matched: a neutral badge, not the accent one, because there is
   nothing to be pleased about yet — it is a state to resolve. */
#scp-primary .scp-mp .scp-mp-pathchip.is-none {
    background: var(--scp-mp-soft); color: var(--scp-mp-muted);
}

/* And a real button beside it. This used to be the bare underlined "change"
   link, which sat alone under the heading pointing at nothing. */
#scp-primary .scp-mp .scp-mp-pickbtn {
    border: 0; cursor: pointer; font: inherit; white-space: nowrap;
    font-size: 12.5px; font-weight: 700;
    padding: 7px 14px; border-radius: 20px;
    background: var(--scp-mp-accent); color: #fff;
}
#scp-primary .scp-mp .scp-mp-pickbtn:hover { background: var(--scp-mp-accent-dark); color: #fff; }

#scp-primary .scp-mp .scp-mp-change {
    border: 0; background: none; padding: 0; cursor: pointer; font: inherit;
    font-size: 12.5px; font-weight: 600; color: var(--scp-mp-accent);
    text-decoration: underline; text-underline-offset: 2px;
}

/* ---------- progress ---------- */

#scp-primary .scp-mp .scp-mp-progress { margin: 0 0 16px; }
#scp-primary .scp-mp .scp-mp-progress-bar {
    height: 9px; border-radius: 6px; background: #eceef1; overflow: hidden;
}
#scp-primary .scp-mp .scp-mp-progress-bar i {
    display: block; height: 100%; background: var(--scp-mp-accent);
    transition: width .3s ease;
}
#scp-primary .scp-mp .scp-mp-progress-text {
    font-size: 12.5px; color: var(--scp-mp-muted); margin-top: 6px;
}

/* ---------- steps ---------- */

#scp-primary .scp-mp .scp-mp-step {
    display: flex; align-items: center; gap: 13px;
    padding: 12px 0; border-bottom: 1px solid var(--scp-mp-line);
}
#scp-primary .scp-mp .scp-mp-step:last-child { border-bottom: 0; }

#scp-primary .scp-mp .scp-mp-step-dot {
    flex: 0 0 28px; width: 28px; height: 28px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 700;
    background: #eceef1; color: var(--scp-mp-muted);
}
#scp-primary .scp-mp .scp-mp-step-dot svg { width: 15px; height: 15px; }
#scp-primary .scp-mp .scp-mp-step.is-done .scp-mp-step-dot { background: #137a45; color: #fff; }

#scp-primary .scp-mp .scp-mp-step-body { flex: 1 1 auto; min-width: 0; }
#scp-primary .scp-mp .scp-mp-step-label { display: block; font-size: 14.5px; line-height: 1.3; }
#scp-primary .scp-mp .scp-mp-step-hint,
#scp-primary .scp-mp .scp-mp-step-dest { display: block; font-size: 12.5px; line-height: 1.4; }
#scp-primary .scp-mp .scp-mp-step-hint { color: var(--scp-mp-muted); }
#scp-primary .scp-mp .scp-mp-step-dest { font-size: 11.5px; font-weight: 600; color: var(--scp-mp-accent); margin-top: 2px; }

/* A step the creator pointed at a URL: the label becomes the link. It keeps
   the plain label's size and the <b>'s weight, so a linked step and an ordinary
   one sit at the same visual level — the arrow is what says it goes somewhere.
   `color: inherit` because the theme's own link colour would otherwise repaint
   half the checklist. */
#scp-primary .scp-mp .scp-mp-step-link {
    display: inline-flex; align-items: center; gap: 5px;
    font-weight: 700; color: inherit; text-decoration: none;
}
#scp-primary .scp-mp .scp-mp-step-link:hover,
#scp-primary .scp-mp .scp-mp-step-link:focus-visible {
    color: var(--scp-mp-accent); text-decoration: underline;
}
#scp-primary .scp-mp .scp-mp-step-link svg {
    flex: 0 0 13px; width: 13px; height: 13px; opacity: .6;
}

/* After .scp-mp-step-link so a done step still greys out — equal specificity
   otherwise and the link colour would win on source order. */
#scp-primary .scp-mp .scp-mp-step.is-done .scp-mp-step-label { color: var(--scp-mp-muted); }

#scp-primary .scp-mp .scp-mp-step-action {
    flex: 0 0 auto; cursor: pointer; font: inherit; white-space: nowrap;
    font-size: 12.5px; font-weight: 700;
    padding: 8px 14px; border-radius: 8px; border: 0;
    background: var(--scp-mp-tint); color: var(--scp-mp-accent);
    text-decoration: none;
}
#scp-primary .scp-mp .scp-mp-step-action:hover { background: var(--scp-mp-edge); }
#scp-primary .scp-mp .scp-mp-step-action.is-done { background: #e7f7ee; color: #137a45; }

/* Busy state: a mutation is in flight, so block a second click. */
#scp-primary .scp-mp .scp-mp-busy { opacity: .55; pointer-events: none; }

/* ---------- browse by category ---------- */

#scp-primary .scp-mp .scp-mp-cat-grid {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 11px;
}
/* Category cards sit on a light wash of the accent rather than plain white, so
   a grid of them reads as one browsable set instead of a row of empty boxes.
   One weight lighter than the Continue card, which still has to lead. */
#scp-primary .scp-mp .scp-mp-cat {
    display: block; width: 100%; text-align: center; cursor: pointer; font: inherit; color: inherit;
    padding: 16px 12px; border-radius: 12px;
    border: 1.5px solid var(--scp-mp-edge); background: var(--scp-mp-wash);
    transition: border-color .12s, background .12s, transform .12s, box-shadow .12s;
}
#scp-primary .scp-mp .scp-mp-cat:hover {
    border-color: var(--scp-mp-accent);
    background: var(--scp-mp-tint);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(79, 70, 229, .1);
}
#scp-primary .scp-mp .scp-mp-cat-ico { display: block; color: var(--scp-mp-accent); }
#scp-primary .scp-mp .scp-mp-cat-ico svg { width: 22px; height: 22px; }
#scp-primary .scp-mp .scp-mp-cat-name { display: block; font-size: 13.5px; margin-top: 6px; }
#scp-primary .scp-mp .scp-mp-cat-count { display: block; font-size: 11.5px; color: var(--scp-mp-muted); margin-top: 2px; }

/* ---------- new this month ---------- */

#scp-primary .scp-mp .scp-mp-new-grid {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 11px;
}
/* Soft gray fill so each item reads as a card against the white block behind
   it — an outline-only tile disappeared into the panel. */
#scp-primary .scp-mp .scp-mp-new-item {
    display: block; text-decoration: none; color: inherit;
    padding: 14px; border-radius: 11px;
    border: 1px solid var(--scp-mp-line); background: var(--scp-mp-soft);
    transition: border-color .12s, background .12s, box-shadow .12s;
}
#scp-primary .scp-mp .scp-mp-new-item:hover {
    border-color: var(--scp-mp-accent);
    box-shadow: 0 6px 16px rgba(79, 70, 229, .1);
}
#scp-primary .scp-mp .scp-mp-new-badge {
    display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: .04em;
    text-transform: uppercase; padding: 2px 7px; border-radius: 9px;
    background: #e7f7ee; color: #137a45; margin-bottom: 7px;
}
#scp-primary .scp-mp .scp-mp-new-title { display: block; font-size: 13.5px; line-height: 1.3; }
#scp-primary .scp-mp .scp-mp-new-meta { display: block; font-size: 11.5px; color: var(--scp-mp-muted); margin-top: 3px; }

/* ---------- quick links ---------- */

/* Rows separated by a hairline, each led by the same round chip. Every row
   carries the same mark (there is no icon picker), so it has to be one that
   reads as "go here" rather than as a specific thing — an arrow. A solid
   triangle was tried and reads as a play button. */
#scp-primary .scp-mp .scp-mp-ql-list { display: flex; flex-direction: column; }
#scp-primary .scp-mp .scp-mp-ql {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 0; text-decoration: none; color: inherit;
    border-bottom: 1px solid var(--scp-mp-line);
    font-size: 14px; font-weight: 600;
}
#scp-primary .scp-mp .scp-mp-ql:last-child { border-bottom: 0; padding-bottom: 0; }
#scp-primary .scp-mp .scp-mp-ql:first-of-type { padding-top: 4px; }
#scp-primary .scp-mp .scp-mp-ql:hover .scp-mp-ql-label { color: var(--scp-mp-accent); }
#scp-primary .scp-mp .scp-mp-ql:hover .scp-mp-ql-ico { background: var(--scp-mp-accent); }
#scp-primary .scp-mp .scp-mp-ql-ico {
    flex: 0 0 28px; width: 28px; height: 28px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: #1f2937; color: #fff;
    transition: background .12s;
}
/* The arrow is symmetrical, so no optical nudge — the triangle needed one. */
#scp-primary .scp-mp .scp-mp-ql-ico svg { width: 14px; height: 14px; }
#scp-primary .scp-mp .scp-mp-ql-label { line-height: 1.3; }

/* ---------- category side popup ----------
   Reuses the shared .scp-listing-table-popup shell so the existing close
   handler keeps working, but overrides the centred-modal positioning into a
   right-hand drawer. Scoped hard to this one id so no other SCP modal moves. */

#scp-primary #scp-mp-category-popup.scp-listing-table-popup-overlay {
    padding: 0;
    justify-content: flex-end;
    align-items: stretch;
}
#scp-primary #scp-mp-category-popup .scp-listing-table-popup {
    width: 560px; max-width: 94vw; max-height: 100%;
    border-radius: 0; padding: 0;
    display: flex; flex-direction: column;
    animation: scp-mp-slide-in .22s ease-out;
}
#scp-primary #scp-mp-category-popup.scp-popup-active .scp-listing-table-popup {
    width: 560px; max-width: 94vw;
}
#scp-primary #scp-mp-category-popup .scp-listing-table-popup-header {
    margin: 0; padding: 18px 22px; flex: 0 0 auto;
}
#scp-primary #scp-mp-category-popup .scp-listing-table-popup-body {
    margin: 0; padding: 10px 22px 22px; flex: 1 1 auto; overflow-y: auto;
}

@keyframes scp-mp-slide-in {
    from { transform: translateX(100%); }
    to   { transform: translateX(0); }
}

#scp-primary .scp-mp-popup-list { display: flex; flex-direction: column; }
/* Each item is a card on the soft gray rather than a row separated by a hair
   line. On a tall white panel one or two hairlines gave no sense of where an
   item started and stopped, and nothing to aim a click at. */
#scp-primary .scp-mp-popup-item {
    display: flex; align-items: center; gap: 10px; justify-content: space-between;
    padding: 13px 15px; margin-bottom: 8px; border-radius: 10px;
    background: #f7f8fa; border: 1px solid #e6e8ec;
    text-decoration: none; color: inherit;
    transition: background .12s, border-color .12s;
}
#scp-primary .scp-mp-popup-item:last-child { margin-bottom: 0; }
#scp-primary .scp-mp-popup-item:hover {
    background: #fff; border-color: var(--primary, #4f46e5);
}
#scp-primary .scp-mp-popup-item-main { min-width: 0; }
#scp-primary .scp-mp-popup-item-main b { display: block; font-size: 13.5px; line-height: 1.35; }
#scp-primary .scp-mp-popup-item-type { display: block; font-size: 11.5px; color: #6b7280; margin-top: 2px; }
#scp-primary .scp-mp-popup-item-go { flex: 0 0 auto; color: var(--primary, #4f46e5); display: flex; }
#scp-primary .scp-mp-popup-item-go svg { width: 16px; height: 16px; }
#scp-primary .scp-mp-popup-empty { font-size: 13.5px; color: #6b7280; padding: 8px 0; }

#scp-primary .scp-mp-popup-loading {
    width: 22px; height: 22px; margin: 24px auto;
    border: 3px solid rgba(0, 0, 0, .1); border-top-color: var(--primary, #4f46e5);
    border-radius: 50%; animation: scp-mp-spin .8s linear infinite;
}
@keyframes scp-mp-spin { to { transform: rotate(360deg); } }

/* ---------- empty state ---------- */

#scp-primary .scp-mp .scp-mp-empty-text {
    font-size: 13.5px; line-height: 1.55; color: var(--scp-mp-muted); margin: 0;
}

/* ---------- responsive ---------- */

/* Below this the rail has nowhere to go, so it stacks under the main column
   rather than squeezing both. */
@media (max-width: 1024px) {
    #scp-primary .scp-mp .scp-mp-layout { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 900px) {
    #scp-primary .scp-mp .scp-mp-cat-grid,
    #scp-primary .scp-mp .scp-mp-new-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
    /* The card is the block wrapper now, so tighten that rather than the quiz. */
    #scp-primary .scp-mp .scp-mp-block { padding: 18px 16px; }
    #scp-primary .scp-mp .scp-mp-choices { grid-template-columns: minmax(0, 1fr); }
    #scp-primary .scp-mp .scp-mp-cat-grid,
    #scp-primary .scp-mp .scp-mp-new-grid { grid-template-columns: minmax(0, 1fr); }
    #scp-primary .scp-mp .scp-mp-step { align-items: flex-start; flex-wrap: wrap; }
    #scp-primary .scp-mp .scp-mp-step-action { margin-left: 41px; }
    #scp-primary #scp-mp-category-popup .scp-listing-table-popup { width: 100%; max-width: 100%; }
}

/* ---------- creator's own content blocks ----------
   The body is opted OUT of the base sheet's margin/padding reset via
   .scp-shortcode-elements (see scp_mp_render_custom_block), so whatever the
   creator wrote — and whatever a shortcode returned — keeps its own spacing.
   These rules only set the type scale around it. */

/* The line under a block heading. Every block that renders a heading can carry
   one now, so it is styled once rather than per block. The negative top margin
   pulls it up under the heading — that heading's own 14px bottom margin is for
   the content below, not for this. */
#scp-primary .scp-mp .scp-mp-section-sub {
    font-size: 13.5px; line-height: 1.5; color: var(--scp-mp-muted);
    margin: -10px 0 14px; padding: 0; max-width: 720px;
}
#scp-primary .scp-mp .scp-mp-col-side .scp-mp-section-sub { font-size: 12.5px; }
#scp-primary .scp-mp .scp-mp-custom-body { font-size: 14.5px; line-height: 1.6; }
#scp-primary .scp-mp .scp-mp-custom-body img { max-width: 100%; height: auto; }
/* Wide things a shortcode returned (tables, embeds) scroll inside the card
   rather than pushing the whole dashboard sideways. */
#scp-primary .scp-mp .scp-mp-custom-body table { display: block; overflow-x: auto; max-width: 100%; }

/* In the 320px rail there is no room for a reading measure. */
#scp-primary .scp-mp .scp-mp-col-side .scp-mp-custom-body { font-size: 13.5px; }