/* ══════════════════════════════════════════════════════════════════════════
   FL718 — MENU RECALL: THE SCRIM TAB                      BUG-042 Half 2
   Shared, site-wide, DESKTOP ONLY.

   Replaces the ✦ glyph (#fl718-menu-recall) as the affordance that brings the
   nav bar back after the curtain retracts. The glyph measured 8.89 x 11.2px at
   1.44:1 contrast on China — failing WCAG 2.2 target size on every page and
   3:1 contrast on 4 of 5 pages measured.

   WHY THIS FILE EXISTS AT ALL
   The same rule set was copy-pasted into 11 stylesheets AND 7 page templates
   (inline <style>), and drifted into two treatments: top:6px/z-index:10000 and
   top:8px/z-index:10001. That scatter is what produced BUG-028. One file now
   owns the affordance; pages contribute a single accent colour and nothing else.

   DESKTOP-ONLY IS ENFORCED AT THE ENQUEUE, NOT HERE.
   functions.php loads this behind `! wp_is_mobile()`. It must stay that way:
   fl718-china-page and fl718-quito-page are the SAME body class on both
   viewports, so a selector-scoped guard cannot tell them apart and this would
   render on phones. Mobile recall is a top-edge tap with its own design, not
   yet built — mobile keeps the old glyph for now.

   THE OLD GLYPH STAYS IN THE DOM. It is hidden, never removed: it is the seam
   the Scrim Tab forwards clicks through to reach the real curtain script's
   dropCurtain(). See js/fl718-menu-recall-scrim.js.

   Geometry and colour values carried verbatim from the approved prototypes:
   Menu/concepts/menu-recall-concepts/on-page/scrim-tab-FINAL-{taos,china}.html

   v2 (2026-08-23) — renamed from fl718-menu-recall-scrim.css (v1, still live,
   unenqueued, revert path) to fl718-menu-recall-scrim-v2.css. Renamed rather
   than ?ver=-bumped because the nginx proxy cache on this host ignores query
   strings. v2 adds the #fl718-nook-menu-recall hide rule below for Nook Nook's
   second, duplicate recall control (BUG-065, unresolved, tracked separately).
   ══════════════════════════════════════════════════════════════════════════ */

/* ── PER-PAGE ACCENT ───────────────────────────────────────────────────────
   The ONLY value a page may override. Set --fl718-recall-accent on the body
   class in functions.php §9. Everything else is deliberately uniform — the
   drift this file replaces was never intentional design.
   Default is the Treatment B gold, the most common value on the site.        */
:root {
  --fl718-recall-accent: 185, 158, 98;
}

/* ── THE OLD GLYPH ─────────────────────────────────────────────────────────
   display:none, not opacity:0. An opacity:0 element still hit-tests and would
   swallow taps over the tab — that was BUG-063, three invisible lightbox
   controls eating taps over the hamburger. display:none removes it from hit
   testing while leaving it scriptable via .dispatchEvent().                  */
body #fl718-menu-recall {
  display: none !important;
}

/* Nook Nook carries a SECOND, independent recall control in its own curtain
   block (#fl718-nook-menu-recall), stacked at the same coordinates as the one
   above. Both independently restore the nav — measured on live 2026-08-23.
   Pre-existing and desktop-only; the mobile template has only the first.
   Hidden here so exactly one affordance is visible; the duplicate itself is a
   separate defect, BUG-065. Harmless on every other page — the selector simply
   matches nothing. */
body #fl718-nook-menu-recall {
  display: none !important;
}

/* ── THE TAB ───────────────────────────────────────────────────────────────
   A low-alpha neutral veil: darkens a light backdrop slightly, lightens a dark
   one slightly. Paired with the dual-tone chevron below, this reads against any
   photograph without sampling the image behind it — which is what the earlier
   adaptive approach tried and could not do, because the uploads origin sends no
   Access-Control-Allow-Origin header, so the canvas always tainted and the
   pixel read always threw. That sampler was dead code and is not reproduced.  */
/* ══ GENERATEPRESS BUTTON RESET — same root cause as the grip's grey box ══
   Found 2026-08-31 on /china/ via Safari Web Inspector. GP's inline stylesheet
   styles every <button>:

     button, ...        { background-color: #55555e; }
     button:hover/focus { background-color: #3f4047; }

   `button:focus` is (0,1,1); the scrim's base rule below is (0,1,0), so GP's
   grey WINS over this element's own designed background in the base state.
   The hover/focus rule further down is (0,3,0) and already beats it, which is
   why the scrim only ever looked right once interacted with.

   iOS keeps :focus after a tap, so a tapped scrim could hold GP's grey. The
   scrim HAS a real designed background, so unlike the grip this does not flatten
   to transparent — it re-asserts the intended value at a specificity GP cannot
   beat, and leaves the hover/focus treatment below untouched.

   Full write-up: Developer/fixes/mobile-runner-grey-box-plan.md.            */
.fl718-menu-recall-scrim,
.fl718-menu-recall-scrim:hover,
.fl718-menu-recall-scrim:focus,
.fl718-menu-recall-scrim:active {
  background-color: rgba(128, 124, 118, 0.20);
  color: inherit;
}

.fl718-menu-recall-scrim {
  position: fixed;
  top: 14px;
  left: 50%;
  transform: translateX(-50%) translateY(0);
  z-index: 10001;

  display: flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px 6px 10px;

  border-radius: 999px;
  background: rgba(128, 124, 118, 0.20);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 0 0 1px rgba(10, 9, 8, 0.16), 0 3px 14px rgba(0, 0, 0, 0.18);

  color: rgba(255, 255, 255, 0.95);
  cursor: pointer;

  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease, background 0.25s ease, border-color 0.25s ease,
              color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

/* Shown state is driven by JS mirroring the old glyph's aria-hidden. */
.fl718-menu-recall-scrim.is-shown {
  opacity: 0.78;
  pointer-events: auto;
}

.fl718-menu-recall-scrim.is-shown:hover,
.fl718-menu-recall-scrim.is-shown:focus-visible {
  opacity: 1;
  background: rgba(128, 124, 118, 0.34);
  border-color: rgba(255, 255, 255, 0.30);
  box-shadow: 0 0 0 1px rgba(10, 9, 8, 0.30), 0 3px 14px rgba(0, 0, 0, 0.24);
  transform: translateX(-50%) translateY(1px);
}

/* Focus ring takes the page accent — the one place the accent is visible. */
.fl718-menu-recall-scrim:focus-visible {
  outline: 2px solid rgba(var(--fl718-recall-accent), 0.95);
  outline-offset: 3px;
}

/* ── TARGET SIZE (WCAG 2.2, 2.5.8) ─────────────────────────────────────────
   The visual pill is ~41 x 27. A transparent pseudo-element grows the real hit
   area to clear 44 x 44: the vertical axis is the widest shortfall at
   (44 - 27) / 2 = 8.5, so -9px covers it. Applied on all four sides for one
   number to reason about.

   This is VERIFIED BY MEASUREMENT in the QA harness, not by this arithmetic —
   a 157px photo once passed a border-fit check on this site because the pass
   condition measured the wrong thing.                                         */
.fl718-menu-recall-scrim::before {
  content: '';
  position: absolute;
  inset: -9px;
}

/* ── ICON: DUAL-TONE CHEVRON ───────────────────────────────────────────────
   Drawn twice — a near-black stroke offset 0.9px down-right, under a near-white
   stroke. On a light backdrop the dark one reads; on a dark backdrop the light
   one reads; at mid-tone the offset between them is itself the edge that reads.
   Derived from recall-dual-tone-edge.html.                                    */
.fl718-menu-recall-scrim__icon {
  width: 11px;
  height: 11px;
  flex-shrink: 0;
  overflow: visible;
}

.fl718-menu-recall-scrim__chev-dark,
.fl718-menu-recall-scrim__chev-light {
  display: block;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.fl718-menu-recall-scrim__chev-dark {
  stroke: rgba(10, 9, 8, 0.90);
  stroke-width: 2.6;
  transform: translate(0.9px, 0.9px);
}

.fl718-menu-recall-scrim__chev-light {
  stroke: rgba(255, 255, 255, 0.95);
  stroke-width: 2.1;
}

/* ── LABEL ─────────────────────────────────────────────────────────────────
   Hidden at rest, expands on hover/focus. Same two-tone trick as the chevron,
   via a paint-order stroke rather than a second element.                      */
.fl718-menu-recall-scrim__label {
  font-family: 'DM Sans', sans-serif;
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  white-space: nowrap;

  max-width: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-width 0.3s ease, opacity 0.25s ease;

  color: rgba(255, 255, 255, 0.96);
  -webkit-text-stroke: 0.6px rgba(10, 9, 8, 0.62);
  paint-order: stroke fill;
  text-shadow: 0 0.5px 0 rgba(10, 9, 8, 0.55);
}

.fl718-menu-recall-scrim.is-shown:hover .fl718-menu-recall-scrim__label,
.fl718-menu-recall-scrim.is-shown:focus-visible .fl718-menu-recall-scrim__label {
  max-width: 46px;
  opacity: 1;
}

/* ── REDUCED MOTION ────────────────────────────────────────────────────────
   BUG-081 (2026-08-27): the old note here said the tab "should never appear at
   all" because the curtain early-returned under reduce. That early return WAS
   the bug — it left the nav bar parked over the page permanently. The curtain
   now retracts for reduced-motion visitors too, so the tab is a REQUIRED
   control for them, not a belt-and-braces fallback. These rules are what make
   it appear correctly: instant swap, no transition.                           */
@media (prefers-reduced-motion: reduce) {
  .fl718-menu-recall-scrim,
  .fl718-menu-recall-scrim__label,
  .fl718-menu-recall-scrim__chev-dark,
  .fl718-menu-recall-scrim__chev-light {
    transition: none !important;
  }
}