/* antare-daily-summary — scoped component styles */

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

/* ============================================================
     ANTARE — Daily summary
     Design frame = 688 x 516 (Figma 4007:29385)

     Concept: every day is already written up. You step through dates
     and each one arrives finished — impact bands counted, the day's
     shape plotted hour by hour, the highlights drawn, the top stories
     pulled. Quiet days still get a graph. You never have to go and look.

     Cards are swiped, not scrolled — each one lifts away and the next
     comes up under it.
     ============================================================ */
.antare-daily-summary{
    --frame-w: 688;
    --frame-h: 516;

    --positive:#2eb849;
    --unusual: #cdd2d5;
    --concern: #efb100;
    --risk:    #f97316;
    --critical:#fb2c36;

    --card:  rgba(250,250,250,.10);
    --chip:  rgba(255,255,255,.10);

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

    --swipe: 520ms;
  }

.antare-daily-summary,
.antare-daily-summary *{box-sizing:border-box;margin:0;padding:0}
.antare-daily-summary .stage{
    position:absolute; top:0; left:0;
    width:688px; height:516px;
    overflow:hidden;
    transform-origin: top left;
    background:#0b2b33;
    color:#fff;
  }
.antare-daily-summary .bg{ position:absolute; inset:0; width:688px; height:516px; object-fit:cover; }
.antare-daily-summary .tint{
    position:absolute; inset:0;
    background:linear-gradient(160deg, rgba(4,26,32,.28), rgba(4,20,26,.52));
  }

  /* ---------- date navigator ---------- */
.antare-daily-summary .nav{
    position:absolute; left:57px; top:36.6px;
    width:574.4px; height:52.13px;
    display:flex; align-items:center; gap:19.2px;
    z-index:5;
  }
.antare-daily-summary .nav .step{
    width:51.2px; height:51.2px; flex:0 0 51.2px;
    border-radius:50%;
    background:rgba(255,255,255,.14);
    backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
    display:flex; align-items:center; justify-content:center;
    transition:background 260ms var(--ease-soft), transform 420ms var(--ease);
  }
.antare-daily-summary .nav .step.press{ background:rgba(255,255,255,.34); transform:scale(.92); }
.antare-daily-summary .nav .step svg{ width:11px; height:19px; display:block; }
.antare-daily-summary .nav .field{
    flex:1 1 0; height:52.13px;
    border-radius:26px;
    background:rgba(255,255,255,.14);
    backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
    display:flex; align-items:center; justify-content:space-between;
    padding:0 18.85px;
    overflow:hidden;
  }
.antare-daily-summary .nav .date{
    font-size:20px; font-weight:400; letter-spacing:.1px; white-space:nowrap;
    transition:opacity 220ms var(--ease-soft), transform 380ms var(--ease);
  }
.antare-daily-summary .nav .date.swap{ opacity:0; transform:translateY(-9px); }
.antare-daily-summary .nav .cal{ width:22px; height:22px; display:block; opacity:.9; }

  /* ---------- card deck ---------- */
.antare-daily-summary .viewport{
    position:absolute; left:0; top:121px;
    width:688px; height:395px;
    overflow:hidden;
    z-index:4;
  }
.antare-daily-summary .layer{
    position:absolute; left:57px; top:0; width:574.4px;
    will-change:transform, opacity;
  }
.antare-daily-summary .layer.enter{ opacity:0; transform:translateY(42px) scale(.985); }
.antare-daily-summary .layer.leave{ opacity:0; transform:translateY(-58px) scale(.985); }
.antare-daily-summary .layer.move{
    transition:opacity var(--swipe) var(--ease-soft),
               transform var(--swipe) var(--ease);
  }

.antare-daily-summary .card{
    background:var(--card);
    backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px);
    border-radius:12px;
    padding:25.6px;
    border:1px solid rgba(255,255,255,.10);
  }

  /* ---------- impact band pills ---------- */
.antare-daily-summary .bands{ display:flex; gap:15px; width:100%; }
.antare-daily-summary .band{
    flex:1 1 0; min-width:0; height:33px;
    display:flex; align-items:center; justify-content:space-between;
    padding:4.4px 11px;
    border-radius:16.896px;
    background:var(--chip);
    border:1.1px solid currentColor;
    box-shadow:0 .704px 1.408px rgba(18,18,23,.05);
  }
.antare-daily-summary .band.zero{ opacity:.6; }            /* the design dims empty bands */
.antare-daily-summary .band .lab{ font-size:13.2px; line-height:13.2px; font-weight:400; color:#fff; }
.antare-daily-summary .band .n{ font-size:17.6px; line-height:17.6px; font-weight:700; letter-spacing:-.352px;
              color:#fff; font-variant-numeric:tabular-nums; }
.antare-daily-summary .band.b-positive{ color:var(--positive) } .band.b-unusual { color:var(--unusual)  }
.antare-daily-summary .band.b-concern{ color:var(--concern)  } .band.b-risk    { color:var(--risk)     }
.antare-daily-summary .band.b-critical{ color:var(--critical) }

  /* ---------- graph ---------- */
.antare-daily-summary .graph{ position:relative; width:100%; height:254px; margin-top:35.2px; }
.antare-daily-summary .graph .axis{
    position:absolute; left:4.32%; width:95.68%; top:236.4px;
    height:1px; background:rgba(255,255,255,.45);
  }
.antare-daily-summary .graph .yl,
.antare-daily-summary .graph .xl{
    position:absolute; font-size:16px; line-height:16.77px; font-weight:400;
    color:#fff; opacity:.92;
  }
.antare-daily-summary .graph .yl{ left:0; width:2.33%; text-align:right; }
.antare-daily-summary .graph .xl{ top:237.2px; text-align:center; }

.antare-daily-summary .bar{
    position:absolute; width:3.37%;
    display:flex; flex-direction:column-reverse; gap:1.4px;
    transform:translateX(-50%);
  }
.antare-daily-summary .seg{
    width:100%; border-radius:3px;
    transform-origin:bottom; transform:scaleY(0);
    transition:transform 700ms var(--ease);
  }
.antare-daily-summary .layer.on .seg{ transform:scaleY(1); }
.antare-daily-summary .seg.s-positive{ background:var(--positive) } .seg.s-unusual { background:var(--unusual)  }
.antare-daily-summary .seg.s-concern{ background:var(--concern)  } .seg.s-risk    { background:var(--risk)     }
.antare-daily-summary .seg.s-critical{ background:var(--critical) }

  /* ---------- highlights ---------- */
.antare-daily-summary .h2{ font-size:20px; line-height:32px; font-weight:500; }
.antare-daily-summary .hl{ display:flex; flex-direction:column; gap:11.2px; margin-top:11.2px; }
.antare-daily-summary .hl .item{ display:flex; gap:12.8px; align-items:flex-start; }
.antare-daily-summary .hl .item svg{ width:14.4px; height:14.4px; flex:0 0 14.4px; margin-top:8.5px; opacity:.9; }
.antare-daily-summary .hl .item p{ font-size:17px; line-height:32px; font-weight:400; }
.antare-daily-summary .hl .item b{ font-weight:600; }

  /* ---------- top stories ---------- */
.antare-daily-summary .stories{ display:flex; flex-direction:column; gap:12.8px; margin-top:11.2px; }
.antare-daily-summary .story{
    display:flex; gap:19.2px; height:212px;
    background:#fff; color:#1e293b;
    border-radius:12.8px; overflow:hidden;
  }
.antare-daily-summary .story .shot{ position:relative; width:142.4px; height:212px; flex:0 0 142.4px; overflow:hidden; }
.antare-daily-summary .story .shot img{ width:100%; height:100%; object-fit:cover; display:block; }
.antare-daily-summary .story .shot .pl{
    position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
    width:58px; height:58px; border-radius:50%;
    background:rgba(20,24,30,.45);
    display:flex; align-items:center; justify-content:center;
  }
.antare-daily-summary .story .body{ flex:1 1 0; min-width:0; padding:19.2px 19.2px 19.2px 0; display:flex; flex-direction:column; }
.antare-daily-summary .story .row{ display:flex; align-items:center; justify-content:space-between; }
.antare-daily-summary .story .t{ font-size:17px; line-height:26px; font-weight:600; font-variant-numeric:tabular-nums; }
.antare-daily-summary .story .id{ font-size:17px; line-height:26px; font-weight:400; color:#94a3b8; }
.antare-daily-summary .story .head{ display:flex; gap:12.8px; margin-top:19.2px; }
.antare-daily-summary .story .accent{ width:9.6px; border-radius:5px; flex:0 0 9.6px; }
.antare-daily-summary .story .accent.a-critical{ background:var(--critical) }
.antare-daily-summary .story .accent.a-risk{ background:var(--risk)     }
.antare-daily-summary .story .accent.a-concern{ background:var(--concern)  }
.antare-daily-summary .story h3{ font-size:22px; line-height:32px; font-weight:500; }
.antare-daily-summary .story .meta{ display:flex; gap:33px; margin-top:auto; padding-left:22.4px; }
.antare-daily-summary .story .meta .m{ display:flex; align-items:center; gap:9.6px; }
.antare-daily-summary .story .meta svg{ width:16px; height:16px; display:block; }
.antare-daily-summary .story .meta span{ font-size:17px; line-height:26px; color:#64748b; white-space:nowrap; }

@media (prefers-reduced-motion: reduce){ .seg,.layer,.nav .date{ transition:none !important } }