/* ═══════════════════════════════════════════════════════════════
   SIGNAL UPDATE — NOTHING OS INSPIRED PRODUCT LAYER · v3
   Shared by Hub, Audio, Video, Streaming, APIs and authentication.
   Load after signal-ds.css.
   ═══════════════════════════════════════════════════════════════ */

:root {
  --suh-black: #0b0b0a;
  --suh-paper: #f2f2ef;
  --suh-red: #e52b25;
  --suh-grid: rgba(110,110,104,.12);
  --suh-glass-bg: rgba(247,247,243,.82);
  --suh-glass-border: rgba(20,20,18,.11);
  --suh-safe-top: env(safe-area-inset-top, 0px);
  --suh-safe-right: env(safe-area-inset-right, 0px);
  --suh-safe-bottom: env(safe-area-inset-bottom, 0px);
  --suh-safe-left: env(safe-area-inset-left, 0px);
  --sd-font-sans: 'IBM Plex Sans', 'Avenir Next', ui-sans-serif, sans-serif;
  --sd-font-display: 'IBM Plex Sans', 'Avenir Next', ui-sans-serif, sans-serif;
  --sd-font-mono: 'JetBrains Mono', 'SFMono-Regular', ui-monospace, monospace;
  --sd-font-dot: 'Doto', 'JetBrains Mono', monospace;
  --sd-r: 22px;
  --sd-r-md: 16px;
  --sd-r-sm: 12px;
}

html[data-theme="dark"] {
  --sd-bg: #0b0b0a;
  --sd-bg-panel: #151514;
  --sd-bg-alt: #1c1c1a;
  --sd-bg-sunken: #10100f;
  --sd-bg-input: #111110;
  --sd-border: #2d2d2a;
  --sd-border-hi: #484843;
  --sd-txt: #f2f2ef;
  --sd-txt-muted: #999993;
  --sd-txt-dim: #686863;
  --sd-accent: #ff3b33;
  --sd-accent-hi: #ff5b54;
  --suh-glass-bg: rgba(20,20,19,.86);
  --suh-glass-border: rgba(255,255,248,.1);
  --suh-grid: rgba(255,255,248,.055);
}

html[data-theme="light"] {
  --sd-bg: #ededE9;
  --sd-bg-panel: #fafaf7;
  --sd-bg-alt: #e4e4df;
  --sd-bg-sunken: #deded9;
  --sd-bg-input: #fff;
  --sd-border: #d1d1cb;
  --sd-border-hi: #aaa9a2;
  --sd-txt: #131312;
  --sd-txt-muted: #6f6f69;
  --sd-txt-dim: #999993;
}

html, body { height: 100%; margin: 0; padding: 0; overscroll-behavior: none; }
body {
  background-color: var(--sd-bg);
  background-image:
    linear-gradient(var(--suh-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--suh-grid) 1px, transparent 1px);
  background-size: 24px 24px;
}
body.suh-body { overflow: hidden; }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
button { user-select: none; -webkit-user-select: none; }

/* Restrained glyph field instead of generic gradient blobs. */
.aurora { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.aurora::before {
  content: ""; position: absolute; width: 430px; height: 430px; right: -170px; top: -210px;
  border: 68px dotted color-mix(in srgb, var(--sd-accent) 18%, transparent);
  border-radius: 50%; opacity: .32; transform: rotate(18deg);
}
.aurora::after {
  content: ""; position: absolute; width: 180px; height: 180px; left: -80px; bottom: -95px;
  border-radius: 50%; background: var(--sd-accent); opacity: .07; filter: blur(2px);
}

.sd-app { position: relative; z-index: 1; }
.sd-sidebar, .sd-topbar, .sd-card {
  background: var(--suh-glass-bg) !important;
  border-color: var(--suh-glass-border) !important;
  -webkit-backdrop-filter: blur(22px) saturate(120%);
  backdrop-filter: blur(22px) saturate(120%);
}
.sd-card {
  border: 1px solid var(--suh-glass-border);
  box-shadow: 0 14px 40px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.05);
  overflow: hidden;
}
html[data-theme="dark"] .sd-card {
  box-shadow: 0 14px 44px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.06);
}

/* Nothing-like hierarchy: readable body copy, dot/mono for identity and data. */
.sd-wordmark, .sd-display, .sd-readout { font-family: var(--sd-font-dot); }
.sd-label, .sd-eyebrow, .sd-pill, .sd-badge, .sd-nav, .sd-btn, .sd-segment__btn,
.eyebrow, .qa-model, .qa-rem, th { font-family: var(--sd-font-mono); }
.sd-label, .sd-eyebrow, .eyebrow { letter-spacing: .15em; }

.suh-brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.suh-brand .sd-live__dot { background: var(--sd-accent); box-shadow: 0 0 0 4px var(--sd-accent-dim); }
.suh-brand .sd-wordmark { font-size: 18px; letter-spacing: .14em; }
.suh-tag {
  font: 800 8px/1 var(--sd-font-mono); letter-spacing: .2em; color: #fff;
  background: var(--sd-accent); border-radius: 4px; padding: 4px 7px 3px;
}
.suh-brand-col { flex-direction: column; align-items: flex-start; gap: 6px; }
.suh-brand-sub { font: 700 9px/1 var(--sd-font-mono); letter-spacing: .27em; text-transform: uppercase; color: var(--sd-txt-muted); }
.suh-pad { padding: clamp(16px, 2vw, 24px); display: flex; flex-direction: column; gap: 9px; }
.suh-side-card { border: 1px solid var(--suh-glass-border); border-radius: 15px; padding: 14px; background: color-mix(in srgb, var(--sd-bg-panel) 48%, transparent); }
.suh-side-card .k { font: 700 9px/1 var(--sd-font-mono); letter-spacing: .18em; text-transform: uppercase; color: var(--sd-txt-muted); }
.suh-side-card .v { margin-top: 5px; font: 700 12px/1.3 var(--sd-font-mono); color: var(--sd-txt); }
.sd-label .r { color: var(--sd-accent); }

.sd-btn, .sd-icon-btn, .sd-segment__btn, .sd-nav {
  min-height: 42px; transition: transform .16s cubic-bezier(.2,.8,.2,1), background .16s, color .16s, border-color .16s;
}
.sd-btn:active, .sd-icon-btn:active, .sd-segment__btn:active, .sd-nav:active { transform: scale(.97); }
.sd-btn--primary { box-shadow: none; }
.sd-icon-btn { background: var(--sd-bg-panel); }
.sd-segment { padding: 4px; gap: 3px; border-radius: 15px; background: var(--sd-bg-sunken); }
.sd-segment__btn { border-radius: 11px; }
.sd-segment__btn.is-active {
  background: var(--sd-txt) !important; color: var(--sd-bg) !important; box-shadow: none !important;
}
.sd-nav.is-active { border-color: var(--sd-accent); }
.sd-nav.is-active::before { background: var(--sd-accent); }
.sd-pill, .sd-badge { border-radius: 999px; }
.sd-meter { height: 9px; }
.sd-meter > span { background: var(--sd-accent); }

/* Embedded views do not duplicate the Hub identity. */
.is-embed .sd-sidebar__brand, .is-embed #theme { display: none; }

/* Tables and logs stay contained instead of widening iOS viewport. */
.sd-content, .sd-content__inner, .content, .content-inner, .sd-main, .main { min-width: 0; }
.sd-content { -webkit-overflow-scrolling: touch; }
.sv-table-wrap, .table-wrap, .su-table-wrap { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.logbox, pre, code { text-transform: none !important; letter-spacing: normal !important; }

/* Accessibility and reduced motion. */
:focus-visible { outline: 2px solid var(--sd-accent); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* Mobile / iOS: one real viewport, scroll in each view, thumb-safe controls. */
@media (max-width: 720px) {
  html, body { min-height: 100%; height: 100%; }
  body.suh-body { overflow: hidden; }
  .sd-app { height: 100%; min-height: 0; }
  .sd-sidebar { padding-top: var(--suh-safe-top); }
  .sd-sidebar__nav { overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .sd-sidebar__nav::-webkit-scrollbar { display: none; }
  .sd-nav { min-width: max-content; min-height: 44px; }
  .sd-main { min-height: 0; }
  .sd-topbar {
    min-height: 56px; height: auto; padding: 8px max(12px, var(--suh-safe-right)) 8px max(12px, var(--suh-safe-left)); gap: 8px;
  }
  .sd-topbar h1 { font-size: clamp(13px, 4vw, 18px); }
  .sd-topbar .sd-row, .sd-topbar .right { min-width: 0; gap: 6px; }
  .sd-topbar .sd-pill { max-width: 42vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .sd-content { padding-bottom: calc(20px + var(--suh-safe-bottom)); overflow-x: hidden; }
  .sd-content__inner { padding: 13px 12px 24px; }
  .sd-card { border-radius: 18px; }
  .suh-pad { padding: 16px; }
  .sd-btn, .sd-icon-btn, .sd-segment__btn, input, select { min-height: 44px; }
  .sd-segment { max-width: 100% !important; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .sd-segment::-webkit-scrollbar { display: none; }
  .sd-segment__btn { flex: 0 0 auto; padding-inline: 14px; }
}

@media (display-mode: standalone) {
  body { padding-bottom: var(--suh-safe-bottom); }
}