/* ═══════════════════════════════════════════════════════════════════════════════════════════
   FESTIFLOW — AUTH SURFACE STYLING                                       [ROUND H · BOARD §1]
   The login gate + the avatar menu. Behaviour lives in `shared/chrome.js`.

   ⛔⛔ WHY THIS IS ITS OWN FILE AND NOT AN APPENDIX TO `shared/chrome.css`, MEASURED RATHER
     THAN ASSUMED: **`budget/budget_event.html` DOES NOT LOAD `shared/chrome.css` AT ALL.**
     [MEASURED] 0 `<link>` elements to it; it defines `.nav`, `.nav-user`, `.sw-*` in its own
     `<style>`. `budget_general.html` links it root-absolute; the three `dates/` heads link it
     with `../`.
     ⇒ ★ AND THAT IS WHY `budget_event.html` CARRIES A FULL LOCAL `.nav-user` RULE — IT IS NOT
       A REDUNDANT COPY, IT IS THE ONLY ONE THAT PAGE HAS.
     ⇒ ⛔ SO PUTTING THIS BLOCK IN `chrome.css` WOULD SILENTLY SKIP THE EVENT BUDGET SCREEN.
       AND LINKING `chrome.css` THERE INSTEAD WOULD NEWLY APPLY ~125 LINES OF NAV/SWITCHER/TAB
       STYLING TO A PAGE THAT HAS STYLED ITSELF SINCE IT WAS WRITTEN — an unmeasured blast
       radius, inside an auth round. A SEPARATE FILE ADDS THE AUTH SURFACE AND NOTHING ELSE.
     ⚠ HOW THE ERROR HAPPENED, RECORDED BECAUSE IT IS A FAMILY: my first census grepped
       `shared/[a-z]*\.css` and MATCHED THE COMMENT `canonical → shared/chrome.css`, not a
       link. ★ A GREP FOR A FILENAME, INSIDE A FILE THAT DOCUMENTS THAT FILENAME, FINDS THE
       DOCUMENTATION.

   ⛔ LINKED ROOT-ABSOLUTE — `/shared/auth.css` — FROM ALL FIVE HEADS. NEVER RELATIVE.
     [MEASURED] every relative asset reference in this repo 404s: the five pages that write
     `src="LOGO_ROND_JAUNE.png"` all live in subdirectories while the file sits at the root.
     ⇒ ✅ AND ROOT-ABSOLUTE IS **NOT A NEW PRECEDENT**: `budget_general.html` already links
       `/shared/chrome.css` that way. TWO CONVENTIONS ARE ALREADY LIVE IN THE TREE, and this
       round uses the one that also fixes the logo class.

   ⛔⛔ CONDITION (a) — **SELF-CONTAINED. THIS FILE DEPENDS ON `tokens.css` FOR NOTHING.**
     [MEASURED] which heads actually load `shared/tokens.css`:
        dates/index   ✔    dates/liste   ✔    dates/fiche   ✔
        budget_general ✘   budget_event  ✘  (evt loads NO shared stylesheet at all)
     ⇒ ⛔ **THREE OF FIVE, NOT FOUR.** The seven shared tokens exist everywhere only because
       the two budget heads define them in their own `:root` — TWO MECHANISMS PRODUCING ONE
       APPEARANCE, and a new surface must depend on neither.
     ⇒ ★★ SO EVERY CUSTOM PROPERTY BELOW IS WRITTEN `var(--x, <literal>)`. THAT IS STRICTLY
       BETTER THAN BARE LITERALS: IT HONOURS THE DESIGN SYSTEM WHERE ONE EXISTS AND RESOLVES
       CORRECTLY WHERE IT DOES NOT — so this file cannot render unstyled on any page, and it
       cannot drift from the palette on the pages that have one.
     ⚠ THE FALLBACKS ARE THE REAL VALUES, NOT GUESSES: [MEASURED] `--text #f0f0f5`,
       `--text-dim #5a5a6a`, `--border-h rgba(255,255,255,.08)` — and `tokens.css`,
       `budget_general.html` and `budget_event.html` AGREE ON ALL THREE, byte for byte.

   ⚠ CONDITION (c) — WHAT `budget_event.html` LOADING NO SHARED CSS MEANS, SAID PLAINLY:
     **IT IS THE ONE PAGE WHERE EVERY SHARED STYLE IS INVISIBLE UNLESS EXPLICITLY LINKED.**
     This file is linked there, so the auth surface is fine. ⛔ BUT THE GENERAL CONDITION IS A
     BOARD ITEM AND IS **NOT NORMALISED IN THIS ROUND**: giving that page `chrome.css` would
     newly apply ~125 lines of nav/switcher/tab styling to a head that has styled itself since
     it was written — an unmeasured blast radius, inside an auth round.
     ⇒ ⚠ AND THE ONE THING THAT DOES CROSS: the avatar menu reuses the existing `.sw-menu`
       primitive, which on that page comes from its LOCAL `<style>` rather than from
       `chrome.css`. [MEASURED] the two definitions are BYTE-IDENTICAL today —
       ★ WHICH IS EXACTLY THE HAND-MAINTAINED INVARIANT THIS ROUND'S OWN RULING WARNS ABOUT:
       true today, and nobody re-checks it. FILED, NOT FIXED HERE.
   ═════════════════════════════════════════════════════════════════════════════════════════ */

/* ── the avatar menu ────────────────────────────────────────────────────────────────────── */
.ff-user-wrap{position:relative;margin-left:auto;display:flex;align-items:center}
/* the wrapper takes the auto margin so `.nav-user` keeps its canonical rule untouched; the
   budget heads' inline `margin-left:0` therefore still does exactly what it always did. */
/* ⛔⛔ [WALK FIX] `.ff-user-menu` OWNS ITS OWN `display`. The element no longer carries
   `sw-menu`, so nothing else sets it and there is no specificity race.
   THE CONTRACT IS THE `hidden` ATTRIBUTE — the platform's own, and the one `chrome.js` toggles.
   ⚠ THIS IS THE TREE'S **SECOND** SHOW/HIDE CONVENTION AND IT IS DELIBERATE: the session
     switcher opens via `.sw-wrap.open .sw-menu{display:block}`, keyed to its PARENT's class.
     Reusing that would have re-introduced exactly the cross-element dependency condition (a)
     removed. ⇒ ★ ONE EXTRA CONVENTION, IN EXCHANGE FOR A SURFACE THAT DEPENDS ON NOTHING. */
.ff-user-menu{display:block}
.ff-user-menu[hidden]{display:none}
.ff-user-menu{position:absolute;top:calc(100% + 8px);right:0;min-width:220px;z-index:60;
  /* ⛔ RESTATED HERE RATHER THAN INHERITED: `.sw-menu` supplies these on every head, but via
     `chrome.css` on three and a LOCAL <style> on two. Restating with fallbacks means the menu
     renders correctly even if this file is the only stylesheet that reaches the page. */
  background:var(--surface-2,#16161f);border:1px solid var(--border-h,rgba(255,255,255,.08));
  border-radius:10px;overflow:hidden;box-shadow:0 12px 32px rgba(0,0,0,.35)}
.ff-um-id{padding:10px 12px;border-bottom:1px solid var(--border-h,rgba(255,255,255,.08));display:flex;flex-direction:column;gap:2px}
.ff-um-name{font-size:13px;font-weight:600;color:var(--text,#f0f0f5)}
.ff-um-mail{font-size:11px;color:var(--text-dim,#5a5a6a);word-break:break-all}
/* ⇒ [ROUND BO2 · R5 · B9] THE ROLE. Between the name and the email, and styled BETWEEN them too —
   it is more than an address and less than an identity. ⚠ LITERAL FALLBACKS ON BOTH `var()`s, like
   every other rule in this file: `chrome.js` is loaded by heads that do not all link `tokens.css`
   (`[MEASURED]` at Round BI: it reaches THREE of eight heads, and `budget_event.html` links no
   shared stylesheet at all), so a token here is a value that may not resolve. */
.ff-um-role{font-size:11px;font-weight:500;color:var(--text-muted,#8a8a99)}
.ff-um-out{width:100%;text-align:left;background:none;border:none;font-family:inherit;cursor:pointer}

/* ── the login gate. ⛔ PURPLE IS THE LOGIN'S BRAND SURFACE; IN-APP IT IS THE SANDBOX SIGNAL.
      BOARD §6 SWEEPS SIX PURPLES ACROSS 61 SITES AND WOULD NEUTRALISE THIS ONE BY ACCIDENT.
      THIS COMMENT IS THE ONLY THING THAT STOPS IT. ─────────────────────────────────────── */
.db-overlay{position:fixed;inset:0;background:#08080d url('/LOGIN_BG.jpg') center center/cover no-repeat;z-index:9999;display:flex;align-items:center;justify-content:center}
/* ⛔ ROOT-ABSOLUTE, NEVER RELATIVE. [MEASURED] every relative asset reference in this repo 404s
   because the pages that make them live in subdirectories and the files sit at the root. */
.db-overlay::before{content:'';position:fixed;inset:0;background:rgba(4,4,10,.45);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.db-modal{position:relative;z-index:1;background:rgba(12,6,24,.3);border:1px solid rgba(168,85,247,.15);border-radius:20px;padding:32px 28px;width:320px;box-shadow:0 32px 80px rgba(0,0,0,.2);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);text-align:center}
.db-modal-logo{width:72px;height:72px;border-radius:50%;object-fit:cover;margin:0 auto 16px;display:block}
.db-modal-title{font-family:'Outfit',sans-serif;font-size:18px;font-weight:700;color:#fff;margin-bottom:4px}
.db-modal-sub{font-size:12px;color:#a0a0b0;margin-bottom:24px}
.db-pw-label{display:block;text-align:left;font-size:11px;color:#a0a0b0;margin:0 0 4px}
.db-pw-field{width:100%;padding:13px 16px;background:linear-gradient(135deg,rgba(168,85,247,.12),rgba(99,102,241,.12));border:1px solid rgba(168,85,247,.3);border-radius:10px;margin-bottom:10px;min-height:46px;box-sizing:border-box;text-align:left;color:#fff;font-family:inherit;font-size:14px;transition:border-color .2s,box-shadow .2s}
.db-pw-field:hover,.db-pw-field:focus{border-color:rgba(168,85,247,.6);box-shadow:0 0 16px rgba(168,85,247,.2);outline:none}
.db-pw-error{font-size:11px;color:#e17055;margin-bottom:8px;min-height:14px;text-align:left}
.db-btn{width:100%;padding:14px;background:rgba(12,6,24,.3);border:1px solid rgba(255,255,255,.1);border-radius:10px;color:#fff;font-size:14px;font-family:inherit;cursor:pointer;transition:border-color .2s,box-shadow .2s}
.db-btn:hover{border-color:rgba(168,85,247,.6);box-shadow:0 0 16px rgba(168,85,247,.2)}

/* ══ THE PORTALLED STATE — `chrome.js` MOVES THE MENU TO <body> WHILE IT IS OPEN ═══════════
   ⛔ WHY A PORTAL AND NOT A `z-index`: on mobile `.nav-top` gets `overflow-x:auto` from
     `@media(max-width:480px)` in `shared/chrome.css`, and CSS forces the other axis to `auto`
     with it — [MEASURED] `overflow x/y = auto/auto`, with no `overflow-y` written anywhere.
     The menu hangs below the nav and is CLIPPED at its bottom edge. `z-index` orders paint;
     `overflow` removes the pixels first, so no bump of any size reaches this.
   ⛔ AND `position:fixed` ALONE DOES NOT ESCAPE EITHER — [MEASURED] `nav.nav` carries
     `backdrop-filter:blur(12px)`, which makes it the CONTAINING BLOCK for fixed descendants.
     The box did not move. The element has to leave the subtree, which is what the portal does.
   ⚠ `z-index:500` IS NOT ARBITRARY: [MEASURED] on `dates/index.html` the drawers are
     `#drawer-overlay` z=400 and `#drawer` z=401, both <body> children. 500 clears them with
     room. ⇒ ★ A z-index CHOSEN AGAINST A MEASURED NEIGHBOUR, NOT A ROUND NUMBER PICKED HIGH.
   ⚠ `top`/`left` ARE SET INLINE BY `place()` FROM THE AVATAR'S RECT AND ARE NOT DECLARED HERE
     — a value written in both places is one that can disagree with itself. */
.ff-user-menu.ff-um-portal{position:fixed;z-index:500}