/* The universe's HUD (hud.mjs): glass panels over the 3D world. Deep navy glass, thin blue edges, a soft blue
   glow on what's lit or focused, nothing louder. Also the loading screen (drawn on the root itself, so it's up
   before any plugin has started) and the no-3D fallback (the core's markup, or the HUD's copy of it).
   Tokens (--u-blue, --u-text-2, --u-safe-*) come from universe.css on .u-root. Everything is prefixed u-. */

.u-ui {
  /* The app's tab bar sits over the bottom of the view on phones and tablets (app.css, under 900 px wide).
     The app can set --u-dock on the root (0px when the universe is laid out above the tab bar). */
  --u-dock-h: var(--u-dock, 0px);
  --u-x: calc(16px + var(--u-safe-left));
  --u-x-end: calc(16px + var(--u-safe-right));
  --u-y: calc(14px + var(--u-safe-top));
  --u-y-end: calc(14px + var(--u-safe-bottom) + var(--u-dock-h));
  --u-ring: inset 0 0 0 2px var(--u-blue-3, #8ab8ff), 0 0 0 3px rgba(0, 109, 255, .35), 0 0 22px rgba(0, 109, 255, .55);
  --u-lit: linear-gradient(180deg, rgba(0, 109, 255, .5), rgba(0, 109, 255, .26));
  --u-lit-edge: inset 0 0 0 1px rgba(138, 184, 255, .55), inset 0 1px 0 rgba(255, 255, 255, .2), 0 0 18px rgba(0, 109, 255, .42);
  --u-ok-dot: #3ddc84;
  --u-warn-dot: #f5a524; /* the brand's warn, lifted to read on dark glass (the app's dark theme does the same) */
  --u-bad-dot: #ff5b5b;
  --u-off-dot: #6e7683;
  position: absolute;
  inset: 0;
  color: var(--u-text, #fff);
  font: 500 14px/1.35 var(--u-font);
  letter-spacing: .003em;
  pointer-events: none;
}
@media (max-width: 899px) {
  .u-ui { --u-dock-h: var(--u-dock, var(--tabbar, 68px)); }
}
/* Full screen on the root: the tab bar isn't there. */
.u-root:fullscreen .u-ui { --u-dock-h: 0px; }
.u-root:-webkit-full-screen .u-ui { --u-dock-h: 0px; }

.u-ui [hidden] { display: none !important; }
.u-ui svg.i { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.u-ui button {
  font: inherit;
  color: inherit;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation; /* no double-tap zoom delay on the HUD's buttons */
}
.u-ui button:focus { outline: none; }
.u-ui button:focus-visible { box-shadow: var(--u-ring); }
.u-ui .stop { color: var(--u-blue, #006dff); }

/* ---------- glass ---------- */
.u-glass {
  position: relative;
  border: 1px solid rgba(138, 184, 255, .17);
  background: linear-gradient(180deg, rgba(16, 30, 62, .62), rgba(4, 9, 22, .6));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 18px 44px -14px rgba(0, 0, 0, .7);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
}
/* The thin glowing edge: a blue light catching the top-left and bottom-right of each panel. */
.u-glass::after {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: 0;
  padding: 1px;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(92, 157, 255, .62), rgba(92, 157, 255, 0) 32%, rgba(92, 157, 255, 0) 70%, rgba(92, 157, 255, .34));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
/* The low tier (and anyone who asks for less transparency) gets solid glass: blurring a canvas that redraws
   every frame is the most expensive thing on the page for a weak GPU. */
.u-root[data-tier="low"] .u-glass { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(5, 11, 26, .93); }
@media (prefers-reduced-transparency: reduce) {
  .u-glass { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(5, 11, 26, .95); }
}

/* ---------- status dots ---------- */
.u-dot {
  position: relative;
  width: 8px;
  height: 8px;
  flex: none;
  border-radius: 50%;
  background: var(--u-off-dot);
}
.u-dot.is-on { background: var(--u-ok-dot); box-shadow: 0 0 0 3px rgba(61, 220, 132, .14), 0 0 10px rgba(61, 220, 132, .55); }
.u-dot.is-warn { background: var(--u-warn-dot); box-shadow: 0 0 0 3px rgba(245, 165, 36, .16), 0 0 10px rgba(245, 165, 36, .5); }
.u-dot.is-offline { background: var(--u-bad-dot); box-shadow: 0 0 0 3px rgba(255, 91, 91, .14), 0 0 10px rgba(255, 91, 91, .45); }
.u-dot.is-off { background: var(--u-off-dot); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); }

/* ---------- top: views, tools, live ---------- */
.u-top {
  position: absolute;
  top: var(--u-y);
  left: var(--u-x);
  right: var(--u-x-end);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.u-modes {
  display: inline-flex;
  gap: 2px;
  padding: 4px;
  border-radius: 16px;
}
.u-mode {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 44px;
  min-height: 44px;
  padding: 0 16px 0 14px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--u-text-2);
  font-weight: 600;
  font-size: 14px;
  white-space: nowrap;
  cursor: pointer;
  transition: color .2s ease, background-color .2s ease;
}
.u-mode svg.i { width: 18px; height: 18px; opacity: .85; }
.u-mode:hover { color: #fff; background: rgba(138, 184, 255, .07); }
.u-mode[aria-pressed="true"] { color: #fff; }
.u-mode[aria-pressed="true"] svg.i { opacity: 1; color: var(--u-blue-3); }
/* The lit segment. Until it's measured, the pressed button lights itself. */
.u-modes:not(.has-glider) .u-mode[aria-pressed="true"] { background: var(--u-lit); box-shadow: var(--u-lit-edge); }
.u-modes:not(.has-glider) .u-mode[aria-pressed="true"]:focus-visible { box-shadow: var(--u-ring); }
.u-glider {
  position: absolute;
  z-index: 0;
  top: 4px;
  bottom: 4px;
  left: 0;
  width: var(--gw, 0);
  border-radius: 12px;
  background: var(--u-lit);
  box-shadow: var(--u-lit-edge);
  transform: translateX(var(--gx, 0));
  opacity: 0;
}
.u-modes.has-glider .u-glider { opacity: 1; }
.u-modes.is-gliding .u-glider { transition: transform .38s cubic-bezier(.2, .8, .2, 1), width .38s cubic-bezier(.2, .8, .2, 1); }

.u-actions { display: flex; align-items: stretch; gap: 10px; min-width: 0; } /* the pill as tall as the tools beside it */
.u-tools { display: flex; gap: 2px; padding: 4px; border-radius: 16px; }
.u-tool {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 44px;
  min-height: 44px;
  padding: 0 14px 0 12px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--u-text-2);
  font-weight: 600;
  font-size: 14px;
  white-space: nowrap;
  cursor: pointer;
  transition: color .2s ease, background-color .2s ease, box-shadow .2s ease;
}
.u-tool.is-icon { width: 44px; padding: 0; }
.u-tool:hover { color: #fff; background: rgba(138, 184, 255, .08); }
.u-tool[aria-pressed="true"], .u-tool[aria-expanded="true"] { color: #fff; background: var(--u-lit); box-shadow: var(--u-lit-edge); }
.u-tool[aria-pressed="true"]:focus-visible, .u-tool[aria-expanded="true"]:focus-visible { box-shadow: var(--u-ring); }

.u-live {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  padding: 0 16px 0 14px;
  border-radius: 999px;
  color: var(--u-text-2);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  min-width: 0;
}
.u-live-text { position: relative; z-index: 1; overflow: hidden; text-overflow: ellipsis; }
.u-tools { flex: none; }
.u-live[data-kind="warn"] { color: #ffd591; border-color: rgba(245, 165, 36, .3); }
.u-live[data-kind="down"] { color: var(--u-danger-text, #ff8f8f); border-color: rgba(255, 91, 91, .3); }
.u-live[data-kind="warn"]::after, .u-live[data-kind="down"]::after { opacity: .35; }
/* A slow ping on the live dot: the hub is talking to this app. */
.u-live[data-kind="ok"] .u-dot::after, .u-live[data-kind="warn"] .u-dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: inherit;
  animation: u-ping 2.4s cubic-bezier(0, 0, .2, 1) infinite;
}
@keyframes u-ping { 0% { transform: scale(1); opacity: .55; } 70%, 100% { transform: scale(2.8); opacity: 0; } }

/* ---------- bottom: the card, the hint, the rail ---------- */
.u-bottom {
  position: absolute;
  left: var(--u-x);
  right: var(--u-x-end);
  bottom: var(--u-y-end);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.u-card {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  grid-template-areas: "pic main" "pic acts";
  align-items: start;
  gap: 4px 18px;
  width: min(760px, 100%);
  padding: 12px;
  border-radius: 22px;
  animation: u-rise .32s cubic-bezier(.2, .8, .2, 1);
}
.u-card > * { position: relative; z-index: 1; }
@keyframes u-rise { from { opacity: 0; transform: translateY(14px) scale(.985); } }
.u-card.is-swap .u-card-main, .u-card.is-swap .u-card-pic img { animation: u-swap .28s ease-out; }
@keyframes u-swap { from { opacity: .25; } }

.u-card-pic {
  grid-area: pic;
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 13px;
  background: radial-gradient(120% 120% at 50% 30%, #0a1a3a, #010205 70%);
  box-shadow: inset 0 0 0 1px rgba(138, 184, 255, .16), 0 6px 20px -8px rgba(0, 0, 0, .8);
}
.u-card-pic img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  -webkit-user-drag: none;
}
/* A faint screen sheen, so the picture reads as a lit glass screen rather than a flat thumbnail. */
.u-card-pic::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(160deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, 0) 38%);
  box-shadow: inset 0 0 0 1px rgba(138, 184, 255, .18);
  pointer-events: none;
}
.u-nopic {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px;
  color: var(--u-text-2);
  font-size: 12.5px;
  font-weight: 600;
  text-align: center;
}
.u-nopic svg.i { width: 26px; height: 26px; color: var(--u-blue-2); opacity: .75; }
.u-card-pic[data-kind="off"] { background: radial-gradient(120% 120% at 50% 30%, #0b0d12, #010204 70%); }
.u-card-pic[data-kind="off"] .u-nopic { color: var(--u-text-3); }
.u-card-pic[data-kind="off"] .u-nopic svg.i { color: var(--u-text-3); }
.u-card-pic[data-kind="offline"] .u-nopic { color: var(--u-danger-text); }
.u-card-pic[data-kind="offline"] .u-nopic svg.i { color: var(--u-danger-text); }
.u-card-pic .u-age {
  position: absolute;
  left: 7px;
  bottom: 7px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px 3px 7px;
  border-radius: 999px;
  background: rgba(0, 6, 18, .72);
  box-shadow: inset 0 0 0 1px rgba(138, 184, 255, .2);
  color: #e6efff;
  font-size: 11px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.u-card-pic .u-age::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--u-ok-dot); box-shadow: 0 0 8px rgba(61, 220, 132, .7); }
.u-card-pic .u-age.is-old { color: #ffd591; }
.u-card-pic .u-age.is-old::before { background: var(--u-warn-dot); box-shadow: 0 0 8px rgba(245, 165, 36, .6); }

.u-card-main { grid-area: main; min-width: 0; padding-top: 2px; }
.u-card-head { display: flex; align-items: flex-start; gap: 8px; }
.u-card-name {
  flex: 1;
  min-width: 0;
  margin: 0;
  padding-top: 8px;
  overflow: hidden;
  color: #fff;
  font: 700 18px/1.2 var(--u-font);
  letter-spacing: -.012em;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.u-close {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: none;
  margin: -4px -4px 0 0;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--u-text-3);
  cursor: pointer;
  transition: color .2s ease, background-color .2s ease;
}
.u-close svg.i { width: 18px; height: 18px; }
.u-close:hover { color: #fff; background: rgba(138, 184, 255, .1); }
.u-card-meta {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 2px 0 0;
  color: var(--u-text-2);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
}
.u-card-meta > span:not(.u-dot) { overflow: hidden; text-overflow: ellipsis; }
.u-card-meta .u-dot { margin-right: 1px; }
.u-sep { color: var(--u-text-3); }
.u-card[data-status="offline"] [data-status] { color: var(--u-danger-text); }
.u-card-now {
  margin: 6px 0 0;
  overflow: hidden;
  color: var(--u-text-3);
  font-size: 13px;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.u-card-now b { color: #e6efff; font-weight: 600; }

.u-card-acts {
  grid-area: acts;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-self: end;
  padding-top: 10px;
}
.u-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-width: 44px;
  min-height: 44px;
  padding: 0 13px 0 11px;
  border: 1px solid rgba(138, 184, 255, .2);
  border-radius: 13px;
  background: rgba(255, 255, 255, .055);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease, opacity .18s ease, transform .12s ease;
}
.u-btn svg.i { width: 18px; height: 18px; }
.u-btn:hover { background: rgba(92, 157, 255, .15); border-color: rgba(138, 184, 255, .42); }
.u-btn:active { transform: scale(.97); }
.u-btn.is-primary {
  border-color: rgba(138, 184, 255, .7);
  background: linear-gradient(180deg, #2a86ff, #006dff 60%, #0060e6);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 0 0 1px rgba(0, 109, 255, .35), 0 8px 26px -8px rgba(0, 109, 255, .85);
}
.u-btn.is-primary:hover { background: linear-gradient(180deg, #3d91ff, #0a74ff 60%, #0066f0); }
.u-btn:focus-visible { box-shadow: var(--u-ring); }
.u-btn[aria-disabled="true"] { opacity: .42; cursor: not-allowed; }
.u-btn[aria-disabled="true"]:hover { background: rgba(255, 255, 255, .055); border-color: rgba(138, 184, 255, .2); }
.u-btn[aria-disabled="true"]:active { transform: none; }
.u-btn.is-busy { opacity: .6; cursor: progress; }
.u-btn.is-busy svg.i { animation: u-spin 1s linear infinite; }
@keyframes u-spin { to { transform: rotate(1turn); } }
.u-short { display: none; }

.u-hint {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 10px 18px 10px 14px;
  border-radius: 999px;
  color: var(--u-text-2);
  font-size: 13.5px;
  font-weight: 500;
  text-align: center;
}
/* Pixel stands about here while it talks to you: the hint steps aside. */
.u-ui.is-pixel-talking .u-hint { opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility 0s .25s; }
/* Walk can't be used in 360° or while editing: it stays in place (nothing beside it moves), dimmed. */
.u-tool.is-unavailable { opacity: .4; cursor: default; }
.u-tool.is-unavailable:hover { color: var(--u-text-2); background: none; }
/* A tap target ring before the words. */
.u-hint::before {
  content: "";
  position: relative;
  z-index: 1;
  width: 10px;
  height: 10px;
  flex: none;
  border-radius: 50%;
  border: 1.5px solid var(--u-blue-2);
  box-shadow: 0 0 10px rgba(0, 109, 255, .6), inset 0 0 6px rgba(92, 157, 255, .55);
}

.u-rail {
  max-width: min(100%, 1320px);
  padding: 0;
  border-radius: 999px;
}
.u-rail-track {
  position: relative;
  z-index: 1;
  display: flex;
  border-radius: inherit;
  gap: 4px;
  padding: 4px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.u-rail-track::-webkit-scrollbar { display: none; }
/* Soft edges where there's more to scroll to. */
.u-rail.is-overflow:not(.at-start):not(.at-end) .u-rail-track { -webkit-mask: linear-gradient(90deg, transparent, #000 32px, #000 calc(100% - 32px), transparent); mask: linear-gradient(90deg, transparent, #000 32px, #000 calc(100% - 32px), transparent); }
.u-rail.is-overflow.at-start:not(.at-end) .u-rail-track { -webkit-mask: linear-gradient(90deg, #000 calc(100% - 40px), transparent); mask: linear-gradient(90deg, #000 calc(100% - 40px), transparent); }
.u-rail.is-overflow.at-end:not(.at-start) .u-rail-track { -webkit-mask: linear-gradient(90deg, transparent, #000 40px); mask: linear-gradient(90deg, transparent, #000 40px); }
.u-chip {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  flex: none;
  min-height: 44px;
  padding: 0 15px 0 13px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: var(--u-text-2);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: color .18s ease, background-color .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.u-chip-where { color: var(--u-text-3); font-weight: 500; }
/* No room for where each TV hangs: names only (the card and the chip's label still say it). */
.u-rail.is-compact .u-chip-where { display: none; }
.u-chip:hover, .u-chip.is-hover { color: #fff; background: rgba(138, 184, 255, .09); }
.u-chip[aria-pressed="true"] { color: #fff; background: var(--u-lit); border-color: transparent; box-shadow: var(--u-lit-edge); }
.u-chip[aria-pressed="true"] .u-chip-where { color: var(--u-text-2); }
.u-chip[data-status="offline"]:not([aria-pressed="true"]) .u-chip-name { color: var(--u-danger-text); }
.u-chip[data-status="off"]:not([aria-pressed="true"]) .u-chip-name { color: var(--u-text-3); }
.u-chip:focus-visible, .u-chip[aria-pressed="true"]:focus-visible { box-shadow: var(--u-ring); }

/* While the editor runs it owns the bottom of the screen (and the pointer); while walking, the view is yours. */
.u-ui.is-editing .u-bottom, .u-ui.is-walking .u-bottom { display: none; }

/* ---------- arriving ---------- */
.u-ui .u-top, .u-ui .u-bottom { opacity: 0; transform: translateY(-6px); }
.u-ui .u-bottom { transform: translateY(8px); }
.u-ui.is-ready .u-top, .u-ui.is-ready .u-bottom { opacity: 1; transform: none; transition: opacity .6s ease .25s, transform .6s cubic-bezier(.2, .8, .2, 1) .25s; }
.u-ui.is-ready .u-bottom { transition-delay: .4s; }

/* ---------- help ---------- */
.u-help {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: grid;
  place-items: center;
  padding: calc(16px + var(--u-safe-top)) var(--u-x-end) calc(16px + var(--u-safe-bottom) + var(--u-dock-h)) var(--u-x);
}
.u-help-scrim {
  position: absolute;
  inset: 0;
  background: radial-gradient(90% 70% at 50% 40%, rgba(0, 22, 61, .5), rgba(0, 0, 0, .72));
  animation: u-fade .25s ease-out;
}
@keyframes u-fade { from { opacity: 0; } }
.u-help-panel {
  position: relative;
  width: min(940px, 100%);
  max-height: 100%;
  overflow: auto;
  overscroll-behavior: contain;
  padding: 22px 24px 24px;
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(14, 28, 60, .84), rgba(3, 8, 20, .86));
  outline: none;
  user-select: text;
  -webkit-user-select: text;
  animation: u-pop .3s cubic-bezier(.2, .8, .2, 1);
}
.u-help-panel > * { position: relative; z-index: 1; }
@keyframes u-pop { from { opacity: 0; transform: translateY(10px) scale(.98); } }
.u-help-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.u-help-head h2 { margin: 0; color: #fff; font: 800 24px/1.1 var(--u-font); letter-spacing: -.03em; }
.u-help-head .u-close { margin: -6px -10px 0 0; }
.u-help-lead { margin: 6px 0 18px; color: var(--u-text-2); font-size: 14px; }
.u-help-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; }
.u-help-more { margin: 16px 0 0; display: flex; justify-content: flex-start; }
.u-help-col { display: grid; gap: 12px; }
.u-help-block {
  padding: 14px 14px 10px;
  border: 1px solid rgba(138, 184, 255, .12);
  border-radius: 16px;
  background: rgba(255, 255, 255, .03);
}
.u-help-block h3 {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 8px;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .01em;
}
.u-help-block h3 svg.i { width: 18px; height: 18px; color: var(--u-blue-3); }
.u-help-block ul { margin: 0; padding: 0; list-style: none; }
.u-help-block li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  min-height: 34px;
  padding: 5px 0;
  border-top: 1px solid rgba(138, 184, 255, .08);
}
.u-help-block li:first-child { border-top: 0; }
.u-gesture { color: #e6efff; font-size: 13px; font-weight: 600; white-space: nowrap; }
.u-help-why { color: var(--u-text-2); font-size: 13px; text-align: right; }
.u-keys { display: inline-flex; gap: 4px; }
.u-ui kbd {
  display: inline-grid;
  place-items: center;
  min-width: 26px;
  height: 26px;
  padding: 0 7px;
  border: 1px solid rgba(138, 184, 255, .3);
  border-bottom-width: 2px;
  border-radius: 7px;
  background: rgba(92, 157, 255, .1);
  color: #fff;
  font: 600 12px/1 var(--u-font);
  box-shadow: 0 0 12px -4px rgba(0, 109, 255, .6);
}

/* ---------- no 3D: the core's .u-fallback (WebGL missing) and the HUD's copy of it ---------- */
.u-root .u-fallback {
  z-index: 12;
  background:
    radial-gradient(1px 1px at 12% 22%, rgba(255, 255, 255, .7), transparent 60%),
    radial-gradient(1px 1px at 78% 14%, rgba(255, 255, 255, .55), transparent 60%),
    radial-gradient(1.5px 1.5px at 64% 70%, rgba(138, 184, 255, .7), transparent 60%),
    radial-gradient(1px 1px at 30% 82%, rgba(255, 255, 255, .45), transparent 60%),
    radial-gradient(1px 1px at 90% 58%, rgba(255, 255, 255, .5), transparent 60%),
    radial-gradient(1.5px 1.5px at 6% 64%, rgba(138, 184, 255, .55), transparent 60%),
    radial-gradient(70% 55% at 50% 42%, rgba(0, 109, 255, .22), transparent 70%),
    radial-gradient(120% 90% at 50% 20%, #0a2259 0%, var(--u-navy, #00163d) 36%, #000 78%);
  pointer-events: auto;
}
.u-root .u-fallback-card {
  position: relative;
  max-width: 440px;
  padding: 30px 28px 28px;
  border: 1px solid rgba(138, 184, 255, .2);
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(16, 30, 62, .7), rgba(4, 9, 22, .74));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 0 0 1px rgba(0, 109, 255, .12), 0 24px 70px -18px rgba(0, 109, 255, .45);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  animation: u-pop .4s cubic-bezier(.2, .8, .2, 1);
}
.u-root .u-fallback-card::before {
  content: "";
  display: block;
  width: 56px;
  height: 56px;
  margin: 0 auto 18px;
  background: url("/brand/assets/logo/soudcoh-mark-blue.svg") center / contain no-repeat;
  filter: drop-shadow(0 0 16px rgba(0, 109, 255, .6));
}
.u-root .u-fallback h2 { font: 800 24px/1.15 var(--u-font); letter-spacing: -.03em; }
.u-root .u-fallback p { color: var(--u-text-2); }
.u-root .u-fallback .u-fallback-go {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 48px;
  min-width: 168px;
  padding: 0 22px;
  border: 1px solid rgba(138, 184, 255, .7);
  border-radius: 14px;
  background: linear-gradient(180deg, #2a86ff, #006dff 60%, #0060e6);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 0 0 1px rgba(0, 109, 255, .35), 0 10px 30px -8px rgba(0, 109, 255, .9);
  color: #fff;
  font: 600 15.5px/1 var(--u-font);
  cursor: pointer;
}
.u-root .u-fallback .u-fallback-go:hover { background: linear-gradient(180deg, #3d91ff, #0a74ff 60%, #0066f0); }
.u-root .u-fallback .u-fallback-go:focus-visible { outline: none; box-shadow: var(--u-ring, 0 0 0 2px #8ab8ff), 0 10px 30px -8px rgba(0, 109, 255, .9); }
.u-root .u-fallback .u-fallback-go svg.i { width: 19px; height: 19px; }
.u-ui.is-fallback > :not(.u-fallback) { display: none; }

/* ---------- loading: drawn on the root until the core marks it .is-ready ---------- */
/* Pseudo-elements of the root itself, so the screen is up the moment the root mounts (when the app links this
   file) or as soon as hud.mjs is imported, well before the plugins have finished starting. */
.u-root::before, .u-root::after {
  content: "";
  position: absolute;
  z-index: 20;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity .7s ease, visibility 0s linear .7s;
}
.u-root::before {
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 132px;
  background:
    url("/brand/assets/logo/soudcoh-mark-blue.svg") center calc(50% - 30px) / 64px 64px no-repeat,
    radial-gradient(38% 30% at 50% calc(50% - 30px), rgba(0, 109, 255, .26), transparent 70%),
    radial-gradient(120% 90% at 50% 32%, #04163d 0%, #01050f 46%, #000 78%);
  color: rgba(226, 236, 255, .58);
  content: "Entering the universe";
  font: 600 11.5px/1 var(--u-font, "SC Inter", system-ui, sans-serif);
  letter-spacing: .22em;
  text-transform: uppercase;
}
.u-root::after {
  left: 50%;
  top: calc(50% + 28px);
  width: 168px;
  height: 2px;
  margin-left: -84px;
  border-radius: 2px;
  background:
    linear-gradient(90deg, transparent, #8ab8ff 45%, #006dff 70%, transparent) -70% 0 / 45% 100% no-repeat,
    rgba(138, 184, 255, .14);
  box-shadow: 0 0 14px rgba(0, 109, 255, .45);
}
.u-root:not(.is-ready):not(.is-fallback)::before,
.u-root:not(.is-ready):not(.is-fallback)::after { opacity: 1; visibility: visible; transition: none; }
.u-root:not(.is-ready):not(.is-fallback)::after { animation: u-load 1.5s cubic-bezier(.45, 0, .55, 1) infinite; }
@keyframes u-load { to { background-position: 170% 0, 0 0; } }

/* ---------- tablets and small laptops: icons only on the tools ---------- */
@media (max-width: 899px) {
  .u-tool-label { display: none; }
  .u-tool { width: 44px; padding: 0; }
  .u-chip-where { display: none; }
  .u-card { grid-template-columns: 196px minmax(0, 1fr); gap: 4px 16px; }
}

/* ---------- phones (portrait) ---------- */
@media (max-width: 599px) {
  .u-ui { --u-x: calc(10px + var(--u-safe-left)); --u-x-end: calc(10px + var(--u-safe-right)); --u-y: calc(8px + var(--u-safe-top)); --u-y-end: calc(10px + var(--u-safe-bottom) + var(--u-dock-h)); }
  .u-top { flex-direction: column; align-items: stretch; gap: 8px; }
  .u-modes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-radius: 15px; }
  .u-mode { gap: 6px; padding: 0 4px; font-size: 13px; }
  .u-mode svg.i { width: 17px; height: 17px; }
  .u-actions { justify-content: space-between; }
  .u-live { padding: 0 14px 0 13px; font-size: 12.5px; }
  .u-tools { padding: 3px; border-radius: 15px; }

  .u-bottom { gap: 8px; }
  .u-card {
    grid-template-columns: 116px minmax(0, 1fr);
    grid-template-areas: "pic main" "acts acts";
    gap: 10px 12px;
    width: 100%;
    padding: 10px;
    border-radius: 20px;
  }
  .u-card-pic { border-radius: 10px; }
  .u-nopic { gap: 4px; padding: 4px; font-size: 10.5px; }
  .u-nopic svg.i { width: 20px; height: 20px; }
  .u-card-pic .u-age { left: 4px; bottom: 4px; gap: 4px; padding: 2px 6px 2px 5px; font-size: 10px; }
  .u-card-pic .u-age::before { width: 5px; height: 5px; }
  .u-card-main { padding-top: 0; }
  .u-card-name { padding-top: 5px; font-size: 16px; }
  .u-close { margin: -6px -6px 0 0; }
  .u-card-meta { margin-top: 0; font-size: 12.5px; }
  .u-card-now { margin-top: 3px; font-size: 12.5px; }
  .u-card-acts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; padding-top: 0; }
  .u-btn { flex-direction: column; gap: 3px; min-height: 52px; padding: 6px 2px 5px; border-radius: 12px; font-size: 11.5px; }
  .u-btn svg.i { width: 19px; height: 19px; }
  .u-long { display: none; }
  .u-short { display: inline; }

  .u-hint { padding: 9px 15px 9px 12px; font-size: 13px; }
  .u-rail { width: 100%; max-width: 100%; }
  .u-chip { padding: 0 13px 0 11px; font-size: 12.5px; }

  .u-help { align-items: end; padding: calc(10px + var(--u-safe-top)) 8px calc(8px + var(--u-safe-bottom) + var(--u-dock-h)); }
  .u-help-panel { padding: 18px 16px 16px; border-radius: 22px; }
  .u-help-head h2 { font-size: 21px; }
  .u-help-lead { margin-bottom: 14px; font-size: 13px; }
  .u-help-grid, .u-help-col { grid-template-columns: 1fr; gap: 10px; }
  .u-live[data-kind="warn"] .u-live-word { display: none; }
}

/* ---------- short screens (a phone on its side): keep the middle of the view clear ---------- */
@media (max-height: 520px) and (min-width: 600px) {
  .u-ui { --u-y: calc(8px + var(--u-safe-top)); --u-y-end: calc(8px + var(--u-safe-bottom) + var(--u-dock-h)); }
  .u-bottom { gap: 6px; }
  /* One row: picture, name and status, then the four actions as icons (each keeps its spoken label). */
  .u-card {
    grid-template-columns: 124px minmax(0, 1fr) auto;
    grid-template-areas: "pic main acts";
    align-items: center;
    gap: 0 14px;
    width: min(760px, 100%);
    padding: 8px;
    border-radius: 18px;
  }
  .u-card-pic { border-radius: 10px; }
  .u-nopic { gap: 3px; font-size: 10.5px; }
  .u-nopic svg.i { width: 20px; height: 20px; }
  .u-card-pic .u-age { left: 4px; bottom: 4px; padding: 2px 6px 2px 5px; font-size: 10px; }
  .u-card-main { padding-top: 0; }
  .u-card-head { align-items: center; }
  .u-card-name { padding-top: 0; font-size: 15.5px; }
  .u-close { width: 40px; height: 40px; margin: -4px -2px -4px 0; }
  .u-card-meta { font-size: 12.5px; }
  .u-card-now { margin-top: 1px; font-size: 12.5px; }
  .u-card-acts { flex-wrap: nowrap; align-self: center; gap: 6px; padding-top: 0; }
  .u-card-acts .u-btn { width: 44px; padding: 0; }
  .u-card-acts .u-btn span { display: none; }
  .u-ui.has-card .u-rail { display: none; }
}

/* ---------- reduced motion: things appear, nothing slides, pings or sweeps ---------- */
@media (prefers-reduced-motion: reduce) {
  .u-ui .u-top, .u-ui .u-bottom, .u-ui.is-ready .u-top, .u-ui.is-ready .u-bottom { transform: none; transition: opacity .2s linear; }
  .u-modes.is-gliding .u-glider { transition: none; }
  .u-card, .u-card.is-swap .u-card-main, .u-card.is-swap .u-card-pic img, .u-help-panel, .u-help-scrim, .u-root .u-fallback-card { animation: none; }
  .u-live .u-dot::after { display: none; }
  .u-btn.is-busy svg.i { animation: none; }
  .u-btn:active { transform: none; }
  .u-root::before, .u-root::after { transition: none; }
  /* A still line, half full, instead of the sweep. */
  .u-root:not(.is-ready):not(.is-fallback)::after { animation: none; background: linear-gradient(90deg, #8ab8ff, #006dff) 0 0 / 50% 100% no-repeat, rgba(138, 184, 255, .14); }
}

/* ---------- Windows high contrast and other forced colours ---------- */
@media (forced-colors: active) {
  .u-glass, .u-btn, .u-chip, .u-mode, .u-tool { border: 1px solid ButtonText; }
  .u-mode[aria-pressed="true"], .u-tool[aria-pressed="true"], .u-chip[aria-pressed="true"] { outline: 2px solid Highlight; }
  .u-ui button:focus-visible { outline: 2px solid Highlight; outline-offset: 2px; }
}