/*
 * Brian Studio Theme: Saint Marrow
 *
 * Noir rain, brass machinery, marrow-light, and ink-dark streets.
 * Shared layout and component geometry remain in tablet.css.
 */

:root[data-theme="saint-marrow"] {
  --theme-bg: #07090b;
  --theme-surface: #11161a;
  --theme-surface-raised: #1a2328;
  --theme-surface-soft: rgba(20, 27, 31, 0.9);
  --theme-text: #e7ece9;
  --theme-muted: #9ca7a2;
  --theme-dim: #68736f;
  --theme-accent: #b38a52;
  --theme-accent-hot: #d9b77d;
  --theme-accent-cool: #78a7b7;
  --theme-border: rgba(183, 148, 96, 0.32);
  --theme-shadow: rgba(0, 0, 0, 0.72);
  --theme-success: #8eb89b;
  --theme-warning: #d2a45c;
  --theme-error: #b85f5f;
  --glyphstone-face: #222a2e;
  --glyphstone-deep: #0d1114;
  --glyphstone-edge: rgba(183, 148, 96, 0.38);
  --glyphstone-rune: rgba(215, 187, 137, 0.42);
  --gem-ready: #8eb89b;
  --gem-warning: #d2a45c;
  --gem-error: #b85f5f;
  --gem-active: #78a7b7;
  --gem-shadow: rgba(0, 0, 0, 0.82);
}

:root[data-theme="saint-marrow"] body {
  position: relative;
  overflow-x: hidden;
  color: var(--theme-text);
  background:
    linear-gradient(rgba(255, 255, 255, 0.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.012) 1px, transparent 1px),
    radial-gradient(circle at 22% 6%, rgba(120, 167, 183, 0.07), transparent 22rem),
    radial-gradient(circle at 84% 16%, rgba(179, 138, 82, 0.055), transparent 26rem),
    linear-gradient(180deg, #0c1114 0%, var(--theme-bg) 76%);
  background-size: 4px 22px, 22px 4px, auto, auto, auto;
}

:root[data-theme="saint-marrow"] .panel,
:root[data-theme="saint-marrow"] .scene-studio-drawer,
:root[data-theme="saint-marrow"] .chapter-scene-card,
:root[data-theme="saint-marrow"] .theme-preview-card {
  border-color: var(--theme-border);
  background:
    linear-gradient(155deg, rgba(255, 255, 255, 0.045), transparent 26%),
    radial-gradient(circle at 16% 0%, rgba(120, 167, 183, 0.055), transparent 12rem),
    linear-gradient(180deg, rgba(24, 31, 35, 0.97), rgba(8, 11, 13, 0.99));
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.028),
    inset 0 -30px 48px rgba(0, 0, 0, 0.34),
    0 20px 42px var(--theme-shadow);
}

:root[data-theme="saint-marrow"] .panel::before,
:root[data-theme="saint-marrow"] .scene-studio-drawer::before,
:root[data-theme="saint-marrow"] .chapter-scene-card::before {
  border-color: rgba(183, 148, 96, 0.1);
}

:root[data-theme="saint-marrow"] button,
:root[data-theme="saint-marrow"] .tool-nav-item,
:root[data-theme="saint-marrow"] .chapter-scene-card__open {
  border-color: var(--glyphstone-edge);
  color: var(--theme-text);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 24%),
    linear-gradient(145deg, #2b3337 0%, #171d20 44%, #0b0f11 100%);
  box-shadow:
    inset 0 1px 0 rgba(235, 225, 204, 0.12),
    inset 0 -10px 18px rgba(0, 0, 0, 0.58),
    inset 0 0 18px rgba(120, 167, 183, 0.025),
    0 10px 24px rgba(0, 0, 0, 0.5);
}

:root[data-theme="saint-marrow"] button:hover,
:root[data-theme="saint-marrow"] button:focus-visible,
:root[data-theme="saint-marrow"] .tool-nav-item:hover,
:root[data-theme="saint-marrow"] .tool-nav-item:focus-visible {
  border-color: rgba(215, 187, 137, 0.72);
  box-shadow:
    inset 0 1px 0 rgba(235, 225, 204, 0.16),
    inset 0 -10px 18px rgba(0, 0, 0, 0.54),
    inset 0 0 24px rgba(120, 167, 183, 0.07),
    0 0 18px rgba(120, 167, 183, 0.14),
    0 14px 30px rgba(0, 0, 0, 0.54);
}

:root[data-theme="saint-marrow"] .tool-nav-item.is-active {
  border-color: rgba(215, 187, 137, 0.78);
  box-shadow:
    inset 0 0 22px rgba(120, 167, 183, 0.055),
    0 0 16px rgba(179, 138, 82, 0.12),
    0 12px 28px rgba(0, 0, 0, 0.5);
}

:root[data-theme="saint-marrow"] .panel h2,
:root[data-theme="saint-marrow"] .scene-context-column h3,
:root[data-theme="saint-marrow"] .scene-ai-group h3,
:root[data-theme="saint-marrow"] .chapter-scene-card__title {
  color: var(--theme-accent-hot);
  text-shadow:
    0 0 10px rgba(179, 138, 82, 0.12),
    0 0 22px rgba(120, 167, 183, 0.06);
}

:root[data-theme="saint-marrow"] .panel h2::after,
:root[data-theme="saint-marrow"] .scene-context-column h3::after,
:root[data-theme="saint-marrow"] .scene-ai-group h3::after {
  background: linear-gradient(90deg, transparent, rgba(120, 167, 183, 0.52) 20%, rgba(215, 187, 137, 0.62) 56%, transparent);
  box-shadow:
    0 0 6px rgba(120, 167, 183, 0.26),
    0 0 11px rgba(179, 138, 82, 0.12);
  animation: saintMarrowBrassGlint 5.6s ease-in-out infinite;
}

:root[data-theme="saint-marrow"] .status-dot,
:root[data-theme="saint-marrow"] .context-badge::before,
:root[data-theme="saint-marrow"] .runtime-badge::before {
  border-color: rgba(86, 75, 61, 0.96);
  background:
    radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.88) 0 6%, transparent 7%),
    radial-gradient(circle at 50% 52%, currentColor 0 40%, #182126 66%, #070a0c 100%);
  box-shadow:
    0 0 0 2px rgba(10, 13, 15, 0.95),
    0 2px 5px var(--gem-shadow),
    inset 0 -2px 4px rgba(0, 0, 0, 0.52),
    0 0 10px currentColor;
}

:root[data-theme="saint-marrow"] .status-dot { color: var(--gem-warning); }
:root[data-theme="saint-marrow"] .status-dot.online,
:root[data-theme="saint-marrow"] .runtime-badge.online::before,
:root[data-theme="saint-marrow"] .context-badge.online::before { color: var(--gem-ready); }
:root[data-theme="saint-marrow"] .status-dot.warning,
:root[data-theme="saint-marrow"] .runtime-badge.warning::before,
:root[data-theme="saint-marrow"] .context-badge.warning::before { color: var(--gem-warning); }

:root[data-theme="saint-marrow"] .chapter-blueprint-actions .primary-action,
:root[data-theme="saint-marrow"] .chapter-scene-card__create-button {
  color: #0d1113;
  border-color: rgba(225, 200, 153, 0.82);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.24), transparent 34%),
    linear-gradient(145deg, #d6b77f 0%, #9b7444 48%, #4c3522 100%);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.24),
    inset 0 -14px 22px rgba(54, 34, 19, 0.34),
    0 0 18px rgba(179, 138, 82, 0.14),
    0 14px 30px rgba(0, 0, 0, 0.46);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.32);
}

:root[data-theme="saint-marrow"] .theme-preview-card.is-active {
  border-color: rgba(215, 187, 137, 0.84);
  box-shadow:
    inset 0 0 24px rgba(120, 167, 183, 0.055),
    0 0 22px rgba(179, 138, 82, 0.12),
    0 16px 34px rgba(0, 0, 0, 0.5);
}

:root[data-theme="saint-marrow"] .theme-preview-card__selection {
  color: #d8c29a;
  border-color: rgba(215, 187, 137, 0.62);
  border-radius: 6px;
  background:
    radial-gradient(circle at 35% 30%, rgba(255,255,255,0.18), transparent 24%),
    linear-gradient(145deg, #344149, #171d20 62%, #0a0d0f);
  box-shadow:
    inset 0 0 10px rgba(120,167,183,0.08),
    0 0 12px rgba(179,138,82,0.16),
    0 0 22px rgba(120,167,183,0.12);
  text-shadow:
    0 0 7px rgba(215,187,137,0.58),
    0 0 12px rgba(120,167,183,0.18);
}

:root[data-theme="saint-marrow"] .theme-preview-card.is-applied::after {
  background: linear-gradient(90deg, transparent, rgba(120,167,183,0.72) 22%, rgba(215,187,137,0.82) 54%, transparent);
  background-size: 200% 100%;
  box-shadow:
    0 0 8px rgba(120,167,183,0.28),
    0 0 12px rgba(179,138,82,0.18);
  animation:
    themeBoundThread 4.5s linear infinite,
    saintMarrowRainGlint 3.8s ease-in-out infinite;
}

:root[data-theme="saint-marrow"] .theme-preview-card.is-applied .theme-preview-card__state::before {
  color: #d8c29a;
  text-shadow:
    0 0 6px rgba(215,187,137,0.46),
    0 0 10px rgba(120,167,183,0.18);
}

:root[data-theme="saint-marrow"] .chapter-scene-card--create {
  background:
    linear-gradient(165deg, rgba(255, 255, 255, 0.055), transparent 24%),
    radial-gradient(circle at 50% 18%, rgba(120, 167, 183, 0.08), transparent 9rem),
    radial-gradient(circle at 50% 74%, rgba(179, 138, 82, 0.08), transparent 11rem),
    linear-gradient(180deg, #2b3438 0%, #171d20 46%, #090c0e 100%);
}

:root[data-theme="saint-marrow"] .chapter-scene-card__create-glyph {
  color: #d7bb89;
  border-color: rgba(215, 187, 137, 0.34);
  background:
    radial-gradient(circle, rgba(120, 167, 183, 0.09), transparent 58%),
    rgba(7, 10, 12, 0.5);
  box-shadow:
    inset 0 0 16px rgba(120, 167, 183, 0.06),
    0 0 18px rgba(179, 138, 82, 0.12),
    0 0 34px rgba(120, 167, 183, 0.08);
  text-shadow:
    0 0 10px rgba(215, 187, 137, 0.56),
    0 0 22px rgba(120, 167, 183, 0.18);
}

/* === Saint Marrow Atmosphere === */
:root[data-theme="saint-marrow"] body::before {
  display: none;
}

:root[data-theme="saint-marrow"] body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
}

:root[data-theme="saint-marrow"] body::after {
  z-index: 0;
  background:
    radial-gradient(ellipse at 8% 78%, rgba(120, 167, 183, 0.16), transparent 34rem),
    radial-gradient(ellipse at 92% 68%, rgba(215, 187, 137, 0.09), transparent 30rem),
    radial-gradient(ellipse at 48% 108%, rgba(176, 197, 202, 0.12), transparent 46rem),
    linear-gradient(180deg, rgba(7, 10, 12, 0.06) 0 52%, rgba(4, 6, 7, 0.46) 100%);
  box-shadow:
    inset 0 0 180px rgba(0, 0, 0, 0.68),
    inset 0 -120px 170px rgba(0, 0, 0, 0.52);
  opacity: 0.94;
}

:root[data-theme="saint-marrow"] .theme-forge-glow,
:root[data-theme="saint-marrow"] .theme-forge-glow::before {
  animation: none;
}

.saint-marrow-rain-layer {
  position: fixed;
  inset: 0;
  z-index: 40;
  overflow: hidden;
  pointer-events: none;
  contain: strict;
}

.saint-marrow-raindrop {
  position: absolute;
  top: calc(-12vh - var(--rain-length));
  left: var(--rain-x);
  width: 1px;
  height: var(--rain-length);
  opacity: 0;
  background: linear-gradient(
    180deg,
    transparent,
    rgba(201, 226, 233, 0.45) 28%,
    rgba(229, 242, 246, 0.72)
  );
  transform: translate3d(0, -12vh, 0) rotate(8deg);
  animation: saintMarrowDropFall var(--rain-duration) linear infinite;
  animation-delay: var(--rain-delay);
  will-change: opacity, transform;
}

:root[data-theme="saint-marrow"] .app-shell,
:root[data-theme="saint-marrow"] .tool-rail,
:root[data-theme="saint-marrow"] [data-screen] {
  position: relative;
  z-index: 1;
}

:root[data-theme="saint-marrow"] .panel,
:root[data-theme="saint-marrow"] .scene-studio-drawer,
:root[data-theme="saint-marrow"] .theme-preview-card {
  backdrop-filter: blur(8px) saturate(0.9);
  -webkit-backdrop-filter: blur(8px) saturate(0.9);
}

:root[data-theme="saint-marrow"] .panel,
:root[data-theme="saint-marrow"] .scene-studio-drawer,
:root[data-theme="saint-marrow"] .theme-preview-card,
:root[data-theme="saint-marrow"] .tool-rail {
  position: relative;
  overflow: hidden;
}

:root[data-theme="saint-marrow"] .panel::after,
:root[data-theme="saint-marrow"] .scene-studio-drawer::after,
:root[data-theme="saint-marrow"] .theme-preview-card::after,
:root[data-theme="saint-marrow"] .tool-rail::after {
  content: "";
  position: absolute;
  inset: -40% -55%;
  pointer-events: none;
  background: linear-gradient(112deg, transparent 42%, rgba(229, 210, 174, 0.035) 47%, rgba(229, 210, 174, 0.14) 50%, rgba(120, 167, 183, 0.045) 53%, transparent 58%);
  transform: translateX(-46%);
  animation: saintMarrowGaslightSweep 11s ease-in-out infinite;
}

@keyframes saintMarrowDropFall {
  0% {
    opacity: 0;
    transform: translate3d(0, -12vh, 0) rotate(8deg);
  }

  12%, 78% {
    opacity: var(--rain-opacity);
  }

  100% {
    opacity: 0;
    transform: translate3d(var(--rain-drift), 118vh, 0) rotate(8deg);
  }
}

@keyframes saintMarrowGaslightSweep {
  0%, 18% {
    transform: translateX(-52%);
    opacity: 0;
  }

  32%, 56% { opacity: 0.9; }

  72%, 100% {
    transform: translateX(52%);
    opacity: 0;
  }
}

@keyframes saintMarrowBrassGlint {
  0%, 100% {
    opacity: 0.48;
    filter: brightness(0.9);
  }

  50% {
    opacity: 0.82;
    filter: brightness(1.22);
  }
}

@keyframes saintMarrowRainGlint {
  0%, 100% { filter: brightness(0.9); }
  50% { filter: brightness(1.18); }
}

@media (prefers-reduced-motion: reduce) {
  :root[data-theme="saint-marrow"] body::before,
  :root[data-theme="saint-marrow"] body::after,
  :root[data-theme="saint-marrow"] .theme-forge-glow,
  :root[data-theme="saint-marrow"] .theme-forge-glow::before,
  .saint-marrow-raindrop,
  :root[data-theme="saint-marrow"] .panel::after,
  :root[data-theme="saint-marrow"] .scene-studio-drawer::after,
  :root[data-theme="saint-marrow"] .theme-preview-card::after,
  :root[data-theme="saint-marrow"] .tool-rail::after,
  :root[data-theme="saint-marrow"] .panel h2::after,
  :root[data-theme="saint-marrow"] .scene-context-column h3::after,
  :root[data-theme="saint-marrow"] .scene-ai-group h3::after,
  :root[data-theme="saint-marrow"] .theme-preview-card.is-applied::after {
    animation: none;
  }
}