/* =========================================================
   SPHINKS · Components
   Requires tokens.css. All classes are prefixed `sx-`.
   ========================================================= */

/* ---------- Base ---------- */
body {
  margin: 0;
  background: var(--sx-paper);
  color: var(--sx-ink);
  font-family: var(--sx-font-sans);
  font-size: var(--sx-fs-body);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-underline-offset: 4px; }
a:hover { opacity: .72; }
.sx-mono { font-family: var(--sx-font-mono); }
.sx-muted { color: var(--sx-muted); }
.sx-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;
}

/* ---------- Header ---------- */
.sx-header {
  max-width: var(--sx-max-width);
  margin: 0 auto;
  padding: 20px var(--sx-gutter) 14px;
  box-sizing: border-box;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 16px 32px;
}
.sx-brand { display: flex; align-items: center; gap: 14px; text-decoration: none; }
.sx-brand__logo { width: 60px; height: 60px; border-radius: 50%; background: #fff; display: block; }
.sx-brand__text { display: flex; flex-direction: column; gap: 2px; }
.sx-brand__name { font-size: 22px; font-weight: 700; letter-spacing: var(--sx-tracking-wordmark); }
.sx-brand__meta { font-family: var(--sx-font-mono); font-size: 12px; color: var(--sx-muted); }

/* ---------- Navigation ---------- */
.sx-nav { display: flex; flex-wrap: wrap; gap: 4px; }
.sx-nav__link {
  display: inline-flex; align-items: center;
  min-height: var(--sx-touch); padding: 0 16px;
  border-radius: var(--sx-radius-pill);
  font-size: 16px; font-weight: 500; text-decoration: none;
}
.sx-nav__link.is-active,
.sx-nav__link[aria-current="page"] {
  background: var(--sx-ink); color: var(--sx-on-ink); font-weight: 600; padding: 0 18px;
}
.sx-nav__link.is-active:hover,
.sx-nav__link[aria-current="page"]:hover { opacity: 1; }

/* ---------- Drip band (signature element) ---------- */
.sx-drips { color: var(--sx-ink); line-height: 0; }
.sx-drips svg { display: block; width: 100%; height: 42px; }

/* ---------- Page layout ---------- */
.sx-main {
  max-width: var(--sx-max-width);
  margin: 0 auto;
  padding: 36px var(--sx-gutter) 64px;
  box-sizing: border-box;
  display: flex; flex-direction: column; gap: 32px;
}
.sx-grid-kpi { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--sx-gap); }
.sx-grid-2   { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 480px), 1fr)); gap: var(--sx-gap); }

/* ---------- Page hero ---------- */
.sx-hero { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px; }
.sx-hero__text { display: flex; flex-direction: column; gap: 10px; max-width: 640px; }
.sx-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.sx-h1-wrap { position: relative; align-self: flex-start; }
.sx-h1 { margin: 0; font-size: var(--sx-fs-h1); line-height: .95; font-weight: 800; letter-spacing: -0.02em; }
.sx-lead { margin: 6px 0 0; font-size: var(--sx-fs-lead); line-height: 1.5; color: var(--sx-muted); }
/* Paint splatter next to H1 — decorative, aria-hidden */
.sx-splat { position: absolute; border-radius: 50%; }
.sx-splat--1 { right: -30px; top: 2px;  width: 12px; height: 12px; background: var(--sx-ruby); }
.sx-splat--2 { right: -46px; top: 26px; width: 7px;  height: 7px;  background: var(--sx-sapphire); }
.sx-splat--3 { right: -22px; top: 44px; width: 9px;  height: 9px;  background: var(--sx-amber); }
.sx-splat--4 { right: -54px; top: 58px; width: 5px;  height: 5px;  background: var(--sx-emerald); }

/* ---------- Eyebrow labels:  · ÜBERSICHT ·  ---------- */
.sx-eyebrow {
  font-size: var(--sx-fs-eyebrow); font-weight: 600;
  letter-spacing: var(--sx-tracking-eyebrow); text-transform: uppercase;
  color: var(--sx-muted);
}
.sx-eyebrow--page { font-size: 13px; letter-spacing: 0.32em; }

/* ---------- Card ---------- */
.sx-card {
  background: var(--sx-card);
  border: var(--sx-border) solid var(--sx-edge);
  border-radius: var(--sx-radius-card);
  box-shadow: var(--sx-offset) var(--sx-offset) 0 var(--sx-shadow);
  padding: 24px;
  display: flex; flex-direction: column; gap: 16px;
  min-width: 0;
}
.sx-card--kpi { padding: 22px 24px; gap: 14px; }
.sx-card__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.sx-card__title-group { display: flex; flex-direction: column; gap: 4px; }
.sx-card__title { margin: 0; font-size: var(--sx-fs-h2); font-weight: 700; }
.sx-card__link { font-size: 15px; font-weight: 600; }
.sx-card__foot { font-family: var(--sx-font-mono); font-size: 12px; color: var(--sx-muted); }

/* ---------- KPI ---------- */
.sx-kpi__value { font-size: var(--sx-fs-kpi); font-weight: 800; line-height: 1; }
.sx-kpi__meta  { font-family: var(--sx-font-mono); font-size: var(--sx-fs-small); color: var(--sx-muted); }
.sx-ring__track { fill: none; stroke: var(--sx-soft); stroke-width: 10; }
.sx-ring__value { fill: none; stroke: var(--sx-emerald); stroke-width: 10; stroke-linecap: round; }
.sx-spark { display: flex; align-items: flex-end; gap: 6px; height: 56px; }
.sx-spark__bar { width: 12px; border-radius: 4px; background: var(--sx-ink); }
.sx-spark__bar--current { background: var(--sx-amber); border: var(--sx-border) solid var(--sx-edge); box-sizing: border-box; }

/* ---------- Buttons ---------- */
.sx-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 22px;
  border: var(--sx-border) solid var(--sx-edge); border-radius: var(--sx-radius-pill);
  font-family: inherit; font-size: 16px; font-weight: 600; cursor: pointer;
  text-decoration: none;
  transition: transform .08s ease, box-shadow .08s ease;
}
.sx-btn--primary {
  background: var(--sx-primary); color: var(--sx-text-on-color); font-weight: 700;
  box-shadow: var(--sx-offset-btn) var(--sx-offset-btn) 0 var(--sx-shadow);
}
.sx-btn--primary:hover  { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--sx-shadow); opacity: 1; }
.sx-btn--primary:active { transform: translate(var(--sx-offset-btn), var(--sx-offset-btn)); box-shadow: 0 0 0 var(--sx-shadow); }
.sx-btn--secondary { background: var(--sx-card); color: var(--sx-ink); }
.sx-btn--ink { background: var(--sx-ink); color: var(--sx-on-ink); border-color: var(--sx-ink); min-height: 36px; padding: 0 14px; font-size: 13px; }
.sx-btn:focus-visible, .sx-nav__link:focus-visible, .sx-seg__btn:focus-visible {
  outline: 3px solid var(--sx-sapphire); outline-offset: 2px;
}

/* ---------- Segmented control ---------- */
.sx-seg { display: flex; gap: 2px; padding: 3px; border: var(--sx-border) solid var(--sx-edge); border-radius: var(--sx-radius-pill); background: var(--sx-card); }
.sx-seg__btn {
  min-height: 40px; padding: 0 16px; border: 0; border-radius: var(--sx-radius-pill);
  background: transparent; color: var(--sx-ink);
  font-family: inherit; font-size: 15px; font-weight: 500; cursor: pointer;
}
.sx-seg__btn[aria-pressed="true"] { background: var(--sx-ink); color: var(--sx-on-ink); font-weight: 600; }

/* ---------- Chips ---------- */
.sx-chip {
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: var(--sx-radius-pill);
  font-size: var(--sx-fs-small); font-weight: 600;
}
.sx-chip--soft    { background: var(--sx-soft); font-family: var(--sx-font-mono); font-weight: 500; }
.sx-chip--ink     { background: var(--sx-ink); color: var(--sx-on-ink); font-family: var(--sx-font-mono); font-weight: 500; }
.sx-chip--outline { border: var(--sx-border) solid var(--sx-edge); }
.sx-chip--success { background: var(--sx-emerald); color: var(--sx-text-on-color); border: var(--sx-border) solid var(--sx-edge); }

/* ---------- Ink pips (deck colors) ---------- */
.sx-pips { display: inline-flex; }
.sx-pip {
  width: 14px; height: 14px; border-radius: 50%;
  border: var(--sx-border) solid var(--sx-edge); box-sizing: border-box;
  flex-shrink: 0;
}
.sx-pips .sx-pip + .sx-pip { margin-left: -4px; }
.sx-pip--sm { width: 12px; height: 12px; border-width: 1.5px; }
.sx-pip--lg { width: 40px; height: 40px; }
.sx-pips .sx-pip--lg + .sx-pip--lg { margin-left: -12px; }
.ink-amber    { background: var(--sx-amber); }
.ink-amethyst { background: var(--sx-amethyst); }
.ink-emerald  { background: var(--sx-emerald); }
.ink-ruby     { background: var(--sx-ruby); }
.ink-sapphire { background: var(--sx-sapphire); }
.ink-steel    { background: var(--sx-steel); }

/* ---------- Win / Loss badge (filled vs. outlined — never color alone) ---------- */
.sx-result {
  width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
  border: var(--sx-border) solid var(--sx-edge); box-sizing: border-box;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 15px;
}
.sx-result--win  { background: var(--sx-win); color: var(--sx-text-on-color); }
.sx-result--loss { background: var(--sx-card); color: var(--sx-ink); }

/* ---------- Outlined bar (matchups) ---------- */
.sx-matchups { display: flex; flex-direction: column; gap: 14px; }
.sx-matchup { display: grid; grid-template-columns: 116px minmax(0, 1fr) 52px 40px; align-items: center; gap: 12px; }
.sx-matchup__label { display: flex; align-items: center; gap: 8px; font-weight: 500; }
.sx-matchup__pct { font-family: var(--sx-font-mono); font-size: 14px; font-weight: 600; text-align: right; }
.sx-matchup__n   { font-family: var(--sx-font-mono); font-size: 13px; color: var(--sx-muted); text-align: right; }
.sx-bar { height: 16px; border: var(--sx-border) solid var(--sx-edge); border-radius: var(--sx-radius-pill); overflow: hidden; background: var(--sx-soft); }
.sx-bar__fill { display: block; height: 100%; } /* set width inline + .ink-* class */

/* ---------- List rows ---------- */
.sx-list { display: flex; flex-direction: column; }
.sx-row { display: grid; align-items: center; gap: 14px; padding: 10px 0; border-top: var(--sx-border) solid var(--sx-soft); }
.sx-row--duel  { grid-template-columns: 36px minmax(0, 1fr) auto; }
.sx-row--price { grid-template-columns: minmax(0, 1fr) auto auto; }
.sx-row--event { display: flex; gap: 16px; padding: 16px 0; }
.sx-list > .sx-row:first-child.sx-row--event { padding-top: 0; border-top: 0; }
.sx-row__main { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex-grow: 1; }
.sx-row__title { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 600; }
.sx-row__sub { font-family: var(--sx-font-mono); font-size: 13px; color: var(--sx-muted); }
.sx-row__end { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.sx-row__score { font-family: var(--sx-font-mono); font-size: 16px; font-weight: 600; }
.sx-row__time  { font-family: var(--sx-font-mono); font-size: 12px; color: var(--sx-muted); }

/* ---------- Date box (calendar) ---------- */
.sx-datebox {
  width: 60px; height: 64px; flex-shrink: 0;
  border: var(--sx-border) solid var(--sx-edge); border-radius: var(--sx-radius-box);
  overflow: hidden; display: flex; flex-direction: column; text-align: center;
}
.sx-datebox__month { font-size: 11px; font-weight: 700; letter-spacing: .16em; padding: 3px 0; background: var(--sx-ruby); color: var(--sx-text-on-color); }
.sx-datebox__month--sapphire { background: var(--sx-sapphire); color: var(--sx-text-on-dark-color); }
.sx-datebox__month--amethyst { background: var(--sx-amethyst); color: var(--sx-text-on-dark-color); }
.sx-datebox__day { flex-grow: 1; display: flex; align-items: center; justify-content: center; font-size: 24px; font-weight: 800; }
.sx-datebox--lg { width: 64px; height: 68px; }
.sx-datebox--lg .sx-datebox__day { font-size: 28px; }

/* ---------- Price delta (arrow shape carries meaning, not only color) ---------- */
.sx-delta {
  display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-width: 76px;
  padding: 3px 8px; border-radius: var(--sx-radius-pill); border: var(--sx-border) solid var(--sx-edge);
  font-family: var(--sx-font-mono); font-size: 12px; font-weight: 600;
}
.sx-delta--up   { background: var(--sx-emerald); color: var(--sx-text-on-color); }
.sx-delta--down { background: var(--sx-card); color: var(--sx-ink); }
.sx-delta--down svg { fill: var(--sx-ruby); }

/* ---------- Footer ---------- */
.sx-footer { border-top: var(--sx-border) solid var(--sx-edge); }
.sx-footer__inner {
  max-width: var(--sx-max-width); margin: 0 auto; padding: 24px var(--sx-gutter) 32px; box-sizing: border-box;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px;
}
.sx-footer__mark { font-size: 14px; font-weight: 600; letter-spacing: var(--sx-tracking-wordmark); }

/* ---------- Small screens ---------- */
@media (max-width: 560px) {
  :root { --sx-gutter: 16px; }
  .sx-matchup { grid-template-columns: 96px minmax(0, 1fr) 48px; }
  .sx-matchup__n { display: none; }
}