/* mp-ui.css — THE BRAND SHELL (Phase 1).
 *
 * One place for Markpilot's design tokens and shared component styles, so an
 * aesthetic change propagates product-wide the way behaviour changes do
 * through the mp-*.js shells. Per-page hand-copied CSS is the root cause of
 * every visual drift caught in testing (the yellow explainer block, mismatched
 * intent cards, the two semester fields) — this file is the cure.
 *
 * MIGRATION PROTOCOL (extract, don't rewrite):
 *   Phase 1 (this file): tokens + components known to be consistent. Linked
 *     BEFORE each page's own <style>, so any page-local rule still wins —
 *     adding this file changes nothing visually, by construction.
 *   Phase 2: pages delete their duplicated blocks one at a time; each
 *     deletion is its own verifiable no-op against this file.
 *   Phase 3: new components land HERE first, never in a page.
 *
 * Reference for look-and-feel disputes: exam-mark's design language
 * (owner call, 2026-07-13). RULE: where exam-mark has an equivalent rule,
 * the shared version copies it VERBATIM (annotate the source); deviations
 * must be documented as deliberate evolutions, never silent drift.
 */

/* ---------- design tokens ---------- */
:root {
  --bg: #fafaf8;
  --card: #ffffff;
  --ink: #111111;
  --muted: #6b6b6b;
  --line: #e8e8e3;
  --accent: #2a6f4d;
  --accent-dark: #1f5238;
  --accent-ink: #ffffff;
  --warm: #c19a3a;
  --warm-soft: #faf3df;
  --soft: #f1efe9;
  --warn: #b34a2a;
  --serif: "Source Serif 4", Georgia, serif;
  --shadow: 0 1px 2px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.04);
  --shadow-lg: 0 4px 16px rgba(0,0,0,0.06), 0 18px 40px rgba(0,0,0,0.07); /* source: exam-mark :root (gold standard) */
  --radius: 14px;
}

/* ---------- status chips (the review key: agreed / decide / worth-a-look) ----------
 * provenance: NEW this session (no exam equivalent) — states, colours and the
 * self-demonstrating key specified and approved live by the owner, 2026-07-13. */
.qlc-status{font-size:11px;font-weight:700;letter-spacing:.02em;padding:3px 9px;border-radius:7px;white-space:nowrap;}
.qlc-status.agree{background:#eaf5ee;border:1px solid #bfdccb;color:#1f5238;}
.qlc-status.flag{background:#fdf1ec;border:1px solid #e5b8a6;color:#b34a2a;}
.qlc-status.note{background:var(--warm-soft,#faf3df);border:1px solid #e6d49a;color:#8a6d1e;}

/* ---------- empty-state hero ----------
 * source: exam-mark.html .empty-hero, verbatim geometry (padding 22px 0 10px).
 * Additive only: white-space:normal (needed when hosted inside a table cell). */
.empty-hero{text-align:center;padding:22px 0 10px;}
.empty-hero h2{font-family:var(--serif,Georgia,serif);font-size:22px;font-weight:600;margin:0 0 6px;color:var(--ink,#111);}
.empty-hero p{color:var(--muted,#6b6b6b);font-size:14px;margin:0 auto;max-width:60ch;line-height:1.5;white-space:normal;}

/* ---------- calm collapsible guidance ----------
 * provenance: DESCENDANT of exam-mark's .totals-help (same summary idiom +
 * muted sizes), extended with the disclosure arrow and a card-styled body to
 * host longer guidance. Not a verbatim copy — evolution, documented. */
.grid-help{margin-top:14px;}
.grid-help > summary{cursor:pointer;font-size:12.5px;color:var(--muted,#6b6b6b);list-style:none;}
.grid-help > summary::-webkit-details-marker{display:none;}
.grid-help > summary::before{content:"▸ ";}
.grid-help[open] > summary::before{content:"▾ ";}
.grid-help > summary:hover{color:var(--ink,#111);}
.grid-help > summary b{color:var(--ink,#111);}
.grid-help .gh-body{margin-top:8px;font-size:12.5px;color:var(--muted,#6b6b6b);line-height:1.6;background:var(--card,#fff);border:1px solid var(--line,#e8e8e3);border-radius:10px;padding:11px 14px;}
.grid-help .gh-body b{color:var(--ink,#111);}

/* ---------- buttons: the canonical set ----------
 * provenance: .btn family VERBATIM from exam-mark (byte-identical copy also
 * lived in mark.html — the two gold surfaces already agreed); :disabled from
 * mark.html (exam lacked one). .btnmini / .revbtn VERBATIM from the combined
 * Review surface (mark.html), owner-reviewed 2026-07-13. */
.btn{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:8px;border:1.5px solid transparent;background:var(--accent,#2a6f4d);color:#fff;font-weight:600;cursor:pointer;text-decoration:none;font-size:13px;font-family:inherit;}
.btn:hover{background:var(--accent-dark,#1f5238);text-decoration:none;}
.btn.secondary{background:#fff;color:var(--ink,#111);border-color:var(--line,#e8e8e3);}
.btn.secondary:hover{background:var(--soft,#f1efe9);border-color:var(--ink,#111);}
.btn:disabled{opacity:.45;cursor:not-allowed;pointer-events:none;}
.btn svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2;}
.btnmini{display:inline-flex;align-items:center;gap:5px;padding:6px 12px;border-radius:7px;border:1.5px solid var(--accent,#2a6f4d);background:var(--accent,#2a6f4d);color:#fff;font-weight:600;cursor:pointer;font-size:12.5px;font-family:inherit;}
.btnmini:hover{background:var(--accent-dark,#1f5238);}
.btnmini.ghost{background:#fff;color:var(--accent,#2a6f4d);border-color:var(--line,#e8e8e3);}
.btnmini.ghost:hover{border-color:var(--accent,#2a6f4d);}
.btnmini:disabled{opacity:.55;cursor:wait;}
.revbtn{font:inherit;font-size:12px;padding:5px 11px;border-radius:7px;border:1px solid var(--line,#e8e8e3);background:#fff;cursor:pointer;color:var(--ink,#111);}
.revbtn:hover{border-color:var(--ink,#111);}
.revbtn.primary{background:var(--accent,#2a6f4d);color:#fff;border-color:var(--accent,#2a6f4d);}
.revbtn.primary:hover{background:var(--accent-dark,#1f5238);}

/* ---------- wizard chrome (setup wizards' shared aesthetic) ----------
 * provenance: VERBATIM from the byte-identical twin blocks in exam-rubric.html
 * and markbook-setup.html (the two gold wizards; the segmented progress bar is
 * the /start idiom they both adopted). The step-VISIBILITY rules (.step /
 * .step.show / stepIn) are NOT here — they live in mp-wizard.js, coupled to
 * the behaviour, so pages using class="step" for other things are unaffected.
 * start.html keeps a wider local .progress margin (32px) — its rules win. */
.step-head{margin-bottom:14px;}
.step-head h1{font-family:var(--serif,Georgia,serif);font-weight:600;font-size:clamp(22px,3vw,27px);letter-spacing:-.01em;margin:0;line-height:1.2;}
.step-head .sub{color:var(--muted,#6b6b6b);font-size:13.5px;margin:5px 0 0;max-width:72ch;}
.step-head .sub-fine{color:var(--muted,#6b6b6b);opacity:.7;font-size:12px;margin:9px 0 0;}
.step-label{font-size:12px;color:var(--muted,#6b6b6b);letter-spacing:.04em;text-transform:uppercase;font-weight:600;margin-bottom:2px;}
.progress{display:flex;align-items:center;gap:8px;margin:12px 0 26px;}
.progress .seg{height:4px;flex:1;border-radius:999px;background:var(--line,#e8e8e3);overflow:hidden;position:relative;}
.progress .seg .fill{position:absolute;inset:0;width:0%;background:var(--accent,#2a6f4d);border-radius:999px;transition:width .45s cubic-bezier(.4,0,.2,1);}
.progress .seg.done .fill{width:100%;}
.progress .seg.active .fill{width:60%;}
.wiz-nav{position:sticky;bottom:0;background:linear-gradient(180deg,rgba(250,250,248,0) 0%,var(--bg,#fafaf8) 30%);display:flex;align-items:center;gap:12px;padding:16px 0 8px;margin-top:8px;}
.wiz-nav .summary{flex:1;font-size:13px;color:var(--muted,#6b6b6b);}
.wiz-nav .summary b{color:var(--ink,#111);}

/* ---------- key-status chip (the key lifecycle, target-end-state §3.1) ----------
 * provenance: NEW 2026-07-14, owner-approved flow. One visual language for
 * "this task's marking key" across all three streams (test = solutions,
 * rubric = the rubric, exam-rubric = band descriptors). Shown only once a key
 * exists — quiet absence, never a nag. Click-through goes to the stream's key
 * setup/review surface. */
.key-chip{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;padding:4px 11px;border-radius:999px;text-decoration:none;vertical-align:middle;}
.key-chip.ready{background:#eaf5ee;border:1px solid #bfdccb;color:#1f5238;}
.key-chip.attached{background:var(--warm-soft,#faf3df);border:1px solid #e6d49a;color:#8a6d1e;}
.key-chip:hover{text-decoration:none;filter:brightness(0.97);}

/* ---------- usage meter (credits bar — Anthropic-style) ----------
 * provenance: NEW 2026-07-15, owner-approved pricing model. Green under 75%,
 * amber 75-91% (upgrade nudge appears), red 92%+. */
.mp-meter{font-size:12.5px;color:var(--muted,#6b6b6b);max-width:340px;}
.mp-meter-row{display:flex;justify-content:space-between;align-items:baseline;gap:10px;}
.mp-meter-row b{color:var(--ink,#111);}
.mp-meter-row.sub{margin-top:3px;font-size:11.5px;}
.mp-meter-row.sub a{color:var(--accent,#2a6f4d);font-weight:600;text-decoration:none;}
.mp-meter-bar{height:6px;border-radius:999px;background:var(--soft,#f1efe9);overflow:hidden;margin-top:5px;}
.mp-meter-bar i{display:block;height:100%;border-radius:999px;background:var(--accent,#2a6f4d);transition:width .3s;}
.mp-meter.warm .mp-meter-bar i{background:var(--warm,#c19a3a);}
.mp-meter.hot .mp-meter-bar i{background:var(--warn,#b34a2a);}
.mp-meter-un{font-weight:700;color:var(--accent-dark,#1f5238);}

/* ---------- THE REVIEW CARD (the combined Review surface's anatomy) ----------
 * provenance: extracted VERBATIM from mark.html 2026-07-15 (Phase 2 of the
 * migration protocol — mark.html deleted its copy the same commit; a byte-
 * identical no-op there by construction). This is the ONE card anatomy every
 * stream's review surface draws: evidence LEFT (the student's actual work),
 * analysis + mark + actions RIGHT. Exam adopts it for its by-student pivot;
 * rubric's criterion cards follow (parity ledger). */
.ql-card{background:var(--card,#fff);border:1.5px solid var(--line,#e8e8e3);border-radius:12px;padding:12px 14px;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:14px;align-items:start;}
@media(max-width:860px){.ql-card{grid-template-columns:1fr;}}
.ql-card.st-agree{border-left:3px solid #2a6f4d;}
.ql-card.st-flag{border-left:3px solid #b34a2a;}
.ql-card.st-note{border-left:3px solid #c19a3a;}
.ql-card.st-pending{border-style:dashed;opacity:.85;}
.ql-legend{display:flex;align-items:center;gap:10px;font-size:11.5px;color:var(--muted,#6b6b6b);flex-wrap:wrap;}
.ql-legend b{font-size:11px;text-transform:uppercase;letter-spacing:.04em;}
.qlc-r{display:flex;flex-direction:column;gap:8px;min-width:0;}
.qlc-h{display:flex;align-items:center;justify-content:space-between;gap:10px;}
.qlc-h .sp{flex:1;}
.qlc-name{font:inherit;font-weight:600;font-size:14px;background:none;border:0;color:var(--ink,#111);cursor:pointer;padding:0;text-align:left;}
.qlc-name:hover{color:var(--accent,#2a6f4d);text-decoration:underline;}
.qlc-mark{display:flex;align-items:center;gap:4px;}
.qlc-mark input{width:52px;font:inherit;font-size:14px;font-weight:600;text-align:center;padding:4px;border:1.5px solid var(--line,#e8e8e3);border-radius:7px;}
.qlc-mark i{font-style:normal;color:var(--muted,#6b6b6b);font-size:12.5px;}
.qlc-mark select{padding:5px 8px;border:1px solid var(--line,#e8e8e3);border-radius:6px;font:inherit;font-size:13.5px;font-weight:600;background:#fff;color:var(--ink,#111);}
.qlc-img{min-height:70px;max-height:460px;overflow:auto;border:1px solid var(--line,#e8e8e3);border-radius:8px;background:#fff;}
/* Never upscale a small crop (it just blurs) — small answers render at
   natural size, page-sized fallbacks still fill the card width. */
.qlc-img img{max-width:100%;width:auto;display:block;margin:0 auto;}
.qlc-imgnote{font-size:11px;color:var(--muted,#6b6b6b);padding:4px 8px;}
.qlc-empty{padding:16px 12px;font-size:12.5px;color:var(--muted,#6b6b6b);text-align:center;}
.qlc-work{font-size:12.5px;color:var(--ink,#111);line-height:1.45;}
.qlc-misc{font-size:12.5px;color:#8a6d1e;background:var(--warm-soft,#faf3df);border-radius:8px;padding:6px 10px;line-height:1.45;}
.qlc-lineball{font-size:12px;color:#7a5a18;background:#fbf5e6;border:1px solid #e6d49a;border-radius:7px;padding:5px 9px;margin-top:6px;}
.qlc-verdict{font-size:12.5px;line-height:1.5;border-radius:8px;padding:8px 10px;background:#fdf4f1;border:1px solid #ecc9bb;}
.qlc-verdict.higher{background:#f2f8f4;border-color:#cfe3d6;}
.qlc-verdict.done{background:var(--soft,#f1efe9);border-color:var(--line,#e8e8e3);color:var(--muted,#6b6b6b);}
.qlc-vact{display:inline-flex;gap:6px;margin-left:8px;}
.qlc-qtitle{font-size:14px;font-weight:600;}
.qlc-qtitle i{font-style:normal;color:var(--muted,#6b6b6b);font-weight:500;font-size:12px;}
.qlc-qtext{font-size:12px;color:var(--muted,#6b6b6b);line-height:1.45;}
.qlc-status.live{background:#f4faf6;border:1px solid #cfe0d6;color:var(--accent-dark,#1f5238);display:inline-flex;align-items:center;gap:4px;}
.qlc-status.live .mp-spin{width:9px;height:9px;}

/* ---------- shared spinner ---------- */
.mp-spin{display:inline-block;width:12px;height:12px;border:2px solid #cfd8d2;border-top-color:var(--accent,#2a6f4d);border-radius:50%;animation:mpspin .7s linear infinite;vertical-align:-1px;}
@keyframes mpspin{to{transform:rotate(360deg);}}