/* PulseFlow shared stylesheet.
   Loaded by every page AFTER its own inline styles so the design tokens below win everywhere.
   Contents: self-hosted Inter, unified design tokens, focus styles, language switcher, mobile navigation. */

/* Inter (SIL Open Font License, see fonts/LICENSE-Inter-OFL.txt). Variable weight 100–900, latin + latin-ext subsets. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/inter-latin-wght-normal.woff2') format('woff2-variations'), url('fonts/inter-latin-wght-normal.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: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/inter-latin-ext-wght-normal.woff2') format('woff2-variations'), url('fonts/inter-latin-ext-wght-normal.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;
}

/* One palette for the whole site. Pages used to declare slightly different values for the same names. */
:root {
  --ink: #061012;
  --bg: #061012;
  --panel: #0b171a;
  --panel-2: #0e2024;
  --panel2: #0e2024;
  --line: rgba(148, 219, 220, .16);
  --soft: #8aa9ad;
  --text: #edfafa;
  --mint: #5dffb4;
  --blue: #52b9ff;
  --electric: #52b9ff;
  --coral: #ff776d;
  --warn: #f7ca66;
  --danger: #ff7777;
  --glow: 0 0 36px rgba(82, 185, 255, .14);
  --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

html { -webkit-text-size-adjust: 100%; }
body { font-family: var(--font-sans); }

/* Keyboard focus is visible on every page. */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--mint);
  outline-offset: 3px;
}

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* Flags as inline SVG so they look the same on every system (emoji flags are missing on Windows). */
.flag { display: inline-block; width: 18px; height: 12px; margin-right: 6px; border-radius: 2px; vertical-align: -1px; background-size: cover; background-position: center; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); }
.flag-us { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 19 10'><rect width='19' height='10' fill='%23b22234'/><path stroke='%23fff' stroke-width='.77' d='M0 1.15h19M0 2.69h19M0 4.23h19M0 5.77h19M0 7.31h19M0 8.85h19'/><rect width='7.6' height='5.38' fill='%233c3b6e'/><g fill='%23fff'><circle cx='.95' cy='.9' r='.3'/><circle cx='2.4' cy='.9' r='.3'/><circle cx='3.85' cy='.9' r='.3'/><circle cx='5.3' cy='.9' r='.3'/><circle cx='6.75' cy='.9' r='.3'/><circle cx='1.7' cy='1.9' r='.3'/><circle cx='3.15' cy='1.9' r='.3'/><circle cx='4.6' cy='1.9' r='.3'/><circle cx='6.05' cy='1.9' r='.3'/><circle cx='.95' cy='2.9' r='.3'/><circle cx='2.4' cy='2.9' r='.3'/><circle cx='3.85' cy='2.9' r='.3'/><circle cx='5.3' cy='2.9' r='.3'/><circle cx='6.75' cy='2.9' r='.3'/><circle cx='1.7' cy='3.9' r='.3'/><circle cx='3.15' cy='3.9' r='.3'/><circle cx='4.6' cy='3.9' r='.3'/><circle cx='6.05' cy='3.9' r='.3'/><circle cx='.95' cy='4.8' r='.3'/><circle cx='2.4' cy='4.8' r='.3'/><circle cx='3.85' cy='4.8' r='.3'/><circle cx='5.3' cy='4.8' r='.3'/><circle cx='6.75' cy='4.8' r='.3'/></g></svg>"); }
.flag-es { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 2'><rect width='3' height='2' fill='%23c60b1e'/><rect y='.5' width='3' height='1' fill='%23ffc400'/></svg>"); }
.flag-br { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 14'><rect width='20' height='14' fill='%23009c3b'/><path d='M10 1.7 18.3 7 10 12.3 1.7 7z' fill='%23ffdf00'/><circle cx='10' cy='7' r='3.5' fill='%23002776'/><path d='M6.7 6.1q3.4-1 6.6 1.4' stroke='%23fff' stroke-width='.55' fill='none'/></svg>"); }

/* Language switcher: same tap size and pressed state everywhere. Pages keep their own colours. */
[data-lang] { min-height: 32px; min-width: 44px; font-family: inherit; }
[data-lang][aria-pressed="true"] { cursor: default; }

/* Mobile navigation (pages with a .links group inside .nav). The toggle is injected by site.js. */
.nav-toggle { display: none; }
@media (max-width: 850px) {
  .nav { position: relative; }
  .nav-toggle { display: inline-flex; flex-direction: column; justify-content: center; gap: 5px; width: 42px; height: 42px; padding: 0 11px; border: 1px solid var(--line); border-radius: 9px; background: transparent; cursor: pointer; flex: 0 0 auto; }
  .nav-toggle span { display: block; height: 2px; border-radius: 2px; background: var(--text); transition: transform .2s ease, opacity .2s ease; }
  .nav.open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav.open .nav-toggle span:nth-child(2) { opacity: 0; }
  .nav.open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .nav.open .links { display: flex !important; flex-direction: column; position: absolute; top: calc(100% + 1px); left: 0; right: 0; z-index: 30; gap: 4px; padding: 12px; font-size: 1rem; background: var(--panel); border: 1px solid var(--line); border-radius: 0 0 12px 12px; box-shadow: 0 24px 60px rgba(0, 0, 0, .45); }
  .nav.open .links a { display: block; padding: 12px 10px; border-radius: 8px; color: var(--text); }
  .nav.open .links a:hover { background: var(--panel-2); }
}
.links .menu-account { display: none; }
@media (max-width: 480px) {
  [data-lang] { min-width: 36px; }
  .nav-actions .ghost { display: none; }
  .nav.open .links .menu-account { display: block; border-top: 1px solid var(--line); margin-top: 6px; padding-top: 14px; }
}