/*
 * Dant3 owner-approved 2026-08-28 command-center presentation layer.
 * Presentation only: no route, data, auth, payment, moderation or permission behavior.
 */

:root,
html:not([data-theme]),
html[data-theme="dark-alloy"] {
  --background: #07070b;
  --foreground: #f5f3fa;
  --card: #0d0e14;
  --card-foreground: #f5f3fa;
  --popover: #0b0c12;
  --popover-foreground: #f5f3fa;
  --primary: #9d4edd;
  --primary-foreground: #ffffff;
  --secondary: #17141f;
  --secondary-foreground: #f0ecf7;
  --muted: #14141c;
  --muted-foreground: #aaa5b6;
  --accent: #21152f;
  --accent-foreground: #faf7ff;
  --border: rgb(157 78 221 / 28%);
  --input: #101119;
  --ring: rgb(177 94 255 / 66%);
  --sidebar: #08090e;
  --sidebar-accent: #181020;
  --command-metal-edge: #888691;
  --command-metal-hi: #e8e7ed;
  --command-metal-low: #30313b;
  --command-panel: rgb(10 11 17 / 94%);
  --command-panel-soft: rgb(16 17 25 / 91%);
  --command-glow: rgb(157 78 221 / 38%);
  --command-glow-strong: rgb(177 94 255 / 62%);
}

html[data-theme="dark-midnight"] {
  --primary: #4f6fff;
  --accent: #111c38;
  --border: rgb(79 111 255 / 26%);
  --ring: rgb(79 111 255 / 62%);
  --command-glow: rgb(79 111 255 / 34%);
  --command-glow-strong: rgb(90 128 255 / 58%);
}

html[data-theme="dark-ember"] {
  --primary: #ff654f;
  --accent: #321917;
  --border: rgb(255 101 79 / 27%);
  --ring: rgb(255 101 79 / 60%);
  --command-glow: rgb(255 101 79 / 31%);
  --command-glow-strong: rgb(255 117 88 / 54%);
}

html[data-theme="light-silver"] {
  --background: #f4f2f7;
  --foreground: #17141d;
  --card: #fbfaff;
  --card-foreground: #17141d;
  --popover: #ffffff;
  --popover-foreground: #17141d;
  --primary: #7137bd;
  --primary-foreground: #ffffff;
  --secondary: #eae5f1;
  --secondary-foreground: #211b2b;
  --muted: #ebe8ef;
  --muted-foreground: #655e70;
  --accent: #e4daf0;
  --accent-foreground: #24162f;
  --border: rgb(82 70 96 / 24%);
  --input: #ffffff;
  --ring: rgb(113 55 189 / 48%);
  --sidebar: #f0edf4;
  --sidebar-accent: #e2daeb;
  --command-metal-edge: #8f8b96;
  --command-metal-hi: #ffffff;
  --command-metal-low: #cbc7d0;
  --command-panel: rgb(255 255 255 / 94%);
  --command-panel-soft: rgb(246 243 249 / 94%);
  --command-glow: rgb(113 55 189 / 18%);
  --command-glow-strong: rgb(113 55 189 / 28%);
}

html[data-theme="light-pearl"] {
  --primary: #315fd3;
  --accent: #dce6fb;
  --ring: rgb(49 95 211 / 45%);
  --command-glow: rgb(49 95 211 / 18%);
  --command-glow-strong: rgb(49 95 211 / 28%);
}

html[data-theme="light-frost"] {
  --primary: #087fba;
  --accent: #d8f0f8;
  --ring: rgb(8 127 186 / 44%);
  --command-glow: rgb(8 127 186 / 17%);
  --command-glow-strong: rgb(8 127 186 / 27%);
}

html,
body {
  background:
    radial-gradient(circle at 78% -14%, var(--command-glow), transparent 28rem),
    linear-gradient(145deg, color-mix(in srgb, var(--background) 97%, var(--primary) 3%), var(--background));
}

.ti-shell {
  position: relative;
  isolation: isolate;
  background:
    linear-gradient(90deg, transparent 0 99%, color-mix(in srgb, var(--primary) 8%, transparent) 100%),
    var(--background);
}

.ti-shell::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.36;
  background-image:
    linear-gradient(color-mix(in srgb, var(--command-metal-edge) 7%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--command-metal-edge) 7%, transparent) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(to bottom, black, transparent 72%);
}

.metal-header {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--command-metal-hi) 8%, var(--command-panel)), var(--command-panel) 32%, color-mix(in srgb, var(--primary) 5%, var(--command-panel)));
  border-color: color-mix(in srgb, var(--primary) 38%, var(--command-metal-edge));
  box-shadow:
    inset 0 -1px 0 color-mix(in srgb, var(--command-metal-hi) 18%, transparent),
    0 7px 22px rgb(0 0 0 / 28%),
    0 0 18px var(--command-glow);
  backdrop-filter: blur(18px) saturate(125%);
}

.metal-panel,
.surface-card,
.ti-panel,
.ti-panel-soft,
.ti-drawer,
[data-slot="card"] {
  border-radius: 6px !important;
  border-color: color-mix(in srgb, var(--primary) 27%, var(--command-metal-edge)) !important;
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--command-metal-hi) 5%, var(--command-panel)) 0%, var(--command-panel) 34%, color-mix(in srgb, var(--primary) 3%, var(--command-panel)) 100%) !important;
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--command-metal-hi) 13%, transparent),
    inset 1px 0 0 color-mix(in srgb, var(--command-metal-hi) 5%, transparent),
    0 12px 28px rgb(0 0 0 / 18%),
    0 0 12px color-mix(in srgb, var(--command-glow) 48%, transparent);
}

.metal-panel,
.surface-card,
.ti-panel {
  clip-path: polygon(0 7px, 7px 0, calc(100% - 7px) 0, 100% 7px, 100% calc(100% - 7px), calc(100% - 7px) 100%, 7px 100%, 0 calc(100% - 7px));
}

.ti-sidebar {
  border-right: 1px solid color-mix(in srgb, var(--primary) 30%, var(--command-metal-edge));
  background: linear-gradient(180deg, color-mix(in srgb, var(--primary) 3%, var(--sidebar)), var(--sidebar));
  box-shadow: 8px 0 22px rgb(0 0 0 / 12%);
}

.ti-sidebar nav a,
.ti-drawer nav a {
  border-radius: 4px !important;
}

.ti-sidebar nav a[aria-current="page"],
.ti-drawer nav a[aria-current="page"] {
  border-color: color-mix(in srgb, var(--primary) 45%, var(--command-metal-edge));
  background: linear-gradient(90deg, color-mix(in srgb, var(--primary) 18%, transparent), color-mix(in srgb, var(--primary) 4%, transparent));
  box-shadow: inset 3px 0 0 var(--primary), 0 0 12px var(--command-glow);
}

.metal-button,
button.bg-primary,
a.bg-primary {
  border-radius: 4px !important;
  border: 1px solid color-mix(in srgb, var(--command-metal-hi) 24%, var(--primary));
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--primary) 88%, white 12%), color-mix(in srgb, var(--primary) 82%, black 18%)) !important;
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 22%),
    0 0 13px var(--command-glow);
}

input,
textarea,
select,
[role="combobox"] {
  border-radius: 4px !important;
}

.ti-icon-button,
.ti-account-avatar-button,
.ti-chip {
  border-radius: 4px !important;
}

.ti-bottom-nav {
  border-top-color: color-mix(in srgb, var(--primary) 35%, var(--command-metal-edge));
  background: color-mix(in srgb, var(--command-panel) 94%, transparent);
  box-shadow: 0 -8px 22px rgb(0 0 0 / 18%), 0 -1px 14px var(--command-glow);
  backdrop-filter: blur(18px);
}

.dant3-product-mark {
  display: block;
  overflow: hidden;
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--primary) 38%, var(--command-metal-edge));
  background: #06060a;
  box-shadow: 0 0 18px var(--command-glow);
}

.dant3-product-mark > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

::selection {
  background: color-mix(in srgb, var(--primary) 42%, transparent);
  color: var(--foreground);
}

@media (max-width: 767px) {
  .ti-shell::before {
    opacity: 0.18;
    background-size: 64px 64px;
  }

  .metal-header,
  .metal-panel,
  .surface-card,
  .ti-panel,
  .ti-panel-soft,
  .ti-drawer,
  [data-slot="card"] {
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--command-metal-hi) 9%, transparent), 0 6px 16px rgb(0 0 0 / 12%);
  }

  .metal-panel,
  .surface-card,
  .ti-panel {
    clip-path: none;
    border-radius: 5px !important;
  }

  .dant3-product-mark {
    box-shadow: 0 0 9px color-mix(in srgb, var(--command-glow) 55%, transparent);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
  }
}
/*
 * Owner-approved 2026-08-28 Neon Tactical Grid presentation layer.
 * Presentation only: no route, data, auth, payment, moderation or permission behavior.
 */

:root,
html:not([data-theme]),
html[data-theme="dark-alloy"] {
  --tactical-grid-line: rgb(168 85 247 / 9%);
  --tactical-grid-line-strong: rgb(168 85 247 / 16%);
  --tactical-chrome-edge: #a8a6b0;
  --tactical-chrome-hi: #f2f0f6;
  --tactical-chrome-low: #30313c;
  --tactical-neon: #a855f7;
  --tactical-neon-hot: #c26cff;
  --tactical-glow: rgb(168 85 247 / 32%);
  --tactical-panel: rgb(7 8 14 / 95%);
  --tactical-panel-soft: rgb(13 14 23 / 92%);
  --tactical-grid-opacity: 1;
}

html[data-theme="dark-midnight"] {
  --tactical-grid-line: rgb(82 109 255 / 9%);
  --tactical-grid-line-strong: rgb(82 109 255 / 16%);
  --tactical-neon: #526dff;
  --tactical-neon-hot: #7190ff;
  --tactical-glow: rgb(82 109 255 / 28%);
  --tactical-chrome-edge: #7c859d;
  --tactical-panel: rgb(5 7 17 / 95%);
  --tactical-panel-soft: rgb(10 14 27 / 92%);
}

html[data-theme="dark-ember"] {
  --tactical-grid-line: rgb(255 101 79 / 8%);
  --tactical-grid-line-strong: rgb(255 101 79 / 14%);
  --tactical-neon: #ff654f;
  --tactical-neon-hot: #ff8a74;
  --tactical-glow: rgb(255 101 79 / 24%);
  --tactical-chrome-edge: #8a6b6d;
  --tactical-panel: rgb(12 7 9 / 95%);
  --tactical-panel-soft: rgb(24 13 16 / 92%);
}

html[data-theme="light-silver"],
html[data-theme="light-pearl"],
html[data-theme="light-frost"] {
  --tactical-grid-line: color-mix(in srgb, var(--primary) 9%, transparent);
  --tactical-grid-line-strong: color-mix(in srgb, var(--primary) 15%, transparent);
  --tactical-neon: var(--primary);
  --tactical-neon-hot: color-mix(in srgb, var(--primary) 78%, white);
  --tactical-glow: color-mix(in srgb, var(--primary) 17%, transparent);
  --tactical-chrome-edge: color-mix(in srgb, var(--foreground) 24%, var(--border));
  --tactical-chrome-hi: color-mix(in srgb, white 84%, var(--background));
  --tactical-chrome-low: color-mix(in srgb, var(--foreground) 18%, var(--background));
  --tactical-panel: color-mix(in srgb, var(--card) 94%, transparent);
  --tactical-panel-soft: color-mix(in srgb, var(--card) 88%, transparent);
  --tactical-grid-opacity: 0.72;
}

body {
  background-color: var(--background);
  background-image:
    linear-gradient(var(--tactical-grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--tactical-grid-line) 1px, transparent 1px),
    radial-gradient(circle at 78% 9%, var(--tactical-glow), transparent 31rem),
    radial-gradient(circle at 12% 78%, color-mix(in srgb, var(--tactical-neon) 9%, transparent), transparent 28rem);
  background-size: 42px 42px, 42px 42px, auto, auto;
  background-attachment: fixed;
}

.ti-shell {
  position: relative;
  isolation: isolate;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--background) 91%, transparent), var(--background));
}

.ti-shell::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: var(--tactical-grid-opacity);
  background-image:
    linear-gradient(var(--tactical-grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--tactical-grid-line) 1px, transparent 1px),
    linear-gradient(120deg, transparent 0 47%, var(--tactical-grid-line-strong) 49% 50%, transparent 52% 100%);
  background-size: 42px 42px, 42px 42px, 240px 240px;
  mask-image: linear-gradient(to bottom, black, rgb(0 0 0 / 58%) 72%, transparent);
}

.metal-panel,
.metal-header,
.metal-card,
.command-panel {
  border-color: color-mix(in srgb, var(--tactical-chrome-edge) 44%, var(--border)) !important;
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--tactical-chrome-hi) 5%, transparent), transparent 32%),
    linear-gradient(180deg, var(--tactical-panel-soft), var(--tactical-panel)) !important;
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--tactical-chrome-hi) 18%, transparent),
    inset 0 -1px 0 color-mix(in srgb, var(--tactical-chrome-low) 36%, transparent),
    0 0 0 1px color-mix(in srgb, var(--tactical-neon) 8%, transparent),
    0 14px 46px rgb(0 0 0 / 22%);
}

.metal-header {
  position: relative;
}

.metal-header::after {
  content: "";
  position: absolute;
  inset-inline: 4%;
  bottom: -1px;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--tactical-neon), transparent);
  opacity: 0.42;
}

.metal-button,
button[class*="bg-primary"],
a[class*="bg-primary"] {
  border: 1px solid color-mix(in srgb, var(--tactical-neon) 54%, var(--tactical-chrome-edge));
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, white 16%, transparent),
    0 0 18px color-mix(in srgb, var(--tactical-neon) 18%, transparent);
}

input,
textarea,
[role="searchbox"],
[role="combobox"] {
  border-color: color-mix(in srgb, var(--tactical-chrome-edge) 38%, var(--border)) !important;
  background-color: color-mix(in srgb, var(--input) 94%, transparent) !important;
}

input:focus-visible,
textarea:focus-visible,
button:focus-visible,
a:focus-visible,
[role="button"]:focus-visible {
  outline-color: var(--tactical-neon) !important;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--tactical-neon) 35%, transparent);
}

.dant3-product-mark,
.dant3-official-logo {
  filter:
    drop-shadow(0 0 7px color-mix(in srgb, var(--tactical-neon) 52%, transparent))
    drop-shadow(0 8px 18px rgb(0 0 0 / 28%));
}

.dant3-product-mark img,
.dant3-official-logo img {
  border-radius: 22%;
  object-fit: contain;
}

/* Shared card language without changing component behavior. */
:is(main, aside) :is(article, section)[class*="border"] {
  border-color: color-mix(in srgb, var(--tactical-chrome-edge) 32%, var(--border));
}

:is(main, aside) :is(article, section)[class*="bg-card"] {
  background-image: linear-gradient(160deg, color-mix(in srgb, var(--tactical-neon) 4%, transparent), transparent 44%);
}

/* Compact tactical separators used by desktop and mobile navigation. */
nav a[aria-current="page"],
nav a[data-status="active"],
[role="tab"][aria-selected="true"] {
  box-shadow:
    inset 3px 0 0 var(--tactical-neon),
    inset 0 -1px 0 color-mix(in srgb, var(--tactical-neon) 45%, transparent),
    0 0 20px color-mix(in srgb, var(--tactical-neon) 10%, transparent);
}

@media (max-width: 767px) {
  body {
    background-size: 30px 30px, 30px 30px, auto, auto;
    background-attachment: scroll;
  }

  .ti-shell::before {
    position: absolute;
    background-size: 30px 30px, 30px 30px, 180px 180px;
    opacity: 0.45;
  }

  .metal-panel,
  .metal-header,
  .metal-card,
  .command-panel {
    box-shadow:
      inset 0 1px 0 color-mix(in srgb, var(--tactical-chrome-hi) 12%, transparent),
      0 0 0 1px color-mix(in srgb, var(--tactical-neon) 6%, transparent);
  }

  .dant3-product-mark,
  .dant3-official-logo {
    filter: drop-shadow(0 0 5px color-mix(in srgb, var(--tactical-neon) 38%, transparent));
  }
}

html[data-dant3-mobile="true"] body {
  background-image: none !important;
  background-attachment: scroll !important;
}

html[data-dant3-mobile="true"] .ti-shell::before {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .ti-shell::before,
  .dant3-product-mark,
  .dant3-official-logo,
  .metal-panel,
  .metal-header,
  .metal-card,
  .command-panel {
    transition: none !important;
    animation: none !important;
  }
}

/* Phase 1 acquisition-density overrides.
 * Keep the full desktop network desk while making the mobile Feed content-first.
 */

@media (max-width: 767px) {
  section[aria-labelledby="network-signal"] {
    padding: 0.875rem !important;
    clip-path: none !important;
  }

  section[aria-labelledby="network-signal"] > div {
    gap: 0.75rem !important;
  }

  #network-signal {
    margin-top: 0.25rem !important;
    font-size: 1.75rem !important;
    line-height: 2rem !important;
  }

  section[aria-labelledby="network-signal"] #network-signal + p {
    margin-top: 0.4rem !important;
    font-size: 0.75rem !important;
    line-height: 1.2rem !important;
  }

  section[aria-labelledby="network-signal"] #network-signal + p + div {
    margin-top: 0.65rem !important;
  }

  /* The four-window network dashboard duplicates information already available
   * from Discover and the side/network desks. On mobile, lead with conversation.
   */
  section[aria-label="Dant3 network overview"] {
    display: none !important;
  }

  /* Preserve the private-room upsell/privacy signal, but do not make users scroll
   * through two synthetic placeholder cards before reaching public conversation.
   */
  section[aria-labelledby="private-signal-preview"] {
    margin-top: 0.65rem !important;
    padding: 0.75rem !important;
    clip-path: none !important;
  }

  section[aria-labelledby="private-signal-preview"] > div {
    gap: 0.5rem !important;
  }

  section[aria-labelledby="private-signal-preview"]
    [aria-label="Synthetic blurred private message previews"],
  section[aria-labelledby="private-signal-preview"] > p:last-child {
    display: none !important;
  }

  section[aria-labelledby="private-signal-preview"] h2 {
    margin-top: 0.25rem !important;
    font-size: 1rem !important;
    line-height: 1.35rem !important;
  }

  section[aria-labelledby="private-signal-preview"] h2 + p {
    margin-top: 0.25rem !important;
    font-size: 0.7rem !important;
    line-height: 1.05rem !important;
  }

  section[aria-labelledby="private-signal-preview"] a[href="/pricing"] {
    margin-top: 0.5rem !important;
    padding: 0.4rem 0.65rem !important;
  }
}

/* The bundled Android WebView receives this marker at build time. Keep its
 * compositor workload deterministic: fixed page backgrounds and layered
 * backdrop filters can leave stale/duplicated tiles on foldables and during
 * scroll/resize transitions. This does not alter the browser build. */
html[data-dant3-mobile="true"],
html[data-dant3-mobile="true"] body,
html[data-dant3-mobile="true"] #root {
  min-height: 100%;
  background-color: var(--background);
}

html[data-dant3-mobile="true"] body {
  min-height: 100dvh;
  background-image: none !important;
  background-attachment: scroll !important;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom)
    env(safe-area-inset-left);
}

html[data-dant3-mobile="true"] .ti-shell {
  background: var(--background) !important;
}

html[data-dant3-mobile="true"] * {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

html[data-dant3-mobile="true"] [class~="h-screen"] {
  height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom));
}

html[data-dant3-mobile="true"] [class~="min-h-screen"] {
  min-height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom));
}