/* SuperStories — shared design layer (day / night).
   One restrained, minimal system across every platform route.
   Day and night are full token sets; components consume the tokens only. */

:root,
[data-theme="day"] {
  --bg: #f4f1ea;
  --bg-grad: radial-gradient(1100px 560px at 50% -8%, #fbf9f4 0%, var(--bg) 58%);
  --panel: #ffffff;
  --panel-2: #faf8f3;
  --line: rgba(20, 18, 15, .12);
  --text: #1a1813;
  --muted: rgba(26, 24, 19, .55);
  --accent: #4b53c6;
  --accent-2: #3a41a8;
  --accent-tint: rgba(75, 83, 198, .10);
  --accent-tint-line: rgba(75, 83, 198, .28);
  --hint-text: #2f357e;
  --on-accent: #ffffff;
  --input-bg: #faf8f3;
  --bar-bg: rgba(244, 241, 234, .82);
  --ok: #1f9d57;
  --err: #c8453b;
  --radius: 13px;
}

[data-theme="night"] {
  --bg: #0b0d12;
  --bg-grad: radial-gradient(1100px 560px at 50% -8%, #141a2a 0%, #07080c 60%);
  --panel: #12151d;
  --panel-2: #171b24;
  --line: rgba(233, 238, 248, .12);
  --text: #e9eef8;
  --muted: rgba(233, 238, 248, .52);
  --accent: #9db4ff;
  --accent-2: #b3c4ff;
  --accent-tint: rgba(157, 180, 255, .12);
  --accent-tint-line: rgba(157, 180, 255, .30);
  --hint-text: #c7d4ff;
  --on-accent: #0b0d12;
  --input-bg: rgba(0, 0, 0, .28);
  --bar-bg: rgba(11, 13, 18, .78);
  --ok: #34d27b;
  --err: #ff6b6b;
  --radius: 13px;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font: 15px/1.6 -apple-system, BlinkMacSystemFont, "Helvetica Neue", Inter, "Segoe UI", Roboto, sans-serif;
  background: var(--bg-grad);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  transition: background .4s ease, color .4s ease;
}

/* header lockup — brand top-left (Growth Intel structure, minimal feel) */
.ss-header {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 20px 28px; border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 10;
  background: var(--bar-bg);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.ss-lockup { display: flex; align-items: center; gap: 14px; text-decoration: none; color: inherit; }
.ss-logo { height: 34px; width: auto; display: block; }
/* the logo art is white; on the day theme invert it to dark for light backgrounds */
[data-theme="day"] .ss-logo { filter: invert(1); }
.ss-kicker {
  font-size: 10.5px; font-weight: 400; letter-spacing: .2em; text-transform: uppercase;
  color: var(--muted); padding-left: 14px; border-left: 1px solid var(--line);
}
@media (max-width: 480px) { .ss-kicker { display: none; } }
.ss-context { display: flex; align-items: center; gap: 12px; }

/* breadcrumbs for up-navigation inside the tool */
.ss-crumbs { font-size: 12.5px; color: var(--muted); margin: 0 0 18px; }
.ss-crumbs a { color: var(--muted); text-decoration: none; }
.ss-crumbs a:hover { color: var(--text); }
.ss-crumbs .sep { margin: 0 7px; opacity: .6; }
.ss-crumbs .here { color: var(--text); }

/* day / night toggle */
.ss-theme {
  width: 34px; height: 34px; padding: 0; border-radius: 9px;
  border: 1px solid var(--line); background: transparent; color: var(--text);
  cursor: pointer; display: grid; place-items: center;
  transition: border-color .15s, background .15s;
}
.ss-theme:hover { border-color: var(--accent); }
.ss-theme svg { width: 17px; height: 17px; display: block; }
.ss-theme .sun { display: none; }
[data-theme="night"] .ss-theme .sun { display: block; }
[data-theme="night"] .ss-theme .moon { display: none; }