/* Beyond Memories Admin: the Growth section (site/sections/growth.js). Tokens only, from bm-tokens.css, plus the chart's
   channel colors below. Google/Meta/TikTok: a categorical set checked with the dataviz validator on the light surface
   (lightness band, chroma, CVD separation ΔE ≥ 9.8, contrast ≥ 3:1). Google takes BM's gold family, darkened so a bar
   holds 3:1 on white. The other channels only ever appear as labeled badges, so their dot is a second cue, not the only one. */
:root{
  --g-google:#A9841A; --g-meta:#3466B0; --g-tiktok:#C0567A;
  --g-email:#2F7F6F; --g-organic:#4F7A2E; --g-direct:#6B7180; --g-referral:#7A5BA8; --g-other:#8B8F99;
  --g-plat:#F2F3F5; --g-plat-head:#E8EAEE; --g-ours:#FBF6E6; --g-ours-head:#F6ECCB;
}

/* top: range, model toggle, data health */
.gtop{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px 18px; align-items:center; margin:-6px 0 16px}
.grange{display:flex; flex-wrap:wrap; gap:2px 12px; align-items:baseline; min-width:0}
.grange b{font-size:16px; font-weight:600}
.gmodel{display:flex; align-items:center; gap:8px; flex-wrap:wrap; justify-content:flex-end}
.ghealth{grid-column:1 / -1; list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:6px}
.hchip{font-weight:500}
.gtop + .callout{margin:-4px 0 16px}

/* KPI row */
.gkpis{grid-template-columns:repeat(6,minmax(0,1fr))}
.gkpis .card .v{font-size:26px}
.gkpis .kt{margin:4px 0 2px}
.gkpis .kt .pill{white-space:normal}
@media (max-width:1180px){ .gkpis{grid-template-columns:repeat(3,minmax(0,1fr))} }

/* chart */
.glegend{list-style:none; margin:0; padding:12px 18px 0; display:flex; flex-wrap:wrap; gap:6px 16px; font-size:13px; color:var(--ink-2)}
.glegend li{display:inline-flex; align-items:center; gap:6px}
.gsw{display:inline-block; width:12px; height:12px; border-radius:3px; flex:none; vertical-align:-1px}
.gsw-line{height:2px; width:16px; border-radius:1px; background:var(--ink)}
.gsw-none{background:none; border:1.5px dashed var(--ink-3)}
.gchart{position:relative; padding:6px 10px 6px 8px; min-width:0}
.gsvg{display:block; max-width:100%; height:auto; overflow:visible}
.ggrid{stroke:var(--line); stroke-width:1}
.gbase{stroke:var(--line-2); stroke-width:1}
.gax{fill:var(--ink-3); font:500 11px/1 var(--sd-sans); font-variant-numeric:tabular-nums}
.gaxt{fill:var(--ink-2); font-size:11px}
.gbar{stroke:var(--surface); stroke-width:1}
.grev{fill:none; stroke:var(--ink); stroke-width:2; stroke-linejoin:round; stroke-linecap:round}
.grevpt{fill:var(--ink); stroke:var(--surface); stroke-width:1.5}
.gcross{stroke:var(--ink-3); stroke-width:1; stroke-dasharray:3 3}
.ghit{fill:transparent; cursor:crosshair}
.gtip{position:absolute; top:6px; z-index:5; pointer-events:none; background:var(--surface); border:1px solid var(--line-2); border-radius:10px; box-shadow:var(--shadow); padding:8px 10px; font-size:12.5px; display:grid; gap:2px; min-width:150px}
.gtip span{display:flex; align-items:center; gap:6px} .gtip span b{margin-left:auto; padding-left:10px; font-variant-numeric:tabular-nums}
.gdetails{border-top:1px solid var(--line)}
.gdetails summary{cursor:pointer; padding:10px 18px; font-size:13px; color:var(--accent-ink); font-weight:500}
.gdetails .tbl{border-top:1px solid var(--line)}

/* tables: platform columns cool gray, ours warm cream, a rule between them; never one column for both */
.gtbl .plat{background:var(--g-plat)}
.gtbl thead .plat{background:var(--g-plat-head)}
.gtbl .ours{background:var(--g-ours)}
.gtbl thead .ours{background:var(--g-ours-head); color:var(--gold-ink)}
.gtbl .ours-l{border-left:2px solid var(--gold)}
.gtbl tr.ggroup th{text-align:center; padding-top:8px; padding-bottom:6px; border-bottom:0}
.gtbl tr.ggroup th[rowspan]{vertical-align:bottom; text-align:left; border-bottom:1px solid var(--line)}
.gtbl tr.ggroup th.num[rowspan]{text-align:right}
.gtbl thead tr:not(.ggroup) th{font-size:10.5px}
.gtbl abbr{text-decoration:none; cursor:help}
.gtbl tr.gunk th, .gtbl tr.gunk td:not(.plat):not(.ours){background:var(--surface-2)}
.gtbl .gbelow{color:var(--risk); font-weight:600}
.gtbl tr.gbelowrow td:first-child{box-shadow:inset 3px 0 0 var(--warn)}
.gtbl tr.gbelowrow td:not(.plat):not(.ours){background:var(--warn-soft)}
.gsort{appearance:none; border:0; background:none; padding:0; font:inherit; letter-spacing:inherit; text-transform:inherit; color:inherit; cursor:pointer; white-space:nowrap}
.gsort:hover{color:var(--ink)}
.gcname{min-width:220px}
.gcn{margin-top:5px; font-weight:500; color:var(--ink)}

/* channel badge: dot + label */
.gch{display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:600; color:var(--ink); white-space:nowrap; background:var(--surface-2); border-radius:999px; padding:2px 9px 2px 7px; line-height:1.4}
.gch i{width:8px; height:8px; border-radius:999px; background:var(--g-other); flex:none}
.gch-google i{background:var(--g-google)} .gch-meta i{background:var(--g-meta)} .gch-tiktok i{background:var(--g-tiktok)}
.gch-email i{background:var(--g-email)} .gch-organic_search i{background:var(--g-organic)} .gch-direct i{background:var(--g-direct)}
.gch-referral i{background:var(--g-referral)}
.gch-unknown{background:none; border:1px dashed var(--line-2); color:var(--ink-2); font-weight:500}
.gch-unknown i{background:none; border:1.5px dashed var(--ink-3); width:7px; height:7px}
.gpath{display:flex; flex-wrap:wrap; align-items:center; gap:4px 6px; min-width:200px}
.garrow{color:var(--ink-3)}
.gsrc{font-size:12px; margin-right:2px}
.gmore{text-align:center; padding:10px 18px !important; border-top:1px solid var(--line)}

@media (max-width:860px){
  .gtop{grid-template-columns:minmax(0,1fr); margin:0 0 12px}
  .gmodel{justify-content:flex-start}
  .gkpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .gkpis .card .v{font-size:22px}
  .gchart{padding:4px 4px 4px 2px}
}
@media (max-width:520px){
  .gcname{min-width:180px}
  .gpath{min-width:150px}
  .glegend{padding:10px 14px 0; gap:4px 12px; font-size:12.5px}
}

/* phones: channel and campaign cards (platform box beside ours), journeys as one card per order */
.gcards{display:none; list-style:none; margin:0; padding:0}
.gsortpick{margin-left:auto; display:none}
@media (max-width:520px){
  .gwide{display:none}
  .gcards{display:block}
  .gsortpick{display:inline-flex; margin-left:0}
  .gcard{padding:12px 14px; border-top:1px solid var(--line)}
  .gcard:first-child{border-top:0}
  .gcard.gunk{background:var(--surface-2)}
  .gcard.gbelowrow{background:var(--warn-soft); box-shadow:inset 3px 0 0 var(--warn)}
  .gchead{display:flex; flex-wrap:wrap; align-items:center; gap:6px 8px}
  .gchead > .muted{margin-left:auto}
  .gchead > .muted b{color:var(--ink); font-weight:600}
  .gcard > .muted b{color:var(--ink); font-weight:600}
  .gcard .gcn{margin:6px 0 2px}
  .gboxes{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:8px; margin-top:8px}
  .gbox{border-radius:10px; padding:8px 10px; display:flex; flex-direction:column; gap:1px; font-size:12.5px; color:var(--ink-2); font-variant-numeric:tabular-nums; min-width:0}
  .gbox.plat{background:var(--g-plat)}
  .gbox.ours{background:var(--g-ours); box-shadow:inset 2px 0 0 var(--gold)}
  .gbox b{font-size:15px; font-weight:600; color:var(--ink)}
  .gbox b.gbelow, .gbox .gbelow{color:var(--risk); font-weight:600}
  .gbk{font-size:10px; letter-spacing:.1em; text-transform:uppercase; font-weight:600; color:var(--ink-3)}
  .gbox.ours .gbk{color:var(--gold-ink)}
  .gjn-t thead{display:none}
  .gjn-t, .gjn-t tbody{display:block}
  .gjn-t tr{display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:4px 10px; align-items:center; padding:10px 14px; border-bottom:1px solid var(--line)}
  .gjn-t tr:last-child{border-bottom:0}
  .gjn-t th, .gjn-t td{display:block; padding:0 !important; border:0 !important}
  .gjn-t td.hide-sm{display:none}
  .gjn-t td.gpathc{grid-column:1 / -1; min-width:0}
  .gjn-t .gpath{min-width:0}
}

/* ---- Automation (site/sections/growth-auto.js) ---- */
.gacards{grid-template-columns:repeat(3,minmax(0,1fr)); margin:0; padding:14px 18px 4px}
.gacards .card{box-shadow:none}
.gacards .card .v{font-size:26px}
.gacards .kt{margin:4px 0 2px}
.gacards .kt .pill{white-space:normal}
.gasums{grid-template-columns:repeat(4,minmax(0,1fr)); padding:0}
.gapadx{padding:14px 18px 16px}
.gasum .v{font-size:22px !important}
.gasum-ok{box-shadow:inset 3px 0 0 var(--ok) !important} .gasum-warn{box-shadow:inset 3px 0 0 var(--warn) !important} .gasum-bad{box-shadow:inset 3px 0 0 var(--risk) !important}
.gapad{margin:6px 18px 12px}
.gatbl td{vertical-align:top}
.gatbl .gaover{color:var(--risk); font-weight:600}
.gapl-t{border-top:1px solid var(--line)}
.gaoff{display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; padding:12px 18px; background:var(--surface-2); border-bottom:1px solid var(--line); font-size:13px}
.gaoff .pill{font-weight:600; color:var(--ink)}
.gapr-t td, .gapr-t th{padding-left:10px; padding-right:10px}
.gacamp{min-width:150px; max-width:190px}
.gareason{min-width:240px; max-width:330px}
.gaconfc{display:block; margin-top:6px}
.gaplain{color:var(--ink); line-height:1.4}
.gaeng{font-size:12px; margin-top:3px; line-height:1.35; overflow-wrap:anywhere}
.gafield{display:block; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); font-weight:600}
.gamove{font-variant-numeric:tabular-nums; white-space:nowrap}
.gamove b{font-weight:600}
.gaexp{display:flex; flex-direction:column; gap:1px; white-space:nowrap; font-size:13px}
td.gaexp{display:table-cell} td.gaexp span{display:block}
.gaguard{min-width:130px; max-width:180px}
.gawhy{font-size:12px; margin-top:3px; line-height:1.35}
.gadecide{display:flex; gap:6px; flex-wrap:wrap}
.gapr-t .gadecide{flex-direction:column}
.gadecide .btn{padding:6px 12px; font-size:13px}
.gatbl tr.gafrozen td{background:var(--risk-soft)}
.gah3{margin:0; padding:12px 18px 8px; border-top:1px solid var(--line); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); font-weight:600}
.empty.sm{padding:6px 18px 16px; text-align:left; font-size:13.5px}
.galist{list-style:none; margin:0; padding:0 18px 12px; display:grid; gap:8px}
.galist li{display:grid; grid-template-columns:minmax(150px,240px) minmax(0,1fr) auto; gap:4px 14px; align-items:center; font-size:13.5px; padding:8px 12px; border-radius:10px; background:var(--surface-2)}
.galist li > span{min-width:0; overflow-wrap:anywhere}
.gagd-t th[scope="row"]{white-space:normal; min-width:180px}
.galog{list-style:none; margin:0; padding:0}
.galog li{padding:11px 18px; border-top:1px solid var(--line); display:grid; gap:4px; min-width:0}
.galog li:first-child{border-top:0}
.galoghead{display:flex; flex-wrap:wrap; align-items:center; gap:4px 10px; font-size:12.5px; color:var(--ink-2)}
.galoghead time{font-variant-numeric:tabular-nums; color:var(--ink-2)}
.gawho{font-weight:600; color:var(--ink)}
.galogwhat{display:flex; flex-wrap:wrap; align-items:center; gap:4px 10px; font-size:13.5px; min-width:0}
.galogwhat b{font-weight:600; overflow-wrap:anywhere}
.galogwhy{font-size:12.5px; overflow-wrap:anywhere}
.gaclist{display:none}
.gaclist{list-style:none; margin:0; padding:0}

@media (max-width:1180px){ .gasums{grid-template-columns:repeat(2,minmax(0,1fr))} .gapr-w{display:none} .gapr-c{display:block} }
.gaokrow{grid-template-columns:minmax(0,1fr) auto; align-items:center}
/* card lists (phones; proposals up to 1180) */
.gacard{padding:12px 14px; border-top:1px solid var(--line); display:grid; gap:6px; min-width:0}
.gacard:first-child{border-top:0}
.gacard.gafrozen{background:var(--risk-soft)}
.gacard .gcn{margin:0}
.gacard .gchead{display:flex; flex-wrap:wrap; align-items:center; gap:6px 8px}
.gaconf{margin-left:auto; font-size:12.5px}
.gachg{display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 8px}
.gachg .gafield{display:inline}
.gaexp-c{flex-direction:row; flex-wrap:wrap; gap:2px 12px; white-space:normal}
.gadl{margin:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px 10px}
.gadl div{min-width:0} .gadl dt{font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); font-weight:600} .gadl dd{margin:2px 0 0}
@media (max-width:860px){
  .gawide{display:none}
  .gaclist{display:block}
  .galist li{grid-template-columns:minmax(0,1fr); padding:10px 12px}
  .galist li .pill{justify-self:start}
}
@media (max-width:620px){
  .gacards{grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; padding:12px 14px 4px}
  .gacards .card{padding:10px}
  .gacards .card .k{font-size:10px; letter-spacing:.06em}
  .gacards .card .v{font-size:17px}
  .gacards .kt .pill{font-size:11px; padding:2px 6px}
  .gacards .card .s{font-size:11px; line-height:1.3}
  .gasum .v{font-size:17px !important}
  .gasums{grid-template-columns:repeat(2,minmax(0,1fr)); padding:0}
  .gapadx{padding:12px 14px 14px}
  .gaoff{padding:10px 14px}
  .gah3{padding:12px 14px 8px}
  .galist{padding:0 14px 12px}
  .galog li{padding:10px 14px}
  .gapad{margin:6px 14px 12px}
}

td.gaexp .gaconfc .pill{display:inline-block}
@media (max-width:620px){ .gapl-t td, .gapl-t th{padding-left:8px; padding-right:8px} }
@media (max-width:400px){ .gapl-t{font-size:12px} .gapl-t td, .gapl-t th, .gapl-t th[scope="row"]{padding-left:6px; padding-right:6px} }