/* public/css/dark.css — single source of truth for dark-theme overrides.
   Loaded LAST in BOTH dashboard-v2.html (home) and dashboard-v2-page.html
   (builder + sub-pages), so [data-theme="dark"] rules here win the cascade
   on every dashboard surface without editing the monolith or modular files.

   Architecture + phasing: docs/DARK_MODE_PLAN.md. Prefer the existing tokens
   (var(--paper)/--ink/--hairline...) for override values; only use literal
   dark recipes where a surface needs one (3D buttons, glass).

   Dashboard only. Customer-facing tenant sites / widgets stay light. */

/* ============================================================== */
/* PALETTE — deep WARM espresso near-black (founder 2026-07-18,     */
/* Claude / Lovable screenshots). Supersedes the 2026-06-14 cool    */
/* grey: that #1C1C1F charcoal read flat and "settings-app". The    */
/* trick Claude uses is DEPTH + WARMTH together — a near-black with */
/* a brown-amber undertone reads rich where a cool grey of the same */
/* lightness reads void. The brand terracotta accent pops on it the */
/* way Claude's coral does. Keep any new dark literal in this hue   */
/* family (warm, never blue-grey).                                  */
/* ============================================================== */
[data-theme="dark"] {
  /* Page deep + warm; cards stepped warmly above it so they read.
     (The 2026-06-14 "too near-black" objection was to a COOL #141416 —
     warmth is what makes this depth feel premium instead of empty.) */
  --cream:        #20201F;   /* page background: SAMPLED from the Claude app (founder screenshot 2026-07-18) */
  --cream-2:      #252523;   /* hover surface */
  --cream-3:      #32312E;   /* pressed / deeper */
  --paper:        #262624;   /* card / sheet / input surface (Claude app card tone) */
  --bone:         #302F2C;   /* raised surface within a card (Claude app chip tone) */
  --topband:      #20201F;   /* chrome band = page, reads continuous */

  --ink:          #F4F4F2;   /* primary text: neutral off-white (Claude-app match) */
  --ink-2:        #E4E4E1;
  --ink-mute:     #A6A6A2;   /* secondary text: neutral grey, never cream */
  --ink-soft:     #8A8A86;
  --ink-faint:    #6B6B67;

  /* Hairlines: warm-tinted so dividers sit in the same family (a pure
     white line on a warm surface reads cold). Alphas kept from the
     2026-06-14 bump — they drive every token-based border/divider. */
  --hairline:     rgba(255, 255, 255, 0.12);
  --hairline-2:   rgba(255, 255, 255, 0.17);
  --hairline-3:   rgba(255, 255, 255, 0.26);

  --glass-bg:     rgba(26, 26, 25, 0.82);
  /* accents (--orange, --blue, --green, --red) inherit from :root — the
     brand terracotta reads Claude-coral on the warm black; stays on-brand. */
}

/* Empty-state wave backdrop (.dash-hero-bg). The band-base SVG rect is a
   hardcoded #FEFEFD near-white that fills the whole viewport behind the
   composer = the white top. Darken it to the page bg (CSS `fill` overrides
   the SVG presentation attribute). The orange wave bands stay — on black
   they read like Lovable's bottom aurora. This also un-hides the greeting +
   wordmark, which are light text that was invisible on the white base. */
[data-theme="dark"] .dash-hero-bg .band-base rect { fill: #20201F; }

/* The five wave BANDS re-tint for dark: EMBER HORIZON (founder-picked
   2026-07-18 from the four rendered options). Light mode runs cream ->
   amber -> orange -> rust -> brown downward; that top cream band slabbed
   against the espresso page. Dark inverts the logic: the page melts into
   embers, brightest terracotta at the very bottom edge, so the top of the
   screen stays Claude-calm and the bottom glows. Fills keyed by nth-child
   inside .dash-hero-bg (child 1 = .band-base, 2-6 = the bands top->bottom);
   the `path` fill attribute is overridden by CSS `fill`. Light mode keeps
   the SVG attribute fills untouched. */
[data-theme="dark"] .dash-hero-bg svg:nth-child(2) path { fill: #241F18; }
[data-theme="dark"] .dash-hero-bg svg:nth-child(3) path { fill: #3A2415; }
[data-theme="dark"] .dash-hero-bg svg:nth-child(4) path { fill: #5C2E14; }
[data-theme="dark"] .dash-hero-bg svg:nth-child(5) path { fill: #7E3A16; }
[data-theme="dark"] .dash-hero-bg svg:nth-child(6) path { fill: #DB742A; }

/* ============================================================== */
/* PHASE 1 — Shared chrome (topbar, round buttons, sidebar, drawer) */
/* ============================================================== */

/* Round chrome buttons render as white circles in dark because they hardcode
   a light 3D gradient (linear-gradient(180deg,#FFFFFF 0%,#F8F8F8 100%) + dark
   borders). Flip to a raised dark recipe: dark gradient, light translucent
   borders, light icon. Mirrors the proven load-overlay dark burger. */
[data-theme="dark"] .mob-topbar-burger,
[data-theme="dark"] .side-opener,
[data-theme="dark"] .builder-back-btn,
[data-theme="dark"] .mob-topbar-back,
[data-theme="dark"] .mob-drawer-close {
  background: linear-gradient(180deg, var(--bone) 0%, var(--paper) 100%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-bottom-color: rgba(255, 255, 255, 0.06);
  color: #F7F7F7;
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.32),
    0 2px 1px -1px rgba(0, 0, 0, 0.20),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);
}
[data-theme="dark"] .mob-topbar-burger:hover,
[data-theme="dark"] .side-opener:hover,
[data-theme="dark"] .builder-back-btn:hover,
[data-theme="dark"] .mob-topbar-back:hover,
[data-theme="dark"] .mob-drawer-close:hover {
  background: linear-gradient(180deg, var(--cream-3) 0%, var(--bone) 100%);
  border-color: rgba(255, 255, 255, 0.16);
  color: #FFFFFF;
}
[data-theme="dark"] .mob-topbar-burger:active,
[data-theme="dark"] .side-opener:active,
[data-theme="dark"] .builder-back-btn:active,
[data-theme="dark"] .mob-topbar-back:active,
[data-theme="dark"] .mob-drawer-close:active {
  background: linear-gradient(180deg, var(--paper) 0%, var(--cream) 100%);
  box-shadow:
    0 0 2px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

/* The builder back button carries a text label alongside the glyph. */
[data-theme="dark"] .builder-back-btn,
[data-theme="dark"] .builder-back-btn span { color: #F7F7F7; }

/* Topbar band + its progressive glass: the band already themes via
   --topband, but the glass layers use white-tint gradients that read milky
   on a dark band. Drop them to faint light tints so the frost still reads
   without washing the band out. */
[data-theme="dark"] .mob-topbar-glass {
  background: linear-gradient(180deg,
    rgba(255, 255, 255, 0.04) 0%,
    rgba(255, 255, 255, 0.015) 60%,
    transparent 100%);
}
/* On the home empty state the topbar background computes to a light literal
   (#FEFEFD) that beats the base var(--topband) rule, leaving a white strip
   at the very top. Re-assert the dark band. */
[data-theme="dark"] .mob-topbar {
  background: var(--topband) !important;
  background-color: var(--topband) !important;
}

/* Sidebar / drawer (dashboard-v2-mobile-account.css scopes these under
   #dash-side with a light literal, specificity 1,2,0 — match it with an
   id-scoped override so dark wins). The active "Home" pill was a light
   #ECEAE5 wash with light text = invisible. */
[data-theme="dark"] #dash-side .side-link.is-active {
  background: rgba(255, 255, 255, 0.08);
  color: var(--ink);
}
[data-theme="dark"] #dash-side .side-link:hover {
  background: rgba(255, 255, 255, 0.05);
}
/* The sidebar Search box is a white input in dark. */
/* Carved (inset) search field — the light recipe carves with dark-tint
   inset shadows that vanish on a dark surface, so it read flat. Sunken
   track: deeper than the drawer bg + real black insets. */
[data-theme="dark"] #dash-side .side-link--search,
[data-theme="dark"] #dash-side .side-link--search:hover {
  background: #191918;
  border: 0;
  color: var(--ink-mute);
  box-shadow:
    inset 0 2px 5px -1px rgba(0, 0, 0, 0.6),
    inset 0 1px 1px rgba(0, 0, 0, 0.4),
    inset 0 0 0 1px rgba(0, 0, 0, 0.35),
    inset 0 -1px 0 rgba(255, 255, 255, 0.03);
}

/* Drawer open: the page card's leftward shadow is a dark tint in the
   light sheet (rgba(31,22,17,...)) = invisible on a dark drawer, so the
   drawer read shadeless (founder 2026-07-18). Black shadow + a faint
   light seam give the card a real edge over the sidebar. */
[data-theme="dark"] body.mob-drawer-open .shell > main.dash,
[data-theme="dark"] body.mob-drawer-open .shell > .pg,
[data-theme="dark"] body.mob-drawer-open .shell > .rich-page {
  box-shadow:
    -1px 0 0 0 rgba(255, 255, 255, 0.07),
    -12px 0 30px -6px rgba(0, 0, 0, 0.65);
}

/* The drawer-foot "View plan" pill is a white 3D button. */
[data-theme="dark"] .side-mbar-plan {
  background: linear-gradient(180deg, var(--bone) 0%, var(--paper) 100%);
  border-color: rgba(255, 255, 255, 0.12);
  color: var(--ink);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 1px 2px rgba(0, 0, 0, 0.3);
}

/* ---- Account bottom sheet (.msheet-*, tapped from the avatar) ---- */
[data-theme="dark"] .msheet { background: var(--paper); }
[data-theme="dark"] .msheet-grab { background: var(--hairline-3); }
[data-theme="dark"] .msheet-credits { background: var(--bone); }
[data-theme="dark"] .msheet-credits-bar { background: var(--hairline-2); }
/* plan-ic is bg:var(--ink) (light in dark) with #fff icon = invisible.
   Flip to a raised dark chip with a light glyph. */
[data-theme="dark"] .msheet-plan-ic {
  background: var(--cream-3);
  color: var(--ink);
}
/* The upgrade CTA card is a light cream gradient with dark-orange text. */
[data-theme="dark"] .msheet-plan-cta {
  background: linear-gradient(180deg, rgba(217, 96, 31, 0.16) 0%, rgba(192, 72, 26, 0.10) 100%);
  border-color: rgba(217, 96, 31, 0.30);
}
[data-theme="dark"] .msheet-plan-cta b { color: var(--orange-soft); }
[data-theme="dark"] .msheet-plan-cta > span { color: var(--ink-mute); }
/* The appearance cards (Light/Dark/System) in the account sheet need no dark
   override: their preview swatches are literal, and the border/label/selected
   state use theme-aware vars (--hairline-2 / --ink-mute / --orange). */

/* ============================================================== */
/* PHASE 2 — Surfaces + composer                                   */
/* ============================================================== */

/* Home empty-state composer box hardcodes #ffffff (home-empty.css, scoped
   body.is-empty-dash, specificity 0,2,0). Flip to the dark paper surface. */
[data-theme="dark"] body.is-empty-dash .builder-input-box {
  background: var(--paper);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-bottom-color: rgba(255, 255, 255, 0.06);
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.3),
    0 10px 28px -14px rgba(0, 0, 0, 0.5),
    0 28px 56px -28px rgba(0, 0, 0, 0.4);
}

/* Home "New" news pill — white frost glass + dark hairline. */
[data-theme="dark"] .builder-news-pill {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.12);
  color: var(--ink-2);
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.2),
    0 10px 28px -10px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

/* ---- Local pages suburb editor (bottom sheet on My website) ---- */
/* Editor card shell (white gradient). */
[data-theme="dark"] .lp-card {
  background: linear-gradient(180deg, var(--bone) 0%, var(--paper) 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  border-bottom-color: rgba(255, 255, 255, 0.05) !important;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.3),
    0 4px 12px -6px rgba(0, 0, 0, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}
/* Suburb editor bottom sheet. */
[data-theme="dark"] .lp-sheet-panel,
[data-theme="dark"] .lp-sheet { background: var(--paper); }
[data-theme="dark"] .lp-sheet-x { background: var(--bone); color: var(--ink-mute); }

/* Composer 3D squircle buttons (+, ..., map, mic) — white gradient. */
[data-theme="dark"] .builder-input-action,
[data-theme="dark"] .builder-input-more,
[data-theme="dark"] .builder-input-map,
[data-theme="dark"] .builder-input-mic {
  background: linear-gradient(180deg, var(--bone) 0%, var(--paper) 100%);
  border-color: rgba(255, 255, 255, 0.12);
  color: var(--ink);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 1px 2px rgba(0, 0, 0, 0.3);
}
[data-theme="dark"] .builder-input-action:hover:not(:disabled),
[data-theme="dark"] .builder-input-more:hover:not(:disabled),
[data-theme="dark"] .builder-input-map:hover:not(:disabled),
[data-theme="dark"] .builder-input-mic:hover:not(:disabled) {
  background: linear-gradient(180deg, var(--cream-3) 0%, var(--bone) 100%);
  border-color: rgba(255, 255, 255, 0.16);
}
/* Primary send disc is dark in light theme; on a dark composer it vanishes.
   Invert to a light disc with a dark glyph so it reads as the primary action. */
[data-theme="dark"] .builder-input-send {
  /* Warm cream disc, not cool white — matches the espresso palette. */
  background: linear-gradient(180deg, #FAFAF8 0%, #E8E8E5 100%);
  border-color: rgba(255, 255, 255, 0.2);
  color: #1F1611;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.3),
    0 4px 10px -2px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
[data-theme="dark"] .builder-input-send:hover:not(:disabled) {
  background: linear-gradient(180deg, #FFFFFF 0%, #E0E0DD 100%);
}

/* ---- My website page card ---- */
/* The site card wrapper is light grey; the iframe preview inside it stays
   light (it is the customer's site), but the card chrome + meta go dark. */
/* NOTE: these surfaces get their light colour from JS-INJECTED <style>
   blocks (.ms-page .ms-v2-site-card; #set-notify .sn-title), which are added
   to the DOM at runtime AFTER dark.css and so win specificity ties. Use
   !important here (the injected rules don't use it) to win regardless. */
[data-theme="dark"] .ms-page .ms-v2-site-card {
  background: var(--paper) !important;
  border-color: var(--hairline-2) !important;
}
[data-theme="dark"] .ms-metric-cust__btn {
  background: var(--bone) !important;
  border-color: var(--hairline-2) !important;
  color: var(--ink) !important;
}

/* ---- My website card INTERNALS (espresso pass, founder 2026-07-18). ----
   MS_PAGE_STYLE (dashboard-v2-page-renderers.js) styles these with LIGHT
   !important literals and is injected AFTER this sheet, so DOM order gives
   its !important rules the tie. Every selector here carries the
   [data-theme="dark"] prefix = +1 specificity, which is what actually wins
   against an equal-importance injected rule. Keep the prefix on any rule
   you add to this block. */
[data-theme="dark"] .ms-page .ms-v2-preview {
  background: var(--bone) !important;
  border-color: var(--hairline) !important;
}
/* The iframe FRAME stays white — it shows the customer's light site. Only
   the fade at its bottom edge re-tints so it melts into the dark card. */
[data-theme="dark"] .ms-v2-preview__frame::after {
  background: linear-gradient(to bottom, rgba(48, 47, 44, 0), #302F2C) !important;
}
[data-theme="dark"] .ms-v2-preview__name { color: var(--ink) !important; }
[data-theme="dark"] .ms-v2-preview__url { color: var(--ink-soft) !important; }
[data-theme="dark"] .ms-page .ms-v2-site-card__name { color: var(--ink) !important; }
[data-theme="dark"] .ms-page .ms-v2-site-card__url { color: var(--ink-mute) !important; }
[data-theme="dark"] .ms-page .ms-v2-site-card__url:hover { color: var(--ink) !important; }
[data-theme="dark"] .ms-page .ms-v2-site-card__status { color: var(--ink-2) !important; }
[data-theme="dark"] .ms-page .ms-v2-site-card[data-ms-card-state="empty"] .ms-v2-site-card__status { color: var(--ink-mute) !important; }
[data-theme="dark"] .ms-page .ms-v2-site-card[data-ms-card-state="paused"] .ms-v2-site-card__status { color: #E0A458 !important; }
[data-theme="dark"] .ms-page .ms-v2-site-card__pause {
  color: var(--ink) !important;
  background: linear-gradient(180deg, var(--bone), var(--paper)) !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}
[data-theme="dark"] .ms-page .ms-v2-site-card__pause:hover { background: linear-gradient(180deg, var(--cream-3), var(--bone)) !important; }
[data-theme="dark"] .ms-page .ms-v2-site-card__pause svg { color: var(--ink-mute) !important; }
[data-theme="dark"] .ms-page .ms-v2-link-action { color: var(--ink-mute) !important; }
[data-theme="dark"] .ms-page .ms-v2-link-action:hover { color: var(--ink) !important; background: rgba(255, 255, 255, 0.06) !important; }
[data-theme="dark"] .ms-page .ms-v2-link-action svg { color: var(--ink-soft) !important; }
/* URL strip under the preview + its ghost actions. */
[data-theme="dark"] .ms-v2-url-strip {
  background: var(--bone) !important;
  border-color: var(--hairline) !important;
}
[data-theme="dark"] .ms-v2-url-text { color: var(--ink-2) !important; }
[data-theme="dark"] .ms-page .ms-v2-url-ghost,
[data-theme="dark"] .ms-v2-url-ghost {
  color: var(--ink-2) !important;
  background: linear-gradient(180deg, var(--bone), var(--paper)) !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
  border-bottom-color: rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}
[data-theme="dark"] .ms-page .ms-v2-url-ghost:hover,
[data-theme="dark"] .ms-v2-url-ghost:hover { background: linear-gradient(180deg, var(--cream-3), var(--bone)) !important; }
/* Primary/secondary action pair under the card: primary flips to the light
   cream recipe (same convention as the composer send + recovery primary in
   dark), secondary becomes a raised dark button. */
[data-theme="dark"] .ms-v2-btn-dark {
  color: var(--ink) !important;
  background: linear-gradient(180deg, #3A3A37, #2C2C29) !important;
  border-color: rgba(255, 255, 255, 0.16) !important;
  border-bottom-color: rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}
[data-theme="dark"] .ms-v2-btn-dark:hover { background: linear-gradient(180deg, #434340, #343431) !important; }
[data-theme="dark"] .ms-v2-btn-c2 {
  color: var(--ink) !important;
  background: linear-gradient(180deg, var(--bone), var(--paper)) !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
  border-bottom-color: rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}
[data-theme="dark"] .ms-v2-btn-c2:hover { background: linear-gradient(180deg, var(--cream-3), var(--bone)) !important; }
/* KPI tiles + dropdown pills + generic ghost buttons on the page. */
[data-theme="dark"] .ms-kpi {
  background: linear-gradient(180deg, var(--bone), var(--paper));
  border-color: var(--hairline);
  border-bottom-color: var(--hairline-2);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
[data-theme="dark"] .ms-dd__btn {
  background: linear-gradient(180deg, var(--bone), var(--paper));
  border-color: rgba(255, 255, 255, 0.14);
  border-bottom-color: rgba(255, 255, 255, 0.08);
  color: var(--ink);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
[data-theme="dark"] .ms-page .btn-ghost {
  background: linear-gradient(180deg, var(--bone), var(--paper));
  border-color: rgba(255, 255, 255, 0.14);
  border-bottom-color: rgba(255, 255, 255, 0.08);
  color: var(--ink);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
/* Switch-version row: hardcoded dark-ink label + brown-grey meta on the
   dark card = the founder's "Live version" ghost text. */
[data-theme="dark"] .ms-page .ms-v2-card-switchrow { border-top-color: var(--hairline); }
[data-theme="dark"] .ms-page .ms-v2-card-switchrow__name { color: var(--ink); }
[data-theme="dark"] .ms-page .ms-v2-card-switchrow__text { color: var(--ink-mute); }

/* Search-preview page picker: light pill + var(--ink) text = white-on-white
   in dark (the var flip trap). Dark pill + light chevron. */
[data-theme="dark"] .ms-page .ms-gsnip-pick {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23A9A296' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center, linear-gradient(180deg, var(--bone), var(--paper));
  border-color: rgba(255, 255, 255, 0.14);
  border-bottom-color: rgba(255, 255, 255, 0.08);
  color: var(--ink);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
[data-theme="dark"] .ms-danger-section .ms-danger-title { color: #E05B4A; }

/* ---- My-site round 2 (founder screenshots 2026-07-18): the audit-found
   warm-brown text literals + white surfaces. Audit method: computed-style
   walk in dark-ms-shot.js writes dark-audit.json — re-run it after any
   my-site markup change; a zero-flag audit is the bar. The Google snippet
   preview (.ms-gsnip) stays WHITE deliberately: it previews Google's
   results page. ---- */
/* Warm-brown text literals -> neutral grey ramp. */
[data-theme="dark"] .ms-page .ms-v2-site-card__meta,
[data-theme="dark"] .ms-page .ms-lp-kicker,
[data-theme="dark"] .ms-page .ms-page-chip__p,
[data-theme="dark"] .ms-page .ms-lp-chip__path,
[data-theme="dark"] .ms-page .ms-ana-stat__l,
[data-theme="dark"] .ms-page .ms-gsnip-note { color: var(--ink-soft) !important; }
[data-theme="dark"] .ms-page .ms-sec-lede,
[data-theme="dark"] .ms-page .ms-lp-chip__hint,
[data-theme="dark"] .ms-page .ms-lp-textlink,
[data-theme="dark"] .ms-page .ms-learnmore { color: var(--ink-mute) !important; }
/* Chat bar: white card -> dark card; the small send disc stays light
   (matches the home composer primary disc). */
[data-theme="dark"] .ms-page .ms-chatbar {
  background: var(--paper) !important;
  border-color: var(--hairline) !important;
  box-shadow: 0 10px 30px -14px rgba(0, 0, 0, 0.6) !important;
}
[data-theme="dark"] .ms-page .ms-chatbar__in {
  background: transparent !important;
  color: var(--ink) !important;
}
[data-theme="dark"] .ms-page .ms-chatbar__in::placeholder { color: var(--ink-soft) !important; }
[data-theme="dark"] .ms-page .ms-chatbar__upload {
  background: var(--bone) !important;
  border-color: var(--hairline-2) !important;
  color: var(--ink-2) !important;
}
/* Favicon tiles: white halo -> raised dark tile. */
[data-theme="dark"] .ms-page .ms-v2-brand-favicon,
[data-theme="dark"] .ms-page .ms-favicon-img { background: var(--bone) !important; }
/* Live-pages chips + local-pages buttons: white 3D -> raised dark. */
[data-theme="dark"] .ms-page .ms-page-chip,
[data-theme="dark"] .ms-page .ms-lp-add,
[data-theme="dark"] .ms-page .ms-lp-mini {
  background: linear-gradient(180deg, var(--bone), var(--paper)) !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
  border-bottom-color: rgba(255, 255, 255, 0.08) !important;
  color: var(--ink) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}
/* Suburb cards: white -> dark card. */
[data-theme="dark"] .ms-page .ms-lp-chip {
  background: var(--paper) !important;
  border-color: var(--hairline) !important;
}
[data-theme="dark"] .ms-page .ms-lp-pill--live {
  background: rgba(52, 168, 105, 0.18) !important;
  color: #7ED8A5 !important;
}
[data-theme="dark"] .ms-page .ms-lp-bar { background: rgba(255, 255, 255, 0.10) !important; }
/* Analytics tiles: white gradient cards -> raised dark (kpi recipe). */
[data-theme="dark"] .ms-page .ms-ana-card {
  background: linear-gradient(180deg, var(--bone), var(--paper)) !important;
  border-color: var(--hairline) !important;
  border-bottom-color: var(--hairline-2) !important;
  color: var(--ink) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}
/* Inner text of the darkened surfaces: their light styles set DARK ink
   literals (#1F1611) that were fine on white and vanish on the new dark
   cards — the follow-on class of the same bug. */
[data-theme="dark"] .ms-page .ms-ana-stat__v,
[data-theme="dark"] .ms-page .ms-page-chip__t,
[data-theme="dark"] .ms-page .ms-lp-chip__nm { color: var(--ink) !important; }

/* ── ANALYTICS TIERS (2026-07-19) dark counterparts ──────────────────────
   New Growth panels + section-lock / free-hero / tile-lock chrome carry
   light literals (white cards, cream overlays, warm hairlines, a cream
   heatmap base) that need explicit dark values (light effects never
   inherit). Keep in lockstep with the MS_PAGE_STYLE analytics-tiers block. */
[data-theme="dark"] .ms-ins-panel,
[data-theme="dark"] .ms-ins-sec { border-top-color: var(--hairline-2) !important; }
[data-theme="dark"] .ms-ins-convcard {
  background: linear-gradient(180deg, var(--bone), var(--paper)) !important;
  border-color: var(--hairline) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
}
[data-theme="dark"] .ms-ins-convcard__num { color: var(--ink) !important; }
[data-theme="dark"] .ms-ins-convcard__copy b { color: var(--ink) !important; }
[data-theme="dark"] .ms-ins-delta.up { background: rgba(52, 168, 105, 0.18) !important; color: #7ED8A5 !important; }
[data-theme="dark"] .ms-ins-delta.down { background: rgba(214, 85, 59, 0.22) !important; color: #F0A08C !important; }
[data-theme="dark"] .ms-ins-delta.flat { background: rgba(255, 255, 255, 0.08) !important; color: var(--ink-mute) !important; }
[data-theme="dark"] .ms-ins-egtag { background: rgba(255, 255, 255, 0.09) !important; color: var(--ink-soft) !important; }
/* Heatmap ramp inverts on dark: empty is subtle, busiest is brightest so
   "busy" reads hot instead of dark-on-dark. */
[data-theme="dark"] .ms-page,
[data-theme="dark"] .ms-ins-heat,
[data-theme="dark"] .ms-ins-heat__legend {
  --heat-0: rgba(255, 255, 255, 0.06);
  --heat-1: #1E40AF;
  --heat-2: #2563EB;
  --heat-3: #3B82F6;
  --heat-4: #7CB0FF;
}
[data-theme="dark"] .ms-ins-heat__peak { color: var(--ink) !important; }
/* "More with X" upsell card (2026-07-19) + free-page hero + tile-lock overlays.
   Light literals (white card, translucent-white panel) need dark values. */
[data-theme="dark"] .ms-more-card {
  background: var(--card) !important;
  border-color: var(--hairline) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
}
[data-theme="dark"] .ms-more-card__body {
  background: linear-gradient(180deg, rgba(20, 20, 19, 0.55), rgba(20, 20, 19, 0.84)) !important;
}
[data-theme="dark"] .ms-more-card__t { color: var(--ink) !important; }
[data-theme="dark"] .ms-ana-lock__teaser { color: var(--ink) !important; }
[data-theme="dark"] .ms-ana-lock__panel { background: linear-gradient(180deg, rgba(15, 15, 14, 0.44) 0%, rgba(15, 15, 14, 0.62) 55%, rgba(18, 18, 17, 0.96) 100%) !important; }
[data-theme="dark"] .ms-ana-lock__stage { border-color: var(--hairline) !important; }
/* Missed-call recovery meter (Growth perk) — dark track + label. */
[data-theme="dark"] .ms-mcr-meter__track { background: rgba(255,255,255,0.10) !important; }
[data-theme="dark"] .ms-mcr-meter__n { color: var(--ink) !important; }
[data-theme="dark"] .ms-ana-lock__pill,
[data-theme="dark"] .ms-ana-tile-lock__t {
  background: var(--paper) !important;
  border-color: var(--hairline-2) !important;
  color: var(--ink) !important;
}

/* Home empty-hero ghost icons (+ / mic): home.css pins them to a warm
   #574F45 literal with !important at 0,3,0 — the [data-theme] prefix
   out-specifies it. */
[data-theme="dark"] body.is-empty-dash .dash-empty-form .builder-input-action,
[data-theme="dark"] body.is-empty-dash .dash-empty-form .builder-input-mic {
  color: var(--ink-soft) !important;
  border-color: rgba(255, 255, 255, 0.16) !important;
}
[data-theme="dark"] body.is-empty-dash .dash-empty-form .builder-input-action:hover:not(:disabled),
[data-theme="dark"] body.is-empty-dash .dash-empty-form .builder-input-mic:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(255, 255, 255, 0.24) !important;
}

/* Google snippet preview goes GOOGLE DARK (founder overruled the stays-white
   call): these are Google's own dark-results colours (#202124 surface,
   #8AB4F8 title link, #BDC1C6/#9AA0A6 greys) so the box still honestly
   previews the listing, as a dark-mode Google user sees it. */
[data-theme="dark"] .ms-page .ms-gsnip {
  background: #202124 !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
}
[data-theme="dark"] .ms-page .ms-gsnip-site { color: #E8EAED !important; }
[data-theme="dark"] .ms-page .ms-gsnip-path { color: #9AA0A6 !important; }
[data-theme="dark"] .ms-page .ms-gsnip-title { color: #8AB4F8 !important; }
[data-theme="dark"] .ms-page .ms-gsnip-desc { color: #BDC1C6 !important; }

/* "Written automatically" chip: cream -> quiet dark chip. */
[data-theme="dark"] .ms-page .ms-gsnip-tag {
  background: rgba(255, 255, 255, 0.07) !important;
  color: var(--ink-soft) !important;
}
/* Edit-site pill floating ON the light preview: dark pill reads on any
   site thumbnail and stops the white-blob effect. */
[data-theme="dark"] .ms-page .ms-v2-preview-edit {
  color: var(--ink) !important;
  background: rgba(32, 32, 31, 0.94) !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45) !important;
}

/* "How you look on Google" snippet box (.ms-gsnip) + its edit sheet
   (.ms-gsnip-sheet): DELIBERATELY no dark override. The box previews
   GOOGLE'S WHITE RESULTS PAGE (hardcoded Google literals #1a0dab /
   #202124 / #4d5156 in dashboard-v2-page.css), so it stays light in both
   themes. Do not add dark rules for it. */

/* My Site card inner elements (injected .ms-page styles; need !important). */
[data-theme="dark"] .ms-page .ms-v2-site-card__status { color: var(--ink) !important; }
[data-theme="dark"] .ms-page .ms-v2-site-card__pause {
  background: linear-gradient(180deg, var(--bone), var(--paper)) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  border-bottom-color: rgba(255, 255, 255, 0.06) !important;
  color: var(--ink) !important;
}
[data-theme="dark"] .ms-page .ms-v2-site-card__pause svg { color: var(--ink-mute) !important; }
[data-theme="dark"] .ms-page .ms-v2-site-card__brand .ms-v2-preview__name { color: var(--ink) !important; }
[data-theme="dark"] .ms-page .ms-v2-site-card__url { color: var(--ink-mute) !important; }
/* The light "Open site" secondary button (.ms-v2-btn-c2, injected !important). */
[data-theme="dark"] .ms-v2-btn-c2 {
  background: linear-gradient(180deg, var(--bone), var(--paper)) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  color: var(--ink) !important;
}
[data-theme="dark"] .ms-v2-btn-c2:hover { background: linear-gradient(180deg, var(--cream-3), var(--bone)) !important; }

/* ---- Settings: invisible headings + row titles ---- */
/* .sn-title / .sn-row-name hardcode #1F1611 in injected styles = invisible. */
[data-theme="dark"] .sn-title { color: var(--ink) !important; }
[data-theme="dark"] .sn-row-name { color: var(--ink) !important; }
[data-theme="dark"] .sn-hint a { color: var(--ink) !important; }

/* ---- Settings / account page (.sa, injected #fff cards + #1F1611 text) ---- */
/* 2026-07-17: settings groups are box-less (hairline-divided) in light —
   keep dark box-less too; only the divider colour needs the dark token. */
[data-theme="dark"] .sa .sa-group {
  background: transparent !important;
  border-color: transparent !important;
}
[data-theme="dark"] .sa .sa-group ~ .sa-group { border-top-color: var(--hairline-2) !important; }
[data-theme="dark"] .sa .sa-group-title,
[data-theme="dark"] .sa .sa-row-name,
[data-theme="dark"] .sa .sa-label,
[data-theme="dark"] .sa .sa-theme-name { color: var(--ink) !important; }
[data-theme="dark"] .sa .sa-row-sub,
[data-theme="dark"] .sa .sa-hint { color: var(--ink-mute) !important; }
/* selected theme card: active border is #1F1611 (invisible on dark). */
[data-theme="dark"] .sa .sa-theme-card.is-on { border-color: var(--ink) !important; }
[data-theme="dark"] .sa .sa-theme-card { border-color: var(--hairline-2) !important; }
/* row dividers inside the groups. */
[data-theme="dark"] .sa .sa-row { border-color: var(--hairline) !important; }
[data-theme="dark"] .sa .sa-row + .sa-row { border-top-color: var(--hairline) !important; }
/* sa nested card (linked-account chip) + inputs/selects. */
[data-theme="dark"] .sa .sa-card { background: transparent !important; border-color: transparent !important; }
[data-theme="dark"] .sa .sa-input,
[data-theme="dark"] .sa .sa-select {
  background: var(--paper) !important; color: var(--ink) !important; border-color: var(--hairline-2) !important;
}

/* ============================================================== */
/* PHASE 3 — feature pages (injected #fff cards + #1F1611 text).    */
/* Injected per-page <style> blocks win specificity ties (added at  */
/* runtime after dark.css), so these use !important. Surfaces ->    */
/* dark; titles/values -> light; muted -> ink-mute.                 */
/* ============================================================== */

/* ---- Card / surface backgrounds -> dark paper ---- */
[data-theme="dark"] .recov-card,
[data-theme="dark"] .recov-lock-card,
[data-theme="dark"] .recov-select,
[data-theme="dark"] .qr-row,
[data-theme="dark"] .qr-empty,
[data-theme="dark"] .rp-card,
[data-theme="dark"] .rp-empty,
[data-theme="dark"] .fv2-card,
[data-theme="dark"] .fv2-panel,
[data-theme="dark"] .fv2-lrow,
[data-theme="dark"] .fv2e-card,
[data-theme="dark"] .fv2e-box,
[data-theme="dark"] .fv2e-in,
[data-theme="dark"] .fv2e-ta,
[data-theme="dark"] .fv2e-qin,
[data-theme="dark"] .fv2e-sel,
[data-theme="dark"] .fv2e-slot,
[data-theme="dark"] .fv2e-win,
[data-theme="dark"] .fv2e-tz,
[data-theme="dark"] .fhub-status-card,
[data-theme="dark"] .fhub-textarea,
[data-theme="dark"] .cal-action-btn,
[data-theme="dark"] .drafts-live-card-slim,
[data-theme="dark"] .ld-card,
[data-theme="dark"] .ld-menu,
[data-theme="dark"] .ms-kpi,
[data-theme="dark"] .ms-metric-menu,
[data-theme="dark"] .ms-prepub-input,
[data-theme="dark"] .dm-row,
[data-theme="dark"] .dm-rec,
[data-theme="dark"] .dm-empty,
[data-theme="dark"] .set-billing-header-card,
[data-theme="dark"] .set-billing-pay-card,
[data-theme="dark"] .pay-card,
[data-theme="dark"] .si-card,
[data-theme="dark"] .ss-input,
[data-theme="dark"] .qr-action {
  background: var(--paper) !important;
  border-color: var(--hairline-2) !important;
}

/* ---- Pills / segmented / buttons / bubbles -> raised dark ---- */
[data-theme="dark"] .recov-toggle-pill,
[data-theme="dark"] .recov-btn-c2,
[data-theme="dark"] .recov-sms-bubble,
[data-theme="dark"] .cal-new-btn,
[data-theme="dark"] .cal-pill,
[data-theme="dark"] .fv2-addbtn,
[data-theme="dark"] .fv2e-chip,
[data-theme="dark"] .fv2e-mode,
[data-theme="dark"] .sb-manage-btn,
[data-theme="dark"] .set-btn-ghost,
[data-theme="dark"] .set-mini-intg-connect,
[data-theme="dark"] .set-mini-intg-disconnect,
[data-theme="dark"] .qr-chip,
[data-theme="dark"] .rp-chip,
[data-theme="dark"] .rp-action,
[data-theme="dark"] .dm-btn,
[data-theme="dark"] .ld-menu-btn,
[data-theme="dark"] .ms-dd__btn,
[data-theme="dark"] .ms-v2-qpill,
[data-theme="dark"] .btn-c2 {
  background: var(--bone) !important;
  border-color: var(--hairline-2) !important;
  color: var(--ink) !important;
}

/* ---- Titles / values / labels -> light ink ---- */
[data-theme="dark"] .recov-section-title,
[data-theme="dark"] .recov-kpi-value,
[data-theme="dark"] .recov-big-stat,
[data-theme="dark"] .recov-call-text,
[data-theme="dark"] .recov-lock-title,
[data-theme="dark"] .recov-number-value,
[data-theme="dark"] .recov-radio-label,
[data-theme="dark"] .recov-settings-row__label,
[data-theme="dark"] .recov-sms-bubble,
[data-theme="dark"] .sa-action-title,
[data-theme="dark"] .set-section-title,
[data-theme="dark"] .set-row-name,
[data-theme="dark"] .set-billing-section-title,
[data-theme="dark"] .set-billing-header-tagline,
[data-theme="dark"] .set-billing-pay-text,
[data-theme="dark"] .set-invoice-date,
[data-theme="dark"] .set-invoice-amount,
[data-theme="dark"] .set-billing-upgrade-card-cta,
[data-theme="dark"] .si-name,
[data-theme="dark"] .si-section-title,
[data-theme="dark"] .ss-group-title,
[data-theme="dark"] .ss-hours-day,
[data-theme="dark"] .ss-hours-time,
[data-theme="dark"] .ss-input,
[data-theme="dark"] .ld-name,
[data-theme="dark"] .ld-field__v,
[data-theme="dark"] .ld-act,
[data-theme="dark"] .ld-back,
[data-theme="dark"] .ld-menu__item,
[data-theme="dark"] .empty-title,
[data-theme="dark"] .empty-step-title,
[data-theme="dark"] .row-name { color: var(--ink) !important; }

/* ---- Billing page (#set-billing-scoped, id specificity 1,2,0) ---- */
[data-theme="dark"] #set-billing .set-billing-header-card,
[data-theme="dark"] #set-billing .set-billing-pay-card,
[data-theme="dark"] #set-billing .set-billing-card {
  background: var(--paper) !important;
  border-color: var(--hairline-2) !important;
}
[data-theme="dark"] #set-billing .set-billing-header-tagline,
[data-theme="dark"] #set-billing .set-billing-section-title,
[data-theme="dark"] #set-billing .set-billing-pay-text,
[data-theme="dark"] #set-billing .set-invoice-date,
[data-theme="dark"] #set-billing .set-invoice-amount,
[data-theme="dark"] #set-billing .set-billing-upgrade-card-cta { color: var(--ink) !important; }
[data-theme="dark"] #set-billing .set-btn-ghost,
[data-theme="dark"] #set-billing .sb-manage-btn {
  background: var(--bone) !important;
  border-color: var(--hairline-2) !important;
  color: var(--ink) !important;
}

/* ---- Plan picker sheet (2026-07-18; body-appended, GLOBAL selectors).
   Light literals live in the #set-billing <style> block in the renderer;
   these are their dark counterparts (light effects never inherit). ---- */
[data-theme="dark"] .bs-planpick-panel {
  background: var(--paper) !important;
  box-shadow: 0 -8px 44px rgba(0, 0, 0, 0.5) !important;
}
[data-theme="dark"] .bs-planpick-title,
[data-theme="dark"] .bs-plan-card-name,
[data-theme="dark"] .bs-plan-card-price { color: var(--ink) !important; }
[data-theme="dark"] .bs-plan-card-price small,
[data-theme="dark"] .bs-planpick-note { color: var(--ink-mute) !important; }
[data-theme="dark"] .bs-planpick-x {
  background: var(--bone) !important;
  border-color: var(--hairline-2) !important;
  color: var(--ink) !important;
}
[data-theme="dark"] .bs-plan-card {
  background: var(--bone) !important;
  border-color: var(--hairline-2) !important;
  box-shadow: none !important;
}
[data-theme="dark"] .bs-plan-card.is-current {
  background: var(--cream-3) !important;
  border-color: var(--hairline-3) !important;
}
[data-theme="dark"] .bs-plan-card-badge {
  color: var(--ink) !important;
  background: rgba(255, 255, 255, 0.1) !important;
}
[data-theme="dark"] .bs-plan-feats li { color: var(--ink-mute) !important; }
[data-theme="dark"] .bs-plan-feats li::before { background: rgba(255, 255, 255, 0.3) !important; }
/* Full-width primary CTA: a LIFTED dark button (the light warm-dark gradient
   reads as a low-contrast slab on the espresso card — the my-site lesson). */
[data-theme="dark"] .bs-plan-btn {
  background: linear-gradient(180deg, #3A3A37, #2C2C29) !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
  color: var(--ink) !important;
}
[data-theme="dark"] .bs-plan-btn.is-ghost {
  background: var(--bone) !important;
  border-color: var(--hairline-2) !important;
  color: var(--ink) !important;
  box-shadow: none !important;
}

/* ---- Integrations page (#set-integrations-scoped) ---- */
[data-theme="dark"] #set-integrations .si-card {
  background: var(--paper) !important;
  border-color: var(--hairline-2) !important;
}
[data-theme="dark"] #set-integrations .si-name,
[data-theme="dark"] #set-integrations .si-section-title,
[data-theme="dark"] #set-integrations .set-mini-intg-connect { color: var(--ink) !important; }
[data-theme="dark"] #set-integrations .set-mini-intg-disconnect {
  background: var(--bone) !important;
  border-color: var(--hairline-2) !important;
  color: var(--ink) !important;
}

/* ---- Recovery: active segmented toggle pill (white !important) ---- */
[data-theme="dark"] .recov-toggle-pill.is-on {
  background: linear-gradient(180deg, var(--cream-3), var(--bone)) !important;
  color: var(--ink) !important;
}

/* ---- My website: Danger zone "Delete site" button ---- */
[data-theme="dark"] .ms-danger-btn {
  background: var(--bone) !important;
  border-color: var(--hairline-2) !important;
  color: var(--red) !important;
}

/* ---- Recovery: segmented toggle group + active pill + faint labels ----
   Actual markup is `.recov-page .toggle-group button(.is-on)` (id-ish
   specificity 0,2,0 / 0,3,0) so the overrides must out-scope it. */
[data-theme="dark"] .recov-page .toggle-group,
[data-theme="dark"] .toggle-group {
  background: var(--cream-2) !important;
  border-color: var(--hairline-2) !important;
}
[data-theme="dark"] .recov-page .toggle-group button { color: var(--ink-mute) !important; }
[data-theme="dark"] .recov-page .toggle-group button.is-on {
  background: var(--bone) !important;
  border-color: var(--hairline-2) !important;
  color: var(--ink) !important;
}
[data-theme="dark"] .recov-status-label,
[data-theme="dark"] .recov-select { color: var(--ink) !important; }
[data-theme="dark"] .recov-sms-link-label,
[data-theme="dark"] .recov-recent-label,
[data-theme="dark"] .recov-number-label,
[data-theme="dark"] .recov-section-subtitle,
[data-theme="dark"] .recov-kpi-label { color: var(--ink-mute) !important; }

/* ---- Integrations: Manage / Connect / Disconnect mini buttons ---- */
[data-theme="dark"] .set-mini-intg-disconnect,
[data-theme="dark"] .set-mini-intg-connect {
  color: var(--ink) !important;
  background: var(--bone) !important;
  border-color: var(--hairline-2) !important;
}

/* ============================================================== */
/* PHASE 3d — dividers / borders blending into the dark surface     */
/* Hardcoded rgba(31,22,17,...) borders + 1px divider lines are     */
/* invisible on dark. Recolour to the light hairline token.         */
/* ============================================================== */
[data-theme="dark"] .ms-v2-site-card__header,
[data-theme="dark"] .ms-v2-site-card__actions-secondary,
[data-theme="dark"] .ms-rep-metric,
[data-theme="dark"] .my-site-recent,
[data-theme="dark"] .sa-action-row,
[data-theme="dark"] .sa-section,
[data-theme="dark"] .recov-hairline,
[data-theme="dark"] .recov-radio-row,
[data-theme="dark"] .recov-settings-row,
[data-theme="dark"] .cal-grid-wrap,
[data-theme="dark"] .cal-conn-card,
[data-theme="dark"] .cal-tabs,
[data-theme="dark"] .set-invoice-grid,
[data-theme="dark"] .drafts-row,
[data-theme="dark"] .drafts-newchat-row,
[data-theme="dark"] .drafts-pill,
[data-theme="dark"] .drafts-ring { border-color: var(--hairline-2) !important; }

/* Ghost / outline buttons: these carry a WHITE gradient via background-IMAGE
   (not background-color), so we must reset the image, not just the colour. */
[data-theme="dark"] .recov-btn-ghost,
[data-theme="dark"] .sa-btn-ghost,
[data-theme="dark"] .lp-btn,
[data-theme="dark"] .fd-btn {
  background: var(--bone) !important;
  background-image: none !important;
  border-color: var(--hairline-2) !important;
  color: var(--ink) !important;
}
/* Inputs */
[data-theme="dark"] .lp-input {
  background: var(--paper) !important;
  background-image: none !important;
  border-color: var(--hairline-2) !important;
  color: var(--ink) !important;
}

/* Misc faint helper labels on settings cards. */
[data-theme="dark"] .set-help,
[data-theme="dark"] .sa .set-help { color: var(--ink-mute) !important; }
/* Inline-styled dark text on the account page (e.g. "Business logo" heading
   is <div style="color:#1F1611">). CSS !important beats inline non-important. */
[data-theme="dark"] .sa [style*="color:#1F1611"],
[data-theme="dark"] .sa [style*="color: #1F1611"] { color: var(--ink) !important; }
[data-theme="dark"] .sa [style*="color:#6B5A4C"],
[data-theme="dark"] .sa [style*="color: #6B5A4C"] { color: var(--ink-mute) !important; }

/* Background-based 1px hairline divider elements (height:1px; bg rgba ink) */
[data-theme="dark"] .ms-divider,
[data-theme="dark"] .ms-section-divider,
[data-theme="dark"] .sa-divider,
[data-theme="dark"] .set-hr,
[data-theme="dark"] .recov-rule { background: var(--hairline-2) !important; }

/* Billing invoice row dividers (#set-billing-scoped, id specificity). */
[data-theme="dark"] #set-billing .set-invoice-grid,
[data-theme="dark"] #set-billing .set-invoice-grid + .set-invoice-grid { border-color: var(--hairline-2) !important; }
/* Calendar active tab indicator + drafts card thumb/button borders. */
[data-theme="dark"] .cal-tabs__indicator { background: var(--ink) !important; }
[data-theme="dark"] .drafts-live-card-slim__thumb,
[data-theme="dark"] .drafts-live-card-slim__btn { border-color: var(--hairline-2) !important; }

/* ============================================================== */
/* PHASE 3e — Inbox (/dashboard-v2/inbound) — .leads-v4 scoped     */
/* White cards + #1F1611 names were invisible. All .leads-v4-      */
/* scoped (0,2,0), so overrides must out-scope with .leads-v4.     */
/* ============================================================== */
[data-theme="dark"] .leads-v4 .ld-card,
[data-theme="dark"] .leads-v4 .ld-menu {
  background: var(--paper) !important;
  background-image: none !important;
  border-color: var(--hairline-2) !important;
}
/* Buttons / steps / avatars / menu buttons (white gradient + dark text) */
[data-theme="dark"] .leads-v4 .btn-c2,
[data-theme="dark"] .leads-v4 .ld-act,
[data-theme="dark"] .leads-v4 .ld-back,
[data-theme="dark"] .leads-v4 .ld-menu-btn,
[data-theme="dark"] .leads-v4 .ld-step,
[data-theme="dark"] .leads-v4 .row-avatar--visit,
[data-theme="dark"] .leads-v4 .posthog-icon {
  background: var(--bone) !important;
  background-image: none !important;
  border-color: var(--hairline-2) !important;
  color: var(--ink) !important;
}
/* Names / values / titles -> light */
[data-theme="dark"] .leads-v4 .row-name,
[data-theme="dark"] .leads-v4 .ld-name,
[data-theme="dark"] .leads-v4 .ld-field__v,
[data-theme="dark"] .leads-v4 .ld-menu__item,
[data-theme="dark"] .leads-v4 .empty-title,
[data-theme="dark"] .leads-v4 .empty-step-title,
[data-theme="dark"] .leads-v4 .posthog-title { color: var(--ink) !important; }
/* Inner dividers / photo + map borders */
[data-theme="dark"] .leads-v4 .hr,
[data-theme="dark"] .leads-v4 .ld-map-link,
[data-theme="dark"] .leads-v4 .ld-photo { border-color: var(--hairline-2) !important; }

/* Inbox: list ROWS carry a white gradient via background-IMAGE (probes that
   read background-color miss them). Reset image + dark surface. */
[data-theme="dark"] .leads-v4 .row,
[data-theme="dark"] .leads-v4 .row.is-cancelled {
  background: var(--paper) !important;
  background-image: none !important;
  border-color: var(--hairline-2) !important;
}
/* Inbox filter tabs (All / Needs reply / Bookings / Quotes) */
[data-theme="dark"] .leads-v4 .leads-tabs,
[data-theme="dark"] .leads-tabs { background: var(--cream-2) !important; background-image: none !important; }
[data-theme="dark"] .leads-v4 .leads-tab,
[data-theme="dark"] .leads-tab {
  background: transparent !important;
  background-image: none !important;
  color: var(--ink-mute) !important;
}
[data-theme="dark"] .leads-v4 .leads-tab.is-on,
[data-theme="dark"] .leads-v4 .leads-tab.is-active,
[data-theme="dark"] .leads-v4 .leads-tab[aria-selected="true"],
[data-theme="dark"] .leads-tab.is-on { color: var(--ink) !important; }
[data-theme="dark"] .leads-tab-ind { background: var(--bone) !important; border-color: var(--hairline-2) !important; }

/* Inbox/Drafts filter pills (.drafts-pill). Give them the dark 3D gradient
   like the cards/buttons; the active pill lifts brighter to read as selected. */
[data-theme="dark"] .drafts-filters .drafts-pill,
[data-theme="dark"] .leads-v4 .drafts-pill {
  background: linear-gradient(180deg, var(--bone) 0%, var(--paper) 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  border-bottom-color: rgba(255, 255, 255, 0.05) !important;
  color: var(--ink-mute) !important;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}
[data-theme="dark"] .drafts-filters .drafts-pill.is-on,
[data-theme="dark"] .leads-v4 .drafts-pill.is-on,
[data-theme="dark"] .drafts-filters .drafts-pill[aria-selected="true"],
[data-theme="dark"] .leads-v4 .drafts-pill[aria-selected="true"] {
  background: linear-gradient(180deg, var(--cream-3) 0%, var(--bone) 100%) !important;
  border-color: rgba(255, 255, 255, 0.16) !important;
  color: var(--ink) !important;
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.10) !important;
}

/* ============================================================== */
/* PHASE 3f — feature-page ACTION buttons get the 3D gradient      */
/* (founder 2026-06-14: the chrome 3D is fine, but inbox/feature   */
/* buttons were flattened to plain grey — give them the same       */
/* tactile recipe). Placed last so it wins the earlier flat rules. */
/* Chips/pills/badges/inputs are intentionally NOT included.       */
/* ============================================================== */
[data-theme="dark"] .qr-action,
[data-theme="dark"] .rp-action,
[data-theme="dark"] .leads-v4 .btn-c2,
[data-theme="dark"] .leads-v4 .ld-act,
[data-theme="dark"] .leads-v4 .ld-back,
[data-theme="dark"] .leads-v4 .ld-menu-btn,
[data-theme="dark"] .btn-c2,
[data-theme="dark"] .sb-manage-btn,
[data-theme="dark"] #set-billing .sb-manage-btn,
[data-theme="dark"] .set-btn-ghost,
[data-theme="dark"] #set-billing .set-btn-ghost,
[data-theme="dark"] .set-mini-intg-connect,
[data-theme="dark"] .set-mini-intg-disconnect,
[data-theme="dark"] #set-integrations .set-mini-intg-disconnect,
[data-theme="dark"] .cal-new-btn,
[data-theme="dark"] .fd-btn,
[data-theme="dark"] .fv2-addbtn,
[data-theme="dark"] .dm-btn,
[data-theme="dark"] .recov-btn-c2,
[data-theme="dark"] .recov-btn-ghost,
[data-theme="dark"] .sa-btn-ghost,
[data-theme="dark"] .lp-btn,
[data-theme="dark"] .ms-dd__btn {
  background: linear-gradient(180deg, var(--bone) 0%, var(--paper) 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-bottom-color: rgba(255, 255, 255, 0.06) !important;
  color: var(--ink) !important;
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.32),
    0 2px 1px -1px rgba(0, 0, 0, 0.20),
    inset 0 1px 0 rgba(255, 255, 255, 0.07) !important;
}

/* ============================================================== */
/* PHASE 3g — cards that have the 3D gradient in light get it in   */
/* dark too (founder 2026-06-14: inbox lead cards looked flat).    */
/* Only the cards that used the white card gradient in light:      */
/* .leads-v4 .row, .ms-kpi, forms-editor boxes. Flat-white cards   */
/* stay flat (var(--paper)) by design. Placed last to win.         */
/* ============================================================== */
[data-theme="dark"] .leads-v4 .row,
[data-theme="dark"] .leads-v4 .row.is-cancelled,
[data-theme="dark"] .ms-kpi,
[data-theme="dark"] .fhub-svc,
[data-theme="dark"] .fv2e-box,
[data-theme="dark"] .fv2e-slot,
[data-theme="dark"] .fv2e-win,
[data-theme="dark"] .fv2e-biz {
  background: linear-gradient(180deg, var(--bone) 0%, var(--paper) 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  border-bottom-color: rgba(255, 255, 255, 0.05) !important;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.3),
    0 4px 12px -6px rgba(0, 0, 0, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}

/* ============================================================== */
/* PHASE 3h — Drafts page: list rows + new-website bar + live-card */
/* View button carry white gradients via background-image. Give    */
/* the rows the dark 3D card gradient and the View btn the 3D btn.  */
/* ============================================================== */
[data-theme="dark"] .drafts-row,
[data-theme="dark"] .drafts-newchat-row {
  background: linear-gradient(180deg, var(--bone) 0%, var(--paper) 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  border-bottom-color: rgba(255, 255, 255, 0.05) !important;
  color: var(--ink) !important;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.3),
    0 4px 12px -6px rgba(0, 0, 0, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}
[data-theme="dark"] .drafts-live-card-slim__btn {
  background: linear-gradient(180deg, var(--bone) 0%, var(--paper) 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-bottom-color: rgba(255, 255, 255, 0.06) !important;
  color: var(--ink) !important;
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.07) !important;
}
/* Drafts desktop card grid (2026-07-11 mock B): the new thumb / ghost /
   search surfaces follow the same dark recipe as the rows above. */
[data-theme="dark"] .drafts-card-thumb {
  background: var(--bone) !important;
  border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}
[data-theme="dark"] .drafts-card-thumb--ghost {
  background: repeating-linear-gradient(45deg, var(--bone), var(--bone) 6px, var(--paper) 6px, var(--paper) 12px) !important;
}
[data-theme="dark"] .drafts-card-thumb__ghosttx { color: var(--ink-mute) !important; }
[data-theme="dark"] .drafts-search {
  background: linear-gradient(180deg, var(--bone) 0%, var(--paper) 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  border-bottom-color: rgba(255, 255, 255, 0.05) !important;
  color: var(--ink-mute) !important;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}
[data-theme="dark"] .drafts-search__input { color: var(--ink) !important; }

/* ============================================================== */
/* PHASE 3i — remaining settings pages (Usage, Schedule, Domain)   */
/* + the stubborn integrations Manage button.                      */
/* ============================================================== */
/* Usage */
[data-theme="dark"] .um-meter-label,
[data-theme="dark"] .um-row-name { color: var(--ink) !important; }
[data-theme="dark"] .um-btn,
[data-theme="dark"] #set-usage .um-btn,
[data-theme="dark"] .dm-btn,
[data-theme="dark"] #set-domain .dm-btn {
  background: linear-gradient(180deg, var(--bone) 0%, var(--paper) 100%) !important;
  background-image: linear-gradient(180deg, var(--bone) 0%, var(--paper) 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-bottom-color: rgba(255, 255, 255, 0.06) !important;
  color: var(--ink) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.07) !important;
}
/* Domain */
[data-theme="dark"] .dm-empty-title { color: var(--ink) !important; }
/* Schedule & area */
[data-theme="dark"] .ss-group { background: transparent !important; border-color: transparent !important; }
[data-theme="dark"] .ss-group ~ .ss-group { border-top-color: var(--hairline-2) !important; }
[data-theme="dark"] .ss-label { color: var(--ink) !important; }
[data-theme="dark"] .set-chip {
  background: var(--bone) !important; background-image: none !important;
  border-color: var(--hairline-2) !important; color: var(--ink) !important;
}
[data-theme="dark"] .ss-select {
  background: var(--paper) !important; background-image: none !important;
  border-color: var(--hairline-2) !important; color: var(--ink) !important;
}
/* Integrations "Manage" button — super-specific nuke (the light-mode Stripe
   override hardcodes a white gradient; this out-specifies it in dark). Scoped
   to the redesigned .ic card (was .si-card before the 2026-07 redesign). */
[data-theme="dark"] #set-integrations .ic .set-mini-intg-disconnect,
[data-theme="dark"] #set-integrations .ic .set-mini-intg-connect {
  background: linear-gradient(180deg, var(--bone) 0%, var(--paper) 100%) !important;
  background-image: linear-gradient(180deg, var(--bone) 0%, var(--paper) 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-bottom-color: rgba(255, 255, 255, 0.06) !important;
  color: var(--ink) !important;
}

/* Usage + Domain: id-scoped dark text labels that beat my unscoped rules. */
[data-theme="dark"] #set-usage .um-meter-label,
[data-theme="dark"] #set-usage .um-row-name { color: var(--ink) !important; }
[data-theme="dark"] #set-domain .dm-empty-title { color: var(--ink) !important; }

/* ============================================================== */
/* PHASE 3j — Usage/Domain weird-box + warm text fixes             */
/* set-card/set-block are transparent layout wrappers in light     */
/* (not cards); a paper bg in dark made a boxy shade with no        */
/* outline. Keep them transparent. Neutralise warm-brown muted     */
/* text (#6B5A4C/#8a7866) -> grey. Fix domain light boxes.         */
/* ============================================================== */
[data-theme="dark"] .set-card,
[data-theme="dark"] .set-block { background: transparent !important; border: 0 !important; box-shadow: none !important; }

[data-theme="dark"] #set-usage .um-meter-sub,
[data-theme="dark"] #set-usage .um-pct,
[data-theme="dark"] #set-usage .um-intro,
[data-theme="dark"] #set-usage .um-row-sub,
[data-theme="dark"] .um-meter-sub,
[data-theme="dark"] .um-pct,
[data-theme="dark"] .um-intro,
[data-theme="dark"] .um-row-sub,
[data-theme="dark"] #set-domain .dm-default-sub,
[data-theme="dark"] #set-domain .dm-empty-sub,
[data-theme="dark"] #set-domain .dm-dns-lede,
[data-theme="dark"] #set-domain .dm-dns-hint,
[data-theme="dark"] .dm-default-sub,
[data-theme="dark"] .dm-empty-sub,
[data-theme="dark"] .dm-dns-lede,
[data-theme="dark"] .dm-dns-hint { color: var(--ink-mute) !important; }

[data-theme="dark"] .dm-default {
  background: var(--bone) !important;
  border-color: var(--hairline-2) !important;
}
[data-theme="dark"] .dm-rec { background: var(--paper) !important; border-color: var(--hairline-2) !important; }

/* ============================================================== */
/* Builder intake FORM (re-enabled 2026-06-14) — dark support      */
/* Card/inputs use tokens (dark already). These cover the bits     */
/* that don't: primary button, active CTA pill, chips, photo.      */
/* ============================================================== */
/* Primary "Build my site" — invert to a light button like the send disc. */
[data-theme="dark"] .builder-form-submit {
  background: linear-gradient(180deg, #FAFAF8 0%, #E8E8E5 100%) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
  color: #1F1611 !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 6px 16px -6px rgba(0, 0, 0, 0.4) !important;
}
/* Segmented CTA: active pill light-fill, inactive readable. */
[data-theme="dark"] .builder-form-segmented { background: var(--paper) !important; border-color: var(--hairline-2) !important; }
[data-theme="dark"] .builder-form-seg { color: var(--ink-mute) !important; border-right-color: var(--hairline) !important; }
[data-theme="dark"] .builder-form-seg.is-on { background: var(--ink) !important; color: var(--cream) !important; }
[data-theme="dark"] .builder-form-seg:hover { background: rgba(255, 255, 255, 0.05) !important; color: var(--ink) !important; }
/* Suburb chips. */
[data-theme="dark"] .builder-form-chip { background: var(--bone) !important; border-color: var(--hairline-2) !important; color: var(--ink) !important; }
/* Photo dropzone. */
[data-theme="dark"] .builder-form-photo { background: var(--bone) !important; border-color: var(--hairline-2) !important; }
[data-theme="dark"] .builder-form-photo-pick { color: var(--ink-mute) !important; }
/* Header bar + select inherit tokens; ensure title/step contrast. */
[data-theme="dark"] .builder-form-htitle { color: var(--ink) !important; }
[data-theme="dark"] .builder-form-hstep { color: var(--ink-faint) !important; }

/* ============================================================== */
/* AI thinking pulse — the gradient is hardcoded DARK ink          */
/* (rgba(31,22,17)), invisible on the dark page. Flip the sweep    */
/* to light ink so "Understanding your request" reads in dark.     */
/* (.is-settled + .builder-thinking-eye already use --ink tokens.) */
/* ============================================================== */
[data-theme="dark"] .builder-thinking-pulse {
  background: linear-gradient(
    90deg,
    rgba(244, 244, 245, 1.00)  0%,
    rgba(244, 244, 245, 1.00) 42%,
    rgba(244, 244, 245, 0.22) 50%,
    rgba(244, 244, 245, 1.00) 58%,
    rgba(244, 244, 245, 1.00) 100%
  ) !important;
  background-size: 220% 100% !important;
  background-clip: text !important;
  -webkit-background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
}

/* ── Connectors: MOBILE pillow cards (< 1000px) dark overrides ────────────
   Only the mobile grey literals need flipping; desktop uses tokens already,
   so these are scoped to the same media query to never touch the desktop
   cards. Keep the green/amber status text. */
@media (max-width: 999.98px) {
  [data-theme="dark"] .intg-card,
  [data-theme="dark"] .intg-card:hover,
  [data-theme="dark"] .intg-card.is-quiet { background: var(--paper); }
  [data-theme="dark"] .intg-logo { background: var(--bone); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35); }
  [data-theme="dark"] .intg-logo.is-slack, [data-theme="dark"] .intg-logo.is-teams,
  [data-theme="dark"] .intg-logo.is-discord, [data-theme="dark"] .intg-logo.is-telegram,
  [data-theme="dark"] .intg-logo.is-airtable, [data-theme="dark"] .intg-logo.is-brevo,
  [data-theme="dark"] .intg-logo.is-notion, [data-theme="dark"] .intg-logo.is-hubspot,
  [data-theme="dark"] .intg-logo.is-trello, [data-theme="dark"] .intg-logo.is-monday,
  [data-theme="dark"] .intg-logo.is-xero, [data-theme="dark"] .intg-logo.is-pipedrive {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
  }
  [data-theme="dark"] .intg-desc { color: var(--ink-mute); }
  [data-theme="dark"] .intg-mreason,
  [data-theme="dark"] .intg-mstat.is-warn { color: #E0A458; }
  [data-theme="dark"] .intg-mbtn.is-connect { color: #1F1611; background: linear-gradient(180deg, #FAFAF8, #E8E8E5); }
  [data-theme="dark"] .intg-mbtn.is-manage { color: var(--ink); background: var(--bone); box-shadow: inset 0 0 0 1px var(--hairline-2); }
  [data-theme="dark"] .intg-mbtn.is-soon { color: var(--ink-faint); box-shadow: inset 0 0 0 1px var(--hairline-2); }
}

/* ============================================================== */
/* ALL-PAGES SWEEP (founder 2026-07-18 — "do every other page").  */
/* The my-site audit method run across drafts / analytics / inbox */
/* / settings (schedule-area, account, owner-contact) /           */
/* notifications / connectors / recovery / forms / forms-edit /   */
/* usage / templates / help. Recipes: warm literals -> neutral    */
/* grey ramp; #1F1611 dark-ink -> light ink (the dark-on-dark     */
/* class the walker misses); white boxes -> dark surfaces; white  */
/* segmented controls -> raised-dark. Injected per-page <style>   */
/* blocks + inline styles win DOM-order ties, so every rule uses  */
/* !important and the [data-theme="dark"] prefix (its +1          */
/* specificity is what actually beats the injected/inline rules). */
/* ============================================================== */

/* ---- Warm-brown muted text (#6B5A4C) -> neutral grey ---------- */
[data-theme="dark"] .drafts-tab-empty__sub,
[data-theme="dark"] .ss-group-intro,
[data-theme="dark"] .ss-hint,
[data-theme="dark"] .ss .set-chip-add,
[data-theme="dark"] .sa-group-intro,
[data-theme="dark"] .sa-action-sub,
[data-theme="dark"] .um-h2-tag,
[data-theme="dark"] .um-updated { color: var(--ink-mute) !important; }

/* ---- Warm grey (#A39585) hour separators + list meta -> grey -- */
[data-theme="dark"] .ss-hours-sep,
[data-theme="dark"] .ss-hours-closed,
[data-theme="dark"] .leads-v4 .row-time,
[data-theme="dark"] .row-time { color: var(--ink-soft) !important; }
[data-theme="dark"] .leads-v4 .row-meta,
[data-theme="dark"] .row-meta { color: var(--ink-mute) !important; }

/* ---- Dark warm-ink (#1F1611) text -> light ink (INVISIBLE on   */
/* dark before this: drafts empty title, login email value, the   */
/* inbox job snippet, the service-radius "35km" inline label). -- */
[data-theme="dark"] .drafts-tab-empty__title,
[data-theme="dark"] .sa .sa-value,
[data-theme="dark"] .leads-v4 .row-snip,
[data-theme="dark"] .row-snip { color: var(--ink) !important; }
[data-theme="dark"] .ss [data-radius-label] { color: var(--ink) !important; }

/* ---- Inbox lead-type tags: dark-orange/purple text on a faint   */
/* tint reads dim on dark. Lighten the ink; keep the tint bg. ---- */
[data-theme="dark"] .leads-v4 .row-type--quote,
[data-theme="dark"] .row-type--quote { color: #E58B54 !important; }
[data-theme="dark"] .leads-v4 .row-type--msg,
[data-theme="dark"] .row-type--msg { color: #9c92f0 !important; }
/* Inbox "Needs reply" amber count (#B45309) -> readable warn amber */
[data-theme="dark"] .drafts-pill__n--amber { color: #E0A458 !important; }

/* ---- Schedule & area: business-model segmented control -------- */
/* Unselected was white (#fff); selected was dark-ink (#1F1611)    */
/* which blends into the dark page. Give both the dark segmented    */
/* recipe: quiet inactive, lifted active pill that reads selected. */
[data-theme="dark"] .ss .ss-seg-btn {
  background: var(--paper) !important;
  border-color: var(--hairline-2) !important;
  color: var(--ink-mute) !important;
}
[data-theme="dark"] .ss .ss-seg-btn[aria-pressed="true"] {
  background: linear-gradient(180deg, var(--cream-3), var(--bone)) !important;
  border-color: rgba(255, 255, 255, 0.16) !important;
  color: var(--ink) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

/* ---- Forms editor: sliding segmented INDICATOR was white ------ */
/* (.fv2e-seg-ind, injected <style>). Raised-dark pill; the is-on  */
/* button text already resolves to the light --ink token, so it    */
/* reads once the indicator underneath is dark. */
[data-theme="dark"] .fv2e-seg-ind {
  background: linear-gradient(180deg, var(--bone), var(--paper)) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.07) !important;
}
/* Non-indicator fallback (.has-ind absent): the is-on button's own */
/* white bg. Same raised-dark so a cached bundle never flashes white.*/
[data-theme="dark"] .fv2e-seg button.is-on {
  background: linear-gradient(180deg, var(--bone), var(--paper)) !important;
  color: var(--ink) !important;
}

/* ---- Account: linked-account avatar discs were inline #fff ----- */
/* Brand "G" (blue) + lock glyph stay legible on a raised-dark tile;*/
/* a white disc reads as a light slab on the dark page. Target the  */
/* inline-styled 50%-radius discs inside the linked cards only. */
[data-theme="dark"] .sa [data-linked-google] [style*="border-radius:50%"],
[data-theme="dark"] .sa [data-linked-password] [style*="border-radius:50%"] {
  background: var(--bone) !important;
  border-color: var(--hairline-2) !important;
}

/* Usage: the "Pro" plan tag + "Last updated" line are #set-usage-scoped in the
   injected <style> (id specificity 1,1,0 + !important), so the unscoped sweep
   rule above loses the tie. Re-state id-scoped. */
[data-theme="dark"] #set-usage .um-h2-tag,
[data-theme="dark"] #set-usage .um-updated { color: var(--ink-mute) !important; }

/* Account Appearance segment (Claude-style row, 2026-07-18): the light
   recipe is a grey pill track with a white raised active chip - both are
   light literals in the injected .sa <style>, so they need explicit dark
   counters (the light-effects-never-inherit rule). */
[data-theme="dark"] .sa .sa-seg { background: rgba(255, 255, 255, 0.07) !important; }
[data-theme="dark"] .sa .sa-seg-btn { color: var(--ink-mute) !important; background: transparent !important; }
[data-theme="dark"] .sa .sa-seg-btn.is-on {
  background: var(--cream-3) !important;
  color: var(--ink) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4) !important;
}
/* The linked-account rows are .sa-row now (flattened 2026-07-18); their
   inline-styled discs keep the existing [style*="border-radius:50%"]
   counters above. Google/padlock row names ride .sa-row-name. */
/* Danger row title: the generic .sa-row-name counter would repaint it to
   ink; keep it red, lightened for the dark surface (semantic warm kept). */
[data-theme="dark"] .sa .sa-row-name.sa-danger-name { color: #F87171 !important; }

/* Carved typing boxes (2026-07-18): the light recipe is a warm-tint inset -
   invisible on dark (light effects never inherit). Dark carve = deeper-than-
   card bg + black insets, same as the sidebar search carve. Later in the
   file than the flat var(--paper) input rules above, so these win. */
[data-theme="dark"] .sa .sa-input,
[data-theme="dark"] .ss .ss-input,
[data-theme="dark"] .ss .ss-hours-time,
[data-theme="dark"] .ss .set-hours-row .set-input,
[data-theme="dark"] #set-area [data-blocked-list] .set-tier-row .set-input {
  background: #191918 !important;
  border-color: rgba(255, 255, 255, 0.07) !important;
  color: var(--ink) !important;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5), inset 0 1px 1px rgba(0, 0, 0, 0.3) !important;
}
[data-theme="dark"] .sa .sa-input:focus,
[data-theme="dark"] .ss .ss-input:focus {
  border-color: rgba(255, 255, 255, 0.2) !important;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5), 0 0 0 3px rgba(255, 255, 255, 0.05) !important;
}

/* ================================================================ */
/* GLOBAL CREAM-TEXT COUNTER (generated 2026-07-18, founder "still a  */
/* lot of cream text"). Every warm-GREY text literal (saturation      */
/* r-b <= 40) in the dashboard sheets + injected styles, countered    */
/* to the neutral ramp by lightness tier. SEMANTIC warm colours       */
/* (ambers, reds, brand oranges: r-b > 40) are deliberately kept.     */
/* Regenerate with the scanner in the 2026-07-18 addendum when new    */
/* light styles land. All rules dark-scoped; builder page is          */
/* light-forced so these never touch it.                              */
/* ================================================================ */

[data-theme="dark"] #set-billing .set-invoice-empty,
[data-theme="dark"] #set-domain .dm-row-x,
[data-theme="dark"] .builder-mcq-other input::placeholder,
[data-theme="dark"] .builder-secpane__orderlabel,
[data-theme="dark"] .drafts-card-thumb__ghosttx,
[data-theme="dark"] .drafts-tab-empty__icon,
[data-theme="dark"] .fd-block__count,
[data-theme="dark"] .fd-connection__count,
[data-theme="dark"] .fd-field__hint,
[data-theme="dark"] .fd-field__type,
[data-theme="dark"] .fd-rule__value,
[data-theme="dark"] .fd-svc__pill.is-quote,
[data-theme="dark"] .forms-tab,
[data-theme="dark"] .leads-v4 .empty-rings svg,
[data-theme="dark"] .leads-v4 .ld-empty,
[data-theme="dark"] .leads-v4 .ld-empty-ic,
[data-theme="dark"] .leads-v4 .ld-empty-sub,
[data-theme="dark"] .leads-v4 .row-time,
[data-theme="dark"] .lp-fieldlabel em,
[data-theme="dark"] .lp-manual-sum::before,
[data-theme="dark"] .lp-photo--add,
[data-theme="dark"] .ms-page .ms-ana-stat__l,
[data-theme="dark"] .ms-page .ms-chatbar__chip button,
[data-theme="dark"] .ms-page .ms-chatbar__in::placeholder,
[data-theme="dark"] .ms-page .ms-lp-chip__path,
[data-theme="dark"] .ms-page .ms-lp-kicker,
[data-theme="dark"] .ms-page .ms-page-chip__go,
[data-theme="dark"] .ms-page .ms-page-chip__p,
[data-theme="dark"] .ms-page .ms-v2-link-action svg,
[data-theme="dark"] .ms-page .ms-v2-site-card__meta,
[data-theme="dark"] .ms-replay-modal__close,
[data-theme="dark"] .ms-replay-modal__stage .ms-replay-loading,
[data-theme="dark"] .ms-v2-preview__url,
[data-theme="dark"] .sa .sa-logo,
[data-theme="dark"] .ss .set-chip-x,
[data-theme="dark"] .ss .set-hours-closed,
[data-theme="dark"] .ss .set-hours-sep,
[data-theme="dark"] .ss .set-hours-x,
[data-theme="dark"] .ss .ss-hours-closed,
[data-theme="dark"] .ss .ss-hours-sep {
  color: var(--ink-soft) !important;
}

[data-theme="dark"] #set-domain .dm-btn .dm-soon,
[data-theme="dark"] #set-domain .dm-default-eyebrow,
[data-theme="dark"] #set-domain .dm-dns-hint,
[data-theme="dark"] #set-domain .dm-rec-lbl b,
[data-theme="dark"] #set-domain .dm-search input::placeholder,
[data-theme="dark"] #set-domain .dm-search svg,
[data-theme="dark"] .builder-choice-select-one,
[data-theme="dark"] .builder-choice-skip,
[data-theme="dark"] .builder-edit-popover__tx small,
[data-theme="dark"] .builder-mcq-dismiss,
[data-theme="dark"] .builder-mcq-dismiss:hover,
[data-theme="dark"] .builder-mcq-opt__desc,
[data-theme="dark"] .builder-picker-dock__chip-sub,
[data-theme="dark"] .builder-picker-dock__custom-input::placeholder,
[data-theme="dark"] .builder-picker-dock__hint,
[data-theme="dark"] .builder-picker-dock__review-label,
[data-theme="dark"] .builder-picker-dock__skip,
[data-theme="dark"] .builder-picker-dock__typography-pair,
[data-theme="dark"] .builder-secpane-swaplive__cap,
[data-theme="dark"] .intg-search input::placeholder,
[data-theme="dark"] .intg-search svg,
[data-theme="dark"] .leads-v4 .row-chip.is-lost,
[data-theme="dark"] .lp-faq-del,
[data-theme="dark"] .ms-page .ms-lp-chip__hint,
[data-theme="dark"] .ms-page .ms-lp-pill--needs,
[data-theme="dark"] .ms-page .ms-lp-textlink,
[data-theme="dark"] .ms-page .ms-sec-lede,
[data-theme="dark"] .ms-page .ms-v2-card-switchrow__text {
  color: var(--ink-mute) !important;
}

[data-theme="dark"] #set-billing .set-billing-header-sub,
[data-theme="dark"] #set-billing .set-billing-pay-icon,
[data-theme="dark"] #set-billing .set-billing-payment-none-text,
[data-theme="dark"] #set-billing .set-billing-upgrade-card-price,
[data-theme="dark"] #set-billing .set-invoice-link,
[data-theme="dark"] #set-domain .dm-default-sub,
[data-theme="dark"] #set-domain .dm-dns-lede,
[data-theme="dark"] #set-domain .dm-empty-globe,
[data-theme="dark"] #set-domain .dm-empty-sub,
[data-theme="dark"] #set-notify .sn-hint,
[data-theme="dark"] #set-notify .sn-row-sub,
[data-theme="dark"] .bs-build-anim__card-cap,
[data-theme="dark"] .bs-build-anim__row,
[data-theme="dark"] .builder-picker-dock__chip-sub,
[data-theme="dark"] .builder-picker-dock__hint,
[data-theme="dark"] .builder-picker-dock__navbtn,
[data-theme="dark"] .builder-picker-dock__skip,
[data-theme="dark"] .builder-picker-dock__typography-body,
[data-theme="dark"] .builder-secpane-stg__replay,
[data-theme="dark"] .drafts-tab-empty,
[data-theme="dark"] .drafts-tab-empty__sub,
[data-theme="dark"] .fd-add-row,
[data-theme="dark"] .fd-block__sub,
[data-theme="dark"] .fd-btn--ghost,
[data-theme="dark"] .fd-connection__surface-label,
[data-theme="dark"] .fd-field__hint-link,
[data-theme="dark"] .fd-page-sub,
[data-theme="dark"] .fd-section-link,
[data-theme="dark"] .fd-svc__btn,
[data-theme="dark"] .fd-svc__meta,
[data-theme="dark"] .fd-svc__stats,
[data-theme="dark"] .intg-desc,
[data-theme="dark"] .ld-mcconv .ld-card-title,
[data-theme="dark"] .ld-mcconv .recov-cv-empty,
[data-theme="dark"] .leads-v4 .empty-step-num,
[data-theme="dark"] .leads-v4 .empty-step-sub,
[data-theme="dark"] .leads-v4 .empty-sub,
[data-theme="dark"] .leads-v4 .ld-empty-title,
[data-theme="dark"] .leads-v4 .page-sub,
[data-theme="dark"] .leads-v4 .row-chip.is-meta,
[data-theme="dark"] .leads-v4 .row-pill--booking,
[data-theme="dark"] .leads-v4 .row-pill--cancelled,
[data-theme="dark"] .leads-v4 .row-pill--quote,
[data-theme="dark"] .leads-v4 .row-sub,
[data-theme="dark"] .lp-assist__note,
[data-theme="dark"] .lp-sheet-x,
[data-theme="dark"] .ms-favpick-note,
[data-theme="dark"] .ms-page .ms-chatbar__chip,
[data-theme="dark"] .ms-page .ms-chatbar__upload,
[data-theme="dark"] .ms-page .ms-row-status.is-ink,
[data-theme="dark"] .ms-page .ms-v2-link-action,
[data-theme="dark"] .ms-page .ms-v2-site-card__pause svg,
[data-theme="dark"] .ms-page .ms-v2-site-card__url,
[data-theme="dark"] .ms-v2-url-ghost,
[data-theme="dark"] .ms-v2-url-text,
[data-theme="dark"] .qr-avatar,
[data-theme="dark"] .qr-row-pill,
[data-theme="dark"] .qr-row-pill.is-booked,
[data-theme="dark"] .qr-row-pill.is-quoted,
[data-theme="dark"] .sa .recov-badge,
[data-theme="dark"] .sa .sa-action-sub,
[data-theme="dark"] .sa .sa-btn-ghost,
[data-theme="dark"] .sa .sa-group-intro,
[data-theme="dark"] .sa .sa-hint,
[data-theme="dark"] .sa .sa-row-sub,
[data-theme="dark"] .ss .set-chip-add,
[data-theme="dark"] .ss .ss-group-intro,
[data-theme="dark"] .ss .ss-hint,
[data-theme="dark"] .ss .ss-seg-btn,
[data-theme="dark"] body.is-empty-dash .dash-empty-form .builder-input-action,
[data-theme="dark"] body.is-empty-dash .dash-empty-form .builder-input-mic {
  color: var(--ink-2) !important;
}

/* ============================================================== */
/* CALENDAR week-agenda (/dashboard-v2/calendar) — the 2026-07-18  */
/* "your week" slim redesign. Its CSS is inline in renderCalendar  */
/* (light literals: #fbfbfb card, #1f1611 ink, rgba(31,22,17,...)  */
/* hairlines, dark-ink pill buttons) with no dark support. Sweep   */
/* every surface + its inner text (dark-on-dark otherwise).        */
/* ============================================================== */
[data-theme="dark"] .cal-hdr .cal-range-label { color: var(--ink) !important; }
[data-theme="dark"] .cal-hdr__nav button {
  background: var(--bone) !important;
  border-color: var(--hairline-2) !important;
  color: var(--ink-mute) !important;
  box-shadow: none !important;
}
/* Week strip */
[data-theme="dark"] .cal-wday__dow { color: var(--ink-soft) !important; }
[data-theme="dark"] .cal-wday.is-today .cal-wday__dow { color: var(--ink) !important; }
[data-theme="dark"] .cal-wday__num { color: var(--ink) !important; }
[data-theme="dark"] .cal-wday.is-today .cal-wday__num { box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.30) !important; }
[data-theme="dark"] .cal-wday.is-sel .cal-wday__num {
  background: var(--ink) !important;
  color: var(--cream) !important;
  box-shadow: 0 3px 8px rgba(0,0,0,.45) !important;
}
[data-theme="dark"] .cal-wday.is-today.is-sel .cal-wday__num { box-shadow: 0 3px 8px rgba(0,0,0,.45) !important; }
[data-theme="dark"] .cal-wday__dots i { background: var(--ink) !important; }
/* Day card */
[data-theme="dark"] .cal-agenda { background: var(--paper) !important; border-color: var(--hairline-2) !important; }
[data-theme="dark"] .cal-agenda__head { border-bottom-color: var(--hairline) !important; }
[data-theme="dark"] .cal-agenda__title,
[data-theme="dark"] .cal-job__time,
[data-theme="dark"] .cal-job__name { color: var(--ink) !important; }
[data-theme="dark"] .cal-agenda__title span,
[data-theme="dark"] .cal-job__time svg,
[data-theme="dark"] .cal-job__addr,
[data-theme="dark"] .cal-job__chev { color: var(--ink-soft) !important; }
[data-theme="dark"] .cal-job__type { color: var(--ink-mute) !important; }
[data-theme="dark"] .cal-agenda__count {
  background: var(--bone) !important;
  border-color: var(--hairline) !important;
  color: var(--ink-mute) !important;
}
[data-theme="dark"] .cal-job { border-bottom-color: var(--hairline) !important; }
[data-theme="dark"] .cal-job:active { background: rgba(255,255,255,.03) !important; }
/* is-sm8 rail is near-black (#1f1611) — invisible on the dark card. Lift it. */
[data-theme="dark"] .cal-job--is-sm8 .cal-job__rail { background: var(--ink-soft) !important; }
/* Status pills: neutral group -> raised dark; semantic keep a tinted wash. */
[data-theme="dark"] .cal-job__status.is-quote,
[data-theme="dark"] .cal-job__status.is-block,
[data-theme="dark"] .cal-job__status.is-gcal,
[data-theme="dark"] .cal-job__status.is-sm8 {
  color: var(--ink-mute) !important;
  background: var(--bone) !important;
  box-shadow: inset 0 0 0 1px var(--hairline) !important;
}
[data-theme="dark"] .cal-job__status.is-ok {
  color: #6FD397 !important;
  background: color-mix(in srgb, #2e9e5b 22%, transparent) !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #2e9e5b 42%, transparent) !important;
}
[data-theme="dark"] .cal-job__status.is-pending {
  color: #E4B968 !important;
  background: color-mix(in srgb, #c08a2d 24%, transparent) !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #c08a2d 46%, transparent) !important;
}
/* Empty + failure states */
[data-theme="dark"] .cal-agenda__empty-ic {
  background: var(--bone) !important;
  border-color: var(--hairline-2) !important;
  color: var(--ink-soft) !important;
  box-shadow: none !important;
}
[data-theme="dark"] .cal-agenda__empty-t { color: var(--ink) !important; }
[data-theme="dark"] .cal-agenda__empty-s { color: var(--ink-soft) !important; }
[data-theme="dark"] .cal-agenda__empty-btn {
  background: var(--bone) !important;
  background-image: none !important;
  border-color: var(--hairline-2) !important;
  color: var(--ink) !important;
  box-shadow: none !important;
}
/* Loading skeleton shimmer -> light alphas on the dark card */
[data-theme="dark"] .cal-skel-row { border-bottom-color: var(--hairline) !important; }
[data-theme="dark"] .cal-skel-rail { background: rgba(255,255,255,.09) !important; }
[data-theme="dark"] .cal-skel-line {
  background: linear-gradient(90deg, rgba(255,255,255,.06) 25%, rgba(255,255,255,.13) 37%, rgba(255,255,255,.06) 63%) !important;
  background-size: 400% 100% !important;
}
/* Flat link rows */
[data-theme="dark"] .cal-links { border-top-color: var(--hairline-2) !important; }
[data-theme="dark"] .cal-linkrow + .cal-linkrow { border-top-color: var(--hairline) !important; }
[data-theme="dark"] .cal-linkrow__nm { color: var(--ink) !important; }
[data-theme="dark"] .cal-linkrow__sub { color: var(--ink-mute) !important; }
[data-theme="dark"] .cal-linkrow .cal-navchev { color: var(--ink-soft) !important; }
[data-theme="dark"] .cal-linkrow:active { background: rgba(255,255,255,.03) !important; }