/* ============================================================
   ksktech.dev — KSKPix pages: the 2.7.0 app design language
   (kskpix-infra/docs/design-language.md), on top of site.css.

   Loaded AFTER site.css on every KSKPix page (kskpix/*, downloads,
   epg, status). The umbrella home (/) and 404 keep the site look.
   Same selectors, same specificity, later in cascade = this wins.

   What the app look is, in one list:
     type     Onest, one family. Titles t0 600, metadata t1 400,
              eyebrows 500 caps +6 % tracking. KSKTerm stays for the
              [KSK TECH_] lockup only (that is the wordmark rule).
     ink      t0 #F4F3F6 titles · t1 #B9B7C0 meta · faint #777579 hints
     red      the brand line and a LIVE dot only. Never a link, a
              button, an icon or a focus ring.
     focus    WHITE.
     buttons  pills on the phone ladder: L 48 · M 46 · S 32. Primary =
              t0 fill + dark ink, secondary = white 10 % fill. Pressed =
              one step darker, no scale.
     surfaces flat: bg #0D0C0F · surface #17161B · card #1D1C22 ·
              input #232129, hairline white 8 %, radii 12 / 18 / 24.
              No glass, no blur, no street map — the app has none.
     icons    Material Icons Rounded, filled, in text colour.
   ============================================================ */

@font-face {
  font-family: 'Onest';
  src: url('/assets/fonts/onest-var.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Onest carries Latin, Latin Extended, Vietnamese and Cyrillic. Every other
     script (Arabic, Indic, CJK, Greek…) falls through to the system face —
     the same thing the apps do. */
  --sans: 'Onest', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, system-ui, sans-serif;

  /* ink ladder → the app's three tiers */
  --t-100: #F4F3F6;
  --t-90:  #F4F3F6;
  --t-62:  #B9B7C0;
  --t-58:  #B9B7C0;
  --t-55:  #B9B7C0;
  --t-45:  #B9B7C0;
  --t-36:  #777579;

  /* surfaces (AppColors.bgRaised / bgCard / bgInput) */
  --surface: #17161B;
  --card:    #1D1C22;
  --raised:  #232129;
  --line:    rgba(255,255,255,.08);
  --fill-10: rgba(255,255,255,.10);
  --fill-14: rgba(255,255,255,.14);
  --fill-18: rgba(255,255,255,.18);

  --primary-fill:  #F4F3F6;
  --primary-ink:   #0D0C0F;
  --primary-hover: #E6E5EA;
  --primary-press: #D6D5DB;

  /* site tokens re-pointed at the flat surfaces */
  --glass:        var(--surface);
  --glass-2:      var(--surface);
  --glass-empty:  var(--surface);
  --glass-hover:  var(--card);
  --glass-header: rgba(13,12,15,.86);
  --glass-footer: var(--bg);
  --hair:         var(--line);
  --hair-soft:    var(--line);
  --hair-strong:  rgba(255,255,255,.14);
  --ghost:        var(--fill-10);
  --ghost-edge:   transparent;
  --frost-edge:   transparent;
  --sh-card: none; --sh-primary: none; --sh-panel: none; --sh-hover: none; --sh-pill: none;

  /* KskRadius: xs 4 · sm 8 · md 12 · lg 18 · xl 24 */
  --r-panel: 24px;
  --r-lg:    24px;
  --r-card:  18px;
  --r-media: 18px;
  --r-input: 12px;
  --r-inset: 12px;
  --r-chip:  4px;
}

[data-theme="light"] {
  --t-100: #17151A;
  --t-90:  #17151A;
  --t-62:  #514C55;
  --t-58:  #514C55;
  --t-55:  #514C55;
  --t-45:  #514C55;
  --t-36:  #8A8690;

  --surface: #FFFFFF;
  --card:    #FFFFFF;
  --raised:  #E9E6DF;
  --line:    rgba(0,0,0,.07);
  --fill-10: rgba(23,21,26,.08);
  --fill-14: rgba(23,21,26,.12);
  --fill-18: rgba(23,21,26,.16);

  --primary-fill:  #17151A;
  --primary-ink:   #F4F3F6;
  --primary-hover: #2A272E;
  --primary-press: #3A3740;

  --glass-header: rgba(242,240,234,.86);
  --hair-strong:  rgba(23,21,26,.14);
}

/* ---- base ---------------------------------------------------- */
body { font-variant-numeric: tabular-nums; }
:focus-visible { outline: 2px solid var(--t-100); outline-offset: 3px; }

/* The app has no street map behind its pages: flat ground. Restoring the map
   on these pages is deleting this one rule. */
.mapbg, .scrim { display: none; }

/* ---- type ---------------------------------------------------- */
h1, h2, h3, h4 { font-weight: 600; letter-spacing: -.025em; }
.h1, .h1-page, .h1-legal, .h1-privacy, .h1-kskpix { letter-spacing: -.03em; }
.h2, .h2-donate { letter-spacing: -.025em; }
.h2-panel { letter-spacing: -.02em; }
.lead { color: var(--t-62); }
.footnote { color: var(--t-62); font-size: 14px; }

/* Eyebrows and metadata: Onest 500 caps, +6 % tracking, t1. The brand lockup
   keeps var(--mono) (KSKTerm) — .brand .tbox is not touched here. */
.mono {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .06em;
  color: var(--t-62);
}
.mono-meta { font-size: 12px; letter-spacing: .06em; }
.field > .mono { letter-spacing: .06em; }
.lb-count { font-size: 13px; letter-spacing: .06em; }

/* No second face in the app: code lines sit in Onest with tabular figures. */
:not(pre) > code, .code-line, .prose :not(pre) > code, .shell .glass-2 code {
  font-family: var(--sans);
  font-variant-numeric: tabular-nums;
}
pre, pre code { font-family: var(--mono); font-size: 13px; line-height: 1.6; }
.code-line { font-size: 17px; font-weight: 600; letter-spacing: 0; }
.prose code, .shell .glass-2 code { font-size: .92em; font-weight: 500; border-radius: 4px;
  background: var(--fill-10); color: var(--t-100); }

/* Links: text colour with a quiet underline; red is never a link. */
.shell a.sig, .shell .prose a, .shell .rows .prose a {
  color: var(--t-100);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(185,183,192,.45);
  text-underline-offset: 3px;
  transition: text-decoration-color .18s ease;
}
.shell a.sig:hover, .shell .prose a:hover, .shell .rows .prose a:hover { color: var(--t-100); text-decoration-color: currentColor; }
.prose strong { color: var(--t-100); }
.prose em { color: var(--t-100); }
.prose p, .prose li { color: var(--t-62); }

/* ---- surfaces: flat, hairline, no glass --------------------- */
.glass, .glass-2, .glass-card, .glass-panel, .glass-empty, .prose .summary, .shell .contact-card, .rows {
  background: var(--surface);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border: 1px solid var(--line);
  box-shadow: none;
}
.glass::before, .glass-2::before { display: none; }
.glass, .glass-card { border-radius: var(--r-lg); }
.glass-2 { border-radius: var(--r-card); }
.glass-panel { border-radius: var(--r-panel); }
.shell .contact-card { border-radius: var(--r-card); }
.prose .summary { border-radius: var(--r-card); }
.rows { border-radius: var(--r-card); }
.rows > * { border-bottom-color: var(--line); }
.lift:hover { background: var(--card); box-shadow: none; }
.inset { background: var(--raised); border: 1px solid var(--line); border-radius: var(--r-inset); }

/* ---- buttons: one pill, three sizes ------------------------- */
.btn {
  min-height: 48px;
  padding: 0 20px;
  gap: 8px;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0;
  border-radius: 999px;
  border: 0;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  transition: background .16s ease, color .16s ease;
}
.btn:active { transform: none; }
.btn-white, .btn-signal, [data-theme="light"] .btn-white {
  background: var(--primary-fill);
  color: var(--primary-ink);
  min-height: 48px;
  padding: 0 20px;
  font-size: 16px;
}
.btn-white:hover, .btn-signal:hover { background: var(--primary-hover); }
.btn-white:active, .btn-signal:active { background: var(--primary-press); }
.btn-ghost { background: var(--fill-10); color: var(--t-100); border: 0; padding: 0 20px; }
.btn-ghost:hover { background: var(--fill-14); }
.btn-ghost:active { background: var(--fill-18); }
.btn-m { min-height: 46px; padding: 0 16px; font-size: 15px; }
.btn-s { min-height: 32px; padding: 0 12px; font-size: 13px; }
.shell .btn[disabled] { opacity: .5; transform: none; }

/* Segments (the screenshot tabs): S 32 pills, selected = white fill. */
.tab {
  min-height: 32px;
  padding: 0 12px;
  font-size: 13px;
  font-weight: 500;
  border: 0;
  background: var(--fill-10);
  color: var(--t-62);
}
.tab:hover { background: var(--fill-14); color: var(--t-100); }
.tab[aria-selected="true"], [data-theme="light"] .tab[aria-selected="true"] {
  background: var(--primary-fill); color: var(--primary-ink); font-weight: 600;
}
.tab-sm { min-height: 32px; padding: 0 12px; font-size: 13px; }

/* Chips: the round grey chip (the Home "2 playlists" chip) for the live
   download counter; the outline badge for facts. */
.pill-status {
  min-height: 32px;
  padding: 0 14px;
  gap: 8px;
  background: var(--fill-10);
  border: 0;
  font-size: 13px;
  font-weight: 500;
  color: var(--t-62);
}
.pill-status strong { color: var(--t-100); font-weight: 600; }
.badge-soon {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .06em;
  color: var(--t-62);
  background: transparent;
  border: 1px solid var(--hair-strong);
  border-radius: 4px;
  padding: 2px 6px;
}

/* ---- forms: 52-tall fields, raised fill, hairline, quiet focus ------ */
.input, .textarea {
  background: var(--raised);
  border: 1px solid var(--line);
  border-radius: var(--r-input);
  font-family: var(--sans);
  font-size: 16px;
  padding: 14px 16px;
  min-height: 52px;
}
.textarea { border-radius: var(--r-input); padding: 14px 16px; }
.input::placeholder, .textarea::placeholder { color: var(--t-36); }
.input:focus, .textarea:focus {
  border-color: rgba(255,255,255,.28);
  box-shadow: none;
}
[data-theme="light"] .input:focus, [data-theme="light"] .textarea:focus { border-color: rgba(23,21,26,.3); }
.shell .fb-req { color: var(--t-62); }
.shell .fb-err { color: var(--danger); }

/* ---- chrome ------------------------------------------------- */
.nav { background: var(--glass-header); border-bottom: 1px solid var(--line); }
.nav .links a { font-size: 14px; font-weight: 500; color: var(--t-62); }
.nav .links a:hover, .nav .links a[aria-current="page"] { color: var(--t-100); }
.theme-toggle { background: var(--fill-10); border: 0; color: var(--t-62); }
.theme-toggle:hover { background: var(--fill-14); color: var(--t-100); }

.foot { background: var(--glass-footer); -webkit-backdrop-filter: none; backdrop-filter: none; border-top: 1px solid var(--line); }
.foot .links a { color: var(--t-62); }
.foot .legal { color: var(--t-36); }

/* ---- KSKPix product page ---------------------------------- */
/* Feature icons: Material Icons Rounded, filled, text colour — never red. */
.shell .glass-2 .ico { color: var(--t-100); }
.shell .glass-2 .ico svg { width: 24px; height: 24px; fill: currentColor; }
.shell .glass-2 h3 { font-size: 18px; font-weight: 600; letter-spacing: -.02em; }
.shell .glass-2 p { font-size: 15px; color: var(--t-62); }
.shell .dl-body { color: var(--t-62); }
.shell .steps { color: var(--t-62); }
.shell .rows h3 { font-size: 17px; }

/* Lightbox controls: grey circles, no border. */
.shell .lightbox { background: color-mix(in srgb, var(--bg) 88%, transparent); }
.shell .lb-close, .shell .lb-nav { background: var(--fill-10); border: 0; color: var(--t-100); }
.shell .lb-close:hover, .shell .lb-nav:hover { background: var(--fill-14); }

/* Eight feature cards: four across on desktop instead of a 3+3+2 grid with a hole. */
.shell .grid-feature { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

/* ---- language switcher (assets/i18n.js) ------------------------------
   The globe sits just before the theme toggle: a 36 round ghost button
   that opens a menu plate (radius 12, bgRaised, hairline) listing the
   app's languages by their own names, in the app's order. */
.lang-wrap { position: relative; display: inline-flex; flex: none; margin-inline-end: -12px; }
.lang-toggle {
  display: inline-grid; place-items: center;
  width: 34px; height: 34px; padding: 0;
  border: 0; border-radius: 999px;
  background: var(--fill-10); color: var(--t-62);
  cursor: pointer;
  -webkit-appearance: none; appearance: none;
  transition: background .16s ease, color .16s ease;
}
.lang-toggle:hover, .lang-toggle[aria-expanded="true"] { background: var(--fill-14); color: var(--t-100); }
.lang-toggle svg { width: 20px; height: 20px; fill: currentColor; }
.lang-menu {
  position: absolute; top: calc(100% + 10px); inset-inline-end: 0; z-index: 70;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px;
  width: 400px; max-height: min(70vh, 520px); overflow-y: auto;
  padding: 6px;
  background: var(--surface);
  border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 18px 48px rgba(0,0,0,.45);
  overscroll-behavior: contain;
}
.lang-menu[hidden] { display: none; }
[data-theme="light"] .lang-menu { box-shadow: 0 18px 48px rgba(23,21,26,.16); }
.lang-item {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  min-height: 40px; padding: 0 12px;
  border: 0; border-radius: 8px;
  background: transparent; color: var(--t-62);
  font: 500 15px/1.2 var(--sans); letter-spacing: 0;
  text-align: start; cursor: pointer;
}
.lang-item:hover { background: var(--fill-10); color: var(--t-100); }
.lang-item:focus-visible { outline: 2px solid var(--t-100); outline-offset: -2px; }
.lang-item[aria-checked="true"] { color: var(--t-100); font-weight: 600; background: var(--fill-10); }
.lang-item .lang-check { width: 18px; height: 18px; flex: none; fill: currentColor; visibility: hidden; }
.lang-item[aria-checked="true"] .lang-check { visibility: visible; }
@media (max-width: 560px) {
  .lang-menu { grid-template-columns: 1fr; width: min(260px, calc(100vw - 32px)); max-height: min(70vh, 440px); }
}
/* The one-line notice under the h1 of the English-only legal pages. */
.shell .lang-note { margin-top: 14px; font-size: 14px; color: var(--t-62); }

/* ---- non-Latin scripts and right-to-left ---------------------------
   Tracking breaks Arabic joining and Indic conjuncts and does nothing for
   CJK: those languages set every letter-spacing to 0, and the Latin caps
   eyebrow style drops its tracking with them. */
html:is([lang="ar"], [lang="ur"], [lang="hi"], [lang="mr"], [lang="bn"], [lang="ta"], [lang="te"],
  [lang="kn"], [lang="ml"], [lang="ja"], [lang="ko"], [lang="zh-Hans"], [lang="zh-Hant"]) .shell :is(h1, h2, h3, h4, p, span, a, li, button, label, strong, em),
html:is([lang="ar"], [lang="ur"], [lang="hi"], [lang="mr"], [lang="bn"], [lang="ta"], [lang="te"],
  [lang="kn"], [lang="ml"], [lang="ja"], [lang="ko"], [lang="zh-Hans"], [lang="zh-Hant"]) .nav .links a {
  letter-spacing: 0;
}
/* Complex scripts need room for marks above and below the line. */
html:is([lang="ar"], [lang="ur"], [lang="hi"], [lang="mr"], [lang="bn"], [lang="ta"], [lang="te"],
  [lang="kn"], [lang="ml"]) .shell :is(h1, h2, h3) { line-height: 1.3; }
/* The brand lockup stays left-to-right in every language. */
[dir="rtl"] .brand { direction: ltr; }
/* Right-to-left (ar, ur): the page's inline styles use physical sides in a
   few places; mirror them here (the .shell prefix outranks the inline sheet). */
[dir="rtl"] .shell .bleed-r { margin-right: 0; margin-left: calc(-1 * max(var(--pad-x), (100vw - var(--maxw)) / 2 + var(--pad-x))); }
[dir="rtl"] .shell .steps { padding-left: 0; padding-right: 20px; }
[dir="rtl"] .shell .prose :is(ul, ol) { padding-left: 0; padding-right: 22px; }
[dir="rtl"] .shell .fb-hp { left: auto; right: -9999px; }