/* ===== view chrome: sticky bar, corner badge, flip wipe ===== */
  .bar{
    position:fixed;top:0;left:0;right:0;z-index:60;
    display:flex;align-items:center;justify-content:space-between;gap:24px;
    padding:12px clamp(16px,3vw,40px);
    background:var(--bar-bg);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
    border-bottom:1px solid var(--bar-line);color:var(--cream);
    translate:0 -101%;
  }
  .bar.on{translate:0 0}
  .bar-brand{
    display:flex;align-items:center;gap:10px;font-weight:700;font-size:15px;white-space:nowrap;
    /* it is a button now: strip the UA chrome, keep the type */
    background:none;border:0;padding:0;color:inherit;font-family:inherit;
    cursor:pointer;transition:color .18s ease-out;
  }
  .bar-brand:hover{color:var(--orange)}
  .bar-brand:focus-visible{outline:2px solid var(--orange);outline-offset:4px;border-radius:4px}
  .bar-brand .mark{width:21px;height:21px;flex:none;display:block}
  .bar-nav{display:flex;gap:clamp(12px,1.8vw,26px)}
  .bar-nav a{font-size:13px;color:var(--cream-dim);text-decoration:none;transition:color .18s ease-out}
  .bar-nav a:hover{color:var(--cream)}
  @media (max-width:860px){.bar-nav{display:none}}
  .bar-flip,.vbadge{
    display:flex;align-items:center;gap:9px;cursor:pointer;white-space:nowrap;
    font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
    border:1.5px solid var(--pill-line);border-radius:99px;padding:9px 16px;
    background:transparent;color:var(--cream);
    transition:border-color .18s ease-out,background .18s ease-out,color .18s ease-out;
  }
  .bar-flip:hover,.vbadge:hover{border-color:var(--orange);background:var(--orange);color:#fff}
  /* --cream is whichever of white/near-black reads against the bar in the
     palette you are in: #EFE9DC on the dark security bar, #15171A on the
     light one. So one value gives a white dot here and still holds up if the
     theme is flipped, where a literal #fff would disappear. */
  .bar-flip .dot,.vbadge .dot{
    width:8px;height:8px;border-radius:50%;background:var(--cream);flex:none;
    transition:background .18s ease-out;
  }
  .bar-flip:hover .dot,.vbadge:hover .dot{background:#fff}
  body.offline .bar-flip:hover .dot,body.offline .vbadge:hover .dot{background:var(--ink)}
  .bar-flip .swap{color:var(--cream-dim);border-left:1px solid var(--pill-line);padding-left:9px}
  /* the header pill (#barflip only - #msheetflip in the mobile menu shares
     .bar-flip for base styling but keeps its own profile-name text, so its
     divider still separates two real segments and is left alone): James
     wanted the "Security profile"/"Off the clock" state text gone here,
     replaced by the same swap-arrows icon .vbadge already uses, leaving
     just an icon + the word "Switch." With no state-name segment before it
     any more, the divider that used to separate it from one has nothing
     left to divide. */
  .bar-flip-ico{width:14px;height:14px;flex:none;color:var(--cream)}
  .bar-flip:hover .bar-flip-ico{color:#fff}
  #barflip .swap{border-left:none;padding-left:0}
  /* sound toggle - same pill language as the flip control */
  .bar-right{display:flex;align-items:center;gap:clamp(8px,1vw,14px)}
  .sfx-btn{
    display:flex;align-items:center;gap:9px;cursor:pointer;white-space:nowrap;
    font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
    border:1.5px solid var(--pill-quiet);border-radius:99px;padding:9px 14px;
    background:transparent;color:var(--pill-fg);
    transition:border-color .18s ease-out,color .18s ease-out;
  }
  .sfx-btn:hover{border-color:var(--orange);color:var(--cream)}
  .sfx-btn[aria-pressed="true"]{color:var(--cream);border-color:#5A554C}
  /* in the floating bar specifically, "on" reads as filled orange, same
     accent .hero-top already uses for its own pressed state below - the
     bar's own base rule above stays the neutral outline for "off" */
  .bar .sfx-btn[aria-pressed="true"]{background:var(--orange);color:#fff;border-color:var(--orange)}
  /* one speaker glyph either way - off wears the muted X any OS volume
     control uses, on swaps that for a pair of signal arcs that pulse
     outward, so the icon itself carries the "it's on" state rather than
     relying on the label alone. */
  .sfx-ico{width:15px;height:15px;flex:none;overflow:visible}
  .sfx-ico path,.sfx-ico line{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
  .sfx-ico .sfx-signal{display:none}
  .sfx-btn[aria-pressed="true"] .sfx-ico .sfx-mute{display:none}
  .sfx-btn[aria-pressed="true"] .sfx-ico .sfx-signal{display:inline}
  .sfx-btn[aria-pressed="true"] .sfx-wave1{animation:sfx-radiate .9s ease-in-out infinite}
  .sfx-btn[aria-pressed="true"] .sfx-wave2{animation:sfx-radiate .9s ease-in-out infinite .15s}
  @keyframes sfx-radiate{0%,100%{opacity:.3}50%{opacity:1}}
  @media (prefers-reduced-motion: reduce){
    .sfx-btn[aria-pressed="true"] .sfx-wave1,
    .sfx-btn[aria-pressed="true"] .sfx-wave2{animation:none;opacity:1}
  }
  @media (prefers-reduced-motion: reduce){
    .sfx-btn[aria-pressed="true"] .sfx-ico{animation:none}
  }
  /* the control stays on touch: most of the set is wired to clicks, not
     hovers, so a phone still gets the taps, the flips and the modals */
  /* music pill: same shell as the sound pill, but the note itself bobs in
     place once playing rather than swapping to a second icon - one glyph
     that just starts moving reads as simpler than two icons trading off */
  .mus-btn{
    display:flex;align-items:center;gap:9px;cursor:pointer;white-space:nowrap;
    font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
    border:1.5px solid var(--pill-quiet);border-radius:99px;padding:9px 14px;
    background:transparent;color:var(--pill-fg);
    transition:border-color .18s ease-out,color .18s ease-out;
  }
  .mus-btn:hover{border-color:var(--orange);color:var(--cream)}
  .mus-btn[aria-pressed="true"]{color:var(--cream);border-color:#5A554C}
  /* same filled-orange "on" treatment as the sound toggle above, scoped
     to the floating bar */
  .bar .mus-btn[aria-pressed="true"]{background:var(--orange);color:#fff;border-color:var(--orange)}
  .mus-btn[disabled]{opacity:.45;cursor:not-allowed}
  /* a beamed pair of quavers - at 15px a single note with a flag turns to
     mush, while two noteheads under a beam stay legible. It matters more
     than it used to: below 600px these buttons lose their labels and the
     icon is the only thing naming them. */
  .mus-ico{width:15px;height:15px;flex:none;overflow:visible}
  .mus-ico path{
    fill:none;stroke:currentColor;stroke-width:2;
    stroke-linecap:round;stroke-linejoin:round;
  }
  .mus-ico circle{fill:currentColor;stroke:none}
  /* the same note, dancing rather than just nodding once it's actually
     playing - a bouncy overshoot easing on the whole glyph plus each
     notehead pulsing on its own offbeat, so it reads as keeping time
     rather than one flat up-down loop. The icon itself carries the
     "it's on" state rather than relying on the label alone. */
  .mus-btn[aria-pressed="true"] .mus-ico{
    animation:mus-bob .55s cubic-bezier(.34,1.56,.64,1) infinite;
    transform-origin:9px 20px;
  }
  @keyframes mus-bob{
    0%,100%{translate:0 0;rotate:0deg}
    30%{translate:0 -3.5px;rotate:-9deg}
    62%{translate:0 .5px;rotate:6deg}
  }
  .mus-btn[aria-pressed="true"] .mus-ico circle{
    animation:mus-pulse .55s ease-in-out infinite;
    transform-origin:center;
  }
  .mus-btn[aria-pressed="true"] .mus-ico circle:nth-of-type(2){animation-delay:.16s}
  @keyframes mus-pulse{0%,100%{scale:1}50%{scale:1.22}}
  @media (prefers-reduced-motion: reduce){
    .mus-btn[aria-pressed="true"] .mus-ico,
    .mus-btn[aria-pressed="true"] .mus-ico circle{animation:none}
  }
  .hero-top .mus-btn{
    font-size:clamp(12.5px,1.05vw,16px);padding:11px 19px;gap:11px;
    border:2px solid var(--orange);color:var(--cream);
  }
  .hero-top .mus-ico{width:18px;height:18px}
  .hero-top .mus-btn:hover,
  .hero-top .mus-btn[aria-pressed="true"]{background:var(--orange);color:#fff;border-color:var(--orange)}
  @media (max-width:760px){.hero-top .mus-btn{font-size:12px;padding:10px 15px}}
  @media (max-width:600px){.mus-btn .mus-lab{display:none}.mus-btn{padding:9px 11px}}
  /* theme pill - same shell again; the icon shows the mode you are in */
  .thm-btn{
    display:flex;align-items:center;gap:9px;cursor:pointer;white-space:nowrap;
    font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
    border:1.5px solid var(--pill-quiet);border-radius:99px;padding:9px 14px;
    background:transparent;color:var(--pill-fg);
    transition:border-color .18s ease-out,color .18s ease-out;
  }
  .thm-btn:hover{border-color:var(--orange);color:var(--cream)}
  /* "off" is one character wider than "on", so these pills used to shrink as
     you switched them on. Hold each label at the width of its longer state.
     The type is monospaced, so that width is exactly
     characters x (0.6em advance + 0.12em letter-spacing) - 9 x .72 = 6.48em
     for "Sound off" and "Music off", 5 x .72 = 3.6em for "Light" - with a
     little over the top for a fallback mono with a wider advance. Left
     aligned, so the text does not shuffle inside the reserved box. */
  .sfx-lab,.mus-lab{display:inline-block;min-width:6.7em;text-align:left}
  .thm-lab{display:inline-block;min-width:3.8em;text-align:left}

  .thm-ico{width:15px;height:15px;flex:none;overflow:visible}
  .thm-ico circle,.thm-ico path{
    fill:none;stroke:currentColor;stroke-width:1.7;
    stroke-linecap:round;stroke-linejoin:round;
  }
  .thm-ico .i-moon path{fill:currentColor;stroke:none}
  html[data-theme="dark"] .thm-ico .i-sun{display:none}
  html[data-theme="light"] .thm-ico .i-moon{display:none}
  .hero-top .thm-btn{
    font-size:clamp(12.5px,1.05vw,16px);padding:11px 19px;gap:11px;
    border:2px solid var(--orange);color:var(--cream);
  }
  .hero-top .thm-ico{width:18px;height:18px}
  .hero-top .thm-btn:hover{background:var(--orange);color:#fff}
  @media (max-width:760px){.hero-top .thm-btn{font-size:12px;padding:10px 15px}}
  @media (max-width:600px){.thm-btn .thm-lab{display:none}.thm-btn{padding:9px 11px}}
  /* gap sizes are tuned per content, not per side - the wider gap suits
     the brand-to-nav and nav-link spacing now living in hero-top-left,
     the tighter one suits the three toggle buttons now in hero-top-right */
  .hero-top-left{display:flex;align-items:center;gap:clamp(18px,2.8vw,40px)}
  .hero-top-right{display:flex;align-items:center;gap:clamp(10px,1.6vw,22px)}
  /* the hero control is the one people meet first - it wears the accent */
  .hero-top .sfx-btn{
    font-size:clamp(12.5px,1.05vw,16px);padding:11px 19px;gap:11px;
    border:2px solid var(--orange);color:var(--cream);
  }
  .hero-top .sfx-ico{width:18px;height:18px}
  .hero-top .sfx-btn:hover,
  .hero-top .sfx-btn[aria-pressed="true"]{background:var(--orange);color:#fff;border-color:var(--orange)}
  /* three soft pulses on arrival, then it stops asking */
  .hero-top .sfx-btn[aria-pressed="false"]{animation:sfx-pulse 2.2s ease-out 1.4s 3}
  @keyframes sfx-pulse{
    0%{box-shadow:0 0 0 0 rgba(240,127,40,.35)}
    45%{box-shadow:0 0 0 10px rgba(240,127,40,0)}
    100%{box-shadow:0 0 0 0 rgba(240,127,40,0)}
  }
  @media (max-width:760px){.hero-top .sfx-btn{font-size:12px;padding:10px 15px}}
  @media (max-width:600px){.sfx-btn .sfx-lab{display:none}.sfx-btn{padding:9px 11px}}

  .bar-flip:hover .swap{color:#fff;border-color:rgba(255,255,255,.5)}
  /* nav swap: links drop in one after another, the bar sweeps behind them */
  .bar-nav a,.bar-flip span:not(.swap),.vbadge span:not(.dot){
    display:inline-block;
    animation:nav-in .62s cubic-bezier(.22,1.35,.36,1) backwards;
  }
  .bar-nav a:nth-child(1){animation-delay:.06s}
  .bar-nav a:nth-child(2){animation-delay:.13s}
  .bar-nav a:nth-child(3){animation-delay:.20s}
  .bar-nav a:nth-child(4){animation-delay:.27s}
  .bar-nav a:nth-child(5){animation-delay:.34s}
  .bar-nav a:nth-child(6){animation-delay:.41s}
  @keyframes nav-in{
    0%{opacity:0;translate:0 -26px;scale:.86;filter:blur(6px)}
    60%{opacity:1;filter:blur(0)}
    100%{opacity:1;translate:0 0;scale:1}
  }
  /* an orange light sweeps across the bar as the page underneath changes */
  .bar::after{
    content:"";position:absolute;inset:0;pointer-events:none;opacity:0;
    background:linear-gradient(100deg,
      transparent 0%, rgba(240,127,40,.06) 35%,
      rgba(240,127,40,.42) 50%, rgba(240,127,40,.06) 65%, transparent 100%);
  }
  .bar.flipping::after{animation:bar-sweep .85s cubic-bezier(.4,0,.2,1)}
  @keyframes bar-sweep{
    0%{opacity:1;translate:-100% 0}
    100%{opacity:1;translate:100% 0}
  }
  .bar.flipping{border-bottom-color:var(--orange)}
  .bar.flipping .bar-brand .mark{color:var(--orange);scale:1.25}
  .bar .bar-brand .mark{transition:color .45s ease-out,scale .45s cubic-bezier(.22,1.35,.36,1)}
  /* the status dot snaps over as the view lands */
  .bar.flipping .dot,.vbadge.flipping .dot{animation:dot-pop .6s cubic-bezier(.22,1.35,.36,1)}
  @keyframes dot-pop{0%{scale:0}55%{scale:2.1}100%{scale:1}}
  .bar{
    overflow:hidden;
    transition:translate .34s cubic-bezier(.32,.72,0,1),border-color .45s ease-out;
  }

  /* Desktop only: the bar floats as a self-width pill clear of both edges,
     rather than spanning full-bleed with a single bottom rule - mobile
     keeps the edge-to-edge bar untouched, since there is no spare width
     there for anything to float in. The "where am I" job that the side
     rail used to do moves in here too: a sliding highlight tracks the
     current section behind the nav links themselves, segmented-control
     style, instead of a separate dot trail down the side of the page. */
  @media (min-width:861px){
    .bar{
      left:50%;right:auto;top:16px;
      translate:-50% -140%;
      width:max-content;max-width:97vw;
      justify-content:flex-start;gap:clamp(14px,1.8vw,28px);
      padding:8px 12px 8px 20px;
      border:1px solid var(--bar-line);
      border-radius:999px;
      box-shadow:0 16px 40px rgba(0,0,0,.28);
    }
    .bar.on{translate:-50% 0}
    .bar-nav{position:relative;gap:2px}
    .bar-nav a{
      position:relative;z-index:1;padding:9px 14px;border-radius:999px;
      white-space:nowrap;
    }
    .bar-nav a[aria-current="true"]{color:#fff}
    .bar-nav a[aria-current="true"]:hover{color:#fff}
    .bar-nav-glow{
      position:absolute;top:0;bottom:0;left:0;z-index:0;
      width:0;border-radius:999px;background:var(--orange);
      opacity:0;
      transition:transform .42s cubic-bezier(.22,.61,.36,1),
                 width .42s cubic-bezier(.22,.61,.36,1),opacity .25s ease-out;
    }
    .bar-nav-glow.on{opacity:1}
    @media (prefers-reduced-motion:reduce){.bar-nav-glow{transition:opacity .25s ease-out}}
    /* the flip pulse used to ride the one bottom rule the full-bleed bar
       had - now that the pill has an edge all the way round, the pulse
       should too */
    .bar.flipping{border-color:var(--orange)}

    /* Everything the bar carries - brand, five-item nav, percentage
       readout, three labelled toggles, the flip control - measures out
       comfortably wider than a centered pill can afford on an ordinary
       laptop screen, brief before any narrow-window fallback ever gets a
       chance to apply. So the readout and the toggle labels are icon-only
       by default here, not just below some narrow threshold: the bar needs
       the room on a normal screen already, not only a small one. */
    .bar .sprog{display:none}
    .bar .sfx-lab,.bar .mus-lab,.bar .thm-lab{display:none}
    .bar .sfx-btn,.bar .mus-btn,.bar .thm-btn{padding:9px 11px}
  }

  /* corner badge: the same answer, kept in reach on small screens - docked
     bottom-left so it doesn't compete with Bean (the site guide) in the
     bottom-right corner (styles/11-assistant.css). Icon-only rather than
     the text pill .bar-flip uses in the header - it never appears above
     861px (see below), so there's no desktop appearance to preserve, and
     a compact round icon button reads as a corner utility rather than a
     second nav element competing for attention next to Bean. The "Security
     profile"/"Off the clock" text spans stay in the DOM (still swapped by
     the same [data-view] toggle everything else uses) but are hidden here
     - aria-label="Switch view" on the button covers the accessible name. */
  .vbadge{
    position:fixed;left:clamp(12px,2vw,24px);bottom:clamp(12px,2vw,24px);z-index:60;
    width:76px;height:76px;padding:0;gap:0;justify-content:center;
    /* brand orange, not the subdued glass pill every other chrome control
       uses - the same color language as Bean's own launcher, so this reads
       as a second thing worth noticing in the corner rather than a faint
       utility icon (James: "make it more noticable"). border-color is kept
       transparent rather than removed outright so the shared .bar-flip,
       .vbadge hover rule below still has something to transition from. */
    background:var(--orange);border-color:transparent;color:#fff;
    box-shadow:0 10px 28px rgba(0,0,0,.4),inset 0 0 0 1px rgba(255,255,255,.18);
    opacity:0;pointer-events:none;translate:0 12px;
    transition:opacity .28s ease-out,translate .28s cubic-bezier(.32,.72,0,1),
               border-color .18s ease-out,background .18s ease-out,color .18s ease-out,filter .18s ease-out;
  }
  .vbadge.on{opacity:1;pointer-events:auto;translate:0 0}
  /* the shared .bar-flip,.vbadge hover rule sets the same orange background
     this already rests at, so hovering would otherwise show no feedback at
     all - a slight darken stands in for the color change that rule can't
     provide here. */
  .vbadge:hover{filter:brightness(.9)}
  .vbadge-ico{width:28px;height:28px;flex:none}
  .vbadge .dot,.vbadge span[data-view]{display:none}
  @media (min-width:861px){.vbadge{display:none}}
  /* matches Bean's own phone-width shrink (.asst-launch, 76px -> 48px
     under 640px, styles/11-assistant.css) so the two stay the same size
     at every width, not just above 640px. (An earlier, more drastic 28px
     test value confirmed the real bug: .asst-mk svg was a fixed 46px
     regardless of .asst-launch's own size, so the icon never actually
     shrank with the button - now fixed with a % size there, so this can
     go back to a size that just looks like "smaller," not "diagnostic.") */
  @media (max-width:640px){
    .vbadge{width:48px;height:48px}
    .vbadge-ico{width:18px;height:18px}
  }

  /* the flip itself: a short wipe so the change is never missed */
  .wipe{
    position:fixed;inset:0;z-index:95;background:var(--card);
    opacity:0;pointer-events:none;transition:opacity .22s ease-out;
  }
  .wipe.on{opacity:1}

  .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
  /* the first section of the incoming view leads itself in as it reaches the
     fold - a moving thing just below the hero is the scroll invitation */
  .lead-arm .sec-head h2,.lead-arm .sec-head .meta{opacity:0;translate:0 26px;filter:blur(5px)}
  .lead-go .sec-head h2,.lead-go .sec-head .meta{
    animation:lead-in .72s cubic-bezier(.22,1.35,.36,1) forwards;
  }
  .lead-go .sec-head .meta{animation-delay:.09s}
  @keyframes lead-in{
    0%{opacity:0;translate:0 26px;filter:blur(5px)}
    100%{opacity:1;translate:0 0}
  }
  @media (prefers-reduced-motion: reduce){
    .lead-arm .sec-head h2,.lead-arm .sec-head .meta{opacity:1;translate:0 0;filter:none}
    .lead-go .sec-head h2,.lead-go .sec-head .meta{animation:none}
  }