/* Base project styles (safe defaults). Expand as needed. */

:root {
  /* Trust brand tokens */
  --colour-primary: #304354;
  --colour-primary-dark: #22313f;
  --colour-primary-light: #eef3f6;

  --colour-accent: #fff2a8;
  --colour-accent-strong: #f4d95b;

  --colour-white: #ffffff;
  --colour-black: #111827;

  --colour-bg: #f7f9fb;
  --colour-surface: #ffffff;
  --colour-border: #d9e1e7;
  --colour-text: #1f2933;
  --colour-heading: #1f2933;
  --colour-muted: #6b7280;

  --rag-red: #d64545;
  --rag-amber: #f4b740;
  --rag-green: #3f9d63;
  --rag-teal: #1aa6a6;
  --rag-blue: #2f6bb2;
  --rag-grey: #9ca3af;

  /* Risk register colours. Deliberately NOT the --rag-* set above: those
     are the 1-5 evaluation scale (--rag-blue is grade 1, Exceptional). A
     risk amber must never be mistaken for a quality judgement, so risk
     gets its own tokens and its own chip shape. Four bands, not three --
     yellow sits between green and amber. */
  --risk-red: #b3282d;
  --risk-amber: #c98a12;
  --risk-yellow: #e3c04a;
  --risk-green: #2f7d51;
  --risk-neutral: #6b7280;

  /* Operations & Resources. Blue here means "not yet benchmarked" and
     must NOT reuse --rag-blue, which is grade 1 (Exceptional) on the
     evaluation scale. A different blue, deliberately. */
  --ops-green: #2f7d51;
  --ops-amber: #c98a12;
  --ops-red: #b3282d;
  --ops-blue: #1f6f8b;
  --ops-blue-wash: #e8f2f6;
  --ops-green-wash: #e9f3ed;
  --ops-amber-wash: #fdf2e0;
  --ops-red-wash: #fbeced;

  --font-main: "Inter", "Segoe UI", Arial, sans-serif;
  --font-heading: "Inter", "Segoe UI", Arial, sans-serif;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;

  /* Form control sizing. Kept as tokens so every text box, select and
     textarea moves together rather than drifting field by field. */
  --radius-control: 8px;
  --control-height: 42px;
  --control-pad-y: 10px;
  --control-pad-x: 14px;
  --colour-border-hover: #b6c4d0;
  --shadow-card: 0 2px 8px rgba(48, 67, 84, 0.09);
  --shadow-lift: 0 4px 16px rgba(48, 67, 84, 0.13);

  /* App layout */
  --max-width: 1320px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--colour-bg);
  color: var(--colour-text);
  font-family: var(--font-main);
  font-size: 15px;
  line-height: 1.5;
}

/* App shell (left nav + content) */

.app-shell {
  min-height: 100vh;
  display: flex;
}

.sidebar {
  width: 240px;
  padding: 20px 14px 16px;
  background: var(--colour-surface);
  border-right: 1px solid var(--colour-border);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  flex-shrink: 0;
}

.sidebar-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 24px;
  padding: 12px;
  border: 1px solid var(--colour-border);
  border-radius: var(--radius-lg);
  background: var(--colour-surface);
}

.nav {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.nav-bottom {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--colour-border);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.nav a,
.nav-bottom a {
  display: block;
  width: 100%;
  text-decoration: none;
  padding: 8px 12px;
  border-radius: var(--radius-md);
  border: none;
  background: transparent;
  color: var(--colour-text);
  font-size: 14px;
  font-weight: 500;
  transition: background 120ms ease, color 120ms ease;
}

.nav a:hover,
.nav-bottom a:hover {
  background: var(--colour-primary-light);
  color: var(--colour-primary-dark);
}

.nav a[aria-current="page"],
.nav-bottom a[aria-current="page"] {
  background: var(--colour-primary-light);
  color: var(--colour-primary-dark);
  font-weight: 600;
}

.nav-signout {
  color: var(--colour-muted) !important;
  font-size: 13px !important;
}

.nav-signout:hover {
  color: var(--colour-text) !important;
}

.nav-bottom a.nav-signout[aria-current="page"] {
  color: var(--colour-primary-dark) !important;
}

.app-content {
  flex: 1;
}

main {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 28px 28px 40px;
}

.page-header {
  border-bottom: 1px solid var(--colour-border);
  margin-bottom: 24px;
  padding-bottom: 16px;
}

.page-title {
  margin: 0 0 16px;
}

.school-select {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  align-items: end;
  margin: 0;
  padding: 16px;
  border-radius: var(--radius-lg);
  background: var(--colour-surface);
  box-shadow: var(--shadow-card);
}

.school-select .form-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.school-select label {
  font-size: 11px;
  font-weight: 600;
  color: var(--colour-muted);
  text-transform: uppercase;
  letter-spacing: 0.6px;
}

.school-select .form-actions {
  display: flex;
  justify-content: flex-end;
}

.school-select select, .school-select input {
  min-height: var(--control-height);
  padding: var(--control-pad-y) var(--control-pad-x);
  border: 1px solid var(--colour-border);
  border-radius: var(--radius-control);
  background-color: var(--colour-surface);
  font-family: var(--font-main);
  font-size: 15px;
  color: var(--colour-text);
  transition: border-color 120ms ease, box-shadow 120ms ease;
}

.school-select select:focus, .school-select input:focus {
  outline: none;
  border-color: var(--colour-primary);
  box-shadow: 0 0 0 3px rgba(48, 67, 84, 0.1);
}

.school-select select {
  width: 100%;
  min-width: 0;
  /* The shorthand padding above resets the base select rule's right gutter;
     put it back so the label never runs under the chevron. */
  padding-right: 38px;
}

.school-select button {
  padding: 10px 20px;
  border-color: var(--colour-primary-dark);
  background: var(--colour-primary);
  color: var(--colour-white);
  font-weight: 600;
}

.school-select button:hover {
  background: var(--colour-primary-dark);
}

@media (max-width: 520px) {
  .school-select {
    width: 100%;
  }

  .school-select .form-actions {
    justify-content: stretch;
  }

  .school-select .form-actions button {
    width: 100%;
  }
}

.trust-emblem-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.trust-emblem {
  height: 40px;
  width: auto;
  object-fit: contain;
}

.trust-name {
  text-align: center;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.3px;
  color: var(--colour-primary);
}

h1 {
  margin: 0;
  font-size: 26px;
  line-height: 1.2;
  letter-spacing: -0.2px;
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--colour-primary-dark);
}

h2 {
  font-size: 18px;
  font-weight: 600;
  color: var(--colour-primary-dark);
  margin: 20px 0 12px;
}

p { margin: 0 0 14px; }

a { color: inherit; }

a.button, button {
  display: inline-block;
  padding: 9px 14px;
  border: 1px solid var(--colour-border);
  background: var(--colour-surface);
  color: var(--colour-text);
  border-radius: var(--radius-md);
  cursor: pointer;
  font-family: var(--font-main);
  font-size: 14px;
  font-weight: 500;
  transition: background 120ms ease, border-color 120ms ease;
}

button:hover, a.button:hover { background: var(--colour-primary-light); }

/* Form inputs

   One base rule for every text-like control and for <select>. Selects and
   number fields previously had no base rule, so the browser drew its own
   hard black border beside the soft grey of the text fields -- that
   mismatch is what read as jarring, not the text fields themselves. */

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="url"],
input[type="date"],
select {
  min-height: var(--control-height);
  padding: var(--control-pad-y) var(--control-pad-x);
  border: 1px solid var(--colour-border);
  border-radius: var(--radius-control);
  background-color: var(--colour-surface);
  font-family: var(--font-main);
  font-size: 15px;
  line-height: 1.4;
  color: var(--colour-text);
  outline: none;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

input[type="text"],
input[type="email"],
input[type="password"] {
  width: 100%;
}

/* The native select chrome is the black-bordered part. Replace it with our
   own chevron so a select sits at exactly the same height as a text field. */
select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 38px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%236b7280' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--control-pad-x) center;
  background-size: 12px 8px;
  cursor: pointer;
}

input[type="text"]:hover,
input[type="email"]:hover,
input[type="password"]:hover,
input[type="number"]:hover,
input[type="search"]:hover,
input[type="tel"]:hover,
input[type="url"]:hover,
input[type="date"]:hover,
select:hover {
  border-color: var(--colour-border-hover);
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="date"]:focus,
select:focus {
  border-color: var(--colour-primary);
  box-shadow: 0 0 0 3px rgba(48, 67, 84, 0.1);
}

input:disabled,
select:disabled {
  background-color: var(--colour-bg);
  color: var(--colour-muted);
  cursor: not-allowed;
}

/* Respond page actions */

.actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
  margin-top: 28px;
}

.actions button {
  padding: 10px 20px;
  border-color: var(--colour-primary-dark);
  background: var(--colour-primary);
  color: var(--colour-white);
  font-weight: 600;
  font-size: 14px;
}

.actions button:hover {
  background: var(--colour-primary-dark);
}

/* Lists (home page) */

.home-intro {
  margin: 4px 0 20px;
  padding: 18px 20px;
  border-radius: var(--radius-lg);
  background: var(--colour-surface);
  box-shadow: var(--shadow-card);
}

.home-intro p {
  margin: 0 0 14px;
}

.home-intro p:last-child {
  margin-bottom: 0;
}

.rag-legend {
  margin-top: 20px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
}

.rag-legend-item {
  display: grid;
  grid-template-columns: 44px 1fr;
  align-items: stretch;
  border: 1px solid var(--colour-border);
  border-radius: var(--radius-md);
  background: var(--colour-white);
  overflow: hidden;
}

.rag-legend-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 16px;
}

.rag-legend-text {
  padding: 10px 10px;
  display: flex;
  align-items: center;
}

.rag-legend-label {
  font-weight: 600;
  font-size: 13px;
  line-height: 1.2;
}

.rag-legend-item--5 .rag-legend-badge { background: var(--rag-red); color: var(--colour-white); }
.rag-legend-item--4 .rag-legend-badge { background: var(--rag-amber); color: var(--colour-black); }
.rag-legend-item--3 .rag-legend-badge { background: var(--rag-teal); color: var(--colour-white); }
.rag-legend-item--2 .rag-legend-badge { background: var(--rag-green); color: var(--colour-white); }
.rag-legend-item--1 .rag-legend-badge { background: var(--rag-blue); color: var(--colour-white); }

.school-list {
  list-style: none;
  padding: 0;
  margin: 0 0 18px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
}

.school-card {
  border-radius: var(--radius-md);
  padding: 16px;
  background: var(--colour-surface);
  box-shadow: var(--shadow-card);
  display: flex;
  gap: 16px;
  align-items: center;
}

.school-logo {
  width: 56px;
  height: 56px;
  object-fit: contain;
  background: var(--colour-white);
  border: 1px solid var(--colour-border);
  border-radius: var(--radius-md);
}

.school-name {
  font-weight: 600;
}

.school-meta {
  color: var(--colour-muted);
  font-size: 13px;
}

/* Tables */

table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 14px;
}

th, td {
  text-align: left;
  vertical-align: top;
  border-top: 1px solid var(--colour-border);
  padding: 10px 8px;
}

thead th {
  border-top: 0;
  border-bottom: 1px solid var(--colour-border);
  padding-top: 12px;
  padding-bottom: 12px;
}

/* Overview table */

.overview-table {
  border-collapse: separate;
  border-spacing: 10px;
  margin-top: 24px;
}

.overview-table th,
.overview-table td {
  text-align: center;
  vertical-align: middle;
  border-top: 0;
  padding: 12px 10px;
}

.overview-table .overview-area {
  text-align: left;
  font-weight: 700;
}

.overview-score {
  border: 1px solid var(--colour-border);
  border-radius: var(--radius-md);
  font-weight: 700;
  font-size: 16px;
  min-width: 84px;
}

.overview-score.score--5 { background: var(--rag-red); color: var(--colour-white); }
.overview-score.score--4 { background: var(--rag-amber); color: var(--colour-black); }
.overview-score.score--3 { background: var(--rag-teal); color: var(--colour-white); }
.overview-score.score--2 { background: var(--rag-green); color: var(--colour-white); }
.overview-score.score--1 { background: var(--rag-blue); color: var(--colour-white); }

/* ── Board view ───────────────────────────────────────────────────────────── */

.board-header-titles {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.board-period-subtitle {
  margin: 2px 0 0;
  font-size: 14px;
  font-weight: 500;
  color: var(--colour-muted);
  letter-spacing: 0.01em;
}

.board-legend {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 12px;
  margin: 0 0 10px;
  padding: 7px 12px;
  background: var(--colour-surface);
  border: 1px solid var(--colour-border);
  border-radius: var(--radius-md);
  width: fit-content;
}

.board-legend-item {
  display: flex;
  align-items: center;
  gap: 4px;
  font-weight: 500;
  color: var(--colour-text);
}

.board-legend-item--up    { color: var(--rag-green); }
.board-legend-item--down  { color: var(--rag-red); }
.board-legend-item--same  { color: var(--colour-muted); }
.board-legend-item--note  {
  color: var(--colour-muted);
  font-weight: 400;
  border-left: 1px solid var(--colour-border);
  padding-left: 12px;
}

.board-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-top: 6px;
}

.board-table {
  border-collapse: separate;
  border-spacing: 3px 10px;
  margin-top: 4px;
  min-width: max-content;
}

/* Rotated column headers */
.board-school-col {
  vertical-align: bottom;
  padding: 0 8px 10px 0;
  width: 150px;
  min-width: 150px;
  max-width: 150px;
  position: sticky;
  left: 0;
  background: var(--colour-bg);
  z-index: 2;
}

.board-school-col-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--colour-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.board-category-col {
  height: 152px;
  vertical-align: bottom;
  padding: 0 6px 10px;
  width: 112px;
  min-width: 112px;
  max-width: 112px;
}

.board-col-label {
  display: block;
  transform: rotate(-38deg);
  transform-origin: left bottom;
  white-space: normal;
  font-size: 13px;
  font-weight: 600;
  color: var(--colour-text);
  line-height: 1.15;
  width: 124px;
  margin-left: 18px;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.65);
}

/* School name (sticky first column) */
.board-school-name {
  text-align: left;
  font-weight: 600;
  font-size: 14px;
  line-height: 1.35;
  padding: 14px 10px 14px 0;
  white-space: normal;
  width: 150px;
  min-width: 150px;
  max-width: 150px;
  vertical-align: middle;
  overflow-wrap: anywhere;
  position: sticky;
  left: 0;
  background: var(--colour-bg);
  z-index: 1;
}

/* Data cells */
.board-cell {
  border-radius: var(--radius-md);
  text-align: center;
  padding: 0;
  font-weight: 700;
  font-size: 12px;
  vertical-align: middle;
  width: 112px;
  min-width: 112px;
  max-width: 112px;
  height: 68px;
  position: relative;
}

.board-cell.score--5 { background: var(--rag-red);   color: var(--colour-white); }
.board-cell.score--4 { background: var(--rag-amber); color: var(--colour-black); }
.board-cell.score--3 { background: var(--rag-teal);  color: var(--colour-white); }
.board-cell.score--2 { background: var(--rag-green); color: var(--colour-white); }
.board-cell.score--1 { background: var(--rag-blue);  color: var(--colour-white); }

.board-cell--empty {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.92)),
    var(--colour-surface);
  border: 1px dashed var(--colour-border);
}

.board-cell-content {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 68px;
  padding: 10px 10px 8px;
}

.board-cell-label {
  display: block;
  line-height: 1.25;
  white-space: normal;
  text-wrap: balance;
}

@media (max-width: 1100px) {
  .board-school-col {
    width: 136px;
    min-width: 136px;
    max-width: 136px;
  }

  .board-school-name {
    width: 136px;
    min-width: 136px;
    max-width: 136px;
    font-size: 13px;
    padding-right: 8px;
  }

  .board-category-col,
  .board-cell {
    width: 96px;
    min-width: 96px;
    max-width: 96px;
  }

  .board-category-col {
    height: 138px;
  }

  .board-col-label {
    width: 108px;
    margin-left: 14px;
    font-size: 12px;
  }
}

@media (max-width: 820px) {
  .board-legend {
    width: 100%;
  }

  .board-legend-item--note {
    border-left: 0;
    padding-left: 0;
    width: 100%;
  }

  .board-school-col {
    width: 124px;
    min-width: 124px;
    max-width: 124px;
  }

  .board-school-name {
    width: 124px;
    min-width: 124px;
    max-width: 124px;
  }

  .board-category-col,
  .board-cell {
    width: 88px;
    min-width: 88px;
    max-width: 88px;
  }

  .board-category-col {
    height: 126px;
  }

  .board-col-label {
    transform: rotate(-32deg);
    width: 96px;
    margin-left: 12px;
    font-size: 11px;
    line-height: 1.1;
  }

  .board-cell-content {
    padding-left: 8px;
    padding-right: 8px;
  }
}

/* Trend arrow — top-right corner of cell */
.board-trend {
  position: absolute;
  top: 4px;
  right: 6px;
  font-size: 11px;
  line-height: 1;
}

.board-trend--up   { opacity: 0.9; }
.board-trend--down { opacity: 0.9; }
.board-trend--same { opacity: 0.55; }

/* School dashboard grid */

.dashboard-table {
  border-collapse: separate;
  border-spacing: 10px;
  margin-top: 18px;
  table-layout: fixed;
}

.dashboard-table thead th:first-child {
  width: 30%;
}

.dashboard-table thead th:not(:first-child) {
  width: 23.333%;
}

.dashboard-table th,
.dashboard-table td {
  border-top: 0;
  padding: 12px 10px;
  vertical-align: middle;
}

.dashboard-table thead th {
  text-align: center;
  border-bottom: 0;
}

.dashboard-area {
  text-align: left;
  font-weight: 700;
  color: var(--colour-primary-dark);
  background: var(--colour-primary-light);
  border: 1px solid var(--colour-border);
  border-radius: var(--radius-md);
}

.dashboard-cell {
  border: 1px solid var(--colour-border);
  border-radius: var(--radius-md);
  background: var(--colour-surface);
}

.rag-group--compact {
  gap: 6px;
  justify-content: center;
}

.rag-group--compact .rag-pill {
  flex: 0 1 120px;
  max-width: 140px;
}

.rag-group--compact .rag-pill-text {
  min-height: 38px;
  padding: 8px 8px;
  font-size: 12px;
}

/* Evaluation table */

.evaluation-table {
  border-collapse: separate;
  border-spacing: 10px;
  margin-top: 18px;
}

.evaluation-table thead th:nth-child(1),
.evaluation-table thead th:nth-child(2) {
  width: 18%;
}

.evaluation-table thead th:nth-child(3),
.evaluation-table thead th:nth-child(4) {
  width: 32%;
}

.evaluation-table th,
.evaluation-table td {
  border-top: 0;
  padding: 12px 10px;
  vertical-align: top;
}

.evaluation-table thead th {
  text-align: left;
}

.evaluation-table td {
  border: 1px solid var(--colour-border);
  border-radius: var(--radius-md);
  background: var(--colour-surface);
}

.evaluation-area {
  text-align: left;
  font-weight: 700;
  color: var(--colour-primary-dark);
  background: var(--colour-primary-light);
  border: 1px solid var(--colour-border);
  border-radius: var(--radius-md);
}

.evaluation-table textarea {
  min-height: 220px;
}

.evaluation-judgement .rag-group {
  gap: 8px;
}

.evaluation-judgement .rag-pill {
  flex: 1 1 140px;
  max-width: 180px;
}

textarea {
  width: 100%;
  max-width: 100%;
  font-family: var(--font-main);
  font-size: 14px;
  line-height: 1.5;
  color: var(--colour-text);
  padding: var(--control-pad-y) var(--control-pad-x);
  border: 1px solid var(--colour-border);
  border-radius: var(--radius-control);
  background: var(--colour-surface);
  resize: vertical;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}

textarea:hover {
  border-color: var(--colour-border-hover);
}

textarea:focus {
  outline: none;
  border-color: var(--colour-primary);
  box-shadow: 0 0 0 3px rgba(48, 67, 84, 0.1);
}

/* ── Reflection page ── */

.reflection-form {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.reflection-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 20px;
  margin-bottom: 28px;
}

.reflection-card {
  background: var(--colour-surface);
  border: 1px solid var(--colour-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.reflection-card-header {
  background: var(--colour-primary-light);
  padding: 12px 18px;
  border-bottom: 1px solid var(--colour-border);
}

.reflection-area-name {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--colour-primary-dark);
}

.reflection-card-body {
  padding: 14px 18px 18px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.reflection-textarea {
  flex: 1;
  min-height: 130px;
  background: var(--colour-bg);
}

.reflection-textarea:focus {
  background: var(--colour-surface);
}

.reflection-textarea:disabled {
  opacity: 0.7;
  cursor: not-allowed;
  background: var(--colour-bg);
}

@media (max-width: 600px) {
  .reflection-grid {
    grid-template-columns: 1fr;
  }
}

/* RAG selector (OXLIP scale 5-1) */

.rag-group {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* Keep pill widths consistent in the popover (desktop/tablet).
   Long labels should wrap, not widen a single pill. */
@media (min-width: 521px) {
  .rag-picker-panel .rag-group {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    justify-content: stretch;
    gap: 10px;
  }

  .rag-picker-panel .rag-group--compact {
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 8px;
  }

  .rag-picker-panel .rag-pill {
    width: 100%;
    max-width: none;
    flex: none;
  }
}

/* Compact popover picker wrapper */

.rag-picker {
  position: relative;
}

.rag-picker-summary {
  list-style: none;
  cursor: pointer;
}

.rag-picker-summary::-webkit-details-marker {
  display: none;
}

.rag-picker .rag-current {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: 10px 10px;
  border-radius: var(--radius-md);
  border: 2px solid var(--colour-border);
  font-weight: 700;
  font-size: 13px;
  line-height: 1.15;
  white-space: normal;
  overflow-wrap: anywhere;
  user-select: none;
}

.rag-picker[open] .rag-current {
  border-color: var(--colour-primary-dark);
  box-shadow: var(--shadow-card);
}

.rag-current--blank { background: var(--colour-primary-light); color: var(--colour-primary-dark); }
.rag-current--5 { background: var(--rag-red); color: var(--colour-white); border-color: var(--rag-red); }
.rag-current--4 { background: var(--rag-amber); color: var(--colour-black); border-color: var(--rag-amber); }
.rag-current--3 { background: var(--rag-teal); color: var(--colour-white); border-color: var(--rag-teal); }
.rag-current--2 { background: var(--rag-green); color: var(--colour-white); border-color: var(--rag-green); }
.rag-current--1 { background: var(--rag-blue); color: var(--colour-white); border-color: var(--rag-blue); }

.rag-picker-panel {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 8px);
  z-index: 30;
  padding: 12px;
  border: 1px solid var(--colour-border);
  border-radius: var(--radius-lg);
  background: var(--colour-surface);
  box-shadow: var(--shadow-lift);
}

/* Table polish (use existing tokens, no new palette) */

.dashboard-table thead th,
.evaluation-table thead th,
.overview-table thead th {
  background: var(--colour-primary-light);
  color: var(--colour-primary-dark);
  border: 1px solid var(--colour-border);
  border-radius: var(--radius-md);
  font-weight: 600;
  font-size: 13px;
}

.overview-table .overview-area {
  background: var(--colour-primary-light);
  border: 1px solid var(--colour-border);
  border-radius: var(--radius-md);
}

details.rag-picker:not([open]) .rag-picker-panel {
  display: none;
}

.rag-picker-panel .rag-group {
  justify-content: center;
}

.rag-pill {
  position: relative;
  display: inline-flex;
  flex: 1 1 150px;
  max-width: 190px;
  align-items: stretch;
  border: 2px solid var(--colour-border);
  border-radius: var(--radius-md);
  background: transparent;
  overflow: hidden;
  transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease;
}

.rag-pill input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.rag-pill-text {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  width: 100%;
  text-align: center;
  min-height: 44px;
  padding: 10px 10px;
  font-weight: 600;
  font-size: 13px;
  line-height: 1.15;
  white-space: normal;
  overflow-wrap: break-word;
  word-break: normal;
  opacity: 0.55;
  filter: grayscale(0.7) saturate(0.6);
  transition: opacity 140ms ease, filter 140ms ease;
}

.rag-pill-value {
  font-size: 12px;
  opacity: 0.95;
}

.rag-pill-label {
  font-size: 13px;
}

.rag-pill--blank span {
  color: var(--colour-muted);
}

.rag-pill--5 span {
  background: var(--rag-red);
  color: var(--colour-white);
}

.rag-pill--4 span {
  background: var(--rag-amber);
  color: var(--colour-black);
}

.rag-pill--3 span {
  background: var(--rag-teal);
  color: var(--colour-white);
}

.rag-pill--2 span {
  background: var(--rag-green);
  color: var(--colour-white);
}

.rag-pill--1 span {
  background: var(--rag-blue);
  color: var(--colour-white);
}

.rag-pill:focus-within {
  border-color: var(--colour-primary-dark);
}

.rag-pill:focus-within .rag-pill-text {
  opacity: 1;
  filter: none;
}

/* Selected (checked) state: raise the pill */

.rag-pill input:checked + .rag-pill-text {
  box-shadow: var(--shadow-card);
  opacity: 1;
  filter: none;
}

.rag-pill:has(input:checked) {
  transform: translateY(-2px);
  border-color: var(--colour-primary-dark);
}

/* Fallback for browsers without :has() */
@supports not selector(:has(*)) {
  .rag-pill input:checked + .rag-pill-text {
    border: 2px solid var(--colour-primary-dark);
    margin: -2px;
  }
}

@media (max-width: 520px) {
  .rag-group {
    flex-direction: column;
    gap: 12px;
  }

  /* On mobile, the picker should feel like an array you can flick through. */
  .rag-picker-panel .rag-group {
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    padding-bottom: 4px;
  }

  .rag-picker-panel .rag-pill {
    flex: 0 0 78%;
    max-width: 78%;
    scroll-snap-align: center;
  }

  .rag-pill {
    flex: 0 0 auto;
  }

  .rag-pill-text {
    font-size: 15px;
    min-height: 54px;
    padding: 14px 12px;
  }

  .rag-pill-value {
    font-size: 14px;
  }

  .rag-pill-label {
    font-size: 16px;
  }
}

@media (min-width: 1100px) {
  .rag-group { gap: 8px; }
  .rag-pill { flex-basis: 160px; }
  .rag-pill-text { padding: 10px 8px; }
}

/* Messages / alerts */

.messages {
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.messages li {
  padding: 11px 16px;
  border-radius: var(--radius-md);
  font-size: 14px;
  font-weight: 500;
  border-left: 4px solid transparent;
}

.messages li.success { background: #ecfdf5; color: #065f46; border-left-color: #10b981; }
.messages li.error   { background: #fef2f2; color: #991b1b; border-left-color: #ef4444; }
.messages li.warning { background: #fffbeb; color: #92400e; border-left-color: #f59e0b; }
.messages li.info    { background: #eff6ff; color: #1e40af; border-left-color: #3b82f6; }

/* Form field errors (Django default: <ul class="errorlist">...) */

.errorlist {
  list-style: none;
  padding: 0;
  margin: 0 0 8px;
}

.errorlist li {
  color: var(--rag-red);
  font-weight: 600;
  font-size: 13px;
}

/* Login page */

.login-wrap {
  max-width: 400px;
}

.login-note {
  color: var(--colour-muted);
  font-size: 14px;
  margin: 0 0 16px;
}

.login-note--small {
  font-size: 13px;
  margin: 0 0 14px;
}

/* Django's password-rule help text is a bare <ul>. */
.login-note--small ul {
  margin: 4px 0 0;
  padding-left: 18px;
}

.login-note--small li {
  margin-bottom: 2px;
}

.login-actions {
  justify-content: flex-start;
}

.login-form-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}

.login-form-field label {
  font-size: 13px;
  font-weight: 500;
  color: var(--colour-text);
}

.login-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 20px 0;
  color: var(--colour-muted);
  font-size: 13px;
}

.login-divider::before,
.login-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--colour-border);
}

.btn-primary {
  display: inline-block;
  padding: 10px 20px;
  background: var(--colour-primary);
  color: var(--colour-white);
  border: none;
  border-radius: var(--radius-md);
  font-family: var(--font-main);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background 150ms ease;
}

.btn-primary:hover {
  background: var(--colour-primary-dark);
}

/* Page subtitle (school name label beneath the page title -- shown to EVERY
   user, not just single-school ones. A multi-school user who could only see
   their school inside a closed dropdown could not tell which school a save
   was about to write to.) */

.page-subtitle {
  margin: 6px 0 12px;
  font-size: 14px;
  color: var(--colour-muted);
}

/* The school line has to out-weigh the muted area label beside it. */

.page-subtitle--school {
  margin: 4px 0 10px;
}

.page-subtitle-label {
  color: var(--colour-muted);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.6px;
  margin-right: 6px;
}

.page-subtitle--school strong {
  color: var(--colour-primary-dark);
  font-weight: 700;
  font-size: 15px;
}

.page-subtitle-year {
  color: var(--colour-muted);
  margin-left: 8px;
}

/* Sub-title label (evaluation area label inside filter header) */

.sub-title {
  margin: 10px 0 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--colour-muted);
  letter-spacing: 0.2px;
}

/* Sidebar rating scale legend */

.sidebar-ratings {
  padding: 12px 0 4px;
  border-top: 1px solid var(--colour-border);
  margin-bottom: 4px;
}

.sidebar-ratings-title {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--colour-muted);
  padding: 0 12px;
  margin-bottom: 8px;
}

.sidebar-rating {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 12px;
  font-size: 12px;
  color: var(--colour-text);
}

.sidebar-rating-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 4px;
  font-weight: 700;
  font-size: 12px;
  flex-shrink: 0;
}

.sidebar-rating--5 .sidebar-rating-num { background: var(--rag-red); color: var(--colour-white); }
.sidebar-rating--4 .sidebar-rating-num { background: var(--rag-amber); color: var(--colour-black); }
.sidebar-rating--3 .sidebar-rating-num { background: var(--rag-teal); color: var(--colour-white); }
.sidebar-rating--2 .sidebar-rating-num { background: var(--rag-green); color: var(--colour-white); }
.sidebar-rating--1 .sidebar-rating-num { background: var(--rag-blue); color: var(--colour-white); }

/* Auto-submit filter forms: hide the Select button when JS is active */

.school-select.auto-submit .form-actions {
  display: none;
}

/* Unsaved changes indicator (appears inside .actions bar) */

.unsaved-indicator {
  display: none;
  font-size: 13px;
  font-weight: 500;
  color: #92400e;
  background: #fffbeb;
  border: 1px solid #f59e0b;
  border-radius: var(--radius-sm);
  padding: 4px 10px;
  align-self: center;
}

@keyframes osed-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.unsaved-indicator--visible {
  display: inline-block;
  animation: osed-fade-in 160ms ease;
}

/* Overview aggregate note */

.overview-aggregate-note {
  margin: 0 0 16px;
  padding: 10px 14px;
  background: var(--colour-primary-light);
  border-radius: var(--radius-md);
  font-size: 13px;
  color: var(--colour-muted);
}

.overview-avg-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--colour-muted);
  vertical-align: middle;
  margin-left: 4px;
}

/* Overview empty state */

.overview-empty {
  text-align: center;
  padding: 28px 16px !important;
  color: var(--colour-muted);
  font-size: 14px;
  border: 1px dashed var(--colour-border) !important;
  border-radius: var(--radius-md);
  background: var(--colour-surface) !important;
}

.overview-empty a {
  color: var(--colour-primary);
  text-decoration: underline;
}

/* Live word counter */

.word-counter {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  color: var(--colour-muted);
  text-align: right;
}

.word-counter--near { color: var(--rag-amber); font-weight: 500; }
.word-counter--limit { color: var(--rag-red); font-weight: 600; }

/* Review outcome / completion banner */

.review-outcome {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 11px 16px;
  background: var(--colour-surface);
  border: 1px solid var(--colour-border);
  border-radius: var(--radius-md);
  margin-bottom: 20px;
  box-shadow: var(--shadow-card);
}

.review-outcome-label {
  font-size: 13px;
  color: var(--colour-muted);
  font-weight: 500;
}

.review-outcome-badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: var(--radius-sm);
  font-weight: 700;
  font-size: 13px;
}

.review-outcome-badge--urgent_improvement { background: var(--rag-red); color: var(--colour-white); }
.review-outcome-badge--not_met { background: var(--rag-red); color: var(--colour-white); }
.review-outcome-badge--needs_attention { background: var(--rag-amber); color: var(--colour-black); }
.review-outcome-badge--expected_standard { background: var(--rag-teal); color: var(--colour-white); }
.review-outcome-badge--strong_standard { background: var(--rag-green); color: var(--colour-white); }
.review-outcome-badge--exceptional { background: var(--rag-blue); color: var(--colour-white); }
.review-outcome-badge--met { background: var(--rag-green); color: var(--colour-white); }

/* ── In-depth review: area purpose banner ─────────────────────────────────── */

.indepth-area-purpose {
  background: var(--colour-primary-light);
  border-left: 4px solid var(--colour-primary);
  padding: 12px 16px;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: 14px;
  color: var(--colour-primary-dark);
  margin: 0 0 24px;
}

/* ── In-depth review: ratings guidance (always-visible static box) ────────── */

.indepth-guidance-box {
  background: var(--colour-white);
  border: 1px solid var(--colour-border);
  border-left: 4px solid var(--colour-primary);
  border-radius: var(--radius-md);
  padding: 16px 20px;
  margin: 0 0 24px;
  font-size: 14px;
  color: var(--colour-text);
  line-height: 1.6;
}

.indepth-guidance-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--colour-heading);
  margin: 0 0 8px;
}

/* ── In-depth review: sub-section card ────────────────────────────────────── */

.indepth-subsection {
  background: var(--colour-white);
  border: 1px solid var(--colour-border);
  border-radius: var(--radius-md);
  padding: 20px 24px;
  margin: 0 0 20px;
}

.indepth-subsection-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 8px;
}

.indepth-subsection-name {
  font-size: 16px;
  font-weight: 600;
  color: var(--colour-heading);
  margin: 0;
  flex: 1;
}

.indepth-subsection-overview {
  font-size: 14px;
  color: var(--colour-muted);
  margin: 0 0 14px;
  font-style: italic;
}

/* ── Evidence criteria collapsible ────────────────────────────────────────── */

.indepth-criteria-details {
  margin: 0 0 16px;
  border: 1px solid var(--colour-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.indepth-criteria-summary {
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 500;
  color: var(--colour-primary);
  cursor: pointer;
  background: var(--colour-primary-light);
  list-style: none;
  user-select: none;
}

.indepth-criteria-summary::-webkit-details-marker { display: none; }

.indepth-criteria-summary::before {
  content: '▶ ';
  font-size: 10px;
}

details[open] .indepth-criteria-summary::before {
  content: '▼ ';
}

.indepth-criteria-body {
  padding: 12px 16px;
  font-size: 13px;
  color: var(--colour-text);
  line-height: 1.6;
  background: #fafafa;
}

/* ── Grade selector ────────────────────────────────────────────────────────── */

.indepth-grade-section {
  margin: 0 0 16px;
}

.indepth-grade-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--colour-heading);
  margin: 0 0 8px;
}

.indepth-grade-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 10px;
}

.indepth-grade-options--binary {
  flex-wrap: nowrap;
}

.indepth-grade-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: 2px solid var(--colour-border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  background: var(--colour-white);
  transition: border-color 150ms ease, background 150ms ease, color 150ms ease;
  white-space: nowrap;
}

.indepth-grade-btn input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

.indepth-grade-btn:hover {
  border-color: var(--colour-primary);
}

.indepth-grade-btn:focus-within {
  outline: 2px solid var(--colour-primary);
  outline-offset: 2px;
}

/* Grade colour variants */
.indepth-grade-btn--urgent_improvement { color: var(--rag-red); border-color: #eecfcf; }
.indepth-grade-btn--urgent_improvement.indepth-grade-btn--selected,
.indepth-grade-btn--urgent_improvement:has(input:checked) { background: var(--rag-red); color: var(--colour-white); border-color: var(--rag-red); }

.indepth-grade-btn--needs_attention { color: #b06c00; border-color: #f5deb3; }
.indepth-grade-btn--needs_attention.indepth-grade-btn--selected,
.indepth-grade-btn--needs_attention:has(input:checked) { background: var(--rag-amber); color: #000; border-color: var(--rag-amber); }

.indepth-grade-btn--expected_standard { color: #4d7060; border-color: #cde5d7; }
.indepth-grade-btn--expected_standard.indepth-grade-btn--selected,
.indepth-grade-btn--expected_standard:has(input:checked) { background: var(--rag-teal); color: var(--colour-white); border-color: var(--rag-teal); }

.indepth-grade-btn--strong_standard { color: #2e6e4a; border-color: #b3ddc5; }
.indepth-grade-btn--strong_standard.indepth-grade-btn--selected,
.indepth-grade-btn--strong_standard:has(input:checked) { background: var(--rag-green); color: var(--colour-white); border-color: var(--rag-green); }

.indepth-grade-btn--exceptional { color: var(--rag-blue); border-color: #bcd3ee; }
.indepth-grade-btn--exceptional.indepth-grade-btn--selected,
.indepth-grade-btn--exceptional:has(input:checked) { background: var(--rag-blue); color: var(--colour-white); border-color: var(--rag-blue); }

.indepth-grade-btn--not_met { color: var(--rag-red); border-color: #eecfcf; }
.indepth-grade-btn--not_met.indepth-grade-btn--selected,
.indepth-grade-btn--not_met:has(input:checked) { background: var(--rag-red); color: var(--colour-white); border-color: var(--rag-red); }

.indepth-grade-btn--met { color: #2e6e4a; border-color: #b3ddc5; }
.indepth-grade-btn--met.indepth-grade-btn--selected,
.indepth-grade-btn--met:has(input:checked) { background: var(--rag-green); color: var(--colour-white); border-color: var(--rag-green); }

/* Grade chip (current grade shown on sub-section header) */

.indepth-grade-chip {
  display: inline-block;
  padding: 3px 10px;
  border-radius: var(--radius-sm);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
}

.indepth-grade-chip--urgent_improvement,
.indepth-grade-chip--not_met { background: var(--rag-red); color: var(--colour-white); }
.indepth-grade-chip--needs_attention { background: var(--rag-amber); color: #000; }
.indepth-grade-chip--expected_standard { background: var(--rag-teal); color: var(--colour-white); }
.indepth-grade-chip--strong_standard { background: var(--rag-green); color: var(--colour-white); }
.indepth-grade-chip--exceptional { background: var(--rag-blue); color: var(--colour-white); }
.indepth-grade-chip--met { background: var(--rag-green); color: var(--colour-white); }

/* Grade descriptor text */

.indepth-grade-descriptor {
  background: #f8f8f8;
  border-left: 3px solid var(--colour-border);
  padding: 8px 12px;
  font-size: 13px;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  color: var(--colour-muted);
  margin: 0 0 4px;
}

/* ── Sub-section field containers ─────────────────────────────────────────── */

.indepth-field {
  margin: 0 0 14px;
}

.indepth-field-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--colour-heading);
  margin: 0 0 6px;
}

.indepth-field textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 8px 12px;
  font-size: 13px;
  border: 1px solid var(--colour-border);
  border-radius: var(--radius-sm);
  font-family: inherit;
  resize: vertical;
}

.indepth-field textarea:focus {
  outline: 2px solid var(--colour-primary);
  outline-offset: 1px;
  border-color: transparent;
}

/* Overall grade outcome note */
.review-outcome-note {
  font-size: 12px;
  color: var(--colour-muted);
  margin-left: 8px;
}

/* ── In-depth review: standard (grade band) section ───────────────────────── */

.indepth-standard {
  margin: 0 0 28px;
}

.indepth-standard-header {
  margin: 0 0 14px;
  padding: 0 0 8px;
  border-bottom: 2px solid var(--colour-border);
}

.indepth-standard-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--colour-heading);
  margin: 0;
}

.indepth-standard-focus {
  font-size: 13px;
  color: var(--colour-muted);
  margin: 6px 0 0;
}

/* A rung shown on the commentary page only because a write-up exists on it
   (the grade moved after it was written). One line under the heading, so it
   never reads as "OSED still thinks I'm at Strong". */
.indepth-standard-kept {
  margin: 6px 0 0;
  font-size: 13px;
  color: var(--colour-muted);
}

/* ── Judgement-area card ───────────────────────────────────────────────────── */

.indepth-judgement {
  background: var(--colour-white);
  border: 1px solid var(--colour-border);
  border-radius: var(--radius-md);
  padding: 18px 22px;
  margin: 0 0 16px;
}

.indepth-judgement-statement {
  font-size: 15px;
  font-weight: 600;
  color: var(--colour-heading);
  line-height: 1.5;
  margin: 0 0 12px;
}

.indepth-ja-meta {
  margin: 0 0 12px;
}

.indepth-ja-meta-label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--colour-primary);
  margin: 0 0 4px;
}

.indepth-ja-list {
  margin: 0;
  padding-left: 20px;
  font-size: 13px;
  color: var(--colour-text);
  line-height: 1.6;
}

.indepth-ja-list li {
  margin: 0 0 4px;
}

.indepth-ja-sources {
  font-size: 12px;
  color: var(--colour-muted);
  margin: 0 0 12px;
}

/* ── RAG self-rating buttons ───────────────────────────────────────────────── */

.indepth-rag-section {
  margin: 14px 0;
}

.indepth-rag-options {
  display: flex;
  gap: 8px;
  margin: 6px 0 0;
}

.indepth-rag-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 18px;
  border: 2px solid var(--colour-border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  background: var(--colour-white);
  transition: border-color 150ms ease, background 150ms ease, color 150ms ease;
}

.indepth-rag-btn input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

.indepth-rag-btn:hover { border-color: var(--colour-primary); }
.indepth-rag-btn:focus-within { outline: 2px solid var(--colour-primary); outline-offset: 2px; }

.indepth-rag-btn--red { color: var(--rag-red); border-color: #eecfcf; }
.indepth-rag-btn--red.indepth-rag-btn--selected,
.indepth-rag-btn--red:has(input:checked) { background: var(--rag-red); color: var(--colour-white); border-color: var(--rag-red); }

.indepth-rag-btn--amber { color: #b06c00; border-color: #f5deb3; }
.indepth-rag-btn--amber.indepth-rag-btn--selected,
.indepth-rag-btn--amber:has(input:checked) { background: var(--rag-amber); color: #000; border-color: var(--rag-amber); }

.indepth-rag-btn--green { color: #2e6e4a; border-color: #b3ddc5; }
.indepth-rag-btn--green.indepth-rag-btn--selected,
.indepth-rag-btn--green:has(input:checked) { background: var(--rag-green); color: var(--colour-white); border-color: var(--rag-green); }

/* ── Reference & overall-grade sections ───────────────────────────────────── */

.indepth-reference {
  margin: 0 0 28px;
}

.indepth-reference-intro,
.indepth-ref-note {
  font-size: 13px;
  color: var(--colour-muted);
  margin: 0 0 10px;
}

.indepth-ref-note {
  font-style: italic;
}

.indepth-overall {
  margin: 0 0 24px;
  padding: 18px 22px;
  background: var(--colour-primary-light);
  border-radius: var(--radius-md);
}

.indepth-overall .indepth-grade-options {
  margin-top: 10px;
}

/* ── Keyboard focus visibility ─────────────────────────────────────────────── */

a:focus-visible,
button:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--colour-primary);
  outline-offset: 2px;
}

/* ── Mobile navigation (top bar + off-canvas sidebar) ─────────────────────── */

.mobile-topbar {
  display: none;
}

.sidebar-backdrop {
  display: none;
}

@media (max-width: 767px) {
  .mobile-topbar {
    display: flex;
    align-items: center;
    gap: 12px;
    position: sticky;
    top: 0;
    z-index: 30;
    background: var(--colour-surface);
    border-bottom: 1px solid var(--colour-border);
    padding: 10px 14px;
  }

  .mobile-topbar-title {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 15px;
    letter-spacing: 0.3px;
    color: var(--colour-primary);
  }

  .mobile-nav-toggle {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    width: 38px;
    height: 38px;
    padding: 9px;
    border: 1px solid var(--colour-border);
    border-radius: var(--radius-md);
    background: var(--colour-surface);
    cursor: pointer;
  }

  .mobile-nav-toggle-bar {
    display: block;
    width: 100%;
    height: 2px;
    border-radius: 1px;
    background: var(--colour-primary-dark);
  }

  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    height: 100vh;
    z-index: 40;
    transform: translateX(-100%);
    transition: transform 200ms ease;
  }

  body.mobile-nav-open .sidebar {
    transform: translateX(0);
    box-shadow: var(--shadow-lift);
  }

  body.mobile-nav-open .sidebar-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 35;
    background: rgba(31, 41, 51, 0.45);
  }

  body.mobile-nav-open {
    overflow: hidden;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sidebar {
    transition: none;
  }

  .unsaved-indicator--visible {
    animation: none;
  }
}

/* ── In-depth review: two-step ladder flow ────────────────────────────────── */

/* Rungs not yet reached are hidden until the JS reveals them. */
.indepth-rung.is-hidden {
  display: none;
}

/* Step navigation between the ratings page and the commentary page. */
.indepth-steps {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0 0 20px;
  font-size: 14px;
}

.indepth-steps .indepth-step {
  color: var(--colour-primary);
  text-decoration: none;
  font-weight: 600;
}

.indepth-steps .indepth-step--current {
  color: var(--colour-text);
  font-weight: 700;
}

.indepth-step-sep {
  color: var(--colour-muted);
}

/* Flipped-polarity warning on the Urgent Improvement rung. */
.indepth-downpath-note {
  background: #fdf3f3;
  border-left: 4px solid var(--rag-red);
  padding: 10px 14px;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: 13px;
  margin: 8px 0 0;
}

/* The concluded-grade box while the ladder is still incomplete. */
.review-outcome--pending {
  border-style: dashed;
  box-shadow: none;
}

.review-outcome--pending .review-outcome-badge {
  background: var(--colour-surface-2, #eef0f3);
  color: var(--colour-muted);
  font-weight: 600;
}

/* Carried-over RAG tag shown beside each statement on the commentary page. */
.indepth-rag-tag {
  display: inline-block;
  padding: 1px 8px;
  border-radius: var(--radius-sm);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-right: 8px;
  vertical-align: middle;
}

.indepth-rag-tag--red { background: var(--rag-red); color: var(--colour-white); }
.indepth-rag-tag--amber { background: var(--rag-amber); color: #000; }
.indepth-rag-tag--green { background: var(--rag-green); color: var(--colour-white); }

.indepth-empty {
  padding: 16px;
  background: var(--colour-surface);
  border: 1px solid var(--colour-border);
  border-radius: var(--radius-md);
}


/* -- Risk register ----------------------------------------------------------
   Risk uses square-cornered, uppercase chips so it reads as a different scale
   from the rounded evaluation .rag-pill at a glance. Every chip carries its
   band as text: the Trust Dashboard block goes into a board pack as a
   screenshot, and may be printed in greyscale.
   ------------------------------------------------------------------------ */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.risk-card {
  background: var(--colour-surface);
  border: 1px solid var(--colour-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  padding: 18px 20px;
  margin-bottom: 18px;
}

.risk-card-title {
  margin: 0 0 4px;
  font-size: 1.05rem;
  color: var(--colour-heading);
}

.risk-card-sub,
.risk-review-intro {
  margin: 0 0 14px;
  font-size: 0.86rem;
  color: var(--colour-muted);
}

.risk-review-intro { color: var(--colour-text); }

.risk-empty {
  margin: 0;
  color: var(--colour-muted);
  font-size: 0.9rem;
}

.risk-matrix-wrap,
.risk-table-wrap {
  overflow-x: auto;
}

.risk-matrix {
  width: 100%;
  min-width: 520px;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 4px;
}

/* The three likelihood columns share the space left by the row-label column,
   so every cell in the grid is the same size. */
.risk-matrix col.risk-matrix-col--label { width: 150px; }
.risk-matrix col.risk-matrix-col--band { width: auto; }

.risk-matrix th,
.risk-matrix td {
  border-top: 0;
  border-bottom: 0;
  vertical-align: middle;
}

.risk-matrix th {
  text-align: center;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--colour-muted);
  padding: 4px 8px;
}

.risk-matrix thead th {
  padding-top: 4px;
  padding-bottom: 6px;
}

.risk-matrix th[scope="row"] {
  text-align: right;
  white-space: nowrap;
  color: var(--colour-text);
}

.risk-matrix-cell {
  height: 44px;
  text-align: center;
  padding: 10px 8px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--colour-white);
  border-radius: var(--radius-sm);
}

.risk-matrix-cell--red { background: var(--risk-red); }
.risk-matrix-cell--amber { background: var(--risk-amber); }
.risk-matrix-cell--yellow { background: var(--risk-yellow); color: var(--colour-black); }
.risk-matrix-cell--green { background: var(--risk-green); }

.risk-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  font-size: 0.82rem;
  color: var(--colour-text);
}

.risk-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.risk-legend-swatch {
  width: 11px;
  height: 11px;
  border-radius: 2px;
  display: inline-block;
}

.risk-legend-swatch--red { background: var(--risk-red); }
.risk-legend-swatch--amber { background: var(--risk-amber); }
.risk-legend-swatch--yellow { background: var(--risk-yellow); }
.risk-legend-swatch--green { background: var(--risk-green); }

.risk-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.86rem;
}

.risk-table th {
  text-align: left;
  padding: 9px 10px;
  background: var(--colour-primary);
  color: var(--colour-white);
  font-weight: 600;
  font-size: 0.8rem;
}

.risk-table th:first-child { border-top-left-radius: var(--radius-sm); }
.risk-table th:last-child { border-top-right-radius: var(--radius-sm); }

.risk-table td {
  padding: 10px;
  border-bottom: 1px solid var(--colour-border);
  vertical-align: top;
}

.risk-cell-title { font-weight: 600; min-width: 190px; }
.risk-cell-mitigation { max-width: 260px; }
.risk-cell-review { white-space: nowrap; font-size: 0.8rem; color: var(--colour-muted); }

.risk-row--closed { opacity: 0.55; }
.risk-row-note td { border-bottom: 1px solid var(--colour-border); padding-top: 0; }
.risk-row-note label { font-size: 0.78rem; color: var(--colour-muted); }
.risk-row-note input { width: 100%; margin-top: 4px; }

.risk-table select { width: 100%; min-width: 118px; }

.risk-chip {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 3px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--colour-white);
  background: var(--risk-neutral);
}

.risk-chip--red { background: var(--risk-red); }
.risk-chip--amber { background: var(--risk-amber); }
.risk-chip--yellow { background: var(--risk-yellow); color: var(--colour-black); }
.risk-chip--green { background: var(--risk-green); }

.risk-chip--escalated {
  background: transparent;
  color: var(--risk-red);
  border: 1px solid var(--risk-red);
}

.risk-chip--none {
  background: transparent;
  color: var(--colour-muted);
  border: 1px dashed var(--colour-border);
  text-transform: none;
  letter-spacing: 0;
  font-weight: 600;
}

.risk-cat,
.risk-route {
  display: inline-block;
  font-size: 0.72rem;
  padding: 2px 7px;
  border-radius: 3px;
  margin-right: 4px;
}

.risk-cat {
  background: var(--colour-primary-light);
  color: var(--colour-primary-dark);
}

.risk-route {
  font-weight: 700;
  letter-spacing: 0.04em;
  border: 1px solid var(--colour-border);
  color: var(--colour-primary-dark);
  background: var(--colour-white);
}

.risk-trend,
.risk-qa-flag,
.risk-prev {
  display: inline-block;
  font-size: 0.72rem;
  color: var(--colour-muted);
  margin-right: 5px;
}

.risk-trend--worsening { color: var(--risk-red); font-weight: 600; }
.risk-trend--persisting { color: var(--risk-amber); font-weight: 600; }
.risk-trend--improving { color: var(--risk-green); font-weight: 600; }
.risk-qa-flag--done { color: var(--risk-green); }

.risk-add-form {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: flex-start;
}

.risk-add-form .form-field { flex: 1 1 200px; }
.risk-add-form .form-field--wide { flex: 1 1 100%; }
.risk-add-form input[type="text"],
.risk-add-form select,
.risk-add-form textarea { width: 100%; }
.risk-add-form .form-actions { flex: 1 1 100%; }

.form-hint {
  margin: 4px 0 0;
  font-size: 0.76rem;
  color: var(--colour-muted);
}

.form-label {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  margin-bottom: 4px;
}

.risk-preview {
  display: inline-block;
  padding: 7px 12px;
  border-radius: 3px;
  font-weight: 700;
  font-size: 0.8rem;
  background: var(--colour-primary-light);
  color: var(--colour-primary-dark);
}

.risk-preview--red { background: var(--risk-red); color: var(--colour-white); }
.risk-preview--amber { background: var(--risk-amber); color: var(--colour-white); }
.risk-preview--yellow { background: var(--risk-yellow); color: var(--colour-black); }
.risk-preview--green { background: var(--risk-green); color: var(--colour-white); }

.risk-close-block { margin-top: 16px; }

.risk-close-block > summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 0.9rem;
}

.risk-close-form {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: flex-start;
  padding: 10px 0;
  border-bottom: 1px solid var(--colour-border);
}

.risk-close-label { flex: 1 1 200px; font-size: 0.86rem; font-weight: 600; }
.risk-close-form textarea { flex: 2 1 320px; }
.risk-error { color: var(--risk-red); font-size: 0.8rem; margin: 4px 0 0; flex: 1 1 100%; }

.risk-board { margin-top: 22px; }
.risk-table--board td { white-space: normal; }
.risk-table--board .risk-cell-title { min-width: 220px; }

.risk-qa-block { margin-top: 16px; }

.risk-qa-heading {
  margin: 0 0 8px;
  font-size: 0.9rem;
  color: var(--colour-heading);
}

.risk-qa-form {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--colour-border);
}

.risk-qa-form-label { flex: 1 1 240px; font-size: 0.86rem; font-weight: 600; }


/* -- Operations & Resources -------------------------------------------------
   Its own token set again. Blue here means "not yet benchmarked" -- it must not
   borrow --rag-blue, which is grade 1 (Exceptional) on the evaluation scale.
   Rounded pills, so ops reads differently from risk's square chips too.
   ------------------------------------------------------------------------ */

.ops-legend-row {
  background: var(--colour-surface);
  border: 1px solid var(--colour-border);
  border-radius: var(--radius-md);
  padding: 10px 16px;
  margin-bottom: 8px;
}

.ops-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.83rem;
}

.ops-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.ops-legend-swatch {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  display: inline-block;
}

.ops-legend-swatch--green { background: var(--ops-green); }
.ops-legend-swatch--amber { background: var(--ops-amber); }
.ops-legend-swatch--red { background: var(--ops-red); }
.ops-legend-swatch--blue { background: var(--ops-blue); }

.ops-standing-line {
  margin: 0 0 16px;
  font-style: italic;
  font-size: 0.85rem;
  color: var(--colour-muted);
}

.ops-scope {
  margin: 0 0 12px;
  font-size: 0.85rem;
  color: var(--colour-text);
  font-weight: 600;
}

.ops-card {
  background: var(--colour-surface);
  border: 1px solid var(--colour-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  padding: 16px 20px;
  margin-bottom: 16px;
}

.ops-domain-title {
  margin: 0 0 10px;
  font-size: 1rem;
  color: var(--colour-heading);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.ops-domain-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  display: inline-block;
  background: var(--ops-blue);
}

.ops-domain-dot--green { background: var(--ops-green); }
.ops-domain-dot--amber { background: var(--ops-amber); }
.ops-domain-dot--red { background: var(--ops-red); }

.ops-domain-count {
  font-size: 0.76rem;
  font-weight: 500;
  color: var(--colour-muted);
}

.ops-row {
  padding: 12px 0;
  border-top: 1px solid var(--colour-border);
}

.ops-row:first-of-type { border-top: none; }

.ops-row-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.ops-metric-name {
  font-weight: 600;
  font-size: 0.92rem;
  flex: 1 1 240px;
}

.ops-chip {
  display: inline-block;
  padding: 3px 12px;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--colour-white);
  background: var(--ops-blue);
}

.ops-chip--green { background: var(--ops-green); }
.ops-chip--amber { background: var(--ops-amber); }
.ops-chip--red { background: var(--ops-red); }
.ops-chip--blue { background: var(--ops-blue); }
.ops-chip--sm { padding: 1px 8px; font-size: 0.68rem; }

.ops-tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 600;
  border: 1px solid var(--colour-border);
  color: var(--colour-muted);
  background: var(--colour-white);
}

.ops-tag--benchmarked { color: var(--colour-primary-dark); background: var(--colour-primary-light); }
.ops-tag--judgement { font-style: italic; }

/* A Blue tile must look deliberate, not like a rendering failure. */
.ops-blue-note {
  margin: 8px 0 0;
  padding: 8px 12px;
  border-left: 3px solid var(--ops-blue);
  background: var(--ops-blue-wash);
  font-size: 0.82rem;
  color: var(--colour-text);
}

/* The three band statements, read-only. Shown on metrics whose colour comes
   from a figure rather than a choice; the band the figure landed in is marked
   so the tile explains its own chip. */
.ops-bands {
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 0.76rem;
}

.ops-band {
  flex: 1 1 190px;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--colour-border);
  border-left: 4px solid var(--band);
  background: var(--colour-bg);
  color: var(--colour-text);
}

.ops-band-key {
  display: block;
  font-weight: 700;
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--band);
}

.ops-band-desc { display: block; margin-top: 1px; }

.ops-band.is-current {
  background: var(--band-wash);
  border-color: var(--band);
}

.ops-band--green { --band: var(--ops-green); --band-wash: var(--ops-green-wash); }
.ops-band--amber { --band: var(--ops-amber); --band-wash: var(--ops-amber-wash); }
.ops-band--red { --band: var(--ops-red); --band-wash: var(--ops-red-wash); }

/* The same quiet fourth state as the picker's option, so a derived tile and a
   chosen one show the same four bands. Muted until it is the one in force. */
.ops-band--none {
  --band: var(--ops-blue);
  --band-wash: var(--ops-blue-wash);
  color: var(--colour-muted);
}

.ops-band--none.is-current { color: var(--colour-text); }

/* ...and the same three statements as the picker, where the Principal chooses
   the band rather than a figure deciding it. The statement is the button: no
   colour-word-to-paragraph matching, and the chosen band is readable at a
   glance in a greyscale board-pack screenshot because it carries its label. */
.ops-bandpick {
  flex: 1 1 100%;
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

.ops-bandpick-legend {
  padding: 0;
  margin-bottom: 5px;
  font-size: 0.78rem;
  color: var(--colour-muted);
}

.ops-bandpick-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Kept in the accessibility tree and focusable -- hidden, not removed. */
.ops-bandpick-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.ops-bandpick-option {
  flex: 1 1 190px;
  display: block;
  padding: 8px 11px;
  border: 1px solid var(--colour-border);
  border-left: 4px solid var(--band);
  border-radius: var(--radius-sm);
  background: var(--colour-bg);
  font-size: 0.76rem;
  color: var(--colour-text);
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
}

.ops-bandpick-key {
  display: block;
  font-weight: 700;
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--band);
}

.ops-bandpick-key::before {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 6px;
  vertical-align: -1px;
  border: 2px solid var(--band);
  border-radius: 50%;
  background: transparent;
}

.ops-bandpick-desc { display: block; margin-top: 2px; }

.ops-bandpick-option:hover { border-color: var(--band); }

.ops-bandpick-input:checked + .ops-bandpick-option {
  background: var(--band-wash);
  border-color: var(--band);
  box-shadow: inset 0 0 0 1px var(--band);
}

.ops-bandpick-input:checked + .ops-bandpick-option .ops-bandpick-key::before {
  background: var(--band);
  box-shadow: inset 0 0 0 2px var(--colour-surface);
}

.ops-bandpick-input:focus-visible + .ops-bandpick-option {
  outline: 2px solid var(--colour-primary);
  outline-offset: 2px;
}

.ops-bandpick-input:disabled + .ops-bandpick-option { cursor: default; }

/* Read-only users see the same buttons, so the chosen band still reads as a
   band. Only the unchosen ones fade back. */
.ops-bandpick-input:disabled:not(:checked) + .ops-bandpick-option { opacity: 0.55; }

.ops-bandpick-option--green { --band: var(--ops-green); --band-wash: var(--ops-green-wash); }
.ops-bandpick-option--amber { --band: var(--ops-amber); --band-wash: var(--ops-amber-wash); }
.ops-bandpick-option--red { --band: var(--ops-red); --band-wash: var(--ops-red-wash); }

/* Not yet rated: the tile is Blue, and Blue is never Green. It takes the
   Operations blue and no growing width, so it reads as the quiet option
   rather than a fourth band. */
.ops-bandpick-option--none {
  flex: 0 1 auto;
  --band: var(--ops-blue);
  --band-wash: var(--ops-blue-wash);
  color: var(--colour-muted);
}

.ops-comparator,
.ops-help,
.ops-meta {
  margin: 6px 0 0;
  font-size: 0.76rem;
  color: var(--colour-muted);
}

.ops-theme-note {
  margin: 6px 0 0;
  font-size: 0.78rem;
  font-style: italic;
  color: var(--colour-muted);
}

.ops-commentary {
  margin: 6px 0 0;
  font-size: 0.85rem;
}

.ops-subitems {
  margin: 8px 0 0;
  padding-left: 18px;
  font-size: 0.8rem;
  color: var(--colour-text);
}

.ops-subitem--overdue { color: var(--ops-red); font-weight: 600; }

.ops-entry {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 10px;
}

.ops-field { flex: 1 1 180px; font-size: 0.78rem; }
.ops-field--wide { flex: 1 1 100%; }
.ops-field > span { display: block; margin-bottom: 3px; color: var(--colour-muted); }
.ops-field input,
.ops-field select,
.ops-field textarea { width: 100%; }

.ops-anything-else { width: 100%; }

.ops-card--plain { background: var(--colour-primary-light); }

.ops-empty {
  margin: 0;
  color: var(--colour-muted);
  font-size: 0.88rem;
}

.ops-risk-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 7px 0;
  border-top: 1px solid var(--colour-border);
}

.ops-risk-row:first-of-type { border-top: none; }
.ops-risk-title { flex: 1 1 260px; font-size: 0.88rem; }
.ops-risk-detail { font-size: 0.76rem; color: var(--colour-muted); }

.ops-small-print {
  margin: 18px 0 0;
  font-size: 0.76rem;
  color: var(--colour-muted);
  line-height: 1.55;
}

/* Trust Dashboard roll-up */
.ops-board { margin-top: 22px; }

.ops-summary-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: flex-start;
}

.ops-summary-tiles { flex: 2 1 460px; }
.ops-exec-summary {
  flex: 1 1 260px;
  background: var(--colour-primary-light);
  border-radius: var(--radius-md);
  padding: 12px 14px;
}

.ops-exec-summary h3 {
  margin: 0 0 6px;
  font-size: 0.85rem;
  color: var(--colour-primary-dark);
}

.ops-exec-summary ul { margin: 0; padding-left: 18px; font-size: 0.8rem; }
.ops-exec-summary li { margin-bottom: 4px; }

.ops-school-row {
  padding: 10px 0;
  border-top: 1px solid var(--colour-border);
}

.ops-school-row:first-of-type { border-top: none; }

.ops-school-name { font-weight: 600; font-size: 0.9rem; }

.ops-school-scope {
  font-size: 0.74rem;
  color: var(--colour-muted);
  margin-left: 8px;
}

.ops-count-chips { display: inline-flex; gap: 6px; flex-wrap: wrap; margin-left: 8px; }

.ops-note-history { margin-top: 14px; border-top: 1px solid var(--colour-border); padding-top: 10px; }

.ops-note-history-title {
  margin: 0 0 6px;
  font-size: 0.8rem;
  color: var(--colour-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.ops-note-history-item { margin-bottom: 8px; font-size: 0.83rem; }
.ops-note-history-item p { margin: 2px 0 0; }

.ops-note-history-term { font-weight: 600; font-size: 0.76rem; color: var(--colour-muted); }

/* Governor-only closing line on the Trust Dashboard: the risk and operations
   blocks are suppressed for them, so the page needs a deliberate ending. */
.board-governor-note {
  margin: 18px 0 0;
  font-size: 0.85rem;
  color: var(--colour-muted);
  line-height: 1.55;
}

/* Read-only commentary on the Evaluation page: the stored text, not a
   textarea a read-only account can type into and never save. */
.evaluation-readonly-text {
  font-size: 0.9rem;
  line-height: 1.5;
  white-space: normal;
}

.evaluation-readonly-text p { margin: 0 0 8px; }
.evaluation-readonly-text p:last-child { margin-bottom: 0; }
.evaluation-readonly-text:empty::before {
  content: "4";
  color: var(--colour-muted);
}

.evaluation-readonly-empty {
  margin: 0;
  font-size: 0.85rem;
  font-style: italic;
  color: var(--colour-muted);
}


/* Choose-a-school: the deliberate blank state shown on a scoped page when the
   user holds more than one school and has not named one. A narrow column so
   the single control reads as a decision to make, not as a filter bar with a
   page that failed to load underneath it. */
.choose-school {
  max-width: 560px;
}

.choose-school-lead {
  font-size: 16px;
  margin: 0 0 20px;
}

.choose-school-note {
  margin: 16px 0 0;
  max-width: 52ch;
  font-size: 14px;
  color: var(--colour-muted);
}

/* One column, and the button stays visible: this form opts out of the
   filter-bar auto-submit in base.html via data-no-auto-submit. */
.school-select--choose {
  grid-template-columns: 1fr;
}

.school-select--choose .form-actions {
  justify-content: flex-start;
}

/* Context Dashboard (Power BI embed) ------------------------------------- */
/* No new static file: one stylesheet, so nothing extra has to land in
   staticfiles.json under CompressedManifestStaticFilesStorage. */

/* Its own class rather than reusing .ops-standing-line. That selector belongs
   to the Operations pilot's legend, and if it ever grows an --ops-* accent to
   match the pilot's Blue-band language, this page would inherit it by
   accident -- which is how the three colour scales get crossed. */
.bi-standing-line {
  margin: 0 0 16px;
  font-style: italic;
  font-size: 0.85rem;
  color: var(--colour-muted);
}

/* Deliberately NOT small print. This carries FILTER_NOTICE -- the sentence
   this feature shipped on, telling a Trust leader that Power BI and not OSED
   decides what they can see. Muted 0.8rem grey is the treatment people skip,
   and skipping this one is how it ends up misdescribed in a DPIA. Full body
   colour, full size, and an accent border so it reads as a statement. */
.bi-notice {
  margin: 0 0 18px;
  padding: 14px 16px;
  border: 1px solid var(--colour-border);
  border-left: 4px solid var(--colour-text);
  border-radius: 8px;
  background: var(--colour-surface);
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--colour-text);
}

/* The supplied embed code was a fixed 1140x541.25. Holding the ratio and NOT
   a min-height: the two fight, and the ratio only wins above a ~1391px
   viewport (1320px max-width, less the 240px sidebar and 56px of main
   padding). A min-height of 520px therefore turned every laptop into a
   squeeze and a 375px phone into a 319x520 portrait box -- the worst
   possible shape for a landscape BI report. Below 1024px the frame is hidden
   outright in favour of .bi-narrow-note: a report too small to read is not a
   degraded version of this page, it is a support ticket saying it is broken. */
.bi-frame-wrap {
  position: relative;
  width: 100%;
  /* The report canvas is authored 16:9, so the frame is shaped to match it or
     Power BI answers with a scrollbar and the bottom of the report is cut off
     -- which is what the old 1140/541.25 (2.11:1) did.

     Slightly taller than 16:9 on purpose. Power BI draws its own page-tab
     strip INSIDE the frame, below the canvas, and that strip is a fixed
     height whatever the width. At exactly 16/9 it eats into the canvas and
     the scrollbar comes back. 16/9.5 leaves room for it across the widths
     this frame is shown at (it is hidden below 1024px), at the cost of a
     shallow letterbox at the extremes -- which is the harmless failure of
     the two. If the strip ever changes height, this is the number to tune. */
  aspect-ratio: 16 / 9.5;
  background: var(--colour-surface);
  border: 1px solid var(--colour-border);
  border-radius: 10px;
  overflow: hidden;
}

/* Behind the iframe, which paints over it when Power BI renders. No JS:
   we cannot observe a cross-origin load anyway, and a spinner that never
   stops is worse than a word that quietly disappears. */
.bi-frame-loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  color: var(--colour-muted);
  font-size: 0.9rem;
}

.bi-frame {
  /* Load-bearing, and it does not look it. `.bi-frame-loading` above is a
     full-size `position: absolute; inset: 0` element with no background, so
     it covers the whole panel invisibly. Both elements are `z-index: auto`
     and therefore paint in tree order; this `position: relative` is the only
     thing putting the iframe last and letting it take the clicks. Remove it
     as a tidy and every click inside the Power BI report quietly stops
     working, for everyone, with nothing on screen to show for it. */
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.bi-narrow-note { display: none; }

@media (max-width: 1023px) {
  .bi-frame-wrap { display: none; }
  .bi-narrow-note {
    display: block;
    padding: 24px;
    background: var(--colour-surface);
    border: 1px dashed var(--colour-border);
    border-radius: 10px;
    color: var(--colour-text);
    line-height: 1.6;
  }
}

/* A visible control, not a footnote. When the frame above is blank -- a
   cross-origin failure OSED cannot detect, and the expected one -- this link
   is the only way forward, so it has to be the thing the eye lands on. */
.bi-fallback {
  margin: 16px 0 0;
  font-size: 0.9rem;
  color: var(--colour-text);
}

.bi-fallback a {
  display: inline-block;
  margin-left: 6px;
  padding: 8px 16px;
  border: 1px solid var(--colour-border);
  border-radius: 8px;
  background: var(--colour-surface);
  font-weight: 600;
  text-decoration: none;
}

.bi-fallback a:hover,
.bi-fallback a:focus {
  border-color: var(--colour-text);
}

.bi-unavailable {
  padding: 28px;
  background: var(--colour-surface);
  border: 1px dashed var(--colour-border);
  border-radius: 10px;
  color: var(--colour-muted);
}

.bi-unavailable-title {
  margin: 0 0 8px;
  font-size: 1rem;
  color: var(--colour-text);
}

/* ── Save as PDF (print_export.js) ─────────────────────────────────────────

   The button opens the browser's print dialog; everything below decides what
   the PDF looks like. On screen, only the button bar shows. In print, the app
   chrome goes, and each textarea is swapped for the div.print-mirror that
   print_export.js builds beside it on beforeprint -- a printed textarea shows
   only what fits in its box and cannot break across pages. The mirror only
   ever reads the field; nothing stored is touched. */

.export-pdf-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 12px;
  margin: 0 0 12px;
}

/* display:flex above would otherwise beat the hidden attribute. */
.export-pdf-bar[hidden] {
  display: none;
}

.export-pdf-hint {
  font-size: 12px;
  color: var(--colour-muted);
}

.print-only,
.print-mirror,
.indepth-rung-print-note {
  display: none;
}

@media print {
  @page { margin: 15mm; }

  body { background: #fff; }

  .sidebar,
  .sidebar-backdrop,
  .mobile-topbar,
  .school-select,
  .export-pdf-bar,
  .sub-title,
  .messages,
  .readonly-notice,
  .actions,
  .unsaved-indicator,
  .word-counter,
  .indepth-steps,
  .indepth-override-panel,
  .indepth-guidance-box,
  .indepth-criteria-details,
  .rag-picker-panel {
    display: none !important;
  }

  .app-shell { display: block; min-height: 0; }
  .app-content { width: 100%; }
  main { max-width: none; margin: 0; padding: 0; }
  .page-header { margin-bottom: 12px; padding-bottom: 8px; }

  .print-only { display: block; }
  .print-context { margin: 0 0 4px; font-weight: 600; }
  .print-unsaved { display: block; font-weight: 700; }
  .print-unsaved:empty { display: none; }

  /* A textarea prints as its full text instead -- but only once its mirror
     exists. With no script, the clipped box is better than nothing. */
  textarea:has(+ .print-mirror) { display: none !important; }
  .print-mirror {
    display: block;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    border: 1px solid #999;
    border-radius: 4px;
    padding: 6px 8px;
    font-size: 11pt;
    line-height: 1.4;
  }
  .print-mirror--empty { color: #666; font-style: italic; }

  /* Keep the band colours, which browsers drop by default. The band is also
     printed as words, so a greyscale PDF still reads. */
  .rag-current,
  .indepth-rag-btn,
  .indepth-rag-tag,
  .review-outcome,
  .review-outcome-badge,
  .indepth-standard-header,
  .board-cell {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* Evaluation: no card shadows or spacing that wastes paper. */
  .evaluation-table { border-spacing: 4px; margin-top: 8px; }
  .evaluation-table td { background: #fff; }
  .evaluation-table thead { display: table-header-group; }
  .rag-picker .rag-current { min-height: 0; }
  /* "Select rating" is an instruction; a saved copy should state the fact.
     CSS, not markup: rag_toggle.js rewrites this chip's text. */
  .rag-picker .rag-current--blank { font-size: 0; }
  .rag-picker .rag-current--blank::after {
    content: "Not rated";
    font-size: 11pt;
    font-style: italic;
    font-weight: 400;
  }
  .review-outcome { box-shadow: none; }

  /* In-depth ratings: print only the chosen answer, or say none was chosen. */
  .indepth-rag-btn input[type="radio"] { display: none; }
  .indepth-rag-btn:not(:has(input:checked)) { display: none; }
  /* A rung the ladder has not opened on screen still prints if it holds a
     stored rating: the PDF is the record, not the current view. */
  .indepth-rung.is-hidden:has(input:checked) { display: block !important; }
  .indepth-rung.is-hidden .indepth-rung-print-note {
    display: block;
    font-style: italic;
    margin: 4px 0 0;
  }
  .indepth-rag-options:not(:has(input:checked))::before {
    content: "Not rated";
    font-style: italic;
    color: #666;
  }

  /* Keep a heading or statement with what follows it, but let long write-ups
     flow across pages: holding a whole judgement together leaves half-empty
     pages wherever two 150-word texts do not fit. */
  .indepth-judgement-statement,
  .indepth-standard-header {
    break-inside: avoid;
    break-after: avoid;
  }
}