/* ==========================================================================
   Tokenio theme · v1  — the logo theme (sun · sky · navy on cream) applied
   to every surface of the site. Loaded AFTER app.css: app.css owns layout,
   this file owns identity. Change the brand here, nowhere else.
   ========================================================================== */

/* ---------- 1 · primitives + semantic tokens ---------- */
:root {
  --sun: #FFCB2D;  --sun-deep: #F4A916;  --sun-ink: #8A5A00;
  --sun-soft: rgba(255,203,45,.18);  --sun-wash: #FFF6DA;
  --sky: #3FB7F2;  --sky-deep: #1894D8;  --sky-ink: #0B6699;
  --sky-soft: rgba(24,148,216,.12);  --sky-wash: #E3F2FB;
  --navy: #122234; --navy-2: #1E3550;

  --plane: #FBF7EE; --surface-1: #FFFFFF; --surface-2: #F5F0E4; --surface-3: #FFFCF4;
  --ink: #17181F; --ink-2: #47505C; --muted: #69717D;
  --hair: #E6E1D5; --hair-2: #D6CFBE;

  --input: var(--navy); --token: var(--sky-deep); --token-soft: var(--sky-soft);
  --accent: var(--sky-deep); --accent-ink: var(--sky-ink);
  --good: #0B7A43; --good-wash: #E4F2EA; --warn: #B4791A; --crit: #C0392B; --crit-wash: #F8E4E1;

  --r: 18px; --r-s: 12px; --r-xs: 8px;
  --shadow: 0 1px 2px rgba(18,34,52,.04), 0 10px 30px -14px rgba(18,34,52,.16);
  --shadow-lg: 0 2px 6px rgba(18,34,52,.06), 0 30px 80px -46px rgba(18,34,52,.55);
  --ring: 0 0 0 3px rgba(63,183,242,.22);
  --ring-sun: 0 0 0 3px rgba(255,203,45,.35);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ---------- 2 · type ---------- */
body { font-feature-settings: "cv11", "ss01"; }
h1, h2, h3 { font-weight: 700; }
.lede { font-weight: 800; color: var(--navy); }
.lede::after { content: ""; display: block; width: 56px; height: 5px; border-radius: 999px; margin: 14px auto 0;
  background: linear-gradient(90deg, var(--sun) 0 50%, var(--sky) 50% 100%); }
.tok-name { font-weight: 800; color: var(--navy); letter-spacing: -0.03em; }
.card-head h2, .gal-head h2 { font-weight: 800; color: var(--navy); letter-spacing: -0.02em; }
.gal-head h2 { font-size: 24px; }
.match-num { font-weight: 800; color: var(--navy); }
.tok-symbol { color: var(--sky-ink); }
a { color: var(--sky-ink); }

/* ---------- 3 · logo: the t mark (dot rests ABOVE the t) + wordmark ---------- */
.wordmark { display: inline-flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; }
.tk-logo { width: 46px; height: 46px; display: block; overflow: visible; filter: drop-shadow(0 8px 12px rgba(18,34,52,.18)); }
.tk-logo .tile { fill: var(--navy); }
.tk-logo .bar { fill: none; stroke: var(--sun); stroke-linecap: round; stroke-linejoin: round; stroke-width: 8.6; }
.tk-logo .dot { fill: var(--sky); }
.tk-logo .dot-shine { fill: none; stroke: rgba(255,255,255,.7); stroke-linecap: round; stroke-width: 1.35; }
.tk-logo .dot-wrap { transform-box: fill-box; transform-origin: 50% 100%; }
.tk-logo .stem-grow { transform-box: fill-box; transform-origin: 50% 0%; }
.tk-word { font-weight: 900; font-size: 34px; line-height: .9; letter-spacing: -0.01em; color: var(--ink); }
.tk-word .i { color: var(--sky-deep); }
.tk-word .o { color: var(--sun-deep); }
.wordmark.sm .tk-logo { width: 28px; height: 28px; filter: none; }
.wordmark.sm .tk-word { font-size: 20px; }
.wordmark.xs .tk-logo { width: 18px; height: 18px; filter: none; }
.wordmark.xs .tk-word { font-size: 13px; }
.wordmark.xs { gap: 6px; }

/* intro (home): stem draws down, dot drops onto its spot above the t and settles */
.tk-logo.intro .stem-grow { animation: tk-stem 900ms var(--ease-out) 150ms both; }
.tk-logo.intro .dot-wrap { animation: tk-drop 1400ms var(--ease-out) 450ms both; }
@keyframes tk-stem { from { transform: scaleY(.05); opacity: 0; } 30% { opacity: 1; } to { transform: scaleY(1); opacity: 1; } }
@keyframes tk-drop {
  0%   { transform: translateY(-18px) scale(1); opacity: 0; }
  20%  { opacity: 1; }
  45%  { transform: translateY(0) scale(1.1, .88); }
  60%  { transform: translateY(-5px) scale(.97, 1.03); }
  75%  { transform: translateY(0) scale(1.03, .97); }
  86%  { transform: translateY(-1.5px) scale(1); }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}
/* loader (generating): the dot hops above the t */
.tk-logo.hop .dot-wrap { animation: tk-hop 900ms var(--ease-out) infinite; }
@keyframes tk-hop { 0%, 100% { transform: translateY(0) scale(1.06, .94); } 40% { transform: translateY(-7px) scale(.97, 1.03); } 70% { transform: translateY(0) scale(1); } }
@media (prefers-reduced-motion: reduce) { .tk-logo .dot-wrap, .tk-logo .stem-grow { animation: none !important; } }

/* ---------- 4 · page field ---------- */
body {
  background:
    radial-gradient(640px 380px at 86% -4%, rgba(63,183,242,.14), transparent 62%),
    radial-gradient(640px 340px at 6% 26%, rgba(255,203,45,.16), transparent 58%),
    var(--plane);
  background-repeat: no-repeat;
}
::selection { background: rgba(255,203,45,.5); color: var(--ink); }
:focus-visible { outline: 2px solid var(--sky-deep); outline-offset: 2px; }

/* ---------- 5 · controls ---------- */
.btn { border-radius: 12px; font-weight: 700; }
.btn.primary { background: var(--navy); color: #fff; box-shadow: 0 1px 2px rgba(18,34,52,.2), inset 0 -2px 0 rgba(255,203,45,.0); }
.btn.primary:not(:disabled):hover { background: #0b1826; box-shadow: var(--ring-sun); transform: translateY(-1px); }
.btn.primary:disabled { opacity: 1; background: #C9CDD3; color: #fff; }
.btn.ghost { background: var(--surface-1); border-color: var(--hair-2); color: var(--navy); }
.btn.ghost:hover { border-color: var(--sky-deep); color: var(--sky-ink); background: var(--surface-1); }

/* segmented controls: one look everywhere (mode, periods, build mode, share) */
.mode-toggle, .periods { background: var(--surface-2); border: 1px solid var(--hair); border-radius: 12px; padding: 3px; }
.mode-toggle button, .periods button { border-radius: 9px; font-weight: 700; color: var(--ink-2); transition: background .15s, color .15s; }
.mode-toggle button:hover, .periods button:hover { color: var(--navy); }
.mode-toggle button.on, .periods button.on { background: var(--navy); color: #fff; box-shadow: 0 1px 2px rgba(18,34,52,.25); }

.searchbox { border-radius: 22px; border-color: var(--hair); box-shadow: var(--shadow); }
.searchbox:focus-within { border-color: rgba(24,148,216,.5); box-shadow: var(--shadow-lg), var(--ring); }
.chip { background: var(--sky-wash); border-color: rgba(24,148,216,.28); color: var(--navy); }
.chip .tk { font-weight: 800; }
.sug.active, .sug:hover { background: var(--sky-wash); }
.sug .stk { color: var(--navy); }
.ex:hover, .links-tabs button:hover { border-color: var(--sky-deep); color: var(--sky-ink); }
.links-tabs button.on { background: var(--navy); border-color: var(--navy); color: #fff; }
.tabs button.on { color: var(--navy); border-bottom: 3px solid var(--sun); padding-bottom: 9px; }
.gal-search:focus-within { border-color: var(--sky-deep); box-shadow: var(--ring); }
.pref-edit { color: var(--sky-ink); border-color: var(--hair-2); }
.pref-edit:hover { border-color: var(--sky-deep); background: var(--sky-wash); }

/* ---------- 6 · surfaces ---------- */
.card { border-radius: var(--r); border-color: var(--hair); box-shadow: var(--shadow); }
.narr-card { background: linear-gradient(135deg, var(--sun-wash), #FFFFFF 55%, var(--sky-wash)); border-color: rgba(244,169,22,.25); }
.narr-card .card-head h2::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--sky); margin-right: 8px; vertical-align: 1px; box-shadow: 0 0 0 3px var(--sky-soft); }
.pref-bar { border-radius: var(--r); background: var(--surface-3); border-color: rgba(244,169,22,.28); }
.pchip { background: var(--sun-wash); }
.pchip b { color: var(--sun-ink); }
.insight { background: var(--surface-3); border-color: var(--hair); }
.stats { border-radius: var(--r-s); }
.drawer-panel { border-left: 4px solid var(--sun); }
.drawer-scrim { background: rgba(18,34,52,.36); backdrop-filter: blur(2px); }
.d-stat, .tile { background: var(--surface-3); }
.toast { background: var(--navy); border-left: 4px solid var(--sun); }

/* gist + preset cards */
.gcard, .preset { border-radius: 14px; box-shadow: 0 1px 2px rgba(18,34,52,.03); position: relative; overflow: hidden; }
.gcard::before, .preset::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, var(--sun), var(--sky)); opacity: 0; transition: opacity .18s; }
.gcard:hover, .preset:hover { border-color: rgba(24,148,216,.45); box-shadow: var(--shadow); transform: translateY(-2px); }
.gcard:hover::before, .preset:hover::before { opacity: 1; }
.glabel { font-weight: 700; color: var(--navy); }
.gmatch { color: var(--navy); }

/* ---------- 7 · badges & tags (brand palette only) ---------- */
.tok-kind { border-radius: 999px; font-weight: 800; }
.tok-kind.k-market { background: var(--sky-wash); color: var(--sky-ink); }
.tok-kind.k-gist, .tok-kind.k-theme, .tok-kind.k-retail { background: var(--sun-wash); color: var(--sun-ink); }
.gbadge.gb-new { background: var(--sky-wash); color: var(--sky-ink); }
.gbadge.gb-hot { background: var(--sun-wash); color: var(--sun-ink); }
.gbadge.gb-strengthening { background: var(--good-wash); color: var(--good); }
.ins-tag { background: var(--sky-wash); color: var(--sky-ink); }
.preset .tag { background: var(--sun-wash); color: var(--sun-ink); }
.narr-src.ai { background: var(--sky-wash); color: var(--sky-ink); }
.comp-tk .in, .role-row .yours { color: var(--sky-ink); }
.rel.r-par::before { background: var(--sun-deep); }
.role.r-anchor { background: var(--navy); color: #fff; }
.role.r-core { background: var(--sky-wash); color: var(--sky-ink); }
.role.r-bridge { background: var(--sun-wash); color: var(--sun-ink); }
.role.r-diversifier { background: var(--good-wash); color: var(--good); }
.role.r-hedge { background: var(--crit-wash); color: #A03222; }
.tk { background: var(--sky-wash); color: var(--navy); }
.tk:hover { background: var(--sun-wash); }
.grp { border-radius: var(--r-s); }
.grp:not(.solo) { border-left: 3px solid var(--sky); }
.match-sub .band.b-fair { color: var(--sky-ink); }

/* ---------- 8 · data marks ---------- */
.comp-bar > i, .fitbar i, .tbar i, .lag i.hit { background: var(--sky-deep); }
.comp-bar.input > i { background: var(--navy); }
.lag:first-child i { background: var(--navy); }
.mixbar { box-shadow: inset 0 0 0 1px rgba(18,34,52,.05); }

/* ---------- 9 · generating screen ---------- */
.gen-logo { display: flex; justify-content: center; margin-bottom: 4px; }
.gen-logo .tk-logo { width: 54px; height: 54px; }
.gen-title { font-weight: 800; color: var(--navy); }
.gen-steps li.active { color: var(--navy); font-weight: 600; }
.gen-steps li.done .tick { color: var(--good); }
.gen-steps li.active .tick { color: var(--sky-deep); }

/* ---------- 10 · footer ---------- */
.foot { gap: 8px 12px; }
.foot .wordmark { margin-right: 4px; }

/* ---------- 11 · splash (first open) ---------- */
.splash {
  position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center;
  background:
    radial-gradient(520px 320px at 70% 30%, rgba(63,183,242,.22), transparent 62%),
    radial-gradient(520px 300px at 30% 72%, rgba(255,203,45,.26), transparent 58%),
    var(--plane);
  animation: splash-out 520ms var(--ease-out) 1650ms both;
  pointer-events: none;
}
html.no-splash .splash { display: none; }
.splash-in { display: grid; justify-items: center; gap: 14px; }
.splash-mark { width: 104px; height: 104px; filter: drop-shadow(0 24px 26px rgba(18,34,52,.24)); animation: splash-pop 700ms var(--ease-bounce) 60ms both; }
.splash-mark .stem-grow { animation: tk-stem 600ms var(--ease-out) 380ms both; }
.splash-mark .dot-wrap { animation: tk-drop 1100ms var(--ease-out) 560ms both; }
.splash-word { font-size: 46px; animation: splash-rise 600ms var(--ease-out) 820ms both; }
.splash-tag { font-size: 12px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); animation: splash-rise 600ms var(--ease-out) 1000ms both; }
@keyframes splash-pop { from { transform: scale(.6) rotate(-8deg); opacity: 0; } to { transform: scale(1) rotate(0); opacity: 1; } }
@keyframes splash-rise { from { transform: translateY(10px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes splash-out { to { opacity: 0; visibility: hidden; transform: scale(1.04); } }
/* the page underneath eases in as the splash leaves */
html:not(.no-splash) .home-wrap { animation: page-in 700ms var(--ease-out) 1750ms both; }
@keyframes page-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .splash { animation: splash-out 300ms linear 700ms both !important; }
  .splash *, html:not(.no-splash) .home-wrap { animation: none !important; }
}
html:not(.no-splash) .tk-logo.intro .stem-grow { animation-delay: 1850ms; }
html:not(.no-splash) .tk-logo.intro .dot-wrap { animation-delay: 2150ms; }