/* =============================================================================
   SniperMachine — Shared Flat Design System
   Built ONCE in the DesignSystem phase. READ-ONLY afterwards. Do NOT edit.
   Flat Google-clean spec (authoritative, from final.red):
     white bg + #f8f9fa alternating sections, ink #202124 / #5f6368,
     ONE accent for CTAs, NO shadows, NO gradients, NO border lines,
     bigger fonts (body 16, floor 13), radius 4px, square-ish, no pills.
   Mobile-first. Breakpoints 360 / 768 / 1024 / 1280.

   HOW TO IMPORT (each owning phase adds this to the surface <head>):
     <link rel="stylesheet" href="/design-system.css">
   Load it BEFORE any page-specific <style> so page rules can override tokens
   only where genuinely needed. Page code consumes the tokens + utilities below.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   1. DESIGN TOKENS (CSS custom properties)
   Consume via var(--token). Never hardcode a color/size that has a token.
   --------------------------------------------------------------------------- */
:root {
  /* Surfaces — the ONLY two section backgrounds. Alternate them, never borders. */
  --ds-bg:        #ffffff;   /* default section / page background            */
  --ds-bg-alt:    #f8f9fa;   /* alternating section shade (the ONLY divider) */
  --ds-bg-sunken: #f1f3f4;   /* rare deeper shade for code/inset wells        */

  /* Ink (text) */
  --ds-ink:       #202124;   /* primary text (near-black)      */
  --ds-ink-2:     #5f6368;   /* secondary text (Google gray)   */
  --ds-ink-3:     #80868b;   /* tertiary / disabled labels     */

  /* Accent — CTAs ONLY. Do not tint cards/sections with it. */
  --ds-accent:        #1a73e8;
  --ds-accent-hover:  #1765cc;
  --ds-accent-ink:    #ffffff;  /* text on accent fill */

  /* Semantic (numbers/text only, never as a background fill) */
  --ds-pos:  #188038;  /* gains / up / win  */
  --ds-neg:  #d93025;  /* loss / down       */
  --ds-warn: #b06000;  /* caution           */

  /* Hairline — used ONLY where a functional control needs a visible edge
     (form input, dropdown, accordion row). NOT for separating sections. */
  --ds-line: #dadce0;

  /* Radius — square-ish. Never pills, never >6px on content. */
  --ds-radius:    4px;
  --ds-radius-sm: 2px;
  --ds-radius-pill: 4px; /* alias so legacy "pill" refs still land at 4px */

  /* Type family */
  --ds-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
             Helvetica, Arial, sans-serif;
  --ds-font-mono: 'SF Mono', 'Fira Code', ui-monospace, 'Courier New', monospace;

  /* Type scale — REAL bigger scale. Floor is 13px, nothing smaller. */
  --ds-fs-micro:   13px;  /* absolute floor: timestamps, fine print          */
  --ds-fs-small:   14px;  /* labels, meta, table cells                       */
  --ds-fs-body:    16px;  /* default body copy                               */
  --ds-fs-body-lg: 18px;  /* lead paragraph / emphasized body                */
  --ds-fs-h4:      20px;  /* panel / card title                              */
  --ds-fs-h3:      24px;  /* sub-section heading                             */
  --ds-fs-h2:      32px;  /* section heading                                 */
  --ds-fs-h1:      40px;  /* page heading                                    */
  --ds-fs-hero:    clamp(40px, 6vw, 56px); /* hero                            */

  /* Line-height — always >=1.5 for text */
  --ds-lh:       1.55;
  --ds-lh-tight: 1.25;  /* headings only */

  /* Font weights */
  --ds-fw-normal: 400;
  --ds-fw-medium: 500;
  --ds-fw-semi:   600;
  --ds-fw-bold:   700;

  /* Spacing scale (4px base) */
  --ds-sp-1: 4px;
  --ds-sp-2: 8px;
  --ds-sp-3: 12px;
  --ds-sp-4: 16px;
  --ds-sp-5: 24px;
  --ds-sp-6: 32px;
  --ds-sp-7: 48px;
  --ds-sp-8: 64px;
  --ds-sp-9: 96px;

  /* Layout */
  --ds-container: 1200px;   /* max content width */
  --ds-gutter:    16px;     /* page side padding on mobile */
}

/* -----------------------------------------------------------------------------
   2. FLAT-ONLY RESET (opt-in via .ds-scope on <body> or a wrapper, or use the
      utilities directly). Kept minimal so it never clashes with legacy pages.
   --------------------------------------------------------------------------- */
.ds-reset *, .ds-reset *::before, .ds-reset *::after { box-sizing: border-box; }

/* Kill effects the flat spec bans, scoped to anything tagged .ds-flat.
   Apply .ds-flat to a wrapper to guarantee no shadow/gradient/round leaks in. */
.ds-flat, .ds-flat * {
  box-shadow: none !important;
  text-shadow: none !important;
}
.ds-flat [style*="gradient"] { background-image: none !important; }

/* -----------------------------------------------------------------------------
   3. TYPOGRAPHY UTILITIES
   --------------------------------------------------------------------------- */
.ds-body   { font-family: var(--ds-font); font-size: var(--ds-fs-body);
             line-height: var(--ds-lh); color: var(--ds-ink);
             font-weight: var(--ds-fw-normal); }
.ds-lead   { font-size: var(--ds-fs-body-lg); line-height: var(--ds-lh);
             color: var(--ds-ink-2); }
.ds-small  { font-size: var(--ds-fs-small); line-height: var(--ds-lh);
             color: var(--ds-ink-2); }
.ds-micro  { font-size: var(--ds-fs-micro); line-height: var(--ds-lh);
             color: var(--ds-ink-3); }

.ds-h1 { font-size: var(--ds-fs-h1);   font-weight: var(--ds-fw-bold);
         line-height: var(--ds-lh-tight); color: var(--ds-ink);
         letter-spacing: -.01em; }
.ds-h2 { font-size: var(--ds-fs-h2);   font-weight: var(--ds-fw-bold);
         line-height: var(--ds-lh-tight); color: var(--ds-ink);
         letter-spacing: -.01em; }
.ds-h3 { font-size: var(--ds-fs-h3);   font-weight: var(--ds-fw-semi);
         line-height: var(--ds-lh-tight); color: var(--ds-ink); }
.ds-h4 { font-size: var(--ds-fs-h4);   font-weight: var(--ds-fw-semi);
         line-height: var(--ds-lh-tight); color: var(--ds-ink); }
.ds-hero { font-size: var(--ds-fs-hero); font-weight: var(--ds-fw-bold);
           line-height: 1.1; color: var(--ds-ink); letter-spacing: -.02em; }

/* Ink helpers */
.ds-ink   { color: var(--ds-ink); }
.ds-ink-2 { color: var(--ds-ink-2); }
.ds-ink-3 { color: var(--ds-ink-3); }
.ds-pos   { color: var(--ds-pos); }
.ds-neg   { color: var(--ds-neg); }
.ds-warn  { color: var(--ds-warn); }

/* Numeric / tabular figures for stat readouts (keeps digits aligned) */
.ds-num { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; }

/* -----------------------------------------------------------------------------
   4. LAYOUT: SECTIONS (the ONLY separator is a bg-shade change, never a border)
   --------------------------------------------------------------------------- */
.ds-section {
  background: var(--ds-bg);
  padding: var(--ds-sp-8) var(--ds-gutter);
  border: 0;
}
.ds-section--alt { background: var(--ds-bg-alt); }
.ds-section--sunken { background: var(--ds-bg-sunken); }

/* Centered inner column */
.ds-container {
  width: 100%;
  max-width: var(--ds-container);
  margin-inline: auto;
}
.ds-container--narrow { max-width: 760px; }

/* Simple responsive grid helpers (auto-fit, no media queries needed) */
.ds-grid { display: grid; gap: var(--ds-sp-4); }
.ds-grid--2 { grid-template-columns: 1fr; }
.ds-grid--3 { grid-template-columns: 1fr; }
.ds-grid--4 { grid-template-columns: 1fr; }
.ds-grid--auto {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.ds-stack > * + * { margin-top: var(--ds-sp-4); }

/* -----------------------------------------------------------------------------
   5. CARD — flat. NO shadow, NO border line. Sits on bg via a shade contrast.
      Put a .ds-card (white) on a --alt section, or a shaded card on white.
   --------------------------------------------------------------------------- */
.ds-card {
  background: var(--ds-bg);
  border: 0;
  box-shadow: none;
  border-radius: var(--ds-radius);
  padding: var(--ds-sp-5);
}
/* On a white section, use the alt-fill card so it reads without a border. */
.ds-card--alt { background: var(--ds-bg-alt); }
.ds-card--tight { padding: var(--ds-sp-4); }
.ds-card__title { font-size: var(--ds-fs-h4); font-weight: var(--ds-fw-semi);
                  color: var(--ds-ink); margin-bottom: var(--ds-sp-3); }

/* -----------------------------------------------------------------------------
   6. BUTTONS — accent fill for the one primary CTA; flat text/outline for rest.
      NO gradient, NO shadow, radius 4px, never a pill.
   --------------------------------------------------------------------------- */
.ds-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--ds-sp-2);
  font-family: var(--ds-font);
  font-size: var(--ds-fs-body);
  font-weight: var(--ds-fw-semi);
  line-height: 1;
  padding: 12px 20px;
  border-radius: var(--ds-radius);
  border: 0;
  cursor: pointer;
  text-decoration: none;
  transition: background-color .15s ease, color .15s ease;
  background: transparent;
  color: var(--ds-ink);
}
.ds-btn--primary { background: var(--ds-accent); color: var(--ds-accent-ink); }
.ds-btn--primary:hover { background: var(--ds-accent-hover); }
.ds-btn--secondary { background: var(--ds-bg-alt); color: var(--ds-ink); }
.ds-btn--secondary:hover { background: #eceef0; }
.ds-btn--ghost { background: transparent; color: var(--ds-accent); }
.ds-btn--ghost:hover { background: rgba(26,115,232,.08); }
.ds-btn--sm { padding: 8px 14px; font-size: var(--ds-fs-small); }
.ds-btn--lg { padding: 15px 28px; font-size: var(--ds-fs-body-lg); }
.ds-btn[disabled], .ds-btn:disabled { opacity: .5; cursor: not-allowed; }

/* Plain text link */
.ds-link { color: var(--ds-accent); text-decoration: none; font-weight: var(--ds-fw-medium); }
.ds-link:hover { text-decoration: underline; }

/* -----------------------------------------------------------------------------
   7. FORM CONTROLS — a functional hairline is allowed here (input/select edge)
   --------------------------------------------------------------------------- */
.ds-input, .ds-textarea {
  width: 100%;
  font-family: var(--ds-font);
  font-size: var(--ds-fs-body);
  color: var(--ds-ink);
  background: var(--ds-bg);
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius);
  padding: 11px 14px;
  outline: none;
  transition: border-color .15s ease;
}
.ds-input:focus, .ds-textarea:focus { border-color: var(--ds-accent); }
.ds-input::placeholder { color: var(--ds-ink-3); }
.ds-label { display: block; font-size: var(--ds-fs-small);
            font-weight: var(--ds-fw-medium); color: var(--ds-ink-2);
            margin-bottom: var(--ds-sp-2); }

/* -----------------------------------------------------------------------------
   8. CUSTOM DROPDOWN (no native <select>)
      Markup:
        <div class="ds-dropdown" data-ds-dropdown>
          <button class="ds-dropdown__trigger" type="button" aria-haspopup="listbox" aria-expanded="false">
            <span class="ds-dropdown__value">Choose</span>
            <svg class="ds-dropdown__chevron" ...>   (use icon #ds-i-chevron)
          </button>
          <ul class="ds-dropdown__menu" role="listbox">
            <li class="ds-dropdown__opt" role="option" data-value="a">Option A</li>
          </ul>
        </div>
      Behavior wiring is done by the owning page (add .ds-dropdown--open on the
      root to reveal the menu; set aria-expanded). CSS-only fallback via :focus-within.
   --------------------------------------------------------------------------- */
.ds-dropdown { position: relative; display: inline-block; min-width: 180px; }
.ds-dropdown__trigger {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--ds-sp-3);
  font-family: var(--ds-font); font-size: var(--ds-fs-body);
  color: var(--ds-ink); background: var(--ds-bg);
  border: 1px solid var(--ds-line); border-radius: var(--ds-radius);
  padding: 10px 14px; cursor: pointer; text-align: start;
}
.ds-dropdown__trigger:hover { border-color: var(--ds-ink-3); }
.ds-dropdown__chevron { width: 18px; height: 18px; flex-shrink: 0;
                        color: var(--ds-ink-2); transition: transform .15s ease; }
.ds-dropdown--open .ds-dropdown__chevron,
.ds-dropdown__trigger[aria-expanded="true"] .ds-dropdown__chevron { transform: rotate(180deg); }
.ds-dropdown__menu {
  position: absolute; z-index: 50; top: calc(100% + 4px); left: 0; right: 0;
  margin: 0; padding: var(--ds-sp-1); list-style: none;
  background: var(--ds-bg); border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius); max-height: 280px; overflow-y: auto;
  display: none;
}
.ds-dropdown--open > .ds-dropdown__menu,
.ds-dropdown:focus-within > .ds-dropdown__menu { display: block; }
.ds-dropdown__opt {
  font-size: var(--ds-fs-body); color: var(--ds-ink);
  padding: 10px 12px; border-radius: var(--ds-radius-sm); cursor: pointer;
}
.ds-dropdown__opt:hover, .ds-dropdown__opt[aria-selected="true"] { background: var(--ds-bg-alt); }

/* -----------------------------------------------------------------------------
   9. ACCORDION (for dense / secondary data instead of walls of cards)
      Markup:
        <div class="ds-accordion" data-ds-accordion>
          <div class="ds-accordion__item">
            <button class="ds-accordion__head" type="button" aria-expanded="false">
              <span>Section title</span>
              <svg class="ds-accordion__chevron" ...>  (icon #ds-i-chevron)
            </button>
            <div class="ds-accordion__panel" role="region"> ...content... </div>
          </div>
        </div>
      Toggle by adding .ds-accordion__item--open on the item (and aria-expanded
      on the head). Panel uses grid-rows animation, no JS height math needed.
      The row separator here is an allowed functional hairline (interactive list).
   --------------------------------------------------------------------------- */
.ds-accordion { display: block; }
.ds-accordion__item + .ds-accordion__item { border-top: 1px solid var(--ds-line); }
.ds-accordion__head {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  gap: var(--ds-sp-3);
  font-family: var(--ds-font); font-size: var(--ds-fs-body-lg);
  font-weight: var(--ds-fw-semi); color: var(--ds-ink);
  background: transparent; border: 0; cursor: pointer;
  padding: var(--ds-sp-4) 0; text-align: start;
}
.ds-accordion__chevron { width: 20px; height: 20px; flex-shrink: 0;
                         color: var(--ds-ink-2); transition: transform .18s ease; }
.ds-accordion__item--open .ds-accordion__chevron,
.ds-accordion__head[aria-expanded="true"] .ds-accordion__chevron { transform: rotate(180deg); }
.ds-accordion__panel {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows .2s ease;
  color: var(--ds-ink-2); font-size: var(--ds-fs-body); line-height: var(--ds-lh);
}
.ds-accordion__panel > * { overflow: hidden; }
.ds-accordion__item--open .ds-accordion__panel,
.ds-accordion__head[aria-expanded="true"] + .ds-accordion__panel { grid-template-rows: 1fr; }
.ds-accordion__item--open .ds-accordion__panel > *,
.ds-accordion__head[aria-expanded="true"] + .ds-accordion__panel > * { padding-bottom: var(--ds-sp-4); }

/* -----------------------------------------------------------------------------
   10. FLAT ICON — icons sit directly on the page. NO background fills, NO
       colored circle/pill behind them. Stroke inherits currentColor.
       Usage: <svg class="ds-icon"><use href="/icons-flat.svg#ds-i-signal"/></svg>
   --------------------------------------------------------------------------- */
.ds-icon {
  width: 20px; height: 20px;
  display: inline-block; vertical-align: middle;
  color: var(--ds-ink-2);        /* stroke color via currentColor */
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
  background: none !important;   /* enforce: no bg color ever behind an icon */
  border-radius: 0;
}
.ds-icon--sm { width: 16px; height: 16px; }
.ds-icon--lg { width: 28px; height: 28px; }
.ds-icon--accent { color: var(--ds-accent); }
.ds-icon--pos { color: var(--ds-pos); }
.ds-icon--neg { color: var(--ds-neg); }

/* Numbered step marker — flat numeral, NO filled disc (replaces colored circles) */
.ds-step-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: auto; min-width: 1.6em;
  font-size: var(--ds-fs-h2); font-weight: var(--ds-fw-bold);
  color: var(--ds-accent); background: none; border: 0; border-radius: 0;
  line-height: 1;
}

/* -----------------------------------------------------------------------------
   11. STATUS TEXT (replaces colored-fill pills). Flat colored text, no bg.
   --------------------------------------------------------------------------- */
.ds-status { font-size: var(--ds-fs-small); font-weight: var(--ds-fw-semi);
             letter-spacing: .02em; background: none; padding: 0; border: 0; }
.ds-status--pos  { color: var(--ds-pos); }
.ds-status--neg  { color: var(--ds-neg); }
.ds-status--warn { color: var(--ds-warn); }
.ds-status--info { color: var(--ds-accent); }
.ds-status--mute { color: var(--ds-ink-3); }

/* Live pulse dot — legitimate functional real-time indicator (kept, small) */
.ds-pulse { width: 8px; height: 8px; border-radius: 50%;
            background: var(--ds-pos); display: inline-block;
            animation: ds-pulse 2s infinite; flex-shrink: 0; }
@keyframes ds-pulse { 0%,100% { opacity: 1 } 50% { opacity: .3 } }

/* -----------------------------------------------------------------------------
   12. SPARKLINE / MINI-CHART helpers (custom SVG, NO background fill)
       See /icons-flat.svg for reusable templates (#ds-spark-line, #ds-spark-bars).
       These classes style inline SVGs the pages generate from real data.
   --------------------------------------------------------------------------- */
.ds-spark { display: inline-block; vertical-align: middle;
            width: 88px; height: 24px; overflow: visible; }
.ds-spark path, .ds-spark polyline { fill: none; stroke: currentColor;
            stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ds-spark--pos { color: var(--ds-pos); }
.ds-spark--neg { color: var(--ds-neg); }
.ds-spark--accent { color: var(--ds-accent); }
.ds-spark rect { fill: currentColor; }

/* Win-rate mini bar (flat track + fill, no gradient). Set --v to a 0-100 number.
   Markup: <span class="ds-wr" style="--v:64"><i></i></span> */
.ds-wr { display: inline-block; width: 120px; height: 8px;
         background: var(--ds-bg-alt); border-radius: var(--ds-radius-sm);
         overflow: hidden; vertical-align: middle; }
.ds-wr > i { display: block; height: 100%; width: calc(var(--v, 0) * 1%);
             background: var(--ds-accent); border-radius: inherit; }
.ds-wr--pos > i { background: var(--ds-pos); }

/* -----------------------------------------------------------------------------
   13. RESPONSIVE — mobile-first. Enhance at 768 / 1024 / 1280.
   --------------------------------------------------------------------------- */
/* >=768px (tablet) */
@media (min-width: 768px) {
  :root { --ds-gutter: 24px; }
  .ds-section { padding: var(--ds-sp-9) var(--ds-gutter); }
  .ds-grid--2 { grid-template-columns: repeat(2, 1fr); }
  .ds-grid--3 { grid-template-columns: repeat(2, 1fr); }
  .ds-grid--4 { grid-template-columns: repeat(2, 1fr); }
}
/* >=1024px (small desktop) */
@media (min-width: 1024px) {
  :root { --ds-gutter: 32px; }
  .ds-grid--3 { grid-template-columns: repeat(3, 1fr); }
  .ds-grid--4 { grid-template-columns: repeat(4, 1fr); }
  .ds-fs-hero-boost { }
}
/* >=1280px (wide) */
@media (min-width: 1280px) {
  :root { --ds-gutter: 40px; }
}
/* very small phones (<=360px): tighten gutters, never shrink type below floor */
@media (max-width: 360px) {
  :root { --ds-gutter: 12px; }
  .ds-hero { font-size: 34px; }
  .ds-h1 { font-size: 30px; }
}

/* -----------------------------------------------------------------------------
   14. RTL — layout mirrors for ar / he. Text-align + chevron flip.
       Pages set dir="rtl" on <html>; these fix logical asymmetries.
   --------------------------------------------------------------------------- */
[dir="rtl"] .ds-dropdown__menu { text-align: right; }
[dir="rtl"] .ds-accordion__head,
[dir="rtl"] .ds-dropdown__trigger { text-align: right; }
[dir="rtl"] .ds-wr > i { margin-inline-start: 0; }
/* Sparklines are directional data; do not mirror them. */
[dir="rtl"] .ds-spark { transform: none; }

/* -----------------------------------------------------------------------------
   15. UTILITIES (spacing / display) — minimal, token-driven
   --------------------------------------------------------------------------- */
.ds-mt-1{margin-top:var(--ds-sp-1)} .ds-mt-2{margin-top:var(--ds-sp-2)}
.ds-mt-3{margin-top:var(--ds-sp-3)} .ds-mt-4{margin-top:var(--ds-sp-4)}
.ds-mt-5{margin-top:var(--ds-sp-5)} .ds-mt-6{margin-top:var(--ds-sp-6)}
.ds-mb-2{margin-bottom:var(--ds-sp-2)} .ds-mb-3{margin-bottom:var(--ds-sp-3)}
.ds-mb-4{margin-bottom:var(--ds-sp-4)} .ds-mb-5{margin-bottom:var(--ds-sp-5)}
.ds-flex{display:flex} .ds-flex-col{flex-direction:column}
.ds-items-center{align-items:center} .ds-justify-between{justify-content:space-between}
.ds-gap-2{gap:var(--ds-sp-2)} .ds-gap-3{gap:var(--ds-sp-3)} .ds-gap-4{gap:var(--ds-sp-4)}
.ds-wrap{flex-wrap:wrap}
.ds-hidden{display:none !important}
@media (max-width:767px){ .ds-hide-mobile{display:none !important} }
@media (min-width:768px){ .ds-hide-desktop{display:none !important} }
