/* ═══════════════════════════════════════════════════════════════════════════
 * Frequency, behind the brand switch (console/console_brand.py). Loaded only
 * on a page the server rendered with <html data-brand="frequency">, so Voice
 * Infra never sees a rule from this file.
 *
 * Standards: Frequency Standards Manual, Edition 3.1.
 *   §06 lockup: the wave mark and the lowercase wordmark; the endorsement
 *       "by infinite inference" in the surface's own colour. The sidebar is
 *       dark, so the mark and the wordmark are white and the endorsement is
 *       the on-dark secondary ink.
 *   §08 Klein blue #002FA7 is the one accent: live states, the primary
 *       action, links. Gold is the company's colour and never appears inside
 *       a Frequency surface. On the dark rail the blue that reads is the
 *       manual's blue-soft #8A9FD3 (7:1 on --c-dark); Klein blue itself is
 *       2:1 there.
 *   §09 the product UI keeps the system sans. The wordmark is a drawing
 *       (static/frequency/wordmark.svg, outlined from Instrument Sans 500),
 *       not a font, so nothing new is fetched.
 *   §12 the transition: Explain curve, ~900 ms, transform and opacity, no
 *       bounce; reduced motion is a short crossfade.
 * ═══════════════════════════════════════════════════════════════════════════ */

html[data-brand="frequency"] {
  --fq-blue: #002fa7;
  --fq-blue-on-dark: #8a9fd3;
  --fq-gold: #f1bc04;            /* the transition's first frame only */
  --fq-explain: cubic-bezier(0.77, 0, 0.175, 1);
  --accent: var(--fq-blue);      /* 10.2:1 on paper */
  --accent-on-dark: var(--fq-blue-on-dark);
  --accent-bg: #edf0f8;
  --accent-line: #c5cee8;
  /* Every "the ∞'s gold" use on the dark surfaces becomes the on-dark blue. */
  --bill-gold: var(--fq-blue-on-dark);
}

/* ── the mark: 29 cells of the ∞, 16 of which become the wave ────────────── */
html[data-brand="frequency"] .fq-mark {
  --u: 2px;                      /* 18 px: the manual's header size, 2 u */
  position: relative; display: block; flex: none;
  width: calc(14 * var(--u)); height: calc(9 * var(--u));
  color: var(--c-on-dark);
}
html[data-brand="frequency"] .gate-brand .fq-mark { --u: 4px; }
@media (max-width: 760px) { html[data-brand="frequency"] .gate-brand .fq-mark { --u: 3px; } }
html[data-brand="frequency"] .fq-mark i {
  position: absolute; left: 0; top: 0; width: var(--u); height: var(--u);
  transform: translate(calc(var(--tx) * var(--u)), calc(var(--ty) * var(--u)));
  transition: transform 900ms var(--fq-explain), opacity 500ms var(--ease-out);
  /* left to right, the way the wave is read */
  transition-delay: calc(var(--fx) * 10ms);
}
html[data-brand="frequency"] .fq-mark i::before,
html[data-brand="frequency"] .fq-mark i::after { content: ""; position: absolute; inset: 0; }
html[data-brand="frequency"] .fq-mark i::before { background: currentColor; }
html[data-brand="frequency"] .fq-mark i::after { background: var(--fq-gold); opacity: 0;
  transition: opacity 900ms var(--fq-explain); transition-delay: inherit; }
/* The cells the wave does not need: where they were, gone. */
html[data-brand="frequency"] .fq-mark i.fq-drop {
  opacity: 0; transform: translate(calc(var(--fx) * var(--u)), calc(var(--fy) * var(--u))) scale(0.5); }

/* ── the words ───────────────────────────────────────────────────────────── */
html[data-brand="frequency"] .fq-words { display: grid; }
html[data-brand="frequency"] .fq-words > .fq-old,
html[data-brand="frequency"] .fq-words > .fq-new {
  grid-area: 1 / 1; display: flex; flex-direction: column; gap: inherit; min-width: 0;
  font-style: normal; transition: opacity 600ms var(--fq-explain); }
html[data-brand="frequency"] .fq-words > .fq-old { opacity: 0; pointer-events: none; }
html[data-brand="frequency"] .fq-words > .fq-new > b { display: block; line-height: 0; }
html[data-brand="frequency"] .fq-wordmark { display: block; height: 17px; width: auto; color: var(--c-on-dark); }
html[data-brand="frequency"] .gate-word .fq-wordmark { height: 22px; }
html[data-brand="frequency"] .fq-endorse {
  display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
  font-style: normal; color: var(--c-on-dark-2); }
html[data-brand="frequency"] .fq-endorse .fq-glyph { display: block; height: 9px; width: 14px; flex: none; }
html[data-brand="frequency"] .gate-word .fq-endorse { font-size: 12px; }

/* ── the transition (frequency.js) ────────────────────────────────────────
 * data-fq-state="from" is the old lockup, drawn instantly: the gold ∞ and
 * "Voice Infra / by mirai minds". Taking the attribute away lets every cell
 * travel to its place in the wave on the Explain curve while the words
 * crossfade. */
html[data-brand="frequency"] [data-fq-state="from"] .fq-mark i,
html[data-brand="frequency"] [data-fq-state="from"] .fq-mark i::after,
html[data-brand="frequency"] [data-fq-state="from"] .fq-words > * { transition: none; }
html[data-brand="frequency"] :is([data-fq-state="from"], [data-fq-state="swap"]) .fq-mark i {
  transform: translate(calc(var(--fx) * var(--u)), calc(var(--fy) * var(--u))); opacity: 1; }
html[data-brand="frequency"] :is([data-fq-state="from"], [data-fq-state="swap"]) .fq-mark i::after { opacity: 1; }
html[data-brand="frequency"] [data-fq-state="from"] .fq-words > .fq-old { opacity: 1; }
html[data-brand="frequency"] [data-fq-state="from"] .fq-words > .fq-new { opacity: 0; }

/* Reduced motion: nothing travels. The old lockup fades out, the new one in. */
@media (prefers-reduced-motion: reduce) {
  html[data-brand="frequency"] .fq-mark { transition: opacity 180ms ease; }
  html[data-brand="frequency"] .fq-mark i,
  html[data-brand="frequency"] .fq-mark i::after { transition: none; }
  html[data-brand="frequency"] .fq-words > .fq-old,
  html[data-brand="frequency"] .fq-words > .fq-new { transition: opacity 240ms ease; }
  html[data-brand="frequency"] [data-fq-state="swap"] .fq-mark { opacity: 0; }
}

/* The accents settle from the old colours to the blue with the mark. Colour
 * is the one property here that is not transform or opacity: it is paint
 * only, nothing moves, and it runs once. */
html[data-brand="frequency"][data-fq-intro="from"] {
  --accent: #0f6a44; --accent-on-dark: #4fc08a; --bill-gold: #f1bc04; }
html[data-brand="frequency"][data-fq-intro] .nav :is(svg, .ico-lit, .wallet-tier, .envtab) {
  transition: color 900ms var(--fq-explain), background-color 900ms var(--fq-explain); }
html[data-brand="frequency"][data-fq-intro="from"] .nav :is(svg, .ico-lit, .wallet-tier, .envtab) { transition: none; }

/* ── gold, wherever the console drew it, becomes the blue ──────────────── */
html[data-brand="frequency"] .wallet-tier { box-shadow: inset 0 0 0 1px rgba(138, 159, 211, .4); }
html[data-brand="frequency"] .bill-tier-mark { box-shadow: inset 0 0 0 1px rgba(138, 159, 211, .5); }
html[data-brand="frequency"] .home-hero::after {
  background: radial-gradient(120% 90% at 100% 0%, rgba(0, 47, 167, .22), transparent 55%); }
/* The Welcome page's one primary action. */
html[data-brand="frequency"] .home-watch { background: var(--fq-blue); color: #fff; }
html[data-brand="frequency"] .home-watch:hover { background: #1440b8; color: #fff; }
html[data-brand="frequency"] :is(.bill-cmp.is-featured, .bill-plan.is-t1, .bill-upgrade.is-connect) {
  background: radial-gradient(120% 55% at 50% 0%, rgba(0, 47, 167, .2), transparent 62%), var(--c-dark); }
html[data-brand="frequency"] :is(.bill-cmp.is-featured, .bill-plan.is-t1, .bill-upgrade.is-connect)::before {
  background: linear-gradient(90deg, transparent, rgba(138, 159, 211, .9) 28%, rgba(138, 159, 211, .9) 72%, transparent); }
html[data-brand="frequency"] :is(.agent-workspace, .admin-workspace) #env-live {
  box-shadow: inset 0 0 0 1px rgba(138, 159, 211, 0.28); }
html[data-brand="frequency"] :is(.agent-workspace, .admin-workspace) #env-live:not([aria-disabled="true"]):is(:hover, :focus-visible) {
  box-shadow: inset 0 0 0 1px rgba(138, 159, 211, 0.6), 0 0 18px -4px rgba(138, 159, 211, 0.45); }
html[data-brand="frequency"] .offer-strip { --offer-gold: var(--fq-blue-on-dark); }
html[data-brand="frequency"] .offer-card { --offer-gold: var(--fq-blue); }
html[data-brand="frequency"] .offer-chip { color: #fff; }
html[data-brand="frequency"] .tour-spot {
  box-shadow: 0 0 0 1.5px var(--c-ink), 0 0 0 6px rgba(0, 47, 167, .3), 0 0 0 200vmax rgba(27, 26, 24, .28); }
html[data-brand="frequency"] .tour-face { box-shadow: 0 0 0 calc(var(--lv, 0) * 5px) rgba(0, 47, 167, .22); }

/* The account page's name. */
html[data-brand="frequency"] .account-brand { font-weight: 500; letter-spacing: -0.04em; }