/* ==========================================================================
   faultline101 — GLOBAL DARK THEME ("Neon")
   Load AFTER styles.css (and after landing.css / blog.css / team.css).
   Non-destructive: original stylesheets are untouched; this layer redefines
   the design tokens and fixes the components that were built light-specific.
   Remove the <link> to roll back instantly.
   ========================================================================== */

:root{
  /* --- token flip: --paper was the light surface, --ink the dark text --- */
  --paper:       #0a0e10;   /* page background            */
  --paper-dim:   #10171a;   /* alt band / subtle surface  */
  --panel:       #131b1f;   /* cards & boxes (was #fff)   */
  --panel-2:     #182126;   /* raised / hover surface     */
  --ink:         #eef3f5;   /* primary text               */
  --ink-soft:    #c2ccd2;   /* body text                  */
  --steel:       #93a0aa;   /* muted text (AA on #0a0e10) */
  --steel-light: #6d7a84;   /* borders / dim accents      */
  --amber:       #e8a33d;
  --amber-dark:  #ffbf5c;   /* "dark" variant must go LIGHTER on a dark bg */
  --rust:        #ff8163;   /* brightened for dark        */
  --rust-bg:     rgba(255,129,99,.12);
  --teal:        #45c4a8;   /* brightened for dark        */
  --teal-bg:     rgba(69,196,168,.12);
  --line:        rgba(255,255,255,.10);
  --shadow:      0 1px 0 rgba(0,0,0,.5);
  --glow-amber:  0 0 34px rgba(232,163,61,.22);
}

html{ background:var(--paper); }
body{ background:var(--paper); color:var(--ink); }

/* ---------- Inverted components (were dark-on-light, must stay dark) ------ */
.topnav{
  background:rgba(10,14,16,.82);
  backdrop-filter:blur(14px);
  color:var(--ink);
  border-bottom:1px solid var(--line);
}
.brand{ color:var(--ink); }
.nav-links button{ color:var(--steel); }
.nav-links button:hover,
.nav-links button.active{ color:var(--ink); border-bottom-color:var(--amber); }

/* ---------- Buttons: primary becomes the brand amber -------------------- */
.btn{
  background:var(--amber); color:#101314;
  border:1.5px solid var(--amber); border-radius:8px; font-weight:600;
  box-shadow:var(--glow-amber);
}
.btn:hover{ background:var(--amber-dark); border-color:var(--amber-dark); }
.btn.ghost{
  background:rgba(255,255,255,.04); color:var(--ink);
  border:1.5px solid var(--line); box-shadow:none;
}
.btn.ghost:hover{ background:rgba(255,255,255,.09); border-color:var(--amber); color:#fff; }
.btn:disabled{ opacity:.4; box-shadow:none; }

/* ---------- Surfaces that were hardcoded #fff --------------------------- */
.tag-card,
.concept-block,
.why-matters-box,
.mistakes-box,
.glossary-box,
.scenario-tab,
.diagram-box,
.feature-card,
.price-card,
.faq-item,
.contact-block,
.blog-card,
.step-pill{
  background:var(--panel);
  border-color:var(--line);
  color:var(--ink-soft);
  box-shadow:none;
}
.tag-card:hover,
.feature-card:hover,
.blog-card:hover{ background:var(--panel-2); border-color:rgba(232,163,61,.35); }

/* headings inside those surfaces stay bright */
.tag-card h3, .concept-block h3, .why-matters-box h3, .mistakes-box h3,
.glossary-box h3, .feature-card h3, .price-card h3, .faq-item summary,
.blog-card h3, .contact-block h3{ color:var(--ink); }

/* the little status dot on module cards */
.tag-card::before{
  background:var(--paper);
  border-color:var(--steel-light);
  box-shadow:inset 0 0 0 2px var(--panel);
}

/* ---------- Section bands ----------------------------------------------
   landing.css uses `background:var(--ink); color:var(--paper)` for its dark
   bands. With the tokens flipped those would render light-on-light, so each
   inverted band is restated here. ---------------------------------------- */
.m-section-alt{ background:var(--paper-dim); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.m-hero{ background:var(--paper); color:var(--ink); }
.m-hero .lead, .m-hero-meta{ color:var(--ink-soft); }
.m-case-lead{ color:var(--ink-soft); }
.m-cta-band{
  background:radial-gradient(60% 120% at 50% 0%, rgba(232,163,61,.14), transparent 70%), var(--paper);
  color:var(--ink); border-top:1px solid var(--line);
}
.m-cta-band h2{ color:var(--ink); }
.team-cta{ color:var(--ink-soft); }
/* landing.css sets `.m-hero .btn.ghost { color:var(--paper) }` (0,3,0) for a
   ghost button on its old dark hero. With --paper now the page background
   that renders invisible, so it is restated at matching specificity. */
.m-hero .btn.ghost{ color:var(--ink); border-color:var(--line); }
.m-hero .btn.ghost:hover{ color:#fff; border-color:var(--amber); }

/* ---------- Landing "own it forever" compare block ---------------------- */
.m-own-text strong{ color:var(--amber); }
.m-own-them{ background:rgba(255,255,255,.035); border:1px solid var(--line); color:var(--ink-soft); }
.m-own-us{
  background:linear-gradient(180deg, rgba(232,163,61,.14), rgba(232,163,61,.04));
  color:var(--ink); border:2px solid var(--amber); box-shadow:var(--glow-amber);
}
.m-own-us .price-amount, .m-own-us strong{ color:var(--amber-dark); }

/* ---------- Team CTA ---------------------------------------------------- */
.team-cta{ background:linear-gradient(180deg, rgba(69,196,168,.07), transparent); border:1px solid var(--line); }
.team-cta h3, .team-cta-action .price-amount{ color:var(--ink); }
.team-cta-body p, .team-cta-list li{ color:var(--ink-soft); }

/* ---------- Blog --------------------------------------------------------
   blog.css is token-less (hardcoded #1a1a1a / #2a2a2a / #fff / #f7f5f0),
   so every colour it sets is restated here for dark. -------------------- */
.blog-body{ background:var(--paper); }

/* article */
.blog-article h1, .blog-article h2, .blog-article h3,
.blog-article strong{ color:var(--ink); }
.blog-article p, .blog-article li{ color:var(--ink-soft); }
.blog-standfirst{ color:var(--ink-soft); border-bottom-color:var(--line); }
.blog-article em{ color:var(--steel); }
.blog-article a{ color:var(--amber-dark); }          /* #b8791f is unreadable on dark */
.blog-article hr{ border-top-color:var(--line); }
.blog-related{ color:var(--steel) !important; }       /* blog.css uses !important */
.blog-updated{ color:var(--steel) !important; border-bottom-color:var(--line); }

/* inline CTA block (was #1a1a1a — brand it instead) */
.blog-cta{
  background:linear-gradient(180deg, rgba(232,163,61,.13), rgba(232,163,61,.03));
  border:1px solid rgba(232,163,61,.32); color:var(--ink-soft);
}
.blog-cta h3{ color:var(--ink); }
.blog-cta p{ color:var(--ink-soft); }

/* index / guide list */
.blog-index h1{ color:var(--ink); }
.blog-index-sub{ color:var(--ink-soft); border-bottom-color:var(--line); }
.guide-card{ background:var(--panel); border:1px solid var(--line); }
.guide-card:hover{ background:var(--panel-2); border-color:var(--amber);
  box-shadow:0 10px 30px -14px rgba(0,0,0,.9); }
.guide-card h2{ color:var(--ink); }
.guide-card p{ color:var(--ink-soft); }
.guide-tag{ color:var(--amber); }
.m-footer{ border-top-color:var(--line); }
.m-footer p{ color:var(--steel); }

/* ---------- Trainer (protected_app) specifics --------------------------- */
.scenario-tab{ color:var(--steel); border:1px solid var(--line); }
.scenario-tab.active{ border-color:var(--amber); color:#101314; background:var(--amber); }
.step-pill{ color:var(--ink-soft); }
/* SVG diagrams inherit stroke from text colour — keep them visible on dark */
.diagram-box svg{ color:var(--ink); }
.diagram-box svg [stroke]:not([stroke="none"]){ stroke:currentColor; }
.diagram-box svg text{ fill:currentColor; }

/* semantic boxes keep their meaning, tinted for dark */
.why-matters-box{ border:1px solid rgba(232,163,61,.35); border-left:4px solid var(--amber); background:rgba(232,163,61,.08); }
.mistakes-box{ border:1px solid var(--line); border-left:4px solid var(--rust); background:rgba(255,129,99,.08); }

/* --- trainer surfaces that were hardcoded #fff --- */
.gauge, .opt-btn, .quiz-q, .quiz-explain, .prompt-box,
.cert-gate, .locked-notice, .session-picker, .trial-banner{
  background:var(--panel); border-color:var(--line); color:var(--ink-soft);
}
.cert-gate h3, .quiz-q .q-text, .prompt-box, .locked-notice h3, .session-picker h3{ color:var(--ink); }
.opt-btn{ color:var(--ink); }
.opt-btn:hover{ background:var(--panel-2); border-color:var(--amber); }
.quiz-opt{ background:var(--panel); color:var(--ink-soft); border-color:var(--line); }
.quiz-opt:hover:not(:disabled){ background:var(--panel-2); border-color:var(--amber); }
.quiz-opt.correct{ background:rgba(69,196,168,.16); border-color:var(--teal); color:#9ff0da; }
.quiz-opt.wrong{ background:rgba(255,129,99,.16); border-color:var(--rust); color:#ffb3a1; }
.count-btn{ background:var(--panel); color:var(--ink); border-color:var(--line); }
.count-btn:hover{ background:var(--panel-2); border-color:var(--amber); }
.count-btn.active{ background:var(--amber); color:#101314; border-color:var(--amber); }

/* pass/fail result text was dark-on-tint — lighten for dark surfaces */
.result-box.pass{ background:rgba(69,196,168,.14); color:#9ff0da; border:1px solid rgba(69,196,168,.34); }
.result-box.fail{ background:rgba(255,129,99,.14); color:#ffb3a1; border:1px solid rgba(255,129,99,.34); }
.cert-gate li.met{ color:var(--teal); }
.cert-gate li.unmet{ color:var(--rust); }

/* equipment diagram parts */
.d-part rect, .d-part circle, .d-part path, .d-part line{ stroke:var(--steel); fill:var(--panel-2); }
.d-idle{ fill:var(--panel-2); stroke:var(--steel-light); }
.d-hole{ fill:var(--paper); }

/* --- THE CERTIFICATE stays light: it is printed / saved as an image.
   It must therefore pin its own dark text, or it would inherit --ink (light). */
.cert-sheet{
  background:#fff; color:#15191c; border:3px solid #15191c;
}
.cert-sheet h2, .cert-sheet .cert-name, .cert-sheet p,
.cert-sheet .eyebrow, .cert-sheet strong, .cert-sheet li{ color:#15191c; }
.cert-sheet .eyebrow{ color:#a86a1a; }

/* ---------- Forms (login / signup / contact / account) ------------------ */
input, select, textarea{
  background:var(--panel); color:var(--ink);
  border:1px solid var(--line); border-radius:8px;
}
input:focus, select:focus, textarea:focus{
  outline:2px solid var(--amber); outline-offset:1px; border-color:var(--amber);
}
input::placeholder, textarea::placeholder{ color:var(--steel-light); }
label{ color:var(--ink-soft); }
/* browser autofill defaults to a light-blue fill — force it dark */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus{
  -webkit-text-fill-color:var(--ink);
  -webkit-box-shadow:0 0 0 1000px var(--panel) inset;
  caret-color:var(--ink);
}

/* ---------- Auth / account / contact pages ------------------------------
   These pages declare an inline <style> block AFTER this file loads, so the
   overrides below are scoped under `body` to win on specificity (0,1,1). --- */
body .auth-card{
  background:var(--panel);
  border:1px solid var(--line);
  box-shadow:0 20px 60px -30px rgba(0,0,0,.9);
}
body .auth-card h1{ color:var(--ink); }
body .auth-card p.sub, body .auth-toggle{ color:var(--steel); }
body .auth-field label{ color:var(--ink-soft); }
body .auth-field input{
  background:var(--paper); color:var(--ink); border:1.5px solid var(--line); border-radius:8px;
}
body .auth-field input:focus{ border-color:var(--amber); outline:2px solid rgba(232,163,61,.35); outline-offset:0; }
body .auth-toggle button{ color:var(--amber); }

/* status messages: keep the semantics (red = error, green = ok) on dark */
body .auth-error, body .auth-warn{
  background:rgba(255,129,99,.13); color:#ffb3a1; border:1px solid rgba(255,129,99,.34); border-radius:8px;
}
body .auth-notice{
  background:rgba(69,196,168,.13); color:#8ee8d0; border:1px solid rgba(69,196,168,.34); border-radius:8px;
}

/* contact form */
body .contact-form input, body .contact-form textarea{
  background:var(--panel); color:var(--ink); border:1px solid var(--line);
}
body .contact-form input:focus, body .contact-form textarea:focus{ border-color:var(--amber); }
/* pre-existing quirk: the form inherited text-align:center, which centred the
   field labels over left-aligned inputs. Forms read better left-aligned. */
body .contact-form{ text-align:left; }
body .contact-form .contact-or{ text-align:center; }
body .contact-form input, body .contact-form textarea{ border-color:var(--line); }

/* contact page FAQ block hardcodes #1a1a1a / #2a2a2a text */
body .contact-faq h2, body .contact-faq strong{ color:var(--ink); }
body .contact-faq p, body .contact-faq li{ color:var(--ink-soft); }
body .contact-note{ color:var(--steel); }
body .contact-or{ color:var(--steel); }
body .cf-status.ok{ color:#8ee8d0; }
body .cf-status.err{ color:#ffb3a1; }

/* success page next-step panel (inline #f6f7f9) */
body .next-step{ background:var(--panel); border:1px solid var(--line); color:var(--ink-soft); }
body .next-step strong{ color:var(--ink); }

/* blog CTA button is an <a class="btn"> — make sure it gets the amber treatment */
.blog-cta a.btn, a.btn{ background:var(--amber); color:#101314; border-color:var(--amber); }
.blog-cta a.btn:hover, a.btn:hover{ background:var(--amber-dark); color:#101314; }

/* ---------- Tables (team dashboard) ------------------------------------ */
table{ color:var(--ink-soft); border-color:var(--line); }
th{ color:var(--ink); border-bottom:1px solid var(--line); }
td{ border-bottom:1px solid var(--line); }
tr:hover td{ background:rgba(255,255,255,.03); }

/* ---------- Footer / misc ---------------------------------------------- */
.site-footer{ border-top:1px solid var(--line); color:var(--steel); background:transparent; }
hr{ border:0; border-top:1px solid var(--line); }
::selection{ background:rgba(232,163,61,.32); color:#fff; }

/* ---------- Responsive: global nav ------------------------------------
   styles.css keeps .topnav at a fixed 60px height with a non-wrapping
   .nav-links row. On phones the link row (up to 7 items) is wider than the
   viewport and pushes the whole page sideways. Let it wrap instead. ------ */
@media (max-width:760px){
  .topnav .wrap{ height:auto; min-height:56px; flex-wrap:wrap; gap:6px; padding-top:10px; padding-bottom:10px; }
  .nav-links{ flex-wrap:wrap; gap:2px 8px; justify-content:flex-start; width:100%; }
  .nav-links button{ font-size:13px; padding:6px 6px; }
  .brand{ font-size:19px; }
}
/* belt-and-braces: nothing should ever scroll the page sideways */
html, body{ overflow-x:hidden; max-width:100%; }

/* ---------- PRINT: never print a black page ---------------------------- */
@media print{
  :root{
    --paper:#fff; --paper-dim:#f7f5f0; --panel:#fff; --panel-2:#f7f5f0;
    --ink:#15191c; --ink-soft:#2a3138; --steel:#4c5a67; --steel-light:#8a97a3;
    --line:rgba(21,25,28,.18); --teal:#3f7d6b; --rust:#b6462a;
    --teal-bg:#dbe9e2; --rust-bg:#f4ded6; --glow-amber:none;
  }
  html, body{ background:#fff !important; color:#15191c !important; }
  .tag-card,.concept-block,.why-matters-box,.mistakes-box,.glossary-box,
  .scenario-tab,.diagram-box,.feature-card,.price-card,.faq-item{
    background:#fff !important; color:#15191c !important; box-shadow:none !important;
  }
  .btn{ box-shadow:none !important; }
}