/* ==========================================================================
   mf-admin.css — Mind Freeze admin design system
   --------------------------------------------------------------------------
   Built 2026-08-20. Extends the token block already proven in mf-cockpit.css
   rather than inventing a second design language.

   WHY THE ADMIN IS LIGHT AND THE APP IS DARK
   The guest app is Freeze Blue edge to edge because a guest looks at it for
   twenty seconds at a time in a dim room. The admin is a data-dense back
   office Ron sits in for an hour building a show. Navy-on-white reads better
   for that, holds a table of 200 questions without vibrating, and prints.
   Same palette, inverted surface. It is the same product, not the same job.

   REPLACES, once every screen has migrated:
     classic.css · style.css · responsive.css · your-style.css · all.css
   Bootstrap 4.6.2 stays for its grid and modal plumbing. Everything visual
   below overrides it.
   ========================================================================== */

/* ---------- 1. Tokens ---------------------------------------------------- */

:root {
  /* Brand — identical values to mf-cockpit.css and the two apps. */
  --mf-blue:   #2943EC;   /* Freeze Blue — primary action, active nav       */
  --mf-cyan:   #5CC0E8;   /* Brain Cyan  — accent, focus, live indicators   */
  --mf-ink:    #0A1038;   /* Deep Navy   — all body text                    */
  --mf-alarm:  #E23B2E;   /* destructive only. Never decorative.            */
  --mf-good:   #0E7A3C;
  --mf-warn:   #B4690E;

  /* Surfaces */
  --mf-page:   #F4F7FD;
  --mf-card:   #FFFFFF;
  --mf-line:   #DDE4F2;
  --mf-line-2: #EDF1F9;

  /* Ink scale */
  --mf-ink-1:  #0A1038;              /* headings, primary text  */
  --mf-ink-2:  #4A5478;              /* secondary text          */
  --mf-ink-3:  #7A83A0;              /* meta, placeholders      */

  /* Tints — used for row hover, selected states, subtle fills */
  --mf-blue-5:  rgba(41, 67, 236, 0.05);
  --mf-blue-10: rgba(41, 67, 236, 0.10);
  --mf-blue-20: rgba(41, 67, 236, 0.20);
  --mf-cyan-15: rgba(92, 192, 232, 0.15);
  --mf-alarm-8: rgba(226, 59, 46, 0.08);

  /* Type */
  --mf-disp: "Archivo Black", "Arial Black", Impact, sans-serif;
  --mf-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
             "Helvetica Neue", Arial, sans-serif;

  /* Metrics — one scale, so nothing is "about 12px" */
  --mf-r:    10px;   /* card / input radius            */
  --mf-r-sm:  7px;
  --mf-r-pill: 999px;
  --mf-gap:  16px;
  --mf-pad:  20px;
  --mf-tap:  44px;   /* minimum interactive height     */
  --mf-rail: 264px;  /* sidebar width                  */
  --mf-topbar: 60px;

  --mf-shadow:    0 1px 2px rgba(10, 16, 56, .06), 0 4px 14px rgba(10, 16, 56, .05);
  --mf-shadow-lg: 0 8px 40px rgba(10, 16, 56, .16);
}

/* ---------- 2. Base ------------------------------------------------------ */

.mf-admin, .mf-admin * { box-sizing: border-box; }

.mf-admin {
  margin: 0;
  background: var(--mf-page);
  color: var(--mf-ink-1);
  font-family: var(--mf-body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.mf-admin h1, .mf-admin h2, .mf-admin h3 {
  font-family: var(--mf-disp);
  color: var(--mf-ink-1);
  letter-spacing: -0.01em;
  margin: 0;
}
.mf-admin h1 { font-size: 28px; }
.mf-admin h2 { font-size: 21px; }
.mf-admin h3 { font-size: 17px; }

/* SPECIFICITY. Read this before touching it.
   ---------------------------------------------------------------------------
   This rule is `.mf-admin a` — one class plus one element — which outranks a
   bare `.mf-btn-primary`. Any button rendered as an <a> therefore inherited
   THIS colour instead of its own, and a primary button came out blue text on
   a blue background: invisible. It appeared on hover only because
   `.mf-btn-primary:hover` carries an extra pseudo-class and finally wins.

   Two defences, because one is not enough:
     1. Links that are really controls are excluded below.
     2. Every component colour rule is prefixed with `.mf-admin`, so it ties
        or beats this rule regardless.                                        */
.mf-admin a { color: var(--mf-blue); text-decoration: none; }
.mf-admin a:hover { text-decoration: underline; }
.mf-admin a.mf-btn, .mf-admin a.mf-icon-btn, .mf-admin a.mf-nav-item,
.mf-admin a.mf-nav-cat, .mf-admin a.mf-brand, .mf-admin a.mf-show-hit,
.mf-admin a.mf-tab { text-decoration: none; }
.mf-admin a.mf-btn:hover, .mf-admin a.mf-icon-btn:hover,
.mf-admin a.mf-nav-item:hover, .mf-admin a.mf-nav-cat:hover,
.mf-admin a.mf-brand:hover, .mf-admin a.mf-show-hit:hover,
.mf-admin a.mf-tab:hover { text-decoration: none; }

/* Focus is never removed — only restyled. The old admin killed outlines
   outright, which makes the whole thing unusable from a keyboard. */
.mf-admin :focus-visible {
  outline: 2px solid var(--mf-cyan);
  outline-offset: 2px;
  border-radius: var(--mf-r-sm);
}

/* ---------- 3. Shell ----------------------------------------------------- */

.mf-shell { display: flex; min-height: 100vh; }

/* SCOPED TO .mf-admin ON PURPOSE.
   mf-cockpit.css also defines .mf-rail — the horizontal strip of progress
   pills inside the live console that shows where you are in the show.
   Unscoped, the rules below turned that strip into a 264px, full-height,
   dark navy column down the middle of the console. The two stylesheets set
   DIFFERENT properties, so they did not override each other, they combined:
   the cockpit's display:flex plus my width, height and background.
   The console body deliberately does not carry .mf-admin — that is exactly
   what makes scoping the fix. */
.mf-admin .mf-rail {
  width: var(--mf-rail);
  flex: 0 0 var(--mf-rail);
  background: var(--mf-ink-1);
  color: #fff;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

.mf-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 18px var(--mf-pad);
  border-bottom: 1px solid rgba(255, 255, 255, .10);
}
.mf-brand img { width: 30px; height: 30px; border-radius: 7px; }
.mf-admin .mf-brand span {
  font-family: var(--mf-disp);
  font-size: 17px;
  letter-spacing: .02em;
  color: #fff;
}

.mf-main {
  flex: 1 1 auto;
  min-width: 0;               /* lets wide tables scroll instead of pushing */
  display: flex;
  flex-direction: column;
}

.mf-topbar {
  height: var(--mf-topbar);
  flex: 0 0 var(--mf-topbar);
  background: var(--mf-card);
  border-bottom: 1px solid var(--mf-line);
  display: flex;
  align-items: center;
  gap: var(--mf-gap);
  padding: 0 var(--mf-pad);
  position: sticky;
  top: 0;
  z-index: 20;
}
.mf-topbar .mf-crumbs { color: var(--mf-ink-3); font-size: 14.5px; }
.mf-topbar .mf-crumbs b { color: var(--mf-ink-1); font-weight: 600; }
.mf-topbar .mf-spacer { flex: 1 1 auto; }

.mf-content { padding: var(--mf-pad); }

/* ---------- 4. Navigation ------------------------------------------------ */
/*
   Three stage groups, because the workflow has three stages. The group label
   is not decoration — it is the thing that teaches the pipeline.
*/

.mf-nav { padding: 10px 0 24px; }

.mf-nav-group {
  padding: 16px var(--mf-pad) 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .40);
}

.mf-admin .mf-nav-item {
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: var(--mf-tap);
  padding: 0 var(--mf-pad);
  color: rgba(255, 255, 255, .78);
  font-size: 15px;
  font-weight: 500;
  border-left: 3px solid transparent;
  transition: background .12s, color .12s;
}
.mf-admin .mf-nav-item:hover {
  background: rgba(255, 255, 255, .06);
  color: #fff;
  text-decoration: none;
}
.mf-admin .mf-nav-item.is-active {
  background: rgba(255, 255, 255, .10);
  border-left-color: var(--mf-cyan);
  color: #fff;
  font-weight: 600;
}
.mf-nav-item svg,
.mf-nav-item i { width: 17px; text-align: center; opacity: .85; flex: 0 0 17px; }
.mf-nav-item.is-active svg,
.mf-nav-item.is-active i { opacity: 1; color: var(--mf-cyan); }

/* A live show pulses in the rail so it is never possible to forget one is
   running — the single most expensive thing to forget in this product. */
.mf-live-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--mf-cyan);
  margin-left: auto;
  animation: mf-pulse 1.6s ease-in-out infinite;
}
@keyframes mf-pulse { 0%,100% { opacity: 1 } 50% { opacity: .25 } }

/* ---------- 5. Cards ----------------------------------------------------- */

.mf-card {
  background: var(--mf-card);
  border: 1px solid var(--mf-line);
  border-radius: var(--mf-r);
  box-shadow: var(--mf-shadow);
}
.mf-card-head {
  display: flex;
  align-items: center;
  gap: var(--mf-gap);
  padding: 14px var(--mf-pad);
  border-bottom: 1px solid var(--mf-line-2);
}
.mf-card-head .mf-spacer { flex: 1 1 auto; }
.mf-card-body { padding: var(--mf-pad); }

.mf-page-head {
  display: flex;
  align-items: flex-end;
  gap: var(--mf-gap);
  margin-bottom: var(--mf-pad);
}
.mf-page-head .mf-spacer { flex: 1 1 auto; }
.mf-page-head p { margin: 4px 0 0; color: var(--mf-ink-2); font-size: 14.5px; }

/* ---------- 6. Buttons --------------------------------------------------- */

.mf-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: var(--mf-tap);
  padding: 0 16px;
  border: 1px solid transparent;
  border-radius: var(--mf-r-sm);
  font-family: var(--mf-body);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background .12s, border-color .12s, color .12s;
}
.mf-btn:hover { text-decoration: none; }
.mf-btn:disabled, .mf-btn.is-disabled { opacity: .45; pointer-events: none; }

.mf-btn-primary   { background: var(--mf-blue); color: #fff; }
.mf-admin .mf-btn-primary:hover { background: #1E36CE; color: #fff; }

.mf-admin .mf-btn-secondary { background: #fff; color: var(--mf-ink-1); border-color: var(--mf-line); }
.mf-admin .mf-btn-secondary:hover { background: var(--mf-page); color: var(--mf-ink-1); }

.mf-btn-ghost     { background: transparent; color: var(--mf-ink-2); }
.mf-admin .mf-btn-ghost:hover { background: var(--mf-blue-5); color: var(--mf-ink-1); }

/* Destructive is ALWAYS visually distinct and ALWAYS confirms. There is no
   quiet delete anywhere in this system. */
.mf-btn-danger    { background: #fff; color: var(--mf-alarm); border-color: rgba(226,59,46,.35); }
.mf-admin .mf-btn-danger:hover { background: var(--mf-alarm-8); color: var(--mf-alarm); }
.mf-admin .mf-btn-danger-solid { background: var(--mf-alarm); color: #fff; }
.mf-admin .mf-btn-danger-solid:hover { background: #C4291D; color: #fff; }

.mf-btn-sm { min-height: 32px; padding: 0 11px; font-size: 14px; }

/* Icon-only row actions. 40px tap target even though the glyph is 16px —
   these sit in dense tables and were previously ~18px hit areas. */
.mf-admin .mf-icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--mf-tap); height: var(--mf-tap);
  border: 0; background: transparent; cursor: pointer;
  border-radius: var(--mf-r-sm); color: var(--mf-ink-3);
}
.mf-admin .mf-icon-btn:hover { background: var(--mf-blue-5); color: var(--mf-ink-1); }
.mf-admin .mf-icon-btn.is-danger:hover { background: var(--mf-alarm-8); color: var(--mf-alarm); }

/* ---------- 7. Forms ----------------------------------------------------- */

.mf-field { margin-bottom: var(--mf-gap); }
.mf-label {
  display: block;
  margin-bottom: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--mf-ink-2);
}
.mf-label .mf-req { color: var(--mf-alarm); margin-left: 2px; }

.mf-input, .mf-select, .mf-textarea {
  width: 100%;
  min-height: var(--mf-tap);
  padding: 9px 12px;
  background: #fff;
  border: 1px solid var(--mf-line);
  border-radius: var(--mf-r-sm);
  color: var(--mf-ink-1);
  font-family: var(--mf-body);
  font-size: 16px;
}
.mf-input::placeholder, .mf-textarea::placeholder { color: var(--mf-ink-3); }
.mf-input:focus, .mf-select:focus, .mf-textarea:focus {
  border-color: var(--mf-blue);
  box-shadow: 0 0 0 3px var(--mf-blue-10);
  outline: none;
}
.mf-textarea { min-height: 96px; resize: vertical; }
.mf-hint  { margin-top: 5px; font-size: 13.5px; color: var(--mf-ink-3); }
.mf-error { margin-top: 5px; font-size: 13.5px; color: var(--mf-alarm); font-weight: 600; }
.mf-input.is-error { border-color: var(--mf-alarm); }

/* ---------- 8. Tables ---------------------------------------------------- */

.mf-table-wrap { overflow-x: auto; }
.mf-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.mf-table th {
  text-align: left;
  padding: 11px var(--mf-gap);
  background: var(--mf-page);
  border-bottom: 1px solid var(--mf-line);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--mf-ink-3);
  white-space: nowrap;
}
.mf-table td {
  padding: 11px var(--mf-gap);
  border-bottom: 1px solid var(--mf-line-2);
  vertical-align: middle;
  color: var(--mf-ink-1);
}
.mf-table tbody tr:hover { background: var(--mf-blue-5); }
.mf-table tbody tr:last-child td { border-bottom: 0; }
.mf-table .mf-row-actions { text-align: right; white-space: nowrap; }

/* ---------- 9. Badges ---------------------------------------------------- */

.mf-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px;
  border-radius: var(--mf-r-pill);
  font-size: 13px; font-weight: 700;
  letter-spacing: .02em;
}
.mf-badge-blue  { background: var(--mf-blue-10);  color: var(--mf-blue); }
.mf-badge-cyan  { background: var(--mf-cyan-15);  color: #1B7FA8; }
.mf-badge-good  { background: rgba(14,122,60,.10); color: var(--mf-good); }
.mf-badge-warn  { background: rgba(180,105,14,.12); color: var(--mf-warn); }
.mf-badge-alarm { background: var(--mf-alarm-8);  color: var(--mf-alarm); }
.mf-badge-grey  { background: var(--mf-line-2);   color: var(--mf-ink-2); }

/* ---------- 10. Empty states --------------------------------------------- */
/*
   These are load-bearing, not filler. An empty question bank that says
   "No questions in Pop Culture yet — Add the first one" teaches the pipeline
   at the exact moment the user needs to know it. Today, empty is just blank,
   which is why the workflow had to be memorised.
*/

.mf-empty { padding: 52px 24px; text-align: center; }
.mf-empty-icon {
  width: 46px; height: 46px; margin: 0 auto 14px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--mf-blue-5);
  color: var(--mf-blue);
  font-size: 23px;
}
.mf-empty h3 { margin-bottom: 6px; }
.mf-empty p  { max-width: 380px; margin: 0 auto 18px; color: var(--mf-ink-2); font-size: 15px; }

/* ---------- 11. Modals & confirms ---------------------------------------- */

.mf-modal-backdrop {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(10, 16, 56, .45);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
/* PATCH 141 — the modal was capped at 90vh and its content ignored the cap.
   A flex item defaults to min-height:auto, which means it REFUSES to shrink
   below its own content. So .mf-modal-body never got shorter than the form
   inside it, overflow-y:auto had nothing to scroll, and the footer — Cancel,
   Save & add another, Save & close — was pushed clean off the bottom of the
   screen. On a laptop you could fill in Add Question and then had no way to
   save it. Reported on Question Bank; it was true of all ten modals. */
.mf-modal {
  width: 100%; max-width: 520px;
  background: #fff;
  border-radius: var(--mf-r);
  box-shadow: var(--mf-shadow-lg);
  max-height: 90vh; display: flex; flex-direction: column;
  overflow: hidden;
}
.mf-modal-lg { max-width: 860px; }

/* PATCH 142 — THE FORM IS THE FLEX ITEM, NOT THE BODY.
   Patch 141 put min-height:0 and flex on .mf-modal-body and changed nothing,
   because every modal in this admin is built like this:

       .mf-modal            flex column, capped at 90vh
         .mf-modal-head
         <form>             <- unstyled, display:block, min-height:auto
           .mf-modal-body
           .mf-modal-foot

   The form is what .mf-modal lays out. It is a block box that will not
   shrink below its content, so it stood at 1064px inside a 946px modal and
   pushed the footer 151px below the bottom of the screen. The flex rules on
   .mf-modal-body were inert the whole time — its parent was not a flex
   container.

   Measured on staging before and after this rule:
       without   form 1064px, body does not scroll, footer bottom 1202
       with      form  862px, body scrolls,         footer bottom  999 */
.mf-modal > form {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}
.mf-modal-head {
  padding: var(--mf-pad); border-bottom: 1px solid var(--mf-line-2);
  display: flex; align-items: center; gap: var(--mf-gap);
  flex: 0 0 auto;
}
/* PATCH 141 — flex:1 1 auto + min-height:0. Without min-height:0 this cannot
   shrink below its content and the scrollbar never appears. */
.mf-modal-body {
  padding: var(--mf-pad);
  overflow-y: auto;
  flex: 1 1 auto;
  min-height: 0;
  overscroll-behavior: contain;
}
.mf-modal-foot {
  flex: 0 0 auto;
  padding: 14px var(--mf-pad);
  border-top: 1px solid var(--mf-line-2);
  display: flex; justify-content: flex-end; gap: 10px;
  background: var(--mf-page);
  border-radius: 0 0 var(--mf-r) var(--mf-r);
}

/* The destructive confirm names what dies AND what survives. "Delete this?"
   is not enough information to answer safely. */
.mf-confirm-what {
  margin: 12px 0;
  padding: 12px 14px;
  background: var(--mf-alarm-8);
  border: 1px solid rgba(226,59,46,.20);
  border-radius: var(--mf-r-sm);
  font-size: 15px;
}
.mf-confirm-what b { color: var(--mf-alarm); }
.mf-confirm-safe { margin-top: 8px; font-size: 14px; color: var(--mf-ink-2); }

/* ---------- 12. Toasts --------------------------------------------------- */

.mf-toasts {
  position: fixed; right: 20px; bottom: 20px; z-index: 1100;
  display: flex; flex-direction: column; gap: 10px;
}
.mf-toast {
  min-width: 280px; max-width: 420px;
  padding: 13px 16px;
  background: var(--mf-ink-1);
  color: #fff;
  border-radius: var(--mf-r-sm);
  box-shadow: var(--mf-shadow-lg);
  font-size: 15px;
  border-left: 3px solid var(--mf-cyan);
}
.mf-toast.is-good  { border-left-color: #3FD37E; }
.mf-toast.is-alarm { border-left-color: var(--mf-alarm); }

/* ---------- 13. Utilities ------------------------------------------------ */

.mf-stack   { display: flex; flex-direction: column; gap: var(--mf-gap); }
.mf-row     { display: flex; align-items: center; gap: var(--mf-gap); }
.mf-spacer  { flex: 1 1 auto; }
.mf-muted   { color: var(--mf-ink-2); }
.mf-faint   { color: var(--mf-ink-3); }
.mf-mono    { font-variant-numeric: tabular-nums; }
.mf-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mf-grid    { display: grid; gap: var(--mf-gap); }
.mf-grid-3  { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }

/* ---------- 14. Responsive ----------------------------------------------- */
/*
   Ron runs shows from a laptop, but reviews results from a phone often enough
   that a rail collapsing over the content is worth the twelve lines.
*/

@media (max-width: 900px) {
  .mf-admin .mf-rail {
    position: fixed; left: 0; top: 0; z-index: 50;
    transform: translateX(-100%);
    transition: transform .18s ease;
  }
  .mf-admin .mf-shell.is-rail-open .mf-rail { transform: translateX(0); }
  .mf-shell.is-rail-open::after {
    content: ""; position: fixed; inset: 0; z-index: 40;
    background: rgba(10,16,56,.4);
  }
  .mf-admin .mf-rail-toggle { display: inline-flex !important; }
  .mf-content { padding: var(--mf-gap); }
}
.mf-admin .mf-rail-toggle { display: none; }

/* ---------- 15. Print ---------------------------------------------------- */
/* Results get printed and handed to venues. Make that not look broken. */

@media print {
  .mf-admin .mf-rail, .mf-admin .mf-topbar, .mf-admin .mf-btn,
  .mf-admin .mf-icon-btn, .mf-admin .mf-toasts { display: none !important; }
  .mf-admin { background: #fff; }
  .mf-card  { border: 1px solid #ccc; box-shadow: none; }
  .mf-content { padding: 0; }
}


/* ==========================================================================
   16. OVERRIDES — specificity, and a type scale you can turn up
   --------------------------------------------------------------------------
   SPECIFICITY (do not remove)

   `.mf-admin a` is one class plus one element (0,1,1). A bare
   `.mf-btn-primary` is one class (0,1,0), so the anchor rule wins and every
   <a> button took the LINK colour — blue text on a blue background,
   invisible until :hover added enough specificity to win. An earlier fix
   tried to rewrite those rules in place by matching `".mf-btn-primary {"`;
   the file contains `".mf-btn-primary   {"` with three spaces, so it missed
   and reproduced the bug exactly. Hence: an explicit block, last in the
   file, at (0,2,0) or better. Formatting-proof and order-proof.

   THE SCALE

   Every size below is derived from ONE number: --mf-fs. Ron asked for text
   "at least 3x" more visible. Taken literally that is ~50px body text, which
   makes a row of a data table an inch tall and puts four questions on a
   screen — so instead the default jumps hard (14px originally -> 21px, a
   50% increase) and the remaining judgement is handed over: the A- / A+
   control in the top bar sets --mf-fs between 17 and 34px and remembers it.

   That is the better answer anyway. What reads well depends on the monitor
   and the eyes, this is Ron's platform, and a Host on a laptop may want
   something different from Ron on a desk display.
   ========================================================================== */

/* 21px. Ron tried 27, then came back: at 27 the status pills on a show card
   wrap, and 21 is legible without doing that. Fit beat size.

   The number that matters is that the CSS and the JavaScript agree. They did
   not before — 20 here, 21 in shell_end — so the first press of A+ on a fresh
   browser stepped from the wrong starting point. One number, both files. */
:root { --mf-fs: 21px; }

.mf-admin a.mf-btn, .mf-admin a.mf-icon-btn, .mf-admin a.mf-nav-item,
.mf-admin a.mf-nav-cat, .mf-admin a.mf-brand, .mf-admin a.mf-show-hit,
.mf-admin a.mf-tab { text-decoration: none; }

.mf-admin .mf-btn-primary,      .mf-admin a.mf-btn-primary        { background: var(--mf-blue); color: #fff; }
.mf-admin .mf-btn-primary:hover,.mf-admin a.mf-btn-primary:hover  { background: #1E36CE; color: #fff; }
.mf-admin .mf-btn-secondary,    .mf-admin a.mf-btn-secondary      { background: #fff; color: var(--mf-ink-1); border-color: var(--mf-line); }
.mf-admin .mf-btn-secondary:hover,.mf-admin a.mf-btn-secondary:hover { background: var(--mf-page); color: var(--mf-ink-1); }
.mf-admin .mf-btn-ghost,        .mf-admin a.mf-btn-ghost          { background: transparent; color: var(--mf-ink-2); }
.mf-admin .mf-btn-ghost:hover,  .mf-admin a.mf-btn-ghost:hover    { background: var(--mf-blue-5); color: var(--mf-ink-1); }
.mf-admin .mf-btn-danger,       .mf-admin a.mf-btn-danger         { background: #fff; color: var(--mf-alarm); border-color: rgba(226,59,46,.35); }
.mf-admin .mf-btn-danger-solid, .mf-admin a.mf-btn-danger-solid   { background: var(--mf-alarm); color: #fff; }
.mf-admin .mf-icon-btn,         .mf-admin a.mf-icon-btn           { color: var(--mf-ink-3); }
.mf-admin .mf-icon-btn:hover,   .mf-admin a.mf-icon-btn:hover     { background: var(--mf-blue-5); color: var(--mf-ink-1); }
.mf-admin .mf-icon-btn.is-danger:hover                            { background: var(--mf-alarm-8); color: var(--mf-alarm); }

/* ---- everything sized off --mf-fs -------------------------------------- */

.mf-admin                        { font-size: var(--mf-fs); line-height: 1.5; }
.mf-admin .mf-btn                { font-size: calc(var(--mf-fs) * .90); min-height: calc(var(--mf-fs) * 2.3); padding: 0 calc(var(--mf-fs) * .9); }
.mf-admin .mf-btn-sm             { font-size: calc(var(--mf-fs) * .82); min-height: calc(var(--mf-fs) * 1.9); padding: 0 calc(var(--mf-fs) * .7); }
.mf-admin .mf-icon-btn           { width: calc(var(--mf-fs) * 2.1); height: calc(var(--mf-fs) * 2.1); font-size: calc(var(--mf-fs) * .9); }
.mf-admin .mf-table              { font-size: calc(var(--mf-fs) * .92); }
.mf-admin .mf-table th           { font-size: calc(var(--mf-fs) * .68); }
.mf-admin .mf-table td,
.mf-admin .mf-table th           { padding: calc(var(--mf-fs) * .62) calc(var(--mf-fs) * .8); }
.mf-admin .mf-label              { font-size: calc(var(--mf-fs) * .80); }
.mf-admin .mf-hint               { font-size: calc(var(--mf-fs) * .76); }
.mf-admin .mf-error              { font-size: calc(var(--mf-fs) * .78); }
.mf-admin .mf-input,
.mf-admin .mf-select,
.mf-admin .mf-textarea           { font-size: calc(var(--mf-fs) * .92); min-height: calc(var(--mf-fs) * 2.3); }
.mf-admin .mf-badge              { font-size: calc(var(--mf-fs) * .70); padding: .28em .7em; }
.mf-admin .mf-crumbs             { font-size: calc(var(--mf-fs) * .84); }
.mf-admin .mf-empty p            { font-size: calc(var(--mf-fs) * .90); max-width: 46ch; }
.mf-admin .mf-toast              { font-size: calc(var(--mf-fs) * .88); }
.mf-admin .mf-page-head p        { font-size: calc(var(--mf-fs) * .82); }

/* The sidebar — the specific and repeated complaint. */
.mf-admin .mf-rail               { width: calc(var(--mf-fs) * 14); flex-basis: calc(var(--mf-fs) * 14); }
.mf-admin .mf-nav-item           { font-size: calc(var(--mf-fs) * .92); min-height: calc(var(--mf-fs) * 2.6); }
.mf-admin .mf-nav-item.is-active { font-weight: 700; }
.mf-admin .mf-nav-group          { font-size: calc(var(--mf-fs) * .64); letter-spacing: .11em; }
.mf-admin .mf-brand span         { font-size: calc(var(--mf-fs) * .90); }
.mf-admin .mf-nav-cat            { font-size: calc(var(--mf-fs) * .88); min-height: calc(var(--mf-fs) * 2.3); }
.mf-admin .mf-topbar             { height: calc(var(--mf-fs) * 3.2); flex-basis: calc(var(--mf-fs) * 3.2); }

.mf-admin h1 { font-size: calc(var(--mf-fs) * 1.72); }
.mf-admin h2 { font-size: calc(var(--mf-fs) * 1.18); }
.mf-admin h3 { font-size: calc(var(--mf-fs) * 1.00); }

/* The A- / A+ control itself. */
.mf-admin .mf-fs-ctl { display: flex; align-items: center; gap: 2px; margin-right: 6px; }
.mf-admin .mf-fs-ctl button {
  width: 34px; height: 34px; border: 1px solid var(--mf-line); background: #fff;
  border-radius: var(--mf-r-sm); cursor: pointer; color: var(--mf-ink-2);
  font-weight: 700; line-height: 1; padding: 0;
}
.mf-admin .mf-fs-ctl button:hover { background: var(--mf-page); color: var(--mf-ink-1); }
.mf-admin .mf-fs-ctl .mf-fs-a { font-size: 12px; }
.mf-admin .mf-fs-ctl .mf-fs-b { font-size: 17px; }

/* ===== PATCH 147 + 149 ===================================================
   1. Base text size 17px, set on the token so nav / groups / brand, which
      are calc()'d off --mf-fs, scale with it.
   2. Rail collapses to ZERO width. State in localStorage.

   PATCH 149 CORRECTION. 147 added a floating toggle that landed on the page
   title; 148 moved it and it landed on the content. Both were wrong. The
   topbar already has a .mf-rail-toggle button sitting in the flex flow
   before .mf-crumbs — hidden on desktop by line ~554. Revealing that one
   means the control cannot overlap anything, because it takes real space.
   ========================================================================= */
.mf-admin { --mf-fs: 17px; }
.mf-admin .mf-content { font-size: var(--mf-fs); }

/* Desktop: show the topbar toggle. Below 900px the earlier media query
   already reveals it for the slide-over drawer. */
@media (min-width: 901px) {
  .mf-admin .mf-rail-toggle { display: inline-flex; }
}

.mf-shell .mf-rail { transition: width .16s ease, opacity .12s ease; }
.mf-shell.is-rail-collapsed .mf-rail {
  width: 0 !important; min-width: 0 !important; flex-basis: 0 !important;
  padding-left: 0 !important; padding-right: 0 !important;
  border-right-width: 0 !important;
  opacity: 0; overflow: hidden; pointer-events: none;
}

/* ===== PATCH 151 — thumbnails sized in the head, not at the end ==========
   .mf-thumb / .mf-thumb-box / .mf-thumb-link existed ONLY inside
   @push('mf-scripts'), which Blade renders at shell_end line 212 — the
   bottom of the document. The Question Bank therefore painted thumbnails
   at natural size for one frame, then the late <style> clamped them to
   46px. That was the jump.

   Same declarations, hoisted into the stylesheet that loads in <head>.
   The inline copies in questions.blade.php and editor.blade.php are left
   in place deliberately: they re-apply identically, and editing two live
   views to chase a one-frame flicker is not a trade worth making today.
   ======================================================================== */
.mf-thumb {
  width: 46px; height: 46px; flex: 0 0 46px;
  border-radius: 8px; border: 1px solid var(--mf-line);
  background: #fff; object-fit: contain; display: block;
}
.mf-thumb-sm { width: 34px; height: 34px; flex-basis: 34px; border-radius: 6px; }
.mf-thumb-box {
  width: 46px; height: 46px; flex: 0 0 46px;
  border-radius: 8px; border: 1px solid var(--mf-line);
  background: var(--mf-page); color: var(--mf-ink-3);
  display: grid; place-items: center; font-size: 15px;
}
.mf-thumb-box.mf-thumb-sm { width: 34px; height: 34px; flex-basis: 34px; font-size: 12px; }
.mf-thumb-box.is-missing { border-style: dashed; color: var(--mf-alarm); }
a.mf-thumb-link { display: block; line-height: 0; }
a.mf-thumb-link:hover .mf-thumb { border-color: var(--mf-blue); }