/* =============================================================================
   streak.css — Daily Check-In CALENDAR (founder redesign 2026-08-14).
   A simple 30-day emptied calendar: streak days carry a hand-drawn red X;
   the Day-7 and Day-30 reward cells glow. Scoped gwstk- (old gws- names
   collided with seasons.css). Theme-aware, responsive, reduced-motion safe.
   Card is FULL WINDOW WIDTH on desktop — same margins as the badges card.
   ========================================================================== */

.gwstk-card{
  position:relative; z-index:3;
  margin:22px clamp(14px,4vw,54px);
  color:var(--ink-hi);
}
.gwstk-shell{
  position:relative; overflow:hidden;
  padding:clamp(18px,3vw,30px);
  border:1px solid var(--hairline); border-radius:26px;
  background:linear-gradient(135deg, var(--panel), color-mix(in srgb, var(--p200) 14%, var(--raised)));
  box-shadow:0 18px 48px rgba(42,33,64,.12);
}

.gwstk-head{ display:flex; align-items:center; gap:12px; margin-bottom:16px; }
.gwstk-kicker{ font:850 11px/1.2 var(--font-num, monospace); letter-spacing:.15em; color:var(--p500); }
.gwstk-chip{
  margin-left:auto; padding:6px 14px; border-radius:999px;
  background:var(--p400); color:var(--on-accent);
  font:850 12px/1 var(--font-num, monospace); letter-spacing:.06em;
  box-shadow:0 6px 16px color-mix(in srgb, var(--p400) 30%, transparent);
}

.gwstk-loading, .gwstk-note{ color:var(--ink-mid); font:650 14px/1.55 var(--font-ui, system-ui, sans-serif); margin:6px 0 12px; }

/* -- the 30-day calendar ----------------------------------------------------- */
.gwstk-cal{
  display:grid; grid-template-columns:repeat(10, minmax(0,1fr));
  gap:clamp(6px,.9vw,12px);
}
.gwstk-day{
  position:relative; aspect-ratio:1/1; min-height:52px;
  border:1px solid var(--hairline); border-radius:14px;
  background:var(--well);
  overflow:hidden;
}
.gwstk-num{
  position:absolute; top:6px; left:8px;
  font:800 11px/1 var(--font-num, monospace); color:var(--ink-lo);
}

/* the hand-drawn red X — two crossing strokes, slightly off-angle; nth-child
   jitter varies the tilt so the marks read as drawn, not stamped */
.gwstk-x{ position:absolute; inset:0; pointer-events:none; }
.gwstk-x::before, .gwstk-x::after{
  content:""; position:absolute; left:16%; right:16%; top:50%; height:9%;
  min-height:5px; border-radius:6px;
  background:linear-gradient(90deg, #d92b1e, #ef4d33 55%, #c8271b);
  box-shadow:0 1px 2px rgba(160,20,10,.35);
}
.gwstk-x::before{ transform:rotate(43deg); }
.gwstk-x::after{ transform:rotate(-46deg); }
.gwstk-day:nth-child(2n) .gwstk-x::before{ transform:rotate(48deg); }
.gwstk-day:nth-child(2n) .gwstk-x::after{ transform:rotate(-41deg); }
.gwstk-day:nth-child(3n) .gwstk-x::before{ transform:rotate(39deg); left:13%; }
.gwstk-day:nth-child(5n) .gwstk-x::after{ transform:rotate(-50deg); right:13%; }
.gwstk-day.is-x{ background:color-mix(in srgb, #ef4d33 7%, var(--well)); }
.gwstk-day.is-x .gwstk-num{ color:var(--ink-mid); }

/* today's cell — where the next check-in lands */
.gwstk-day.is-today{ outline:2px dashed var(--p400); outline-offset:2px; }

/* milestone reward cells: 7 + 30 GLOW; 3 carries a quiet XP tag */
.gwstk-tag{
  position:absolute; left:50%; bottom:7%; transform:translateX(-50%);
  padding:2px 7px; border-radius:999px; white-space:nowrap;
  font:850 min(9px, 1.1vw + 4px)/1.2 var(--font-num, monospace); letter-spacing:.04em;
}
.gwstk-day.is-m3 .gwstk-tag{ background:var(--raised); color:var(--ink-mid); border:1px solid var(--hairline); }
.gwstk-day.is-m7, .gwstk-day.is-m30{ border-width:2px; }
.gwstk-day.is-m7{
  border-color:#f5a742;
  background:linear-gradient(145deg, color-mix(in srgb, #f5a742 16%, var(--well)), var(--well));
  animation:gwstkGlow7 2.4s ease-in-out infinite;
}
.gwstk-day.is-m7 .gwstk-tag{ background:#f5a742; color:#2b1d05; }
.gwstk-day.is-m30{
  border-color:var(--p400);
  background:linear-gradient(145deg, color-mix(in srgb, var(--p400) 18%, var(--well)), var(--well));
  animation:gwstkGlow30 2.4s ease-in-out .5s infinite;
}
.gwstk-day.is-m30 .gwstk-tag{ background:var(--p400); color:var(--on-accent); }
@keyframes gwstkGlow7{
  0%,100%{ box-shadow:0 0 6px rgba(245,167,66,.35); }
  50%    { box-shadow:0 0 18px rgba(245,167,66,.75), 0 0 34px rgba(245,167,66,.3); }
}
@keyframes gwstkGlow30{
  0%,100%{ box-shadow:0 0 6px color-mix(in srgb, var(--p400) 40%, transparent); }
  50%    { box-shadow:0 0 20px color-mix(in srgb, var(--p400) 80%, transparent),
                      0 0 38px color-mix(in srgb, var(--p400) 35%, transparent); }
}

/* -- claim + footer ----------------------------------------------------------- */
.gwstk-claim{
  display:block; margin:18px auto 0; min-height:44px; padding:0 30px;
  border:none; border-radius:999px; cursor:pointer;
  background:var(--p400); color:var(--on-accent);
  font:850 14px/44px var(--font-ui, system-ui, sans-serif); letter-spacing:.02em;
  box-shadow:0 10px 26px color-mix(in srgb, var(--p400) 30%, transparent);
  transition:transform .15s ease;
}
.gwstk-claim:hover{ transform:translateY(-1px); }
.gwstk-claim:disabled{ opacity:.62; cursor:default; transform:none; }
.gwstk-claim.is-secondary{ background:var(--raised); color:var(--ink-hi); border:1px solid var(--hairline); box-shadow:none; }
.gwstk-result{ min-height:18px; margin-top:9px; text-align:center; font:750 12.5px/1.4 var(--font-ui, system-ui, sans-serif); color:var(--gain, #0e8a80); }
.gwstk-foot{ margin-top:8px; text-align:center; font:700 11.5px/1.5 var(--font-num, monospace); color:var(--ink-lo); }

/* -- responsive --------------------------------------------------------------- */
@media (max-width:940px){
  .gwstk-cal{ grid-template-columns:repeat(6, minmax(0,1fr)); }
}
@media (max-width:560px){
  .gwstk-cal{ grid-template-columns:repeat(5, minmax(0,1fr)); gap:6px; }
  .gwstk-day{ min-height:44px; border-radius:11px; }
  .gwstk-num{ top:4px; left:6px; font-size:10px; }
  .gwstk-tag{ font-size:8px; padding:2px 5px; }
}

@media (prefers-reduced-motion:reduce){
  .gwstk-day.is-m7, .gwstk-day.is-m30{ animation:none !important;
    box-shadow:0 0 12px rgba(245,167,66,.45); }
  .gwstk-claim{ transition:none !important; }
}