/* ==========================================================================
   case-study.css - interactive data explorer for case study pages
   (charts, segment/metric controls, summary cards, results + keyword tables)
   Layered on top of home.css + technical-seo.css; uses the shared tokens
   (--surface, --line, --chart-a/b/c, --grad, spacing, etc.).
   ========================================================================== */

.cs-explorer{margin-top:var(--s6);}

/* ---- Segmented controls (segment + metric switchers) ---- */
.cs-switch{display:flex;flex-wrap:wrap;gap:.4rem;padding:.35rem;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-pill);}
.cs-switch.cs-block{border-radius:var(--radius);}
.cs-seg{appearance:none;border:1px solid transparent;background:none;color:var(--muted);font:inherit;font-size:var(--fs-sm);font-weight:600;line-height:1;padding:.6rem 1.1rem;border-radius:var(--radius-pill);cursor:pointer;white-space:nowrap;transition:color var(--dur),background var(--dur),border-color var(--dur);}
.cs-seg:hover{color:var(--ink);background:rgba(255,255,255,.05);}
.cs-seg[aria-selected="true"]{color:#0b0e18;background:var(--ink);border-color:transparent;}
.cs-seg .cs-seg-sub{display:block;font-size:var(--fs-xs);font-weight:500;opacity:.7;margin-top:2px;}
/* Theme-aware active state: in light/evening --ink flips dark, so mirror the
   site's primary-button affordance (blue in light, warm copper in Evening). */
html:is([data-theme="light"],[data-theme="evening"]) .cs-seg:hover{background:rgba(17,24,52,.06);}
html:is([data-theme="light"],[data-theme="evening"]) .cs-seg[aria-selected="true"]{background:#3A6BE0;color:#fff;}
html[data-theme="evening"] .cs-seg[aria-selected="true"]{background:#A85F26;color:#fff;}

.cs-controls{display:flex;flex-wrap:wrap;gap:var(--s4) var(--s5);align-items:center;justify-content:space-between;margin-bottom:var(--s5);}
.cs-controls-label{font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.12em;color:var(--faint);font-weight:700;margin-right:.4rem;}
.cs-control-group{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;}

/* ---- Chart card ---- */
.cs-chartcard{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:var(--s6);box-shadow:inset 0 1px 0 rgba(255,255,255,.04);}
.cs-chart-head{margin-bottom:var(--s4);}
.cs-chart-title{font-size:1.05rem;font-weight:600;color:var(--ink);letter-spacing:-.01em;}
.cs-chart-cap{font-size:var(--fs-sm);color:var(--muted);margin-top:.35rem;line-height:1.5;}
.cs-chart-cap b{color:var(--ink);font-weight:600;}
.cs-chart-cap .cs-up{color:var(--green);font-weight:700;}

.cs-chart-wrap{position:relative;}
.cs-svg{display:block;width:100%;height:auto;touch-action:pan-y;}
.cs-svg text{font-family:"Google Sans",system-ui,sans-serif;}
.cs-axis{fill:var(--faint);font-size:11px;}
.cs-grid{stroke:var(--line);stroke-width:1;}
.cs-hover-line{stroke:var(--line-2);stroke-width:1;stroke-dasharray:4 4;}
.cs-m-base{fill:#0b0e18;stroke:var(--faint);stroke-width:2;}
.cs-m-peak{fill:var(--green);stroke:#0b0e18;stroke-width:1.6;}
.cs-m-now{fill:var(--cyan);stroke:#0b0e18;stroke-width:1.6;}
.cs-m-hover{fill:var(--ink);stroke:#0b0e18;stroke-width:1.6;}

/* floating tooltip */
.cs-tip{position:absolute;z-index:5;pointer-events:none;transform:translate(-50%,-115%);background:var(--surface-2);border:1px solid var(--line-2);border-radius:10px;padding:.5rem .7rem;box-shadow:0 8px 24px rgba(0,0,0,.4);font-size:var(--fs-xs);white-space:nowrap;opacity:0;transition:opacity .12s;}
.cs-tip.on{opacity:1;}
.cs-tip .cs-tip-d{color:var(--faint);margin-bottom:2px;}
.cs-tip .cs-tip-v{color:var(--ink);font-weight:700;font-size:var(--fs-sm);}

/* annotation chips under chart */
.cs-marks{display:flex;flex-wrap:wrap;gap:var(--s4);margin-top:var(--s5);padding-top:var(--s5);border-top:1px solid var(--line);}
.cs-mark{display:flex;align-items:center;gap:.5rem;font-size:var(--fs-sm);color:var(--muted);}
.cs-mark .cs-dot{width:10px;height:10px;border-radius:50%;flex:none;}
.cs-mark b{color:var(--ink);font-weight:600;}
.cs-dot-base{background:var(--faint);}
.cs-dot-peak{background:var(--green);box-shadow:0 0 8px rgba(91,231,176,.6);}
.cs-dot-now{background:var(--cyan);box-shadow:0 0 8px rgba(116,224,242,.55);}

/* ---- Summary scorecards ---- */
.cs-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s4);margin-top:var(--s5);}
.cs-card{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--radius);padding:var(--s5) var(--s4);text-align:center;display:flex;flex-direction:column;}
.cs-card .cs-k{font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.08em;color:var(--faint);font-weight:700;min-height:2.4em;display:flex;align-items:center;justify-content:center;}
.cs-card .cs-v{font-size:clamp(1.5rem,1rem + 1.6vw,2.1rem);font-weight:700;letter-spacing:-.02em;margin-top:auto;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;}
.cs-card .cs-v.cs-plain{background:none;-webkit-text-fill-color:var(--ink);color:var(--ink);}
.cs-card .cs-sub{font-size:var(--fs-xs);color:var(--muted);margin-top:.3rem;min-height:1.2em;}
.cs-card .cs-sub.cs-up{color:var(--green);font-weight:700;}

/* ---- Results / keyword tables ---- */
.cs-tablecard{margin-top:var(--s6);background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;}
.cs-tablecard h3{font-size:1.05rem;font-weight:600;padding:var(--s5) var(--s5) 0;margin:0;}
.cs-tablecard .cs-tnote{font-size:var(--fs-xs);color:var(--faint);padding:.35rem var(--s5) var(--s4);}
.cs-tablescroll{overflow-x:auto;}
table.cs-table{width:100%;border-collapse:collapse;font-size:var(--fs-sm);min-width:34rem;}
.cs-table th,.cs-table td{padding:.7rem var(--s4);text-align:center;border-bottom:1px solid var(--line);white-space:nowrap;}
.cs-table th:first-child,.cs-table td:first-child{text-align:left;}
.cs-table thead th{font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.06em;color:var(--faint);font-weight:700;border-bottom-color:var(--line-2);}
.cs-table tbody tr:last-child td{border-bottom:none;}
.cs-table tbody tr:hover{background:rgba(255,255,255,.02);}
.cs-table td b{color:var(--ink);font-weight:600;}
.cs-table .cs-delta{color:var(--green);font-weight:700;}
.cs-table .cs-metric-name{color:var(--ink);font-weight:600;}

/* sortable headers */
.cs-sort{appearance:none;background:none;border:0;margin:0;padding:0;font:inherit;color:inherit;cursor:pointer;display:inline-flex;align-items:center;gap:.35rem;text-transform:uppercase;letter-spacing:.06em;font-size:var(--fs-xs);font-weight:700;}
.cs-sort:hover{color:var(--ink);}
.cs-arrow{width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid currentColor;opacity:.3;}
th[aria-sort="ascending"] .cs-arrow{border-top:0;border-bottom:5px solid currentColor;opacity:1;}
th[aria-sort="descending"] .cs-arrow{border-top:5px solid currentColor;opacity:1;}
th[aria-sort="ascending"] .cs-sort,th[aria-sort="descending"] .cs-sort{color:var(--ink);}

/* keyword table specifics */
.cs-kwt td:first-child{font-weight:600;color:var(--ink);}
.cs-kwt .cs-prevcell{color:var(--muted);}
/* traffic-change column: gains green, losses red */
.cs-table td.cs-tc{font-weight:700;}
.cs-table td.cs-tc.cs-up{color:var(--green);}
.cs-table td.cs-tc.cs-down{color:#FF8E8E;}
/* conditional-format (heatmap) cells for Volume and KD; background is set inline per value */
.cs-table td.cs-heat{font-weight:600;color:var(--ink);}
.cs-pos{display:inline-flex;align-items:center;justify-content:center;min-width:2rem;padding:.15rem .45rem;border-radius:var(--radius-pill);font-weight:700;font-size:var(--fs-xs);}
.cs-pos-top3{background:rgba(91,231,176,.14);color:var(--green);}
.cs-pos-top10{background:rgba(116,224,242,.12);color:var(--cyan);}
.cs-pos-p2{background:rgba(255,255,255,.06);color:var(--muted);}
.cs-chg{font-weight:600;}
.cs-chg.cs-up{color:var(--green);}
.cs-chg.cs-new{color:var(--violet);}
.cs-tags{display:inline-flex;gap:.3rem;}
.cs-tag{font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:.12rem .4rem;border-radius:6px;border:1px solid var(--line-2);color:var(--muted);}
.cs-tag.cs-comm{color:var(--blue);border-color:rgba(94,155,255,.4);}
.cs-tag.cs-trans{color:var(--green);border-color:rgba(91,231,176,.4);}

/* ---- Strategy pillars (numbered, full-width rows = symmetric) ---- */
.cs-pillars{display:grid;gap:var(--s4);margin-top:var(--s6);}
.cs-pillar{display:flex;gap:var(--s5);align-items:flex-start;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:var(--s5);}
.cs-pnum{flex:none;width:2.4rem;height:2.4rem;border-radius:12px;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:1.05rem;color:#0b0e18;background:var(--grad);}
/* Evening's gradient warms to dark copper; near-black numerals go white for contrast. */
html[data-theme="evening"] .cs-pnum{color:#fff;}
.cs-pillar h4{font-size:1.05rem;margin-bottom:.25rem;}
.cs-pillar p{color:var(--muted);font-size:var(--fs-sm);margin:0;}

/* honest-section dip annotation card */
.cs-diag{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s4);margin-top:var(--s5);}
.cs-diag .comp{margin:0;}

/* ---- Hero with browser-framed screenshot ---- */
.cs-hero-grid{display:grid;grid-template-columns:1fr;gap:var(--s6);align-items:center;margin-top:var(--s5);}
.cs-hero-copy .btn-row{margin-top:var(--s6);}
.cs-hero-media{min-width:0;}
@media (min-width:920px){
  .cs-hero-grid{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(var(--s6),5vw,var(--s8));}
  .cs-hero-copy h1{max-width:none;}
}

/* browser-window mockup frame (rounded, drop shadow, mac-style chrome) */
.browser-mock{margin:0;border-radius:14px;overflow:hidden;border:1px solid var(--line-2);background:var(--surface-2);box-shadow:0 28px 70px -24px rgba(0,0,0,.6),0 6px 18px -10px rgba(0,0,0,.5);}
.bm-bar{display:flex;align-items:center;gap:.5rem;padding:.6rem .85rem;background:var(--surface);border-bottom:1px solid var(--line);}
.bm-dot{width:11px;height:11px;border-radius:50%;flex:none;background:var(--line-2);}
.bm-dot:nth-child(1){background:#FF5F57;}
.bm-dot:nth-child(2){background:#FEBC2E;}
.bm-dot:nth-child(3){background:#28C840;}
.bm-url{flex:1;min-width:0;margin-left:.45rem;font-size:var(--fs-xs);color:var(--faint);background:var(--bg-2);border:1px solid var(--line);border-radius:var(--radius-pill);padding:.32rem .85rem;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.bm-shot{display:block;width:100%;height:auto;}
/* Dark mode (default theme, no data-theme attr): the surface tokens used above collapse to
   near-black against the dark hero, hiding the chrome bar and URL text. Elevate the bar and
   brighten the address pill so the browser frame reads clearly. Light/evening keep the tokens. */
html:not([data-theme]) .bm-bar{background:#262A39;border-bottom-color:rgba(255,255,255,.12);}
html:not([data-theme]) .bm-url{background:#13151F;border-color:rgba(255,255,255,.14);color:var(--muted);}

/* Stacked modules are separated by background-color alternation and the uniform
   section rhythm now, not a rule. (.cs-divide markup has been removed.) */

@media (max-width:760px){
  .cs-cards{grid-template-columns:repeat(2,1fr);}
  .cs-diag{grid-template-columns:1fr;}
  .cs-chartcard{padding:var(--s5) var(--s4);}
  .cs-controls{flex-direction:column;align-items:flex-start;}
}