/* SE Engineering design system: "Neon workshop".
   Matte black-steel ground, thin double-rule frames, octagon lamps. Neon is meaning only:
   cyan = on target, orange = attention + the primary action, red = act now.
   Class contract: see /styleguide/ (DEBUG) for every component and state. */

/* ---- fonts (OFL, self-hosted; licences next to the files) ---------------------------- */

@font-face {
  font-family: "Tektur"; font-style: normal; font-weight: 400 900; font-stretch: 75% 100%;
  font-display: swap; src: url("../fonts/tektur-cyrillic.4dd916a2a009.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Tektur"; font-style: normal; font-weight: 400 900; font-stretch: 75% 100%;
  font-display: swap; src: url("../fonts/tektur-latin-ext.1c5dae9cd95e.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308,
    U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
    U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Tektur"; font-style: normal; font-weight: 400 900; font-stretch: 75% 100%;
  font-display: swap; src: url("../fonts/tektur-latin.da5c3beab8d2.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
    U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Golos Text"; font-style: normal; font-weight: 400 900; font-display: swap;
  src: url("../fonts/golos-text-cyrillic.2b8fbbb33a14.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Golos Text"; font-style: normal; font-weight: 400 900; font-display: swap;
  src: url("../fonts/golos-text-latin-ext.b0503aa2cc13.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308,
    U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
    U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Golos Text"; font-style: normal; font-weight: 400 900; font-display: swap;
  src: url("../fonts/golos-text-latin.f57df9832ab8.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
    U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "JetBrains Mono"; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url("../fonts/jetbrains-mono-latin.b636a65da4f0.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+2000-206F;
}

/* ---- tokens ---------------------------------------------------------------------------- */

@property --ignite {
  syntax: "<number>";
  inherits: true;
  initial-value: 1;
}

:root {
  color-scheme: dark;

  /* black-steel world */
  --ground: #0c0e11;
  --ground-raise: #101317;
  --well: #0a0c0f;
  --panel: #14171c;
  --panel-2: #1b1f25;
  --panel-3: #232830;
  --line: #262c34;
  --line-2: #353d47;
  --line-3: #4d5764;

  /* text, all >= 4.5:1 on --panel */
  --text: #e9edf1;
  --text-2: #b7c0ca;
  --text-3: #8f9aa8;

  /* neon: status meaning and the primary action only */
  --cyan: #2ee6f2;
  --cyan-rgb: 46 230 242;
  --orange: #ff8c1a;
  --orange-core: #ffb23d;
  --orange-rgb: 255 140 26;
  --red: #ff4433;
  --red-text: #ff7366;
  --red-rgb: 255 68 51;
  --steel: #9aa6b4;
  --steel-rgb: 154 166 180;
  --unlit: #5b6572;
  --unlit-rgb: 91 101 114;
  --on-orange: #1a0d00;

  --glow-cyan: 0 0 6px rgb(var(--cyan-rgb) / .55), 0 0 20px rgb(var(--cyan-rgb) / .22);
  --glow-orange: 0 0 6px rgb(var(--orange-rgb) / .55), 0 0 20px rgb(var(--orange-rgb) / .22);
  --glow-red: 0 0 6px rgb(var(--red-rgb) / .6), 0 0 22px rgb(var(--red-rgb) / .26);
  --depth: 0 1px 0 rgb(255 255 255 / .03) inset, 0 10px 28px -12px rgb(0 0 0 / .7);

  --focus: var(--orange-core);
  --grat: rgb(var(--steel-rgb) / .13);
  --grat-2: rgb(var(--steel-rgb) / .3);

  /* type */
  --font-display: "Tektur", "Golos Text", sans-serif;
  --font-body: "Golos Text", "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, Consolas, monospace;
  --fs-label: .75rem;
  --fs-sm: .875rem;
  --fs-base: 1rem;
  --fs-md: 1.125rem;
  --fs-lg: clamp(1.25rem, 1.1rem + .6vw, 1.5rem);
  --fs-xl: clamp(1.625rem, 1.3rem + 1.6vw, 2.375rem);
  --fs-board: clamp(1.375rem, 1.1rem + 1.4vw, 2rem);
  --fs-numeral: clamp(2.75rem, 2rem + 3.6vw, 4.75rem);

  /* space */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --gutter: 16px;
  --page-max: 1080px;

  /* octagon cuts (corner-shape: bevel where supported, clip-path for lamps) */
  --cut-s: 4px;
  --cut-m: 9px;
  --cut-l: 14px;
  --octagon: polygon(29.3% 0, 70.7% 0, 100% 29.3%, 100% 70.7%, 70.7% 100%, 29.3% 100%,
    0 70.7%, 0 29.3%);

  /* motion */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-out-quart: cubic-bezier(.25, 1, .5, 1);
  --dur-1: 120ms;
  --dur-2: 220ms;
  --dur-3: 420ms;
  --dur-ignite: 1100ms;

  /* layers */
  --z-raised: 10;
  --z-sticky: 100;
  --z-nav: 200;
  --z-menu: 300;
  --z-skip: 500;

  --topbar-h: 60px;
  --tabbar-h: 64px;
  --rail-w: 232px;

  /* aliases kept for older page CSS (charts.css) */
  --bg: var(--ground);
  --surface: var(--panel);
  --muted: var(--text-3);
  --accent: var(--orange);
  --accent-text: var(--on-orange);
  --radius: var(--cut-m);
  --gap: var(--s-4);
}

@media (min-width: 720px) { :root { --gutter: 24px; } }
@media (min-width: 1100px) { :root { --gutter: 32px; } }

/* status palette, read by .lamp .tag .notice .board */
[data-status] {
  --st: var(--unlit); --st-rgb: var(--unlit-rgb); --st-text: var(--text-2); --st-glow: 0;
}
[data-status="ok"] { --st: var(--cyan); --st-rgb: var(--cyan-rgb); --st-text: var(--cyan); --st-glow: 1; }
[data-status="attention"] {
  --st: var(--orange); --st-rgb: var(--orange-rgb); --st-text: var(--orange-core); --st-glow: 1;
}
[data-status="critical"] {
  --st: var(--red); --st-rgb: var(--red-rgb); --st-text: var(--red-text); --st-glow: 1;
}
[data-status="pending"] { --st: var(--steel); --st-rgb: var(--steel-rgb); --st-text: var(--text-2); }

/* ---- base and browser surfaces --------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scrollbar-color: var(--line-2) var(--ground); }
body {
  margin: 0;
  min-height: 100dvh;
  color: var(--text);
  background-color: var(--ground);
  background-image: url("../img/circuit.c76eae00fc3a.svg");
  background-size: 157px 157px;
  background-attachment: fixed;
  font: 400 var(--fs-base) / 1.55 var(--font-body);
  font-variant-numeric: lining-nums;
  caret-color: var(--orange);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
::selection { background: rgb(var(--steel-rgb) / .35); color: #fff; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--ground); }
::-webkit-scrollbar-thumb { background: var(--line-2); border: 2px solid var(--ground); }
::-webkit-scrollbar-thumb:hover { background: var(--line-3); }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }

/* Tektur only in capitals (titles, labels, buttons), digits and Latin: its Cyrillic lowercase
   (d, b) reads as Latin at a glance. Sentences stay in Golos Text. */
h1, h2, h3, h4 {
  font-family: var(--font-body);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.012em;
  text-wrap: balance;
  margin: 0;
}
h1 { font-family: var(--font-display); font-weight: 650; font-stretch: 92%; letter-spacing: .02em;
  text-transform: uppercase; font-size: var(--fs-xl); line-height: 1.08; }
h2 { font-size: var(--fs-lg); }
h3 { font-size: var(--fs-md); }
h4 { font-size: var(--fs-base); }
p { margin: 0; text-wrap: pretty; }
p + p { margin-top: var(--s-3); }
a {
  color: var(--text);
  text-decoration: underline;
  text-decoration-color: var(--line-3);
  text-decoration-thickness: 1px;
  text-underline-offset: .22em;
  transition: text-decoration-color var(--dur-1) var(--ease-out);
}
a:hover { text-decoration-color: currentColor; }
img, svg { max-width: 100%; }
img { height: auto; }
hr { border: 0; border-top: 1px solid var(--line); margin: var(--s-5) 0; }
code, kbd, samp { font-family: var(--font-mono); font-size: .9em; }
small { font-size: var(--fs-sm); }
time, data, td, th, output { font-variant-numeric: tabular-nums lining-nums; }
details > summary { cursor: pointer; }
details > summary::-webkit-details-marker { display: none; }
.icon { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75;
  stroke-linecap: round; stroke-linejoin: round; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}
.skip-link {
  position: fixed; left: var(--s-3); top: -100px; z-index: var(--z-skip);
  padding: var(--s-2) var(--s-4); background: var(--orange); color: var(--on-orange);
  font-weight: 600; text-decoration: none;
}
.skip-link:focus-visible { top: var(--s-3); }

/* ---- type roles ------------------------------------------------------------------------ */

.label {
  font-family: var(--font-display);
  font-size: var(--fs-label);
  font-weight: 600;
  font-stretch: 86%;
  letter-spacing: .09em;
  line-height: 1.3;
  text-transform: uppercase;
  color: var(--text-3);
}
.numeral {
  font-family: var(--font-display);
  font-size: var(--fs-numeral);
  font-weight: 700;
  font-stretch: 82%;
  font-variant-numeric: tabular-nums lining-nums;
  line-height: .9;
  letter-spacing: -.01em;
  color: var(--text);
}
.numeral small {
  font-size: .3em; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-3);
  margin-left: .25em;
}
.muted { color: var(--text-3); }
.mono { font-family: var(--font-mono); font-size: .92em; letter-spacing: 0;
  font-variant-numeric: tabular-nums slashed-zero; }

/* ---- layout ---------------------------------------------------------------------------- */

.shell {
  min-height: 100dvh;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto 1fr auto;
  grid-template-areas: "top" "main" "foot";
}
.shell > .topbar { grid-area: top; }
.shell > .page { grid-area: main; }
.shell > .footer { grid-area: foot; }

.page {
  width: min(100%, var(--page-max));
  margin-inline: auto;
  padding: var(--s-5) var(--gutter) var(--s-7);
  min-width: 0;
}
.page > * + * { margin-top: var(--s-5); }
.page > .page-actions + * { margin-top: 0; }
.page--narrow { --page-max: 480px; }
.page--wide { --page-max: 1440px; }

.page-head {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: var(--s-3) var(--s-5);
}
.page-head > :first-child { min-width: 0; flex: 1 1 18rem; }
.page-head p { color: var(--text-2); margin-top: var(--s-2); max-width: 65ch; }
/* the head's own tools (edit, upload): one row, aligned to the title block's centre */
.page-head-tools { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center;
  align-self: center; justify-content: flex-end; }

/* page_actions block: beside the page head on desktop, docked in thumb reach on phones */
.page-actions {
  display: flex; flex-wrap: wrap; gap: var(--s-2); justify-content: flex-end;
}
.page-actions:empty { display: none; }
@media (min-width: 720px) {
  .page-actions { float: right; margin: 0 0 var(--s-3) var(--s-5); }
  .page > .page-actions + * { margin-top: 0; }
}
@media (max-width: 719.98px) {
  .page-actions {
    position: fixed; z-index: var(--z-sticky);
    left: 0; right: 0; bottom: calc(var(--dock-offset, 0px) + env(safe-area-inset-bottom));
    padding: var(--s-3) var(--gutter);
    background: rgb(12 14 17 / .96);
    border-top: 1px solid var(--line-2);
  }
  .page-actions > .btn { flex: 1 1 0; }
  .page:has(> .page-actions:not(:empty)) { padding-bottom: calc(var(--s-8) + 64px); }
}

.section { margin-top: var(--s-7); }
.section > h2, .section > .section-head { margin-bottom: var(--s-4); }
.page > .section { margin-top: var(--s-7); }

.stack { display: flex; flex-direction: column; gap: var(--gap, var(--s-4)); }
.stack > * { margin: 0; }
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gap, var(--s-3)); }
.grid-auto {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--min, 17rem)), 1fr));
  gap: var(--gap, var(--s-4));
}

/* ---- surfaces -------------------------------------------------------------------------- */

.panel {
  position: relative;
  background: var(--panel);
  border: 1px solid var(--line-2);
  border-radius: 3px;
  box-shadow: inset 0 0 0 3px var(--panel), inset 0 0 0 4px var(--line), var(--depth);
  padding: var(--s-5) var(--s-4);
  min-width: 0;
}
@media (min-width: 720px) { .panel { padding: var(--s-5); } }
.panel > h2:first-child, .panel > h3:first-child { margin-bottom: var(--s-3); }
.panel > * + * { margin-top: var(--s-3); }
.panel > .list { margin-inline: calc(-1 * var(--s-4)); }
@media (min-width: 720px) { .panel > .list { margin-inline: calc(-1 * var(--s-5)); } }
.panel > .list:last-child { margin-bottom: calc(-1 * var(--s-3)); }

/* verdict board: one message in the status tube colour, one monumental next action */
.board {
  position: relative;
  display: grid;
  gap: var(--s-5);
  padding: var(--s-5) var(--s-4);
  background: var(--panel);
  border: 2px solid rgb(var(--st-rgb) / calc(.2 + .8 * var(--ignite)));
  border-radius: 4px;
  box-shadow:
    inset 0 0 0 4px var(--panel),
    inset 0 0 0 5px rgb(var(--st-rgb) / .28),
    0 0 8px rgb(var(--st-rgb) / calc(.4 * var(--st-glow) * var(--ignite))),
    0 0 32px rgb(var(--st-rgb) / calc(.14 * var(--st-glow) * var(--ignite))),
    0 18px 40px -18px rgb(0 0 0 / .8);
  animation: ignite var(--dur-ignite) var(--ease-out) both;
}
.board:not([data-status]) { --st-rgb: var(--steel-rgb); --st-text: var(--text); --st-glow: 0; }
.board-body { display: flex; gap: var(--s-4); align-items: flex-start; }
.board-body > .lamp { margin-top: .2em; }
.board-message {
  font-family: var(--font-body);
  font-size: var(--fs-board);
  font-weight: 700;
  letter-spacing: -.015em;
  line-height: 1.18;
  color: var(--st-text);
  text-wrap: balance;
  margin: 0;
}
.board-detail { margin-top: var(--s-2); color: var(--text-2); max-width: 60ch; }
.board-action { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; }
.board-action:empty { display: none; }
/* the next action at monumental scale: full width on phones, display-size label */
.board-action > .btn--lg {
  flex: 1 1 100%; min-height: 72px; padding: 0 var(--s-5);
  font-size: clamp(1.25rem, 1.05rem + .9vw, 1.75rem); font-weight: 700; font-stretch: 88%;
  letter-spacing: .1em; white-space: normal;
}
.board-action > .btn--lg .icon { width: 26px; height: 26px; }
/* on target: the action lights in the status tube, not in a generic accent */
.board[data-status="ok"] .btn--secondary { --btn-fg: var(--cyan); --btn-line: rgb(var(--cyan-rgb) / .6); }
.board[data-status="ok"] .btn--secondary:hover { --btn-bg: rgb(var(--cyan-rgb) / .1); --btn-line: var(--cyan); }
@media (min-width: 720px) {
  .board { padding: var(--s-6); grid-template-columns: minmax(0, 1fr) auto; align-items: center;
    gap: var(--s-5) var(--s-6); }
  .board-action > .btn--lg { flex: 0 0 auto; min-width: 20rem; min-height: 96px; }
}

.list { list-style: none; margin: 0; padding: 0; }
.list-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--s-2) var(--s-4);
  min-height: 60px;
  padding: var(--s-3) var(--s-4);
  border-top: 1px solid var(--line);
  color: inherit;
  text-decoration: none;
}
@media (min-width: 720px) { .list-row { padding-inline: var(--s-5); } }
.list > li:first-child > .list-row, .list > .list-row:first-child { border-top: 0; }
.list-row > :only-child { grid-column: 1 / -1; }
.list-row strong, .list-row .list-title { font-weight: 600; display: block; }
.list-row .muted { font-size: var(--fs-sm); }
.list-row .numeral { font-size: 2rem; }
a.list-row, button.list-row { cursor: pointer; transition: background-color var(--dur-1) var(--ease-out); }
a.list-row:hover, button.list-row:hover { background: var(--panel-2); }
a.list-row:focus-visible { outline-offset: -2px; }
.list-row[aria-current="page"], .list-row.is-selected { background: var(--panel-2); }
button.list-row { width: 100%; background: none; border: 0; border-top: 1px solid var(--line);
  font: inherit; text-align: left; }

/* payment options: the landing's price section and the car page's subscription panel */
.pay-options .list-row .muted { display: block; max-width: 60ch; }
@media (max-width: 559.98px) {
  .pay-options .list-row { grid-template-columns: auto minmax(0, 1fr); }
  .pay-options .list-row > .tag { grid-column: 2; justify-self: start; }
}

.table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums lining-nums; }
.table th {
  font-family: var(--font-display); font-size: var(--fs-label); font-weight: 600;
  font-stretch: 78%; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3);
  text-align: left; padding: var(--s-2) var(--s-3); border-bottom: 1px solid var(--line-2);
  white-space: nowrap;
}
.table td { padding: var(--s-3); border-bottom: 1px solid var(--line); vertical-align: middle; }
.table tbody tr:hover td { background: rgb(255 255 255 / .02); }
.table .num { text-align: right; }
@media (max-width: 719.98px) {
  .table { display: block; overflow-x: auto; }
}

/* ---- status: lamps and tags ------------------------------------------------------------ */

.lamp {
  --lamp-size: 20px;
  position: relative;
  isolation: isolate;
  display: inline-grid;
  place-items: center;
  flex: none;
  width: var(--lamp-size);
  height: var(--lamp-size);
  vertical-align: -.12em;
  font-family: var(--font-display);
  font-weight: 700;
  font-stretch: 80%;
  font-size: calc(var(--lamp-size) * .34);
  line-height: 1;
  color: var(--st-text);
  filter: drop-shadow(0 0 calc(var(--lamp-size) * .22)
    rgb(var(--st-rgb) / calc(.6 * var(--st-glow) * var(--ignite))));
}
.lamp::before, .lamp::after { content: ""; position: absolute; z-index: -1; clip-path: var(--octagon); }
/* the logo's tube: a lit octagon ring, a dark gap, then the lit core, so the octagon reads
   even at list size */
.lamp::before { inset: 0; background: var(--st); opacity: calc(.45 + .55 * var(--ignite)); }
.lamp::after {
  inset: 2px;
  background:
    radial-gradient(circle at 50% 50%, var(--st) 0 34%, rgb(var(--st-rgb) / .28) 36% 46%, #07090b 48%);
  opacity: 1;
}
.lamp:not([data-status]) { --st: var(--unlit); --st-rgb: var(--unlit-rgb); --st-glow: 0; }
.lamp[data-status="muted"]::before { background: var(--line-3); }
.lamp[data-status="pending"]::after {
  background: radial-gradient(circle, var(--steel) 0 28%, var(--panel-3) 31%);
}
.lamp[data-status="muted"]::after { background: var(--panel-3); }

/* large lamp = car avatar / page status: a lit tube ring with its label inside */
.lamp--lg, .lamp--xl { animation: ignite var(--dur-ignite) var(--ease-out) both; }
.lamp--lg { --lamp-size: 48px; filter: drop-shadow(0 0 calc(var(--lamp-size) * .18)
    rgb(var(--st-rgb) / calc(.6 * var(--st-glow) * var(--ignite)))); }
.lamp--xl { --lamp-size: 72px; }
.lamp.lamp--lg::before, .lamp.lamp--xl::before { background: var(--st);
  opacity: calc(.3 + .7 * var(--ignite)); }
.lamp.lamp--lg::after, .lamp.lamp--xl::after { inset: 3px; background: var(--panel); opacity: 1; }
.lamp.lamp--xl::after { inset: 4px; }

.tag {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 8px 2px;
  font-family: var(--font-display); font-size: .72rem; font-weight: 600; font-stretch: 80%;
  letter-spacing: .08em; text-transform: uppercase; line-height: 1.35; white-space: nowrap;
  color: var(--st-text);
  background: rgb(var(--st-rgb) / .1);
  border: 1px solid rgb(var(--st-rgb) / .45);
  border-radius: 2px;
}
.tag:not([data-status]) { --st-rgb: var(--steel-rgb); --st-text: var(--text-2); }

/* ---- controls -------------------------------------------------------------------------- */

.btn {
  --btn-fg: var(--text);
  --btn-bg: var(--panel-2);
  --btn-line: var(--line-2);
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: 44px;
  padding: 0 var(--s-4);
  font-family: var(--font-display);
  font-size: .9rem;
  font-weight: 600;
  font-stretch: 84%;
  letter-spacing: .07em;
  text-transform: uppercase;
  line-height: 1.1;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  color: var(--btn-fg);
  background: var(--btn-bg);
  border: 1px solid var(--btn-line);
  border-radius: 3px;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out),
    box-shadow var(--dur-2) var(--ease-out), color var(--dur-1) var(--ease-out);
}
.btn:hover { --btn-bg: var(--panel-3); --btn-line: var(--line-3); }
.btn:active { transform: translateY(1px); }
.btn .icon { width: 18px; height: 18px; }
.btn--primary {
  --btn-fg: var(--on-orange); --btn-bg: var(--orange); --btn-line: var(--orange);
  box-shadow: var(--glow-orange);
}
.btn--primary:hover { --btn-bg: var(--orange-core); --btn-line: var(--orange-core); }
.btn--secondary { --btn-fg: var(--text); --btn-bg: transparent; --btn-line: var(--line-3); }
.btn--secondary:hover { --btn-bg: var(--panel-2); --btn-line: var(--steel); }
.btn--ghost { --btn-fg: var(--text-2); --btn-bg: transparent; --btn-line: transparent; }
.btn--ghost:hover { --btn-fg: var(--text); --btn-bg: var(--panel-2); --btn-line: transparent; }
.btn--danger { --btn-fg: var(--red-text); --btn-bg: transparent; --btn-line: rgb(var(--red-rgb) / .55); }
.btn--danger:hover { --btn-bg: rgb(var(--red-rgb) / .12); --btn-line: var(--red); }
.btn--lg { min-height: 60px; padding: 0 var(--s-6); font-size: 1.08rem; letter-spacing: .08em; }
.btn--block { width: 100%; }
.btn:disabled, .btn[aria-disabled="true"] {
  --btn-fg: var(--text-3); --btn-bg: var(--panel-2); --btn-line: var(--line);
  box-shadow: none; cursor: not-allowed; transform: none;
}
.btn[aria-busy="true"] { color: transparent; pointer-events: none; }
.btn[aria-busy="true"]::after {
  content: ""; position: absolute; inset: 0; margin: auto; width: 18px; height: 18px;
  border: 2px solid var(--btn-fg); border-right-color: transparent; border-radius: 50%;
  animation: spin .8s linear infinite;
}

label, .field-label {
  display: block;
  margin-bottom: 6px;
  font-family: var(--font-display);
  font-size: .8rem;
  font-weight: 600;
  font-stretch: 80%;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-2);
}
input[type="text"], input[type="email"], input[type="password"], input[type="number"],
input[type="date"], input[type="datetime-local"], input[type="search"], input[type="tel"],
input[type="url"], select, textarea {
  width: 100%;
  min-height: 48px;
  padding: 10px 12px;
  font: 400 var(--fs-base) / 1.4 var(--font-body);
  color: var(--text);
  background: var(--well);
  border: 1px solid var(--line-2);
  border-radius: 3px;
  box-shadow: inset 0 2px 4px rgb(0 0 0 / .35);
  transition: border-color var(--dur-1) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
}
input::placeholder, textarea::placeholder { color: var(--text-3); opacity: 1; }
input:hover, select:hover, textarea:hover { border-color: var(--line-3); }
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: none; border-color: var(--focus);
  box-shadow: inset 0 2px 4px rgb(0 0 0 / .35), 0 0 0 3px rgb(var(--orange-rgb) / .22);
}
input:disabled, select:disabled, textarea:disabled { color: var(--text-3); cursor: not-allowed;
  background: var(--panel); }
select {
  appearance: none; padding-right: 40px;
  background-image: linear-gradient(45deg, transparent 50%, var(--text-2) 50%),
    linear-gradient(135deg, var(--text-2) 50%, transparent 50%);
  background-position: calc(100% - 20px) 55%, calc(100% - 15px) 55%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
select option { background: var(--panel); color: var(--text); }
textarea { resize: vertical; min-height: 120px; }
input[type="checkbox"], input[type="radio"] { width: 20px; height: 20px; accent-color: var(--orange);
  margin: 0; vertical-align: -4px; }
input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(.8); }
input[type="file"] { font: inherit; color: var(--text-2); max-width: 100%; }
input[type="file"]::file-selector-button {
  margin-right: var(--s-3); min-height: 40px; padding: 0 var(--s-4);
  font: 600 .85rem var(--font-display); font-stretch: 84%; letter-spacing: .07em;
  text-transform: uppercase; color: var(--text); background: var(--panel-3);
  border: 1px solid var(--line-3); border-radius: 3px; cursor: pointer;
}

.field { margin: 0; min-width: 0; }
.field + .field { margin-top: var(--s-4); }
.field .help, .field .helptext, .field-help {
  display: block; margin-top: 6px; font-size: var(--fs-sm); color: var(--text-3);
}
.field .errorlist, .field-error {
  list-style: none; margin: 6px 0 0; padding: 0; font-size: var(--fs-sm); color: var(--red-text);
}
.field .errorlist { order: 3; }
.field:has(.errorlist, .field-error:not([hidden])) :is(input, select, textarea),
.field [aria-invalid="true"] {
  border-color: var(--red);
}
.field--check { display: flex; gap: var(--s-3); align-items: flex-start; }
.field--check label { font-family: var(--font-body); font-size: var(--fs-base); font-weight: 400;
  font-stretch: 100%; text-transform: none; letter-spacing: 0; color: var(--text); margin: 0; }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
legend { padding: 0; margin-bottom: var(--s-2); }

.form-actions {
  display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; margin-top: var(--s-5);
}
@media (max-width: 719.98px) { .form-actions > .btn { flex: 1 1 100%; } }

.segmented {
  display: inline-flex; flex-wrap: nowrap; gap: 2px; padding: 3px;
  background: var(--well); border: 1px solid var(--line-2); border-radius: 3px;
  max-width: 100%; overflow-x: auto;
}
.segmented > a, .segmented > button, .segmented > label {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 36px; margin: 0; padding: 0 var(--s-3);
  font: 600 .78rem / 1 var(--font-display); font-stretch: 80%; letter-spacing: .09em;
  text-transform: uppercase; text-decoration: none; white-space: nowrap;
  color: var(--text-3); background: transparent; border: 0; border-radius: 2px; cursor: pointer;
  box-shadow: none;
  transition: color var(--dur-1) var(--ease-out), background-color var(--dur-1) var(--ease-out);
}
.segmented > :hover { color: var(--text); }
.segmented > [aria-pressed="true"], .segmented > [aria-current], .segmented > [aria-selected="true"],
.segmented > label:has(input:checked) {
  color: var(--text); background: var(--panel-3); box-shadow: inset 0 0 0 1px var(--line-3);
}
.segmented > label > input { position: absolute; opacity: 0; pointer-events: none; }
.segmented > label:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 1px; }
.segmented--sm > a, .segmented--sm > button, .segmented--sm > label { min-height: 30px; padding: 0 10px; }

/* time zone picker: big quick buttons (city over its UTC offset), then any zone from the list */
.segmented--tz { display: grid; width: 100%; overflow: visible;
  grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); }
.segmented--tz > label { flex-direction: column; gap: 4px; min-height: 60px;
  padding: var(--s-2) var(--s-3); white-space: normal; text-align: center; }
.tz-city { font-size: .9rem; line-height: 1.1; }
.tz-offset { font-size: .72rem; letter-spacing: .06em; color: var(--text-3);
  font-variant-numeric: tabular-nums; }
.segmented--tz > label:has(input:checked) .tz-offset { color: var(--text-2); }
.tz-other { display: grid; gap: var(--s-2); margin-top: var(--s-4); }
.tz-other[hidden], .tz-other [hidden] { display: none; }
.tz-other > label { margin: 0; }
.tz-field > .field-help, .tz-field > .field-error { margin-top: var(--s-2); }

.dropzone {
  position: relative;
  display: grid; justify-items: center; gap: var(--s-3);
  padding: var(--s-6) var(--s-4);
  text-align: center;
  color: var(--text-2);
  background: var(--well);
  border: 1.5px dashed var(--line-3);
  border-radius: 3px;
  font: 400 var(--fs-base) / 1.5 var(--font-body);
  letter-spacing: 0;
  text-transform: none;
  margin: 0;
  transition: border-color var(--dur-2) var(--ease-out), background-color var(--dur-2) var(--ease-out);
}
label.dropzone { cursor: pointer; }
.dropzone .icon { width: 36px; height: 36px; color: var(--text-3); }
.dropzone strong { color: var(--text); font-size: var(--fs-md); }
.dropzone.is-over, .dropzone[data-state="over"] {
  border-style: solid; border-color: var(--orange); background: rgb(var(--orange-rgb) / .07);
}
.dropzone.is-over .icon, .dropzone[data-state="over"] .icon { color: var(--orange); }
.dropzone:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 3px; }
.dropzone[data-state="error"] { border-color: var(--red); }
.dropzone .file-list { list-style: none; margin: 0; padding: 0; width: 100%; text-align: left; }
.dropzone .file-list li { display: flex; justify-content: space-between; gap: var(--s-3);
  padding: var(--s-2) 0; border-top: 1px solid var(--line); font-size: var(--fs-sm); }

/* ---- feedback -------------------------------------------------------------------------- */

.notices { display: grid; gap: var(--s-2); list-style: none; margin: 0 0 var(--s-5); padding: 0; }
.notice {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s-3); align-items: start;
  padding: var(--s-3) var(--s-4);
  color: var(--text);
  background: rgb(var(--st-rgb) / .08);
  border: 1px solid rgb(var(--st-rgb) / .4);
  border-radius: 3px;
}
.notice::before {
  content: ""; width: 14px; height: 14px; margin-top: .3em; clip-path: var(--octagon);
  background: var(--st);
}
.notice:not([data-status]) { --st: var(--steel); --st-rgb: var(--steel-rgb); }
.notice > * { grid-column: 2; }
.notice strong:first-child { color: var(--st-text); }
.notice .btn { justify-self: start; margin-top: var(--s-2); }

.empty {
  display: grid; justify-items: center; gap: var(--s-3);
  padding: var(--s-7) var(--s-4);
  text-align: center;
  border: 1px dashed var(--line-2);
  border-radius: 3px;
}
.empty > .lamp { margin-bottom: var(--s-2); }
.empty h2, .empty h3 { font-size: var(--fs-md); }
.empty p { color: var(--text-3); max-width: 42ch; }

.skeleton {
  display: block; height: 1em; min-height: 12px;
  background: var(--panel-3); border-radius: 2px;
  animation: breathe 1.6s var(--ease-out-quart) infinite alternate;
}
.skeleton + .skeleton { margin-top: var(--s-2); }

.spinner {
  display: inline-block; width: 20px; height: 20px; flex: none; vertical-align: middle;
  border: 2px solid var(--line-2); border-top-color: var(--steel); border-radius: 50%;
  animation: spin .8s linear infinite;
}
.spinner--lg { width: 36px; height: 36px; border-width: 3px; }

/* ---- navigation ------------------------------------------------------------------------ */

.topbar {
  position: sticky; top: 0; z-index: var(--z-nav);
  display: flex; align-items: center; gap: var(--s-4);
  height: var(--topbar-h);
  padding: 0 var(--gutter);
  background: rgb(16 19 23 / .97);
  border-bottom: 1px solid var(--line-2);
  box-shadow: 0 3px 0 -2px var(--line), 0 12px 24px -16px rgb(0 0 0 / .9);
}
.topbar-brand {
  display: inline-flex; align-items: center; gap: 10px; margin-right: auto;
  color: var(--text); text-decoration: none; min-width: 0;
}
.topbar-brand img { width: 40px; height: 40px; flex: none; }
.wordmark {
  font-family: var(--font-display); font-weight: 700; font-stretch: 100%;
  font-size: .95rem; letter-spacing: .2em; white-space: nowrap;
}
.wordmark-sub { font-family: var(--font-display); color: var(--text-3); font-weight: 600;
  font-stretch: 84%; letter-spacing: .12em; text-transform: uppercase; font-size: .72rem;
  margin-left: 2px; padding-left: 10px; border-left: 1px solid var(--line-2); }
@media (max-width: 480px) { .wordmark-sub { display: none; } }
@media (max-width: 400px) { .wordmark { font-size: .82rem; letter-spacing: .14em; } }
.topbar-tools { display: flex; align-items: center; gap: var(--s-2); }
.topbar-tools form { margin: 0; }

.nav { display: flex; align-items: center; gap: var(--s-1); }
.nav a {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 var(--s-3);
  font-family: var(--font-display); font-size: .8rem; font-weight: 600; font-stretch: 80%;
  letter-spacing: .1em; text-transform: uppercase; text-decoration: none; color: var(--text-2);
  border-bottom: 2px solid transparent;
}
.nav a:hover { color: var(--text); }
.nav a[aria-current="page"] { color: var(--text); border-bottom-color: var(--text); }
@media (max-width: 719.98px) { .topbar .nav--app { display: none; } }

.usermenu { position: relative; }
.usermenu > summary {
  list-style: none; display: grid; place-items: center; width: 40px; height: 40px;
  border-radius: 3px;
}
.usermenu > summary:hover { background: var(--panel-2); }
.usermenu[open] > summary { background: var(--panel-3); }
.usermenu-panel {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: var(--z-menu);
  width: min(280px, calc(100vw - 2 * var(--gutter)));
  padding: var(--s-2);
  background: var(--panel);
  border: 1px solid var(--line-2);
  border-radius: 3px;
  box-shadow: inset 0 0 0 3px var(--panel), inset 0 0 0 4px var(--line), 0 18px 40px -12px rgb(0 0 0 / .9);
}
.usermenu-panel .usermenu-who { padding: var(--s-3); border-bottom: 1px solid var(--line);
  margin-bottom: var(--s-1); overflow-wrap: anywhere; }
.usermenu-panel a, .usermenu-panel button {
  display: flex; align-items: center; gap: var(--s-3); width: 100%; min-height: 44px;
  padding: 0 var(--s-3); font: inherit; color: var(--text-2); text-decoration: none;
  background: none; border: 0; border-radius: 2px; cursor: pointer; text-align: left;
}
.usermenu-panel a:hover, .usermenu-panel button:hover { color: var(--text); background: var(--panel-2); }
.usermenu-panel form { margin: 0; }

.breadcrumbs { font-family: var(--font-display); font-size: .78rem; font-weight: 600;
  font-stretch: 80%; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); }
.breadcrumbs ol { display: flex; flex-wrap: wrap; gap: 4px 0; list-style: none; margin: 0; padding: 0; }
.breadcrumbs li + li::before { content: "/"; margin: 0 10px; color: var(--line-3); }
.breadcrumbs a { color: var(--text-2); text-decoration: none; }
.breadcrumbs a:hover { color: var(--text); }
.breadcrumbs [aria-current] { color: var(--text); }

/* client tab bar: phones only, upload in thumb reach */
.tabbar {
  position: fixed; z-index: var(--z-nav); left: 0; right: 0; bottom: 0;
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; align-items: end;
  height: calc(var(--tabbar-h) + env(safe-area-inset-bottom));
  padding: 0 var(--s-2) env(safe-area-inset-bottom);
  background: rgb(16 19 23 / .98);
  border-top: 1px solid var(--line-2);
  box-shadow: 0 -3px 0 -2px var(--line);
}
.tabbar a {
  display: grid; justify-items: center; align-content: center; gap: 3px; height: var(--tabbar-h);
  font-family: var(--font-display); font-size: .66rem; font-weight: 600; font-stretch: 80%;
  letter-spacing: .08em; text-transform: uppercase; text-decoration: none; color: var(--text-3);
  -webkit-tap-highlight-color: transparent;
}
.tabbar a .icon { width: 24px; height: 24px; }
.tabbar a[aria-current="page"] { color: var(--text); }
.tabbar .tabbar-main { align-content: end; padding-bottom: 8px; color: var(--text-2); }
.tabbar .tabbar-main .tabbar-key {
  display: grid; place-items: center; width: 58px; height: 58px; margin-top: -26px;
  color: var(--on-orange); background: var(--orange); clip-path: var(--octagon);
}
.tabbar .tabbar-main .icon { width: 28px; height: 28px; stroke-width: 2; }
.tabbar-main-wrap { filter: drop-shadow(0 0 8px rgb(var(--orange-rgb) / .45)); }
.shell:has(> .tabbar) { --dock-offset: var(--tabbar-h); }
.shell:has(> .tabbar) > .page { padding-bottom: calc(var(--tabbar-h) + var(--s-7)); }
.shell:has(> .tabbar) > .footer { padding-bottom: calc(var(--tabbar-h) + var(--s-5)); }
@media (min-width: 720px) {
  .tabbar { display: none; }
  .shell:has(> .tabbar) { --dock-offset: 0px; }
  .shell:has(> .tabbar) > .page { padding-bottom: var(--s-7); }
  .shell:has(> .tabbar) > .footer { padding-bottom: var(--s-5); }
}

/* studio rail: side column on desktop, bottom tabs on phones */
.rail {
  position: fixed; z-index: var(--z-nav); left: 0; right: 0; bottom: 0;
  background: rgb(16 19 23 / .98);
  border-top: 1px solid var(--line-2);
  box-shadow: 0 -3px 0 -2px var(--line);
  padding-bottom: env(safe-area-inset-bottom);
}
.rail ul { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; list-style: none;
  margin: 0; padding: 0 var(--s-1); }
.rail a {
  position: relative;
  display: grid; justify-items: center; align-content: center; gap: 3px;
  height: var(--tabbar-h); padding: 0 2px;
  font-family: var(--font-display); font-size: .64rem; font-weight: 600; font-stretch: 78%;
  letter-spacing: .06em; text-transform: uppercase; text-decoration: none; color: var(--text-3);
  -webkit-tap-highlight-color: transparent;
}
.rail a .icon { width: 24px; height: 24px; }
.rail a:hover { color: var(--text); }
.rail a[aria-current="page"] { color: var(--text); }
.rail a[aria-disabled="true"] { opacity: .55; }
.rail .rail-count {
  position: absolute; top: 8px; left: calc(50% + 6px);
  min-width: 18px; padding: 1px 4px; font-size: .62rem; letter-spacing: 0; text-align: center;
}
.rail-title, .rail-foot { display: none; }
/* the rail is one tab row plus its 1px top rule: docked bars sit right above it */
.shell:has(> .rail) { --dock-offset: calc(var(--tabbar-h) + 1px); }
.shell:has(> .rail) > .page { padding-bottom: calc(var(--tabbar-h) + var(--s-7)); --page-max: 1280px; }
.shell:has(> .rail) > .footer { padding-bottom: calc(var(--tabbar-h) + var(--s-5)); }
/* phones: a docked page action stacks on the tab row, so the page's end clears both */
@media (max-width: 719.98px) {
  .shell:is(:has(> .rail), :has(> .tabbar)) > .page:has(> .page-actions:not(:empty)) {
    padding-bottom: calc(var(--tabbar-h) + 72px + var(--s-7));
  }
}
@media (min-width: 960px) {
  .shell:has(> .rail) {
    --dock-offset: 0px;
    grid-template-columns: var(--rail-w) minmax(0, 1fr);
    grid-template-areas: "top top" "rail main" "rail foot";
  }
  .shell:has(> .rail) > .page { padding-bottom: var(--s-7); }
  .shell:has(> .rail) > .footer { padding-bottom: var(--s-5); }
  .rail {
    grid-area: rail;
    position: sticky; top: var(--topbar-h); bottom: auto;
    align-self: start;
    height: calc(100dvh - var(--topbar-h));
    display: flex; flex-direction: column;
    padding: var(--s-5) var(--s-3);
    background: rgb(16 19 23 / .9);
    border-top: 0; border-right: 1px solid var(--line-2);
    box-shadow: 3px 0 0 -2px var(--line);
  }
  .rail-title { display: block; padding: 0 var(--s-3) var(--s-3); }
  .rail ul { grid-auto-flow: row; gap: 2px; padding: 0; }
  .rail a {
    display: flex; justify-items: start; align-items: center; gap: var(--s-3);
    height: 44px; padding: 0 var(--s-3);
    font-size: .82rem; letter-spacing: .1em; font-stretch: 80%;
    color: var(--text-2); border-radius: 3px;
  }
  .rail a .icon { width: 20px; height: 20px; }
  .rail a:hover { background: var(--panel-2); }
  .rail a[aria-current="page"] { background: var(--panel-3); box-shadow: inset 0 0 0 1px var(--line-3); }
  .rail .rail-count { position: static; margin-left: auto; }
  .rail-foot { display: block; margin-top: auto; padding: var(--s-3); border-top: 1px solid var(--line); }
  .rail-foot a { height: 36px; padding: 0; font-size: .75rem; color: var(--text-3); }
  .rail-foot a:hover { background: none; color: var(--text); }
}

.footer {
  display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); justify-content: space-between;
  padding: var(--s-5) var(--gutter);
  font-size: var(--fs-sm); color: var(--text-3);
  border-top: 1px solid var(--line);
}
.footer a { color: var(--text-3); }
.footer a:hover { color: var(--text); }

/* ---- charts ---------------------------------------------------------------------------- */

/* oscilloscope graticule: 10 x 8 divisions, brighter centre axes with 5 minor ticks each */
.graticule {
  position: relative;
  background-color: var(--well);
  background-image:
    linear-gradient(to right, transparent calc(50% - .5px), var(--grat-2) calc(50% - .5px),
      var(--grat-2) calc(50% + .5px), transparent calc(50% + .5px)),
    linear-gradient(to bottom, transparent calc(50% - .5px), var(--grat-2) calc(50% - .5px),
      var(--grat-2) calc(50% + .5px), transparent calc(50% + .5px)),
    repeating-linear-gradient(to right, var(--grat-2) 0 1px, transparent 1px 2%),
    repeating-linear-gradient(to bottom, var(--grat-2) 0 1px, transparent 1px 2.5%),
    linear-gradient(to right, var(--grat) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grat) 1px, transparent 1px);
  background-size: 100% 100%, 100% 100%, 100% 7px, 7px 100%, 10% 100%, 100% 12.5%;
  background-position: 0 0, 0 0, 0 50%, 50% 0, 0 0, 0 0;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, repeat, repeat;
  border: 1px solid var(--line-2);
  border-radius: 2px;
}

/* ---- corner cuts: bevelled corners where the browser supports corner-shape ------------- */

@supports (corner-shape: bevel) {
  .panel, .usermenu-panel { border-radius: var(--cut-m); corner-shape: bevel; }
  .board { border-radius: var(--cut-l); corner-shape: bevel; }
  .btn, .segmented, .notice, .empty, .dropzone, .graticule,
  input[type="text"], input[type="email"], input[type="password"], input[type="number"],
  input[type="date"], input[type="datetime-local"], input[type="search"], input[type="tel"],
  input[type="url"], select, textarea { border-radius: var(--cut-s); corner-shape: bevel; }
  .btn--lg { border-radius: 7px; }
  .tag { border-radius: 3px; corner-shape: bevel; }
}

/* ---- motion: the one authored moment, a neon tube igniting ------------------------------ */

@keyframes ignite {
  0% { --ignite: .08; }
  7% { --ignite: .9; }
  11% { --ignite: .2; }
  17% { --ignite: 1; }
  22% { --ignite: .45; }
  100% { --ignite: 1; }
}
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes breathe { from { opacity: .45; } to { opacity: .9; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .spinner, .btn[aria-busy="true"]::after { animation: spin 2.4s linear infinite !important; }
}

@media print {
  body { background: #fff; color: #000; }
  .topbar, .tabbar, .rail, .footer, .page-actions { display: none !important; }
}

/* ---- auth pages (allauth layout) ------------------------------------------------------- */

.auth-badge { display: block; width: 168px; height: 168px; margin: 0 auto;
  filter: drop-shadow(0 12px 24px rgb(0 0 0 / .6)); }
.is-auth .page > h1 { text-align: center; }
.is-auth .page form:not(.segmented) {
  display: grid; gap: var(--s-4);
  padding: var(--s-5) var(--s-4);
  background: var(--panel); border: 1px solid var(--line-2); border-radius: 3px;
  box-shadow: inset 0 0 0 3px var(--panel), inset 0 0 0 4px var(--line), var(--depth);
}
.is-auth .page form:not(.segmented) > * { margin: 0; }
.is-auth .page form button[type="submit"] { width: 100%; min-height: 52px; }
@supports (corner-shape: bevel) {
  .is-auth .page form:not(.segmented) { border-radius: var(--cut-m); corner-shape: bevel; }
}
@media (max-width: 559.98px) {
  .topbar:has(.nav:not(.nav--app)) .wordmark { display: none; }
  .topbar .nav:not(.nav--app) a { padding: 0 var(--s-2); }
}