/* ============================================================
   ⚠ Body class is 'overview'. Checked against every class in app.css
   before choosing it — see the .flags collision noted in theme-flags.css.

   theme-overview.css — the course hub as mission control.

   VISUAL ONLY. The inline script keeps every hook it uses:
     #alerts #stats #rule #upcoming #foot
   plus .stat/.num/.lbl, .topic/.topic-head/.tw/.tt/.tm/.badge and
   .card/.card-link. No markup, text, value or link is changed.
   ============================================================ */

body.overview {
  background:
    linear-gradient(90deg,
      rgba(2, 8, 18, .56) 0%,
      rgba(2, 8, 18, .34) 50%,
      rgba(2, 8, 18, .22) 100%),
    url("/img/overview-bg.jpg") center center / cover no-repeat fixed,
    #020812;
}

body.overview main.wrap { max-width: 1240px; padding: 48px 28px 70px; }

/* ---------- hero ---------- */
body.overview .page-title {
  font-size: clamp(2.4rem, 3.9vw, 3.15rem);
  font-weight: 780;
  letter-spacing: -0.02em;
  text-shadow: 0 2px 30px rgba(0, 0, 0, .5);
}
body.overview .page-sub {
  font-size: clamp(1.05rem, 1.25vw, 1.18rem);
  color: #C3CFDE;
  margin-bottom: 26px;
}

/* ---------- four metrics ---------- */
body.overview #stats {
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 38px;
}
body.overview #stats .stat {
  position: relative;
  min-height: 128px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 22px;
  padding-bottom: 30px;
  border-radius: 14px;
  background: linear-gradient(135deg,
    rgba(5, 24, 46, .80),
    rgba(2, 14, 30, .62));
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(95, 170, 255, .55);
  box-shadow:
    0 18px 45px rgba(0, 0, 0, .24),
    0 0 18px rgba(50, 130, 255, .06),
    inset 0 1px 0 rgba(255, 255, 255, .05);
}
body.overview #stats .num { font-size: clamp(2.1rem, 2.9vw, 2.7rem); font-weight: 780; }
body.overview #stats .lbl { font-size: 13px; letter-spacing: .04em; color: #CBD5E2; }

body.overview #stats .stat:nth-child(1) .num { color: #53E1AE; }
body.overview #stats .stat:nth-child(2) .num,
body.overview #stats .stat:nth-child(3) .num { color: #82BFFF; }
body.overview #stats .stat:nth-child(4) .num { color: #FFE22E; }

/* icon, top-right */
body.overview #stats .stat::before {
  content: "";
  position: absolute;
  top: 20px; right: 20px;
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(120, 175, 245, .32);
  background-color: rgba(70, 130, 255, .10);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 17px 17px;
}
body.overview #stats .stat:nth-child(1)::before {
  border-color: rgba(83, 225, 174, .36); background-color: rgba(83, 225, 174, .10);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2353E1AE' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9' stroke-opacity='.34'/%3E%3Cpath d='M12 3a9 9 0 0 1 8.5 6'/%3E%3C/svg%3E");
}
body.overview #stats .stat:nth-child(2)::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2382BFFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z'/%3E%3Cpolyline points='14 3 14 8 19 8'/%3E%3Cline x1='9' y1='13' x2='15' y2='13'/%3E%3Cline x1='9' y1='17' x2='13' y2='17'/%3E%3C/svg%3E");
}
body.overview #stats .stat:nth-child(3)::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2382BFFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.5 4.5a3 3 0 0 0-3 3 3 3 0 0 0-1.5 5.6V17a3 3 0 0 0 4.5 2.6'/%3E%3Cpath d='M14.5 4.5a3 3 0 0 1 3 3 3 3 0 0 1 1.5 5.6V17a3 3 0 0 1-4.5 2.6'/%3E%3Cline x1='12' y1='4' x2='12' y2='20'/%3E%3C/svg%3E");
}
body.overview #stats .stat:nth-child(4)::before {
  border-color: rgba(255, 210, 40, .34); background-color: rgba(255, 210, 40, .09);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFE22E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3Cline x1='8' y1='3' x2='8' y2='7'/%3E%3Cline x1='16' y1='3' x2='16' y2='7'/%3E%3C/svg%3E");
}

/* decorative accent rule along the bottom — not a data value */
body.overview #stats .stat::after {
  content: "";
  position: absolute;
  left: 22px; right: 22px; bottom: 16px;
  height: 3px;
  border-radius: 999px;
  background: rgba(120, 170, 220, .18);
}
body.overview #stats .stat:nth-child(1)::after { background: linear-gradient(90deg, #53E1AE 34%, rgba(120,170,220,.18) 34%); }
body.overview #stats .stat:nth-child(2)::after { background: linear-gradient(90deg, #82BFFF 34%, rgba(120,170,220,.18) 34%); }
body.overview #stats .stat:nth-child(3)::after { background: linear-gradient(90deg, #82BFFF 34%, rgba(120,170,220,.18) 34%); }
body.overview #stats .stat:nth-child(4)::after { background: linear-gradient(90deg, #FFE22E 34%, rgba(120,170,220,.18) 34%); }

/* ---------- section rhythm ---------- */
body.overview main section { margin-bottom: 32px; }
body.overview main h2 { margin-bottom: 15px; }

/* ---------- tool cards ---------- */
body.overview .grid { grid-template-columns: repeat(3, 1fr); gap: 18px; }
body.overview .grid .card {
  position: relative;
  min-height: 162px;
  padding: 22px;
  border-radius: 14px;
  background: linear-gradient(135deg,
    rgba(5, 25, 47, .82),
    rgba(2, 14, 30, .66));
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  border: 1px solid rgba(95, 170, 255, .48);
  box-shadow:
    0 18px 45px rgba(0, 0, 0, .24),
    inset 0 1px 0 rgba(255, 255, 255, .045);
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
body.overview .grid .card h3 {
  font-size: 1.32rem;
  font-weight: 700;
  color: #fff;
  padding-right: 2.5rem;
}
body.overview .grid .card p { font-size: 15.5px; color: #C2CEDD; line-height: 1.5; }

/* No ::before identity icon here on purpose: the card titles already
   contain the existing emoji (🚩 🎙 🔒) and the spec keeps that text
   exactly, so adding an SVG mark rendered every icon twice. */

/* chevron only on cards that genuinely link */
body.overview a.card-link::after {
  content: "";
  position: absolute;
  top: 24px; right: 22px;
  width: 28px; height: 28px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2382BFFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 5 16 12 9 19'/%3E%3C/svg%3E") center/20px no-repeat;
  opacity: .7;
  transition: transform .2s ease, opacity .2s ease;
}
body.overview a.card-link:hover {
  transform: translateY(-2px);
  border-color: rgba(120, 190, 255, .82);
  box-shadow:
    0 18px 45px rgba(0, 0, 0, .28),
    0 0 24px rgba(70, 140, 255, .10);
}
body.overview a.card-link:hover::after { transform: translateX(3px); opacity: 1; }

/* ---------- the rule panel ---------- */
body.overview main > section:nth-of-type(2) .card,
body.overview #rule { }
body.overview main section .card:has(#rule) {
  background: linear-gradient(135deg,
    rgba(20, 28, 38, .78),
    rgba(7, 17, 29, .66));
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 205, 45, .52);
  border-left: 3px solid #FFE22E;
  border-radius: 14px;
  box-shadow:
    0 18px 45px rgba(0, 0, 0, .25),
    0 0 25px rgba(255, 200, 30, .07);
  padding: 24px;
}
body.overview #rule {
  background: rgba(1, 10, 21, .38);
  border: 1px solid rgba(255, 205, 45, .35);
  border-radius: 10px;
  padding: 17px 20px;
  font-size: 16px;
  color: #EDF2FA;
}
body.overview #rule + p {
  background: rgba(1, 10, 21, .38);
  border: 1px solid rgba(255, 205, 45, .22);
  border-radius: 10px;
  padding: 17px 20px;
  margin-top: 10px !important;
  font-size: 15.5px !important;
}
body.overview main section .card:has(#rule) h2,
body.overview main h2 { color: #fff; }

/* ---------- next-up timeline ---------- */
body.overview #upcoming {
  position: relative;
  background: linear-gradient(135deg,
    rgba(4, 22, 43, .82),
    rgba(2, 13, 29, .68));
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(90, 165, 255, .55);
  border-radius: 14px;
  padding: 12px 20px 12px 48px;
  overflow: hidden;
}
body.overview #upcoming::before {
  content: "";
  position: absolute;
  left: 26px; top: 26px; bottom: 26px;
  width: 1px;
  background: linear-gradient(#6FA8FF, rgba(80, 145, 255, .28));
}
body.overview #upcoming .topic {
  position: relative;
  background: none;
  border: 0;
  border-bottom: 1px solid rgba(100, 160, 220, .10);
  border-radius: 0;
  margin: 0;
}
body.overview #upcoming .topic:last-child { border-bottom: 0; }
body.overview #upcoming .topic::before {
  content: "";
  position: absolute;
  left: -27px;
  top: 50%;
  transform: translateY(-50%);
  width: 11px; height: 11px;
  border-radius: 50%;
  background: #061426;
  border: 2px solid #6FA8FF;
  box-shadow: 0 0 9px rgba(111, 168, 255, .7);
}
body.overview #upcoming .topic-head {
  padding: 12px 0;
  min-height: 72px;
  cursor: default;
}
body.overview #upcoming .topic-head:hover { background: none; }
body.overview #upcoming .tt { font-size: 17.5px; font-weight: 650; color: #78BCFF; }
body.overview #upcoming .tm { font-size: 14px; color: #C3CEDB; }
body.overview #upcoming .badge {
  padding: 6px 13px;
  border-radius: 999px;
  background: rgba(25, 18, 0, .40);
  border: 1px solid rgba(255, 205, 25, .72);
  color: #FFE22E;
  font-weight: 650;
  box-shadow: 0 0 15px rgba(255, 205, 30, .08);
}
body.overview #upcoming .badge.danger {
  border-color: rgba(255, 53, 109, .65);
  background: rgba(35, 5, 14, .36);
  color: #FF7A9E;
}

/* ---------- alert strip ---------- */
body.overview #alerts .notice {
  background: rgba(6, 20, 38, .62);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 11px;
}

/* ---------- footer ---------- */
body.overview .footer {
  font-size: 12.5px;
  color: #8999AD;
  text-align: center;
  border-top: 1px solid rgba(100, 160, 220, .18);
  padding: 18px 0 5px;
}

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  body.overview #stats { grid-template-columns: repeat(2, 1fr); }
  body.overview .grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
  body.overview {
    background:
      linear-gradient(rgba(2, 8, 18, .72), rgba(2, 8, 18, .84)),
      url("/img/overview-bg-mobile.jpg") center top / cover no-repeat scroll,
      #020812;
  }
  body.overview main.wrap { padding: 28px 17px 50px; }
  body.overview .page-title { font-size: 2.2rem; }
  body.overview .grid { grid-template-columns: 1fr; }
  body.overview #upcoming { padding: 10px 16px 10px 40px; }
  body.overview #upcoming::before { left: 20px; }
  body.overview #upcoming .topic::before { left: -25px; }
  body.overview #upcoming .topic-head { flex-wrap: wrap; gap: .6rem; }
}
@media (max-width: 440px) {
  body.overview #stats { grid-template-columns: 1fr; }
}

/* ---------- forced colors ---------- */
@media (forced-colors: active) {
  body.overview, body.overview #stats .stat, body.overview .card,
  body.overview #upcoming, body.overview #upcoming::before,
  body.overview #upcoming .topic::before, body.overview .badge,
  body.overview #rule, body.overview .notice { forced-color-adjust: none; }
  body.overview {
    background:
      linear-gradient(90deg,
        rgba(2, 8, 18, .60) 0%, rgba(2, 8, 18, .40) 50%, rgba(2, 8, 18, .28) 100%),
      url("/img/overview-bg.jpg") center center / cover no-repeat fixed,
      #020812 !important;
  }
  body.overview #stats .stat,
  body.overview .grid .card,
  body.overview #upcoming {
    background: linear-gradient(135deg,
      rgba(5, 25, 47, .88), rgba(2, 14, 30, .74)) !important;
    border: 1px solid rgba(110, 175, 255, .55) !important;
  }
  body.overview main section .card:has(#rule) {
    background: linear-gradient(135deg,
      rgba(20, 28, 38, .86), rgba(7, 17, 29, .74)) !important;
    border: 1px solid rgba(255, 205, 45, .6) !important;
    border-left: 3px solid #FFE22E !important;
  }
  body.overview #stats .stat:nth-child(1) .num { color: #53E1AE !important; }
  body.overview #stats .stat:nth-child(2) .num,
  body.overview #stats .stat:nth-child(3) .num { color: #82BFFF !important; }
  body.overview #stats .stat:nth-child(4) .num { color: #FFE22E !important; }
  body.overview #upcoming .tt { color: #78BCFF !important; }
  body.overview #upcoming .tm { color: #C3CEDB !important; }
  body.overview .badge { color: #FFE22E !important; }
  body.overview .grid .card h3 { color: #fff !important; }
  body.overview .grid .card p { color: #C2CEDD !important; }
  @media (max-width: 760px) {
    body.overview {
      background:
        linear-gradient(rgba(2, 8, 18, .72), rgba(2, 8, 18, .84)),
        url("/img/overview-bg-mobile.jpg") center top / cover no-repeat scroll,
        #020812 !important;
    }
  }
}