/* BeatNation brand: fonts and design tokens shared by every BeatNation page (home,
   the new Scribe/Player, and later the library). Page stylesheets build on these.
   Linked as brand.css?v=dev; scripts/inject-html-bundles.mjs swaps in a content hash
   at deploy, since s/css is served without hashed filenames. */
/* Self-hosted (s/fonts, latin subset, SIL OFL: see s/fonts/OFL.txt). No Google Fonts at runtime. */
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 600; font-display: swap;
  src: url(../fonts/barlow-condensed-600.woff2) format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 700; font-display: swap;
  src: url(../fonts/barlow-condensed-700.woff2) format('woff2'); }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(../fonts/barlow-400.woff2) format('woff2'); }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 500; font-display: swap;
  src: url(../fonts/barlow-500.woff2) format('woff2'); }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 600; font-display: swap;
  src: url(../fonts/barlow-600.woff2) format('woff2'); }
:root {
  --bn-green: #465148;       /* sampled from the existing header */
  --bn-green-deep: #2e362f;
  --bn-green-line: #5e6b60;
  --bn-stage: #0c1213;       /* the dark of the drum-kit photo */
  --bn-brass: #d9b65e;       /* gold, used for buttons and the playhead */
  --bn-brass-hover: #e3c47c;
  --bn-brass-ink: #1b1608;
  /* The app's dark stage (Scribe/Player): surfaces, lines, text, controls, paper. */
  --bn-surface: #141b1b;     /* cards on the stage */
  --bn-surface-2: #1b2524;   /* menus, pills, inputs */
  --bn-line: #33403f;        /* card borders, dividers */
  --bn-text: #eef1ec;
  --bn-muted: #a9b5ab;
  --bn-outline: #8a9a8d;     /* control and empty-step outlines */
  --bn-kick: #6fa97d;
  --bn-warn: #e0a64a;        /* amber: something needs attention (e.g. no backup yet) */
  --bn-warn-ink: var(--bn-brass-ink); /* text on a --bn-warn fill */
  --bn-paper: #f3f0e6;       /* notation paper */
  --bn-ink: #171a17;
  /* Brass comes in two kinds, the same colour in dark: --bn-brass-fill behind ink (buttons, the
     play button, a filled snare) and --bn-brass for brass text, lines and outlines, which the
     light theme deepens so it still reads on paper colours. --bn-brass-brand is the logo's and
     the green header's, the same in both themes. */
  --bn-brass-brand: #d9b65e;
  --bn-brass-fill: var(--bn-brass);
  --bn-brass-fill-hover: var(--bn-brass-hover);
  --bn-hit-tom: #9fb1a2;
  --bn-switch-off: #4c5a4f;  /* a switch's track when it's off */
  --bn-hover: #2a3836;       /* a menu item under the pointer */
  /* The header's popovers (the account menu, the theme choice): lifted off the page, with an edge
     that shows on the near-black stage and on its cards, where a shadow can't. */
  --bn-popover-bg: var(--bn-surface-2);
  --bn-popover-line: #445452; /* its border and dividers */
  --bn-popover-row: var(--bn-hover); /* the chosen row, and a row under the pointer or focus */
  --bn-popover-shadow: rgba(0, 0, 0, .6);
  --bn-tint: rgba(255, 255, 255, .04); /* a faint lift: zebra rows, hovered rows */
  --bn-danger: #e58c7e;      /* destructive borders and fills */
  --bn-danger-text: #f2b0a5;
  --bn-danger-bg: #3a2020;
  --bn-shadow: rgba(0, 0, 0, .45);
  --bn-backdrop: rgba(8, 12, 12, .65);
  --bn-glass: rgba(12, 18, 19, .94); /* the Studio's sticky controls, over the page */
  --bn-logo-ink: #fff;       /* the wordmark's letters and dots */
  --bn-switch-knob: #fff;
  --bn-unsaved: #c98b3c;     /* the status dot for changes not yet saved or sent */
  --bn-notation-now: #a27a1e; /* the sounding note in the notation (on paper, the same in both themes) */
  /* The Studio and Player by role, so a theme can tune each in one line. In dark they are the
     shared tokens above; the light theme overrides some of them. */
  --bn-title: var(--bn-text);          /* the groove's title */
  --bn-btn-fill: var(--bn-brass-fill); /* primary buttons (Save to library…) */
  --bn-btn-fill-hover: var(--bn-brass-fill-hover);
  --bn-btn-ink: var(--bn-brass-ink);
  --bn-cymbal: var(--bn-text);         /* cymbal symbols: ✕ ✚ ▲, the open ring, ⊗ and ◆ */
  --bn-cymbal-tan: var(--bn-brass);    /* accented hi-hat ✕ and crash ✱ */
  --bn-snare: var(--bn-brass-fill);    /* a filled snare step */
  --bn-step-ring: var(--bn-outline);   /* an empty step's outline */
  --bn-glyph-weight: 1;                /* scales the cymbal symbols' strokes and rings */
  --bn-mute-fill: var(--bn-surface-2); /* the Studio's M (row mute) button, not pressed */
  --bn-mute-line: transparent;
  --bn-mute-text: var(--bn-muted);
  --bn-playhead-scale: 1.15;           /* the sounding note grows a little */
  --bn-playhead-glow: brightness(1.3) drop-shadow(0 0 7px rgba(217, 182, 94, .85)); /* and glows */
  --bn-playhead-band: rgba(217, 182, 94, .07); /* a subtle band behind the playing column */
  --bn-playhead-band-quiet: rgba(217, 182, 94, .015); /* fainter where nothing sounds */
  --bn-playhead-backlight: rgba(255, 214, 64, .9); /* "No highlight": the soft yellow light behind a sounding note */
  --bn-spotlight-band: rgba(217, 182, 94, .12); /* the Studio's "drag to spotlight" hint */
  --bn-spotlight-line: var(--bn-brass);          /* the line under the spotlit steps */
  --bn-radius: 6px;
  --bn-display: 'Barlow Condensed', 'Arial Narrow', Arial, sans-serif;
  --bn-body: 'Barlow', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;

  /* Step grid sizing, shared by the home page's "Try a beat" pad and the Scribe and
     Player grids so they always match. The home pad stretches its circles to fill its
     box; the app grids scroll, so they use --bn-step-size. */
  --bn-step-size: 40px;
  --bn-step-gap: clamp(2px, .5vw, 6px);   /* between steps */
  --bn-beat-gap: clamp(2px, .8vw, 10px);  /* extra space before each beat */
  --bn-row-gap: .5rem;                    /* between instrument rows */
  --bn-step-border: 1.5px;
  --bn-step-label: 600 1.05rem/1 var(--bn-display);
}
/* Light (data-theme="light" on <html>, set by theme.js and each page's <head>). The home page
   never has a data-theme, so it keeps the dark tokens above. Checked by contrast.test.js. */
:root[data-theme="dark"] { color-scheme: dark; }
:root[data-theme="light"] {
  color-scheme: light;
  --bn-stage: #f2f0ea;
  --bn-surface: #faf9f5;
  --bn-surface-2: #ebe8df;
  --bn-line: #e2dfd7;
  --bn-text: #1a201b;
  --bn-muted: #5f655f;
  --bn-outline: #7b887e;
  --bn-kick: #3f6b48;
  --bn-warn: #986011;
  --bn-warn-ink: #ffffff;
  --bn-paper: #fffdf6;
  --bn-brass: #7c5c10;
  --bn-brass-hover: #5f460a;
  --bn-brass-fill: #c39728;
  --bn-brass-fill-hover: #d0a743;
  --bn-hit-tom: #6f8574;
  --bn-switch-off: #858f87;
  --bn-hover: #e0ddd2;
  /* Popovers: the card colour, edged by their shadow, as before. */
  --bn-popover-bg: var(--bn-surface);
  --bn-popover-line: var(--bn-line);
  --bn-popover-row: var(--bn-surface-2);
  --bn-popover-shadow: var(--bn-shadow);
  --bn-tint: rgba(0, 0, 0, .035);
  --bn-danger: #c2533f;
  --bn-danger-text: #a3301c;
  --bn-danger-bg: #fbe9e5;
  --bn-shadow: rgba(40, 36, 24, .18);
  --bn-backdrop: rgba(40, 44, 40, .45);
  --bn-glass: rgba(242, 240, 234, .94); /* the stage, see-through */
  --bn-title: #262b28;
  /* Voices at an even weight: dark cymbals, the snare's tan (the tan cymbal symbols match it),
     a deep kick green, and quiet empty steps. */
  --bn-cymbal: #3a423e;
  --bn-snare: #a27a1e;
  --bn-cymbal-tan: var(--bn-snare);
  /* Dark strokes on a light page read thinner than light on dark: 15% heavier symbols and rings. */
  --bn-glyph-weight: 1.15;
  --bn-step-ring: #bcb8ad;
  /* Primary buttons: a hair darker than the snare so white text reaches 4.5:1. */
  --bn-btn-fill: #8d6912;
  --bn-btn-fill-hover: #7a5d16;
  --bn-btn-ink: #ffffff;
  /* M (row mute) buttons: outline only, darkening on hover; pressed, they fill red as in dark. */
  --bn-mute-fill: transparent;
  --bn-mute-line: #cfcbc1;
  --bn-mute-text: #5f655f;
  --bn-mute-fill-hover: transparent;
  --bn-mute-line-hover: var(--bn-text);
  /* Playhead: on the light card a pale glow barely shows, so the sounding note deepens a touch and
     takes a stronger, deeper brass glow. */
  --bn-playhead-scale: 1.15;
  --bn-playhead-glow: brightness(.85) drop-shadow(0 0 7px rgba(195, 151, 40, .95));
  --bn-playhead-band: rgba(124, 92, 16, .07);
  --bn-playhead-band-quiet: rgba(124, 92, 16, .015);
  --bn-playhead-backlight: #ffd23f;
  --bn-spotlight-band: rgba(195, 151, 40, .14);
  --bn-spotlight-line: var(--bn-brass-fill);
  --bn-logo-ink: #fff;
}
@media (max-width: 900px) { :root { --bn-step-size: 34px; } }
@media (max-width: 600px) { :root { --bn-step-size: 30px; } }

/* The site header (SiteHeader/vue/site_header.js), the same on every page that has one: the
   BEAT NATION logo linking home, Studio and Library, and the account control.
   Its height is --bn-header-h, for anything that needs to clear it. The page's empty
   <header class="bn-topbar"> is already this height and colour, so nothing moves when it fills.
   The inner row lines up with the page's content column: pages set --page-max and --gutter. */
:root { --bn-header-h: 64px; }
/* A fixed height, signed in or out: nothing inside can make the bar taller. */
.bn-topbar { box-sizing: border-box; height: calc(var(--bn-header-h) + env(safe-area-inset-top, 0px));
  padding-top: env(safe-area-inset-top, 0px); background: var(--bn-green); color: #fff; }
.bn-topbar-inner { box-sizing: border-box; display: flex; align-items: center; gap: 20px; width: 100%;
  height: var(--bn-header-h); max-width: var(--page-max, 1180px); margin: 0 auto;
  padding: 0 max(var(--gutter, 16px), env(safe-area-inset-right, 0px)) 0 max(var(--gutter, 16px), env(safe-area-inset-left, 0px)); }
.bn-brand { display: flex; flex: none; align-items: center; min-height: 44px; color: var(--bn-logo-ink); text-decoration: none; white-space: nowrap; }
/* Stencil caps on a brass stave, a beat dot under the B, T, T and N (SiteHeader/vue/wordmark.js).
   Each dot is inside its letter, centred on the glyph (half the tracking off the letter's
   width), and in front of the line. The line runs from the B's dot to the N's (half those
   letters' widths in Barlow Condensed; the dots hide any difference in a fallback font). The
   bottom padding makes room for the stave, so the whole logo centres in the bar. Brass is only
   for this large type: the line and the first dot. */
.bn-wordmark { --bn-track: .14em; position: relative; padding-bottom: .6em; font: 700 1.7rem/1 var(--bn-display);
  letter-spacing: var(--bn-track); text-transform: uppercase; }
.bn-wordmark::after { content: ""; position: absolute; left: .23em; right: calc(var(--bn-track) + .26em); top: 1.35em; height: .1em;
  min-height: 1.5px; background: var(--bn-brass-brand); }
.bn-logo-beat { display: inline-block; position: relative; }
.bn-logo-beat i { position: absolute; z-index: 1; top: 1.2em; left: calc(50% - var(--bn-track) / 2); width: .4em; height: .4em;
  margin-left: -.2em; border-radius: 50%; background: var(--bn-logo-ink); }
.bn-logo-beat:first-child i { background: var(--bn-brass-brand); }
/* The count-in: one beat each at 120 bpm, the dot on the beat brass and swelling, once
   (logo-tick.js adds the class). The first dot stays white until it lands back on one. */
@keyframes bn-logo-tick { 0%, 55% { background: var(--bn-brass-brand); transform: scale(1.3); } 100% { background: var(--bn-logo-ink); transform: scale(1); } }
.bn-logo-tick .bn-logo-beat i { background: var(--bn-logo-ink); animation: bn-logo-tick .5s ease-out 1; }
.bn-logo-tick .bn-logo-beat:nth-child(2) i { animation-delay: .5s; }
.bn-logo-tick .bn-logo-beat:nth-child(3) i { animation-delay: 1s; }
.bn-logo-tick .bn-logo-beat:nth-child(4) i { animation-delay: 1.5s; }
@media (prefers-reduced-motion: reduce) { .bn-logo-tick .bn-logo-beat i { animation: none; } }
/* Studio and Library run the bar's full height (a tall tap target). This page's link has a short
   brass line just under its word, as wide as the text (--nav-pad, the link's side padding, keeps it
   there at every width); on the bar's bottom edge it was hard to see. Hover only brightens: the
   underline means "you are here". */
.bn-nav { display: flex; align-self: stretch; gap: 0; margin-left: auto; }
.bn-nav-link { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; min-width: 44px;
  --nav-pad: 14px; position: relative; padding: 0 var(--nav-pad); color: #e2e0d8; font: 500 1rem/1 var(--bn-body); text-decoration: none; }
.bn-nav-link:hover { color: #fff; }
.bn-nav-link[aria-current="page"] { color: #fff; font-weight: 600; }
.bn-nav-link[aria-current="page"]::after { content: ""; position: absolute; left: var(--nav-pad); right: var(--nav-pad);
  top: calc(50% + 13px); height: 3px; border-radius: 2px; background: var(--bn-brass-brand); }
.bn-brand:focus-visible { outline: 3px solid var(--bn-brass-brand); outline-offset: 2px; border-radius: 2px; }
.bn-nav-link:focus-visible { outline: 3px solid var(--bn-brass-brand); outline-offset: -8px; border-radius: 6px; } /* inside the bar */
/* Between the links and the theme / account controls. */
.bn-header-divider { flex: none; width: 1px; height: 24px; background: rgba(255, 255, 255, .18); }
/* Phones: smaller, so the logo, both links and the account circle stay on one row. */
@media (max-width: 600px) {
  .bn-topbar-inner { gap: .4rem; }
  .bn-header-divider { display: none; }
  .bn-wordmark { --bn-track: .1em; font-size: 1.2rem; }
  .bn-nav { gap: 0; }
  .bn-nav-link { --nav-pad: 8px; }
}
/* The smallest phones (320px): a smaller logo, closer links, and 40px theme and account buttons
   (each still a 44px tap target), so the row stays inside the page's side margins. */
@media (max-width: 389px) {
  .bn-topbar-inner { gap: 4px; }
  .bn-wordmark { --bn-track: .08em; font-size: .95rem; }
  .bn-nav-link { --nav-pad: 2px; font-size: 15px; } /* still 44px wide (min-width) */
}
/* Signed out, the Settings gear (site_header.js) is one more button: from 390px, where the rule above
   lets go, to about 430px, close the gaps up a little so the row still fits. */
@media (min-width: 390px) and (max-width: 429px) {
  .bn-topbar-inner:has(.bn-settings-btn) { gap: 4px; }
  .bn-topbar-inner:has(.bn-settings-btn) .bn-nav-link { --nav-pad: 4px; }
}
/* The site footer (SiteFooter/vue/site_footer.js), on every page with the header: the copyright
   line and Privacy. On a short page it sits at the bottom of the screen, not half way up. */
.bn-footer { background: var(--bn-green); color: #fff; text-align: center;
  padding: 1.2rem 1rem calc(1.2rem + env(safe-area-inset-bottom, 0px)); }
.bn-footer p { margin: 0; font: .9rem/1.5 var(--bn-body); color: #d5ddd3; }
.bn-footer a { color: #d5ddd3; margin-left: .5rem; }
.bn-footer a:focus-visible { outline: 3px solid var(--bn-brass-brand); outline-offset: 2px; border-radius: 2px; }
body:has(> .bn-footer) { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
body > .bn-footer { margin-top: auto; }

/* The account control at the right of the top bar (Account/vue/account_menu.js), as on
   Cornerways: "Sign in", or a round button with your initial opening a menu. */
.bn-account-slot { margin-left: auto; min-width: 0; }
/* Room for the control before the account is known, so the links don't slide when it arrives:
   "Sign in", or the avatar when the page was served signed in (bn-account-slot-in). */
.bn-nav ~ .bn-account-slot { display: flex; justify-content: flex-end; min-width: 88px; margin-left: 0; }
.bn-nav ~ .bn-account-slot-in { min-width: 44px; }
/* Once it's there, the control sets the width (under the Vite dev server there's no hint). */
.bn-nav ~ .bn-account-slot:has(.bn-account > *) { min-width: 0; }
.bn-account { position: relative; display: flex; align-items: center; }
/* Signed out: "Sign in", a brass-ringed pill with white text, 40px high (white on the brass itself
   would be 1.9:1). At least 88px wide, the room the slot keeps for it, so the links don't slide when
   it arrives. The selector outranks a page's own "a { color: inherit }" (.bn-home a). */
.bn-account-signin { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; height: 40px;
  min-width: 88px; padding: 0 20px; border-radius: 999px; background: transparent; color: #fff;
  box-shadow: inset 0 0 0 1.5px var(--bn-brass-brand);
  font: 600 15px/1 var(--bn-body); text-decoration: none; white-space: nowrap; }
a.bn-account-signin { color: #fff; }
.bn-account-signin:hover { background: color-mix(in srgb, var(--bn-brass-brand) 18%, transparent); }
/* Signed in: a 44px round button holding a 34px avatar, no name or chevron (its label says whose
   menu). The ring shows for the keyboard only (:focus-visible), not on a click. */
.bn-account-btn { display: grid; place-items: center; flex: none; width: 44px; height: 44px; padding: 0; border: 0;
  border-radius: 50%; background: transparent; cursor: pointer; }
.bn-account-btn:hover, .bn-account-btn[aria-expanded="true"] { background: rgba(255, 255, 255, .16); }
.bn-account-btn:focus { outline: none; }
.bn-account-btn:focus-visible, .bn-account-signin:focus-visible { outline: 2px solid var(--bn-brass-brand); outline-offset: 2px; }
.bn-menu-item:focus-visible { outline: 2px solid var(--bn-brass); outline-offset: 2px; }
.bn-avatar { flex: none; display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  background: var(--bn-brass-brand); color: var(--bn-brass-ink); font: 700 .95rem/1 var(--bn-body); }
.bn-avatar-lg { width: 40px; height: 40px; font-size: 1.1rem; }
/* A tap target of at least 44px: "Sign in" is shorter, so an invisible strip tops it up. */
.bn-account-signin { position: relative; }
.bn-account-signin::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 44px; transform: translateY(-50%); }
/* Phones: "Sign in" becomes a 44px circle with a person icon (the link's text stays its name). */
@media (max-width: 600px) {
  .bn-account-slot { flex: none; }
  .bn-nav ~ .bn-account-slot { min-width: 44px; margin-left: .2rem; }
  /* "Sign in" as the avatar's twin: a 34px brass ring round a white person icon, in a 44px button. */
  .bn-account-signin { display: grid; place-items: center; width: 44px; min-width: 0; height: 44px; padding: 0;
    border-radius: 50%; box-shadow: none;
    background: radial-gradient(circle, transparent 15px, var(--bn-brass-brand) 15.5px 16.5px, transparent 17px);
    font-size: 0; overflow: hidden; }
  .bn-account-signin:hover { background: radial-gradient(circle, color-mix(in srgb, var(--bn-brass-brand) 18%, transparent) 15px,
    var(--bn-brass-brand) 15.5px 16.5px, rgba(255, 255, 255, .16) 17px); }
  .bn-account-signin::after { content: ""; position: absolute; inset: 0; margin: auto; width: 16px; height: 16px; background: currentColor;
    -webkit-mask: var(--bn-person-icon) center / contain no-repeat; mask: var(--bn-person-icon) center / contain no-repeat; }
}
@media (max-width: 389px) {
  .bn-nav ~ .bn-account-slot { min-width: 40px; margin-left: 0; }
  .bn-account-btn, .bn-account-signin { position: relative; width: 40px; height: 40px; overflow: visible; }
  .bn-account-btn::before, .bn-account-signin::before { content: ""; position: absolute; inset: -2px; height: auto; transform: none; }
}
:root { --bn-person-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21a8 8 0 0 1 16 0'/%3E%3C/svg%3E"); }

/* The header's popovers (the account menu, the theme choice): right-aligned to their button and
   8px below the bar. The button is centred in the bar, so half the bar below its centre is the
   bar's bottom edge, whatever the button's height. */
.bn-menu { position: absolute; right: 0; top: calc(50% + var(--bn-header-h) / 2 + 8px); z-index: 50; min-width: 15rem;
  max-width: calc(100vw - 2rem); box-sizing: border-box; background: var(--bn-popover-bg); color: var(--bn-text);
  border: 1px solid var(--bn-popover-line); border-radius: 12px; padding: 6px; box-shadow: 0 14px 36px var(--bn-popover-shadow);
  font-family: var(--bn-body); }
/* The account menu: a fixed 280px, so a long name or email is cut short with "…", never widening it. */
.bn-account-menu { width: 280px; min-width: 0; }
.bn-menu-who { display: flex; align-items: center; gap: 12px; padding: 10px 10px 12px; }
.bn-menu-who-text { display: grid; gap: 2px; min-width: 0; }
.bn-menu-who-text strong { font: 600 1rem/1.25 var(--bn-body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bn-menu-who-text span { color: var(--bn-muted); font: .875rem/1.25 var(--bn-body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bn-menu-sep { height: 1px; background: var(--bn-popover-line); margin: 6px 4px; }
.bn-menu-item { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 40px; box-sizing: border-box; padding: 0 10px;
  border: 0; border-radius: 8px; background: none; color: var(--bn-text); font: 500 1rem var(--bn-body); text-align: left;
  text-decoration: none; cursor: pointer; }
.bn-menu-item:hover, .bn-menu-item:focus { background: var(--bn-popover-row); outline: none; }
.bn-menu-item svg { color: var(--bn-muted); flex: none; }

/* The theme button (Theme/vue/theme_menu.js), signed in or out: borderless, its icon the
   setting. With no nav links (the player screen) it's what pushes the controls to the right. */
.bn-theme { position: relative; display: flex; align-items: center; flex: none; }
.bn-brand + .bn-theme { margin-left: auto; }
.bn-theme ~ .bn-account-slot { margin-left: 0; }
.bn-theme-btn { position: relative; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0;
  border-radius: 8px; background: transparent; color: #e8e6df; cursor: pointer; }
.bn-theme-btn:hover, .bn-theme-btn[aria-expanded="true"] { background: rgba(255, 255, 255, .16); }
.bn-theme-btn:focus-visible { outline: 2px solid var(--bn-brass-brand); outline-offset: 2px; }
.bn-theme-btn::before { content: ""; position: absolute; inset: -2px; } /* a 44px tap target */
/* Its popover: Light / Dark / Match system (theme_options.js), real radios in a fieldset. */
.bn-theme-popover { width: 232px; min-width: 0; }
/* Signed out, Settings: a gear beside the theme button (site_header.js); under 360px there's no room
   for it, so the theme popover links there instead. */
.bn-theme-more { display: none; }
@media (max-width: 359px) {
  .bn-settings-btn { display: none; }
  .bn-theme-more { display: block; }
}
.bn-theme-options { margin: 0; padding: 0; border: 0; min-width: 0; }
.bn-menu-legend { padding: 8px 10px 6px; color: var(--bn-muted); font: 600 .75rem/1 var(--bn-body); letter-spacing: .08em;
  text-transform: uppercase; }
.bn-theme-option { display: flex; align-items: center; gap: 12px; min-height: 40px; padding: 0 10px; border-radius: 8px;
  color: var(--bn-text); font: 500 1rem var(--bn-body); cursor: pointer; }
.bn-theme-option span { flex: 1; }
.bn-theme-option svg { flex: none; color: var(--bn-muted); }
.bn-theme-option input { flex: none; width: 16px; height: 16px; margin: 0; accent-color: var(--bn-btn-fill); cursor: pointer; }
.bn-theme-option:hover, .bn-theme-option:has(input:checked) { background: var(--bn-popover-row); }
.bn-theme-option input:focus-visible { outline: none; }
.bn-theme-option:has(input:focus-visible) { outline: 2px solid var(--bn-brass); outline-offset: -2px; }
@media (min-width: 390px) and (max-width: 600px) {
  .bn-theme-btn { width: 44px; height: 44px; }
  .bn-theme-btn::before { content: none; }
}