/* visitor-intelligence/assets/css/vi-segview.css — Segment View (B1). Scoped to .gs-vseg.
 *
 * REWRITTEN for the light GhostStat surface. The first version of this file was written against a
 * "dark control-room" palette — card backgrounds were rgba(255,255,255,.03) over a line colour of
 * rgba(255,255,255,.08). On the app's actual surface (--bg #F7F9FB, --card #FFFFFF) a 3%-white fill
 * is invisible and an 8%-white border is invisible, so every panel collapsed into unbordered text
 * sitting on the page background. Nothing was broken; the palette simply assumed a page that does
 * not exist here.
 *
 * The card language below is the one the Behavior / Insights / Report tabs already use (.vi2-card:
 * white, 1px #E7ECF2, 12px radius, 16px padding, one-line shadow) so all seven VI tabs now read as
 * one screen rather than two.
 */
.gs-vseg{
  --vs-line:#E7ECF2; --vs-line2:#DFE4EB; --vs-card:#fff; --vs-ink:#1B2733; --vs-ink2:#42505E;
  --vs-mut:#8C95A1; --vs-bg:#F6F8FB; --vs-track:#EDF1F6; --vs-sh:0 1px 2px rgba(20,30,45,.04);
  --vs-good:#1FA463; --vs-warn:#D97706; --vs-bad:#DC2626; --vs-blue:#2A6FE8; --vs-vio:#7C4DBE;
  color:var(--vs-ink);
}
.gs-vseg .vs-muted{color:var(--vs-mut);font-size:12.5px}
.gs-vseg .vs-i{font-size:11.5px;color:var(--vs-mut);cursor:help;margin-left:4px;vertical-align:1px}

/* card + its one-line header, matching .vi2-card / .vi2-ct */
.gs-vseg .vs-card{background:var(--vs-card);border:1px solid var(--vs-line);border-radius:12px;
  padding:16px;box-shadow:var(--vs-sh);min-width:0}
.gs-vseg .vs-h{font-size:13px;font-weight:700;margin:0 0 12px;display:flex;align-items:center;gap:6px;color:var(--vs-ink)}
.gs-vseg .vs-h > i.bi:first-child{color:var(--vs-good);font-size:13px}
.gs-vseg .vs-wide{margin-bottom:14px}

/* ── A. selector bar ─────────────────────────────────────────────────────────────────────────── */
.gs-vseg .vs-bar{display:flex;align-items:flex-start;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.gs-vseg .vs-bar-lead{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  color:var(--vs-mut);padding-top:7px;white-space:nowrap}
.gs-vseg .vs-chips{display:flex;flex-wrap:wrap;gap:6px;min-width:0}
.gs-vseg .vs-chip{border:1px solid var(--vs-line);background:#fff;color:var(--vs-ink2);
  border-radius:20px;padding:6px 13px;font-size:12.5px;font-weight:600;cursor:pointer;
  box-shadow:var(--vs-sh);
  transition:transform .12s ease,box-shadow .12s ease,border-color .12s ease,color .12s ease}
.gs-vseg .vs-chip:hover{transform:translateY(-1px);border-color:var(--vs-good);color:var(--vs-good);
  box-shadow:0 2px 6px rgba(16,24,40,.09)}
.gs-vseg .vs-chip.on{border-color:var(--vs-good);background:#E7F5EC;color:#0F7A44;font-weight:700}
.gs-vseg .vs-chip .vs-dim{color:var(--vs-mut);font-weight:600;margin-right:5px}
.gs-vseg .vs-chip.on .vs-dim{color:#4E9A74}
.gs-vseg .vs-chip.saved::before{content:"\F586";font-family:bootstrap-icons;margin-right:5px;font-size:10px;opacity:.8}

/* ── B. KPI + triad cards ────────────────────────────────────────────────────────────────────── */
.gs-vseg .vs-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;margin-bottom:14px}
.gs-vseg .vs-grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-bottom:14px}
@media(max-width:991.98px){.gs-vseg .vs-grid3{grid-template-columns:minmax(0,1fr)}}
.gs-vseg .vs-kpi{background:var(--vs-card);border:1px solid var(--vs-line);border-radius:12px;
  padding:14px 16px;box-shadow:var(--vs-sh);min-width:0;
  transition:transform .16s,box-shadow .16s,border-color .16s}
.gs-vseg .vs-kpi:hover{transform:translateY(-2px);box-shadow:0 2px 5px rgba(16,24,40,.10);border-color:var(--vs-line2)}
.gs-vseg .vs-kpi-l{font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--vs-mut);font-weight:700}
.gs-vseg .vs-kpi-v{font-size:24px;font-weight:800;line-height:1.15;margin-top:3px;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;color:var(--vs-ink)}
.gs-vseg .vs-kpi-s{font-size:11.5px;color:var(--vs-mut);margin-top:2px}
.gs-vseg .vs-kpi-bar{height:5px;border-radius:3px;background:var(--vs-track);margin-top:9px;overflow:hidden}
.gs-vseg .vs-kpi-bar>i{display:block;height:100%;border-radius:3px;transition:width .5s ease}
.gs-vseg .vs-kpi.pulse{animation:vsPulse .85s ease}
@keyframes vsPulse{0%{box-shadow:0 0 0 0 rgba(31,164,99,.30)}70%{box-shadow:0 0 0 10px rgba(31,164,99,0)}100%{box-shadow:0 0 0 0 rgba(31,164,99,0)}}

/* ── C. persona strip ────────────────────────────────────────────────────────────────────────── */
.gs-vseg .vs-row{margin-bottom:10px}.gs-vseg .vs-row:last-child{margin-bottom:0}
.gs-vseg .vs-row-t{display:flex;gap:8px;align-items:center;font-size:12.5px;color:var(--vs-ink2);text-transform:capitalize}
.gs-vseg .vs-row-n{margin-left:auto;color:var(--vs-mut);font-variant-numeric:tabular-nums;text-transform:none}
.gs-vseg .vs-row-bar{height:7px;border-radius:4px;background:var(--vs-track);margin-top:5px;overflow:hidden}
.gs-vseg .vs-row-bar>i{display:block;height:100%;border-radius:4px;transition:width .45s ease}

/* ── D. journey rings ────────────────────────────────────────────────────────────────────────── */
.gs-vseg .vs-rings{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.gs-vseg .vs-ring{text-align:center;cursor:help;border-radius:9px;padding:6px 2px;transition:background .12s ease}
.gs-vseg .vs-ring:hover{background:var(--vs-bg)}
.gs-vseg .vs-ring svg{display:block;margin:0 auto}
/* the track ring used to be an inline rgba(255,255,255,.09) stroke — a white ring on a white card.
   It is a class now so the colour lives here with the rest of the palette. */
.gs-vseg .vs-ring-tr{stroke:var(--vs-track)}
.gs-vseg .vs-ring-l{font-size:11px;color:var(--vs-mut);margin-top:4px;text-transform:capitalize}
@media(max-width:575.98px){.gs-vseg .vs-rings{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ── E. trajectory ───────────────────────────────────────────────────────────────────────────── */
.gs-vseg .vs-spark{width:100%;height:110px;display:block}

/* ── I. insights ─────────────────────────────────────────────────────────────────────────────── */
.gs-vseg .vs-ins{display:flex;gap:10px;align-items:flex-start;padding:11px 13px;margin-bottom:9px;
  border:1px solid var(--vs-line);border-left:4px solid var(--vs-line2);border-radius:10px;background:#fff}
.gs-vseg .vs-ins:last-child{margin-bottom:0}
.gs-vseg .vs-ins b{display:block;font-size:12.5px;margin-bottom:3px;color:var(--vs-ink)}
.gs-vseg .vs-ins span{font-size:12px;color:var(--vs-ink2);line-height:1.5}
.gs-vseg .vs-ins.good{border-left-color:var(--vs-good);background:#F4FBF7}
.gs-vseg .vs-ins.warn{border-left-color:var(--vs-warn);background:#FFFAF2}
.gs-vseg .vs-ins.bad{border-left-color:var(--vs-bad);background:#FEF6F6}
.gs-vseg .vs-ins.info{border-left-color:var(--vs-blue);background:#F5F8FE}

/* ── deep-link tiles ─────────────────────────────────────────────────────────────────────────── */
.gs-vseg .vs-links{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px}
.gs-vseg .vs-link{display:block;background:#fff;border:1px solid var(--vs-line);border-radius:10px;
  padding:10px 12px;text-decoration:none;color:var(--vs-ink);box-shadow:var(--vs-sh);
  transition:border-color .12s ease,transform .12s ease,box-shadow .12s ease}
.gs-vseg .vs-link:hover{border-color:var(--vs-good);transform:translateY(-1px);box-shadow:0 2px 6px rgba(16,24,40,.09)}
.gs-vseg .vs-link b{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:12.5px;font-weight:700}
.gs-vseg .vs-link span{display:block;font-size:11.5px;color:var(--vs-mut);margin-top:3px;line-height:1.45}
.gs-vseg .vs-tagf{font-size:10px;border-radius:20px;padding:1px 8px;font-weight:700;letter-spacing:.02em}
.gs-vseg .vs-tagf.on{background:#E7F3EC;color:#0F7A44}
.gs-vseg .vs-tagf.off{background:var(--vs-bg);color:var(--vs-mut)}

/* ── unavailable note ────────────────────────────────────────────────────────────────────────── */
.gs-vseg .vs-note{border:1px solid #F3D9AE;background:#FFF8EC;color:#8A5B08;
  border-radius:10px;padding:11px 13px;font-size:12.5px;margin-bottom:14px}

@media(prefers-reduced-motion:reduce){.gs-vseg .vs-kpi.pulse{animation:none}}