/* ════════════════════════════════════════════════════════════════════════
   MARATHON ATOMIC DESIGN SYSTEM · marathon-ds.css  (v2 — faithful redo)
   A disciplined, atomic reproduction of Bungie Marathon's MENU CHROME,
   reverse-engineered from the reference screenshots. Original tokens.

   THE ONE RULE that keeps it tasteful (and faithful):
     · Chrome is GRAYSCALE on graphite. Surfaces step up by tone, not shadow.
     · The acid-green is SURGICAL — value / active / primary action / alert.
     · Saturated blue+magenta belong to ART (renders/glitch), NEVER chrome.
     · Corners are softly ROUNDED. 4px grid. Clean neutral grotesque.
     · "Flavor" atoms (registration crosses, boot-log, reticle, dot-matrix)
       live in section 13 — OPTIONAL, low-contrast, used sparingly. They are
       NOT the backbone; over-using them is what reads as cosplay.

   Atomic Design: TOKENS → ATOMS → MOLECULES → ORGANISMS.  Namespace: m-
   ════════════════════════════════════════════════════════════════════════ */

/* ───────────────────────── 01 · TOKENS ───────────────────────── */
:root{
  /* surfaces — graphite, tonal elevation */
  --m-bg:        #0e0f12;
  --m-s1:        #15171a;   /* cards, chips, slots */
  --m-s2:        #1c1f23;   /* hover / active row */
  --m-s3:        #23272c;   /* tooltip / highest */

  --m-line:      rgba(233,233,228,.08);
  --m-line-2:    rgba(233,233,228,.14);
  --m-line-3:    rgba(233,233,228,.22);

  --m-text:      #e9e9e4;
  --m-text-2:    #9a9d9f;
  --m-text-3:    #62656a;
  --m-text-dis:  #44474b;

  --m-accent:      #c0fc04;   /* SURGICAL acid yellow-green */
  --m-accent-2:    #d4ff48;
  --m-accent-ink:  #0c1000;
  --m-accent-tint: rgba(192,252,4,.10);

  /* semantic codes seen in-game */
  --m-danger: #ff4338;  --m-rare: #9e8cff;  --m-info: #3b6bff;  --m-teal: #3fd9c2;
  /* ART only — saturated glitch (renders) */
  --m-glx-blue: #3b6bff;  --m-glx-magenta: #ff2e9a;

  /* type */
  --m-ui:   "Archivo", system-ui, -apple-system, sans-serif;
  --m-mono: "IBM Plex Mono", ui-monospace, monospace;
  --m-fs-2xs:10px; --m-fs-xs:11px; --m-fs-sm:12px; --m-fs-md:14px;
  --m-fs-lg:16px; --m-fs-xl:20px; --m-fs-2xl:28px; --m-fs-3xl:40px;
  --m-fw-r:400; --m-fw-m:500; --m-fw-sb:600; --m-fw-b:700; --m-fw-x:800;
  --m-ls-wide:.06em; --m-ls-wider:.12em; --m-ls-widest:.22em;

  /* space · radius · motion */
  --m-1:4px; --m-2:8px; --m-3:12px; --m-4:16px; --m-5:20px; --m-6:24px; --m-8:32px;
  --m-r-xs:3px; --m-r-sm:4px; --m-r:6px; --m-r-lg:10px; --m-r-pill:999px;
  --m-bw:1px; --m-bw2:1.5px;
  --m-sh-1:0 1px 2px rgba(0,0,0,.4);
  --m-sh-2:0 10px 26px -12px rgba(0,0,0,.7);
  --m-dur-1:120ms; --m-dur-2:220ms; --m-dur-3:360ms;
  --m-ease:cubic-bezier(.22,.61,.21,1); --m-ease-snap:cubic-bezier(.16,1,.3,1);
}

/* ───────────────────────── 02 · BASE ───────────────────────── */
*{ box-sizing:border-box; }
.m-root{ background:var(--m-bg); color:var(--m-text); font-family:var(--m-ui);
  font-weight:var(--m-fw-m); font-size:var(--m-fs-md); line-height:1.5;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
.m-root ::selection{ background:var(--m-accent); color:var(--m-accent-ink); }
.m-root a{ color:inherit; text-decoration:none; }

/* ───────────────────────── 03 · ATOMS ───────────────────────── */
.m-label{ font-size:var(--m-fs-sm); font-weight:var(--m-fw-sb); text-transform:uppercase;
  letter-spacing:var(--m-ls-wide); color:var(--m-text-2); }
.m-eyebrow{ font-family:var(--m-mono); font-size:var(--m-fs-xs); letter-spacing:var(--m-ls-widest);
  text-transform:uppercase; color:var(--m-text-2); }
.m-mono{ font-family:var(--m-mono); font-size:var(--m-fs-xs); letter-spacing:var(--m-ls-wide); color:var(--m-text-3); }
.m-dot{ display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--m-text-3); }
.m-dot--on{ background:var(--m-accent); animation:m-pulse 2s var(--m-ease) infinite; }
.m-dot--danger{ background:var(--m-danger); } .m-dot--info{ background:var(--m-info); }
.m-key{ display:inline-grid; place-items:center; min-width:20px; height:20px; padding:0 5px;
  border:var(--m-bw) solid var(--m-line-2); border-radius:var(--m-r-xs);
  font-family:var(--m-mono); font-size:var(--m-fs-2xs); line-height:1; color:var(--m-text-2); }
.m-coin{ display:inline-grid; place-items:center; width:14px; height:14px; color:currentColor; }
.m-coin svg{ width:100%; height:100%; }
.m-tick{ display:inline-block; width:16px; height:4px;
  background:repeating-linear-gradient(90deg, var(--m-text-2) 0 3px, transparent 3px 5px); }
.m-divider{ height:1px; background:var(--m-line); border:0; }
.m-divider--v{ width:1px; align-self:stretch; background:var(--m-line); }

/* ───────────────────────── 04 · BADGES / CHIPS ───────────────────────── */
.m-badge{ display:inline-flex; align-items:center; gap:var(--m-2); height:22px; padding:0 var(--m-2);
  border-radius:var(--m-r-sm); background:var(--m-accent); color:var(--m-accent-ink);
  font-family:var(--m-mono); font-weight:var(--m-fw-sb); font-size:var(--m-fs-xs); letter-spacing:var(--m-ls-wide); }
.m-badge--neutral{ background:var(--m-s2); color:var(--m-text); }
.m-badge--danger{ background:var(--m-danger); color:#fff; }
.m-badge--rare{ background:var(--m-rare); color:#0c0a1a; }
.m-badge--outline{ background:transparent; color:var(--m-accent); box-shadow:inset 0 0 0 1px var(--m-accent); }

.m-chip{ display:inline-flex; align-items:center; gap:var(--m-2); height:26px; padding:0 var(--m-3);
  border-radius:var(--m-r-sm); background:var(--m-s1); border:var(--m-bw) solid var(--m-line);
  font-family:var(--m-mono); font-size:var(--m-fs-xs); letter-spacing:var(--m-ls-wide); color:var(--m-text-2); white-space:nowrap; }
.m-chip--strong{ color:var(--m-text); }

/* currency — colored hexagon coin + value (top bar) */
.m-cur{ display:inline-flex; align-items:center; gap:6px; font-family:var(--m-mono);
  font-size:var(--m-fs-sm); color:var(--m-text); letter-spacing:.03em; }
.m-cur--credit .m-coin{ color:var(--m-info); }
.m-cur--shield .m-coin{ color:var(--m-accent); }
.m-cur--mat .m-coin{ color:var(--m-rare); }

.m-keyact{ display:inline-flex; align-items:center; gap:var(--m-2); font-family:var(--m-mono);
  font-size:var(--m-fs-xs); letter-spacing:var(--m-ls-wide); color:var(--m-text-2); }
.m-stat{ display:inline-flex; flex-direction:column; gap:3px; line-height:1; }
.m-stat__k{ font-family:var(--m-mono); font-size:var(--m-fs-2xs); letter-spacing:var(--m-ls-wider); color:var(--m-text-3); text-transform:uppercase; }
.m-stat__v{ font-family:var(--m-mono); font-size:var(--m-fs-sm); color:var(--m-text); }
.m-stat__v--accent{ color:var(--m-accent); }

/* tags — stacked status on cards */
.m-tag{ display:inline-flex; align-items:center; gap:6px; height:24px; padding:0 var(--m-2);
  border-radius:var(--m-r-sm); background:#e9e9e4; color:#101216;
  font-weight:var(--m-fw-sb); font-size:var(--m-fs-2xs); text-transform:uppercase; letter-spacing:var(--m-ls-wide); white-space:nowrap; }
.m-tag svg{ width:13px; height:13px; }
.m-tag--accent{ background:var(--m-accent); color:var(--m-accent-ink); }
.m-tag--ghost{ background:transparent; color:var(--m-text-2); box-shadow:inset 0 0 0 1px var(--m-line-2); }

/* ───────────────────────── 05 · BUTTONS ───────────────────────── */
.m-btn{ --_bg:var(--m-s2); --_fg:var(--m-text); --_bd:var(--m-line-2);
  display:inline-flex; align-items:center; justify-content:center; gap:var(--m-2);
  height:38px; padding:0 var(--m-4); border-radius:var(--m-r-sm);
  background:var(--_bg); color:var(--_fg); border:var(--m-bw2) solid var(--_bd);
  font-family:var(--m-ui); font-weight:var(--m-fw-b); font-size:var(--m-fs-sm); letter-spacing:var(--m-ls-wide);
  text-transform:uppercase; cursor:pointer; user-select:none;
  transition:background var(--m-dur-1) var(--m-ease), color var(--m-dur-1) var(--m-ease),
             border-color var(--m-dur-1) var(--m-ease), transform var(--m-dur-2) var(--m-ease-snap); }
.m-btn:hover{ transform:translateY(-1px); } .m-btn:active{ transform:translateY(0); }
.m-btn--primary{ --_bg:var(--m-accent); --_fg:var(--m-accent-ink); --_bd:var(--m-accent); }
.m-btn--primary:hover{ --_bg:var(--m-accent-2); --_bd:var(--m-accent-2); }
.m-btn--secondary{ --_bg:#e9e9e4; --_fg:#101216; --_bd:#e9e9e4; }
.m-btn--ghost{ --_bg:transparent; --_fg:var(--m-accent); --_bd:var(--m-accent); }
.m-btn--ghost:hover{ --_bg:var(--m-accent); --_fg:var(--m-accent-ink); }
.m-btn--neutral{ --_bg:var(--m-s1); --_fg:var(--m-text); --_bd:var(--m-line-2); }
.m-btn--danger{ --_bg:transparent; --_fg:var(--m-danger); --_bd:var(--m-danger); }
.m-btn--sm{ height:30px; padding:0 var(--m-3); font-size:var(--m-fs-xs); }
.m-btn--lg{ height:46px; padding:0 var(--m-6); }
.m-btn--block{ width:100%; }
.m-btn--plus::before,.m-btn--plus::after{ content:"+"; opacity:.7; }
.m-btn[disabled], .m-btn.is-locked{ --_bg:var(--m-s1); --_fg:var(--m-text-dis); --_bd:var(--m-line);
  cursor:not-allowed; pointer-events:none; }

.m-iconbtn{ display:grid; place-items:center; width:30px; height:30px; border-radius:var(--m-r-pill);
  background:var(--m-s1); border:var(--m-bw) solid var(--m-line); color:var(--m-text-2); cursor:pointer;
  transition:color var(--m-dur-1) var(--m-ease), border-color var(--m-dur-1) var(--m-ease); }
.m-iconbtn:hover{ color:var(--m-text); border-color:var(--m-line-2); }
.m-iconbtn svg{ width:15px; height:15px; }
.m-iconbtn--alert{ background:var(--m-accent); border-color:var(--m-accent); color:var(--m-accent-ink); font-weight:var(--m-fw-x); }
.m-iconbtn--mic{ background:var(--m-glx-magenta); border-color:var(--m-glx-magenta); color:#fff; }

/* tabs — two active treatments: light (top-nav) OR accent (vendor/faction) */
.m-tab{ display:inline-flex; align-items:center; gap:var(--m-2); height:32px; padding:0 var(--m-4);
  border-radius:var(--m-r-sm); background:var(--m-s1); border:var(--m-bw) solid var(--m-line);
  font-weight:var(--m-fw-sb); font-size:var(--m-fs-sm); letter-spacing:var(--m-ls-wide); text-transform:uppercase;
  color:var(--m-text-2); cursor:pointer; transition:background var(--m-dur-1), color var(--m-dur-1); }
.m-tab:hover{ color:var(--m-text); }
.m-tab.is-active{ background:#e9e9e4; color:#101216; border-color:#e9e9e4; }
.m-tab--accent.is-active{ background:var(--m-accent); color:var(--m-accent-ink); border-color:var(--m-accent); }

/* ───────────────────────── 06 · CONTROLS ───────────────────────── */
.m-slot{ position:relative; width:64px; height:64px; border-radius:var(--m-r-sm);
  background:var(--m-s1); border:var(--m-bw) solid var(--m-line); }
.m-slot::before,.m-slot::after,.m-slot>i::before,.m-slot>i::after{ content:""; position:absolute;
  width:8px; height:8px; border:var(--m-bw) solid var(--m-line-2); }
.m-slot::before{ top:6px; left:6px; border-right:0; border-bottom:0; }
.m-slot::after{ top:6px; right:6px; border-left:0; border-bottom:0; }
.m-slot>i{ position:absolute; inset:0; }
.m-slot>i::before{ bottom:6px; left:6px; top:auto; border-right:0; border-top:0; }
.m-slot>i::after{ bottom:6px; right:6px; top:auto; left:auto; border-left:0; border-top:0; }

.m-section{ display:flex; align-items:center; gap:var(--m-3); }
.m-section__title{ font-weight:var(--m-fw-b); font-size:var(--m-fs-lg); letter-spacing:var(--m-ls-wide);
  text-transform:uppercase; color:var(--m-text); }
.m-section__sub{ font-family:var(--m-mono); font-size:var(--m-fs-xs); letter-spacing:var(--m-ls-wide); color:var(--m-text-3); }
.m-section__end{ margin-left:auto; }

.m-progress{ width:160px; height:6px; border-radius:var(--m-r-pill); background:var(--m-s2); overflow:hidden; }
.m-progress__fill{ height:100%; background:var(--m-accent); }

/* list item — vendor/faction row; selected = accent fill */
.m-listitem{ display:flex; align-items:center; gap:var(--m-3); width:100%; height:46px; padding:0 var(--m-3);
  border-radius:var(--m-r-sm); background:transparent; color:var(--m-text-2); cursor:pointer;
  transition:background var(--m-dur-1), color var(--m-dur-1); }
.m-listitem:hover{ background:var(--m-s1); color:var(--m-text); }
.m-listitem.is-selected{ background:var(--m-accent); color:var(--m-accent-ink); font-weight:var(--m-fw-b); }
.m-listitem__glyph{ display:grid; place-items:center; width:24px; height:24px; flex:0 0 auto; }
.m-listitem__glyph svg{ width:100%; height:100%; }
.m-listitem__label{ font-weight:var(--m-fw-sb); font-size:var(--m-fs-sm); letter-spacing:var(--m-ls-wide); text-transform:uppercase; }

/* item tile + ability row */
.m-tile{ position:relative; aspect-ratio:1; border-radius:var(--m-r-sm); background:var(--m-s1);
  border:var(--m-bw) solid var(--m-line); overflow:hidden; }
.m-tile__badge{ position:absolute; top:5px; left:5px; }
.m-tile__qty{ position:absolute; bottom:4px; right:6px; font-family:var(--m-mono); font-size:var(--m-fs-2xs); color:var(--m-text); }
.m-row{ display:flex; align-items:center; gap:var(--m-3); padding:var(--m-2) 0; }
.m-row__icon{ display:grid; place-items:center; width:34px; height:34px; border-radius:var(--m-r-sm); background:var(--m-s2); color:var(--m-text-2); }
.m-row__icon svg{ width:18px; height:18px; }
.m-row__label{ font-weight:var(--m-fw-sb); font-size:var(--m-fs-sm); text-transform:uppercase; letter-spacing:var(--m-ls-wide); color:var(--m-text); }

/* ───────────────────────── 07 · ORGANISMS ───────────────────────── */
.m-statusbar{ display:flex; align-items:center; justify-content:space-between; gap:var(--m-4);
  padding-bottom:var(--m-3); border-bottom:var(--m-bw) solid var(--m-line); }
.m-statusbar__brand{ display:flex; align-items:center; gap:var(--m-3); min-width:0; }
.m-statusbar__cluster{ display:flex; align-items:center; gap:var(--m-2); }
.m-brandmark{ display:flex; flex-direction:column; min-width:0; }
.m-brandmark h1{ font-weight:var(--m-fw-x); font-size:var(--m-fs-xl); line-height:.95; letter-spacing:-.01em; white-space:nowrap; }
.m-brandmark .sub{ font-family:var(--m-mono); font-size:var(--m-fs-2xs); letter-spacing:var(--m-ls-widest); color:var(--m-text-3); margin-top:3px; }

.m-actionbar{ display:flex; align-items:center; justify-content:space-between; gap:var(--m-4);
  padding-top:var(--m-3); border-top:var(--m-bw) solid var(--m-line); }
.m-actionbar__left,.m-actionbar__right{ display:flex; align-items:center; gap:var(--m-3); min-width:0; }

/* card — the faction / channel / item card */
.m-card{ position:relative; display:flex; flex-direction:column; overflow:hidden;
  padding:var(--m-5); background:var(--m-s1); border:var(--m-bw) solid var(--m-line-2); border-radius:var(--m-r-lg);
  transition:background var(--m-dur-2) var(--m-ease), border-color var(--m-dur-2) var(--m-ease),
             transform var(--m-dur-3) var(--m-ease-snap), box-shadow var(--m-dur-2) var(--m-ease); }
.m-card__top{ display:flex; align-items:center; justify-content:space-between; gap:var(--m-2); }
.m-card__art{ flex:1; display:grid; place-items:center; min-height:0; padding:var(--m-4) 0; color:var(--m-text-2); }
.m-card__art svg{ width:clamp(46px,8vmin,84px); height:clamp(46px,8vmin,84px); }
.m-card__name{ font-weight:var(--m-fw-b); font-size:var(--m-fs-lg); text-transform:uppercase; letter-spacing:var(--m-ls-wide); }
.m-card__cta{ margin-top:var(--m-4); }
.m-card.is-interactive{ cursor:pointer; }
.m-card.is-interactive:hover{ background:var(--m-s2); transform:translateY(-3px); box-shadow:var(--m-sh-2), inset 0 0 0 1px var(--m-accent-tint); }
.m-card.is-locked{ opacity:.6; }
.m-card--feature{ background:var(--m-accent); border-color:var(--m-accent); }
.m-card--feature *{ color:var(--m-accent-ink) !important; }

.m-panel{ background:var(--m-s1); border:var(--m-bw) solid var(--m-line-2); border-radius:var(--m-r-lg);
  padding:var(--m-5); display:flex; flex-direction:column; gap:var(--m-3); }
.m-panel__head h3{ font-weight:var(--m-fw-x); font-size:var(--m-fs-2xl); text-transform:uppercase; letter-spacing:-.01em; line-height:1; }
.m-panel__head .sub{ font-family:var(--m-mono); font-size:var(--m-fs-xs); letter-spacing:var(--m-ls-wider); text-transform:uppercase; color:var(--m-text-3); margin-top:4px; }

.m-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(88px,1fr)); gap:var(--m-2); }
.m-tooltip{ background:var(--m-s3); border:var(--m-bw) solid var(--m-line-2); border-radius:var(--m-r);
  padding:var(--m-3) var(--m-4); box-shadow:var(--m-sh-2); max-width:280px; font-size:var(--m-fs-sm); color:var(--m-text-2); }

/* ───────────────── 13 · FLAVOR ATOMS — OPTIONAL, use sparingly ───────────────── */
/* These are the Marathon "texture". Tasteful = a whisper, never the backbone. */
.m-flavor-log{ font-family:var(--m-mono); font-size:var(--m-fs-2xs); line-height:1.7; letter-spacing:var(--m-ls-wide);
  color:var(--m-text-3); white-space:pre-wrap; opacity:.8; }
.m-flavor-log b{ color:var(--m-text-2); font-weight:400; } .m-flavor-log .ok{ color:var(--m-accent); opacity:.7; }
.m-cross{ position:relative; display:inline-block; width:14px; height:14px; opacity:.6; }
.m-cross::before,.m-cross::after{ content:""; position:absolute; background:var(--m-line-3); }
.m-cross::before{ left:50%; top:0; bottom:0; width:1px; transform:translateX(-.5px); }
.m-cross::after{ top:50%; left:0; right:0; height:1px; transform:translateY(-.5px); }
.m-reticle{ position:relative; width:34px; height:34px; color:var(--m-text-2); }
.m-reticle::before,.m-reticle::after{ content:""; position:absolute; background:currentColor; }
.m-reticle::before{ left:50%; top:6px; bottom:6px; width:1px; transform:translateX(-.5px); }
.m-reticle::after{ top:50%; left:6px; right:6px; height:1px; transform:translateY(-.5px); }
.m-matrix{ display:grid; grid-template-columns:repeat(var(--c,16),1fr); gap:3px; width:var(--sz,180px); aspect-ratio:1; }
.m-matrix .cell{ aspect-ratio:1; border-radius:1.5px; background:rgba(233,233,228,.045); }
.m-matrix .cell.dim{ background:rgba(233,233,228,.18); } .m-matrix .cell.on{ background:var(--m-accent); }
/* glitch — ART only (renders), the only place saturated colour appears in motion */
.m-glitch{ animation:m-glitch .55s steps(2,end) 1; }
@keyframes m-glitch{
  0%,100%{ filter:none; transform:translate(0); }
  30%{ filter:drop-shadow(2px 0 var(--m-glx-blue)) drop-shadow(-2px 0 var(--m-glx-magenta)); transform:translate(-1px,0); }
  60%{ filter:drop-shadow(-2px 0 var(--m-glx-blue)) drop-shadow(2px 0 var(--m-glx-magenta)); transform:translate(1px,0); }
}

@keyframes m-pulse{ 0%,100%{ opacity:1; } 50%{ opacity:.35; } }
@media (prefers-reduced-motion: reduce){ .m-root *{ animation:none !important; transition-duration:.1s !important; } }