/* The grade page's own drawings: the points bar, the contribution bar, the exam-score slider and
   the three-field assessment row. Everything else — the hero, the stat tiles, the accent explorer,
   the disclosures, the chart's line and grid — comes from results.css and styles.css.

   Scoped to .grade-page, the body class this page opts into, so nothing here can reach another
   calculator. Every colour, radius and shadow is a token from styles.css, which is what gives both
   themes for free. */

/* ---------------------------------------------------------------- The mode switch */

.grade-page .mode-chips { margin: 0 0 18px; }
.grade-page .mode-chips .chip { min-height: 44px; }
.grade-page .preset-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 0; }
.grade-page .preset-row .chip { min-height: 36px; }

/* The sliders: the final's weight in the form, and the exam score in the results. Both are the
   44px control the reference pages use, in the site's orange. */
.grade-page input[type="range"] {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  margin: 0;
  accent-color: var(--highlight);
  cursor: pointer;
}
.grade-page input[type="range"]:focus-visible {
  outline: 2px solid var(--highlight);
  outline-offset: 3px;
  border-radius: 5px;
}
.grade-page .grade-slider-label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 0.85rem;
  font-weight: 600;
  margin: 0;
}
.grade-page .grade-slider-label output {
  font-weight: 700;
  color: var(--primary);
  font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------- The points bar */

/* One track, 100 course points wide: what coursework has already earned, then what the chosen exam
   score adds, with the goal marked on the track. Both parts carry a text label in the legend, so
   the colour is a second telling rather than the only one. */
.grade-page .grade-bar {
  position: relative;
  display: flex;
  height: 22px;
  border-radius: 11px;
  background: var(--border);
  overflow: hidden;
  margin-top: 4px;
}
.grade-page .grade-fill {
  display: block;
  flex: none;
  height: 100%;
  background: var(--primary);
  transition: width 200ms ease;
}
.grade-page .grade-fill.is-exam { background: var(--highlight); }
.grade-page .grade-marker {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  margin-left: -1px;
  background: var(--text);
  transition: left 200ms ease;
}
.grade-page .grade-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  font-size: 0.8rem;
  color: var(--muted);
  margin: 10px 0 0;
}
.grade-page .grade-legend span { display: inline-flex; align-items: center; gap: 7px; }
.grade-page .grade-legend b { color: var(--text); font-weight: 600; }
.grade-page .grade-legend i {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 3px;
  background: var(--primary);
}
.grade-page .grade-legend i.key-exam { background: var(--highlight); }
.grade-page .grade-legend i.key-goal {
  width: 2px;
  height: 14px;
  border-radius: 1px;
  background: var(--text);
}

/* ---------------------------------------------------------------- The contribution bar */

/* One stretch per assessment, sized by its weight, then the weight still to be graded. Alternating
   opacity keeps neighbouring stretches apart without inventing a new colour. */
.grade-page .contrib-bar {
  display: flex;
  height: 20px;
  border-radius: 10px;
  overflow: hidden;
  background: var(--border);
  margin-top: 4px;
}
.grade-page .contrib-seg { display: block; height: 100%; min-width: 2px; background: var(--primary); }
.grade-page .contrib-seg:nth-child(even) { opacity: 0.72; }
.grade-page .contrib-seg.is-open { background: var(--rest); opacity: 1; }
.grade-page .contrib-legend {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: grid;
  gap: 6px;
  font-size: 0.82rem;
  color: var(--muted);
}
.grade-page .contrib-legend li { display: flex; align-items: baseline; gap: 8px; }
.grade-page .contrib-dot {
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  background: var(--primary);
}
.grade-page .contrib-legend li.is-open .contrib-dot { background: var(--rest); }

/* ---------------------------------------------------------------- The assessment rows */

/* Three boxes and the ✕: the name takes a line of its own on a phone, with the two figures and the
   remove button under it, which is the shape the site's other row builders use. */
.grade-page .assessment-row { grid-template-columns: minmax(0, 1fr) minmax(0, 0.72fr) minmax(0, 0.72fr) 38px; }
.grade-page .assessment-row .field-name { grid-column: 1 / -1; }
.grade-page .assessment-row .remove { grid-column: 4; }
.grade-page .assessment-row .field input { font-weight: 400; }

/* The handoff: a checkbox the student has to tick before the planner will take the numbers over. */
.grade-page .handoff {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  display: grid;
  gap: 10px;
}
.grade-page .handoff-check {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1.45;
}
.grade-page .handoff-check input {
  flex: none;
  width: 18px;
  height: 18px;
  margin: 2px 0 0;
  accent-color: var(--highlight);
}
.grade-page .handoff .btn-secondary { width: 100%; }
.grade-page .handoff .hint { margin: 0; }

/* ---------------------------------------------------------------- The formulas */

/* The site's formula blocks keep their spacing by scrolling sideways. These formulas are long
   enough that a sideways scroll would hide half of each one on a phone, so here they wrap. The
   monospace face stays: it is what makes a formula read as a formula. */
.grade-page .formula { white-space: normal; overflow-wrap: anywhere; }

/* ---------------------------------------------------------------- The chart */

.grade-page .grade-target {
  fill: none;
  stroke: var(--muted);
  stroke-width: 2;
  stroke-dasharray: 6 5;
}
.grade-page .grade-target-label { fill: var(--muted); font-size: 11px; }
.grade-page .grade-guide { stroke: var(--text); stroke-width: 1; }

/* ---------------------------------------------------------------- Narrow screens */

@media (max-width: 600px) {
  .grade-page .assessment-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 38px; }
  .grade-page .assessment-row .field-name { grid-column: 1 / -1; grid-row: 1; }
  .grade-page .assessment-row .field-score { grid-column: 1; grid-row: 2; }
  .grade-page .assessment-row .field-weight { grid-column: 2; grid-row: 2; }
  .grade-page .assessment-row .remove { grid-column: 3; grid-row: 2; }
  .grade-page .mode-chips .chip { flex: 1 1 auto; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .grade-page .grade-fill,
  .grade-page .grade-marker { transition: none; }
}