/* focalshift-mc-frame :: assets/maven-drawer-c/drawer.css
   WO-MAVEN-DRAWER-C — the SHIPPED drawer's concept, designed a little better, with the
   fill-in-the-blank pick mechanic folded into its body. Page-scoped: every selector sits under
   .mvdc / .mvdc-fx / .mvdc-state, and the sheet is enqueued only by page-maven-drawer-c.php.
   The generated pill -> blank wiring rides with it as inline CSS from inc/maven-drawer-c.php,
   so the question list stays the single source of truth.

   WHAT IS KEPT FROM THE SHIPPED DRAWER (inc/maven-c.php), DELIBERATELY AND VISIBLY:
     · centre-bottom "Meet Maven" trigger with the hummingbird, bound to the LIVE content column
     · a sheet that rises to three-quarters of the viewport with a 180px FLOOR under the visible
       strip of page — the sheet shrinks rather than swallow it
     · clicking the dimmed page collapses it
     · the two-column body: the ask path on the left, the ALL TOOLS browse path down the right
     · the centred hummingbird, the rotating heading, her own "way more advanced" line
     · one typed input carrying a Return affordance, and a Meet Maven commit key under the picks

   WHAT IS NEW HERE IS FINISH, NOT STRUCTURE:
     · NO BORDERS. The shipped sheet separates with 1px --line rules in eleven places; every one
       of them is re-solved here as a background tone-step, a shadow or spacing.
     · SQUARE CORNERS. 13px/14px/200px capsules become 6px, under the 8px house ceiling.
     · NO GRADIENT — WITH ONE OWNER-SANCTIONED EXCEPTION. Everything in this sheet is a solid
       fill except the rotating word in the heading, which keeps the shipped drawer's own
       clipped-gradient treatment by ruling. That word is hers; the exception is that element
       and nothing else, and its declarations are copied from inc/maven-c.php rather than
       reinvented. See section 3.
     · PERIWINKLE NEVER CARRIES WHITE. Every periwinkle fill in this sheet names --peri-ink.
     · TYPE HIERARCHY. The visitor's own sentence is the largest thing in the drawer; the
       heading steps back to greet rather than compete, and the stations sit a size below both.
*/

/* ==========================================================================
   0 · TOKENS. Declared on .mvdc-fx AND on .mvdc-state, because the state checkbox is a
   SIBLING of the layer rather than a descendant — custom properties inherit down the tree and
   not sideways, and a token that fails to reach the checkbox takes its geometry with it.
   One rule, two selectors, so they cannot drift apart.
   ========================================================================== */
.mvdc-fx,.mvdc-state{
  --ui:var(--fsmcf-font,'Inter',system-ui,-apple-system,sans-serif);
  --dsp:var(--fs-font-display,var(--fsmcf-font-display,'Sora',system-ui,sans-serif));

  --surf:#ffffff;        /* the sheet                                        */
  --surf2:#f2f3fb;       /* the tone-step that replaced every 1px rule       */
  /* RULED LIGHTER (revision 1). The column was #f7f8fd and read as a grey slab beside a white
     sheet. It is now all but the sheet's own white, and the separation it used to get from fill
     is taken over by SHADOW at its left edge and by the rows, which now carry the tone. No
     border was introduced to pay for it. */
  --allbg:#fbfcff;       /* the All Tools column                             */
  --row:#eef0f8;         /* rows inside it — they hold the tone now          */
  /* THE CLICKABLE OPTION BOXES (revision 4). Light charcoal, carrying light ink. Measured, both
     themes, against the ink they actually ship with — the numbers are in the lane's report. */
  /* ⭐ THE BRAND PINK, AND IT IS #F06494 — NOT the chrome's hot magenta. The first attempt here
     took the theme stylesheet's pink SCALE (--color-pink-700 #c6005c, a sibling of the #ff2e93
     badge magenta) and it read as red. That colour is gone from this element entirely.
     THE FILL IS THE BRAND PINK AT FULL STRENGTH: #F06494 on the hexagon, carrying DARK ink —
     white on #F06494 measures 3.0:1 and is not allowed, so the glyph takes #510424 (4.99:1).
     THE LABEL CANNOT BE #F06494: as text on this rail it measures 2.92:1. It takes the same
     hue (339 degrees, the brand pink's own) deepened only as far as the floor demands:
     #C4426F, 4.67:1 in light. Deepened, not re-hued — it is still the brand pink, darker. */
  /* THE HEXAGON FILL — the close-tab tint itself, EXACT in both themes now: base #FF2E93 at the
     .16 the site's close controls (.mc-railx/.sidebar-close/.fsmcf-msheet-close) use. By ruling,
     light keeps that soft tint rather than a heavier fill, and pays for the white-plus problem a
     different way: over the pale light row (#EEF0F8) the tint composites to rgb(241,209,232), on
     which a WHITE plus is 1.4:1 (invisible) — so LIGHT uses a DARK plum plus (#510424, 10.79:1),
     while DARK keeps its white plus (13.93:1). Same fill, opposite glyph, each measured on its
     own composited surface. */
  --pink:rgba(255,46,147,.16);
  --pink-ink:#F06494;    /* label text, deepened to clear 4.5:1 — UNCHANGED by this ruling */
  --pink-glyph:#F06494;  /* DARK plum plus on light: 10.79:1 on the composited .16 tint */
  /* THE RETURN GLYPH sits on the INPUT surface (--surf2 #f2f3fb), not on the rail, so it needs
     its own measurement: the brand pink #F06494 is 2.73:1 there and the rail's #C4426F is 4.36:1
     — both short. Deepened along the SAME hue (339°) only as far as the floor demands. */
  --ret:#C33D6B;         /* 4.52:1 on #f2f3fb */
  --ret-hover:#9E2F55;   /* deeper still, same hue                          */
  /* THE TRIGGER SURFACE — the shipped drawer's own trigger colours, restored. NOT black: white
     in light, a purplish charcoal in dark, both chosen to sit under the periwinkle hexagon. */
  --trig:#ffffff;
  --trig-ink:#2a2b3d;    /* 13.89:1 on the white trigger                    */
  --pick:#5d6178;        /* lifted from #4f5368 by ruling — lighter, still charcoal */
  --pick-ink:#f4f5fb;
  --pick-hover:#6b7089;
  --ink:#22233a;
  --mut:#5a5b74;
  --dim:#6b6c85;
  --chip:#e7e9f5;        /* ghost ordinals, quiet fills                      */
  --chip-ink:#2b3150;
  --peri:#8b87ff;
  --peri-ink:#12132b;    /* the ink periwinkle ALWAYS carries                */
  --in:#5b57ef;          /* indigo, the accent                               */
  --in2:#4b47d6;
  --on-in:#ffffff;
  --acc:#5b57ef;         /* accent as TEXT — hands over to periwinkle in dark */
  --scrim:rgba(24,24,48,.22);
  --shadow:0 1px 2px rgba(16,20,45,.05),0 8px 24px -10px rgba(16,20,45,.20);
  --lift:0 -26px 60px -30px rgba(20,20,60,.5);

  --left:var(--mvdc-left,65px);   /* the frame's fixed left rail, measured live */
  --top:var(--mctop,64px);        /* the frame's fixed header                   */
  --strip:180px;                  /* THE FLOOR under the visible page strip     */
  /* Three-quarters of the viewport is what the sheet WANTS; the strip of live page above it is
     what the sheet OWES. min() this way round is what makes the sheet the thing that gives. */
  --dh:min(75vh,calc(var(--mvdc-vh,100vh) - var(--top) - var(--strip)));
}
html.fs-dark .mvdc-fx,html[data-theme="dark"] .mvdc-fx,
html.fs-dark .mvdc-state,html[data-theme="dark"] .mvdc-state{
  --surf:#1d1e2b;
  --surf2:#252838;      /* LIGHTER than the sheet in dark: "lighter" is a direction, not a value */
  --allbg:#34364c;      /* ruled lighter, and in dark "lighter" is a step AWAY from the sheet */
  --row:#1d1e2b;
  /* DARK: the EXACT close-tab tint — #FF2E93 at .16 — composited over the dark row (#1d1e2b) to a
     soft magenta the WHITE plus reads on at 13.93:1. Light uses the SAME .16 fill; only the glyph
     differs by theme (white here, dark plum on light), because the composited surface flips. */
  --pink:rgba(255,46,147,.16);
  --pink-ink:#F06494;    /* label text, LIFTED for a dark rail: 5.05:1 — UNCHANGED by this ruling */
  --pink-glyph:#F06494;  /* WHITE bold plus on the dark-composited tint: 13.93:1 */
  /* on the DARK input surface the brand pink itself clears the floor comfortably, so the glyph
     gets to wear #F06494 unmodified — the truest statement of the pink available in either theme */
  --ret:#F06494;         /* 6.01:1 on the dark input surface #14151f */
  --ret-hover:#F587B0;   /* 7.76:1                                   */
  /* NOT #1d1e2b (that near-black surf is what read as "black"). The shipped drawer's own dark
     trigger tone — a purplish charcoal that pairs with the periwinkle hexagon. */
  --trig:#2e2f44;
  --trig-ink:#eef0fb;    /* 11.51:1 on #2e2f44                               */
  --pick:#4a4f66;        /* lifted from #3c4054 — and further from the sheet, not nearer */
  --pick-ink:#eef0fa;
  --pick-hover:#565b74;
  --ink:#e9e9f3;
  --mut:#b9bacb;
  --dim:#9294ab;
  --chip:#33364a;
  --chip-ink:#dfe3f5;
  --acc:#8b87ff;        /* indigo cannot hold small text on a dark sheet */
  --scrim:rgba(4,4,12,.46);
  --shadow:0 1px 2px rgba(0,0,0,.4),0 10px 26px -12px rgba(0,0,0,.5);
  --lift:0 -26px 60px -30px rgba(0,0,0,.7);
}

.mvdc-fx *{box-sizing:border-box}
.mvdc-fx{font-family:var(--ui);color:var(--ink)}
.mvdc-fx p{margin:0}
.mvdc-fx h2,.mvdc-fx h3{font-family:var(--dsp);letter-spacing:-.025em;margin:0;color:var(--ink)}
.mvdc-fx a{color:inherit;text-decoration:none}
.mvdc-fx :focus-visible{outline:3px solid var(--acc);outline-offset:2px;border-radius:4px}
/* ⚠️ .mvc-ic IS NOT A TYPO AND IT IS NOT OPTIONAL. The icons in the browse column, the (+) and
   the close key are drawn by the SHIPPED helper fsmcf_mavc_use(), which emits <svg class="mvc-ic">
   and keeps every shared presentation attribute — fill:none, stroke:currentColor, the stroke
   width and the joins — in the shipped drawer's OWN stylesheet, to save bytes on ~170 pages.
   That sheet is not on this page. Without this rule every glyph falls back to the SVG default of
   fill:black/stroke:none, and a stroke-only glyph like the close × paints absolutely nothing:
   an empty box where a control is. Measured on the deployed page, not guessed at. */
.mvdc-ic,.mvdc-fx .mvc-ic{flex:0 0 auto;display:block;fill:none;stroke:currentColor;
  stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

/* The frame ships two lower-right hummingbirds (footer.php .fsmcf-fab, mu-plugin .fsmv-fab).
   The shipped drawer's own sheet normally stands them down; with that furniture suppressed on
   this page, this sheet takes the job over. Body-class form first, :has() as belt and braces. */
.mvdc-page .fsmcf-fab,.mvdc-page .fsmcf-fab-btn,.mvdc-page .fsmv-fab{display:none!important}
html:has(.mvdc-fx) .fsmcf-fab,html:has(.mvdc-fx) .fsmcf-fab-btn,
html:has(.mvdc-fx) .fsmv-fab{display:none!important}

/* ==========================================================================
   1 · STATE — one native checkbox, and it is NOT hidden from the keyboard. The shipped drawer
   marks its state box aria-hidden with tabindex="-1" and drives it from two <label>s, which
   leaves a keyboard user with no way to open or close the sheet at all. Here the box keeps its
   place in the tab order and the labels keep the visuals; the focus ring is drawn onto
   whichever label is currently doing the job. Same furniture, one defect less.
   ========================================================================== */
.mvdc-state{position:fixed;bottom:24px;left:50%;width:1px;height:1px;margin:0;padding:0;
  opacity:0;pointer-events:none;appearance:none;-webkit-appearance:none;z-index:1}
.mvdc-state:focus-visible ~ .mvdc-fx .mvdc-trigger{outline:3px solid var(--acc);outline-offset:3px}
.mvdc-state:checked:focus-visible ~ .mvdc-fx .mvdc-shut{outline:3px solid var(--acc);outline-offset:2px}

/* --- the trigger: centre-bottom, on the LIVE content column. Restored to the shipped drawer's
       own dimensions (padding 11px 20px 11px 12px, radius 13px, 14.5px label), now carrying the
       FAB-era purplish hexagon around the bird and a surface that is NOT black. --- */
.mvdc-trigger{position:fixed;bottom:20px;z-index:64;
  left:calc(var(--left) + (var(--mvdc-vw,100vw) - var(--left)) / 2);transform:translateX(-50%);
  display:inline-flex;align-items:center;gap:9px;padding:11px 20px 11px 12px;border-radius:13px;
  background:var(--trig);color:var(--trig-ink);font:700 14.5px var(--ui);cursor:pointer;
  box-shadow:0 1px 2px rgba(16,20,45,.06),0 16px 38px -16px rgba(28,26,90,.42);
  transition:opacity .2s,transform .2s,visibility .2s,color .16s}
html.fs-dark .mvdc-trigger,html[data-theme="dark"] .mvdc-trigger{
  box-shadow:0 1px 2px rgba(0,0,0,.5),0 16px 38px -16px rgba(0,0,0,.8)}
/* ⭐ THE PURPLISH HEXAGON, BACK ON THE TRIGGER. Same clip-path geometry as the site's FAB/close
   hexagon (polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)); a SOLID periwinkle tint (no
   gradient — the house law) with a periwinkle drop-shadow for the FAB-era glow, holding the real
   hummingbird. */
.mvdc-trighex{width:34px;height:34px;flex:0 0 34px;display:inline-flex;align-items:center;
  justify-content:center;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
  background:rgba(139,135,255,.20);filter:drop-shadow(0 4px 11px rgba(97,93,250,.40));
  transition:filter .2s}
html.fs-dark .mvdc-trighex,html[data-theme="dark"] .mvdc-trighex{background:rgba(139,135,255,.26)}
.mvdc-trighex img,.mvdc-trighex svg{display:block;width:26px;height:26px}
.mvdc-trigger:hover .mvdc-trighex{filter:drop-shadow(0 8px 20px rgba(97,93,250,.55))}
.mvdc-trigger:hover{color:var(--acc)}
.mvdc-state:checked ~ .mvdc-fx .mvdc-trigger{opacity:0;visibility:hidden;transform:translate(-50%,16px)}

/* ==========================================================================
   2 · THE LAYER — scrim, then sheet. Clicking the dimmed page collapses the drawer with no
   script at all: the scrim is a <label> pointed at the state checkbox.
   ========================================================================== */
/* ⭐ RAIL-HOVER GUARD. While the sheet is open the chrome's left rail (a fixed column at z-index
   66, ABOVE the sheet) still fired its hover fly-out, and it stayed stuck until a reload. This
   transparent catcher is raised ABOVE the rail (z-index 71) across the rail strip only
   (left 0 → --left, below the header), so pointer and hover events land on it and never reach the
   rail — the fly-out can't trigger. It is a <label> for the state box, so a click there collapses
   the sheet, consistent with the scrim. Off (pointer-events:none) when the sheet is closed, so
   the rail behaves normally again with no reload. No chrome file is edited. */
.mvdc-railcatch{position:fixed;left:0;top:var(--top);width:var(--left);bottom:0;z-index:71;
  pointer-events:none;background:transparent;cursor:default}
.mvdc-state:checked ~ .mvdc-fx .mvdc-railcatch{pointer-events:auto}

.mvdc-scrim{position:fixed;top:var(--top);left:var(--left);right:0;bottom:0;z-index:58;
  background:var(--scrim);opacity:0;visibility:hidden;cursor:default;
  transition:opacity .24s,visibility .24s}
.mvdc-state:checked ~ .mvdc-fx .mvdc-scrim{opacity:1;visibility:visible}

/* THE SHEET SPANS THE WHOLE CONTENT COLUMN — rail to right edge — as it always has. A centred
   85%-wide sheet was tried under an earlier ruling and reverted to this on the settled one; the
   dimmed page shows above the sheet, which is what the 180px floor is for. */
/* ⭐ GENIE-FROM-THE-BOTTLE OPEN. transform-origin is the trigger's point — bottom-centre of the
   content column, which is also the sheet's own 50% 100% — so the closed sheet is a small shape
   pinned there (scaled down, risen, faded) and the open sheet expands UP out of it into the same
   75vh/180px-floor box it has always filled. Transform + opacity only; nothing reflows. The open
   state is still driven purely by the checkbox (:checked), so the no-JS open is untouched — the
   genie is only the transition sitting on top of it. */
.mvdc-drawer{position:fixed;left:var(--left);right:0;bottom:0;z-index:59;
  height:var(--dh);background:var(--surf);border-radius:0;box-shadow:var(--lift);
  transform-origin:50% 100%;
  transform:translateY(26px) scale(.86);opacity:0;visibility:hidden;
  transition:transform .42s cubic-bezier(.16,.84,.34,1),opacity .3s ease,visibility .42s;
  display:flex;flex-direction:column;overflow:hidden}
.mvdc-state:checked ~ .mvdc-fx .mvdc-drawer{transform:none;opacity:1;visibility:visible}

/* the close key: a control, not a band — out of the flow, so the bird keeps the full width.

   ⭐ THE HOUSE CLOSE HEXAGON, BY RULING (Hans, 8/11, viewing the live site-wide drawer). It was
   a plain cross on a rounded tone-step, which is not how this site closes anything. It is now
   the hexagon carrying the cross, at the SAME clip-path geometry as every other close and FAB
   hexagon on the site — polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%) — and the same
   pair of fills the trigger's dock key (.mvdc-dhex) uses, so the two controls are visibly one
   convention rather than two lookalikes.

   ⚠️ THE CONTRAST FLIPS WITH THE THEME, AND THAT IS THE WHOLE POINT. Light fills the hexagon
   with INDIGO and the cross is white: 5.13:1, and white on indigo is allowed. Dark fills it with
   PERIWINKLE and the cross takes the dark ink periwinkle ALWAYS carries: 6.01:1. White on
   periwinkle measures 3.00:1 and is banned on this site, so it is the GLYPH that flips, never
   the fill. Both numbers are computed against the fill each theme actually ships.

   The hexagon is a separate aria-hidden span, not a background on the label, for two reasons:
   a clip-path on the label would clip the cross away with it, and the focus ring has to stay a
   rectangle around the whole control rather than follow the hexagon's points. The label keeps
   its 6px radius purely to soften that ring — it paints nothing itself. */
/* ⭐ CORRECTED (Hans, 8/11). The first pass gave this the TRIGGER's indigo/periwinkle dock
   hexagon. Wrong control. It is the LEFT RAIL SUBMENU POP-OUT's close — the site's one close
   control — and the platform law lives in the frozen chrome (header.php, sitepolish-0808,
   a port of Mission Control's private_html/_fs_closehex.php):

       "pink #ff2e93 is the close-X HEXAGON, never a circle or a square"

   ⛔ NO CHROME FILE WAS EDITED, AND THE CLASS WAS NOT BORROWED EITHER. Hanging .sidebar-close
   on the label would have inherited the rule for free — and would also have handed the rail's
   own click handling a second element to find on every page. The declarations are reproduced
   instead, read off the DEPLOYED control rather than off a minified bundle, and they resolve
   through the chrome's OWN custom properties, so an admin who repoints the brand pink repaints
   this control along with all the others.

   MEASURED ON THE RAIL'S CLOSE, REPRODUCED HERE EXACTLY:
     hexagon   polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%) · radius 0 · no border,
               no shadow
     box       24 x 27 · inline-flex · centred · line-height 1
     fill      color-mix(in srgb, var(--fs-chx) 16%, transparent), and 32% on hover
     glyph     the lucide cross at 12 x 12, stroke-width 2.6, stroke currentColor
     colour    var(--fs-chx-x) — THE SAME PINK IN BOTH THEMES. The rail's control ships no dark
               variant, so this one must not either; flipping it by theme would make it a
               different control that merely resembles the rail's.

   ⚠️ THE ONE DELIBERATE DEPARTURE, AND IT IS NOT COSMETIC. The chrome puts the clip-path on the
   control itself, which clips its focus ring away with it. This label is how a keyboard user
   leaves the sheet, so the clip lives on the .mvdc-shuthex span and the label stays unclipped
   to carry the ring. What is painted is identical; the ring survives. */
.mvdc-shut{position:absolute;top:12px;right:14px;z-index:6;display:inline-flex;align-items:center;
  justify-content:center;width:24px;height:27px;border-radius:4px;border:0;box-shadow:none;
  line-height:1;background:transparent;color:var(--fs-chx-x,#ff2e93);cursor:pointer}
.mvdc-shuthex{position:absolute;inset:0;
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
  background:color-mix(in srgb,var(--fs-chx,#ff2e93) 16%,transparent);transition:background .15s}
.mvdc-shut:hover .mvdc-shuthex{background:color-mix(in srgb,var(--fs-chx,#ff2e93) 32%,transparent)}
/* the cross rides above the hexagon and takes the control's colour */
.mvdc-shut .mvdc-shutx{position:relative;z-index:2;width:12px;height:12px;
  stroke:currentColor;stroke-width:2.6;fill:none;color:inherit}

/* the two columns, as shipped: ask on the left, browse down the right */
.mvdc-form{flex:1 1 auto;min-height:0;overflow-y:auto;
  display:grid;grid-template-columns:minmax(0,1fr);gap:0}
/* THE BROWSE COLUMN IS 296px, DOWN FROM 348px — fifteen per cent, by ruling. The freed 52px is
   not parked anywhere: the ask column is minmax(0,1fr) and takes all of it. Nothing in the rail
   is set to nowrap — the tool name and its blurb are block-level and wrap — so the narrower
   column is paid for in height, not in truncation, and the rail scrolls as it already did. */
@media(min-width:900px){.mvdc-form{grid-template-columns:minmax(0,1fr) 296px;overflow:hidden}}

/* ==========================================================================
   3 · THE ASK COLUMN — her header, then the visitor's sentence as the display type.
   ========================================================================== */
/* THE SHEET OPENS WITH SPACE. The bird was landing 30px under the top edge with the close key
   beside it; it now has more than twice that above it, and the drawer starts on a breath
   instead of on furniture. */
.mvdc-ask{padding:64px 30px 34px;min-width:0}
@media(min-width:900px){.mvdc-ask{overflow-y:auto;max-height:100%}}
/* THE HOST OF THE MOMENT, SIZED LIKE ONE — 96px, up from 56px. The element is emitted at 96 and
   named here too, so the rendered size cannot drift from the attribute. */
.mvdc-ask .bird{display:flex;justify-content:center;padding-bottom:4px}
.mvdc-ask .bird img{display:block;width:96px;height:96px}
.mvdc-ask h2{text-align:center;font-size:clamp(21px,2.1vw,28px);line-height:1.18;
  margin:18px auto 0;max-width:30ch;font-weight:600}
.mvdc-ask .sub{text-align:center;font-size:14.5px;color:var(--mut);margin:9px auto 0;
  max-width:54ch;line-height:1.55}
.mvdc-brag{text-align:center;font:600 12.5px var(--ui);color:var(--dim);margin:6px auto 0}

/* ⭐ THE ROTATING WORD KEEPS ITS GRADIENT — AN OWNER-SANCTIONED EXCEPTION TO THE NO-GRADIENT
   LAW, FOR THIS ELEMENT AND NOTHING ELSE. This lane had re-solved it to solid indigo under that
   law; the word is hers, the gradient is part of it, and it is restored by COPYING THE SHIPPED
   DECLARATIONS rather than by inventing a new ramp.
   SOURCE: inc/maven-c.php :: fsmcf_mavc_furniture_css(), the `.mvc-rot .w` and
   `html.fs-dark .mvc-rot .w` rules — lines 832-837 of that file:
       light  background:linear-gradient(100deg,#1590ad,#615dfa)   color:#615dfa
       dark   background:linear-gradient(100deg,#41efff,#615dfa)   color:#8b87ff
   The two ramps differ for the reason the shipped file records, and that reasoning is carried
   over rather than re-litigated: the original cyan stop #41efff measures 1.84:1 on white and
   cannot carry text in light mode, so light ships the same angle and the same #615dfa end with
   the cyan taken to #1590ad (3.74:1); dark ships the original exactly, where #41efff measures
   9.48:1 on the #1d1e2b sheet. The `color` declarations are the shipped fallback, so a browser
   without background-clip:text still paints a legible word instead of an invisible one.
   Everything else in this sheet stays solid. */
/* ⚠️ THE WEIGHT ON THIS ELEMENT IS LOAD-BEARING, WHICH IS NOT OBVIOUS. The width track is
   written in `ch`, and `ch` resolves against THIS element's own font — while the words render at
   700. The heading here sits at 600, so the track was measured in a narrower face than the text
   it has to hold: "marketing campaigns" rendered 226.5px inside a 170.6px box and ran off the
   sheet at 390px. Declaring 700 here makes the box the word's true width, and the line then
   wraps the word instead of overflowing. */
.mvdc-rot{position:relative;display:inline-block;vertical-align:baseline;white-space:nowrap;
  font-size:1.1em;font-weight:700;width:5.54ch;color:var(--acc);
  animation:mvdcRotW 30s linear infinite}
.mvdc-rot::before{content:"\200B"}
.mvdc-rot .w{position:absolute;left:0;top:0;opacity:0;white-space:nowrap;font-weight:700;
  background:linear-gradient(100deg,#1590ad,#615dfa);
  -webkit-background-clip:text;background-clip:text;color:#615dfa;
  -webkit-text-fill-color:transparent;
  animation:mvdcRotF 30s linear infinite;animation-delay:calc(var(--k) * 2s)}
html.fs-dark .mvdc-rot .w,html[data-theme="dark"] .mvdc-rot .w{
  background:linear-gradient(100deg,#41efff,#615dfa);
  -webkit-background-clip:text;background-clip:text;color:#8b87ff}

/* ==========================================================================
   4 · THE SENTENCE BOARD — the pick mechanic folded in. The shipped drawer states the
   sentence as a grey read-back line under the textarea, at thirteen and a half pixels; here it
   IS the display type, three lines with a blank in each. The blank is a RULE, not a box: a box
   reads as a form field and invites typing into a thing that cannot be typed into.
   It sits on a tone-step panel rather than inside a ruled one — the house forbids borders.
   ========================================================================== */
/* ⛔ NO GREY PANEL BEHIND THE SENTENCE (ruled). The board used to sit on a --surf2 fill, which
   put a second grey field on the sheet directly under the typed box and read as a backdrop
   rather than as the sentence itself. It sits on the sheet now; the eyebrow, the space above it
   and the display size are what set it apart. The typed box keeps its own fill, because that
   one is not a backdrop — it is the surface the visitor types on, and with no borders allowed
   a field with no fill is not visibly a field. */
/* ⭐ THE SENTENCE BLOCK CENTRES AS A UNIT, TEXT STILL LEFT. The board used to be a 920px box with
   margin:auto — so the box was centred but the short, left-aligned lines hugged its left edge and
   read as hard-left. width:fit-content shrinks the box to the widest line, and margin-inline:auto
   then centres that compact box; the eyebrow and all four lines keep text-align:left and share
   one left edge. Same move as the four columns, applied to the sentence. max-width:100% keeps it
   inside the column at narrow widths. */
.mvdc-board{width:fit-content;max-width:100%;margin:26px auto 0;background:transparent;
  border-radius:0;padding:0}
.mvdc-eyebrow{display:flex;align-items:center;gap:10px;font:700 11.5px var(--ui);
  letter-spacing:.13em;text-transform:uppercase;color:var(--dim)}
.mvdc-eyebrow img{display:block}
/* FOUR clauses now, not three, so the sentence steps down a size rather than eat the sheet —
   it is still the largest type in the drawer, which is the point of it. */
.mvdc-lines{margin-top:14px;font-family:var(--dsp);font-weight:600;letter-spacing:-.028em;
  font-size:clamp(19px,1.95vw,27px);line-height:1.34;color:var(--ink)}
.mvdc-line{display:block}
.mvdc-line .stem{color:var(--mut);transition:color .18s}
.mvdc-slot{display:inline-block;vertical-align:baseline}
.mvdc-slot .ph{position:relative;display:inline-block;width:6.2ch;height:1em;vertical-align:baseline}
.mvdc-slot .ph::after{content:"";position:absolute;left:0;right:0;bottom:.1em;height:3px;
  background:var(--peri);border-radius:2px}
/* every fragment is off until its own pick is checked — the rules that switch them on are
   generated from the question list itself, in inc/maven-drawer-c.php. The fragment is a LINK
   back to the station that wrote it, so the first answer stays changeable after the third. */
.mvdc-slot .frag{display:none;background:var(--peri);color:var(--peri-ink);border-radius:4px;
  padding:.04em .3em .12em;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.mvdc-slot a.frag:hover{background:var(--in);color:var(--on-in)}
html.fs-dark .mvdc-slot a.frag:hover,html[data-theme="dark"] .mvdc-slot a.frag:hover{
  background:var(--chip);color:var(--chip-ink)}

/* her label over the picks. It shipped with a 1px rule under it; the rule is gone and the job
   is done by weight, colour and the space above it. */
.mvdc-selall{text-align:center;max-width:920px;margin:24px auto 0;font:700 13px var(--ui);color:var(--ink)}
.mvdc-selall span{font-weight:500;color:var(--dim)}

/* ==========================================================================
   5 · THE STATIONS — three questions, three panels, each carrying its place in the sentence as
   an oversized ghost word rather than a numbered badge. Nothing here is positioned out of
   flow except that ghost word, which is why the panel's height is always its content's height.
   ========================================================================== */
/* BREATHING ROOM, by ruling: more air below "Or fill in the blanks" (30px, was 14px) and a
   wider gutter between the four columns (22px, was 14px). The block was reading as squished. */
.mvdc-stations{max-width:920px;margin:30px auto 0;display:grid;gap:22px;
  grid-template-columns:repeat(4,minmax(0,1fr));align-items:start}
/* ⭐ ONE CENTRED ROW OF FOUR, ORDER 1→4 (sell · reach · increase · automate), by ruling. The
   columns keep source order left-to-right, and align-items:start seats every column's top on one
   baseline. The block itself is centred (max-width + margin auto) while the text inside each
   column stays left-aligned. The old two-by-two fold is retired on purpose: the stations stay a
   single row down to the narrow breakpoint, where they stack — they never split into a 2x2. */
/* ⚠️ NO PANEL BEHIND THE OPTIONS (revision 3). The station used to sit on a --surf2 fill, and
   with white option boxes on top of it the grey read as an artifact rather than as grouping.
   The fill is gone: the options sit directly on the sheet, and the grouping is carried by the
   ghost ordinal, the label and the spacing — which is what the house asks separation to be made
   of anyway. `overflow:hidden` stays, because the ghost word is still clipped to its station. */
/* ⭐ THE GHOST WORD GETS ITS OWN BAND, AND THE LABEL GETS CLEARANCE. Three things were wrong at
   once and all three are fixed here:
     1. the ghost sat at top:-.16em — a NEGATIVE offset against `overflow:hidden`, so its top was
        sliced off (measured: -9.92px clipped). It now starts at top:0 and is never cut.
     2. the station carried 2px of top padding, so the label began at y=2 inside a ghost that ran
        from -10 to 52 — the word and the "WHAT YOU…" label occupied the same pixels. The padding
        is now 38px, which is the clearance band the ghost lives in.
     3. the ghost was full-strength --chip at whatever size 4.4vw gave (62px). It is smaller now
        and carries opacity, so it reads as a background mark the label sits in front of rather
        than as type competing with it. (The label already owns z-index:1, so it paints above.) */
.mvdc-station{position:relative;overflow:hidden;background:transparent;border-radius:6px;
  padding:42px 2px 4px}
/* ⚠️ THE CEILING ON THIS SIZE IS SET BY THE LONGEST ORDINAL, NOT BY TASTE. The fourth station's
   ghost word is AUTOMATE — eight characters where the others are three to five. Measured at the
   old 44px it rendered ~240px wide inside a 214px column and `overflow:hidden` sliced its left
   edge off. 36px puts AUTOMATE at ~196px against ~206px of usable width, so the longest word in
   the set fits and none of them are cut. */
.mvdc-station::before{content:attr(data-ord);position:absolute;top:0;left:0;z-index:0;
  pointer-events:none;font-family:var(--dsp);font-weight:800;letter-spacing:-.06em;line-height:1;
  font-size:clamp(26px,2.6vw,36px);color:var(--chip);opacity:.62}
.mvdc-qlabel{position:relative;z-index:1;font:700 11px var(--ui);letter-spacing:.1em;
  text-transform:uppercase;color:var(--dim)}
.mvdc-qask{position:relative;z-index:1;margin-top:5px;font-family:var(--dsp);font-weight:600;
  letter-spacing:-.02em;font-size:15px;line-height:1.25;color:var(--ink)}
.mvdc-picks{position:relative;z-index:1;margin-top:11px;display:flex;flex-direction:column;gap:5px}
/* LIGHT CHARCOAL, CARRYING LIGHT INK (revision 4). The selected state is unchanged and is
   generated per pick in inc/maven-drawer-c.php: periwinkle with dark ink, never white on
   periwinkle. So the two states now differ in HUE AND IN POLARITY — unpicked is light ink on
   charcoal, picked is dark ink on periwinkle — which is a difference that survives being
   photographed in greyscale, and the old white-to-periwinkle step did not. */
.mvdc-pill{display:block;background:var(--pick);color:var(--pick-ink);border-radius:5px;
  padding:10px 12px;font:600 13px var(--ui);line-height:1.35;cursor:pointer;
  transition:background .14s,color .14s,transform .14s}
.mvdc-pill:hover{background:var(--pick-hover);transform:translateX(2px)}
.mvdc-radio{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;margin:0}

/* ==========================================================================
   6 · THE COMMIT — the shipped input with its Return affordance, then the Meet Maven key.
   Tapping and typing are the same act, so the box holds whatever the picks wrote.
   ========================================================================== */
/* ⭐ THE TYPED BOX NOW COMES FIRST (revision 2). It sits directly under the sentence and ABOVE
   the stations: the visitor is offered their own words before they are offered a menu, and the
   picks read as the help underneath rather than as the only way in. The commit key stays at the
   foot, where the sentence is finished. Pinning the key to the bottom of the column was tried
   and reverted — sticky at bottom:0 laid an opaque bar over the stations at first paint. */
/* ⭐ THE TYPED BOX — BIG, AND THE FIRST THING UNDER THE BIRD. It had shrunk to a single line
   tucked between two other blocks and read as missing. It is now a roomy field the visitor is
   plainly meant to type into: a real textarea, its own generous room, and enough width to hold
   a sentence without turning it into a ticker tape. */
.mvdc-say{max-width:760px;margin:26px auto 0}
.mvdc-inputwrap{position:relative;width:100%}
/* ⚠️ THE !important IS NOT SLOPPINESS — IT IS THE ONLY THING THAT WORKS HERE, AND THE CAUSE IS
   NAMED. The frame's own stylesheet (style-mission-control-live.css) carries a control reset:
       [type=...],textarea,select{font-size:var(--text-sm)!important;line-height:...!important}
   --text-sm resolves to 14px, and because it is !important it beats an author rule, a more
   specific author rule, AND an inline style — measured: setting element.style.fontSize to
   16.5px still computed to 14px. So the roomy box was rendering at the frame's form size no
   matter what this sheet asked for. (The shipped drawer's textarea has the same fate: it
   declares 15px and renders at 14px.) Two declarations are stated at the same weight, scoped to
   this one field, and nothing else in the sheet uses !important. */
.mvdc-inputwrap textarea{display:block;width:100%;resize:vertical;min-height:104px;
  font-family:var(--ui);font-weight:500;font-size:16.5px!important;line-height:1.55!important;
  color:var(--ink);background:var(--surf2);border:0;
  border-radius:6px;padding:20px 132px 20px 20px}
.mvdc-inputwrap textarea::placeholder{color:var(--dim)}
.mvdc-inputwrap textarea:focus{outline:3px solid var(--acc);outline-offset:1px}
.mvdc-sayhint{margin-top:9px;font:500 12.5px var(--ui);color:var(--dim);text-align:center}
.mvdc-sayhint b{color:var(--mut);font-weight:700}
/* ⭐ COMMIT, CENTRED AND STACKED, by ruling: the Meet Maven key sits centred on the ask column,
   and the help line drops BELOW it, also centred. Column flow + align-items:center does both. */
.mvdc-commit{max-width:920px;margin:20px auto 0;display:flex;flex-direction:column;
  align-items:center;gap:12px;text-align:center}
/* the Return affordance sits at the FOOT of the tall box, where the sentence ends, rather than
   centred on its side — and the box reserves that column in its own padding so a long sentence
   never runs under it */
/* ⭐ ICON-ONLY AND UNFILLED, BY RULING. The chip used to be a filled --chip rectangle carrying
   the word "Return", which read as a second submit button next to Meet Maven. It is now the
   glyph alone in the true pink, sitting directly on the input surface: a quiet keyboard hint.
   No fill means the ONLY contrast that matters is glyph-on-input-surface, which is what --ret
   is measured against in each theme. */
.mvdc-ret{position:absolute;right:12px;bottom:12px;display:inline-flex;
  align-items:center;justify-content:center;border:0;border-radius:5px;background:transparent;
  color:var(--ret);padding:6px;cursor:pointer;transition:color .15s}
.mvdc-ret:hover{color:var(--ret-hover)}
.mvdc-ret:focus-visible{outline:3px solid var(--acc);outline-offset:2px}
.mvdc-go{flex:0 0 auto;display:inline-flex;align-items:center;gap:10px;background:var(--in);
  color:var(--on-in);border:0;border-radius:6px;font:800 15px var(--ui);padding:15px 24px 15px 19px;
  cursor:pointer;box-shadow:0 12px 30px -14px rgba(28,26,90,.6);
  transition:background .15s,transform .15s}
.mvdc-go:hover{background:var(--in2);transform:translateY(-2px)}
.mvdc-go img{display:block;filter:brightness(0) invert(1)}
.mvdc-hint{font:500 12.5px var(--ui);color:var(--dim);text-align:center;max-width:58ch}
.mvdc-hint b{color:var(--mut);font-weight:700}
/* THE COMMIT IS TELEGRAPHED BY THE SENTENCE, NOT BY A DISABLED KEY. The key is never switched
   off — someone who types their own words owes the picks nothing — but the moment all three
   blanks are full the sentence goes solid and the key follows it. */
.mvdc-form:has(.mvdc-radio[name="sell"]:checked):has(.mvdc-radio[name="reach"]:checked):has(.mvdc-radio[name="grow"]:checked):has(.mvdc-radio[name="auto"]:checked) .mvdc-lines .stem{color:var(--ink)}
.mvdc-form:has(.mvdc-radio[name="sell"]:checked):has(.mvdc-radio[name="reach"]:checked):has(.mvdc-radio[name="grow"]:checked):has(.mvdc-radio[name="auto"]:checked) .mvdc-go{box-shadow:0 14px 30px -12px rgba(91,87,239,.8)}

/* ==========================================================================
   7 · THE ALL TOOLS COLUMN — hers, and it stays. Same rows, same order, same (+) at the foot;
   the 1px rules that separated the panel, the rows and the footer are all re-solved as tone.
   ========================================================================== */
.mvdc-all{display:flex;flex-direction:column;min-height:0;background:var(--allbg)}
/* the column is now almost the sheet's own tone, so its edge is drawn by SHADOW, not by fill
   and not by a rule — the one separation device the house leaves open when tone runs out */
@media(min-width:900px){.mvdc-all{max-height:100%;box-shadow:-16px 0 30px -24px rgba(16,20,45,.5)}}
@media(min-width:900px){html.fs-dark .mvdc-all,html[data-theme="dark"] .mvdc-all{
  box-shadow:-16px 0 30px -22px rgba(0,0,0,.75)}}
.mvdc-allhead{padding:18px 18px 12px;flex:0 0 auto}
@media(min-width:900px){.mvdc-allhead{padding-right:56px}}
.mvdc-allhead h3{font-family:var(--ui);font:700 12.5px var(--ui);letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink)}
.mvdc-allhead p{margin-top:6px;font:500 11.5px/1.5 var(--ui);color:var(--dim)}
.mvdc-alllist{overflow-y:auto;flex:1 1 auto;min-height:0;padding:0 12px 10px}
.mvdc-allrow{display:flex;gap:10px;align-items:flex-start;padding:10px;border-radius:6px;
  background:var(--row);margin-bottom:6px;transition:background .15s,transform .15s}
.mvdc-allrow:hover{background:var(--chip);transform:translateX(2px)}
.mvdc-allrow .aic{color:var(--acc);margin-top:1px}
.mvdc-allrow b{font:700 12.5px var(--ui);color:var(--ink);display:block;line-height:1.3}
.mvdc-allrow small{font:500 11px/1.45 var(--ui);color:var(--dim);display:block;margin-top:2px}
/* ⭐ VIEW ALL TOOLS — a destination at the foot of the rail, not a footnote under it.
   THE PINK IS AN OWNER-SANCTIONED EXCEPTION to the site-wide withdrawal, for this element only,
   and it is the CLOSE-TAB HEXAGON'S OWN PINK, by ruling: base #FF2E93 at the close controls' fill
   opacity, so this hexagon and the site's close hexagons are one colour, one opacity, one shape.
   THE HEXAGON MIRRORS THE CHROME'S CLOSE CONTROL, copied from header.php — the rule on
   `.p2c-x,.mc-railx,…,.sidebar-close,.fsmcf-msheet-close,.fsmcf-authclose`:
       clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)
   with its 24x27 proportion kept exactly (28 x 31.5 here, the same 0.889 ratio) and its
   border-radius:0. The glyph is a BOLD plus (heavier stroke below); the fill is the .16 close-tab
   tint in BOTH themes, and only the glyph COLOUR flips — white on dark (13.93:1), dark plum
   #510424 on light (10.79:1) — because the tint composites dark on the dark row and pale on the
   light one. The token comments carry the numbers. */
.mvdc-allplus{display:flex;align-items:center;gap:12px;margin:2px 12px 14px;padding:14px 14px;
  border-radius:6px;background:var(--row);color:var(--pink-ink);font:800 14px var(--ui);
  letter-spacing:.005em;flex:0 0 auto;box-shadow:var(--shadow);
  transition:background .15s,transform .15s}
.mvdc-allplus .lbl{color:var(--pink-ink)}
.mvdc-allplus .pc{width:28px;height:31.5px;flex:0 0 auto;display:flex;align-items:center;
  justify-content:center;border-radius:0;background:var(--pink);color:var(--pink-glyph);
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
/* BOLD white plus: the shared icon strokes at 1.6; this one is nearly doubled so the plus reads
   as a heavy mark, scoped to this hexagon so no other icon is touched. */
.mvdc-allplus .pc .mvc-ic{stroke-width:3;stroke-linecap:round}
.mvdc-allplus:hover{background:var(--chip);transform:translateX(2px)}

/* ==========================================================================
   8 · (THE HAND-OFF FRAME WAS HERE, AND IT IS GONE BY RULING.) Pressing Return no longer
   reaches a freeze-frame with a read-back and two CTAs — it reaches the loading screen, which
   lands on the live tour. Nothing in this sheet styles an in-between state any more, and the
   rules that did were deleted rather than left orphaned: assets/maven-drawer-c/load.css owns
   everything that happens after the commit.
   ========================================================================== */

/* ==========================================================================
   9 · NARROW. The 390px layout is the one that had to work, not the one that had to survive.
   The station strip becomes a FLEX COLUMN rather than a one-column grid — the previous lane's
   station grid was measured overlapping its own content by up to 260px at this width, and a
   flex column cannot express that failure: each panel's height is its content's height and the
   next panel starts after it.
   ========================================================================== */
@media(max-width:900px){
  .mvdc-ask{padding:22px 18px 26px}
  .mvdc-board{margin-top:18px;padding:16px 16px 18px}
  .mvdc-lines{font-size:clamp(18px,4.8vw,23px)}
  .mvdc-selall{margin-top:20px}
  .mvdc-say{margin-top:16px}
  /* align-items:stretch is not decoration: the desktop rule sets align-items:start, which in a
     FLEX COLUMN means flex-start on the CROSS axis — the panels would each shrink to their own
     text width and step in and out by up to 40px down the strip. Measured, then named. */
  /* the same breathing room the desktop row got: more air above the strip and between panels */
  .mvdc-stations{display:flex;flex-direction:column;align-items:stretch;gap:26px;margin-top:24px}
  /* and the same clearance band under the ghost word, sized for this width */
  .mvdc-station{padding:46px 2px 4px}
  .mvdc-station::before{font-size:40px;right:6px;top:0}
  .mvdc-commit{margin-top:20px}
  /* ⚠️ THE COLLAPSE THIS FIXES, MEASURED ON THE DEPLOYED PAGE. Below 900px the body is one
     column, and as a one-column GRID inside a sheet of definite height the two rows resolved to
     `1746.8px 0px`: the ask column took its content height, and the ALL TOOLS column — which
     carries min-height:0 so its list can scroll on desktop — was handed nothing and rendered
     zero pixels tall. Her browse path silently disappeared at phone width.
     A FLEX COLUMN cannot express that: both children are flex:0 0 auto, so each is its own
     content height and the form scrolls past them. The list keeps an inner cap so the browse
     path stays reachable without pushing the commit key a page and a half away. */
  .mvdc-form{display:flex;flex-direction:column}
  .mvdc-ask,.mvdc-all{flex:0 0 auto;max-height:none;min-height:0}
  .mvdc-alllist{flex:0 0 auto;max-height:300px;overflow-y:auto}
}
@media(max-width:520px){
  .mvdc-trigger{padding:11px 18px 11px 14px;font-size:14px}
  .mvdc-slot .ph{width:5ch}
  .mvdc-eyebrow{font-size:10.5px;letter-spacing:.1em}
  .mvdc-inputwrap textarea{padding:16px 16px 52px 16px;min-height:112px;font-size:16px!important}
  .mvdc-ret{bottom:10px;right:10px}
}

/* The cookie card owns the bottom-centre while it is up; the trigger steps aside rather than
   stack on it. The same courtesy the shipped drawer pays it, at the same breakpoints. */
@media(max-width:820px){
  html:has(#fscc-root:not([hidden])) .mvdc-trigger{bottom:210px}
}
@media(max-width:420px){
  html:has(#fscc-root:not([hidden])) .mvdc-trigger{bottom:250px}
}
html:has(#fscc-root:not([hidden]) #fscc-options:not([hidden])) .mvdc-trigger{
  opacity:0;visibility:hidden;pointer-events:none}

/* ==========================================================================
   10 · REDUCED MOTION — every transition off, and the drawer still opens and closes.
   ========================================================================== */
@media(prefers-reduced-motion:reduce){
  .mvdc-fx *,.mvdc-state{transition:none!important;animation:none!important}
  .mvdc-pill:hover,.mvdc-go:hover,.mvdc-allrow:hover{transform:none}
  .mvdc-rot{animation:none;width:auto}
  .mvdc-rot .w{animation:none;opacity:0}
  .mvdc-rot .w[style*="--k:0"]{opacity:1}
}

/* ==========================================================================
   11 · THE STAGE SET — the stand-in page the drawer rises over on the demo, so the strip of
   live page above the sheet and the dimming under it can be seen for what they are.
   ========================================================================== */
.mvdc-mockwrap{max-width:1120px;margin:0 auto}
.mvdc-mock h1{font-family:var(--dsp);font-weight:600;letter-spacing:-.03em;
  font-size:clamp(28px,4.2vw,50px);line-height:1.1;max-width:20ch;color:var(--ink);margin:0}
.mvdc-mock .lede{margin-top:16px;font:500 clamp(16px,1.5vw,19px)/1.6 var(--ui);
  color:var(--mut);max-width:54ch}
.mvdc-mock .grid{margin-top:30px;display:grid;gap:14px;grid-template-columns:repeat(3,minmax(0,1fr))}
.mvdc-mock .card{position:relative;overflow:hidden;background:var(--surf2);border-radius:6px;
  padding:20px 18px 22px}
.mvdc-mock .card::before{content:attr(data-ord);position:absolute;top:-.14em;right:10px;
  font-family:var(--dsp);font-weight:800;letter-spacing:-.06em;line-height:1;font-size:66px;
  color:var(--chip);pointer-events:none}
.mvdc-mock .card b{position:relative;z-index:1;display:block;font-family:var(--dsp);
  font-weight:600;font-size:17px;letter-spacing:-.02em;color:var(--ink)}
.mvdc-mock .card span{position:relative;z-index:1;display:block;margin-top:7px;
  font:500 14px/1.55 var(--ui);color:var(--mut)}
.mvdc-mock .note{margin-top:28px;background:var(--chip);color:var(--chip-ink);border-radius:6px;
  padding:16px 18px;font:500 13.5px/1.6 var(--ui);max-width:70ch}
.mvdc-mock .note b{font-weight:800}
/* the strip the sheet must never swallow is only meaningful if there is page under it */
.mvdc-mock{padding-bottom:calc(var(--dh) + 40px);transition:filter .34s ease}
/* ⭐ BLURRED WHILE THE SHEET IS UP. The backdrop reads as the real page behind the moment, not a
   caption: when the state box is checked it goes soft; closed, it is sharp and readable again.
   Pure CSS via :has on the root, so it holds with scripting off (where the box is checked on
   arrival) exactly as with it. Reduced-motion drops the transition below. */
html:has(#mvdc-open:checked) .mvdc-mock{filter:blur(6px)}
@media(prefers-reduced-motion:reduce){.mvdc-mock{transition:none}}
@media(max-width:900px){
  .mvdc-mock .grid{grid-template-columns:minmax(0,1fr)}
  .mvdc-mock .card::before{font-size:56px}
}

/* ==========================================================================
   12 · THE SITE-WIDE TRIGGER (WO-MAVEN-SITEWIDE, 8/11)

   When this design took over the furniture on every page it inherited three approved
   behaviours from the shipped centre-bottom trigger, and none of them may be lost in the
   handover. They are transplanted from inc/maven-c.php's own sheet rather than reinvented —
   same hexagon geometry, same pulse timing, same thirty-day dock:

     · THE PULSE. An expanding hexagon ring behind the bird. It is decoration and it says so:
       aria-hidden in the markup, and reduced motion removes it outright rather than freeze it.
     · THE LABEL ON HOVER. At rest the trigger is the hexagon alone; "Meet Maven" unrolls as a
       chip on hover, on focus-within, AND when the state checkbox itself takes keyboard focus,
       so the keyboard is shown exactly what the pointer is shown.
     · THE CLOSE HEXAGON, which docks the trigger to the corner for thirty days. It appears
       only under html.mvdc-js, because with scripting off there is nothing to remember a
       preference with and an affordance that cannot be honoured should not be offered.

   ⭐ THE SURFACE GOES TRANSPARENT, AND THAT IS THE SHIPPED LOOK RETURNING, not a regression: a
   white pill wrapped around a lone hexagon is a button with nothing in it. The chip that
   unrolls on hover carries the surface instead. The hexagon keeps THIS design's SOLID
   periwinkle tint — the shipped one was a radial gradient, and the house bans gradients.
   ========================================================================== */
.mvdc-trigger{gap:0;padding:6px 14px 6px 6px;background:transparent;box-shadow:none;
  font-size:13.5px;color:var(--trig-ink)}
html.fs-dark .mvdc-trigger,html[data-theme="dark"] .mvdc-trigger{
  background:transparent;box-shadow:none;color:#eef0fb}
.mvdc-trigger:hover{color:var(--trig-ink)}
html.fs-dark .mvdc-trigger:hover,html[data-theme="dark"] .mvdc-trigger:hover{color:#eef0fb}

.mvdc-trigslot{position:relative;width:46px;height:46px;flex:0 0 46px;
  display:inline-flex;align-items:center;justify-content:center}
.mvdc-trigger .mvdc-trighex{width:46px;height:46px;flex:0 0 46px;position:relative;z-index:2;
  filter:drop-shadow(0 6px 16px rgba(97,93,250,.42))}
.mvdc-trigger:hover .mvdc-trighex{filter:drop-shadow(0 12px 26px rgba(97,93,250,.52))}
.mvdc-trigger .mvdc-trighex img,.mvdc-trigger .mvdc-trighex svg{position:relative;z-index:2;
  width:28px;height:28px;transition:transform .25s ease}
.mvdc-trigger:hover .mvdc-trighex img,.mvdc-trigger:hover .mvdc-trighex svg{transform:scale(1.08)}

@keyframes mvdcTrigPulse{0%{transform:scale(.9);opacity:.55}70%{transform:scale(1.35);opacity:0}100%{opacity:0}}
.mvdc-trigpulse{position:absolute;inset:0;z-index:1;
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
  background:rgba(139,135,255,.35);animation:mvdcTrigPulse 2.6s ease-out infinite}

.mvdc-triglbl{max-width:0;overflow:hidden;opacity:0;white-space:nowrap;border-radius:6px;
  margin-left:0;padding:0;
  transition:max-width .28s ease,opacity .2s ease,margin .28s ease,padding .28s ease}
.mvdc-trigger:hover .mvdc-triglbl,.mvdc-trigger:focus-within .mvdc-triglbl,
.mvdc-state:focus-visible ~ .mvdc-fx .mvdc-triglbl{
  max-width:170px;opacity:1;margin-left:-6px;padding:8px 14px 8px 16px;background:var(--trig);
  box-shadow:0 1px 2px rgba(16,20,45,.06),0 12px 30px -14px rgba(40,38,90,.42)}
html.fs-dark .mvdc-trigger:hover .mvdc-triglbl,html.fs-dark .mvdc-trigger:focus-within .mvdc-triglbl,
html[data-theme="dark"] .mvdc-trigger:hover .mvdc-triglbl,html[data-theme="dark"] .mvdc-trigger:focus-within .mvdc-triglbl{
  background:#2e2f44;color:#eef0fb;
  box-shadow:0 1px 2px rgba(0,0,0,.5),0 12px 30px -14px rgba(0,0,0,.8)}

/* THE CLOSE HEXAGON. Hidden until the script announces itself; revealed with the label. */
.mvdc-trigdismiss{display:none;position:absolute;top:-6px;left:100%;margin-left:-6px;z-index:5;
  width:24px;height:24px;padding:0;border:0;background:transparent;cursor:pointer;
  align-items:center;justify-content:center;
  opacity:0;visibility:hidden;transform:translateY(4px) scale(.86);pointer-events:none;
  transition:opacity .18s ease,transform .18s ease,visibility .18s ease}
html.mvdc-js .mvdc-trigdismiss{display:inline-flex}
.mvdc-dhex{position:absolute;inset:0;
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);background:var(--in)}
/* ⚠️ PERIWINKLE NEVER CARRIES WHITE. In dark the key's hexagon is periwinkle, so the cross
   takes the dark ink periwinkle always carries — the shipped drawer put a white cross on it
   (3.00:1) and that is the one thing from it not reproduced here. */
html.fs-dark .mvdc-dhex,html[data-theme="dark"] .mvdc-dhex{background:var(--peri)}
.mvdc-trigdismiss .mvc-ic,.mvdc-trigdismiss .mvdc-ic{position:relative;z-index:2;stroke:#fff;stroke-width:2.4}
html.fs-dark .mvdc-trigdismiss .mvc-ic,html.fs-dark .mvdc-trigdismiss .mvdc-ic,
html[data-theme="dark"] .mvdc-trigdismiss .mvc-ic,html[data-theme="dark"] .mvdc-trigdismiss .mvdc-ic{
  stroke:var(--peri-ink)}
.mvdc-trigger:hover .mvdc-trigdismiss,.mvdc-trigger:focus-within .mvdc-trigdismiss,
.mvdc-state:focus-visible ~ .mvdc-fx .mvdc-trigdismiss{
  opacity:1;visibility:visible;transform:none;pointer-events:auto}
.mvdc-trigdismiss:hover .mvdc-dhex{filter:brightness(1.08)}

/* DOCKED — tucked into the bottom-right corner, and still fully a trigger: it opens the sheet,
   the label still unrolls, and the key still moves it back. */
html.mvdc-dock .mvdc-trigger{left:auto;right:18px;bottom:14px;transform:none;
  flex-direction:row-reverse;padding:6px 6px 6px 14px}
html.mvdc-dock .mvdc-trigdismiss{left:auto;right:100%;margin-left:0;margin-right:-6px}
html.mvdc-dock .mvdc-trigger:hover .mvdc-triglbl,
html.mvdc-dock .mvdc-trigger:focus-within .mvdc-triglbl,
html.mvdc-dock .mvdc-state:focus-visible ~ .mvdc-fx .mvdc-triglbl{
  margin-left:0;margin-right:-6px;padding:8px 16px 8px 14px}
html.mvdc-dock .mvdc-state:checked ~ .mvdc-fx .mvdc-trigger{transform:translateY(16px)}
/* the same courtesy to the cookie card the centred rules pay, at the same breakpoints */
@media(max-width:820px){html.mvdc-dock:has(#fscc-root:not([hidden])) .mvdc-trigger{bottom:210px}}
@media(max-width:420px){html.mvdc-dock:has(#fscc-root:not([hidden])) .mvdc-trigger{bottom:250px}}

@media(prefers-reduced-motion:reduce){.mvdc-trigpulse{animation:none;display:none}}

/* ==========================================================================
   14 · THE LOADING SEQUENCE, SITE-WIDE (WO-MAVEN-SITEWIDE, 8/11)

   The commit plays the CANONICAL sequence — inc/maven-compile-b.php's own fsmcf_mcb_page(),
   emitted verbatim inside a wrapper this lane owns. Two things have to be true for that to be
   safe on ~190 pages, and both are handled from out here so the canonical file stays untouched.

   ⚠️ ONE · IT MUST BE DORMANT UNTIL ASKED FOR. The sequence's own screen goes
   position:fixed, inset:0, opaque paper, z-index 9000 the instant its script arms itself on
   load. On its review page that IS the page; anywhere else it would white out the site before
   a visitor touched anything. The wrapper carries the `hidden` attribute, which is display:none
   and therefore stops the whole subtree dead — no fixed screen, no armed facets, nothing
   painted — until the commit handler removes it. The belt-and-braces rule below restates that
   in CSS so a stray script that clears the attribute cannot expose it by accident.

   ⚠️ TWO · THE REVIEW FENCE IS NOT PART OF THE LOADING SCREEN. It says so itself. The Play
   control and its note are the reviewer's way to start the run on /maven-compile-b/; here the
   drawer's Enter is what starts it, by clicking that very control. It is hidden rather than
   removed, because the handler needs it to still be there to click.
   ========================================================================== */
.mvdc-load[hidden]{display:none!important}
.mvdc-load .mcb-fence{display:none!important}

/* ==========================================================================
   13 · STACKING — AND THE ONE THING THAT MADE THE NO-SCRIPT PROMISE ONLY NEARLY TRUE
   (WO-MAVEN-SITEWIDE, 8/11)

   ⚠️ MEASURED ON THE DEPLOYED PAGE, NOT ASSUMED. With scripting switched OFF the chrome's left
   rail renders EXPANDED — about 292px — and it is a fixed column at z-index 66, above the
   sheet's 59. It therefore painted straight over the sheet's first 292 pixels: the whole of
   station ONE was hidden and could not be clicked, and at 390px the rail covered the TRIGGER,
   so the drawer could not be opened at all. That is chrome behaviour and it predates this
   design — the review page does exactly the same — but the promise this drawer makes is that
   it works with no script, and on ~190 pages that has to be true rather than nearly true.

   THE FIX IS STACKING, AND IT TOUCHES NO CHROME FILE. While the sheet is up it sits ABOVE the
   rail, and the trigger does too so it can always be pressed. Both stay BELOW the frozen
   header (70) and far below the consent card (which carries its own enormous z-index), so
   nothing that was on top stops being on top. With scripting ON this changes nothing visible:
   the sheet's left edge is measured to the rail's real edge, so the two never overlap in the
   first place. The rail-hover guard keeps its 71 and still outranks both.
   ========================================================================== */
.mvdc-trigger{z-index:67}
.mvdc-state:checked ~ .mvdc-fx .mvdc-scrim{z-index:67}
.mvdc-state:checked ~ .mvdc-fx .mvdc-drawer{z-index:68}