/**
 * agentsclub V2 - base layer (font, reset, typography ramp, buttons)
 *
 * Extracted from v2-docs/{zasady-redesignu,zadania,badanie-rynku-w-niszy}.html
 * - the parts that are identical, or near enough, across every mockup.
 * Requires css/v2/tokens.css to be loaded first.
 *
 * A few rules genuinely differ per page (e.g. kurs.html's lesson-title h1 is
 * larger and more tightly tracked than the generic h1 here, and only kurs.html
 * has a `.btn.ghost` variant) - those overrides live in the page-specific
 * stylesheet that needs them (player.css etc.), loaded after this file, per
 * zasady-redesignu.html §02's own rule: differences are deliberate, not
 * picked-a-winner. See the refactor plan §3.2.
 */

/* Self-hosted (see frontend/public/fonts/funnel-sans/OFL.txt) instead of a
   Google Fonts <link> - the app has no other third-party origins and
   already self-hosts Phosphor the same way. Two subsets, same as Google's
   own CSS, so the browser only downloads the range it needs; Polish
   diacritics span both (ó sits in latin, ą/ć/ę/ł/ń/ś/ź/ż in latin-ext). */
@font-face{
  font-family:"Funnel Sans";
  font-style:normal;
  font-weight:300 800;
  font-display:swap;
  src:url("/fonts/funnel-sans/FunnelSans-latin-ext.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:"Funnel Sans";
  font-style:normal;
  font-weight:300 800;
  font-display:swap;
  src:url("/fonts/funnel-sans/FunnelSans-latin.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;
}

/* Bitcount Grid Single (issue #99 §10) - krój o stałej szerokości na liczniki,
   godziny, pozycje w rankingu i kickery. Self-hosted jak Funnel Sans wyżej
   (licencja: frontend/public/fonts/bitcount/OFL.txt), bo `font-src 'self'`
   w `security_csp_policy()` nie przepuszcza fonts.gstatic.com, a doklejanie
   tam obcego originu dla dwóch kilobajtów byłoby żądaniem do Google przy
   każdej odsłonie. Te same dwa podzbiory co przy Funnel Sans i ta sama
   kolejność - polskie ogonki leżą w obu. */
@font-face{
  font-family:"Bitcount Grid Single";
  font-style:normal;
  font-weight:300 700;
  font-display:swap;
  src:url("/fonts/bitcount/BitcountGridSingle-latin-ext.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:"Bitcount Grid Single";
  font-style:normal;
  font-weight:300 700;
  font-display:swap;
  src:url("/fonts/bitcount/BitcountGridSingle-latin.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;
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}

body{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  font-family:"Funnel Sans",system-ui,sans-serif;
  background:var(--bg);
  color:var(--ink);
  font-size:var(--fs-body);
  line-height:1.6;
  transition:background-color .2s ease-out,color .2s ease-out;
}

a{color:inherit}
/* Buttons don't inherit colour from their parent - the UA sheet gives them
   `buttontext`, i.e. black. In light mode that is within a hair of --ink so
   nobody sees it; in dark mode any button styled as a surface (course.css's
   .module-head, which carries the module title) renders black on a dark
   panel. Same reason `a` is here. */
button{color:inherit}

.hidden{display:none!important}

/* ---------- inline Phosphor icons (views/layout/icons-v2.php) ----------
   Lives here, not in a per-route sheet: five V2 pages print icon_v2() and
   they'd each need their own copy of this rule. 1em square, so an icon
   scales with whatever text it sits next to instead of needing a size per
   call site, and it takes currentColor. Phosphor "regular" glyphs are
   fills, not strokes - never set stroke-width on them. */
.ic{width:1em;height:1em;flex:none;vertical-align:-.12em}

/* zasady-redesignu.html §02: headings weight 650, tight tracking, text-wrap
   balance/pretty. Generic element rules - kurs.html's `.stage h1` (lesson
   title) overrides size/tracking/margin for the player specifically. */
h1{font-size:var(--fs-h);font-weight:650;letter-spacing:-.02em;line-height:1.2;text-wrap:balance}
h2{font-size:20px;font-weight:650;letter-spacing:-.012em;line-height:1.3;text-wrap:balance}
p{text-wrap:pretty}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  text-decoration:none;border:none;cursor:pointer;
  font-family:inherit;font-size:var(--fs-small);font-weight:600;letter-spacing:.01em;
  padding:12px 24px;border-radius:999px;
  background:var(--btn-bg);color:var(--btn-fg);
  transition:background-color .18s ease-out,transform .18s ease-out;
}
@media(hover:hover){.btn:hover{background:color-mix(in srgb,var(--btn-bg) 86%,var(--bg))}}
.btn:active{transform:scale(.98)}
.btn svg{width:14px;height:14px;transition:transform .18s ease-out}
@media(hover:hover){.btn:hover svg{transform:translateX(3px)}}

/* ---------- theme toggle ---------- */
.theme-btn{
  width:36px;height:36px;border-radius:999px;border:none;cursor:pointer;
  background:var(--pill);color:var(--ink);
  display:grid;place-items:center;flex:none;
  transition:background-color .18s ease-out,color .18s ease-out;
}
@media(hover:hover){.theme-btn:hover{background:color-mix(in srgb,var(--pill) 80%,var(--ink) 8%)}}
.theme-btn svg{display:block;width:16px;height:16px}
/* Trzy stany preferencji, nie dwa - i wybieramy je z data-theme-pref, a NIE
   z data-theme: tamten atrybut trzyma wyliczony WYGLAD strony, wiec przy
   „auto" ma wartosc „light" albo „dark" i ikona systemu nie zapalilaby sie
   nigdy. Ikona pokazuje stan WLACZONY (jasny -> slonce), a nie ten, ktory
   bedzie po kliknieciu: przy trzech stanach „co dostaniesz za chwile" jest
   nie do przeczytania. Baza bez atrybutu = jasny, bo tyle widac przy
   wylaczonym JS - a wtedy przycisk i tak nic nie robi. */
.theme-btn .ic-sun{display:block}
.theme-btn .ic-moon,.theme-btn .ic-auto{display:none}
html[data-theme-pref="dark"] .theme-btn .ic-sun{display:none}
html[data-theme-pref="dark"] .theme-btn .ic-moon{display:block}
html[data-theme-pref="auto"] .theme-btn .ic-sun{display:none}
html[data-theme-pref="auto"] .theme-btn .ic-auto{display:block}

/* ---------- shop ----------
   Ten sam krążek co .theme-btn, bo w pasku stoi obok niego i różnica w
   kształcie czytałaby się jako różnica w wadze. Link, nie przycisk: prowadzi
   na stronę, więc ma się otwierać w nowej karcie i lądować w historii.
   Stan „tu jesteś" idzie akcentem, tak jak w .switcher a.active. */
.shop-btn{
  width:36px;height:36px;border-radius:999px;
  background:var(--pill);color:var(--ink);
  display:grid;place-items:center;flex:none;text-decoration:none;
  transition:background-color .18s ease-out,color .18s ease-out;
}
@media(hover:hover){.shop-btn:hover{background:color-mix(in srgb,var(--pill) 80%,var(--ink) 8%)}}
.shop-btn svg{display:block;width:17px;height:17px}
.shop-btn.active{color:var(--acc)}

/* ---------- focus ---------- */
a:focus-visible,button:focus-visible{outline:2px solid var(--ink);outline-offset:2px;border-radius:999px}