/* LYRC design-token skin for mobile.html (phone home shell).
 * Revert: remove `lyrc-app` from <body class> OR delete the <link> in mobile.html.
 * Tokens: cutflux-tokens.css (--cf-*). Rules: lyrc-design-system.json.
 * Visual layer only: colours, borders, radii, shadows, type, transitions.
 * No layout geometry, order, behaviour or IDs change. Motion previews keep
 * their animation; only their colours are pulled onto the single accent. */

/* ── 1. Re-point the page's own variables at LYRC tokens ── */
body.lyrc-app {
  --bg: var(--cf-bg);
  --bg-1: var(--cf-bg);
  --bg-2: var(--cf-panel);
  --surface: var(--cf-surface);
  --surface-2: var(--cf-card);
  --tile: var(--cf-surface);
  --tile-2: var(--cf-card);
  --line: var(--cf-border-subtle);
  --line-2: var(--cf-border);
  --line-3: var(--cf-border-strong);
  --text: var(--cf-text);
  --text-2: var(--cf-text-2);
  --muted: var(--cf-text-3);
  --accent: var(--cf-accent);
  --accent-2: var(--cf-accent);
  --accent-deep: var(--cf-accent);
  --accent-soft: var(--cf-accent-soft);
  --accent-glow: none;
  --gradient-1: var(--cf-accent);
  --grad: var(--cf-accent);
  --ok: var(--cf-ok);
  --rose: var(--cf-pink);
  --accent-pink: var(--cf-pink);
  background: var(--cf-bg);
  font-family: var(--cf-font);
  font-feature-settings: normal;
}

/* One font: Inter. The Instrument Serif italic accents become plain Inter
   in secondary text (blue is reserved for interactive things). */
body.lyrc-app .serif,
body.lyrc-app .greet-text h1 em,
body.lyrc-app .hero-body h2 em,
body.lyrc-app .tpl-head h2 em,
body.lyrc-app .cf-sheet h3 em,
body.lyrc-app .coach-tbar em {
  font-family: var(--cf-font);
  font-style: normal;
  font-weight: inherit;
  letter-spacing: inherit;
  color: var(--cf-text-2);
}

/* Focus ring = the one focus token */
body.lyrc-app a:focus-visible,
body.lyrc-app button:focus-visible,
body.lyrc-app input:focus-visible {
  outline: none;
  box-shadow: var(--cf-focus);
}

/* ── 2. Backdrop: flat, no glows/orbs/grain ── */
body.lyrc-app .bg::before,
body.lyrc-app .bg .orb,
body.lyrc-app .bg .grain { display: none; }

/* ── 3. Header ── */
body.lyrc-app .hdr {
  background: rgba(10, 10, 13, 0.92);
  border-bottom-color: var(--cf-border-subtle);
}
body.lyrc-app .icon-btn {
  border-radius: var(--cf-r-button);
  background: var(--cf-surface);
  border-color: var(--cf-border);
  color: var(--cf-text);
  transition: transform var(--cf-t-fast), background var(--cf-t-fast), border-color var(--cf-t-fast);
}
body.lyrc-app .icon-btn:active { background: var(--cf-hover); }
body.lyrc-app .hdr-brand .hdr-logo {
  border-radius: var(--cf-r-button);
  box-shadow: 0 0 0 1px var(--cf-border);
}
body.lyrc-app .hdr-notice {
  background: rgba(245, 166, 35, 0.08);
  border-top-color: rgba(245, 166, 35, 0.22);
  border-bottom-color: rgba(245, 166, 35, 0.22);
  font-family: var(--cf-font);
  font-weight: 600;
  color: var(--cf-text-2);
}
body.lyrc-app .hdr-notice svg { color: var(--cf-warn); }
body.lyrc-app .hdr-notice b { color: var(--cf-text); font-weight: 700; }

/* ── 4. One-time coach marks (floating tooltips: flat accent + shadow) ── */
body.lyrc-app .coach-burger,
body.lyrc-app .coach-tbar {
  background: var(--cf-accent);
  color: #fff;
  font-weight: 600;
  border-radius: var(--cf-r-panel);
  box-shadow: var(--cf-shadow-lg);
  animation: coachIn var(--cf-t-slow) both;
}
body.lyrc-app .coach-burger::before,
body.lyrc-app .coach-tbar::after { background: var(--cf-accent); }
/* this <em> carries an inline Instrument Serif style, so it needs !important */
body.lyrc-app .coach-tbar em {
  font-family: var(--cf-font) !important;
  font-style: normal !important;
  font-weight: 500 !important;
  color: rgba(255, 255, 255, 0.70);
}
body.lyrc-app .coach-burger .close-x,
body.lyrc-app .coach-tbar .close-x {
  background: rgba(0, 0, 0, 0.20);
  color: #fff;
  font-weight: 700;
}

/* ── 5. Greeting ── */
body.lyrc-app .greet-av,
body.lyrc-app .dr-av {
  background: var(--cf-accent-soft);
  color: var(--cf-accent-hover);
  box-shadow: none;
}
body.lyrc-app .greet-av.is-anon,
body.lyrc-app .dr-av.is-anon {
  background: var(--cf-raised);
  color: var(--cf-text-2);
}
body.lyrc-app .greet-text p { color: var(--cf-text-3); }

/* ── 6. First-run welcome card (inline card: flat, no shadow) ── */
body.lyrc-app .mob-welcome {
  background: var(--cf-surface);
  border: 1px solid var(--cf-border);
  border-radius: var(--cf-r-panel);
  box-shadow: none;
  animation-duration: 300ms;
}
body.lyrc-app .mob-welcome-title { color: var(--cf-text); }
body.lyrc-app .mob-welcome-title .dot {
  background: var(--cf-accent);
  box-shadow: none;
  animation: none;
}
body.lyrc-app .mob-welcome-list li { color: var(--cf-text-2); }
body.lyrc-app .mob-welcome-list li b { color: var(--cf-text); font-weight: 600; }
body.lyrc-app .mob-welcome-list .ic {
  background: var(--cf-accent-soft);
  color: var(--cf-accent-hover);
  font-weight: 700;
  box-shadow: none;
}
body.lyrc-app .mob-welcome-close {
  border-radius: var(--cf-r-button);
  background: var(--cf-raised);
  border-color: var(--cf-border);
  color: var(--cf-text-2);
  transition: background var(--cf-t-fast), color var(--cf-t-fast);
}
body.lyrc-app .mob-welcome-close:active { background: var(--cf-hover); color: var(--cf-text); }

/* ── 7. Hero (Beat Editor) ── */
body.lyrc-app .hero {
  background: var(--cf-surface);
  border: 1px solid var(--cf-border);
  border-radius: var(--cf-r-panel);
  box-shadow: none;
  transition: transform var(--cf-t-fast), border-color var(--cf-t-base);
}
body.lyrc-app .hero:active { border-color: var(--cf-accent); }
body.lyrc-app .hero-thumb { background: var(--cf-timeline); }
body.lyrc-app .hero-thumb::after {
  background: linear-gradient(180deg, transparent 45%, rgba(21, 22, 28, 0.70) 82%, rgba(21, 22, 28, 0.96) 100%);
}
body.lyrc-app .hero-body p { color: var(--cf-text-2); }
body.lyrc-app .hero-cta {
  background: var(--cf-accent);
  color: #fff;
  font-weight: 600;
  border-radius: var(--cf-r-button);
  box-shadow: none;
  transition: background var(--cf-t-fast), transform var(--cf-t-fast);
}
body.lyrc-app .hero:active .hero-cta { background: var(--cf-accent-active); }
body.lyrc-app .hero-badge {
  background: var(--cf-accent);
  color: #fff;
  font-weight: 700;
  box-shadow: none;
}

/* Beat-sync preview art: keep the motion, flat single-accent colours, no glow */
body.lyrc-app .ce-brand-preview { background: var(--cf-timeline); }
body.lyrc-app .ce-brand-preview::before {
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.03) 0 1px, transparent 1px 40px),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 40px);
}
body.lyrc-app .ce-brand-preview .ce-title { color: var(--cf-text-3); font-weight: 700; }
body.lyrc-app .ce-brand-preview .ce-title em { color: var(--cf-text-2); font-weight: 700; }
body.lyrc-app .ce-brand-preview .ce-bars span { background: #3B6FE0; }
body.lyrc-app .ce-brand-preview .ce-cuts i { background: var(--cf-accent); box-shadow: none; }
body.lyrc-app .ce-brand-preview .ce-playhead::before {
  background: var(--cf-text);
  box-shadow: none;
}

/* ── 8. Templates strip ── */
body.lyrc-app .tpl-strip {
  background: var(--cf-surface);
  border-color: var(--cf-border);
  border-radius: var(--cf-r-panel);
  transition: transform var(--cf-t-fast), border-color var(--cf-t-base);
}
body.lyrc-app .tpl-strip:active { border-color: var(--cf-accent); }
body.lyrc-app .tpl-strip-title { font-weight: 700; color: var(--cf-text); }
body.lyrc-app .tpl-strip-title::before { background: var(--cf-accent); box-shadow: none; }
body.lyrc-app .tpl-strip-more { color: var(--cf-accent-hover); font-weight: 600; }
body.lyrc-app .tpl-strip-sub { color: var(--cf-text-3); }
body.lyrc-app .tpl-strip-row img,
body.lyrc-app .tpl-strip-row .cf-motion,
body.lyrc-app .tpl-strip-row .tpl-skel {
  border-radius: var(--cf-r-card);
  border-color: var(--cf-border-subtle);
  background: var(--cf-raised);
}
/* Loading placeholder = the token shimmer (same look as .cf-skel) */
body.lyrc-app .tpl-strip-row .tpl-skel {
  background: linear-gradient(90deg, var(--cf-raised) 0%, var(--cf-hover) 50%, var(--cf-raised) 100%);
  background-size: 200% 100%;
  animation: cfSkel 1.2s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  body.lyrc-app .tpl-strip-row .tpl-skel { animation: none; background: var(--cf-raised); }
}
/* Real thumbnails fade in instead of popping */
body.lyrc-app .tpl-strip-row img { animation: lyrcFadeIn var(--cf-t-slow) both; }
@keyframes lyrcFadeIn { from { opacity: 0; } to { opacity: 1; } }

/* ── 9. Side tiles (Copy an Edit, Enhance) ── */
body.lyrc-app .side-tile {
  background: var(--cf-surface);
  border-color: var(--cf-border);
  border-radius: var(--cf-r-panel);
  transition: transform var(--cf-t-fast), border-color var(--cf-t-base);
}
body.lyrc-app .side-tile:active { border-color: var(--cf-accent); }
body.lyrc-app .side-tile-ic {
  background: var(--cf-accent-soft);
  border-color: transparent;
  color: var(--cf-accent-hover);
  border-radius: var(--cf-r-card);
}
body.lyrc-app .side-tile-text span { color: var(--cf-text-3); }
body.lyrc-app .side-tile-go {
  background: var(--cf-raised);
  border-color: var(--cf-border);
  color: var(--cf-text-2);
  transition: background var(--cf-t-fast), color var(--cf-t-fast);
}
body.lyrc-app .side-tile:active .side-tile-go { background: var(--cf-accent); color: #fff; }

/* Legacy footer link + tool tiles (if rendered) */
body.lyrc-app .gs-label { font-weight: 700; color: var(--cf-text-3); }
body.lyrc-app .gs-link { color: var(--cf-accent-hover); }
body.lyrc-app .tool { border-radius: var(--cf-r-panel); background: var(--cf-surface); box-shadow: none; }
body.lyrc-app .tool h3 { font-weight: 700; }

/* ── 10. Drawer ── */
body.lyrc-app .scrim {
  background: rgba(0, 0, 0, 0.60);
  transition: opacity var(--cf-t-base);
}
body.lyrc-app .drawer {
  background: var(--cf-panel);
  border-right-color: var(--cf-border);
  box-shadow: var(--cf-shadow-lg);
  transition: transform var(--cf-t-slow);
}
body.lyrc-app .dr-head { border-bottom-color: var(--cf-border-subtle); }
body.lyrc-app .dr-sub { color: var(--cf-text-3); }
body.lyrc-app .dr-plan {
  font-family: var(--cf-font);
  font-weight: 700;
  color: var(--cf-text-2);
  background: var(--cf-raised);
}
body.lyrc-app .dr-plan.is-premium { color: var(--cf-accent-hover); background: var(--cf-accent-soft); }
body.lyrc-app .dr-bell .dot {
  background: var(--cf-accent);
  font-weight: 700;
  box-shadow: 0 0 0 2px var(--cf-panel);
}
body.lyrc-app .dr-close,
body.lyrc-app .dr-upd-back {
  border-radius: var(--cf-r-button);
  background: var(--cf-surface);
  border-color: var(--cf-border);
  color: var(--cf-text);
  transition: transform var(--cf-t-fast), background var(--cf-t-fast);
}
body.lyrc-app .dr-close:active,
body.lyrc-app .dr-upd-back:active { background: var(--cf-hover); }
body.lyrc-app .dr-sec { font-weight: 700; color: var(--cf-text-3); }
body.lyrc-app .dr-item {
  border-radius: var(--cf-r-button);
  transition: background var(--cf-t-fast), color var(--cf-t-fast);
}
body.lyrc-app .dr-item:active { background: var(--cf-hover); }
body.lyrc-app .dr-item.is-on { background: var(--cf-accent-soft); color: var(--cf-accent-hover); }
body.lyrc-app .dr-item.is-on .dr-item-ic { color: var(--cf-accent-hover); }
body.lyrc-app .dr-item .dr-item-ic { color: var(--cf-text-2); }
body.lyrc-app .dr-item-sub { color: var(--cf-text-3); opacity: 1; }
body.lyrc-app .dr-item.is-on .dr-item-sub { color: var(--cf-text-2); opacity: 1; }
body.lyrc-app .dr-item.is-danger,
body.lyrc-app .dr-item.is-danger .dr-item-ic { color: var(--cf-pink); }
/* Status badges: flat, no gradients, no glow pulse */
body.lyrc-app .dr-item .dr-item-tag {
  font-weight: 700;
  color: var(--cf-warn);
  background: rgba(245, 166, 35, 0.10);
  border-color: rgba(245, 166, 35, 0.30);
}
body.lyrc-app .dr-item .dr-item-tag.is-phone {
  color: var(--cf-ok);
  background: rgba(52, 211, 153, 0.12);
  border-color: rgba(52, 211, 153, 0.30);
}
body.lyrc-app .dr-item .dr-item-tag.is-start {
  color: #fff;
  background: var(--cf-accent);
  border-color: transparent;
  animation: none;
  box-shadow: none;
}
body.lyrc-app .dr-divider { background: var(--cf-border-subtle); }
body.lyrc-app .dr-foot { border-top-color: var(--cf-border-subtle); }
body.lyrc-app .dr-credit { color: var(--cf-text-3); transition: color var(--cf-t-fast); }
body.lyrc-app .dr-credit:active { color: var(--cf-text); }

/* What's new pane */
body.lyrc-app .dr-upd-bar { border-bottom-color: var(--cf-border-subtle); }
body.lyrc-app .dr-upd-count { color: var(--cf-text-3); }
body.lyrc-app .dr-upd-item { border-radius: var(--cf-r-card); }
body.lyrc-app .dr-upd-item.is-new { background: var(--cf-accent-soft); }
body.lyrc-app .dr-upd-item .date { font-family: var(--cf-font); font-weight: 600; color: var(--cf-text-3); }
body.lyrc-app .dr-upd-item.is-new .title::after { background: var(--cf-accent); box-shadow: none; }
body.lyrc-app .dr-upd-item .body { color: var(--cf-text-2); }

/* ── 11. Templates picker sheet ── */
body.lyrc-app .tpl-sheet {
  background: rgba(0, 0, 0, 0.70);
  transition: opacity var(--cf-t-base);
}
body.lyrc-app .tpl-panel {
  background: var(--cf-panel);
  border-top-color: var(--cf-border);
  border-radius: var(--cf-r-panel) var(--cf-r-panel) 0 0;
  box-shadow: var(--cf-shadow-lg);
  transition: transform var(--cf-t-slow);
}
body.lyrc-app .tpl-grab,
body.lyrc-app .cf-sheet-grab { background: var(--cf-text-4); }
body.lyrc-app .tpl-head p { color: var(--cf-text-2); }
body.lyrc-app .tpl-close {
  border-radius: var(--cf-r-button);
  background: var(--cf-surface);
  border-color: var(--cf-border);
  color: var(--cf-text-2);
  transition: transform var(--cf-t-fast), color var(--cf-t-fast), background var(--cf-t-fast);
}
body.lyrc-app .tpl-close:active { background: var(--cf-hover); color: var(--cf-text); }
body.lyrc-app .tpl-card {
  background: var(--cf-surface);
  border-color: var(--cf-border);
  border-radius: var(--cf-r-card);
  transition: transform var(--cf-t-fast), border-color var(--cf-t-fast);
}
body.lyrc-app .tpl-card:active { border-color: var(--cf-accent); }
body.lyrc-app .tpl-card .thumb { background: var(--cf-raised); }
body.lyrc-app .tpl-card .thumb .label {
  background: rgba(10, 10, 13, 0.72);
  border-radius: var(--cf-r-button);
  box-shadow: none;
}
body.lyrc-app .tpl-card .meta .row2 { font-family: var(--cf-font); color: var(--cf-text-3); }
body.lyrc-app .tpl-card .meta .row2 .theme { color: var(--cf-text-2); }
body.lyrc-app .tpl-empty { color: var(--cf-text-3); }
body.lyrc-app .tpl-empty.is-err { color: var(--cf-pink); }
/* "Loading templates…" gets a small accent spinner above the (unchanged) text */
body.lyrc-app .tpl-empty:not(.is-err)::before {
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  margin: 0 auto var(--cf-s3);
  border-radius: 50%;
  border: 2px solid var(--cf-border);
  border-top-color: var(--cf-accent);
  animation: lyrcSpin 800ms linear infinite;
}
@keyframes lyrcSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  body.lyrc-app .tpl-empty:not(.is-err)::before { animation: none; }
}

/* Template motion previews (shared home-motion-previews.css): recolour the
   purple bits onto the single accent; motion untouched. */
body.lyrc-app .cf-motion--rhythm .cf-m-wave {
  background: linear-gradient(90deg, transparent, rgba(59, 130, 246, 0.9) 20%, rgba(91, 155, 255, 0.9) 50%, rgba(59, 130, 246, 0.9) 80%, transparent);
}
body.lyrc-app .cf-motion--slow .cf-m-glow {
  background:
    radial-gradient(circle at 30% 40%, rgba(59, 130, 246, 0.30), transparent 45%),
    radial-gradient(circle at 70% 60%, rgba(91, 155, 255, 0.22), transparent 50%);
}

/* ── 12. Desktop-handoff nudge sheet ── */
body.lyrc-app .cf-sheet-overlay { background: rgba(0, 0, 0, 0.70); }
body.lyrc-app .cf-sheet {
  background: var(--cf-panel);
  border-top-color: var(--cf-border);
  border-radius: var(--cf-r-panel) var(--cf-r-panel) 0 0;
  box-shadow: var(--cf-shadow-lg);
  transition: transform var(--cf-t-slow);
}
body.lyrc-app .cf-sheet p { color: var(--cf-text-2); }
body.lyrc-app .cf-sheet input {
  background: var(--cf-input);
  border-color: var(--cf-border);
  border-radius: var(--cf-r-button);
  transition: border-color var(--cf-t-fast), box-shadow var(--cf-t-fast);
}
body.lyrc-app .cf-sheet input::placeholder { color: var(--cf-text-4); }
body.lyrc-app .cf-sheet input:focus { border-color: var(--cf-accent); box-shadow: var(--cf-focus); }
body.lyrc-app .cf-sheet .send {
  background: var(--cf-accent);
  color: #fff;
  font-weight: 600;
  border-radius: var(--cf-r-button);
  box-shadow: none;
  transition: background var(--cf-t-fast), transform var(--cf-t-fast);
}
body.lyrc-app .cf-sheet .send:active { background: var(--cf-accent-active); }
body.lyrc-app .cf-sheet .note { color: var(--cf-text-3); }
body.lyrc-app .cf-sheet .continue {
  background: var(--cf-surface);
  border-color: var(--cf-border);
  color: var(--cf-text-2);
  border-radius: var(--cf-r-button);
  transition: background var(--cf-t-fast);
}
body.lyrc-app .cf-sheet .continue:active { background: var(--cf-hover); }

/* ── 13. Bottom tab bar ── */
body.lyrc-app .tbar {
  background: rgba(10, 10, 13, 0.94);
  border-top-color: var(--cf-border-subtle);
}
body.lyrc-app .tbar-item {
  border-radius: var(--cf-r-button);
  color: var(--cf-text-2);
  transition: transform var(--cf-t-fast), background var(--cf-t-fast), color var(--cf-t-fast);
}
body.lyrc-app .tbar-item .tbar-ic {
  border-radius: var(--cf-r-button);
  background: var(--cf-surface);
  border-color: var(--cf-border);
  color: var(--cf-text-2);
  transition: background var(--cf-t-fast), color var(--cf-t-fast), border-color var(--cf-t-fast);
}
body.lyrc-app .tbar-item:hover .tbar-ic { background: var(--cf-hover); }
body.lyrc-app .tbar-item .tbar-lbl { font-weight: 600; color: var(--cf-text-3); }
body.lyrc-app .tbar-item.is-on .tbar-ic {
  background: var(--cf-accent);
  border-color: transparent;
  color: #fff;
  box-shadow: none;
}
body.lyrc-app .tbar-item.is-on .tbar-lbl { color: var(--cf-accent-hover); }

/* Tool rows: let the description wrap to two lines instead of cutting off
   mid-sentence (2026-10-16). Also add the finger-follow spotlight. */
body.lyrc-app .side-tile-text span {
  white-space: normal !important; text-overflow: clip !important;
  display: -webkit-box !important; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  line-height: 1.35; margin-top: 2px;
}