/* =============================================================================
   app.css — shared design system for xylanpicks
   =============================================================================
   THE METHOD (read me before adding UI):
   Build pages out of these reusable, mobile-first components instead of bespoke
   per-page CSS.  Everything here is responsive by default (phone → tablet →
   desktop) and uses the shared tokens below, so new pages match automatically.

   Tokens (CSS vars) live in :root — use var(--x-*) for colors/spacing/radius so
   one change re-themes the whole app.

   Components (all prefixed `x-` so they never clash with page-local classes):
     .x-container        page wrapper: centers content, fluid gutters, safe max-width
     .x-section          vertical stack with consistent gap
     .x-section-title    small uppercase section heading
     .x-card             standard panel (dark, bordered, rounded, padded)
     .x-grid             auto-responsive grid: 1col phone → fills as it widens
       .x-grid--2 / --3 / --4   cap the max columns
     .x-row-scroll       horizontal scroller for carousels (snaps, hidden bar)
     .x-table-wrap       wrap ANY <table> in this so it scrolls on small screens
     .x-tabs / .x-tab    scrollable tab bar (.is-active for the current tab)
     .x-badge            tiny status/verdict chip; modifiers: --pos --neg --warn
                         --dim --accent  (or set --x-badge-bg inline)
     .x-pill             stat pill (mono, rounded)
     .x-btn              button; modifiers: --primary --ghost --warn --sm
     .x-stat             label-over-value tile (use inside .x-grid for stat rows)

   Rules of thumb:
     • Never set fixed px widths on layout containers — let flex/grid + max-width
       handle it.  Fixed px is fine for icons/avatars only.
     • Any table → wrap in .x-table-wrap.
     • Any horizontal list of cards → .x-row-scroll (don't let it widen the page).
     • Tap targets ≥ 40px (.x-btn and .x-tab already satisfy this).
   ========================================================================== */

:root {
  --x-bg:        #000000;
  --x-surface:   #0a0a0a;   /* cards / panels */
  --x-surface-2: #141414;   /* insets, hover */
  --x-border:    rgba(255, 255, 255, 0.12);
  --x-text:      #ffffff;
  --x-text-dim:  #9ca3af;
  --x-text-dim2: #6b7280;
  --x-accent:    #7C3AED;   /* primary (purple) */
  --x-accent-2:  #00E5FF;   /* secondary (cyan) — links/active */
  --x-pos:       #22c55e;
  --x-neg:       #ef4444;
  --x-warn:      #eab308;

  --x-radius:    12px;
  --x-radius-sm: 8px;
  --x-gap:       14px;
  --x-pad:       14px;

  /* Fluid page gutter: smaller on phones, roomier on desktop. */
  --x-gutter: clamp(12px, 4vw, 24px);
}

/* ── Layout ───────────────────────────────────────────────────────────────── */
.x-container {
  width: 100%;
  max-width: 1024px;
  margin-inline: auto;
  padding-inline: var(--x-gutter);
  /* Respect iPhone notch / rounded corners (viewport-fit=cover is set). */
  padding-left:  max(var(--x-gutter), env(safe-area-inset-left));
  padding-right: max(var(--x-gutter), env(safe-area-inset-right));
}
.x-container--narrow { max-width: 768px; }
.x-container--wide   { max-width: 1280px; }

.x-section { display: flex; flex-direction: column; gap: var(--x-gap); }

.x-section-title {
  font-size: 11px; font-weight: 800; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--x-text-dim2);
}

/* ── Card ─────────────────────────────────────────────────────────────────── */
.x-card {
  background: var(--x-surface);
  border: 1px solid var(--x-border);
  border-radius: var(--x-radius);
  padding: var(--x-pad);
  display: flex; flex-direction: column; gap: 10px;
}
.x-card--flush { padding: 0; overflow: hidden; }

/* ── Responsive grid ──────────────────────────────────────────────────────── */
/* Default: as many ~150px columns as fit; 1 column on the narrowest phones. */
.x-grid {
  display: grid;
  gap: var(--x-gap);
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.x-grid--2 { grid-template-columns: repeat(2, 1fr); }
.x-grid--3 { grid-template-columns: 1fr; }
.x-grid--4 { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 640px) {
  .x-grid--3 { grid-template-columns: repeat(3, 1fr); }
  .x-grid--4 { grid-template-columns: repeat(4, 1fr); }
}

/* ── Horizontal scroller (carousels / pick rows) ──────────────────────────── */
.x-row-scroll {
  display: flex; gap: var(--x-gap);
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;            /* Firefox */
  padding-bottom: 2px;
}
.x-row-scroll::-webkit-scrollbar { display: none; }   /* WebKit */
.x-row-scroll > * { scroll-snap-align: start; flex: 0 0 auto; }

/* ── Tables: always scroll horizontally on small screens ──────────────────── */
.x-table-wrap {
  width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch;
  border-radius: var(--x-radius);
}
.x-table-wrap table { width: 100%; border-collapse: collapse; }

/* ── Tabs (scrollable on phones) ──────────────────────────────────────────── */
.x-tabs {
  display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none;
  border-bottom: 1px solid var(--x-border);
}
.x-tabs::-webkit-scrollbar { display: none; }
.x-tab {
  flex: 0 0 auto; background: transparent; border: 0; cursor: pointer;
  color: var(--x-text-dim); font-size: 13px; font-weight: 700;
  padding: 10px 12px; min-height: 40px;          /* tap target */
  border-bottom: 2px solid transparent; white-space: nowrap;
}
.x-tab.is-active { color: var(--x-accent-2); border-bottom-color: var(--x-accent-2); }

/* ── Badge ────────────────────────────────────────────────────────────────── */
.x-badge {
  display: inline-flex; align-items: center;
  font-size: 9.5px; font-weight: 800; letter-spacing: 0.04em;
  text-transform: uppercase; padding: 2px 8px; border-radius: 999px;
  color: #000; background: var(--x-badge-bg, var(--x-text-dim2));
}
.x-badge--pos    { --x-badge-bg: var(--x-pos); }
.x-badge--neg    { --x-badge-bg: var(--x-neg); }
.x-badge--warn   { --x-badge-bg: var(--x-warn); }
.x-badge--dim    { --x-badge-bg: var(--x-text-dim2); }
.x-badge--accent { --x-badge-bg: var(--x-accent); color: #fff; }

/* ── Pill (stat chip) ─────────────────────────────────────────────────────── */
.x-pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: ui-monospace, monospace; font-size: 11.5px; font-weight: 800;
  padding: 4px 10px; border-radius: 999px;
  border: 1px solid var(--x-border); color: var(--x-text-dim);
}

/* ── Buttons ──────────────────────────────────────────────────────────────── */
.x-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 40px; padding: 8px 16px; border: 1px solid var(--x-border);
  border-radius: var(--x-radius-sm); background: var(--x-surface-2);
  color: var(--x-text); font-size: 13px; font-weight: 700; cursor: pointer;
  transition: background .15s ease, opacity .15s ease;
}
.x-btn:hover:not(:disabled) { background: #1d1d1d; }
.x-btn:disabled { opacity: .6; cursor: default; }
.x-btn--primary { background: var(--x-accent-2); color: #000; border-color: transparent; }
.x-btn--primary:hover:not(:disabled) { background: #33ebff; }
.x-btn--warn    { background: var(--x-warn); color: #000; border-color: transparent; }
.x-btn--ghost   { background: transparent; }
.x-btn--sm      { min-height: 32px; padding: 5px 12px; font-size: 12px; }

/* ── Stat tile (label over value) ─────────────────────────────────────────── */
.x-stat { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.x-stat__label {
  font-size: 10px; font-weight: 800; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--x-text-dim2); line-height: 1.2;
}
.x-stat__value {
  font-family: ui-monospace, monospace; font-size: 18px; font-weight: 800;
  color: var(--x-text);
}

/* ── Color helpers ────────────────────────────────────────────────────────── */
.x-pos { color: var(--x-pos); } .x-neg { color: var(--x-neg); }
.x-warn { color: var(--x-warn); } .x-dim { color: var(--x-text-dim); }
.x-accent { color: var(--x-accent-2); }