webar/ui/hud.css

.loading-screen {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: radial-gradient(circle at 50% 42%, rgba(0, 122, 255, 0.22), rgba(0, 0, 0, 0.88) 58%);
}

.loading-screen.hidden,
.hidden {
  display: none !important;
}

.loading-card {
  width: clamp(288px, 92vw, 420px);
  padding: 24px;
  pointer-events: auto;
  text-align: center;
}

.loading-ring {
  width: 96px;
  height: 96px;
  margin: 0 auto 18px;
  border: 2px solid rgba(255, 255, 255, 0.16);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 1.2s linear infinite;
}

.caption {
  margin: 0 0 8px;
  color: var(--text-secondary);
  font: var(--font-caption);
  text-transform: uppercase;
}

.loading-card h1 {
  margin: 0 0 8px;
  font: var(--font-title1);
}

.loading-card p {
  margin: 0 0 18px;
  color: var(--text-secondary);
  font: var(--font-subheadline);
}

.progress-track {
  height: 4px;
  margin: 0 0 20px;
  overflow: hidden;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.12);
}

.progress-track span {
  display: block;
  width: 14%;
  height: 100%;
  border-radius: inherit;
  background: var(--accent);
  box-shadow: 0 0 18px var(--accent-glow);
  transition: width 0.25s ease;
}

.hud-toolbar {
  position: fixed;
  left: calc(12px + env(safe-area-inset-left));
  right: calc(12px + env(safe-area-inset-right));
  bottom: calc(14px + env(safe-area-inset-bottom));
  z-index: 15;
  display: flex;
  justify-content: center;
  gap: 8px;
  padding: 10px;
  pointer-events: auto;
  overflow-x: auto;
  scrollbar-width: none;
}

.hud-toolbar::-webkit-scrollbar {
  display: none;
}

.status-panel {
  position: fixed;
  top: calc(12px + env(safe-area-inset-top));
  left: calc(12px + env(safe-area-inset-left));
  right: calc(12px + env(safe-area-inset-right));
  z-index: 15;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding: 10px 12px;
  pointer-events: none;
}

.status-panel span {
  display: block;
  margin-bottom: 3px;
  color: var(--text-tertiary);
  font: var(--font-caption);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.status-panel strong {
  display: block;
  overflow: hidden;
  color: var(--accent);
  font: 500 12px/1.25 var(--font-mono);
  letter-spacing: 0.02em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.ar-panel {
  position: fixed;
  width: clamp(280px, 90vw, 400px);
  min-height: 220px;
  max-height: min(74vh, 640px);
  z-index: 12;
  padding: 18px;
  pointer-events: auto;
  transform: translate3d(16px, 96px, 0);
  transition: box-shadow 0.18s ease, transform 0.08s ease;
}

.ar-panel.active {
  box-shadow: var(--glass-shadow-deep), 0 0 42px var(--accent-glow);
}

.ar-panel header {
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-left: 34px;
}

.ar-panel h2 {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  font: var(--font-title3);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.panel-minimize {
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
}

.panel-body {
  max-height: calc(min(74vh, 640px) - 80px);
  overflow: auto;
  padding: 6px 2px 2px;
  scrollbar-width: thin;
}

.panel-body input,
.panel-body select,
.panel-body textarea {
  width: 100%;
  min-height: 46px;
  margin: 6px 0;
  padding: 12px 14px;
  border: 1px solid var(--separator);
  border-radius: 14px;
  outline: 0;
  background: rgba(0, 0, 0, 0.22);
  color: var(--text-primary);
}

.panel-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.panel-row {
  display: flex;
  gap: 8px;
  align-items: center;
}

.panel-action {
  min-height: 46px;
  padding: 10px 12px;
  border: 1px solid var(--glass-border);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-primary);
  cursor: pointer;
}

.panel-action:active {
  background: var(--glass-bg-active);
  transform: scale(0.98);
}

.panel-list {
  display: grid;
  gap: 8px;
  margin: 12px 0;
}

.model-card {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: center;
  min-height: 54px;
  padding: 10px;
  border: 1px solid var(--separator);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.06);
}

.model-card strong,
.model-card span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.model-card span {
  color: var(--text-secondary);
  font: var(--font-caption);
}

.sketchfab-panel {
  display: grid;
  gap: 8px;
  margin: 12px 0;
  padding: 12px;
  border: 1px solid var(--separator);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.05);
}

.sketchfab-panel strong {
  font: var(--font-headline);
}

.panel-note {
  margin: 0;
  color: var(--text-secondary);
  font: var(--font-footnote);
}

.inline-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.inline-row .panel-action {
  min-width: 72px;
}

.sketchfab-results {
  max-height: 280px;
  overflow: auto;
  padding-right: 2px;
}

.sketchfab-card {
  grid-template-columns: 68px minmax(0, 1fr);
  align-items: stretch;
}

.sketchfab-card img {
  width: 68px;
  height: 68px;
  align-self: center;
  border-radius: 12px;
  object-fit: cover;
  background: rgba(0, 0, 0, 0.32);
}

.sketchfab-card > div:first-of-type {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.sketchfab-card a {
  min-width: 0;
  overflow: hidden;
  color: var(--text-secondary);
  font: var(--font-caption);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.model-actions {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.link-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  text-decoration: none;
}

/* Claude Design pass (Part 38): webar/assistant-bubble.html.

   assistant-frontend-experience: "Give every assistant state a real visual identity —

   listening, thinking/processing, speaking, idle." The bubble had ONE appearance for all

   of them, so it could never say which was happening. */
.jarvis-bubble {
  position: fixed;
  left: 50%;
  bottom: calc(98px + env(safe-area-inset-bottom));
  z-index: 20;
  width: min(390px, calc(100vw - 24px));
  padding: 13px 40px 13px 15px;
  /* Was `pointer-events: none`, which made a long reply impossible to scroll, select or

     dismiss — the text was visible and completely inert. */
  pointer-events: auto;
  transform: translateX(-50%);
}

/* A long reply scrolls inside the bubble instead of growing without bound and pushing

   itself off-screen — the same class of overflow bug Part 30 found on Guardian. */
.jarvis-bubble p {
  max-height: 7.5em;
  overflow-y: auto;
}

.jarvis-bubble .bubble-x {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-secondary);
  font: 400 17px/1 var(--font);
  cursor: pointer;
}

.jarvis-bubble .bubble-x:hover,
.jarvis-bubble .bubble-x:focus-visible {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.12);
}

/* ---- state identities. Each is a different SHAPE and a different MOTION, so the state

   survives being seen in monochrome or by someone who cannot distinguish the hues. ---- */
.jarvis-bubble .state-glyph {
  display: inline-flex;
  align-items: flex-end;
  gap: 2px;
  height: 11px;
  margin-right: 6px;
  vertical-align: -1px;
}

.jarvis-bubble .state-glyph i {
  width: 2px;
  border-radius: 1px;
  background: currentColor;
}

/* LISTENING — an input meter that reacts, bars at differing heights */
.jarvis-bubble[data-state="listening"] span { color: var(--accent); }
.jarvis-bubble[data-state="listening"] .state-glyph i {
  animation: jb-level 0.9s ease-in-out infinite;
}
.jarvis-bubble[data-state="listening"] .state-glyph i:nth-child(1) { height: 40%; animation-delay: 0s; }
.jarvis-bubble[data-state="listening"] .state-glyph i:nth-child(2) { height: 80%; animation-delay: 0.12s; }
.jarvis-bubble[data-state="listening"] .state-glyph i:nth-child(3) { height: 55%; animation-delay: 0.24s; }
.jarvis-bubble[data-state="listening"] .state-glyph i:nth-child(4) { height: 95%; animation-delay: 0.36s; }
@keyframes jb-level { 0%, 100% { transform: scaleY(0.35); } 50% { transform: scaleY(1); } }

/* THINKING — an orbiting arc. Deliberately NOT a bar: a bar implies a known duration

   and the model's latency is not known in advance. */
.jarvis-bubble[data-state="thinking"] span { color: var(--warning, #ffb800); }
.jarvis-bubble[data-state="thinking"] .state-glyph {
  width: 11px;
  height: 11px;
  border: 1.5px solid rgba(255, 184, 0, 0.22);
  border-top-color: var(--warning, #ffb800);
  border-radius: 50%;
  animation: jb-spin 0.85s linear infinite;
}
.jarvis-bubble[data-state="thinking"] .state-glyph i { display: none; }
@keyframes jb-spin { to { transform: rotate(360deg); } }

/* SPEAKING — a travelling waveform, matching voice output */
.jarvis-bubble[data-state="speaking"] span { color: var(--success, #32d74b); }
.jarvis-bubble[data-state="speaking"] .state-glyph i {
  height: 100%;
  transform-origin: center;
  animation: jb-wave 1.1s ease-in-out infinite;
}
.jarvis-bubble[data-state="speaking"] .state-glyph i:nth-child(2) { animation-delay: 0.14s; }
.jarvis-bubble[data-state="speaking"] .state-glyph i:nth-child(3) { animation-delay: 0.28s; }
.jarvis-bubble[data-state="speaking"] .state-glyph i:nth-child(4) { animation-delay: 0.42s; }
@keyframes jb-wave { 0%, 100% { transform: scaleY(0.25); } 50% { transform: scaleY(1); } }

/* FAILED — no motion at all. Stillness is itself the signal, and it is the one state

   that must never look like work is still happening. */
.jarvis-bubble[data-state="failed"] {
  border-color: rgba(255, 59, 48, 0.45);
}
.jarvis-bubble[data-state="failed"] span { color: var(--destructive, #ff3b30); }
.jarvis-bubble[data-state="failed"] .state-glyph i { height: 100%; animation: none; }

@media (prefers-reduced-motion: reduce) {
  .jarvis-bubble .state-glyph,
  .jarvis-bubble .state-glyph i {
    animation-duration: 3s;
  }
}

.jarvis-bubble span {
  display: block;
  margin-bottom: 4px;
  color: var(--accent);
  font: 700 11px/1 var(--font);
  letter-spacing: 0.3em;
  text-transform: uppercase;
}

.jarvis-bubble p {
  margin: 0;
  color: var(--text-primary);
  font: var(--font-callout);
}

/*

  One fixed column holds both notice hosts, so notices stack instead of colliding.



  History, so the magic numbers don't come back: the hosts were positioned

  independently at top:78px and top:152px. The 78px was itself a fix — an error card

  used to land on top of the CAMERA / TRACKING / OMEGA readout and hide the very

  state a user needs while something is failing (.status-panel is fixed at top:12px,

  ~50px tall, so both hosts must clear ~78px). But 152px silently assumed an error

  card is never taller than 74px. A real one — the 8th Wall fallback-tracking

  message — measured 112px in a live session, so it ran under the wake-word banner

  and neither was fully readable.



  A column with a gap has no such assumption: the second notice starts wherever the

  first one actually ends, at any content length, in any language.

*/
#notice-stack {
  position: fixed;
  top: calc(78px + env(safe-area-inset-top));
  left: 12px;
  right: 12px;
  /* z-index deliberately not set here — index.html owns the compositor layer order

     for every overlay, and two files competing for it is how layers drift. */
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}

#error-host,
#banner-host {
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}

/* An empty host must not contribute its gap to the column. */
#error-host:empty,
#banner-host:empty {
  display: none;
}

/* Claude Design pass (Part 38): webar/error-banner-host.html.

   Error vs notice was carried by border-colour and box-shadow ALONE. Now four

   independent signals — thick left edge, icon shape, the kind in words, colour last. */
.error-panel,
.banner-panel {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 11px;
  width: min(520px, calc(100vw - 24px));
  margin: 0 auto 8px;
  padding: 12px 40px 12px 13px;   /* right pad clears the dismiss control */
  border-left-width: 3px;         /* SIGNAL 1 — thick edge */
  border-left-style: solid;
  pointer-events: auto;
}

.error-panel .panel-ico,
.banner-panel .panel-ico {        /* SIGNAL 2 — icon shape */
  flex: none;
  width: 17px;
  height: 17px;
  margin-top: 1px;
}

.error-panel strong,
.banner-panel strong {            /* SIGNAL 3 — the kind, in words */
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

/* SIGNAL 4 — colour, last, and never alone. */
.error-panel {
  border-color: rgba(255, 59, 48, 0.45);
  border-left-color: var(--destructive, #ff3b30);
  box-shadow: var(--glass-shadow), 0 0 28px var(--destructive-glow);
}

.error-panel .panel-ico,
.error-panel strong {
  color: var(--destructive, #ff3b30);
}

.banner-panel {
  border-left-color: var(--accent);
}

.banner-panel .panel-ico,
.banner-panel strong {
  color: var(--accent);
}

/* The dismiss control. There was none: a panel created with `timeout: 0` was permanent

   and the user could never clear it. 24px target with a generous hit area. */
.panel-x {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-secondary);
  font: 400 17px/1 var(--font);
  cursor: pointer;
}

.panel-x:hover,
.panel-x:focus-visible {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.12);
}

.error-panel strong,
.banner-panel strong {
  display: block;
  margin-bottom: 4px;
  font: var(--font-headline);
}

.error-panel p,
.banner-panel p {
  margin: 0;
  color: var(--text-secondary);
  font: var(--font-footnote);
}

.error-panel a {
  color: var(--text-primary);
}

.context-menu {
  position: fixed;
  z-index: 22;
  display: grid;
  gap: 6px;
  width: 190px;
  padding: 8px;
  pointer-events: auto;
}

.context-menu button {
  min-height: 42px;
  border: 0;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-primary);
}

.game-frame {
  width: 100%;
  height: 100%;
  border: 0;
  background: var(--bg-darker);
}

/* ============================================================================

   Part 32 — Claude Design pass: WebAR

   ----------------------------------------------------------------------------

   WebAR joined this flagship's tracked platforms in v16 and had never received a

   design pass. Part 31 recorded it as blocked because "ui/hud.css is not linked

   from index.html" — that premise is wrong: index.html:19 links it directly.

   Re-checked rather than carried forward, so the work went ahead.



   Two surfaces taken here, both chosen because every single session passes

   through them: the loading screen (the first thing any user ever sees) and the

   status panel (persistent for the whole AR session).



   Constraint that shapes all of it: this renders over a live camera feed on a

   mid-tier phone. Per spatial-design-principles.md, that means no heavy blur or

   post-processing in the compositing path, legible contrast against arbitrary

   real-world backdrops, and thumb-reachable primary actions.

   ========================================================================== */

/* ---- Loading screen ------------------------------------------------------ */

.loading-card {
  position: relative;
  animation: omega-load-in 420ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes omega-load-in {
  from { opacity: 0; transform: translateY(14px) scale(0.985); }
  to   { opacity: 1; transform: none; }
}

/* The same HUD corner brackets used on the exe panels and the Guardian

   composables, so all three platforms read as one product. */
.loading-card::before,
.loading-card::after {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  pointer-events: none;
  border-color: var(--omega-accent, #00d4ff);
  opacity: 0.6;
}

.loading-card::before {
  top: 0; left: 0;
  border-top: 2px solid; border-left: 2px solid;
}

.loading-card::after {
  bottom: 0; right: 0;
  border-bottom: 2px solid; border-right: 2px solid;
}

.loading-card .caption {
  letter-spacing: 0.22em;
  font-size: 11px;
  opacity: 0.75;
  color: var(--omega-accent, #00d4ff);
}

.loading-card h1 {
  position: relative;
  padding-bottom: 10px;
  letter-spacing: 0.02em;
}

/* Centred on the title it underlines. This was `left: 0` inside a `text-align: center`

   card, so it rendered as a stray cyan dash floating at the left edge rather than as the

   title's rail — clearly visible in knowledge/screens/webar/webar_01_access_gate.png. */
.loading-card h1::after {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  width: 48px;
  height: 2px;
  background: var(--omega-accent, #00d4ff);
  box-shadow: 0 0 10px rgba(0, 212, 255, 0.55);
  animation: omega-load-rail 3.4s ease-in-out infinite;
}

@keyframes omega-load-rail {
  0%, 100% { width: 48px; opacity: 0.9; }
  50%      { width: 70px; opacity: 1; }
}

/* Start AR is the single most important control in the product. It gets real

   presence and a thumb-reachable target — 48px minimum, per the touch-on-glass

   guidance: the user is holding a phone one-handed while walking. */
.loading-card .btn-primary {
  min-height: 48px;
  letter-spacing: 0.12em;
  transition: transform 120ms ease, box-shadow 120ms ease, filter 120ms ease;
  /* .btn-primary inherits color:var(--text-primary) — near-white on the cyan fill, which

     measures about 1.9:1. On the single most important control in the product, viewed on a

     phone outdoors. Dark ink on the same cyan measures about 11:1. */
  color: var(--bg-darker, #0A0A0F);
  font-weight: 700;
}

/* Disabled has to be visibly and actually disabled. A live-looking button that silently eats

   the tap is worse than no button: the user concludes the product is broken, not busy. */
.loading-card .btn-primary[disabled] {
  background: rgba(255, 255, 255, 0.10);
  color: rgba(255, 255, 255, 0.45);
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

.loading-card .btn-primary[disabled]:hover,
.loading-card .btn-primary[disabled]:active {
  transform: none;
  box-shadow: none;
}

/* Honest state on the ring: it spins only while work is genuinely in flight. The shipped

   build left `animation: spin` running unconditionally, so the card read

   "8th Wall engine loaded" underneath a still-turning spinner. */
.loading-ring.is-ready {
  animation: none;
  border-color: var(--success, #32D74B);
  box-shadow: 0 0 22px rgba(50, 215, 75, 0.28);
}

.loading-ring.is-ready::after {
  content: '';
  display: block;
  width: 26px;
  height: 14px;
  margin: 34px auto 0;
  border-left: 3px solid var(--success, #32D74B);
  border-bottom: 3px solid var(--success, #32D74B);
  transform: rotate(-45deg);
}

.loading-ring.is-error {
  animation: none;
  border-color: var(--destructive, #FF3B30);
  box-shadow: 0 0 22px rgba(255, 84, 112, 0.24);
}

.loading-card .btn-primary:hover,
.loading-card .btn-primary:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(0, 212, 255, 0.28);
}

.loading-card .btn-primary:active {
  transform: translateY(0) scale(0.985);
}

/* Camera consent, stated before the browser prompt fires. Left-aligned deliberately: it is

   the one block on this card that is read as a sentence rather than scanned as a label. */
.gate-consent {
  display: flex;
  gap: 9px;
  margin: 0 0 14px;
  padding: 10px 11px;
  text-align: left;
  border-radius: 12px;
  background: rgba(0, 212, 255, 0.10);
  border: 1px solid rgba(0, 212, 255, 0.20);
}

.gate-consent-icon {
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
  margin-top: 1px;
  color: var(--accent);
}

.loading-card .gate-consent p {
  margin: 0;
  font-size: 11.5px;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.80);
}

.loading-card .gate-foot {
  margin: 10px 0 0;
  font-size: 10.5px;
  color: var(--text-tertiary);
}

/* ---- Status panel -------------------------------------------------------- */

.status-panel {
  position: relative;
  transition: border-color 200ms ease;
}

.status-panel::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 12px; height: 12px;
  border-top: 2px solid var(--omega-accent, #00d4ff);
  border-left: 2px solid var(--omega-accent, #00d4ff);
  opacity: 0.5;
  pointer-events: none;
}

/* The label must stay quieter than the value, but it still has to be readable. It was

   --text-tertiary (already 0.85 alpha) with a further opacity: 0.65 on top, compounding to

   roughly 0.55 of a mid-grey — about 1.4:1 against the HUD, i.e. invisible on a phone in

   daylight. Setting the colour once, explicitly, instead of stacking two transparencies:

   this composites to ~7.7:1 while still reading as secondary next to the full-white value. */
.status-panel span {
  letter-spacing: 0.14em;
  font-size: 10px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
}

/* Values are the live signal — they get the weight, the labels stay quiet. */
.status-panel strong {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  transition: color 200ms ease;
}

/* State colouring is driven by the value the AR runtime actually writes, not by

   a timer — a HUD that shows "tracking" while tracking is dead is the exact

   dishonest-state failure the frontend skill names. Colour is always paired

   with the word itself, never carrying the meaning alone (accessibility). */
.status-panel strong[data-state="ok"]     { color: #48e08a; }
.status-panel strong[data-state="warn"]   { color: #ffb800; }
.status-panel strong[data-state="error"]  { color: #ff4d4f; }
.status-panel strong[data-state="idle"]   { color: rgba(255, 255, 255, 0.55); }

/* A live tick that breathes only while a state is genuinely active. */
.status-panel strong[data-state="ok"]::after {
  content: '';
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-left: 7px;
  border-radius: 50%;
  background: currentColor;
  vertical-align: middle;
  animation: omega-status-pulse 2.2s ease-in-out infinite;
}

@keyframes omega-status-pulse {
  0%, 100% { opacity: 1;   box-shadow: 0 0 0 0 rgba(72, 224, 138, 0.5); }
  50%      { opacity: 0.5; box-shadow: 0 0 0 5px transparent; }
}

@media (prefers-reduced-motion: reduce) {
  .loading-card { animation: none; }
  .loading-card h1::after { animation: none; width: 58px; }
  .loading-card .btn-primary { transition: none; }
  .status-panel strong[data-state="ok"]::after { animation: none; }
}

/* Part 40 Claude Design pass: webar/status-panel.html.

   hud.css already carried a data-state severity system (ok/warn/error/idle) whose own

   comment claimed the AR runtime drove it. Nothing ever set the attribute, so it was dead

   CSS and the panel always rendered flat accent. setStatus() now sets it. These rules add

   the signals that system lacked, so severity never rests on colour alone: a dot whose

   SHAPE differs per state, and weight on a fault. */
.status-panel strong {
  display: flex;
  align-items: center;
  gap: 6px;
}

.status-panel strong::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex: none;
  background: currentColor;
}

/* The colours are restated here, in the last block, because the base

   `.status-panel strong { color: var(--accent) }` rule was winning the cascade in the real

   page — measured in headless Chrome, not assumed: every severity computed to

   rgb(53,230,255) while weight and dot shape were already responding correctly. */
.status-panel strong[data-state="ok"]    { color: #48e08a; }
.status-panel strong[data-state="warn"]  { color: #ffb800; }
.status-panel strong[data-state="error"] { color: #ff4d4f; }
.status-panel strong[data-state="idle"]  { color: rgba(255, 255, 255, 0.55); }

/* warn: a HOLLOW ring, breathing slowly — visibly different in shape from ok/error */
.status-panel strong[data-state="warn"]::before {
  background: transparent;
  box-shadow: inset 0 0 0 1.5px currentColor;
  animation: status-breathe 2.2s ease-in-out infinite;
}

/* error: filled dot with a halo, and the value goes bold */
.status-panel strong[data-state="error"] {
  font-weight: 700;
}

.status-panel strong[data-state="error"]::before {
  box-shadow: 0 0 0 3px rgba(255, 77, 79, 0.24);
}

@keyframes status-breathe { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }

@media (prefers-reduced-motion: reduce) {
  .status-panel strong[data-state="warn"]::before { animation: none; }
}