/* ===== Presenter chrome — meta-chrome, deliberately distinct from the product =====
   Verbatim from SHOW-H_Presenter-Chrome_CC-Style-Handoff.md (CD bundle #40).
   Loaded after hm-brand.css so these #40 rules win over the #39 versions. Tokens
   (--fg-primary, --border-rule, --radius-pill, etc.) come from hm-brand.css. */

/* 1a — dark top bar */
.px-bar { position: sticky; top: 0; z-index: 60; background: #1c1c1d; color: #fff; }
.px-bar__in { max-width: 1480px; margin: 0 auto; display: flex; align-items: center; gap: 18px; padding: 11px 22px; flex-wrap: wrap; }
.px-bar .px-word { font-weight: 700; font-size: 14px; letter-spacing: -0.02em; }
.px-bar .px-sub { font-size: 11px; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: #9a9a9c; }
.px-tabs { display: inline-flex; background: #2c2c2e; border-radius: var(--radius-2); padding: 3px; gap: 2px; }
.px-tabs button { border: 0; background: transparent; color: #b6b6b8; font-size: 12px; font-weight: 600; padding: 7px 14px; border-radius: 4px; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; }
.px-tabs button.on { background: #fff; color: #1c1c1d; }
.px-tabs button i { font-size: 14px; }
.px-right { margin-left: auto; display: flex; align-items: center; gap: 14px; }

/* 1b — light chip rail */
.px-scn { background: #f3f3f1; border-bottom: 1px solid #d9d9d6; }
.px-scn__in { max-width: 1480px; margin: 0 auto; display: flex; align-items: center; gap: 12px; padding: 9px 22px; flex-wrap: wrap; }
.px-scn__k { font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-tertiary); }
.px-chiprow { display: inline-flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.px-chip { border: 1px solid var(--border-rule); background: #fff; color: var(--fg-secondary); font-size: 11.5px; font-weight: 600; padding: 5px 11px; border-radius: var(--radius-pill); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.px-chip:hover { background: var(--bg-hover-neutral); color: var(--fg-primary); }
/* Selected pills in the presenter chip rail (Account / Data / Screen) are pure
   black. Scoped to .px-scn + higher specificity so it wins over hm-brand's
   .px-chip.on (var(--fg-primary)) regardless of stylesheet order, and does not
   touch the cockpit's own .px-chip (e.g. the Track status filter). */
.px-scn .px-chip.on { background: #000; border-color: #000; color: #fff; }
.px-chip i { font-size: 13px; }
.px-div { width: 1px; height: 18px; background: #d2d2cf; }

/* 2 — browser-window frame */
.px-stage { padding: 28px 22px 80px; display: flex; justify-content: center; }
.dev-desk { width: 100%; max-width: 1260px; background: var(--bg-surface); border-radius: 6px; box-shadow: 0 32px 64px -12px rgba(0,0,0,0.35), 0 0 0 1px rgba(0,0,0,0.06); overflow: hidden; border: 1px solid #d7d7d4; }
.dev-desk__chrome { height: 38px; background: #f0f0ee; border-bottom: 1px solid var(--border-rule); display: flex; align-items: center; gap: 10px; padding: 0 0 0 14px; }
.dev-desk__url { flex: 1; background: #fff; border: 1px solid var(--border-rule); border-radius: 4px; height: 22px; display: flex; align-items: center; padding: 0 12px; font-size: 11px; color: var(--fg-tertiary); max-width: 420px; }
.dev-desk__url i { font-size: 12px; margin-right: 6px; color: var(--accent); }
/* Windows-style window controls — pushed to the right; close hovers red */
.dev-desk__winctl { margin-left: auto; display: flex; align-self: stretch; }
.dev-desk__winbtn { width: 46px; display: flex; align-items: center; justify-content: center; color: var(--fg-tertiary); }
.dev-desk__winbtn i { font-size: 12px; }
.dev-desk__winbtn:hover { background: var(--bg-hover-neutral); }
.dev-desk__winbtn--close:hover { background: #e81123; color: #fff; }
.appview { background: var(--bg-page); height: 812px; overflow: hidden; }

/* ===== Scenario mode — top-right label + dedicated control panel ===== */
/* Top-right: active scenario name + the constant "Demonstration data" label. */
.px-scnname { font-size: 12px; font-weight: 600; color: #fff; letter-spacing: -0.01em; }
.px-scnname + .px-demolbl::before { content: ''; }
.px-demolbl { font-size: 11px; color: #9a9a9c; }
/* Discreet sign-out, top-right of the always-visible Presentation Mode bar. Understated so it
   can't be mis-clicked during a walkthrough; brightens only on hover. */
.px-signout { display: inline-flex; align-items: center; gap: 5px; background: transparent; border: 0; padding: 4px 6px; border-radius: 5px; font-family: inherit; font-size: 11px; color: #9a9a9c; cursor: pointer; }
.px-signout:hover { color: #f2f2f2; background: rgba(255, 255, 255, 0.08); }
.px-signout i { font-size: 13px; }

/* The scenario panel is the same chip rail, faintly tinted so it reads as scenario chrome. */
.px-scn--scenario { background: #eef3ef; border-bottom-color: #cfdcd2; }

/* Reset scenario — amber so it plainly signals a re-seed, not a passive nav. */
.px-scn .px-chip--reset { border-color: #E6C79B; color: #8a5a1a; }
.px-scn .px-chip--reset:hover { background: #FCF3E5; color: #6a4410; }
.px-scn .px-chip--reset:disabled { opacity: 0.6; cursor: default; }

/* Timeline run — the staged-play control relocated into the panel as harness chrome. */
.px-play { display: inline-flex; align-items: center; gap: 10px; background: #fff; border: 1px solid var(--border-rule); border-radius: var(--radius-pill); padding: 4px 14px 4px 4px; min-width: 340px; }
.px-play__btn { flex: none; width: 30px; height: 30px; border-radius: 50%; border: 0; background: var(--accent); color: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: transform 120ms; }
.px-play__btn:hover:not(:disabled) { transform: scale(1.06); }
.px-play__btn:disabled { background: var(--border-strong); cursor: default; opacity: 0.7; }
.px-play__btn i { font-size: 14px; }
.px-play__mid { flex: 1; min-width: 0; }
.px-play__cap { font-size: 11px; font-weight: 600; color: var(--fg-primary); margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.px-play__track { height: 3px; border-radius: 999px; background: var(--bg-hover-neutral); overflow: hidden; }
.px-play__fill { display: block; height: 100%; background: var(--accent); border-radius: 999px; transition: width 120ms linear; }
.px-play__state { flex: none; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--fg-tertiary); }
.px-play--gate .px-play__btn { background: #E08A2B; }
.px-play--gate .px-play__fill { background: #E08A2B; }