/* Light theme fixes for the phone pages. Loaded last so it wins over each
   page's own colours. Only applies under html[data-theme="light"], which
   cf-theme.js sets on phones. Most surfaces already follow the tokens in
   cutflux-tokens.css; this file covers the colours pages hard-code. */

/* ---- the Light / Dark switch (any page) ---- */
.cf-theme-switch { display: inline-flex; align-items: center; gap: 4px; padding: 3px; border-radius: 9999px;
  background: var(--cf-surface); border: 1px solid var(--cf-border); }
.cf-theme-switch .cf-theme-lbl { font-size: 12px; font-weight: 700; color: var(--cf-text-3); padding: 0 6px 0 8px; }
.cf-theme-switch button { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px;
  border: 0; border-radius: 9999px; background: transparent; color: var(--cf-text-2);
  font: 700 12.5px var(--cf-font); cursor: pointer; transition: background var(--cf-t-fast), color var(--cf-t-fast); }
.cf-theme-switch button[aria-pressed="true"] { background: var(--cf-accent); color: #fff; }

/* ---- page ground ---- */
html[data-theme="light"],
html[data-theme="light"] body { background: var(--cf-bg) !important; }

/* ---- bars that were hard-coded #0A0A0D (headers, tab bars, action rows) ---- */
html[data-theme="light"] header.hdr,
html[data-theme="light"] nav.tbar,
html[data-theme="light"] .cf-copy-bar,
html[data-theme="light"] header.topbar,
html[data-theme="light"] nav.sidebar,
html[data-theme="light"] #cfGoRow,
html[data-theme="light"] .cf-go {
  background: rgba(255, 255, 255, 0.92) !important;
  border-color: var(--cf-border) !important;
  color: var(--cf-text);
  -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px);
}
html[data-theme="light"] .cf-copy-bar h1,
html[data-theme="light"] header.hdr h1 { color: var(--cf-text) !important; }

/* ---- copy-edit cards ---- */
html[data-theme="light"] .ce-up-card { background: var(--cf-card) !important; border-color: var(--cf-border) !important; box-shadow: var(--cf-shadow-md); }
html[data-theme="light"] .ce-up-card b { color: var(--cf-text) !important; }
html[data-theme="light"] .cf-swirl-core { background: var(--cf-card) !important; }
html[data-theme="light"] .cf-swirl-pct { color: var(--cf-text) !important; }
html[data-theme="light"] .cf-copy-hero h1 { color: var(--cf-text) !important; }

/* ---- pricing ---- */
html[data-theme="light"] body > header {
  background: rgba(255, 255, 255, 0.92) !important; border-color: var(--cf-border) !important;
  -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px);
}
html[data-theme="light"] body > header span { color: var(--cf-text) !important; }

/* ---- where the switch lives ---- */
.cf-head-theme { margin-left: auto; margin-right: 10px; display: inline-flex; }
.cf-head-theme .cf-theme-switch span { display: none; }            /* icons only in the sign-in header */
.cf-head-theme .cf-theme-switch button { padding: 0 9px; height: 28px; }
.dr-theme { padding: 4px 12px 10px; }

/* ---- "Pick your look" card (home, first visit) ---- */
.cf-look { position: fixed; inset: 0; z-index: 2147483600; display: flex; align-items: flex-end; justify-content: center;
  background: rgba(8, 10, 16, 0); transition: background 200ms ease; padding: 0 12px calc(env(safe-area-inset-bottom, 0px) + 12px); }
.cf-look.open { background: rgba(8, 10, 16, 0.45); }
.cf-look[hidden] { display: none; }
.cf-look-card { width: 100%; max-width: 420px; background: var(--cf-panel); color: var(--cf-text); border: 1px solid var(--cf-border);
  border-radius: 20px; padding: 20px 18px 18px; box-shadow: var(--cf-shadow-lg);
  transform: translateY(30px); opacity: 0; transition: transform 220ms cubic-bezier(.2,.8,.25,1), opacity 180ms ease; }
.cf-look.open .cf-look-card { transform: none; opacity: 1; }
.cf-look-card h3 { margin: 0 0 4px; font: 800 18px var(--cf-font); }
.cf-look-card p { margin: 0 0 16px; color: var(--cf-text-3); font-size: 13px; }
.cf-look-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cf-look-opt { display: flex; flex-direction: column; gap: 8px; align-items: center; padding: 10px; border-radius: 14px;
  border: 2px solid var(--cf-border); background: var(--cf-surface); color: var(--cf-text); cursor: pointer; font: 700 14px var(--cf-font); }
.cf-look-opt:active { transform: scale(.98); }
.cf-look-prev { width: 100%; aspect-ratio: 4 / 5; border-radius: 10px; display: flex; flex-direction: column; gap: 6px; padding: 10px; box-sizing: border-box; }
.cf-look-prev i { display: block; height: 14%; border-radius: 6px; }
.cf-look-prev i:first-child { height: 34%; }
.cf-look-prev.light { background: #F7F8FB; border: 1px solid #E3E6EC; }
.cf-look-prev.light i { background: #FFFFFF; box-shadow: 0 1px 3px rgba(16,24,40,.12); }
.cf-look-prev.light i:last-child { background: #2563EB; }
.cf-look-prev.dark { background: #0A0A0D; border: 1px solid #2A2C36; }
.cf-look-prev.dark i { background: #1A1B22; }
.cf-look-prev.dark i:last-child { background: #3B82F6; }

/* ---- some things stay dark (owner 2026-10-29: "some of the buttons stay dark, not the whole page white") ----
   The tool tiles and the bottom tab bar keep the dark look in light mode, so the page has weight instead of being
   all white. Everything else stays light. */
html[data-theme="light"] .tool-sq { background: #111218 !important; border-color: #111218 !important; color: #fff !important; box-shadow: 0 6px 16px rgba(10, 10, 13, .14) !important; }
html[data-theme="light"] .tool-sq * { color: #fff !important; }
html[data-theme="light"] .tool-sq .tool-sq-ic { background: rgba(255, 255, 255, .10) !important; color: #fff !important; border-color: transparent !important; }
html[data-theme="light"] nav.tbar { background: rgba(14, 15, 20, .94) !important; border-color: #1F2128 !important; }
html[data-theme="light"] nav.tbar .tbar-item { color: rgba(255, 255, 255, .62) !important; }
html[data-theme="light"] nav.tbar .tbar-item.is-on { color: #fff !important; }
html[data-theme="light"] nav.tbar .tbar-item .tbar-ic { background: rgba(255, 255, 255, .08) !important; border-color: transparent !important; color: inherit !important; }
html[data-theme="light"] nav.tbar .tbar-item.is-on .tbar-ic { background: var(--cf-accent) !important; color: #fff !important; }
html[data-theme="light"] nav.tbar .tbar-item > span:not(.tbar-ic), html[data-theme="light"] nav.tbar .tbar-item .tbar-lbl { color: inherit !important; }

/* audit 2026-10-31 */
html[data-theme="light"] .cf-tbar { background: #0E0F14 !important; border-color: #1F2128 !important; -webkit-backdrop-filter: none; backdrop-filter: none; }
html[data-theme="light"] .cf-tbar .cf-tbar-item { color: rgba(255,255,255,.62) !important; }
html[data-theme="light"] .cf-tbar .cf-tbar-item.is-on { color: #fff !important; }
html[data-theme="light"] .cf-tbar .cf-tbar-lbl { color: inherit !important; }
html[data-theme="light"] .cf-tbar .cf-tbar-ic { background: rgba(255,255,255,.08) !important; border-color: transparent !important; color: inherit !important; }
html[data-theme="light"] .cf-tbar .cf-tbar-item.is-on .cf-tbar-ic { background: var(--cf-accent) !important; color: #fff !important; }
html[data-theme="light"] nav.tbar { background: #0E0F14 !important; }
html[data-theme="light"] .btn-danger, html[data-theme="light"] .section.is-danger .section-head h2, html[data-theme="light"] .side-link.is-danger { color: #DC2626 !important; }
html[data-theme="light"] .clip-star { color: #fff; background: rgba(6,8,15,.7); }