/*
 * Aurora Glass — Maajii logged-in design system (dark, glassmorphism).
 * Built from BRAND_TOKENS.md (extracted from the landing page styles.css).
 * Used by the login (demo-access.html) and the workspace (dashboard.html).
 * Self-contained: these pages link ONLY this stylesheet, so the landing page's
 * light-theme tokens never bleed in. Legacy token names are aliased at the end
 * so any pre-existing inline rules still resolve on the dark canvas.
 */

:root {
  color-scheme: dark;

  /* Canvas & surfaces (matched to the landing page dark theme) */
  --bg-base: #0d1315;
  --bg-raised: #11191c;

  /* Brand accents (landing dark theme) */
  --accent: #37a08f;
  --accent-2: #6ccfc0;
  --green-deep: #21483f;
  --coral: #f2845f;
  --coral-2: #d97962;
  --sun: #e0b75c;
  --accent-pink: #ef85a8;

  /* Aurora light ramp (SPEC-17 D2) — sampled from the reference aurora
     photos, NOT from the brand palette (UI accents above stay untouched).
     Dark = fjord photo: vivid green base → teal-green → violet top, with a
     magenta nitrogen fringe and a pale core; ember keeps a nod to the brand
     coral. Read by aurora-bg.js and passed to the canvas engine. */
  --aurora-base: #58e87e; /* bright green — curtain's lower edge */
  --aurora-mid: #37d9a0; /* teal-green — body of the curtain */
  --aurora-top: #8b6cf5; /* violet — high-altitude top */
  --aurora-fringe: #ea6fae; /* magenta — thin fringe under the bright edge */
  --aurora-core: #f0ebf5; /* pale core highlight (used sparingly) */
  --aurora-ember: #f2845f; /* subtle warm accent (brand coral) */

  /* Text */
  --text-primary: #eef6f3;
  --text-secondary: rgba(238, 246, 243, 0.66);
  --text-tertiary: rgba(238, 246, 243, 0.42);

  /* Glass */
  --glass-fill: rgba(255, 255, 255, 0.08);
  --glass-fill-2: rgba(255, 255, 255, 0.13);
  --glass-border: rgba(255, 255, 255, 0.12);
  --glass-border-strong: rgba(255, 255, 255, 0.2);

  /* Status */
  --pos: #6fd89a;
  --warn: #f2c879;
  --neg: #f08c8c;

  /* Gradients */
  --grad-signal: linear-gradient(135deg, #37a08f 0%, #6ccfc0 50%, #f2845f 100%);
  --grad-glow: radial-gradient(
    closest-side,
    rgba(55, 160, 143, 0.35),
    transparent
  );

  /* Radius / elevation */
  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-xl: 30px;
  --shadow-glass:
    0 10px 34px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.14),
    inset 0 0 0 1px rgba(255, 255, 255, 0.02);

  /* Type scale (SPEC-11 §3.1) — fluid clamp() so large desktops gain type size,
     not just margin; the min holds at ≤1024px and scales to max by ~1600px.
     16px body floor (15px hard floor for any content text); micro (12px) is for
     pills/badges only, never running text. */
  --fs-display: clamp(
    2.75rem,
    1.42rem + 2.08vw,
    3.5rem
  ); /* 44 → 56 hero numeral */
  --fs-h1: clamp(1.875rem, 1.43rem + 0.69vw, 2.125rem); /* 30 → 34 page title */
  --fs-h2: clamp(1.25rem, 1.03rem + 0.35vw, 1.375rem); /* 20 → 22 card title */
  --fs-h3: clamp(
    1.0625rem,
    0.95rem + 0.17vw,
    1.125rem
  ); /* 17 → 18 sub-heading */
  --fs-body: clamp(1rem, 0.78rem + 0.35vw, 1.125rem); /* 16 → 18 body (floor) */
  --fs-caption: clamp(
    0.8125rem,
    0.7rem + 0.17vw,
    0.875rem
  ); /* 13 → 14 metadata */
  --fs-micro: 0.75rem; /* 12 pills/badges only */
  --lh-body: 1.5;
  --lh-heading: 1.2;
  --measure: 70ch; /* max paragraph width */

  /* Theme-variable surfaces (overridden in light mode) */
  --field-bg: rgba(0, 0, 0, 0.22);
  --field-bg-focus: rgba(0, 0, 0, 0.3);
  --scrim: linear-gradient(180deg, rgba(7, 10, 9, 0.35), rgba(7, 10, 9, 0.55));
  --orb-opacity: 0.55;
  --inset-tint: rgba(255, 255, 255, 0.02);

  font-family:
    Inter,
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

  /* Legacy aliases (so leftover inline references stay on-theme) */
  --paper: var(--bg-base);
  --paper-2: var(--bg-raised);
  --ink: var(--text-primary);
  --text: var(--text-primary);
  --muted: var(--text-secondary);
  --line: var(--glass-border);
  --line-dark: var(--glass-border);
  --surface-card: var(--glass-fill);
  --shadow: var(--shadow-glass);
}

/* Light mode — same brand accents, light canvas + glass. Set on <html> so the
   inline head script can apply it before first paint (no flash). Dark is the
   default (no attribute or data-theme="dark"). */
:root[data-theme="light"] {
  color-scheme: light;
  /* Sage-teal, matched to the landing page HERO base gradient. */
  --bg-base: #a4c4bc;
  --bg-raised: #b3cdc5;

  --text-primary: #08180f;
  --text-secondary: rgba(8, 24, 15, 0.66);
  --text-tertiary: rgba(8, 24, 15, 0.46);

  /* Landing-accurate glow hues (drive the focus ring + UI accents in light). */
  --accent: #2f7b6f;
  --accent-2: #4f9e8f;
  --coral: #d97962;
  --sun: #e0b75c;

  /* Sunset ramp (founder direction 2026-07-06) — the LIGHT scene is a SUNSET,
     not an aurora: a brand-orange sun low on the horizon with drifting cloud
     streaks that shift colour with their distance to the moving sun. Read by
     aurora-bg.js → aurora-engine.js (drawSunset). Ordered [base, mid, top,
     fringe, core, ember]; here that maps to sun/cloud roles: */
  --aurora-base: #f2804f; /* brand orange — the sun's body + near-sun clouds */
  --aurora-mid: #e8688f; /* coral-pink — mid-distance clouds */
  --aurora-top: #f4a26b; /* peach — high lit clouds */
  --aurora-fringe: #a64268; /* deep rose — cloud undersides */
  --aurora-core: #ffe6c9; /* pale warm — the bright sun core highlight */
  --aurora-ember: #8f6fb0; /* muted violet — distant clouds furthest from the sun */

  /* Truly glassy in light mode: the white fills stay translucent so the
     aurora glows through every pane (widget inners included), not just the
     card borders. Dark text still reads over the blurred sage (AA holds —
     near-black ink over a ≤ mid-teal blurred base). */
  --glass-fill: rgba(255, 255, 255, 0.13);
  --glass-fill-2: rgba(255, 255, 255, 0.21);
  --glass-border: rgba(20, 60, 50, 0.18);
  --glass-border-strong: rgba(20, 60, 50, 0.32);

  --shadow-glass:
    0 14px 40px rgba(8, 30, 24, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.5);

  --field-bg: rgba(255, 255, 255, 0.3);
  --field-bg-focus: rgba(255, 255, 255, 0.66);
  --scrim: linear-gradient(
    180deg,
    rgba(189, 210, 204, 0),
    rgba(178, 201, 194, 0.18)
  );
  --orb-opacity: 0.68;
  --inset-tint: rgba(20, 60, 50, 0.05);

  /* The signal gradient is bright; on light buttons keep dark ink. */
  --link: #1a6a5d;
}
:root[data-theme="light"] a {
  color: var(--link);
}

/* Theme set/rise transition (theme.js adds .theme-anim on <html> for the
   duration of the toggle animation): crossfade the box/widgets' own dark↔light
   surfaces so they morph seamlessly instead of hard-popping when the theme
   swaps mid-animation. Scoped to colour/border/shadow only (never layout), and
   only while the class is present, so normal interactions stay instant.
   Suppressed under reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  :root.theme-anim body,
  :root.theme-anim .glass,
  :root.theme-anim .button,
  :root.theme-anim input,
  :root.theme-anim select,
  :root.theme-anim textarea,
  :root.theme-anim .pill,
  :root.theme-anim .theme-toggle {
    transition:
      background-color 700ms ease,
      color 700ms ease,
      border-color 700ms ease,
      box-shadow 700ms ease;
  }
}

* {
  box-sizing: border-box;
}
[hidden] {
  display: none !important;
}

/* Base type size lifted for legibility (SPEC-11): everything sized in rem scales
   up a notch, and a little more on large desktops. This is the single biggest
   clarity lever — headings, body, labels, paddings and gaps all grow together. */
html {
  scroll-behavior: smooth;
  font-size: clamp(16.5px, 14.8px + 0.22vw, 18.5px);
}
/* Page-level horizontal-overflow guard. `clip` (unlike hidden/auto) does not
   create a scroll container, so position:sticky still works — but a stray wide
   element can never widen the page (which would let a position:fixed element
   anchored with `right` ride the expanded layout viewport off-screen, e.g. the
   top-right theme toggle). Internal scrollers (the milestone board) set their
   own overflow-x and are unaffected. */
html,
body {
  overflow-x: clip;
}
body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg-base);
  color: var(--text-primary);
  /* 16px body floor, fluid up to 18px on large desktops (SPEC-11 §3.1). */
  font-family:
    Inter,
    ui-sans-serif,
    system-ui,
    -apple-system,
    "Segoe UI",
    sans-serif;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
}
a {
  color: var(--accent-2);
}

/* Heading scale (SPEC-11 §3.1); components may override per context. */
h1,
h2,
h3 {
  line-height: var(--lh-heading);
  letter-spacing: -0.01em;
}
h1 {
  font-size: var(--fs-h1);
}
h2 {
  font-size: var(--fs-h2);
}
h3 {
  font-size: var(--fs-h3);
}

/* ---- Ambient background (Layer 0/1/2) -------------------------------- */
/* A single fixed full-viewport layer. Drifting gradient orbs in the brand
   stops glow through the glass above. A faint scrim keeps text legible. */
.aurora-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  /* Faint side tints echo the curtains' placement (green right, violet left). */
  background:
    radial-gradient(
      90% 120% at 100% 0%,
      rgba(88, 232, 126, 0.07),
      transparent 55%
    ),
    radial-gradient(
      90% 120% at 0% 10%,
      rgba(139, 108, 245, 0.07),
      transparent 55%
    ),
    var(--bg-base);
}
/* Grain/dither overlay (SPEC-17 D1): a static tiling noise texture over the
   whole background stack kills gradient banding on the large soft glows.
   Painted after the orbs/canvas/scrim (pseudo-element = last child). */
.aurora-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 160px 160px;
  opacity: 0.035;
}
/* Light mode: a SUNSET SKY base (founder direction 2026-07-06; refined
   2026-07-07 to drop the hard horizon LINE while keeping the sunset). A cool
   blue-teal high sky eases smoothly down through lavender to a warm coral/amber
   glow LOW on the page — but there is no distinct ground band: the warm sky
   simply continues to the bottom edge, so the bottom of the page reads as the
   (off-screen) horizon. The warm sun glow sits low-centre, mostly hidden behind
   the content tiles; a pink cloud bank low to one side, a cool violet cloud
   high on the other. The animated canvas (drawSunset) then drifts the real sun
   + cloud streaks on top (the sun stays low and subtle); this gradient is the
   pre-canvas / no-JS / reduced-motion fallback. Kept light enough that dark ink
   over the blurred, scrimmed glass still passes AA. */
:root[data-theme="light"] .aurora-bg {
  background:
    radial-gradient(
      ellipse 72% 40% at 50% 96%,
      rgba(255, 210, 165, 0.6),
      transparent 66%
    ),
    radial-gradient(
      ellipse 52% 30% at 82% 84%,
      rgba(232, 122, 150, 0.3),
      transparent 60%
    ),
    radial-gradient(
      ellipse 50% 32% at 14% 26%,
      rgba(143, 111, 176, 0.24),
      transparent 60%
    ),
    linear-gradient(
      179deg,
      #9dc1c6 0%,
      #a9c1c4 26%,
      #c3bcc4 48%,
      #e2b8ad 72%,
      #f0bd94 90%,
      #eeb488 100%
    );
}
.aurora-bg .orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: var(--orb-opacity);
  will-change: transform;
}
/* Static-orb fallback tinted from the aurora ramp (photo-sampled), hugging
   the page sides: violet left, green right, magenta low-left (dark). */
.aurora-bg .orb-1 {
  width: 46vw;
  height: 46vw;
  left: -12vw;
  top: -10vw;
  background: radial-gradient(
    closest-side,
    rgba(139, 108, 245, 0.6),
    transparent
  );
  animation: drift1 34s ease-in-out infinite alternate;
}
.aurora-bg .orb-2 {
  width: 40vw;
  height: 40vw;
  right: -12vw;
  top: -6vw;
  background: radial-gradient(
    closest-side,
    rgba(88, 232, 126, 0.6),
    transparent
  );
  animation: drift2 40s ease-in-out infinite alternate;
}
.aurora-bg .orb-3 {
  width: 50vw;
  height: 50vw;
  left: -8vw;
  bottom: -22vw;
  background: radial-gradient(
    closest-side,
    rgba(234, 111, 174, 0.45),
    transparent
  );
  animation: drift3 46s ease-in-out infinite alternate;
}
/* Light mode: sunset fallback orbs — cool violet cloud high-left, pink cloud
   top-right, warm sun glow low. Matches the drawSunset canvas it stands in for. */
:root[data-theme="light"] .aurora-bg .orb-1 {
  background: radial-gradient(
    closest-side,
    rgba(143, 111, 176, 0.55),
    transparent
  );
}
:root[data-theme="light"] .aurora-bg .orb-2 {
  background: radial-gradient(
    closest-side,
    rgba(232, 104, 143, 0.6),
    transparent
  );
}
:root[data-theme="light"] .aurora-bg .orb-3 {
  background: radial-gradient(
    closest-side,
    rgba(242, 128, 79, 0.75),
    transparent
  );
}
.aurora-bg .scrim {
  position: absolute;
  inset: 0;
  background: var(--scrim);
}
/* Animated canvas aurora (aurora-bg.js). Rendered at low res and upscaled, so
   it reads as soft glowing light. Both themes animate the canvas; the CSS
   orbs above are the pre-canvas / no-JS / reduced-motion fallback. */
.aurora-bg .aurora-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
/* Once the animated canvas is drawing it replaces the static orbs in BOTH
   themes (the canvas is the richer, more dynamic version); the hero gradient
   base and the scrim stay. Light mode now animates as much as dark. */
.aurora-bg.canvas-active .orb {
  opacity: 0;
  transition: opacity 600ms ease;
}
@keyframes drift1 {
  to {
    transform: translate3d(8vw, 10vh, 0) scale(1.12);
  }
}
@keyframes drift2 {
  to {
    transform: translate3d(-9vw, 8vh, 0) scale(1.08);
  }
}
@keyframes drift3 {
  to {
    transform: translate3d(6vw, -8vh, 0) scale(1.15);
  }
}

@media (prefers-reduced-motion: reduce) {
  .aurora-bg .orb {
    animation: none !important;
  }
}

/* ---- Glass panel ----------------------------------------------------- */
.glass {
  position: relative;
  background-color: var(--glass-fill);
  /* Soft top-down sheen sells the frosted-glass edge on top of the blur. */
  background-image: linear-gradient(
    160deg,
    rgba(255, 255, 255, 0.12),
    rgba(255, 255, 255, 0) 46%
  );
  -webkit-backdrop-filter: blur(26px) saturate(155%);
  backdrop-filter: blur(26px) saturate(155%);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-glass);
  /* Own compositor layer: without it the backdrop blur repaints on the
     scroll thread's schedule, and fast scrolling shows stale un-blurred
     blocks at the leading edge before they snap into the pane. */
  transform: translateZ(0);
}
.glass.raised {
  background-color: var(--glass-fill-2);
}
.glass.accent {
  border-color: transparent;
}
.glass.accent::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: inherit;
  background: var(--grad-signal);
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.glass.hoverable {
  transition:
    background 180ms ease,
    border-color 180ms ease,
    transform 180ms ease;
}
.glass.hoverable:hover {
  background-color: var(--glass-fill-2);
  border-color: var(--glass-border-strong);
}

/* No-blur fallback (older browsers / reduced transparency) */
@supports not (
  (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))
) {
  .glass {
    background: var(--bg-raised);
  }
  .glass.raised {
    background: #131d1a;
  }
}

/* ---- Buttons --------------------------------------------------------- */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font: inherit;
  font-weight: 700;
  line-height: 1;
  padding: 0.7rem 1.1rem;
  border-radius: 999px;
  cursor: pointer;
  border: 1px solid var(--glass-border-strong);
  background: var(--glass-fill);
  color: var(--text-primary);
  transition:
    background 160ms ease,
    border-color 160ms ease,
    transform 120ms ease,
    box-shadow 160ms ease;
  text-decoration: none;
}
.button:hover {
  background: var(--glass-fill-2);
  border-color: var(--glass-border-strong);
}
.button:active {
  transform: translateY(1px);
}
.button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.button-primary {
  border: none;
  color: #06100e;
  font-weight: 800;
  background: var(--grad-signal);
  box-shadow: 0 6px 20px rgba(55, 160, 143, 0.35);
}
.button-primary:hover {
  filter: brightness(1.06);
  background: var(--grad-signal);
}
.button-ghost {
  background: transparent;
}
.button-ghost:hover {
  background: var(--glass-fill);
}
.button-danger {
  border: none;
  color: #2a0c0a;
  font-weight: 800;
  background: linear-gradient(135deg, #f2845f, #f08c8c);
}

/* ---- Forms ----------------------------------------------------------- */
label {
  font-weight: 700;
  font-size: 0.9rem;
}
input,
select,
textarea {
  font: inherit;
  width: 100%;
  color: var(--text-primary);
  padding: 0.62rem 0.75rem;
  border-radius: var(--r-sm);
  background: var(--field-bg);
  border: 1px solid var(--glass-border);
  transition:
    border-color 140ms ease,
    box-shadow 140ms ease,
    background 140ms ease;
}
input::placeholder,
textarea::placeholder {
  color: var(--text-tertiary);
}
input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(55, 160, 143, 0.25);
  background: var(--field-bg-focus);
}
textarea {
  min-height: 80px;
  resize: vertical;
}
select option {
  color: #0b0f0e;
}

/* Visible focus on all interactive glass (a11y) */
:focus-visible {
  outline: 2px solid var(--accent-2);
  outline-offset: 2px;
}

/* ---- Bits ------------------------------------------------------------ */
.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: var(--fs-micro);
  font-weight: 800;
  color: var(--accent-2);
  margin: 0;
}
.hint {
  color: var(--text-secondary);
  font-size: 0.92rem;
}
.status {
  min-height: 1.3em;
  margin: 0;
  color: var(--text-secondary);
  font-size: 0.92rem;
}
.status.is-error {
  color: var(--neg);
}
.status.is-success {
  color: var(--pos);
}
.pill {
  display: inline-block;
  padding: 0.2rem 0.7rem;
  border-radius: 999px;
  background: rgba(55, 160, 143, 0.18);
  border: 1px solid rgba(55, 160, 143, 0.35);
  color: var(--text-primary);
  font-size: 0.78rem;
  font-weight: 800;
}
.pill.warn {
  background: rgba(242, 200, 121, 0.16);
  border-color: rgba(242, 200, 121, 0.4);
}

/* Directive empty / placeholder state */
.empty,
.placeholder {
  color: var(--text-secondary);
  border: 1px dashed var(--glass-border);
  border-radius: var(--r-md);
  padding: 1rem;
  background: var(--inset-tint);
}
.placeholder + .placeholder {
  margin-top: 0.7rem;
}

/* Skeleton shimmer */
.skeleton {
  border-radius: var(--r-sm);
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.04),
    rgba(255, 255, 255, 0.09),
    rgba(255, 255, 255, 0.04)
  );
  background-size: 200% 100%;
  animation: shimmer 1.3s ease-in-out infinite;
}
@keyframes shimmer {
  to {
    background-position: -200% 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .skeleton {
    animation: none;
  }
}

/* ---- Theme toggle ---------------------------------------------------- */
/* A round glass icon button. JS swaps the sun/moon SVG. Works inline (nav)
   or via .theme-toggle-fixed which pins it to the top-right of a page. */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  padding: 0;
  cursor: pointer;
  border-radius: 999px;
  color: var(--text-primary);
  background: var(--glass-fill);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  backdrop-filter: blur(20px) saturate(140%);
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-glass);
  transition:
    background 160ms ease,
    border-color 160ms ease,
    transform 120ms ease;
}
.theme-toggle:hover {
  background: var(--glass-fill-2);
  border-color: var(--glass-border-strong);
}
.theme-toggle:active {
  transform: scale(0.94);
}
.theme-toggle svg {
  width: 18px;
  height: 18px;
}
.theme-toggle-fixed {
  position: fixed;
  top: clamp(0.8rem, 3vw, 1.4rem);
  right: clamp(0.8rem, 3vw, 1.4rem);
  z-index: 30;
}