/* Pixel history (src/client/history.ts): the reticle notice, the player and canvas history panel.
   New style: Rysana Mono everywhere, square corners, no shadows, one 1px muted stroke; white, ink, one blue. */
.xh-note, .xh-panel { --xh-ink: #111418; --xh-blue: #1D3BE0; --xh-muted: #6B7079; --xh-line: var(--stroke, #1114181F); --xh-soft: #F4F5F7;
  font: 500 12px/16px var(--mono, "Rysana Mono", ui-monospace, monospace); color: var(--xh-ink); border-radius: 0; box-shadow: none; }
.xh-note *, .xh-panel * { box-sizing: border-box; border-radius: 0; }
.xh-note button, .xh-panel button { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.xh-note button:focus-visible, .xh-panel button:focus-visible, .xh-range:focus-visible { outline: 1px solid var(--xh-blue); outline-offset: 1px; }
.xh-note[hidden], .xh-panel[hidden], .xh-panel [hidden] { display: none !important; }

/* the notice above the centre reticle: avatar, \u0040handle, when, the History button. Small and quiet: muted text on
   white, one 1px stroke. Pinned (right-click): a 1px stem down to its cell. */
.xh-note { position: absolute; z-index: 1; display: flex; align-items: center; gap: 5px; height: 22px; max-width: 240px; padding: 0 0 0 3px;
  background: #fff; border: 1px solid var(--xh-line); white-space: nowrap; pointer-events: none; user-select: none;
  font: 400 11px/14px var(--mono, "Rysana Mono", ui-monospace, monospace); color: var(--xh-muted); }
.xh-note .xh-av { width: 14px; height: 14px; }
/* Royal: the gold ring (gilt, BRIEF.md), small: white gap, gilt band, its inner line */
.xh-note .xh-av.royal { box-shadow: 0 0 0 1px #fff, 0 0 0 2px #F7C948, 0 0 0 2.5px #9A6E0A; margin: 0 1px 0 2px; }
.xh-note .xh-h { font-weight: 500; color: var(--xh-blue); text-decoration: none; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.xh-note a.xh-h[href]:hover { text-decoration: underline; text-underline-offset: 2px; }
.xh-note a.xh-h[href]:focus-visible { outline: 1px solid var(--xh-blue); outline-offset: 1px; }
.xh-note a.xh-h:not([href]) { color: #4A4F57; cursor: default; }
/* only the handle link and the History button take taps; the rest of the notice lets them through to the wall */
.xh-note a.xh-h[href], .xh-note .xh-ib { pointer-events: auto; }
.xh-note .xh-at { color: var(--xh-muted); flex-shrink: 0; }
/* the History button: 22 px drawn, a 32 px tap target (it reaches upward, away from the reticle) */
.xh-note .xh-ib { position: relative; width: auto; min-width: 22px; height: 20px; margin-left: 1px; gap: 4px; padding: 0 6px 0 5px; }
.xh-note .xh-rl { font-weight: 500; white-space: nowrap; }
.xh-note .xh-ib::after { content: ""; position: absolute; left: -4px; right: -5px; top: -10px; bottom: -1px; }
.xh-note .xh-ib svg { width: 12px; height: 12px; }
.xh-av { width: 20px; height: 20px; flex-shrink: 0; background: var(--xh-soft) center / cover no-repeat; outline: 1px solid #1114180F; outline-offset: -1px; }
.xh-av.royal { outline: none; box-shadow: 0 0 0 1px #fff, 0 0 0 3px #F7C948, 0 0 0 3.5px #9A6E0A; margin: 0 2px; }
.xh-ib { width: 30px; height: 30px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-left: 1px solid var(--xh-line) !important; color: var(--xh-muted) !important; }
.xh-ib:hover { color: var(--xh-blue) !important; background: var(--xh-soft) !important; }
.xh-stem { display: none; position: absolute; top: 100%; width: 1px; background: var(--xh-line); pointer-events: none; }
.xh-note.pinned .xh-stem { display: block; }
.xh-note.below .xh-stem { top: auto; bottom: 100%; }

/* the panel: header (avatar, title, count, Live, close), play + scrubber, playhead time and count */
.xh-panel { position: absolute; z-index: 5; left: 12px; right: 12px; bottom: 12px; display: flex; flex-direction: column; gap: 12px; padding: 14px;
  background: #fff; border: 0; box-shadow: 0 0 0 1px var(--xh-line); user-select: none; touch-action: none; }
/* mounted in the host's dock: it sits where the tray was */
.xh-panel.docked { position: relative; left: auto; right: auto; bottom: auto; }
.xh-head { display: flex; align-items: center; gap: 8px; min-height: 28px; }
.xh-panel .xh-av { width: 24px; height: 24px; }
.xh-title { font: 800 15px/18px var(--mono, "Rysana Mono", monospace); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.xh-sub { color: var(--xh-muted); white-space: nowrap; flex-shrink: 0; }
.xh-grow { flex: 1; }
.xh-live { display: flex; align-items: center; gap: 6px; height: 28px; padding: 0 8px !important; border: 1px solid var(--xh-line) !important; font-weight: 600 !important; }
.xh-live i { width: 6px; height: 6px; background: var(--xh-blue); }
.xh-live:hover { border-color: var(--xh-blue) !important; color: var(--xh-blue) !important; }
/* close: the same plain 28px X as every other sheet */
.xh-x { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; color: #4A4F57 !important; }
.xh-x:hover, .xh-x:active { background: var(--xh-soft) !important; }
.xh-row { display: flex; align-items: center; gap: 10px; }
.xh-play { width: 32px; height: 32px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: var(--xh-blue) !important; color: #fff !important; }
.xh-play:disabled { opacity: .35; cursor: default; }
.xh-play .xh-pa, .xh-panel.playing .xh-play .xh-pl { display: none; }
.xh-panel.playing .xh-play .xh-pa { display: block; }

/* scrubber: a 2px track, blue up to the playhead, a square thumb */
.xh-range { -webkit-appearance: none; appearance: none; flex: 1; min-width: 0; height: 32px; margin: 0; background: transparent; cursor: pointer; --p: 0%; }
.xh-range:disabled { opacity: .35; cursor: default; }
.xh-range::-webkit-slider-runnable-track { height: 2px; background: linear-gradient(to right, var(--xh-blue) var(--p), #E7E9EC var(--p)); }
.xh-range::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 12px; margin-top: -5px; background: #fff; border: 1px solid var(--xh-ink); border-radius: 0; }
.xh-range::-moz-range-track { height: 2px; background: #E7E9EC; }
.xh-range::-moz-range-progress { height: 2px; background: var(--xh-blue); }
.xh-range::-moz-range-thumb { width: 10px; height: 10px; background: #fff; border: 1px solid var(--xh-ink); border-radius: 0; }
.xh-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-left: 42px; color: var(--xh-muted); white-space: nowrap; }
.xh-when { color: var(--xh-ink); font-weight: 600; overflow: hidden; text-overflow: ellipsis; }

/* the map control (index.html #histBtn): ink, blue while history is open */
#histBtn { color: var(--ink, #111418); }
#histBtn.on { color: #1D3BE0; }

/* Save video (video.ts): the panel's button, the cover screen (progress, Cancel) and the done sheet */
.xh-vid { display: flex; align-items: center; gap: 6px; height: 32px; flex-shrink: 0; padding: 0 10px !important; border: 1px solid var(--xh-line) !important; font-weight: 600 !important; white-space: nowrap; }
.xh-vid:hover { border-color: var(--xh-blue) !important; color: var(--xh-blue) !important; }
.xh-vid:disabled { opacity: .35; cursor: default; }
@media (max-width: 340px) { .xh-vid span { display: none; } }
.scrim.xv { position: fixed; z-index: 40; }
.xv-sheet { gap: 12px; max-height: 100%; overflow-y: auto; }
.xv-make, .xv-done, .xv-post { display: flex; flex-direction: column; gap: 12px; }
.xv-make[hidden], .xv-done[hidden], .xv-post[hidden], .xv [hidden] { display: none !important; }
.xv-t { font: 900 22px/26px var(--mono); color: var(--ink); }
.xv-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.xv-head .x { margin: -4px -6px 0 0; flex-shrink: 0; }
.xv-bar { height: 6px; background: #E7E9EC; }
.xv-bar i { display: block; height: 100%; width: 0; background: #1D3BE0; }
.xv-pct { color: var(--muted); }
.xv-vid { display: block; width: 100%; max-width: min(100%, calc(100vh - 210px)); aspect-ratio: 1; align-self: center; background: #F4F5F7; box-shadow: 0 0 0 1px var(--stroke); object-fit: contain; }
.xv-body { font: 500 13px/18px var(--mono); color: var(--body); }
.xv .btn { flex: none; width: 100%; }
a.btn.ink { text-decoration: none; }
body:has(.scrim.xv:not([hidden])) .toast { z-index: 41; position: fixed; }