/* =============================================================================
   Pulse: Bradawl's platform design system (Claude Design, "Pulse 01-15", 3 Nov 2026).
   One stylesheet for the frame (sidebar, top bar, demo banner, footer), the page header, cards, tables, filter
   chips, buttons, room states and the locked-screen pattern. Values are the designs' own. Usage: PULSE.md.
   Screen-only styles go in wwwroot/css/pulse/<screen>.css, never here.
   ============================================================================= */

:root {
  /* Surfaces */
  --pulse-bg:          #0e0c0a;   /* page */
  --pulse-side:        #0a0908;   /* sidebar, inputs */
  --pulse-surface:     #14110e;   /* top bar, cards, panels */
  --pulse-hover:       #15120e;   /* menu hover and current item */
  --pulse-row-hover:   #19150f;   /* table row hover */
  --pulse-detail:      #0f0d0b;   /* opened row detail */
  --pulse-tip-bg:      #2a241c;   /* tooltip, avatar */
  /* Lines */
  --pulse-line-side:   #221e19;
  --pulse-line:        #2a2620;   /* card and panel borders */
  --pulse-line-2:      #3a342b;   /* buttons, inputs, lock card */
  --pulse-line-row:    #1f1b16;   /* between table rows */
  /* Text */
  --pulse-ivory:       #f0e9db;   /* page title, card numbers */
  --pulse-head:        #ece4d4;   /* strong text */
  --pulse-text:        #c9c1b1;   /* body */
  --pulse-sub:         #9a9385;   /* subtitle, card labels, sub-menu */
  --pulse-dim:         #8b8477;   /* quiet text, icons */
  --pulse-faint:       #6f685c;   /* notes, placeholders */
  --pulse-faintest:    #5f594f;   /* chevrons, "none" */
  /* Accent */
  --pulse-amber:       #d9952a;   /* fills: primary buttons */
  --pulse-amber-hover: #e9a93a;
  --pulse-amber-2:     #efb350;   /* amber text, links, current item */
  --pulse-link-hover:  #f4c877;
  --pulse-on-amber:    #1b1307;
  --pulse-amber-line:  #5a4a2a;
  /* Signals */
  --pulse-green:       #4cc38a;
  --pulse-green-line:  #2f7a55;
  --pulse-red:         #e5534b;
  --pulse-red-line:    #6b2a26;
  --pulse-orange:      #f08a3e;
  --pulse-orange-line: #5a3a1e;
  --pulse-preview:     #c9a24f;
  /* Type */
  --pulse-sans:  'IBM Plex Sans', system-ui, sans-serif;
  --pulse-serif: 'Newsreader', Georgia, serif;
  --pulse-mono:  'IBM Plex Mono', monospace;
  /* Frame */
  --pulse-gutter: clamp(12px, 2vw, 24px);
  --pulse-side-w: 260px;
}

@keyframes bw-spin { to { transform: rotate(360deg); } }
@keyframes bw-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes bw-live { 0%, 100% { box-shadow: 0 0 0 0 rgba(229, 83, 75, .6); } 50% { box-shadow: 0 0 0 6px rgba(229, 83, 75, 0); } }
@keyframes bw-shimmer { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }

/* ── The page, inside the frame ─────────────────────────────────────────────── */

body.pulse-body {
  margin: 0; background: var(--pulse-bg); color: var(--pulse-text);
  font-family: var(--pulse-sans); font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased;
  --bs-body-bg: var(--pulse-bg); --bs-body-bg-rgb: 14, 12, 10; --bs-body-color: var(--pulse-text);
  --bs-paper-bg: var(--pulse-surface); --bs-paper-bg-rgb: 20, 17, 14;
  --bs-border-color: var(--pulse-line); --bs-heading-color: var(--pulse-head);
  --bs-link-color: var(--pulse-amber-2); --bs-link-color-rgb: 239, 179, 80; --bs-link-hover-color: var(--pulse-link-hover);
}
.pulse-body a { color: var(--pulse-amber-2); text-decoration: none; }
.pulse-body a:hover { color: var(--pulse-link-hover); text-decoration: underline; text-underline-offset: 3px; }

/* One visible ring for the keyboard, on every control the shell draws. Component styles still draw their own where they
   want to (the search field, the scope options, the row cards); this is the floor underneath them, so a plain button or
   link never takes focus silently. :where() keeps it at the weight of one class, so any component's own focus rule (an
   inset ring on a row, Live Campus's stroke) still wins. tabindex="-1" is a script's jump target, not a keyboard stop. */
.pulse-body :where(a, button, summary, input, select, textarea, [tabindex]:not([tabindex="-1"])):focus-visible {
  outline: 2px solid var(--pulse-amber-2);
  outline-offset: 2px;
}
/* The search field takes the keyboard (Ctrl+K) and its focus is drawn like every other stop's. */
.pulse-body .pulse-search-input:focus-visible { outline: 2px solid var(--pulse-amber-2); outline-offset: 2px; border-radius: 4px; }
/* A link inside a sentence is underlined, not only coloured: the brass sits close to the text's own colour, and a
   colour difference alone is not one everyone can see (axe: link-in-text-block). Buttons, tabs, chips and the menu are
   drawn as controls, not as words in a sentence, and keep their own look. */
.pulse-body p a, .pulse-body li a, .pulse-body dd a { text-decoration: underline; text-underline-offset: 3px; }
.pulse-body p a.pa-btn, .pulse-body p a.pulse-chip, .pulse-body li a.pulse-tab { text-decoration: none; }
.pulse-body *, .pulse-body *::before, .pulse-body *::after { box-sizing: border-box; }

.pulse-app { width: 100%; min-height: 100vh; display: flex; background: var(--pulse-bg); }
.pulse-col { flex: 1; min-width: 0; display: flex; flex-direction: column; position: relative; overflow-x: clip; }
.pulse-main { flex: 1; padding: 24px var(--pulse-gutter) 40px; }
.pulse-content { max-width: var(--pulse-width, 1320px); margin: 0 auto; display: flex; flex-direction: column; gap: 18px; }
.pulse-spacer { flex: 1; }
.pulse-footer { padding: 0 var(--pulse-gutter) 20px; font-size: 14px; color: var(--pulse-dim); }

/* Pages not yet redesigned keep their theme cards; sit them on the Pulse surfaces. */
.pulse-content > .row, .pulse-content .row { --bs-gutter-y: 1rem; }
.pulse-content .card { background-color: var(--pulse-surface); border: 1px solid var(--pulse-line); border-radius: 10px; box-shadow: none; }
.pulse-content .card-header { border-bottom-color: var(--pulse-line); }
.pulse-content .table { --bs-table-bg: transparent; --bs-table-border-color: var(--pulse-line-row); }
.pulse-content .alert { border-radius: 6px; }

/* ── Sidebar ────────────────────────────────────────────────────────────────── */

.pulse-side { width: var(--pulse-side-w); flex: none; background: var(--pulse-side); border-right: 1px solid var(--pulse-line-side); display: flex; flex-direction: column; position: relative; z-index: 30; }
.pulse-brand { height: 64px; display: flex; align-items: center; padding: 0 24px; border-bottom: 1px solid var(--pulse-line-side); }
.pulse-body .pulse-brand-link { display: flex; align-items: center; gap: 14px; font-weight: 600; font-size: 18px; color: var(--pulse-head); }
.pulse-body .pulse-brand-link:hover { color: var(--pulse-head); text-decoration: none; }
.pulse-logo { position: relative; width: 32px; height: 12px; display: block; flex: none; }
.pulse-logo > span:first-child { position: absolute; left: 0; right: 0; top: 5px; height: 2px; background: #e8e0d0; }
.pulse-logo > span:last-child { position: absolute; left: 10px; top: 0; width: 12px; height: 12px; border-radius: 50%; background: var(--pulse-amber); box-shadow: 0 0 10px rgba(239, 179, 80, .7); }

.pulse-nav { display: flex; flex-direction: column; padding: 14px 12px; gap: 2px; font-size: 15px; }
.pulse-nav-group { display: flex; flex-direction: column; gap: 2px; }
.pulse-body .pulse-nav-item {
  --ic: var(--pulse-dim);
  position: relative; display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 6px; color: var(--pulse-text);
}
.pulse-body .pulse-nav-item > div, .pulse-body .pulse-nav-subitem > div { min-width: 0; }
.pulse-body .pulse-nav-item:hover, .pulse-body .pulse-nav-item:focus-visible { background: var(--pulse-hover); color: var(--pulse-head); text-decoration: none; }
.pulse-body .pulse-nav-item.is-active { --ic: var(--pulse-amber-2); color: var(--pulse-amber-2); background: var(--pulse-hover); }
.pulse-nav-end { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.pulse-chev::before { content: "›"; color: var(--pulse-faintest); }
.pulse-nav-group.is-open > .pulse-nav-item .pulse-chev::before { content: "⌄"; color: var(--pulse-amber-2); }
.pulse-nav-sub { display: none; flex-direction: column; gap: 2px; }
.pulse-nav-group.is-open > .pulse-nav-sub { display: flex; }
.pulse-body .pulse-nav-subitem { position: relative; display: flex; align-items: center; gap: 12px; padding: 8px 12px 8px 40px; border-radius: 6px; color: var(--pulse-sub); font-size: 14px; }
.pulse-body .pulse-nav-subitem:hover, .pulse-body .pulse-nav-subitem:focus-visible { background: var(--pulse-hover); color: var(--pulse-head); text-decoration: none; }
.pulse-body .pulse-nav-subitem.is-active { color: var(--pulse-amber-2); }
.pulse-nav-subitem .pulse-nav-lock { margin-left: auto; }

/* The small lock (design 03) and its tooltip. */
.pulse-nav-lock { display: inline-flex; }
.pulse-lock-glyph { position: relative; width: 10px; height: 12px; display: inline-block; flex: none; }
.pulse-lock-glyph::before { content: ""; position: absolute; left: 2px; top: 0; width: 6px; height: 6px; border: 1.5px solid var(--pulse-dim); border-bottom: 0; border-radius: 4px 4px 0 0; }
.pulse-lock-glyph::after { content: ""; position: absolute; left: 0; top: 5px; width: 10px; height: 7px; border-radius: 2px; background: var(--pulse-dim); }
.pulse-tip {
  display: none; position: absolute; left: calc(100% + 10px); top: 50%; transform: translateY(-50%); white-space: nowrap;
  background: var(--pulse-tip-bg); color: var(--pulse-head); font-size: 12px; line-height: 1.5; padding: 6px 10px; border-radius: 5px;
  border: 1px solid var(--pulse-line-2); z-index: 40; pointer-events: none;
}
.pulse-nav-item:hover .pulse-tip, .pulse-nav-item:focus-visible .pulse-tip,
.pulse-nav-subitem:hover .pulse-tip, .pulse-nav-subitem:focus-visible .pulse-tip { display: block; }

/* ── Top bar ────────────────────────────────────────────────────────────────── */

.pulse-topbar-wrap { padding: 16px var(--pulse-gutter) 0; }
.pulse-topbar { display: flex; align-items: center; gap: 12px; height: 56px; padding: 0 16px; background: var(--pulse-surface); border: 1px solid var(--pulse-line); border-radius: 6px; }
.pulse-burger { display: flex; flex-direction: column; gap: 4px; padding: 8px; background: none; border: 0; cursor: pointer; }
.pulse-burger > span { width: 18px; height: 2px; background: var(--pulse-text); }
.pulse-topbar-name { font-weight: 600; color: var(--pulse-head); }
.pulse-search { flex: 1; display: flex; align-items: center; gap: 12px; min-width: 0; }
.pulse-search-icon { width: 16px; height: 16px; border: 2px solid var(--pulse-dim); border-radius: 50%; flex: none; position: relative; }
.pulse-search-icon::after { content: ""; position: absolute; right: -6px; bottom: -5px; width: 7px; height: 2px; background: var(--pulse-dim); transform: rotate(45deg); }
.pulse-search-box { flex: 1; min-width: 0; color: var(--pulse-dim); }
/* The search (the theme's autocomplete) draws its own button: make it the design's plain words. */
.pulse-search-box .aa-Autocomplete, .pulse-search-box .aa-DetachedSearchButton { width: 100%; }
.pulse-search-box .aa-DetachedSearchButton { background: none !important; border: 0 !important; padding: 0 !important; height: auto !important; box-shadow: none !important; justify-content: flex-start; }
.pulse-search-box .aa-DetachedSearchButtonIcon { display: none !important; }
.pulse-search-box .aa-DetachedSearchButtonPlaceholder { color: var(--pulse-dim) !important; font-size: 15px !important; padding: 0 !important; margin: 0 !important; }
.pulse-body a.pulse-your-demo {
  display: inline-flex; align-items: center; gap: 8px; min-height: 34px; padding: 0 12px; border-radius: 5px; border: 1px solid var(--pulse-amber-line);
  color: var(--pulse-amber-2); font-size: 14px; font-weight: 500; white-space: nowrap;
}
.pulse-body a.pulse-your-demo:hover { background: #1b1610; color: var(--pulse-amber-2); text-decoration: none; }
.pulse-play { width: 0; height: 0; border-left: 8px solid var(--pulse-amber-2); border-top: 5px solid transparent; border-bottom: 5px solid transparent; }
.pulse-avatar {
  position: relative; width: 36px; height: 36px; flex: none; border-radius: 50%; border: 0; padding: 0; cursor: pointer;
  background: var(--pulse-tip-bg); color: var(--pulse-amber-2); font-size: 13px; font-weight: 600; display: flex; align-items: center; justify-content: center;
}
.pulse-avatar-dot { position: absolute; right: -1px; bottom: -1px; width: 10px; height: 10px; border-radius: 50%; background: var(--pulse-green); border: 2px solid var(--pulse-surface); }
/* The account menu: closed until the initials are clicked (pulse.js), whether or not the theme's script has loaded. */
.pulse-account { position: relative; flex: none; }
.pulse-body .pulse-menu-pop { display: none; position: absolute; right: 0; left: auto; top: calc(100% + 8px); z-index: 1060; background: var(--pulse-surface); border: 1px solid var(--pulse-line-2); }
.pulse-body .pulse-account.is-open .pulse-menu-pop { display: block; }
.pulse-menu-pop .dropdown-divider { border-top: 1px solid var(--pulse-line); margin: 6px 0; opacity: 1; }
.pulse-menu-pop .dropdown-item { display: block; padding: 6px 10px; color: var(--pulse-text); text-decoration: none; }
.pulse-menu-pop .dropdown-item.active { color: var(--pulse-amber-2); background: var(--pulse-hover); }
/* The search's words before (or without) the theme's search script. */
.pulse-search-box:empty::before { content: attr(data-placeholder); color: var(--pulse-dim); font-size: 15px; }
.pulse-menu-pop {
  --bs-dropdown-bg: var(--pulse-surface); --bs-dropdown-border-color: var(--pulse-line-2); --bs-dropdown-link-color: var(--pulse-text);
  --bs-dropdown-link-hover-bg: var(--pulse-hover); --bs-dropdown-link-hover-color: var(--pulse-head); --bs-dropdown-link-active-bg: var(--pulse-hover);
  --bs-dropdown-link-active-color: var(--pulse-amber-2); --bs-dropdown-divider-bg: var(--pulse-line);
  min-width: 240px; padding: 8px; border-radius: 8px; box-shadow: 0 20px 60px rgba(0, 0, 0, .55); font-size: 14px;
}
.pulse-menu-pop .dropdown-item { border-radius: 5px; }
.pulse-pop-who { display: flex; flex-direction: column; padding: 6px 10px; }
.pulse-pop-name { color: var(--pulse-head); font-weight: 600; }
.pulse-pop-sub { color: var(--pulse-dim); font-size: 13px; }
.pulse-pop-signout { padding: 4px 6px; display: grid; }

/* ── Demo banner (design 03) ────────────────────────────────────────────────── */

.pulse-banner {
  margin: 12px var(--pulse-gutter) 0; padding: 8px 14px; border: 1px solid var(--pulse-amber-line); background: rgba(217, 149, 42, .08);
  border-radius: 6px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; font-size: 14px;
}
.pulse-banner-text { display: flex; align-items: center; gap: 8px; color: var(--pulse-head); }
.pulse-banner-dot { width: 7px; height: 7px; flex: none; border-radius: 50%; background: var(--pulse-amber-2); box-shadow: 0 0 8px rgba(239, 179, 80, .8); }
.pulse-body a.pulse-banner-back { display: inline-flex; align-items: center; min-height: 32px; padding: 0 10px; color: var(--pulse-amber-2); font-weight: 500; }
.pulse-body a.pulse-banner-go { display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px; border-radius: 5px; background: var(--pulse-amber); color: var(--pulse-on-amber); font-weight: 600; font-size: 13px; }
.pulse-body a.pulse-banner-go:hover { background: var(--pulse-amber-hover); color: var(--pulse-on-amber); text-decoration: none; }

/* ── Page header ────────────────────────────────────────────────────────────── */

.pulse-header { display: flex; flex-wrap: wrap; gap: 10px 24px; align-items: flex-end; justify-content: space-between; }
.pulse-header-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pulse-eyebrow { font-family: var(--pulse-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--pulse-amber-2); }
.pulse-body h1.pulse-title { margin: 0; font-family: var(--pulse-serif); font-weight: 400; font-size: clamp(32px, 4vw, 46px); line-height: 1.05; color: var(--pulse-ivory); }
.pulse-subtitle { margin: 0; color: var(--pulse-sub); }
.pulse-pill { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; padding: 0 12px; border-radius: 999px; border: 1px solid; font-size: 13px; }
.pulse-pill-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; }
.pulse-pill--current { color: var(--pulse-green); border-color: var(--pulse-green-line); }
.pulse-pill--stale { color: var(--pulse-amber-2); border-color: var(--pulse-amber-line); }
.pulse-header-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; padding: 0 12px; border-radius: 5px; background: var(--pulse-surface); border: 1px solid var(--pulse-line); font-size: 13px; color: var(--pulse-text); }

/* ── Cards and panels ───────────────────────────────────────────────────────── */

.pulse-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: 12px; }
.pulse-kpi { padding: 16px 18px; border: 1px solid var(--pulse-line); border-radius: 8px; background: var(--pulse-surface); display: flex; flex-direction: column; gap: 4px; }
.pulse-kpi--bad { border-color: var(--pulse-red-line); }
.pulse-kpi-label { font-family: var(--pulse-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--pulse-sub); }
.pulse-kpi-value { font-family: var(--pulse-serif); font-size: 38px; line-height: 1; color: var(--pulse-ivory); }
.pulse-kpi-of { font-family: var(--pulse-sans); font-size: 16px; color: var(--pulse-dim); }
.pulse-kpi-sub { font-size: 13px; color: var(--pulse-dim); }
.pulse-panel { border: 1px solid var(--pulse-line); border-radius: 10px; background: var(--pulse-surface); }
.pulse-panel--pad { padding: clamp(14px, 2vw, 20px); display: flex; flex-direction: column; gap: 12px; }
.pulse-panel-title { margin: 0; font-family: var(--pulse-sans); font-size: 17px; font-weight: 600; color: var(--pulse-head); }
.pulse-empty { padding: clamp(24px, 4vw, 40px); border: 1px solid var(--pulse-line); border-radius: 10px; background: var(--pulse-surface); display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; }
.pulse-empty h2 { margin: 0; font-family: var(--pulse-sans); font-size: 20px; font-weight: 600; color: var(--pulse-head); }
.pulse-empty p { margin: 0; max-width: 460px; }
.pulse-strip { border: 1px solid var(--pulse-line); border-left: 4px solid var(--pulse-red); border-radius: 8px; background: var(--pulse-surface); padding: 16px 18px; display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; justify-content: space-between; }
.pulse-strip--amber { border-left-color: var(--pulse-amber-2); }
.pulse-strip > p { flex: 1 1 420px; min-width: 0; margin: 0; color: var(--pulse-head); line-height: 1.55; }
.pulse-notice { display: flex; align-items: center; gap: 10px; margin: 0; padding: 10px 14px; border-radius: 6px; border: 1px solid var(--pulse-amber-line); background: rgba(239, 179, 80, .08); color: var(--pulse-amber-2); font-size: 14px; }
.pulse-notice::before { content: ""; width: 8px; height: 8px; flex: none; border-radius: 50%; background: currentColor; }
.pulse-allwell { display: flex; align-items: center; gap: 10px; margin: 0; color: var(--pulse-green); font-size: 15px; }
.pulse-skel { animation: bw-shimmer 1.6s ease-in-out infinite; }

/* ── Tables ─────────────────────────────────────────────────────────────────── */

.pulse-table-wrap { border: 1px solid var(--pulse-line); border-radius: 10px; background: var(--pulse-surface); overflow: hidden; }
.pulse-table-wrap--scroll { overflow-x: auto; }
.pulse-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.pulse-table th { padding: 10px 18px; border-bottom: 1px solid var(--pulse-line); font-family: var(--pulse-mono); font-size: 11px; font-weight: 400; letter-spacing: .1em; text-transform: uppercase; color: var(--pulse-dim); text-align: left; vertical-align: bottom; }
.pulse-table td { padding: 13px 18px; border-bottom: 1px solid var(--pulse-line-row); vertical-align: middle; color: var(--pulse-text); }
.pulse-table tbody tr:hover { background: var(--pulse-row-hover); }
.pulse-table tr.is-bad > td:first-child { box-shadow: inset 3px 0 0 var(--pulse-red); }
.pulse-table .pulse-strong { font-weight: 600; color: var(--pulse-head); }
.pulse-mono { font-family: var(--pulse-mono); font-size: 13px; }
.pulse-quiet { color: var(--pulse-dim); }
.pulse-none { color: var(--pulse-faintest); }
/* The designs' grid tables: set grid-template-columns on the head and rows. */
.pulse-grid-head { display: grid; gap: 14px; padding: 10px 18px; border-bottom: 1px solid var(--pulse-line); font-family: var(--pulse-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--pulse-dim); }
.pulse-grid-row { display: grid; gap: 14px; padding: 13px 18px; border-bottom: 1px solid var(--pulse-line-row); align-items: center; font-size: 14px; }
.pulse-grid-row:hover { background: var(--pulse-row-hover); }
.pulse-row-detail { padding: 12px 18px 16px 15px; border-top: 1px solid var(--pulse-line-row); background: var(--pulse-detail); font-size: 13px; animation: bw-in .2s ease both; }
.pulse-table-note { margin: 0; padding: 10px 18px; font-size: 12px; color: var(--pulse-faint); border-top: 1px solid var(--pulse-line-row); }
.pulse-sev { font-size: 11px; font-weight: 600; padding: 1px 6px; border-radius: 3px; border: 1px solid currentColor; vertical-align: middle; }
.pulse-sev--critical { color: var(--pulse-red); }
.pulse-sev--warning { color: var(--pulse-amber-2); }

/* ── Filter chips, inputs ───────────────────────────────────────────────────── */

.pulse-filters { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
.pulse-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.pulse-body .pulse-chip {
  min-height: 34px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--pulse-line-2); background: transparent; color: var(--pulse-text);
  font-size: 13px; font-weight: 500; cursor: pointer; display: inline-flex; align-items: center; gap: 4px;
}
.pulse-body .pulse-chip:hover { text-decoration: none; color: var(--pulse-head); }
.pulse-body .pulse-chip.is-active, .pulse-body .pulse-chip[aria-pressed="true"] { background: var(--pulse-amber-2); border-color: var(--pulse-amber-2); color: var(--pulse-on-amber); }
.pulse-chip-count { font-family: var(--pulse-mono); opacity: .7; }
.pulse-input { display: flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 12px; border-radius: 5px; border: 1px solid var(--pulse-line-2); background: var(--pulse-side); flex: 1 1 160px; max-width: 280px; }
.pulse-input::before { content: ""; width: 12px; height: 12px; flex: none; border: 1.5px solid var(--pulse-dim); border-radius: 50%; }
.pulse-input input { flex: 1; min-width: 0; background: none; border: 0; color: var(--pulse-head); font-size: 14px; outline: none; font-family: inherit; }
.pulse-input input::placeholder { color: var(--pulse-faint); }
.pulse-select { min-height: 38px; padding: 0 10px; border-radius: 5px; border: 1px solid var(--pulse-line-2); background: var(--pulse-side); color: var(--pulse-head); font-size: 14px; font-family: inherit; }

/* ── Buttons ────────────────────────────────────────────────────────────────── */

.pulse-body .pulse-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 38px; padding: 0 14px; border-radius: 5px;
  border: 1px solid var(--pulse-line-2); background: transparent; color: var(--pulse-head); font-family: inherit; font-size: 14px; font-weight: 500; cursor: pointer; white-space: nowrap;
}
.pulse-body .pulse-btn:hover { border-color: var(--pulse-amber); color: var(--pulse-amber-2); text-decoration: none; }
.pulse-body .pulse-btn--primary { border: 0; background: var(--pulse-amber); color: var(--pulse-on-amber); font-weight: 600; }
.pulse-body .pulse-btn--primary:hover { background: var(--pulse-amber-hover); color: var(--pulse-on-amber); }
.pulse-body .pulse-btn--sm { min-height: 34px; padding: 0 12px; }
.pulse-body .pulse-btn--block { width: 100%; }
.pulse-body .pulse-btn-big {
  display: flex; align-items: center; justify-content: center; width: 100%; min-height: 54px; padding: 0 20px; border-radius: 6px; border: 0;
  background: var(--pulse-amber); color: var(--pulse-on-amber); font-weight: 600; font-size: 16px; cursor: pointer; text-align: center; line-height: 1.35;
}
.pulse-body .pulse-btn-big:hover { background: var(--pulse-amber-hover); color: var(--pulse-on-amber); text-decoration: none; }
.pulse-body .pulse-link-btn { min-height: 36px; padding: 0; background: none; border: 0; color: var(--pulse-amber-2); font-family: inherit; font-size: inherit; font-weight: 500; cursor: pointer; }
.pulse-body .pulse-link-btn:hover { text-decoration: underline; }

/* ── Room states ────────────────────────────────────────────────────────────────
   <span class="pulse-state pulse-state--recording"><span class="pulse-state-icon"></span>Recording</span>
   <span class="pulse-dot pulse-state--offline"></span>                      (the 10px glowing dot) */

.pulse-state--idle       { --st: var(--pulse-dim);     --st-glow: rgba(139, 132, 119, .3); --st-bg: transparent;              --st-line: var(--pulse-line); }
.pulse-state--previewing { --st: var(--pulse-preview); --st-glow: rgba(201, 162, 79, .4);  --st-bg: transparent;              --st-line: var(--pulse-line); }
.pulse-state--recording  { --st: var(--pulse-red);     --st-glow: rgba(229, 83, 75, .5);   --st-bg: rgba(229, 83, 75, .15);   --st-line: var(--pulse-line); }
.pulse-state--complete   { --st: var(--pulse-green);   --st-glow: rgba(76, 195, 138, .4);  --st-bg: transparent;              --st-line: var(--pulse-line); }
.pulse-state--processing { --st: var(--pulse-amber-2); --st-glow: rgba(239, 179, 80, .45); --st-bg: transparent;              --st-line: var(--pulse-line); }
.pulse-state--stuck      { --st: var(--pulse-orange);  --st-glow: rgba(240, 138, 62, .45); --st-bg: transparent;              --st-line: var(--pulse-orange-line); }
.pulse-state--offline    { --st: var(--pulse-red);     --st-glow: rgba(229, 83, 75, .5);   --st-bg: rgba(229, 83, 75, .15);   --st-line: var(--pulse-red-line); }
.pulse-state--faulted    { --st: var(--pulse-red);     --st-glow: rgba(229, 83, 75, .5);   --st-bg: transparent;              --st-line: var(--pulse-red-line); }
.pulse-state { display: inline-flex; align-items: center; gap: 8px; color: var(--st); font-weight: 500; }
.pulse-state-icon { width: 18px; height: 18px; flex: none; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; line-height: 1; border: 1px solid var(--st); background: var(--st-bg); }
.pulse-state--idle .pulse-state-icon::before       { content: "○"; }
.pulse-state--previewing .pulse-state-icon::before { content: "◐"; }
.pulse-state--recording .pulse-state-icon::before  { content: "●"; }
.pulse-state--complete .pulse-state-icon::before   { content: "✓"; }
.pulse-state--processing .pulse-state-icon::before { content: "↻"; }
.pulse-state--stuck .pulse-state-icon::before      { content: "⏱"; }
.pulse-state--offline .pulse-state-icon::before    { content: "△"; }
.pulse-state--faulted .pulse-state-icon::before    { content: "!"; }
.pulse-state--recording .pulse-state-icon, .pulse-dot.pulse-state--recording { animation: bw-live 1.6s ease-out infinite; }
.pulse-dot { width: 10px; height: 10px; flex: none; border-radius: 50%; background: var(--st); box-shadow: 0 0 10px var(--st-glow); display: inline-block; }
.pulse-tone-green { color: var(--pulse-green); }
.pulse-tone-amber { color: var(--pulse-amber-2); }
.pulse-tone-orange { color: var(--pulse-orange); }
.pulse-tone-red { color: var(--pulse-red); }
.pulse-tone-dim { color: var(--pulse-dim); }

/* ── The locked-screen pattern (design 03) ──────────────────────────────────── */

.pulse-locked { position: relative; }
.pulse-locked-card-only { display: contents; }
.pulse-ghost { filter: blur(2.5px); opacity: .5; pointer-events: none; user-select: none; display: flex; flex-direction: column; gap: 16px; min-height: 560px; }
/* A page that ghosts its own content (as Pulse 06 does): <div class="pulse-locked pulse-locked--content"><div class="pulse-ghost">...</div>_ScreenLock</div> */
.pulse-locked--content .pulse-ghost { opacity: .45; min-height: 0; gap: 18px; }
.pulse-locked--content .pulse-lock-layer { padding: 60px 24px; }
.pulse-ghost .gb { display: block; height: 10px; border-radius: 3px; background: var(--pulse-line-2); }
.pulse-ghost .gb--faint { background: #2e2a24; }
.pulse-ghost .gv { display: block; height: 34px; border-radius: 4px; background: #4a4438; }
.pulse-ghost-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 12px; }
.pulse-ghost-card { padding: 18px; border: 1px solid var(--pulse-line); border-radius: 8px; background: var(--pulse-surface); display: flex; flex-direction: column; gap: 12px; }
.pulse-ghost-table { border: 1px solid var(--pulse-line); border-radius: 8px; background: var(--pulse-surface); overflow: hidden; }
.pulse-ghost-table-head, .pulse-ghost-table-row { display: grid; grid-template-columns: 1.6fr 1.2fr 1.2fr .8fr; gap: 16px; padding: 12px 18px; }
.pulse-ghost-table-head { border-bottom: 1px solid var(--pulse-line); font-family: var(--pulse-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--pulse-dim); }
.pulse-ghost-table-row { padding: 16px 18px; border-bottom: 1px solid var(--pulse-line-row); align-items: center; }
.pulse-ghost-table-row .gb, .pulse-ghost-table-row .gv { height: 12px; border-radius: 3px; }
.pulse-ghost-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.pulse-ghost-tile { padding: 16px; border: 1px solid var(--pulse-line); border-radius: 8px; background: var(--pulse-surface); display: flex; flex-direction: column; gap: 12px; }
.pulse-ghost-tile-head { display: flex; align-items: center; gap: 10px; }
.pulse-ghost-tile .pulse-dot { animation: none; }
.pulse-ghost-campus { position: relative; min-height: 560px; border: 1px solid var(--pulse-line); border-radius: 10px; background: #0b0a08; overflow: hidden; }
.pulse-ghost-campus-ground { position: absolute; inset: 0; perspective: 1100px; perspective-origin: 50% 25%; }
.pulse-ghost-campus-ground > div {
  position: absolute; left: 50%; top: 50%; width: 700px; height: 700px; margin: -350px 0 0 -350px; transform: rotateX(60deg) rotateZ(40deg);
  background-color: #100e0b; background-image: linear-gradient(rgba(217, 149, 42, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(217, 149, 42, .06) 1px, transparent 1px);
  background-size: 44px 44px; border: 1px solid rgba(217, 149, 42, .1);
}
.pulse-ghost-campus-ground span { position: absolute; border: 1px solid var(--pulse-line); }
.pulse-ghost-campus-ground span:nth-child(1) { left: 230px; top: 230px; width: 220px; height: 130px; background: #191511; }
.pulse-ghost-campus-ground span:nth-child(2) { left: 120px; top: 420px; width: 120px; height: 90px; background: var(--pulse-hover); }
.pulse-ghost-campus-ground span:nth-child(3) { left: 480px; top: 140px; width: 110px; height: 110px; background: var(--pulse-hover); }
.pulse-ghost-campus-fade { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 50%, transparent 30%, #0b0a08 95%); }
.pulse-ghost-campus-cards { position: absolute; right: 20px; top: 20px; display: flex; gap: 10px; }
.pulse-ghost-campus-cards span { width: 120px; height: 70px; border: 1px solid var(--pulse-line); border-radius: 6px; background: var(--pulse-surface); }
.pulse-ghost-campus-panel { position: absolute; left: 20px; bottom: 20px; width: 300px; height: 120px; border: 1px solid var(--pulse-line); border-radius: 6px; background: var(--pulse-surface); }

.pulse-lock-layer { position: absolute; inset: 0; display: flex; align-items: flex-start; justify-content: center; padding: 72px 24px; }
.pulse-lock-card {
  width: 100%; max-width: 560px; background: var(--pulse-surface); border: 1px solid var(--pulse-line-2); border-radius: 10px; padding: clamp(20px, 3vw, 32px);
  display: flex; flex-direction: column; gap: 16px; align-items: center; text-align: center; box-shadow: 0 20px 60px rgba(0, 0, 0, .55); animation: bw-in .3s ease both;
}
.pulse-lock-card[hidden] { display: none; }
.pulse-lock-card h2 { margin: 0; font-family: var(--pulse-sans); font-size: 22px; font-weight: 600; color: var(--pulse-head); line-height: 1.2; }
.pulse-lock-card p { margin: 0; color: var(--pulse-text); }
.pulse-lock-words p { text-wrap: pretty; }
.pulse-lock-words { display: flex; flex-direction: column; gap: 8px; }
.pulse-lock-icon { position: relative; width: 26px; height: 30px; display: inline-block; }
.pulse-lock-icon::before { content: ""; position: absolute; left: 5px; top: 0; width: 16px; height: 15px; border: 2.5px solid var(--pulse-amber-2); border-bottom: 0; border-radius: 9px 9px 0 0; }
.pulse-lock-icon::after { content: ""; position: absolute; left: 0; top: 13px; width: 26px; height: 17px; border-radius: 4px; background: var(--pulse-amber-2); }
.pulse-lock-ways { display: flex; flex-wrap: wrap; gap: 6px 22px; justify-content: center; font-size: 14px; }
.pulse-body .pulse-lock-ways > a { min-height: 36px; display: inline-flex; align-items: center; font-weight: 500; }
.pulse-lock-card--error { border-color: var(--pulse-line); gap: 14px; box-shadow: 0 20px 60px rgba(0, 0, 0, .5); }
.pulse-lock-card--error h2 { font-size: 20px; line-height: 1.5; }
.pulse-body .pulse-lock-card--error .pulse-btn-big { min-height: 52px; }
.pulse-lock-card--error .pulse-link-btn { min-height: 0; padding: 6px 0; }
.pulse-lock-checking { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 8px; background: var(--pulse-surface); border: 1px solid var(--pulse-line); color: var(--pulse-text); font-size: 14px; }
.pulse-spinner { display: inline-block; flex: none; width: 14px; height: 14px; border: 2px solid #4a4133; border-top-color: var(--pulse-amber-2); border-radius: 50%; animation: bw-spin .8s linear infinite; }

/* "Add this to your subscription" */
.pulse-ask { position: fixed; inset: 0; z-index: 1090; background: rgba(0, 0, 0, .6); display: flex; align-items: center; justify-content: center; padding: 20px; }
.pulse-ask[hidden] { display: none; }
.pulse-ask-panel { width: 100%; max-width: 440px; background: var(--pulse-surface); border: 1px solid var(--pulse-line-2); border-radius: 10px; padding: 24px; display: flex; flex-direction: column; gap: 14px; animation: bw-in .25s ease both; color: var(--pulse-text); text-align: left; }
.pulse-ask-panel p { margin: 0; }
.pulse-ask-top { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.pulse-ask-head { display: flex; flex-direction: column; gap: 4px; }
.pulse-ask-head h2 { margin: 0; font-family: var(--pulse-sans); font-size: 20px; font-weight: 600; color: var(--pulse-head); line-height: 1.5; }
.pulse-ask-panel .pulse-btn--sm { min-height: 36px; }
[data-ask-before] { display: flex; flex-direction: column; gap: 14px; }
[data-ask-before][hidden] { display: none; }
.pulse-body .pulse-btn--ask { min-height: 46px; padding: 0 18px; border-radius: 6px; }
.pulse-ask-note { font-size: 13px; color: var(--pulse-dim); }
.pulse-ask-done { padding: 12px 14px; border-radius: 6px; border: 1px solid var(--pulse-green-line); background: rgba(76, 195, 138, .08); color: var(--pulse-green); }

/* ── Phone ──────────────────────────────────────────────────────────────────── */

.pulse-phone-only { display: none; }
/* A menu item carries its own display, so the phone-only one says so with the same weight (order 71: the phone menu's
   Search; a desktop has the search field in the top bar instead). */
.pulse-body .pulse-nav-item.pulse-phone-only { display: none; }
@media (max-width: 991.98px) {
  .pulse-phone-only { display: flex; }
  .pulse-body .pulse-nav-item.pulse-phone-only { display: flex; }
  .pulse-desktop-only { display: none !important; }
  .pulse-side {
    position: fixed; left: 0; top: 0; bottom: 0; width: 300px; max-width: 85%; overflow: auto; z-index: 1080;
    transform: translateX(-105%); transition: transform .25s ease; padding: 2px 0;
  }
  .pulse-side .pulse-brand { display: none; }
  .pulse-side .pulse-nav { padding: 14px 12px; }
  .pulse-app.is-menu-open .pulse-side { transform: none; }
  .pulse-scrim { position: fixed; inset: 0; z-index: 1079; background: rgba(0, 0, 0, .6); }
  .pulse-scrim[hidden] { display: none; }
  /* The phone's slide-out lists the items by name (design 03), with the lock's words under a locked item instead of a tooltip. */
  .pulse-nav-item > span:first-child { display: none !important; }
  .pulse-body .pulse-nav-item, .pulse-body .pulse-nav-subitem { flex-wrap: wrap; row-gap: 2px; column-gap: 10px; }
  .pulse-nav-end { display: contents; }
  .pulse-chev { margin-left: auto; }
  .pulse-tip, .pulse-nav-item:hover .pulse-tip, .pulse-nav-subitem:hover .pulse-tip {
    display: block; position: static; transform: none; order: 10; flex-basis: 100%; padding: 0; background: none; border: 0;
    font-size: 12px; color: var(--pulse-dim); white-space: normal;
  }
  .pulse-body .pulse-nav-subitem { padding-left: 28px; }
  .pulse-nav-subitem .pulse-nav-lock { margin-left: 0; }
  .pulse-ghost { min-height: 360px; }
  .pulse-ghost-campus { min-height: 360px; }
  .pulse-lock-layer, .pulse-locked--content .pulse-lock-layer { padding: 24px 0; }
}

/* Design 03's own open screens (the lock preview's demo and unlocked states). */
.pulse-design-open { display: flex; flex-direction: column; gap: 16px; animation: bw-in .3s ease both; }
.pulse-kpi--03 { padding: 18px; gap: 6px; }
.pulse-kpi-value--40 { font-size: 40px; }
.pulse-kpi-label--row { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.pulse-kpi-tag { padding: 2px 8px; border-radius: 4px; background: var(--pulse-line); color: #b8b0a0; letter-spacing: 0; text-transform: none; font-family: var(--pulse-sans); font-size: 12px; }
.pulse-menu-pop, .pulse-lang { list-style: none; margin: 0; }
.pulse-lang { padding: 0; }

/* ── The new menu, tabs, search and scope (hi-fi and scale designs, 7 Nov 2026) ─────────────────────────────── */

/* The menu: four items, then Sources & settings at the foot. Icons are the designs' own, drawn in CSS. */
.pulse-nav--five { flex: 1; }
.pulse-nav-fill { flex: 1; }
.pulse-body .pulse-nav-item--foot { color: var(--pulse-sub); }
.pulse-ic { width: 16px; height: 16px; flex: none; position: relative; }
.pulse-ic--board { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; }
.pulse-ic--board > span { border: 1.5px solid var(--ic); border-radius: 2px; }
.pulse-ic--issues { display: flex; align-items: center; justify-content: center; }
.pulse-ic--issues > span { width: 0; height: 0; border-left: 8px solid transparent; border-right: 8px solid transparent; border-bottom: 14px solid var(--ic); }
.pulse-ic--estate > span { position: absolute; left: 2px; top: 2px; width: 12px; height: 12px; border: 1.5px solid var(--ic); transform: rotate(45deg) skew(10deg, 10deg); }
.pulse-ic--teaching { border: 1.5px solid var(--ic); border-top-width: 4px; border-radius: 3px; }
.pulse-ic--sources { border-radius: 50%; border: 3px dotted var(--ic); }
.pulse-ic--sources > span { position: absolute; left: 3px; top: 3px; width: 4px; height: 4px; border-radius: 50%; border: 1.5px solid var(--ic); }
.pulse-nav-badge { margin-left: auto; font-family: var(--pulse-mono); font-size: 12px; min-width: 20px; text-align: center; padding: 1px 6px; border-radius: 999px; border: 1px solid var(--pulse-red-line); color: var(--pulse-red); }

/* An old screen's tabs under its menu item: drawn like the Teaching event's tabs (amber pill for the open one). */
.pulse-tabs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; margin-bottom: 18px; padding: 10px 14px; border: 1px solid var(--pulse-line); border-radius: 8px; background: var(--pulse-surface); font-size: 14px; }
.pulse-tabs-group { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 4px; }
.pulse-tabs-label { font-family: var(--pulse-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--pulse-dim); margin-right: 6px; }
.pulse-body a.pulse-tab { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; color: var(--pulse-sub); text-decoration: none; }
.pulse-body a.pulse-tab:hover, .pulse-body a.pulse-tab:focus-visible { color: var(--pulse-head); background: var(--pulse-hover); }
.pulse-body a.pulse-tab.is-open { background: var(--pulse-amber-2); color: var(--pulse-on-amber); font-weight: 600; }
.pulse-tab .pulse-nav-lock { margin-left: 0; }

/* Search: the field, then the results panel under the top bar (scale design). */
.pulse-search { position: relative; align-self: stretch; }
.pulse-search-input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; color: var(--pulse-head); font: inherit; font-size: 15px; }
.pulse-search-input::placeholder { color: var(--pulse-dim); opacity: 1; }
.pulse-search-input::-webkit-search-cancel-button { filter: grayscale(1); }
.pulse-search-panel { position: absolute; left: -17px; right: -17px; top: calc(100% + 2px); z-index: 1050; padding: 18px; background: var(--pulse-surface); border: 1px solid var(--pulse-line); border-radius: 6px; box-shadow: 0 12px 32px rgba(0, 0, 0, .5); }
.pulse-search-panel[hidden] { display: none; }
.pulse-search-groups { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px 24px; }
.pulse-body .pulse-search-head { margin: 0 0 8px; font-family: var(--pulse-mono); font-size: 11px; font-weight: 400; letter-spacing: .1em; text-transform: uppercase; color: var(--pulse-sub); }
.pulse-search-hit { margin: 0 0 6px; color: var(--pulse-text); font-size: 14px; line-height: 1.45; }
.pulse-search-hit b { color: var(--pulse-head); font-weight: 600; }
.pulse-body .pulse-search-hit a { color: var(--pulse-amber-2); text-decoration: none; }
.pulse-search-state.is-bad { color: var(--pulse-red); }
.pulse-search-state.is-good { color: var(--pulse-green); }
.pulse-search-more, .pulse-search-hint, .pulse-search-foot { margin: 0; color: var(--pulse-dim); font-size: 13px; }
.pulse-search-foot { margin-top: 12px; }

/* Scope: the chip in the top bar and its menu (scale design). */
.pulse-scope { position: relative; flex: none; }
.pulse-scope-button { display: inline-flex; align-items: center; gap: 8px; min-height: 34px; padding: 0 12px; border-radius: 5px; border: 1px solid var(--pulse-line-2); background: none; color: var(--pulse-head); font: inherit; font-size: 14px; white-space: nowrap; cursor: pointer; }
.pulse-scope-label { font-family: var(--pulse-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--pulse-dim); }
.pulse-scope-current { max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
.pulse-scope-chev { color: var(--pulse-amber-2); font-size: 13px; }
.pulse-scope-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 1050; width: 380px; max-width: calc(100vw - 24px); max-height: 70vh; overflow: auto; padding: 16px 12px; background: var(--pulse-surface); border: 1px solid var(--pulse-line); border-radius: 6px; box-shadow: 0 12px 32px rgba(0, 0, 0, .5); }
.pulse-scope-menu[hidden] { display: none; }
.pulse-scope-head { margin: 8px 8px 6px; font-family: var(--pulse-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--pulse-sub); }
.pulse-scope-head:first-of-type { margin-top: 0; }
.pulse-scope-option { display: grid; grid-template-columns: minmax(0, 88px) minmax(0, 1fr); gap: 12px; width: 100%; padding: 8px; border: 0; border-radius: 5px; background: none; color: var(--pulse-text); font: inherit; font-size: 14px; text-align: left; cursor: pointer; }
.pulse-scope-option b { color: var(--pulse-head); font-weight: 600; overflow-wrap: anywhere; }
.pulse-scope-option span { color: var(--pulse-sub); }
.pulse-scope-option:hover, .pulse-scope-option:focus-visible, .pulse-scope-option.is-on { background: var(--pulse-hover); }
.pulse-scope-note { margin: 12px 8px 0; color: var(--pulse-dim); font-size: 13px; line-height: 1.5; }
@media (max-width: 991.98px) {
  .pulse-scope-label { display: none; }
  .pulse-scope-current { max-width: 120px; }
  .pulse-tabs { gap: 6px 12px; }
  .pulse-nav-badge { margin-left: auto; }
}
.pulse-nav-badge.is-zero { border-color: var(--pulse-line-2); color: var(--pulse-faintest); }

/* Phones: the top bar keeps the menu, the name, the scope and the initials; "Your demo" shrinks to its play mark
   (the words stay for screen readers). */
@media (max-width: 575.98px) {
  .pulse-your-demo { font-size: 0; gap: 0; padding-left: 10px; padding-right: 10px; }
}