/* ─────────────────────────────────────────────────────────────────────
   AURAS SYSTEM — shared CSS for cross-app Auras popover.
   ─────────────────────────────────────────────────────────────────────
   Loaded by every prototype surface so the [data-auras-trigger] icon
   on the canonical 5-icon header opens the same popover everywhere.

   The popover markup itself is injected just before </body> by the
   auras-propagation pass; the JS that binds it lives in
   _system/auras-system.js.

   The canonical, fully-featured authored version is the inline block
   on /growth/feed/index.html — this file is the propagation
   copy. Keep the two in sync when iterating.
   ─────────────────────────────────────────────────────────────────── */

/* ─── Popover surface ─── */
.aura-popover-backdrop {
  position: fixed; inset: 0;
  z-index: 80;
  background: transparent;
}
.aura-popover-backdrop[hidden] { display: none; }
.aura-popover {
  position: fixed;
  top: 64px; right: 24px;
  z-index: 81;
  width: 320px;
  background: var(--surface);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 32px color-mix(in oklab, var(--fg) 16%, transparent),
              0 2px 8px color-mix(in oklab, var(--fg) 8%, transparent);
  padding: var(--space-4);
}
.aura-popover[hidden] { display: none; }

/* ─── "Now" header (swatch + name + sub-state) ─── */
.ap-current {
  display: flex; align-items: center; gap: var(--space-3);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--space-3);
}
.ap-current-swatch {
  width: 28px; height: 28px; border-radius: 50%;
  border: 2px solid var(--surface);
  box-shadow: 0 0 0 2px var(--fg-muted);
  flex: 0 0 auto;
  background: var(--accent-clarity);
}
.ap-current-eyebrow {
  font-family: var(--font-mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--fg-subtle);
  font-weight: var(--weight-bold);
}
.ap-current-name {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: var(--weight-bold);
  color: var(--fg);
  line-height: var(--lh-tight);
  margin-top: 2px;
}
.ap-current-sub {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--fg-muted);
  margin-top: 2px;
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
}

/* ─── Sections ─── */
.ap-section { margin-bottom: var(--space-3); }
.ap-section:last-child { margin-bottom: 0; }
.ap-section-h {
  font-family: var(--font-mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--fg-muted);
  font-weight: var(--weight-bold);
  margin-bottom: var(--space-2);
}

/* ─── 8 Aura tiles ─── */
.ap-aura-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-2);
}
.ap-aura-tile {
  background: var(--surface);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  padding: 0;
  overflow: hidden;
  transition: border-color var(--dur-2), transform var(--dur-2);
}
.ap-aura-tile:hover { border-color: var(--fg-muted); transform: translateY(-1px); }
.ap-aura-tile.selected {
  border-color: var(--accent-clarity);
  box-shadow: 0 0 0 1px var(--accent-clarity);
}
.ap-aura-tile-swatch {
  display: block;
  height: 32px;
  width: 100%;
}
.ap-aura-tile-swatch[data-aura="light"]  { background: linear-gradient(155deg, #FDFBF6 0%, #F9F3E9 100%); }
.ap-aura-tile-swatch[data-aura="dark"]   { background: linear-gradient(155deg, #011C42 0%, #5C0047 50%, #B30FFA 100%); }
.ap-aura-tile-swatch[data-aura="sunset"] { background: linear-gradient(155deg, #FFF4EC 0%, #FFC9A6 50%, #FC9258 100%); }
.ap-aura-tile-swatch[data-aura="ocean"]  { background: linear-gradient(155deg, #022542 0%, #096FFF 50%, #84C7F4 100%); }
.ap-aura-tile-swatch[data-aura="bloom"]  { background: linear-gradient(155deg, #FFE9F4 0%, #FB9CE5 50%, #FF59A8 100%); }
.ap-aura-tile-swatch[data-aura="ember"]  { background: linear-gradient(155deg, #FC9258 0%, #FF59A8 50%, #B30FFA 100%); }
.ap-aura-tile-swatch[data-aura="forest"] { background: linear-gradient(155deg, #0E3D2D 0%, #1B6443 50%, #34E8BB 100%); }
.ap-aura-tile-swatch[data-aura="stone"]  { background: linear-gradient(155deg, #E5E0D8 0%, #B8AFA2 50%, #6D6356 100%); }
.ap-aura-tile-name {
  display: block;
  padding: 4px var(--space-2) 6px;
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: var(--weight-semi);
  color: var(--fg);
  text-align: center;
}

/* ─── Fine-tune axes ─── */
.ap-fine-axis {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: var(--space-2);
  align-items: center;
  margin-bottom: 6px;
}
.ap-fine-axis:last-child { margin-bottom: 0; }
.ap-fine-label {
  font-family: var(--font-mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--fg-muted);
  font-weight: var(--weight-bold);
}
.ap-fine-seg {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 2px;
  padding: 2px;
  background: color-mix(in oklab, var(--fg) 4%, transparent);
  border-radius: var(--radius-md);
}
.ap-fine-opt {
  padding: 3px var(--space-2);
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  color: var(--fg-muted);
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: var(--weight-semi);
  cursor: pointer;
  text-align: center;
}
.ap-fine-opt:hover { color: var(--fg); }
.ap-fine-opt.active {
  background: var(--surface);
  color: var(--fg);
  box-shadow: 0 1px 2px color-mix(in oklab, var(--fg) 10%, transparent);
}

/* ─── Scope toggle (inside Save-as) ─── */
.ap-scope {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
}
.ap-scope-opt {
  padding: var(--space-2) var(--space-3);
  background: color-mix(in oklab, var(--fg) 3%, transparent);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  cursor: pointer;
  display: flex; flex-direction: column; gap: 2px;
}
.ap-scope-opt.selected {
  background: color-mix(in srgb, var(--accent-clarity) 10%, var(--surface));
  border-color: color-mix(in srgb, var(--accent-clarity) 40%, transparent);
}
.ap-scope-opt-label {
  font-size: var(--fs-xs);
  font-weight: var(--weight-semi);
  color: var(--fg);
}
.ap-scope-opt-desc {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--fg-subtle);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
}

/* ─── Save-as panel ─── */
.ap-save-as {
  padding: var(--space-3);
  background: color-mix(in oklab, var(--fg) 3%, transparent);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.ap-save-input {
  width: 100%;
  height: 32px;
  padding: 0 var(--space-3);
  background: var(--surface);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-md);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  margin-bottom: var(--space-2);
}
.ap-save-input:focus {
  outline: none;
  border-color: var(--accent-clarity);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-clarity) 14%, transparent);
}
.ap-save-as-actions {
  display: flex; align-items: center; gap: var(--space-2);
}
.ap-save-as-spacer { flex: 1; }
.ap-save-as-btn {
  padding: 4px var(--space-3);
  background: var(--accent-clarity);
  color: var(--paper-50);
  border: none;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: var(--weight-semi);
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
}
.ap-save-as-btn.disabled { opacity: 0.4; cursor: not-allowed; }

/* ─── Footer ─── */
.ap-footer {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
}
.ap-deep-link {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--fg-subtle);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  font-weight: var(--weight-semi);
}
.ap-deep-link:hover { color: var(--fg-muted); text-decoration: underline; }
.ap-save-btn {
  padding: 6px var(--space-3);
  background: var(--accent-clarity);
  color: var(--paper-50);
  border: none;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: var(--weight-semi);
  cursor: pointer;
}
.ap-save-btn.disabled { opacity: 0.4; cursor: not-allowed; }

/* ─────────────────────────────────────────────────────────────────────
   FINE-TUNE AXES — visual effects per data-{axis} on body.
   ─────────────────────────────────────────────────────────────────── */
body {
  transition: filter var(--dur-3, 400ms) var(--ease-out, ease-out),
              font-size 240ms ease-out;
  filter: var(--mood-filter, none) var(--light-filter, none);
}

/* MOOD — saturation + contrast */
body[data-mood="sanctuary"] { --mood-filter: saturate(0.72) contrast(0.95); }
body[data-mood="studio"]    { --mood-filter: none; }
body[data-mood="festival"]  { --mood-filter: saturate(1.32) contrast(1.08); }

/* LIGHT (time of day) — hue tilt + warmth/coolness */
body[data-light="dawn"]  { --light-filter: hue-rotate(-8deg) sepia(0.08) saturate(1.05); }
body[data-light="day"]   { --light-filter: none; }
body[data-light="dusk"]  { --light-filter: hue-rotate(22deg) sepia(0.12) saturate(1.08); }
body[data-light="night"] { --light-filter: hue-rotate(-14deg) brightness(0.9) saturate(0.85); }

/* DENSITY — font-size + space-* token overrides */
body[data-density="spacious"] {
  font-size: 17px;
  --space-1: 6px;  --space-2: 12px; --space-3: 18px; --space-4: 22px;
  --space-5: 30px; --space-6: 40px; --space-7: 60px;
}
body[data-density="regular"] {
  font-size: 14px;
}
body[data-density="intimate"] {
  font-size: 12px;
  --space-1: 2px;  --space-2: 5px;  --space-3: 8px;  --space-4: 11px;
  --space-5: 16px; --space-6: 22px; --space-7: 32px;
}

/* ─────────────────────────────────────────────────────────────────────
   RAIL — visual treatment per rail class across all products.
   ─────────────────────────────────────────────────────────────────────
   Covers .ca-rail (Community / Coach / LifeTracers), .admin-rail
   (Sanctom Admin / Relations), .am-rail (Agent Manager), .cs-rail
   (Circle Services CRM). Solid = default no-op; Glass = translucent;
   Edge = transparent panel + 3px gradient stripe along the right edge.

   IMPORTANT: do NOT set `position: relative` on the rail in Edge —
   most rails are `position: fixed` so they already create a containing
   block for ::after; overriding to relative reflows the rail into
   document flow and blanks the main content area.
   ─────────────────────────────────────────────────────────────────── */
body[data-rail="solid"] .ca-rail,
body[data-rail="solid"] .admin-rail,
body[data-rail="solid"] .am-rail,
body[data-rail="solid"] .cs-rail {
  /* default solid rail — no override */
}
body[data-rail="glass"] .ca-rail,
body[data-rail="glass"] .admin-rail,
body[data-rail="glass"] .am-rail,
body[data-rail="glass"] .cs-rail {
  background: color-mix(in oklab, var(--rail-bg, var(--ink-900)) 42%, transparent) !important;
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
}
body[data-rail="edge"] .ca-rail,
body[data-rail="edge"] .admin-rail,
body[data-rail="edge"] .am-rail,
body[data-rail="edge"] .cs-rail {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
body[data-rail="edge"] .ca-rail::after,
body[data-rail="edge"] .admin-rail::after,
body[data-rail="edge"] .am-rail::after,
body[data-rail="edge"] .cs-rail::after {
  content: '';
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 3px;
  background: var(--rail-grad, var(--rail-bg, var(--ink-900)));
  pointer-events: none;
}

/* Edge + light-canvas themes: swap rail text/icons to dark for legibility.
   6 of 8 Auras are light-canvas (default, light, sunset, ocean, stone,
   bloom, forest); only dark + ember are dark-canvas. */
:root:not([data-theme="dark"]):not([data-theme="ember"]) body[data-rail="edge"] .ca-rail-section,
:root:not([data-theme="dark"]):not([data-theme="ember"]) body[data-rail="edge"] .ca-rail-item,
:root:not([data-theme="dark"]):not([data-theme="ember"]) body[data-rail="edge"] .ca-rail-member-name,
:root:not([data-theme="dark"]):not([data-theme="ember"]) body[data-rail="edge"] .ca-rail-member-sub,
:root:not([data-theme="dark"]):not([data-theme="ember"]) body[data-rail="edge"] .admin-rail-section,
:root:not([data-theme="dark"]):not([data-theme="ember"]) body[data-rail="edge"] .admin-rail-item,
:root:not([data-theme="dark"]):not([data-theme="ember"]) body[data-rail="edge"] .am-rail-section,
:root:not([data-theme="dark"]):not([data-theme="ember"]) body[data-rail="edge"] .am-rail-item,
:root:not([data-theme="dark"]):not([data-theme="ember"]) body[data-rail="edge"] .cs-rail-section,
:root:not([data-theme="dark"]):not([data-theme="ember"]) body[data-rail="edge"] .cs-rail-item {
  color: var(--ink-900);
}
:root:not([data-theme="dark"]):not([data-theme="ember"]) body[data-rail="edge"] .ca-rail-mark,
:root:not([data-theme="dark"]):not([data-theme="ember"]) body[data-rail="edge"] .admin-rail-mark,
:root:not([data-theme="dark"]):not([data-theme="ember"]) body[data-rail="edge"] .am-rail-mark,
:root:not([data-theme="dark"]):not([data-theme="ember"]) body[data-rail="edge"] .cs-rail-mark {
  filter: none;
}
:root:not([data-theme="dark"]):not([data-theme="ember"]) body[data-rail="edge"] .ca-rail-item:hover,
:root:not([data-theme="dark"]):not([data-theme="ember"]) body[data-rail="edge"] .admin-rail-item:hover,
:root:not([data-theme="dark"]):not([data-theme="ember"]) body[data-rail="edge"] .am-rail-item:hover,
:root:not([data-theme="dark"]):not([data-theme="ember"]) body[data-rail="edge"] .cs-rail-item:hover {
  background: color-mix(in oklab, var(--ink-900) 6%, transparent);
}

/* ─────────────────────────────────────────────────────────────────────
   DARK-MODE overrides for the popover (and forced-dark body bg).
   Triggered when [data-theme="dark"] lands on <html>.
   ─────────────────────────────────────────────────────────────────── */
[data-theme="dark"] body {
  background: #0E1F44;
  color: #F9F3E9;
}
[data-theme="dark"] .aura-popover {
  background: #1C4080;
  color: #F9F3E9;
  border-color: rgba(249, 243, 233, 0.18);
}
[data-theme="dark"] .aura-popover .ap-current { border-bottom-color: rgba(249, 243, 233, 0.18); }
[data-theme="dark"] .aura-popover .ap-current-name { color: #F9F3E9; }
[data-theme="dark"] .aura-popover .ap-current-eyebrow { color: rgba(249, 243, 233, 0.55); }
[data-theme="dark"] .aura-popover .ap-current-sub { color: rgba(249, 243, 233, 0.75); }
[data-theme="dark"] .aura-popover .ap-current-swatch {
  border-color: #1C4080;
  box-shadow: 0 0 0 2px rgba(249, 243, 233, 0.7);
}
[data-theme="dark"] .aura-popover .ap-section-h { color: rgba(249, 243, 233, 0.78); }
[data-theme="dark"] .aura-popover .ap-aura-tile {
  background: #15346F;
  border-color: rgba(249, 243, 233, 0.18);
}
[data-theme="dark"] .aura-popover .ap-aura-tile:hover { border-color: rgba(249, 243, 233, 0.5); }
[data-theme="dark"] .aura-popover .ap-aura-tile.selected {
  border-color: #84C7F4;
  box-shadow: 0 0 0 1px #84C7F4;
}
[data-theme="dark"] .aura-popover .ap-aura-tile-name { color: #F9F3E9; }
[data-theme="dark"] .aura-popover .ap-fine-label { color: rgba(249, 243, 233, 0.78); }
[data-theme="dark"] .aura-popover .ap-fine-seg { background: rgba(249, 243, 233, 0.08); }
[data-theme="dark"] .aura-popover .ap-fine-opt { color: rgba(249, 243, 233, 0.7); }
[data-theme="dark"] .aura-popover .ap-fine-opt:hover { color: #F9F3E9; }
[data-theme="dark"] .aura-popover .ap-fine-opt.active {
  background: #0E1F44;
  color: #F9F3E9;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}
[data-theme="dark"] .aura-popover .ap-save-as {
  background: rgba(249, 243, 233, 0.06);
  border-color: rgba(249, 243, 233, 0.18);
}
[data-theme="dark"] .aura-popover .ap-save-input {
  background: #15346F;
  color: #F9F3E9;
  border-color: rgba(249, 243, 233, 0.18);
}
[data-theme="dark"] .aura-popover .ap-save-input::placeholder { color: rgba(249, 243, 233, 0.4); }
[data-theme="dark"] .aura-popover .ap-save-input:focus {
  border-color: #84C7F4;
  box-shadow: 0 0 0 3px rgba(132, 199, 244, 0.2);
}
[data-theme="dark"] .aura-popover .ap-scope-opt {
  background: rgba(249, 243, 233, 0.06);
  border-color: rgba(249, 243, 233, 0.18);
}
[data-theme="dark"] .aura-popover .ap-scope-opt.selected {
  background: rgba(132, 199, 244, 0.15);
  border-color: rgba(132, 199, 244, 0.5);
}
[data-theme="dark"] .aura-popover .ap-scope-opt-label { color: #F9F3E9; }
[data-theme="dark"] .aura-popover .ap-scope-opt-desc { color: rgba(249, 243, 233, 0.55); }
[data-theme="dark"] .aura-popover .ap-footer { border-top-color: rgba(249, 243, 233, 0.18); }
[data-theme="dark"] .aura-popover .ap-deep-link { color: rgba(249, 243, 233, 0.6); }
[data-theme="dark"] .aura-popover .ap-deep-link:hover { color: #F9F3E9; }
[data-theme="dark"] .aura-popover .ap-save-btn {
  background: #84C7F4;
  color: #011C42;
}
[data-theme="dark"] .aura-popover .ap-save-as-btn {
  background: #84C7F4;
  color: #011C42;
}