/* ============================================================
   BARAEM GRADEFLOW — ACADEMIC PAGES
   Shared styling for the Overview and 3-Year Analysis screens. One stylesheet
   so the two cannot drift apart.

   The layout principle: a wide lead visual, a narrower supporting column, and
   generous whitespace. Whitespace is the expensive-looking part — the panels
   carry hairline rules and almost no shadow.
   ============================================================ */

.ac-page { --ac-gap: var(--s-5); }

/* ------------------------------------------------------------
   HEADER
   An eyebrow, a title, then an identification strip. This is what
   tells the teacher exactly which analysis they are looking at.
   ------------------------------------------------------------ */
.ac-head {
  display: flex; align-items: flex-end; gap: var(--s-4);
  flex-wrap: wrap;
  padding-block-end: var(--s-4);
  margin-block-end: var(--s-4);
  border-block-end: 1px solid var(--border);
}
.ac-head-main { min-width: 0; }
.ac-eyebrow {
  font: 700 var(--t-10)/1 var(--font);
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--gold-600);
  margin-block-end: var(--s-2);
}
.ac-title {
  margin: 0 0 var(--s-3);
  font-size: var(--t-24); font-weight: 700;
  letter-spacing: -.02em; line-height: var(--lh-tight);
  color: var(--text);
}
.ac-ident {
  display: flex; gap: var(--s-6); flex-wrap: wrap;
  padding-block-start: var(--s-3);
  border-block-start: 1px solid var(--border-soft);
}
.ac-ident-i { display: flex; flex-direction: column; gap: 1px; }
.ac-ident-k {
  font: 600 var(--t-10)/1 var(--font);
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-faint);
}
.ac-ident-v {
  font-size: var(--t-14); font-weight: 650; color: var(--text);
  font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: isolate;
}

/* ------------------------------------------------------------
   FILTER BAR
   Fields, not a toolbar. Everything below belongs to the selection
   shown here, so it sits directly under the identification strip.
   ------------------------------------------------------------ */
.ac-filters {
  display: flex; align-items: flex-end; gap: var(--s-3);
  flex-wrap: wrap;
  padding: var(--s-3) var(--s-4);
  margin-block-end: var(--s-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}
.ac-filters .field { min-width: 132px; }
.ac-filters .field > span {
  font: 600 var(--t-10)/1 var(--font);
  letter-spacing: .07em; text-transform: uppercase;
  color: var(--text-faint);
}
.ac-filters .sel { height: 32px; }
.ac-filters-a { margin-inline-start: auto; display: flex; gap: var(--s-2); }

/* ------------------------------------------------------------
   BODY LAYOUT
   ------------------------------------------------------------ */
.ac-body { display: grid; gap: var(--ac-gap); }

.ac-lead {
  display: grid; gap: var(--ac-gap);
  grid-template-columns: minmax(0, 1.9fr) minmax(300px, 1fr);
  align-items: start;
}
.ac-lead-rev { grid-template-columns: minmax(300px, 1fr) minmax(0, 1.9fr); }
.ac-lead-side { display: grid; gap: var(--ac-gap); }

/* The two panels hold a five-column term table and an eight-column year table.
   Side by side each gets roughly 600px, which is less than the year table needs,
   so it overflowed its own panel. Below 1400px they stack, which gives the table
   the full width and lets .tbl-wrap scroll only when the viewport really is
   narrower than the table. */
.ac-grid-2 {
  display: grid; gap: var(--ac-gap);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 560px), 1fr));
  align-items: start;
}

.ac-trend-panel .panel-b { padding: var(--s-4) var(--s-5) var(--s-5); }

/* panel tools sit at the inline end of the header */
.panel-h .panel-tools { margin-inline-start: auto; }
.ac-panel-tools, .panel-h .seg { flex: 0 0 auto; }

/* ------------------------------------------------------------
   TREND FOOTER
   Three figures under the primary visual: the change, the largest move, the
   span. Reads like a caption under a figure in an academic paper.
   ------------------------------------------------------------ */
.ac-trend-foot {
  display: flex; align-items: baseline; gap: var(--s-6);
  flex-wrap: wrap;
  margin-block-start: var(--s-4);
  padding-block-start: var(--s-3);
  border-block-start: 1px solid var(--border-soft);
}
.ac-trend-fig { display: flex; align-items: baseline; gap: var(--s-2); }
.ac-trend-fig-v {
  font: 700 var(--t-20)/1 var(--font);
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: isolate;
}
.ac-trend-fig-k {
  font-size: var(--t-12); color: var(--text-faint);
}
.ac-trend-note { font-size: var(--t-12); color: var(--text-mute); margin-inline-start: auto; }

.ac-tf {
  display: flex; gap: var(--s-8); flex-wrap: wrap;
  margin-block-start: var(--s-4);
  padding-block-start: var(--s-3);
  border-block-start: 1px solid var(--border-soft);
}
.ac-tf-i { display: flex; flex-direction: column; gap: 2px; }
.ac-tf-v {
  font: 700 var(--t-18)/1 var(--font); letter-spacing: -.015em;
  font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: isolate;
}
.ac-tf-k { font-size: var(--t-11); color: var(--text-faint); }

/* ------------------------------------------------------------
   MINI TABLES inside panels
   A secondary table under a chart: same hairline language, less weight.
   ------------------------------------------------------------ */
table.tbl-mini { font-size: var(--t-12); margin-block-start: var(--s-4); }
table.tbl-mini thead th {
  font-size: var(--t-10);
  padding: var(--s-2) var(--s-3);
}
table.tbl-mini tbody td { padding: var(--s-2) var(--s-3); }
.tbl-mini td.muted { color: var(--text-mute); font-style: italic; }

/* ------------------------------------------------------------
   TERM COMPARISON CARDS
   Two terms and the gap between them, stated once.
   ------------------------------------------------------------ */
.ac-tc-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: var(--s-3); align-items: stretch;
}
.ac-tc {
  display: flex; flex-direction: column; gap: var(--s-1);
  padding: var(--s-4);
  background: var(--surface-2);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-md);
}
.ac-tc-lead {
  background: var(--accent-soft);
  border-color: transparent;
  box-shadow: inset 0 2px 0 var(--accent);
}
.ac-tc-k {
  font: 600 var(--t-10)/1 var(--font);
  letter-spacing: .08em; text-transform: uppercase; color: var(--text-faint);
}
.ac-tc-v {
  font: 700 var(--t-30)/1.1 var(--font); letter-spacing: -.02em;
  color: var(--text);
  font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: isolate;
}
.ac-tc-m { font-size: var(--t-11); color: var(--text-faint); }
.ac-tc-mid {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; padding: 0 var(--s-2);
}
.ac-tc-arrow {
  font: 700 var(--t-16)/1 var(--font);
  font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: isolate;
}
.ac-tc-arrowk {
  font-size: var(--t-10); color: var(--text-mute);
  text-align: center; max-width: 7ch; line-height: 1.25;
}

/* ------------------------------------------------------------
   OBSERVATIONS
   A numbered list with the figure that produced each one underneath, so a
   claim is never separated from its evidence.
   ------------------------------------------------------------ */
.ac-ins { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); }
.ac-in {
  padding: var(--s-3) var(--s-4);
  border-inline-start: 2px solid var(--border-strong);
  background: var(--surface-2);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
}
.ac-in p { margin: 0; font-size: var(--t-13); line-height: var(--lh-body); color: var(--text); }
.ac-in code {
  display: inline-block; margin-block-start: var(--s-1);
  font: 500 var(--t-11)/1.4 var(--font-mono);
  color: var(--text-faint); direction: ltr; unicode-bidi: isolate;
}
.ac-in.up    { border-inline-start-color: var(--ok-600); }
.ac-in.down  { border-inline-start-color: var(--bad-600); }
.ac-in.warn  { border-inline-start-color: var(--warn-600); }
.ac-in.flat  { border-inline-start-color: var(--border-strong); }

/* ------------------------------------------------------------
   FOOT NOTE + LOADING
   ------------------------------------------------------------ */
.ac-foot {
  padding-block-start: var(--s-3);
  border-block-start: 1px solid var(--border-soft);
  font-size: var(--t-11); color: var(--text-mute); line-height: var(--lh-body);
}
.ac-loading { padding: var(--s-5) 0; }

/* ------------------------------------------------------------
   RESPONSIVE
   The lead visual is never squeezed below a readable width: the column
   stacks instead.
   ------------------------------------------------------------ */
@media (max-width: 1180px) {
  .ac-lead, .ac-lead-rev { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .ac-grid-2 { grid-template-columns: 1fr; }
  .ac-filters .field { min-width: 0; flex: 1 1 140px; }
  .ac-filters-a { margin-inline-start: 0; width: 100%; }
}

/* Below 480px the two-column grids are replaced entirely: `minmax(300px, 1fr)`
   is wider than a 360px viewport, so the track overflowed and pushed the whole
   page sideways. `minmax(0, 1fr)` lets the track shrink to the container and the
   table inside scrolls on its own. */
@media (max-width: 480px) {
  .ac-lead, .ac-lead-rev, .ac-grid-2 { grid-template-columns: minmax(0, 1fr); }
  /* The identity strip wraps into pairs instead of one long row. */
  .ac-ident { gap: var(--s-3); }
  .ac-ident-i { flex: 1 1 45%; }

  /* Every analytical column stays. Nothing is hidden because the screen is
     narrow — the table scrolls sideways instead, with the pupil/subject/year
     column pinned so the row stays identifiable while you scroll. */
  .ac-page .tbl { font-size: var(--t-11); }
  .ac-page .tbl th, .ac-page .tbl td { padding: var(--s-2) var(--s-2); }

  /* panels and their scroll containers must never exceed the viewport */
  .ac-page, .ac-body, .ac-panel, .panel, .panel-b, .tbl-wrap { min-width: 0; max-width: 100%; }
  .ac-tc-row { flex-direction: column; }
  .ac-tf { gap: var(--s-5); }
  .ac-trend-foot { gap: var(--s-4); }
}
@media (max-width: 600px) {
  .ac-title { font-size: var(--t-20); }
  .ac-ident { gap: var(--s-4); }
  .ac-ident-i { flex: 1 1 40%; }
  .ac-tc-row { grid-template-columns: 1fr; }
  .ac-tc-mid { flex-direction: row; gap: var(--s-2); padding: var(--s-2) 0; }
  .ac-tc-arrowk { max-width: none; }
  .ac-trend-note { margin-inline-start: 0; }
}

/* ------------------------------------------------------------
   PRINT — the report path reads these pages too
   ------------------------------------------------------------ */
@media print {
  .ac-filters, .ac-foot, .panel-h .seg, .panel-h .panel-tools { display: none !important; }
  .ac-lead, .ac-lead-rev, .ac-grid-2 { grid-template-columns: 1fr !important; }
  .panel, .ac-trend-panel { break-inside: avoid; box-shadow: none; }
  .rise, .rise-1, .rise-2 { animation: none !important; }
}