/* ==========================================================================
   MONGOOSE GRAPHICS — shared chrome for the internal review tools
   Loaded by /reviews/settings and /reviews/manager, before each page's own
   <style> block, so a page can still override anything here.

   WHY THIS FILE EXISTS
   These rules used to live twice, once in each page. They drifted, silently
   and repeatedly: the manager sat at --ink-2 .74 / --ink-3 .52 while settings
   was at .90 / .72, and its buttons were 11px against 14px — so the same
   control was a different size AND a different gray depending on which page
   you were looking at. Nobody edits two files to change one button.

   Anything BOTH tools show belongs here. Anything only one of them shows —
   the palette, the artwork cards, the release panel — stays in that page.
   ========================================================================== */

:root{
  /* THE SHELL. Two numbers that decide where every top-level edge on this tool
     lands, named because they were written four times and drifted: .top-in and
     .wrap agreed on 1900/32, .mg-auth was on 24 and dropped to 14 at a
     breakpoint neither of the others has, and the result was a signed-in strip
     whose contents lined up with nothing on the page. One token, three
     consumers, and the responsive step is now a single re-declaration. */
  --shell-max:1900px; --shell-pad:32px;
  --bg:#f2f3f5; --panel:#ffffff; --panel-2:#f7f8f9;
  --line:rgba(20,21,25,.14); --line-2:rgba(20,21,25,.08);
  --ink:#15161a; --ink-2:rgba(21,22,26,.90); --ink-3:rgba(21,22,26,.72);
  /* THE FAINTEST STEP, FOR A BADGE THAT MUST RECEDE. Craig handed this one over
     as `color:#aaaaaa` on .cell .cdef (the DEFAULT tag in the Layout map), and a
     hard-coded color in this estate is a bug report about the token pipeline
     rather than a choice - so it is named here instead of typed there. It sits
     BELOW --ink-3 on purpose and is not a general text color: at 2.0:1 on
     --bg it is legible as a tag and would fail as prose. Do not reach for it
     for anything a client has to read. */
  --ink-4:#aaaaaa;
  --accent:#e3a52a; --accent-ink:#8a6208; --accent-soft:rgba(227,165,42,.20);
  /* --ok completes the trio. --warn and --bad were tokens; the green that
     answers them was a literal #177a41 written twice — once on .btn-green in
     manager.html and again on .mgc-read.ok below. Two copies of one decision
     with no name is how a palette drifts, and a hard-coded color in this
     estate is a bug report about the token pipeline rather than a choice. */
  --warn:#a55a12; --bad:#c0392b; --ok:#177a41;
  /* The ink that goes ON a bright fill. It was the literal #1a1409 written into
     .btn.primary here and needed again by .btn.gold in manager.html, where the
     absence of a name is what let that button drift to white — see the contrast
     note on .btn.gold. Named once, it cannot. */
  --ink-on-bright:#1a1409;
  /* Lifted verbatim from the TurnerLee project board's remove control
     (.pb2-wrap.pb-skin2 .pb2-sched-x) so the two read as the same system:
     pale pink disc, 2px red ring, red glyph. --s-urgent is TurnerLee's token;
     copied as a literal here because MongooseSports has no equivalent. */
  --x-ring:#FF0029; --x-fill:#fbe0e4;
  /* SITE CHROME. The public site's header colors, carried by hand because
     these tools are "Don't Use Template" pages: the Treepl brand chain that
     emits --color1..--color5 never runs here, so var(--color1) would resolve
     to nothing. Measured off mongoosesports.com 2026-08-12 — --color1 is the
     minor/utility bar, --color4 is .btn-primary. Keep the LITERAL in one place
     and name it; --mg-a/--mg-b were a second copy of --color1 under a name
     that said "logo fill" instead of "the brand's warm neutral". */
  --brand-1:#978b87; --brand-1d:#837875; --brand-1xd:#706764;
  --brand-4:#9a846b; --brand-4d:#8a7760;
  /* SITE DARK CHROME, added 2026-08-15 for the panel headers. Measured the same
     way as the line above, off mongoosesports.com: the Treepl chain emits
     --color3xd:#222222. Craig's note called that "color1" and #978b87 "color2";
     the site's own --color1 IS #978b87 — that is --brand-1, one line up — and
     its --color2 is #74787b, which appears nowhere in this tool. Named here by
     what the site calls it so the next person who measures finds the same
     thing twice. */
  --brand-3xd:#222222;
  /* --line is a dark rgba and vanishes on --brand-3xd. Anything drawn on the
     dark header needs this instead. */
  --line-on-dark:rgba(255,255,255,.22);
  /* The site's own minor bar sets its links at rgba(255,255,255,.8). Raised to
     .95 here and only here: that bar carries eight items and needs the recession,
     this one carries three, and the tool is read for hours at a stretch. Measured
     on #978b87 — .8 white is 2.5:1, .95 white is 2.9:1. Both are under WCAG AA's
     4.5:1 for 12.8px text; the fill is the brand's, so closing the gap means
     moving the fill, which is Craig's call and not a thing to do quietly. */
  --on-brand-1:rgba(255,255,255,.95);
  --mg-a:var(--brand-1); --mg-b:var(--brand-1);
  --ease:cubic-bezier(.16,1,.3,1);
  --f-display:'Nexa','Helvetica Neue',Helvetica,Arial,sans-serif;
  /* THE READING FACE IS OPEN SANS, NOT HYPATIA. Craig, 2026-08-30: "I just
     can't have Hypatia in these Dashboards and Review Boards, it's too hard for
     me to read ... this applies across almost my entire Ops and Client Portals
     setups." Same change, same day, as shared/review-board/v1/review-board.css
     on TurnerLee - this sheet is the Mongoose half of the same tool.

     --font0Family, NOT --font0: --font0 is a `font` SHORTHAND and is invalid in
     font-family:, which drops the declaration silently. MEASURED 2026-08-30:
     mongoosesports.com loads Google `Open+Sans` with NO weight list, so only 400
     is fetched and the 300 below is synthesised. That is a brand-chain fix, not
     a fix for this line - TurnerLee already requests 300..800. */
  --f-text:var(--font0Family, 'Open Sans', -apple-system, BlinkMacSystemFont,
                'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif);
  /* THE UI FACE. Craig, 2026-08-20: "that secondary [font] is really hard to
     read on these alerts and stuff, is it possible to use Roboto (or whatever
     our standard sans serif font is) for that secondary ... We could call this
     for the system font or something in the WebInOne/Treepl CM 'ID brand
     settings'."

     He is right and the reason is worth writing down: --f-text is Hypatia, a
     light humanist face chosen to be READ AT LENGTH on a white page. This tool
     uses it at weight 300, at 14-19px, on saturated red and green, at the exact
     moment a person is trying to copy a filename out of an error. Every one of
     those is the opposite of what that face is for. A brand face is not a UI
     face, and an ops surface is not a brochure.

     NOT A WEBFONT. Roboto is not loaded anywhere in this estate - grep is 0
     across sst-styles.css, sst-fonts.css and bs-theme.css - and pulling one in
     for admin body copy buys a network round trip and a flash of unstyled text
     on a tool. The native UI stack IS Roboto on Android and ChromeOS, SF on
     macOS and iOS, Segoe UI on Windows: the face the reader's own OS renders
     small text in best, at no cost.

     --fontSystem FIRST, on purpose. That is the name this would take in the
     brand chain if Craig adds it, and var() falls through to the stack until
     something emits it - so the token is already wired and the CM change, if it
     happens, is additive rather than a rewrite of every rule below.
     WHAT IT WOULD COST, so the decision is his and informed: 'ID Brand
     Settings' is CM 4380, and it does NOT exist on MongooseSports - it is on
     EPIC4, ElevatedMP, MudCup and SweetwaterCreek, under four different names.
     Its item name is a live key read by a Site Global (cm-registry.md, CM 4380
     notes), and every site is at the v7 100-property gate. A new property there
     is an eight-site change, not a one-site change. This line costs nothing and
     is ready for it either way.
     2026-08-30: --fontSystem is still emitted by nothing, so this always fell
     through to the raw OS stack. It now asks for --font0Family first, which IS
     the brand's Open Sans - the UI face and the reading face are one face now. */
  --f-ui:var(--font0Family, var(--fontSystem, -apple-system, BlinkMacSystemFont,
             'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif));
}

/* ---- reset ---- */
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--f-text);font-weight:300;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
svg,img{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:4px}

.eyebrow{font-family:var(--f-display);font-weight:400;font-size:18px;letter-spacing:.28em;
  text-transform:uppercase;color:var(--ink-3)}
.top-t .eyebrow{font-size:15px;letter-spacing:.2em}

/* ---- header ---- */
.top{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.96);
  backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.top-in{max-width:var(--shell-max);margin:0 auto;padding:14px var(--shell-pad);
  display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.mg-logo{width:180px;height:auto;opacity:.92;flex:0 0 auto}
.top-t{flex:1 1 320px;min-width:0}
.top-t h1{margin:2px 0 0;font-family:var(--f-display);font-weight:900;font-size:26px;
  letter-spacing:.08em;line-height:1.2;text-transform:uppercase}
/* PUSHED RIGHT, ON BOTH PAGES. Craig, 2026-08-10: "This PUBLISH button should
   be at the top right of both windows ManageArtwork & Settings." The title
   block already grows to fill, but only above its 320px flex-basis — on a
   narrower header the actions ended up mid-row on Settings and hard right on
   the Manager, so the same control sat in two different places. `margin-left:
   auto` puts it against the right edge at every width. */
.acts{display:flex;gap:6px;flex-wrap:wrap;align-items:center;
  margin-left:auto;justify-content:flex-end}

/* ---- signed-in strip ----
   /reviews/settings sits behind the Client Portal secure zone (2026-08-12), so
   an anonymous visitor never reaches this markup — Treepl serves the 401 sign-in
   page instead. That is what retired the red "Not signed in — nothing you change
   here can save" bar: the state it warned about cannot exist at page load any
   more, and a warning for an impossible state is noise that teaches you to
   ignore the bar. Session EXPIRY mid-edit is still real and is still handled,
   by the save queue's own .mg-banner at the foot of the page — that one fires
   on a measured 401 from the write path, not on a guess.

   Shape and color are the site's own minor (utility) nav, lifted from
   mongoosesports.com: 40px tall, 5px 0 padding, warm-neutral fill, links at
   12.8px uppercase Hypatia in 80% white going to full white on hover, and the
   brand's tan on the one button. Craig, 2026-08-12: "utilize the HTML and look
   of the header of the website in brown and tan". Icons are the same pair the
   site's Sign-In snippet uses — fa-circle-check for who you are, fa-lock for
   the way out — inlined because FontAwesome is not loaded on these pages.

   Lives HERE, not in the page. The last two header rules that lived in the page
   drifted between settings and manager twice in one week; a note asking the
   next editor to keep them in step had already failed once by then. */
/* ---- THE STRIP IS FULL-BLEED, ITS CONTENTS ARE NOT -----------------------
   Craig, 2026-08-16: "The ClientPortal and SignOut area buttons are
   out-of-bounds. They need to align with the content and containers within the
   page. CLIENT PORTAL should be displayed exactly where the pink square above
   mongoose logo is. Same for the right side pink placeholder."

   NO WRAPPER ELEMENT, AND THAT IS THE POINT. `.top-in` centers itself with
   max-width + margin:auto, which an element that also PAINTS THE BAR cannot do
   - the tan would stop at 1900px and the strip would become a floating band.
   The same inset is reachable as padding instead: half the leftover width plus
   the gutter. Percentages in padding resolve against the containing block's
   width, which here is the window, so this computes the identical left edge
   .top-in lands on, with no second element to keep in step.
     window 2560 -> max(32, (2560-1900)/2 + 32) = 362  = .top-in's content edge
     window 1400 -> max(32, -218)               = 32   = .top-in's content edge
   max() is what makes it collapse cleanly below the cap rather than going
   negative.

   ONE BREAKPOINT NOW, NOT THREE. This used to hold 24px to 640px and then 14px,
   while .top-in went to 18px at 820px - so the two were misaligned at every
   width, by three different amounts. Both now spend --shell-pad, and the
   settings page re-declares that one token at its own breakpoint. */
.mg-auth{display:flex;align-items:center;gap:4px;flex-wrap:wrap;
  justify-content:flex-end;min-height:40px;
  padding:5px max(var(--shell-pad),
                  calc((100% - var(--shell-max)) / 2 + var(--shell-pad)));
  background:var(--brand-1);color:var(--on-brand-1);
  font-family:var(--f-text);font-weight:400;font-size:12.8px;
  line-height:normal;text-transform:uppercase}
.mg-auth a{display:inline-flex;align-items:center;gap:7px;padding:6px 7px;
  color:inherit;text-decoration:none;transition:color 200ms,background-color 200ms}
.mg-auth a:hover,.mg-auth a:focus{color:#fff;text-decoration:none}
.mg-auth svg{width:.85em;height:.85em;fill:currentColor;stroke:none;flex:0 0 auto}
/* The portal link is the site's minor menu; it stays left the way it does there.
   The -7px cancels this link's own left padding (.mg-auth a is 6px 7px) so the
   WORD starts on the shell edge, level with the logo below it, rather than 7px
   inside it. The right-hand end needs no such correction: .mg-out is a filled
   pill, so its BOX is the thing that has to line up with the button box above
   it, and it already does. */
.mg-auth .mg-portal{margin-right:auto;margin-left:-7px}
/* WHO YOU ARE IS NOT A LINK. On the site this slot is an <a> to /account/index,
   but inside a tool the only account action worth one click is leaving, and a
   second link beside Sign Out reads as a second way out. */
.mg-auth .mg-who{display:inline-flex;align-items:center;gap:7px;padding:6px 7px;color:#fff}
/* .btn-primary, the site's version of it: brand tan, white ink, and the same
   hover darkening. Not the tool's gold .btn.primary — that one means "save",
   and signing out is not a save. */
.mg-auth .mg-out{background:var(--brand-4);color:#fff;border-radius:3px;
  padding:6px 14px;margin-left:10px}
.mg-auth .mg-out:hover,.mg-auth .mg-out:focus{background:var(--brand-4d);color:#fff}
@media (max-width:640px){
  /* The horizontal padding is NOT restated here any more - it is --shell-pad,
     and re-stating it is what put this strip on its own breakpoint ladder. */
  .mg-auth{gap:0}
  .mg-auth .mg-portal{margin-right:auto}
}

/* ---- buttons ---- */
/* `position:relative` IS THE POP. IT IS NOT DECORATION AND IT IS NOT OPTIONAL.
   Craig, 2026-08-20: "make all buttons be highest level z-index on hover, they
   seem to hvr-pop below other items next to them at times. This should ALWAYS
   be true, i've had to tell you to do this with buttons a number of times."

   He has, and the estate already fixed it once - Spartan_www/TurnerLee/shared/
   core/v1/sst-styles.css, base .btn rule, 2026-08-18. Its comment is worth
   repeating here because this file is exactly how the bug came back:

     z-index is IGNORED on a position:static element. `.btn:hover` had carried
     `z-index:1000 !important` for a long time and it was doing NOTHING - 25 of
     25 buttons measured `hover pos=static z=1000`, inert on every one. That is
     why it keeps getting "fixed" and keeps coming back: it looks correct in
     the sheet and in DevTools' computed panel, and it has never applied.

   mg-admin.css is a SECOND, standalone .btn implementation - these are
   Don't-Use-Template pages and sst-styles.css does not load here - so it
   inherited the class names and none of the lesson. Any future stylesheet in
   this estate that defines its own .btn has to carry this line with it.

   It belongs on the BASE rule, not on :hover. On :hover it would be (0,2,0)
   and would beat a per-button `position:absolute` written as a single class,
   yanking any absolutely-placed button back into flow the moment you point at
   it. Here it is (0,1,0) - a default anything more specific still overrides -
   and it changes no layout on its own, because no offsets are set with it. */
.btn{position:relative;
  height:44px;padding:0 16px;border-radius:6px;border:1px solid var(--line);
  display:inline-flex;align-items:center;gap:7px;font-family:var(--f-display);font-weight:700;
  font-size:14px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);
  text-decoration:none;transition:border-color 220ms,color 220ms,background-color 220ms}
/* THE RAISE. Same value as the SST so a button behaves the same way in this
   tool as it does on every other page in the estate. It only ever has to beat
   its own siblings; a parent that makes a stacking context (the sticky header,
   the modal) still contains it, which is why 1000 is safe rather than greedy.
   :focus-visible as well as :hover - a keyboard user gets the same button. */
.btn:hover,.btn:focus-visible,.btn:active{z-index:1000}
.btn,.btn:hover,.btn:focus{text-decoration:none}
.btn:hover{border-color:var(--accent);color:var(--accent-ink)}
.btn.primary{background:var(--accent);color:var(--ink-on-bright);border-color:var(--accent)}
.btn.primary:hover{background:#f0b53c;border-color:#f0b53c;color:var(--ink-on-bright)}
.btn.ghost{border-color:var(--line-2);color:var(--ink-3)}
.btn.sm{height:36px;padding:0 13px;font-size:13px;letter-spacing:.06em}
.btn.sm svg{width:13px;height:13px}
.btn.danger{background:var(--bad);border-color:var(--bad);color:#fff}
.btn.danger:hover{filter:brightness(1.08);color:#fff}
.btn:disabled{opacity:.35;cursor:default}
.btn svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8}

/* ---- THE SITE'S OWN BUTTON CLASSES ---------------------------------------
   Craig, 2026-08-20: "I'm having a little trouble with the colors of these
   buttons. I have a little trouble finding them. these should be utilizing our
   website defaults with hover color change and class 'hvr-pop' for slight
   animation."  REMOVE V# = btn-danger · PUBLISH V# / SAVE NOW = btn-green ·
   LIVE VIEW = btn-info · MANAGE ARTWORK = btn-warning ("EDIT on all our sites
   is always GOLD") · ALL BOARDS = btn-outline-primary.

   WHY THE DEFINITIONS ARE COPIED HERE INSTEAD OF LINKED.
   /reviews/* are "Don't Use Template" pages, so neither /css/t_tlc-styles.css
   (299KB, and it would restyle every input and panel in this tool) nor
   /css/hover-min.css is loaded. The class NAMES are the site's; without the
   rules they resolve to nothing. Same arrangement as --brand-1/--brand-4 at
   the top of this file: values lifted VERBATIM from the site so the tool and
   the site cannot drift, with the source named on every line that has one.

   Source: css/t_tlc-styles.css, sections "Danger Button . red", "green
   Button", "Info Button . dodgerblue", "Warning Button . gold", "PRIMARY
   (default) Button . color1". Hover/active values are the theme's, not mine.
   ------------------------------------------------------------------------ */

/* --PrimaryButtonColor is emitted by the Treepl brand chain, which does not
   run on a Don't-Use-Template page - var(--PrimaryButtonColor) would resolve
   to nothing here. MongooseSports sets it to --color4, already carried above
   as --brand-4 (#9a846b, "the site's .btn-primary"). Named, not typed, so the
   next site to reuse this tool changes one line. */
:root{ --site-primary:var(--brand-4); --site-primary-d:var(--brand-4d); }

/* THE THREE STATE COLORS, NAMED ONCE, USED BY BOTH THE BUTTONS AND THE TOAST.
   Craig, 2026-08-20: "I want the brighter established danger, warning and
   success colors with opacity like 0.9 opacity for these, want partial show
   thru."

   They are the same three values in two canonical files, which is how they got
   away from each other in the first place:
     css/t_tlc-styles.css       .btn-green #00b52b · .btn-danger #e60000 · .btn-warning gold
     TurnerLee/shared/core/v1/feedback.css  §18 veil/toast, as --bs-success-rgb
       0,181,43 · --bs-danger-rgb 230,0,0 · --bs-warning-rgb 255,215,0
   Identical, and feedback.css says where it got them: "Hard-won geometry from
   SWC / MongooseSports Review Board - keep verbatim." This tool is where that
   component came FROM, and it had since drifted off it - the toast was still
   painting the tool's own #1f964a green and #c0392b red, both duller than the
   estate's, which is what Craig was looking at.

   The rgb triplets exist so alpha can be applied without a second literal of
   the same color. bs-theme.css, which defines --bs-*-rgb, does not load on a
   Don't-Use-Template page. */
:root{
  --fb-success:#00b52b; --fb-success-rgb:0,181,43;
  --fb-danger:#e60000;  --fb-danger-rgb:230,0,0;
  --fb-warning:gold;    --fb-warning-rgb:255,215,0;
}

/* Danger . red */
.btn.btn-danger{background:var(--fb-danger);border-color:var(--fb-danger);color:#fff}
.btn.btn-danger:hover{background:red;border-color:red;color:#fff}
.btn.btn-danger:active{background:red;border-color:red;color:#fff}

/* green.  THE THEME GIVES GREEN NO HOVER DELTA - .btn-green, :hover and
   :active are all #00b52b in t_tlc-styles.css, which is the one thing Craig
   explicitly asked for ("with hover color change"). Every other button in
   that file brightens by ~10% on hover: #e60000 -> red, gold -> #ffed00,
   dodgerblue -> deepskyblue. #00c72f is that same +10% applied to #00b52b,
   so the odd one out follows its own file's rule instead of inventing a
   second convention. Rest and active stay verbatim. */
.btn.btn-green{background:var(--fb-success);border-color:var(--fb-success);color:#fff}
.btn.btn-green:hover{background:#00c72f;border-color:#00c72f;color:#fff}
.btn.btn-green:active{background:var(--fb-success);border-color:var(--fb-success);color:#fff}

/* Orange = KICKOFF. Craig, 2026-08-20: "use btn-orange for NEW VERSION - we
   use orange for all kickoff items & requests." It was btn-green, which in
   this header means PUBLISH - the same green on the thing that starts a round
   and the thing that ends one. */
.btn.btn-orange{background:#ff7200;border-color:#ff7200;color:#fff}
.btn.btn-orange:hover{background:#ff9600;border-color:#ff9600;color:#fff}
.btn.btn-orange:active{background:#ff7200;border-color:#ff7200;color:#fff}

/* Info . dodgerblue */
.btn.btn-info{background:dodgerblue;border-color:dodgerblue;color:#fff}
.btn.btn-info:hover{background:deepskyblue;border-color:deepskyblue;color:#fff}
.btn.btn-info:active{background:#40a1ff;border-color:#40a1ff;color:#fff}

/* Warning . gold = EDIT.  Backgrounds are the theme's three values exactly.
   THE INK IS NOT: t_tlc-styles.css writes #FFFFFF on gold, which measures
   1.40:1 at rest and 1.21:1 on the #ffed00 hover - under the 4.5:1 floor by a
   factor of three. This tool measured that and chose --ink-on-bright (13.04:1
   / 15.13:1) for its own gold buttons on 2026-08-15; see the note on
   `#awModal .btn.gold` in settings.html. Same decision, same reason, kept. */
.btn.btn-warning{background:var(--fb-warning);border-color:var(--fb-warning);color:var(--ink-on-bright)}
.btn.btn-warning:hover{background:#ffed00;border-color:#ffed00;color:var(--ink-on-bright)}
.btn.btn-warning:active{background:#ccad00;border-color:#ccad00;color:var(--ink-on-bright)}

/* Info outline . dodgerblue.  Craig, 2026-08-20: "Let's make it outline-info
   class as well" - LIVE VIEW moved up beside ALL BOARDS, so the two that
   LEAVE this page now read as one pair of outlines and the three that ACT on
   it stay solid. */
.btn.btn-outline-info{background:#fff;border:2px solid dodgerblue;color:dodgerblue}
.btn.btn-outline-info:hover{background:dodgerblue;border-color:dodgerblue;color:#fff}
.btn.btn-outline-info:active{background:#fff;border-color:#40a1ff;color:#40a1ff}

/* Danger outline . red.  Craig, 2026-08-20: "have Unpublish v# be
   outline-danger". PUBLISH is a solid green because it is the round's last
   step; UNPUBLISH is the same weight of decision run backwards, and an outline
   is what says "this is the exit, not the goal" without making the one live
   version on the page look like a warning. */
/* OUTLINE-SUCCESS. Craig, 2026-08-21, naming the class for the PREVIEW button.
   t_tlc-styles.css has NO per-color rule for it - `.btn-outline-success` appears
   there only in the generic "ALL Outline Buttons" lists, which strip shadows and
   then paint every outline `var(--PrimaryButtonColor)`, i.e. the site tan. That
   is not what an outline-success means anywhere else in this tool, and tan is
   already ALL BOARDS.
   So it is DERIVED, not copied, and derived from the one green this file already
   carries: --fb-success (#00b52b, the estate's btn-green), with the same +10%
   hover (#00c72f) the solid .btn-green uses and the same shape as the three
   outlines above it - 2px border, white ground, fills on hover. One green in this
   tool, two weights. */
.btn.btn-outline-success{background:#fff;border:2px solid var(--fb-success);color:var(--fb-success)}
.btn.btn-outline-success:hover{background:#00c72f;border-color:#00c72f;color:#fff}
.btn.btn-outline-success:active{background:#fff;border-color:var(--fb-success);color:var(--fb-success)}
.btn.btn-outline-danger{background:#fff;border:2px solid var(--fb-danger);color:var(--fb-danger)}
.btn.btn-outline-danger:hover{background:red;border-color:red;color:#fff}
.btn.btn-outline-danger:active{background:#fff;border-color:red;color:red}

/* Primary outline . this site's primary color.  2px border and a white fill
   at rest, filling in on hover - the theme's shape, not a thinned copy. */
.btn.btn-outline-primary{background:#fff;border:2px solid var(--site-primary);
  color:var(--site-primary)}
.btn.btn-outline-primary:hover{background:var(--site-primary);
  border-color:var(--site-primary);color:#fff}
.btn.btn-outline-primary:active{background:#fff;border-color:var(--site-primary-d);
  color:var(--site-primary-d)}

/* A COLORED BUTTON STILL HAS TO LOOK DISABLED. .btn:disabled above drops to
   .35, which on a saturated fill reads as a paler button rather than a dead
   one; .55 plus the grayscale is what settings.html already used on its two
   colored buttons before these classes existed. */
.btn.btn-danger[disabled],.btn.btn-green[disabled],.btn.btn-info[disabled],
.btn.btn-warning[disabled],.btn.btn-outline-primary[disabled],.btn.btn-outline-info[disabled],
.btn.btn-orange[disabled],.btn.btn-orange:disabled,
.btn.btn-outline-danger[disabled],.btn.btn-outline-danger:disabled,
.btn.btn-danger:disabled,.btn.btn-green:disabled,.btn.btn-info:disabled,
.btn.btn-warning:disabled,.btn.btn-outline-primary:disabled,.btn.btn-outline-info:disabled{
  opacity:.55;filter:grayscale(.55);cursor:not-allowed}

/* ---- THE SITE'S NOTIFICATION COLORS, from css/main.min.css ---------------
   Craig, 2026-08-20, on the archived-version bar: "should utilize the default
   notifications colors as well." Style guide section 13 documents exactly one
   notification component - `.alert` with `.alert-primary / -secondary /
   -success / -danger / -warning` - so that is what this is, copied verbatim,
   here for the same reason the buttons are: the theme sheet does not load on a
   Don't-Use-Template page.

   Only the two the tool actually uses are carried. Adding the other three
   "for completeness" would put three untested color pairs in a file that has
   to be read; they are one grep away in main.min.css when something needs one.

   NOTE FOR WHOEVER REACHES FOR .alert-info: on this theme info is ORANGE
   (#fce6d9 on #7e4322), not blue - the palette was remapped and only the name
   stayed. .alert-warning is the cream one. */
.alert{position:relative;padding:.75rem 1.25rem;margin-bottom:1rem;
  border:1px solid transparent;border-radius:.25rem}
.alert-warning{color:#7f682f;background-color:#fdf4de;border-color:#fcf0d1}
.alert-danger{color:#782a32;background-color:#fadcdf;border-color:#f8ced2}
.alert-heading{color:inherit}
.alert-link{font-weight:600}

/* ---- hvr-pop, from css/hover-min.css ------------------------------------
   Verbatim, minus the vendor prefixes (this tool is evergreen-only) and minus
   `display:inline-block`, which is the one line that cannot come along: it is
   the same specificity as `.btn{display:inline-flex}` forty lines up and it
   is declared later, so it would win and collapse the icon+label layout of
   every button that has an svg in it. Nothing else in the recipe needs it. */
/* `position:relative` for the same reason as .btn above - hvr-pop goes on
   things that are not buttons too (the site puts it on logo tiles), and a pop
   that paints under its neighbor is the whole complaint. */
.hvr-pop{position:relative;vertical-align:middle;transform:perspective(1px) translateZ(0);
  box-shadow:0 0 1px rgba(0,0,0,0)}
.hvr-pop:hover,.hvr-pop:focus-visible,.hvr-pop:active{z-index:1000}
.hvr-pop:hover,.hvr-pop:focus,.hvr-pop:active{
  animation-name:hvr-pop;animation-duration:.3s;
  animation-timing-function:linear;animation-iteration-count:1}
@keyframes hvr-pop{50%{transform:scale(1.1)}}
/* The pop is a claim that the click will do something. .btn[disabled]:hover
   already kills `filter` and `transform`; an animation is neither, so it has
   to be named separately or a gated SAVE NOW still jumps under the cursor. */
.btn.hvr-pop[disabled]:hover,.btn.hvr-pop:disabled:hover,
.btn.hvr-pop[disabled]:focus,.btn.hvr-pop:disabled:focus{animation:none}
@media (prefers-reduced-motion:reduce){ .hvr-pop:hover,.hvr-pop:focus,.hvr-pop:active{animation:none} }

/* ---- panels ----
   .panel-b is deliberately NOT here: settings lays its panels out as a grid
   with a 22px gap, the manager does not. Shape and typography are shared;
   interior layout is each page's own business. */
.panel{background:var(--panel);border:1px solid var(--line);border-radius:14px;overflow:hidden;
  box-shadow:0 1px 2px rgba(20,21,25,.05)}
/* HEADERS CARRY THE SITE'S DARK CHROME. Craig, 2026-08-15: "all SETTINGS and
   MANAGE ARTWORK windows make every header have the bg color ... consistent
   with website", so the tools read as part of mongoosesports.com rather than as
   a white admin sheet. Measured: #978b87 on #222222 is 4.82:1, over the 4.5:1
   AA floor, and these headers are 15px bold caps so it clears comfortably.
   The border-bottom stays because other rules key off the shape, but it is a
   dark rgba on a dark fill and does no work here — the color change is the
   boundary now. .panel has overflow:hidden, so the fill takes the top corners.
   ANYTHING PLACED IN A HEADER now sits on dark and must be checked: --ink-2 and
   --ink-3 are near-black and disappear. The known residents are handled in
   settings.html beside the components they belong to. */
.panel-h{padding:11px 16px;border-bottom:1px solid var(--line);background:var(--brand-3xd);
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
/* TYPE SET BY CRAIG, 2026-08-15, right after the dark fill landed: h2 13px and
   white, eyebrow 12px. Two things changed at once and both are deliberate.
   SMALLER, because a dark bar already separates the sections — the 15px caps
   were doing the work of a divider as well as a label, and with the fill doing
   the dividing the label can stop shouting.
   WHITE RATHER THAN --brand-1, because 13px is small for caps at .16em and the
   4.82:1 --brand-1 gives is the AA floor for normal text, not for type this
   size. White on --brand-3xd measures 15.91:1. The eyebrow keeps --brand-1:
   it is a count, it is meant to recede, and at 12px it still clears 4.5:1.
   The keyword, not a hex — nothing here needs a new literal. */
.panel-h h2{margin:0;font-family:var(--f-display);font-weight:700;font-size:13px;
  letter-spacing:.16em;text-transform:uppercase;color:white}
.panel-h .eyebrow{font-size:12px;letter-spacing:.16em;color:var(--brand-1)}

/* ---- save state ----
   Sits left of the buttons and stays quiet. It is a reassurance, not an
   alert — it must never look like something needs doing. */
.save-state{font-family:var(--f-display);font-size:14px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3);margin-right:14px;white-space:nowrap;
  display:inline-flex;align-items:center;gap:7px;transition:color .2s var(--ease)}
.save-state::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;
  transition:background .2s var(--ease),opacity .2s var(--ease)}
.save-state[data-k="ok"]{color:var(--ink-3)}
/* "dirty" is a first-class state — it is what a config edit paints since saving
   went manual 2026-08-16 (MGSave RANK has dirty:2), and it had no rule, so
   UNSAVED CHANGES rendered in --ink-3, pixel-identical to ALL SAVED. The
   artwork readout already paints its own "n unsaved" as --warn; this is the
   same fact, so it is the same color. */
.save-state[data-k="dirty"]{color:var(--warn)}
.save-state[data-k="dirty"]::before{opacity:1}
.save-state[data-k="busy"]{color:var(--accent-ink)}
.save-state[data-k="busy"]::before{animation:mgpulse 1.1s ease-in-out infinite}
.save-state[data-k="warn"]{color:var(--warn)}
.save-state[data-k="bad"]{color:var(--bad)}
.save-state[data-k="bad"]::before{opacity:1}
@keyframes mgpulse{0%,100%{opacity:.25}50%{opacity:1}}

/* ====== confirmation dialog ======
   Lifted out of manager.html on 2026-08-10 so /reviews/settings can use the
   same one. Go live used to be a two-tap button whose armed state read
   "Publish v2 to clients?" — a question printed on a control. Craig:
   "i hate a '?' in a button. instead its an action." A dialog is where the
   question belongs; the button says what it does. */
.mgc-back{
  position:fixed;inset:0;z-index:90;display:grid;place-items:center;padding:24px;
  background:rgba(16,17,20,.44);backdrop-filter:blur(3px);
  opacity:0;transition:opacity .18s var(--ease)
}
.mgc-back.on{opacity:1}
.mgc{
  width:min(440px,100%);background:var(--panel);border:1px solid var(--line);
  border-radius:14px;padding:26px 26px 20px;box-shadow:0 24px 60px rgba(10,11,14,.28);
  transform:translateY(8px) scale(.985);transition:transform .18s var(--ease)
}
.mgc.wide{width:min(560px,100%)}
.mgc-back.on .mgc{transform:none}
.mgc-t{margin:0 0 10px;font-family:var(--f-display);font-size:19px;letter-spacing:.02em;color:var(--ink)}
/* ---- +2px ON EVERY DIALOG'S COPY, HEADERS UNCHANGED ----------------------
   Craig, 2026-08-16: "These popup modals for Updating file, uploading images,
   Delete version session, all confirmations, etc, all need to increase the
   body/copy text font size by 2px. the headers are ok as is."
   Raised HERE, once, because every one of those dialogs is this dialog -
   MGUI.confirm, the rename box, the update-file drop and the delete
   confirmation all render `.mgc`. `.mgc-t` at 19px is the header and is left
   exactly where it was. */
.mgc-b{margin:0 0 20px;font-family:var(--f-text);font-size:17px;line-height:1.5;color:var(--ink-2)}
/* THE ACTIONS FILL THE DIALOG. Craig, 2026-08-17: "The modal buttons look stupid
   when left aligned and right aligned. I want those buttons 100% width."
   `flex:1 1 0` rather than width:50%: two buttons split the row exactly, three
   would split it in three, and the gap is taken out of the track rather than
   added to it - so the pair reaches both edges at any count without a second
   number to keep in step. justify-content is now moot and goes; it was what put
   one button on each edge with a hole between them. */
.mgc-acts{display:flex;gap:10px}
.mgc-acts .btn{flex:1 1 0;justify-content:center}

/* ==========================================================================
   CHECKBOXES — the style guide's STANDARD checkbox, ported.

   Craig, 2026-08-21, on the new-version carry-over picker: "if you can use the
   STANDARD Checkboxes in the Style Guide". So the class names are the guide's
   QUICK block unchanged — `.form-check` + `.form-check-input` +
   `.form-check-label` — and the values below are MEASURED off this site rather
   than matched by eye.

   WHY THE RULES ARE RESTATED HERE AT ALL. /reviews/* are "Don't Use Template"
   pages: css/t_tlc-styles.css never loads, so the guide's classes resolve to
   nothing on this surface. Exactly the same arrangement, for exactly the same
   reason, as .btn-green / .btn-warning further up this file — the names are the
   site's, the values are carried because the sheet that owns them does not run.

   SOURCE: css/t_tlc-styles.css, section "Checkbox" / "Checkbox Solid Fill
   Style". Read back as COMPUTED values from mongoosesports.com on 2026-08-21,
   because the four brand variables that rule depends on are emitted by the
   Treepl brand chain and are not in any file on disk:
     --InputLabelColor        #978b87   -> already here as --brand-1
     --InputBgColor           rgba(255,255,255,.1)  -> over --panel this IS --panel
     --PrimaryButtonColor     #9a846b   -> already here as --brand-4 / --site-primary
     --PrimaryButtonHoverColor #c2afa0  -> NOT previously carried; named below
   Geometry from the rule itself: 22x22, 1px border, border-radius 1px, and a
   1.5px border on the checked state.

   THERE IS NO TICK, AND THAT IS NOT AN OMISSION. The "Checkmark Style" block in
   t_tlc-styles.css is COMMENTED OUT, so the estate's checked state is a solid
   fill and nothing else. It is what the style guide renders and what Craig sent
   a screenshot of. Do not "fix" it by adding a checkmark.

   ONE DEPARTURE FROM THE MECHANISM, none from the result. The guide hides the
   input and draws the box on `label:before`, which makes the box depend on an
   input+label adjacency. Here `appearance:none` paints the input itself: the
   pixels are the same, the control keeps its native focus ring and keyboard
   behavior, and a row is free to put a thumbnail between the box and its
   label. Anything pasted from the guide still renders, because the class names
   and the painted result are unchanged.

   THE FILL IS --accent, NOT THE SITE'S BUTTON COLOR, AND THAT IS DELIBERATE.
   Craig, 2026-08-21, shown the faithful port rendering in the site's tan
   (#9a846b, which is what --PrimaryButtonColor resolves to here - the guide
   screenshot is blue because it was taken on TurnerLee and the component
   resolves per site): "Yes gold is perfect, it was the structure important,
   the color goes MG like you did."

   So the GEOMETRY is the guide's, verbatim and measured - 22x22, 1px border,
   radius 1px, solid fill, no tick - and the COLOR is this tool's. Every
   selected control on this board is gold (.chip[aria-checked], .swch, .tab.is-on,
   .pal-tone-b.is-on), and a checkbox that alone said "selected" in a second
   color would be teaching two vocabularies on one screen.

   The ink question the accent normally raises does not arise: there is no tick
   to put on the fill, so nothing has to be legible against the gold. What the
   fill has to be is UNMISTAKABLE against the unchecked box, and gold on white
   beside a --brand-1 hairline is exactly the contrast the chips already rely on.

   --site-primary-l is left declared below. It is a real measured brand value,
   nothing else in this file carries it, and the day someone wants the faithful
   per-site rendering back it is two tokens rather than a re-measure.
   ========================================================================== */
:root{
  /* #c2afa0 is --PrimaryButtonHoverColor on mongoosesports.com, measured
     2026-08-21. It is the LIGHTER step, not --brand-4d (#8a7760) which is the
     darker one this file already carries for :active. Both exist; they are not
     interchangeable and the checked border wants this one. */
  --site-primary-l:#c2afa0;
  /* GOLD, per Craig above. Both the fill and the checked border take --accent:
     the guide puts its lighter hover step on the checked border, and the gold
     equivalent of that is the accent itself - which is also exactly what
     .chip[aria-checked] does (border-color:var(--accent) plus a 1px inset of
     the same). One selected treatment, stated once. */
  --check-on:var(--accent);
  --check-line:var(--accent);
}
.form-check{display:grid;grid-template-columns:auto minmax(0,1fr);gap:11px;
  align-items:center;min-height:30px}
.form-check-input{appearance:none;-webkit-appearance:none;margin:0;flex:0 0 auto;
  width:22px;height:22px;border:1px solid var(--brand-1);border-radius:1px;
  background:var(--panel);cursor:pointer;
  /* The guide runs .7s on this. That is a form field being filled in by hand;
     a 60-row picker being swept with a group toggle at .7s reads as lag, and
     what the eye is checking is which rows moved. 160ms is this file's own
     transition for every other selected control. */
  transition:background-color 160ms var(--ease),border-color 160ms var(--ease)}
.form-check-input:hover{border-color:var(--check-line)}
.form-check-input:checked{background:var(--check-on);border:1.5px solid var(--check-line)}
/* Indeterminate is NOT in the style guide - the guide has no group-header
   checkbox to be half-selected. It is stated in the same two colors so it
   cannot drift from the checked state it is a half of: the fill at the border's
   weight, drawn as a bar, so "some" never reads as "all" at a glance. */
.form-check-input:indeterminate{background:var(--panel);border:1.5px solid var(--check-line);
  display:grid;place-items:center}
.form-check-input:indeterminate::after{content:"";width:12px;height:3px;
  background:var(--check-on)}
.form-check-input:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.form-check-input:disabled{opacity:.4;cursor:default}
.form-check-input:disabled + .form-check-label{opacity:.4;cursor:default}
/* NOT the guide's 1.25rem/20px. That size is for a form page; this tool states
   list text at 17px (.cl-go, .hint, .row>span small) and a 20px filename beside
   a 17px one three rows up is the sibling-tool drift this file exists to stop. */
.form-check-label{font-family:var(--f-text);font-weight:300;font-size:17px;line-height:1.4;
  color:var(--ink-2);cursor:pointer;min-width:0}
.form-check-inline{display:inline-grid;margin-right:16px}

/* ---- THE CARRY-OVER PICKER, INSIDE MGUI.prompt ---------------------------
   Craig, 2026-08-21: "it did not ask me if there was any files i wanted to
   carry over from v2 to the new version ... standard checkbox list ... with
   each current image (small icon if possible) and name."
   It is a list inside the one dialog every admin page already uses, not a new
   modal - the same rule that kept MGUI.prompt from being a second dialog.
   The list SCROLLS and the dialog does not: the actions and the count must
   stay put while sixty rows go past them. */
.mgc-pick{margin:0 0 16px;border:1px solid var(--line);border-radius:10px;
  max-height:min(46vh,420px);overflow:auto;overscroll-behavior:contain}
.mgc-pick-g + .mgc-pick-g{border-top:1px solid var(--line)}
/* The group head IS a checkbox row, so taking a whole concept is the same
   gesture as taking one file rather than a differently shaped control above
   them. position:sticky because the thing you lose first when scrolling a
   grouped list is which group you are in. */
.mgc-pick-h{position:sticky;top:0;z-index:1;
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:11px;align-items:center;
  padding:10px 14px;background:var(--panel-2);border-bottom:1px solid var(--line-2)}
.mgc-pick-h .form-check-label{font-family:var(--f-display);font-weight:700;font-size:13px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2)}
.mgc-pick-n{font-family:var(--f-display);font-weight:400;font-size:12px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-3);white-space:nowrap}
.mgc-pick-r{display:grid;grid-template-columns:auto auto minmax(0,1fr);gap:12px;align-items:center;
  padding:7px 14px;cursor:pointer;transition:background-color 160ms var(--ease)}
.mgc-pick-r + .mgc-pick-r{border-top:1px solid var(--line-2)}
.mgc-pick-r:hover{background:var(--panel-2)}
.mgc-pick-r.is-on{background:rgba(227,165,42,.09)}
/* 38px is the swatch size this tool already uses (.swch), so a column of file
   icons lines up with every other column of small squares in it. `contain`,
   never `cover`: these are logo marks and cropping one to fill a square shows
   a different mark than the client will see. */
/* 46px, NOT the 38px swatch size this file uses everywhere else, and the
   reason is measured: a horizontal lockup contained inside 38px renders 28x12,
   which is a smudge rather than a mark you can recognize a concept by. A color
   swatch is legible at 38px because it has no shape to read; a logo has nothing
   else. `contain` with the image filling the box, never `cover`: cropping a
   logo to square shows a different mark than the client will see. */
.mgc-pick-th{width:46px;height:46px;flex:0 0 auto;border-radius:6px;
  border:1px solid var(--line);background:var(--panel);padding:3px;
  display:grid;place-items:center;overflow:hidden}
.mgc-pick-th img,.mgc-pick-th svg{width:100%;height:100%;object-fit:contain;display:block}
.mgc-pick-th.is-none{font-family:var(--f-display);font-weight:700;font-size:9px;
  letter-spacing:.06em;color:var(--ink-3);border-style:dashed}
.mgc-pick-nm{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:baseline;gap:9px;
  min-width:0}
.mgc-pick-nm b{font-family:var(--f-text);font-weight:400;font-size:17px;color:var(--ink);
  min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mgc-pick-nm small{font-family:var(--f-text);font-weight:300;font-size:15px;color:var(--ink-3);
  min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:620px){ .mgc-pick-nm small{display:none} }
/* THE COUNT IS THE SENTENCE. Somebody minting a version wants to know how many
   files land in it before the folder exists, not after - so it sits directly
   above the button that will do it, at reading size. */
.mgc-count{margin:0 0 14px;font-family:var(--f-text);font-weight:300;font-size:17px;
  color:var(--ink-2)}
.mgc-count b{font-family:var(--f-display);font-weight:900;font-size:19px;color:var(--ink)}
.mgc-pick-all{display:flex;gap:8px;align-items:center;margin:0 0 12px}
.mgc-pick-all .btn{height:34px;padding:0 12px;font-size:12px;letter-spacing:.06em}
/* ---- THE PROMPT DIALOG'S ONE FIELD ---------------------------------------
   MGUI.prompt reuses .mgc-back / .mgc / .mgc-t / .mgc-b / .mgc-acts wholesale -
   a second dialog shell is how this codebase grew three filename parsers - so
   these three classes are the only thing it adds. The field is big because the
   thing being typed is a version number and the Settings page already
   established that voice: three characters, read at a glance, confirmed under
   pressure.
   .mgc-err is display:none from JS until there is something to say; it never
   reserves a line it is not using, because a dialog that changes height on
   submit is worse than one that does not. */
.mgc-fld{display:flex;align-items:center;gap:8px;margin:0 0 14px}
.mgc-pre{font-family:var(--f-display);font-weight:900;font-size:34px;line-height:1;
  color:var(--ink-3)}
.mgc-fld .fld{width:150px;height:56px;padding:0 10px;
  font-family:var(--f-display);font-weight:900;font-size:34px;letter-spacing:.02em;
  color:var(--ink);text-align:left}
.mgc-err{margin:-6px 0 14px;font-family:var(--f-text);font-size:15px;color:var(--danger,#b3261e)}
/* Text entry inside a dialog, and the live verdict under it. Monospace on the
   input because everything typed into one of these so far is a FILENAME, where
   the difference between `1c-gold` and `1c-go1d` has to be visible.

   Both live here rather than in manager.html on purpose: `.mgc` and the rest of
   this dialog are already in this file, and the last time two admin pages each
   kept their own copy of shared chrome they drifted to different sizes and
   colors and Craig had to report it twice. A settings dialog that needs an
   input should inherit this one, not re-derive it. */
.mgc-in{width:100%;height:46px;padding:0 14px;border-radius:8px;
  border:1px solid var(--line-2);background:var(--panel);color:var(--ink);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:17px;
  transition:border-color 200ms}
.mgc-in:focus{border-color:var(--accent);outline:none}
/* Reserves its line whatever it says, so the dialog cannot resize under the
   cursor between one keystroke and the next. */
.mgc-read{min-height:22px;margin:10px 0 20px;font-family:var(--f-text);
  font-size:16px;line-height:1.5;color:var(--ink-3)}
.mgc-read.ok{color:var(--ok)}
.mgc-read.bad{color:var(--bad)}

/* ====== unpublished-changes bar ======
   Go live lives at the FOOT of the settings page, and the work happens on the
   manager. Craig, 2026-08-10: "uploading a bunch of _var images now I don't
   think to go back to SETTINGS and go to the bottom of the page."
   So the manager says so, in the one place he is already looking, and only
   when it is actually true. */
.mg-pub{
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  margin:0 0 18px;padding:14px 18px;border-radius:10px;
  background:var(--accent-soft);border:1px solid var(--accent);
  font-family:var(--f-text);font-size:14px;color:var(--ink)
}
.mg-pub b{font-family:var(--f-display);font-weight:700;letter-spacing:.04em}
.mg-pub .mg-pub-x{margin-left:auto;display:flex;gap:10px;align-items:center}
.mg-pub-when{font-size:13px;color:var(--ink-3)}
/* The settings page pulses its Go live button when the manager sends you
   there, so the thing you were told to press is the thing that moves. */
@keyframes mgfind{0%,100%{box-shadow:0 0 0 0 rgba(227,165,42,0)}
                  50%{box-shadow:0 0 0 10px rgba(227,165,42,.35)}}
.btn.is-find{animation:mgfind 1.1s ease-in-out 3}