/* Adapted from command-center/src/styles/status-look.css: the palette tokens
   and the .status-look chip are copied as written there, with two portal
   changes: the data-magic-theme selectors are dropped (the portal never sets
   that attribute) and :root:not([data-theme]) joins the light block (with no
   data-theme yet, before public/theme-boot.js runs or without scripts, the
   portal page is light). Keep the two in step; command-center
   scripts/check-status-look-parity.mjs compares them. The portal picks light
   or dark with html[data-theme]. Chips are drawn by statusLookHtml /
   statusLookNode in public/status-look.js. */
/* How a status looks (shared/status-look.mjs, 2026-10-21): one chip, one
   palette, light and dark, for Command Center, Tracking and Magic View. Loaded
   by both apps' globals.css. Magic View's own chips read the same tokens, so a
   state is the same colour on every page. Words on each chip fill reach 4.5:1
   (tests/status-look-contrast.test.mjs). */
:root,
:root[data-theme="dark"] {
  --status-green-bg: #1b3325; --status-green-line: #2f5a3e; --status-green-ink: #95e0aa;
  --status-blue-bg: #1a2c47; --status-blue-line: #2f4d78; --status-blue-ink: #a0c6ff;
  --status-violet-bg: #27234a; --status-violet-line: #443c7a; --status-violet-ink: #c5b8ff;
  --status-amber-bg: #3a2d16; --status-amber-line: #6b5226; --status-amber-ink: #f3c985;
  --status-red-bg: #42202a; --status-red-line: #733746; --status-red-ink: #ffa7b1;
  --status-gray-bg: #24262d; --status-gray-line: #393b44; --status-gray-ink: #b9bbc3;
}
[data-theme="light"],
:root:not([data-theme]) {
  --status-green-bg: #e6f3e8; --status-green-line: #accbb0; --status-green-ink: #22572f;
  --status-blue-bg: #e8f0fc; --status-blue-line: #b3c8e6; --status-blue-ink: #244e7e;
  --status-violet-bg: #efebff; --status-violet-line: #c7bce5; --status-violet-ink: #56408b;
  --status-amber-bg: #fff0d1; --status-amber-line: #d9be83; --status-amber-ink: #674711;
  --status-red-bg: #fce8eb; --status-red-line: #ddaeb8; --status-red-ink: #8a2a3c;
  --status-gray-bg: #efede8; --status-gray-line: #cdc7bc; --status-gray-ink: #504d46;
}
/* No saved choice: follow the device, as chat.css does (dark unless it prefers light). */
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    --status-green-bg: #e6f3e8; --status-green-line: #accbb0; --status-green-ink: #22572f;
    --status-blue-bg: #e8f0fc; --status-blue-line: #b3c8e6; --status-blue-ink: #244e7e;
    --status-violet-bg: #efebff; --status-violet-line: #c7bce5; --status-violet-ink: #56408b;
    --status-amber-bg: #fff0d1; --status-amber-line: #d9be83; --status-amber-ink: #674711;
    --status-red-bg: #fce8eb; --status-red-line: #ddaeb8; --status-red-ink: #8a2a3c;
    --status-gray-bg: #efede8; --status-gray-line: #cdc7bc; --status-gray-ink: #504d46;
  }
}

.status-look {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: 100%;
  min-width: 0;
  padding: 1px 8px 1px 6px;
  border: 1px solid var(--status-gray-line);
  border-radius: 999px;
  background: var(--status-gray-bg);
  color: var(--status-gray-ink);
  font-size: 0.6875rem;
  font-weight: 500;
  line-height: 1.6;
  white-space: nowrap;
  vertical-align: middle;
}
.status-look[data-size="md"] { gap: 6px; padding: 3px 10px 3px 8px; font-size: 0.75rem; line-height: 1.5; }
.status-look-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.status-look-icon { flex: none; width: 12px; height: 12px; }
.status-look-icon[data-spin="true"] { animation: status-look-spin 1.4s linear infinite; }
@keyframes status-look-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .status-look-icon[data-spin="true"] { animation: none; } }

.status-look[data-tone="green"] { border-color: var(--status-green-line); background: var(--status-green-bg); color: var(--status-green-ink); }
.status-look[data-tone="blue"] { border-color: var(--status-blue-line); background: var(--status-blue-bg); color: var(--status-blue-ink); }
.status-look[data-tone="violet"] { border-color: var(--status-violet-line); background: var(--status-violet-bg); color: var(--status-violet-ink); }
.status-look[data-tone="amber"] { border-color: var(--status-amber-line); background: var(--status-amber-bg); color: var(--status-amber-ink); }
.status-look[data-tone="red"] { border-color: var(--status-red-line); background: var(--status-red-bg); color: var(--status-red-ink); }
.status-look[data-tone="gray"] { border-color: var(--status-gray-line); background: var(--status-gray-bg); color: var(--status-gray-ink); }

@media print {
  .status-look { border-color: currentColor; background: none; color: #000; }
}