/* ============================================================
   BARAEM GRADEFLOW — PRESENTATION MODE

   Built for a room, not a mouse. The type scale is larger than the rest of the
   product, contrast is raised, and everything that is a working control rather
   than evidence is removed. The palette is unchanged: deep Baraem green, warm
   neutral surfaces, one restrained gold accent, semantic colour only where a
   number is genuinely up, down or a problem.

   Motion is one fade and one count-up. Nothing bounces, glows or celebrates.
   ============================================================ */

/* ------------------------------------------------------------
   THE MODE ITSELF

   The dashboard is hidden rather than unmounted, so exiting restores the page
   exactly as it was, including its scroll position and any open filter panel.
   ------------------------------------------------------------ */
html.pm-on, html.pm-on body { overflow: hidden; }
html.pm-on #app, html.pm-on #shell { display: none !important; }
html.pm-on #loader { display: none !important; }

.pm-root {
  position: fixed; inset: 0; z-index: 9000;
  background: var(--surface, #fff);
  color: var(--text, #12211a);
  display: flex; flex-direction: column;
  font-size: 16px;
}
.pm-root[hidden] { display: none; }

.pm-boot {
  margin: auto;
  font-size: 15px; letter-spacing: .04em;
  color: var(--text-mute, #6b7a72);
}

/* ------------------------------------------------------------
   TOP BAR — brand, context, navigation. Deliberately thin.
   ------------------------------------------------------------ */
.pm-bar {
  display: flex; align-items: center; gap: var(--s-5);
  padding: var(--s-4) var(--s-7);
  border-bottom: 1px solid var(--border, #d8ded9);
  background: var(--surface, #fff);
  flex: 0 0 auto;
}
.pm-bar-brand {
  display: flex; align-items: center; gap: var(--s-3);
  font-size: var(--t-11); font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--accent-800, #14361f);
  white-space: nowrap;
}
.pm-bar-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent-600, #1d4b34);
}
.pm-bar-ctx {
  font-size: var(--t-13);
  color: var(--text-mute, #6b7a72);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  min-width: 0;
}
.pm-bar-nav {
  display: flex; align-items: center; gap: var(--s-3);
  margin-inline-start: auto; flex: 0 0 auto;
}
/* 01 / 06 — the presenter always knows where they are */
.pm-count {
  font-size: var(--t-13); font-weight: 700;
  color: var(--text, #12211a);
  font-variant-numeric: tabular-nums;
  letter-spacing: .06em;
  margin-inline-end: var(--s-2);
}

.pm-b {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--s-2);
  min-height: 40px; min-width: 40px;
  padding: 0 var(--s-4);
  border: 1px solid var(--border, #d8ded9);
  border-radius: var(--r-md, 8px);
  background: var(--surface, #fff);
  color: var(--text, #12211a);
  font: inherit; font-size: var(--t-13); font-weight: 600;
  cursor: pointer;
  transition: background .15s var(--ease), border-color .15s var(--ease);
}
.pm-b:hover:not(:disabled) { background: var(--surface-2, #f4f7f4); border-color: var(--accent-500, #2f6a4a); }
.pm-b:focus-visible { outline: 2px solid var(--accent-600, #1d4b34); outline-offset: 2px; }
.pm-b:disabled { opacity: .35; cursor: default; }
.pm-b-exit {
  background: var(--accent-700, #1d4b34);
  border-color: var(--accent-700, #1d4b34);
  color: #fff;
}
.pm-b-exit:hover { background: var(--accent-800, #14361f); border-color: var(--accent-800, #14361f); }

/* the progress rule and the six labels */
.pm-progress {
  height: 2px; background: var(--border-soft, #e6ebe7);
  flex: 0 0 auto;
}
.pm-progress > i {
  display: block; height: 100%;
  background: var(--accent-600, #1d4b34);
  transition: width .35s var(--ease-out);
}
.pm-steps {
  display: flex; gap: var(--s-5);
  padding: var(--s-3) var(--s-7);
  border-bottom: 1px solid var(--border, #d8ded9);
  background: var(--surface, #fff);
  flex: 0 0 auto;
  overflow-x: auto;
}
.pm-step {
  font-size: var(--t-11); font-weight: 600;
  letter-spacing: .07em; text-transform: uppercase;
  color: var(--text-mute, #6b7a72);
  white-space: nowrap;
  position: relative;
}
.pm-step.is-done { color: var(--text-faint, #97a49d); }
.pm-step.is-on { color: var(--accent-700, #1d4b34); }
.pm-step.is-on::after {
  content: '';
  position: absolute; inset-inline: 0; bottom: -13px;
  height: 2px; background: var(--accent-600, #1d4b34);
}

/* ------------------------------------------------------------
   STAGE
   ------------------------------------------------------------ */
.pm-stage {
  flex: 1 1 auto;
  overflow-y: auto;
  display: flex;
  padding: var(--s-8) var(--s-9);
  outline: none;
}
.pm-slide {
  width: 100%; max-width: 1360px; margin-inline: auto;
  animation: pm-in .38s var(--ease-out) both;
}
/* one restrained entrance: a short fade and a few pixels of lift */
@keyframes pm-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
.pm-root.is-repaint .pm-slide { animation: none; }

.pm-head { margin-block-end: var(--s-7); }
.pm-h2 {
  margin: 0 0 var(--s-2);
  font-size: clamp(24px, 2.4vw, 34px);
  font-weight: 700;
  letter-spacing: -.015em;
  color: var(--text, #12211a);
  line-height: 1.15;
}
.pm-sub {
  margin: 0;
  font-size: clamp(14px, 1.15vw, 17px);
  color: var(--text-mute, #6b7a72);
  max-width: 80ch;
}
.pm-foot, .pm-note {
  margin: var(--s-7) 0 0;
  font-size: var(--t-12);
  color: var(--text-faint, #97a49d);
  max-width: 84ch;
  line-height: 1.55;
}
.pm-empty {
  padding: var(--s-12) var(--s-6);
  text-align: center;
  font-size: var(--t-15);
  color: var(--text-mute, #6b7a72);
  border: 1px dashed var(--border, #d8ded9);
  border-radius: var(--r-lg, 12px);
}

/* ------------------------------------------------------------
   01 OPENING
   ------------------------------------------------------------ */
.pm-open { display: flex; flex-direction: column; min-height: 100%; justify-content: center; }
.pm-open-eyebrow {
  font-size: clamp(11px, .9vw, 13px);
  font-weight: 700; letter-spacing: .26em; text-transform: uppercase;
  color: var(--gold-700, #8a6d2f);
  margin-block-end: var(--s-4);
}
.pm-open-t {
  margin: 0 0 var(--s-7);
  font-size: clamp(38px, 5vw, 68px);
  font-weight: 700;
  letter-spacing: -.028em;
  line-height: 1.05;
  color: var(--text, #12211a);
  max-width: 22ch;
}
.pm-open-ctx {
  display: flex; flex-wrap: wrap;
  gap: var(--s-7);
  padding-block: var(--s-5);
  border-block: 1px solid var(--border, #d8ded9);
  margin-block-end: var(--s-8);
}
.pm-open-c { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pm-open-k {
  font-size: clamp(10px, .78vw, 11px); font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-faint, #97a49d);
}
.pm-open-v {
  font-size: clamp(17px, 1.5vw, 22px);
  font-weight: 650; color: var(--text, #12211a);
}

/* four figures, one weight, no colour coding — a number is not a verdict */
.pm-figures { display: grid; gap: var(--s-8); grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.pm-fig { display: flex; flex-direction: column; gap: var(--s-2); }
.pm-fig-k {
  font-size: clamp(11px, .88vw, 13px); font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-mute, #6b7a72);
}
.pm-fig-v {
  font-size: clamp(44px, 5.2vw, 76px);
  font-weight: 700; line-height: 1;
  letter-spacing: -.03em;
  color: var(--accent-800, #14361f);
  font-variant-numeric: tabular-nums;
  direction: ltr; unicode-bidi: isolate;
}

/* ------------------------------------------------------------
   02 THREE-YEAR
   ------------------------------------------------------------ */
.pm-metrics { display: flex; gap: var(--s-2); margin-block-end: var(--s-5); flex-wrap: wrap; }
.pm-metric {
  min-height: 38px;
  padding: 0 var(--s-4);
  border: 1px solid var(--border, #d8ded9);
  border-radius: var(--r-md, 8px);
  background: var(--surface, #fff);
  color: var(--text-mute, #6b7a72);
  font: inherit; font-size: var(--t-13); font-weight: 650;
  cursor: pointer;
  transition: background .15s var(--ease), color .15s var(--ease), border-color .15s var(--ease);
}
.pm-metric:hover { border-color: var(--accent-500, #2f6a4a); }
.pm-metric.is-on { background: var(--accent-700, #1d4b34); border-color: var(--accent-700, #1d4b34); color: #fff; }
.pm-metric:focus-visible { outline: 2px solid var(--accent-600, #1d4b34); outline-offset: 2px; }

.pm-cols {
  display: grid; gap: var(--s-8);
  grid-template-columns: minmax(0, 1.7fr) minmax(300px, 1fr);
  align-items: start;
}
.pm-chart { min-width: 0; }
/* the chart's own type is scaled up so it reads from the back of a room */
.pm-chart svg { width: 100%; height: auto; }
.pm-chart text { font-size: 15px; }

.pm-table { min-width: 0; }
.pm-tbl { width: 100%; border-collapse: collapse; font-size: var(--t-15); }
.pm-tbl th, .pm-tbl td {
  padding: var(--s-3) var(--s-3);
  text-align: start;
  border-bottom: 1px solid var(--border, #d8ded9);
}
.pm-tbl th {
  font-size: clamp(10px, .78vw, 11px); font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--text-faint, #97a49d);
  border-bottom: 1px solid var(--border-strong, #b9c4bd);
}
.pm-tbl .n {
  text-align: end;
  font-variant-numeric: tabular-nums;
  direction: ltr; unicode-bidi: isolate;
}
.pm-tbl .strong { font-weight: 650; color: var(--text, #12211a); }
.pm-tbl tbody tr:last-child td { border-bottom: 0; }

/* ------------------------------------------------------------
   03 TERMS
   ------------------------------------------------------------ */
.pm-terms {
  display: grid; gap: var(--s-6);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.pm-term {
  border: 1px solid var(--border, #d8ded9);
  border-radius: var(--r-lg, 12px);
  padding: var(--s-6);
  background: var(--surface, #fff);
}
.pm-term-k {
  font-size: clamp(11px, .9vw, 13px); font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-mute, #6b7a72);
  margin-block-end: var(--s-3);
}
.pm-term-v {
  font-size: clamp(38px, 4vw, 58px);
  font-weight: 700; line-height: 1;
  letter-spacing: -.028em;
  color: var(--accent-800, #14361f);
  font-variant-numeric: tabular-nums;
  direction: ltr; unicode-bidi: isolate;
  margin-block-end: var(--s-4);
}
.pm-term-bar {
  height: 8px; border-radius: var(--r-pill, 999px);
  background: var(--surface-sunk, #eef2ee);
  overflow: hidden; margin-block-end: var(--s-4);
}
.pm-term-bar > i {
  display: block; height: 100%;
  background: var(--accent-600, #1d4b34);
  border-radius: inherit;
  animation: pm-grow .55s var(--ease-out) both;
}
@keyframes pm-grow { from { width: 0 !important; } }

.pm-term-m {
  display: flex; justify-content: space-between; gap: var(--s-3);
  font-size: var(--t-13); color: var(--text-mute, #6b7a72);
}

/* ------------------------------------------------------------
   04 SECTIONS
   ------------------------------------------------------------ */
.pm-sects { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.pm-sect {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "k v" "bar bar" "m go";
  gap: var(--s-2) var(--s-4);
  padding: var(--s-5);
  border: 1px solid var(--border, #d8ded9);
  border-radius: var(--r-lg, 12px);
  background: var(--surface, #fff);
  text-align: start;
  font: inherit; cursor: pointer;
  transition: border-color .15s var(--ease), background .15s var(--ease);
}
.pm-sect:hover { border-color: var(--accent-600, #1d4b34); background: var(--accent-50, #f2f7f3); }
.pm-sect:focus-visible { outline: 2px solid var(--accent-600, #1d4b34); outline-offset: 2px; }
.pm-sect-k {
  grid-area: k;
  font-size: clamp(12px, 1vw, 14px); font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-mute, #6b7a72);
}
.pm-sect-v {
  grid-area: v;
  font-size: clamp(30px, 3vw, 44px); font-weight: 700; line-height: 1;
  letter-spacing: -.028em;
  color: var(--accent-800, #14361f);
  font-variant-numeric: tabular-nums;
  direction: ltr; unicode-bidi: isolate;
}
.pm-sect-bar {
  grid-area: bar;
  height: 8px; border-radius: var(--r-pill, 999px);
  background: var(--surface-sunk, #eef2ee); overflow: hidden;
}
.pm-sect-bar > i {
  display: block; height: 100%;
  background: var(--accent-600, #1d4b34);
  border-radius: inherit;
  animation: pm-grow .55s var(--ease-out) both;
}
.pm-sect-m {
  grid-area: m;
  font-size: var(--t-13); color: var(--text-mute, #6b7a72);
}
.pm-sect-go {
  grid-area: go;
  align-self: end;
  font-size: var(--t-11); font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--accent-700, #1d4b34);
  justify-self: end;
}
.pm-sect:hover .pm-sect-go { text-decoration: underline; text-underline-offset: 3px; }

/* ------------------------------------------------------------
   05 ASSESSMENTS
   ------------------------------------------------------------ */
.pm-asms { min-width: 0; }
.pm-tbl-wide { font-size: var(--t-16, 16px); }
.pm-asm-row { cursor: pointer; }
.pm-asm-row:hover td { background: var(--accent-50, #f2f7f3); }
.pm-asm-row:focus-visible { outline: 2px solid var(--accent-600, #1d4b34); outline-offset: -2px; }
.pm-asm-id {
  font-size: var(--t-11); font-weight: 700;
  color: var(--text-faint, #97a49d);
  letter-spacing: .06em;
}
.pm-asm-bar {
  display: block; height: 8px; min-width: 90px;
  border-radius: var(--r-pill, 999px);
  background: var(--surface-sunk, #eef2ee); overflow: hidden;
}
.pm-asm-bar > i {
  display: block; height: 100%;
  background: var(--accent-600, #1d4b34);
  border-radius: inherit;
  animation: pm-grow .55s var(--ease-out) both;
}

/* ------------------------------------------------------------
   06 OBSERVATIONS
   ------------------------------------------------------------ */
.pm-ins { display: grid; gap: var(--s-4); max-width: 1100px; }
.pm-in {
  display: grid; grid-template-columns: auto 1fr;
  gap: var(--s-4); align-items: start;
  padding: var(--s-5);
  border: 1px solid var(--border, #d8ded9);
  border-radius: var(--r-lg, 12px);
  background: var(--surface, #fff);
  border-inline-start-width: 3px;
}
.pm-in-flat { border-inline-start-color: var(--border-strong, #b9c4bd); }
.pm-in-up   { border-inline-start-color: var(--ok-600, #1c7a4a); }
.pm-in-down { border-inline-start-color: var(--bad-600, #b3261e); }
.pm-in-warn { border-inline-start-color: var(--warn-600, #9a6206); }
.pm-in-i {
  width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--surface-2, #f4f7f4);
  color: var(--text-mute, #6b7a72);
  font-size: var(--t-13); font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.pm-in-t {
  margin: 0 0 var(--s-2);
  font-size: clamp(16px, 1.35vw, 20px);
  line-height: 1.5;
  color: var(--text, #12211a);
}
/* the statistic that produced the observation, stated beside it */
.pm-in-e {
  font-size: var(--t-12);
  color: var(--text-faint, #97a49d);
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------
   PROJECTOR SIZES
   ------------------------------------------------------------ */

/* 2560x1440 and 1920x1080 — the room is large, so the type grows with it */
@media (min-width: 1800px) {
  .pm-root { font-size: 18px; }
  .pm-stage { padding: var(--s-10) var(--s-11); }
  .pm-chart { max-width: 1180px; }
}

/* 1366x768 — the most common classroom projector. Height is the constraint,
   so the vertical rhythm tightens rather than the type shrinking. */
@media (max-height: 820px) {
  .pm-stage { padding: var(--s-5) var(--s-8); }
  .pm-head { margin-block-end: var(--s-5); }
  .pm-open-t { margin-block-end: var(--s-5); }
  .pm-open-ctx { padding-block: var(--s-4); margin-block-end: var(--s-5); }
  .pm-open, .pm-slide { min-height: 0; }
  .pm-fig-v { font-size: clamp(34px, 4.4vw, 54px); }
  .pm-h2 { font-size: clamp(21px, 2.1vw, 27px); }
  .pm-terms, .pm-sects { gap: var(--s-4); }
  .pm-term { padding: var(--s-5); }
  .pm-in { padding: var(--s-4); }
  .pm-chart text { font-size: 13px; }
}

/* ------------------------------------------------------------
   SMALLER SCREENS

   Presentation Mode prioritises a projector, but it must not break on a laptop
   or a phone: nothing scrolls sideways, the type stays readable, and the bar
   wraps rather than clipping.
   ------------------------------------------------------------ */
@media (max-width: 1024px) {
  .pm-root { font-size: 15px; }
  .pm-cols { grid-template-columns: 1fr; }
  .pm-bar { padding: var(--s-3) var(--s-5); gap: var(--s-3); flex-wrap: wrap; }
  .pm-bar-ctx { order: 3; width: 100%; }
}
@media (max-width: 768px) {
  .pm-stage { padding: var(--s-5) var(--s-4); }
  .pm-steps { padding-inline: var(--s-4); gap: var(--s-4); }
  .pm-open-t { max-width: none; }
  .pm-figures { gap: var(--s-6); }
  .pm-open-ctx { gap: var(--s-5); }
  .pm-tbl { font-size: var(--t-13); }
  /* the assessment table scrolls inside its own box rather than the page */
  .pm-asms { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .pm-tbl-wide { min-width: 620px; }
  .pm-terms, .pm-sects { grid-template-columns: 1fr; }
  .pm-cols { grid-template-columns: 1fr; }
}
@media (max-width: 430px) {
  .pm-bar-nav { width: 100%; margin-inline-start: 0; justify-content: space-between; }
  .pm-open-ctx { flex-direction: column; gap: var(--s-3); }
  .pm-in { grid-template-columns: 1fr; gap: var(--s-2); }
  .pm-in-i { width: 28px; height: 28px; }
  .pm-sect { grid-template-columns: 1fr; grid-template-areas: "k" "v" "bar" "m" "go"; }
  .pm-sect-go { justify-self: start; }
}

/* ------------------------------------------------------------
   MOTION AND PRINT
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .pm-slide, .pm-term-bar > i, .pm-sect-bar > i, .pm-asm-bar > i { animation: none !important; }
  .pm-progress > i { transition: none; }
  .pm-root * { scroll-behavior: auto !important; }
}

@media print {
  .pm-bar-nav, .pm-steps, .pm-progress { display: none !important; }
  .pm-root { position: static; }
  .pm-stage { overflow: visible; padding: 0; display: block; }
  .pm-slide { animation: none; page-break-after: always; }
  .pm-in, .pm-term, .pm-sect { page-break-inside: avoid; }
}