/* ============================================================
   FUNNELLY UI KIT — kit-specific styles (new / refined screens)
   Loads AFTER styles.css + hub.css + stages.css. Tokens come from
   the design system.
   ============================================================ */

/* ===== brand lockup button reset ===== */
.brand-lockup { color: var(--ink-1); }

/* ============================================================
   ONBOARDING — welcome + role selection
   ============================================================ */
.onboarding {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  padding: 32px 20px;
}
.ob-inner {
  width: min(640px, 100%); display: flex; flex-direction: column; align-items: center;
  gap: 10px; text-align: center;
}
.ob-title { font-size: clamp(28px, 5vw, 42px); font-weight: 800; letter-spacing: -.025em; margin: 16px 0 0; line-height: 1.05; }
.ob-sub { font-size: 16px; color: var(--ink-2); max-width: 40ch; line-height: 1.55; margin: 0 0 8px; }

/* onboarding top bar (logo + lang/theme) */
.ob-topbar { position: fixed; top: 0; inset-inline: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; padding: 16px 22px; }
@media (max-width: 560px) { .ob-topbar { padding: 14px 16px; } }

/* new vs returning */
.ob-mode { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: center; margin: 4px 0 18px; }

/* role cards */
.role-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; width: 100%; margin: 20px 0; }
.role-grid .role-opt { flex: 1 1 220px; max-width: 280px; }
@media (max-width: 560px) { .role-grid .role-opt { flex: 1 1 100%; max-width: none; } }
.role-opt {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 22px 16px; border-radius: var(--r-lg); border: 1.5px solid var(--border);
  background: var(--surface); cursor: pointer; font: inherit; color: var(--ink-1);
  transition: var(--t-fast); text-align: center;
}
.role-opt:hover { border-color: var(--accent); box-shadow: var(--shadow-md); transform: translateY(-3px); }
.role-opt.on { border-color: var(--accent); background: var(--accent-tint); box-shadow: 0 0 0 3px var(--accent-tint); }
.role-ico { width: 54px; height: 54px; border-radius: 16px; display: grid; place-items: center; background: var(--surface-3); color: var(--accent); }
.role-opt.on .role-ico { background: var(--accent); color: var(--on-accent); }
.role-title { font-size: 15px; font-weight: 750; }
.role-sub { font-size: 12px; color: var(--ink-3); line-height: 1.45; }
.role-check { position: absolute; top: 10px; inset-inline-end: 10px; width: 22px; height: 22px; border-radius: 50%; background: var(--accent); color: var(--on-accent); display: grid; place-items: center; }

/* onboarding steps (step 2) */
.ob-steps { display: flex; flex-direction: column; gap: 12px; width: 100%; margin: 20px 0; text-align: start; }
.ob-step {
  display: flex; align-items: center; gap: 16px; padding: 16px 18px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
}
@media (prefers-reduced-motion: no-preference) { .ob-step { animation: reveal var(--t-slow) var(--ease) forwards; } }
.obs-ico { width: 46px; height: 46px; border-radius: 14px; flex: none; display: grid; place-items: center; background: var(--grad-funnel); color: #fff; }
.obs-title { display: block; font-size: 15px; font-weight: 700; }
.obs-sub { display: block; font-size: 13px; color: var(--ink-2); margin-top: 2px; }

/* ============================================================
   ONBOARDING — gradient background accent
   ============================================================ */
.onboarding::before {
  content: ''; position: fixed; inset: 0; z-index: -1;
  background: radial-gradient(ellipse 80% 60% at 50% -10%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 70%);
  pointer-events: none;
}

/* ============================================================
   CREATIVE STUDIO — campaigns + drafts gathered in one place
   ============================================================ */
.studio-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 18px; flex-wrap: wrap; }
.studio-filters { display: flex; gap: 4px; background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 5px; }
.studio-filter { font: inherit; font-weight: 600; font-size: 13px; color: var(--ink-2); border: none; background: transparent; padding: 8px 16px; border-radius: 999px; cursor: pointer; transition: var(--t-fast); display: inline-flex; align-items: center; gap: 7px; }
.studio-filter:hover { color: var(--ink-1); }
.studio-filter.on { background: var(--accent); color: var(--on-accent); box-shadow: var(--shadow-sm); }
.fnly[data-accent="gradient"] .studio-filter.on { background: var(--grad-funnel); }
.studio-count { font-family: var(--font-mono); font-size: 11px; opacity: .8; }

.studio-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; align-items: stretch; }

.campaign-card { display: flex; flex-direction: column; overflow: hidden; }
@media (prefers-reduced-motion: no-preference) { .campaign-card { animation: reveal var(--t-slow) var(--ease) forwards; } }
.cmp-visual { height: 132px; position: relative; display: flex; align-items: flex-end; padding: 12px; background: repeating-linear-gradient(135deg, color-mix(in srgb, oklch(0.7 0.13 var(--h)) 22%, var(--surface-3)) 0 11px, var(--surface-3) 11px 22px); }
.cmp-badges { position: absolute; top: 11px; inset-inline-start: 11px; display: flex; gap: 7px; }
.cmp-plat { position: absolute; top: 11px; inset-inline-end: 11px; display: inline-flex; align-items: center; gap: 5px; background: var(--surface); border-radius: 999px; padding: 4px 10px; font-size: 10.5px; font-weight: 700; box-shadow: var(--shadow-sm); color: var(--ink-2); }
.cmp-stat-pill { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 700; padding: 4px 9px; border-radius: 999px; background: var(--surface); box-shadow: var(--shadow-sm); }
.cmp-stat-pill.live { color: var(--coral); } .cmp-stat-pill.draft { color: var(--ink-3); }
.cmp-headline { font-size: 15px; font-weight: 700; color: var(--ink-1); margin: 0; text-shadow: 0 1px 0 var(--surface); }
.cmp-body { padding: 15px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.cmp-name { font-size: 15px; font-weight: 750; letter-spacing: -.01em; }
.cmp-meta { display: flex; align-items: center; gap: 12px; font-size: 12px; color: var(--ink-3); font-family: var(--font-mono); }
.cmp-foot { display: flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 4px; }

/* the "draft more" tile */
.draft-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; min-height: 280px; cursor: pointer; border: 1.5px dashed var(--border-2); background: var(--surface-2); color: var(--ink-3); text-align: center; transition: var(--t-fast); padding: 20px; }
.draft-tile:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-tint); }
.draft-tile .dt-ico { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; background: var(--surface); box-shadow: var(--shadow-sm); color: var(--accent); }
.draft-tile .dt-t { font-weight: 700; font-size: 15px; color: var(--ink-1); }
.draft-tile:hover .dt-t { color: var(--accent); }
.draft-tile .dt-s { font-size: 12.5px; line-height: 1.45; max-width: 30ch; }

/* generate / regenerate popup */
.studio-backdrop { position: fixed; inset: 0; background: color-mix(in srgb, var(--ground-2) 60%, transparent); backdrop-filter: blur(6px); display: grid; place-items: center; z-index: 80; padding: 24px; animation: fadeIn var(--t-fast) var(--ease); }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.studio-pop { width: min(520px, 100%); padding: 24px; box-shadow: var(--shadow-pop); animation: reveal var(--t-mid) var(--ease) forwards; }
.studio-pop-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.studio-pop-orb { width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; background: var(--grad-funnel); color: #fff; flex: none; }
.studio-pop-close { margin-inline-start: auto; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface); color: var(--ink-3); cursor: pointer; display: grid; place-items: center; }
.studio-pop-close:hover { color: var(--ink-1); border-color: var(--border-2); }
.studio-chiprow { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 2px; }
.studio-gen-preview { margin-top: 16px; padding: 16px; border-radius: var(--r-md); background: var(--surface-3); display: flex; flex-direction: column; gap: 8px; }
.studio-gen-preview.busy { animation: shimmer 1.2s var(--ease) infinite; }
@keyframes shimmer { 0%,100%{opacity:1} 50%{opacity:.5} }

/* ============================================================
   REPORTS — data-collection hero (toward ROC report)
   ============================================================ */
.roc-hero { display: flex; gap: 20px; align-items: stretch; padding: 22px; margin-bottom: 18px; border-color: color-mix(in srgb, var(--coral) 28%, var(--border)); }
.roc-hero-main { flex: 1; }
.roc-ico { width: 40px; height: 40px; border-radius: 12px; flex: none; display: grid; place-items: center; background: color-mix(in srgb, var(--coral) 13%, transparent); color: var(--coral); }
.roc-pct { margin-inline-start: auto; font-size: 26px; font-weight: 800; letter-spacing: -.02em; }
.roc-note { font-size: 12.5px; color: var(--ink-2); line-height: 1.55; margin: 12px 0 0; max-width: 70ch; }
.roc-aside { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 0 18px; border-inline-start: 1px solid var(--border); flex: none; }
.roc-aside-t { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: .1em; color: var(--coral); }
@media (max-width: 680px) { .roc-hero { flex-direction: column; } .roc-aside { flex-direction: row; border-inline-start: none; border-top: 1px solid var(--border); padding: 12px 0 0; } }

/* ============================================================
   CRO LOOP — accordion findings + prioritisation checklist
   ============================================================ */
.cro-summary { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 18px 20px; margin-bottom: 18px; flex-wrap: wrap; }
.cs-left { display: flex; align-items: center; gap: 16px; }
.cs-shot { width: 84px; height: 56px; flex: none; }
.cs-right { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.crotabs { display: flex; gap: 4px; background: var(--surface-3); border-radius: 999px; padding: 4px; }
.crotabs button { font: inherit; font-weight: 600; font-size: 13px; color: var(--ink-2); border: none; background: transparent; padding: 8px 14px; border-radius: 999px; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; transition: var(--t-fast); }
.crotabs button.on { background: var(--surface); color: var(--accent); box-shadow: var(--shadow-sm); }

.findinglist { display: flex; flex-direction: column; gap: 12px; }
.finding { overflow: hidden; transition: border-color var(--t-fast); }
.finding.open { border-color: var(--border-2); }
.finding-head { display: flex; align-items: center; gap: 13px; width: 100%; padding: 16px 18px; background: transparent; border: none; cursor: pointer; font: inherit; color: var(--ink-1); text-align: start; }
.finding-head:hover { background: var(--surface-3); }
.finding-chev { display: flex; color: var(--ink-3); transition: transform var(--t-fast) var(--ease); }
.finding.open .finding-chev { transform: rotate(90deg); }
.fnly[dir="rtl"] .finding-chev { transform: scaleX(-1); }
.fnly[dir="rtl"] .finding.open .finding-chev { transform: rotate(90deg); }
.finding-headmain { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.finding-title { font-size: 14.5px; font-weight: 700; }
.finding-area { font-size: 11px; color: var(--ink-3); }
.finding-lift { font-size: 14px; font-weight: 800; color: var(--green); flex: none; }
.finding-body { padding: 4px 18px 20px; border-top: 1px solid var(--border); }
.fb-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 16px 0; }
@media (max-width: 720px) { .fb-grid { grid-template-columns: 1fr; } }
.fb-block { display: flex; flex-direction: column; gap: 6px; }
.fb-block.hyp { padding: 14px; border-radius: var(--r-md); background: var(--accent-tint); }
.fb-text { font-size: 13px; line-height: 1.55; color: var(--ink-2); margin: 0; }

.prio { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-md); padding: 16px; }
.prio-score { display: flex; gap: 8px; flex-wrap: wrap; }
.ps-seg { font-size: 11.5px; font-weight: 650; color: var(--ink-2); } .ps-seg b { color: var(--c); }
.ps-total { font-size: 11.5px; font-weight: 800; color: var(--ink-1); } .ps-total b { color: var(--accent); font-size: 14px; }
.prio-bar { display: flex; gap: 3px; height: 8px; margin-bottom: 16px; }
.pbar { display: block; height: 100%; border-radius: 3px; transition: inline-size var(--t-mid) var(--ease); }
.pbar.conf { background: var(--accent); } .pbar.impact { background: var(--green); } .pbar.effort { background: var(--coral); }
.prio-groups { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }
@media (max-width: 720px) { .prio-groups { grid-template-columns: 1fr; } }
.prio-group { display: flex; flex-direction: column; gap: 5px; }
.pg-head { display: flex; flex-direction: column; gap: 1px; margin-bottom: 5px; }
.crit { display: flex; align-items: center; gap: 9px; width: 100%; padding: 8px 10px; border-radius: 9px; border: 1px solid var(--border); background: var(--surface); cursor: pointer; font: inherit; color: var(--ink-2); text-align: start; transition: var(--t-fast); }
.crit:hover { border-color: var(--border-2); }
.crit.on { background: var(--accent-tint); border-color: color-mix(in srgb, var(--accent) 40%, transparent); color: var(--ink-1); }
.crit-box { width: 18px; height: 18px; border-radius: 6px; flex: none; border: 1.5px solid var(--border-2); display: grid; place-items: center; color: #fff; }
.crit.on .crit-box { background: var(--accent); border-color: var(--accent); }
.crit-label { flex: 1; font-size: 12.5px; display: flex; flex-direction: column; gap: 1px; }
.crit-help { font-size: 10.5px; color: var(--ink-3); }
.crit-pts { font-size: 11px; font-weight: 700; color: var(--ink-3); }
.crit.on .crit-pts { color: var(--accent); }

.roadmap.pad { padding: 20px; }
.rm-row { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--border); }
@media (prefers-reduced-motion: no-preference) { .rm-row { animation: reveal var(--t-slow) var(--ease) forwards; } }
.roadmap .rm-row:last-of-type { border-bottom: none; }
.rm-rank { width: 26px; height: 26px; border-radius: 8px; flex: none; display: grid; place-items: center; background: var(--surface-3); font-size: 12px; font-weight: 700; color: var(--ink-2); }
.rm-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.rm-title { font-size: 14px; font-weight: 650; }
.rm-bar { display: flex; gap: 3px; height: 7px; max-width: 320px; }
.rm-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex: none; }
.rm-score { font-size: 17px; font-weight: 800; }
.rm-lift { font-size: 12.5px; font-weight: 700; color: var(--green); }
.rm-legend { display: flex; gap: 16px; margin-top: 14px; font-size: 11px; color: var(--ink-3); }
.rm-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-inline-end: 5px; vertical-align: -1px; }
.prio-tip, .cro-tip { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--ink-3); margin-top: 6px; }

/* ============================================================
   ONBOARDING — role badge + dominant starting-point cards
   ============================================================ */
.ob-role-badge {
  font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em;
  padding: 2px 8px; border-radius: 999px;
  background: var(--accent-tint); color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
}

/* Label row above starting-point cards */
.ob-startlabel {
  display: flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 700; color: var(--ink-1);
  margin: 6px 0 12px; width: 100%; justify-content: center;
}

/* Starting-point card grid — 2 columns, visually dominant */
.ob-start-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
  width: 100%; margin-bottom: 4px;
}
@media (max-width: 500px) { .ob-start-grid { grid-template-columns: 1fr; } }

.ob-start-card {
  position: relative; display: flex; flex-direction: column; align-items: flex-start;
  gap: 8px; padding: 22px 20px; border-radius: var(--r-lg);
  border: 2px solid var(--border); background: var(--surface);
  cursor: pointer; font: inherit; color: var(--ink-1);
  text-align: start; transition: var(--t-fast);
}
.ob-start-card:hover { border-color: var(--accent); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.ob-start-card.on {
  border-color: var(--accent); background: var(--accent-tint);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}
.ob-start-ico {
  width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center;
  background: var(--surface-3); color: var(--accent); flex: none;
}
.ob-start-card.on .ob-start-ico { background: var(--accent); color: var(--on-accent); }
.ob-start-title { font-size: 16px; font-weight: 750; }
.ob-start-sub   { font-size: 12.5px; color: var(--ink-2); line-height: 1.5; }

/* ============================================================
   BRIEF — timeline date fields — aligned side by side
   ============================================================ */
.timeline-dates {
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: start; gap: 0 12px; width: 100%;
}
.timeline-date-field { min-width: 0; }
.timeline-arrow-col {
  display: flex; align-items: center; justify-content: center;
  padding-top: 30px;   /* aligns arrow with the middle of the input */
  color: var(--ink-3); flex: none;
}
@media (max-width: 560px) {
  .timeline-dates { grid-template-columns: 1fr; }
  .timeline-arrow-col { padding-top: 0; transform: rotate(90deg); justify-content: flex-start; }
}