/* Insights · the tile strip under every lane's head, and the Campaigns
   insights segment. Owned by the insights build. Tokens only, from tokens.css. */

/* ------------------------------------------------------------ the host */
.ins-host{flex:0 0 auto; min-width:0; padding:0 14px 10px 16px}
.ins-host:empty, .ins-host[hidden]{display:none}
.ins-out{display:none !important}

.ins{display:flex; flex-direction:column; gap:8px; min-width:0}
.ins-top{display:flex; align-items:center; gap:8px; min-height:26px; min-width:0}
.ins-story{display:inline-flex; align-items:center; gap:8px; min-width:0; max-width:100%; height:26px; padding:0 10px 0 8px;
  border-radius:var(--r-full); font:500 12.5px/18px var(--sans); color:var(--t1); background:var(--fill3);
  transition:background var(--d-state) var(--spring)}
.ins-story:hover{background:var(--fill2)}
.ins-story i{width:7px; height:7px; border-radius:50%; flex:0 0 auto; background:var(--c, var(--t3))}
.ins-story.warn{--c:var(--orange)}
.ins-story.ok{--c:var(--green)}
.ins-story.neutral{--c:var(--t3); color:var(--t2)}
.ins-chip{display:inline-flex; align-items:center; gap:6px; height:26px; max-width:240px; padding:0 4px 0 10px; border-radius:var(--r-full);
  background:var(--tint-soft); color:var(--tint-ink); font:600 12px/16px var(--sans); white-space:nowrap}
.ins-chip[hidden]{display:none}
.ins-chip b{font:600 11px/16px var(--mono); padding:0 6px; border-radius:var(--r-full); background:color-mix(in srgb, var(--tint) 22%, transparent)}
.ins-chip .x{display:grid; place-items:center; width:18px; height:18px; border-radius:50%}
.ins-chip .x .gi{width:10px; height:10px}
.ins-chip:hover .x{background:color-mix(in srgb, var(--tint) 24%, transparent)}
.ins-fold{width:26px; height:26px}
.ins-fold .chev{transform:translateY(1px) rotate(-135deg); transition:transform var(--d-seg) var(--spring)}
.ins.folded .ins-fold .chev{transform:translateY(-2px) rotate(45deg)}
.ins.folded .ins-row{display:none}
.ins-none{padding:2px 4px 0; font:400 12.5px/18px var(--sans); color:var(--t3)}
.ins-none[hidden]{display:none}

/* ------------------------------------------------------------ tiles */
.ins-row{display:grid; grid-auto-flow:column; grid-auto-columns:minmax(150px, 1fr); gap:8px; min-width:0;
  overflow-x:auto; overscroll-behavior-x:contain; scrollbar-width:none; scroll-snap-type:x proximity; padding:1px 1px 2px}
.ins-row::-webkit-scrollbar{display:none}
.ins-t{position:relative; display:flex; flex-direction:column; gap:2px; min-width:0; text-align:left; scroll-snap-align:start;
  padding:10px 12px 9px; border-radius:var(--r-tile); background:var(--card); border:1px solid var(--card-line);
  box-shadow:inset 0 1px 0 var(--glass-hi); color:var(--t1); font:inherit; --c:var(--t3)}
.ins-t.press{cursor:pointer; transition:transform var(--d-lift) var(--spring), background var(--d-state) var(--spring), box-shadow var(--d-state) var(--spring)}
.ins-t.press:hover{background:var(--card-hover); transform:translateY(-2px)}
.ins-t.press:active{transform:scale(.98)}
.ins-t.on{background:var(--card-hover); box-shadow:inset 0 1px 0 var(--glass-hi), 0 0 0 2px var(--tint-line)}
.ins-t.good{--c:var(--green)}
.ins-t.bad{--c:var(--orange)}
.ins-t.alarm{--c:var(--red)}
.ins-t .lab{font-size:11.5px; line-height:16px; color:var(--t2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; padding-right:58px}
.ins-t .fig{font:700 24px/28px var(--sans); letter-spacing:-.03em; white-space:nowrap; margin-top:2px; font-variant-numeric:tabular-nums}
.ins-t .fig .u{font-size:13px; font-weight:500; letter-spacing:0; color:var(--t2); margin-left:1px}
.ins-t .fig .none{color:var(--t3); font-weight:500}
.ins-t.alarm .fig{color:var(--red-ink)}
.ins-t .ft{display:flex; align-items:center; gap:6px; min-width:0; min-height:18px; margin-top:2px}
.ins-t .dl{display:inline-flex; align-items:center; gap:3px; font:600 11px/16px var(--sans); padding:1px 7px; border-radius:var(--r-full); white-space:nowrap;
  font-variant-numeric:tabular-nums; background:color-mix(in srgb, var(--c) 16%, transparent); color:color-mix(in srgb, var(--c) var(--ink-k), var(--ink-to))}
.ins-t.grey .dl{background:var(--fill2); color:var(--t2)}
.ins-t .sub{font-size:11px; line-height:15px; color:var(--t2); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.ins-t .sp{position:absolute; top:10px; right:10px; width:56px; height:18px; overflow:visible}
.ins-t .sp path{fill:none; stroke:color-mix(in srgb, var(--c) 80%, var(--t3)); stroke-width:1.4; stroke-linejoin:round; stroke-linecap:round; vector-effect:non-scaling-stroke}
.ins-t.grey .sp path{stroke:var(--t3)}
.ins-t .sp circle{fill:color-mix(in srgb, var(--c) 85%, var(--t2))}
.ins-t.grey .sp circle{fill:var(--t2)}

/* arriving with fresh numbers: a short rise, 20 ms apart, capped */
.ins-host.arrive .ins-t{animation:rise var(--d-arrive) var(--spring) backwards; animation-delay:min(calc(var(--i, 0) * 20ms), 260ms)}
.ins-host.arrive .ins-story{animation:fadein var(--d-seg) var(--spring) both}

/* waiting for the first numbers */
.ins-skel .sk{display:block; border-radius:6px; background:var(--fill3); animation:shimmer 1750ms var(--spring) infinite}
.ins-skel .sk.w1{width:240px; height:16px; border-radius:var(--r-full)}
.ins-skel .ins-t.sk{height:78px; border-radius:var(--r-tile); border:0; box-shadow:none; padding:0}

/* ------------------------------------------------------------ campaigns segment */
.ins-cmp{display:flex; flex-direction:column; min-width:0}
.ins-ch{display:flex; align-items:center; gap:8px; margin:2px 0 12px}
.ins-ch .g-seg > button[disabled]{opacity:.5; cursor:default}
.ins-plain .ins-row{grid-auto-columns:minmax(160px, 1fr)}
.ins-plain .ins-t .lab{padding-right:0}
.ins-cmp .g-h .more{margin-left:auto}
.ins-tbl{overflow-x:auto}
.ins-tn{display:flex; align-items:center; gap:8px; min-width:0}
.ins-tn .ell{font-weight:500}
.ins-arm{min-width:20px; justify-content:center; font:600 11px/16px var(--mono)}
.ins-rate{min-width:150px}
.ins-rate .rv{display:inline-block; min-width:44px; font-variant-numeric:tabular-nums}
.ins-band{position:relative; display:inline-block; vertical-align:middle; width:84px; height:8px; margin-left:8px; border-radius:var(--r-full); background:var(--fill3)}
.ins-band .b{position:absolute; top:0; bottom:0; border-radius:var(--r-full); background:color-mix(in srgb, var(--tint) 34%, transparent)}
.ins-band .p{position:absolute; top:-2px; width:3px; height:12px; margin-left:-1.5px; border-radius:2px; background:var(--tint)}

.ins-xs{display:grid; grid-template-columns:repeat(auto-fill, minmax(340px, 1fr)); gap:12px}
.ins-x{display:flex; flex-direction:column; gap:12px; padding:16px 18px}
.ins-xh{display:flex; align-items:center; gap:8px; min-width:0}
.ins-xh b{font:600 15px/20px var(--sans); min-width:0}
.ins-xd{font-size:12px}
.ins-xq{font-size:12.5px; line-height:18px; color:var(--t2)}
.ins-xarms{display:flex; flex-direction:column; gap:8px}
.ins-xa{display:grid; grid-template-columns:24px minmax(0, 1fr) 54px 64px; align-items:center; gap:10px; font-size:12.5px}
.ins-xa .ins-band{width:100%; margin:0}
.ins-xa.lead .ins-band .b{background:color-mix(in srgb, var(--green) 38%, transparent)}
.ins-xa.lead .ins-band .p{background:var(--green)}
.ins-xbar{display:block; min-width:0}
.ins-xv{text-align:right; font-weight:600}
.ins-xn{text-align:right; font-size:11.5px}
.ins-xf{display:flex; align-items:center; gap:10px; font-size:12px; min-width:0; padding-top:10px; border-top:1px solid var(--sep)}
.ins-prog{flex:1; height:4px; border-radius:var(--r-full); background:var(--fill3); overflow:hidden; min-width:40px}
.ins-prog i{display:block; height:100%; border-radius:inherit; background:var(--tint); transition:width var(--d-lift) var(--spring)}

/* ------------------------------------------------------------ phone */
@media (max-width: 430px){
  .ins-host{padding:0 0 8px}
  .ins-top{padding:0 16px}
  .ins-row{grid-auto-columns:156px; padding:1px 16px 2px; scroll-padding-left:16px}
  .ins-t{padding:9px 11px 8px}
  .ins-t .fig{font-size:22px; line-height:26px; padding-right:40px}
  .ins-t .lab{padding-right:0}
  .ins-t .sp{top:33px; right:9px; width:38px; height:14px}
  .ins-story{font-size:12px}
  .ins-chip{max-width:160px}
  .ins-xs{grid-template-columns:1fr}
  .ins-xa{grid-template-columns:24px minmax(0, 1fr) 48px 56px; gap:8px}
  .ins-rate{min-width:0}
  .ins-band{width:56px}
}

@media (prefers-reduced-motion: reduce){
  .ins-host.arrive .ins-t, .ins-host.arrive .ins-story{animation:none}
  .ins-t.press, .ins-t.press:hover, .ins-t.press:active{transform:none; transition:none}
  .ins-skel .sk{animation:none}
}