/* ===========================================================================
   siriusly.ai - dark base resets & primitives
   =========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-body-md);
  line-height: var(--leading-normal);
  color: var(--text-body);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---------------------------------------------------------------------------
   "Ember corner" - the page backdrop, from the design system's background study
   (site/backgrounds.html). Three layers over the flat --surface-page: an
   off-canvas orange bloom behind the top-left of the page, a soft glow in the
   opposite corner, and an oversized Iris Star bleeding out of that corner.

   Both pseudo-elements are fixed, so the composition stays put while the page
   scrolls - the same thing the design's own preview does. They sit at z-index
   -1, which paints them above the page canvas but below everything on it, and
   which is why only <body> may paint --surface-page: any other element that
   fills the viewport with an opaque background hides the backdrop behind it.

   The star is the Iris mark from _brand_mark.html, inlined as a data URI so the
   backdrop costs no extra request and no markup in the templates.
   --------------------------------------------------------------------------- */
:root {
  /* Sized off the viewport so the composition holds at any width, the way it
     does in the design preview, with bounds so it stays sane on a phone or an
     ultrawide. The offsets below bleed a third of the mark off each edge. */
  --backdrop-iris-size: clamp(360px, 58vw, 1000px);
}

body::before,
body::after {
  content: "";
  position: fixed;
  z-index: -1;
  pointer-events: none;
}

body::before {
  inset: 0;
  background:
    radial-gradient(134% 130% at 12% -12%, rgba(208, 126, 69, 0.30), transparent 68%),
    radial-gradient(92% 90% at 88% 88%, rgba(208, 126, 69, 0.14), transparent 70%);
}

body::after {
  width: var(--backdrop-iris-size);
  height: var(--backdrop-iris-size);
  right: calc(var(--backdrop-iris-size) * -0.32);
  bottom: calc(var(--backdrop-iris-size) * -0.35);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath fill='%23D07E45' fill-opacity='.42' fill-rule='evenodd' d='M4 32a28 28 0 1 0 56 0a28 28 0 1 0-56 0ZM32 12L34.68 25.53L46.14 17.86L38.47 29.32L52 32L38.47 34.68L46.14 46.14L34.68 38.47L32 52L29.32 38.47L17.86 46.14L25.53 34.68L12 32L25.53 29.32L17.86 17.86L29.32 25.53Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--text-strong);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-snug);
  margin: 0;
}

a { color: var(--text-link); text-decoration: none; }
a:hover { color: var(--orange-300); text-decoration: underline; }

::selection { background: var(--orange-500); color: var(--coal-950); }

.font-display { font-family: var(--font-display); }
.font-mono { font-family: var(--font-mono); }

@keyframes sr-spin { to { transform: rotate(360deg); } }
@keyframes sr-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes sr-pop { from { opacity: 0; transform: translateY(8px) scale(0.98); } to { opacity: 1; transform: none; } }
@keyframes sr-slide-in { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }
@keyframes sr-indeterminate { 0% { transform: translateX(-100%); } 100% { transform: translateX(350%); } }
@keyframes sr-dot-pulse { 0%, 80%, 100% { opacity: 0.3; transform: scale(0.8); } 40% { opacity: 1; transform: scale(1); } }

/* Utility: signature gradient text */
.text-gradient {
  background: var(--gradient-signature);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Utility: themed native <audio controls> bar - studio's voice preview and
   the product editor's pronunciation preview both use this class so the
   native player matches app chrome instead of the browser's raw UA styling. */
.voice-preview-audio {
  width: 100%;
  height: 40px;
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  background: var(--surface-hover);
  overflow: hidden;
  /* The native player panel/icons only follow the app's own light/dark toggle
     via this - color-scheme is what tells Chrome whether to draw light or
     dark built-in iconography; the light-mode flip lives in colors.light.css,
     same place every other dark-hardcoded value in this file gets fixed. */
  color-scheme: dark;
}
.voice-preview-audio::-webkit-media-controls-panel {
  background-color: var(--surface-hover);
}
/* No sample generated yet - shown src-less instead of hidden outright, so the
   field never leaves a blank gap while a script/name is still settling.
   Dimmed and unclickable rather than a real disabled state: <audio> has no
   disabled attribute, and a src-less player is already inert (nothing to
   play/seek) - this just makes that visually obvious instead of looking like
   a live, ready player that simply isn't responding to clicks. */
.voice-preview-audio.is-empty {
  opacity: 0.5;
  pointer-events: none;
}