/* ==========================================================================
   MIZAN shared dark theme                                            V242
   --------------------------------------------------------------------------
   The homepage already had a complete, visually-proven dark section theme
   (the V54 "duotone layer" in index.css, ~40 rules). It was trapped in one
   stylesheet, which is why index alternated dark and light while every
   interior page stayed cream.

   This file lifts that layer out so all nine pages can use it, then adds
   the handful of components that only exist on interior pages and therefore
   never got a dark counterpart: the tool cards, the proof strip, the
   restraint panel, the week headings, and the beam.

   Loaded AFTER each page's own stylesheet so it wins without !important,
   except where it has to beat an inline style attribute.
   ========================================================================== */

/* ---- surfaces ---------------------------------------------------------- */
[data-theme="dark"] { background: var(--surface-page); color: var(--text-on-dark-soft); }
/* Blanket section fill, but it must not clobber sections that carry their
   own surface. At (0,2,1) it outranked [data-theme="dark"] .freehero at
   (0,2,0) and flattened the newsletter band into the page, losing the raised
   treatment entirely. Any section with its own surface goes in this list. */
[data-theme="dark"] section:not(.thL):not(.freehero):not(.quiet):not(.thD) {
  background: var(--surface-page); color: var(--text-on-dark-soft);
}
[data-theme="dark"] section.freehero,
[data-theme="dark"] section.quiet,
[data-theme="dark"] section.thD { color: var(--text-on-dark-soft); }

/* ---- type -------------------------------------------------------------- */
[data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3, [data-theme="dark"] h4 { color: var(--text-on-dark); }
[data-theme="dark"] p, [data-theme="dark"] li { color: var(--text-body); }
[data-theme="dark"] b, [data-theme="dark"] strong { color: var(--text-on-dark); }
[data-theme="dark"] .eyebrow { color: var(--accent-on-dark); }
[data-theme="dark"] .k, [data-theme="dark"] .kicker { color: var(--accent-on-dark); }
/* These were one group and should be three. Sorted by what they actually
   contain, measured rather than assumed:

     .sub          20 uses, median 29 words  -> lead paragraphs, not captions
     .disclaimer    5 uses, median 60 words  -> legal prose, long enough to
                                                need reading, secondary in tone
     .tbl-note      2 uses, median 20 words  -> same
     .gal-note      1 use,  median  7 words  -> genuine caption
     .foot-attrib   5 uses, median  6 words  -> genuine caption

   Painting a 29-word lead paragraph at caption grey is what made the free
   page intro read dim while everything around it was white. */
[data-theme="dark"] .sub { color: var(--text-body); }
[data-theme="dark"] .disclaimer,
[data-theme="dark"] .tbl-note { color: var(--text-on-dark-muted); }
[data-theme="dark"] .gal-note,
[data-theme="dark"] .foot-attrib { color: var(--text-subtle); }
[data-theme="dark"] .h1-quip { color: var(--text-on-dark-muted); }
/* Text links go green on dark. Buttons must be excluded by class or they
   inherit the link colour on top of their own fill -- which is exactly
   what happened to .verify-btn: light green label on green fill, 2.40:1.
   Any future filled button needs adding here, or better, needs the .btn
   class so it is covered automatically. */
[data-theme="dark"] a:not(.btn):not(.wn):not(.verify-btn):not(.skip):not(.btn-ghost) {
  color: var(--accent-on-dark);
}

/* ---- panels and cards -------------------------------------------------- */
[data-theme="dark"] .card, [data-theme="dark"] .band-card, [data-theme="dark"] .price-card, [data-theme="dark"] .tier,
[data-theme="dark"] .read-box, [data-theme="dark"] .never, [data-theme="dark"] .faq details, [data-theme="dark"] blockquote,
[data-theme="dark"] .restraint, [data-theme="dark"] .ob-steps div, [data-theme="dark"] .score-widget, [data-theme="dark"] .step {
  background: var(--surface-night); border-color: var(--rule-on-dark); box-shadow: none;
}
[data-theme="dark"] .tool, [data-theme="dark"] .proof-strip .ps, [data-theme="dark"] .jump a {
  background: var(--surface-night-2); border-color: var(--rule-on-dark);
}
[data-theme="dark"] .freetools, [data-theme="dark"] section.freetools { background: var(--surface-page); }
[data-theme="dark"] table.cmp, [data-theme="dark"] .tbl-wrap table,
[data-theme="dark"] .tbl-wrap th, [data-theme="dark"] .tbl-wrap td {
  background: var(--surface-night); border-color: var(--rule-on-dark); color: var(--text-on-dark-muted);
}
[data-theme="dark"] table.cmp td.mz, [data-theme="dark"] table.cmp th.mz { background: rgba(84,201,138,.10); }

/* ---- rules and edges --------------------------------------------------- */
[data-theme="dark"] hr, [data-theme="dark"] .read-box, [data-theme="dark"] .figures + .wk-h { border-color: var(--rule-on-dark); }
[data-theme="dark"] .shots3 img, [data-theme="dark"] .shotwrap img, [data-theme="dark"] figure img { border-color: var(--rule-on-night); }
[data-theme="dark"] input[type=email], [data-theme="dark"] input[type=text], [data-theme="dark"] textarea {
  background: var(--surface-night-2); border-color: var(--rule-on-dark-strong); color: var(--text-on-dark);
}

/* ---- components added this session ------------------------------------- */
[data-theme="dark"] .wk-h { color: var(--text-on-dark); }
[data-theme="dark"] .wk-sub { color: var(--text-on-dark-muted); }        /* was #6b6b66: 3.53:1 on dark */
[data-theme="dark"] .beam-pivot { border-block-end-color: var(--rule-on-dark-strong); }
[data-theme="dark"] .where-next a.wn { background: transparent; border-color: var(--rule-on-dark-strong); }
[data-theme="dark"] .where-next a.wn:hover { border-color: var(--accent-on-light); background: rgba(84,201,138,.07); }
[data-theme="dark"] .where-next .k { color: var(--accent-on-dark); }
[data-theme="dark"] .where-next p { color: var(--text-on-dark-muted); }
[data-theme="dark"] .scale-list li::marker { color: var(--warn); }
[data-theme="dark"] .word-no { color: var(--text-on-dark); }

/* ---- ghost buttons ----------------------------------------------------- */
[data-theme="dark"] .btn-ghost, [data-theme="dark"] .btn.ghost {
  border-color: var(--rule-on-dark-strong); color: var(--text-on-dark-soft);
}
[data-theme="dark"] .btn-ghost:hover, [data-theme="dark"] .btn.ghost:hover {
  border-color: var(--accent-on-light); color: var(--accent-on-dark);
}



/* ---- inline-style rescues ----------------------------------------------
   These three colours are written directly into style attributes in the
   markup, so nothing in a stylesheet can reach them without !important.
   Measured against #0f1115 they fail: #1a7f53 = 3.78:1, #6b6b66 = 3.53:1,
   #c23b2e = 3.56:1. Matched by attribute so only the failing values move. */
[data-theme="dark"] [style*="#1a7f53"] { color: var(--accent-on-dark) !important; }
[data-theme="dark"] [style*="#6b6b66"] { color: var(--text-on-dark-muted) !important; }
[data-theme="dark"] [style*="#c23b2e"] { color: #e0705f !important; }

/* ---- bands that were dark-on-light must not vanish dark-on-dark ---------
   .quiet carries an inline background:#0f1115 written into the markup, which
   now equals the page. Lift it to the raised surface so it still reads as a
   separate band. Same for the free-page hero. */
[data-theme="dark"] .quiet,
[data-theme="dark"] .quiet[style] { background: var(--surface-night) !important; }
[data-theme="dark"] .freehero { background: var(--surface-night); }
[data-theme="dark"] section.thD { background: var(--surface-night); }

/* ---- keep the light sections light where a page deliberately alternates - */
[data-theme="dark"] section.thL { background: #fbfbf9; color: #16181c; }
[data-theme="dark"] section.thL h1, [data-theme="dark"] section.thL h2, [data-theme="dark"] section.thL h3,
[data-theme="dark"] section.thL b, [data-theme="dark"] section.thL strong { color: var(--text-strong); }
[data-theme="dark"] section.thL p, [data-theme="dark"] section.thL li { color: var(--text-body); }
[data-theme="dark"] section.thL .eyebrow { color: var(--accent-on-light); }


/* ==========================================================================
   V252 · the parts of a dark site nobody looks at until they bite
   ========================================================================== */

/* Tells the browser this surface is dark, so it renders scrollbars, form
   controls and any UA default in the matching palette instead of light. */
[data-theme="dark"] { color-scheme: dark; }

/* Firefox and Windows otherwise paint a bright scrollbar down the edge of a
   black page. Chromium honours color-scheme; Firefox wants this explicitly. */
[data-theme="dark"] { scrollbar-color: var(--rule-on-dark-strong) var(--surface-page); }

/* Windows High Contrast replaces the palette wholesale. Buttons and rules
   must keep a visible edge once brand colour is stripped out. */
@media (forced-colors: active) {
  .btn, .verify-btn, .btn-ghost, .where-next a.wn, .card, .tool { border: 1px solid; }
  .beam-bar, .beam-pivot { forced-color-adjust: none; }
  .yt-play { border: 1px solid; }
}

/* Print. Every page is dark now, so without this a print or save-as-PDF
   either dumps a solid black page or drops the text entirely. Force paper
   back to black-on-white, drop anything that costs ink and says nothing,
   and expand link targets so a printed page is still usable. */
@media print {
  [data-theme="dark"] { color-scheme: light; }
  html, body, section, .quiet, .card, .tool, .where-next a.wn, footer {
    background: #fff !important; color: #000 !important;
  }
  h1, h2, h3, h4, p, li, figcaption, .eyebrow, .k, .sub { color: #000 !important; }
  nav, .mz-burger, .skip, .yt-play, .foot-soc, .where-next, .beam { display: none !important; }
  a { color: #000 !important; text-decoration: underline; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 10pt; word-break: break-all; }
  figure, .tool, .card { break-inside: avoid; }
  img { max-width: 100% !important; }
}


/* ==========================================================================
   V263 · iOS form controls
   Safari applies its own inner shadow, rounding and background to text
   inputs regardless of what the stylesheet says. Without an appearance
   reset the newsletter field renders as a native iOS control sitting in
   the middle of a custom dark layout. The 16px floor is already set
   elsewhere and stays — below it iOS zooms the whole page on focus.
   ========================================================================== */
input[type="email"], input[type="text"], textarea, select {
  -webkit-appearance: none;
  appearance: none;
  border-radius: 10px;
}
input[type="email"], input[type="text"], textarea {
  /* Safari ignores background-color on inputs unless this is also cleared */
  background-clip: padding-box;
}
/* iOS renders autofilled fields with a hard yellow-white that ignores the
   theme. This is the only way to override it. */
[data-theme="dark"] input:-webkit-autofill,
[data-theme="dark"] input:-webkit-autofill:hover,
[data-theme="dark"] input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--text-strong);
  -webkit-box-shadow: 0 0 0 1000px var(--surface-night-2) inset;
  caret-color: var(--text-strong);
}


/* ==========================================================================
   V264 · the canonical card-link
   Loaded on every dark page after its own stylesheet, so it settles the
   argument between the older per-page hover rules. One border, one wash,
   one lift, one arrow. Motion respects the reduced-motion setting.
   ========================================================================== */
a.sh-card, a.wn, a.ps-link, a.step, a.card, a.band-card {
  transition: border-color .18s ease,
              background-color .18s ease,
              transform .18s cubic-bezier(.2,.7,.3,1);
}
@media (hover: hover) {
  a.sh-card:hover, a.wn:hover, a.ps-link:hover,
  a.step:hover, a.card:hover, a.band-card:hover {
    border-color: var(--cardlink-border);
    background-color: var(--cardlink-wash);
  }
  @media (prefers-reduced-motion: no-preference) {
    a.sh-card:hover, a.wn:hover, a.ps-link:hover,
    a.step:hover, a.card:hover, a.band-card:hover {
      transform: translateY(var(--cardlink-lift));
    }
    a.sh-card:hover::after, a.step:hover::after { transform: translateX(4px); }
  }
}
a.sh-card:focus-visible, a.wn:focus-visible, a.ps-link:focus-visible,
a.step:focus-visible, a.card:focus-visible {
  border-color: var(--cardlink-border);
  background-color: var(--cardlink-wash);
}


/* ==========================================================================
   V265 · card-links on touch
   The canonical hover sits inside @media (hover: hover), which is correct —
   it stops phones latching a hover state. But it meant a tap on a card did
   nothing, while the footer cards DID shade green on iOS purely because
   their older rule was never gated. One worked by accident, the other was
   dead by design.

   :active is the touch equivalent of :hover. Same three tokens, so a tap on
   a phone now produces exactly what a hover produces on a desktop.
   ========================================================================== */
@media (hover: none), (pointer: coarse) {
  a.sh-card:active, a.wn:active, a.ps-link:active,
  a.step:active, a.card:active, a.band-card:active {
    border-color: var(--cardlink-border) !important;
    background-color: var(--cardlink-wash) !important;
    opacity: 1 !important;
  }
  @media (prefers-reduced-motion: no-preference) {
    a.sh-card:active, a.wn:active, a.ps-link:active,
    a.step:active, a.card:active, a.band-card:active {
      transform: translateY(var(--cardlink-lift));
    }
    a.sh-card:active::after, a.step:active::after { transform: translateX(4px); }
  }
}


/* ==========================================================================
   V267 · where the accent goes, and why
   --------------------------------------------------------------------------
   The green had drifted into a per-page decision. The same element was
   accented on one page and not another:

     figcaption b   green on index, but only inside #proof; white on chart
     .k             accented on about/chart/free/methodology, not on index
     .kicker        accented on chart, not on index
     .link          accented on free, not on about

   The rule, applied everywhere from here:

     The accent marks ORIENTATION — the text that tells you what a thing is
     and where it goes. Section eyebrows, card labels, caption metadata, and
     inline links. It never marks a heading or body copy, because if the
     accent lands on everything it stops meaning anything.

     .h1-quip is deliberately NOT accented. "One builder. One word. Zero
     adjustable optimism." is voice, not a label.
   ========================================================================== */
[data-theme="dark"] .eyebrow,
[data-theme="dark"] .page-eyebrow,
[data-theme="dark"] .k,
[data-theme="dark"] .kicker,
[data-theme="dark"] figcaption b,
[data-theme="dark"] .gal-note b,
[data-theme="dark"] a.link,
[data-theme="dark"] .who-k { color: var(--accent-on-dark); }

/* the label inside a card-link follows the same rule */
[data-theme="dark"] a.sh-card .k,
[data-theme="dark"] a.wn .k,
[data-theme="dark"] a.step .n { color: var(--accent-on-dark); }


/* ==========================================================================
   V268 · declarations that were being swallowed
   The cascade check found classes carrying a deliberate colour that never
   reached the page, because a generic rule outranked them:

     .tag .cat-note .shelf-cap .stamp .def   lost to [data-theme="dark"] p
     .link inside the footer                 lost to footer a !important
     .foot-attrib text-align: center         lost to the section left-align

   Each was written on purpose and each was dead. Restated here at a
   specificity that actually wins.
   ========================================================================== */
[data-theme="dark"] p.tag,
[data-theme="dark"] p.cat-note,
[data-theme="dark"] p.shelf-cap,
[data-theme="dark"] p.stamp { color: var(--text-subtle); }

[data-theme="dark"] p.def { color: var(--text-on-dark-muted); }

/* an inline link keeps the accent even inside the footer, where a blanket
   footer a !important was flattening it to muted grey */
[data-theme="dark"] footer a.link,
[data-theme="dark"] footer a.link:visited { color: var(--accent-on-dark) !important; }

/* .foot-attrib is a centred credit line, not body prose */
[data-theme="dark"] p.foot-attrib { text-align: center; }


/* ==========================================================================
   V269 · the line under the h1 carries the accent
   .h1-quip is the page thesis — the one sentence directly beneath the
   headline. "Nothing cherry-picked. Nothing cropped out." on the chart page,
   "One builder. One word. Zero adjustable optimism." on about. It was
   previously classed as voice and left white; it is the most quotable line
   on each page and it earns the accent.

   Deliberately NOT extended to methodology's .sub or index's .hero-sub:
   those are 13 and 24 word intro paragraphs, not a thesis line. Accenting a
   24-word paragraph would spend the colour on body copy.
   ========================================================================== */
[data-theme="dark"] p.h1-quip { color: var(--accent-on-dark); }