/* CreatorHQ V2 — page-specific and new-feature styles. Theme tokens only. */

/* =========================================================
   Dashboard welcome panel + illustration (components/DashIllustration.js)
   Laid out by the panel's own width (container query): on phones the
   picture stays small beside the message so the stat tiles and This Week
   stay on the first screen; wider panels give it the right-hand column.
   ========================================================= */
:root, :root[data-theme="blush-sage"] {
  --hero-bg: linear-gradient(118deg, var(--callout-bg) 0%, var(--surface) 55%, var(--chip-2-bg) 100%);
  --hero-border: var(--callout-border); --hero-eyebrow-bg: var(--chip-1-bg); --hero-eyebrow-text: var(--chip-1-text);
  --art-glow: var(--chip-1-bg); --art-ring: var(--chip-2-bg); --art-frame: var(--nav-text); --art-page: var(--surface);
  --art-ink: var(--text); --art-steam: var(--text-muted); --art-shadow: var(--text);
  --art-thumb1: var(--chart-1); --art-thumb2: var(--chart-2); --art-thumb3: var(--chart-6); --art-thumb4: var(--chart-5);
  --art-done: var(--chart-3); --art-mic: var(--chart-3); --art-stand: var(--nav-text); --art-mug: var(--chart-2);
  --art-note: var(--chart-6); --art-spark: var(--accent-1-deep);
}
:root[data-theme="rainbow-pastel"] {
  --hero-bg: linear-gradient(118deg, var(--callout-bg) 0%, var(--surface) 55%, var(--chip-5-bg) 100%);
  --hero-border: var(--callout-border); --hero-eyebrow-bg: var(--chip-6-bg); --hero-eyebrow-text: var(--chip-6-text);
  --art-glow: var(--chip-3-bg); --art-ring: var(--chip-6-bg); --art-frame: var(--nav-text); --art-page: var(--surface);
  --art-ink: var(--text); --art-steam: var(--text-muted); --art-shadow: var(--text);
  --art-thumb1: var(--chart-5); --art-thumb2: var(--chart-1); --art-thumb3: var(--chart-3); --art-thumb4: var(--chart-4);
  --art-done: var(--chart-6); --art-mic: var(--chart-1); --art-stand: var(--nav-text); --art-mug: var(--chart-4);
  --art-note: var(--chart-3); --art-spark: var(--accent-1-deep);
}
:root[data-theme="neutral"] {
  --hero-bg: linear-gradient(118deg, var(--callout-bg) 0%, var(--surface) 55%, var(--chip-2-bg) 100%);
  --hero-border: var(--callout-border); --hero-eyebrow-bg: var(--chip-1-bg); --hero-eyebrow-text: var(--chip-1-text);
  --art-glow: var(--chip-3-bg); --art-ring: var(--chip-1-bg); --art-frame: var(--nav-text); --art-page: var(--surface);
  --art-ink: var(--text); --art-steam: var(--text-muted); --art-shadow: var(--text);
  --art-thumb1: var(--chart-2); --art-thumb2: var(--chart-1); --art-thumb3: var(--chart-5); --art-thumb4: var(--chart-3);
  --art-done: var(--chart-6); --art-mic: var(--chart-4); --art-stand: var(--nav-text); --art-mug: var(--chart-1);
  --art-note: var(--chart-5); --art-spark: var(--accent-1-deep);
}
:root[data-theme="tech"] {
  --hero-bg: linear-gradient(118deg, var(--callout-bg) 0%, var(--surface) 55%, var(--chip-2-bg) 100%);
  --hero-border: var(--callout-border); --hero-eyebrow-bg: var(--chip-1-bg); --hero-eyebrow-text: var(--chip-1-text);
  --art-glow: var(--chip-1-bg); --art-ring: var(--chip-2-bg); --art-frame: var(--nav-text); --art-page: var(--surface);
  --art-ink: var(--text); --art-steam: var(--text-muted); --art-shadow: var(--text);
  --art-thumb1: var(--chart-5); --art-thumb2: var(--chart-3); --art-thumb3: var(--chart-2); --art-thumb4: var(--chart-4);
  --art-done: var(--chart-5); --art-mic: var(--chart-1); --art-stand: var(--nav-text); --art-mug: var(--chart-2);
  --art-note: var(--chart-4); --art-spark: var(--chart-5);
}
/* Dark: the screen and the note are light "paper", so ink on them stays dark. */
:root[data-theme="dark"] {
  --hero-bg: linear-gradient(118deg, var(--callout-bg) 0%, var(--surface) 55%, var(--chip-4-bg) 100%);
  --hero-border: var(--callout-border); --hero-eyebrow-bg: var(--chip-1-bg); --hero-eyebrow-text: var(--chip-1-text);
  --art-glow: var(--chip-1-bg); --art-ring: var(--chip-4-bg); --art-frame: var(--btn-ghost-border); --art-page: #E3E1EA;
  --art-ink: #25272E; --art-steam: var(--text-muted); --art-shadow: #000000;
  --art-thumb1: var(--chart-1); --art-thumb2: var(--chart-3); --art-thumb3: var(--chart-2); --art-thumb4: var(--chart-5);
  --art-done: var(--chart-6); --art-mic: var(--chart-4); --art-stand: var(--text-muted); --art-mug: var(--chart-2);
  --art-note: var(--chart-5); --art-spark: var(--chart-5);
}

.ch-hero {
  container-type: inline-size;
  position: relative;
  overflow: hidden;
  background: var(--hero-bg);
  border: 1px solid var(--hero-border);
  border-radius: 18px;
  box-shadow: var(--shadow-card);
  margin-bottom: 1rem;
}
.ch-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 112px;
  grid-template-areas: "text art" "foot foot";
  gap: 0.75rem;
  align-items: center;
  padding: 1rem;
}
.ch-hero__text { grid-area: text; min-width: 0; }
.ch-hero__art { grid-area: art; line-height: 0; }
.ch-hero__art svg { width: 100%; height: auto; display: block; }
.ch-hero__foot { grid-area: foot; min-width: 0; }
.ch-hero__foot .stat-grid { margin-bottom: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ch-hero__eyebrow {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--hero-eyebrow-bg);
  color: var(--hero-eyebrow-text);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.ch-hero__title { margin-top: 0.5rem; font-size: clamp(1.375rem, 1.1rem + 1.2vw, 2rem); }
.ch-hero__line { margin-top: 0.25rem; font-size: 0.9375rem; color: var(--text); line-height: 1.45; }
@container (min-width: 600px) {
  .ch-hero__grid { grid-template-columns: minmax(0, 1fr) minmax(220px, 280px); gap: 1rem 1.25rem; padding: 1.25rem 1.5rem; }
  .ch-hero__foot .stat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@container (min-width: 880px) {
  .ch-hero__grid { grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); grid-template-areas: "text art" "foot art"; }
  .ch-hero__art { align-self: end; }
}

.ch-glow { fill: var(--art-glow); }
.ch-ring { fill: none; stroke: var(--art-ring); stroke-width: 6; }
.ch-shadow { fill: var(--art-shadow); opacity: 0.08; }
.ch-frame { fill: var(--art-frame); }
.ch-page { fill: var(--art-page); }
.ch-play { fill: var(--art-page); }
.ch-thumb1 { fill: var(--art-thumb1); } .ch-thumb2 { fill: var(--art-thumb2); }
.ch-thumb3 { fill: var(--art-thumb3); } .ch-thumb4 { fill: var(--art-thumb4); }
.ch-line { fill: var(--art-ink); opacity: 0.16; }
.ch-done { fill: var(--art-done); }
.ch-note { fill: var(--art-note); }
.ch-fold { fill: var(--art-ink); opacity: 0.1; }
.ch-scribble { fill: var(--art-ink); opacity: 0.3; }
.ch-stand { fill: var(--art-stand); opacity: 0.7; }
.ch-mic-base { fill: var(--art-stand); }
.ch-mic { fill: var(--art-mic); }
.ch-grille { fill: var(--art-ink); opacity: 0.18; }
.ch-mug { fill: var(--art-mug); }
.ch-mug-band { fill: var(--art-page); opacity: 0.55; }
.ch-handle { fill: none; stroke: var(--art-mug); stroke-width: 6; }
.ch-spark { fill: var(--art-spark); }
.ch-steam path { fill: none; stroke: var(--art-steam); stroke-width: 3; stroke-linecap: round; opacity: 0.45; animation: chSteam 3.6s ease-in-out infinite; }
.ch-steam path + path { animation-delay: 1.8s; }
@keyframes chSteam { 0% { transform: translateY(5px); opacity: 0; } 40% { opacity: 0.45; } 100% { transform: translateY(-7px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .ch-steam path { animation: none; } }

/* Dashboard grid */
.dash-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
@media (min-width: 768px) {
  .dash-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dash-wide { grid-column: 1 / -1; }
}
@media (min-width: 1280px) {
  .dash-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .dash-wide { grid-column: span 2; }
}
.dash-grid > .card { margin: 0; }
.dash-card-header { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.75rem; }
.dash-card-header .card-title { margin: 0; }
.dash-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.dash-list a, .dash-list .dash-row {
  display: flex; justify-content: space-between; align-items: center; gap: 0.75rem;
  padding: 0.625rem 0.75rem; border-radius: 10px; background: var(--surface-alt); color: var(--text);
  min-height: 44px; font-size: 0.875rem;
}
.dash-list .when { font-size: 0.75rem; color: var(--text-muted); white-space: nowrap; font-weight: 600; }
.pipeline-mini { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr)); gap: 0.5rem; }
.pipeline-mini-col { background: var(--surface-alt); border-radius: 10px; padding: 0.5rem; min-width: 0; }
.pipeline-mini-col .kanban-card { margin-top: 0.25rem; padding: 0.5rem; }
.upcoming-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 9.5rem), 1fr)); gap: 0.75rem; }
.upcoming-thumb {
  aspect-ratio: 16 / 9; border-radius: 8px; margin-bottom: 0.375rem; overflow: hidden;
  background: linear-gradient(135deg, var(--chip-1-bg), var(--chip-2-bg));
  display: flex; align-items: center; justify-content: center; color: var(--chip-1-text);
}
.upcoming-thumb img { width: 100%; height: 100%; object-fit: cover; }
.priority-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0.5rem; padding: 0.25rem 0; min-height: 44px; }
.priority-row.done .priority-text { text-decoration: line-through; text-decoration-color: var(--border-accent); color: var(--text-muted); }
.priority-add { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.5rem; margin-top: 0.5rem; }

/* =========================================================
   Empty-state illustrations (components/EmptyState.js)
   ========================================================= */
.ea-bg { fill: var(--surface-alt); stroke: var(--border); stroke-width: 1; }
.ea-1 { fill: var(--chart-1); } .ea-2 { fill: var(--chart-2); } .ea-3 { fill: var(--chart-3); }
.ea-4 { fill: var(--chart-4); } .ea-5 { fill: var(--chart-5); }
.ea-paper { fill: var(--surface); }
.ea-stroke { stroke: var(--border-accent); stroke-width: 2; }
.ea-edge { fill: var(--chart-edge); opacity: 0.6; }
.ea-line { fill: none; stroke: var(--text-muted); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; opacity: 0.6; }

/* =========================================================
   Tour card, popover menus
   ========================================================= */
.tour-card {
  position: fixed;
  left: 0.75rem; right: 0.75rem;
  bottom: calc(5.25rem + env(safe-area-inset-bottom, 0px));
  z-index: 150;
  background: var(--surface);
  border: 1.5px solid var(--callout-border);
  border-radius: 16px;
  box-shadow: var(--shadow-modal);
  padding: 1rem 1.125rem;
  max-width: 30rem;
  margin: 0 auto;
}
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) { .tour-card { left: auto; right: 1.5rem; bottom: 1.5rem; } }
.tour-step { font-size: 0.75rem; font-weight: 700; color: var(--chip-1-text); background: var(--chip-1-bg); display: inline-block; padding: 2px 10px; border-radius: 999px; }
.tour-title { font-size: 1.25rem; margin: 0.5rem 0 0.25rem; }
.tour-card p { font-size: 0.9375rem; }
.tour-actions { display: flex; gap: 0.5rem; justify-content: flex-end; flex-wrap: wrap; margin-top: 0.75rem; }
body.sheet-open .tour-card { display: none; }

.popover-menu {
  position: absolute; z-index: 250;
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  padding: 0.375rem; box-shadow: var(--shadow-modal); min-width: 11rem; max-width: calc(100vw - 16px);
}
.popover-item { display: block; width: 100%; text-align: left; padding: 0.5rem 0.75rem; min-height: 44px; border-radius: 8px; color: var(--text); font-size: 0.875rem; }
.popover-item:focus-visible, .popover-item:hover { background: var(--surface-alt); }

/* =========================================================
   Free demo (tools/make-demo.py) — inert in the paid app
   ========================================================= */
html.is-demo .demo-hide { display: none !important; }
.demo-bar {
  display: flex; align-items: center; justify-content: center; gap: 0.75rem; flex-wrap: wrap;
  padding: 0.5rem 1rem; background: var(--callout-bg); border-bottom: 1.5px solid var(--callout-border);
  color: var(--text); font-size: 0.875rem; font-weight: 600; text-align: center;
  padding-top: calc(0.5rem + env(safe-area-inset-top, 0px));
}
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) { html.is-demo .demo-bar { margin-left: 248px; } }
.demo-card { border-width: 2px; }
@media print { .demo-bar { display: none !important; } }