/* antare-insights — scoped component styles */

.antare-insights{
  position:relative;
  width:100%;
  aspect-ratio:688/516;
  overflow:hidden;
}

/* ============================================================
     ANTARE — Insights
     Design frame = 688 x 516 (Figma 4062:17749)

     Concept: a week, understood four ways. The same 52 events read
     back as shape (when), substance (what), intent (why someone
     pressed the button) and provenance (who found it, how bad).
     Each card arrives already answered — nothing is being computed
     on screen, it is being handed over.

     Cards are swiped, not scrolled — matching the daily summary.
     ============================================================ */
.antare-insights{
    --frame-w: 688;
    --frame-h: 516;

    /* card, straight off the Figma */
    --card-w:   575px;
    --pad:     25.6px;
    --radius:    12px;
    --row-gap: 9.027px;
    --track:  #f4f1ec;
    --bar:    #677c89;
    --napa:   #ada190;

    /* severity */
    --critical:#fb2c36;
    --risk:    #f97316;
    --concern: #efb100;
    --positive:#2eb849;
    --neutral: #cdd2d5;

    --t-title: 21.987px;
    --t-row:   15.046px;
    --lh-row: 22.568px;

    --ease:      cubic-bezier(.22,1,.36,1);
    --ease-soft: cubic-bezier(.4,0,.2,1);
    --swipe:     520ms;
  }

.antare-insights,
.antare-insights *{box-sizing:border-box;margin:0;padding:0}
.antare-insights .stage{
    position:absolute; top:0; left:0;
    width:688px; height:516px;
    overflow:hidden;
    transform-origin: top left;
    background:#14171a;
    color:#fff;
  }
.antare-insights .bg{ position:absolute; inset:0; width:688px; height:516px; object-fit:cover; }
.antare-insights .tint{
    position:absolute; inset:0;
    background:linear-gradient(155deg, rgba(8,11,14,.55), rgba(8,11,14,.78));
  }

  /* ---------- card deck ---------- */
.antare-insights .deck{ position:absolute; inset:0; }
.antare-insights .layer{
    position:absolute; left:56.5px; width:var(--card-w);
    will-change:transform, opacity;
  }
.antare-insights .layer.enter{ opacity:0; transform:translateY(26px) scale(.992); }
.antare-insights .layer.leave{ opacity:0; transform:translateY(-34px) scale(.988); }
.antare-insights .layer.move{
    transition:opacity var(--swipe) var(--ease-soft), transform 680ms var(--ease);
  }

  /* Contents arrive after the surface, one beat apart. Delays are
     assigned in JS by DOM order so every card cascades top-to-bottom. */
.antare-insights .rise{
    opacity:0; transform:translateY(12px);
    transition:opacity 520ms var(--ease-soft), transform 640ms var(--ease);
  }
.antare-insights .layer.on .rise{ opacity:1; transform:none; }

.antare-insights .card{
    background:rgba(250,250,250,.10);
    backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px);
    border-radius:var(--radius);
    padding:var(--pad);
    display:flex; flex-direction:column; gap:35.2px;
    border:1px solid rgba(255,255,255,.08);
    box-shadow:0 26px 64px rgba(0,0,0,.34), 0 6px 16px rgba(0,0,0,.18);
  }
.antare-insights .card h2{ font-size:var(--t-title); font-weight:400; line-height:1.24; }
.antare-insights .card.tight{ gap:26px; }   /* the heatmap needs the height back */

  /* ---------- ranked rows ---------- */
.antare-insights .rows{ display:flex; flex-direction:column; gap:var(--row-gap); padding-top:1.63px; }
.antare-insights .row{
    display:flex; align-items:center; gap:12.036px;
    padding:2.006px 10.03px; border-radius:5.015px;
  }
.antare-insights .row .lab{
    flex:1 1 0; min-width:0;
    font-size:var(--t-row); line-height:var(--lh-row); font-weight:400;
    white-space:nowrap; overflow:hidden;
  }
.antare-insights .row .track{
    display:flex;                       /* NB: without this the fill stays
                                           inline and width/height do nothing */
    flex:1 1 0; min-width:0; height:11.033px;
    background:var(--track); border-radius:2.508px; overflow:hidden;
  }
.antare-insights .row .fill{
    display:block; height:100%; width:0%;
    background:var(--bar); border-radius:2.508px;
    transition:width 760ms var(--ease);
  }
.antare-insights .row .val{
    flex:0 0 auto; min-width:22px; text-align:right;
    font-size:var(--t-row); line-height:var(--lh-row); font-weight:600;
    font-variant-numeric:tabular-nums;
  }

.antare-insights .seeall{
    align-self:flex-start;
    font-size:var(--t-row); line-height:var(--lh-row); font-weight:400;
    border-bottom:1.254px dashed var(--napa); padding-bottom:1.254px;
  }

  /* ---------- grouped (detection & severity) ---------- */
.antare-insights .group{ display:flex; flex-direction:column; gap:var(--row-gap); }
.antare-insights .group + .group{ margin-top:19px; }
.antare-insights .group .head{
    font-size:12.5px; line-height:18px; font-weight:600;
    letter-spacing:.09em; text-transform:uppercase;
    opacity:.82; padding:0 10.03px; margin-bottom:2px;
  }

  /* ---------- heatmap ---------- */
.antare-insights .pills{ display:flex; gap:8px; }
.antare-insights .pill{
    padding:5px 12px; border-radius:999px;
    font-size:13px; line-height:18px; font-weight:400;
    background:rgba(255,255,255,.08); color:rgba(255,255,255,.78);
  }
.antare-insights .pill.on{ background:rgba(255,255,255,.9); color:#14171a; font-weight:500; }

.antare-insights .grid{ display:flex; flex-direction:column; gap:1.8px; }   /* design pitch: 35 + 1.8 */
.antare-insights .grid .cols{ display:flex; gap:2.6px; padding-left:48px; margin-bottom:6px; }
.antare-insights .grid .cols span{
    width:77px; font-size:13px; line-height:18px;
    opacity:.8; text-align:left;
  }
.antare-insights .grid .band{ display:flex; align-items:center; gap:2.6px; }
.antare-insights .grid .band .day{
    flex:0 0 48px; font-size:13px; line-height:18px; opacity:.8;
  }
.antare-insights .grid .cell{
    width:77px; height:35px; border-radius:2px;
    background:var(--bar);
    opacity:0;
    transition:opacity 520ms var(--ease-soft);
  }
@media (prefers-reduced-motion: reduce){
.antare-insights .layer,
.antare-insights .row .fill,
.antare-insights .grid .cell{ transition:none !important }
  }