/* ═══════════════════════════════════════════════════════════════
   CRAFT Milestones — page-specific styles
   (design tokens + shared components come from styles.css)
   ═══════════════════════════════════════════════════════════════ */

/* ── teal banner (the hub tile's color) ── */
.pbanner.teal { background: linear-gradient(100deg, #0A6F8E, var(--c-teal)); }

/* ── band colors: shared by bars, pills, and card accents ── */
.b-good { --band: var(--c-green); --band-bg: #E7F6EC; --band-ink: #14672F; }
.b-mid  { --band: var(--c-orange); --band-bg: #FFF1E3; --band-ink: #9A4A05; }
.b-low  { --band: var(--c-red); --band-bg: #FDECEC; --band-ink: #A33A3A; }
.b-none { --band: #B9C1D6; --band-bg: #EEF1F8; --band-ink: #5D6785; }

/* ── classroom cards ── */
.ms-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 14px;
}
.ms-card {
  position: relative;
  min-width: 0;
  padding: 14px 16px 12px 18px;
  background: #FAFBFE;
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: inset 4px 0 0 var(--band, var(--c-teal));
}
.ms-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.ms-head b { font-size: 15px; }
.ms-formchip {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  background: #E3F3F8;
  color: #0A6F8E;
  font: 800 10.5px var(--font-body);
  letter-spacing: 0.3px;
  white-space: nowrap;
  vertical-align: 2px;
}
.ms-meta { color: var(--muted); font-size: 12px; font-weight: 700; white-space: nowrap; }

.ms-avg { display: flex; align-items: baseline; gap: 10px; margin: 6px 0 8px; }
.ms-avg-v { font: 600 26px/1 var(--font-disp); color: var(--band-ink, var(--ink)); }
.ms-avg-l { font-size: 11.5px; font-weight: 800; color: var(--muted); }

.ms-rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.ms-row {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(70px, 1fr) auto;
  align-items: center;
  gap: 10px;
  font-size: 12.5px;
}
.ms-skill { min-width: 0; font-weight: 700; color: var(--ink); line-height: 1.3; }
.ms-skill i {
  display: inline-block;
  width: 18px;
  margin-right: 5px;
  font-style: normal;
  font-weight: 800;
  color: var(--muted);
}
.ms-rep {
  display: inline-block;
  margin-left: 6px;
  padding: 0 5px;
  border-radius: 4px;
  background: #E3F3F8;
  color: #0A6F8E;
  font: 800 9.5px/16px var(--font-body);
  font-style: normal;
}
.ms-bar { display: block; height: 9px; border-radius: 999px; background: #E6EAF4; overflow: hidden; }
.ms-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--band, var(--c-teal));
  transition: width 0.8s ease;
}
.ms-val { white-space: nowrap; font-size: 11.5px; font-weight: 700; color: var(--muted); }
.ms-val b { color: var(--ink); font-weight: 800; }

.ms-card.ms-ghost { --band: #B9C1D6; background: #FFFFFF; }
.ms-empty { margin: 8px 0 0; color: var(--muted); font-style: italic; font-weight: 700; font-size: 12.5px; line-height: 1.45; }

.ms-legend { margin: 2px 0 0; font-size: 11.5px; font-weight: 700; color: var(--muted); }
.ms-key {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin: 0 5px -1px 8px;
  border-radius: 3px;
  background: var(--band);
}
.ms-key:first-child { margin-left: 0; }

/* ── strengths & next steps (gold card) ── */
.fx-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.fx-col { min-width: 0; }
.fx-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 8px 4px;
  border-bottom: 1px dashed #EBDFB5;
  font-size: 13px;
}
.fx-row:last-child { border-bottom: none; }
.fx-row b { white-space: nowrap; color: #4C3A05; }
.fx-row .fx-skill { flex: 1; min-width: 0; font-weight: 700; color: #4C3A05; }

.pct-pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--band-bg);
  color: var(--band-ink);
  font: 800 10.5px var(--font-body);
  letter-spacing: 0.3px;
  white-space: nowrap;
}

/* ── layout tweaks ── */
@media (max-width: 620px) {
  .fx-grid { grid-template-columns: 1fr; }
  .ms-row { grid-template-columns: minmax(0, 1fr) auto; }
  .ms-row .ms-bar { grid-column: 1 / -1; }
}

@media print {
  .ms-card, #focusPanel, #trendsPanel { break-inside: avoid; }
  .ms-grid { grid-template-columns: repeat(2, 1fr); }
}