/* ===== Live on-screen companion (DEC-381..DEC-384), built on the glass system (glass.css) =====
   The dock never captures clicks except its own toggle, and sits above the bottom HUD and the touch controls
   (--cmp-bottom / --cmp-top are measured by src/companion/controller.ts). No inline styles (CSP). */

.cmp {
  position: fixed; z-index: 26; left: 0; right: 0; margin-inline: auto; inline-size: fit-content;
  bottom: calc(var(--cmp-bottom, 0px) + 12px + env(safe-area-inset-bottom));
  display: flex; align-items: flex-end; gap: 8px; pointer-events: none;
  max-inline-size: min(600px, calc(100vw - 16px));
}
.cmp[data-pos="top"] { bottom: auto; top: calc(var(--cmp-top, 0px) + 10px); align-items: flex-start; }
.cmp[data-pos="start"] { margin: 0; left: auto; right: auto; inset-inline-start: max(12px, env(safe-area-inset-left)); }
.cmp[data-pos="end"] { margin: 0; left: auto; right: auto; inset-inline-end: max(12px, env(safe-area-inset-right)); flex-direction: row-reverse; }
/* Menus and screens: a small dock in the bottom corner on the end side, clear of the centred cards' main content. */
.cmp[data-kind="screen"] { margin: 0; left: auto; right: auto; top: auto; inset-inline-end: max(14px, env(safe-area-inset-right)); bottom: calc(14px + env(safe-area-inset-bottom));
  flex-direction: row-reverse; max-inline-size: min(440px, calc(100vw - 28px)); }
body:has(#companion:not([hidden])[data-kind="screen"]) .screen { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
/* Results on the screen (a sport's result table): the prompt moves to the bottom corner on the end side, like on
   screens, so it never covers the rows (the online trials' own rows are often last, O1). */
body.has-results .cmp[data-kind="hud"] { margin: 0; left: auto; right: auto; top: auto; inset-inline-end: max(14px, env(safe-area-inset-right));
  bottom: calc(14px + env(safe-area-inset-bottom)); flex-direction: row-reverse; max-inline-size: min(300px, calc(100vw - 28px)); }
body.has-results .cmp[data-kind="hud"] .cmp-text { font-size: var(--ws-fs-xs); }
/* On narrow screens the result panel spans the width, so it leaves room for the dock below (it scrolls inside). On
   wider screens the panel (≤ 560 px, start side) and the dock (≤ 300 px, end corner) sit side by side. */
@media (max-width: 900px) { body.has-results:has(#companion:not([hidden])[data-kind="hud"]) #proto-results-inner { max-height: calc(100vh - 70px - 104px - env(safe-area-inset-bottom)); } }
body.has-results .proto-help { display: none; }

.cmp-toggle {
  position: relative; pointer-events: auto; flex: 0 0 auto; inline-size: 40px; block-size: 40px; min-height: 40px; padding: 0;
  border-radius: 50%; font-size: 1.1rem; font-weight: 900; line-height: 1;
  background-color: var(--ws-surface-strong); border-color: var(--ws-edge-strong); color: var(--ws-gold-300);
}
:root[data-glass="full"] .cmp-toggle { -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.cmp[data-mode="none"] .cmp-toggle { opacity: 0.78; }
.cmp-toggle.cmp-toast { z-index: 2; }
.cmp-toggle.cmp-toast::after {
  content: attr(data-toast); position: absolute; bottom: calc(100% + 8px); inset-inline-start: 50%; transform: translateX(-50%); white-space: nowrap;
  background: var(--ws-surface-strong); color: var(--ws-text-strong); border: 1px solid var(--ws-edge); border-radius: var(--ws-radius-pill);
  padding: 4px 10px; font-size: var(--ws-fs-xs); font-weight: 700; box-shadow: var(--ws-shadow-2);
}
[dir="rtl"] .cmp-toggle.cmp-toast::after { transform: translateX(50%); }
@media (pointer: coarse) { .cmp-toggle { inline-size: 44px; block-size: 44px; min-height: 44px; } }

.cmp-panel {
  pointer-events: none; min-width: 0; padding: 10px 14px; border-radius: var(--ws-radius-l);
  background-color: var(--ws-surface-strong); border: 1px solid var(--ws-edge); box-shadow: var(--ws-shadow-3); color: var(--ws-text-strong);
  transition: opacity var(--ws-dur-3) var(--ws-ease-out);
}
:root[data-glass="full"] .cmp-panel { -webkit-backdrop-filter: blur(var(--ws-blur)) saturate(var(--ws-saturate)); backdrop-filter: blur(var(--ws-blur)) saturate(var(--ws-saturate)); }
.cmp-panel[data-mode="hint"], .cmp-panel[data-mode="compact"] { padding: 6px 10px; border-radius: var(--ws-radius-m); }
.cmp-panel[data-mode="compact"] { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cmp-panel[data-mode="compact"] .cmp-glyphs { margin-top: 0; }
.cmp-panel[data-mode="compact"] .cmp-cap { font-size: 0.92rem; }
.cmp-panel[data-kind="mistake"] { border-color: rgba(255, 140, 120, 0.85); }
.cmp-panel[data-kind="success"] { border-color: rgba(120, 240, 170, 0.8); }
.cmp-panel[data-kind="offer"] { border-color: var(--ws-aqua-400); }
.cmp-faded { opacity: 0; }

.cmp-head { display: flex; align-items: center; gap: 8px; }
.cmp-text { margin: 0; font-size: var(--ws-fs-m); font-weight: 700; line-height: 1.3; }
.cmp-word { font-size: var(--ws-fs-s); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 800; }
.cmp-tick, .cmp-alert { display: inline-grid; place-items: center; flex: 0 0 auto; inline-size: 1.6em; block-size: 1.6em; border-radius: 50%; font-weight: 900; }
.cmp-tick { background: #2fd27a; color: #00210f; }
.cmp-alert { background: #ff8a78; color: #2a0600; }

.cmp-glyphs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 6px; direction: ltr; }
.cmp-panel[data-mode="hint"] .cmp-glyphs { margin-top: 2px; }
.cmp-panel[data-mode="hint"] .cmp-text + .cmp-glyphs { margin-top: 4px; }
.cmp-group { display: inline-flex; gap: 4px; align-items: center; }
.cmp-sep { color: var(--ws-text-muted); font-size: var(--ws-fs-xs); font-weight: 700; }
.cmp-cap {
  display: inline-grid; place-items: center; min-inline-size: 2.1em; block-size: 2.1em; padding: 0 0.45em; unicode-bidi: isolate;
  font-family: var(--ws-font-mono); font-size: 1.05rem; font-weight: 800; color: #fff; border-radius: 8px;
}
.cmp-cap-key { background: linear-gradient(180deg, #34465c, #1d2a3a); border: 1px solid rgba(255, 255, 255, 0.35); border-bottom-width: 4px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45); }
.cmp-cap-pad { border-radius: 50%; min-inline-size: 2.1em; padding: 0; background: #1b2633; border: 3px solid #c8d2dc; }
.cmp-cap-pad:not([data-btn]) { border-radius: 10px; padding: 0 0.5em; font-size: 0.9rem; }
.cmp-cap-pad[data-btn="A"] { border-color: #3ccf6e; }
.cmp-cap-pad[data-btn="B"] { border-color: #ff6b6b; }
.cmp-cap-pad[data-btn="X"] { border-color: #4aa3ff; }
.cmp-cap-pad[data-btn="Y"] { border-color: #ffd23d; }
.cmp-cap-touch { font-family: var(--ws-font-ui); font-size: 0.95rem; border-radius: var(--ws-radius-pill); padding: 0 0.8em 0 0.5em; background: rgba(255, 255, 255, 0.12); border: 2px solid rgba(255, 255, 255, 0.55); }
.cmp-cap-touch::before { content: ""; inline-size: 0.7em; block-size: 0.7em; border-radius: 50%; margin-inline-end: 0.4em; background: var(--ws-gold-400); box-shadow: 0 0 0 3px rgba(255, 194, 61, 0.35); }
.cmp-cap-touch { display: inline-flex; align-items: center; }
.cmp-cap-switch { font-family: var(--ws-font-ui); font-size: 0.95rem; background: #ffd400; color: #000; border: 2px solid #000; border-radius: var(--ws-radius-pill); padding: 0 0.8em; }
.cmp-cue { margin-inline-start: 4px; padding: 2px 10px; border-radius: var(--ws-radius-pill); font-size: var(--ws-fs-2xs); font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase;
  border: 1px solid currentColor; }
.cmp-cue-now { color: var(--ws-gold-300); }
.cmp-cue-wait { color: var(--ws-aqua-300); }
.cmp-cue-hold, .cmp-cue-release { color: var(--ws-ion-300); }
.cmp-cue-rhythm { color: #c9bcff; }
.cmp-warn { margin: 6px 0 0; font-size: var(--ws-fs-s); font-weight: 700; color: #ffc4b8; }
.cmp-warn::before { content: "⚠ "; }
.cmp-next { margin: 4px 0 0; font-size: var(--ws-fs-xs); color: var(--ws-text-muted); }

/* The key to press now pulses; with reduced motion it is a steady highlight instead (11 §11.7). */
.cmp-pulse .cmp-cap { animation: cmp-pulse 0.9s var(--ws-ease-out) infinite; }
@keyframes cmp-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 194, 61, 0.0), 0 2px 8px rgba(0, 0, 0, 0.45); } 50% { box-shadow: 0 0 0 5px rgba(255, 194, 61, 0.55), 0 2px 8px rgba(0, 0, 0, 0.45); } }
.cmp-steady .cmp-cap { outline: 3px solid var(--ws-gold-400); outline-offset: 2px; }
/* Touch: the on-screen control to press. */
.cmp-target { outline: 3px solid var(--ws-gold-400) !important; outline-offset: 4px; }
.cmp-target-pulse { animation: cmp-ring 1s var(--ws-ease-out) infinite; }
@keyframes cmp-ring { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 194, 61, 0.6); } 60% { box-shadow: 0 0 0 14px rgba(255, 194, 61, 0); } }
.reduced .cmp-pulse .cmp-cap, .reduced .cmp-target-pulse, .reduce-flash .cmp-pulse .cmp-cap, .reduce-flash .cmp-target-pulse { animation: none; }
@media (prefers-reduced-motion: reduce) { .cmp-pulse .cmp-cap, .cmp-target-pulse { animation: none; } .cmp-panel { transition: none; } }

/* High contrast (DEC-253). */
.hc .cmp-panel { background: #000 !important; border: 2px solid #fff !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
.hc .cmp-cap-key, .hc .cmp-cap-pad, .hc .cmp-cap-touch { background: #000; border-color: #fff; }
.hc .cmp-next, .hc .cmp-sep { color: #fff; }
.hc .cmp-warn { color: #ffd400; }

/* Phones: a compact panel. */
@media (max-width: 560px) {
  .cmp-panel { padding: 8px 10px; }
  .cmp-text { font-size: var(--ws-fs-s); }
  .cmp-cap { font-size: 0.95rem; }
  .cmp[data-kind="screen"] .cmp-next { display: none; }
}
@media (max-width: 560px), (max-height: 520px) {
  .cmp[data-kind="screen"] { max-inline-size: min(300px, calc(100vw - 28px)); }
  .cmp[data-kind="screen"] .cmp-text { font-size: var(--ws-fs-xs); }
  .cmp[data-kind="screen"] .cmp-cap { font-size: 0.85rem; }
}
/* The guided tour and the results take the screen: the screen dock hides under the tour panel. */
body.guide-open .cmp { display: none; }
.qa-hide-ui .cmp { visibility: hidden; }
/* Short screens (phones held sideways): the HUD dock stays compact so it fits between the top and bottom HUD
   boxes; the warning line goes (the call on screen and the screen reader still give it). */
@media (orientation: landscape) and (max-height: 480px) {
  /* Wide enough for the prompt on one line and every key picture on the next (the band between the HUD boxes is
     about 80 px on a 390 px screen; O2's sports have up to nine keys). */
  .cmp[data-kind="hud"] { max-inline-size: min(620px, calc(100vw - 16px)); }
  .cmp[data-kind="hud"] .cmp-panel { padding: 6px 10px; }
  .cmp[data-kind="hud"] .cmp-text { font-size: var(--ws-fs-xs); }
  .cmp[data-kind="hud"] .cmp-warn { display: none; }
  .cmp[data-kind="hud"] .cmp-cap { font-size: 0.8rem; }
}