/* Cutflux phone polish (2026-10-22 overnight pass). Loaded LAST on the phone
   pages: mobile, login, settings, pricing, copy-edit, photo-montage,
   photo-enhance. NOT on beat-editor.html or beat-timeline.html: the owner
   wants the editor exactly as it is.

   Rules this file enforces (from the research pass):
   - readable text is never under 12px; labels that were 9-11px go to 12,
     eyebrow/mono tags to 11px with wide tracking (decorative, not read)
   - body 15-16px with 1.45-1.55 line height, headings 1.1-1.2
   - 4.5:1 for text, 3:1 for controls, in BOTH themes
   - one header pattern, one primary button, one card, one tab bar
   - every state change inside a tool fades in instead of popping */

/* ---------- 1. type ---------- */
body.lyrc-app, .cf-copy-page { -webkit-text-size-adjust: 100%; }
.cf-tbar-lbl, .tbar-lbl { font-size: 11px !important; letter-spacing: .01em; }

/* dark theme: the faintest text step was 2.6:1; 45% is 4.5:1 on the dark ground */
html:not([data-theme="light"]) body.lyrc-app, html:not([data-theme="light"]) .cf-copy-page { --cf-text-4: rgba(255, 255, 255, 0.45); }

/* ---------- 2. one header pattern across the tools ---------- */
.cf-copy-bar, .pm-app .hdr, .app > .hdr {
  min-height: 56px; padding-top: calc(env(safe-area-inset-top, 0px) + 8px) !important; padding-bottom: 8px !important;
}
.cf-copy-brand { font-size: 15px !important; font-weight: 800 !important; letter-spacing: -.01em; }

/* ---------- 3. primary button ---------- */
.sb-bt-btn--primary, .pm-cover-cta, .ce-cover-cta, .pick-hint, .hdr-export:not([disabled]), .cf-go-btn { font-weight: 800; letter-spacing: -.005em; }
.sb-bt-btn--primary:active, .pm-cover-cta:active, .ce-cover-cta:active, .cf-go-btn:active { transform: scale(.98); }

/* ---------- 4. sheets on the light theme need a shadow to lift off the page ---------- */
html[data-theme="light"] .sheet { box-shadow: 0 -12px 40px rgba(16, 24, 40, .14); }

/* ---------- 5. state changes fade in (no pops) ---------- */
@keyframes cfStageIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.cf-copy-shell[data-stage="setup"] .cf-copy-hero,
.cf-copy-shell[data-stage="setup"] #cfPair,
.cf-copy-shell[data-stage="setup"] #cfGoRow,
.cf-copy-shell[data-stage="result"] .cf-studio,
.cf-copy-shell[data-stage="play"] .cf-studio,
.cf-copy-shell[data-stage="edit"] .cf-ed,
.work:not([hidden]), .pe-intro:not([hidden]) { animation: cfStageIn .32s cubic-bezier(.2, .8, .25, 1) both; }
@media (prefers-reduced-motion: reduce) { .cf-copy-shell *, .work, .pe-intro { animation: none !important; } }

/* ---------- 6. copy-edit: the real flow after Start copying ---------- */
.cf-copy-hero h1 { font-size: 26px !important; line-height: 1.1 !important; letter-spacing: -.03em; }
.cf-copy-hero p { font-size: 15px !important; line-height: 1.5 !important; color: var(--cf-text-2) !important; }
.cf-pair-tag { font-size: 11px !important; letter-spacing: .12em !important; color: var(--cf-text-3) !important; }
.cf-pair .cf-drop h2 { font-size: 17px !important; letter-spacing: -.015em; }
.cf-pair-status { font-size: 14px !important; line-height: 1.4 !important; }
.cf-link-text { font-size: 12px !important; }
.cf-go-hint { font-size: 14px !important; }
.cf-swirl-lbl { font-size: 12.5px !important; }
.cf-res-stat dt, .cfm-facts dt, .cf-tl-label { font-size: 11px !important; letter-spacing: .12em !important; }
.cf-tl-binhint, .cf-tl-insp-sub, .cf-tl-pv-note { font-size: 12.5px !important; }
.cf-tl-head { font-size: 11px !important; }
html[data-theme="light"] .cf-pair .cf-drop { background: var(--cf-card) !important; border-color: var(--cf-border) !important; box-shadow: var(--cf-shadow-sm); }
html[data-theme="light"] .cf-pair .cf-drop:hover { border-color: var(--cf-accent) !important; }
html[data-theme="light"] .cf-pair-art { background: var(--cf-surface); }
html[data-theme="light"] .cf-pair-art--ref .f, html[data-theme="light"] .cf-pair-art--foot .p { background: #E3E8F2; border-color: #C9D1DE; }
html[data-theme="light"] .cf-pair-art--ref .f3, html[data-theme="light"] .cf-pair-art--foot .p2 { background: #DCE8FF; border-color: var(--cf-accent); }
html[data-theme="light"] .cf-pair .cf-drop.is-loaded .cf-pair-tag, html[data-theme="light"] .cf-pair .cf-drop.is-loaded .cf-pair-status { color: var(--cf-accent) !important; }
html[data-theme="light"] .cf-link-node { background: var(--cf-card); border-color: var(--cf-border); color: var(--cf-text-3); }
html[data-theme="light"] .cf-link-text { color: var(--cf-text-3); background: var(--cf-bg); }
html[data-theme="light"] .cf-link-line { background: repeating-linear-gradient(90deg, #C3C8D3 0 6px, transparent 6px 12px); }
@media (max-width: 720px) { html[data-theme="light"] .cf-link-line { background: repeating-linear-gradient(180deg, #C3C8D3 0 6px, transparent 6px 12px); } }
html[data-theme="light"] .cf-pair-link.is-ready .cf-link-text { color: var(--cf-accent); }
html[data-theme="light"] .cf-art-row span { background-color: #E3E8F2; border-color: #C9D1DE; }

/* copy-edit motion layer + build veil on the light theme (the veil was a 90%
   black screen between two light screens: the flash the owner would see) */
html[data-theme="light"] body .cf-copy-shell {
  --cfm-canvas: var(--cf-bg); --cfm-timeline: var(--cf-surface); --cfm-card: var(--cf-card); --cfm-raised: var(--cf-card); --cfm-hover: var(--cf-hover);
  --cfm-line: var(--cf-border-subtle); --cfm-line-strong: var(--cf-border);
  --cfm-text: var(--cf-text); --cfm-dim: var(--cf-text-2); --cfm-faint: var(--cf-text-3); --cfm-ghost: var(--cf-text-4);
  --cfm-accent: var(--cf-accent); --cfm-accent-soft: var(--cf-accent-soft); --cfm-accent-line: color-mix(in srgb, var(--cf-accent) 45%, transparent); --cfm-ok: var(--cf-ok);
}
html[data-theme="light"] .cf-asm-veil { background: rgba(247, 248, 251, .94) !important; }
html[data-theme="light"] .cf-asm-label { color: var(--cf-text-2) !important; }
html[data-theme="light"] .cf-asm-tile { border-color: rgba(12, 14, 22, .14) !important; box-shadow: 0 4px 14px rgba(16, 24, 40, .18) !important; }
html[data-theme="light"] .cf-asm-card { box-shadow: 0 20px 60px rgba(16, 24, 40, .25), 0 0 0 4px var(--cf-accent-soft) !important; }
html[data-theme="light"] .cf-suck-chip { background-color: var(--cf-card) !important; color: var(--cf-text) !important; box-shadow: 0 12px 34px rgba(16, 24, 40, .25), 0 0 22px var(--cf-accent-soft) !important; }

/* copy-edit result screen on the light theme */
html[data-theme="light"] .cf-res-side { background: var(--cf-card) !important; border-color: var(--cf-border) !important; box-shadow: var(--cf-shadow-sm); }
html[data-theme="light"] .cf-res-stat { background: var(--cf-surface) !important; border-color: var(--cf-border) !important; }
html[data-theme="light"] .cf-res-stat dt { color: var(--cf-text-3) !important; }
html[data-theme="light"] .cf-res-stat dd { color: var(--cf-text) !important; }
html[data-theme="light"] .cf-res-badge { background: rgba(4, 120, 87, .12) !important; color: #047857 !important; opacity: 1 !important; }
html[data-theme="light"] .cf-res-frame { border-color: var(--cf-border) !important; box-shadow: var(--cf-shadow-lg) !important; }
html[data-theme="light"] .cf-res-note, html[data-theme="light"] .cf-res-side p { color: var(--cf-text-2) !important; }
.cf-res-badge { opacity: 1 !important; }

/* ---------- 7. photo montage ---------- */
/* cover on the shared pattern (copy-edit-cover.css supplies cv-* / ce-cover) */
.pm-cover.ce-cover { bottom: calc(env(safe-area-inset-bottom, 0px) + 68px); }
.pm-cover .pm-cover-inner.ce-cover-inner { gap: 14px; }
.pm-cover .ce-demo.pm-demo { width: min(72vw, 290px, calc((100dvh - 400px) * 9 / 15)); }
.pm-cover .pm-cp-story {
  width: 100% !important; max-height: none !important; aspect-ratio: auto !important; position: absolute !important; inset: 0 !important;
  margin: 0 !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; background: transparent !important;
}
.pm-cover .pm-cp-stage { background: transparent !important; }
.pm-cover .pm-cp-steps { position: absolute !important; left: 0; right: 0; top: 14px; width: auto !important; height: 40px !important; z-index: 6; margin: 0 !important; pointer-events: none; }
.pm-cover .pm-cp-steps b { font-size: 13px !important; color: var(--st-fg) !important; }
.pm-cover .pm-cp-steps i { font-size: 11px !important; letter-spacing: .14em !important; color: var(--st-fg2) !important; }
.pm-cover .pm-cp-select-all { font-size: 11px !important; letter-spacing: .12em !important; }
.pm-steps .cv-step:nth-child(1) i b { animation: pmBar1 12s linear infinite; }
.pm-steps .cv-step:nth-child(2) i b { animation: pmBar2 12s linear infinite; }
.pm-steps .cv-step:nth-child(3) i b { animation: pmBar3 12s linear infinite; }
.pm-steps .cv-step:nth-child(4) i b { animation: pmBar4 12s linear infinite; }
.pm-steps .cv-step:nth-child(1) { animation: pmOn1 12s steps(1) infinite; }
.pm-steps .cv-step:nth-child(2) { animation: pmOn2 12s steps(1) infinite; }
.pm-steps .cv-step:nth-child(3) { animation: pmOn3 12s steps(1) infinite; }
.pm-steps .cv-step:nth-child(4) { animation: pmOn4 12s steps(1) infinite; }
@keyframes pmBar1 { 0% { width: 0 } 25% { width: 100% } 100% { width: 100% } }
@keyframes pmBar2 { 0%, 25% { width: 0 } 50% { width: 100% } 100% { width: 100% } }
@keyframes pmBar3 { 0%, 50% { width: 0 } 75% { width: 100% } 100% { width: 100% } }
@keyframes pmBar4 { 0%, 75% { width: 0 } 100% { width: 100% } }
@keyframes pmOn1 { 0% { color: var(--cv-fg) } 25% { color: var(--cv-fg3) } }
@keyframes pmOn2 { 0% { color: var(--cv-fg3) } 25% { color: var(--cv-fg) } 50% { color: var(--cv-fg3) } }
@keyframes pmOn3 { 0% { color: var(--cv-fg3) } 50% { color: var(--cv-fg) } 75% { color: var(--cv-fg3) } }
@keyframes pmOn4 { 0% { color: var(--cv-fg3) } 75% { color: var(--cv-fg) } 100% { color: var(--cv-fg) } }
.pm-cover .pm-cover-cta.ce-cover-cta { margin: 0; }
@media (min-width: 900px) { .pm-cover .ce-demo.pm-demo { width: 300px; } }
/* inside the montage tool: labels up to the floor */
.pm-app .stage-empty-step .txt, .pm-app .pm-meta, .pm-dn-meta, .pm-music-start-val { font-size: 12px !important; }
.pm-app .status, .pm-app .hint { font-size: 12.5px !important; line-height: 1.4; }
.pm-app .sec-lbl { font-size: 11px !important; letter-spacing: .12em !important; }

/* ---------- 8. photo enhance ---------- */
.app > .hdr .hdr-title strong { font-size: 16px; }
.app > .hdr .hdr-title em { font-size: 12.5px !important; }
.pick { gap: 16px; padding: 36px 20px 32px; }
.pick h1 { font-size: 24px !important; line-height: 1.12 !important; letter-spacing: -.03em !important; }
.pick p { font-size: 15px !important; line-height: 1.5 !important; max-width: 300px; }
.pick-hint { font-size: 14px !important; padding: 11px 20px !important; min-height: 44px; }
.pick-formats { font-size: 11px !important; letter-spacing: .12em !important; }
.feat { font-size: 12.5px !important; padding: 8px 13px !important; min-height: 36px; }
.feat svg { width: 14px !important; height: 14px !important; }
.pe-intro-steps li { font-size: 14px; line-height: 1.45; }
.pe-intro-badge { font-size: 11px !important; letter-spacing: .12em !important; }
.pv-bar { font-size: 12.5px !important; padding: 10px 12px !important; }
.pv-bar .info { font-size: 11.5px !important; }
.pv-btn { font-size: 12.5px !important; min-height: 34px; padding: 7px 13px !important; }
.section h3 { font-size: 14px !important; }
.section h3 .badge { font-size: 11px !important; letter-spacing: .1em !important; }
.preset { min-width: 76px !important; min-height: 72px; padding: 10px 6px 9px !important; }
.preset .p-name { font-size: 12px !important; font-weight: 700; }
.preset-caption { font-size: 13px !important; line-height: 1.45 !important; }
.slider-label { font-size: 13.5px !important; }
.slider-label .val { font-size: 12px !important; }
.tune-toggle { font-size: 14px; min-height: 44px; }
.exp-secondary .exp-btn, .exp-btn { font-size: 13px !important; min-height: 40px; }
input[type=range] { min-height: 28px; }
html[data-theme="light"] .pick { background: var(--cf-card) !important; border-color: #B8BEC9 !important; box-shadow: var(--cf-shadow-sm); }
html[data-theme="light"] .pick.hot { border-color: var(--cf-accent) !important; background: var(--cf-accent-soft) !important; }
html[data-theme="light"] .pick-hint { background: var(--cf-accent) !important; color: #fff !important; border-color: var(--cf-accent) !important; }
html[data-theme="light"] .feat, html[data-theme="light"] .pv-btn { background: var(--cf-surface) !important; border-color: var(--cf-border) !important; color: var(--cf-text-2) !important; }
html[data-theme="light"] .pv-btn.on { background: var(--cf-accent-soft) !important; border-color: var(--cf-accent) !important; color: var(--cf-accent) !important; }
html[data-theme="light"] .section, html[data-theme="light"] .preview { background: var(--cf-card) !important; border-color: var(--cf-border) !important; }
html[data-theme="light"] .preset { background: var(--cf-surface) !important; border-color: var(--cf-border) !important; }
html[data-theme="light"] .preset.on { background: var(--cf-accent-soft) !important; border-color: var(--cf-accent) !important; }
html[data-theme="light"] .pe-intro { background: var(--cf-accent-soft) !important; border-color: color-mix(in srgb, var(--cf-accent) 25%, transparent) !important; }
html[data-theme="light"] .pe-intro-steps li b { color: var(--cf-text) !important; }
html[data-theme="light"] .bg .orb { opacity: .10 !important; }

/* ---------- 8b. home, sign-in, pricing: labels up to the floor ---------- */
#mGreetSub { font-size: 13px !important; }
.ce-title, .tpl-strip-title, .tpl-strip-more { font-size: 12px !important; }
.tpl-card .label, .tpl-strip .label { font-size: 11.5px !important; }
.tpl-card .theme, .tpl-card span.theme { font-size: 10.5px !important; letter-spacing: .1em; }
.dr-sub, .dr-item-sub { font-size: 12.5px !important; }
.dr-plan, .dr-head .dot, #mDrBellDot { font-size: 11px !important; }
.dr-sec { font-size: 11px !important; letter-spacing: .14em !important; }
.cf-field, .cf-field > span:first-child { font-size: 12px !important; }
.cf-terms, .cf-terms a, .cf-or { font-size: 12px !important; line-height: 1.5; }
.eyebrow { font-size: 11px !important; letter-spacing: .14em !important; }
.save-tag, .badge { font-size: 11.5px !important; }
p.foot { font-size: 12.5px !important; }

/* ---------- 9. demo-frame labels (both covers) ---------- */
.pm-cp-gen-btn, .pm-cp-done-badge { font-size: 12px !important; }
.pm-app .dock .dk, .pm-app .dk { font-size: 11px !important; }
.pm-app .stage-empty-step .num { font-size: 11px !important; }

/* ---------- 10. page arrival where cross-document view transitions are missing ---------- */
@supports not (view-transition-name: cf) {
  .cf-copy-shell, .pm-app, .app, body.lyrc-app > main, .m-shell { animation: cfStageIn .26s cubic-bezier(.2, .8, .25, 1) both; }
  @media (prefers-reduced-motion: reduce) { .cf-copy-shell, .pm-app, .app, body.lyrc-app > main, .m-shell { animation: none; } }
}