/* GhostStat Cohort Analysis — scoped under .gs-cohorts. Retention grid uses a blue heat scale
   (data viz), page chrome matches the app. */
.gs-cohorts{
  --c-accent:#2A6FE8; --c-accent-soft:#EAF1FD; --c-ink:#1A1D21; --c-ink-2:#3C4350;
  --c-muted:#8C95A1; --c-muted-2:#AAB2BD; --c-line:#E9EDF3; --c-line-2:#D0D4DA;
  --c-pos:#1FA463; --c-neg:#E0533D; --c-r-lg:16px;
  --c-sh-1:0 1px 2px rgba(16,24,40,.04),0 1px 3px rgba(16,24,40,.05); --c-sh-2:0 10px 34px rgba(16,24,40,.12);
  color:var(--c-ink);
}
.gs-cohorts .num{font-variant-numeric:tabular-nums}

.gs-cohorts .page-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:14px}
.gs-cohorts .crumb{font-size:12.5px;color:var(--c-muted);display:flex;align-items:center;gap:7px;margin-bottom:3px}
.gs-cohorts .crumb .sep{color:var(--c-muted-2)}
.gs-cohorts h1{margin:0;font-size:23px;font-weight:800;letter-spacing:-.02em}
.gs-cohorts .head-actions{display:flex;align-items:center;gap:8px}
.gs-cohorts .c-select{height:32px;border:1px solid var(--c-line-2);border-radius:6px;background:#fff;color:var(--c-ink-2);font-weight:600;font-size:13px;padding:0 10px;max-width:220px}
.gs-cohorts .btn.text{background:none;border:1px solid transparent;color:var(--c-ink-2);height:32px;border-radius:6px;padding:0 12px;font-weight:600;font-size:13px;display:inline-flex;align-items:center;gap:6px;cursor:pointer}
.gs-cohorts .btn.text:hover{color:var(--c-accent)}

.gs-cohorts .c-banner{border-radius:12px;padding:14px 16px;margin-bottom:14px;font-size:13.5px;display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.gs-cohorts .c-banner.warn{background:#FFF6E6;border:1px solid #FfE2A8;color:#7A5A12}
.gs-cohorts .c-banner.info{background:var(--c-accent-soft);border:1px solid #CBDDFB;color:#1E4FA0}
.gs-cohorts .c-banner .cb-actions{display:flex;gap:8px;align-items:center}
.gs-cohorts .c-banner .cb-btn{height:32px;border-radius:6px;border:none;background:var(--c-accent);color:#fff;font-weight:700;font-size:13px;padding:0 14px;cursor:pointer}
.gs-cohorts .c-banner .cb-btn.off{background:#fff;color:var(--c-ink-2);border:1px solid var(--c-line-2)}

.gs-cohorts .kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:14px}
.gs-cohorts .kpi{background:#fff;border:1px solid var(--c-line);border-radius:12px;box-shadow:var(--c-sh-1);padding:14px 16px}
.gs-cohorts .kpi .l{font-size:11px;color:var(--c-muted);text-transform:uppercase;letter-spacing:.05em;font-weight:700}
.gs-cohorts .kpi .v{font-size:26px;font-weight:800;letter-spacing:-.02em;margin-top:3px}
.gs-cohorts .kpi .v small{font-size:12px;font-weight:700;color:var(--c-muted);margin-left:1px}
@media(max-width:760px){.gs-cohorts .kpis{grid-template-columns:repeat(2,1fr)}}

.gs-cohorts .chartcard{background:#fff;border:1px solid var(--c-line);border-radius:var(--c-r-lg);box-shadow:var(--c-sh-1);overflow:visible;position:relative}
.gs-cohorts .menubar{display:flex;align-items:center;gap:8px;padding:10px 14px;border-bottom:1px solid var(--c-line);flex-wrap:wrap}
.gs-cohorts .mb-pill{position:relative;display:inline-flex;align-items:center;gap:7px;height:30px;padding:0 11px;border:1px solid var(--c-line-2);border-radius:6px;background:#fff;font-size:12.5px;font-weight:600;color:var(--c-ink-2);cursor:pointer;white-space:nowrap}
.gs-cohorts .mb-pill .car{font-size:11px;color:var(--c-muted-2)}
.gs-cohorts .mb-pill:hover{border-color:var(--c-muted-2)}
.gs-cohorts .mb-pill.viz{border-color:var(--c-accent);color:var(--c-accent)}
.gs-cohorts .mb-spacer{flex:1}
.gs-cohorts .menu{position:absolute;top:36px;right:0;min-width:170px;background:#fff;border:1px solid var(--c-line);border-radius:10px;box-shadow:var(--c-sh-2);padding:6px;z-index:40;display:none}
.gs-cohorts .mb-pill .menu{left:0;right:auto}
.gs-cohorts .mb-pill.viz .menu{left:auto;right:0}
.gs-cohorts .menu.open{display:block}
.gs-cohorts .menu .mi{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:7px;font-size:13px;font-weight:600;color:var(--c-ink-2);cursor:pointer}
.gs-cohorts .menu .mi:hover{background:#F5F7FA}
.gs-cohorts .menu .mi.sel{color:var(--c-accent);background:var(--c-accent-soft)}
.gs-cohorts .menu .mi .ck{margin-left:auto;color:var(--c-accent);opacity:0}
.gs-cohorts .menu .mi.sel .ck{opacity:1}

.gs-cohorts .pad{padding:18px 20px 8px}

/* retention grid */
.gs-cohorts .grid-scroll{overflow-x:auto}
.gs-cohorts .rgrid{display:inline-grid;gap:5px;min-width:100%}
.gs-cohorts .rgrid .corner,.gs-cohorts .rgrid .colh,.gs-cohorts .rgrid .rowh,.gs-cohorts .rgrid .cell{height:42px;display:flex;align-items:center;justify-content:center;font-size:12.5px;font-weight:700;border-radius:8px}
.gs-cohorts .rgrid .colh{color:var(--c-muted);font-size:11px;text-transform:uppercase;letter-spacing:.03em;height:30px;transition:color .12s}
.gs-cohorts .rgrid .colh.hot{color:var(--c-accent)}
.gs-cohorts .rgrid .rowh{justify-content:flex-start;padding:0 12px;font-weight:700;color:var(--c-ink);white-space:nowrap;flex-direction:column;align-items:flex-start;gap:0;transition:background .12s;border-radius:8px}
.gs-cohorts .rgrid .rowh .sz{font-size:10.5px;color:var(--c-muted);font-weight:600}
.gs-cohorts .rgrid .rowh.hot{background:var(--c-accent-soft)}
.gs-cohorts .rgrid .cell{position:relative;cursor:pointer;color:#fff;transition:transform .14s ease,box-shadow .14s ease,opacity .14s ease;will-change:transform}
.gs-cohorts .rgrid .cell.empty{background:#F4F6F9;cursor:default}
.gs-cohorts .rgrid.focus .cell:not(.hot){opacity:.4}
.gs-cohorts .rgrid .cell.hot{transform:scale(1.14);box-shadow:0 10px 26px rgba(16,24,40,.22);z-index:5}
.gs-cohorts .rgrid .cell.col{transform:scale(1.05)}
.gs-cohorts .rgrid .cell.anim{opacity:0;transform:scale(.6)}
.gs-cohorts .rgrid.in .cell{opacity:1;transform:scale(1)}
@media (prefers-reduced-motion: reduce){.gs-cohorts .rgrid .cell{transition:none}}
.gs-cohorts .scalebar{display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--c-muted);font-weight:600;margin:14px 2px 4px}
.gs-cohorts .scalebar .ramp{width:150px;height:9px;border-radius:5px;background:linear-gradient(90deg,#EAF1FD,#6F9DEE,#1A4FB0)}

/* acquisition fallback table */
.gs-cohorts table.acq{width:100%;border-collapse:collapse;font-size:12.5px}
.gs-cohorts table.acq thead th{font-weight:700;color:var(--c-muted);text-transform:uppercase;letter-spacing:.04em;font-size:11px;text-align:right;padding:6px 14px 8px;border-bottom:1px solid var(--c-line);white-space:nowrap}
.gs-cohorts table.acq thead th.l{text-align:left}
.gs-cohorts table.acq tbody td{padding:10px 14px;text-align:right;border-bottom:1px solid var(--c-line);white-space:nowrap;color:var(--c-ink-2)}
.gs-cohorts table.acq tbody td.l{text-align:left;font-weight:600;color:var(--c-ink)}

/* curve */
.gs-cohorts .c-curve{width:100%;height:auto;display:block}
.gs-cohorts .c-legend{display:flex;gap:14px;flex-wrap:wrap;font-size:12px;color:var(--c-ink-2);font-weight:600;padding:6px 2px 2px}
.gs-cohorts .c-legend span{display:flex;align-items:center;gap:6px}.gs-cohorts .c-legend i{width:12px;height:3px;border-radius:2px}

.gs-cohorts .c-empty{padding:40px 20px;text-align:center;font-size:14px}
.gs-cohorts .c-tip{position:fixed;z-index:60;pointer-events:none;background:#1A1D21;color:#fff;border-radius:9px;padding:9px 11px;font-size:12px;line-height:1.45;box-shadow:0 8px 26px rgba(16,24,40,.28);opacity:0;transform:translateY(4px);transition:opacity .12s,transform .12s;max-width:240px}
.gs-cohorts .c-tip.show{opacity:1;transform:translateY(0)}
.gs-cohorts .c-tip .tt{font-weight:800;font-size:12.5px;margin-bottom:4px}
.gs-cohorts .c-tip .big{font-size:18px;font-weight:800;letter-spacing:-.02em;margin:2px 0 1px}
.gs-cohorts .c-tip .tr{display:flex;justify-content:space-between;gap:12px;color:#C7CDD6;margin-top:2px}.gs-cohorts .c-tip .tr b{color:#fff}


/* Range picker. The markup was already here (identical to AI Crawlers) — the styles never
   were, so it rendered as bare unstyled buttons. Ported from ai.css and re-scoped, rather than
   invented, so the two pickers cannot drift apart. */
.gs-cohorts .rangepick{background:#fff;border:1px solid #E9EDF3;border-radius:10px;box-shadow:0 12px 30px rgba(16,24,40,.16);min-width:236px;padding:6px}
.gs-cohorts .rp-presets{display:flex;flex-direction:column}
.gs-cohorts .rangepick .rm{display:block;width:100%;text-align:left;padding:8px 10px;border-radius:6px;font-weight:600;font-size:13px;color:#3C4350;border:0;background:none;cursor:pointer}
.gs-cohorts .rangepick .rm:hover{background:#F5F7FA}
.gs-cohorts .rangepick .rm.on{background:var(--a-soft);color:var(--a2)}
.gs-cohorts .rp-custom{border-top:1px solid #EEF1F6;margin-top:6px;padding:10px 10px 8px}
.gs-cohorts .rp-lbl{font-size:11px;text-transform:uppercase;letter-spacing:.05em;font-weight:700;color:#8C95A1;margin-bottom:8px}
.gs-cohorts .rp-dates{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.gs-cohorts .rp-dates input[type=date]{flex:1;min-width:0;height:32px;border:1px solid #D0D4DA;border-radius:6px;padding:0 8px;font-size:12.5px;color:#3C4350;background:#fff}
.gs-cohorts .rp-dates input[type=date]:focus{outline:none;border-color:var(--a);box-shadow:0 0 0 3px rgba(31,164,99,.14)}
.gs-cohorts .rp-arrow{color:#AAB2BD;font-weight:700}
.gs-cohorts .rp-apply{width:100%;height:34px;border:0;border-radius:6px;background:var(--a);color:#fff;font-weight:700;font-size:13px;cursor:pointer}
.gs-cohorts .rp-apply:hover{background:var(--a2)}