/*
 * Wrooms Board Platform
 * Shared full-application visual system for public, workspace, and signed-in shells.
 * Palette is the official Wrooms doorway family.
 */

:root {
  --board-door: #07070a;
  --board-violet: #7c3aed;
  --board-blue: #2563eb;
  --board-mint: #5eead4;
  --board-ink: #f5f7fb;
  --board-muted: #9ea8b7;
  --board-panel: rgba(8, 13, 22, 0.9);
  --board-panel-strong: rgba(10, 17, 29, 0.96);
  --board-line: color-mix(in oklab, var(--board-mint) 22%, rgba(255,255,255,.08));
  --board-line-strong: color-mix(in oklab, var(--board-mint) 45%, rgba(255,255,255,.14));
  --board-glow: 0 26px 70px -44px color-mix(in oklab, var(--board-blue) 82%, transparent);
  --board-edge: inset 0 1px 0 rgba(255,255,255,.055), 0 0 0 1px rgba(94,234,212,.05);
}

/* Shared application background and first-paint geometry. */
body {
  background:
    radial-gradient(60rem 42rem at 86% -6%, rgba(37,99,235,.18), transparent 62%),
    radial-gradient(52rem 40rem at 8% 5%, rgba(124,58,237,.14), transparent 64%),
    linear-gradient(180deg, #050507, #07101a 48%, #050507 100%) !important;
}

[data-board-ui="true"],
[data-wrooms-surface="public"],
.wrooms-workspace-app,
.app-shell.rock-shell {
  --color-bg: #05070b;
  --color-surface: #080d15;
  --color-elevated: #0e1724;
  --color-fg: var(--board-ink);
  --color-muted: var(--board-muted);
  --color-subtle: #748094;
  --color-border: #1c2a3a;
  --color-accent: var(--board-violet);
  --color-signal: var(--board-mint);
  --color-ai: #8b5cf6;
}

/* Public shell becomes an expansive board frame on every marketing/public route. */
[data-wrooms-surface="public"] {
  position: relative;
  isolation: isolate;
  background:
    linear-gradient(rgba(94,234,212,.018) 1px, transparent 1px) 0 0 / 100% 52px,
    radial-gradient(50rem 34rem at 76% 10%, rgba(37,99,235,.12), transparent 66%),
    radial-gradient(42rem 30rem at 18% 16%, rgba(124,58,237,.11), transparent 70%),
    transparent !important;
}

[data-wrooms-surface="public"]::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(120deg, transparent 0 48.5%, rgba(94,234,212,.025) 49%, transparent 49.5%),
    linear-gradient(90deg, transparent 0 63px, rgba(37,99,235,.018) 64px, transparent 65px) 0 0 / 256px 100%;
}

[data-wrooms-surface="public"] > div { position: relative; z-index: 1; }

[data-wrooms-surface="public"] > div > header {
  border-bottom-color: rgba(94,234,212,.12) !important;
  background: rgba(5,9,15,.82) !important;
  box-shadow: 0 18px 50px rgba(0,0,0,.22), inset 0 -1px rgba(94,234,212,.04);
  backdrop-filter: blur(24px) saturate(140%) !important;
}

[data-wrooms-surface="public"] > div > header > div {
  max-width: 1760px !important;
  padding-inline: clamp(.8rem, 1.5vw, 1.5rem) !important;
}

[data-wrooms-surface="public"] .wrooms-site-nav {
  min-height: 3.15rem !important;
  height: auto !important;
  gap: .22rem !important;
  padding: .28rem !important;
  border: 1px solid rgba(94,234,212,.11) !important;
  border-radius: 1.25rem !important;
  background: rgba(9,15,25,.82) !important;
  box-shadow: var(--board-edge), 0 12px 36px rgba(0,0,0,.18) !important;
}

[data-wrooms-surface="public"] .wrooms-site-nav > a {
  min-height: 2.55rem !important;
  height: 2.55rem !important;
  padding-inline: clamp(.72rem, 1vw, 1rem) !important;
  gap: .4rem !important;
  border-radius: .95rem !important;
  font-size: clamp(.73rem,.68rem + .13vw,.86rem) !important;
  font-weight: 650 !important;
}

[data-wrooms-surface="public"] .wrooms-site-nav > a > span:first-child {
  width: 1.32rem !important;
  height: 1.32rem !important;
  margin-right: .08rem !important;
  font-size: .86rem !important;
  opacity: 1 !important;
  border: 1px solid currentColor;
  border-radius: .42rem;
  background: color-mix(in oklab, currentColor 8%, transparent);
}

[data-wrooms-surface="public"] .wrooms-site-nav > a[aria-current="page"],
[data-wrooms-surface="public"] .wrooms-site-nav > a[data-active="true"] {
  color: var(--board-mint) !important;
  background: linear-gradient(135deg, rgba(37,99,235,.24), rgba(124,58,237,.18)) !important;
  box-shadow: inset 0 0 0 1px rgba(94,234,212,.42), 0 0 22px rgba(37,99,235,.18) !important;
}

[data-wrooms-surface="public"] footer {
  background: linear-gradient(180deg, rgba(8,13,21,.66), rgba(5,5,7,.96)) !important;
  border-top-color: rgba(94,234,212,.12) !important;
}

/* Upgrade generic public page geometry without rewriting every route. */
[data-wrooms-surface="public"] main:not([data-home-layout="classic"]) {
  width: min(100%, 1760px) !important;
}

[data-wrooms-surface="public"] main section,
[data-wrooms-surface="public"] main > div {
  scroll-margin-top: 7rem;
}

[data-wrooms-surface="public"] .rounded-3xl.border,
[data-wrooms-surface="public"] .rounded-\[2rem\].border,
[data-wrooms-surface="public"] article.border {
  border-color: rgba(94,234,212,.12) !important;
  background: linear-gradient(155deg, rgba(10,17,28,.92), rgba(7,10,17,.95)) !important;
  box-shadow: var(--board-edge) !important;
}

[data-wrooms-surface="public"] .rounded-3xl.border:hover,
[data-wrooms-surface="public"] article.border:hover {
  border-color: rgba(94,234,212,.28) !important;
  box-shadow: var(--board-edge), var(--board-glow) !important;
}

/* Home becomes a real board front door instead of a centered brochure. */
[data-wrooms-surface="public"] main[data-home-layout="classic"] {
  max-width: 1760px;
  margin-inline: auto;
  padding-inline: clamp(.9rem, 2vw, 2rem);
}

[data-wrooms-surface="public"] main[data-home-layout="classic"] > section:first-child {
  position: relative;
  overflow: hidden;
  max-width: none !important;
  min-height: clamp(34rem, 70vh, 50rem);
  display: grid;
  align-items: end;
  padding: clamp(2rem,5vw,5rem) !important;
  margin-top: clamp(1rem,2vw,1.75rem);
  border: 1px solid rgba(94,234,212,.18);
  border-radius: clamp(1.75rem,2.5vw,2.5rem);
  background:
    radial-gradient(28rem 24rem at 82% 24%, rgba(94,234,212,.12), transparent 67%),
    radial-gradient(44rem 30rem at 68% 10%, rgba(37,99,235,.26), transparent 64%),
    radial-gradient(38rem 28rem at 14% 20%, rgba(124,58,237,.18), transparent 70%),
    linear-gradient(128deg,#07070a 0%,#07111d 48%,#08121c 72%,#07070a 100%);
  box-shadow: var(--board-edge), 0 42px 120px -76px rgba(37,99,235,.9);
}

[data-wrooms-surface="public"] main[data-home-layout="classic"] > section:first-child::before {
  content: "";
  position: absolute;
  right: clamp(3rem,12vw,13rem);
  top: clamp(3rem,8vw,7rem);
  width: clamp(7rem,13vw,13rem);
  aspect-ratio: .58;
  border-radius: 999px 999px 1rem 1rem;
  border: 1px solid rgba(94,234,212,.66);
  background:
    linear-gradient(90deg,transparent 47%,rgba(94,234,212,.75) 49% 51%,transparent 53%),
    radial-gradient(circle at 50% 30%,rgba(94,234,212,.2),transparent 58%);
  box-shadow: 0 0 52px rgba(94,234,212,.18), inset 0 0 38px rgba(37,99,235,.2);
}

[data-wrooms-surface="public"] main[data-home-layout="classic"] > section:first-child > div {
  margin: 0 !important;
  max-width: 52rem !important;
  text-align: left !important;
  position: relative;
  z-index: 2;
}

[data-wrooms-surface="public"] main[data-home-layout="classic"] h1 {
  max-width: 9ch !important;
  margin-inline: 0 !important;
  font-size: clamp(3.5rem,8vw,8rem) !important;
  line-height: .88 !important;
  letter-spacing: -.055em !important;
}

[data-wrooms-surface="public"] main[data-home-layout="classic"] > section:nth-child(n+2) {
  max-width: none !important;
  padding-inline: 0 !important;
}

/* Workspace host becomes the same mission board, while preserving all chat/repo wiring. */
.wrooms-workspace-app[data-board-ui="true"] {
  background:
    radial-gradient(42rem 28rem at 12% 0%, rgba(124,58,237,.2), transparent 64%),
    radial-gradient(44rem 30rem at 82% 0%, rgba(37,99,235,.17), transparent 64%),
    linear-gradient(rgba(94,234,212,.018) 1px, transparent 1px) 0 0 / 100% 48px,
    #05070b !important;
}

.wrooms-workspace-app[data-board-ui="true"] .workspace-commandbar {
  min-height: 72px !important;
  border-bottom-color: rgba(94,234,212,.16) !important;
  background: rgba(5,9,15,.92) !important;
}

.wrooms-workspace-app[data-board-ui="true"] .workspace-commandbar__nav {
  min-height: 44px;
  gap: 4px;
  padding: 4px;
  border-color: rgba(94,234,212,.13) !important;
  border-radius: 1rem !important;
  background: rgba(10,17,28,.9) !important;
}

.wrooms-workspace-app[data-board-ui="true"] .workspace-commandbar__nav a,
.wrooms-workspace-app[data-board-ui="true"] .workspace-commandbar__nav span {
  min-height: 36px !important;
  border-radius: .8rem !important;
  padding-inline: 15px !important;
}

.wrooms-workspace-app[data-board-ui="true"] .workspace-stage [aria-label="Wrooms AI Workspace"] > div {
  border-radius: 0 !important;
}

.wrooms-workspace-app[data-board-ui="true"] .workspace-stage [aria-label="Wrooms AI Workspace"] > div > div {
  gap: 12px;
  padding: 12px;
  background: transparent !important;
}

.wrooms-workspace-app[data-board-ui="true"] .workspace-stage aside,
.wrooms-workspace-app[data-board-ui="true"] .workspace-stage main {
  border: 1px solid rgba(94,234,212,.1) !important;
  border-radius: 1.45rem !important;
  overflow: hidden;
  background:
    radial-gradient(24rem 18rem at 50% 0%, rgba(37,99,235,.08), transparent 68%),
    rgba(7,12,20,.93) !important;
  box-shadow: var(--board-edge), 0 24px 70px rgba(0,0,0,.18);
}

.wrooms-workspace-app[data-board-ui="true"] .workspace-stage main::after {
  content: "MISSION BOARD";
  position: absolute;
  right: 16px;
  top: 12px;
  z-index: 2;
  color: rgba(94,234,212,.5);
  font: 700 .52rem/1 var(--font-mono);
  letter-spacing: .2em;
  pointer-events: none;
}

.wrooms-workspace-app[data-board-ui="true"] .workspace-stage main > div:first-of-type > div:has(h1) {
  max-width: 58rem !important;
}

.wrooms-workspace-app[data-board-ui="true"] .workspace-stage main h1 {
  font-size: clamp(2.7rem,5vw,5.3rem) !important;
  line-height: .95 !important;
}

.wrooms-workspace-app[data-board-ui="true"] .workspace-stage main button.rounded-2xl.border {
  min-height: 5.4rem;
  border-color: rgba(94,234,212,.12) !important;
  background: linear-gradient(145deg,rgba(14,23,36,.96),rgba(8,13,22,.96)) !important;
}

/* Signed-in app shell: replace rock/steel framing with the knowledge-board system. */
.app-shell.rock-shell[data-board-ui="true"] {
  background:
    radial-gradient(44rem 34rem at 75% -8%, rgba(37,99,235,.17), transparent 64%),
    radial-gradient(36rem 30rem at 12% 0%, rgba(124,58,237,.15), transparent 66%),
    #05070b !important;
}

.app-shell.rock-shell[data-board-ui="true"]::before {
  opacity: .38 !important;
  background:
    linear-gradient(rgba(94,234,212,.018) 1px,transparent 1px) 0 0 / 100% 48px,
    linear-gradient(90deg,transparent 0 63px,rgba(37,99,235,.02) 64px,transparent 65px) 0 0 / 256px 100% !important;
}

.app-shell.rock-shell[data-board-ui="true"]::after {
  box-shadow: inset 0 0 110px rgba(0,0,0,.48) !important;
}

.app-shell.rock-shell[data-board-ui="true"] .rock-rail {
  width: 5.6rem !important;
  border-color: rgba(94,234,212,.12) !important;
  background: rgba(5,9,15,.94) !important;
  box-shadow: 16px 0 46px rgba(0,0,0,.18), inset -1px 0 rgba(94,234,212,.05) !important;
}

.app-shell.rock-shell[data-board-ui="true"] .rock-rail::before,
.app-shell.rock-shell[data-board-ui="true"] .rock-rail::after { display:none !important; }

.app-shell.rock-shell[data-board-ui="true"] .rock-rail .nav-tab {
  width: 3.2rem !important;
  height: 3.2rem !important;
  border-radius: 1rem !important;
  border-color: rgba(94,234,212,.07) !important;
  background: linear-gradient(145deg,rgba(14,23,36,.88),rgba(7,12,20,.9)) !important;
}

.app-shell.rock-shell[data-board-ui="true"] .rock-rail .nav-tab[aria-current="page"] {
  border-color: rgba(94,234,212,.48) !important;
  background: linear-gradient(135deg,rgba(37,99,235,.28),rgba(124,58,237,.22)) !important;
  box-shadow: inset 0 0 0 1px rgba(94,234,212,.16),0 0 24px rgba(37,99,235,.2) !important;
}

.app-shell.rock-shell[data-board-ui="true"] .rock-topbar {
  min-height: 4.4rem;
  border-bottom-color: rgba(94,234,212,.13) !important;
  background: rgba(5,9,15,.9) !important;
  box-shadow: 0 16px 44px rgba(0,0,0,.2),inset 0 -1px rgba(94,234,212,.05) !important;
  backdrop-filter: blur(24px) saturate(135%);
}

.app-shell.rock-shell[data-board-ui="true"] .rock-topbar::after {
  content: "WROOMS  /  COMMAND BOARD" !important;
  left: 1.2rem !important;
  bottom: -.28rem !important;
  border: 0 !important;
  background: #07101a !important;
  color: var(--board-mint) !important;
}

.app-shell.rock-shell[data-board-ui="true"] .rock-stage {
  margin: .7rem .75rem .75rem;
  border: 1px solid rgba(94,234,212,.11);
  border-radius: 1.65rem;
  overflow: hidden !important;
  background:
    radial-gradient(40rem 30rem at 50% 0%,rgba(37,99,235,.08),transparent 66%),
    linear-gradient(rgba(94,234,212,.015) 1px,transparent 1px) 0 0 / 100% 46px,
    #07101a !important;
  box-shadow: var(--board-edge),0 28px 80px rgba(0,0,0,.18);
}

.app-shell.rock-shell[data-board-ui="true"] .rock-stage::before {
  border-top: 0 !important;
  box-shadow: none !important;
}

.app-shell.rock-shell[data-board-ui="true"] .stage-body,
.app-shell.rock-shell[data-board-ui="true"] .page-swap {
  background: transparent !important;
}

.app-shell.rock-shell[data-board-ui="true"] .wrooms-floor {
  border-color: rgba(94,234,212,.13) !important;
  background: rgba(5,9,15,.9) !important;
}

.app-shell.rock-shell[data-board-ui="true"] input,
.app-shell.rock-shell[data-board-ui="true"] textarea {
  caret-color: var(--board-mint) !important;
}

/* Shared interactive language. */
[data-board-ui="true"] button,
[data-board-ui="true"] a,
[data-wrooms-surface="public"] button,
[data-wrooms-surface="public"] a {
  transition:
    transform 160ms cubic-bezier(.22,1,.36,1),
    border-color 160ms ease,
    background-color 160ms ease,
    box-shadow 160ms ease,
    color 160ms ease;
}

[data-board-ui="true"] button:hover,
[data-wrooms-surface="public"] button:hover { transform: translateY(-1px); }

[data-board-ui="true"] button:focus-visible,
[data-board-ui="true"] a:focus-visible,
[data-wrooms-surface="public"] button:focus-visible,
[data-wrooms-surface="public"] a:focus-visible {
  outline: 2px solid var(--board-mint) !important;
  outline-offset: 2px !important;
}

@media (max-width: 1100px) {
  [data-wrooms-surface="public"] main[data-home-layout="classic"] > section:first-child::before { opacity:.45; right:2rem; }
  .wrooms-workspace-app[data-board-ui="true"] .workspace-stage [aria-label="Wrooms AI Workspace"] > div > div { gap:8px; padding:8px; }
  .app-shell.rock-shell[data-board-ui="true"] .rock-stage { margin:.45rem; border-radius:1.25rem; }
}

@media (max-width: 760px) {
  [data-wrooms-surface="public"] main[data-home-layout="classic"] > section:first-child {
    min-height: 31rem;
    padding: 2rem 1.2rem !important;
  }
  [data-wrooms-surface="public"] main[data-home-layout="classic"] > section:first-child::before { opacity:.22; }
  [data-wrooms-surface="public"] main[data-home-layout="classic"] h1 { font-size: clamp(3rem,16vw,5.2rem) !important; }
  .app-shell.rock-shell[data-board-ui="true"] .rock-stage { margin:0; border-inline:0; border-radius:0; }
}

@media (prefers-reduced-motion: reduce) {
  [data-board-ui="true"] *,
  [data-wrooms-surface="public"] * {
    scroll-behavior: auto !important;
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}