/* ============================================================
   ⚠ The body class is 'flagboard', NOT 'flags'. app.css already uses
   .flags for the flag-chip grid inside a topic, so putting 'flags' on
   <body> makes the entire page display:grid and the layout collapses.

   theme-flags.css — the Flag Board as a mission tracker.

   VISUAL ONLY. flags.js keeps every hook it relies on:
     #stats #bar #rule #topics #other #export #importFile
     .topic .topic-head .topic-body .tw .tt .tm .tc .badge
     .flags .flag .fn .fb .stat .num .lbl
   The only JS change was a presentational progress bar computed from the
   same got/flag_count data that already drives the "0/8" counter.

   Structure: #topics and #other become ONE glass container each, and the
   .topic children become borderless rows inside them. No markup rewrite.
   ============================================================ */

body.flagboard {
  background:
    linear-gradient(90deg,
      rgba(2, 8, 18, .72) 0%,
      rgba(2, 8, 18, .54) 48%,
      rgba(2, 8, 18, .40) 100%),
    url("/img/tracker-bg.jpg") center center / cover no-repeat fixed,
    #020812;
}

body.flagboard main.wrap { max-width: 1240px; padding: 36px 28px 80px; }

/* ---------- head ---------- */
body.flagboard .page-title { font-size: clamp(2.3rem, 3.8vw, 3rem); font-weight: 780; }
body.flagboard .page-title::before {
  content: "";
  display: inline-block;
  width: .78em; height: .78em;
  margin-right: .42rem;
  vertical-align: -0.04em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FF356D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 21V4'/%3E%3Cpath d='M4 4h11l-1.6 3.6L15 11H4z' fill='%23FF356D' fill-opacity='.22'/%3E%3C/svg%3E") center/contain no-repeat;
}
body.flagboard .page-sub { font-size: 18px; color: #D6DFEA; margin-bottom: 1.25rem; }

/* the "does not hold flag values" strip */
body.flagboard .notice {
  background: rgba(6, 20, 38, .58);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(105, 165, 255, .26);
  border-left: 2px solid rgba(105, 165, 255, .7);
  border-radius: 11px;
  padding: 16px 20px;
  font-size: 16px;
  color: #B5C1D1;
  margin-bottom: 1.75rem;
}
body.flagboard .notice strong { color: #EAF1FF; }

/* ---------- four HUD metrics ---------- */
body.flagboard #stats { grid-template-columns: repeat(4, 1fr); gap: 16px; }
body.flagboard #stats .stat {
  position: relative;
  min-height: 118px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 1.2rem 1.35rem;
  border-radius: 14px;
  background: linear-gradient(135deg,
    rgba(7, 24, 45, .84),
    rgba(3, 13, 27, .66));
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(100, 165, 255, .40);
  box-shadow:
    0 18px 42px rgba(0, 0, 0, .24),
    inset 0 1px 0 rgba(255, 255, 255, .05);
}
body.flagboard #stats .num { font-size: clamp(2rem, 2.7vw, 2.5rem); font-weight: 780; }
body.flagboard #stats .lbl { font-size: 13px; letter-spacing: .04em; color: #C1CCDA; }

/* semantic accent on the number and edge only — never the whole card */
body.flagboard #stats .stat:nth-child(1) .num { color: #62D49B; }
body.flagboard #stats .stat:nth-child(1) { border-color: rgba(98, 212, 155, .38); }
body.flagboard #stats .stat:nth-child(2) .num { color: #82ADFF; }
body.flagboard #stats .stat:nth-child(3) .num { color: #FFE22E; }
body.flagboard #stats .stat:nth-child(3) { border-color: rgba(255, 210, 40, .34); }
body.flagboard #stats .stat:nth-child(4) .num { color: #82ADFF; }

body.flagboard #stats .stat::after {
  content: "";
  position: absolute;
  top: 1.15rem; right: 1.15rem;
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 1px solid rgba(120, 170, 240, .30);
  background-color: rgba(70, 130, 255, .09);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 16px 16px;
}
body.flagboard #stats .stat:nth-child(1)::after {
  border-color: rgba(98, 212, 155, .34); background-color: rgba(98, 212, 155, .09);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2362D49B' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9' stroke-opacity='.35'/%3E%3Cpath d='M12 3a9 9 0 0 1 9 9'/%3E%3C/svg%3E");
}
body.flagboard #stats .stat:nth-child(2)::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2382ADFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='4 7 6.5 9.5 11 5'/%3E%3Cpolyline points='4 16 6.5 18.5 11 14'/%3E%3Cline x1='14' y1='8' x2='20' y2='8'/%3E%3Cline x1='14' y1='17' x2='20' y2='17'/%3E%3C/svg%3E");
}
body.flagboard #stats .stat:nth-child(3)::after {
  border-color: rgba(255, 210, 40, .32); background-color: rgba(255, 210, 40, .08);
  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%3Cpolyline points='3 5 3 10 8 10'/%3E%3Cpath d='M3.6 14a9 9 0 1 0 1.2-7.2L3 10'/%3E%3C/svg%3E");
}
body.flagboard #stats .stat:nth-child(4)::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2382ADFF' 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");
}

/* overall bar under the metrics */
body.flagboard #bar {
  background: rgba(100, 160, 220, .14);
  border: 0; height: 6px;
}
body.flagboard #bar > span { background: linear-gradient(90deg, #4D8FFF, #74B6FF); }

/* ---------- the resubmission rule ---------- */
body.flagboard main > .card {
  background: linear-gradient(90deg,
    rgba(17, 29, 45, .84),
    rgba(6, 19, 35, .72));
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 205, 50, .24);
  border-left: 3px solid rgba(255, 215, 40, .82);
  border-radius: 12px;
  padding: 20px 24px;
}
body.flagboard #rule { font-size: 16px; color: #E2E9F4; }

/* ---------- ONE glass container per list ---------- */
body.flagboard #topics,
body.flagboard #other {
  background: linear-gradient(135deg,
    rgba(5, 22, 42, .84),
    rgba(2, 13, 28, .72));
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(85, 155, 245, .48);
  border-radius: 15px;
  box-shadow: 0 22px 55px rgba(0, 0, 0, .28);
  overflow: hidden;
}
body.flagboard #other { border-color: rgba(85, 155, 245, .32); }

/* rows lose their own card chrome */
body.flagboard .topic {
  background: none;
  border: 0;
  border-bottom: 1px solid rgba(110, 165, 220, .10);
  border-radius: 0;
  margin: 0;
  border-left: 3px solid transparent;
}
body.flagboard #topics .topic:last-child,
body.flagboard #other .topic:last-child { border-bottom: 0; }

body.flagboard .topic[data-state="done"]    { border-left-color: #62D49B; }
body.flagboard .topic[data-state="partial"] { border-left-color: #FFE22E; }
body.flagboard .topic[data-state="overdue"] { border-left-color: #FF356D; }

body.flagboard .topic-head { padding: 16px 20px; min-height: 76px; gap: 1.25rem; }
body.flagboard .topic-head:hover { background: rgba(70, 130, 255, .055); }
body.flagboard .tt {
  font-size: 17.5px;
  font-weight: 650;
  color: #82B8FF;
  transition: color .18s ease;
}
body.flagboard .topic-head:hover .tt { color: #A9C7FF; }
body.flagboard .tm { font-size: 14px; color: #B8C5D5; }

/* progress: number + bar, same data as the counter */
body.flagboard .tprog {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 132px;
  flex: none;
}
body.flagboard .tc { font-size: 14px; color: #D6DFEA; text-align: right; }
body.flagboard .tbar {
  height: 5px;
  border-radius: 999px;
  background: rgba(100, 160, 220, .14);
  overflow: hidden;
}
body.flagboard .tbar > span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #4D8FFF, #74B6FF);
  transition: width .25s ease;
}
body.flagboard .tbar.full > span { background: linear-gradient(90deg, #3FAE79, #62D49B); }

/* days-left pills */
body.flagboard .badge {
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 650;
  border: 1px solid rgba(255, 205, 30, .58);
  background: rgba(25, 20, 2, .32);
  color: #FFE22E;
}
body.flagboard .badge.danger { border-color: rgba(255, 53, 109, .6); background: rgba(35, 5, 14, .34); color: #FF7A9E; }
body.flagboard .badge.warn   { border-color: rgba(255, 205, 30, .7); color: #FFE22E; }

/* expanded flags — inset, inside the same glass */
body.flagboard .topic-body {
  background: rgba(0, 8, 18, .34);
  border-top: 1px solid rgba(100, 160, 220, .12);
  padding: 16px 20px 20px;
}
body.flagboard .flag {
  background: rgba(4, 16, 32, .55);
  border: 1px solid rgba(100, 160, 220, .22);
  border-radius: 8px;
}
body.flagboard .flag:hover { border-color: rgba(110, 165, 255, .5); }
body.flagboard .flag.got {
  background: rgba(98, 212, 155, .11);
  border-color: rgba(98, 212, 155, .55);
}
body.flagboard .flag input { accent-color: #62D49B; }
body.flagboard .flag .fn { color: #CFE0F5; }

/* unknown values read amber, not as errors */
body.flagboard #other .tm { color: #B8C5D5; }

/* ---------- backup panel ---------- */
body.flagboard main > section:last-of-type .card {
  background: linear-gradient(135deg,
    rgba(8, 24, 42, .84),
    rgba(3, 14, 28, .72));
  border: 1px solid rgba(105, 165, 255, .32);
  border-left: 2px solid rgba(255, 210, 40, .58);
  border-radius: 14px;
  padding: 22px;
}
body.flagboard #export {
  border: 1px solid #6FA8FF;
  color: #BBD5FF;
  background: rgba(10, 35, 65, .52);
}
body.flagboard #export:hover { box-shadow: 0 0 22px rgba(70, 130, 255, .25); border-color: #9CC4FF; }
body.flagboard label.btn {
  background: rgba(4, 16, 32, .6);
  border: 1px solid rgba(105, 165, 255, .32);
  color: #AEBBCB;
}
body.flagboard label.btn:hover { border-color: rgba(105, 165, 255, .6); color: #D6DFEA; }

body.flagboard .footer { font-size: 12.5px; color: #7F91A8; border-top: 1px solid rgba(100, 160, 220, .20); }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  body.flagboard #stats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
  body.flagboard {
    background:
      linear-gradient(rgba(2, 8, 18, .80), rgba(2, 8, 18, .88)),
      url("/img/tracker-bg-mobile.jpg") center top / cover no-repeat scroll,
      #020812;
  }
  body.flagboard main.wrap { padding: 22px 17px 56px; }
  body.flagboard .page-title { font-size: 2.15rem; }
  body.flagboard .topic-head { flex-wrap: wrap; gap: .75rem; padding: 14px 16px; }
  body.flagboard .tprog { width: 100%; flex-direction: row; align-items: center; gap: 10px; }
  body.flagboard .tbar { flex: 1; }
  body.flagboard .tc { text-align: left; order: -1; }
}
@media (max-width: 460px) {
  body.flagboard #stats { grid-template-columns: 1fr; }
}

/* ---------- forced colors ---------- */
@media (forced-colors: active) {
  body.flagboard, body.flagboard #stats .stat, body.flagboard #topics, body.flagboard #other,
  body.flagboard .card, body.flagboard .badge, body.flagboard .flag, body.flagboard .tbar,
  body.flagboard .tbar > span, body.flagboard #bar, body.flagboard #bar > span,
  body.flagboard .notice, body.flagboard .btn { forced-color-adjust: none; }
  body.flagboard {
    background:
      linear-gradient(90deg,
        rgba(2, 8, 18, .76) 0%, rgba(2, 8, 18, .58) 48%, rgba(2, 8, 18, .44) 100%),
      url("/img/tracker-bg.jpg") center center / cover no-repeat fixed,
      #020812 !important;
  }
  body.flagboard #topics, body.flagboard #other, body.flagboard #stats .stat, body.flagboard .card {
    background: linear-gradient(135deg,
      rgba(5, 22, 42, .90), rgba(2, 13, 28, .78)) !important;
    border: 1px solid rgba(110, 170, 255, .5) !important;
  }
  body.flagboard .topic { border-bottom: 1px solid rgba(110, 165, 220, .22) !important; }
  body.flagboard .tt { color: #82B8FF !important; }
  body.flagboard .tm, body.flagboard .tc { color: #C6D2E2 !important; }
  body.flagboard .badge { color: #FFE22E !important; border-color: rgba(255, 205, 30, .7) !important; }
  body.flagboard .badge.danger { color: #FF7A9E !important; }
  body.flagboard #stats .stat:nth-child(1) .num { color: #62D49B !important; }
  body.flagboard #stats .stat:nth-child(3) .num { color: #FFE22E !important; }
  body.flagboard #stats .stat:nth-child(2) .num,
  body.flagboard #stats .stat:nth-child(4) .num { color: #82ADFF !important; }
  body.flagboard .flag.got { background: rgba(98, 212, 155, .18) !important; border-color: #62D49B !important; }
  body.flagboard #export { color: #BBD5FF !important; border-color: #6FA8FF !important; }
  @media (max-width: 760px) {
    body.flagboard {
      background:
        linear-gradient(rgba(2, 8, 18, .80), rgba(2, 8, 18, .88)),
        url("/img/tracker-bg-mobile.jpg") center top / cover no-repeat scroll,
        #020812 !important;
    }
  }
}