/* ============================================================================
   OAU aggregate calculator.

   Its own file because services.css had already reached 900 lines, and this is
   one screen with a strong point of view rather than another row of widgets.

   Flat throughout: every edge here is a hairline or a surface step, never a
   shadow. Colour is spent in exactly two places — the hero number and the
   chance bar — because those are the two things the whole screen exists to say.
   ============================================================================ */

.ag { gap: var(--s-4); }

.ag-track {
  font-size: var(--t-caption);
  line-height: var(--lh-body);
  color: var(--c-text-muted);
  border-left: 2px solid var(--c-line-strong);
  padding-left: var(--s-3);
}

.ag-track.is-good { color: var(--c-success); border-left-color: var(--c-success); }

.ag-block { display: flex; flex-direction: column; gap: var(--s-3); }

.ag-block-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-2) var(--s-3);
  flex-wrap: wrap;
}

/* If the hint does have to wrap onto its own line it goes full width and reads
   left, because a right-aligned line under a left-aligned title is just a
   ragged edge. */
.ag-block-head .ag-block-hint { flex: 0 1 auto; }
.ag-block-title { flex: 0 1 auto; }

.ag-block-title {
  font-size: var(--t-footnote);
  font-weight: var(--fw-semibold);
  color: var(--c-text-muted);
}

.ag-block-hint {
  font-size: var(--t-caption);
  color: var(--c-text-faint);
  line-height: var(--lh-body);
}

/* Right-aligned only when it sits opposite a title. On its own it is a full
   sentence, and a right-aligned sentence is a ragged left edge for no reason. */
.ag-block-head .ag-block-hint,
.ag-cuts-head .ag-block-hint { text-align: right; }

/* ----------------------------------------------- the five subject rows -- */

.ag-row {
  display: grid;
  grid-template-columns: 1fr 92px;
  gap: var(--s-2);
  align-items: center;
}

.ag-row + .ag-row { margin-top: var(--s-2); }

/* English is the one row that cannot be changed, because all 106 courses require
   it. Deliberately NOT a disabled input: a greyed-out select reads as "broken",
   whereas a plain label with a gold edge reads as "this one is settled". Every
   other row is an ordinary picker — the app prefills them, it does not enforce
   them. */
.ag-locked {
  display: flex;
  align-items: center;
  min-height: var(--tap-min);
  padding: 0 var(--s-3);
  border: var(--border-hairline);
  border-left: 3px solid var(--c-gold-edge);
  border-radius: var(--r-md);
  background: var(--c-surface);
  color: var(--c-text-muted);
  font-size: var(--t-subhead);
}

.ag-subject { border-left: 3px solid var(--c-tint-1); }

/* --------------------------------------------------------- Post-UTME --- */

.ag-toggle {
  min-height: 30px;
  padding: 0 var(--s-3);
  border: var(--border-hairline);
  border-radius: var(--r-pill);
  background: var(--c-raised);
  color: var(--c-text-muted);
  font-size: var(--t-caption);
  font-weight: var(--fw-semibold);
  flex: none;
}

.ag-toggle.is-on { border-color: var(--c-gold-edge); color: var(--c-gold); }
.ag-toggle:active { opacity: 0.6; }

.ag-slider-wrap { display: flex; flex-direction: column; gap: var(--s-1); }

.ag-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: var(--tap-min);
  background: transparent;
}

.ag-slider::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: var(--r-pill);
  background: var(--c-line);
}

.ag-slider::-moz-range-track {
  height: 4px;
  border-radius: var(--r-pill);
  background: var(--c-line);
}

.ag-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 26px;
  height: 26px;
  margin-top: -11px;
  border: none;
  border-radius: var(--r-pill);
  background: var(--c-gold);
}

.ag-slider::-moz-range-thumb {
  width: 26px;
  height: 26px;
  border: none;
  border-radius: var(--r-pill);
  background: var(--c-gold);
}

.ag-slider-scale {
  display: flex;
  justify-content: space-between;
  font-size: var(--t-caption);
  color: var(--c-text-faint);
}

.ag-slider-scale [data-pu-read] {
  color: var(--c-gold);
  font-weight: var(--fw-bold);
  font-size: var(--t-footnote);
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------- what is still missing --- */

.ag-todo {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  list-style: none;
}

.ag-todo li {
  position: relative;
  padding-left: var(--s-4);
  font-size: var(--t-subhead);
  color: var(--c-text-muted);
  line-height: var(--lh-body);
}

.ag-todo li::before {
  content: "\2192";
  position: absolute;
  left: 0;
  color: var(--c-text-faint);
}

/* ---------------------------------------------------- the hero number --- */

.ag-hero {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: var(--s-5) var(--s-4);
  border: var(--border-gold);
  border-radius: var(--r-lg);
  background: var(--c-gold-wash);
}

.ag-hero-val {
  font-family: var(--font-num);
  font-size: var(--t-large-title);
  font-weight: var(--fw-bold);
  line-height: 1;
  letter-spacing: var(--ls-title);
  color: var(--c-gold);
}

.ag-hero-val span {
  font-size: var(--t-title-3);
  color: var(--c-gold-dim);
}

.ag-hero-lbl {
  font-size: var(--t-subhead);
  color: var(--c-text-muted);
  line-height: var(--lh-body);
}

/* Success and failure are never gold — an outcome must not read as a price. */
.ag-hero.is-good { border-color: var(--c-success); background: var(--c-success-wash); }
.ag-hero.is-good .ag-hero-val { color: var(--c-success); font-size: var(--t-title-2); }

.ag-hero.is-bad { border-color: var(--c-danger); background: var(--c-danger-wash); }
.ag-hero.is-bad .ag-hero-val { color: var(--c-danger); }

/* ------------------------------------------------------- the breakdown --- */

.ag-break {
  margin-top: var(--s-3);
  display: flex;
  flex-direction: column;
}

.ag-break-row {
  display: flex;
  justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-2) 0;
  border-bottom: var(--border-faint);
  font-size: var(--t-footnote);
  color: var(--c-text-muted);
}

.ag-break-row:last-child { border-bottom: none; }
.ag-break-row span:last-child { color: var(--c-text); font-variant-numeric: tabular-nums; }
.ag-break-row em { font-style: normal; color: var(--c-text-faint); }

/* ------------------------------------------------------ the live chance --- */

.ag-live {
  margin-top: var(--s-3);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: var(--s-4);
  border: var(--border-hairline);
  border-left: 3px solid var(--c-line-strong);
  border-radius: var(--r-md);
  background: var(--c-raised);
}

.ag-live-main { display: flex; align-items: baseline; gap: var(--s-3); }

.ag-live-pct {
  font-family: var(--font-num);
  font-size: var(--t-title-2);
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
  color: var(--c-text);
}

.ag-live-band {
  font-size: var(--t-footnote);
  font-weight: var(--fw-semibold);
  color: var(--c-text-muted);
}

.ag-live-sub {
  font-size: var(--t-caption);
  color: var(--c-text-muted);
  line-height: var(--lh-body);
}

.ag-live-bar {
  height: 4px;
  border-radius: var(--r-pill);
  background: var(--c-line);
  overflow: hidden;
}

.ag-live-bar i {
  display: block;
  height: 100%;
  background: var(--c-text-faint);
  transition: width var(--dur-fast) var(--ease-out);
}

/* The band colours the bar, so dragging the slider says something beyond a
   number moving. Green is "ahead", amber "careful", red "this failed" — the
   meanings the rest of the app already gives them. */
.ag-live[data-band="Strong"],
.ag-live[data-band="Likely"]        { border-left-color: var(--c-success); }
.ag-live[data-band="Strong"] i,
.ag-live[data-band="Likely"] i      { background: var(--c-success); }

.ag-live[data-band="Borderline"]    { border-left-color: var(--c-warning); }
.ag-live[data-band="Borderline"] i  { background: var(--c-warning); }

.ag-live[data-band="Behind"],
.ag-live[data-band="Well behind"]   { border-left-color: var(--c-danger); }
.ag-live[data-band="Behind"] i,
.ag-live[data-band="Well behind"] i { background: var(--c-danger); }

/* ---------------------------------------------------- cut-off history --- */

.ag-cuts {
  margin-top: var(--s-4);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.ag-cuts-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3);
}

.ag-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--t-footnote);
}

.ag-table th {
  text-align: left;
  padding: var(--s-2) var(--s-2) var(--s-2) 0;
  border-bottom: var(--border-hairline);
  font-size: var(--t-caption);
  font-weight: var(--fw-semibold);
  color: var(--c-text-faint);
}

.ag-table th:not(:first-child),
.ag-table td:not(:first-child) { text-align: right; padding-right: 0; }

.ag-table td {
  padding: var(--s-2) var(--s-2) var(--s-2) 0;
  border-bottom: var(--border-faint);
  color: var(--c-text-muted);
  font-variant-numeric: tabular-nums;
}

.ag-table tr:last-child td { border-bottom: none; }
.ag-table td.is-yours { color: var(--c-gold); font-weight: var(--fw-semibold); }

/* ------------------------------------------------------------- sharing --- */

/* The one filled gold button on this screen. It gets to be the filled one
   because sharing a result is how a second student hears about the app, which
   makes it the most valuable action here by some distance. */
.ag-share {
  margin-top: var(--s-5);
  padding-top: var(--s-4);
  border-top: var(--border-hairline);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.ag-share .btn { width: 100%; }
.ag-share .ag-block-hint { text-align: center; }

@media (prefers-reduced-motion: reduce) {
  .ag-live-bar i { transition: none; }
}