/* ============================================================
   EVERYDINX SITE LAYER - qdinx.com
   Static ports of the design-system components (the .jsx kits are
   React references; this is the framework-free production stack).
   Loads AFTER styles.css (tokens). No em-dashes, by standing rule.
   ============================================================ */

/* ---- base ---- */
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}
a { color: inherit; text-decoration: none; }
img, video { max-width: 100%; }

/* ---- signature background layers (fixed, behind everything) ---- */
.fx-layer { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.fx-aurora { background-image: var(--fx-aurora); }
.fx-grid {
  opacity: 0.4;
  background-image: var(--fx-grid);
  -webkit-mask-image: radial-gradient(120% 90% at 50% 10%, #000 50%, transparent 100%);
  mask-image: radial-gradient(120% 90% at 50% 10%, #000 50%, transparent 100%);
}
.page { position: relative; z-index: 1; }

/* ---- layout rails ---- */
.wrap { max-width: 980px; margin: 0 auto; padding: 40px var(--wrap-pad) 70px; }
.wrap-wide { max-width: var(--wrap-max); }
.stack { display: flex; flex-direction: column; gap: 46px; }

/* ============================================================
   NAVBAR
   ============================================================ */
.nav {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  padding: 12px var(--wrap-pad);
  background: var(--bg-nav);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--border);
}
.nav-brand { display: flex; align-items: center; gap: 10px; }
.nav-brand img { height: 42px; width: auto; display: block; filter: drop-shadow(0 0 12px rgba(0, 229, 255, 0.45)); }
.nav-brand .mode { font-family: var(--font-mono); font-size: var(--fs-mono-xs); color: var(--text-faint); }

/* ---- theme switcher (extensible: see tokens/themes.css) ---- */
.theme-switch { position: relative; }
.theme-toggle {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  font-family: var(--font-mono); font-size: var(--fs-mono-xs); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-dim); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-chip);
  padding: 7px 12px; transition: color var(--dur-fast), border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.theme-toggle:hover { color: var(--text-bright); border-color: var(--accent); box-shadow: var(--glow-cyan); }
.theme-toggle .ts-glyph { color: var(--accent); font-size: 0.9rem; line-height: 1; }
.theme-toggle .ts-label { color: var(--text-bright); font-weight: var(--fw-semibold, 600); }
.theme-toggle .ts-caret { transition: transform var(--dur-fast); }
.theme-switch.open .ts-caret { transform: rotate(180deg); }
.theme-menu {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 120; margin: 0; padding: 6px; list-style: none;
  min-width: 156px; background: var(--surface); border: 1px solid var(--border-strong); border-radius: 10px;
  box-shadow: var(--shadow-panel); display: flex; flex-direction: column; gap: 2px;
}
.theme-menu[hidden] { display: none; }
.theme-menu li { margin: 0; }
.theme-menu button {
  width: 100%; display: flex; align-items: center; gap: 9px; cursor: pointer; text-align: left;
  font-family: var(--font-mono); font-size: var(--fs-mono-xs); letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text-dim); background: transparent; border: 1px solid transparent; border-radius: 7px; padding: 8px 10px;
  transition: color var(--dur-fast), background var(--dur-fast), border-color var(--dur-fast);
}
.theme-menu button:hover { color: var(--text-bright); background: var(--surface-raised); border-color: var(--border); }
.theme-menu button[aria-current="true"] { color: var(--accent); border-color: var(--accent); }
.theme-menu .tm-glyph { font-size: 1rem; line-height: 1; width: 18px; text-align: center; }
.theme-menu .tm-dot { margin-left: auto; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); opacity: 0; box-shadow: var(--glow-cyan); }
.theme-menu button[aria-current="true"] .tm-dot { opacity: 1; }
.nav-links { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; flex: 1; }
.nav-link {
  font-family: var(--font-body); font-size: var(--fs-sm);
  letter-spacing: var(--ls-wide); color: var(--text-dim);
  padding: 6px 12px; border-radius: var(--r-chip);
  border-bottom: 2px solid transparent;
  transition: color var(--dur-fast), border-color var(--dur-fast);
}
.nav-link:hover { color: var(--accent); }
.nav-link.active { color: var(--text-bright); border-bottom-color: var(--accent-2); }
.nav-right { margin-left: auto; }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-body); font-weight: var(--fw-semibold); font-size: var(--fs-body);
  letter-spacing: var(--ls-wide); line-height: 1;
  padding: 12px 18px; border-radius: var(--r-btn); border: 1px solid transparent;
  cursor: pointer; transition: all var(--dur-fast) var(--ease-out); text-align: center;
}
.btn-sm { padding: 8px 12px; font-size: var(--fs-caption); }
.btn-full { width: 100%; }
.btn-primary { background: var(--accent); color: var(--on-accent); }
.btn-primary:hover { box-shadow: var(--glow-cyan); transform: translateY(-1px); }
.btn-fire { background: var(--accent-2); color: var(--on-accent-2); }
.btn-fire:hover { box-shadow: var(--glow-orange); transform: translateY(-1px); }
.btn-ghost { background: transparent; border-color: var(--border-strong); color: var(--text); }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }

/* ============================================================
   BADGES
   ============================================================ */
.badge {
  font-family: var(--font-mono); font-size: var(--fs-mono-xs);
  text-transform: uppercase; letter-spacing: 0.12em;
  padding: 2px 8px; border-radius: var(--r-chip); border: 1px solid var(--border-strong);
}
.badge-live { color: var(--success); border-color: var(--success); }
.badge-fire { color: var(--accent-2); border-color: var(--accent-2); }

/* ============================================================
   SECTION MARKER  ( 00 // Title )
   ============================================================ */
.sec-marker {
  display: flex; align-items: baseline; gap: 12px;
  border-top: 1px solid var(--border); padding-top: 16px;
}
.sec-marker .idx {
  font-family: var(--font-mono); font-size: var(--fs-mono-sm);
  letter-spacing: var(--ls-hud); color: var(--accent);
}
.sec-marker h2 {
  margin: 0; font-family: var(--font-display); font-weight: var(--fw-bold);
  font-size: var(--fs-h3); text-transform: uppercase; letter-spacing: var(--ls-slam);
  color: var(--text-bright);
}
.accent-fire .idx, .accent-fire h2 { color: var(--accent-2); }
.accent-glitch .idx, .accent-glitch h2 { color: var(--accent-3); }

/* ---- kicker (eyebrow) ---- */
.kicker {
  font-family: var(--font-mono); font-size: var(--fs-mono-xs);
  text-transform: uppercase; letter-spacing: var(--ls-kicker); color: var(--accent);
}
.kicker.fire { color: var(--accent-2); }

/* ---- slam heading ---- */
.slam {
  font-family: var(--font-display); font-weight: var(--fw-black);
  font-size: clamp(2rem, 6vw, 2.6rem); line-height: var(--lh-tight);
  letter-spacing: var(--ls-slam); text-transform: uppercase;
  color: var(--text-bright); text-shadow: 0 3px 0 #000, var(--tglow-cyan); margin: 6px 0 0;
}
.slam.fire { text-shadow: 0 3px 0 #000, var(--tglow-orange); }

/* ============================================================
   STAT BLOCK
   ============================================================ */
.stats { display: flex; gap: 48px; flex-wrap: wrap; }
.stat-value {
  font-family: var(--font-display); font-weight: var(--fw-black);
  font-size: 2.4rem; line-height: 1; color: var(--accent);
}
.stat.fire .stat-value { color: var(--accent-2); }
.stat.paper .stat-value { color: var(--text-bright); }
.stat-label {
  font-family: var(--font-mono); font-size: var(--fs-mono-xs);
  text-transform: uppercase; letter-spacing: var(--ls-hud); color: var(--text-faint); margin-top: 6px;
}

/* ============================================================
   HERO (panel)
   ============================================================ */
.hero {
  position: relative; border: 1px solid var(--border-strong); border-radius: var(--r-panel);
  overflow: hidden; padding: 34px 30px; box-shadow: var(--shadow-panel);
  background: var(--bg-hero);
}
.hero-row { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }
.hero-crest { width: 140px; height: 140px; object-fit: contain; flex: none; filter: drop-shadow(0 0 22px rgba(0,229,255,.4)); }
.hero-body { flex: 1; min-width: 260px; }
.hero-eyebrow {
  font-family: var(--font-mono); font-size: 0.65rem; text-transform: uppercase;
  letter-spacing: var(--ls-tag); color: var(--accent); margin-bottom: 8px;
}
.hero-title {
  font-family: var(--font-display); font-weight: var(--fw-black);
  font-size: clamp(2rem, 6vw, 3.4rem); line-height: 0.95; letter-spacing: 1px;
  color: var(--text-bright); text-shadow: var(--slam-emboss), var(--glow-cyan);
}
.hero-title .hl { color: var(--accent); }
.hero-lead { font-size: var(--fs-md); color: var(--text-dim); margin-top: 10px; max-width: 52ch; line-height: 1.5; }
.hl-fire { color: var(--accent-2); }
.hl-cyan { color: var(--accent); }

/* ============================================================
   MISSION line
   ============================================================ */
.mission-line { font-size: var(--fs-lg); color: var(--text-bright); margin: 18px 0 22px; max-width: 60ch; line-height: 1.5; }

/* ============================================================
   MUSIC : track rows
   ============================================================ */
.tracks { display: grid; gap: 10px; margin-top: 18px; }
.track {
  display: flex; align-items: center; gap: 16px; padding: 14px 16px; border-radius: 10px;
  border: 1px solid var(--border); background: transparent;
  transition: all var(--dur-fast); cursor: pointer;
}
.track:hover { border-color: var(--accent); background: var(--surface); }
.track-play { font-family: var(--font-display); font-weight: var(--fw-black); font-size: 1.1rem; color: var(--text-faint); width: 28px; }
.track:hover .track-play { color: var(--accent); }
.track-genre { font-family: var(--font-mono); font-size: var(--fs-mono-xs); letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); }
.track-title { font-size: var(--fs-md); color: var(--text-bright); margin-top: 2px; }
.track-note { font-size: var(--fs-sm); color: var(--text-dim); margin-top: 2px; }

/* ============================================================
   TOOLS grid
   ============================================================ */
.section-note { font-family: var(--font-mono); font-size: var(--fs-mono-xs); letter-spacing: 0.14em; color: var(--text-faint); margin: 10px 0 0; }
.tool-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; margin-top: 16px; }
.tool-card { border: 1px solid var(--border-strong); border-radius: 10px; padding: 16px; background: var(--surface); transition: all var(--dur-fast) var(--ease-out); }
.tool-card:hover { border-color: var(--accent); transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.tool-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; gap: 8px; }
.tool-cat { font-family: var(--font-mono); font-size: var(--fs-mono-xs); letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent-2); }
.tool-title { font-size: var(--fs-md); color: var(--text-bright); }
.tool-note { font-size: var(--fs-sm); color: var(--text-dim); margin-top: 4px; }
.tool-more { border: 1px dashed var(--border-strong); border-radius: 10px; padding: 16px; display: flex; align-items: center; justify-content: center; color: var(--text-faint); font-family: var(--font-mono); font-size: var(--fs-caption); letter-spacing: 0.1em; min-height: 92px; }

/* ============================================================
   CONTACT form
   ============================================================ */
.form { display: flex; flex-direction: column; gap: 12px; margin-top: 18px; max-width: 440px; }
.field {
  background: var(--surface-sunk); border: 1px solid var(--border-strong); border-radius: 8px;
  padding: 12px 14px; color: var(--text); font-family: var(--font-body); font-size: var(--fs-body); outline: none;
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.field::placeholder { color: var(--text-faint); }
.field:focus { border-color: var(--accent); box-shadow: var(--glow-cyan); }
textarea.field { resize: vertical; min-height: 104px; line-height: 1.5; }
.form-status { font-family: var(--font-mono); font-size: var(--fs-mono-xs); letter-spacing: 0.05em; min-height: 1.2em; margin-top: 2px; color: var(--text-dim); }
.form-status.ok { color: var(--success); }
.form-status.err { color: var(--rec); }

/* ============================================================
   FOOTER
   ============================================================ */
.foot { border-top: 1px solid var(--border); padding-top: 20px; text-align: center; }
.foot-lines { font-family: var(--font-mono); font-size: var(--fs-mono-xs); letter-spacing: 0.1em; color: var(--text-faint); line-height: 2; }

/* ============================================================
   SQUAD : roster member cards
   ============================================================ */
.member-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: var(--grid-gap); }
.member-card {
  display: flex; flex-direction: column; gap: 12px; align-items: center; text-align: center;
  border: 1px solid var(--border-strong); border-radius: var(--r-card); padding: 22px 16px;
  background: linear-gradient(180deg, #11161d, #0b1016);
  transition: all var(--dur-med) var(--ease-out);
}
.member-card:hover { border-color: var(--accent); transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.member-badge { width: 145px; height: 145px; display: flex; align-items: center; justify-content: center; }
.member-badge img { max-width: 100%; max-height: 145px; object-fit: contain; filter: drop-shadow(0 0 18px rgba(0,229,255,.4)); }
.member-badge .emoji { font-size: 5rem; line-height: 1; }
.member-name { font-family: var(--font-display); font-weight: var(--fw-semibold, 600); font-size: 1.02rem; letter-spacing: var(--ls-slam); text-transform: uppercase; color: var(--text-bright); }
.member-role { font-family: var(--font-mono); font-size: var(--fs-mono-xs); letter-spacing: 0.1em; color: var(--text-dim); }

/* ============================================================
   MEMBER PAGE (placeholder profile template)
   ============================================================ */
.member-hero {
  position: relative; border: 1px solid var(--border-strong); border-radius: var(--r-panel);
  overflow: hidden; padding: 30px; box-shadow: var(--shadow-panel);
  background:
    radial-gradient(60% 130% at 20% 0%, rgba(0,229,255,.14), transparent 60%),
    radial-gradient(50% 120% at 85% 10%, rgba(255,30,122,.10), transparent 60%),
    linear-gradient(180deg, #12161f, #0a0c10);
}
.hud { display: flex; justify-content: space-between; align-items: center; font-family: var(--font-mono); font-size: var(--fs-mono-sm); letter-spacing: var(--ls-hud); }
.hud .rec { color: var(--accent-3); }
.hud .rec::before { content: "\25CF"; margin-right: 6px; animation: recblink 1.4s steps(2) infinite; }
.hud .counter { color: var(--accent); }
@keyframes recblink { 50% { opacity: 0.2; } }
.member-mark { display: flex; align-items: center; justify-content: center; min-height: 160px; margin: 18px 0; }
.member-mark img { max-width: 80%; max-height: 190px; object-fit: contain; filter: drop-shadow(0 0 22px rgba(0,229,255,.4)); }
.member-mark .emoji { font-size: 5rem; }
.member-hero-role { text-align: center; font-family: var(--font-mono); font-size: var(--fs-mono-sm); letter-spacing: var(--ls-hud); color: var(--accent); }
.dossier { margin-top: 16px; border: 1px solid var(--border-strong); border-radius: var(--r-card); padding: 20px; background: var(--surface-sunk); font-family: var(--font-mono); font-size: var(--fs-sm); line-height: 2; }
.dossier-row { display: flex; gap: 14px; }
.dossier-row .k { color: var(--text-faint); width: 128px; flex: none; text-transform: uppercase; letter-spacing: 0.12em; }
.dossier-row .v { color: var(--text); }
.dossier-row .v.redact { color: var(--accent-3); }
.transmission { font-size: var(--fs-md); color: var(--text-dim); line-height: 1.6; margin-top: 16px; }
.transmission .mono { font-family: var(--font-mono); color: var(--text-faint); }

/* ---- small screens: nav wraps, hero stacks ---- */
@media (max-width: 620px) {
  .nav-right { margin-left: 0; }
  .stack { gap: 36px; }
}

/* ============================================================
   HQ LANDING COMPONENTS (shared, reusable as the site grows)
   type-set logo · section label + rule · callout · stat cards
   ============================================================ */

/* type-set qdinx.com wordmark (CSS letters, no image) */
.dinx-logo {
  font-family: var(--font-display); font-weight: var(--fw-black);
  text-transform: uppercase; letter-spacing: 0.03em; line-height: 0.9;
  font-size: clamp(2.6rem, 11vw, 6.4rem); color: var(--accent);
  text-shadow: var(--tglow-cyan); display: inline-block;
}
.dinx-logo .i, .dinx-logo .dot { color: var(--accent-2); }

/* HQ hero */
.hero-hq { text-align: center; padding: 52px 0 34px; }
.hq-eyebrow { font-family: var(--font-mono); font-size: var(--fs-mono-xs); letter-spacing: 0.34em;
  text-transform: uppercase; color: var(--accent); margin-bottom: 18px; }
.hero-hq-lead { max-width: 60ch; margin: 20px auto 0; font-family: var(--font-body); font-weight: 300;
  color: var(--text-dim); font-size: 1.05rem; line-height: 1.7; }
.hero-hq-lead b, .hero-hq-lead .hl-cyan { color: var(--text); }
.hero-hq-cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 26px; }

/* section label with the underline rule (00 // The Mission) */
.sec-label { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }
.sec-label .row { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.sec-label .num { font-family: var(--font-mono); font-size: var(--fs-mono-xs); letter-spacing: 0.18em; color: var(--accent-2); }
.sec-label h2 { margin: 0; font-family: var(--font-display); font-weight: var(--fw-bold); font-size: 1.3rem;
  letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-bright); }
.sec-label .rule { height: 2px; width: 100%; max-width: 240px; border-radius: 2px;
  background: linear-gradient(90deg, var(--accent), transparent); }
.sec-label.fire .num { color: var(--accent); }
.sec-label.fire .rule { background: linear-gradient(90deg, var(--accent-2), transparent); }

/* almost-see-through callout box (the mission quote) */
.callout { border: 1px solid var(--border-strong); background: var(--surface); border-radius: var(--r-card);
  padding: 16px 20px; font-family: var(--font-body); font-weight: 300; line-height: 1.7; color: var(--text); }
.callout.dashed { border: 2px dashed var(--accent-3); background: rgba(255, 30, 122, 0.06); }
.callout .hl-cyan { color: var(--accent); font-weight: 400; }

/* stat cards with colored corner brackets */
.statgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.statcard { position: relative; background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: var(--r-card); padding: 22px; display: flex; flex-direction: column; gap: 6px; }
.statcard .val { font-family: var(--font-display); font-weight: var(--fw-black); font-size: 1.9rem;
  line-height: 1; color: var(--sc, var(--accent)); }
.statcard .lbl { font-family: var(--font-mono); font-size: var(--fs-mono-xs); letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--text-dim); }
.statcard::before, .statcard::after { content: ""; position: absolute; width: 12px; height: 12px;
  border: 2px solid var(--sc, var(--accent)); pointer-events: none; }
.statcard::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; border-top-left-radius: 5px; }
.statcard::after { bottom: -1px; right: -1px; border-left: 0; border-top: 0; border-bottom-right-radius: 5px; }
.statcard.green { --sc: var(--success); }
.statcard.cyan { --sc: var(--accent); }
.statcard.orange { --sc: var(--accent-2); }
.statcard.magenta { --sc: var(--accent-3); }
@media (max-width: 560px) { .statgrid { grid-template-columns: 1fr; } }