/* Teacher Toolkit — THE shared control bar for the interactive tools.
 *
 * This file is the ONLY copy of these rules. It is served at /assets/mu-toolbar.css and inlined
 * VERBATIM into each tool as an offline fallback; scripts/toolkit/toolbar_qa.js fails the build if
 * an inlined copy, or the staged asset, differs from this file by a single byte, and fails if a tool
 * re-declares one of these selectors locally. A shared file that is copied per consumer is not
 * shared: the gate is what makes it canonical.
 *
 * Screen-only chrome. @media print hides the whole bar, which is why serving it is safe. The
 * PRINTABLES inline everything and must keep working from a local file; nothing here reaches them,
 * and the type below is scoped to .bar so no printed sheet changes font.
 *
 * BUILT TO reference/design/design-thesis.md, which OVERRIDES design-system.md where they disagree.
 * Type is OUTFIT throughout, including the title: the thesis records that the live site ships Outfit
 * for everything and that a second display face is never introduced per-page. An earlier version of
 * this file set the title in Syne on design-system.md's authority and was wrong.
 * The rules it satisfies that the old bar did not: USE 7 (exactly one primary CTA at a time),
 * MOB 8 (44px tap targets on touch, 390px clean), A11Y 9 (keyboard reachable, visible focus, and a
 * selected state that is never colour alone).
 *
 * Per-tool differentiation is ONE variable, --tool-accent. Every accent is checked to at least
 * 4.5:1 on both White and Chalk, so it is legible as pill text AND behind white pill text.
 */

/* ---------------------------------------------------------------- tokens
 * Local aliases so this file renders standalone, off design-system.md values, whatever a tool
 * happens to define. A tool sets only --tool-accent.
 *
 * These stay scoped to .bar. TT8 briefly moved them to `:root, .bar` to fix the two rules below,
 * and the toolbar drift gate correctly refused it: every tool sheet declares its OWN `:root` (the
 * printables' palette), so putting the bar's tokens there makes two files own one selector. */
.bar{
  --tb-ink:#1A1917; --tb-text2:#6B6862; --tb-text3:#A09E9C;
  --tb-surface:#FFFFFF; --tb-chalk:#F7F6F3; --tb-ash:#EEECE7; --tb-border:#E0DDD8; --tb-border2:#CBC8C0;
  /* The muted brick, matched to the PAGES (mu-teach.css --coral, owner TT7). These were the brand
     coral, so pressing Build on a toolkit page put a teacher one click from a different red. Same
     boundary the typeface crossed before TT7: a page in Segoe UI launching a toolbar in Outfit.
     Every use is white-on-fill or a focus ring, so the darker red only improves contrast: the
     primary button goes 4.83:1 to 5.34:1. */
  --tb-coral:#C8321F; --tb-coral-h:#A82A19; --tb-coral-a:#8E2115;
  --tb-accent:var(--tool-accent,#4338CA);
  --tb-r:8px;                       /* radius sm: buttons, inputs */
  --tb-tap:30px;                    /* control height with a mouse; 44px under a coarse pointer, below */
  --tb-ease:.15s ease;
}

/* ---------------------------------------------------------------- the bar
 * A 3px accent rule along the top is the whole per-tool identity: a teacher sees which kind of
 * resource they are on before reading a word, and it costs 3px of a sticky bar rather than a chip
 * that costs a whole line. */
.bar{
  background:var(--tb-surface);
  border-top:3px solid var(--tb-accent);
  border-bottom:1.5px solid var(--tb-border);
  box-shadow:0 1px 4px rgba(26,25,23,.04);
  padding:9px 20px 10px;
  position:sticky; top:0; z-index:20;
  color:var(--tb-ink);
  font-family:'Outfit','Segoe UI',Arial,sans-serif;
  display:grid; grid-template-columns:minmax(0,1fr);
  grid-template-areas:"title" "sub" "pills" "actions";
  align-content:start;
}
/* Home link. ux-standards 1: "a clickable logo (-> home) is the minimum back-affordance on every
 * surface", and "no dead ends". The remix paper toolbar, the curriculum planner and the ideas
 * dashboard all carry one; the toolkit tools carried NONE, so a teacher who opened a builder had no
 * way back to the topic hub except the browser button. It sits inline with the title so it costs no
 * height at all. */
.bar h1{
  grid-area:title;
  font-weight:800;
  font-size:18px; line-height:1.25; letter-spacing:-.2px;
  margin:0 0 1px; color:var(--tb-ink);
  display:flex; align-items:center; gap:9px;
}
.bar .tb-home{ display:inline-flex; align-items:center; line-height:0; border-radius:6px; flex:0 0 auto;
  transition:opacity var(--tb-ease); }
.bar .tb-home img{ height:19px; width:auto; display:block; }
.bar .tb-home:hover{ opacity:.75; }
.bar h1 .tb-t{ min-width:0; }
/* the TOOL name takes the accent; #topic below wins it back to ink by specificity */
.bar h1 .tb-t span{ color:var(--tb-accent); }
/* the topic name is the subject, not the branding: keep it ink so the accent marks the TOOL */
.bar h1 #topic{ color:var(--tb-ink); font-weight:700; }
.bar .sub{
  grid-area:sub;
  font-size:12.5px; font-weight:400; line-height:1.4; letter-spacing:.2px;
  color:var(--tb-text2); margin:0 0 7px; max-width:94ch;
}

/* ---------------------------------------------------------------- pills
 * The tools build these as buttons, so they are tab-reachable and announced as toggles. The check
 * glyph is not decoration: ux-standards 9 says a status is never colour alone, and "which of these
 * am I including" is exactly a status.
 *
 * COLOUR IS SPENT ON THE SELECTION, NOT THE ROW (owner's choice, TT3, from three rendered options).
 * An unselected pill is quiet neutral; the accent fills only the ones actually chosen. This is the
 * design thesis's "spend boldness in ONE place" pointed at the information rather than the chrome:
 * a row of twelve accent-coloured pills decorates, a row where only your three picks are coloured
 * tells you something. Per-tool identity survives in the top rule, the tool name, and the fill on
 * the chosen pills. */
.pills{ grid-area:pills; display:flex; flex-wrap:wrap; gap:6px; margin:0 0 7px; }
.pill{
  -webkit-appearance:none; appearance:none;
  font-family:inherit; font-size:13px; font-weight:600; line-height:1;
  display:inline-flex; align-items:center; gap:5px;
  min-height:var(--tb-tap); padding:0 12px;
  border:1.5px solid var(--tb-border); border-radius:999px;
  background:var(--tb-surface); color:var(--tb-text2);
  cursor:pointer; user-select:none;
  transition:background var(--tb-ease), color var(--tb-ease), border-color var(--tb-ease), box-shadow var(--tb-ease);
}
/* colour-blind-safe selected state: the glyph carries it, the fill only reinforces it */
.pill::before{
  content:"+"; font-weight:700; font-size:13px; line-height:1;
  width:1em; text-align:center; opacity:.55;
}
.pill.on{ background:var(--tb-accent); border-color:var(--tb-accent); color:#fff; }
.pill.on::before{ content:"\2713"; opacity:1; }
.pill:hover{ background:var(--tb-ash); border-color:var(--tb-border2); color:var(--tb-ink); }
/* MUST restore the colour, not just the background. `.pill:hover` sets the text to INK for the
 * unselected (white) pill; a SELECTED pill is white-on-accent, and inheriting that hover colour
 * printed near-black text on a purple fill -- measured on a real phone at ink #1A1917 on the accent.
 * It is worse on touch than with a mouse: a tap leaves :hover latched, so the last pill a teacher
 * touched STAYS unreadable rather than recovering when the pointer moves away. Reported from a
 * handset with a photograph, which is how it was finally seen. */
.pill.on:hover{ background:color-mix(in srgb, var(--tb-accent) 86%, #000); color:#fff; }
/* A latched :hover on touch is a lie about where the pointer is. Nothing here has a hover state on
 * a device that cannot hover. */
@media (hover:none){
  .pill:hover{ background:var(--tb-surface); border-color:var(--tb-border); color:var(--tb-text2); }
  .pill.on:hover{ background:var(--tb-accent); border-color:var(--tb-accent); color:#fff; }
  .pill.pill-all:hover{ background:var(--tb-surface); border-color:var(--tb-border); color:var(--tb-text2); }
}
.pill:active{ transform:translateY(1px); }
.pill.none{ opacity:.4; cursor:not-allowed; border-style:dashed; }
/* All / None. Injected by toolbar_client.js into every pill row, so no builder has to know about
 * it. Deliberately reads as a CONTROL and not as another type you could include: dashed edge, no
 * +/tick glyph, muted until hovered. A topic with twelve archetypes used to cost twelve clicks. */
/* text2, not the tertiary label grey it started as: this word is the ONLY text on the control, and
 * tertiary on white is 2.67:1 — below AA and genuinely hard to read. Same call, same reason, as the
 * hint line below. The dashed edge and the missing tick glyph already carry "this is a control, not
 * a type"; the colour did not need to do it too. (Caught by the rendered-contrast gate, TT4.) */
.pill.pill-all{ border-style:dashed; color:var(--tb-text2); font-weight:500; }
.pill.pill-all::before{ content:none; }
.pill.pill-all:hover{ color:var(--tb-ink); border-color:var(--tb-text3); background:var(--tb-ash); }

/* Folding the types is a PHONE-ONLY accommodation: on a laptop the row costs one line and showing
 * it is strictly better. Driven by a media query rather than by JavaScript reading the width, so a
 * rotation or a resize cannot leave the trigger and the row disagreeing. */
/* .bar-qualified so it beats `.btn{display:inline-flex}`, which is declared LATER in this file at
 * the same specificity and was therefore winning -- the fold trigger rendered on desktop too, where
 * it is redundant. Equal specificity means document order decides, and this rule cannot rely on
 * being moved below the button rules to stay correct. */
.bar .pilltrig{ display:none; }
@media (max-width:600px){
  /* Shares a row with the other buttons rather than taking one of its own. A full-width trigger
   * cost a whole 44px row, which ate a quarter of what folding saved -- the earlier "363 -> 162px"
   * figure was measured by hiding the pills WITHOUT the control needed to get them back, so it was
   * never a number anyone could have had. Sitting inline it costs nothing: the actions row already
   * wraps to two rows and there is room in the second. */
  .bar .pilltrig{ display:inline-flex; order:-1; flex:1 1 44%; }
  .pills:not(.open){ display:none; }
  .pills.open{ margin-bottom:9px; }
}

/* ---------------------------------------------------------------- actions */
.actions{ grid-area:actions; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.btn{
  -webkit-appearance:none; appearance:none;
  font-family:inherit; font-size:13.5px; font-weight:600; line-height:1;
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  min-height:var(--tb-tap); padding:0 15px;
  border:1.5px solid transparent; border-radius:var(--tb-r);
  cursor:pointer;
  transition:background var(--tb-ease), border-color var(--tb-ease), color var(--tb-ease), box-shadow var(--tb-ease);
}
/* PRIMARY (design-system Primary Button). USE 7 wants exactly one obvious CTA, and which one it is
 * changes with the task: pick types then Generate, and from then on the job is Print. The :has()
 * rule below demotes Generate the moment Print becomes live, with no JS in any tool. A browser
 * without :has() simply keeps both coral, which is the behaviour that shipped before. */
.btn.gen, .btn.print{ background:var(--tb-coral); color:#fff; }
.btn.gen:hover, .btn.print:hover{ background:var(--tb-coral-h); }
.btn.gen:active, .btn.print:active{ background:var(--tb-coral-a); }
/* ONE BUTTON THAT RENAMES ITSELF. "Create" and "Regenerate" did the same thing the moment a sheet
 * existed -- same handler, same result -- so there were two buttons and only one of them was
 * honest. Now there is one, and it says what it will do next.
 *
 * BOTH LABELS ARE ALWAYS IN THE DOM, stacked in a single grid cell, and only their VISIBILITY
 * changes. That is what keeps the width fixed: the button is always as wide as its longest label,
 * so it cannot resize under the cursor when the word swaps. Sizing it by a hardcoded min-width
 * would have been the obvious alternative and would rot the first time the font, the wording or
 * the padding changed -- this measures itself. */
.btn.gen{ display:inline-grid; align-items:center; justify-items:center; }
.btn.gen > span{ grid-area:1/1; display:inline-flex; align-items:center; gap:6px; }
.btn.gen .lb-made{ visibility:hidden; }
.btn.gen.made .lb-new{ visibility:hidden; }
.btn.gen.made .lb-made{ visibility:visible; }

/* SECONDARY (design-system Secondary Button) */
.btn.re{ background:var(--tb-surface); color:var(--tb-ink); border-color:var(--tb-border); }
.btn.re:hover{ border-color:var(--tb-text3); color:var(--tb-text2); }
.btn.re:active{ background:var(--tb-ash); border-color:var(--tb-text2); }
.actions:has(.btn.print:not(:disabled)) .btn.gen{
  background:var(--tb-surface); color:var(--tb-ink); border-color:var(--tb-border);
}
.actions:has(.btn.print:not(:disabled)) .btn.gen:hover{ border-color:var(--tb-text3); color:var(--tb-text2); }
/* DISABLED, to spec: a real surface, not a ghost of the enabled one */
.btn:disabled{ background:var(--tb-border); color:var(--tb-text3); border-color:transparent; cursor:not-allowed; }
.btn:disabled:hover{ background:var(--tb-border); color:var(--tb-text3); }

/* ---------------------------------------------------------------- pull-downs
 * Secondary controls live in a panel hanging off the action they modify, which is how the remix
 * paper bar stays 48px on a phone while carrying MORE function than this one. The trigger costs
 * bar height; the controls cost nothing until asked for.
 *
 * FOLDED EVERYWHERE, laptop included (owner, TT4). Both behaviours were built and they measured
 * identically (83px fluency / 108px cover at 1440px), so it was a taste call: one bar that behaves
 * the same on every device, rather than folding that reads as a small-screen apology. The
 * `.bar.open-desktop` variant that unfolded the panels inline above 1080px was removed with the
 * decision rather than left as dead CSS nobody can date.
 *
 * A tool gets a panel IF AND ONLY IF it has secondary controls. fluency, cover and homework do;
 * ladder and prereq carry only Regenerate and Print, so they stay flat. That is the rule, not an
 * incomplete rollout. */
.tbtrig::after{ content:"\25BE"; font-size:10px; opacity:.65; margin-left:1px; }
/* The open state repaints the background, so it MUST repaint the colour too. Without the `color`
 * here, an open Print trigger kept the coral button's white text and rendered white-on-ash at
 * 1.18:1 — an illegible control on the primary print path, which every static check passed and only
 * a screenshot showed. */
.tbtrig.on{ background:var(--tb-ash); border-color:var(--tb-ink); color:var(--tb-ink); }
.tbp{
  display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px;
  position:absolute; top:100%; left:0; right:0; z-index:31;
  background:var(--tb-surface); border-top:1.5px solid var(--tb-border); border-bottom:1.5px solid var(--tb-border);
  box-shadow:0 10px 20px rgba(26,25,23,.12); padding:10px 20px;
  opacity:0; visibility:hidden; transform:translateY(-4px);
  transition:opacity var(--tb-ease), transform var(--tb-ease), visibility 0s linear .15s;
}
.tbp.open{ opacity:1; visibility:visible; transform:translateY(0); transition:opacity var(--tb-ease), transform var(--tb-ease); }
.tbp-sep{ width:1px; align-self:stretch; background:var(--tb-border); }

/* ---------------------------------------------------------------- the sheet code
 * The code lives in the TITLE row and is itself the panel trigger, so the sheet's identity is always
 * visible and opening copy/recall costs no second control. The actions row is what wraps on a phone;
 * a fifth button there measured a full 44px extra row, which would have given back most of what the
 * pull-downs just bought. Here it measured +3px on a phone and nothing at all on a laptop.
 * Hidden until a sheet exists — there is nothing to name before then. */
/* IT MUST NOT GROW UNDER THE FINGER. Every re-rolled question lengthens the code, so the chip crept
 * wider as a teacher swapped questions and dragged the title around with it — reported from a
 * phone. The encoding was made compact first (six swaps now cost three characters, not twelve), but
 * compact is not fixed, so the chip is also CAPPED and ellipsised. Nothing is lost by truncating
 * here: the panel shows the code in full, tapping copies it in full, and the printed footer — the
 * one that has to be readable months later — is never truncated. */
.tb-code{
  font-family:inherit; font-size:12px; font-weight:700; letter-spacing:.04em;
  color:var(--tb-text2); background:var(--tb-chalk);
  border:1.5px solid var(--tb-border); border-radius:999px;
  padding:3px 9px; margin-left:9px; vertical-align:middle; cursor:pointer;
  /* FIXED, not merely capped. Capping stops it running away; it does not stop it MOVING, and the
   * complaint was movement -- the chip crept wider swap by swap and dragged the title with it. Same
   * rule the owner asked for on the Create/Regenerate button: a control may change what it says, it
   * may not change its size while you are looking at it. 16ch holds the longest prefix plus a seed
   * plus a re-roll segment, so in practice nothing is ever actually clipped. */
  width:11ch; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-align:center;
  transition:border-color var(--tb-ease), color var(--tb-ease), background var(--tb-ease);
}
.tb-code:hover{ border-color:var(--tb-text3); color:var(--tb-ink); }
.tb-code.on{ background:var(--tb-ash); border-color:var(--tb-ink); color:var(--tb-ink); }
.tb-code[hidden]{ display:none; }
/* a labelled control inside a pull-down (the recall row) */
.tbp .rc{ display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:500; color:var(--tb-text2); }
.tbp .rc b{ color:var(--tb-ink); font-weight:700; letter-spacing:.04em; }
.tbp .rc input{
  font-family:inherit; font-size:16px;      /* 16px: anything smaller makes iOS Safari zoom on focus */
  color:var(--tb-ink); min-height:var(--tb-tap); padding:0 9px; width:190px; max-width:100%;
  background:var(--tb-chalk); border:1.5px solid var(--tb-border); border-radius:var(--tb-r);
  transition:border-color var(--tb-ease);
}
.tbp .rc input:hover{ border-color:var(--tb-border2); }
.tbp .rcmsg{ font-size:12.5px; font-weight:500; color:var(--tb-text2); }
.tbp .rcmsg.bad{ color:var(--tb-coral-h); }

/* ---------------------------------------------------------------- inputs + helper text */
.ord{ display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:500; color:var(--tb-text2); }
.ord select{
  font-family:inherit; font-size:13px; font-weight:500; color:var(--tb-ink);
  min-height:var(--tb-tap); padding:0 8px;
  background:var(--tb-chalk); border:1.5px solid var(--tb-border); border-radius:var(--tb-r);
  cursor:pointer; transition:border-color var(--tb-ease), box-shadow var(--tb-ease);
}
.ord select:hover{ border-color:var(--tb-border2); }
.cbx{ display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:500; color:var(--tb-text2); cursor:pointer; }
.cbx input{ width:17px; height:17px; accent-color:var(--tb-accent); cursor:pointer; }
/* The only feedback on what is selected, so it is body-secondary, not the tertiary label grey it
 * started as. It sits at the end of the controls because that is where the markup puts it. */
.hint{ font-size:12px; font-weight:500; letter-spacing:.2px; color:var(--tb-text2); }

/* ---------------------------------------------------------------- focus (A11Y 9)
 * Visible keyboard focus on every interactive control, and only for keyboard: :focus-visible keeps
 * a mouse click from leaving a ring behind. The ring is CORAL, not the tool accent: the design
 * thesis names a coral ring as part of the unannounced quality floor, and the remix toolbar already
 * draws exactly that. One focus colour site-wide is worth more than a ring that matches the page. */
.bar .tb-home:focus-visible,
.pill:focus-visible, .btn:focus-visible, .ord select:focus-visible, .cbx input:focus-visible{
  outline:2px solid var(--tb-coral);
  outline-offset:2px;
}
.ord select:focus-visible{ border-color:var(--tb-coral); }

/* ---------------------------------------------------------------- wide screens
 * Above 1280px the title and the controls share one row, the way the site header does. It reads as
 * a designed app bar rather than a stack, and it makes the sticky bar SHORTER than the one it
 * replaces even with bigger type and bigger tap targets. */
@media (min-width:1080px){
  .bar{
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:"title actions" "sub sub" "pills pills";
    column-gap:24px;
  }
  /* The instruction line keeps its OWN full-width row rather than sharing one with the controls.
   * Sharing squeezed it into a narrow column and wrapped a one-line sentence onto three, which made
   * the bar taller than the stacked layout it was meant to beat. */
  .actions{ align-self:center; justify-content:flex-end; }
  .pills{ margin-bottom:0; }
}

/* ---------------------------------------------------------------- touch + small screens (MOB 8)
 * 44px targets wherever the pointer is coarse, at any width: a tablet is not a phone but the finger
 * is the same. And a sticky bar must never eat the screen, so the pill list gets a ceiling and
 * scrolls inside itself instead of pushing the sheet off the page. */
@media (pointer:coarse){
  .bar{ --tb-tap:44px; }
  .cbx input{ width:20px; height:20px; }
}
@media (max-width:600px){
  /* NOT sticky on a phone. With 44px targets the bar is around 400px tall, and a sticky 400px bar
   * on an 844px screen leaves half a page for the thing the teacher came to look at. Capping it and
   * scrolling inside it means a scroll area inside a scroll area, which is worse than simply letting
   * it scroll away: the controls are one flick up, and on a phone the job is Print, done once.
   *
   * RELATIVE, not static, and this is load-bearing. `static` un-positions the bar, so the panels'
   * `top:100%` stops resolving against it and resolves against the initial containing block instead
   * — one whole viewport down. Measured: bar ended at 263px, tapping Options opened the panel at
   * 844px, entirely off-screen. The phone is the entire reason the panels exist, so on the one
   * device they are for, they silently did nothing. `relative` is not sticky, so the note above
   * still holds. (TT4) */
  .bar{ position:relative; padding:10px 14px 12px; }
  .bar h1{ font-size:16px; gap:7px; }
  .bar .tb-home img{ height:17px; }
  .bar .sub{ font-size:12.5px; margin-bottom:8px; }
  .actions{ gap:6px; }
  /* Two controls per row rather than one. Full-width selects looked deliberate and cost a row each;
   * pairing them halves the control block without shrinking a single tap target. */
  .btn{ flex:1 1 44%; }
  .ord{ flex:1 1 44%; justify-content:space-between; min-width:0; white-space:nowrap; }
  .ord select{ flex:1 1 auto; min-width:0; }
  /* Inside a panel, give each control its own row. A panel OVERLAYS the page, so its height is free
   * — it costs the bar nothing. Sharing a row squeezed "Full working" down to a 79px select reading
   * "Full wo", which is the one piece of feedback saying what will actually print. */
  .tbp .ord, .tbp .rc{ flex:1 1 100%; }
  .tbp .rc input{ width:auto; flex:1 1 auto; min-width:0; }
  .tbp .tbp-sep{ display:none; }
  .cbx{ flex:1 1 44%; }
  .hint{ flex:1 1 100%; }
}

/* ---------------------------------------------------------------- the code, on the paper
 * Inherits the footer's own size and colour rather than setting its own, so it sits as a sibling of
 * "mathedup.co.uk" at whatever scale each printable's footer uses (they differ: 8.5px on the tools,
 * larger elsewhere). Letter-spacing only, so the code reads back reliably when someone types it in.
 * The separator is a pseudo-element so the span holds nothing but the code itself — a teacher who
 * selects it copies a clean code, not a middot. */
.ft .mucode{ letter-spacing:.05em; white-space:nowrap; }
.ft .mucode::before{ content:"·"; margin:0 .45em; opacity:.55; }

/* ---------------------------------------------------------------- per-question controls
 * Live INSIDE the sheet, not on the bar, so they sit beside the question they act on. Quiet until
 * hovered: a worksheet full of loud buttons is a worse worksheet, and these are an occasional
 * repair rather than part of the task.
 *
 * NEVER PRINTED. A control that reached paper would be a defect in the deliverable itself, so it is
 * removed at print rather than merely hidden — and the .muqb wrapper takes no layout space, so its
 * presence cannot shift a question or move the page count. */
.muqb{
  position:absolute; top:2px; right:2px; z-index:2;
  display:flex; gap:3px; opacity:0; transition:opacity .15s ease;   /* sheet-side: see .muq below */
}
[data-qi]{ position:relative; }
[data-qi]:hover .muqb, .muqb:focus-within{ opacity:1; }
.muq{
  -webkit-appearance:none; appearance:none;
  font-family:'Outfit','Segoe UI',Arial,sans-serif; font-size:12px; line-height:1;
  width:24px; height:24px; display:inline-flex; align-items:center; justify-content:center;
  background:#FFFFFF; color:#6B6862; border:1.5px solid #E0DDD8; border-radius:6px; cursor:pointer;
  transition:border-color .15s ease, color .15s ease;   /* sheet-side, not .bar scope */
}
.muq:hover{ border-color:#A09E9C; color:#1A1917; }
/* .muq and .muqb are in the SHEET, not the bar, so they take the SHEET's palette (print_palette's
   :root). Until TT8 they used --tb-* here, which is scoped to .bar and so resolved to nothing:
   CSS drops a declaration whose var() does not resolve, silently, and these buttons painted NO
   FOCUS RING at all — the exact promise the craft floor makes. Found by token_scope_check.js. */
.muq:focus-visible{ outline:2px solid var(--red); outline-offset:2px; }
.muq.done{ color:#166534; border-color:#166534; }
.muq.bad{ color:#B91C1C; border-color:#B91C1C; }
/* A coarse pointer has no hover, so there is nothing to reveal them: show them always, at a real
 * tap size. Hidden at print regardless. */
@media (pointer:coarse){
  .muqb{ opacity:1; }
  .muq{ width:32px; height:32px; font-size:14px; }
}
@media print{ .muqb{ display:none !important; } }

/* ---------------------------------------------------------------- reduced motion */
@media (prefers-reduced-motion:reduce){
  .pill, .btn, .ord select{ transition:none; }
  .pill:active{ transform:none; }
}

@media print{ .bar{ display:none!important; } }