/* ListingMine Competency Centre
   ---------------------------------------------------------------------------
   A professional diagnostic, not a quiz. Light ground, brand navy (#203D74),
   one restrained accent, generous whitespace, and no trophies or confetti
   anywhere. Nothing here is red-for-wrong: a low score is a starting point,
   and the page has to be somewhere a senior person is willing to be seen.

   Scoped under .lmc so it cannot leak into the 1,000+ pages that share this
   site's stylesheets — a lesson from the header and slider changes that
   reached pages nobody had looked at.
   --------------------------------------------------------------------------- */

.lmc {
    --navy: #203D74;
    --navy-deep: #172c55;
    --ink: #1f2937;
    --ink-soft: #4b5563;
    --ink-faint: #8b94a3;
    --line: #e4e7ec;
    --paper: #ffffff;
    --ground: #f7f8fa;
    --accent: #0f766e;
    --good: #1d6b46;
    --warn: #a16207;

    color: var(--ink);
    background: var(--ground);
    font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif;
    line-height: 1.62;
    -webkit-text-size-adjust: 100%;
}

/* This site sets section{padding:100px 0} globally, which balloons every gap on
   a page built from sections. Neutralised here only. */
.lmc section { padding: 0; }

.lmc *, .lmc *::before, .lmc *::after { box-sizing: border-box; }

/* [hidden] is a UA rule (display:none), and ANY author display declaration beats it. .lmc-btn sets
   display:inline-block, so hiding a button with the hidden attribute silently did nothing — the
   test showed "Next" and "Review answers" side by side on every question. Restore the meaning of
   hidden inside this module. */
.lmc [hidden] { display: none !important; }

/* ---- clearing the fixed site header ---------------------------------------
   <header> on this site is position:fixed, 101px tall, and takes itself out of
   the flow — so anything that starts at the top of the page starts UNDERNEATH
   it. Measured: 93px of the first screen was hidden.

   The height is a variable, not a number in this file, because a hardcoded
   offset is what broke the FAQ topic links: it was written against a header
   measured at 100.66px and any change (browser zoom, a font falling back, the
   nav wrapping to two lines) swallowed the clearance. The script on the page
   measures the real header and sets --lmc-header; this value is only the
   fallback for the moment before it runs. */
.lmc { --lmc-header: 101px; padding-top: var(--lmc-header); }

/* In-page jumps land below the header rather than behind it. */
html:has(.lmc) { scroll-padding-top: calc(var(--lmc-header, 101px) + 16px); }
.lmc .lmc-wrap { max-width: 1080px; margin: 0 auto; padding: 0 20px; }

/* ---- hero ---------------------------------------------------------------- */
.lmc-hero { background: var(--paper); border-bottom: 1px solid var(--line); padding: 56px 0 44px; }
.lmc-eyebrow {
    font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
    color: var(--navy); margin: 0 0 12px;
}
.lmc-hero h1 {
    font-size: clamp(28px, 5vw, 42px); line-height: 1.14; font-weight: 700;
    letter-spacing: -.02em; margin: 0 0 14px; color: var(--ink); text-wrap: balance;
}
.lmc-lede { font-size: clamp(16px, 2.2vw, 19px); color: var(--ink-soft); margin: 0; max-width: 62ch; }

/* ---- section headings ---------------------------------------------------- */
.lmc-band { padding: 44px 0 8px; }
.lmc-band h2 {
    font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
    color: var(--ink-faint); margin: 0 0 4px;
}
.lmc-band p { margin: 0 0 22px; color: var(--ink-soft); max-width: 58ch; }

/* ---- assessment cards ---------------------------------------------------- */
.lmc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 18px; }
.lmc-card {
    background: var(--paper); border: 1px solid var(--line); border-radius: 14px;
    padding: 24px; display: flex; flex-direction: column;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.lmc-card:hover { border-color: #cbd5e1; box-shadow: 0 6px 20px rgba(15, 23, 42, .07); transform: translateY(-1px); }
.lmc-card h3 { font-size: 19px; font-weight: 700; margin: 0 0 8px; color: var(--ink); letter-spacing: -.01em; }
.lmc-card p { margin: 0 0 18px; color: var(--ink-soft); font-size: 14.5px; }
.lmc-facts {
    display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0 0 20px; padding: 0; list-style: none;
    color: var(--ink-faint); font-size: 13px;
}
.lmc-facts li { display: flex; align-items: center; gap: 6px; }
.lmc-card .lmc-cta { margin-top: auto; }

/* ---- buttons ------------------------------------------------------------- */
.lmc-btn {
    display: inline-block; padding: 12px 24px; border-radius: 10px; border: 1px solid transparent;
    font-weight: 700; font-size: 15px; text-decoration: none; cursor: pointer;
    font-family: inherit; line-height: 1.2; text-align: center;
}
.lmc-btn-primary { background: var(--navy); color: #fff; }
.lmc-btn-primary:hover, .lmc-btn-primary:focus { background: var(--navy-deep); color: #fff; }
.lmc-btn-ghost { background: var(--paper); color: var(--navy); border-color: #cbd5e1; }
.lmc-btn-ghost:hover, .lmc-btn-ghost:focus { border-color: var(--navy); color: var(--navy-deep); }
.lmc-btn[disabled], .lmc-btn[aria-disabled="true"] {
    background: #e5e7eb; color: #6b7280; border-color: #d1d5db; cursor: not-allowed;
}
.lmc-btn:focus-visible, .lmc a:focus-visible, .lmc button:focus-visible {
    outline: 3px solid rgba(32, 61, 116, .45); outline-offset: 2px;
}

.lmc-soon {
    display: inline-block; font-size: 12px; font-weight: 700; color: var(--warn);
    background: #fef9c3; border-radius: 20px; padding: 5px 12px;
}

/* ---- landing page -------------------------------------------------------- */
.lmc-cols { display: grid; grid-template-columns: 1fr 320px; gap: 28px; align-items: start; padding: 40px 0 60px; }
.lmc-panel { background: var(--paper); border: 1px solid var(--line); border-radius: 14px; padding: 26px; }
.lmc-panel h2 { font-size: 20px; font-weight: 700; margin: 0 0 12px; color: var(--ink); }
.lmc-panel h3 { font-size: 15px; font-weight: 700; margin: 22px 0 6px; color: var(--ink); }
.lmc-domains { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.lmc-domains li {
    padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: #fcfdfe;
}
.lmc-domains strong { display: block; color: var(--ink); font-size: 14.5px; }
.lmc-domains span { color: var(--ink-faint); font-size: 13px; }
.lmc-side { position: sticky; top: 20px; }
.lmc-side dl { margin: 0 0 20px; display: grid; gap: 12px; }
.lmc-side dt {
    font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-faint);
}
.lmc-side dd { margin: 2px 0 0; color: var(--ink); font-size: 15px; }
.lmc-disclaimer {
    font-size: 13px; color: var(--ink-soft); line-height: 1.55; border-top: 1px solid var(--line);
    padding-top: 14px; margin-top: 4px;
}

/* ---- the test ------------------------------------------------------------ */
.lmc-test { padding: 26px 0 80px; }

/* Two columns while the test is running.
   The first version stacked the title, the progress bar and the question vertically, which pushed
   the question itself most of the way down the first screen — on a laptop you scrolled to read
   what you were being asked. The rail takes the context sideways so the question starts near the
   top, and it doubles as the navigator: 35 numbered squares are a far better way back to question
   12 than pressing Previous twenty times. */
.lmc-test-cols { display: grid; grid-template-columns: 236px 1fr; gap: 30px; align-items: start; }
.lmc-rail {
    position: sticky; top: calc(var(--lmc-header, 101px) + 18px);
    background: var(--paper); border: 1px solid var(--line); border-radius: 14px; padding: 20px;
}
.lmc-rail-name { font-size: 13px; font-weight: 700; color: var(--ink-faint); margin: 0 0 10px;
                 letter-spacing: .04em; text-transform: uppercase; line-height: 1.4; }
.lmc-rail .step { font-weight: 700; color: var(--ink); font-size: 16px; margin: 0 0 10px; }
.lmc-rail-label { font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
                  color: var(--ink-faint); margin: 20px 0 8px; }
.lmc-rail-note { font-size: 12.5px; color: var(--ink-faint); line-height: 1.55; margin: 16px 0 0; }

/* The navigator. Answered, unanswered and current are distinguished by shape and fill, not colour
   alone — the state has to survive a colour-blind reader and a bad phone screen. */
.lmc-jump { display: grid; grid-template-columns: repeat(auto-fill, minmax(30px, 1fr)); gap: 6px; }
.lmc-jump button {
    aspect-ratio: 1; min-height: 30px; border-radius: 7px; border: 1.5px solid var(--line);
    background: #fff; color: var(--ink-faint); font-size: 12px; font-weight: 700; cursor: pointer;
    font-family: inherit; padding: 0; line-height: 1;
}
.lmc-jump button:hover { border-color: #b9c2d0; }
.lmc-jump button.done { background: #eef2f9; border-color: #c3cfe2; color: var(--navy); }
.lmc-jump button.here { background: var(--navy); border-color: var(--navy); color: #fff; box-shadow: 0 0 0 3px rgba(32,61,116,.15); }
.lmc-track { height: 6px; background: #e5e7eb; border-radius: 99px; overflow: hidden; }
.lmc-fill { height: 100%; background: var(--navy); border-radius: 99px; transition: width .25s ease; }

.lmc-question {
    background: var(--paper); border: 1px solid var(--line); border-radius: 14px;
    padding: 28px 26px; margin: 0 0 18px;
}
.lmc-question legend, .lmc-question .qtext {
    font-size: clamp(17px, 2.4vw, 20px); font-weight: 600; line-height: 1.5; color: var(--ink);
    margin: 0 0 20px; padding: 0; display: block;
}
.lmc-options { display: grid; gap: 10px; border: 0; padding: 0; margin: 0; }
.lmc-option {
    display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px;
    border: 1.5px solid var(--line); border-radius: 11px; cursor: pointer; background: var(--paper);
    line-height: 1.5; font-size: 15.5px; transition: border-color .12s ease, background .12s ease;
}
.lmc-option:hover { border-color: #b9c2d0; background: #fcfdff; }
.lmc-option input { position: absolute; opacity: 0; width: 0; height: 0; }
.lmc-option .key {
    flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid #cbd5e1;
    display: grid; place-items: center; font-weight: 700; font-size: 13px; color: var(--ink-faint);
    background: #fff;
}
.lmc-option.is-picked { border-color: var(--navy); background: #f4f7fc; }
.lmc-option.is-picked .key { background: var(--navy); border-color: var(--navy); color: #fff; }
.lmc-option:has(input:focus-visible) { outline: 3px solid rgba(32, 61, 116, .45); outline-offset: 2px; }

.lmc-nav { display: flex; gap: 12px; align-items: center; margin-top: 20px; }
.lmc-nav .spacer { margin-left: auto; }

/* ---- result -------------------------------------------------------------- */
.lmc-score { background: var(--paper); border: 1px solid var(--line); border-radius: 14px; padding: 32px 28px; text-align: center; }
.lmc-score .big { font-size: clamp(44px, 9vw, 64px); font-weight: 700; color: var(--navy); line-height: 1; letter-spacing: -.03em; }
.lmc-score .of { color: var(--ink-faint); font-size: 15px; margin-top: 6px; }
.lmc-score .band { font-size: 19px; font-weight: 700; margin: 16px 0 6px; color: var(--ink); }
.lmc-score .band-note { color: var(--ink-soft); margin: 0 auto; max-width: 46ch; font-size: 15px; }

.lmc-domain-row { display: grid; grid-template-columns: 1fr 46px; gap: 14px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line); }
.lmc-domain-row:last-child { border-bottom: 0; }
.lmc-domain-name { font-size: 14.5px; color: var(--ink); }
.lmc-domain-meter { grid-column: 1 / -1; height: 8px; background: #eef0f4; border-radius: 99px; overflow: hidden; }
.lmc-domain-meter i { display: block; height: 100%; background: var(--navy); border-radius: 99px; }
.lmc-domain-meter.is-low i { background: var(--warn); }
.lmc-domain-pct { font-weight: 700; color: var(--ink); text-align: right; font-variant-numeric: tabular-nums; }

.lmc-diagnosis { background: #f4f7fc; border: 1px solid #dbe4f3; border-radius: 12px; padding: 20px 22px; margin: 20px 0; }
.lmc-diagnosis p { margin: 0 0 8px; color: var(--ink); font-size: 15.5px; line-height: 1.6; }
.lmc-diagnosis p:last-child { margin-bottom: 0; }

/* ---- answer review: a grid you scan --------------------------------------
   The previous version printed every answer as a card carrying an amber block
   and a green block. At 35 questions that is a wall of colour, and it still did
   not answer the only question a reader has — WHICH ones did I get wrong.

   So: one small tile per question, and colour used sparingly. Correct is quiet
   on purpose; a page where two thirds of the tiles shout is a page nobody
   reads. State is carried by fill AND border weight, never colour alone, so it
   survives a colour-blind reader.                                            */

.lmc-tiles {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(46px, 1fr));
    gap: 8px; margin: 0 0 18px;
}
.lmc-tile {
    aspect-ratio: 1; min-height: 44px;              /* a real tap target */
    border-radius: 9px; border: 1.5px solid var(--line); background: #fff;
    color: var(--ink-soft); font: 700 13px/1 inherit; font-family: inherit;
    cursor: pointer; padding: 0; display: grid; place-items: center;
}
.lmc-tile:hover { border-color: #b9c2d0; }
.lmc-tile:focus-visible { outline: 3px solid rgba(32,61,116,.45); outline-offset: 2px; }

/* result states */
.lmc-tile.is-ok { background: #f4f8f5; border-color: #cfe3d6; color: #2f6b4a; }
.lmc-tile.is-no { background: #fdf5ec; border-color: #e6c9a3; color: #8a5a12; border-width: 2px; }
.lmc-tile.is-na { background: #f6f7f9; border-color: #d7dbe2; color: #7b8494; border-style: dashed; }
.lmc-tile.is-open { box-shadow: 0 0 0 3px rgba(32,61,116,.18); border-color: var(--navy); color: var(--navy); }

/* pre-submit states */
.lmc-tile.is-done { background: #eef2f9; border-color: #c3cfe2; color: var(--navy); }
.lmc-tile.is-todo { background: #fff; border-style: dashed; }

.lmc-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0 0 12px;
              color: var(--ink-faint); font-size: 12.5px; }
.lmc-legend span { display: inline-flex; align-items: center; gap: 7px; }
.lmc-legend .k { width: 14px; height: 14px; border-radius: 4px; border: 1.5px solid; display: inline-block; }
.lmc-legend .k.ok { background: #f4f8f5; border-color: #cfe3d6; }
.lmc-legend .k.no { background: #fdf5ec; border-color: #e6c9a3; }
.lmc-legend .k.na { background: #f6f7f9; border-color: #d7dbe2; border-style: dashed; }

/* ---- the one open answer -------------------------------------------------- */
.lmc-detail {
    background: var(--paper); border: 1px solid var(--line); border-radius: 14px;
    padding: 22px 24px; margin: 0 0 8px;
}
.lmc-detail-q { font-size: 16.5px; font-weight: 600; line-height: 1.5; color: var(--ink); margin: 0 0 16px; }
.lmc-detail-q .n {
    display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 7px;
    background: #eef2f9; color: var(--navy); font-size: 12.5px; font-weight: 700; margin-right: 10px;
    vertical-align: 2px;
}
.lmc-detail-opts { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.lmc-detail-opts li {
    display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px;
    border: 1px solid var(--line); border-radius: 10px; line-height: 1.5; font-size: 15px;
    color: var(--ink-soft); background: #fff;
}
.lmc-detail-opts .k { font-weight: 700; color: var(--ink-faint); min-width: 14px; }
.lmc-detail-opts .t { flex: 1 1 auto; }
.lmc-detail-opts .tag {
    flex: 0 0 auto; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    padding: 3px 9px; border-radius: 20px; align-self: center;
}
/* Only the two rows that matter carry any colour at all. */
.lmc-detail-opts li.best { border-color: #cfe3d6; background: #f7fbf8; color: var(--ink); }
.lmc-detail-opts li.best .k, .lmc-detail-opts li.best .tag { color: #2f6b4a; }
.lmc-detail-opts li.best .tag { background: #e6f2ea; }
.lmc-detail-opts li.yours { border-color: #e6c9a3; background: #fdf9f3; color: var(--ink); }
.lmc-detail-opts li.yours .k, .lmc-detail-opts li.yours .tag { color: #8a5a12; }
.lmc-detail-opts li.yours .tag { background: #f6e9d6; }

.lmc-detail-note { color: var(--ink-soft); font-size: 14.5px; line-height: 1.6; margin: 14px 0 0; }
.lmc-detail-src { margin: 14px 0 0; font-size: 14.5px; color: var(--ink-faint); }
.lmc-detail-src a { color: var(--navy); font-weight: 600; }

@media (max-width: 640px) {
    .lmc-tiles { grid-template-columns: repeat(auto-fill, minmax(42px, 1fr)); gap: 7px; }
    .lmc-detail { padding: 18px 16px; }
}

.lmc-note { color: var(--ink-faint); font-size: 13px; line-height: 1.6; margin-top: 26px; }
.lmc-error { background: #fdf2f2; border: 1px solid #f6cfcf; border-left: 4px solid #9b2226; border-radius: 10px; padding: 14px 18px; color: #7f1d1d; }

/* ---- mobile -------------------------------------------------------------- */
@media (max-width: 900px) {
    .lmc-cols { grid-template-columns: 1fr; }
    .lmc-side { position: static; }

    /* On a phone a sticky rail would eat the screen the question needs, so it becomes a short
       strip at the top and the navigator collapses behind a details toggle. */
    .lmc-test-cols { grid-template-columns: 1fr; gap: 16px; }
    .lmc-rail { position: sticky; top: var(--lmc-header, 101px); padding: 14px 16px; z-index: 4; }
    .lmc-rail-name, .lmc-rail-note { display: none; }
    .lmc-rail .step { font-size: 14.5px; margin-bottom: 8px; }
    .lmc-rail-label { display: none; }
    .lmc-jump { grid-template-columns: repeat(auto-fill, minmax(26px, 1fr)); gap: 5px; margin-top: 12px; }
    .lmc-jump button { min-height: 26px; font-size: 11px; }
}
@media (max-width: 640px) {
    .lmc-hero { padding: 36px 0 30px; }
    .lmc-question { padding: 20px 17px; }
    .lmc-option { padding: 15px 15px; font-size: 15.5px; }   /* stays a large tap target */
    .lmc-nav { flex-wrap: wrap; }
    .lmc-nav .lmc-btn { flex: 1 1 auto; min-width: 44%; }
    .lmc-score { padding: 24px 18px; }
}

@media (prefers-reduced-motion: reduce) {
    .lmc-card, .lmc-fill, .lmc-option { transition: none; }
}

/* ---------------------------------------------------------------- instant feedback
   The sitting reveals the marking as each answer is given, so an option now has three
   resting states rather than one: chosen, right, and chosen-but-wrong. */
.lmc-option.is-right { border-color: #9fcbb1; background: #f2faf5; }
.lmc-option.is-right .key { background: #2f6b4a; border-color: #2f6b4a; color: #fff; }
.lmc-option.is-wrong { border-color: #e3b4b4; background: #fdf5f5; }
.lmc-option.is-wrong .key { background: #a4423f; border-color: #a4423f; color: #fff; }
.lmc-option input:disabled + .key { opacity: 1; }          /* a locked option is not a dead one */
.lmc-option:has(input:disabled) { cursor: default; }
.lmc-option:has(input:disabled):hover { border-color: #e5e9f0; background: #fff; }
.lmc-option.is-right:has(input:disabled):hover { border-color: #9fcbb1; background: #f2faf5; }
.lmc-option.is-wrong:has(input:disabled):hover { border-color: #e3b4b4; background: #fdf5f5; }

.lmc-reveal { margin: 18px 0 0; padding: 16px 18px; border-radius: 12px;
              border: 1px solid #e5e9f0; background: #fafbfd; }
.lmc-verdict { margin: 0; font-weight: 700; font-size: 15.5px; }
.lmc-verdict.ok { color: #2f6b4a; }
.lmc-verdict.no { color: #a4423f; }
.lmc-why  { margin: 10px 0 0; color: var(--ink-soft); font-size: 14.5px; line-height: 1.65; }
.lmc-read { margin: 12px 0 0; font-size: 14.5px; }
.lmc-read a { color: var(--navy); font-weight: 600; }

.lmc-done { text-align: center; padding: 26px 18px; }
.lmc-done h2 { margin: 0 0 10px; }
.lmc-done p  { color: var(--ink-soft); margin: 0 0 16px; }


/* ===== single-column study sheet =====
   Replaces the two-column exam console. One question at a time reads better in one column at a
   comfortable measure than stretched across the full width with a navigator parked beside it.
   The old .lmc-test-cols and .lmc-rail rules are left in place, unused, so the exam layout can
   be restored by reverting the markup alone. */
.lmc-sheet { max-width: 680px; margin: 0 auto; }

.lmc-progress { margin: 0 0 18px; }
.lmc-progress-name {
    font-size: 12px; font-weight: 700; color: var(--ink-faint); margin: 0 0 6px;
    letter-spacing: .06em; text-transform: uppercase; line-height: 1.4;
}
.lmc-progress .step {
    font-weight: 700; color: var(--ink); font-size: 15px; margin: 0 0 10px;
}
.lmc-progress .lmc-track { height: 5px; }

/* The question no longer needs a card inside a column -- the column is the card. Dropping the
   border removes a frame-within-a-frame and lets the options carry the structure. */
.lmc-sheet .lmc-question {
    background: transparent; border: 0; border-radius: 0; padding: 0; margin: 0 0 20px;
}
.lmc-sheet .lmc-question legend, .lmc-sheet .lmc-question .qtext {
    font-size: clamp(18px, 2.2vw, 21px); line-height: 1.45; margin: 0 0 18px;
}
.lmc-sheet .lmc-nav { margin-top: 4px; }

@media (max-width: 720px) {
    .lmc-sheet { max-width: none; }
    .lmc-progress { margin-bottom: 14px; }
}


/* One question occupies little of a desktop screen, which left the site footer sitting directly
   beneath the options -- five columns of navigation competing with the thing being read. Holding
   the test to the height of the viewport puts the footer back where a footer belongs: below the
   fold, reached by scrolling, rather than offered alongside the question. */
#lmcTest, #lmcResult { min-height: calc(100vh - var(--lmc-header, 101px) - 24px); }
#lmcTest .lmc-test, #lmcResult .lmc-wrap { padding-top: 8px; padding-bottom: 48px; }

/* The score card sits in the same single column as the questions. */
#lmcResult .lmc-wrap { max-width: 680px; }

@media (max-width: 720px) {
    /* On a phone the question already fills the screen; forcing viewport height would only add
       dead space under the last option. */
    #lmcTest, #lmcResult { min-height: 0; }
}


/* ===== the report card =====
   A list, not a table: each row is a question with its outcome and its article, and it has to
   read the same on a phone. Right and wrong are carried by a mark and a border, never by colour
   alone -- the sheet has to survive a colour-blind reader. */
.lmc-rep { margin: 26px 0 0; }
.lmc-rep-title { font-size: 17px; font-weight: 700; color: var(--ink); margin: 0 0 12px; }
.lmc-rep-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }

.lmc-rep-item {
    background: var(--paper); border: 1px solid var(--line); border-left-width: 4px;
    border-radius: 11px; padding: 14px 16px;
}
.lmc-rep-item.is-right   { border-left-color: #2f6b4a; }
.lmc-rep-item.is-wrong   { border-left-color: #a4423f; }
.lmc-rep-item.is-skipped { border-left-color: #b8bfca; }

.lmc-rep-head { display: flex; gap: 10px; align-items: baseline; }
.lmc-rep-mark { font-weight: 700; font-size: 15px; flex: 0 0 auto; line-height: 1.5; }
.is-right   .lmc-rep-mark { color: #2f6b4a; }
.is-wrong   .lmc-rep-mark { color: #a4423f; }
.is-skipped .lmc-rep-mark { color: var(--ink-faint); }
.lmc-rep-n { flex: 0 0 auto; color: var(--ink-faint); font-size: 12.5px; font-weight: 700;
             line-height: 1.7; }
.lmc-rep-q { margin: 0; font-weight: 600; font-size: 15px; line-height: 1.45; color: var(--ink); }

.lmc-rep-a { margin: 8px 0 0 30px; font-size: 14.5px; line-height: 1.5; color: var(--ink-soft); }
.lmc-rep-a span { font-weight: 700; color: var(--ink-faint); font-size: 12px;
                  text-transform: uppercase; letter-spacing: .05em; margin-right: 6px; }
.lmc-rep-right { color: var(--ink); }
.is-right .lmc-rep-right span { color: #2f6b4a; }

.lmc-rep-src { margin: 9px 0 0 30px; font-size: 14px; }
.lmc-rep-src a { color: var(--navy); text-decoration: underline; text-underline-offset: 2px; }

@media (max-width: 720px) {
    .lmc-rep-a, .lmc-rep-src { margin-left: 0; }
}


/* Back is disabled on the first question. Without this it looks live and does nothing, which
   reads as a broken button rather than an unavailable one. */
.lmc-btn:disabled { opacity: .4; cursor: default; }
.lmc-btn:disabled:hover { border-color: var(--line); background: transparent; }


/* ===== reporting a question =====
   Quiet on purpose. Someone who thinks the question is wrong will look for this; nobody else
   should have their eye pulled to it while they are reading the explanation. */
.lmc-report-wrap { margin: 14px 0 0; }
.lmc-report-open {
    background: none; border: 0; padding: 0; font: inherit; font-size: 13px;
    color: var(--ink-faint); text-decoration: underline; text-underline-offset: 2px; cursor: pointer;
}
.lmc-report-open:hover { color: var(--ink); }

.lmc-report-box { border-top: 1px solid var(--line); margin-top: 12px; padding-top: 12px; }
.lmc-report-label { display: block; font-size: 13px; font-weight: 700; color: var(--ink); margin-bottom: 7px; }
.lmc-report-select, .lmc-report-note {
    width: 100%; font: inherit; font-size: 14px; padding: 9px 11px; border: 1px solid var(--line);
    border-radius: 9px; background: #fff; color: var(--ink); margin-bottom: 9px;
}
.lmc-report-note { resize: vertical; }
.lmc-report-actions { display: flex; gap: 8px; }
.lmc-report-actions .lmc-btn { padding: 8px 14px; font-size: 14px; }
.lmc-report-done { font-size: 13.5px; color: #2f6b4a; font-weight: 600; }
.lmc-report-fail { font-size: 13.5px; color: #a4423f; margin: 0 0 8px; }

.lmc-report-sublabel { font-weight: 600; color: var(--ink-faint); margin-top: 2px; }


/* Refresh with new questions. Deliberately quiet: it throws the current set away, so it should be
   findable when wanted and ignorable otherwise. */
.lmc-refresh-row { margin: 8px 0 0; text-align: right; }
.lmc-refresh {
    background: none; border: 0; padding: 0; font: inherit; font-size: 12.5px;
    color: var(--ink-faint); text-decoration: underline; text-underline-offset: 2px; cursor: pointer;
}
.lmc-refresh:hover { color: var(--navy); }


/* Back to the Academy, straight to the competency row (/academy 301s to /blog, and the row is
   the #competency-checks section there). Sits above the eyebrow, quiet but clickable. */
.lmc-back-row { margin: 0 0 10px; }
.lmc-back { font-size: 13.5px; color: var(--ink-faint); text-decoration: none; }
.lmc-back:hover { color: var(--navy); text-decoration: underline; text-underline-offset: 2px; }


/* The music hint. A suggestion, not a banner. */
.lmc-music-hint { font-size: 13.5px; color: var(--ink-faint); margin: 10px 0 0; }
.lmc-music-hint a { color: var(--accent, #8fb0e8); }
.lmc-hero .lmc-music-hint a { color: #cfe0f7; text-decoration: underline; text-underline-offset: 2px; }