/* flair.css: the R32 flair strip (flair-designer's integration-spec-01 section 1.3).
   Decorative, generative, JS-driven; nothing without JS. Linked by base.html ONLY when
   FLAIR_ENABLED, so flag-off pages stay byte-identical (site.css untouched). Fixed to the
   viewport's right edge, width set by JS (0 = invisible without JS), z-index -1 = behind the
   content the way the FW-1 rails' pseudo is (html has no background; body's white propagates
   to the canvas). Do NOT give body or main a stacking context (position/z-index/transform/
   opacity) or the strip disappears behind the white. */
.flair {
  position: fixed;
  top: 0; right: 0;
  height: 100vh;            /* fallback: on iOS/Android this is already the large viewport */
  height: 100lvh;           /* R37: pinned to the LARGE viewport, so the URL bar collapsing/expanding never resizes the strip */
  width: 0;                 /* JS sets the width; 0 = invisible without JS */
  z-index: -1;              /* behind content, like the FW-1 rails' pseudo */
  pointer-events: none;
  user-select: none;
  will-change: transform;   /* R35: own compositing layer; z-order behind content verified in WebKit */
}
.flair[hidden] { display: none; }   /* the 64rem to ~1090px dead zone: JS sets hidden */
.flair canvas { display: block; width: 100%; height: 100%; }
body.operator-area .flair { display: none; }   /* relaxed brief behind the gate: no flair */
@media print { .flair { display: none; } }