/* AwwO family — shared by /awwo, /awwo-plans, /awwo-chat, /awwo-studio and /awwo-workbench.
   "Night dive": deep-water chapters, bioluminescent teal and lilac, wet glass.
   .awwo-night re-declares the semantic tokens with the night palette, so every shared
   component (buttons, chips, inputs, status) renders correctly inside an always-dark
   chapter whatever the page theme is. */

.awwo-night {
  --bg: #041219;
  --bg-deep: #030d14;
  --surface: #0b2232;
  --surface-2: #10293a;
  --surface-glass: rgb(9 30 45 / 0.62);
  --line: rgb(140 200 220 / 0.16);
  --line-soft: rgb(140 200 220 / 0.1);
  --line-strong: rgb(160 215 230 / 0.28);
  --ink: #eaf3f5;
  --ink-2: #aec3ca;
  --ink-3: #86a0a9;
  --ink-inverse: #041219;
  --accent: #4c9cf5;
  --accent-ink: #7db8ff;
  --accent-soft: #11294a;
  --link: #8fe3e4;
  --link-hover: #c4f4f4;
  --focus: #8fe3e4;
  --held: #5fd0d4;
  --held-soft: #0f3540;
  --ok: #5cc28f;
  --ok-soft: #12352a;
  --warn: #e0a84a;
  --warn-soft: #3a2c12;
  --bad: #ff7a70;
  --bad-soft: #3d1a1c;
  --btn: #eaf3f5;
  --btn-ink: #041219;
  --btn-hover: #ffffff;
  --shadow-float: 0 18px 48px -16px rgb(0 0 0 / 0.62), 0 1px 0 rgb(255 255 255 / 0.04) inset;
  --shadow-pop: 0 28px 80px -20px rgb(0 0 0 / 0.74);
  --bio-teal: #5fe3e8;
  --bio-lilac: #a99bff;
  color-scheme: dark;
  background: var(--bg);
  color: var(--ink);
}

/* Pages whose header floats over a night chapter (the /awwo tank, the /awwo-plans hero):
   light ink until the header turns into glass. Menus keep the day palette. */
:root:is([data-page="awwo"], [data-page="awwo-plans"]):not([data-theme="dark"]) .site-header--over-tank:not(.is-floating):not(.is-menu-open) .site-header__bar {
  --ink: #eaf3f5;
  --ink-2: #c4d5da;
  --btn: #eaf3f5;
  --btn-ink: #041219;
  --btn-hover: #ffffff;
  --surface-2: rgb(255 255 255 / 0.1);
  color: var(--ink);
}

/* the header over the night tank shows the white wordmark artwork */
:root:is([data-page="awwo"], [data-page="awwo-plans"]):not([data-theme="dark"]) .site-header--over-tank:not(.is-floating):not(.is-menu-open) .site-header__bar .logo__img--light {
  display: none;
}

:root:is([data-page="awwo"], [data-page="awwo-plans"]):not([data-theme="dark"]) .site-header--over-tank:not(.is-floating):not(.is-menu-open) .site-header__bar .logo__img--dark {
  display: block;
}

:root:is([data-page="awwo"], [data-page="awwo-plans"]):not([data-theme="dark"]) .site-header--over-tank:not(.is-floating):not(.is-menu-open) .site-header__bar .avatar {
  --tint: #cfe3e8;
}

:root:is([data-page="awwo"], [data-page="awwo-plans"]):not([data-theme="dark"]) .site-header__bar .nav__menu {
  --ink: #0b2230;
  --ink-2: #4b5d65;
  --ink-3: #6f8187;
  --surface-2: #e3e8e7;
}

/* Bioluminescent hues used across the family in both themes */
:root {
  --bio-teal: #2bb3bb;
  --bio-lilac: #8b78e6;
}

[data-theme="dark"] {
  --bio-teal: #5fe3e8;
  --bio-lilac: #a99bff;
}

/* The AwwO mark: a small glass sphere with a lit core — the "glass mind" in miniature */
.awwo-orb {
  --size: 36px;
  position: relative;
  flex: none;
  display: inline-block;
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  background:
    radial-gradient(circle at 33% 28%, rgb(255 255 255 / 0.92) 0 5%, transparent 21%),
    radial-gradient(circle at 52% 58%, #e9fdff 0 5%, #5fe3e8 16%, rgb(120 100 240 / 0.85) 40%, rgb(16 42 74 / 0.95) 66%),
    #0a1c33;
  box-shadow:
    inset 0 0 0 1px rgb(255 255 255 / 0.2),
    inset -3px -5px 9px rgb(0 0 0 / 0.38),
    0 6px 16px -6px rgb(63 214 224 / 0.55);
}

.awwo-orb::after {
  /* the thin orbit */
  content: "";
  position: absolute;
  inset: 38% -18%;
  border-radius: 50%;
  border: 1px solid rgb(214 208 255 / 0.7);
  transform: rotate(-9deg);
  pointer-events: none;
}

.awwo-orb--lg {
  --size: 72px;
}

.awwo-orb--sm {
  --size: 24px;
}

.awwo-orb--sm::after {
  display: none;
}

.awwo-orb.is-working {
  animation: awwo-breathe 1.8s var(--ease-in-out) infinite;
}

@keyframes awwo-breathe {
  50% {
    box-shadow:
      inset 0 0 0 1px rgb(255 255 255 / 0.24),
      inset -3px -5px 9px rgb(0 0 0 / 0.3),
      0 0 0 6px rgb(95 227 232 / 0.16),
      0 6px 22px -4px rgb(95 227 232 / 0.75);
  }
}

/* Glass panel for night chapters */
.awwo-glass {
  /* no backdrop-filter: this sits on a live 3D scene or video; blurring it re-reads that
     surface every frame and flickers on some GPUs */
  border-radius: var(--r-panel);
  /* night chapters stay dark in both themes and set light text; the theme token
     (--surface-glass-solid) turns near-white in the light theme, under that light text */
  background: rgb(10 30 42 / 0.9);
  box-shadow: var(--shadow-float), 0 0 0 1px var(--line) inset;
}

/* Sentence-case label with a bioluminescent pip */
.awwo-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--ink-2);
}

.awwo-label::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--bio-teal);
  box-shadow: 0 0 10px var(--bio-teal);
}

/* Tool names are real identifiers, so they may use the code face */
.awwo-tool {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding-inline: 8px;
  border-radius: 7px;
  background: color-mix(in oklab, var(--bio-teal) 12%, var(--surface-2));
  color: var(--ink-2);
  font-family: var(--font-code);
  font-size: 0.75rem;
}