/* ============================================================
   Krakota Funnel Dashboard — Zapier-inspired warm theme
   Cream canvas · coffee ink · single orange CTA · hairline elevation.
   Pure visual layer: every selector maps to existing markup/JS hooks.
   ============================================================ */

:root {
  --orange:#ff4f00; --orange-press:#e64700; --on-primary:#fffefb;
  --canvas:#fffefb;        /* warm off-white, never pure white */
  --canvas-soft:#f8f4f0;   /* cream card inset */
  --ink:#201515;           /* deep coffee, never pure black */
  --ink-mid:#36342e; --body:#605d52; --body-mid:#939084; --mute:#c5c0b1;
  --hairline:rgba(32,21,21,0.16); --hairline-soft:rgba(32,21,21,0.09);
  --pos:#2e7d4f; --neg:#c4452f;
  --r-sm:6px; --r-md:12px;          /* inputs · buttons+cards (brand signature) */
  --maxw:1000px;                     /* one content width everywhere */
  --ring:0 0 0 3px rgba(255,79,0,0.30);
  --font:'Inter', system-ui, -apple-system, sans-serif;
}

* { box-sizing:border-box; }
html { color-scheme:light; }
html, body { min-height:100%; }
body { margin:0; font-family:var(--font); color:var(--body); background:var(--canvas); -webkit-font-smoothing:antialiased; }

::selection { background:var(--orange); color:var(--on-primary); }
::-webkit-scrollbar { width:12px; height:12px; }
::-webkit-scrollbar-thumb { background:#e4ddd2; border-radius:8px; border:3px solid var(--canvas); }
::-webkit-scrollbar-thumb:hover { background:var(--mute); }

@keyframes rise { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation:none !important; transition:none !important; }
}

/* Visible keyboard focus on every interactive element (offset so it shows on the cream) */
a:focus-visible, button:focus-visible, select:focus-visible, input:focus-visible,
summary:focus-visible, [tabindex]:focus-visible {
  outline:2px solid var(--orange); outline-offset:2px;
}
button, select, summary, input { touch-action:manipulation; }

.sr-only {
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* Eyebrow — the ONLY uppercase treatment: tiny tracked labels */
.eyebrow, .brand-sub, .cmp-label, .stage-name {
  text-transform:uppercase; letter-spacing:0.06em;
  font-size:11px; font-weight:600; color:var(--body-mid);
}

/* One centred content column for every band down the page */
.loadbar, .more, .alert, .viewbar, .results, .chart-toolbar, .chart-wrap, .snapshot {
  max-width:var(--maxw); margin-left:auto; margin-right:auto;
}

/* ── Login gate ─────────────────────────────────────────── */
.gate { position:fixed; inset:0; display:flex; align-items:center; justify-content:center; padding:24px; background:var(--canvas); }
.gate-box { background:var(--canvas-soft); border:1px solid var(--hairline); padding:36px 32px; border-radius:var(--r-md); width:340px; display:flex; flex-direction:column; gap:12px; animation:rise .4s ease both; }
.gate-box h1 { font-size:13px; letter-spacing:0.08em; text-transform:uppercase; margin:0 0 10px; color:var(--body-mid); font-weight:600; }
.gate-box input { padding:12px 14px; border:1px solid var(--hairline); border-radius:var(--r-sm); font-size:15px; font-family:var(--font); background:var(--canvas); color:var(--ink); transition:border-color .15s, box-shadow .15s; }
.gate-box input::placeholder { color:var(--mute); }
.gate-box input:focus-visible { outline:none; border-color:var(--orange); box-shadow:var(--ring); }
.gate-box button { margin-top:4px; padding:13px; border:0; border-radius:var(--r-md); background:var(--orange); color:var(--on-primary); font-weight:600; font-size:15px; font-family:var(--font); cursor:pointer; transition:background .15s; }
.gate-box button:hover { background:var(--orange-press); }
.gate-error { color:var(--neg); font-size:13px; min-height:18px; }

/* ── Top bar ────────────────────────────────────────────── */
.topbar { position:sticky; top:0; z-index:50; display:flex; align-items:baseline; gap:16px; padding:18px 28px; background:var(--canvas); border-bottom:1px solid var(--hairline); }
.brand { margin:0; font-weight:600; font-size:22px; letter-spacing:-0.01em; color:var(--ink); display:flex; align-items:center; gap:10px; }
.brand-dot { width:11px; height:11px; border-radius:3px; background:var(--orange); }

/* ── Shared controls (inputs / selects / buttons) ───────── */
.loadbar select, .loadbar input, .viewbar input, .snap-form input, .compare-controls input {
  padding:9px 11px; border:1px solid var(--hairline); border-radius:var(--r-sm);
  background:var(--canvas); color:var(--ink); font-family:var(--font); font-size:14px; min-height:40px;
  transition:border-color .15s, box-shadow .15s;
}
.loadbar select:focus-visible, .loadbar input:focus-visible, .viewbar input:focus-visible,
.snap-form input:focus-visible, .compare-controls input:focus-visible {
  outline:none; border-color:var(--orange); box-shadow:var(--ring);
}
#run-btn, #compare-btn, .snap-form button {
  padding:0 20px; min-height:40px; border:0; border-radius:var(--r-md);
  background:var(--orange); color:var(--on-primary); font-weight:600; font-family:var(--font); font-size:14px;
  cursor:pointer; transition:background .15s;
}
#run-btn:hover, #compare-btn:hover, .snap-form button:hover { background:var(--orange-press); }
#run-btn[disabled] { opacity:.6; cursor:progress; }

/* ── Primary load bar ───────────────────────────────────── */
.loadbar { display:flex; align-items:center; gap:14px; flex-wrap:wrap; padding:18px 28px 0; }
.field { display:flex; align-items:center; gap:8px; }
.custom-range { display:flex; align-items:center; gap:12px; }

/* ── "More" disclosure: import + compare ────────────────── */
.more { padding:0 28px; margin-top:14px; }
.more-summary {
  cursor:pointer; list-style:none; display:inline-flex; align-items:center; gap:6px;
  font-size:12px; font-weight:600; color:var(--body-mid); min-height:40px; padding:0 16px;
  border:1px solid var(--hairline); border-radius:var(--r-md); background:var(--canvas-soft);
  transition:border-color .15s, color .15s;
}
.more-summary::-webkit-details-marker { display:none; }
.more-summary::after { content:'▾'; color:var(--mute); }
.more[open] .more-summary::after { content:'▴'; }
.more-summary:hover { border-color:var(--orange); color:var(--ink); }
.more-body { margin-top:14px; display:flex; flex-wrap:wrap; gap:24px; padding:18px; background:var(--canvas-soft); border:1px solid var(--hairline); border-radius:var(--r-md); }
.more-body .import-bar { flex:1 1 280px; }
.more-body .compare-controls { flex:1 1 280px; }
.compare-controls { display:flex; flex-direction:column; gap:9px; }
.cmp-row { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.cmp-label { min-width:78px; }

/* CSV import drop zone */
.import-bar { width:100%; }
.csv-drop { display:flex; flex-direction:column; align-items:center; gap:4px; text-align:center; background:var(--canvas); border:1.5px dashed var(--hairline); border-radius:var(--r-md); padding:18px 20px; cursor:pointer; transition:border-color .15s, background .15s; }
.csv-drop:hover { border-color:var(--orange); }
.csv-drop.drag { border-color:var(--orange); background:rgba(255,79,0,0.06); }
.csv-drop strong { font-size:13px; font-weight:600; color:var(--ink); }
.csv-drop span { font-size:12px; color:var(--body-mid); }

/* ── Alert ──────────────────────────────────────────────── */
.alert { margin-top:16px; padding:13px 16px; border-radius:var(--r-md); width:calc(100% - 56px); background:#fbeae4; border:1px solid rgba(196,69,47,0.35); color:var(--neg); font-size:14px; }

/* ── View bar: zoom + time scale (reshape loaded data) ──── */
.viewbar { display:flex; align-items:center; gap:16px; flex-wrap:wrap; padding:16px 28px 0; }
.viewbar-group { display:flex; align-items:center; gap:8px; }
.dash { color:var(--mute); }
.gran-toggle { margin-left:auto; display:inline-flex; overflow:hidden; border:1px solid var(--hairline); border-radius:var(--r-md); background:var(--canvas-soft); }
.gran-btn { appearance:none; border:0; background:transparent; cursor:pointer; font-family:var(--font); font-size:12px; font-weight:600; color:var(--body-mid); padding:0 16px; min-height:40px; transition:background .15s, color .15s; }
.gran-btn + .gran-btn { border-left:1px solid var(--hairline); }
.gran-btn:hover { color:var(--ink); }
.gran-btn.is-active { background:var(--orange); color:var(--on-primary); }
.ghost-btn { appearance:none; border:1px solid var(--hairline); background:var(--canvas-soft); color:var(--body-mid); font-family:var(--font); font-size:12px; font-weight:600; padding:0 14px; min-height:40px; border-radius:var(--r-sm); cursor:pointer; transition:border-color .15s, color .15s; }
.ghost-btn:hover { border-color:var(--orange); color:var(--ink); }

/* ── Results: funnel + metric cards ─────────────────────── */
.results { display:grid; grid-template-columns:1fr; gap:22px; padding:24px 28px; justify-items:center; }
.results:has(#compare-b:not(:empty)) { max-width:1320px; grid-template-columns:1fr 1fr; }
.results > div { width:100%; }
#compare-b:empty { display:none; }
.results h2 { margin:0 0 16px; font-size:15px; font-weight:600; color:var(--ink); letter-spacing:-0.01em; text-wrap:balance; }

.funnel { display:flex; align-items:stretch; }
.stage { position:relative; flex:1; background:var(--canvas-soft); border:1px solid var(--hairline); border-radius:var(--r-md); padding:20px 14px; text-align:center; animation:rise .4s ease both; }
.stage:not(:last-child) { margin-right:22px; }
.stage:not(:last-child)::after { content:'→'; position:absolute; right:-18px; top:50%; transform:translateY(-50%); font-size:16px; color:var(--mute); }
.stage:nth-child(2){ animation-delay:.05s; } .stage:nth-child(3){ animation-delay:.1s; }
.stage-value { font-size:30px; font-weight:600; color:var(--ink); letter-spacing:-0.02em; font-variant-numeric:tabular-nums; }
.stage-name { margin-top:7px; }
.stage-rate { margin-top:10px; color:var(--orange); font-weight:600; font-size:14px; font-variant-numeric:tabular-nums; }

.cards { display:grid; grid-template-columns:repeat(auto-fit, minmax(150px,1fr)); gap:12px; margin-top:16px; }
.card { background:var(--canvas-soft); border:1px solid var(--hairline); border-radius:var(--r-md); padding:16px 14px; text-align:center; font-size:12px; color:var(--body-mid); font-weight:600; transition:border-color .15s; animation:rise .4s ease both; }
.card--accent { border-color:rgba(255,79,0,0.35); background:rgba(255,79,0,0.04); }
.card:hover { border-color:var(--ink); }
.card:nth-child(2){animation-delay:.05s;} .card:nth-child(3){animation-delay:.1s;} .card:nth-child(4){animation-delay:.15s;} .card:nth-child(5){animation-delay:.2s;}
.card span { display:block; font-size:26px; font-weight:600; color:var(--ink); margin-bottom:6px; letter-spacing:-0.02em; font-variant-numeric:tabular-nums; }
.delta { margin-top:8px; font-size:11px; font-weight:600; font-variant-numeric:tabular-nums; }
.delta.up { color:var(--pos); }
.delta.down { color:var(--neg); }

/* ── Charts ─────────────────────────────────────────────── */
.chart-toolbar { padding:24px 28px 0; }
.chart-range { font-size:12px; font-weight:600; color:var(--body-mid); }
.chart-range:empty { display:none; }
.chart-wrap { background:var(--canvas-soft); border:1px solid var(--hairline); margin-top:10px; margin-bottom:28px; padding:22px; border-radius:var(--r-md); height:340px; }

/* ── Subscriber snapshot (manual log) ───────────────────── */
.snapshot { padding:8px 28px 36px; }
.snapshot-head { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin:0 0 14px; font-size:15px; font-weight:600; color:var(--ink); letter-spacing:-0.01em; text-wrap:balance; }
.manual-tag { font-weight:600; font-size:10px; letter-spacing:0.02em; text-transform:none; color:#b83a00; background:rgba(255,79,0,0.09); border:1px solid rgba(255,79,0,0.3); padding:3px 10px; border-radius:9999px; }
.snapshot-cards { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
.snap-form { display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.snap-form input::placeholder { color:var(--mute); }
.snap-form input[type="date"] { flex:0 0 auto; }
.snap-form input[type="text"] { flex:1 1 160px; }
.snap-status { color:var(--body-mid); font-size:13px; min-height:16px; margin-top:8px; }
.snap-history { list-style:none; margin:12px 0 0; padding:0; display:flex; flex-direction:column; gap:7px; }
.snap-history li { display:flex; align-items:center; gap:12px; background:var(--canvas-soft); border:1px solid var(--hairline); border-radius:var(--r-md); padding:10px 14px; font-size:14px; }
.hist-date { font-weight:600; color:var(--ink); min-width:100px; font-variant-numeric:tabular-nums; }
.hist-val { color:var(--body); flex:1; font-variant-numeric:tabular-nums; }
.hist-del { border:0; background:transparent; color:var(--neg); cursor:pointer; font-size:16px; line-height:1; min-width:44px; min-height:44px; border-radius:var(--r-sm); transition:background .15s; }
.hist-del:hover { background:rgba(196,69,47,0.12); }
.hist-empty { color:var(--body-mid); justify-content:center; }

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width:760px) {
  .results { grid-template-columns:1fr; }
  .cards { grid-template-columns:repeat(2,1fr); }
  .snapshot-cards { grid-template-columns:1fr; }
  .topbar { flex-direction:column; align-items:flex-start; gap:4px; }
  .gran-toggle { margin-left:0; }
}