/* ============================================================
   CINEMERE CORE — shared design system + social components
   Loaded by every page. Page-specific CSS stays in-page.
   ============================================================ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

/* ===== Native-app feel (mobile/tablet PWA): stop pinch/double-tap zoom, sideways page
   panning, text auto-inflation and rubber-band overscroll so the app behaves like a fixed
   native surface. Inner horizontal scrollers (poster rows) keep their own overflow-x:auto,
   so they still swipe; only the PAGE can no longer drift sideways. Pages that run their own
   fixed shell (messages, The Mere) override with a stricter overflow:hidden after this. =====
   NOTE: body uses overflow-x:CLIP, not hidden. `hidden` forces the cross-axis to `auto`, which
   turns body into its own vertical scroll container sized to the full content. Combined with
   overscroll-behavior:none (no scroll-chaining), that trapped the mouse wheel over the page body
   on DESKTOP so only the scrollbar itself scrolled. `clip` hides horizontal overflow WITHOUT
   creating a scrollport, so html stays the single page scroller and the wheel works everywhere. */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
html{overflow-x:hidden;overscroll-behavior:none}
body{overflow-x:clip;overscroll-behavior:none;touch-action:manipulation}

:root{
  --void:#04021A;--deep:#080424;--cosmos:#0E073A;--dusk:#1A0C48;
  --burnt:#9B3018;--ember:#D05418;--fire:#E87820;--horizon:#F5A030;
  --amber:#FFD060;--cream:#FFF2D8;
  --electric:#00D4FF;--magenta:#E080CC;--green:#80D4A0;
  --text:#FFF0E0;--text2:#D4AC80;--text3:#AC8B61;--text4:#94764D;
  /* The *-Fallback families are metric-matched clones of the local fallback (see
     cinemere-fonts.css): identical advance width, ascent and descent, so when the
     real webfont swaps in the text does not move. Plain Georgia/system-ui stay at
     the end for platforms that have neither Georgia nor Arial. */
  --serif:'Cormorant Garamond','Cinemere Serif Fallback','Cinemere Serif Fallback 2',Georgia,serif;
  --sans:'Syne','Cinemere Sans Fallback',system-ui,sans-serif;
  /* the TEXT face for running prose (see cinemere-fonts.css). Syne stays on
     every heading, nav link, button, chip and HUD label; only inherited body
     copy uses this. */
  --sans-text:'Inter','Cinemere Text Fallback',system-ui,sans-serif;
  /* ⛬ --mono is for UPPERCASE and digits. See "Syne Mono is for uppercase too" in
     cinemere-fonts.css: the old comment here claimed the bare `monospace` keyword was
     "already metric-matched: 33.55 vs 33.54 width/em", which compared ADVANCE WIDTH
     only. That holds for any two monospace faces and says nothing about x-height —
     and `monospace` resolves to Consolas on Windows (x-height 50.0%, a real match)
     but to Courier on iOS (42.2%, a 15% miss with a hairline descender). */
  --mono:'Syne Mono','Cinemere Mono Fallback','Cinemere Mono Fallback 2',monospace;
  --r:10px;--r2:18px;--r3:28px;
  --border:rgba(255,200,80,0.07);--border2:rgba(255,200,80,0.14)
}
html{scroll-behavior:smooth;background:var(--void)}
body{background:var(--void);color:var(--text);font-family:var(--sans-text);-webkit-font-smoothing:antialiased;overflow-x:clip;min-height:100vh}

/* ===== Seamless page-to-page navigation =====
   1) The html canvas is painted the void colour (above), so moving between pages
      can never flash white before the body paints — the #1 cause of the "lag" you
      see mid-navigation on an MPA.
   2) Cross-document View Transitions turn every same-origin navigation into a soft
      crossfade instead of a hard cut. Chrome/Edge/Android opt in here; Safari and
      Firefox ignore it with zero regression. Kept short so it feels instant, not slow. */
@view-transition{ navigation:auto }
::view-transition-old(root),::view-transition-new(root){ animation-duration:.2s; animation-timing-function:cubic-bezier(.4,0,.2,1) }
@media (prefers-reduced-motion:reduce){
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){ animation:none!important }
}
a,button{text-decoration:none;color:inherit}
img{display:block}
::selection{background:rgba(255,208,96,0.25);color:var(--cream)}

/* GRAIN */
body::after{content:'';position:fixed;inset:0;opacity:.026;pointer-events:none;z-index:9998;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* CURSOR (shared) — two-layer zero-latency system.
   The precision dot IS the real OS cursor: an inline-SVG url() cursor composited by the
   OS itself, so it can never lag or stutter, even while the main thread is busy. The
   ring is the cinematic trail: a compositor-only layer (translate3d + will-change,
   never left/top) driven by a time-based spring in MQ.mountCursor(). The
   `cursor:inherit !important` funnel routes every element to the html cursor, which
   also neutralises legacy per-element `cursor:none` rules across the app. */
html{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cdefs%3E%3CradialGradient id='g'%3E%3Cstop offset='0' stop-color='%23FFD060' stop-opacity='.4'/%3E%3Cstop offset='.55' stop-color='%23F5A030' stop-opacity='.14'/%3E%3Cstop offset='1' stop-color='%23F5A030' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle cx='16' cy='16' r='11' fill='url(%23g)'/%3E%3Ccircle cx='16' cy='16' r='3.6' fill='%2304021A' fill-opacity='.55'/%3E%3Ccircle cx='16' cy='16' r='2.5' fill='%23FFD060'/%3E%3Ccircle cx='15.1' cy='15.1' r='.9' fill='%23FFF4DC' fill-opacity='.9'/%3E%3C/svg%3E") 16 16,auto}
body,body *,body *::before,body *::after{cursor:inherit!important}
#mq-cur{position:fixed;left:0;top:0;width:16px;height:16px;border:1.5px solid var(--amber);border-radius:50%;pointer-events:none;z-index:99999;opacity:0;will-change:transform;transform:translate3d(-40px,-40px,0) translate(-50%,-50%);transition:opacity .35s,border-color .25s,box-shadow .25s;box-shadow:0 0 14px rgba(255,208,96,.12)}
#mq-cur.on{opacity:1}
#mq-cur.big{border-color:rgba(255,208,96,.45);box-shadow:0 0 20px rgba(255,208,96,.22)}
@media(hover:none){#mq-cur{display:none}html{cursor:auto}a,button{cursor:pointer!important}}
@media(prefers-reduced-motion:reduce){#mq-cur{transition:opacity .35s,border-color .25s}}

/* ==================== PWA / INSTALLED-APP POLISH ====================
   Makes the home-screen web app feel native: no tap-highlight flash, no
   long-press callout on chrome, no rubber-band chaining, and safe-area
   insets so the notch / home-indicator never clip the UI (env() is 0 in a
   normal browser tab, so desktop is completely unaffected). */
html{-webkit-tap-highlight-color:transparent}
body{overscroll-behavior-y:none}
@media(hover:none){
  a,button,.mqn-link,.mqn-av,.mqn-bell,.mqn-logo,.mq-btn{-webkit-touch-callout:none}
  /* iOS zooms the page when a <16px input is focused — keep inputs at 16px on
     touch so focusing search/compose never yanks the layout. */
  input,textarea,select{font-size:16px}
}
/* installed standalone app: kill the last of the browser-chrome feel */
html.mq-standalone,html.mq-standalone body{overscroll-behavior:none}
@media all and (display-mode:standalone){ body{overscroll-behavior:none} }

/* ============================ NAV ============================ */
#mq-nav{position:fixed;top:0;left:0;right:0;z-index:700;height:60px;display:flex;align-items:center;gap:22px;padding:0 calc(32px + env(safe-area-inset-right,0px)) 0 calc(32px + env(safe-area-inset-left,0px));background:rgba(4,2,26,.9);backdrop-filter:blur(22px);border-bottom:1px solid var(--border)}
.mqn-logo{display:flex;align-items:center;gap:11px;flex-shrink:0}
.mqn-mark{width:31px;height:31px;flex-shrink:0;filter:drop-shadow(0 2px 8px rgba(245,160,48,.38));transition:transform .35s cubic-bezier(.2,.85,.25,1),filter .35s}
.mqn-logo:hover .mqn-mark{transform:translateY(-1px) scale(1.06);filter:drop-shadow(0 4px 14px rgba(245,160,48,.6))}
.mqn-mark .nm-sun{transition:transform .35s cubic-bezier(.2,.85,.25,1)}
.mqn-logo:hover .mqn-mark .nm-sun{transform:translateY(-.6px)}
.mqn-word{font-family:var(--serif);font-size:16px;font-weight:700;letter-spacing:.23em;text-transform:uppercase;background:linear-gradient(135deg,var(--cream),var(--amber) 45%,var(--horizon));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;transition:filter .35s}
.mqn-logo:hover .mqn-word{filter:brightness(1.08)}
.mqn-links{display:flex;gap:4px;align-items:center;margin-left:auto}
.mqn-link{font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--text2);padding:8px 13px;border-radius:999px;transition:all .2s;position:relative;white-space:nowrap}
.mqn-link:hover{color:var(--cream);background:rgba(255,255,255,.04)}
.mqn-link.on{color:var(--amber)}
.mqn-link.on::after{content:'';position:absolute;left:13px;right:13px;bottom:2px;height:1px;background:linear-gradient(90deg,transparent,var(--amber),transparent)}
.mqn-right{display:flex;align-items:center;gap:14px;flex-shrink:0}
.mqn-bell{position:relative;width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:15px;border:1px solid var(--border);background:rgba(255,255,255,.03);transition:all .2s;color:var(--text2)}
.mqn-bell:hover{border-color:var(--border2);color:var(--cream)}
.mqn-badge{position:absolute;top:-3px;right:-3px;min-width:16px;height:16px;padding:0 4px;border-radius:999px;background:linear-gradient(135deg,var(--ember),var(--horizon));color:var(--void);font-family:var(--sans-text);font-size:9px;font-weight:700;display:none;align-items:center;justify-content:center;border:1.5px solid var(--void)}
.mqn-badge.show{display:flex}
.mqn-av{width:36px;height:36px;border-radius:50%;border:2px solid rgba(255,208,96,.35);background:linear-gradient(135deg,var(--burnt),var(--horizon));display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:14px;font-weight:700;color:var(--void);overflow:hidden;flex-shrink:0}
.mqn-av img{width:100%;height:100%;object-fit:cover}
.mqn-signin{font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--void);background:linear-gradient(135deg,var(--burnt),var(--ember),var(--horizon));padding:10px 22px;border-radius:999px;transition:all .25s}
.mqn-signin:hover{box-shadow:0 10px 30px rgba(245,160,48,.4);transform:translateY(-1px)}
/* The panel is anchored to the right edge, so on a narrow phone its own min-width
   pushed its LEFT edge off the screen (300px panel, 24px gutter, 320px screen).
   min-width has to shrink too: in CSS min-width beats max-width, so a max-width
   alone would have been ignored. */
.mqn-menu{position:fixed;top:56px;right:24px;z-index:760;background:linear-gradient(135deg,#0E0828,#16092C);border:1px solid var(--border2);border-radius:14px;padding:8px;min-width:min(200px,calc(100vw - 36px));max-width:calc(100vw - 36px);box-shadow:0 30px 70px rgba(0,0,0,.7);display:none;flex-direction:column;gap:2px}
.mqn-menu.show{display:flex}
.mqn-mi{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:9px;font-size:14px;color:var(--text2);transition:all .18s;background:none;border:none;text-align:left;width:100%}
.mqn-mi:hover{background:rgba(255,200,80,.07);color:var(--cream)}
.mqn-mi.sep{border-top:1px solid var(--border);border-radius:0;margin-top:4px;padding-top:12px}
.mqn-mhead{padding:12px 12px 10px;border-bottom:1px solid var(--border);margin-bottom:4px}
.mqn-mname{font-family:var(--serif);font-size:17px;font-weight:700;color:var(--cream);line-height:1}
.mqn-mhandle{font-family:var(--sans-text);font-size:10px;color:var(--text3);margin-top:4px;letter-spacing:.05em}
/* Follow-request rows in the notification bell */
.mqn-fr-head{font-family:var(--mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--horizon);padding:8px 12px 6px}
.mqn-fr{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 10px;border-radius:10px}
.mqn-fr:hover{background:rgba(255,200,80,.05)}
.mqn-fr-who{display:flex;align-items:center;gap:9px;flex:1;min-width:0;color:var(--text2);text-decoration:none}
.mqn-fr-who b{color:var(--cream);font-size:14px;font-weight:600}
.mqn-fr-h{font-family:var(--sans-text);font-size:9px;color:var(--text3)}
.mqn-fr-acts{display:flex;gap:6px;flex-shrink:0}
.mqn-fr-ok,.mqn-fr-no{font-family:var(--mono);font-size:9px;letter-spacing:.06em;text-transform:uppercase;border-radius:999px;padding:6px 11px;cursor:pointer;border:1px solid transparent;transition:filter .15s,background .15s}
.mqn-fr-ok{background:linear-gradient(135deg,var(--horizon),var(--amber));color:var(--void);font-weight:700}
.mqn-fr-ok:hover{filter:brightness(1.12)}
.mqn-fr-no{background:rgba(255,255,255,.04);border-color:var(--border2);color:var(--text2)}
.mqn-fr-no:hover{background:rgba(255,255,255,.08);color:var(--cream)}
.mqn-fr-div{height:1px;background:var(--border);margin:6px 4px 4px}
@media(max-width:780px){
  #mq-nav{gap:10px;padding:0 16px}
  .mqn-links{gap:0;overflow-x:auto;-ms-overflow-style:none;scrollbar-width:none}
  .mqn-links::-webkit-scrollbar{display:none}
  .mqn-link{padding:8px 9px;font-size:10px}
}

/* page top spacer so fixed nav doesn't overlap */
.mq-pad{height:60px}

/* ============================ BUTTONS ============================ */
.mq-btn{font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:12px 26px;border-radius:999px;border:none;transition:all .25s;display:inline-flex;align-items:center;justify-content:center;gap:8px}
.mq-fire{background:linear-gradient(135deg,var(--burnt),var(--ember),var(--horizon));color:var(--void)}
.mq-fire:hover{box-shadow:0 14px 40px rgba(245,160,48,.5);transform:translateY(-2px)}
.mq-ghost{background:rgba(255,255,255,.05);border:1px solid var(--border2);color:var(--text2)}
.mq-ghost:hover{border-color:rgba(255,200,80,.4);color:var(--cream)}
.mq-el{background:rgba(0,212,255,.08);border:1px solid rgba(0,212,255,.28);color:var(--electric)}
.mq-el:hover{background:rgba(0,212,255,.16);border-color:rgba(0,212,255,.5)}

/* avatar helper */
.mq-av{border-radius:50%;background:linear-gradient(135deg,#1A0830,#2C1848);display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-weight:700;color:var(--horizon);overflow:hidden;flex-shrink:0;border:1px solid rgba(255,200,80,.12)}
/* The picture sits ON TOP of the member's monogram (see avatarHTML): if it 404s
   the letter is already painted underneath instead of an empty disc. */
.mq-av-img{position:relative}
.mq-av img{width:100%;height:100%;object-fit:cover}
.mq-av-img img{position:absolute;inset:0}
/* An avatar that opens says so, quietly: the amber ring warms and the picture
   lifts a hair. No badge, no overlay — the whole point is that it stays a face. */
.mq-av[data-mq-av]{transition:border-color .2s,box-shadow .2s,transform .2s}
.mq-av[data-mq-av]:hover{border-color:rgba(255,208,96,.55);box-shadow:0 0 0 2px rgba(245,160,48,.14),0 6px 18px rgba(0,0,0,.4);transform:translateY(-1px)}
@media(prefers-reduced-motion:reduce){.mq-av[data-mq-av]:hover{transform:none}}

/* ============ MQ.ask — the product's own prompt() / confirm() ============
   z-index above the log modal and the screening composer, because it is asked
   FROM them (a date on a screening, a reason on an admin action); below the
   moderation overlay and the consent gate. */
.mq-ask{position:fixed;inset:0;z-index:9870;display:flex;align-items:center;justify-content:center;
  padding:max(20px,env(safe-area-inset-top)) max(18px,env(safe-area-inset-right)) max(24px,env(safe-area-inset-bottom)) max(18px,env(safe-area-inset-left));
  overflow-y:auto;overflow-x:hidden;opacity:0;pointer-events:none;transition:opacity .22s ease}
.mq-ask.show{opacity:1;pointer-events:auto}
.mqask-scrim{position:absolute;inset:0;background:rgba(3,1,14,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.mqask-box{position:relative;z-index:2;width:100%;max-width:min(92vw,420px);margin:auto;flex:0 0 auto;
  background:linear-gradient(160deg,#140A32,#0C0722);border:1px solid var(--border2);border-radius:20px;
  padding:24px 22px 20px;box-shadow:0 34px 90px rgba(0,0,0,.66),0 0 60px rgba(245,160,48,.06);
  transform:translateY(10px) scale(.985);transition:transform .24s cubic-bezier(.2,.85,.25,1)}
.mq-ask.show .mqask-box{transform:none}
.mqask-x{position:absolute;top:13px;right:13px;width:32px;height:32px;border-radius:50%;z-index:3;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);color:var(--text2);font-size:14px;
  display:flex;align-items:center;justify-content:center;transition:all .2s}
.mqask-x:hover{border-color:var(--border2);color:var(--cream)}
.mqask-h{font-family:var(--serif);font-size:23px;line-height:1.15;color:var(--cream);padding-right:38px}
.mqask-note{font-size:13.5px;line-height:1.6;color:var(--text2);margin-top:8px}
.mqask-in{width:100%;margin-top:16px;background:var(--void);border:1px solid var(--border);border-radius:12px;
  padding:13px 14px;color:var(--text);font-family:var(--sans-text);font-size:16px;   /* 16px: anything less zooms iOS on focus */
  transition:border-color .18s}
.mqask-in:focus{outline:none;border-color:rgba(255,200,80,.45)}
.mqask-in.bad{border-color:var(--ember)}
textarea.mqask-in{resize:vertical;min-height:84px;line-height:1.55}
.mqask-acts{display:flex;justify-content:flex-end;gap:10px;margin-top:18px;flex-wrap:wrap}
.mqask-btn{font-family:var(--sans-text);font-size:13px;font-weight:600;padding:12px 20px;border-radius:11px;
  border:1px solid transparent;background:linear-gradient(135deg,var(--ember),var(--horizon));color:#1a0c04;
  transition:filter .2s,transform .2s;min-height:44px}
.mqask-btn:hover{filter:brightness(1.08)}
.mqask-btn.ghost{background:none;border-color:var(--border2);color:var(--text2)}
.mqask-btn.ghost:hover{color:var(--text);border-color:rgba(255,200,80,.4)}
.mqask-btn.danger{background:linear-gradient(135deg,#9B3018,#D05418);color:#FFF2D8}
body.mq-ask-open #oa-orb{opacity:0;pointer-events:none}

/* ==================== ✦ THE PORTRAIT (member picture) ====================
   Above the log modal (9800), the screening composer (9805) and the Fusion
   Theater (9850), because it can be opened from inside any of them; below the
   moderation overlay and the consent gate, which must never be covered. */
#mq-portrait{position:fixed;inset:0;z-index:9860;display:none;
  background:radial-gradient(ellipse 80% 60% at 50% 42%,rgba(26,12,72,.72),rgba(3,1,14,.96) 62%),rgba(3,1,14,.95);
  backdrop-filter:blur(26px);-webkit-backdrop-filter:blur(26px)}
#mq-portrait.on{display:block}
/* ⛬ The overlay does NOT scroll; this inner box does, and the ✕ is its sibling.
   `#mq-portrait` carries a backdrop-filter, and a backdrop-filter makes an element
   the containing block for `position:fixed` children — so a ✕ "fixed" inside the
   scroller travelled with the content and left the screen the moment a short phone
   had to scroll to reach the actions (measured -50..-6 at 320x568).
   overflow-x is not cosmetic either: .mqav-bg bleeds 90px past every edge so its
   blur has something to smear, and that bleed hands a scrolling box a horizontal
   scrollbar. */
.mqav-scroll{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  padding:calc(64px + env(safe-area-inset-top,0px)) 18px calc(30px + env(safe-area-inset-bottom,0px));
  overflow-y:auto;overflow-x:hidden}
/* The member's own picture, blown out and blurred into an ambient wash. It is
   their colour, so the room the portrait sits in is theirs too. */
/* The bleed lives inside its OWN clipping box. A 90px overflow on the scrolling
   overlay itself handed the portrait a horizontal scrollbar — the width axis
   again: an element positioned past an edge is invisible until you measure. */
.mqav-bgwrap{position:absolute;inset:0;overflow:hidden;pointer-events:none;border-radius:inherit}
/* ⛬ The wash is held DARK on purpose, and the numbers are measured, not taste.
   The picture behind the copy is a member's own poster and can be anything,
   including a white one. At brightness(.62)/opacity(.5) a white pixel composites
   to L≈0.086 and --text2 (the bio and the taste chips) lands at 3.66:1, under AA.
   At brightness(.34)/opacity(.42) the same worst case is L≈0.023, which puts
   --text2 at 6.8:1, --text3 at 4.5:1, cream at 12:1 and amber at 9.9:1. */
.mqav-bg{position:absolute;inset:-90px;background-size:cover;background-position:center;filter:blur(64px) saturate(1.3) brightness(.34);opacity:.42}
.mqav-bg.none{opacity:0}
.mqav-parts{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:.5}
.mqav-close{position:absolute;top:calc(20px + env(safe-area-inset-top,0px));right:20px;width:44px;height:44px;border-radius:50%;
  background:rgba(8,4,28,.6);border:1px solid rgba(255,200,80,.22);color:var(--cream);font-size:16px;
  display:flex;align-items:center;justify-content:center;transition:all .2s;backdrop-filter:blur(8px);z-index:3}
.mqav-close:hover{border-color:var(--ember);color:var(--ember);background:rgba(208,84,24,.16)}
.mqav-stage{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:22px;
  width:100%;max-width:min(92vw,560px);text-align:center;margin:auto}
#mq-portrait.on .mqav-stage{animation:mqavIn .42s cubic-bezier(.2,.85,.25,1)}
@keyframes mqavIn{from{opacity:0;transform:translateY(18px) scale(.955)}to{opacity:1;transform:none}}
/* The sunset ring, the same lockup the profile head wears, slowly turning. */
.mqav-ring{position:relative;width:clamp(200px,52vw,320px);height:clamp(200px,52vw,320px);border-radius:50%;padding:4px;flex:none;
  box-shadow:0 30px 90px rgba(0,0,0,.66),0 0 70px rgba(245,160,48,.18)}
/* The aura turns, the picture does not: the gradient lives on a pseudo-element
   so the photograph inside is never rotated (and never re-rasterised). */
.mqav-ring::before{content:'';position:absolute;inset:0;border-radius:50%;
  background:conic-gradient(from 210deg,#9B3018,#D05418,#F5A030,#FFD060,#FFF2D8,#F5A030,#9B3018);
  animation:mqavSpin 26s linear infinite}
@keyframes mqavSpin{to{transform:rotate(360deg)}}
.mqav-frame{position:relative;width:100%;height:100%;border-radius:50%;overflow:hidden;background:#12082C;
  display:flex;align-items:center;justify-content:center}
.mqav-img{width:100%;height:100%;object-fit:cover;display:block}
.mqav-mono{width:100%;height:100%;display:flex;align-items:center;justify-content:center;
  font-family:var(--serif);font-weight:700;font-size:clamp(74px,20vw,120px);color:#04021A}
.mqav-house{font-size:clamp(74px,18vw,116px);line-height:1;
  background:radial-gradient(circle at 50% 62%,#FFF2D8,#F5A030 42%,#9B3018);-webkit-background-clip:text;background-clip:text;color:transparent}
/* A COVER is landscape, so its frame is the banner it lives in, not a circle.
   Everything else — the ring, the close, the whole-frame toggle — is shared.
   ⛬ THE STAGE OWNS THE WIDTH; every child is 100% of it. Sizing the ring off the
   VIEWPORT (min(92vw,760px)) while its parent is sized off the padded, scrollbar
   reduced container put the ring 351px wide inside a 323px box — 28px hanging out
   of the dialog at 390, and 30px at 320. The width axis, from the other direction:
   not "wider than the screen" but "wider than the box it is in". */
.mqav-stage.art{max-width:min(94vw,760px)}
.mqav-stage.art .mqav-ring{width:100%;max-width:100%;height:auto;aspect-ratio:16/7;border-radius:16px;padding:3px}
/* A GALLERY: the same shell with arrows and a filmstrip, for a title's artwork.
   Everything is max-width:100% of the stage — the stage owns the width. */
.mqav-shot{position:relative;display:flex;align-items:center;justify-content:center;width:100%;max-width:100%}
.mqav-nav{position:absolute;top:50%;transform:translateY(-50%);width:46px;height:46px;border-radius:50%;z-index:2;
  background:rgba(8,4,28,.62);border:1px solid rgba(255,200,80,.22);color:var(--cream);font-size:22px;line-height:1;
  display:flex;align-items:center;justify-content:center;transition:all .2s;backdrop-filter:blur(8px)}
.mqav-nav:hover{border-color:var(--horizon);color:var(--horizon);background:rgba(245,160,48,.16)}
.mqav-nav.prev{left:6px}.mqav-nav.next{right:6px}
@media(min-width:940px){.mqav-nav.prev{left:-66px}.mqav-nav.next{right:-66px}}
.mqav-strip{display:flex;gap:8px;max-width:100%;overflow-x:auto;padding:2px;scrollbar-width:none}
.mqav-strip::-webkit-scrollbar{display:none}
.mqav-thumb{flex:0 0 auto;width:46px;height:64px;border-radius:7px;overflow:hidden;border:1px solid var(--border);
  opacity:.45;transition:opacity .2s,border-color .2s;background:#1A0830;padding:0}
.mqav-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.mqav-thumb:hover{opacity:.85}
.mqav-thumb.on{opacity:1;border-color:var(--horizon)}
.mqav-stage.art .mqav-ring::before{border-radius:16px;animation:none;background:linear-gradient(120deg,#9B3018,#F5A030 45%,#FFD060 70%,#9B3018)}
.mqav-stage.art .mqav-frame{border-radius:14px}
.mqav-stage.art .mqav-img{width:100%;height:100%;object-fit:cover}
/* "See the whole frame": the circle becomes the picture it was cut from. */
/* aspect-ratio:auto is load-bearing: the cover view sets 16/7 on the ring, and
   without clearing it the "whole frame" state cannot shrink-wrap the picture. */
.mqav-stage.full .mqav-ring{width:auto;height:auto;aspect-ratio:auto;max-width:100%;border-radius:16px;padding:3px}
.mqav-stage.art.full{max-width:min(94vw,900px)}
.mqav-stage.full .mqav-ring::before{border-radius:16px;animation:none;background:linear-gradient(150deg,#9B3018,#F5A030,#FFD060)}
.mqav-stage.full .mqav-frame{display:block;width:auto;height:auto;border-radius:14px}
/* The frame shrink-wraps the picture rather than pillar-boxing it: a poster is
   2:3 and a still is 16:9, and a fixed box would have framed one of them in bars. */
.mqav-stage.full .mqav-img{display:block;width:auto;height:auto;object-fit:contain;
  transform:none!important;object-position:50% 50%!important;max-width:100%;max-height:56vh}
.mqav-id{display:flex;flex-direction:column;align-items:center;gap:8px;max-width:100%}
.mqav-name{font-family:var(--serif);font-size:clamp(28px,7vw,42px);font-weight:600;color:var(--cream);line-height:1.1;
  text-shadow:0 3px 26px rgba(0,0,0,.7);display:flex;align-items:center;gap:9px;justify-content:center;flex-wrap:wrap}
.mqav-off{font-size:.55em;color:var(--horizon)}
.mqav-sub{font-family:var(--sans-text);font-size:11px;letter-spacing:.1em;color:var(--amber)}
.mqav-bio{font-size:14px;line-height:1.6;color:var(--text2);max-width:44ch;margin-top:2px}
.mqav-tags{display:flex;flex-wrap:wrap;gap:7px;justify-content:center;margin-top:2px}
.mqav-tag{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--text2);
  border:1px solid var(--border2);border-radius:999px;padding:5px 11px;background:rgba(255,255,255,.03)}
.mqav-acts{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;max-width:100%}
.mqav-btn{font-family:var(--sans-text);font-size:12px;font-weight:600;letter-spacing:.04em;padding:12px 20px;border-radius:999px;
  border:1px solid transparent;background:linear-gradient(135deg,var(--ember),var(--horizon));color:#1A0800;
  text-decoration:none;display:inline-flex;align-items:center;gap:7px;transition:all .2s;white-space:nowrap;
  max-width:calc(100vw - 56px);overflow:hidden;text-overflow:ellipsis}
.mqav-btn:hover{filter:brightness(1.1);transform:translateY(-1px)}
.mqav-btn.ghost{background:rgba(255,255,255,.05);border-color:var(--border2);color:var(--cream)}
.mqav-btn.ghost:hover{border-color:rgba(255,200,80,.45);background:rgba(245,160,48,.12)}
.mqav-gone{font-family:var(--serif);font-style:italic;font-size:15px;color:var(--text3)}
.mqav-full{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--text2);
  background:none;border:none;padding:4px 8px;transition:color .2s}
.mqav-full:hover{color:var(--horizon)}
/* --text4 is the faintest tier and measures 2.5:1 on this wash. 9px is small
   text, so the large-text allowance does not apply: --text3 or nothing. */
.mqav-hint{font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--text3)}
/* The Oracle orb is a fixed FAB and the portrait is a full screen: it would
   land on the actions. Same rule the heroes already follow. */
body.mq-portrait-on #oa-orb{opacity:0;pointer-events:none}
body.mq-portrait-on #mq-tabs{opacity:0;pointer-events:none}
@media(max-width:860px){
  .mqav-stage{gap:18px}
  .mqav-hint{display:none}          /* there is no Esc key to press */
}
@media(prefers-reduced-motion:reduce){
  #mq-portrait.on .mqav-stage{animation:none}
  .mqav-ring::before{animation:none}
}

/* ============================ TOAST ============================ */
#mq-toast{position:fixed;bottom:calc(30px + env(safe-area-inset-bottom,0px));left:50%;transform:translateX(-50%) translateY(14px);background:rgba(12,6,32,.97);border:1px solid rgba(255,200,80,.24);border-radius:999px;padding:12px 26px;font-family:var(--sans-text);font-size:11px;letter-spacing:.08em;color:var(--amber);z-index:99990;opacity:0;transition:transform .3s,opacity .3s;pointer-events:none;backdrop-filter:blur(16px);white-space:nowrap;max-width:90vw;overflow:hidden;text-overflow:ellipsis}
#mq-toast.show{transform:translateX(-50%) translateY(0);opacity:1}

/* ============ PUSH OPT-IN PROMPT (one-time, tasteful) ============ */
.mq-pushp{position:fixed;z-index:9600;left:50%;bottom:calc(22px + env(safe-area-inset-bottom,0px));transform:translateX(-50%) translateY(150%);width:min(420px,calc(100vw - 28px));background:linear-gradient(150deg,#170B36,#0C0722);border:1px solid var(--border2);border-radius:20px;padding:18px 18px 15px;box-shadow:0 30px 80px rgba(0,0,0,.62),0 0 46px rgba(245,160,48,.07);display:grid;grid-template-columns:auto 1fr;gap:2px 14px;opacity:0;transition:transform .42s cubic-bezier(.2,.85,.25,1),opacity .42s}
.mq-pushp.show{transform:translateX(-50%) translateY(0);opacity:1}
.mq-pushp-ic{width:44px;height:44px;border-radius:13px;display:flex;align-items:center;justify-content:center;font-size:22px;background:linear-gradient(135deg,rgba(245,160,48,.24),rgba(208,84,24,.14));border:1px solid rgba(255,200,80,.24);box-shadow:0 0 22px rgba(245,160,48,.14) inset}
.mq-pushp-tx{grid-column:2/3}
.mq-pushp-t{font-family:var(--serif);font-size:19px;font-weight:700;color:var(--cream);line-height:1.15;margin-bottom:4px}
.mq-pushp-s{font-size:15px;color:var(--text2);line-height:1.5}
.mq-pushp-btns{grid-column:1/3;display:flex;gap:10px;margin-top:14px;justify-content:flex-end}
.mq-pushp-no,.mq-pushp-yes{font-family:var(--sans-text);font-size:12px;font-weight:600;letter-spacing:.03em;padding:10px 18px;border-radius:11px;cursor:pointer;transition:all .2s}
.mq-pushp-no{background:none;border:1px solid var(--border2);color:var(--text2)}
.mq-pushp-no:hover{color:var(--cream);border-color:var(--text3)}
.mq-pushp-yes{background:linear-gradient(135deg,var(--horizon),var(--ember));border:none;color:#1a0a02;box-shadow:0 8px 22px rgba(245,160,48,.3)}
.mq-pushp-yes:hover{filter:brightness(1.07)}
.mq-pushp-yes:disabled{opacity:.7;cursor:default}
@media(max-width:860px){ .mq-pushp{bottom:calc(78px + env(safe-area-inset-bottom,0px))} }

/* ============================ MINI QUICK VIEW ============================ */
#mq-qv{position:fixed;inset:0;z-index:9000;display:none;align-items:center;justify-content:center;padding:24px}
#mq-qv.show{display:flex}
.mqv-bg{position:absolute;inset:0;background:rgba(4,2,26,.9);backdrop-filter:blur(22px)}
.mqv-box{position:relative;z-index:2;background:linear-gradient(135deg,#0E0828,#18082C);border:1px solid rgba(255,200,80,.15);border-radius:24px;overflow:hidden;max-width:760px;width:100%;display:grid;grid-template-columns:230px 1fr;box-shadow:0 48px 100px rgba(0,0,0,.8);max-height:88vh}
.mqv-left{overflow:hidden;background:linear-gradient(135deg,#1A0830,#2C0820);display:flex;align-items:center;justify-content:center;font-size:60px}
/* ⛬ ONE art block, and ONE phone sheet, for BOTH quick views.
   cinemere-browse.html keeps its own quick view (#qv / .qv-*) because it carries
   fields this one does not (TVmaze network, runtime, status, vote counts), so the
   artwork markup and the phone layout are shared through HOOK CLASSES rather than
   copied into that page. Same law as starPicker and mediumPicker: the last time a
   second copy of a shared control was written, it silently lost a feature.
   Both quick views stamp: .mq-qvart (the art host) · .mq-qvbody · .mq-qvacts, and
   both fill the art host from MQ.qvArtHTML(). */
.mq-qvart{position:relative;overflow:hidden}
.mq-qvart .mqa-bg{display:none}
.mq-qvart .mqa-shot{width:100%;height:100%;object-fit:cover;display:block;min-height:340px}
.mq-qvart .mqa-fb{line-height:1}
/* ⛬ The synopsis slot while we are still looking it up, and what it says if the
   catalogue genuinely holds nothing. A panel used to print "No synopsis
   available." the instant it had no overview in hand, which was a claim about the
   film made before anyone had fetched it. Three shimmer lines say "looking"; the
   honest empty line says what is actually true, and says it quietly. */
.mq-ovskel{display:block}
.mq-ovskel i{display:block;height:11px;border-radius:4px;margin:7px 0;
  background:linear-gradient(90deg,rgba(255,220,160,.05) 0%,rgba(255,220,160,.13) 50%,rgba(255,220,160,.05) 100%);
  background-size:200% 100%;animation:mq-ovshim 1.5s ease-in-out infinite}
.mq-ovskel i:nth-child(2){animation-delay:.12s}
.mq-ovskel i:nth-child(3){width:62%;animation-delay:.24s}
@keyframes mq-ovshim{0%{background-position:130% 0}100%{background-position:-30% 0}}
@media(prefers-reduced-motion:reduce){ .mq-ovskel i{animation:none} }
.mq-ovnone{color:var(--text3);font-style:italic}
/* visually hidden, but a screen reader still hears that something is loading */
.mq-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* An unrated title renders no score, so the meta row can come out empty. Without
   this it still spends a flex gap and reads as a missing element. */
.mq-qvbody .mqv-mrow:empty,.mq-qvbody .qv-mrow:empty,
.mq-qvbody .mqv-genres:empty,.mq-qvbody .qv-genres:empty{display:none}
.mqv-right{padding:30px 28px;display:flex;flex-direction:column;gap:12px;overflow-y:auto}
.mqv-type{font-family:var(--mono);font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--horizon)}
.mqv-title{font-family:var(--serif);font-size:clamp(24px,3vw,38px);font-weight:700;color:var(--cream);line-height:1.05}
.mqv-mrow{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.mqv-sc{font-family:var(--serif);font-size:26px;font-weight:700;color:var(--amber)}
.mqv-m{font-family:var(--sans-text);font-size:10px;color:var(--text3);letter-spacing:.06em}
.mqv-ov{font-family:var(--serif);font-size:15.5px;font-weight:400;line-height:1.68;color:rgba(255,228,196,.92)}
.mqv-genres{display:flex;gap:7px;flex-wrap:wrap}
.mqv-g{font-family:var(--mono);font-size:9px;letter-spacing:.09em;text-transform:uppercase;padding:4px 11px;border-radius:999px;border:1px solid rgba(255,200,80,.12);color:var(--text3);background:rgba(255,200,80,.03)}
.mqv-acts{display:flex;gap:9px;flex-wrap:wrap;margin-top:6px}
/* The way out of a quick view. It used to be a 7%-white disc with a --text2 glyph,
   which all but vanished against the card, and under 760px the layout puts this exact
   button on top of the POSTER, where a translucent white disc is invisible outright.
   So it now carries its own dark ground + an ember ring: it reads on the card, on a
   bright poster, and on a backdrop, without shouting over the actions below it.
   The ::after is a 50px touch target held behind a 36px face (a 30px control is under
   every mobile hit-target guideline, and this is the control you reach for in a hurry). */
.mqv-close{position:absolute;top:12px;right:12px;width:36px;height:36px;border-radius:50%;background:rgba(6,3,20,.82);border:1px solid rgba(255,208,96,.42);color:var(--cream);font-size:15px;line-height:1;display:flex;align-items:center;justify-content:center;z-index:3;box-shadow:0 6px 22px rgba(0,0,0,.5),0 0 0 1px rgba(0,0,0,.35);-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);transition:background .18s,border-color .18s,color .18s,transform .18s,box-shadow .18s}
.mqv-close::after{content:'';position:absolute;inset:-7px;border-radius:50%}
.mqv-close:hover{background:linear-gradient(150deg,var(--fire),var(--burnt));border-color:var(--amber);color:#FFF6E4;transform:scale(1.07);box-shadow:0 10px 28px rgba(232,120,32,.45)}
.mqv-close:active{transform:scale(.95)}

/* ===== WATCHLIST STATE ======================================================
   "Already saved" used to be carried by ONE WORD. The title page's button read
   "♡ Watchlist" or "✓ Watchlisted" while its background, border and text colour
   stayed pixel-identical to the two neighbouring pills, so the state was
   invisible unless you stopped and read the middle button. Poster cards carried
   no mark at all, so scrolling a row of 40 titles told you nothing about which
   ones you had already put aside. Both are answered here, in core, so every
   surface that draws a card or a save button gets the same signal.
   `.mq-wl-on` is the saved BUTTON state; `.mq-wlflag` is the corner mark on a
   poster. Keep them in step: the same ember fill means the same thing. */
.mq-wl-on{background:linear-gradient(135deg,var(--burnt),var(--ember))!important;border-color:var(--amber)!important;color:#FFF6E4!important;box-shadow:0 4px 18px rgba(208,84,24,.34)}
.mq-wlflag{position:absolute;top:6px;left:6px;z-index:3;display:flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:linear-gradient(150deg,var(--fire),var(--burnt));border:1px solid rgba(255,214,120,.85);color:#FFF6E4;font-family:var(--sans);font-size:11px;font-weight:700;line-height:1;box-shadow:0 3px 12px rgba(0,0,0,.5),0 0 16px rgba(245,160,48,.42);pointer-events:none}
@media(max-width:860px){.mq-wlflag{width:20px;height:20px;font-size:10px;top:5px;left:5px}}

/* ===== SEEN — "watched it, no idea when" ===================================
   Deliberately a QUIETER mark than the watchlist's ember pill. A watchlist entry
   is an intention and wants to catch the eye; this is a fact about the past and
   should read as settled rather than urgent. Green, the same status green the
   design system already uses for "connected" and "airing", and the poster flag
   sits in the OPPOSITE corner to the watchlist flag so a title can carry the
   history of both without the two ever colliding. */
.mq-seen-btn.mq-seen-on{color:#0B2417;border-color:transparent;background:linear-gradient(135deg,var(--green),#5FBF89);font-weight:700}
.mq-seen-btn.mq-seen-on:hover{background:linear-gradient(135deg,#96E4B4,var(--green))}
.mq-seenflag{position:absolute;top:6px;right:6px;z-index:3;display:flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:linear-gradient(150deg,var(--green),#4E9E72);border:1px solid rgba(190,240,214,.8);color:#08251A;font-family:var(--sans);font-size:12px;font-weight:800;line-height:1;box-shadow:0 3px 12px rgba(0,0,0,.5),0 0 14px rgba(128,212,160,.35);pointer-events:none}
@media(max-width:860px){.mq-seenflag{width:20px;height:20px;font-size:11px;top:5px;right:5px}}

/* ===== ADD TO LIST =========================================================
   The saved state is a COUNT, not a toggle: a title can sit in several lists, and
   "In 2 lists" is the thing worth telling you. Amber like the watchlist, because
   both are intentions about the future, where the green ✓ is a fact about the past. */
.mq-list-btn.mq-list-on{color:#2A0E12;border-color:transparent;background:linear-gradient(135deg,var(--horizon),var(--amber));font-weight:700}
.mq-list-btn.mq-list-on:hover{background:linear-gradient(135deg,var(--amber),#FFE9A8)}
body.mq-atl-open #oa-orb{opacity:0;pointer-events:none;transform:scale(.82)}
.mq-atl{position:fixed;inset:0;z-index:9550;display:flex;align-items:flex-start;justify-content:center;overflow-y:auto;padding:20px 20px calc(20px + env(safe-area-inset-bottom,0px));opacity:0;pointer-events:none;transition:opacity .24s ease}
.mq-atl.on{opacity:1;pointer-events:auto}
.mqatl-scrim{position:absolute;inset:0;background:rgba(3,1,14,.84);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.mqatl-box{position:relative;z-index:2;margin:auto;width:min(520px,100%);max-height:92vh;max-height:92dvh;display:grid;grid-template-rows:auto auto minmax(0,1fr) auto;
  background:linear-gradient(165deg,#140B34,#0A0522 64%,#0B0420);border:1px solid rgba(255,200,80,.17);border-radius:22px;
  box-shadow:0 46px 110px rgba(0,0,0,.8),0 0 60px rgba(245,160,48,.06);padding:20px 20px 16px;transform:translateY(10px) scale(.986);transition:transform .28s cubic-bezier(.2,.8,.25,1)}
.mq-atl.on .mqatl-box{transform:none}
.mqatl-head{display:flex;gap:14px;align-items:flex-start}
.mqatl-pos{width:52px;flex:none;aspect-ratio:2/3;border-radius:8px;overflow:hidden;background:linear-gradient(145deg,#1A0830,#2C0820);border:1px solid rgba(255,200,80,.18);display:flex;align-items:center;justify-content:center;font-size:20px}
.mqatl-pos img{width:100%;height:100%;object-fit:cover}
.mqatl-htx{min-width:0;flex:1}
.mqatl-eyebrow{font-family:var(--mono);font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--horizon);margin-bottom:5px}
.mqatl-t{font-family:var(--serif);font-size:22px;font-weight:700;color:var(--cream);line-height:1.12;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.mqatl-y{font-family:var(--sans-text);font-size:10px;letter-spacing:.08em;color:rgba(255,236,212,.86);margin-top:4px}
.mqatl-x{width:32px;height:32px;flex:none;border-radius:50%;border:1px solid var(--border2);background:rgba(255,255,255,.04);color:var(--text2);font-size:13px}
.mqatl-x:hover{color:var(--cream);border-color:rgba(255,200,80,.45)}
.mqatl-new{display:flex;gap:8px;margin:16px 0 12px}
.mqatl-ninput{flex:1;min-width:0;background:rgba(255,255,255,.05);border:1px solid var(--border2);border-radius:11px;padding:11px 13px;color:var(--text);font-family:var(--sans-text);font-size:14px;outline:none}
.mqatl-ninput:focus{border-color:rgba(255,200,80,.45)}
.mqatl-ninput::placeholder{color:var(--text3)}
.mqatl-nbtn{flex:none;border-radius:11px;padding:11px 15px;border:1px solid rgba(255,200,80,.28);background:rgba(255,200,80,.08);color:var(--amber);font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase}
.mqatl-nbtn:hover{background:rgba(255,200,80,.16)}
.mqatl-rows{min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:8px;padding:2px 2px 2px 0}
.mqatl-row{display:flex;align-items:center;gap:13px;width:100%;text-align:left;padding:10px 13px 10px 11px;border-radius:14px;border:1px solid var(--border);background:rgba(255,255,255,.028);transition:border-color .18s,background .18s}
.mqatl-row:hover{border-color:rgba(255,200,80,.3);background:rgba(255,200,80,.05)}
.mqatl-row.on{border-color:rgba(255,200,80,.45);background:rgba(255,200,80,.1)}
.mqatl-stack{position:relative;width:66px;height:42px;flex:none}
.mqatl-stack span{position:absolute;top:0;width:28px;height:42px;border-radius:5px;overflow:hidden;border:1px solid rgba(4,2,26,.85);box-shadow:0 3px 10px rgba(0,0,0,.5)}
.mqatl-stack img{width:100%;height:100%;object-fit:cover}
.mqatl-stack-e{display:flex;align-items:center;justify-content:center;border-radius:6px;background:rgba(255,200,80,.06);border:1px dashed rgba(255,200,80,.22);font-size:15px;color:var(--text3)}
.mqatl-rtx{min-width:0;flex:1;display:flex;flex-direction:column;gap:3px}
/* Two lines rather than one hard ellipsis: on a 320px phone "The Ones That
   Rearranged Me" truncated to "The Ones Th…", which is not enough of a name to
   pick the right list by. */
.mqatl-rnm{font-family:var(--sans-text);font-size:14px;font-weight:600;color:var(--cream);line-height:1.25;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.mqatl-rmeta{font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--text3)}
.mqatl-tick{flex:none;width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;color:var(--text3);border:1px solid var(--border2);background:rgba(255,255,255,.04)}
.mqatl-row.on .mqatl-tick{color:#2A0E12;background:linear-gradient(135deg,var(--horizon),var(--amber));border-color:transparent}
.mqatl-empty{font-size:13px;line-height:1.6;color:var(--text2);padding:20px 6px;text-align:center}
.mqatl-foot{padding-top:13px}
.mqatl-done{width:100%;padding:13px;border-radius:13px;border:none;background:linear-gradient(135deg,var(--burnt),var(--ember));color:var(--cream);font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:.09em;text-transform:uppercase}
.mqatl-done:hover{background:linear-gradient(135deg,var(--ember),var(--fire))}
@media(max-width:560px){
  .mqatl-box{padding:16px 15px 13px;border-radius:19px}
  .mqatl-t{font-size:19px}
  .mqatl-new{flex-direction:column}
  .mqatl-nbtn{width:100%;padding:12px}
}

/* ===== THE SWEEP — "Have you seen this?" =================================
   The orb stands down while the sweep is open, the same way it does for the
   consent gate (body.mq-consenting) and over a hero (body.mq-hero-on). Measured
   at 320x568 it sat directly on top of the "Seen it" button, which is the one
   control the whole surface exists for. */
body.mq-sweeping #oa-orb{opacity:0;pointer-events:none;transform:scale(.82)}
/* The quick view is the same shape of surface and had the same defect, reported
   2026-09-03 with screenshots: on a phone the orb (a fixed FAB at z-index 9700,
   i.e. above BOTH quick views) sat on the action pills and on the primary CTA.
   Set by MQ.miniQV and by Browse's own openQV, cleared by either close. */
body.mq-qv-open #oa-orb{opacity:0;pointer-events:none;transform:scale(.82)}
/* The overlay scrolls and the box centres with margin:auto rather than
   align-items:center. With centring, a box taller than the viewport has its TOP
   cut off and no way to reach it: the same class of defect as the log modal's
   grid track, caught here by the gate before it shipped. */
/* The bottom padding carries the safe area: installed as an app there is no browser
   chrome, and on a device with a home indicator the "Seen it" button would otherwise
   sit under it. The answer buttons are the entire surface. */
.mq-sweep{position:fixed;inset:0;z-index:9500;display:flex;align-items:flex-start;justify-content:center;overflow-y:auto;padding:20px 20px calc(20px + env(safe-area-inset-bottom,0px));opacity:0;pointer-events:none;transition:opacity .26s ease}
.mq-sweep.on{opacity:1;pointer-events:auto}
.mqsw-scrim{position:absolute;inset:0;background:rgba(3,1,14,.86);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
/* Seven rows now: head · sub · filters · stage · answers · rating tray · foot.
   The tray and the answer row are never both shown, but both hold a row. */
.mqsw-box{position:relative;z-index:2;margin:auto;width:min(560px,100%);max-height:92vh;max-height:92dvh;display:grid;grid-template-rows:auto auto auto minmax(0,1fr) auto auto auto;gap:0;
  background:linear-gradient(165deg,#120A32,#0A0522 62%,#0B0420);border:1px solid rgba(255,200,80,.16);border-radius:24px;
  box-shadow:0 50px 120px rgba(0,0,0,.8),0 0 70px rgba(128,212,160,.05);padding:22px 22px 18px;transform:translateY(10px) scale(.985);transition:transform .3s cubic-bezier(.2,.8,.25,1)}
.mq-sweep.on .mqsw-box{transform:none}
/* ⛬ A grid item defaults to `min-width:auto`, i.e. its own max-content width, and
   that measurement passes straight THROUGH an inner scroller. Making the era chips
   one non-wrapping row on phones therefore blew the whole dialog out to 427px on a
   320px screen: the box, not the chips, was too wide. Every row of this box must be
   allowed to shrink. */
.mqsw-box > *{min-width:0}
.mqsw-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}
.mqsw-eyebrow{font-family:var(--mono);font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--green);margin-bottom:5px}
.mqsw-title{font-family:var(--serif);font-size:29px;font-weight:700;color:var(--cream);line-height:1}
.mqsw-x{width:34px;height:34px;flex:none;border-radius:50%;border:1px solid var(--border2);background:rgba(255,255,255,.04);color:var(--text2);font-size:14px}
.mqsw-x:hover{color:var(--cream);border-color:rgba(255,200,80,.45)}
.mqsw-sub{font-size:13px;line-height:1.6;color:var(--text2);margin:10px 0 14px}
.mqsw-filters{display:flex;flex-direction:column;gap:9px;margin-bottom:14px}
.mqsw-seg{display:inline-flex;align-self:flex-start;border:1px solid var(--border2);border-radius:999px;overflow:hidden}
.mqsw-seg button{padding:7px 18px;font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--text2);background:none;border:none}
.mqsw-seg button.on{background:linear-gradient(135deg,var(--ember),var(--horizon));color:#2A0E12}
.mqsw-chips{display:flex;flex-wrap:wrap;gap:7px}
.mqsw-chips button{padding:6px 13px;border-radius:999px;border:1px solid var(--border2);background:rgba(255,200,80,.03);color:var(--text2);font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase}
.mqsw-chips button.on{background:rgba(255,200,80,.14);color:var(--amber);border-color:rgba(255,200,80,.42)}
/* `position:relative` because an answered card flies out as a CLONE in its own
   absolutely-positioned layer over this one: the next card is on screen at once,
   so a fast sweeper never waits on an animation, and the exit is clipped here
   rather than spilling out of the dialog. */
.mqsw-stage{position:relative;min-height:0;overflow:hidden;display:flex;align-items:center;justify-content:center}
.mqsw-live{width:100%;min-width:0}
.mqsw-card{display:flex;gap:18px;align-items:center;width:100%;animation:mqswIn .28s cubic-bezier(.2,.8,.25,1)}
@keyframes mqswIn{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}
.mqsw-ghost{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;z-index:3}
.mqsw-ghost .mqsw-card{animation:none}
@keyframes mqswFlyL{from{opacity:1;transform:none}to{opacity:0;transform:translateX(-44%) rotate(-5deg) scale(.88)}}
@keyframes mqswFlyR{from{opacity:1;transform:none}to{opacity:0;transform:translateX(44%) rotate(5deg) scale(.88)}}
.mqsw-fly-l{animation:mqswFlyL .44s cubic-bezier(.35,0,.8,.4) forwards}
.mqsw-fly-r{animation:mqswFlyR .44s cubic-bezier(.35,0,.8,.4) forwards}
/* The answer, stamped on the frame as it leaves. Dark ink on a solid fill, so it
   is legible over whatever the poster happens to be. */
.mqsw-stamp{position:absolute;left:50%;top:50%;font-family:var(--sans);font-weight:800;font-size:40px;line-height:1;white-space:nowrap;
  color:#08251A;background:linear-gradient(135deg,#9CE8BA,var(--green));border-radius:999px;padding:12px 26px;
  box-shadow:0 18px 48px rgba(0,0,0,.6);animation:mqswStamp .46s cubic-bezier(.2,.9,.3,1) forwards}
.mqsw-stamp.rate{font-size:28px;color:#2A1806;background:linear-gradient(135deg,var(--horizon),var(--amber))}
@keyframes mqswStamp{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.5) rotate(-14deg)}
  45%{opacity:1;transform:translate(-50%,-50%) scale(1.04) rotate(-6deg)}
  100%{opacity:0;transform:translate(-50%,-50%) scale(1.14) rotate(-6deg)}}
.mqsw-loading{display:flex;align-items:center;justify-content:center;gap:11px;color:var(--text3)}
.mqsw-spin{flex:none;width:15px;height:15px;border-radius:50%;border:2px solid rgba(255,200,80,.2);border-top-color:var(--amber);animation:mqswSpin .8s linear infinite}
@keyframes mqswSpin{to{transform:rotate(360deg)}}
.mqsw-poster{width:132px;flex:none;aspect-ratio:2/3;border-radius:13px;overflow:hidden;background:linear-gradient(145deg,#1A0830,#2C0820);border:1px solid rgba(255,200,80,.16);display:flex;align-items:center;justify-content:center;font-size:34px;box-shadow:0 24px 60px rgba(0,0,0,.62)}
.mqsw-poster img{width:100%;height:100%;object-fit:cover}
.mqsw-meta{min-width:0}
.mqsw-t{font-family:var(--serif);font-size:26px;font-weight:700;color:var(--cream);line-height:1.08;margin-bottom:7px}
.mqsw-y{font-family:var(--sans-text);font-size:11px;letter-spacing:.08em;color:rgba(255,236,212,.88);margin-bottom:11px}
.mqsw-g{display:flex;flex-wrap:wrap;gap:6px}
.mqsw-g span{padding:4px 10px;border-radius:999px;border:1px solid var(--border2);background:rgba(255,200,80,.03);font-family:var(--mono);font-size:9px;letter-spacing:.09em;text-transform:uppercase;color:var(--text2)}
.mqsw-empty{font-size:14px;line-height:1.6;color:var(--text2);text-align:center;padding:26px 10px}
.mqsw-emptyb{margin-top:14px}
/* The member can take a pass back. A film they had not seen in 2019 is a film
   they may well have seen by now, so the memory is theirs to clear. */
.mqsw-reset{max-width:100%;padding:9px 16px;border-radius:999px;border:1px solid rgba(255,200,80,.34);background:rgba(255,200,80,.08);
  font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--amber)}
.mqsw-reset:hover{background:rgba(255,200,80,.16);color:var(--cream)}
/* Three answers. `min-width:0` on the children because a grid item defaults to
   its content's intrinsic width, which is how a label runs off a phone. */
.mqsw-acts{display:grid;grid-template-columns:1fr 1fr 1.2fr;gap:10px;margin-top:16px}
.mqsw-acts[hidden]{display:none}
.mqsw-acts button{min-width:0;padding:15px 10px;border-radius:14px;font-family:var(--sans);font-size:13px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;border:1px solid var(--border2);transition:transform .12s,background .2s,border-color .2s}
.mqsw-acts button:disabled{opacity:.4}
.mqsw-acts button:not(:disabled):active{transform:scale(.97)}
.mqsw-no{background:rgba(255,255,255,.05);color:var(--text2)}
.mqsw-no:not(:disabled):hover{color:var(--cream);border-color:rgba(255,200,80,.4)}
.mqsw-yes{background:linear-gradient(135deg,var(--green),#4E9E72);color:#08251A;border-color:transparent}
.mqsw-yes:not(:disabled):hover{background:linear-gradient(135deg,#9CE8BA,var(--green))}
/* Amber, not green: this is the answer that carries an opinion, and the palette
   already spends amber on ratings everywhere else on the site. */
.mqsw-rate{background:linear-gradient(135deg,var(--horizon),var(--amber));color:#2A1806;border-color:transparent}
.mqsw-rate:not(:disabled):hover{background:linear-gradient(135deg,var(--amber),#FFE9A8)}
.mqsw-rate .s{display:none}
/* ── the rating tray ────────────────────────────────────────────────────────
   It replaces the answer row rather than sitting under it, so the dialog never
   grows a second decision the member has to scroll to. */
.mqsw-tray{margin-top:16px;padding:14px 16px 15px;border:1px solid rgba(255,200,80,.30);border-radius:16px;
  background:linear-gradient(150deg,rgba(255,160,48,.10),rgba(255,208,96,.035));animation:mqswTrayIn .3s cubic-bezier(.2,.8,.25,1)}
.mqsw-tray[hidden]{display:none}
@keyframes mqswTrayIn{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
.mqsw-trayhead{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:11px}
.mqsw-trayeye{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--mono);font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--amber)}
.mqsw-back{flex:none;font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--text3);background:none;border:none;padding:4px 0}
.mqsw-back:hover{color:var(--cream)}
/* Bigger and further apart than the star row anywhere else on the site, because
   there is room here and a half is only half a star wide. Specificity beats
   `.mqlog-stars` (declared later in this file), which is why both are descended. */
.mqsw-stars{justify-content:center}
.mqsw-tray .mqsw-stars{gap:12px}
.mqsw-tray .mqsw-stars .mqlog-star{font-size:40px}
.mqsw-read{margin-top:9px;min-height:16px;text-align:center;font-family:var(--sans-text);font-size:12px;letter-spacing:.09em;color:var(--amber)}
.mqsw-traynote{margin-top:7px;text-align:center;font-size:11px;line-height:1.55;color:var(--text3)}
.mqsw-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:13px}
.mqsw-foot > *{min-width:0}
.mqsw-undo{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--text3);background:none;border:none;padding:4px 0;flex:none}
.mqsw-undo:not(:disabled):hover{color:var(--amber)}
.mqsw-undo:disabled{opacity:.35}
/* Desktop only, and only where there IS a keyboard: on a phone it would be an
   instruction nobody can follow, taking room from the count. */
.mqsw-keys{font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--text3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(max-width:700px){.mqsw-keys{display:none}}
@media(hover:none){.mqsw-keys{display:none}}
.mqsw-count{font-family:var(--sans-text);font-size:10px;letter-spacing:.08em;color:var(--green);text-align:right;flex:none}
@media(max-width:560px){
  /* ⛬ NO max-height ON A PHONE, and it is not a preference. With a cap, the
     `minmax(0,1fr)` stage collapses to ZERO (the member could not see the title
     they were rating) and the rows below it painted OUTSIDE the rounded box and
     down the page. Measured with the tray open at 320x480: stage 0px, tray bottom
     537 against a box bottom of 462. The overlay already scrolls and the box
     already centres with margin:auto, so letting it grow is both the smaller
     change and the one the dialog gate is built to verify. `min-height` on the
     stage is the other half: a card must never be crushed to nothing. */
  .mqsw-box{padding:18px 16px 14px;border-radius:20px;max-height:none}
  .mqsw-stage{min-height:150px}
  .mqsw-title{font-size:24px}
  .mqsw-sub{font-size:12px;margin:9px 0 12px}
  /* One scrolling row rather than three wrapped ones. At 320 the era chips were
     spending 175px of a 480px screen, which is most of the reason the box
     outgrew it in the first place. */
  .mqsw-chips{min-width:0;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding-bottom:2px}
  .mqsw-chips::-webkit-scrollbar{display:none}
  .mqsw-chips button{flex:none}
  .mqsw-card{gap:14px}
  .mqsw-poster{width:104px}
  .mqsw-t{font-size:21px}
  .mqsw-tray .mqsw-stars{gap:10px}
  .mqsw-tray .mqsw-stars .mqlog-star{font-size:34px}
  /* Still three across, on a shorter label: stacking the third answer would cost
     a whole row of height on the screen that has the least of it. */
  .mqsw-acts{grid-template-columns:1fr 1fr 1fr;gap:8px}
  /* One line each, so the three answers read as three equal choices rather than
     one taller one. `overflow:hidden` is the guard nowrap needs: on anything
     narrower than the gate's smallest phone it clips instead of spilling. */
  .mqsw-acts button{padding:14px 4px;font-size:10.5px;letter-spacing:.02em;white-space:nowrap;overflow:hidden}
  .mqsw-rate .f{display:none}
  .mqsw-rate .s{display:inline}
  .mqsw-stamp{font-size:32px;padding:10px 20px}
  .mqsw-stamp.rate{font-size:23px}
  .mqsw-traynote{font-size:10.5px}
}
/* ── SHORT screens, which is a different axis from narrow ones ──────────────
   These come after the width block deliberately: at equal specificity the later
   rule wins, and a 320x480 phone is short before it is narrow. */
@media(max-height:560px){
  .mqsw-title{font-size:21px}
  .mqsw-sub{font-size:11.5px;margin:8px 0 10px}
  .mqsw-stage{min-height:120px}
  .mqsw-poster{width:86px}
  .mqsw-t{font-size:19px}
  .mqsw-y{margin-bottom:8px}
  .mqsw-acts button{padding:12px 5px}
}
/* The tray is a decision about ONE card. On a screen without the height for both,
   the chrome that is not about that decision steps aside rather than pushing the
   stars below the fold. `.mqsw-rating` sits on the box only while it is open. */
@media(max-height:620px){
  .mqsw-box.mqsw-rating .mqsw-filters,
  .mqsw-box.mqsw-rating .mqsw-sub{display:none}
}
@media(prefers-reduced-motion:reduce){
  .mqsw-card,.mqsw-tray{animation:none}
  .mqsw-spin{animation:none;border-top-color:rgba(255,200,80,.2)}
}
/* (the phone layout for both quick views lives in ONE block further down, after
   the shared overlay-scroll rules it has to out-order. Search .mq-qvsheet.) */

/* ----- POST DETAIL MODAL (polls, reactions, comments) ----- */
#mq-post{position:fixed;inset:0;z-index:9100;display:none;align-items:center;justify-content:center;padding:24px}
#mq-post.show{display:flex}
.mqpo-bg{position:absolute;inset:0;background:rgba(4,2,26,.9);backdrop-filter:blur(22px)}
.mqpo-box{position:relative;z-index:2;background:linear-gradient(150deg,#0E0828,#18082C);border:1px solid rgba(255,200,80,.15);border-radius:22px;width:100%;max-width:560px;max-height:88vh;overflow-y:auto;box-shadow:0 48px 100px rgba(0,0,0,.8)}
.mqpo-close{position:absolute;top:14px;right:14px;width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);color:var(--text2);font-size:14px;display:flex;align-items:center;justify-content:center;z-index:3;transition:all .2s}
.mqpo-close:hover{background:rgba(255,200,80,.12);color:var(--cream)}
.mqpo-body{padding:26px}
.mqpo-head{display:flex;align-items:center;gap:12px;margin-bottom:14px;padding-right:30px}
.mqpo-h-info{flex:1;min-width:0}
.mqpo-h-nm{font-family:var(--serif);font-size:18px;font-weight:700;color:var(--cream);text-decoration:none}
.mqpo-h-nm:hover{color:var(--amber)}
.mqpo-h-sub{font-family:var(--sans-text);font-size:10px;color:var(--text3);letter-spacing:.05em;margin-top:2px}
.mqpo-badge{font-family:var(--mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;padding:6px 11px;border-radius:999px;border:1px solid var(--border2);color:var(--text2);background:rgba(255,255,255,.03);flex-shrink:0;align-self:flex-start}
.mqpo-badge.mqpo-poll{color:var(--electric);border-color:rgba(0,212,255,.3)}
.mqpo-badge.mqpo-take{color:var(--amber);border-color:rgba(255,208,96,.3)}
.mqpo-badge.mqpo-watching{color:var(--green);border-color:rgba(128,212,160,.3)}
.mqpo-badge.mqpo-list{color:var(--magenta);border-color:rgba(224,128,204,.3)}
.mqpo-stars{color:var(--amber);font-size:18px;margin-bottom:10px}
.mqpo-text{font-family:var(--serif);font-size:20px;font-weight:300;line-height:1.5;color:var(--text);margin-bottom:16px}
.mqpo-poll{display:flex;flex-direction:column;gap:9px;margin-bottom:16px}
.mqpo-opt{position:relative;display:block;width:100%;text-align:left;border:1px solid var(--border);border-radius:12px;overflow:hidden;background:rgba(255,255,255,.02);transition:border-color .2s;padding:0;cursor:none}
.mqpo-opt:hover{border-color:var(--border2)}
.mqpo-opt.voted{border-color:rgba(255,208,96,.4)}
.mqpo-optbar{position:absolute;left:0;top:0;bottom:0;width:0;background:linear-gradient(90deg,rgba(245,160,48,.18),rgba(245,160,48,.05));transition:width .6s ease}
.mqpo-opt.win .mqpo-optbar{background:linear-gradient(90deg,rgba(245,160,48,.3),rgba(255,208,96,.1))}
.mqpo-optrow{position:relative;display:flex;align-items:center;gap:11px;padding:10px 12px}
.mqpo-optposter{width:34px;height:51px;border-radius:6px;overflow:hidden;background:#1A0830;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:15px}
.mqpo-optposter img{width:100%;height:100%;object-fit:cover}
.mqpo-optname{flex:1;font-size:15px;color:var(--cream);font-weight:600}
.mqpo-check{font-family:var(--sans-text);font-size:9px;color:var(--amber);letter-spacing:.06em;margin-left:5px}
.mqpo-optpct{font-family:var(--sans-text);font-size:13px;color:var(--amber);font-weight:700}
.mqpo-voters{position:relative;display:flex;align-items:center;padding:0 12px 10px 57px;flex-wrap:wrap;min-height:8px}
.mqpo-voters .mq-av{margin-right:-6px;border:1.5px solid #0E0828}
.mqpo-vmore{font-family:var(--sans-text);font-size:9px;color:var(--text3);margin-left:11px}
.mqpo-pollmeta{font-family:var(--sans-text);font-size:10px;color:var(--text3);letter-spacing:.05em;margin-top:2px}
.mqpo-titles{display:flex;flex-direction:column;gap:8px;margin-bottom:16px}
.mqpo-reacts{display:flex;gap:8px;padding:14px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.mqpo-react{font-size:15px;padding:7px 13px;border-radius:999px;border:1px solid var(--border2);background:rgba(255,255,255,.03);color:var(--text2);transition:all .2s;display:inline-flex;align-items:center;gap:5px;cursor:none}
.mqpo-react:hover{border-color:rgba(255,200,80,.4)}
.mqpo-react.on{background:rgba(255,208,96,.14);border-color:rgba(255,208,96,.45)}
.mqpo-react b{font-size:11px;color:var(--amber);font-weight:700}
.mqpo-cmts{display:flex;flex-direction:column;gap:13px;margin-top:16px}
.mqpo-cmt{display:flex;gap:10px}
.mqpo-cmt-b{flex:1;min-width:0}
.mqpo-cmt-h b{color:var(--cream);font-weight:600;font-size:14px}
.mqpo-cmt-h span{font-family:var(--sans-text);font-size:9px;color:var(--text3);margin-left:6px}
.mqpo-cmt-tx{font-size:15px;color:var(--text);line-height:1.5;margin-top:3px;word-wrap:break-word}
.mqpo-nocmt{font-family:var(--serif);font-style:italic;color:var(--text3);padding:8px 0}

/* ===== shared post pieces: threaded replies, @mentions, quotes, the house ✦ =====
   Used by the post-detail modal AND the feed page, so a quote or a reply looks
   the same wherever a member meets it. */
.mqpo-reply{font-family:var(--mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--text3);
  background:none;border:none;padding:4px 0 0;margin-top:2px;transition:color .18s;cursor:none}
.mqpo-reply:hover{color:var(--horizon)}
/* Two levels, never three. The rail makes the nesting legible without another indent. */
.mqpo-replies{display:flex;flex-direction:column;gap:11px;margin:9px 0 0 15px;padding-left:13px;border-left:1px solid var(--border2)}
.mqpo-cmt.reply .mqpo-cmt-tx{font-size:14px}
.mqpo-nav{display:flex;align-items:center;justify-content:center;gap:14px;margin:-4px 0 14px;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--text3)}
.mqpo-nb{width:30px;height:30px;flex:none;border-radius:50%;border:1px solid var(--border2);background:none;
  color:var(--text2);font-size:16px;line-height:1;transition:all .18s;cursor:none}
.mqpo-nb:hover:not(:disabled){border-color:var(--horizon);color:var(--amber)}
.mqpo-nb:disabled{opacity:.28}
.mqpo-off{display:flex;flex-direction:column;gap:3px;margin-bottom:12px;padding-left:13px;border-left:2px solid var(--horizon)}
.mqpo-off span{font-family:var(--mono);font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--horizon)}
.mqpo-off b{font-family:var(--serif);font-size:21px;font-weight:600;color:var(--cream);line-height:1.25}

/* An @mention links to a member page and nothing else. It is NOT a linkifier:
   no URL a member types is ever made clickable, here or anywhere. */
.mq-mention{color:var(--horizon);text-decoration:none;font-weight:600}
.mq-mention:hover{color:var(--amber);text-decoration:underline}

/* ✦ the house account's mark, in place of a monogram letter */
.mq-av-house{background:radial-gradient(circle at 50% 62%,#FFF2D8,#F5A030 42%,#9B3018);color:#2A1400;
  display:inline-flex;align-items:center;justify-content:center;font-weight:700}
.mq-off{color:var(--horizon);font-size:.85em;margin-left:4px}

/* A quote is a post pointing at another post, rendered live from its id. */
.mq-quote{display:flex;gap:11px;align-items:stretch;text-decoration:none;margin:0 0 13px;padding:11px;
  border:1px solid var(--border2);border-radius:14px;background:rgba(255,255,255,.02);transition:border-color .2s,background .2s}
.mq-quote:hover{border-color:rgba(245,160,48,.4);background:rgba(245,160,48,.05)}
.mq-quote.gone{font-family:var(--serif);font-style:italic;color:var(--text3);font-size:14px;display:block}
.mq-qp{width:44px;flex:none;border-radius:7px;overflow:hidden;background:#1A0830}
.mq-qp img{width:100%;height:100%;object-fit:cover;display:block}
.mq-qb{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px}
.mq-qh{display:flex;align-items:center;gap:7px;min-width:0}
.mq-qh b{font-size:14px;font-weight:600;color:var(--cream);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mq-qh i{font-family:var(--sans-text);font-size:9px;font-style:normal;color:var(--text3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mq-qs{color:var(--amber);font-size:12px}
.mq-qs .mq-stars{gap:2px}
.mq-qt{font-family:var(--serif);font-size:15px;font-weight:300;line-height:1.5;color:var(--text2)}
.mqpo-cmtform{display:flex;align-items:center;gap:9px;margin-top:16px}
/* min-width:0 is load-bearing. A flex item defaults to min-width:auto, and an <input>'s
   intrinsic width is ~20 characters, so `flex:1` alone could not shrink this field: on a
   320px screen it held its ground and shoved Send to 278..348, i.e. entirely off the side
   of the display. Members on small phones could read a post and never reply to it. */
.mqpo-cmt-in{flex:1;min-width:0;background:rgba(255,255,255,.04);border:1px solid var(--border);border-radius:999px;padding:10px 15px;font-family:var(--sans-text);font-size:13px;color:var(--text);outline:none;transition:border-color .2s;cursor:none}
.mqpo-cmt-in:focus{border-color:var(--border2)}
.mqpo-cmt-send{flex:0 0 auto;font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--void);background:linear-gradient(135deg,var(--ember),var(--horizon));border:none;border-radius:999px;padding:10px 16px;cursor:none}
.mqpo-signin{display:block;text-align:center;margin-top:16px;font-family:var(--sans-text);font-size:11px;letter-spacing:.06em;color:var(--horizon);text-decoration:none;padding:12px;border:1px solid var(--border2);border-radius:12px}
.mqpo-gone{font-family:var(--serif);font-style:italic;color:var(--text3);text-align:center;padding:40px 0}

/* ----- PROFILE STUDIO (settings: identity, picture, cover, services) ----- */
#mq-set{position:fixed;inset:0;z-index:9200;display:none;align-items:center;justify-content:center;padding:24px}
#mq-set.show{display:flex}
.mqs-bg{position:absolute;inset:0;background:rgba(4,2,26,.92);backdrop-filter:blur(24px)}
.mqs-box{position:relative;z-index:2;width:100%;max-width:620px;max-height:90vh;display:flex;flex-direction:column;background:linear-gradient(160deg,#0E0828,#16092C);border:1px solid rgba(255,200,80,.16);border-radius:24px;overflow:hidden;box-shadow:0 50px 110px rgba(0,0,0,.85)}
.mqs-close{position:absolute;top:14px;right:14px;width:32px;height:32px;border-radius:50%;background:rgba(4,2,26,.6);border:1px solid rgba(255,255,255,.14);color:var(--cream);font-size:14px;z-index:6;backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;transition:all .2s;cursor:none}
.mqs-close:hover{background:rgba(255,200,80,.18)}
/* live preview */
.mqs-preview{position:relative;flex-shrink:0}
.mqs-pv-cover{height:132px;background:linear-gradient(170deg,#1C0D48 0%,#5A1A28 35%,#CC5015 60%,#F5A030 78%,#7A2810 100%);background-size:cover;background-position:center top;background-repeat:no-repeat;position:relative}
.mqs-pv-fog{position:absolute;inset:0;background:linear-gradient(to top,rgba(14,8,40,.96),rgba(14,8,40,.2) 60%,transparent),radial-gradient(ellipse 50% 60% at 50% 0%,rgba(255,200,80,.08),transparent 70%)}
.mqs-pv-row{position:relative;display:flex;align-items:flex-end;gap:14px;padding:0 24px 16px;margin-top:-36px}
.mqs-pv-av{width:74px;height:74px;border-radius:50%;border:3px solid var(--horizon);overflow:hidden;background:linear-gradient(135deg,#1A0830,#2C1048);display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 12px 34px rgba(0,0,0,.65)}
.mqs-pv-av img{width:100%;height:100%;object-fit:cover}
.mqs-pv-nm{font-family:var(--serif);font-size:22px;font-weight:700;color:var(--cream);line-height:1.1}
.mqs-pv-hd{font-family:var(--sans-text);font-size:10px;color:var(--text3);margin-top:4px;letter-spacing:.04em}
/* section tabs */
/* The seven tabs overflow the box on any narrow screen, so the strip scrolls.
   Hide the bar the way every other horizontal strip in the app does
   (.mqn-links, .oa-cast, .mq-noscroll) -- it was the one that still showed a
   chunky native scrollbar across the dialog. */
.mqs-nav{display:flex;gap:2px;padding:6px 18px 0;border-bottom:1px solid var(--border);flex-shrink:0;
  overflow-x:auto;-ms-overflow-style:none;scrollbar-width:none}
.mqs-nav::-webkit-scrollbar{display:none}
.mqs-tab{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--text3);background:none;border:none;padding:12px 14px;border-bottom:2px solid transparent;transition:all .2s;white-space:nowrap;cursor:none}
.mqs-tab:hover{color:var(--text2)}
.mqs-tab.on{color:var(--amber);border-bottom-color:var(--horizon)}
/* body */
.mqs-body{flex:1;min-height:0;overflow-y:auto;padding:20px 22px;display:flex;flex-direction:column;gap:18px}
.mqs-field{display:flex;flex-direction:column;gap:9px}
.mqs-lbl{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--text3)}
.mqs-in,.mqs-ta{background:rgba(255,255,255,.04);border:1px solid var(--border);border-radius:10px;padding:11px 14px;font-family:var(--sans-text);font-size:14px;color:var(--text);outline:none;transition:border-color .2s;width:100%;cursor:none}
.mqs-ta{font-family:var(--serif);font-size:15px;font-weight:300;resize:none;line-height:1.55}
.mqs-in::placeholder,.mqs-ta::placeholder{color:var(--text3)}
.mqs-in:focus,.mqs-ta:focus{border-color:var(--border2)}
.mqs-colors{display:flex;gap:10px;flex-wrap:wrap}
.mqs-color{width:30px;height:30px;border-radius:50%;border:2px solid transparent;transition:transform .15s,border-color .15s;box-shadow:inset 0 0 0 2px rgba(4,2,26,.5);cursor:none}
.mqs-color:hover{transform:scale(1.12)}
.mqs-color.on{border-color:var(--cream);transform:scale(1.14)}
.mqs-tags{display:flex;flex-wrap:wrap;gap:7px;min-height:8px}
.mqs-tag{display:inline-flex;align-items:center;gap:7px;font-family:var(--sans-text);font-size:10px;letter-spacing:.04em;padding:6px 11px;border-radius:999px;border:1px solid var(--border2);color:var(--text2);background:rgba(255,255,255,.03)}
.mqs-tag b{color:var(--text3);font-weight:700;cursor:none}.mqs-tag b:hover{color:var(--ember)}
.mqs-tag-empty{font-family:var(--serif);font-style:italic;color:var(--text3);font-size:14px}
.mqs-tagadd{display:flex;gap:8px}
.mqs-tagbtn{font-family:var(--sans-text);font-size:12px;font-weight:600;color:var(--text2);background:rgba(255,255,255,.05);border:1px solid var(--border2);border-radius:10px;padding:0 16px;cursor:none}
.mqs-tagbtn:hover{color:var(--cream)}
.mqs-modes{display:flex;gap:4px;background:rgba(255,255,255,.03);border:1px solid var(--border);border-radius:999px;padding:4px;align-self:flex-start}
.mqs-mode{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--text3);background:none;border:none;padding:8px 18px;border-radius:999px;cursor:none}
.mqs-mode.on{background:rgba(255,208,96,.14);color:var(--amber)}
.mqs-pick-note,.mqs-mono-note{font-family:var(--sans-text);font-size:10px;line-height:1.65;letter-spacing:.02em;color:var(--text2);background:rgba(0,212,255,.05);border:1px solid rgba(0,212,255,.16);border-radius:10px;padding:11px 13px}
.mqs-pick-note b{color:var(--electric)}
.mqs-mono-note{background:rgba(255,208,96,.05);border-color:rgba(255,208,96,.16)}
.mqs-mono-note b{color:var(--amber)}
.mqs-hint{font-family:var(--serif);font-style:italic;color:var(--text3);font-size:14px;text-align:center;padding:14px 0}
.mqs-grid{display:grid;gap:10px}
.mqs-pgrid{grid-template-columns:repeat(auto-fill,minmax(76px,1fr))}
.mqs-cgrid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.mqs-pcard{position:relative;border-radius:10px;overflow:hidden;border:2px solid transparent;background:#1A0830;padding:0;aspect-ratio:2/3;transition:border-color .2s,transform .2s;cursor:none}
.mqs-pcard.wide{aspect-ratio:16/9}
.mqs-pcard:hover{transform:translateY(-2px)}
.mqs-pcard img{width:100%;height:100%;object-fit:cover;display:block}
.mqs-pcard.on{border-color:var(--amber)}
.mqs-pcap{position:absolute;left:0;right:0;bottom:0;padding:7px 8px;font-family:var(--sans-text);font-size:9px;font-weight:600;color:var(--cream);background:linear-gradient(to top,rgba(4,2,26,.94),transparent);text-align:left;line-height:1.2;opacity:0;transition:opacity .2s}
.mqs-pcard:hover .mqs-pcap{opacity:1}
.mqs-pcheck{position:absolute;top:6px;right:6px;width:22px;height:22px;border-radius:50%;background:var(--horizon);color:var(--void);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;opacity:0;transform:scale(.6);transition:all .2s}
.mqs-pcard.on .mqs-pcheck{opacity:1;transform:scale(1)}
.mqs-reset{align-self:flex-start;font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--text3);background:none;border:1px solid var(--border);border-radius:999px;padding:9px 16px;transition:all .2s;cursor:none}
.mqs-reset:hover{border-color:var(--border2);color:var(--text2)}
/* drag-to-frame focal-point editor */
.mqs-repos{display:flex;flex-direction:column;gap:9px}
.mqs-repos-lbl{display:flex;align-items:center;justify-content:space-between;font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--text3)}
.mqs-repos-centre{font-family:var(--mono);font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:var(--text2);background:rgba(255,255,255,.05);border:1px solid var(--border2);border-radius:999px;padding:5px 12px;cursor:none;transition:all .2s}
.mqs-repos-centre:hover{color:var(--amber);border-color:rgba(255,208,96,.4)}
.mqs-repos-frame{position:relative;overflow:hidden;border:1px solid var(--border2);background:#0A0620;box-shadow:inset 0 0 0 1px rgba(4,2,26,.6),0 14px 40px rgba(0,0,0,.5);touch-action:none;cursor:none;user-select:none}
.mqs-repos-frame.wide{width:100%;aspect-ratio:12/5;border-radius:14px}
.mqs-repos-frame.round{width:170px;height:170px;border-radius:50%;align-self:center;border-width:3px;border-color:var(--horizon)}
.mqs-repos-img{position:absolute;inset:0;background-size:cover;background-repeat:no-repeat;background-position:50% 50%;will-change:background-position}
.mqs-repos-net{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .2s;background:
  linear-gradient(to right,transparent calc(33.33% - .5px),rgba(255,255,255,.28) 33.33%,rgba(255,255,255,.28) calc(33.33% + .5px),transparent calc(33.33% + .5px)),
  linear-gradient(to right,transparent calc(66.66% - .5px),rgba(255,255,255,.28) 66.66%,rgba(255,255,255,.28) calc(66.66% + .5px),transparent calc(66.66% + .5px)),
  linear-gradient(to bottom,transparent calc(33.33% - .5px),rgba(255,255,255,.28) 33.33%,rgba(255,255,255,.28) calc(33.33% + .5px),transparent calc(33.33% + .5px)),
  linear-gradient(to bottom,transparent calc(66.66% - .5px),rgba(255,255,255,.28) 66.66%,rgba(255,255,255,.28) calc(66.66% + .5px),transparent calc(66.66% + .5px))}
.mqs-repos-frame:hover .mqs-repos-net,.mqs-repos-frame.grab .mqs-repos-net{opacity:1}
.mqs-repos-grab{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:15px;color:var(--cream);background:rgba(4,2,26,.5);border:1px solid rgba(255,255,255,.22);backdrop-filter:blur(4px);pointer-events:none;opacity:0;transition:opacity .2s}
.mqs-repos-frame:hover .mqs-repos-grab{opacity:.85}
.mqs-repos-frame.grab .mqs-repos-grab{opacity:0}
.mqs-repos-frame.grab .mqs-repos-img{filter:brightness(1.04)}
.mqs-repos-img{will-change:transform,background-position}
.mqs-zoom{display:flex;align-items:center;gap:11px;padding:2px 2px 0}
.mqs-zoom-b{flex:none;width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:18px;line-height:1;color:var(--text2);background:rgba(255,255,255,.05);border:1px solid var(--border2);cursor:none;transition:all .18s}
.mqs-zoom-b:hover{color:var(--amber);border-color:rgba(255,208,96,.45);background:rgba(255,208,96,.08)}
.mqs-zoom-r{-webkit-appearance:none;appearance:none;flex:1;height:4px;border-radius:999px;background:linear-gradient(90deg,var(--ember),var(--horizon),var(--amber));outline:none;cursor:none}
.mqs-zoom-r::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:17px;height:17px;border-radius:50%;background:var(--cream);border:2px solid var(--horizon);box-shadow:0 2px 8px rgba(0,0,0,.5),0 0 10px rgba(245,160,48,.5);cursor:none}
.mqs-zoom-r::-moz-range-thumb{width:17px;height:17px;border-radius:50%;background:var(--cream);border:2px solid var(--horizon);box-shadow:0 2px 8px rgba(0,0,0,.5);cursor:none}
.mqs-svcs{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.mqs-svc{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:12px;border:1px solid var(--border);background:rgba(255,255,255,.02);transition:all .2s;text-align:left;cursor:none}
.mqs-svc:hover{border-color:var(--border2)}
.mqs-svc.on{border-color:rgba(128,212,160,.4);background:rgba(128,212,160,.06)}
.mqs-svc-dot{width:8px;height:8px;border-radius:50%;background:var(--text4);flex-shrink:0;transition:all .2s}
.mqs-svc.on .mqs-svc-dot{background:var(--green);box-shadow:0 0 8px var(--green)}
.mqs-svc-nm{flex:1;font-size:14px;font-weight:600;color:var(--cream)}
.mqs-svc-tg{font-family:var(--mono);font-size:9px;letter-spacing:.06em;text-transform:uppercase;color:var(--text3)}
.mqs-svc.on .mqs-svc-tg{color:var(--green)}
/* Account tab — email, verification, Dispatch, password */
.mqs-acct-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:12px 14px;border:1px solid var(--border);border-radius:12px;background:rgba(255,255,255,.02)}
.mqs-acct-email{font-family:var(--sans-text);font-size:12px;letter-spacing:.02em;color:var(--cream);flex:1;min-width:0;overflow-wrap:anywhere}
.mqs-vchip{font-family:var(--mono);font-size:9px;letter-spacing:.08em;text-transform:uppercase;padding:5px 10px;border-radius:999px;white-space:nowrap}
.mqs-vchip.ok{color:var(--green);border:1px solid rgba(128,212,160,.4);background:rgba(128,212,160,.08)}
.mqs-vchip.warn{color:var(--horizon);border:1px solid rgba(245,160,48,.4);background:rgba(245,160,48,.08)}
.mqs-btn-row{display:flex;align-items:center;gap:12px;margin-top:10px}
.mqs-btn-row .mqs-tagbtn{padding:10px 18px;flex-shrink:0}
.mqs-hint-in{font-family:var(--sans-text);font-size:14px;color:var(--text3);line-height:1.4}
.mqs-hint-in.err{color:#E0563A}
.mqs-hint-in.ok{color:var(--green)}
.mqs-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 22px;border-top:1px solid var(--border);background:rgba(4,2,26,.45);flex-shrink:0}
.mqs-lock{font-family:var(--sans-text);font-size:9px;letter-spacing:.03em;color:var(--text3);display:flex;align-items:center;gap:5px}
.mqs-foot-btns{display:flex;gap:9px}
.mqs-cancel{font-family:var(--sans-text);font-size:12px;font-weight:600;color:var(--text2);background:rgba(255,255,255,.05);border:1px solid var(--border2);border-radius:999px;padding:11px 20px;cursor:none}
.mqs-cancel:hover{color:var(--cream)}
.mqs-save{font-family:var(--sans-text);font-size:12px;font-weight:700;letter-spacing:.04em;color:var(--void);background:linear-gradient(135deg,var(--burnt),var(--ember),var(--horizon));border:none;border-radius:999px;padding:11px 24px;cursor:none}
.mqs-save:hover{box-shadow:0 10px 30px rgba(245,160,48,.45)}
@media(max-width:560px){ .mqs-svcs{grid-template-columns:1fr} .mqs-cgrid{grid-template-columns:1fr 1fr} .mqs-box{max-height:94vh}
  /* The footer put a hint and two pills on one `space-between` row. On a 320px screen
     that row is wider than the dialog, and the piece pushed out is Save. Stack it: the
     hint on its own line, then two half-width buttons that are also a better thumb size. */
  .mqs-foot{flex-wrap:wrap}
  .mqs-lock{flex:1 1 100%;min-width:0}
  .mqs-foot-btns{width:100%}
  .mqs-cancel,.mqs-save{flex:1;text-align:center;padding-left:12px;padding-right:12px}
}

/* type=search gives mobile keyboards a real "Search" (Sök) action key; strip the OS
   searchfield chrome + native clear button so our custom pills look unchanged. */
input[type=search]{-webkit-appearance:none;appearance:none}
input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration,input[type=search]::-webkit-search-results-button,input[type=search]::-webkit-search-results-decoration{-webkit-appearance:none;appearance:none;display:none}

/* ----- NAV SEARCH — an always-visible pill, identical on every page ----- */
.mqn-search{flex:1;max-width:520px;min-width:150px;position:relative;display:flex;align-items:center}
.mqn-sinput{width:100%;background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.028));border:1px solid var(--border2);border-radius:999px;padding:10px 52px 10px 46px;font-family:var(--sans-text);font-size:13px;color:var(--text);outline:none;transition:border-color .25s,background .25s,box-shadow .25s}
.mqn-sinput::placeholder{color:var(--text3);letter-spacing:.005em}
.mqn-sinput:hover{border-color:rgba(255,200,80,.3)}
.mqn-sinput:focus{border-color:rgba(245,160,48,.55);background:linear-gradient(180deg,rgba(255,255,255,.085),rgba(255,255,255,.04));box-shadow:0 0 0 3px rgba(245,160,48,.13),0 8px 26px rgba(245,160,48,.1)}
.mqn-sico{position:absolute;left:15px;top:50%;transform:translateY(-50%);pointer-events:none;display:flex;line-height:0}
.mqn-sglass{width:19px;height:19px;display:block;transition:transform .35s cubic-bezier(.2,.85,.25,1),filter .3s}
.mqn-search:focus-within .mqn-sglass{transform:scale(1.1) rotate(-7deg);filter:drop-shadow(0 2px 7px rgba(245,160,48,.55))}
.mqn-skbd{position:absolute;right:12px;top:50%;transform:translateY(-50%);font-family:var(--sans-text);font-size:11px;line-height:1;color:var(--text3);background:rgba(255,255,255,.05);border:1px solid var(--border);border-radius:7px;padding:3px 8px;pointer-events:none;transition:opacity .2s,transform .2s}
.mqn-search:focus-within .mqn-skbd{opacity:0;transform:translateY(-50%) scale(.9)}
/* The dropdown is placed by navDropPlace() (width + edges + top + max-height all
   measured from the pill and the VISUAL viewport). `max-width` here is the belt to
   that braces: a phone is narrower than the old hardcoded 380px floor, and anchoring
   a 380px panel to the right edge of a 275px pill pushed its left edge 50-120px off
   the screen, which is exactly how members lost half of every search result. */
.mqn-drop{position:fixed;top:64px;z-index:699;max-width:calc(100vw - 20px);background:linear-gradient(160deg,#0E0828,#16092C);border:1px solid var(--border2);border-radius:16px;box-shadow:0 40px 100px rgba(0,0,0,.7);overflow:hidden;opacity:0;transform:translateY(-8px);pointer-events:none;transition:opacity .25s,transform .25s}
.mqn-drop.show{opacity:1;transform:translateY(0);pointer-events:auto}
.mqn-drop .mqk-results{max-height:62vh;overflow-y:auto;padding:8px;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
@media(max-width:1150px){ .mqn-links{gap:0} .mqn-link{padding:8px 9px;font-size:10px} }
@media(max-width:900px){ .mqn-search{max-width:340px} }
@media(max-width:780px){ .mqn-skbd{display:none} .mqn-search{min-width:120px;max-width:none} }

/* ----- ⌘K UNIVERSAL SEARCH (command-palette fallback) ----- */
#mq-ks{position:fixed;inset:0;z-index:9300;display:none;align-items:flex-start;justify-content:center;padding:13vh 24px 24px}
#mq-ks.show{display:flex}
.mqk-bg{position:absolute;inset:0;background:rgba(4,2,26,.86);backdrop-filter:blur(20px)}
.mqk-box{position:relative;z-index:2;width:100%;max-width:600px;background:linear-gradient(160deg,#0E0828,#16092C);border:1px solid rgba(255,200,80,.18);border-radius:18px;overflow:hidden;box-shadow:0 50px 120px rgba(0,0,0,.85)}
.mqk-inputwrap{display:flex;align-items:center;gap:12px;padding:16px 18px;border-bottom:1px solid var(--border)}
.mqk-ico{font-size:18px;color:var(--horizon)}
.mqk-input{flex:1;min-width:0;background:none;border:none;outline:none;font-family:var(--sans-text);font-size:17px;color:var(--text);cursor:none}
.mqk-input::placeholder{color:var(--text3)}
.mqk-esc{font-family:var(--sans-text);font-size:9px;letter-spacing:.1em;color:var(--text3);border:1px solid var(--border2);border-radius:6px;padding:4px 7px}
.mqk-results{max-height:54vh;overflow-y:auto;padding:8px}
.mqk-hint{font-family:var(--serif);font-style:italic;color:var(--text3);text-align:center;padding:28px 0;font-size:14px}
.mqk-group{font-family:var(--mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--text3);padding:12px 12px 6px}
.mqk-row{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:9px 12px;border-radius:11px;border:1px solid transparent;background:none;transition:background .12s,border-color .12s;cursor:none}
.mqk-row.on{background:rgba(255,208,96,.1);border-color:rgba(255,208,96,.25)}
.mqk-pos{width:34px;height:50px;border-radius:6px;overflow:hidden;background:#1A0830;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:15px}
.mqk-pos.round{width:38px;height:38px;border-radius:50%}
.mqk-pos img{width:100%;height:100%;object-fit:cover}
.mqk-info{flex:1;min-width:0}
.mqk-nm{font-family:var(--serif);font-size:16px;font-weight:700;color:var(--cream);line-height:1.15;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mqk-sub{font-family:var(--sans-text);font-size:10px;color:var(--text3);margin-top:2px;letter-spacing:.04em}
.mqk-kind{font-family:var(--sans-text);font-size:9px;letter-spacing:.06em;color:var(--text3);flex-shrink:0}
.mqk-row.on .mqk-kind{color:var(--amber)}
@media(max-width:560px){ #mq-ks{padding:8vh 12px 12px} }

/* ----- LIST EDITOR (create / edit a curated list) ----- */
#mq-le{position:fixed;inset:0;z-index:9250;display:none;align-items:center;justify-content:center;padding:24px}
#mq-le.show{display:flex}
.mqle-bg{position:absolute;inset:0;background:rgba(4,2,26,.92);backdrop-filter:blur(24px)}
.mqle-box{position:relative;z-index:2;width:100%;max-width:560px;max-height:90vh;display:flex;flex-direction:column;background:linear-gradient(160deg,#0E0828,#16092C);border:1px solid rgba(255,200,80,.16);border-radius:22px;overflow:hidden;box-shadow:0 50px 110px rgba(0,0,0,.85)}
.mqle-close{position:absolute;top:14px;right:14px;width:32px;height:32px;border-radius:50%;background:rgba(4,2,26,.6);border:1px solid rgba(255,255,255,.14);color:var(--cream);font-size:14px;z-index:5;display:flex;align-items:center;justify-content:center;transition:all .2s;cursor:none}
.mqle-close:hover{background:rgba(255,200,80,.18)}
.mqle-body{flex:1;min-height:0;overflow-y:auto;padding:24px 22px;display:flex;flex-direction:column;gap:13px}
.mqle-h{font-family:var(--serif);font-size:24px;font-weight:700;color:var(--cream);padding-right:30px}
.mqle-name{background:rgba(255,255,255,.04);border:1px solid var(--border);border-radius:10px;padding:12px 14px;font-family:var(--serif);font-size:18px;font-weight:700;color:var(--cream);outline:none;transition:border-color .2s;cursor:none}
.mqle-name:focus{border-color:var(--border2)}
.mqle-desc{background:rgba(255,255,255,.04);border:1px solid var(--border);border-radius:10px;padding:11px 14px;font-family:var(--serif);font-size:14px;font-weight:300;color:var(--text);outline:none;resize:none;line-height:1.5;cursor:none}
.mqle-desc:focus{border-color:var(--border2)}
.mqle-name::placeholder,.mqle-desc::placeholder{color:var(--text3);font-weight:400}
.mqle-rank{display:flex;align-items:center;gap:9px;font-family:var(--sans-text);font-size:11px;letter-spacing:.04em;color:var(--text2)}
.mqle-rank input{accent-color:var(--amber);width:15px;height:15px}
.mqle-titlesh{display:flex;align-items:center;justify-content:space-between;margin-top:4px}
.mqle-lbl{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--text3)}
.mqle-add{font-family:var(--sans-text);font-size:11px;font-weight:700;color:var(--void);background:linear-gradient(135deg,var(--ember),var(--horizon));border:none;border-radius:999px;padding:8px 15px;cursor:none}
.mqle-add:hover{box-shadow:0 8px 20px rgba(245,160,48,.4)}
.mqle-titles{display:flex;flex-direction:column;gap:8px}
.mqle-empty{font-family:var(--serif);font-style:italic;color:var(--text3);text-align:center;padding:22px 0;border:1px dashed var(--border2);border-radius:12px;font-size:14px}
.mqle-row{display:flex;align-items:center;gap:11px;padding:8px 10px;border-radius:10px;border:1px solid var(--border);background:rgba(255,255,255,.02)}
.mqle-rk{font-family:var(--serif);font-size:18px;font-weight:700;color:var(--horizon);width:22px;text-align:center;flex-shrink:0}
.mqle-pos{width:32px;height:48px;border-radius:5px;overflow:hidden;background:#1A0830;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:14px}
.mqle-pos img{width:100%;height:100%;object-fit:cover}
/* min-width:0 so the row can shrink on a phone (see "The width axis"). */
.mqle-tmid{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px}
.mqle-note{width:100%;min-width:0;background:rgba(255,255,255,.04);border:1px solid var(--border);border-radius:8px;padding:6px 9px;color:var(--text2);font-family:var(--sans-text);font-size:12.5px;outline:none}
.mqle-note:focus{border-color:rgba(255,200,80,.4);color:var(--text)}
.mqle-note::placeholder{color:var(--text4)}
.mqle-tnm{flex:1;font-size:14px;font-weight:600;color:var(--cream);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mqle-tnm span{font-family:var(--sans-text);font-size:10px;color:var(--text3);font-weight:400}
.mqle-acts{display:flex;gap:4px;flex-shrink:0}
.mqle-acts button{width:26px;height:26px;border-radius:7px;background:rgba(255,255,255,.04);border:1px solid var(--border2);color:var(--text2);font-size:11px;cursor:none;transition:all .2s}
.mqle-acts button:hover:not(:disabled){border-color:rgba(255,200,80,.4);color:var(--cream)}
.mqle-acts button:disabled{opacity:.3}
.mqle-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 22px;border-top:1px solid var(--border);background:rgba(4,2,26,.45)}
.mqle-count{font-family:var(--sans-text);font-size:10px;color:var(--text3);letter-spacing:.05em}
.mqle-cancel{font-family:var(--sans-text);font-size:12px;font-weight:600;color:var(--text2);background:rgba(255,255,255,.05);border:1px solid var(--border2);border-radius:999px;padding:11px 20px;cursor:none}
.mqle-cancel:hover{color:var(--cream)}
.mqle-save{font-family:var(--sans-text);font-size:12px;font-weight:700;letter-spacing:.04em;color:var(--void);background:linear-gradient(135deg,var(--burnt),var(--ember),var(--horizon));border:none;border-radius:999px;padding:11px 24px;cursor:none}
.mqle-save:hover{box-shadow:0 10px 30px rgba(245,160,48,.45)}

/* ============================ TITLE PICKER ============================ */
#mq-picker{position:fixed;inset:0;z-index:9500;display:none;align-items:center;justify-content:center;padding:24px}
#mq-picker.show{display:flex}
.mqp-bg{position:absolute;inset:0;background:rgba(4,2,26,.92);backdrop-filter:blur(22px)}
.mqp-box{position:relative;z-index:2;background:linear-gradient(135deg,#0E0828,#18082C);border:1px solid rgba(255,200,80,.15);border-radius:24px;width:100%;max-width:720px;max-height:86vh;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 48px 100px rgba(0,0,0,.8)}
.mqp-head{padding:24px 28px 16px;border-bottom:1px solid var(--border);position:relative}
.mqp-title{font-family:var(--serif);font-size:24px;font-weight:700;color:var(--cream);margin-bottom:3px}
.mqp-sub{font-family:var(--sans-text);font-size:10px;color:var(--text3);letter-spacing:.08em}
.mqp-input{width:100%;margin-top:14px;background:rgba(255,255,255,.04);border:1px solid var(--border);border-radius:999px;padding:11px 18px;font-family:var(--sans-text);font-size:13px;color:var(--text);outline:none;transition:all .2s}
.mqp-input:focus{border-color:var(--border2);background:rgba(255,255,255,.07)}
.mqp-input::placeholder{color:var(--text3)}
.mqp-body{padding:18px 28px 24px;overflow-y:auto}
.mqp-hint{font-family:var(--serif);font-style:italic;font-size:15px;color:var(--text3);padding:18px 0;text-align:center}
.mqp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:12px}
.mqp-item{transition:transform .2s}
.mqp-item:hover{transform:translateY(-3px)}
.mqp-poster{width:100%;aspect-ratio:2/3;border-radius:8px;overflow:hidden;background:linear-gradient(145deg,#1A0830,#2C0820);border:1px solid rgba(255,200,80,.08);display:flex;align-items:center;justify-content:center;font-size:24px;position:relative}
.mqp-item:hover .mqp-poster{border-color:rgba(255,200,80,.3)}
.mqp-poster img{width:100%;height:100%;object-fit:cover}
.mqp-name{font-family:var(--sans-text);font-size:12px;color:var(--text2);margin-top:5px;line-height:1.25;text-align:center;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.mqp-close{position:absolute;top:16px;right:16px;width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);color:var(--text2);font-size:14px;display:flex;align-items:center;justify-content:center;z-index:3;transition:all .2s}
.mqp-close:hover{background:rgba(255,200,80,.12);color:var(--cream)}

/* ============================ ATTACHED TITLE CARD (in posts/messages) ============================ */
.mq-tcard{display:flex;gap:12px;align-items:center;background:rgba(255,255,255,.03);border:1px solid var(--border);border-radius:12px;padding:9px;transition:all .2s;max-width:340px}
.mq-tcard:hover{border-color:var(--border2);background:rgba(255,200,80,.04)}
.mq-tcard-poster{width:46px;height:69px;border-radius:7px;overflow:hidden;flex-shrink:0;background:linear-gradient(145deg,#1A0830,#2C0820);display:flex;align-items:center;justify-content:center;font-size:18px}
.mq-tcard-poster img{width:100%;height:100%;object-fit:cover}
.mq-tcard-info{flex:1;min-width:0}
.mq-tcard-name{font-family:var(--serif);font-size:15px;font-weight:700;color:var(--cream);line-height:1.15;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.mq-tcard-meta{font-family:var(--sans-text);font-size:10px;color:var(--text3);letter-spacing:.06em;margin-top:3px}
.mq-tcard-x{width:22px;height:22px;border-radius:50%;background:rgba(255,255,255,.06);border:1px solid var(--border);color:var(--text3);font-size:11px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.mq-tcard-x:hover{color:var(--cream);border-color:var(--border2)}

/* reaction set (shared) */
.mq-reacts{display:flex;gap:6px;flex-wrap:wrap}
.mq-react{display:inline-flex;align-items:center;gap:5px;padding:6px 11px;border-radius:999px;border:1px solid var(--border);background:rgba(255,255,255,.025);font-family:var(--sans-text);font-size:10px;letter-spacing:.04em;color:var(--text3);transition:all .18s}
.mq-react:hover{border-color:var(--border2);color:var(--text2);transform:translateY(-1px)}
.mq-react.on{background:rgba(245,160,48,.12);border-color:rgba(245,160,48,.4);color:var(--amber)}

/* spinner */
.mq-spin{width:34px;height:34px;border-radius:50%;border:2px solid rgba(255,200,80,.14);border-top-color:var(--amber);animation:mq-spin 0.9s linear infinite}
@keyframes mq-spin{to{transform:rotate(360deg)}}

/* utility scroll-hide */
.mq-noscroll{-ms-overflow-style:none;scrollbar-width:none}
.mq-noscroll::-webkit-scrollbar{display:none}

/* ============================================================
   THE ORACLE — conversational assistant (orb + panel)
   ============================================================ */
/* ⛬ The orb sits BELOW every blocking overlay, and that is the whole point of
   8900. It used to be 9700, which is above #mq-qv (9000), #mq-post (9100),
   #mq-set (9200), #mq-le (9250), #mq-sheet (9300), #mq-picker (9500) and
   .mqcp-modal (9600), so a fixed FAB in the bottom-right corner painted on top of
   seven dialogs' controls. Three of those grew their own body class to work
   around it one at a time (mq-sheeting, mq-atl-open, mq-sweeping); this fixes the
   rest, and every dialog added later, without a fourth.
   The band 1000-8899 is empty across the entire codebase (checked), so nothing
   the orb has to float above lives between the page chrome (<=999) and here.
   #oa-panel (9701) and the Oracle's own surfaces are unaffected: they were always
   above the orb and still are. */
#oa-orb{position:fixed;right:calc(26px + env(safe-area-inset-right,0px));bottom:calc(26px + env(safe-area-inset-bottom,0px));z-index:8900;width:62px;height:62px;border-radius:50%;border:none;background:none;cursor:none;padding:0}
#oa-orb .oa-core{position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 32% 28%,#FFF4E0 0%,var(--amber) 22%,var(--horizon) 48%,var(--ember) 72%,#6A1E5C 100%);box-shadow:0 10px 36px rgba(245,160,48,.45),0 0 0 1px rgba(255,220,120,.25) inset,0 0 40px rgba(0,212,255,.12);animation:oa-breathe 4.5s ease-in-out infinite}
#oa-orb .oa-ring{position:absolute;inset:-6px;border-radius:50%;border:1px solid rgba(255,208,96,.4);animation:oa-ping 3.4s ease-out infinite}
#oa-orb .oa-glyph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:24px;color:#2A0E12;filter:drop-shadow(0 1px 1px rgba(255,255,255,.35))}
#oa-orb:hover .oa-core{transform:scale(1.07)}
#oa-orb .oa-core{transition:transform .25s}
#oa-orb .oa-orb-badge{position:absolute;top:-2px;right:-2px;width:16px;height:16px;border-radius:50%;background:var(--electric);border:2px solid var(--void);display:none}
@keyframes oa-breathe{0%,100%{box-shadow:0 10px 36px rgba(245,160,48,.4),0 0 40px rgba(0,212,255,.1)}50%{box-shadow:0 14px 50px rgba(245,160,48,.6),0 0 64px rgba(0,212,255,.22)}}
@keyframes oa-ping{0%{transform:scale(1);opacity:.6}80%,100%{transform:scale(1.5);opacity:0}}

#oa-panel{position:fixed;right:calc(26px + env(safe-area-inset-right,0px));bottom:calc(26px + env(safe-area-inset-bottom,0px));z-index:9701;width:392px;height:min(620px,82vh);background:linear-gradient(165deg,rgba(16,9,40,.97),rgba(22,9,46,.97));backdrop-filter:blur(26px);border:1px solid rgba(255,200,80,.16);border-radius:24px;box-shadow:0 50px 120px rgba(0,0,0,.72),0 0 70px rgba(245,160,48,.06);display:none;flex-direction:column;overflow:hidden;transform-origin:bottom right}
#oa-panel.show{display:flex;animation:oa-in .28s cubic-bezier(.2,.8,.3,1)}
@keyframes oa-in{from{opacity:0;transform:translateY(16px) scale(.96)}to{opacity:1;transform:none}}
.oa-head{display:flex;align-items:center;gap:11px;padding:15px 18px;border-bottom:1px solid var(--border);background:rgba(255,255,255,.02)}
.oa-head .oa-mini{width:30px;height:30px;border-radius:50%;background:radial-gradient(circle at 32% 28%,#FFF4E0,var(--amber) 30%,var(--horizon) 60%,#6A1E5C);flex-shrink:0;box-shadow:0 0 16px rgba(245,160,48,.4)}
.oa-h-tt{font-family:var(--serif);font-size:19px;font-weight:700;color:var(--cream);line-height:1}
.oa-h-sub{font-family:var(--mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--electric);margin-top:3px;display:flex;align-items:center;gap:6px}
.oa-h-sub::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 7px var(--green)}
.oa-x{margin-left:auto;width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.06);border:1px solid var(--border);color:var(--text2);font-size:14px;display:flex;align-items:center;justify-content:center}
.oa-x:hover{background:rgba(255,200,80,.12);color:var(--cream)}
.oa-log{flex:1;overflow-y:auto;padding:18px;display:flex;flex-direction:column;gap:16px}
.oa-log::-webkit-scrollbar{width:7px}.oa-log::-webkit-scrollbar-thumb{background:rgba(255,200,80,.14);border-radius:4px}

.oa-msg{display:flex;gap:10px;align-items:flex-start;max-width:100%}
.oa-msg.user{flex-direction:row-reverse}
.oa-msg .oa-av{width:26px;height:26px;border-radius:50%;flex-shrink:0;background:radial-gradient(circle at 32% 28%,#FFF4E0,var(--amber) 35%,var(--horizon) 65%,#6A1E5C);box-shadow:0 0 12px rgba(245,160,48,.35);margin-top:2px}
.oa-msg.user .oa-av{background:linear-gradient(135deg,var(--burnt),var(--horizon))}
.oa-bubble{font-size:14px;line-height:1.55;color:var(--text);background:rgba(255,255,255,.04);border:1px solid var(--border);border-radius:16px;border-top-left-radius:5px;padding:11px 14px;max-width:84%}
.oa-msg.user .oa-bubble{background:linear-gradient(135deg,rgba(155,48,24,.42),rgba(208,84,24,.36));border-color:rgba(245,160,48,.3);border-top-left-radius:16px;border-top-right-radius:5px;color:var(--cream)}
.oa-bubble em{font-style:italic;color:var(--amber)}
.oa-bubble b{color:var(--cream)}
.oa-wide{max-width:100%;width:100%}

.oa-think{display:inline-flex;gap:5px;padding:4px 2px}
.oa-think i{width:7px;height:7px;border-radius:50%;background:var(--horizon);animation:oa-td 1.1s infinite}
.oa-think i:nth-child(2){animation-delay:.18s}.oa-think i:nth-child(3){animation-delay:.36s}
@keyframes oa-td{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-4px)}}

/* result grid of poster cards */
/* the Reasoning Theater — the Oracle showing its work while it fetches */
.oa-theater{display:flex;flex-direction:column;gap:5px;padding:1px 0}
.oa-th-step{display:flex;align-items:center;gap:7px;font-family:var(--sans-text);font-size:9.5px;letter-spacing:.03em;color:var(--text4);opacity:0;transform:translateY(3px);transition:opacity .28s ease,transform .28s ease,color .28s ease}
.oa-th-step.on{opacity:1;transform:none;color:var(--text2)}
.oa-th-step.done{color:var(--green)}
.oa-th-step i{width:5px;height:5px;border-radius:50%;background:currentColor;flex-shrink:0;box-shadow:0 0 6px currentColor}
.oa-th-step.on:not(.done) i{animation:oa-thp 1s ease-in-out infinite}
.oa-th-step.done span::before{content:'✓ '}
.oa-th-step em{font-style:normal;color:var(--amber);opacity:.85}
@keyframes oa-thp{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.55);opacity:.45}}
/* predict-your-rating card */
.oa-predict{display:flex;align-items:center;gap:12px;margin-top:4px;padding:10px 12px;border:1px solid rgba(255,200,80,.16);border-radius:11px;background:linear-gradient(135deg,rgba(245,160,48,.09),rgba(14,7,58,.5))}
.oa-pred-score{font-family:var(--serif);font-size:30px;line-height:1;color:var(--amber);font-weight:600;flex-shrink:0}
.oa-pred-score span{font-size:13px;color:var(--text3);font-weight:400}
.oa-pred-body{min-width:0}
.oa-pred-stars{font-size:13px;color:var(--amber);line-height:1.2}
.oa-pred-stars .mq-stars{gap:3px}
.oa-pred-why{font-family:var(--sans-text);font-size:14px;color:var(--text2);line-height:1.45;margin-top:3px}
/* voice concierge toggle in the panel header */
.oa-speak{background:none;border:1px solid var(--border2);color:var(--text3);width:28px;height:28px;border-radius:50%;font-size:12px;line-height:1;cursor:inherit;display:flex;align-items:center;justify-content:center;transition:color .2s,border-color .2s,background .2s;flex-shrink:0}
.oa-speak:hover{color:var(--amber);border-color:rgba(255,200,80,.4)}
.oa-speak.on{color:var(--void);background:linear-gradient(135deg,var(--horizon),var(--amber));border-color:transparent}
.oa-speak.talking{animation:oa-spk 1.1s ease-in-out infinite}
@keyframes oa-spk{0%,100%{box-shadow:0 0 0 0 rgba(255,208,96,.5)}50%{box-shadow:0 0 0 6px rgba(255,208,96,0)}}
@media (prefers-reduced-motion:reduce){.oa-speak.talking{animation:none}}
/* "why this, for you" — one honest personal line under a recommendation list */
.oa-why{margin-top:9px;font-family:var(--sans-text);font-size:14px;line-height:1.5;color:var(--text2);border-left:2px solid rgba(255,208,96,.35);padding:3px 0 3px 9px}
.oa-why b{color:var(--cream);font-weight:600}
.oa-why-k{color:var(--amber)}
@media (prefers-reduced-motion:reduce){.oa-th-step{transition:none}.oa-th-step.on:not(.done) i{animation:none}}
.oa-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(80px,1fr));gap:11px;margin-top:10px}
.oa-card{position:relative;cursor:none}
.oa-card-poster{width:100%;aspect-ratio:2/3;border-radius:9px;overflow:hidden;background:linear-gradient(145deg,#1A0830,#2C0820);border:1px solid rgba(255,200,80,.1);position:relative;transition:border-color .2s,transform .2s}
.oa-card:hover .oa-card-poster{border-color:rgba(255,200,80,.4);transform:translateY(-3px)}
.oa-card-poster img{width:100%;height:100%;object-fit:cover}
.oa-card-sc{position:absolute;top:5px;right:5px;font-family:var(--sans-text);font-size:9px;font-weight:700;color:var(--amber);background:rgba(4,2,26,.78);border-radius:5px;padding:2px 5px;backdrop-filter:blur(6px)}
.oa-card-nm{font-family:var(--sans-text);font-size:10.5px;font-weight:600;color:var(--cream);margin-top:5px;line-height:1.2;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.oa-card-yr{font-family:var(--sans-text);font-size:9px;color:var(--text3);letter-spacing:.04em;margin-top:1px}
.oa-card-loved{position:absolute;top:5px;left:5px;font-size:10px;line-height:1;color:#FF6B8A;background:rgba(4,2,26,.78);border-radius:5px;padding:3px 4px;backdrop-filter:blur(6px);text-shadow:0 0 6px rgba(255,107,138,.7)}
.oa-card-friends{display:flex;align-items:center;gap:4px;margin-top:3px;min-width:0}
.oa-cf-avs{display:inline-flex;flex-shrink:0}
.oa-cf-av{display:inline-flex;width:16px;height:16px;border-radius:50%;overflow:hidden;margin-left:-5px;box-shadow:0 0 0 1.5px var(--cosmos);background:var(--cosmos)}
.oa-cf-av:first-child{margin-left:0}
.oa-cf-av img,.oa-cf-av>*{width:100%;height:100%;object-fit:cover;border-radius:50%}
.oa-cf-av .mq-av,.oa-cf-av>div{font-size:8px!important;line-height:16px!important}
.oa-cf-tx{font-family:var(--sans-text);font-size:8.5px;color:var(--amber);letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:.92}
.oa-card-ov{position:absolute;inset:0;border-radius:9px;background:linear-gradient(to top,rgba(4,2,26,.92),rgba(4,2,26,.1) 60%,transparent);opacity:0;transition:opacity .2s;display:flex;flex-direction:column;justify-content:flex-end;gap:5px;padding:8px}
.oa-card:hover .oa-card-ov{opacity:1}
.oa-mini-acts{display:flex;gap:4px;flex-wrap:wrap}
.oa-ma{flex:1;min-width:0;font-size:11px;text-align:center;padding:5px 0;border-radius:6px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.16);color:#fff;transition:all .15s}
.oa-ma:hover{background:rgba(245,160,48,.3);border-color:rgba(245,160,48,.5)}
.oa-ma.primary{background:linear-gradient(135deg,var(--ember),var(--horizon));border:none;color:var(--void)}

/* chips */
.oa-chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:11px}
.oa-chip{font-family:var(--sans-text);font-size:10px;letter-spacing:.04em;padding:7px 12px;border-radius:999px;border:1px solid var(--border2);color:var(--text2);background:rgba(255,255,255,.03);transition:all .18s;text-align:left}
.oa-chip:hover{border-color:rgba(255,200,80,.4);color:var(--cream);background:rgba(255,200,80,.06)}
.oa-chip.on{background:rgba(255,208,96,.14);border-color:rgba(255,208,96,.45);color:var(--amber)}

/* marathon timeline */
.oa-mara{margin-top:12px;display:flex;flex-direction:column;gap:10px}
.oa-mara-step{display:flex;gap:12px;align-items:center;background:rgba(255,255,255,.03);border:1px solid var(--border);border-radius:13px;padding:9px;position:relative}
.oa-mara-step .oa-mp{width:42px;height:63px;border-radius:7px;overflow:hidden;flex-shrink:0;background:#1A0830;display:flex;align-items:center;justify-content:center;font-size:16px}
.oa-mara-step .oa-mp img{width:100%;height:100%;object-fit:cover}
.oa-mara-info{flex:1;min-width:0}
.oa-mara-stage{font-family:var(--mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--horizon)}
.oa-mara-nm{font-family:var(--serif);font-size:16px;font-weight:700;color:var(--cream);line-height:1.15;margin-top:1px}
.oa-mara-meta{font-family:var(--sans-text);font-size:9px;color:var(--text3);margin-top:2px}
.oa-mara-tot{font-family:var(--sans-text);font-size:10px;color:var(--text2);letter-spacing:.06em;text-align:center;margin-top:2px}
.oa-actions{display:flex;gap:8px;margin-top:11px;flex-wrap:wrap}
.oa-btn{font-family:var(--sans-text);font-size:11px;font-weight:700;letter-spacing:.06em;padding:10px 16px;border-radius:999px;border:none;transition:all .2s;flex:1;text-align:center}
.oa-btn.fire{background:linear-gradient(135deg,var(--burnt),var(--ember),var(--horizon));color:var(--void)}
.oa-btn.fire:hover{box-shadow:0 8px 24px rgba(245,160,48,.4)}
.oa-btn.ghost{background:rgba(255,255,255,.05);border:1px solid var(--border2);color:var(--text2)}
.oa-btn.ghost:hover{color:var(--cream);border-color:rgba(255,200,80,.4)}

/* six degrees chain */
.oa-chain{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:12px}
.oa-node{display:flex;flex-direction:column;align-items:center;gap:4px;width:64px}
.oa-node .oa-np{width:54px;height:54px;border-radius:50%;overflow:hidden;background:#1A0830;border:1px solid rgba(255,200,80,.2);display:flex;align-items:center;justify-content:center;font-size:18px}
.oa-node .oa-np.film{width:44px;height:64px;border-radius:7px}
.oa-node .oa-np img{width:100%;height:100%;object-fit:cover}
.oa-node-nm{font-family:var(--sans-text);font-size:9px;color:var(--text2);text-align:center;line-height:1.15}
.oa-arrow{color:var(--horizon);font-size:13px;flex-shrink:0}

/* compare table */
.oa-vs{margin-top:12px;display:grid;grid-template-columns:1fr auto 1fr;gap:8px;align-items:center}
.oa-vs-side{text-align:center}
.oa-vs-poster{width:78px;height:117px;border-radius:9px;overflow:hidden;margin:0 auto 8px;background:#1A0830}
.oa-vs-poster img{width:100%;height:100%;object-fit:cover}
.oa-vs-nm{font-family:var(--serif);font-size:14px;font-weight:700;color:var(--cream);line-height:1.15}
.oa-vs-sc{font-family:var(--serif);font-size:26px;font-weight:700;color:var(--amber);margin-top:4px}
.oa-vs-meta{font-family:var(--sans-text);font-size:9px;color:var(--text3);margin-top:2px}
.oa-vs-mid{font-family:var(--sans-text);font-size:11px;color:var(--horizon);font-weight:700}

/* provider pills */
.oa-awards{display:flex;flex-direction:column;gap:3px;margin-top:8px}
.oa-award-row{padding:7px 11px;background:rgba(255,200,80,.04);border:1px solid var(--border);border-radius:9px;font-family:var(--sans-text);font-size:11.5px;color:var(--text3);letter-spacing:.02em}
.oa-award-row b{color:var(--cream);font-family:var(--sans-text);font-weight:600;letter-spacing:0}
.oa-prov{display:flex;flex-wrap:wrap;gap:7px;margin-top:11px}
/* required credit for the availability data (JustWatch, via TMDB) */
.oa-prov-src{font-family:var(--sans-text);font-size:8.5px;letter-spacing:0.05em;color:var(--text4);margin-top:9px}
.oa-prov-pill{display:flex;align-items:center;gap:7px;padding:6px 11px;border-radius:999px;border:1px solid var(--border2);background:rgba(255,255,255,.03);font-size:12px;color:var(--text)}
.oa-prov-pill img{width:20px;height:20px;border-radius:5px}
.oa-prov-kind{font-family:var(--mono);font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:var(--text3)}

/* compatibility list */
.oa-match{display:flex;align-items:center;gap:11px;padding:9px;border:1px solid var(--border);border-radius:12px;background:rgba(255,255,255,.02);margin-top:8px}
.oa-match-info{flex:1;min-width:0}
.oa-match-nm{font-size:13px;font-weight:600;color:var(--cream)}
.oa-match-sh{font-family:var(--sans-text);font-size:9px;color:var(--text3);margin-top:2px}
.oa-match-pct{font-family:var(--serif);font-size:22px;font-weight:700;color:var(--amber);flex-shrink:0}
.oa-match-follow{font-family:var(--mono);font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:var(--horizon);border:1px solid var(--border2);border-radius:999px;padding:6px 12px;flex-shrink:0}
.oa-match-follow:hover{border-color:rgba(255,200,80,.4);color:var(--amber)}

/* input row */
.oa-input{display:flex;align-items:center;gap:9px;padding:13px 16px;border-top:1px solid var(--border);background:rgba(8,4,32,.4)}
.oa-text{flex:1;min-width:0;background:rgba(255,255,255,.05);border:1px solid var(--border);border-radius:999px;padding:11px 16px;font-family:var(--sans-text);font-size:13px;color:var(--text);outline:none;transition:border-color .2s}
.oa-text:focus{border-color:var(--border2)}
.oa-text::placeholder{color:var(--text3)}
.oa-mic,.oa-send{width:42px;height:42px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:16px;border:none;transition:all .2s}
.oa-mic{background:rgba(255,255,255,.05);border:1px solid var(--border2);color:var(--text2)}
.oa-mic:hover{color:var(--cream);border-color:rgba(255,200,80,.4)}
.oa-mic.live{background:rgba(232,120,32,.25);border-color:var(--ember);color:var(--amber);animation:oa-breathe 1.2s infinite}
.oa-send{background:linear-gradient(135deg,var(--burnt),var(--ember),var(--horizon));color:var(--void)}
.oa-send:hover{box-shadow:0 8px 22px rgba(245,160,48,.4)}

/* surprise / single hero pick */
.oa-pick{display:flex;gap:14px;margin-top:11px;background:linear-gradient(135deg,rgba(0,212,255,.07),rgba(245,160,48,.05));border:1px solid rgba(0,212,255,.2);border-radius:14px;padding:12px}
.oa-pick-poster{width:84px;height:126px;border-radius:9px;overflow:hidden;flex-shrink:0;background:#1A0830;display:flex;align-items:center;justify-content:center;font-size:22px}
.oa-pick-poster img{width:100%;height:100%;object-fit:cover}
.oa-pick-info{flex:1;min-width:0}
.oa-pick-nm{font-family:var(--serif);font-size:19px;font-weight:700;color:var(--cream);line-height:1.12}
.oa-pick-meta{font-family:var(--sans-text);font-size:9px;color:var(--text3);margin-top:3px;letter-spacing:.05em}
.oa-pick-ov{font-family:var(--serif);font-size:13px;font-weight:300;color:rgba(255,225,190,.78);line-height:1.45;margin-top:7px}
.oa-pick-why{font-size:12px;color:var(--electric);margin-top:8px;line-height:1.4}

/* person banner — "view full page" for a filmography */
.oa-person{display:flex;align-items:center;gap:12px;margin-top:11px;padding:11px;border-radius:14px;background:linear-gradient(135deg,rgba(245,160,48,.1),rgba(224,128,204,.06));border:1px solid rgba(255,200,80,.2)}
.oa-person-pic{width:50px;height:50px;border-radius:50%;overflow:hidden;flex-shrink:0;background:linear-gradient(145deg,#1A0830,#2C1848);display:flex;align-items:center;justify-content:center;font-size:22px;border:1px solid rgba(255,200,80,.2)}
.oa-person-pic img{width:100%;height:100%;object-fit:cover}
.oa-person-info{flex:1;min-width:0}
.oa-person-nm{font-family:var(--serif);font-size:17px;font-weight:700;color:var(--cream);line-height:1.1}
.oa-person-sub{font-family:var(--sans-text);font-size:9px;color:var(--text3);margin-top:3px;letter-spacing:.05em}
.oa-person-go{font-family:var(--sans-text);font-size:11px;font-weight:700;letter-spacing:.04em;color:var(--void);background:linear-gradient(135deg,var(--ember),var(--horizon));padding:9px 14px;border-radius:999px;text-decoration:none;flex-shrink:0;transition:box-shadow .2s,transform .2s}
.oa-person-go:hover{box-shadow:0 8px 22px rgba(245,160,48,.45);transform:translateY(-1px)}
/* cast strip (main character / lead answer) */
.oa-cast{display:flex;gap:10px;overflow-x:auto;margin-top:11px;padding-bottom:4px;scrollbar-width:none}
.oa-cast::-webkit-scrollbar{display:none}
.oa-castcard{flex:0 0 84px;text-align:center;text-decoration:none;cursor:none;transition:transform .2s}
.oa-castcard:hover{transform:translateY(-3px)}
.oa-castcard img,.oa-castmono{width:84px;height:112px;border-radius:10px;border:1px solid var(--border);display:block;object-fit:cover}
.oa-castmono{background:linear-gradient(145deg,#1A0830,#2C1848);display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:30px;color:var(--horizon)}
.oa-castcard.lead img,.oa-castcard.lead .oa-castmono{border-color:rgba(245,160,48,.55);box-shadow:0 0 0 1px rgba(245,160,48,.3)}
.oa-castnm{font-family:var(--sans-text);font-size:11px;font-weight:600;color:var(--cream);margin-top:7px;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.oa-castchar{font-family:var(--sans-text);font-size:9px;color:var(--text3);margin-top:2px;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ── LOG / REVIEW MODAL (MQ.openLog) ── */
#mq-log{position:fixed;inset:0;z-index:9800;display:none;align-items:center;justify-content:center;padding:24px}
#mq-log.show{display:flex}
.mqlog-bg{position:absolute;inset:0;background:rgba(3,1,14,.86);backdrop-filter:blur(20px)}
#mq-log.show .mqlog-box{animation:mqlogpop .3s cubic-bezier(.2,.8,.25,1)}
@keyframes mqlogpop{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}
/* ⛬ grid-template-rows:minmax(0,1fr) + min-height:0 on the body are load-bearing,
   not tidiness. A grid item defaults to min-height:auto, i.e. its content height,
   so the body track grew to the full height of the form, `overflow-y:auto` on it
   never engaged, and the box's own overflow:hidden CLIPPED the rest. On a 390x664
   phone that put "Save to Diary" at y=1363 with no way to scroll to it. This is
   the vertical twin of the min-width:0 rule from the width pass, and it bit the
   moment the form got taller. The dvh line is the fallback-then-override pattern:
   100vh is the LARGE viewport, so a bare 92vh is taller than what the member can
   actually see. */
.mqlog-box{position:relative;z-index:2;width:100%;max-width:660px;display:grid;grid-template-columns:210px 1fr;grid-template-rows:minmax(0,1fr);background:linear-gradient(135deg,#0E0828,#18082C);border:1px solid rgba(255,200,80,.16);border-radius:22px;overflow:hidden;box-shadow:0 48px 120px rgba(0,0,0,.8);max-height:92vh;max-height:92dvh}
.mqlog-poster{position:relative;background:linear-gradient(145deg,#1A0830,#2C0820);display:flex;align-items:center;justify-content:center;font-size:48px;overflow:hidden}
.mqlog-poster img{width:100%;height:100%;object-fit:cover}
.mqlog-poster::after{content:'';position:absolute;inset:0;background:linear-gradient(105deg,transparent 60%,rgba(14,8,40,.55) 100%)}
.mqlog-body{padding:26px 26px 22px;overflow-y:auto;min-height:0;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.mqlog-close{position:absolute;top:14px;right:14px;z-index:3;width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);color:var(--text2);font-size:14px;display:flex;align-items:center;justify-content:center;transition:all .2s;cursor:none}
.mqlog-close:hover{border-color:var(--ember);color:var(--ember)}
.mqlog-eyebrow{font-family:var(--mono);font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--horizon);margin-bottom:8px}
.mqlog-title{font-family:var(--serif);font-size:27px;font-weight:700;color:var(--cream);line-height:1.06}
.mqlog-meta{font-family:var(--sans-text);font-size:10px;color:var(--text3);letter-spacing:.06em;margin-top:6px}
.mqlog-lbl{font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--text3);margin:18px 0 8px}
/* Kept for any surface that still lays a bare star row next to a readout. The log
   modal and the title page use .mq-yr (the rating PANEL) below instead. */
.mqlog-rate{display:flex;align-items:center;gap:12px}
.mqlog-stars{display:flex;gap:7px;align-items:center}
/* ⛬ The button is sized BY the star glyph, not by a hardcoded box.
   It used to be a fixed 34x38 while the ★ glyph is only ~28px wide, so
   `width:50%` on the fill clipped at 17px of a 28px star — 62%, not a half.
   A "half star" that covers nearly two thirds reads as a rendering bug, which
   is exactly what it was. With .base in normal flow the button is exactly one
   glyph wide, so 50% is an exact half, and the click midpoint lands on the real
   middle of the star too. Do not put a fixed width back on this. */
/* touch-action:none so a horizontal slide across the row adjusts the rating
   instead of scrolling the page. Scoped to the stars, which are a small strip,
   so vertical scrolling anywhere else on the surface is untouched. */
.mqlog-star{position:relative;display:inline-block;background:none;border:none;padding:0;line-height:1;font-size:33px;touch-action:none}
.mqlog-star::after{content:'';position:absolute;inset:-9px -1px}   /* taller touch target, no horizontal overlap onto the next star */
.mqlog-star:hover{transform:scale(1.06)}
.mqlog-star .base{display:block;pointer-events:none;color:rgba(255,208,96,.22);text-shadow:0 1px 2px rgba(0,0,0,.5)}
/* The empty stars were flat grey-white (.17 white), which on this amber page
   read as dirt rather than as "no rating yet". They are dimmed GOLD now: the
   same star, unlit. */
.mqlog-star .fill{position:absolute;left:0;top:0;height:100%;display:block;pointer-events:none;width:0;overflow:hidden;color:var(--amber);white-space:nowrap;transition:width .1s ease-out;filter:drop-shadow(0 0 7px rgba(255,208,96,.5))}
.mqlog-stars:hover .mqlog-star .base{color:rgba(255,208,96,.34)}
.mqlog-rnum{font-family:var(--sans-text);font-size:12px;letter-spacing:.06em;color:var(--amber)}

/* ⛬ READ-ONLY star row (MQ.starsHTML) — the same half-fill geometry as the
   picker above, with no button, no hover and no touch handling. Deliberately a
   separate namespace: .mqlog-star carries a touch target, a transition and a
   hover scale, none of which belong on a row that is only being read.

   THE SIZE COMES FROM THE HOST. A star is sized by its glyph (see the comment
   on .mqlog-star: a fixed box makes width:50% clip at some fraction that is not
   a half), so the row inherits font-size and every surface sets its own. Never
   give .mq-st a width or a padding. */
.mq-stars{display:inline-flex;align-items:center;gap:2px;line-height:1;vertical-align:middle;color:var(--amber)}
.mq-st{position:relative;display:inline-block;line-height:1}
.mq-st-b{display:block;color:rgba(255,208,96,.22);text-shadow:0 1px 2px rgba(0,0,0,.5)}
/* The lit half sits ON the unlit star, clipped from the left, so the half a
   member gave is the half that is lit and the rest is the same star unlit. */
.mq-st-f{position:absolute;left:0;top:0;height:100%;display:block;overflow:hidden;white-space:nowrap;color:var(--amber);filter:drop-shadow(0 0 5px rgba(255,208,96,.42))}

/* ⛬ YOUR RATING — the shared panel (MQ.ratingPanel). One rating per member per
   title, saved the moment it is set, so it is deliberately NOT dressed as a form
   field: it sits on its own quiet ground with the line that explains the rule.
   The stars inside it are .mqlog-stars, the one rating widget, unchanged. */
.mq-yr{background:rgba(255,208,96,.035);border:1px solid var(--border);border-radius:14px;padding:12px 14px 11px;transition:border-color .25s,background .25s}
.mq-yr.mq-yr-on{background:rgba(255,208,96,.07);border-color:rgba(255,200,80,.22)}
/* ⛬ WRAPS ALWAYS, not below a viewport breakpoint. This panel lives in a 340px
   sidebar card on a 1280px desktop, so "narrow" here is about the CONTAINER and a
   media query cannot see it: measured, the star strip (166) + the readout (51) +
   Remove (60) + gaps overflowed the card by 21px at full desktop width. */
.mq-yr-row{display:flex;align-items:center;flex-wrap:wrap;gap:10px 12px}
.mq-yr-num{font-family:var(--sans-text);font-size:12px;letter-spacing:.06em;color:var(--amber);white-space:nowrap}
.mq-yr-clear{margin-left:auto;font-family:var(--mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;padding:6px 11px;border-radius:999px;
  border:1px solid var(--border2);background:rgba(255,255,255,.03);color:var(--text3);cursor:none;transition:all .18s;flex:none}
.mq-yr-clear:hover{border-color:rgba(232,120,32,.55);color:var(--fire)}
.mq-yr-note{font-family:var(--sans-text);font-size:11px;line-height:1.5;color:var(--text3);margin-top:9px}
/* The second panel on a page (see `compact` in ratingPanel): stars and readout
   only, so the explanation is not printed twice on one screen. It is the same
   panel and the same one rating, not a lighter copy. */
.mq-yr.mq-yr-compact{padding:11px 13px}
/* The number can wrap under the stars on a narrow phone rather than squeezing
   the row; the star strip itself must never shrink (a squeezed star breaks the
   half-fill geometry the whole widget depends on). */
.mq-yr-row .mqlog-stars{flex:none}
/* Mounted before its title has resolved (dimmed state below) (the title page mounts at parse time and
   fills in when the catalogue answers). Dimmed so a member can see it is not
   ready yet, rather than tapping into a void and losing the tap. */
.mq-yr.mq-yr-wait{opacity:.5}
.mq-yr.mq-yr-wait .mq-yr-stars{filter:grayscale(.6)}
/* One glow when the rating moves. It is the only visible confirmation that the
   number just changed EVERYWHERE rather than being added beside the old one. */
.mq-yr.mq-yr-flash{animation:mqYrFlash .9s ease-out}
@keyframes mqYrFlash{
  0%  {box-shadow:0 0 0 0 rgba(255,208,96,.42); border-color:rgba(255,208,96,.65)}
  100%{box-shadow:0 0 0 16px rgba(255,208,96,0); border-color:rgba(255,200,80,.22)}
}
@media (prefers-reduced-motion: reduce){ .mq-yr.mq-yr-flash{animation:none} }
.mqlog-ta{width:100%;background:rgba(255,255,255,.04);border:1px solid var(--border);border-radius:12px;padding:13px 15px;font-family:var(--serif);font-size:15px;font-weight:300;color:var(--text);line-height:1.6;resize:none;min-height:96px;outline:none;cursor:none;transition:border-color .2s}
.mqlog-ta:focus{border-color:var(--border2)}
.mqlog-toggles{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.mqlog-tog{font-family:var(--sans-text);font-size:10px;letter-spacing:.05em;padding:9px 15px;border-radius:999px;border:1px solid var(--border2);color:var(--text2);background:rgba(255,255,255,.03);cursor:none;transition:all .18s}
.mqlog-tog:hover{border-color:rgba(255,200,80,.4);color:var(--cream)}
.mqlog-tog.on{background:rgba(255,208,96,.14);border-color:rgba(255,208,96,.5);color:var(--amber)}
.mqlog-date{margin-top:2px;background:rgba(255,255,255,.04);border:1px solid var(--border);border-radius:10px;padding:9px 13px;font-family:var(--sans-text);font-size:12px;color:var(--text);outline:none;cursor:none;color-scheme:dark}
.mqlog-date:focus{border-color:var(--border2)}
.mqlog-foot{display:flex;gap:10px;margin-top:22px}
.mqlog-save{flex:1;border:none;border-radius:12px;padding:14px;font-family:var(--sans-text);font-size:13px;font-weight:700;letter-spacing:.04em;color:var(--void);background:linear-gradient(135deg,var(--burnt),var(--ember),var(--horizon));cursor:none;transition:box-shadow .2s,transform .2s}
.mqlog-save:hover{box-shadow:0 12px 30px rgba(245,160,48,.45);transform:translateY(-1px)}
/* already-logged history panel + edit/add-another chips */
.mqlog-history{margin:16px 0 2px;padding:13px 14px;border-radius:14px;background:linear-gradient(135deg,rgba(255,208,96,.07),rgba(224,128,204,.05));border:1px solid rgba(255,208,96,.18);animation:mqlhin .32s cubic-bezier(.2,.8,.25,1)}
@keyframes mqlhin{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.mqlh-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:10px}
.mqlh-t{font-family:var(--serif);font-size:15px;font-weight:700;color:var(--amber);line-height:1.15}
.mqlh-hint{font-family:var(--mono);font-size:8.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--text3);white-space:nowrap}
.mqlh-chips{display:flex;gap:7px;flex-wrap:wrap}
.mqlh-chip{font-family:var(--sans-text);font-size:10.5px;letter-spacing:.03em;padding:7px 12px;border-radius:999px;border:1px solid var(--border2);color:var(--text2);background:rgba(255,255,255,.03);cursor:none;transition:all .18s;white-space:nowrap}
.mqlh-chip:hover{border-color:rgba(255,200,80,.45);color:var(--cream);transform:translateY(-1px)}
.mqlh-chip.active{background:rgba(255,208,96,.16);border-color:rgba(255,208,96,.6);color:var(--amber);box-shadow:0 0 0 1px rgba(255,208,96,.25)}
.mqlh-chip.mqlh-new{color:var(--horizon);border-style:dashed}
.mqlh-chip.mqlh-new.active{background:linear-gradient(135deg,rgba(224,84,24,.22),rgba(245,160,48,.22));border-style:solid;border-color:rgba(245,160,48,.65);color:var(--cream)}
.mqlog-del{border:1px solid rgba(224,80,40,.35);border-radius:12px;padding:14px 16px;font-family:var(--sans-text);font-size:10.5px;letter-spacing:.04em;color:var(--ember);background:rgba(224,80,40,.06);cursor:none;transition:all .18s;white-space:nowrap}
.mqlog-del:hover{background:rgba(224,80,40,.16);border-color:var(--ember);color:var(--cream)}
.mqlog-del.armed{background:var(--ember);border-color:var(--ember);color:#fff;animation:mqdelpulse .9s ease-in-out infinite}
@keyframes mqdelpulse{0%,100%{box-shadow:0 0 0 0 rgba(224,84,24,.5)}50%{box-shadow:0 0 0 5px rgba(224,84,24,0)}}
@media(max-width:560px){
  /* one column, two rows: a fixed poster band and a body that takes the rest AND
     scrolls. The second track must be minmax(0,1fr) or it sizes to its content
     again and the footer goes back off the bottom of the phone. */
  .mqlog-box{grid-template-columns:1fr;grid-template-rows:150px minmax(0,1fr);max-height:94vh;max-height:94dvh}
  .mqlog-poster{height:150px}
  .mqlh-hint{display:none}
}

/* ═══════════════════════════════════════════════════════════════════════════
   HOW YOU SAW IT — the provenance widgets + badge                    (v4.6)
   Mounted by MQ.mediumPicker / MQ.withPicker, so these rules serve the log
   modal AND the title page's sidebar panel. Width discipline throughout:
   every grid track is minmax(0,…) and every input carries min-width:0, because
   `flex:1` does not beat `min-width:auto` and a 20-character intrinsic input
   width is exactly what pushed the DM composer off the side of a phone.
   ═══════════════════════════════════════════════════════════════════════════ */
.mq-medtiles{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:7px}
.mq-medtile{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0;
  padding:11px 4px 9px;border-radius:11px;background:rgba(255,255,255,.022);
  border:1px solid var(--border);cursor:none;transition:border-color .18s,background .18s,transform .18s}
.mq-medtile svg{width:23px;height:23px;color:var(--text3);transition:color .18s;flex:none}
.mq-medtile>span{font-family:var(--mono);font-size:8px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--text3);text-align:center;line-height:1.15;transition:color .18s}
.mq-medtile:hover{border-color:var(--border2);background:rgba(255,255,255,.045)}
.mq-medtile.on{background:linear-gradient(180deg,rgba(245,160,48,.18),rgba(245,160,48,.05));
  border-color:rgba(245,160,48,.55);transform:translateY(-2px);box-shadow:0 10px 24px -14px rgba(245,160,48,.7)}
.mq-medtile.on svg{color:var(--amber)}
.mq-medtile.on>span{color:var(--cream)}

.mq-medsub{margin-top:11px;padding:13px 14px 14px;border-radius:11px;
  background:rgba(245,160,48,.045);border:1px solid rgba(245,160,48,.16);
  animation:mqmedin .26s cubic-bezier(.2,.8,.25,1)}
@keyframes mqmedin{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}
.mq-medsublbl{font-family:var(--mono);font-size:8.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--text3);margin-bottom:9px}
.mq-medsublbl span{color:var(--text4);text-transform:none;letter-spacing:.03em}
.mq-medchips{display:flex;flex-wrap:wrap;gap:6px}
.mq-medchip{font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;
  padding:6px 10px;border-radius:999px;border:1px solid var(--border2);color:var(--text2);
  background:rgba(255,255,255,.02);cursor:none;transition:all .16s;max-width:100%;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mq-medchip:hover{border-color:rgba(255,200,80,.45);color:var(--cream)}
.mq-medchip.on{background:var(--amber);color:#2A1400;border-color:var(--amber);font-weight:700}
.mq-medchip.rare{border-color:rgba(0,212,255,.32);color:var(--electric)}
.mq-medchip.rare.on{background:var(--electric);color:#001820;border-color:var(--electric)}
.mq-medvenue{display:flex;align-items:center;gap:9px;margin-top:11px;min-width:0;
  background:rgba(4,2,26,.55);border:1px solid var(--border);border-radius:9px;padding:2px 11px}
.mq-medvlbl{font-family:var(--mono);font-size:8.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--text4);white-space:nowrap;flex:none}
.mq-medvenue input{flex:1;min-width:0;background:none;border:0;outline:none;padding:9px 0;
  font-family:var(--sans-text);font-size:13px;color:var(--cream);cursor:none}
.mq-medvenue input::placeholder{color:var(--text4)}
.mq-medvenue:focus-within{border-color:var(--border2)}

/* the badge — the one reading of a watch, used on every diary surface */
.mq-medpin{display:inline-flex;align-items:center;gap:5px;max-width:100%;min-width:0;
  padding:3px 8px;border-radius:5px;font-family:var(--mono);font-size:9px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--text2);background:rgba(255,255,255,.04);
  border:1px solid var(--border);vertical-align:middle}
.mq-medpin svg{width:11px;height:11px;flex:none;color:var(--horizon)}
.mq-medpin>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.mq-medpin.rare{color:var(--electric);border-color:rgba(0,212,255,.34);background:rgba(0,212,255,.08)}
.mq-medpin.rare svg{color:var(--electric)}

/* ── watched with ────────────────────────────────────────────────────────── */
.mq-withrow{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.mq-withchip,.mq-withadd{font-family:var(--sans-text);font-size:10px;letter-spacing:.04em;
  padding:5px 10px 5px 5px;border-radius:999px;border:1px solid var(--border2);color:var(--text2);
  background:rgba(255,255,255,.03);cursor:none;transition:all .16s;display:inline-flex;
  align-items:center;gap:6px;max-width:100%;min-width:0}
.mq-withadd{padding:7px 13px;color:var(--horizon);border-style:dashed}
.mq-withadd:hover,.mq-withadd.on{color:var(--cream);border-style:solid;border-color:rgba(245,160,48,.6);
  background:rgba(245,160,48,.12)}
.mq-withchip.on{background:rgba(255,208,96,.13);border-color:rgba(255,208,96,.45);color:var(--amber)}
.mq-withchip>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.mq-withchip i{font-style:normal;color:var(--text4);font-size:10px}
.mq-withchip:hover i{color:var(--ember)}
.mq-withnone{font-family:var(--sans-text);font-size:9px;letter-spacing:.07em;color:var(--text4);
  line-height:1.55;margin-top:2px}
.mq-withlist{margin-top:9px;max-height:184px;overflow-y:auto;border-radius:11px;
  border:1px solid var(--border);background:rgba(4,2,26,.5);animation:mqmedin .24s cubic-bezier(.2,.8,.25,1)}
.mq-withopt{display:flex;align-items:center;gap:10px;width:100%;min-width:0;padding:9px 12px;
  background:none;border:0;border-bottom:1px solid var(--border);color:var(--text2);
  text-align:left;cursor:none;transition:background .15s}
.mq-withopt:last-child{border-bottom:0}
.mq-withopt:hover{background:rgba(255,208,96,.06)}
.mq-withopt.on{background:rgba(255,208,96,.08)}
.mq-withopt>span{flex:1;min-width:0;display:block;overflow:hidden}
.mq-withopt b{display:block;font-family:var(--sans-text);font-size:12.5px;font-weight:700;color:var(--cream);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mq-withopt i{display:block;font-style:normal;font-family:var(--sans-text);font-size:9px;color:var(--text4)}
.mq-withopt em{font-style:normal;font-family:var(--sans-text);font-size:12px;color:var(--horizon);flex:none}
.mq-withopt.on em{color:var(--green)}

/* the invite row in the notification panel (borrows .mqn-fr for its frame) */
.mqn-wi .mqn-fr-who{cursor:default}
.mqn-wi .mqn-fr-h{white-space:normal}

/* ── The Ledger + the provenance timeline ────────────────────────────────── */
.mq-ledger{display:flex;flex-direction:column;gap:9px}
.mq-lrow{display:grid;grid-template-columns:minmax(0,84px) minmax(0,1fr) minmax(0,42px);gap:10px;align-items:center}
.mq-lrow .lk{font-family:var(--mono);font-size:9px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--text2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mq-lrow .lt{height:6px;border-radius:6px;background:rgba(255,255,255,.055);overflow:hidden;min-width:0}
.mq-lrow .lt i{display:block;height:100%;border-radius:6px}
.mq-lrow .ln{font-family:var(--sans-text);font-size:11px;color:var(--cream);text-align:right;
  font-variant-numeric:tabular-nums}
.mq-lfoot{font-family:var(--sans-text);font-size:8.5px;letter-spacing:.08em;color:var(--text4);
  margin-top:12px;line-height:1.6}
.mq-prov{position:relative;padding-left:23px}
.mq-prov::before{content:'';position:absolute;left:5px;top:9px;bottom:9px;width:1px;
  background:linear-gradient(180deg,rgba(245,160,48,.5),rgba(245,160,48,.07))}
.mq-pv{position:relative;padding:9px 0;display:flex;align-items:center;gap:10px;flex-wrap:wrap;min-width:0}
.mq-pv::before{content:'';position:absolute;left:-22px;top:50%;margin-top:-4px;width:9px;height:9px;
  border-radius:50%;background:var(--horizon);box-shadow:0 0 0 3px rgba(245,160,48,.15)}
.mq-pv .pvy{font-family:var(--sans-text);font-size:11px;color:var(--amber);flex:none;
  font-variant-numeric:tabular-nums}
.mq-pv .pvx{font-family:var(--sans-text);font-size:9.5px;color:var(--text3);letter-spacing:.06em}
@media(max-width:560px){
  .mq-medtiles{grid-template-columns:repeat(3,minmax(0,1fr))}
  .mq-medvenue{flex-wrap:wrap;padding:8px 11px}
  .mq-medvenue input{padding:2px 0}
}

/* ═══════════════════════════════════════════════════════════════════════════
   THE DOUBLE BILL — two verdicts, and the gap between them        (v4.7)
   The spread is the centre of the card on purpose: every other product buries
   disagreement in an average. Three columns on a wide screen, one on a phone,
   where the spine becomes a divider between the two verdicts instead of a gutter.
   ═══════════════════════════════════════════════════════════════════════════ */
.mqd-card{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,132px) minmax(0,1fr);
  border:1px solid var(--border2);border-radius:16px;overflow:hidden;margin-top:14px;
  background:linear-gradient(180deg,rgba(14,7,58,.6),rgba(8,4,36,.4))}
.mqd-side{padding:18px 18px 20px;min-width:0}
.mqd-side.right{text-align:right}
.mqd-side.right .mqd-who{flex-direction:row-reverse}
.mqd-side.right .mqd-stars{justify-content:flex-end}
.mqd-side.right .mqd-rev{margin-left:auto}
.mqd-who{display:flex;align-items:center;gap:9px;min-width:0;text-decoration:none}
.mqd-who>span{min-width:0;overflow:hidden}
.mqd-who b{display:block;font-family:var(--sans-text);font-weight:700;font-size:13px;color:var(--cream);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mqd-who i{display:block;font-style:normal;font-family:var(--sans-text);font-size:9px;color:var(--text4)}
.mqd-stars{display:flex;align-items:center;gap:2px;margin-top:11px;flex-wrap:wrap}
.mqd-st{font-size:15px;color:rgba(255,208,96,.22);line-height:1}
.mqd-st.on{color:var(--amber)}
.mqd-st.half{background:linear-gradient(90deg,var(--amber) 50%,rgba(255,208,96,.22) 50%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.mqd-stars b{font-family:var(--sans-text);font-size:10px;color:var(--text3);font-weight:400;margin-left:5px}
.mqd-rev{font-family:var(--serif);font-style:italic;font-size:15px;line-height:1.45;color:var(--text2);
  margin-top:10px;max-width:34ch}
.mqd-rev.muted{color:var(--text4);font-size:13px}
.mqd-spine{display:flex;flex-direction:column;align-items:center;gap:9px;padding:18px 8px;min-width:0;
  border-left:1px solid var(--border);border-right:1px solid var(--border);
  background:linear-gradient(180deg,rgba(245,160,48,.08),transparent 72%)}
.mqd-poster{width:70px;height:105px;border-radius:6px;overflow:hidden;flex:none;
  background:rgba(255,255,255,.05);display:flex;align-items:center;justify-content:center;font-size:22px}
.mqd-poster img{width:100%;height:100%;object-fit:cover}
.mqd-ttl{font-family:var(--serif);font-size:14px;font-weight:700;color:var(--cream);text-align:center;
  line-height:1.2;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mqd-spread{width:100%;padding:0 6px}
.mqd-lab{font-family:var(--mono);font-size:8px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--text3);text-align:center}
.mqd-lab.hot{color:var(--ember)}
.mqd-bar{height:4px;border-radius:4px;background:rgba(255,255,255,.08);position:relative;margin:8px 0 7px}
.mqd-bar i{position:absolute;top:0;bottom:0;border-radius:4px;
  background:linear-gradient(90deg,var(--ember),var(--amber))}
.mqd-bar u{position:absolute;top:-3px;width:10px;height:10px;border-radius:50%;margin-left:-5px;
  background:var(--electric);border:2px solid var(--deep);text-decoration:none}
.mqd-bar u.b{background:var(--amber)}
.mqd-foot{grid-column:1/-1;padding:9px 18px 13px;border-top:1px solid var(--border)}
@media(max-width:720px){
  .mqd-card{grid-template-columns:minmax(0,1fr)}
  .mqd-side.right{text-align:left}
  .mqd-side.right .mqd-who{flex-direction:row}
  .mqd-side.right .mqd-stars{justify-content:flex-start}
  .mqd-side.right .mqd-rev{margin-left:0}
  .mqd-spine{border-left:0;border-right:0;border-top:1px solid var(--border);border-bottom:1px solid var(--border);
    flex-direction:row;flex-wrap:wrap;justify-content:center;gap:14px}
  .mqd-poster{width:52px;height:78px}
  .mqd-spread{width:auto;flex:1;min-width:150px}
}
.mqd-bubble .mqf-glyph{filter:none}

/* ═══ THE SCREENING — one night, counted, never estimated ═══════════════════ */
.mqs-card{border:1px solid var(--border2);border-radius:16px;overflow:hidden;margin-top:14px;
  background:linear-gradient(180deg,rgba(14,7,58,.6),rgba(8,4,36,.4))}
.mqs-top{display:flex;gap:15px;padding:17px 18px;min-width:0}
.mqs-poster{width:64px;height:96px;border-radius:7px;overflow:hidden;flex:none;background:rgba(255,255,255,.05);
  display:flex;align-items:center;justify-content:center;font-size:22px}
.mqs-poster img{width:100%;height:100%;object-fit:cover}
.mqs-info{min-width:0;flex:1}
.mqs-eyebrow{font-family:var(--mono);font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--horizon)}
.mqs-ttl{font-family:var(--serif);font-size:22px;font-weight:700;color:var(--cream);line-height:1.15;margin-top:5px}
.mqs-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:7px;
  font-family:var(--sans-text);font-size:9.5px;letter-spacing:.07em;color:var(--text3)}
.mqs-stat{display:flex;align-items:baseline;gap:9px;margin-top:11px;flex-wrap:wrap}
.mqs-avg{font-family:var(--serif);font-size:27px;font-weight:700;color:var(--amber);line-height:1}
.mqs-avglab{font-family:var(--mono);font-size:9px;letter-spacing:.09em;text-transform:uppercase;color:var(--text3)}
.mqs-people{padding:0 18px 16px;border-top:1px solid var(--border);padding-top:13px;margin-top:2px}
.mqs-row{display:flex;flex-wrap:wrap;gap:9px;align-items:center}
.mqs-row.waiting{margin-top:8px;opacity:.55}
.mqs-face{position:relative;display:inline-flex;text-decoration:none}
.mqs-face b{position:absolute;bottom:-3px;right:-4px;font-family:var(--sans-text);font-size:8.5px;font-weight:700;
  background:var(--amber);color:#2A1400;border-radius:20px;padding:1px 4px;border:1.5px solid var(--deep)}
.mqs-count{font-family:var(--mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--text3);margin-top:11px}
#mq-scr{position:fixed;inset:0;z-index:9805;display:none;align-items:center;justify-content:center;padding:24px}
#mq-scr.show{display:flex}
.mqscr-box{grid-template-columns:minmax(0,1fr) !important;max-width:560px}
.oa-person.rich{align-items:flex-start}
.oa-person.rich .oa-person-go{margin-top:2px}
.oa-person-sub2{font-family:var(--sans-text);font-size:9px;color:var(--horizon);margin-top:5px;letter-spacing:.05em;line-height:1.5}
.oa-person-bio{font-family:var(--sans-text);font-size:11px;line-height:1.55;color:var(--text2);margin-top:7px}
.oa-sub{font-family:var(--mono);font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--text3);margin:15px 0 1px}

/* ===================== KEYBOARD FOCUS (accessibility) =====================
   Keyboard-only rings via :focus-visible — mouse / touch interaction stays
   ringless so the cinematic feel is untouched, while keyboard users get a clear,
   on-brand amber indicator. The ring is a layered box-shadow (void gap → amber
   ring → soft glow) so it (a) can't be suppressed by the app's many
   `outline:none` inputs and (b) hugs each element's own border-radius. A
   transparent outline keeps Windows High-Contrast working (forced-colors below). */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible,
select:focus-visible, summary:focus-visible, [tabindex]:focus-visible,
[role="button"]:focus-visible, [role="link"]:focus-visible, [role="option"]:focus-visible,
[role="tab"]:focus-visible, [contenteditable]:focus-visible{
  outline:2px solid transparent;
  outline-offset:2px;
  box-shadow:0 0 0 2px var(--void,#04021A), 0 0 0 4px var(--amber,#FFD060), 0 0 18px 2px rgba(255,208,96,.5);
  z-index:6;
}

/* ⛬ THE STACKING PROMOTION IS LAYERED, AND THAT IS THE WHOLE FIX.
   `z-index:6` above does nothing on a STATIC element, so this rule used to carry
   `position:relative` to give it a stacking context. That is right for a static
   element and catastrophic for one that positions itself, because the same
   offset means two different things:
     position:absolute + right:20px  ->  20px in from my container's right edge
     position:relative + right:20px  ->  shift me 20px LEFTWARD out of flow
   So promoting an absolutely-positioned control MOVES it. Measured 2026-09-16 in
   a real browser with real Tab presses: the portrait's close button went from
   left 326 to left -20 on a 390px screen, i.e. 20px of it off the side. The
   sweep found 55 such controls at rest across 15 pages — .mqav-close,
   .mqv-close, .mqp-close and .ov-close, which is EVERY close button on the site,
   plus the Oracle orb and the Takes FAB. A keyboard member tabbing to a ✕ found
   it off the edge of the screen: the one control this codebase calls non
   negotiable, broken for exactly the people these rings exist to serve.
   It was invisible to the old gate because a browser pane never pressed Tab, and
   it needs no page interaction to reproduce once you do.

   The fix is not 55 exceptions. An exception list is a rule people stop
   trusting, and the next absolutely-positioned control would be defect 56.
   Unlayered declarations beat layered ones outright, whatever their specificity
   and wherever they sit in the file, so putting ONLY `position` in a layer makes
   every component that positions itself win automatically and for free, while a
   static element still gets promoted because nothing else sets its position.
   Order-independent, no names to maintain.

   Keep `position` the only thing in here. The ring itself must stay unlayered,
   or any component setting `box-shadow` would silently erase it. */
@layer mq-focus-promotion {
  a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible,
  select:focus-visible, summary:focus-visible, [tabindex]:focus-visible,
  [role="button"]:focus-visible, [role="link"]:focus-visible, [role="option"]:focus-visible,
  [role="tab"]:focus-visible, [contenteditable]:focus-visible{
    position:relative;
  }
}
/* belt-and-braces: never leave a ring on a mouse / programmatic focus */
:focus:not(:focus-visible){ outline:none; }

/* Card-style tiles often sit inside overflow-clipped scroll rows where an outer
   ring would be cut off — use an INSET amber frame (always fully visible) plus
   the outer glow for when it isn't clipped. */
.card:focus-visible, .oa-card:focus-visible, .mq-tcard:focus-visible, .fav-card:focus-visible,
.pf-row:focus-visible, .pgrid-card:focus-visible, .cw-card:focus-visible, .llist-card:focus-visible,
.tm-item:focus-visible, .diary-entry:focus-visible, .seeall:focus-visible{
  outline:2px solid transparent;
  box-shadow:inset 0 0 0 2px var(--amber,#FFD060), 0 0 0 2px var(--void,#04021A), 0 0 0 4px var(--amber,#FFD060), 0 0 22px 3px rgba(255,208,96,.5);
  border-radius:12px;
}

/* Windows High-Contrast / forced-colors: box-shadows are dropped — fall back to
   a real, system-colored outline. */
@media (forced-colors: active){
  a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible,
  select:focus-visible, [tabindex]:focus-visible, [role="button"]:focus-visible,
  .card:focus-visible, .oa-card:focus-visible, .mq-tcard:focus-visible{
    outline:3px solid Highlight; outline-offset:2px; box-shadow:none;
  }
}

@media(max-width:560px){
  #oa-panel{right:0;left:0;bottom:0;width:100%;height:88vh;border-radius:22px 22px 0 0}
  #oa-orb{right:18px;bottom:18px}
}

/* ===================== CONSENT / PRIVACY (GDPR / CCPA) ===================== */
.mqc-banner{position:fixed;left:0;right:0;bottom:0;z-index:9400;padding:16px;transform:translateY(135%);transition:transform .42s cubic-bezier(.2,.8,.2,1);pointer-events:none}
.mqc-banner.show{transform:translateY(0)}
body.mq-consenting #oa-orb{opacity:0;pointer-events:none;transition:opacity .3s}
/* ⛬ The orb stands down while a full-bleed hero is on screen. It is a fixed FAB in the
   bottom-right corner and a hero fills the whole first screen, so on a phone it lands ON
   the copy: measured, it covered the landing's pitch line at 320x568, the Watchlist
   button on a title page at 390x844, and the film title itself at 320. A page opts in
   with data-mq-hero on the hero element; MQ.boot() wires the observer. One
   implementation, because this was inline on the landing before title and person needed
   the same thing. */
#oa-orb{transition:opacity .35s ease,transform .35s ease}
body.mq-hero-on #oa-orb{opacity:0;pointer-events:none;transform:scale(.82)}
.mqc-inner{pointer-events:auto;max-width:1080px;margin:0 auto;background:linear-gradient(150deg,rgba(14,8,40,.97),rgba(24,8,44,.97));border:1px solid var(--border2);border-radius:18px;box-shadow:0 30px 80px rgba(0,0,0,.65);padding:18px 22px;display:flex;align-items:center;gap:24px;backdrop-filter:blur(20px)}
.mqc-txt{flex:1;min-width:0}
.mqc-h{font-family:var(--sans-text);font-weight:700;font-size:14px;letter-spacing:.01em;color:var(--cream);margin-bottom:5px}
.mqc-txt p{font-family:var(--sans-text);font-size:12.5px;line-height:1.55;color:var(--text2)}
.mqc-txt a{color:var(--amber);border-bottom:1px solid rgba(255,208,96,.35);white-space:nowrap}
.mqc-btns{display:flex;gap:8px;flex-shrink:0;flex-wrap:wrap;justify-content:flex-end}
.mqc-btn{font-family:var(--sans);font-weight:600;font-size:11px;letter-spacing:.06em;text-transform:uppercase;padding:11px 16px;border-radius:999px;border:1px solid var(--border2);background:rgba(255,255,255,.04);color:var(--text);transition:all .2s;white-space:nowrap}
.mqc-btn:hover{border-color:var(--horizon);color:var(--cream)}
.mqc-btn.ghost{background:none;color:var(--text2)}
.mqc-btn.gold{background:linear-gradient(135deg,var(--amber),var(--horizon));border-color:transparent;color:#1a0c04;font-weight:700}
.mqc-btn.gold:hover{filter:brightness(1.07)}
@media(max-width:680px){.mqc-inner{flex-direction:column;align-items:stretch;gap:14px}.mqc-btns{justify-content:stretch}.mqc-btn{flex:1;text-align:center}}

.mqcp-modal{position:fixed;inset:0;z-index:9600;display:flex;align-items:center;justify-content:center;padding:24px;opacity:0;transition:opacity .3s;pointer-events:none}
.mqcp-modal.show{opacity:1;pointer-events:auto}
.mqcp-bg{position:absolute;inset:0;background:rgba(4,2,16,.74);backdrop-filter:blur(6px)}
.mqcp-box{position:relative;z-index:2;width:100%;max-width:480px;background:linear-gradient(150deg,#0E0828,#18082C);border:1px solid var(--border2);border-radius:20px;box-shadow:0 48px 100px rgba(0,0,0,.8);overflow:hidden;transform:translateY(10px) scale(.98);transition:transform .3s}
.mqcp-modal.show .mqcp-box{transform:none}
.mqcp-head{display:flex;align-items:center;justify-content:space-between;padding:18px 20px;border-bottom:1px solid var(--border)}
.mqcp-title{font-family:var(--serif);font-size:22px;font-weight:700;color:var(--cream)}
.mqcp-x{width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);color:var(--text2);font-size:13px;transition:all .2s}
.mqcp-x:hover{color:var(--cream);border-color:var(--horizon)}
.mqcp-body{padding:6px 20px}
.mqcp-row{display:flex;align-items:flex-start;gap:16px;padding:16px 0;border-bottom:1px solid var(--border)}
.mqcp-row:last-child{border-bottom:none}
.mqcp-row-tx{flex:1}
.mqcp-row-h{font-family:var(--sans-text);font-weight:600;font-size:13px;color:var(--cream);margin-bottom:5px;display:flex;align-items:center;gap:8px}
.mqcp-always{font-family:var(--mono);font-size:8.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--green);border:1px solid rgba(128,212,160,.3);border-radius:999px;padding:2px 7px}
.mqcp-row-d{font-family:var(--sans-text);font-size:11.5px;line-height:1.5;color:var(--text2)}
.mqcp-toggle{flex-shrink:0;width:46px;height:26px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid var(--border2);position:relative;transition:background .2s;margin-top:2px}
.mqcp-knob{position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;background:var(--text3);transition:all .22s}
.mqcp-toggle.on{background:linear-gradient(135deg,var(--amber),var(--horizon))}
.mqcp-toggle.on .mqcp-knob{left:22px;background:#1a0c04}
.mqcp-toggle.locked{opacity:.9;background:rgba(128,212,160,.18);cursor:not-allowed}
.mqcp-toggle.locked .mqcp-knob{left:22px;background:var(--green)}
.mqcp-foot{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:16px 20px;border-top:1px solid var(--border)}
.mqcp-link{font-family:var(--sans-text);font-size:11px;color:var(--text2)}
.mqcp-link:hover{color:var(--amber)}
.mqcp-save{font-family:var(--sans);font-weight:700;font-size:11px;letter-spacing:.06em;text-transform:uppercase;padding:11px 20px;border-radius:999px;background:linear-gradient(135deg,var(--amber),var(--horizon));color:#1a0c04;transition:filter .2s}
.mqcp-save:hover{filter:brightness(1.07)}

/* Settings → Privacy & Data tab */
.mqs-priv-note{font-family:var(--sans-text);font-size:12.5px;line-height:1.6;color:var(--text2);background:rgba(255,200,80,.04);border:1px solid var(--border);border-radius:12px;padding:14px 16px}
.mqs-priv-note b{color:var(--cream)}
.mqs-priv-stat{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0}
.mqs-priv-stat span{flex:1;min-width:110px;font-family:var(--mono);font-size:9.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--text2);background:rgba(255,255,255,.03);border:1px solid var(--border);border-radius:10px;padding:12px 10px;text-align:center}
.mqs-priv-stat b{display:block;font-family:var(--serif);font-size:20px;color:var(--amber);margin-bottom:2px}
.mqs-priv-acts{display:flex;flex-direction:column;gap:8px;margin-top:6px}
.mqs-priv-btn{display:block;width:100%;text-align:left;font-family:var(--sans-text);font-weight:600;font-size:12.5px;color:var(--text);padding:13px 16px;border-radius:12px;border:1px solid var(--border2);background:rgba(255,255,255,.03);transition:all .2s}
.mqs-priv-btn:hover{border-color:var(--horizon);background:rgba(255,200,80,.06);color:var(--cream)}
.mqs-priv-btn.danger{color:#ff9b8a;border-color:rgba(255,90,60,.25)}
.mqs-priv-btn.danger:hover{border-color:#ff6a48;background:rgba(255,80,50,.08);color:#ffb3a4}
.mqs-priv-hint{font-family:var(--sans-text);font-size:11px;color:var(--text3);margin-top:12px;line-height:1.5}

/* ============================================================
   TASTE FUSION — blend two friends' DNA into a shared pick
   ============================================================ */
/* ---- in-chat bubble ---- */
.mqf-row{display:flex;justify-content:center;width:100%;margin:12px 0}
.mqf-bubble{width:min(346px,88%);position:relative;overflow:hidden;text-align:center;padding:18px 18px 16px;border-radius:20px;border:1px solid rgba(255,200,80,.22);background:linear-gradient(158deg,rgba(224,128,204,.11),rgba(0,212,255,.06) 52%,rgba(245,160,48,.09));box-shadow:0 18px 50px rgba(0,0,0,.42)}
.mqf-bubble::before{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 70% 55% at 50% 0%,rgba(245,160,48,.16),transparent 70%)}
.mqf-bubble>*{position:relative}
.mqf-heads{display:flex;align-items:center;justify-content:center;margin-bottom:11px}
.mqf-heads .mq-av{border:2px solid rgba(8,4,32,.92);box-shadow:0 4px 14px rgba(0,0,0,.45)}
.mqf-heads .mq-av:first-of-type{margin-right:-9px}
.mqf-heads .mq-av:last-of-type{margin-left:-9px}
.mqf-glyph{position:relative;z-index:2;font-size:16px;margin:0 -1px;filter:drop-shadow(0 0 9px rgba(245,160,48,.75));animation:mqf-pulse 2s ease-in-out infinite}
@keyframes mqf-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.2)}}
.mqf-b-tt{font-family:var(--serif);font-size:18px;font-weight:700;color:var(--cream);line-height:1.2}
.mqf-b-tt.muted{color:var(--text2)}
.mqf-b-sub{font-family:var(--sans-text);font-size:12px;color:var(--text2);margin-top:5px;line-height:1.45}
.mqf-b-acts{display:flex;gap:8px;margin-top:14px}
.mqf-b-acts .oa-btn{flex:1;padding:11px 10px;font-size:11px}
.mqf-wait{display:flex;gap:5px;justify-content:center;margin-top:14px}
.mqf-wait i{width:7px;height:7px;border-radius:50%;background:var(--horizon);animation:mqf-bounce 1.2s infinite}
.mqf-wait i:nth-child(2){animation-delay:.18s}.mqf-wait i:nth-child(3){animation-delay:.36s}
@keyframes mqf-bounce{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-5px)}}
.mqf-bubble.declined{opacity:.72;background:rgba(255,255,255,.02);border-color:var(--border);box-shadow:none}
.mqf-done{display:flex;align-items:center;gap:11px;text-align:left;background:rgba(4,2,26,.42);border:1px solid var(--border);border-radius:13px;padding:9px;margin-top:13px}
.mqf-done-poster{width:46px;height:69px;border-radius:7px;overflow:hidden;flex-shrink:0;background:#1A0830;display:flex;align-items:center;justify-content:center;font-size:18px}
.mqf-done-poster img{width:100%;height:100%;object-fit:cover}
.mqf-done-info{min-width:0}
.mqf-done-nm{font-family:var(--serif);font-size:15px;font-weight:700;color:var(--cream);line-height:1.15}
.mqf-done-meta{font-family:var(--sans-text);font-size:9px;color:var(--text3);letter-spacing:.05em;margin-top:3px}

/* ---- the Fusion Theater (full-screen cinematic reveal) ---- */
#mqf-theater{position:fixed;inset:0;z-index:9850;display:none;align-items:center;justify-content:center;padding:24px;background:radial-gradient(ellipse 85% 80% at 50% 28%,rgba(30,9,72,.42),rgba(4,2,26,.97));backdrop-filter:blur(26px)}
#mqf-theater.show{display:flex;animation:mqf-fade .4s ease}
@keyframes mqf-fade{from{opacity:0}to{opacity:1}}
.mqf-fx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.mqf-close{position:absolute;top:22px;right:24px;z-index:5;width:42px;height:42px;border-radius:50%;border:1px solid var(--border2);background:rgba(8,4,32,.6);color:var(--text2);font-size:16px}
.mqf-close:hover{color:var(--cream);border-color:var(--horizon)}
/* ⛬ `max-height:100%`, never `90vh`. Two reasons, and the second is the one that
   bit. (1) On a phone `vh` is the LARGE viewport, so `90vh` can be TALLER than
   the theater's own `100dvh` content box by the height of the member's toolbar,
   which turns one scroller into two that fight over a drag. (2) A percentage is
   bounded by the container by definition, so the outer scroller in the shared
   overlay block below stays what it was meant to be: a safety net that never
   engages, not a second scroller. `overflow-anchor:none` because this stage has
   its whole contents swapped mid-animation, and scroll anchoring "helpfully"
   preserving an offset across that swap is drift, not a courtesy. */
.mqf-stage{position:relative;z-index:2;width:100%;max-width:560px;max-height:100%;overflow-y:auto;overflow-anchor:none;text-align:center;padding:8px 8px 16px}
.mqf-title{font-family:var(--serif);font-size:13px;font-weight:700;letter-spacing:.42em;text-transform:uppercase;color:var(--horizon);text-shadow:0 0 24px rgba(245,160,48,.5)}
.mqf-sub{font-family:var(--mono);font-size:11px;color:var(--text2);letter-spacing:.16em;text-transform:uppercase;margin-top:7px}
.mqf-merge{display:flex;align-items:center;justify-content:center;gap:6px;margin:28px 0 4px}
.mqf-person{display:flex;flex-direction:column;align-items:center;gap:10px;width:100px}
.mqf-person.left{animation:mqf-slideL .8s cubic-bezier(.2,.8,.2,1)}
.mqf-person.right{animation:mqf-slideR .8s cubic-bezier(.2,.8,.2,1)}
@keyframes mqf-slideL{from{opacity:0;transform:translateX(-44px)}to{opacity:1;transform:none}}
@keyframes mqf-slideR{from{opacity:0;transform:translateX(44px)}to{opacity:1;transform:none}}
.mqf-av{position:relative}
.mqf-av::after{content:'';position:absolute;inset:-7px;border-radius:50%;z-index:-1;filter:blur(10px);opacity:.55;background:conic-gradient(from 0deg,var(--horizon),var(--electric),var(--magenta),var(--horizon));animation:mqf-spin 6s linear infinite}
@keyframes mqf-spin{to{transform:rotate(360deg)}}
.mqf-av .mq-av{border:2px solid rgba(255,240,224,.5)}
.mqf-pname{font-family:var(--sans-text);font-size:13px;font-weight:700;color:var(--cream)}
.mqf-helix{position:relative;width:92px;height:104px;flex-shrink:0;align-self:center}
.mqf-rung{position:absolute;left:50%;top:calc(4px + var(--i) * 5.3px);width:0;height:0}
.mqf-rung i{position:absolute;top:0;left:0;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;animation:mqf-helix 2.4s linear infinite;animation-delay:calc(var(--i) * -0.13s)}
.mqf-rung i:first-child{background:var(--horizon);box-shadow:0 0 10px var(--horizon)}
.mqf-rung i:last-child{background:var(--electric);box-shadow:0 0 10px var(--electric);animation-delay:calc(var(--i) * -0.13s - 1.2s)}
@keyframes mqf-helix{0%{transform:translateX(-36px) scale(.55);opacity:.35}50%{transform:translateX(36px) scale(1.1);opacity:1}100%{transform:translateX(-36px) scale(.55);opacity:.35}}
.mqf-ringwrap{position:relative;width:132px;height:132px;margin:24px auto 0}
.mqf-ring{width:132px;height:132px;transform:rotate(-90deg)}
.mqf-ring circle{fill:none;stroke-width:8;stroke-linecap:round}
.mqf-ring-bg{stroke:rgba(255,255,255,.08)}
.mqf-ring-fg{stroke:var(--amber);stroke-dasharray:327;stroke-dashoffset:327;filter:drop-shadow(0 0 6px rgba(255,208,96,.7))}
.mqf-ring.go .mqf-ring-fg{transition:stroke-dashoffset 1.6s cubic-bezier(.2,.8,.2,1);stroke-dashoffset:calc(327 - 327 * (var(--p,0) / 100))}
.mqf-ringtxt{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:42px;font-weight:700;color:var(--cream)}
.mqf-ringtxt i{font-size:18px;font-style:normal;color:var(--horizon);margin-top:9px}
.mqf-ringlbl{font-family:var(--mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--text2);margin-top:9px}
.mqf-bars{max-width:300px;margin:22px auto 0;display:flex;flex-direction:column;gap:9px}
.mqf-bar{display:flex;align-items:center;gap:11px}
.mqf-bar-l{flex:0 0 80px;text-align:right;font-family:var(--mono);font-size:9.5px;letter-spacing:.03em;text-transform:uppercase;color:var(--text2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mqf-bar-t{flex:1;height:7px;border-radius:5px;background:rgba(255,255,255,.06);overflow:hidden}
.mqf-bar-t i{display:block;height:100%;width:0;border-radius:5px;background:linear-gradient(90deg,var(--ember),var(--horizon),var(--amber))}
.mqf-bar-t i.go{width:var(--w);transition:width 1.1s cubic-bezier(.2,.8,.2,1)}
.mqf-status{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--horizon);margin-top:22px;animation:mqf-flick 1.6s ease-in-out infinite}
@keyframes mqf-flick{0%,100%{opacity:.5}50%{opacity:1}}
#mqf-theater.revealed .mqf-merge,#mqf-theater.revealed .mqf-ringwrap,#mqf-theater.revealed .mqf-ringlbl,#mqf-theater.revealed .mqf-bars,#mqf-theater.revealed .mqf-status,#mqf-theater.revealed .mqf-sub{display:none}
.mqf-reveal{margin-top:10px;animation:mqf-rise .7s cubic-bezier(.2,.8,.2,1)}
@keyframes mqf-rise{from{opacity:0;transform:translateY(26px) scale(.96)}to{opacity:1;transform:none}}
.mqf-eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--amber);margin-bottom:14px}
.mqf-hero{display:flex;gap:18px;text-align:left;background:linear-gradient(150deg,rgba(245,160,48,.1),rgba(224,128,204,.06));border:1px solid rgba(255,200,80,.22);border-radius:18px;padding:16px}
.mqf-hero-poster{width:122px;flex-shrink:0;aspect-ratio:2/3;border-radius:11px;overflow:hidden;background:#1A0830;display:flex;align-items:center;justify-content:center;font-size:30px;box-shadow:0 16px 40px rgba(0,0,0,.5);animation:mqf-pop .8s .15s backwards cubic-bezier(.2,.9,.2,1)}
@keyframes mqf-pop{from{opacity:0;transform:scale(.8) rotate(-3deg)}to{opacity:1;transform:none}}
.mqf-hero-poster img{width:100%;height:100%;object-fit:cover}
.mqf-hero-info{flex:1;min-width:0}
.mqf-hero-nm{font-family:var(--serif);font-size:26px;font-weight:700;color:var(--cream);line-height:1.08}
.mqf-hero-meta{font-family:var(--sans-text);font-size:10px;color:var(--text2);letter-spacing:.06em;margin-top:6px}
.mqf-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:11px}
.mqf-tag{font-family:var(--mono);font-size:9px;letter-spacing:.06em;text-transform:uppercase;color:var(--horizon);border:1px solid rgba(255,200,80,.28);border-radius:999px;padding:4px 10px}
.mqf-why{font-family:var(--serif);font-size:15px;font-style:italic;font-weight:300;line-height:1.5;color:rgba(255,225,190,.9);margin-top:13px}
.mqf-acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:15px}
.mqf-acts .oa-btn{flex:1;min-width:84px}
.mqf-alts-h{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--text2);margin:24px 0 0;text-align:left}
.mqf-alts{margin-top:11px}
@media(max-width:520px){
  .mqf-hero{flex-direction:column;align-items:center;text-align:center}
  .mqf-hero-poster{width:142px}
  .mqf-tags{justify-content:center}
}

/* ============================================================
   ScreenPlay (v3.5) — in-chat challenge bubble
   ============================================================ */
.mqg-bub{width:min(330px,88%);position:relative;overflow:hidden;padding:16px 18px 15px;border-radius:18px;border:1px solid rgba(255,200,80,.24);background:linear-gradient(150deg,rgba(245,160,48,.13),rgba(155,48,24,.10) 55%,rgba(14,7,58,.35));box-shadow:0 16px 44px rgba(0,0,0,.4)}
.mqg-bub::before{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 75% 60% at 50% 0%,rgba(255,208,96,.14),transparent 70%)}
.mqg-bub>*{position:relative}
.mqg-b-ey{font-family:var(--mono);font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--horizon);margin-bottom:8px}
.mqg-b-tt{font-family:var(--serif);font-size:17px;font-weight:700;color:var(--cream);line-height:1.25}
.mqg-b-acts{display:flex;gap:8px;margin-top:13px}
.mqg-b-acts .oa-btn{flex:1;padding:10px 12px;font-size:11px;text-decoration:none;display:block;cursor:inherit}

/* ==================== MOBILE APP CHROME (installed web app) ====================
   Turns phones + small tablets into a native-style experience: a bottom tab bar,
   a slimmed top bar, and a slide-up More sheet. Gated to <=860px — desktop is 100%
   untouched (env() safe-area insets are 0 in a normal browser tab). */
#mq-tabs,#mq-sheet{display:none}
@media(max-width:860px){
  /* --- slim top bar: drop the desktop link row + avatar; keep logo(mark) · search · bell --- */
  #mq-nav{gap:10px;padding:0 calc(14px + env(safe-area-inset-right,0px)) 0 calc(14px + env(safe-area-inset-left,0px))}
  #mq-nav .mqn-links,#mq-nav .mqn-av{display:none}
  #mq-nav .mqn-search{max-width:none;min-width:0;flex:1}
  #mq-nav .mqn-skbd{display:none}
  .mqn-word{display:none}

  /* --- anchored popovers become edge-to-edge panels ---
     A phone has no room for a right-anchored card of any fixed width: whatever
     width you pick, one edge hangs off the screen. Both of the nav's popovers
     (the notification / avatar menu and the search dropdown) therefore span the
     screen here, inset by a thumb-friendly gutter and the safe area. The search
     dropdown's exact box is still measured in navDropPlace(); these are the
     floors that hold even if that measurement is ever skipped. */
  .mqn-menu{left:calc(10px + env(safe-area-inset-left,0px));right:calc(10px + env(safe-area-inset-right,0px));min-width:0;max-width:none}
  .mqn-drop{max-width:none}

  /* --- content clears the fixed tab bar --- */
  body.mq-has-tabs{padding-bottom:calc(60px + env(safe-area-inset-bottom,0px))}

  /* --- bottom tab bar --- */
  #mq-tabs{display:flex;position:fixed;left:0;right:0;top:auto;bottom:0;z-index:720;gap:0;align-items:stretch;height:calc(58px + env(safe-area-inset-bottom,0px));padding:0 2px env(safe-area-inset-bottom,0px);background:rgba(7,3,26,.94);backdrop-filter:blur(26px);-webkit-backdrop-filter:blur(26px);border-top:1px solid var(--border);box-shadow:0 -10px 34px rgba(0,0,0,.45)}
  .mqt{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;color:var(--text3);background:none;border:none;text-decoration:none;position:relative;padding:9px 0 7px;min-width:0;-webkit-tap-highlight-color:transparent;transition:color .2s,transform .12s}
  .mqt.on{color:var(--amber)}
  .mqt:active{transform:scale(.92)}
  .mqt-ic{width:23px;height:23px;display:block;transition:transform .2s}
  .mqt.on .mqt-ic{transform:translateY(-1px)}
  .mqt-l{font-family:var(--mono);font-size:9px;letter-spacing:.05em;text-transform:uppercase;line-height:1;white-space:nowrap}
  .mqt-badge{position:absolute;top:4px;left:calc(50% + 4px);min-width:15px;height:15px;padding:0 4px;border-radius:99px;background:linear-gradient(135deg,var(--ember),var(--horizon));color:var(--void);font-family:var(--sans-text);font-size:8.5px;font-weight:700;display:none;align-items:center;justify-content:center;border:1.5px solid #0A0522}
  .mqt-badge.show{display:flex}
  .mqt-oracle .mqt-ic{width:31px;height:31px;color:var(--amber);filter:drop-shadow(0 3px 9px rgba(245,160,48,.5))}
  .mqt-oracle .mqt-l{color:var(--text2)}
  .mqt-oracle.on .mqt-l{color:var(--amber)}

  /* --- keep floating UI clear of the tab bar --- */
  #oa-orb{bottom:calc(76px + env(safe-area-inset-bottom,0px));right:calc(18px + env(safe-area-inset-right,0px))}
  /* The push opt-in card sits bottom-full-width on phones, so the Oracle orb would
     cover its Turn-on button. Tuck the orb away while that card is up (same move as
     the consent banner) so nothing blocks accepting notifications. */
  body.mq-pushp-open #oa-orb{opacity:0;pointer-events:none;transition:opacity .3s}
  #mq-toast{bottom:calc(76px + env(safe-area-inset-bottom,0px))}
  /* The Oracle is a bottom SHEET on phones, never a full-screen takeover: the page stays
     visible above it so the chat reads as a layer over what you were doing. Two vars, both
     set by MQ.assistant from the VisualViewport: --oah = sheet height (always leaves a gap
     at the top), --oakb = on-screen keyboard height (without it the composer sits behind
     the keyboard and the chat is unusable). The composer clears the home indicator, and
     16px text stops iOS zooming the field on focus. */
  #oa-panel{right:0;left:0;top:auto;bottom:var(--oakb,0px);width:100%;height:var(--oah,78vh);max-height:none;border-radius:26px 26px 0 0}
  #oa-panel .oa-head{position:relative;padding-top:20px}
  #oa-panel .oa-head::before{content:'';position:absolute;top:8px;left:50%;transform:translateX(-50%);width:38px;height:4px;border-radius:99px;background:rgba(255,255,255,.22)}
  #oa-panel .oa-input{padding-bottom:calc(13px + env(safe-area-inset-bottom,0px))}
  #oa-panel .oa-text{font-size:16px;padding:12px 16px}

  /* --- the More sheet --- */
  #mq-sheet{display:block;position:fixed;inset:0;z-index:9300;pointer-events:none}
  #mq-sheet .mqsh-bg{position:absolute;inset:0;background:rgba(2,1,12,.62);opacity:0;transition:opacity .32s}
  #mq-sheet.show{pointer-events:auto}
  /* The orb stands down while the sheet is up, like every other blocking surface
     (mq-consenting, mq-hero-on, mq-sweeping). It is a fixed FAB at bottom-right and
     the sheet's rows run the full width, so it was intercepting taps on the right
     end of Settings and Privacy & Data. */
  body.mq-sheeting #oa-orb{opacity:0;pointer-events:none;transform:scale(.82)}
  #mq-sheet.show .mqsh-bg{opacity:1}
  .mqsh-panel{position:absolute;left:0;right:0;bottom:0;background:linear-gradient(180deg,#160B32,#0B0620);border-top:1px solid var(--border2);border-radius:26px 26px 0 0;padding:8px 16px calc(20px + env(safe-area-inset-bottom,0px));transform:translateY(103%);transition:transform .36s cubic-bezier(.2,.85,.25,1);box-shadow:0 -24px 70px rgba(0,0,0,.6);max-height:86vh;overflow-y:auto}
  #mq-sheet.show .mqsh-panel{transform:translateY(0)}
  .mqsh-grip{width:40px;height:4px;border-radius:99px;background:rgba(255,255,255,.2);margin:6px auto 16px}
  .mqsh-me{display:flex;align-items:center;gap:13px;padding:12px 14px;border-radius:16px;background:rgba(255,255,255,.04);border:1px solid var(--border);margin-bottom:16px;text-decoration:none}
  .mqsh-me-av .mq-av{width:48px;height:48px;font-size:20px}
  .mqsh-me-tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
  .mqsh-me-nm{font-family:var(--serif);font-size:19px;font-weight:700;color:var(--cream);line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .mqsh-me-hd{font-family:var(--sans-text);font-size:10px;color:var(--text3);letter-spacing:.04em}
  .mqsh-me-go{font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--horizon);white-space:nowrap}
  .mqsh-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px}
  .mqsh-tile{display:flex;flex-direction:column;padding:15px;border-radius:16px;background:rgba(255,255,255,.035);border:1px solid var(--border);text-decoration:none;transition:background .18s}
  .mqsh-tile:active{background:rgba(255,200,80,.09)}
  .mqsh-tile-ic{font-size:22px;line-height:1;margin-bottom:8px}
  .mqsh-tile-l{font-family:var(--sans-text);font-weight:700;font-size:14px;color:var(--cream);margin-bottom:2px}
  .mqsh-tile-d{font-family:var(--sans-text);font-size:9.5px;letter-spacing:.03em;color:var(--text3)}
  .mqsh-list{display:flex;flex-direction:column;gap:2px}
  .mqsh-row{display:flex;align-items:center;gap:13px;padding:14px;border-radius:13px;font-family:var(--sans-text);font-size:15px;color:var(--text);background:none;border:none;text-align:left;width:100%;text-decoration:none;transition:background .15s}
  .mqsh-row>span:nth-child(2){flex:1}
  .mqsh-row-ic{font-size:16px;width:22px;text-align:center}
  .mqsh-row-go{color:var(--text3);font-size:18px}
  .mqsh-row:active{background:rgba(255,255,255,.05)}
  .mqsh-row.danger{color:#ff9b8a}
}

/* ============================================================
   Trust & Safety — the ••• moderation menu, report modal, dots
   ============================================================ */
.mqmod-dots{background:none;border:none;color:var(--text3);font-size:20px;line-height:1;
  padding:2px 8px;border-radius:8px;cursor:inherit;letter-spacing:1px;transition:color .15s,background .15s}
.mqmod-dots:hover{color:var(--amber);background:rgba(255,200,80,.08)}
.mqpo-dots{margin-left:auto;align-self:flex-start}
.mqmod-menu{position:absolute;z-index:9990;min-width:210px;background:var(--dusk);
  border:1px solid var(--border2);border-radius:14px;padding:6px;
  box-shadow:0 18px 50px rgba(0,0,0,.6);animation:mqmodIn .14s ease}
@keyframes mqmodIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.mqmod-mi{display:block;width:100%;text-align:left;background:none;border:none;color:var(--text);
  font-family:var(--sans-text);font-size:13px;padding:10px 12px;border-radius:9px;cursor:inherit;transition:background .12s}
.mqmod-mi:hover{background:rgba(255,200,80,.08)}
.mqmod-mi.danger{color:#ff9b8a}
.mqmod-mi.danger:hover{background:rgba(255,80,60,.1)}
.mqmod-ov{position:fixed;inset:0;z-index:9995;display:flex;align-items:center;justify-content:center;
  padding:20px;background:rgba(4,2,26,.72);backdrop-filter:blur(6px);animation:mqmodIn .18s ease}
.mqmod-card{width:100%;max-width:440px;background:var(--cosmos);border:1px solid var(--border2);
  border-radius:20px;padding:24px;box-shadow:0 30px 80px rgba(0,0,0,.6);max-height:88vh;overflow-y:auto}
.mqmod-h{font-family:var(--serif);font-size:26px;color:var(--cream);line-height:1.1}
.mqmod-sub{font-family:var(--sans-text);font-size:11px;color:var(--text3);margin:4px 0 16px;letter-spacing:.04em}
.mqmod-reasons{display:flex;flex-direction:column;gap:2px;margin-bottom:14px}
.mqmod-r{display:flex;align-items:center;gap:11px;padding:11px 12px;border-radius:11px;cursor:inherit;
  border:1px solid transparent;transition:background .12s,border-color .12s}
.mqmod-r:hover{background:rgba(255,255,255,.03)}
.mqmod-r input{accent-color:var(--horizon);width:16px;height:16px;cursor:inherit}
.mqmod-r span{font-size:14px;color:var(--text)}
.mqmod-r:has(input:checked){background:rgba(245,160,48,.1);border-color:var(--border2)}
.mqmod-note{width:100%;min-height:70px;resize:vertical;background:var(--void);border:1px solid var(--border);
  border-radius:12px;padding:12px;color:var(--text);font-family:var(--sans-text);font-size:14px;margin-bottom:12px}
.mqmod-note:focus{outline:none;border-color:var(--border2)}
.mqmod-safe{font-size:11.5px;line-height:1.5;color:var(--text3);background:rgba(0,212,255,.05);
  border:1px solid rgba(0,212,255,.15);border-radius:10px;padding:10px 12px;margin-bottom:16px}
/* ⛬ Cancel and Submit STICK to the bottom of the card. The card is the scroller
   (max-height:88vh), and its content is ~100px taller than that on a 390x664
   phone, so at rest both buttons sat below the fold — on the one dialog a member
   only ever opens because something has already gone wrong. They could be
   scrolled to, so this was never a dead end, but "your way out is off-screen
   until you find it" is not good enough here. The negative margins let the bar
   span the card's 24px padding and its background hide the content sliding
   under it. */
.mqmod-acts{display:flex;justify-content:flex-end;gap:10px;
  position:sticky;bottom:-24px;margin:0 -24px -24px;padding:16px 24px 24px;
  background:linear-gradient(to top,var(--cosmos) 62%,rgba(14,7,58,0));z-index:2}
.mqmod-btn{font-family:var(--sans-text);font-size:13px;font-weight:600;padding:11px 20px;border-radius:11px;cursor:inherit;border:1px solid transparent}
.mqmod-btn.ghost{background:none;border-color:var(--border2);color:var(--text2)}
.mqmod-btn.ghost:hover{color:var(--text)}
.mqmod-btn.go{background:linear-gradient(135deg,var(--ember),var(--horizon));color:#1a0c04}
.mqmod-btn.go:hover{filter:brightness(1.08)}

/* ============================================================================
   ⚖ THE CONSENT GATE  —  blocking terms + age acceptance (MQ.gate in core.js)
   ============================================================================
   Sits above EVERYTHING, including the Oracle orb (9600), the fusion theater
   (9850) and every modal, because it must not be possible to reach the product
   past it. Uses the sunset palette so a legal formality still feels like
   Cinemere rather than a browser alert. */
/* ⚠ THE OVERLAY SCROLLS, NOT THE CARD. This blocks the whole product, so every
   control in it MUST be reachable on every screen. It previously centred a card
   capped at `max-height:88vh` that scrolled internally: on a phone (375x600, an
   ordinary height once the browser toolbars are showing) the card's own content
   ran to 733px, so the agree checkbox and the "Agree and continue" button sat
   below the fold with no affordance, and the button was flat off-screen at y=643.
   Members could not pick a birth year and could not get into the app at all.
   `vh` on iOS makes it worse: it resolves against the LARGE viewport, so the card
   extends under the toolbar and its bottom is genuinely unreachable.
   Fix: the overlay itself is the scroll container, `100dvh` where supported, and
   the card is centred with `margin:auto` (not `align-items` alone, which clips
   the top of an overflowing flex item). Never put a fixed height back on the card. */
.mq-gate{position:fixed;inset:0;z-index:9990;display:flex;align-items:center;justify-content:center;
  padding:24px max(24px,env(safe-area-inset-right)) max(24px,env(safe-area-inset-bottom)) max(24px,env(safe-area-inset-left));
  background:rgba(2,1,12,.86);backdrop-filter:blur(14px);
  overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
  animation:mqGateIn .34s cubic-bezier(.2,.9,.25,1)}
@supports(height:100dvh){.mq-gate{height:100dvh}}
@keyframes mqGateIn{from{opacity:0}to{opacity:1}}
body.mq-gated{overflow:hidden}
body.mq-gated #oa-orb,body.mq-gated .mq-tabs{opacity:0;pointer-events:none}
.mq-gate-card{width:100%;max-width:520px;margin:auto;flex:0 0 auto;
  background:linear-gradient(155deg,#0C0726,#17092E);border:1px solid var(--border2);
  border-radius:24px;padding:34px 32px 28px;box-shadow:0 40px 110px rgba(0,0,0,.6);
  animation:mqGateUp .42s cubic-bezier(.2,.9,.25,1)}
@keyframes mqGateUp{from{transform:translateY(18px) scale(.98);opacity:0}to{transform:none;opacity:1}}
.mq-gate-eyebrow{font-family:var(--mono);font-size:9.5px;letter-spacing:.3em;text-transform:uppercase;
  color:var(--horizon);margin-bottom:14px}
.mq-gate-h{font-family:var(--serif);font-weight:700;font-size:clamp(26px,4.4vw,34px);line-height:1.06;
  color:var(--cream);letter-spacing:-.01em;margin-bottom:10px}
.mq-gate-lead{font-family:var(--sans-text);font-size:16px;line-height:1.65;color:var(--text2);margin-bottom:20px}
.mq-gate-docs{display:flex;flex-direction:column;gap:8px;margin-bottom:20px}
.mq-gate-doc{display:flex;align-items:center;gap:13px;padding:13px 15px;border-radius:14px;
  background:rgba(255,255,255,.035);border:1px solid var(--border);transition:border-color .18s,background .18s}
.mq-gate-doc:hover{border-color:var(--border2);background:rgba(255,255,255,.06)}
.mq-gate-doc-i{font-family:var(--serif);font-size:17px;color:var(--horizon);width:20px;text-align:center;flex-shrink:0}
.mq-gate-doc b{display:block;font-family:var(--sans-text);font-size:13px;font-weight:700;color:var(--cream)}
.mq-gate-doc small{display:block;font-family:var(--sans-text);font-size:11px;color:var(--text3);margin-top:2px;line-height:1.4}
.mq-gate-doc span:nth-child(2){flex:1;min-width:0}
.mq-gate-doc-x{font-family:var(--sans-text);font-size:12px;color:var(--text3);flex-shrink:0}
.mq-gate-age{background:rgba(255,255,255,.03);border:1px solid var(--border);border-radius:14px;
  padding:15px 16px;margin-bottom:18px}
.mq-gate-age-l{display:block;font-family:var(--sans-text);font-size:12.5px;font-weight:700;color:var(--cream);margin-bottom:9px}
.mq-gate-age-in{width:100%;font-family:var(--sans-text);font-size:14px;color:var(--text);
  background:var(--void);border:1px solid var(--border2);border-radius:10px;padding:11px 12px;outline:none}
.mq-gate-age-in:focus{border-color:var(--horizon)}
.mq-gate-age-h{font-family:var(--sans-text);font-size:11px;line-height:1.5;color:var(--text3);margin-top:9px}
.mq-gate-check{display:flex;align-items:flex-start;gap:11px;margin-bottom:8px;
  font-family:var(--sans-text);font-size:12.5px;line-height:1.55;color:var(--text2)}
.mq-gate-check input{width:19px;height:19px;flex-shrink:0;margin-top:1px;accent-color:var(--horizon)}
.mq-gate-check b{color:var(--cream)}
.mq-gate-err{font-family:var(--sans-text);font-size:12px;color:#ff9b8a;margin:6px 0 0;display:none}
.mq-gate-err.show{display:block}
.mq-gate-go{width:100%;margin-top:18px;font-family:var(--sans-text);font-weight:700;font-size:13px;
  letter-spacing:.04em;padding:15px;border-radius:999px;border:none;
  background:linear-gradient(135deg,var(--amber),var(--horizon));color:#1a0c04;transition:filter .18s}
.mq-gate-go:hover{filter:brightness(1.07)}
.mq-gate-go:disabled{opacity:.6}
.mq-gate-out{margin-top:16px;font-family:var(--sans-text);font-size:11.5px;line-height:1.7;color:var(--text3);text-align:center}
.mq-gate-out a{color:var(--text2);border-bottom:1px solid var(--border2)}

/* ⚠ EVERY BLOCKING OVERLAY SCROLLS. THE GATE WAS NOT SPECIAL. ─────────────────
   Nine dialogs share the shape that locked members out of the app on
   2026-08-20: `position:fixed; inset:0; display:flex; align-items:center` with
   no scrolling of its own, holding a box capped in `vh`. Two ways that fails:

     · a short viewport (a phone with its browser toolbars showing) pushes the
       box past both edges, and with the overlay not scrolling there is no
       gesture that brings them back. Measured on the privacy-choices dialog at
       320x480: top at -8px, bottom at 488px of a 480px viewport, both cut off.
     · `vh` on iOS resolves against the LARGE viewport (toolbars hidden), so a
       90vh box is taller than what the member can actually see, and an inner
       scroller inside a fixed overlay while `body{overflow:hidden}` is the
       classic combination where iOS routes the swipe to the locked body and
       nothing moves at all.

   So the OVERLAY is the scroll container, `100dvh` tracks the real visible
   height, and each box is centred with `margin:auto` rather than by
   `align-items` alone (which clips the TOP of an overflowing flex item, and a
   clipped top cannot be scrolled back into view).

   The boxes keep their own `max-height`/inner scrollers: those give the
   fixed-header dialogs their pinned footers, and they are now a nicety rather
   than the only thing standing between a member and the close button.

   ⛬ When you add a blocking overlay, add it to BOTH lists in the same change,
      and add it to DIALOGS in server/ops/smoke.html so it is proven, not hoped.
   ───────────────────────────────────────────────────────────────────────────*/
#mq-qv, #mq-post, #mq-set, #mq-le, #mq-picker, #mq-log, #mq-scr,
.mqcp-modal, #mqf-theater, .mqmod-ov{
  overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain;
  padding-bottom:max(24px, env(safe-area-inset-bottom));
  padding-left:max(20px, env(safe-area-inset-left));
  padding-right:max(20px, env(safe-area-inset-right));
}
@supports(height:100dvh){
  #mq-qv, #mq-post, #mq-set, #mq-le, #mq-picker, #mq-log, #mq-scr,
  .mqcp-modal, #mqf-theater, .mqmod-ov{ height:100dvh }
}
.mqv-box, .mqpo-box, .mqs-box, .mqle-box, .mqp-box, .mqlog-box, .mqscr-box,
.mqf-stage, .mqmod-card, .mqcp-box{ margin:auto; flex:0 0 auto }

/* ═══ QUICK VIEW ON A PHONE — the bottom sheet ═════════════════════════════
   Reported 2026-09-03 by members, with screenshots, about Browse. Five defects,
   all of them on the one surface a member reaches by tapping a poster:

     1. the art was a 2:3 poster cropped to a 200px letterbox band, i.e. a
        horizontal SLICE of the middle of it. On the three screenshots that was a
        torso, a suit fabric and a pair of cropped faces. Never the artwork.
     2. the seven actions wrapped to one full-width pill each: a 358px column
        that started BELOW the fold of a nested scroller, so the primary CTA was
        off screen with nothing saying so.
     3. the box was capped in `vh`, which on a phone is the LARGE viewport, so
        the bottom of the card sat under the browser toolbar. The rule against
        bare `vh` was already written down (§"The width axis"); this dialog was
        never held to it because it was never in the gate.
     4. the Oracle orb landed on the actions (see body.mq-qv-open above).
     5. a centred card with 24px gutters wastes both edges of a 320px screen and
        reads as a desktop dialog that happens to be narrow.

   So on a phone it is a SHEET: anchored to the bottom edge the thumb is already
   at, the artwork shown WHOLE as a poster card over its own blurred ambient
   wash, the actions on a two-column grid, and the whole thing draggable down by
   the grip (MQ.sheetDrag).

   ⛬ The hook classes are DOUBLED (.mq-qvsheet.mq-qvsheet) on purpose. A page's
   own <style> block is loaded AFTER cinemere-core.css, so Browse's own .qv-box
   rules would otherwise out-order every line of this at equal specificity. */
@media(max-width:760px){
  /* The overlay has to give up its gutters, or the sheet floats with square
     bottom corners over a 24px strip of nothing. This is an id selector because
     `#mq-qv` is one and the shared overlay-scroll block above sets its padding;
     Browse's `#qv` carries the identical two lines in its own <style>, which is
     the ONLY part of this that cannot be shared (an id out-ranks any class). */
  #mq-qv{align-items:flex-end;padding:0}
  .mq-qvsheet.mq-qvsheet{
    width:100%;max-width:none;margin:auto 0 0;
    grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr);
    max-height:92vh;
    border-radius:26px 26px 0 0;border-left:none;border-right:none;border-bottom:none;
    box-shadow:0 -26px 74px rgba(0,0,0,.72);
    animation:mq-qvrise .42s cubic-bezier(.18,.85,.24,1)
  }
  /* The art band: ambient wash + the poster itself, uncropped. Both the band and
     the poster are capped in vh as well as px, because a 480px-tall phone cannot
     spend 172px on artwork and still clear the primary CTA. */
  .mq-qvart.mq-qvart{width:100%;height:clamp(126px,26vh,174px);min-height:0;touch-action:none}
  /* ⛬ The wash is MASKED out at the bottom rather than faded to a colour. Fading
     it to a literal (#0E0828) left a visible seam, because the box behind it is a
     135deg gradient and is never exactly that value at the band's bottom edge.
     Masking makes the band end in the sheet's OWN ground, whatever that is there.
     The -12% bleed gives the blur material to smear and is clipped by the host. */
  .mq-qvart.mq-qvart .mqa-bg{
    display:block;position:absolute;inset:-12%;
    background-size:cover;background-position:center;
    filter:blur(24px) saturate(1.3) brightness(.5);
    -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 46%,transparent 88%);
            mask-image:linear-gradient(180deg,#000 0%,#000 46%,transparent 88%)
  }
  .mq-qvart.mq-qvart::after{                        /* dim + vignette, ends clear */
    content:'';position:absolute;inset:0;
    background:linear-gradient(180deg,rgba(4,2,26,.36) 0%,rgba(4,2,26,.06) 42%,rgba(4,2,26,0) 100%)
  }
  .mq-qvart.mq-qvart::before{                       /* the grip: it is draggable */
    content:'';position:absolute;z-index:3;top:10px;left:50%;transform:translateX(-50%);
    width:40px;height:4px;border-radius:99px;background:rgba(255,255,255,.34)
  }
  .mq-qvart.mq-qvart .mqa-shot{
    position:relative;z-index:2;width:auto;height:clamp(88px,18vh,120px);min-height:0;
    aspect-ratio:2/3;border-radius:10px;
    box-shadow:0 16px 40px rgba(0,0,0,.62),0 0 0 1px rgba(255,208,96,.3)
  }
  .mq-qvart.mq-qvart .mqa-fb{position:relative;z-index:2;font-size:50px}
  .mq-qvbody.mq-qvbody{
    padding:16px 20px calc(18px + env(safe-area-inset-bottom,0px));
    gap:9px;min-height:0;overflow-y:auto;overscroll-behavior:contain
  }
  /* the synopsis is the one block that decides whether the actions clear the fold.
     Cormorant at 15.5px/1.68 across a full-width phone ran five lines and pushed
     the last action row off; 14.6px/1.56 reads the same and buys back ~30px. */
  .mq-qvbody.mq-qvbody .mqv-ov,.mq-qvbody.mq-qvbody .qv-ov{font-size:14.6px;line-height:1.56}
  .mq-qvbody.mq-qvbody .mqv-title,.mq-qvbody.mq-qvbody .qv-title{font-size:25px}
  .mq-qvbody.mq-qvbody .mqv-sc,.mq-qvbody.mq-qvbody .qv-sc{font-size:24px}
  /* ⛬ two columns, primary across the top. A wrapping flex row put each pill on
     its own line, which is what made this 358px tall. */
  .mq-qvacts.mq-qvacts{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:12px}
  .mq-qvacts.mq-qvacts>*{
    width:100%;min-width:0;                       /* the width axis: a grid child
       defaults to min-width:auto, i.e. its content's intrinsic width */
    justify-content:center;text-align:center;
    padding:13px 12px;font-size:11px;letter-spacing:.05em;
    white-space:normal;line-height:1.25          /* wrap rather than spill */
  }
  .mq-qvacts.mq-qvacts>*:first-child{grid-column:1/-1}
}
@supports(height:100dvh){
  @media(max-width:760px){ .mq-qvsheet.mq-qvsheet{max-height:92dvh} }
}
@keyframes mq-qvrise{from{transform:translateY(30px)}to{transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){ .mq-qvsheet.mq-qvsheet{animation:none} }
.mq-gate-link{font:inherit;color:var(--amber);background:none;border:none;padding:0;
  border-bottom:1px solid rgba(255,208,96,.3)}
.mq-gate-link:hover{color:var(--cream)}
/* Phones: trim the card so it fits a short viewport with as little scrolling as
   possible, and give the select a 16px control font so iOS never zooms on focus. */
@media(max-width:520px){
  .mq-gate{padding:14px max(14px,env(safe-area-inset-right)) max(14px,env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left))}
  .mq-gate-card{padding:26px 20px 22px;border-radius:20px}
  .mq-gate-lead{font-size:15px;margin-bottom:16px}
  .mq-gate-docs{gap:7px;margin-bottom:16px}
  .mq-gate-doc{padding:11px 13px}
  .mq-gate-doc small{display:none}          /* the link text already says what it is */
  .mq-gate-age{padding:13px 14px}
  .mq-gate-age-in{font-size:16px}
  .mq-gate-go{margin-top:15px;padding-top:15px;padding-bottom:15px}
  .mq-gate-out{margin-top:13px}
}

/* ⚖ The shared legal footer (MQ.mountLegalFooters -> [data-mq-legal]).
   Carries the two documents the law requires and the attribution TMDB's API
   terms require. Present on every page so neither can go missing from one. */
/* Second line of defence: core injects this markup into pages whose own <style>
   block it does not control. A class selector (0,1,0) outbids any bare element
   rule (0,0,1), so pinning these back to normal document flow makes it
   impossible for a page's navbar/footer styling to turn the legal footer into a
   fixed overlay. Do not remove: this is the guard, the div-not-nav is the fix. */
.mq-legal,.mq-legal-links,.mq-autofoot{position:static;top:auto;right:auto;bottom:auto;left:auto;
  z-index:auto;height:auto;width:auto;backdrop-filter:none;-webkit-backdrop-filter:none}
.mq-legal{padding:6px 0 2px;text-align:center;background:none;border:0}
.mq-legal-links{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 20px;margin-bottom:12px;
  background:none;border:0;padding:0}
.mq-legal-links a,.mq-legal-btn{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--text3);background:none;border:none;padding:0;transition:color .18s}
.mq-legal-links a:hover,.mq-legal-btn:hover{color:var(--amber)}
.mq-legal-fine{font-family:var(--sans-text);font-size:9px;letter-spacing:.06em;line-height:1.9;color:var(--text4)}
/* TMDB attribution logo — required by their API terms §3 alongside the notice text.
   Deliberately small and low-contrast so Cinemere's own mark stays the dominant one,
   which their terms also require. */
/* One credit = one row: the notice, then its mark on the right. Centred as a
   unit, so this line and the TVmaze line below it hang off the same centre
   instead of each being centred as loose inline text. It wraps on a narrow
   phone rather than compressing the sentence. */
.mq-legal-credit{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:0 9px;margin-top:6px}
.mq-legal-tmdb{display:block;height:20px;width:auto;aspect-ratio:190.24/81.52;opacity:.75;flex:none}
.mq-legal-tmdb:hover{opacity:1}

/* ⚖ Statements of reasons + appeals (MQ.moderation.noticesPanel).
   Rendered on the privacy page. Deliberately plain and readable: this is the
   one surface where a member is being told bad news, and a decision they can
   act on must not read like an error toast. */
.mqn-empty{font-family:var(--sans-text);font-size:13px;line-height:1.7;color:var(--text2);
  background:rgba(255,255,255,.025);border:1px solid var(--border);border-radius:14px;padding:20px}
.mqn-empty b{color:var(--cream)}
.mqn-item{background:rgba(255,255,255,.03);border:1px solid var(--border);border-radius:16px;
  padding:18px 20px;margin-bottom:12px}
.mqn-top{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:10px}
.mqn-act{font-family:var(--sans-text);font-weight:700;font-size:13px;color:var(--cream)}
.mqn-when{font-family:var(--sans-text);font-size:9.5px;letter-spacing:.12em;color:var(--text3)}
.mqn-body p{font-family:var(--sans-text);font-size:12.5px;line-height:1.7;color:var(--text2);margin:0 0 10px}
.mqn-body p:last-child{margin-bottom:0}
.mqn-state{font-family:var(--sans-text);font-size:11.5px;line-height:1.6;color:var(--text3);
  border-top:1px solid var(--border);margin-top:12px;padding-top:12px}
.mqn-state.mqn-open{color:var(--amber)}
.mqn-state.mqn-upheld{color:var(--green)}
.mqn-note{display:block;color:var(--text2);margin-top:6px}
.mqn-appeal{border-top:1px solid var(--border);margin-top:12px;padding-top:12px}
.mqn-btn{font-family:var(--sans-text);font-weight:700;font-size:11.5px;letter-spacing:.03em;
  padding:10px 16px;border-radius:999px;border:1px solid var(--border2);
  background:rgba(255,255,255,.04);color:var(--text)}
.mqn-btn:hover{border-color:var(--horizon);color:var(--cream)}
.mqn-btn.go{background:linear-gradient(135deg,var(--amber),var(--horizon));border-color:transparent;color:#1a0c04}
.mqn-btn.ghost{background:none}
.mqn-btn:disabled{opacity:.6}
.mqn-form label{display:block;font-family:var(--sans-text);font-size:12px;color:var(--text2);margin:4px 0 8px}
.mqn-form textarea{width:100%;background:var(--void);border:1px solid var(--border2);border-radius:12px;
  padding:12px;color:var(--text);font-family:var(--sans-text);font-size:13px;line-height:1.6;resize:vertical;outline:none}
.mqn-form textarea:focus{border-color:var(--horizon)}
.mqn-formact{display:flex;gap:10px;margin-top:10px}
.mqn-err{font-family:var(--sans-text);font-size:11.5px;color:#ff9b8a;margin-top:8px}
.mq-autofoot{border-top:1px solid var(--border);margin-top:60px;padding:34px 24px calc(34px + env(safe-area-inset-bottom,0px))}
@media(max-width:900px){.mq-autofoot{padding-bottom:calc(94px + env(safe-area-inset-bottom,0px))}}

/* ── THE STAGING MARK ─────────────────────────────────────────────────────────
   staging.cinemere.com serves a byte-identical build, on purpose, so the one
   thing it must not do is look identical. Mounted by mountStagingMark() in
   cinemere-core.js, and ONLY on a `staging.` hostname — there is no flag and no
   env var, because a config value can be copied to production by exactly the
   mistake this exists to prevent.

   ⛬ pointer-events:none ON EVERY PART OF IT. It sits above the consent gate
   (9995) so staging is identifiable even while that is blocking, which means it
   overlaps real controls, which means it may never be able to take a tap. There
   is nothing here to click and nothing here that should stop a click.

   ⛬ The edge is 4px and the tag is bottom-LEFT, both deliberate. The navigation
   is fixed at top:0 with a height of 60 and the runtime gate asserts it is the
   topmost element AT ITS OWN CENTRE (~y30), so a strip that ends at y4 cannot
   displace it. The Oracle orb owns the bottom-RIGHT (bottom:76, height 62) and
   the mobile tab bar owns the bottom 58 plus the safe area, so the tag clears
   both rather than competing with either. */
.mq-staging{position:fixed;inset:0;z-index:9999;pointer-events:none}
.mq-staging-edge{
  position:absolute;top:0;left:0;right:0;height:4px;pointer-events:none;
  /* Hazard stripes, not a flat brand colour. Every flat colour in this palette
     already means something in the product (amber is the accent, green is a
     status, electric is the Oracle), and a band of one of them reads as chrome.
     A diagonal repeat reads as "this area is under work" at a glance and at any
     size, which is the only job this element has. */
  background:repeating-linear-gradient(135deg,
    var(--electric) 0 10px, rgba(0,60,80,.85) 10px 20px);
}
.mq-staging-tag{
  position:absolute;left:12px;bottom:16px;pointer-events:none;
  /* Uppercase, so var(--mono) is allowed here: uppercase Latin has no
     descenders, which is the whole basis of the Syne Mono rule. */
  font-family:var(--mono);text-transform:uppercase;letter-spacing:.18em;
  font-size:9.5px;line-height:1;color:var(--electric);
  padding:6px 10px;border-radius:7px;
  background:rgba(4,2,26,.92);border:1px solid rgba(0,212,255,.45);
  box-shadow:0 0 0 1px rgba(4,2,26,.6), 0 4px 18px rgba(0,0,0,.45);
}
/* Above the mobile tab bar (58px) and its safe area, so it never sits under the
   one piece of chrome a thumb is always reaching for. */
@media(max-width:900px){
  .mq-staging-tag{bottom:calc(70px + env(safe-area-inset-bottom,0px))}
}